/* =============================================
   TOKENS
   ============================================= */
:root, [data-theme='light'] {
  --color-bg: #f5f4f0;
  --color-surface: #faf9f7;
  /* Alias used by two-column “views” card backgrounds */
  --color-surface-1: #faf9f7;
  --color-surface-2: #ffffff;
  --color-surface-offset: #eeecea;
  --color-border: #dbd9d4;
  --color-text: #1e1c18;
  --color-text-muted: #7a7874;
  --color-text-faint: #b5b3af;

  --color-primary: #6b5b4f;
  --color-primary-hover: #574a40;
  --color-primary-highlight: #e8e0d8;
  --color-accent-a: #c5603a;
  --color-accent-b: #4a87a8;

  --radius-sm: .375rem; --radius-md: .625rem; --radius-lg: 1rem;
  --radius-xl: 1.25rem; --radius-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.12);
  --shadow-xl: 0 20px 60px rgba(0,0,0,.16);

  --transition: 180ms cubic-bezier(.16,1,.3,1);

  --text-xs: clamp(.75rem,.7rem+.25vw,.875rem);
  --text-sm: clamp(.875rem,.8rem+.35vw,1rem);
  --text-base: clamp(1rem,.95rem+.25vw,1.125rem);
  --text-lg: clamp(1.125rem,1rem+.75vw,1.5rem);
  --text-xl: clamp(1.5rem,1.2rem+1.25vw,2.25rem);
  --text-2xl: clamp(1.875rem,1.5rem+1.5vw,2.5rem);
  --text-3xl: clamp(2.125rem,1.65rem+1.75vw,2.85rem);

  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body: 'DM Sans', 'Helvetica Neue', sans-serif;

  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;
  --space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;
  --space-12:3rem;--space-16:4rem;
  --safe-top: env(safe-area-inset-top, 0px);
  --native-safe-top-min: 16px;
  /* Sticky .header height — keeps forum back control clickable below the bar */
  --app-header-clearance: 4.5rem;
  --offline-banner-height: 0px;
  --app-top-clearance: calc(var(--app-header-clearance) + var(--offline-banner-height));
  /* Tab bar clearance — rem default scales with OS font size; JS may override with measured height */
  --app-tab-bar-height: 4.375rem;
  /* Fixed post-answer CTA stack above the tab bar (measured in JS when visible) */
  --sticky-next-clearance: 7rem;
  --reflection-image-height: 220px;
  /* Scroll inset inside the answer card (sticky CTAs + tab bar); keeps grey out below the card */
  --chosen-state-scroll-inset: calc(var(--sticky-next-clearance) + var(--app-tab-bar-height));
  /* Scroll clearance above fixed tabs: avoid padding main with full safe-area twice (tab bar already pads bottom inset) */
  --app-main-tab-bottom-pad: calc(var(--app-tab-bar-height) + min(env(safe-area-inset-bottom, 0px), 10px));
  /* Chat tab: fixed tab bar + full safe-area + gap so input/starters never sit under the nav */
  --app-chat-bottom-clearance: calc(var(--app-tab-bar-height) + env(safe-area-inset-bottom, 0px) + var(--space-2));
  /* Reserve top space (sticky header + chat title row); svh avoids mobile browser chrome eating the fold */
  /* Slightly less top reserve so the message thread stays tall even with a higher tab bar */
  --app-chat-modal-max-height: calc(min(100dvh, 100svh) - 3.25rem - var(--app-chat-bottom-clearance));
}

[data-theme='dark'] {
  --color-bg: #141310; --color-surface: #1a1916; --color-surface-2: #1f1e1b;
  --color-surface-offset: #1d1c1a; --color-border: #312f2c;
  --color-text: #cccac6; --color-text-muted: #7a7876; --color-text-faint: #504f4c;
  --color-primary: #a89888; --color-primary-hover: #bfb0a0;
  --color-primary-highlight: #2a2520;
  --color-accent-a: #e07f5c; --color-accent-b: #70afd4;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.2); --shadow-md: 0 4px 16px rgba(0,0,0,.3);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.4); --shadow-xl: 0 20px 60px rgba(0,0,0,.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #141310; --color-surface: #1a1916; --color-surface-2: #1f1e1b;
    --color-surface-offset: #1d1c1a; --color-border: #312f2c;
    --color-text: #cccac6; --color-text-muted: #7a7876; --color-text-faint: #504f4c;
    --color-primary: #a89888; --color-primary-hover: #bfb0a0;
    --color-primary-highlight: #2a2520;
    --color-accent-a: #e07f5c; --color-accent-b: #70afd4;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.2); --shadow-md: 0 4px 16px rgba(0,0,0,.3);
    --shadow-lg: 0 12px 40px rgba(0,0,0,.4); --shadow-xl: 0 20px 60px rgba(0,0,0,.5);
  }
}

/* =============================================
   RESET
   ============================================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;background:var(--color-bg)}
body{min-height:100dvh;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);line-height:1.6;overflow-x:hidden;overflow-wrap:break-word}
button{cursor:pointer;background:none;border:none;font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.skip-link{
  position:absolute;
  left:var(--space-3);
  top:var(--space-3);
  z-index:2000;
  padding:.55rem .85rem;
  border-radius:var(--radius-sm);
  background:var(--color-surface, #fff);
  color:var(--color-text);
  border:1px solid var(--color-border);
  transform:translateY(-160%);
  transition:transform .15s ease;
}
.skip-link:focus,.skip-link:focus-visible{
  transform:translateY(0);
}
.overflow-action--danger{
  color:#9b2c2c;
}
/* Loading screen */
.loading-screen{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-8);
  background:var(--color-bg);
  transition:opacity .32s ease,visibility .32s ease;
}
.loading-screen.is-hiding{opacity:0;visibility:hidden;pointer-events:none}
/* When ready, app is interactive behind the splash. */
.loading-screen.loading-screen--ready{cursor:default}
.loading-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:var(--space-10) var(--space-6);
}
.loading-card::before,.loading-card::after{
  content:'';
  display:block;
  width:72px;
  height:1px;
  background:var(--color-border);
}
.loading-card::before{margin-bottom:var(--space-5)}
.loading-card::after{margin-top:var(--space-5)}
.loading-logo{
  width:64px;
  height:64px;
  object-fit:contain;
  margin-bottom:var(--space-5);
}
.loading-phrase{
  display:flex;
  flex-direction:column;
  gap:.18rem;
  max-width:32ch;
  font-size:.78rem;
  font-weight:700;
  line-height:1.8;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--color-primary);
}

/* =============================================
   LAYOUT
   ============================================= */
.header{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-6);background:color-mix(in oklab,var(--color-bg) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border)}
.is-native .header{padding-top:calc(var(--space-4) + max(var(--safe-top), var(--native-safe-top-min)))}
body.is-native{--app-header-clearance:calc(4.5rem + max(var(--safe-top), var(--native-safe-top-min)))}
.offline-banner{
  position:sticky;
  top:var(--app-header-clearance);
  z-index:99;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:var(--offline-banner-height, 2.5rem);
  padding:var(--space-2) var(--space-4);
  background:color-mix(in oklab, var(--color-text) 8%, var(--color-bg));
  border-bottom:1px solid var(--color-border);
  text-align:center;
}
.offline-banner[hidden]{display:none !important}
.offline-banner p{
  margin:0;
  max-width:36rem;
  font-size:var(--text-xs);
  line-height:1.35;
  color:var(--color-text-muted);
}
.header-actions{display:flex;align-items:center;gap:var(--space-2)}
.main{width:100%;max-width:min(560px,100%);margin:0 auto;padding:var(--space-10) var(--space-6) var(--space-16);display:flex;flex-direction:column;gap:var(--space-5)}
.main.app-main--tabs{padding-bottom:var(--app-main-tab-bottom-pad)}
.main.app-main--tabs:has(#tab-panel-forum:not([hidden])){padding-bottom:0}
/* Answer view: clearance lives inside the white card, not as grey main padding below it */
.main.app-main--tabs:has(#chosen-state:not([hidden])){padding-bottom:min(env(safe-area-inset-bottom,0px),10px);gap:var(--space-3)}
.main.app-main--tabs:has(#chosen-state:not([hidden])) .chosen-state{
  padding-bottom:calc(var(--space-3) + var(--chosen-state-scroll-inset));
}
/* Let the chat tab fill the viewport so scroll regions can grow. */
body:has(.app-tab-panel--chat:not([hidden])){
  display:flex;
  flex-direction:column;
  min-height:100dvh;
}
.main.app-main--tabs:has(.app-tab-panel--chat:not([hidden])){
  flex:1;
  min-height:0;
  padding-top:var(--space-4);
  padding-bottom:0;
}
.main.app-main--tabs .app-tab-panel--chat:not([hidden]){
  flex:1;
  min-width:0;
  min-height:0;
  display:flex;
  overflow-x:hidden;
}

.app-tab-bar{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:60;
  display:flex;
  align-items:stretch;
  justify-content:space-around;
  gap:0;
  max-width:560px;
  margin:0 auto;
  min-height:var(--app-tab-bar-height);
  height:auto;
  padding:.5rem .2rem calc(.5rem + env(safe-area-inset-bottom, 0px));
  background:color-mix(in oklab,var(--color-bg) 92%,transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--color-border);
  box-shadow:0 -2px 12px rgba(0,0,0,.05);
}
.app-tab{
  flex:1;
  min-width:0;
  min-height:3rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.12rem;
  padding:.28rem .14rem .22rem;
  border-radius:var(--radius-sm);
  color:var(--color-text-muted);
  transition:color var(--transition),background var(--transition);
}
.app-tab:hover{color:var(--color-text);background:var(--color-surface-offset)}
.app-tab.is-active{color:var(--color-primary);background:var(--color-primary-highlight)}
.app-tab-icon{display:flex;align-items:center;justify-content:center;opacity:.92;width:22px;height:22px;min-height:22px;color:currentColor}
.app-tab:not(.is-active) .app-tab-icon{opacity:.72}
.app-tab-icon svg,.app-tab-icon .dd-icon{color:currentColor;width:22px;height:22px;flex-shrink:0}
.app-tab-icon .dd-icon--raster,.forum-action-icon .dd-icon--raster{object-fit:contain;display:block;flex-shrink:0}
[data-theme='dark'] .dd-icon--raster,[data-theme='dark'] .app-tab-icon .dd-icon--raster{filter:invert(1) brightness(1.05)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .dd-icon--raster,:root:not([data-theme]) .app-tab-icon .dd-icon--raster{filter:invert(1) brightness(1.05)}
}
.dd-icon{display:block;flex-shrink:0;color:currentColor}
.overflow-action-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;color:currentColor;flex-shrink:0}
.overflow-action-icon .dd-icon{width:16px;height:16px}
.forum-hero-icon-slot{display:inline-flex;align-items:center;justify-content:center;color:currentColor;line-height:0}
.forum-hero-icon-slot .dd-icon{width:18px;height:18px}
.forum-action-icon{display:inline-flex;align-items:center;justify-content:center;line-height:0;color:currentColor}
.forum-action-icon .dd-icon{width:16px;height:16px}
.forum-detail-toolbar .forum-action-icon .dd-icon{width:18px;height:18px}
.forum-reaction-emoji{display:inline-flex;align-items:center;justify-content:center;line-height:0;color:currentColor}
.forum-reaction-emoji .dd-icon{width:1rem;height:1rem}
.app-tab-label{
  font-size:var(--text-fit-size,var(--text-xs));
  font-weight:600;
  line-height:1.2;
  text-align:center;
  max-width:100%;
  hyphens:auto;
  padding:0 .08rem;
  white-space:normal;
  overflow:hidden;
  min-width:0;
}
.app-tab-bar:has(#tab-btn-forum) .app-tab-label{letter-spacing:-.01em}

.chosen-state-tab-spacer{display:none;height:0}

/* Dilemma Forum prototype */
.app-tab-panel--forum:not([hidden]){display:block}
.forum-shell--detail .forum-hero{display:none}
.forum-shell{
  display:flex;
  flex-direction:column;
  gap:var(--space-5);
}
.forum-shell--detail{
  padding-bottom:calc(var(--app-main-tab-bottom-pad) + var(--space-4));
}
/* Short list: pin feed to tab bar; long list: normal page scroll */
.forum-list-view:not([hidden]){
  display:flex;
  flex-direction:column;
  min-height:calc(100dvh - var(--app-header-clearance) - var(--app-tab-bar-height) - var(--space-10) - 6.5rem - var(--space-5));
}
.forum-feed--list{
  margin-top:auto;
  padding-bottom:calc(var(--app-main-tab-bottom-pad) + var(--space-6) / 5);
}
.forum-hero{
  padding:var(--space-3) var(--space-4);
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  background:linear-gradient(145deg,var(--color-surface),var(--color-surface-offset));
  box-shadow:var(--shadow-sm);
}
.forum-hero-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
  min-height:32px;
}
.forum-hero-copy{flex:1;min-width:0}
.forum-title-row{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  min-width:0;
}
.forum-title-icon{
  display:inline-flex;
  flex-shrink:0;
  align-items:center;
  justify-content:center;
  color:var(--color-primary);
  line-height:0;
}
.forum-title-icon .dd-icon{width:24px;height:24px}
.forum-title-row .forum-title{margin:0}
.forum-disclaimer,
.forum-philosopher-disclaimer{
  margin:0;
  font-size:var(--text-xs);
  line-height:1.5;
  color:var(--color-text-muted);
}
.forum-disclaimer{margin-top:var(--space-2)}
.forum-philosopher-disclaimer{margin-bottom:var(--space-2)}
.forum-enrichment-skipped{
  margin-top:var(--space-2);
  padding:var(--space-3);
  border-radius:var(--radius-md);
  background:var(--color-surface-muted, rgba(0,0,0,.04));
  border:1px solid var(--color-border, rgba(0,0,0,.08));
}
.forum-enrichment-skipped-title{
  margin:0 0 var(--space-1);
  font-size:var(--text-sm);
  font-weight:600;
  color:var(--color-text);
}
.forum-enrichment-skipped-body{
  margin:0;
  font-size:var(--text-sm);
  line-height:1.55;
  color:var(--color-text-muted);
}
.forum-hero-actions{
  display:flex;
  align-items:center;
  gap:.35rem;
  flex-shrink:0;
  flex-wrap:wrap;
}
.forum-title{
  font-family:var(--font-display);
  font-size:var(--text-lg);
  font-weight:400;
  line-height:1.12;
  color:var(--color-text);
}
.forum-hero-icon-btn{
  width:32px;
  min-width:32px;
  min-height:32px;
  padding:0;
  font-size:.95rem;
  line-height:1;
}
.forum-hero .forum-action-btn.forum-hero-icon-btn,
.forum-hero .forum-compose-btn.forum-hero-icon-btn,
.forum-hero .forum-refresh-btn.forum-hero-icon-btn{
  min-height:32px;
}
.forum-compose-btn{
  flex-shrink:0;
  margin-top:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.375rem;
  padding:.5rem .85rem;
  border-radius:var(--radius-full);
  background:var(--color-primary);
  color:var(--color-surface);
  font-size:var(--text-xs);
  font-weight:800;
  line-height:1.2;
  text-align:center;
  white-space:normal;
  box-shadow:var(--shadow-sm);
  transition:background var(--transition),transform var(--transition);
}
.forum-compose-btn:hover{background:var(--color-primary-hover);transform:translateY(-1px)}
.forum-compose-btn.forum-hero-icon-btn{
  border:1px solid var(--color-border);
  background:var(--color-surface);
  color:var(--color-text);
  box-shadow:var(--shadow-sm);
  transition:border-color var(--transition),background var(--transition),color var(--transition),transform var(--transition);
}
.forum-compose-btn.forum-hero-icon-btn:hover{
  border-color:var(--color-primary);
  color:var(--color-primary);
  background:var(--color-surface);
  transform:translateY(-1px);
}
.forum-action-btn{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.375rem;
  padding:.5rem .85rem;
  border-radius:var(--radius-full);
  font-size:var(--text-xs);
  font-weight:800;
  line-height:1.2;
  text-align:center;
  white-space:normal;
  transition:border-color var(--transition),background var(--transition),color var(--transition),transform var(--transition);
}
.forum-action-btn--secondary{
  border:1px solid var(--color-border);
  background:var(--color-surface);
  color:var(--color-text);
  box-shadow:var(--shadow-sm);
}
.forum-action-btn--secondary:hover{
  border-color:var(--color-primary);
  color:var(--color-primary);
  transform:translateY(-1px);
}
.forum-action-btn--secondary.is-active,
.forum-action-btn--secondary[aria-expanded="true"]{
  border-color:var(--color-primary);
  background:var(--color-primary-highlight);
  color:var(--color-primary);
}
.forum-refresh-btn{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  min-height:38px;
  padding:0;
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  background:var(--color-surface);
  font-size:1.05rem;
  line-height:1;
  box-shadow:var(--shadow-sm);
  transition:border-color var(--transition),background var(--transition),transform var(--transition);
}
.forum-refresh-btn:hover{
  border-color:var(--color-primary);
  background:var(--color-primary-highlight);
  transform:translateY(-1px);
}
.forum-refresh-icon{
  display:block;
  width:18px;
  height:18px;
  object-fit:contain;
  filter:brightness(0) saturate(100%) invert(36%) sepia(34%) saturate(820%) hue-rotate(353deg) brightness(94%) contrast(90%);
}
[data-theme='dark'] .forum-refresh-icon{
  filter:brightness(0) saturate(100%) invert(72%) sepia(18%) saturate(520%) hue-rotate(350deg) brightness(98%) contrast(88%);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .forum-refresh-icon{
    filter:brightness(0) saturate(100%) invert(72%) sepia(18%) saturate(520%) hue-rotate(350deg) brightness(98%) contrast(88%);
  }
}
.forum-refresh-btn.is-refreshing .forum-refresh-icon{animation:forum-refresh-spin .55s ease}
@keyframes forum-refresh-spin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
.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;
}
.forum-list-tools{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-2)}
.forum-search-panel:not([hidden]){display:block}
.forum-search-panel[hidden]{display:none}
.forum-search{display:block}
.forum-search-input{
  width:100%;
  min-height:40px;
  padding:.55rem .85rem;
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  background:var(--color-surface);
  color:var(--color-text);
  font-size:var(--text-sm);
  transition:border-color var(--transition),box-shadow var(--transition);
}
.forum-search-input:focus{
  outline:none;
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px var(--color-primary-highlight);
}
.forum-list-empty{
  margin:0 0 var(--space-2);
  font-size:var(--text-sm);
  color:var(--color-text-muted);
  text-align:center;
}
.forum-list-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  margin-bottom:0;
}
.forum-sort-btn{
  flex:1;
  min-width:0;
  min-height:2.25rem;
  padding:.4rem .75rem;
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  background:var(--color-surface);
  color:var(--color-text-muted);
  font-size:var(--text-xs);
  font-weight:800;
  line-height:1.2;
  text-align:center;
  white-space:normal;
  transition:border-color var(--transition),background var(--transition),color var(--transition);
}
.forum-sort-btn:hover{border-color:var(--color-primary);color:var(--color-text)}
.forum-sort-btn.is-active{
  border-color:var(--color-primary);
  background:var(--color-primary-highlight);
  color:var(--color-primary);
}
.forum-feed{display:flex;flex-direction:column;gap:var(--space-4)}
.forum-feed--list{gap:var(--space-2)}
.forum-topic-row{
  width:100%;
  display:flex;
  align-items:flex-start;
  gap:var(--space-3);
  padding:var(--space-4) var(--space-5);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  background:var(--color-surface);
  text-align:left;
  box-shadow:var(--shadow-sm);
  transition:border-color var(--transition),transform var(--transition),background var(--transition);
}
.forum-topic-row:hover{border-color:var(--color-primary);transform:translateY(-1px);background:var(--color-surface-2)}
.forum-topic-row--daily-pinned{
  border-color:color-mix(in srgb,var(--color-primary) 42%,var(--color-border));
  background:color-mix(in srgb,var(--color-primary-highlight) 72%,var(--color-surface));
  box-shadow:0 1px 0 color-mix(in srgb,var(--color-primary) 18%,transparent),var(--shadow-sm);
}
.forum-topic-row--daily-pinned:hover{
  border-color:var(--color-primary);
  background:color-mix(in srgb,var(--color-primary-highlight) 88%,var(--color-surface));
}
.forum-topic-content{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.forum-topic-labels{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.35rem;
}
.forum-topic-badge{
  display:inline-flex;
  align-items:center;
  gap:.22rem;
  padding:.14rem .42rem;
  border-radius:var(--radius-full);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.04em;
  line-height:1.2;
  white-space:nowrap;
}
.forum-topic-badge--daily{
  background:var(--color-primary-highlight);
  color:var(--color-primary);
  border:1px solid color-mix(in srgb,var(--color-primary) 24%,var(--color-border));
}
.forum-topic-badge--pinned{
  background:var(--color-surface);
  color:var(--color-text-muted);
  border:1px dashed color-mix(in srgb,var(--color-primary) 30%,var(--color-border));
}
.forum-topic-badge-icon{display:inline-flex;align-items:center;line-height:0;color:currentColor}
.forum-topic-badge-icon .dd-icon{width:.72rem;height:.72rem}
.forum-topic-user-avatar{
  flex-shrink:0;
  width:36px;
  height:36px;
  margin-top:.1rem;
  border:1px solid var(--color-border);
  box-shadow:var(--shadow-sm);
}
.forum-topic-user-avatar.forum-comment-avatar--initials{
  font-size:.78rem;
  letter-spacing:.02em;
}
.forum-topic-main{
  flex:1;
  min-width:0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-3);
}
.forum-topic-title{
  flex:1;
  min-width:0;
  font-family:var(--font-display);
  font-size:var(--text-fit-size,var(--text-base));
  font-weight:400;
  line-height:1.3;
  color:var(--color-text);
  overflow:hidden;
}
.forum-topic-meta{
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.12rem;
  max-width:42%;
  text-align:right;
}
.forum-topic-time{font-size:.68rem;font-weight:600;color:var(--color-text-muted);white-space:nowrap}
.forum-topic-stats{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-size:.72rem;
  font-weight:700;
  color:var(--color-text-muted);
  white-space:nowrap;
}
.forum-topic-stat{display:inline-flex;align-items:center;gap:.28rem}
.forum-topic-stat-icon{display:inline-flex;align-items:center;line-height:0;flex-shrink:0;color:currentColor}
.forum-topic-stat-icon .dd-icon{width:.82rem;height:.82rem}
.forum-topic-stat-text{font-variant-numeric:tabular-nums}
.forum-topic-stat--like{color:var(--color-primary)}
.forum-topic-stat--dislike{color:var(--color-text-muted)}
.forum-reaction-row{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  margin-top:var(--space-4);
}
.forum-reaction-btn{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  min-height:2.375rem;
  padding:.35rem .75rem;
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  background:var(--color-surface-2);
  color:var(--color-text-muted);
  font-size:.76rem;
  font-weight:700;
  transition:border-color var(--transition),background var(--transition),color var(--transition);
}
.forum-reaction-btn:hover{border-color:var(--color-primary);color:var(--color-text)}
.forum-reaction-btn.is-selected{
  border-color:var(--color-primary);
  background:var(--color-primary-highlight);
  color:var(--color-primary);
}
.forum-reaction-emoji{font-size:1rem}
.forum-reaction-label{font-weight:800}
.forum-reaction-count{font-variant-numeric:tabular-nums;font-weight:800}
.forum-detail-view{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  scroll-margin-top:var(--app-top-clearance);
}
.forum-back-btn{
  --forum-back-btn-size:3rem;
  display:inline-flex;
  flex-shrink:0;
  align-items:center;
  justify-content:center;
  width:var(--forum-back-btn-size);
  height:var(--forum-back-btn-size);
  padding:0;
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  background:var(--color-surface);
  color:var(--color-text-muted);
  box-shadow:var(--shadow-sm);
  transition:color var(--transition),background var(--transition),border-color var(--transition),box-shadow var(--transition);
  touch-action:manipulation;
}
.forum-shell--detail .forum-detail-view{
  padding-top:calc(var(--forum-back-btn-size) + var(--space-3));
}
.forum-shell--detail .forum-back-btn{
  position:fixed;
  top:calc(var(--app-top-clearance) + var(--space-2));
  left:max(calc(var(--space-6) + var(--space-4)),env(safe-area-inset-left,0px));
  z-index:110;
}
@media (min-width:608px){
  .forum-shell--detail .forum-back-btn{
    left:calc((100vw - 560px) / 2 + var(--space-6) + var(--space-4));
  }
}
.forum-back-btn svg{
  width:1.25rem;
  height:1.25rem;
}
.forum-back-btn:hover{
  color:var(--color-text);
  border-color:var(--color-primary);
  background:var(--color-surface-2);
  box-shadow:var(--shadow-md);
}
.forum-back-btn:focus-visible{
  outline:2px solid var(--color-primary);
  outline-offset:2px;
}
.forum-detail{
  padding:var(--space-5);
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  background:var(--color-surface);
  box-shadow:var(--shadow-sm);
}
.forum-detail-header{
  display:flex;
  align-items:flex-start;
  gap:var(--space-3);
}
.forum-detail-user-avatar{
  width:44px;
  height:44px;
  margin-top:.05rem;
  border:1px solid var(--color-border);
  box-shadow:var(--shadow-sm);
}
.forum-detail-user-avatar.forum-comment-avatar--initials{
  font-size:.95rem;
  letter-spacing:.02em;
}
.forum-detail-header-main{
  flex:1;
  min-width:0;
}
.forum-detail-header .forum-detail-title{
  margin:0;
}
.forum-detail-header-actions{
  display:flex;
  align-items:center;
  flex-shrink:0;
  gap:.35rem;
  margin-top:.1rem;
}
.forum-detail-header-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:28px;
  height:28px;
  padding:0;
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  background:var(--color-surface-2);
  color:var(--color-text-muted);
  transition:border-color var(--transition),background var(--transition),color var(--transition);
}
.forum-detail-header-btn:hover{
  border-color:var(--color-primary);
  color:var(--color-text);
}
.forum-detail-share-btn .dilemma-share-icon{
  width:14px;
  height:14px;
}
.forum-detail-header-actions .bm-btn--forum svg{
  width:14px;
  height:14px;
}
.forum-detail-toolbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:.35rem;
  margin-top:var(--space-4);
}
.forum-detail-toolbar-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.25rem;
  min-height:2rem;
  padding:.22rem .55rem;
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  background:var(--color-surface-2);
  color:var(--color-text-muted);
  font-size:var(--text-xs);
  line-height:1.2;
  font-weight:700;
  white-space:normal;
  text-align:center;
  transition:border-color var(--transition),background var(--transition),color var(--transition);
}
.forum-detail-toolbar-btn:hover{border-color:var(--color-primary);color:var(--color-text)}
.forum-detail-toolbar-btn.is-selected,
.forum-detail-toolbar-btn.is-active{
  border-color:var(--color-primary);
  background:var(--color-primary-highlight);
  color:var(--color-primary);
}
.forum-detail-toolbar .forum-reaction-emoji{font-size:.88rem}
.forum-detail-toolbar .forum-reaction-count{font-size:.66rem;font-variant-numeric:tabular-nums}
.forum-detail-toolbar .forum-chat-cta-btn{min-width:32px}
.forum-post-comment-form-wrap{margin-top:var(--space-3)}
.forum-detail-title{
  font-family:var(--font-display);
  font-size:var(--text-xl);
  font-weight:400;
  line-height:1.15;
  color:var(--color-text);
}
.forum-post-time{
  display:block;
  margin-top:.2rem;
  font-size:.72rem;
  font-weight:600;
  color:var(--color-text-muted);
}
.forum-detail-body{
  margin-top:var(--space-3);
  font-size:var(--text-sm);
  line-height:1.7;
  color:var(--color-text-muted);
}
.forum-chat-cta-btn .forum-chat-icon{flex-shrink:0}
.forum-detail .forum-vote-wrap{margin-top:var(--space-4)}
.forum-discussion{margin-top:var(--space-4)}
.forum-compose-panel{
  margin:var(--space-4) 0 var(--space-3);
  padding:var(--space-5);
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  background:var(--color-surface);
  box-shadow:var(--shadow-sm);
}
.forum-compose-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  margin-bottom:var(--space-4);
}
.forum-compose-panel-title{
  margin:0;
  font-family:var(--font-display);
  font-size:var(--text-lg);
  font-style:italic;
  font-weight:400;
}
.forum-compose-panel-close{
  flex-shrink:0;
}
.forum-hero .forum-compose-btn.forum-hero-icon-btn.is-active{
  background:var(--color-primary-hover);
  box-shadow:0 0 0 2px var(--color-primary-highlight);
}
.forum-comment-thread{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  padding-bottom:var(--space-2);
}
.forum-comment{display:flex;gap:var(--space-3);align-items:flex-start}
.forum-comment--nested{
  margin-left:calc(var(--forum-comment-depth, 1) * 1.1rem);
  padding-left:var(--space-3);
  border-left:2px solid var(--color-border);
}
.forum-comment-reply-to{
  margin:0 0 var(--space-2);
  font-size:var(--text-sm);
  color:var(--color-text-muted);
  line-height:1.35;
}
.forum-comment-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  margin:0;
  padding:.12rem;
  border:0;
  border-radius:var(--radius-full);
  background:transparent;
  color:var(--color-primary);
  cursor:pointer;
  line-height:0;
}
.forum-comment-badge:hover{opacity:.82}
.forum-comment-badge:focus-visible{
  outline:2px solid var(--color-primary);
  outline-offset:2px;
}
.forum-comment-badge--philosopher .dd-icon--raster{
  display:block;
  object-fit:contain;
}
.forum-comment-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.35rem;
  margin-top:var(--space-2);
}
.forum-comment-action-btn{
  display:inline-flex;
  align-items:center;
  gap:.2rem;
  min-height:30px;
  padding:.2rem .5rem;
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  background:var(--color-surface);
  color:var(--color-text-muted);
  font-size:.68rem;
  font-weight:700;
  transition:border-color var(--transition),background var(--transition),color var(--transition);
}
.forum-comment-action-btn:hover{border-color:var(--color-primary);color:var(--color-text)}
.forum-comment-action-btn.is-selected{
  border-color:var(--color-primary);
  background:var(--color-primary-highlight);
  color:var(--color-primary);
}
.forum-comment-action-btn--reply,
.forum-comment-action-btn--chat{
  min-width:32px;
  padding:.28rem .5rem;
  font-size:.95rem;
  line-height:1;
}
.forum-comment-action-btn--reply{font-weight:800}
.forum-comment-action-btn--chat .forum-chat-icon{flex-shrink:0}
.forum-comment-action-label{font-weight:800}
.forum-comment-action-count{font-variant-numeric:tabular-nums}
.forum-comment-reply-form{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  margin-top:var(--space-2);
}
.forum-composer-shell{position:relative}
.forum-composer-shell .forum-comment-reply-input,
.forum-composer-shell .forum-compose-textarea{
  padding-bottom:2.65rem;
}
.forum-composer-shell--start .forum-comment-reply-input,
.forum-composer-shell--start .forum-compose-textarea{padding-left:2.55rem}
.forum-composer-shell--end .forum-comment-reply-input,
.forum-composer-shell--end .forum-compose-textarea{padding-right:2.55rem}
.forum-composer-chat-btn{
  position:absolute;
  bottom:.4rem;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.15rem;
  height:2.15rem;
  padding:0;
  border:none;
  border-radius:var(--radius-full);
  background:transparent;
  cursor:pointer;
  line-height:0;
}
.forum-composer-chat-btn--start{left:.45rem}
.forum-composer-chat-btn--end{right:.45rem}
.forum-composer-chat-btn:hover{opacity:.88}
.forum-composer-chat-btn:focus-visible{
  outline:2px solid var(--color-primary);
  outline-offset:2px;
}
.forum-composer-chat-btn .dd-icon--raster{
  width:1.65rem;
  height:1.65rem;
  object-fit:contain;
  display:block;
}
.forum-comment-reply-input{
  width:100%;
  padding:.55rem .7rem;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-surface);
  color:var(--color-text);
  font-size:var(--text-sm);
  line-height:1.5;
  resize:vertical;
  min-height:4.5rem;
}
.forum-comment-reply-input:focus{
  outline:none;
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px var(--color-primary-highlight);
}
.forum-comment-reply-submit{
  align-self:flex-start;
  min-height:34px;
  padding:.35rem .85rem;
  border-radius:var(--radius-full);
  background:var(--color-primary);
  color:var(--color-surface);
  font-size:.74rem;
  font-weight:800;
}
.forum-comment-reply-submit:hover{background:var(--color-primary-hover)}
.forum-compose-modal{
  width:min(100%,28rem);
  max-height:min(92vh,44rem);
  overflow:auto;
}
#forum-compose-overlay.forum-compose-panel,
.forum-compose-panel{
  width:100%;
  max-height:none;
  overflow:visible;
}
.forum-compose-intro{
  margin:0 0 var(--space-3);
  font-size:var(--text-sm);
  line-height:1.55;
  color:var(--color-text-muted);
}
.forum-compose-guidelines{
  padding:var(--space-2) var(--space-3);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-surface-offset);
  font-size:.66rem;
  line-height:1.35;
}
.forum-compose-guidelines-title{
  margin:0 0 .3rem;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--color-text);
}
.forum-compose-guidelines-intro{
  margin:0 0 .4rem;
  color:var(--color-text-muted);
}
.forum-compose-guidelines-list{
  margin:0 0 .55rem;
  padding-left:1.05rem;
  color:var(--color-text);
}
.forum-compose-guidelines-list li{margin:.15rem 0}
.forum-compose-guidelines-check,
.forum-compose-safety-ack{
  display:flex;
  align-items:flex-start;
  gap:.5rem;
  line-height:1.35;
  color:var(--color-text);
  cursor:pointer;
}
.forum-compose-safety-ack{font-size:var(--text-xs)}
.forum-compose-guidelines-check input,
.forum-compose-safety-ack input{
  margin-top:.2rem;
  flex-shrink:0;
}
.forum-compose-safety{
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-md);
  border:1px solid color-mix(in srgb, var(--color-warning, #b8860b) 45%, var(--color-border));
  background:color-mix(in srgb, var(--color-warning, #b8860b) 12%, var(--color-surface));
}
.forum-compose-safety.is-blocked{
  border-color:color-mix(in srgb, var(--color-danger, #c44) 50%, var(--color-border));
  background:color-mix(in srgb, var(--color-danger, #c44) 10%, var(--color-surface));
}
.forum-compose-safety-title{
  margin:0 0 .35rem;
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.forum-compose-safety-flags{
  margin:0 0 .35rem;
  padding-left:1rem;
  font-size:.72rem;
  font-weight:700;
  color:var(--color-text-muted);
}
.forum-compose-safety-message{
  margin:0 0 .5rem;
  font-size:var(--text-sm);
  line-height:1.45;
}
.forum-detail-moderation{
  position:relative;
  flex-shrink:0;
}
.forum-detail-moderation-panel{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  min-width:11rem;
  padding:.35rem;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-surface);
  box-shadow:var(--shadow-lg);
  z-index:30;
  display:flex;
  flex-direction:column;
  gap:.15rem;
}
.forum-detail-moderation-panel[hidden]{display:none}
.forum-detail-moderation-action{
  width:100%;
  text-align:left;
  padding:.45rem .6rem;
  border-radius:var(--radius-sm);
  font-size:.82rem;
  color:var(--color-text);
}
.forum-detail-moderation-action:hover{background:var(--color-surface-offset)}
.forum-detail-moderation-action--danger{color:var(--color-danger, #c44)}
.forum-hidden-notice{
  margin:var(--space-3) 0;
  padding:var(--space-3);
  border:1px dashed var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-surface-offset);
  text-align:center;
}
.forum-hidden-notice-title{
  margin:0 0 .35rem;
  font-size:var(--text-base);
  font-weight:800;
}
.forum-hidden-notice-body{
  margin:0 0 var(--space-2);
  font-size:var(--text-sm);
  color:var(--color-text-muted);
  line-height:1.45;
}
.forum-report-modal{
  width:min(100%,24rem);
}
.forum-report-reasons{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  margin-bottom:var(--space-3);
}
.forum-report-reason{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:var(--text-sm);
  line-height:1.35;
  padding:.35rem .2rem;
  cursor:pointer;
}
.forum-report-reason input[type="radio"]{margin:0;flex-shrink:0}
.forum-report-reason-label{flex-shrink:0}
.forum-report-reason--other{
  flex-wrap:wrap;
  align-items:center;
}
.forum-report-other-input{
  flex:1 1 8rem;
  min-width:0;
  padding:.35rem .55rem;
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  background:var(--color-surface);
  color:var(--color-text);
  font-size:var(--text-sm);
}
.forum-report-other-input:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.forum-report-other-input:focus{
  outline:none;
  border-color:var(--color-primary);
  box-shadow:0 0 0 2px var(--color-primary-highlight);
}
.forum-report-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:var(--space-2);
}
.forum-hide-modal{
  width:min(100%,24rem);
}
.forum-hide-message{
  margin:0 0 var(--space-3);
  font-size:var(--text-sm);
  line-height:1.5;
  color:var(--color-text);
}
.forum-hide-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:var(--space-2);
}
.forum-hide-confirm-btn{
  background:var(--color-danger, #c44);
  border-color:var(--color-danger, #c44);
}
.forum-hide-confirm-btn:hover{
  filter:brightness(.92);
}
.forum-delete-modal{
  width:min(100%,24rem);
}
.forum-delete-message{
  margin:0 0 var(--space-3);
  font-size:var(--text-sm);
  line-height:1.5;
  color:var(--color-text-secondary);
}
.forum-delete-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:var(--space-2);
}
.forum-delete-confirm-btn{
  background:var(--color-danger, #c44);
  border-color:var(--color-danger, #c44);
}
.forum-delete-confirm-btn:hover{
  filter:brightness(.92);
}
.forum-compose-form{display:flex;flex-direction:column;gap:var(--space-3)}
.forum-compose-field{display:flex;flex-direction:column;gap:.35rem}
.forum-compose-label{
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--color-text-muted);
}
.forum-compose-input,
.forum-compose-textarea{
  width:100%;
  padding:.55rem .7rem;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-surface);
  color:var(--color-text);
  font-size:var(--text-sm);
  line-height:1.5;
}
.forum-compose-textarea{
  resize:vertical;
  min-height:6.5rem;
}
.forum-compose-input:focus,
.forum-compose-textarea:focus{
  outline:none;
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px var(--color-primary-highlight);
}
.forum-compose-input.is-invalid,
.forum-compose-textarea.is-invalid{
  border-color:var(--color-danger, #c44);
}
.forum-compose-counter{
  align-self:flex-end;
  font-size:.66rem;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--color-text-muted);
}
.forum-compose-counter.is-over-limit{color:var(--color-danger, #c44)}
.forum-compose-error{
  margin:0;
  font-size:.68rem;
  font-weight:700;
  color:var(--color-danger, #c44);
}
.forum-compose-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
  margin-top:var(--space-1);
}
.forum-compose-actions-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  margin-left:auto;
}
.forum-composer-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
}
.forum-composer-footer-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  margin-left:auto;
}
.forum-post-comment-form-wrap .forum-composer-footer,
.forum-comment-reply-form .forum-composer-footer{
  margin-top:var(--space-2);
}
.forum-comment-avatar{
  flex-shrink:0;
  width:40px;
  height:40px;
  border-radius:var(--radius-full);
  overflow:hidden;
  background:var(--color-primary-highlight);
}
.forum-comment-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.forum-comment-avatar--initials{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.9rem;
  font-weight:900;
}
.forum-comment-avatar--emoji{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.15rem;
  line-height:1;
  border:1px solid rgba(120,80,40,.1);
}
.forum-avatar-picker-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  min-height:38px;
  padding:0;
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  background:var(--color-surface);
  cursor:pointer;
  box-shadow:var(--shadow-sm);
}
.forum-avatar-picker-btn:hover{border-color:var(--color-primary);background:var(--color-primary-highlight)}
.forum-avatar-picker-preview{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}
.forum-avatar-picker-preview__avatar{
  width:32px!important;
  height:32px!important;
  font-size:.95rem!important;
}
.forum-avatar-modal{max-width:22rem}
.forum-avatar-intro{
  margin:0 0 var(--space-3);
  font-size:.85rem;
  color:var(--color-text-muted);
  line-height:1.45;
}
.forum-avatar-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  margin-bottom:var(--space-3);
}
.forum-avatar-tab{
  padding:.35rem .75rem;
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  background:var(--color-surface);
  font-size:.78rem;
  font-weight:600;
  color:var(--color-text-muted);
  cursor:pointer;
}
.forum-avatar-tab.is-active{
  border-color:var(--color-primary);
  background:var(--color-primary-highlight);
  color:var(--color-text);
}
.forum-avatar-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-2);
}
.forum-avatar-option{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-1);
  border:2px solid transparent;
  border-radius:var(--radius-md);
  background:transparent;
  cursor:pointer;
}
.forum-avatar-option:hover{background:var(--color-primary-highlight)}
.forum-avatar-option.is-selected{border-color:var(--color-primary)}
.forum-avatar-option__preview{
  width:44px!important;
  height:44px!important;
  pointer-events:none;
}
.forum-comment-body{min-width:0;flex:1}
.forum-comment-head{
  display:flex;
  align-items:flex-start;
  gap:var(--space-2);
  margin-bottom:.15rem;
}
.forum-comment-head-meta{
  flex:1;
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:.2rem .45rem;
}
.forum-comment-author-block{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.05rem;
  min-width:0;
}
.forum-comment-author-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.3rem;
  min-width:0;
}
.forum-comment-head-meta .forum-comment-badge{margin-top:0}
.forum-comment-head .forum-detail-moderation{
  margin-top:-.05rem;
  margin-left:auto;
}
.forum-comment-author{font-size:.82rem;color:var(--color-text)}
.forum-comment-time{font-size:.68rem;font-weight:600;color:var(--color-text-muted)}
.forum-comment-text{font-size:var(--text-sm);line-height:1.55;color:var(--color-text-muted)}
.forum-comment--philosopher-thinking{align-items:flex-start}
.forum-comment-avatar--thinking{
  animation:forum-philosopher-thinking-pulse 1.35s ease-in-out infinite;
}
.forum-philosopher-thinking{margin-top:var(--space-1)}
.forum-philosopher-thinking-bubble{
  display:inline-block;
  max-width:100%;
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-lg);
  border:1px solid var(--color-border);
  background:var(--color-surface);
  box-shadow:var(--shadow-sm);
  animation:forum-philosopher-thinking-pulse 1.35s ease-in-out infinite;
}
.forum-philosopher-thinking-text{
  font-size:var(--text-sm);
  font-style:italic;
  line-height:1.45;
  color:var(--color-text-secondary);
}
@keyframes forum-philosopher-thinking-pulse{
  0%,100%{opacity:1}
  50%{opacity:.76}
}
.forum-card{
  padding:var(--space-5);
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  background:var(--color-surface);
  box-shadow:var(--shadow-sm);
}
.forum-card-header{display:flex;flex-direction:column;gap:var(--space-2)}
.forum-card-title{
  font-family:var(--font-display);
  font-size:var(--text-fit-size,var(--text-lg));
  font-weight:400;
  line-height:1.2;
  color:var(--color-text);
  overflow:hidden;
  min-width:0;
}
.forum-card-body{font-size:var(--text-fit-size,var(--text-sm));line-height:1.65;color:var(--color-text-muted);overflow:hidden;min-width:0}
.forum-vote-wrap{margin-top:var(--space-3)}
.forum-vote-prompt{
  margin:0 0 var(--space-2);
  font-size:.78rem;
  font-weight:800;
  line-height:1.3;
  color:var(--color-text);
}
.forum-vote-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-2);
  margin-top:0;
}
.forum-vote-row--readonly .forum-vote-btn{cursor:default}
.forum-vote-wrap--daily{margin-top:var(--space-2)}
.forum-vote-btn{
  --vote-accent:#c4563f;
  --vote-bg:#fcf5f3;
  --vote-fill:rgba(196,86,63,.22);
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:var(--space-2);
  min-height:0;
  padding:var(--space-2) var(--space-3);
  border:1.5px solid var(--vote-accent);
  border-radius:var(--radius-md);
  background:var(--vote-bg);
  text-align:left;
  cursor:pointer;
  overflow:hidden;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
  transition:border-color var(--transition),background var(--transition),box-shadow var(--transition),transform var(--transition);
}
.forum-vote-btn--b{
  --vote-accent:#4d6fa3;
  --vote-bg:#f3f6fb;
  --vote-fill:rgba(77,111,163,.22);
}
[data-theme='dark'] .forum-vote-btn--a{
  --vote-bg:rgba(196,86,63,.16);
  --vote-fill:rgba(196,86,63,.32);
}
[data-theme='dark'] .forum-vote-btn--b{
  --vote-bg:rgba(77,111,163,.16);
  --vote-fill:rgba(77,111,163,.32);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .forum-vote-btn--a{
    --vote-bg:rgba(196,86,63,.16);
    --vote-fill:rgba(196,86,63,.32);
  }
  :root:not([data-theme]) .forum-vote-btn--b{
    --vote-bg:rgba(77,111,163,.16);
    --vote-fill:rgba(77,111,163,.32);
  }
}
.forum-vote-btn:hover{
  border-color:var(--vote-accent);
  transform:translateY(-1px);
}
.forum-vote-btn--a:hover{box-shadow:0 4px 14px rgba(196,86,63,.2)}
.forum-vote-btn--b:hover{box-shadow:0 4px 14px rgba(77,111,163,.2)}
.forum-vote-btn:focus-visible{z-index:1}
.forum-vote-btn.is-selected{
  border-color:var(--vote-accent);
  background:color-mix(in srgb,var(--vote-accent) 14%,var(--vote-bg));
  box-shadow:0 0 0 1px var(--vote-accent);
}
.forum-vote-fill{
  position:absolute;
  inset:0 auto 0 0;
  width:calc(var(--vote-pct,0) * 1%);
  background:var(--vote-fill);
  opacity:1;
  pointer-events:none;
  transition:width .35s ease;
}
.forum-vote-btn.is-selected .forum-vote-fill{opacity:1}
.forum-vote-main{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:var(--space-2);
  min-width:0;
}
.forum-vote-letter{
  display:inline-flex;
  flex-shrink:0;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:var(--radius-full);
  background:var(--vote-accent);
  color:#fff;
  font-size:.72rem;
  font-weight:900;
}
.forum-vote-btn.is-selected .forum-vote-letter{background:var(--vote-accent);color:#fff}
.forum-vote-label{
  font-size:var(--text-fit-size,.66rem);
  font-weight:700;
  line-height:1.3;
  color:var(--color-text);
  min-width:0;
  overflow:hidden;
}
.forum-vote-aside{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.08rem;
  flex-shrink:0;
}
.forum-vote-pct{font-size:.7rem;font-weight:900;color:var(--vote-accent);line-height:1}
.forum-vote-count{font-size:.66rem;font-weight:700;color:var(--color-text-muted);line-height:1.1}
.forum-vote-selected-mark{
  display:none;
  font-size:.72rem;
  font-weight:900;
  color:var(--vote-accent);
  line-height:1;
}
.forum-vote-btn.is-selected .forum-vote-selected-mark{display:inline-flex}
.forum-concepts,.forum-philosopher-replies,.forum-comments{margin-top:var(--space-4)}
.forum-section-label{
  margin-bottom:var(--space-2);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--color-text-muted);
}
.forum-concept-list{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.forum-concepts .gf-tag{
  font-size:.66rem;
  padding:.16rem .48rem;
  font-weight:700;
}
.forum-concept-chip{
  display:inline-flex;
  align-items:center;
  padding:.25rem .6rem;
  border:1px solid transparent;
  border-radius:var(--radius-full);
  background:var(--color-primary-highlight);
  color:var(--color-primary);
  font-size:.74rem;
  font-weight:800;
  font-family:inherit;
  cursor:pointer;
}
.forum-concept-chip--static{
  cursor:default;
  opacity:.85;
}
.forum-philosopher-replies{display:flex;flex-direction:column;gap:var(--space-2)}
.forum-philosopher-reply{
  padding:var(--space-3);
  border-left:3px solid var(--color-primary);
  border-radius:var(--radius-md);
  background:var(--color-surface-offset);
}
.forum-philosopher-reply strong{display:block;margin-bottom:.2rem;font-size:.82rem;color:var(--color-text)}
.forum-philosopher-reply p{font-size:var(--text-sm);line-height:1.55;color:var(--color-text-muted)}
.forum-comments{display:flex;flex-direction:column;gap:var(--space-2)}
.forum-comment-preview{
  padding:var(--space-3);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-surface-2);
  font-size:var(--text-fit-size,var(--text-sm));
  line-height:1.5;
  color:var(--color-text-muted);
  overflow:hidden;
  min-width:0;
}
.forum-comment-preview strong{color:var(--color-text)}

@media(max-width:420px){
  .app-tab-bar:has(#tab-btn-forum){padding-left:.1rem;padding-right:.1rem}
  .app-tab-bar:has(#tab-btn-forum) .app-tab{padding-left:.04rem;padding-right:.04rem}
  .forum-vote-row{grid-template-columns:1fr}
}

/* Logo */
.logo{display:flex;align-items:center;gap:var(--space-2);min-width:0;color:var(--color-text)}
.logo-mark{width:32px;height:32px;object-fit:contain;flex-shrink:0;border-radius:var(--radius-sm)}
.logo-text{font-family:var(--font-display);font-size:1.2rem;font-weight:400}
/* Icon buttons */
.btn-icon{min-width:2.25rem;min-height:2.25rem;width:auto;height:auto;padding:.45rem;display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);border-radius:var(--radius-full);transition:color var(--transition),background var(--transition)}
.btn-icon:hover{color:var(--color-text);background:var(--color-surface-offset)}
.btn-icon.is-active{color:var(--color-primary);background:var(--color-primary-highlight)}

/* Overflow menu */
.overflow-menu{position:relative}
.overflow-panel{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:min(min(260px, 92vw), calc(100vw - 2rem));
  max-width:calc(100vw - 2rem);
  padding:.4rem;
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  background:var(--color-surface);
  box-shadow:var(--shadow-lg);
  display:flex;
  flex-direction:column;
  gap:.25rem;
  z-index:240;
}
.forum-intro{margin:.15rem 0 0;font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.4}
.overflow-settings-row{display:flex;flex-direction:column;gap:var(--space-1);padding-left:var(--space-2)}
.feedback-compose-modal{max-width:420px;gap:var(--space-3)}
.feedback-compose-textarea{width:100%;min-height:6rem;resize:vertical}
.feedback-compose-send{align-self:stretch}
.share-actions--icons{flex-direction:row;justify-content:center;gap:var(--space-2)}
.share-icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.75rem;height:2.75rem;padding:0;border-radius:var(--radius-md);
}
.share-icon-btn svg{display:block}
.forum-compose-guidelines-details > summary{
  cursor:pointer;font-size:var(--text-sm);font-weight:600;list-style:none;
}
.forum-compose-guidelines-details > summary::-webkit-details-marker{display:none}
.ui-disclosure{font-size:inherit}
.ui-disclosure-summary{
  display:flex;align-items:flex-start;gap:var(--space-2);cursor:pointer;list-style:none;
}
.ui-disclosure-summary::-webkit-details-marker{display:none}
.ui-disclosure-summary-text{flex:1;min-width:0}
.ui-disclosure-toggle{
  flex-shrink:0;font-size:var(--text-xs);font-weight:500;color:var(--color-primary);
}
.ui-disclosure-body{
  margin-top:var(--space-1);font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.45;
}
.ui-disclosure--inline{display:inline-block;width:100%}
.ui-disclosure--inline .ui-disclosure-body{margin-top:var(--space-2)}
.overflow-action{
  width:100%;
  display:flex;
  align-items:center;
  gap:.55rem;
  text-align:left;
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-md);
  font-size:.84rem;
  color:var(--color-text);
  transition:background var(--transition),color var(--transition);
  min-height:2.75rem;
  line-height:1.35;
}
.overflow-action > span:not(.overflow-action-chip):not(.overflow-action-icon){min-width:0;flex:1}
.overflow-action svg{flex-shrink:0;display:block}
.overflow-action:hover{background:var(--color-surface-offset)}
.overflow-action.is-active{color:var(--color-primary);background:var(--color-primary-highlight)}
.overflow-action-chip{
  margin-left:auto;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--color-primary);
  background:var(--color-primary-highlight);
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  padding:.14rem .45rem;
}
.overflow-action--signed-in{color:var(--color-primary)}
.overflow-action--sub{
  font-size:.82rem;
  padding:.35rem .6rem;
  min-height:2.25rem;
  color:var(--color-text-muted);
}
.overflow-divider{
  height:1px;
  margin:.2rem .65rem;
  background:var(--color-border);
  flex-shrink:0;
}
.overflow-divider--footer{
  margin-top:.15rem;
  margin-bottom:0;
}
.overflow-legal-row{
  display:flex;
  flex-direction:column;
  gap:.12rem;
  margin:.05rem 0 .15rem;
  padding:0 .35rem .2rem;
}
.overflow-legal-row--nested{
  margin:0;
  padding:0 0 .05rem .55rem;
}
.overflow-action--nested{
  font-size:.82rem;
  padding:.4rem .65rem .4rem 1.15rem;
  min-height:2.45rem;
}
.overflow-action--deep{
  padding-left:1.55rem;
  font-size:.78rem;
  min-height:2.25rem;
}
.overflow-auth-note{
  margin:0;
  padding:0 .6rem .35rem;
  font-size:.72rem;
  line-height:1.4;
  color:var(--color-text-muted);
}
.auth-modal{max-width:22rem}
.auth-oauth-stack{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  margin:0;
}
.auth-step-actions .auth-primary-btn{flex:1}
.auth-oauth-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:.58rem .75rem;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-surface);
  color:var(--color-text);
  font:inherit;
  font-size:.88rem;
  font-weight:600;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.auth-oauth-btn:hover:not(:disabled){
  background:var(--color-surface-raised,#f6f4ef);
  border-color:var(--color-border-strong,var(--color-border));
}
.auth-oauth-btn:disabled{
  opacity:.65;
  cursor:wait;
}
.auth-oauth-btn--apple{
  background:#111;
  border-color:#111;
  color:#fff;
}
.auth-oauth-btn--apple:hover:not(:disabled){
  background:#000;
  border-color:#000;
}
.auth-oauth-icon{
  display:inline-flex;
  width:1.1rem;
  height:1.1rem;
  flex-shrink:0;
}
.auth-divider{
  display:flex;
  align-items:center;
  gap:.65rem;
  margin:0 0 .85rem;
  color:var(--color-text-muted);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.auth-divider::before,
.auth-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--color-border);
}
.auth-email-hint{
  margin:.15rem 0 0;
  font-size:.74rem;
  line-height:1.45;
  color:var(--color-text-muted);
}
.auth-sheet-subtitle{
  margin:0 0 .85rem;
  font-size:.88rem;
  line-height:1.45;
  color:var(--color-text-muted);
}
.auth-field-label{
  display:block;
  margin:0 0 .35rem;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--color-text-muted);
}
.auth-field-input{
  width:100%;
  box-sizing:border-box;
  margin:0 0 .75rem;
  padding:.55rem .65rem;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  font:inherit;
  background:var(--color-surface);
  color:var(--color-text);
}
.auth-primary-btn{width:100%}
.auth-step-actions .auth-primary-btn{width:auto}
.auth-step-actions{
  display:flex;
  gap:.5rem;
  align-items:stretch;
}
.auth-step-actions .share-btn{flex:1}
.forum-auth-prompt-modal{max-width:24rem}
.forum-auth-prompt-body{
  margin:0 0 1rem;
  font-size:.9rem;
  line-height:1.5;
  color:var(--color-text-muted);
}
.forum-auth-prompt-actions{
  display:flex;
  flex-direction:column;
  gap:.45rem;
}
.share-btn-ghost{
  background:transparent;
  border:1px solid transparent;
  color:var(--color-text-muted);
}
.forum-compose-identity-banner{
  margin:0 1rem .65rem;
  padding:.5rem .65rem;
  font-size:.78rem;
  line-height:1.45;
  color:var(--color-text-muted);
  background:var(--color-surface-offset);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
}
.forum-detail-author-row{
  display:flex;
  align-items:center;
  gap:.35rem;
  flex-wrap:wrap;
  margin-top:.15rem;
}
.forum-detail-author-name{
  font-size:.78rem;
  color:var(--color-text-muted);
  font-weight:600;
}
.forum-detail-author-row .forum-topic-badge--pinned{
  font-size:.6rem;
  padding:.1rem .34rem;
}
.overflow-feedback-row{
  display:flex;
  flex-direction:column;
  gap:.32rem;
  margin:.1rem 0 .2rem;
  padding:.25rem .6rem .35rem;
}
.overflow-feedback-row label{
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--color-text-muted);
}
.overflow-feedback-textarea{
  width:100%;
  min-height:5.5rem;
  resize:vertical;
  box-sizing:border-box;
  font:inherit;
  font-size:.84rem;
  line-height:1.4;
  color:var(--color-text);
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:.45rem .5rem;
}
.overflow-feedback-textarea:focus-visible{
  outline:2px solid var(--color-primary);
  outline-offset:1px;
}
.overflow-reminder-row{
  display:flex;
  flex-direction:column;
  gap:.32rem;
  margin:.1rem 0 .2rem;
  padding:.25rem .6rem .35rem;
}
.overflow-reminder-row label{
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--color-text-muted);
}
.reminder-wheel{
  position:relative;
  width:100%;
  max-width:100%;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-surface-2);
  overflow:hidden;
}
.reminder-wheel-highlight{
  position:absolute;
  left:.35rem;
  right:.35rem;
  top:50%;
  transform:translateY(-50%);
  height:36px;
  margin-top:0;
  border-radius:var(--radius-sm);
  background:color-mix(in oklab,var(--color-text-muted) 12%,transparent);
  pointer-events:none;
  z-index:1;
}
.reminder-wheel-inner{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:row;
  align-items:stretch;
  width:100%;
  max-width:100%;
}
.reminder-wheel-col{
  flex:1;
  min-width:0;
  position:relative;
}
.reminder-wheel-scroll{
  height:180px;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:y mandatory;
  scroll-padding-block:72px;
  padding-top:72px;
  padding-bottom:72px;
  box-sizing:border-box;
  mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 82%,transparent 100%);
  mask-size:100% 100%;
}
.reminder-wheel-scroll:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}
.reminder-wheel-item{
  height:36px;
  min-height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.88rem;
  font-variant-numeric:tabular-nums;
  color:var(--color-text-muted);
  scroll-snap-align:center;
}
.reminder-wheel-col:nth-child(1) .reminder-wheel-item{font-weight:600;color:var(--color-text)}
.reminder-wheel-col:nth-child(2) .reminder-wheel-item{font-weight:500}
.overflow-reminder-actions{
  display:flex;
  flex-direction:row;
  gap:.35rem;
  margin-top:.15rem;
}
.overflow-reminder-action-btn{
  flex:1;
  min-width:0;
  text-align:center;
  font-size:.76rem;
  font-weight:600;
  color:var(--color-text);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:.38rem .4rem;
  transition:background var(--transition),border-color var(--transition),color var(--transition);
}
.overflow-reminder-action-btn:hover{
  border-color:var(--color-text-muted);
  background:var(--color-surface-offset);
}
.overflow-reminder-action-btn--muted{
  font-weight:500;
  color:var(--color-text-muted);
}
.overflow-footer-bar{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:.35rem;
  margin-top:.1rem;
  padding:.35rem .5rem .25rem;
}
.overflow-footer-version{
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--color-text-muted);
  flex-shrink:0;
}
.overflow-footer-link{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  flex-shrink:0;
  color:var(--color-text-muted);
  border-radius:var(--radius-md);
  transition:color var(--transition),background var(--transition);
}
.overflow-footer-link:hover{color:var(--color-text);background:var(--color-surface-offset)}
.overflow-footer-link svg{display:block}

/* Greeting */
.greeting{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-5)}
.greeting-left{display:flex;flex-direction:column;gap:var(--space-1);min-width:0;flex:1}
.greeting-right{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-1);flex-shrink:0;padding-top:3px}
.greeting-label{
  font-size:var(--text-sm);
  color:var(--color-text-muted);
  text-transform:none;
  letter-spacing:.02em;
  line-height:1.35;
  max-width:100%;
  overflow-wrap:anywhere;
}
.greeting-date{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:400;line-height:1.15;letter-spacing:-.02em}

/* Society issue tags */
.greeting-tags{display:flex;flex-wrap:wrap;gap:var(--space-1);justify-content:flex-end}
.greeting-tags-sm{gap:.2rem}
.dilemma-tag{font-size:.68rem;font-weight:500;padding:.15rem .5rem;border-radius:var(--radius-full);background:var(--color-surface-offset);color:var(--color-text-muted);border:1px solid var(--color-border);white-space:nowrap;letter-spacing:.01em}

/* =============================================
   DILEMMA CARD
   ============================================= */
.card-wrapper{position:relative;min-height:0}

.dilemma-card{position:relative;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-md);transition:opacity .25s ease,transform .25s ease}
.dilemma-card.is-exiting{opacity:0;transform:translateY(-6px) scale(.98)}

/* Bookmarks */
.bm-btn{color:var(--color-text-muted)}
.bm-btn:hover{color:var(--color-text)}
.bm-btn.is-active{color:var(--color-primary);background:var(--color-primary-highlight)}
.dilemma-card-toolbar{position:absolute;top:12px;right:12px;z-index:5;display:flex;align-items:center;gap:2px}
.dilemma-card-toolbar .bm-btn--corner{position:static;top:auto;right:auto}
.bm-btn--corner{position:absolute;top:12px;right:12px;z-index:5}
.bm-btn--inline{margin-left:auto;align-self:flex-start;flex-shrink:0}
.gf-tag-wrap{display:flex;align-items:center;gap:var(--space-2)}
.bm-btn--tag{width:32px;height:32px}
.gf-row{display:flex;align-items:stretch;gap:var(--space-2);min-width:0;width:100%}
.gf-row .gf-item{flex:1;min-width:0;overflow:hidden}
.bm-btn--row{width:36px;height:36px;align-self:center}
.bm-group-title{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);margin-top:var(--space-4)}
.bm-item{display:flex;align-items:flex-start;gap:var(--space-2);border:1px solid var(--color-border);background:var(--color-surface-2);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3)}
.bm-item-main{flex:1;min-width:0;text-align:left;font-size:var(--text-sm);line-height:1.45;color:var(--color-text)}
.bm-item-main:hover{text-decoration:underline}
.bm-item-remove{flex-shrink:0;font-size:var(--text-xs);padding:.25rem .5rem;border-radius:var(--radius-full);border:1px solid var(--color-border);color:var(--color-text-muted);transition:background var(--transition),border-color var(--transition),color var(--transition)}
.bm-item-remove:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-highlight)}
.bm-item.bm-item--clickable{cursor:pointer;transition:background var(--transition),border-color var(--transition)}
.bm-item.bm-item--clickable:hover{background:var(--color-surface-offset);border-color:var(--color-text-muted)}

.dilemma-image-wrap{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--color-surface-offset)}
.dilemma-image{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .3s ease}
.dilemma-image[src=""]{opacity:0}

.dilemma-body{padding:var(--space-5) var(--space-6) var(--space-5);display:flex;flex-direction:column;gap:var(--space-4)}

.dilemma-text{font-family:var(--font-display);font-size:var(--text-fit-size,clamp(1.1rem,1rem+.8vw,1.5rem));font-style:italic;line-height:1.45;letter-spacing:-.01em;overflow:hidden;min-width:0}

/* Options */
.dilemma-options{display:flex;flex-direction:column;gap:var(--space-2)}

.option-btn{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--color-surface-offset);border:1.5px solid var(--color-border);border-radius:var(--radius-lg);font-size:var(--text-sm);text-align:left;transition:border-color var(--transition),background var(--transition),transform var(--transition);cursor:pointer;line-height:1.5;overflow:hidden;min-width:0}
.option-text{flex:1;min-width:0;font-size:var(--text-fit-size,1em);line-height:inherit;overflow:hidden}
.option-btn:hover{border-color:var(--color-primary);background:var(--color-primary-highlight)}
.option-btn:active{transform:scale(.98)}

.option-letter{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);font-weight:600;font-size:var(--text-xs);flex-shrink:0;color:#fff}
.option-letter[data-opt="a"]{background:var(--color-accent-a)}
.option-letter[data-opt="b"]{background:var(--color-accent-b)}

.option-btn.is-selected{border-color:var(--color-primary);background:var(--color-primary-highlight);pointer-events:none}
.option-btn.is-dimmed{opacity:.45;pointer-events:none}

.choice-undo-bar{
  position:fixed;
  bottom:calc(var(--app-main-tab-bottom-pad) + var(--space-2));
  left:0;
  right:0;
  margin-left:auto;
  margin-right:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-3);
  max-width:440px;
  width:calc(100% - var(--space-8));
  padding:var(--space-2) var(--space-4);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  box-shadow:var(--shadow-md);
  z-index:60;
  animation:choiceUndoEnter .25s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes choiceUndoEnter{
  from{opacity:0;transform:translateY(10px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.choice-undo-label{
  flex:0 1 auto;
  font-size:var(--text-fit-size,var(--text-xs));
  color:var(--color-text-muted);
  line-height:1.35;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-align:center;
}
.choice-undo-btn{
  flex-shrink:0;
  padding:var(--space-1) var(--space-3);
  font-size:var(--text-xs);
  font-weight:600;
  color:var(--color-primary);
  border-radius:var(--radius-full);
  transition:background var(--transition);
}
.choice-undo-btn:hover{background:var(--color-primary-highlight)}

.dilemma-card-toolbar .btn-share-trigger{flex-shrink:0}
.dilemma-card-toolbar .btn-share-trigger:active{transform:scale(.97)}

/* =============================================
   CHOSEN STATE
   ============================================= */
.chosen-state{position:relative;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6) var(--space-6) var(--space-3);text-align:left;display:flex;flex-direction:column;align-items:stretch;gap:var(--space-3);box-shadow:var(--shadow-md);animation:cardEnter .35s cubic-bezier(.16,1,.3,1) forwards}
.chosen-reflection{font-size:var(--text-sm);color:var(--color-text);max-width:36ch;line-height:1.65;font-style:italic}
.chosen-cta{font-size:var(--text-xs);color:var(--color-text-faint);margin-top:var(--space-2)}

.btn-next{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);background:var(--color-primary);color:#fff;border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:500;transition:background var(--transition),transform var(--transition)}
.btn-next:hover{background:var(--color-primary-hover)}
.btn-next:active{transform:scale(.97)}

/* =============================================
   WEEKLY THEME BADGE
   ============================================= */
.theme-badge{display:inline-flex;align-items:center;gap:.3rem;padding:.15rem .55rem;border-radius:var(--radius-full);border:1px solid var(--theme-color, var(--color-border));background:color-mix(in srgb, var(--theme-color, var(--color-primary)) 10%, transparent)}
.theme-emoji{font-size:.75rem;line-height:1}
.theme-name{font-size:.7rem;font-weight:500;color:var(--theme-color, var(--color-primary));letter-spacing:.02em}

/* =============================================
   TWO VIEWS CARD
   ============================================= */
.two-views{display:flex;flex-direction:row;gap:0;width:100%;margin-top:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}
.view-col{flex:1;padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}
.view-col-a{background:color-mix(in srgb,var(--color-accent-a) 6%,var(--color-surface-1))}
.view-col-b{background:color-mix(in srgb,var(--color-accent-b) 6%,var(--color-surface-1))}
.view-divider{width:1px;background:var(--color-border);flex-shrink:0}
.view-col-label{display:flex;align-items:center;gap:.35rem;font-size:.68rem;font-weight:500;text-transform:uppercase;letter-spacing:.07em;color:var(--color-text-muted);margin-bottom:var(--space-1)}
.view-col-a .view-col-label{color:var(--color-accent-a)}
.view-col-b .view-col-label{color:var(--color-accent-b)}
.view-col-text{font-size:var(--text-fit-size,.7rem);line-height:1.6;color:var(--color-text);font-style:italic;overflow:hidden;min-width:0}

/* =============================================
   ACCORDIONS
   ============================================= */
.accordions{width:100%;display:flex;flex-direction:column;margin-top:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}
.accordion{border-bottom:1px solid var(--color-border)}
.accordion:last-child{border-bottom:none}
.accordion-summary{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);cursor:pointer;list-style:none;user-select:none;transition:background var(--transition)}
.accordion-summary::-webkit-details-marker{display:none}
.accordion-summary:hover{background:var(--color-surface-2)}
.acc-icon{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius-md);background:var(--color-surface-2);color:var(--color-primary);flex-shrink:0}
.acc-title{flex:1;min-width:0;font-size:var(--text-fit-size,var(--text-sm));font-weight:500;color:var(--color-text);white-space:nowrap;overflow:hidden}
.acc-chevron{color:var(--color-text-muted);transition:transform .25s ease;flex-shrink:0}
.accordion[open] .acc-chevron{transform:rotate(180deg)}
.accordion-body{padding:var(--space-3) var(--space-4) var(--space-4);animation:accordionOpen .2s ease}
@keyframes accordionOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* =============================================
   STICKY NEXT BUTTON
   ============================================= */
.sticky-next{position:fixed;bottom:calc(var(--app-main-tab-bottom-pad) + var(--space-2));left:0;right:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.25rem;padding:var(--space-2) var(--space-4) var(--space-1);background:linear-gradient(to top,var(--color-bg) 70%,transparent);z-index:65}
.sticky-next-rows{display:flex;flex-direction:column;gap:.5rem;width:100%;max-width:440px}
.sticky-next-row{display:flex;flex-wrap:wrap;gap:.5rem;width:100%;align-items:stretch}
.sticky-next-row--actions .btn-next--action{
  flex:1;
  min-width:0;
  padding:var(--space-2) var(--space-2);
  font-size:var(--text-xs);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  color:var(--color-text);
  box-shadow:none;
  font-weight:500;
}
.sticky-next-row--actions .btn-next--action:hover{
  background:var(--color-surface-offset);
  border-color:var(--color-primary);
  color:var(--color-text);
}
.sticky-next-row--actions .btn-next--action.btn-next--has-entry{color:var(--color-primary)}
.sticky-next-row--secondary .btn-next{flex:1;min-width:min(100%,6.5rem);padding-inline:var(--space-3);font-size:var(--text-xs)}
.sticky-next-row--primary .btn-next{width:100%;justify-content:center}
.sticky-next-row .btn-next{justify-content:center;text-align:center;white-space:normal;line-height:1.25}
.sticky-next-hint{max-width:440px;text-align:center;font-size:var(--text-xs);line-height:1.35;color:var(--color-text-muted)}
.btn-next--capped{background:var(--color-surface-offset);color:var(--color-text);border:1px solid var(--color-border)}
.btn-next--capped:hover{background:var(--color-surface-offset)}
.btn-next--secondary{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  color:var(--color-text);
  box-shadow:none;
}
.btn-next--secondary:hover{
  background:var(--color-surface-offset);
  border-color:var(--color-primary);
}
.btn-next--ghost{
  background:transparent;
  border:none;
  box-shadow:none;
  color:var(--color-text-muted);
  font-weight:500;
}
.btn-next--ghost:hover{
  background:transparent;
  color:var(--color-primary);
}
.btn-next--ghost.btn-next--has-entry{color:var(--color-primary)}
.sticky-next-row--secondary .btn-next--ghost{
  flex:1;
  min-width:0;
  padding:var(--space-2) var(--space-1);
}
.btn-next__icon{display:inline-flex;align-items:center;flex-shrink:0;margin-left:.15rem}
.btn-next__icon .dd-icon{width:1.05em;height:1.05em}
.btn-next__icon .dd-icon--raster{object-fit:contain;display:block}

/* =============================================
   OTHERS SPLIT
   ============================================= */
.others-split{width:100%;display:flex;flex-direction:column;gap:var(--space-2);text-align:left}
.os-label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted)}
.os-bar-wrap{height:10px;border-radius:var(--radius-full);overflow:hidden;background:var(--color-border);display:flex}
.os-bar-a{height:100%;background:var(--color-accent-a);border-radius:var(--radius-full) 0 0 var(--radius-full);transition:width .7s cubic-bezier(.16,1,.3,1)}
.os-bar-b{height:100%;background:var(--color-accent-b);border-radius:0 var(--radius-full) var(--radius-full) 0;transition:width .7s cubic-bezier(.16,1,.3,1)}
.os-labels{display:none}
.os-opt-label{font-size:.7rem;color:var(--color-text-muted);flex:1}
.os-opt-label-b{text-align:right}

/* =============================================
   GO FURTHER
   ============================================= */
#acc-further>.accordion-body{padding-top:var(--space-2)}
.go-further{width:100%;border-top:1px solid var(--color-border);margin-top:0;padding-top:var(--space-4);display:flex;flex-direction:column;gap:var(--space-4);text-align:left;animation:cardEnter .35s .1s cubic-bezier(.16,1,.3,1) both}
.gf-heading{font-family:var(--font-display);font-size:var(--text-base);font-weight:400;font-style:normal;color:var(--color-text)}
.gf-block{display:flex;flex-direction:column;gap:var(--space-2)}
.gf-block-label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted)}
.gf-tags{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.gf-tag{font-size:var(--text-sm);padding:.25rem .65rem;background:var(--color-primary-highlight);color:var(--color-primary);border-radius:var(--radius-full);border:1px solid var(--color-border)}
.gf-tag-link{text-decoration:none;cursor:pointer;transition:background var(--transition),border-color var(--transition)}
.gf-tag-link:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.gf-list{display:flex;flex-direction:column;gap:var(--space-2)}
.gf-item{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-sm);color:var(--color-text);line-height:1.5}
.gf-item-text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;font-size:var(--text-fit-size,inherit)}
.gf-link{text-decoration:none;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface-2);transition:border-color var(--transition),background var(--transition)}
.gf-link:hover{border-color:var(--color-primary);background:var(--color-primary-highlight)}
.gf-icon{width:16px;height:16px;flex-shrink:0;margin-top:0;color:var(--color-text-muted)}
.gf-meta{font-size:var(--text-xs);color:var(--color-text-muted)}
.gf-book-inline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
  min-width:0;
  width:100%;
  font-size:var(--text-fit-size,inherit);
  white-space:nowrap;
  color:inherit;
  font-family:inherit;
  font-weight:inherit;
  line-height:inherit;
}
.gf-book-title-inline{
  min-width:0;
  flex:1;
  font-size:1em;
  font:inherit;
  color:inherit;
}
.gf-book-author-inline{
  flex-shrink:0;
  display:inline-flex;
  align-items:baseline;
  gap:.35rem;
  font:inherit;
  color:inherit;
}
.gf-book-by{
  font-size:.85em;
  font-weight:inherit;
  color:inherit;
  opacity:.8;
}
.gf-book-author-name{
  font-size:1em;
  color:inherit;
}

/* Books row */
.gf-books-row{display:flex;flex-direction:row;gap:var(--space-2)}
.gf-book-card{flex:1;display:flex;flex-direction:row;gap:var(--space-2);align-items:flex-start;text-decoration:none;color:inherit;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);transition:border-color var(--transition),background var(--transition);min-width:0}
.gf-book-card:hover{border-color:var(--color-primary);background:var(--color-primary-highlight)}
.gf-book-cover{flex-shrink:0;width:40px;min-height:56px;border-radius:3px;background:var(--color-surface-offset);overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:1px 2px 6px rgba(0,0,0,.15)}
.gf-book-cover-img{width:40px;display:block;border-radius:3px}
.gf-cover-fallback{background:linear-gradient(150deg,var(--color-primary-highlight),var(--color-surface-offset))}
.gf-cover-fallback::after{content:'📖';font-size:1rem}
.gf-book-meta{display:flex;flex-direction:column;gap:.2rem;min-width:0;flex:1}
.gf-book-title{font-size:var(--text-xs);font-weight:600;color:var(--color-text);line-height:1.35}
.gf-book-author{font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.3}

@keyframes cardEnter{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

/* =============================================
   STATS
   ============================================= */
.stats{display:flex;align-items:center;justify-content:center;gap:var(--space-6);padding:var(--space-5);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg)}
.stat-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}
.stat-value{font-family:var(--font-display);font-size:var(--text-xl);font-weight:400;line-height:1}
.stat-label{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.07em}
.stat-divider{width:1px;height:36px;background:var(--color-border)}

/* =============================================
   HISTORY PANEL
   ============================================= */
.history-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:200;backdrop-filter:blur(2px);animation:fadeIn .2s ease forwards}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.history-panel{position:fixed;top:0;right:0;bottom:0;width:min(360px,100vw);background:var(--color-surface);border-left:1px solid var(--color-border);z-index:210;display:flex;flex-direction:column;animation:slideIn .28s cubic-bezier(.16,1,.3,1) forwards;box-shadow:var(--shadow-xl);overflow:hidden}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
.history-panel.is-closing{animation:slideOut .22s cubic-bezier(.4,0,1,1) forwards}
@keyframes slideOut{from{transform:translateX(0)}to{transform:translateX(100%)}}

.history-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--color-border);flex-shrink:0}
.history-header-actions{display:flex;align-items:center;gap:var(--space-2)}
.history-title{font-family:var(--font-display);font-size:var(--text-lg);font-style:italic;font-weight:400}
.btn-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);border-radius:var(--radius-full);transition:color var(--transition),background var(--transition)}
.btn-close:hover{color:var(--color-text);background:var(--color-surface-offset)}

.history-list{flex:1;overflow-y:auto;padding:var(--space-4) var(--space-6) var(--space-8);display:flex;flex-direction:column;gap:var(--space-3)}
.history-empty{font-size:var(--text-sm);color:var(--color-text-faint);text-align:center;padding:var(--space-10) 0;line-height:1.8}

.history-date-group{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.08em;margin-top:var(--space-2);padding-bottom:var(--space-1);border-bottom:1px solid var(--color-border)}
.history-date-group:first-child{margin-top:0}

.history-item{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);animation:cardEnter .25s cubic-bezier(.16,1,.3,1) both}
.history-item-body{display:flex;align-items:flex-start;gap:var(--space-3)}
.history-item-image{width:56px;height:56px;flex-shrink:0;border-radius:var(--radius-md);object-fit:cover;background:var(--color-surface-offset);border:1px solid var(--color-border)}
.history-item-image[src=""]{display:none}
.history-item-text{font-size:var(--text-fit-size,.8rem);color:var(--color-text);line-height:1.45;overflow:hidden;min-width:0}
.history-item-meta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
.history-item-choice{font-size:.7rem;font-weight:500;color:var(--color-primary)}
.history-item-date{font-size:.68rem;color:var(--color-text-faint)}

.journal-item-content{min-width:0;flex:1}
.journal-item-note{font-size:.78rem;color:var(--color-text-muted);line-height:1.5;margin-top:var(--space-2);white-space:pre-wrap}

/* =============================================
   SHARE MODAL
   ============================================= */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:300;display:flex;align-items:center;justify-content:center;padding:var(--space-6);animation:fadeIn .2s ease forwards;backdrop-filter:blur(4px)}
.modal-overlay#chat-pick-overlay{z-index:320}
.modal-overlay#concept-overlay{z-index:360}
.modal-overlay.plato-reader-overlay{z-index:380}
.modal{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);width:100%;max-width:420px;display:flex;flex-direction:column;gap:var(--space-5);box-shadow:var(--shadow-xl);animation:cardEnter .28s cubic-bezier(.16,1,.3,1) forwards}
.modal-header{display:flex;align-items:center;justify-content:space-between}
.modal-title{font-family:var(--font-display);font-size:var(--text-lg);font-style:italic;font-weight:400}

.share-card-preview{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.share-card{background:linear-gradient(135deg,#e8e0d8 0%,#d4c8c0 40%,#c8ccd8 100%);padding:var(--space-6);min-height:200px;display:flex;flex-direction:column;justify-content:space-between}
[data-theme='dark'] .share-card{background:linear-gradient(135deg,#2a2520 0%,#1e1a2a 100%)}
.share-card-inner{display:flex;flex-direction:column;gap:var(--space-4)}
.share-card-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;font-weight:600;color:var(--color-primary)}
.share-card-text{font-family:var(--font-display);font-size:var(--text-fit-size,clamp(1rem,.9rem+.8vw,1.3rem));font-style:italic;line-height:1.45;color:#1e1c18;overflow:hidden;min-width:0}
[data-theme='dark'] .share-card-text{color:#cccac6}
.share-card-options{display:flex;align-items:center;gap:var(--space-2);font-size:.8rem;color:rgba(30,28,24,.6);flex-wrap:wrap}
[data-theme='dark'] .share-card-options{color:rgba(204,202,198,.5)}
.share-card-opt{font-weight:500}
.share-card-or{color:rgba(30,28,24,.35);font-style:italic}
[data-theme='dark'] .share-card-or{color:rgba(204,202,198,.3)}
.share-card-footer{display:flex;align-items:center;gap:var(--space-2);font-size:.7rem;font-weight:500;color:rgba(30,28,24,.4);letter-spacing:.04em;margin-top:var(--space-3)}
[data-theme='dark'] .share-card-footer{color:rgba(204,202,198,.35)}
.share-card-footer svg{opacity:.5}

.share-social{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  justify-content:center;
  margin-bottom:var(--space-4);
}
.share-social-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.25rem;
  padding:var(--space-2) var(--space-4);
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  background:var(--color-surface-offset);
  color:var(--color-text);
  font-size:var(--text-xs);
  font-weight:700;
  text-decoration:none;
  transition:background var(--transition),border-color var(--transition),color var(--transition),transform var(--transition);
}
.share-social-btn:hover{
  border-color:var(--color-text-muted);
  background:var(--color-surface);
}
.share-social-btn:active{transform:scale(.97)}
.share-social-btn--native{
  cursor:pointer;
  font-family:inherit;
}
.share-actions{display:flex;flex-direction:column;gap:var(--space-2)}
.share-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:500;transition:background var(--transition),color var(--transition),border-color var(--transition),transform var(--transition)}
.share-btn:active{transform:scale(.98)}
.share-btn-primary{background:var(--color-primary);color:#fff;border:1px solid transparent}
.share-btn-primary:hover{background:var(--color-primary-hover)}
.share-btn-secondary{background:transparent;color:var(--color-text-muted);border:1px solid var(--color-border)}
.share-btn-secondary:hover{color:var(--color-text);border-color:var(--color-text-muted);background:var(--color-surface-offset)}
.share-hint{font-size:var(--text-xs);color:var(--color-primary);text-align:center;min-height:1.2em;transition:opacity .3s ease}

#export-card-container{position:fixed;left:-9999px;top:-9999px;pointer-events:none;width:600px}
.export-only{width:600px!important;padding:40px!important;min-height:280px!important;border-radius:0!important}
.export-only .share-card-text{font-size:1.5rem!important}

/* Legal modal */
.legal-modal{max-height:min(680px, 88dvh)}
.legal-content{
  max-height:42dvh;
  overflow-y:auto;
  padding:var(--space-4);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-surface-2);
  color:var(--color-text);
  font-size:.78rem;
  line-height:1.6;
  white-space:pre-wrap;
}
.legal-email{display:flex;gap:var(--space-2)}
.legal-email-input{
  min-width:0;
  flex:1;
  padding:var(--space-3) var(--space-4);
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  background:var(--color-surface-2);
  color:var(--color-text);
  font:inherit;
  font-size:var(--text-sm);
}
.legal-email-input:focus{outline:none;border-color:var(--color-primary)}
.legal-send-btn{flex-shrink:0}

/* Concept modal */
.concept-modal{
  max-width:380px;
  gap:var(--space-4);
}
.concept-modal--expanded{
  max-height:min(88dvh, 720px);
}
.concept-body{
  padding:var(--space-4);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-surface-2);
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  overflow:auto;
  max-height:min(52dvh, 420px);
}
.concept-modal--expanded .concept-body{
  max-height:min(62dvh, 520px);
}
.concept-note{
  font-family:var(--font-display);
  font-size:var(--text-base);
  font-style:italic;
  line-height:1.6;
  color:var(--color-text);
  margin:0;
}
.concept-accordion{
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--color-border);
}
.concept-accordion-item{
  border-bottom:1px solid var(--color-border);
}
.concept-accordion-item[open] .concept-accordion-chevron{
  transform:rotate(180deg);
}
.concept-accordion-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
  padding:var(--space-3) 0;
  cursor:pointer;
  list-style:none;
  font-size:var(--text-sm);
  font-weight:500;
  color:var(--color-text);
}
.concept-accordion-summary-left{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  min-width:0;
}
.concept-accordion-icon{
  display:inline-flex;
  flex-shrink:0;
  font-size:1rem;
  line-height:1;
}
.concept-accordion-summary::-webkit-details-marker{display:none}
.concept-accordion-chevron{
  flex-shrink:0;
  color:var(--color-text-muted);
  transition:transform .2s ease;
}
.concept-accordion-panel{
  padding:0 0 var(--space-3);
}
.concept-accordion-text{
  margin:0;
  padding:var(--space-3);
  border-left:3px solid var(--color-border-strong, var(--color-border));
  background:var(--color-surface);
  border-radius:var(--radius-sm);
  font-size:var(--text-sm);
  line-height:1.65;
  color:var(--color-text-muted);
}
.concept-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--space-2);
}
.bm-btn--concept-modal{
  width:36px;
  height:36px;
  min-width:36px;
  min-height:36px;
  padding:0;
  flex-shrink:0;
}
.concept-actions #concept-ask-philosopher{
  margin-left:auto;
  padding:.35rem .85rem;
  min-height:36px;
  font-size:var(--text-xs);
  line-height:1.25;
}

/* Bookmarks modal */
.bookmarks-modal{width:min(1100px, 98vw);max-width:1100px;max-height:min(780px, 90dvh)}
.bookmarks-tabs{display:flex;gap:var(--space-2);flex-wrap:wrap}
.bm-tab{padding:.4rem .75rem;border:1px solid var(--color-border);border-radius:var(--radius-full);background:var(--color-surface-2);color:var(--color-text-muted);font-size:var(--text-xs);transition:background var(--transition),border-color var(--transition),color var(--transition)}
.bm-tab:hover{border-color:var(--color-primary);color:var(--color-text);background:var(--color-primary-highlight)}
.bm-tab.is-active{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-highlight)}
.bookmarks-grid{display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));gap:var(--space-4);width:100%}
.bookmarks-grid--single{grid-template-columns:1fr}
.bm-col{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.bm-col--single .bm-col-title{display:none}
.bm-col-title{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted)}
.bm-col-list{display:flex;flex-direction:column;gap:var(--space-2);min-width:0;overflow:auto;max-height:min(56dvh, 520px);padding-right:2px}
.bm-col-list--single{max-height:min(62dvh, 600px)}
.bm-col-empty{font-size:var(--text-xs);color:var(--color-text-faint);padding:var(--space-2) 0}
.bm-item{display:flex;align-items:flex-start;gap:var(--space-2);border:1px solid var(--color-border);background:var(--color-surface-2);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3)}
.bm-item-media{width:42px;height:42px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--color-surface-offset);border:1px solid var(--color-border);overflow:hidden;color:var(--color-text-muted)}
.bm-item-media--thumb{border-radius:14px}
.bm-item-media--avatar{border-radius:9999px}
.bm-item-media-img{width:100%;height:100%;object-fit:cover;display:block}
.bm-item-media--initials{font-size:.72rem;font-weight:600;color:var(--color-primary);background:var(--color-primary-highlight);border-color:var(--color-border)}
.bm-item-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem;padding-top:1px}
.bm-item-title{font-size:var(--text-fit-size,var(--text-sm));line-height:1.4;color:var(--color-text);overflow:hidden;min-width:0}
.bm-item-sub{font-size:var(--text-fit-size,var(--text-xs));color:var(--color-text-muted);white-space:nowrap;overflow:hidden;min-width:0}
.bm-item-remove{flex-shrink:0;font-size:var(--text-xs);padding:.25rem .5rem;border-radius:var(--radius-full);border:1px solid var(--color-border);color:var(--color-text-muted);transition:background var(--transition),border-color var(--transition),color var(--transition)}
.bm-item-remove:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-highlight)}

@media (max-width: 980px){
  .bookmarks-grid:not(.bookmarks-grid--single){grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width: 520px){
  .bookmarks-grid:not(.bookmarks-grid--single){grid-template-columns:1fr}
  .bm-col-list{max-height:40dvh}
}

/* Feedback flash (thanks / errors) */
.feedback-flash-modal{
  max-width:360px;
  text-align:center;
  align-items:center;
  gap:var(--space-4);
  padding-top:var(--space-8);
  padding-bottom:var(--space-6);
}
.feedback-flash-visual{
  display:flex;
  justify-content:center;
  margin-bottom:var(--space-1);
}
.feedback-flash-icon{
  width:52px;
  height:52px;
  border-radius:var(--radius-full);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.feedback-flash-modal--success .feedback-flash-icon--success{
  background:var(--color-primary-highlight);
  color:var(--color-primary);
  border:1px solid var(--color-border);
}
.feedback-flash-modal--error .feedback-flash-icon--notice{
  background:color-mix(in oklab,var(--color-accent-a) 14%,transparent);
  color:var(--color-accent-a);
  border:1px solid color-mix(in oklab,var(--color-accent-a) 35%,var(--color-border));
}
.feedback-flash-message{
  font-family:var(--font-body);
  font-size:var(--text-sm);
  font-style:normal;
  font-weight:400;
  line-height:1.55;
  color:var(--color-text);
  max-width:22rem;
}
.feedback-flash-modal--success .feedback-flash-message{
  font-family:var(--font-display);
  font-size:var(--text-lg);
  font-style:italic;
  font-weight:400;
  line-height:1.45;
}
.feedback-flash-btn{width:100%;max-width:14rem}

/* =============================================
   REFLECTION IMAGE (top of answer page)
   ============================================= */
.reflection-image-wrap{
  width:100%;
  border-radius:var(--radius-lg);
  overflow:hidden;
  max-height:var(--reflection-image-height);
  margin-bottom:var(--space-1);
  animation:cardEnter .4s cubic-bezier(.16,1,.3,1) both;
}
.reflection-image{
  width:100%;
  height:var(--reflection-image-height);
  object-fit:cover;
  display:block;
  filter:saturate(0%) brightness(0.72);
  transition:filter .5s ease;
}

/* =============================================
   PHILOSOPHER AVATAR
   ============================================= */
.philosopher-avatar{
  flex-shrink:0;
  width:72px;
  align-self:stretch;
  border-radius:var(--radius-md);
  background-color:var(--color-surface-offset);
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  overflow:hidden;
  border:1px solid var(--color-border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-display);
  font-size:.95rem;
  color:var(--color-text-muted);
  min-height:80px;
  position:relative;
}
.philosopher-avatar-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
}
.philosopher-avatar--initials{
  background:linear-gradient(160deg,var(--color-surface-offset) 0%,var(--color-surface-2) 100%);
}
.philosopher-avatar-initials{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.05rem;
  letter-spacing:.04em;
  color:var(--color-text-muted);
}

/* =============================================
   CHOSEN HEADER (simplified — no 'Good thinking')
   ============================================= */
.chosen-header{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:var(--space-2);padding-bottom:var(--space-3);border-bottom:1px solid var(--color-border)}
.chosen-header-top{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--space-3);width:100%}
.chosen-header-top .chosen-sub{flex:1;min-width:0;margin:0}
.chosen-bookmark-slot{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0;align-self:center}
.chosen-bookmark-slot .btn-icon{flex-shrink:0}
.bm-btn--chosen-row{position:static;top:auto;right:auto}
.chosen-sub{font-size:var(--text-sm);color:var(--color-text-muted)}
.chosen-sub strong{color:var(--color-text)}
.chosen-question{font-size:var(--text-fit-size,var(--text-xs));color:var(--color-text-muted);font-style:italic;line-height:1.55;margin-top:var(--space-1);overflow:hidden;min-width:0}
.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;
}
.chosen-meta{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:var(--space-2)}
.theme-badge-sm{padding:.18rem .55rem;font-size:.72rem}
.theme-badge-sm .theme-emoji{font-size:.8rem}
.theme-badge-sm .theme-name{font-size:.7rem}

/* =============================================
   TWO VIEWS INLINE (How Others Chose — segmented tabs)
   Card max-width is 560px; side-by-side columns are always too narrow to read.
   ============================================= */
.two-views-tablist{
  display:flex;
  margin-top:var(--space-4);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md) var(--radius-md) 0 0;
  overflow:hidden;
  background:var(--color-bg);
}
.two-views-tab{
  flex:1;
  padding:.625rem .5rem;
  border:none;
  background:transparent;
  font-family:var(--font-body);
  font-size:.72rem;
  font-weight:600;
  cursor:pointer;
  line-height:1.35;
  transition:background var(--transition),box-shadow var(--transition);
}
.two-views-tab--a{color:var(--color-accent-a)}
.two-views-tab--b{color:var(--color-accent-b)}
.two-views-tab--a.is-active{
  background:color-mix(in srgb,var(--color-accent-a) 12%,var(--color-surface-1));
  box-shadow:inset 0 -2px 0 var(--color-accent-a);
}
.two-views-tab--b.is-active{
  background:color-mix(in srgb,var(--color-accent-b) 12%,var(--color-surface-1));
  box-shadow:inset 0 -2px 0 var(--color-accent-b);
}
.two-views-tablist + .two-views-inline{
  margin-top:0;
  border:1px solid var(--color-border);
  border-top:none;
  border-radius:0 0 var(--radius-md) var(--radius-md);
  animation:none;
}
.two-views-inline .view-divider{display:none}
.two-views-inline .view-col:not(.is-active){display:none}
.two-views-inline .view-col.is-active{flex:none;width:100%}
.two-views-inline .view-col-label{
  font-size:.72rem;
  text-transform:none;
  letter-spacing:normal;
  font-weight:600;
  line-height:1.35;
}
.two-views-inline .view-col-text{
  font-size:var(--text-sm);
  line-height:1.65;
  overflow:visible;
  font-style:italic;
}
.two-views-inline .view-col{padding:var(--space-4)}
.view-col-deeper{
  align-self:flex-start;
  margin-top:auto;
  padding:0;
  border:none;
  background:transparent;
  font-size:.8125rem;
  font-weight:500;
  letter-spacing:.02em;
  cursor:pointer;
  transition:opacity var(--transition);
}
.view-col-deeper--a{color:var(--color-accent-a)}
.view-col-deeper--b{color:var(--color-accent-b)}
.view-col-deeper:hover{opacity:.75}

/* Go Deeper bottom sheet */
.go-deeper-overlay{
  align-items:flex-end;
  justify-content:center;
  padding:0;
  z-index:340;
}
.go-deeper-sheet{
  width:100%;
  max-width:480px;
  max-height:min(75dvh, 640px);
  display:flex;
  flex-direction:column;
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  border-bottom:none;
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow:var(--shadow-xl);
  animation:goDeeperSlideUp .28s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes goDeeperSlideUp{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}
.go-deeper-handle{
  flex-shrink:0;
  width:2.25rem;
  height:.25rem;
  margin:.65rem auto .35rem;
  border-radius:var(--radius-full);
  background:var(--color-border);
}
.go-deeper-sheet-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  padding:0 var(--space-4) var(--space-3);
  flex-shrink:0;
}
.go-deeper-sheet-title{
  margin:0;
  font-family:var(--font-body);
  font-size:1.05rem;
  font-weight:600;
  font-style:normal;
  line-height:1.3;
}
.go-deeper-sheet[data-variant="your-take"] .go-deeper-sheet-title{color:var(--color-accent-a)}
.go-deeper-sheet[data-variant="other-side"] .go-deeper-sheet-title{color:var(--color-accent-b)}
.go-deeper-sheet-body{
  flex:1;
  overflow-y:auto;
  padding:0 var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  -webkit-overflow-scrolling:touch;
}
.gd-tabbed{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  min-height:0;
}
.gd-tabs{
  display:flex;
  gap:.35rem;
  flex-shrink:0;
  position:sticky;
  top:0;
  z-index:1;
  padding-bottom:var(--space-1);
  background:var(--color-surface-2);
}
.gd-tab{
  flex:1;
  min-height:2.25rem;
  padding:.4rem .55rem;
  border:none;
  border-radius:var(--radius-full);
  background:var(--color-surface-offset);
  color:var(--color-text-muted);
  font:inherit;
  font-size:.78rem;
  font-weight:500;
  line-height:1.2;
  cursor:pointer;
  transition:background var(--transition),color var(--transition);
}
.go-deeper-sheet[data-variant="your-take"] .gd-tab--active{
  background:var(--color-accent-a);
  color:#fff;
}
.go-deeper-sheet[data-variant="other-side"] .gd-tab--active{
  background:var(--color-accent-b);
  color:#fff;
}
.gd-tab-panels{
  display:flex;
  flex-direction:column;
  min-height:0;
}
.gd-tab-panel{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  animation:gdTabEnter .2s ease;
}
.gd-tab-panel[hidden]{display:none}
@keyframes gdTabEnter{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.gd-tabbed .gd-list{gap:var(--space-3)}
.gd-tabbed .gd-list li{
  font-size:.94rem;
  line-height:1.65;
  padding-left:1.1rem;
}
.gd-tabbed .gd-list li::before{
  top:.62em;
  width:.4rem;
  height:.4rem;
}
.gd-tab-panel--story .gd-story{
  margin:0;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  font-size:.94rem;
  line-height:1.65;
}
.gd-story-source{
  margin:var(--space-2) 0 0;
  padding-top:var(--space-3);
  border-top:1px solid var(--color-border);
  font-size:.8rem;
  line-height:1.45;
}
.gd-story-source a{
  color:var(--color-accent-b);
  text-decoration:none;
}
.gd-story-source a:hover{text-decoration:underline}
.gd-chips{display:flex;flex-wrap:wrap;gap:.35rem}
.gd-chip{
  padding:.2rem .55rem;
  border-radius:var(--radius-full);
  font-size:.65rem;
  font-weight:500;
  letter-spacing:.03em;
}
.gd-chips--your-take .gd-chip{
  background:color-mix(in srgb,var(--color-accent-a) 12%,var(--color-surface-1));
  color:var(--color-accent-a);
}
.gd-chips--other-side .gd-chip{
  background:color-mix(in srgb,var(--color-accent-b) 12%,var(--color-surface-1));
  color:var(--color-accent-b);
}
.gd-list{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.gd-list li{
  position:relative;
  padding-left:1rem;
  font-size:.78rem;
  line-height:1.55;
  color:var(--color-text);
}
.gd-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:.35rem;
  height:.35rem;
  border-radius:50%;
}
.gd-list--your-take li::before{background:var(--color-accent-a)}
.gd-list--other-side li::before{background:var(--color-accent-b)}
.gd-section{display:flex;flex-direction:column;gap:var(--space-2)}
.gd-section-title{
  margin:0;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--color-text-muted);
}
.gd-section-title--your-take{color:var(--color-accent-a)}
.gd-section-title--other-side{color:var(--color-accent-b)}
.gd-prompt-list{display:flex;flex-direction:column;gap:var(--space-2)}
.gd-prompt-btn,
.gd-prompt-card{
  width:100%;
  padding:var(--space-3);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-surface-1);
  color:var(--color-text);
  font-size:.76rem;
  line-height:1.45;
  text-align:left;
}
.gd-prompt-btn{
  cursor:pointer;
  transition:background var(--transition),border-color var(--transition);
}
.gd-prompt-btn:hover{
  background:var(--color-surface-2);
  border-color:color-mix(in srgb,var(--color-primary) 25%,var(--color-border));
}
.gd-prompt-card{margin:0}
.gd-story{
  margin:0;
  padding:var(--space-3);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-surface-1);
  font-size:.76rem;
  line-height:1.6;
  color:var(--color-text);
}
.gd-section--story .gd-story{
  margin-top:var(--space-1);
}
.gd-sources{
  border-top:1px solid var(--color-border);
  padding-top:var(--space-3);
}
.gd-sources-summary{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  cursor:pointer;
  list-style:none;
  font-size:.78rem;
  font-weight:500;
  color:var(--color-text-muted);
  user-select:none;
}
.gd-sources-summary::-webkit-details-marker{display:none}
.gd-sources-body{
  padding-top:var(--space-3);
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
}
.gd-sources-label{
  margin:0;
  font-size:.65rem;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--color-text-faint);
}
.gd-sources-list{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.gd-sources-list li{
  font-size:.74rem;
  line-height:1.45;
  color:var(--color-text-muted);
}
.gd-sources-list a{color:var(--color-accent-b);text-decoration:none}
.gd-sources-list a:hover{text-decoration:underline}
body.go-deeper-open{overflow:hidden}

/* =============================================
   SECOND PHILOSOPHER QUOTE
   ============================================= */
.philosopher-quote-2{border-left-color:var(--color-accent-b);}

/* =============================================
   SPLIT BLOCK (always-visible, no accordion)
   ============================================= */
.split-block{width:100%;border-bottom:1px solid var(--color-border)}
.split-block-header{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4)}
.split-block-body{padding:0 var(--space-4) var(--space-4)}

/* Chosen-state followups */
.followup-action-row{padding:0;border-bottom:1px solid var(--color-border)}
.followup-action-btn{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  width:100%;
  padding:var(--space-3) var(--space-4);
  border:none;
  background:transparent;
  color:var(--color-text);
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.followup-action-btn:hover{background:var(--color-surface-2, var(--color-bg))}
.followup-action-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:2rem;
  height:2rem;
  border-radius:var(--radius-md);
  background:color-mix(in srgb, var(--color-accent, #8a6d4f) 10%, transparent);
  color:var(--color-accent, #8a6d4f);
}
.followup-action-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.followup-action-label{font-size:var(--text-sm);font-weight:600;color:var(--color-text)}
.followup-action-hint{
  font-size:var(--text-fit-size,var(--text-xs));
  color:var(--color-text-faint);
  line-height:1.4;
  white-space:nowrap;
  overflow:hidden;
  min-width:0;
}
.journal-modal-body{display:flex;flex-direction:column;gap:var(--space-3);padding:0 var(--space-4) var(--space-4)}
.journal-modal-prompt{margin:0;font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.5}
.followup-journal-input{
  width:100%;
  min-height:4.5rem;
  padding:var(--space-3);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-surface-2, var(--color-bg));
  color:var(--color-text);
  font:inherit;
  font-size:var(--text-sm);
  line-height:1.55;
  resize:vertical;
}
.followup-journal-input::placeholder{color:var(--color-text-faint)}
.followup-journal-input:focus{
  outline:none;
  border-color:var(--color-accent, #8a6d4f);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--color-accent, #8a6d4f) 18%, transparent);
}
.followup-journal-meta{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:var(--space-3);
  margin-top:var(--space-2);
}
.followup-private-note{
  margin:0;
  font-size:var(--text-xs);
  color:var(--color-text-faint);
  line-height:1.4;
}
.followup-saved-status{
  margin:0;
  font-size:var(--text-xs);
  color:var(--color-text-muted);
  white-space:nowrap;
}
.followup-forum-icon{display:inline-flex;align-items:center;color:var(--color-accent, #8a6d4f)}
.followup-forum-body{padding-top:var(--space-2)}
.followup-forum-teaser{display:flex;flex-direction:column;gap:var(--space-3)}
.followup-forum-item{
  padding:var(--space-3);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-surface-2, var(--color-bg));
}
.followup-forum-item-head{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  margin-bottom:var(--space-2);
}
.followup-forum-avatar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.5rem;
  height:1.5rem;
  border-radius:var(--radius-full);
  background:color-mix(in srgb, var(--color-primary) 12%, transparent);
  color:var(--color-primary);
  font-size:11px;
  font-weight:700;
  flex-shrink:0;
}
.followup-forum-avatar--emoji{
  width:1.75rem;
  height:1.75rem;
  font-size:14px;
  line-height:1;
  font-weight:400;
}
.followup-forum-author{
  flex:1;
  min-width:0;
  font-size:var(--text-xs);
  font-weight:600;
  color:var(--color-text);
}
.followup-forum-join{
  flex-shrink:0;
  margin-left:auto;
  padding:var(--space-1) var(--space-3);
  border:1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
  border-radius:var(--radius-full);
  background:var(--color-primary-highlight);
  color:var(--color-primary);
  font:inherit;
  font-size:var(--text-xs);
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  transition:background var(--transition),border-color var(--transition),color var(--transition);
}
.followup-forum-join:hover{
  background:color-mix(in srgb, var(--color-primary-highlight) 72%, var(--color-surface));
  border-color:var(--color-primary);
  color:var(--color-primary-hover);
}
.followup-forum-philosopher-badge{
  margin-left:auto;
  font-size:10px;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--color-accent, #8a6d4f);
}
.followup-forum-avatar--philosopher{
  background:color-mix(in srgb, var(--color-accent, #8a6d4f) 18%, transparent);
  color:var(--color-accent, #8a6d4f);
}
.followup-forum-item--philosopher{
  border-color:color-mix(in srgb, var(--color-accent, #8a6d4f) 22%, var(--color-border));
}
.followup-forum-text{
  margin:0 0 var(--space-2);
  font-size:var(--text-fit-size,var(--text-sm));
  line-height:1.5;
  color:var(--color-text-muted);
  overflow:hidden;
  min-width:0;
}
.followup-forum-actions{margin-top:0;padding-top:0;border-top:none}
.followup-forum-stat{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 6px;
  border-radius:var(--radius-sm);
  font-size:var(--text-xs);
  color:var(--color-text-faint);
}
.followup-forum-empty{
  margin:0 0 var(--space-3);
  font-size:var(--text-sm);
  color:var(--color-text-faint);
  line-height:1.5;
}
.followup-forum-loading{
  margin:0 0 var(--space-3);
  font-size:var(--text-sm);
  color:var(--color-text-faint);
}
.followup-forum-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:var(--space-2);
  padding:var(--space-2) var(--space-4);
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  background:var(--color-surface);
  color:var(--color-text);
  font:inherit;
  font-size:var(--text-sm);
  font-weight:500;
  cursor:pointer;
}
.followup-forum-cta:hover{background:var(--color-surface-2, var(--color-bg))}
.followup-dialogue.followup-dialogue{border-bottom:1px solid var(--color-border)}
.followup-dialogue .followup-dialogue-head-icon{display:inline-flex;align-items:center;color:var(--color-primary)}
.followup-dialogue-body{padding-top:var(--space-2)}
.followup-dialogue-cards{display:flex;flex-direction:column;gap:var(--space-3)}
.followup-dialogue-card{
  display:flex;
  gap:var(--space-3);
  align-items:center;
  padding:var(--space-3);
  border:1px solid color-mix(in srgb, var(--color-primary) 14%, var(--color-border));
  border-radius:var(--radius-md);
  background:color-mix(in srgb, var(--color-primary-highlight) 55%, var(--color-surface));
}
.followup-dialogue-avatar{
  flex-shrink:0;
  width:40px;
  height:40px;
}
.followup-dialogue-copy{flex:1;min-width:0}
.followup-dialogue-name{
  margin:0 0 2px;
  font-size:var(--text-xs);
  font-weight:600;
  color:var(--color-text);
}
.followup-dialogue-question{
  margin:0;
  font-size:var(--text-sm);
  line-height:1.45;
  color:var(--color-text-muted);
}
.followup-dialogue-reply{
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
  flex-shrink:0;
  align-self:center;
  padding:var(--space-2) var(--space-3);
  border:1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
  border-radius:var(--radius-full);
  background:var(--color-primary-highlight);
  color:var(--color-primary);
  font:inherit;
  font-size:var(--text-xs);
  font-weight:600;
  cursor:pointer;
  transition:background var(--transition),border-color var(--transition),color var(--transition);
}
.followup-dialogue-reply:hover{
  background:color-mix(in srgb, var(--color-primary-highlight) 72%, var(--color-surface));
  border-color:var(--color-primary);
  color:var(--color-primary-hover);
}
.followup-dialogue-reply-icon{display:inline-flex;align-items:center;color:currentColor}

/* =============================================
   ASK A FRIEND
   ============================================= */
.ch-intro{font-size:var(--text-xs);color:var(--color-text-faint);line-height:1.5}

/* Challenge modal specific */
.challenge-modal{gap:var(--space-4)}

/* Philosopher gateway (tab + after answering) */
.philosopher-gateway-modal{
  gap:var(--space-4);
  max-width:min(100%,560px);
  max-height:min(90svh,680px);
  overflow-y:auto;
}
.philosopher-gateway-header{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:0 0 0 40px;
}
.philosopher-gateway-header .btn-gateway-back{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:36px;
}
.philosopher-gateway-header .btn-gateway-back[hidden]{
  visibility:hidden;
  pointer-events:none;
  display:flex;
}
.philosopher-gateway-title{
  text-align:center;
  margin:0;
  font-size:var(--text-base);
}
.philosopher-gateway-intro{
  margin:0 0 var(--space-3);
  font-size:var(--text-sm);
  color:var(--color-text-muted);
  text-align:center;
  line-height:1.45;
}
.philosopher-gateway-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-3) var(--space-2);
}
.philosopher-gateway-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-2);
  padding:var(--space-1);
  border:none;
  background:transparent;
  cursor:pointer;
  color:var(--color-text);
  border-radius:var(--radius-md);
  transition:background var(--transition);
}
.philosopher-gateway-card:hover,
.philosopher-gateway-card:focus-visible{
  background:var(--color-primary-highlight);
  outline:none;
}
.philosopher-gateway-avatar{
  width:4.25rem;
  height:4.25rem;
  min-width:4.25rem;
  max-width:4.25rem;
  max-height:4.25rem;
  border-radius:50%;
  object-fit:cover;
  object-position:50% 12%;
  border:2px solid var(--color-border);
  background:var(--color-surface);
  display:block;
}
.philosopher-gateway-card:hover .philosopher-gateway-avatar,
.philosopher-gateway-card:focus-visible .philosopher-gateway-avatar{
  border-color:var(--color-primary);
}
.philosopher-gateway-name{
  font-size:var(--text-fit-size, var(--text-xs));
  font-weight:500;
  line-height:1.2;
  text-align:center;
  max-width:100%;
  width:100%;
  min-width:0;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
  white-space:nowrap;
}
.philosopher-gateway-vibe{
  font-size:calc(var(--text-xs) * .84);
  color:var(--color-text-muted);
  line-height:1.15;
  text-align:center;
  max-width:100%;
}
.philosopher-gateway-info{
  position:absolute;top:0;right:0;
  width:1.35rem;height:1.35rem;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--color-border);
  border-radius:50%;
  background:var(--color-surface);
  color:var(--color-text-muted);
  font-size:.7rem;font-weight:600;font-style:italic;
  cursor:pointer;padding:0;line-height:1;
  transition:background var(--transition),border-color var(--transition),color var(--transition);
}
.philosopher-gateway-info:hover,
.philosopher-gateway-info:focus-visible{
  background:var(--color-primary-highlight);
  border-color:var(--color-primary);
  color:var(--color-primary);
  outline:none;
}
.btn-header-icon{min-width:2.25rem;padding-inline:var(--space-2)}
.btn-header-icon .btn-switch-philosopher-portrait{margin:0}
.ai-header-more{position:relative}
.ai-header-more-panel{
  position:absolute;top:calc(100% + var(--space-1));right:0;z-index:20;
  min-width:9.5rem;padding:var(--space-1);
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-md);box-shadow:var(--shadow-md);
  display:flex;flex-direction:column;gap:var(--space-1);
}
.ai-header-more-panel[hidden]{display:none}
.ai-header-more-action{
  display:flex;align-items:center;gap:var(--space-2);
  width:100%;padding:var(--space-2) var(--space-3);
  border:none;border-radius:var(--radius-sm);
  background:transparent;color:var(--color-text);
  font-size:var(--text-xs);cursor:pointer;text-align:left;
}
.ai-header-more-action:hover,
.ai-header-more-action:focus-visible{
  background:var(--color-primary-highlight);outline:none;
}
.btn-ai-header-more{font-size:1.1rem;line-height:1;letter-spacing:.05em}
.philosopher-gateway-actions{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:var(--space-3);
}
.philosopher-gateway-selected{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-2);
  padding:var(--space-2) 0;
}
.philosopher-gateway-hero-portrait{
  width:5rem;
  height:5rem;
  min-width:5rem;
  max-width:5rem;
  max-height:5rem;
  border-radius:50%;
  object-fit:cover;
  object-position:50% 12%;
  border:2px solid var(--color-border);
  background:var(--color-surface);
}
.philosopher-gateway-selected-name{
  margin:0;
  font-family:var(--font-display);
  font-size:var(--text-lg);
  font-style:italic;
  text-align:center;
}
.philosopher-gateway-selected-vibe{
  margin:calc(var(--space-1) * -1) 0 0;
  color:var(--color-text-muted);
  font-size:var(--text-sm);
  line-height:1.35;
  text-align:center;
}
.philosopher-gateway-action-btn{
  width:100%;
  justify-content:center;
}
@media (max-width:360px){
  .philosopher-gateway-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:var(--space-2) var(--space-1);
  }
  .philosopher-gateway-avatar{
    width:3.5rem;
    height:3.5rem;
    min-width:3.5rem;
    max-width:3.5rem;
    max-height:3.5rem;
  }
}

.ch-preview{background:var(--color-surface-offset);border-radius:var(--radius-md);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}
.ch-preview-text{font-family:var(--font-display);font-size:var(--text-sm);font-style:italic;line-height:1.55;color:var(--color-text)}
.ch-preview-opts{display:flex;flex-direction:column;gap:var(--space-1)}
.ch-opt{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:500}
.ch-opt-a{color:var(--color-accent-a)}
.ch-opt-b{color:var(--color-accent-b)}

/* =============================================
   AI ASSISTANT
   ============================================= */
.modal.ai-modal{
  max-width:520px;
  width:100%;
  max-height:var(--app-chat-modal-max-height);
  gap:var(--space-2);
  overflow:hidden;
  --ai-chat-scale:1;
  padding-bottom:calc(var(--space-6) / 4);
}
.app-tab-panel--chat .modal.ai-modal.ai-chat-shell{
  margin:0 auto;
  flex:1;
  min-width:0;
  max-width:100%;
  min-height:0;
  /* Fill the tab panel; main padding already clears the fixed tab bar (viewport max-height was double-counting). */
  max-height:none;
  display:flex;
  flex-direction:column;
  /* Fixed tab bar sits over main padding — keep compose + two starters above it */
  padding-bottom:var(--app-chat-bottom-clearance);
}
.app-tab-panel--chat .ai-chat-scroll{
  flex:1;
  min-height:min(52dvh,28rem);
}
.app-tab-panel--chat .ai-thread{
  min-height:min(48dvh,26rem);
}
.app-tab-panel--chat .ai-starters{
  flex-direction:row;
  flex-wrap:wrap;
  align-items:flex-start;
  align-content:flex-start;
  gap:var(--space-1);
  overflow:visible;
}
.app-tab-panel--chat .ai-starters::-webkit-scrollbar{display:none}
.app-tab-panel--chat .ai-starter-btn{
  flex:1 1 calc(50% - var(--space-1) / 2);
  min-width:0;
  max-width:100%;
}
.modal.ai-modal[data-ai-font="sm"]{ --ai-chat-scale:0.8; }
.modal.ai-modal[data-ai-font="lg"]{ --ai-chat-scale:1.25; }

.ai-philosopher-picker{
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:var(--space-1);
}
.ai-philosopher-label{
  font-size:calc(var(--text-xs) * 0.98 * var(--ai-chat-scale));
  font-weight:600;
  color:var(--color-text-muted);
}
.ai-philosopher-label:empty{
  display:none;
}
.ai-philosopher-chips{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-1);
}
.ai-philosopher-chip{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.3rem .55rem .3rem .35rem;
  font-size:calc(var(--text-xs) * 1.02 * var(--ai-chat-scale));
  border:1.5px solid var(--color-border);
  border-radius:999px;
  background:var(--color-surface-2);
  color:var(--color-text);
  cursor:pointer;
  transition:color var(--transition),border-color var(--transition),background var(--transition);
}
.ai-philosopher-chip-img-frame{
  display:inline-flex;
  width:calc(1.45rem * var(--ai-chat-scale));
  height:calc(1.45rem * var(--ai-chat-scale));
  border-radius:50%;
  overflow:hidden;
  flex-shrink:0;
  border:1px solid var(--color-border);
  background:var(--color-surface);
  align-items:center;
  justify-content:center;
}
.ai-philosopher-chip-img-frame .ai-philosopher-chip-img{
  width:100%;
  height:100%;
  border:none;
  border-radius:0;
  object-fit:cover;
  object-position:50% 12%;
  transform:scale(1.58);
  transform-origin:50% 28%;
}
.ai-philosopher-chip-img{
  width:calc(1.45rem * var(--ai-chat-scale));
  height:calc(1.45rem * var(--ai-chat-scale));
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
  border:1px solid var(--color-border);
  background:var(--color-surface);
}
.ai-philosopher-chip-label{
  line-height:1.2;
}
.ai-philosopher-chip:hover{
  border-color:var(--color-primary);
  color:var(--color-primary);
}
.ai-philosopher-chip.is-active{
  border-color:var(--color-primary);
  background:var(--color-primary-highlight);
  color:var(--color-primary);
}
.ai-philosopher-chip.is-active .ai-philosopher-chip-img{
  border-color:var(--color-primary);
}
.ai-philosopher-chip.is-active .ai-philosopher-chip-img-frame{
  border-color:var(--color-primary);
}

.ai-chat-layout{
  flex:1;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
}
.ai-chat-scroll{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  overflow:hidden;
}
.ai-chat-footer{
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  padding-bottom:0;
}
.modal.ai-modal .ai-chat-layout{
  gap:0;
}
.modal.ai-modal .ai-chat-scroll{
  margin-bottom:var(--space-4);
}
.modal.ai-modal .ai-chat-footer{
  margin-bottom:calc(var(--space-4) / 3);
}
.modal.ai-modal .ai-starters{
  gap:calc(var(--space-1) / 3);
}
.ai-starters-row{
  display:flex;
  align-items:center;
  gap:var(--space-2);
}
.ai-starters-row .ai-starters{
  flex:1 1 auto;
  min-width:0;
  margin-top:0;
  margin-bottom:0;
  flex-wrap:wrap;
  align-content:flex-start;
  overflow:visible;
}
.ai-starters-row .ai-starters::-webkit-scrollbar{display:none}
.btn-ai-starters-refresh{
  flex-shrink:0;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1.5px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-surface-2);
  color:var(--color-text-muted);
  cursor:pointer;
  transition:color var(--transition),border-color var(--transition),background var(--transition);
}
.btn-ai-starters-refresh:hover{
  color:var(--color-primary);
  border-color:var(--color-primary);
  background:var(--color-primary-highlight);
}

.ai-modal-header-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:var(--space-1);
  margin-left:auto;
  max-width:100%;
}
.btn-ai-clear-chat{
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1.5px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-surface-2);
  color:var(--color-text-muted);
  cursor:pointer;
  transition:color var(--transition),border-color var(--transition),background var(--transition);
}
.btn-ai-clear-chat:hover{
  color:var(--color-primary);
  border-color:var(--color-primary);
  background:var(--color-primary-highlight);
}
.btn-ai-chat-font{
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:flex-end;
  justify-content:center;
  gap:0;
  padding:0 0 6px;
  border:1.5px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-surface-2);
  color:var(--color-text-muted);
  cursor:pointer;
  line-height:1;
  transition:color var(--transition),border-color var(--transition),background var(--transition);
}
.btn-ai-chat-font:hover{
  color:var(--color-primary);
  border-color:var(--color-primary);
  background:var(--color-primary-highlight);
}
.btn-ai-chat-font-lg{
  font-family:var(--font-display);
  font-size:calc(0.95rem * var(--ai-chat-scale));
  font-weight:600;
}
.btn-ai-chat-font-sm{
  font-family:var(--font-display);
  font-size:calc(0.58rem * var(--ai-chat-scale));
  opacity:.85;
  margin-bottom:2px;
}

.ai-modal .modal-title,
.ai-modal .ai-modal-title{
  font-size:calc(var(--text-lg) * 0.82 * var(--ai-chat-scale));
}
.ai-modal-header{
  justify-content:flex-start;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--space-2);
  row-gap:var(--space-2);
}
.ai-modal-chat-icon{
  flex-shrink:0;
  width:40px;
  height:40px;
  border-radius:10px;
  border:1.5px solid var(--color-border);
  background:var(--color-surface-2);
  padding:6px;
  box-sizing:border-box;
  color:var(--color-text);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  line-height:0;
}
.ai-modal-chat-icon .dd-icon--raster,
.ai-modal-chat-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.ai-modal-title{
  flex:1;
  min-width:0;
  margin:0;
}
.overflow-plato-icon{
  flex-shrink:0;
  display:block;
  width:18px;
  height:18px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid var(--color-border);
  background:var(--color-surface-2);
}
.ai-modal-header-actions .btn-plato-reader{
  height:36px;
  max-width:min(42vw, 9.5rem);
}
.btn-switch-philosopher-portrait{
  display:inline-flex;
  flex-shrink:0;
  align-items:center;
  justify-content:center;
}
.btn-switch-philosopher-portrait-frame{
  display:inline-flex;
  width:calc(1.35rem * var(--ai-chat-scale));
  height:calc(1.35rem * var(--ai-chat-scale));
  border-radius:50%;
  overflow:hidden;
  flex-shrink:0;
  border:1px solid var(--color-border);
  background:var(--color-surface);
  align-items:center;
  justify-content:center;
}
.btn-switch-philosopher-portrait-frame .btn-switch-philosopher-portrait-img{
  width:100%;
  height:100%;
  border:none;
  border-radius:0;
  object-fit:cover;
  object-position:50% 12%;
  transform:scale(1.58);
  transform-origin:50% 28%;
}
.btn-switch-philosopher-portrait-img{
  width:calc(1.35rem * var(--ai-chat-scale));
  height:calc(1.35rem * var(--ai-chat-scale));
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
  border:1px solid var(--color-border);
  background:var(--color-surface);
}
.ai-modal-header-actions .btn-plato-reader #label-switch-philosopher,
.ai-modal-header-actions .btn-plato-reader #label-plato-reader-btn{
  overflow:hidden;
  min-width:0;
  white-space:nowrap;
  font-size:var(--text-fit-size,1em);
}
.btn-plato-reader{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.28rem .55rem .28rem .45rem;
  font-size:calc(var(--text-xs) * 0.92 * var(--ai-chat-scale));
  font-weight:600;
  border:1.5px solid var(--color-border);
  border-radius:999px;
  background:var(--color-surface-2);
  color:var(--color-primary);
  cursor:pointer;
  transition:color var(--transition),border-color var(--transition),background var(--transition);
}
.btn-plato-reader:hover{
  border-color:var(--color-accent-b);
  background:var(--color-surface);
}
.btn-plato-reader svg{
  flex-shrink:0;
  opacity:.9;
}

/* Plato profile reader overlay */
.plato-reader-overlay{
  align-items:center;
  justify-content:center;
  padding:var(--space-3);
}
.plato-reader-sheet{
  --plato-reader-font-scale:1;
  position:relative;
  max-width:520px;
  width:100%;
  max-height:min(92dvh, calc(100dvh - var(--space-8)));
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:var(--space-1);
  overflow:hidden;
  padding:var(--space-4);
  padding-bottom:var(--space-3);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
}
.plato-reader-sheet[data-ai-font="sm"]{ --plato-reader-font-scale:0.82; --ai-chat-scale:0.8; }
.plato-reader-sheet[data-ai-font="md"]{ --plato-reader-font-scale:1; --ai-chat-scale:1; }
.plato-reader-sheet[data-ai-font="lg"]{ --plato-reader-font-scale:1.14; --ai-chat-scale:1.25; }
.plato-reader-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-3);
  flex-shrink:0;
}
.plato-reader-kicker{
  margin:0;
  font-size:calc(var(--text-xs) * 0.88 * var(--plato-reader-font-scale, 1));
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--color-text-muted);
}
.plato-reader-actions{
  display:flex;
  align-items:center;
  gap:var(--space-1);
  flex-shrink:0;
}
.plato-reader-nav{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:4px;
  flex-shrink:0;
}
.plato-reader-nav-row2{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:4px;
}
.plato-reader-nav-btn{
  font:inherit;
  font-size:calc(0.75rem * var(--plato-reader-font-scale, 1));
  line-height:1.25;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:5px;
  min-height:0;
  padding:5px 7px;
  border-radius:var(--radius-md);
  border:1.5px solid var(--color-border);
  background:var(--color-surface-2);
  color:var(--color-text-muted);
  cursor:pointer;
  transition:border-color var(--transition),background var(--transition),color var(--transition),box-shadow var(--transition);
}
.plato-reader-nav-btn:hover{
  border-color:var(--color-primary);
  color:var(--color-primary);
}
.plato-reader-nav-btn.is-active{
  border-color:var(--color-accent-b);
  background:color-mix(in srgb, var(--color-accent-b) 12%, var(--color-surface));
  color:var(--color-text);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--color-accent-b) 35%, transparent);
}
.plato-reader-nav-ic{
  display:flex;
  flex-shrink:0;
  width:1em;
  height:1em;
  align-items:center;
  justify-content:center;
  border-radius:0.3em;
  background:var(--color-bg);
  color:var(--color-primary);
}
.plato-reader-nav-ic svg{
  width:0.58em;
  height:0.58em;
}
.plato-reader-nav-label{
  font-size:1em;
  line-height:inherit;
  font-weight:600;
  text-align:left;
  flex:1;
  min-width:0;
}
.plato-reader-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding-right:var(--space-1);
  margin-right:-var(--space-1);
  font-size:calc(var(--text-sm) * var(--plato-reader-font-scale, 1));
}
.plato-reader-block{
  position:relative;
  margin-bottom:var(--space-2);
  padding-top:0;
}
.plato-reader-block::before{
  content:"";
  position:absolute;
  left:0;
  top:.35rem;
  width:3px;
  height:1.1rem;
  border-radius:2px;
  background:var(--color-accent-b);
  opacity:.65;
}
.plato-reader-block:nth-of-type(3n+2)::before{ background:var(--color-primary); }
.plato-reader-block:nth-of-type(3n)::before{ background:var(--color-accent-a); }
.plato-reader-block-heading{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:.3rem;
  padding-left:var(--space-4);
  margin-bottom:var(--space-1);
  font-size:calc(var(--text-base) * 1.05 * var(--plato-reader-font-scale, 1));
}
.plato-reader-block-title{
  margin:0;
  padding:0;
  flex:0 1 auto;
  max-width:100%;
  font-family:var(--font-display);
  font-size:1em;
  font-weight:400;
  line-height:1.25;
  color:var(--color-text);
}
.plato-reader-block-title-icon{
  flex-shrink:0;
  display:inline-flex;
  width:1em;
  height:1em;
  align-items:center;
  justify-content:center;
  border-radius:0.22em;
  border:1px solid var(--color-border);
  background:var(--color-bg);
  color:var(--color-primary);
  font-size:1em;
}
.plato-reader-block-title-icon svg{
  width:0.58em;
  height:0.58em;
}
.plato-reader-block-body{
  padding-left:var(--space-4);
  font-size:calc(1em * var(--plato-reader-font-scale, 1));
  line-height:1.68;
  color:var(--color-text);
}
.plato-reader-block-body p{
  margin:0 0 var(--space-2);
}
.plato-reader-block-body > p:last-child{
  margin-bottom:0;
}
.plato-reader-block-body strong{
  color:var(--color-primary);
  font-weight:700;
}
.plato-reader-block-body a{
  color:var(--color-primary);
  text-decoration:underline;
  text-underline-offset:.12em;
}
.plato-reader-intro-copy--inline-photo{
  min-width:0;
}
.plato-reader-inline-photo{
  float:right;
  margin:0 0 var(--space-2) var(--space-3);
  max-width:42%;
}
.plato-reader-inline-photo img{
  display:block;
  width:clamp(88px, 26vw, 132px);
  height:auto;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:12px;
  border:1px solid var(--color-border);
  background:var(--color-bg);
}
.plato-reader-intro-copy--inline-photo::after{
  content:"";
  display:table;
  clear:both;
}
.plato-reader-ul{
  margin:0;
  padding-left:1.1rem;
}
.plato-reader-ul li{
  margin-bottom:var(--space-2);
}
.plato-reader-scroll .plato-reader-block:last-child{
  margin-bottom:var(--space-1);
}

.ai-starters{
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  gap:var(--space-1);
}
.ai-starter-btn{
  font:inherit;
  font-size:var(--text-fit-size, calc(var(--text-xs) * 0.68 * var(--ai-chat-scale)));
  padding:calc(.28rem * var(--ai-chat-scale)) calc(.75rem * var(--ai-chat-scale));
  border-radius:var(--radius-lg);
  border:1.5px solid var(--color-border);
  background:var(--color-surface-2);
  color:var(--color-text);
  cursor:pointer;
  text-align:left;
  line-height:1.3;
  flex:1 1 calc(50% - var(--space-1) / 2);
  min-width:0;
  max-width:100%;
  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;
  transition:color var(--transition),border-color var(--transition),background var(--transition);
}
.ai-starter-btn:hover{
  color:var(--color-primary);
  border-color:var(--color-primary);
  background:var(--color-primary-highlight);
}
.ai-thinking{
  flex-shrink:0;
  align-self:stretch;
  margin:0;
  padding:0 var(--space-3) var(--space-3);
  background:transparent;
}
.ai-thinking-inner{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:var(--space-2);
  max-width:100%;
}
.ai-thinking-avatar{
  flex-shrink:0;
  align-self:flex-start;
}
.ai-thinking-bubble{
  flex:1;
  min-width:0;
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-lg);
  border:1px solid var(--color-border);
  background:var(--color-surface);
  box-shadow:var(--shadow-sm);
  animation:ai-thinking-pulse 1.35s ease-in-out infinite;
}
.ai-thinking-text{
  font-size:calc(var(--text-xs) * 1.05 * var(--ai-chat-scale));
  font-style:italic;
  color:var(--color-text-muted);
}
@keyframes ai-thinking-pulse{
  0%,100%{opacity:1}
  50%{opacity:.78}
}
.ai-thread{
  flex:1;
  min-height:0;
  max-height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  background:var(--color-surface-2);
  font-size:calc(1rem * var(--ai-chat-scale));
}
.ai-thread-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
.ai-thread-messages{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  padding:var(--space-3);
}
.ai-msg-row--assistant{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:var(--space-2);
  max-width:100%;
  align-self:flex-start;
}
.ai-msg-avatar{
  width:calc(2.35rem * var(--ai-chat-scale));
  height:calc(2.35rem * var(--ai-chat-scale));
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
  align-self:flex-start;
  overflow:hidden;
  border:1px solid var(--color-border);
  background:var(--color-surface);
}
.ai-msg-avatar--face-zoom{
  object-position:50% 12%;
  transform:scale(1.42);
  transform-origin:50% 26%;
}
.ai-msg{
  max-width:92%;
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-lg);
  border:1px solid var(--color-border);
  background:var(--color-surface);
  box-shadow:var(--shadow-sm);
  font-size:.88em;
  line-height:1.5;
  white-space:normal;
}
.philosopher-msg-text{white-space:pre-wrap}
.philosopher-source-badges{
  display:inline;
  white-space:normal;
  vertical-align:baseline;
}
.philo-cite-badge-wrap{
  position:relative;
  display:inline;
  vertical-align:baseline;
}
.philo-cite-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  vertical-align:middle;
  margin:0 .12rem 0 .2rem;
  padding:.08rem .42rem;
  min-height:1.15rem;
  border-radius:.28rem;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(0,0,0,.055);
  color:var(--color-text-muted);
  font:inherit;
  font-size:.68em;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.01em;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.philo-cite-badge:hover,
.philo-cite-badge:focus-visible{
  background:rgba(0,0,0,.1);
  border-color:rgba(0,0,0,.14);
  color:var(--color-text);
}
.philo-cite-badge--static{
  cursor:default;
}
.philo-cite-badge--static:hover,
.philo-cite-badge--static:focus-visible{
  background:rgba(0,0,0,.055);
  border-color:rgba(0,0,0,.08);
  color:var(--color-text-muted);
}
.philo-cite-badge--unverified{
  opacity:.82;
  border-style:dashed;
}
.philo-ai-guide-wrap{
  position:relative;
  display:inline;
  vertical-align:baseline;
}
.philo-ai-guide-badge{
  display:inline-flex;
  align-items:center;
  vertical-align:middle;
  margin:0 .1rem;
  padding:.06rem .38rem;
  min-height:1.1rem;
  border-radius:.28rem;
  border:1px dashed rgba(0,0,0,.14);
  background:transparent;
  color:var(--color-text-muted);
  font:inherit;
  font-size:.68em;
  font-weight:600;
  line-height:1.2;
  cursor:pointer;
  white-space:nowrap;
}
.philo-ai-guide-badge:hover,
.philo-ai-guide-badge:focus-visible{
  border-color:rgba(0,0,0,.22);
  color:var(--color-text);
  outline:none;
}
.philo-ai-guide-popover{
  position:absolute;
  z-index:40;
  left:0;
  bottom:calc(100% + .35rem);
  min-width:12rem;
  max-width:min(18rem, 80vw);
  padding:.55rem .65rem;
  border-radius:var(--radius-sm, .35rem);
  border:1px solid var(--color-border, rgba(0,0,0,.1));
  background:var(--color-surface, #fff);
  color:var(--color-text-muted);
  font-size:var(--text-xs);
  font-weight:400;
  line-height:1.45;
  box-shadow:0 4px 16px rgba(0,0,0,.1);
  white-space:normal;
}
.forum-comment-text .philosopher-msg-text{display:inline;white-space:pre-wrap}
.forum-comment-text .philosopher-source-badges{display:inline}
.ai-msg--user{
  margin-left:auto;
  background:var(--color-primary-highlight);
  border-color:var(--color-border);
}
.ai-msg-row--assistant .ai-msg--assistant{
  margin-right:0;
  margin-left:0;
  flex:0 1 auto;
  max-width:min(92%,calc(100% - 3rem));
}
.ai-msg--welcome{
  color:var(--color-text-muted);
}
.ai-compose{display:flex;gap:var(--space-2);align-items:center}
.ai-input{
  flex:1;
  min-width:0;
  padding:var(--space-2) var(--space-3);
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  background:var(--color-surface-2);
  color:var(--color-text);
  font:inherit;
  font-size:.88em;
}
.ai-input:focus{outline:none;border-color:var(--color-primary)}
.ai-send-btn{flex-shrink:0;padding-left:var(--space-4);padding-right:var(--space-4);font-size:.88em}
.ai-modal .share-hint{
  font-size:calc(var(--text-xs) * 0.92 * var(--ai-chat-scale));
  flex-shrink:0;
}

.ch-stake-section{display:flex;flex-direction:column;gap:var(--space-2)}
.ch-stake-label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);font-weight:500}
.ch-stake-row{display:flex;align-items:center;gap:var(--space-2)}
.ch-stake-input{flex:1;padding:var(--space-2) var(--space-3);border:1.5px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);color:var(--color-text);font:inherit;font-size:var(--text-sm);transition:border-color var(--transition)}
.ch-stake-input:focus{outline:none;border-color:var(--color-primary)}
.ch-stake-hint{font-size:var(--text-xs);color:var(--color-text-faint);line-height:1.5}
.btn-new-stake{width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-muted);transition:color var(--transition),border-color var(--transition),background var(--transition)}
.btn-new-stake:hover{color:var(--color-primary);border-color:var(--color-primary);background:var(--color-primary-highlight)}
.ch-actions{display:flex;flex-direction:column;gap:var(--space-2)}

/* =============================================
   RESPONSIVE
   ============================================= */
@media(max-width:480px){
  .main{padding:var(--space-8) var(--space-4) var(--space-12);gap:var(--space-6)}
  .dilemma-body{padding:var(--space-4) var(--space-4) var(--space-4)}
  .stats{gap:var(--space-4)}
  .modal-overlay{padding:var(--space-4);align-items:flex-end}
  .modal{border-radius:var(--radius-xl) var(--radius-xl) var(--radius-lg) var(--radius-lg)}

  .os-opt-label{font-size:.72rem}
  .gf-tag{font-size:var(--text-xs);padding:.2rem .5rem}
}