/* ==========================================================================
   Minimal dashboard skin (loaded last; scoped to body.tg-min by
   js/minimal-ui.js so it can be switched off in one place).

   Direction: the conversation is the interface. Answers sit on the page as
   plain text (no card), the student's message is a quiet neutral bubble, and
   everything secondary — subject, chapter, goal, model — is a small pill
   that stays out of the way until it is needed. One accent colour, used
   sparingly (send button, active states). Inter for UI and answers.
   ========================================================================== */

body.tg-min {
  --m-bg: #ffffff;
  --m-surface: #f0f4f9;
  --m-surface-2: #e9eef6;
  --m-text: #1f1f1f;
  --m-muted: #5f6368;
  --m-faint: rgba(31, 31, 31, 0.08);
  --m-accent: #0f9f6e;
  --m-accent-soft: rgba(15, 159, 110, 0.12);
  --m-mark: rgba(15, 159, 110, 0.16);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Cambria Math', 'Segoe UI Symbol', 'Noto Sans Math', 'STIX Two Math', sans-serif !important;
  background: var(--m-bg) !important;
  color: var(--m-text);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
}
body.tg-min[data-theme="dark"] {
  --m-bg: #131314;
  --m-surface: #1e1f20;
  --m-surface-2: #282a2c;
  --m-text: #e3e3e3;
  --m-muted: #9aa0a6;
  --m-faint: rgba(255, 255, 255, 0.08);
  --m-accent: #34d399;
  --m-accent-soft: rgba(52, 211, 153, 0.12);
  --m-mark: rgba(52, 211, 153, 0.32);
}
body.tg-min button,
body.tg-min input,
body.tg-min textarea,
body.tg-min select { font-family: inherit !important; }

/* ── Header: borderless, same colour as the page ───────────────────────── */
body.tg-min .navbar {
  background: var(--m-bg) !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 10px 16px !important;
}
body.tg-min .logo-img { height: 22px !important; width: auto !important; }
/* Chat history lives in the menu now (see minimal-ui.js) */
body.tg-min .nav-tooltip-wrap[data-tooltip="Chat History"] { display: none !important; }
body.tg-min .new-chat-nav-btn,
body.tg-min .hamburger {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--m-muted) !important;
}
body.tg-min .new-chat-nav-btn:hover { background: var(--m-faint) !important; color: var(--m-text) !important; }
body.tg-min .hamburger span { background: var(--m-muted) !important; }
body.tg-min .profile-trigger {
  width: 30px !important; height: 30px !important;
  font-size: 0.72rem !important; font-weight: 600 !important;
  box-shadow: none !important; border: none !important;
}
/* Sparks: a quiet balance, not a gold button */
body.tg-min .spark-pill {
  background: transparent !important;
  border: 1px solid var(--m-faint) !important;
  box-shadow: none !important;
  color: var(--m-muted) !important;
  font-weight: 500 !important;
  font-size: 0.8rem !important;
  padding: 4px 10px !important;
  height: 30px !important;
  transform: none !important;
  text-shadow: none !important;
}
body.tg-min .spark-pill:hover { background: var(--m-faint) !important; color: var(--m-text) !important; }
body.tg-min .spark-pill .spark-icon { filter: none !important; font-size: 12px !important; }

/* ── Subject / chapter: a slim row of pills, no card ───────────────────── */
body.tg-min .ai-controls {
  background: linear-gradient(var(--m-bg) 70%, transparent) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  padding: 4px 12px 10px !important;
  max-width: 760px !important;
}
body.tg-min .ai-control {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  gap: 0 !important;
}
body.tg-min .ai-control label { display: none !important; }
body.tg-min .custom-dropdown-trigger,
body.tg-min .ai-control input {
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 1px solid var(--m-faint) !important;
  color: var(--m-text) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
body.tg-min .custom-dropdown-trigger { gap: 6px !important; min-width: 0 !important; }
body.tg-min .custom-dropdown-trigger:hover,
body.tg-min .ai-control input:hover { background: var(--m-faint) !important; }
body.tg-min .ai-control input { width: 190px !important; }
body.tg-min .ai-control input::placeholder { color: var(--m-muted) !important; opacity: 1; }
body.tg-min .ai-control input:focus { outline: none !important; border-color: var(--m-accent) !important; }
body.tg-min .custom-dropdown-menu {
  background: var(--m-surface) !important;
  border: 1px solid var(--m-faint) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18) !important;
  min-width: 180px !important;
}
body.tg-min .custom-dropdown-option { border-radius: 10px !important; font-size: 0.86rem !important; }
body.tg-min .custom-dropdown-option.selected { background: var(--m-accent-soft) !important; color: var(--m-text) !important; }

/* ── Messages ──────────────────────────────────────────────────────────── */
body.tg-min .free-chat-window { max-width: 760px !important; margin: 0 auto !important; }
body.tg-min .bot .message-bubble {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 2px 2px !important;
  max-width: 100% !important;
  color: var(--m-text) !important;
  font-size: 0.98rem !important;
  line-height: 1.75 !important;
  letter-spacing: -0.003em;
}
body.tg-min .user .message-bubble {
  background: var(--m-surface-2) !important;
  color: var(--m-text) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 22px 22px 6px 22px !important;
  padding: 10px 16px !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
  max-width: min(80%, 560px) !important;
}
/* Highlights: a soft marker under key lines instead of loud green boxes */
body.tg-min mark.ai-highlight {
  background-color: transparent !important;
  background-image: linear-gradient(transparent 58%, var(--m-mark) 58%) !important;
  background-repeat: no-repeat; background-size: 100% 100%;
  color: inherit !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 1px !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
}

/* Dark mode: a stronger marker that reaches a little higher behind the words */
body.tg-min[data-theme="dark"] mark.ai-highlight {
  background-image: linear-gradient(transparent 48%, var(--m-mark) 48%) !important;
}

/* Answer actions: present but quiet */
body.tg-min .msg-actions { gap: 2px !important; margin-top: 6px !important; }
body.tg-min .msg-action-btn {
  opacity: 0.55;
  background: transparent !important;
  border: none !important;
  transition: opacity 0.15s, background 0.15s;
}
body.tg-min .msg-action-btn:hover { opacity: 1; background: var(--m-faint) !important; }
body.tg-min .tg-followup-chip {
  background: transparent !important;
  border: 1px solid var(--m-faint) !important;
  color: var(--m-muted) !important;
  font-weight: 500 !important;
}
body.tg-min .tg-followup-chip:hover {
  border-color: var(--m-accent) !important;
  color: var(--m-text) !important;
  background: var(--m-accent-soft) !important;
}
body.tg-min .tg-sources { color: var(--m-muted) !important; opacity: 0.85; }

/* ── Composer ──────────────────────────────────────────────────────────── */
body.tg-min .free-input-bar {
  background: var(--m-surface) !important;
  border: 1px solid transparent !important;
  border-radius: 28px !important;
  box-shadow: none !important;
}
body.tg-min .free-input-bar:focus-within {
  border-color: var(--m-faint) !important;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.06) !important;
}
body.tg-min .free-input-bar textarea { color: var(--m-text) !important; font-size: 0.98rem !important; }
body.tg-min .free-input-bar textarea::placeholder { color: var(--m-muted) !important; }
/* The + menu already has "Take Photo" — one entry point is enough */
body.tg-min #cameraBtn { display: none !important; }
body.tg-min .tb-icon-btn {
  background: transparent !important;
  border: none !important;
  color: var(--m-muted) !important;
}
body.tg-min .tb-icon-btn:hover { background: var(--m-faint) !important; color: var(--m-text) !important; }
body.tg-min .model-chip-btn { color: var(--m-muted) !important; font-weight: 500 !important; }
body.tg-min .model-chip-icon { display: none !important; }
body.tg-min .tb-send {
  background: var(--m-text) !important;
  color: var(--m-bg) !important;
  box-shadow: none !important;
}
body.tg-min .ai-disclaimer { font-size: 0.7rem !important; color: var(--m-muted) !important; opacity: 0.8; }
body.tg-min .scroll-to-bottom {
  background: var(--m-surface) !important;
  border: 1px solid var(--m-faint) !important;
  color: var(--m-text) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
}

/* ── Empty state: a page from a physics notebook ─────────────────────────
   Faint graph paper with one projectile parabola that draws itself once.
   It is the single decorative moment on the page; everything else stays
   quiet. The greeting is set in Bricolage Grotesque, solid colour. */
body.tg-min { --m-grid: rgba(15, 23, 42, 0.055); }
body.tg-min[data-theme="dark"] { --m-grid: rgba(255, 255, 255, 0.045); }
body.tg-min .chat-empty-icon,
body.tg-min .chat-empty-title,
body.tg-min .chat-empty-hint { display: none !important; }
body.tg-min .chat-empty-state { position: relative !important; isolation: isolate; }
body.tg-min .tg-sheet {
  position: absolute;
  left: 50%; top: 50%;
  width: min(760px, 120%); height: 420px;
  transform: translate(-50%, -54%);
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--m-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--m-grid) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 55% 50% at 50% 50%, #000 35%, transparent 78%);
  mask-image: radial-gradient(ellipse 55% 50% at 50% 50%, #000 35%, transparent 78%);
}
body.tg-min .tg-sheet svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
body.tg-min .tg-sheet .tg-path {
  fill: none; stroke: var(--m-accent); stroke-width: 1.6; stroke-linecap: round;
  opacity: 0.55;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: tgDraw 1.8s cubic-bezier(0.33, 0, 0.2, 1) 0.25s forwards;
}
body.tg-min .tg-sheet .tg-ground { stroke: var(--m-muted); stroke-width: 1; stroke-dasharray: 3 5; opacity: 0.35; }
body.tg-min .tg-sheet .tg-dot { fill: var(--m-accent); opacity: 0; animation: tgDot 0.4s ease 1.9s forwards; }
@keyframes tgDraw { to { stroke-dashoffset: 0; } }
@keyframes tgDot { to { opacity: 0.8; } }
@media (prefers-reduced-motion: reduce) {
  body.tg-min .tg-sheet .tg-path { animation: none; stroke-dashoffset: 0; }
  body.tg-min .tg-sheet .tg-dot { animation: none; opacity: 0.8; }
}
body.tg-min .chat-empty-greeting {
  font-family: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif !important;
  font-size: clamp(2.1rem, 5vw, 3.1rem) !important;
  font-weight: 600 !important;
  font-variation-settings: 'opsz' 96;
  letter-spacing: -0.04em !important;
  line-height: 1.05 !important;
  color: var(--m-text) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor;
  margin: 0 0 10px !important;
}
body.tg-min .tg-sub {
  margin: 0 0 28px;
  color: var(--m-muted);
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
}
body.tg-min .es-chips {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px !important;
  width: min(560px, 100%);
  margin: 0 auto;
}
body.tg-min .es-chip {
  text-align: left !important;
  justify-content: flex-start !important;
  white-space: normal !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--m-bg) 70%, transparent) !important;
  backdrop-filter: blur(2px);
  border: 1px solid var(--m-faint) !important;
  color: var(--m-text) !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  box-shadow: none !important;
  transition: border-color 0.15s, background 0.15s;
}
body.tg-min .es-chip:hover { border-color: var(--m-accent) !important; background: var(--m-accent-soft) !important; }
body.tg-min .es-chip:focus-visible { outline: 2px solid var(--m-accent); outline-offset: 2px; }
@media (max-width: 600px) {
  body.tg-min .es-chips { grid-template-columns: 1fr; }
}

/* ── Phones ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  body.tg-min .navbar { padding: 8px 12px !important; }
  body.tg-min .ai-controls { padding: 2px 12px 8px !important; margin: 0 !important; }
  body.tg-min .ai-control input { width: 150px !important; }
  body.tg-min .user .message-bubble { max-width: 85% !important; }
  body.tg-min .bot .message-bubble { font-size: 0.96rem !important; }
}

/* Fixed backdrops painted by older rules in the old near-black (#05080b) —
   repaint them in the page colour so header and composer don't sit in
   darker bands. */
body.tg-min .page-main::before { background: var(--m-bg) !important; }
body.tg-min .free-input-wrapper::before {
  background: linear-gradient(to top, var(--m-bg) 70%, transparent) !important;
}
body.tg-min #pageLoader { background: var(--m-bg) !important; }
body.tg-min .free-input-bar,
body.tg-min .free-input-bar *:not(.katex):not(.katex *) { font-family: inherit !important; }

/* ── Docked sidebar on wide screens (body.tg-docked, set by minimal-ui.js) ──
   Same pattern as Claude / Gemini / ChatGPT: the empty margins become a
   persistent rail with New chat and recent conversations. Below 1180px the
   history panel stays the slide-in drawer it always was. */
body.tg-min { --m-rail: 272px; }
body.tg-min.tg-docked #historyPanel {
  transform: none !important;
  width: var(--m-rail) !important;
  top: 0 !important;
  height: 100vh !important;
  z-index: 210 !important;
  background: var(--m-surface) !important;
  border-right: 1px solid var(--m-faint) !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
}
body.tg-min.tg-docked #historyOverlay,
body.tg-min.tg-docked .hp-header,
body.tg-min.tg-docked .hp-filters,
body.tg-min.tg-docked #hpDateRange,
body.tg-min.tg-docked #navHistoryItem { display: none !important; }
body.tg-min.tg-docked #historyList { flex: 1 1 auto; overflow-y: auto; }
body.tg-min.tg-docked .navbar { left: var(--m-rail) !important; width: auto !important; right: 0 !important; }
body.tg-min.tg-docked .navbar .logo { visibility: hidden; }
body.tg-min.tg-docked .ai-controls,
body.tg-min.tg-docked .free-input-wrapper,
body.tg-min.tg-docked .free-input-wrapper::before { left: var(--m-rail) !important; }
body.tg-min.tg-docked .page-main { padding-left: calc(var(--m-rail) + 16px) !important; }

.tg-rail-top, .tg-rail-foot { display: none; }
body.tg-min.tg-docked .tg-rail-top {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 14px 8px;
}
body.tg-min .tg-rail-logo { height: 22px; width: auto; align-self: flex-start; margin: 2px 4px 6px; }
body.tg-min .tg-rail-logo.light { display: none; }
body.tg-min[data-theme="light"] .tg-rail-logo.dark { display: none; }
body.tg-min[data-theme="light"] .tg-rail-logo.light { display: block; }
body.tg-min .tg-rail-new {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--m-faint);
  background: var(--m-bg);
  color: var(--m-text);
  font-size: 0.88rem; font-weight: 500; line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s;
}
body.tg-min .tg-rail-new:hover { border-color: var(--m-accent); }
body.tg-min .tg-rail-new:focus-visible { outline: 2px solid var(--m-accent); outline-offset: 2px; }
body.tg-min .tg-rail-label { margin: 10px 6px 0; font-size: 0.75rem; font-weight: 500; color: var(--m-muted); }
body.tg-min.tg-docked .tg-rail-foot {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px 14px;
  border-top: 1px solid var(--m-faint);
}
body.tg-min .tg-rail-foot a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px;
  color: var(--m-text); text-decoration: none;
  font-size: 0.86rem;
}
body.tg-min .tg-rail-foot a:hover { background: var(--m-faint); }
body.tg-min .tg-rail-foot svg { width: 16px; height: 16px; color: var(--m-muted); flex-shrink: 0; }
/* Recent-chat rows: flatter and denser */
body.tg-min.tg-docked .hp-search-wrap { padding: 0 14px 6px !important; }
body.tg-min.tg-docked .hp-search {
  background: transparent !important;
  border: 1px solid var(--m-faint) !important;
  border-radius: 10px !important;
  color: var(--m-text) !important;
  font-size: 0.85rem !important;
}
body.tg-min.tg-docked .hp-item {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  margin: 0 8px !important;
}
body.tg-min.tg-docked .hp-item:hover { background: var(--m-faint) !important; }

/* ── Claude-style shell: everything lives in the rail ─────────────────────
   No hamburger, no header clutter. The rail's account button at the bottom
   holds Profile, Flashcards, Sparks, Appearance, Help, About and Log out.
   On phones the same rail opens as a drawer from a sidebar button. */
body.tg-min .es-chips { max-width: none !important; width: min(560px, 100%) !important; }

body.tg-min .hamburger,
body.tg-min #menuDropdown,
body.tg-min .spark-pill,
body.tg-min #profileTriggerNav,
body.tg-min .hp-header,
body.tg-min .hp-filters,
body.tg-min #hpDateRange,
body.tg-min .hp-footer { display: none !important; }
body.tg-min.tg-docked .new-chat-nav-btn,
body.tg-min.tg-docked .nav-tooltip-wrap[data-tooltip="New Chat"] { display: none !important; }

/* Rail parts show in drawer mode too, not only when docked */
body.tg-min .tg-rail-top { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 8px; }
body.tg-min .tg-rail-foot { display: block; padding: 8px 10px 12px; border-top: 1px solid var(--m-faint); position: relative; }
body.tg-min #historyPanel { display: flex !important; flex-direction: column !important; background: var(--m-surface) !important; }
body.tg-min #historyList { flex: 1 1 auto; overflow-y: auto; }

/* Phone header: sidebar button, logo, new chat */
.tg-rail-toggle { display: none; }
body.tg-min:not(.tg-docked) .tg-rail-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-right: 6px;
  border: none; border-radius: 10px; background: transparent;
  color: var(--m-text); cursor: pointer;
}
body.tg-min .tg-rail-toggle:hover { background: var(--m-faint); }
body.tg-min .navbar .logo { display: flex; align-items: center; }

/* Account button + menu */
body.tg-min .tg-acct {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px; border: none; border-radius: 12px;
  background: transparent; color: var(--m-text);
  cursor: pointer; text-align: left;
}
body.tg-min .tg-acct:hover,
body.tg-min .tg-acct[aria-expanded="true"] { background: var(--m-faint); }
body.tg-min .tg-acct-av {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; overflow: hidden;
  background: var(--m-accent); color: var(--m-bg);
  font-size: 0.75rem; font-weight: 600;
}
body.tg-min .tg-acct-av img { width: 100%; height: 100%; object-fit: cover; }
body.tg-min .tg-acct-meta { min-width: 0; flex: 1; }
body.tg-min .tg-acct-name { font-size: 0.88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.tg-min .tg-acct-sparks { font-size: 0.76rem; color: var(--m-muted); margin-top: 1px; }
body.tg-min .tg-acct-menu {
  position: absolute; left: 10px; right: 10px; bottom: calc(100% - 4px);
  padding: 6px; border-radius: 14px;
  background: var(--m-bg); border: 1px solid var(--m-faint);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
  z-index: 5;
}
body.tg-min .tg-acct-menu.open { opacity: 1; transform: none; pointer-events: auto; }
body.tg-min .tg-acct-menu button,
body.tg-min .tg-acct-menu a {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: none; border-radius: 9px;
  background: transparent; color: var(--m-text);
  font-size: 0.86rem; text-decoration: none; text-align: left; cursor: pointer;
}
body.tg-min .tg-acct-menu button:hover,
body.tg-min .tg-acct-menu a:hover { background: var(--m-faint); }
body.tg-min .tg-acct-menu svg { width: 16px; height: 16px; color: var(--m-muted); flex-shrink: 0; }
body.tg-min .tg-acct-menu hr { border: none; border-top: 1px solid var(--m-faint); margin: 5px 4px; }
body.tg-min .tg-acct-menu .tg-danger { color: #e5484d; }
body.tg-min .tg-acct-menu .tg-danger svg { color: #e5484d; }

/* ── Collapsible rail ─────────────────────────────────────────────────── */
body.tg-min #historyPanel,
body.tg-min .navbar,
body.tg-min .ai-controls,
body.tg-min .free-input-wrapper,
body.tg-min .page-main { transition: transform 0.28s cubic-bezier(0.2, 0, 0, 1), left 0.28s cubic-bezier(0.2, 0, 0, 1), padding-left 0.28s cubic-bezier(0.2, 0, 0, 1); }
body.tg-min .tg-rail-head { display: flex; align-items: center; justify-content: space-between; }
body.tg-min .tg-rail-collapse {
  display: none;
  width: 32px; height: 32px; border: none; border-radius: 9px;
  background: transparent; color: var(--m-muted); cursor: pointer;
  align-items: center; justify-content: center;
}
body.tg-min.tg-docked .tg-rail-collapse { display: inline-flex; }
body.tg-min .tg-rail-collapse:hover { background: var(--m-faint); color: var(--m-text); }
body.tg-min .tg-rail-head .tg-rail-logo { margin: 2px 4px; }

body.tg-min.tg-docked.tg-collapsed #historyPanel { transform: translateX(-100%) !important; }
body.tg-min.tg-docked.tg-collapsed .navbar,
body.tg-min.tg-docked.tg-collapsed .ai-controls,
body.tg-min.tg-docked.tg-collapsed .free-input-wrapper,
body.tg-min.tg-docked.tg-collapsed .free-input-wrapper::before { left: 0 !important; }
body.tg-min.tg-docked.tg-collapsed .page-main { padding-left: 16px !important; }
body.tg-min.tg-docked.tg-collapsed .navbar .logo { visibility: visible; }
body.tg-min.tg-docked.tg-collapsed .tg-rail-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-right: 6px;
  border: none; border-radius: 10px; background: transparent;
  color: var(--m-text); cursor: pointer;
}
body.tg-min.tg-docked.tg-collapsed .new-chat-nav-btn,
body.tg-min.tg-docked.tg-collapsed .nav-tooltip-wrap[data-tooltip="New Chat"] { display: inline-flex !important; }

/* ── Centred composer before the first question (body.tg-empty) ─────────
   The input sits in the middle of the screen with the greeting above and
   starter problems below; once the conversation starts it glides down to
   its usual place. Transform-only, so the move is GPU-smooth. */
body.tg-min .free-input-wrapper {
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), left 0.28s cubic-bezier(0.2, 0, 0, 1) !important;
}
body.tg-min.tg-empty .free-input-wrapper { transform: translateY(calc(62px - 50vh)); }
body.tg-min.tg-empty .free-input-wrapper::before { opacity: 0; }
body.tg-min .free-input-wrapper::before { transition: opacity 0.3s ease; }
body.tg-min .ai-disclaimer { transition: opacity 0.3s ease; }
body.tg-min.tg-empty .ai-disclaimer { opacity: 0 !important; }

body.tg-min.tg-empty .chat-empty-state {
  position: fixed !important;
  top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
  height: 100vh !important;
  margin: 0 !important; padding: 0 16px !important;
  display: block !important;
  pointer-events: none;
  z-index: 1;
}
body.tg-min.tg-empty.tg-docked:not(.tg-collapsed) .chat-empty-state { left: var(--m-rail) !important; }
body.tg-min.tg-empty .chat-empty-greeting {
  position: absolute; left: 16px; right: 16px;
  bottom: calc(50% + 122px);
  margin: 0 !important;
  text-align: center;
}
body.tg-min.tg-empty .tg-sub {
  position: absolute; left: 16px; right: 16px;
  top: calc(50% - 116px);
  margin: 0;
}
body.tg-min.tg-empty .es-chips {
  position: absolute !important;
  left: 50%; top: calc(50% + 58px);
  transform: translateX(-50%);
  pointer-events: auto;
}
/* Ground line of the curve (y=352 of 420) sits on the composer's top edge,
   so the arc rises over the greeting and lands either side of the input. */
body.tg-min.tg-empty .tg-sheet { top: calc(50% - 432px); transform: translateX(-50%); }
body.tg-min.tg-empty .free-input-wrapper { z-index: 5 !important; }
@media (max-height: 640px) {
  body.tg-min.tg-empty .free-input-wrapper { transform: translateY(calc(110px - 50vh)); }
  body.tg-min.tg-empty .chat-empty-greeting { bottom: calc(50% + 70px); font-size: 1.8rem !important; }
  body.tg-min.tg-empty .tg-sub { display: none; }
  body.tg-min.tg-empty .es-chips { top: calc(50% + 106px); }
}
@media (prefers-reduced-motion: reduce) {
  body.tg-min .free-input-wrapper { transition: none !important; }
}

/* ── Confirm dialog (moved to <body> by minimal-ui.js) ─────────────────── */
body.tg-min #hpConfirmModal {
  position: fixed !important; inset: 0 !important;
  z-index: 100000 !important;
  display: grid !important; place-items: center !important;
  background: rgba(0, 0, 0, 0.45) !important;
  opacity: 0; pointer-events: none;
  transition: opacity 0.16s ease;
}
body.tg-min #hpConfirmModal.open { opacity: 1; pointer-events: auto; }
body.tg-min .hp-confirm-box {
  width: min(400px, calc(100vw - 32px)) !important;
  padding: 22px 22px 18px !important;
  border-radius: 16px !important;
  background: var(--m-bg) !important;
  border: 1px solid var(--m-faint) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3) !important;
  text-align: left !important;
  transform: translateY(6px) scale(0.98);
  transition: transform 0.16s ease;
}
body.tg-min #hpConfirmModal.open .hp-confirm-box { transform: none; }
body.tg-min .hp-confirm-icon { display: none !important; }
body.tg-min .hp-confirm-box h3 {
  margin: 0 0 8px !important; text-align: left !important;
  font-size: 1.05rem !important; font-weight: 600 !important; color: var(--m-text) !important;
}
body.tg-min .hp-confirm-box p {
  margin: 0 0 20px !important; text-align: left !important;
  font-size: 0.9rem !important; line-height: 1.5 !important; color: var(--m-muted) !important;
}
body.tg-min .hp-confirm-buttons { display: flex !important; justify-content: flex-end !important; gap: 8px !important; }
body.tg-min .hp-confirm-no,
body.tg-min .hp-confirm-yes {
  flex: 0 0 auto !important; width: auto !important;
  padding: 9px 16px !important; border-radius: 10px !important;
  font-size: 0.88rem !important; font-weight: 500 !important;
  box-shadow: none !important; cursor: pointer;
}
body.tg-min .hp-confirm-no {
  background: transparent !important; color: var(--m-text) !important;
  border: 1px solid var(--m-faint) !important;
}
body.tg-min .hp-confirm-no:hover { background: var(--m-faint) !important; }
body.tg-min .hp-confirm-yes { background: #e5484d !important; color: #fff !important; border: none !important; }
body.tg-min .hp-confirm-yes:hover { background: #d13438 !important; }

/* One shared slide for collapsing/expanding the rail: every element that
   moves uses the same duration and curve, so the layout glides as one
   piece instead of some parts snapping (the fixed empty state and the
   composer backdrop previously had no transition at all). */
body.tg-min { --m-slide: 0.38s cubic-bezier(0.32, 0.72, 0, 1); }
body.tg-min #historyPanel { transition: transform var(--m-slide) !important; }
body.tg-min .navbar,
body.tg-min .ai-controls,
body.tg-min .free-input-wrapper::before,
body.tg-min .chat-empty-state { transition: left var(--m-slide), right var(--m-slide), opacity 0.3s ease !important; }
body.tg-min .page-main { transition: padding-left var(--m-slide) !important; }
body.tg-min .free-input-wrapper {
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), left var(--m-slide) !important;
}
@media (prefers-reduced-motion: reduce) {
  body.tg-min #historyPanel, body.tg-min .navbar, body.tg-min .ai-controls,
  body.tg-min .free-input-wrapper, body.tg-min .free-input-wrapper::before,
  body.tg-min .chat-empty-state, body.tg-min .page-main { transition: none !important; }
}

/* ===========================================================================
   Claude-style rail, settings dialog and ghost chats
   =========================================================================== */

/* Rail head: collapse icon then wordmark */
body.tg-min .tg-rail-top { gap: 2px !important; padding: 12px 10px 4px !important; }
body.tg-min .tg-rail-head { display: flex; align-items: center; justify-content: flex-start !important; gap: 6px; margin-bottom: 10px; }
body.tg-min .tg-rail-collapse { display: inline-flex !important; }
body.tg-min:not(.tg-docked) .tg-rail-collapse { visibility: hidden; }

/* Section rows: New chat / Search chats / Flashcards */
body.tg-min .tg-rail-nav { display: flex; flex-direction: column; gap: 1px; }
body.tg-min .tg-rail-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px;
  border: none; border-radius: 10px;
  background: transparent; color: var(--m-text);
  font-size: 0.9rem; font-weight: 400; line-height: 1.2;
  text-decoration: none; text-align: left; cursor: pointer;
}
body.tg-min .tg-rail-row svg { width: 17px; height: 17px; color: var(--m-muted); flex-shrink: 0; }
body.tg-min .tg-rail-row:hover { background: var(--m-faint); }
body.tg-min .tg-rail-row.tg-rail-new { background: var(--m-faint); font-weight: 500; border: none; }
body.tg-min .tg-rail-row.tg-rail-new svg { color: var(--m-text); }
body.tg-min .tg-rail-row:focus-visible { outline: 2px solid var(--m-accent); outline-offset: -2px; }
body.tg-min .tg-rail-label { margin: 18px 10px 6px !important; font-size: 0.76rem !important; color: var(--m-muted) !important; }

/* Search box only when asked for */
body.tg-min #historyPanel .hp-search-wrap { display: none !important; }
body.tg-min #historyPanel.tg-searching .hp-search-wrap { display: block !important; padding: 0 10px 8px !important; }

/* Chat rows: one line, title only; the menu appears on hover */
body.tg-min #historyPanel .hp-item {
  display: flex !important; align-items: center !important;
  padding: 7px 10px !important; margin: 0 8px !important; min-height: 0 !important;
  border: none !important; border-radius: 9px !important;
  background: transparent !important; box-shadow: none !important;
}
body.tg-min #historyPanel .hp-item:hover { background: var(--m-faint) !important; }
body.tg-min #historyPanel .hp-item-preview,
body.tg-min #historyPanel .hp-item-meta { display: none !important; }
body.tg-min #historyPanel .hp-item-title {
  font-size: 0.88rem !important; font-weight: 400 !important;
  color: var(--m-text) !important; opacity: 0.86;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin: 0 !important;
}
body.tg-min #historyPanel .hp-item:hover .hp-item-title { opacity: 1; }
body.tg-min #historyPanel .hp-item-menu-wrap { opacity: 0; transition: opacity 0.12s; }
body.tg-min #historyPanel .hp-item:hover .hp-item-menu-wrap,
body.tg-min #historyPanel .hp-item-menu-wrap:focus-within { opacity: 1; }
@media (hover: none) { body.tg-min #historyPanel .hp-item-menu-wrap { opacity: 0.6; } }

/* Account row: one line, name then balance, chevron */
body.tg-min .tg-rail-foot { border-top: none !important; }
body.tg-min .tg-acct { padding: 8px 10px !important; }
body.tg-min .tg-acct-av { width: 28px !important; height: 28px !important; font-size: 0.7rem !important; }
body.tg-min .tg-acct-meta { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
body.tg-min .tg-acct-name { font-weight: 500 !important; font-size: 0.9rem !important; }
body.tg-min .tg-acct-sparks { font-size: 0.78rem !important; color: var(--m-muted); white-space: nowrap; margin: 0 !important; }
body.tg-min .tg-acct-sparks:not(:empty)::before { content: "\00b7\00a0"; }
body.tg-min .tg-acct-chev { margin-left: auto; color: var(--m-muted); flex-shrink: 0; }

/* The profile slide-over is retired; Settings / Account replaces it */
body.tg-min #profilePanel,
body.tg-min #profileOverlay { display: none !important; }

/* Settings dialog */
.tg-set {
  position: fixed; inset: 0; z-index: 100001;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0; pointer-events: none;
  transition: opacity 0.16s ease;
}
.tg-set.open { opacity: 1; pointer-events: auto; }
.tg-set-box {
  display: grid; grid-template-columns: 220px minmax(0, 1fr);
  width: min(960px, calc(100vw - 32px)); height: min(640px, calc(100vh - 48px));
  border-radius: 16px; overflow: hidden;
  background: var(--m-bg); color: var(--m-text);
  border: 1px solid var(--m-faint);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  transform: translateY(8px) scale(0.985);
  transition: transform 0.18s cubic-bezier(0.2, 0, 0, 1);
}
.tg-set.open .tg-set-box { transform: none; }
.tg-set-nav { padding: 18px 12px; border-right: 1px solid var(--m-faint); background: var(--m-surface); overflow-y: auto; }
.tg-set-navlabel { font-size: 0.78rem; color: var(--m-muted); margin: 0 10px 8px; }
.tg-set-nav button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; margin-bottom: 2px;
  border: none; border-radius: 9px; background: transparent;
  color: var(--m-text); font-size: 0.9rem; text-align: left; cursor: pointer;
}
.tg-set-nav button svg { width: 17px; height: 17px; color: var(--m-muted); }
.tg-set-nav button:hover { background: var(--m-faint); }
.tg-set-nav button.on { background: var(--m-surface-2); font-weight: 500; }
.tg-set-nav button.on svg { color: var(--m-text); }
.tg-set-body { position: relative; padding: 28px 32px 32px; overflow-y: auto; }
.tg-set-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px; border: none; border-radius: 9px;
  background: transparent; color: var(--m-muted); cursor: pointer;
  display: grid; place-items: center;
}
.tg-set-close svg { width: 18px; height: 18px; }
.tg-set-close:hover { background: var(--m-faint); color: var(--m-text); }
.tg-set-panel h2 { font-size: 1.02rem; font-weight: 600; margin: 4px 0 6px; letter-spacing: -0.01em; }
.tg-set-panel h2:not(:first-child) { margin-top: 30px; }
.tg-set-row {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 14px 0; border-bottom: 1px solid var(--m-faint);
}
.tg-set-row-label { font-size: 0.92rem; font-weight: 500; }
.tg-set-row-desc { font-size: 0.82rem; color: var(--m-muted); margin-top: 3px; line-height: 1.45; max-width: 46ch; }
.tg-set-row-ctl { flex-shrink: 0; }
.tg-set-val { font-size: 0.9rem; color: var(--m-text); }
.tg-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--m-surface); border: 1px solid var(--m-faint); }
.tg-seg button {
  padding: 6px 12px; border: none; border-radius: 7px;
  background: transparent; color: var(--m-muted);
  font-size: 0.85rem; cursor: pointer; white-space: nowrap;
}
.tg-seg button[aria-checked="true"] { background: var(--m-bg); color: var(--m-text); font-weight: 500; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.tg-seg button:focus-visible, .tg-set-btn:focus-visible, .tg-switch:focus-visible { outline: 2px solid var(--m-accent); outline-offset: 2px; }
.tg-set-select {
  padding: 7px 10px; border-radius: 9px;
  border: 1px solid var(--m-faint); background: var(--m-surface); color: var(--m-text);
  font-size: 0.88rem;
}
.tg-set-btn {
  display: inline-block; padding: 8px 14px; border-radius: 9px;
  border: 1px solid var(--m-faint); background: transparent; color: var(--m-text);
  font-size: 0.86rem; font-weight: 500; text-decoration: none; cursor: pointer;
}
.tg-set-btn:hover { background: var(--m-faint); }
.tg-set-danger { color: #e5484d; border-color: rgba(229, 72, 77, 0.35); }
.tg-set-danger:hover { background: rgba(229, 72, 77, 0.08); }
.tg-set-id { display: flex; align-items: center; gap: 14px; padding: 14px 0 16px; border-bottom: 1px solid var(--m-faint); }
.tg-set-av {
  width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  display: grid; place-items: center; background: var(--m-accent); color: var(--m-bg);
  font-weight: 600;
}
.tg-set-av img { width: 100%; height: 100%; object-fit: cover; }
.tg-set-id-name { font-size: 1.05rem; font-weight: 600; }
.tg-switch {
  position: relative; width: 40px; height: 24px; border-radius: 999px;
  border: none; background: var(--m-surface-2); cursor: pointer; padding: 0;
  transition: background 0.15s;
}
.tg-switch span {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s cubic-bezier(0.2, 0, 0, 1);
}
.tg-switch[aria-checked="true"] { background: var(--m-accent); }
.tg-switch[aria-checked="true"] span { transform: translateX(16px); }
@media (max-width: 720px) {
  .tg-set-box { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: calc(100vh - 24px); }
  .tg-set-nav { display: flex; gap: 4px; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--m-faint); padding: 10px; }
  .tg-set-navlabel { display: none; }
  .tg-set-nav button { width: auto; white-space: nowrap; margin: 0; }
  .tg-set-body { padding: 20px 18px; }
  .tg-set-row { flex-wrap: wrap; gap: 10px; }
}

/* Ghost chats */
body.tg-min .tg-ghost-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: none; border-radius: 10px;
  background: transparent; color: var(--m-muted); cursor: pointer;
}
body.tg-min .tg-ghost-btn svg { width: 20px; height: 20px; }
body.tg-min .tg-ghost-btn:hover { background: var(--m-faint); color: var(--m-text); }
body.tg-min .tg-ghost-btn[aria-pressed="true"] { background: var(--m-text); color: var(--m-bg); }
body.tg-min .tg-ghost-btn:focus-visible { outline: 2px solid var(--m-accent); outline-offset: 2px; }
body.tg-min.tg-ghost .free-input-bar { border: 1px dashed var(--m-muted) !important; }
body.tg-min.tg-ghost .tg-sheet .tg-path { stroke: var(--m-muted); }
body.tg-min .tg-ghost-btn { transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.2, 0, 0, 1); }
body.tg-min .tg-ghost-btn:active { transform: scale(0.92); }

/* Switching into / out of a ghost chat (settings-ghost.js wraps it in a View
   Transition): the page cross-fades slowly, the greeting blurs from one line
   to the other, and the ghost button gets a small settle. */
html.tg-vt-ghost::view-transition-old(root),
html.tg-vt-ghost::view-transition-new(root) { animation-duration: 0.45s; animation-timing-function: cubic-bezier(0.2, 0, 0, 1); }
body.tg-min #chatEmptyGreeting { view-transition-name: tg-greet; }
body.tg-min .tg-ghost-btn { view-transition-name: tg-ghost-btn; }
html.tg-vt-ghost::view-transition-old(tg-greet) { animation: tgGhostOut 0.3s cubic-bezier(0.2, 0, 0, 1) both; }
html.tg-vt-ghost::view-transition-new(tg-greet) { animation: tgGhostIn 0.45s 0.08s cubic-bezier(0.2, 0, 0, 1) both; }
html.tg-vt-ghost::view-transition-new(tg-ghost-btn) { animation: tgGhostPop 0.45s cubic-bezier(0.2, 0, 0, 1) both; }
@keyframes tgGhostOut { to { opacity: 0; filter: blur(6px); transform: translateY(-6px); } }
@keyframes tgGhostIn { from { opacity: 0; filter: blur(6px); transform: translateY(6px); } }
@keyframes tgGhostPop { 0% { transform: scale(0.85); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* Reduced motion (Settings / Motion) */
/* Reduced motion calms the big movements only. Small control feedback
   (switches, segmented thumbs, menus) stays, so the UI still responds. */
body.tg-min.tg-reduced .stream-word { animation: none !important; }
body.tg-min.tg-reduced .tg-sheet .tg-path,
body.tg-min.tg-reduced .tg-sheet .tg-dot { animation: none !important; stroke-dashoffset: 0; opacity: 0.6; }
body.tg-min.tg-reduced .free-input-wrapper,
body.tg-min.tg-reduced #historyPanel,
body.tg-min.tg-reduced .navbar,
body.tg-min.tg-reduced .ai-controls,
body.tg-min.tg-reduced .page-main,
body.tg-min.tg-reduced .chat-empty-state,
body.tg-min.tg-reduced .tg-set-panel { transition: none !important; animation: none !important; }
/* Tighten chat rows to Claude's rhythm: the inner .hp-item-main carried its
   own 9px/16px padding on top of the row's, which made rows 52px tall and
   indented past the nav rows above. */
body.tg-min #historyPanel .hp-item { padding: 0 4px 0 10px !important; height: 34px; }
body.tg-min #historyPanel .hp-item-main { padding: 0 !important; flex: 1 1 auto; min-width: 0; }
body.tg-min #historyPanel .hp-item-menu-btn { width: 26px !important; height: 26px !important; }
/* Wordmark first, sidebar button to its right (rail head and header). */
body.tg-min .tg-rail-head { justify-content: space-between !important; }
body.tg-min .tg-rail-head .tg-rail-logo { margin: 2px 6px !important; }
body.tg-min .navbar .logo { gap: 4px; }
body.tg-min .navbar .logo .tg-rail-toggle { margin: 0 0 0 6px !important; }

/* ── Settings: smooth switching ───────────────────────────────────────── */
/* Selected states: a touch darker so they read at a glance. */
body.tg-min { --m-select: rgba(15, 23, 42, 0.09); }
body.tg-min[data-theme="dark"] { --m-select: rgba(255, 255, 255, 0.11); }

.tg-set-nav { position: relative; }
.tg-set-nav button { position: relative; z-index: 1; background: transparent !important; }
.tg-set-nav button.on { background: transparent !important; }
.tg-set-nav button:not(.on):hover { background: var(--m-faint) !important; }
.tg-set-nav-ind {
  position: absolute; top: 0; left: 0; z-index: 0;
  border-radius: 9px; background: var(--m-select);
  opacity: 0; pointer-events: none;
}
.tg-set-nav-ind.ready {
  opacity: 1;
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), height 0.32s cubic-bezier(0.32, 0.72, 0, 1), width 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}

.tg-set-panel.tg-enter { animation: tgPanelIn 0.28s cubic-bezier(0.2, 0, 0, 1) both; }
@keyframes tgPanelIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.tg-seg { position: relative; }
.tg-seg button { position: relative; z-index: 1; background: transparent !important; box-shadow: none !important; transition: color 0.2s ease; }
.tg-seg button[aria-checked="true"] { color: var(--m-text); }
.tg-seg-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px; z-index: 0;
  border-radius: 7px;
  background: var(--m-bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.05);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), width 0.3s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s;
}
body.tg-min[data-theme="dark"] .tg-seg-thumb { background: var(--m-surface-2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06); }
.tg-seg-thumb.no-anim { transition: none !important; }
.tg-switch { transition: background 0.22s ease; }
.tg-switch span { transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1); }

/* Darker selection in the rail too */
body.tg-min .tg-rail-row.tg-rail-new { background: var(--m-select) !important; }

/* Theme change: a View Transition cross-fade (settings-ghost.js) — one GPU
   fade of two page snapshots instead of transitioning every element. */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.28s; animation-timing-function: ease; }

/* ── Empty state: no chips; more air between greeting and composer ───── */
body.tg-min .es-chips { display: none !important; }
body.tg-min.tg-empty .chat-empty-greeting { bottom: calc(50% + 156px) !important; }
body.tg-min.tg-empty .tg-sub { top: calc(50% - 146px) !important; }
@media (max-height: 640px) {
  body.tg-min.tg-empty .chat-empty-greeting { bottom: calc(50% + 96px) !important; }
}

/* ── Site navigation (js/site-nav.js) on non-dashboard pages ──────────── */
body.tg-min .navbar.tg-has-site-nav { display: flex !important; align-items: center !important; gap: 12px; }
body.tg-min .tg-home-link { display: inline-flex; align-items: center; text-decoration: none; }
body.tg-min .tg-site-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
body.tg-min .tg-site-nav a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 10px;
  color: var(--m-muted); text-decoration: none;
  font-size: 0.88rem; font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
body.tg-min .tg-site-nav a svg { width: 16px; height: 16px; }
body.tg-min .tg-site-nav a:hover { background: var(--m-faint); color: var(--m-text); }
body.tg-min .tg-site-nav a[aria-current="page"] { background: var(--m-select); color: var(--m-text); }
body.tg-min .tg-site-nav a:focus-visible { outline: 2px solid var(--m-accent); outline-offset: 2px; }
body.tg-min .tg-site-nav .tg-nav-cta { background: var(--m-text); color: var(--m-bg); }
body.tg-min .tg-site-nav .tg-nav-cta:hover { background: var(--m-text); color: var(--m-bg); opacity: 0.88; }
body.tg-min .navbar.tg-has-site-nav .nav-right { margin-left: 0 !important; }
@media (max-width: 520px) {
  body.tg-min .tg-site-nav a { padding: 7px 9px; }
  body.tg-min .tg-site-nav a span { display: none; }
  body.tg-min .tg-site-nav a svg { width: 18px; height: 18px; }
  body.tg-min .tg-site-nav .tg-nav-plain span,
  body.tg-min .tg-site-nav .tg-nav-cta span { display: inline; }
}
/* The profile page no longer needs its own back link */
body.tg-min .profile-page .tg-back { display: none !important; }

/* ── Flashcards in the shared theme ───────────────────────────────────── */
body.tg-min .fc-page { max-width: 880px !important; }
body.tg-min .fc-page-title {
  font-family: 'Bricolage Grotesque', 'Inter', sans-serif !important;
  font-size: 1.9rem !important; font-weight: 600 !important; letter-spacing: -0.035em !important;
  color: var(--m-text) !important;
}
body.tg-min .fc-tabs { gap: 2px !important; padding: 3px; border-radius: 12px; background: var(--m-surface); display: inline-flex !important; }
body.tg-min .fc-tab {
  background: transparent !important; color: var(--m-muted) !important;
  border: none !important; border-radius: 9px !important; font-weight: 500 !important;
}
body.tg-min .fc-tab:hover { color: var(--m-text) !important; }
body.tg-min .fc-tab.active { background: var(--m-bg) !important; color: var(--m-text) !important; box-shadow: 0 1px 2px rgba(0,0,0,0.14), 0 0 0 1px var(--m-faint); }
body.tg-min[data-theme="dark"] .fc-tab.active { background: var(--m-surface-2) !important; }
body.tg-min .fc-deck-card,
body.tg-min .fc-card-item,
body.tg-min .fc-dm-card {
  background: var(--m-surface) !important;
  border: 1px solid var(--m-faint) !important;
  box-shadow: none !important;
  border-radius: 14px !important;
}
body.tg-min .fc-deck-card:hover { border-color: var(--m-select) !important; }
body.tg-min .fc-btn-primary,
body.tg-min .fc-btn-study {
  background: var(--m-text) !important; color: var(--m-bg) !important;
  border: none !important; font-weight: 600 !important; box-shadow: none !important;
}
body.tg-min .fc-btn-ghost { border-color: var(--m-faint) !important; color: var(--m-text) !important; background: transparent !important; }
body.tg-min .fc-btn-ghost:hover { background: var(--m-faint) !important; }
body.tg-min .fc-level-badge { background: var(--m-accent-soft) !important; color: var(--m-text) !important; border: none !important; }
body.tg-min .fc-xp-bar-outer { background: var(--m-faint) !important; }
body.tg-min .fc-xp-bar, body.tg-min .fc-progress-bar { background: var(--m-accent) !important; }
body.tg-min .fc-form-group input,
body.tg-min .fc-form-group textarea,
body.tg-min .fc-form-group select {
  background: var(--m-surface) !important; border: 1px solid var(--m-faint) !important;
  color: var(--m-text) !important; border-radius: 10px !important;
}
body.tg-min .fc-form-group input:focus,
body.tg-min .fc-form-group textarea:focus,
body.tg-min .fc-form-group select:focus { border-color: var(--m-accent) !important; outline: none; }
body.tg-min .fc-study-overlay,
body.tg-min .fc-deck-modal { background: var(--m-bg) !important; }
body.tg-min .fc-card-face, body.tg-min .fc-card-back-face {
  background: var(--m-surface) !important; border: 1px solid var(--m-faint) !important;
  color: var(--m-text) !important; box-shadow: 0 12px 40px rgba(0,0,0,0.12) !important;
}

/* ── Centred composer sits a little lower (desktop/tablet) ────────────── */
body.tg-min.tg-empty .free-input-wrapper { transform: translateY(calc(104px - 50vh)); }
body.tg-min.tg-empty .chat-empty-greeting { bottom: calc(50% + 114px) !important; }
body.tg-min.tg-empty .tg-sub { top: calc(50% - 104px) !important; }
body.tg-min.tg-empty .tg-sheet { top: calc(50% - 390px); }

/* ── Profile: study time removed ──────────────────────────────────────── */
body.tg-min .profile-stat-card:has(#profileTime),
body.tg-min .pp-stat:has(#profileTime) { display: none !important; }
body.tg-min .tg-prof-side .profile-stats,
body.tg-min .profile-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
body.tg-min #sessionIndicator { display: none !important; }

/* ── Phones ────────────────────────────────────────────────────────────
   Composer stays at the bottom (thumb reach, like Claude/ChatGPT mobile);
   the greeting centres in the space above it. The subject pill moves into
   the header so there is one row of chrome, not two. */
@media (max-width: 768px) {
  body.tg-min.tg-empty .free-input-wrapper { transform: none; }
  body.tg-min.tg-empty .free-input-wrapper::before { opacity: 1; }
  body.tg-min.tg-empty .ai-disclaimer { opacity: 0.8 !important; }
  body.tg-min.tg-empty .chat-empty-greeting {
    bottom: calc(50% + 34px) !important;
    font-size: clamp(2rem, 9vw, 2.5rem) !important;
  }
  body.tg-min.tg-empty .tg-sub {
    top: calc(50% - 22px) !important;
    font-size: 0.95rem; padding: 0 12px;
  }
  body.tg-min.tg-empty .tg-sheet { top: calc(50% - 300px); width: 140%; height: 360px; }

  /* Header: wordmark + sidebar button · subject · ghost + new chat */
  body.tg-min .navbar { padding: 8px 10px !important; height: 52px; }
  body.tg-min .logo-img { height: 20px !important; }
  body.tg-min .navbar .logo .tg-rail-toggle { margin-left: 2px !important; }
  body.tg-min .ai-controls {
    top: 9px !important;
    left: 0 !important; right: 0 !important;
    margin: 0 auto !important;
    width: max-content !important;
    max-width: 40vw !important;
    padding: 0 !important;
    background: transparent !important;
    z-index: 210 !important;
    animation: none !important;
  }
  body.tg-min .ai-control:has(#chapter) { display: none !important; }
  body.tg-min .custom-dropdown-trigger { height: 34px !important; padding: 0 12px !important; }
  body.tg-min .page-main { padding-top: 52px !important; }

  /* Composer: one tidy row of tools */
  body.tg-min .free-input-bar { border-radius: 24px !important; }
  body.tg-min .input-actions-slot { gap: 0 !important; }
  body.tg-min .model-chip-btn { padding: 4px 6px !important; font-size: 0.78rem !important; }

  /* Drawer */
  body.tg-min #historyPanel { width: min(86vw, 320px) !important; }
  body.tg-min #historyOverlay { background: rgba(0, 0, 0, 0.45) !important; }
}
@media (max-width: 380px) {
  body.tg-min .navbar .logo-img { height: 18px !important; }
  body.tg-min .ai-controls { max-width: 34vw !important; }
}

/* ── Chat row menu (Rename / Export PDF / Delete) ─────────────────────── */
body.tg-min .hp-item-dropdown {
  min-width: 196px !important;
  padding: 5px !important;
  border-radius: 12px !important;
  background: var(--m-bg) !important;
  border: 1px solid var(--m-faint) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.06) !important;
  z-index: 300 !important;
}
body.tg-min[data-theme="dark"] .hp-item-dropdown { background: var(--m-surface-2) !important; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5) !important; }
body.tg-min .hp-dropdown-date {
  padding: 6px 10px 7px !important;
  font-size: 0.74rem !important; font-weight: 400 !important;
  color: var(--m-muted) !important;
  gap: 0 !important;
}
body.tg-min .hp-dropdown-date svg { display: none !important; }
body.tg-min .hp-dropdown-divider { margin: 4px 6px !important; height: 1px !important; background: var(--m-faint) !important; }
body.tg-min .hp-dropdown-date + .hp-dropdown-divider { display: none !important; }
body.tg-min .hp-dropdown-option,
body.tg-min .hp-delete-option {
  display: flex !important; align-items: center !important; gap: 10px !important;
  width: 100% !important; height: 34px !important;
  padding: 0 10px !important; border-radius: 8px !important;
  background: transparent !important; border: none !important;
  font-size: 0.86rem !important; font-weight: 400 !important;
  color: var(--m-text) !important; text-align: left !important; cursor: pointer;
}
body.tg-min .hp-dropdown-option svg { width: 16px !important; height: 16px !important; color: var(--m-muted) !important; stroke: currentColor; }
body.tg-min .hp-dropdown-option:hover { background: var(--m-faint) !important; }
body.tg-min .hp-delete-option { color: #e5484d !important; }
body.tg-min .hp-delete-option svg { width: 16px !important; height: 16px !important; color: #e5484d !important; stroke: currentColor; }
body.tg-min .hp-delete-option:hover { background: rgba(229, 72, 77, 0.09) !important; }
body.tg-min .hp-dropdown-option:focus-visible,
body.tg-min .hp-delete-option:focus-visible { outline: 2px solid var(--m-accent); outline-offset: -2px; }
/* Keep the menu visible while it is open (its wrapper fades out off-hover) */
body.tg-min #historyPanel .hp-item-menu-wrap:has(.hp-item-dropdown.open) { opacity: 1 !important; }
body.tg-min #historyPanel .hp-item:has(.hp-item-dropdown.open) { background: var(--m-faint) !important; }

/* ── Send button: up-arrow, muted until there is something to send ───── */
body.tg-min .tb-send {
  width: 34px !important; height: 34px !important;
  border-radius: 10px !important;
  background: var(--m-text) !important; color: var(--m-bg) !important;
  border: none !important; box-shadow: none !important;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease !important;
}
body.tg-min .tb-send:active { transform: scale(0.94); }
body.tg-min .tb-send.tg-idle {
  background: var(--m-surface-2) !important;
  color: var(--m-muted) !important;
  cursor: default;
}
body.tg-min[data-theme="light"] .tb-send.tg-idle { background: rgba(15, 23, 42, 0.08) !important; }
body.tg-min .tb-send:focus-visible { outline: 2px solid var(--m-accent); outline-offset: 2px; }
body.tg-min #voiceBtn { width: 34px !important; height: 34px !important; border-radius: 10px !important; }

/* ── Attach menu: compact single-line rows, neutral icons ─────────────── */
body.tg-min .upload-dropdown-panel {
  min-width: 210px !important; width: auto !important;
  padding: 5px !important;
  border-radius: 14px !important;
  background: var(--m-bg) !important;
  border: 1px solid var(--m-faint) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}
body.tg-min[data-theme="dark"] .upload-dropdown-panel { background: var(--m-surface-2) !important; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5) !important; }
body.tg-min .upload-option {
  display: flex !important; align-items: center !important; gap: 10px !important;
  height: 38px !important; padding: 0 10px !important; margin: 0 !important;
  border-radius: 9px !important; background: transparent !important;
  cursor: pointer;
}
body.tg-min .upload-option:hover { background: var(--m-faint) !important; }
body.tg-min .upl-ic {
  width: 20px !important; height: 20px !important;
  background: transparent !important; border: none !important; box-shadow: none !important;
  color: var(--m-muted) !important;
  display: grid !important; place-items: center !important;
}
body.tg-min .upl-ic svg { width: 17px !important; height: 17px !important; stroke-width: 1.9 !important; }
body.tg-min .upload-option-title {
  font-size: 0.88rem !important; font-weight: 400 !important;
  color: var(--m-text) !important; line-height: 1.2 !important;
}
body.tg-min .upload-option-desc { display: none !important; }

/* ── No manual model picker (tier is chosen per question by the backend) ── */
body.tg-min #modelBtn,
body.tg-min #modelDropdown { display: none !important; }

/* Image mode chip, shown while "Create an image" is on */
body.tg-min .tg-mode-chip {
  display: none; align-items: center; gap: 6px;
  height: 30px; padding: 0 6px 0 10px; margin-left: 4px;
  border-radius: 999px; border: 1px solid var(--m-faint);
  background: var(--m-accent-soft); color: var(--m-text);
  font-size: 0.8rem; font-weight: 500; white-space: nowrap;
}
body.tg-min .tg-mode-chip.on { display: inline-flex; }
body.tg-min .tg-mode-chip svg { width: 14px; height: 14px; }
body.tg-min .tg-mode-chip button {
  width: 20px; height: 20px; border: none; border-radius: 50%;
  background: transparent; color: var(--m-muted); cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
body.tg-min .tg-mode-chip button:hover { background: var(--m-faint); color: var(--m-text); }
body.tg-min .upload-option.tg-imggen .upl-ic { color: var(--m-accent) !important; }

/* ── Attachments in the composer ──────────────────────────────────────── */
body.tg-min .upload-chips-row,
body.tg-min .upload-chips-row.has-files {
  display: none; flex-wrap: wrap; gap: 8px;
  padding: 12px 14px 2px !important;
  background: transparent !important; border: none !important;
}
body.tg-min .upload-chips-row.has-files { display: flex !important; }
body.tg-min .upload-chip {
  position: relative !important;
  display: flex !important; align-items: center !important; gap: 10px !important;
  height: 56px !important; max-width: 220px !important;
  padding: 8px 30px 8px 8px !important;
  border-radius: 12px !important;
  background: var(--m-bg) !important;
  border: 1px solid var(--m-faint) !important;
  box-shadow: none !important;
}
body.tg-min[data-theme="dark"] .upload-chip { background: var(--m-surface-2) !important; }
/* Image: a clean thumbnail tile, no name */
body.tg-min .upload-chip:has(.chip-thumb) {
  width: 64px !important; height: 64px !important; padding: 0 !important;
  overflow: visible !important; background: transparent !important;
}
body.tg-min .upload-chip:has(.chip-thumb) .chip-meta { display: none !important; }
body.tg-min .chip-thumb {
  width: 64px !important; height: 64px !important;
  object-fit: cover !important; border-radius: 12px !important;
  border: 1px solid var(--m-faint);
  display: block;
}
/* File: icon tile + name + size */
body.tg-min .chip-file-icon {
  width: 40px !important; height: 40px !important; flex-shrink: 0;
  border-radius: 9px !important;
  background: var(--m-surface) center / 20px no-repeat !important;
  font-size: 0 !important; color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa0a6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 3 14 8 19 8'/%3E%3C/svg%3E") !important;
}
body.tg-min .chip-meta { display: flex !important; flex-direction: column !important; min-width: 0 !important; gap: 2px !important; }
body.tg-min .chip-name {
  font-size: 0.8rem !important; font-weight: 500 !important; color: var(--m-text) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px;
}
body.tg-min .chip-size { font-size: 0.72rem !important; color: var(--m-muted) !important; }
/* Remove button: a small round × on the corner */
body.tg-min .chip-remove {
  position: absolute !important; top: -7px !important; right: -7px !important;
  width: 20px !important; height: 20px !important;
  display: grid !important; place-items: center !important;
  padding: 0 !important; border-radius: 50% !important;
  border: 1.5px solid var(--m-bg) !important;
  background: var(--m-text) !important; color: var(--m-bg) !important;
  font-size: 9px !important; line-height: 1 !important; font-weight: 700 !important;
  cursor: pointer; opacity: 0.92;
}
body.tg-min .chip-remove:hover { opacity: 1; transform: scale(1.06); }

/* ── Phone header: ☰ · subject · ghost ─────────────────────────────────── */
@media (max-width: 768px) {
  body.tg-min .ai-controls { opacity: 1 !important; transform: none !important; visibility: visible !important; }
  body.tg-min .navbar { display: flex !important; align-items: center !important; justify-content: space-between !important; }
  body.tg-min .navbar .logo .logo-img { display: none !important; }
  body.tg-min .navbar .logo .tg-rail-toggle { margin: 0 !important; display: inline-flex !important; }
  body.tg-min .new-chat-nav-btn,
  body.tg-min .nav-tooltip-wrap[data-tooltip="New Chat"] { display: none !important; }
  body.tg-min .nav-right { display: flex !important; align-items: center !important; gap: 0 !important; }
  body.tg-min .ai-controls { top: 8px !important; }
}

/* Attachments make the centred composer taller; lift the greeting with it */
body.tg-min.tg-empty:has(.upload-chips-row.has-files) .chat-empty-greeting { bottom: calc(50% + 196px) !important; }
body.tg-min.tg-empty:has(.upload-chips-row.has-files) .tg-sub { top: calc(50% - 186px) !important; }
body.tg-min.tg-empty:has(.upload-chips-row.has-files) .tg-sheet { top: calc(50% - 470px); }
@media (max-width: 768px) {
  body.tg-min.tg-empty:has(.upload-chips-row.has-files) .chat-empty-greeting { bottom: calc(50% + 34px) !important; }
  body.tg-min.tg-empty:has(.upload-chips-row.has-files) .tg-sub { top: calc(50% - 22px) !important; }
}

/* Chat list: instant highlight on press (minimal-ui.js), no fade, no inner grey box */
body.tg-min #historyPanel .hp-item { transition: none !important; }
body.tg-min #historyPanel .hp-item .hp-item-main,
body.tg-min #historyPanel .hp-item.active .hp-item-main { background: transparent !important; }
body.tg-min #historyPanel .hp-item.active,
body.tg-min #historyPanel .hp-item.tg-active { background: var(--m-select) !important; }
body.tg-min #historyPanel .hp-item.active .hp-item-title,
body.tg-min #historyPanel .hp-item.tg-active .hp-item-title { opacity: 1; font-weight: 500 !important; }

/* Finished answers: no per-word animation kept alive (minimal-ui.js markDone) */
body.tg-min .message-row.tg-done .stream-word { animation: none !important; opacity: 1; }

/* Chat list empty state: one quiet line, like Claude */
body.tg-min #historyPanel .hp-empty { padding: 4px 20px !important; text-align: left !important; display: block !important; }
body.tg-min #historyPanel .hp-empty-icon { display: none !important; }
body.tg-min #historyPanel .hp-empty-text { font-size: 0.84rem !important; color: var(--m-muted) !important; line-height: 1.5 !important; margin: 0 !important; }

/* Rail head: wordmark left, sidebar button at the right end of the same row
   (the row directly above New chat). */
body.tg-min .tg-rail-head { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; }
body.tg-min .tg-rail-head .tg-rail-logo { margin: 2px 8px !important; }

/* Sidebar collapsed (wide screens): the button sits just under the wordmark,
   pinned so the header keeps its height. */
body.tg-min.tg-docked.tg-collapsed .navbar .logo .tg-rail-toggle {
  position: fixed !important;
  top: 46px; left: 10px;
  margin: 0 !important;
  z-index: 220;
}

/* ── Settings: the × must sit above the panel ─────────────────────────
   The panel's entrance animation (transform) creates its own layer, which
   was painted over the absolutely positioned × and swallowed taps. */
.tg-set-close { z-index: 10 !important; }

/* Phones: Settings as a full-screen sheet — a header with the title and ×,
   then the sections as a scrollable row of tabs. */
@media (max-width: 720px) {
  .tg-set { place-items: stretch !important; background: var(--m-bg) !important; }
  .tg-set-box {
    width: 100vw !important; height: 100dvh !important; max-height: none !important;
    border-radius: 0 !important; border: none !important; box-shadow: none !important;
    grid-template-columns: 1fr !important; grid-template-rows: auto auto 1fr !important;
    transform: none !important;
  }
  .tg-set-box::before {
    content: "Settings";
    display: flex; align-items: center;
    height: 56px; padding: 0 64px 0 18px;
    font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
    font-size: 1.25rem; font-weight: 600; letter-spacing: -0.03em;
    color: var(--m-text);
    border-bottom: 1px solid var(--m-faint);
  }
  .tg-set-close {
    position: fixed !important; top: 10px !important; right: 10px !important;
    width: 36px !important; height: 36px !important;
    background: var(--m-faint) !important; color: var(--m-text) !important;
    border-radius: 50% !important;
  }
  .tg-set-nav {
    display: flex !important; gap: 6px !important;
    overflow-x: auto !important; scrollbar-width: none;
    padding: 10px 14px !important;
    border-right: none !important; border-bottom: 1px solid var(--m-faint) !important;
    background: var(--m-bg) !important;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .tg-set-nav::-webkit-scrollbar { display: none; }
  .tg-set-navlabel { display: none !important; }
  .tg-set-nav button {
    flex: 0 0 auto !important; width: auto !important; margin: 0 !important;
    padding: 8px 14px !important; border-radius: 999px !important;
    border: 1px solid var(--m-faint) !important;
    font-size: 0.86rem !important; white-space: nowrap;
  }
  .tg-set-nav button svg { width: 15px !important; height: 15px !important; }
  .tg-set-nav button.on { border-color: transparent !important; }
  .tg-set-nav-ind { border-radius: 999px !important; }
  .tg-set-body { padding: 18px 18px 40px !important; overflow-y: auto; }
  .tg-set-row { flex-direction: column; align-items: flex-start !important; gap: 10px !important; }
  .tg-set-row-ctl { width: 100%; }
  .tg-seg { max-width: 100%; overflow-x: auto; }
}

/* ── Phone empty screen: chapter field back, chat bar raised ──────────── */
@media (max-width: 768px) {
  body.tg-min .ai-control:has(#chapter) { display: block !important; }
  body.tg-min .ai-controls { max-width: 64vw !important; gap: 6px !important; }
  body.tg-min .ai-control input { width: 118px !important; }
  /* composer sits just under the greeting instead of at the very bottom */
  body.tg-min.tg-empty .free-input-wrapper { transform: translateY(calc(118px - 45vh)) !important; }
  body.tg-min.tg-empty .free-input-wrapper::before { opacity: 0 !important; }
  body.tg-min.tg-empty .ai-disclaimer { opacity: 0 !important; }
  body.tg-min.tg-empty .chat-empty-greeting { bottom: calc(50% + 62px) !important; }
  body.tg-min.tg-empty .tg-sub { top: calc(50% - 50px) !important; }
  body.tg-min.tg-empty .tg-sheet { top: calc(50% - 330px) !important; }
}
@media (max-width: 380px) {
  body.tg-min .ai-control input { width: 92px !important; }
  body.tg-min .ai-controls { max-width: 60vw !important; }
}

/* ── Collapsed sidebar = slim icon rail (like Claude) ──────────────────
   Instead of hiding the sidebar and leaving a lone wordmark, collapsing
   shrinks it to 56px: sidebar button, New chat, Search, Flashcards as
   icons, and the avatar at the bottom. Supersedes the earlier "slide off
   screen" collapse. */
body.tg-min { --m-mini: 56px; }
body.tg-min.tg-docked.tg-collapsed #historyPanel {
  transform: none !important;
  width: var(--m-mini) !important;
  overflow: visible !important;
}
body.tg-min.tg-docked #historyPanel { transition: width var(--m-slide) !important; }
body.tg-min.tg-docked.tg-collapsed .navbar,
body.tg-min.tg-docked.tg-collapsed .ai-controls,
body.tg-min.tg-docked.tg-collapsed .free-input-wrapper,
body.tg-min.tg-docked.tg-collapsed .free-input-wrapper::before { left: var(--m-mini) !important; }
body.tg-min.tg-docked.tg-collapsed .page-main { padding-left: calc(var(--m-mini) + 16px) !important; }
body.tg-min.tg-empty.tg-docked.tg-collapsed .chat-empty-state { left: var(--m-mini) !important; }
/* header keeps nothing on the left; the rail carries navigation */
body.tg-min.tg-docked.tg-collapsed .navbar .logo,
body.tg-min.tg-docked.tg-collapsed .tg-rail-toggle,
body.tg-min.tg-docked.tg-collapsed .new-chat-nav-btn,
body.tg-min.tg-docked.tg-collapsed .nav-tooltip-wrap[data-tooltip="New Chat"] { display: none !important; }

/* inside the mini rail: icons only */
body.tg-min.tg-docked.tg-collapsed .tg-rail-top { padding: 12px 10px 4px !important; align-items: center; }
body.tg-min.tg-docked.tg-collapsed .tg-rail-head { justify-content: center !important; margin-bottom: 8px; }
body.tg-min.tg-docked.tg-collapsed .tg-rail-logo { display: none !important; }
body.tg-min.tg-docked.tg-collapsed .tg-rail-nav { align-items: center; gap: 4px; }
body.tg-min.tg-docked.tg-collapsed .tg-rail-row {
  width: 36px !important; height: 36px; padding: 0 !important;
  justify-content: center; border-radius: 10px;
}
body.tg-min.tg-docked.tg-collapsed .tg-rail-row span { display: none !important; }
body.tg-min.tg-docked.tg-collapsed .tg-rail-row svg { width: 18px; height: 18px; }
body.tg-min.tg-docked.tg-collapsed .tg-rail-row.tg-rail-new { background: var(--m-select) !important; }
body.tg-min.tg-docked.tg-collapsed .tg-rail-label,
body.tg-min.tg-docked.tg-collapsed #historyList,
body.tg-min.tg-docked.tg-collapsed .hp-search-wrap,
body.tg-min.tg-docked.tg-collapsed .hp-active-filters { display: none !important; }
body.tg-min.tg-docked.tg-collapsed .tg-rail-foot { margin-top: auto; padding: 10px 0 14px !important; display: flex !important; justify-content: center; }
body.tg-min.tg-docked.tg-collapsed .tg-acct { width: auto !important; padding: 4px !important; border-radius: 50% !important; }
body.tg-min.tg-docked.tg-collapsed .tg-acct-meta,
body.tg-min.tg-docked.tg-collapsed .tg-acct-chev { display: none !important; }
body.tg-min.tg-docked.tg-collapsed .tg-acct-menu { left: 8px; right: auto; width: 220px; bottom: calc(100% + 4px); }

/* hover labels for the icon-only buttons */
body.tg-min.tg-docked.tg-collapsed .tg-rail-row,
body.tg-min.tg-docked.tg-collapsed .tg-rail-collapse { position: relative; }
body.tg-min.tg-docked.tg-collapsed .tg-rail-row:hover::after,
body.tg-min.tg-docked.tg-collapsed .tg-rail-collapse:hover::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  padding: 5px 9px; border-radius: 8px; white-space: nowrap;
  background: var(--m-text); color: var(--m-bg);
  font-size: 0.78rem; font-weight: 500; pointer-events: none; z-index: 5;
}

/* Icon rail bottom: settings gear above the avatar (avatar opens Profile) */
.tg-rail-gear { display: none; }
body.tg-min.tg-docked.tg-collapsed .tg-rail-foot { flex-direction: column !important; align-items: center !important; gap: 8px !important; }
body.tg-min.tg-docked.tg-collapsed .tg-rail-gear {
  display: grid; place-items: center; position: relative;
  width: 36px; height: 36px; border: none; border-radius: 10px;
  background: transparent; color: var(--m-muted); cursor: pointer;
}
body.tg-min.tg-docked.tg-collapsed .tg-rail-gear svg { width: 19px; height: 19px; }
body.tg-min.tg-docked.tg-collapsed .tg-rail-gear:hover { background: var(--m-faint); color: var(--m-text); }
body.tg-min.tg-docked.tg-collapsed .tg-rail-gear:hover::after,
body.tg-min.tg-docked.tg-collapsed .tg-acct:hover::after {
  content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  padding: 5px 9px; border-radius: 8px; white-space: nowrap; background: var(--m-text); color: var(--m-bg);
  font-size: 0.78rem; font-weight: 500; pointer-events: none; z-index: 5;
}
body.tg-min.tg-docked.tg-collapsed .tg-acct { position: relative; }
body.tg-min.tg-docked.tg-collapsed .tg-acct-av { width: 32px !important; height: 32px !important; }

/* Header actions (ghost) stay on the right even when the wordmark is hidden */
body.tg-min .navbar .nav-right { margin-left: auto !important; }

/* ── MOTION PASS (2026-10-09) ──────────────────────────────────────────
   Quiet, eased movement where things used to snap. Nothing loops, nothing
   bounces; everything settles within about half a second. Off for the
   in-app "Reduced motion" setting and the OS setting. */
@keyframes tgRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes tgFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tgSlideIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes tgMarker { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }

/* Highlights are drawn in like a marker stroke */
body.tg-min mark.ai-highlight { animation: tgMarker 0.6s 0.12s cubic-bezier(0.2, 0, 0, 1) both; }

/* Opening an old chat: the conversation rises in, the last few rows (the
   ones on screen) one after another; dashboard.js adds .tg-restoring */
body.tg-min #chatWindow.tg-restoring .message-row,
body.tg-min #chatWindow.tg-restoring .hp-restored-banner { animation: tgRise 0.42s cubic-bezier(0.2, 0, 0, 1) both; }
body.tg-min #chatWindow.tg-restoring .message-row:nth-last-child(4) { animation-delay: 0.05s; }
body.tg-min #chatWindow.tg-restoring .message-row:nth-last-child(3) { animation-delay: 0.1s; }
body.tg-min #chatWindow.tg-restoring .message-row:nth-last-child(2) { animation-delay: 0.15s; }
body.tg-min #chatWindow.tg-restoring .message-row:nth-last-child(1) { animation-delay: 0.2s; }

/* Sidebar: hover/active fade instead of flipping; new chats slide in
   (dashboard.js marks them .tg-new) */
body.tg-min #historyPanel .hp-item { transition: background-color 0.2s ease; }
body.tg-min #historyPanel .hp-item.tg-new { animation: tgSlideIn 0.36s cubic-bezier(0.2, 0, 0, 1) both; }

/* Follow-up suggestions arrive one after another */
body.tg-min .tg-followup-chip { animation: tgRise 0.36s cubic-bezier(0.2, 0, 0, 1) both; transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease, transform 0.12s ease; }
body.tg-min .tg-followup-chip:nth-child(2) { animation-delay: 0.06s; }
body.tg-min .tg-followup-chip:nth-child(3) { animation-delay: 0.12s; }
body.tg-min .tg-followup-chip:nth-child(n+4) { animation-delay: 0.18s; }

/* Small settles: source line, answer actions, dropdown options */
body.tg-min .tg-sources { animation: tgFade 0.5s 0.1s ease both; }
body.tg-min .msg-actions { animation: tgFade 0.4s ease both; }
body.tg-min .custom-dropdown-option { transition: background-color 0.15s ease, color 0.15s ease; }

body.tg-min.tg-reduced mark.ai-highlight,
body.tg-min.tg-reduced #chatWindow.tg-restoring .message-row,
body.tg-min.tg-reduced #chatWindow.tg-restoring .hp-restored-banner,
body.tg-min.tg-reduced #historyPanel .hp-item.tg-new,
body.tg-min.tg-reduced .tg-followup-chip,
body.tg-min.tg-reduced .tg-sources,
body.tg-min.tg-reduced .msg-actions { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  body.tg-min mark.ai-highlight,
  body.tg-min #chatWindow.tg-restoring .message-row,
  body.tg-min #chatWindow.tg-restoring .hp-restored-banner,
  body.tg-min #historyPanel .hp-item.tg-new,
  body.tg-min .tg-followup-chip,
  body.tg-min .tg-sources,
  body.tg-min .msg-actions { animation: none !important; }
}