:root{
    --bg:#ffffff;
    --sidebar:#fafafa;
    --border:#ececec;
    --text:#111111;
    --text-dim:#6b6b6b;
    --text-faint:#9a9a9a;
    --accent:#e00000;
    --accent-soft:#ffe9e9;
    --danger:#ff3b3b;
    --bubble:#f5f5f5;
    --radius:10px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{height:100%;}
  body{
    font-family:'Inter',sans-serif;
    background:var(--bg);
    color:var(--text);
    height:100vh;
    overflow:hidden;
  }
  .mono{font-family:'JetBrains Mono',monospace;}

  /* ---------- Setup screen ---------- */
  #setup{
    position:fixed; inset:0;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg);
    z-index:50;
  }
  .setup-card{ width:340px; text-align:center; }
  .logo-mark{
    width:44px; height:44px;
    display:inline-block;
    margin-bottom:14px;
  }
  .logo-mark img{ width:100%; height:100%; object-fit:contain; }
  .setup-card h1{ font-size:22px; font-weight:800; letter-spacing:-0.02em; margin-bottom:6px; }
  .setup-card p{ color:var(--text-dim); font-size:13.5px; margin-bottom:28px; line-height:1.5; }
  .setup-card input{
    width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius);
    font-family:'Inter',sans-serif; font-size:14px; outline:none; margin-bottom:12px;
    transition:border-color .15s;
  }
  .setup-card input:focus{border-color:var(--accent);}
  .setup-card button{
    width:100%; padding:12px 14px; border:none; border-radius:var(--radius);
    background:var(--accent); color:#fff; font-weight:600; font-size:14px; cursor:pointer;
    transition:background .15s;
  }
  .setup-card button:hover{opacity:.88;}
  .setup-card button:disabled{opacity:.5; cursor:not-allowed;}

  .auth-tabs{
    display:flex; gap:4px; background:var(--sidebar); border:1px solid var(--border);
    border-radius:var(--radius); padding:3px; margin-bottom:20px;
  }
  .auth-tab{
    flex:1; padding:8px; border-radius:7px; text-align:center; font-size:13px;
    font-weight:600; color:var(--text-dim); cursor:pointer; transition:all .12s;
  }
  .auth-tab.active{background:#fff; color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.08);}
  .auth-error{
    display:none; text-align:left; background:var(--accent-soft); color:var(--accent);
    font-size:12px; font-weight:600; padding:9px 12px; border-radius:8px; margin-bottom:12px;
  }
  .auth-error.show{display:block;}
  .auth-hint{
    font-size:11.5px; color:var(--text-faint); margin-top:-4px; margin-bottom:14px; text-align:left;
  }

  /* ---------- App shell ---------- */
  #app{display:none; height:100vh;}
  #app.active{display:flex;}

  .sidebar{
    width:250px; min-width:250px; background:var(--sidebar);
    border-right:1px solid var(--border);
    display:flex; flex-direction:column;
    padding:20px 14px;
    overflow-y:auto;
  }
  .brand{display:flex; align-items:center; gap:9px; padding:0 6px 22px 6px;}
  .brand-icon{ width:22px; height:22px; object-fit:contain; flex-shrink:0; }
  .brand .dot{width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft);}
  .brand span{font-weight:800; font-size:15px; letter-spacing:-0.02em;}

  .section-label{
    display:flex; align-items:center; justify-content:space-between;
    font-size:10.5px; text-transform:uppercase; letter-spacing:.08em;
    color:var(--text-faint); font-weight:600; padding:0 6px; margin:14px 0 6px 0;
  }
  .section-label .count{
    background:var(--accent); color:#fff; border-radius:20px; padding:1px 7px;
    font-size:10px; font-weight:700;
  }

  .room, .friend-item{
    display:flex; align-items:center; gap:8px;
    padding:8px 10px; border-radius:8px; cursor:pointer;
    font-size:13.5px; color:var(--text-dim); font-weight:500;
    transition:background .12s, color .12s;
  }
  .room:hover, .friend-item:hover{background:#f0f0f0;}
  .room.active, .friend-item.active{background:var(--accent); color:#fff;}
  .room .hash{opacity:.6; font-weight:700;}
  .friend-item .avatar-dot{
    width:20px; height:20px; border-radius:50%; background:var(--accent);
    color:#fff; font-size:9.5px; font-weight:700; display:flex; align-items:center; justify-content:center;
    flex-shrink:0; position:relative;
  }
  .friend-item.active .avatar-dot{background:#fff; color:var(--accent);}
  .presence-dot{
    position:absolute; bottom:-1px; right:-1px; width:8px; height:8px; border-radius:50%;
    background:#c6c6c6; border:2px solid var(--sidebar);
  }
  .presence-dot.online{background:#22c55e;}
  .presence-dot.away{background:#f59e0b;}
  .presence-dot.busy{background:#ef4444;}
  .friend-item.active .presence-dot{border-color:var(--accent);}
  .me-avatar{ position:relative; background-size:cover; background-position:center; }
  .avatar-dot{ background-size:cover; background-position:center; }
  .friend-item-text{ min-width:0; flex:1; display:flex; flex-direction:column; }
  .friend-status-msg{ font-size:10px; opacity:.7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .info-btn{
    border:none; background:none; color:inherit; opacity:.5; font-size:12px; cursor:pointer;
    padding:2px 6px; flex-shrink:0; border-radius:6px; line-height:1;
  }
  .info-btn:hover{ opacity:1; }

  /* ---------- Profile customization ---------- */
  .avatar-photo-row{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
  .avatar-photo-preview{
    width:56px; height:56px; border-radius:50%; background:var(--accent); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700;
    background-size:cover; background-position:center; flex-shrink:0;
  }
  .avatar-photo-actions{ display:flex; gap:8px; flex-wrap:wrap; }
  .avatar-photo-actions button{
    padding:7px 11px; border-radius:7px; border:1px solid var(--border); background:#fff;
    font-size:11.5px; font-weight:600; cursor:pointer; color:var(--text-dim);
  }
  .avatar-photo-actions button:hover{ border-color:var(--accent); color:var(--accent); }

  .status-row{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
  .status-btn{
    flex:1; min-width:70px; padding:8px 6px; border-radius:8px; border:1px solid var(--border);
    background:#fff; font-size:11.5px; font-weight:600; color:var(--text-dim); cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:5px;
  }
  .status-btn.selected{ background:var(--accent); color:#fff; border-color:var(--accent); }
  .status-btn .dot{ width:7px; height:7px; border-radius:50%; }

  .bio-input{
    width:100%; padding:9px 11px; border:1px solid var(--border); border-radius:8px;
    font-family:'Inter',sans-serif; font-size:12.5px; outline:none; margin-bottom:4px; resize:none;
  }
  .bio-input:focus{ border-color:var(--accent); }
  .bio-count{ font-size:10.5px; color:var(--text-faint); text-align:right; margin-bottom:12px; }

  /* ---------- View profile ---------- */
  .profile-view-avatar{
    width:64px; height:64px; border-radius:50%; color:#fff; font-size:22px; font-weight:700;
    display:flex; align-items:center; justify-content:center; margin:0 auto 12px auto;
    background-size:cover; background-position:center;
  }
  .profile-view-name{ text-align:center; font-size:16px; font-weight:800; margin-bottom:2px; }
  .profile-view-status{ text-align:center; font-size:12px; color:var(--text-faint); margin-bottom:14px; display:flex; align-items:center; justify-content:center; gap:6px; }
  .profile-view-status .dot{ width:8px; height:8px; border-radius:50%; }
  .profile-view-bio{
    background:var(--sidebar); border:1px solid var(--border); border-radius:9px; padding:12px;
    font-size:12.5px; color:var(--text-dim); line-height:1.5; min-height:20px; margin-bottom:14px;
  }
  .profile-view-actions{ display:flex; gap:8px; }
  .profile-view-actions button{
    flex:1; padding:10px; border-radius:9px; border:none; font-weight:600; font-size:13px; cursor:pointer;
  }
  .profile-view-message-btn{ background:var(--accent); color:#fff; }
  .profile-view-call-btn{ background:var(--bubble); color:var(--text); border:1px solid var(--border) !important; }

  /* ---------- Calling ---------- */
  .call-btn{
    width:32px; height:32px; border-radius:8px; border:1px solid var(--border);
    background:#fff; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center;
    flex-shrink:0; transition:all .12s;
  }
  .call-btn:hover{ border-color:var(--accent); color:var(--accent); }
  .call-controls{ display:flex; gap:6px; }

  .call-overlay{
    display:none; position:fixed; inset:0; background:rgba(10,10,10,.94); z-index:70;
    align-items:center; justify-content:center; flex-direction:column;
  }
  .call-overlay.show{ display:flex; animation:callFadeIn .25s ease; }
  @keyframes callFadeIn{ from{opacity:0;} to{opacity:1;} }

  .call-avatar-wrap{ position:relative; width:112px; height:112px; margin-bottom:20px; }
  .call-avatar-big{
    width:100px; height:100px; border-radius:50%; background:var(--accent);
    color:#fff; font-size:34px; font-weight:700; display:flex; align-items:center; justify-content:center;
    background-size:cover; background-position:center;
    position:absolute; top:6px; left:6px; z-index:2;
  }
  .call-ring{
    position:absolute; inset:0; border-radius:50%; border:2px solid var(--accent);
    opacity:0; display:none;
  }
  .call-overlay.ringing .call-ring{ display:block; animation:callPulse 1.8s ease-out infinite; }
  .call-overlay.ringing .call-ring.ring2{ animation-delay:.6s; }
  @keyframes callPulse{
    0%{ transform:scale(.7); opacity:.7; }
    100%{ transform:scale(1.45); opacity:0; }
  }

  .call-name{ color:#fff; font-size:19px; font-weight:700; margin-bottom:4px; }
  .call-status-row{ display:flex; align-items:center; gap:7px; margin-bottom:30px; }
  .call-status-text{ color:rgba(255,255,255,.62); font-size:13px; }
  .call-status-dot{ width:7px; height:7px; border-radius:50%; background:#f59e0b; flex-shrink:0; }
  .call-status-dot.connected{ background:#22c55e; }
  .call-status-dot.trouble{ background:var(--danger); animation:callPulseDot 1s ease-in-out infinite; }
  @keyframes callPulseDot{ 0%,100%{opacity:1;} 50%{opacity:.35;} }
  .call-duration{ font-family:'JetBrains Mono',monospace; }

  .call-video-stage{ position:relative; width:min(720px, 90vw); display:none; margin-bottom:20px; }
  .call-video-stage.show{ display:block; }
  .remote-video{ width:100%; max-height:60vh; border-radius:14px; background:#000; }
  .local-video{
    position:absolute; bottom:12px; right:12px; width:120px; border-radius:10px;
    border:2px solid rgba(255,255,255,.4); background:#000;
  }
  .call-controls-bar{ display:flex; gap:16px; }
  .call-control-col{ display:flex; flex-direction:column; align-items:center; gap:7px; }
  .call-control-label{ color:rgba(255,255,255,.5); font-size:10.5px; font-weight:600; }
  .call-control-btn{
    width:54px; height:54px; border-radius:50%; border:none; background:rgba(255,255,255,.12);
    color:#fff; font-size:19px; cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:background .12s, transform .1s;
  }
  .call-control-btn:hover{ background:rgba(255,255,255,.22); }
  .call-control-btn:active{ transform:scale(.93); }
  .call-control-btn.active-off{ background:rgba(255,255,255,.35); }
  .call-control-btn.hangup{ background:var(--danger); width:60px; height:60px; font-size:22px; }
  .call-control-btn.hangup:hover{ background:#e02020; }

  #incomingCallModal .modal-card{ animation:callModalIn .3s cubic-bezier(.2,.9,.3,1.2); }
  @keyframes callModalIn{ from{ opacity:0; transform:translateY(14px) scale(.96); } to{ opacity:1; transform:translateY(0) scale(1); } }
  .incoming-avatar-wrap{ position:relative; width:80px; height:80px; margin:0 auto 14px auto; }
  .incoming-avatar-wrap .call-avatar-big{ width:72px; height:72px; top:4px; left:4px; font-size:26px; }
  .incoming-avatar-wrap .call-ring{ display:block; animation:callPulse 1.8s ease-out infinite; }
  .incoming-avatar-wrap .call-ring.ring2{ animation-delay:.6s; }

  .incoming-call-actions{ display:flex; justify-content:center; gap:26px; margin-top:20px; }
  .incoming-call-actions .call-control-col{ align-items:center; }
  .incoming-round-btn{
    width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
    font-size:22px; display:flex; align-items:center; justify-content:center;
    color:#fff; transition:transform .1s, opacity .12s;
  }
  .incoming-round-btn:hover{ opacity:.9; }
  .incoming-round-btn:active{ transform:scale(.93); }
  .incoming-accept{ background:#22c55e; }
  .incoming-decline{ background:var(--danger); }
  .incoming-call-label{ font-size:10.5px; font-weight:600; color:var(--text-faint); margin-top:6px; text-align:center; }
  .empty-note{ font-size:12px; color:var(--text-faint); padding:6px 10px; line-height:1.5; }

  .request-item{
    padding:9px 10px; border-radius:8px; background:#fff; border:1px solid var(--border);
    margin-bottom:6px; font-size:12.5px;
  }
  .request-item .from{font-weight:700; margin-bottom:6px; display:block;}
  .request-actions{display:flex; gap:6px;}
  .req-btn{
    flex:1; padding:5px; border-radius:6px; border:none; font-size:11.5px; font-weight:600; cursor:pointer;
  }
  .req-btn.accept{background:var(--accent); color:#fff;}
  .req-btn.decline{background:#efefef; color:var(--text-dim);}
  .req-btn:hover{opacity:.85;}

  .add-friend-row{ display:flex; gap:6px; margin-bottom:4px; }
  .add-friend-row input{
    flex:1; min-width:0; padding:8px 9px; border:1px solid var(--border); border-radius:7px;
    font-size:12.5px; outline:none; font-family:'Inter',sans-serif;
  }
  .add-friend-row input:focus{border-color:var(--accent);}
  .add-friend-row button{
    padding:8px 11px; border:none; border-radius:7px; background:var(--accent); color:#fff;
    font-size:12px; font-weight:600; cursor:pointer;
  }
  .add-friend-row button:hover{opacity:.88;}
  .add-friend-note{ font-size:11px; color:var(--text-faint); margin-bottom:2px; min-height:14px; }
  .add-friend-note.err{ color:var(--danger); }
  .add-friend-note.ok{ color:#1a8a4a; }

  .sidebar-footer{ margin-top:auto; padding-top:14px; border-top:1px solid var(--border); }
  .me{ display:flex; align-items:center; gap:8px; padding:6px; font-size:12.5px; color:var(--text-dim); }
  .me-avatar{
    width:24px; height:24px; border-radius:50%; background:var(--accent);
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:700; flex-shrink:0;
  }
  .clear-btn{
    margin-top:8px; width:100%; padding:7px; border:1px solid var(--border);
    border-radius:8px; background:transparent; color:var(--text-faint);
    font-size:11.5px; cursor:pointer; font-family:'Inter',sans-serif;
    transition:all .12s;
  }
  .clear-btn:hover{border-color:var(--danger); color:var(--danger);}

  /* ---------- Main chat ---------- */
  .main{flex:1; display:flex; flex-direction:column; min-width:0;}
  .chat-header{
    padding:16px 24px; border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
  }
  .chat-header h2{font-size:15px; font-weight:700;}
  .chat-header .sub{font-size:12px; color:var(--text-faint); margin-top:2px;}
  .lifespan-pill{
    display:flex; align-items:center; gap:6px; flex-shrink:0;
    font-size:11.5px; color:var(--accent); background:var(--accent-soft);
    padding:6px 11px; border-radius:20px; font-weight:600;
  }
  .lifespan-pill .pulse{ width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse 1.8s infinite; }
  @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.3;} }

  .messages{ flex:1; overflow-y:auto; padding:20px 24px; display:flex; flex-direction:column; gap:14px; }
  .empty-state{ margin:auto; text-align:center; color:var(--text-faint); font-size:13px; max-width:260px; }
  .empty-state .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); margin:0 auto 10px auto; opacity:.5; }

  .msg{ max-width:62%; align-self:flex-start; }
  .msg.mine{align-self:flex-end;}
  .msg-meta{ display:flex; gap:8px; align-items:baseline; margin-bottom:4px; font-size:11.5px; flex-wrap:wrap; }
  .msg.mine .msg-meta{justify-content:flex-end;}
  .msg-meta .sender{font-weight:700; color:var(--text);}
  .msg-meta .time{color:var(--text-faint);}
  .add-friend-inline{
    border:none; background:var(--accent-soft); color:var(--accent); font-size:10px; font-weight:700;
    padding:2px 7px; border-radius:20px; cursor:pointer; font-family:'Inter',sans-serif;
  }
  .add-friend-inline:hover{opacity:.8;}
  .add-friend-inline[disabled]{opacity:.5; cursor:default;}
  .bubble{
    background:var(--bubble); padding:10px 13px; border-radius:var(--radius);
    font-size:13.5px; line-height:1.45; word-wrap:break-word; white-space:pre-wrap;
    border:1px solid transparent;
  }
  .msg.mine .bubble{background:var(--accent); color:#fff;}

  .fuse-track{ height:3px; width:100%; background:#ececec; border-radius:2px; margin-top:6px; overflow:hidden; }
  .fuse-fill{ height:100%; background:linear-gradient(90deg, var(--accent), #ff8a8a); border-radius:2px; transition:width 1s linear; }
  .fuse-label{ font-size:10px; color:var(--text-faint); margin-top:3px; text-align:right; }
  .msg.mine .fuse-label{text-align:left;}
  .fuse-label.urgent{color:var(--danger); font-weight:600;}

  .composer{ padding:16px 24px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:8px; }
  .composer-row{ display:flex; gap:10px; align-items:center; }
  .attach-btn{
    flex-shrink:0; width:40px; height:40px; border-radius:var(--radius); border:1px solid var(--border);
    background:#fff; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:all .12s;
  }
  .attach-btn:hover{border-color:var(--accent); color:var(--accent);}
  .composer input{
    flex:1; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius);
    font-family:'Inter',sans-serif; font-size:13.5px; outline:none; transition:border-color .15s;
  }
  .composer input:focus{border-color:var(--accent);}
  .composer button.send-btn{
    padding:12px 18px; border:none; border-radius:var(--radius);
    background:var(--accent); color:#fff; font-weight:600; font-size:13.5px; cursor:pointer;
    transition:opacity .12s; flex-shrink:0;
  }
  .composer button.send-btn:hover{opacity:.88;}
  .composer button.send-btn:disabled{opacity:.4; cursor:not-allowed;}

  .file-preview-chip{
    display:none; align-items:center; gap:10px; background:var(--bubble); border:1px solid var(--border);
    border-radius:9px; padding:8px 10px; font-size:12px;
  }
  .file-preview-chip.show{display:flex;}
  .file-preview-chip .thumb{ width:34px; height:34px; border-radius:6px; object-fit:cover; flex-shrink:0; background:#e2e2e2; }
  .file-preview-chip .file-icon{
    width:34px; height:34px; border-radius:6px; background:var(--accent-soft); color:var(--accent);
    display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0;
  }
  .file-preview-chip .meta{ flex:1; min-width:0; }
  .file-preview-chip .meta .name{ font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .file-preview-chip .meta .size{ color:var(--text-faint); font-size:11px; }
  .file-preview-chip .remove-btn{
    border:none; background:none; color:var(--text-faint); font-size:15px; cursor:pointer; flex-shrink:0; padding:2px 6px;
  }
  .file-preview-chip .remove-btn:hover{color:var(--danger);}
  .upload-progress-track{ height:3px; width:100%; background:#e2e2e2; border-radius:2px; overflow:hidden; margin-top:6px; }
  .upload-progress-fill{ height:100%; background:var(--accent); border-radius:2px; transition:width .2s linear; width:0%; }

  .msg-image{
    max-width:280px; max-height:280px; border-radius:var(--radius); display:block; cursor:pointer;
    margin-top:2px;
  }
  .attachment-card{
    display:flex; align-items:center; gap:10px; background:var(--bubble); border:1px solid var(--border);
    border-radius:9px; padding:9px 11px; text-decoration:none; margin-top:2px; max-width:240px;
  }
  .msg.mine .attachment-card{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2); }
  .attachment-card .file-icon{
    width:32px; height:32px; border-radius:6px; background:var(--accent-soft); color:var(--accent);
    display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0;
  }
  .attachment-card .meta{ min-width:0; }
  .attachment-card .name{ font-weight:600; font-size:12.5px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .msg.mine .attachment-card .name{ color:#fff; }
  .attachment-card .size{ font-size:10.5px; color:var(--text-faint); }
  .msg.mine .attachment-card .size{ color:rgba(255,255,255,.7); }

  /* ---------- Typing indicator ---------- */
  .typing-indicator{
    font-size:11.5px; color:var(--text-faint); padding:0 24px 8px 24px; min-height:16px;
    font-style:italic;
  }

  /* ---------- Reactions ---------- */
  .reaction-row{ display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; align-items:center; }
  .reaction-pill{
    display:flex; align-items:center; gap:4px; padding:2px 8px; border-radius:20px;
    background:var(--bubble); border:1px solid var(--border); font-size:11.5px; cursor:pointer;
    transition:all .1s;
  }
  .reaction-pill.mine{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }
  .reaction-pill:hover{ transform:scale(1.05); }
  .quick-react-row{ display:none; gap:4px; margin-top:6px; }
  .msg:hover .quick-react-row{ display:flex; }
  .quick-react-btn{
    border:none; background:var(--bubble); border-radius:20px; padding:2px 7px; font-size:13px;
    cursor:pointer; transition:transform .1s;
  }
  .quick-react-btn:hover{ transform:scale(1.15); background:var(--accent-soft); }

  /* ---------- Message actions (edit/delete) ---------- */
  .msg-actions{ display:none; gap:4px; }
  .msg:hover .msg-actions{ display:flex; }
  .msg-action-btn{
    border:none; background:none; color:var(--text-faint); font-size:11px; cursor:pointer;
    padding:1px 4px; border-radius:4px;
  }
  .msg-action-btn:hover{ color:var(--accent); background:var(--accent-soft); }
  .edit-box{ display:flex; gap:6px; margin-top:2px; }
  .edit-box input{
    flex:1; padding:8px 10px; border:1px solid var(--accent); border-radius:8px; font-size:13px;
    font-family:'Inter',sans-serif; outline:none;
  }
  .edit-box button{
    border:none; border-radius:8px; padding:0 10px; font-size:12px; font-weight:600; cursor:pointer;
  }
  .edit-box .save-edit{ background:var(--accent); color:#fff; }
  .edit-box .cancel-edit{ background:var(--bubble); color:var(--text-dim); }
  .edited-tag{ font-size:10px; color:var(--text-faint); margin-left:4px; }

  /* ---------- Mobile ---------- */
  .mobile-menu-btn{
    display:none; width:36px; height:36px; border:1px solid var(--border); border-radius:9px;
    background:#fff; font-size:16px; cursor:pointer; align-items:center; justify-content:center;
    margin-right:10px; flex-shrink:0;
  }
  .sidebar-overlay{ display:none; }

  @media (max-width: 768px){
    .mobile-menu-btn{ display:flex; }
    .chat-header{ gap:8px; }
    .sidebar{
      position:fixed; top:0; left:0; bottom:0; z-index:45;
      width:82vw; max-width:300px; min-width:0;
      transform:translateX(-100%);
      transition:transform .22s ease;
      box-shadow:2px 0 20px rgba(0,0,0,.15);
    }
    .sidebar.open{ transform:translateX(0); }
    .sidebar-overlay.show{
      display:block; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:44;
    }
    .msg{ max-width:82%; }
    .messages{ padding:16px; }
    .composer{ padding:12px 16px; }
    .chat-header{ padding:14px 16px; }
    .lifespan-pill span:not(.pulse){ display:none; }
    .lifespan-pill{ padding:6px 9px; }
    .modal-card{ width:min(340px, 90vw); padding:18px; }
    .setup-card{ width:min(340px, 90vw); }
  }

  ::-webkit-scrollbar{width:8px;}
  ::-webkit-scrollbar-thumb{background:#e2e2e2; border-radius:4px;}

  /* ---------- Settings ---------- */
  .settings-btn{
    margin-top:8px; width:100%; padding:7px; border:1px solid var(--border);
    border-radius:8px; background:transparent; color:var(--text-dim);
    font-size:11.5px; cursor:pointer; font-family:'Inter',sans-serif;
    display:flex; align-items:center; justify-content:center; gap:6px;
    transition:all .12s;
  }
  .settings-btn:hover{border-color:var(--accent); color:var(--accent);}

  .modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.35);
    align-items:center; justify-content:center; z-index:60;
  }
  .modal-overlay.show{display:flex;}
  .modal-card{
    width:380px; max-height:82vh; overflow-y:auto; background:var(--bg);
    border-radius:14px; padding:22px; box-shadow:0 20px 60px rgba(0,0,0,.25);
  }
  .modal-card h3{font-size:16px; font-weight:800; margin-bottom:4px;}
  .modal-close{
    float:right; background:none; border:none; font-size:16px; color:var(--text-faint);
    cursor:pointer; line-height:1;
  }
  .modal-tabs{
    display:flex; gap:4px; background:var(--sidebar); border:1px solid var(--border);
    border-radius:10px; padding:3px; margin:14px 0 16px 0;
  }
  .modal-tab{
    flex:1; padding:7px; border-radius:7px; text-align:center; font-size:12.5px;
    font-weight:600; color:var(--text-dim); cursor:pointer; transition:all .12s;
  }
  .modal-tab.active{background:#fff; color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.08);}
  .modal-pane{display:none;}
  .modal-pane.active{display:block;}

  .field-label{font-size:11.5px; font-weight:600; color:var(--text-dim); margin-bottom:6px; display:block;}
  .modal-pane input[type="text"]{
    width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px;
    font-family:'Inter',sans-serif; font-size:13.5px; outline:none; margin-bottom:6px;
  }
  .modal-pane input[type="text"]:focus{border-color:var(--accent);}
  .field-note{font-size:11px; min-height:14px; margin-bottom:14px;}
  .field-note.err{color:var(--danger);}
  .field-note.ok{color:#1a8a4a;}

  .swatch-row{display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap;}
  .swatch{
    width:30px; height:30px; border-radius:50%; cursor:pointer; border:2px solid transparent;
    transition:transform .1s;
  }
  .swatch:hover{transform:scale(1.08);}
  .swatch.selected{border-color:var(--text); box-shadow:0 0 0 2px #fff inset;}

  .mode-toggle{display:flex; gap:8px; margin-bottom:16px;}
  .mode-btn{
    flex:1; padding:9px; border-radius:8px; border:1px solid var(--border);
    background:#fff; font-size:12.5px; font-weight:600; color:var(--text-dim); cursor:pointer;
  }
  .mode-btn.selected{background:var(--accent); color:#fff; border-color:var(--accent);}

  .custom-color-row{display:flex; align-items:center; gap:10px; margin-bottom:6px;}
  .custom-color-row input[type="color"]{
    width:36px; height:36px; border:none; border-radius:8px; cursor:pointer; padding:0; background:none;
  }

  .modal-save-btn{
    width:100%; padding:11px; border:none; border-radius:9px; background:var(--accent);
    color:#fff; font-weight:600; font-size:13.5px; cursor:pointer; margin-top:4px;
  }
  .modal-save-btn:hover{opacity:.88;}
  .modal-save-btn:disabled{opacity:.5; cursor:not-allowed;}