/* =========================================================================
   Companion Client Kit — desktop console.
   Shares the Sin & Sarah design system: two shipped themes, toggled live.
   Default: Obsidian (dark). White-label: a buyer reskins by editing the
   4 --accent* tokens per theme, or by adding a new [data-theme="..."] block.
   ========================================================================= */

/* ---- OBSIDIAN (dark, default) — brand violet + gold on black, no pink ---- */
:root,
html[data-theme="obsidian"] {
  color-scheme: dark;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Figtree", system-ui, -apple-system, sans-serif;

  --accent:#9a78ff; --accent-2:#c4b5fd; --accent-deep:#7c3aed;
  --gold:#d4a857;
  --bg:#050508; --bg-glow-1:rgba(124,58,237,.22); --bg-glow-2:rgba(63,185,201,.07);
  --card:rgba(23,20,42,.70); --card-solid:#14102a;
  --text:#f8f8f8; --muted:rgba(248,248,248,.66); --faint:rgba(248,248,248,.40);
  --line:rgba(196,181,253,.10); --line-2:rgba(196,181,253,.22);
  --ok:#5fd0a3; --rose:#3fb9c9;
  --user-bubble:linear-gradient(160deg,#2d2153,#14102a);
  --user-text:#f8f8f8; --user-line:var(--line-2);
  --av-text:#0a0712; --send-text:#0a0712;
  --shadow:0 24px 50px -28px rgba(0,0,0,.9);
  --blur:16px;
}

/* ---- STONE (light, classic) — warm greige + espresso + bronze hairline ---- */
html[data-theme="stone"] {
  color-scheme: light;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Figtree", system-ui, -apple-system, sans-serif;

  --accent:#8a7350; --accent-2:#a68f66; --accent-deep:#6a5638;
  --gold:#8a7350;
  --bg:#ece8e1; --bg-glow-1:rgba(138,115,80,.10); --bg-glow-2:rgba(40,34,26,.04);
  --card:rgba(255,255,255,.72); --card-solid:#ffffff;
  --text:#211f1c; --muted:#6f685e; --faint:#8b857b;
  --line:rgba(40,34,26,.10); --line-2:rgba(40,34,26,.16);
  --ok:#5f8a73; --rose:#bf6a52;
  --user-bubble:linear-gradient(160deg,#2c2722,#211f1c);
  --user-text:#f4efe7; --user-line:transparent;
  --av-text:#f4efe7; --send-text:#f4efe7;
  --shadow:24px 28px 56px -36px rgba(40,34,26,.28);
  --blur:18px;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { min-height:100%; }

body {
  font-family:var(--font-body);
  color:var(--text);
  font-size:15px;
  line-height:1.55;
  overflow-x:hidden;
  background:
    radial-gradient(120% 70% at 90% -10%, var(--bg-glow-1) 0%, transparent 56%),
    radial-gradient(130% 80% at -12% 112%, var(--bg-glow-2) 0%, transparent 54%),
    var(--bg);
  transition:background .5s ease, color .4s ease;
}
/* fine fractal-noise grain for a premium, non-flat surface */
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
button, input, select, textarea { font:inherit; color:inherit; }
::selection { background:color-mix(in srgb, var(--accent) 32%, transparent); }

/* thin, on-system scrollbars */
.chat-messages, .want-rail, .packet-box, .mem-results { scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; }
.chat-messages::-webkit-scrollbar, .want-rail::-webkit-scrollbar,
.packet-box::-webkit-scrollbar, .mem-results::-webkit-scrollbar { width:8px; }
.chat-messages::-webkit-scrollbar-thumb, .want-rail::-webkit-scrollbar-thumb,
.packet-box::-webkit-scrollbar-thumb, .mem-results::-webkit-scrollbar-thumb {
  background:var(--line-2); border-radius:99px; border:2px solid transparent; background-clip:content-box;
}

/* ----------- SHELL ----------- */
.app-shell {
  position:relative; z-index:1;
  max-width:1280px; margin:0 auto;
  padding:clamp(22px,4vw,42px) clamp(18px,4vw,46px) 72px;
}

/* ----------- HEADER ----------- */
.topbar {
  display:flex; align-items:flex-end; justify-content:space-between;
  flex-wrap:wrap; gap:18px 24px;
  padding-bottom:20px; margin-bottom:26px;
  border-bottom:1px solid var(--line);
}
.brand-lockup { min-width:0; }
.eyebrow {
  display:block; font-size:11px; font-weight:700;
  letter-spacing:.34em; text-transform:uppercase; color:var(--accent);
}
.brand-name {
  margin-top:5px;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(34px,4.4vw,46px); line-height:.95; letter-spacing:.005em;
  color:var(--text);
}

.head-actions { display:flex; align-items:center; flex-wrap:wrap; gap:16px; }
.model-pick { display:flex; align-items:center; gap:10px; min-width:0; }
.model-pick-label {
  font-size:10.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--faint);
}
#modelSelect {
  appearance:none; -webkit-appearance:none;
  background:var(--card); color:var(--text);
  border:1px solid var(--line-2); border-radius:12px;
  padding:10px 36px 10px 14px; font-size:13.5px; cursor:pointer;
  max-width:300px; min-height:42px;
  -webkit-backdrop-filter:blur(var(--blur)); backdrop-filter:blur(var(--blur));
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23a193b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px;
  transition:border-color .2s;
}
#modelSelect:hover { border-color:var(--accent); }
#modelSelect:focus { outline:none; border-color:var(--accent); }
#modelSelect option { background:var(--card-solid); color:var(--text); }

.status-indicator {
  display:flex; align-items:center; gap:9px;
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.status-dot {
  width:8px; height:8px; border-radius:50%; flex:none; background:var(--ok);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 16%,transparent), 0 0 12px color-mix(in srgb,var(--ok) 42%,transparent);
  transition:background .3s, box-shadow .3s;
}
.status-dot.offline {
  background:var(--rose);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--rose) 16%,transparent);
}

.icon-button {
  width:42px; height:42px; flex:none; border-radius:13px;
  border:1px solid var(--line-2); background:var(--card);
  -webkit-backdrop-filter:blur(var(--blur)); backdrop-filter:blur(var(--blur));
  display:grid; place-items:center; color:var(--muted); cursor:pointer;
  transition:color .2s, border-color .2s, transform .1s;
}
.icon-button:hover { color:var(--text); border-color:var(--accent); }
.icon-button:active { transform:scale(.94); }
.icon-button svg { width:19px; height:19px; fill:currentColor; }
.theme-toggle .sun { display:none; }
html[data-theme="stone"] .theme-toggle .moon { display:none; }
html[data-theme="stone"] .theme-toggle .sun { display:block; }

/* ----------- TABBAR (glass segmented control) ----------- */
.tabbar {
  display:inline-flex; gap:6px; padding:6px; margin-bottom:28px;
  border:1px solid var(--line); border-radius:16px; background:var(--card);
  -webkit-backdrop-filter:blur(var(--blur)); backdrop-filter:blur(var(--blur));
  box-shadow:var(--shadow);
}
.tab-button {
  border:1px solid transparent; background:transparent; border-radius:11px;
  padding:9px 22px; cursor:pointer; color:var(--muted);
  font-family:var(--font-body); font-weight:600; font-size:13.5px; letter-spacing:.02em;
  transition:color .2s, border-color .2s, background .2s;
}
.tab-button:hover { color:var(--text); }
.tab-button.active {
  color:var(--text);
  border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 18%,transparent),color-mix(in srgb,var(--accent) 6%,transparent));
}

.tab-panel { display:none; animation:fade .35s ease both; }
.tab-panel.active { display:block; }
@keyframes fade { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

/* ----------- CARDS ----------- */
.card {
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:24px; box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(var(--blur)); backdrop-filter:blur(var(--blur));
}
.card-wide { grid-column:1 / -1; }
.card-title {
  font-family:var(--font-display); font-weight:400; font-size:23px; letter-spacing:.01em; color:var(--text);
}
.card-row {
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px; margin-bottom:6px;
}
.muted { color:var(--muted); }
.muted.small, .small { font-size:13px; line-height:1.5; }
.card-title + .muted, .card-title + .small { margin-top:8px; }

/* ----------- CHAT ----------- */
.chat-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(320px,28vw,384px);
  gap:22px;
  height:clamp(480px,70vh,780px);
}
.chat-column {
  display:flex; flex-direction:column; gap:14px; min-height:0;
  background:var(--card); border:1px solid var(--line); border-radius:22px;
  padding:20px; box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(var(--blur)); backdrop-filter:blur(var(--blur));
}
.chat-messages {
  flex:1; min-height:0; overflow-y:auto;
  display:flex; flex-direction:column; gap:14px; padding:6px 8px 4px;
}
.message {
  max-width:84%; padding:13px 17px; border-radius:18px; line-height:1.5;
  font-size:14.5px; overflow-wrap:anywhere; animation:rise .35s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes rise { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
.message.ai {
  align-self:flex-start;
  background:var(--card-solid); border:1px solid var(--line);
  border-top-left-radius:6px; box-shadow:var(--shadow);
}
.message.ai em { color:var(--accent); font-style:italic; }
.message.user {
  align-self:flex-end;
  background:var(--user-bubble); color:var(--user-text);
  border:1px solid var(--user-line); border-top-right-radius:6px;
}
.message.thinking { opacity:.55; font-style:italic; }
.message .err, .err { color:var(--rose); }
.message code, code {
  background:color-mix(in srgb,var(--text) 6%,transparent);
  border:1px solid var(--line-2); border-radius:6px; padding:1px 6px;
  color:var(--accent); font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:.86em;
}

.voice-status {
  font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); padding:2px 4px;
}
.setup-banner, .model-banner {
  font-size:12.5px; line-height:1.45; color:var(--muted); padding:0 4px;
}
.setup-banner:empty, .model-banner:empty { display:none; }
.setup-banner.warn, .model-banner.warn {
  color:var(--text);
  border-left:2px solid var(--accent); padding:6px 0 6px 12px;
}

.chat-input-row { display:flex; gap:10px; align-items:center; }
.voice-btn, .mute-btn {
  width:44px; height:44px; flex:none; border-radius:50%;
  background:color-mix(in srgb,var(--text) 5%,transparent); border:1px solid var(--line-2);
  color:var(--muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:1.05em;
  transition:color .2s, border-color .2s, background .2s, transform .1s;
}
.voice-btn:hover, .mute-btn:hover { color:var(--accent-2); border-color:var(--accent); }
.voice-btn:active, .mute-btn:active { transform:scale(.94); }
.voice-btn.active {
  color:var(--av-text); border-color:transparent;
  background:linear-gradient(150deg,var(--accent-2),var(--accent-deep));
}
.mute-btn.on { color:var(--accent-2); border-color:var(--accent); }
.chat-input {
  flex:1; min-width:0; padding:13px 16px;
  background:color-mix(in srgb,var(--text) 4%,transparent);
  border:1px solid var(--line-2); border-radius:14px;
  color:var(--text); font-size:15px;
  transition:border-color .2s;
}
.chat-input::placeholder { color:var(--faint); }
.chat-input:focus { outline:none; border-color:var(--accent); }
.chat-btn {
  padding:0 24px; min-height:44px; cursor:pointer; border:0; border-radius:14px;
  color:var(--send-text); font-family:var(--font-body); font-weight:700;
  letter-spacing:.04em; font-size:14px;
  background:linear-gradient(150deg,var(--accent-2),var(--accent-deep));
  box-shadow:0 12px 24px -10px color-mix(in srgb,var(--accent-deep) 70%,transparent);
  transition:transform .1s, filter .2s;
}
.chat-btn:hover { filter:brightness(1.06); }
.chat-btn:active { transform:scale(.97); }

/* ----------- MEMORY RAIL ----------- */
.want-rail {
  min-height:0; overflow-y:auto;
  background:var(--card); border:1px solid var(--line); border-radius:22px;
  padding:24px; box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(var(--blur)); backdrop-filter:blur(var(--blur));
}
.rail-title {
  font-family:var(--font-display); font-weight:400; font-size:21px; color:var(--text); margin-bottom:6px;
}
.rail-sub { color:var(--muted); font-size:13px; line-height:1.5; margin-bottom:16px; }

.stats-box { display:flex; flex-direction:column; gap:8px; }
.stat-row {
  display:flex; justify-content:space-between; align-items:center;
  background:color-mix(in srgb,var(--text) 4%,transparent);
  border:1px solid var(--line); border-radius:12px; padding:11px 14px;
  font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}
.stat-row b { color:var(--accent); font-size:14px; letter-spacing:0; }

/* pin / inline input rows */
.tg-reply { display:flex; gap:8px; margin-top:6px; }
.tg-reply input {
  flex:1; min-width:0; padding:11px 14px;
  background:color-mix(in srgb,var(--text) 4%,transparent);
  border:1px solid var(--line-2); border-radius:12px; color:var(--text); font-size:14px;
  transition:border-color .2s;
}
.tg-reply input::placeholder { color:var(--faint); }
.tg-reply input:focus { outline:none; border-color:var(--accent); }
.tg-reply button {
  flex:none; padding:0 18px; min-height:44px; cursor:pointer; border:0; border-radius:12px;
  color:var(--send-text); font-weight:700; letter-spacing:.04em; font-size:13.5px;
  background:linear-gradient(150deg,var(--accent-2),var(--accent-deep));
  transition:transform .1s, filter .2s;
}
.tg-reply button:hover { filter:brightness(1.06); }
.tg-reply button:active { transform:scale(.96); }
.pin-result {
  font-size:12.5px; color:var(--muted); padding:8px 2px 0;
}
.pin-result.err, .pin-result .err { color:var(--rose); }

/* ----------- MEMORY DEBUG ----------- */
.mem-results { display:flex; flex-direction:column; gap:12px; margin-top:18px; max-height:none; }
.mem-meta {
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
}
.mem-item {
  background:var(--card-solid); border:1px solid var(--line);
  border-left:2px solid var(--accent); border-radius:6px 14px 14px 6px; padding:14px 16px;
}
.mem-head { display:flex; align-items:center; gap:12px; margin-bottom:7px; flex-wrap:wrap; }
.mem-score { font-size:14px; font-weight:700; color:var(--accent); }
.mem-channels { font-size:11px; letter-spacing:.08em; color:var(--faint); }
.mem-content { color:var(--text); font-size:14px; line-height:1.5; }

.packet-box {
  background:color-mix(in srgb,var(--text) 4%,transparent);
  border:1px solid var(--line-2); border-radius:14px;
  padding:18px; margin-top:14px; max-height:440px; overflow:auto;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:12.5px;
  color:var(--muted); white-space:pre-wrap; line-height:1.65;
}

/* ----------- MIND MAP ----------- */
.mindmap-card { display:flex; flex-direction:column; }
.mindmap-tools { display:flex; align-items:center; gap:14px; }
.mindmap-readout {
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--faint);
}
.mindmap-stage {
  position:relative; margin-top:16px;
  height:clamp(420px,60vh,680px);
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:
    radial-gradient(80% 60% at 50% -8%, color-mix(in srgb,var(--accent) 9%,transparent), transparent 70%),
    color-mix(in srgb,var(--text) 3%,transparent);
}
#mindmapCanvas { display:block; width:100%; height:100%; cursor:grab; touch-action:none; }
#mindmapCanvas:active { cursor:grabbing; }
.mindmap-empty {
  position:absolute; inset:0; margin:0;
  display:flex; align-items:center; justify-content:center;
}
.mindmap-empty[hidden] { display:none; }
.mindmap-tip {
  position:absolute; z-index:5; pointer-events:none; max-width:280px;
  background:var(--card-solid); border:1px solid var(--line-2); border-radius:12px;
  padding:10px 13px; font-size:13px; line-height:1.45; color:var(--text);
  box-shadow:var(--shadow);
  transform:translate(-50%, calc(-100% - 14px));
}
.mindmap-tip-meta {
  display:block; font-size:10px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); margin-bottom:5px;
}
.mindmap-legend {
  position:absolute; left:14px; bottom:12px;
  display:flex; gap:15px; align-items:center;
  font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  background:color-mix(in srgb,var(--card-solid) 72%,transparent);
  border:1px solid var(--line); border-radius:99px; padding:7px 15px;
  -webkit-backdrop-filter:blur(var(--blur)); backdrop-filter:blur(var(--blur));
}
.mindmap-legend span { display:inline-flex; align-items:center; gap:7px; }
.mindmap-legend .dot { width:9px; height:9px; border-radius:50%; flex:none; }
.mindmap-legend .dot.fact { background:var(--accent); }
.mindmap-legend .dot.memory { background:color-mix(in srgb,var(--accent-2) 55%,transparent); }
.mindmap-legend .dot.anchor { background:var(--card-solid); border:1.5px solid var(--accent); }

/* ----------- AUTONOMY ----------- */
.autonomy-grid {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px; align-items:start;
}
.action-btn {
  background:var(--card); border:1px solid var(--line-2); color:var(--text);
  padding:9px 16px; border-radius:11px; cursor:pointer;
  font-family:var(--font-body); font-weight:600; font-size:12.5px; letter-spacing:.04em;
  -webkit-backdrop-filter:blur(var(--blur)); backdrop-filter:blur(var(--blur));
  transition:border-color .2s, color .2s, transform .1s; text-decoration:none; display:inline-flex; align-items:center; gap:6px;
}
.action-btn:hover { border-color:var(--accent); color:var(--accent-2); }
.action-btn:active { transform:scale(.97); }
.action-btn.primary {
  border-color:transparent; color:var(--send-text); font-weight:700;
  background:linear-gradient(150deg,var(--accent-2),var(--accent-deep));
  box-shadow:0 12px 24px -12px color-mix(in srgb,var(--accent-deep) 70%,transparent);
}
.action-btn.primary:hover { filter:brightness(1.06); color:var(--send-text); }

.timeline { display:flex; flex-direction:column; gap:12px; }
.choice-card {
  background:var(--card-solid); border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
.choice-header {
  padding:11px 16px; display:flex; justify-content:space-between; align-items:center; gap:10px;
  border-bottom:1px solid var(--line);
}
.choice-time { font-size:12px; letter-spacing:.04em; color:var(--faint); }
.choice-body { padding:15px 16px; }
.badge {
  display:inline-block; background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  color:var(--accent); padding:3px 10px; border-radius:99px;
  font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.badge.message_user { border-color:color-mix(in srgb,var(--accent) 50%,transparent); color:var(--accent); }
.badge.journal { border-color:color-mix(in srgb,var(--rose) 45%,transparent); color:var(--rose); background:color-mix(in srgb,var(--rose) 12%,transparent); }
.detail-item {
  background:color-mix(in srgb,var(--text) 4%,transparent);
  border-left:2px solid var(--accent); border-radius:0 10px 10px 0; padding:12px 14px;
}
.detail-item .type {
  font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:5px;
}
.detail-item .content { color:var(--text); white-space:pre-wrap; font-size:13.5px; line-height:1.55; }
.choice-body .action-btn { margin-top:10px; }
.choice-body .muted.small { margin-left:10px; }

.empty-state {
  text-align:center; padding:34px 20px; color:var(--faint); font-style:italic; font-size:14px;
}

/* ----------- RESPONSIVE ----------- */
@media (max-width:1000px) {
  .chat-grid { grid-template-columns:1fr; height:auto; }
  .chat-column { height:clamp(440px,62vh,640px); }
  .want-rail { max-height:none; }
  .autonomy-grid { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .topbar { align-items:flex-start; }
  .head-actions { width:100%; }
  #modelSelect { max-width:100%; flex:1; }
  .message { max-width:92%; }
}