@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Bricolage+Grotesque:wght@500;600;700;800&family=Schibsted+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

    /* ══════════════════════════════════════════════════════════════════════
       CHEESY CHAT v4.1 — Design System
       Springs: --spring-bounce  cubic-bezier(0.34, 1.56, 0.64, 1)
                --spring-smooth  cubic-bezier(0.25, 0.46, 0.45, 0.94)
                --spring-snap    cubic-bezier(0.22, 0.61, 0.36, 1)
    ══════════════════════════════════════════════════════════════════════ */

    /* ── DESIGN TOKENS ───────────────────────────────────────────────── */
    :root{
      /* Accent */
      --accent:#f1c232;
      --accent-dim:#c99e1a;
      --accent-soft:rgba(241,194,50,0.14);
      --accent-glow:rgba(241,194,50,0.5);
      --accent-glow-lg:rgba(241,194,50,0.22);

      /* Backgrounds */
      --bg1:#13141a;
      --bg2:#0c0d11;
      --bg3:#080910;

      /* Surfaces */
      --surface:rgba(255,255,255,0.033);
      --surface-2:rgba(255,255,255,0.058);
      --surface-3:rgba(255,255,255,0.085);
      --surface-hover:rgba(255,255,255,0.075);
      --surface-active:rgba(255,255,255,0.10);

      /* Borders */
      --border:rgba(255,255,255,0.07);
      --border-mid:rgba(255,255,255,0.11);
      --border-strong:rgba(255,255,255,0.16);
      --border-accent:rgba(241,194,50,0.35);

      /* Text */
      --text:#eef0f4;
      --text-muted:#9298a5;
      --text-dim:#565b65;

      /* Status */
      --danger:#ff7070;
      --danger-soft:rgba(255,112,112,0.12);
      --success:#5de38a;
      --success-soft:rgba(93,227,138,0.12);

      /* Layout */
      --maxw:1100px;
      --pad:22px;
      --radius:16px;
      --radius-sm:10px;
      --radius-xs:7px;

      /* Animation curves */
      --ease-bounce:cubic-bezier(0.34,1.56,0.64,1);
      --ease-smooth:cubic-bezier(0.25,0.46,0.45,0.94);
      --ease-snap:cubic-bezier(0.22,0.61,0.36,1);
      --ease-out:cubic-bezier(0.16,1,0.3,1);
    }

    /* ── RESET & BASE ─────────────────────────────────────────────────── */
    *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

    html,body{
      height:100%;margin:0;
      font-family:'Inter','SF Pro Display',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
      background:radial-gradient(ellipse 120% 80% at 50% -10%,rgba(241,194,50,0.06) 0%,transparent 60%),
                 linear-gradient(180deg,#16171e 0%,#0e0f14 45%,#080910 100%);
      background-attachment:fixed;
      color:var(--text);
      display:flex;align-items:center;justify-content:center;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      letter-spacing:-0.012em;
    }

    /* Scrollbars */
    ::-webkit-scrollbar{width:5px;height:5px}
    ::-webkit-scrollbar-track{background:transparent}
    ::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:999px;transition:background .2s}
    ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.2)}

    /* ── APP SHELL ────────────────────────────────────────────────────── */
    #app{
      width:min(var(--maxw),96vw);
      max-height:calc(var(--vh,1vh)*100 - 24px);
      position:relative;
      overflow:hidden;
      background:linear-gradient(160deg,rgba(255,255,255,0.045) 0%,rgba(255,255,255,0.018) 50%,rgba(255,255,255,0.01) 100%);
      backdrop-filter:blur(20px) saturate(1.3);
      -webkit-backdrop-filter:blur(20px) saturate(1.3);
      border:1px solid var(--border-mid);
      border-top-color:rgba(255,255,255,0.2);
      border-radius:22px;
      padding:var(--pad);
      box-shadow:
        0 32px 96px rgba(0,0,0,0.6),
        0 8px 32px rgba(0,0,0,0.4),
        0 0 0 1px rgba(255,255,255,0.025) inset,
        0 1px 0 rgba(255,255,255,0.08) inset;
      display:flex;flex-direction:column;gap:14px;
      animation:appIn .5s var(--ease-out) both;
    }
    @keyframes appIn{
      from{opacity:0;transform:translateY(12px) scale(0.99)}
      to{opacity:1;transform:translateY(0) scale(1)}
    }

    /* ── TYPOGRAPHY ───────────────────────────────────────────────────── */
    h1,h2,h3{margin:0;font-weight:800;letter-spacing:-0.025em;line-height:1.1}
    h2{font-size:22px}
    h3{font-size:17px}
    .center{text-align:center}
    .muted{color:var(--text-muted);font-size:14px}
    .row{display:flex;gap:8px;align-items:center}

    /* ── BUTTONS ──────────────────────────────────────────────────────── */
    button,.button-link{
      font:inherit;border:1.5px solid transparent;border-radius:11px;padding:10px 18px;
      cursor:pointer;font-weight:600;letter-spacing:0.01em;
      transition:
        transform 150ms var(--ease-bounce),
        background 160ms var(--ease-smooth),
        box-shadow 160ms var(--ease-smooth),
        border-color 150ms var(--ease-smooth),
        color 150ms var(--ease-smooth),
        opacity 140ms var(--ease-smooth);
      position:relative;overflow:hidden;
    }
    button::after,.button-link::after{
      content:'';position:absolute;inset:0;
      background:radial-gradient(circle at var(--x,50%) var(--y,50%),rgba(255,255,255,0.18) 0%,transparent 60%);
      opacity:0;transition:opacity .2s;pointer-events:none;border-radius:inherit;
    }
    button:hover::after,.button-link:hover::after{opacity:1}
    button:active,.button-link:active{transform:scale(0.96) !important}
    button:focus-visible,.button-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
    button:disabled{opacity:0.36;cursor:not-allowed;transform:none !important;filter:saturate(0.4)}

    .primary{
      background:linear-gradient(148deg,#f7d040 0%,#eabc1e 55%,#d8a810 100%);
      color:#1a1000;font-weight:800;letter-spacing:-0.01em;
      border-color:rgba(255,255,255,0.22);
      box-shadow:0 4px 18px rgba(241,194,50,0.32),0 1px 0 rgba(255,255,255,0.32) inset,0 -1px 0 rgba(0,0,0,0.18) inset;
    }
    .primary:hover{
      background:linear-gradient(148deg,#fad94d 0%,#f0c128 52%,#e0b116 100%);
      box-shadow:0 8px 30px rgba(241,194,50,0.52),0 1px 0 rgba(255,255,255,0.35) inset,0 -1px 0 rgba(0,0,0,0.14) inset;
      transform:translateY(-2px) scale(1.02);
    }
    .primary:active{transform:translateY(0) scale(0.96) !important;box-shadow:0 2px 10px rgba(241,194,50,0.28) !important}

    .ghost{
      background:rgba(255,255,255,0.06);
      border:1.5px solid rgba(255,255,255,0.16);
      color:var(--text);font-weight:600;
    }
    .ghost:hover{
      background:rgba(255,255,255,0.11);
      border-color:rgba(255,255,255,0.26);
      transform:translateY(-1px);
      box-shadow:0 4px 16px rgba(0,0,0,0.28),0 1px 0 rgba(255,255,255,0.07) inset;
    }

    .secondary{
      background:rgba(255,255,255,0.04);
      border:1.5px solid rgba(255,255,255,0.1);
      color:var(--text-dim);font-weight:600;
    }
    .secondary:hover{
      background:rgba(255,255,255,0.09);
      border-color:rgba(255,255,255,0.2);
      color:var(--text);
      transform:translateY(-1px);
      box-shadow:0 4px 14px rgba(0,0,0,0.22);
    }

    .delBtn{
      background:rgba(255,255,255,0.05);
      border:1.5px solid rgba(255,255,255,0.11);
      padding:9px 14px;border-radius:10px;
      color:var(--text-dim);font-weight:600;
    }
    .delBtn:hover{
      background:rgba(255,255,255,0.09);
      border-color:rgba(255,255,255,0.2);
      color:var(--text);
      box-shadow:0 3px 12px rgba(0,0,0,0.22);
    }

    /* ── INPUTS ───────────────────────────────────────────────────────── */
    input,textarea,select{
      font:inherit;color:var(--text);
      background:rgba(0,0,0,0.3);
      border-radius:var(--radius-sm);padding:11px 14px;
      border:1px solid var(--border);outline:none;
      transition:border-color .2s var(--ease-smooth),box-shadow .2s var(--ease-smooth),background .2s var(--ease-smooth);
    }
    input:focus,textarea:focus,select:focus{
      border-color:var(--accent);
      background:rgba(0,0,0,0.45);
      box-shadow:0 0 0 3px var(--accent-soft),0 0 0 1px rgba(241,194,50,0.6);
    }
    input::placeholder{color:var(--text-dim)}
    select option{background:#1a1b22;color:var(--text)}

    #msgInput,#guestName,#authUser,#authPass,#passwordInput,#addContactName,#authColor{
      width:100%;box-sizing:border-box;font-size:14px;font-weight:400;
    }
    #msgInput{
      padding:13px 16px;font-size:14px;
      border-radius:12px;
      background:rgba(0,0,0,0.32);
      border-color:var(--border-mid);
    }
    #msgInput:focus{
      box-shadow:0 0 0 3px var(--accent-soft),0 0 0 1px rgba(241,194,50,0.5);
    }

    /* ── VIEWS ────────────────────────────────────────────────────────── */
    .view{display:none}
    .view.active{display:block;animation:viewIn .3s var(--ease-out) both}
    @keyframes viewIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

    /* ── TABS ─────────────────────────────────────────────────────────── */
    .tabs{
      display:flex;gap:3px;margin:6px 0 4px 0;padding:3px;
      background:rgba(0,0,0,0.3);border-radius:11px;border:1px solid var(--border);
      width:fit-content;
    }
    .tabbtn{
      padding:7px 15px;border-radius:8px;background:transparent;border:0;
      cursor:pointer;color:var(--text-muted);font-weight:600;font-size:13px;
      transition:all .2s var(--ease-smooth);
    }
    .tabbtn:hover{color:var(--text);background:var(--surface-hover)}
    .tabbtn.active{
      background:linear-gradient(135deg,#f5cf3e,#e8b820);
      color:#1a1000;font-weight:700;
      box-shadow:0 2px 8px rgba(241,194,50,0.3);
      transform:none;
    }

    /* ── ONLINE STRIP ─────────────────────────────────────────────────── */
    #onlineStrip{display:flex;gap:5px;flex-wrap:wrap}
    .onlineUser{
      display:inline-flex;align-items:center;gap:7px;padding:5px 11px;
      border-radius:999px;background:var(--surface);border:1px solid var(--border);
      font-size:12px;color:var(--text-muted);font-weight:500;
      transition:all .25s var(--ease-smooth);
      animation:chipIn .35s var(--ease-bounce) both;
    }
    .onlineUser:hover{background:var(--surface-hover);border-color:var(--border-mid);color:var(--text);transform:translateY(-1px)}
    @keyframes chipIn{from{opacity:0;transform:scale(0.7)}to{opacity:1;transform:scale(1)}}
    .dot{
      width:7px;height:7px;border-radius:50%;
      box-shadow:0 0 0 2px rgba(255,255,255,0.15),0 0 8px currentColor;
      animation:pulse 2.4s ease-in-out infinite;
    }
    @keyframes pulse{0%,100%{box-shadow:0 0 0 2px rgba(255,255,255,0.1),0 0 6px currentColor}50%{box-shadow:0 0 0 4px rgba(255,255,255,0.05),0 0 12px currentColor}}

    /* ── CONTACTS ─────────────────────────────────────────────────────── */
    #contactsList{display:flex;flex-direction:column;gap:5px;margin-bottom:8px}
    .contactCard{
      display:flex;justify-content:space-between;align-items:center;
      padding:12px 14px;border-radius:13px;
      background:var(--surface);border:1px solid var(--border);
      transition:all .25s var(--ease-smooth);cursor:pointer;
    }
    .contactCard:hover{
      background:var(--surface-hover);border-color:var(--border-mid);
      transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,0.2);
    }
    .contactLeft{display:flex;gap:10px;align-items:center}
    .contactName{font-weight:700;font-size:14px}
    .contactSub{font-size:11px;color:var(--text-muted);margin-top:2px;font-weight:500}

    /* ── GROUPS LIST ──────────────────────────────────────────────────── */
    #groupsList{display:flex;flex-direction:column;gap:7px;max-height:38vh;overflow:auto;padding-right:4px}
    .groupCard{
      display:flex;justify-content:space-between;align-items:center;
      padding:14px 16px;border-radius:15px;
      background:linear-gradient(160deg,var(--surface-2) 0%,var(--surface) 100%);
      border:1px solid var(--border);
      transition:transform .3s var(--ease-bounce),background .2s,border-color .2s,box-shadow .3s var(--ease-smooth);
      cursor:pointer;
    }
    .groupCard:hover{
      transform:translateY(-2px) scale(1.005);
      background:linear-gradient(160deg,var(--surface-3) 0%,var(--surface-2) 100%);
      border-color:var(--border-mid);
      box-shadow:0 8px 28px rgba(0,0,0,0.28),0 0 0 1px rgba(255,255,255,0.04) inset;
    }
    .groupCard:active{transform:translateY(0) scale(0.99);box-shadow:0 2px 8px rgba(0,0,0,0.2)}
    .groupLeft{display:flex;flex-direction:column;gap:4px}
    .groupTitle{font-weight:700;font-size:15px;letter-spacing:-0.015em}
    .groupMeta{font-size:12px;color:var(--text-muted);font-weight:500}
    .groupRight{display:flex;align-items:center;gap:7px}

    /* ── CHAT WINDOW ──────────────────────────────────────────────────── */
    #chatWindow{
      flex:1;min-height:0;overflow:auto;padding:16px;
      background:rgba(0,0,0,0.22);
      border:1px solid var(--border);border-radius:15px;
      display:flex;flex-direction:column;gap:7px;
      scroll-behavior:smooth;
      contain:layout paint;
      overflow-anchor:auto;
    }

    /* ── CHAT VIEW fills #app vertically ──────────────────────────────── */
    #chatView.active{
      display:flex !important;
      flex-direction:column;
      flex:1;
      min-height:0;
      position:relative;
    }

    /* ── GROUPS VIEW scrollable on small screens ──────────────────────── */
    #groupsView.active{
      overflow-y:auto;
    }

    /* ── MESSAGES ─────────────────────────────────────────────────────── */
    .msg{
      align-self:flex-start;
      background:var(--surface-2);
      border:1px solid var(--border);
      padding:var(--msg-pad, 10px 14px);
      border-radius:var(--msg-radius, 18px) var(--msg-radius, 18px) var(--msg-radius, 18px) calc(var(--msg-radius, 18px) * 0.28);
      max-width:78%;word-break:break-word;display:inline-block;
      line-height:1.48;font-size:var(--msg-font, 14px);
      animation:msgIn .3s var(--ease-bounce) both;
      position:relative;
      transition:transform .15s var(--ease-smooth),box-shadow .15s var(--ease-smooth),padding-right .2s,font-size 0.09s ease,padding 0.09s ease,border-radius 0.09s ease;
    }
    .msg:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,0.2)}

    @keyframes msgIn{
      from{opacity:0;transform:translateY(10px) scale(0.96)}
      to{opacity:1;transform:translateY(0) scale(1)}
    }

    .msg .name{font-weight:700;margin-right:6px;font-size:0.82em;letter-spacing:-0.003em}

    .msg.me{
      align-self:flex-end;
      background:linear-gradient(145deg,rgba(210,155,12,0.97),rgba(168,112,6,0.97));
      color:#fff8e0;
      border-color:rgba(220,170,20,0.5);
      border-radius:var(--msg-radius, 18px) var(--msg-radius, 18px) calc(var(--msg-radius, 18px) * 0.28) var(--msg-radius, 18px);
      box-shadow:0 3px 14px rgba(180,125,0,0.35);
    }
    .msg.me:hover{box-shadow:0 5px 20px rgba(241,194,50,0.28)}
    .msg.me .name{color:rgba(255,240,180,0.85)}

    /* ── Easter eggs ──────────────────────────────────────────────────── */
    .msg.dinnerbone{
      transform:rotate(180deg) !important;
      transform-origin:center center;
      display:block;
    }
    @keyframes jeb-hue{from{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}
    .msg.jeb-rainbow{animation:jeb-hue 1.8s linear infinite}

    .system{
      font-size:12px;color:var(--text-dim);text-align:center;font-style:normal;
      padding:5px 14px;background:rgba(255,255,255,0.025);
      border-radius:999px;align-self:center;border:1px solid var(--border);
      font-weight:500;letter-spacing:0.01em;
      animation:sysIn .4s var(--ease-smooth) both;
    }
    @keyframes sysIn{from{opacity:0;transform:scaleX(0.85)}to{opacity:1;transform:scaleX(1)}}

    /* ── FORMATTING ───────────────────────────────────────────────────── */
    .bigHeading{font-size:1.45em;font-weight:900;margin:6px 0;letter-spacing:-0.025em}
    .smallHeading{font-size:0.95em;font-weight:700;margin:6px 0;color:var(--text)}
    pre.codeBlock{
      background:rgba(0,0,0,0.55);border-radius:10px;padding:11px 14px;
      position:relative;border:1px solid var(--border);overflow:auto;margin:6px 0;
      border-left:3px solid var(--border-mid);
    }
    pre.codeBlock code{white-space:pre-wrap;word-break:break-word;color:#e2e4ea;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:12.5px;line-height:1.6}
    .copyBtn{
      position:absolute;right:7px;top:7px;
      background:var(--surface-2);border:1px solid var(--border);
      padding:3px 10px;border-radius:6px;color:var(--text-muted);font-size:11px;font-weight:600;
      transition:all .2s var(--ease-smooth);
    }
    .copyBtn:hover{background:var(--surface-3);color:var(--text);border-color:var(--border-mid)}

    /* ── POLLS ────────────────────────────────────────────────────────── */
    .poll{background:var(--surface);padding:14px;border-radius:13px;border:1px solid var(--border)}
    .poll h4{margin:0 0 10px 0;font-size:14px;font-weight:700}
    .poll .option{
      display:flex;justify-content:space-between;align-items:center;
      padding:8px 12px;border-radius:9px;margin-bottom:6px;
      background:rgba(0,0,0,0.2);border:1px solid var(--border);
      transition:all .2s var(--ease-smooth);cursor:pointer;
    }
    .poll .option:hover{background:rgba(0,0,0,0.32);border-color:var(--border-mid);transform:translateX(2px)}
    .poll .option button{min-width:60px;font-size:12px;padding:6px 12px}
    .poll .tally{font-size:12px;color:var(--text-muted);margin-left:8px;font-weight:600}

    /* ── TAB ANIMATION ────────────────────────────────────────────────── */
    .tabContent{transition:opacity 240ms var(--ease-smooth),transform 240ms var(--ease-smooth);will-change:opacity,transform}
    .hidden{display:none !important}
    .fadeIn{opacity:1;transform:translateX(0)}
    .fadeOutLeft{opacity:0;transform:translateX(-10px)}
    .fadeOutRight{opacity:0;transform:translateX(10px)}

    /* ── MODALS ───────────────────────────────────────────────────────── */
    .overlay-modal{
      position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
      background:rgba(0,0,0,0.65);
      backdrop-filter:blur(10px) saturate(1.2);
      -webkit-backdrop-filter:blur(10px) saturate(1.2);
      z-index:9999;opacity:0;pointer-events:none;
      transition:opacity .22s var(--ease-smooth),backdrop-filter .22s;
    }
    .overlay-modal.active{opacity:1;pointer-events:auto}

    .modal{
      width:min(520px,94vw);
      background:linear-gradient(160deg,#1e1f28 0%,#14151c 100%);
      padding:24px;border-radius:20px;
      border:1px solid var(--border-strong);
      border-top-color:rgba(255,255,255,0.22);
      box-shadow:
        0 40px 100px rgba(0,0,0,0.7),
        0 8px 32px rgba(0,0,0,0.4),
        0 0 0 1px rgba(255,255,255,0.04) inset;
      animation:modalIn .32s var(--ease-bounce) both;
    }
    @keyframes modalIn{
      from{opacity:0;transform:scale(0.92) translateY(16px)}
      to{opacity:1;transform:scale(1) translateY(0)}
    }

    .migrationCard{position:relative;overflow:hidden;width:min(470px,92vw);padding:34px;background:#080808;border-color:rgba(255,166,36,.28);box-shadow:0 40px 110px rgba(0,0,0,.8),0 0 80px rgba(237,157,29,.09)}
    .migrationCard>*:not(.migrationPixels){position:relative;z-index:1}
    .migrationPixels{position:absolute;inset:0;opacity:.32;pointer-events:none;background-image:radial-gradient(circle,rgba(255,184,72,.78) 0 1.1px,transparent 1.5px);background-size:10px 10px;mask-image:radial-gradient(ellipse 85% 55% at 72% 0%,#000,transparent);-webkit-mask-image:radial-gradient(ellipse 85% 55% at 72% 0%,#000,transparent);animation:migrationDrift 10s linear infinite}
    @keyframes migrationDrift{to{background-position:40px 20px}}
    .migrationClose{position:absolute!important;right:18px;top:16px;background:transparent;border:0;color:#777;font-size:16px;cursor:pointer}
    .migrationEyebrow{font:700 10px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.19em;color:#ed9d1d;margin-bottom:14px}
    .migrationCard h2{font-size:30px;line-height:1.04;letter-spacing:-.04em;margin:0 36px 12px 0;color:#f7f3eb}
    .onboardingStep>p{color:#9b978f;font-size:14px;line-height:1.55;margin:0 0 18px;max-width:390px}
    .onboardingStep{display:none}
    .onboardingStep.active{display:block;animation:onboardingStepIn .38s var(--ease-out) both}
    @keyframes onboardingStepIn{from{opacity:0;transform:translateX(13px)}to{opacity:1;transform:translateX(0)}}
    .onboardingOptions{display:grid;gap:10px;margin-top:20px}
    .onboardingOption{display:block;width:100%;padding:16px;text-align:left;border-radius:13px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.1);color:#f7f3eb;cursor:pointer;transition:transform .22s var(--ease-out),border-color .22s ease,background .22s ease}
    .onboardingOption:hover{transform:translateY(-2px);border-color:rgba(237,157,29,.5);background:rgba(237,157,29,.075)}
    .onboardingOption:active{transform:scale(.985)}
    .onboardingOption strong,.onboardingOption span{display:block}
    .onboardingOption strong{font-size:14px;margin-bottom:4px}
    .onboardingOption span{font-size:12px;line-height:1.4;color:#858079}
    .onboardingBack{border:0;background:none;color:#777;padding:0;margin:0 0 17px;cursor:pointer;font-size:12px;font-weight:650;transition:color .18s ease,transform .18s ease}
    .onboardingBack:hover{color:#ed9d1d;transform:translateX(-2px)}
    .migrationLabel{display:block;margin:10px 0 6px;color:#817d76;font-size:11px;font-weight:650}
    .migrationCard input{width:100%;box-sizing:border-box;background:#101010;border:1px solid rgba(255,255,255,.1);color:#f3efe7}
    .migrationCard input:focus{border-color:rgba(237,157,29,.65);box-shadow:0 0 0 3px rgba(237,157,29,.09)}
    .colourPickerRow{display:flex;align-items:center;gap:12px;padding:9px 11px;background:#101010;border:1px solid rgba(255,255,255,.1);border-radius:10px}
    .migrationCard .colourPickerRow input[type="color"]{width:42px;height:32px;padding:2px;border:0;border-radius:8px;background:transparent;cursor:pointer}
    .colourPickerRow span{font:600 12px/1 ui-monospace,SFMono-Regular,Consolas,monospace;color:#8f8980}
    .migrationConfirm{width:100%;margin-top:16px;padding:12px}
    .onboardingMsg{min-height:18px;margin-top:10px;color:#ff9b8f}
    .migrationProgress{display:none;align-items:center;gap:12px;margin-top:10px;padding:12px;border-radius:12px;background:rgba(237,157,29,.07);border:1px solid rgba(237,157,29,.14)}
    .migrationProgress.active{display:flex}
    .migrationProgress strong,.migrationProgress span{display:block}
    .migrationProgress strong{font-size:12px;color:#f1d7ad;margin-bottom:2px}
    .migrationProgress span{font-size:11px;color:#8f8170}
    .migrationSpinner{width:18px;height:18px;border:2px solid rgba(237,157,29,.18);border-top-color:#ed9d1d;border-radius:50%;animation:migrationSpin .7s linear infinite;flex:0 0 auto}
    @keyframes migrationSpin{to{transform:rotate(360deg)}}
    @media(max-width:560px){.migrationCard{padding:27px 21px}.migrationCard h2{font-size:26px}}

    .mutedSmall{font-size:13px;color:var(--text-muted);font-weight:500}

    /* ── TOAST ────────────────────────────────────────────────────────── */
    #toast{
      position:fixed;left:50%;transform:translateX(-50%);bottom:28px;
      background:linear-gradient(160deg,#1e2029,#13141c);
      color:var(--text);padding:12px 20px;border-radius:14px;
      display:none;z-index:10000;
      border:1px solid var(--border-strong);
      border-top-color:rgba(255,255,255,0.16);
      box-shadow:0 20px 50px rgba(0,0,0,0.6),0 4px 16px rgba(0,0,0,0.3);
      font-size:13px;font-weight:600;letter-spacing:-0.005em;
      animation:toastIn .35s var(--ease-bounce) both;
      white-space:nowrap;
    }
    @keyframes toastIn{
      from{opacity:0;transform:translateX(-50%) translateY(14px) scale(0.9)}
      to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
    }
    #toast.warn{
      background:linear-gradient(160deg,#2e1414,#1e0d0d);
      border-color:rgba(255,112,112,0.4);
      border-top-color:rgba(255,140,140,0.3);
      color:#ffd6d6;
    }

    /* ── ADMIN PANEL ──────────────────────────────────────────────────── */
    #adminPanel{
      background:linear-gradient(160deg,rgba(241,194,50,0.07),rgba(241,194,50,0.03));
      border:1px solid rgba(241,194,50,0.22);
      border-top-color:rgba(241,194,50,0.35);
      border-radius:15px;padding:14px;margin-bottom:8px;display:none;
    }
    .adminPanelTitle{font-size:11px;font-weight:700;color:var(--accent);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:10px}
    .adminUserRow{
      display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px;
      padding:7px 10px;border-radius:9px;
      background:rgba(0,0,0,0.22);
      border:1px solid var(--border);
      transition:background .2s;
    }
    .adminUserRow:hover{background:rgba(0,0,0,0.3)}
    .adminUserName{font-size:13px;font-weight:700;min-width:80px;color:var(--text)}
    .banBtn{
      font-size:11px;padding:6px 13px;border-radius:8px;
      background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.13);color:var(--text-dim);
      cursor:pointer;font-weight:600;
      transition:all .18s var(--ease-smooth);
    }
    .banBtn:hover{
      background:var(--accent-soft);border-color:var(--border-accent);color:var(--accent);
      transform:translateY(-1px);box-shadow:0 3px 12px rgba(0,0,0,0.2);
    }

    /* ── GIFs ─────────────────────────────────────────────────────────── */
    .msg img.gifImg{max-width:240px;max-height:240px;border-radius:11px;display:block;margin-top:7px}
    .system img.gifImg{max-width:280px;max-height:280px;border-radius:12px;display:block;margin:8px auto;border:1px solid var(--border)}
    .gifBtn{
      padding:11px 14px;border-radius:var(--radius-sm);
      background:var(--surface);border:1px solid var(--border);color:var(--text);
      cursor:pointer;font-size:12px;font-weight:700;letter-spacing:0.04em;
      transition:all .2s var(--ease-smooth);
    }
    .gifBtn:hover{background:var(--accent-soft);border-color:var(--border-accent);color:var(--accent);transform:translateY(-1px)}
    .giphyTile{
      cursor:pointer;border-radius:10px;overflow:hidden;
      background:#080910;aspect-ratio:1;
      display:flex;align-items:center;justify-content:center;
      border:2px solid transparent;
      transition:all .2s var(--ease-smooth);
    }
    .giphyTile:hover{border-color:var(--accent);transform:scale(1.04);box-shadow:0 6px 20px rgba(241,194,50,0.2)}
    .giphyTile img{width:100%;height:100%;object-fit:cover;display:block}

    /* ── MOD WARNING ──────────────────────────────────────────────────── */
    .modWarn{
      background:linear-gradient(160deg,rgba(241,194,50,0.11),rgba(241,194,50,0.05));
      border:1px solid rgba(241,194,50,0.28);border-radius:12px;
      padding:12px 14px;font-size:12px;color:#fff3cc;line-height:1.55;margin-bottom:14px;
    }
    .modWarn strong{color:var(--accent);font-weight:700}

    /* ── REPLY & DELETE BUTTONS ───────────────────────────────────────── */
    .delMsgBtn{
      font-size:10px;padding:3px 8px;border-radius:6px;
      background:var(--danger-soft);border:1px solid rgba(255,112,112,0.3);
      color:var(--danger);cursor:pointer;display:none;margin-left:6px;font-weight:600;
      transition:all .2s var(--ease-smooth);
    }
    .delMsgBtn:hover{background:rgba(255,112,112,0.22)}
    .replyBtn{
      position:absolute;right:-36px;top:50%;transform:translateY(-50%) scale(0.8);
      width:28px;height:28px;border-radius:50%;padding:0;
      background:var(--surface-2);border:1px solid var(--border);color:var(--text-muted);
      cursor:pointer;display:flex;align-items:center;justify-content:center;
      opacity:0;pointer-events:none;
      transition:opacity .15s ease,transform .15s ease,background .15s,color .15s;
      box-shadow:0 2px 8px rgba(0,0,0,0.18);
    }
    .replyBtn svg{width:13px;height:13px;flex-shrink:0}
    .replyBtn:hover{background:var(--surface-hover);color:var(--accent);border-color:var(--accent)}
    a.chatLink{color:var(--accent);text-decoration:underline;text-underline-offset:2px;word-break:break-all;transition:opacity .15s}
    a.chatLink:hover{opacity:.75}
    .charlieModelLink{color:#62afff;text-decoration:underline;text-underline-offset:3px}
    .charlieModelLink:focus-visible{outline:2px solid #62afff;outline-offset:4px;border-radius:2px}
    .charlieMemoryNotice{flex:none;margin:14px 0;padding:12px 14px;border-left:3px solid var(--accent);background:var(--surface,#17181d);font-size:13px;line-height:1.5;color:var(--text,#f0f0f4)}
    .charlieMemoryNotice[hidden]{display:none!important}
    .charlieMemoryNotice strong,.charlieMemoryNotice span{display:block}
    .charlieMemoryNotice span{margin-top:3px;color:var(--text-muted,#b4b5c0)}
    .charlieMemoryNotice label{display:flex;align-items:flex-start;gap:8px;margin-top:10px;cursor:pointer}
    .charlieMemoryNotice input{width:16px;height:16px;margin:2px 0 0;accent-color:var(--accent)}
    .mod-panel-on .msg:hover .delMsgBtn,.mod-panel-on .msg.me:hover .delMsgBtn{display:inline-block}

    /* ── MODERATOR PANEL ──────────────────────────────────────────────── */
    #moderatorPanel{
      background:linear-gradient(160deg,rgba(100,180,255,0.07),rgba(100,180,255,0.03));
      border:1px solid rgba(100,180,255,0.22);
      border-top-color:rgba(100,180,255,0.38);
      border-radius:15px;padding:14px;margin-bottom:8px;
    }
    .modPanelHeader{
      display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;
    }
    .modPanelTitle{
      font-size:11px;font-weight:700;color:#80bfff;
      letter-spacing:0.1em;text-transform:uppercase;
    }
    .modPanelBadge{
      font-size:9px;font-weight:800;letter-spacing:0.12em;
      background:rgba(100,180,255,0.18);border:1px solid rgba(100,180,255,0.35);
      color:#80bfff;border-radius:5px;padding:2px 6px;text-transform:uppercase;
    }
    .modPanelHint{
      font-size:11px;color:var(--text-dim);margin-bottom:10px;
      background:rgba(100,180,255,0.06);border-radius:8px;padding:6px 10px;
    }
    .modPanelHint strong{color:#80bfff}
    .modPanelEmpty{font-size:12px;color:#888;text-align:center;padding:12px}
    .modUserRow{
      display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px;
      padding:8px 10px;border-radius:9px;
      background:rgba(0,0,0,0.22);border:1px solid var(--border);
      transition:background .2s;
    }
    .modUserRow:hover{background:rgba(0,0,0,0.3)}
    .modUserName{font-size:13px;font-weight:700;min-width:80px;color:var(--text);flex:1}
    .modWarnCount{
      font-size:10px;padding:2px 6px;border-radius:5px;font-weight:700;
      background:rgba(255,200,80,0.15);border:1px solid rgba(255,200,80,0.3);color:#ffc850;
    }
    .modBtn{
      font-size:11px;padding:5px 12px;border-radius:8px;
      background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);color:var(--text-dim);
      cursor:pointer;font-weight:600;white-space:nowrap;
      transition:all .18s var(--ease-smooth);
    }
    .modBtn:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,0.25)}
    .modBtn.warn{background:rgba(255,200,80,0.1);border-color:rgba(255,200,80,0.28);color:#ffc850}
    .modBtn.warn:hover{background:rgba(255,200,80,0.18);border-color:rgba(255,200,80,0.5);box-shadow:0 3px 12px rgba(255,200,80,0.15)}
    .modBtn.tempban{background:rgba(255,140,80,0.1);border-color:rgba(255,140,80,0.28);color:#ff9060}
    .modBtn.tempban:hover{background:rgba(255,140,80,0.18);border-color:rgba(255,140,80,0.5);box-shadow:0 3px 12px rgba(255,140,80,0.15)}
    .modBtn.ban{background:rgba(255,80,80,0.1);border-color:rgba(255,80,80,0.28);color:#ff7070}
    .modBtn.ban:hover{background:rgba(255,80,80,0.18);border-color:rgba(255,80,80,0.5);box-shadow:0 3px 12px rgba(255,80,80,0.15)}
    .modBtn.unban{background:rgba(80,220,120,0.1);border-color:rgba(80,220,120,0.28);color:#50dc78}
    .modBtn.unban:hover{background:rgba(80,220,120,0.18);border-color:rgba(80,220,120,0.5);box-shadow:0 3px 12px rgba(80,220,120,0.15)}
    .modBannedBadge{
      font-size:10px;padding:2px 7px;border-radius:5px;font-weight:700;
      background:rgba(255,80,80,0.15);border:1px solid rgba(255,80,80,0.3);color:#ff8080;
    }

    /* ── REPLY QUOTE & BAR ────────────────────────────────────────────── */
    .replyQuote{
      display:block;border-left:3px solid var(--accent);
      background:rgba(0,0,0,0.22);padding:6px 10px;margin:0 0 8px 0;
      border-radius:7px;font-size:12px;color:var(--text-muted);
      cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
      transition:background .15s;
    }
    .replyQuote:hover{background:rgba(0,0,0,0.32)}
    .replyQuote .replyQuoteName{font-weight:700;color:var(--accent);margin-right:6px;font-size:11px;letter-spacing:0.02em}
    .msg.me .replyQuote{background:rgba(0,0,0,0.28);color:rgba(255,240,180,0.75)}
    .msg.me .replyQuote .replyQuoteName{color:rgba(255,240,180,0.95)}

    .replyBar{
      display:none;align-items:center;gap:10px;
      background:linear-gradient(90deg,rgba(241,194,50,0.1),rgba(241,194,50,0.02));
      border-left:3px solid var(--accent);
      padding:8px 13px;margin-top:8px;border-radius:9px;font-size:13px;
      animation:replyBarIn .25s var(--ease-bounce) both;
    }
    @keyframes replyBarIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
    .replyBar.active{display:flex}
    .replyBarText{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-muted)}
    .replyBarText b{color:var(--accent);margin-right:6px;font-weight:700}
    .replyBarClose{background:transparent;border:none;color:var(--text-dim);cursor:pointer;font-size:20px;padding:0 4px;line-height:1;font-weight:300;transition:color .15s}
    .replyBarClose:hover{color:var(--text)}

    /* ── GROQ KEY ROW ─────────────────────────────────────────────────── */
    .grokKeyRow{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:11px;color:var(--text-muted)}
    .grokKeyRow input{flex:1;font-size:11px;padding:6px 10px;background:rgba(0,0,0,0.4);border:1px solid var(--border);border-radius:6px;color:var(--text)}
    .grokKeyRow input:focus{box-shadow:0 0 0 2px var(--accent-soft)}
    .grokStatus{font-size:11px;color:var(--text-muted);margin-top:6px;font-weight:600;letter-spacing:0.02em}

    /* ── PROFILE POPUP ────────────────────────────────────────────────── */
    #profilePopup{
      position:fixed;z-index:9500;display:none;width:256px;
      background:linear-gradient(160deg,#1f2028,#14151e);
      border:1px solid var(--border-strong);
      border-top-color:rgba(255,255,255,0.2);
      border-radius:18px;padding:16px;
      box-shadow:0 28px 80px rgba(0,0,0,0.7),0 6px 24px rgba(0,0,0,0.4),0 0 0 1px rgba(255,255,255,0.04) inset;
      pointer-events:auto;
      animation:popupIn .28s var(--ease-bounce) both;
    }
    @keyframes popupIn{
      from{opacity:0;transform:scale(0.88) translateY(8px)}
      to{opacity:1;transform:scale(1) translateY(0)}
    }
    .pp-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
    .pp-avatar{
      width:48px;height:48px;border-radius:50%;
      display:flex;align-items:center;justify-content:center;
      font-size:20px;font-weight:800;color:#000;flex-shrink:0;
      border:2px solid rgba(255,255,255,0.14);
      box-shadow:0 0 0 4px rgba(255,255,255,0.05);
    }
    .pp-info{flex:1;min-width:0}
    .pp-display-name{font-weight:800;font-size:14px;letter-spacing:-0.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
    .pp-badge{font-size:11px;color:var(--text-muted);font-weight:600}
    .pp-stats{
      display:flex;flex-direction:column;gap:4px;margin-bottom:12px;
      background:rgba(0,0,0,0.25);border-radius:10px;padding:9px 11px;border:1px solid var(--border);
    }
    .pp-stat{display:flex;justify-content:space-between;align-items:center;font-size:12px}
    .pp-stat-label{color:var(--text-muted);font-weight:500}
    .pp-stat-val{font-weight:700}
    .pp-btns{display:flex;gap:6px}
    .pp-btn-msg{
      flex:1;padding:8px 10px;font-size:12px;font-weight:700;border-radius:9px;
      background:linear-gradient(135deg,#f5cf3e,#e8b820);color:#1a1000;border:0;cursor:pointer;
      transition:all .2s var(--ease-smooth);
    }
    .pp-btn-msg:hover{box-shadow:0 4px 16px rgba(241,194,50,0.35);transform:translateY(-1px)}
    .pp-btn-report{
      flex:1;padding:8px 10px;font-size:12px;font-weight:700;border-radius:9px;
      background:rgba(255,100,100,0.08);border:1px solid rgba(255,100,100,0.25);color:#ff8888;cursor:pointer;
      transition:all .2s var(--ease-smooth);
    }
    .pp-btn-report:hover{background:rgba(255,100,100,0.16);border-color:rgba(255,100,100,0.45);transform:translateY(-1px)}
    .pp-btn-msg:disabled,.pp-btn-report:disabled{opacity:0.4;cursor:not-allowed;transform:none}
    .pp-name{cursor:pointer;transition:color .15s}
    .pp-name:hover{color:var(--accent) !important}
    .pp-loading{font-size:12px;color:var(--text-muted);text-align:center;padding:8px 0}
    .pp-desc{font-size:12px;color:var(--text-muted);margin-top:3px;font-style:italic;line-height:1.3;word-break:break-word;max-height:48px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}

    /* ── REPORTS ──────────────────────────────────────────────────────── */
    .reportCard{background:rgba(255,100,100,0.05);border:1px solid rgba(255,100,100,0.18);border-radius:11px;padding:10px 12px;margin-bottom:6px;font-size:12px}
    .reportCard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
    .reportCard-name{font-weight:700;color:#ff9090}
    .reportCard-time{color:var(--text-dim);font-size:11px}
    .reportCard-text{color:var(--text-muted);margin-bottom:8px;font-style:italic;word-break:break-word}
    .reportCard-by{color:var(--text-dim);font-size:11px;margin-bottom:6px}
    .resolveBtn{font-size:11px;padding:4px 10px;border-radius:6px;background:var(--success-soft);border:1px solid rgba(93,227,138,0.3);color:var(--success);cursor:pointer;font-weight:600;transition:all .2s var(--ease-smooth)}
    .resolveBtn:hover{background:rgba(93,227,138,0.2)}
    .reportSection{margin-top:10px;border-top:1px solid rgba(255,100,100,0.18);padding-top:10px}
    .reportSectionTitle{font-size:10px;font-weight:700;color:#ff9090;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:6px}

    /* ── RANK BADGES ──────────────────────────────────────────────────── */
    .rank-badge{
      display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;
      font-size:0.62em;font-weight:800;letter-spacing:0.06em;
      vertical-align:middle;margin-left:5px;line-height:1.6;white-space:nowrap;
      transition:transform .2s var(--ease-bounce),box-shadow .2s;
    }
    .rank-badge:hover{transform:scale(1.08)}
    .rank-copper{background:rgba(184,115,51,0.16);color:#d4853a;border:1px solid rgba(184,115,51,0.38);box-shadow:0 0 8px rgba(184,115,51,0.15)}
    .rank-silver{background:rgba(200,200,200,0.12);color:#d0d0d0;border:1px solid rgba(200,200,200,0.32);box-shadow:0 0 8px rgba(200,200,200,0.1)}
    .rank-gold{background:rgba(255,215,0,0.14);color:#ffd700;border:1px solid rgba(255,215,0,0.42);box-shadow:0 0 10px rgba(255,215,0,0.18)}
    .rank-diamond{background:rgba(100,220,255,0.11);color:#85dcf8;border:1px solid rgba(100,220,255,0.38);box-shadow:0 0 10px rgba(100,220,255,0.15)}

    /* ── ADMIN ACCOUNTS MODAL ─────────────────────────────────────────── */
    .adminAccCard{
      display:flex;justify-content:space-between;align-items:center;
      padding:10px 13px;border-radius:11px;
      background:rgba(0,0,0,0.22);border:1px solid var(--border);margin-bottom:6px;
      transition:all .2s var(--ease-smooth);
    }
    .adminAccCard:hover{background:rgba(0,0,0,0.32);border-color:var(--border-mid)}
    .adminAccLeft{display:flex;flex-direction:column;gap:3px}
    .adminAccName{font-size:13px;font-weight:700}
    .adminAccMeta{font-size:11px;color:var(--text-muted);font-weight:500}
    .adminAccBtns{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
    .rankBtn{
      font-size:11px;padding:5px 10px;border-radius:7px;
      background:var(--surface-2);border:1px solid var(--border);color:var(--text);
      cursor:pointer;font-weight:700;
      transition:all .2s var(--ease-smooth);
    }
    .rankBtn:hover{border-color:var(--border-accent);color:var(--accent);transform:translateY(-1px)}

    /* ── VERSION LABEL ────────────────────────────────────────────────── */
    #versionLabel{
      position:fixed;bottom:10px;right:14px;
      font-size:11px;color:rgba(255,255,255,0.15);
      font-weight:600;letter-spacing:0.06em;z-index:9000;
      pointer-events:none;user-select:none;
    }

    /* ── PROFILE SETTINGS PANEL ───────────────────────────────────────── */
    #profileSettingsPanel{
      border-radius:13px;border:1px solid var(--border);
      background:var(--surface);overflow:hidden;margin-top:8px;
      transition:box-shadow .3s;
    }
    #profileSettingsPanel:hover{box-shadow:0 4px 16px rgba(0,0,0,0.15)}
    .psHeader{
      display:flex;justify-content:space-between;align-items:center;
      padding:10px 14px;cursor:pointer;user-select:none;
      transition:background .2s var(--ease-smooth);
    }
    .psHeader:hover{background:var(--surface-hover)}
    .psHeaderLeft{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--text-muted)}
    .psHeaderLeft .psIcon{font-size:15px}
    .psChevron{font-size:12px;color:var(--text-dim);transition:transform .3s var(--ease-bounce)}
    .psChevron.open{transform:rotate(180deg)}
    #psBody{padding:13px 14px 14px;border-top:1px solid var(--border);animation:psBodyIn .25s var(--ease-out) both}
    @keyframes psBodyIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
    .psStatGrid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}
    .psStat{background:rgba(0,0,0,0.2);border:1px solid var(--border);border-radius:9px;padding:9px 11px;transition:border-color .2s}
    .psStat:hover{border-color:var(--border-mid)}
    .psStatLabel{font-size:11px;color:var(--text-muted);font-weight:600;display:block;margin-bottom:4px}
    .psStatVal{font-size:16px;font-weight:800;color:var(--text)}
    .psStatVal.warn{color:#f5cd49}
    .psStatVal.danger{color:#ff8080}
    .psDescLabel{font-size:12px;font-weight:700;color:var(--text-muted);margin-bottom:6px;display:block}
    #psDescInput{
      width:100%;box-sizing:border-box;min-height:64px;resize:vertical;
      font-size:13px;padding:10px 12px;border-radius:9px;
      border:1px solid var(--border);background:rgba(0,0,0,0.28);
      color:var(--text);font-family:inherit;line-height:1.45;
    }
    #psDescInput:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
    .psDescMeta{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
    .psEmailLabel{font-size:12px;font-weight:700;color:var(--text-muted);margin-bottom:4px;display:block}
    .psEmailInput{display:block;width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:rgba(0,0,0,0.2);color:var(--text);font-size:13px;box-sizing:border-box;outline:none;transition:border-color .2s,box-shadow .2s}
    .psEmailInput:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
    .psEmailRow{display:flex;align-items:center;gap:8px;margin-top:8px}
    .psEmailRow .primary,.psEmailRow .secondary{flex-shrink:0;white-space:nowrap}
    .psEmailRow .primary:disabled,.psEmailRow .secondary:disabled{opacity:0.4;cursor:not-allowed}
    .psEmailStatus{font-size:11px;color:var(--text-muted);margin-top:4px;min-height:16px}
    #psDescCount{font-size:11px;color:var(--text-dim);font-weight:600}

    /* ── LOADING SCREEN ──────────────────────────────────────────────── */
    #loadingOverlay{
      position:fixed;inset:0;
      display:flex;align-items:center;justify-content:center;
      background:rgba(8,9,15,0.97);
      backdrop-filter:blur(28px);
      -webkit-backdrop-filter:blur(28px);
      z-index:99999;
      opacity:0;pointer-events:none;
      transition:opacity .4s ease;
    }
    #loadingOverlay.active{opacity:1;pointer-events:auto}
    #loadingOverlay.hiding{opacity:0 !important;transition:opacity .55s ease !important}
    .ldr-card{
      display:flex;flex-direction:column;align-items:center;gap:0;
      position:relative;
    }
    .ldr-glow{
      position:absolute;
      top:50%;left:50%;
      transform:translate(-50%,-68%);
      width:120px;height:120px;
      border-radius:50%;
      background:radial-gradient(circle,rgba(241,194,50,0.08) 0%,transparent 70%);
      pointer-events:none;
      animation:ldrGlowPulse 2.8s ease-in-out infinite;
    }
    @keyframes ldrGlowPulse{
      0%,100%{opacity:.5;transform:translate(-50%,-68%) scale(1)}
      50%{opacity:1;transform:translate(-50%,-68%) scale(1.18)}
    }
    #ldrCanvas{
      display:block;width:120px;height:120px;margin-bottom:22px;
      position:relative;z-index:1;
    }
    .ldr-divider{
      width:28px;height:1px;
      background:linear-gradient(90deg,transparent,rgba(241,194,50,0.45),transparent);
      margin-bottom:16px;
    }
    .ldr-label{
      font-size:10px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
      color:var(--accent,#f1c232);
      animation:ldrFade 2s ease-in-out infinite;
    }
    .ldr-sub{
      font-size:10px;color:rgba(255,255,255,0.22);font-weight:400;letter-spacing:.08em;
      margin-top:7px;
      animation:ldrFade 2.4s ease-in-out infinite .5s;
    }
    @keyframes ldrFade{0%,100%{opacity:.45}50%{opacity:1}}

    /* ── RESPONSIVE ───────────────────────────────────────────────────── */
    @media(max-width:540px){
      #app{padding:14px;border-radius:18px}
      #chatWindow{height:50vh;padding:12px}
      .groupTitle{font-size:14px}
      .modal{padding:18px;border-radius:16px}
      .primary,.ghost,.delBtn{padding:9px 12px}
    }
    /* ══════════════════════════════════════════════════════════════════
       v3.9 POLISH LAYER — overrides & refinements
       ══════════════════════════════════════════════════════════════════ */

    /* Richer body backdrop */
    html,body{
      background:
        radial-gradient(ellipse 130% 55% at 50% -5%,rgba(241,194,50,0.07) 0%,transparent 52%),
        radial-gradient(ellipse 55% 38% at 88% 96%,rgba(80,90,200,0.04) 0%,transparent 55%),
        linear-gradient(188deg,#141622 0%,#0d0e14 44%,#080910 100%);
    }

    /* App shell */
    #app{
      border-radius:26px;
      border-top-color:rgba(255,255,255,0.19);
      box-shadow:
        0 52px 130px rgba(0,0,0,0.68),
        0 20px 56px rgba(0,0,0,0.38),
        0 0 0 1px rgba(255,255,255,0.025) inset,
        0 1px 0 rgba(255,255,255,0.1) inset;
    }

    /* ── Start screen ─────────────────────────────── */
    #startView{padding:18px 0 12px}
    #startView h2{
      font-size:32px;letter-spacing:-0.032em;
      background:linear-gradient(135deg,#fad84e 15%,#e8b820 65%,#d09810 100%);
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
      margin-bottom:6px;
    }
    #startView .muted{font-size:13.5px;color:var(--text-muted);margin-bottom:4px}
    #startView .row{gap:10px;flex-wrap:wrap}
    #startView .row :is(button,.button-link){font-size:14px;padding:12px 22px;border-radius:12px}

    /* ── Buttons ──────────────────────────────────── */
    .primary{
      background:linear-gradient(148deg,#f7d040 0%,#eabc1e 55%,#d8a810 100%);
      border-color:rgba(255,255,255,0.2);
      box-shadow:0 4px 20px rgba(241,194,50,0.32),0 1px 0 rgba(255,255,255,0.32) inset,0 -1px 0 rgba(0,0,0,0.18) inset;
    }
    .primary:hover{
      background:linear-gradient(148deg,#fad94d 0%,#f0c128 52%,#e0b116 100%);
      box-shadow:0 8px 30px rgba(241,194,50,0.52),0 1px 0 rgba(255,255,255,0.35) inset;
      transform:translateY(-2px) scale(1.02);
    }
    .primary:active{transform:translateY(0) scale(0.96) !important;box-shadow:0 2px 10px rgba(241,194,50,0.22) !important}
    .ghost{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.16);color:var(--text)}
    .ghost:hover{background:rgba(255,255,255,0.11);border-color:rgba(255,255,255,0.26);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,0.28)}
    .secondary{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.1);color:var(--text-dim)}
    .secondary:hover{background:rgba(255,255,255,0.09);border-color:rgba(255,255,255,0.2);color:var(--text);transform:translateY(-1px)}
    .delBtn{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.11);color:var(--text-muted)}
    .delBtn:hover{background:rgba(255,255,255,0.09);border-color:rgba(255,255,255,0.2);color:var(--text);box-shadow:0 3px 12px rgba(0,0,0,0.22)}

    /* ── Inputs ───────────────────────────────────── */
    input,textarea,select{background:rgba(0,0,0,0.3);border-color:rgba(255,255,255,0.08)}
    input:focus,textarea:focus{
      background:rgba(0,0,0,0.42);
      border-color:rgba(241,194,50,0.5);
      box-shadow:0 0 0 3px rgba(241,194,50,0.1),0 2px 6px rgba(0,0,0,0.2) inset;
    }

    /* ── Send bar (grouped input + buttons) ────────── */
    .sendBar{
      background:rgba(0,0,0,0.22) !important;
      border:1px solid rgba(255,255,255,0.08) !important;
      border-radius:15px !important;
      padding:5px 5px 5px 4px !important;
      margin-top:10px !important;
      gap:5px !important;
      transition:border-color .2s,box-shadow .2s;
    }
    .sendBar:focus-within{
      border-color:rgba(241,194,50,0.28) !important;
      box-shadow:0 0 0 3px rgba(241,194,50,0.07) !important;
    }
    #msgInput{
      background:transparent !important;border:none !important;
      padding:10px 12px !important;box-shadow:none !important;
      outline:none !important;
    }
    #sendBtn{border-radius:11px !important;padding:10px 18px !important;flex-shrink:0}
    #gifBtn{
      border-radius:10px !important;padding:10px 13px !important;
      background:rgba(255,255,255,0.04) !important;
      border:1px solid rgba(255,255,255,0.08) !important;
      color:var(--text-muted) !important;
      font-weight:700 !important;font-size:12px !important;
    }
    #gifBtn:hover{
      background:var(--accent-soft) !important;
      border-color:var(--border-accent) !important;
      color:var(--accent) !important;
    }
    #imgUploadBtn{
      border-radius:10px !important;padding:9px 10px !important;
      background:rgba(255,255,255,0.04) !important;
      border:1px solid rgba(255,255,255,0.08) !important;
      color:var(--text-muted) !important;
      font-size:15px !important;line-height:1;flex-shrink:0;cursor:pointer;
      display:inline-flex;align-items:center;justify-content:center;
      transition:background .15s,border-color .15s,color .15s;
    }
    #imgUploadBtn:hover{background:var(--accent-soft) !important;border-color:var(--border-accent) !important;}
    #imgUploadBtn.has-img{background:rgba(241,194,50,0.15) !important;border-color:var(--border-accent) !important;color:var(--accent) !important;}
    .msg img.uploadedImg{
      max-width:280px;max-height:320px;border-radius:11px;display:block;
      margin-top:7px;cursor:pointer;object-fit:contain;
      border:1px solid rgba(255,255,255,0.08);transition:opacity .15s;
    }
    .msg img.uploadedImg:hover{opacity:.85}
    #imgPreviewBar{
      display:none;align-items:center;gap:10px;
      padding:6px 12px 6px 8px;
      background:rgba(255,255,255,0.04);
      border:1px solid rgba(255,255,255,0.1);
      border-radius:10px;margin-bottom:4px;
      animation:replyBarIn .2s ease both;
    }
    #imgPreviewBar.active{display:flex}
    #imgPreviewThumb{width:44px;height:44px;object-fit:cover;border-radius:7px;flex-shrink:0;border:1px solid rgba(255,255,255,0.1);}
    #imgPreviewName{flex:1;font-size:12px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    #imgPreviewClose{background:transparent;border:none;color:var(--text-dim);cursor:pointer;font-size:20px;padding:0 4px;line-height:1;font-weight:300;transition:color .15s;}
    #imgPreviewClose:hover{color:var(--text)}

    /* ── Chat window ──────────────────────────────── */
    #chatWindow{
      border-radius:17px;
      background:rgba(0,0,0,0.18);
      border-color:rgba(255,255,255,0.06);
      padding:18px 16px;
      gap:6px;
    }

    /* ── Messages ─────────────────────────────────── */
    .msg{
      padding:10px 14px;
      border-radius:20px 20px 20px 6px;
      background:rgba(255,255,255,0.05);
      border-color:rgba(255,255,255,0.08);
      box-shadow:0 2px 10px rgba(0,0,0,0.14);
      line-height:1.5;
    }
    .msg:hover{box-shadow:0 5px 20px rgba(0,0,0,0.22)}
    .msg.me{
      background:linear-gradient(148deg,#d49a0c 0%,#a87006 100%);
      color:#fff8e0;
      border-radius:20px 20px 6px 20px;
      border-color:rgba(220,170,20,0.5);
      box-shadow:0 3px 16px rgba(180,125,0,0.35);
    }
    .msg.me:hover{box-shadow:0 6px 22px rgba(190,135,0,0.45)}
    .msg .name{font-size:0.82em;font-weight:700;letter-spacing:0.01em;margin-right:5px}

    /* ── System messages ──────────────────────────── */
    .system{
      font-size:11.5px;
      color:rgba(140,150,170,0.62);
      background:rgba(255,255,255,0.022);
      border-color:rgba(255,255,255,0.06);
      padding:4px 14px;
    }

    /* ── Group cards ──────────────────────────────── */
    .groupCard{
      border-radius:16px;
      background:linear-gradient(152deg,rgba(255,255,255,0.043) 0%,rgba(255,255,255,0.018) 100%);
      border-color:rgba(255,255,255,0.07);
      position:relative;overflow:hidden;
    }
    .groupCard::before{
      content:'';position:absolute;top:0;bottom:0;left:0;width:3px;
      background:linear-gradient(180deg,var(--accent) 0%,var(--accent-dim) 100%);
      opacity:0;transition:opacity .22s;border-radius:2px 0 0 2px;
    }
    .groupCard:hover{
      background:linear-gradient(152deg,rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.032) 100%);
      border-color:rgba(255,255,255,0.1);
      transform:translateX(4px) translateY(-1px);
      box-shadow:0 8px 28px rgba(0,0,0,0.26);
    }
    .groupCard:hover::before{opacity:1}
    .groupCard:active{transform:translateX(2px) translateY(0) !important;box-shadow:0 3px 10px rgba(0,0,0,0.2) !important}
    .groupTitle{font-size:14.5px;font-weight:700;letter-spacing:-0.018em}
    .groupMeta{font-size:11.5px;color:rgba(140,155,175,0.85)}

    /* ── Online presence strip ────────────────────── */
    .onlineUser{
      background:rgba(255,255,255,0.038);
      border-color:rgba(255,255,255,0.08);
      padding:5px 11px;font-size:11.5px;
    }
    .onlineUser:hover{background:rgba(255,255,255,0.065);border-color:rgba(255,255,255,0.11)}
    .dot{width:6px;height:6px}

    /* ── Tabs ─────────────────────────────────────── */
    .tabs{background:rgba(0,0,0,0.32);border-radius:12px;border-color:rgba(255,255,255,0.07)}
    .tabbtn{padding:7px 15px;border-radius:9px;font-size:13px}
    .tabbtn.active{box-shadow:0 2px 10px rgba(241,194,50,0.28)}

    /* ── Modals ───────────────────────────────────── */
    .modal{
      border-radius:22px;
      background:linear-gradient(168deg,#1c1d28 0%,#0f1017 100%);
      border-color:rgba(255,255,255,0.13);
      border-top-color:rgba(255,255,255,0.22);
      box-shadow:0 48px 120px rgba(0,0,0,0.78),0 12px 40px rgba(0,0,0,0.42),0 0 0 1px rgba(255,255,255,0.04) inset;
      padding:26px;
    }

    /* ── Profile popup ────────────────────────────── */
    #profilePopup{
      border-radius:20px;
      background:linear-gradient(168deg,#1c1d27,#10111a);
      border-color:rgba(255,255,255,0.12);
      box-shadow:0 36px 96px rgba(0,0,0,0.75),0 8px 30px rgba(0,0,0,0.4);
    }
    .pp-avatar{border-radius:14px;box-shadow:0 4px 16px rgba(0,0,0,0.3);border-color:rgba(255,255,255,0.12)}
    .pp-stats{background:rgba(0,0,0,0.22);border-radius:12px;border-color:rgba(255,255,255,0.07)}
    .pp-display-name{font-size:15px;font-weight:800;letter-spacing:-0.02em}

    /* ── Reply bar ────────────────────────────────── */
    .replyBar{
      border-radius:11px;padding:9px 13px;
      background:linear-gradient(90deg,rgba(241,194,50,0.09) 0%,rgba(241,194,50,0.01) 100%);
      margin-top:0;
    }

    /* ── Contact cards ────────────────────────────── */
    .contactCard{border-radius:14px;background:rgba(255,255,255,0.035)}
    .contactCard:hover{background:rgba(255,255,255,0.062);border-color:rgba(255,255,255,0.1)}

    /* ── Toast ────────────────────────────────────── */
    #toast{
      border-radius:16px;padding:13px 22px;
      box-shadow:0 24px 60px rgba(0,0,0,0.62),0 6px 20px rgba(0,0,0,0.32);
      font-weight:600;letter-spacing:-0.01em;
    }

    /* ── Admin panel ──────────────────────────────── */
    #adminPanel{
      border-radius:16px;
      background:linear-gradient(162deg,rgba(241,194,50,0.08),rgba(241,194,50,0.025));
      border-color:rgba(241,194,50,0.2);
    }
    .adminUserRow{border-radius:10px;padding:8px 12px}

    /* ── Code blocks ──────────────────────────────── */
    pre.codeBlock{border-radius:12px;border-left:3px solid rgba(241,194,50,0.45);background:rgba(0,0,0,0.5)}

    /* ── Poll ─────────────────────────────────────── */
    .poll{border-radius:14px;background:rgba(255,255,255,0.032);border-color:rgba(255,255,255,0.07)}
    .poll .option{border-radius:10px}
    .poll .option:hover{transform:translateX(3px)}

    /* ── Mod warning ──────────────────────────────── */
    .modWarn{border-radius:13px;padding:12px 15px}

    /* ── Profile settings panel ───────────────────── */
    #profileSettingsPanel{border-radius:14px;border-color:rgba(255,255,255,0.07)}
    .psStat{border-radius:10px;background:rgba(0,0,0,0.22);border-color:rgba(255,255,255,0.07)}
    .psStatVal{font-size:15px}

    /* ── Rank badges ──────────────────────────────── */
    .rank-badge{font-size:0.62em;letter-spacing:0.07em;padding:2px 7px}
    .rank-gold{box-shadow:0 0 10px rgba(255,215,0,0.2)}
    .rank-diamond{box-shadow:0 0 10px rgba(100,220,255,0.18)}

    /* ── Scrollbars ───────────────────────────────── */
    ::-webkit-scrollbar{width:4px;height:4px}
    ::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.11);border-radius:999px}
    ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.2)}

    /* ── Version label — bottom LEFT ─────────────── */
    #versionLabel{left:14px !important;right:auto !important;color:rgba(255,255,255,0.17) !important}

    /* ═══════════════════════════════════════════════════════════════
       SETTINGS, THEMES & LIGHT MODE — v3.9
    ═══════════════════════════════════════════════════════════════ */

    #app { position: relative !important; }

    /* Hide old profile panel — moved to Settings modal */
    #profileSettingsPanel { display: none !important; }

    /* ── SETTINGS GEAR BUTTON ─────────────────────────────────────── */
    #settingsBtn {
      position: absolute; top: 16px; right: 16px; z-index: 200;
      width: 36px; height: 36px; border-radius: 50%;
      background: var(--surface-2); border: 1px solid var(--border-mid);
      color: var(--text-muted);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; padding: 0; line-height: 1;
      transition: background .22s var(--ease-smooth), border-color .22s,
                  color .22s, transform .38s var(--ease-smooth), box-shadow .22s;
    }
    #settingsBtn:hover {
      background: var(--accent-soft); border-color: var(--border-accent);
      color: var(--accent); transform: rotate(75deg);
      box-shadow: 0 4px 16px var(--accent-glow-lg);
    }
    #settingsBtn:active { transform: rotate(75deg) scale(0.88) !important; }
    #settingsBtn svg { display: block; pointer-events: none; }

    /* ── SETTINGS MODAL v2 ────────────────────────────────────────── */
    #settingsModal .modal {
      padding: 0 !important; overflow: hidden;
      width: min(740px, 96vw) !important;
      height: min(580px, 90vh) !important;
      max-height: none !important;
      display: flex !important; flex-direction: row !important;
      gap: 0;
    }
    .s2-nav {
      width: 172px; flex-shrink: 0;
      background: rgba(0,0,0,0.18);
      border-right: 1px solid var(--border);
      display: flex; flex-direction: column;
    }
    .s2-nav-head {
      display: flex; align-items: center;
      padding: 18px 14px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0;
    }
    .s2-nav-logo {
      display: flex; align-items: center; gap: 8px;
      font-size: 13px; font-weight: 800; letter-spacing: -0.02em; color: var(--text);
    }
    .s2-close {
      position: absolute; top: 14px; right: 14px; z-index: 10;
      width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
      background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
      color: #fff; font-size: 16px; line-height: 1; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background .14s, color .14s;
      padding: 0;
    }
    .s2-close:hover { background: rgba(255,60,60,0.25); border-color: rgba(255,60,60,0.4); }
    .s2-nav-items {
      padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; flex: 1;
    }
    .s2-nav-item {
      display: flex; align-items: center; gap: 9px; width: 100%;
      padding: 9px 11px; border-radius: 9px; border: none;
      background: none; color: var(--text-dim);
      font-size: 13px; font-weight: 600; cursor: pointer; text-align: left;
      transition: background .14s, color .14s;
    }
    .s2-nav-item:hover { background: var(--surface-hover); color: var(--text); }
    .s2-nav-item.active { background: var(--accent-soft); color: var(--accent); }
    .s2-nav-item svg { flex-shrink: 0; opacity: 0.8; }
    .s2-nav-item.active svg { opacity: 1; }
    .s2-content { flex: 1; overflow-y: auto; min-width: 0; position: relative; }
    .s2-panel {
      display: none; flex-direction: column; gap: 14px;
      padding: 22px 22px 26px; min-height: 100%;
    }
    .s2-panel.active { display: flex; }
    .s2-panel-head { margin-bottom: 2px; }
    .s2-panel-title { font-size: 16px; font-weight: 800; letter-spacing: -0.025em; }
    .s2-panel-sub { font-size: 12px; color: var(--text-muted); margin-top: 3px; }

    /* cards / rows — shared with panels */
    .settings-header { display:none }
    .settings-body { display:none }
    .settings-sec-label {
      font-size: 10px; font-weight: 800; letter-spacing: 0.1em;
      text-transform: uppercase; color: var(--text-dim); padding: 0 2px; margin-bottom: 6px;
    }
    .settings-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 14px; overflow: hidden;
    }
    .settings-row {
      display: flex; align-items: center; justify-content: space-between;
      gap: 14px; padding: 13px 15px; transition: background .15s, opacity 0.22s ease;
    }
    .settings-row + .settings-row { border-top: 1px solid var(--border); }
    .settings-row:hover { background: var(--surface-hover); }
    .settings-row-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
    .settings-row-icon {
      width: 32px; height: 32px; border-radius: 8px;
      background: var(--surface-3); border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      font-size: 15px; flex-shrink: 0; transition: background .2s;
    }
    .settings-row-title { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
    .settings-row-sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }

    /* Toggle switch */
    .toggle-wrap { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
    .toggle-wrap input { opacity: 0; width: 0; height: 0; position: absolute; }
    .toggle-track {
      position: absolute; inset: 0; background: var(--surface-3);
      border: 1px solid var(--border-mid); border-radius: 999px; cursor: pointer;
      transition: background .25s var(--ease-smooth), border-color .25s;
    }
    .toggle-track::before {
      content: ''; position: absolute;
      width: 20px; height: 20px; left: 2px; top: 2px;
      background: var(--text-dim); border-radius: 50%;
      transition: transform .28s var(--ease-bounce), background .2s;
      box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    }
    .toggle-wrap input:checked + .toggle-track { background: var(--accent); border-color: var(--accent-dim); }
    .toggle-wrap input:checked + .toggle-track::before { transform: translateX(20px); background: #fff; }

    /* ── BUBBLE SIZE SLIDER ────────────────────────────────────────────── */
    .bubble-row { border-bottom: none !important; }
    .bubble-slider-wrap {
      padding: 2px 15px 14px;
      border-top: 1px solid var(--border);
    }
    .bubble-size-label {
      font-size: 12px; font-weight: 700; color: var(--accent);
      min-width: 44px; text-align: right;
      transition: opacity 0.2s ease;
    }
    .bubble-drag-preview {
      max-height: 0; overflow: hidden; opacity: 0;
      display: flex; justify-content: flex-end; padding: 0;
      transition: max-height 0.3s cubic-bezier(0.34,1.2,0.64,1),
                  opacity 0.22s ease, padding-bottom 0.3s ease;
    }
    .bubble-drag-preview.open {
      max-height: 120px; opacity: 1; padding-bottom: 10px;
    }
    .bubble-preview-msg {
      background: linear-gradient(145deg,rgba(210,155,12,0.97),rgba(168,112,6,0.97));
      color: #fff8e0;
      border-radius: 18px 18px 5px 18px;
      padding: var(--msg-pad, 10px 14px);
      font-size: var(--msg-font, 14px);
      line-height: 1.48; max-width: 85%;
      box-shadow: 0 3px 14px rgba(180,125,0,0.35);
    }
    /* Custom overlay track — invisible native input + positioned divs */
    .bubble-track-wrap {
      position: relative;
      height: 28px;
      display: flex;
      align-items: center;
      margin-top: 8px;
    }
    .bubble-track-bg {
      position: absolute;
      left: 0; right: 0;
      height: 6px;
      border-radius: 999px;
      background: rgba(255,255,255,0.1);
      overflow: visible;
      transition: height 0.22s cubic-bezier(0.34,1.56,0.64,1);
    }
    .bubble-track-wrap.dragging .bubble-track-bg { height: 12px; }
    .bubble-track-fill {
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 26%;
      background: var(--accent);
      border-radius: 999px;
    }
    .bubble-track-thumb {
      position: absolute;
      top: 50%; left: 26%;
      transform: translate(-50%, -50%);
      width: 22px; height: 22px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.45);
      pointer-events: none;
      transition: width 0.22s cubic-bezier(0.34,1.56,0.64,1),
                  height 0.22s cubic-bezier(0.34,1.56,0.64,1),
                  box-shadow 0.2s ease;
    }
    .bubble-track-wrap.dragging .bubble-track-thumb {
      width: 28px; height: 28px;
      box-shadow: 0 3px 18px rgba(0,0,0,0.55), 0 0 0 8px rgba(255,200,40,0.14);
    }
    /* Native input is invisible — handles interaction only */
    #fontSizeSlider {
      position: absolute; left: 0; right: 0; top: 0; bottom: 0;
      width: 100%; height: 100%; margin: 0; padding: 0;
      opacity: 0; cursor: pointer; z-index: 1;
      -webkit-appearance: none; appearance: none;
    }
    /* Fade other rows while dragging */
    .settings-card.bubble-focus > .settings-row:not(.bubble-row),
    .settings-card.bubble-focus > .theme-block {
      opacity: 0.06; pointer-events: none;
    }

    /* Theme swatches */
    .theme-block { padding: 13px 15px 16px; transition: opacity 0.22s ease; }
    .theme-block-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
    .theme-grid { display: flex; gap: 12px; flex-wrap: wrap; padding: 4px 0; }
    .theme-swatch-wrap { display: flex; flex-direction: column; align-items: center; gap: 5px; }
    .theme-swatch {
      width: 46px; height: 46px; border-radius: 13px; cursor: pointer;
      border: 2.5px solid transparent; position: relative;
      transition: transform .22s var(--ease-bounce), box-shadow .22s, border-color .15s;
      box-shadow: 0 3px 10px rgba(0,0,0,0.28); flex-shrink: 0;
    }
    .theme-swatch:hover { transform: scale(1.12) translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,0.32); }
    .theme-swatch.active {
      border-color: rgba(255,255,255,0.88); transform: scale(1.1) translateY(-2px);
      box-shadow: 0 6px 20px rgba(0,0,0,0.38), 0 0 0 3px rgba(255,255,255,0.2);
    }
    .theme-swatch::after {
      content: '✓'; position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 18px; font-weight: 900; color: rgba(255,255,255,0.95);
      opacity: 0; transition: opacity .15s; text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    }
    .theme-swatch.active::after { opacity: 1; }
    .theme-swatch[data-tv="default"]   { background: linear-gradient(135deg,#f7d040,#e8a010); }
    .theme-swatch[data-tv="cheesy2"]   { background: linear-gradient(135deg,#ffe234,#ff9f00,#e85500); box-shadow:0 0 14px rgba(255,159,0,0.65) !important; }
    .theme-swatch[data-tv="blue"]      { background: linear-gradient(135deg,#60a5fa,#1d4ed8); }
    .theme-swatch[data-tv="teal"]      { background: linear-gradient(135deg,#2dd4bf,#0e7490); }
    .theme-swatch[data-tv="green"]     { background: linear-gradient(135deg,#4ade80,#15803d); }
    .theme-swatch[data-tv="purple"]    { background: linear-gradient(135deg,#818cf8,#a855f7); }
    .theme-swatch[data-tv="rose"]      { background: linear-gradient(135deg,#fb7185,#e11d48); }
    .theme-swatch[data-tv="orange"]    { background: linear-gradient(135deg,#fb923c,#c2410c); }
    .theme-swatch[data-tv="crimson"]   { background: linear-gradient(135deg,#f87171,#991b1b); }
    .theme-swatch[data-tv="indigo"]    { background: linear-gradient(135deg,#a5b4fc,#4338ca); }
    .theme-swatch[data-tv="cyan"]      { background: linear-gradient(135deg,#67e8f9,#0891b2); }
    .theme-swatch[data-tv="lime"]      { background: linear-gradient(135deg,#bef264,#4d7c0f); }
    .theme-swatch[data-tv="pink"]      { background: linear-gradient(135deg,#f9a8d4,#be185d); }
    .theme-swatch[data-tv="midnight"]  { background: linear-gradient(135deg,#38bdf8,#0f172a); }
    .theme-swatch[data-tv="amoled"]    { background: linear-gradient(135deg,#f59e0b 0%,#000 55%); }
    .theme-swatch[data-tv="forest"]    { background: linear-gradient(135deg,#34d399,#052e16); }
    .theme-swatch[data-tv="glass"]     { background: linear-gradient(135deg,rgba(167,139,250,0.75),rgba(79,70,229,0.5)); border:1px solid rgba(255,255,255,0.3) !important; backdrop-filter:blur(4px); }
    .theme-swatch[data-tv="neon"]      { background: linear-gradient(135deg,#00ff88,#003322); box-shadow:0 0 12px rgba(0,255,136,0.7) !important; }
    .theme-swatch[data-tv="retro"]     { background: linear-gradient(135deg,#00ff41,#001a00); border-radius:6px !important; }
    .theme-swatch[data-tv="bubble"]    { background: linear-gradient(135deg,#fb7185,#f472b6); border-radius:50% !important; }
    .theme-swatch[data-tv="aurora"]    { background: linear-gradient(135deg,#6d28d9,#0891b2,#065f46); animation:auroraShift 3s ease infinite; background-size:200% 200%; }
    .theme-swatch[data-tv="pulse"]     { background: linear-gradient(135deg,#f7d040,#e8a010); animation:swatchPulse 1.6s ease-in-out infinite; }
    .theme-swatch[data-tv="synthwave"] { background: linear-gradient(135deg,#ff6ec7,#c77dff,#00d4ff); }
    .theme-swatch[data-tv="sunset"]    { background: linear-gradient(135deg,#fb923c,#ec4899,#8b5cf6); }
    .theme-swatch[data-tv="minimal"]   { background: linear-gradient(135deg,#6b7280,#374151); }
    .theme-swatch[data-tv="candy"]     { background: linear-gradient(135deg,#f472b6,#a78bfa,#60a5fa); }

    .theme-cat-label {
      width: 100%; font-size: 9.5px; font-weight: 800; letter-spacing: 0.10em;
      text-transform: uppercase; color: var(--text-dim); padding: 8px 2px 4px;
      border-top: 1px solid var(--border); margin-top: 4px;
    }
    .theme-cat-label:first-child { border-top: none; margin-top: 0; padding-top: 2px; }
    .theme-swatch-label { font-size: 10px; font-weight: 700; color: var(--text-dim); letter-spacing: 0.02em; }

    /* Profile stats grid inside Settings */
    .sp-stat-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 7px;
      padding: 14px 15px; border-bottom: 1px solid var(--border);
    }
    .sp-stat {
      background: rgba(0,0,0,0.18); border: 1px solid var(--border);
      border-radius: 10px; padding: 9px 12px; transition: border-color .2s;
    }
    .sp-stat:hover { border-color: var(--border-mid); }
    .sp-stat-label { font-size: 11px; color: var(--text-muted); font-weight: 600; display: block; margin-bottom: 3px; }
    .sp-stat-val { font-size: 16px; font-weight: 800; color: var(--text); display: block; }
    .sp-stat-val.warn   { color: #f5cd49; }
    .sp-stat-val.danger { color: #ff8080; }
    .sp-bio-block { padding: 14px 15px; }
    .sp-bio-label { font-size: 12px; font-weight: 700; color: var(--text-muted); display: block; margin-bottom: 7px; }
    #spDescInput {
      width: 100%; box-sizing: border-box; min-height: 72px; resize: vertical;
      font-size: 13px; padding: 10px 12px; border-radius: 9px;
      border: 1px solid var(--border); background: rgba(0,0,0,0.28);
      color: var(--text); font-family: inherit; line-height: 1.45;
    }
    #spDescInput:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
    .sp-bio-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; }
    #spDescCount { font-size: 11px; color: var(--text-dim); font-weight: 600; }

    /* ── Sound Pack Grid ──────────────────────────────────────────────── */
    .sound-pack-grid {
      display: flex; flex-wrap: wrap; gap: 7px;
      padding: 12px 14px 14px;
      border-top: 1px solid var(--border);
    }
    .spack-btn {
      display: flex; align-items: center; gap: 6px;
      padding: 7px 12px; border-radius: 9px;
      background: var(--surface-3); border: 1.5px solid var(--border);
      color: var(--text-dim); font-size: 12px; font-weight: 700;
      cursor: pointer; transition: all .15s; white-space: nowrap;
    }
    .spack-btn:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-mid); }
    .spack-btn.active {
      background: var(--accent-soft); color: var(--accent);
      border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
    }

    /* ── Blocked Users ──────────────────────────────────────────────── */
    .blocked-list { padding: 6px 0; }
    .blocked-empty {
      padding: 20px 16px; text-align: center;
      font-size: 13px; color: var(--text-dim); font-style: italic;
    }
    .blocked-item {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 15px; border-top: 1px solid var(--border); gap: 10px;
    }
    .blocked-item:first-child { border-top: none; }
    .blocked-item-name {
      font-size: 13px; font-weight: 700;
      color: var(--text); flex: 1; min-width: 0;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .blocked-unblock-btn {
      padding: 5px 12px; border-radius: 7px; font-size: 12px; font-weight: 700;
      background: var(--surface-3); border: 1px solid var(--border);
      color: var(--text-muted); cursor: pointer; flex-shrink: 0;
      transition: all .14s;
    }
    .blocked-unblock-btn:hover { background: rgba(80,200,100,0.12); color: #5bc87a; border-color: rgba(80,200,100,0.35); }

    /* ── Danger Zone ────────────────────────────────────────────────── */
    .danger-zone {
      margin: 0; padding: 14px 15px 16px;
      border-top: 1px solid rgba(255,60,60,0.18);
      background: rgba(255,40,40,0.04);
    }
    .danger-zone-head {
      display: flex; align-items: center; gap: 7px;
      font-size: 11px; font-weight: 800; letter-spacing: 0.08em;
      text-transform: uppercase; color: rgba(255,100,100,0.7);
      margin-bottom: 8px;
    }
    .danger-zone-sub {
      font-size: 11px; color: var(--text-dim); margin-bottom: 12px; line-height: 1.5;
    }
    .danger-zone-btn {
      padding: 8px 16px; border-radius: 9px; font-size: 13px; font-weight: 700;
      background: rgba(255,40,40,0.1); border: 1.5px solid rgba(255,80,80,0.3);
      color: #ff8080; cursor: pointer; transition: all .15s;
    }
    .danger-zone-btn:hover { background: rgba(255,40,40,0.2); border-color: rgba(255,80,80,0.6); color: #ff6060; }

    /* ── THEME OVERRIDES ──────────────────────────────────────────── */

    /* Blue */
    html[data-theme="blue"] {
      --accent:#3b82f6; --accent-dim:#1d4ed8;
      --accent-soft:rgba(59,130,246,0.14); --accent-glow:rgba(59,130,246,0.5);
      --accent-glow-lg:rgba(59,130,246,0.22); --border-accent:rgba(59,130,246,0.35);
    }
    html[data-theme="blue"] .primary { background:linear-gradient(148deg,#60a5fa,#2563eb,#1d4ed8) !important; color:#fff !important; }
    html[data-theme="blue"] .primary:hover { background:linear-gradient(148deg,#93c5fd,#3b82f6,#2563eb) !important; box-shadow:0 7px 26px rgba(59,130,246,0.44),0 1px 0 rgba(255,255,255,0.3) inset !important; }
    html[data-theme="blue"] .msg.me { background:linear-gradient(148deg,#2563eb,#1e3faa) !important; color:#fff !important; border-color:rgba(59,130,246,0.5) !important; box-shadow:0 3px 16px rgba(37,99,235,0.35) !important; }
    html[data-theme="blue"] .msg.me .name { color:rgba(255,255,255,0.82) !important; }
    html[data-theme="blue"] .msg.me .replyQuote { background:rgba(0,0,0,0.22) !important; color:rgba(200,220,255,0.8) !important; }
    html[data-theme="blue"] .msg.me .replyQuote .replyQuoteName { color:#93c5fd !important; }
    html[data-theme="blue"] .tabbtn.active { background:linear-gradient(135deg,#60a5fa,#2563eb) !important; color:#fff !important; }
    html[data-theme="blue"] #startView h2 { background:linear-gradient(135deg,#93c5fd,#3b82f6) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; }
    html[data-theme="blue"] #adminPanel { background:linear-gradient(162deg,rgba(59,130,246,0.08),rgba(59,130,246,0.025)) !important; border-color:rgba(59,130,246,0.2) !important; }
    html[data-theme="blue"] .modWarn { background:linear-gradient(160deg,rgba(59,130,246,0.11),rgba(59,130,246,0.05)) !important; border-color:rgba(59,130,246,0.28) !important; color:#cce0ff !important; }
    html[data-theme="blue"] .replyBar { background:linear-gradient(90deg,rgba(59,130,246,0.1),rgba(59,130,246,0.02)) !important; }
    html[data-theme="blue"] .replyQuote { border-left-color:var(--accent) !important; }

    /* Teal */
    html[data-theme="teal"] {
      --accent:#2dd4bf; --accent-dim:#0e7490;
      --accent-soft:rgba(45,212,191,0.14); --accent-glow:rgba(45,212,191,0.5);
      --accent-glow-lg:rgba(45,212,191,0.22); --border-accent:rgba(45,212,191,0.35);
    }
    html[data-theme="teal"] .primary { background:linear-gradient(148deg,#5eead4,#14b8a6,#0e7490) !important; color:#001a18 !important; }
    html[data-theme="teal"] .primary:hover { background:linear-gradient(148deg,#99f6e4,#2dd4bf,#14b8a6) !important; box-shadow:0 7px 26px rgba(45,212,191,0.44),0 1px 0 rgba(255,255,255,0.3) inset !important; }
    html[data-theme="teal"] .msg.me { background:linear-gradient(148deg,#0d9488,#0a6070) !important; color:#e0fafa !important; border-color:rgba(13,148,136,0.5) !important; box-shadow:0 3px 16px rgba(13,148,136,0.35) !important; }
    html[data-theme="teal"] .msg.me .name { color:rgba(224,250,250,0.82) !important; }
    html[data-theme="teal"] .tabbtn.active { background:linear-gradient(135deg,#5eead4,#0e7490) !important; color:#001a18 !important; }
    html[data-theme="teal"] #startView h2 { background:linear-gradient(135deg,#99f6e4,#2dd4bf) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; }
    html[data-theme="teal"] #adminPanel { background:linear-gradient(162deg,rgba(45,212,191,0.08),rgba(45,212,191,0.025)) !important; border-color:rgba(45,212,191,0.2) !important; }

    /* Green */
    html[data-theme="green"] {
      --accent:#4ade80; --accent-dim:#15803d;
      --accent-soft:rgba(74,222,128,0.14); --accent-glow:rgba(74,222,128,0.5);
      --accent-glow-lg:rgba(74,222,128,0.22); --border-accent:rgba(74,222,128,0.35);
    }
    html[data-theme="green"] .primary { background:linear-gradient(148deg,#86efac,#22c55e,#15803d) !important; color:#001a08 !important; }
    html[data-theme="green"] .primary:hover { background:linear-gradient(148deg,#bbf7d0,#4ade80,#22c55e) !important; box-shadow:0 7px 26px rgba(74,222,128,0.44),0 1px 0 rgba(255,255,255,0.3) inset !important; }
    html[data-theme="green"] .msg.me { background:linear-gradient(148deg,#16a34a,#14532d) !important; color:#f0fdf4 !important; border-color:rgba(22,163,74,0.5) !important; box-shadow:0 3px 16px rgba(22,163,74,0.35) !important; }
    html[data-theme="green"] .msg.me .name { color:rgba(240,253,244,0.82) !important; }
    html[data-theme="green"] .tabbtn.active { background:linear-gradient(135deg,#86efac,#15803d) !important; color:#001a08 !important; }
    html[data-theme="green"] #startView h2 { background:linear-gradient(135deg,#bbf7d0,#4ade80) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; }
    html[data-theme="green"] #adminPanel { background:linear-gradient(162deg,rgba(74,222,128,0.08),rgba(74,222,128,0.025)) !important; border-color:rgba(74,222,128,0.2) !important; }

    /* Purple */
    html[data-theme="purple"] {
      --accent:#a78bfa; --accent-dim:#7c3aed;
      --accent-soft:rgba(167,139,250,0.14); --accent-glow:rgba(167,139,250,0.5);
      --accent-glow-lg:rgba(167,139,250,0.22); --border-accent:rgba(167,139,250,0.35);
    }
    html[data-theme="purple"] .primary { background:linear-gradient(148deg,#c4b5fd,#8b5cf6,#6d28d9) !important; color:#fff !important; }
    html[data-theme="purple"] .primary:hover { background:linear-gradient(148deg,#ddd6fe,#a78bfa,#7c3aed) !important; box-shadow:0 7px 26px rgba(167,139,250,0.44),0 1px 0 rgba(255,255,255,0.3) inset !important; }
    html[data-theme="purple"] .msg.me { background:linear-gradient(148deg,#5b4fcf,#5b21b6) !important; color:#fff !important; border-color:rgba(109,99,238,0.5) !important; box-shadow:0 3px 16px rgba(91,79,207,0.38) !important; }
    html[data-theme="purple"] .msg.me .name { color:rgba(255,255,255,0.82) !important; }
    html[data-theme="purple"] .msg.me .replyQuote { background:rgba(0,0,0,0.22) !important; color:rgba(210,200,255,0.8) !important; }
    html[data-theme="purple"] .tabbtn.active { background:linear-gradient(135deg,#a78bfa,#6d28d9) !important; color:#fff !important; }
    html[data-theme="purple"] #startView h2 { background:linear-gradient(135deg,#ddd6fe,#a78bfa) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; }
    html[data-theme="purple"] #adminPanel { background:linear-gradient(162deg,rgba(139,92,246,0.08),rgba(139,92,246,0.025)) !important; border-color:rgba(139,92,246,0.2) !important; }
    html[data-theme="purple"] .modWarn { background:linear-gradient(160deg,rgba(139,92,246,0.11),rgba(139,92,246,0.05)) !important; border-color:rgba(139,92,246,0.28) !important; color:#ddd0ff !important; }

    /* ── NEW THEMES ──────────────────────────────────────────────── */

    /* ── CHEESY 2.0 — PREMIUM EDITION ──────────── */

    @keyframes cheeseGlow {
      0%,100% { box-shadow:0 4px 20px rgba(255,140,0,0.38),0 0 0 1px rgba(255,159,0,0.2); }
      50%      { box-shadow:0 7px 36px rgba(255,170,0,0.65),0 0 0 1px rgba(255,210,0,0.42); }
    }
    @keyframes cheeseShimmer {
      0%,100% { background-position:0% 50%; }
      50%      { background-position:100% 50%; }
    }

    html[data-theme="cheesy2"] {
      --accent:#ff9f00; --accent-dim:#d97706;
      --accent-soft:rgba(255,159,0,0.16); --accent-glow:rgba(255,159,0,0.72);
      --accent-glow-lg:rgba(255,159,0,0.32); --border-accent:rgba(255,159,0,0.44);
      --bg1:#130d00; --bg2:#0e0900; --bg3:#090500;
      --border:rgba(255,159,0,0.1); --border-mid:rgba(255,159,0,0.15);
      --border-strong:rgba(255,159,0,0.25);
    }
    html[data-theme="cheesy2"], html[data-theme="cheesy2"] body {
      background:
        radial-gradient(ellipse 130% 55% at 50% -8%,rgba(255,140,0,0.24) 0%,transparent 55%),
        radial-gradient(ellipse 55% 35% at 85% 110%,rgba(180,70,0,0.14) 0%,transparent 50%),
        linear-gradient(180deg,#130d00 0%,#0e0900 50%,#090500 100%) !important;
      background-attachment:fixed !important;
    }
    html[data-theme="cheesy2"] #app {
      background:linear-gradient(160deg,rgba(20,13,0,0.97),rgba(14,9,0,0.96)) !important;
      border-color:rgba(255,159,0,0.18) !important;
      border-top-color:rgba(255,215,0,0.44) !important;
      box-shadow:
        0 0 0 1px rgba(255,159,0,0.08) inset,
        0 0 90px rgba(200,100,0,0.09),
        0 20px 60px rgba(0,0,0,0.65) !important;
    }
    html[data-theme="cheesy2"] .primary {
      background:linear-gradient(148deg,#ffe234,#ff9f00,#d97706) !important;
      color:#1a0800 !important;
      font-weight:800 !important;
      box-shadow:0 4px 18px rgba(255,159,0,0.42),0 1px 0 rgba(255,255,255,0.28) inset !important;
    }
    html[data-theme="cheesy2"] .primary:hover {
      background:linear-gradient(148deg,#fff9a0,#ffe234,#ff9f00) !important;
      box-shadow:0 7px 30px rgba(255,159,0,0.65),0 1px 0 rgba(255,255,255,0.35) inset !important;
    }
    html[data-theme="cheesy2"] .msg.me {
      background:linear-gradient(148deg,#d97706,#b45309,#92400e) !important;
      color:#fffbeb !important;
      border-color:rgba(255,159,0,0.4) !important;
      animation:cheeseGlow 2.6s ease-in-out infinite !important;
    }
    html[data-theme="cheesy2"] .msg.me .name { color:rgba(255,240,170,0.9) !important; }
    html[data-theme="cheesy2"] .msg.me .replyQuote { background:rgba(0,0,0,0.26) !important; color:rgba(255,238,170,0.75) !important; }
    html[data-theme="cheesy2"] .msg.me .replyQuoteName { color:#fde68a !important; }
    html[data-theme="cheesy2"] .tabbtn.active {
      background:linear-gradient(135deg,#ffe234,#d97706) !important;
      color:#1a0800 !important;
    }
    html[data-theme="cheesy2"] #startView h2 {
      background:linear-gradient(135deg,#fff9c4,#ffe234,#ff9f00,#e85500) !important;
      background-size:200% 200% !important;
      animation:cheeseShimmer 5s ease-in-out infinite !important;
      -webkit-background-clip:text !important;
      background-clip:text !important;
      -webkit-text-fill-color:transparent !important;
    }
    html[data-theme="cheesy2"] #adminPanel {
      background:linear-gradient(162deg,rgba(255,159,0,0.1),rgba(255,159,0,0.03)) !important;
      border-color:rgba(255,159,0,0.22) !important;
    }
    html[data-theme="cheesy2"] .modWarn {
      background:linear-gradient(160deg,rgba(255,159,0,0.12),rgba(255,159,0,0.05)) !important;
      border-color:rgba(255,159,0,0.3) !important;
      color:#fff3c4 !important;
    }
    html[data-theme="cheesy2"] .replyBar {
      background:linear-gradient(90deg,rgba(255,159,0,0.13),rgba(255,159,0,0.02)) !important;
    }
    html[data-theme="cheesy2"] .replyQuote { border-left-color:var(--accent) !important; }
    html[data-theme="cheesy2"] .replyBar .replyBarText b { color:#ffe234 !important; }
    html[data-theme="cheesy2"] .sendBar:focus-within {
      border-color:rgba(255,159,0,0.44) !important;
      box-shadow:0 0 0 3px rgba(255,159,0,0.14) !important;
    }
    html[data-theme="cheesy2"] input:focus,
    html[data-theme="cheesy2"] textarea:focus {
      border-color:rgba(255,159,0,0.4) !important;
      box-shadow:0 0 0 3px rgba(255,159,0,0.14) !important;
    }

    /* ── COLOUR THEMES ─────────────────────────── */

    /* Rose */
    html[data-theme="rose"] { --accent:#fb7185; --accent-dim:#e11d48; --accent-soft:rgba(251,113,133,0.14); --accent-glow:rgba(251,113,133,0.55); --accent-glow-lg:rgba(251,113,133,0.22); --border-accent:rgba(251,113,133,0.35); }
    html[data-theme="rose"] .primary { background:linear-gradient(148deg,#fb7185,#f43f5e,#be123c) !important; color:#fff !important; }
    html[data-theme="rose"] .primary:hover { background:linear-gradient(148deg,#fda4af,#fb7185,#f43f5e) !important; box-shadow:0 7px 26px rgba(244,63,94,0.44),0 1px 0 rgba(255,255,255,0.3) inset !important; }
    html[data-theme="rose"] .msg.me { background:linear-gradient(148deg,#f43f5e,#9f1239) !important; color:#fff !important; border-color:rgba(244,63,94,0.5) !important; box-shadow:0 3px 16px rgba(244,63,94,0.35) !important; }
    html[data-theme="rose"] .msg.me .name { color:rgba(255,255,255,0.82) !important; }
    html[data-theme="rose"] .tabbtn.active { background:linear-gradient(135deg,#fb7185,#be123c) !important; color:#fff !important; }
    html[data-theme="rose"] #startView h2 { background:linear-gradient(135deg,#fda4af,#f43f5e) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; }
    html[data-theme="rose"] #adminPanel { background:linear-gradient(162deg,rgba(244,63,94,0.08),rgba(244,63,94,0.025)) !important; border-color:rgba(244,63,94,0.2) !important; }

    /* Orange */
    html[data-theme="orange"] { --accent:#fb923c; --accent-dim:#c2410c; --accent-soft:rgba(251,146,60,0.14); --accent-glow:rgba(251,146,60,0.55); --accent-glow-lg:rgba(251,146,60,0.22); --border-accent:rgba(251,146,60,0.35); }
    html[data-theme="orange"] .primary { background:linear-gradient(148deg,#fdba74,#f97316,#c2410c) !important; color:#1a0800 !important; }
    html[data-theme="orange"] .primary:hover { background:linear-gradient(148deg,#fed7aa,#fb923c,#f97316) !important; box-shadow:0 7px 26px rgba(249,115,22,0.44),0 1px 0 rgba(255,255,255,0.3) inset !important; }
    html[data-theme="orange"] .msg.me { background:linear-gradient(148deg,#ea580c,#7c2d12) !important; color:#fff7ed !important; border-color:rgba(234,88,12,0.5) !important; box-shadow:0 3px 16px rgba(234,88,12,0.35) !important; }
    html[data-theme="orange"] .msg.me .name { color:rgba(255,237,213,0.85) !important; }
    html[data-theme="orange"] .tabbtn.active { background:linear-gradient(135deg,#fdba74,#c2410c) !important; color:#1a0800 !important; }
    html[data-theme="orange"] #startView h2 { background:linear-gradient(135deg,#fed7aa,#f97316) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; }
    html[data-theme="orange"] #adminPanel { background:linear-gradient(162deg,rgba(249,115,22,0.08),rgba(249,115,22,0.025)) !important; border-color:rgba(249,115,22,0.2) !important; }

    /* Crimson */
    html[data-theme="crimson"] { --accent:#f87171; --accent-dim:#b91c1c; --accent-soft:rgba(248,113,113,0.14); --accent-glow:rgba(248,113,113,0.55); --accent-glow-lg:rgba(248,113,113,0.22); --border-accent:rgba(248,113,113,0.35); }
    html[data-theme="crimson"] .primary { background:linear-gradient(148deg,#f87171,#dc2626,#991b1b) !important; color:#fff !important; }
    html[data-theme="crimson"] .primary:hover { background:linear-gradient(148deg,#fca5a5,#f87171,#dc2626) !important; box-shadow:0 7px 26px rgba(220,38,38,0.44),0 1px 0 rgba(255,255,255,0.3) inset !important; }
    html[data-theme="crimson"] .msg.me { background:linear-gradient(148deg,#dc2626,#7f1d1d) !important; color:#fff !important; border-color:rgba(220,38,38,0.5) !important; box-shadow:0 3px 16px rgba(220,38,38,0.4) !important; }
    html[data-theme="crimson"] .msg.me .name { color:rgba(255,255,255,0.82) !important; }
    html[data-theme="crimson"] .tabbtn.active { background:linear-gradient(135deg,#f87171,#991b1b) !important; color:#fff !important; }
    html[data-theme="crimson"] #startView h2 { background:linear-gradient(135deg,#fca5a5,#ef4444) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; }
    html[data-theme="crimson"] #adminPanel { background:linear-gradient(162deg,rgba(220,38,38,0.08),rgba(220,38,38,0.025)) !important; border-color:rgba(220,38,38,0.2) !important; }

    /* Indigo */
    html[data-theme="indigo"] { --accent:#818cf8; --accent-dim:#4338ca; --accent-soft:rgba(129,140,248,0.14); --accent-glow:rgba(129,140,248,0.55); --accent-glow-lg:rgba(129,140,248,0.22); --border-accent:rgba(129,140,248,0.35); }
    html[data-theme="indigo"] .primary { background:linear-gradient(148deg,#a5b4fc,#6366f1,#4338ca) !important; color:#fff !important; }
    html[data-theme="indigo"] .primary:hover { background:linear-gradient(148deg,#c7d2fe,#818cf8,#6366f1) !important; box-shadow:0 7px 26px rgba(99,102,241,0.44),0 1px 0 rgba(255,255,255,0.3) inset !important; }
    html[data-theme="indigo"] .msg.me { background:linear-gradient(148deg,#4f46e5,#3730a3) !important; color:#fff !important; border-color:rgba(79,70,229,0.5) !important; box-shadow:0 3px 16px rgba(79,70,229,0.38) !important; }
    html[data-theme="indigo"] .msg.me .name { color:rgba(255,255,255,0.82) !important; }
    html[data-theme="indigo"] .tabbtn.active { background:linear-gradient(135deg,#818cf8,#4338ca) !important; color:#fff !important; }
    html[data-theme="indigo"] #startView h2 { background:linear-gradient(135deg,#c7d2fe,#818cf8) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; }
    html[data-theme="indigo"] #adminPanel { background:linear-gradient(162deg,rgba(99,102,241,0.08),rgba(99,102,241,0.025)) !important; border-color:rgba(99,102,241,0.2) !important; }

    /* Cyan */
    html[data-theme="cyan"] { --accent:#22d3ee; --accent-dim:#0891b2; --accent-soft:rgba(34,211,238,0.14); --accent-glow:rgba(34,211,238,0.55); --accent-glow-lg:rgba(34,211,238,0.22); --border-accent:rgba(34,211,238,0.35); }
    html[data-theme="cyan"] .primary { background:linear-gradient(148deg,#67e8f9,#06b6d4,#0e7490) !important; color:#001a1f !important; }
    html[data-theme="cyan"] .primary:hover { background:linear-gradient(148deg,#a5f3fc,#22d3ee,#06b6d4) !important; box-shadow:0 7px 26px rgba(6,182,212,0.44),0 1px 0 rgba(255,255,255,0.3) inset !important; }
    html[data-theme="cyan"] .msg.me { background:linear-gradient(148deg,#0891b2,#164e63) !important; color:#e0f7ff !important; border-color:rgba(8,145,178,0.5) !important; box-shadow:0 3px 16px rgba(8,145,178,0.38) !important; }
    html[data-theme="cyan"] .msg.me .name { color:rgba(224,247,255,0.85) !important; }
    html[data-theme="cyan"] .tabbtn.active { background:linear-gradient(135deg,#67e8f9,#0e7490) !important; color:#001a1f !important; }
    html[data-theme="cyan"] #startView h2 { background:linear-gradient(135deg,#a5f3fc,#22d3ee) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; }
    html[data-theme="cyan"] #adminPanel { background:linear-gradient(162deg,rgba(6,182,212,0.08),rgba(6,182,212,0.025)) !important; border-color:rgba(6,182,212,0.2) !important; }

    /* Lime */
    html[data-theme="lime"] { --accent:#a3e635; --accent-dim:#4d7c0f; --accent-soft:rgba(163,230,53,0.14); --accent-glow:rgba(163,230,53,0.55); --accent-glow-lg:rgba(163,230,53,0.22); --border-accent:rgba(163,230,53,0.35); }
    html[data-theme="lime"] .primary { background:linear-gradient(148deg,#bef264,#84cc16,#4d7c0f) !important; color:#0a1600 !important; }
    html[data-theme="lime"] .primary:hover { background:linear-gradient(148deg,#d9f99d,#a3e635,#84cc16) !important; box-shadow:0 7px 26px rgba(132,204,22,0.44),0 1px 0 rgba(255,255,255,0.3) inset !important; }
    html[data-theme="lime"] .msg.me { background:linear-gradient(148deg,#65a30d,#3f6212) !important; color:#f7ffe0 !important; border-color:rgba(101,163,13,0.5) !important; box-shadow:0 3px 16px rgba(101,163,13,0.35) !important; }
    html[data-theme="lime"] .msg.me .name { color:rgba(247,255,224,0.85) !important; }
    html[data-theme="lime"] .tabbtn.active { background:linear-gradient(135deg,#bef264,#4d7c0f) !important; color:#0a1600 !important; }
    html[data-theme="lime"] #startView h2 { background:linear-gradient(135deg,#d9f99d,#a3e635) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; }
    html[data-theme="lime"] #adminPanel { background:linear-gradient(162deg,rgba(132,204,22,0.08),rgba(132,204,22,0.025)) !important; border-color:rgba(132,204,22,0.2) !important; }

    /* Pink */
    html[data-theme="pink"] { --accent:#f472b6; --accent-dim:#be185d; --accent-soft:rgba(244,114,182,0.14); --accent-glow:rgba(244,114,182,0.55); --accent-glow-lg:rgba(244,114,182,0.22); --border-accent:rgba(244,114,182,0.35); }
    html[data-theme="pink"] .primary { background:linear-gradient(148deg,#f9a8d4,#ec4899,#be185d) !important; color:#1a0010 !important; }
    html[data-theme="pink"] .primary:hover { background:linear-gradient(148deg,#fbcfe8,#f472b6,#ec4899) !important; box-shadow:0 7px 26px rgba(236,72,153,0.44),0 1px 0 rgba(255,255,255,0.3) inset !important; }
    html[data-theme="pink"] .msg.me { background:linear-gradient(148deg,#db2777,#9d174d) !important; color:#fff !important; border-color:rgba(219,39,119,0.5) !important; box-shadow:0 3px 16px rgba(219,39,119,0.38) !important; }
    html[data-theme="pink"] .msg.me .name { color:rgba(255,255,255,0.82) !important; }
    html[data-theme="pink"] .tabbtn.active { background:linear-gradient(135deg,#f9a8d4,#be185d) !important; color:#fff !important; }
    html[data-theme="pink"] #startView h2 { background:linear-gradient(135deg,#fbcfe8,#f472b6) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; }
    html[data-theme="pink"] #adminPanel { background:linear-gradient(162deg,rgba(236,72,153,0.08),rgba(236,72,153,0.025)) !important; border-color:rgba(236,72,153,0.2) !important; }

    /* ── DARK BACKGROUND THEMES ─────────────────── */

    /* Midnight — deep navy background */
    html[data-theme="midnight"] { --accent:#38bdf8; --accent-dim:#0284c7; --accent-soft:rgba(56,189,248,0.14); --accent-glow:rgba(56,189,248,0.55); --accent-glow-lg:rgba(56,189,248,0.22); --border-accent:rgba(56,189,248,0.35); --bg1:#080e1f; --bg2:#050a18; --bg3:#020610; --border:rgba(56,189,248,0.08); --border-mid:rgba(56,189,248,0.12); }
    html[data-theme="midnight"], html[data-theme="midnight"] body { background:radial-gradient(ellipse 100% 50% at 50% -5%,rgba(56,189,248,0.12) 0%,transparent 60%),linear-gradient(180deg,#080e1f 0%,#05091a 50%,#020610 100%) !important; background-attachment:fixed !important; }
    html[data-theme="midnight"] #app { background:linear-gradient(160deg,rgba(8,14,31,0.97),rgba(5,9,24,0.96)) !important; border-color:rgba(56,189,248,0.12) !important; box-shadow:0 0 0 1px rgba(56,189,248,0.08) inset,0 20px 60px rgba(0,0,0,0.6) !important; }
    html[data-theme="midnight"] .primary { background:linear-gradient(148deg,#7dd3fc,#0ea5e9,#0284c7) !important; color:#001520 !important; }
    html[data-theme="midnight"] .primary:hover { background:linear-gradient(148deg,#bae6fd,#38bdf8,#0ea5e9) !important; box-shadow:0 7px 26px rgba(14,165,233,0.44),0 1px 0 rgba(255,255,255,0.3) inset !important; }
    html[data-theme="midnight"] .msg.me { background:linear-gradient(148deg,#0369a1,#0c4a6e) !important; color:#e0f7ff !important; border-color:rgba(3,105,161,0.5) !important; box-shadow:0 3px 20px rgba(3,105,161,0.5) !important; }
    html[data-theme="midnight"] .msg.me .name { color:rgba(186,230,253,0.9) !important; }
    html[data-theme="midnight"] .tabbtn.active { background:linear-gradient(135deg,#7dd3fc,#0284c7) !important; color:#001520 !important; }
    html[data-theme="midnight"] #startView h2 { background:linear-gradient(135deg,#bae6fd,#38bdf8) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; }
    html[data-theme="midnight"] #adminPanel { background:linear-gradient(162deg,rgba(56,189,248,0.07),rgba(56,189,248,0.02)) !important; border-color:rgba(56,189,248,0.15) !important; }

    /* AMOLED — true black */
    html[data-theme="amoled"] { --accent:#f59e0b; --accent-dim:#b45309; --accent-soft:rgba(245,158,11,0.14); --accent-glow:rgba(245,158,11,0.55); --accent-glow-lg:rgba(245,158,11,0.22); --border-accent:rgba(245,158,11,0.35); --bg1:#000; --bg2:#000; --bg3:#000; --surface:rgba(255,255,255,0.025); --surface-2:rgba(255,255,255,0.04); --surface-3:rgba(255,255,255,0.06); --border:rgba(255,255,255,0.06); --border-mid:rgba(255,255,255,0.09); }
    html[data-theme="amoled"], html[data-theme="amoled"] body { background:#000 !important; }
    html[data-theme="amoled"] #app { background:rgba(0,0,0,0.98) !important; border-color:rgba(255,255,255,0.06) !important; box-shadow:0 0 0 1px rgba(255,255,255,0.04) inset !important; }
    html[data-theme="amoled"] .msg { background:rgba(255,255,255,0.03) !important; border-color:rgba(255,255,255,0.06) !important; }
    html[data-theme="amoled"] .msg:hover { background:rgba(255,255,255,0.05) !important; }
    html[data-theme="amoled"] .primary { background:linear-gradient(148deg,#fcd34d,#f59e0b,#b45309) !important; color:#000 !important; }
    html[data-theme="amoled"] .primary:hover { background:linear-gradient(148deg,#fde68a,#fcd34d,#f59e0b) !important; box-shadow:0 7px 26px rgba(245,158,11,0.5),0 1px 0 rgba(255,255,255,0.3) inset !important; }
    html[data-theme="amoled"] .msg.me { background:linear-gradient(148deg,#92400e,#451a03) !important; color:#fef3c7 !important; border-color:rgba(146,64,14,0.4) !important; box-shadow:0 3px 16px rgba(146,64,14,0.35) !important; }
    html[data-theme="amoled"] .tabbtn.active { background:linear-gradient(135deg,#fcd34d,#b45309) !important; color:#000 !important; }
    html[data-theme="amoled"] #startView h2 { background:linear-gradient(135deg,#fde68a,#f59e0b) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; }
    html[data-theme="amoled"] #adminPanel { background:rgba(0,0,0,0.9) !important; border-color:rgba(245,158,11,0.15) !important; }

    /* Forest — dark forest green */
    html[data-theme="forest"] { --accent:#34d399; --accent-dim:#059669; --accent-soft:rgba(52,211,153,0.14); --accent-glow:rgba(52,211,153,0.55); --accent-glow-lg:rgba(52,211,153,0.22); --border-accent:rgba(52,211,153,0.35); --bg1:#071a0e; --bg2:#041208; --bg3:#020c04; --border:rgba(52,211,153,0.08); }
    html[data-theme="forest"], html[data-theme="forest"] body { background:radial-gradient(ellipse 100% 50% at 30% -5%,rgba(5,150,105,0.14) 0%,transparent 55%),linear-gradient(180deg,#071a0e 0%,#041208 50%,#020c04 100%) !important; background-attachment:fixed !important; }
    html[data-theme="forest"] #app { background:linear-gradient(160deg,rgba(7,26,14,0.97),rgba(4,18,8,0.96)) !important; border-color:rgba(52,211,153,0.1) !important; box-shadow:0 0 0 1px rgba(52,211,153,0.06) inset,0 20px 60px rgba(0,0,0,0.55) !important; }
    html[data-theme="forest"] .primary { background:linear-gradient(148deg,#6ee7b7,#10b981,#059669) !important; color:#002210 !important; }
    html[data-theme="forest"] .primary:hover { background:linear-gradient(148deg,#a7f3d0,#34d399,#10b981) !important; box-shadow:0 7px 26px rgba(16,185,129,0.44),0 1px 0 rgba(255,255,255,0.3) inset !important; }
    html[data-theme="forest"] .msg.me { background:linear-gradient(148deg,#047857,#064e3b) !important; color:#d1fae5 !important; border-color:rgba(4,120,87,0.5) !important; box-shadow:0 3px 18px rgba(4,120,87,0.45) !important; }
    html[data-theme="forest"] .msg.me .name { color:rgba(167,243,208,0.9) !important; }
    html[data-theme="forest"] .tabbtn.active { background:linear-gradient(135deg,#6ee7b7,#059669) !important; color:#002210 !important; }
    html[data-theme="forest"] #startView h2 { background:linear-gradient(135deg,#a7f3d0,#34d399) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; }
    html[data-theme="forest"] #adminPanel { background:linear-gradient(162deg,rgba(5,150,105,0.08),rgba(5,150,105,0.02)) !important; border-color:rgba(5,150,105,0.18) !important; }

    /* ── EFFECTS THEMES ─────────────────────────── */

    /* Glass — frosted glassmorphism */
    html[data-theme="glass"] { --accent:#c084fc; --accent-dim:#9333ea; --accent-soft:rgba(192,132,252,0.14); --accent-glow:rgba(192,132,252,0.55); --accent-glow-lg:rgba(192,132,252,0.22); --border-accent:rgba(192,132,252,0.35); }
    html[data-theme="glass"], html[data-theme="glass"] body { background:radial-gradient(ellipse 120% 70% at 20% 10%,rgba(109,40,217,0.3) 0%,transparent 50%),radial-gradient(ellipse 80% 60% at 80% 90%,rgba(8,145,178,0.25) 0%,transparent 50%),linear-gradient(135deg,#0f0c1e,#0a0c1a,#080f1a) !important; background-attachment:fixed !important; }
    html[data-theme="glass"] #app { background:rgba(15,12,30,0.4) !important; backdrop-filter:blur(28px) saturate(160%) !important; -webkit-backdrop-filter:blur(28px) saturate(160%) !important; border-color:rgba(255,255,255,0.12) !important; border-top-color:rgba(255,255,255,0.22) !important; box-shadow:0 20px 60px rgba(0,0,0,0.55),0 0 0 1px rgba(255,255,255,0.08) inset !important; }
    html[data-theme="glass"] #chatWindow { background:rgba(255,255,255,0.03) !important; border-color:rgba(255,255,255,0.07) !important; }
    html[data-theme="glass"] .msg { background:rgba(255,255,255,0.06) !important; backdrop-filter:blur(6px) !important; -webkit-backdrop-filter:blur(6px) !important; border-color:rgba(255,255,255,0.1) !important; box-shadow:0 2px 8px rgba(0,0,0,0.2) !important; }
    html[data-theme="glass"] .msg:hover { background:rgba(255,255,255,0.1) !important; }
    html[data-theme="glass"] .msg.me { background:rgba(147,51,234,0.35) !important; backdrop-filter:blur(8px) !important; -webkit-backdrop-filter:blur(8px) !important; border-color:rgba(192,132,252,0.4) !important; box-shadow:0 4px 20px rgba(147,51,234,0.3) !important; color:#f3e8ff !important; }
    html[data-theme="glass"] .msg.me .name { color:rgba(243,232,255,0.82) !important; }
    html[data-theme="glass"] .sendBar { background:rgba(255,255,255,0.05) !important; backdrop-filter:blur(12px) !important; -webkit-backdrop-filter:blur(12px) !important; border-color:rgba(255,255,255,0.1) !important; }
    html[data-theme="glass"] .primary { background:linear-gradient(148deg,#e879f9,#a855f7,#7c3aed) !important; color:#fff !important; }
    html[data-theme="glass"] .primary:hover { background:linear-gradient(148deg,#f0abfc,#c084fc,#a855f7) !important; box-shadow:0 7px 26px rgba(168,85,247,0.44),0 1px 0 rgba(255,255,255,0.3) inset !important; }
    html[data-theme="glass"] .tabbtn.active { background:rgba(147,51,234,0.4) !important; backdrop-filter:blur(6px) !important; color:#f3e8ff !important; }
    html[data-theme="glass"] #startView h2 { background:linear-gradient(135deg,#f0abfc,#c084fc) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; }
    html[data-theme="glass"] .sidebar { background:rgba(255,255,255,0.03) !important; backdrop-filter:blur(10px) !important; -webkit-backdrop-filter:blur(10px) !important; border-color:rgba(255,255,255,0.07) !important; }
    html[data-theme="glass"] #adminPanel { background:rgba(147,51,234,0.1) !important; backdrop-filter:blur(8px) !important; border-color:rgba(192,132,252,0.2) !important; }

    /* Neon — cyberpunk glow */
    html[data-theme="neon"] { --accent:#00ff88; --accent-dim:#00994d; --accent-soft:rgba(0,255,136,0.12); --accent-glow:rgba(0,255,136,0.7); --accent-glow-lg:rgba(0,255,136,0.3); --border-accent:rgba(0,255,136,0.4); --bg1:#070f0a; --bg2:#040a06; --bg3:#020602; --border:rgba(0,255,136,0.1); }
    html[data-theme="neon"], html[data-theme="neon"] body { background:linear-gradient(180deg,#070f0a,#040a06) !important; background-attachment:fixed !important; }
    html[data-theme="neon"] #app { background:rgba(7,15,10,0.95) !important; border-color:rgba(0,255,136,0.15) !important; box-shadow:0 0 0 1px rgba(0,255,136,0.08) inset,0 0 60px rgba(0,255,136,0.05),0 20px 50px rgba(0,0,0,0.6) !important; }
    html[data-theme="neon"] .primary { background:linear-gradient(148deg,#00ff88,#00cc6a) !important; color:#000 !important; font-weight:800 !important; box-shadow:0 0 20px rgba(0,255,136,0.5),0 4px 12px rgba(0,0,0,0.3) !important; }
    html[data-theme="neon"] .primary:hover { background:linear-gradient(148deg,#66ffb8,#00ff88) !important; box-shadow:0 0 30px rgba(0,255,136,0.7),0 6px 16px rgba(0,0,0,0.3) !important; }
    html[data-theme="neon"] .msg.me { background:linear-gradient(148deg,#00803f,#004d26) !important; color:#ccffe0 !important; border-color:rgba(0,255,136,0.4) !important; box-shadow:0 0 20px rgba(0,255,136,0.25),0 3px 12px rgba(0,0,0,0.3) !important; }
    html[data-theme="neon"] .msg.me .name { color:rgba(180,255,215,0.9) !important; }
    html[data-theme="neon"] .tabbtn.active { background:rgba(0,255,136,0.15) !important; color:#00ff88 !important; border:1px solid rgba(0,255,136,0.4) !important; box-shadow:0 0 12px rgba(0,255,136,0.25) !important; }
    html[data-theme="neon"] #startView h2 { background:linear-gradient(135deg,#66ffb8,#00ff88) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; text-shadow:none !important; filter:drop-shadow(0 0 12px rgba(0,255,136,0.6)); }
    html[data-theme="neon"] #adminPanel { background:rgba(0,255,136,0.05) !important; border-color:rgba(0,255,136,0.18) !important; }
    html[data-theme="neon"] .sendBar { border-color:rgba(0,255,136,0.15) !important; }
    html[data-theme="neon"] .sendBar:focus-within { border-color:rgba(0,255,136,0.4) !important; box-shadow:0 0 0 3px rgba(0,255,136,0.12),0 0 18px rgba(0,255,136,0.1) !important; }

    /* Retro — matrix/terminal green on black */
    html[data-theme="retro"] { --accent:#00ff41; --accent-dim:#009922; --accent-soft:rgba(0,255,65,0.12); --accent-glow:rgba(0,255,65,0.65); --accent-glow-lg:rgba(0,255,65,0.25); --border-accent:rgba(0,255,65,0.35); --bg1:#020602; --bg2:#010401; --bg3:#000; --border:rgba(0,255,65,0.12); --text:#b8ffb8; --text-muted:rgba(0,255,65,0.7); --text-dim:rgba(0,255,65,0.45); }
    html[data-theme="retro"], html[data-theme="retro"] body { background:#000 !important; background-attachment:fixed !important; }
    html[data-theme="retro"] #app { background:rgba(0,6,0,0.97) !important; border-color:rgba(0,255,65,0.18) !important; box-shadow:0 0 0 1px rgba(0,255,65,0.08) inset,0 0 40px rgba(0,255,65,0.04),0 20px 50px rgba(0,0,0,0.8) !important; }
    html[data-theme="retro"] .msg, html[data-theme="retro"] .system { font-family:'Courier New',Courier,monospace !important; border-radius:4px !important; }
    html[data-theme="retro"] .msg { background:rgba(0,255,65,0.03) !important; border-color:rgba(0,255,65,0.12) !important; color:#b8ffb8 !important; }
    html[data-theme="retro"] .msg:hover { background:rgba(0,255,65,0.06) !important; border-color:rgba(0,255,65,0.22) !important; }
    html[data-theme="retro"] .msg .name { color:#00ff41 !important; }
    html[data-theme="retro"] .msg.me { background:rgba(0,255,65,0.08) !important; border-color:rgba(0,255,65,0.3) !important; color:#ccffcc !important; box-shadow:0 0 12px rgba(0,255,65,0.12) !important; }
    html[data-theme="retro"] .msg.me .name { color:#00ff41 !important; }
    html[data-theme="retro"] .primary { background:transparent !important; border:1px solid #00ff41 !important; color:#00ff41 !important; font-family:'Courier New',monospace !important; font-weight:700 !important; box-shadow:0 0 12px rgba(0,255,65,0.3) !important; }
    html[data-theme="retro"] .primary:hover { background:rgba(0,255,65,0.12) !important; box-shadow:0 0 20px rgba(0,255,65,0.5) !important; color:#00ff41 !important; }
    html[data-theme="retro"] .tabbtn { font-family:'Courier New',monospace !important; }
    html[data-theme="retro"] .tabbtn.active { background:rgba(0,255,65,0.1) !important; color:#00ff41 !important; border:1px solid rgba(0,255,65,0.3) !important; border-radius:4px !important; }
    html[data-theme="retro"] #startView h2 { background:linear-gradient(135deg,#66ff80,#00ff41) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; }
    html[data-theme="retro"] #adminPanel { background:rgba(0,255,65,0.04) !important; border-color:rgba(0,255,65,0.15) !important; }
    html[data-theme="retro"] .sendBar { border-color:rgba(0,255,65,0.18) !important; }
    html[data-theme="retro"] #msgInput { color:#b8ffb8 !important; font-family:'Courier New',monospace !important; }

    /* Bubble — iOS-style round chat bubbles */
    html[data-theme="bubble"] { --accent:#f472b6; --accent-dim:#be185d; --accent-soft:rgba(244,114,182,0.14); --accent-glow:rgba(244,114,182,0.55); --accent-glow-lg:rgba(244,114,182,0.22); --border-accent:rgba(244,114,182,0.35); }
    html[data-theme="bubble"] .msg { border-radius:20px 20px 20px 6px !important; margin-bottom:5px !important; }
    html[data-theme="bubble"] .msg.me { border-radius:20px 20px 6px 20px !important; background:linear-gradient(148deg,#db2777,#9d174d) !important; color:#fff !important; border-color:rgba(219,39,119,0.4) !important; box-shadow:0 3px 14px rgba(219,39,119,0.3) !important; }
    html[data-theme="bubble"] .msg.me .name { color:rgba(255,255,255,0.8) !important; }
    html[data-theme="bubble"] .msg.system { border-radius:100px !important; padding:5px 16px !important; }
    html[data-theme="bubble"] .primary { background:linear-gradient(148deg,#f9a8d4,#ec4899,#be185d) !important; color:#fff !important; }
    html[data-theme="bubble"] .primary:hover { background:linear-gradient(148deg,#fbcfe8,#f472b6,#ec4899) !important; box-shadow:0 7px 26px rgba(236,72,153,0.44),0 1px 0 rgba(255,255,255,0.3) inset !important; }
    html[data-theme="bubble"] .tabbtn.active { background:linear-gradient(135deg,#f9a8d4,#be185d) !important; border-radius:100px !important; color:#fff !important; }
    html[data-theme="bubble"] .sendBar { border-radius:100px !important; }
    html[data-theme="bubble"] #startView h2 { background:linear-gradient(135deg,#fbcfe8,#f472b6) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; }
    html[data-theme="bubble"] #adminPanel { background:linear-gradient(162deg,rgba(236,72,153,0.08),rgba(236,72,153,0.025)) !important; border-color:rgba(236,72,153,0.2) !important; }

    /* ── ANIMATED THEMES ─────────────────────────── */

    @keyframes auroraShift {
      0%   { background-position: 0% 50%; }
      50%  { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    @keyframes swatchPulse {
      0%,100% { opacity:1; transform:scale(1); }
      50%      { opacity:0.7; transform:scale(0.93); }
    }
    @keyframes glowPulse {
      0%,100% { box-shadow:0 3px 16px var(--accent-glow-lg),0 0 0 1px var(--border-accent); }
      50%      { box-shadow:0 6px 28px var(--accent-glow),0 0 0 1px var(--border-accent); }
    }
    @keyframes synthScan {
      0%   { background-position: 0% 0%; }
      100% { background-position: 0% 100%; }
    }

    /* Aurora — shifting northern lights background */
    html[data-theme="aurora"] { --accent:#818cf8; --accent-dim:#4338ca; --accent-soft:rgba(129,140,248,0.14); --accent-glow:rgba(129,140,248,0.55); --accent-glow-lg:rgba(129,140,248,0.22); --border-accent:rgba(129,140,248,0.35); }
    html[data-theme="aurora"], html[data-theme="aurora"] body {
      background: linear-gradient(-45deg,#0a0a1e,#1a0a2e,#0a1e1a,#001e0a,#0a0a2e,#1e0a1e) !important;
      background-size: 400% 400% !important;
      animation: auroraShift 18s ease infinite !important;
      background-attachment: fixed !important;
    }
    html[data-theme="aurora"] #app { background:rgba(10,10,30,0.7) !important; backdrop-filter:blur(16px) !important; -webkit-backdrop-filter:blur(16px) !important; border-color:rgba(129,140,248,0.18) !important; box-shadow:0 0 0 1px rgba(255,255,255,0.06) inset,0 20px 60px rgba(0,0,0,0.5) !important; }
    html[data-theme="aurora"] .primary { background:linear-gradient(148deg,#a5b4fc,#6366f1,#4338ca) !important; color:#fff !important; }
    html[data-theme="aurora"] .primary:hover { background:linear-gradient(148deg,#c7d2fe,#818cf8,#6366f1) !important; box-shadow:0 7px 26px rgba(99,102,241,0.44),0 1px 0 rgba(255,255,255,0.3) inset !important; }
    html[data-theme="aurora"] .msg { background:rgba(255,255,255,0.05) !important; backdrop-filter:blur(4px) !important; border-color:rgba(255,255,255,0.09) !important; }
    html[data-theme="aurora"] .msg:hover { background:rgba(255,255,255,0.09) !important; }
    html[data-theme="aurora"] .msg.me { background:linear-gradient(148deg,rgba(79,70,229,0.7),rgba(55,48,163,0.7)) !important; backdrop-filter:blur(6px) !important; color:#e0e7ff !important; border-color:rgba(129,140,248,0.4) !important; box-shadow:0 4px 20px rgba(79,70,229,0.35) !important; }
    html[data-theme="aurora"] .msg.me .name { color:rgba(199,210,254,0.9) !important; }
    html[data-theme="aurora"] .tabbtn.active { background:rgba(79,70,229,0.35) !important; backdrop-filter:blur(4px) !important; color:#c7d2fe !important; }
    html[data-theme="aurora"] #startView h2 { background:linear-gradient(135deg,#c7d2fe,#818cf8,#34d399) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; }
    html[data-theme="aurora"] #adminPanel { background:rgba(79,70,229,0.08) !important; backdrop-filter:blur(6px) !important; border-color:rgba(129,140,248,0.18) !important; }

    /* Pulse — gently breathing accent glow */
    html[data-theme="pulse"] { --accent:#f1c232; --accent-dim:#c99e1a; --accent-soft:rgba(241,194,50,0.18); --accent-glow:rgba(241,194,50,0.65); --accent-glow-lg:rgba(241,194,50,0.3); --border-accent:rgba(241,194,50,0.4); }
    html[data-theme="pulse"] .primary { background:linear-gradient(148deg,#fde68a,#f1c232,#c99e1a) !important; color:#1a1000 !important; animation:glowPulse 2.4s ease-in-out infinite !important; }
    html[data-theme="pulse"] .msg.me { background:linear-gradient(148deg,#c99e1a,#8a6808) !important; color:#fffde0 !important; border-color:rgba(241,194,50,0.4) !important; animation:glowPulse 3s ease-in-out infinite !important; }
    html[data-theme="pulse"] .msg.me .name { color:rgba(255,253,200,0.88) !important; }
    html[data-theme="pulse"] .tabbtn.active { background:linear-gradient(135deg,#fde68a,#c99e1a) !important; color:#1a1000 !important; animation:glowPulse 2.8s ease-in-out infinite !important; }
    html[data-theme="pulse"] #startView h2 { background:linear-gradient(135deg,#fde68a,#f1c232) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; }
    html[data-theme="pulse"] #adminPanel { background:linear-gradient(162deg,rgba(241,194,50,0.08),rgba(241,194,50,0.025)) !important; border-color:rgba(241,194,50,0.2) !important; }

    /* Synthwave — 80s retro neon */
    html[data-theme="synthwave"] { --accent:#ff6ec7; --accent-dim:#c026d3; --accent-soft:rgba(255,110,199,0.14); --accent-glow:rgba(255,110,199,0.65); --accent-glow-lg:rgba(255,110,199,0.28); --border-accent:rgba(255,110,199,0.4); --bg1:#0d0019; --bg2:#08000f; --bg3:#050009; --border:rgba(255,110,199,0.1); }
    html[data-theme="synthwave"], html[data-theme="synthwave"] body {
      background: linear-gradient(180deg,#0d0019 0%,#130024 30%,#1a003d 60%,#0d0019 100%) !important;
      background-attachment: fixed !important;
    }
    html[data-theme="synthwave"] #app { background:linear-gradient(180deg,rgba(13,0,25,0.96),rgba(20,0,40,0.97)) !important; border-color:rgba(255,110,199,0.15) !important; border-top-color:rgba(255,110,199,0.3) !important; box-shadow:0 0 0 1px rgba(255,110,199,0.06) inset,0 0 50px rgba(200,0,255,0.06),0 20px 50px rgba(0,0,0,0.65) !important; }
    html[data-theme="synthwave"] .primary { background:linear-gradient(148deg,#ff6ec7,#c026d3,#7e22ce) !important; color:#fff !important; box-shadow:0 0 18px rgba(255,110,199,0.4),0 4px 12px rgba(0,0,0,0.4) !important; }
    html[data-theme="synthwave"] .primary:hover { background:linear-gradient(148deg,#f9a8d4,#ff6ec7,#c026d3) !important; box-shadow:0 0 28px rgba(255,110,199,0.6),0 6px 16px rgba(0,0,0,0.4) !important; }
    html[data-theme="synthwave"] .msg.me { background:linear-gradient(148deg,#9d174d,#581c87) !important; color:#fce7f3 !important; border-color:rgba(255,110,199,0.4) !important; box-shadow:0 0 20px rgba(255,110,199,0.2),0 3px 14px rgba(0,0,0,0.4) !important; }
    html[data-theme="synthwave"] .msg.me .name { color:rgba(252,231,243,0.85) !important; }
    html[data-theme="synthwave"] .tabbtn.active { background:linear-gradient(135deg,rgba(255,110,199,0.25),rgba(192,38,211,0.2)) !important; color:#ff6ec7 !important; border:1px solid rgba(255,110,199,0.35) !important; box-shadow:0 0 10px rgba(255,110,199,0.2) !important; }
    html[data-theme="synthwave"] #startView h2 { background:linear-gradient(135deg,#00d4ff,#ff6ec7,#c77dff) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; }
    html[data-theme="synthwave"] #adminPanel { background:rgba(255,110,199,0.05) !important; border-color:rgba(255,110,199,0.18) !important; }
    html[data-theme="synthwave"] .sendBar { border-color:rgba(255,110,199,0.14) !important; }
    html[data-theme="synthwave"] .sendBar:focus-within { border-color:rgba(255,110,199,0.38) !important; box-shadow:0 0 0 3px rgba(255,110,199,0.1),0 0 16px rgba(255,110,199,0.08) !important; }

    /* ── SPECIAL THEMES ─────────────────────────── */

    /* Sunset — warm orange-to-purple sky */
    html[data-theme="sunset"] { --accent:#fb923c; --accent-dim:#ea580c; --accent-soft:rgba(251,146,60,0.14); --accent-glow:rgba(251,146,60,0.55); --accent-glow-lg:rgba(251,146,60,0.22); --border-accent:rgba(251,146,60,0.35); --bg1:#180c04; --bg2:#120a10; --bg3:#0a0514; }
    html[data-theme="sunset"], html[data-theme="sunset"] body {
      background: linear-gradient(160deg,#180c04 0%,#2d0c20 35%,#1a0530 65%,#0a0514 100%) !important;
      background-attachment: fixed !important;
    }
    html[data-theme="sunset"] #app { background:linear-gradient(160deg,rgba(24,12,4,0.95),rgba(26,5,48,0.95)) !important; border-color:rgba(251,146,60,0.12) !important; border-top-color:rgba(251,146,60,0.25) !important; box-shadow:0 0 0 1px rgba(251,146,60,0.06) inset,0 0 60px rgba(200,50,0,0.06),0 20px 50px rgba(0,0,0,0.6) !important; }
    html[data-theme="sunset"] .primary { background:linear-gradient(148deg,#fdba74,#f97316,#c2410c) !important; color:#1a0800 !important; }
    html[data-theme="sunset"] .primary:hover { background:linear-gradient(148deg,#fed7aa,#fb923c,#f97316) !important; box-shadow:0 7px 26px rgba(249,115,22,0.5),0 1px 0 rgba(255,255,255,0.3) inset !important; }
    html[data-theme="sunset"] .msg.me { background:linear-gradient(148deg,#c2410c,#7c2d12) !important; color:#fff7ed !important; border-color:rgba(194,65,12,0.5) !important; box-shadow:0 3px 18px rgba(194,65,12,0.4) !important; }
    html[data-theme="sunset"] .msg.me .name { color:rgba(254,215,170,0.9) !important; }
    html[data-theme="sunset"] .tabbtn.active { background:linear-gradient(135deg,#fdba74,#c2410c) !important; color:#1a0800 !important; }
    html[data-theme="sunset"] #startView h2 { background:linear-gradient(135deg,#fed7aa,#fb923c,#ec4899) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; }
    html[data-theme="sunset"] #adminPanel { background:linear-gradient(162deg,rgba(249,115,22,0.08),rgba(139,92,246,0.03)) !important; border-color:rgba(249,115,22,0.18) !important; }

    /* Minimal — ultra-clean, muted everything */
    html[data-theme="minimal"] { --accent:#94a3b8; --accent-dim:#64748b; --accent-soft:rgba(148,163,184,0.1); --accent-glow:rgba(148,163,184,0.3); --accent-glow-lg:rgba(148,163,184,0.14); --border-accent:rgba(148,163,184,0.25); --bg1:#111827; --bg2:#0f172a; --bg3:#0a0f1c; --border:rgba(255,255,255,0.055); --border-mid:rgba(255,255,255,0.08); --surface:rgba(255,255,255,0.025); --surface-2:rgba(255,255,255,0.04); }
    html[data-theme="minimal"] #app { background:linear-gradient(160deg,rgba(17,24,39,0.98),rgba(15,23,42,0.98)) !important; border-color:rgba(255,255,255,0.06) !important; box-shadow:0 20px 50px rgba(0,0,0,0.45) !important; }
    html[data-theme="minimal"] .msg { background:rgba(255,255,255,0.025) !important; border-color:rgba(255,255,255,0.05) !important; border-radius:8px !important; box-shadow:none !important; }
    html[data-theme="minimal"] .msg:hover { background:rgba(255,255,255,0.045) !important; box-shadow:none !important; }
    html[data-theme="minimal"] .msg.me { background:rgba(148,163,184,0.1) !important; color:var(--text) !important; border-color:rgba(148,163,184,0.18) !important; box-shadow:none !important; }
    html[data-theme="minimal"] .primary { background:rgba(148,163,184,0.18) !important; color:var(--text) !important; border:1px solid rgba(148,163,184,0.25) !important; box-shadow:none !important; font-weight:600 !important; }
    html[data-theme="minimal"] .primary:hover { background:rgba(148,163,184,0.28) !important; box-shadow:none !important; }
    html[data-theme="minimal"] .tabbtn.active { background:rgba(148,163,184,0.12) !important; color:var(--text) !important; border:1px solid rgba(148,163,184,0.2) !important; }
    html[data-theme="minimal"] #startView h2 { color:var(--text) !important; background:none !important; -webkit-text-fill-color:var(--text) !important; font-weight:700 !important; }
    html[data-theme="minimal"] #adminPanel { background:rgba(255,255,255,0.02) !important; border-color:rgba(255,255,255,0.06) !important; }
    html[data-theme="minimal"] .sendBar { border-radius:8px !important; }

    /* Candy — bright pastel pop */
    html[data-theme="candy"] { --accent:#f472b6; --accent-dim:#db2777; --accent-soft:rgba(244,114,182,0.14); --accent-glow:rgba(244,114,182,0.55); --accent-glow-lg:rgba(244,114,182,0.22); --border-accent:rgba(244,114,182,0.35); --bg1:#1a0a1e; --bg2:#14071a; --bg3:#0e0514; }
    html[data-theme="candy"], html[data-theme="candy"] body { background:linear-gradient(135deg,#1a0a1e,#0f0a1e,#0a1018) !important; background-attachment:fixed !important; }
    html[data-theme="candy"] #app { background:linear-gradient(160deg,rgba(26,10,30,0.96),rgba(15,10,30,0.96)) !important; border-color:rgba(244,114,182,0.14) !important; border-top-color:rgba(244,114,182,0.28) !important; box-shadow:0 0 0 1px rgba(244,114,182,0.06) inset,0 20px 50px rgba(0,0,0,0.55) !important; }
    html[data-theme="candy"] .primary { background:linear-gradient(148deg,#f9a8d4,#f472b6,#a855f7) !important; color:#fff !important; box-shadow:0 4px 18px rgba(244,114,182,0.35) !important; }
    html[data-theme="candy"] .primary:hover { background:linear-gradient(148deg,#fbcfe8,#f9a8d4,#f472b6) !important; box-shadow:0 6px 24px rgba(244,114,182,0.5) !important; }
    html[data-theme="candy"] .msg.me { background:linear-gradient(148deg,#db2777,#7e22ce) !important; color:#fff !important; border-color:rgba(244,114,182,0.4) !important; box-shadow:0 4px 18px rgba(219,39,119,0.3) !important; }
    html[data-theme="candy"] .msg.me .name { color:rgba(255,255,255,0.85) !important; }
    html[data-theme="candy"] .tabbtn.active { background:linear-gradient(135deg,rgba(244,114,182,0.3),rgba(168,85,247,0.3)) !important; color:#f9a8d4 !important; border:1px solid rgba(244,114,182,0.35) !important; }
    html[data-theme="candy"] #startView h2 { background:linear-gradient(135deg,#f9a8d4,#f472b6,#a78bfa,#60a5fa) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; }
    html[data-theme="candy"] #adminPanel { background:linear-gradient(162deg,rgba(244,114,182,0.07),rgba(168,85,247,0.04)) !important; border-color:rgba(244,114,182,0.18) !important; }
    html[data-theme="candy"] .sendBar { border-color:rgba(244,114,182,0.14) !important; }
    html[data-theme="candy"] .sendBar:focus-within { border-color:rgba(244,114,182,0.35) !important; box-shadow:0 0 0 3px rgba(244,114,182,0.1) !important; }

    /* ── LIGHT MODE BASE ──────────────────────────────────────────── */
    html.light-mode {
      --bg1:#fffdf5; --bg2:#fefbec; --bg3:#fdf7dc;
      --surface:rgba(0,0,0,0.04); --surface-2:rgba(0,0,0,0.065);
      --surface-3:rgba(0,0,0,0.09); --surface-hover:rgba(0,0,0,0.065);
      --surface-active:rgba(0,0,0,0.095);
      --border:rgba(0,0,0,0.09); --border-mid:rgba(0,0,0,0.13);
      --border-strong:rgba(0,0,0,0.20); --border-accent:rgba(180,130,0,0.4);
      --text:#18140a; --text-muted:#5a5040; --text-dim:#9a8e78;
    }
    html.light-mode, html.light-mode body {
      background:radial-gradient(ellipse 120% 60% at 50% -5%,rgba(241,194,50,0.18) 0%,transparent 55%),linear-gradient(180deg,#fffef8 0%,#fefbee 50%,#fdf6d8 100%) !important;
      background-attachment:fixed !important;
    }
    html.light-mode #app { background:linear-gradient(160deg,rgba(255,255,255,0.93) 0%,rgba(255,252,235,0.89) 100%) !important; border-color:rgba(0,0,0,0.1) !important; border-top-color:rgba(255,255,255,0.99) !important; box-shadow:0 20px 60px rgba(160,120,0,0.1),0 4px 20px rgba(0,0,0,0.07),0 0 0 1px rgba(255,255,255,0.6) inset !important; }
    html.light-mode input, html.light-mode textarea, html.light-mode select { background:rgba(255,255,255,0.82) !important; border-color:rgba(0,0,0,0.11) !important; color:var(--text) !important; }
    html.light-mode input:focus, html.light-mode textarea:focus { background:#fff !important; border-color:var(--accent-dim) !important; box-shadow:0 0 0 3px var(--accent-soft),0 2px 6px rgba(0,0,0,0.06) inset !important; }
    html.light-mode #msgInput { background:transparent !important; color:var(--text) !important; }
    html.light-mode .sendBar { background:rgba(255,255,255,0.65) !important; border-color:rgba(0,0,0,0.09) !important; }
    html.light-mode .sendBar:focus-within { border-color:rgba(180,130,0,0.32) !important; box-shadow:0 0 0 3px rgba(241,194,50,0.1) !important; }
    html.light-mode #chatWindow { background:rgba(255,255,255,0.5) !important; border-color:rgba(0,0,0,0.07) !important; }
    html.light-mode .msg { background:rgba(255,255,255,0.9) !important; border-color:rgba(0,0,0,0.07) !important; color:var(--text) !important; box-shadow:0 1px 4px rgba(0,0,0,0.05) !important; }
    html.light-mode .msg:hover { box-shadow:0 3px 14px rgba(0,0,0,0.1) !important; }
    html.light-mode .msg.me { background:linear-gradient(148deg,#c88a08,#9e6a04) !important; color:#fff8e0 !important; border-color:rgba(200,150,10,0.5) !important; box-shadow:0 3px 16px rgba(160,110,0,0.3) !important; }
    html.light-mode .msg.me .name { color:rgba(255,240,180,0.85) !important; }
    html.light-mode .msg.me .replyQuote { background:rgba(0,0,0,0.28) !important; color:rgba(255,240,180,0.75) !important; }
    html.light-mode .system { background:rgba(0,0,0,0.035) !important; border-color:rgba(0,0,0,0.06) !important; color:var(--text-muted) !important; }
    html.light-mode .groupCard { background:rgba(255,255,255,0.72) !important; border-color:rgba(0,0,0,0.08) !important; }
    html.light-mode .groupCard:hover { background:rgba(255,255,255,0.95) !important; border-color:rgba(0,0,0,0.13) !important; box-shadow:0 6px 20px rgba(0,0,0,0.08) !important; }
    html.light-mode .groupCard::before { display:none !important; }
    html.light-mode .contactCard { background:rgba(255,255,255,0.72) !important; border-color:rgba(0,0,0,0.08) !important; }
    html.light-mode .contactCard:hover { background:rgba(255,255,255,0.95) !important; }
    html.light-mode .onlineUser { background:rgba(255,255,255,0.72) !important; border-color:rgba(0,0,0,0.09) !important; }
    html.light-mode .onlineUser:hover { background:rgba(255,255,255,0.95) !important; }
    html.light-mode .tabs { background:rgba(0,0,0,0.06) !important; border-color:rgba(0,0,0,0.09) !important; }
    html.light-mode .tabbtn { color:var(--text-muted) !important; }
    html.light-mode .tabbtn:hover { background:rgba(0,0,0,0.07) !important; color:var(--text) !important; }
    html.light-mode .ghost { background:rgba(0,0,0,0.05) !important; border-color:rgba(0,0,0,0.11) !important; color:var(--text) !important; }
    html.light-mode .ghost:hover { background:rgba(0,0,0,0.09) !important; }
    html.light-mode .delBtn { background:rgba(0,0,0,0.04) !important; border-color:rgba(0,0,0,0.1) !important; color:var(--text-muted) !important; }
    html.light-mode .delBtn:hover { background:rgba(0,0,0,0.08) !important; color:var(--text) !important; }
    html.light-mode .overlay-modal { background:rgba(80,60,0,0.3) !important; }
    html.light-mode .modal { background:linear-gradient(160deg,#fffef9,#fff9e8) !important; border-color:rgba(0,0,0,0.12) !important; box-shadow:0 24px 64px rgba(0,0,0,0.14),0 4px 16px rgba(0,0,0,0.07) !important; color:var(--text) !important; }
    html.light-mode #adminPanel { background:rgba(255,240,150,0.18) !important; border-color:rgba(180,140,0,0.25) !important; }
    html.light-mode .adminUserRow { background:rgba(0,0,0,0.04) !important; border-color:rgba(0,0,0,0.08) !important; }
    html.light-mode .banBtn { background:rgba(0,0,0,0.05) !important; border-color:rgba(0,0,0,0.1) !important; color:var(--text) !important; }
    html.light-mode .modWarn { background:rgba(241,194,50,0.12) !important; border-color:rgba(180,140,0,0.3) !important; color:#3a2800 !important; }
    html.light-mode .modWarn strong { color:#8a5c00 !important; }
    html.light-mode #profilePopup { background:linear-gradient(160deg,#fffef8,#fffaee) !important; border-color:rgba(0,0,0,0.13) !important; box-shadow:0 20px 60px rgba(0,0,0,0.14) !important; }
    html.light-mode .pp-stats { background:rgba(0,0,0,0.05) !important; border-color:rgba(0,0,0,0.09) !important; }
    html.light-mode #toast { background:linear-gradient(160deg,#fffef5,#fff8e0) !important; border-color:rgba(0,0,0,0.12) !important; color:#18140a !important; }
    html.light-mode #toast.warn { background:linear-gradient(160deg,#fff0f0,#ffe0e0) !important; color:#5a0a0a !important; border-color:rgba(255,100,100,0.35) !important; }
    html.light-mode #versionLabel { color:rgba(0,0,0,0.18) !important; }
    html.light-mode ::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.14) !important; }
    html.light-mode ::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,0.24) !important; }
    html.light-mode #settingsBtn { background:rgba(0,0,0,0.06) !important; border-color:rgba(0,0,0,0.12) !important; color:var(--text-muted) !important; }
    html.light-mode #settingsBtn:hover { background:var(--accent-soft) !important; color:var(--accent-dim) !important; border-color:rgba(180,130,0,0.35) !important; }
    html.light-mode .s2-nav { background:rgba(0,0,0,0.04) !important; border-right-color:rgba(0,0,0,0.08) !important; }
    html.light-mode .s2-nav-head { border-bottom-color:rgba(0,0,0,0.08) !important; }
    html.light-mode .s2-close { background:rgba(0,0,0,0.05) !important; border-color:rgba(0,0,0,0.10) !important; }
    html.light-mode .s2-nav-item.active { background:var(--accent-soft) !important; }
    html.light-mode .s2-nav-item:hover { background:rgba(0,0,0,0.06) !important; }
    html.light-mode .settings-card { background:rgba(0,0,0,0.03) !important; border-color:rgba(0,0,0,0.09) !important; }
    html.light-mode .settings-row:hover { background:rgba(0,0,0,0.04) !important; }
    html.light-mode .settings-row + .settings-row { border-top-color:rgba(0,0,0,0.07) !important; }
    html.light-mode .settings-row-icon { background:rgba(0,0,0,0.05) !important; border-color:rgba(0,0,0,0.08) !important; }
    html.light-mode .sp-stat { background:rgba(0,0,0,0.04) !important; border-color:rgba(0,0,0,0.08) !important; }
    html.light-mode .sp-stat-grid { border-bottom-color:rgba(0,0,0,0.07) !important; }
    html.light-mode #spDescInput { background:rgba(255,255,255,0.82) !important; border-color:rgba(0,0,0,0.11) !important; }
    html.light-mode .toggle-track { background:rgba(0,0,0,0.12) !important; border-color:rgba(0,0,0,0.16) !important; }
    html.light-mode .toggle-track::before { background:#999 !important; }
    html.light-mode .grokKeyRow input { background:rgba(255,255,255,0.7) !important; color:var(--text) !important; }
    html.light-mode .replyBar { background:linear-gradient(90deg,rgba(180,130,0,0.1),rgba(180,130,0,0.02)) !important; }
    html.light-mode .replyQuote { background:rgba(0,0,0,0.06) !important; }
    html.light-mode pre.codeBlock { background:rgba(0,0,0,0.06) !important; }
    html.light-mode .theme-swatch.active { border-color:rgba(0,0,0,0.72) !important; box-shadow:0 0 0 3px rgba(0,0,0,0.12),0 6px 18px rgba(0,0,0,0.18) !important; }
    html.light-mode .adminAccCard { background:rgba(0,0,0,0.04) !important; border-color:rgba(0,0,0,0.08) !important; }
    html.light-mode .adminAccCard:hover { background:rgba(0,0,0,0.07) !important; }
    html.light-mode #gifBtn { background:rgba(0,0,0,0.05) !important; border-color:rgba(0,0,0,0.1) !important; color:var(--text-muted) !important; }
    html.light-mode #imgUploadBtn { background:rgba(0,0,0,0.05) !important; border-color:rgba(0,0,0,0.1) !important; }
    html.light-mode .settings-header { border-bottom-color:rgba(0,0,0,0.08) !important; }
    html.light-mode .settings-sec-label { color:rgba(0,0,0,0.35) !important; }

    /* Light + Blue */
    html.light-mode[data-theme="blue"] #app { background:linear-gradient(160deg,rgba(255,255,255,0.93) 0%,rgba(224,238,255,0.89) 100%) !important; }
    html.light-mode[data-theme="blue"] .msg.me { background:linear-gradient(148deg,#60a5fa,#2563eb) !important; color:#fff !important; }
    html.light-mode[data-theme="blue"] .msg.me .name { color:rgba(255,255,255,0.85) !important; }
    html.light-mode[data-theme="blue"] .modWarn { background:rgba(59,130,246,0.1) !important; border-color:rgba(59,130,246,0.28) !important; color:#0f2b5a !important; }
    html.light-mode[data-theme="blue"] #adminPanel { background:rgba(200,225,255,0.22) !important; border-color:rgba(59,130,246,0.22) !important; }
    html.light-mode[data-theme="blue"] #toast { background:linear-gradient(160deg,#f0f7ff,#e4edff) !important; color:#0f2042 !important; }

    /* Light + Teal */
    html.light-mode[data-theme="teal"] #app { background:linear-gradient(160deg,rgba(255,255,255,0.93) 0%,rgba(210,250,247,0.89) 100%) !important; }
    html.light-mode[data-theme="teal"] .msg.me { background:linear-gradient(148deg,#2dd4bf,#0e7490) !important; color:#001a18 !important; }
    html.light-mode[data-theme="teal"] .msg.me .name { color:rgba(0,30,26,0.78) !important; }

    /* Light + Green */
    html.light-mode[data-theme="green"] #app { background:linear-gradient(160deg,rgba(255,255,255,0.93) 0%,rgba(210,253,226,0.89) 100%) !important; }
    html.light-mode[data-theme="green"] .msg.me { background:linear-gradient(148deg,#4ade80,#15803d) !important; color:#001a08 !important; }
    html.light-mode[data-theme="green"] .msg.me .name { color:rgba(0,30,10,0.78) !important; }

    /* Light + Purple */
    html.light-mode[data-theme="purple"] #app { background:linear-gradient(160deg,rgba(255,255,255,0.93) 0%,rgba(238,228,255,0.89) 100%) !important; }
    html.light-mode[data-theme="purple"] .msg.me { background:linear-gradient(148deg,#818cf8,#7c3aed) !important; color:#fff !important; }
    html.light-mode[data-theme="purple"] .msg.me .name { color:rgba(255,255,255,0.85) !important; }
    html.light-mode[data-theme="purple"] .modWarn { background:rgba(139,92,246,0.1) !important; border-color:rgba(139,92,246,0.25) !important; color:#2d1060 !important; }

    /* ══════════════════════════════════════════════════════════════════
       v4.1 LUXE GOLD LAYER — maximum polish
       Fonts, ambient backdrop, shimmer, emoji picker, search, confetti
       ══════════════════════════════════════════════════════════════════ */

    /* ── Typography upgrade ──────────────────────── */
    html,body{
      font-family:'Schibsted Grotesk','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    }
    h1,h2,h3,.groupTitle,.settings-header-title,.pp-display-name,.contactName,.adminAccName{
      font-family:'Bricolage Grotesque','Schibsted Grotesk',sans-serif;
    }
    ::selection{background:var(--accent);color:#1a1000}
    input,textarea{caret-color:var(--accent)}

    /* ── Ambient animated backdrop (orbs + grain) ── */
    body::before{
      content:'';position:fixed;inset:-22%;
      background:
        radial-gradient(circle 460px at 16% 20%,rgba(241,194,50,0.085) 0%,transparent 70%),
        radial-gradient(circle 560px at 86% 80%,rgba(232,140,24,0.055) 0%,transparent 70%),
        radial-gradient(circle 340px at 72% 8%,rgba(255,225,130,0.045) 0%,transparent 70%),
        radial-gradient(circle 280px at 8% 88%,rgba(120,100,255,0.028) 0%,transparent 70%);
      filter:blur(10px);
      animation:orbDrift 28s ease-in-out infinite alternate;
      pointer-events:none;z-index:0;
    }
    @keyframes orbDrift{
      0%{transform:translate(0,0) scale(1)}
      50%{transform:translate(2.4%,-1.8%) scale(1.06)}
      100%{transform:translate(-2%,2.4%) scale(1.015)}
    }
    body::after{
      content:'';position:fixed;inset:0;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      opacity:0.042;pointer-events:none;z-index:0;mix-blend-mode:overlay;
    }
    #app{z-index:1}

    /* ── Reactive glow bar along the top edge of the app shell ── */
    #glowBar{
      position:absolute;top:-1px;
      left:9%;right:9%;
      height:2px;border-radius:999px;
      background:linear-gradient(90deg,
        transparent 0%,
        var(--gb-color,var(--accent)) var(--gb-peak,50%),
        transparent 100%);
      background-size:220% 100%;
      opacity:0.5;
      filter:drop-shadow(0 0 7px var(--gb-shadow,var(--accent-glow)));
      pointer-events:none;z-index:5;
      animation:gbIdle 6s ease-in-out infinite;
    }
    #glowBar[data-mood="join"]  { animation:gbJoin   var(--gb-dur,2.4s) ease-in-out forwards }
    #glowBar[data-mood="login"] { animation:gbLogin  var(--gb-dur,2.9s) ease-out    forwards }
    #glowBar[data-mood="theme"] { animation:gbTheme  var(--gb-dur,1.9s) ease-in-out forwards }
    #glowBar[data-mood="pulse"] { animation:gbPulse  var(--gb-dur,0.5s) ease-out    forwards }
    #glowBar[data-mood="calm"]  { animation:gbCalm   0.8s ease-out forwards }
    #glowBar[data-mood="rainbow"]{
      background:linear-gradient(90deg,#4285f4,#ea4335,#fbbc05,#34a853,#a142f4,#4285f4);
      background-size:300% 100%;
      animation:gbRainbow 1.8s linear infinite;
      opacity:0.9;
      filter:drop-shadow(0 0 9px rgba(66,133,244,0.55));
    }
    @keyframes gbIdle{
      0%  {background-position:130% 0;opacity:.15}
      45% {opacity:.9}
      100%{background-position:-130% 0;opacity:.15}
    }
    @keyframes gbJoin{
      0%  {background-position:155% 0;opacity:0.25}
      20% {background-position:-5%  0;opacity:1}
      40% {background-position:135% 0;opacity:0.7}
      65% {background-position:-25% 0;opacity:0.85}
      100%{background-position:-130% 0;opacity:0.12}
    }
    @keyframes gbLogin{
      0%  {background-position:50% 0;background-size:50% 100%;opacity:0}
      18% {background-position:50% 0;background-size:320% 100%;opacity:1}
      55% {background-position:22% 0;background-size:260% 100%;opacity:0.82}
      100%{background-position:-130% 0;background-size:220% 100%;opacity:0.12}
    }
    @keyframes gbTheme{
      0%  {background-position:145% 0;opacity:0.35}
      10% {background-position:-55% 0;opacity:1}
      22% {background-position:160% 0;opacity:0.8}
      34% {background-position:-75% 0;opacity:1}
      46% {background-position:130% 0;opacity:0.6}
      60% {background-position:-45% 0;opacity:0.7}
      74% {background-position:110% 0;opacity:0.35}
      100%{background-position:-130% 0;opacity:0.12}
    }
    @keyframes gbRainbow{
      0%  {background-position:0%    0}
      100%{background-position:-200% 0}
    }
    @keyframes gbPulse{
      0%  {opacity:0.18}
      30% {opacity:1}
      100%{opacity:0.14}
    }
    @keyframes gbCalm{
      0%  {opacity:0.65}
      100%{opacity:0.14}
    }

    /* ── Start screen: cheese logo + shine title ── */
    #logoMark{
      width:76px;height:76px;margin:6px auto 16px;border-radius:24px;
      display:flex;align-items:center;justify-content:center;font-size:40px;
      background:linear-gradient(150deg,rgba(241,194,50,0.17),rgba(241,194,50,0.05));
      border:1px solid rgba(241,194,50,0.32);
      box-shadow:0 12px 36px rgba(241,194,50,0.18),0 1px 0 rgba(255,255,255,0.14) inset;
      cursor:pointer;user-select:none;
      transition:transform .3s var(--ease-bounce),box-shadow .3s var(--ease-smooth);
    }
    #logoMark span{display:block;animation:logoFloat 5s ease-in-out infinite}
    #logoMark:hover{transform:scale(1.09) rotate(-6deg);box-shadow:0 16px 48px rgba(241,194,50,0.32),0 1px 0 rgba(255,255,255,0.16) inset}
    #logoMark:active{transform:scale(0.9) rotate(4deg)}
    @keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
    #startView h2{
      font-size:40px;letter-spacing:-0.034em;
      background:linear-gradient(110deg,#fad84e 18%,#fff3b0 36%,#e8b820 54%,#d09810 82%);
      background-size:220% 100%;
      -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
      animation:titleShine 6.5s linear infinite;
    }
    @keyframes titleShine{0%{background-position:135% 0}100%{background-position:-135% 0}}
    #startTagline{min-height:21px}
    .caret{
      display:inline-block;width:2px;height:13px;background:var(--accent);
      margin-left:3px;vertical-align:-2px;border-radius:1px;
      animation:caretBlink 1.05s steps(1) infinite;
    }
    @keyframes caretBlink{50%{opacity:0}}
    #startView .row button{animation:btnRise .55s var(--ease-out) both}
    #startView .row button:nth-child(1){animation-delay:.14s}
    #startView .row button:nth-child(2){animation-delay:.22s}
    #startView .row button:nth-child(3){animation-delay:.3s}
    @keyframes btnRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

    /* ── Empty chat state ────────────────────────── */
    #chatWindow:empty::after{
      content:'No messages yet — say something cheesy 🧀';
      display:block;margin:auto;text-align:center;
      font-size:13px;color:var(--text-dim);font-weight:500;letter-spacing:0.01em;
      animation:ldrFade 2.6s ease-in-out infinite;
    }

    /* ── Hover timestamps on messages ────────────── */
    .msgTime{
      font-size:10px;color:var(--text-dim);margin-left:8px;
      opacity:0;transition:opacity .2s var(--ease-smooth);
      font-weight:600;white-space:nowrap;vertical-align:middle;letter-spacing:0.02em;
    }
    .msg:hover .msgTime{opacity:1}
    .msg.me .msgTime{color:rgba(255,240,180,0.55)}

    /* ── Emoji button (send bar) ─────────────────── */
    #emojiBtn{
      border-radius:10px !important;padding:8px 11px !important;
      background:rgba(255,255,255,0.04) !important;
      border:1px solid rgba(255,255,255,0.08) !important;
      font-size:17px !important;line-height:1 !important;flex-shrink:0;
    }
    #emojiBtn:hover{
      background:var(--accent-soft) !important;
      border-color:var(--border-accent) !important;
      transform:translateY(-1px) scale(1.06);
    }

    /* ── Emoji picker panel ──────────────────────── */
    #emojiPanel{
      position:absolute;right:14px;bottom:78px;z-index:300;
      width:312px;max-height:336px;display:none;flex-direction:column;
      background:linear-gradient(168deg,#1d1e28,#12131b);
      border:1px solid var(--border-strong);
      border-top-color:rgba(255,255,255,0.2);
      border-radius:18px;overflow:hidden;
      box-shadow:0 30px 80px rgba(0,0,0,0.68),0 6px 24px rgba(0,0,0,0.4);
      animation:popupIn .26s var(--ease-bounce) both;
    }
    #emojiPanel.open{display:flex}
    .emojiTabs{display:flex;gap:2px;padding:8px 10px 6px;border-bottom:1px solid var(--border);flex-shrink:0}
    .emojiTab{
      flex:1;background:transparent;border:0;font-size:16px;padding:6px 0;border-radius:8px;
      cursor:pointer;transition:background .15s,opacity .15s,transform .15s var(--ease-bounce);opacity:.5;
    }
    .emojiTab:hover{background:var(--surface-hover);opacity:1;transform:translateY(-1px)}
    .emojiTab.active{background:var(--accent-soft);opacity:1}
    .emojiGrid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:10px;overflow-y:auto;flex:1}
    .emojiCell{
      background:transparent;border:0;font-size:20px;padding:5px 0;border-radius:8px;
      cursor:pointer;line-height:1.3;
      transition:transform .14s var(--ease-bounce),background .12s;
    }
    .emojiCell:hover{background:var(--surface-hover);transform:scale(1.28)}
    .emojiCell:active{transform:scale(0.9)}

    /* ── In-chat message search ──────────────────── */
    #chatSearchBtn{display:inline-flex;align-items:center;justify-content:center;padding:9px 11px;gap:0}
    #chatSearchBtn.active{background:var(--accent-soft) !important;border-color:var(--border-accent) !important;color:var(--accent) !important}
    #chatSearchBar{
      display:none;align-items:center;gap:9px;margin:8px 0 0;padding:8px 13px;
      background:rgba(0,0,0,0.28);border:1px solid var(--border-mid);border-radius:12px;
      animation:replyBarIn .22s var(--ease-bounce) both;
    }
    #chatSearchBar.open{display:flex}
    #chatSearchBar svg{flex-shrink:0;color:var(--text-dim)}
    #chatSearchInput{
      flex:1;background:transparent !important;border:0 !important;
      box-shadow:none !important;padding:3px 2px !important;font-size:13px;outline:none !important;
    }
    #chatSearchCount{font-size:11px;color:var(--accent);font-weight:700;white-space:nowrap;letter-spacing:0.02em}
    .searchHidden{display:none !important}
    .searchHit{box-shadow:0 0 0 1.5px var(--border-accent),0 4px 16px rgba(0,0,0,0.2) !important}

    /* ── Confetti canvas ─────────────────────────── */
    #confettiCanvas{position:fixed;inset:0;pointer-events:none;z-index:99998;will-change:transform}

    /* ── Light-mode support for new elements ─────── */
    html.light-mode body::before{opacity:0.6}
    html.light-mode body::after{opacity:0.022}
    html.light-mode #logoMark{background:rgba(241,194,50,0.16);border-color:rgba(180,130,0,0.32)}
    html.light-mode #emojiPanel{background:linear-gradient(168deg,#fffef8,#fff8e4) !important;border-color:rgba(0,0,0,0.13) !important;box-shadow:0 24px 60px rgba(0,0,0,0.16) !important}
    html.light-mode .emojiTabs{border-bottom-color:rgba(0,0,0,0.08)}
    html.light-mode .emojiCell:hover,html.light-mode .emojiTab:hover{background:rgba(0,0,0,0.06)}
    html.light-mode #emojiBtn{background:rgba(0,0,0,0.05) !important;border-color:rgba(0,0,0,0.1) !important}
    html.light-mode #chatSearchBar{background:rgba(255,255,255,0.75);border-color:rgba(0,0,0,0.12)}
    html.light-mode .msg.me .msgTime{color:rgba(255,240,180,0.55)}
    html.light-mode #chatWindow:empty::after{color:rgba(0,0,0,0.3)}

    /* ── Reduced motion ──────────────────────────── */
    @media (prefers-reduced-motion: reduce){
      body::before,#glowBar,#logoMark span,#startView h2,.caret{animation:none !important}
    }

/* ── Typing Indicator ─────────────────────────────────────────────────── */
#typingIndicator{font-size:0.77em;color:#777;padding:2px 4px;min-height:16px;font-style:italic;transition:opacity 0.2s}
#typingIndicator span{color:#f5cd49;font-style:normal;font-weight:600}

/* ── @Mention Autocomplete Dropdown ──────────────────────────────────── */
#mentionDropdown{background:#1b1b2d;border:1px solid rgba(255,255,255,0.12);border-radius:10px;overflow:hidden;box-shadow:0 -6px 24px rgba(0,0,0,0.55);max-height:220px;overflow-y:auto}
.mentionItem{display:flex;align-items:center;gap:9px;width:100%;padding:7px 12px;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,0.05);color:#ddd;font-size:0.9em;cursor:pointer;text-align:left;transition:background 0.12s}
.mentionItem:last-child{border-bottom:none}
.mentionItem:hover,.mentionItem.selected{background:rgba(255,255,255,0.08)}
.mentionAvatar{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;flex-shrink:0;color:#111}

/* ── @Mention Pills (rendered in messages) ───────────────────────────── */
.mentionPill{display:inline-flex;align-items:center;gap:3px;padding:1px 8px 1px 3px;border-radius:10px;background:rgba(245,205,73,0.14);border:1px solid rgba(245,205,73,0.28);color:#f5cd49;font-size:0.85em;cursor:pointer;vertical-align:middle;font-weight:600;transition:background 0.15s;white-space:nowrap;text-decoration:none}
.mentionPill:hover{background:rgba(245,205,73,0.27)}
.mentionPillAvatar{display:inline-flex;width:16px;height:16px;border-radius:50%;background:rgba(245,205,73,0.38);color:#1a1a2e;font-size:9px;align-items:center;justify-content:center;font-weight:800;flex-shrink:0}

/* light-mode overrides */
html.light-mode #mentionDropdown{background:#f8f7ff;border-color:rgba(0,0,0,0.1)}
html.light-mode .mentionItem{color:#333;border-bottom-color:rgba(0,0,0,0.05)}
html.light-mode .mentionItem:hover{background:rgba(0,0,0,0.04)}
html.light-mode #typingIndicator{color:#888}
html.light-mode .mentionPill{background:rgba(180,140,0,0.1);border-color:rgba(180,140,0,0.25);color:#9a7800}
html.light-mode .mentionPill:hover{background:rgba(180,140,0,0.18)}

/* ── Image menu dialog ────────────────────────────────────────────────── */
#imgMenuDialog{
  background:transparent;border:none;padding:0;outline:none;
  overflow:visible;max-width:none;max-height:none;
}
#imgMenuDialog::backdrop{
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

@keyframes imgMenuIn{
  from{opacity:0;transform:translateY(12px) scale(0.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* ── Two-option picker ──────────────────────────────────────────────── */
#imgMenu{
  background:linear-gradient(145deg,#1e1f2e,#161724);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:16px;overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,0.8),0 0 0 1px rgba(255,255,255,0.04) inset;
  min-width:260px;
  animation:imgMenuIn 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.imgMenuItem{
  display:flex;align-items:center;gap:14px;width:100%;
  padding:16px 20px;background:transparent;border:none;
  color:var(--text,#e0e0f0);font-size:0.92em;cursor:pointer;text-align:left;
  border-bottom:1px solid rgba(255,255,255,0.06);
  transition:background 0.14s,transform 0.1s;
  position:relative;
}
.imgMenuItem:last-child{border-bottom:none}
.imgMenuItem:hover{background:rgba(255,255,255,0.07);transform:translateX(2px)}
.imgMenuItem:active{background:rgba(255,255,255,0.12)}
.imgMenuItem .imic{
  font-size:1.5em;flex-shrink:0;
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.06);border-radius:10px;
}
.imgMenuItem .imlabel{display:flex;flex-direction:column;gap:3px}
.imgMenuItem .imlabel strong{font-weight:700;font-size:0.95em;letter-spacing:0.01em}
.imgMenuItem .imlabel span{font-size:0.75em;color:rgba(255,255,255,0.45)}
.imgMenuItem .imchevron{
  margin-left:auto;opacity:0.35;font-size:0.85em;
  transition:opacity 0.12s,transform 0.12s;
}
.imgMenuItem:hover .imchevron{opacity:0.7;transform:translateX(3px)}

/* ── Reaction Image Picker ────────────────────────────────────────────── */
#reactionPicker{
  background:linear-gradient(145deg,#1e1f2e,#161724);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:18px;
  box-shadow:0 24px 72px rgba(0,0,0,0.85),0 0 0 1px rgba(255,255,255,0.04) inset;
  width:min(480px,92vw);
  display:flex;flex-direction:column;overflow:hidden;
  animation:imgMenuIn 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
#reactionPickerHeader{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px 12px;
  background:rgba(255,255,255,0.03);
  border-bottom:1px solid rgba(255,255,255,0.07);
}
#reactionPickerTitle{
  display:flex;align-items:center;gap:8px;
}
#reactionPickerTitle strong{
  font-size:0.9em;font-weight:800;
  background:linear-gradient(90deg,#f5cd49,#ffaa00);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  letter-spacing:0.02em;
}
#reactionPickerTitle span{
  font-size:0.72em;color:rgba(255,255,255,0.35);
  background:rgba(255,255,255,0.07);padding:2px 7px;border-radius:20px;
}
#reactionPickerBack{
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.6);font-size:0.78em;cursor:pointer;
  padding:5px 12px;border-radius:8px;transition:all 0.12s;
  display:flex;align-items:center;gap:4px;
}
#reactionPickerBack:hover{background:rgba(255,255,255,0.12);color:#fff}
#reactionGrid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:6px;
  padding:12px;max-height:360px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.15) transparent;
}
#reactionGrid::-webkit-scrollbar{width:4px}
#reactionGrid::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:2px}
.reactionThumb{
  aspect-ratio:1;border-radius:10px;overflow:hidden;
  background:rgba(255,255,255,0.04);border:2px solid transparent;
  cursor:pointer;transition:all 0.14s;position:relative;
}
.reactionThumb::after{
  content:attr(data-label);
  position:absolute;inset:0;display:flex;align-items:flex-end;
  padding:4px;font-size:8.5px;font-weight:600;line-height:1.2;
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,0.9);
  background:linear-gradient(transparent 40%,rgba(0,0,0,0.75));
  opacity:0;transition:opacity 0.14s;word-break:break-word;
}
.reactionThumb:hover{
  border-color:rgba(245,205,73,0.8);
  transform:scale(1.08);
  box-shadow:0 4px 16px rgba(0,0,0,0.5);
}
.reactionThumb:hover::after{opacity:1}
.reactionThumb img{width:100%;height:100%;object-fit:cover;display:block}

html.light-mode #imgMenuDialog::backdrop{background:rgba(0,0,0,0.4);backdrop-filter:blur(4px)}
html.light-mode #imgMenu,html.light-mode #reactionPicker{
  background:linear-gradient(145deg,#f8f8ff,#f0f0fa);
  border-color:rgba(0,0,0,0.1);
}
html.light-mode .imgMenuItem{color:#111}
html.light-mode .imgMenuItem:hover{background:rgba(0,0,0,0.04)}
html.light-mode .imgMenuItem .imic{background:rgba(0,0,0,0.06)}
html.light-mode .imgMenuItem .imlabel span{color:rgba(0,0,0,0.45)}
html.light-mode #reactionPickerHeader{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.08)}


/* ── New Features: Edit/Delete, Unread, Edited, Deleted ── */
.msgOptBtn{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--muted); font-size:13px;
  cursor:pointer; padding:2px 5px; border-radius:4px; opacity:0;
  transition:opacity 0.15s; line-height:1; display:block;
}
.msg.me:hover .msgOptBtn{ opacity:1; }
.msg.me .msgOptBtn:hover{ background:rgba(255,255,255,0.08); color:var(--text); }
.msgOptMenu{
  display:none; position:absolute; right:28px; top:50%; transform:translateY(-50%);
  background:var(--surface); border:1px solid rgba(255,255,255,0.1);
  border-radius:6px; overflow:hidden; z-index:50; box-shadow:0 4px 16px rgba(0,0,0,0.4);
  white-space:nowrap;
}
.msgOptMenu.open{ display:flex; flex-direction:column; }
.msgOptMenu button{
  background:none; border:none; color:var(--text); padding:7px 14px;
  cursor:pointer; font-size:13px; text-align:left;
}
.msgOptMenu button:hover{ background:rgba(255,255,255,0.07); }
.editedMark{
  font-size:10px; color:var(--muted); opacity:0.65; margin-left:3px; font-style:italic;
}
.deletedMsg{
  color:var(--muted); opacity:0.55; font-style:italic; font-size:13px;
}
.editInp{
  display:inline; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.2);
  border-radius:4px; color:var(--text); font-size:inherit; padding:2px 6px;
  font-family:inherit; width:min(420px, 70vw);
}
/* Unread badge on group cards — disabled */
.groupCard.has-unread .groupTitle::after{ content:none; }
html.light-mode .msgOptBtn{ color:#888; }
html.light-mode .msgOptMenu{ background:#fff; border-color:rgba(0,0,0,0.12); box-shadow:0 4px 16px rgba(0,0,0,0.15); }
html.light-mode .msgOptMenu button{ color:#222; }
html.light-mode .msgOptMenu button:hover{ background:rgba(0,0,0,0.05); }
html.light-mode .editInp{ background:#fff; border-color:#ccc; color:#111; }

/* ════════════════════════ v4.1 FINAL POLISH ════════════════════════ */

/* ── PolyTrack invite handoff ────────────────────────────────────── */
.polytrackInvitePicker{max-width:480px;width:min(92vw,480px);padding:22px}
.polytrackInviteHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.polytrackInviteHeader h2{margin:4px 0 0;font-size:25px;letter-spacing:-.02em}
.polytrackInviteEyebrow{font-size:10px;font-weight:800;letter-spacing:.18em;color:#75ddff}
.polytrackInviteCodeRow{display:flex;align-items:center;justify-content:space-between;margin:18px 0;padding:13px 15px;border:1px solid rgba(117,221,255,.24);border-radius:12px;background:rgba(117,221,255,.07);font-size:12px;color:var(--text-dim)}
.polytrackInviteCodeRow strong{font:800 17px/1 monospace;letter-spacing:.15em;color:#fff}
.polytrackInviteRecipients{display:flex;flex-direction:column;gap:7px;max-height:min(48vh,390px);overflow:auto;padding-right:3px}
.polytrackInviteSection{margin:10px 2px 3px;font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--text-dim)}
.polytrackInviteTarget{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 13px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.035);color:var(--text);text-align:left;cursor:pointer;transition:background .16s ease,border-color .16s ease,transform .16s ease}
.polytrackInviteTarget:hover{background:rgba(117,221,255,.09);border-color:rgba(117,221,255,.3);transform:translateY(-1px)}
.polytrackInviteTarget:disabled{opacity:.55;cursor:wait;transform:none}
.polytrackInviteTargetName{font-weight:700}
.polytrackInviteTargetType{font-size:10px;color:var(--text-dim)}
.polytrackInviteEmpty{padding:18px 4px;color:var(--text-dim);font-size:12px;text-align:center}
.polytrackInviteCard{margin-top:9px;padding:13px 14px;border:1px solid rgba(117,221,255,.27);border-radius:13px;background:linear-gradient(135deg,rgba(31,65,91,.6),rgba(18,24,35,.72));max-width:360px}
.polytrackInviteCardTop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.polytrackInviteCardTitle{font-weight:800;color:#f6fbff}
.polytrackInviteCardCode{font:800 13px/1 monospace;letter-spacing:.13em;color:#75ddff}
.polytrackInviteJoin{margin-top:12px;border:0;border-radius:9px;padding:9px 13px;background:#75ddff;color:#071219;font:800 12px/1 inherit;cursor:pointer}
.polytrackInviteJoin:hover{background:#a5eaff}

/* ── System messages: elegant full-width divider ──────────────────── */
.system{
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  padding:3px 2px !important;
  align-self:center !important;
  display:block !important;
  text-align:center;
  font-size:11px !important;
  color:rgba(255,255,255,0.26) !important;
  font-weight:500;
  font-style:normal !important;
  letter-spacing:0.01em !important;
  animation:sysDiv .35s ease both;
}
.system::before,.system::after{ content:none; }
/* Media system messages (announcements with GIF/image) — no box, just the media */
.system:has(img){
  display:block !important;
  align-self:center !important;
  background:none !important;
  border:none !important;
  border-radius:0 !important;
  padding:4px 0 !important;
  letter-spacing:0.01em !important;
  color:var(--text-dim) !important;
  font-size:12px !important;
}
.system:has(img)::before,.system:has(img)::after{display:none}
/* Remove border from announcement images themselves */
.system img.gifImg,.system img.uploadedImg{border:none !important;}
@keyframes sysDiv{from{opacity:0}to{opacity:1}}

/* ── Send button: circular paper-plane icon ───────────────────────── */
#sendBtn{
  border-radius:50% !important;
  padding:0 !important;
  width:40px !important;
  height:40px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-shrink:0 !important;
  box-shadow:0 4px 18px rgba(241,194,50,0.32),0 1px 0 rgba(255,255,255,0.28) inset !important;
}
#sendBtn:hover:not(:disabled){
  box-shadow:0 6px 26px rgba(241,194,50,0.48),0 1px 0 rgba(255,255,255,0.28) inset !important;
}
#sendBtn svg{pointer-events:none}

/* ── Online count in chat header: green pill badge ────────────────── */
#onlineCount{
  background:rgba(80,200,120,0.1) !important;
  border:1px solid rgba(80,200,120,0.22) !important;
  color:#72d99a !important;
  border-radius:999px !important;
  padding:2px 10px !important;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:0.01em !important;
  transition:background .2s,border-color .2s !important;
}

/* ── Chat header: hairline separator beneath title row ────────────── */
#chatView > div:first-child{
  padding-bottom:11px;
  border-bottom:1px solid rgba(255,255,255,0.065);
  margin-bottom:1px;
}

/* ── Group card: online-count chip ───────────────────────────────── */
.groupRight > .mutedSmall{
  background:rgba(80,200,120,0.08);
  border:1px solid rgba(80,200,120,0.18);
  border-radius:999px;
  padding:2px 9px;
  font-size:11px;
  color:rgba(100,210,148,0.75);
  font-weight:600;
}

/* ── Contact card: offline dot → softer grey ─────────────────────── */
.contactCard .dot[style*="107, 107, 107"]{
  opacity:0.45;
}

/* ── Reply bar: left accent bolder ──────────────────────────────── */
.replyBar{
  border-left-width:3px;
  border-left-color:var(--accent) !important;
}

/* ── Message bubbles: crisper borders ────────────────────────────── */
.msg{
  border-color:rgba(255,255,255,0.055) !important;
}
.msg.me{
  border-color:rgba(230,180,20,0.38) !important;
  box-shadow:0 3px 16px rgba(175,120,0,0.3),0 1px 0 rgba(255,255,255,0.12) inset !important;
}
.msg.me:hover{
  box-shadow:0 6px 24px rgba(220,160,0,0.36),0 1px 0 rgba(255,255,255,0.12) inset !important;
}

/* ── Empty chat placeholder ─────────────────────────────────────── */
#chatWindow:empty::after{
  font-size:14px !important;
  opacity:0.7;
}

/* ── Light mode overrides ────────────────────────────────────────── */
html.light-mode .system{
  color:rgba(0,0,0,0.32) !important;
}
html.light-mode .system::before,html.light-mode .system::after{
  background:rgba(0,0,0,0.1);
}
html.light-mode #onlineCount{
  background:rgba(30,140,70,0.09) !important;
  border-color:rgba(30,140,70,0.22) !important;
  color:#2a9a55 !important;
}
html.light-mode .groupRight > .mutedSmall{
  background:rgba(30,140,70,0.07);
  border-color:rgba(30,140,70,0.2);
  color:rgba(20,110,55,0.85);
}

/* ── Version Tab Card (easter egg) ───────────────────────────────── */
.version-tab-card{
  align-self:center;
  display:flex;align-items:flex-start;gap:16px;
  background:linear-gradient(145deg,rgba(241,194,50,0.13) 0%,rgba(180,130,10,0.07) 100%);
  border:1px solid rgba(241,194,50,0.32);
  border-top-color:rgba(255,230,100,0.48);
  border-radius:16px;
  padding:16px 20px;
  max-width:360px;
  box-shadow:0 8px 32px rgba(241,194,50,0.14),0 2px 8px rgba(0,0,0,0.32),0 0 0 1px rgba(255,255,255,0.04) inset;
  animation:vtcIn .4s cubic-bezier(0.34,1.56,0.64,1) both;
  transition:opacity .6s ease,transform .6s ease;
}
.version-tab-card.vtc-fade{opacity:0;transform:translateY(-6px) scale(0.97)}
@keyframes vtcIn{
  from{opacity:0;transform:translateY(12px) scale(0.92)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.vtc-creme-icon{
  width:46px;height:46px;flex-shrink:0;
  border-radius:13px;
  background:linear-gradient(145deg,rgba(241,194,50,0.28),rgba(180,130,10,0.18));
  border:1px solid rgba(241,194,50,0.4);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(241,194,50,0.22);
}
.vtc-creme-icon span{
  font-size:15px;font-weight:900;letter-spacing:-0.04em;
  background:linear-gradient(135deg,#ffe566,#d09810);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.vtc-body{display:flex;flex-direction:column;gap:0;flex:1;min-width:0}
.vtc-label{
  font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  color:rgba(241,194,50,0.6);margin-bottom:2px;
}
.vtc-ver{
  font-size:20px;font-weight:800;letter-spacing:-0.03em;
  background:linear-gradient(110deg,#ffe566 20%,#f1c232 55%,#d09810 90%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  line-height:1.15;margin-bottom:10px;
}
.vtc-divider{
  height:1px;background:rgba(241,194,50,0.18);margin-bottom:10px;
}
.vtc-stats{display:flex;flex-direction:column;gap:5px}
.vtc-stat{display:flex;justify-content:space-between;align-items:center;gap:8px}
.vtc-sl{font-size:11px;font-weight:600;color:var(--text-muted);letter-spacing:0.02em;flex-shrink:0}
.vtc-sv{font-size:11px;font-weight:600;color:var(--text);text-align:right;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}