/* ============================================================
   MathematiX — /app shell
   Reuses landing tokens from ../assets/css/styles.css
   (paper + graph grid + emerald · Spectral / Hanken / Plex Mono)
   ============================================================ */

:root {
  --tb-h: 54px;          /* toolbar height */
  --sb-w: 274px;         /* sidebar width (JS may override) */
  --row-h: 32px;
  --accent: var(--green);        /* per-class accent, set by JS on selection */
  --accent-soft: var(--mint);
  --accent-line: var(--mint-line);
}

/* class color palette — real STEM color coding, not a rainbow.
   On :root (not .app): the context menu, palette, and other overlays
   live outside .app and still need these to resolve. */
:root { --c-green: #1c7c54; --c-amber: #b9892f; --c-plum: #7a557e; --c-sky: #2f6e9e; --c-rose: #a8516b; --c-teal: #2c8079; }

html, body { height: 100%; }
/* the hidden attribute must always win over explicit display values below */
[hidden] { display: none !important; }
.app-body {
  overflow: hidden;
  background: var(--paper);
}

.app {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- Top toolbar ---------- */
.tb {
  height: var(--tb-h);
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  background: rgba(251,250,244,0.82);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  z-index: 40;
}
.tb__brand {
  font-family: var(--font-serif);
  font-size: 1.16rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  padding-right: 6px;
}
.tb__brand .x { color: var(--green); font-style: italic; }

.tb__group { display: flex; align-items: center; gap: 3px; }
.tb__tools { gap: 2px; }
.tb__right { margin-left: auto; }
.tb__div { width: 1px; height: 22px; background: var(--line); margin: 0 6px; flex: none; }

.tbtool {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 9px;
  border-radius: 9px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.02em;
  transition: background .22s var(--ease), color .22s var(--ease),
              transform .22s var(--ease), box-shadow .22s var(--ease);
  white-space: nowrap;
}
.tbtool svg { width: 17px; height: 17px; transition: transform .22s var(--ease); }
.tbtool span { display: none; }          /* icon-only by default */
.tbtool:hover {
  background: var(--mint);
  color: var(--green-700);
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px var(--mint-line), 0 3px 10px color-mix(in srgb, var(--green) 18%, transparent);
}
.tbtool:hover svg { transform: scale(1.08); }
.tbtool:active { transform: translateY(0) scale(0.97); box-shadow: inset 0 0 0 1px var(--mint-line); }
.tbtool.is-active {
  background: var(--mint);
  color: var(--green-700);
  border: 1px solid var(--mint-line);
  padding: 0 8px;
}
/* Show tool labels only where the whole toolbar still fits. At 1180px the
   labelled tools already pushed the right-hand controls (theme, settings) off
   the edge, and the undo/redo pair needs its 82px too — 1500px is the width at
   which nothing gets clipped. */
@media (min-width: 1500px) { .tbtool span { display: inline; } }

.tbicon {
  width: 34px; height: 34px;
  display: inline-grid; place-items: center;
  border-radius: 9px;
  color: var(--ink-soft);
  transition: background .22s var(--ease), color .22s var(--ease),
              transform .22s var(--ease), box-shadow .22s var(--ease);
}
.tbicon svg { width: 17px; height: 17px; transition: transform .22s var(--ease); }
.tbicon:hover {
  background: var(--mint);
  color: var(--green-700);
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px var(--mint-line), 0 3px 10px color-mix(in srgb, var(--green) 18%, transparent);
}
.tbicon:hover svg { transform: scale(1.08); }
.tbicon:active { transform: translateY(0) scale(0.97); box-shadow: inset 0 0 0 1px var(--mint-line); }
.tbicon.is-on { background: var(--mint); color: var(--green-700); }

.zoom { display: flex; align-items: center; gap: 2px; }
.zoom__val {
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint);
  min-width: 42px; text-align: center;
}

/* toolbar dropdown menu */
.tb__menuwrap { position: relative; }
.menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 198px;
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 60;
}
.menu__label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint);
  padding: 6px 9px 4px;
}
.menu__item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 9px;
  border-radius: 8px;
  font-size: 0.9rem; color: var(--ink);
  text-align: left;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.menu__item i { font-style: normal; width: 18px; text-align: center; opacity: 0.8; }
.menu__item:hover { background: var(--mint); color: var(--green-700); }
.menu__item--danger { color: #b3463c; }
.menu__item--danger:hover { background: rgba(179,70,60,0.08); color: #b3463c; }
.menu__div { height: 1px; background: var(--line-soft); margin: 5px 4px; }

/* ---------- Shell ---------- */
.shell { flex: 1; display: flex; min-height: 0; }

/* ---------- Sidebar ---------- */
.sb {
  width: var(--sb-w);
  flex: none;
  display: flex; flex-direction: column;
  background: rgba(251,250,244,0.7);
  backdrop-filter: saturate(1.3) blur(12px);
  -webkit-backdrop-filter: saturate(1.3) blur(12px);
  border-right: 1px solid var(--line-soft);
  min-height: 0;
}

.sb__tabs {
  display: flex; gap: 4px;
  padding: 12px 12px 8px;
}
.sb__tab {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; border-radius: 9px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint);
  transition: background .22s var(--ease), color .22s var(--ease), box-shadow .22s var(--ease);
}
.sb__tab svg { width: 14px; height: 14px; transition: transform .22s var(--ease); }
.sb__tab:hover {
  color: var(--green-700);
  background: var(--mint);
  box-shadow: inset 0 0 0 1px var(--mint-line);
}
.sb__tab:hover svg { transform: scale(1.1); }
.sb__tab.is-active { color: var(--green-700); background: var(--mint); }

.sb__panel { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 4px 10px 8px; }

/* search / palette trigger */
.search {
  display: flex; align-items: center; gap: 9px;
  height: 36px; padding: 0 11px; margin: 4px 2px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-3);
  color: var(--ink-faint);
  cursor: text;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.search:hover { border-color: var(--mint-line); }
.search svg { width: 15px; height: 15px; flex: none; }
.search__ph { font-size: 0.88rem; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search kbd {
  font-family: var(--font-mono); font-size: 10px;
  padding: 2px 6px; border-radius: 6px;
  background: var(--paper-2); border: 1px solid var(--line);
  color: var(--ink-faint);
}

/* ---------- Tree ---------- */
.tree { flex: 1; overflow-y: auto; padding: 2px 2px 8px; }
/* tree uses the site-wide thin scrollbar (see assets/css/styles.css) */

.children { overflow: hidden; }
.children[hidden] { display: none; }

.row {
  display: flex; align-items: center; gap: 6px;
  height: var(--row-h);
  padding-right: 8px;
  padding-left: calc(8px + var(--depth, 0) * 16px);
  border-radius: 8px;
  cursor: default;
  user-select: none;
  position: relative;
  transition: background .22s var(--ease), box-shadow .22s var(--ease);
}
/* premium hover: mint wash + hairline ring + accent bar sweeping in on the left.
   scoped with :not(.drop-before) — the drag indicator owns ::before there */
.row:not(.drop-before)::before {
  content: "";
  position: absolute; left: 2px; top: 20%; bottom: 20%;
  width: 2.5px; border-radius: 3px;
  background: var(--green-300);
  opacity: 0; transform: scaleY(0.3);
  transition: opacity .22s var(--ease), transform .25s var(--ease);
}
.row:hover {
  background: var(--mint);
  box-shadow: inset 0 0 0 1px rgba(207,227,214,0.7);
}
.row:hover::before { opacity: 1; transform: scaleY(1); }
.row.is-selected::before { opacity: 1; transform: scaleY(1); background: var(--accent); }
.row.is-selected { background: var(--accent-soft); }
.row.is-selected .row__name { color: var(--accent); font-weight: 600; }

.row__chev {
  width: 16px; height: 16px; flex: none;
  display: grid; place-items: center;
  color: var(--ink-faint);
  transition: transform .15s var(--ease);
}
.row__chev svg { width: 11px; height: 11px; }
.row.is-open > .row__chev { transform: rotate(90deg); }
.row__chev--spacer { visibility: hidden; }

.row__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

.row__ic { width: 16px; height: 16px; flex: none; color: var(--ink-faint); display: grid; place-items: center; }
.row__ic svg { width: 14px; height: 14px; }

.row__name {
  flex: 1; min-width: 0;
  font-size: 0.9rem; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row--class > .row__name { font-weight: 600; }
.row__code {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em;
  color: var(--ink-faint); text-transform: uppercase;
  flex: none;
}

.row__add {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center;
  border-radius: 6px;
  color: var(--ink-faint);
  opacity: 0; transition: opacity .12s var(--ease), background .12s var(--ease);
}
.row__add svg { width: 13px; height: 13px; }
.row:hover .row__add { opacity: 1; }
.row__add:hover { background: var(--mint); color: var(--green-700); }

/* inline rename input */
.row__edit {
  flex: 1; min-width: 0;
  font-family: var(--font-sans); font-size: 0.9rem; color: var(--ink);
  background: var(--paper-3);
  border: 1px solid var(--green-300);
  border-radius: 6px;
  padding: 2px 6px;
  outline: none;
}

/* drag + drop affordances */
.row.dragging { opacity: 0.4; }
.row.drop-inside { background: var(--mint); box-shadow: inset 0 0 0 1.5px var(--mint-line); }
.row.drop-before::before,
.row.drop-after::after {
  content: ""; position: absolute; left: 8px; right: 8px; height: 2px;
  background: var(--green); border-radius: 2px;
}
.row.drop-before::before { top: -1px; }
.row.drop-after::after { bottom: -1px; }

/* New class button */
.newclass {
  display: flex; align-items: center; gap: 8px;
  margin: 6px 4px 2px; padding: 9px 11px;
  border-radius: 10px;
  border: 1px dashed var(--line);
  color: var(--ink-soft);
  font-size: 0.88rem; font-weight: 500;
  transition: border-color .16s var(--ease), background .16s var(--ease), color .16s var(--ease);
}
.newclass svg { width: 15px; height: 15px; }
.newclass:hover { border-color: var(--green-300); color: var(--green-700); background: var(--mint); }

/* ---------- Profile footer ---------- */
.sb__foot {
  flex: none;
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--line-soft);
}

/* Signed-out: sign-in call-to-action */
.foot-signin {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--mint-line);
  background: linear-gradient(135deg, var(--mint), rgba(232,241,234,0.4));
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.foot-signin:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); border-color: var(--green-300); }
.foot-signin:hover .foot-signin__chev { transform: translateX(3px); }
.foot-signin__ic {
  width: 32px; height: 32px; flex: none;
  border-radius: 9px;
  background: var(--green); color: #fff;
  display: grid; place-items: center;
}
.foot-signin__ic svg { width: 17px; height: 17px; }
.foot-signin__txt { flex: 1; min-width: 0; line-height: 1.25; }
.foot-signin__txt b { display: block; font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.foot-signin__txt span { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); }
.foot-signin__chev { width: 15px; height: 15px; flex: none; color: var(--green-700); transition: transform .25s var(--ease); }
.foot-signin--loading { cursor: wait; pointer-events: none; }
.foot-signin__spinner {
  display: block; width: 15px; height: 15px; border-radius: 50%;
  border: 1.8px solid currentColor; border-right-color: transparent;
  animation: foot-auth-spin .72s linear infinite;
}
@keyframes foot-auth-spin { to { transform: rotate(360deg); } }
.dark .foot-signin { background: rgba(63,167,118,0.12); border-color: rgba(63,167,118,0.3); }
.dark .foot-signin__txt b { color: var(--dark-text); }
.dark .foot-signin__txt span { color: var(--dark-soft); }
.dark .foot-signin__chev { color: var(--glow); }
@media (prefers-reduced-motion: reduce) { .foot-signin__spinner { animation-duration: 1.5s; } }

/* Signed-in: account menu */
.acct-menu {
  position: absolute;
  left: 10px; right: 10px; bottom: calc(100% + 8px);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  padding: 8px;
  z-index: 40;
  animation: acct-pop .18s var(--ease);
}
@keyframes acct-pop { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }
.acct-menu__who { padding: 6px 10px 8px; line-height: 1.3; }
.acct-menu__who b { display: block; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-menu__who span { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); word-break: break-all; }
.acct-menu .menu__item { width: 100%; }
.dark .acct-menu { background: var(--dark-2); border-color: var(--dark-line); }
.dark .acct-menu__who b { color: var(--dark-text); }
.avatar {
  width: 30px; height: 30px; flex: none;
  border-radius: 9px;
  background: var(--green); color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-serif); font-size: 0.9rem; font-weight: 600;
}
.who { flex: 1; min-width: 0; line-height: 1.2; }
.who b { font-size: 0.88rem; font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who span { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); }

/* ---------- Sidebar resize grip ---------- */
.sb__grip { width: 5px; flex: none; cursor: col-resize; margin-left: -3px; z-index: 5; }
.sb__grip:hover { background: linear-gradient(var(--green-300), var(--green-300)) center/1px 100% no-repeat; }

/* ---------- Agent panel ---------- */
.agent { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 2px; }
.agent__ctx {
  display: flex; align-items: center; gap: 8px;
  margin: 2px 2px 8px; padding: 8px 11px;
  border: 1px solid var(--line); border-radius: 10px;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint);
  background: var(--paper-3);
}
.agent__ctx svg { width: 14px; height: 14px; }
.agent__thread { flex: 1; overflow-y: auto; padding: 8px 4px; }
.agent__hello { text-align: center; padding: 24px 12px; }
.agent__spark { font-size: 1.8rem; color: var(--green); }
.agent__title { font-family: var(--font-serif); font-size: 1.15rem; margin-top: 6px; }
.agent__sub { color: var(--ink-soft); font-size: 0.88rem; margin-top: 6px; line-height: 1.5; }
.agent__chips { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.chip {
  padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--paper-3);
  font-size: 0.85rem; color: var(--ink-soft);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.chip:hover { border-color: var(--green-300); background: var(--mint); color: var(--green-700); }
.agent__composer {
  display: flex; align-items: center; gap: 8px;
  padding: 8px; margin: 4px 2px 2px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper-3);
}
.agent__composer input { flex: 1; border: none; outline: none; background: none; font-size: 0.9rem; color: var(--ink); font-family: var(--font-sans); }
.agent__composer button { flex: none; display: grid; place-items: center; cursor: pointer; }
.agent__composer button svg { width: 18px; height: 18px; }
.agent__soon { text-align: center; font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); padding: 6px 0 2px; }

/* ---------- Main workspace ---------- */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.crumb {
  height: 42px; flex: none;
  display: flex; align-items: center; gap: 8px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(251,250,244,0.6);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono); font-size: 12px;
}
.crumb__muted { color: var(--ink-faint); }
.crumb__seg { color: var(--ink-soft); }
.crumb__seg.is-class { color: var(--accent); }
.crumb__sep { color: var(--line); }
.crumb__title { color: var(--ink); font-weight: 500; }
.crumb__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.canvas {
  flex: 1; position: relative; overflow: hidden;
  touch-action: none;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px, 140px 140px, 140px 140px;
}

/* note "page" placeholder shown when a note is open */
.page {
  position: absolute; top: 36px; left: 50%; transform: translateX(-50%);
  width: min(760px, 78%);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 40px 44px;
}
.page h1 { font-family: var(--font-serif); font-size: 1.9rem; font-weight: 500; }
.page__meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); margin-top: 8px; }
.page__body { margin-top: 22px; color: var(--ink-soft); line-height: 1.7; }
.page__body p { margin-bottom: 12px; }
.page__ghost { height: 12px; border-radius: 6px; background: var(--line-soft); margin-bottom: 12px; }
.page__ghost.w70 { width: 70%; } .page__ghost.w90 { width: 90%; } .page__ghost.w50 { width: 50%; }

/* empty state */
.empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px;
}
.empty__mark {
  width: 88px; height: 88px; border-radius: 24px;
  display: grid; place-items: center;
  background: var(--paper-3); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.empty__mark img {
  width: 72px; height: 72px;
  object-fit: contain; display: block;
}
.empty h2 { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 500; margin-top: 22px; }
.empty p { color: var(--ink-soft); margin-top: 8px; max-width: 38ch; }
.empty__btn {
  margin-top: 20px; padding: 11px 20px;
  background: var(--green); color: #fff;
  border-radius: 11px; font-weight: 600; font-size: 0.92rem;
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.empty__btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* ---------- Focus mode ---------- */
.app.is-focus .sb,
.app.is-focus .sb__grip { display: none; }
.app.is-focus .tb__tools .tbtool span { display: none; }

/* ---------- Context menu ---------- */
.ctx {
  position: fixed; z-index: 80;
  min-width: 190px;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 6px;
}
.ctx__item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.88rem; color: var(--ink);
  text-align: left;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.ctx__item svg { width: 15px; height: 15px; color: var(--ink-faint); flex: none; }
#ctx .ctx__item { transition: background .16s var(--ease), color .16s var(--ease), transform .16s var(--ease); }
#ctx .ctx__item:active { transform: scale(.98); }
#ctx .ctx__item:focus-visible { outline: 2px solid var(--accent, var(--green-700)); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
  #ctx, #ctx .ctx__item { animation: none; transition: none; }
  #ctx .ctx__item:active { transform: none; }
}
.ctx__item:hover, .ctx__item:focus-visible { background: var(--mint); color: var(--green-700); }
.ctx__item--danger { color: #b3463c; }
.ctx__item--danger svg { color: #b3463c; }
.ctx__item--danger:hover { background: rgba(179,70,60,0.08); color: #b3463c; }
.ctx__div { height: 1px; background: var(--line-soft); margin: 5px 4px; }
.ctx__swatches { display: flex; gap: 6px; padding: 8px 10px 6px; }
.ctx__swatch {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.08);
  cursor: pointer;
  transition: box-shadow .14s var(--ease), transform .14s var(--ease);
}
.ctx__swatch:hover, .ctx__swatch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--paper-3), 0 0 0 4px var(--green);
  transform: scale(1.08);
}
.ctx__swatch.is-active { box-shadow: 0 0 0 2px var(--paper-3), 0 0 0 4px var(--green); }
/* the "custom color" entry — a calm spectrum drawn from the app's own STEM
   palette (deliberately not a neon rainbow), with a + to dial in any color. */
.ctx__swatch--custom {
  position: relative;
  display: grid; place-items: center;
  color: var(--ink-soft);
  background:
    radial-gradient(circle at center, var(--paper-3) 0 38%, transparent 43%),
    conic-gradient(from 128deg,
      var(--c-rose), var(--c-amber), var(--c-green),
      var(--c-teal), var(--c-sky), var(--c-plum), var(--c-rose));
  border-color: rgba(0,0,0,0.12);
}
.ctx__swatch-ic { width: 10px; height: 10px; pointer-events: none; }
.ctx__swatch-ic--edit { display: none; }
/* a custom color is set: fill with that color and swap the + for an edit
   pencil so it stays obviously clickable — a second click re-opens the picker. */
.ctx__swatch--custom.is-set { background: var(--swatch, var(--c-green)); border-color: rgba(0,0,0,0.2); }
.ctx__swatch--custom.is-set .ctx__swatch-ic--plus { display: none; }
.ctx__swatch--custom.is-set .ctx__swatch-ic--edit {
  display: block; color: #fff; opacity: 0.9;
  filter: drop-shadow(0 0.5px 1.5px rgba(0,0,0,0.6));
  transition: opacity .14s var(--ease), transform .14s var(--ease);
}
.ctx__swatch--custom.is-set:hover .ctx__swatch-ic--edit,
.ctx__swatch--custom.is-set:focus-visible .ctx__swatch-ic--edit { opacity: 1; transform: scale(1.08); }

/* ---------- custom color picker ---------- */
.cpick-back {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  background: rgba(16,32,26,0.30);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .18s var(--ease);
}
.cpick-back.is-in { opacity: 1; }
.cpick {
  width: 312px;
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 18px;
  transform: translateY(8px) scale(0.97);
  transition: transform .22s var(--ease-out-q, var(--ease));
}
.cpick-back.is-in .cpick { transform: none; }
.cpick__head { margin-bottom: 14px; }
.cpick__title { display: block; font-family: var(--font-serif); font-size: 1.08rem; color: var(--ink); letter-spacing: -0.01em; }
.cpick__sub { display: block; font-size: 0.76rem; color: var(--ink-faint); margin-top: 2px; }
.cpick__stage { display: flex; gap: 16px; align-items: stretch; }
.cpick__wheel {
  position: relative; flex: none;
  width: 188px; height: 188px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10), 0 6px 18px -10px rgba(16,40,28,0.4);
  touch-action: none; cursor: crosshair;
}
.cpick__wheel-sat, .cpick__wheel-val { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.cpick__wheel-sat { background: radial-gradient(circle at center, #fff 0%, rgba(255,255,255,0) 70%); }
.cpick__wheel-val { background: #000; opacity: 0; }
.cpick__thumb {
  position: absolute; width: 18px; height: 18px; border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.3);
  pointer-events: none;
}
.cpick__side { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.cpick__preview { flex: 1; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); min-height: 84px; }
.cpick__chip { display: block; width: 100%; height: 100%; }
.cpick__slider {
  position: relative; display: block; height: 16px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
  touch-action: none; cursor: ew-resize;
}
.cpick__knob {
  position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2.5px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.3), 0 2px 5px rgba(0,0,0,0.28);
  pointer-events: none;
}
.cpick__fields { display: flex; gap: 8px; margin: 16px 0 18px; }
.cpick__field { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.cpick__field--hex { flex: 2.2; }
.cpick__field span { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); }
.cpick__field input {
  width: 100%; padding: 7px 8px;
  font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  text-align: center;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.cpick__field input:focus { outline: none; border-color: var(--green-300); box-shadow: 0 0 0 3px var(--mint); }
.cpick__field--hex input { text-align: left; text-transform: uppercase; }
.cpick__rgb::-webkit-outer-spin-button, .cpick__rgb::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cpick__rgb { -moz-appearance: textfield; }
.cpick__foot { display: flex; gap: 8px; justify-content: flex-end; }
.cpick__btn {
  padding: 9px 16px; border-radius: 10px; font-size: 0.86rem; font-weight: 500;
  border: 1px solid transparent; cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.cpick__cancel { color: var(--ink-soft); border-color: var(--line); background: var(--paper-3); }
.cpick__cancel:hover { background: var(--paper); border-color: var(--ink-faint); }
.cpick__ok { color: #fff; background: var(--green); box-shadow: 0 3px 10px rgba(28,124,84,0.22); }
.cpick__ok:hover { background: var(--green-700); }

/* dark mode */
.dark .cpick { background: var(--dark-2); border-color: var(--dark-line); }
.dark .cpick__title { color: var(--dark-text); }
.dark .cpick__sub { color: var(--dark-soft); }
.dark .cpick__preview { border-color: var(--dark-line); }
.dark .cpick__field span { color: var(--dark-soft); }
.dark .cpick__field input { background: rgba(255,255,255,0.04); border-color: var(--dark-line); color: var(--dark-text); }
.dark .cpick__field input:focus { border-color: var(--glow); box-shadow: 0 0 0 3px rgba(63,167,118,0.18); }
.dark .cpick__cancel { background: transparent; color: var(--dark-soft); border-color: var(--dark-line); }
.dark .cpick__cancel:hover { background: rgba(255,255,255,0.05); color: var(--dark-text); }
.dark .cpick__ok { background: var(--glow); color: #0e1a14; }
.dark .cpick__ok:hover { background: #58c08c; }
.dark .ctx__swatch--custom { color: var(--dark-text); background:
    radial-gradient(circle at center, var(--dark-2) 0 38%, transparent 43%),
    conic-gradient(from 128deg,
      var(--c-rose), var(--c-amber), var(--c-green),
      var(--c-teal), var(--c-sky), var(--c-plum), var(--c-rose)); }
.dark .ctx__swatch--custom.is-set { background: var(--swatch, var(--c-green)); }

/* ---------- Command palette ---------- */
.cmdk {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(16,32,26,0.28);
  backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 14vh;
}
.cmdk__box {
  width: min(560px, 92vw);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.cmdk__search {
  display: flex; align-items: center; gap: 11px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.cmdk__search svg { width: 18px; height: 18px; color: var(--ink-faint); }
.cmdk__search input { flex: 1; border: none; outline: none; background: none; font-size: 1.02rem; color: var(--ink); font-family: var(--font-sans); }
.cmdk__search kbd { font-family: var(--font-mono); font-size: 10px; padding: 3px 7px; border-radius: 6px; background: var(--paper-2); border: 1px solid var(--line); color: var(--ink-faint); }
.cmdk__list { max-height: 46vh; overflow-y: auto; padding: 8px; }
.cmdk__group { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); padding: 8px 10px 4px; }
.cmdk__opt {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 10px 11px;
  border-radius: 9px;
  text-align: left; color: var(--ink);
}
.cmdk__opt svg { width: 16px; height: 16px; color: var(--ink-faint); flex: none; }
.cmdk__opt .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cmdk__opt small { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); }
.cmdk__opt.is-active, .cmdk__opt:hover { background: var(--mint); }
.cmdk__empty { padding: 24px; text-align: center; color: var(--ink-faint); font-size: 0.9rem; }

/* ---------- Toasts ---------- */
.toasts { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 110; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 14px 11px 16px;
  background: var(--ink); color: var(--paper-2);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  font-size: 0.88rem;
  animation: toast-in .24s var(--ease);
}
.toast button {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--green-300);
  padding: 2px 4px;
}
.toast button:hover { color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   DARK MODE  (uses landing --dark spotlight tokens)
   ============================================================ */
.app-body.dark { background: var(--dark); }
.dark .tb { background: rgba(14,26,20,0.8); border-bottom-color: var(--dark-line); }
.dark .tb__brand { color: var(--dark-text); }
.dark .tb__div { background: var(--dark-line); }
.dark .tbtool, .dark .tbicon { color: var(--dark-soft); }
.dark .tbtool:hover, .dark .tbicon:hover {
  background: color-mix(in srgb, var(--glow) 14%, transparent);
  color: var(--glow);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--glow) 28%, transparent), 0 3px 10px rgba(0,0,0,0.25);
}
.dark .tbicon.is-on { background: color-mix(in srgb, var(--glow) 16%, transparent); color: var(--glow); }
.dark .zoom__val, .dark .who span, .dark .row__code, .dark .agent__soon { color: var(--dark-soft); }

.dark .sb { background: rgba(18,35,24,0.7); border-right-color: var(--dark-line); }
.dark .sb__tab { color: var(--dark-soft); }
.dark .sb__tab:hover { background: rgba(63,167,118,0.12); color: var(--glow); box-shadow: inset 0 0 0 1px rgba(63,167,118,0.25); }
.dark .sb__tab.is-active { background: rgba(63,167,118,0.16); color: var(--glow); }
.dark .search { background: rgba(255,255,255,0.04); border-color: var(--dark-line); color: var(--dark-soft); }
.dark .search kbd, .dark .cmdk__search kbd { background: rgba(255,255,255,0.06); border-color: var(--dark-line); color: var(--dark-soft); }

.dark .row { color: var(--dark-text); }
.dark .row:hover { background: rgba(63,167,118,0.12); box-shadow: inset 0 0 0 1px rgba(63,167,118,0.18); }
.dark .row:not(.drop-before)::before { background: var(--glow); }
.dark .row.is-selected { background: rgba(63,167,118,0.16); }
.dark .row__name { color: var(--dark-text); }
.dark .row__chev, .dark .row__ic, .dark .row__add { color: var(--dark-soft); }
.dark .row__edit { background: var(--dark-2); color: var(--dark-text); border-color: var(--glow); }
.dark .newclass { border-color: var(--dark-line); color: var(--dark-soft); }
.dark .newclass:hover { background: rgba(63,167,118,0.12); color: var(--glow); border-color: rgba(63,167,118,0.4); }
.dark .sb__foot { border-top-color: var(--dark-line); }
.dark .who b { color: var(--dark-text); }

.dark .crumb { background: rgba(14,26,20,0.6); border-bottom-color: var(--dark-line); }
.dark .crumb__seg { color: var(--dark-soft); }
.dark .crumb__title { color: var(--dark-text); }
/* keep the same 4-layer grid structure as light mode — canvas.js writes a
   4-entry background-size inline for pan/zoom, so the layer counts must match.
   The green glow lives on ::before, out of reach of those inline styles. */
.dark .canvas {
  background-color: var(--dark);
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
}
.canvas::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.dark .canvas::before { background: radial-gradient(900px 500px at 80% -10%, rgba(63,167,118,0.12), transparent 60%); }
.dark .page { background: var(--dark-2); border-color: var(--dark-line); }
.dark .page h1 { color: var(--dark-text); }
.dark .page__body { color: var(--dark-soft); }
.dark .page__ghost { background: rgba(255,255,255,0.06); }
.dark .empty h2 { color: var(--dark-text); }
.dark .empty p { color: var(--dark-soft); }
.dark .empty__mark { background: var(--dark-2); border-color: var(--dark-line); }

.dark .menu, .dark .ctx, .dark .cmdk__box, .dark .agent__ctx, .dark .agent__composer, .dark .chip {
  background: var(--dark-2); border-color: var(--dark-line); color: var(--dark-text);
}
.dark .menu__item, .dark .ctx__item, .dark .cmdk__opt { color: var(--dark-text); }
.dark .menu__item:hover, .dark .ctx__item:hover { background: rgba(63,167,118,0.14); color: var(--glow); }
.dark .menu__item--danger:hover, .dark .ctx__item--danger:hover { background: rgba(214,69,69,0.12); color: #e07a70; }
.dark .cmdk__opt.is-active, .dark .cmdk__opt:hover { background: rgba(63,167,118,0.16); }
.dark .menu__label, .dark .cmdk__group, .dark .cmdk__opt small, .dark .cmdk__empty, .dark .agent__sub, .dark .chip { color: var(--dark-soft); }
.dark .menu__div, .dark .ctx__div, .dark .cmdk__search, .dark .cmdk__list { border-color: var(--dark-line); }
.dark .agent__title, .dark .page h1 { color: var(--dark-text); }
.dark .toast { background: #050d0a; }

/* theme icon swap */
.ic-sun { display: none; }
.dark .ic-moon { display: none; }
.dark .ic-sun { display: block; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ============================================================
   CANVAS — infinite workspace + boxes
   ============================================================ */
.canvas.tool-place { cursor: crosshair; }
.canvas.tool-select { cursor: grab; }
.canvas.is-panning { cursor: grabbing !important; }
.canvas.tool-select .box__graph-canvas { cursor: move; }
.canvas.is-panning .box,
.canvas.is-panning .box__graph-canvas { cursor: grabbing !important; }

#box-layer { position: absolute; top: 0; left: 0; transform-origin: 0 0; }

.box {
  position: absolute;
  box-sizing: border-box;
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  user-select: none;
  cursor: default;
  display: flex;
  overflow: visible;
  transition: box-shadow .15s var(--ease);
}
.box:hover { box-shadow: var(--shadow-md); }
.box.is-selected { box-shadow: 0 0 0 2px var(--accent), var(--shadow-md); }
/* Agent-attached: same 2px ring geometry as a selected box, but the ring is a
   live green→teal→blue gradient that flows — only while the agent is connected.
   Built as a masked pseudo-ring (box-shadow can't carry a gradient) so the
   color can animate. The resting gradient still reads green, so an attached box
   matches the selected look even with motion off. */
.box.is-attached { box-shadow: 0 6px 22px -12px rgba(48,131,145,0.40), var(--shadow-md); }
.box.is-attached::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 14px;          /* box radius (12) + 2px ring offset */
  padding: 2px;                 /* ring thickness, matches selected's 2px */
  background: linear-gradient(
    105deg,
    #287e68 0%,
    #319b7c 28%,
    #347f91 50%,
    #3a8fb0 64%,
    #319b7c 82%,
    #287e68 100%
  );
  background-size: 220% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: access-color-flow 7s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 3;
}
/* grouped (linked) boxes move together — the dashed tie only shows on hover so
   a full AI solution isn't covered in outlines; selection/attach rings still win */
.box.is-grouped:hover:not(.is-selected):not(.is-attached) { outline: 1.5px dashed var(--c-sky); outline-offset: 3px; }
.box.editing { cursor: text; }
/* hovered/selected/editing boxes float above siblings so resize handles
   and toolbars are never buried under an overlapping box (!important
   beats the per-box inline z-index from the model) */
.box:hover { z-index: 9000 !important; }
.box.is-selected, .box.editing { z-index: 9500 !important; }

/* text box — hugs its content like the math box; lines wrap only on Enter */
.box--text { overflow: visible; }
.box__content {
  flex: none;
  width: calc(100% / var(--box-text-stretch, 1));
  height: calc(100% / var(--box-text-stretch-y, 1));
  transform: scale(var(--box-text-stretch, 1), var(--box-text-stretch-y, 1));
  transform-origin: 0 0;
  box-sizing: border-box;
  padding: 12px 14px;
  outline: none; overflow: hidden;
  white-space: pre;
  font-family: var(--box-text-font-family, var(--font-sans));
  font-size: var(--box-text-font-size, 15px); line-height: 1.5; color: var(--ink);
  border-radius: 12px;
}
.box__content[contenteditable="true"] { cursor: text; user-select: text; }
.box__content:empty::before { content: attr(data-placeholder); color: var(--ink-faint); }
/* Headings and lists are allowed inside a text box (sanitizeHtml keeps them,
   the formatting bar writes them). A text box hugs its content, so the UA's
   ~0.83em heading margins become dead space inside the box rather than
   separation between blocks — the phone's reader trims them the same way. */
.box__content h1, .box__content h2, .box__content h3, .box__content h4 { margin: 0 0 5px; line-height: 1.25; }
.box__content > :last-child { margin-bottom: 0; }
.box__content ul, .box__content ol { margin: 5px 0; padding-left: 22px; }
.box__content p { margin: 0 0 5px; }

/* floating formatting toolbar (shown while editing a text box) */
.textbar {
  position: absolute; bottom: 100%; left: 0;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 2px;
  padding: 5px 7px;
  background: rgba(251,250,244,0.96);
  backdrop-filter: saturate(1.3) blur(10px);
  -webkit-backdrop-filter: saturate(1.3) blur(10px);
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  cursor: default;
  user-select: none;
  z-index: 6;
}
.textbar__btn {
  min-width: 26px; height: 26px; padding: 0 6px;
  display: inline-grid; place-items: center;
  border-radius: 7px;
  font-family: var(--font-sans); font-size: 13.5px; color: var(--ink-soft);
  transition: background .12s var(--ease), color .12s var(--ease);
}
.textbar__move {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border-radius: 7px;
  color: var(--ink-faint);
  cursor: grab;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.textbar__move:hover { background: var(--paper-2); color: var(--accent); }
.textbar__move:active { cursor: grabbing; background: var(--accent-soft); color: var(--accent); }
.textbar__move svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.textbar__btn:hover { background: var(--paper-2); color: var(--ink); }
.textbar__btn.is-on { background: var(--accent-soft); color: var(--accent); }
.textbar__btn.textbar__swatch {
  min-width: 0; width: 17px; height: 17px; padding: 0; margin: 0 1.5px;
  border-radius: 50%;
  background: var(--sw);
  border: 1px solid rgba(0,0,0,0.14);
}
.textbar__btn.textbar__swatch:hover { transform: scale(1.18); }
.textbar__btn.textbar__swatch--text { border-radius: 5px; }
.textbar__btn.textbar__clear { font-size: 11px; color: var(--ink-faint); }
.textbar__div { width: 1px; height: 18px; background: var(--line); margin: 0 4px; flex: none; }
.textbar__font {
  height: 26px; padding: 0 4px;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft);
  background: var(--paper-3); border: 1px solid var(--line); border-radius: 7px;
  outline: none; cursor: pointer;
}
.textbar__size {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft);
  min-width: 24px; text-align: center;
}
.dark .textbar { background: rgba(14,26,20,0.94); border-color: var(--dark-line); }
.dark .textbar__btn { color: var(--dark-soft); }
.dark .textbar__move { color: var(--dark-soft); }
.dark .textbar__move:hover { background: rgba(255,255,255,0.07); color: var(--glow); }
.dark .textbar__btn:hover { background: rgba(255,255,255,0.07); color: var(--dark-text); }
.dark .textbar__btn.is-on { background: rgba(63,167,118,0.16); color: var(--glow); }
.dark .textbar__font { background: rgba(255,255,255,0.05); border-color: var(--dark-line); color: var(--dark-soft); }
.dark .textbar__size { color: var(--dark-soft); }
.dark .textbar__div { background: var(--dark-line); }

/* math box */
.box--math { align-items: center; justify-content: center; }
.box__math-display,
.box__math-edit {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 8px 12px;
  overflow: visible;
  color: var(--ink);
  white-space: nowrap;
  font-size: var(--box-math-font-size, 18px);
}
.box__math-display .katex,
.box__math-display .katex-display { font-size: inherit; }
.box__math-display .katex-display { margin: 0; }
.box__math-display .box__ph { font-family: var(--font-mono); font-size: inherit; color: var(--ink-faint); }
.box__math-edit { min-height: 40px; border: none; outline: none; background: transparent; padding: 6px 10px; font-family: var(--font-mono); color: var(--ink); }
math-field.box__math-edit { --hue: 158; }

/* graph box — overflow stays visible so resize handles aren't clipped;
   the canvas rounds its own bottom corners instead */
.box--graph { flex-direction: column; overflow: visible; }
.box__graph-head {
  flex: none; display: flex; align-items: center; gap: 6px;
  padding: 7px 9px; border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint);
}
.box__graph-head .g-math {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; min-height: 22px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--paper-2); color: var(--ink);
  padding: 2px 6px; cursor: text; overflow: hidden;
}
.box__graph-head .g-math__display { white-space: nowrap; }
.box__graph-head .g-math__display .katex { font-size: inherit; }
.box__graph-head .g-math__display .box__ph { font-family: var(--font-mono); color: var(--ink-faint); }
.box__graph-head .g-math__edit {
  font-size: 12px; min-height: 0; border: none; outline: none;
  background: transparent; padding: 0; width: 100%;
  font-family: var(--font-mono); color: var(--ink);
}
math-field.g-math__edit { --hue: 158; min-width: 60px; }
.box__graph-head .g-fn { flex: 1; min-width: 0; }
.box__graph-head .g-range { display: inline-flex; align-items: center; gap: 2px; }
.box__graph-head .g-min, .box__graph-head .g-max { min-width: 34px; max-width: 120px; }
.box__graph-head .g-math.is-invalid {
  border-color: #c65a50;
  box-shadow: 0 0 0 2px rgba(198,90,80,.12);
}
.box__graph-head .g-math.is-invalid .g-math__display { color: #a43f36; }
.box__graph-canvas { flex: 1; width: 100%; display: block; touch-action: none; border-radius: 0 0 12px 12px; }

/* resize handles */
.box__handle { position: absolute; width: 9px; height: 9px; background: var(--paper-3); border: 1.5px solid var(--accent); border-radius: 2px; opacity: 0; transition: opacity .12s var(--ease); z-index: 2; }
.box:hover .box__handle, .box.is-selected .box__handle { opacity: 1; }
.box__handle--nw { top: -5px; left: -5px; cursor: nwse-resize; }
.box__handle--n  { top: -5px; left: 50%; margin-left: -4px; cursor: ns-resize; }
.box__handle--ne { top: -5px; right: -5px; cursor: nesw-resize; }
.box__handle--e  { top: 50%; right: -5px; margin-top: -4px; cursor: ew-resize; }
.box__handle--se { bottom: -5px; right: -5px; cursor: nwse-resize; }
.box__handle--s  { bottom: -5px; left: 50%; margin-left: -4px; cursor: ns-resize; }
.box__handle--sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
.box__handle--w  { top: 50%; left: -5px; margin-top: -4px; cursor: ew-resize; }

/* marquee */
.marquee { position: absolute; z-index: 30; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 3px; pointer-events: none; }

/* ---------- smart alignment guides (snap.js) ---------- */
#snap-guides { position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: visible; pointer-events: none; z-index: 9999; }
.snap-guide { position: absolute; background: var(--accent); border-radius: 1px; opacity: 0; transition: opacity .08s linear; }
.snap-guide.is-on { opacity: .9; }
.snap-guide--gap { opacity: 0; }
.snap-guide--gap.is-on { opacity: .55; }
.snap-pill {
  position: absolute;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: 600 10px/1.2 var(--font-sans);
  white-space: nowrap;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .08s linear;
}
.snap-pill.is-on { opacity: 1; }

/* ============================================================
   SYNC CHIP
   ============================================================ */
.sync-chip { display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; height: 26px; border-radius: 999px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); }
.sync-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); }
.sync-chip[data-state="saving"] i { background: var(--amber); }
.sync-chip[data-state="saved"] i { background: var(--green); }
.sync-chip[data-state="local"] i { background: var(--ink-faint); }
.sync-chip[data-state="error"] i { background: #b3463c; }

/* ============================================================
   AGENT — attached chips, context preview, messages
   ============================================================ */
.agent__attached { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 2px 8px; }
.agent__none { font-size: 0.82rem; color: var(--ink-faint); line-height: 1.5; }
.agent-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper-3); font-size: 0.8rem; color: var(--ink); max-width: 100%; }
.agent-chip i { font-style: normal; font-family: var(--font-mono); color: var(--green-700); flex: none; }
.agent-chip span { display: inline-flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; min-width: 0; line-height: 1.2; }
.agent-chip .katex { font-size: 0.95em; line-height: 1; color: inherit; display: inline-flex; align-items: center; vertical-align: middle; }
.agent-chip .katex-display { margin: 0; display: inline-flex; }
.agent-chip .katex-html { display: inline-flex; align-items: center; white-space: nowrap; }
.agent-chip .katex .base { display: inline-flex; align-items: center; white-space: nowrap; margin-top: 0; margin-bottom: 0; }
.agent-chip button { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-faint); font-size: 13px; line-height: 1; }
.agent-chip button:hover { background: var(--paper-2); color: var(--ink); }

.agent__ctxrow { display: flex; justify-content: flex-end; padding: 0 2px 6px; }
.agent__ctxtoggle { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green-700); padding: 2px 4px; }
.agent__ctxtoggle:hover { color: var(--ink); }
.agent__pre { margin: 0 2px 8px; padding: 10px 12px; background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: 10px; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: var(--ink-soft); white-space: pre-wrap; max-height: 160px; overflow: auto; }

.agent-msg { padding: 8px 2px; }
.agent-msg__role { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 4px; }
.agent-msg__body { font-size: 0.9rem; line-height: 1.55; color: var(--ink); white-space: pre-wrap; }
.agent-msg--user .agent-msg__body { color: var(--ink); }
.agent-msg--model .agent-msg__body { color: var(--ink-soft); }

/* ---------- dark mode for canvas + boxes + agent ---------- */
.dark .box { background: var(--dark-2); border-color: var(--dark-line); }
.dark .box__content, .dark .box__math-display, .dark .box__math-edit, .dark .agent-msg__body { color: var(--dark-text); }
.dark .box__content:empty::before, .dark .box__math-display .box__ph { color: var(--dark-soft); }
.dark .box__graph-head { border-bottom-color: var(--dark-line); color: var(--dark-soft); }
.dark .box__graph-head .g-math { background: rgba(255,255,255,0.05); border-color: var(--dark-line); color: var(--dark-text); }
.dark .box__graph-head .g-math__edit { color: var(--dark-text); }
.dark .box__graph-head .g-math__display .box__ph { color: var(--dark-soft); }
.dark .box__graph-head .g-math.is-invalid { border-color: #df796e; box-shadow: 0 0 0 2px rgba(223,121,110,.16); }
.dark .box__graph-head .g-math.is-invalid .g-math__display { color: #f0a49c; }
.dark .box__handle { background: var(--dark-2); }
.dark .agent-chip { background: var(--dark-2); border-color: var(--dark-line); color: var(--dark-text); }
.dark .agent-chip i { color: var(--glow); }
.dark .agent-chip .katex { color: var(--dark-text); }
.dark .agent__pre { background: rgba(255,255,255,0.04); border-color: var(--dark-line); color: var(--dark-soft); }
.dark .agent__none, .dark .agent-msg__role { color: var(--dark-soft); }
.dark .sync-chip { color: var(--dark-soft); }

/* ============================================================
   UI SCALE — larger, more legible chrome (~1.4x)
   ============================================================ */
:root { --tb-h: 64px; --row-h: 40px; }

.tb { gap: 16px; padding: 0 18px; }
.tb__brand { font-size: 1.42rem; }
.tbtool { height: 40px; padding: 0 12px; font-size: 12.5px; gap: 8px; }
.tbtool svg { width: 21px; height: 21px; }
.tbtool.is-active { padding: 0 11px; }
.tbicon { width: 40px; height: 40px; }
.tbicon svg { width: 21px; height: 21px; }
.zoom__val { font-size: 14px; min-width: 48px; }
.sync-chip { height: 30px; font-size: 12px; }
.sync-chip i { width: 8px; height: 8px; }

.sb__tab { height: 38px; font-size: 12.5px; }
.sb__tab svg { width: 17px; height: 17px; }
.search { height: 44px; }
.search__ph { font-size: 1rem; }
.search svg { width: 18px; height: 18px; }
.search kbd { font-size: 11px; }

.row { padding-left: calc(11px + var(--depth, 0) * 18px); gap: 8px; }
.row__name { font-size: 1.05rem; }
.row__chev svg { width: 13px; height: 13px; }
.row__ic svg { width: 17px; height: 17px; }
.row__dot { width: 10px; height: 10px; }
.row__code { font-size: 11px; }
.row__add { width: 26px; height: 26px; }
.row__add svg { width: 15px; height: 15px; }

.newclass { font-size: 1rem; padding: 11px 13px; }
.newclass svg { width: 18px; height: 18px; }

.avatar { width: 36px; height: 36px; font-size: 1.05rem; }
.who b { font-size: 1rem; }
.who span { font-size: 11.5px; }

.crumb { height: 52px; font-size: 14px; padding: 0 22px; }
.crumb__dot { width: 9px; height: 9px; }

.cmdk__opt { font-size: 1.02rem; }
.ctx__item, .menu__item { font-size: 0.98rem; }

/* ---------- library multi-select ---------- */
.row.is-multisel { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 1px var(--accent-line); }
.dark .row.is-multisel { background: rgba(63,167,118,0.2); }

/* ---------- confirm modal ---------- */
.confirm { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; background: rgba(16,32,26,0.32); backdrop-filter: blur(3px); }
.confirm__box { width: min(420px, 92vw); background: var(--paper-3); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 26px 26px 20px; }
.confirm__box h3 { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 500; color: var(--ink); }
.confirm__box p { color: var(--ink-soft); margin-top: 8px; font-size: 0.98rem; line-height: 1.5; }
.confirm__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.confirm__btn { padding: 10px 18px; border-radius: 10px; font-weight: 600; font-size: 0.95rem; border: 1px solid var(--line); background: var(--paper-2); color: var(--ink); transition: background .15s var(--ease); }
.confirm__btn:hover { background: var(--paper); }
.confirm__btn--danger { background: #b3463c; border-color: #b3463c; color: #fff; }
.confirm__btn--danger:hover { background: #9d3a31; }
.dark .confirm__box { background: var(--dark-2); border-color: var(--dark-line); }
.dark .confirm__box h3 { color: var(--dark-text); }
.dark .confirm__box p { color: var(--dark-soft); }
.dark .confirm__btn { background: rgba(255,255,255,0.05); border-color: var(--dark-line); color: var(--dark-text); }

/* ============================================================
   BOX TOOLS — code, table, ink (draw/eraser), image
   ============================================================ */

/* tool cursors; draw + eraser are modal, boxes don't grab the pointer */
.canvas.tool-draw { cursor: crosshair; }
.canvas.tool-eraser { cursor: none; }
.canvas.tool-draw .box, .canvas.tool-eraser .box { pointer-events: none; }
.canvas.tool-draw .box__handle, .canvas.tool-eraser .box__handle { opacity: 0 !important; }

/* theme-aware stroke palette (ink flips with the theme) */
.app { --stroke-ink: #22302a; --stroke-green: var(--c-green); --stroke-sky: var(--c-sky); --stroke-amber: var(--c-amber); --stroke-rose: var(--c-rose); --stroke-plum: var(--c-plum); }
.dark .app { --stroke-ink: #e9efeb; --stroke-green: #46b283; --stroke-sky: #6aa7d8; --stroke-amber: #d9a850; --stroke-rose: #cd7d97; --stroke-plum: #b08ab5; }

/* ---------- pen options bar (visible while Draw is active) ---------- */
.drawbar {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px;
  padding: 6px 9px;
  background: rgba(251,250,244,0.92);
  backdrop-filter: saturate(1.3) blur(10px);
  -webkit-backdrop-filter: saturate(1.3) blur(10px);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  z-index: 32;
}
.drawbar__swatch { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; }
.drawbar__swatch i { width: 16px; height: 16px; border-radius: 50%; display: block; border: 1px solid rgba(0,0,0,0.12); }
.drawbar__swatch:hover { background: var(--paper-2); }
.drawbar__swatch.is-active { box-shadow: inset 0 0 0 1.5px var(--accent); }
.drawbar__width { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: var(--ink-soft); }
.drawbar__width i { background: currentColor; border-radius: 50%; display: block; }
.drawbar__width:hover { background: var(--paper-2); color: var(--ink); }
.drawbar__width.is-active { background: var(--accent-soft); color: var(--accent); }
.drawbar__div { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }

/* ---------- eraser cursor ring ---------- */
.erasering {
  position: absolute; width: 32px; height: 32px; margin: -16px 0 0 -16px;
  border: 1.5px solid var(--ink-soft); border-radius: 50%;
  background: color-mix(in srgb, var(--paper) 35%, transparent);
  pointer-events: none; z-index: 31;
}

/* "about to erase" preview */
.box.will-delete { opacity: 0.45; outline: 1.5px dashed #c2483d; outline-offset: 3px; }
.box--ink.will-delete path { stroke: #c2483d !important; }

/* ---------- ink (stroke) box ---------- */
.box--ink, .dark .box--ink { background: transparent; border: none; box-shadow: none; border-radius: 4px; overflow: visible; }
.box--ink:hover { box-shadow: none; }
.box--ink.is-selected { box-shadow: none; outline: 1.5px dashed var(--accent); outline-offset: 4px; }
.box__ink-svg { width: 100%; height: 100%; display: block; overflow: visible; pointer-events: none; }

/* ---------- code box ---------- */
/* overflow stays visible so resize handles aren't clipped; the body/console
   round + clip their own bottom corners instead */
.box--code { flex-direction: column; overflow: visible; }
.box__code-head {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--paper-2);
  border-radius: 12px 12px 0 0;
  cursor: grab;
}
.cb-lang {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft);
  background: var(--paper-3); border: 1px solid var(--line); border-radius: 7px;
  padding: 3px 6px; outline: none; cursor: pointer;
}
.cb-status { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); white-space: nowrap; }
.cb-status.is-err { color: #b3463c; }
.cb-spacer { flex: 1; }
.cb-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 9px; border-radius: 7px;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft);
  border: 1px solid transparent;
  transition: background .14s var(--ease), color .14s var(--ease);
  white-space: nowrap;
}
.cb-btn svg { width: 13px; height: 13px; }
.cb-btn:hover { background: var(--paper-3); color: var(--ink); }
.cb-run { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.cb-run:hover { background: var(--accent-soft); color: var(--accent); filter: brightness(0.96); }
.cb-run:disabled { opacity: 0.4; cursor: not-allowed; filter: none; }

.box__code-body { flex: 1; display: flex; min-height: 0; border-radius: 0 0 12px 12px; overflow: hidden; }
/* when the console is open below the body, the console owns the bottom corners */
.box__code-body:has(+ .box__code-out:not([hidden])) { border-radius: 0; }
.box__code-gutter {
  flex: none; min-width: 34px; overflow: hidden;
  padding: 10px 8px 10px 0; text-align: right;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55;
  color: var(--ink-faint); white-space: pre;
  background: var(--paper-2); border-right: 1px solid var(--line-soft);
  user-select: none;
}
.box__code-wrap { flex: 1; position: relative; min-width: 0; }
.box__code-hl, .box__code-ta {
  position: absolute; inset: 0; margin: 0; padding: 10px 12px;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55;
  tab-size: 2; white-space: pre; overflow: auto;
  border: none; background: transparent;
}
.box__code-hl { pointer-events: none; overflow: hidden; color: var(--ink); }
.box__code-hl code { font: inherit; }
.box__code-ta { resize: none; outline: none; color: transparent; caret-color: var(--ink); user-select: text; }
.box__code-ta::placeholder { color: var(--ink-faint); }
.box__code-ta::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); color: transparent; }

.tok-kw { color: #7a557e; }
.tok-str { color: #1c7c54; }
.tok-num { color: #2f6e9e; }
.tok-fn { color: #9c742a; }
.tok-lit { color: #2c8079; }
.tok-com { color: var(--ink-faint); font-style: italic; }

.box__code-out {
  flex: none; max-height: 46%;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line-soft);
  background: var(--paper-2);
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}
.box__code-outhead {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 4px 10px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint);
}
.box__code-outhead button { padding: 2px 6px; border-radius: 6px; font: inherit; color: var(--ink-faint); letter-spacing: inherit; text-transform: inherit; }
.box__code-outhead button:hover { background: var(--paper-3); color: var(--ink); }
.box__code-lines { flex: 1; overflow: auto; padding: 0 10px 8px; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; user-select: text; cursor: text; }
.cb-line { white-space: pre-wrap; word-break: break-word; }
.cb-line--warn { color: #8a6a1f; }
.cb-line--error { color: #b3463c; }
.cb-line--info { color: #2f6e9e; }

/* ---------- table box ---------- */
/* overflow stays visible so resize handles aren't clipped; the scroll area
   rounds + clips its own bottom corners instead */
.box--table { flex-direction: column; overflow: visible; }
.box__table-head {
  flex: none; display: flex; align-items: center; gap: 3px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--paper-2);
  border-radius: 12px 12px 0 0;
  cursor: grab;
}
.tbx-size { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); margin-right: 2px; white-space: nowrap; }
.tbx-div { width: 1px; height: 16px; background: var(--line-soft); margin: 0 3px; }
.tbx-btn {
  height: 24px; padding: 0 7px; border-radius: 6px;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-soft);
  transition: background .14s var(--ease), color .14s var(--ease);
  white-space: nowrap;
}
.tbx-btn:hover { background: var(--paper-3); color: var(--ink); }
.tbx-btn.is-on { background: var(--accent-soft); color: var(--accent); }
.box__table-scroll { flex: 1; overflow: auto; padding: 9px; border-radius: 0 0 12px 12px; }
.box__table { border-collapse: collapse; width: 100%; }
.box__table td {
  border: 1px solid var(--line); min-width: 76px; height: 30px;
  padding: 4px 8px; font-size: 13.5px; color: var(--ink);
  outline: none; user-select: text; cursor: text; vertical-align: middle;
  background: var(--paper-3);
}
.box__table td:focus { box-shadow: inset 0 0 0 1.5px var(--accent); }
.box__table.has-header tr:first-child td { background: var(--paper-2); font-weight: 600; }
.box__table td.is-formula { color: var(--accent); font-family: var(--font-mono); font-size: 12.5px; }
.box__table td.is-err { color: #b3463c; font-family: var(--font-mono); font-size: 12.5px; }

/* ---------- image box ---------- */
/* overflow visible so resize handles aren't clipped; the img rounds itself */
.box--image { overflow: visible; align-items: center; justify-content: center; }
.box__img { width: 100%; height: 100%; object-fit: fill; display: block; pointer-events: none; border-radius: 11px; }
.box--image > .box__ink-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; border-radius: 11px; }
.image-tools { display: none; position: absolute; bottom: calc(100% + 12px); left: 0; gap: 4px; padding: 4px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; white-space: nowrap; }
.box--image.is-selected .image-tools { display: flex; }
.image-tools button { padding: 6px 9px; border: 0; border-radius: 5px; background: var(--mint); color: inherit; font: inherit; font-size: 12px; cursor: pointer; }
.canvas.tool-draw .image-tools, .canvas.tool-eraser .image-tools { display: none; }
.box__img-ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 100%; padding: 16px; text-align: center;
  color: var(--ink-faint); font-size: 0.85rem;
}
.box__img-ph svg { width: 30px; height: 30px; }

/* ---------- dark mode for the new pieces ---------- */
.dark .drawbar { background: rgba(14,26,20,0.92); border-color: var(--dark-line); }
.dark .drawbar__swatch:hover, .dark .drawbar__width:hover { background: rgba(255,255,255,0.07); }
.dark .drawbar__width { color: var(--dark-soft); }
.dark .drawbar__width:hover { color: var(--dark-text); }
.dark .erasering { border-color: var(--dark-soft); background: rgba(255,255,255,0.06); }

.dark .box__code-head, .dark .box__table-head, .dark .box__code-out, .dark .box__code-gutter {
  background: rgba(255,255,255,0.04); border-color: var(--dark-line);
}
.dark .cb-lang { background: rgba(255,255,255,0.05); border-color: var(--dark-line); color: var(--dark-soft); }
.dark .cb-btn { color: var(--dark-soft); }
.dark .cb-btn:hover { background: rgba(255,255,255,0.07); color: var(--dark-text); }
.dark .cb-run { background: rgba(63,167,118,0.16); color: var(--glow); border-color: rgba(63,167,118,0.35); }
.dark .box__code-hl { color: var(--dark-text); }
.dark .box__code-ta { caret-color: var(--dark-text); }
.dark .tok-kw { color: #b08ab5; }
.dark .tok-str { color: #46b283; }
.dark .tok-num { color: #6aa7d8; }
.dark .tok-fn { color: #d9a850; }
.dark .tok-lit { color: #5fb3aa; }
.dark .tok-com { color: var(--dark-soft); }
.dark .cb-line--warn { color: #d9a850; }
.dark .cb-line--error { color: #e07b6f; }
.dark .cb-line--info { color: #6aa7d8; }
.dark .box__code-outhead button:hover { background: rgba(255,255,255,0.07); color: var(--dark-text); }

.dark .tbx-btn { color: var(--dark-soft); }
.dark .tbx-btn:hover { background: rgba(255,255,255,0.07); color: var(--dark-text); }
.dark .tbx-btn.is-on { background: rgba(63,167,118,0.16); color: var(--glow); }
.dark .box__table td { background: var(--dark-2); border-color: var(--dark-line); color: var(--dark-text); }
.dark .box__table.has-header tr:first-child td { background: rgba(255,255,255,0.05); }
.dark .box__table-scroll, .dark .box__table-head { border-color: var(--dark-line); }

.dark .box__img-ph { color: var(--dark-soft); }

/* ============================================================
   LEMMA AI — premium agent panel
   ============================================================ */

/* ---------- header ---------- */
.agent__head { display: flex; align-items: center; gap: 10px; padding: 6px 4px 12px; }
.agent__brand { font-family: var(--font-serif); font-size: 1.28rem; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.agent__brand em { color: var(--green); font-style: italic; }
.agent__brandspark { color: var(--green); display: inline-block; animation: lm-spark 3.2s var(--ease) infinite; }
@keyframes lm-spark { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; } 50% { transform: scale(1.18) rotate(12deg); opacity: 0.82; } }
.agent__plan {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  padding: 4px 8px; border-radius: 999px;
  color: var(--green-700); background: var(--mint); border: 1px solid var(--mint-line);
}
.agent__headbtn {
  margin-left: auto; width: 32px; height: 32px;
  display: grid; place-items: center; border-radius: 8px;
  color: var(--ink-faint);
  transition: background .15s var(--ease), color .15s var(--ease), transform .25s var(--ease);
}
.agent__headbtn svg { width: 16px; height: 16px; }
.agent__headbtn:hover { background: var(--mint); color: var(--green-700); transform: rotate(90deg); }

/* ---------- mode switch (sliding thumb) ---------- */
.agent__modes {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin: 0 2px 12px; padding: 4px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper-2);
}
.agent__modethumb {
  position: absolute; top: 3px; bottom: 3px;
  left: calc(3px + var(--mode-i, 1) * ((100% - 6px) / 3));
  width: calc((100% - 6px) / 3);
  background: var(--paper-3);
  border: 1px solid var(--mint-line);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  transition: left .28s cubic-bezier(.34,1.3,.4,1);
}
.agent__modes button {
  position: relative; z-index: 1;
  height: 32px; border-radius: 9px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-faint);
  transition: color .2s var(--ease);
}
.agent__modes button.is-active { color: var(--green-700); }
.agent__modes button:hover:not(.is-active) { color: var(--ink-soft); }

/* ---------- attached chips ---------- */
.agent__attached.is-empty { display: none; }
.agent-chip {
  cursor: pointer;
  transition: border-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
  animation: lm-chip-in .25s var(--ease);
}
@keyframes lm-chip-in { from { opacity: 0; transform: translateY(4px) scale(0.95); } to { opacity: 1; transform: none; } }
.agent-chip:hover { border-color: var(--green-300); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.agent-chip em {
  font-style: normal; width: 16px; height: 16px;
  display: grid; place-items: center; border-radius: 50%;
  color: var(--ink-faint); font-size: 13px; line-height: 1;
}
.agent-chip em:hover { background: rgba(179,70,60,0.12); color: #b3463c; }
.agent__ctxline { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-faint); }
.agent__ctxrow { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 8px; gap: 8px; }

/* ---------- thread + messages ---------- */
.agent__sub--pulse { animation: lm-pulse .5s var(--ease) 2; }
@keyframes lm-pulse { 50% { color: var(--green-700); } }

.agent-msg { padding: 9px 2px; animation: lm-msg-in .3s var(--ease); }
@keyframes lm-msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* column, not row — otherwise the file chips stretch beside the bubble */
.agent-msg--user { display: flex; flex-direction: column; align-items: flex-end; }
.agent-msg__bubble {
  max-width: 88%;
  padding: 11px 14px;
  background: linear-gradient(170deg, var(--mint), color-mix(in srgb, var(--mint) 62%, var(--paper-3)));
  border: 1px solid var(--mint-line);
  border-radius: 16px 16px 5px 16px;
  box-shadow: var(--shadow-sm);
  font-size: 0.98rem; line-height: 1.55; color: var(--ink);
  white-space: pre-wrap; word-break: break-word;
}

.agent-msg__head { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.agent-msg__spark { color: var(--green); font-size: 0.95rem; }
.agent-msg--assistant.is-live .agent-msg__spark { animation: lm-spark 1.4s var(--ease) infinite; }
.agent-msg__who { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft); }
.agent-msg__model { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); padding: 3px 8px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line-soft); }
.agent-msg__model:empty { display: none; }

.agent-msg__body { font-size: 0.98rem; line-height: 1.62; color: var(--ink); word-break: break-word; }
.agent-msg__body p { margin: 0 0 8px; }
.agent-msg__body p:last-child { margin-bottom: 0; }
.agent-msg__body ul { margin: 2px 0 8px; padding-left: 18px; }
.agent-msg__body li { margin: 3px 0; }
.agent-msg__body h4 { font-family: var(--font-serif); font-size: 1.08rem; font-weight: 600; margin: 10px 0 6px; }
.agent-msg__body .katex { font-size: 1.06em; }
.agent-msg__body .katex-display { margin: 8px 0; overflow-x: auto; overflow-y: hidden; }
.lm-code { margin: 8px 0; padding: 10px 12px; background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: 9px; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; overflow-x: auto; white-space: pre; }
.lm-inline { font-family: var(--font-mono); font-size: 0.86em; background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: 5px; padding: 1px 5px; }

.lm-caret { display: inline-block; width: 7px; height: 14px; margin-left: 2px; vertical-align: -2px; background: var(--green); border-radius: 2px; animation: lm-caret 0.9s steps(2) infinite; }
@keyframes lm-caret { 50% { opacity: 0; } }

/* reasoning drawer */
.agent-msg__think { margin: 0 0 7px; border: 1px solid var(--line-soft); border-radius: 9px; background: var(--paper-2); overflow: hidden; }
.agent-msg__think summary { cursor: pointer; padding: 7px 11px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint); list-style: none; display: flex; align-items: center; gap: 6px; }
.agent-msg__think summary::before { content: "\25B8"; transition: transform .2s var(--ease); }
.agent-msg__think[open] summary::before { transform: rotate(90deg); }
.agent-msg__think summary::-webkit-details-marker { display: none; }
.agent-msg__think-body { padding: 2px 11px 10px; font-size: 0.86rem; line-height: 1.58; color: var(--ink-faint); white-space: pre-wrap; max-height: 180px; overflow-y: auto; }

/* live status line (shimmer) */
.agent-msg__status { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }
.agent-msg__status i { width: 13px; height: 13px; flex: none; border-radius: 50%; border: 1.5px solid var(--mint-line); border-top-color: var(--green); animation: lm-spin .8s linear infinite; }
.agent-msg__status span {
  background: linear-gradient(90deg, var(--ink-faint) 30%, var(--green-700) 50%, var(--ink-faint) 70%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: lm-shimmer 1.6s linear infinite;
}
.agent-msg__status[data-kind="build"] i { border-top-color: var(--c-amber, #b9892f); }
@keyframes lm-spin { to { transform: rotate(360deg); } }
@keyframes lm-shimmer { to { background-position: -200% 0; } }

/* ---------- action card (review + verified results) ---------- */
.agent-msg__card:empty { display: none; }
.agent-card {
  margin-top: 10px; padding: 12px 14px;
  border: 1px solid var(--mint-line);
  border-radius: 12px;
  background: linear-gradient(160deg, var(--mint), rgba(232,241,234,0.25));
  animation: lm-card-in .35s var(--ease);
}
@keyframes lm-card-in { from { opacity: 0; transform: translateY(5px) scale(0.99); } to { opacity: 1; transform: none; } }
.agent-card--warn { background: rgba(185,137,47,0.08); border-color: rgba(185,137,47,0.3); display: flex; flex-direction: column; gap: 8px; }
.agent-card--warn span { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.52; }

.agent-card__steps { display: flex; flex-direction: column; gap: 4px; margin-bottom: 9px; }
.agent-card__step { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); animation: lm-step-in .3s var(--ease) backwards; }
.agent-card__step:nth-child(2) { animation-delay: .08s; }
.agent-card__step:nth-child(3) { animation-delay: .16s; }
@keyframes lm-step-in { from { opacity: 0; transform: translateX(-5px); } to { opacity: 1; transform: none; } }
.agent-card__step i { width: 13px; height: 13px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 8px; font-style: normal; }
.agent-card__step.is-ok i::before { content: "\2713"; color: #fff; }
.agent-card__step.is-ok i { background: var(--green); }
.agent-card__step.is-fix i::before { content: "\2726"; color: #fff; font-size: 7px; }
.agent-card__step.is-fix i { background: var(--c-sky, #2f6e9e); }
.agent-card__step.is-warn i::before { content: "!"; color: #fff; font-weight: 700; }
.agent-card__step.is-warn i { background: var(--c-amber, #b9892f); }
.agent-card__step.is-off i::before { content: "\2013"; color: #fff; }
.agent-card__step.is-off i { background: var(--ink-faint); }

.agent-card__result { display: flex; align-items: center; gap: 8px; font-size: 0.94rem; color: var(--green-700); }
.agent-card__check {
  width: 19px; height: 19px; flex: none; border-radius: 50%;
  background: var(--green); color: #fff;
  display: grid; place-items: center; font-size: 10px;
  animation: lm-check-pop .45s cubic-bezier(.34,1.56,.5,1) backwards;
}
@keyframes lm-check-pop { from { transform: scale(0); } to { transform: scale(1); } }
.agent-card__actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.agent-card__actions:empty { display: none; }
.agent-card__btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px; border-radius: 9px;
  background: var(--green); color: #fff;
  font-size: 0.86rem; font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease);
}
.agent-card__btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); filter: brightness(1.05); }
.agent-card__btn--ghost { background: var(--paper-3); color: var(--ink-soft); border: 1px solid var(--line); }
.agent-card__btn--ghost:hover { color: var(--ink); }
.agent-card__note { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); }

/* message tools (read aloud / copy / retry) */
.agent-msg__tools { display: flex; align-items: center; gap: 4px; margin-top: 6px; opacity: .68; transition: opacity .18s var(--ease); }
.agent-msg--assistant:hover .agent-msg__tools, .agent-msg__tools:focus-within { opacity: 1; }
.agent-msg__tools button {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  padding: 4px 9px; border-radius: 7px; color: var(--ink-faint);
  transition: background .14s var(--ease), color .14s var(--ease);
}
.agent-msg__tools button:hover { background: var(--paper-2); color: var(--ink); }
.agent-msg__tools .lemma-speech { width: 28px; height: 28px; padding: 5px; }
.lemma-speech svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lemma-speech .speech-fill { fill: currentColor; stroke: none; }
.lemma-speech[data-speech-state="loading"] svg { animation: lm-speech-pulse .8s var(--ease) infinite alternate; }
.lemma-speech[data-speech-state="playing"] { color: var(--green-700); background: var(--mint); }
@keyframes lm-speech-pulse { to { opacity: .35; transform: scale(.9); } }

/* ---------- slash menu ---------- */
.agent__slash {
  margin: 0 2px 6px; padding: 6px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper-3); box-shadow: var(--shadow-md);
  animation: lm-card-in .2s var(--ease);
}
.agent-slash__opt {
  display: flex; align-items: baseline; gap: 9px;
  width: 100%; padding: 9px 11px; border-radius: 8px;
  text-align: left;
  transition: background .12s var(--ease);
}
.agent-slash__opt b { font-family: var(--font-mono); font-size: 12px; color: var(--green-700); }
.agent-slash__opt span { font-size: 0.86rem; color: var(--ink-faint); }
.agent-slash__opt:hover, .agent-slash__opt.is-active { background: var(--mint); }

/* ---------- composer ---------- */
.agent__composer { align-items: flex-end; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.agent__composer:focus-within { border-color: var(--green-300); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 10%, transparent); }
.agent__composer textarea {
  flex: 1; border: none; outline: none; background: none; resize: none;
  font-size: 0.98rem; color: var(--ink); font-family: var(--font-sans);
  line-height: 1.5; max-height: 156px; padding: 8px 2px;
}
.agent__composer textarea::placeholder { color: var(--ink-faint); }
#agent-send.is-ready:hover, #agent-send.is-stop:hover { transform: translateY(-1px); }
#agent-send.is-stop { background: #b3463c; animation: lm-stop-pulse 1.6s var(--ease) infinite; }
@keyframes lm-stop-pulse { 50% { box-shadow: 0 0 0 5px rgba(179,70,60,0.15); } }
.agent__attachbtn {
  position: relative; width: 38px; height: 38px; flex: none;
  display: grid; place-items: center; border-radius: 9px;
  color: var(--ink-faint);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.agent__attachbtn svg { width: 17px; height: 17px; }
.agent__attachbtn span {
  position: absolute; top: -3px; right: -3px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--green); color: #fff;
  font-family: var(--font-mono); font-size: 9px; line-height: 16px; text-align: center;
}
.agent__attachbtn:hover { background: var(--mint); color: var(--green-700); }

/* ---------- file uploads: tray + chips ---------- */
.agent__files { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 2px 8px; }
.agent-fchip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 7px 4px 5px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper-3);
  box-shadow: var(--shadow-sm);
  font-size: 0.8rem; font-weight: 500; color: var(--ink); max-width: 100%;
  animation: lm-fchip-in .25s var(--ease) backwards;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.agent-fchip:hover { border-color: var(--green-300); }
@keyframes lm-fchip-in { from { opacity: 0; transform: translateY(4px) scale(0.96); } }
.agent-fchip i {
  font-style: normal; font-family: var(--font-mono); font-size: 11px;
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center; border-radius: 7px;
  color: var(--green-700); background: var(--mint); border: 1px solid var(--mint-line);
}
.agent-fchip__thumb {
  width: 26px; height: 26px; flex: none; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--mint-line);
}
.agent-fchip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-fchip em {
  font-style: normal; font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.04em; white-space: nowrap;
  padding: 2px 7px; border-radius: 999px;
  color: var(--green-700); background: var(--mint); border: 1px solid var(--mint-line);
}
.agent-fchip.is-reading em { color: var(--green-700); animation: lm-fchip-pulse 1.1s ease-in-out infinite; }
@keyframes lm-fchip-pulse { 50% { opacity: 0.45; } }
.agent-fchip.is-error { border-color: rgba(179,70,60,0.4); }
.agent-fchip.is-error em { color: #b3463c; background: rgba(179,70,60,0.08); border-color: rgba(179,70,60,0.3); }
.agent-fchip button {
  width: 16px; height: 16px; display: grid; place-items: center;
  border-radius: 50%; color: var(--ink-faint); font-size: 13px; line-height: 1;
}
.agent-fchip button:hover { background: rgba(179,70,60,0.12); color: #b3463c; }
.dark .agent-fchip { background: var(--dark-2); border-color: var(--dark-line); color: var(--dark-text); }
.dark .agent-fchip i, .dark .agent-fchip em { color: var(--glow); background: rgba(63,167,118,0.14); border-color: rgba(63,167,118,0.32); }
.dark .agent-fchip__thumb { border-color: var(--dark-line); }

/* drag & drop highlight over the agent panel */
[data-panel="agent"].is-dropping { outline: 2px dashed var(--green); outline-offset: -6px; border-radius: 12px; }
[data-panel="agent"].is-dropping .agent__composer { border-color: var(--green-300); }

/* image previews above a sent user bubble */
.agent-msg__imgrow { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; margin-bottom: 6px; }
.agent-msg__imgcard {
  margin: 0; width: 138px;
  border: 1px solid var(--line); border-radius: 13px;
  background: var(--paper-3); overflow: hidden;
  box-shadow: var(--shadow-sm);
  animation: lm-fchip-in .3s var(--ease) backwards;
}
.agent-msg__imgcard img { display: block; width: 100%; height: 92px; object-fit: cover; }
.agent-msg__imgcard figcaption {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 5px 6px 5px 9px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-soft);
  overflow: hidden; white-space: nowrap;
}
.agent-msg__imgcard figcaption span { overflow: hidden; text-overflow: ellipsis; }
.agent-msg__imgcard figcaption em {
  font-style: normal; font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase;
  flex: none; padding: 1px 6px; border-radius: 999px;
  color: var(--green-700); background: var(--mint); border: 1px solid var(--mint-line);
}

/* file chips above a sent user bubble (non-image, or after a reload) */
.agent-msg__filerow { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; margin-bottom: 5px; }
.agent-msg__file {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 4px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper-3);
  box-shadow: var(--shadow-sm);
  font-size: 0.76rem; color: var(--ink-soft);
}
.agent-msg__file i {
  font-style: normal; font-family: var(--font-mono); font-size: 10px;
  width: 18px; height: 18px; display: grid; place-items: center;
  border-radius: 6px; color: var(--green-700); background: var(--mint); border: 1px solid var(--mint-line);
}
.agent-msg__file em { font-style: normal; font-family: var(--font-mono); font-size: 9px; color: var(--ink-faint); }
.dark .agent-msg__file { background: var(--dark-2); border-color: var(--dark-line); color: var(--dark-text); }
.dark .agent-msg__file i { color: var(--glow); background: rgba(63,167,118,0.14); border-color: rgba(63,167,118,0.32); }
.dark .agent-msg__imgcard { background: var(--dark-2); border-color: var(--dark-line); }
.dark .agent-msg__imgcard figcaption { color: var(--dark-soft); border-top-color: var(--dark-line); }
.dark .agent-msg__imgcard figcaption em { color: var(--glow); background: rgba(63,167,118,0.14); border-color: rgba(63,167,118,0.32); }

.agent__foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 6px 4px; gap: 10px; }
.agent__foothint { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); }
.agent__reviewtoggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint); padding: 4px 8px; border-radius: 8px;
  transition: color .15s var(--ease);
}
.agent__reviewtoggle i { width: 24px; height: 13px; border-radius: 999px; background: var(--line); position: relative; transition: background .2s var(--ease); }
.agent__reviewtoggle i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 9px; height: 9px; border-radius: 50%; background: #fff; transition: left .2s var(--ease); }
.agent__reviewtoggle.is-on { color: var(--green-700); }
.agent__reviewtoggle.is-on i { background: var(--green); }
.agent__reviewtoggle.is-on i::after { left: 13px; }

/* auto-attach: a sliding switch in the context row — when on, boxes you
   select on the canvas mirror into Lemma's attached context automatically */
.agent__autoattach {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint); padding: 4px 6px; border-radius: 8px; cursor: pointer;
  background: transparent; border: none; white-space: nowrap;
  transition: color .15s var(--ease);
}
.agent__autoattach:hover { color: var(--ink); }
.agent__autoattach i { width: 22px; height: 12px; border-radius: 999px; background: var(--line); position: relative; flex: none; transition: background .2s var(--ease); }
.agent__autoattach i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: #fff; transition: left .2s var(--ease); }
.agent__autoattach.is-on { color: var(--green-700); }
.agent__autoattach.is-on:hover { color: var(--green-700); }
.agent__autoattach.is-on i { background: var(--green); }
.agent__autoattach.is-on i::after { left: 12px; }
.dark .agent__autoattach { color: var(--dark-soft); }
.dark .agent__autoattach.is-on { color: var(--glow); }

/* ---------- canvas: AI box spawn + Lemma-AI reveal ring ---------- */
.box--spawn { animation: lm-box-spawn .52s cubic-bezier(.22,1.2,.36,1) backwards; }
@keyframes lm-box-spawn {
  from { opacity: 0; transform: scale(0.9) translateY(8px); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}

/* The Lemma-AI "I just placed this" highlight — the agent's own signature, not
   the plain solid green selection ring. A luminous emerald→glow→teal gradient
   outline blooms in, shimmers as it flows, then fades out, backed by a soft
   outer glow on the box itself. Built as a masked pseudo-ring (same trick as
   .is-attached) because a box-shadow can't carry a gradient. */
.box--flash { animation: lm-ai-bloom 3s var(--ease) forwards; }
@keyframes lm-ai-bloom {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--glow) 0%, transparent), var(--shadow-md); }
  10%  { box-shadow: 0 0 30px 3px color-mix(in srgb, var(--glow) 48%, transparent), var(--shadow-md); }
  68%  { box-shadow: 0 0 22px 2px color-mix(in srgb, var(--glow) 32%, transparent), var(--shadow-md); }
  100% { box-shadow: var(--shadow-sm); }
}
.box--flash::before {
  content: "";
  position: absolute;
  inset: -2.5px;
  border-radius: 14.5px;          /* box radius (12) + ring offset */
  padding: 2.5px;                 /* ring thickness */
  background: linear-gradient(
    115deg,
    var(--glow) 0%,
    #25b083 20%,
    #5ad7ad 38%,
    #34c2cf 56%,
    #25b083 76%,
    var(--glow) 100%
  );
  background-size: 200% 100%;   /* one tile = 200% so the flow loop is seamless */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 4;
  animation: lm-ai-ring 3s var(--ease) forwards, lm-ai-flow 1.5s linear infinite;
}
@keyframes lm-ai-ring {
  0%   { opacity: 0; transform: scale(1.05); }
  14%  { opacity: 1; transform: scale(1); }
  68%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes lm-ai-flow {
  from { background-position: 0% 50%; }
  to   { background-position: 200% 50%; }   /* shift exactly one tile — no skip at the loop point */
}
/* respect reduced motion: keep the gentle bloom, drop the moving shimmer */
@media (prefers-reduced-motion: reduce) {
  .box--flash::before { animation: lm-ai-ring 3s var(--ease) forwards; }
}

/* ---------- dark mode ---------- */
.dark .agent__brand { color: var(--dark-text); }
.dark .agent__brand em, .dark .agent__brandspark, .dark .agent-msg__spark { color: var(--glow); }
.dark .agent__plan { background: rgba(63,167,118,0.14); border-color: rgba(63,167,118,0.32); color: var(--glow); }
.dark .agent__headbtn:hover { background: rgba(63,167,118,0.14); color: var(--glow); }
.dark .agent__modes { background: rgba(255,255,255,0.04); border-color: var(--dark-line); }
.dark .agent__modethumb { background: var(--dark-2); border-color: rgba(63,167,118,0.35); }
.dark .agent__modes button { color: var(--dark-soft); }
.dark .agent__modes button.is-active { color: var(--glow); }
.dark .agent-msg__bubble { background: rgba(63,167,118,0.13); border-color: rgba(63,167,118,0.28); color: var(--dark-text); }
.dark .agent-msg__who { color: var(--dark-soft); }
.dark .agent-msg__model { background: rgba(255,255,255,0.05); border-color: var(--dark-line); color: var(--dark-soft); }
.dark .agent-msg__body { color: var(--dark-text); }
.dark .lm-code, .dark .lm-inline { background: rgba(255,255,255,0.05); border-color: var(--dark-line); color: var(--dark-text); }
.dark .lm-caret { background: var(--glow); }
.dark .agent-msg__think { background: rgba(255,255,255,0.04); border-color: var(--dark-line); }
.dark .agent-msg__think-body, .dark .agent-msg__think summary { color: var(--dark-soft); }
.dark .agent-card { background: rgba(63,167,118,0.1); border-color: rgba(63,167,118,0.3); }
.dark .agent-card--warn { background: rgba(217,168,80,0.1); border-color: rgba(217,168,80,0.3); }
.dark .agent-card--warn span, .dark .agent-card__step { color: var(--dark-soft); }
.dark .agent-card__result { color: var(--glow); }
.dark .agent-card__btn--ghost { background: var(--dark-2); border-color: var(--dark-line); color: var(--dark-soft); }
.dark .agent-msg__tools button { color: var(--dark-soft); }
.dark .agent-msg__tools button:hover { background: rgba(255,255,255,0.06); color: var(--dark-text); }
.dark .agent__slash { background: var(--dark-2); border-color: var(--dark-line); }
.dark .agent-slash__opt b { color: var(--glow); }
.dark .agent-slash__opt span { color: var(--dark-soft); }
.dark .agent-slash__opt:hover, .dark .agent-slash__opt.is-active { background: rgba(63,167,118,0.14); }
.dark .agent__composer textarea { color: var(--dark-text); }
.dark .agent__composer:focus-within { border-color: rgba(63,167,118,0.45); box-shadow: 0 0 0 3px rgba(63,167,118,0.1); }
.dark .agent__attachbtn:hover { background: rgba(63,167,118,0.14); color: var(--glow); }
.dark .agent__ctxline, .dark .agent__foothint, .dark .agent__reviewtoggle { color: var(--dark-soft); }
.dark .agent__reviewtoggle.is-on { color: var(--glow); }

/* slash menu floats above the composer instead of squeezing the thread */
.agent { position: relative; }
.agent__slash { position: absolute; left: 4px; right: 4px; bottom: 96px; z-index: 12; max-height: 280px; overflow-y: auto; }

/* dark mode: active tool button used the light mint and glowed white */
.dark .tbtool.is-active { background: color-mix(in srgb, var(--glow) 16%, transparent); color: var(--glow); border-color: color-mix(in srgb, var(--glow) 35%, transparent); }

/* ============================================================
   LEMMA — chat history panel + guest gates
   ============================================================ */
.agent__history {
  position: absolute; top: 44px; left: 8px; right: 8px; z-index: 40;
  background: var(--paper, #fff); border: 1px solid var(--line, #e3ece6);
  border-radius: 14px; box-shadow: 0 18px 44px rgba(20, 60, 40, 0.16);
  overflow: hidden; animation: lm-history-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
@keyframes lm-history-in {
  from { opacity: 0; transform: translateY(-7px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.agent__historyhead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px 8px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft);
  border-bottom: 1px solid var(--line, #e3ece6);
}
.agent__historyhead em { font-style: normal; color: var(--ink-faint); letter-spacing: 0.04em; text-transform: none; }
.agent__historylist { max-height: 264px; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.agent-hrow {
  position: relative; display: flex; flex-direction: column; gap: 2px; width: 100%;
  text-align: left; padding: 8px 30px 8px 10px; border: 0; border-radius: 10px;
  background: transparent; cursor: pointer; font: inherit; color: inherit;
  transition: background 0.14s ease;
}
.agent-hrow:hover { background: var(--mint, #eaf6ef); }
.agent-hrow.is-active { background: var(--mint, #eaf6ef); box-shadow: inset 0 0 0 1px rgba(28, 124, 84, 0.22); }
.agent-hrow.is-active .agent-hrow__title { color: var(--green-700, #1c7c54); }
.agent-hrow__title {
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agent-hrow__meta { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-faint); }
.agent-hrow__del {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; display: grid; place-items: center;
  font-style: normal; font-size: 13px; line-height: 1; border-radius: 6px;
  color: var(--ink-faint); opacity: 0; transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.agent-hrow:hover .agent-hrow__del { opacity: 1; }
.agent-hrow__del:hover { background: rgba(214, 69, 69, 0.12); color: #c2403f; }
.agent__historyempty {
  padding: 26px 14px 24px; text-align: center;
  font-size: 12px; line-height: 1.7; color: var(--ink-faint);
}
.agent__historyfoot {
  padding: 8px 14px 10px; border-top: 1px dashed var(--line, #e3ece6);
  font-size: 10.5px; color: var(--ink-faint);
}
.agent__historyfoot a { color: var(--green-700, #1c7c54); font-weight: 600; }
.agent__headbtn.is-open { background: var(--mint); color: var(--green-700); }
#agent-history-btn:hover { transform: none; }

/* locked Max mode for guests */
.agent__modes [data-mode].is-locked { opacity: 0.55; }
.agent__modes [data-mode].is-locked::after {
  content: "✦"; font-size: 8px; margin-left: 4px; vertical-align: 2px;
  color: var(--green-700, #1c7c54);
}

/* inline login gate in the thread */
.agent-gate {
  margin: 10px 4px; padding: 16px 14px 14px; text-align: center;
  border: 1px dashed rgba(28, 124, 84, 0.4); border-radius: 14px;
  background: linear-gradient(180deg, rgba(234, 246, 239, 0.7), rgba(234, 246, 239, 0.25));
  animation: lm-history-in 0.25s ease;
}
.agent-gate__lock { font-size: 17px; display: block; margin-bottom: 6px; }
.agent-gate p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); }
.agent-gate__row { display: flex; gap: 8px; justify-content: center; }
.agent-gate__btn {
  display: inline-block; padding: 7px 18px; border-radius: 999px;
  background: var(--green-700, #1c7c54); color: #fff !important;
  font-size: 12px; font-weight: 700; text-decoration: none;
  box-shadow: 0 6px 16px rgba(28, 124, 84, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.agent-gate__btn:hover { transform: translateY(-1px); box-shadow: 0 9px 20px rgba(28, 124, 84, 0.38); }
.agent-gate__dismiss {
  padding: 7px 12px; border: 0; background: transparent; border-radius: 999px;
  font-size: 12px; color: var(--ink-faint); cursor: pointer; font-family: inherit;
}
.agent-gate__dismiss:hover { color: var(--ink-soft); background: rgba(0, 0, 0, 0.04); }

/* guest counter in the footer */
.agent__foothint.is-guest b { color: var(--green-700, #1c7c54); }
.agent__foota { color: var(--green-700, #1c7c54); font-weight: 700; text-decoration: none; }
.agent__foota:hover { text-decoration: underline; }

/* dark theme */
.dark .agent__history { background: var(--dark-2, #15211b); border-color: var(--dark-line, #24372d); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5); }
.dark .agent__historyhead { border-color: var(--dark-line, #24372d); color: var(--dark-soft); }
.dark .agent-hrow:hover, .dark .agent-hrow.is-active { background: rgba(63, 167, 118, 0.12); }
.dark .agent-hrow.is-active { box-shadow: inset 0 0 0 1px rgba(63, 167, 118, 0.3); }
.dark .agent-hrow__title { color: var(--dark-text, #e6f0ea); }
.dark .agent-hrow.is-active .agent-hrow__title { color: var(--glow, #6fe3a5); }
.dark .agent__historyfoot { border-color: var(--dark-line, #24372d); }
.dark .agent__historyfoot a, .dark .agent__foothint.is-guest b, .dark .agent__foota,
.dark .agent__modes [data-mode].is-locked::after { color: var(--glow, #6fe3a5); }
.dark .agent__headbtn.is-open { background: rgba(63, 167, 118, 0.14); color: var(--glow); }
.dark .agent-gate { border-color: rgba(63, 167, 118, 0.35); background: linear-gradient(180deg, rgba(63, 167, 118, 0.1), rgba(63, 167, 118, 0.03)); }
.dark .agent-gate p { color: var(--dark-soft); }
.dark .agent-gate__btn { background: var(--glow, #6fe3a5); color: #0d1712 !important; box-shadow: 0 6px 16px rgba(63, 167, 118, 0.25); }
.dark .agent-gate__dismiss:hover { background: rgba(255, 255, 255, 0.06); }

/* ============================================================
   LEMMA AI panel cleanup
   ============================================================ */
.sb__panel[data-panel="agent"],
.agent,
.agent__thread,
.agent__attached,
.agent__ctxrow,
.agent__composer {
  min-width: 0;
}

.sb__panel[data-panel="agent"] {
  /* never a scroll container — only the thread scrolls. overflow-x: hidden
     alone forces overflow-y to compute to auto, which grew a phantom second
     scrollbar that scrolled the whole panel into empty space. clip also
     blocks programmatic/focus scrolling that could leave the panel stuck
     half-scrolled (hidden still allows scroll offsets). */
  overflow: hidden;
  overflow: clip;
  padding-top: 6px;
}

.agent {
  padding: 2px;
  gap: 10px;
  font-size: 1.02rem;
}

.agent__head {
  min-width: 0;
  gap: 10px;
  padding: 6px 4px 12px;
}

.agent__brand {
  min-width: 0;
  flex: 1;
  white-space: nowrap;
  font-size: 1.28rem;
}

.agent__headbtn {
  margin-left: 0;
  flex: none;
  width: 32px;
  height: 32px;
}

.agent__headbtn:hover {
  transform: translateY(-1px);
}

#agent-history-btn:hover {
  transform: translateY(-1px);
}

.agent__modes {
  margin: 0 0 12px;
  padding: 4px;
}

.agent__modethumb {
  transition: left .3s cubic-bezier(.22,1,.36,1), border-color .2s var(--ease);
}

.agent__modes:focus-within {
  border-color: var(--green-300);
}

.agent__modes button {
  min-width: 0;
  height: 32px;
  border-radius: 9px;
  font-size: 11.5px;
  letter-spacing: 0.09em;
}

.agent__attached {
  padding-inline: 0;
  /* never let the attached-box chips eat the panel — cap to a few rows, then
     scroll inside this strip so the thread + composer keep their space */
  max-height: 90px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  transition: max-height .3s var(--ease), opacity .22s var(--ease), padding .24s var(--ease), margin .24s var(--ease);
}
.agent__attached::-webkit-scrollbar { width: 6px; }
.agent__attached::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.agent__attached::-webkit-scrollbar-track { background: transparent; }

/* collapsed: the chips slide away, freeing the panel for the thread */
.agent__attached.is-collapsed {
  max-height: 0;
  opacity: 0;
  padding-top: 0; padding-bottom: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}

/* the collapsible "tab" header (chevron + count) */
.agent__ctxhead {
  display: inline-flex; align-items: center; gap: 6px;
  flex: 1; min-width: 0;
  margin: 0; padding: 4px 6px; border: none; background: transparent;
  border-radius: 8px; cursor: pointer; text-align: left;
  color: var(--ink-faint);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.agent__ctxhead:hover { background: var(--mint); color: var(--green-700); }
.agent__ctxhead .agent__ctxline { color: inherit; }
.agent__ctxhead.is-empty { pointer-events: none; padding-left: 2px; }
.agent__ctxhead.is-empty .agent__ctxchev { opacity: 0; width: 0; margin: 0; }
.agent__ctxchev {
  width: 13px; height: 13px; flex: none;
  transition: transform .26s var(--ease), opacity .2s var(--ease), width .2s var(--ease);
}
.agent__ctxhead[aria-expanded="false"] .agent__ctxchev { transform: rotate(-90deg); }
.agent__ctxhead.is-bump { animation: lm-ctx-bump .5s var(--ease); }
@keyframes lm-ctx-bump { 30% { color: var(--green-700); transform: translateX(1px); } }

.agent-chip {
  min-width: 0;
  max-width: 100%;
  font-size: 0.76rem;
  padding: 3px 5px 3px 7px;
}

/* Only the thread flexes; every other strip keeps its natural height so a
   multi-line composer or a full chip strip can't squeeze or clip the input. */
.agent__head,
.agent__modes,
.agent__attached,
.agent__ctxrow,
.agent__pre,
.agent__files,
.agent__composer,
.agent__foot { flex: none; }

.agent__ctxrow {
  gap: 10px;
  padding-inline: 0;
  padding-bottom: 8px;
}

.agent__ctxline,
.agent__ctxtoggle {
  min-width: 0;
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: 0.04em;
}

.agent__ctxline {
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent__ctxtoggle {
  flex: none;
}

.agent__pre {
  margin-inline: 0;
}

.agent__thread {
  padding: 8px 0 4px;
  overflow-x: hidden;
}

.agent__hello {
  width: 100%;
  box-sizing: border-box;
  padding: 28px 10px 22px;
  animation: lm-panel-rise .28s var(--ease) both;
}

.agent__spark {
  display: inline-block;
  will-change: transform;
}

.agent__brandspark,
.agent__spark {
  animation: none;
}

.agent__brandspark.is-wiggling,
.agent__spark.is-wiggling {
  animation: lm-icon-wiggle 1.45s cubic-bezier(.25,.8,.25,1) both;
}

@keyframes lm-icon-wiggle {
  0%, 100% { transform: rotate(0deg) scale(1); opacity: 1; }
  22% { transform: rotate(-5deg) scale(1.025); opacity: 0.96; }
  44% { transform: rotate(4.5deg) scale(1.04); opacity: 1; }
  66% { transform: rotate(-2.5deg) scale(1.025); }
  84% { transform: rotate(1.25deg) scale(1.01); }
}

.agent__sub--typing .lm-caret {
  margin-left: 3px;
}

.agent__sub {
  width: 100%;
  max-width: 30ch;
  margin-inline: auto;
  min-height: 104px;
  max-height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.agent__tiptext {
  display: grid;
  width: 100%;
  grid-template-rows: repeat(4, 1.5em);
  align-content: center;
  line-height: inherit;
}

.agent__tipline {
  display: block;
  min-width: 0;
  white-space: nowrap;
  text-align: center;
}

.agent__chips {
  min-width: 0;
  width: 100%;
  margin-top: 14px;
}

.chip {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition:
    border-color .16s var(--ease),
    background .16s var(--ease),
    color .16s var(--ease),
    transform .16s var(--ease),
    box-shadow .16s var(--ease);
}

.chip:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.agent__slash {
  left: 0;
  right: 0;
  bottom: 102px;
}

.agent__composer {
  margin-inline: 0;
  box-shadow: 0 8px 24px rgba(31,79,55,0.05);
  /* full-width text on top, one consolidated action bar below */
  position: relative;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px 11px 9px;
}

.agent__composer textarea {
  min-width: 0;
  width: 100%;
  flex: none;
  font-size: 0.98rem;
  line-height: 1.5;
  max-height: 156px;
  padding: 4px 4px 0;
}

/* keyboard hint — fades in on focus, stays out of the way otherwise */
.agent__hint {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .03em;
  color: var(--ink-faint); text-align: right;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .2s var(--ease), opacity .2s var(--ease);
}
.agent__composer:focus-within .agent__hint { max-height: 16px; opacity: .7; }

/* the action bar */
.agent__bar { display: flex; align-items: center; gap: 6px; }
.agent__bar-sp { flex: 1; min-width: 0; }

/* quiet tool buttons (+ upload, attach selection) */
.agent__composer .agent__tool {
  width: 32px; height: 32px; border-radius: 9px;
  background: transparent; border: none; color: var(--ink-faint);
  position: relative;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.agent__composer .agent__tool:hover { background: var(--mint); color: var(--green-700); }
.agent__composer .agent__tool svg { width: 18px; height: 18px; }
.agent__composer .agent__tool > span {
  position: absolute; top: -1px; right: -1px;
  min-width: 14px; height: 14px; padding: 0 3px; border-radius: 999px;
  background: var(--green); color: #fff; font-family: var(--font-mono);
  font-size: 9px; line-height: 14px; text-align: center;
}

/* mode chip + popover menu */
.agent__modewrap { position: relative; display: inline-flex; }
.agent__composer .agent__modechip {
  display: inline-flex; align-items: center; gap: 3px;
  height: 30px; padding: 0 8px; border-radius: 8px;
  background: transparent; border: 1px solid var(--line);
  color: var(--ink-soft); font-family: var(--font-sans); font-size: 12.5px;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.agent__composer .agent__modechip:hover { background: var(--mint); border-color: var(--mint-line); color: var(--green-700); }
.agent__composer .agent__modechip svg { width: 13px; height: 13px; color: var(--ink-faint); }
.agent__modemenu {
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 30;
  min-width: 192px; padding: 6px;
  background: var(--paper-3); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow-lg);
  animation: lm-menu-in .16s var(--ease);
}
@keyframes lm-menu-in { from { opacity: 0; transform: translateY(4px); } }
.agent__modemenu .agent__modeopt {
  display: block; width: 100%; text-align: left; place-items: normal;
  padding: 7px 9px; border-radius: 8px; background: transparent; border: none; cursor: pointer;
}
.agent__modemenu .agent__modeopt:hover { background: var(--mint); }
.agent__modemenu .agent__modeopt b { display: block; font-size: 13px; font-weight: 500; color: var(--ink); }
.agent__modemenu .agent__modeopt span { display: block; font-size: 11px; color: var(--ink-faint); margin-top: 1px; }
.agent__modemenu .agent__modeopt.is-active b { color: var(--green-700); }
.agent__modemenu .agent__modeopt.is-locked { opacity: 0.6; }

/* auto-review pill */
.agent__composer .agent__review {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 11px; border-radius: 999px;
  background: transparent; border: 1px solid var(--line); color: var(--ink-faint);
  font-family: var(--font-sans); font-size: 12px;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.agent__composer .agent__review i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); flex: none; transition: background .15s var(--ease); }
.agent__composer .agent__review.is-on { color: var(--green-700); border-color: var(--mint-line); background: var(--mint); }
.agent__composer .agent__review.is-on i { background: var(--green); }

/* send — dormant outline until there's text, then the single green accent */
.agent__composer .agent__send {
  width: 34px; height: 34px; border-radius: 10px;
  background: transparent; border: 1px solid var(--line); color: var(--ink-faint);
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .15s var(--ease);
}
.agent__composer .agent__send svg { width: 18px; height: 18px; }
.agent__composer .agent__send.is-ready { background: var(--green); border-color: var(--green); color: #fff; }
.agent__composer .agent__send.is-ready:hover { transform: translateY(-1px); }
.agent__composer .agent__send.is-stop { background: #b3463c; border-color: #b3463c; color: #fff; }

.agent__foot {
  min-width: 0;
  gap: 10px;
  padding-inline: 0;
  padding-top: 8px;
}

.agent__reviewtoggle {
  flex: none;
  padding: 4px 8px;
  font-size: 10.5px;
  border-radius: 8px;
}

.agent__foothint {
  min-width: 0;
  text-align: right;
  line-height: 1.35;
  font-size: 10px;
}

/* JS-driven tooltip (single element on <body> — never clipped by panels) */
.tipbox {
  position: fixed;
  z-index: 200;
  max-width: 240px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: linear-gradient(180deg, var(--paper-3), var(--paper));
  box-shadow: var(--shadow-lg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 10.5px;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
  opacity: 0;
  pointer-events: none;
  transform: translateY(3px);
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}
.tipbox.is-on { opacity: 1; transform: none; }
.dark .tipbox { background: var(--dark-2); border-color: var(--dark-line); color: var(--dark-text); }

/* ============================================================
   Account footer (whole area opens the menu) + settings modal
   ============================================================ */
.footacct {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; margin: -2px -4px;
  border: 0; background: none; font: inherit; text-align: left;
  border-radius: 12px; cursor: pointer;
  transition: background .22s var(--ease), transform .18s var(--ease), box-shadow .22s var(--ease);
}
.footacct:hover { background: var(--mint); box-shadow: inset 0 0 0 1px var(--mint-line); }
.footacct:active { transform: scale(0.99); }
.footacct .who b { color: var(--ink); }
.footacct__dots { opacity: 0.55; transition: opacity .18s var(--ease); }
.footacct:hover .footacct__dots { opacity: 1; }
.dark .footacct:hover { background: rgba(63,167,118,0.12); box-shadow: inset 0 0 0 1px rgba(63,167,118,0.2); }
.acct-menu .menu__item i { display: grid; place-items: center; }

/* ---------- settings modal ---------- */
.settings {
  position: fixed; inset: 0; z-index: 110;     /* under .confirm (120) so confirms stack on top */
  display: flex; align-items: center; justify-content: center;
  background: rgba(16,32,26,0.35);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .2s var(--ease);
}
.settings.is-open { opacity: 1; }
.settings__card {
  display: flex;
  width: min(720px, 94vw);
  height: min(540px, 88vh);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translateY(16px) scale(0.97);
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}
.settings.is-open .settings__card { transform: none; }

/* nav rail */
.settings__nav {
  width: 192px; flex: none;
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 10px 12px;
  background: var(--paper-2);
  border-right: 1px solid var(--line-soft);
}
.settings__me { padding: 4px 8px 16px; line-height: 1.3; }
.settings__avatar {
  width: 42px; height: 42px; margin-bottom: 9px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--green), var(--green-700));
  color: #fff; display: grid; place-items: center;
  font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.settings__me b { display: block; font-size: 0.92rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings__me span { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings__tab {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px;
  border: 0; background: none; font: inherit; text-align: left;
  border-radius: 10px;
  font-size: 0.9rem; font-weight: 500; color: var(--ink-soft);
  cursor: pointer;
  transition: background .22s var(--ease), color .22s var(--ease), box-shadow .22s var(--ease);
}
.settings__tab svg { width: 15px; height: 15px; flex: none; transition: transform .22s var(--ease); }
.settings__tab:hover {
  background: var(--mint);
  color: var(--green-700);
  box-shadow: inset 0 0 0 1px var(--mint-line);
}
.settings__tab:hover svg { transform: scale(1.1); }
.settings__tab.is-active { background: var(--mint); color: var(--green-700); font-weight: 600; }
.settings__navspace { flex: 1; }
.settings__tab--out { color: #b3463c; }
.settings__tab--out:hover { background: rgba(179,70,60,0.08); color: #b3463c; box-shadow: inset 0 0 0 1px rgba(179,70,60,0.18); }

/* main column */
.settings__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.settings__head {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.settings__head h3 { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 500; color: var(--ink); }
.settings__close {
  width: 32px; height: 32px;
  border: 0; background: none; cursor: pointer;
  border-radius: 9px; color: var(--ink-faint);
  display: grid; place-items: center;
  transition: background .18s var(--ease), color .18s var(--ease), transform .25s var(--ease);
}
.settings__close svg { width: 15px; height: 15px; }
.settings__close:hover { background: var(--mint); color: var(--green-700); transform: rotate(90deg); }

.settings__pane { flex: 1; overflow-y: auto; padding: 20px 24px 24px; }
.settings__pane.is-in { animation: spane-in .24s var(--ease); }
@keyframes spane-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* fields */
.set-field label { display: block; font-size: 0.92rem; font-weight: 600; color: var(--ink); }
.set-hint { margin-top: 3px; font-size: 0.8rem; line-height: 1.45; color: var(--ink-faint); }
.set-field .set-hint { margin-bottom: 10px; }
.set-field label + .set-inputwrap { margin-top: 10px; }
.set-inputrow { display: flex; gap: 10px; align-items: flex-start; }
.set-inputwrap { position: relative; flex: 1; min-width: 0; }
.set-input {
  width: 100%; box-sizing: border-box;
  padding: 10px 36px 10px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper-2); color: var(--ink);
  font: inherit; font-size: 0.92rem;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.set-input:focus {
  outline: none; background: var(--paper-3);
  border-color: var(--green-300);
  box-shadow: 0 0 0 3px rgba(28,124,84,0.12);
}
.set-status {
  position: absolute; right: 11px; top: 50%;
  width: 16px; height: 16px; margin-top: -8px;
  display: grid; place-items: center;
  transition: color .18s var(--ease);
}
.set-status svg { width: 14px; height: 14px; }
.set-status.is-ok { color: var(--green); animation: sstat-pop .25s cubic-bezier(.3,1.4,.4,1); }
.set-status.is-bad { color: #b3463c; animation: sstat-pop .25s cubic-bezier(.3,1.4,.4,1); }
@keyframes sstat-pop { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
.set-status.is-checking::after {
  content: ""; width: 12px; height: 12px;
  border: 2px solid var(--line); border-top-color: var(--green);
  border-radius: 50%;
  animation: sspin .7s linear infinite;
}
@keyframes sspin { to { transform: rotate(360deg); } }
.set-feedback { margin-top: 7px; font-size: 0.8rem; min-height: 1.1em; color: var(--ink-faint); transition: color .18s var(--ease); }
.set-feedback.is-ok { color: var(--green-700); }
.set-feedback.is-bad { color: #b3463c; }

/* buttons */
.set-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 16px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper-2); color: var(--ink);
  font: inherit; font-size: 0.9rem; font-weight: 600;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .18s var(--ease), border-color .18s var(--ease),
              transform .18s var(--ease), box-shadow .18s var(--ease), opacity .18s var(--ease);
}
.set-btn svg { width: 14px; height: 14px; }
.set-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-sm); background: var(--paper); }
.set-btn:disabled { opacity: 0.45; cursor: default; }
.set-btn--primary { background: var(--green); border-color: var(--green); color: #fff; }
.set-btn--primary:hover:not(:disabled) { background: var(--green-700); border-color: var(--green-700); }
.set-btn--danger { background: none; border-color: rgba(179,70,60,0.4); color: #b3463c; }
.set-btn--danger:hover:not(:disabled) { background: rgba(179,70,60,0.08); }
.set-btn.is-busy { opacity: 0.7; cursor: wait; }
.set-btn.is-saved { background: var(--green-700); border-color: var(--green-700); color: #fff; opacity: 1; }
.set-actions { display: flex; gap: 10px; margin-top: 18px; }

.set-div { height: 1px; background: var(--line-soft); margin: 22px 0; }
.set-rowline { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.set-rowline > div:first-child { min-width: 0; }
.set-rowline b { font-size: 0.92rem; color: var(--ink); }
.set-rowline .set-hint { max-width: 320px; }

/* password extras */
.set-eye {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px;
  border: 0; background: none; cursor: pointer;
  border-radius: 7px; color: var(--ink-faint);
  display: grid; place-items: center;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.set-eye svg { width: 15px; height: 15px; }
.set-eye:hover { color: var(--green-700); background: var(--mint); }
.set-strength { height: 4px; margin-top: 10px; border-radius: 99px; background: var(--line-soft); overflow: hidden; }
.set-strength i { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .35s var(--ease), background .35s var(--ease); }
.set-strength.s1 i { width: 25%; background: #b3463c; }
.set-strength.s2 i { width: 50%; background: var(--amber); }
.set-strength.s3 i { width: 75%; background: var(--green-300); }
.set-strength.s4 i { width: 100%; background: var(--green); }
.set-field + .set-field { margin-top: 18px; }

/* segmented control with sliding thumb */
.set-seg {
  position: relative; flex: none;
  display: flex; padding: 3px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--paper-2);
}
.set-seg button {
  position: relative; z-index: 1; flex: 1 1 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 14px;
  border: 0; background: none; font: inherit;
  font-size: 0.85rem; font-weight: 600; color: var(--ink-faint);
  border-radius: 8px; cursor: pointer; white-space: nowrap;
  transition: color .2s var(--ease);
}
.set-seg button svg { width: 13px; height: 13px; }
.set-seg button.is-on { color: var(--green-700); }
.set-seg__thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px;
  width: calc((100% - 6px) / 2);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  transition: transform .28s cubic-bezier(.3, 1.3, .4, 1);
}
.set-seg--3 .set-seg__thumb { width: calc((100% - 6px) / 3); }

/* shared signature-colour picker */
.set-rowline--accent { align-items: flex-start; }
.set-accent { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; flex: none; }
.set-accent button {
  --set-choice: #1c7c54;
  min-width: 58px; padding: 8px 7px 7px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--paper-2); color: var(--ink-faint);
  font: inherit; font-size: 0.68rem; font-weight: 600; cursor: pointer;
  transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.set-accent button:hover { transform: translateY(-1px); color: var(--ink); border-color: color-mix(in srgb, var(--set-choice) 48%, var(--line)); }
.set-accent button[data-accent="ocean"] { --set-choice: #256f92; }
.set-accent button[data-accent="violet"] { --set-choice: #7657a6; }
.set-accent button[data-accent="sunset"] { --set-choice: #bd5a3d; }
.set-accent i {
  position: relative; width: 20px; height: 20px; border-radius: 50%;
  background: var(--set-choice); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.set-accent i::after { content: ""; position: absolute; inset: -4px; border: 2px solid transparent; border-radius: inherit; }
.set-accent button[aria-checked="true"] { color: var(--ink); background: color-mix(in srgb, var(--set-choice) 9%, var(--paper-3)); border-color: var(--set-choice); }
.set-accent button[aria-checked="true"] i::after { border-color: var(--set-choice); }
.set-accent .set-accent__custom {
  grid-column: 1 / -1; min-width: 0; padding: 8px 10px;
  flex-direction: row; justify-content: flex-start; gap: 10px; text-align: left;
}
.set-accent__custom > i {
  flex: none; display: grid; place-items: center; color: var(--ink-soft);
  background:
    radial-gradient(circle at center, var(--paper-3) 0 38%, transparent 43%),
    conic-gradient(from 128deg, var(--c-rose), var(--c-amber), var(--c-green), var(--c-teal), var(--c-sky), var(--c-plum), var(--c-rose));
}
.set-accent__custom > i > span { font-size: 14px; line-height: 1; font-weight: 500; }
.set-accent__custom > span { display: grid; gap: 1px; }
.set-accent__custom b { color: var(--ink); font: inherit; font-size: 0.72rem; }
.set-accent__custom small { color: var(--ink-faint); font: 500 0.62rem/1.2 var(--font-mono); text-transform: uppercase; }
.set-accent__custom.is-set > i { background: var(--set-choice); color: #fff; }
.set-accent__custom.is-set > i > span { font-size: 0; }
.set-accent__custom.is-set > i > span::after { content: "✓"; font-size: 11px; }
.dark .set-accent__custom > i { color: var(--dark-text); }
.dark .set-accent__custom b { color: var(--dark-text); }
.dark .set-accent__custom small { color: var(--dark-soft); }

/* switch */
.set-sw {
  flex: none; width: 40px; height: 23px;
  border: 0; border-radius: 99px;
  background: var(--line); cursor: pointer;
  position: relative;
  transition: background .25s var(--ease);
}
.set-sw i {
  position: absolute; top: 2.5px; left: 2.5px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-sm);
  transition: transform .28s cubic-bezier(.3, 1.3, .4, 1);
}
.set-sw.is-on { background: var(--green); }
.set-sw.is-on i { transform: translateX(17px); }

/* subscription plan card */
.set-plan {
  border: 1px solid var(--mint-line); border-radius: 16px;
  padding: 20px 22px;
  background: linear-gradient(160deg, var(--mint), var(--paper-3) 60%);
}
.set-plan__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.set-plan__flag {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--green-700);
}
.set-plan h4 { font-family: var(--font-serif); font-size: 1.45rem; font-weight: 500; color: var(--ink); margin-top: 2px; }
.set-plan__price { font-family: var(--font-serif); font-size: 1.4rem; color: var(--green-700); }
.set-plan__sub { margin-top: 6px; font-size: 0.88rem; color: var(--ink-soft); }
.set-plan__list { margin-top: 14px; display: grid; gap: 8px; list-style: none; padding: 0; }
.set-plan__list li { display: flex; align-items: center; gap: 9px; font-size: 0.88rem; color: var(--ink-soft); }
.set-plan__list svg { width: 13px; height: 13px; flex: none; color: var(--green); }

/* dark mode */
.dark .settings__card { background: var(--dark-2); border-color: var(--dark-line); }
.dark .settings__nav { background: rgba(255,255,255,0.02); border-right-color: var(--dark-line); }
.dark .settings__me b, .dark .settings__head h3, .dark .set-field label,
.dark .set-rowline b, .dark .set-plan h4 { color: var(--dark-text); }
.dark .settings__tab { color: var(--dark-soft); }
.dark .settings__tab:hover { background: rgba(63,167,118,0.12); color: var(--glow); box-shadow: inset 0 0 0 1px rgba(63,167,118,0.25); }
.dark .settings__tab--out:hover { background: rgba(214,69,69,0.12); color: #e07a70; box-shadow: inset 0 0 0 1px rgba(214,69,69,0.2); }
.dark .settings__tab.is-active { background: rgba(63,167,118,0.16); color: var(--glow); }
.dark .settings__head { border-bottom-color: var(--dark-line); }
.dark .settings__close:hover { background: rgba(63,167,118,0.14); color: var(--glow); }
.dark .set-accent button { background: rgba(255,255,255,.035); border-color: var(--dark-line); color: var(--dark-soft); }
.dark .set-accent button[aria-checked="true"] { background: color-mix(in srgb, var(--set-choice) 16%, var(--dark-2)); border-color: var(--set-choice); color: var(--dark-text); }
.dark .set-input { background: rgba(255,255,255,0.05); border-color: var(--dark-line); color: var(--dark-text); }
.dark .set-input:focus { background: rgba(255,255,255,0.07); border-color: rgba(63,167,118,0.5); box-shadow: 0 0 0 3px rgba(63,167,118,0.14); }
.dark .set-btn { background: rgba(255,255,255,0.05); border-color: var(--dark-line); color: var(--dark-text); }
.dark .set-btn:hover:not(:disabled) { background: rgba(255,255,255,0.08); }
.dark .set-btn--primary { background: var(--green); border-color: var(--green); color: #fff; }
.dark .set-btn--primary:hover:not(:disabled) { background: var(--green-700); }
.dark .set-div { background: var(--dark-line); }
.dark .set-seg { background: rgba(255,255,255,0.04); border-color: var(--dark-line); }
.dark .set-seg__thumb { background: var(--dark-2); border-color: var(--dark-line); }
.dark .set-seg button.is-on { color: var(--glow); }
.dark .set-sw { background: rgba(255,255,255,0.14); }
.dark .set-sw.is-on { background: var(--green); }
.dark .set-eye:hover { background: rgba(63,167,118,0.14); color: var(--glow); }
.dark .set-plan { background: linear-gradient(160deg, rgba(63,167,118,0.12), var(--dark-2) 60%); border-color: rgba(63,167,118,0.3); }
.dark .set-plan__sub, .dark .set-plan__list li { color: var(--dark-soft); }
.dark .set-strength { background: rgba(255,255,255,0.1); }

@media (max-width: 640px) {
  .settings__card { flex-direction: column; height: min(620px, 92vh); }
  .settings__nav { width: 100%; flex-direction: row; align-items: center; overflow-x: auto; padding: 10px; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .settings__me { display: none; }
  .settings__navspace { display: none; }
}

/* ============================================================
   Guided tour — spotlight hole + gliding card
   ============================================================ */
.tour { position: fixed; inset: 0; z-index: 115; opacity: 0; transition: opacity .3s var(--ease); }
.tour.is-open { opacity: 1; }
.tour__hole {
  position: fixed;
  border-radius: 16px;
  box-shadow: 0 0 0 200vmax rgba(11, 22, 16, 0.6);
  pointer-events: none;
  transition: left .55s cubic-bezier(.22, 1, .36, 1), top .55s cubic-bezier(.22, 1, .36, 1),
              width .55s cubic-bezier(.22, 1, .36, 1), height .55s cubic-bezier(.22, 1, .36, 1);
}
/* the lit pane: crisp emerald ring + hairline white edge + soft halo */
.tour__hole::before {
  content: "";
  position: absolute; inset: -3px;
  border-radius: inherit;
  border: 2.5px solid var(--glow);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.55),
    0 0 22px 5px rgba(63, 167, 118, 0.42),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.5),
    inset 0 0 26px rgba(63, 167, 118, 0.14);
  opacity: 0.98;
  transition: opacity .3s var(--ease);
}
/* a breathing ring radiating off the pane */
.tour__hole::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: inherit;
  transition: opacity .3s var(--ease);
  animation: tour-pulse 2.4s ease-in-out infinite;
}
.tour__hole.is-closed::before,
.tour__hole.is-closed::after { opacity: 0; animation: none; }
@keyframes tour-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(63, 167, 118, 0.5); }
  70% { box-shadow: 0 0 0 13px rgba(63, 167, 118, 0); }
}
.tour__card {
  position: fixed;
  width: 340px;
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  padding: 20px 22px 14px;
  transition: left .55s cubic-bezier(.22, 1, .36, 1), top .55s cubic-bezier(.22, 1, .36, 1),
              width .35s var(--ease);
}
.tour__card--wide { width: 400px; padding: 26px 28px 18px; }
.tour__body.is-in { animation: tour-body-in .32s var(--ease) both; }
@keyframes tour-body-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.tour__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--green-700);
}
.tour__title { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 500; color: var(--ink); margin-top: 7px; }
.tour__card--wide .tour__title { font-size: 1.5rem; }
.tour__text { margin-top: 8px; font-size: 0.9rem; line-height: 1.55; color: var(--ink-soft); }
.tour__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.tour__dots { display: flex; gap: 6px; }
.tour__dots i {
  width: 6px; height: 6px; border-radius: 99px;
  background: var(--line);
  transition: width .3s var(--ease), background .3s var(--ease);
}
.tour__dots i.is-on { width: 18px; background: var(--green); }
.tour__btns { display: flex; align-items: center; gap: 6px; }
.tour__skip {
  border: 0; background: none; cursor: pointer;
  padding: 9px 10px; border-radius: 9px;
  font: inherit; font-size: 0.85rem; font-weight: 500;
  color: var(--ink-faint);
  transition: color .16s var(--ease), background .16s var(--ease);
}
.tour__skip:hover { color: var(--ink); background: var(--paper-2); }

/* boxes take a staggered bow during the canvas beat */
.box.tour-wave { animation: tour-wave .85s var(--ease) both; }
@keyframes tour-wave {
  0% { transform: none; }
  35% { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(28, 124, 84, 0.16), 0 0 0 2px var(--green-300); }
  100% { transform: none; }
}

.dark .tour__hole { box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.68); }
.dark .tour__hole::before {
  border-color: var(--glow);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.22),
    0 0 24px 6px rgba(63, 167, 118, 0.4),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.18),
    inset 0 0 26px rgba(63, 167, 118, 0.16);
}
.dark .tour__card { background: var(--dark-2); border-color: var(--dark-line); }
.dark .tour__title { color: var(--dark-text); }
.dark .tour__text { color: var(--dark-soft); }
.dark .tour__eyebrow { color: var(--glow); }
.dark .tour__dots i { background: rgba(255,255,255,0.18); }
.dark .tour__dots i.is-on { background: var(--green); }
.dark .tour__skip:hover { background: rgba(255,255,255,0.06); color: var(--dark-text); }

@media (prefers-reduced-motion: reduce) {
  .tour__hole, .tour__card { transition: none; }
  .tour__hole::after { animation: none; }
  .tour__body.is-in { animation: none; }
  .box.tour-wave { animation: none; }
}

@keyframes lm-panel-rise {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

/* ============================================================
   PREMIUM MOTION — boot choreography, folders, notes, panels
   ============================================================ */
:root {
  --ease-out-q: cubic-bezier(.22, 1, .36, 1);       /* quintic ease-out: fast in, soft landing */
  --spring: cubic-bezier(.34, 1.45, .5, 1);          /* gentle overshoot for pops */
}

/* ---------- app boot: toolbar drops, sidebar slides, canvas settles ---------- */
.tb { animation: mx-drop-in .55s var(--ease-out-q) both; }
@keyframes mx-drop-in { from { opacity: 0; transform: translateY(-12px); } }
.sb { animation: mx-slide-in .5s var(--ease-out-q) both; }
@keyframes mx-slide-in { from { opacity: 0; transform: translateX(-16px); } }
.sb__tabs { animation: mx-panel-item .45s var(--ease-out-q) .08s both; }
.sb__foot { animation: mx-panel-item .45s var(--ease-out-q) .25s both; }
.crumb { animation: mx-panel-item .45s var(--ease-out-q) .15s both; }
@keyframes mx-panel-item { from { opacity: 0; transform: translateY(8px); } }

/* library rows cascade in when tree.js plays the entrance (one-shot: tree.js
   owns .is-cascading and queues mid-flight re-renders, so a cloud sync landing
   during the animation can no longer wipe the rows and restart it) */
.tree.is-cascading .row {
  animation: mx-row-boot .4s var(--ease-out-q) both;
  animation-delay: calc(.18s + var(--i, 0) * 28ms);
}
@keyframes mx-row-boot { from { opacity: 0; transform: translateX(-10px); } }

/* ---------- library skeleton: ghost rows shimmer while a signed-in user's
   notebook downloads on a fresh device; revealTree() then fades them out and
   cascades the real rows in. Geometry mirrors .row so the swap doesn't jump. */
.sb__panel.is-loading .tree,
.sb__panel.is-loading .newclass { pointer-events: none; }
.sb__panel.is-loading .newclass { opacity: 0.45; }
.tree-skel { transition: opacity .18s ease, transform .18s ease; }
.tree-skel.is-leaving { opacity: 0; transform: translateX(-4px); }
.skel-row {
  display: flex; align-items: center; gap: 6px;
  height: var(--row-h);
  padding-right: 10px;
  padding-left: calc(8px + 22px + var(--depth, 0) * 16px);  /* 22px = chevron + gap */
  animation: mx-skel-in .45s var(--ease-out-q) both;
  animation-delay: calc(.1s + var(--i, 0) * 55ms);
}
.skel-dot, .skel-ic, .skel-bar, .skel-code {
  background: linear-gradient(100deg, var(--mint) 32%, var(--mint-line) 50%, var(--mint) 68%);
  background-size: 220% 100%;
  animation: mx-skel-shimmer 1.5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -130ms);   /* phase-shift: shimmer waves down the list */
}
.skel-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.skel-ic { width: 13px; height: 13px; border-radius: 4px; flex: none; }
.skel-bar { height: 9px; border-radius: 5px; }
.skel-code { width: 30px; height: 7px; border-radius: 4px; margin-left: auto; flex: none; }
@keyframes mx-skel-in { from { opacity: 0; transform: translateX(-8px); } }
@keyframes mx-skel-shimmer { from { background-position: 200% 0; } to { background-position: -120% 0; } }

/* ---------- sidebar panel switch (Library <-> Lemma AI) ----------
   [hidden] toggling restarts these, so every switch replays the cascade. */
.sb__panel[data-panel="library"]:not([hidden]) > * { animation: mx-panel-item .4s var(--ease-out-q) both; }
.sb__panel[data-panel="library"]:not([hidden]) > *:nth-child(2) { animation-delay: .06s; }
.sb__panel[data-panel="library"]:not([hidden]) > *:nth-child(3) { animation-delay: .12s; }

.sb__panel[data-panel="agent"]:not([hidden]) .agent > *:not(.agent__history):not(.agent__slash) {
  animation: mx-panel-item .45s var(--ease-out-q) both;
}
.sb__panel[data-panel="agent"]:not([hidden]) .agent > *:nth-child(1) { animation-delay: .02s; }
.sb__panel[data-panel="agent"]:not([hidden]) .agent > *:nth-child(3) { animation-delay: .07s; }
.sb__panel[data-panel="agent"]:not([hidden]) .agent > *:nth-child(4) { animation-delay: .1s; }
.sb__panel[data-panel="agent"]:not([hidden]) .agent > *:nth-child(5) { animation-delay: .12s; }
.sb__panel[data-panel="agent"]:not([hidden]) .agent > *:nth-child(6) { animation-delay: .14s; }
.sb__panel[data-panel="agent"]:not([hidden]) .agent > *:nth-child(7) { animation-delay: .16s; }
.sb__panel[data-panel="agent"]:not([hidden]) .agent > *:nth-child(9) { animation-delay: .18s; }
.sb__panel[data-panel="agent"]:not([hidden]) .agent > *:nth-child(10) { animation-delay: .2s; }
.sb__panel[data-panel="agent"]:not([hidden]) .agent > *:nth-child(11) { animation-delay: .24s; }

/* ---------- library tree: folders open & close for real ---------- */
.children.is-anim {
  overflow: hidden;
  transition: height .28s var(--ease-out-q);
  will-change: height;
}
.children.is-closing { transition: height .24s var(--ease-out-q), opacity .2s linear; opacity: 0; }
.row--reveal {
  animation: mx-row-reveal .34s var(--ease-out-q) both;
  animation-delay: calc(var(--k, 0) * 28ms);
}
@keyframes mx-row-reveal { from { opacity: 0; transform: translateX(-8px); } }
.row.just-opened > .row__chev { animation: mx-chev-open .3s var(--ease-out-q); }
@keyframes mx-chev-open { from { transform: rotate(0deg); } to { transform: rotate(90deg); } }

/* ---------- breadcrumb cascades when a note opens ---------- */
.crumb > * { animation: mx-crumb-in .35s var(--ease-out-q) both; }
.crumb > *:nth-child(2) { animation-delay: .04s; }
.crumb > *:nth-child(3) { animation-delay: .08s; }
.crumb > *:nth-child(4) { animation-delay: .12s; }
@keyframes mx-crumb-in { from { opacity: 0; transform: translateX(-6px); } }

/* ---------- canvas: boxes cascade in when a note opens ---------- */
.box--enter {
  animation: mx-box-enter .55s var(--ease-out-q) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes mx-box-enter { from { opacity: 0; transform: translateY(16px) scale(.96); } }

/* a freshly placed box springs up (Lemma's box--spawn keeps its green ring) */
.box--pop:not(.box--spawn) { animation: mx-box-pop .42s var(--spring) both; }
@keyframes mx-box-pop { from { opacity: 0; transform: scale(.82); } 65% { transform: scale(1.015); } }

/* a deleted box folds away instead of vanishing */
.box--exit { animation: mx-box-exit .2s var(--ease-out-q) both; pointer-events: none !important; }
@keyframes mx-box-exit { to { opacity: 0; transform: scale(.94); } }

/* AI placement: box waits invisibly while the camera glides over the spot,
   then animateSpawn() removes this class and the box spawns in */
.box--placing { opacity: 0 !important; pointer-events: none !important; }

/* text formatting toolbar rises when editing starts */
.textbar { animation: mx-rise-sm .22s var(--ease-out-q); }
@keyframes mx-rise-sm { from { opacity: 0; transform: translateY(5px) scale(.98); } }

/* pen options bar drops in when Draw is picked (keeps its centering transform) */
.drawbar { animation: mx-drawbar-in .3s var(--ease-out-q); }
@keyframes mx-drawbar-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  to { opacity: 1; transform: translateX(-50%); }
}

/* ---------- empty state: mark pops, then floats ---------- */
.empty { animation: mx-fade-up-lg .55s var(--ease-out-q) both; }
@keyframes mx-fade-up-lg { from { opacity: 0; transform: translateY(18px); } }
.empty__mark {
  animation:
    mx-mark-pop .65s var(--spring) .12s both,
    mx-mark-float 7s ease-in-out 1.2s infinite;
}
@keyframes mx-mark-pop { from { opacity: 0; transform: scale(.7) rotate(-4deg); } }
@keyframes mx-mark-float { 50% { transform: translateY(-6px); } }
.empty h2 { animation: mx-panel-item .5s var(--ease-out-q) .2s both; }
.empty p { animation: mx-panel-item .5s var(--ease-out-q) .28s both; }

/* ---------- popovers & modals ---------- */
.menu, .ctx { transform-origin: top left; animation: mx-menu-pop .2s var(--ease-out-q) both; }
@keyframes mx-menu-pop { from { opacity: 0; transform: translateY(-5px) scale(.97); } }
/* Dismissal: the menu fades out instead of blinking away, and stops taking
   clicks the moment it starts leaving (contextmenu.js close()). */
.ctx.is-closing {
  pointer-events: none;
  animation: mx-menu-out .1s var(--ease) both;
}
@keyframes mx-menu-out { to { opacity: 0; transform: translateY(-3px) scale(.98); } }
@media (prefers-reduced-motion: reduce) {
  .ctx.is-closing { animation: none; opacity: 0; }
}
.cmdk, .confirm { animation: mx-overlay-in .2s var(--ease) both; }
@keyframes mx-overlay-in { from { opacity: 0; } }
.cmdk__box { animation: mx-sheet-in .3s var(--ease-out-q) both; }
@keyframes mx-sheet-in { from { opacity: 0; transform: translateY(-10px) scale(.985); } }
.confirm__box { animation: mx-confirm-in .34s var(--spring) both; }
@keyframes mx-confirm-in { from { opacity: 0; transform: translateY(10px) scale(.94); } }

/* toasts ease out (toast.js fades opacity before removal) */
.toast { transition: opacity .25s var(--ease), transform .25s var(--ease); }

/* sync chip breathes while saving */
.sync-chip[data-state="saving"] i { animation: mx-chip-pulse 1s ease-in-out infinite; }
@keyframes mx-chip-pulse { 50% { opacity: .35; transform: scale(.8); } }

/* ---------- micro-interactions: buttons respond to the press ---------- */
.tbtool { transition: background .22s var(--ease), color .22s var(--ease), transform .18s var(--ease), box-shadow .22s var(--ease); }
.tbtool:active { transform: scale(.93); }
.tbicon { transition: background .22s var(--ease), color .22s var(--ease), transform .18s var(--ease), box-shadow .22s var(--ease); }
.tbicon:active { transform: scale(.9); }
.sb__tab { transition: background .22s var(--ease), color .22s var(--ease), transform .18s var(--ease), box-shadow .22s var(--ease); }
.sb__tab:active { transform: scale(.96); }
.newclass:active { transform: scale(.98); }
.row__add:active { transform: scale(.88); }
.chip:active { transform: translateY(0) scale(.98); }

/* ---------- theme toggle crossfades the chrome ---------- */
.app-body { transition: background-color .4s var(--ease); }
.tb, .sb, .crumb { transition: background-color .4s var(--ease), border-color .4s var(--ease); }
.box {
  transition: box-shadow .15s var(--ease),
              background-color .35s var(--ease), border-color .35s var(--ease);
}

/* ============================================================
   Role badge + beta welcome card
   The chip appears in three sizes: sm (sidebar footer, account
   menu), md (settings rail, subscription pane), lg (welcome card).
   Selectors are doubled through .who because the footer's generic
   `.who span` rule would otherwise repaint the chip's label.
   ============================================================ */
.rolechip, .who .rolechip {
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 100%;
  border-radius: 999px;
  background: var(--mint);
  border: 1px solid var(--mint-line);
  color: var(--green-700);
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}
/* the label inherits everything — it exists only so the icon can flex apart */
.rolechip > span, .who .rolechip > span {
  font: inherit; color: inherit; letter-spacing: inherit;
  overflow: hidden; text-overflow: ellipsis;
}
.rolechip > i, .who .rolechip > i {
  flex: none; display: grid; place-items: center;
  color: var(--green);
}
.rolechip > i svg { width: 100%; height: 100%; }

.rolechip--sm, .who .rolechip--sm { padding: 2px 7px 2px 6px; font-size: 8.5px; margin-bottom: 4px; }
.rolechip--sm > i { width: 9px; height: 9px; }
.rolechip--md { padding: 3px 9px 3px 7px; font-size: 9.5px; }
.rolechip--md > i { width: 11px; height: 11px; }
.rolechip--lg { padding: 6px 13px 6px 10px; font-size: 11px; letter-spacing: 0.09em; }
.rolechip--lg > i { width: 13px; height: 13px; }

/* the .who variants are load-bearing: `.dark .who span` (0,2,1) outranks a
   plain `.dark .rolechip` (0,2,0) and would repaint the label dark-soft */
.dark .rolechip, .dark .who .rolechip {
  background: rgba(63,167,118,0.13);
  border-color: rgba(63,167,118,0.28);
  color: var(--glow);
}
.dark .rolechip > i, .dark .who .rolechip > i { color: var(--glow); }

/* Pre-existing dark-mode slip in the same footer: `.footacct .who b` and
   `.dark .who b` are both (0,2,1), and the former lands later in this file —
   so the signed-in username was painted near-black on the dark surface. */
.dark .footacct .who b { color: var(--dark-text); }

/* the footer avatar picks up the same depth as the settings one */
.avatar--role { background: linear-gradient(135deg, var(--green), var(--green-700)); }

.acct-menu__who .rolechip { margin-bottom: 5px; }
.acct-menu__perk {
  padding: 0 10px 8px;
  font-size: 11.5px; line-height: 1.45;
  color: var(--ink-faint);
}
.dark .acct-menu__perk { color: var(--dark-soft); }

.settings__me #set-me-role:not(:empty) { margin-bottom: 6px; }
.set-plan__role {
  display: flex; align-items: center; gap: 9px;
  margin-top: 14px; padding-top: 13px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px; line-height: 1.45; color: var(--ink-soft);
}
.set-plan__role:empty { display: none; }
.dark .set-plan__role { border-top-color: var(--dark-line); color: var(--dark-soft); }

/* ---------- welcome card (first open of a new account) ---------- */
.welcome {
  position: fixed; inset: 0; z-index: 130;   /* above settings (110) and confirm (120) */
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(16,32,26,0.42);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity .26s var(--ease);
}
.welcome.is-open { opacity: 1; }
.welcome__card {
  position: relative;
  width: min(456px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 30px 32px 26px;
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  text-align: center;
  transform: translateY(18px) scale(0.96);
  transition: transform .38s var(--spring);
}
.welcome.is-open .welcome__card { transform: none; }
.dark .welcome__card { background: var(--dark-2); border-color: var(--dark-line); }

.welcome__crest {
  position: relative;
  width: 58px; height: 58px; margin: 2px auto 18px;
  border-radius: 19px;
  background: linear-gradient(135deg, var(--green), var(--green-700));
  display: grid; place-items: center;
  box-shadow: 0 10px 26px -12px var(--green);
}
.welcome__crest i { display: grid; place-items: center; color: #fff; }
.welcome__crest svg { width: 26px; height: 26px; }
/* a single slow pulse behind the crest — celebration without confetti */
.welcome__crestglow {
  position: absolute; inset: -6px;
  border-radius: 25px;
  border: 1.5px solid var(--green-300);
  opacity: 0;
  animation: welcome-pulse 2.6s var(--ease) .35s 2;
}
@keyframes welcome-pulse {
  0%   { opacity: .55; transform: scale(.9); }
  70%  { opacity: 0;   transform: scale(1.25); }
  100% { opacity: 0;   transform: scale(1.25); }
}

.welcome__eyebrow {
  display: block;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint);
}
.welcome__title {
  margin-top: 7px;
  font-family: var(--font-serif); font-size: 1.72rem; font-weight: 500;
  letter-spacing: -0.015em; line-height: 1.15;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.dark .welcome__title { color: var(--dark-text); }

.welcome__rolerow {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 9px;
  margin-top: 15px;
}
.welcome__roletag {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-faint);
}
.dark .welcome__roletag { color: var(--dark-soft); }

.welcome__text {
  margin-top: 13px;
  font-size: 0.95rem; line-height: 1.6;
  color: var(--ink-soft);
}
.dark .welcome__text { color: var(--dark-soft); }

.welcome__perks {
  margin-top: 20px; padding: 16px 18px;
  list-style: none; text-align: left;
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  display: grid; gap: 10px;
}
.dark .welcome__perks { background: rgba(255,255,255,0.03); border-color: var(--dark-line); }
.welcome__perks li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.88rem; line-height: 1.4;
  color: var(--ink);
}
.dark .welcome__perks li { color: var(--dark-text); }
.welcome__perks i { flex: none; display: grid; place-items: center; width: 15px; height: 15px; margin-top: 1px; color: var(--green); }
.welcome__perks svg { width: 100%; height: 100%; }
.dark .welcome__perks i { color: var(--glow); }

.welcome__actions { margin-top: 22px; display: grid; gap: 4px; }
.welcome__go { width: 100%; justify-content: center; padding: 12px 18px; font-size: 0.95rem; }
.welcome__skip {
  border: 0; background: none; font: inherit; cursor: pointer;
  padding: 9px;
  font-size: 0.85rem; color: var(--ink-faint);
  border-radius: 9px;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.welcome__skip:hover { color: var(--ink-soft); background: var(--paper-2); }
.dark .welcome__skip { color: var(--dark-soft); }
.dark .welcome__skip:hover { color: var(--dark-text); background: rgba(255,255,255,0.05); }

@media (prefers-reduced-motion: reduce) {
  .welcome, .welcome__card { transition: none; }
  .welcome__crestglow { animation: none; }
}


/* ============================================================
   UNDO / REDO
   Toolbar pair, the motion a restored box travels on, and the
   pill that names what just happened.
   ============================================================ */
.histgrp { display: flex; align-items: center; gap: 2px; }
.tbicon:disabled {
  opacity: .34;
  cursor: default;
  pointer-events: none;      /* no hover lift on a button that can't act */
}
.dark .tbicon:disabled { opacity: .3; }

/* A box being put back travels rather than teleports. The transition is only
   live while the class is on, so ordinary dragging stays at pointer speed. */
.box--restore {
  transition: left .34s cubic-bezier(.22, 1.04, .36, 1),
              top .34s cubic-bezier(.22, 1.04, .36, 1),
              box-shadow .15s var(--ease),
              background-color .35s var(--ease), border-color .35s var(--ease);
  will-change: left, top;
}
/* content, not position, was restored — a soft ring says which box changed */
.box--restored { animation: mx-restored .62s var(--ease) both; }
@keyframes mx-restored {
  0%   { box-shadow: 0 0 0 2px var(--accent), var(--shadow-md); }
  100% { box-shadow: 0 0 0 0 transparent, var(--shadow-sm); }
}

.histpill {
  position: fixed;
  left: 50%;
  top: calc(var(--tb-h) + 14px);
  z-index: 115;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper-3) 88%, transparent);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px) saturate(1.2);
  color: var(--ink);
  font-size: 0.85rem; font-weight: 500; letter-spacing: .01em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -6px) scale(.96);
  transition: opacity .18s var(--ease), transform .28s var(--spring);
}
.histpill.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.histpill svg { width: 15px; height: 15px; color: var(--green); flex: none; }
.dark .histpill {
  background: color-mix(in srgb, var(--dark-2) 90%, transparent);
  border-color: var(--dark-line);
  color: var(--dark-text);
}
.dark .histpill svg { color: var(--glow); }

/* Narrow desktop windows: the save-state chip keeps its dot (which carries the
   state) and drops its word, so the right-hand controls stay reachable instead
   of sliding off the edge. */
@media (max-width: 1180px) {
  .sync-chip span { display: none; }
  .sync-chip { padding: 0 6px; gap: 0; }
  .histgrp + .tb__div { display: none; }   /* the gap alone separates them here */
}

@media (prefers-reduced-motion: reduce) {
  .box--restore { transition: none; }
  .box--restored { animation: none; }
  .histpill { transition: opacity .12s linear; }
}

/* ============ on-screen keyboard ============
   The notebook is a desktop surface, but touch laptops and tablets reach
   it too, and there the keyboard used to sit on top of the Lemma composer.
   assets/js/keyboard-inset.js publishes --kb-inset: whatever the browser
   did NOT already take off the viewport itself. It is 0 in every desktop
   browser, so this rule is inert there. */
body.kb-open .app { height: calc(100dvh - var(--kb-inset, 0px)); }