/* OttoBot shell: header, navigation, sheets and motion.
   Loaded last. Motion follows the transitions.dev token scale (durations and easings by usage). */

:root {
  --duration-stagger: 40ms;
  --duration-micro: 80ms;
  --duration-quick: 150ms;   /* close, text swap */
  --duration-fast: 250ms;    /* page slide, tabs, icon swap, open */
  --duration-medium: 350ms;  /* panel / toast close */
  --duration-slow: 400ms;    /* panel open, content reveal */
  --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: ease-in-out;
  --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
  --bar-h: 56px;
  --rail-w: var(--rail-width, 272px);
  --surface: #171512;
  --surface-2: #1d1a16;
  --hair: rgba(243, 234, 216, 0.08);
  --hair-strong: rgba(243, 234, 216, 0.14);
}

/* ── Header ─────────────────────────────────────────────────────────────── */
body > header.bar {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center;
  gap: 10px !important;
  height: calc(var(--bar-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 16px 0 10px !important;
  background: rgba(16, 15, 13, 0.86) !important;
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--hair) !important;
  position: relative;
  z-index: 60;
}
.bar .bar-left { gap: 6px !important; }
.bar .nav-toggle,
.bar .icon-btn {
  display: inline-grid !important;
  place-items: center;
  width: 40px; height: 40px; min-width: 40px;
  padding: 0 !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--strong) !important;
  font-size: 0 !important;
  visibility: visible !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: background var(--duration-quick) var(--ease-smooth-out), color var(--duration-quick) var(--ease-smooth-out), transform var(--duration-quick) var(--ease-smooth-out);
}
.bar .nav-toggle:hover, .bar .icon-btn:hover { background: var(--hair) !important; color: var(--ink) !important; }
.bar .nav-toggle:active, .bar .icon-btn:active { transform: scale(0.94); }
.bar .nav-toggle svg path { transition: d var(--duration-fast) var(--ease-smooth-out); }
html.rail-drawer-open .bar .nav-toggle { background: var(--bronze-soft) !important; color: var(--bronze) !important; }
.bar .mark-row { gap: 10px; }
.bar .mark-gem { width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; border-radius: 8px; }
.bar-title {
  min-width: 0;
  font: 600 17px/1.2 var(--display);
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bar-title small { font: 400 12px/1 var(--ui); color: var(--muted); margin-left: 8px; letter-spacing: 0.02em; }
.bar-title .bar-title-text { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.bar-title.is-swapping .bar-title-text { animation: t-text-swap var(--duration-fast) var(--ease-in-out); }
.bar .bar-right { display: flex; align-items: center; gap: 8px; justify-content: flex-end; min-width: 0; }
.bar .mobile-settings-btn { display: none !important; }

/* Desktop header: brand left, nothing competing in the middle. */
html.is-desktop .bar-title { visibility: hidden; }

/* ── Shell: nav rail + the page ─────────────────────────────────────────── */
.shell {
  display: grid;
  grid-template-columns: var(--rail-w) 5px minmax(0, 1fr);
  min-height: 0; min-width: 0; height: 100%;
  position: relative;
  transition: grid-template-columns var(--duration-slow) var(--ease-smooth-out);
}
.shell-main { min-height: 0; min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr); position: relative; }
/* Named only while a page slide runs: a permanent name would trap the sheets under the header. */
html.is-page-moving .shell-main { view-transition-name: main; }
/* Tools consoles fill the page area beside the nav (they used to cover the whole window). */
.shell-main > #stage-opencode, .shell-main > #stage-hermes, .shell-main > #stage-openship { position: relative !important; inset: auto !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; }
.shell-main > .workspace { grid-row: 1; grid-column: 1; }
#stage-chat.on, .shell-main > #stage-chat { grid-template-columns: minmax(0, 1fr) !important; }
/* The nav lives in .shell now; an old rule still parked the chat in column 3 of the page's own grid. */
.shell-main > #stage-chat > .chat-col { grid-column: 1 / -1 !important; }
.shell > .rail {
  width: auto !important; max-width: none !important;
  min-width: 0;
  transition: transform var(--duration-slow) var(--ease-smooth-out), opacity var(--duration-fast) var(--ease-smooth-out), box-shadow var(--duration-slow) var(--ease-smooth-out) !important;
}
html.is-desktop.rail-collapsed .shell { grid-template-columns: 0px 0px minmax(0, 1fr); }
html.is-desktop.rail-collapsed .shell > .rail { transform: translateX(-24px); opacity: 0; pointer-events: none; }
html.is-desktop.rail-collapsed .rail-splitter { display: none !important; }
html.is-desktop .shell > .rail-scrim { display: none !important; }

/* Primary nav at the top of the rail. */
.rail-nav {
  display: grid !important; gap: 2px;
  padding: 12px 10px 6px !important;
  margin: 0 !important; max-width: none !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important;
  justify-self: stretch !important;
}
.rail-nav-btn {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  width: 100%; min-height: 42px;
  padding: 8px 12px !important;
  border-radius: 12px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--strong) !important;
  font: 500 14.5px/1.2 var(--ui) !important;
  text-align: left;
  box-shadow: none !important;
  transition: background var(--duration-quick) var(--ease-smooth-out), color var(--duration-quick) var(--ease-smooth-out);
}
.rail-nav-btn svg { color: var(--muted); transition: color var(--duration-quick) var(--ease-smooth-out); }
.rail-nav-btn small { font-size: 11.5px; color: var(--muted); font-weight: 400; }
.rail-nav-btn:hover { background: var(--hair) !important; }
.rail-nav-btn.on { background: var(--bronze-soft) !important; color: var(--ink) !important; }
.rail-nav-btn.on svg { color: var(--bronze); }
.rail-label {
  margin: 8px 0 0; padding: 6px 22px 2px;
  font: 600 10.5px/1 var(--ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
/* On Home and Tools, the CEO you last had open is not "the page you are on". */
body:not([data-stage="chat"]) .rail .org-btn.on { background: transparent !important; box-shadow: none !important; }
body:not([data-stage="chat"]) .rail .org-btn.on .org-btn-text b { color: var(--ink) !important; }

/* CEO rows: compact, one line of name, one line of state. */
.rail .org { padding: 4px 8px 8px !important; gap: 2px !important; }
.rail .org-project { margin: 0 !important; }
.rail .org-row { display: grid !important; grid-template-columns: 18px minmax(0, 1fr) !important; align-items: center; gap: 2px; padding: 0 !important; }
.rail .org-twist { width: 18px; height: 32px; padding: 0 !important; font-size: 10px !important; color: var(--muted); opacity: 0.7; background: transparent !important; border: 0 !important; }
.rail .org-staff, .rail .org-desk-card {
  display: grid !important; grid-template-columns: 34px minmax(0, 1fr) !important; gap: 10px !important; align-items: center;
  min-height: 50px !important; height: auto !important;
  padding: 7px 10px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: background var(--duration-quick) var(--ease-smooth-out), border-color var(--duration-quick) var(--ease-smooth-out) !important;
}
.rail .org-staff:hover, .rail .org-desk-card:hover { background: var(--hair) !important; }
.rail .org-staff.on, .rail .org-desk-card.on { background: var(--bronze-soft) !important; border-color: color-mix(in srgb, var(--bronze) 30%, transparent) !important; }
.rail .org-avatar {
  width: 34px !important; height: 34px !important; min-width: 34px;
  font-size: 12px !important; letter-spacing: 0.02em;
  box-shadow: none !important;
}
.rail .org-btn-text { min-width: 0; display: grid !important; gap: 1px; }
.rail .org-btn-text b {
  font: 600 14.5px/1.25 var(--display) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.rail .org-lamp { font-size: 12px !important; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; opacity: 0.9; }

/* ── Phone: the rail is a drawer that slides in from the left ───────────── */
html.is-mobile .shell { grid-template-columns: minmax(0, 1fr) !important; }
html.is-mobile .shell > .rail-splitter { display: none !important; }
html.is-mobile .shell > .rail {
  position: fixed !important;
  top: 0; bottom: 0; left: 0;
  width: min(86vw, 348px) !important;
  z-index: 80 !important;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-right: 1px solid var(--hair-strong) !important;
  border-radius: 0 20px 20px 0;
  background: #13110f !important;
  transform: translateX(calc(-100% - 12px));
  opacity: 1;
  box-shadow: none;
  transition: transform var(--duration-medium) var(--ease-smooth-out), box-shadow var(--duration-medium) var(--ease-smooth-out) !important;
  visibility: hidden;
}
html.is-mobile .shell > .rail.open {
  transform: translateX(0);
  visibility: visible;
  box-shadow: 24px 0 60px rgba(0, 0, 0, 0.5);
  transition: transform var(--duration-slow) var(--ease-smooth-out), box-shadow var(--duration-slow) var(--ease-smooth-out), visibility 0s !important;
}
html.is-mobile .shell > .rail:not(.open) { transition: transform var(--duration-medium) var(--ease-smooth-out), box-shadow var(--duration-medium) var(--ease-smooth-out), visibility 0s linear var(--duration-medium) !important; }
html.is-mobile .shell > .rail-scrim {
  display: block !important;
  position: fixed; inset: 0; z-index: 79;
  background: rgba(8, 7, 6, 0.62);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none !important;
  transition: opacity var(--duration-medium) var(--ease-smooth-out);
}
html.is-mobile .shell > .rail-scrim.open { opacity: 1; pointer-events: auto !important; transition-duration: var(--duration-slow); }
html.is-mobile .rail .rail-nav { padding-top: 14px !important; }
html.is-mobile .rail .rail-nav-btn[data-stage="tools"] { display: none !important; }
/* The drawer's rows stagger in when it opens. */
html.is-mobile .rail.open .rail-nav-btn,
html.is-mobile .rail.open .org-project,
html.is-mobile .rail.open .org-staff-wrap,
html.is-mobile .rail.open > .org > * { animation: t-rise var(--duration-slow) var(--ease-smooth-out) both; }
html.is-mobile .rail.open > .org > *:nth-child(1) { animation-delay: 40ms; }
html.is-mobile .rail.open > .org > *:nth-child(2) { animation-delay: 80ms; }
html.is-mobile .rail.open > .org > *:nth-child(3) { animation-delay: 120ms; }
html.is-mobile .rail.open > .org > *:nth-child(4) { animation-delay: 160ms; }
html.is-mobile .rail.open > .org > *:nth-child(5) { animation-delay: 200ms; }
html.is-mobile .rail.open > .org > *:nth-child(6) { animation-delay: 240ms; }
html.is-mobile .rail.open > .org > *:nth-child(n+7) { animation-delay: 280ms; }

/* Phone header: menu, the page you are on, settings. */
html.is-mobile body > header.bar { padding: env(safe-area-inset-top, 0px) 8px 0 6px !important; }
html.is-mobile .bar .mark-row { display: none !important; }
html.is-mobile .bar .mobile-settings-btn { display: inline-grid !important; }
html.is-mobile .bar-right > :not(.mobile-settings-btn):not(#pulse) { display: none !important; }
/* The page names itself in the header, so the in-page title does not repeat it. */
html.is-mobile #stage-chat .chat-head .chat-where,
html.is-mobile #stage-chat .chat-head .chat-folder,
html.is-mobile #stage-chat .chat-head .chat-capability { display: none !important; }
html.is-mobile #stage-chat .chat-head { padding: 0 !important; border: 0 !important; min-height: 0 !important; }
html.is-mobile .home-head .home-title, html.is-mobile .home-head .home-kicker { display: none; }
html.is-mobile .home-head { margin-bottom: 4px; }

/* ── Page transitions ───────────────────────────────────────────────────── */
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(main) { animation-duration: var(--duration-fast); animation-timing-function: var(--ease-smooth-out); }
::view-transition-old(main) { animation: t-page-out var(--duration-quick) var(--ease-smooth-out) both; }
::view-transition-new(main) { animation: t-page-in var(--duration-fast) var(--ease-smooth-out) both; }
html[data-nav-dir="back"]::view-transition-old(main) { animation-name: t-page-out-back; }
html[data-nav-dir="back"]::view-transition-new(main) { animation-name: t-page-in-back; }
@keyframes t-page-in { from { opacity: 0; transform: translateX(14px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes t-page-out { to { opacity: 0; transform: translateX(-10px); filter: blur(3px); } }
@keyframes t-page-in-back { from { opacity: 0; transform: translateX(-14px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes t-page-out-back { to { opacity: 0; transform: translateX(10px); filter: blur(3px); } }
/* Browsers without view transitions: the new page still slides in. */
.workspace.on.is-entering { animation: t-page-in var(--duration-fast) var(--ease-smooth-out) both; }
.workspace.on.is-entering-back { animation: t-page-in-back var(--duration-fast) var(--ease-smooth-out) both; }
/* Switching CEO: the conversation resolves in rather than blinking. */
.chat-col.is-swapping .chat-head,
.chat-col.is-swapping #todayDock,
.chat-col.is-swapping #stream { animation: t-rise var(--duration-slow) var(--ease-smooth-out) both; }
.chat-col.is-swapping #todayDock { animation-delay: 30ms; }
.chat-col.is-swapping #stream { animation-delay: 60ms; }

@keyframes t-rise { from { opacity: 0; transform: translateY(8px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes t-text-swap { 0% { opacity: 0; transform: translateY(6px); filter: blur(2px); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes t-fade { from { opacity: 0; } to { opacity: 1; } }

/* ── Home ───────────────────────────────────────────────────────────────── */
#homeGrid.is-revealing .home-summary,
#homeGrid.is-revealing .home-row,
#homeGrid.is-revealing .home-helper,
#homeGrid.is-revealing .home-add,
#homeStrip.is-revealing .home-line { animation: t-rise var(--duration-slow) var(--ease-smooth-out) both; }
#homeGrid.is-revealing .home-row:nth-child(2) { animation-delay: 40ms; }
#homeGrid.is-revealing .home-row:nth-child(3) { animation-delay: 80ms; }
#homeGrid.is-revealing .home-row:nth-child(4) { animation-delay: 120ms; }
#homeGrid.is-revealing .home-row:nth-child(5) { animation-delay: 160ms; }
#homeGrid.is-revealing .home-row:nth-child(6) { animation-delay: 200ms; }
#homeGrid.is-revealing .home-row:nth-child(n+7) { animation-delay: 240ms; }
#homeGrid.is-revealing .home-helper, #homeGrid.is-revealing .home-add { animation-delay: 260ms; }
.home-table tr.home-row { transition: background var(--duration-quick) var(--ease-smooth-out), transform var(--duration-quick) var(--ease-smooth-out), border-color var(--duration-quick) var(--ease-smooth-out); }
html.is-mobile .home-table tr.home-row:active { transform: scale(0.985); }
/* Skeleton while Home loads the first time. */
.home-skel { display: grid; gap: 10px; }
.home-skel i { display: block; height: 64px; border-radius: 14px; background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%); background-size: 300% 100%; animation: t-skel 1.4s linear infinite; }
.home-skel i:nth-child(1) { height: 22px; width: 60%; border-radius: 8px; }
@keyframes t-skel { from { background-position: 100% 0; } to { background-position: -200% 0; } }

/* ── Settings: one sheet, same size on every tab ────────────────────────── */
#settings.drawer { grid-template-columns: minmax(0, 1fr) min(880px, 100%) !important; z-index: 95 !important; }
#settings .drawer-scrim { background: rgba(8, 7, 6, 0.58) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: t-fade var(--duration-slow) var(--ease-smooth-out) both !important; }
#settings .drawer-card {
  height: 100%; max-height: 100% !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  background: #161411 !important;
  border-left: 1px solid var(--hair-strong) !important;
  animation: t-sheet-in-right var(--duration-slow) var(--ease-smooth-out) both !important;
}
#settings.is-closing .drawer-card { animation: t-sheet-out-right var(--duration-medium) var(--ease-smooth-out) both !important; }
#settings.is-closing .drawer-scrim { animation: t-fade var(--duration-medium) var(--ease-smooth-out) reverse both !important; }
@keyframes t-sheet-in-right { from { opacity: 0; transform: translateX(32px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes t-sheet-out-right { to { opacity: 0; transform: translateX(32px); filter: blur(2px); } }
#settings .drawer-top { align-items: center !important; padding: 14px 18px 14px 22px !important; border-bottom: 1px solid var(--hair) !important; }
#settings .drawer-top h2 { font: 600 22px/1.2 var(--display) !important; letter-spacing: -0.01em; }
#settings .drawer-top h2.is-swapping { animation: t-text-swap var(--duration-fast) var(--ease-in-out); }
#settings .drawer-top .eyebrow { font-size: 11px; letter-spacing: 0.2em; }
#settings .drawer-top-actions { display: flex; align-items: center; gap: 6px; }
#settings #toggleSettingsAdvanced { height: 34px !important; min-height: 0 !important; padding: 0 12px !important; font-size: 13px !important; border-radius: 999px !important; color: var(--muted) !important; border: 1px solid var(--hair-strong) !important; background: transparent !important; box-shadow: none !important; }
#settings #closeSettings {
  width: 38px !important; height: 38px !important; min-height: 0 !important; padding: 0 !important;
  border-radius: 50% !important; font-size: 0 !important; position: relative;
  border: 1px solid var(--hair-strong) !important; background: transparent !important; box-shadow: none !important; outline-offset: 2px;
}
#settings #closeSettings::before, #settings #closeSettings::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.6px; border-radius: 2px; background: var(--strong);
  transform: translate(-50%, -50%) rotate(45deg);
}
#settings #closeSettings::after { transform: translate(-50%, -50%) rotate(-45deg); }
#settings #closeSettings:hover { background: var(--hair) !important; }
#settings .drawer-grid { min-height: 0; height: 100%; }
#settings .drawer-body { min-height: 0; height: 100%; overscroll-behavior: contain; scroll-padding-top: 12px; }
#settings .drawer-panel.on { animation: t-rise var(--duration-fast) var(--ease-smooth-out) both; }
/* Desktop tabs: a column with a pill that slides to the chosen tab. */
#settings .drawer-nav { position: relative; }
#settings .drawer-nav .drawer-tab { position: relative; z-index: 1; background: transparent !important; transition: color var(--duration-fast) var(--ease-smooth-out); }
#settings .drawer-nav .drawer-tab.on { color: var(--ink) !important; font-weight: 600; }
#settings .drawer-nav .tab-pill {
  position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none;
  border-radius: 10px; background: var(--bronze-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bronze) 28%, transparent);
  transition: transform var(--duration-fast) var(--ease-smooth-out), width var(--duration-fast) var(--ease-smooth-out), height var(--duration-fast) var(--ease-smooth-out), opacity var(--duration-quick);
}
#settings .drawer-nav .tab-pill.no-anim { transition: none; }
#settings .drawer-nav-compact .drawer-tab.on { background: transparent !important; box-shadow: none !important; border-color: transparent !important; }

/* Phone: settings is a full screen sheet that rises in; the tab row slides sideways under a fixed header. */
html.is-mobile #settings.drawer { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; align-items: stretch !important; }
html.is-mobile #settings .drawer-scrim { display: none; }
html.is-mobile #settings .drawer-card {
  grid-row: 1 !important; grid-column: 1 !important;
  width: 100% !important; height: 100dvh !important; max-height: none !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  padding-top: env(safe-area-inset-top, 0px);
  animation: t-sheet-in-up var(--duration-slow) var(--ease-smooth-out) both !important;
}
html.is-mobile #settings.is-closing .drawer-card { animation: t-sheet-out-down var(--duration-medium) var(--ease-smooth-out) both !important; }
@keyframes t-sheet-in-up { from { opacity: 0; transform: translateY(36px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes t-sheet-out-down { to { opacity: 0; transform: translateY(36px); filter: blur(2px); } }
html.is-mobile #settings .drawer-top { padding: 10px 10px 10px 18px !important; min-height: 60px; }
html.is-mobile #settings .drawer-top .eyebrow { display: none; }
html.is-mobile #settings .drawer-top h2 { font-size: 24px !important; margin: 0 !important; }
html.is-mobile #settings .drawer-grid { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr) !important; }
html.is-mobile #settings .drawer-nav {
  flex-direction: row !important; flex-wrap: nowrap !important;
  overflow-x: auto !important; overflow-y: hidden !important;
  gap: 2px !important;
  padding: 8px 12px !important;
  border: 0 !important; border-bottom: 1px solid var(--hair) !important;
  scroll-behavior: smooth; scrollbar-width: none;
  scroll-padding: 0 40px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 24px), transparent 100%);
}
html.is-mobile #settings .drawer-nav::-webkit-scrollbar { display: none; }
html.is-mobile #settings .drawer-nav .drawer-tab {
  flex: 0 0 auto !important; height: 36px !important; min-height: 36px !important;
  padding: 0 14px !important; border-radius: 999px !important;
  font-size: 14px !important; line-height: 36px; white-space: nowrap;
  border: 0 !important; margin: 0 !important;
}
html.is-mobile #settings .drawer-nav .settings-nav-ceo.drawer-tab { border-left: 0 !important; padding-left: 14px !important; }
html.is-mobile #settings .drawer-nav .tab-pill { border-radius: 999px; }
html.is-mobile #settings .drawer-body { padding: 16px 16px calc(40px + env(safe-area-inset-bottom, 0px)) !important; }
html.is-mobile #settings .drawer-panel.on { gap: 14px; }

/* ── Chat composer ──────────────────────────────────────────────────────── */
#chatDock .composer, .wb-composer {
  border-radius: 20px !important;
  border: 1px solid var(--hair-strong) !important;
  background: var(--surface-2) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
  transition: border-color var(--duration-fast) var(--ease-smooth-out), box-shadow var(--duration-fast) var(--ease-smooth-out) !important;
}
#chatDock .composer:focus-within, .wb-composer:focus-within {
  border-color: color-mix(in srgb, var(--bronze) 55%, transparent) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 0 4px color-mix(in srgb, var(--bronze) 12%, transparent) !important;
}
#chatDock .composer-input-row { align-items: flex-end !important; gap: 6px !important; padding: 6px !important; }
#chatDock .composer textarea#msg {
  background: transparent !important; border: 0 !important; box-shadow: none !important; outline: none !important;
  padding: 10px 4px !important; min-height: 44px !important; line-height: 1.45 !important; font-size: 16px !important;
  resize: none;
}
#chatDock .attach-btn {
  width: 40px !important; height: 40px !important; min-width: 40px; padding: 0 !important;
  border-radius: 50% !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
  font-size: 0 !important; position: relative; color: var(--muted);
}
#chatDock .attach-btn::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 11.5 12.3 19.2a5 5 0 0 1-7.1-7.1l8-8a3.4 3.4 0 0 1 4.8 4.8l-8 8a1.7 1.7 0 0 1-2.4-2.4l7.3-7.3' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 11.5 12.3 19.2a5 5 0 0 1-7.1-7.1l8-8a3.4 3.4 0 0 1 4.8 4.8l-8 8a1.7 1.7 0 0 1-2.4-2.4l7.3-7.3' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
#chatDock .attach-btn:hover { color: var(--ink); background: var(--hair) !important; }
#chatDock #sendBtn, .wb-composer #wbSend {
  height: 40px !important; min-height: 40px !important; min-width: 40px;
  padding: 0 14px 0 16px !important; border-radius: 999px !important;
  display: inline-flex !important; align-items: center; gap: 6px;
  font: 600 14px/1 var(--ui) !important;
  transition: transform var(--duration-quick) var(--ease-smooth-out), opacity var(--duration-quick), filter var(--duration-quick) !important;
}
#chatDock #sendBtn::after, .wb-composer #wbSend::after {
  content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 19V5M5.5 11.5 12 5l6.5 6.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 19V5M5.5 11.5 12 5l6.5 6.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
#chatDock #sendBtn:disabled, .wb-composer #wbSend:disabled { opacity: 0.45; filter: saturate(0.6); }
#chatDock #sendBtn:active, .wb-composer #wbSend:active { transform: scale(0.95); }
/* Work pills above the composer: a quiet scroll row, not a second toolbar. */
#chatDock .work-tabs {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  padding: 0 2px 8px !important; margin: 0 !important; gap: 6px !important;
  overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap !important;
}
#chatDock .work-tabs::-webkit-scrollbar { display: none; }
#chatDock .work-tabs .work-tab {
  flex: 0 0 auto !important; height: 32px !important; min-height: 0 !important; padding: 0 12px !important;
  border-radius: 999px !important; font-size: 13px !important;
  border: 1px solid var(--hair-strong) !important; background: rgba(20, 18, 16, 0.85) !important; box-shadow: none !important;
  color: var(--strong) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color var(--duration-quick) var(--ease-smooth-out), color var(--duration-quick), background var(--duration-quick) !important;
}
#chatDock .work-tabs .work-tab:hover { border-color: color-mix(in srgb, var(--bronze) 60%, transparent) !important; }
#chatDock .work-tabs .work-tab.on { border-color: var(--bronze) !important; color: var(--bronze) !important; background: var(--bronze-soft) !important; }
/* The dock sits on a soft fade, not a slab. */
#chatDock.chat-dock {
  background: linear-gradient(180deg, rgba(16, 15, 13, 0) 0%, rgba(16, 15, 13, 0.92) 26%, var(--bg) 100%) !important;
  border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
}
/* New chat composer: text on top, modes and send on one tidy row. */
.wb-composer { padding: 10px 10px 8px 14px !important; gap: 6px !important; }
.wb-composer textarea { font-size: 16px !important; line-height: 1.45; min-height: 52px !important; }
.wb-composer-bar { gap: 6px !important; flex-wrap: nowrap !important; min-width: 0; }
.wb-composer-bar .wb-modes { flex: none; border-color: var(--hair-strong) !important; }
.wb-composer-bar .wb-mode { transition: background var(--duration-fast) var(--ease-smooth-out), color var(--duration-fast) var(--ease-smooth-out); }
.wb-composer-bar .wb-model { min-width: 0; flex: 0 1 auto; max-width: 180px !important; height: 32px; min-height: 32px !important; padding: 0 8px !important; border-radius: 999px !important; font-size: 12px !important; border: 1px solid var(--hair-strong) !important; background: transparent !important; color: var(--muted) !important; }
.wb-composer-bar .wb-mode-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.wb-composer-bar .send { margin-left: auto; flex: none; }
html.is-mobile .wb-composer-bar .wb-mode-note { display: none; }
html.is-mobile .wb-composer-bar .wb-model { max-width: 96px !important; }
html.is-mobile .wb-composer-bar .wb-mode { padding: 6px 10px !important; }
html.is-mobile .wb-composer-bar .wb-depth .wb-mode { padding: 5px 8px !important; }
html.is-mobile .wb-main { padding: 0 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important; }
html.is-mobile .wb-title-row { padding: 10px 2px 8px !important; }
.wb-stream > .is-new, .wb-stream > .wb-wait, .wb-stream > .wb-empty { animation: t-rise var(--duration-slow) var(--ease-smooth-out) both; }
/* "Thinking…" shimmers while it waits (thinking-states pattern); the answer itself paints plain as it streams. */
.wb-wait .thinking-label {
  background: linear-gradient(90deg, var(--muted) 0%, var(--muted) 40%, var(--ink) 50%, var(--muted) 60%, var(--muted) 100%);
  background-size: 400% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  animation: t-think 2s linear infinite;
}
@keyframes t-think { from { background-position: 100% 0; } to { background-position: 0% 0; } }

/* ── Sheets, toasts, buttons ───────────────────────────────────────────── */
#stage-chat #chatSchedule:not([hidden]) { animation: t-sheet-in-up var(--duration-slow) var(--ease-smooth-out) both; }
#stage-chat #chatSchedule.is-closing { animation: t-sheet-out-down var(--duration-medium) var(--ease-smooth-out) both; }
.toast {
  animation: t-toast-in var(--duration-medium) var(--ease-smooth-out) both !important;
  transition: opacity var(--duration-fast) var(--ease-smooth-out), transform var(--duration-fast) var(--ease-smooth-out), filter var(--duration-fast) var(--ease-smooth-out) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  background: rgba(31, 28, 24, 0.94) !important;
}
.toast.is-out { opacity: 0 !important; transform: translateY(-10px) scale(0.97) !important; filter: blur(2px); }
@keyframes t-toast-in { from { opacity: 0; transform: translateY(-10px) scale(0.97); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
button.send, button.ghost-btn, .desk-pill, .home-prob, .wb-mode, .wb-starter, .org-chats-new {
  transition: transform var(--duration-quick) var(--ease-smooth-out), background var(--duration-quick) var(--ease-smooth-out), border-color var(--duration-quick) var(--ease-smooth-out), color var(--duration-quick) var(--ease-smooth-out), opacity var(--duration-quick);
}
button.send:active:not(:disabled), button.ghost-btn:active:not(:disabled), .desk-pill:active, .home-prob:active, .wb-starter:active { transform: scale(0.97); }
/* "Working…" shimmers while the board is on it. */
button.is-busy { position: relative; overflow: hidden; }
button.is-busy::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 244, 222, 0.16) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: t-sweep 1.3s linear infinite;
}
@keyframes t-sweep { to { transform: translateX(100%); } }
details > summary { transition: color var(--duration-quick) var(--ease-smooth-out); }
details[open] > :not(summary) { animation: t-rise var(--duration-fast) var(--ease-smooth-out) both; }

@media (prefers-reduced-motion: reduce) {
  .shell, .shell > .rail, .rail-scrim, #settings .drawer-card, #settings .drawer-nav .tab-pill, .toast { transition: none !important; }
  *, *::before, *::after { animation: none !important; }
  ::view-transition-old(main), ::view-transition-new(main) { animation: none !important; }
}

/* Drawer header (phone): the brand and a way out. */
.rail-head { display: none; }
html.is-mobile .rail-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 10px 8px 18px;
  border-bottom: 1px solid var(--hair);
}
.rail-head .mark-gem { width: 28px; height: 28px; border-radius: 8px; background: #000; }
.rail-head-word { font: 500 16px/1 var(--display); letter-spacing: 0.06em; color: var(--ink); flex: 1; }
.rail-close {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  border: 0; background: transparent; color: var(--strong); cursor: pointer;
  transition: background var(--duration-quick) var(--ease-smooth-out), transform var(--duration-quick) var(--ease-smooth-out);
}
.rail-close:hover { background: var(--hair); }
.rail-close:active { transform: scale(0.94); }

/* Composer: no gaps for the hidden chips; they get their own margin when they show. */
#chatDock .composer { row-gap: 0 !important; gap: 0 !important; padding: 0 !important; }
#chatDock .composer > .reply-chip:not(.hidden),
#chatDock .composer > .attachments-preview:not(.hidden) { margin: 8px 8px 0 !important; }
#chatDock .composer > #workHint:not(.hidden) { margin: 0 14px 10px !important; }
#chatDock .composer textarea#msg::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: color-mix(in srgb, var(--muted) 85%, transparent); }
#chatDock.chat-dock { padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important; }

/* Drawer footer: two quiet actions, not shouting capitals. */
.rail .org-add-slot { padding: 8px 12px 12px !important; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-top: 1px solid var(--hair); }
.rail .org-add-slot .org-add {
  min-height: 38px !important; height: 38px; padding: 0 10px !important;
  border-radius: 12px !important; border: 1px solid var(--hair-strong) !important;
  font: 500 13px/1 var(--ui) !important; letter-spacing: 0 !important; text-transform: none !important;
  color: var(--strong) !important; background: transparent !important;
}
.rail .org-add-slot #addCeoBtn { border-style: dashed !important; color: var(--bronze) !important; border-color: color-mix(in srgb, var(--bronze) 45%, transparent) !important; }
.rail .org-add-slot .org-add:only-child { grid-column: 1 / -1; }

/* Home actions: New chat leads; Refresh is a quiet second. */
.home-head-actions #homeRefresh { background: transparent !important; color: var(--strong) !important; border: 1px solid var(--hair-strong) !important; box-shadow: none !important; }
.home-head-actions #homeWorkbench { background: linear-gradient(180deg, #d6b47a, #c29a5c) !important; color: #1a140c !important; border: 0 !important; font-weight: 600; }
html.is-mobile .home-head-actions > * { height: 42px; padding: 0 12px !important; font-size: 14px !important; border-radius: 12px !important; }
html.is-mobile .home-head-actions { margin-bottom: 12px; align-items: stretch; }  /* the 42px buttons sat on top of the "things need you" chip */
html.is-mobile .home-wrap { padding-top: 12px !important; }
.home-line { gap: 8px !important; }
/* An action row with a hint under it: buttons side by side, then the hint on its own line, never off screen.
   (A one-column grid stacked Save / Clear PIN / Clear license as a tower of mismatched pills.) */
#settings .drawer-body .actions:has(> p) { display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px !important; height: auto !important; max-height: none !important; }
#settings .drawer-body .actions:has(> p) > p { margin: 0; flex: 1 0 100%; }
#settings .drawer-body .actions:has(> p) > p:empty { display: none; }

/* The whole nav scrolls as one list, so every company is always reachable. */
.shell > .rail { overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--hair-strong) transparent; }
.shell > .rail > .org { flex: none !important; overflow: visible !important; min-height: auto !important; }
.shell > .rail > .org-chats-slot, .shell > .rail > .org-todos-slot { flex: none !important; }
.shell > .rail > .org-chats-slot .org-chats-list, .shell > .rail > .org-chats-slot ul { max-height: none !important; overflow: visible !important; }
.shell > .rail > .org-add-slot { margin-top: auto; position: sticky; bottom: 0; background: var(--bg-rail); z-index: 2; }
html.is-mobile .shell > .rail > .org-add-slot { background: #13110f; }
.shell > .rail > .rail-head { position: sticky; top: 0; z-index: 3; background: #13110f; }

/* Explicit columns: a hidden splitter must never move the page into its slot. */
.shell > .rail { grid-column: 1; grid-row: 1; }
.shell > .rail-splitter { grid-column: 2; grid-row: 1; }
.shell > .shell-main { grid-column: 3; grid-row: 1; }
html.is-mobile .shell > .shell-main { grid-column: 1; }

/* Phone: the engines table reads as one card per engine. */
@media (max-width: 700px) {
  #settings .sys-table, #settings .sys-table tbody { display: block !important; overflow: visible !important; }
  #settings .sys-table thead { display: none; }
  #settings .sys-table tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 12px 14px; margin: 0 0 8px; border: 1px solid var(--hair-strong); border-radius: 14px; background: var(--surface); }
  #settings .sys-table td { display: block; padding: 0 !important; border: 0 !important; font-size: 13px; min-width: 0; }
  #settings .sys-table td[data-label="Engine"] { grid-column: 1; font-size: 15px; }
  #settings .sys-table td.sys-act { grid-column: 2; grid-row: 1; text-align: right; }
  #settings .sys-table td[data-label="Running"], #settings .sys-table td[data-label="Pinned"], #settings .sys-table td[data-label="Latest"] { grid-column: 1 / -1; color: var(--muted); }
  #settings .sys-table td[data-label]:not([data-label="Engine"])::before { content: attr(data-label) " · "; color: var(--muted); opacity: 0.8; }
}

/* Desk status on a phone: one card per field, text boxes grow with their words. */
@media (max-width: 700px) {
  #settings .memory-cards { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  #settings .memory-cards textarea { field-sizing: content; min-height: 64px !important; max-height: 40vh; height: auto !important; overflow: auto; }
  #settings .create-handoff-form { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 8px !important; }
  #settings .create-handoff-form input { grid-column: 1 / -1; }
}

/* A desk's thread loading: placeholder bubbles, not the last desk's messages. */
.stream-skel { display: grid; gap: 12px; padding: 18px 4px; }
.stream-skel i { display: block; height: 58px; width: 78%; border-radius: 16px; background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%); background-size: 300% 100%; animation: t-skel 1.4s linear infinite; }
.stream-skel i.is-user { justify-self: end; width: 56%; height: 44px; }
.stream-skel i.is-short { width: 48%; height: 40px; }
.stream-skel p { margin: 4px 2px 0; font-size: 13px; }

/* Wrong PIN: the field shakes and turns red for a moment (error-state shake). */
#unlockPin.is-shaking { animation: t-shake 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both; border-color: #d9534f !important; }
@keyframes t-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}
#unlockGate .panel { animation: t-rise var(--duration-slow) var(--ease-smooth-out) both; }
#unlockError:not(:empty) { color: #e48f7a; margin-top: 10px; animation: t-text-swap var(--duration-fast) var(--ease-in-out); }

/* ── Exits: ease in and out, so a panel is seen leaving rather than snapping away ── */
:root { --ease-exit: cubic-bezier(0.45, 0, 0.55, 1); --duration-exit: 320ms; }
html.is-mobile .shell > .rail:not(.open) {
  transition: transform var(--duration-exit) var(--ease-exit), box-shadow var(--duration-exit) var(--ease-exit), visibility 0s linear var(--duration-exit) !important;
}
html.is-mobile .shell > .rail-scrim:not(.open) { transition: opacity var(--duration-exit) var(--ease-exit); }
#settings.is-closing .drawer-card { animation-timing-function: var(--ease-exit) !important; animation-duration: var(--duration-exit) !important; }
#stage-chat #chatSchedule.is-closing { animation: t-sheet-out-down var(--duration-exit) var(--ease-exit) both !important; }
.toast.is-out { transition-timing-function: var(--ease-exit) !important; }

/* ── Work sheets ────────────────────────────────────────────────────────── */
#chatSchedule .activity-bar { align-items: center !important; gap: 12px; padding: 14px 16px 8px !important; border-bottom: 0 !important; }
#chatSchedule #activityTitle { display: grid !important; gap: 2px; min-width: 0; }
#chatSchedule .activity-title-main { font: 600 20px/1.2 var(--display) !important; color: var(--ink) !important; letter-spacing: -0.01em; }
#chatSchedule .activity-title-sub { font: 400 12.5px/1.3 var(--ui) !important; color: var(--muted) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chatSchedule #activityTitle.is-swapping > * { animation: t-text-swap var(--duration-fast) var(--ease-in-out); }
#chatSchedule .activity-close {
  width: 36px !important; height: 36px !important; min-height: 0 !important; padding: 0 !important; flex: none;
  border-radius: 50% !important; font-size: 0 !important; position: relative;
  border: 1px solid var(--hair-strong) !important; background: transparent !important; box-shadow: none !important;
}
#chatSchedule .activity-close::before, #chatSchedule .activity-close::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 1.6px; border-radius: 2px; background: var(--strong);
  transform: translate(-50%, -50%) rotate(45deg);
}
#chatSchedule .activity-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.sheet-tabs {
  position: relative; display: flex; gap: 2px; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth;
  padding: 4px 12px 10px; margin: 0;
  border-bottom: 1px solid var(--hair);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
}
.sheet-tabs::-webkit-scrollbar { display: none; }
.sheet-tab {
  position: relative; z-index: 1; flex: none;
  height: 32px; padding: 0 13px; border-radius: 999px; border: 0; background: transparent;
  font: 500 13.5px/32px var(--ui); color: var(--muted); cursor: pointer; white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-smooth-out);
}
.sheet-tab:hover { color: var(--strong); }
.sheet-tab.on { color: var(--ink); font-weight: 600; }
.sheet-tabs .tab-pill {
  position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; border-radius: 999px;
  background: var(--bronze-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bronze) 30%, transparent);
  transition: transform var(--duration-fast) var(--ease-smooth-out), width var(--duration-fast) var(--ease-smooth-out);
}
.sheet-tabs .tab-pill.no-anim { transition: none; }
#activityBody.is-swapping > * { animation: t-rise var(--duration-slow) var(--ease-smooth-out) both; }
#activityBody.is-swapping > *:nth-child(2) { animation-delay: 30ms; }
#activityBody.is-swapping > *:nth-child(3) { animation-delay: 60ms; }
#activityBody.is-swapping > *:nth-child(n+4) { animation-delay: 90ms; }
.sheet-count { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 12px; font-size: 13px; color: var(--muted); }
.sheet-count b { font: 600 22px/1 var(--display); color: var(--ink); }
.sheet-count span + span::before { content: "· "; }
/* The Handoffs body names itself in the header already. */
#activityBody .handoffs-title { display: none; }
#activityBody .handoffs-lead { margin-top: 0; font-size: 13px; color: var(--muted); }
/* Cleaner rows everywhere in the sheets. */
#activityBody .teamwork-pass { border-radius: 14px !important; border: 1px solid var(--hair-strong) !important; background: var(--surface) !important; padding: 12px 14px !important; box-shadow: none !important; }
#activityBody .teamwork-pass-task { font-size: 14px; line-height: 1.45; color: var(--ink); margin: 6px 0 4px; }
#activityBody .teamwork-pass-state { font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--hair-strong); color: var(--strong); background: transparent; }
#activityBody .teamwork-pass.is-open .teamwork-pass-state { color: #e0a44a; border-color: color-mix(in srgb, #e0a44a 45%, transparent); }
#activityBody .kit-sheet-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--hair); margin: 0; }
#activityBody .kit-sheet-row span { color: var(--muted); font-size: 13px; text-align: right; }
.wid-item > summary { transition: background var(--duration-quick) var(--ease-smooth-out); border-radius: 10px; }
.wid-item > summary:hover { background: var(--hair); }
.wid-item[open] { border-color: var(--hair-strong); }
.wid-hint { display: none; }

/* Sheet content never runs past the screen edge. */
#activityBody { overflow-x: hidden !important; }
#activityBody > *, #activityBody .schedule-kit-group, #activityBody .cron-card, #activityBody .cron-section, #activityBody .cron-owner { max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; }
#activityBody .cron-head { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; }
#activityBody .cron-head > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#activityBody .cron-head > span:not(.cron-roster-cta) { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
#activityBody .cron-card.failed .cron-head > span:not(.cron-roster-cta) { color: #e48f7a; }
#activityBody .cron-head .cron-roster-cta { grid-column: 1 / -1; }

/* AI & spend: one row per kind of job, its model on the right. */
.ai-lanes { display: grid; gap: 0; border: 1px solid var(--hair-strong); border-radius: 14px; overflow: hidden; }
.ai-lane { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--hair); }
.ai-lane:first-child { border-top: 0; }
.ai-lane-what { display: grid; gap: 2px; min-width: 0; }
.ai-lane-what b { font-size: 14.5px; color: var(--ink); }
.ai-lane-what small { font-size: 12px; color: var(--muted); line-height: 1.35; }
.ai-lane select { width: 100%; min-width: 0; }
@media (max-width: 700px) { .ai-lane { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

/* Work sheet: the header and tabs never shrink or get covered; only the list scrolls. */
#chatSchedule:not([hidden]) { display: flex !important; flex-direction: column !important; }
#chatSchedule > .activity-bar, #chatSchedule > .sheet-tabs { flex: none !important; position: relative; z-index: 3; background: var(--panel); }
#chatSchedule > .activity-bar { pointer-events: auto !important; cursor: grab; touch-action: none; user-select: none; }
#chatSchedule > .activity-bar:active { cursor: grabbing; }
#chatSchedule > #activityBody { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overscroll-behavior: contain; position: relative; z-index: 1; }
/* The grab handle: a bigger, easier target at the very top. */
#chatSchedule:not([hidden])::before { top: 8px !important; width: 44px !important; height: 5px !important; }
@media (max-width: 1023px) {
  /* One height on a phone, whatever tab is open, so nothing jumps up and down between tabs. */
  #chatSchedule:not([hidden]) { height: 100% !important; }
}

/* A decided Needs-you card: a green line saying what happened, then it folds away. */
.need-done { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; font-size: 13.5px; color: #bfe3cc; background: rgba(63, 166, 107, 0.12); border: 1px solid rgba(63, 166, 107, 0.35); animation: t-rise var(--duration-fast) var(--ease-smooth-out) both; }
.is-done { transition: opacity 250ms var(--ease-smooth-out); }
.is-leaving { opacity: 0; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; overflow: hidden; transition: height 380ms var(--ease-exit), opacity 250ms var(--ease-exit), margin 380ms var(--ease-exit), padding 380ms var(--ease-exit); }

/* ── The desk card: state, what is live, and a five-tab bar. Everything you press is here;
   the bottom of the chat is only the message box. */
#stage-chat #todayDock:has(.desk-bar) ~ .chat-dock #workTabs,
#stage-chat .chat-shell:has(.desk-bar) #workTabs { display: none !important; }
#stage-chat .desk-bar {
  display: flex !important; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 12px;
  padding: 14px !important; margin: 4px 0 12px !important;
  border: 1px solid var(--hair, rgba(255,255,255,0.07)) !important; border-radius: 20px !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel, #1a1816) 92%, #fff 2%), var(--panel, #1a1816)) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 12px 32px -18px rgba(0,0,0,0.6) !important;
}
.desk-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.desk-ring {
  position: relative; flex: none; width: 38px; height: 38px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: rgba(255,255,255,0.03); color: var(--strong, #eee); cursor: pointer; padding: 0;
  transition: transform var(--duration-quick, 150ms) var(--ease-smooth-out), background var(--duration-quick, 150ms);
}
.desk-ring:hover { background: rgba(255,255,255,0.06); }
.desk-ring:active { transform: scale(0.94); }
.desk-ring svg { position: absolute; inset: 4px; width: 30px; height: 30px; }
.desk-ring span { font: 600 12px/1 var(--ui); font-variant-numeric: tabular-nums; }
.desk-ring .ring-track { stroke: rgba(255,255,255,0.09); }
.desk-ring .ring-fill { transition: stroke-dasharray var(--duration-slow, 350ms) var(--ease-smooth-out); }
.desk-ring .ring-fill.is-full { stroke: #5fbf87; } .desk-ring .ring-fill.is-mid { stroke: var(--bronze, #c9a66b); } .desk-ring .ring-fill.is-low { stroke: #d9534f; }
.desk-state { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.desk-state-label {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11px/1.2 var(--ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted, #9a938a);
}
.desk-bar.is-bad .desk-state-label { color: #e0726e; }
.desk-bar.is-warn .desk-state-label { color: var(--bronze, #c9a66b); }
.desk-bar.is-live .desk-state-label { color: #5fbf87; }
.desk-pulse { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: desk-pulse 1.8s var(--ease-smooth-out) infinite; }
@keyframes desk-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }
.desk-state-text {
  margin: 0; font: 500 15px/1.35 var(--ui); color: var(--strong, #eee);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.desk-think {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 11px;
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--bronze, #c9a66b) 45%, transparent);
  background: color-mix(in srgb, var(--bronze, #c9a66b) 10%, transparent); color: var(--bronze, #c9a66b);
  font: 600 13px/1 var(--ui); cursor: pointer;
  transition: transform var(--duration-quick, 150ms) var(--ease-smooth-out), background var(--duration-quick, 150ms);
}
.desk-think svg { width: 17px; height: 17px; }
.desk-think:hover { background: color-mix(in srgb, var(--bronze, #c9a66b) 18%, transparent); }
.desk-think:active { transform: scale(0.95); }
.desk-think:disabled { opacity: 0.55; }
/* What is running or due: one quiet line inside the card. */
#stage-chat .desk-bar-live:not(:has(> :not([hidden]))) { display: none; }
#stage-chat .desk-bar-live { display: grid; gap: 6px; min-width: 0; margin-top: -4px; padding-left: 50px; }
#stage-chat .desk-bar-live .work-status,
#stage-chat .desk-bar-live .work-status.live-now-strip,
#stage-chat .desk-bar-live .ceo-live.dock-live {
  margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important; grid-column: auto !important; grid-row: auto !important;
}
#stage-chat .desk-bar-live .ceo-live.dock-live .ceo-pulse { padding: 0 !important; }
#stage-chat .desk-bar-live .ceo-live-dot { display: none; }
#stage-chat .desk-bar-live .work-status-live, #stage-chat .desk-bar-live .ceo-pulse-copy b { font: 500 13px/1.35 var(--ui) !important; color: var(--muted, #9a938a) !important; }
#stage-chat .desk-bar-live .live-watch-btn { height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; }
/* The tab bar: five equal tabs, icon over label, the open one lit. */
.desk-seg {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 4px;
  border-radius: 15px; background: rgba(0,0,0,0.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.desk-seg-btn {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-width: 0; height: 56px; padding: 0 2px; border: 0; border-radius: 11px; background: transparent;
  color: var(--muted, #9a938a); cursor: pointer; font: 500 11.5px/1.1 var(--ui);
  transition: background var(--duration-fast, 250ms) var(--ease-smooth-out), color var(--duration-quick, 150ms), transform var(--duration-quick, 150ms) var(--ease-smooth-out);
}
.desk-seg-btn:hover { color: var(--strong, #eee); background: rgba(255,255,255,0.035); }
.desk-seg-btn:active { transform: scale(0.96); }
.desk-seg-btn.on { color: var(--strong, #eee); background: rgba(255,255,255,0.08); box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 4px 12px -6px rgba(0,0,0,0.6); }
.desk-seg-btn.on .desk-seg-ico { color: var(--bronze, #c9a66b); }
.desk-seg-ico { position: relative; display: grid; place-items: center; width: 22px; height: 22px; }
.desk-seg-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desk-seg-n {
  position: absolute; top: -6px; left: 14px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  display: grid; place-items: center; font: 600 10px/1 var(--ui); font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,0.1); color: var(--strong, #eee); box-shadow: 0 0 0 2px var(--panel, #1a1816);
}
.desk-seg-btn.is-hot { color: var(--bronze, #c9a66b); }
.desk-seg-btn.is-hot .desk-seg-n { background: var(--bronze, #c9a66b); color: #1a1409; }
@media (min-width: 861px) {
  .desk-seg-btn { flex-direction: row; height: 42px; gap: 8px; font-size: 13px; }
  .desk-seg-ico { display: contents; }
  .desk-seg-ico svg { flex: none; }
  .desk-seg-n { position: static; order: 3; box-shadow: none; }
  .desk-seg-label { order: 2; }
}
@media (prefers-reduced-motion: reduce) { .desk-pulse { animation: none; } }
/* Do it · Code, with Run as on the chevron. */
.do-split { display: inline-flex; align-items: stretch; border-radius: 999px; }
.do-split > button[data-need-act="do_proposal"] { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; margin-right: 0 !important; }
.do-split .do-lane { opacity: 0.8; font-weight: 500; }
.do-runas { position: relative; display: inline-flex; align-items: center; }
.do-runas select {
  appearance: none; -webkit-appearance: none; height: 100%; min-height: 36px; width: 34px; padding: 0; margin: 0;
  border: 0; border-left: 1px solid rgba(0,0,0,0.25); border-radius: 0 999px 999px 0;
  background: var(--bronze, #c9a66b) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1409' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") center / 15px no-repeat;
  color: transparent; cursor: pointer; font-size: 16px;
}
.do-runas select option { color: #111; }
.need-error { margin: 8px 0 0; color: #e0726e; font-size: 13px; }
.do-split { display: flex; width: 100%; flex: 1 1 100%; }
.need-actions .do-split, .desk-need .do-split { margin: 0; }
.do-split > button[data-need-act="do_proposal"] {
  flex: 1 1 auto; min-width: 0; margin: 0 !important;
  background: var(--bronze, #c9a66b) !important; color: #1a1409 !important; border: 0 !important; box-shadow: none !important;
  font-weight: 600 !important;
  border-radius: 999px 0 0 999px !important;
}
.do-split > button[data-need-act="do_proposal"]:hover { filter: brightness(1.06); }
.do-split .do-lane { opacity: 0.72; font-weight: 600; }
.do-runas select { width: 46px; min-height: 100%; border-left: 1px solid rgba(26, 20, 9, 0.28); }
.do-runas select:hover { filter: brightness(1.06); }

/* The Watch button inside the desk card: a small pill, not a block. */
#stage-chat .desk-bar-live .live-watch-btn,
#stage-chat .desk-bar-live .live-more-btn { height: 30px !important; min-height: 0 !important; padding: 0 14px !important; flex: none; align-self: center; width: auto; }
#stage-chat .desk-bar-live .ceo-pulse { display: flex; align-items: center; gap: 10px; }
#stage-chat .desk-bar-live .ceo-pulse-copy { flex: 1 1 auto; min-width: 0; }
#stage-chat .desk-bar-live .ceo-pulse-copy b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#stage-chat .desk-bar-live .work-status-live { display: flex; align-items: center; gap: 10px; }
#stage-chat .desk-bar-live .live-now-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Long proposals: a few lines, then More. */
.desk-need .desk-need-title, .activity-body .desk-need-title { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.desk-need .desk-need-why { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.desk-need.is-open .desk-need-title, .desk-need.is-open .desk-need-why { -webkit-line-clamp: unset; display: block; }
.need-more { display: block; text-align: left; appearance: none; background: none; border: 0; padding: 4px 0; margin: 0 0 6px; color: var(--bronze, #c9a66b); font: 600 13px/1 var(--ui); cursor: pointer; }

/* Long messages you sent fold to a few lines. */
.bubble.user.is-long:not(.is-open) .bubble-text {
  max-height: 8.2em; overflow: hidden;
  -webkit-mask: linear-gradient(180deg, #000 62%, transparent); mask: linear-gradient(180deg, #000 62%, transparent);
}
.bubble-more-btn { appearance: none; background: none; border: 0; padding: 6px 0 2px; color: var(--bronze, #c9a66b); font: 600 13px/1 var(--ui); cursor: pointer; }
.do-split .do-lane { color: rgba(26, 20, 9, 0.72) !important; opacity: 1 !important; }

/* Live check: after a change ships — is it live, did anything break, how does it look. */
.livecheck { margin: 12px 0 4px; padding: 14px; border-radius: 16px; border: 1px solid var(--hair, rgba(255,255,255,0.07)); background: rgba(0,0,0,0.18); display: grid; gap: 10px; }
.livecheck.is-pass { border-color: color-mix(in srgb, #5fbf87 35%, transparent); }
.livecheck.is-warn { border-color: color-mix(in srgb, var(--bronze, #c9a66b) 40%, transparent); }
.livecheck.is-fail { border-color: color-mix(in srgb, #e0726e 45%, transparent); }
.lc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lc-badge { display: inline-flex; align-items: center; gap: 7px; font: 600 12px/1 var(--ui); letter-spacing: 0.06em; text-transform: uppercase; }
.lc-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.livecheck.is-pass .lc-badge { color: #5fbf87; } .livecheck.is-warn .lc-badge { color: var(--bronze, #c9a66b); } .livecheck.is-fail .lc-badge { color: #e0726e; }
.lc-when { color: var(--muted, #9a938a); font: 500 12.5px/1 var(--ui); }
.lc-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lc-facts li { position: relative; padding-left: 22px; font: 500 14px/1.4 var(--ui); color: var(--strong, #eee); overflow-wrap: anywhere; }
.lc-facts li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.lc-facts li.is-ok::before { content: "✓"; color: #5fbf87; }
.lc-facts li.is-warn::before { content: "…"; color: var(--bronze, #c9a66b); }
.lc-facts li.is-bad::before { content: "✕"; color: #e0726e; }
.lc-shots { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.lc-shots::-webkit-scrollbar { display: none; }
.lc-shot { flex: none; display: grid; gap: 6px; text-decoration: none; color: var(--muted, #9a938a); font: 500 11.5px/1.2 var(--ui); }
.lc-shot img { display: block; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); background: #fff; object-fit: cover; object-position: top; transition: transform var(--duration-quick, 150ms) var(--ease-smooth-out); }
.lc-shot.is-phone img { width: 96px; height: 208px; }
.lc-shot.is-desktop img { width: 250px; height: 164px; }
.lc-shot:hover img { transform: translateY(-2px); }
.wid-item.is-live-pass .wid-state { color: #5fbf87; }
.wid-item.is-live-warn .wid-state { color: var(--bronze, #c9a66b); }
.wid-item.is-live-fail .wid-state { color: #e0726e; }
.wid-body .livecheck { margin-top: 4px; }
/* The primary choice on a card (Fix it, Ship it, Retry…) is one solid gold button, the same size as the rest. */
#stage-chat .desk-need .need-actions > button.send, .desk-need .need-actions > button.send, .wid-body .need-actions > button.send, #chatSchedule .desk-need .need-actions > button.send {
  min-height: 44px !important; height: auto !important; padding: 12px 18px !important;
  background: var(--bronze, #c9a66b) !important; color: #1a1409 !important; border: 0 !important;
  font-weight: 600 !important; border-radius: 999px !important; box-shadow: none !important;
}
.desk-need .need-actions > button.send:hover, .wid-body .need-actions > button.send:hover { filter: brightness(1.06); }
#stage-chat #activityBody .need-actions > button.send,
#stage-chat #activityBody .need-actions > button.send:hover {
  min-height: 44px !important; height: auto !important; padding: 12px 18px !important;
  background: var(--bronze, #c9a66b) !important; color: #1a1409 !important; border: 0 !important;
  font-weight: 600 !important; border-radius: 999px !important; box-shadow: none !important;
}
#stage-chat #activityBody .need-actions > button.send:hover { filter: brightness(1.06); }

/* ── Progress (top of Done): goal → money → numbers → thinking → bets, then the work. ── */
.prog { display: grid; gap: 14px; margin: 2px 0 22px; }
.prog-k { margin: 0 0 6px; font: 600 11px/1.2 var(--ui); letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted, #9a938a); display: flex; gap: 8px; align-items: baseline; }
.prog-k span { text-transform: none; letter-spacing: 0; font-weight: 500; }
.prog-goal h3 { margin: 0; font: 600 21px/1.25 var(--display, Georgia, serif); color: var(--strong, #f2ece2); }
.prog-week { margin: 8px 0 0; font: 500 14px/1.45 var(--ui); color: var(--strong, #eee); display: flex; gap: 8px; }
.prog-week span, .prog-next span, .prog-alt span { flex: none; font: 600 11px/1.9 var(--ui); letter-spacing: 0.07em; text-transform: uppercase; color: var(--bronze, #c9a66b); }
.prog-row { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .prog-row { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.prog-money { padding: 12px 14px; border-radius: 16px; background: linear-gradient(160deg, color-mix(in srgb, var(--bronze, #c9a66b) 16%, transparent), transparent 70%), rgba(0,0,0,0.2); border: 1px solid color-mix(in srgb, var(--bronze, #c9a66b) 32%, transparent); display: grid; gap: 4px; align-content: start; }
.prog-money b { font: 600 24px/1.15 var(--display, Georgia, serif); color: var(--strong, #f2ece2); }
.prog-money.is-known b { font-size: 32px; color: var(--bronze, #c9a66b); }
.prog-money small { color: var(--muted, #9a938a); font: 500 13px/1.4 var(--ui); }
.prog-money .ghost-btn { justify-self: start; margin-top: 6px; }
.prog-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; align-content: start; }
.prog-num { padding: 10px 12px; border-radius: 14px; background: rgba(0,0,0,0.2); border: 1px solid var(--hair, rgba(255,255,255,0.07)); display: grid; gap: 3px; }
.prog-num b { font: 600 20px/1.1 var(--ui); font-variant-numeric: tabular-nums; color: var(--strong, #eee); }
.prog-num b i { font-style: normal; font-size: 13px; margin-left: 4px; color: #5fbf87; }
.prog-num span { font: 500 12px/1.3 var(--ui); color: var(--muted, #9a938a); }
.prog-num.is-stale { opacity: 0.6; }
.prog-think { padding: 14px; border-radius: 16px; border: 1px solid var(--hair, rgba(255,255,255,0.07)); background: rgba(255,255,255,0.02); display: grid; gap: 8px; }
.prog-aim { margin: 0; font: 600 14px/1.4 var(--ui); color: var(--bronze, #c9a66b); }
.prog-why { margin: 0; font: 400 15px/1.55 var(--ui); color: var(--strong, #eee); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.prog-next, .prog-alt { margin: 0; font: 500 14px/1.5 var(--ui); color: var(--strong, #eee); display: flex; gap: 8px; }
.prog-alt { display: none; color: var(--muted, #9a938a); }
.prog-think.is-open .prog-why { -webkit-line-clamp: unset; display: block; }
/* The next move is often a numbered chain: two lines until More opens it. */
.prog-next .prog-next-line { font: inherit; letter-spacing: 0; text-transform: none; color: var(--strong, #eee); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prog-think.is-open .prog-next .prog-next-line { -webkit-line-clamp: unset; display: block; }
.prog-think.is-open .prog-alt { display: flex; }
.prog-more { justify-self: start; }
.prog-think.is-empty .ghost-btn { justify-self: start; }
.prog-bets { display: grid; gap: 8px; }
.prog-bet { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,0.18); }
.prog-bet p { margin: 0; font: 500 14px/1.45 var(--ui); color: var(--strong, #eee); display: grid; gap: 2px; }
.prog-bet small { color: var(--muted, #9a938a); font-size: 12.5px; }
.prog-bet-state { flex: none; font: 600 10.5px/1 var(--ui); letter-spacing: 0.07em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; background: rgba(255,255,255,0.06); color: var(--muted, #9a938a); }
.prog-bet.is-won .prog-bet-state { background: color-mix(in srgb, #5fbf87 18%, transparent); color: #5fbf87; }
.prog-bet.is-lost .prog-bet-state { background: color-mix(in srgb, #e0726e 18%, transparent); color: #e0726e; }
.prog-h { margin: 6px 0 2px; font: 600 16px/1.3 var(--ui); color: var(--strong, #eee); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.prog-h span { font: 500 13px/1 var(--ui); color: var(--muted, #9a938a); }
.wid-for { display: block; margin-top: 3px; font: 500 12.5px/1.35 var(--ui); color: var(--bronze, #c9a66b); opacity: 0.9; white-space: normal; }
.prog-num b i.is-down { color: #e0726e; }
.prog-next .prog-next-text { flex: 1 1 auto; min-width: 0; font: inherit; letter-spacing: 0; text-transform: none; color: var(--strong, #eee); display: grid; gap: 2px; }
.prog-next .prog-next-text small { font: 500 12.5px/1.35 var(--ui); color: var(--muted, #9a938a); }

/* What this CEO can see: tap the ring. */
.sees-panel { border-top: 1px solid var(--hair, rgba(255,255,255,0.07)); padding-top: 12px; display: grid; gap: 10px; animation: t-rise var(--duration-fast, 250ms) var(--ease-smooth-out) both; }
.sees-panel[hidden] { display: none; }
.sees-head { margin: 0; font: 500 13px/1.4 var(--ui); color: var(--muted, #9a938a); }
.sees-head b { color: var(--strong, #eee); }
.sees-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sees-row { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 10px; align-items: start; }
.sees-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; background: #e0726e; }
.sees-row.is-on .sees-dot { background: #5fbf87; }
.sees-row.is-partial .sees-dot { background: var(--bronze, #c9a66b); }
.sees-row b { font: 600 14px/1.3 var(--ui); color: var(--strong, #eee); }
.sees-row small { display: block; font: 500 12.5px/1.35 var(--ui); color: var(--muted, #9a938a); }
.sees-have { margin: 4px 0 0; font: 500 12.5px/1.4 var(--ui); color: #8fcfaa; overflow-wrap: anywhere; }
.sees-miss { margin: 4px 0 0; font: 500 12.5px/1.4 var(--ui); color: var(--strong, #eee); overflow-wrap: anywhere; }
.sees-miss span { color: var(--bronze, #c9a66b); font-weight: 600; }
.sees-acts .send { min-height: 40px; padding: 0 16px; border-radius: 999px; }

/* An urgent customer's conversation, on the Needs-you card. */
.ticket-convo { display: grid; gap: 8px; margin: 10px 0; padding: 12px; border-radius: 14px; background: rgba(0,0,0,0.22); }
.convo-meta { margin: 0; font: 500 12px/1.4 var(--ui); color: var(--muted, #9a938a); }
.convo-line { margin: 0; font: 400 14px/1.45 var(--ui); color: var(--strong, #eee); max-width: 90%; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,0.05); }
.convo-line b { display: block; font: 600 11px/1.3 var(--ui); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted, #9a938a); margin-bottom: 2px; }
.convo-line.is-them { justify-self: start; }
.convo-line.is-us { justify-self: end; background: color-mix(in srgb, var(--bronze, #c9a66b) 14%, transparent); }
.support-snippet { display: block; margin: 8px 0; padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,0.3); font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--strong, #eee); overflow-wrap: anywhere; user-select: all; }

/* Rail: the companies live under Home (a nested list with a guide line); Tools sits below them. */
.org.org-under-home {
  margin: 0 10px 4px 28px !important;
  padding: 2px 0 2px 8px !important;
  border-left: 1px solid color-mix(in srgb, var(--hair-strong) 70%, transparent);
}
.rail-nav.rail-nav-tools {
  padding-top: 4px !important;
  border-top: 1px solid color-mix(in srgb, var(--hair-strong) 55%, transparent) !important;
  margin-top: 4px !important;
}

/* Company sheet: three tabs; Activity's views as quiet chips under it; what needs you leads Overview. */
.sheet-subtabs {
  display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  padding: 2px 18px 10px; margin: 0;
}
.sheet-subtabs[hidden] { display: none; }
.sheet-subtabs::-webkit-scrollbar { display: none; }
.sheet-chip {
  flex: 0 0 auto; min-height: 32px; padding: 0 12px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--hair-strong) 80%, transparent);
  background: transparent; color: var(--muted); font: 500 13px/1 var(--ui); cursor: pointer;
  transition: background var(--duration-fast) var(--ease-smooth-out), color var(--duration-fast) var(--ease-smooth-out), border-color var(--duration-fast) var(--ease-smooth-out);
}
.sheet-chip:hover { color: var(--ink); }
.sheet-chip.on {
  color: var(--ink); border-color: color-mix(in srgb, var(--bronze) 55%, transparent);
  background: color-mix(in srgb, var(--bronze) 14%, transparent);
}
.ov-needs {
  margin: 0 0 18px; padding: 14px 14px 4px; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--bronze) 45%, transparent);
  background: color-mix(in srgb, var(--bronze) 7%, transparent);
}

/* Rail order: Home (companies) · Chats · Tasks · Tools. Tools sits low, just above Add CEO. */
.shell > .rail > .rail-nav.rail-nav-tools { margin-top: auto !important; }
.shell > .rail > .rail-nav-tools + .org-add-slot { margin-top: 0; }

/* Tasks: one line per single-job desk, naming the company it works for. */
.org-task-list { list-style: none; margin: 0; padding: 0 0 4px; display: grid; gap: 2px; }
.org-btn.org-task {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; height: auto; min-height: 44px;
  padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; background: transparent;
  text-align: left; color: var(--ink); cursor: pointer;
  transition: background var(--duration-fast, 150ms) var(--ease-smooth-out, ease), border-color var(--duration-fast, 150ms) var(--ease-smooth-out, ease);
}
.org-btn.org-task:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
.org-btn.org-task.on { background: color-mix(in srgb, var(--bronze) 12%, transparent); border-color: color-mix(in srgb, var(--bronze) 40%, transparent); }
.org-task-dot { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--muted); opacity: 0.6; }
.org-task.is-working .org-task-dot { background: #5fbf87; opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, #5fbf87 22%, transparent); }
.org-task.is-blocked .org-task-dot { background: #e0a060; opacity: 1; }
.org-task-text { min-width: 0; display: grid; gap: 2px; }
.org-task-text b { font: 600 13.5px/1.3 var(--ui); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-task-text small { font: 500 12px/1.35 var(--ui); color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.org-task-text small em { font-style: normal; color: var(--bronze); }
.org-tasks .org-todos-empty { margin: 2px 4px 8px; font: 500 12px/1.4 var(--ui); color: var(--muted); }

/* The Activity chips never get squeezed by a short window: the body below scrolls instead. */
#chatSchedule > .sheet-subtabs { flex: none !important; position: relative; z-index: 3; background: var(--panel); padding-top: 6px; }
/* Tools sits at the rail's foot; Add CEO follows it in the flow instead of floating over it. */
.shell > .rail > .org-add-slot { position: static !important; }

/* Thinking card: a Think in flight says so, with a quiet pulse; More and Think again share one row. */
.prog-thinking { margin: 0; display: flex; gap: 10px; align-items: flex-start; font: 500 14px/1.45 var(--ui); color: var(--strong, #eee); padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--bronze) 10%, transparent); border: 1px solid color-mix(in srgb, var(--bronze) 30%, transparent); }
.prog-thinking b { color: var(--bronze); font-weight: 600; }
.prog-thinking i { flex: none; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--bronze); animation: prog-pulse 1.6s ease-in-out infinite; }
@keyframes prog-pulse { 0%, 100% { opacity: 0.35; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .prog-thinking i { animation: none; } }
.prog-acts { display: flex; gap: 16px; align-items: center; }
.prog-acts:empty { display: none; }
.prog-think.is-thinking .prog-why { opacity: 0.6; }

/* Revenue card: Connect Stripe or say this business does not use it. Without it, the numbers take the row. */
.prog-money-acts { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.prog-money-acts .ghost-btn { margin-top: 0; }
.prog-row.no-money { grid-template-columns: minmax(0, 1fr) !important; }

/* A pending reply: the label is the current step, so the log lists only earlier ones. */
.thinking-log > li:last-child { display: none; }

/* Add CEO / Hide other CEOs sit under the company list they act on, as one quiet row, not a bar at the rail's foot. */
.shell > .rail > .org-add-slot {
  position: static !important; margin: 0 10px 6px 30px !important; padding: 2px 0 6px !important;
  border-top: 0 !important; background: transparent !important; display: flex !important; gap: 6px; flex-wrap: nowrap;
}
.shell > .rail > .org-add-slot .org-add {
  min-height: 30px !important; padding: 0 12px !important; font: 500 12.5px/1 var(--ui) !important;
  border-radius: 999px !important; width: auto !important; flex: 0 1 auto; margin: 0 !important; white-space: nowrap;
}
html.is-mobile .shell > .rail > .org-add-slot { background: transparent !important; }

/* Tools: while an engine page loads, say so instead of showing a black box. */
.embed-wait { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 220px; margin: 12px 0; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--hair-strong) 80%, transparent); color: var(--muted); font: 500 14px/1.4 var(--ui); padding: 20px; text-align: center; }
.embed-wait[hidden] { display: none; }
.embed-wait i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--bronze); animation: prog-pulse 1.6s ease-in-out infinite; }
iframe.embed.is-loading { visibility: hidden; height: 0 !important; min-height: 0 !important; }

/* Your calls: each yes/no answer ends in what came of it. */
.ov-calls { display: grid; gap: 8px; margin: 0 0 18px; }
.ov-call { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--hair, rgba(255,255,255,0.07)); background: rgba(255,255,255,0.02); }
.ov-call-ans { flex: none; font: 600 11px/1 var(--ui); letter-spacing: .06em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; background: rgba(255,255,255,0.06); color: var(--muted); }
.ov-call-ans.is-yes { background: color-mix(in srgb, #5fbf87 18%, transparent); color: #5fbf87; }
.ov-call-body { min-width: 0; display: grid; gap: 4px; }
.ov-call-q { margin: 0; font: 600 14px/1.4 var(--ui); color: var(--strong, #eee); }
.ov-call-line { margin: 0; font: 500 13px/1.45 var(--ui); color: var(--muted); }
.ov-call-line b { color: var(--bronze); font-weight: 600; }
.ov-call.is-done .ov-call-line b { color: #5fbf87; }
.ov-call.is-failed .ov-call-line b { color: #e0726e; }
.ov-call-links { margin: 0; display: flex; gap: 14px; flex-wrap: wrap; font: 500 13px/1.4 var(--ui); }
.ov-call-links a { color: var(--bronze); text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }
.ov-call-links:empty { display: none; }

/* Drafts: every post and draft waiting for Adam, readable and editable in place. */
.drafts-lead { margin: 0 0 14px; font: 500 13px/1.5 var(--ui); color: var(--muted); }
.drafts-h { margin: 18px 0 8px; font: 600 12px/1 var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.drafts-h span { margin-left: 6px; color: var(--bronze); }
.drafts-empty { padding: 28px 16px; text-align: center; font: 500 14px/1.5 var(--ui); color: var(--muted); }
.draft-card { margin: 0 0 8px; border-radius: 14px; border: 1px solid var(--hair, rgba(255,255,255,0.07)); background: rgba(255,255,255,0.02); transition: border-color .2s, opacity .3s; }
.draft-card[open] { border-color: color-mix(in srgb, var(--bronze) 40%, transparent); }
.draft-card.is-done { opacity: .55; }
.draft-card summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; padding: 12px 14px; align-items: baseline; }
.draft-card summary::-webkit-details-marker { display: none; }
.draft-chan { font: 600 11px/1 var(--ui); letter-spacing: .05em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; background: rgba(255,255,255,0.06); color: var(--muted); white-space: nowrap; }
.draft-title { min-width: 0; font: 600 14px/1.4 var(--ui); color: var(--strong, #eee); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft-card[open] .draft-title { white-space: normal; }
.draft-meta { grid-column: 2; font: 500 12px/1.4 var(--ui); color: var(--muted); }
.draft-text { display: block; box-sizing: border-box; width: calc(100% - 28px); margin: 0 14px; padding: 12px; border-radius: 10px; border: 1px solid var(--hair, rgba(255,255,255,0.1)); background: rgba(0,0,0,0.18); color: inherit; font: 400 14px/1.55 var(--ui); resize: vertical; min-height: 120px; }
.draft-text.is-dirty { border-color: var(--bronze); }
.draft-path { margin: 6px 14px 0; font: 500 11px/1.4 var(--mono, ui-monospace, monospace); color: var(--muted); word-break: break-all; }
.draft-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 14px 14px; }
.draft-acts button { font: 600 13px/1 var(--ui); padding: 9px 13px; border-radius: 999px; border: 1px solid var(--hair, rgba(255,255,255,0.12)); background: rgba(255,255,255,0.04); color: inherit; cursor: pointer; }
.draft-acts button.primary { background: var(--bronze); border-color: var(--bronze); color: #111; }
.draft-acts button.ghost { background: transparent; color: var(--muted); }
.draft-acts button:disabled { opacity: .5; cursor: default; }
.draft-note { font: 500 12px/1.4 var(--ui); color: var(--muted); }
@media (max-width: 640px) { .draft-acts button { flex: 1 1 auto; } .draft-text { font-size: 16px; } }
.sheet-tab .tab-count { margin-left: 5px; font: 600 11px/1 var(--ui); padding: 2px 6px; border-radius: 999px; background: color-mix(in srgb, var(--bronze) 22%, transparent); color: var(--bronze); }
@media (max-width: 640px) { .draft-card summary { grid-template-columns: 1fr; } .draft-chan { justify-self: start; } .draft-meta { grid-column: 1; } }

/* One needs-you number beside each company in the rail. */
.ceo-work-badge.needs { border-color: var(--bronze); background: color-mix(in srgb, var(--bronze) 18%, transparent); color: var(--bronze); }

/* Decision brief: background, what yes and no each do, the CEO's call. */
.dec-brief { display: grid; gap: 10px; margin-top: 8px; }
.dec-bg { margin: 0; font: 400 14px/1.55 var(--ui); color: var(--strong, #e8e4dc); }
.dec-paths { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dec-path { margin: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--hair, rgba(255,255,255,0.08)); background: rgba(255,255,255,0.02); }
.dec-path dt { font: 600 11px/1.3 var(--ui); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.dec-path dt em { font-style: normal; margin-left: 6px; padding: 2px 6px; border-radius: 999px; background: color-mix(in srgb, var(--bronze) 22%, transparent); color: var(--bronze); letter-spacing: .02em; }
.dec-path dd { margin: 0; font: 400 13px/1.5 var(--ui); }
.dec-path.is-rec { border-color: color-mix(in srgb, var(--bronze) 55%, transparent); }
.dec-rec { margin: 0; font: 500 13px/1.5 var(--ui); }
.dec-rec span, .stuck-problem span, .stuck-run span { color: var(--muted); font-weight: 600; margin-right: 4px; }
.dec-spend { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px 12px; font: 500 13px/1.4 var(--ui); }
.dec-spend dt { color: var(--muted); font-weight: 600; font-size: 12px; }
.dec-spend dd { margin: 0; overflow-wrap: anywhere; }
.memory-admission { margin: 6px 0 0; padding-left: 18px; font: 400 13px/1.5 var(--ui); }
.memory-admission li { margin-bottom: 4px; overflow-wrap: anywhere; }
.stuck-problem, .stuck-run { margin: 4px 0 0; font: 400 13px/1.5 var(--ui); }
.need-raw pre { white-space: pre-wrap; word-break: break-word; font: 400 12px/1.45 var(--mono, ui-monospace, monospace); color: var(--muted); }
@media (max-width: 640px) { .dec-paths { grid-template-columns: 1fr; } }
.diff-warn { margin: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, #e0a85e 55%, transparent); background: color-mix(in srgb, #e0a85e 10%, transparent); font: 500 13px/1.5 var(--ui); color: #e9c48d; }
.dec-rec code { font: 400 12px/1.4 var(--mono, ui-monospace, monospace); padding: 1px 5px; border-radius: 6px; background: rgba(255,255,255,0.06); overflow-wrap: anywhere; word-break: break-word; }
.diff-carries { padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--hair, rgba(255,255,255,0.15)); font: 400 13px/1.5 var(--ui); }
.diff-carries p { margin: 0 0 4px; }
.diff-carries ul { margin: 0; padding-left: 18px; color: var(--muted); }
.dec-hands { margin: 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--bronze) 12%, transparent); border: 1px solid color-mix(in srgb, var(--bronze) 40%, transparent); font: 500 13px/1.5 var(--ui); }
.ov-call-ans small { display: block; margin-top: 3px; font: 600 9px/1 var(--ui); letter-spacing: .04em; text-transform: none; opacity: .8; }
/* Off-screen chat messages and overview sections skip layout and paint until they scroll near. Opening a company
   used to lay out every message of a long chat and every overview section at once: the biggest single freeze on a
   click. Needs-you cards always render (they are what Adam acts on, and their More button measures the text). */
#stream > *, #activityBody > :not(.ov-needs) { content-visibility: auto; contain-intrinsic-size: auto 120px; }
/* The newest messages always lay out for real, so "jump to the newest message" lands exactly on it. */
#stream > :nth-last-child(-n+12) { content-visibility: visible; }

/* Rail order: the boss and the chats first, then Home with the companies under it. */
.shell > .rail > .org-staff-slot { flex: none; padding: 6px 10px 2px; }
.shell > .rail > .org-staff-slot:empty { display: none; }
.shell > .rail > .org-staff-slot .share-banner { margin: 0; }
.shell > .rail > .org-chats-slot.is-top { border-top: 0; border-bottom: 1px solid color-mix(in srgb, var(--hair-strong) 55%, transparent); margin-bottom: 4px; }
.shell > .rail > .org-chats-slot.is-top + .rail-nav { padding-top: 4px !important; }

/* Offline: one quiet banner at the top that says so and keeps trying. */
.net-banner { white-space: nowrap; position: fixed; top: calc(env(safe-area-inset-top, 0px) + 62px); left: 50%; transform: translateX(-50%); z-index: 9500; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: #241d14; color: var(--ink, #f2ece2); border: 1px solid color-mix(in srgb, #e0a85e 55%, transparent); box-shadow: 0 8px 24px rgba(0,0,0,.45); font: 500 13px/1.3 var(--ui); max-width: calc(100vw - 32px); }
.net-banner[hidden] { display: none; }
.net-banner .net-dot { width: 8px; height: 8px; border-radius: 50%; background: #e0a85e; animation: otto-net-pulse 1.4s ease-in-out infinite; flex: none; }
.net-banner .link-btn { min-height: 32px; padding: 0 4px; }
@keyframes otto-net-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .net-banner .net-dot { animation: none; } }

/* Phone settings tabs: an edge fades only while there is more to scroll that way. */
html.is-mobile #settings .drawer-nav { -webkit-mask-image: none; mask-image: none; }
html.is-mobile #settings .drawer-nav.has-more-right { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent 100%); }
html.is-mobile #settings .drawer-nav.has-more-left { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px); mask-image: linear-gradient(90deg, transparent 0, #000 40px); }
html.is-mobile #settings .drawer-nav.has-more-left.has-more-right { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 56px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 56px), transparent 100%); }

/* The desk's "Needs you" tab says "Needs" where the full label would be cut off. */
@media (max-width: 440px) { .desk-seg-more { display: none; } }

/* Phone: every tap target is at least 32px tall, and no text is smaller than 11px. */
html.is-mobile .home-optional .link-btn { display: inline-block; padding: 9px 2px; margin: -9px 0; }
html.is-mobile .rail .org-chats-toggle { min-height: 40px; }
html.is-mobile .rail #wbNewChat { min-height: 36px; padding: 0 14px; }
html.is-mobile .rail .org-chat-del { min-width: 36px; min-height: 36px; font-size: 18px; }
html.is-mobile .rail .org-twist { min-width: 32px; font-size: 12px !important; }
html.is-mobile #openHelp { min-height: 36px; }
html.is-mobile .home-biz-label, html.is-mobile .engine-pill, html.is-mobile .pill { font-size: 11px !important; }
.need-actions button.is-rec::after { font-size: 11px; }

/* Chats: Copy on every answer, Retry on the newest; the send button reads Stop while a reply is on its way. */
.wb-acts { display: flex; gap: 4px; margin-top: 6px; opacity: .7; transition: opacity var(--duration-fast); }
.bubble.bot:hover .wb-acts, .wb-acts:focus-within { opacity: 1; }
.wb-act { min-height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--hair, rgba(255,255,255,.1)); background: transparent; color: var(--muted); font: 500 12px/1 var(--ui); cursor: pointer; }
.wb-act:hover { color: var(--ink); border-color: var(--hair-strong, rgba(255,255,255,.2)); }
html.is-mobile .wb-acts { opacity: 1; }
.wb-composer .send.stop, #wbSend.stop { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--hair-strong, rgba(255,255,255,.25)) !important; }
#chatDock #sendBtn.stop::after, .wb-composer #wbSend.stop::after { -webkit-mask: none; mask: none; width: 10px; height: 10px; border-radius: 2px; }
/* At 390 the chat composer's controls fit inside it instead of pushing the send button past the edge. */
html.is-mobile .wb-composer-bar .wb-mode { padding-left: 9px !important; padding-right: 9px !important; }
html.is-mobile .wb-composer #wbSend { padding: 0 12px 0 14px !important; }

/* Phone tap targets: nothing a thumb must hit is under 36px tall (mode chips, text links, the small card buttons). */
html.is-mobile .wb-composer-bar .wb-mode, html.is-mobile .wb-composer-bar .wb-depth .wb-mode { min-height: 36px; }
html.is-mobile .link-btn { min-height: 36px; display: inline-flex; align-items: center; }
html.is-mobile .ghost-btn:not(.icon-btn):not(.rail-close) { min-height: 36px; }
html.is-mobile .plan-number-edit { min-width: 36px; min-height: 36px; }
html.is-mobile .wb-title { font-size: 16px; font-weight: 500; color: var(--muted); }
html.is-mobile .org-inbox-why[role="button"] { min-height: 36px; }
html.is-mobile .live-watch-btn, html.is-mobile .job-watch-btn { min-height: 36px; }
html.is-mobile #stage-chat .desk-bar-live .live-watch-btn,
html.is-mobile #stage-chat .desk-bar-live .live-more-btn { height: 36px !important; }
html.is-mobile .card.msg-job .job-watch-btn { min-height: 36px; }
html.is-mobile .org-chats-more { min-height: 36px; }
/* Live walk 10/22 on a phone: the "N need you" pill was 20px tall, the Openship and Git links 16px, Use sooner/later 31px wide. */
html.is-mobile .home-needs { min-height: 32px; padding: 6px 12px; }
html.is-mobile .os-dash-bar a, html.is-mobile .git-remote-link { display: inline-flex; align-items: center; min-height: 36px; }
html.is-mobile [data-fallback-up], html.is-mobile [data-fallback-down], html.is-mobile [data-ai-move] { min-width: 44px; }

/* Rail top rows: ottoBOSS, Chats, Home and Automations all wear Home's look (icon · name · quiet note). */
.rail .org-staff.rail-nav-btn {
  display: grid !important; grid-template-columns: 22px minmax(0, 1fr) auto !important; gap: 10px !important;
  min-height: 42px !important; height: auto !important; padding: 8px 12px !important;
  border: 0 !important; border-radius: 12px !important;
  font: 500 14.5px/1.2 var(--ui) !important; color: var(--strong) !important; letter-spacing: 0;
}
.rail .org-staff.rail-nav-btn.on { background: var(--bronze-soft) !important; color: var(--ink) !important; }
.rail .org-staff.rail-nav-btn.on svg, .rail .org-staff.rail-nav-btn.working svg { color: var(--bronze); }
.rail-nav-label { min-width: 0; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-nav-btn small { white-space: nowrap; }
.rail .org-chats { padding: 4px 10px 4px; }
.rail .org-chats-head { gap: 4px; padding-bottom: 2px; }
.rail .org-chats-toggle.rail-nav-btn {
  flex: 1; min-width: 0; text-transform: none; letter-spacing: 0;
}
.rail .org-chats-toggle.rail-nav-btn:hover { color: var(--strong) !important; }
.rail .org-chats-toggle .org-todos-chevron { display: inline-block; width: 10px; font-size: 10px; text-align: center; }
.rail .org-chats-new {
  min-height: 32px; padding: 0 10px; border: 0; border-radius: 10px;
  font: 500 12px/1 var(--ui); color: var(--muted); background: transparent;
}
.rail .org-chats-new:hover, .rail .org-chats-new.on { color: var(--bronze); background: var(--hair); }
.rail .org-chats-body { padding-left: 22px; }
.shell > .rail > .org-staff-slot { padding: 10px 10px 0; }

/* Products sit tabbed in under their company, helpers tabbed in under their desk, each on a guide line. */
.rail .org-project.org-product {
  margin-left: 22px !important; padding-left: 6px;
  border-left: 1px solid color-mix(in srgb, var(--bronze) 35%, transparent);
}
.rail .org-project.org-product .org-avatar { width: 28px !important; height: 28px !important; min-width: 28px; font-size: 11px !important; }
.rail .org-project.org-product .org-desk-card { grid-template-columns: 28px minmax(0, 1fr) !important; min-height: 44px !important; }
.rail .org-project.org-product .org-btn-text b { font-size: 13.5px !important; }
.rail .org-workers { padding: 0 0 4px 28px; margin-left: 10px; border-left: 1px dashed color-mix(in srgb, var(--hair-strong) 80%, transparent); }
.rail .org-row.worker-row { grid-template-columns: minmax(0, 1fr) !important; }
.rail .org-btn.worker {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: center;
  width: 100%; height: auto !important; min-height: 36px !important; padding: 4px 8px !important; border-radius: 10px; text-align: left;
}
.rail .org-btn.worker:hover { background: var(--hair); }
.rail .org-btn.worker.on { background: var(--bronze-soft); }
.rail .org-btn.worker .org-avatar { width: 24px !important; height: 24px !important; min-width: 24px; font-size: 10px !important; }
.rail .org-btn.worker .org-btn-text b { font: 500 13px/1.25 var(--ui) !important; }
.rail .org-btn.worker .org-lamp { font-size: 11.5px !important; color: var(--muted); }

/* CEOs folds: the chevron sits beside the row; folded, the company list and its buttons hide. */
.rail #railNavCeos.rail-nav { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; }
.rail-ceos-toggle {
  min-width: 32px; min-height: 32px; padding: 0; border: 0; border-radius: 10px;
  background: transparent; color: var(--muted); font-size: 11px; cursor: pointer;
}
.rail-ceos-toggle:hover { color: var(--bronze); background: var(--hair); }
body.ceos-collapsed .rail #orgTree, body.ceos-collapsed .rail #orgAddCeoSlot { display: none !important; }