:root{
    --bg:#0b141a; --panel:#111b21; --panel2:#202c33; --panel3:#2a3942;
    --border:#222d34; --text:#e9edef; --sub:#8696a0; --accent:#00a884;
    --out:#005c4b; --in:#202c33; --chip:#182229; --link:#53bdeb;
  }
  *{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent}
  html,body{height:100%; height:100dvh}
  body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
    background:var(--bg); color:var(--text); overflow:hidden;
    -webkit-text-size-adjust:100%; text-size-adjust:100%;
  }
  button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
  input,select{font:inherit}
  button,input,select,a,.chat-item{touch-action:manipulation}
  #app{display:flex; height:100%;
       padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}

  /* ---------- sidebar ---------- */
  #side{width:clamp(280px, 32vw, 350px); flex:none; background:var(--panel);
        border-right:1px solid var(--border); display:flex; flex-direction:column}
  #side header{padding:16px 20px 10px; display:flex; align-items:center; gap:10px}
  #side header .logo{display:flex}
  #side header h1{font-size:17px; font-weight:600}
  #side header .tag{margin-left:auto; font-size:10.5px; color:var(--sub);
        border:1px solid var(--border); border-radius:99px; padding:3px 8px; white-space:nowrap}
  #filterWrap{padding:0 12px 10px; display:flex; gap:8px}
  #filter{flex:1; background:var(--panel2); border:none; border-radius:8px;
        padding:8px 12px; color:var(--text); outline:none; min-width:0}
  #filter::placeholder{color:var(--sub)}
  .sideAdd{background:var(--panel2); border-radius:8px; padding:8px 10px;
        color:var(--accent); font-size:13px; white-space:nowrap}
  #chats{flex:1; overflow-y:auto; overscroll-behavior:contain}
  .chat-item{display:flex; gap:13px; padding:11px 14px; cursor:pointer; align-items:center}
  .chat-item.active{background:var(--panel3)}
  .avatar{width:46px; height:46px; border-radius:50%; flex:none; display:flex;
        align-items:center; justify-content:center; font-size:19px; font-weight:600; color:#fff}
  .chat-item .cmeta{min-width:0; flex:1}
  .chat-item .cname{font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .chat-item .csub{font-size:12.5px; color:var(--sub); margin-top:2px;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  #side .foot{padding:10px 16px calc(10px + env(safe-area-inset-bottom)); font-size:11.5px;
        color:var(--sub); border-top:1px solid var(--border)}

  /* ---------- main ---------- */
  #main{flex:1; display:flex; flex-direction:column; min-width:0; position:relative}
  #empty{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
        gap:14px; padding:0 24px; color:var(--sub); border-bottom:6px solid var(--accent)}
  #empty .big{display:flex}
  #empty h2{color:var(--text); font-weight:300; font-size:28px; text-align:center}
  #empty p{font-size:13.5px; max-width:440px; text-align:center; line-height:1.55}
  #pickRow{display:flex; align-items:center; gap:12px; margin-top:6px}
  #pickBtn{background:var(--accent); color:#06231d; font-weight:600;
        border-radius:99px; padding:11px 22px; font-size:14px}
  #pickFolderBtn{color:var(--link); font-size:13.5px; padding:11px 6px}
  #emptyNote{font-size:11.5px; color:var(--sub); opacity:.8; max-width:420px;
        text-align:center}
  /* only phones and tablets pay the copy this explains */
  #phoneNote{display:none; font-size:11.5px; color:var(--sub); opacity:.9;
        max-width:420px; text-align:center; line-height:1.55;
        border-top:1px solid var(--border); padding-top:11px}
  @media (pointer:coarse){#phoneNote{display:block}}
  #empty .h2sub{font-size:16px; color:var(--sub); font-weight:300}
  #helpLink{color:var(--link); font-size:13px; padding:4px 8px}
  #helpOverlay{position:fixed; inset:0; background:rgba(4,10,14,.7); z-index:60;
        display:none; align-items:center; justify-content:center;
        padding:20px max(20px, env(safe-area-inset-right)) 20px max(20px, env(safe-area-inset-left))}
  #helpOverlay.on{display:flex}
  #helpCard{background:var(--panel2); border:1px solid var(--border); border-radius:14px;
        max-width:520px; width:100%; max-height:85vh; overflow-y:auto; padding:20px 22px;
        box-shadow:0 14px 40px rgba(0,0,0,.55)}
  .helpHead{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
  .helpHead h3{font-size:16px; font-weight:600}
  .helpHead button{color:var(--sub); font-size:17px; padding:4px 9px; border-radius:8px}
  #helpCard ol{margin:0 0 14px 20px; display:flex; flex-direction:column; gap:8px}
  #helpCard li{font-size:13.5px; line-height:1.5}
  .helpTip{font-size:12.5px; color:var(--sub); line-height:1.55; margin-top:10px}
  #emptyLegal{font-size:11.5px; color:var(--sub); opacity:.85; text-align:center; margin-top:10px}
  #emptyLegal a{color:var(--link)}
  #fileInput,#folderInput{display:none}
  #dropOverlay{position:fixed; inset:0; background:rgba(0,168,132,.12); z-index:80;
        display:none; align-items:center; justify-content:center; pointer-events:none;
        border:3px dashed var(--accent)}
  #dropOverlay span{background:var(--panel2); color:var(--text); padding:14px 26px;
        border-radius:12px; font-size:16px}

  #chatview{flex:1; display:none; flex-direction:column; min-height:0}
  #chatview.on{display:flex}

  #head{background:var(--panel2); padding:10px 16px; display:flex; align-items:center;
        gap:13px; z-index:5}
  #btnBack{display:none; align-items:center; justify-content:center; flex:none;
        padding:8px 4px; margin:0 -5px 0 -6px; color:var(--accent)}
  #btnBack svg{display:block; fill:none; stroke:currentColor; stroke-width:2.2;
        stroke-linecap:round; stroke-linejoin:round}
  #head .cmeta{min-width:0; flex:1}
  #head .cname{font-size:16px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  #head .csub{font-size:12.5px; color:var(--sub); margin-top:1px;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  #head .tools{display:flex; align-items:center; gap:4px}
  #head .tools button{display:flex; align-items:center; justify-content:center; padding:8px;
        border-radius:50%; color:var(--sub)}
  #head .tools svg{display:block; fill:none; stroke:currentColor; stroke-width:1.7;
        stroke-linecap:round; stroke-linejoin:round}
  #meSelect{background:var(--panel3); color:var(--text); border:none; border-radius:8px;
        padding:6px 8px; font-size:12.5px; max-width:150px; outline:none}

  #calPanel{position:absolute; top:56px; right:14px; z-index:30; background:var(--panel2);
        border:1px solid var(--border); border-radius:12px; padding:12px 12px 10px; width:268px;
        box-shadow:0 10px 30px rgba(0,0,0,.55); display:none}
  #calPanel.on{display:block}
  .calHead{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
  .calHead button{font-size:18px; color:var(--sub); padding:2px 10px; border-radius:8px}
  .calHead button:disabled{opacity:.25; cursor:default}
  #calTitle{font-size:13.5px; font-weight:600}
  .calGrid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
  .calGrid .dow{font-size:10.5px; color:var(--sub); text-align:center; padding:3px 0}
  .calGrid button{font-size:12.5px; color:var(--text); padding:6px 0; border-radius:7px}
  .calGrid button.has{font-weight:600; color:var(--accent)}
  .calGrid button:disabled{color:var(--sub); opacity:.35; cursor:default}
  .calGrid .blank{visibility:hidden}

  #searchbar{display:none; background:var(--panel2); border-top:1px solid var(--border);
        padding:8px 16px; align-items:center; gap:10px}
  #searchbar.on{display:flex}
  #searchbar input{flex:1; background:var(--panel3); border:none; border-radius:8px;
        padding:8px 12px; color:var(--text); outline:none; min-width:0}
  #searchbar .count{font-size:12.5px; color:var(--sub); white-space:nowrap; min-width:70px; text-align:center}
  #searchbar button{font-size:15px; color:var(--sub); padding:6px 8px; border-radius:8px}
  #searchbar button:disabled{opacity:.3; cursor:default}

  #scroller{flex:1; overflow-y:auto; overflow-anchor:none; overscroll-behavior:contain;
        position:relative; background:var(--bg);
        background-image:radial-gradient(rgba(255,255,255,.03) 1px, transparent 1.4px);
        background-size:24px 24px; padding:14px 7% 20px}
  #spin{position:absolute; inset:0; display:none; align-items:center; justify-content:center;
        flex-direction:column; gap:12px; background:var(--bg); z-index:4; color:var(--sub); font-size:13px}
  #spin.on{display:flex}
  .loader{width:34px; height:34px; border-radius:50%; border:3px solid var(--panel3);
        border-top-color:var(--accent); animation:spin 0.9s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}

  #dateFloat{position:sticky; top:8px; height:0; display:flex; justify-content:center;
        align-items:flex-start; z-index:7; pointer-events:none; opacity:0; transition:opacity .25s}
  #dateFloat.on{opacity:1}
  #dateFloat span{background:var(--chip); color:var(--sub); font-size:12px; padding:5px 12px;
        border-radius:8px; border:1px solid var(--border); box-shadow:0 2px 8px rgba(0,0,0,.45);
        white-space:nowrap}

  .day{display:flex; justify-content:center; margin:14px 0 6px}
  .day span{background:var(--chip); color:var(--sub); font-size:12px; padding:5px 12px;
        border-radius:8px; box-shadow:0 1px 1px rgba(0,0,0,.3)}
  .sys{display:flex; justify-content:center; margin:6px 0}
  .sys span{background:var(--chip); color:#ffd279; font-size:12px; padding:5px 12px;
        border-radius:8px; max-width:80%; text-align:center; line-height:1.45}

  .row{display:flex; margin-top:10px}
  .row.cont{margin-top:2px}
  .row.out{justify-content:flex-end}
  .bubble{max-width:min(65%,560px); background:var(--in); border-radius:9px; padding:5px 8px 6px 9px;
        position:relative; box-shadow:0 1px 1px rgba(0,0,0,.25); overflow-wrap:anywhere}
  .row.out .bubble{background:var(--out)}
  .sender{font-size:12.5px; font-weight:600; margin:1px 0 2px}
  .btext{font-size:14.2px; line-height:1.42; white-space:pre-wrap}
  .btext.jumbo{font-size:42px; line-height:1.2}
  .btext a{color:var(--link)}
  .btext mark{background:rgba(255,210,80,.5); color:inherit; border-radius:3px; padding:0 1px}
  .meta{display:inline-flex; float:right; gap:4px; align-items:center; font-size:10.8px;
        color:var(--sub); margin:6px 0 0 10px; user-select:none; white-space:nowrap}
  .row.out .meta{color:#9fd2c6}
  .bubble.deleted .btext{color:var(--sub); font-style:italic}
  .call{display:flex; gap:8px; align-items:center; font-size:13.5px; color:var(--sub); padding:3px 2px}
  .call .ic{font-size:16px}

  .bubble .mediaBox{margin:2px 0 2px; border-radius:7px; overflow:hidden; background:#000}
  .bubble img.photo{display:block; max-width:100%; max-height:360px; cursor:pointer; min-width:80px;
        min-height:110px; object-fit:cover}
  .bubble video.vid{display:block; max-width:100%; max-height:360px; min-width:200px; min-height:200px}
  .bubble video.gifv{display:block; max-width:100%; max-height:280px; min-height:150px}
  .row .stickerwrap{background:none; box-shadow:none; padding:2px}
  img.sticker{width:150px; height:150px; object-fit:contain; display:block}
  .bubble audio{width:290px; max-width:100%; display:block; margin:4px 0; height:38px}
  .filechip{display:flex; align-items:center; gap:10px; background:rgba(0,0,0,.18);
        border-radius:8px; padding:10px 12px; margin:2px 0; max-width:320px}
  .filechip .fic{font-size:24px}
  .filechip .fname{font-size:13.5px; word-break:break-all; line-height:1.3}
  .filechip a{color:var(--link); font-size:12px; text-decoration:none; cursor:pointer}
  .missing{border:1.5px dashed var(--panel3); border-radius:8px; padding:14px 16px;
        color:var(--sub); font-size:12.5px; font-style:italic; display:flex; gap:8px; align-items:center}
  .missing a{color:var(--link); cursor:pointer}
  .caption{margin-top:3px}
  .hl{animation:flash 1.8s ease}
  @keyframes flash{0%,60%{background:rgba(0,168,132,.35); border-radius:9px} 100%{background:none}}

  #toBottom{position:absolute; right:22px; bottom:76px; width:42px; height:42px; border-radius:50%;
        background:var(--panel2); color:var(--sub); font-size:19px; display:none; align-items:center;
        justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.4); z-index:6}
  #toBottom.on{display:flex}
  #readonly{background:var(--panel2); color:var(--sub); font-size:12px;
        padding:9px 16px calc(9px + env(safe-area-inset-bottom)); text-align:center;
        border-top:1px solid var(--border)}
  #readonly .brief{display:none}

  /* ---------- lightbox ---------- */
  #lightbox{position:fixed; inset:0; background:rgba(4,10,14,.94); z-index:50; display:none;
        flex-direction:column; padding:0 env(safe-area-inset-right) 0 env(safe-area-inset-left)}
  #lightbox.on{display:flex}
  #lbBar{display:flex; align-items:center; gap:14px; padding:12px 18px; color:var(--sub)}
  #lbInfo{font-size:13px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  #lbBar .sp{flex:1}
  #lbBar button{color:var(--sub); font-size:19px; padding:6px 10px; border-radius:8px; cursor:pointer}
  #lbBody{flex:1; display:flex; align-items:center; justify-content:center; min-height:0; padding:0 18px 18px}
  #lbBody img,#lbBody video{max-width:100%; max-height:100%; border-radius:4px}

  #toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); background:#000c;
        color:#fff; padding:9px 16px; border-radius:8px; font-size:13px; z-index:99; display:none}

  /* ---------- pointer-specific styling ----------
     Hover effects only where a hovering pointer exists, so taps on touch
     screens don't leave elements stuck highlighted; touch gets :active
     feedback instead. */
  @media (hover:hover){
    .sideAdd:hover{background:var(--panel3)}
    .chat-item:hover{background:var(--panel2)}
    #pickBtn:hover{filter:brightness(1.08)}
    #pickFolderBtn:hover,#helpLink:hover{text-decoration:underline}
    #head .tools button:hover,.helpHead button:hover{background:var(--panel3); color:var(--text)}
    .calHead button:hover,.calGrid button.has:hover,#searchbar button:hover{background:var(--panel3)}
    #lbBar button:hover{background:var(--panel2); color:var(--text)}
  }
  @media (hover:none){
    .chat-item:active{background:var(--panel2)}
    #btnBack:active,#head .tools button:active,.helpHead button:active,.calHead button:active,
    .calGrid button.has:active,#searchbar button:active,#lbBar button:active{background:var(--panel3)}
  }

  /* below this the chat pane is too narrow for the full read-only sentence */
  @media (max-width:940px){
    #readonly .full{display:none}
    #readonly .brief{display:inline}
  }

  /* ---------- phones ----------
     The two panes become two screens, like WhatsApp itself: the chat list
     fills the viewport, and opening a chat slides the conversation in with
     a back button in its header (see the chatOpen / noArchives classes on
     #app). Tablets and wider keep the split view. */
  @media (max-width:700px){
    #side{width:100%; border-right:none}
    #main{display:none}
    #app.chatOpen #side,#app.noArchives #side{display:none}
    #app.chatOpen #main,#app.noArchives #main{display:flex}
    #btnBack{display:flex}
    #empty .h2sub{display:block; margin-top:2px}
    #head{padding:8px 10px; gap:9px}
    #head .avatar{width:38px; height:38px; font-size:16px}
    #meSelect{max-width:96px}
    #calPanel{right:10px}
    #searchbar{padding:8px 10px; gap:8px}
    #searchbar .count{min-width:0}
    #scroller{padding:10px 12px 16px}
    .bubble{max-width:80%}
    .btext{font-size:15.5px}
    #pickRow{flex-direction:column; gap:2px}
    #toBottom{right:14px; bottom:64px}
    #lbBody{padding:0 8px calc(8px + env(safe-area-inset-bottom))}
  }
  @media (max-width:700px) and (prefers-reduced-motion:no-preference){
    #app.chatOpen #main{animation:paneIn .2s ease-out}
    #app:not(.chatOpen):not(.noArchives) #side{animation:paneBack .2s ease-out}
  }
  @keyframes paneIn{from{transform:translateX(28px); opacity:.5}}
  @keyframes paneBack{from{transform:translateX(-28px); opacity:.5}}

  ::-webkit-scrollbar{width:8px; height:8px}
  ::-webkit-scrollbar-thumb{background:#374045; border-radius:4px}
  ::-webkit-scrollbar-track{background:transparent}