/* System-wide themes. Linked from every page so the palette is identical in
   the dashboard, Settings, Surprise and the login screens. */

/* ===================================================================== */
/* SYSTEM-WIDE THEMES                                                     */
/*                                                                        */
/* Every coloured palette layers on top of the existing dark base, so all  */
/* the html[data-theme="dark"] rules above stay in force and each theme    */
/* only has to restate the surfaces that actually change. These rules come */
/* last in the file, so they win at equal specificity.                     */
/* ===================================================================== */

html[data-app-theme]:not([data-app-theme="default"]) {
  --theme-bg: #070b14;
  --theme-panel: #111827;
  --theme-soft: #0b1220;
  --theme-line: #263244;
  --theme-line-soft: #334155;
  --theme-text: #e5e7eb;
  --theme-muted: #94a3b8;
  --theme-accent: #60a5fa;
  --theme-accent-dark: #3b82f6;
  --theme-mine: #1d4ed8;
  --theme-theirs: #1e293b;
  --theme-glow: rgba(96,165,250,.16);
}

/* ---- Jet Black: true black for OLED screens ---- */
html[data-app-theme="jet-black"]:not([data-app-theme="default"]){
  --theme-bg:#000000; --theme-panel:#0b0b0b; --theme-soft:#050505;
  --theme-line:#1c1c1c; --theme-line-soft:#2b2b2b;
  --theme-text:#ededed; --theme-muted:#8f8f8f;
  /* Soft silver rather than white: a pure-white accent on pure black is the
     single harshest combination on screen. */
  --theme-accent:#c3c7cc; --theme-accent-dark:#9fa4aa;
  --theme-mine:#232323; --theme-theirs:#141414;
  --theme-glow:rgba(195,199,204,.07);
}
/* ---- Matte Black: the same black, lifted off zero so edges stay readable ---- */
html[data-app-theme="matte-black"]:not([data-app-theme="default"]){
  --theme-bg:#121212; --theme-panel:#1a1a1a; --theme-soft:#161616;
  --theme-line:#2a2a2a; --theme-line-soft:#3a3a3a;
  --theme-text:#e8e4de; --theme-muted:#9d9890;
  --theme-accent:#cfc9c0; --theme-accent-dark:#a9a49c;
  --theme-mine:#2f2f2f; --theme-theirs:#1f1f1f;
  --theme-glow:rgba(207,201,192,.06);
}
/* ---- Midnight: deep indigo night ---- */
html[data-app-theme="midnight"]:not([data-app-theme="default"]){
  --theme-bg:#050a1a; --theme-panel:#0b1430; --theme-soft:#070e24;
  --theme-line:#1d2a52; --theme-line-soft:#2b3c6e;
  --theme-text:#e6ecff; --theme-muted:#93a6d8;
  --theme-accent:#8fa9dd; --theme-accent-dark:#6c86bb;
  --theme-mine:#2c4bb8; --theme-theirs:#152249;
  --theme-glow:rgba(122,162,255,.18);
}
/* ---- Royal Purple ---- */
html[data-app-theme="royal"]:not([data-app-theme="default"]){
  --theme-bg:#100722; --theme-panel:#1a0f36; --theme-soft:#150b2b;
  --theme-line:#33215e; --theme-line-soft:#452c7d;
  --theme-text:#f0e8ff; --theme-muted:#b39fd8;
  --theme-accent:#b79ce0; --theme-accent-dark:#9679c4;
  --theme-mine:#6d28d9; --theme-theirs:#251545;
  --theme-glow:rgba(192,132,252,.20);
}
/* ---- Emerald forest ---- */
html[data-app-theme="emerald"]:not([data-app-theme="default"]){
  --theme-bg:#03110c; --theme-panel:#071d15; --theme-soft:#051710;
  --theme-line:#143a2b; --theme-line-soft:#1d523c;
  --theme-text:#e3f7ec; --theme-muted:#8fc4ac;
  --theme-accent:#7ec3a5; --theme-accent-dark:#5da184;
  --theme-mine:#047857; --theme-theirs:#0b2a1f;
  --theme-glow:rgba(52,211,153,.18);
}
/* ---- Rose: the romantic one ---- */
html[data-app-theme="rose"]:not([data-app-theme="default"]){
  --theme-bg:#170510; --theme-panel:#250a1b; --theme-soft:#1d0715;
  --theme-line:#4a1733; --theme-line-soft:#642044;
  --theme-text:#ffe9f4; --theme-muted:#d79cbc;
  --theme-accent:#dda2bd; --theme-accent-dark:#bd809c;
  --theme-mine:#be1d63; --theme-theirs:#331026;
  --theme-glow:rgba(244,114,182,.20);
}
/* ---- Sunset: warm amber ---- */
html[data-app-theme="sunset"]:not([data-app-theme="default"]){
  --theme-bg:#140803; --theme-panel:#221008; --theme-soft:#1a0b05;
  --theme-line:#4a2412; --theme-line-soft:#66331a;
  --theme-text:#ffeede; --theme-muted:#d6a985;
  --theme-accent:#d9a271; --theme-accent-dark:#b8814f;
  --theme-mine:#c2410c; --theme-theirs:#2e150a;
  --theme-glow:rgba(251,146,60,.20);
}
/* ---- Nord: cool desaturated slate ---- */
html[data-app-theme="nord"]:not([data-app-theme="default"]){
  --theme-bg:#0b0f16; --theme-panel:#161c26; --theme-soft:#10151d;
  --theme-line:#2a3240; --theme-line-soft:#3a4456;
  --theme-text:#e6ebf2; --theme-muted:#9aa7b8;
  --theme-accent:#9dbcc7; --theme-accent-dark:#7a99a4;
  --theme-mine:#3b5a70; --theme-theirs:#1d242f;
  --theme-glow:rgba(136,192,208,.18);
}
/* ---- Parchment: warm paper, the one light palette ---- */
html[data-app-theme="parchment"]:not([data-app-theme="default"]){
  --theme-bg:#f3e9d6; --theme-panel:#fffaf0; --theme-soft:#f8f1e2;
  --theme-line:#e0d2b8; --theme-line-soft:#cdbb9b;
  --theme-text:#3a2f21; --theme-muted:#7a6a55;
  --theme-accent:#8a5a2b; --theme-accent-dark:#6d461f;
  --theme-mine:#a1662f; --theme-theirs:#efe4cf;
  --theme-glow:rgba(161,102,47,.16);
}

/* ---------- Shared mapping from theme tokens onto the app ---------- */
html[data-app-theme]:not([data-app-theme="default"]){
  --bg:var(--theme-bg);
  --panel:var(--theme-panel);
  --panel-soft:var(--theme-soft);
  --text:var(--theme-text);
  --muted:var(--theme-muted);
  --border:var(--theme-line);
  --accent:var(--theme-accent);
  --accent-dark:var(--theme-accent-dark);
  --mine:var(--theme-mine);
  --theirs:var(--theme-theirs);
  --upsc-navy:var(--theme-text);
  --upsc-blue:var(--theme-accent);
  /* Fixed amber (#f59e0b) from the original palette. It was never remapped, so
     the rule under the dashboard title, the bar on the active conversation and
     the top edge of the encryption card stayed orange whatever colour was
     chosen. */
  --upsc-gold:var(--theme-btn-ink,var(--theme-accent));
  --line:var(--theme-line);
  /* The Settings page uses its own variable names for the same surfaces. */
  --surface:var(--theme-panel);
  --surface-2:var(--theme-soft);
  --primary:var(--theme-accent);
  --primary-hover:var(--theme-accent-dark);
}
html[data-app-theme]:not([data-app-theme="default"]) body{
  background:radial-gradient(circle at top left,var(--theme-glow) 0,transparent 38%),var(--theme-bg)!important;
  color:var(--theme-text);
}
html[data-app-theme]:not([data-app-theme="default"]) .auth-card,
html[data-app-theme]:not([data-app-theme="default"]) .login-panel,
html[data-app-theme]:not([data-app-theme="default"]) .chat-layout,
html[data-app-theme]:not([data-app-theme="default"]) .chat-panel,
html[data-app-theme]:not([data-app-theme="default"]) .sidebar-header,
html[data-app-theme]:not([data-app-theme="default"]) .chat-header,
html[data-app-theme]:not([data-app-theme="default"]) .new-chat-box,
html[data-app-theme]:not([data-app-theme="default"]) .message-composer,
html[data-app-theme]:not([data-app-theme="default"]) .attachment-preview,
html[data-app-theme]:not([data-app-theme="default"]) .upload-progress{
  background:var(--theme-panel)!important;border-color:var(--theme-line)!important;color:var(--theme-text)!important;
}
html[data-app-theme]:not([data-app-theme="default"]) .sidebar,
html[data-app-theme]:not([data-app-theme="default"]) .conversation-list{
  background:var(--theme-soft)!important;border-color:var(--theme-line)!important;
}
html[data-app-theme]:not([data-app-theme="default"]) .dashboard-brand{
  background:linear-gradient(135deg,var(--theme-panel),var(--theme-soft))!important;
}
html[data-app-theme]:not([data-app-theme="default"]) .message-list{
  background:var(--theme-bg)!important;background-image:none!important;
}
html[data-app-theme]:not([data-app-theme="default"]) .message-row:not(.mine) .message-bubble{
  background:var(--theme-theirs)!important;border-color:var(--theme-line-soft)!important;color:var(--theme-text)!important;
}
html[data-app-theme]:not([data-app-theme="default"]) .message-row.mine .message-bubble{
  background:var(--theme-mine)!important;color:#fff!important;
}
html[data-app-theme="parchment"] .message-row.mine .message-bubble{color:#fffaf0!important}
html[data-app-theme]:not([data-app-theme="default"]) input,
html[data-app-theme]:not([data-app-theme="default"]) textarea,
html[data-app-theme]:not([data-app-theme="default"]) .input-shell,
html[data-app-theme]:not([data-app-theme="default"]) .e2ee-input-row{
  background:var(--theme-soft)!important;color:var(--theme-text)!important;border-color:var(--theme-line-soft)!important;
}
html[data-app-theme]:not([data-app-theme="default"]) input::placeholder,
html[data-app-theme]:not([data-app-theme="default"]) textarea::placeholder{color:var(--theme-muted)!important}
html[data-app-theme]:not([data-app-theme="default"]) .conversation-item:hover,
html[data-app-theme]:not([data-app-theme="default"]) .conversation-item.active{
  background:var(--theme-panel)!important;border-color:var(--theme-line-soft)!important;
}
html[data-app-theme]:not([data-app-theme="default"]) .avatar,
html[data-app-theme]:not([data-app-theme="default"]) .header-avatar{
  background:var(--theme-panel)!important;color:var(--theme-accent)!important;border-color:var(--theme-line-soft)!important;
}
html[data-app-theme]:not([data-app-theme="default"]) .icon-btn,
html[data-app-theme]:not([data-app-theme="default"]) .mobile-back,
html[data-app-theme]:not([data-app-theme="default"]) .attach-btn,
html[data-app-theme]:not([data-app-theme="default"]) .record-btn,
html[data-app-theme]:not([data-app-theme="default"]) .close-tab-btn,
html[data-app-theme]:not([data-app-theme="default"]) .header-menu-btn,
html[data-app-theme]:not([data-app-theme="default"]) .account-icon-btn,
html[data-app-theme]:not([data-app-theme="default"]) .login-sessions-btn,
html[data-app-theme]:not([data-app-theme="default"]) .story-manage-btn,
html[data-app-theme]:not([data-app-theme="default"]) .surprise-open-btn{
  background:var(--theme-panel)!important;color:var(--theme-text)!important;border-color:var(--theme-line-soft)!important;
}
html[data-app-theme]:not([data-app-theme="default"]) .message-menu,
html[data-app-theme]:not([data-app-theme="default"]) .clear-menu,
html[data-app-theme]:not([data-app-theme="default"]) .conversation-menu,
html[data-app-theme]:not([data-app-theme="default"]) .emoji-picker,
html[data-app-theme]:not([data-app-theme="default"]) .sticker-picker{
  background:var(--theme-panel)!important;border-color:var(--theme-line-soft)!important;color:var(--theme-text)!important;
}
html[data-app-theme]:not([data-app-theme="default"]) .primary-btn,
html[data-app-theme]:not([data-app-theme="default"]) .send-btn,
html[data-app-theme]:not([data-app-theme="default"]) .inline-form button{
  background:var(--theme-accent)!important;color:#0b0b0b!important;
}
html[data-app-theme="midnight"] .primary-btn,html[data-app-theme="midnight"] .send-btn,html[data-app-theme="midnight"] .inline-form button,
html[data-app-theme="royal"] .primary-btn,html[data-app-theme="royal"] .send-btn,html[data-app-theme="royal"] .inline-form button,
html[data-app-theme="rose"] .primary-btn,html[data-app-theme="rose"] .send-btn,html[data-app-theme="rose"] .inline-form button,
html[data-app-theme="parchment"] .primary-btn,html[data-app-theme="parchment"] .send-btn,html[data-app-theme="parchment"] .inline-form button{
  color:#ffffff!important;
}
html[data-app-theme]:not([data-app-theme="default"]) .status-text.typing{color:var(--theme-accent)!important}
html[data-app-theme]:not([data-app-theme="default"]) .message-status.seen{
  color:var(--theme-accent)!important;
  background:var(--theme-glow)!important;
  box-shadow:0 0 0 1px var(--theme-glow) inset!important;
}

/* ---------- Theme picker in Settings ---------- */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;margin-top:4px}
.theme-swatch{
  position:relative;padding:0;border-radius:14px;cursor:pointer;overflow:hidden;
  border:2px solid var(--border);background:transparent;text-align:left;
  transition:border-color .14s ease,transform .14s ease;
}
.theme-swatch:hover{transform:translateY(-2px)}
.theme-swatch.selected{border-color:var(--accent)}
.theme-swatch-preview{height:52px;display:flex;align-items:flex-end;gap:4px;padding:8px}
.theme-swatch-bubble{height:13px;border-radius:99px;flex:0 0 auto}
.theme-swatch-bubble.a{width:44%}
.theme-swatch-bubble.b{width:30%}
.theme-swatch-name{display:block;padding:7px 9px;font-size:12px;font-weight:700;background:var(--panel);color:var(--text)}


/* ---------- Settings page surfaces ---------- */
html[data-app-theme]:not([data-app-theme="default"]) .settings-page-shell{
  background:radial-gradient(circle at top left,var(--theme-glow) 0,transparent 38%),var(--theme-bg)!important;
  color:var(--theme-text)!important;
}
html[data-app-theme]:not([data-app-theme="default"]) .settings-card,
html[data-app-theme]:not([data-app-theme="default"]) .account-pill,
html[data-app-theme]:not([data-app-theme="default"]) .back-home{
  background:var(--theme-panel)!important;border-color:var(--theme-line)!important;color:var(--theme-text)!important;
}
html[data-app-theme]:not([data-app-theme="default"]) .settings-card h2,
html[data-app-theme]:not([data-app-theme="default"]) .page-heading h1{color:var(--theme-text)!important}
html[data-app-theme]:not([data-app-theme="default"]) .settings-card p,
html[data-app-theme]:not([data-app-theme="default"]) .settings-card small,
html[data-app-theme]:not([data-app-theme="default"]) .page-heading p{color:var(--theme-muted)!important}
html[data-app-theme]:not([data-app-theme="default"]) .card-icon,
html[data-app-theme]:not([data-app-theme="default"]) .profile-photo-preview{
  background:var(--theme-soft)!important;color:var(--theme-accent)!important;border-color:var(--theme-line-soft)!important;
}
html[data-app-theme]:not([data-app-theme="default"]) .settings-form button,
html[data-app-theme]:not([data-app-theme="default"]) .profile-photo-actions button{
  background:var(--theme-accent)!important;color:#0b0b0b!important;border-color:transparent!important;
}
html[data-app-theme="midnight"] .settings-form button,html[data-app-theme="royal"] .settings-form button,
html[data-app-theme="rose"] .settings-form button,html[data-app-theme="parchment"] .settings-form button,
html[data-app-theme="midnight"] .profile-photo-actions button,html[data-app-theme="royal"] .profile-photo-actions button,
html[data-app-theme="rose"] .profile-photo-actions button,html[data-app-theme="parchment"] .profile-photo-actions button{color:#fff!important}
html[data-app-theme]:not([data-app-theme="default"]) .secondary-action{
  background:transparent!important;color:var(--theme-muted)!important;border:1px solid var(--theme-line-soft)!important;
}

/* ---------- Surprise page surfaces ---------- */
html[data-app-theme]:not([data-app-theme="default"]) .surprise-body{
  --surprise-bg:var(--theme-bg);
  --surprise-card:var(--theme-panel);
  --surprise-ink:var(--theme-text);
  --surprise-muted:var(--theme-muted);
  --surprise-line:var(--theme-line);
  --surprise-accent:var(--theme-accent);
}

/* ---------- Text that the default palette hard-codes for a navy header ---- */
html[data-app-theme]:not([data-app-theme="default"]) .dashboard-brand h1,
html[data-app-theme]:not([data-app-theme="default"]) .dashboard-brand-copy h1{
  color:var(--theme-text)!important;
}
html[data-app-theme]:not([data-app-theme="default"]) .dashboard-brand p,
html[data-app-theme]:not([data-app-theme="default"]) .dashboard-brand-copy p{
  color:var(--theme-accent)!important;opacity:.95;
}
html[data-app-theme]:not([data-app-theme="default"]) .dashboard-emblem,
html[data-app-theme]:not([data-app-theme="default"]) .academy-mark{
  background:var(--theme-accent)!important;color:var(--theme-bg)!important;
}
html[data-app-theme]:not([data-app-theme="default"]) .iphone-page-btn{
  background:var(--theme-soft)!important;color:var(--theme-text)!important;border-color:var(--theme-line-soft)!important;
}
html[data-app-theme]:not([data-app-theme="default"]) .conversation-name,
html[data-app-theme]:not([data-app-theme="default"]) .chat-header h2,
html[data-app-theme]:not([data-app-theme="default"]) .sidebar-header h2{color:var(--theme-text)!important}
html[data-app-theme]:not([data-app-theme="default"]) .conversation-preview,
html[data-app-theme]:not([data-app-theme="default"]) .conversation-status,
html[data-app-theme]:not([data-app-theme="default"]) .eyebrow,
html[data-app-theme]:not([data-app-theme="default"]) .status-text{color:var(--theme-muted)!important}
html[data-app-theme]:not([data-app-theme="default"]) .student-account-avatar{
  background:var(--theme-accent)!important;color:var(--theme-bg)!important;border-color:var(--theme-line-soft)!important;
}
html[data-app-theme]:not([data-app-theme="default"]) .conversation-heading{color:var(--theme-muted)!important}
html[data-app-theme]:not([data-app-theme="default"]) .text-btn{color:var(--theme-accent)!important}
html[data-app-theme]:not([data-app-theme="default"]) .admin-badge{
  background:var(--theme-glow)!important;color:var(--theme-accent)!important;border-color:var(--theme-line-soft)!important;
}


/* ===================================================================== */
/* SOFT BUTTONS                                                           */
/*                                                                        */
/* A saturated fill on a dark screen is what makes an interface tiring to */
/* look at. Every primary control is therefore a low-alpha tint of the    */
/* chosen accent with the accent itself as the label. The tokens come     */
/* from theme-init.js, which derives them from whichever colour the user  */
/* picked in Settings, so a custom colour behaves exactly like a built-in */
/* one. These rules repeat the :not() so they match the specificity of    */
/* the fills above and win by coming later.                               */
/* ===================================================================== */
html[data-app-theme]:not([data-app-theme="default"]) .primary-btn,
html[data-app-theme]:not([data-app-theme="default"]) .send-btn,
html[data-app-theme]:not([data-app-theme="default"]) .inline-form button,
html[data-app-theme]:not([data-app-theme="default"]) .settings-form button,
html[data-app-theme]:not([data-app-theme="default"]) .profile-photo-actions button,
html[data-app-theme]:not([data-app-theme="default"]) .state-card button,
html[data-app-theme]:not([data-app-theme="default"]) .story-manager-add,
html[data-app-theme]:not([data-app-theme="default"]) .story-compose-actions .primary,
html[data-app-theme]:not([data-app-theme="default"]) .surprise-primary,
html[data-app-theme]:not([data-app-theme="default"]) .surprise-new-btn,
html[data-app-theme]:not([data-app-theme="default"]) .chat-theme-actions button,
html[data-app-theme]:not([data-app-theme="default"]) .settings-refresh-btn{
  background:var(--theme-btn-bg)!important;
  color:var(--theme-btn-ink)!important;
  border:1px solid var(--theme-btn-line)!important;
  box-shadow:none!important;
  text-shadow:none!important;
}
html[data-app-theme]:not([data-app-theme="default"]) .primary-btn:hover,
html[data-app-theme]:not([data-app-theme="default"]) .send-btn:hover,
html[data-app-theme]:not([data-app-theme="default"]) .inline-form button:hover,
html[data-app-theme]:not([data-app-theme="default"]) .settings-form button:hover,
html[data-app-theme]:not([data-app-theme="default"]) .profile-photo-actions button:hover,
html[data-app-theme]:not([data-app-theme="default"]) .state-card button:hover,
html[data-app-theme]:not([data-app-theme="default"]) .story-manager-add:hover,
html[data-app-theme]:not([data-app-theme="default"]) .surprise-primary:hover,
html[data-app-theme]:not([data-app-theme="default"]) .surprise-new-btn:hover{
  background:var(--theme-btn-hover)!important;
}
/* The theme-specific white-label overrides above are for solid fills that no
   longer exist, so they have to be neutralised or the label turns invisible. */
html[data-app-theme="midnight"] .primary-btn,html[data-app-theme="midnight"] .send-btn,html[data-app-theme="midnight"] .inline-form button,
html[data-app-theme="royal"] .primary-btn,html[data-app-theme="royal"] .send-btn,html[data-app-theme="royal"] .inline-form button,
html[data-app-theme="rose"] .primary-btn,html[data-app-theme="rose"] .send-btn,html[data-app-theme="rose"] .inline-form button,
html[data-app-theme="parchment"] .primary-btn,html[data-app-theme="parchment"] .send-btn,html[data-app-theme="parchment"] .inline-form button,
html[data-app-theme="midnight"] .settings-form button,html[data-app-theme="royal"] .settings-form button,
html[data-app-theme="rose"] .settings-form button,html[data-app-theme="parchment"] .settings-form button,
html[data-app-theme="midnight"] .profile-photo-actions button,html[data-app-theme="royal"] .profile-photo-actions button,
html[data-app-theme="rose"] .profile-photo-actions button,html[data-app-theme="parchment"] .profile-photo-actions button{
  color:var(--theme-btn-ink)!important;
}
/* Secondary and icon controls: quieter still, but never invisible. */
html[data-app-theme]:not([data-app-theme="default"]) .icon-btn,
html[data-app-theme]:not([data-app-theme="default"]) .account-icon-btn,
html[data-app-theme]:not([data-app-theme="default"]) .attach-btn,
html[data-app-theme]:not([data-app-theme="default"]) .record-btn,
html[data-app-theme]:not([data-app-theme="default"]) .header-menu-btn,
html[data-app-theme]:not([data-app-theme="default"]) .close-tab-btn,
html[data-app-theme]:not([data-app-theme="default"]) .mobile-back,
html[data-app-theme]:not([data-app-theme="default"]) .login-sessions-btn,
html[data-app-theme]:not([data-app-theme="default"]) .story-manage-btn,
html[data-app-theme]:not([data-app-theme="default"]) .surprise-open-btn,
html[data-app-theme]:not([data-app-theme="default"]) .back-home,
html[data-app-theme]:not([data-app-theme="default"]) .secondary-action{
  background:var(--theme-soft)!important;
  color:var(--theme-text)!important;
  border:1px solid var(--theme-line-soft)!important;
  box-shadow:none!important;
}
html[data-app-theme]:not([data-app-theme="default"]) .icon-btn:hover,
html[data-app-theme]:not([data-app-theme="default"]) .account-icon-btn:hover,
html[data-app-theme]:not([data-app-theme="default"]) .login-sessions-btn:hover,
html[data-app-theme]:not([data-app-theme="default"]) .story-manage-btn:hover,
html[data-app-theme]:not([data-app-theme="default"]) .surprise-open-btn:hover,
html[data-app-theme]:not([data-app-theme="default"]) .back-home:hover,
html[data-app-theme]:not([data-app-theme="default"]) .secondary-action:hover{
  background:var(--theme-accent-soft)!important;
  border-color:var(--theme-btn-line)!important;
}
html[data-app-theme]:not([data-app-theme="default"]) .text-btn{color:var(--theme-btn-ink)!important}
html[data-app-theme]:not([data-app-theme="default"]) input:focus,
html[data-app-theme]:not([data-app-theme="default"]) textarea:focus{
  border-color:var(--theme-btn-line)!important;
  box-shadow:0 0 0 3px var(--theme-accent-soft)!important;
}
/* An input that sits inside a shell must stay invisible — the shell is the
   frame. Without this the login fields drew a second rounded box inside the
   first one, and a third ring on top of that when focused. The focus state
   moves onto the shell where it belongs. */
html[data-app-theme]:not([data-app-theme="default"]) .input-shell input,
html[data-app-theme]:not([data-app-theme="default"]) .input-shell input:hover,
html[data-app-theme]:not([data-app-theme="default"]) .input-shell input:focus,
html[data-app-theme]:not([data-app-theme="default"]) .e2ee-input-row input,
html[data-app-theme]:not([data-app-theme="default"]) .e2ee-input-row input:focus{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  outline:none!important;
}
html[data-app-theme]:not([data-app-theme="default"]) .input-shell:focus-within{
  border-color:var(--theme-btn-line)!important;
  box-shadow:0 0 0 3px var(--theme-accent-soft)!important;
}
html[data-app-theme]:not([data-app-theme="default"]) .setting-row input:checked{background:var(--theme-btn-line)!important}
html[data-app-theme]:not([data-app-theme="default"]) .setting-row input:checked:after{background:var(--theme-btn-ink)!important}

/* ===================================================================== */
/* THE DISCUSSION AREA ON THE BLACK PALETTES                              */
/*                                                                        */
/* The chat surface used to inherit the blue chat-appearance colours even */
/* under Jet Black. On a black palette the whole conversation is built    */
/* from greys instead, deliberately spaced apart so the panel, the        */
/* backdrop, an incoming bubble and your own bubble are four distinct     */
/* steps and the eye can separate them without any colour at all.         */
/* ===================================================================== */
html[data-app-shade="black"]{
  --blk-backdrop:#000000;   /* behind the messages          */
  --blk-strip:#0a0a0a;      /* faint ruling for depth       */
  --blk-panel:#0b0b0b;      /* header, composer             */
  --blk-side:#050505;       /* sidebar                      */
  --blk-hover:#151515;      /* list row hover / active      */
  --blk-theirs:#141414;     /* incoming bubble              */
  --blk-theirs-line:#272727;
  --blk-mine:#242424;       /* your bubble                  */
  --blk-mine-line:#3b3b3b;
  --blk-chip:#101010;       /* date dividers, small chips   */
}
html[data-app-theme="matte-black"]{
  --blk-backdrop:#141414;
  --blk-strip:#1a1a1a;
  --blk-panel:#1a1a1a;
  --blk-side:#121212;
  --blk-hover:#232323;
  --blk-theirs:#1f1f1f;
  --blk-theirs-line:#333333;
  --blk-mine:#303030;
  --blk-mine-line:#484848;
  --blk-chip:#1c1c1c;
}
/* Plain and custom-themed conversations alike. The long selector is there to
   outrank .message-list.custom-chat-appearance, which is what was painting the
   discussion area blue. */
html[data-app-shade="black"][data-app-theme]:not([data-app-theme="default"]) .message-list,
html[data-app-shade="black"] .message-list.custom-chat-appearance{
  background-color:var(--blk-backdrop)!important;
  background-image:repeating-linear-gradient(0deg,transparent,transparent 31px,var(--blk-strip) 32px)!important;
  color:var(--theme-text)!important;
}
html[data-app-shade="black"] .message-list .message-row:not(.mine) .message-bubble,
html[data-app-shade="black"] .message-list.custom-chat-appearance .message-row:not(.mine) .message-bubble{
  background:var(--blk-theirs)!important;
  border:1px solid var(--blk-theirs-line)!important;
  color:var(--theme-text)!important;
}
html[data-app-shade="black"] .message-list .message-row.mine .message-bubble,
html[data-app-shade="black"] .message-list.custom-chat-appearance .message-row.mine .message-bubble{
  background:var(--blk-mine)!important;
  border:1px solid var(--blk-mine-line)!important;
  color:var(--theme-text)!important;
}
html[data-app-shade="black"] .chat-panel,
html[data-app-shade="black"] .chat-header,
html[data-app-shade="black"] .message-composer,
html[data-app-shade="black"] .sidebar-header,
html[data-app-shade="black"] .new-chat-box,
html[data-app-shade="black"] .dashboard-brand{
  background:var(--blk-panel)!important;border-color:var(--theme-line)!important;
}
html[data-app-shade="black"][data-app-theme]:not([data-app-theme="default"]) .sidebar,
html[data-app-shade="black"][data-app-theme]:not([data-app-theme="default"]) .conversation-list{background:var(--blk-side)!important}
html[data-app-shade="black"][data-app-theme]:not([data-app-theme="default"]) .conversation-heading{
  background:var(--blk-side)!important;border-color:var(--theme-line)!important;
}
html[data-app-shade="black"] .conversation-item:hover,
html[data-app-shade="black"] .conversation-item.active{
  background:var(--blk-hover)!important;border-color:var(--theme-line-soft)!important;
}
html[data-app-shade="black"] .conversation-item.active{border-left:3px solid var(--theme-btn-line)!important}
/* The remaining blue in the discussion area came from three places that the
   palette never reached: the navy date chip, the indigo reply quote and the
   blue pinned bar. Each becomes its own step of grey instead. */
html[data-app-shade="black"] .message-date-separator span{
  background:var(--blk-chip)!important;color:var(--theme-muted)!important;
  border-color:var(--theme-line-soft)!important;box-shadow:none!important;
}
html[data-app-shade="black"] .pinned-message-bar{
  background:var(--blk-chip)!important;color:var(--theme-text)!important;border-color:var(--theme-line)!important;
}
html[data-app-shade="black"] .reply-quote{
  background:var(--blk-chip)!important;border-left-color:var(--theme-line-soft)!important;color:var(--theme-text)!important;
}
html[data-app-shade="black"] .message-row.mine .reply-quote{
  background:rgba(0,0,0,.38)!important;border-left-color:var(--blk-mine-line)!important;
}
html[data-app-shade="black"] .reply-preview,
html[data-app-shade="black"] .attachment-preview,
html[data-app-shade="black"] .message-menu,
html[data-app-shade="black"] .clear-menu,
html[data-app-shade="black"] .conversation-menu{
  background:var(--blk-panel)!important;border-color:var(--theme-line-soft)!important;
}
html[data-app-shade="black"] .message-row.selected-message .message-bubble{
  outline:2px solid var(--theme-btn-line)!important;
}
html[data-app-shade="black"] .message-row.selected-message .message-select-check{
  background:var(--theme-btn-line)!important;border-color:var(--theme-btn-line)!important;
}
html[data-app-shade="black"] .message-bubble.action-highlight{
  outline:3px solid var(--theme-accent-soft)!important;
}
html[data-app-shade="black"] .message-time,
html[data-app-shade="black"] .message-status,
html[data-app-shade="black"] .message-status.sent,
html[data-app-shade="black"] .message-status.delivered{color:var(--theme-muted)!important}
html[data-app-shade="black"][data-app-theme]:not([data-app-theme="default"]) .message-status.seen{
  color:#4cb2ff!important;
  background:rgba(76,178,255,.18)!important;
  box-shadow:0 0 0 1px rgba(76,178,255,.42) inset!important;
}

/* ===================================================================== */
/* THEME + BUTTON-COLOUR PICKERS IN SETTINGS                              */
/* ===================================================================== */
.theme-swatch.selected{border-color:var(--theme-btn-line,var(--accent))}
/* The old tick was accent-coloured text on the palette's own name strip, which
   disappeared entirely on Jet Black. This is a solid badge with its contrast
   colour chosen per palette by settings.js, so it always reads. */
.theme-swatch-check{
  position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;
  display:none;place-items:center;font-size:13px;font-weight:900;line-height:1;
  box-shadow:0 2px 9px rgba(0,0,0,.6);
}
.theme-swatch.selected .theme-swatch-check{display:grid}

.accent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;margin-top:4px}
.accent-swatch{
  position:relative;display:flex;align-items:center;gap:9px;padding:9px 10px;
  border:2px solid var(--border);border-radius:13px;background:var(--surface-2);
  color:inherit;font:inherit;font-size:12px;font-weight:700;text-align:left;cursor:pointer;
  transition:border-color .14s ease,transform .14s ease;
}
.accent-swatch:hover{transform:translateY(-2px)}
.accent-swatch.selected{border-color:var(--theme-btn-line,var(--accent))}
.accent-dot{
  width:22px;height:22px;flex:0 0 22px;border-radius:50%;
  border:1px solid rgba(127,127,127,.45);
}
.accent-dot.auto-dot{background:conic-gradient(#c3c7cc,#dda15e,#a7c1ac,#9fb8d0,#c3c7cc)}
.accent-swatch.selected .accent-dot::after{
  content:'✓';display:grid;place-items:center;width:100%;height:100%;
  font-size:12px;font-weight:900;color:var(--accent-tick,#101010);
}
.accent-custom-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.accent-custom-row input[type="color"]{
  width:52px;height:36px;padding:0;border:1px solid var(--border);border-radius:10px;background:transparent;cursor:pointer;
}
.accent-preview-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}