/* ==========================================================================
   Design tokens
   Light is the default and wears the landing's paper, ink and team colors
   (landing.css). Dark is the owner's choice: html[data-theme="dark"],
   set before paint by index.html and toggled from the sidebar.
   Components only reference tokens — never raw colors.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Color — surfaces */
  --bg: #f6f3ec;
  --sidebar: #efebe2;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --hover: #ede8dc;
  /* Warm fills: on paper they land on the landing's --paper-2 step. */
  --fill: rgba(110, 90, 40, 0.07);
  --fill-strong: rgba(110, 90, 40, 0.11);
  --track: #e8e2d5;
  --media-bg: rgba(14, 14, 16, 0.04);
  --glass: rgba(246, 243, 236, 0.82);
  --scrim: rgba(14, 14, 16, 0.32);
  /* Site logos are drawn for light pages, so they keep a light tile in both themes. */
  --logo-bg: #ffffff;
  /* The landing's paper grain, laid over the page background only. */
  --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.05 0 0 0 0 0.06 0 0 0 0.3 -0.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Color — text */
  --text: #0e0e10;
  --text-body: #2a2a30;
  --text-2: #45454d;
  --text-3: #5e5e66;
  --text-4: #6e6e76;

  /* Color — lines */
  --faint: #d6cfbf;
  --hairline: rgba(14, 14, 16, 0.07);
  --border: rgba(14, 14, 16, 0.12);
  --line-strong: rgba(14, 14, 16, 0.4);

  /* Color — intent */
  --primary: #0e0e10;
  --on-primary: #f6f3ec;
  --accent: #4635d8;
  --accent-link: #4635d8;
  --accent-tint: rgba(70, 53, 216, 0.12);
  --on-accent: #ffffff;
  --live: #22c55e;
  --danger: #c2413a;
  /* The social networks' own blues, for their badges only. */
  --linkedin: #0a66c2;
  --telegram: #1b7fbf;
  --on-danger: #ffffff;

  /* Color — conversation */
  --bubble-in: #ffffff;
  --bubble-out: #18181a;
  --on-bubble-out: #ffffff;
  --on-bubble-out-2: rgba(255, 255, 255, 0.72);
  --on-bubble-out-fill: rgba(255, 255, 255, 0.14);
  --bubble-border: rgba(14, 14, 16, 0.1);

  /* Color — speaker names (picked by [data-tone] from app.js; ≥4.5:1 on bubbles).
     The landing's team inks: editor, writer, copy, art, search, publishing. */
  --speaker-1: #4635d8;
  --speaker-2: #b23a12;
  --speaker-3: #0d7343;
  --speaker-4: #ad2e6c;
  --speaker-5: #1d56c8;
  --speaker-6: #7a5600;

  /* Color — the landing's team pastels, paired with the inks above.
     --team-N fills a tag, dot or selected row; --team-N-tint backs a chip or card. */
  --team-1: #a99bff;
  --team-1-tint: #eeebff;
  --team-2: #ff9a76;
  --team-2-tint: #ffede5;
  --team-3: #6fd6a0;
  --team-3-tint: #e3f7ec;
  --team-4: #ff9bcb;
  --team-4-tint: #ffe9f3;
  --team-5: #8db8ff;
  --team-5-tint: #e6efff;
  --team-6: #ffd45e;
  --team-6-tint: #fff4d1;
  /* Text on a full pastel stays ink in both themes, as on the landing's tags. */
  --on-team: #0e0e10;
  /* A selected row wears its full pastel in light; dark keeps it to a wash. */
  --pick-strength: 100%;
  --on-pick: #0e0e10;
  --dots-strength: 100%;
  --danger-tint: #fdf0ee;

  /* Typography */
  --font: Vazirmatn, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Arabic", "Segoe UI", "Helvetica Neue", sans-serif;
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 22px;
  --fs-2xl: clamp(20px, 3vw, 26px);
  --fs-display: clamp(32px, 6vw, 48px);
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-base: 1.65;
  --lh-relaxed: 1.85;

  /* Spacing (4px scale) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(14, 14, 16, 0.05);
  --shadow-md: 0 1px 2px rgba(14, 14, 16, 0.05), 0 14px 34px -16px rgba(14, 14, 16, 0.22);
  --shadow-lg: 0 1px 2px rgba(14, 14, 16, 0.06), 0 24px 48px -20px rgba(14, 14, 16, 0.3);
  --shadow-overlay: 0 2px 8px rgba(14, 14, 16, 0.08), 0 32px 64px -24px rgba(14, 14, 16, 0.36);
  --focus-ring: 0 0 0 3px var(--accent-tint);

  /* Blur — only for sticky chrome and floating menus */
  --blur-chrome: saturate(140%) blur(16px);
  --blur-overlay: saturate(140%) blur(24px);

  /* Motion */
  --dur-press: 100ms;
  --dur-fast: 160ms;
  --dur-base: 220ms;
  --dur-slow: 400ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --press-scale: 0.97;
  --stagger: 40ms;
  --enter-shift: 6px;
  /* One rhythm for all bot motion: activity loops share --beat, typing uses
     the faster --beat-fast, ambient loops are multiples of the beat. */
  --beat: 1.6s;
  --beat-fast: 1.2s;
  --dur-breathe: calc(var(--beat) * 4);
  --dur-listen: var(--beat);
  --dur-orbit: var(--beat);
  --dur-pulse: var(--beat);
  --dur-ping: calc(var(--beat) * 1.5);
  --ring-width: 1.5px;
  --ring-gap: -3px;
  --dur-ack: 400ms;
  --dur-status: 180ms;

  /* Layout */
  --chrome: 56px;
  --pad-x: 22px;
  --sidebar-w: 272px;
  --roster-w: 260px;
  --content-w: 720px;
  --touch: 44px;

  font-family: var(--font);
  font-optical-sizing: auto;
  background: var(--bg);
  color: var(--text);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0b0b0c;
  --sidebar: #0e0e0f;
  --surface: #161617;
  --surface-2: #1c1c1e;
  --hover: #1f1f21;
  --fill: rgba(255, 255, 255, 0.05);
  --fill-strong: rgba(255, 255, 255, 0.09);
  --track: #232325;
  --media-bg: rgba(255, 255, 255, 0.04);
  --glass: rgba(11, 11, 12, 0.8);
  --scrim: rgba(0, 0, 0, 0.6);
  --texture: none;

  --text: #f4f4f5;
  --text-body: #d9d9dc;
  --text-2: #a1a1a6;
  --text-3: #8a8a90;
  --text-4: #5c5c62;

  --faint: #333336;
  --hairline: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.5);

  --primary: #f4f4f5;
  --on-primary: #0b0b0c;
  --accent: #7aa7ff;
  --accent-link: #9dbcff;
  --accent-tint: rgba(122, 167, 255, 0.14);
  --on-accent: #0b0b0c;
  --live: #34d399;
  --danger: #ff6369;
  --linkedin: #70b5f9;
  --telegram: #5cb8f0;
  --on-danger: #0b0b0c;

  --bubble-in: #161617;
  --bubble-out: #262628;
  --on-bubble-out: #f4f4f5;
  --on-bubble-out-2: rgba(244, 244, 245, 0.7);
  --on-bubble-out-fill: rgba(255, 255, 255, 0.08);
  --bubble-border: var(--hairline);

  /* The same team hues as light, at the landing's bright step. */
  --speaker-1: #a99bff;
  --speaker-2: #ff9a76;
  --speaker-3: #6fd6a0;
  --speaker-4: #ff9bcb;
  --speaker-5: #8db8ff;
  --speaker-6: #ffd45e;

  --team-1-tint: rgba(169, 155, 255, 0.16);
  --team-2-tint: rgba(255, 154, 118, 0.16);
  --team-3-tint: rgba(111, 214, 160, 0.16);
  --team-4-tint: rgba(255, 155, 203, 0.16);
  --team-5-tint: rgba(141, 184, 255, 0.16);
  --team-6-tint: rgba(255, 212, 94, 0.16);
  --pick-strength: 20%;
  --on-pick: var(--text);
  --dots-strength: 45%;
  --danger-tint: rgba(255, 99, 105, 0.14);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.5);
  --shadow-overlay: 0 2px 8px rgba(0, 0, 0, 0.5), 0 32px 80px rgba(0, 0, 0, 0.6);
}

/* Switching themes repaints at once instead of easing each control on its own. */
:root.theme-switching *,
:root.theme-switching *::before,
:root.theme-switching *::after { transition: none !important; }

/* ==========================================================================
   Base
   ========================================================================== */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
::selection { background: var(--accent-tint); }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg) var(--texture);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html {
  scrollbar-width: thin;
  scrollbar-color: var(--faint) transparent;
}

body {
  height: 100dvh;
  overflow: hidden;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

button { cursor: pointer; }
button:disabled, textarea:disabled { cursor: default; }

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

/* ==========================================================================
   Shell & sidebar
   ========================================================================== */

.shell {
  height: 100%;
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  background: var(--bg) var(--texture);
}

.sidebar {
  background: var(--sidebar) var(--texture);
  color: var(--text);
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: var(--space-4) var(--space-3) var(--space-3);
  gap: var(--space-1);
  border-inline-end: 1px solid var(--hairline);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text);
  padding: var(--space-1) 10px var(--space-3);
}

.sidebar-brand img {
  width: 22px;
  height: 28px;
  flex: none;
}

.sidebar-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0 10px var(--space-3);
  color: var(--text-2);
  font-size: var(--fs-xs);
}

.sidebar-account span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-account button {
  flex: none;
  min-height: 32px;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-2);
  font: inherit;
}

.sidebar-account button:hover { background: var(--fill); color: var(--text); }

/* Theme switch: a moon while light, a sun once dark. */
#theme {
  display: grid;
  place-items: center;
  width: 32px;
  margin-inline-start: auto;
  padding: 0;
}

#theme svg { width: 16px; height: 16px; }
#theme .theme-sun,
:root[data-theme="dark"] #theme .theme-moon { display: none; }
:root[data-theme="dark"] #theme .theme-sun { display: block; }

#nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--touch);
  text-align: right;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0 var(--space-3);
  color: var(--text);
  font-weight: var(--fw-semibold);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-press) ease-out;
}

#nav::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  background: var(--text);
  -webkit-mask: var(--nav-icon) center / contain no-repeat;
  mask: var(--nav-icon) center / contain no-repeat;
}

#nav[data-kind="create"] {
  --nav-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M8.75 2.75a.75.75 0 0 0-1.5 0V7.25H2.75a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5z'/></svg>");
}

#nav[data-kind="back"],
#nav[data-kind="cancel"],
#nav[data-kind="list"] {
  --nav-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M6.15 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 1 1-1.06-1.06L9.87 8 6.15 4.28a.75.75 0 0 1 0-1.06z'/></svg>");
}

#nav[data-kind="back"]::before,
#nav[data-kind="cancel"]::before,
#nav[data-kind="list"]::before { background: var(--text-2); }

#nav:hover { background: var(--fill); border-color: var(--line-strong); }
#nav:active { transform: scale(0.98); }
#nav[hidden] { display: none; }
#nav:not([hidden]) + .business { margin-top: var(--space-2); }

.sidebar-label {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-3);
}

/* The one business: its mark and name, the way into its team. */
.business {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  text-align: right;
  background: var(--fill);
  border: 0;
  border-radius: var(--r-md);
  padding: var(--space-2) var(--space-3);
  color: var(--text);
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-press) ease-out;
}

.business[hidden] { display: none; }
.business:hover { background: var(--fill-strong); }
.business:active { transform: scale(0.985); }
.business.active { background: var(--team-1-tint); }

.business .business-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 15px;
  box-shadow: none;
}

.business .business-mark.has-logo { background: var(--logo-bg); }
.business .business-mark img { width: 70%; height: 70%; object-fit: contain; }

.business-copy { min-width: 0; flex: 1; }
.business-copy > * { display: block; }

.business-copy strong {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.business-copy > span {
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.business.has-unread { padding-inline-end: 28px; }

.business.has-unread::after {
  content: "";
  position: absolute;
  inset-inline-end: var(--space-3);
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: var(--r-pill);
  background: var(--accent);
}

/* ---- Article feed: newest on top, the one in the works shows its progress. */
.feed-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin: var(--space-5) 10px var(--space-2);
}

.feed-head[hidden] { display: none; }

.feed-count {
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.feed {
  flex: 1;
  min-height: 0;
  overflow: auto;
  margin: 0;
  padding: 0 0 var(--space-2);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scrollbar-width: thin;
}

.feed-item {
  position: relative;
  flex: none;
  display: grid;
  gap: 6px;
  padding: 10px var(--space-3);
  border-radius: var(--r-md);
  transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

/* In the works: a card of its own. Published: a quiet row. */
.feed-item:not([data-stage="published"]) {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--hairline), var(--shadow-sm);
}

.feed-item[data-stage="published"] { padding-block: 8px; gap: 2px; }
.feed-item[data-stage="published"]:hover { background: var(--fill); }
.feed-item:not([data-stage="published"]):hover { box-shadow: inset 0 0 0 1px var(--border), var(--shadow-sm); }
.feed-item.active,
.feed-item.active:hover { background: var(--fill-strong); }

.feed-open {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  text-align: right;
}

/* The whole card opens it; the title stays the one control. */
.feed-open::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.feed-open:focus-visible { outline: none; }
.feed-item:has(.feed-open:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.feed-open.is-untitled { color: var(--text-3); font-weight: var(--fw-regular, 400); }
.feed-item:not([data-stage="published"]) .feed-open { font-weight: var(--fw-semibold); }

.feed-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--text-3);
}

.feed-state { display: inline-block; font-variant-numeric: tabular-nums; }

/* A live dot while someone is on it right now. */
.feed-item.is-working .feed-meta::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--live);
  animation: breathe 1.6s var(--ease-standard) infinite;
}

.feed-item[data-stage="review"] .feed-state { color: var(--speaker-6); font-weight: var(--fw-medium); }

.feed-item[data-stage="published"]:not(.is-working) .feed-meta::before {
  content: "";
  width: 12px;
  height: 12px;
  flex: none;
  background: var(--speaker-3);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5 6.5 11.5 12.5 4.5'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5 6.5 11.5 12.5 4.5'/></svg>") center / contain no-repeat;
}

.feed-bar {
  position: relative;
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--track);
}

.feed-bar[hidden] { display: none; }

/* RTL: progress fills from the right, where reading starts. */
.feed-bar > i {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: calc(var(--progress, 0) * 100%);
  border-radius: inherit;
  background: var(--accent);
  transition: width var(--dur-slow) var(--ease-out);
}

.feed-item[data-stage="review"] .feed-bar > i,
.feed-item[data-stage="ready"] .feed-bar > i { background: var(--speaker-3); }

/* Words are streaming in: a soft sheen runs along the filled part. */
.feed-item.is-working .feed-bar > i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(270deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  background-size: 200% 100%;
  animation: feed-sheen 1.8s linear infinite;
}

@keyframes feed-sheen {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.feed-crew {
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.feed-crew[hidden] { display: none; }

.feed-crew li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-2);
}

.feed-crew .avatar { width: 18px; height: 18px; margin-top: 1px; }

.feed-crew-copy {
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.feed-crew-copy strong { font-weight: var(--fw-semibold); color: var(--text); }
.feed-crew-copy strong[data-tone] { color: var(--tone-ink); }

/* Something waits on the owner: the card says so and offers the way to do it. */
.feed-item.has-task:not([data-stage="published"]),
.feed-item.has-task[data-stage="published"] {
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--speaker-6), var(--shadow-sm);
}

.feed-item[data-stage="blocked"] .feed-state { color: var(--speaker-6); font-weight: var(--fw-medium); }
.feed-item[data-stage="blocked"] .feed-bar > i { background: var(--speaker-6); }

.feed-tasks {
  display: grid;
  gap: 4px;
}

.feed-tasks[hidden] { display: none; }

/* Sits above the card's own link so it can be pressed on its own. */
.feed-task {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--team-6-tint);
  color: var(--speaker-6);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  text-align: right;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-press) ease-out;
}

.feed-task::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='6.5' fill='none' stroke='black' stroke-width='1.5'/><path d='M8 4.6v4.2' stroke='black' stroke-width='1.6' stroke-linecap='round'/><circle cx='8' cy='11.2' r='1' fill='black'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='6.5' fill='none' stroke='black' stroke-width='1.5'/><path d='M8 4.6v4.2' stroke='black' stroke-width='1.6' stroke-linecap='round'/><circle cx='8' cy='11.2' r='1' fill='black'/></svg>") center / contain no-repeat;
}

.feed-task::after {
  content: "";
  width: 12px;
  height: 12px;
  flex: none;
  margin-inline-start: auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M9.8 3.2 5.1 8l4.7 4.8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M9.8 3.2 5.1 8l4.7 4.8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}

.feed-task:hover { background: var(--team-6); color: var(--on-team, var(--text)); }
.feed-task:active { transform: scale(0.985); }
.feed-task:focus-visible { outline: 2px solid var(--speaker-6); outline-offset: 1px; }

.feed-count.is-owed { color: var(--speaker-6); font-weight: var(--fw-semibold); }

.business.has-ask .business-copy > span { color: var(--speaker-6); font-weight: var(--fw-semibold); }

.feed-empty {
  margin: var(--space-2) 10px;
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--text-3);
  animation: fade-in var(--dur-slow) var(--ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
  .feed-item.is-working .feed-meta::before,
  .feed-item.is-working .feed-bar > i::after { animation: none; }
  .feed-bar > i { transition: none; }
}

/* ==========================================================================
   Workspace & header
   ========================================================================== */

.workspace {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  background: var(--bg) var(--texture);
}

.workspace:has(#view.project) {
  grid-template-columns: minmax(0, 1fr) var(--roster-w);
}

.workspace:has(#view.project) > #view { grid-column: 1 / -1; }

.workspace:has(#view.project) > #composer,
.workspace:has(#view.project) > #status {
  grid-column: 1;
  width: auto;
  margin-inline: var(--space-4) var(--space-3);
}

header {
  position: absolute;
  z-index: 6;
  top: 0;
  inset-inline: 0;
  height: var(--chrome);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-4) 0 var(--space-3);
  background: var(--glass);
  backdrop-filter: var(--blur-chrome);
  -webkit-backdrop-filter: var(--blur-chrome);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out);
}

header.scrolled { border-bottom-color: var(--hairline); }

#back {
  display: none;
  width: var(--touch);
  height: var(--touch);
  flex: none;
  place-items: center;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text);
  padding: 0;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-press) ease-out;
}

#back svg { width: 18px; height: 18px; }
#back:hover { background: var(--fill); }
#back:active { transform: scale(0.96); }

.heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  flex: 1;
}

#title {
  max-width: 100%;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

header p, #status, .hint, .meta {
  margin: 1px 0 0;
  color: var(--text-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}

#subtitle {
  max-width: 100%;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Secondary pill buttons */
#settings,
.posts-open {
  flex: none;
  height: 32px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text);
  padding: 0 var(--space-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: transform var(--dur-press) ease-out, background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.posts-open { font-variant-numeric: tabular-nums; }

#settings:hover,
.posts-open:hover { background: var(--fill); border-color: var(--line-strong); }
#settings.active { background: var(--fill-strong); border-color: var(--line-strong); }
#settings:active,
.posts-open:active { transform: scale(var(--press-scale)); }

#view {
  grid-row: 1;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  padding-top: var(--chrome);
  display: flex;
  flex-direction: column;
  align-items: center;
}

#view.project {
  overflow: hidden;
  display: block;
  align-items: stretch;
  width: 100%;
}

/* ==========================================================================
   Greeting, setup & forms
   ========================================================================== */

.greeting {
  width: min(640px, 100%);
  min-height: calc(100% - 24px);
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  padding: clamp(36px, 6vw, 64px) var(--pad-x);
  gap: var(--space-3);
}

.greeting h1 {
  margin: 0;
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.greeting p {
  margin: 0;
  max-width: 420px;
  color: var(--text-2);
  font-size: clamp(15px, 2.4vw, var(--fs-lg));
  line-height: 1.75;
}

.setup {
  width: min(480px, calc(100% - 32px));
  margin: clamp(28px, 5vw, 48px) 0 var(--space-8);
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}

.setup > strong {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1.3;
}

.setup .hint { line-height: 1.7; }

.integration {
  display: grid;
  gap: 10px;
  padding: var(--space-4);
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
}

.integration > strong { font-size: var(--fs-md); font-weight: var(--fw-semibold); }

.opt-card {
  display: grid;
  gap: var(--space-2);
  width: min(100%, 420px);
  margin-top: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--bg);
}

.opt-card p {
  margin: 0;
  line-height: 1.6;
}

.opt-evidence {
  color: var(--text-2);
  font-size: var(--fs-sm);
}

.integration .setup-test { justify-self: start; }

/* ---- Site connection and API tokens ------------------------------------- */

.api-body { display: grid; gap: var(--space-4); }
.api-subtitle { margin: 0; font-size: var(--fs-base); font-weight: var(--fw-semibold); }

.api-state {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-weight: var(--fw-medium);
}

.api-dot {
  inline-size: 10px;
  block-size: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--faint);
}
.api-dot[data-state="ok"] { background: var(--live); }
.api-dot[data-state="warn"] { background: var(--team-6); }

.api-connection, .api-tokens { display: grid; gap: 10px; }

.api-steps {
  margin: 0;
  padding-inline-start: var(--space-5);
  display: grid;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--text-2);
}

.api-steps a, .api-links a { color: var(--accent-link); }

.api-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px var(--space-4);
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.api-facts dt { color: var(--text-3); }
.api-facts dd { margin: 0; color: var(--text); min-width: 0; overflow-wrap: anywhere; }

.api-warn {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-sm);
  background: var(--team-6-tint);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

.api-note {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-sm);
  background: var(--accent-tint);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

.api-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.api-actions button.danger { justify-self: auto; }
.api-result { font-size: var(--fs-sm); color: var(--text-2); }

.token-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.token-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.token-main, .token-meta { grid-column: 1; min-width: 0; }
.token-row > button { grid-row: 1 / span 2; grid-column: 2; min-height: 36px; padding: 0 14px; }
.token-row.is-inactive { opacity: 0.6; }

.token-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--space-2); min-width: 0; }
.token-name { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.token-prefix, .token-scope code, .token-value code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-xs);
  direction: ltr;
  unicode-bidi: isolate;
}
.token-prefix { color: var(--text-3); }
.token-meta { margin: 0; font-size: var(--fs-xs); color: var(--text-3); line-height: 1.6; }

.token-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  align-items: end;
}
.token-form label:first-child, .token-form .token-scopes, .token-form .token-hint, .token-form button { grid-column: 1 / -1; }
.token-form .token-hint { margin: calc(var(--space-2) * -1) 0 0; font-size: var(--fs-xs); }

.token-old summary {
  cursor: pointer;
  min-height: var(--touch);
  display: flex;
  align-items: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-2);
}
.token-old .token-list { margin-block-end: var(--space-2); }

/* A flex summary loses the browser's own marker, so it gets one back. */
.token-old summary::before,
.api-activity summary::before {
  content: "◂";
  margin-inline-end: var(--space-2);
  font-size: 11px;
  color: var(--text-3);
}
.token-old[open] > summary::before,
.api-activity[open] > summary::before { content: "▾"; }
.token-form select {
  width: 100%;
  min-height: var(--touch);
  padding: var(--space-2) 10px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.token-form button { justify-self: start; }

.token-scopes {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
}
.token-scopes legend { padding: 0 var(--space-1); font-size: var(--fs-sm); color: var(--text-2); }
.token-scope { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-regular); color: var(--text); }
.token-scope input { inline-size: 18px; block-size: 18px; min-height: 0; accent-color: var(--accent); }
.token-scope code { color: var(--text-3); }

.token-reveal {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--accent-tint);
}
.token-reveal p { margin: 0; font-size: var(--fs-sm); line-height: 1.7; }
.token-value { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.token-value code {
  flex: 1 1 260px;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-sm);
  background: var(--surface);
  overflow-wrap: anywhere;
  user-select: all;
}

.api-activity summary {
  cursor: pointer;
  min-height: var(--touch);
  display: flex;
  align-items: center;
  font-weight: var(--fw-medium);
  color: var(--text-2);
}
.api-activity ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--fs-sm); line-height: 1.6; }
.api-activity time { color: var(--text-3); font-size: var(--fs-xs); }
.api-activity li.is-error { color: var(--danger); }
.api-links { margin: 0; font-size: var(--fs-sm); }

@media (max-width: 560px) {
  .token-form { grid-template-columns: 1fr; }
  .token-row { grid-template-columns: 1fr; }
  .token-row > button { grid-row: auto; grid-column: 1; justify-self: start; }
  .api-facts { grid-template-columns: 1fr; gap: 0; }
  .api-facts dd { margin-block-end: var(--space-2); }
}

/* ---- Social media team: settings, roster section and post cards ---------- */

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--text);
  cursor: pointer;
}

.switch-row strong { font-size: var(--fs-md); font-weight: var(--fw-semibold); }

/* ---- Autopilot: how much the team decides on its own --------------------- */

.autopilot-options { display: grid; gap: var(--space-2); }

.autopilot-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
}

.autopilot-option:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
.autopilot-option:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.autopilot-option input { margin-block-start: 3px; accent-color: var(--accent); }
.autopilot-option input[type="radio"] { flex: none; width: 18px; height: 18px; min-height: 0; padding: 0; }
.autopilot-option span { display: grid; gap: 2px; }
.autopilot-option .hint { margin: 0; }

.switch {
  appearance: none;
  flex: none;
  position: relative;
  width: 44px;
  min-height: 0;
  height: 26px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--track);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--text-3);
  box-shadow: var(--shadow-sm);
  transition: inset-inline-start var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.switch:checked { background: var(--primary); }
.switch:checked::after { inset-inline-start: 21px; background: var(--on-primary); }
.switch:disabled { opacity: 0.5; cursor: default; }
.switch:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.social-network {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
}

.social-network > strong { font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.social-network .setup-test { justify-self: start; }
.social-network .hint { margin: 0; }

.social-connect { display: grid; gap: 10px; }

.social-steps {
  margin: 0;
  padding-inline-start: 1.2em;
  display: grid;
  gap: 4px;
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

.social-cadence { display: grid; gap: 10px; }

.social-cadence select {
  width: 100%;
  min-height: var(--touch);
  padding: var(--space-2) 10px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

.check-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch);
  color: var(--text);
  font-weight: var(--fw-regular);
  cursor: pointer;
}

.check-row input {
  width: 18px;
  height: 18px;
  min-height: 0;
  flex: none;
  margin: 0;
  accent-color: var(--primary);
}

.roster-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
}

.roster-off {
  display: grid;
  gap: var(--space-2);
  margin: 0 10px;
}

.roster-off p {
  margin: 0;
  color: var(--text-3);
  font-size: var(--fs-xs);
  line-height: 1.7;
}

.roster-off-action {
  justify-self: start;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-press) ease-out;
}

.roster-off-action:hover { background: var(--fill); }
.roster-off-action:active { transform: scale(var(--press-scale)); }
.roster-off-action:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.social-card {
  display: grid;
  gap: var(--space-2);
  width: min(100%, 460px);
  margin-top: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--bg);
}

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

.social-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-2);
}

.social-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-3);
}

.social-card[data-platform="linkedin"] .social-badge::before { background: var(--linkedin); }
.social-card[data-platform="telegram"] .social-badge::before { background: var(--telegram); }

.social-size { color: var(--text-3); font-size: var(--fs-xs); }

/* The image as the network crops it: wide for LinkedIn, square for Telegram. */
.social-image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--media-bg);
}

.social-card[data-platform="telegram"] .social-image { aspect-ratio: 1 / 1; }

.social-image.is-drawing {
  display: grid;
  place-items: center;
  color: var(--text-3);
  font-size: var(--fs-sm);
}

.social-text {
  margin: 0;
  white-space: pre-wrap;
  /* Each line takes its own direction, as the networks show it: a link or
     @handle line reads left to right inside a Persian post. */
  unicode-bidi: plaintext;
  text-align: start;
  overflow-wrap: anywhere;
  line-height: 1.8;
  color: var(--text-body);
}

.social-text.clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 9;
  overflow: hidden;
}

.social-more {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  min-height: 32px;
}

.social-error { margin: 0; color: var(--danger); font-size: var(--fs-sm); line-height: 1.6; }
.social-card .ask-status a { color: var(--accent); }

.property-picker {
  display: grid;
  gap: 10px;
}

.property-picker select {
  width: 100%;
  min-height: var(--touch);
  padding: var(--space-2) 10px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  direction: ltr;
}

label {
  display: grid;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-2);
}

input, textarea, .chat-form input, .chat-form textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px var(--space-3);
  color: var(--text);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

input::placeholder, textarea::placeholder { color: var(--text-4); }

input { min-height: var(--touch); }

input:focus, textarea:focus, .chat-form input:focus, .chat-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.setup input[dir="ltr"], input[dir="ltr"], textarea[dir="ltr"] {
  direction: ltr;
  text-align: left;
}

.setup-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.setup-test,
.setup button[type="submit"],
.property-picker button,
button.danger {
  min-height: var(--touch);
  border-radius: var(--r-pill);
  padding: 0 18px;
  font-weight: var(--fw-semibold);
  transition: transform var(--dur-press) ease-out, opacity var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.setup-test {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

.setup-test:hover { background: var(--fill); }

/* Primary actions are monochrome; the accent is reserved for focus, links and status. */
.setup button[type="submit"],
.property-picker button {
  background: var(--primary);
  color: var(--on-primary);
  border: 0;
}

.property-picker button {
  justify-self: start;
  min-height: 40px;
}

.setup button[type="submit"]:hover:not(:disabled),
.property-picker button:hover:not(:disabled) { opacity: 0.88; }
.setup button[type="submit"]:disabled { opacity: 0.4; }
.setup button[type="submit"]:active:not(:disabled),
.property-picker button:active:not(:disabled),
button.danger:active:not(:disabled),
.setup-test:active { transform: scale(var(--press-scale)); }

button.danger {
  justify-self: stretch;
  border: 0;
  background: transparent;
  color: var(--danger);
}

button.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 10%, transparent); }

.setup button.danger + button.danger {
  background: var(--danger);
  color: var(--on-danger);
}

.setup button.danger + button.danger:hover:not(:disabled) { opacity: 0.88; }

/* ==========================================================================
   Project stage & roster
   ========================================================================== */

.stage {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--roster-w);
  grid-template-rows: auto minmax(0, 1fr);
}

#roster {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-height: 0;
  overflow: auto;
  padding: var(--space-3) 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--sidebar);
  border-inline-start: 1px solid var(--hairline);
}

.roster-label {
  margin: 2px 10px 6px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-3);
}

.member-row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.member {
  flex: 1;
  min-width: 0;
  min-height: var(--touch);
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: right;
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  padding: 6px var(--space-2);
  color: var(--text);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.member:hover { background: var(--fill); }
.member.active { background: var(--fill-strong); }

.member-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
}

.member-copy strong {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.member-note, .member-status {
  flex-basis: 100%;
  color: var(--text-3);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}

.member-status:empty { display: none; }
.member-status.live { color: var(--text-2); font-weight: var(--fw-medium); }

/* Team members are shown at work, not written to. */
.member.static { cursor: default; }
.member.static:hover { background: transparent; }
.member-duty {
  flex-basis: 100%;
  color: var(--text-3);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.member.static .member-status.live + .member-duty { display: none; }

.unread {
  margin-inline-start: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 18px;
  text-align: center;
  flex: none;
}

.avatar-wrap {
  position: relative;
  width: 36px;
  height: 36px;
  flex: none;
}

.avatar {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--track);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.avatar img, .avatar svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.presence {
  position: absolute;
  z-index: 1;
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--live);
  border: 2px solid var(--sidebar);
  bottom: -1px;
  inset-inline-end: -1px;
}

/* ==========================================================================
   Report & library
   ========================================================================== */

#report {
  grid-column: 1;
  grid-row: 1;
  width: auto;
  margin: 0;
  padding: var(--space-2) 18px 10px;
  display: grid;
  gap: var(--space-1);
}

#report p { margin: 0; }

.report-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 32px;
}

.report-row strong {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.library {
  grid-column: 1;
  grid-row: 1 / span 2;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 18px var(--pad-x) 28px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
}

.library:not(:has(.post-card)) {
  width: min(var(--content-w), 100%);
  margin-inline: auto;
}

.library:has(.post-card) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  align-content: start;
  width: auto;
  margin: 0;
}

.library > .hint { grid-column: 1 / -1; }

.post-card, .article {
  width: 100%;
  background: var(--surface);
  border-radius: var(--r-lg);
  text-align: start;
  line-height: var(--lh-base);
}

.post-card {
  display: grid;
  gap: 6px;
  align-content: start;
  color: inherit;
  min-height: 132px;
  overflow: hidden;
  padding: 0 0 var(--space-4);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.post-card:hover {
  transform: translateY(-2px);
  border-color: var(--border);
  box-shadow: var(--shadow-lg);
}

.post-open {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0 var(--space-4);
  border: 0;
  background: transparent;
  color: inherit;
  text-align: inherit;
}

.post-card img {
  width: 100%;
  height: 148px;
  margin: 0 0 var(--space-2);
  object-fit: cover;
  background: var(--track);
  display: block;
  border-bottom: 1px solid var(--hairline);
}

.post-link {
  font-size: var(--fs-sm);
  line-height: 1.5;
  overflow-wrap: anywhere;
  margin: 0 var(--space-4);
}

.post-card strong {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.post-card span {
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card .post-wait {
  -webkit-line-clamp: 1;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.article {
  padding: var(--space-2) var(--pad-x) var(--pad-x);
  box-shadow: none;
  background: transparent;
}

.article .hint { color: var(--text-2); font-size: var(--fs-sm); }
.post-card a, .article a, .prose a {
  color: var(--accent-link);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.article h2, .article h3, .article p { margin: 0.7em 0; }
.article h2:first-child, .article h3:first-child, .article p:first-child { margin-top: 0; }
.article p { font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--text-body); }
.article h2, .article h3 {
  font-weight: var(--fw-bold);
  line-height: 1.35;
  color: var(--text);
}
.article-cover, .article img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  background: var(--track);
}
.article-cover, .article img { margin: 0 0 var(--space-4); border-radius: var(--r-lg); }
.article figure { margin: var(--space-4) 0; }
.article figure img { margin-bottom: var(--space-2); }
.article figcaption { color: var(--text-2); font-size: var(--fs-sm); text-align: center; }

/* ---- Asking for a change on one article, and its earlier versions -------- */

.article-changes { width: 100%; }
.change-form textarea { resize: vertical; min-height: 84px; line-height: 1.7; }

.change-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.change-kind {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--text);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.change-kind input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  min-height: 0;
}

.change-kind:hover { background: var(--fill); }
.change-kind:has(input:checked) { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.change-kind:has(input:focus-visible) { box-shadow: var(--focus-ring); }

.cover-choice {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--hairline);
}
.cover-choice h3 { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); }
.cover-choice p { margin: 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.7; }
.cover-choice .ask-send { justify-self: start; }
.cover-choice .article-cover { margin: 0; }

.change-log, .versions ul, .memory-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.change-log li {
  display: grid;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--hairline);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.change-log .change-head { font-weight: var(--fw-semibold); color: var(--text); }
.change-log li[data-state="failed"] .change-head { color: var(--danger); }
.change-log li[data-state="done"] .change-head { color: var(--text-2); }
.change-log time, .versions time { color: var(--text-3); font-size: var(--fs-xs); }

.versions summary {
  cursor: pointer;
  min-height: var(--touch);
  display: flex;
  align-items: center;
  font-weight: var(--fw-medium);
  color: var(--text-2);
}

.versions li, .memory-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.versions li span, .memory-text { flex: 1 1 180px; min-width: 0; }
.versions .setup-test, .memory-list .setup-test { min-height: 36px; padding: 0 14px; }

.memory-scope {
  padding: 2px var(--space-2);
  border-radius: var(--r-pill);
  background: var(--fill);
  color: var(--text-2);
  font-size: var(--fs-xs);
}

/* ==========================================================================
   Thread
   ========================================================================== */

#thread {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  overflow: auto;
  padding: var(--space-2) 18px 18px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.row {
  width: 100%;
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.day-chip, .unread-mark {
  align-self: center;
  margin: 6px 0;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--r-pill);
  background: var(--fill);
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}

.unread-mark {
  color: var(--accent-link);
  background: var(--accent-tint);
}

.row.user { justify-content: flex-end; }
.row.bot { justify-content: flex-start; }

.bubble {
  max-width: min(560px, calc(100% - 46px));
  padding: 10px 14px 10px;
  border-radius: var(--r-lg);
  background: var(--bubble-in);
  border: 1px solid var(--bubble-border);
  color: var(--text);
  white-space: pre-wrap;
  line-height: var(--lh-base);
  text-align: start;
}

.row.user .bubble {
  background: var(--bubble-out);
  border-color: transparent;
  color: var(--on-bubble-out);
  border-start-end-radius: var(--r-xs);
}

.row.bot .bubble { border-start-start-radius: var(--r-xs); }
.row.user .stamp, .row.user .hint, .row.user .prose a { color: var(--on-bubble-out-2); }
.row.user .quote { background: var(--on-bubble-out-fill); border-inline-start-color: var(--on-bubble-out-2); }
.row.user .quote strong, .row.user .quote span { color: var(--on-bubble-out); }

.chat-images {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.chat-images img {
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  border-radius: var(--r-md);
  background: var(--media-bg);
}

.chat-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  margin-top: var(--space-2);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--fill);
  color: inherit;
  text-align: start;
  cursor: pointer;
  white-space: normal;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-press) ease-out;
}

.chat-card:hover { background: var(--fill-strong); border-color: var(--border); }

.chat-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--media-bg);
}

.chat-card-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px var(--space-3) var(--space-3);
}

.chat-card strong {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.chat-card-copy span {
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.5;
}

.row.user .chat-card { background: var(--on-bubble-out-fill); border-color: transparent; }
.row.user .chat-card-copy span { color: var(--on-bubble-out-2); }

.chat-card:active { transform: scale(0.985); }

.chat-form, .ask, .confirm { white-space: normal; }
.bubble .hint { margin: var(--space-2) 0 0; color: var(--text-3); font-size: var(--fs-xs); }

/* Ask / confirm cards */
.ask, .confirm {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-2);
}

.bubble > .ask:first-child,
.bubble > .speaker + .ask,
.bubble > .confirm:first-child,
.bubble > .speaker + .confirm { margin-top: 2px; }

.ask-head { display: flex; align-items: flex-start; gap: var(--space-2); }
.ask-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* The picture a question is about, e.g. a new cover to put on an article. */
.ask-image {
  display: block;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-top: var(--space-2);
  border-radius: var(--r-md);
  background: var(--track);
}

.ask-title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: 1.45;
}

.ask-help {
  margin: 2px 0 0;
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.row.user .ask-help, .row.user .ask-desc, .row.user .ask-status { color: var(--on-bubble-out-2); }
.ask.dismissed .ask-title, .ask.dismissed .ask-help { color: var(--text-3); }

.ask-dismiss {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-3);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.ask-dismiss:hover { background: var(--fill); color: var(--text); }
.ask-dismiss svg { width: 14px; height: 14px; }

.ask-options {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm);
}

.ask-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--touch);
  margin: 0;
  padding: var(--space-2) 10px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: start;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.ask-option + .ask-option { box-shadow: inset 0 1px 0 var(--hairline); }
.ask-option:hover:not(:disabled):not(.settled) { background: var(--fill); }
.ask-option.chosen, .ask-option[aria-pressed="true"] { background: var(--accent-tint); }
.ask-option.settled { cursor: default; }
.ask-option.settled .ask-label { color: var(--text-2); }

.ask-key {
  flex: 0 0 auto;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-xs);
  background: var(--fill-strong);
  color: var(--text-3);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  user-select: none;
}

.ask-key.settled { opacity: 0.45; }
.ask-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ask-label { font-size: var(--fs-base); line-height: var(--lh-snug); }
.ask-desc { color: var(--text-2); font-size: var(--fs-xs); line-height: 1.45; }
.ask-mark { flex: 0 0 auto; width: 16px; height: 16px; color: var(--accent); }

.ask-custom {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 2px;
}

.ask-custom textarea {
  flex: 1;
  min-height: 36px;
  max-height: 96px;
  resize: none;
  border: 0;
  background: transparent;
  padding: var(--space-1) 0;
  line-height: 1.5;
  box-shadow: none;
}

.ask-custom textarea:focus { outline: none; border: 0; box-shadow: none; }

.ask-send {
  min-height: 36px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--fill-strong);
  color: var(--text);
  padding: 0 var(--space-4);
  font-weight: var(--fw-semibold);
  transition: transform var(--dur-press) ease-out, opacity var(--dur-fast) var(--ease-out);
}

.ask-send:disabled { opacity: 0.4; }
.ask-send.primary { background: var(--primary); color: var(--on-primary); }
.ask-send:hover:not(:disabled) { opacity: 0.88; }
.ask-send:active:not(:disabled) { transform: scale(var(--press-scale)); }
.ask-foot { display: flex; justify-content: flex-end; }
.ask-status { margin: 0; color: var(--text-3); font-size: var(--fs-xs); }
.confirm-actions, .chat-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.chat-form {
  display: grid;
  gap: var(--space-2);
  margin-top: 10px;
}

.chat-form label { font-size: var(--fs-xs); color: var(--text-2); }
.chat-form textarea { min-height: 72px; resize: vertical; }

.chat-form button {
  min-height: 36px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--fill-strong);
  padding: 0 var(--space-4);
  font-weight: var(--fw-semibold);
}

.site-reminder .bubble { width: min(440px, calc(100% - 46px)); }

.site-connect.compact {
  width: 100%;
  margin: var(--space-3) 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.site-connect .setup-actions { flex-wrap: wrap; }
.site-connect .setup-actions > button {
  min-height: var(--touch);
  border: 0;
  border-radius: var(--r-pill);
  padding: 0 18px;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: var(--fw-semibold);
}
.site-connect .setup-actions > a.setup-test {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.reminder-posts { margin-top: 10px; }

.speaker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.role-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 1px var(--space-2);
  border-radius: var(--r-pill);
  background: var(--fill-strong);
  color: var(--text-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  line-height: 1.6;
}

.row.cluster { margin-top: -4px; }
.avatar-spacer { width: 36px; flex: none; }

.quote {
  display: grid;
  gap: 2px;
  width: 100%;
  margin: 0 0 var(--space-2);
  padding: 6px 10px;
  border: 0;
  border-inline-start: 2px solid var(--faint);
  border-radius: var(--r-sm);
  background: var(--fill);
  color: inherit;
  text-align: start;
}

.quote strong { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text); }
.quote span {
  color: var(--text-2);
  font-size: var(--fs-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mention {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  max-width: 100%;
  margin: 0 1px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--r-xs);
  background: var(--accent-tint);
  color: var(--accent-link);
  font: inherit;
  font-weight: var(--fw-semibold);
  line-height: 1.6;
  vertical-align: baseline;
}

.row.user .mention {
  background: var(--on-bubble-out-fill);
  color: var(--on-bubble-out);
}

.mention .role-label {
  background: var(--accent-tint);
  color: var(--accent-link);
}

.mention:hover { filter: brightness(0.97); }

.stamp {
  display: block;
  margin-top: var(--space-1);
  text-align: end;
  font-size: var(--fs-2xs);
  line-height: 1.2;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.reply-btn {
  width: 32px;
  height: 32px;
  flex: none;
  margin-bottom: 2px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
  color: var(--text-3);
  display: grid;
  place-items: center;
  opacity: 0;
  padding: 0;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-press) ease-out, color var(--dur-fast) var(--ease-out);
}

.row:hover .reply-btn, .reply-btn:focus-visible { opacity: 1; }
.reply-btn svg { width: 15px; height: 15px; }
.reply-btn:hover { color: var(--text); }
.reply-btn:active { transform: scale(0.94); }

.row.flash .bubble { animation: flash-ring 700ms var(--ease-out); }

.typing-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.row.typing-row {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
}

.typing-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  min-height: 36px;
}

.typing-line strong {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text);
}

.typing-line span {
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  color: var(--text-2);
}

.typing-dots { display: inline-flex; align-items: center; margin-inline-start: 2px; }
.typing-dots i { border-radius: var(--r-pill); }

.prose { margin: 0; line-height: 1.7; }

.fields { display: grid; gap: var(--space-2); }
.fields + .fields, .prose + .fields, .fields + .prose { margin-top: var(--space-4); }

.field {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.35em;
  margin: 0;
}

.field dt, .field dd { display: inline; }
.field dt { color: var(--text-3); font-size: var(--fs-sm); }
.field dt::after { content: "  "; }
.field dd { margin: 0; font-variant-numeric: tabular-nums; }

.empty, .pending-thread {
  color: var(--text-3);
  text-align: center;
  margin: 28px var(--space-3);
  font-size: var(--fs-base);
}

/* ==========================================================================
   Composer
   ========================================================================== */

#composer {
  grid-row: 2;
  width: min(var(--content-w), calc(100% - 28px));
  margin: 0 auto var(--space-4);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: end;
  padding: 6px 6px 6px var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

#composer:focus-within {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md), var(--focus-ring);
}

.reply-bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 2px 2px 0;
  padding: 6px var(--space-2);
  border-radius: var(--r-md);
  background: var(--fill);
}

.mention-menu {
  grid-column: 1 / -1;
  display: grid;
  gap: 2px;
  max-height: 240px;
  overflow: auto;
  margin: 2px;
  padding: 6px;
  border-radius: var(--r-lg);
  background: var(--glass);
  border: 1px solid var(--hairline);
  backdrop-filter: var(--blur-overlay);
  -webkit-backdrop-filter: var(--blur-overlay);
  box-shadow: var(--shadow-overlay);
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-base) var(--ease-spring), transform var(--dur-base) var(--ease-spring);
}

@starting-style {
  .mention-menu {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

.mention-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--touch);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: inherit;
  text-align: start;
  padding: 6px var(--space-2);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.mention-option .avatar { width: 28px; height: 28px; }
.mention-copy {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) 6px;
}
.mention-copy strong { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.mention-option.active, .mention-option:hover { background: var(--fill-strong); }

.reply-mark {
  width: 3px;
  align-self: stretch;
  border-radius: var(--r-pill);
  background: var(--accent);
}

.reply-copy { min-width: 0; display: grid; flex: 1; }
.reply-copy strong { font-size: var(--fs-xs); color: var(--accent-link); }
.reply-copy span {
  color: var(--text-2);
  font-size: var(--fs-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#reply-cancel {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-3);
  display: grid;
  place-items: center;
  padding: 0;
}

#reply-cancel svg { width: 14px; height: 14px; }
#reply-cancel:hover { background: var(--fill); color: var(--text); }

#composer textarea {
  resize: none;
  min-height: 40px;
  max-height: 160px;
  border: 0;
  background: transparent;
  padding: var(--space-2) 6px;
  outline: none;
  box-shadow: none;
  line-height: 1.5;
}

#composer textarea:focus { border: 0; box-shadow: none; }

.composer-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

#send {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--primary);
  color: var(--on-primary);
  transition: transform var(--dur-press) ease-out, background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

#send:active:not(:disabled) { transform: scale(0.94); }

#send:disabled {
  background: var(--fill-strong);
  color: var(--text-4);
  opacity: 1;
}

#send:hover:not(:disabled) { opacity: 0.88; }
#send svg { width: 16px; height: 16px; }

#status {
  grid-row: 3;
  width: min(var(--content-w), calc(100% - 32px));
  margin: 0 auto 10px;
  text-align: center;
}

.error { color: var(--danger); }

/* ==========================================================================
   Motion system
   Transform/opacity only. Entrance classes (.arrive, .enter) are added by
   app.js once per new item, so rebuilds never replay them.
   ========================================================================== */

/* Controls & selection feedback */
.member,
.mention-option,
.ask-option,
.chat-form button,
.ask-dismiss,
#reply-cancel,
.quote {
  transition-property: background-color, color, border-color, box-shadow, opacity, transform;
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease-out);
}

.member:active,
.mention-option:active,
.quote:active { transform: scale(0.985); transition-duration: var(--dur-press); }
.ask-option:active:not(:disabled):not(.settled) { background: var(--fill-strong); }
.chat-form button:active:not(:disabled) { transform: scale(var(--press-scale)); }

/* Leaving elements (mention menu, reply bar) must not catch stray clicks. */
[data-leaving] { pointer-events: none; }

/* Messages: fade the row, pop the bubble from its tail corner. */
.row.arrive {
  animation: fade-in var(--dur-base) var(--ease-out) both;
  animation-delay: calc(var(--arrive-i, 0) * var(--stagger));
}

.row.arrive .bubble {
  animation: bubble-in var(--dur-slow) var(--ease-spring) both;
  animation-delay: calc(var(--arrive-i, 0) * var(--stagger));
}

.row.bot .bubble { transform-origin: bottom left; }
.row.user .bubble { transform-origin: bottom right; }
[dir="rtl"] .row.bot .bubble { transform-origin: bottom right; }
[dir="rtl"] .row.user .bubble { transform-origin: bottom left; }

/* Sending: the optimistic bubble stays slightly dimmed until the server confirms. */
.row.pending .bubble { opacity: 0.82; }

/* Typing / thinking */
.typing-rows.enter { animation: fade-in var(--dur-base) var(--ease-out) both; }
.typing-rows.enter .avatar { animation: bubble-in var(--dur-slow) var(--ease-spring) both; }

/* Library cards: subtle stagger for the first few, the rest arrive together. */
.library .post-card { animation: rise-in var(--dur-slow) var(--ease-out) both; }
.library .post-card:nth-child(2) { animation-delay: calc(1 * var(--stagger)); }
.library .post-card:nth-child(3) { animation-delay: calc(2 * var(--stagger)); }
.library .post-card:nth-child(4) { animation-delay: calc(3 * var(--stagger)); }
.library .post-card:nth-child(5) { animation-delay: calc(4 * var(--stagger)); }
.library .post-card:nth-child(6) { animation-delay: calc(5 * var(--stagger)); }
.library .post-card:nth-child(n+7) { animation-delay: calc(6 * var(--stagger)); }
.library > .hint,
.library > .article { animation: fade-in var(--dur-base) var(--ease-out) both; }

/* Loading, empty and error states */
.pending-thread { animation: breathe 1.6s var(--ease-standard) infinite; }
#thread .empty:not(.pending-thread) { animation: fade-in var(--dur-slow) var(--ease-out) both; }

#status {
  transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}

@starting-style {
  #status { opacity: 0; transform: translateY(var(--enter-shift)); }
}

/* Reply bar entrance (exit is handled by app.js) */
.reply-bar {
  transition: opacity var(--dur-base) var(--ease-spring), transform var(--dur-base) var(--ease-spring);
}

@starting-style {
  .reply-bar { opacity: 0; transform: translateY(var(--enter-shift)); }
}

/* Composer & send button */
#composer textarea { caret-color: var(--accent); }

#send svg,
#send::after { grid-area: 1 / 1; }

#send svg { transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }

#send::after {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: var(--r-pill);
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}

#composer.is-sending #send {
  background: var(--primary);
  color: var(--on-primary);
  opacity: 0.85;
}

#composer.is-sending #send svg { opacity: 0; transform: translateY(-4px); }
#composer.is-sending #send::after { opacity: 1; animation: spin 700ms linear infinite; }

/* ==========================================================================
   Bot visual states
   app.js sets data-bot on roster, typing-row and call avatars from real
   activity only. Each state's *static* styling is the reduced-motion
   alternative; animation only modulates it. Transform/opacity only.
   ========================================================================== */

.avatar-wrap[data-bot]::before,
.avatar-wrap[data-bot]::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: var(--r-pill);
  opacity: 0;
}

/* Ring around the avatar */
.avatar-wrap[data-bot]::before {
  inset: var(--ring-gap);
  border: var(--ring-width) solid transparent;
}

/* Status badge (success / error) */
.avatar-wrap[data-bot]::after {
  z-index: 2;
  width: 14px;
  height: 14px;
  bottom: -2px;
  inset-inline-end: -2px;
  -webkit-mask: var(--badge-icon) center / contain no-repeat;
  mask: var(--badge-icon) center / contain no-repeat;
}

/* Presence ping: only on live roster/typing avatars, never on every message avatar. */
:is(#roster, #team-panel) .presence::after,
.typing-row .presence::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: var(--r-pill);
  background: var(--live);
  animation: presence-ping var(--dur-ping) var(--ease-out) infinite;
}

/* idle — barely-there breathing, roster only */
:is(#roster, #team-panel) .avatar-wrap[data-bot="idle"] .avatar {
  animation: bot-breathe var(--dur-breathe) var(--ease-standard) infinite;
}
:is(#roster, #team-panel) .member-row:nth-child(3n) .avatar-wrap[data-bot="idle"] .avatar { animation-delay: -2s; }
:is(#roster, #team-panel) .member-row:nth-child(3n + 1) .avatar-wrap[data-bot="idle"] .avatar { animation-delay: -4s; }

/* listening — restrained audio ring */
.avatar-wrap[data-bot="listening"]::before {
  border-color: var(--accent);
  opacity: 0.5;
  animation: bot-listen var(--dur-listen) var(--ease-out) infinite;
}

/* thinking — faint halo with one orbiting arc */
.avatar-wrap[data-bot="thinking"]::before {
  border-color: var(--accent-tint);
  border-top-color: var(--accent);
  opacity: 1;
  animation: bot-orbit var(--dur-orbit) linear infinite;
}

/* typing — steady ring, gentle nod; dots in the thread wave */
.avatar-wrap[data-bot="typing"]::before {
  border-color: var(--accent);
  opacity: 0.35;
}
.avatar-wrap[data-bot="typing"] .avatar {
  animation: bot-nod var(--beat-fast) var(--ease-standard) infinite;
}

/* responding — controlled active pulse */
.avatar-wrap[data-bot="responding"]::before {
  border-color: var(--accent);
  opacity: 0.55;
  animation: bot-pulse var(--dur-pulse) var(--ease-standard) infinite;
}

/* success — one confirmation ring plus a check badge */
.avatar-wrap[data-bot="success"]::before {
  border-color: var(--live);
  animation: bot-confirm 700ms var(--ease-out) both;
}
.avatar-wrap[data-bot="success"]::after {
  --badge-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' fill-rule='evenodd' d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm3.7 5.3a1 1 0 0 0-1.4 0L7 8.6 5.7 7.3a1 1 0 1 0-1.4 1.4l2 2a1 1 0 0 0 1.4 0l4-4a1 1 0 0 0 0-1.4Z'/></svg>");
  background: var(--live);
  opacity: 1;
  animation: badge-pop var(--dur-base) var(--ease-spring) both;
}

/* error — clear, static, calm: danger ring + badge, no shaking */
.avatar-wrap[data-bot="error"]::before {
  border-color: var(--danger);
  opacity: 0.7;
}
.avatar-wrap[data-bot="error"]::after {
  --badge-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' fill-rule='evenodd' d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm0 3.5a1 1 0 0 0-1 1v4a1 1 0 0 0 2 0v-4a1 1 0 0 0-1-1Zm0 7a1.1 1.1 0 1 0 0 2.2 1.1 1.1 0 0 0 0-2.2Z'/></svg>");
  background: var(--danger);
  opacity: 1;
  animation: badge-pop var(--dur-base) var(--ease-spring) both;
}

.avatar-wrap[data-bot="success"] .presence,
.avatar-wrap[data-bot="error"] .presence,
.avatar-wrap[data-bot="offline"] .presence { display: none; }

/* offline — static and muted */
.avatar-wrap[data-bot="offline"] .avatar {
  opacity: 0.45;
  filter: grayscale(1);
}

.member[data-bot="offline"] .member-copy strong { color: var(--text-3); }
.member[data-bot="error"] .member-status { color: var(--danger); }

/* Only animate what is on screen, and nothing while the tab is hidden. */
.avatar-wrap[data-offscreen]::before,
.avatar-wrap[data-offscreen] .avatar,
.avatar-wrap[data-offscreen] .presence::after,
.typing-rows[data-offscreen] *,
.typing-rows[data-offscreen] *::before,
.typing-rows[data-offscreen] *::after,
:root[data-page-hidden] *,
:root[data-page-hidden] *::before,
:root[data-page-hidden] *::after { animation-play-state: paused !important; }

/* Typing indicator, more expressive: accent wave instead of a blink. */
.typing-dots { gap: 4px; }
.typing-dots i {
  width: 6px;
  height: 6px;
  background: var(--accent);
  animation: typing-wave var(--beat-fast) var(--ease-standard) infinite;
}
.typing-dots i:nth-child(2) { animation-delay: 0.14s; }
.typing-dots i:nth-child(3) { animation-delay: 0.28s; }

/* ==========================================================================
   Interaction polish — focus, disabled
   ========================================================================== */

/* Items inside scrolling/clipping containers draw their focus ring inside,
   so it is never cut off by overflow. */
.member:focus-visible,
.mention-option:focus-visible,
.ask-option:focus-visible,
.post-open:focus-visible,
.chat-card:focus-visible {
  outline-offset: -2px;
}

input:disabled,
select:disabled,
#composer:not(.is-sending) textarea:disabled { opacity: 0.55; cursor: not-allowed; }

.setup-test:disabled,
button.danger:disabled,
.property-picker button:disabled,
.chat-form button:disabled,
.confirm-actions button:disabled { opacity: 0.45; cursor: default; }

/* ==========================================================================
   Setup confirm & launch journey
   ========================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.site-tile {
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: 1;
}

.setup-eyebrow {
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.setup-site {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.setup-host {
  min-width: 0;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.setup-preview {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  margin: calc(var(--space-2) * -1) 0 0;
}

.setup-preview .site-tile {
  width: 22px;
  height: 22px;
  margin-inline-end: 2px;
  border-radius: var(--r-xs);
  box-shadow: none;
  font-size: var(--fs-2xs);
}

.field-error {
  margin: 0;
  color: var(--danger);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

input[aria-invalid="true"] { border-color: var(--danger); }

.setup button[type="submit"].is-busy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.setup button[type="submit"].is-busy:disabled { opacity: 0.85; cursor: progress; }

.setup button[type="submit"].is-busy::before,
.journey-primary.is-busy::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  animation: spin 0.8s linear infinite;
}

/* The launch journey is a card in the chat: live while it runs, then a
   one-line summary at the top of the thread. */
#journey {
  flex: none;
  align-self: flex-start;
  width: min(620px, 100%);
  border: 1px solid var(--bubble-border);
  border-radius: var(--r-xl);
  background: var(--bubble-in);
  box-shadow: var(--shadow-sm);
  animation: card-in var(--dur-slow) var(--ease-spring) both;
}

.journey-inner {
  width: 100%;
  padding: var(--space-5);
  display: grid;
  gap: var(--space-5);
}

#journey.is-summary {
  align-self: center;
  width: min(520px, 100%);
  box-shadow: none;
  animation: none;
}

#journey.is-summary .journey-inner { padding: var(--space-3) var(--space-4); gap: var(--space-4); }
#journey.is-summary .journey-logo { width: 36px; height: 36px; font-size: 16px; border-radius: var(--r-md); }
#journey.is-summary .journey-heading h2 { font-size: var(--fs-base); }
#journey.is-summary :is(.journey-finale, .journey-foot) { display: none; }
#journey[data-done]:not(.is-open) :is(.journey-bar, .journey-steps) { display: none; }
#journey[data-done]:not(.is-summary) .journey-toggle { align-self: flex-start; }

.journey-cover-slot:empty { display: none; }

.journey-cover {
  display: block;
  width: min(420px, 100%);
  aspect-ratio: 3 / 2;
  margin-inline: auto;
  border-radius: var(--r-lg);
  object-fit: cover;
  background: var(--track);
}

.journey-toggle {
  margin-inline-start: auto;
  flex: none;
  min-height: 32px;
  padding: 0 var(--space-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  cursor: pointer;
}

.journey-toggle:hover { background: var(--fill); color: var(--text); }
.journey-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.journey-hero {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.journey-logo {
  width: 48px;
  height: 48px;
  border-radius: var(--r-lg);
  font-size: 21px;
}

.journey-logo.has-logo { background: var(--logo-bg); }
.journey-logo img { width: 72%; height: 72%; object-fit: contain; }

.journey-heading { min-width: 0; display: grid; gap: 2px; }

.journey-eyebrow {
  margin: 0;
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}

.journey-heading h2 {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.journey-heading h2:focus { outline: none; }
.journey-heading h2:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--r-xs); }

.journey-sub {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--text-3);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

/* The clock is an LTR island, so its separator sits on its right, next to the host. */
.journey-clock:not(:empty)::after {
  content: "·";
  margin-inline-start: var(--space-2);
}

/* Five segments, one per step; the active one carries a slow sweep. */
.journey-bar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.journey-bar span {
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--track);
}

.journey-bar span::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-slow) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

.journey-bar span[data-state="done"]::after { transform: scaleX(1); }
.journey-bar span[data-state="error"]::after { transform: scaleX(1); background: var(--danger); }

.journey-bar span[data-state="active"]::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 45%;
  border-radius: inherit;
  background: linear-gradient(to left, transparent, var(--text-3), transparent);
  animation: journey-sweep calc(var(--beat) * 1.2) var(--ease-standard) infinite;
}

.journey-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.journey-step {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--space-3);
  padding-bottom: var(--space-5);
}

.journey-step:last-child { padding-bottom: 0; }

.journey-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 38px;
  bottom: 6px;
  inset-inline-start: 15px;
  width: 2px;
  border-radius: 2px;
  background: var(--track);
  transition: background-color var(--dur-slow) var(--ease-out);
}

.journey-step[data-state="done"]:not(:last-child)::before { background: var(--primary); }

.journey-mark {
  position: relative;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--faint);
  background: var(--bg);
  color: var(--text-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.journey-num { transition: opacity var(--dur-fast) var(--ease-out); }

.journey-mark svg {
  position: absolute;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.journey-mark svg path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--dur-slow) var(--ease-out) 80ms;
}

.journey-step[data-state="active"] .journey-mark { border-color: var(--text); color: var(--text); }

.journey-step[data-state="active"] .journey-mark::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 50%;
  border: 1.5px solid var(--text-2);
  animation: journey-ping var(--dur-ping) var(--ease-out) infinite;
}

.journey-step[data-state="done"] .journey-mark {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

.journey-step[data-state="done"] .journey-num { opacity: 0; }
.journey-step[data-state="done"] .journey-mark svg path { stroke-dashoffset: 0; }

.journey-step[data-state="error"] .journey-mark { border-color: var(--danger); color: var(--danger); }
.journey-step[data-state="error"] .journey-num { font-size: 0; }
.journey-step[data-state="error"] .journey-num::before { content: "!"; font-size: var(--fs-md); font-weight: var(--fw-bold); }

.journey-body {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
  padding-top: 5px;
}

.journey-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--space-2);
}

.journey-head strong {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  transition: color var(--dur-base) var(--ease-out);
}

.journey-step[data-state="waiting"] .journey-head strong { color: var(--text-3); font-weight: var(--fw-medium); }

.journey-hint {
  color: var(--text-3);
  font-size: var(--fs-xs);
}

.journey-line {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
}

.journey-line:has(> .journey-face[hidden]):has(> .journey-text:empty) { display: none; }
.journey-text { min-width: 0; overflow-wrap: anywhere; }
.journey-step[data-state="active"] .journey-text { color: var(--text-body); }
.journey-step[data-state="error"] .journey-text { color: var(--danger); }

.journey-face {
  flex: none;
  width: 26px;
  height: 26px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--fill-strong);
}

.journey-face > :is(svg, img) { display: block; width: 100%; height: 100%; }

.journey-detail { min-width: 0; margin-top: var(--space-2); }
.journey-detail:empty { display: none; }
.journey-detail > .setup-test { justify-self: start; }

.journey-meter {
  display: block;
  max-width: 320px;
  height: 4px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--track);
}

.journey-meter i {
  display: block;
  height: 100%;
  width: calc(var(--value, 0) * 100%);
  border-radius: inherit;
  background: var(--text-2);
  transition: width var(--dur-slow) var(--ease-out);
}

.journey-ticker {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.journey-ticker li {
  overflow: hidden;
  color: var(--text-3);
  font-size: var(--fs-xs);
  line-height: 1.7;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.journey-ticker li::before { content: "— "; color: var(--text-4); }
.journey-step[data-state="active"] .journey-ticker li:last-child { color: var(--text-2); }

.journey-brief {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  animation: rise-in var(--dur-slow) var(--ease-out) both;
}

.journey-brief p { margin: 0; }

.journey-brief.compact {
  padding: var(--space-3) var(--space-4);
  box-shadow: none;
  animation: none;
}

.journey-brief.compact .journey-summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.75;
}

.journey-brief.compact .journey-chip { animation: none; }

.journey-summary {
  color: var(--text-body);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
}

.journey-audience {
  color: var(--text-body);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

.journey-label {
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}

.journey-audience .journey-label { margin-inline-end: var(--space-2); }
.journey-brief > .journey-label { margin-top: var(--space-2); }

.journey-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.journey-chip {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--fill);
  color: var(--text-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.6;
  animation: badge-pop var(--dur-base) var(--ease-spring) both;
  animation-delay: calc(var(--dur-base) + var(--i, 0) * var(--stagger));
}

.journey-chips.pillars .journey-chip {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--border);
}

.journey-team {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.journey-member {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface);
}

.journey-member .journey-face { width: 36px; height: 36px; }
.journey-member.is-pending .journey-face { animation: breathe var(--dur-breathe) ease-in-out infinite; }

.journey-member-copy { min-width: 0; display: grid; gap: 2px; }

.journey-member-copy strong,
.journey-member-copy span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.journey-member-copy strong { font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.journey-member-copy span { color: var(--text-3); font-size: var(--fs-xs); line-height: var(--lh-snug); }

.journey-member-copy strong:empty::before,
.journey-member-copy span:empty::before {
  content: "";
  display: block;
  width: 72px;
  height: 8px;
  margin-block: 4px;
  border-radius: var(--r-pill);
  background: var(--fill-strong);
}

.journey-member-copy span:empty::before { width: 48px; height: 6px; }

.journey-draft {
  max-width: 420px;
  display: grid;
  gap: 9px;
  padding: var(--space-4);
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
}

.journey-draft i {
  display: block;
  height: 8px;
  border-radius: var(--r-pill);
  background: linear-gradient(to left, var(--fill-strong) 30%, var(--fill) 50%, var(--fill-strong) 70%);
  background-size: 300% 100%;
  animation: journey-shimmer calc(var(--beat) * 1.2) linear infinite;
}

.journey-draft i:first-child { width: 68%; height: 12px; margin-bottom: 4px; }
.journey-draft i:nth-child(3) { width: 90%; }
.journey-draft i:last-child { width: 54%; }

.journey-finale {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  overflow: hidden;
  padding: var(--space-8) var(--space-5) var(--space-6);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  text-align: center;
  animation: rise-in var(--dur-slow) var(--ease-out) both;
}

.journey-finale::before {
  content: "";
  position: absolute;
  inset: -60% -20% auto;
  height: 140%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--live) 16%, transparent), transparent);
  pointer-events: none;
}

.journey-finale > * { position: relative; }
.journey-finale > strong { font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: 1.35; }
.journey-finale p { margin: 0; }

.journey-post {
  max-width: 440px;
  color: var(--text-body);
  font-size: var(--fs-md);
  line-height: 1.7;
}

.journey-burst {
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-2);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  animation: badge-pop var(--dur-slow) var(--ease-spring) both;
}

.journey-burst svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.journey-burst svg path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: journey-draw var(--dur-slow) var(--ease-out) 260ms forwards;
}

.journey-burst i {
  --angle: calc(var(--i, 0) * 45deg);
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px;
  border-radius: 50%;
  background: var(--speaker-1);
  opacity: 0;
  animation: journey-spark 900ms var(--ease-out) 300ms both;
}

.journey-burst i:nth-child(3n + 2) { background: var(--speaker-3); }
.journey-burst i:nth-child(3n) { background: var(--speaker-5); }

.journey-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.journey-primary {
  min-height: var(--touch);
  padding: 0 20px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: var(--on-primary);
  font-weight: var(--fw-semibold);
  transition: transform var(--dur-press) ease-out, opacity var(--dur-fast) var(--ease-out);
}

.journey-primary:hover { opacity: 0.88; }
.journey-primary:active { transform: scale(var(--press-scale)); }

.journey-foot {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
}

.journey-foot .hint { margin: 0; line-height: 1.7; }


@keyframes journey-ping {
  0% { transform: scale(1); opacity: 0.6; }
  80%, 100% { transform: scale(1.45); opacity: 0; }
}

@keyframes journey-sweep {
  from { transform: translateX(100%); }
  to { transform: translateX(-230%); }
}

@keyframes journey-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -200% 0; }
}

@keyframes journey-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes journey-spark {
  0% { opacity: 1; transform: rotate(var(--angle)) translateY(0) scale(1); }
  100% { opacity: 0; transform: rotate(var(--angle)) translateY(-52px) scale(0.4); }
}

/* ==========================================================================
   Keyframes
   ========================================================================== */

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes bubble-in {
  from { transform: scale(0.94); }
  to { transform: none; }
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@keyframes spin {
  to { transform: rotate(1turn); }
}

@keyframes presence-ping {
  0% { transform: scale(1); opacity: 0.55; }
  70%, 100% { transform: scale(2.2); opacity: 0; }
}

@keyframes bot-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}

@keyframes bot-listen {
  0% { transform: scale(0.96); opacity: 0.7; }
  100% { transform: scale(1.32); opacity: 0; }
}

@keyframes bot-orbit {
  to { transform: rotate(1turn); }
}

@keyframes bot-nod {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-1.5px); }
}

@keyframes bot-pulse {
  0%, 100% { transform: scale(1); opacity: 0.35; }
  50% { transform: scale(1.08); opacity: 0.85; }
}

@keyframes bot-confirm {
  from { transform: scale(0.9); opacity: 1; }
  to { transform: scale(1.3); opacity: 0; }
}

@keyframes badge-pop {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes typing-wave {
  0%, 60%, 100% { transform: translateY(0) scale(1); opacity: 0.35; }
  30% { transform: translateY(-3px) scale(1.2); opacity: 1; }
}

@keyframes flash-ring {
  0% { box-shadow: 0 0 0 0 transparent; }
  30% { box-shadow: 0 0 0 3px var(--accent-tint); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ==========================================================================
   Final visual refinement
   Presentation only: quieter chrome, fewer nested boxes, one type rhythm.
   ========================================================================== */

/* Avatars: clip the image itself too, so portraits are round everywhere. */
.avatar img,
.avatar svg { border-radius: inherit; }

/* Sidebar — "new project" as a quiet filled control instead of an outlined box. */
.sidebar-brand { font-size: var(--fs-lg); padding-bottom: var(--space-4); }

#nav {
  background: var(--fill);
  border-color: transparent;
}

#nav:hover { background: var(--fill-strong); border-color: transparent; }


/* Role labels read as metadata, not as chips — removes pill-inside-pill clutter. */
.role-label {
  padding: 0;
  background: transparent;
  color: var(--text-3);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-regular);
}

.speaker .role-label::before,
.mention .role-label::before {
  content: "·";
  margin-inline-end: var(--space-1);
  opacity: 0.7;
}

.mention .role-label { background: transparent; color: inherit; opacity: 0.75; }
.row.user .mention .role-label { color: inherit; }

/* Roster */
.roster-label { margin-bottom: var(--space-2); }
.member { padding-block: var(--space-2); }
.member-copy { gap: 0 6px; }
.member-status { margin-top: 1px; }

/* Header */
#title { font-size: var(--fs-md); }
#settings { font-weight: var(--fw-medium); }

/* Report bar aligns with the thread gutter */
#report { padding-inline: var(--space-5); }
.report-row strong { color: var(--text-3); }

/* Chat — slightly larger reading size, calmer metadata */
.bubble { font-size: var(--fs-md); line-height: 1.75; padding: 10px var(--space-4) var(--space-2); }
.speaker { margin-bottom: 2px; }
.stamp { margin-top: 2px; }
.row.user .stamp { color: var(--on-bubble-out-2); }
#thread { padding-inline: var(--space-5); gap: 10px; }
.row.cluster { margin-top: -6px; }
.day-chip, .unread-mark { font-weight: var(--fw-regular); }

/* Composer placeholder: readable on dark surfaces */
#composer textarea::placeholder { color: var(--text-3); }

/* Post cards — no empty band above text-only cards, no forced height */
.library:has(.post-card) { grid-auto-rows: max-content; }
.post-card { min-height: 0; gap: var(--space-2); }
.post-card:not(:has(img)) { padding-top: var(--space-4); }
.post-card .post-link { color: var(--text-3); font-size: var(--fs-xs); text-decoration: none; }
.post-card .post-link:hover { color: var(--accent-link); text-decoration: underline; }

/* Article view — comfortable measure and heading rhythm */
.article { padding-inline: 0; }
.article h2 { font-size: 22px; margin-top: 1.4em; }
.article h3 { font-size: 18px; margin-top: 1.3em; }
.article table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  margin: 0.7em 0;
  border-collapse: collapse;
  font-size: var(--fs-md);
  color: var(--text-body);
}
.article th, .article td {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  text-align: start;
  vertical-align: top;
}
.article th { background: var(--fill); font-weight: var(--fw-semibold); color: var(--text); }
.library > .post-link {
  align-self: flex-start;
  color: var(--text-3);
  font-size: var(--fs-sm);
  direction: ltr;
}

/* Settings — sections as soft fills inside the panel instead of boxes in a box */
.setup { gap: var(--space-5); }
.integration {
  background: var(--fill);
  border-color: transparent;
  border-radius: var(--r-lg);
}
.integration > strong { font-size: var(--fs-base); }
.setup > .hint { color: var(--text-3); }
.opt-card { background: var(--surface); border-color: var(--hairline); }

/* Overlays — one elevation language */
.mention-menu { border-color: var(--border); }

/* Bot states — one motion language. The green presence dot means "live";
   the ring says what kind of activity, so the dot stops pinging once a
   ring is shown (less competing motion, fewer running animations). */
.avatar-wrap[data-bot="listening"] .presence::after,
.avatar-wrap[data-bot="thinking"] .presence::after,
.avatar-wrap[data-bot="typing"] .presence::after,
.avatar-wrap[data-bot="responding"] .presence::after { animation: none; opacity: 0; }

/* Offline / error text in the roster gets the same weight as live labels. */
.member[data-bot="offline"] .member-status,
.member[data-bot="error"] .member-status { font-weight: var(--fw-medium); }

/* ==========================================================================
   Engagement moments
   One-shot reactions only — no new infinite loops. Rings (::before) stay the
   state signal; one-shots act on the avatar body or on content.
   ========================================================================== */

/* 1 — Send acknowledgement: a single ~400ms nod on the addressed avatar.
   The avatar's own ambient loop (breathing / typing nod) yields for that
   moment so only one body motion plays; the state ring keeps running. */
.avatar-wrap[data-ack] { animation: bot-ack var(--dur-ack) var(--ease-spring); }
.avatar-wrap[data-ack] .avatar { animation-play-state: paused; }

/* 2 — Work handoff (hooks only; set by future logic). The ring softens and
   drifts toward the next teammate; the receiver's ring settles in once.
   Direction follows the roster axis: down on desktop, inline-end on mobile. */
.avatar-wrap { --handoff-x: 0px; --handoff-y: 6px; }

.avatar-wrap[data-handoff="out"]::before {
  animation: bot-handoff-out var(--dur-slow) var(--ease-standard) forwards;
}

.avatar-wrap[data-handoff="in"]::before {
  border-color: var(--accent);
  opacity: 0.55;
  animation: bot-handoff-in var(--dur-slow) var(--ease-spring) both;
}

/* 3 — Result arrival: rise 8px, fade in, settle from a lifted shadow. One-time:
   post cards render once per library view; cards inside messages only animate
   inside rows that are already marked .arrive. */
.library .post-card { animation-name: result-in; }
.article-cover { animation: result-in var(--dur-slow) var(--ease-out) both; }

.row.arrive .chat-card,
.row.arrive .opt-card,
.chat-card.result-arrive,
.opt-card.result-arrive {
  animation: result-in var(--dur-slow) var(--ease-out) both;
  animation-delay: calc(var(--arrive-i, 0) * var(--stagger) + var(--dur-fast));
}

/* 4 — Readable activity text: the new label inks in while the previous one
   (data-prev) fades out on top of it. Only color/opacity; ~180ms. */
.member-status { position: relative; }

.member-status[data-swap] { animation: status-in var(--dur-status) var(--ease-standard) both; }

.member-status[data-swap][data-prev]::after {
  content: attr(data-prev);
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  white-space: nowrap;
  color: var(--text-3);
  pointer-events: none;
  animation: status-out var(--dur-status) var(--ease-standard) both;
}

/* Page transitions slide #view / panes by 12px; clip at the layout boxes so a
   pane mid-slide can never create document-level overflow (RTL overflow is
   scrollable toward the left and could offset the whole page). overflow:clip
   does not create a scroll container, so inner scrolling is unaffected. */
.shell,
.workspace { overflow: clip; }

/* 5 — Jump to the latest line: a round button floating above the composer at
   the inline end, with the count of unread lines below the owner's view. */
#composer { position: relative; }

.jump-latest {
  position: absolute;
  z-index: 5;
  bottom: calc(100% + var(--space-3));
  inset-inline-end: var(--space-3);
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-2);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition:
    opacity var(--dur-base) var(--ease-standard),
    transform var(--dur-base) var(--ease-spring),
    background-color var(--dur-fast) var(--ease-out);
}

.jump-latest::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M3.5 6l4.5 4.5L12.5 6'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M3.5 6l4.5 4.5L12.5 6'/></svg>") center / contain no-repeat;
}

.jump-count {
  position: absolute;
  top: -8px;
  left: 50%;
  translate: -50% 0;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border: 2px solid var(--surface);
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 16px;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
}

.jump-latest:hover { background: var(--hover); color: var(--text); }
.jump-latest:active { transform: scale(var(--press-scale)); transition-duration: var(--dur-press); }
.jump-latest:focus-visible { outline-offset: 2px; }

@starting-style {
  .jump-latest { opacity: 0; transform: translateY(var(--enter-shift)); }
}

@media (max-width: 760px) {
  /* Mobile roster is a horizontal strip: hand off along the inline axis. */
  :is(#roster, #team-panel) .avatar-wrap { --handoff-x: 6px; --handoff-y: 0px; }
  [dir="rtl"] :is(#roster, #team-panel) .avatar-wrap { --handoff-x: -6px; }
}

@keyframes bot-ack {
  0% { transform: none; }
  35% { transform: translateY(-2px) scale(1.06); }
  100% { transform: none; }
}

@keyframes bot-handoff-out {
  to { opacity: 0.18; transform: translate(var(--handoff-x), var(--handoff-y)) scale(0.9); }
}

@keyframes bot-handoff-in {
  from { opacity: 0; transform: scale(1.22); }
}

@keyframes result-in {
  from { opacity: 0; transform: translateY(8px); box-shadow: var(--shadow-lg); }
}

@keyframes status-in {
  from { color: transparent; }
}

@keyframes status-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* ==========================================================================
   Facial motion
   Targets inline portrait parts marked [data-part] by the avatar pipeline.
   Scope: roster avatars only — never #thread history.
   Missing parts match nothing. Transform only; parts pivot on their own box.
   The ::before activity ring is untouched; no new rings or body loops.
   ========================================================================== */

/* Transforms on these parts are screen pixels, not viewBox units.
   --face-px is one rendered pixel on the 36px roster avatar. */
:is(#roster, #team-panel) .avatar-wrap { --face-px: 1px; --face-tilt: -2deg; }
/* Tilt toward the conversation: the thread sits on the inline-start side. */
[dir="rtl"] :is(#roster, #team-panel) .avatar-wrap { --face-tilt: 2deg; }

:is(#roster, #team-panel) .avatar-wrap :is(
  [data-part="head"], [data-part="hair"], [data-part="eyes"], [data-part="eyebrows"],
  [data-part="mouth"], [data-part="nose"], [data-part="glasses"], [data-part="beard"],
  [data-part="freckles"], [data-part="earrings"], [data-part="hairAccessories"]
) {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-standard);
}

/* The whole portrait (only when it is an inline, part-marked SVG) carries the
   listening tilt, so head, hair and features stay aligned. It rotates inside
   the round clip and never changes the avatar's layout size. */
:is(#roster, #team-panel) .avatar-wrap .avatar > svg:has([data-part]) {
  transform-origin: 50% 50%;
  transition: transform var(--dur-base) var(--ease-standard);
}

/* The lid sits inside the eye group, so a blink can close the eyes while a
   pose or glance on [data-part="eyes"] stays in place. */
:is(#roster, #team-panel) .avatar-wrap [data-lid] {
  transform-box: fill-box;
  transform-origin: center;
}

/* idle — app.js looks aside for a moment, on an irregular timer. */
:is(#roster, #team-panel) .avatar-wrap[data-bot="idle"][data-glance="l"] [data-part="eyes"] {
  transform: translateX(calc(var(--face-px) * -2));
}
:is(#roster, #team-panel) .avatar-wrap[data-bot="idle"][data-glance="r"] [data-part="eyes"] {
  transform: translateX(calc(var(--face-px) * 2));
}

/* listening — eyes open a touch, head tilted 2° toward the conversation. Static pose. */
:is(#roster, #team-panel) .avatar-wrap[data-bot="listening"] [data-part="eyes"] { transform: scaleY(1.08); }
:is(#roster, #team-panel) .avatar-wrap[data-bot="listening"] .avatar > svg:has([data-part]) { transform: rotate(var(--face-tilt)); }

/* thinking — gaze and brows lift slightly. Static pose. */
:is(#roster, #team-panel) .avatar-wrap[data-bot="thinking"] [data-part="eyes"] { transform: translateY(calc(var(--face-px) * -0.8)); }
:is(#roster, #team-panel) .avatar-wrap[data-bot="thinking"] [data-part="eyebrows"] { transform: translateY(calc(var(--face-px) * -1.2)); }

/* typing — intentionally nothing: the existing avatar nod is the only motion. */

/* responding — mouth keeps the speech cycle until the state ends. */
:is(#roster, #team-panel) .avatar-wrap[data-bot="responding"] [data-part="mouth"] {
  animation: face-speak var(--beat-fast) var(--ease-standard) infinite;
}

/* A blink is one 150ms close, fired on an irregular timer during idle,
   listening and thinking, and once on success. The lid animates, not the pose. */
:is(#roster, #team-panel) .avatar-wrap[data-blink] [data-lid],
:is(#roster, #team-panel) .avatar-wrap[data-bot="success"] [data-lid] {
  animation: face-blink-once 150ms linear 1;
}

/* error — brows settle 1px lower once and stay. No shake. */
:is(#roster, #team-panel) .avatar-wrap[data-bot="error"] [data-part="eyebrows"] { transform: translateY(var(--face-px)); }

/* offline — no facial rules: the existing muted treatment is the whole state. */

/* The send acknowledgement nod and off-screen avatars pause facial motion. */
:is(#roster, #team-panel) .avatar-wrap[data-ack] :is([data-part], [data-lid]),
:is(#roster, #team-panel) .avatar-wrap[data-offscreen] :is([data-part], [data-lid]) { animation-play-state: paused; }

@keyframes face-blink-once {
  0%, 100% { transform: none; }
  50% { transform: scaleY(0.08); }
}

@keyframes face-speak {
  0%, 40%, 80%, 100% { transform: scaleY(1); }
  20%, 60% { transform: scaleY(0.92); }
}

/* Reduced motion: the resting face — no blink, pose, tilt, glance or speech. */
@media (prefers-reduced-motion: reduce) {
  :is(#roster, #team-panel) .avatar-wrap :is([data-part], [data-lid]),
  :is(#roster, #team-panel) .avatar-wrap .avatar > svg:has([data-part]) {
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   Team colors
   The landing's grammar: each member keeps one pastel (app.js sets
   data-tone 1–6 from the name) across their dot, chip, row and tile.
   Integrations and statuses borrow the team color of the work they stand for.
   ========================================================================== */

[data-tone="1"] { --tone: var(--team-1); --tone-tint: var(--team-1-tint); --tone-ink: var(--speaker-1); }
[data-tone="2"] { --tone: var(--team-2); --tone-tint: var(--team-2-tint); --tone-ink: var(--speaker-2); }
[data-tone="3"] { --tone: var(--team-3); --tone-tint: var(--team-3-tint); --tone-ink: var(--speaker-3); }
[data-tone="4"] { --tone: var(--team-4); --tone-tint: var(--team-4-tint); --tone-ink: var(--speaker-4); }
[data-tone="5"] { --tone: var(--team-5); --tone-tint: var(--team-5-tint); --tone-ink: var(--speaker-5); }
[data-tone="6"] { --tone: var(--team-6); --tone-tint: var(--team-6-tint); --tone-ink: var(--speaker-6); }

/* Speaker: name in its ink, led by a dot in its pastel. */
.speaker[data-tone] { color: var(--tone-ink); }
.speaker[data-tone]::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tone);
}

/* Mentions wear the named member's tint; on the owner's dark bubble, the pastel itself. */
.mention[data-tone] { background: var(--tone-tint); color: var(--tone-ink); }
.row.user .mention[data-tone] { background: var(--on-bubble-out-fill); color: var(--tone); }
.mention-option[data-tone]:hover,
.mention-option[data-tone].active { background: var(--tone-tint); }

/* Roster: the open conversation is filled with its member's pastel, like a landing tab. */
.member[data-tone]:not(.active):hover { background: var(--tone-tint); }
.member.active[data-tone] { background: color-mix(in srgb, var(--tone) var(--pick-strength), transparent); }
.member.active[data-tone] .member-copy strong,
.member.active[data-tone] .member-note,
.member.active[data-tone] .member-status,
.member.active[data-tone] .role-label { color: var(--on-pick); }

/* Sites without a logo: their initial on a pastel, like the landing's faces. */
.site-tile[data-tone]:not(.has-logo) {
  background: var(--tone);
  border-color: transparent;
  color: var(--on-team);
}


/* Social team, while off: a soft pink card around its invitation. */
.roster-off {
  padding: var(--space-3);
  border-radius: var(--r-md);
  background: var(--team-4-tint);
}

.roster-off-action { background: var(--surface); border-color: transparent; box-shadow: var(--shadow-sm); }
.roster-off-action:hover { background: var(--surface); box-shadow: var(--shadow-md); }

/* Project status: a tag in the color of what the team is doing. */
.report-row strong[data-status] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: var(--team-1-tint);
  color: var(--speaker-1);
  font-weight: var(--fw-semibold);
}

.report-row strong[data-status="producing"] { background: var(--team-3-tint); color: var(--speaker-3); }
.report-row strong[data-status="producing"]::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live);
}
.report-row strong[data-status="error"] { background: var(--danger-tint); color: var(--danger); }

/* Posts are the publishing desk's yellow. */
.posts-open { background: var(--team-6-tint); border-color: transparent; color: var(--speaker-6); font-weight: var(--fw-semibold); }
.posts-open:hover { background: var(--team-6); border-color: transparent; color: var(--on-team); }

/* Settings: WordPress publishes (yellow), Google searches (blue), social is art (pink).
   Each card carries the landing's dotted corner in its own pastel. */
.integration[data-tone] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--tone-tint);
}

.integration[data-tone]::after {
  content: "";
  position: absolute;
  inset-inline-end: -56px;
  bottom: -56px;
  z-index: -1;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background-image: radial-gradient(color-mix(in srgb, var(--tone) var(--dots-strength), transparent) 1.4px, transparent 1.8px);
  background-size: 8px 8px;
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%);
  mask-image: radial-gradient(circle, #000 30%, transparent 70%);
  pointer-events: none;
}

.integration[data-tone] input,
.integration[data-tone] textarea { background: var(--surface); }

/* Launch journey: the step in progress is the editor's, as in the landing's film. */
.journey-step[data-state="active"] .journey-mark {
  border-color: var(--speaker-1);
  background: var(--team-1-tint);
  color: var(--speaker-1);
}
.journey-step[data-state="active"] .journey-mark::after { border-color: var(--team-1); }

/* Greeting: the team's colors, one dot each, above the hello. */
.greeting::before {
  content: "";
  width: 74px;
  height: 14px;
  background:
    radial-gradient(circle at 7px 7px, var(--team-1) 6px, transparent 6.5px),
    radial-gradient(circle at 27px 7px, var(--team-2) 6px, transparent 6.5px),
    radial-gradient(circle at 47px 7px, var(--team-3) 6px, transparent 6.5px),
    radial-gradient(circle at 67px 7px, var(--team-6) 6px, transparent 6.5px);
}

/* ==========================================================================
   Responsive & preference queries
   ========================================================================== */

@media (hover: none) {
  .reply-btn { opacity: 0.9; }
  .post-card:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--hairline); }
}

@media (max-width: 760px) {
  :root { --chrome: calc(52px + env(safe-area-inset-top)); }

  .shell {
    display: block;
    height: 100%;
    overflow: hidden;
  }

  .sidebar,
  .workspace {
    height: 100%;
    min-height: 0;
  }

  body[data-mode="list"] .workspace { display: none; }
  body:not([data-mode="list"]) .sidebar { display: none; }

  .sidebar {
    height: 100%;
    max-height: none;
    border: 0;
    background: var(--bg) var(--texture);
    padding: calc(12px + env(safe-area-inset-top)) var(--space-4) max(16px, env(safe-area-inset-bottom));
  }

  body[data-mode="list"] .sidebar-brand {
    font-size: 32px;
    font-weight: var(--fw-bold);
    line-height: 1.15;
    padding: var(--space-2) 6px var(--space-4);
  }

  body[data-mode="list"] .sidebar-brand img {
    width: 28px;
    height: 36px;
  }

  .feed { gap: var(--space-2); }
  .feed-open { font-size: var(--fs-base); }

  #back { display: grid; }
  body[data-mode="list"] #back { display: none; }

  header { padding-top: env(safe-area-inset-top); }

  .workspace:has(#view.project) { grid-template-columns: 1fr; }

  .workspace:has(#view.project) > #composer,
  .workspace:has(#view.project) > #status {
    grid-column: 1;
    margin-inline: var(--space-3);
  }

  .stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  #roster {
    grid-column: 1;
    grid-row: 1;
    flex-direction: row;
    overflow: auto hidden;
    border-inline-start: 0;
    border-bottom: 1px solid var(--hairline);
    background: transparent;
    padding: var(--space-2) 10px;
    gap: var(--space-1);
  }

  #roster .presence { border-color: var(--bg); }

  .roster-label { display: none; }
  /* In the strip a member is a face, a name and what they are doing now. */
  #roster .member-duty { display: none; }
  .member { width: auto; min-width: 168px; }
  .member-row { flex: none; }
  .roster-section {
    flex-direction: row;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    padding: 0 0 0 0;
    padding-inline-start: var(--space-2);
    border-top: 0;
    border-inline-start: 1px solid var(--hairline);
  }
  .roster-off { margin: 0; padding: 0; background: transparent; }
  .roster-off-action,
  .roster-off-action:hover { background: var(--team-4-tint); box-shadow: none; }
  .roster-off p { display: none; }
  .roster-off-action { white-space: nowrap; }

  #report { grid-row: 2; }
  #thread { grid-row: 3; }
  .library { grid-row: 2 / span 2; }

  .greeting h1 { font-size: 34px; }

  #composer {
    width: calc(100% - 20px);
    margin-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .journey-inner { padding: var(--space-4) var(--space-4) var(--space-8); gap: var(--space-5); }
  .journey-hero { gap: var(--space-3); }
  .journey-logo { width: 52px; height: 52px; }
  .journey-bar {
    position: sticky;
    top: 0;
    z-index: 1;
    margin-block: calc(var(--space-2) * -1);
    padding-block: var(--space-2);
    background: var(--bg);
  }
  .journey-actions { width: 100%; }
  .journey-actions > button { flex: 1 1 140px; }

}

/* ==========================================================================
   Live work in the chat
   Every line, counter and frame below is painted from the server's real
   activity feed: the exact search, the page being read, the streamed draft
   and the partial cover frames. Nothing is simulated.
   ========================================================================== */

.row.live-row { align-items: flex-start; }

.live-body {
  min-width: 0;
  max-width: min(560px, calc(100% - 46px));
  display: grid;
  gap: var(--space-2);
}

.live-row .typing-line { flex-wrap: wrap; row-gap: 2px; }
.typing-line .live-quote { color: var(--text); font-weight: var(--fw-medium); }
.live-row[data-ending] .typing-dots { visibility: hidden; }

.typing-line .live-clock {
  margin-inline-start: var(--space-1);
  padding: 1px var(--space-2);
  border-radius: var(--r-pill);
  background: var(--fill);
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.live-trail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.live-trail li {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}

.live-trail .ask-mark { width: 14px; height: 14px; color: var(--live); }
.live-trail .live-quote { color: var(--text-2); }
.live-trail li.is-live { color: var(--text-2); }

.live-trail li.is-live .ask-mark {
  border-radius: var(--r-pill);
  background: var(--accent);
  transform: scale(0.45);
  animation: breathe var(--dur-breathe) ease-in-out infinite;
}

.live-trail li.is-live .ask-mark path { stroke: none; }

.live-draft {
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--r-lg);
  border-start-start-radius: var(--r-xs);
  background: var(--bubble-in);
  border: 1px solid var(--bubble-border);
  color: var(--text-body);
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.stream-in { animation: stream-in var(--dur-slow) var(--ease-out) both; }

.live-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-inline-start: 2px;
  vertical-align: text-bottom;
  border-radius: 1px;
  background: var(--accent);
  animation: caret-blink 1s steps(2, start) infinite;
}

.live-posts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.live-post {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--hairline);
}

.live-post-mark {
  width: 22px;
  height: 22px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--accent);
  border-inline-end-color: transparent;
  animation: spin 1.1s linear infinite;
}

.live-post-mark .ask-mark { width: 14px; height: 14px; opacity: 0; color: currentColor; }

.live-post.is-done .live-post-mark {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-primary);
  animation: badge-pop var(--dur-slow) var(--ease-spring);
}

.live-post.is-done .live-post-mark .ask-mark { opacity: 1; }

.live-post-copy { min-width: 0; display: grid; gap: 2px; }

.live-post-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.live-post.is-untitled .live-post-copy strong { color: var(--text-3); font-weight: var(--fw-medium); }

.live-words {
  display: inline-block;
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

/* The cover develops in place: a darkroom wash, then each partial frame
   fades in over the last, a little sharper each time. */
.live-cover {
  position: relative;
  margin: 0;
  width: min(360px, 100%);
  aspect-ratio: 3 / 2;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--track);
  isolation: isolate;
}

.live-cover-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, var(--track) 25%, color-mix(in srgb, var(--accent) 16%, var(--track)) 48%, var(--track) 72%);
  background-size: 260% 100%;
  animation: darkroom calc(var(--beat) * 1.6) var(--ease-standard) infinite;
  transition: opacity var(--dur-slow) var(--ease-out);
}

.live-cover.has-frame .live-cover-wash { opacity: 0; }

.live-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: develop calc(var(--dur-slow) * 2.5) var(--ease-out) both;
}

.live-frame[data-frame="1"] { filter: blur(12px) saturate(0.7); transform: scale(1.06); }
.live-frame[data-frame="2"] { filter: blur(4px) saturate(0.9); transform: scale(1.02); }

/* A finished cover lands in the chat sharp, out of the same blur. */
.row.arrive .chat-cover { animation: develop-in calc(var(--dur-slow) * 2) var(--ease-out) both; }

/* A reply whose draft was already on screen settles instead of popping. */
.row.arrive.from-live { animation: none; }
.row.arrive.from-live .bubble { animation: settle-in var(--dur-base) var(--ease-out) both; }

/* Research as it happens, inside the journey card. */
.journey-trail { margin-bottom: var(--space-3); }
.journey-found[hidden] { display: none; }
.journey-chips.competitors .journey-chip { background: var(--fill); }

/* ==========================================================================
   Setup as a conversation
   ========================================================================== */

#view.concierge {
  display: block;
  overflow: hidden;
}

.concierge {
  height: 100%;
  width: min(720px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.concierge-thread {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) 18px 18px;
}

.concierge-thread > :first-child { margin-top: auto; }
.concierge .setup-preview { margin: 0 18px var(--space-2); }

.host-mark {
  display: grid;
  place-items: center;
  background: var(--accent-tint);
  color: var(--accent);
  box-shadow: none;
}

.host-mark svg { width: 58%; height: 58%; fill: currentColor; }

.setup-site-card .setup-site {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-3) 0 var(--space-2);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  white-space: normal;
}

.setup-site-card .setup-site .site-tile { width: 44px; height: 44px; border-radius: var(--r-md); font-size: 19px; }

.setup-site-card .setup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
  white-space: normal;
}

::view-transition-group(site-mark) {
  animation-duration: 520ms;
  animation-timing-function: cubic-bezier(0.2, 0.9, 0.25, 1.15);
}

::view-transition-old(root),
::view-transition-new(root) { animation-duration: 260ms; }

/* ==========================================================================
   Waiting without dead air: skeletons and busy controls
   ========================================================================== */

.skeleton {
  width: min(720px, 100%);
  margin: var(--space-6) auto;
  padding: 0 var(--pad-x);
  display: grid;
  gap: var(--space-3);
}

.skeleton :is(i, b) {
  display: block;
  height: 14px;
  border-radius: var(--r-md);
  background: linear-gradient(90deg, var(--track) 30%, var(--fill-strong) 50%, var(--track) 70%);
  background-size: 300% 100%;
  animation: journey-shimmer calc(var(--beat) * 1.2) linear infinite;
}

.skeleton-cards i { height: 92px; border-radius: var(--r-lg); }
.skeleton-article b { height: 220px; margin-bottom: var(--space-3); border-radius: var(--r-lg); }
.skeleton-article i:nth-of-type(odd) { width: 92%; }
.skeleton-article i:last-child { width: 58%; }

:is(#thread, .library, .concierge) button.is-busy {
  cursor: progress;
  background-image: linear-gradient(90deg, transparent 20%, color-mix(in srgb, currentColor 18%, transparent) 50%, transparent 80%);
  background-size: 220% 100%;
  animation: busy-sheen 1.1s linear infinite;
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
}

@keyframes stream-in {
  from { opacity: 0; filter: blur(2px); }
}

@keyframes caret-blink {
  to { visibility: hidden; }
}

@keyframes darkroom {
  from { background-position: 100% 0; }
  to { background-position: -160% 0; }
}

@keyframes develop {
  from { opacity: 0; }
}

@keyframes develop-in {
  from { opacity: 0; filter: blur(10px); transform: scale(1.02); }
}

@keyframes settle-in {
  from { opacity: 0.6; }
}

@keyframes busy-sheen {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --press-scale: 1; --enter-shift: 0px; --stagger: 0ms; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .mention-menu, .reply-bar, #status, .jump-latest, header, .post-card, #nav, #send {
    transition: opacity 200ms ease !important;
    transform: none !important;
  }

  *:active, .post-card:hover, #composer.is-sending #send svg { transform: none !important; }

  /* Keep a static busy indicator instead of a spinning one. */
  #composer.is-sending #send::after { border-inline-end-color: currentColor; opacity: 0.6; }

  /* The journey changes state instantly: no sweeps, pings, shimmer or sparks. */
  .journey *, .journey *::before, .journey *::after, .feed-bar > i { transition-duration: 0.01ms !important; }
  .journey-bar span[data-state="active"]::before { display: none; }
  .journey-bar span[data-state="active"]::after { transform: scaleX(0.35); }
  .journey-burst i { display: none; }
  .live-caret { animation: none; }
  .live-post:not(.is-done) .live-post-mark { border-inline-end-color: var(--accent); opacity: 0.6; }
  .live-frame { transform: none !important; }
  .setup button[type="submit"].is-busy::before { border-inline-end-color: currentColor; opacity: 0.6; }
}

@media (prefers-reduced-transparency: reduce) {
  header, .mention-menu {
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  :root,
  :root[data-theme="dark"] {
    --hairline: var(--line-strong);
    --border: var(--line-strong);
  }

  header, .bubble, .setup, .post-card, .business.active, #composer, .ask-options {
    border: 1px solid var(--line-strong);
  }

  /* State rings at full strength so they never rely on subtle opacity. */
  .avatar-wrap[data-bot="listening"]::before,
  .avatar-wrap[data-bot="typing"]::before,
  .avatar-wrap[data-bot="responding"]::before,
  .avatar-wrap[data-bot="error"]::before { opacity: 1; }
  .avatar-wrap[data-bot="offline"] .avatar { opacity: 0.6; }
}

/* Windows High Contrast: keep badges, dots and rings visible in system colors. */
@media (forced-colors: active) {
  .presence,
  .avatar-wrap[data-bot]::after { forced-color-adjust: none; }
  .avatar-wrap[data-bot]::before { border-color: CanvasText; }
  .avatar-wrap[data-bot="idle"]::before,
  .avatar-wrap[data-bot="offline"]::before { border-color: transparent; }
  .switch { border: 1px solid CanvasText; }
  .switch::after { forced-color-adjust: none; background: CanvasText; }
  .switch:checked::after { background: Highlight; }
}

/* ==========================================================================
   Business file: the launch's insight tiles and the editable knowledge page.
   The editor's ink (team 1) marks the way in; green marks a human check.
   ========================================================================== */

.knowledge-open,
.knowledge-entry {
  justify-self: start;
  min-height: 36px;
  margin: 0;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--team-1-tint);
  color: var(--speaker-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  transition: transform var(--dur-press) ease-out, background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.knowledge-open:hover,
.knowledge-entry:hover { background: var(--team-1); color: var(--on-team); }
.knowledge-open:active,
.knowledge-entry:active { transform: scale(var(--press-scale)); }

.knowledge-entry { flex: none; height: 32px; min-height: 0; margin-inline-start: auto; padding: 0 var(--space-3); }
.journey-brief .knowledge-open { margin-top: var(--space-2); }

.insight-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.insight-tile {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-3);
  border-radius: var(--r-md);
  background: var(--fill);
  animation: rise-in var(--dur-slow) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * var(--stagger) * 4);
}

.journey-brief.is-update .insight-tile { animation: none; }
.insight-tile.is-wide { grid-column: 1 / -1; background: transparent; padding: 0 0 var(--space-1); }
.insight-tile.is-strength { background: var(--team-3-tint); }
.insight-tile.is-rivals { background: var(--team-5-tint); }
.insight-tile.is-pending { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.insight-tile.is-pending .insight-note { animation: breathe 1.6s var(--ease-standard) infinite; }

.insight-label {
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}

.insight-tile.is-strength .insight-label { color: var(--speaker-3); }
.insight-tile.is-rivals .insight-label { color: var(--speaker-5); }

.insight-text {
  color: var(--text-body);
  font-size: var(--fs-sm);
  line-height: 1.75;
}

.insight-tile.is-strength .insight-text { color: var(--text); font-weight: var(--fw-semibold); }

.insight-note {
  color: var(--text-2);
  font-size: var(--fs-xs);
  line-height: 1.7;
}

.insight-tile .journey-chip { animation-delay: calc(var(--dur-slow) + var(--i, 0) * var(--stagger)); }
.journey-chips.rivals .journey-chip { background: var(--surface); }

/* The page */
.knowledge,
.knowledge-page {
  display: grid;
  gap: var(--space-3);
  width: 100%;
}

.knowledge-page {
  width: min(var(--content-w), 100%);
  margin-inline: auto;
  padding: 18px var(--pad-x) 28px;
}

.knowledge-intro {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.knowledge-intro h2 {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.knowledge-intro h2:focus { outline: none; }
.knowledge-intro p { margin: 0; }
.knowledge-intro > p:not([class]) { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.75; }

.knowledge-review {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px var(--space-3);
  border-radius: var(--r-pill);
  background: var(--team-6-tint);
  color: var(--speaker-6);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.knowledge-review::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.knowledge-review.is-done { background: var(--team-3-tint); color: var(--speaker-3); }
.knowledge-review.is-done::before { content: "✓"; width: auto; height: auto; background: none; }

.knowledge-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--surface);
  animation: rise-in var(--dur-slow) var(--ease-out) both;
}

.knowledge.is-settled .knowledge-card { animation: none; }

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

.knowledge-head h3 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}

.knowledge-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.knowledge-source,
.knowledge-checked {
  padding: 2px var(--space-2);
  border-radius: var(--r-pill);
  background: var(--fill);
  color: var(--text-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
}

.knowledge-source.is-owner { background: var(--team-1-tint); color: var(--speaker-1); }
.knowledge-checked { background: var(--team-3-tint); color: var(--speaker-3); }
.knowledge-checked::before { content: "✓ "; }

.knowledge-body { display: grid; gap: var(--space-2); }
.knowledge-body p { margin: 0; }

.knowledge-text {
  color: var(--text-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.knowledge-empty { color: var(--text-3); font-size: var(--fs-sm); }
.knowledge-chips .journey-chip { animation: none; }

.knowledge-points,
.knowledge-rivals,
.knowledge-quotes,
.rival-rows,
.supervise-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.knowledge-points li {
  position: relative;
  padding-inline-start: var(--space-5);
  color: var(--text-body);
  font-size: var(--fs-sm);
  line-height: 1.75;
}

.knowledge-points li::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  top: 0.7em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--team-6);
}

.knowledge-points.strengths li::before { background: var(--team-3); }

.knowledge-rivals li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-md);
  background: var(--fill);
}

.knowledge-rivals strong { font-size: var(--fs-sm); }
.knowledge-rivals a { justify-self: end; color: var(--accent-link); font-size: var(--fs-xs); }
.knowledge-rivals p { grid-column: 1 / -1; color: var(--text-2); font-size: var(--fs-xs); line-height: 1.7; }

.knowledge-quotes li {
  display: grid;
  gap: 2px;
  padding-inline-start: var(--space-3);
  border-inline-start: 3px solid var(--team-4);
}

.knowledge-quotes blockquote {
  margin: 0;
  color: var(--text-body);
  font-size: var(--fs-sm);
  line-height: 1.75;
}

.knowledge-quotes a { color: var(--accent-link); font-size: var(--fs-xs); }

.knowledge-note {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-md);
  background: var(--team-3-tint);
  color: var(--text-body);
  font-size: var(--fs-sm);
  line-height: 1.75;
}

.knowledge-note strong { color: var(--speaker-3); }

.knowledge-tools,
.knowledge-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.knowledge-tools button,
.knowledge-actions button,
.knowledge-form > .setup-test,
.knowledge-intro > button {
  min-height: 36px;
  padding: 0 var(--space-4);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: transform var(--dur-press) ease-out, opacity var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.knowledge-tools button:disabled { opacity: 0.55; }
.knowledge-form > .setup-test { justify-self: start; }

.knowledge-save {
  border: 0;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: var(--fw-semibold) !important;
}

.knowledge-save:hover:not(:disabled) { opacity: 0.88; }
.knowledge-save:active:not(:disabled) { transform: scale(var(--press-scale)); }
.knowledge-save.is-busy { opacity: 0.7; cursor: progress; }

.knowledge-form { display: grid; gap: var(--space-3); }

.knowledge-field { display: grid; gap: 6px; min-width: 0; }
.knowledge-field > span { color: var(--text-2); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.knowledge-field > small { color: var(--text-3); font-size: var(--fs-2xs); }

.knowledge-field textarea,
.knowledge-field input {
  width: 100%;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  font-size: var(--fs-sm);
  line-height: 1.75;
  resize: vertical;
}

.knowledge-field textarea:focus,
.knowledge-field input:focus { border-color: var(--accent); outline: none; box-shadow: var(--focus-ring); }

.rival-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) auto;
  align-items: end;
  gap: var(--space-2);
}

.rival-row .setup-test { min-height: 40px; padding: 0 var(--space-3); border-radius: var(--r-sm); }

.knowledge-keep {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--text-body);
  font-size: var(--fs-sm);
  line-height: 1.75;
}

.knowledge-keep input { margin-top: 0.45em; accent-color: var(--accent); }

.supervise-open {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-align: start;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.supervise-open:hover { background: var(--fill); }
.supervise-open bdi { grid-column: 1; justify-self: start; color: var(--text-2); font-size: var(--fs-xs); }
.supervise-open .knowledge-review { grid-column: 2; grid-row: 1 / span 2; }

@media (max-width: 760px) {
  .insight-grid { grid-template-columns: minmax(0, 1fr); }
  .rival-row { grid-template-columns: minmax(0, 1fr); padding-bottom: var(--space-3); border-bottom: 1px solid var(--hairline); }
  .rival-row .setup-test { justify-self: start; }
  .knowledge-card { padding: var(--space-3); }
  .knowledge-entry { padding: 0 var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
  .insight-tile.is-pending .insight-note { animation: none; }
}

/* ==========================================================================
   Group-first launch: the editor's live cards in the chat, the business
   profile button in the header, and the profile panel over the chat.
   ========================================================================== */

.chat-card {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-2);
  min-width: 0;
  white-space: normal;
}

/* A message that carries a live card takes the thread's full reading width. */
.bubble:has(> .chat-card) { width: min(560px, calc(100% - 46px)); }

.chat-card .journey-detail { margin-top: 0; }
.chat-card .journey-brief { box-shadow: none; padding: var(--space-3); background: var(--bg); }
.chat-card .journey-team { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.chat-card .journey-line { color: var(--text-body); }

.chat-finale {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--r-md);
  background: var(--team-3-tint);
}

.chat-finale strong { color: var(--speaker-3); font-size: var(--fs-md); }
.chat-finale p { margin: 0; }
.chat-finale .journey-post { color: var(--text); font-weight: var(--fw-semibold); }
.chat-finale .journey-cover-slot:empty { display: none; }
.chat-finale .journey-cover { max-width: 100%; border-radius: var(--r-md); }

/* Team card: everyone with the one thing they do here. */
.chat-card .journey-team.has-duty { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.journey-team.has-duty .journey-member { align-items: start; }
.journey-member-duty {
  color: var(--text-3);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  white-space: normal;
}

/* --------------------------------------------------------------------------
   The first impression: one card that reads the site and fills the profile.
   -------------------------------------------------------------------------- */

.snap {
  container-type: inline-size;
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3);
  border-radius: var(--r-md);
  background: var(--bg);
}

.snap-head { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.snap-logo { flex: none; width: 40px; height: 40px; font-size: 17px; }
.snap-id { min-width: 0; display: grid; gap: 2px; }
.snap-host { font-size: var(--fs-md); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
.snap-meta { color: var(--text-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.snap-meta:empty { display: none; }

/* Three segments that fill as the editor reads, understands and finishes. */
.snap-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-xs);
}

.snap-steps li {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--text-4);
  transition: color var(--dur-base) var(--ease-out);
}

.snap-steps i {
  display: block;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--border);
  transition: background-color var(--dur-base) var(--ease-out);
}

.snap-steps span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snap-steps li[data-state="active"] { color: var(--speaker-1); font-weight: var(--fw-semibold); }
.snap-steps li[data-state="active"] i { background: var(--speaker-1); animation: breathe 1.4s var(--ease-standard) infinite; }
.snap-steps li[data-state="done"] { color: var(--speaker-3); }
.snap-steps li[data-state="done"] i { background: var(--speaker-3); }

.snap-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.snap-gallery li {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--fill);
}

.snap-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}

.snap-gallery li.is-loaded img { opacity: 1; }
.snap-ticker { margin: 0; }
.snap-grid { margin: 0; }

/* In a narrow chat the tiles read better one under another. */
@container (max-width: 440px) {
  .snap-grid { grid-template-columns: minmax(0, 1fr); }
  .snap-grid .journey-summary { font-size: var(--fs-md); }
}
.snap-tile-body { display: grid; gap: var(--space-1); min-width: 0; }
.snap-tile-body p { margin: 0; }
.insight-tile.is-gap { background: var(--team-6-tint); }
.insight-tile.is-gap .insight-label { color: var(--speaker-6); }
.insight-tile.is-wide-sm { grid-column: 1 / -1; }

.snap-foot {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.snap-ask { margin: 0; font-weight: var(--fw-semibold); }
.snap-actions[hidden], .snap-ask[hidden], .snap-thanks[hidden] { display: none; }
.snap-thanks { margin: 0; color: var(--speaker-3); font-size: var(--fs-sm); line-height: var(--lh-body, 1.7); }

/* --------------------------------------------------------------------------
   The first article as one pipeline, from subject to a finished, covered post.
   -------------------------------------------------------------------------- */

.pipe {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3);
  border-radius: var(--r-md);
  background: var(--bg);
}

.pipe-head { display: grid; justify-items: start; gap: var(--space-1); min-width: 0; }
.pipe-title { margin: 0; color: var(--text); font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.pipe-title.is-pending { color: var(--text-3); font-weight: var(--fw-medium); animation: breathe 1.6s var(--ease-standard) infinite; }

.pipe-keyword {
  padding: 2px var(--space-2);
  border-radius: var(--r-pill);
  background: var(--team-1-tint);
  color: var(--speaker-1);
  font-size: var(--fs-xs);
}

.pipe-keyword[hidden] { display: none; }

.pipe-steps { display: grid; margin: 0; padding: 0; list-style: none; }

.pipe-step {
  position: relative;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  column-gap: var(--space-3);
  row-gap: 6px;
  padding: 6px 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.pipe-step[data-state="waiting"] { opacity: 0.5; }

/* The line that joins each step to the next. */
.pipe-step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: 7px;
  top: 26px;
  bottom: -6px;
  width: 2px;
  border-radius: 1px;
  background: var(--border);
}

.pipe-step[data-state="done"]:not(:last-child)::after { background: var(--speaker-3); opacity: 0.45; }

.pipe-dot {
  position: relative;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--border);
  transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.pipe-step[data-state="active"] .pipe-dot { box-shadow: inset 0 0 0 2px var(--speaker-1); }

.pipe-step[data-state="active"] .pipe-dot::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--speaker-1);
  animation: breathe 1.2s var(--ease-standard) infinite;
}

.pipe-step[data-state="done"] .pipe-dot { background: var(--speaker-3); box-shadow: none; }

.pipe-step[data-state="done"] .pipe-dot::after {
  content: "";
  position: absolute;
  inset: 4px 3px 5px;
  border: solid var(--bg);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}

.pipe-copy { display: grid; gap: 2px; min-width: 0; }
.pipe-copy strong { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.pipe-step[data-state="active"] .pipe-copy strong { color: var(--speaker-1); }
.pipe-sub { color: var(--text-3); font-size: var(--fs-xs); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.pipe-sub:empty { display: none; }

.pipe-bar {
  grid-column: 2;
  height: 4px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--fill);
}

.pipe-bar[hidden] { display: none; }

.pipe-bar i {
  display: block;
  width: calc(var(--value, 0) * 100%);
  height: 100%;
  border-radius: inherit;
  background: var(--speaker-1);
  transition: width var(--dur-slow) var(--ease-out);
}

.pipe.is-done .pipe-steps { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.pipe.is-done .pipe-step { display: inline-flex; align-items: center; gap: 6px; padding: 0; }
.pipe.is-done .pipe-step::after,
.pipe.is-done .pipe-sub,
.pipe.is-done .pipe-bar { display: none; }
.pipe.is-done .pipe-dot { width: 14px; height: 14px; margin: 0; }
.pipe.is-done .pipe-copy strong { color: var(--text-3); font-size: var(--fs-xs); font-weight: var(--fw-medium); }

.pipe-live[hidden] { display: none; }

.pipe-live {
  max-height: 8.5em;
  overflow: hidden;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-sm);
  background: var(--fill);
  color: var(--text-2);
  font-size: var(--fs-sm);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2.2em);
  mask-image: linear-gradient(to bottom, transparent, #000 2.2em);
}

.pipe-cover:empty { display: none; }
.pipe-cover .journey-cover { display: block; width: 100%; max-width: 100%; border-radius: var(--r-md); }

.pipe-finale {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--r-md);
  background: var(--team-3-tint);
}

.pipe-finale[hidden] { display: none; }
.pipe-finale strong { color: var(--speaker-3); font-size: var(--fs-md); }
.pipe-finale p { margin: 0; }
.pipe-took { color: var(--text-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.pipe-took:empty { display: none; }

@media (max-width: 760px) {
  .snap, .pipe { padding: var(--space-2); }
  .snap-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chat-card .journey-team.has-duty { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .snap-steps li[data-state="active"] i,
  .pipe-step[data-state="active"] .pipe-dot::after,
  .pipe-title.is-pending { animation: none; }
  .snap-gallery img, .pipe-bar i { transition: none; }
}

#profile {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 32px;
  margin: 0;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--team-1-tint);
  color: var(--speaker-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  transition: transform var(--dur-press) ease-out, background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

#profile[hidden] { display: none; }
#profile:hover, #profile[aria-expanded="true"] { background: var(--team-1); color: var(--on-team); }
#profile:active { transform: scale(var(--press-scale)); }

.profile-meter {
  display: block;
  width: 36px;
  height: 4px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, currentColor 20%, transparent);
}

.profile-meter i {
  display: block;
  height: 100%;
  width: calc(var(--value, 0) * 100%);
  border-radius: inherit;
  background: currentColor;
  transition: width var(--dur-slow) var(--ease-out);
}

#profile.is-building .profile-meter i { animation: breathe 1.6s var(--ease-standard) infinite; }
.profile-count { font-size: var(--fs-xs); font-weight: var(--fw-medium); }

.profile-shade {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(14, 14, 16, 0.28);
  animation: fade-in var(--dur-base) var(--ease-out) both;
}

.profile-panel {
  position: fixed;
  z-index: 41;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;
  width: min(560px, 100vw);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--bg);
  box-shadow: var(--shadow-overlay);
  animation: profile-in var(--dur-slow) var(--ease-out) both;
}

.profile-panel:focus { outline: none; }

@keyframes profile-in {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: none; }
}

.profile-close {
  justify-self: end;
  display: grid;
  place-items: center;
  width: var(--touch);
  height: var(--touch);
  margin: var(--space-2);
  margin-bottom: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-2);
}

.profile-close:hover { background: var(--fill); color: var(--text); }
.profile-close svg { width: 18px; height: 18px; }

.profile-body {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0 var(--space-5) var(--space-8);
}

body.profile-open { overflow: hidden; }

@media (max-width: 760px) {
  #profile .profile-label { display: none; }
  #profile { padding: 0 var(--space-2); }
  #profile::before { content: "پروفایل"; }
  .profile-panel { width: 100vw; padding-top: env(safe-area-inset-top); }
  .chat-card .journey-brief { padding: 0; background: transparent; }
  /* On a phone a live card needs the width more than a reply button does. */
  .row:has(.chat-card) .reply-btn { display: none; }
  .chat-card .insight-tile { padding: var(--space-2) var(--space-3); }
  .profile-body { padding-inline: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  #profile.is-building .profile-meter i { animation: none; }
}

/* ==========================================================================
   Manager's report: opened on every visit. A warm summary first, then the
   team's work as headlines, each one a way back to its message in the group.
   Green (team 3) is the color of work done.
   ========================================================================== */

/* ==========================================================================
   Team members: in the content group's header, the team's faces and a count;
   it opens a panel with every member, their role, duty and live status.
   ========================================================================== */

#team-open {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 32px;
  margin: 0;
  padding-inline: var(--space-1) var(--space-3);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--fill);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  transition: transform var(--dur-press) ease-out, background-color var(--dur-fast) var(--ease-out);
}

#team-open[hidden] { display: none; }
#team-open:hover, #team-open[aria-expanded="true"] { background: var(--fill-strong); }
#team-open:active { transform: scale(var(--press-scale)); }
#team-open:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.team-open-faces { display: inline-flex; align-items: center; }
.team-open-faces .avatar {
  width: 24px;
  height: 24px;
  box-shadow: 0 0 0 2px var(--bg);
}
.team-open-faces .avatar + .avatar { margin-inline-start: -8px; }

.team-open-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--fill-strong);
  color: var(--text-2);
  font-size: var(--fs-2xs);
  line-height: 18px;
  text-align: center;
}

/* Someone in the team is at work right now. */
#team-open.is-working .team-open-count { background: var(--live); color: var(--surface); }

.team-panel { width: min(420px, 100vw); }

.team-intro { margin-bottom: var(--space-4); }
.team-intro h2 {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}
.team-intro h2:focus { outline: none; }
.team-intro p {
  margin: 0;
  color: var(--text-3);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

.team-list { display: grid; gap: var(--space-1); }
.team-list .member { align-items: flex-start; padding: var(--space-2); }
.team-list .member-duty { -webkit-line-clamp: 3; }

#report-open {
  flex: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  margin: 0;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--team-3-tint);
  color: var(--speaker-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  transition: transform var(--dur-press) ease-out, background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

#report-open[hidden] { display: none; }
#report-open:hover, #report-open[aria-expanded="true"] { background: var(--team-3); color: var(--on-team); }
#report-open:active { transform: scale(var(--press-scale)); }

.report-open-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--speaker-3);
  color: var(--surface);
  font-size: var(--fs-2xs);
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.report-open-count[hidden] { display: none; }

.report { display: grid; gap: var(--space-5); }

/* One color per kind of work, used by chips, ribbon dots, card icons and bars. */
.report [data-tone="1"] { --tone: var(--speaker-1); --tone-soft: var(--team-1-tint); --tone-mid: var(--team-1); }
.report [data-tone="2"] { --tone: var(--speaker-2); --tone-soft: var(--team-2-tint); --tone-mid: var(--team-2); }
.report [data-tone="3"] { --tone: var(--speaker-3); --tone-soft: var(--team-3-tint); --tone-mid: var(--team-3); }
.report [data-tone="4"] { --tone: var(--speaker-4); --tone-soft: var(--team-4-tint); --tone-mid: var(--team-4); }
.report [data-tone="5"] { --tone: var(--speaker-5); --tone-soft: var(--team-5-tint); --tone-mid: var(--team-5); }
.report [data-tone="6"] { --tone: var(--speaker-6); --tone-soft: var(--team-6-tint); --tone-mid: var(--team-6); }

.report svg path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.report-faces { display: flex; flex: none; align-items: center; }
.report-faces .report-face { box-shadow: 0 0 0 2px var(--surface); }
.report-faces .report-face + .report-face { margin-inline-start: -8px; }

.report-face {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--fill-strong);
}

.report-face > :is(img, svg) { display: block; width: 100%; height: 100%; }
.report-face-sm { width: 20px; height: 20px; }
.report-face-more { color: var(--text-2); font-size: var(--fs-2xs); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

/* ---------- Feed: every piece of work as a notification on a line of time ---------- */
.report-stream {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.report-feed .report-stream::before {
  content: "";
  position: absolute;
  inset-block: 12px;
  inset-inline-start: 15px;
  width: 2px;
  border-radius: 1px;
  background: linear-gradient(var(--speaker-3), var(--hairline));
}

.report-note {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-2);
  animation: rise-in var(--dur-slow) var(--ease-out) both;
  animation-delay: calc(var(--dur-base) + var(--i, 0) * var(--stagger));
}

.report-note-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--tone-soft);
  color: var(--tone);
  box-shadow: 0 0 0 3px var(--bg, var(--surface));
}

.report-note-icon svg { width: 16px; height: 16px; }

.report-note-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "what time" "meta meta";
  gap: 6px var(--space-3);
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface);
  color: inherit;
  text-align: start;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.report-note-card:hover { transform: translateY(-1px); border-color: var(--border); box-shadow: var(--shadow-md); }
.report-note-card:active { transform: scale(var(--press-scale)); }
.report-note-what { grid-area: what; color: var(--text); font-size: var(--fs-sm); line-height: 1.7; }

.report-note-time {
  grid-area: time;
  align-self: start;
  padding: 1px var(--space-2);
  border-radius: var(--r-pill);
  background: var(--fill);
  color: var(--text-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.report-note-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--text-2); font-size: var(--fs-xs); }
.report-note-who strong { color: var(--text-body); }
/* New since the owner left: bright cards. What came before: quieter. */
.report-note.is-new .report-note-card { border-color: var(--team-3); background: linear-gradient(var(--team-3-tint), var(--team-3-tint)), var(--surface); }
.report-marker-out ~ .report-note:not(.is-new):not(.is-live) .report-note-card { background: transparent; box-shadow: none; }
.report-marker-out ~ .report-stretch strong { color: var(--text-2); }
.report-marker-out ~ .report-stretch::before { border-color: var(--fill-strong); }

/* Done while the owner is here: it lands in blue, and announces itself once. */
.report-note.is-live .report-note-card { border-color: var(--team-5); background: linear-gradient(var(--team-5-tint), var(--team-5-tint)), var(--surface); }
.report-note.is-settled { animation: none; }
.report-note.is-arriving { animation: report-arrive 900ms var(--ease-spring) both; }
.report-note.is-arriving .report-note-card { box-shadow: 0 0 0 3px var(--team-5-tint), var(--shadow-md); }

@keyframes report-arrive {
  0% { opacity: 0; transform: translateY(-8px) scale(0.98); }
  60% { opacity: 1; transform: translateY(0) scale(1.01); }
  100% { opacity: 1; transform: none; }
}

.report-stretch {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-inline-start: 40px;
}

.report-stretch::before {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--speaker-3);
  translate: 0 -50%;
}

.report-stretch strong { color: var(--speaker-3); font-size: var(--fs-sm); }
.report-stretch span { color: var(--text-3); font-size: var(--fs-xs); }

.report-marker {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--space-2);
  padding-inline-start: 40px;
}

.report-marker > span:first-child {
  display: inline-block;
  padding: 2px var(--space-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
}

.report-marker::before {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: 9px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  translate: 0 -50%;
}

.report-marker-now > span:first-child { background: var(--speaker-3); color: var(--surface); }
.report-marker-now::before { background: var(--speaker-3); box-shadow: 0 0 0 4px var(--team-3-tint); animation: presence-ping 2.4s var(--ease-out) infinite; }
/* The owner's own comings and goings on the line. */
.report-marker-out, .report-marker-in, .report-marker-here { margin-block: var(--space-2); }
.report-marker-out > span:first-child { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.report-marker-out::before { background: var(--text-3); box-shadow: 0 0 0 4px var(--bg); }
.report-marker-in > span:first-child { background: var(--team-3-tint); color: var(--speaker-3); }
.report-marker-in::before { background: var(--bg); border: 2px solid var(--speaker-3); }
.report-marker-here > span:first-child { background: var(--team-5-tint); color: var(--speaker-5); }
.report-marker-here::before { background: var(--speaker-5); box-shadow: 0 0 0 4px var(--team-5-tint); }
.report-marker-start { margin-top: var(--space-2); }
.report-marker-start > span:first-child { background: var(--fill); color: var(--text-2); }
.report-marker-start::before { background: var(--bg); border: 2px solid var(--fill-strong); }

/* ---------- Next 24 hours ---------- */
.report-plan {
  display: grid;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
}

.report-plan strong { color: var(--text); font-size: var(--fs-sm); }
.report-plan p { margin: 0; color: var(--text-body); font-size: var(--fs-sm); line-height: 1.75; }

.report-upcoming {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.report-upcoming li {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

.report-upcoming-time { color: var(--text); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.report-upcoming-what { color: var(--text-body); }
.report-plan .report-plan-hint { margin-top: var(--space-2); color: var(--text-2); font-size: var(--fs-xs); }
.report-upcoming-what .report-source { display: inline-block; vertical-align: 1px; }

/* Who the work is for: the owner's own request, the team's initiative, or backstage. */
.report-source {
  flex: none;
  padding: 0 var(--space-2);
  border-radius: var(--r-pill);
  background: var(--fill);
  color: var(--text-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  line-height: 20px;
}

.report-source[data-source="team"] { background: var(--team-3-tint); color: var(--speaker-3); }
.report-source[data-source="backstage"] { background: var(--team-1-tint); color: var(--speaker-1); }
.report-source[data-source="waiting"] { background: var(--speaker-2); color: var(--surface); }
.report-note.is-waiting .report-note-card { border-color: var(--team-2); box-shadow: 0 0 0 3px var(--team-2-tint); }

.report-now-count { color: var(--speaker-3); font-size: var(--fs-sm); }

.report-now-ask {
  padding: 2px var(--space-3);
  border-radius: var(--r-pill);
  background: var(--team-2-tint);
  color: var(--speaker-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.report-empty { margin: 0; padding: var(--space-4); border-radius: var(--r-lg); background: var(--fill); color: var(--text-body); font-size: var(--fs-sm); line-height: 1.75; }

/* ---------- Record: everything so far, at the bottom ---------- */
.report-record {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--r-xl);
  background: var(--fill);
}

.report-record-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2px var(--space-3); }
.report-record-head h3 { margin: 0; color: var(--text-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.report-record-total { grid-column: 1; margin: 0; color: var(--text-2); font-size: var(--fs-sm); }
.report-record-total strong { color: var(--text); font-size: 32px; font-weight: var(--fw-bold); line-height: 1.1; font-variant-numeric: tabular-nums; }
.report-record-crew { grid-column: 2; grid-row: 1 / span 2; margin: 0; display: grid; justify-items: end; gap: 4px; color: var(--text-2); font-size: var(--fs-2xs); }
.report-record-crew .report-face { box-shadow: 0 0 0 2px var(--fill); }

.report-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }

.report-bars li {
  display: grid;
  grid-template-columns: minmax(0, 11em) minmax(0, 1fr) 2.5em;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
}

.report-bar-label { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--text-body); }
.report-bar-label svg { flex: none; width: 14px; height: 14px; color: var(--tone); }

.report-bar-meter {
  height: 8px;
  border-radius: var(--r-pill);
  background: linear-gradient(var(--tone-mid), var(--tone-mid)) 0 0 / var(--share) 100% no-repeat, var(--surface);
}

[dir="rtl"] .report-bar-meter { background-position: 100% 0, 0 0; }
.report-bars strong { color: var(--text); font-size: var(--fs-sm); text-align: end; font-variant-numeric: tabular-nums; }

.report-back { justify-self: center; margin-block: 0 var(--space-4); }

@media (prefers-reduced-motion: reduce) {
  .report-note, .report-note.is-arriving { animation: none; }
  .report-marker-now::before { animation: none; }
  .report-note-card, .report-note-card:hover { transition: none; transform: none; }
}

@media (max-width: 760px) {
  #report-open .report-open-label { display: none; }
  #team-open .team-open-label { display: none; }
  #report-open::before { content: "گزارش"; }
  #report-open { padding: 0 var(--space-2); }
  #profile .profile-meter { width: 24px; }
  .report-upcoming li { grid-template-columns: 6.5em minmax(0, 1fr); }
  .report-bars li { grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr) 2em; }
  .report-record { padding: var(--space-3); }
}

.report-live-slot { padding-inline-start: 40px; }
.report-live-slot[hidden] { display: none; }
.report-live-row { display: flex; align-items: center; gap: var(--space-2); padding-block: 4px; font-size: var(--fs-sm); color: var(--text-2); }
.report-live-row strong { color: var(--speaker-3); }

/* ---- Hiring the team: capacity chip, plans, checkout, member levels ------- */

.billing-meter i {
  display: block;
  height: 100%;
  width: calc(var(--value, 0) * 100%);
  border-radius: inherit;
  background: currentColor;
  transition: width var(--dur-slow) var(--ease-out);
}


.billing .billing-head { display: grid; gap: var(--space-1); }
.billing .billing-head strong { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.billing .billing-head .hint { margin: 0; }

.billing-status { display: grid; gap: var(--space-3); }
.billing-status[data-state="over"] { border-color: var(--danger); background: var(--danger-tint); }

.billing-bar { display: grid; gap: var(--space-1); color: var(--speaker-3); }
.billing-bar-top { display: flex; justify-content: space-between; gap: var(--space-2); color: var(--text-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.billing-bar .hint { margin: 0; }

.billing-meter {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--track);
}

.billing-anchor {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-md);
  background: var(--accent-tint);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.8;
}

.billing-option strong { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.billing-option.is-disabled { opacity: 0.55; cursor: not-allowed; }

.billing-badge {
  padding: 1px var(--space-2);
  border-radius: var(--r-pill);
  background: var(--primary);
  color: var(--on-primary);
  font-size: var(--fs-xs);
  font-style: normal;
  font-weight: var(--fw-medium);
}

.billing-durations { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.billing-summary, .billing-choice { display: grid; gap: var(--space-3); }
.billing-total { margin: 0; font-size: var(--fs-xl, 1.4rem); font-weight: var(--fw-bold, 700); font-variant-numeric: tabular-nums; }

.billing-gateway, .billing-paid { display: grid; gap: var(--space-4); }
.billing-paid { border-color: var(--speaker-3); background: var(--team-3-tint); }

.billing-lines {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.billing-lines dt { color: var(--text-2); }
.billing-lines dd { margin: 0; text-align: end; font-weight: var(--fw-semibold); }
.billing-lines dt:last-of-type, .billing-lines dd:last-of-type { padding-top: var(--space-2); border-top: 1px solid var(--hairline); }

.billing-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.level-hint { margin: var(--space-2) 0 0; }

.level-switch {
  display: inline-flex;
  align-self: center;
  margin-inline-start: auto;
  padding: 2px;
  border-radius: var(--r-pill);
  background: var(--fill);
}

.level-switch button {
  min-height: 28px;
  margin: 0;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  cursor: pointer;
}

.level-switch button[aria-checked="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.level-switch button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.level-switch button:disabled { opacity: 0.6; cursor: default; }

.team-list .member-row:has(.level-switch) { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

@media (max-width: 760px) {
  .billing-durations { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .billing-meter i { transition: none; }
}

/* A phone's header keeps every chip: the meters give way to their numbers. */
@media (max-width: 480px) {
  header { gap: var(--space-1); }
  #profile .profile-meter { display: none; }
  #profile, #settings, #report-open, #team-open { padding: 0 var(--space-2); }
  #team-open .team-open-faces > :nth-child(n + 3), #team-open .team-open-count { display: none; }
  /* Settings keeps its name for screen readers and shows a gear. */
  #settings { font-size: 0; }
  #settings::before { content: "⚙"; font-size: var(--fs-md); }
  .billing-durations { grid-template-columns: 1fr; }
}

/* ---- Settings page: a side list of a few groups beside plain cards --------
   One card language for every section (no per-integration pastels), group
   headings that say what each part is for, and the delete action in its own
   clearly marked card at the end. On a phone the side list becomes a row of
   chips that stays at the top. */
.setup.settings-page {
  width: min(1040px, calc(100% - 32px));
  padding: 0;
  gap: var(--space-6);
  background: none;
  border: 0;
  box-shadow: none;
}

.settings-head { display: grid; gap: var(--space-1); }
.settings-head h1 {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1.3;
}
.settings-head .hint { margin: 0; color: var(--text-3); }

.settings-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

.settings-nav {
  position: sticky;
  top: var(--space-4);
  display: grid;
  gap: 2px;
}

.settings-nav button {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs-base);
  text-align: start;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.settings-nav button::before {
  content: "";
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: transparent;
  transition: background-color 0.15s ease;
}
.settings-nav button:hover { background: var(--fill); color: var(--text); }
.settings-nav button[aria-current="true"] {
  background: var(--fill-strong);
  color: var(--text);
  font-weight: var(--fw-semibold);
}
.settings-nav button[aria-current="true"]::before { background: var(--accent); }
.settings-nav button[data-group="danger"] { color: var(--danger); }
.settings-nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.settings-body { display: grid; gap: var(--space-10); min-width: 0; }

.settings-group {
  display: grid;
  gap: var(--space-3);
  scroll-margin-top: var(--space-4);
}
.settings-group-head { display: grid; gap: var(--space-1); padding-inline: var(--space-1); }
.settings-group-head h2 {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 1.4;
}
.settings-group-head h2:focus { outline: none; }
.settings-group-head h2:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.settings-group-head p { margin: 0; color: var(--text-3); font-size: var(--fs-sm); line-height: 1.7; }

/* Every section is the same card: a white surface, a hairline, a title row. */
.settings-page .integration,
.settings-page .integration[data-tone] {
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: visible;
}
.settings-page .integration[data-tone]::after { content: none; }
.settings-page .integration[data-tone] input,
.settings-page .integration[data-tone] textarea { background: var(--bg); }
.settings-page .integration > strong,
.settings-page .integration > .switch-row > strong {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}
.settings-page .integration > .hint { margin-top: calc(var(--space-1) * -1); color: var(--text-3); }
.settings-page .billing-status[data-state="over"] { border-color: var(--danger); background: var(--danger-tint); }
.settings-page .opt-card { width: 100%; background: var(--bg); }

.settings-danger { border-color: color-mix(in srgb, var(--danger) 35%, transparent) !important; }
.settings-danger[data-confirm="1"] { background: var(--danger-tint) !important; }
.settings-danger-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.settings-danger-actions button { justify-self: auto; }
.settings-page button.danger.settings-danger-confirm { background: var(--danger); color: #fff; border-color: var(--danger); }
.settings-page button.danger.settings-danger-confirm:hover:not(:disabled) { opacity: 0.9; background: var(--danger); }

@media (max-width: 900px) {
  .setup.settings-page { gap: var(--space-4); }
  .settings-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .settings-nav {
    top: 0;
    z-index: 2;
    display: flex;
    gap: var(--space-2);
    margin-inline: -16px;
    padding: var(--space-2) 16px;
    overflow-x: auto;
    scrollbar-width: none;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-nav button {
    flex: none;
    min-height: 36px;
    padding: 0 var(--space-4);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: var(--surface);
    font-size: var(--fs-sm);
    white-space: nowrap;
  }
  .settings-nav button::before { content: none; }
  .settings-nav button[aria-current="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
  .settings-nav button[data-group="danger"][aria-current="true"] { background: var(--danger); border-color: var(--danger); color: #fff; }
  .settings-group { scroll-margin-top: 64px; }
  .settings-body { gap: var(--space-8); }
  .settings-page .integration,
  .settings-page .integration[data-tone] { padding: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  .settings-nav button,
  .settings-nav button::before { transition: none; }
}