/* cc.css
 * Extracted from public/styles.css (Phase 0.3).
 * v1.0.42: loaded eagerly from index.html (was lazy-loaded — caused FOUC).
 */

:root {
  --cc-source-email:    #2693D1;
  --cc-source-teams:    #6264A7;
  --cc-source-calendar: #2E7D4F;
  --cc-source-tasks:    #E07A00;
  --cc-source-financial: #C0392B;
  --cc-source-system:   #C0392B;
  --cc-source-approval: #E67E22;
  --cc-source-health:   #C0392B;
  --cc-source-briefing: #2E7D4F;
  --cc-source-ga4:      #4285F4;

  /* Card chrome. Kept as tokens rather than literal rgba() so the whole set
     flips for the light theme below instead of painting white films on white. */
  --cc-hairline:        rgba(255, 255, 255, 0.07);
  --cc-panel-bg:        rgba(255, 255, 255, 0.045);
  --cc-panel-border:    rgba(255, 255, 255, 0.06);
  --cc-panel-text:      #C7C7CE;
  --cc-btn-bg:          rgba(255, 255, 255, 0.05);
  --cc-btn-bg-active:   rgba(255, 255, 255, 0.11);
  --cc-btn-border:      rgba(255, 255, 255, 0.12);
  --cc-chip-bg:         rgba(255, 255, 255, 0.04);
  --cc-chip-border:     rgba(255, 255, 255, 0.11);
  --cc-priority-border: rgba(239, 68, 68, 0.34);

  --cc-flag-danger:     #f43f5e;
  --cc-flag-warning:    #f97316;
  --cc-flag-caution:    #eab308;

  --cc-status-review:   #2ecc71;
  --cc-status-working:  var(--accent);
  --cc-status-commit:   #eab308;
}

/* Light theme: the card-chrome films invert to black-on-white. Mirrors the
   explicit / system split that styles.css uses for the M3 palette. */
html[data-theme="light"] {
  --cc-hairline:        rgba(0, 0, 0, 0.10);
  --cc-panel-bg:        rgba(0, 0, 0, 0.035);
  --cc-panel-border:    rgba(0, 0, 0, 0.07);
  --cc-panel-text:      #3F3F46;
  --cc-btn-bg:          rgba(0, 0, 0, 0.035);
  --cc-btn-bg-active:   rgba(0, 0, 0, 0.10);
  --cc-btn-border:      rgba(0, 0, 0, 0.14);
  --cc-chip-bg:         rgba(0, 0, 0, 0.03);
  --cc-chip-border:     rgba(0, 0, 0, 0.13);
  --cc-priority-border: rgba(185, 28, 28, 0.38);
}

@media (prefers-color-scheme: light) {
  html[data-theme="system"],
  html:not([data-theme]) {
    --cc-hairline:        rgba(0, 0, 0, 0.10);
    --cc-panel-bg:        rgba(0, 0, 0, 0.035);
    --cc-panel-border:    rgba(0, 0, 0, 0.07);
    --cc-panel-text:      #3F3F46;
    --cc-btn-bg:          rgba(0, 0, 0, 0.035);
    --cc-btn-bg-active:   rgba(0, 0, 0, 0.10);
    --cc-btn-border:      rgba(0, 0, 0, 0.14);
    --cc-chip-bg:         rgba(0, 0, 0, 0.03);
    --cc-chip-border:     rgba(0, 0, 0, 0.13);
    --cc-priority-border: rgba(185, 28, 28, 0.38);
  }
}

#app.more-mode #chat,
#app.more-mode #input-wrapper,
#app.more-mode #scroll-bottom-btn,
#app.more-mode #command-view {
  display: none !important;
}

#app.command-mode #more-view {
  display: none !important;
}

#command-view {
  display: none;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  position: relative;
}

#app.command-mode #command-view {
  display: flex;
}

#app.command-mode #header,
#app.command-mode #chat,
#app.command-mode #input-wrapper,
#app.command-mode #scroll-bottom-btn {
  display: none !important;
}

/* Phase-C stubs that don't do anything yet — hidden until the follow-up
   ships real more/pin menus. Each onclick is just a console.log.
   index.html (Pin coming soon / More coming soon).
   NOTE: #cc-more-btn (Triage sources) was unhidden once ccMoreMenuStub()
   shipped a real per-source toggle sheet (see cc.js). It stayed hidden by
   oversight, leaving the working sources feature with no entry point.
   NOTE: #cc-filter-row was dropped from this list because the row itself was
   deleted (dead stub: hidden AND wired to a 'cc:filter' event nobody heard). */
#cc-detail-pin,
#cc-detail-more {
  display: none !important;
}

/* Phase C (v1.2.0 M3): #cc-pane-left wraps topbar + filter row + feed so
   the FAB can anchor inside it (not in #cc-feed) and the desktop split-pane
   layout can flex the left pane to take all space left of the detail. */
.cc-pane-left {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.cc-feed {
  position: relative;
  flex: 1;
  overflow-y: auto;
  background: linear-gradient(to bottom, rgba(239, 68, 68, 0.025) 0%, transparent 28%);
  padding: 16px;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}

.cc-feed::-webkit-scrollbar { display: none; }

/* Phase C: M3 top app bar for the feed. Override the m3-topbar default
   surface-container-low with plain surface so the bar reads as part of the
   feed pane, matching mockup section 4. */
.cc-topbar.m3-topbar {
  background: var(--md-sys-color-surface);
  padding: 0 24px;
  gap: 8px;
  flex-shrink: 0;
}

.cc-topbar .m3-topbar__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--md-sys-color-on-surface);
}

.cc-count-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
  font-weight: 500;
  margin-left: 4px;
}

.cc-count-chip[hidden] { display: none; }

/* The Sources button is integration-gated: index.html ships it hidden and
   app.js bootFetchMe() unhides it only when the tenant has an enabled
   integration. .m3-icon-btn's display:inline-flex would otherwise beat the
   UA [hidden] rule (same reason as the count-chip rule above). */
#cc-more-btn[hidden] { display: none; }

/* The .cc-filter-row rules were REMOVED with the row itself. See the note in
   public/index.html: it was a hidden stub whose chips fired a 'cc:filter' event
   that no code listened for. */

@media (max-width: 600px) {
  .cc-topbar.m3-topbar { padding: 0 12px; }
  .cc-topbar .m3-topbar__title { font-size: 18px; }
  .cc-feed { padding: 8px 12px 12px; }
}

/* Safe area for the FEED topbar, at EVERY width.
   Identical root cause to the detail topbar further down (see the block above
   .cc-detail-head-avatar): `#app.command-mode #header` is display:none, so with
   no card open this bar is the TOPMOST element on screen and, without the
   inset, the title, the count chip, Refresh and Sources all paint under the
   phone status bar / notch. Same idiom as #header (styles.css) and
   .preview-header (styles/files.css).
   .m3-topbar already steps 64px -> 56px at <=600px, so only the inset is added,
   once per height breakpoint. padding-top is a longhand on purpose: the
   shorthand in the <=600px block above still supplies the 12px sides.
   NO WIDTH CAP, deliberately. The 1279px cap this block used to carry was
   removed once measurement showed the desktop rationale was false:
   #app.command-mode #header has no media query, so the app header is hidden at
   every width and this bar sits at y=0 on desktop as well (measured at 1440px:
   #header display:none, topbar top=0). The cap therefore bought nothing on
   desktop and clipped notched tablets in landscape (>=1280px) outright.
   Uncapping is safe because no ancestor of this bar consumes the top inset
   (#app / #command-view / #cc-pane-left carry no safe-area padding — grep
   safe-area-inset-top across public/), so it cannot double-pad, and
   env(safe-area-inset-top) resolves to 0 on any non-notched display, which
   makes desktop byte-for-byte unchanged (verified by screenshot hash at
   1440px, light and dark). */
@supports (padding-top: env(safe-area-inset-top)) {
  #cc-pane-left > .cc-topbar.m3-topbar {
    padding-top: env(safe-area-inset-top);
    height: calc(64px + env(safe-area-inset-top));
  }
  @media (max-width: 600px) {
    #cc-pane-left > .cc-topbar.m3-topbar {
      height: calc(56px + env(safe-area-inset-top));
    }
  }
}

.cc-group-header {
  position: sticky;
  top: -12px;
  z-index: 2;
  /* Was label-small (11px, --text-dim): too faint to scan on a phone. */
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
  padding: 18px 4px 8px;
  margin: 0 -12px;
  padding-left: 16px;
  padding-right: 16px;
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: 7px;
}

.cc-group-header::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cc-group-header.cc-group-urgent::before  { background: var(--error); box-shadow: 0 0 6px rgba(239,68,68,0.5); }

.cc-group-header.cc-group-normal::before  { background: var(--accent); }

.cc-group-header.cc-group-later::before   { background: var(--text-dim); }

.cc-group-header.cc-group--completed::before { background: var(--success); }

/* ──────────────────────────────────────────────────────────────────────
   Phase C (v1.2.0 M3) — CC card redesign.

   Source identity now lives in the avatar's outer ring (--cc-source-{source}
   token), not in a left-border stripe on the card. The card itself is a flat
   surface-container-high tile with M3 state-layer hover/press. .cc-card
   class is kept on every card so #cc-cards .cc-card selectors in app.js
   and ui.js continue to find them; .cccard is where all the new styling
   anchors.
   ────────────────────────────────────────────────────────────────────── */

.cc-card {
  /* Behavior + animation only. Visuals live on .cccard. */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cccard {
  display: flex;
  gap: 12px;
  padding: 14px;
  margin: 0 0 10px;
  /* Was surface-container-high with no edge: the tiles read as soft grey blobs
     floating on the near-black feed. A step down in fill plus a hairline gives
     each card a defined boundary without adding weight. */
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--cc-hairline);
  border-radius: 16px;
  position: relative;
  isolation: isolate;
  transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.cccard::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--md-sys-color-on-surface);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

@media (hover: hover) {
  .cccard:hover::after { opacity: var(--md-sys-state-hover-opacity); }
}

.cccard:active::after { opacity: var(--md-sys-state-pressed-opacity); }

/* Selected (desktop split-pane: highlights the card whose detail is open). */
.cccard.cc-card-selected,
.cccard--selected {
  background: var(--md-sys-color-secondary-container);
}

.cccard.cc-card-selected .cccard__sender,
.cccard--selected .cccard__sender,
.cccard.cc-card-selected .cccard__subject,
.cccard--selected .cccard__subject {
  color: var(--md-sys-color-on-secondary-container);
}

.cccard.cc-card-selected .cccard__meta,
.cccard--selected .cccard__meta { color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 75%, transparent); }

/* Avatar: 40dp disc inside a 44dp source-colored ring (2dp band). */
.cccard__avatar-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--md-sys-shape-corner-full);
  padding: 2px;
  flex-shrink: 0;
}

.cccard__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--md-sys-shape-corner-full);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cccard__avatar--glyph { color: rgba(255, 255, 255, 0.95); }
.cccard__avatar--glyph svg { width: 20px; height: 20px; }

.cccard__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.cccard__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 2px;
  min-width: 0;
}

/* Sourceless cards promote the title into this slot, and a single nowrap line
   chopped most of them mid-word ("Quarterly compliance filing sum…"). Two lines
   at 15px, with the meta parked top-right instead of inline, so the headline
   gets the full width it needs. */
.cccard__sender {
  font-size: 15px;
  font-weight: 650;
  line-height: 1.33;
  letter-spacing: -0.1px;
  color: var(--md-sys-color-on-surface);
  min-width: 0;
  flex: 1 1 auto;
  white-space: normal;
  overflow: visible;
}

/* The clamp target. Its parent is a flex item, and flex-item blockification
   turns display:-webkit-box into flow-root on iOS WebKit, so the clamp has to
   sit on this inner span (same reason .cccard__andy-txt exists below). */
.cccard__sender-txt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Compact archive rows stay one line: they have no __sender-txt span, so the
   wrap above would let their titles run to two lines. */
.cc-card-completed .cccard__sender {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cccard__meta {
  font-size: 12px;
  line-height: 1.5;
  padding-top: 2px;
  margin-left: auto;
  color: var(--md-sys-color-on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.cc-card-completed .cccard__meta { margin-left: 0; padding-top: 0; }

.cccard__subject {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42;
  /* Steps down from the headline so name and subject stop competing. */
  color: var(--md-sys-color-on-surface-variant);
  margin: 4px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Break an unbreakable token (long URL / hash) so it can't spill the width
     even when the vertical line-clamp is active. */
  overflow-wrap: anywhere;
  word-break: break-word;
  /* Hard height cap. -webkit-line-clamp is unreliable here: .cccard__subject is a
     flex item of .cccard__body (display:flex), and flex-item blockification turns
     display:-webkit-box into flow-root on some engines (notably iOS WebKit),
     defeating the clamp so a second line leaks below the row. This ceiling holds
     the row count regardless of clamp support. */
  max-height: 2.9em;
}

/* Andy summary block. Was blue text on a blue tint, which read as a dead
   hyperlink and clashed badly with the priority wash behind it. Neutral panel,
   body-grey text, and the blue is spent on the "Andy:" speaker tag only. */
.cccard__andy {
  background: var(--cc-panel-bg);
  border: 1px solid var(--cc-panel-border);
  color: var(--cc-panel-text);
  padding: 9px 11px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.45;
  margin-top: 10px;
  /* This block is a flex item of .cccard__body (display:flex), so putting the
     -webkit-line-clamp here fails: flex-item blockification turns display:-webkit-box
     into flow-root (notably on iOS WebKit) and the clamp is ignored, clipping mid-line
     with a leaked sliver instead of collapsing cleanly. Keep it a plain block and let
     the inner .cccard__andy-txt (whose parent is now a block, not a flex container)
     carry the clamp so it actually works. overflow:hidden + max-height is the backstop. */
  display: block;
  overflow: hidden;
  max-height: calc(2.9em + 20px);
}

/* The real clamp target. Its parent (.cccard__andy) is a plain block, so
   display:-webkit-box is NOT blockified here and -webkit-line-clamp collapses to
   exactly two lines with a trailing ellipsis on every engine, no leaked sliver. */
.cccard__andy-txt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.cccard__andy strong { color: var(--md-sys-color-secondary); font-weight: 650; }

.cccard__chips {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* Snooze / Dismiss. The old inline styles were 13px on a 7px pad with a
   --md-sys-color-outline (#262626) border, i.e. an invisible edge on a #1F1F1F
   card and a tap target well under the 44dp floor. */
.cccard__actions { gap: 10px; margin-top: 12px; }

.cccard__actions .cc-action-btn,
.cccard__actions .cc-commitment-done,
.cccard__actions .cc-commitment-snooze,
.cccard__actions .cc-commitment-dismiss,
.cccard__actions .cc-commitment-editdue,
.cccard__actions .cc-send-approve,
.cccard__actions .cc-send-deny {
  flex: 1;
  min-height: 42px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 12px;
  background: var(--cc-btn-bg);
  border: 1px solid var(--cc-btn-border);
  color: var(--md-sys-color-on-surface);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cccard__actions .cc-action-btn:active,
.cccard__actions .cc-commitment-done:active,
.cccard__actions .cc-commitment-snooze:active,
.cccard__actions .cc-commitment-dismiss:active,
.cccard__actions .cc-commitment-editdue:active,
.cccard__actions .cc-send-approve:active,
.cccard__actions .cc-send-deny:active {
  background: var(--cc-btn-bg-active);
}

/* Affirmative lifecycle actions carry the the brand primary. */
.cccard__actions .cc-commitment-done,
.cccard__actions .cc-send-approve { color: var(--md-sys-color-secondary); }

/* Mobile: only the box metrics tighten. The type does NOT shrink here any more
   (it used to drop to 13/13/11px, under the app's 15/14/12 legibility floor). */
@media (max-width: 600px) {
  .cccard { gap: 10px; margin-bottom: 10px; }
}

/* Priority: low cards fade slightly; high/critical no longer get a stripe
   (source identity is in the avatar ring; priority signals through
   surface tone instead). */
.cccard.cc-priority-low .cccard__subject,
.cccard.cc-priority-low .cccard__sender { color: var(--md-sys-color-on-surface-variant); }

/* Was a 25% error-container wash, which turned the whole tile muddy brown and
   fought every colour inside it. A trace of tint plus a full red hairline reads
   as urgent without repainting the card. Full border, never a one-sided bar. */
.cccard.cc-priority-high,
.cccard.cc-priority-critical {
  background: color-mix(in srgb, var(--md-sys-color-error-container) 14%, var(--md-sys-color-surface-container));
  border-color: var(--cc-priority-border);
}

.cc-stop-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.12);
  color: var(--error);
  border: 1px solid rgba(239, 68, 68, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
  position: relative;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

.cc-stop-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--md-sys-color-error);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

@media (hover: hover) {
  .cc-stop-btn:hover::after { opacity: var(--md-sys-state-hover-opacity); }
}

.cc-stop-btn:active::after { opacity: var(--md-sys-state-pressed-opacity); }

.cc-stop-btn:active { transform: scale(0.92); }

@media (pointer: coarse) {
  .cc-stop-btn { width: 48px; height: 48px; }
}

/* Phase C: legacy .cc-card-active / .cc-card-detail / .cc-card.expanded
   rules removed. The new .cccard markup doesn't render -active/-detail
   children, and inline expand was never wired in cc.js. */

.cc-detail-content {
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 12px;
}

/* The --cc-* tokens are defined on #cc-detail-view (the only place these
   composer classes are used). The fallbacks preserve today's appearance for
   any future mount outside the detail view. */
.cc-andy-input {
  flex: 1;
  min-width: 0;
  padding: 10px 16px;
  background: var(--cc-field-bg, var(--bg-tertiary));
  border: 1px solid var(--cc-field-line, var(--border));
  border-radius: 20px;
  color: var(--text);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  font-family: inherit;
  outline: none;
  min-height: 40px;
  max-height: 120px;
  line-height: 1.4;
  overflow-y: auto;
  resize: none;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.cc-andy-input:focus {
  border-color: #2693D1;
  box-shadow: 0 0 0 3px rgba(38, 147, 209, 0.18);
}

/* --text-dim (#71717A) was 3.4:1 on the shelf — below WCAG AA for body text.
   --cc-field-placeholder is picked against the field fill instead. */
.cc-andy-input::placeholder {
  color: var(--cc-field-placeholder, var(--text-dim));
}

.cc-andy-send {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(38, 147, 209, 0.35);
  transition: background var(--duration-fast);
}

.cc-andy-send:active {
  background: var(--accent-hover);
  transform: scale(0.95);
}

/* Voice/dictation button for the cc Ask Andy composer. Round and 40px to sit
   on the same optical line as the send button. */
.cc-andy-voice {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--duration-fast), color var(--duration-fast);
}

.cc-andy-voice:active {
  transform: scale(0.95);
}

.cc-andy-voice.recording {
  color: #fff;
  background: var(--error);
  animation: recordPulse 1.5s ease-in-out infinite;
}

.cc-andy-voice.transcribing {
  color: #fff;
  background: var(--accent);
  animation: transcribePulse 0.8s ease-in-out infinite;
}

.cc-confirm {
  background: var(--accent-subtle);
  border: 1px solid rgba(38,147,209, 0.2);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-top: 10px;
}

.cc-confirm-label {
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

.cc-confirm-body {
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.cc-confirm-actions {
  display: flex;
  gap: 8px;
}

.cc-confirm-btn {
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  font-weight: 600;
  cursor: pointer;
  border: none;
  min-height: 40px;
  transition: all var(--duration-fast);
}

.cc-confirm-send {
  background: var(--accent);
  color: #fff;
}

.cc-confirm-send:active { background: var(--accent-hover); }

.cc-confirm-cancel {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.cc-card.cc-actioned {
  background: rgba(92, 184, 122, 0.06);
  border-color: rgba(92, 184, 122, 0.2);
  opacity: 0.7;
}

.cc-card.cc-snoozed {
  opacity: 0.5;
}

.cc-card.cc-pending-action {
  background: var(--accent-subtle);
  border-color: rgba(38,147,209, 0.2);
}

.cc-card-enter {
  animation: ccCardIn 0.25s var(--md-sys-motion-easing-legacy) both;
}

.cc-card-exit {
  animation: ccCardOut 0.2s var(--md-sys-motion-easing-legacy) forwards;
  pointer-events: none;
}

/* .cc-act-menu is the detail footer's action-overflow popup. It shares this
   surface with the snooze menu but deliberately does NOT share the class name:
   the Snooze binding watches for `.cc-snooze-menu` leaving the DOM to decide
   whether to close the detail view, and a second element answering to that
   selector would keep that observer alive. */
.cc-snooze-menu,
.cc-act-menu {
  z-index: 1000;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  overflow: hidden;
  min-width: 140px;
}

.cc-snooze-option {
  display: block;
  width: 100%;
  padding: 11px 16px;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  text-align: left;
  cursor: pointer;
  min-height: 44px;
  position: relative;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

.cc-snooze-option::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--md-sys-color-on-surface);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.cc-snooze-option:active::after { opacity: var(--md-sys-state-pressed-opacity); }

.cc-snooze-option + .cc-snooze-option { border-top: 1px solid var(--border); }

.cc-status-badge {
  font-size: 0.72em;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cc-status-badge--review {
  background: color-mix(in srgb, var(--cc-status-review) 15%, transparent);
  color: var(--cc-status-review);
}

.cc-status-badge--working {
  background: color-mix(in srgb, var(--cc-status-working) 12%, transparent);
  color: var(--cc-status-working);
}

.cc-status-badge--commit {
  background: color-mix(in srgb, var(--cc-status-commit) 15%, transparent);
  color: var(--cc-status-commit);
}

.cc-commitments {
  margin-top: 8px;
  padding: 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--cc-status-commit) 6%, transparent);
  /* Symmetric tinted border, not a one-sided accent stripe (house rule; same
     treatment already applied to .cc-turn-instruction and .cc-detail-summary). */
  border: 1px solid color-mix(in srgb, var(--cc-status-commit) 28%, transparent);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cc-commitment {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88em;
}

.cc-commitment-text { flex: 1; color: var(--text); }

.cc-commitment-backstop {
  font-size: 0.85em;
  color: var(--cc-status-commit);
  cursor: help;
}

.cc-commitment-done {
  padding: 3px 10px;
  font-size: 0.82em;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}

.cc-commitment-done:hover {
  background: rgba(38,147,209, 0.1);
  border-color: var(--accent);
  color: var(--accent);
}

/* At 10px with a 2px border and three TRANSPARENT sides, the only painted
   pixels were a ~4px arc — on a phone that reads as a stray comma, not a
   spinner (the operator's "unpolished / rendering artifact"). 12px with a faint track
   ring makes it a legible rotating circle at the same optical weight. */
.cc-mini-spinner {
  width: 12px; height: 12px;
  border: 2px solid var(--cc-spinner-track, rgba(127, 127, 140, 0.35));
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}

.cc-unread-dot {
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 0 4px rgba(38,147,209, 0.5);
}

.cc-thread-count {
  font-size: 0.75em;
  color: var(--text-muted);
}

/* Account/source-app chip (Gmail / Outlook / ...) so the operator can tell which
   inbox a card is from. */
.cc-account-chip {
  /* Was 0.72em on a surface-container-high fill, i.e. the same colour as the
     card it sat on, so it read as an orphaned word rather than a chip. */
  font-size: 12px;
  line-height: 1.4;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--cc-chip-bg);
  color: var(--md-sys-color-on-surface-variant);
  border: 1px solid var(--cc-chip-border);
  white-space: nowrap;
}

/* Phase C: working/status border-left stripes dropped. The status pill in
   .cccard__chips carries the signal now. */
.cc-card-completed { opacity: 0.55; }

/* Done archive rows stay compact single-line: the roomier 16px feed padding
   above must not bloat them. Double-class specificity also wins over the
   mobile .cccard override. */
.cccard.cc-card-completed { padding: 10px 14px; margin-bottom: 6px; }

.cc-card-completed:active { opacity: 0.8; }

.cc-completed-section { margin-top: 12px; }

.cc-group-header--completed {
  cursor: pointer;
  list-style: none;
  color: var(--text-muted);
}

.cc-group-header--completed::marker { display: none; }

.cc-group-header--completed::-webkit-details-marker { display: none; }

/* Collapsible section headers (Done / Probably noise): make the tap + expand
   affordance obvious — bigger, higher-contrast text, a rotating chevron at the
   right edge, a real 44px tap target with press feedback. Scoped to the <details>
   summaries only, so the static active-feed labels (Needs attention / Today /
   Later <div>s, which share .cc-group-later) are left untouched. */
.cc-completed-section > summary.cc-group-header,
.cc-drawer-section > summary.cc-group-header {
  cursor: pointer;
  list-style: none;
  min-height: 44px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 14px;
  color: var(--text-secondary, #b8b3bd);
  border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.cc-completed-section > summary.cc-group-header::-webkit-details-marker,
.cc-drawer-section > summary.cc-group-header::-webkit-details-marker { display: none; }
.cc-completed-section > summary.cc-group-header::marker,
.cc-drawer-section > summary.cc-group-header::marker { content: ''; }
.cc-completed-section > summary.cc-group-header:hover,
.cc-drawer-section > summary.cc-group-header:hover,
.cc-completed-section > summary.cc-group-header:active,
.cc-drawer-section > summary.cc-group-header:active {
  background: var(--md-sys-color-surface-container-high, rgba(255, 255, 255, 0.06));
  color: var(--text-primary, #e6e1e5);
}
/* Rotating chevron — the universal "this expands" cue. Right edge, points right
   when closed and down when open. */
.cc-completed-section > summary.cc-group-header::after,
.cc-drawer-section > summary.cc-group-header::after {
  content: '';
  width: 7px;
  height: 7px;
  margin-left: auto;
  margin-right: 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.18s ease;
  opacity: 0.75;
}
details[open].cc-completed-section > summary.cc-group-header::after,
details[open].cc-drawer-section > summary.cc-group-header::after {
  transform: rotate(45deg);
}

.cc-day-label {
  font-size: var(--md-sys-typescale-label-small-size);
  line-height: var(--md-sys-typescale-label-small-line);
  letter-spacing: var(--md-sys-typescale-label-small-tracking);
  color: var(--text-muted);
  padding: 8px 12px 2px;
  text-transform: uppercase;
}

.cc-done-icon {
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  margin-right: 4px;
  font-weight: 600;
}

.cc-done-complete { color: var(--cc-status-review); }

.cc-done-dismissed { color: var(--text-muted); opacity: 0.6; }

.cc-badge--review { background: var(--cc-status-review) !important; }

.cc-context-strip {
  flex-shrink: 0;
}

.cc-provenance-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 8px 16px;
  background: var(--bg-secondary);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.cc-provenance-bar:active {
  background: rgba(22, 27, 36, 0.9);
}

.cc-provenance-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--text-dim);
}

.cc-provenance-icon svg {
  width: 20px;
  height: 20px;
}

.cc-provenance-type {
  font-size: var(--md-sys-typescale-label-small-size);
  line-height: var(--md-sys-typescale-label-small-line);
  letter-spacing: var(--md-sys-typescale-label-small-tracking);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-dim);
  flex-shrink: 0;
}

.cc-provenance-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-dim);
  flex-shrink: 0;
}

.cc-provenance-name {
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  font-weight: 500;
  color: var(--text-secondary);
  flex: 1;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: break-word;
}

.cc-provenance-time {
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--text-dim);
  flex-shrink: 0;
}

.cc-provenance-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-dim);
  transition: transform var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);
}

.cc-provenance-chevron.expanded {
  transform: rotate(180deg);
}

.cc-context-expanded {
  opacity: 0;
  overflow-y: auto;
  background: var(--bg);
  padding: 0 16px;
  transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), padding var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);
  scrollbar-width: thin;
}

.cc-context-expanded.open {
  opacity: 1;
  padding: 12px 16px;
}

.cc-ctx-msg {
  margin-bottom: 10px;
}

.cc-ctx-msg:last-child {
  margin-bottom: 0;
}

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

.cc-ctx-msg-sender {
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  font-weight: 600;
  color: var(--text-secondary);
}

.cc-ctx-msg-time {
  font-size: var(--md-sys-typescale-label-small-size);
  line-height: var(--md-sys-typescale-label-small-line);
  letter-spacing: var(--md-sys-typescale-label-small-tracking);
  color: var(--text-dim);
}

.cc-ctx-msg-body {
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cc-ctx-thread .cc-ctx-msg-body {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  white-space: pre-line;
}

.cc-ctx-email-subject {
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.cc-ctx-email-sender {
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--text-dim);
  margin-bottom: 6px;
}

.cc-ctx-email-body {
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  color: var(--text-muted);
  white-space: pre-wrap;
  word-break: break-word;
}

.cc-ctx-kv {
  display: flex;
  gap: 8px;
  padding: 4px 0;
}

.cc-ctx-kv-label {
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  width: 50px;
  flex-shrink: 0;
}

.cc-ctx-kv-value {
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--text-secondary);
}

.cc-turns {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cc-turn {
  padding-bottom: 20px;
  margin-bottom: 0;
}

.cc-turn + .cc-turn {
  border-top: 1px solid var(--md-sys-color-outline-variant);
  padding-top: 20px;
}

/* Symmetric accent card. A one-sided/asymmetric coloured stripe (the old
   border-left: 3px solid var(--accent) with border-radius: 0 8px 8px 0) is
   banned house-wide; a full tinted border plus a light fill carries the same
   "this is the operator's instruction" read without the stripe. */
.cc-turn-instruction {
  background: rgba(38, 147, 209, 0.07);
  border: 1px solid rgba(38, 147, 209, 0.24);
  padding: 12px 14px;
  border-radius: 11px;
}

.cc-turn-label {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}

.cc-turn-label-you {
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  font-weight: 700;
  color: var(--accent);
}

.cc-turn-label-andy {
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  font-weight: 700;
  color: var(--text-muted);
}

.cc-turn-time {
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--text-dim);
  margin-left: auto;
}

.cc-turn-instruction-text {
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  font-weight: 500;
  color: var(--text);
  word-break: break-word;
}

.cc-turn-response {
  padding: 12px 0 0 6px;
}

.cc-turn-response-text {
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  font-weight: 400;
  color: var(--text-secondary);
  word-break: break-word;
}

.cc-turn-response-text .cc-md {
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}

.cc-turn-response-wrap {
  position: relative;
  overflow: hidden;
}

.cc-turn-response-wrap.collapsed {
  max-height: 4.8em; /* ~3 lines at 1.6 line-height */
}

.cc-turn-response-wrap.collapsed::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 24px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}

.cc-turn-expand {
  background: none;
  border: none;
  color: var(--accent);
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-top: 8px;
  min-height: 44px;
  display: flex;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
}

.cc-turn-expand:active {
  opacity: 0.7;
}

.cc-thread-files {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.cc-thread-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.15);
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
}

.cc-thread-file:active { opacity: 0.7; }

.cc-thread-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  color: var(--accent);
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
}

/* Live autonomous-progress view: prominent phase line, the streamed reply tail
   forming in near-real-time, and the raw tool list collapsed below. */
.cc-live-progress {
  padding: 10px 14px 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cc-live-phase {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-size: var(--md-sys-typescale-label-large-size, 14px);
  line-height: var(--md-sys-typescale-label-large-line, 20px);
  letter-spacing: var(--md-sys-typescale-label-large-tracking, 0.1px);
  font-weight: 500;
}

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

/* Second line under the phase: step number + elapsed wall-clock. This is the
   ONE working indicator now (the duplicate .cc-stream-footer-status line in
   the streaming footer is gone), so it has to say what step Andy is on and
   how long it has been going. Tabular digits so the seconds ticking never
   shifts the layout. */
.cc-live-meta {
  margin-left: 20px;
  font-size: var(--md-sys-typescale-label-medium-size, 12px);
  line-height: var(--md-sys-typescale-label-medium-line, 16px);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.cc-live-stream {
  max-height: 120px;
  overflow-y: auto;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface-variant, rgba(255, 255, 255, 0.04));
  color: var(--text-secondary);
  font-size: var(--md-sys-typescale-body-small-size, 12px);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  opacity: 0.85;
}

.cc-progress-details {
  margin-top: 2px;
}

.cc-progress-summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--md-sys-typescale-label-medium-size);
  color: var(--text-tertiary);
  padding: 2px 0;
}

.cc-progress-summary::-webkit-details-marker {
  display: none;
}

.cc-progress-log {
  padding: 10px 14px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cc-progress-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  opacity: 0.5;
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--text-secondary);
  transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.cc-progress-step-latest {
  opacity: 1;
  color: var(--accent);
}

.cc-progress-icon {
  width: 16px;
  flex-shrink: 0;
  font-size: var(--md-sys-typescale-label-small-size);
  line-height: var(--md-sys-typescale-label-small-line);
  letter-spacing: var(--md-sys-typescale-label-small-tracking);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cc-progress-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
}

.cc-progress-ts {
  font-size: var(--md-sys-typescale-label-small-size);
  line-height: var(--md-sys-typescale-label-small-line);
  letter-spacing: var(--md-sys-typescale-label-small-tracking);
  color: var(--text-tertiary);
  flex-shrink: 0;
}

/* ── Detail footer action row ────────────────────────────────────────────────
   ONE compact chip row. It replaces the 48px M3 ButtonGroup plus the
   full-width "Continue in chat" row, which together cost 116px of a 642px
   sheet at 320px (footer 185px total) and pushed the body's "Show full
   message" control 73px past the bottom of its scroll container.

   Nothing was deleted. Every action still exists as a chip; the ones that do
   not fit move into the "⋯" overflow menu (_ccLayoutActionBar in cc.js), which
   is measured at render time, so no action is ever unreachable at any width.
   Measured at 320px: all four labels want 466px against 288px of content
   width, so overflow is the normal case on a phone, not an edge case. */
.cc-detail-actionbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  min-width: 0;
}

.cc-act-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--md-sys-shape-corner-full);
  /* Scoped: see --cc-chip-line on #cc-detail-view. The fallback keeps the old
     token for any mount outside the detail view (there is none today). */
  border: 1px solid var(--cc-chip-line, var(--md-sys-color-outline));
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--md-sys-typescale-font-family, inherit);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line);
  font-weight: var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

/* A 32px chip is under the 44px minimum touch target. Grow the HIT area
   without growing the LAYOUT box. The overhang is (44-32)/2 = 6px top and
   bottom, which the row's 8px bottom margin absorbs, so this cannot steal a
   tap from the composer directly below. Pseudo-elements are not event
   targets, so the click still resolves to the chip itself. */
.cc-act-chip::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

.cc-act-chip:active { background: var(--md-sys-color-surface-container-high); }

.cc-act-chip:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

/* The primary status action (Mark complete / Restore) reads filled. */
.cc-act-chip--primary {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-color: transparent;
}

.cc-act-chip--primary:active {
  background: var(--md-sys-color-secondary-container);
  filter: brightness(1.12);
}

.cc-act-more {
  padding: 0 10px;
  font-size: 17px;
  line-height: 1;
}

/* The width channel. A chip that does not fit is taken out of layout HERE and
   reached through the "⋯" menu, which forwards to this same node — it keeps its
   id and its bound onclick. Deliberately a class, not inline display: inline
   display is the card-status channel (Restore vs Dismiss/Snooze/Complete) and
   the two must not clobber each other. See _ccLayoutActionBar in cc.js. */
.cc-act-chip--ovf { display: none !important; }

.cc-andy-attach {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
  min-width: 36px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}

.cc-andy-attach:active { background: var(--bg-tertiary); }

.cc-detail-attached {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 12px 0;
}

.cc-attached-file {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--text-secondary);
}

.cc-attached-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: 1;
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  padding: 0 2px;
}

.cc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 6px;
  margin-top: 8px;
  padding-bottom: 2px;
}

/* M3 chip (assist). 8px radius per M3 chip spec (not pill). */
.cc-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-sm);
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--md-sys-typescale-font-family);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line);
  font-weight: var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  cursor: pointer;
  white-space: nowrap;
  min-height: 32px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  -webkit-tap-highlight-color: transparent;
}

.cc-chip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  pointer-events: none;
  z-index: -1;
}

@media (hover: hover) {
  .cc-chip:hover::after { opacity: var(--md-sys-state-hover-opacity); }
}

.cc-chip:active::after { opacity: var(--md-sys-state-pressed-opacity); }

@media (max-width: 480px), (pointer: coarse) {
  .cc-chip { min-height: 44px; padding: 10px 16px; }
}

.cc-skeleton .cc-skeleton-card {
  background: var(--md-sys-color-surface-container);
  border: none;
  border-radius: var(--md-sys-shape-corner-md);
  padding: 14px 16px;
  margin-bottom: 8px;
}

.cc-skeleton-line {
  height: 12px;
  border-radius: 4px;
  background: var(--md-sys-color-surface-container-high);
  animation: skeletonPulse 1.5s ease-in-out infinite;
  margin-bottom: 8px;
}

.cc-skeleton-line:nth-child(1) { width: 40%; height: 10px; }

.cc-skeleton-line:nth-child(2) { width: 75%; height: 14px; }

.cc-skeleton-line:nth-child(3) { width: 90%; }

.cc-skeleton-line:nth-child(4) { width: 60%; }

.cc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  position: relative;
}

/* Center the empty state vertically only when it's the sole content of the
   feed (no Done section below). When .cc-completed-section exists, the
   empty state collapses to its content height so Done stays visible. */
#cc-feed:not(:has(.cc-completed-section)) .cc-empty {
  height: 100%;
}

.cc-empty::before {
  content: '';
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(92, 184, 122, 0.04) 0%, transparent 70%);
  pointer-events: none;
}

.cc-empty-icon {
  margin-bottom: 16px;
  opacity: 0.9;
}

.cc-empty-title {
  font-size: var(--md-sys-typescale-headline-small-size);
  line-height: var(--md-sys-typescale-headline-small-line);
  letter-spacing: var(--md-sys-typescale-headline-small-tracking);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.cc-empty-subtitle {
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  color: var(--text-muted);
}

.cc-pull-indicator {
  text-align: center;
  padding: 12px;
  color: var(--text-dim);
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  display: none;
}

.cc-pull-indicator.active {
  display: block;
}

.cc-pull-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(38,147,209, 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: activitySpin 0.8s linear infinite;
  margin: 0 auto 6px;
}

/* ── Detail-view surface tokens ──────────────────────────────────────────
   Scoped to #cc-detail-view so the feed and the rest of the app are untouched.
   They exist because the shipped values made the composer effectively
   invisible: the input fill was --bg-tertiary (#1F1F1F), the IDENTICAL colour
   as the detail body behind it, and the footer shelf was
   --md-sys-color-surface-container-low (#0F0F0F), i.e. DARKER than the body
   above it, so elevation ran backwards. The body now drops to base so the
   shelf can read as lifted, and the field recesses into a well inside it.

   MEASURED, so nobody re-derives it wrong later: the field-vs-shelf WCAG
   luminance ratio is 1.16:1 BOTH before and after. That metric simply does not
   move for adjacent near-blacks — the +0.05 offset in the formula compresses
   them all (even inverting to a raised #2E2E2E field only reaches 1.28:1). What
   actually makes the composer visible, and what did improve, is the delineation
   and the text:
     field border vs shelf   1.27 -> 1.53
     shelf border vs shelf   1.07 -> 1.28
     placeholder vs field    3.41 -> 5.89  (WCAG AA fail -> pass)
     input text vs field    15.79 -> 19.30
   plus the 20px pill and the shelf's cast shadow.

   Literals rather than aliases of the surface ladder, because the ladder has no
   stop at these points. Light values mirror the same RELATIONSHIP (body = base,
   shelf = lifted, field = recessed well) instead of reusing the dark hexes, so
   #0D0D0D can never leak into light mode. */
#cc-detail-view {
  --cc-detail-bg: #0D0D0D;
  --cc-shelf-bg: #1A1A1A;
  --cc-shelf-line: #2E2E2E;
  --cc-shelf-shadow: 0 -6px 18px rgba(0, 0, 0, 0.5);
  --cc-field-bg: #070707;
  --cc-field-line: #3A3A3A;
  --cc-field-placeholder: #8A8A93;
  --cc-collapse-fade: var(--cc-detail-bg);
  /* Outline for the action-bar chips. NOT --md-sys-color-outline (#262626):
     that measures 1.15:1 against the #1A1A1A shelf, so the chip edge is
     invisible — the same defect as the composer border, on the row above it.
     #6B6B6B clears the 3:1 WCAG floor for non-text UI on both surfaces the
     chips can sit on (3.27:1 on the shelf, 3.65:1 on the #0D0D0D body).
     Scoped here on purpose: the shared token feeds the whole app and is not
     safe to move for one component. */
  --cc-chip-line: #6B6B6B;
}

html[data-theme="light"] #cc-detail-view {
  --cc-detail-bg: #FFFFFF;
  --cc-shelf-bg: #F1F1F3;
  --cc-shelf-line: #D0D0D6;
  --cc-shelf-shadow: 0 -6px 18px rgba(0, 0, 0, 0.10);
  --cc-field-bg: #FFFFFF;
  --cc-field-line: #B4B4BE;
  --cc-field-placeholder: #64646E;
  /* #D4D4D8 measured 1.31:1 on the #F1F1F3 shelf. #86868E gives 3.20:1 there
     and 3.61:1 on white. */
  --cc-chip-line: #86868E;
}

@media (prefers-color-scheme: light) {
  html[data-theme="system"] #cc-detail-view,
  html:not([data-theme]) #cc-detail-view {
    --cc-detail-bg: #FFFFFF;
    --cc-shelf-bg: #F1F1F3;
    --cc-shelf-line: #D0D0D6;
    --cc-shelf-shadow: 0 -6px 18px rgba(0, 0, 0, 0.10);
    --cc-field-bg: #FFFFFF;
    --cc-field-line: #B4B4BE;
    --cc-field-placeholder: #64646E;
    --cc-chip-line: #86868E;
  }
}

/* v1.2.3: mobile/tablet (<1280px) -- detail view is full-screen (top:0
   bottom:0) covering the cards underneath. Was a 78vh bottom-sheet through
   v1.2.2 which left a 22vh dead gap at the top. Slide-up transition kept.
   The drag handle is hidden everywhere now. The desktop ≥1280px rules
   below override flex/positioning to make it a persistent split-pane. */
#cc-detail-view {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 15;
  display: none;
  flex-direction: column;
  overflow: hidden;
  background: var(--cc-detail-bg);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
  transform: translateY(100%);
  transition: transform var(--md-sys-motion-duration-medium2, 300ms) var(--md-sys-motion-easing-emphasized-decel, cubic-bezier(0.05, 0.7, 0.1, 1));
}

#cc-detail-view .m3-bottom-sheet__handle { display: none; }

#cc-detail-view.open {
  display: flex;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  #cc-detail-view { transition: none; }
}

.cc-detail-empty { display: none; }

/* Phase C: detail header uses .m3-topbar primitive sizing.
   Composition: back icon-btn + avatar disc + name/meta stack + trailing
   stop/pin/more icon-btns. The avatar + name + meta combo mirrors the
   mockup section 4 detail-head. */
.cc-detail-header.m3-topbar {
  flex-shrink: 0;
  gap: 12px;
  padding: 0 12px;
}

/* Safe area for the detail topbar, at EVERY width.
   #cc-detail-view is position:absolute top:0 below 1280px, and in command mode
   the app #header is display:none (see the #app.command-mode block near the top
   of this file) — so this topbar is the TOPMOST element on screen. Without the
   inset it paints from y=0 and the phone status bar / notch eats the back
   button, sender, source and Stop control outright. Same idiom as #header
   (styles.css) and .preview-header (styles/files.css); cc.css simply never got
   it.
   .m3-topbar (styles/m3-atoms.css) already steps 64px -> 56px at <=600px, so
   only the inset is added here, once per height breakpoint.
   NO WIDTH CAP, deliberately. This block used to stop at 1279px on the stated
   grounds that ">=1280px the detail view is a split pane sitting inside the app
   shell, below the app header, so an inset would double-pad". That reasoning
   was WRONG and measurement killed it: at 1280px+ the pane does become
   position:relative, but its flex parent #command-view starts at y=0 because
   #app.command-mode #header is display:none at every width. Measured at 1440px
   with the detail pane open: #header display:none, #cc-detail-view top=0,
   .cc-detail-header top=0. Nothing sits above it to double-pad against, and no
   ancestor carries a top inset either. So the cap only clipped notched tablets
   in landscape. env(safe-area-inset-top) is 0 on non-notched displays, so
   desktop is byte-for-byte unchanged (verified by screenshot hash at 1440px,
   detail pane open, light and dark). */
@supports (padding-top: env(safe-area-inset-top)) {
  #cc-detail-view > .cc-detail-header.m3-topbar {
    padding-top: env(safe-area-inset-top);
    height: calc(64px + env(safe-area-inset-top));
  }
  @media (max-width: 600px) {
    #cc-detail-view > .cc-detail-header.m3-topbar {
      height: calc(56px + env(safe-area-inset-top));
    }
  }
}

.cc-detail-head-avatar.m3-avatar {
  width: 36px;
  height: 36px;
  font-size: 13px;
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
}

.cc-detail-head-info {
  flex: 1;
  min-width: 0;
}

.cc-detail-head-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--md-sys-color-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cc-detail-head-meta,
.cc-detail-source {
  font-size: 12px;
  color: var(--md-sys-color-on-surface-variant);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cc-detail-actions-top {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.cc-detail-back.m3-icon-btn { flex-shrink: 0; }

/* Stop button: special-case the destructive color but keep m3-icon-btn shape. */
.cc-detail-stop-btn.m3-icon-btn {
  color: var(--md-sys-color-error);
  background: color-mix(in srgb, var(--md-sys-color-error) 14%, transparent);
}

.cc-detail-stop-btn[disabled] { opacity: 0.5; cursor: default; }

.cc-detail-stop-btn .cc-detail-stop-spinner {
  width: 14px;
  height: 14px;
  border: 1.5px solid color-mix(in srgb, var(--md-sys-color-error) 35%, transparent);
  border-top-color: var(--md-sys-color-error);
  border-radius: 50%;
  animation: ccDetailStopSpin 0.7s linear infinite;
}

.cc-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.cc-detail-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  padding: 24px;
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
}

.cc-detail-sender {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.cc-detail-sender-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: var(--md-sys-typescale-title-medium-line);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}

.cc-detail-sender-info {
  flex: 1;
  min-width: 0;
}

.cc-detail-sender-name {
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: var(--md-sys-typescale-title-medium-line);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
  font-weight: 600;
  color: var(--text);
}

.cc-detail-sender-meta {
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--text-muted);
  margin-top: 1px;
}

.cc-detail-title {
  font-size: var(--md-sys-typescale-title-large-size);
  line-height: var(--md-sys-typescale-title-large-line);
  letter-spacing: var(--md-sys-typescale-title-large-tracking);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Phase C: Andy summary keeps its quiet supporting-text role -- a tinted
   fill inside a full tinted border so it reads as Andy's analysis of the
   source content (not a call-to-action). The primary-container "draft reply"
   block below is the action surface. The original 2px left-only stripe with
   radius 0 8px 8px 0 was the same banned asymmetric-accent pattern as
   .cc-turn-instruction. */
.cc-detail-summary {
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
  margin: 8px 0 14px;
  padding: 9px 12px;
  border: 1px solid rgba(38, 147, 209, 0.24);
  background: rgba(38, 147, 209, 0.07);
  border-radius: 11px;
}

.cc-detail-full-content {
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Shown when /api/email/read failed and the detail view only has the feed
   teaser to draw. Full border, never a one-sided accent stripe. */
.cc-detail-body-error {
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
  color: var(--md-sys-color-error);
  margin: 8px 0 10px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--md-sys-color-error) 40%, transparent);
  background: color-mix(in srgb, var(--md-sys-color-error) 10%, transparent);
  border-radius: 11px;
}

.cc-source-detail {
  /* Lets long source content (tall emails, full Teams threads) push the
     thread section below it instead of being capped to a fixed height. */
  display: block;
}

.cc-source-detail:empty { display: none; }

.cc-thread-section {
  /* Visual separator between the source detail and the conversation
     thread when the card has both. The :empty rule hides the rule when
     the card has no thread yet (fresh email card → no separator line
     dangling at the bottom). */
  display: block;
}

.cc-thread-section:empty { display: none; }

.cc-source-detail:not(:empty) + .cc-thread-section:not(:empty) {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}

/* ── Collapsible long source body ────────────────────────────────────────
   The default view of a card's source content is a clamped, in-theme
   preview with a fade to the container background and one real full-width
   affordance. Before this, an HTML email mounted a min-height:60vh WHITE
   iframe as the DEFAULT view: over half a 320pt phone screen, in the wrong
   theme, with an inner scroll nested inside the page scroll, sliced
   mid-sentence with no indication there was more.
   .cc-collapse-inner is clamped by max-height (not -webkit-line-clamp) so
   the JS binder can compare scrollHeight against it and DROP the toggle
   entirely when the content does not actually overflow — a three-line Teams
   message must not get a pointless "Show full message" button.
   --cc-collapse-fade is the colour the gradient resolves to; it defaults to
   the detail body and is re-pointed per container (e.g. inside a
   .cc-detail-msg bubble) so the fade never shows a seam. */
.cc-collapse { position: relative; }

.cc-collapse-inner {
  position: relative;
  max-height: 148px;
  overflow: hidden;
}

.cc-collapse-inner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--cc-collapse-fade, var(--md-sys-color-surface-container-high)));
}

.cc-collapse.open > .cc-collapse-inner {
  max-height: none;
  overflow: visible;
}

.cc-collapse.open > .cc-collapse-inner::after { display: none; }

.cc-collapse-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 36px;
  margin-top: 6px;
  padding: 0 12px;
  background: none;
  border: none;
  border-top: 1px solid var(--border-subtle);
  color: var(--accent);
  font-family: inherit;
  font-size: var(--md-sys-typescale-label-large-size, 14px);
  font-weight: 600;
  cursor: pointer;
}

.cc-collapse-toggle svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform var(--duration-fast);
}

.cc-collapse.open > .cc-collapse-toggle svg { transform: rotate(180deg); }

/* Message bubbles have their own fill, so the fade has to match it. */
.cc-detail-msg .cc-collapse { --cc-collapse-fade: var(--bg-secondary); }

/* Mounted only when the reader EXPANDS an HTML email. A rich email
   legitimately needs its own white canvas once opened; it does not need to be
   the DEFAULT view, which is what min-height:60vh made it.
   Definite 70vh + internal scroll rather than the intuitive height:auto: an
   iframe does not size to its content (auto collapses to the 150px default),
   and this one is sandboxed WITHOUT allow-same-origin on purpose (no
   credentialed fetches to tracking pixels), so the parent cannot read
   contentDocument.scrollHeight to size it either. 70vh only ever applies
   AFTER the reader asked for the full message, so the canvas is what they
   requested rather than something imposed on them. */
.cc-email-html-frame {
  display: block;
  width: 100%;
  height: 70vh;
  max-height: 70vh;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: #ffffff;
  margin: 8px 0 12px;
}

.cc-manual-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
}

.cc-manual-priority {
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--md-sys-typescale-label-small-size);
  line-height: var(--md-sys-typescale-label-small-line);
  letter-spacing: var(--md-sys-typescale-label-small-tracking);
}

.cc-manual-date {
  color: var(--text-muted);
}

/* DELIBERATELY LEFT ONE-SIDED, same reasoning as .preview-markdown blockquote
   in styles/files.css: this is a NEUTRAL quotation/indent rule, not a coloured
   accent bar used for emphasis or severity. The ban targets the latter. */
.cc-manual-body {
  padding-left: 12px;
  border-left: 2px solid var(--border, rgba(255, 255, 255, 0.06));
  margin-top: 4px;
}

.cc-md {
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  /* Full-strength on-surface, not the dimmed secondary. Card bodies are read
     end to end on a phone; only bold text was hitting full contrast before,
     which left long-form job output (news brief, reports) greyed out.
     .cc-md--compact keeps its own muted colour for previews. */
  color: var(--text);
  word-break: break-word;
}

/* Inline sanitized HTML (Teams message bodies). Constrain media + spacing so a
   giphy GIF or wide table can't blow out the detail column. */
.cc-html img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  margin: 4px 0;
}
.cc-html p { margin: 4px 0; }
.cc-html a { color: var(--md-sys-color-primary, #7cc4ff); }

.cc-md p {
  margin: 0 0 12px 0;
}

.cc-md p:last-child {
  margin-bottom: 0;
}

.cc-md ul, .cc-md ol {
  margin: 8px 0 12px 0;
  padding-left: 20px;
}

.cc-md ul {
  list-style: none;
}

.cc-md ul li {
  position: relative;
}

.cc-md ul li::before {
  content: "\00B7";
  position: absolute;
  left: -14px;
  color: var(--text-dim);
  font-weight: 700;
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: var(--md-sys-typescale-title-medium-line);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
}

.cc-md li {
  margin-bottom: 6px;
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}

.cc-md li:last-child {
  margin-bottom: 0;
}

.cc-md strong {
  font-weight: 600;
  color: var(--text);
}

.cc-md code {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 0.87em;
  background: var(--md-sys-state-lift);
  border: 1px solid var(--md-sys-state-lift);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--text);
}

.cc-md a {
  color: var(--accent);
  text-decoration: none;
  word-break: break-all;
}

.cc-md h1, .cc-md h2, .cc-md h3, .cc-md h4 {
  font-weight: 600;
  color: var(--text);
  margin: 16px 0 8px 0;
  line-height: 1.3;
}

.cc-md h1 { font-size: 1.25em; }

.cc-md h2 { font-size: 1.15em; }

.cc-md h3 { font-size: 1.05em; }

.cc-md h4 { font-size: 1em; }

.cc-md h1:first-child, .cc-md h2:first-child, .cc-md h3:first-child, .cc-md h4:first-child {
  margin-top: 0;
}

.cc-md pre {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  padding: 12px;
  margin: 8px 0 12px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cc-md pre code {
  background: none;
  border-radius: 0;
  padding: 0;
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  white-space: pre;
}

/* Quoted blocks are a container, not an aside: full border plus a light fill,
   never a one-sided bar. Italics are dropped because job output puts real
   content (TL;DR bullets, callouts) inside quotes, and a screen of italic
   muted text is the hardest thing on the card to read. */
.cc-md blockquote {
  border: 1px solid var(--md-sys-state-lift);
  background: var(--md-sys-state-lift-weak);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 10px 0;
  color: var(--text);
}

.cc-md blockquote > :first-child { margin-top: 0; }
.cc-md blockquote > :last-child { margin-bottom: 0; }
.cc-md blockquote p { margin: 0 0 8px 0; }
.cc-md blockquote ul { margin: 0; padding-left: 18px; }
.cc-md blockquote li { margin-bottom: 8px; }

.cc-md table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 12px 0;
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
}

.cc-md th, .cc-md td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--md-sys-state-lift);
  text-align: left;
}

.cc-md th {
  font-weight: 600;
  color: var(--text);
}

.cc-md hr {
  border: none;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  margin: 12px 0;
}

.cc-md em {
  font-style: italic;
}

.cc-md--compact {
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  color: var(--text-muted);
}

.cc-md--compact p {
  margin: 0 0 6px 0;
}

.cc-md--compact ul, .cc-md--compact ol {
  margin: 4px 0 6px 0;
  padding-left: 14px;
}

.cc-md--compact li {
  margin-bottom: 3px;
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
}

.cc-md--compact strong {
  color: var(--text-secondary);
}

.cc-md--compact code {
  font-size: 0.87em;
}

.cc-detail-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cc-detail-msg {
  padding: 10px 14px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

.cc-detail-msg-from {
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.cc-detail-msg-text {
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.cc-detail-msg-time {
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--text-dim);
  margin-top: 4px;
}

.cc-msg-attachments {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.cc-msg-att-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg-tertiary, rgba(0,0,0,0.05));
  border-radius: var(--radius-sm);
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--text);
  text-decoration: none;
  width: fit-content;
}

.cc-msg-att-file a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  text-decoration: none;
}

.cc-msg-att-icon {
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  flex-shrink: 0;
}

.cc-msg-att-name {
  word-break: break-all;
}

.cc-email-attachments {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

.cc-email-att-header {
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.cc-email-att-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 4px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  color: var(--text);
  text-decoration: none;
}

.cc-email-att-size {
  margin-left: auto;
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--text-dim);
  flex-shrink: 0;
}

/* Attachment chips are tap-to-preview; the modal offers download, and a small
   inline button downloads directly. */
.cc-email-att-file[role="button"],
.cc-msg-att-file[role="button"] {
  cursor: pointer;
}
.cc-email-att-file[role="button"]:hover,
.cc-msg-att-file[role="button"]:hover {
  border-color: var(--border, rgba(0,0,0,0.18));
  background: var(--bg-tertiary, rgba(0,0,0,0.06));
}
.cc-att-dl-btn {
  margin-left: 8px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
}
.cc-msg-att-file .cc-att-dl-btn { margin-left: 4px; }
.cc-att-dl-btn:hover {
  background: var(--bg-tertiary, rgba(0,0,0,0.08));
  color: var(--text);
}

.cc-detail-event-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.cc-detail-event-row:last-child {
  border-bottom: none;
}

.cc-detail-event-label {
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  font-weight: 600;
  color: var(--text-muted);
  width: 80px;
  flex-shrink: 0;
  text-transform: uppercase;
}

.cc-detail-event-value {
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  color: var(--text);
  flex: 1;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Lifted composer shelf. Was surface-container-low (#0F0F0F) over a
   #1F1F1F body — darker than what it sat under, so elevation read backwards
   and the shelf edge was invisible. Now a genuinely lighter fill, a border
   you can see, and a cast shadow so it reads as floating over the body. */
.cc-detail-footer {
  flex-shrink: 0;
  padding: 12px 16px max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--cc-shelf-line);
  background: var(--cc-shelf-bg);
  box-shadow: var(--cc-shelf-shadow);
}

.cc-detail-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin-bottom: 8px;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.cc-detail-chips::-webkit-scrollbar { display: none; }

.cc-detail-chips:empty {
  display: none;
  margin-bottom: 0;
}

.cc-detail-andy-bar {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

#app.command-mode #input-wrapper,
#app.more-mode #input-wrapper {
  display: none !important;
}

@media (min-width: 1024px) {
  /* Phase C: cards stack vertically (no multi-column grid). Mockup section
     4 shows full-width card rows in the feed column. */
  #cc-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 960px;
    margin: 0 auto;
  }

  .cc-feed { padding: 16px 24px 80px; }
}

@media (min-width: 1024px) {
  .tab-bar-item:hover {
    background: var(--md-sys-state-lift-weak);
    color: var(--text-secondary);
  }

  .tab-bar-item.active:hover {
    color: var(--accent);
  }

  .cc-snooze-option:hover::after {
    opacity: var(--md-sys-state-hover-opacity);
  }

  .cc-snooze-option {
    padding: 8px 16px;
    min-height: 36px;
  }

  .tab-bar-item {
    min-height: 48px;
    padding: 8px 0 6px;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 1024px) {
  .tool-launcher-card:hover {
    transform: none;
  }
}

@media (min-width: 1280px) {
  /* Split-pane layout: left pane (topbar + filter + feed + FAB) flexes,
     detail pane is a fixed 520dp column on the right. */
  #app.command-mode #command-view {
    flex-direction: row;
  }

  /* FAB sits inside .cc-pane-left, so the v1.1.3 right-offset fix that
     used to push it past the detail pane is no longer needed. */
  .cc-pane-left { flex: 1; }

  /* Drop the grid centered max-width so cards use the full feed pane. */
  #cc-cards { max-width: none; margin: 0; }

  /* Detail pane: persistent flex item, no slide animation, no shadow.
     Override the mobile bottom-sheet transform so the pane sits where it
     belongs in the row flex. Hide the drag handle on desktop. */
  #cc-detail-view {
    position: relative;
    flex: 0 0 520px;
    width: 520px;
    height: auto;
    max-height: none;
    display: flex !important;
    animation: none !important;
    transform: none !important;
    transition: none;
    box-shadow: none;
    background: var(--md-sys-color-surface-container-low);
    border-left: 1px solid var(--md-sys-color-outline-variant);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  /* WIDE READING COLUMN, automatic for a news brief. A 16-24KB document laid
     out as a front page cannot read at 520px, and it can borrow the width from
     a feed the operator has already triaged (which stays visible and usable).
     No setting and no toggle: the class is added by ccOpenDetail when the body
     passes isBriefBody, and removed by ccCloseDetail. Desktop only, because it
     lives inside this @media block. */
  #cc-detail-view.cc-detail--wide {
    flex: 0 0 min(760px, 52vw);
    width: auto;
  }
  .cc-detail--wide .cc-detail-body { padding: 24px 32px 40px; }

  /* Empty state */
  .cc-detail-empty {
    display: none;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px;
    gap: 10px;
    margin: 24px;
    color: var(--md-sys-color-on-surface-variant);
  }
  .cc-detail-empty svg {
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0.4;
    margin-bottom: 4px;
  }
  .cc-detail-empty-title {
    font-size: var(--md-sys-typescale-body-large-size);
    line-height: var(--md-sys-typescale-body-large-line);
    letter-spacing: var(--md-sys-typescale-body-large-tracking);
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
  }
  .cc-detail-empty-sub {
    font-size: var(--md-sys-typescale-body-small-size);
    line-height: var(--md-sys-typescale-body-small-line);
    letter-spacing: var(--md-sys-typescale-body-small-tracking);
    color: var(--md-sys-color-on-surface-variant);
    max-width: 320px;
  }

  /* Toggle empty vs content based on .open */
  #cc-detail-view:not(.open) > .cc-detail-empty {
    display: flex;
  }
  #cc-detail-view:not(.open) > .cc-detail-header,
  #cc-detail-view:not(.open) > .cc-context-strip,
  #cc-detail-view:not(.open) > .cc-detail-body,
  #cc-detail-view:not(.open) > .cc-detail-footer {
    display: none !important;
  }
  #cc-detail-view.open > .cc-detail-empty {
    display: none;
  }

  /* Hide the back button on desktop split-pane (no view to go back to) */
  #cc-detail-view.open .cc-detail-back {
    display: none;
  }
}

.cc-snooze-option.ctx-menu-danger {
  color: var(--error);
}

.cc-snooze-option.ctx-menu-danger::after {
  background: var(--md-sys-color-error);
}

.cc-card.cc-card-keynav {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Phase 1: detail flag chip row ──
   Mirrors Android TeamsThreadFlagsRow. Pill chips above the source detail
   when a card has needsApproval / hasFailure / hasCommitments flags. */
.cc-detail-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px 0;
}
.cc-flag-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--md-sys-typescale-label-small-size);
  line-height: var(--md-sys-typescale-label-small-line);
  letter-spacing: var(--md-sys-typescale-label-small-tracking);
  font-weight: 600;
}
.cc-flag-chip--danger  { background: color-mix(in srgb, var(--cc-flag-danger) 14%, transparent);  color: var(--cc-flag-danger); }
.cc-flag-chip--warning { background: color-mix(in srgb, var(--cc-flag-warning) 14%, transparent); color: var(--cc-flag-warning); }
.cc-flag-chip--caution { background: color-mix(in srgb, var(--cc-flag-caution) 14%, transparent); color: var(--cc-flag-caution); }

/* Phase C: FAB stack anchors inside .cc-pane-left so split-pane layout
   keeps it on the left of the detail pane without a manual right offset.
   The Phase-1 stacked Ask Andy FAB was retired 2026-05-23 (single create
   FAB only). .cc-fab-create defers to .m3-fab--small for sizing/color. */
.cc-fab-stack {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  z-index: 10;
}

/* ── Phase 1: pull-to-refresh ──
   Anchored indicator at the top of #cc-feed. Hidden by default, slides in
   as the user pulls down. Spinner overlaps the chevron once pull exceeds
   the trigger threshold. */
.cc-ptr-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  pointer-events: none;
  transform: translateY(-100%);
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.cc-ptr-indicator.cc-ptr-active { opacity: 1; }
.cc-ptr-indicator.cc-ptr-ready { color: var(--accent); }
.cc-ptr-indicator svg { width: 22px; height: 22px; transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); }
.cc-ptr-indicator.cc-ptr-ready svg { transform: rotate(180deg); }
.cc-ptr-indicator.cc-ptr-refreshing svg { animation: ccPtrSpin 0.8s linear infinite; }
@keyframes ccPtrSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Phase 1: swipe-to-dismiss/snooze ──
   Each card row sits in a positioning container that exposes red dismiss
   on the left and amber snooze on the right as the row translates X. */
.cc-card {
  touch-action: pan-y;
  transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-legacy);
}
.cc-card.cc-card-swiping { transition: none; }
.cc-card.cc-card-dismiss-exit { transform: translateX(-100%) !important; opacity: 0; }
.cc-card.cc-card-snooze-exit  { transform: translateX( 100%) !important; opacity: 0; }
.cc-card-swipe-bg {
  position: absolute;
  top: 0; bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 18px;
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: #fff;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.cc-card-swipe-bg--dismiss { left: 0;  right: auto; background: linear-gradient(90deg, #ef4444, #ef4444cc); }
.cc-card-swipe-bg--snooze  { right: 0; left: auto;  background: linear-gradient(270deg, #f59e0b, #f59e0bcc); justify-content: flex-end; }
.cc-card-swipe-wrap { position: relative; overflow: hidden; }
.cc-card-swipe-wrap.cc-card-swipe-active .cc-card-swipe-bg { opacity: 1; }

/* v1.4.7 swipe affordance via box-shadow on the card itself.
   No DOM mutation, no shell wrap. The card translates as before; a
   colored bar attaches to the LEADING edge (the side the card is
   moving toward) via box-shadow with a negative/positive X offset.
   Past the commit threshold the bar grows and adds a glow.
   data-swipe-dir is set by _ccBindSwipe during pointermove, cleared
   in finish(). */
.cc-card[data-swipe-dir="dismiss"] {
  /* swipe-left = dismiss. Bar on the LEFT edge (negative x offset)
     where the card is heading. */
  box-shadow: -10px 0 0 0 #dc2626;
}
.cc-card[data-swipe-dir="dismiss"][data-swipe-commit="1"] {
  box-shadow: -16px 0 0 0 #dc2626, 0 0 24px rgba(220, 38, 38, 0.45);
}
.cc-card[data-swipe-dir="snooze"] {
  /* swipe-right = snooze. Bar on the RIGHT edge (positive x offset). */
  box-shadow: 10px 0 0 0 #f59e0b;
}
.cc-card[data-swipe-dir="snooze"][data-swipe-commit="1"] {
  box-shadow: 16px 0 0 0 #f59e0b, 0 0 24px rgba(245, 158, 11, 0.45);
}

/* ── Phase 2: recently-closed undo strip ──
   Sits between the toolbar and the card feed. Holds up to 3 dismissed
   cards with Undo buttons. Auto-clears after 30s. */
.cc-recently-closed {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 12px 0;
}
.cc-rc-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-elevated, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  color: var(--text-muted);
  animation: ccRcSlideIn 0.2s ease-out;
}
@keyframes ccRcSlideIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cc-rc-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 8px;
}
.cc-rc-undo {
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm, 6px);
  position: relative;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
.cc-rc-undo::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--md-sys-color-primary);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
@media (hover: hover) {
  .cc-rc-undo:hover::after { opacity: var(--md-sys-state-hover-opacity); }
}
.cc-rc-undo:active::after { opacity: var(--md-sys-state-pressed-opacity); }
.cc-rc-undo:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}

/* ── Phase 2: inline AskAndy bar above feed ──
   Quick affordance to talk to Andy without opening a specific card.
   Sits below the toolbar, above the recently-closed strip. */
.cc-inline-ask {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  margin: 8px 12px 0;
  background: var(--bg-elevated, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
}
.cc-inline-ask-input {
  flex: 1;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  color: var(--text);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  font-family: inherit;
  resize: none;
  min-height: 38px;
  max-height: 100px;
}
.cc-inline-ask-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.cc-inline-ask-send {
  padding: 0 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm, 8px);
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  cursor: pointer;
  min-height: 38px;
}
.cc-inline-ask-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}


/* ── Live Ask-Andy stream (shared chat renderer inside the CC detail pane) ──
   The live bubble renders through render-message.js, so the chat's global
   .tool-card / .tool-group / .reasoning-block / .todo-card / .memory-saved /
   .streaming-indicator classes appear inside the narrow detail pane. Rules
   here are scoped under .cc-live-* so nothing leaks back into the chat panel. */
.cc-live-turns { margin: 8px 0; }
.cc-live-turns .cc-turn-live + .cc-turn-live { margin-top: 16px; }

/* Status line kept for the 409 / error paths (was inline-styled). */
.cc-stream-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--md-sys-color-on-surface-variant, #938f99);
  font-size: 13px;
  margin-top: 6px;
}

.cc-live-body { min-width: 0; }
.cc-live-bubble {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
}

/* Match the finished thread turn's typography so the done-swap from live
   bubble to .cc-turn-response-text is a near-identical replace. */
.cc-live-bubble .text-segment {
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  color: var(--text-secondary);
  word-break: break-word;
}

/* Chat markdown output normally sits inside .bubble (styles.css scopes pre
   there); give code blocks + tables an overflow-safe treatment here. */
.cc-live-bubble pre {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--a-card-line);
  border-radius: var(--md-sys-shape-corner-sm);
  padding: 8px 10px;
  overflow-x: auto;
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.cc-live-bubble table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
}

/* Narrow-pane overflow guards: long file paths / commands in tool chrome must
   wrap instead of forcing horizontal scroll (especially on mobile). */
.cc-live-bubble .tool-card,
.cc-live-bubble .tool-group,
.cc-live-bubble .reasoning-block,
.cc-live-bubble .todo-card,
.cc-live-bubble .memory-saved { max-width: 100%; min-width: 0; }
.cc-live-bubble .tool-summary,
.cc-live-bubble .tool-group-label,
.cc-live-bubble .tool-name-label {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Finalized-in-place chrome (renderMessage live:false draws a time row +
   usage footer into .cc-live-body): keep it subtle, and drop the chat-only
   copy/save buttons — they need the chat .message shell to function. */
.cc-live-body > .time {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
}
.cc-live-body > .run-usage {
  font-size: 11px;
  color: var(--text-muted);
}
.cc-live-body .msg-copy-btn,
.cc-live-body .msg-save-btn { display: none; }

/* .cc-stream-footer-status was REMOVED. It rendered a second "Andy is
   working…" line in the composer shelf while .cc-live-phase (in the thread)
   already showed one, so both were on screen at once. The thread indicator is
   the single surviving status; see .cc-live-phase / .cc-live-meta above. */

/* ══════════════════════════════════════════════════════════════════════════
   NEWS BRIEF — surfaces that render OUTSIDE the .nb2 scope.

   These two blocks live here rather than in news-brief.css for one reason: the
   feed row and the detail-fallback notice are drawn by cc.js / cc-sources.js
   into the Command Center's own DOM, where none of the `--nb-*` tokens defined
   on `.nb2` are in scope. Keeping the rules next to the tokens they need was
   how the reference stylesheet ended up with a feed-row block whose department
   colours silently resolved to nothing.
   ══════════════════════════════════════════════════════════════════════════ */

/* Department palette, re-declared for the feed row. Same values as .nb2 in
   news-brief.css. If you change one, change both. */
.cccard__brief {
  --nb-top:      #F5A524;
  --nb-israel:   #4FA8E8;
  --nb-world:    #9AA3B8;
  --nb-canada:   #EE6E68;
  --nb-markets:  #34C77B;
  --nb-tech:     #A78BFA;
  --nb-misc:     #9A9AA3;
  --nb-up:       #34C77B;
  --nb-down:     #F87171;
  --nb-ink-3:    #9A9AA3;
  --nb-line:     rgba(255, 255, 255, 0.085);
}

/* ══ FEED ROW ═══════════════════════════════════════════════════════════
   Extends .cccard rather than replacing it: same tile, same radius, same
   avatar slot. Only the news-brief internals are new. */
.cccard--brief .cccard__sender-txt { letter-spacing: -0.015em; }
.nb2-row-head {
  font-size: 15.5px; line-height: 1.3; font-weight: 650; letter-spacing: -0.015em;
  color: var(--md-sys-color-on-surface);
  margin: 6px 0 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.nb2-row-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--nb-line, rgba(255,255,255,0.085));
}
.nb2-row-dept {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--nb-ink-3, #9A9AA3);
}
.nb2-row-dept i { width: 6px; height: 6px; border-radius: 50%; background: var(--nb-c); }
.nb2-row-dept b { color: var(--md-sys-color-on-surface); font-weight: 700; font-variant-numeric: tabular-nums; }
.nb2-row-mkt {
  margin-left: auto;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  display: inline-flex; gap: 8px;
}
.nb2-row-mkt span.down { color: var(--nb-down, #F87171); }
.nb2-row-mkt span.up { color: var(--nb-up, #34C77B); }

/* LOUD FALLBACK. Shown above the raw text when a body that is clearly a brief
   attempt did not render as one. The silent version of this is what let a
   designed layout and a wall of grey text look like the same product on
   different mornings. Same amber treatment as the in-brief coverage strip. */
.cc-brief-fallback {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(245, 165, 36, 0.34);
  background: rgba(245, 165, 36, 0.08);
  border-radius: 10px;
  color: #F5A524;
  font-size: 12.5px;
  line-height: 1.45;
}