:root {
  --bg-blur:10px; /* background image blur */
  --bg:#0a0a0c; --raised:#111116; --surface:#131318; --surface2:#17171d;
  --border:rgba(255,255,255,0.07); --border-hover:rgba(30,86,224,0.85);
  --text:#f7f7f7; --text-muted:#a3a3ac;
  --accent:#1E56E0; --accent-bright:#4FA9FF; --accent-glow:rgba(30,86,224,0.35);
  --ai-bg:#17171d;
  --font-display:'Space Grotesk','Inter',system-ui,sans-serif;
  --ease:cubic-bezier(0.22, 0.8, 0.28, 1);
}
/* Light theme (body and html both get .light) */
.light {
  --bg:#f4f5f8; --raised:#ffffff; --surface:#ffffff; --surface2:#edeff3;
  --border:rgba(10,10,12,0.09); --border-hover:rgba(30,86,224,0.85);
  --text:#15151a; --text-muted:#46464f;
  --accent-bright:#145dc7; --ai-bg:#edeff3;
}
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--text); display:flex; flex-direction:column; height:100vh; transition:background 0.2s,color 0.2s; }
#auth-screen { flex:1; display:flex; align-items:center; justify-content:center; padding:1rem; }
.auth-box { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:2rem; width:100%; max-width:360px; display:flex; flex-direction:column; gap:1rem; }
.auth-box h1 { font-size:1.4rem; text-align:center; }
.auth-box p { font-size:0.85rem; color:var(--text-muted); text-align:center; }
.auth-box input { padding:0.75rem; border-radius:10px; border:1px solid var(--border); background:var(--surface2); color:var(--text); font-size:1rem; font-family:'Inter',sans-serif; width:100%; }
.auth-box button.primary { padding:0.75rem; border-radius:10px; border:none; background:var(--accent); color:white; font-size:1rem; cursor:url('images/cursor/custom-j-cursor-pointer.png') 6 2, pointer; width:100%; font-family:'Inter',sans-serif; }

.auth-toggle { background:none; border:none; color:var(--accent); cursor:url('images/cursor/custom-j-cursor-pointer.png') 6 2, pointer; font-size:0.9rem; text-align:center; font-family:'Inter',sans-serif; }
.auth-error { font-size:0.85rem; text-align:center; color:#ff6b6d; }
.light .auth-error { color:#c0282a; }
.auth-error.info { color:#2ecc71; }
.light .auth-error.info { color:#1e8449; }
#app { display:none; flex-direction:column; height:100vh; }
header { padding:0.75rem 1rem; background:var(--surface); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); }
.header-title { font-size:1.1rem; font-weight:600; cursor:url('images/cursor/custom-j-cursor.png') 2 2, auto; user-select:none; pointer-events:none; } /* plain text, not clickable */
.header-btns { display:flex; gap:0.5rem; }
.icon-btn {
  background:var(--surface2);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:8px;
  cursor:url('images/cursor/custom-j-cursor-pointer.png') 6 2, pointer;
  font-size:1rem;
  width:34px;
  height:34px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  overflow:hidden;
}

.icon-btn img {
  width:20px;
  height:20px;
  object-fit:contain;
  display:block;
  background:transparent;
}
#chat { flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:0.75rem; }
.msg-wrap { display:flex; flex-direction:column; gap:0.25rem; }
.msg-wrap.user { align-items:flex-end; }
.msg-wrap.ai { align-items:flex-start; }
.msg { max-width:75%; padding:0.75rem 1rem; border-radius:18px; line-height:1.5; }
.user .msg { border-bottom-right-radius:4px; white-space:pre-wrap; overflow-wrap:anywhere; }
.msg img { max-width:100%; border-radius:10px; margin-top:0.5rem; display:block; }
.msg-actions { display:flex; gap:0.4rem; }
.msg-action-btn { background:none; border:none; color:var(--text-muted); cursor:url('images/cursor/custom-j-cursor-pointer.png') 6 2, pointer; font-size:0.8rem; padding:0.2rem 0.4rem; border-radius:6px; }
.msg-action-btn:hover { background:var(--surface2); color:var(--text); }
#input-area { position:relative; display:flex; flex-direction:column; padding:1rem; gap:0.5rem; background:var(--surface); border-top:1px solid var(--border); }
#preview-area { display:none; align-items:center; gap:0.5rem; }
#preview-area img { height:60px; border-radius:8px; border:1px solid var(--border); }
#remove-img { background:var(--surface2); border:1px solid var(--border); color:var(--text); border-radius:50%; width:24px; height:24px; cursor:url('images/cursor/custom-j-cursor-pointer.png') 6 2, pointer; font-size:0.8rem; }
#bottom-row { display:flex; gap:0.5rem; }
textarea { flex:1; padding:0.75rem; border-radius:12px; border:1px solid var(--border); background:var(--surface2); color:var(--text); font-size:1rem; resize:none; height:52px; font-family:'Inter',sans-serif; }
button { padding:0 1.25rem; border-radius:12px; border:none; background:var(--accent); color:white; font-size:1rem; cursor:url('images/cursor/custom-j-cursor-pointer.png') 6 2, pointer; }
button:disabled { opacity:0.5; cursor:url('images/cursor/custom-j-cursor.png') 2 2, auto; }
.tool-btn { background:var(--surface2); border:1px solid var(--border); color:var(--text); font-size:1.2rem; padding:0 0.9rem; border-radius:12px; cursor:url('images/cursor/custom-j-cursor-pointer.png') 6 2, pointer; }

.tool-btn.recording { background:#e03; color:white; border-color:#e03; }
#sidebar { position:fixed; top:0; left:-280px; width:280px; height:100%; background:var(--surface); border-right:1px solid var(--border); z-index:100; transition:left 0.25s; display:flex; flex-direction:column; }
#sidebar.open { left:0; }
#sidebar-header { padding:1rem; font-weight:600; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; gap:0.5rem; }
#clear-all-btn { background:#c0392b; border:none; color:white; border-radius:8px; padding:0.3rem 0.6rem; cursor:url('images/cursor/custom-j-cursor-pointer.png') 6 2, pointer; font-size:0.8rem; white-space:nowrap; }

#sidebar-list { flex:1; overflow-y:auto; padding:0.5rem; }
.history-item { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; }
.history-item-title { flex:1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.35; word-break:break-word; cursor:url('images/cursor/custom-j-cursor-pointer.png') 6 2, pointer; padding:0.6rem 0.4rem; border-radius:8px; font-size:0.9rem; color:var(--text); }
.history-item-title:hover { background:var(--surface2); }
.delete-chat-btn { background:none; border:none; color:#e74c3c; cursor:url('images/cursor/custom-j-cursor-pointer.png') 6 2, pointer; font-size:0.9rem; padding:0.3rem 0.5rem; border-radius:6px; flex-shrink:0; }
.delete-chat-btn:hover { background:#c0392b; color:white; }
#overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:99; }
#overlay.show { display:block; }
/* ============================================================
   Default cursor (jymer1102 branding)
   Why it used to fail in places: this generic rule is the weakest in the file, so any element with its own
   "cursor:" rule (buttons, cards, disabled buttons, the title...) fell back to the plain system cursor.
   Fixes:
    1. every one of those element-specific rules now uses the branded cursor too (see the url(...) values below)
    2. the rule covers <html>, not just <body>, so gaps around the page are covered
    3. any-pointer: fine = any device that has a mouse or trackpad, including laptops with touch screens
    4. children of disabled buttons (the icons) no longer show the pointer hand
    5. the two images are preloaded in index.html so the first hover isn't the system cursor
    6. the games (pacman/, trex/) are separate pages, so they carry the same rule
   ============================================================ */
@media (any-pointer: fine) {
  html, body, body * { cursor:url('images/cursor/custom-j-cursor.png') 2 2, auto; }
  a, a *,
  button, button *,
  input, select, textarea,
  [role="button"], [role="button"] *,
  .icon-btn, .icon-btn * { cursor:url('images/cursor/custom-j-cursor-pointer.png') 6 2, pointer; }
  button:disabled, button:disabled *,
  input:disabled, select:disabled, textarea:disabled { cursor:url('images/cursor/custom-j-cursor.png') 2 2, auto; }
}

.cursor { display:inline-block; width:2px; height:1em; background:var(--text); margin-left:2px; animation:blink 0.7s infinite; vertical-align:text-bottom; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:200; align-items:center; justify-content:center; }
.modal-overlay.open { display:flex; }
.modal-box { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:2rem; width:100%; max-width:380px; display:flex; flex-direction:column; gap:1rem; }
.modal-input { padding:0.75rem; border-radius:10px; border:1px solid var(--border); background:var(--surface2); color:var(--text); font-size:1rem; font-family:Inter,sans-serif; width:100%; }
.modal-btn { padding:0.75rem; border-radius:10px; border:none; font-size:1rem; cursor:url('images/cursor/custom-j-cursor-pointer.png') 6 2, pointer; font-family:Inter,sans-serif; }

/* Markdown & Code Block Additions */
.msg-content-body table { width:100%; min-width:max-content; border-collapse:collapse; margin:0.75rem 0; font-size:0.9rem; }
.msg-content-body th, .msg-content-body td { border:1px solid var(--border); padding:6px 10px; text-align:left; white-space:nowrap; }
.msg-content-body th { background:rgba(255,255,255,0.05); }

/* ============================================================
   SURFACES (solid, no glass) — jymer1102 site style
   ============================================================ */
body {
  background-color:var(--bg)!important;
  background-image:
    radial-gradient(circle at 15% 0%, rgba(30,86,224,0.08), transparent 40%),
    radial-gradient(circle at 85% 20%, rgba(30,86,224,0.05), transparent 35%);
  background-attachment:fixed;
  padding:0; height:100vh; height:100dvh;
}
#app, #auth-screen { height:100vh; height:100dvh; background:transparent; overflow:hidden; }
header, #input-area, #sidebar { background:var(--surface); }
header { border-bottom:1px solid var(--border); }
#input-area { border-top:1px solid var(--border); }
#sidebar { border-right:1px solid var(--border); }
.auth-box, .modal-box {
  background:linear-gradient(160deg, var(--surface), var(--surface2));
  border:1px solid var(--border); border-radius:18px;
  box-shadow:0 16px 40px rgba(0,0,0,0.3);
}
.light .auth-box, .light .modal-box { box-shadow:0 16px 40px rgba(10,10,12,0.1); }
.user .msg {
  background:linear-gradient(160deg, var(--surface), var(--surface2));
  border:1px solid var(--border); color:var(--text);
}
.icon-btn, .tool-btn { background:var(--surface2); border:1px solid var(--border); color:var(--text); }
.history-item-title:hover { background:var(--surface2); }
.glass-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:0.4rem;
  padding:0.55rem 1rem; border-radius:12px; font-size:0.9rem; cursor:url('images/cursor/custom-j-cursor-pointer.png') 6 2, pointer;
  background:var(--surface2); border:1px solid var(--border); color:var(--text);
}
.agent1102-glass-panel { background:transparent; }
::placeholder { color:var(--text-muted); opacity:0.8; }
.light .user .msg { box-shadow:none; }

/* ============================================================
   TEXT BOXES: blue glowing border on hover + while typing
   ============================================================ */
textarea, input:not([type="file"]):not([type="checkbox"]):not([type="radio"]), .modal-input {
  background:var(--raised); color:var(--text);
  border:1px solid var(--border); border-radius:12px; outline:none;
  caret-color:var(--accent-bright);
  transition:border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
textarea:hover, input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):hover, .modal-input:hover {
  border-color:var(--border-hover); box-shadow:0 0 18px var(--accent-glow);
}
textarea:focus, input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):focus, .modal-input:focus {
  border-color:var(--accent-bright); box-shadow:0 0 0 3px var(--accent-glow), 0 0 24px var(--accent-glow);
}

/* ============================================================
   BUTTONS: blue glowing border on hover
   ============================================================ */
button, .glass-btn, .icon-btn, .tool-btn {
  transition:border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease), filter 0.25s var(--ease);
}
button:not(:disabled):not(.auth-toggle):not(.flashcard):not(.cmd-item):hover, .glass-btn:hover {
  border-color:var(--border-hover);
  box-shadow:0 0 0 1px var(--border-hover), 0 0 22px var(--accent-glow);
}
/* filled blue buttons need a brighter ring to show against their own colour */
#send:not(:disabled):hover, .auth-box button.primary:not(:disabled):hover, #profile-save:hover, .study-btn.primary:hover {
  box-shadow:0 0 0 1px var(--accent-bright), 0 0 22px var(--accent-glow);
}
.icon-btn:hover:not(:disabled), .tool-btn:hover:not(:disabled) { color:var(--accent-bright); }
.light #send, .light .auth-box button.primary { color:#fff; }

/* ============================================================
   CARDS: glow that follows the cursor (set by js/glow.js)
   ============================================================ */
.auth-box, .modal-box, .code-block, .chart-block, .study-block, .link-card, .user .msg {
  position:relative; isolation:isolate;
  transition:border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.auth-box::before, .modal-box::before, .code-block::before, .chart-block::before,
.study-block::before, .link-card::before, .user .msg::before {
  content:''; position:absolute; inset:0; border-radius:inherit; z-index:-1; pointer-events:none;
  background:radial-gradient(500px circle at var(--mx,50%) var(--my,50%), var(--accent-glow), transparent 60%);
  opacity:0; transition:opacity 0.35s var(--ease);
}
.auth-box:hover::before, .modal-box:hover::before, .code-block:hover::before, .chart-block:hover::before,
.study-block:hover::before, .link-card:hover::before, .user .msg:hover::before,
.auth-box:focus-within::before, .modal-box:focus-within::before { opacity:1; }
.auth-box:hover, .modal-box:hover, .code-block:hover, .chart-block:hover, .study-block:hover,
.link-card:hover, .user .msg:hover, .auth-box:focus-within, .modal-box:focus-within {
  border-color:var(--border-hover); box-shadow:0 0 25px rgba(30,86,224,0.35);
}
.code-block:hover { border-top-color:var(--lang-color, var(--border-hover)); }

/* Header, footer bar and sidebar get the same cursor-following glow as the cards */
header { position:relative; isolation:isolate; z-index:5; }
#input-area { isolation:isolate; }
header, #input-area, #sidebar { transition:border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); }
header::before, #input-area::before, #sidebar::before {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(500px circle at var(--mx,50%) var(--my,50%), var(--accent-glow), transparent 60%);
  opacity:0; transition:opacity 0.35s var(--ease);
}
header:hover::before, #input-area:hover::before, #sidebar:hover::before { opacity:1; }
header:hover, #input-area:hover, #sidebar:hover { border-color:var(--border-hover); box-shadow:0 0 25px rgba(30,86,224,0.35); }

/* Sidebar title sits a little lower (and clears phone notches) */
#sidebar-header { padding:calc(1.6rem + env(safe-area-inset-top, 0px)) 1rem 1rem; }

/* ============================================================
   CARET GLOW: soft blue halo that follows the typing caret (js/glow.js)
   ============================================================ */
/* The glow is an inline zero-width element inside an invisible overlay copy of the field (see js/glow.js) */
.caret-glow-on { caret-color:transparent !important; }
.caret-overlay {
  position:absolute; pointer-events:none; overflow:hidden; color:transparent;
  z-index:2; margin:0; word-wrap:break-word; overflow-wrap:break-word; background:none; border-style:solid;
}
.caret-overlay-text { color:transparent; min-width:0; }
.caret-overlay-bar {
  display:inline-block; position:relative; width:0; height:1em; vertical-align:text-bottom;
}
.caret-overlay-bar::after {
  content:''; position:absolute; left:-1px; top:-0.1em; width:2px; height:1.2em; border-radius:2px;
  background:var(--accent-bright);
  box-shadow:0 0 6px 1px var(--accent-bright), 0 0 14px 3px var(--accent-glow), 0 0 28px 6px var(--accent-glow);
  animation:caretGlowPulse 1.1s ease-in-out infinite;
}
@keyframes caretGlowPulse { 0%,100% { filter:brightness(1); } 50% { filter:brightness(0.55); } }

/* ============================================================
   TITLE: white fading to blue (dark) / near-black fading to blue (light)
   ============================================================ */
#header-title, .auth-box h1 {
  font-family:var(--font-display); font-weight:700; letter-spacing:-0.02em;
  background:linear-gradient(120deg, #ffffff 0%, #ffffff 45%, var(--accent-bright) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.light #header-title, .light .auth-box h1 {
  background:linear-gradient(120deg, #0a0a0c 0%, #0a0a0c 45%, var(--accent-bright) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* Custom Button Highlighting */
#clear-btn, #clear-btn i, #clear-btn span { color:#ff4d4f!important; }
#clear-all-btn, #profile-delete { color:#fff!important; }
.msg-action-btn.copied, .msg-action-btn.copied i, .toast-success, .toast-success i { color:#2ecc71!important; }

#profile-modal .modal-box { align-items:center; text-align:center; }
#profile-modal .modal-box h2 { display:flex; align-items:center; justify-content:center; gap:0.5rem; width:100%; }

/* Backpack Egg Animation Elements */
#backpack-egg-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.85);
  display:none; align-items:center; justify-content:center;
  z-index:9999; flex-direction:column;
}
#backpack-egg-overlay.active { display:flex; }
#backpack-egg-wrap { font-size:120px; line-height:1; transform-origin:center; filter:drop-shadow(0 0 30px rgba(255,200,0,0.5)); }
#backpack-egg-wrap.spinning { animation:backpackSpinZoom 1.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
@keyframes backpackSpinZoom {
  0%   { transform:scale(0.4) rotate(0deg); opacity:0; }
  30%  { transform:scale(1) rotate(360deg); opacity:1; }
  80%  { transform:scale(1.6) rotate(900deg); }
  100% { transform:scale(3) rotate(1080deg); opacity:0; }
}
#backpack-egg-label {
  color:#fff; font-family:monospace; font-size:18px;
  letter-spacing:4px; text-transform:uppercase;
  opacity:0; transition:opacity 0.4s; margin-top:16px;
  text-shadow:0 0 20px rgba(255,200,0,0.9);
}
#backpack-egg-label.visible { opacity:1; }
#backpack-egg-canvas { position:fixed; inset:0; pointer-events:none; z-index:9998; }
/* Glass-styled chat tables */
.msg-content-body table, .chat-table {
  width: 100%;
  min-width: max-content;
  border-collapse: collapse;
  margin: 0.75rem 0;
  font-size: 0.9rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  overflow: hidden;
}

.msg-content-body th, .msg-content-body td, 
.chat-table th, .chat-table td {
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 8px 12px;
  text-align: left;
  color: inherit;
  white-space: nowrap;
}

.msg-content-body th, .chat-table th {
  background: rgba(255, 255, 255, 0.08);
  font-weight: 600;
}

/* ============================================================
   AI replies: no bubble, just text on the page
   ============================================================ */
.msg-wrap.ai { align-items:stretch; }
.ai-text { width:100%; max-width:100%; padding:0.15rem 0.25rem; line-height:1.65; color:var(--text); overflow-wrap:anywhere; }
.ai-text.thinking { color:var(--text-muted); display:flex; align-items:center; gap:0.5rem; }

.msg-actions { display:flex; gap:0.35rem; padding:0 0.15rem; }
.msg-action-btn { min-width:30px; height:28px; display:inline-flex; align-items:center; justify-content:center; }
.msg-action-btn.speaking, .msg-action-btn.speaking i { color:#4f8cff!important; }

/* Markdown typography (the global reset removes default margins) */
.ai-text > *:first-child { margin-top:0; }
.ai-text > *:last-child { margin-bottom:0; }
.ai-text p { margin:0 0 0.75rem; }
.ai-text h1, .ai-text h2, .ai-text h3, .ai-text h4 { margin:1.1rem 0 0.5rem; line-height:1.3; font-weight:600; }
.ai-text h1 { font-size:1.4rem; } .ai-text h2 { font-size:1.2rem; } .ai-text h3 { font-size:1.05rem; }
.ai-text ul, .ai-text ol { margin:0.25rem 0 0.75rem; padding-left:1.5rem; }
.ai-text li { margin:0.2rem 0; }
.ai-text blockquote { margin:0.75rem 0; padding:0.25rem 0 0.25rem 0.9rem; border-left:3px solid rgba(127,127,127,0.5); color:var(--text-muted); }
.ai-text hr { border:none; border-top:1px solid rgba(127,127,127,0.35); margin:1rem 0; }
.ai-text a { color:#6ea8ff; }
.light .ai-text a { color:#1a5fd0; }
.ai-text :not(pre) > code { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:0.88em; padding:0.12em 0.4em; border-radius:6px; background:rgba(127,127,127,0.22); }

/* Tables: scroll horizontally instead of squeezing/wrapping words on narrow screens */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0.75rem 0; border-radius:12px; max-width:100%; }
.table-wrap table { margin:0; }
.light .msg-content-body th, .light .msg-content-body td { border-color:rgba(0,0,0,0.15); }
.light .msg-content-body th { background:rgba(0,0,0,0.06); }

/* ============================================================
   Code boxes (copy / download just the code)
   ============================================================ */
.code-block { margin:0.75rem 0; border-radius:12px; overflow:hidden; background:#0c0c0e; border:1px solid rgba(255,255,255,0.14); border-top:2px solid var(--lang-color, rgba(255,255,255,0.14)); text-align:left; }
.code-header { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; padding:0.35rem 0.5rem 0.35rem 0.9rem; background:rgba(255,255,255,0.07); border-bottom:1px solid rgba(255,255,255,0.1); color:#cfcfcf; }
.code-lang-wrap { display:inline-flex; align-items:center; gap:0.4rem; min-width:0; }
.code-lang-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; box-shadow:0 0 6px currentColor; }
.code-lang { font:600 0.75rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:0.03em; text-transform:uppercase; }
.code-actions { display:flex; gap:0.35rem; }
.code-block pre { margin:0; overflow-x:auto; background:transparent; }
.code-block pre code { display:block; padding:0.9rem 1rem; font:0.85rem/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:#e6e6e6; white-space:pre; background:none; }
.code-preview-frame { display:block; width:100%; height:420px; border:none; background:#fff; }

/* Small buttons used in code boxes and chart cards (win over the global glass button rules) */
.code-btn, .light .code-btn {
  padding:0.25rem 0.6rem!important; font-size:0.78rem!important; border-radius:8px!important;
  background:rgba(127,127,127,0.18)!important; color:inherit!important;
  border:1px solid rgba(127,127,127,0.28)!important; box-shadow:none!important;
  display:inline-flex; align-items:center; gap:0.35rem; cursor:url('images/cursor/custom-j-cursor-pointer.png') 6 2, pointer; line-height:1.2;
}
.code-btn:hover, .light .code-btn:hover { background:rgba(127,127,127,0.32)!important; }
.code-btn.copied, .code-btn.copied i { color:#2ecc71!important; }

/* ============================================================
   Charts (pie, donut, bar, line, radar)
   ============================================================ */
.chart-block { margin:0.75rem 0; padding:0.55rem 0.8rem 0.8rem; border-radius:16px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.14); }
.light .chart-block { background:rgba(0,0,0,0.03); border-color:rgba(0,0,0,0.1); }
.chart-toolbar { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; margin-bottom:0.35rem; color:var(--text); }
.chart-kind { font-size:0.75rem; letter-spacing:0.03em; color:var(--text-muted); }
.chart-canvas-wrap { position:relative; height:400px; max-width:100%; }
.chart-canvas-wrap canvas { width:100%!important; height:100%!important; }
@media (max-width:600px) { .chart-canvas-wrap { height:340px; } }
.chart-error-msg { margin:0.5rem 0 0; padding:0.6rem 0.8rem; border-radius:10px; background:rgba(255,77,79,0.12); color:#ff6b6d; font-size:0.9rem; }
.light .chart-error-msg { color:#c0282a; }

/* ============================================================
   Attachments (composer preview + chips in sent messages)
   ============================================================ */
#preview-area { width:100%; }
#attach-list { display:flex; flex-wrap:wrap; gap:0.5rem; align-items:center; width:100%; }
.attach-chip { position:relative; display:inline-flex; align-items:center; gap:0.45rem; padding:0.35rem 0.4rem 0.35rem 0.7rem; border-radius:12px; font-size:0.85rem; background:rgba(127,127,127,0.16); border:1px solid rgba(127,127,127,0.28); max-width:100%; }
.attach-chip.attach-image { padding:0; border-radius:10px; }
.attach-chip.attach-image img { height:56px; width:auto; border-radius:10px; display:block; border:none; }
.attach-name { max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.attach-meta { color:var(--text-muted); font-size:0.75rem; white-space:nowrap; }
.attach-x, .light .attach-x { width:22px!important; height:22px!important; padding:0!important; border-radius:50%!important; font-size:0.7rem!important; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; background:rgba(127,127,127,0.3)!important; box-shadow:none!important; border:none!important; }
.attach-chip.attach-image .attach-x { position:absolute; top:-7px; right:-7px; background:#555!important; color:#fff!important; }

.msg-files { display:flex; flex-wrap:wrap; gap:0.35rem; margin-bottom:0.4rem; }
.msg-file { display:inline-flex; align-items:center; gap:0.35rem; padding:0.25rem 0.6rem; border-radius:10px; font-size:0.82rem; background:rgba(127,127,127,0.22); }
.msg-file-meta { opacity:0.7; }
.msg img { max-height:280px; width:auto; }
.msg-images { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.5rem; }
.msg-images img { margin-top:0; }

/* ============================================================
   Generated images
   ============================================================ */
.image-card { margin:0.75rem 0; max-width:440px; }
.image-frame { position:relative; border-radius:16px; overflow:hidden; background:rgba(127,127,127,0.14); border:1px solid rgba(127,127,127,0.25); }
.image-frame img { display:block; width:100%; height:auto; }
.image-frame.loading, .image-frame.failed { aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; }
.image-frame.loading img, .image-frame.failed img { display:none; }
.image-status { display:flex; flex-direction:column; align-items:center; gap:0.6rem; padding:1.2rem; text-align:center; font-size:0.9rem; color:var(--text-muted); }
.image-frame:not(.loading):not(.failed) .image-status { display:none; }
.image-card figcaption { margin-top:0.45rem; font-size:0.82rem; color:var(--text-muted); font-style:italic; }
.image-actions { display:none; margin-top:0.4rem; }
.image-card.ready .image-actions { display:flex; }

/* ============================================================
   Link preview cards
   ============================================================ */
.link-card { display:flex; align-items:center; gap:0.7rem; margin:0.5rem 0; padding:0.6rem 0.7rem; border-radius:14px; background:rgba(127,127,127,0.1); border:1px solid rgba(127,127,127,0.22); max-width:440px; }
.link-card-icon { flex-shrink:0; width:34px; height:34px; border-radius:10px; background:rgba(127,127,127,0.2); display:flex; align-items:center; justify-content:center; font-size:1rem; color:var(--text-muted); }
.link-card-body { flex:1; min-width:0; }
.link-card-title { font-size:0.9rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.link-card-host { font-size:0.78rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.link-card-open { flex-shrink:0; }

/* ============================================================
   Full-width header + footer bars (light-mode dividers, phone safe areas)
   ============================================================ */

/* Keep bars clear of phone notches / home indicator (needs viewport-fit=cover in index.html) */
header { padding:max(0.75rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) 0.75rem max(1rem, env(safe-area-inset-left)); }
#input-area { padding:1rem max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
#chat { padding-left:max(1rem, env(safe-area-inset-left)); padding-right:max(1rem, env(safe-area-inset-right)); }

/* ============================================================
   Header: the title sits on its own line above the buttons (all screen sizes)
   Row 1: title, centered. Its click box is only as wide as the title itself
          (justify-self:center shrinks it to the letters).
   Row 2: history/new-chat on the left, everything else on the right.
   Easter-egg buttons are added to the right group, so it wraps if a tiny
   screen can't fit them all.
   ============================================================ */
header {
  display:grid; grid-template-columns:auto 1fr; grid-template-areas:"title title" "left right";
  align-items:center; row-gap:0.4rem; column-gap:0.5rem;
}
header .header-title { grid-area:title; justify-self:center; max-width:100%; white-space:nowrap; }
header > div:not(.header-btns) { grid-area:left; }
header .header-btns { grid-area:right; justify-self:end; flex-wrap:wrap; justify-content:flex-end; }

@media (max-width:480px) {
  header { column-gap:0.4rem; }
  header .icon-btn { width:30px!important; height:30px!important; }
  header .header-btns, header > div:not(.header-btns) { gap:0.35rem!important; }
}

/* ============================================================
   Math (KaTeX): \( ... \) inline, $$ ... $$ or \[ ... \] block
   ============================================================ */
.math-inline { color:inherit; }
.math-display { display:block; margin:0.9rem 0; overflow-x:auto; overflow-y:hidden; padding:0.15rem 0; color:inherit; }
.math-display .katex-display { margin:0; }
.math-error { color:#ff6b6d; cursor:url('images/cursor/custom-j-cursor.png') 2 2, auto; border-bottom:1px dotted currentColor; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:0.9em; }
.light .math-error { color:#c0282a; }

/* ============================================================
   Background image easter egg (sits behind everything, blurred)
   ============================================================ */
#bg-layer {
  display:none; position:fixed; inset:-24px; z-index:-1; pointer-events:none;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  filter:blur(var(--bg-blur)); -webkit-filter:blur(var(--bg-blur));
  transform:translateZ(0);
}

/* ============================================================
   Link preview cards (image on top, like a message link preview)
   ============================================================ */
.link-cards { display:flex; flex-direction:column; gap:0.6rem; margin:0.6rem 0; }
.link-card { display:flex; flex-direction:column; align-items:stretch; gap:0; padding:0; overflow:hidden; margin:0; max-width:440px; width:100%; border-radius:16px; }
.link-card-image { display:none; width:100%; aspect-ratio:1.91/1; background:rgba(127,127,127,0.14) center/cover no-repeat; border-bottom:1px solid rgba(127,127,127,0.22); }
.link-card.has-image .link-card-image { display:block; }
.link-card-row { display:flex; align-items:center; gap:0.7rem; padding:0.6rem 0.7rem; }
.link-card-desc { display:none; font-size:0.8rem; color:var(--text-muted); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.link-card-desc:empty { display:none; }
.link-card.loading .link-card-title { opacity:0.6; }

/* ============================================================
   "Try again" / regenerate button + error replies
   ============================================================ */
.msg-action-btn.retry-btn.spinning i { animation:fa-spin 0.8s linear infinite; }

/* ============================================================
   Slash-command popup (shows above the message box when you type "/")
   ============================================================ */
#cmd-menu {
  position:absolute; left:1rem; right:1rem; bottom:100%; margin-bottom:0.4rem; z-index:60;
  max-width:560px; max-height:min(340px,50vh); overflow-y:auto; flex-direction:column; gap:2px; padding:0.35rem;
  background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,0.35);
}
.cmd-item { display:flex; align-items:center; gap:0.7rem; width:100%; padding:0.5rem 0.6rem; border:none; border-radius:10px; background:transparent; color:var(--text); text-align:left; cursor:url('images/cursor/custom-j-cursor-pointer.png') 6 2, pointer; font-family:'Inter',sans-serif; }
.cmd-item.active, .cmd-item:hover { background:var(--surface2); }
.cmd-icon { width:1.6rem; text-align:center; color:var(--accent); font-size:1rem; flex-shrink:0; }
.cmd-text { display:flex; flex-direction:column; min-width:0; }
.cmd-top { display:flex; gap:0.5rem; align-items:baseline; flex-wrap:wrap; }
.cmd-name { font-weight:600; font-size:0.95rem; }
.cmd-args { font-size:0.8rem; color:var(--text-muted); font-family:ui-monospace,Menlo,Consolas,monospace; }
.cmd-desc { font-size:0.8rem; color:var(--text-muted); }

/* ============================================================
   Study widgets: quiz + flashcards
   ============================================================ */
.study-block { margin:0.75rem 0; padding:0.8rem 0.9rem 1rem; border-radius:16px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.14); max-width:640px; }
.light .study-block { background:rgba(0,0,0,0.03); border-color:rgba(0,0,0,0.1); }
.study-error { color:var(--text-muted); font-size:0.9rem; }
.study-head { display:flex; justify-content:space-between; align-items:center; gap:0.75rem; margin-bottom:0.5rem; }
.study-kind { font-weight:600; font-size:0.95rem; }
.study-kind i { color:var(--accent); margin-right:0.2rem; }
.study-progress { font-size:0.8rem; color:var(--text-muted); white-space:nowrap; }
.study-bar { height:5px; border-radius:99px; background:rgba(127,127,127,0.25); overflow:hidden; margin-bottom:0.9rem; }
.study-bar-fill { height:100%; width:0; background:var(--accent); border-radius:99px; transition:width 0.3s ease; }
.study-actions { display:flex; gap:0.5rem; flex-wrap:wrap; justify-content:center; margin-top:0.8rem; }
.study-btn { display:inline-flex; align-items:center; gap:0.4rem; padding:0.5rem 0.9rem; border-radius:10px; border:1px solid var(--border); background:var(--surface2); color:var(--text); cursor:url('images/cursor/custom-j-cursor-pointer.png') 6 2, pointer; font-size:0.9rem; font-family:'Inter',sans-serif; }
.study-btn:hover { filter:brightness(1.12); }
.study-btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }

.quiz-question { font-size:1.05rem; font-weight:500; line-height:1.45; margin-bottom:0.8rem; }
.quiz-options { display:flex; flex-direction:column; gap:0.5rem; }
.quiz-option { display:flex; align-items:flex-start; gap:0.7rem; width:100%; padding:0.65rem 0.75rem; border-radius:12px; border:1px solid var(--border); background:var(--surface2); color:var(--text); text-align:left; cursor:url('images/cursor/custom-j-cursor-pointer.png') 6 2, pointer; font-size:0.95rem; font-family:'Inter',sans-serif; line-height:1.4; }
.quiz-option:not(:disabled):hover { border-color:var(--accent); }
.quiz-option:disabled { cursor:url('images/cursor/custom-j-cursor.png') 2 2, auto; }
.quiz-letter { flex-shrink:0; width:1.5rem; height:1.5rem; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:0.78rem; font-weight:600; background:rgba(127,127,127,0.25); }
.quiz-option.correct { border-color:#2ecc71; background:rgba(46,204,113,0.16); }
.quiz-option.correct .quiz-letter { background:#2ecc71; color:#fff; }
.quiz-option.wrong { border-color:#e74c3c; background:rgba(231,76,60,0.16); }
.quiz-option.wrong .quiz-letter { background:#e74c3c; color:#fff; }
.quiz-feedback { margin-top:0.7rem; }
.quiz-verdict { font-weight:600; margin-bottom:0.25rem; }
.quiz-verdict.ok { color:#2ecc71; } .quiz-verdict.bad { color:#e74c3c; }
.quiz-explain { font-size:0.9rem; color:var(--text-muted); line-height:1.5; }
.quiz-block .study-btn.primary { margin-top:0.8rem; }
.quiz-result { text-align:center; padding:0.6rem 0 0.2rem; }
.quiz-score { font-size:2.2rem; font-weight:700; }
.quiz-score-label { color:var(--text-muted); margin-top:0.2rem; }

.flashcard { display:block; width:100%; height:200px; padding:0; border:none; background:none; perspective:1000px; cursor:url('images/cursor/custom-j-cursor-pointer.png') 6 2, pointer; }
.flashcard-inner { position:relative; width:100%; height:100%; transition:transform 0.45s; transform-style:preserve-3d; }
.flashcard.flipped .flashcard-inner { transform:rotateY(180deg); }
.flashcard-face { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.5rem; padding:1rem 1.2rem; text-align:center; border-radius:14px; border:1px solid var(--border); background:var(--surface2); color:var(--text); backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:auto; }
.flashcard-face.back { transform:rotateY(180deg); border-color:var(--accent); }
.flashcard-tag { position:absolute; top:0.55rem; left:0.8rem; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); }
.flashcard-text { font-size:1.1rem; line-height:1.45; font-family:'Inter',sans-serif; }
.flashcard-hint { position:absolute; bottom:0.5rem; font-size:0.72rem; color:var(--text-muted); }

@media (prefers-reduced-motion: reduce) { .flashcard-inner, .study-bar-fill { transition:none; } }

/* ============================================================
   "/" popup + study-button popup: fully solid (no glass / transparency)
   The global glass rules use !important, so these must too.
   ============================================================ */
#cmd-menu {
  background:#1c1c1e!important; opacity:1!important;
  backdrop-filter:none!important; -webkit-backdrop-filter:none!important;
  border:1px solid #3a3a3c!important; box-shadow:0 12px 32px rgba(0,0,0,0.55)!important;
}
#cmd-menu .cmd-item {
  background:transparent!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important;
  border:none!important; box-shadow:none!important; transform:none!important;
  color:#f0f0f0!important; border-radius:10px!important;
}
#cmd-menu .cmd-item.active, #cmd-menu .cmd-item:hover { background:#2c2c2e!important; }
#cmd-menu .cmd-args, #cmd-menu .cmd-desc { color:#9a9aa0!important; }
.light #cmd-menu { background:#ffffff!important; border-color:#d4d4d8!important; box-shadow:0 12px 32px rgba(0,0,0,0.18)!important; }
.light #cmd-menu .cmd-item { color:#111111!important; }
.light #cmd-menu .cmd-item.active, .light #cmd-menu .cmd-item:hover { background:#efeff1!important; }
.light #cmd-menu .cmd-args, .light #cmd-menu .cmd-desc { color:#666!important; }

/* ============================================================
   Math visuals (graphs, number lines, geometry, fractions)
   ============================================================ */
.mathviz-block { color:var(--text); max-width:680px; --mv-halo:rgba(15,15,15,0.85); --mv-legend:rgba(15,15,15,0.75); --mv-hole:#1a1a1a; }
.light .mathviz-block { --mv-halo:rgba(255,255,255,0.9); --mv-legend:rgba(255,255,255,0.85); --mv-hole:#ffffff; }
.mathviz-svg svg { display:block; width:100%; height:auto; max-width:680px; }
.mv-inline { color:var(--text); margin:0 0 0.8rem; --mv-halo:rgba(15,15,15,0.85); --mv-legend:rgba(15,15,15,0.75); --mv-hole:#1a1a1a; }
.light .mv-inline { --mv-halo:rgba(255,255,255,0.9); --mv-legend:rgba(255,255,255,0.85); --mv-hole:#ffffff; }
.mv-inline svg { max-height:260px; margin:0 auto; }
.flashcard-face .mv-inline svg { max-height:150px; }
.flashcard.has-visual { height:330px; }

/* Small buttons (code boxes, attachments) also get the blue hover glow; their base rules use !important */
.code-btn:hover, .light .code-btn:hover {
  border-color:var(--border-hover)!important;
  box-shadow:0 0 0 1px var(--border-hover), 0 0 16px var(--accent-glow)!important;
}


/* ============================================================
   PASSWORD FIELDS: show / hide eye button + sign-in form layout
   ============================================================ */
.auth-form { display:flex; flex-direction:column; gap:1rem; }
.auth-stay { display:flex; align-items:center; gap:0.5rem; font-size:0.85rem; color:var(--text-muted); cursor:pointer; user-select:none; }
.auth-box .auth-stay input { width:auto; padding:0; margin:0; accent-color:var(--accent); cursor:pointer; }
.pw-wrap { position:relative; display:flex; width:100%; }
.auth-box .pw-wrap input, .modal-box .pw-wrap input { padding-right:2.9rem; }
.pw-toggle {
  position:absolute; top:50%; right:0.4rem; transform:translateY(-50%);
  width:2.2rem; height:2.2rem; display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; border-radius:8px; padding:0;
  color:var(--text-muted); font-size:1rem; cursor:url('images/cursor/custom-j-cursor-pointer.png') 6 2, pointer;
}
.pw-toggle:hover, .pw-toggle:focus-visible { color:var(--accent-bright); outline:none; box-shadow:none; }

/* ============================================================
   Message box: ONE wide box across the whole bottom bar, with attach, mic and send inside it.
   The box itself carries the border and the hover/typing glow; the text area inside is see-through.
   ============================================================ */
#bottom-row {
  display:flex; align-items:center; gap:0.25rem;
  width:100%; padding:0.35rem;
  background:var(--raised); border:1px solid var(--border); border-radius:18px;
  transition:border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
#bottom-row:hover { border-color:var(--border-hover); box-shadow:0 0 18px var(--accent-glow); }
#bottom-row:focus-within { border-color:var(--accent-bright); box-shadow:0 0 0 3px var(--accent-glow), 0 0 24px var(--accent-glow); }

#bottom-row #input,
#bottom-row #input:hover,
#bottom-row #input:focus {
  flex:1; min-width:0; height:42px; padding:0.6rem 0.5rem; line-height:1.4;
  background:transparent; border:none; border-radius:0; box-shadow:none; outline:none;
}

#bottom-row .tool-btn {
  flex:none; width:40px; height:40px; padding:0; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent; color:var(--text-muted); font-size:1.1rem;
}
#bottom-row .tool-btn:hover:not(:disabled) { background:var(--surface2); border-color:transparent; box-shadow:none; color:var(--accent-bright); }
#bottom-row .tool-btn.recording, #bottom-row .tool-btn.recording:hover:not(:disabled) { background:#e03; border-color:#e03; color:#fff; }

#bottom-row #send { flex:none; height:40px; padding:0 1.1rem; border-radius:14px; font-weight:600; }

/* Small phones: slimmer buttons inside the box so the text area keeps room to type */
@media (max-width:480px) {
  #bottom-row { padding:0.3rem; gap:0.15rem; }
  #bottom-row .tool-btn { width:36px; height:36px; font-size:1rem; }
  #bottom-row #send { height:36px; padding:0 0.8rem; font-size:0.95rem; }
  #bottom-row #input { padding-left:0.4rem; padding-right:0.4rem; }
}

/* Send button: dim and calm when there is nothing to send, lit up once there is (js/sendstate.js adds .send-ready) */
#bottom-row #send { transition:background 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease), opacity 0.25s var(--ease); }
#bottom-row #send:not(.send-ready),
#bottom-row #send:not(.send-ready):hover {
  background:var(--surface2); color:var(--text-muted); border-color:transparent; box-shadow:none; opacity:0.7;
  cursor:url('images/cursor/custom-j-cursor.png') 2 2, auto;
}
#bottom-row #send.send-ready { background:var(--accent); color:#fff; box-shadow:0 0 16px var(--accent-glow); }

/* ============================================================
   TOUCH SCREENS: the card / header / footer / sidebar glow follows your finger (js/glow.js sets data-touch-glow)
   ============================================================ */
/* A phone has no hover: a tap leaves the browser's "hover" stuck on, which showed the glow frozen in the middle of
   the card. On touch-only devices that stuck hover glow is switched off; the finger-following one below replaces it. */
@media (hover: none) {
  .auth-box:hover::before, .modal-box:hover::before, .code-block:hover::before, .chart-block:hover::before,
  .study-block:hover::before, .link-card:hover::before, .user .msg:hover::before,
  header:hover::before, #input-area:hover::before, #sidebar:hover::before { opacity:0; }
}
.auth-box[data-touch-glow]::before, .modal-box[data-touch-glow]::before, .code-block[data-touch-glow]::before,
.chart-block[data-touch-glow]::before, .study-block[data-touch-glow]::before, .link-card[data-touch-glow]::before,
.user .msg[data-touch-glow]::before,
header[data-touch-glow]::before, #input-area[data-touch-glow]::before, #sidebar[data-touch-glow]::before { opacity:1; }
.auth-box[data-touch-glow], .modal-box[data-touch-glow], .code-block[data-touch-glow], .chart-block[data-touch-glow],
.study-block[data-touch-glow], .link-card[data-touch-glow], .user .msg[data-touch-glow],
header[data-touch-glow], #input-area[data-touch-glow], #sidebar[data-touch-glow] {
  border-color:var(--border-hover); box-shadow:0 0 25px rgba(30,86,224,0.35);
}

/* Rename chat (pencil in the sidebar + the inline name box) */
.rename-chat-btn { background:none; border:none; color:var(--text-muted); cursor:url('images/cursor/custom-j-cursor-pointer.png') 6 2, pointer; font-size:0.85rem; padding:0.3rem 0.5rem; border-radius:6px; flex-shrink:0; }
.rename-chat-btn:hover { background:var(--surface2); color:var(--accent-bright); }
.history-item-input {
  flex:1; min-width:0; padding:0.5rem 0.6rem; border-radius:8px; font-size:0.9rem;
  background:var(--raised); color:var(--text); border:1px solid var(--accent-bright); outline:none;
  box-shadow:0 0 0 3px var(--accent-glow);
}
.history-item.renaming .rename-chat-btn, .history-item.renaming .delete-chat-btn { display:none; }

/* Long chat names: clamp an inner element to 2 lines. (Clamping the padded element itself let a sliver of a 3rd line
   show through the padding.) */
.history-item-title { display:block; }
.history-item-title-text { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.35; word-break:break-word; }

/* Shown in the sidebar while the AI is writing a chat's title */
.history-item-naming { flex:1; padding:0.6rem 0.4rem; font-size:0.9rem; font-style:italic; color:var(--text-muted); animation:namingPulse 1.2s ease-in-out infinite; }
@keyframes namingPulse { 0%, 100% { opacity:0.45; } 50% { opacity:1; } }
@media (prefers-reduced-motion: reduce) { .history-item-naming { animation:none; } }