/* Hide CTA buttons while a wizard overlay is active */
body.wizard-active #goalAchieverBtn,
body.wizard-active #pastWizardBtn,
body.wizard-active #challengeResolverBtn {
  visibility: hidden !important;
}

:root {
  color-scheme: dark light;
  --bg: radial-gradient(1200px 800px at 50% -20%, #0f172a 0%, #0b0f14 40%, #0b0f14 100%);
  --bg-solid: #0b0f14;
  --fg: #e6edf3;
  --muted: #94a3b8;
  --border: #1f2937;
  --accent: #4c8dff;
  --accent-2: #7aa2ff;
  --danger: #ef4444;
  --danger-2: #f87171;
  --bubble-user: #153659;
  --bubble-user-text: #d7e9ff;
  --bubble-assistant: #0f172a;
  --bubble-assistant-text: #e6edf3;
  --topbar-h: 48px;
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, .35);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, .28);
  --vh: 1vh;
  /* Mobile viewport height fallback */
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
}

/* =========================================
   Cozy Mode legacy-variable overrides
   Additive — existing consumers keep using --bg, --fg, --border etc.
   and automatically get warm light values when data-ux-mode="cozy"
   is active.
   ⚠️ These used to read `--color-*` tokens, which exist ONLY in
   src/styles/base/variables.css — a sheet most cozy pages never load.
   An undefined var() with no fallback is guaranteed-invalid, so the
   whole custom property computed to nothing and every downstream
   `var(--fg)` / `var(--border)` / `var(--bg-solid)` consumer silently
   fell back to `unset`. Measured dead on register.html and
   video-journal.html (EN+CN) — the only cozy-capable pages that load
   styles.css without app-shell.css / tokens.css / main.css; masked
   everywhere else by app-shell.css's late @import of tokens.css.
   Repointed to the LIVE tokens.css names (the colour family is --fg*,
   NOT --text-*, which is FONT SIZES) with cozy literals as fallbacks
   so the block stands alone on those two pages. --bg-solid and --fg
   carry literals only: `--fg: var(--fg, …)` would be a self-reference,
   i.e. a cycle, i.e. equally invalid.
   Fix 2026-08-01, OPEN_TASKS 0e. Values mirror tokens.css §COZY.
   ========================================= */
:root[data-ux-mode="cozy"] {
  color-scheme: light;
  --bg: radial-gradient(1200px 800px at 50% -20%, hsl(30, 25%, 98%) 0%, hsl(30, 20%, 96%) 40%, hsl(30, 18%, 94%) 100%);
  --bg-solid: #F7EFE0;
  --fg: #1A2438;
  --muted: var(--fg-muted, #5A5540);
  --border: var(--border-subtle, rgba(166, 130, 85, 0.20));
  --bubble-assistant: var(--surface-2, #FFFBF2);
  --bubble-assistant-text: var(--fg, #1A2438);
  /* Softer shadows on cream — heavy black shadows look wrong on light bg */
  --shadow-lg: 0 8px 28px rgba(15, 23, 42, 0.12);
  --shadow-md: 0 6px 18px rgba(15, 23, 42, 0.09);
}

html,
body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

img,
video,
iframe {
  max-width: 100%;
  height: auto;
}

.responsive-table {
  width: 100%;
  overflow-x: auto;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  font-family: 'Inter', 'Noto Sans SC', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  background-color: var(--bg-solid);
  color: var(--fg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Global dropdown theming (ensure visible selects across the app) */
select {
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(135deg, #1e293b, #334155) !important;
  /* Dark blue-gray background */
  color: #f1f5f9 !important;
  /* Light text for dark background */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background-clip: padding-box;
  padding: 8px 12px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

select:hover {
  background: linear-gradient(135deg, #334155, #475569) !important;
  border-color: rgba(255, 255, 255, 0.3);
}

select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
  border-color: #3b82f6;
}

/* Option list background (high contrast for visibility) */
select option {
  background-color: #1e293b !important;
  /* Dark background */
  color: #f1f5f9 !important;
  /* Light text */
  padding: 8px !important;
  font-weight: 500;
}

select option:hover {
  background-color: #334155 !important;
}

/* Force dropdown background for browsers that ignore option styling */
select:focus option,
select option:checked,
select option:selected {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
}

/* Additional browser-specific overrides */
select option:focus {
  background-color: #334155 !important;
  color: #f1f5f9 !important;
}

/* For WebKit browsers */
select option::-webkit-option {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
}

/* Nuclear option: Force all select elements to have dark background when open */
select:focus,
select:active,
select:focus-visible {
  background: linear-gradient(135deg, #1e293b, #334155) !important;
  color: #f1f5f9 !important;
}

/* Additional nuclear option for dropdown list container */
select:focus option,
select:active option,
select:focus-visible option {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
  border: none !important;
}

/* =================== COMPREHENSIVE DROPDOWN COVERAGE =================== */
/* Catch-all rule for any select element without specific class */
select:not(.brand-select):not(.filter-select):not(.edit-select):not(.form-select):not(.goal-dropdown):not(.controls) {
  background: linear-gradient(135deg, #1e293b, #334155) !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

select:not(.brand-select):not(.filter-select):not(.edit-select):not(.form-select):not(.goal-dropdown):not(.controls):hover {
  background: linear-gradient(135deg, #334155, #475569) !important;
  border-color: rgba(255, 255, 255, 0.3);
}

select:not(.brand-select):not(.filter-select):not(.edit-select):not(.form-select):not(.goal-dropdown):not(.controls):focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
  border-color: #3b82f6;
}

/* Catch-all option styling for any select without specific class */
select:not(.brand-select):not(.filter-select):not(.edit-select):not(.form-select):not(.goal-dropdown):not(.controls) option {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
  padding: 8px !important;
  font-weight: 500;
}

select:not(.brand-select):not(.filter-select):not(.edit-select):not(.form-select):not(.goal-dropdown):not(.controls) option:hover {
  background-color: #334155 !important;
}

/* Force catch-all dropdown background */
select:not(.brand-select):not(.filter-select):not(.edit-select):not(.form-select):not(.goal-dropdown):not(.controls):focus option,
select:not(.brand-select):not(.filter-select):not(.edit-select):not(.form-select):not(.goal-dropdown):not(.controls) option:checked,
select:not(.brand-select):not(.filter-select):not(.edit-select):not(.form-select):not(.goal-dropdown):not(.controls) option:selected {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
}

/* Timeline specific dropdowns */
.filter-select,
.edit-select {
  background: linear-gradient(135deg, #1e293b, #334155) !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 500;
  min-width: 120px;
}

.filter-select option,
.edit-select option {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
  padding: 6px 10px !important;
}

/* Force filter-select dropdown background */
.filter-select:focus option,
.filter-select option:checked,
.filter-select option:selected,
.edit-select:focus option,
.edit-select option:checked,
.edit-select option:selected {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
}

/* Additional filter-select overrides */
.filter-select option:hover,
.edit-select option:hover {
  background-color: #334155 !important;
  color: #f1f5f9 !important;
}

/* =================== FORM SELECT DROPDOWNS =================== */
/* User Profile form-select styling */
.form-select {
  background: linear-gradient(135deg, #1e293b, #334155) !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 8px 12px;
  /* selects don't inherit font by default — without this the UA default
     (no CJK coverage) turned every CN dropdown into tofu (QA R14 P1) */
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.form-select:hover {
  background: linear-gradient(135deg, #334155, #475569) !important;
  border-color: rgba(255, 255, 255, 0.3);
}

.form-select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
  border-color: #3b82f6;
}

/* Form-select dropdown options */
.form-select option {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
  padding: 8px !important;
  font-weight: 500;
}

.form-select option:hover {
  background-color: #334155 !important;
}

/* Force form-select dropdown background */
.form-select:focus option,
.form-select option:checked,
.form-select option:selected {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
}

/* =================== GOAL DROPDOWN =================== */
/* Goal dropdown styling */
.goal-dropdown {
  background: linear-gradient(135deg, #1e293b, #334155) !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.goal-dropdown:hover {
  background: linear-gradient(135deg, #334155, #475569) !important;
  border-color: rgba(255, 255, 255, 0.3);
}

.goal-dropdown:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
  border-color: #3b82f6;
}

/* Goal dropdown options */
.goal-dropdown option {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
  padding: 8px !important;
  font-weight: 500;
}

.goal-dropdown option:hover {
  background-color: #334155 !important;
}

/* Force goal dropdown background */
.goal-dropdown:focus option,
.goal-dropdown option:checked,
.goal-dropdown option:selected {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
}

/* =================== COZY MODE SELECT OVERRIDES =================== */
/* Higher specificity (attribute selector on :root) + !important beats the
   bare select rules above in cozy mode only. Must cover every selector
   variant that appears above — otherwise the default midnight rules leak
   through in cozy.
   ⚠️ These read dead `--color-*` tokens until 2026-08-01 (OPEN_TASKS 0e).
   `!important` cannot rescue an invalid value: an undefined var() with no
   fallback makes the DECLARATION invalid at computed-value time, so it
   still won the cascade and then resolved to `unset` — measured in cozy as
   background-color rgba(0,0,0,0) / background-image none (the standard
   midnight gradient correctly killed, but nothing put in its place),
   colour + border-color falling through to inherited ink. Every cozy
   dropdown on the site rendered transparent. Repointed to the live
   tokens.css names with cozy literals as fallbacks, so this works on
   pages that never load tokens.css too. */
:root[data-ux-mode="cozy"] select,
:root[data-ux-mode="cozy"] select:hover,
:root[data-ux-mode="cozy"] select:focus,
:root[data-ux-mode="cozy"] select:active,
:root[data-ux-mode="cozy"] select:focus-visible,
:root[data-ux-mode="cozy"] select:not(.brand-select):not(.filter-select):not(.edit-select):not(.form-select):not(.goal-dropdown):not(.controls),
:root[data-ux-mode="cozy"] select:not(.brand-select):not(.filter-select):not(.edit-select):not(.form-select):not(.goal-dropdown):not(.controls):hover,
:root[data-ux-mode="cozy"] select:not(.brand-select):not(.filter-select):not(.edit-select):not(.form-select):not(.goal-dropdown):not(.controls):focus,
:root[data-ux-mode="cozy"] .filter-select,
:root[data-ux-mode="cozy"] .edit-select,
:root[data-ux-mode="cozy"] .form-select,
:root[data-ux-mode="cozy"] .form-select:hover,
:root[data-ux-mode="cozy"] .goal-dropdown,
:root[data-ux-mode="cozy"] .goal-dropdown:hover {
  background: var(--surface-2, #FFFBF2) !important;
  color: var(--fg, #1A2438) !important;
  border-color: var(--border-subtle, rgba(166, 130, 85, 0.20)) !important;
}

:root[data-ux-mode="cozy"] select option,
:root[data-ux-mode="cozy"] select option:hover,
:root[data-ux-mode="cozy"] select option:checked,
:root[data-ux-mode="cozy"] select option:selected,
:root[data-ux-mode="cozy"] select option:focus,
:root[data-ux-mode="cozy"] select:focus option,
:root[data-ux-mode="cozy"] select:active option,
:root[data-ux-mode="cozy"] select:focus-visible option,
:root[data-ux-mode="cozy"] .filter-select option,
:root[data-ux-mode="cozy"] .edit-select option,
:root[data-ux-mode="cozy"] .form-select option,
:root[data-ux-mode="cozy"] .goal-dropdown option {
  background-color: var(--surface-2, #FFFBF2) !important;
  color: var(--fg, #1A2438) !important;
}

/* Persona mood palettes — Standard only, same contract as tokens.css
   MOOD PALETTES. These set --bg-solid (and --bg/--accent) to dark-theme
   values ON BODY; custom properties resolve from the nearest ancestor,
   so unguarded they override cozy's <html>-level remap mid-cozy and
   ink-on-ink pairs appear (page-guide pill/tooltip, ~1.01:1, 2026-07-30).
   applyPersonaTheme (src/modules/app.js) applies THESE classes on chat —
   persona-sweet is its default branch. persona-grow sets no dark tokens
   and needs no guard. */
:root:not([data-ux-mode="cozy"]) body.persona-sweet {
  --bg: radial-gradient(1200px 800px at 50% -20%, #2a1810 0%, #1a0f08 45%, #0b0f14 100%);
  --bg-solid: #1a0f08;
  --accent: #ff7a3d;
  --accent-2: #ff9a5c;
}

:root:not([data-ux-mode="cozy"]) body.persona-playful {
  --bg: radial-gradient(1200px 800px at 50% -10%, #2a0f1a 0%, #160a0f 45%, #0b0f14 100%);
  --bg-solid: #10070a;
  --accent: #ff6fa1;
  --accent-2: #ff9dc4;
}

:root:not([data-ux-mode="cozy"]) body.persona-deep {
  --bg: radial-gradient(1200px 800px at 50% -20%, #0b1024 0%, #050914 45%, #05080f 100%);
  --bg-solid: #05080f;
  --accent: #60a5fa;
  --accent-2: #93c5fd;
}

:root:not([data-ux-mode="cozy"]) body.persona-fun {
  --bg: radial-gradient(1200px 800px at 50% -20%, #0b2417 0%, #06140d 45%, #0b0f14 100%);
  --bg-solid: #06140d;
  --accent: #34d399;
  --accent-2: #6ee7b7;
}

body.persona-grow {
  /* default values already match current */
  color: inherit;
}

:root:not([data-ux-mode="cozy"]) body.persona-mentor {
  --bg: radial-gradient(1200px 800px at 50% -20%, #1a1a2e 0%, #0f0f1a 45%, #0a0a14 100%);
  --bg-solid: #0f0f1a;
  --accent: #4c8dff;
  --accent-2: #7ba7ff;
}

:root:not([data-ux-mode="cozy"]) body.persona-spirit {
  --bg: radial-gradient(1200px 800px at 50% -20%, #141628 0%, #0a0c1a 45%, #070910 100%);
  --bg-solid: #0a0c1a;
  --accent: #38bdf8;
  --accent-2: #c084fc;
}

.topbar {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
  min-height: var(--topbar-h);
  padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
  padding-left: calc(env(safe-area-inset-left, 0px) + 12px);
  padding-right: calc(env(safe-area-inset-right, 0px) + 12px);
}

.grid-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "left center right";
  align-items: center;
  column-gap: 8px;
}

.top-left {
  justify-self: start;
  grid-area: left;
}

.top-center {
  justify-self: center;
  grid-area: center;
}

.top-right {
  justify-self: end;
  grid-area: right;
}

.brand-line {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

.brand-select {
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(135deg, #1e293b, #334155);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 14px 20px;
  margin: 0;
  font-family: 'Poppins', 'Noto Sans SC', sans-serif;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.2s ease;
}

.brand-select:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.brand-select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

/* Style dropdown options */
.brand-select option {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
  padding: 10px !important;
  font-weight: 500;
}

.brand-select option:hover {
  background-color: #334155 !important;
}

/* Force brand-select dropdown background */
.brand-select:focus option,
.brand-select option:checked,
.brand-select option:selected {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
}

/* Alternative approach for better browser support */
.brand-select:focus option {
  background: linear-gradient(135deg, #8b5cf6, #a855f7) !important;
  color: #fff !important;
}

/* Additional brand-select overrides for stubborn browsers */
.brand-select:active option,
.brand-select:focus-visible option {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
}

/* Nuclear option for brand-select dropdown background */
.brand-select:focus,
.brand-select:active,
.brand-select:focus-visible {
  background: linear-gradient(135deg, #1e293b, #334155) !important;
  color: #f1f5f9 !important;
}

/* Force brand-select dropdown list container */
.brand-select:focus option,
.brand-select:active option,
.brand-select:focus-visible option {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
  border: none !important;
}

/* WebKit-specific brand-select option styling */
.brand-select option::-webkit-option {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
}

/* Additional brand-select option overrides */
.brand-select option:focus,
.brand-select option:checked,
.brand-select option:selected,
.brand-select option:active {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
}

/* MAXIMUM SPECIFICITY - Force brand-select options */
select.brand-select option,
.brand-line .brand-select option,
.top-center .brand-select option,
.grid-header .brand-select option {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
  padding: 10px !important;
  font-weight: 500 !important;
}

/* Force brand-select options on all states */
select.brand-select:focus option,
select.brand-select:active option,
select.brand-select:focus-visible option,
.brand-line .brand-select:focus option,
.brand-line .brand-select:active option,
.brand-line .brand-select:focus-visible option {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
  border: none !important;
}

.brand-select:focus {
  outline: none;
}

.brand-select::before,
.brand::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s ease;
}

.brand-select:hover::before,
.brand:hover::before {
  left: 100%;
}

.brand-select:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.3),
    0 6px 20px rgba(255, 255, 255, 0.15) inset,
    0 2px 0 rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.2);
}

.brand {
  font-family: 'Poppins', 'Noto Sans SC', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.025em;
  line-height: 1;
  color: #fff;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 14px 20px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-height: 48px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    0 4px 16px rgba(255, 255, 255, 0.1) inset,
    0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.brand:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.3),
    0 6px 20px rgba(255, 255, 255, 0.15) inset,
    0 2px 0 rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.2);
}

.brand-select:active,
.brand:active {
  transform: translateY(-1px) scale(0.98);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.2),
    0 2px 8px rgba(255, 255, 255, 0.1) inset;
}

.banner {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  background: #ffe08a;
  color: #4d3b00;
  padding: 8px 12px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
  transition: transform .25s ease;
  z-index: 100;
}

.banner.show {
  transform: translate(-50%, 10px);
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.controls label {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}

.controls input,
.controls select {
  background: linear-gradient(135deg, #1e293b, #334155) !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 6px 8px;
}

/* Style dropdown options for controls select */
.controls select option {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
  padding: 6px 8px !important;
  font-weight: 500;
}

.chat {
  display: grid;
  grid-template-rows: 1fr auto;
  height: calc(100dvh - var(--nav-height, 70px));
  height: calc(var(--vh, 1vh) * 100 - var(--nav-height, 70px));
  position: relative;
  overflow: hidden;
}

.chat-inner {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100%;
  min-height: 0;
  padding: 0 40px;
}

.chat-inner {
  position: relative;
  z-index: 1;
}

body.persona-playful .chat::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 140%;
  height: 55%;
  background: radial-gradient(600px 300px at 50% 100%, rgba(255, 188, 120, .12), rgba(255, 140, 120, .06), rgba(0, 0, 0, 0));
  pointer-events: none;
  z-index: 0;
  animation: candleFlicker 6s ease-in-out infinite;
  filter: blur(2px);
}

@keyframes candleFlicker {

  0%,
  100% {
    opacity: .10;
    transform: translateX(-50%) scale(1);
  }

  45% {
    opacity: .16;
    transform: translateX(-50%) scale(1.01);
  }

  60% {
    opacity: .08;
    transform: translateX(-50%) scale(0.995);
  }

  75% {
    opacity: .14;
    transform: translateX(-50%) scale(1.005);
  }
}

.messages {
  padding: 16px;
  padding-top: 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overscroll-behavior: contain;
  min-height: 0;
  scroll-behavior: smooth;
}

.row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.row.user {
  justify-content: flex-end;
}

.row.assistant {
  justify-content: flex-start;
}

.avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #1f2937;
  display: grid;
  place-items: center;
  font-size: 36px;
  flex: 0 0 72px;
  user-select: none;
  margin: 8px;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.avatar.avatar-spirit-baby {
  background: radial-gradient(circle at 30% 30%, rgba(148, 121, 255, 0.4), rgba(31, 41, 55, 0.85));
}

.avatar-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.avatar.user {
  background: #1b3353;
  color: #a3d0ff;
}

.avatar.assistant {
  background: #2a2a2a;
  color: #ffd1e8;
}

.bubble {
  width: fit-content;
  max-width: 85%;
  padding: 12px 14px;
  border-radius: 14px;
  line-height: 1.6;
  border: 1px solid #1a2234;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, 0));
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
  box-shadow: var(--shadow-md);
}

.bubble.user {
  background: var(--bubble-user);
  color: var(--bubble-user-text);
}

.bubble.assistant {
  background: var(--bubble-assistant);
  color: var(--bubble-assistant-text);
}

.meta {
  font-size: 12px;
  opacity: 0.7;
  margin-top: 4px;
}

/* 质量徽章 — §4.8 "日积月累" 支柱的出处显示。
   放在回复气泡之上，读作「这条回复扎根于你的过去」，而非装饰。
   高置信度变体（≥3 条引用且平均相关度 ≥80%）用渐变边框突出鲜明记忆。
   参考: 2026-04-21 审计 Chat P2。 */
.quality-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  line-height: 1.3;
  padding: 4px 11px 4px 8px;
  border-radius: 999px;
  background: rgba(148, 121, 255, 0.10);
  border: 1px solid rgba(148, 121, 255, 0.32);
  color: rgba(196, 181, 253, 1);
  margin-bottom: 8px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
  cursor: default;
}
.quality-badge:hover {
  background: rgba(148, 121, 255, 0.18);
  border-color: rgba(148, 121, 255, 0.5);
}
.quality-badge .orb {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9479FF;
  box-shadow: 0 0 8px rgba(148, 121, 255, 0.75);
  flex: 0 0 auto;
  animation: citation-pulse 2.6s ease-in-out infinite;
}
@keyframes citation-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}
@media (prefers-reduced-motion: reduce) {
  .quality-badge .orb { animation: none; }
}
.quality-badge.high-confidence {
  background: linear-gradient(135deg, rgba(79, 172, 254, 0.12), rgba(148, 121, 255, 0.14));
  border-color: rgba(148, 121, 255, 0.55);
  color: #e9d5ff;
}
.quality-badge.high-confidence .orb {
  background: linear-gradient(135deg, #4FACFE, #9479FF);
  box-shadow: 0 0 10px rgba(148, 121, 255, 0.9);
}

.bubble.assistant .quality-badge {
  /* 保留向后兼容选择器 */
}

/* 可折叠的记忆引用 — 易读的出处列表 */
.citations-details {
  font-size: 12.5px;
  margin-top: 10px;
  border-top: 1px solid rgba(148, 121, 255, 0.18);
  padding-top: 6px;
}
.citations-summary {
  cursor: pointer;
  color: rgba(196, 181, 253, 0.95);
  font-weight: 500;
  list-style: none;
  user-select: none;
  padding: 3px 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.15s;
}
.citations-summary::-webkit-details-marker { display: none; }
.citations-summary::before {
  content: '▸';
  display: inline-block;
  transition: transform 0.15s;
  font-size: 0.85em;
}
.citations-details[open] > .citations-summary::before { transform: rotate(90deg); }
.citations-summary:hover { color: rgba(233, 213, 255, 1); }

.citation-item {
  font-style: normal;
  opacity: 0.9;
  padding: 4px 0 4px 1.25em;
  line-height: 1.5;
  color: inherit;
  position: relative;
}
.citation-item::before {
  content: '';
  position: absolute;
  left: 0.35em;
  top: 0.75em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(148, 121, 255, 0.55);
}

.bubble.assistant .citations-details {
  border-top-color: rgba(148, 121, 255, 0.22);
}
.bubble.assistant .citations-summary {
  color: rgba(209, 196, 255, 0.95);
}
.bubble.assistant .citations-summary:hover {
  color: rgba(229, 216, 255, 1);
}

.composer {
  display: flex;
  gap: 12px;
  padding: 16px;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  padding-left: calc(env(safe-area-inset-left, 0px) + 16px);
  padding-right: calc(env(safe-area-inset-right, 0px) + 16px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: sticky;
  bottom: 0;
  z-index: 100;
}

.composer input,
.composer textarea {
  flex: 1;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--fg);
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
  font-size: 16px;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.2),
    0 2px 8px rgba(255, 255, 255, 0.1) inset;
  transition: all 0.3s ease;
  max-height: 35dvh;
}

.composer textarea {
  resize: vertical;
}

.composer .btn {
  flex: 0 0 auto;
}

/* Send button: pill shape to match the rounded input aesthetic */
.composer #send {
  border-radius: 999px;
  padding: 12px 22px;
  background: linear-gradient(135deg, var(--accent, #4c8dff), rgba(76, 141, 255, 0.8));
  border: 1px solid rgba(76, 141, 255, 0.3);
  font-weight: 600;
}

.composer #send:hover {
  background: linear-gradient(135deg, rgba(76, 141, 255, 0.95), rgba(76, 141, 255, 0.7));
}

/* Attach button: match pill shape */
.composer #attachBtn {
  border-radius: 999px;
}

.composer textarea {
  min-width: 0;
  width: auto;
}

.composer input:focus,
.composer textarea:focus {
  outline: none;
  border-color: rgba(76, 141, 255, 0.5);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.2),
    0 2px 8px rgba(255, 255, 255, 0.1) inset,
    0 0 0 3px rgba(76, 141, 255, 0.1);
  transform: translateY(-1px);
}

/* Glass-like 3D Button Styles */
.btn,
.glass-btn {
  padding: 14px 20px;
  border-radius: 16px;
  border: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-family: 'Poppins', 'Noto Sans SC', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.025em;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    0 4px 16px rgba(255, 255, 255, 0.1) inset,
    0 1px 0 rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn::before,
.glass-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s ease;
}

.btn:hover::before,
.glass-btn:hover::before {
  left: 100%;
}

.btn:hover,
.glass-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.3),
    0 6px 20px rgba(255, 255, 255, 0.15) inset,
    0 2px 0 rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.2);
}

.btn:active,
.glass-btn:active {
  transform: translateY(-1px) scale(0.98);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.2),
    0 2px 8px rgba(255, 255, 255, 0.1) inset;
}

.btn.attached,
#attachBtn.attached {
  background: linear-gradient(180deg, #10b981, #34d399) !important;
  box-shadow: var(--shadow-md), 0 0 0 3px rgba(16, 185, 129, .25) inset !important;
  border-color: #10b981 !important;
  color: #fff !important;
  transform: none !important;
}

/* Windows Speech Recognition button styling */
.windows-voice-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border: 2px solid #34d399 !important;
  position: relative;
}

.windows-voice-btn:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
}

.windows-voice-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.windows-voice-btn::after {
  content: "★";
  position: absolute;
  top: -5px;
  right: -5px;
  background: #fbbf24;
  color: #92400e;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

#attachBtn {
  display: inline-flex;
}

.danger {
  padding: 12px 16px;
  border-radius: 12px;
  border: 0;
  background: linear-gradient(180deg, var(--danger), var(--danger-2));
  color: #fff;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  box-shadow: var(--shadow-md);
}

.btn,
.primary,
.danger,
button:not(.icon-btn) {
  font-family: inherit;
  font-size: 16px;
}

.btn:hover,
.primary:hover,
.danger:hover,
button:not(.icon-btn):hover {
  filter: brightness(1.05);
}

.btn:active,
.primary:active,
.danger:active,
button:not(.icon-btn):active {
  transform: translateY(1px);
}

.btn:disabled,
.primary:disabled,
.danger:disabled,
button:not(.icon-btn):disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

button:not(.icon-btn):not(.btn):not(.primary):not(.danger) {
  padding: 12px 16px;
  border-radius: 12px;
  border: 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: #fff;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  box-shadow: var(--shadow-md);
}

.btn .spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, .6);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-left: 8px;
}

.btn.loading .label {
  opacity: .7;
}

.btn.loading .spinner {
  display: inline-block;
}

.icon-btn {
  padding: 4px 6px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.icon-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, .08);
}

.bubble-ctrls {
  margin-top: 6px;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.media {
  margin-top: 8px;
}

.media img,
.media video,
.media audio,
.media iframe {
  max-width: min(560px, 95vw);
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  aspect-ratio: 16/9;
}

/* GIFs at 50% of default media size; tagged in app.js. Mirrored from EN. */
.media-gif img {
  max-width: min(280px, 50vw);
  aspect-ratio: auto;
}

/* Progress bars (KRs) */
.progress {
  position: relative;
  width: 100%;
  height: 10px;
  background: rgba(255, 255, 255, .08);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
}

.progress .progress-inner {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: inset 0 0 8px rgba(0, 0, 0, .25);
}

.progress .progress-label {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

.kr-btn,
.hab-btn {
  padding: 6px 10px;
  border-radius: 8px;
  border: 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-md);
}

.kr-btn:hover,
.hab-btn:hover {
  filter: brightness(1.06);
}

.kr-btn:active,
.hab-btn:active {
  transform: translateY(1px);
}

/* Chips / badges */
.chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.6;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .12);
}

.badge {
  background: linear-gradient(180deg, #f59e0b, #fbbf24);
  color: #1f1303;
  border-color: rgba(0, 0, 0, .1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

/* Auth pages */
.auth-body {
  background: var(--bg);
  color: var(--fg);
}

.auth-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
}

.auth-sidebar {
  padding: 1rem;
  border-right: 1px solid var(--border);
  background: rgba(127, 127, 127, 0.08);
  position: sticky;
  top: 0;
  align-self: start;
  height: 100dvh;
  overflow: auto;
}

.side-nav a {
  position: relative;
  z-index: 21;
}

.auth-main {
  position: relative;
  z-index: 1;
}

.auth-main {
  padding: 2rem;
  position: relative;
}

/* Profile page specific - hide/show sections */
.auth-main.profile-page fieldset,
.auth-main.profile-page h1:not(.welcome-header) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.auth-main.profile-page fieldset.visible,
.auth-main.profile-page h1.visible {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Modern iOS-like form styling */
.auth-form {
  display: grid;
  gap: 1rem;
  max-width: 600px;
}

.auth-form input,
.auth-form select,
.auth-form textarea {
  width: 100%;
  padding: 0.75rem 0.875rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(135deg, #1e293b, #334155);
  color: #f1f5f9;
  font-size: 16px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Style dropdown options for auth form selects */
.auth-form select option {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
  padding: 0.75rem !important;
  font-weight: 500;
}

.auth-form input:focus,
.auth-form select:focus,
.auth-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(76, 141, 255, 0.1);
  transform: translateY(-1px);
}

/* Modern iOS-style buttons */
.primary,
.btn,
button:not(.icon-btn):not(.danger) {
  padding: 0.75rem 1.25rem;
  border-radius: 12px;
  border: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.025em;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.primary::before,
.btn::before,
button:not(.icon-btn):not(.danger)::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.primary:hover::before,
.btn:hover::before,
button:not(.icon-btn):not(.danger):hover::before {
  left: 100%;
}

.primary:hover,
.btn:hover,
button:not(.icon-btn):not(.danger):hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.primary:active,
.btn:active,
button:not(.icon-btn):not(.danger):active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Modern form labels and help text */
.auth-form label {
  font-weight: 600;
  font-size: 14px;
  color: var(--fg);
  margin-bottom: 0.25rem;
  display: block;
}

.auth-form label::after {
  content: '';
  display: block;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.3s ease;
}

.auth-form label:hover::after {
  width: 100%;
}

/* Modern card-style fieldsets */
fieldset {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

fieldset:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

fieldset legend {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--accent);
  padding: 0 0.75rem;
  margin-left: -0.75rem;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Help text styling */
.help-text {
  font-size: 13px;
  color: var(--muted);
  margin-top: 0.25rem;
  line-height: 1.4;
  display: block;
}

.example-text {
  font-size: 13px;
  color: var(--accent);
  font-style: italic;
  margin-top: 0.25rem;
  display: block;
}

/* Button groups */
.btn-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.75rem 0;
}

.btn-group .btn {
  flex: 1;
  min-width: 120px;
  justify-content: center;
}

/* Journal Calendar button now uses default button styling */

/* View Journals button styling */
.top-left a[href="./journal.html"],
.top-right a[href="./journal.html"] {
  background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
  color: white;
  border: none;
  box-shadow: 0 4px 15px rgba(108, 92, 231, 0.3);
  transition: all 0.3s ease;
  text-decoration: none;
}

.top-left a[href="./journal.html"]:hover,
.top-right a[href="./journal.html"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(108, 92, 231, 0.4);
  text-decoration: none;
}

.top-left a[href="./journal.html"]:active,
.top-right a[href="./journal.html"]:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(108, 92, 231, 0.3);
}

/* Status badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.status-badge.active {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-badge.paused {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-badge.done {
  background: rgba(139, 92, 246, 0.2);
  color: #8b5cf6;
  border: 1px solid rgba(139, 92, 246, 0.3);
}

/* AI Response Formatting */
.ai-response {
  line-height: 1.6;
  color: var(--fg);
}

.ai-response h4 {
  color: var(--accent);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 1.5rem 0 0.75rem 0;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid rgba(76, 141, 255, 0.2);
}

.ai-response ul,
.ai-response ol {
  margin: 0.5rem 0 1rem 1.5rem;
  padding: 0;
}

.ai-response li {
  margin-bottom: 0.5rem;
  padding-left: 0.25rem;
}

.ai-response p {
  margin: 0.75rem 0;
  padding: 0;
}

.ai-response p strong {
  color: var(--accent);
  font-weight: 600;
}

.ai-response p em {
  color: var(--muted);
  font-style: italic;
}

.row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.side-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
}

.muted {
  opacity: 0.7;
}

/* Side navigation for profile */
.side-nav {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.side-nav a {
  color: var(--fg);
  text-decoration: none;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  font-weight: 600;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.side-nav a:hover {
  background: rgba(255, 255, 255, .12);
  transform: translateX(4px);
}

.side-nav a:active {
  transform: translateY(1px) translateX(4px);
}

.side-nav a.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.side-nav a.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: rgba(255, 255, 255, 0.8);
}

/* Group highlighting for related sections */
.side-nav a.group-active {
  background: rgba(76, 141, 255, 0.1);
  border-color: rgba(76, 141, 255, 0.3);
  color: var(--accent);
}

.side-nav a.group-active:hover {
  background: rgba(76, 141, 255, 0.2);
}

/* Navigation Group Styles */
.nav-group {
  margin-bottom: 4px;
}

.nav-group-header {
  color: var(--fg);
  text-decoration: none;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  font-weight: 600;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: block;
  width: 100%;
  text-align: left;
}

.nav-group-header:hover {
  background: rgba(255, 255, 255, .12);
  transform: translateX(4px);
}

.nav-group-header:active {
  transform: translateY(1px) translateX(4px);
}

.nav-group-items {
  margin-top: 4px;
  margin-left: 16px;
}

.nav-group-items a {
  color: var(--fg);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .06);
  font-weight: 500;
  transition: all 0.2s ease;
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
}

.nav-group-items a:hover {
  background: rgba(255, 255, 255, .08);
  transform: translateX(2px);
}

.nav-group-items a:active {
  transform: translateY(1px) translateX(2px);
}

/* Navigation visibility classes - bypass CSS specificity issues */
.nav-hidden {
  display: none !important;
}

.nav-visible {
  display: block !important;
}

.mobile-nav {
  display: none;
  margin: 8px 0 12px;
}

.mobile-nav select {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, #8b5cf6, #a855f7);
  color: var(--fg);
}

/* Large tablet breakpoint */
@media (max-width: 1024px) {
  .chat-inner {
    max-width: 100%;
    padding: 0 8px;
  }

  .messages {
    padding: 16px 12px;
  }

  .bubble {
    max-width: 80%;
  }
}

/* Tablet breakpoint */
@media (max-width: 768px) {
  .messages {
    overflow-x: hidden;
  }

  .row {
    max-width: 100%;
  }

  .row .avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }

  .bubble {
    min-width: 0;
  }

  .grid-header {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "left center" "right right";
    row-gap: 8px;
    padding: 8px 12px;
  }

  .top-right {
    grid-area: right;
    justify-self: stretch;
    display: flex;
    gap: 8px;
    justify-content: center;
  }

  .top-right .btn {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    font-size: 0.9rem;
  }

  .brand-line {
    flex-wrap: wrap;
  }

  .messages {
    padding: 14px 12px;
  }

  .bubble {
    max-width: 85%;
  }

  .media img,
  .media video,
  .media iframe {
    max-width: 100%;
  }

  .auth-layout {
    grid-template-columns: 1fr;
  }

  .auth-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: calc(env(safe-area-inset-top, 0px));
    z-index: 20;
    height: auto;
    background: var(--bg-solid);
    padding-top: calc(env(safe-area-inset-top, 0px));
    overflow: visible;
  }

  .auth-main {
    padding: 1rem;
    margin-top: 0.5rem;
  }

  .auth-sidebar {
    display: none;
  }

  .mobile-nav {
    display: block;
  }

  .row-2 {
    grid-template-columns: 1fr;
  }

  /* Touch-friendly buttons - optimized for mobile */
  .btn {
    min-height: 36px;
    min-width: 36px;
    padding: 8px 12px;
    font-size: 0.9rem;
  }

  /* Composer improvements - better mobile layout */
  .composer {
    gap: 6px;
    padding: 10px;
    flex-wrap: nowrap;
    align-items: flex-end;
  }

  .composer textarea {
    min-height: 36px;
    padding: 10px 12px;
    font-size: 16px;
    /* Prevents zoom on iOS */
    flex: 1;
  }

  .composer .btn {
    min-height: 36px;
    padding: 8px 12px;
    flex-shrink: 0;
  }
}

/* Phone breakpoint */
@media (max-width: 480px) {
  .grid-header {
    grid-template-columns: 1fr;
    grid-template-areas: "center" "left" "right";
    row-gap: 8px;
    padding: 8px 12px;
  }

  .top-left,
  .top-right {
    justify-self: stretch;
    display: flex;
    gap: 8px;
  }

  .top-left .btn,
  .top-right .btn {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    font-size: 0.85rem;
  }

  .brand-select,
  .brand {
    font-size: 0.85rem;
    padding: 8px 10px;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .chat-inner {
    padding: 0 4px;
    overflow: hidden;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
  }

  .messages {
    padding: 12px 4px;
    width: calc(100vw - 8px);
    max-width: calc(100vw - 8px);
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .row {
    max-width: 100%;
  }

  .row .avatar {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }

  .bubble {
    max-width: calc(100% - 46px);
    padding: 10px 12px;
    font-size: 0.95rem;
    min-width: 0;
  }

  .composer {
    gap: 4px;
    padding: 8px;
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .composer textarea {
    padding: 10px 12px;
    font-size: 16px;
    /* Prevents zoom on iOS */
    border-radius: 12px;
    min-height: 36px;
    flex: 1;
  }

  .composer .btn {
    padding: 8px 10px;
    font-size: 0.85rem;
    border-radius: 10px;
    min-height: 36px;
    flex-shrink: 0;
  }

  /* Optimize button layout for small screens */
  .composer .btn:not(#send) {
    min-width: 36px;
    max-width: 60px;
  }

  #send {
    min-width: 50px;
    max-width: 80px;
  }
}

/* Small phone breakpoint */
@media (max-width: 360px) {
  .messages {
    padding: 8px 6px;
  }

  .bubble {
    max-width: 95%;
    padding: 8px 10px;
    font-size: 0.9rem;
  }

  .composer {
    padding: 6px;
    gap: 3px;
  }

  .composer textarea {
    padding: 8px 10px;
    font-size: 15px;
    min-height: 32px;
  }

  .composer .btn {
    padding: 6px 8px;
    font-size: 0.8rem;
    min-height: 32px;
    min-width: 32px;
  }

  /* Ultra-compact button layout */
  .composer .btn:not(#send) {
    min-width: 32px;
    max-width: 50px;
  }

  #send {
    min-width: 45px;
    max-width: 70px;
  }
}

/* Mobile-specific improvements */
@media (max-width: 768px) {

  /* Ensure composer stays above mobile browser UI */
  .composer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    /* Add extra padding for mobile browsers with dynamic UI */
    padding-bottom: calc(var(--safe-area-inset-bottom) + 20px);
  }

  /* Adjust chat container to account for fixed composer */
  .chat {
    padding-bottom: calc(120px + var(--safe-area-inset-bottom));
  }

  /* Ensure messages container has proper spacing */
  .messages {
    padding-bottom: 20px;
  }

  /* Prevent text selection on buttons for better touch experience */
  .btn {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* Improve touch targets */
  .btn,
  .bubble,
  select {
    touch-action: manipulation;
  }

  /* Compact voice button text for mobile */
  #talkBtn,
  #windowsTalkBtn {
    font-size: 0.8rem;
    padding: 6px 8px;
  }

  /* Hide voice button text on very small screens, show only icon */
  @media (max-width: 480px) {

    #talkBtn,
    #windowsTalkBtn {
      min-width: 36px;
      max-width: 36px;
      padding: 6px;
    }

    #talkBtn::after,
    #windowsTalkBtn::after {
      content: '';
    }

    /* Compact attach button */
    #attachBtn {
      min-width: 36px;
      max-width: 50px;
      padding: 6px 8px;
      font-size: 0.8rem;
    }
  }

  /* Handle dynamic viewport height changes */
  .chat {
    min-height: 100vh;
    min-height: 100dvh;
    /* Dynamic viewport height */
    min-height: calc(var(--vh, 1vh) * 100);
    /* Fallback for browsers that don't support dvh */
  }

  /* Better scrolling on mobile */
  .messages {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    max-height: calc(100vh - 200px);
    /* Ensure messages don't overflow */
    overflow-y: auto;
  }

  /* Prevent zoom on input focus (iOS) */
  input,
  textarea,
  select {
    font-size: 16px;
  }

  /* Improve file input visibility */
  #filePick {
    position: absolute;
    left: -9999px;
  }

  /* Better media handling */
  .media img,
  .media video {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
  }

  /* Improve dropdown visibility on mobile */
  select {
    min-height: 44px;
    padding: 12px 16px;
  }
}

@keyframes spin {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

/* ========== GAMIFICATION STYLES ========== */

.gamification-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.3s ease;
}

.gamification-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.gamification-toast-content {
  background: linear-gradient(135deg, #4CAF50, #45a049);
  color: white;
  padding: 16px 20px;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(76, 175, 80, 0.4);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 300px;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.gamification-toast-icon {
  font-size: 24px;
  animation: bounce 0.6s ease;
}

.gamification-toast-text {
  flex: 1;
}

.gamification-toast-points {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 4px;
}

.gamification-toast-reason {
  font-size: 14px;
  opacity: 0.9;
}

.gamification-toast-total {
  font-size: 12px;
  opacity: 0.8;
  font-weight: bold;
}

@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-10px);
  }

  60% {
    transform: translateY(-5px);
  }
}

/* Dark theme adjustments */
@media (prefers-color-scheme: dark) {
  .gamification-toast-content {
    background: linear-gradient(135deg, #2e7d32, #1b5e20);
    box-shadow: 0 8px 28px rgba(46, 125, 50, 0.4);
  }
}

/* Mobile responsive */
@media (max-width: 768px) {
  .gamification-toast {
    left: 10px;
    right: 10px;
    top: 10px;
  }

  .gamification-toast-content {
    min-width: auto;
    padding: 12px 16px;
  }
}

/* ========== CURRENT DATE INDICATOR STYLES ========== */

.current-date-indicator {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40px 0;
  z-index: 1;
}

.current-date-line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, #8b5cf6, transparent);
  margin: 0 20px;
  opacity: 0.6;
}

.current-date-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #8b5cf6, #a855f7);
  color: white;
  padding: 16px 24px;
  border-radius: 50px;
  box-shadow:
    0 8px 32px rgba(139, 92, 246, 0.4),
    0 4px 16px rgba(139, 92, 246, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.1);
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  min-width: 280px;
  animation: pulse 3s ease-in-out infinite;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.current-date-icon {
  font-size: 20px;
  animation: bounce 2s ease-in-out infinite;
}

.current-date-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.current-date-label {
  font-size: 12px;
  opacity: 0.9;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.current-date-value {
  font-size: 13px;
  opacity: 0.95;
  font-weight: 500;
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
    box-shadow:
      0 8px 32px rgba(139, 92, 246, 0.4),
      0 4px 16px rgba(139, 92, 246, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }

  50% {
    transform: scale(1.02);
    box-shadow:
      0 12px 40px rgba(139, 92, 246, 0.5),
      0 6px 20px rgba(139, 92, 246, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
}

@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-4px);
  }

  60% {
    transform: translateY(-2px);
  }
}

/* Mobile responsive for current date indicator */
@media (max-width: 768px) {
  .current-date-badge {
    min-width: 240px;
    padding: 12px 20px;
    font-size: 13px;
  }

  .current-date-icon {
    font-size: 18px;
  }

  .current-date-label {
    font-size: 12px;
  }

  .current-date-value {
    font-size: 12px;
  }

  .current-date-line {
    margin: 0 10px;
  }
}

/* ========== LOGOUT SYSTEM STYLES ========== */

.logout-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  z-index: 10000;
  opacity: 0;
  transition: all 0.3s ease;
}

.logout-message.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.logout-message-content {
  background: linear-gradient(135deg, #4CAF50, #45a049);
  color: white;
  padding: 24px 32px;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(76, 175, 80, 0.4);
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 320px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  text-align: center;
}

.logout-message-icon {
  font-size: 32px;
  animation: bounce 0.6s ease;
}

.logout-message-text {
  flex: 1;
}

.logout-message-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 4px;
}

.logout-message-desc {
  font-size: 14px;
  opacity: 0.9;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .logout-message-content {
    min-width: auto;
    padding: 20px 24px;
    flex-direction: column;
    text-align: center;
  }

  .logout-message-icon {
    font-size: 28px;
  }
}

/* ========== EDGE COMPATIBILITY STYLES ========== */

/* Edge reload button styling */
#edgeReloadBtn {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: 1000 !important;
  padding: 8px 12px !important;
  background: linear-gradient(135deg, #0078d4, #005a9e) !important;
  color: white !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  opacity: 0.8 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(0, 120, 212, 0.3) !important;
  backdrop-filter: blur(10px) !important;
}

#edgeReloadBtn:hover {
  opacity: 1 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 120, 212, 0.4) !important;
}

#edgeReloadBtn:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(0, 120, 212, 0.3) !important;
}

/* Edge-specific message styling */
.edge-compatibility-notice {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 152, 0, 0.1));
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 8px 0;
  font-size: 14px;
  color: #f57c00;
}

.edge-compatibility-notice strong {
  color: #e65100;
}

/* Mobile adjustments for Edge */
@media (max-width: 768px) {
  #edgeReloadBtn {
    bottom: 15px !important;
    right: 15px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
}

/* Hide Edge button on non-Edge browsers */
@media not all and (-ms-high-contrast: active),
(-ms-high-contrast: none) {

  /* This hides the button on non-Edge browsers if needed */
  #edgeReloadBtn.non-edge {
    display: none !important;
  }
}

/* Accessibility improvements */
.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.editable-photo-thumb {
  cursor: zoom-in;
}

/* ─── Accessibility: 50+ user enhancements ─── */

/* Enforce minimum touch targets on all interactive elements */
button,
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
[role="button"],
input[type="checkbox"],
input[type="radio"] {
  min-height: 44px;
  min-width: 44px;
}

/* Larger close buttons */
.modal-close,
.panel-close,
.close-btn,
button[aria-label="Close"],
[data-action="closeModal"] {
  min-width: 44px;
  min-height: 44px;
  font-size: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Ensure readable body text */
body {
  font-size: max(1rem, 16px);
  line-height: 1.6;
}

/* Better contrast on secondary/muted text */
.stat-label,
.muted,
.text-muted {
  color: #94a3b8;
}

/* Checkbox/radio larger tap target */
label:has(input[type="checkbox"]),
label:has(input[type="radio"]),
.setting-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  min-height: 44px;
  cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

/* ─── Mobile-specific fixes ─── */

@media (max-width: 640px) {
  /* M4: Modals must fit mobile screens */
  .modal-content,
  .modal-dialog,
  [class*="modal-content"] {
    max-width: min(95vw, 600px) !important;
    margin: 0.5rem auto;
    border-radius: 16px;
  }

  /* M6: Grid layouts — prevent overflow on small phones */
  [style*="grid-template-columns"][style*="minmax(3"],
  [style*="grid-template-columns"][style*="minmax(2"] {
    grid-template-columns: 1fr !important;
  }

  /* M7: Force single column on auth pages */
  .auth-shell,
  .auth-grid {
    grid-template-columns: 1fr !important;
  }

  /* Reduce excess padding on mobile */
  .modal-body {
    padding: 1rem 1.25rem;
  }

  .modal-header {
    padding: 1.25rem 1.25rem 0.75rem;
  }

  /* Ensure floating guide tooltip fits screen */
  .guide-tooltip {
    width: clamp(260px, 88vw, 400px) !important;
    max-width: 88vw !important;
  }
}

@media (max-width: 480px) {
  /* M8: Wizard step indicators — prevent overflow */
  .wizard-step,
  .step-indicator,
  [class*="step-item"] {
    min-width: 60px;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }

  /* Reduce wizard content padding on phones */
  .wizard-content,
  .wizard-body,
  .wizard-stage__body {
    padding: 0.75rem;
  }

  /* User dropdown — prevent overflow on small screens */
  .user-dropdown {
    min-width: 200px;
    right: 0;
    left: auto;
  }
}

/* ==========================================================================
   Lucide SVG icon helper — pairs with src/shared/icons.js (Phase 3B).
   Rules duplicated here so pages that load styles.css (login, register,
   journal, chat) get icon rendering without needing main.css.
   ========================================================================== */
[data-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

[data-icon] > svg {
  width: 1em;
  height: 1em;
  display: block;
  stroke-width: 2;
  color: inherit;
  fill: none;
  stroke: currentColor;
  flex-shrink: 0;
}

[data-icon]:not([data-icon-rendered]) {
  min-width: 1em;
  min-height: 1em;
}
/* Wizard-launch chip — tappable link rendered under an assistant bubble when
   the reply recommends a wizard (2026-07-05 wizard discovery). */
.wizard-launch-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  margin-right: 0.5rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent-purple, #9479ff) 45%, transparent);
  background: color-mix(in srgb, var(--accent-purple, #9479ff) 12%, transparent);
  color: var(--fg, #e5e7eb);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  min-height: 44px;
  box-sizing: border-box;
}
.wizard-launch-chip:hover {
  background: color-mix(in srgb, var(--accent-purple, #9479ff) 22%, transparent);
}


/* External citation links in chat (2026-08-27) — allowlisted by chat-ext-links.js. */
.bubble-text a.chat-ext-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; word-break: break-all; }
.bubble-text a.chat-ext-link:hover, .bubble-text a.chat-ext-link:focus-visible { text-decoration-thickness: 2px; }

/* Hand-off blocks in chat (2026-08-30): the paste-ready part of a reply with its own Copy button. */
.copy-block { margin: 0.6rem 0; border: 1px solid var(--border, rgba(127,127,127,0.35)); border-radius: 10px; background: var(--surface-2, rgba(127,127,127,0.08)); overflow: hidden; }
.copy-block-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.35rem 0.6rem; font-size: 0.8rem; color: var(--text-muted, #6b6b78); border-bottom: 1px solid var(--border, rgba(127,127,127,0.25)); }
.copy-block-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copy-block-btn { flex: none; font: inherit; font-size: 0.8rem; padding: 0.2rem 0.65rem; border-radius: 999px; border: 1px solid var(--accent-purple, #7c6cff); background: transparent; color: var(--accent-purple, #7c6cff); cursor: pointer; min-height: 32px; }
.copy-block-btn:hover, .copy-block-btn:focus-visible { background: var(--accent-purple, #7c6cff); color: #fff; outline: none; }
.copy-block-btn.is-copied { background: var(--success, #3fa96a); border-color: var(--success, #3fa96a); color: #fff; }
.copy-block-body { margin: 0; padding: 0.6rem 0.75rem; white-space: pre-wrap; word-break: break-word; font: inherit; font-size: 0.92em; line-height: 1.45; max-height: 24rem; overflow: auto; }
.bubble-prose + .copy-block, .copy-block + .bubble-prose { margin-top: 0.5rem; }