/* Greeter UI shell — tokens copied 1:1 from Greeter_brandbook.html (v2).
   v2 = minimalist premium, iris accent, light cold-neutral. The brandbook
   is the source of truth; if tokens here drift, update HERE not THERE. */

:root {
  --brand-iris:         #5B5BD6;
  --brand-iris-hover:   #6E6EE0;
  --brand-iris-pressed: #4848BD;
  --brand-iris-tint:    rgba(91,91,214,0.08);
  --brand-iris-ring:    rgba(91,91,214,0.30);
  --brand-iris-edge:    rgba(91,91,214,0.14);   /* sub-border hairline */
  --ai-mark-tint:       rgba(91,91,214,0.10);   /* "drafted by AI" badge */

  --bg-canvas:    #FAFAFA;
  --bg-base:      #FFFFFF;
  --bg-elevated:  #F4F4F5;
  --bg-pressed:   #E4E4E7;
  --bg-rail:      #FAFAFA;
  --bg-context:   #FAFAFA;
  --bg-ai-draft:  #F6F6FB;

  --text-primary:   #0A0A0A;
  --text-secondary: #52525B;
  --text-tertiary:  #A1A1AA;
  --text-quaternary:#D4D4D8;

  --status-new:      #5B5BD6;
  --status-progress: #0EA5E9;
  --status-waiting:  #71717A;
  --status-resolved: #16A34A;
  --status-urgent:   #DC2626;
  --danger:          #DC2626;

  --border-subtle:  rgba(10,10,10,0.06);
  --border-default: rgba(10,10,10,0.10);
  --border-strong:  rgba(10,10,10,0.18);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-bubble: 10px;

  --elev-1: 0 1px 2px rgba(10,10,10,0.04);

  --dur-fast:   120ms;
  --dur-normal: 180ms;
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);

  --rail-width: 56px;
  --inbox-width: 320px;
  --context-width: 320px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Light minimalist scrollbars (HiveOS pattern, light-mode variant).
   Firefox uses scrollbar-width/color; Chromium uses ::-webkit-scrollbar. */
* { scrollbar-width: thin; scrollbar-color: rgba(10,10,10,0.18) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(10,10,10,0.14); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(10,10,10,0.24); }
*::-webkit-scrollbar-corner { background: transparent; }

html, body { height: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-base);
  color: var(--text-primary);
  font-size: 13.5px;
  line-height: 1.55;
  display: flex;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================== RAIL == */
.rail {
  width: var(--rail-width);
  background: var(--bg-rail);
  border-right: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; align-items: center;
  padding: var(--space-3) 0; gap: var(--space-4);
  flex-shrink: 0;
}
.rail-brand {
  width: 32px; height: 32px; border-radius: var(--radius-md);
  background: var(--brand-iris); color: #FFFFFF;
  display: grid; place-items: center;
}
.rail-brand svg { width: 18px; height: 18px; display: block; }
.rail-nav { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }
.rail-link {
  width: 40px; height: 40px; border-radius: var(--radius-md);
  display: grid; place-items: center;
  color: var(--text-tertiary);
  background: transparent; border: 0; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.rail-link:hover { background: var(--bg-elevated); color: var(--text-secondary); }
.rail-link.is-active { background: var(--brand-iris-tint); color: var(--brand-iris); }
.rail-link.is-disabled { opacity: 0.4; cursor: not-allowed; }
.rail-foot { margin-top: auto; padding-bottom: var(--space-2); }
.status-dot {
  display: block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-quaternary);
  transition: background var(--dur-normal) var(--ease-out);
}
.status-dot.is-ok { background: var(--status-resolved); }
.status-dot.is-bad { background: var(--danger); }

/* ========================================================= WORKSPACE == */
/* Two-row grid: 44px workspace-topbar (always visible, spans every column)
   above the existing 3-pane row (inbox / thread / context). Per Noa Trainer
   v2 spec §3.1 — topbar is the always-visible summon surface for the AI
   icon + future bell/profile siblings. Each pane explicitly sits in row 2
   so the topbar's `grid-column: 1 / -1` cleanly spans the workspace. */
.workspace {
  flex: 1;
  display: grid;
  grid-template-columns: var(--inbox-width) 1fr var(--context-width);
  min-width: 0;
  transition: grid-template-columns var(--dur-normal) var(--ease-out);
}
/* Collapsed context column — the right rail slides out, thread takes the space. */
.workspace.is-context-collapsed {
  grid-template-columns: var(--inbox-width) 1fr 0;
}
/* Mutex with the Kasia Trainer drawer: when the drawer is open, the right
   rail (.context, 320px) collapses to 0 so the thread reclaims the freed
   space. Per Noa Trainer v2 spec §4.2. Synchronised with the drawer's
   180ms enter so the panel "makes room" for the workshop. */
.workspace[data-trainer-open="true"]:not(.is-settings):not(.is-kasia) {
  grid-template-columns: var(--inbox-width) 1fr 0;
}
.workspace[data-trainer-open="true"] > .context {
  overflow: hidden;
  border-left: 0;
}
.workspace[data-trainer-open="true"] > .context > * { opacity: 0; }
.workspace.is-context-collapsed > .context {
  overflow: hidden;
  border-left: 0;
}
.workspace.is-context-collapsed > .context > * { opacity: 0; }

/* Toggle button — square icon button in the thread head. */
.icon-btn {
  width: 28px; height: 28px; border-radius: var(--radius-md);
  display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer;
  color: var(--text-tertiary);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.icon-btn:hover { background: var(--bg-elevated); color: var(--text-secondary); }
.icon-btn.is-active { color: var(--brand-iris); }

/* ============================================================== INBOX == */
/* Sandwich pattern: tinted inbox + white thread + tinted context. No hard
   dividers between columns — the bg contrast carries the boundary. */
.inbox {
  background: var(--bg-canvas);
  display: flex; flex-direction: column;
  min-height: 0; min-width: 0;
}
/* No dividers anywhere in the inbox — rhythm comes from padding + typography.
   Active row is a soft tinted fill, hover is a subtle bg shift. Linear pattern. */
.inbox-head {
  height: 52px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--space-4);
  gap: var(--space-3);
}
.inbox-title { font-size: 14px; font-weight: 600; letter-spacing: -0.1px; display: inline-flex; align-items: baseline; gap: 6px; }
.inbox-count {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; color: var(--text-tertiary);
}

/* "+ New email" trigger — primary action of the inbox column.
   Iris-filled button, right-anchored. Per Noa's compose-modal spec. */
.compose-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12px; font-weight: 500;
  color: #FFFFFF;
  background: var(--brand-iris);
  border: 0; border-radius: var(--radius-md);
  padding: 6px 12px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  flex-shrink: 0;
}
.compose-trigger:hover  { background: var(--brand-iris-hover); }
.compose-trigger:active { background: var(--brand-iris-pressed); }
.compose-trigger:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--brand-iris-ring); }
.inbox-search {
  display: flex; align-items: center; gap: var(--space-2);
  margin: 0 var(--space-3) var(--space-2);
  padding: 7px var(--space-3);
  background: var(--bg-base);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.inbox-search:focus-within {
  border-color: var(--border-subtle);
}
.inbox-search svg { color: var(--text-tertiary); flex-shrink: 0; }
.inbox-search input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-family: inherit; font-size: 12.5px; color: var(--text-primary);
}
.inbox-search input::placeholder { color: var(--text-tertiary); }
.inbox-list {
  list-style: none; flex: 1; overflow-y: auto;
  padding: var(--space-1) var(--space-2);
}

/* ===== Channel facet (Noa Path A + Option E) =====
   Channel selection lives inside the Filters popover (see .filter-row.is-channel
   below). The current channel surfaces in the inbox header as a soft suffix —
   "Inbox · Instagram" — so the operator never loses state visibility. */
.inbox-title-suffix { color: var(--text-tertiary); font-weight: 500; margin-left: 6px; }

/* ===== Status filter bar + popover (Noa C-N2) ===== */
.filter-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 0 var(--space-3) var(--space-2);
}
.filter-trigger, .urgent-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 11.5px; font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  padding: 5px 10px; border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.filter-trigger:hover, .urgent-toggle:hover { border-color: var(--border-default); color: var(--text-primary); }
.filter-trigger[aria-expanded="true"] {
  background: var(--brand-iris-tint); border-color: var(--brand-iris-tint); color: var(--brand-iris-pressed);
}
.filter-active-count {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  padding: 1px 5px; border-radius: 999px;
  background: var(--bg-elevated); color: var(--text-tertiary);
}
.filter-trigger[aria-expanded="true"] .filter-active-count {
  background: rgba(91,91,214,0.15); color: var(--brand-iris-pressed);
}
.urgent-toggle .urgent-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-quaternary); }
.urgent-toggle[aria-pressed="true"] {
  background: rgba(220,38,38,0.08); border-color: rgba(220,38,38,0.20); color: var(--status-urgent);
}
.urgent-toggle[aria-pressed="true"] .urgent-dot { background: var(--status-urgent); }

/* Inbox ticket sort (Newest/Oldest) — Noa spec 2026-06-17. Right-anchored in
   the filter-bar; styled to match .filter-trigger / .urgent-toggle siblings.
   (.rules-sort-select has no base rule outside PK/op-ctx, so styled in full.) */
.inbox-sort {
  position: relative;
  margin-left: auto;            /* push to the right edge of the filter-bar */
  display: inline-flex; align-items: center;
  flex-shrink: 0;
}
.inbox-sort .sort-icon {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; display: inline-flex;
  color: var(--text-tertiary);
  pointer-events: none;
}
.inbox-sort .sort-icon svg { width: 14px; height: 14px; }
.inbox-sort .rules-sort-select {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 11.5px; font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 5px 24px 5px 28px;   /* room for leading icon (L) + caret (R) */
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.inbox-sort .rules-sort-select:hover { border-color: var(--border-default); color: var(--text-primary); }
.inbox-sort .rules-sort-select:focus-visible {
  outline: none; border-color: var(--brand-iris);
  box-shadow: var(--elev-focus, 0 0 0 3px var(--brand-iris-ring, rgba(91,91,214,0.35)));
}
.inbox-sort::after {
  content: ''; position: absolute; right: 10px; top: 50%;
  width: 7px; height: 7px;
  transform: translateY(-65%) rotate(45deg);
  border-right: 1.4px solid var(--text-tertiary);
  border-bottom: 1.4px solid var(--text-tertiary);
  pointer-events: none;
}
.inbox-sort:hover .sort-icon { color: var(--text-secondary); }
/* Non-default (Oldest) → iris-tint the leading icon to signal sort is engaged. */
.inbox-sort[data-sorted="oldest"] .sort-icon { color: var(--brand-iris); }

/* Icon-only sort toggle (Rafał 2026-06-19 — text label dropped, didn't fit the
   filter bar). Click flips newest <-> oldest; iris border/icon signals oldest. */
.inbox-sort-btn {
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 28px; padding: 0;
  background: var(--bg-base); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); cursor: pointer;
  color: var(--text-tertiary);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.inbox-sort-btn svg { width: 15px; height: 15px; }
.inbox-sort-btn:hover { border-color: var(--border-default); color: var(--text-secondary); }
.inbox-sort-btn:focus-visible {
  outline: none; border-color: var(--brand-iris);
  box-shadow: var(--elev-focus, 0 0 0 3px var(--brand-iris-ring, rgba(91,91,214,0.35)));
}
.inbox-sort-btn[data-sorted="oldest"] { color: var(--brand-iris); border-color: var(--brand-iris); }

.filter-popover {
  position: relative; margin: 0 var(--space-3) var(--space-2);
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 8px;
  box-shadow: var(--elev-1);
}
.filter-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer;
  font-size: 12.5px; color: var(--text-primary);
}
.filter-row:hover { background: var(--bg-elevated); }
.filter-row input[type="checkbox"] { accent-color: var(--brand-iris); cursor: pointer; }
.filter-popover-foot {
  display: flex; justify-content: space-between; padding: 6px 8px 2px;
  border-top: 1px solid var(--border-subtle); margin-top: 4px;
}
.filter-popover-foot button {
  font: inherit; font-size: 11px; font-weight: 500;
  background: transparent; border: 0; cursor: pointer;
  color: var(--text-tertiary);
}
.filter-popover-foot button:hover { color: var(--text-primary); }
.filter-popover-foot .filter-reset { color: var(--brand-iris); }

/* Channel section inside the Filters popover. */
.filter-section-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 600; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--text-tertiary);
  padding: 6px 8px 4px;
}
.filter-section-divider {
  height: 1px; background: var(--border-subtle); margin: 6px 4px;
}
.filter-row.is-channel {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer;
  font-size: 12.5px; color: var(--text-primary);
}
.filter-row.is-channel:hover { background: var(--bg-elevated); }
.filter-row.is-channel.is-checked {
  background: var(--brand-iris-tint); color: var(--brand-iris);
}
.filter-row.is-channel svg { width: 13px; height: 13px; color: currentColor; flex-shrink: 0; }
.filter-row-count {
  margin-left: auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--text-tertiary);
}
.filter-row.is-channel.is-checked .filter-row-count { color: var(--brand-iris); }


.convo-item {
  display: block; width: 100%;
  padding: 10px var(--space-3);
  margin-bottom: 2px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent; cursor: pointer; text-align: left;
  transition: background var(--dur-fast) var(--ease-out);
}
.convo-item:hover { background: rgba(10,10,10,0.03); }
.convo-item.is-active { background: var(--brand-iris-tint); }
.convo-row1 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-bottom: 2px; }
.convo-name-wrap { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.convo-name { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.presence-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.presence-online  { background: var(--status-resolved); }
.presence-away    { background: #F59E0B; }
.presence-offline { background: var(--text-quaternary); }
.convo-time { font-size: 11px; color: var(--text-tertiary); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.convo-preview {
  font-size: 12.5px; color: var(--text-secondary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-bottom: var(--space-2);
}
.status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500;
  padding: 2px 8px; border-radius: 999px;
  background: var(--bg-elevated); color: var(--text-secondary);
}
.status-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-new      { color: var(--status-new);      background: rgba(91,91,214,0.10); }
.status-progress { color: var(--status-progress); background: rgba(14,165,233,0.10); }
.status-waiting  { color: var(--status-waiting);  background: rgba(113,113,122,0.10); }
.status-resolved { color: var(--status-resolved); background: rgba(22,163,74,0.10); }
.status-urgent   { color: var(--status-urgent);   background: rgba(220,38,38,0.10); }

/* ===== Thread channel badge + source-post anchor (Noa C-N3) ===== */
.ch-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 500; color: var(--text-secondary);
  padding: 3px 9px; border-radius: 999px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
}
.ch-badge svg { width: 12px; height: 12px; }

.source-post {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 10px var(--space-6);
  background: var(--bg-canvas);
  border-bottom: 1px solid var(--border-subtle);
}
.source-thumb {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  display: grid; place-items: center;
  color: var(--text-tertiary);
  flex-shrink: 0;
  border: 1px solid var(--border-subtle);
}
.source-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.source-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--text-tertiary);
}
.source-caption {
  font-size: 12.5px; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.source-open {
  background: transparent; border: 0; cursor: pointer;
  color: var(--text-tertiary); width: 28px; height: 28px;
  display: grid; place-items: center; border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.source-open:hover { background: var(--bg-elevated); color: var(--text-secondary); }

/* ============================================================= THREAD == */
.thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.thread-empty {
  flex: 1; display: grid; place-items: center; text-align: center;
}
.thread-empty-art {
  width: 56px; height: 56px; margin: 0 auto var(--space-4);
  border-radius: var(--radius-lg); background: var(--bg-elevated);
  display: grid; place-items: center; color: var(--text-tertiary);
}
.thread-empty-title { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.thread-empty-sub { font-size: 13px; color: var(--text-secondary); }
/* Greeter AI summon in the empty state — co-pilot reachable with no ticket open. */
.thread-empty-ai {
  margin-top: var(--space-4);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  background: var(--brand-iris-tint); color: var(--brand-iris);
  border: 1px solid var(--brand-iris); cursor: pointer;
  font-size: 13px; font-weight: 600;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.thread-empty-ai svg { width: 16px; height: 16px; }
.thread-empty-ai:hover { background: var(--brand-iris); color: #fff; }

.thread-head {
  height: 52px; border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0 var(--space-6);
}
.thread-subject { font-size: 14px; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-channel { font-size: 11px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; }

.thread-body {
  flex: 1; overflow-y: auto; padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
}

.msg { display: flex; gap: var(--space-3); max-width: 76%; }
.msg.is-outbound { margin-left: auto; flex-direction: row-reverse; }
.msg-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-elevated); color: var(--text-secondary);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600; flex-shrink: 0;
}
.msg-avatar.is-agent { background: var(--brand-iris-tint); color: var(--brand-iris); }
.msg-avatar.is-clickable {
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.msg-avatar.is-clickable:hover {
  transform: scale(1.06);
  box-shadow: 0 0 0 2px var(--brand-iris-tint);
}
.msg-avatar.is-clickable:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-iris-ring);
}
.msg-avatar.is-draft {
  background: var(--bg-ai-draft); color: var(--brand-iris);
  border: 1px solid var(--brand-iris-tint);
}
.msg-bubble {
  background: var(--bg-elevated); color: var(--text-primary);
  padding: 10px 14px; border-radius: var(--radius-bubble);
  font-size: 12.5px; line-height: 1.5;
  /* Preserve customer line breaks, but allow rendering of multi-paragraph
     emails without ballooning every conversation. */
  white-space: pre-wrap;
  word-wrap: break-word;
}
.msg-meta { font-size: 10.5px; }
.thread-body { gap: var(--space-3); }
.msg.is-outbound .msg-bubble { background: var(--bg-base); border: 1px solid var(--border-subtle); }
.msg.is-draft .msg-bubble {
  background: var(--bg-ai-draft); border: 1px solid var(--brand-iris-tint);
}
.msg-meta {
  font-size: 11px; color: var(--text-tertiary); margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.msg.is-outbound .msg-meta { text-align: right; }
/* Shop Rules country tabs — a segmented filter, deliberately lighter than
   .hub-tab above it so the hierarchy reads (hub tab > country > card).
   One button per market config file; hidden entirely on a one-market shop. */
.sr-market-tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 3px; margin-bottom: var(--space-4, 14px);
  background: var(--bg-canvas); border: 1px solid var(--border-subtle);
  border-radius: 999px; width: fit-content; max-width: 100%;
}
.sr-market-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 13px; border: 0; border-radius: 999px;
  background: none; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 500;
  color: var(--text-secondary); white-space: nowrap;
}
.sr-market-tab:hover { background: var(--bg-elevated); color: var(--text-primary); }
.sr-market-tab.is-active {
  background: var(--bg-elevated); color: var(--text-primary); font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 18, 32, 0.06);
}
.sr-market-tab:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--brand-iris-ring); }
.sr-market-code {
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--text-tertiary);
}
.sr-market-tab.is-active .sr-market-code { color: var(--brand-iris); }

/* Bilingual threads (bejesa.cz, later .sk) — Airbnb pattern: the bubble holds
   the translated text, the customer's own wording hides behind a quiet link.
   Nothing here renders on a Polish thread: both hooks require body_customer. */
.msg-original-toggle {
  display: inline-block; margin-top: 6px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 11px; line-height: 1.4;
  color: var(--text-tertiary);
  text-decoration: underline; text-underline-offset: 2px;
}
.msg-original-toggle:hover { color: var(--brand-iris); }
.msg-original-toggle:focus-visible {
  outline: none; border-radius: var(--radius-sm);
  box-shadow: 0 0 0 3px var(--brand-iris-ring);
}
.msg-original {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 12px; font-style: italic;
  white-space: pre-wrap; word-wrap: break-word;
}

/* Thread-head language badge — same pill geometry as .ch-badge, iris-tinted
   because it signals a behaviour change (this reply gets translated). */
.lang-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 500; color: var(--brand-iris);
  padding: 3px 9px; border-radius: 999px;
  background: var(--bg-ai-draft);
  border: 1px solid var(--brand-iris-tint);
  white-space: nowrap;
}
.lang-badge-code { font-weight: 700; letter-spacing: 0.4px; }

.msg.is-draft .msg-bubble::before {
  content: "AI draft";
  display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--brand-iris);
  margin-bottom: var(--space-2);
}

/* Composer AI-draft badge — replaces the previous "action row under bubble".
   Pattern: when there's a pending Kasia draft, the composer pre-fills with it
   and shows a small iris label above. Operator edits inline or just hits Send. */
/* Compact strip per Noa's first spec — pill carries the iris signal,
   hairline below docks visually onto the textarea. */
.composer-draft-bar {
  display: flex; align-items: center; gap: 6px;
  padding-bottom: 5px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--brand-iris-edge);
}
.composer-draft-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 600; line-height: 14px;
  letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--brand-iris);
  background: var(--ai-mark-tint);
  border: 1px solid var(--brand-iris-edge);
  padding: 2px 7px; border-radius: 999px;
}
.composer-draft-badge.is-edited {
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border-color: var(--border-subtle);
}
.composer-draft-actions { display: inline-flex; gap: 4px; margin-left: auto; }
.composer-mini-btn {
  display: inline-flex; align-items: center; gap: 3px;
  font: inherit; font-size: 11px; font-weight: 500; line-height: 14px;
  color: var(--text-tertiary);
  background: transparent; border: 1px solid transparent;
  padding: 2px 6px; border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.composer-mini-btn:hover { color: var(--brand-iris); background: var(--brand-iris-tint); }
.composer-mini-btn:active { color: var(--brand-iris-pressed); background: var(--brand-iris-tint); }
.composer-mini-btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--brand-iris-ring); }
@media (max-width: 768px) {
  .composer-mini-btn { padding: 8px 10px; font-size: 12px; line-height: 16px; border-radius: var(--radius-md); }
  .composer-draft-bar { padding-bottom: 6px; margin-bottom: 8px; }
}

.composer {
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-4) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--bg-base);
}
.composer textarea {
  width: 100%; min-height: 80px;
  /* Native resize handle lives bottom-right and grows downward — useless
     when the composer is pinned to the page bottom. We render our own grip
     above the textarea (.composer-resize-grip) that grows it upward instead. */
  resize: none;
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: var(--space-3); font: inherit; color: var(--text-primary);
  /* Match the message bubble typography so the draft reads as the same kind of
     text it'll become once sent. */
  font-size: 12.5px; line-height: 1.5;
  background: var(--bg-base); outline: 0;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
/* Hidden file input — paperclip "Attach" button triggers it via .click(). */
.composer-file-input { display: none !important; }

/* ========================================================== COMPOSE-MODAL == */
/* Modal for operator-initiated outbound email. Centered card, dim backdrop.
   Per Noa's compose-modal spec — reuses textarea / focus / chip patterns
   from the reply composer so the typographic rhythm matches. */
.compose-backdrop {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(10,10,10,0.32);
  display: grid; place-items: center;
  padding: var(--space-6);
  animation: composeFadeIn var(--dur-normal) var(--ease-out);
}
.compose-modal {
  width: 100%; max-width: 560px;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(10,10,10,0.18), var(--elev-1);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
  position: relative;
  animation: composeRise var(--dur-normal) var(--ease-out);
}
@keyframes composeFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes composeRise {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.compose-head {
  display: flex; align-items: center; justify-content: space-between;
}
.compose-title {
  font-size: 15px; font-weight: 600;
  letter-spacing: -0.1px;
  color: var(--text-primary);
}
.compose-fields {
  display: flex; flex-direction: column; gap: var(--space-3);
}
.compose-field {
  display: flex; flex-direction: column; gap: 6px;
}
.compose-label {
  font-size: 11.5px; font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.1px;
}
.compose-input, .compose-textarea {
  width: 100%;
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  font: inherit; font-size: 12.5px; line-height: 1.5;
  color: var(--text-primary); outline: 0;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.compose-textarea {
  min-height: 180px;
  resize: vertical;
}
.compose-input::placeholder,
.compose-textarea::placeholder { color: var(--text-tertiary); }
.compose-input:focus,
.compose-textarea:focus {
  border-color: var(--brand-iris);
  box-shadow: 0 0 0 3px var(--brand-iris-ring);
}
.compose-input.is-error,
.compose-textarea.is-error {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(220,38,38,0.18);
}
.compose-field-error {
  font-size: 11px; color: var(--danger);
  margin-top: 2px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.1px;
}
.compose-attach-row {
  display: flex; align-items: center; justify-content: flex-start;
}
.compose-form-error {
  font-size: 11.5px; color: var(--danger);
  background: rgba(220,38,38,0.06);
  border: 1px solid rgba(220,38,38,0.18);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-family: 'JetBrains Mono', monospace;
}
.compose-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}
.btn-ghost {
  background: transparent; color: var(--text-secondary);
  border: 1px solid transparent;
  padding: 8px 16px; border-radius: var(--radius-md);
  font: inherit; font-weight: 500; font-size: 13px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn-ghost:hover { background: var(--bg-elevated); color: var(--text-primary); }
.btn-primary.is-quiet {
  background: var(--bg-pressed);
  color: var(--text-tertiary);
  cursor: pointer;
}
.btn-primary.is-quiet:hover { background: var(--bg-pressed); }
.btn-primary.is-sending {
  background: var(--brand-iris);
  pointer-events: none;
  position: relative; padding-right: 36px;
}
.btn-primary.is-sending::after {
  content: ""; position: absolute; right: 14px; top: 50%;
  width: 12px; height: 12px; margin-top: -6px;
  border: 1.5px solid rgba(255,255,255,0.4);
  border-top-color: #FFFFFF; border-radius: 50%;
  animation: composeSpin 720ms linear infinite;
}
@keyframes composeSpin { to { transform: rotate(360deg); } }

/* Dirty-cancel confirmation overlay — sits INSIDE the modal, not stacked. */
.compose-confirm {
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.92);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg);
  animation: composeFadeIn var(--dur-fast) var(--ease-out);
}
.compose-confirm-card {
  text-align: center; max-width: 320px;
  display: flex; flex-direction: column; gap: var(--space-3);
}
.compose-confirm-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.compose-confirm-sub   { font-size: 12px; color: var(--text-secondary); }
.compose-confirm-actions { display: flex; justify-content: center; gap: var(--space-2); }
.btn-ghost.is-danger { color: var(--danger); }
.btn-ghost.is-danger:hover { color: var(--danger); background: rgba(220,38,38,0.08); }

/* Custom resize grip — sits between the thread body and the textarea.
   Drag up to make the textarea taller. Visually a thin neutral bar with a
   short centered handle so it reads as draggable without shouting. */
.composer-resize-grip {
  height: 10px; margin-bottom: -2px;
  cursor: ns-resize;
  display: flex; align-items: center; justify-content: center;
  user-select: none;
}
.composer-resize-grip::before {
  content: ""; display: block;
  width: 36px; height: 3px; border-radius: 2px;
  background: var(--border-default);
  transition: background var(--dur-fast) var(--ease-out), width var(--dur-fast) var(--ease-out);
}
.composer-resize-grip:hover::before { background: var(--brand-iris); width: 56px; }
.composer textarea:focus {
  border-color: var(--brand-iris);
  box-shadow: 0 0 0 3px var(--brand-iris-ring);
}
.composer textarea::placeholder { color: var(--text-tertiary); }
.composer-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.composer-row .composer-mini-btn { margin-left: auto; }
.composer-row .btn-primary { margin-left: var(--space-2); }
.composer-hints { font-size: 11px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; }

/* Attachment chips strip — sits between textarea and the action row. */
.composer-attachments {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: var(--space-2);
}
.attachment-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; line-height: 1; color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 4px 6px 4px 10px;
  max-width: 220px;
}
.attachment-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.attachment-chip-size { color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; font-size: 10px; }
.attachment-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  font-size: 10px; line-height: 1; color: var(--text-tertiary);
  background: transparent; border: 0; border-radius: 50%;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.attachment-chip-x:hover { background: var(--bg-base); color: var(--text-primary); }
.btn-primary {
  background: var(--brand-iris); color: #FFFFFF;
  border: 0; border-radius: var(--radius-md);
  padding: 8px 16px; font: inherit; font-weight: 500; font-size: 13px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.btn-primary:hover { background: var(--brand-iris-hover); }
.btn-primary:active { background: var(--brand-iris-pressed); }

/* .btn-secondary — the quiet counterpart to .btn-primary.

   This class was referenced 28 times across five modules (product_knowledge,
   reviews, op_context, pk_custom_columns) and DEFINED NOWHERE, so every one of
   those buttons rendered as a raw browser default: system font, beveled grey
   chrome, no hover, no focus ring, no touch target. Because .btn-primary IS
   defined, the filled iris buttons looked right while everything beside them
   looked unstyled — which is most of what "nie wygląda brandowo" meant when
   Rafał looked at the Reviews panel (Noa spec 2026-08-04 §1.1).

   Defining it here repairs Reviews, Products, Op Context and PK columns at
   once. */
.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  position: relative;
  background: transparent; color: var(--text-secondary);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: 8px 16px; font: inherit; font-weight: 500; font-size: 13px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
/* 34px visual + 5px inset per side = the 44px touch target. Invisible, so it
   is exempt from the 4px spacing rhythm. */
.btn-secondary::after { content: ""; position: absolute; inset: -5px 0; }
.btn-secondary:hover {
  background: var(--bg-elevated); border-color: var(--border-strong);
  color: var(--text-primary);
}
.btn-secondary:active { background: var(--bg-pressed); }
.btn-secondary:focus-visible {
  outline: 0; box-shadow: 0 0 0 3px var(--brand-iris-ring);
}
.btn-secondary:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-secondary:disabled:hover {
  background: transparent; border-color: var(--border-default);
  color: var(--text-secondary);
}

/* ========================================================== PLACEHOLDER == */
/* Used when a module other than Inbox is opened (Chat / Social). The three
   columns stay in the DOM but are hidden — workspace becomes a single
   centered card so the rest of the chrome stays calm. Topbar still pins
   to the top via flex-direction:column + flex:none on the topbar; the
   placeholder card centres in the remaining space. */
.workspace.is-placeholder {
  display: flex; flex-direction: column;
  align-items: stretch; justify-content: flex-start;
}
.workspace.is-placeholder > .workspace-topbar { flex: none; }
.workspace.is-placeholder > .inbox,
.workspace.is-placeholder > .thread,
.workspace.is-placeholder > .context { display: none; }
.workspace.is-placeholder > .placeholder {
  flex: 1; display: grid; place-items: center; padding: var(--space-8);
}
.placeholder { text-align: center; max-width: 420px; }
.placeholder-art {
  width: 48px; height: 48px; border-radius: 999px;
  background: var(--bg-elevated); margin: 0 auto var(--space-4);
  display: grid; place-items: center;
}
.placeholder-art-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-tertiary);
}
.placeholder-title { font-size: 17px; font-weight: 600; letter-spacing: -0.2px; margin-bottom: var(--space-2); }
.placeholder-sub { color: var(--text-secondary); margin-bottom: var(--space-4); }
.placeholder-badge {
  display: inline-flex; align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.4px;
  color: var(--text-tertiary);
  padding: 4px 10px; border-radius: 999px;
  background: var(--bg-elevated);
}

.inbox-empty {
  list-style: none; padding: var(--space-6) var(--space-4);
  text-align: center; color: var(--text-tertiary); font-size: 12.5px;
}

.msg-stack { display: flex; flex-direction: column; min-width: 0; }

/* ============================================================ CONTEXT == */
.context {
  background: var(--bg-context);
  border-left: 1px solid var(--border-subtle);
  overflow-y: auto; min-width: 0;
}
.context-empty {
  padding: var(--space-8) var(--space-6);
  text-align: center; color: var(--text-tertiary); font-size: 12.5px;
}
.ctx-block { padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border-subtle); }
.ctx-block:last-child { border-bottom: none; }
.ctx-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-3); padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}
.ctx-customer { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.ctx-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg-base); border: 1px solid var(--border-subtle);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
}
.ctx-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.ctx-sub { font-size: 11.5px; color: var(--text-tertiary); }
.ctx-kv {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-3);
  padding: 5px 0;
  font-size: 12px;
}
.ctx-kv-key { color: var(--text-tertiary); flex-shrink: 0; }
.ctx-kv-val {
  color: var(--text-primary); font-variant-numeric: tabular-nums;
  text-align: right; min-width: 0; word-break: break-word;
}
.ctx-kv-val.ctx-kv-mono { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; }
/* Phone — a dialable value, so it reads as text until you reach for it. No
   iris fill: the panel is reference material, not a call to action. */
.ctx-kv-val.ctx-kv-link {
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  color: var(--text-primary); text-decoration: none;
  border-bottom: 1px solid var(--border-default);
}
.ctx-kv-val.ctx-kv-link:hover { color: var(--brand-iris); border-bottom-color: var(--brand-iris); }
.ctx-kv-val.ctx-kv-link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-iris-ring); border-radius: 2px; }
.ctx-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ctx-tag {
  font-size: 11px; padding: 3px 8px; border-radius: 999px;
  background: var(--bg-base); border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

/* ========================================================== CTX-ACTION == */
/* Required-action card — surfaces Kasia's wymagana_akcja in the context
   panel. Sits between Tags and Block-sender. Iris-tinted card with a 3px
   accent bar — distinct from neutral .ctx-kv rows but calm (not red/amber).
   See Noa's spec (2026-05-21). */
.ctx-action-inner {
  background: var(--brand-iris-tint);
  border-left: 3px solid var(--brand-iris);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: var(--space-2);
  transition: background-color 200ms var(--ease-out),
              border-left-color 200ms var(--ease-out);
}
.ctx-action-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 500;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--brand-iris);
  margin: 0; padding: 0; border: 0;
}
.ctx-action-body {
  font-size: 12.5px; line-height: 1.5;
  color: var(--text-primary);
  word-break: break-word;
  /* Clamp to 2 lines — long Kasia instructions live in the `title` tooltip
     instead of swelling the card to bury Open Order / Email rows below. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  cursor: help;
}
.ctx-action-body a {
  color: var(--brand-iris); font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--brand-iris) 50%, transparent);
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}
.ctx-action-body a:hover {
  color: var(--brand-iris-hover);
  text-decoration-color: var(--brand-iris);
}
.ctx-action-body a:focus-visible {
  outline: 2px solid var(--brand-iris-ring); outline-offset: 2px; border-radius: 2px;
}
.ctx-action-foot {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--space-1);
  padding: 6px 4px; min-height: 32px;
  font-size: 11.5px; color: var(--text-tertiary);
  cursor: pointer; user-select: none;
  border: 0; background: transparent;
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-out);
  align-self: flex-start;
}
.ctx-action-foot:hover { color: var(--brand-iris); }
.ctx-action-foot:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-iris-ring); }
/* "Open in BL" link variant — replaces "Undo" when actor='agent' (Option A).
   "Undo" misled — it only flipped our flag, never reverted BL. This link
   opens the order in BaseLinker for manual verification/rollback. */
.ctx-action-foot.is-link {
  text-decoration: none;
  color: var(--brand-iris);
}
.ctx-action-foot.is-link:hover { color: var(--brand-iris-hover); }
.ctx-action-toggle-dot.is-dim {
  border: 0; background: transparent; color: currentColor;
}
.ctx-action-toggle-dot.is-dim svg {
  width: 12px; height: 12px; opacity: 1;
}

/* Edit-action affordance (Noa spec §4.1, 2026-06-02). Sits left of
   "Open in BL" in the foot row, separated by a bullet dot. */
.ctx-action-foot-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.ctx-action-foot-sep {
  color: var(--text-quaternary);
  font-size: 11.5px;
  user-select: none;
}
.ctx-action-foot.is-edit {
  margin-top: 0;            /* row owns the top margin */
  color: var(--text-tertiary);
  text-decoration: none;
  font-weight: 500;
}
.ctx-action-foot.is-edit:hover { color: var(--brand-iris); }

/* Transient "BL updated." pill below the action card after a successful
   operator-edit. Self-removes after total ~2.8s. */
.ctx-action-toast {
  font-size: 11.5px;
  color: var(--brand-iris);
  background: var(--brand-iris-tint);
  border: 1px solid var(--brand-iris-edge);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  margin-top: var(--space-2);
  display: inline-block;
  animation: ctx-toast-in 180ms var(--ease-out), ctx-toast-out 240ms var(--ease-out) 2400ms forwards;
}
@keyframes ctx-toast-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ctx-toast-out {
  to { opacity: 0; transform: translateY(-4px); }
}
.ctx-action-toggle-dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid currentColor; background: transparent;
  display: inline-grid; place-items: center; flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.ctx-action-toggle-dot svg { width: 10px; height: 10px; opacity: 0; }
/* Error state — BL execution failed. Label + accent shift to danger but
   the rest of the card stays calm so it doesn't read as a system alarm. */
.ctx-action.is-error .ctx-action-inner {
  background: var(--bg-base);
  border-left-color: var(--danger);
}
.ctx-action.is-error .ctx-action-label { color: var(--danger); }
.ctx-action-error {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--danger);
  background: rgba(220,38,38,0.06);
  border: 1px solid rgba(220,38,38,0.18);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  margin-top: var(--space-1);
  word-break: break-word;
}

/* DONE state */
.ctx-action.is-done .ctx-action-inner {
  background: var(--bg-base);
  border-left-color: var(--border-default);
}
.ctx-action.is-done .ctx-action-label { color: var(--text-tertiary); }
.ctx-action.is-done .ctx-action-body  { color: var(--text-tertiary); }
.ctx-action.is-done .ctx-action-body a {
  color: var(--text-tertiary);
  text-decoration-color: color-mix(in srgb, var(--text-tertiary) 50%, transparent);
}
.ctx-action.is-done .ctx-action-body a:hover { color: var(--brand-iris); }
.ctx-action.is-done .ctx-action-toggle-dot {
  background: var(--brand-iris); border-color: var(--brand-iris); color: #fff;
}
.ctx-action.is-done .ctx-action-toggle-dot svg { opacity: 1; }

/* ====================================================================
   C-N4 / C-N5 / C-N6 / C-N7 — operator actions + attachments (Noa)
   Copied 1:1 from §05 of Greeter_brandbook.html. Source of truth lives
   in the brandbook; update HERE only if you also update there.
   ==================================================================== */

/* ============ C-N4 — Status changer (clickable pill + popover) ====== */
.sp-clickable {
  cursor: pointer;
  transition: filter var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  position: relative; padding-right: 22px; user-select: none;
}
.sp-clickable::after {
  content: ''; position: absolute; right: 8px; top: 50%;
  width: 8px; height: 8px;
  transform: translateY(-65%) rotate(45deg);
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  opacity: 0.55;
}
.sp-clickable:hover { filter: brightness(0.97); box-shadow: var(--elev-1); }
.sp-clickable:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-iris-ring); }

.status-popover {
  position: absolute; z-index: 50;
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(10,10,10,0.08), 0 2px 6px rgba(10,10,10,0.04);
  padding: 4px; width: 240px;
}
.status-popover[hidden] { display: none; }
.status-popover-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: 6px; cursor: pointer;
  font-size: 12.5px; color: var(--text-primary);
  transition: background var(--dur-fast) var(--ease-out);
}
.status-popover-row:hover { background: var(--bg-elevated); }
.status-popover-row.is-current { background: var(--brand-iris-tint); }
.status-popover-row.is-current .status-popover-name { color: var(--brand-iris); font-weight: 500; }
.status-popover-row .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.status-popover-name { flex: 1; }
.status-popover-kbd {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  color: var(--text-tertiary); padding: 1px 5px; border-radius: 3px;
}

/* Sp dot fills per status (status pills already exist in .status-pill rule;
   we still need a usable .dot inside the popover) */
.status-popover-row[data-status="new"]      .dot { background: var(--status-new); }
.status-popover-row[data-status="in_progress"] .dot { background: var(--status-progress); }
.status-popover-row[data-status="awaiting_customer"] .dot { background: var(--status-waiting); }
.status-popover-row[data-status="resolved"] .dot { background: var(--status-resolved); }
.status-popover-row[data-status="spam"]     .dot { background: var(--text-tertiary); }

/* Quick-resolve — sits right of status pill in thread head */
.quick-resolve-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 7px;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 11px; font-weight: 500; line-height: 1.2;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.quick-resolve-btn:hover {
  background: rgba(22,163,74,0.10);
  color: var(--status-resolved);
  border-color: rgba(22,163,74,0.20);
}
.quick-resolve-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-iris-ring); }
.quick-resolve-btn svg { width: 11px; height: 11px; stroke-width: 2; }
.quick-resolve-btn .quick-resolve-kbd {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
  color: var(--text-tertiary); margin-left: 2px;
}
.quick-resolve-btn:hover .quick-resolve-kbd { color: var(--status-resolved); opacity: 0.7; }

/* ============ C-N5 — Spam ignore (inbox row + undo toast) =========== */
.convo-item .cn5-actions-slot {
  position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%);
  display: flex; gap: 4px;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
  background: linear-gradient(90deg, transparent, var(--bg-canvas) 30%);
  padding-left: 28px;
  pointer-events: none;
}
.convo-item { position: relative; }
.convo-item:hover .cn5-actions-slot,
.convo-item:focus-within .cn5-actions-slot { opacity: 1; pointer-events: auto; }
.cn5-row-action {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.cn5-row-action:hover { color: var(--text-primary); border-color: var(--border-default); }
.cn5-row-action.is-destructive:hover {
  color: var(--danger);
  border-color: rgba(220,38,38,0.20);
  background: rgba(220,38,38,0.10);
}
.cn5-row-action svg { width: 12px; height: 12px; stroke-width: 1.7; }

/* Undo toast — fixed at bottom of workspace, slate dark */
.cn5-toast {
  position: fixed; bottom: 20px; left: 50%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 12px 10px 14px;
  background: var(--text-primary);
  color: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(10,10,10,0.20), 0 2px 6px rgba(10,10,10,0.10);
  font-size: 12.5px; font-weight: 450;
  z-index: 100;
  animation: cn5-toast-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes cn5-toast-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.cn5-toast-body { display: flex; flex-direction: column; gap: 1px; }
.cn5-toast-title { color: #FFFFFF; }
.cn5-toast-meta { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: rgba(255,255,255,0.55); }
.cn5-toast-undo {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: #FFFFFF;
  font-family: inherit; font-size: 11.5px; font-weight: 500;
  padding: 4px 10px; border-radius: 6px; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.cn5-toast-undo:hover { background: rgba(255,255,255,0.08); }
.cn5-toast-undo .kbd {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.20);
  color: #FFFFFF; opacity: 0.85;
  margin-left: 4px; padding: 1px 4px; border-radius: 3px;
}

/* ============ C-N6 — Block sender (toggle + badge) ================== */
.cn6-toggle-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--space-3);
}
.cn6-toggle-body { flex: 1; }
.cn6-toggle-title { font-size: 12.5px; font-weight: 500; color: var(--text-primary); margin-bottom: 2px; }
.cn6-toggle-help  { font-size: 11.5px; color: var(--text-tertiary); line-height: 1.45; }
.cn6-switch {
  position: relative;
  width: 30px; height: 18px;
  background: var(--bg-pressed);
  border-radius: 999px; cursor: pointer; flex-shrink: 0;
  margin-top: 2px;
  border: 1px solid var(--border-subtle);
  transition: background var(--dur-fast) var(--ease-out);
}
.cn6-switch::after {
  content: ''; position: absolute; left: 2px; top: 1px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg-base);
  box-shadow: var(--elev-1);
  transition: transform var(--dur-normal) var(--ease-out);
}
.cn6-switch.is-on { background: var(--brand-iris); border-color: var(--brand-iris); }
.cn6-switch.is-on::after { transform: translateX(12px); }
.cn6-switch:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-iris-ring); }
.cn6-blocked-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px 2px 7px;
  background: rgba(220,38,38,0.10); border: 1px solid rgba(220,38,38,0.20);
  border-radius: 999px;
  color: var(--danger);
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.1px; line-height: 1.3;
}
.cn6-blocked-badge svg { width: 10px; height: 10px; stroke-width: 1.7; }

/* Inbox row variant: strikethrough name + neutral badge when sender blocked */
.convo-item.is-blocked-sender .convo-name,
.convo-item.is-blocked-sender .convo-preview {
  color: var(--text-tertiary);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* ============ C-N7 — Attachments (image grid + file chips) ========== */
.cn7-attach-grid {
  display: grid; gap: 6px; margin-top: 6px;
  max-width: 240px;
}
.cn7-attach-grid.count-1 { grid-template-columns: 1fr; }
.cn7-attach-grid.count-2,
.cn7-attach-grid.count-3,
.cn7-attach-grid.count-4 { grid-template-columns: 1fr 1fr; }
.cn7-attach-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.cn7-attach-thumb:hover { border-color: var(--border-default); }
.cn7-attach-thumb:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-iris-ring); }
.cn7-attach-grid.count-1 .cn7-attach-thumb { aspect-ratio: auto; max-height: 240px; min-height: 140px; }
.cn7-attach-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cn7-thumb-overlay {
  position: absolute; inset: 0;
  background: rgba(10,10,10,0.45);
  color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
}

/* Non-image attachments — file chip list under bubble */
.cn7-file-list {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 8px;
  max-width: 280px;
}
.cn7-file-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 8px;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  font-size: 12px; color: var(--text-primary); text-decoration: none;
  transition: all var(--dur-fast) var(--ease-out);
  cursor: pointer; line-height: 1.3;
}
.cn7-file-chip:hover { border-color: var(--border-default); background: var(--bg-elevated); }
.cn7-file-chip-icon {
  width: 24px; height: 24px; border-radius: 4px;
  background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cn7-file-chip-icon svg { width: 12px; height: 12px; stroke-width: 1.6; }
.cn7-file-chip-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.cn7-file-chip-meta { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-tertiary); flex-shrink: 0; }

/* Lightbox for image click-to-expand */
.cn7-lightbox {
  position: fixed; inset: 0;
  background: rgba(10,10,10,0.85);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; cursor: zoom-out;
}
.cn7-lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 8px; }

/* Video attachments — inline HTML5 player. Added 2026-05-26 (Rafał: needed
   to view phone-shot clips customers send as evidence). */
.cn7-attach-videos {
  display: flex; flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.cn7-attach-video-wrap {
  display: flex; flex-direction: column; gap: 4px;
  max-width: 480px;
}
.cn7-attach-video {
  display: block;
  width: 100%;
  max-height: 400px;
  border-radius: var(--radius-md);
  background: #000;
  outline: none;
}
.cn7-attach-video-meta {
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* ============================================================== KASIA == */
/* Streaming Rules Engine — Reguły + Log nauki tabs.
   Per Noa spec v2 §2-§3. Severity labels in UI = English raw
   (CRITICAL/RULE/PREFERENCE) per Rafał override 2026-05-25.
   All other microcopy Polish (primary user = Rafał). */

/* Workspace mode-switch: hide inbox/thread/context, show kasia-shell. */
.workspace.is-kasia { grid-template-columns: 1fr; }
.workspace.is-kasia > .inbox,
.workspace.is-kasia > .thread,
.workspace.is-kasia > .context { display: none; }
.workspace.is-kasia > .kasia-shell { display: flex; }
.workspace:not(.is-kasia) > .kasia-shell { display: none; }

.kasia-shell {
  flex-direction: column;
  width: 100%; height: 100%;
  background: var(--bg-base);
  overflow: hidden;
}

.kasia-head {
  height: 52px;
  flex: 0 0 52px;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--space-8);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-base);
}

.kasia-tabs { display: flex; gap: 0; }
.kasia-tab {
  font: inherit; font-size: 13px; font-weight: 500;
  color: var(--text-tertiary);
  background: transparent; border: 0;
  padding: 0 var(--space-4); height: 52px;
  cursor: pointer; position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}
.kasia-tab:hover { color: var(--text-secondary); }
.kasia-tab.is-active { color: var(--text-primary); font-weight: 600; }
.kasia-tab.is-active::after {
  content: '';
  position: absolute; bottom: 0; left: var(--space-4); right: var(--space-4);
  height: 2px; background: var(--brand-iris);
  border-radius: 2px 2px 0 0;
}
.kasia-tab:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--brand-iris-ring);
  border-radius: var(--radius-sm);
}

.kasia-head-actions { display: flex; align-items: center; gap: var(--space-2); }

.kasia-content {
  flex: 1; overflow-y: auto;
  background: var(--bg-base);
}
.kasia-content[hidden] { display: none; }

/* ----- Rules tab ---------- */

.rules-filters {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-8);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-canvas);
  position: sticky; top: 0; z-index: 9;
}

.rules-search {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 7px var(--space-3);
  background: var(--bg-base);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  min-width: 220px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.rules-search:focus-within { border-color: var(--border-subtle); }
.rules-search svg { color: var(--text-tertiary); flex-shrink: 0; }
.rules-search input {
  font: inherit; font-size: 12.5px;
  color: var(--text-primary);
  background: transparent; border: 0; outline: 0;
  width: 100%;
}
.rules-search input::placeholder { color: var(--text-tertiary); }

.rules-filter-chips { display: flex; gap: var(--space-1); }
.filter-chip {
  font: inherit; font-size: 11.5px; font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 4px 10px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.filter-chip:hover { border-color: var(--border-default); color: var(--text-primary); }
.filter-chip.is-active {
  background: var(--brand-iris-tint);
  border-color: var(--brand-iris-edge);
  color: var(--brand-iris);
}
.filter-chip:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--brand-iris-ring);
}

.rules-tag-filter { position: relative; }
.tag-filter-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 11.5px; font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 4px 10px;
  cursor: pointer;
}
.tag-filter-trigger:hover { border-color: var(--border-default); }
.tag-filter-trigger .filter-active-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px;
  background: var(--brand-iris); color: #fff;
  font-size: 10px; font-weight: 600;
  border-radius: 8px; padding: 0 4px;
}
.tag-filter-popover {
  position: absolute; top: calc(100% + 4px); left: 0;
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  padding: var(--space-2);
  min-width: 240px; max-height: 320px; overflow-y: auto;
  z-index: 50;
  display: flex; flex-direction: column; gap: 2px;
}
.tag-filter-popover[hidden] { display: none; }
.tag-option {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 6px var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12.5px; color: var(--text-primary);
}
.tag-option:hover { background: var(--bg-elevated); }
.tag-option input { margin: 0; cursor: pointer; }

.rules-list { display: flex; flex-direction: column; }

.rule-row {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4) var(--space-8);
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--dur-fast) var(--ease-out);
  position: relative;
}
.rule-row:hover { background: var(--bg-canvas); }
.rule-row.is-disabled { opacity: 0.55; }
.rule-row.is-disabled .rule-text { text-decoration: line-through; text-decoration-color: var(--text-tertiary); }

.rule-row-left { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.rule-id {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}

/* Effect badges — primary categorization (2026-05-29). Action vs Behavior
   replaces the old severity tier. Critical is now a tag, not a badge. */
.effect-badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}
.effect-badge-action   { background: rgba(59,130,246,0.10); color: #2563EB; }
.effect-badge-behavior { background: var(--bg-elevated); color: var(--text-secondary); }

/* Critical dot — small coloured marker reused in: filter chip, tag pill,
   modal toggle. Single source of truth so the colour stays consistent.
   Uses brand iris (Rafał 2026-06-01) so critical reads as "the brand
   signal" rather than a red alert. */
.critical-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-iris);
  margin-right: 6px;
  flex-shrink: 0;
}
.critical-dot-toggle { margin-right: 8px; }

/* Critical tag inside the rule-tag list — branded pill, stands out. */
.rule-tag-critical {
  display: inline-flex; align-items: center;
  color: var(--brand-iris) !important;
  background: var(--brand-iris-tint) !important;
  border-color: var(--brand-iris-edge) !important;
  font-weight: 600;
}
.rule-tag-critical .critical-dot { margin-right: 4px; }

/* Left rail of a critical rule gets a thin branded border accent so the
   row reads as "must follow" at a glance. */
.rule-row.is-critical { border-left: 2px solid var(--brand-iris); }

/* Filter chip — critical toggle variant. Pill that looks like a switch.
   Sits next to the effect chips on the filter bar. */
.filter-chip-critical {
  display: inline-flex; align-items: center;
  margin-left: var(--space-2);
}
.filter-chip-critical.is-active {
  background: var(--brand-iris-tint);
  border-color: var(--brand-iris-edge);
  color: var(--brand-iris);
}
.filter-chip-critical.is-active .critical-dot {
  box-shadow: 0 0 0 2px var(--brand-iris-ring);
}

/* Effect filter chips — neutral by default, branded when active. The
   action variant uses the brand iris so it doesn't compete with critical's
   red, and behavior stays muted. */
.filter-chip-effect-action.is-active {
  background: rgba(59,130,246,0.08);
  border-color: rgba(59,130,246,0.20);
  color: #2563EB;
}

/* Select-mode toggle chip — sits at the right of the filter bar. */
.filter-chip-select {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: auto;            /* pushes to the right edge */
}
.filter-chip-select.is-active {
  background: var(--brand-iris-tint);
  border-color: var(--brand-iris-edge);
  color: var(--brand-iris);
}
.filter-chip-select svg { width: 13px; height: 13px; }

/* Rule row checkbox shown in select mode — looks like a square toggle. */
.rule-select-checkbox {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border-default);
  border-radius: 4px;
  background: var(--bg-base);
  cursor: pointer;
  margin-right: 6px;
  transition: all var(--dur-fast) var(--ease-out);
}
.rule-select-checkbox:hover { border-color: var(--brand-iris); }
.rule-select-checkbox.is-checked {
  background: var(--brand-iris);
  border-color: var(--brand-iris);
  color: #FFFFFF;
}
.rule-select-checkbox.is-checked svg { color: #FFFFFF; }

/* Sticky bulk-action bar — appears at the bottom of the rules pane when
   selectMode is on AND items are selected. Sits inside the settings
   content area, sticking to the viewport bottom on scroll. */
.rules-bulk-bar {
  position: sticky; bottom: 0;
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-3);
  padding: 10px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--brand-iris-edge);
  border-radius: var(--radius-md);
  box-shadow: 0 -2px 12px rgba(10,10,10,0.06);
  z-index: 10;
}
.rules-bulk-count {
  flex: 1;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.rules-bulk-count strong { color: var(--brand-iris); font-weight: 600; margin-right: 2px; }
.rules-bulk-merge {
  display: inline-flex; align-items: center; gap: 6px;
}
.rules-bulk-merge.is-disabled {
  opacity: 0.5; cursor: not-allowed;
}
.rules-bulk-disable, .rules-bulk-clear {
  font-size: 12px;
}

/* Smart merge modal — reuses .kasia-modal* with one width override for
   the larger source-rules preview block. */
.kasia-modal-merge { width: 640px; max-width: calc(100vw - 32px); }
.merge-source-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 140px; overflow-y: auto;
  padding: 8px 10px;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.merge-source-row {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 11.5px;
  color: var(--text-tertiary);
}
.merge-source-row .rule-id {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 10.5px;
  color: var(--text-secondary);
  flex-shrink: 0;
  min-width: 32px;
}
.merge-source-preview {
  flex: 1; line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis;
}

.merge-loading {
  display: flex; align-items: center; gap: 10px;
  padding: 24px 12px;
  font-size: 12.5px; color: var(--text-secondary);
  background: var(--brand-iris-tint);
  border-radius: var(--radius-sm);
}
.merge-loading .btn-spinner svg { color: var(--brand-iris); }

.merge-char-counter {
  font-size: 10.5px; color: var(--text-tertiary);
  margin-top: 2px;
  text-align: right;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}
.merge-char-counter.is-near-limit { color: #B45309; }

.rule-row-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rule-text {
  font-size: 13px; line-height: 1.5;
  color: var(--text-primary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
}
.rule-row.is-expanded .rule-text { -webkit-line-clamp: unset; display: block; }
.rule-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.rule-tag {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 9.5px; font-weight: 500;
  color: var(--text-tertiary);
  background: transparent;
  padding: 1px 5px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  letter-spacing: 0.01em;
}

.rule-row-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  min-width: 90px;
}
.rule-instances {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  cursor: pointer; text-decoration: none; color: inherit;
}
.rule-instances:hover .rule-instances-count { color: var(--brand-iris); }
.rule-instances-count {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 12px; font-weight: 600;
  color: var(--text-primary);
  transition: color var(--dur-fast) var(--ease-out);
}
.rule-instances-last {
  font-size: 10.5px; color: var(--text-tertiary);
  white-space: nowrap;
}

.rule-actions {
  display: flex; gap: 4px;
  opacity: 1;
}

.rule-icon-btn {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer;
  color: var(--text-tertiary);
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.rule-icon-btn svg { width: 13px; height: 13px; }
.rule-icon-btn:hover { background: var(--bg-elevated); color: var(--text-primary); }
.rule-icon-btn.is-danger:hover { background: rgba(220,38,38,0.08); color: #DC2626; }
.rule-icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--brand-iris-ring); }

.rule-delete-confirm {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-2);
  font-size: 12.5px; color: var(--text-secondary);
}
.rule-delete-confirm .danger { color: #DC2626; font-weight: 500; }
.btn-cancel, .btn-confirm-danger {
  font: inherit; font-size: 12px; font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-base); color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.btn-cancel:hover { background: var(--bg-elevated); color: var(--text-primary); }
.btn-confirm-danger { background: #DC2626; color: #fff; border-color: #DC2626; }
.btn-confirm-danger:hover { background: #B91C1C; border-color: #B91C1C; }

/* ----- States ---------- */

.kasia-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8);
  min-height: 240px;
  text-align: center;
  color: var(--text-tertiary);
}
.kasia-state-title { font-size: 14px; font-weight: 500; color: var(--text-secondary); }
.kasia-state-sub { font-size: 12.5px; max-width: 360px; }
.kasia-state .btn-primary { margin-top: var(--space-2); }

.kasia-skeleton-row {
  display: grid; grid-template-columns: 72px 1fr 90px; gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
  border-bottom: 1px solid var(--border-subtle);
}
.kasia-skeleton {
  height: 12px; border-radius: 4px;
  background: linear-gradient(90deg, var(--bg-elevated) 0%, var(--bg-canvas) 50%, var(--bg-elevated) 100%);
  background-size: 200% 100%;
  animation: kasia-shimmer 1400ms ease-in-out infinite;
}
.kasia-skeleton.sk-id { width: 36px; }
.kasia-skeleton.sk-body { height: 14px; margin-bottom: 6px; }
.kasia-skeleton.sk-body-2 { height: 14px; width: 60%; }
.kasia-skeleton.sk-count { width: 36px; margin-left: auto; }
@keyframes kasia-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .kasia-skeleton { animation: none; background: var(--bg-elevated); }
}

/* ----- Add / Edit modal ---------- */

.kasia-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(10,10,10,0.40);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  animation: kasia-fade-in 180ms var(--ease-out);
}
@keyframes kasia-fade-in { from { opacity: 0; } to { opacity: 1; } }

.kasia-modal {
  width: 520px; max-width: calc(100vw - 32px); max-height: calc(100vh - 64px);
  background: var(--bg-base);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0,0,0,0.18);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: kasia-modal-in 180ms var(--ease-out);
}
@keyframes kasia-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.kasia-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}
.kasia-modal-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.kasia-modal-subtitle {
  font-size: 11.5px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.kasia-modal-error {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  color: #DC2626;
  background: rgba(220,38,38,0.06);
  border: 1px solid rgba(220,38,38,0.18);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: var(--space-2);
  word-break: break-word;
}
.kasia-field-input {
  font: inherit; font-size: 13px;
  color: var(--text-primary);
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.kasia-field-input:focus { outline: none; border-color: var(--brand-iris); }

/* Type-change hint inside the Edit Action modal — appears only when
   operator picks a different plan type than the original. Single iris
   line, no extra confirm modal (Hormozi rule, Noa spec §6.4). */
.action-edit-type-hint {
  font-size: 11.5px;
  color: var(--brand-iris);
  background: var(--brand-iris-tint);
  border: 1px solid var(--brand-iris-edge);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  margin-top: 6px;
  line-height: 1.4;
}
.action-edit-fields { display: flex; flex-direction: column; gap: var(--space-4); }

/* Spinner used inside .btn-primary while a PATCH is in flight. */
.btn-spinner {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  margin-right: 6px;
  color: currentColor;
  animation: btn-spin 0.9s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
.kasia-modal-close {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer;
  border-radius: var(--radius-sm); color: var(--text-tertiary);
}
.kasia-modal-close:hover { background: var(--bg-elevated); color: var(--text-primary); }

.kasia-modal-body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); overflow-y: auto; }

.kasia-field { display: flex; flex-direction: column; gap: 6px; }
.kasia-label { font-size: 11.5px; font-weight: 500; color: var(--text-secondary); }
.kasia-textarea {
  font: inherit; font-size: 13px; line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  min-height: 96px; resize: vertical;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.kasia-textarea:focus { outline: none; border-color: var(--brand-iris); }

/* Effect radio group inside the Add/Edit rule modal — wider option cards
   than the old severity buttons because each shows a one-line hint. */
.effect-radio-group { display: flex; gap: var(--space-1); }
.effect-option {
  flex: 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  font: inherit; font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  cursor: pointer; text-align: left;
  transition: all var(--dur-fast) var(--ease-out);
}
.effect-option:hover { border-color: var(--border-default); color: var(--text-primary); }
.effect-option-label {
  font-size: 13px; font-weight: 600;
  color: var(--text-primary);
}
.effect-option-hint {
  font-size: 11px; font-weight: 400;
  color: var(--text-tertiary);
  line-height: 1.35;
}
.effect-option.is-active.effect-option-action {
  background: rgba(59,130,246,0.06);
  border-color: rgba(59,130,246,0.30);
}
.effect-option.is-active.effect-option-action .effect-option-label {
  color: #2563EB;
}
.effect-option.is-active.effect-option-behavior {
  background: var(--brand-iris-tint);
  border-color: var(--brand-iris-edge);
}
.effect-option.is-active.effect-option-behavior .effect-option-label {
  color: var(--brand-iris);
}

/* Critical toggle inside the modal — switch-style row, full width. */
.critical-toggle {
  display: inline-flex; align-items: center;
  font: inherit; font-size: 12.5px; font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  cursor: pointer; text-align: left;
  transition: all var(--dur-fast) var(--ease-out);
}
.critical-toggle:hover { border-color: var(--border-default); color: var(--text-primary); }
.critical-toggle.is-active {
  background: var(--brand-iris-tint);
  border-color: var(--brand-iris-edge);
  color: var(--brand-iris);
}

.tag-input-field {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 6px var(--space-2);
  min-height: 38px;
}
.tag-input-field:focus-within { border-color: var(--brand-iris); }
.tag-chip-input-item {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--brand-iris-tint); color: var(--brand-iris);
  font-size: 11.5px; font-weight: 500;
  padding: 2px 8px; border-radius: 12px;
}
.tag-chip-input-x {
  width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer;
  color: inherit; opacity: 0.7;
  border-radius: 50%;
}
.tag-chip-input-x:hover { opacity: 1; background: rgba(91,91,214,0.16); }
.tag-input-field input {
  flex: 1; min-width: 80px;
  font: inherit; font-size: 12.5px; color: var(--text-primary);
  background: transparent; border: 0; outline: 0;
}

.kasia-modal-foot {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-canvas);
}
.btn-primary {
  font: inherit; font-size: 12.5px; font-weight: 600;
  background: var(--brand-iris); color: #fff;
  border: 0; border-radius: var(--radius-md);
  padding: 10px 16px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.btn-primary:hover { background: var(--brand-iris-hover); }
.btn-primary:active { background: var(--brand-iris-pressed); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* Iris primary - alias of .btn-primary for spec-named call sites
   (Draft with Kasia, Review and apply, Propose rule change). Top-level
   (NOT trainer-scoped) so kasia.js modal can use it outside .trainer-shell.
   Mirrors brandbook §3.4 iris primary token. */
.btn-primary-iris {
  font: inherit; font-size: 12.5px; font-weight: 600;
  background: var(--brand-iris); color: #fff;
  border: 0; border-radius: var(--radius-md);
  padding: 10px 16px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.btn-primary-iris:hover { background: var(--brand-iris-hover); }
.btn-primary-iris:active { background: var(--brand-iris-pressed); }
.btn-primary-iris:disabled { opacity: 0.5; cursor: not-allowed; }

.kasia-error-inline {
  font-size: 12px; color: #DC2626;
  padding: 6px var(--space-2);
  background: rgba(220,38,38,0.06);
  border-radius: var(--radius-sm);
}

/* ----- Training Log tab ---------- */

.log-filters {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-8);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-canvas);
  position: sticky; top: 0; z-index: 9;
}
.log-count-label { margin-left: auto; font-size: 11.5px; color: var(--text-tertiary); }

.log-timeline { display: flex; flex-direction: column; }

.log-entry {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-3) var(--space-8);
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
  position: relative;
}
.log-entry:hover { background: var(--bg-canvas); }
.log-entry.is-new-rule {
  border-left: 3px solid var(--brand-iris);
  padding-left: calc(var(--space-8) - 3px);
}
.log-entry.is-expanded { background: var(--bg-canvas); }

.log-timestamp { display: flex; flex-direction: column; gap: 2px; }
.log-time {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11px; color: var(--text-primary); font-weight: 500;
}
.log-date {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 10px; color: var(--text-tertiary);
}

.log-entry-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.log-entry-headline {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--text-primary);
}
.log-customer { font-weight: 500; }
.log-category { color: var(--text-secondary); }
.log-verdict-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 10px; font-weight: 600;
  padding: 2px 6px; border-radius: var(--radius-sm);
}
.verdict-match    { background: var(--brand-iris-tint); color: var(--brand-iris); }
.verdict-new_rule { background: var(--bg-elevated); color: var(--text-primary); }
.verdict-error    { background: rgba(220,38,38,0.10); color: #DC2626; }
.verdict-pending  { background: var(--bg-elevated); color: var(--text-tertiary); }
.log-confidence {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 10.5px; color: var(--text-tertiary);
}
.log-reasoning {
  font-size: 11.5px; color: var(--text-secondary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.log-entry.is-expanded .log-reasoning { -webkit-line-clamp: unset; display: block; }

.log-chevron {
  width: 18px; height: 18px;
  color: var(--text-tertiary);
  transition: transform 180ms var(--ease-out);
  align-self: center;
}
.log-entry.is-expanded .log-chevron { transform: rotate(90deg); }

.log-detail {
  display: none;
  grid-column: 1 / -1;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border-subtle);
}
.log-entry.is-expanded .log-detail { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

.log-detail-block {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--space-3);
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: 12px; line-height: 1.5; color: var(--text-primary);
  white-space: pre-wrap; word-wrap: break-word;
}
.log-detail-block-title {
  font-size: 10.5px; font-weight: 600; color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.log-detail-block.is-ai-reason {
  grid-column: 1 / -1;
  background: var(--bg-ai-draft);
  border-color: var(--brand-iris-edge);
}

.log-load-more-sentinel {
  height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-tertiary); font-size: 11.5px;
}

/* ============================================================ SIDEBAR == */
/* 220px channel-navigator sidebar — replaces 56px rail.
   Per Rafał spec v1 (HiveOS chat 2026-05-25) + Noa spec v3 §1.
   Logo zone + channel nav + Voice Agent + bottom-anchored Settings. */

.sidebar {
  width: 220px;
  background: var(--bg-rail);
  border-right: 1px solid var(--border-subtle);
  display: flex; flex-direction: column;
  flex-shrink: 0;
  padding: var(--space-4) 0 var(--space-2) 0;
  font-size: 13px;
}

.sidebar {
  transition: width var(--dur-normal) var(--ease-out);
}
.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 0 var(--space-4) var(--space-3) var(--space-4);
  height: 48px;
  flex-shrink: 0;
  position: relative;
}
.sidebar-collapse-btn {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(calc(-50% - var(--space-2) / 2));
  width: 24px; height: 24px;
  color: var(--text-tertiary);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.sidebar:hover .sidebar-collapse-btn,
.sidebar-collapse-btn:focus-visible { opacity: 1; }
.sidebar-collapse-btn .collapse-icon {
  transition: transform var(--dur-normal) var(--ease-out);
}
.sidebar.is-collapsed .sidebar-collapse-btn .collapse-icon {
  transform: rotate(180deg);
}

/* Collapsed state — 56px width, only icons visible (mirror of right-side context toggle) */
.sidebar.is-collapsed { width: 56px; }
.sidebar.is-collapsed .sidebar-brand-name,
.sidebar.is-collapsed .nav-label,
.sidebar.is-collapsed .nav-badge { display: none; }
.sidebar.is-collapsed .sidebar-brand {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  height: auto;
  padding: 0 0 var(--space-2) 0;
}
.sidebar.is-collapsed .sidebar-brand-mark { width: 32px; height: 32px; }
/* Expand button stacks BELOW the centred logo when collapsed — keeps logo
   visually centred (Rafał feedback 2026-05-26) while keeping toggle reachable. */
.sidebar.is-collapsed .sidebar-collapse-btn {
  position: static;
  transform: none;
  margin: 0;
  opacity: 1;
}
.sidebar.is-collapsed .nav-item {
  justify-content: center;
  padding-left: 0; padding-right: 0;
  gap: 0;
}
.sidebar.is-collapsed .sidebar-divider {
  margin-left: var(--space-3);
  margin-right: var(--space-3);
}
.sidebar-brand-mark {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--brand-iris);
  color: #fff;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.sidebar-brand-mark svg {
  width: 18px; height: 18px;
  display: block;
}
.sidebar-brand-name {
  font-size: 14px; font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}

.sidebar-nav,
.sidebar-section {
  display: flex; flex-direction: column;
  gap: 2px;
  padding: 0 var(--space-2);
}

.sidebar-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-2) var(--space-4);
  flex-shrink: 0;
}

.sidebar-foot {
  margin-top: auto;
  display: flex; flex-direction: column;
  flex-shrink: 0;
}
.sidebar-status {
  display: flex; justify-content: center;
  padding-top: var(--space-2);
}

/* Nav item — channel button OR system button (Voice, Settings) */
.nav-item {
  display: flex; align-items: center; gap: 10px;
  height: 36px;
  padding: 8px 12px;
  margin: 0;
  border-radius: var(--radius-md);
  background: transparent;
  border: 0; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 450;
  color: var(--text-secondary);
  text-align: left;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  width: 100%;
}
.nav-item:hover {
  background: rgba(10, 10, 10, 0.04);
  color: var(--text-primary);
}
.nav-item:hover .nav-icon { color: var(--text-secondary); }
.nav-item:hover .nav-badge { color: var(--text-secondary); }

.nav-item.is-active {
  background: var(--brand-iris-tint);
  color: var(--brand-iris);
  font-weight: 600;
}
.nav-item.is-active .nav-icon,
.nav-item.is-active .nav-badge { color: var(--brand-iris); }

.nav-item.is-disabled,
.nav-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.nav-item.is-disabled:hover,
.nav-item:disabled:hover {
  background: transparent;
  color: var(--text-secondary);
}

.nav-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--brand-iris-ring);
}

.nav-icon {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-tertiary);
  flex-shrink: 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-icon svg { width: 16px; height: 16px; display: block; }

.nav-label {
  flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.nav-badge {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 10.5px; font-weight: 500;
  color: var(--text-tertiary);
  padding: 1px 6px;
  border-radius: 999px;
  background: transparent;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  flex-shrink: 0;
}
.nav-item.is-active .nav-badge {
  background: rgba(91, 91, 214, 0.12);
  color: var(--brand-iris);
}

/* =========================================================== SETTINGS == */
/* Settings page — single full-width section replaces inbox/thread/context.
   2-column inside: 160px settings-nav + flex-1 settings-section.
   Per Rafał spec v1 §2 + Noa spec v3 §2. Activated via .workspace.is-settings. */

.workspace.is-settings { grid-template-columns: 1fr; }
.workspace.is-settings > .inbox,
.workspace.is-settings > .thread,
.workspace.is-settings > .context { display: none; }
.workspace.is-settings > .settings-shell { display: flex; }
.workspace:not(.is-settings) > .settings-shell { display: none; }

.settings-shell {
  flex-direction: column;
  width: 100%; height: 100%;
  background: var(--bg-base);
  overflow: hidden;
}

.settings-head {
  display: flex; align-items: center; gap: var(--space-4);
  padding: 0 var(--space-6);
  height: 52px;
  flex: 0 0 52px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-base);
}
.settings-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0; cursor: pointer;
  font: inherit; font-size: 13px;
  color: var(--text-secondary);
  padding: 6px 8px;
  border-radius: var(--radius-md);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.settings-back:hover { background: var(--bg-elevated); color: var(--text-primary); }
.settings-back svg { color: currentColor; }
.settings-title {
  font-size: 15px; font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.04em;
}

.settings-body {
  flex: 1;
  display: grid;
  grid-template-columns: 160px 1fr;
  min-height: 0;
}

.settings-nav {
  background: var(--bg-canvas);
  border-right: 1px solid var(--border-subtle);
  padding: var(--space-4) var(--space-3);
  display: flex; flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}
.settings-nav-label {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 10.5px;
  color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0 12px var(--space-2) 12px;
}
.settings-nav-item {
  display: flex; align-items: center;
  height: 32px;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  background: transparent;
  border: 0; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 450;
  color: var(--text-secondary);
  text-align: left;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.settings-nav-item:hover { background: rgba(10, 10, 10, 0.04); color: var(--text-primary); }
.settings-nav-item.is-active {
  background: var(--brand-iris-tint);
  color: var(--brand-iris);
  font-weight: 500;
}

.settings-section {
  overflow-y: auto;
  padding: var(--space-6) var(--space-8);
}
/* Constrain content width on wide screens — premium readability + breathing room. */
.settings-section > * {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

.settings-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--space-4);
}
.settings-section-title {
  font-size: 16px; font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.1px;
}
.settings-section-sub {
  font-size: 12.5px; color: var(--text-secondary);
  margin-bottom: var(--space-6);
  max-width: 560px;
}

.settings-card {
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

.settings-field {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: var(--space-4);
  max-width: 420px;
}
.settings-field-label {
  font-size: 11.5px; font-weight: 500;
  color: var(--text-secondary);
}
.settings-field-input {
  font: inherit; font-size: 13px;
  color: var(--text-primary);
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.settings-field-input:focus { outline: none; border-color: var(--brand-iris); }
.settings-field-input:disabled,
.settings-field-input[readonly] {
  background: var(--bg-canvas);
  color: var(--text-secondary);
  cursor: not-allowed;
}
.settings-field-meta {
  font-size: 11px; color: var(--text-tertiary);
}
.settings-field-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600;
  color: var(--brand-iris);
  background: var(--brand-iris-tint);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-left: var(--space-2);
}

.settings-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 600;
  margin-bottom: var(--space-4);
}

.settings-stub {
  background: var(--bg-canvas);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-align: center;
  color: var(--text-secondary);
  font-size: 12.5px;
  line-height: 1.6;
}
.settings-stub-title {
  font-size: 13.5px; font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 6px;
}

/* Settings Agent Rules section — host for kasia.js renderInto target.
   Premium spacing: row content has breathing room on both sides,
   filters bar sticks subtly, tags + icons trimmed down. */
.settings-rules-host { margin-top: var(--space-4); }
.settings-rules-host .kasia-content {
  background: var(--bg-base);
  padding: 0;
}
.settings-rules-host .rules-filters,
.settings-rules-host .log-filters {
  position: static;
  padding: var(--space-3) var(--space-4) var(--space-4) var(--space-4);
  background: transparent;
  border-bottom: 1px solid var(--border-subtle);
}
.settings-rules-host .rule-row,
.settings-rules-host .log-entry {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
.settings-rules-host .rule-row.is-new-rule,
.settings-rules-host .log-entry.is-new-rule {
  padding-left: calc(var(--space-4) - 3px);
}

/* Hide standalone kasia-shell — kasia now hosted inside Settings.
   The standalone workspace.is-kasia mode is dead since sidebar refactor.
   Selector matches DIRECT child only, so kasia-shell mounted INSIDE
   .settings-section (not direct workspace child) stays visible. */
.workspace:not(.is-kasia) > .kasia-shell { display: none !important; }

/* Embedded kasia inside Settings — drop the standalone shell chrome
   (tab bar + add button live in Settings nav + section header). */
.kasia-shell.is-embedded {
  display: flex !important;
  height: auto;
  flex: 1;
}
.kasia-shell.is-embedded > .kasia-head { display: none; }
.kasia-shell.is-embedded > .kasia-content { overflow: visible; }

/* ----- Profile section ---------- */
.profile-avatar-row {
  display: flex; align-items: center; gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.profile-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--brand-iris-tint);
  color: var(--brand-iris);
  display: grid; place-items: center;
  font-size: 15px; font-weight: 600;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.profile-avatar-name {
  font-size: 14px; font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.profile-avatar-hint {
  font-size: 12px; color: var(--text-tertiary);
}

/* ----- Security info card ---------- */
.security-info-card {
  display: flex; gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  max-width: 720px;
}
.security-info-icon {
  color: var(--text-tertiary);
  flex-shrink: 0;
  margin-top: 2px;
}
.security-info-body { flex: 1; min-width: 0; }
.security-info-title {
  font-size: 14px; font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.security-info-desc {
  font-size: 13px; color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 var(--space-1) 0;
}
.security-info-cmd {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-2) 0;
  overflow-x: auto; white-space: nowrap;
}
.security-info-cmd code { font: inherit; }
.mono-inline {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  background: var(--bg-elevated);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--text-primary);
}

/* Settings nav-item heights match spec v3 32px */
.settings-nav-item { min-height: 32px; }

/* Select element styling consistent with input */
.settings-field-input,
select.settings-field-input {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
}
select.settings-field-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
  cursor: pointer;
}

/* ========================================================================
   FB POST CONVERSATION VARIANT — visual identification spec by Noa
   (workspace/projects/kasia_rules_engine/noa_fb_post_visual_id_spec.md).
   Applies to channel='facebook_posts' conversations only. The base
   email-style classes still apply; these add the post-thumbnail anchor,
   per-bubble identity, parent threading, and FB-specific right rail.
   ====================================================================== */

/* ---------- Inbox row variant (left column, FB tickets) -------------- */
.convo-item.is-fb-post { display: flex; align-items: stretch; gap: var(--space-3); padding: 10px var(--space-3); }
.fb-row-thumb-wrap {
  position: relative;
  width: 32px; height: 32px;
  flex-shrink: 0;
  cursor: zoom-in;
}
.fb-row-thumb {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  object-fit: cover;
  background: var(--bg-elevated);
  display: block;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.fb-row-thumb-wrap:hover .fb-row-thumb {
  transform: scale(1.12);
  box-shadow: 0 2px 8px rgba(10,10,10,0.10);
}

/* Floating large-preview popover anchored to the thumb on hover. JS
   positions it next to the inbox row so it doesn't get clipped by the
   inbox column overflow. */
.greeter-hover-preview {
  position: fixed;
  z-index: 9999;
  width: 240px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  box-shadow: 0 8px 32px rgba(10,10,10,0.18);
  background: var(--bg-elevated);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.96) translateY(-4px);
  transition: opacity var(--dur-normal) var(--ease-out),
              transform var(--dur-normal) var(--ease-out);
}
.greeter-hover-preview.is-visible { opacity: 1; transform: scale(1) translateY(0); }
.greeter-hover-preview img {
  width: 100%; height: 240px;
  object-fit: cover;
  display: block;
}
.greeter-hover-preview-caption {
  padding: 8px 10px;
  font-size: 11.5px;
  color: var(--text-secondary);
  background: var(--bg-base);
  border-top: 1px solid var(--border-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* "+N" badge anchored top-right of the popover — informational only
   ("there are N more line items in this order, this image is the first").
   No interaction in v1 per Noa spec §3. */
.greeter-hover-preview-badge {
  position: absolute;
  top: 8px; right: 8px;
  background: rgba(10,10,10,0.75);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  padding: 3px 6px;
  border-radius: 3px;
  pointer-events: none;
}

/* Trigger affordance for Open Order product name when an image is available
   — dotted underline + zoom-in cursor. Hidden when no image_url (Noa: don't
   pollute the 99.5% case with an affordance that does nothing). */
.ctx-product-name {
  color: var(--text-primary);
  word-wrap: break-word;
}
.ctx-product-name.has-preview {
  cursor: zoom-in;
  text-decoration: underline dotted;
  text-decoration-color: var(--border-default);
  text-underline-offset: 2px;
}
.ctx-product-name.has-preview:hover {
  text-decoration-color: var(--brand-iris);
}
.fb-row-thumb-fallback {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  display: grid; place-items: center;
  color: var(--text-tertiary);
}
.fb-row-thumb-fallback svg { width: 14px; height: 14px; }
.fb-row-channel-inset {
  position: absolute;
  right: -4px; bottom: -4px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  display: grid; place-items: center;
  color: var(--text-secondary);
}
.fb-row-channel-inset svg { width: 9px; height: 9px; }
.fb-row-unread-dot {
  position: absolute;
  top: -2px; right: -2px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-iris);
  border: 2px solid var(--bg-rail);
}
.fb-row-sponsored-pill {
  position: absolute;
  top: -7px; left: -3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px; font-weight: 600;
  letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--brand-iris);
  background: var(--brand-iris-tint);
  padding: 1px 4px;
  border-radius: 3px;
  pointer-events: none;
}
.fb-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fb-row-primary {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-2);
}
.fb-row-primary-text {
  font-size: 12.5px;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.fb-row-prefix {
  color: var(--text-tertiary);
  font-weight: 400;
  margin-right: 4px;
}
.fb-row-snippet {
  color: var(--text-primary);
  font-weight: 500;
}
.fb-row-preview {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fb-row-preview-meta { color: var(--text-tertiary); }
.fb-row-preview-empty { color: var(--text-tertiary); font-style: italic; }

/* ---------- Thread bubble extensions (per-comment identity) ---------- */
.msg-stack { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.msg-header {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 4px;
  min-height: 16px;
}
.msg-header-name {
  font-size: 12px; font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 240px;
}
.msg-header-name.is-anonymous {
  color: var(--text-tertiary);
  font-style: italic;
  font-weight: 500;
}
.msg-header-dot { color: var(--text-tertiary); }
.msg-header-time {
  font-size: 10.5px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-tertiary);
}
.msg-header-permalink {
  margin-left: auto;
  background: transparent; border: 0; cursor: pointer;
  color: var(--text-tertiary);
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  opacity: 0;
}
.msg:hover .msg-header-permalink,
.msg-header-permalink:focus-visible { opacity: 1; }
.msg-header-permalink:hover { background: var(--bg-elevated); color: var(--brand-iris); }
.msg-header-permalink svg { width: 12px; height: 12px; }

.msg-parent-quote {
  display: flex; gap: 8px;
  padding: 4px 0 4px 8px;
  border-left: 2px solid var(--border-default);
  border-radius: 2px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.msg-parent-quote:hover { background: rgba(10,10,10,0.025); }
.msg-parent-quote-meta { flex-shrink: 0; min-width: 0; display: flex; flex-direction: column; }
.msg-parent-quote-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.msg-parent-quote-author {
  font-size: 11px; font-weight: 500;
  color: var(--text-secondary);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
}
.msg-parent-quote-body {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}

/* Pulse animation used when scrolling to a target message (reply-target
   click / commenter click / parent-quote click). */
.msg.is-pulsing > .msg-stack > .msg-bubble {
  box-shadow: 0 0 0 3px var(--brand-iris-ring);
  transition: box-shadow var(--dur-normal) var(--ease-out);
}

/* ---------- Right column — FB-specific blocks ----------------------- */
.ctx-block.is-reply-target {
  background: var(--brand-iris-tint);
  border-bottom: 1px solid var(--border-subtle);
  margin: 0 calc(-1 * var(--space-6)) 0;
  padding: var(--space-4) var(--space-6);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.ctx-block.is-reply-target:hover { background: rgba(91,91,214,0.12); }
.ctx-block.is-reply-target .ctx-label { color: var(--brand-iris); }
.reply-target-row {
  display: flex; align-items: center; gap: var(--space-3);
  margin-top: 6px;
}
.reply-target-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--border-subtle);
  object-fit: cover;
  flex-shrink: 0;
}
.reply-target-avatar-fallback {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand-iris-tint);
  color: var(--brand-iris);
  display: grid; place-items: center;
  font-size: 10px; font-weight: 600;
  flex-shrink: 0;
}
.reply-target-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.reply-target-sub {
  font-size: 11.5px; color: var(--text-secondary);
  margin-top: 2px;
  font-family: 'JetBrains Mono', monospace;
}

.ctx-block.is-source-post .source-post-thumb-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: var(--space-3) 0 var(--space-3);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  position: relative;
}
.source-post-thumb-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.source-post-thumb-fallback {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  color: var(--text-tertiary);
}
.source-post-thumb-fallback svg { width: 32px; height: 32px; }
.source-post-thumb-fallback-label {
  font-size: 11.5px;
  color: var(--text-tertiary);
  margin-top: 6px;
  position: absolute;
  bottom: 8px; left: 0; right: 0;
  text-align: center;
}
.source-post-sponsored-flag {
  position: absolute;
  top: 8px; left: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.6px; text-transform: uppercase;
  color: #FFFFFF;
  background: rgba(91,91,214,0.92);
  padding: 3px 7px;
  border-radius: 3px;
  pointer-events: none;
}
.source-post-body {
  font-size: 13px; line-height: 1.5;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.source-post-body.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.source-post-show-more {
  font-size: 11.5px; font-weight: 500;
  color: var(--brand-iris);
  background: none; border: 0;
  padding: 4px 0;
  cursor: pointer;
}
.source-post-show-more:hover { color: var(--brand-iris-pressed); }
.source-post-meta {
  font-size: 11.5px;
  color: var(--text-tertiary);
  font-family: 'JetBrains Mono', monospace;
  margin-top: var(--space-3);
}
.source-post-open {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--space-3);
  background: var(--bg-base);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  padding: 6px 10px;
  border-radius: var(--radius-md);
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.source-post-open:hover { background: var(--bg-elevated); }
.source-post-open svg { width: 13px; height: 13px; }

.ctx-block.is-commenters .commenter-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 6px 0;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-out);
}
.ctx-block.is-commenters .commenter-row:hover {
  background: rgba(10,10,10,0.025);
}
.commenter-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--border-subtle);
  object-fit: cover;
  flex-shrink: 0;
}
.commenter-avatar-fallback {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand-iris-tint);
  color: var(--brand-iris);
  display: grid; place-items: center;
  font-size: 10px; font-weight: 600;
  flex-shrink: 0;
}
.commenter-name {
  font-size: 12.5px;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.commenter-count {
  font-size: 11.5px;
  color: var(--text-tertiary);
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
}
.commenter-empty {
  font-size: 12px;
  color: var(--text-tertiary);
  padding: 4px 0;
}

/* ---------- Hidden-on-Meta comment treatment ---------- */
.msg.is-hidden-on-meta .msg-bubble {
  opacity: 0.55;
  filter: grayscale(0.4);
  text-decoration: line-through;
  text-decoration-color: rgba(10,10,10,0.20);
}
.msg.is-hidden-on-meta .msg-header-name {
  opacity: 0.7;
}
.msg-hidden-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--text-tertiary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 4px;
  cursor: help;
}
.msg-header-hide.is-busy {
  opacity: 0.4;
  pointer-events: none;
}
.msg-header-hide:hover { color: var(--status-urgent); background: rgba(220,38,38,0.06); }
.msg.is-hidden-on-meta .msg-header-hide:hover { color: var(--brand-iris); background: var(--brand-iris-tint); }

/* ---------- Reply button (primary, always visible) ------------------- */
/* Reply icon stays visible at rest in tertiary tint so the operator can
   scan a 5-bubble thread and pick a target without hover-hunting.
   Hide + Open-on-FB demote to hover-only to keep max-3-actions at rest. */
.msg-header-reply {
  background: transparent; border: 0; cursor: pointer;
  color: var(--text-tertiary);
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  margin-left: auto;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.msg-header-reply:hover { color: var(--brand-iris); background: var(--brand-iris-tint); }
.msg-header-reply svg { width: 13px; height: 13px; }
/* The Reply icon claims `margin-left: auto` so it pins right; subsequent
   secondary icons follow it but stay hover-only. */
.msg-header-open,
.msg-header-hide { opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); margin-left: 0; }
.msg:hover .msg-header-open,
.msg:hover .msg-header-hide,
.msg-header-open:focus-visible,
.msg-header-hide:focus-visible { opacity: 1; }

/* ---------- Armed reply target — bubble visual ----------------------- */
.msg.is-armed-reply-target .msg-bubble {
  border-color: var(--brand-iris);
  box-shadow: 0 0 0 3px var(--brand-iris-ring);
  transition: box-shadow var(--dur-normal) var(--ease-out);
}
.msg.is-armed-reply-target .msg-header-reply {
  color: var(--brand-iris);
  background: var(--brand-iris-tint);
}

/* ---------- Composer reply pill -------------------------------------- */
.composer-reply-pill {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 8px var(--space-4);
  background: var(--brand-iris-tint);
  border-bottom: 1px solid var(--brand-iris-edge);
  font-size: 12px;
}
.composer-reply-pill-icon {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  color: var(--brand-iris);
  flex-shrink: 0;
}
.composer-reply-pill-icon svg { width: 14px; height: 14px; }
.composer-reply-pill-body {
  display: flex; align-items: baseline; gap: 6px;
  flex: 1; min-width: 0;
}
.composer-reply-pill-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--brand-iris);
}
.composer-reply-pill-target {
  font-size: 12px; font-weight: 600;
  color: var(--text-primary);
  flex-shrink: 0;
}
.composer-reply-pill-snippet {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.composer-reply-pill-x {
  background: transparent; border: 0; cursor: pointer;
  color: var(--text-tertiary);
  font-size: 14px; line-height: 1;
  width: 22px; height: 22px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.composer-reply-pill-x:hover { color: var(--brand-iris); background: var(--bg-base); }

/* ---------- Right rail — armed state --------------------------------- */
.ctx-block.is-reply-target.is-armed {
  border-left: 3px solid var(--brand-iris);
  background: var(--brand-iris-tint);
}
.ctx-block.is-reply-target.is-armed .ctx-label {
  display: flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.ctx-armed-clear {
  margin-left: auto;
  background: transparent; border: 0; cursor: pointer;
  color: var(--brand-iris);
  font-size: 12px; line-height: 1;
  width: 20px; height: 20px;
  border-radius: var(--radius-sm);
}
.ctx-armed-clear:hover { background: var(--bg-base); }
.ctx-block.is-reply-target.is-armed .reply-target-sub {
  color: var(--text-secondary);
  font-family: 'Inter', sans-serif;
  font-style: italic;
}

/* ========================================================================
   OPERATIONAL CONTEXT — Settings tab + right-rail block
   (Noa spec 2026-06-15). Mirrors kasia rules visual language.
   ====================================================================== */

/* Nav badge on Settings sidebar */
.settings-nav-badge {
  display: inline-block;
  margin-left: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  padding: 1px 6px;
  background: var(--brand-iris-tint);
  color: var(--brand-iris);
  border-radius: 3px;
}

/* ---------- Filter strip ---------- */
.op-ctx-filters {
  display: flex; flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.op-ctx-filters .rules-filters-row {
  display: flex; align-items: center; gap: var(--space-3);
}
.op-ctx-filters .rules-search {
  flex: 1;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-base);
}
.op-ctx-filters .rules-search svg {
  width: 14px; height: 14px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.op-ctx-filters .rules-search-input {
  border: 0; outline: 0; background: transparent;
  flex: 1; min-width: 0;
  font-size: 13px;
  color: var(--text-primary);
}
.op-ctx-filters .rules-sort-select {
  padding: 6px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-base);
  font-size: 12.5px;
  color: var(--text-primary);
  cursor: pointer;
}

/* ---------- List + rows ---------- */
.op-ctx-list {
  display: flex; flex-direction: column;
  gap: var(--space-2);
}
.op-ctx-row {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: 14px var(--space-4);
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.op-ctx-row:hover { background: var(--bg-elevated); }
.op-ctx-row.state-expired,
.op-ctx-row.state-closed {
  opacity: 0.7;
}
.op-ctx-row.is-pulsing {
  box-shadow: 0 0 0 3px var(--brand-iris-ring);
}
.op-ctx-row-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-top: 7px;
  flex-shrink: 0;
  background: var(--brand-iris);
}
.op-ctx-row-dot[data-state="expired"] { background: var(--text-tertiary); }
.op-ctx-row-dot[data-state="closed"] { background: var(--status-resolved); }
.op-ctx-row-body-wrap {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  gap: 4px;
}
.op-ctx-row-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.op-ctx-row-body {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.op-ctx-row-meta {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.op-ctx-row-skus {
  display: inline-flex; align-items: center; gap: 4px;
  flex-wrap: wrap;
}
.op-ctx-sku-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 500;
  color: var(--brand-iris);
  background: var(--brand-iris-tint);
  border-radius: 3px;
  padding: 1px 6px;
}
.op-ctx-row-meta-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-tertiary);
  font-style: italic;
}
.op-ctx-row-meta-attach {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-tertiary);
}
.op-ctx-row-meta-expiry {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 3px;
}
.op-ctx-row-meta-expiry.tone-neutral {
  color: var(--text-tertiary);
}
.op-ctx-row-meta-expiry.tone-warning {
  color: #B45309;
  background: rgba(180,83,9,0.08);
}
.op-ctx-row-meta-expiry.tone-danger {
  color: var(--danger);
  background: rgba(220,38,38,0.08);
}
.op-ctx-row-actions {
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.op-ctx-icon-btn {
  width: 28px; height: 28px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--text-tertiary);
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.op-ctx-icon-btn svg { width: 14px; height: 14px; }
.op-ctx-icon-btn:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}
.op-ctx-icon-btn.is-danger:hover {
  color: var(--danger);
  background: rgba(220,38,38,0.08);
}

/* ---------- Inline confirm shim (close / delete) ---------- */
.op-ctx-row.is-confirming .op-ctx-row-body-wrap,
.op-ctx-row.is-confirming .op-ctx-row-actions {
  opacity: 0.4;
  pointer-events: none;
}
.op-ctx-confirm-shim {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--bg-base);
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-3) var(--space-4);
  display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap;
}
.op-ctx-row { position: relative; }
.op-ctx-confirm-text {
  flex: 1; min-width: 0;
  font-size: 13px;
  color: var(--text-primary);
}
.op-ctx-confirm-actions {
  display: flex; align-items: center; gap: var(--space-2);
}

/* ---------- Modal ---------- */
.op-ctx-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(10,10,10,0.40);
  display: grid; place-items: center;
  z-index: 10000;
  animation: opCtxFade 180ms var(--ease-out);
}
@keyframes opCtxFade {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}
.op-ctx-modal {
  width: 560px; max-width: 90vw; max-height: 90vh;
  display: flex; flex-direction: column;
  background: var(--bg-base);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(10,10,10,0.18);
  overflow: hidden;
}
.op-ctx-modal-body {
  display: flex; flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  overflow-y: auto;
}
.op-ctx-field {
  display: flex; flex-direction: column;
  gap: 6px;
}
.op-ctx-field-label {
  font-size: 12px; font-weight: 600;
  color: var(--text-primary);
}
.op-ctx-input,
.op-ctx-textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-base);
  font-size: 13.5px;
  font-family: 'Inter', sans-serif;
  color: var(--text-primary);
  resize: vertical;
}
.op-ctx-input:focus,
.op-ctx-textarea:focus {
  outline: none;
  border-color: var(--brand-iris);
  box-shadow: 0 0 0 3px var(--brand-iris-ring);
}
.op-ctx-textarea { min-height: 120px; }
.op-ctx-counter {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-tertiary);
  align-self: flex-end;
}
.op-ctx-counter.is-warn { color: #B45309; }
.op-ctx-field-help {
  font-size: 11.5px;
  color: var(--text-tertiary);
  line-height: 1.5;
}
.op-ctx-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.op-ctx-att-chips {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
  min-height: 8px;
}
.op-ctx-att-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.op-ctx-att-chip-name {
  max-width: 140px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.op-ctx-att-chip-size {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-tertiary);
}
.op-ctx-att-chip-x {
  width: 16px; height: 16px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--text-tertiary);
  font-size: 11px;
  display: grid; place-items: center;
  border-radius: 50%;
}
.op-ctx-att-chip-x:hover {
  background: var(--bg-pressed);
  color: var(--danger);
}
.op-ctx-att-actions {
  display: flex; align-items: center; gap: var(--space-3);
  margin-top: 6px;
}
.op-ctx-att-help {
  font-size: 11px;
  color: var(--text-tertiary);
}
.op-ctx-modal .btn-primary[disabled] {
  opacity: 0.5; cursor: not-allowed;
}

/* ---------- Right-rail block ---------- */
.ctx-block.is-op-context {
  border-left: 3px solid var(--brand-iris);
}
.ctx-op-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
}
.ctx-op-row-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brand-iris);
  flex-shrink: 0;
}
.ctx-op-row-title {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-primary);
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ctx-op-row-reason {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.ctx-op-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--text-secondary);
}
.ctx-op-footer-link {
  color: var(--brand-iris);
  background: transparent; border: 0; cursor: pointer;
  font-size: 11.5px;
  padding: 0;
}
.ctx-op-footer-link:hover { text-decoration: underline; }

/* =========================================================================
   PRODUCT KNOWLEDGE — Settings tab + right-rail
   Mirrors .op-ctx-* / .ctx-op-* architecture beat-for-beat. Spec:
   workspace/projects/kasia_rules_engine/noa_product_knowledge_spec.md
   Brandbook obedience: iris-only accent, semantic warning amber for stub
   state, all spacing on the 4/8/12/16/24/32 grid, motion 120-240ms ease-out
   band, NO new CSS variables (warning amber inlined per Op Context precedent
   line 3252 .op-ctx-row-meta-expiry.tone-warning).
   ========================================================================= */

/* ---------- Status-pill stub variant ---------- */
/* The only new .status-pill variant authorized — completeness is a domain
   state the existing palette doesn't cover (not in-progress, not closed,
   not spam). Uses the same warning amber as .op-ctx-row-meta-expiry.tone-
   warning so no new hue enters the palette. */
.sp-stub {
  color: #B45309;
  background: rgba(180,83,9,0.10);
}

/* ---------- Filter strip ---------- */
/* Spec §5 line 360-372: "Exact mirror of Op Context filter pattern".
   JS emits class="rules-filters pk-filters" so .pk-filters layers on
   top of .rules-filters. Selectors mirror .op-ctx-filters (line 3126)
   verbatim with selector substitution. */
.pk-filters {
  display: flex; flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  /* Override .rules-filters defaults that don't apply to settings-tab layout. */
  position: static;
  background: transparent;
  flex-wrap: nowrap;
  align-items: stretch;
}
.pk-filters .rules-filters-row {
  display: flex; align-items: center; gap: var(--space-3);
}
.pk-filters .rules-search {
  flex: 1;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-base);
  min-width: 220px;
}
.pk-filters .rules-search svg {
  width: 14px; height: 14px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.pk-filters .rules-search-input {
  border: 0; outline: 0; background: transparent;
  flex: 1; min-width: 0;
  font-size: 13px;
  color: var(--text-primary);
}
.pk-filters .rules-sort-select {
  padding: 6px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-base);
  font-size: 12.5px;
  color: var(--text-primary);
  cursor: pointer;
}

/* ---------- List + rows ---------- */
.pk-list {
  display: flex; flex-direction: column;
  gap: var(--space-2);
}
.pk-row {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: 14px var(--space-4);
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.pk-row:hover { background: var(--bg-elevated); }
.pk-row.state-archived {
  opacity: 0.7;
}
.pk-row.is-pulsing {
  box-shadow: 0 0 0 3px var(--brand-iris-ring);
  transition: box-shadow 1200ms var(--ease-out);
}
.pk-row-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-top: 7px;
  flex-shrink: 0;
  background: var(--brand-iris);
}
.pk-row-dot[data-state="stub"] { background: var(--danger); }
.pk-row-dot[data-state="archived"] { background: var(--text-tertiary); }
.pk-row-body-wrap {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  gap: 4px;
}
.pk-row-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  letter-spacing: -0.1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pk-row-body {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pk-row-body.is-stub {
  color: #B45309;
}
.pk-row-meta {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.pk-row-skus {
  display: inline-flex; align-items: center; gap: 4px;
  flex-wrap: wrap;
}
.pk-skuchip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 500;
  color: var(--brand-iris);
  background: var(--brand-iris-tint);
  border-radius: 3px;
  padding: 1px 6px;
}
.pk-skuchip.is-muted {
  color: var(--text-tertiary);
  background: var(--bg-elevated);
}
.pk-row-meta-img,
.pk-row-meta-completeness {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-tertiary);
  display: inline-flex; align-items: center; gap: 4px;
}
.pk-row-meta-img svg { width: 11px; height: 11px; stroke-width: 1.6; }
.pk-row-meta-ab {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: #B45309;
  letter-spacing: 0.4px;
}
.pk-row-actions {
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.pk-icon-btn {
  width: 28px; height: 28px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--text-tertiary);
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.pk-icon-btn svg { width: 14px; height: 14px; }
.pk-icon-btn:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}
.pk-icon-btn.is-danger:hover {
  color: var(--danger);
  background: rgba(220,38,38,0.08);
}

/* ---------- "Niezsynchronizowany" corner ribbon ---------- */
/* 24x6px warning-tint ribbon top-right when last_synced_at older than 14d.
   Sits inside .pk-row (position: relative parent) without disturbing flow. */
.pk-niezsynchr-ribbon {
  position: absolute;
  top: 0; right: 0;
  width: 24px; height: 6px;
  background: rgba(180,83,9,0.10);
  border-top-right-radius: var(--radius-md);
  border-bottom-left-radius: 3px;
  pointer-events: none;
  font-size: 0;
  color: transparent;
  overflow: hidden;
}
.pk-niezsynchr-ribbon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(180,83,9,0.30) 100%);
  border-top-right-radius: var(--radius-md);
  border-bottom-left-radius: 3px;
}

/* ---------- Stub "Uzupełnij" CTA ----------
   Composes with .btn-ghost (line 625) — JS emits class="btn-ghost pk-row-fill-cta".
   Only divergence from .btn-ghost: iris-tinted variant, fixed 32px height for inline row context.
   Keeps .btn-ghost as single source of truth for hover/focus states. */
.pk-row-fill-cta {
  margin-top: 6px;
  height: 32px;
  padding: 0 var(--space-3);
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px;
  color: var(--brand-iris);
  border-color: var(--brand-iris-tint);
}
.pk-row-fill-cta:hover {
  background: var(--brand-iris-tint);
  color: var(--brand-iris-pressed);
}
.pk-row-fill-cta:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--brand-iris-ring);
}

/* ---------- Inline archive / delete confirm shims ---------- */
.pk-row.is-confirming .pk-row-body-wrap,
.pk-row.is-confirming .pk-row-actions {
  opacity: 0.4;
  pointer-events: none;
}
.pk-archive-confirm,
.pk-delete-confirm {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--bg-base);
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-3) var(--space-4);
  display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap;
  animation: pkShimSlide var(--dur-normal) var(--ease-out);
}
@keyframes pkShimSlide {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pk-confirm-text {
  flex: 1; min-width: 0;
  font-size: 13px;
  color: var(--text-primary);
}
.pk-confirm-actions {
  display: flex; align-items: center; gap: var(--space-2);
}

/* ---------- Expanded inline detail grid ---------- */
.pk-row-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-4) var(--space-4);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  animation: pkExpand 200ms var(--ease-out);
}
@keyframes pkExpand {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pk-detail-col {
  display: flex; flex-direction: column;
  gap: var(--space-3);
}
.pk-detail-field {
  display: flex; flex-direction: column;
  gap: 4px;
}
.pk-detail-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.1px;
}
.pk-detail-value {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.5;
}
.pk-detail-value.is-mono,
.pk-detail-value-mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-primary);
  cursor: copy;
}
.pk-detail-value.is-price {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
.pk-detail-value.is-price-note {
  font-style: italic;
  color: var(--text-secondary);
}
.pk-detail-value.is-link {
  color: var(--brand-iris);
  text-decoration: none;
  word-break: break-all;
}
.pk-detail-value.is-link:hover { text-decoration: underline; }
.pk-detail-chip-row {
  display: inline-flex; flex-wrap: wrap; gap: 4px;
}
.pk-detail-cluster {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-tertiary);
  background: var(--bg-elevated);
  border-radius: 999px;
  padding: 1px 8px;
  margin-right: 4px;
}
.pk-detail-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 500;
  padding: 2px 8px; border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
}
.pk-detail-badge.is-yes {
  color: var(--brand-iris);
  background: var(--brand-iris-tint);
}
.pk-detail-badge.is-no {
  color: #B45309;
  background: rgba(180,83,9,0.10);
}
@media (max-width: 720px) {
  .pk-row-detail-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

/* ---------- "Kasia widzi" transparency block ---------- */
/* Auto-composed read-only summary at the top of every expanded row showing
   exactly what gets injected into Kasia's prompt. Spec calls this the
   "single most operator-empowering surface". Read-only, not a chrome action.
   Class names per spec §9 step 4 + product_knowledge.js: .pk-row-kasia-widzi,
   .pk-row-kasia-widzi-head, .pk-row-kasia-widzi-list. */
.pk-row-kasia-widzi {
  grid-column: 1 / -1;
  background: var(--bg-canvas);
  border-radius: var(--radius-md);
  padding: 12px var(--space-4);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 450;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-2);
}
.pk-row-kasia-widzi-head {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.2px;
  margin-bottom: 6px;
}
.pk-row-kasia-widzi-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 4px;
}
.pk-row-kasia-widzi-list li {
  padding-left: 14px;
  position: relative;
}
.pk-row-kasia-widzi-list li::before {
  content: "•";
  position: absolute;
  left: 4px; top: 0;
  color: var(--brand-iris);
  font-weight: 600;
}
.pk-row-kasia-widzi-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--text-primary);
}

/* ---------- Image strip (64x64 thumbs + ★ primary) ---------- */
.pk-image-strip {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.pk-image-thumb {
  position: relative;
  width: 64px; height: 64px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.pk-image-thumb:hover {
  box-shadow: 0 0 0 2px var(--brand-iris-ring);
}
.pk-image-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.pk-image-thumb-star {
  position: absolute;
  top: 4px; left: 4px;
  width: 16px; height: 16px;
  display: grid; place-items: center;
  font-size: 11px;
  color: #B45309;
  background: rgba(255,255,255,0.92);
  border-radius: 50%;
  pointer-events: none;
}
.pk-image-thumb-x {
  position: absolute;
  top: 4px; right: 4px;
  width: 18px; height: 18px;
  background: rgba(10,10,10,0.55);
  color: #FFFFFF;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 11px;
  display: grid; place-items: center;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.pk-image-thumb:hover .pk-image-thumb-x { opacity: 1; }
.pk-image-thumb-caption {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  color: var(--text-tertiary);
  position: absolute;
  bottom: 2px; left: 4px; right: 4px;
  text-shadow: 0 1px 2px rgba(255,255,255,0.7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Modal ---------- */
.pk-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(10,10,10,0.40);
  display: grid; place-items: center;
  z-index: 10000;
  animation: pkFade 180ms var(--ease-out);
}
@keyframes pkFade {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}
.pk-modal {
  width: 720px; max-width: 92vw; max-height: 92vh;
  display: flex; flex-direction: column;
  background: var(--bg-base);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(10,10,10,0.18);
  overflow: hidden;
}
.pk-modal-header {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-6) var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.pk-modal-title {
  flex: 1; min-width: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.25px;
}
.pk-modal-close {
  width: 28px; height: 28px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--text-tertiary);
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  font-size: 16px;
}
.pk-modal-close:hover { color: var(--text-primary); background: var(--bg-elevated); }
.pk-modal-body {
  display: flex; flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6);
  overflow-y: auto;
}
.pk-modal-footer {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-base);
}

/* ---------- Modal step disclosure (Step 1 -> Step 2) ---------- */
.pk-modal-step {
  display: flex; flex-direction: column;
  gap: var(--space-3);
}
.pk-modal-step-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.pk-modal-step-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.pk-modal-step.is-locked {
  opacity: 0.45;
  pointer-events: none;
}
.pk-modal-step.is-unfolding {
  animation: pkStepUnfold 200ms var(--ease-out);
}
@keyframes pkStepUnfold {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Modal field-group grid ---------- */
.pk-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6) var(--space-4);
}
.pk-modal-grid > .pk-modal-group.is-full {
  grid-column: 1 / -1;
}
@media (max-width: 720px) {
  .pk-modal-grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ---------- Modal field-group accordion (collapsible) ---------- */
/* Class names per spec §9 step 4 + product_knowledge.js: .pk-modal-group,
   .pk-modal-group-head, .pk-modal-group-chev, .pk-modal-group-label,
   .pk-modal-group-body. Both .pk-modal-group-collapsed (spec exact name)
   and .is-collapsed (BEM state modifier the JS implementer used) target the
   same rules so JS choice can't break us. */
.pk-modal-group {
  display: flex; flex-direction: column;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-base);
  overflow: hidden;
}
.pk-modal-group-head {
  display: flex; align-items: center; gap: var(--space-2);
  height: 36px;
  padding: 0 var(--space-3);
  background: var(--bg-canvas);
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.2px;
  transition: background var(--dur-fast) var(--ease-out);
}
.pk-modal-group-head:hover { background: var(--bg-elevated); }
.pk-modal-group-chev {
  width: 12px; height: 12px;
  color: var(--text-tertiary);
  flex-shrink: 0;
  transition: transform 200ms var(--ease-out);
}
.pk-modal-group.pk-modal-group-collapsed .pk-modal-group-chev,
.pk-modal-group.is-collapsed .pk-modal-group-chev {
  transform: rotate(-90deg);
}
.pk-modal-group-label {
  flex: 1; min-width: 0;
}
.pk-modal-group-body {
  display: flex; flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-4);
  animation: pkGroupOpen 200ms var(--ease-out);
}
@keyframes pkGroupOpen {
  from { opacity: 0; max-height: 0; }
  to   { opacity: 1; max-height: 1200px; }
}
.pk-modal-group.pk-modal-group-collapsed .pk-modal-group-body,
.pk-modal-group.is-collapsed .pk-modal-group-body {
  display: none;
}
.pk-field {
  display: flex; flex-direction: column;
  gap: 6px;
}
.pk-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.pk-field-label .is-required { color: var(--brand-iris); margin-left: 2px; }
.pk-input,
.pk-textarea,
.pk-select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-base);
  font-size: 13.5px;
  font-family: 'Inter', sans-serif;
  color: var(--text-primary);
  resize: vertical;
}
.pk-input:focus,
.pk-textarea:focus,
.pk-select:focus {
  outline: none;
  border-color: var(--brand-iris);
  box-shadow: 0 0 0 3px var(--brand-iris-ring);
}
.pk-input.is-mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
}
.pk-textarea { min-height: 80px; }
.pk-field-help {
  font-size: 11.5px;
  color: var(--text-tertiary);
  line-height: 1.5;
}
.pk-counter {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-tertiary);
  align-self: flex-end;
}
.pk-counter.is-warn { color: #B45309; }
.pk-field.is-deep-focus .pk-input,
.pk-field.is-deep-focus .pk-textarea,
.pk-field.is-deep-focus .pk-select {
  box-shadow: 0 0 0 3px var(--brand-iris-ring);
  border-color: var(--brand-iris);
  transition: box-shadow 1200ms var(--ease-out);
}

/* ---------- Radiogroup (tri-state Tak/Nie/?) ---------- */
.pk-radio-row {
  display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap;
}
.pk-radio {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px;
  color: var(--text-secondary);
  cursor: pointer;
}
.pk-radio input { accent-color: var(--brand-iris); width: 14px; height: 14px; }
.pk-radio.is-active { color: var(--text-primary); font-weight: 500; }

/* ---------- Shopify-summary locked identity chip (after Step 1 select) ---------- */
.pk-shopify-summary {
  display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.pk-shopify-summary-handle {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  color: var(--brand-iris);
  background: var(--brand-iris-tint);
  padding: 2px 8px;
  border-radius: 3px;
}
.pk-shopify-summary-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pk-shopify-summary-change {
  background: transparent; border: 0; cursor: pointer;
  color: var(--brand-iris);
  font-size: 12px;
  padding: 0;
}
.pk-shopify-summary-change:hover { text-decoration: underline; }

/* ---------- Shopify typeahead (popover dropdown) ---------- */
.pk-typeahead {
  position: relative;
}
.pk-typeahead-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(10,10,10,0.10);
  z-index: 50;
  animation: pkGroupOpen 180ms var(--ease-out);
}
.pk-typeahead-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--dur-fast) var(--ease-out);
}
.pk-typeahead-item:last-child { border-bottom: 0; }
.pk-typeahead-item:hover,
.pk-typeahead-item.is-active {
  background: var(--brand-iris-tint);
}
.pk-typeahead-item-name {
  flex: 1; min-width: 0;
  font-size: 13px;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pk-typeahead-item-handle {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.pk-typeahead-empty {
  padding: var(--space-3) var(--space-4);
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: center;
}

/* ---------- Empty state ---------- */
/* Spec §5 line 769 mandates "Reuses .kasia-state shell" — JS emits
   class="kasia-state pk-empty-state" and class="kasia-state-icon pk-empty-icon".
   .pk-empty-state is a thin variant tag (no extra padding override; .kasia-state
   already gives padding: var(--space-8) at line 1702). Only divergence is the
   iris-tinted diamond icon container which .kasia-state-icon doesn't provide. */
.pk-empty-state {
  /* Inherits all layout from .kasia-state — no divergence intended. */
}
.pk-empty-icon {
  width: 32px; height: 32px;
  border-radius: var(--radius-md);
  background: var(--brand-iris-tint);
  display: grid; place-items: center;
  color: var(--brand-iris);
  margin-bottom: var(--space-2);
}
.pk-empty-icon svg { width: 16px; height: 16px; }

/* ---------- Right-rail block — PRODUKTY KLIENTA ---------- */
.ctx-block.is-product-knowledge {
  border-left: 3px solid var(--brand-iris);
}
.ctx-pk-row {
  display: flex; flex-direction: column;
  gap: 2px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.ctx-pk-row:last-child { border-bottom: 0; }
.ctx-pk-row-head {
  display: flex; align-items: center; gap: 8px;
}
.ctx-pk-row-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brand-iris);
  flex-shrink: 0;
}
.ctx-pk-row-dot[data-state="stub"] { background: var(--danger); }
.ctx-pk-row-title {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-primary);
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ctx-pk-row-reason {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.ctx-pk-row-reason.is-sibling {
  color: var(--brand-iris);
}
.ctx-pk-row-gap-callout {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
  padding-left: 13px;
}
.ctx-pk-row-gap-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: #B45309;
}
.ctx-pk-row-gap-link {
  background: transparent; border: 0; cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--brand-iris);
  padding: 0;
}
.ctx-pk-row-gap-link:hover { text-decoration: underline; }
.ctx-pk-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--text-secondary);
}
.ctx-pk-footer-link {
  color: var(--brand-iris);
  background: transparent; border: 0; cursor: pointer;
  font-size: 11.5px;
  padding: 0;
}
.ctx-pk-footer-link:hover { text-decoration: underline; }

/* ====================================================================
   KASIA TRAINER  (Noa spec v1, 2026-06-15)
   ====================================================================
   Settings-resident workshop. Lives at #/settings/trainer.
   Single column stack on .trainer-shell: input -> conv -> composer.
   Reuses brandbook bubble system (.msg.from-customer/.from-operator/
   .from-ai-draft), scoped under .trainer-shell so it never collides
   with the live inbox's .msg.is-outbound / .msg.is-draft styling.
   Iris is the only AI accent. Graphite is the operator accent.
   No new tokens, no warm hues, no emoji glyphs.
   Spec: workspace/projects/kasia_rules_engine/trainer/noa_kasia_trainer_spec.md
   ==================================================================== */

/* ---------- Shell ---------- */
.trainer-shell {
  width: 100%;
  max-width: min(100%, 920px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--bg-canvas);
  padding-bottom: var(--space-8);
}

/* ---------- Sample inbound card (.trainer-input) ----------
   Open by default; collapses to a 52px summary row after the first draft. */
.trainer-input {
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-3);
  transition:
    padding var(--dur-normal) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}
.trainer-input.is-collapsed {
  padding: var(--space-3) var(--space-4);
}
.trainer-input-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.trainer-input.is-collapsed .trainer-input-head { margin-bottom: 0; }
.trainer-input-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 500;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-tertiary);
}
.trainer-input-summary {
  flex: 1; min-width: 0;
  font-size: 12.5px;
  color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-left: var(--space-3);
}
.trainer-input-body {
  display: flex; flex-direction: column;
  gap: var(--space-4);
}
.trainer-input.is-collapsed .trainer-input-body { display: none; }
.trainer-input-toggle {
  font-family: inherit; font-size: 11.5px;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; gap: 4px;
  transition: background var(--dur-fast) var(--ease-out);
}
.trainer-input-toggle:hover { background: var(--bg-elevated); color: var(--text-primary); }
.trainer-input-toggle svg { width: 12px; height: 12px; stroke-width: 1.6; }

/* Channel pill row inside trainer input — reuses brandbook .channel-pill family. */
.trainer-input .channel-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 11.5px; font-weight: 500;
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.trainer-input .channel-pill:hover { color: var(--text-primary); }
.trainer-input .channel-pill.active {
  background: var(--brand-iris-tint);
  color: var(--brand-iris);
  border-color: var(--brand-iris-edge);
}
.trainer-input .channel-pill svg { width: 12px; height: 12px; stroke-width: 1.6; }
.trainer-input-channels {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
}

.trainer-input-row {
  display: flex; flex-direction: column;
  gap: 6px;
}
.trainer-input-row-label {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px; font-weight: 500;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-tertiary);
}
.trainer-input-row input[type="text"],
.trainer-input-row input[type="email"] {
  font: inherit; font-size: 13px;
  height: 38px;
  color: var(--text-primary);
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 0 12px;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.trainer-input-row input[type="text"]:focus,
.trainer-input-row input[type="email"]:focus {
  outline: none;
  border-color: var(--brand-iris);
  box-shadow: 0 0 0 3px var(--brand-iris-ring);
}
.trainer-input-row textarea {
  font: inherit; font-size: 13.5px;
  color: var(--text-primary);
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  line-height: 1.5;
  min-height: 144px;
  max-height: 240px;
  resize: vertical;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.trainer-input-row textarea:focus {
  outline: none;
  border-color: var(--brand-iris);
  box-shadow: 0 0 0 3px var(--brand-iris-ring);
}
.trainer-input-row textarea::placeholder { color: var(--text-tertiary); }

.trainer-input-order {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-4);
}
.trainer-input-order .trainer-input-row { gap: 6px; }
.trainer-input-order input[name="bl_order_id"] {
  font-family: 'JetBrains Mono', monospace;
  width: 120px;
}
.trainer-input-check {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.trainer-input-check input[type="checkbox"] {
  width: 14px; height: 14px;
  accent-color: var(--brand-iris);
  cursor: pointer;
}

.trainer-input-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* ---------- Conversation pane (.trainer-thread) ----------
   Reuses brandbook .msg.from-customer / .from-operator / .from-ai-draft.
   Live styles.css uses a different bubble system (.msg.is-outbound /
   .msg.is-draft) for the inbox, so we scope the brandbook variants
   under .trainer-shell to avoid collision. */
.trainer-thread {
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex; flex-direction: column;
  gap: var(--space-4);
  min-height: 320px;
  margin-bottom: var(--space-3);
}

/* Brandbook-style bubble system, scoped to trainer. */
.trainer-thread .msg {
  display: flex; gap: var(--space-3);
  max-width: 78%;
  animation: trainerBubbleIn 200ms var(--ease-out);
}
.trainer-thread .msg.from-customer { align-self: flex-start; }
.trainer-thread .msg.from-operator,
.trainer-thread .msg.from-ai-draft {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.trainer-thread .msg-stack { display: flex; flex-direction: column; min-width: 0; }
.trainer-thread .msg-bubble {
  padding: 10px 14px;
  border-radius: var(--radius-bubble);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-primary);
}
.trainer-thread .msg.from-customer .msg-bubble {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-top-left-radius: 4px;
}
.trainer-thread .msg.from-operator .msg-bubble {
  background: var(--text-primary);
  color: #FFFFFF;
  border-top-right-radius: 4px;
}
.trainer-thread .msg.from-ai-draft .msg-bubble {
  background: var(--bg-ai-draft);
  border: 1px dashed var(--brand-iris-edge);
  color: var(--text-primary);
  border-top-right-radius: 4px;
}
/* NOTE: trainer bubbles carry their identity via .ai-draft-label
   (spec §3.3 lines 152-156: DRAFTED BY KASIA / TRAINER / no label
   for customer). There is NO secondary timestamp element in the
   spec for trainer bubbles — `.msg-time` is intentionally absent
   here so trainer.js does not render conflicting time tokens. */
.trainer-thread .msg-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.trainer-thread .msg-avatar.is-iris {
  background: var(--brand-iris-tint);
  border-color: var(--brand-iris-edge);
  color: var(--brand-iris);
}
.trainer-thread .msg-avatar.is-iris svg { width: 14px; height: 14px; stroke-width: 1.6; }

/* AI-draft / trainer bubble label (mono iris, brandbook-aligned). */
.trainer-thread .ai-draft-label {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; font-weight: 500;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--brand-iris);
  margin-bottom: 6px;
}
.trainer-thread .ai-draft-label svg { width: 11px; height: 11px; stroke-width: 1.6; }
.trainer-thread .ai-draft-actions {
  display: flex; gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
}

/* Inline "Drafting..." progress dot — sky status, dots-only (no chrome). */
.trainer-thread .trainer-typing {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--status-progress);
}
.trainer-thread .trainer-typing-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--status-progress);
  animation: trainerPulse 1.4s ease-in-out infinite;
}
.trainer-thread .trainer-typing-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

/* Centered system caption (e.g. "Rule R059 added - Kasia is re-running..."). */
.trainer-thread .trainer-sys {
  align-self: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-tertiary);
  letter-spacing: 0.3px;
  padding: var(--space-2) var(--space-3);
  text-align: center;
  max-width: 80%;
}

/* ---------- Draft-diff strip (.diff-strip) ----------
   Inserted into the thread above a regenerated draft. Two columns. */
.diff-strip {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-base);
  padding: var(--space-4);
  margin: var(--space-2) 0;
  animation: trainerDiffIn 240ms var(--ease-out);
}
.diff-strip-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.diff-strip-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 500;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-tertiary);
}
.diff-strip-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-tertiary);
}
.diff-strip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
@media (max-width: 760px) {
  .diff-strip-grid { grid-template-columns: 1fr; }
}
.diff-strip-col {
  display: flex; flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
}
.diff-strip-col.is-after {
  background: var(--bg-ai-draft);
  border-left: 2px solid var(--brand-iris);
}
.diff-strip-col-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 500;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-tertiary);
}
.diff-strip-col.is-after .diff-strip-col-label { color: var(--brand-iris); }
.diff-strip-col-body {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}
.diff-strip-foot {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-tertiary);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.diff-strip-foot-rule {
  background: transparent; border: 0; cursor: pointer;
  font-family: inherit; font-size: inherit;
  color: var(--brand-iris);
  padding: 0;
}
.diff-strip-foot-rule:hover { text-decoration: underline; }

/* ---------- Rule proposal card (.rule-proposal-card) ----------
   Embedded INSIDE a .msg.from-ai-draft (trainer turn) bubble. */
.rule-proposal-card {
  margin-top: var(--space-3);
  background: #FFFFFF;
  border: 1px solid var(--brand-iris-edge);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex; flex-direction: column;
  gap: var(--space-3);
}
.rule-proposal-head {
  display: flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.6px;
  color: var(--brand-iris);
}
.rule-proposal-head svg { width: 12px; height: 12px; stroke-width: 1.6; }
.rule-proposal-id {
  display: inline-flex; align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  color: var(--brand-iris);
  padding: 2px 8px;
  background: var(--brand-iris-tint);
  border-radius: var(--radius-sm);
  letter-spacing: 0.4px;
}
.rule-proposal-fields {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-2) var(--space-3);
  font-size: 12px;
}
.rule-proposal-fields dt {
  font-family: 'Inter', sans-serif;
  color: var(--text-tertiary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-size: 10.5px;
  align-self: center;
}
.rule-proposal-fields dd {
  color: var(--text-primary);
  margin: 0;
}
.rule-proposal-pill {
  display: inline-flex; align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}
.rule-proposal-pill.is-effect-action {
  background: var(--brand-iris-tint);
  color: var(--brand-iris);
  border-color: var(--brand-iris-edge);
}
.rule-proposal-pill.is-effect-behavior {
  background: var(--bg-elevated);
  color: var(--text-secondary);
}
.rule-proposal-pill.is-critical {
  background: rgba(220,38,38,0.08);
  color: var(--danger);
  border-color: rgba(220,38,38,0.18);
}
.rule-proposal-chips {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.rule-proposal-chip {
  display: inline-flex; align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}
.rule-proposal-text {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-primary);
  background: var(--bg-elevated);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  white-space: pre-wrap;
}
.rule-proposal-rationale {
  font-style: italic;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.55;
}
.rule-proposal-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}

/* ---------- Composer (.trainer-composer) ----------
   Pinned-bottom, sticky inside the Settings scroll area. */
.trainer-composer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-top: var(--space-2);
}
.trainer-composer-input {
  width: 100%;
  min-height: 64px;
  max-height: 160px;
  resize: vertical;
  font: inherit; font-size: 13.5px;
  color: var(--text-primary);
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  line-height: 1.5;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.trainer-composer-input:focus {
  outline: none;
  border-color: var(--brand-iris);
  box-shadow: 0 0 0 3px var(--brand-iris-ring);
}
.trainer-composer-input::placeholder { color: var(--text-tertiary); }

/* Spec-named alias so trainer.js + sample-inbound body textarea can
   follow brandbook wording verbatim (spec §3.2 line 141, §3.7 line 240
   "uses .composer-input pattern verbatim"). Composes with the
   trainer-scoped rules above when both classes are present. */
.composer-input {
  font: inherit; font-size: 13.5px;
  color: var(--text-primary);
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  line-height: 1.5;
  resize: vertical;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.composer-input:focus {
  outline: none;
  border-color: var(--brand-iris);
  box-shadow: 0 0 0 3px var(--brand-iris-ring);
}
.composer-input::placeholder { color: var(--text-tertiary); }
.trainer-composer-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.trainer-composer-hints {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: 11px;
  color: var(--text-tertiary);
}
.trainer-composer-hints .kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 1px 5px;
  border-radius: 3px;
}
.trainer-composer-actions {
  display: flex; align-items: center;
  gap: var(--space-2);
}

/* Graphite primary (operator-driven Send) — distinguishes from
   iris .btn-primary that's already the app default (pre-existing
   brandbook deviation). Top-level so any surface can use it; spec
   §3.7 line 246 says Send uses .btn-primary semantically meaning
   graphite, but live .btn-primary is iris — trainer.js MUST emit
   .btn-graphite on Send to preserve the two-action-layer contract
   until the brandbook deviation is resolved at the app level.
   See open_concerns in the Trainer styles review for the
   amend-spec-vs-overhaul decision pending Noa sign-off. */
.btn-graphite {
  font: inherit; font-size: 12.5px; font-weight: 600;
  background: var(--text-primary);
  color: #FFFFFF;
  border: 0;
  border-radius: var(--radius-md);
  padding: 10px 16px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.btn-graphite:hover { background: #1F1F23; }
.btn-graphite:active { background: #000000; }
.btn-graphite:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Session menu (kebab + dropdown) ---------- */
.trainer-session-menu {
  position: relative;
  display: inline-block;
}
.trainer-session-menu-btn {
  width: 32px; height: 32px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.trainer-session-menu-btn:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}
.trainer-session-menu-btn svg { width: 16px; height: 16px; stroke-width: 1.6; }

.trainer-session-menu-popover {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 50;
  min-width: 220px;
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(10,10,10,0.10);
  padding: 4px;
  animation: trainerMenuIn 120ms var(--ease-out);
}
.trainer-session-menu-popover[hidden] { display: none; }
.trainer-session-menu-row {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  font: inherit; font-size: 12.5px;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: background var(--dur-fast) var(--ease-out);
}
.trainer-session-menu-row:hover { background: var(--bg-elevated); }
.trainer-session-menu-row:disabled {
  color: var(--text-tertiary);
  cursor: not-allowed;
}
.trainer-session-menu-row:disabled:hover { background: transparent; }
.trainer-session-menu-row svg { width: 13px; height: 13px; stroke-width: 1.6; color: var(--text-tertiary); }
.trainer-session-menu-sep {
  height: 1px;
  background: var(--border-subtle);
  margin: 4px 0;
}

/* ---------- Recent inbounds modal (.trainer-recent-modal) ----------
   Mirrors .pk-modal-backdrop / .pk-modal pattern but smaller. */
.trainer-recent-backdrop {
  position: fixed; inset: 0;
  background: rgba(10,10,10,0.40);
  display: grid; place-items: center;
  z-index: 10000;
  animation: trainerModalIn 180ms var(--ease-out);
}
.trainer-recent-modal {
  width: 560px; max-width: 92vw; max-height: 80vh;
  display: flex; flex-direction: column;
  background: var(--bg-base);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(10,10,10,0.18);
  overflow: hidden;
}
.trainer-recent-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}
.trainer-recent-title {
  font-size: 14px; font-weight: 600;
  color: var(--text-primary);
}
.trainer-recent-close {
  width: 28px; height: 28px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--text-tertiary);
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  font-size: 16px;
}
.trainer-recent-close:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}
.trainer-recent-list {
  overflow-y: auto;
  padding: var(--space-2);
}
.trainer-recent-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px var(--space-3);
  padding: 10px var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.trainer-recent-row:hover { background: var(--bg-elevated); }
.trainer-recent-row + .trainer-recent-row {
  border-top: 1px solid var(--border-subtle);
}
.trainer-recent-row-subject {
  font-size: 13px; font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.trainer-recent-row-customer {
  font-size: 11.5px;
  color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
  grid-column: 1 / 2;
}
.trainer-recent-row-ago {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-tertiary);
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  align-self: center;
}
.trainer-recent-empty {
  padding: var(--space-6);
  text-align: center;
  font-size: 12.5px;
  color: var(--text-tertiary);
}
.trainer-recent-skeleton {
  display: flex; flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
}
.trainer-recent-skeleton-row {
  height: 36px;
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  animation: trainerSkeleton 1.6s ease-in-out infinite;
}

/* ---------- AI chain card (.ai-chain) — Trainer instance ----------
   Reuses brandbook .ai-chain shape, scoped to trainer so live inbox
   never gets a competing style. NEVER auto-expanded — start collapsed. */
.trainer-thread .ai-chain {
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-2);
  width: 100%;
  max-width: 78%;
  align-self: flex-end;
  transition: background var(--dur-fast) var(--ease-out);
}
.trainer-thread .ai-chain[data-expanded="false"] .ai-chain-body { display: none; }
.trainer-thread .ai-chain-head {
  display: flex; align-items: center; gap: var(--space-2);
  cursor: pointer;
  user-select: none;
}
.trainer-thread .ai-chain-head:hover { color: var(--text-primary); }
.trainer-thread .ai-chain-title {
  font-size: 12px; font-weight: 500;
  color: var(--text-secondary);
}
.trainer-thread .ai-chain-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-tertiary);
  margin-left: auto;
}
.trainer-thread .ai-chain-toggle {
  background: transparent; border: 0; cursor: pointer;
  color: var(--text-tertiary);
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--dur-fast) var(--ease-out);
}
.trainer-thread .ai-chain-toggle svg { width: 12px; height: 12px; stroke-width: 1.8; }
.trainer-thread .ai-chain[data-expanded="true"] .ai-chain-toggle { transform: rotate(90deg); }
.trainer-thread .ai-chain-body {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
  display: flex; flex-direction: column;
  gap: 4px;
}
.trainer-thread .ai-step {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: 4px 0;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.55;
}
.trainer-thread .ai-step-check {
  width: 12px; height: 12px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--brand-iris);
}
.trainer-thread .ai-step strong {
  color: var(--text-primary);
  font-weight: 500;
}

/* ---------- Empty state (.trainer-empty-state) ---------- */
.trainer-empty-state {
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 48px var(--space-8);
  text-align: center;
  display: flex; flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.trainer-empty-state-icon {
  width: 32px; height: 32px;
  border-radius: var(--radius-md);
  background: var(--brand-iris-tint);
  color: var(--brand-iris);
  display: grid; place-items: center;
  margin-bottom: var(--space-2);
}
.trainer-empty-state-icon svg { width: 18px; height: 18px; stroke-width: 1.5; }
.trainer-empty-state-title {
  font-family: 'Inter', sans-serif;
  font-size: 18px; font-weight: 600;
  letter-spacing: -0.25px;
  color: var(--text-primary);
}
.trainer-empty-state-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 420px;
}
.trainer-empty-state-actions {
  margin-top: var(--space-3);
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Error bubble (trainer variant) ----------
   Used when /draft or /chat fails. Reuses .msg.from-ai-draft shape
   but swaps the iris edge for a danger-tinted left rule. */
.trainer-thread .msg.is-error .msg-bubble {
  background: rgba(220,38,38,0.04);
  border: 1px solid rgba(220,38,38,0.18);
  border-left: 2px solid var(--danger);
  color: var(--text-primary);
}
.trainer-thread .msg.is-error .ai-draft-label {
  color: var(--danger);
}
.trainer-thread .msg.is-error .ai-draft-actions {
  border-top-color: rgba(220,38,38,0.12);
}

/* ---------- Settings nav: Kasia Trainer item flask glyph color ----------
   Inherits .settings-nav-item.is-active iris-tint styling already
   defined for Op Context / Rules. Nothing to override. */

/* ---------- Animations ---------- */
@keyframes trainerBubbleIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes trainerDiffIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes trainerMenuIn {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes trainerModalIn {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes trainerPulse {
  0%, 100% { opacity: 0.35; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.0); }
}
@keyframes trainerSkeleton {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 0.9; }
}

/* ==================================================================== */
/* === Workspace topbar + Kasia Trainer drawer (Noa Trainer v2 spec) === */
/* ==================================================================== */
/* Always-visible 44px chrome bar above the inbox/thread/context row.
   Hosts the Greeter-AI summon icon (right-aligned) and reserves space for
   future siblings (bell, profile menu). Per spec §3.1. */
.workspace-topbar {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  padding: 0 var(--space-6);
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-subtle);
}

/* --- Greeter-AI summon icon ----------------------------------------- */
/* The open-G ring + center pulse-dot glyph. Default = text-secondary
   stroke on transparent. Hover = text-primary on bg-elevated. Active
   (drawer open) = iris stroke on iris-tint with iris-edge border.
   Focus = default + 3px iris ring. Spec §2.3. */
.tb-ai-greeter {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.tb-ai-greeter svg { width: 16px; height: 16px; display: block; }
.tb-ai-greeter:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}
.tb-ai-greeter:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-iris-ring);
}
.tb-ai-greeter.active {
  background: var(--brand-iris-tint);
  color: var(--brand-iris);
  border-color: var(--brand-iris-edge);
}

/* Idle pulse — center dot fades 1.0 → 0.45 → 1.0 over 2.4s. Pauses while
   drawer is open. Per spec §2.4. */
@keyframes greeter-ai-idle-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
.tb-ai-greeter:not(.active) .greeter-ai-pulse {
  animation: greeter-ai-idle-pulse 2400ms ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.tb-ai-greeter.active .greeter-ai-pulse { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .tb-ai-greeter .greeter-ai-pulse { animation: none; }
}

/* --- Kasia Trainer drawer ------------------------------------------- */
/* Right-edge slide-in, 520px desktop, iris left accent strip. No scrim
   (non-modal) — inbox + thread stay clickable. Per spec §4. */
.ai-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 520px;
  max-width: 92vw;
  background: var(--bg-canvas);
  border-left: 3px solid var(--brand-iris);
  box-shadow: -8px 0 32px rgba(10,10,10,0.10), -2px 0 8px rgba(10,10,10,0.04);
  z-index: 60;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur-normal) var(--ease-out);
}
.ai-drawer.open { transform: translateX(0); }
.ai-drawer[hidden] { display: none; }
/* Exit easing — quicker than enter so elements leave with intent. */
.ai-drawer.is-closing {
  transition: transform var(--dur-fast) cubic-bezier(0.7, 0, 0.84, 0);
}

.ai-drawer-head {
  flex: none;
  height: 56px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-base);
}
.ai-drawer-mark {
  width: 32px; height: 32px;
  flex: none;
  background: var(--brand-iris-tint);
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  color: var(--brand-iris);
}
.ai-drawer-mark svg { width: 18px; height: 18px; display: block; }
.ai-drawer-hdr-meta {
  display: flex; flex-direction: column; gap: 1px;
  flex: 1; min-width: 0;
}
.ai-drawer-hdr-name {
  font-size: 14px; font-weight: 600; color: var(--text-primary);
  letter-spacing: -0.1px;
}
.ai-drawer-hdr-sub {
  font-size: 11.5px; color: var(--text-tertiary);
}
.ai-drawer-kbd { margin-left: auto; }
.ai-drawer-close { margin-left: var(--space-1); }

.ai-drawer-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Inline `kbd` chip — JetBrains Mono on bg-elevated. Spec §4.4. */
.kbd {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  white-space: nowrap;
}

/* Screen-reader only — visually hidden but announced. Spec §8. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- trainer.js drawer-mode adapter --------------------------------- */
/* When trainer.js mounts inside .ai-drawer-body, it adds .is-drawer to
   the host and inherits these overrides — no max-width cap, no
   section-head, sticky composer pinned to the drawer bottom. Per spec §4.5. */
.trainer-host.is-drawer {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: 100%;
}
.trainer-host.is-drawer .trainer-thread {
  flex: 1;
  overflow-y: auto;
}
.trainer-host.is-drawer .trainer-composer {
  position: sticky;
  bottom: 0;
  background: var(--bg-canvas);
  border-top: 1px solid var(--border-subtle);
  z-index: 2;
}

/* --- Mobile (≤ 768px) ----------------------------------------------- */
/* Drawer goes full-screen; left accent strip rotates to a top strip.
   Topbar shrinks to 40px. Spec §3.2 + §4.1. */
@media (max-width: 768px) {
  .ai-drawer {
    width: 100vw;
    max-width: 100vw;
    border-left: none;
    border-top: 3px solid var(--brand-iris);
  }
}

/* --- Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ai-drawer { transition: none; }
  .ai-drawer.is-closing { transition: none; }
}

/* ============================================================== */
/* Greeter AI — contextual co-pilot chat (topbar drawer body)     */
/* Mounted by greeter_ai.js into #ai-drawer-body. Clones the       */
/* Hyperfocus AI panel chat, themed to Greeter tokens.            */
/* ============================================================== */
.gai-host {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.gai-context-chip {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 10px 0;
  padding: 6px 10px;
  background: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 8px);
  font-size: 11.5px; color: var(--text-secondary);
  flex: none;
}
.gai-context-chip.is-empty { color: var(--text-tertiary); }
.gai-chip-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-iris); flex: none;
}
.gai-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.gai-stream {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
  padding: 4px 2px 8px 2px;
}

/* empty state */
.gai-empty {
  margin: auto; text-align: center; max-width: 280px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--text-secondary);
}
.gai-empty-mark {
  width: 40px; height: 40px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--brand-iris-tint); color: var(--brand-iris);
  margin-bottom: 4px;
}
.gai-empty-mark svg { width: 22px; height: 22px; }
.gai-empty-title { font-size: 14.5px; font-weight: 600; color: var(--text-primary); margin: 0; }
.gai-empty-sub { font-size: 12.5px; color: var(--text-tertiary); margin: 0; line-height: 1.5; }
.gai-chips { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 8px; }
.gai-chip-btn {
  padding: 8px 12px; border-radius: var(--radius-md, 8px);
  border: 1px solid var(--border-default); background: var(--bg-base);
  color: var(--text-secondary); font: inherit; font-size: 12.5px; cursor: pointer;
  text-align: left;
  transition: background var(--dur-fast, 120ms) var(--ease-out), border-color var(--dur-fast, 120ms) var(--ease-out), color var(--dur-fast, 120ms) var(--ease-out);
}
.gai-chip-btn:hover { background: var(--bg-elevated); border-color: var(--brand-iris-edge); color: var(--text-primary); }

/* bubble rows */
.gai-row { display: flex; gap: 8px; align-items: flex-start; }
.gai-row.user { justify-content: flex-end; }
.gai-avatar {
  width: 26px; height: 26px; border-radius: 999px; flex: none;
  display: grid; place-items: center;
  background: var(--brand-iris-tint); color: var(--brand-iris);
  margin-top: 2px;
}
.gai-avatar svg { width: 16px; height: 16px; }
.gai-bubble {
  max-width: 80%;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--bg-ai-draft);
  border: 1px solid var(--brand-iris-edge);
  border-top-left-radius: 4px;
  font-size: 13px; line-height: 1.55; color: var(--text-primary);
  animation: gai-bubble-in 200ms var(--ease-out, ease-out);
}
.gai-bubble.user {
  background: var(--text-primary); color: #FFFFFF; border-color: var(--text-primary);
  border-top-left-radius: 12px; border-bottom-right-radius: 4px;
}
.gai-bubble.error { background: var(--danger-tint, rgba(220,38,38,0.08)); border-color: var(--danger, #DC2626); color: var(--danger, #DC2626); }
@keyframes gai-bubble-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.gai-body strong { font-weight: 600; }
.gai-time {
  display: block; margin-top: 4px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--text-tertiary); opacity: 0.7;
}
.gai-bubble.user .gai-time { color: rgba(255,255,255,0.6); }

/* typing dots */
.gai-typing { display: flex; gap: 4px; padding: 2px 0; }
.gai-typing-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-tertiary);
  animation: gai-typing 1.2s infinite ease-in-out;
}
.gai-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.gai-typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes gai-typing { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* composer */
.gai-composer {
  flex: none;
  display: flex; align-items: flex-end; gap: 8px;
  padding-top: 10px; margin-top: 8px;
  border-top: 1px solid var(--border-subtle);
}
.gai-textarea {
  flex: 1 1 auto; resize: none;
  min-height: 38px; max-height: 140px;
  padding: 9px 12px;
  border: 1px solid var(--border-default); border-radius: var(--radius-md, 8px);
  background: var(--bg-base); color: var(--text-primary);
  font: inherit; font-size: 13px; line-height: 1.4;
  transition: border-color var(--dur-fast, 120ms) var(--ease-out);
}
.gai-textarea:focus { outline: none; border-color: var(--brand-iris); box-shadow: 0 0 0 3px var(--brand-iris-tint); }
.gai-send {
  flex: none; width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--radius-md, 8px);
  background: var(--brand-iris); color: #FFFFFF; cursor: pointer;
  transition: background var(--dur-fast, 120ms) var(--ease-out), opacity var(--dur-fast, 120ms) var(--ease-out);
}
.gai-send svg { width: 17px; height: 17px; }
.gai-send:hover { background: var(--brand-iris-hover); }
.gai-send:active { background: var(--brand-iris-pressed); }
.gai-send:disabled { opacity: 0.5; cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .gai-bubble { animation: none; }
  .gai-typing-dot { animation: none; }
}

/* Greeter AI — rule-proposal card (apply + per-change undo, F1) */
.gai-proposal {
  margin-top: 10px; padding: 10px 12px;
  background: var(--bg-canvas); border: 1px dashed var(--brand-iris-edge);
  border-radius: var(--radius-md, 8px);
}
.gai-proposal-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.gai-proposal-op {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600;
  padding: 2px 6px; border-radius: 4px;
  background: var(--brand-iris-tint); color: var(--brand-iris);
}
.gai-proposal-code {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-tertiary);
}
.gai-proposal-text {
  font-size: 12.5px; line-height: 1.5; color: var(--text-primary);
  white-space: pre-wrap; padding: 6px 0;
}
.gai-proposal-meta { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-tertiary); }
.gai-proposal-rationale { font-size: 11.5px; font-style: italic; color: var(--text-secondary); margin-top: 4px; line-height: 1.45; }
.gai-proposal-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.gai-proposal-apply {
  margin-left: auto; padding: 5px 14px; border: 0; border-radius: var(--radius-md, 8px);
  background: var(--brand-iris); color: #fff; font: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
  transition: background 120ms var(--ease-out);
}
.gai-proposal-apply:hover { background: var(--brand-iris-hover); }
.gai-proposal-applied { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--success, #16A34A); font-weight: 500; }
.gai-proposal-undo {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border: 1px solid var(--border-default); border-radius: var(--radius-md, 8px);
  background: var(--bg-base); color: var(--text-secondary); font: inherit; font-size: 11.5px; cursor: pointer;
  transition: background 120ms var(--ease-out), color 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.gai-proposal-undo:hover { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--brand-iris-edge); }
.gai-proposal-undo svg { width: 13px; height: 13px; }
.gai-proposal-reverted { font-size: 11.5px; color: var(--text-tertiary); font-style: italic; }
.gai-proposal-busy { font-size: 11.5px; color: var(--text-tertiary); }
.gai-proposal-err { font-size: 11px; color: var(--danger, #DC2626); margin-right: auto; }

/* Greeter AI — simulation (F2: run Kasia on the open ticket, before/after) */
.gai-toolbar { flex: none; display: flex; gap: 8px; padding: 6px 0; }
.gai-sim-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-md, 8px);
  border: 1px solid var(--border-default); background: var(--bg-base);
  color: var(--text-secondary); font: inherit; font-size: 12px; cursor: pointer;
  transition: background 120ms var(--ease-out), color 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.gai-sim-btn:hover { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--brand-iris-edge); }
.gai-sim-btn:disabled { opacity: 0.5; cursor: default; }
.gai-sim-btn svg { width: 14px; height: 14px; }
.gai-sim {
  border: 1px solid var(--brand-iris-edge); border-left: 3px solid var(--brand-iris);
  border-radius: var(--radius-md, 8px); background: var(--bg-ai-draft);
  padding: 10px 12px;
}
.gai-sim-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.gai-sim-label { font-size: 11px; font-weight: 600; color: var(--brand-iris); text-transform: uppercase; letter-spacing: 0.04em; }
.gai-sim-cat { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-tertiary); }
.gai-sim-badge { font-size: 10px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--accent, #6366F1); background: var(--accent-soft, rgba(99,102,241,0.12)); border-radius: 5px; padding: 2px 7px; }
.gai-sim-body { font-size: 12.5px; line-height: 1.55; color: var(--text-primary); white-space: pre-wrap; }
.gai-sim-err { font-size: 12px; color: var(--danger, #DC2626); }
.gai-sim-hint { font-size: 11px; color: var(--text-tertiary); margin-top: 4px; }
.gai-sim-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gai-sim-col { border-radius: 6px; padding: 8px; }
.gai-sim-before { background: var(--bg-elevated); }
.gai-sim-after { background: var(--bg-base); border-left: 2px solid var(--brand-iris); }
.gai-sim-col-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); margin-bottom: 4px; }
.gai-sim-col-body { font-size: 12px; line-height: 1.5; color: var(--text-primary); white-space: pre-wrap; }
@media (max-width: 560px) { .gai-sim-diff { grid-template-columns: 1fr; } }

/* ===== Shop Rules (Agent Brain tab) — Noa spec 2026-06-27 ===== */
.sr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sr-kasia-pill { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  font-size: 11px; font-weight: 600; color: var(--brand-iris);
  background: var(--brand-iris-tint); border: 1px solid var(--brand-iris-edge);
  border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.sr-kasia-spark { width: 13px; height: 13px; display: inline-flex; }
.sr-kasia-spark svg { fill: var(--brand-iris); stroke: var(--brand-iris); }

.sr-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.shop-rule-card { display: flex; align-items: flex-start; gap: 12px;
  background: var(--bg-base); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 14px 16px; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.shop-rule-card:hover { background: var(--bg-elevated); }
.shop-rule-card.is-editing { cursor: default; background: var(--bg-base);
  border-color: var(--brand-iris); box-shadow: 0 0 0 3px var(--brand-iris-ring);
  flex-direction: column; gap: 12px; }

.sr-icon { flex-shrink: 0; width: 30px; height: 30px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center; padding: 6px;
  background: var(--bg-elevated); border: 1px solid var(--border-subtle); color: var(--text-tertiary); }
.sr-icon.is-on { background: var(--brand-iris-tint); border-color: var(--brand-iris-edge); color: var(--brand-iris); }
.sr-icon svg { width: 100%; height: 100%; }

.sr-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sr-card-row1 { display: flex; align-items: center; gap: 10px; }
.sr-card-label { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.sr-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
  border-radius: 999px; padding: 2px 8px; }
.sr-status .sr-dot { width: 6px; height: 6px; border-radius: 50%; }
.sr-status-on { color: #15803D; background: rgba(22,163,74,0.10); }
.sr-status-on .sr-dot { background: #16A34A; }
.sr-status-off { color: var(--text-tertiary); background: var(--bg-elevated); }
.sr-status-off .sr-dot { background: var(--text-quaternary); }
.sr-card-body { font-size: 12.5px; line-height: 1.5; color: var(--text-secondary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-card-body-empty { color: var(--text-tertiary); font-style: italic; }
.sr-card-meta { font-size: 10.5px; font-family: 'JetBrains Mono', monospace; color: var(--text-tertiary); }

.sr-edit-btn { flex-shrink: 0; width: 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; padding: 6px;
  background: transparent; border: none; cursor: pointer; color: var(--text-tertiary);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.sr-edit-btn:hover { background: var(--bg-elevated); color: var(--text-primary); }
.sr-edit-svg { width: 100%; height: 100%; display: inline-flex; }
.sr-edit-svg svg { width: 100%; height: 100%; }

/* Edit (inline expand) */
.sr-edit-head { display: flex; align-items: center; gap: 10px; width: 100%; }
.sr-edit-title { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.shop-rule-card.is-editing .op-ctx-textarea { width: 100%; }
.sr-edit-subrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; width: 100%; }
.sr-toggle-row { display: flex; align-items: center; gap: 10px; width: 100%; }
.sr-toggle { position: relative; width: 34px; height: 20px; border-radius: 999px; flex-shrink: 0;
  background: var(--text-quaternary); border: none; cursor: pointer; padding: 0;
  transition: background var(--dur-fast) var(--ease-out); }
.sr-toggle.is-on { background: var(--brand-iris); }
.sr-toggle-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: left var(--dur-fast) var(--ease-out); }
.sr-toggle.is-on .sr-toggle-knob { left: 16px; }
.sr-toggle-label { font-size: 12.5px; color: var(--text-secondary); }
.sr-edit-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: 2px; }
.sr-edit-foot-right { display: flex; align-items: center; gap: 8px; }
.sr-btn-secondary { font-size: 13px; font-weight: 500; color: var(--text-secondary);
  background: var(--bg-base); border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: 7px 14px; cursor: pointer; }
.sr-btn-secondary:hover { background: var(--bg-elevated); }
.sr-ghost { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-tertiary);
  background: transparent; border: none; cursor: pointer; padding: 6px 4px; }
.sr-ghost:hover { color: var(--text-secondary); }
.sr-ghost-danger { font-size: 12.5px; font-weight: 600; color: #DC2626; background: transparent;
  border: none; cursor: pointer; padding: 6px 8px; }
.sr-clear-confirm { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); }

/* First-run + states */
.sr-firstrun { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  margin-top: 24px; padding: 36px 24px; border: 1px dashed var(--border-default); border-radius: var(--radius-lg); }
.sr-firstrun-icon { width: 44px; height: 44px; border-radius: 10px; padding: 10px; margin-bottom: 4px;
  background: var(--brand-iris-tint); color: var(--brand-iris); display: flex; align-items: center; justify-content: center; }
.sr-firstrun-icon svg { width: 100%; height: 100%; }
.sr-firstrun-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.sr-firstrun-sub { font-size: 12.5px; color: var(--text-secondary); max-width: 420px; line-height: 1.5; margin-bottom: 6px; }
.sr-error { font-size: 12.5px; color: #DC2626; background: rgba(220,38,38,0.07); border-radius: var(--radius-md); padding: 8px 12px; margin-top: 12px; }
.sr-skeleton { font-size: 12.5px; color: var(--text-tertiary); padding: 24px; text-align: center; }
@media (max-width: 560px) { .sr-edit-subrow { flex-direction: column; gap: 4px; } }

/* ===== PK editor — unsaved-changes dirty-bar + Discard confirm dialog (Faza 2) ===== */
.pk-dirtybar { display: none; align-items: center; gap: 8px; padding: 8px 20px;
  background: var(--brand-iris-tint); border-top: 1px solid var(--brand-iris-edge); }
.pk-dirtybar.pk-dirtybar-show { display: flex; }
.pk-dirtybar-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-iris); flex-shrink: 0; }
.pk-dirtybar-text { font-size: 11.5px; color: var(--text-secondary); }
.pk-confirm-backdrop { position: fixed; inset: 0; z-index: 10001; background: rgba(10,10,10,0.40);
  display: grid; place-items: center; animation: pkConfirmFade var(--dur-fast, 120ms) var(--ease-out, ease-out); }
@keyframes pkConfirmFade { from { opacity: 0; } to { opacity: 1; } }
.pk-confirm { width: 420px; max-width: 92vw; background: var(--bg-base);
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0,0,0,0.18); overflow: hidden; }
.pk-confirm-body { padding: 20px; }
.pk-confirm-title { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--text-primary); }
.pk-confirm-text { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.55; }
.pk-confirm-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px;
  background: var(--bg-elevated); border-top: 1px solid var(--border-subtle); }
@media (prefers-reduced-motion: reduce) { .pk-confirm-backdrop { animation: none; } }

/* PK editor — "policy lives in Shop Rules" wayfinding hint (Faza 2) */
.pk-policy-hint { display: flex; align-items: flex-start; gap: 7px; margin-top: 10px;
  background: var(--brand-iris-tint); border: 1px solid var(--brand-iris-edge);
  border-radius: var(--radius-md); padding: 9px 11px; font-size: 11.5px;
  color: var(--text-secondary); line-height: 1.5; }
.pk-policy-hint .pk-policy-hint-ico { width: 14px; height: 14px; color: var(--brand-iris); flex-shrink: 0; margin-top: 1px; display: inline-flex; }
.pk-policy-hint strong { color: var(--brand-iris); font-weight: 600; }

/* PK grid — Hero thumbnail column (Faza 3). Collection col reuses .pk-grid-text + .pk-grid-trunc. */
.pk-grid-hero-wrap { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; cursor: zoom-in; }
.pk-grid-hero-thumb { width: 32px; height: 32px; border-radius: var(--radius-sm, 4px); border: 1px solid var(--border-subtle);
  object-fit: cover; background: var(--bg-elevated); display: block;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.pk-grid-hero-wrap:hover .pk-grid-hero-thumb { transform: scale(1.12); box-shadow: 0 2px 8px rgba(10,10,10,0.10); }
.pk-grid-hero-fallback { width: 32px; height: 32px; border-radius: var(--radius-sm, 4px); border: 1px solid var(--border-subtle);
  background: var(--bg-elevated); display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); cursor: default; }
.pk-grid-hero-fallback svg { width: 16px; height: 16px; }
.pk-grid-row.state-archived .pk-grid-hero-thumb, .pk-grid-row.state-archived .pk-grid-hero-fallback { opacity: 0.55; }

/* Greeter AI — product-knowledge proposal card fields (F3) */
.gai-proposal-pk .gai-pk-fields { display: flex; flex-direction: column; gap: 3px; padding: 6px 0; }
.gai-pk-field { display: flex; gap: 8px; font-size: 12px; line-height: 1.45; }
.gai-pk-field-k { flex: none; min-width: 96px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; font-size: 10.5px; padding-top: 1px; }
.gai-pk-field-v { color: var(--text-primary); white-space: pre-wrap; }

/* =========================================================================
   PRODUCT KNOWLEDGE — Excel-style spreadsheet GRID  (Noa hub spec §4)
   Replaces the old .pk-list card rendering. Built on the brandbook
   table.compare primitive: quiet 1px dividers, mono-upper sticky header,
   no zebra striping (row separation by border alone, Linear/Stripe style).
   Sticky Product column (left) + actions column (right) + header (top) via
   position:sticky on the surface ladder so scrolled cells are occluded.
   Iris-only accent; warning amber only for the existing stub state.
   ========================================================================= */

/* ---------- Scroll container (horizontal + vertical) ---------- */
.pk-grid-scroll {
  position: relative;
  width: 100%;
  max-height: calc(100vh - 280px);
  overflow: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-base);
}

.pk-grid-table {
  border-collapse: separate;
  border-spacing: 0;
  /* width:100% lets the table stretch to fill a wide panel; the px min-width
     set inline by buildGridTable() (= sum of column widths) makes it overflow
     and scroll sideways when the panel is narrower than the columns need.
     NOTE: do NOT use `min-width: max-content` here — on a table-layout:fixed
     table it silently discards the colgroup widths and renders every column
     equal-width. The inline px min-width is the reliable mechanism. */
  width: 100%;
  table-layout: fixed;
  font-size: 12.5px;
  color: var(--text-primary);
}

/* ---------- Header row (sticky top) ---------- */
.pk-grid-thead .pk-grid-headrow .pk-grid-th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-default);
  border-right: 1px solid var(--border-subtle);
  padding: 0;
  text-align: left;
  vertical-align: middle;
  height: 44px;
}
.pk-grid-th.is-right { text-align: right; }
.pk-grid-th.is-center { text-align: center; }
.pk-grid-th-label,
.pk-grid-sort {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.pk-grid-th.is-right .pk-grid-th-label,
.pk-grid-th.is-right .pk-grid-sort { justify-content: flex-end; }
.pk-grid-th.is-center .pk-grid-th-label,
.pk-grid-th.is-center .pk-grid-sort { justify-content: center; }
.pk-grid-sort {
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.pk-grid-sort:hover { color: var(--text-secondary); }
.pk-grid-sort.is-active { color: var(--brand-iris); }
.pk-grid-sort-chev {
  font-size: 9px;
  color: var(--brand-iris);
  line-height: 1;
}
.pk-grid-sort-chev[data-dir=""] { opacity: 0; }

/* ---------- Body cells ---------- */
.pk-grid-cell {
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
  padding: 8px 12px;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  /* min-height (not fixed) so a wrapped 2-line product name expands the row
     instead of being clipped. */
  height: auto;
  min-height: 44px;
}
.pk-grid-cell.is-right { text-align: right; }
.pk-grid-cell.is-center { text-align: center; }
.pk-grid-row:last-child .pk-grid-cell { border-bottom: none; }
.pk-grid-row:hover .pk-grid-cell { background: var(--bg-elevated); }

/* ---------- Sticky columns ---------- */
.pk-grid-sticky-left {
  position: sticky;
  left: 0;
  z-index: 2;
  border-right: 1px solid var(--border-default);
}
.pk-grid-sticky-right {
  position: sticky;
  right: 0;
  z-index: 2;
  border-right: none;
  border-left: 1px solid var(--border-default);
}
/* Sticky body cells need an opaque bg to occlude scrolled-under cells.
   Header sticky cells already carry --bg-elevated + top:0 z-index:3. */
.pk-grid-tbody .pk-grid-sticky-left,
.pk-grid-tbody .pk-grid-sticky-right { background: var(--bg-base); }
.pk-grid-row:hover .pk-grid-sticky-left,
.pk-grid-row:hover .pk-grid-sticky-right { background: var(--bg-elevated); }
/* Header sticky corners sit above body sticky cells. */
.pk-grid-thead .pk-grid-sticky-left,
.pk-grid-thead .pk-grid-sticky-right { z-index: 4; background: var(--bg-elevated); }

/* ---------- Col 1: Product (name + status dot) ---------- */
.pk-grid-product { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pk-grid-dot {
  flex: none;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brand-iris);
}
.pk-grid-dot[data-state="stub"] { background: var(--danger); }
.pk-grid-dot[data-state="archived"] { background: var(--text-tertiary); }
.pk-grid-name {
  font-weight: 500;
  color: var(--text-primary);
  /* Wrap long product names to 2 lines so they stay readable instead of
     truncating to "Pozła…". white-space:normal is required to override the
     nowrap inherited from .pk-grid-cell, else the clamp shows only 1 line. */
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}

/* ---------- Col 2: SKU chips ---------- */
.pk-grid-skus { display: flex; gap: 4px; overflow: hidden; }
.pk-grid-sku-chip {
  flex: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 1px 5px;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pk-grid-sku-chip.is-muted { opacity: 0.55; }

/* ---------- Generic text / mono / truncating cell content ---------- */
.pk-grid-text { color: var(--text-primary); }
.pk-grid-mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--text-primary);
}
.pk-grid-price { font-feature-settings: 'tnum'; }
.pk-grid-trunc,
.pk-grid-pricenote {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pk-grid-pricenote { font-style: italic; color: var(--text-secondary); }
.pk-grid-dash { color: var(--text-quaternary); }

/* ---------- Col 9: Shorten? tri-state badge ---------- */
.pk-grid-tri {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.pk-grid-tri:hover { border-color: var(--border-default); }
.pk-grid-tri.is-yes { color: var(--status-resolved, #16A34A); background: rgba(22,163,74,0.10); }
.pk-grid-tri.is-no { color: #B45309; background: rgba(180,83,9,0.10); }
.pk-grid-tri.is-unknown { color: var(--text-tertiary); background: var(--bg-elevated); }
.pk-grid-tri-picker {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--radius-md);
  background: var(--bg-base);
  border: 1px solid var(--brand-iris);
  box-shadow: var(--elev-focus);
}
.pk-grid-tri-opt {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--text-secondary);
}
.pk-grid-tri-opt:hover { background: var(--bg-elevated); }
.pk-grid-tri-opt.is-current { color: var(--brand-iris); background: var(--brand-iris-tint); }

/* ---------- Col 11: Complete (fraction + micro progress bar) ---------- */
.pk-grid-complete { display: flex; flex-direction: column; gap: 3px; }
.pk-grid-complete-frac {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-secondary);
  font-feature-settings: 'tnum';
}
.pk-grid-progress {
  width: 40px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  overflow: hidden;
}
.pk-grid-progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--brand-iris);
  transition: width var(--dur-base, 200ms) var(--ease-out);
}
.pk-grid-progress-fill.is-stub { background: var(--danger); }

/* ---------- Col 13: actions cluster ---------- */
.pk-grid-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}
.pk-grid-expand-btn svg { transition: transform var(--dur-fast) var(--ease-out); }
.pk-grid-row.is-expanded .pk-grid-expand-btn svg { transform: rotate(180deg); }

/* ---------- Row states ---------- */
.pk-grid-row.state-archived .pk-grid-name,
.pk-grid-row.state-archived .pk-grid-text,
.pk-grid-row.state-archived .pk-grid-mono,
.pk-grid-row.state-archived .pk-grid-trunc { color: var(--text-secondary); }
.pk-grid-row.is-pulsing > .pk-grid-cell { animation: pk-grid-pulse 1200ms var(--ease-out); }
@keyframes pk-grid-pulse {
  0% { background: var(--brand-iris-tint); }
  100% { background: var(--bg-base); }
}
.pk-grid-row.is-stale-sync .pk-grid-col-product::after {
  /* subtle out-of-sync marker on the name cell */
  content: "";
}

/* ---------- Inline cell editing ---------- */
.pk-grid-cell.is-editable { cursor: text; }
.pk-grid-cell.is-editable.pk-grid-col-shorten { cursor: pointer; }
.pk-grid-row:hover .pk-grid-cell.is-editable {
  box-shadow: inset 0 0 0 1px var(--border-default);
}
/* Direct hover on an editable cell: clear iris ring + tint so it's obvious the
   cell is click-to-edit (Rafał 2026-06-16: "nie mogę edytować tekstu"). */
.pk-grid-cell.is-editable:hover {
  box-shadow: inset 0 0 0 1.5px var(--brand-iris);
  background: var(--brand-iris-tint, rgba(91,91,214,0.07)) !important;
}
.pk-grid-cell.is-editing {
  padding: 0;
  box-shadow: inset 0 0 0 1px var(--brand-iris);
  background: var(--bg-base) !important;
}
.pk-grid-edit-input,
.pk-grid-edit-select {
  width: 100%;
  height: 100%;
  min-height: 42px;
  box-sizing: border-box;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  color: var(--text-primary);
}
.pk-grid-edit-input.is-mono { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; }
.pk-grid-edit-input.is-right { text-align: right; }
.pk-grid-edit-select { cursor: pointer; }
.pk-grid-edit-input:focus,
.pk-grid-edit-select:focus { outline: 0; }

/* chip editor inside a cell (Sizes) */
.pk-grid-chip-edit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  min-height: 42px;
}
.pk-grid-cell.is-editing-chips { white-space: normal; overflow: visible; }
.pk-grid-chip-edit-input {
  flex: 1;
  min-width: 48px;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-primary);
}
.pk-grid-chip-removable { display: inline-flex; align-items: center; gap: 3px; padding-right: 3px; }
.pk-grid-chip-x {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1;
  padding: 0 1px;
}
.pk-grid-chip-x:hover { color: var(--danger); }

/* save-flash feedback (600ms) */
.pk-grid-cell.is-saving { opacity: 0.6; }
.pk-grid-cell.is-flash-ok { animation: pk-cell-flash-ok 600ms var(--ease-out); }
.pk-grid-cell.is-flash-fail { animation: pk-cell-flash-fail 600ms var(--ease-out); }
@keyframes pk-cell-flash-ok {
  0% { background: var(--brand-iris-tint); }
  100% { background: var(--bg-base); }
}
@keyframes pk-cell-flash-fail {
  0% { background: var(--danger-tint); }
  100% { background: var(--bg-base); }
}

/* ---------- Full-width expand detail row ---------- */
.pk-grid-detail-row > .pk-grid-detail-cell {
  background: var(--bg-canvas);
  border-bottom: 1px solid var(--border-default);
  padding: var(--space-4) var(--space-6);
  white-space: normal;
}
.pk-grid-detail-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-3);
}

/* ---------- Inline confirm row (archive / delete) ---------- */
.pk-grid-confirm-row > .pk-grid-confirm-cell {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-default);
  padding: var(--space-3) var(--space-6);
  white-space: normal;
}
.pk-grid-confirm-shim {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.pk-grid-confirm-shim .pk-confirm-text { font-size: 12.5px; color: var(--text-primary); }
.pk-grid-confirm-shim .pk-confirm-actions { display: flex; gap: var(--space-2); flex: none; }
.pk-grid-row.is-confirming > .pk-grid-cell { opacity: 0.6; }

/* ---------- Auto-archive micro pill (in status cell) ---------- */
.pk-micro-pill.pk-micro-auto-archive {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-tertiary);
  margin-left: 4px;
}

/* ---------- Toast (was referenced by JS but never styled) ---------- */
.pk-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 12px);
  z-index: 1000;
  max-width: 420px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: #18181B;
  color: #FFFFFF;
  font-size: 12.5px;
  line-height: 1.45;
  box-shadow: 0 8px 24px rgba(10,10,10,0.18);
  opacity: 0;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  pointer-events: none;
}
.pk-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.pk-toast-success { border-left: 3px solid var(--brand-iris); }
.pk-toast-info { border-left: 3px solid var(--text-tertiary); }
.pk-toast-error { border-left: 3px solid var(--danger); }

/* ---------- Skeleton (grid loading) ---------- */
.pk-skeleton-list { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-2); }

/* ---------- Responsive: keep sticky behaviour, allow horizontal scroll ---------- */
@media (max-width: 720px) {
  .pk-grid-scroll { max-height: calc(100vh - 240px); }
}

/* Background regenerate — inbox-row "AI is drafting" indicator */
.convo-preview.convo-drafting {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--brand-iris); font-style: italic;
}
.convo-drafting-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-iris);
  animation: convo-drafting-pulse 1s ease-in-out infinite;
}
@keyframes convo-drafting-pulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .convo-drafting-dot { animation: none; } }

/* ============================================================== */
/* Kasia Brain — consolidated hub tab bar (Noa #62)               */
/* Distinct .hub-tabs class so it never collides with a module's   */
/* own internal .kasia-tabs (which we suppress inside the panel).  */
/* ============================================================== */
/* Both hubs (Agent Brain + Shop, 2026-07-27) share ONE tab idiom. The
   selectors are doubled rather than rewritten to a shared class so the change
   stays mechanical and reviewable — see Noa Shop spec §4.3. */
.kasia-brain .hub-tabs,
.shop-hub .hub-tabs {
  display: flex; gap: var(--space-1, 4px);
  border-bottom: 1px solid var(--border-subtle);
  margin: 4px 0 16px 0;
  /* 5-6 tabs must scroll, not wrap: a wrapped second row detaches the 2px
     active underline from the panel edge. */
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
.kasia-brain .hub-tabs::-webkit-scrollbar,
.shop-hub .hub-tabs::-webkit-scrollbar { height: 0; }
.kasia-brain .hub-tab,
.shop-hub .hub-tab {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 8px 14px;
  flex: none; white-space: nowrap;
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--text-secondary);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: background var(--dur-fast, 120ms) var(--ease-out), color var(--dur-fast, 120ms) var(--ease-out);
}
.kasia-brain .hub-tab:hover,
.shop-hub .hub-tab:hover { background: var(--bg-elevated); color: var(--text-primary); }
.kasia-brain .hub-tab.is-active,
.shop-hub .hub-tab.is-active { color: var(--text-primary); font-weight: 600; border-bottom-color: var(--brand-iris); }
.kasia-brain .hub-tab:focus-visible,
.shop-hub .hub-tab:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--brand-iris-ring); border-radius: var(--radius-md, 6px); }
.kasia-brain .hub-tab-badge,
.shop-hub .hub-tab-badge {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 600;
  padding: 1px 6px; border-radius: 999px;
  background: var(--brand-iris-tint); color: var(--brand-iris);
}
.kasia-brain .hub-tab-badge.is-warn,
.shop-hub .hub-tab-badge.is-warn { background: var(--warning-tint, rgba(217,119,6,0.10)); color: var(--warning, #D97706); }
/* Needs-setup dot. #B45309 not --warning: --warning computes 2.90:1 on a
   hovered tab, under the 3:1 non-text minimum. */
.kasia-brain .hub-tab-badge.is-dot,
.shop-hub .hub-tab-badge.is-dot {
  width: 6px; height: 6px; padding: 0; border-radius: 50%;
  background: #B45309;
}
.kasia-brain .kasia-brain-cta,
.shop-hub .kasia-brain-cta { display: flex; align-items: center; }
/* position: relative so the .compose-confirm leave guard can overlay it. */
.kasia-brain .hub-tab-panel,
.shop-hub .hub-tab-panel { min-height: 200px; position: relative; }
/* Suppress each module's OWN internal tab bar (kasia rules/log toggle) when
   it renders inside the hub — the hub owns tab switching now. */
.kasia-brain .hub-tab-panel .kasia-tabs,
.shop-hub .hub-tab-panel .kasia-tabs { display: none; }

/* =========================================================================
   AGENT BRAIN refinements (Rafał 2026-06-16)
   Data-dense surfaces (esp. the product grid) need the full settings width,
   not the 1080px readability cap that profile/security use. And the PK
   section header (title + Resync + Add) needs real styling — the resync SVG
   was rendering unsized (giant). Compact, branded, top-right.
   ========================================================================= */

/* Let the hub fill the settings pane — override the generic 1080px cap so the
   spreadsheet gets room (Rafał: "zróbcie aby panel był szerszy"). */
.settings-section > .kasia-brain,
.settings-section > .shop-hub {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* ---------- PK section header (title block + actions) ---------- */
.pk-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.pk-section-titleblock { min-width: 0; }
.pk-section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.1px;
}
.pk-section-sub {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: 2px;
  max-width: 640px;
}
.pk-section-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
}

/* Compact, branded Resync button — was a huge unsized icon. */
.pk-btn-resync {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  font-size: 12.5px;
  white-space: nowrap;
}
.pk-btn-resync svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.pk-btn-resync:disabled { opacity: 0.6; cursor: default; }
.pk-btn-resync.is-syncing svg { animation: pk-resync-spin 0.8s linear infinite; }
@keyframes pk-resync-spin { to { transform: rotate(360deg); } }
.pk-btn-resync-label { line-height: 1; }

/* =========================================================================
   PK CUSTOM COLUMNS (separate pk_custom_columns.js module — Rafał 2026-06-16)
   Implements Noa's spec. Reuses .pk-grid-*, .filter-chip, .pk-input, .btn-*.
   Only thin new classes here; no new tokens/colors.
   ========================================================================= */

/* "+" add-column header cell */
.pk-grid-th.pk-grid-col-addcol { padding: 0; }
.pk-cc-addbtn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  width: 100%; height: 44px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--text-tertiary);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.pk-cc-addbtn:hover { color: var(--brand-iris); background: var(--bg-elevated); }
.pk-cc-addbtn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--brand-iris-ring, rgba(91,91,214,0.4)); }
.pk-cc-addbtn-icon { display: inline-flex; }
.pk-cc-addbtn-icon svg { width: 14px; height: 14px; }
.pk-cc-addbtn-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
}

/* custom column header (label + iris marker dot, opens manage popover) */
.pk-cc-colcfg {
  display: inline-flex; align-items: center; gap: 6px;
  width: 100%; height: 44px; padding: 0 14px;
  background: transparent; border: 0; cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-tertiary);
  transition: color var(--dur-fast) var(--ease-out);
}
.pk-cc-colcfg:hover { color: var(--text-secondary); }
.pk-cc-colcfg-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-cc-marker { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-iris); }

/* popover surface (create + manage) */
.pk-colpop {
  z-index: 1200;
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(10,10,10,0.16);
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: 8px;
  animation: pk-colpop-in 0.18s var(--ease-out);
}
@keyframes pk-colpop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.pk-colpop-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.pk-colpop-flabel { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.pk-colpop-help { font-size: 11px; color: var(--text-tertiary); }
.pk-colpop-kasia {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 11px; color: var(--text-secondary);
  margin-top: 4px;
}
.pk-colpop-kasia-icon { flex: none; color: var(--brand-iris); display: inline-flex; }
.pk-colpop-kasia-icon svg { width: 13px; height: 13px; }
.pk-colpop-foot {
  display: flex; justify-content: flex-end; gap: var(--space-2);
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}
.pk-colpop-foot-split { justify-content: space-between; align-items: center; }
.pk-colpop-foot-right { display: flex; gap: var(--space-2); }

/* type tiles (reuse .filter-chip look) */
.pk-cc-typegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pk-cc-typetile { width: 100%; justify-content: center; cursor: pointer; }
.pk-cc-typelock { display: flex; align-items: center; gap: 8px; }
.pk-cc-typetile.is-locked { cursor: default; opacity: 0.85; }
.pk-cc-choiceswrap { display: flex; flex-direction: column; gap: 6px; }
.pk-cc-choices { min-height: 34px; }

/* delete confirm inside manage popover */
.pk-cc-delconfirm { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; }
.pk-cc-delconfirm-text { font-size: 12px; color: var(--text-primary); line-height: 1.4; }
.pk-cc-delconfirm-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

/* =========================================================================
   PK GRID — expand-cell popup (A) + bulk actions (B)  (Noa spec 2026-06-17)
   ========================================================================= */

/* A. Expand-to-popup affordance on long-text cells */
.pk-grid-cell.has-expand { position: relative; }
.pk-grid-cell-expand {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: var(--radius-sm, 4px);
  background: var(--bg-base); color: var(--text-tertiary);
  cursor: pointer; opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.pk-grid-cell-expand svg { width: 13px; height: 13px; }
.pk-grid-row:hover .pk-grid-cell.has-expand .pk-grid-cell-expand,
.pk-grid-cell.has-expand:focus-within .pk-grid-cell-expand { opacity: 1; }
.pk-grid-row:hover .pk-grid-cell-expand { background: var(--bg-elevated); }
.pk-grid-cell-expand:hover { color: var(--brand-iris); background: var(--brand-iris-tint); }
.pk-grid-cell-expand:focus-visible { opacity: 1; outline: 0; box-shadow: 0 0 0 2px var(--brand-iris-ring, rgba(91,91,214,0.4)); }

/* A. Cell popup (reuses .kasia-modal scaffold) */
.pk-cellpopup { width: 560px; }
.pk-cellpopup-context { font-size: 11.5px; color: var(--text-tertiary); margin-bottom: var(--space-2); }
.pk-cellpopup-textarea { min-height: 200px; max-height: 56vh; line-height: 1.6; resize: vertical; }

/* B. Select mode — 44px checkbox column pinned left of the sticky Product col */
.pk-grid-table.is-selecting .pk-grid-col-product.pk-grid-sticky-left { left: 44px; }
.pk-grid-col-select.pk-grid-sticky-left { left: 0; }
.pk-grid-th.pk-grid-col-select { text-align: center; padding: 0; }
.pk-grid-th.pk-grid-col-select .rule-select-checkbox { margin: 0 auto; }
.pk-grid-row.is-selectable { cursor: pointer; }
.rule-select-checkbox.is-indeterminate { background: var(--brand-iris-tint); border-color: var(--brand-iris); position: relative; }
.rule-select-checkbox.is-indeterminate::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 8px; height: 1.5px; background: var(--brand-iris); border-radius: 1px;
}

/* B. Bulk bar buttons + inline confirm / set-field panels */
.pk-bulk-btn { display: inline-flex; align-items: center; gap: 6px; }
.pk-bulk-btn svg { width: 13px; height: 13px; }
.pk-bulk-confirm { display: flex; align-items: center; gap: var(--space-2); flex: 1; }
.pk-bulk-confirm .pk-confirm-text { flex: 1; }
.pk-bulk-setfield-panel { display: flex; align-items: center; gap: var(--space-2); flex: 1; flex-wrap: wrap; }
.pk-bulk-setfield-panel label { font-size: 12.5px; color: var(--text-secondary); }
.pk-bulk-setfield-panel .pk-input, .pk-bulk-col-select { max-width: 220px; height: 32px; }
.pk-bulk-setfield-help { width: 100%; font-size: 11px; color: var(--text-tertiary); }

/* ============================================================ AUTONOMY (Agent Brain tab) */
/* Noa spec: autonomy_panel_noa_spec.md. iris = data color; warning/danger =
   STATUS only. JetBrains Mono on every number. */
@keyframes auton-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes auton-pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

.auton-panel { display: flex; flex-direction: column; gap: 20px; max-width: 1040px; margin: 0 auto; padding: 4px 0 48px; animation: auton-fade 180ms cubic-bezier(0.16,1,0.3,1); }
.auton-mono { font-family: 'JetBrains Mono', monospace; font-feature-settings: 'tnum'; }
.auton-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-tertiary); }
.auton-card { background: var(--bg-base); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg, 8px); box-shadow: var(--elev-1, 0 1px 2px rgba(10,10,10,0.04)); padding: 16px 24px; }

/* hero */
.auton-hero { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 20px 24px; }
.auton-hero-left { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.auton-hero-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.auton-score { font-family: 'JetBrains Mono', monospace; font-feature-settings: 'tnum'; font-size: 36px; font-weight: 500; letter-spacing: -0.5px; line-height: 1; color: var(--text-primary); }
.auton-hero-label { font-size: 13px; color: var(--text-secondary); }
.auton-hero-count { font-size: 12px; color: var(--text-tertiary); }
.auton-hero-count .auton-mono { font-size: 13px; color: var(--text-secondary); }
.auton-hero-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.auton-spark { line-height: 0; }
.auton-spark-empty { font-size: 11px; color: var(--text-tertiary); }

/* trend pill */
.auton-trend { display: inline-flex; align-items: center; gap: 4px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 9999px; }
.auton-trend-mark { display: inline-flex; line-height: 0; }
.auton-trend.is-up { background: var(--success-tint, rgba(22,163,74,0.10)); color: var(--success, #16A34A); }
.auton-trend.is-down { background: var(--danger-tint, rgba(220,38,38,0.10)); color: var(--danger, #DC2626); }
.auton-trend.is-flat { background: var(--bg-elevated); color: var(--text-tertiary); }

/* edit-depth bar */
.auton-bar-track { display: flex; gap: 2px; height: 12px; border-radius: 9999px; overflow: hidden; background: var(--bg-elevated); }
.auton-seg { height: 100%; transition: width 240ms cubic-bezier(0.16,1,0.3,1); }
.auton-seg-asis { background: var(--brand-iris); }
.auton-seg-light { background: rgba(91,91,214,0.45); }
.auton-seg-heavy { background: var(--warning, #D97706); }
.auton-seg-discarded { background: var(--danger, #DC2626); }
.auton-legend { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 12px; }
.auton-leg-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.auton-leg-item .auton-mono { color: var(--text-primary); font-weight: 500; }
.auton-sw { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.auton-sw-asis, .auton-sw.is-ontrack { background: var(--brand-iris); }
.auton-sw-light { background: rgba(91,91,214,0.45); }
.auton-sw-heavy, .auton-sw.is-warn { background: var(--warning, #D97706); }
.auton-sw-discarded, .auton-sw.is-danger { background: var(--danger, #DC2626); }

/* KPI row */
.auton-kpis { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.auton-kpi { background: var(--bg-elevated); border-radius: var(--radius-md, 6px); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.auton-kpi-label { font-size: 11px; font-weight: 500; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-tertiary); }
.auton-kpi-num { font-family: 'JetBrains Mono', monospace; font-feature-settings: 'tnum'; font-size: 24px; font-weight: 500; line-height: 1; color: var(--text-primary); }
.auton-kpi-num.is-warn { color: var(--warning, #D97706); }
.auton-kpi-sub { font-size: 11.5px; color: var(--text-tertiary); }

/* by topic */
.auton-sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.auton-sec-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.auton-topics { position: relative; }
.auton-target-line { position: absolute; top: 0; bottom: 0; width: 1px; background: repeating-linear-gradient(to bottom, var(--border-default) 0 4px, transparent 4px 8px); pointer-events: none; }
.auton-topic-row { display: grid; grid-template-columns: 150px 1fr 42px; gap: 12px; align-items: center; height: 32px; }
.auton-topic-label { font-size: 13px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auton-cbar { height: 8px; border-radius: 9999px; background: var(--bg-elevated); overflow: hidden; }
.auton-cfill { height: 100%; border-radius: 9999px; transition: width 240ms cubic-bezier(0.16,1,0.3,1); }
.auton-cfill.is-ontrack { background: var(--brand-iris); }
.auton-cfill.is-warn { background: var(--warning, #D97706); }
.auton-cfill.is-danger { background: var(--danger, #DC2626); }
.auton-topic-val { font-size: 13px; font-weight: 500; text-align: right; color: var(--text-primary); }
.auton-topic-legend { margin-top: 16px; }
.auton-topic-empty { font-size: 12.5px; color: var(--text-secondary); }

/* trust */
.auton-trust { display: flex; align-items: flex-start; gap: 12px; background: var(--bg-ai-draft, #F6F6FB); border-color: var(--brand-iris-edge); box-shadow: none; }
.auton-trust-icon { width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--brand-iris); background: var(--brand-iris-tint); border: 1px solid var(--brand-iris-edge); border-radius: var(--radius-md, 6px); }
.auton-trust-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.auton-trust-body { font-size: 13px; color: var(--text-secondary); line-height: 1.55; }
.auton-trust-body .auton-mono { color: var(--text-primary); font-weight: 500; }
.auton-trust-imp { font-size: 12px; color: var(--text-tertiary); line-height: 1.5; margin-top: 4px; }

/* early banner */
.auton-banner { display: flex; align-items: center; gap: 10px; background: var(--warning-tint, rgba(217,119,6,0.10)); border-left: 3px solid var(--warning, #D97706); border-radius: var(--radius-md, 6px); padding: 10px 14px; font-size: 12.5px; color: var(--warning, #D97706); }
.auton-banner-ico { display: inline-flex; line-height: 0; }
.auton-banner .auton-mono { font-weight: 500; }

/* empty / error */
.auton-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 64px 24px; }
.auton-empty-ico { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: 12px; }
.auton-empty-ico.is-danger { color: var(--danger, #DC2626); background: var(--danger-tint, rgba(220,38,38,0.10)); border: none; }
.auton-empty-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.auton-empty-body { font-size: 13px; color: var(--text-secondary); max-width: 360px; line-height: 1.55; }
.auton-empty-chip { font-size: 12px; color: var(--text-tertiary); background: var(--bg-elevated); border: 1px solid var(--border-subtle); padding: 4px 12px; border-radius: 9999px; }
.auton-reload { font-size: 13px; font-weight: 500; color: var(--brand-iris); background: var(--brand-iris-tint); border: 1px solid var(--brand-iris-edge); border-radius: var(--radius-md, 6px); padding: 9px 16px; min-height: 44px; cursor: pointer; transition: background 120ms cubic-bezier(0.16,1,0.3,1); }
.auton-reload:hover { background: rgba(91,91,214,0.14); }

/* loading skeleton */
.auton-skel { background: var(--bg-elevated); border-radius: var(--radius-lg, 8px); animation: auton-pulse 1.2s ease-in-out infinite; }
.auton-skel-hero { height: 80px; }
.auton-skel-bar { height: 16px; border-radius: 9999px; }
.auton-skel-kpi { height: 56px; }

/* header score chip (hub CTA slot) */
.auton-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 10px; border-radius: 9999px; background: var(--brand-iris-tint); border: 1px solid var(--brand-iris-edge); }
.auton-chip-num { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 500; color: var(--brand-iris); }
.auton-chip-lab { font-size: 11px; color: var(--text-tertiary); }
.auton-chip.is-warn { background: var(--warning-tint, rgba(217,119,6,0.10)); border-color: rgba(217,119,6,0.22); }
.auton-chip.is-warn .auton-chip-num { color: var(--warning, #D97706); }
.auton-chip.is-danger { background: var(--danger-tint, rgba(220,38,38,0.10)); border-color: rgba(220,38,38,0.22); }
.auton-chip.is-danger .auton-chip-num { color: var(--danger, #DC2626); }

/* responsive */
@media (max-width: 768px) {
  .auton-kpis { grid-template-columns: 1fr; gap: 8px; }
  .auton-topic-row { grid-template-columns: 88px 1fr 36px; gap: 8px; }
  .auton-hero { grid-template-columns: 1fr; }
  .auton-hero-right { align-items: flex-start; }
  .auton-spark { display: none; }
  .auton-score { font-size: 28px; }
  .auton-trust { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .auton-panel, .auton-seg, .auton-cfill, .auton-skel, .auton-reload { animation: none; transition: none; }
}

/* ===========================================================================
   AGENT ACTION CHECKLIST — Noa spec 2026-07-20 (extends CTX-ACTION).
   One row per BL action; iris fill = Kasia's hand, graphite = operator's.
   .is-error/.is-done remain one-release aliases of .is-failed/.is-settled.
   ======================================================================== */
.ctx-action-inner {
  padding: 12px;                      /* was 12px 14px — 14 is off-grid (§3) */
  display: flex; flex-direction: column; gap: 8px;
}
.ctx-action-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.ctx-action-head .ctx-action-label { margin: 0; }
.ctx-action-count {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 500; letter-spacing: 0.4px;
  color: var(--text-secondary); white-space: nowrap;
}
.ctx-action-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.ctx-action-item {
  display: grid; grid-template-columns: 14px 1fr; gap: 8px;
  align-items: start; min-height: 28px; padding: 2px 0;
  border-radius: var(--radius-sm);
  transition: color 200ms var(--ease-out), background-color 200ms var(--ease-out),
              opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.ctx-action-check {
  width: 14px; height: 14px; border-radius: 3px; margin-top: 2px;
  border: 1.5px solid var(--text-secondary); background: var(--bg-base);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; box-sizing: border-box;
  transition: background-color 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.ctx-action-check svg { opacity: 1; transform: scale(1); transition: opacity 150ms var(--ease-out) 40ms, transform 150ms var(--ease-out) 40ms; }
.ctx-action-item.is-done-auto .ctx-action-check {
  background: var(--brand-iris); border-color: var(--brand-iris);
}
.ctx-action-item.is-done-manual .ctx-action-check,
.ctx-action-item.is-done-operator .ctx-action-check {
  background: var(--text-primary); border-color: var(--text-primary);
}
.ctx-action-item.is-done-auto .ctx-action-item-label,
.ctx-action-item.is-done-manual .ctx-action-item-label,
.ctx-action-item.is-done-operator .ctx-action-item-label {
  color: var(--text-secondary);       /* settled, still 6.95:1 — NO strikethrough */
}
.ctx-action-item.is-failed .ctx-action-check {
  border-radius: 50%; border-color: var(--danger);
  background: transparent; color: var(--danger);
}
.ctx-action-item.is-inflight .ctx-action-check {
  border: 0; background: transparent; color: var(--brand-iris);
}
.ctx-action-item.is-inflight .ctx-action-check svg {
  animation: ctxActionSpin 900ms linear infinite;   /* justified exception §9 */
}
@keyframes ctxActionSpin { to { transform: rotate(360deg); } }
.ctx-action-item-label {
  font-size: 12.5px; font-weight: 450; line-height: 1.45;
  color: var(--text-primary); word-break: break-word;
}
.ctx-action-item-meta {
  font-size: 11px; font-weight: 450; line-height: 1.4;
  color: var(--text-secondary); font-variant-numeric: tabular-nums; margin-top: 1px;
}
.ctx-action-item-meta.is-danger { color: var(--danger); }
.ctx-action-meta-actor { white-space: nowrap; }
.ctx-action-meta-sep { color: var(--text-tertiary); }
.ctx-action-item-meta a,
.ctx-action-item-meta button {
  font-family: inherit; font-size: 11px; font-weight: 500; color: var(--brand-iris);
  text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: rgba(91,91,214,0.5);
  background: none; border: 0; padding: 0; cursor: pointer; position: relative;
}
.ctx-action-item-meta a::after,
.ctx-action-item-meta button::after {
  content: ''; position: absolute; inset: -12px -4px;   /* 44px effective §8.5 */
}
.ctx-action-item.is-planned { cursor: pointer; }
.ctx-action-item.is-planned:hover { background: var(--bg-base); }
.ctx-action.is-failed .ctx-action-item.is-planned:hover { background: var(--bg-elevated); }
.ctx-action-item.is-planned:hover .ctx-action-check { border-color: var(--brand-iris); }
.ctx-action-item.is-planned:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--brand-iris-ring);
}
.ctx-action-item.is-planned:active .ctx-action-check { background: var(--bg-pressed); }
.ctx-action-item.is-saving { pointer-events: none; opacity: 0.6; }
.ctx-action-item-err {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; color: var(--danger);
  background: var(--bg-base);          /* AA correction §5.5 — off the red wash */
  border: 1px solid rgba(220,38,38,0.18);
  border-radius: var(--radius-sm); padding: 6px 8px; margin-top: 4px;
  word-break: break-word;
}
.ctx-action-history-row { list-style: none; }
.ctx-action-history-btn {
  font-family: inherit; font-size: 11px; font-weight: 500;
  color: var(--text-secondary); background: none; border: 0; padding: 0;
  cursor: pointer; position: relative;
}
.ctx-action-history-btn:hover { color: var(--brand-iris); }
.ctx-action-history-btn::after { content: ''; position: absolute; inset: -8px 0; }
.ctx-action-item.is-entering { opacity: 0; transform: translateY(4px); }
/* Card-level states (§6) — failed > active > settled */
.ctx-action.is-settled .ctx-action-inner {
  background: var(--bg-base); border-left-color: var(--border-default);
}
.ctx-action.is-settled .ctx-action-label { color: var(--text-secondary); } /* §6 fallback over tertiary */
.ctx-action.is-failed .ctx-action-inner {
  background: var(--bg-base); border-left-color: var(--danger);
}
.ctx-action.is-failed .ctx-action-label { color: var(--danger); }
/* Foot hit-area extension (§8.5) */
.ctx-action-foot { position: relative; }
.ctx-action-foot::after { content: ''; position: absolute; inset: -8px 0; }
@media (prefers-reduced-motion: reduce) {
  .ctx-action-item, .ctx-action-check, .ctx-action-check svg { transition: none; }
  .ctx-action-item.is-entering { opacity: 1; transform: none; }
  .ctx-action-item.is-inflight .ctx-action-check svg { animation: none; display: none; }
  .ctx-action-item.is-inflight .ctx-action-check::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--brand-iris);
  }
}

/* Authorized (structured planned) — Kasia WILL run it: iris fill like done,
   but interactive (un-tick to veto). Rafał 2026-07-22. */
.ctx-action-item.is-authorized .ctx-action-check {
  background: var(--brand-iris); border-color: var(--brand-iris);
}
.ctx-action-item.is-authorized,
.ctx-action-item.is-vetoed { cursor: pointer; }
.ctx-action-item.is-authorized:hover .ctx-action-check,
.ctx-action-item.is-vetoed:hover .ctx-action-check { border-color: var(--brand-iris); }
.ctx-action-item.is-authorized:focus-visible,
.ctx-action-item.is-vetoed:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--brand-iris-ring);
}
/* Vetoed — Kasia will skip it: empty box, struck + dimmed label. */
.ctx-action-item.is-vetoed .ctx-action-check {
  background: var(--bg-base); border-color: var(--text-tertiary);
}
.ctx-action-item.is-vetoed .ctx-action-item-label {
  color: var(--text-tertiary); text-decoration: line-through;
}

/* ==========================================================================
   REVIEWS panel — Judge.me reviews + product questions (Noa spec 2026-08-04).
   Was an Agent Brain settings tab; is now its own workspace route with a
   master-detail shell: 320px queue + a fluid detail pane rendered as a
   two-message thread (the customer wrote, Kasia replies).

   Three token corrections, all scoped to .rvw-* so no other screen moves:
     meta text  --text-tertiary #A1A1AA (2.56:1)  ->  #71717A (4.83:1)
     card       --bg-elevated               ->  white + 1px border
     stars      #C99A2E (2.35:1, the module's only warm hue) -> graphite
   ========================================================================== */

/* ---- shell — a direct mirror of the shipped Settings pattern ------------ */
.workspace.is-reviews { grid-template-columns: 1fr; }
.workspace.is-reviews > .inbox,
.workspace.is-reviews > .thread,
.workspace.is-reviews > .context { display: none; }
.workspace.is-reviews > .reviews-shell { display: grid; }
.workspace:not(.is-reviews) > .reviews-shell { display: none; }

.reviews-shell {
  grid-template-columns: 320px 1fr;
  width: 100%; height: 100%;
  background: var(--bg-base);
  overflow: hidden;
}
.rvw-queue {
  display: flex; flex-direction: column;
  min-height: 0;                          /* lets .rvw-list scroll */
  border-right: 1px solid var(--border-subtle);
  background: var(--bg-base);
}
.rvw-detail {
  display: flex; flex-direction: column;
  min-height: 0;
  background: var(--bg-base);
}

/* ---- queue header ------------------------------------------------------ */
.rvw-queue-head {
  flex: 0 0 auto; padding: 10px 16px 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.rvw-queue-title-row { display: flex; align-items: center; gap: 4px; }
.rvw-queue-title {
  flex: 1; min-width: 0;
  font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.25px;
  color: var(--text-primary);
}
/* The big number lives HERE, not in the sidebar badge: context on arrival
   rather than a permanent four-digit alarm next to `12` and `8`. */
.rvw-backlog {
  margin-top: 2px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11.5px; font-weight: 500; line-height: 1.4;
  color: #71717A; font-variant-numeric: tabular-nums;
}
.rvw-backlog-mode { color: var(--brand-iris); }

/* Scope chips — the sidebar's active idiom, NOT a segmented control with an
   iris fill: the one fill on screen belongs to the detail pane. */
.rvw-scopes {
  flex: 0 0 auto; display: flex; align-items: center; gap: 4px;
  min-height: 44px; padding: 6px 12px;
  border-bottom: 1px solid var(--border-subtle);
  /* Three chips are a single 44px band inside 320px. The fourth (Questions)
     only exists when there are questions to filter, and then the row wraps
     rather than clipping a chip at the column edge. */
  flex-wrap: wrap;
}
.rvw-scope {
  flex: 0 0 auto; white-space: nowrap;
  font: inherit; font-size: 11.5px; font-weight: 500;
  padding: 6px 12px; border-radius: var(--radius-sm); border: 0;
  background: transparent; color: #71717A; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.rvw-scope:hover { background: rgba(10,10,10,0.04); color: var(--text-primary); }
.rvw-scope.is-active { background: var(--brand-iris-tint); color: var(--brand-iris); font-weight: 600; }
.rvw-scope:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-iris-ring); }
.rvw-scope-div { width: 1px; height: 18px; background: var(--border-subtle); margin: 0 8px; flex: 0 0 auto; }

/* Header overflow menu — Fetch from Judge.me / Import questions. Both are
   low-frequency, so neither earns permanent chrome. */
.rvw-pop {
  background: var(--bg-base); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); padding: 4px;
  box-shadow: 0 8px 24px rgba(10,10,10,0.12);
  display: flex; flex-direction: column;
}
.rvw-pop-item {
  font: inherit; font-size: 13px; font-weight: 500; text-align: left;
  padding: 8px 10px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-secondary); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.rvw-pop-item:hover { background: var(--bg-elevated); color: var(--text-primary); }
.rvw-pop-item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-iris-ring); }

/* Highest-frequency action in the panel, and it operates on the QUEUE — so it
   lives here, quiet, and never competes with the detail pane's single fill. */
.rvw-draft-next {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; height: 40px; border: 0;
  border-bottom: 1px solid var(--border-subtle);
  background: transparent; color: var(--brand-iris);
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.rvw-draft-next[hidden] { display: none; }
.rvw-draft-next:hover:not(:disabled) { background: var(--brand-iris-tint); }
.rvw-draft-next:disabled { color: #71717A; cursor: default; }
.rvw-draft-next:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--brand-iris-ring); }
.rvw-draft-next svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* ---- queue rows -------------------------------------------------------- */
/* The listbox is focusable so j/k work without moving DOM focus off it
   (selection is announced via aria-activedescendant). The UA's default focus
   ring would draw a black box around the whole column. */
.rvw-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; outline: none; }
.rvw-list:focus-visible { box-shadow: inset 0 0 0 2px var(--brand-iris-ring); }
.rvw-row {
  display: block; width: 100%; box-sizing: border-box;
  height: 64px; padding: 12px 16px;
  border: 0; background: transparent; text-align: left;
  font: inherit; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.rvw-row + .rvw-row { border-top: 1px solid var(--border-subtle); }
.rvw-row:hover { background: rgba(10,10,10,0.04); }
/* Prose never recolours to show selection — the tint and the bar carry it. */
.rvw-row.is-selected { background: var(--brand-iris-tint); box-shadow: inset 2px 0 0 var(--brand-iris); }
.rvw-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--brand-iris-ring); }
.rvw-row-top, .rvw-row-bot { display: flex; align-items: center; gap: 6px; }
.rvw-row-bot { margin-top: 4px; }
.rvw-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.rvw-dot-low  { background: var(--danger); }
.rvw-dot-draft { background: var(--brand-iris); margin-left: auto; }
.rvw-dot-fail  { background: var(--danger); margin-left: auto; }
.rvw-rating {
  display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.rvw-rating svg { width: 10px; height: 10px; }
/* Brandbook rule verbatim: a channel chip inside a list item is a mono tag in
   the meta row, never a coloured pill. */
.rvw-kind-tag {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11.5px; font-weight: 500; color: #71717A; flex: 0 0 auto;
}
.rvw-row-title {
  flex: 1 1 auto; min-width: 0;
  font-size: 14px; font-weight: 450; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rvw-row-title.is-unknown { color: #71717A; }
.rvw-list.is-muted .rvw-row-title { color: var(--text-secondary); }
.rvw-row-date {
  flex: 0 0 auto;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11.5px; font-weight: 500; color: #71717A;
  font-variant-numeric: tabular-nums;
}
.rvw-row-preview {
  flex: 1 1 auto; min-width: 0;
  font-size: 11.5px; font-weight: 500; color: #71717A;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rvw-row.is-leaving { opacity: 0.5; transition: opacity var(--dur-normal) var(--ease-out); }

/* Skeletons, never a spinner — and static, no shimmer. */
.rvw-skel-row { height: 64px; padding: 12px 16px; box-sizing: border-box; }
.rvw-skel-bar { height: 8px; border-radius: 4px; background: var(--bg-elevated); }
.rvw-skel-bar + .rvw-skel-bar { margin-top: 8px; }

/* ---- detail pane — a two-message thread -------------------------------- */
.rvw-detail-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 32px 32px 24px; }
.rvw-detail-inner { max-width: 72ch; }
.rvw-stars { display: inline-flex; gap: 2px; color: var(--text-primary); }
.rvw-stars svg { width: 10px; height: 10px; }
.rvw-stars .is-empty { color: var(--text-quaternary); }
.rvw-detail-title {
  margin: 8px 0 4px;
  font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.25px;
  color: var(--text-primary);
}
.rvw-detail-meta { font-size: 11.5px; font-weight: 500; line-height: 1.4; color: #71717A; }
.rvw-thread { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }

/* The customer's own words get a message bubble and PRIMARY text — the old
   treatment rendered them inside what looked like a disabled input. */
.rvw-body {
  margin: 0; padding: 12px 16px;
  background: var(--bg-elevated);
  border-radius: var(--radius-bubble); border-top-left-radius: 4px;
  font-size: 14px; font-weight: 450; line-height: 1.55; color: var(--text-primary);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.rvw-body-title { display: block; font-weight: 600; margin-bottom: 4px; }
.rvw-reply { margin-left: var(--space-8); }
/* The bubble IS the editor. */
.rvw-draft {
  display: block; width: 100%; box-sizing: border-box; resize: none;
  padding: 12px 16px;
  font: inherit; font-size: 14px; font-weight: 450; line-height: 1.55;
  color: var(--text-primary);
  background: var(--bg-ai-draft);
  border: 1px solid var(--brand-iris-edge);
  border-radius: var(--radius-bubble); border-bottom-right-radius: 4px;
}
.rvw-draft:focus { outline: none; border-color: var(--brand-iris); box-shadow: 0 0 0 3px var(--brand-iris-ring); }
.rvw-draft[readonly] { background: var(--bg-elevated); border-color: var(--border-subtle); }
.rvw-draft[readonly]:focus { box-shadow: none; border-color: var(--border-subtle); }
.rvw-reply.is-new { animation: rvw-draft-in 240ms var(--ease-out); }
@keyframes rvw-draft-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rvw-reply-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 6px;
  font-size: 11.5px; font-weight: 500; color: #71717A;
}
.rvw-count-over { color: var(--danger); }
/* Skeleton in the draft position while Kasia writes. */
.rvw-skel-draft { margin-left: var(--space-8); padding: 12px 16px; }
.rvw-skel-draft .rvw-skel-bar + .rvw-skel-bar { margin-top: 10px; }

/* ---- action bar — exactly one filled button in every state ------------- */
.rvw-bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  height: 64px; padding: 0 32px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-base);
}
.rvw-bar-spacer { flex: 1; }
.rvw-bar .btn-primary, .rvw-bar .btn-graphite { font-size: 13px; }
.rvw-btn-quiet {
  position: relative;
  font: inherit; font-size: 13px; font-weight: 500;
  padding: 8px 12px; border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--text-secondary); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.rvw-btn-quiet::after { content: ""; position: absolute; inset: -8px 0; }
.rvw-btn-quiet:hover { background: var(--bg-elevated); color: var(--text-primary); }
.rvw-btn-quiet:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-iris-ring); }
.rvw-btn-quiet:disabled { opacity: 0.45; cursor: not-allowed; }
.rvw-btn-quiet:disabled:hover { background: transparent; color: var(--text-secondary); }
.rvw-btn-quiet.is-ai { color: var(--brand-iris); }
.rvw-btn-quiet.is-ai:hover { background: var(--brand-iris-tint); color: var(--brand-iris); }
/* The one instructional line in the panel. */
.rvw-kbd-hint {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  padding: 0 32px 12px;
  font-size: 11.5px; font-weight: 500; color: #71717A;
}

/* ---- badges, errors, empties ------------------------------------------ */
.rvw-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; }
.rvw-badge-fail { background: #FDECEC; color: #A32D2D; }
.rvw-badge-ok { background: var(--brand-iris-tint); color: var(--brand-iris); }
/* Attached to the item it belongs to, never a toast. */
.rvw-err {
  padding: 8px 12px; border-radius: var(--radius-md);
  background: #FDECEC; border: 1px solid var(--danger);
  font-size: 11.5px; font-weight: 500; color: #A32D2D;   /* 6.19:1 — computed */
}
.rvw-queue .rvw-err { margin: 12px 16px; }
.rvw-err-row { display: flex; align-items: center; gap: 8px; }
.rvw-err-row .rvw-btn-quiet { margin-left: auto; padding: 4px 8px; }
.rvw-empty { padding: 48px 32px; text-align: center; color: #71717A; font-size: 13px; }
.rvw-empty-title { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.rvw-empty-sub { font-size: 13px; color: #71717A; }
.rvw-empty .rvw-btn-quiet { margin-top: 12px; }
.rvw-detail-empty { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }
.rvw-dim { color: #71717A; font-size: 11.5px; font-weight: 500; }

/* ---- questions import dialog ------------------------------------------ */
.rvw-modal {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 10, 10, 0.40); padding: 24px;   /* was a WARM black */
}
.rvw-modal-card {
  background: var(--bg-base); border-radius: var(--radius-lg); padding: 20px 22px;
  width: min(620px, 100%); display: flex; flex-direction: column; gap: 12px;
  border: 1px solid var(--border-default);
}
.rvw-modal .rvw-draft { resize: vertical; }
.rvw-card-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rvw-spacer { flex: 1; }

/* ---- responsive: one column at a time below 768px --------------------- */
@media (max-width: 768px) {
  .reviews-shell { grid-template-columns: 1fr; }
  .rvw-queue  { grid-column: 1; border-right: 0; }
  .rvw-detail { grid-column: 1; }
  .reviews-shell:not(.is-detail) .rvw-detail { display: none; }
  .reviews-shell.is-detail      .rvw-queue  { display: none; }
  .reviews-shell.is-detail .rvw-detail { animation: rvw-detail-in 240ms var(--ease-out); }
  .rvw-detail-scroll { padding: 16px 16px 24px; }
  .rvw-detail-inner { max-width: 100%; }
  .rvw-reply { margin-left: 16px; }
  .rvw-bar { padding: 0 16px; }
  .rvw-kbd-hint { display: none; }
}
@keyframes rvw-detail-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .rvw-reply.is-new, .reviews-shell.is-detail .rvw-detail { animation-duration: 1ms; }
  .rvw-row.is-leaving { transition-duration: 1ms; }
}


/* ===========================================================================
   BULK SEND - Noa spec 2026-07-26. Paste order numbers, review, send one
   personalised email per customer. Four inherited AA failures are corrected
   SCOPED to .bulk-* so no other screen changes in this ticket.
   ======================================================================== */
.inbox-head-actions { display: flex; align-items: center; gap: 4px; }
.bulk-trigger { color: var(--text-secondary); position: relative; }
.bulk-trigger:hover  { background: var(--bg-elevated); color: var(--text-primary); }
.bulk-trigger:active { background: var(--bg-pressed); }
.bulk-trigger:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--brand-iris-ring); }
.bulk-trigger::after { content: ""; position: absolute; inset: -8px; }  /* 44px hit area */

.bulk-modal { width: min(880px, calc(100vw - 32px)); height: min(680px, calc(100vh - 64px)); }
/* Shipped subtitle is --text-tertiary = 2.56:1 (computed, fails AA); here it
   carries the step indicator, which is meaning-bearing. */
.bulk-modal .kasia-modal-subtitle { color: var(--text-secondary); }
.bulk-body { position: relative; overflow: hidden; gap: 12px; display: flex; flex-direction: column; }
.bulk-foot { justify-content: space-between; }
.bulk-foot-left, .bulk-foot-right { display: flex; align-items: center; gap: 8px; }

/* --- step 1 --- */
.bulk-step1 { display: grid; grid-template-columns: 1fr 280px; gap: 24px; flex: 1; min-height: 0; }
.bulk-col { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.bulk-numbers {
  flex: 1; min-height: 240px; resize: none;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px; line-height: 1.6; font-feature-settings: 'tnum';
}
.bulk-numbers:focus { box-shadow: 0 0 0 3px var(--brand-iris-ring); }
.bulk-count-hint {
  min-height: 16px;                      /* reserved: no layout shift when it appears */
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  color: var(--text-secondary); font-feature-settings: 'tnum';
}
.bulk-count-hint.is-over { color: var(--danger); }
.bulk-purposes { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.bulk-purpose {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; min-height: 56px; padding: 10px 12px; text-align: left; cursor: pointer;
  background: var(--bg-base); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: background 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.bulk-purpose-title { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.bulk-purpose-sub {
  font-size: 11.5px; font-weight: 450; line-height: 1.4; color: var(--text-secondary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bulk-purpose:hover { background: var(--bg-elevated); border-color: var(--border-default); }
.bulk-purpose:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--brand-iris-ring); }
.bulk-purpose.is-active { background: var(--brand-iris-tint); border-color: var(--brand-iris-edge); }
.bulk-purpose.is-active .bulk-purpose-title { color: var(--brand-iris); }
.bulk-purpose-flag {
  margin-top: 4px; font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; color: var(--danger);
}

/* --- step 2 --- */
.bulk-summary { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.bulk-summary:focus { outline: none; }
.bulk-stat { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-secondary); }
.bulk-stat-num { font-family: 'JetBrains Mono', monospace; font-feature-settings: 'tnum';
                 font-size: 12.5px; font-weight: 500; color: var(--text-primary); }
.bulk-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.bulk-dot.is-ready { background: var(--brand-iris); }
.bulk-dot.is-skipped { background: var(--text-secondary); }
.bulk-dot.is-unresolved { background: transparent; width: 8px; height: 8px;
                          border: 1.5px solid var(--text-secondary); }
.bulk-summary-tpl { margin-left: auto; font-size: 11.5px; color: var(--text-secondary); }

.bulk-table-scroll {
  flex: 1; min-height: 0; overflow: auto;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--bg-base);
}
.bulk-table-scroll.is-sending { pointer-events: none; }   /* frozen, NOT dimmed */
.bulk-table { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0;
              font-size: 12.5px; color: var(--text-primary); }
.bulk-th {
  position: sticky; top: 0; z-index: 2; height: 40px; padding: 0 12px;
  text-align: left; vertical-align: middle;
  background: var(--bg-elevated); border-bottom: 1px solid var(--border-default);
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  /* .pk-grid-th-label uses --text-tertiary = 2.33:1 on elevated (fails AA). */
  color: var(--text-secondary);
}
.bulk-th.is-select, .bulk-th.is-view { padding: 0; text-align: center; width: 44px; }
.bulk-row { height: 44px; }
.bulk-cell {
  background: var(--bg-base); border-bottom: 1px solid var(--border-subtle);
  padding: 0 12px; vertical-align: middle;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px;
}
.bulk-row:last-child .bulk-cell { border-bottom: 0; }
.bulk-cell.is-mono { font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
                     font-feature-settings: 'tnum'; }
.bulk-cell.is-center { padding: 0; text-align: center; }
.bulk-row.is-ready { cursor: pointer; }
.bulk-row.is-ready:hover .bulk-cell { background: var(--bg-elevated); }
/* Recession by row tint, never opacity - opacity would drag text under AA. */
.bulk-row.is-skipped .bulk-cell,
.bulk-row.is-unresolved .bulk-cell { background: #FAFAFA; color: var(--text-secondary); }
.bulk-status { display: inline-flex; align-items: center; gap: 6px; }
/* .rule-select-checkbox boundary is --border-default = 1.25:1, below the 3:1
   WCAG 1.4.11 minimum for a control boundary. Scoped fix; app-wide is a
   separate ticket. */
.bulk-check { border-color: var(--text-secondary); }
.bulk-view { width: 24px; height: 24px; position: relative; color: var(--text-secondary); }
.bulk-view:hover { color: var(--brand-iris); background: var(--brand-iris-tint); }
.bulk-view:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--brand-iris-ring); }
.bulk-view::after { content: ""; position: absolute; inset: -10px; }

/* --- arm / in-flight / result --- */
.bulk-confirm { display: flex; align-items: center; gap: 12px; width: 100%;
                animation: bulkFade 180ms var(--ease-out); }
.bulk-confirm-text { flex: 1; font-size: 12.5px; color: var(--text-primary); }
.bulk-confirm-mark { color: var(--danger); display: inline-flex; flex: none; }
.bulk-sending { display: flex; align-items: center; gap: 10px; width: 100%;
                font-size: 12.5px; color: var(--text-primary); }
.bulk-sending .btn-spinner { color: var(--brand-iris); }
.bulk-result { display: flex; flex-direction: column; align-items: center; justify-content: center;
               gap: 12px; text-align: center; flex: 1; min-height: 0;
               animation: bulkFade 180ms var(--ease-out); }
.bulk-result-mark { width: 32px; height: 32px; border-radius: var(--radius-md);
                    display: grid; place-items: center; }
/* Brandbook success language = graphite fill (19.80:1). --success computes
   3.30:1 on white, unsafe for a meaning-bearing mark. */
.bulk-result-mark.is-ok { background: var(--text-primary); color: #FFFFFF; }
.bulk-result-mark.is-part { background: var(--bg-base); color: var(--danger);
                            border: 1px solid var(--danger); }
.bulk-result-title { font-size: 18px; font-weight: 600; letter-spacing: -0.25px;
                     color: var(--text-primary); }
.bulk-result-sub { font-size: 13px; line-height: 1.55; color: var(--text-secondary); max-width: 420px; }
.bulk-fail-list { width: 100%; max-width: 560px; max-height: 200px; overflow-y: auto;
                  margin-top: 8px; text-align: left; display: flex; flex-direction: column; gap: 4px; }
.bulk-fail-row { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--danger);
                 background: var(--bg-base); border: 1px solid rgba(220,38,38,0.18);
                 border-left: 3px solid var(--danger); border-radius: var(--radius-sm);
                 padding: 6px 10px; word-break: break-word; }

/* --- full-body preview overlay (inside the modal, never a stacked dialog) --- */
.bulk-preview {
  position: absolute; inset: 0;
  /* MUST outrank the sticky table header (.bulk-th, z-index 2) — at z-index 1
     the header painted straight through the overlay. */
  z-index: 10;
  background: var(--bg-base);
  /* inset:0 resolves against the body's PADDING box, so the overlay needs its
     own padding or the text sits flush against the modal edge. */
  padding: 4px 2px 0;
  display: flex; flex-direction: column; gap: 12px;
  animation: bulkRise 180ms var(--ease-out); }
.bulk-preview-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
                     padding-bottom: 12px; border-bottom: 1px solid var(--border-subtle); }
.bulk-preview-who { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.bulk-preview-meta { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-secondary); }
.bulk-preview-body { flex: 1; min-height: 0; overflow-y: auto; }
.bulk-preview-k { font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
                  letter-spacing: 0.04em; text-transform: uppercase;
                  color: var(--text-secondary); margin-bottom: 4px; }
.bulk-preview-subj { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 16px; }
.bulk-preview-text { font-size: 13px; font-weight: 450; line-height: 1.65;
                     color: var(--text-primary); white-space: pre-wrap; max-width: 62ch; }
.bulk-preview-note { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-subtle);
                     font-size: 11.5px; color: var(--text-secondary); }

/* --- notices / errors --- */
.bulk-notice { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px;
               background: var(--bg-elevated); border: 1px solid var(--border-subtle);
               border-radius: var(--radius-md); }
.bulk-notice-title { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.bulk-notice-body { font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
/* .kasia-modal-error puts danger text on a red wash = 4.41:1 (fails AA).
   On bg-base danger computes 4.83:1 - brandbook C11 "no red flood". */
.bulk-error { font-size: 12.5px; line-height: 1.5; color: var(--text-primary);
              background: var(--bg-base); border: 1px solid rgba(220,38,38,0.18);
              border-left: 3px solid var(--danger); border-radius: var(--radius-md);
              padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.bulk-error-title { font-weight: 600; color: var(--danger); }
.bulk-error-detail { font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
                     color: var(--danger); word-break: break-word; }

@keyframes bulkFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bulkRise { from { opacity: 0; transform: translateY(6px); }
                      to   { opacity: 1; transform: translateY(0); } }

@media (max-width: 768px) {
  .bulk-step1 { grid-template-columns: 1fr; }
  .bulk-numbers { min-height: 160px; }
  .bulk-purposes { max-height: 200px; }
  .bulk-preview-text { max-width: none; }
  .bulk-foot .btn-ghost, .bulk-foot .btn-primary { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .bulk-modal, .bulk-modal * { animation-duration: 1ms !important; transition-duration: 1ms !important; }
  .bulk-modal .btn-spinner { animation: none; }
}

/* ==========================================================================
   SHOP SECTION (Noa spec 2026-07-27) — everything the shop tells Greeter
   about ITSELF: company facts, policies, delivery prices, email templates,
   source documents.

   Three type sizes only: 16px heading / 12.5px body / 11.5px meta. A fourth
   size in here is a bug. One iris action per view, and it is always Save.
   Attention colour is #B45309 (--warning computes 2.90:1 on a hovered tab,
   below the 3:1 non-text minimum). Blocked/destructive is #B91C1C.
   ========================================================================== */

/* ---------- Nav badge (the component existed in CSS with no live markup) -- */
.settings-nav-badge.is-todo { background: #F7EDE2; color: #B45309; }

/* ---------- Save bar: explicit save, visible dirty state ---------------- */
.shop-savebar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  min-height: 56px; padding: 8px var(--space-4);
  margin-top: var(--space-4);
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: 0 -2px 8px rgba(10,10,10,0.05);
  animation: shopSaveBarIn var(--dur-normal) var(--ease-out);
}
@keyframes shopSaveBarIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Iris, not amber: unsaved is a state, not a problem. Amber here would teach
   the operator that editing is an error. */
.shop-savebar-status { display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 500; color: var(--text-primary); }
.shop-savebar-dot { width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-iris); flex: none; }
.shop-savebar-actions { display: flex; align-items: center; gap: var(--space-2); }

/* ---------- Quiet button (12.5px — the shipped ones are 13px) ----------- */
.shop-btn-quiet {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12.5px; font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 8px 16px;
  cursor: pointer;
  position: relative;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
/* 36px visual + 4px inset per side = the 44px hit area. Hit-area insets are
   invisible and are exempt from the 4px spacing rhythm. */
.shop-btn-quiet::after { content: ""; position: absolute; inset: -4px 0; }
.shop-btn-quiet:hover   { background: var(--bg-elevated); color: var(--text-primary); }
.shop-btn-quiet:active  { background: var(--bg-pressed); }
.shop-btn-quiet:focus-visible { outline: 0; box-shadow: var(--elev-focus, 0 0 0 3px var(--brand-iris-ring)); }
.shop-btn-quiet:disabled { opacity: 0.5; cursor: not-allowed; }
.shop-btn-quiet.is-borderless { border-color: transparent; }

/* ---------- Loading / error --------------------------------------------- */
.shop-skel { display: flex; flex-direction: column; gap: 8px; margin-top: var(--space-4); }
.shop-skel-row { height: 48px; border-radius: var(--radius-md); background: var(--bg-elevated); }
.shop-skel-row:nth-child(1) { opacity: 1; }
.shop-skel-row:nth-child(2) { opacity: 0.7; }
.shop-skel-row:nth-child(3) { opacity: 0.4; }

.shop-error {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  font-size: 12.5px; line-height: 1.5;
  color: #B91C1C;
  background: #FCE9E9;
  border: 1px solid rgba(220,38,38,0.18);
  border-radius: var(--radius-md);
  padding: 12px var(--space-4);
  margin-bottom: var(--space-4);
  animation: shopStripIn var(--dur-normal) var(--ease-out);
}
@keyframes shopStripIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Form chrome -------------------------------------------------- */
.shop-form { max-width: 680px; }
.shop-group-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-secondary);
  margin: var(--space-6) 0 var(--space-3);
}
.shop-group-label:first-child { margin-top: 0; }
.shop-field-labelrow { display: flex; align-items: baseline; justify-content: space-between; max-width: 420px; }
/* Not an asterisk (meaningless to a non-technical operator), not iris (iris is
   the action colour), not --danger (empty is not an error until Save). */
.shop-field-req {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.04em;
  color: #B45309;
  margin-left: var(--space-2);
}
/* Hold the 3-size lock (the shipped input is 13px) and lift help text off
   --text-tertiary, which computes 2.56:1 on white. */
.shop-hub .settings-field-input { font-size: 12.5px; }
.shop-hub .settings-field-meta  { font-size: 11.5px; color: var(--text-secondary); }
.shop-hub .op-ctx-textarea { font-size: 12.5px; line-height: 1.6; }
.shop-hub .settings-field-input:focus,
.shop-hub .op-ctx-textarea:focus { box-shadow: var(--elev-focus, 0 0 0 3px var(--brand-iris-ring)); }
.shop-hub .settings-field-input.is-invalid,
.shop-hub .op-ctx-textarea.is-invalid {
  border-color: #B91C1C;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.20);
}

.shop-disclosure {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 500; color: var(--text-secondary);
  background: transparent; border: 0; cursor: pointer; padding: 10px 0;
}
.shop-disclosure:hover { color: var(--text-primary); }
.shop-disclosure:focus-visible { outline: 0; box-shadow: var(--elev-focus, 0 0 0 3px var(--brand-iris-ring)); border-radius: var(--radius-sm); }
.shop-disclosure-chev { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-out); }
.shop-disclosure.is-open .shop-disclosure-chev { transform: rotate(90deg); }

/* One-time intro strip. The only place iris is a SURFACE rather than an
   action, and it is a tint, so it does not compete with Save. */
.shop-firstrun {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4);
  background: var(--brand-iris-tint);
  border: 1px solid var(--brand-iris-edge);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
  max-width: 680px;
}
.shop-firstrun-icon { width: 20px; height: 20px; color: var(--brand-iris); flex: none; }
.shop-firstrun-title { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.shop-firstrun-body  { font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }

.shop-empty-payoff {
  margin-top: var(--space-4);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; line-height: 1.6;
  color: var(--text-secondary);
}
.shop-empty-payoff b { font-weight: 500; color: var(--text-primary); }

/* ---------- Delivery table ---------------------------------------------- */
.dc-scroll {
  position: relative; width: 100%;
  overflow: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-base);
}
.dc-table { border-collapse: separate; border-spacing: 0; width: 100%;
            table-layout: fixed; min-width: 972px; font-size: 12.5px; color: var(--text-primary); }
.dc-table th, .dc-table td { border-bottom: 1px solid var(--border-subtle); }
.dc-table thead th {
  position: sticky; top: 0; z-index: 2;
  height: 44px; padding: 0 12px; text-align: left;
  background: var(--bg-elevated);
}
.dc-th-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-secondary);
}
.dc-row { height: 48px; }
.dc-row:hover { background: var(--bg-elevated); }
.dc-cell { padding: 0 12px; height: 48px; vertical-align: middle; }
.dc-cell.is-center { text-align: center; }
.dc-cell.is-right  { text-align: right; }
.dc-cell.is-mono   { font-family: 'JetBrains Mono', monospace; font-feature-settings: 'tnum'; }
/* A real <button> inside every editable cell: the Products grid's cells are
   click-only and therefore unreachable by keyboard (WCAG 2.1.1). */
.dc-cell-btn {
  display: block; width: 100%; height: 100%;
  padding: 0; margin: 0; border: 0; background: transparent;
  font: inherit; color: inherit; text-align: inherit;
  cursor: text; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dc-cell-btn:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--brand-iris-ring); border-radius: var(--radius-sm); }
.dc-cell.is-editing { padding: 0; box-shadow: inset 0 0 0 1px var(--brand-iris); background: var(--bg-base); }
.dc-cell.is-error { box-shadow: inset 0 0 0 1px #B91C1C; }
.dc-edit-input { width: 100%; height: 48px; box-sizing: border-box;
                 border: 0; outline: 0; background: transparent; padding: 0 12px;
                 font: inherit; font-size: 12.5px; color: var(--text-primary); }
.dc-edit-input.is-mono  { font-family: 'JetBrains Mono', monospace; font-feature-settings: 'tnum'; }
.dc-edit-input.is-right { text-align: right; }
.dc-price-wrap { display: inline-flex; align-items: center; width: 100%; }
.dc-price-suffix { font-family: 'JetBrains Mono', monospace; color: var(--text-secondary); padding-right: 12px; }

/* The key IS the placeholder. Not iris: this is a value, not an action. */
.dc-chip {
  display: inline-flex; align-items: center;
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  color: var(--text-secondary); background: var(--bg-elevated);
  border: 0; cursor: pointer;
  padding: 4px 8px; border-radius: var(--radius-sm);
}
.dc-chip:hover { color: var(--text-primary); }
.dc-chip:focus-visible { outline: 0; box-shadow: var(--elev-focus, 0 0 0 3px var(--brand-iris-ring)); }
.dc-key-edit { display: flex; align-items: center; padding: 0 8px;
               font-family: 'JetBrains Mono', monospace; font-size: 11.5px; }
.dc-key-affix { color: var(--text-secondary); user-select: none; }
.dc-key-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
                font: inherit; color: var(--text-primary); padding: 0 4px; }
.dc-copy { position: relative; margin-left: 6px; color: var(--text-secondary); }
.dc-copy::after { content: ""; position: absolute; inset: -8px; }

/* Backstop: an icon in this section can never decide a row's height. Every
   SVG here is emitted with explicit pixel dimensions, and this caps anything
   that slips through — a percentage-sized SVG in an unstyled button is what
   turned a 48px row into a 250px one. */
.shop-hub svg { flex: none; max-width: 100%; }
.shop-hub .dc-table svg,
.shop-hub .icon-btn svg { width: 14px; height: 14px; }

.dc-grip { display: inline-flex; align-items: center; justify-content: center;
           width: 28px; height: 28px; padding: 0; border: 0; background: transparent;
           color: var(--text-tertiary); cursor: grab; border-radius: var(--radius-sm); }
.dc-row:hover .dc-grip { color: var(--text-secondary); }
.dc-grip:active { cursor: grabbing; }
.dc-grip:focus-visible { outline: 0; box-shadow: var(--elev-focus, 0 0 0 3px var(--brand-iris-ring)); }
/* A 2px insertion rule, not a moving ghost row. */
.dc-row.is-drop-target { box-shadow: inset 0 2px 0 var(--brand-iris); }
.dc-row.is-moved { animation: dcMoved 240ms var(--ease-out); }
@keyframes dcMoved { from { background: var(--brand-iris-tint); } to { background: transparent; } }
.dc-toggle-wrap { position: relative; display: inline-flex; }
.dc-toggle-wrap::after { content: ""; position: absolute; inset: -12px -6px; }

.dc-row-error td {
  font-size: 12.5px; line-height: 1.5;
  color: #B91C1C; background: #FCE9E9;
  padding: 10px 12px;
  animation: shopStripIn 180ms var(--ease-out);
}
.dc-row-caution td {
  font-size: 12.5px; line-height: 1.5;
  color: #92400E; background: #F7EDE2;
  padding: 10px 12px;
}
.dc-caution-inner { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }

/* ---------- Templates: master / detail ---------------------------------- */
.tpl-shell { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-6); align-items: start; }
.tpl-list  { display: flex; flex-direction: column; gap: 8px; }
.tpl-editor { display: flex; flex-direction: column; gap: var(--space-4); max-width: 680px; }
/* .is-selected, not .is-active: in this tab "active" already means published,
   and one class carrying two meanings is how bugs get written. */
.tpl-item.is-selected { background: var(--brand-iris-tint); border-color: var(--brand-iris-edge); }
.tpl-item.is-selected .bulk-purpose-title { color: var(--brand-iris); }
/* Inactive items carry a WORD, not opacity — dimming drags the title below AA. */
.tpl-item-off { margin-top: 4px; font-family: 'JetBrains Mono', monospace;
                font-size: 11.5px; color: var(--text-secondary); }
.tpl-key { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-secondary); }

.tpl-ph-bar   { display: flex; flex-direction: column; gap: 8px; }
.tpl-ph-group { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.tpl-ph-label { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 500;
                letter-spacing: 0.04em; text-transform: uppercase;
                color: var(--text-secondary); min-width: 56px; }
.tpl-ph-chip {
  position: relative;
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 12px; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.tpl-ph-chip:hover  { background: var(--bg-pressed); color: var(--text-primary); }
.tpl-ph-chip:focus-visible { outline: 0; box-shadow: var(--elev-focus, 0 0 0 3px var(--brand-iris-ring)); }
.tpl-ph-chip::after { content: ""; position: absolute; inset: -4px -2px; }

/* Attached to the thing that is wrong, not floating at the top of the tab. */
.tpl-block {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px var(--space-4);
  background: #FCE9E9;
  border: 1px solid rgba(220,38,38,0.18);
  border-radius: var(--radius-md);
  animation: shopStripIn var(--dur-normal) var(--ease-out);
}
.tpl-block-title { display: inline-flex; align-items: center; gap: 8px;
                   font-size: 12.5px; font-weight: 600; color: #B91C1C; }
.tpl-block-body  { font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.tpl-block-foot  { display: flex; align-items: center; gap: var(--space-3); }
.tpl-block-count { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: #B91C1C; }
/* Amber, not red: the send still works, the output is just wrong. Reserving
   red for the actual block keeps the block meaningful. */
.tpl-lint {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  font-size: 12.5px; line-height: 1.5;
  color: #92400E; background: #F7EDE2;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}

/* ---------- Documents ---------------------------------------------------- */
.doc-list { display: flex; flex-direction: column; gap: 8px; margin-top: var(--space-4); }
.doc-card { display: flex; align-items: flex-start; gap: 12px;
            background: var(--bg-base); border: 1px solid var(--border-subtle);
            border-radius: var(--radius-lg); padding: 12px var(--space-4); }
.doc-icon { flex: none; width: 32px; height: 32px; border-radius: var(--radius-md);
            background: var(--bg-elevated); color: var(--text-secondary);
            display: grid; place-items: center; }
.doc-icon.is-on { background: var(--brand-iris-tint); border: 1px solid var(--brand-iris-edge);
                  color: var(--brand-iris); }
.doc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.doc-name { font-size: 12.5px; font-weight: 600; color: var(--text-primary);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-meta { font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
            color: var(--text-secondary); }
.doc-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: 4px; }
.doc-upload-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.doc-upload-hint { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-secondary); }
/* The one genuinely new pattern in this section. Strictly additive: every
   capability is reachable from the button. */
.doc-drop { border: 1px dashed var(--border-strong); border-radius: var(--radius-lg);
            padding: var(--space-6); text-align: center;
            transition: border-color var(--dur-fast) var(--ease-out),
                        background var(--dur-fast) var(--ease-out); }
.doc-drop.is-over { border-color: var(--brand-iris); background: var(--brand-iris-tint); }
.doc-status-reading { color: var(--text-secondary); background: var(--bg-elevated); }
.doc-status-failed  { color: #B91C1C; background: #FCE9E9; }

/* The proposal panel's state tag is the safety mechanism, and it is the most
   important element on it. */
.prop-panel { margin-top: var(--space-4); border: 1px solid var(--border-subtle);
              border-radius: var(--radius-lg); padding: var(--space-4);
              background: var(--bg-base); }
.prop-head { display: flex; align-items: center; justify-content: space-between;
             gap: var(--space-4); margin-bottom: var(--space-3); }
.prop-title { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.prop-count { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-secondary); }
.prop-card { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--border-subtle);
             border-radius: var(--radius-md); margin-bottom: 8px; }
.prop-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.prop-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.prop-name { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.prop-body { font-size: 12.5px; line-height: 1.5; color: var(--text-primary); white-space: pre-wrap; }
.prop-quote { font-size: 11.5px; line-height: 1.5; color: var(--text-secondary); }
.prop-current { font-size: 12.5px; line-height: 1.5; color: var(--text-secondary);
                background: var(--bg-elevated); border-radius: var(--radius-sm);
                padding: 8px 12px; white-space: pre-wrap; }
.prop-tag { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 500;
            letter-spacing: 0.04em; padding: 4px 8px; border-radius: var(--radius-sm); }
.prop-tag.is-new     { color: var(--text-secondary); background: var(--bg-elevated); }
.prop-tag.is-replace { color: #92400E; background: #F7EDE2; }
.prop-done { display: flex; align-items: center; justify-content: space-between;
             gap: var(--space-3); font-size: 12.5px; color: var(--text-secondary); padding: 8px 0; }
.prop-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.prop-foot { display: flex; align-items: center; justify-content: space-between;
             gap: var(--space-3); margin-top: var(--space-3); }

@media (max-width: 900px) {
  .tpl-shell { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .shop-savebar, .shop-error, .tpl-block, .dc-row.is-moved, .dc-row-error td {
    animation-duration: 1ms !important;
  }
  .shop-disclosure-chev { transition-duration: 1ms !important; }
}

/* ==========================================================================
   Operator hint for Kasia (Rafal 2026-08-18) — the "Hint" tab in the AI
   draft bar + its popover. Green = locked in: the brandbook keeps status
   hues out of chrome, but this state IS a status ("Kasia will receive
   this"), rendered with the shipped --status-resolved token.
   ========================================================================== */
.composer-hint-btn.is-set {
  color: var(--status-resolved);
  border-color: var(--status-resolved);
  background: rgba(22, 163, 74, 0.08);
}
.composer-hint-btn.is-set:hover { background: rgba(22, 163, 74, 0.14); }

.hint-popover {
  position: fixed; z-index: 80; width: 340px;
  background: var(--bg-base);
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(10, 10, 10, 0.16);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.hint-popover-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.hint-popover-sub { font-size: 11.5px; line-height: 1.45; color: var(--text-secondary); }
.hint-popover-input {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 72px;
  font: inherit; font-size: 12.5px; line-height: 1.5; color: var(--text-primary);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: 8px 10px; background: var(--bg-base);
}
.hint-popover-input:focus {
  outline: none; border-color: var(--brand-iris);
  box-shadow: 0 0 0 3px var(--brand-iris-ring);
}
.hint-popover-err { font-size: 11.5px; color: var(--danger); }
.hint-popover-actions { display: flex; align-items: center; gap: 8px; }
.hint-popover-spacer { flex: 1; }
.hint-popover-save,
.hint-popover-regen { font-size: 12.5px; padding: 7px 14px; }