/* tiers.css — React mini-app theme variables + z-index scale */

:root {
  /* z-index scale — single source of truth */
  --z-vanilla: 1000;   /* vanilla modals, toasts, dropdowns */
  --z-react: 2000;     /* React overlays, settings, model selector */
  --z-overlay: 3000;   /* cap exhaustion, onboarding (future) */

  /* ── Appearance: canonical color tokens, aligned 1:1 with native theme/Color.kt.
     The default shell is Verse Dark (these base values); the `:root[data-shell=…]`
     blocks below swap the accent + background ladder for the other shells. ── */
  --bg-base: #1A1726;
  --surface-recessed: #131019;
  --surface-low: #221E2E;
  --surface-1: #282333;
  --surface-2: #322C45;
  --surface-3: #3A3353;
  --outline-color: #443D5E;
  /* Hover/active border - one step brighter than --outline-color, derived so it tracks the shell. */
  --outline-bright: color-mix(in srgb, var(--outline-color) 78%, #fff);
  --accent: #8B5CF6;
  --accent-deep: #6D28D9;
  --accent-soft: #A78BFA;
  --accent-bright: #B794FF;
  --accent-indigo: #6366F1;
  --accent-glow: rgba(139, 92, 246, 0.20);
  --text-primary: #F2EFF9;
  --text-secondary: #CECEDD;
  --text-muted: #9B94AC;
  --error: #EE5A5A;
  --success: #34D399;
  --warning: #FBBF24;

  /* Legacy aliases — kept so existing var(--surface-bg)/var(--accent-hover)/var(--danger)
     consumers shift to the canonical palette without a hardcoded-hex sweep. */
  --surface-bg: var(--bg-base);
  --surface-card: rgba(255, 255, 255, 0.05);
  --surface-elevated: rgba(255, 255, 255, 0.08);
  --surface-border: rgba(255, 255, 255, 0.1);
  --accent-hover: var(--accent-deep);
  --danger: var(--error);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* Global custom chat background — set by lib/appearance.ts. */
  --chat-bg-image: none;
  --chat-bg-dim: 0.4;

  /* ── Motion tokens — crisp & iOS-like. MIRROR of web/app/src/lib/motion/tokens.ts (keep in sync;
     tokens.test.ts asserts they match). Durations: eased timings for opacity/color/CSS-driven
     surfaces; positional motion uses the TS spring presets. ── */
  --dur-instant: 80ms;     /* state flips that should read immediate but not janky */
  --dur-micro: 140ms;      /* taps, toggles, hover, chip select */
  --dur-fast: 200ms;       /* backdrops, fades, small reveals */
  --dur-standard: 280ms;   /* sheets/modals/overlay slide — the workhorse */
  --dur-emphasis: 420ms;   /* hero / shared-element, rare */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);  /* the existing house curve — kept */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);        /* exits / dismiss-away */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);  /* symmetric (scroll, color) */
  --distance-sheet: 100%;  /* off-screen Y for sheets */
  --distance-rise: 16px;   /* modal rise */
  --distance-stagger: 8px; /* list item entrance offset */
  --stagger-step: 28ms;    /* per-item delay in a staggered list */
}

/* ── App shells: swap the accent + background ladder. Verse Dark is the base :root above.
   Values mirror APP/.../theme/AppShellTheme.kt so web and native render identically.
   Applied by lib/appearance.ts via `document.documentElement.dataset.shell`. ── */
:root[data-shell="deep-space"] {
  --bg-base: #0D0F1A; --surface-recessed: #08090F; --surface-low: #13151F;
  --surface-1: #13151F; --surface-2: #1A1E2E; --surface-3: #222842; --outline-color: #2A3350;
  --accent: #3B82F6; --accent-deep: #1D4ED8; --accent-soft: #93C5FD;
  --accent-bright: #60A5FA; --accent-indigo: #2563EB; --accent-glow: rgba(59, 130, 246, 0.20);
  --text-primary: #E8EFFF; --text-secondary: #C2D3F0; --text-muted: #7A90B8;
}
:root[data-shell="crimson-study"] {
  --bg-base: #1A0E14; --surface-recessed: #110A0E; --surface-low: #221018;
  --surface-1: #221018; --surface-2: #2E1422; --surface-3: #3A1A2A; --outline-color: #4A2434;
  --accent: #F43F5E; --accent-deep: #BE123C; --accent-soft: #FDA4AF;
  --accent-bright: #FB7185; --accent-indigo: #E11D48; --accent-glow: rgba(244, 63, 94, 0.20);
  --text-primary: #FFE4E8; --text-secondary: #E8C4CC; --text-muted: #A07080;
}
:root[data-shell="forest-ink"] {
  --bg-base: #0C1610; --surface-recessed: #080E0A; --surface-low: #122318;
  --surface-1: #122318; --surface-2: #183021; --surface-3: #1E3A2A; --outline-color: #244A34;
  --accent: #34D399; --accent-deep: #059669; --accent-soft: #6EE7B7;
  --accent-bright: #4ADE80; --accent-indigo: #10B981; --accent-glow: rgba(52, 211, 153, 0.20);
  --text-primary: #E4FAF0; --text-secondary: #BAE0CB; --text-muted: #6A9E7A;
}
:root[data-shell="neon-district"] {
  --bg-base: #15102A; --surface-recessed: #0E0A18; --surface-low: #1E1234;
  --surface-1: #1E1234; --surface-2: #281840; --surface-3: #32204E; --outline-color: #3E2A5E;
  --accent: #E879F9; --accent-deep: #9333EA; --accent-soft: #F5D0FE;
  --accent-bright: #F0ABFC; --accent-indigo: #A855F7; --accent-glow: rgba(232, 121, 249, 0.20);
  --text-primary: #FBF0FF; --text-secondary: #E5CCFA; --text-muted: #9070B0;
}

/* React overlay screen — matches vanilla's .overlay-screen */
.react-overlay-screen {
  position: fixed;
  inset: 0;
  z-index: var(--z-react);
  background: var(--surface-bg);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Pull-to-refresh: keep vertical pan, and contain overscroll so a top-pull never triggers the
     Chrome-Android native pull-to-refresh / overscroll chaining. (The iOS rubber-band is suppressed by
     the PTR handler's preventDefault, not this — this is the belt-and-suspenders fallback.) */
  touch-action: pan-y;
  overscroll-behavior-y: contain;
}

/* .view has `margin: 0 auto` (for the vanilla block layout). Inside this flex column, those auto
   cross-axis margins otherwise shrink .view to its content width — fine when the content is wide
   (Browse/Stats) but it collapses narrow content like the Chats list. Force .view to fill (still
   capped by its own max-width:920px) so React overlays match the vanilla full-width layout. */
.react-overlay-screen > .view {
  width: 100%;
}

/* Top status-bar / safe-area spacer that sits ABOVE a .chat-header in the React screens. It MUST
   match the header background (--surface-low) so the notch/status-bar gap is seamless with the header —
   previously each screen inlined this spacer with no background, so the gap showed the screen base
   color and clashed with the header. One class keeps it consistent across the whole app. */
.react-top-spacer {
  height: 45px;
  flex-shrink: 0;
  background: var(--surface-low);
}

/* Bug 2 — notch / status-bar safe-area inset for the MAIN TAB routes. The tab pages render at top:0
   with no top inset, so their content sat under the notch / status bar. Reserve the inset as top
   padding so the first content clears the notch, while leaving the strip TRANSPARENT — as the page
   scrolls, the hero / cards pass visibly under the notch (no solid bar hiding them). Scoped to tab
   routes via the `react-tab-route` body class App toggles. DETAIL / overlay screens are untouched:
   they keep their solid .react-top-spacer that matches their header. env(safe-area-inset-top)=0 on
   non-notched devices, so this is a no-op there. */
body.react-tab-route .react-overlay-screen {
  padding-top: var(--safe-top);
}

/* PUSH overlays (Settings/Stats/Personas/... - any non-tab route) run edge-to-edge with no tab
   bar below, so give their scroll content home-indicator clearance; without it the last row sits
   inside the iOS swipe zone at scroll end. Tab routes are excluded: their scrollers already stop
   above the tab bar (--tab-bar-clearance). */
body:not(.react-tab-route) .react-overlay-screen {
  padding-bottom: var(--safe-bottom);
}

/* Styled form controls — match app's dark theme */
.react-select {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  background: var(--surface-2);
  color: var(--text-primary);
  border: 1px solid var(--outline-color);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.react-select:focus {
  border-color: var(--accent);
}

.react-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Settings form labels */
.react-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.react-helper {
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 14px;
}

/* Toggle switch — matches vanilla .toggle-switch pattern */
.react-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
  cursor: pointer;
  font-size: 14px;
}

.react-toggle-row.react-toggle-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.react-toggle-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.react-toggle-label {
  color: var(--text-primary);
  font-size: 14px;
}

.react-toggle-desc {
  color: var(--text-muted);
  font-size: 11px;
}

/* Model info bar — current model display */
.react-model-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--outline-color);
  border-radius: var(--radius-sm);
}

.react-model-name {
  font-size: 14px;
  color: var(--text-primary);
}

.react-btn {
  background: var(--accent);
  color: var(--text-primary);
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.react-btn:hover {
  background: var(--accent-hover);
}

.react-error-banner {
  padding: 8px 12px;
  margin-bottom: 12px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-sm);
  color: #ef4444;
  font-size: 12px;
}

/* Theme picker — compact block cards with categories */
.react-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 6px;
}

.react-theme-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: var(--surface-2);
  border: 1px solid var(--outline-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: var(--text-primary);
}

.react-theme-block:hover {
  border-color: var(--accent);
}

.react-theme-block-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.react-theme-swatch {
  display: block;
  width: 100%;
  height: 6px;
  border-radius: 2px;
  flex-shrink: 0;
}

.react-theme-label {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
}

/* Formatting mode toggles — compact block buttons, one row */
.react-format-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 14px;
}

.react-format-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
  background: var(--surface-2);
  border: 1px solid var(--outline-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  user-select: none;
  text-align: center;
  white-space: nowrap;
}

.react-format-chip:hover {
  border-color: var(--accent);
  color: var(--text-muted);
}

.react-format-chip-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--text-primary);
}

/* Model selector modal — with fade animation */
.react-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-react);
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 20px;
  animation: modal-fade-in 0.2s ease forwards;
}

@keyframes modal-fade-in {
  from { background: rgba(0, 0, 0, 0); }
  to { background: rgba(0, 0, 0, 0.7); }
}

.react-modal {
  background: var(--surface-bg);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  max-width: 420px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  animation: modal-slide-up 0.25s ease-out;
}

@keyframes modal-slide-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.react-model-card {
  display: block;
  width: 100%;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--outline-color);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: var(--text-primary);
}

.react-model-card:hover {
  border-color: var(--accent);
}

.react-model-card:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.react-model-card-current {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.react-model-card-locked {
  opacity: 0.5;
  cursor: not-allowed;
  background: #1a1a1a;
  border-color: #3a1a1a;
}

/* Tier borders */
.react-model-gold {
  border-color: rgba(245, 158, 11, 0.5);
  border-width: 2px;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.12);
  padding: 14px 12px;
}

.react-model-gold:hover {
  border-color: rgba(245, 158, 11, 0.8);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.25);
}

.react-model-silver {
  border-color: rgba(148, 163, 184, 0.5);
  border-width: 2px;
  box-shadow: 0 0 12px rgba(148, 163, 184, 0.1);
  padding: 14px 12px;
}

.react-model-silver:hover {
  border-color: rgba(148, 163, 184, 0.7);
}

/* Badge pills */
.react-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  background: #2a2a3e;
  color: var(--text-muted);
}

.react-badge-gold {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}

.react-badge-selected {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent-soft);
}

.react-badge-locked {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
}

/* Usage bar */
.react-usage-bar {
  height: 4px;
  background: #2a2a3e;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 3px;
}

.react-usage-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s;
}

/* Danger button */
.react-btn-danger {
  background: #cc3333;
  color: var(--text-primary);
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.react-btn-danger:hover {
  background: #aa2222;
}

/* Section cards — group related settings */
.react-section-card {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 12px;
}

.react-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.react-section-header {
  font-family: inherit;
}

/* Danger zone */
.react-danger-zone {
  padding: 16px;
  border: 1px solid #3a1a1a;
  border-radius: var(--radius-md);
  background: #1a0a0a;
  margin-top: 18px;
}

.react-danger-zone h3 {
  margin: 0 0 4px;
  font-size: 14px;
  color: #f66;
}

/* ===================================================================
   Appearance settings section (AppearanceSettings.tsx). Uses the shell
   CSS vars so the whole section recolors live with the selected shell.
   =================================================================== */
.appr-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.09em;
  color: var(--text-muted); text-transform: uppercase; margin: 18px 2px 10px;
}
.appr-pro {
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(252,211,77,0.16); color: #FCD34D;
  border: 1px solid rgba(252,211,77,0.35); border-radius: 5px;
  padding: 1px 5px 1px 4px; font-size: 9px; font-weight: 800; letter-spacing: 0.02em;
}

/* Live preview */
.appr-preview {
  border-radius: 14px; overflow: hidden; border: 1px solid var(--surface-border);
  background-color: var(--surface-recessed); background-size: cover; background-position: center;
  margin-bottom: 6px;
}
.appr-pv-head {
  display: flex; align-items: center; gap: 8px; padding: 9px 11px;
  background: color-mix(in srgb, var(--surface-recessed) 72%, transparent);
  border-bottom: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(6px);
}
.appr-pv-av { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-indigo)); }
.appr-pv-name { font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
.appr-pv-status { font-size: 10px; color: var(--accent-soft); margin-left: auto; }
.appr-pv-body { padding: 11px; display: flex; flex-direction: column; gap: 7px; }
.appr-pv-msg { display: flex; }
.appr-pv-msg.user { justify-content: flex-end; }
.appr-pv-bubble {
  max-width: 80%; padding: 8px 11px; font-size: 12.5px; line-height: 1.5;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--surface-1) 92%, transparent);
  border: 1px solid var(--surface-border); border-radius: 12px 12px 12px 4px;
}
.appr-pv-msg.user .appr-pv-bubble {
  color: var(--text-primary); border: none; border-radius: 12px 12px 4px 12px;
  background: color-mix(in srgb, var(--accent-deep) 70%, var(--surface-2));
}
.appr-preview .dialogue-highlight { font-weight: 700; }

/* Shell tiles */
.appr-shell-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.appr-tile {
  background: var(--surface-1); border: 1.5px solid var(--surface-border);
  border-radius: 12px; overflow: hidden; cursor: pointer; padding: 0; text-align: left;
}
.appr-tile.active { border-color: var(--accent); box-shadow: 0 0 0 2.5px var(--accent-glow); }
.appr-tile-frame { display: block; height: 56px; padding: 6px 6px 16px; position: relative; }
.appr-tile-card {
  display: flex; align-items: center; gap: 5px; padding: 4px 6px; border-radius: 6px;
}
.appr-tile-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.appr-tile-lines { flex: 1; display: flex; flex-direction: column; gap: 2.5px; }
.appr-tile-lines span { height: 3px; border-radius: 2px; background: rgba(255,255,255,0.5); }
.appr-tile-lines span:last-child { width: 72%; background: rgba(255,255,255,0.22); }
.appr-tile-btn { width: 20px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.appr-tile-nav { position: absolute; bottom: 0; left: 0; right: 0; height: 13px; display: flex; align-items: center; justify-content: space-around; border-top: 1px solid rgba(255,255,255,0.08); }
.appr-tile-nav i { width: 11px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.14); }
.appr-tile-nav i.on { width: 11px; height: 11px; border-radius: 4px; opacity: 0.5; }
.appr-tile-name {
  display: flex; align-items: center; gap: 6px; padding: 7px 9px;
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
}
.appr-tile.active .appr-tile-name { color: var(--accent-soft); }
.appr-tile-check {
  margin-left: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--accent);
  color: var(--text-primary); font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.appr-tile-name .appr-pro { margin-left: auto; }

/* Background */
.appr-bg-row { display: flex; gap: 9px; }
.appr-bg-opt {
  flex: 1; height: 66px; border-radius: 12px; border: 1.5px solid var(--surface-border);
  position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center; color: var(--text-muted);
  font-size: 11px; font-weight: 600; overflow: hidden;
}
.appr-bg-opt.none { flex-direction: column; gap: 5px; background: var(--surface-1); }
.appr-bg-opt.none.active { border-color: var(--accent); color: var(--accent-soft); }
.appr-bg-none-ic { width: 20px; height: 20px; border: 1.5px dashed rgba(255,255,255,0.25); border-radius: 6px; }
.appr-bg-opt.up { background-color: var(--surface-2); }
.appr-bg-opt.up.active { border-color: var(--accent); box-shadow: 0 0 0 2.5px var(--accent-glow); }
.appr-bg-opt.char { background: radial-gradient(circle at 62% 25%, rgba(255,194,178,.5), transparent 18%), linear-gradient(135deg, #6d4c8f, #26213f); }
.appr-bg-opt.char.active { border-color: var(--accent); box-shadow: 0 0 0 2.5px var(--accent-glow); }
.appr-bg-up-label {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 3px 0; text-align: center;
  background: rgba(10,8,16,0.6); color: var(--text-primary); font-size: 10px; backdrop-filter: blur(2px);
}
.appr-bg-opt .appr-pro { position: absolute; top: 6px; right: 6px; }

.appr-dim {
  margin-top: 10px; background: var(--surface-1); border: 1px solid var(--surface-border);
  border-radius: 12px; padding: 11px 13px;
}
.appr-dim-top { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 9px; }
.appr-dim-val { color: var(--accent-soft); font-weight: 700; font-size: 11.5px; }
.appr-dim-range { width: 100%; accent-color: var(--accent); height: 5px; }
.appr-help { font-size: 11px; color: var(--text-muted); margin-top: 8px; line-height: 1.35; }

/* Dialogue color grid */
.appr-color-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 11px 8px; }
.appr-color { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; position: relative; background: none; border: none; padding: 0; }
.appr-color-sw { width: 40px; height: 40px; border-radius: 11px; border: 2px solid rgba(255,255,255,0.08); position: relative; }
.appr-color-sw.active { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
.appr-color-sw.none { background: var(--surface-1); border: 2px dashed rgba(255,255,255,0.22); display: flex; align-items: center; justify-content: center; }
.appr-color-sw.none::after { content: ''; width: 22px; height: 2px; background: rgba(255,255,255,0.25); transform: rotate(45deg); }
.appr-color-sw.custom { background: conic-gradient(from 0deg, #ff5d5d, #ffd93d, #6bff8f, #43e0ff, #7c8bff, #ff6bdf, #ff5d5d); }
.appr-color-l { font-size: 9.5px; font-weight: 600; color: var(--text-muted); text-align: center; }
.appr-color-l.active { color: var(--accent-soft); }
.appr-color-lock { position: absolute; top: -5px; right: 0; }
.appr-color-lock .appr-pro { padding: 1px 3px; font-size: 8px; }

.appr-custom-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 12.5px; color: var(--text-secondary); }
.appr-custom-input { width: 36px; height: 28px; border: none; background: none; padding: 0; cursor: pointer; border-radius: 8px; }
.appr-custom-hex { margin-left: auto; font-family: monospace; color: var(--text-muted); }

/* Text style toggles */
.appr-ts-card { background: var(--surface-1); border: 1px solid var(--surface-border); border-radius: 12px; padding: 2px 14px; }
.appr-ts-row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 0; background: none; border: none; border-bottom: 1px solid var(--surface-border); cursor: pointer; }
.appr-ts-row:last-child { border-bottom: none; }
.appr-ts-name { font-size: 13.5px; font-weight: 500; color: var(--text-primary); }
.appr-toggle { width: 44px; height: 26px; border-radius: 13px; background: var(--surface-3); border: 1px solid var(--outline-color); position: relative; flex-shrink: 0; transition: background var(--dur-micro) var(--ease-out); }
.appr-toggle.on { background: var(--accent); border-color: var(--accent); }
.appr-toggle i { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: left var(--dur-micro) var(--ease-out); }
.appr-toggle.on i { left: 22px; }

/* Dedicated Personalization: the preview consumes the same presentation choices as chat. */
.pers-preview.character-wallpaper { background-image: linear-gradient(rgba(8,6,14,.55), rgba(8,6,14,.72)), radial-gradient(circle at 70% 24%, #ffc4bb 0 7%, transparent 8%), linear-gradient(135deg, #5d3761, #7e68ae 48%, #201d35) !important; }
.pers-preview.scale-small .appr-pv-bubble { font-size: 11px; }
.pers-preview.scale-large .appr-pv-bubble { font-size: 14px; padding: 10px 13px; }
.pers-preview.scale-xlarge .appr-pv-bubble { font-size: 16px; line-height: 1.6; padding: 12px 15px; }
.pers-preview.density-compact .appr-pv-body { gap: 4px; padding: 8px; }
.pers-preview.density-relaxed .appr-pv-body { gap: 12px; padding: 15px; }
.pers-preview.avatars-hidden .appr-pv-av { visibility: hidden; }
.pers-preview.shape-compact .appr-pv-bubble { border-radius: 8px; }
.pers-preview.shape-soft .appr-pv-bubble { border-radius: 20px; }
.pers-layout-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.pers-pref-group { padding: 10px; border: 1px solid var(--surface-border); border-radius: 12px; background: var(--surface-1); color: var(--text-primary); font-size: 12px; font-weight: 600; }
.pers-pref-options { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.pers-pref-options button { border: 1px solid var(--surface-border); border-radius: 8px; background: var(--surface-2); color: var(--text-secondary); padding: 5px 7px; font: inherit; font-size: 10px; cursor: pointer; }
.pers-pref-options button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 420px) { .pers-layout-grid { grid-template-columns: 1fr; } }
@media (min-width: 860px) {
  .personalization-body { max-width: 1120px; margin: 0 auto; }
  .personalization-body .react-section-card { display: grid; grid-template-columns: minmax(280px, .82fr) minmax(420px, 1.18fr); gap: 0 24px; align-items: start; }
  .personalization-body .react-section-title { grid-column: 1 / -1; }
  .pers-preview-column { position: sticky; top: 16px; }
  .pers-controls-column { min-width: 0; }
  .pers-layout-grid { grid-template-columns: 1fr; }
}
.personalization-entry { width: 100%; display: flex; justify-content: space-between; align-items: center; text-align: left; cursor: pointer; color: var(--text-primary); }
.personalization-entry strong, .personalization-entry small { display: block; }
.personalization-entry small { margin-top: 3px; color: var(--text-muted); font-size: 12px; }
.personalization-entry > span:last-child { color: var(--accent-soft); font-size: 24px; }

/* Personalization is a push overlay, not a tab. Give its header the same explicit inset and
   horizontal rhythm as chat/settings instead of relying on an unstyled header element. */
.personalization-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-height: 64px;
  padding: max(10px, var(--safe-top)) 16px 10px;
  background: var(--surface-low);
  border-bottom: 1px solid var(--surface-border);
}
.personalization-header .back-btn { flex: 0 0 auto; margin: 0; }
.personalization-header h2 { color: var(--text-primary); line-height: 1.15; }
.personalization-header .react-helper { color: var(--text-muted); }

html[data-chat-scale="small"] { --chat-bubble-font-size: 13px; --chat-bubble-line-height: 1.35; }
html[data-chat-scale="large"] { --chat-bubble-font-size: 16px; --chat-bubble-line-height: 1.5; --chat-bubble-pad-y: 10px; --chat-bubble-pad-x: 13px; }
html[data-chat-scale="xlarge"] { --chat-bubble-font-size: 18px; --chat-bubble-line-height: 1.58; --chat-bubble-pad-y: 12px; --chat-bubble-pad-x: 15px; }
html[data-chat-density="compact"] { --chat-bubble-pad-y: 6px; --chat-bubble-pad-x: 9px; }
html[data-chat-density="relaxed"] { --chat-bubble-pad-y: 12px; --chat-bubble-pad-x: 15px; }
html[data-chat-shape="compact"] { --chat-bubble-radius: 9px; --chat-bubble-tail-radius: 3px; }
html[data-chat-shape="soft"] { --chat-bubble-radius: 22px; --chat-bubble-tail-radius: 14px; }
html[data-chat-avatars="hidden"] .msg-avatar { display: none; }
html[data-chat-avatars="grouped"] .msg.assistant + .msg.assistant .msg-avatar, html[data-chat-avatars="grouped"] .msg.user + .msg.user .msg-avatar { visibility: hidden; }
html[data-chat-avatars="hidden"] .dm-avatar-slot { display: none; }
html[data-chat-avatars="grouped"] .msg.dm-grouped .dm-avatar-slot { visibility: hidden; }