/* =====================================================================
   Pearl — restraint over decoration.
   Monochrome palette, one accent (black/white), generous whitespace,
   1px hairlines, no shadows where a hairline will do, Inter Tight type.
   ===================================================================== */

:root {
  --font-sans: "Inter Tight", system-ui, sans-serif;

  /* Light */
  --bg:           #fafafa;
  --surface:      #ffffff;
  --sidebar-bg:   #f4f4f4;
  --line:         rgba(0,0,0,0.08);
  --line-strong:  rgba(0,0,0,0.14);
  --ink:          #0a0a0a;
  --ink-2:        #2a2a2a;
  --ink-3:        #6a6a6a;
  --ink-4:        #9a9a9a;
  --bubble-me:    #0a0a0a;
  --bubble-me-fg: #fafafa;
  --bubble-them:  rgba(0,0,0,0.05);
  --bubble-err:   rgba(220, 60, 60, 0.08);
  --bubble-err-fg:#a02828;
  --accent:       #0a0a0a;
  --accent-fg:    #ffffff;
  --hover:        rgba(0,0,0,0.045);
  --active:       rgba(0,0,0,0.07);
  --focus:        rgba(10,10,10,0.16);
  --radius-s:     8px;
  --radius:       12px;
  --radius-l:     18px;
  --radius-xl:    22px;
  --radius-pill:  999px;

  --sidebar-w:    248px;
  --content-max:  720px;
  --content-pad-x: 22px;
  /* Optical center: middle of the chat pane (sidebar shifts weight left) */
  --content-center-x: calc(50vw - 20px);

  /* Composer interior — keep message edges in sync with the input chrome */
  --composer-pad-left: 16px;
  --composer-pad-right: 6px;
  --composer-inner-gap: 8px;
  --composer-send-size: 32px;
  --composer-trailing: calc(
    var(--composer-pad-right) + var(--composer-inner-gap) + var(--composer-send-size)
  );

  --scrollbar-size: 10px;
  /* Wider than thumb so composer gradient doesn’t cover the gutter (esp. Windows) */
  --scrollbar-inset: 14px;
  --scrollbar-track: var(--bg);
  --scrollbar-thumb: rgba(0, 0, 0, 0.18);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.30);

  /* Space reserved above the overlaid composer (thread padding + scroll padding) */
  --composer-overlay: 160px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #0a0a0a;
    --surface:      #131313;
    --sidebar-bg:   #0d0d0d;
    --line:         rgba(255,255,255,0.07);
    --line-strong:  rgba(255,255,255,0.13);
    --ink:          #f4f4f4;
    --ink-2:        #d4d4d4;
    --ink-3:        #8e8e8e;
    --ink-4:        #5e5e5e;
    --bubble-me:    #f4f4f4;
    --bubble-me-fg: #0a0a0a;
    --bubble-them:  rgba(255,255,255,0.06);
    --bubble-err:   rgba(255, 120, 120, 0.10);
    --bubble-err-fg:#ff8a8a;
    --accent:       #f4f4f4;
    --accent-fg:    #0a0a0a;
    --hover:        rgba(255,255,255,0.05);
    --active:       rgba(255,255,255,0.08);
    --focus:        rgba(244,244,244,0.22);
    --scrollbar-track: var(--bg);
    --scrollbar-thumb: rgba(255, 255, 255, 0.20);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.32);
  }
}

* { box-sizing: border-box; }
*::selection { background: var(--ink); color: var(--bg); }

html {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html, body {
  margin: 0; height: 100%;
  overflow: hidden;
  background: var(--bg); color: var(--ink);
  font-size: 14.5px; line-height: 1.55;
  letter-spacing: -0.005em;
}

button, input, select, textarea { font: inherit; color: inherit; }

/* Phosphor icons (logos stay as SVG <img>) */
.ph.icon {
  display: block;
  line-height: 1;
  color: inherit;
  flex-shrink: 0;
}
.icon-13 { font-size: 13px; }
.icon-14 { font-size: 14px; }
.icon-15 { font-size: 15px; }
.icon-16 { font-size: 16px; }
button { cursor: pointer; background: none; border: none; padding: 0; }
a { color: inherit; }

/* =====================================================================
   Layout
   ===================================================================== */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100vh; height: 100dvh;
  overflow: hidden;
}
@media (max-width: 760px) {
  :root {
    --content-max: 100%;
    --content-pad-x: 8px;
    --scrollbar-inset: 0px;
  }

  /* Sidebar — larger type on mobile */
  .sidebar { font-size: 15px; }
  .brand-name { font-size: 18px !important; }
  .brand-mark { width: 24px !important; height: 20px !important; }
  .new-chat { font-size: 15px !important; padding: 10px !important; }
  .new-chat .ph { font-size: 15px !important; }
  .chat-item { font-size: 15px !important; padding: 10px !important; }
  .chat-item .row-btn { width: 26px !important; height: 26px !important; }
  .chat-item .row-btn .ph { font-size: 14px !important; }
  .sidebar-foot-btn { font-size: 15px !important; padding: 11px 12px !important; }
  .sidebar-foot-btn .ph { font-size: 15px !important; }
  .sidebar-foot-btn .icon-13 { font-size: 15px !important; }
  .meter-label { font-size: 12px !important; }
  .meter-value { font-size: 26px !important; }
  .settings-dot { width: 7px !important; height: 7px !important; }
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0;
    width: min(82vw, 300px);
    transform: translateX(-100%);
    transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 30; border-right: 1px solid var(--line);
  }
  .sidebar.open { transform: none; }
  .scrim {
    position: fixed; inset: 0; background: rgba(0,0,0,0.32);
    opacity: 0; pointer-events: none;
    transition: opacity 200ms ease; z-index: 25;
  }
  .scrim.show { opacity: 1; pointer-events: auto; }
}

/* =====================================================================
   Sidebar
   ===================================================================== */
.sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  min-width: 0;
}
.sidebar-inner {
  flex: 1;
  display: flex; flex-direction: column;
  padding: 20px 12px 8px;
  min-height: 0;
}

.brand {
  display: flex; align-items: center; gap: 9px;
  padding: 2px 10px 18px;
}
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 18px;
}
.brand-mark img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.brand-name {
  font-size: 16px; font-weight: 500;
  letter-spacing: -0.02em;
}

.new-chat {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius);
  color: var(--ink-2);
  font-size: 13px; font-weight: 500;
  margin-bottom: 14px;
  transition: background 140ms ease, color 140ms ease;
}
.new-chat:hover { background: var(--hover); color: var(--ink); }
.new-chat:active { background: var(--active); }
.new-chat .ph { color: var(--ink-3); transition: color 140ms ease; }
.new-chat:hover .ph { color: var(--ink); }

.chat-list {
  flex: 1; min-height: 0;
  overflow-y: auto;
  display: flex; flex-direction: column;
  gap: 1px;
  padding-right: 2px;
}
.chat-list {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.chat-list::-webkit-scrollbar { width: var(--scrollbar-size); }
.chat-list::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  margin: 4px 0;
}
.chat-list::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-pill);
  transition: background 180ms ease;
}
.chat-list:hover::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-hover);
}

.chat-item {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px;
  border-radius: var(--radius-s);
  color: var(--ink-2);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background 120ms ease, color 120ms ease;
}
.chat-item:hover { background: var(--hover); color: var(--ink); }
.chat-item.active { background: var(--active); color: var(--ink); }
.chat-item .name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-item .row-btn {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; color: var(--ink-3);
  opacity: 0;
  transition: opacity 140ms ease, background 120ms ease, color 120ms ease;
}
.chat-item:hover .row-btn { opacity: 1; }
.chat-item .row-btn:hover { background: rgba(0,0,0,0.08); color: var(--ink); }
@media (prefers-color-scheme: dark) {
  .chat-item .row-btn:hover { background: rgba(255,255,255,0.08); }
}

/* Sidebar foot */
.sidebar-foot {
  padding: 12px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
  position: relative; /* anchor for the popover */
}
/* Topbar meter: matches the muted style of the chat subtitle */
.bar-meter {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-size: 11px; color: var(--ink-4);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.bar-meter-value { color: var(--ink-3); font-weight: 500; }
.bar-meter-label { color: var(--ink-4); }

/* Sidebar foot buttons */
.sidebar-foot-btn {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px;
  border-radius: var(--radius-s);
  color: var(--ink-2);
  font-size: 13px; font-weight: 500;
  line-height: 1;
  position: relative;
  transition: background 120ms ease, color 120ms ease;
}
.sidebar-foot-btn:hover { background: var(--hover); color: var(--ink); }
.sidebar-foot-btn[aria-expanded="true"] { background: var(--active); color: var(--ink); }
.sidebar-foot-btn .ph.icon {
  flex-shrink: 0;
  line-height: 1;
  position: relative;
  top: 0;
}
.sidebar-foot-btn > span:not(.settings-dot) {
  flex: 1;
  min-width: 0;
  text-align: left;
  line-height: 1;
}
.settings-dot {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: #ff9f0a;
  box-shadow: 0 0 0 2px var(--sidebar-bg);
  flex: none;
}

/* Support modal */
.support-row {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: var(--bg);
}
.support-address {
  flex: 1; min-width: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
  word-break: break-all;
}
.support-copy {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-s);
  color: var(--ink-3);
  transition: background 140ms ease, color 140ms ease;
}
.support-copy:hover { background: var(--hover); color: var(--ink); }
.support-link {
  display: flex; align-items: center; gap: 10px;
  box-sizing: border-box;
  width: calc(100% - 2 * var(--modal-pad-x));
  margin: 0 var(--modal-pad-x) 16px;
  padding: 11px 0;
  border-radius: var(--radius-s);
  font-size: 13px; font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: background 140ms ease, color 140ms ease;
}
.support-link:hover { background: var(--hover); color: var(--ink); }
.support-link > span { flex: 1; min-width: 0; line-height: 1.25; }
.support-link .ph-arrow-square-out { color: var(--ink-4); flex-shrink: 0; }

/* =====================================================================
   Modal (settings) — centered, blurred scrim behind
   ===================================================================== */
.modal-scrim {
  position: fixed; inset: 0;
  background: color-mix(in oklab, var(--bg) 35%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  z-index: 49;
  animation: scrim-in 220ms ease both;
}
@keyframes scrim-in {
  from { opacity: 0; -webkit-backdrop-filter: blur(0) saturate(100%); backdrop-filter: blur(0) saturate(100%); }
  to   { opacity: 1; }
}

.modal {
  --modal-pad-x: 18px;
  position: fixed; z-index: 50;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 20px 48px rgba(0,0,0,0.14),
    0 40px 96px rgba(0,0,0,0.10);
  padding: 0;
  transform-origin: center;
  animation: modal-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes modal-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--modal-pad-x) 12px;
}
.modal-title {
  font-size: 15px; font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.modal-close {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--ink-3);
  transition: background 140ms ease, color 140ms ease;
}
.modal-close:hover { background: var(--hover); color: var(--ink); }

/* Dialog (confirm / prompt) */
.dialog-message {
  margin: 0 0 4px;
  font-size: 14px; color: var(--ink-2); line-height: 1.5;
}
.dialog-input {
  width: 100%; margin-top: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 14px; color: var(--ink);
  outline: none;
  transition: border-color 140ms ease, box-shadow 200ms ease;
}
.dialog-input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--focus);
}
.dialog-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 10px 14px 14px;
}
.dialog-cancel {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 500;
  color: var(--ink-2);
  border: 1px solid var(--line-strong);
  background: transparent;
  transition: background 140ms ease, color 140ms ease;
}
.dialog-cancel:hover { background: var(--hover); color: var(--ink); }
.dialog-confirm {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 500;
  color: var(--accent-fg);
  background: var(--accent);
  border: none;
  transition: opacity 140ms ease;
}
.dialog-confirm:hover { opacity: 0.82; }
.dialog-confirm.danger {
  background: #c83a3a; color: #fff;
}
@media (prefers-color-scheme: dark) {
  .dialog-confirm.danger { background: #d95555; }
}
.pop-section { padding: 0 var(--modal-pad-x) 14px; }
.pop-label {
  font-size: 10.5px; color: var(--ink-4);
  text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 500; margin-bottom: 8px;
}
.pop-field {
  display: flex; align-items: stretch; gap: 6px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2px 2px 2px 10px;
  transition: border-color 140ms ease, box-shadow 200ms ease;
}
.pop-field:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--focus);
}
.pop-field input {
  flex: 1; min-width: 0;
  background: transparent; border: none; outline: none;
  padding: 8px 0;
  font-size: 12px; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.pop-field input::placeholder { color: var(--ink-4); font-size: 13px; }
.pop-icon {
  width: 28px; align-self: center; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  color: var(--ink-3);
  transition: background 140ms ease, color 140ms ease;
}
.pop-icon:hover { background: var(--hover); color: var(--ink); }

.pop-hint {
  margin-top: 8px;
  font-size: 11.5px; color: var(--ink-3);
  line-height: 1.45;
}
.pop-hint a {
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
  transition: border-color 140ms ease;
}
.pop-hint a:hover { border-bottom-color: var(--ink); }

.pop-divider {
  height: 1px; background: var(--line);
  margin: 2px var(--modal-pad-x);
}

.pop-segment {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2px;
}
.seg {
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 12.5px; font-weight: 500;
  color: var(--ink-3);
  transition: background 140ms ease, color 140ms ease;
}
.seg:hover { color: var(--ink); }
.seg.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
@media (prefers-color-scheme: dark) {
  .seg.active { box-shadow: 0 1px 2px rgba(0,0,0,0.4); }
}

.pop-item {
  display: flex; align-items: center; gap: 9px;
  box-sizing: border-box;
  width: calc(100% - 2 * var(--modal-pad-x));
  margin: 0 var(--modal-pad-x) 12px;
  padding: 10px 0;
  border-radius: var(--radius-s);
  font-size: 13px; font-weight: 500;
  color: var(--ink-2);
  transition: background 140ms ease, color 140ms ease;
}
.pop-item:hover { background: var(--hover); color: var(--ink); }
.pop-item.destructive { color: #c83a3a; }
.pop-item.destructive .ph { color: #c83a3a; }
.pop-item.destructive:hover { background: rgba(200,58,58,0.07); }
@media (prefers-color-scheme: dark) {
  .pop-item.destructive { color: #ff7a7a; }
  .pop-item.destructive .ph { color: #ff7a7a; }
  .pop-item.destructive:hover { background: rgba(255,122,122,0.10); }
}

@media (max-width: 760px) {
  .modal {
    --modal-pad-x: 16px;
    width: calc(100vw - 24px);
    border-radius: 24px;
    top: auto;
    bottom: 32px;
    transform: translateX(-50%);
    max-height: 85vh;
  }
  .modal-head { padding: 20px var(--modal-pad-x) 14px; }
  .modal-title { font-size: 18px !important; }
  .modal-close { width: 36px !important; height: 36px !important; font-size: 18px; }
  .pop-label { font-size: 12px !important; margin-bottom: 10px; }
  .pop-section { padding: 0 var(--modal-pad-x) 18px; }
  .pop-field { padding: 4px 4px 4px 14px; border-radius: 14px; }
  .pop-field input { font-size: 16px !important; padding: 14px 0 !important; }
  .pop-field input::placeholder { font-size: 16px !important; }
  .pop-icon { width: 40px !important; height: 40px !important; font-size: 18px !important; }
  .pop-hint { font-size: 13px !important; margin-top: 10px; }
  .pop-segment { border-radius: 14px; }
  .seg { padding: 12px 10px !important; font-size: 15px !important; border-radius: 11px !important; }
  .pop-item { padding: 14px var(--modal-pad-x) !important; font-size: 16px !important; }
  .pop-item .ph { font-size: 17px !important; }
  .pop-divider { margin: 4px var(--modal-pad-x); }
  .dialog-foot { padding: 12px 16px 18px; }
  .dialog-cancel, .dialog-confirm { padding: 13px 20px !important; font-size: 16px !important; }
  .dialog-input { font-size: 16px !important; padding: 14px !important; }
  .dialog-message { font-size: 15px !important; }
}

/* =====================================================================
   Pane
   ===================================================================== */
.pane {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  overflow: hidden;
  position: relative;
}

/* Center in the visible chat pane (reads as screen-center with a left sidebar) */
.pane-viewport {
  flex: 1; min-height: 0;
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Full-height scroll — bar runs the full pane, composer floats on top */
.pane-scroll {
  position: absolute;
  inset: 0;
  background: var(--bg);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scroll-padding-bottom: var(--composer-overlay);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.pane-scroll::-webkit-scrollbar { width: var(--scrollbar-size); }
.pane-scroll::-webkit-scrollbar-track,
.pane-scroll::-webkit-scrollbar-track-piece {
  background: var(--scrollbar-track);
}
.pane-scroll::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
}
.pane-scroll::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-pill);
  border: none;
  min-height: 40px;
  transition: background 160ms ease;
}
.pane-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

.pane-column {
  width: min(var(--content-max), calc(100% - var(--content-pad-x) * 2));
  margin-left: max(var(--content-pad-x), calc((100% - var(--content-max)) / 2 - 60px));
  margin-right: auto;
}
@media (max-width: 760px) {
  .pane-column {
    width: calc(100% - var(--content-pad-x) * 2);
    margin-left: var(--content-pad-x);
    margin-right: var(--content-pad-x);
  }
}

.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  flex-shrink: 0;
  z-index: 5;
}
.bar-icon {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-s);
  color: var(--ink-3);
  transition: background 140ms ease, color 140ms ease;
}
.bar-icon:hover { background: var(--hover); color: var(--ink); }
#sideToggle { display: none; }
@media (max-width: 760px) {
  .topbar { padding-top: 0; padding-bottom: 0; min-height: 60px; }
  #sideToggle {
    display: inline-flex;
    width: 44px; height: 44px;
    border-radius: 12px;
  }
  #sideToggleIcon { font-size: 38px; }
}
.bar-spacer { flex: 1; }
.chat-title-wrap {
  display: flex; flex-direction: column;
  min-width: 0;
}
@media (max-width: 760px) {
  .chat-title-wrap { gap: 0; }
  .chat-title { line-height: 1.1; }
  .chat-sub { margin-top: -3px; line-height: 1.1; }
  .bubble { font-size: 16px !important; padding: 12px 16px !important; max-width: 88% !important; line-height: 1.5 !important; }
}
.chat-title {
  font-size: 14.5px; font-weight: 500;
  letter-spacing: -0.012em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink);
}
.chat-sub {
  font-size: 11px; color: var(--ink-4);
  letter-spacing: 0.01em;
  margin-top: 1px;
}

/* =====================================================================
   Thread
   ===================================================================== */
.thread {
  padding: 36px var(--content-pad-x) calc(28px + var(--composer-overlay));
  display: flex; flex-direction: column;
}
.thread > * { width: 100%; }

/* Empty state — same center as messages + composer */
.empty {
  position: fixed;
  left: calc(var(--content-center-x) + 60px);
  top: 50%;
  transform: translate(-50%, calc(-50% - 24px));
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center;
  padding: 0 16px;
  color: var(--ink-3);
  width: min(460px, calc(100vw - 32px));
  pointer-events: none;
}
.empty * { pointer-events: auto; }
@media (max-width: 760px) {
  .empty {
    left: 50%;
    width: calc(100vw - var(--content-pad-x) * 2);
    transform: translate(-50%, -50%);
  }
}
.empty-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 60px;
  margin-bottom: 6px;
  opacity: 0.95;
}
.empty-mark img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.empty h2 {
  margin: 0;
  font-size: 30px; font-weight: 500;
  letter-spacing: -0.035em; line-height: 1.1;
  opacity: 0;
  will-change: opacity, transform;
  color: var(--ink);
}
.empty p {
  margin: 0;
  font-size: 14px; color: var(--ink-3);
  max-width: 360px;
}

/* Rows + bubbles */
.row {
  display: flex; width: 100%;
  margin: 8px 0;
}
.row + .row.user, .row + .row.assistant { margin-top: 14px; }
.row.user { justify-content: flex-end; }
.row.assistant { justify-content: flex-start; }
.row.error { justify-content: center; }

.bubble {
  max-width: 78%;
  padding: 10px 14px;
  font-size: 14.5px; line-height: 1.55;
  border-radius: 18px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  letter-spacing: -0.005em;
  animation: bubble-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes bubble-in {
  from { transform: translateY(4px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.row.user .bubble {
  background: var(--bubble-me); color: var(--bubble-me-fg);
  border-bottom-right-radius: 6px;
}
.row.assistant .bubble {
  background: var(--bubble-them); color: var(--ink);
  border-bottom-left-radius: 6px;
}
.row.error .bubble {
  background: var(--bubble-err); color: var(--bubble-err-fg);
  font-size: 13px; max-width: 520px;
  border-radius: 12px;
}

/* Markdown rendered inside assistant bubbles */
.row.assistant .bubble p,
.row.assistant .bubble h1,
.row.assistant .bubble h2,
.row.assistant .bubble h3,
.row.assistant .bubble h4,
.row.assistant .bubble h5,
.row.assistant .bubble h6,
.row.assistant .bubble ul,
.row.assistant .bubble ol,
.row.assistant .bubble blockquote,
.row.assistant .bubble pre { margin: 0; }

.row.assistant .bubble > * + * { margin-top: 0.55em; }
.row.assistant .bubble > *:first-child { margin-top: 0; }
.row.assistant .bubble > *:last-child { margin-bottom: 0; }

.row.assistant .bubble h1,
.row.assistant .bubble h2,
.row.assistant .bubble h3 {
  font-weight: 600; line-height: 1.25; letter-spacing: -0.01em;
}
.row.assistant .bubble h1 { font-size: 1.2em; margin-top: 0.8em; }
.row.assistant .bubble h2 { font-size: 1.1em; margin-top: 0.7em; }
.row.assistant .bubble h3 { font-size: 1em;   margin-top: 0.6em; }
.row.assistant .bubble h4,
.row.assistant .bubble h5,
.row.assistant .bubble h6 { font-size: 0.95em; font-weight: 600; }

.row.assistant .bubble ul,
.row.assistant .bubble ol {
  padding-left: 1.4em;
}
.row.assistant .bubble li + li { margin-top: 0.25em; }

.row.assistant .bubble strong { font-weight: 600; }
.row.assistant .bubble em { font-style: italic; }

.row.assistant .bubble code {
  font-family: "SF Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 0.85em;
  background: rgba(0,0,0,0.07);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}
.row.assistant .bubble pre {
  background: rgba(0,0,0,0.06);
  border-radius: 8px;
  padding: 12px 14px;
  overflow-x: auto;
  margin-top: 0.55em;
}
.row.assistant .bubble pre code {
  background: none;
  padding: 0;
  font-size: 0.82em;
  border-radius: 0;
}

.row.assistant .bubble blockquote {
  border-left: 3px solid var(--line-strong);
  padding-left: 0.8em;
  color: var(--ink-3);
  font-style: italic;
}

.row.assistant .bubble hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 0.6em 0;
}

@media (prefers-color-scheme: dark) {
  .row.assistant .bubble code { background: rgba(255,255,255,0.1); }
  .row.assistant .bubble pre  { background: rgba(255,255,255,0.07); }
}

.typing { display: inline-flex; gap: 4px; align-items: center; padding: 2px 0; }
.typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: 0.45;
  animation: typing 1.15s ease-in-out infinite;
}
.typing span:nth-child(2) { animation-delay: 0.15s; }
.typing span:nth-child(3) { animation-delay: 0.30s; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
  30% { transform: translateY(-3px); opacity: 0.95; }
}

/* =====================================================================
   Composer
   ===================================================================== */
.composer-wrap {
  position: absolute;
  left: 0;
  right: var(--scrollbar-inset);
  bottom: 0;
  z-index: 4;
  padding: 18px 0 44px;
  background: linear-gradient(180deg, transparent 0%, var(--bg) 28%, var(--bg) 100%);
  pointer-events: none;
}
.composer-wrap .pane-column {
  padding-inline: var(--content-pad-x);
  box-sizing: border-box;
  pointer-events: auto;
}
.composer {
  width: 100%;
  box-sizing: border-box;
  display: flex; align-items: center;
  gap: var(--composer-inner-gap);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  padding: 6px var(--composer-pad-right) 6px var(--composer-pad-left);
  transition: border-color 160ms ease, box-shadow 240ms ease, transform 160ms ease;
}
.composer:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 4px var(--focus);
}
.composer textarea {
  flex: 1; min-width: 0;
  background: transparent; border: none; outline: none;
  resize: none;
  /* iOS zooms on any input < 16px — prevent that */
  font-size: max(16px, 14.5px);
  padding: 10px 0;
  max-height: 220px;
  font-size: 14.5px; line-height: 1.5;
  color: var(--ink);
}
.composer textarea::placeholder { color: var(--ink-4); }
.send {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-fg);
  display: inline-flex; align-items: center; justify-content: center;
  transition: opacity 140ms ease, transform 120ms ease, background 140ms ease;
}
.send:hover { opacity: 0.88; }
.send:active { transform: scale(0.94); }
.send:disabled {
  background: var(--bubble-them);
  color: var(--ink-4);
  cursor: not-allowed;
}