@font-face {
  font-family: "SF Pro Display";
  src: url("/font/SF-Pro-Display-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("/font/SF-Pro-Display-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("/font/SF-Pro-Display-Semibold.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

/*
 * Theming: light values are the default declaration. Dark values are
 * declared under BOTH the OS media query and an explicit [data-theme="dark"]
 * scope stamped by the in-app toggle — the toggle must win over the OS
 * setting either direction, hence the :not([data-theme="light"]) guard on
 * the media block. Status colors (--success/--warning/--error) are
 * mode-invariant by design — they do not appear in the dark block below.
 *
 * Bento palette: --bento-mint/forest/orange/lavender are now card
 * background/ink pairs for the 4 dashboard stat cards (soft, mostly-white
 * surfaces with a colored "ink" for the headline number), not flat
 * categorical color blocks — each pair keeps solid text contrast on its own
 * card. Distinct from --accent (generic UI: focus rings, links, the active
 * nav icon) and from --success/warning/error (reserved status colors).
 */
:root {
  color-scheme: light;
  --bg: #eef0f7;
  --bg-alt: #e6e8f2;
  --bg-raised: #ffffff;
  --border: #e3e5f0;
  --text: #26263a;
  --text-muted: #6b6b7c;
  --text-faint: #9d9dab;
  --accent: #6d5bf6;
  --accent-soft: #ece9ff;
  --success: #17b26a;
  --warning: #ffb020;
  --error: #e5484d;

  --bento-mint: #ffffff;
  --bento-mint-ink: #26263a;
  --bento-forest: #ffffff;
  --bento-forest-ink: #17b26a;
  --bento-orange: #f4f4fa;
  --bento-orange-ink: #26263a;
  --bento-lavender: #eef1fd;
  --bento-lavender-ink: #5643e6;

  --memory-yellow: #a16207;
  --memory-yellow-hover: #ca8a04;

  --nav-h: 64px;
  --rail-w: 76px;
  --sidebar-w: 280px;
  --shell-pad-y: 20px;
  --shell-pad-x: clamp(16px, 4vw, 40px);
  --radius: 24px;
  --radius-lg: 26px;
  --radius-sm: 16px;
  --radius-xs: 12px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 32px;
  --content-max: 1360px;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --bg: #131319;
    --bg-alt: #1a1a22;
    --bg-raised: #1c1c26;
    --border: #2b2b37;
    --text: #f2f2f5;
    --text-muted: #a6a6b5;
    --text-faint: #6f6f7f;
    --accent: #8b7bff;
    --accent-soft: #292352;

    --bento-mint: #1c1c26;
    --bento-mint-ink: #f2f2f5;
    --bento-forest: #1c1c26;
    --bento-forest-ink: #34d399;
    --bento-orange: #1f1f2a;
    --bento-orange-ink: #f2f2f5;
    --bento-lavender: #211f36;
    --bento-lavender-ink: #ab9bff;

    --memory-yellow: #ca8a04;
    --memory-yellow-hover: #eab308;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #131319;
  --bg-alt: #1a1a22;
  --bg-raised: #1c1c26;
  --border: #2b2b37;
  --text: #f2f2f5;
  --text-muted: #a6a6b5;
  --text-faint: #6f6f7f;
  --accent: #8b7bff;
  --memory-yellow: #ca8a04;
  --memory-yellow-hover: #eab308;
  --accent-soft: #292352;

  --bento-mint: #1c1c26;
  --bento-mint-ink: #f2f2f5;
  --bento-forest: #1c1c26;
  --bento-forest-ink: #34d399;
  --bento-orange: #1f1f2a;
  --bento-orange-ink: #f2f2f5;
  --bento-lavender: #211f36;
  --bento-lavender-ink: #ab9bff;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  /* Safety net — the real fix is `min-width: 0` on the grid items below
   * (canvas elements are replaced elements with a large intrinsic width,
   * and CSS Grid/Flex items default to min-width: auto, so a chart could
   * force its track — and the whole page — wider than the viewport). */
  overflow-x: hidden;
}

button, input, textarea {
  font-family: inherit;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  align-items: stretch;
}

.auth-screen {
  min-height: 100dvh;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg);
}

.auth-panel {
  width: min(100%, 440px);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 34px;
  padding: 28px;
  box-shadow: none;
}

.auth-brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 28px;
}

.auth-copy h1 {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: 0;
}

.auth-copy p,
.auth-loading {
  margin: 0 0 22px;
  color: var(--text-muted);
  line-height: 1.5;
}

.auth-form {
  display: grid;
  gap: 14px;
}

.auth-form label {
  display: grid;
  gap: 7px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
}

.auth-form input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  padding: 0 12px;
  font-size: 15px;
  outline: none;
}

.auth-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.auth-password-field {
  position: relative;
  display: block;
}

.auth-password-field input {
  padding-right: 48px;
}

.auth-password-field button {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.auth-password-field button:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.auth-password-field svg {
  width: 18px;
  height: 18px;
}

.auth-submit {
  min-height: 46px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.auth-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.auth-switch {
  width: 100%;
  margin-top: 16px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-weight: 700;
  cursor: pointer;
}

.auth-secondary-actions {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.auth-secondary-actions .auth-switch {
  margin-top: 0;
}

.auth-error,
.auth-message {
  border-radius: 8px;
  padding: 11px 12px;
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1.35;
}

.auth-error {
  background: rgba(229, 72, 77, 0.12);
  color: var(--error);
}

.auth-message {
  background: rgba(23, 178, 106, 0.12);
  color: var(--success);
}

.tenant-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 16px 0 20px;
}

.tenant-summary div {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-raised);
  min-width: 0;
}

.tenant-summary span {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}

.tenant-summary strong,
.tenant-summary code {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 13px;
}

/* Floating shell: on tablet/desktop, the app sits inset from the browser
 * edges, with the icon rail, header, and card-styled sidebar/main content
 * all floating independently on the page background (see .layout). */
@media (min-width: 720px) {
  html, body {
    overflow: hidden; /* the shell owns its own scrolling (.main), not the page */
  }

  #app {
    margin: 0;
    height: 100dvh;
    padding: var(--shell-pad-y) var(--shell-pad-x);
    align-items: center;
  }
}

/* Wide monitors: give the floating shell more breathing room too, matching
 * the .main wide-monitor gutter bump below. */
@media (min-width: 1500px) {
  #app {
    margin: 0;
    height: 100dvh;
    padding-right: clamp(120px, 18vw, 260px);
    padding-left: clamp(120px, 18vw, 260px);
  }
}

/* ============ Icon rail ============ */
/* Mobile-first: a fixed bottom tab bar, thumb-reachable and out of the way
 * of the composer above it (.content-area reserves space for it — see
 * .layout). At >=720px it becomes a real, full-height column on the left of
 * the whole shell instead (see the breakpoints section), floating directly
 * on the page background with no card boundary of its own. The active
 * destination gets a filled accent circle; everything else stays a muted
 * flat gray, brightening on hover. */

.icon-rail {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  flex-shrink: 0;
  height: 68px;
  padding: 0 var(--space-2);
  background: var(--bg-raised);
  border-top: 1px solid var(--border);
  z-index: 20;
}

.nav-scroll {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}

.nav-scroll::-webkit-scrollbar { display: none; }

@media (min-width: 720px) {
  .icon-rail {
    position: static;
    flex-direction: column;
    height: auto;
    width: var(--rail-w);
    padding: var(--space-4) 0;
    background: transparent;
    border-top: 0;
  }

  .nav-scroll {
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
    width: 100%;
  }
}

.nav-icon {
  position: relative;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.8;
}

/* Each button carries its own department hue via an inline --icon-accent
 * custom property (see app.js navButton()) — Overview/Accounts omit it and
 * fall back to the brand accent, so both the active tab and its hover state
 * read in that department's own color, matching the Run button's glow on
 * the same page (also var(--dept-accent, ...)). */
.nav-icon.active {
  background: var(--icon-accent, var(--accent));
  color: #fff;
}

/* Hover styling only for real pointers — on touch devices, :hover can stick
   after a tap (no pointerleave event) and leave a highlighted button behind
   until the user taps elsewhere. */
@media (hover: hover) {
  .nav-icon:not(.active):hover {
    background: color-mix(in srgb, var(--icon-accent, var(--accent)) 12%, transparent);
    color: var(--icon-accent, var(--accent));
  }
}

/*
 * Nav tooltip: a single shared element, JS-positioned via getBoundingClientRect
 * (see app.js), NOT a per-icon ::after. A per-icon absolutely-positioned
 * pseudo-element got silently clipped: .nav-scroll needs overflow-x:auto for
 * the horizontal icon strip on narrow screens, and per the CSS Overflow spec,
 * setting one axis to a non-visible value forces the OTHER axis to compute as
 * "auto" too (never "visible") — so overflow-y became a clipping box exactly
 * the height of the icons, hiding anything (like a tooltip) meant to overflow
 * below it. position:fixed on a single external element sidesteps that
 * entirely. Confirmed the old approach was actually invisible (not just
 * low-contrast) via elementsFromPoint before switching.
 */
#nav-tooltip {
  position: fixed;
  max-width: 190px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.12)),
    rgba(230, 232, 242, 0.52);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  backdrop-filter: blur(16px) saturate(1.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 12px 26px rgba(28, 35, 80, 0.12);
  color: #202331;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: translate(-50%, 6px) scale(0.94);
  z-index: 100;
}

#nav-tooltip[data-placement="right"] {
  transform: translate(0, -50%) scale(0.94);
}

#nav-tooltip.visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

#nav-tooltip.visible[data-placement="right"] {
  transform: translate(0, -50%) scale(1);
}

.nav-divider {
  width: 1px;
  height: 28px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 4px;
}

@media (min-width: 720px) {
  .nav-divider {
    width: 28px;
    height: 1px;
    margin: 2px 0;
  }
}

/* ============ Header ============ */
/* Persistent top bar: brand mark, a text-menu shortcut to the three
 * full-width views, and a cluster of icon actions + the date badge on the
 * right. Sits above .body-row inside .content-area (see .layout), so it
 * spans the full width available next to the icon rail. */

.app-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  min-width: 0;
  padding: var(--space-3) var(--space-3) var(--space-2);
}

@media (min-width: 720px) {
  .app-header {
    padding: var(--space-2) var(--space-4) var(--space-3);
  }
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-shrink: 0;
}

.brand-logo {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  background: linear-gradient(90deg, var(--accent), #7dd3fc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-tagline {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-faint);
  white-space: nowrap;
}

@media (max-width: 559.98px) {
  .brand-tagline {
    display: none;
  }
}

.header-menu {
  display: none;
  align-items: center;
  gap: var(--space-4);
  flex: 1;
  min-width: 0;
  padding-left: var(--space-4);
}

@media (min-width: 860px) {
  .header-menu {
    display: flex;
  }
}

.header-menu-link {
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 2px;
  border-radius: var(--radius-xs);
}

.header-menu-link.active {
  color: var(--text);
}

@media (hover: hover) {
  .header-menu-link:hover {
    color: var(--text);
  }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
  position: relative;
  z-index: 5000;
}

.header-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--text-muted);
  flex-shrink: 0;
}

.header-icon-btn svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.8;
}

@media (hover: hover) {
  .header-icon-btn:hover {
    background: var(--accent-soft);
    color: var(--accent);
  }
}

/* Memory's header button breaks from every other header-icon-btn: no pill
   background at all (bare icon, like Gemini's spark), a themed "darkish
   yellow" (--memory-yellow, tuned separately per light/dark since a yellow
   dark enough to read as muted on a light page goes muddy/invisible on a
   near-black one), and on hover a soft breathing glow bloom behind the icon
   — diffuse and pulsing, not a spinning border — the same ambient-light
   feel as Gemini's own icon glow rather than this app's .ai-button "light
   stroke" technique. */
.header-icon-btn.memory-header-btn {
  position: relative;
  overflow: visible;
  background: transparent;
  color: var(--memory-yellow);
}

.header-icon-btn.memory-header-btn::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 999px;
  z-index: -1;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--memory-yellow-hover) 65%, transparent) 0%,
    color-mix(in srgb, var(--memory-yellow-hover) 30%, transparent) 45%,
    transparent 72%
  );
  filter: blur(3px);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

@media (hover: hover) {
  .header-icon-btn.memory-header-btn:hover,
  .header-icon-btn.memory-header-btn.active {
    background: transparent;
    color: var(--memory-yellow-hover);
  }

  .header-icon-btn.memory-header-btn:hover::before {
    opacity: 1;
    transform: scale(1);
    animation: memory-glow-pulse 1.8s ease-in-out infinite;
  }
}

@keyframes memory-glow-pulse {
  0%,
  100% {
    opacity: 0.7;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

.header-icon-btn.memory-header-btn.active {
  background: transparent;
  color: var(--memory-yellow-hover);
}

.header-date-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.header-date-badge svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.8;
}

.header-account {
  position: relative;
  flex-shrink: 1;
  min-width: 0;
}

.header-user-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 36px;
  max-width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bg-raised);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 1;
  min-width: 0;
}

.header-user-btn span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-weight: 800;
}

.header-user-btn svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.9;
  flex: 0 0 auto;
}

.account-popover {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  width: min(300px, calc(100vw - 28px));
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.54);
  color: var(--text);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 18px 42px rgba(38, 38, 58, 0.14);
  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 6000;
}

.header-account:hover .account-popover,
.header-account:focus-within .account-popover,
.header-account.open .account-popover {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.account-popover-name {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}

.account-popover-email {
  color: var(--text-muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.account-popover-row {
  display: grid;
  gap: 3px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.account-popover-row span {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.account-popover-row strong,
.account-popover-row code {
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.account-signout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 38px;
  margin-top: 4px;
  border: 1px solid rgba(229, 72, 77, 0.24);
  border-radius: 14px;
  background: rgba(229, 72, 77, 0.12);
  color: var(--error);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.account-theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 38px;
  margin-top: 4px;
  border: 1px solid var(--border, rgba(127, 127, 127, 0.24));
  border-radius: 14px;
  background: transparent;
  color: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.account-theme-btn:hover { background: rgba(127, 127, 127, 0.12); }

.account-signout-btn:hover {
  background: var(--error);
  color: #fff;
}

html[data-theme="dark"] .account-popover {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(28, 28, 38, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 42px rgba(0, 0, 0, 0.32);
}

@media (max-width: 399.98px) {
  .header-date-badge span {
    display: none;
  }

}

/* ============ Layout ============ */

/* Mobile-first shell: icon rail becomes a fixed bottom tab bar (see the
 * breakpoints section) so .layout is just a single-column stack of the
 * content area above it. At >=720px the rail moves back to a real column on
 * the left, .layout becomes a row, and everything below floats as separate
 * rounded cards directly on the page background (--bg) rather than sharing
 * one bordered rectangle. */
.layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  width: 100%;
  position: relative;
}

@media (min-width: 720px) {
  .layout {
    flex-direction: row;
  }
}

.content-area {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 72px; /* clears the fixed bottom icon bar below 720px */
}

@media (min-width: 720px) {
  .content-area {
    padding-bottom: 0;
    overflow: hidden;
  }
}

.body-row {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0 var(--space-3) var(--space-3);
}

@media (min-width: 720px) {
  .body-row {
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-4);
    padding: 0 var(--space-4) var(--space-4);
    overflow: hidden;
  }
}

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  /* Above .app-header's z-index:5000 (and its account/playbook popovers at
     6000) — the drawer is a full-screen overlay and must cover the header
     it slides out from under, not sit behind it. */
  z-index: 6001;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.sidebar-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* Below 720px the sidebar is an off-canvas drawer holding only the task
 * list (the composer moves into .main instead — see render() in app.js), so
 * it needs an opaque page-colored backdrop of its own. At >=720px it becomes
 * a normal-flow column sitting beside .main, both floating as independent
 * cards on the shared page background (see .composer/.tasklist-card). */
.sidebar {
  width: min(85vw, 320px);
  flex-shrink: 0;
  background: var(--bg);
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);

  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  transition: transform 0.18s ease;
  z-index: 6002; /* above .sidebar-backdrop, same reasoning as there */
}

.sidebar.open {
  transform: translateX(0);
}

@media (min-width: 720px) {
  .sidebar {
    position: static;
    width: var(--sidebar-w);
    background: transparent;
    padding: var(--space-4) 0;
    transform: none;
    transition: none;
  }
}

/* Composer ("What to do today?") and the task list are two independently
 * rounded cards stacked in the sidebar column, matching the reference's
 * separate card shapes instead of one continuous panel. */
.composer,
.tasklist-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  overflow: hidden;
  min-width: 0;
}

.tasklist-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* .composer h1 covers the mobile case: below 720px the composer (title +
 * goal form) moves out of .sidebar into .main (see render() in app.js), so
 * .sidebar h1 alone no longer matches it there. */
.sidebar h1,
.composer h1 {
  font-size: 16px;
  margin: 0;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--text);
}

/* Mobile only: the composer sits as the first block in .main, always
 * visible above the view content, instead of behind the hamburger drawer. */
.main > .composer {
  margin-bottom: var(--space-3);
}

.sidebar-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin: 2px 0 0;
  line-height: 1.3;
}

/* Only rendered (see renderSidebarNavLinks in app.js) below the 860px
 * breakpoint where .header-menu is hidden, so no media query is needed
 * here — JS already decides whether this exists in the DOM at all. */
.sidebar-nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-1);
}

.sidebar-nav-link {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}

.sidebar-nav-link.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: transparent;
}

@media (hover: hover) {
  .sidebar-nav-link:hover {
    color: var(--text);
  }
}

.dept-tagline {
  font-size: 12px;
  color: var(--text-muted);
  margin: -4px 0 0;
  line-height: 1.4;
}

.sidebar h2 {
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  margin: 0;
  font-weight: 700;
}

.tasks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0 0 10px;
}

.tasklist-card .run-list {
  flex: 1;
  min-height: 0;
}

.archive-toggle-btn {
  background: transparent;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
}

@media (hover: hover) {
  .archive-toggle-btn:hover {
    background: var(--accent-soft);
    color: var(--accent);
  }
}

#goal-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
  position: relative;
  min-width: 0;
  padding-bottom: 30px;
}

@property --message-glow-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.goal-input-shell {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-sm);
  --message-glow-angle: 0deg;
  --gemini-blue: #4285f4;
  --gemini-cyan: #12d5ff;
  --gemini-violet: #8b5cf6;
  --gemini-pink: #ff5bbd;
}

.goal-input-shell::before,
.goal-input-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: message-glow-spin 4.8s linear infinite;
}

.goal-input-shell::before {
  inset: -9px;
  z-index: -1;
  background: conic-gradient(
    from var(--message-glow-angle),
    transparent 0deg,
    color-mix(in srgb, var(--gemini-blue) 42%, transparent) 36deg,
    color-mix(in srgb, var(--gemini-cyan) 48%, transparent) 86deg,
    transparent 134deg,
    transparent 180deg,
    color-mix(in srgb, var(--gemini-violet) 46%, transparent) 226deg,
    color-mix(in srgb, var(--gemini-pink) 50%, transparent) 286deg,
    transparent 340deg,
    transparent 360deg
  );
  filter: blur(15px);
  opacity: 0.68;
}

.goal-input-shell::after {
  z-index: 1;
  padding: 1.5px;
  background: conic-gradient(
    from var(--message-glow-angle),
    var(--gemini-blue) 0deg,
    var(--gemini-cyan) 78deg,
    transparent 122deg,
    transparent 178deg,
    var(--gemini-violet) 232deg,
    var(--gemini-pink) 292deg,
    transparent 338deg,
    var(--gemini-blue) 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.82;
}

.goal-input-shell:focus-within::before {
  inset: -12px;
  opacity: 0.84;
  animation-duration: 3.2s;
}

.goal-input-shell:focus-within::after {
  padding: 2px;
  opacity: 1;
  animation-duration: 3.2s;
}

textarea {
  resize: vertical;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.25;
  transition: border-color 0.15s ease, background 0.15s ease;
}

#goal-input {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 122px;
  min-height: 122px;
  resize: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

textarea::placeholder {
  color: var(--text-faint);
  opacity: 1;
}

textarea:focus {
  border-color: var(--accent);
  background: var(--bg-raised);
  outline: none;
}

button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.goal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 11px;
  min-height: 30px;
  padding-right: 1px;
  position: absolute;
  right: 0;
  bottom: 0;
  max-width: 100%;
}

.attach-circle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  background: var(--bg-alt);
  color: var(--text-muted);
  border: 0;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.attach-circle:hover:not(:disabled) {
  background: var(--accent-soft);
  color: var(--accent);
}

.attach-circle:active:not(:disabled) {
  transform: scale(0.93);
}

.attach-circle svg {
  width: 17px;
  height: 17px;
  stroke-width: 3;
}

.attach-circle:disabled svg {
  animation: tool-spin 1s linear infinite;
}

.goal-actions .ai-button-wrap {
  flex: 0 0 auto;
  width: 60px;
  height: 30px;
}

.attachment-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.model-picker-btn.open {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Appended directly to <body> as a DOM portal (see app.js) — visibility is
   toggled via inline style.display, not a CSS class, so there's no default
   "hidden" rule needed here (it's created with display:none already). */
.model-picker-menu {
  position: fixed;
  z-index: 70;
  flex-direction: column;
  gap: 2px;
  min-width: 220px;
  max-width: 280px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-1);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  /* --bg-raised is already translucent (see the glass theme block below) —
     without a blur, whatever's behind just shows through sharp/unblurred
     instead of reading as a frosted panel like the other floating menus. */
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
}

.model-picker-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 7px 8px;
  border-radius: 8px;
  border: 0;
  background: none;
  color: var(--text);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.model-picker-item:hover {
  background: var(--bg-alt);
}

.model-picker-item-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.model-picker-item-desc {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.model-picker-check {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  stroke-width: 3;
  visibility: hidden;
  color: var(--accent);
}

.model-picker-item.selected .model-picker-check {
  visibility: visible;
}

.attachment-error {
  font-size: 11.5px;
  color: var(--error);
}

.attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 6px 8px 6px 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
}

.attachment-chip svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--dept-accent, var(--accent));
}

.attachment-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.attachment-warn svg {
  width: 14px;
  height: 14px;
  color: var(--warning);
  flex-shrink: 0;
}

.attachment-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 50%;
  background: var(--bg-alt);
  color: var(--text-muted);
}

.attachment-remove svg {
  width: 11px;
  height: 11px;
}

button {
  padding: 10px var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background: var(--dept-accent, var(--accent));
  color: white;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
  transition: filter 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

/* Sane default for any plain <button> without its own specific hover rule
 * (connect/disconnect, reply-submit, theme/sidebar toggles) — buttons that
 * define their own (.nav-icon, .attach-circle, .ai-button) win on
 * specificity and are unaffected. */
@media (hover: hover) {
  button:not(:disabled):hover {
    filter: brightness(1.08);
  }
}

button:not(:disabled):active {
  transform: scale(0.96);
}

button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ============ Run button - gradient pill + traveling light stroke ============ */

@property --ai-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.ai-button-wrap {
  position: relative;
  display: inline-block;
  --ai-angle: 0deg;
}

.ai-button-wrap::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: calc(var(--radius-xs) + 5px);
  z-index: 0;
  background: conic-gradient(
    from var(--ai-angle),
    transparent 0deg,
    transparent 250deg,
    #1e8fe0 295deg,
    #7dd3fc 318deg,
    #7dd3fc 322deg,
    #2563eb 345deg,
    transparent 360deg
  );
  filter: blur(7px);
  opacity: 0.6;
  animation: ai-spin 3.4s linear infinite;
  transition: opacity 0.15s ease, inset 0.15s ease;
  pointer-events: none;
}

/* Theme-invariant on purpose — a fixed dark pill (like the reference) reads
 * as a consistent brand CTA whether the app itself is in light or dark
 * mode; the border+shadow below keep it visible against a near-black page
 * background instead of relying on the page's own bg/border tokens. */
.ai-button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 30px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: var(--radius-xs);
  background: linear-gradient(180deg, #1a1b20, #08090b);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #f2f4f8;
  font-size: 11px;
  font-weight: 500;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.ai-button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--ai-angle),
    transparent 0deg,
    transparent 250deg,
    #1e8fe0 295deg,
    #7dd3fc 318deg,
    #7dd3fc 322deg,
    #2563eb 345deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: ai-spin 3.4s linear infinite;
  pointer-events: none;
}

@media (hover: hover) {
  .ai-button:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.15);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35), 0 2px 10px rgba(0, 0, 0, 0.35);
  }

  .ai-button-wrap:has(.ai-button:hover:not(:disabled))::before {
    opacity: 0.85;
    inset: -7px;
    animation-duration: 1.6s;
  }

  .ai-button-wrap:has(.ai-button:hover:not(:disabled)) .ai-button::before {
    padding: 2px;
    animation-duration: 1.6s;
  }
}

.ai-button:active:not(:disabled) {
  transform: translateY(0) scale(0.97);
  filter: brightness(0.98);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition-duration: 0.05s;
}

.ai-button-wrap:has(.ai-button:active:not(:disabled))::before {
  opacity: 0.4;
  inset: -3px;
}

.ai-button:disabled {
  opacity: 0.5;
}

.ai-button:disabled::before {
  animation-play-state: paused;
  opacity: 0.3;
}

.ai-button-wrap:has(.ai-button:disabled)::before {
  animation-play-state: paused;
  opacity: 0.2;
}

.ai-button svg {
  width: 13px;
  height: 13px;
}

@keyframes ai-spin {
  to {
    --ai-angle: 360deg;
  }
}

@keyframes message-glow-spin {
  to {
    --message-glow-angle: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .goal-input-shell::before,
  .goal-input-shell::after,
  .ai-button::before,
  .ai-button-wrap::before {
    animation: none;
  }
}

.run-list {
  list-style: none;
  margin: 0;
  padding: 0 7px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* old Edge/IE */
}

.run-list::-webkit-scrollbar {
  display: none; /* Chrome/Safari/new Edge */
}

.run-item {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  border-radius: 0;
  cursor: pointer;
  border: 0;
  transition: background 0.12s ease;
}

@media (hover: hover) {
  .run-item:hover {
    background: transparent;
  }
}

.run-item.selected {
  background: transparent;
  border-color: transparent;
}

.run-checkbox {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-top: 4px;
  border: 1px solid #7a7a7a;
  border-radius: 0;
}

/* Hidden until hover on pointer devices (decluttered list, matching the
 * existing .nav-icon tooltip convention); always dimly visible on touch,
 * since there's no hover state to reveal them there. */
.run-item-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.12s ease;
}

@media (hover: hover) {
  .run-item:hover .run-item-actions {
    opacity: 1;
  }
}

@media (hover: none) {
  .run-item-actions {
    opacity: 0.6;
  }
}

.run-action-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  color: var(--text-muted);
  border-radius: 6px;
}

.run-action-icon svg {
  width: 13px;
  height: 13px;
}

.run-action-icon:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

@media (hover: hover) {
  .run-action-icon:hover:not(:disabled) {
    background: var(--accent-soft);
    color: var(--accent);
  }

  .run-action-icon.run-action-danger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--error) 14%, transparent);
    color: var(--error);
  }
}

.run-action-icon.run-action-active {
  color: var(--accent);
}

.pinned-flag {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  color: var(--accent);
}

.run-item-body {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.run-item .goal-excerpt {
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 1px;
  min-width: 0;
  line-height: 1.05;
}

.goal-excerpt-text {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-dot.running { background: var(--warning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 25%, transparent); }
.status-dot.success { background: var(--success); }
.status-dot.error { background: var(--error); }

.item-meta {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  gap: 6px;
  align-items: center;
  line-height: 1.05;
}

.main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: var(--space-3);
}

/* Every direct content view gets the same centered, capped-width treatment —
 * on an ultra-wide monitor this is what keeps stat tiles and charts from
 * stretching into uncomfortably large, sparse cards. */
.dashboard,
.run-detail,
.accounts-view,
.settings-view,
.calendar-view,
.files-view,
.memory-hero {
  max-width: var(--content-max);
  margin: 0 auto;
}

.dashboard,
.memory-hero {
  height: 100%;
}

.dashboard-head {
  display: none;
}

.empty-state {
  color: var(--text-muted);
  margin-top: var(--space-5);
  font-size: 14px;
  text-align: center;
  padding: 0 var(--space-3);
}

/* ============ Overview dashboard ============ */

.dashboard-head h2 {
  margin: 0 0 2px;
  font-size: 18px;
}

/* Bento stat grid: 4 independently rounded cards in a simple 2x2 (Documents
 * + Errors on top, the Overview hero + Success rate below — see the source
 * order in app.js's renderOverviewDashboard()), each colored via its own
 * --bento-* background/ink pair rather than one flush multi-color block.
 * Mobile-first: a single column stack; the 2-column grid only applies at
 * tablet width and up (see the breakpoints section). */
.bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 620px) {
  .bento-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 720px) {
  .bento-grid {
    width: 100%;
    height: 100%;
  }
}

.bento-cell {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 130px;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  /* A cell with a label (currently only the hero) gets two children — the
   * label and the value group — which space-between pushes to opposite
   * ends. A cell with just the value group (one child) simply sits at the
   * start, which is what the secondary cells want: no artificial override
   * needed per cell type. */
  justify-content: space-between;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
  .bento-cell:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(20, 20, 50, 0.08);
  }
}

.bento-hero {
  min-height: 180px;
}

.bento-mint { background: var(--bento-mint); color: var(--bento-mint-ink); }
.bento-forest { background: var(--bento-forest); color: var(--bento-forest-ink); }
.bento-orange { background: var(--bento-orange); color: var(--bento-orange-ink); }
.bento-lavender { background: var(--bento-lavender); color: var(--bento-lavender-ink); }

/* Soft accent-colored glow tucked in a back corner of each card — echoes the
 * reference's blurred gradient blobs without needing image assets. */
.bento-cell::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, currentColor 20%, transparent), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.bento-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  opacity: 0.6;
}

.bento-value {
  position: relative;
  z-index: 1;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.bento-hero .bento-value {
  font-size: 56px;
}

.bento-caption {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.65;
  margin-top: 2px;
}

.bento-subvalue {
  font-size: 12.5px;
  font-weight: 600;
  opacity: 0.6;
  margin-top: 4px;
}

/* ============ Bento tile detail: rings + activity lists ============ */
/* .bento-cell is position:relative (above) and its text children are plain
 * in-flow/static boxes — a positioned sibling like .bento-ring-wrap paints
 * ABOVE static content regardless of DOM order or z-index:auto (CSS2.1
 * stacking order), so the text needs an explicit z-index of its own to
 * stay on top instead of getting covered by the ring. Same trick as
 * .ai-button/.ai-button-wrap elsewhere in this file. */
.bento-label,
.bento-value-group,
.bento-status-breakdown,
.bento-dept-breakdown,
.bento-detail-list,
.bento-detail-empty {
  position: relative;
  z-index: 1;
}

.bento-ring-wrap {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 0;
  pointer-events: none;
}

.bento-ring {
  opacity: 0.4;
}

.bento-detail-empty {
  font-size: 12px;
  opacity: 0.65;
  margin-top: var(--space-2);
}

.bento-detail-list {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  max-height: 150px;
  overflow-y: auto;
  scrollbar-width: none;
}

.bento-detail-list::-webkit-scrollbar {
  display: none;
}

/* Department run-count breakdown (Total runs tile) */
.bento-dept-breakdown li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 12px;
  font-weight: 500;
  opacity: 0.85;
}

.bento-dept-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bento-dept-count {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

/* Success/error/running split (Success rate tile) */
.bento-status-breakdown {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: var(--space-2);
  font-size: 12px;
  font-weight: 500;
  opacity: 0.85;
}

.bento-status-breakdown div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bento-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}

.bento-dot.success { background: var(--bento-forest-ink); }
.bento-dot.error { background: var(--error); }
.bento-dot.running { background: var(--warning); }

/* Shared clickable-row styling (recent errors / recent documents) */
.bento-detail-item {
  padding: 6px 8px;
  margin: 0 -8px 2px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 11.5px;
  line-height: 1.35;
  transition: background 0.12s ease;
}

@media (hover: hover) {
  .bento-detail-item:hover {
    background: rgba(0, 0, 0, 0.06);
  }
}

.bento-detail-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}

.bento-detail-time {
  flex-shrink: 0;
  opacity: 0.65;
  font-weight: 500;
  font-size: 11px;
}

.bento-detail-goal {
  opacity: 0.85;
  margin-top: 1px;
}

.bento-detail-error {
  opacity: 0.7;
  margin-top: 1px;
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
}

/* Documents list items are single-line (title + meta), not the two-line
 * error card shape above. */
.bento-lavender .bento-detail-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* ============ Documents view ============ */

.documents-view h2 {
  margin: 0 0 2px;
  font-size: 16px;
}

.documents-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.document-card {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

@media (hover: hover) {
  .document-card:hover {
    border-color: var(--doc-accent, var(--accent));
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
  }
}

.document-card-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 3px 4px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.document-card-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--doc-accent, var(--accent)) 14%, transparent);
  color: var(--doc-accent, var(--accent));
}

.document-card-icon svg {
  width: 16px;
  height: 16px;
}

.document-card-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.document-card-body strong,
.document-card-body span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.document-card-body strong {
  font-size: 13px;
  line-height: 1.25;
}

.document-card-body span {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.3;
}

.document-card-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.document-card-actions a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 5px 7px;
  border-radius: var(--radius-xs);
  background: var(--bg-raised);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}

.document-card-actions a:hover {
  background: color-mix(in srgb, var(--doc-accent, var(--accent)) 14%, transparent);
  color: var(--doc-accent, var(--accent));
}

.document-card-actions svg {
  width: 13px;
  height: 13px;
}

/* ============ Run detail ============ */

.run-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.run-header h2 {
  font-size: 16px;
  margin: 0;
  font-weight: 600;
  flex: 1 1 100%;
  order: 3;
}

.run-meta {
  color: var(--text-muted);
  font-size: 12px;
  margin-left: auto;
}

.status-badge {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: 999px;
  color: white;
  flex-shrink: 0;
}

.status-badge.running { background: var(--warning); color: #1a1400; }
.status-badge.success { background: var(--success); }
.status-badge.error { background: var(--error); }
.status-badge.archived { background: var(--bg-alt); color: var(--text-muted); }
.status-badge.pinned { background: var(--accent-soft); color: var(--accent); }

.run-error-summary {
  order: 2;
  flex: 1 1 100%;
  margin: 0;
  font-size: 12.5px;
  color: var(--error);
}

.run-subheader {
  order: 4;
  flex: 1 1 100%;
  margin: -4px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

/* Lets the goal <h2> and its toggle button act as direct flex items of
   .run-header (so the existing order/flex rules on ".run-header h2" above
   keep positioning it correctly) while still giving them a shared DOM
   parent to render from. */
.run-goal-wrap {
  display: contents;
}

.run-goal.collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.run-goal-toggle {
  order: 3;
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: 2px;
  border: none;
  background: none;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
}

@media (hover: hover) {
  .run-goal-toggle:hover {
    text-decoration: underline;
  }
}

.run-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.run-action-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  background: var(--bg-alt);
  color: var(--text-muted);
}

.run-action-btn svg {
  width: 14px;
  height: 14px;
}

.run-action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (hover: hover) {
  .run-action-btn:hover:not(:disabled) {
    background: var(--accent-soft);
    color: var(--accent);
  }

  .run-action-btn.run-action-danger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--error) 14%, transparent);
    color: var(--error);
  }
}

.run-action-btn.run-action-active {
  background: var(--accent-soft);
  color: var(--accent);
}

.panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.panel h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0 0 var(--space-2);
}

.side-panels {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.log {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  font-size: 13px;
  line-height: 1.5;
  height: 46vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ---- reply form: continues a finished run's same agent session ---- */

.reply-form {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.reply-form textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  max-height: 120px;
}

.reply-submit {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  background: var(--dept-accent, var(--accent));
}

.reply-submit svg {
  width: 16px;
  height: 16px;
}

/* ---- chat message (agent text) ---- */

.msg {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}

.msg-avatar {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
}

.msg-body {
  min-width: 0;
  flex: 1;
}

.msg-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 2px;
}

.msg-source {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text);
}

.msg-time {
  font-size: 10.5px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.msg-text {
  font-size: 13px;
  color: var(--text);
  word-break: break-word;
}

.msg-text > *:first-child { margin-top: 0; }
.msg-text > *:last-child { margin-bottom: 0; }
.msg-text p { margin: 0 0 6px; }
.msg-text ul,
.msg-text ol { margin: 0 0 6px; padding-left: 1.2em; }
.msg-text li { margin-bottom: 2px; }
.msg-text strong { font-weight: 700; }
.msg-text a { color: var(--accent); }

.msg-text code {
  font-family: inherit;
  font-size: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 1px 4px;
  border-radius: 4px;
}

.msg-text pre {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  overflow-x: auto;
  margin: 0 0 6px;
}

.msg-text pre code {
  background: none;
  border: none;
  padding: 0;
}

.msg-text blockquote {
  margin: 0 0 6px;
  padding-left: 8px;
  border-left: 2px solid var(--border);
  color: var(--text-muted);
}

/* ---- tool call card ---- */

.tool-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.tool-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px var(--space-2);
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: var(--text-muted);
  text-align: left;
  transition: background 0.15s ease;
}

@media (hover: hover) {
  .tool-card-head:hover {
    background: var(--bg-alt);
  }

  .tool-card:has(.tool-card-head:hover) {
    border-color: var(--text-faint);
  }
}

.tool-icon svg { width: 13px; height: 13px; opacity: 0.7; flex-shrink: 0; }

.tool-name {
  font-family: inherit;
  font-size: 12px;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-status svg { width: 14px; height: 14px; display: block; }
.tool-status.success { color: var(--success); }
.tool-status.error { color: var(--error); }
.tool-status.pending svg { animation: tool-spin 1s linear infinite; color: var(--text-faint); }

.tool-chevron svg {
  width: 13px;
  height: 13px;
  color: var(--text-faint);
  transition: transform 0.15s ease;
}

.tool-card.open .tool-chevron svg { transform: rotate(180deg); }

.tool-card-body {
  display: none;
  border-top: 1px solid var(--border);
  padding: var(--space-2);
}

.tool-card.open .tool-card-body { display: block; }

.tool-block + .tool-block { margin-top: var(--space-2); }

.tool-block-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  margin-bottom: 3px;
}

.tool-block pre {
  margin: 0;
  font-family: inherit;
  font-size: 11.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-muted);
  max-height: 220px;
  overflow-y: auto;
}

.tool-card.error .tool-block:last-child pre { color: var(--error); }

.pending-note {
  font-size: 11.5px;
  color: var(--text-faint);
  font-style: italic;
}

/* ---- turn divider ---- */

.turn-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  color: var(--text-faint);
}

.turn-divider::before,
.turn-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.turn-divider.error { color: var(--error); }
.turn-divider.error::before,
.turn-divider.error::after { background: color-mix(in srgb, var(--error) 35%, var(--border)); }

/* ---- typing indicator ---- */

.typing-indicator {
  display: flex;
  gap: 4px;
  padding: 4px 0 4px 30px;
}

.typing-indicator span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dot-color, var(--accent));
  animation: typing-bounce 1.1s ease-in-out infinite;
  opacity: 0.5;
}

.typing-indicator span:nth-child(2) { animation-delay: 0.15s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.3s; }

/* ---- jump-to-latest pill ---- */

.log-jump-btn {
  position: sticky;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 5px;
  margin: 0 auto;
  padding: 5px 12px;
  border-radius: 999px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.log-jump-btn svg { width: 13px; height: 13px; }

@keyframes tool-spin {
  to { transform: rotate(360deg); }
}

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .typing-indicator span { animation: none; opacity: 0.8; }
  .tool-status.pending svg { animation: none; }
}

.tasks-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tasks-list li {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: 13px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.tasks-list a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.doc-item {
  cursor: pointer;
}

@media (hover: hover) {
  .doc-item:hover {
    border-color: var(--accent);
  }
}

.tasks-empty {
  color: var(--text-muted);
  font-size: 13px;
  list-style: none;
}

/* ============ Accounts view ============ */

.accounts-view h2 {
  margin: 0 0 2px;
  font-size: 16px;
}

.account-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.account-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  background: var(--bg-alt);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) {
  .account-card:not(.unsupported):hover {
    border-color: var(--accent);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
  }
}

.account-card.unsupported {
  opacity: 0.75;
}

.account-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}

.account-reason {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

.connect-btn {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  padding: 10px var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: white;
  font-weight: 600;
  font-size: 14px;
  transition: filter 0.15s ease, transform 0.1s ease;
}

@media (hover: hover) {
  .connect-btn:hover {
    filter: brightness(1.08);
  }
}

.connect-btn:active {
  transform: scale(0.96);
}

.disconnect-btn {
  background: var(--bg);
  color: var(--error);
  border: 1px solid var(--error);
}

@media (hover: hover) {
  .disconnect-btn:hover {
    background: var(--error);
    color: white;
  }
}

/* ---- Tools view: compact — denser than .account-cards, 2-up on wider screens ---- */

.tool-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.tool-catalog-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--bg-alt);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tool-catalog-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: 13px;
}

.tool-used-by {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tool-feature-list {
  margin: 0;
  padding-left: 16px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-muted);
}

.tool-feature-list li + li {
  margin-top: 2px;
}

.tool-example-prompt {
  margin: 2px 0 0;
  font-size: 12px;
  font-style: italic;
  color: var(--text);
  border-left: 2px solid var(--accent);
  padding-left: 8px;
  line-height: 1.4;
}

/* ---- Settings view: grouped credential fields, modeled on .account-cards ---- */

.settings-view h2 {
  margin: 0 0 2px;
  font-size: 16px;
}

#settings-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

.settings-group {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  background: var(--bg-alt);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.settings-group h3 {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-field-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12px;
  font-weight: 600;
}

.settings-field input {
  font-weight: 400;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg);
  padding: 8px 10px;
  font-size: 13px;
}

.settings-actions {
  display: flex;
  justify-content: flex-end;
}

.confirm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
}

.confirm-modal {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  max-width: 360px;
  width: 100%;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

.confirm-modal h3 {
  margin: 0 0 var(--space-2);
  font-size: 16px;
  color: var(--text);
}

.confirm-modal-message {
  margin: 0 0 var(--space-5);
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
}

.confirm-modal:not(.folder-modal):not(.schedule-modal):not(.lead-modal):not(.playbook-modal):not(.portfolio-modal) h3,
.confirm-modal:not(.folder-modal):not(.schedule-modal):not(.lead-modal):not(.playbook-modal):not(.portfolio-modal) .confirm-modal-message,
.confirm-modal:not(.folder-modal):not(.schedule-modal):not(.lead-modal):not(.playbook-modal):not(.portfolio-modal) .confirm-modal-message strong {
  color: #ffffff;
}

.confirm-modal:not(.folder-modal):not(.schedule-modal):not(.lead-modal):not(.playbook-modal):not(.portfolio-modal) .confirm-btn-cancel {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.24);
  color: #ffffff;
}

.confirm-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.guarded-delete-input {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--text-muted) 18%);
  border-radius: var(--radius-xs);
  background: var(--bg);
  padding: 8px 10px;
  font-size: 13px;
  margin-bottom: var(--space-4);
}

.guarded-delete-input:focus {
  outline: none;
  border-color: var(--error);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 18%, transparent);
}

/* ---- Memory hero: the Memory department's entire chat surface, replacing
   the standard composer+run-history sidebar (see isFullWidthView). No run
   log is ever shown here — just a ripple-pulsing brain and status text
   whose color/animation intensity tracks the real run lifecycle
   (idle -> watching you type -> analysing while the run is actually
   in-flight -> done once it reports back), plus a big pill input. ---- */

.memory-hero {
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
}

.memory-hero-topbar {
  display: flex;
  justify-content: flex-end;
}

.memory-hero-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-align: center;
  padding: 0 var(--space-4);
}

.memory-hero-icon-wrap {
  position: relative;
  width: 168px;
  height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
}

.memory-hero-icon-wrap svg {
  width: 84px;
  height: 84px;
  stroke-width: 1.5;
  color: var(--memory-yellow-hover);
  filter: drop-shadow(0 0 20px color-mix(in srgb, var(--memory-yellow-hover) 55%, transparent));
  animation: memory-icon-pulse 3.2s ease-in-out infinite;
  position: relative;
  z-index: 1;
}

.memory-hero-ripple {
  position: absolute;
  inset: 22px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--memory-yellow-hover) 55%, transparent);
  opacity: 0;
  animation: memory-ripple 3.2s ease-out infinite;
}

.memory-hero-ripple:nth-child(2) {
  animation-delay: 1.07s;
}

.memory-hero-ripple:nth-child(3) {
  animation-delay: 2.14s;
}

/* "Analysing" — the underlying run is actually in flight, not a fake
   timer — so the whole ripple/pulse speeds up to read as active thought
   rather than the idle ambient breathing. */
.memory-hero-icon-wrap.busy svg {
  animation-duration: 1s;
}

.memory-hero-icon-wrap.busy .memory-hero-ripple {
  animation-duration: 1.3s;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--memory-yellow-hover) 45%);
}

@keyframes memory-icon-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

@keyframes memory-ripple {
  0% {
    transform: scale(0.55);
    opacity: 0.75;
  }
  100% {
    transform: scale(1.85);
    opacity: 0;
  }
}

/* Gemini-style flowing gradient text — same trick as the yellow header
   glow (color-mix over a shared palette) but animated as a moving
   linear gradient clipped to the text itself instead of a radial bloom. */
.memory-hero-status-text {
  margin: 0;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.01em;
  background: linear-gradient(90deg, var(--memory-yellow-hover), var(--accent), #60a5fa, var(--memory-yellow-hover));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: memory-gradient-flow 5s linear infinite;
}

.memory-hero-status-text[data-status="analysing"] {
  animation-duration: 1.4s;
}

.memory-hero-status-text[data-status="error"] {
  background-image: linear-gradient(90deg, var(--error), #f97316, var(--error));
}

@keyframes memory-gradient-flow {
  to {
    background-position: 300% center;
  }
}

.memory-hero-confirmation {
  max-width: 480px;
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
  animation: memory-confirmation-in 0.3s ease;
}

@keyframes memory-confirmation-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.memory-hero-composer {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding-bottom: var(--space-4);
}

.memory-hero-input-shell {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.memory-hero-input-shell textarea {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: none;
  max-height: 120px;
  padding: 6px 0;
}

.memory-hero-input-shell textarea:focus {
  outline: none;
}

.memory-hero-input-shell textarea::placeholder {
  color: var(--text-faint);
}

.memory-hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.memory-feed-btn {
  border: none;
  border-radius: 999px;
  padding: 0 20px;
  height: 40px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), #4f8ef7);
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}

@media (hover: hover) {
  .memory-feed-btn:hover:not(:disabled) {
    filter: brightness(1.08);
    transform: translateY(-1px);
  }
}

.memory-feed-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.confirm-btn {
  padding: 8px 16px;
  border-radius: var(--radius-xs);
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  transition: filter 0.15s ease;
}

@media (hover: hover) {
  .confirm-btn:hover {
    filter: brightness(0.96);
  }
}

.confirm-btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.confirm-btn-danger {
  background: var(--error);
  border-color: var(--error);
  color: white;
}

/* ============ Files view ============ */
/* Two-pane, VS Code-style: a lazily-expanding folder tree on the left, a
 * preview/details pane on the right. Stacked instead of side-by-side below
 * the tablet breakpoint, same as everywhere else in this app. */

.files-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: var(--space-3);
}

.files-tree {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  overflow-y: auto;
  padding: var(--space-2) 0;
  max-height: 260px;
}

.files-tree-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-3) var(--space-2);
}

.files-tree-head h2 {
  margin: 0;
  font-size: 15px;
}

.files-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px var(--space-3) 7px 10px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: var(--radius-xs);
  transition: background 0.12s ease;
}

@media (hover: hover) {
  .files-row:hover {
    background: var(--bg-raised);
  }
}

.files-row.selected {
  background: var(--accent-soft);
  color: var(--accent);
}

.files-row.files-loading,
.files-row.files-empty-row {
  color: var(--text-faint);
  cursor: default;
  font-style: italic;
}

.files-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: inline-flex;
  color: var(--text-faint);
}

.files-chevron svg {
  width: 14px;
  height: 14px;
}

.files-row-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--text-muted);
}

.files-row-icon svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.8;
}

.files-row.selected .files-row-icon {
  color: var(--accent);
}

.files-row-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.files-error {
  margin: 0 var(--space-3) var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--error) 12%, transparent);
  color: var(--error);
  font-size: 12px;
}

.files-preview-pane {
  flex: 1;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.files-uploading-banner {
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-xs);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
}

.files-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.files-crumb {
  font-size: 13px;
  color: var(--text-muted);
  min-width: 0;
  word-break: break-word;
}

.files-crumb-sep {
  color: var(--text-faint);
}

.files-preview-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.files-upload-btn,
.files-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-xs);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text);
  transition: filter 0.15s ease;
}

.files-upload-btn svg,
.files-download-btn svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.8;
}

.files-download-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.files-delete-btn {
  color: var(--error);
  border-color: color-mix(in srgb, var(--error) 40%, var(--border));
}

@media (hover: hover) {
  .files-upload-btn:hover,
  .files-download-btn:hover {
    filter: brightness(0.96);
  }

  .files-delete-btn:hover {
    background: color-mix(in srgb, var(--error) 14%, transparent);
    filter: none;
  }
}

.files-preview-meta {
  margin-top: var(--space-2);
  font-size: 12px;
  color: var(--text-faint);
}

.files-preview-body {
  margin-top: var(--space-4);
  flex: 1;
  min-height: 0;
}

.files-preview-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--text-muted);
  text-align: center;
  padding: var(--space-6) var(--space-3);
}

/* ---- New folder modal: reuses .confirm-backdrop/.confirm-modal ---- */

.folder-modal {
  max-width: 340px;
}

.folder-modal input[type="text"] {
  width: 100%;
  font-weight: 400;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg);
  padding: 8px 10px;
  font-size: 13px;
  margin-top: var(--space-2);
}

.folder-modal-error {
  margin: var(--space-2) 0 0;
  font-size: 12px;
  color: var(--error);
}

.files-preview-empty svg {
  width: 36px;
  height: 36px;
  stroke-width: 1.4;
  color: var(--text-faint);
}

.files-preview-empty p {
  margin: 0;
  font-size: 13px;
}

.files-preview-media {
  display: flex;
  justify-content: center;
}

.files-preview-media img {
  max-width: 100%;
  max-height: 60vh;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.files-preview-frame {
  width: 100%;
  height: 60vh;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.files-preview-text {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0;
}

.files-preview-doc {
  font-size: 14px;
  line-height: 1.6;
}

@media (min-width: 720px) {
  .files-view {
    flex-direction: row;
    padding: var(--space-5);
  }

  .files-tree {
    width: 280px;
    flex-shrink: 0;
    max-height: none;
  }
}

/* ============ Calendar ============ */

.calendar-view {
  padding: var(--space-4);
}

.calendar-view-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.calendar-view-head h2 {
  margin: 0;
  font-size: 18px;
}

.calendar-tabs {
  display: flex;
  gap: 2px;
  background: var(--bg-alt);
  padding: 3px;
  border-radius: 999px;
}

.calendar-tab {
  background: transparent;
  border: 0;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}

.calendar-tab.active {
  background: var(--bg-raised);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.content-type-chip.active {
  background: color-mix(in srgb, var(--chip-color, var(--accent)) 18%, var(--bg-raised));
  color: var(--chip-color, var(--accent));
  box-shadow: none;
}

.calendar-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.calendar-toolbar-left,
.calendar-toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.calendar-nav-arrows {
  display: flex;
  gap: 2px;
}

.calendar-range-label {
  font-size: 14px;
}

.calendar-toolbar-right .ai-button {
  width: auto;
  flex: 0 0 auto;
  padding: 0 14px;
}

.calendar-hint {
  font-size: 12px;
  color: var(--text-muted);
}

.link-btn {
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

.archive-toggle-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

/* ---- Two-column layout: mini calendar + detail panel (side), grid (main) ---- */

.calendar-columns {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: stretch;
  margin-bottom: var(--space-5);
}

.calendar-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.calendar-main {
  min-width: 0;
}

@media (min-width: 720px) {
  .calendar-columns {
    flex-direction: row;
    align-items: flex-start;
  }

  .calendar-side {
    flex: 0 0 260px;
  }

  .calendar-main {
    flex: 1;
  }
}

/* ---- Mini calendar ---- */

.mini-calendar {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  background: var(--bg-raised);
}

.mini-calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
  font-size: 12px;
}

.mini-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 2px;
}

.mini-weekdays span {
  font-size: 9px;
  text-align: center;
  color: var(--text-faint);
  text-transform: uppercase;
}

.mini-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.mini-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.mini-cell.empty {
  visibility: hidden;
  cursor: default;
}

@media (hover: hover) {
  .mini-cell:not(.empty):hover {
    background: var(--bg-alt);
  }
}

.mini-cell.today {
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--accent);
  font-weight: 700;
}

.mini-cell.selected {
  background: var(--text);
  color: var(--bg);
  font-weight: 700;
}

.mini-cell.pending {
  background: var(--accent-soft);
  color: var(--accent);
}

.mini-dot {
  position: absolute;
  bottom: 3px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent);
}

.mini-cell.selected .mini-dot {
  background: var(--bg);
}

/* ---- Detail panel: automations on the selected date ---- */

.detail-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  padding: var(--space-4);
}

.detail-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.detail-panel-head strong {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.detail-panel-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 360px;
  overflow-y: auto;
}

.detail-card {
  border-left: 3px solid var(--chip-color, var(--accent));
  border-radius: var(--radius-xs);
  background: var(--bg-alt);
  padding: var(--space-2) var(--space-3);
}

.detail-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
}

.detail-card-title {
  font-size: 12px;
  font-weight: 700;
}

.detail-card-time {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.detail-card-meta {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

.detail-card-goal {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.4;
}

.detail-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.content-detail-card {
  display: block;
  width: 100%;
  border: none;
  border-left: 3px solid var(--chip-color, var(--accent));
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 0 2px;
  margin-bottom: 4px;
}

.calendar-weekdays span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  text-align: center;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calendar-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 34px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.calendar-cell.empty {
  visibility: hidden;
  cursor: default;
  border: 0;
  background: transparent;
}

@media (hover: hover) {
  .calendar-cell:not(.empty):hover {
    border-color: var(--accent);
    transform: translateY(-1px);
  }
}

.calendar-cell:active:not(.empty) {
  transform: scale(0.97);
}

.calendar-cell.today {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.calendar-cell.pending {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.calendar-cell.selected {
  background: var(--text);
  border-color: var(--text);
}

.calendar-cell.selected .calendar-cell-num {
  color: var(--bg);
}

.calendar-cell-num {
  font-size: 11px;
  font-weight: 600;
}

.calendar-cell-dots {
  display: flex;
  gap: 2px;
  min-height: 4px;
}

.calendar-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  flex-shrink: 0;
}

.schedule-panel {
  margin-top: var(--space-4);
}

.schedule-panel h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0 0 var(--space-2);
}

.schedule-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.schedule-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-raised);
}

.schedule-item.disabled {
  opacity: 0.55;
}

.schedule-item .calendar-dot {
  width: 7px;
  height: 7px;
}

.schedule-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.schedule-item-label {
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-item .item-meta {
  font-size: 11px;
}

.schedule-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.toggle-switch {
  position: relative;
  width: 28px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.toggle-switch.on {
  background: var(--accent);
  border-color: var(--accent);
}

.toggle-knob {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: white;
  transition: transform 0.15s ease;
}

.toggle-switch.on .toggle-knob {
  transform: translateX(12px);
}

/* ---- Schedule modal: reuses .confirm-backdrop/.confirm-modal, adds a form ---- */

.schedule-modal {
  max-width: 400px;
  max-height: 90vh;
  padding: var(--space-4);
  overflow-y: auto;
}

.schedule-modal .field-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.schedule-modal input[type="text"],
.schedule-modal input[type="date"],
.schedule-modal input[type="time"],
.schedule-modal select,
.schedule-modal textarea {
  font-weight: 400;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg);
  padding: 6px 9px;
  font-size: 12px;
}

.schedule-modal textarea {
  resize: vertical;
}

.weekday-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.weekday-chip {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
}

.weekday-chip:has(input:checked) {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.weekday-chip input {
  margin: 0;
}

/* ---- CRM: kanban board ---- */

.crm-view {
  padding: var(--space-3);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.section-head h2 {
  margin: 0;
  font-size: 14px;
}

.section-tabs {
  display: flex;
  gap: 2px;
  background: var(--bg-alt);
  padding: 2px;
  border-radius: 999px;
}

.section-tab {
  background: transparent;
  border: 0;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}

.section-tab.active {
  background: var(--bg-raised);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.section-count {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
}

.section-head .ai-button {
  width: auto;
  flex: 0 0 auto;
  padding: 0 12px;
  height: 28px;
  font-size: 12px;
}

.kanban-board {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: 10px;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: var(--text-faint) transparent; /* Firefox */
}

.kanban-board::-webkit-scrollbar {
  height: 6px;
}

.kanban-board::-webkit-scrollbar-track {
  background: transparent;
}

.kanban-board::-webkit-scrollbar-thumb {
  background: var(--text-faint);
  border-radius: 999px;
}

.kanban-board::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

.kanban-column {
  flex: 0 0 176px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-alt);
  padding: var(--space-2);
  min-height: 90px;
}

.kanban-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.kanban-column-count {
  background: var(--bg-raised);
  border-radius: 999px;
  padding: 0 6px;
  font-size: 10px;
}

.kanban-column-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* .content-area clips overflow at desktop widths (the app-shell layout —
     see .content-area's `overflow: hidden` above 720px) so a column with
     more cards than fit on screen was simply cut off with no way to reach
     the rest: no page-level vertical scroll to fall back on, only this
     board's own `overflow-x` on .kanban-board. Cap each column's own body
     and let it scroll independently, Trello-style, so the column header/
     count stays pinned while its card list scrolls. */
  max-height: 60vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--text-faint) transparent;
}

.kanban-column-body::-webkit-scrollbar {
  width: 6px;
}

.kanban-column-body::-webkit-scrollbar-track {
  background: transparent;
}

.kanban-column-body::-webkit-scrollbar-thumb {
  background: var(--text-faint);
  border-radius: 999px;
}

.kanban-column-body::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

.kanban-empty {
  margin: 0;
  font-size: 10.5px;
  color: var(--text-faint);
}

.lead-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-raised);
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lead-card-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  cursor: pointer;
}

.lead-card-name {
  font-size: 11.5px;
  font-weight: 700;
}

.lead-card-company {
  font-size: 10.5px;
  color: var(--text-muted);
}

.lead-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: 1px;
  font-size: 10px;
  color: var(--text-faint);
}

.lead-card-source {
  text-transform: capitalize;
}

.lead-card-value {
  font-weight: 600;
  color: var(--success);
}

.lead-card-stage {
  font-weight: 400;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg);
  padding: 3px 5px;
  font-size: 10px;
}

/* ---- Lead modal: reuses .confirm-backdrop/.confirm-modal, adds a form.
   Deliberately its own glass-purple card (not the plain white confirm-modal
   base) — same accent purple as .confirm-btn-primary/.ai-button, with
   backdrop-filter blur so it reads as a frosted panel rather than a flat
   fill. Every text/field color below is overridden together with it since
   the base .confirm-modal palette (dark text for a white card) would be
   close to invisible on this dark purple background. ---- */

#lead-modal-backdrop {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lead-modal {
  max-width: 420px;
  max-height: 90vh;
  padding: var(--space-4);
  overflow-y: auto;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.02)),
    var(--accent);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 24px 60px rgba(28, 20, 80, 0.35);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
}

.lead-modal h3 {
  color: #fff;
}

.lead-modal .field-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  margin-bottom: var(--space-2);
}

.lead-modal input[type="text"],
.lead-modal input[type="email"],
.lead-modal input[type="number"],
.lead-modal select,
.lead-modal textarea {
  font-weight: 400;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.14);
  padding: 7px 10px;
  font-size: 13px;
}

.lead-modal select option {
  color: #1a1a1a;
}

.lead-modal input::placeholder,
.lead-modal textarea::placeholder {
  color: rgba(255, 255, 255, 0.65);
  opacity: 1;
}

.lead-modal input:focus,
.lead-modal select:focus,
.lead-modal textarea:focus {
  outline: none;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.22);
}

.lead-modal textarea {
  resize: vertical;
}

.lead-modal .confirm-btn-primary {
  background: #fff;
  border-color: #fff;
  color: var(--accent);
}

.lead-modal .attachment-error {
  color: #fff;
  background: rgba(0, 0, 0, 0.22);
  border-radius: var(--radius-xs);
  padding: 6px 9px;
}

.lead-activity {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.lead-activity h4 {
  margin: 0 0 var(--space-2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.75);
}

.lead-activity-list {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 160px;
  overflow-y: auto;
}

.lead-activity-list li {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 11px;
}

.lead-activity-ts {
  color: rgba(255, 255, 255, 0.65);
  font-size: 10px;
}

.lead-activity-note {
  color: #fff;
}

.lead-activity-empty {
  color: rgba(255, 255, 255, 0.65);
}

.lead-activity-form {
  display: flex;
  gap: 6px;
}

.lead-activity-form input {
  flex: 1;
  font-weight: 400;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.14);
  padding: 6px 9px;
  font-size: 12px;
}

.lead-modal .lead-activity-form input::placeholder {
  color: rgba(255, 255, 255, 0.65);
}

.lead-value-row {
  display: flex;
  gap: 6px;
}

.lead-value-row input[type="number"] {
  flex: 1;
  min-width: 0;
}

.lead-currency-input {
  width: 64px;
  flex: 0 0 auto;
  text-transform: uppercase;
}

.lead-card-name {
  display: flex;
  align-items: center;
  gap: 4px;
}

.lead-card-followup {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

.lead-card-followup-due {
  color: var(--warning);
}

.lead-card-followup-overdue {
  color: var(--error);
}

.lead-card-tags,
.lead-table-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 2px;
}

.lead-tag-chip {
  display: inline-flex;
  border-radius: 999px;
  background: var(--bg-alt);
  color: var(--text-muted);
  padding: 1px 7px;
  font-size: 9.5px;
  font-weight: 600;
}

/* ---- CRM toolbar: stage pills (renderLeadTabs, unchanged) plus search,
   source/follow-up filters, and CSV export/import — sits below .section-head
   on Board and Table tabs; Stats hides the stage pills since its breakdown
   already ignores that filter. ---- */

.crm-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.crm-toolbar-search {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-alt);
  padding: 0 8px;
  height: 28px;
  color: var(--text-faint);
}

.crm-toolbar-search svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.crm-toolbar-search input {
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 11.5px;
  width: 150px;
  height: 100%;
}

.crm-toolbar-search input:focus {
  outline: none;
}

.crm-toolbar-select {
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-alt);
  color: var(--text);
  font-size: 11px;
  height: 28px;
  padding: 0 6px;
}

.crm-toolbar .files-upload-btn,
.crm-toolbar .files-download-btn {
  padding: 0 10px;
  height: 28px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 0;
}

.crm-toolbar .files-upload-btn svg,
.crm-toolbar .files-download-btn svg {
  width: 13px;
  height: 13px;
}

/* ---- CRM: table view (renderLeadTable) — same row/action chrome as the
   Playbook table, but with lead-specific columns. ---- */

.lead-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
}

.lead-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  white-space: nowrap;
}

.lead-table th,
.lead-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.lead-table thead th {
  background: var(--bg-alt);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: sticky;
  top: 0;
  cursor: pointer;
  user-select: none;
}

.lead-table thead th:hover {
  color: var(--text);
}

.lead-sort-icon {
  width: 11px;
  height: 11px;
  vertical-align: -2px;
}

.lead-table tbody tr:last-child td {
  border-bottom: 0;
}

.lead-table-row {
  cursor: pointer;
}

@media (hover: hover) {
  .lead-table-row:hover td {
    background: var(--bg-alt);
  }
}

.lead-table-name {
  display: block;
  font-weight: 700;
}

.lead-table-company {
  display: block;
  font-size: 10.5px;
  color: var(--text-muted);
}

.lead-followup-overdue {
  color: var(--error);
  font-weight: 600;
}

.lead-stage-badge {
  display: inline-flex;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 700;
  background: var(--bg-alt);
  color: var(--text-muted);
}

.lead-stage-badge.lead-stage-won {
  background: color-mix(in srgb, var(--success) 16%, transparent);
  color: var(--success);
}

.lead-stage-badge.lead-stage-lost {
  background: color-mix(in srgb, var(--error) 14%, transparent);
  color: var(--error);
}

/* ---- CRM: stats dashboard (renderCrmStats) — KPI tiles reuse the bento
   color tokens but their own class names, not .bento-cell, so this stays
   decoupled from the Overview dashboard's card structure/hover rules. ---- */

.crm-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.crm-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-2);
}

.crm-kpi-tile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-radius: var(--radius-xs);
  padding: var(--space-2) var(--space-3);
}

.crm-kpi-mint { background: var(--bento-mint); color: var(--bento-mint-ink); }
.crm-kpi-forest { background: var(--bento-forest); color: var(--bento-forest-ink); }
.crm-kpi-orange { background: var(--bento-orange); color: var(--bento-orange-ink); }
.crm-kpi-lavender { background: var(--bento-lavender); color: var(--bento-lavender-ink); }

.crm-kpi-label {
  font-size: 10.5px;
  font-weight: 600;
  opacity: 0.75;
}

.crm-kpi-value {
  font-size: 20px;
  font-weight: 700;
}

.crm-kpi-sub {
  font-size: 10px;
  opacity: 0.7;
}

.crm-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.crm-stats-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-alt);
  padding: var(--space-2) var(--space-3);
}

.crm-stats-panel h3 {
  margin: 0 0 var(--space-2);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.crm-stats-empty {
  margin: 0;
  font-size: 11px;
  color: var(--text-faint);
}

.crm-bar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.crm-bar-list li {
  display: grid;
  grid-template-columns: 72px 1fr 28px;
  align-items: center;
  gap: 8px;
}

.crm-bar-label {
  font-size: 10.5px;
  color: var(--text-muted);
  text-transform: capitalize;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-bar-track {
  height: 8px;
  border-radius: 999px;
  background: var(--bg-raised);
  overflow: hidden;
}

.crm-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  min-width: 2px;
}

.crm-bar-count {
  font-size: 10.5px;
  font-weight: 700;
  text-align: right;
}

.crm-split-bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  gap: 2px;
  background: var(--bg-raised);
}

.crm-split-seg {
  height: 100%;
  min-width: 2px;
}

.crm-split-won {
  background: var(--success);
}

.crm-split-lost {
  background: var(--error);
}

.crm-split-legend {
  display: flex;
  gap: var(--space-3);
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--text-muted);
}

.crm-split-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.crm-split-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
}

.crm-split-dot.crm-split-won {
  background: var(--success);
}

.crm-split-dot.crm-split-lost {
  background: var(--error);
}

.crm-followup-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.crm-followup-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 5px 6px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
}

@media (hover: hover) {
  .crm-followup-list li:hover {
    background: var(--bg-raised);
  }
}

.crm-followup-name {
  font-weight: 600;
}

.crm-followup-date {
  color: var(--text-muted);
  font-size: 10.5px;
}

.crm-followup-date.crm-followup-overdue {
  color: var(--error);
  font-weight: 700;
}

.crm-followup-date.crm-followup-due {
  color: var(--warning);
  font-weight: 700;
}

@media (max-width: 720px) {
  .crm-stats-row {
    grid-template-columns: 1fr;
  }
}

/* ---- CRM: CSV import preview modal — same frosted-purple .lead-modal card,
   with a scrollable table of parsed rows instead of a form. ---- */

.lead-import-modal {
  max-width: 560px;
}

.lead-import-preview {
  margin: var(--space-2) 0;
  max-height: 320px;
  overflow: auto;
  border-radius: var(--radius-xs);
  background: rgba(0, 0, 0, 0.14);
}

.lead-import-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  color: #fff;
}

.lead-import-table th,
.lead-import-table td {
  padding: 5px 8px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  white-space: nowrap;
}

.lead-import-table thead th {
  color: rgba(255, 255, 255, 0.75);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 9.5px;
  letter-spacing: 0.04em;
}

.lead-import-row-error td {
  color: #ffd8d8;
}

.lead-import-more {
  margin: 6px 0 0;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.65);
}

/* ---- Playbook: header dropdown (Sales/Marketing), table view, and the
   edit modal (visually the same frosted-purple card as .lead-modal). ---- */

.playbook-menu {
  position: relative;
}

.header-icon-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.playbook-menu-popover {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  width: max-content;
  min-width: 150px;
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.54);
  color: var(--text);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 18px 42px rgba(38, 38, 58, 0.14);
  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 6000;
}

.playbook-menu:hover .playbook-menu-popover,
.playbook-menu:focus-within .playbook-menu-popover,
.playbook-menu.open .playbook-menu-popover {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.playbook-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.playbook-menu-item svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.8;
  color: var(--text-muted);
}

@media (hover: hover) {
  .playbook-menu-item:hover {
    background: var(--accent-soft);
    color: var(--accent);
  }

  .playbook-menu-item:hover svg {
    color: var(--accent);
  }
}

.playbook-menu-item.active {
  background: var(--accent-soft);
  color: var(--accent);
}

html[data-theme="dark"] .playbook-menu-popover {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(28, 28, 38, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 42px rgba(0, 0, 0, 0.32);
}

.playbook-view {
  padding: var(--space-3);
}

.playbook-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
}

.playbook-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  white-space: nowrap;
}

.playbook-table th,
.playbook-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.playbook-table thead th {
  background: var(--bg-alt);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: sticky;
  top: 0;
}

.playbook-table tbody tr:last-child td {
  border-bottom: 0;
}

.playbook-row.done td {
  color: var(--text-faint);
}

.playbook-row.done .playbook-type-badge {
  opacity: 0.6;
}

.playbook-check-col {
  width: 36px;
  text-align: center;
}

.playbook-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
}

.playbook-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-raised);
  padding: 3px 8px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--type-color, var(--text));
}

.playbook-type-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--type-color, var(--text-faint));
  flex-shrink: 0;
}

.playbook-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.playbook-link:hover {
  text-decoration: underline;
}

.playbook-text-cell {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playbook-owner-badge {
  display: inline-flex;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: capitalize;
}

.playbook-owner-badge.agent {
  background: var(--accent-soft);
  color: var(--accent);
}

.playbook-owner-badge.manual {
  background: var(--bg-alt);
  color: var(--text-muted);
}

.playbook-date-cell {
  color: var(--text-muted);
  font-size: 11px;
}

.playbook-row-actions {
  display: flex;
  gap: 4px;
}

/* ---- Portfolio: project/category tabs + entry table. Own class names
   rather than reusing .playbook-* directly (own colors/link/badge/cell
   styling) even though the two tables carry similar visual weight — same
   decoupling reasoning as the CRM/Playbook .section-* split above, so a
   future restyle of one table can't silently change the other. ---- */

.portfolio-view {
  padding: var(--space-3);
}

.portfolio-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

/* .ai-button defaults to width:100% (fine where its only flex sibling is a
   small label, e.g. .section-head), but .portfolio-toolbar carries a whole
   row of category tabs before it — without a width override here the
   button demanded ~100% of the row's own hypothetical size and either blew
   up into a full-width bar or, once a second button was added, starved its
   sibling down to a sliver. Same fix as .section-head .ai-button, plus a
   dedicated group so the count/buttons wrap onto their own line as a unit
   instead of one button wrapping while the other gets crushed in place. */
.portfolio-toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  flex-shrink: 0;
}

.portfolio-toolbar-actions .ai-button {
  width: auto;
  flex: 0 0 auto;
  padding: 0 12px;
  height: 28px;
  font-size: 12px;
}

/* A quieter sibling to .ai-button (which reserves its animated gradient
   border for the primary "create" action) — same size/shape, flat surface,
   for a secondary action like exporting rather than authoring something new. */
.ai-button-secondary {
  width: auto;
  background: var(--bg-alt);
  border-color: var(--border);
  color: var(--text);
  box-shadow: none;
}

.ai-button-secondary::before {
  display: none;
}

@media (hover: hover) {
  .ai-button-secondary:hover:not(:disabled) {
    transform: none;
    filter: brightness(0.96);
    box-shadow: none;
  }
}

.ai-button-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.portfolio-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
}

.portfolio-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  white-space: nowrap;
}

.portfolio-table th,
.portfolio-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.portfolio-table thead th {
  background: var(--bg-alt);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: sticky;
  top: 0;
}

.portfolio-table tbody tr:last-child td {
  border-bottom: 0;
}

.portfolio-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.portfolio-link:hover {
  text-decoration: underline;
}

.portfolio-text-cell {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portfolio-date-cell {
  color: var(--text-muted);
  font-size: 11px;
}

.portfolio-status-badge {
  display: inline-flex;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 700;
  background: var(--bg-alt);
  color: var(--text-muted);
}

.portfolio-status-badge.portfolio-status-published {
  background: color-mix(in srgb, var(--success) 16%, transparent);
  color: var(--success);
}

.portfolio-owner-badge {
  display: inline-flex;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: capitalize;
}

.portfolio-owner-badge.agent {
  background: var(--accent-soft);
  color: var(--accent);
}

.portfolio-owner-badge.manual {
  background: var(--bg-alt);
  color: var(--text-muted);
}

/* ---- Portfolio modals: a "liquid glass" treatment distinct from the
   purple-tinted .lead-modal/.playbook-modal — translucent and theme-
   adaptive (built from --bg-raised + backdrop-filter) rather than a fixed
   brand-color tint, so normal text tokens stay readable in both themes
   without per-field color overrides. ---- */

#portfolio-entry-modal-backdrop,
#portfolio-project-modal-backdrop {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.portfolio-modal {
  max-width: 420px;
  max-height: 90vh;
  padding: var(--space-4);
  overflow-y: auto;
  background: color-mix(in srgb, var(--bg-raised) 96%, var(--bg) 4%);
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(20, 20, 50, 0.28);
}

.portfolio-modal h3 {
  margin: 0 0 var(--space-3);
  color: var(--text);
  font-size: 17px;
}

.portfolio-modal .field-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.portfolio-modal input[type="text"],
.portfolio-modal input[type="date"],
.portfolio-modal select,
.portfolio-modal textarea {
  width: 100%;
  box-sizing: border-box;
  font-weight: 400;
  font-family: inherit;
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--text-muted) 18%);
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--bg) 62%, var(--bg-raised) 38%);
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.35;
}

.portfolio-modal select option {
  color: var(--text);
  background: var(--bg-raised);
}

.portfolio-modal input::placeholder,
.portfolio-modal textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.portfolio-modal input:focus,
.portfolio-modal select:focus,
.portfolio-modal textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-raised);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.portfolio-modal textarea {
  resize: vertical;
}

.portfolio-modal .attachment-error {
  color: #fff;
  background: rgba(0, 0, 0, 0.22);
  border-radius: var(--radius-xs);
  padding: 6px 9px;
}

/* ---- Portfolio notes: freeform markdown memory (project-details/database
   tabs) — a card list that drills into a full-width read/edit pane, no
   modal and no structured form fields, just a title and a markdown body. ---- */

.portfolio-notes-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-2);
}

.portfolio-note-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-alt);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.portfolio-note-card:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--bg-alt) 80%, var(--accent) 6%);
}

.portfolio-note-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding-right: 26px;
}

.portfolio-note-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.portfolio-note-card-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portfolio-note-card-preview {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: pre-line;
  font-family: var(--font-mono, ui-monospace, monospace);
}

.portfolio-note-card-meta {
  font-size: 10.5px;
  color: var(--text-muted);
}

.portfolio-note-card .run-action-icon {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
}

.portfolio-note-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-alt);
  padding: var(--space-3);
}

.portfolio-note-detail-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.portfolio-note-title-input {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  padding: 6px 8px;
  font-family: inherit;
}

.portfolio-note-title-input:hover,
.portfolio-note-title-input:focus {
  border-color: var(--border);
  background: var(--bg);
}

.portfolio-note-title-input:focus {
  outline: none;
  border-color: var(--accent);
}

.portfolio-note-detail-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.segmented-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 2px;
  gap: 2px;
  background: var(--bg);
}

.segmented-toggle-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: calc(var(--radius-xs) - 3px);
  cursor: pointer;
}

.segmented-toggle-btn.active {
  background: var(--accent);
  color: #fff;
}

.portfolio-note-meta {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.portfolio-note-editor {
  width: 100%;
  box-sizing: border-box;
  min-height: 360px;
  resize: vertical;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: var(--space-3);
}

.portfolio-note-editor:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.portfolio-note-preview {
  min-height: 360px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: var(--space-3);
  overflow-y: auto;
}

.portfolio-note-detail-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.portfolio-note-copied {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--success);
}

#playbook-modal-backdrop {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.playbook-modal {
  max-width: 420px;
  max-height: 90vh;
  padding: var(--space-4);
  overflow-y: auto;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.02)),
    var(--accent);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 24px 60px rgba(28, 20, 80, 0.35);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
}

.playbook-modal h3 {
  color: #fff;
}

.playbook-modal .field-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  margin-bottom: var(--space-2);
}

.playbook-modal .playbook-done-label {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.playbook-modal input[type="text"],
.playbook-modal select,
.playbook-modal textarea {
  font-weight: 400;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.14);
  padding: 7px 10px;
  font-size: 13px;
}

.playbook-modal select option {
  color: #1a1a1a;
}

.playbook-modal input::placeholder,
.playbook-modal textarea::placeholder {
  color: rgba(255, 255, 255, 0.65);
  opacity: 1;
}

.playbook-modal input:focus,
.playbook-modal select:focus,
.playbook-modal textarea:focus {
  outline: none;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.22);
}

.playbook-modal textarea {
  resize: vertical;
}

.playbook-modal .confirm-btn-primary {
  background: #fff;
  border-color: #fff;
  color: var(--accent);
}

.playbook-modal .attachment-error {
  color: #fff;
  background: rgba(0, 0, 0, 0.22);
  border-radius: var(--radius-xs);
  padding: 6px 9px;
}

/* ============ Breakpoints ============ */

/* Tablet and up: sidebar becomes a permanent column, no drawer/backdrop */
@media (min-width: 720px) {
  .sidebar-backdrop {
    display: none;
  }

  .main {
    padding: 0;
  }

  .run-detail,
  .accounts-view,
  .settings-view {
    padding: var(--space-5);
  }

  .run-header h2 {
    flex: 1;
    order: 0;
  }

  .bento-label {
    font-size: 15px;
  }

  .bento-value {
    font-size: 40px;
  }

  .bento-hero .bento-value {
    font-size: 64px;
  }

  .bento-caption {
    font-size: 14px;
  }
}

/* Desktop: room for the log + side panels side by side */
@media (min-width: 980px) {
  .panels {
    grid-template-columns: 1fr 280px;
  }

  .log {
    height: 60vh;
  }

  .account-cards {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

/* Wide monitors: a bit more side padding than the tablet/desktop baseline.
 * The centered max-width on .dashboard/.run-detail/.accounts-view is what
 * actually stops content from stretching edge to edge; this just keeps the
 * gutter from looking too tight once there's real room to spare. */
@media (min-width: 1500px) {
  .main {
    padding: 0;
  }

  .run-detail,
  .accounts-view,
  .settings-view {
    padding: var(--space-5) calc(var(--space-5) * 2) var(--space-4);
  }

  .files-view {
    padding: var(--space-5) calc(var(--space-5) * 2) var(--space-4);
  }
}

/* ============ Reference mockup visual pass ============ */

:root {
  --bg: #ededed;
  --bg-alt: #ececef;
  --bg-raised: rgba(255, 255, 255, 0.56);
  --bg-raised-solid: #ffffff;
  --glass-sheen-1: rgba(255, 255, 255, 0.66);
  --glass-sheen-2: rgba(255, 255, 255, 0.34);
  --border: rgba(20, 24, 44, 0.04);
  --text: #262634;
  --text-muted: #585965;
  --text-faint: #858693;
  --accent: #6c76ff;
  --accent-soft: #dfe2ff;
  --success: #3fbd51;
  --warning: #f59e0b;
  --error: #df551f;

  --bento-mint: rgba(255, 255, 255, 0.58);
  --bento-mint-ink: #4d4e61;
  --bento-forest: rgba(255, 255, 255, 0.58);
  --bento-forest-ink: #3fbd51;
  --bento-orange: rgba(255, 255, 255, 0.58);
  --bento-orange-ink: #df551f;
  --bento-lavender: rgba(255, 255, 255, 0.58);
  --bento-lavender-ink: #df551f;

  --rail-w: 58px;
  --sidebar-w: 304px;
  --shell-pad-y: clamp(20px, 6vh, 58px);
  --shell-pad-x: clamp(14px, 7vw, 118px);
  --radius: 22px;
  --radius-lg: 22px;
  --radius-sm: 14px;
  --radius-xs: 10px;
  --content-max: 1120px;
}

:root[data-theme="dark"] {
  --bg: #15161b;
  --bg-alt: #202127;
  --bg-raised: rgba(38, 39, 47, 0.68);
  --bg-raised-solid: #24252d;
  --glass-sheen-1: rgba(255, 255, 255, 0.07);
  --glass-sheen-2: rgba(255, 255, 255, 0.02);
  --border: rgba(255, 255, 255, 0.07);
  --text: #f3f4f8;
  --text-muted: #b4b7c3;
  --text-faint: #828692;
  --accent: #8790ff;
  --accent-soft: #282d54;

  --bento-mint: rgba(38, 39, 47, 0.7);
  --bento-mint-ink: #f3f4f8;
  --bento-forest: rgba(38, 39, 47, 0.7);
  --bento-forest-ink: #57d267;
  --bento-orange: rgba(38, 39, 47, 0.7);
  --bento-orange-ink: #ff8a50;
  --bento-lavender: rgba(38, 39, 47, 0.7);
  --bento-lavender-ink: #ff8a50;
}

html,
body {
  background:
    radial-gradient(circle at 42% 35%, rgba(123, 135, 255, 0.3), transparent 28%),
    radial-gradient(circle at 55% 61%, rgba(168, 176, 255, 0.24), transparent 24%),
    var(--bg);
}

/* Dark mode gets the same two blobs, dimmer and less saturated so they read
 * as a subtle glow on a near-black page instead of competing with card
 * text — matches this section's own [data-theme="dark"]-only convention
 * above (initTheme() always stamps an explicit data-theme before first
 * paint, so a separate prefers-color-scheme fallback isn't needed here). */
html[data-theme="dark"],
html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 42% 35%, rgba(90, 95, 190, 0.16), transparent 28%),
    radial-gradient(circle at 55% 61%, rgba(120, 115, 200, 0.12), transparent 24%),
    var(--bg);
}

@media (min-width: 720px) {
  #app {
    max-width: 1120px;
    margin: 0 auto;
    padding: var(--shell-pad-y) var(--shell-pad-x);
  }
}

@media (min-width: 1500px) {
  #app {
    padding-right: var(--shell-pad-x);
    padding-left: var(--shell-pad-x);
  }
}

.layout {
  max-width: var(--content-max);
  margin: 0 auto;
}

/* Solid and opaque on purpose, unlike the dashboard's glass cards — a
 * flat, shadow-free surface that reads as a distinct nav column rather
 * than blending into the background blobs behind it. */
.icon-rail {
  background: var(--bg-raised-solid);
  box-shadow: none;
}

@media (min-width: 720px) {
  .icon-rail {
    padding: 52px 0 0;
  }
}

.nav-scroll {
  gap: 9px;
}

.nav-icon {
  width: 42px;
  height: 42px;
  background: #c9c9c9;
  color: #222532;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.nav-icon svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.75;
}

.nav-icon.active {
  background: color-mix(in srgb, var(--icon-accent, var(--accent)) 78%, white);
  color: #202338;
}

.nav-divider {
  background: transparent;
}

.app-header {
  height: 58px;
  padding: 0 0 11px;
  align-items: flex-end;
}

.brand {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-width: 96px;
}

.brand-logo {
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
  background: linear-gradient(90deg, #5363ff 0%, #9da4ff 92%);
  -webkit-background-clip: text;
  background-clip: text;
}

.brand-tagline {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 8px;
  line-height: 1;
}

.header-menu {
  align-items: flex-end;
  gap: 17px;
  padding-left: 0;
}

.header-menu-link {
  padding: 0;
  color: #111318;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
}

.header-actions {
  gap: 7px;
  align-items: center;
  padding-bottom: 1px;
}

.header-icon-btn {
  width: 25px;
  height: 25px;
  background: color-mix(in srgb, var(--accent-soft) 68%, white);
  color: #5363d9;
}

.header-icon-btn svg {
  width: 14px;
  height: 14px;
}

.header-date-badge {
  height: 25px;
  padding: 0 4px 0 10px;
  gap: 9px;
  background: color-mix(in srgb, var(--accent-soft) 48%, white);
  color: #303346;
  font-size: 11px;
  font-weight: 500;
}

.header-date-badge svg {
  width: 16px;
  height: 16px;
  padding: 2px;
  border-radius: 50%;
  background: #7280ff;
  color: white;
}

.body-row {
  gap: 12px;
  padding: 0;
}

@media (min-width: 720px) {
  .body-row {
    padding: 0;
  }

  .sidebar {
    width: var(--sidebar-w);
    padding: 0;
    gap: 12px;
  }
}

.composer,
.tasklist-card,
.bento-cell,
.log,
.panel,
.files-tree,
.files-preview-pane,
.mini-calendar,
.detail-panel,
.tasks-panel,
.accounts-view,
.settings-view,
.run-detail,
.calendar-view,
.crm-view,
.playbook-view,
.portfolio-view,
.files-view {
  background:
    linear-gradient(135deg, var(--glass-sheen-1), var(--glass-sheen-2)),
    var(--bg-raised);
  border: 1px solid var(--border);
  box-shadow: none;
  backdrop-filter: blur(22px);
}

.composer,
.tasklist-card {
  padding: 18px 18px 16px;
}

@media (min-width: 720px) {
  .composer {
    min-height: 258px;
  }

  .tasklist-card {
    min-height: 0;
  }
}

.sidebar h1,
.composer h1,
.sidebar h2 {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

#goal-form {
  min-height: 186px;
  height: calc(100% - 64px);
  margin-top: 14px;
}

.goal-input-shell {
  flex: 1;
}

.goal-input-shell::before,
.goal-input-shell::after {
  content: none;
}

textarea,
#goal-input {
  height: 100%;
  min-height: 128px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
}

#goal-input {
  padding: 0;
}

.goal-actions {
  min-height: 24px;
}

.attach-circle {
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.42);
}

.goal-actions .ai-button-wrap {
  width: 44px;
  height: 24px;
}

.ai-button-wrap::before,
.ai-button::before {
  content: none;
}

.ai-button {
  height: 24px;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: #2f3139;
  border: 0;
  font-size: 10px;
  box-shadow: none;
}

.ai-button svg {
  display: none;
}

.tasks-header {
  margin-bottom: 18px;
}

.archive-toggle-btn {
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.38);
  font-size: 10px;
}

.run-list {
  padding: 0;
  gap: 8px;
}

.run-item .goal-excerpt {
  color: var(--text-muted);
  font-size: 12px;
}

.item-meta {
  color: var(--text-faint);
  font-size: 11px;
}

.main {
  padding: 0;
  scrollbar-width: none;
}

.main::-webkit-scrollbar {
  display: none;
}

.dashboard,
.run-detail,
.accounts-view,
.settings-view,
.calendar-view,
.files-view {
  max-width: none;
  width: 100%;
}

.dashboard {
  min-height: 100%;
}

.bento-grid {
  min-height: 100%;
  gap: 12px;
}

@media (min-width: 900px) {
  .bento-grid {
    grid-template-columns: minmax(180px, 1fr) minmax(150px, 0.86fr);
    grid-template-rows: minmax(118px, 0.62fr) minmax(210px, 1.38fr);
  }

  .bento-mint {
    grid-column: 1;
    grid-row: 2;
  }

  .bento-forest {
    grid-column: 2;
    grid-row: 2;
  }
}

.bento-cell {
  min-height: 126px;
  padding: 18px;
}

.bento-cell::before {
  top: auto;
  right: auto;
  left: 42%;
  bottom: -58px;
  width: 190px;
  height: 190px;
  background: radial-gradient(circle, rgba(124, 135, 255, 0.34), transparent 68%);
  filter: blur(8px);
}

.bento-value {
  font-size: 44px;
  font-weight: 500;
  letter-spacing: 0;
}

.bento-hero .bento-value {
  font-size: 50px;
}

.bento-caption,
.bento-subvalue,
.bento-label {
  color: var(--text-muted);
  opacity: 1;
  font-size: 11px;
  font-weight: 500;
}

.bento-label {
  font-size: 14px;
}

.bento-lavender .bento-value,
.bento-orange .bento-value {
  color: #df551f;
}

.bento-forest .bento-value {
  color: var(--success);
}

.bento-ring-wrap {
  top: auto;
  right: 22px;
  bottom: 18px;
}

.bento-ring {
  opacity: 0.82;
}

.bento-dept-breakdown,
.bento-status-breakdown {
  font-size: 10.5px;
  line-height: 1.1;
}

.bento-detail-list {
  max-height: 110px;
}

.bento-detail-item {
  font-size: 12px;
}

.panels {
  gap: 12px;
}

.log {
  border-radius: var(--radius-lg);
}

/* The header text/icon colors and a couple of translucent accents above are
 * literal light-mode values (hardcoded near-black text, white-mixed icon
 * fills) — fine on the light glass cards, but unreadable/washed-out once
 * --bg-raised etc. flip dark (see the [data-theme="dark"] :root above).
 * Same explicit-attribute pattern as the html/body blob override. */
html[data-theme="dark"] .header-menu-link {
  color: var(--text-muted);
}

html[data-theme="dark"] .header-menu-link.active {
  color: var(--text);
}

html[data-theme="dark"] .header-icon-btn {
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--bg-raised-solid));
  color: var(--accent);
}

html[data-theme="dark"] .header-date-badge {
  background: color-mix(in srgb, var(--accent-soft) 40%, var(--bg-raised-solid));
  color: var(--text);
}

html[data-theme="dark"] .attach-circle {
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .archive-toggle-btn {
  background: rgba(255, 255, 255, 0.07);
}

@media (max-width: 719.98px) {
  html,
  body {
    background: var(--bg);
  }

  .app-header {
    height: auto;
    padding: 14px 12px 10px;
  }

  .body-row {
    padding: 0 12px 12px;
  }

  .composer {
    min-height: 220px;
  }

  .bento-grid {
    grid-template-columns: 1fr;
  }
}

/* ============ Layered target UI pass ============ */

:root {
  --bg: #ededed;
  --bg-raised: rgba(182, 182, 182, 0.302);
  --bg-raised-solid: transparent;
  --glass-sheen-1: rgba(255, 255, 255, 0.178);
  --glass-sheen-2: rgba(255, 255, 255, 0.02);
  --border: rgba(255, 255, 255, 0.16);
  --accent: #8290ff;
  --accent-soft: rgba(130, 144, 255, 0.2);
  --rail-w: 64px;
  --sidebar-w: clamp(330px, 36vw, 410px);
  --content-max: min(1120px, 76vw);
  --shell-pad-y: clamp(38px, 7.6vh, 78px);
  --shell-pad-x: 0px;
  --radius-lg: 24px;
}

html,
body {
  background: var(--bg);
}

body {
  position: relative;
}

body::before {
  content: none;
}

.aura-flow-overlay {
  display: none;
  position: fixed;
  inset: -7vh -5vw;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.68;
  filter: saturate(1.18);
  background:
    radial-gradient(circle at 64% 46%, color-mix(in srgb, var(--aura-color, var(--accent)) 22%, transparent), transparent 34%),
    radial-gradient(circle at 37% 58%, color-mix(in srgb, var(--aura-color, var(--accent)) 13%, transparent), transparent 28%);
  -webkit-mask-image:
    linear-gradient(to right, transparent, black 7%, black 93%, transparent),
    linear-gradient(to bottom, transparent, black 4%, black 92%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, black 7%, black 93%, transparent),
    linear-gradient(to bottom, transparent, black 4%, black 92%, transparent);
  mask-composite: intersect;
}

.aura-flow-overlay canvas {
  width: 100% !important;
  height: 100% !important;
}

html[data-theme="dark"] .aura-flow-overlay {
  opacity: 0.82;
  filter: saturate(1.28) brightness(1.04);
}

@media (max-width: 719.98px) {
  .aura-flow-overlay {
    inset: -9vh -38vw;
    opacity: 0.48;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aura-flow-overlay {
    display: none !important;
  }
}

/* .icon-rail and .sidebar are deliberately excluded here — both set their
 * own `position` per breakpoint (fixed on mobile for the bottom tab bar /
 * off-canvas drawer, static on desktop), and this blanket `position:
 * relative` would silently clobber that, breaking the fixed positioning
 * everywhere below 720px. They get their own z-index instead, directly on
 * their position:fixed rules above.
 *
 * .body-row is excluded too: giving it its own z-index:1 stacking context
 * would trap its fixed-position children (.sidebar, .sidebar-backdrop)
 * inside that context, capping them at "z-index 1" no matter how high their
 * own z-index goes — so the mobile drawer could never paint above
 * .app-header's z-index:5000 (see below). Staying non-positioned lets those
 * children escape straight into .content-area's stacking context instead,
 * where their own z-index actually competes with the header's. */
#app,
.layout,
.content-area,
.app-header,
.main,
.dashboard {
  position: relative;
  z-index: 1;
}

@media (min-width: 720px) {
  #app {
    width: var(--content-max);
    max-width: var(--content-max);
    padding: var(--shell-pad-y) 0;
  }

  .layout {
    width: 100%;
    max-width: none;
  }

  .content-area {
    overflow: visible;
  }

  .app-header {
    position: relative;
    height: 88px;
    width: calc(100% + var(--rail-w) + 10px);
    margin-left: calc(-1 * (var(--rail-w) + 10px));
    padding: 0 0 15px;
    align-items: flex-end;
    overflow: visible;
  }

  .brand {
    position: absolute;
    left: 0;
    top: 0;
  }

  .header-menu {
    position: absolute;
    left: 0;
    bottom: 12px;
    display: flex;
    padding-left: 0;
  }

  .header-actions {
    margin-left: auto;
  }

  .body-row {
    gap: 10px;
    min-height: 0;
    height: calc(100dvh - (var(--shell-pad-y) * 2) - 88px);
  }

  .icon-rail {
    width: var(--rail-w);
    padding: 88px 0 0;
    background: transparent;
  }

  .nav-scroll {
    padding-top: 0;
    gap: 10px;
  }

  .nav-divider {
    height: auto;
    min-height: 26px;
  }

  .sidebar {
    width: var(--sidebar-w);
    gap: 12px;
  }
}

.icon-rail {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.nav-icon {
  width: 50px;
  height: 50px;
  background: rgba(190, 190, 190, 0.92);
  color: #20232d;
  box-shadow: none;
}

.nav-icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.95;
}

.local-icon {
  display: block;
  width: 27px;
  height: 27px;
  object-fit: contain;
  pointer-events: none;
}

.nav-icon .local-icon {
  width: 29px;
  height: 29px;
}

.nav-icon.active {
  background: #94a2ff;
  color: #151827;
}

.brand-logo {
  font-size: 31px;
  line-height: 1.18;
  font-weight: 700;
  background: linear-gradient(90deg, #5168ff 0%, #8a96ff 46%, #b5bcff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.brand-tagline {
  margin-top: 1px;
  font-size: 10.5px;
  line-height: 1.15;
}

.header-menu {
  gap: 22px;
}

.header-menu-link {
  font-size: 12px;
}

.header-icon-btn,
.header-date-badge {
  background: rgba(207, 211, 226, 0.62);
  color: #4051be;
}

.header-actions {
  gap: 7px;
  align-items: center;
}

.header-icon-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  background: #94a2ff;
  color: #3f4fbf;
}

.header-icon-btn svg {
  width: 20px;
  height: 20px;
}

.header-icon-btn .local-icon {
  width: 24px;
  height: 24px;
  filter: brightness(0) saturate(100%) invert(24%) sepia(76%) saturate(1604%) hue-rotate(222deg) brightness(87%) contrast(86%);
}

#theme-toggle {
  width: 40px;
  height: 40px;
  background: transparent;
  color: #2432a2;
}

#theme-toggle svg {
  width: 23px;
  height: 23px;
}

#theme-toggle .local-icon {
  width: 28px;
  height: 28px;
  filter: brightness(0) saturate(100%) invert(24%) sepia(76%) saturate(1604%) hue-rotate(222deg) brightness(87%) contrast(86%);
}

.header-date-badge {
  height: 42px;
  min-width: 112px;
  gap: 4px;
  padding: 0 4px 0 9px;
  border: 0;
  border-radius: 999px;
  background: rgba(207, 207, 207, 0.88);
  color: #202331;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.header-date-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  line-height: 1;
}

.header-date-label {
  font-size: 7px;
  color: #555963;
  line-height: 0.9;
}

.header-date-value {
  font-size: 15px;
  font-weight: 700;
}

.header-date-badge svg {
  width: 28px;
  height: 28px;
  padding: 4px;
  border-radius: 50%;
  background: #7080ff;
  color: #2432a2;
}

/*
 * Every button[aria-label] tooltip is now driven by the single shared
 * #nav-tooltip element (position:fixed, JS-positioned — see initNavTooltip
 * in app.js) instead of a per-button ::after pseudo-element. The ::after
 * approach only ever opened upward (bottom: calc(100% + 10px)), so any
 * trigger near the top of the window or a scrolling panel — header icons,
 * "Add lead"/"Schedule automation" near the top of their view — had its
 * tooltip clipped or hidden behind the header entirely. #nav-tooltip
 * defaults to opening downward for every non-nav-icon trigger, which is
 * always safe near a top edge, and is immune to ancestor overflow clipping
 * for the same reason documented further up this file for .nav-icon.
 */
.nav-icon {
  position: relative;
}

html[data-theme="dark"] .header-icon-btn {
  background: #8692ff;
  color: #10162f;
}

html[data-theme="dark"] #theme-toggle {
  background: rgba(134, 146, 255, 0.16);
  color: #aeb6ff;
}

html[data-theme="dark"] .header-icon-btn .local-icon {
  filter: brightness(0) saturate(100%) invert(8%) sepia(32%) saturate(1509%) hue-rotate(204deg) brightness(93%) contrast(92%);
}

html[data-theme="dark"] #theme-toggle .local-icon {
  filter: brightness(0) saturate(100%) invert(75%) sepia(45%) saturate(2030%) hue-rotate(196deg) brightness(102%) contrast(101%);
}

html[data-theme="dark"] .header-date-badge {
  background: rgba(62, 66, 104, 0.98);
  color: #f4f6ff;
}

html[data-theme="dark"] .header-date-label {
  color: rgba(244, 246, 255, 0.62);
}

html[data-theme="dark"] .header-date-badge svg {
  background: #8692ff;
  color: #10162f;
}

html[data-theme="dark"] #nav-tooltip {
  border-color: rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)),
    rgba(31, 34, 55, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 14px 30px rgba(0, 0, 0, 0.26);
  color: #f4f6ff;
}

.composer,
.tasklist-card,
.bento-cell,
.log,
.panel,
.files-tree,
.files-preview-pane,
.mini-calendar,
.detail-panel,
.tasks-panel,
.accounts-view,
.settings-view,
.run-detail,
.calendar-view,
.crm-view,
.playbook-view,
.portfolio-view,
.files-view {
  background:
    linear-gradient(135deg, var(--glass-sheen-1), var(--glass-sheen-2)),
    var(--bg-raised);
  border-color: var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
}

.bento-cell::before {
  content: none;
}

.sidebar h1,
.composer h1,
.sidebar h2 {
  font-size: clamp(22px, 1.8vw, 28px);
  font-weight: 600;
  line-height: 1.2;
}

.composer h1 {
  margin-bottom: 18px;
}

.bento-label,
.bento-caption {
  font-size: clamp(16px, 1.45vw, 20px);
  font-weight: 600;
  line-height: 1.2;
}

.bento-subvalue {
  font-size: clamp(12px, 0.95vw, 14px);
}

.bento-orange .bento-label {
  font-size: clamp(16px, 1.35vw, 19px);
}

.tasks-header {
  margin-bottom: 22px;
}

#goal-input {
  padding: 4px 0 0 1px;
  line-height: 1.65;
  font-size: 15px;
}

#goal-input::placeholder {
  line-height: 1.65;
  font-size: 15px;
}

@media (min-width: 720px) {
  .composer {
    flex: 0 0 calc(55% - 6px);
    min-height: 0;
  }

  .tasklist-card {
    flex: 1 1 auto;
    min-height: 0;
  }

  #goal-form {
    min-height: 0;
    height: calc(100% - 64px);
  }
}

.dashboard {
  height: 100%;
  min-height: 0;
}

.bento-grid {
  height: 100%;
  min-height: 0;
  gap: 10px;
}

@media (min-width: 900px) {
  .bento-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(130px, 0.95fr);
    grid-template-rows: minmax(0, 0.56fr) minmax(0, 0.46fr) minmax(0, 1fr);
  }

  .bento-lavender {
    grid-column: 1;
    grid-row: 1;
  }

  .bento-orange {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .bento-mint {
    grid-column: 1;
    grid-row: 2 / span 2;
  }

  .bento-forest {
    grid-column: 2;
    grid-row: 3;
  }
}

.bento-cell {
  min-height: 0;
  padding: clamp(16px, 2.3vw, 22px);
}

.bento-lavender {
  justify-content: flex-start;
}

.bento-orange {
  justify-content: flex-start;
}

.bento-orange .bento-label {
  color: var(--text);
  margin-bottom: 10px;
}

.bento-lavender .bento-detail-list {
  display: none;
}

.bento-lavender .bento-value-group {
  width: 100%;
}

.bento-lavender .bento-caption {
  margin-top: 2px;
  color: var(--text);
}

.bento-lavender .bento-subvalue {
  margin-top: auto;
  color: var(--success);
  text-align: right;
}

.bento-orange .bento-detail-list {
  max-height: none;
  margin-top: 0;
}

.bento-orange .bento-detail-item {
  padding: 0;
  margin: 0 0 10px;
  border-radius: 0;
}

.bento-orange .bento-detail-item-head {
  color: var(--error);
  font-size: 12.5px;
}

.bento-orange .bento-detail-time {
  font-size: 12px;
}

.bento-orange .bento-detail-goal,
.bento-orange .bento-detail-error {
  font-size: 12px;
  line-height: 1.35;
}

.bento-value {
  font-size: clamp(42px, 4.2vw, 58px);
  line-height: 0.95;
}

.bento-hero .bento-value {
  font-size: clamp(58px, 6vw, 76px);
}

.bento-caption,
.bento-subvalue,
.bento-label {
  font-size: clamp(16px, 1.45vw, 20px);
}

.bento-subvalue {
  font-size: clamp(12px, 0.95vw, 14px);
  font-weight: 600;
}

.bento-ring-wrap {
  top: clamp(16px, 2vw, 24px);
  right: clamp(18px, 2vw, 28px);
  bottom: auto;
}

.bento-ring {
  width: clamp(72px, 7vw, 104px);
  height: clamp(72px, 7vw, 104px);
}

/* The Success rate card has no label above its value (unlike the Overview
 * hero), so the value sits right where a top-right ring would — pin this
 * one to the vertical middle instead, in the empty gap that space-between
 * already leaves between the value and the breakdown list below it. */
.bento-forest .bento-ring-wrap {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

.bento-status-breakdown,
.bento-dept-breakdown {
  font-size: clamp(12px, 1.05vw, 14px);
}

@media (max-width: 899.98px) and (min-width: 720px) {
  :root {
    --content-max: min(92vw, 760px);
    --sidebar-w: min(42vw, 310px);
  }

  .body-row {
    height: calc(100dvh - (var(--shell-pad-y) * 2) - 88px);
  }

  .bento-grid {
    grid-template-columns: 1fr 0.72fr;
    grid-template-rows: minmax(110px, 0.56fr) minmax(90px, 0.46fr) minmax(170px, 1fr);
  }
}

@media (max-width: 719.98px) {
  body::before {
    content: none;
  }

  .icon-rail {
    background: rgba(237, 237, 237, 0.86);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }
}

/* Compact selected-run conversation view */
.run-detail {
  height: 100%;
  min-height: 0;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.run-header {
  flex: 0 0 auto;
  gap: 7px;
  margin-bottom: 12px;
  align-items: center;
  min-width: 0;
}

.run-header h2 {
  order: 0;
  flex: 1 1 100%;
  min-width: 0;
  font-size: 19px;
  line-height: 1.22;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.run-subheader {
  order: 5;
  flex: 1 1 100%;
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.run-meta {
  margin-left: 0;
  font-size: 12px;
}

.status-badge {
  padding: 5px 12px;
  font-size: 11px;
}

.run-action-btn {
  width: 25px;
  height: 25px;
  background: rgba(255, 255, 255, 0.4);
}

.run-action-btn svg {
  width: 13px;
  height: 13px;
}

.panels {
  flex: 1;
  min-height: 0;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
  overflow: visible;
}

.panel {
  min-height: 0;
  overflow: visible;
}

.panel h3 {
  margin-bottom: 6px;
  font-size: 12px;
  line-height: 1.1;
  padding-left: 2px;
}

.log-panel,
.side-panels {
  display: flex;
  flex-direction: column;
}

.log-panel {
  border-radius: var(--radius-lg);
  min-width: 0;
}

.log {
  flex: 1;
  min-height: 0;
  height: auto;
  padding: 10px;
  gap: 9px;
  border-radius: 20px;
  font-size: 12px;
  line-height: 1.35;
}

.msg {
  gap: 8px;
}

.msg-avatar {
  width: 22px;
  height: 22px;
  font-size: 10px;
}

.msg-head {
  margin-bottom: 1px;
}

.msg-source {
  font-size: 12px;
}

.msg-time {
  font-size: 10.5px;
}

.msg-text {
  font-size: 13px;
  line-height: 1.38;
}

.msg-text p {
  margin-bottom: 4px;
}

.turn-divider {
  font-size: 10px;
}

.reply-form {
  margin-top: 8px;
  gap: 7px;
}

.reply-form textarea {
  min-height: 34px;
  max-height: 82px;
  padding: 8px 10px;
  font-size: 12px;
}

.reply-submit {
  width: 34px;
  height: 34px;
}

.side-panels {
  gap: 10px;
}

.side-panels .tasks-panel {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 12px;
}

.side-panels .tasks-list {
  max-height: none;
  height: calc(100% - 20px);
  overflow-y: auto;
}

/* Keep the compact sidebar cards from creating horizontal scrollbars. */
.sidebar,
.tasklist-card,
.tasklist-card .run-list {
  max-width: 100%;
  overflow-x: hidden;
}

.tasklist-card .run-item {
  width: 100%;
}

/* Sidebar icon press effect */
.nav-icon {
  transition:
    transform 220ms ease,
    box-shadow 260ms ease,
    background 220ms ease;
  box-shadow:
    -3px -3px 5px -3px rgba(255, 255, 255, 0.55),
    4px 7px 10px -6px rgba(42, 45, 65, 0.28);
}

.nav-icon .local-icon,
.nav-icon svg {
  transition: transform 220ms ease;
}

@media (hover: hover) {
  .nav-icon:hover {
    transform: translateY(1px) scale(0.965);
    box-shadow:
      inset 5px 6px 9px -7px rgba(22, 24, 36, 0.62),
      inset -4px -4px 8px rgba(255, 255, 255, 0.34),
      0 3px 8px rgba(42, 45, 65, 0.12);
  }

  .nav-icon:hover .local-icon,
  .nav-icon:hover svg {
    transform: scale(0.92);
  }
}

/* Topbar control press effect */
.header-icon-btn,
.header-date-badge {
  transition:
    transform 220ms ease,
    box-shadow 260ms ease,
    background 220ms ease;
  box-shadow:
    -3px -3px 5px -3px rgba(255, 255, 255, 0.55),
    4px 7px 10px -6px rgba(42, 45, 65, 0.28);
}

.header-icon-btn .local-icon,
.header-icon-btn svg,
.header-date-badge svg {
  transition: transform 220ms ease;
}

@media (hover: hover) {
  .header-icon-btn:hover,
  .header-date-badge:hover {
    transform: translateY(1px) scale(0.965);
    box-shadow:
      inset 5px 6px 9px -7px rgba(22, 24, 36, 0.62),
      inset -4px -4px 8px rgba(255, 255, 255, 0.34),
      0 3px 8px rgba(42, 45, 65, 0.12);
  }

  .header-icon-btn:hover .local-icon,
  .header-icon-btn:hover svg,
  .header-date-badge:hover svg {
    transform: scale(0.92);
  }
}

/* Prompt action controls */
#goal-form {
  padding-bottom: 46px;
}

.goal-actions {
  right: 7px;
  bottom: 5px;
  gap: 10px;
  min-height: 38px;
}

.attach-circle {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.44),
    0 8px 18px rgba(38, 45, 78, 0.12);
}

.attach-circle .local-icon {
  width: 22px;
  height: 22px;
}

.attach-circle svg {
  width: 19px;
  height: 19px;
}

.goal-actions .ai-button-wrap {
  width: 72px;
  height: 36px;
  display: block;
}

.ai-button-wrap::before,
.ai-button::before {
  content: none;
}

.goal-actions .ai-button {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 100em;
  background-color: rgba(0, 0, 0, 0.75);
  box-shadow:
    -0.15em -0.15em 0.15em -0.075em rgba(5, 5, 5, 0.25),
    0.0375em 0.0375em 0.0675em 0 rgba(5, 5, 5, 0.1);
}

.goal-actions .ai-button::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: calc(100% + 0.3em);
  height: calc(100% + 0.3em);
  top: -0.15em;
  left: -0.15em;
  border-radius: inherit;
  background: linear-gradient(-135deg, rgba(5, 5, 5, 0.5), transparent 20%, transparent 100%);
  filter: blur(0.0125em);
  opacity: 0.25;
  mix-blend-mode: multiply;
}

.goal-actions .button-outer {
  position: relative;
  z-index: 1;
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: box-shadow 300ms ease;
  will-change: box-shadow;
  box-shadow:
    0 0.05em 0.05em -0.01em rgba(5, 5, 5, 1),
    0 0.01em 0.01em -0.01em rgba(5, 5, 5, 0.5),
    0.15em 0.3em 0.1em -0.01em rgba(5, 5, 5, 0.25);
}

.goal-actions .button-inner {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  height: 100%;
  border-radius: inherit;
  padding: 0 18px;
  background-image: linear-gradient(135deg, rgba(230, 230, 230, 1), rgba(180, 180, 180, 1));
  transition:
    box-shadow 300ms ease,
    clip-path 250ms ease,
    background-image 250ms ease,
    transform 250ms ease;
  will-change: box-shadow, clip-path, background-image, transform;
  overflow: clip;
  clip-path: inset(0 0 0 0 round 100em);
  box-shadow:
    0 0 0 0 inset rgba(5, 5, 5, 0.1),
    -0.05em -0.05em 0.05em 0 inset rgba(5, 5, 5, 0.25),
    0 0 0 0 inset rgba(5, 5, 5, 0.1),
    0 0 0.05em 0.2em inset rgba(255, 255, 255, 0.25),
    0.025em 0.05em 0.1em 0 inset rgba(255, 255, 255, 1),
    0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25),
    -0.075em -0.25em 0.25em 0.1em inset rgba(5, 5, 5, 0.25);
}

.goal-actions .button-inner span {
  position: relative;
  z-index: 4;
  display: block;
  color: transparent;
  background-image: linear-gradient(135deg, rgba(25, 25, 25, 1), rgba(75, 75, 75, 1));
  -webkit-background-clip: text;
  background-clip: text;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1;
  text-shadow: rgba(0, 0, 0, 0.1) 0 0 0.1em;
  user-select: none;
  transition: transform 250ms ease;
  will-change: transform;
}

@media (hover: hover) {
  .goal-actions .ai-button:hover:not(:disabled) {
    transform: none;
    filter: none;
    box-shadow:
      -0.15em -0.15em 0.15em -0.075em rgba(5, 5, 5, 0.25),
      0.0375em 0.0375em 0.0675em 0 rgba(5, 5, 5, 0.1);
  }

  .goal-actions .ai-button:hover .button-outer {
    box-shadow:
      0 0 0 0 rgba(5, 5, 5, 1),
      0 0 0 0 rgba(5, 5, 5, 0.5),
      0 0 0 0 rgba(5, 5, 5, 0.25);
  }

  .goal-actions .ai-button:hover .button-inner {
    clip-path: inset(clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) round 100em);
    box-shadow:
      0.1em 0.15em 0.05em 0 inset rgba(5, 5, 5, 0.75),
      -0.025em -0.03em 0.05em 0.025em inset rgba(5, 5, 5, 0.5),
      0.25em 0.25em 0.2em 0 inset rgba(5, 5, 5, 0.5),
      0 0 0.05em 0.5em inset rgba(255, 255, 255, 0.15),
      0 0 0 0 inset rgba(255, 255, 255, 1),
      0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25),
      -0.075em -0.12em 0.2em 0.1em inset rgba(5, 5, 5, 0.25);
  }

  .goal-actions .ai-button:hover .button-inner span {
    transform: scale(0.975);
  }
}

.goal-actions .ai-button:active:not(:disabled) .button-inner {
  transform: scale(0.975);
}

.goal-actions .ai-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.app-header,
.header-actions,
.header-account {
  position: relative;
  z-index: 5000;
}

.account-popover {
  z-index: 6000;
}

/* ============ Target Memory UI override ============ */

@media (min-width: 720px) {
  :root {
    --content-max: min(1120px, 76vw);
    --shell-pad-y: clamp(24px, 5.7vh, 58px);
    --rail-w: 64px;
  }

  #app {
    width: var(--content-max);
    max-width: var(--content-max);
    padding: var(--shell-pad-y) 0;
  }

  .app-header {
    height: 88px;
    width: calc(100% + var(--rail-w) + 10px);
    margin-left: calc(-1 * (var(--rail-w) + 10px));
    padding: 0 0 13px;
    align-items: flex-end;
  }

  .body-row {
    height: calc(100dvh - (var(--shell-pad-y) * 2) - 88px);
    gap: 10px;
    padding: 0;
  }

  .icon-rail {
    width: var(--rail-w);
    padding: 88px 0 0;
  }

  .nav-scroll {
    gap: 8px;
  }
}

.brand {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.brand-logo {
  font-size: 30px;
  line-height: 1;
  font-weight: 700;
  background: linear-gradient(90deg, #5363ff 0%, #9da4ff 92%);
  -webkit-background-clip: text;
  background-clip: text;
}

.brand-tagline {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1;
  color: #777b89;
}

.header-menu {
  gap: 22px;
}

.header-menu-link {
  padding: 0;
  color: #111318;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}

.header-actions {
  gap: 10px;
  padding-bottom: 1px;
}

.header-icon-btn {
  width: 40px;
  height: 40px;
  background: #94a2ff;
  color: #4051be;
}

.header-icon-btn svg {
  width: 19px;
  height: 19px;
}

.header-icon-btn .local-icon {
  width: 22px;
  height: 22px;
}

#theme-toggle {
  width: 40px;
  height: 40px;
}

#theme-toggle .local-icon {
  width: 24px;
  height: 24px;
}

.header-date-badge {
  height: 40px;
  min-width: 106px;
  gap: 7px;
  padding: 0 6px 0 12px;
  background: rgba(207, 207, 207, 0.88);
  color: #202331;
  font-size: 14px;
}

.header-date-label {
  font-size: 9px;
}

.header-date-value {
  font-size: 14px;
  font-weight: 700;
}

.header-date-badge svg {
  width: 21px;
  height: 21px;
  padding: 2px;
  color: #2432a2;
}

.header-user-btn {
  width: 40px;
  max-width: 40px;
  height: 40px;
  font-size: 14px;
  background: #d8d8d8;
  color: #555963;
}

.nav-icon {
  width: 42px;
  height: 42px;
  background: rgba(190, 190, 190, 0.92);
}

.nav-icon svg {
  width: 20px;
  height: 20px;
}

.nav-icon .local-icon {
  width: 24px;
  height: 24px;
}

.memory-hero {
  position: relative;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: clamp(18px, 3.2vh, 30px) clamp(24px, 5vw, 54px) clamp(28px, 5vh, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--bg-raised);
  box-shadow: 0 10px 30px rgba(20, 20, 40, 0.06);
}

.memory-hero-topbar {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 3;
}

.memory-hero-topbar .run-action-icon {
  width: 24px;
  height: 24px;
  background: transparent;
  color: var(--text-muted);
  box-shadow: none;
}

.memory-hero-topbar .run-action-icon svg {
  width: 13px;
  height: 13px;
}

.memory-hero-center {
  flex: 0 0 auto;
  min-height: 0;
  padding: clamp(6px, 2.4vh, 28px) 0 0;
  gap: 0;
}

.memory-hero-icon-wrap {
  width: clamp(150px, 19vw, 220px);
  height: clamp(150px, 19vw, 220px);
  margin: 0 0 -8px;
}

.memory-hero-orb {
  width: 100%;
  height: 100%;
  position: relative;
}

.memory-hero-orb canvas,
.memory-hero-orb svg {
  display: block;
  width: 100%;
  height: 100%;
}

.memory-hero-orb.orb-failed::before {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 34%, rgba(76, 194, 233, 0.82), transparent 26%),
    radial-gradient(circle at 66% 62%, rgba(156, 67, 254, 0.78), transparent 34%),
    #1225a8;
}

.memory-hero-icon-wrap > svg {
  width: clamp(58px, 7.2vw, 84px);
  height: clamp(58px, 7.2vw, 84px);
  filter: none;
  animation: memory-icon-pulse 3.2s ease-in-out infinite, memory-icon-color-cycle 6s linear infinite;
  stroke-width: 2.6;
}

/* color only, deliberately — animating `filter: drop-shadow(...)` per
   frame is a raster effect and the more likely source of jank than a
   plain (GPU-composited) color animation. */
@keyframes memory-icon-color-cycle {
  0%,
  100% {
    color: #a78bfa;
  }
  33% {
    color: var(--memory-yellow-hover);
  }
  66% {
    color: #60a5fa;
  }
}

.memory-hero-icon-wrap.busy > svg {
  animation-duration: 1s;
}

.memory-hero-ripple {
  position: absolute;
  inset: 22px;
  border-radius: 999px;
  border: 2px solid rgba(242, 201, 0, 0.55);
  opacity: 0;
  animation: memory-ripple 3.2s ease-out infinite;
}

.memory-hero-ripple:nth-child(2) {
  animation-delay: 1.07s;
}

.memory-hero-ripple:nth-child(3) {
  animation-delay: 2.14s;
}

.memory-hero-icon-wrap.busy .memory-hero-ripple {
  animation-duration: 1.3s;
  border-color: color-mix(in srgb, var(--accent) 55%, #f2c900 45%);
}

/* One gradient per hero status — deliberately just a background-position
   animation (cheap, GPU-composited) rather than anything per-frame like an
   animated filter/shadow, so several of these plus the icon's own animation
   never add up to visible jank. Light-mode stops are darker/more saturated
   than the dark-mode ones since a pastel gradient clipped to text washes
   out on a light background; "idle" (nothing typed yet) and "error" fall
   through to the base orange rather than getting their own named color. */
.memory-hero-status-text {
  margin: 0;
  font-size: clamp(22px, 3vw, 35px);
  font-weight: 600;
  line-height: 1;
  background-image: linear-gradient(90deg, #c2410c, #fb923c, #c2410c);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: memory-gradient-flow 5s linear infinite;
}

html[data-theme="dark"] .memory-hero-status-text {
  background-image: linear-gradient(90deg, #fb923c, #fed7aa, #fb923c);
}

.memory-hero-status-text[data-status="watching"] {
  background-image: linear-gradient(90deg, #1d4ed8, #3b82f6, #1d4ed8);
}

html[data-theme="dark"] .memory-hero-status-text[data-status="watching"] {
  background-image: linear-gradient(90deg, #60a5fa, #bfdbfe, #60a5fa);
}

.memory-hero-status-text[data-status="analysing"] {
  background-image: linear-gradient(90deg, #6d28d9, #8b5cf6, #6d28d9);
  animation-duration: 1.4s;
}

html[data-theme="dark"] .memory-hero-status-text[data-status="analysing"] {
  background-image: linear-gradient(90deg, #a78bfa, #ddd6fe, #a78bfa);
}

.memory-hero-status-text[data-status="done"] {
  background-image: linear-gradient(90deg, #15803d, #22c55e, #15803d);
}

html[data-theme="dark"] .memory-hero-status-text[data-status="done"] {
  background-image: linear-gradient(90deg, #4ade80, #bbf7d0, #4ade80);
}

.memory-hero-status-text[data-status="error"] {
  background-image: linear-gradient(90deg, var(--error), #f97316, var(--error));
}

.memory-hero-confirmation {
  margin-top: 4px;
  max-width: min(520px, 82%);
  color: var(--text-muted);
}

.memory-hero-composer {
  width: min(88%, 900px);
  max-width: 900px;
  margin: clamp(16px, 3.2vh, 28px) auto 0;
  padding: 0;
}

.memory-hero-input-shell {
  position: relative;
  display: flex;
  align-items: stretch;
  /* A definite height, not just a floor — the textarea inside sets
     height:100%, and a percentage height only resolves cleanly against a
     definite containing-block height. With min-height alone (indefinite),
     that 100% falls back to auto, and the box quietly stops actually
     filling this shell. */
  height: clamp(112px, 22vh, 178px);
  padding: clamp(14px, 2.2vw, 22px) clamp(18px, 2.4vw, 28px) 54px;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: none;
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}

html[data-theme="dark"] .memory-hero-input-shell {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

.memory-hero-input-shell textarea {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.32;
  resize: none;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.memory-hero-input-shell textarea::placeholder {
  color: var(--text-faint);
}

.memory-hero-actions {
  position: absolute;
  right: clamp(12px, 1.8vw, 20px);
  bottom: 13px;
  gap: 10px;
}

.memory-hero-actions .attach-circle {
  width: 26px;
  height: 26px;
  background: #858585;
  color: white;
  box-shadow: none;
}

.memory-hero-actions .attach-circle svg {
  width: 17px;
  height: 17px;
}

.memory-feed-btn {
  height: 28px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #0d74ff 0%, #7c6cff 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  box-shadow: none;
}

.memory-feed-btn:disabled {
  opacity: 1;
  cursor: not-allowed;
}

@media (max-width: 719.98px) {
  .memory-hero {
    min-height: calc(100dvh - 150px);
    padding: 26px 14px 28px;
    border-radius: 20px;
  }

  .memory-hero-composer {
    width: 100%;
  }

  .memory-hero-input-shell {
    min-height: 150px;
  }
}

/* ============ Brand logo: final word ============
 * Several passes above each redefine .app-header/.brand/.brand-logo (19px
 * baseline, then 20px, then 30px). At >=720px, an even later pass
 * (the "Target Memory UI override" @media(min-width:720px) block, ~line
 * 6290) takes over: .app-header gets a *fixed* 88px height and .brand /
 * .header-menu are each position:absolute inside it (brand pinned to
 * top:0, header-menu pinned to bottom:12px) — two boxes that don't know
 * about each other's size, sharing one fixed-height container.
 *
 * That's why the first pass at fixing "small and cropped" (bumping
 * brand-logo to 30px with height:auto on .app-header) made things worse:
 * .brand and .header-menu are both position:absolute, so neither
 * contributes to an auto height at all, and growing the logo just ate
 * directly into the ~58px gap before .header-menu's fixed bottom:12px
 * offset, overlapping it. Fix stays inside that existing 88px budget
 * instead of fighting it: brand-logo sized/line-height'd to keep the
 * whole .brand column (logo + tagline) comfortably under it, no touching
 * .app-header's height. Same gradient family as before (accent ->
 * periwinkle), now animated instead of static. */
.brand-logo {
  display: inline-block;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  background: linear-gradient(90deg, var(--accent), #9da4ff, var(--accent));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: brand-gradient-pan 6s linear infinite;
}

@keyframes brand-gradient-pan {
  to {
    background-position: -200% center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-logo {
    animation: none;
  }
}

/* ============ Mobile responsive retrofit ============
 * Several passes above (Reference mockup / Layered target UI / Target
 * Memory UI override) redefine .header-actions/.header-icon-btn/
 * .header-date-badge with desktop-sized values (40px icons, 106-112px
 * date badge) right next to @media(min-width:720px) blocks meant for the
 * same redesign — those specific sizing rules just never got wrapped in
 * that guard, so they win the cascade at every viewport, including
 * phones, where 6 fixed-width icons plus the date badge add up to more
 * than a typical phone's viewport width and get silently clipped by the
 * global `overflow-x:hidden` safety net (see ~line 149). Placed last (and
 * therefore winning the cascade) instead of editing any existing rule
 * above, so nothing already approved for desktop/tablet is touched. */
@media (max-width: 719.98px) {
  .header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 6px;
  }

  .header-icon-btn,
  #theme-toggle {
    width: 32px;
    height: 32px;
  }

  .header-icon-btn svg,
  #theme-toggle svg {
    width: 16px;
    height: 16px;
  }

  .header-icon-btn .local-icon,
  #theme-toggle .local-icon {
    width: 18px;
    height: 18px;
  }

  .header-date-badge {
    height: 32px;
    min-width: 0;
    padding: 0 8px;
  }

  .header-date-label {
    display: none;
  }
}

/* ============ Mobile layout hardening ============
 * Keep the desktop/tablet structure exactly as-is, but make every dense view
 * usable inside the phone shell: the header compresses, card views stack,
 * wide operational surfaces scroll inside their own panels, and dialogs never
 * exceed the viewport. */
@media (max-width: 719.98px) {
  :root {
    --radius: 18px;
    --radius-lg: 20px;
    --radius-sm: 14px;
    --content-max: 100%;
  }

  html,
  body {
    min-width: 0;
    overflow-x: hidden;
  }

  #app {
    width: 100%;
    min-width: 0;
  }

  .layout,
  .content-area,
  .body-row,
  .main {
    min-width: 0;
    width: 100%;
  }

  .content-area {
    padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  }

  .app-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
    padding: 12px 10px 8px;
  }

  .brand {
    min-width: 0;
    overflow: hidden;
  }

  .brand-logo {
    max-width: 100%;
    font-size: clamp(20px, 7vw, 24px);
    line-height: 1.08;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .header-actions {
    max-width: min(210px, 54vw);
    gap: 5px;
  }

  .header-user-btn {
    width: 32px;
    max-width: 32px;
    height: 32px;
  }

  .account-popover {
    position: fixed;
    top: 58px;
    right: 10px;
    width: min(320px, calc(100vw - 20px));
  }

  .body-row {
    flex: 1 1 auto;
    padding: 0 10px 10px;
    overflow: hidden;
  }

  .main {
    padding: 8px 0 12px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .dashboard,
  .run-detail,
  .accounts-view,
  .settings-view,
  .calendar-view,
  .files-view,
  .documents-view,
  .tools-view,
  .crm-view,
  .playbook-view,
  .portfolio-view,
  .memory-hero {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .dashboard,
  .memory-hero {
    height: auto;
    min-height: 0;
  }

  .composer,
  .tasklist-card,
  .bento-cell,
  .panel,
  .log,
  .accounts-view,
  .settings-view,
  .calendar-view,
  .files-view,
  .documents-view,
  .tools-view,
  .crm-view,
  .playbook-view,
  .portfolio-view {
    border-radius: var(--radius-lg);
  }

  .composer {
    min-height: 0;
    padding: 16px;
  }

  .composer h1,
  .sidebar h1,
  .sidebar h2 {
    font-size: 20px;
  }

  #goal-form {
    margin-top: 14px;
    padding-bottom: 46px;
  }

  #goal-input {
    height: clamp(132px, 27dvh, 190px);
    min-height: 132px;
    font-size: 15px;
  }

  .goal-actions {
    right: 6px;
    bottom: 5px;
  }

  .bento-grid,
  .documents-list,
  .files-view,
  .calendar-view,
  .crm-stats-grid,
  .crm-kpi-grid,
  .portfolio-notes-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .bento-grid {
    height: auto;
    gap: 10px;
  }

  .bento-cell,
  .bento-hero {
    min-height: 136px;
  }

  .bento-value,
  .bento-hero .bento-value {
    font-size: clamp(42px, 15vw, 58px);
  }

  .bento-ring-wrap {
    top: 14px;
    right: 14px;
  }

  .bento-ring {
    width: 78px;
    height: 78px;
  }

  .section-head,
  .files-toolbar,
  .calendar-toolbar,
  .crm-toolbar,
  .crm-filter-bar,
  .playbook-toolbar,
  .portfolio-toolbar,
  .portfolio-category-tabs,
  .memory-browser-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .section-head h2 {
    flex: 1 1 100%;
    min-width: 0;
  }

  .section-head .ai-button,
  .portfolio-toolbar .ai-button,
  .playbook-toolbar .ai-button {
    width: auto;
  }

  .run-detail {
    min-height: 100%;
    height: auto;
    padding: 10px 0;
  }

  .run-header {
    padding: 0 2px;
  }

  .run-actions {
    margin-left: auto;
  }

  .panels {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .log {
    height: clamp(320px, 58dvh, 620px);
    max-height: none;
  }

  .side-panels .tasks-panel,
  .tasks-panel {
    max-height: none;
    overflow: visible;
  }

  .reply-form {
    align-items: stretch;
  }

  .reply-form textarea {
    min-height: 44px;
  }

  .documents-list {
    gap: 10px;
  }

  .document-card {
    align-items: flex-start;
  }

  .document-card-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .files-view,
  .calendar-view {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
  }

  .files-tree,
  .files-preview-pane,
  .mini-calendar,
  .detail-panel,
  .tasks-panel {
    width: 100%;
    min-width: 0;
  }

  .files-preview-pane,
  .detail-panel {
    min-height: 280px;
  }

  .files-table-wrap,
  .lead-table-wrap,
  .playbook-table-wrap,
  .portfolio-table-wrap,
  .lead-import-preview,
  .calendar-grid-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .files-table,
  .lead-table,
  .playbook-table,
  .portfolio-table,
  .lead-import-table {
    min-width: 640px;
  }

  .calendar-main,
  .calendar-grid,
  .content-calendar-grid {
    min-width: 0;
  }

  .calendar-day,
  .content-calendar-day {
    min-width: 0;
    padding: 6px 4px;
  }

  .calendar-event,
  .content-calendar-event {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .kanban-board {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .kanban-column {
    flex: 0 0 min(86vw, 320px);
    min-width: 0;
    scroll-snap-align: start;
  }

  .lead-card,
  .portfolio-note-card,
  .memory-entry-card {
    min-width: 0;
  }

  .portfolio-project-tabs,
  .segmented-toggle,
  .category-tabs {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .portfolio-note-detail-head,
  .memory-entry-detail-head {
    flex-wrap: wrap;
  }

  .portfolio-note-title-input {
    flex: 1 1 100%;
    min-width: 0;
  }

  .confirm-backdrop {
    align-items: flex-end;
    padding: 12px;
  }

  .confirm-modal {
    max-width: none;
    width: 100%;
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    padding: 18px;
  }

  .lead-modal,
  .schedule-modal,
  .portfolio-modal,
  .playbook-modal {
    max-width: none;
    width: 100%;
  }

  .confirm-modal-actions {
    flex-wrap: wrap;
  }

  .confirm-modal-actions .confirm-btn {
    flex: 1 1 auto;
    min-width: 120px;
  }

  .guarded-delete-input,
  .folder-modal input[type="text"],
  .schedule-modal input,
  .schedule-modal select,
  .schedule-modal textarea,
  .lead-modal input,
  .lead-modal select,
  .lead-modal textarea,
  .portfolio-modal input,
  .portfolio-modal select,
  .portfolio-modal textarea,
  .playbook-modal input,
  .playbook-modal select,
  .playbook-modal textarea {
    max-width: 100%;
    font-size: 16px;
  }

  .icon-rail {
    height: calc(66px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

@media (max-width: 420px) {
  .app-header {
    grid-template-columns: 1fr;
  }

  .header-actions {
    justify-content: flex-start;
    max-width: 100%;
    margin-left: 0;
  }

  .header-date-badge {
    order: 10;
  }

  .nav-icon {
    width: 40px;
    height: 40px;
  }

  .run-header {
    gap: 6px;
  }

  .run-meta {
    flex: 1 1 100%;
    margin-left: 0;
  }

  .document-card {
    flex-wrap: wrap;
  }

  .document-card-actions {
    width: 100%;
    flex-direction: row;
    justify-content: flex-end;
  }
}

/* ============ Bot faces ============
 * One reusable "face" — a gradient sphere + two eyes — reused at three
 * sizes (icon-rail, run-detail status, department hero) and driven by a
 * single department color via --bot-accent, the same inline-custom-property
 * convention as --icon-accent/--dept-accent elsewhere in this file. Every
 * size shares the same markup (see botFaceMarkup() in app.js); only
 * --bot-size and --bot-accent change per instance, and eye geometry is
 * expressed in calc()s off --bot-size so nothing needs a per-size class. */
/* Metallic finish: a tight specular glint (layer 1) laid over the hue
 * shading (layer 2, pushed to higher contrast than a flat plastic sphere
 * would use — more white in the highlight, more black in the shadow), plus
 * a second inset highlight near the top simulating a reflected light band.
 * The moving glint itself comes from .bot-face::after below (bot-shine). */
/* Progress ring wrapping the run-header bot-face while a run is in
 * progress — see progressRing()/estimateRunProgress() in app.js. Sized
 * entirely via the inline width/height set per-instance (matching the SVG's
 * own size), so it follows .bot-face's existing "size via inline custom
 * property, no breakpoint override" convention below instead of inventing a
 * new one — it reflows for free wherever .run-header already reflows. */
.run-progress-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.run-progress-ring {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.run-progress-fill {
  transition: stroke-dasharray 0.5s ease;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--warning) 70%, transparent));
}
@media (prefers-reduced-motion: reduce) {
  .run-progress-fill {
    transition: none;
  }
}

/* Percentage readout — a small solid badge pinned to the ring's edge rather
 * than centered inside it, since the ring also has to leave room for the
 * bot-face avatar at its center; a --bg-raised ring (box-shadow, not a
 * border, so it doesn't eat into the badge's own padding) keeps it legible
 * against whatever's directly behind the progress ring. */
.run-progress-pct {
  position: absolute;
  right: -4px;
  bottom: -4px;
  min-width: 26px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--warning);
  color: #1a1400;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 0 0 2px var(--bg-raised);
}

.bot-face {
  --bot-size: 44px;
  position: relative;
  width: var(--bot-size);
  height: var(--bot-size);
  flex-shrink: 0;
  overflow: hidden; /* clips the .bot-face::after shine sweep to the circle */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--bot-size) * 0.14);
  background:
    radial-gradient(circle at 27% 19%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.22) 9%, transparent 22%),
    radial-gradient(
      circle at 38% 32%,
      color-mix(in srgb, var(--bot-accent, var(--accent)) 50%, white),
      var(--bot-accent, var(--accent)) 48%,
      color-mix(in srgb, var(--bot-accent, var(--accent)) 72%, black) 100%
    );
  box-shadow:
    inset 0 calc(var(--bot-size) * -0.16) calc(var(--bot-size) * 0.22) rgba(0, 0, 0, 0.55),
    inset 0 calc(var(--bot-size) * 0.1) calc(var(--bot-size) * 0.12) rgba(255, 255, 255, 0.3);
}

/* Idle float: the whole sphere bobs gently — uses the `translate` property
 * rather than `transform`, deliberately, so it composes with (instead of
 * fighting) the separate transform:scale() on hover/active below; the two
 * are independent CSS properties that apply together. Duration/delay come
 * in via inline style per instance (see botFaceMarkup() in app.js), seeded
 * from the department key so each bot bobs at its own rate.
 *
 * Split into longhands (not the `animation` shorthand) specifically so the
 * hover rule below can extend animation-name to add bot-look without
 * re-stating — and so overriding — the inline duration/delay. */
@media (prefers-reduced-motion: no-preference) {
  .bot-face {
    animation-name: bot-float;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 4s; /* inline style overrides this per instance */
    transition: rotate 0.25s ease; /* eases bot-look's rotate back to 0 on hover-out */
  }
}

@keyframes bot-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 calc(var(--bot-size) * -0.07); }
}

/* Hover: the head turns to "look" side to side, in addition to (not instead
 * of) the idle float — animation-name becomes a 2-item list, and since the
 * inline animation-duration/-delay stay single values, they apply to BOTH
 * listed animations (CSS repeats a shorter list to match animation-name's
 * length). That means bot-look inherits the same per-department pacing as
 * the float rather than needing its own seed — one more place every agent
 * ends up moving at its own characteristic speed, for free. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .bot-face:hover {
    animation-name: bot-float, bot-look;
  }
}

@keyframes bot-look {
  0%, 100% { rotate: 0deg; }
  25% { rotate: -9deg; }
  50% { rotate: 0deg; }
  75% { rotate: 9deg; }
}

/* Metallic shine sweep: a diagonal highlight band that mostly sits
 * off-canvas (clipped by .bot-face's overflow:hidden) and passes across
 * once per cycle — the "glint" that reads as polished metal rather than
 * matte plastic. Timing comes from --bot-shine-dur/-delay custom
 * properties (inline style can't target a pseudo-element directly). */
.bot-face::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(
    75deg,
    transparent 42%,
    rgba(255, 255, 255, 0.55) 49%,
    rgba(255, 255, 255, 0.15) 53%,
    transparent 60%
  );
  translate: -120% 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .bot-face::after {
    animation: bot-shine var(--bot-shine-dur, 6s) ease-in-out infinite;
    animation-delay: var(--bot-shine-delay, 0s);
  }
}

@keyframes bot-shine {
  0%, 62% { translate: -120% 0; }
  82%, 100% { translate: 120% 0; }
}

.bot-eye {
  position: relative;
  width: calc(var(--bot-size) * 0.12);
  height: calc(var(--bot-size) * 0.3);
  border-radius: 999px;
  background: #f4f6fb;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .bot-face[data-mood="idle"] .bot-eye {
    animation-name: bot-blink;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 5.5s; /* inline style overrides this per instance */
    transition: translate 0.25s ease; /* eases bot-eye-look back to center on hover-out */
  }
}

/* Hover: eyes glance side to side in sync with the head-turn above — same
 * "both listed animations share the inline per-instance duration" trick as
 * bot-look. Scoped to idle mood only: the other moods already redefine the
 * eye's shape (arc/dot/slit) and don't have a neutral "center" to glance
 * from. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .bot-face[data-mood="idle"]:hover .bot-eye {
    animation-name: bot-blink, bot-eye-look;
  }
}

@keyframes bot-eye-look {
  0%, 100% { translate: 0 0; }
  25% { translate: calc(var(--bot-size) * -0.09) 0; }
  50% { translate: 0 0; }
  75% { translate: calc(var(--bot-size) * 0.09) 0; }
}

@keyframes bot-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  96% { transform: scaleY(0.08); }
}

/* watching: user is typing — eyes open a little wider, no blink */
.bot-face[data-mood="watching"] .bot-eye {
  height: calc(var(--bot-size) * 0.34);
  animation: none;
  transform: none;
}

/* thinking/analysing: a run is in flight — round, gently pulsing eyes */
.bot-face[data-mood="thinking"] .bot-eye,
.bot-face[data-mood="analysing"] .bot-eye {
  width: calc(var(--bot-size) * 0.22);
  height: calc(var(--bot-size) * 0.22);
  border-radius: 50%;
  animation: bot-pulse 0.9s ease-in-out infinite alternate;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .bot-face[data-mood="thinking"] .bot-eye,
  .bot-face[data-mood="analysing"] .bot-eye {
    animation: none;
    opacity: 0.85;
  }
}

@keyframes bot-pulse {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

/* done: closed, upward-curved happy eyes */
.bot-face[data-mood="done"] .bot-eye {
  width: calc(var(--bot-size) * 0.2);
  height: calc(var(--bot-size) * 0.11);
  background: none;
  border-top: calc(var(--bot-size) * 0.05) solid #f4f6fb;
  border-radius: 50% / 100% 100% 0 0;
  animation: none;
  transform: none;
}

/* error: low slits, tilted into a slightly worried brow */
.bot-face[data-mood="error"] .bot-eye {
  width: calc(var(--bot-size) * 0.22);
  height: calc(var(--bot-size) * 0.065);
  border-radius: 999px;
  animation: none;
}
.bot-face[data-mood="error"] .bot-eye:first-child { transform: rotate(-14deg) translateY(12%); }
.bot-face[data-mood="error"] .bot-eye:last-child { transform: rotate(14deg) translateY(12%); }
.bot-face[data-mood="error"] { filter: saturate(0.65); }

/* The nav-icon button's own fill/active-state background is meant for a
 * literal glyph icon; a bot-face supplies its own color via its gradient,
 * so the button becomes a transparent hit-area around it instead. Equal
 * selector specificity to .nav-icon.active elsewhere in this file makes
 * source order the tiebreaker — !important here is deliberate so this
 * doesn't silently depend on staying below every future .nav-icon.active
 * rule anyone adds later (see the position:relative incident above). */
.nav-icon.nav-icon--bot,
.nav-icon.nav-icon--bot.active {
  background: transparent !important;
}

.nav-icon--bot .bot-face {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

@media (hover: hover) {
  .nav-icon--bot:not(.active):hover .bot-face {
    transform: scale(1.08);
  }
}

.nav-icon--bot.active .bot-face {
  box-shadow:
    inset 0 calc(var(--bot-size) * -0.16) calc(var(--bot-size) * 0.22) rgba(0, 0, 0, 0.55),
    inset 0 calc(var(--bot-size) * 0.1) calc(var(--bot-size) * 0.12) rgba(255, 255, 255, 0.3),
    0 0 0 2px var(--bg-raised),
    0 0 0 4px var(--icon-accent, var(--accent));
}

/* ---- Department hero: replaces the bare "Submit a goal..." empty-state
 * for departments with no bespoke dashboard (see renderDeptHero() /
 * renderMain() in app.js). Deliberately a new class, not a reskin of
 * .empty-state — that class is shared by ~10 unrelated empty states
 * elsewhere (leads, documents, memory entries, portfolio notes, ...) that
 * must not pick up hero styling. */
.dept-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex: 1;
  min-height: 240px;
  padding: var(--space-5);
  text-align: center;
}

.dept-hero-tagline {
  max-width: 44ch;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

.dept-hero-hint {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0;
}

/* ---- Run-detail status face: sits beside the existing status-badge,
 * mood driven purely by run.status (see renderRunDetail() in app.js) — no
 * new state, works for every department's (and the CEO's) runs alike. */
.run-header .bot-face {
  margin-right: 2px;
}