/* ----------------------------------------------------------------
       Flying "+N pts" element. JS creates one of these positioned
       at the action's origin (e.g. a Track button), then animates it
       toward the topbar chip's centre. The chip pulses (existing
       .is-bumping animation) when it absorbs the points.
    ---------------------------------------------------------------- */
    .points-fly {
      position: fixed;
      z-index: 11000;
      pointer-events: none;
      padding: 7px 15px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--positive-bg-bright) 0%, var(--positive-bg-bright) 100%);
      color: var(--surface-cream);
      font-size: 14px;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      /* 2026-05-29 — bigger + slower arc so the +pts is unmistakable.
         Duration bumped 0.9s → 1.15s; the JS PULSE_DELAY that removes the
         fly was bumped in lockstep (must stay ≥ this duration, see
         points_fly_double_raf memory). */
      box-shadow: 0 8px 24px rgba(39, 90, 60, 0.36);
      transform: translate(-50%, -50%);
      transition: transform 1.15s cubic-bezier(0.5, 0.05, 0.35, 1),
                  opacity 1.15s ease;
      will-change: transform, opacity;
    }
    .points-fly-icon { display: inline-block; margin-right: 4px; }
    @media (prefers-reduced-motion: reduce) {
      .points-fly { transition-duration: 0.2s; }
    }

    /* ----------------------------------------------------------------
       Badge-award popup. Modal-ish card centered over the screen with
       a soft scrim; auto-dismisses after a short window or on click.
       The "never show me a badge award again" checkbox writes to
       localStorage (key: `agentTraining.suppressBadgePopup`) so the
       suppression is per-browser without needing a DB column.
    ---------------------------------------------------------------- */
    .badge-award-scrim {
      position: fixed;
      inset: 0;
      z-index: 12000;
      background: rgba(17, 27, 39, 0.55);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      animation: badgeAwardScrimFade 0.25s ease-out;
    }
    @keyframes badgeAwardScrimFade {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    .badge-award-card {
      position: relative;
      max-width: 380px;
      width: 100%;
      background: linear-gradient(180deg, var(--surface-warm-warning) 0%, var(--surface-cream) 100%);
      border: 1px solid var(--gold-accent);
      border-radius: 18px;
      padding: 28px 24px 22px;
      text-align: center;
      box-shadow: 0 30px 60px rgba(20, 30, 45, 0.35);
      animation: badgeAwardCardPop 0.45s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    }
    @keyframes badgeAwardCardPop {
      0%   { transform: scale(0.6) translateY(20px); opacity: 0; }
      100% { transform: scale(1)   translateY(0);   opacity: 1; }
    }
    .badge-award-close {
      position: absolute;
      top: 10px;
      right: 12px;
      background: transparent;
      border: 0;
      color: var(--brand-bronze);
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      padding: 4px 6px;
    }
    .badge-award-close:hover { color: var(--ink-navy); }
    .badge-award-eyebrow {
      font-size: 10.5px;
      font-weight: 900;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--brand-bronze);
      margin: 0 0 6px;
    }
    .badge-award-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 56px;
      height: 56px;
      margin: 4px auto 10px;
      border-radius: 50%;
      background: var(--ink-navy);
      color: var(--surface-cream);
      box-shadow: 0 0 0 4px rgba(207, 161, 53, 0.35);
    }
    .badge-award-icon svg { width: 30px; height: 30px; }
    .badge-award-title {
      margin: 0;
      font-size: 18px;
      font-weight: 900;
      color: var(--ink-navy);
      letter-spacing: 0.02em;
    }
    .badge-award-desc {
      margin: 8px 0 12px;
      font-size: 13px;
      line-height: 1.5;
      color: var(--ink-slate);
    }
    .badge-award-points {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin: 0 0 14px;
      padding: 5px 12px;
      background: linear-gradient(135deg, var(--positive-bg-bright) 0%, var(--positive-bg-bright) 100%);
      color: var(--surface-cream);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      border-radius: 999px;
    }
    .badge-award-suppress {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 12px;
      font-size: 11.5px;
      color: var(--ink-slate);
      cursor: pointer;
    }
    .badge-award-suppress input { cursor: pointer; }
    .badge-award-dismiss-btn {
      margin-top: 10px;
      padding: 8px 18px;
      border-radius: 999px;
      border: 1px solid var(--ink-navy);
      background: var(--ink-navy);
      color: var(--surface-cream);
      font-weight: 800;
      letter-spacing: 0.05em;
      cursor: pointer;
    }
    .badge-award-dismiss-btn:hover { background: var(--ink-slate); }
    .app-shell-tour-btn {
      min-height: 48px;
      padding: 0 14px 0 10px !important;
      border-radius: 999px !important;
      border-color: rgba(56, 81, 102, 0.16) !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(240,246,247,0.9) 100%) !important;
      color: var(--ink-slate) !important;
      font-size: 12px !important;
      font-weight: 900 !important;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
    }
    .app-shell-tour-btn:hover,
    .app-shell-tour-btn:focus-visible {
      transform: translateY(-1px);
      border-color: rgba(47, 106, 115, 0.28) !important;
      box-shadow: 0 12px 24px rgba(31, 55, 67, 0.1);
      background: var(--surface-white) !important;
    }
    .app-shell-logout-btn {
      width: 50px;
      height: 50px;
      min-width: 50px !important;
      padding: 0 !important;
      text-decoration: none;
      border-radius: 50%;
      border: 1px solid rgba(122, 46, 24, 0.22);
      background:
        radial-gradient(circle at 30% 22%, rgba(255,255,255,0.25), transparent 32%),
        linear-gradient(180deg, var(--rust-bright) 0%, var(--danger-text-deep) 100%);
      box-shadow: 0 12px 26px rgba(122, 46, 24, 0.22);
      transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
    }
    .app-shell-logout-btn:hover,
    .app-shell-logout-btn:focus-visible {
      transform: translateY(-1px);
      box-shadow: 0 17px 32px rgba(122, 46, 24, 0.26);
      filter: saturate(1.05);
    }
    .app-shell-logout-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      color: var(--surface-white);
      font-size: 27px;
      line-height: 1;
      transform: translateY(-1px);
    }
    .app-shell-help-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 999px;
      border: 1px solid rgba(39, 66, 87, 0.12);
      background: linear-gradient(135deg, var(--brand-deep) 0%, var(--info-teal-text-deep) 100%);
      color: var(--surface-white);
      font-size: 17px;
      font-weight: 900;
      line-height: 1;
      vertical-align: middle;
      padding: 0 0 1px 0;
      box-shadow: 0 8px 16px rgba(23, 56, 45, 0.12);
    }
    .app-shell-sidebar-overlay {
      position: fixed;
      inset: 0;
      z-index: 1240;
      background: rgba(16, 24, 32, 0.26);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.18s ease;
    }
    .app-shell-sidebar-overlay.open {
      opacity: 1;
      pointer-events: auto;
    }
    .app-shell-sidebar {
      position: fixed;
      top: 18px;
      left: 20px;
      bottom: 18px;
      z-index: 1260;
      width: min(320px, calc(100vw - 28px));
      padding: 18px;
      background: rgba(249, 251, 251, 0.96);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(212, 221, 226, 0.98);
      border-radius: 26px;
      box-shadow: 0 26px 54px rgba(21, 31, 40, 0.18);
      transform: translateX(calc(-100% - 28px));
      transition: transform 0.18s ease;
      display: flex;
      flex-direction: column;
      gap: 18px;
      overflow-y: auto;
    }
    .app-shell-sidebar.open {
      transform: translateX(0);
    }
    .app-shell-sidebar-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .app-shell-sidebar-title {
      margin: 0;
      text-transform: uppercase;
      font-family: var(--font-display);
      font-size: 22px;
      letter-spacing: 0.055em;
    }
    .app-shell-sidebar-close {
      width: 30px;
      height: 30px;
      min-width: 30px;
      padding: 0 !important;
      border-radius: 999px !important;
      border-color: rgba(74, 92, 104, 0.07) !important;
      background: rgba(255, 255, 255, 0.38) !important;
      color: var(--ink-muted) !important;
      box-shadow: none !important;
      font-size: 16px !important;
      font-weight: 650 !important;
      letter-spacing: 0 !important;
      text-transform: none !important;
    }
    .app-shell-section {
      display: grid;
      gap: 8px;
    }
    .app-shell-section-divider {
      height: 1px;
      margin: 8px 0 4px 0;
      background: linear-gradient(90deg, rgba(143, 174, 179, 0), rgba(143, 174, 179, 0.95), rgba(143, 174, 179, 0));
    }
    .app-shell-section-label {
      font-size: 11.5px;
      font-weight: 740;
      letter-spacing: 0.055em;
      text-transform: uppercase;
      color: var(--ink-muted);
    }
    .app-shell-nav-list {
      display: grid;
      gap: 5px;
    }
    .app-shell-nav-link {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 38px;
      padding: 5px 7px;
      border-radius: 13px;
      border: 1px solid transparent;
      background: transparent;
      color: var(--ink-navy);
      text-decoration: none;
      transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    }
    .app-shell-nav-link:hover {
      transform: translateY(-1px);
      border-color: rgba(43, 104, 75, 0.13);
      background:
        linear-gradient(90deg, rgba(43, 104, 75, 0.085) 0%, rgba(255, 255, 255, 0.72) 58%, rgba(255, 255, 255, 0.62) 100%);
      box-shadow: none;
    }
    .app-shell-nav-link.active {
      border-color: var(--info-teal-text-deep);
      background: linear-gradient(135deg, var(--ink-slate) 0%, var(--positive-text-deep) 100%);
      color: var(--surface-white);
      box-shadow: 0 14px 26px rgba(31, 77, 61, 0.16);
    }
    .app-shell-nav-link.loading {
      pointer-events: none;
      background: linear-gradient(90deg, rgba(231, 241, 248, 0.96) 0%, rgba(237, 245, 250, 0.96) 100%);
      border-color: var(--border-pale);
      color: var(--ink-slate);
    }
    .app-shell-nav-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 10px;
      background: transparent;
      font-size: 15px;
      font-weight: 650;
      flex: 0 0 28px;
    }
    .app-shell-nav-link.active .app-shell-nav-icon {
      background: rgba(255,255,255,0.14);
    }
    .app-shell-nav-list-tools {
      gap: 8px;
    }
    .app-shell-nav-list-tools .app-shell-nav-link {
      gap: 10px;
      min-height: 46px;
      padding: 8px 10px;
      border-radius: 16px;
      border-color: var(--border-cool);
      background: rgba(255,255,255,0.86);
      box-shadow: 0 4px 12px rgba(27, 39, 51, 0.025);
    }
    .app-shell-nav-list-tools .app-shell-nav-link:hover {
      border-color: var(--ink-cool-grey-pale);
      background:
        linear-gradient(90deg, rgba(46, 92, 122, 0.07) 0%, var(--surface-white) 56%, var(--surface-white) 100%);
      box-shadow: 0 10px 22px rgba(27, 39, 51, 0.08);
    }
    .app-shell-nav-list-tools .app-shell-nav-icon {
      width: 31px;
      height: 31px;
      border-radius: 11px;
      background: rgba(25, 42, 54, 0.08);
      font-size: 16px;
      flex-basis: 31px;
    }
    .app-shell-nav-list-tools .app-shell-nav-title {
      font-size: 13px;
      font-weight: 720;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }
    .app-shell-nav-link-admin {
      border-color: var(--warning-border-soft);
      background: linear-gradient(135deg, rgba(255, 245, 224, 0.98) 0%, rgba(255, 235, 198, 0.94) 100%);
      color: var(--bronze-deep);
      box-shadow: 0 10px 20px rgba(139, 96, 12, 0.08);
    }
    .app-shell-nav-link-admin:hover {
      border-color: var(--gold-accent);
      background: linear-gradient(135deg, var(--surface-cream) 0%, var(--surface-cream-soft) 100%);
      box-shadow: 0 14px 24px rgba(139, 96, 12, 0.14);
    }
    .app-shell-nav-link-admin .app-shell-nav-icon {
      background: rgba(135, 92, 9, 0.14);
      color: var(--brand-bronze);
    }
    .app-shell-nav-link-admin .app-shell-nav-subtitle {
      color: var(--brand-bronze);
    }
    .app-shell-nav-link-admin.active {
      border-color: var(--gold-tier-deep);
      background: linear-gradient(135deg, var(--gold-accent) 0%, var(--brand-bronze) 100%);
      color: var(--surface-warm-warning);
      box-shadow: 0 16px 28px rgba(117, 71, 0, 0.24);
    }
    .app-shell-nav-link-admin.active .app-shell-nav-icon {
      background: rgba(255,255,255,0.18);
      color: var(--surface-white);
    }
    .app-shell-nav-link-admin.active .app-shell-nav-subtitle {
      color: rgba(255, 247, 232, 0.82);
    }
    .app-shell-nav-copy {
      display: grid;
      gap: 1px;
      min-width: 0;
    }
    .app-shell-nav-title {
      font-size: 13px;
      font-weight: 650;
      letter-spacing: 0.015em;
      text-transform: none;
    }
    .app-shell-nav-title-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-left: 8px;
      padding: 2px 7px;
      border-radius: 999px;
      border: 1px solid rgba(183, 112, 18, 0.22);
      background: rgba(255, 239, 214, 0.94);
      color: var(--brand-bronze);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      vertical-align: middle;
    }
    .app-shell-nav-subtitle {
      font-size: 11px;
      line-height: 1.3;
      color: var(--ink-muted);
    }
    .app-shell-nav-link.active .app-shell-nav-subtitle {
      color: rgba(255,255,255,0.76);
    }
    .app-shell-nav-link.active .app-shell-nav-title-badge {
      border-color: rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.14);
      color: var(--surface-warm-warning);
    }
    .admin-topnav {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
      margin: 0 0 18px 0;
    }
    .admin-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid var(--border-warm-soft);
      background: rgba(255,255,255,0.68);
      color: var(--ink-green-muted);
      text-decoration: none;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }
    .admin-pill:hover {
      color: var(--ink-slate);
      border-color: var(--border-cool);
    }
    .admin-pill.active {
      background: var(--brand-deep);
      border-color: var(--brand-deep);
      color: var(--surface-white);
    }
    .admin-nav-group-label {
      display: inline-flex;
      align-items: center;
      padding: 0 4px;
      margin: 0 2px 0 0;
      color: var(--ink-slate);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      white-space: nowrap;
      user-select: none;
    }
    .workspace-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 40px;
      padding: 10px 16px;
      border-radius: 999px;
      background: rgba(255,255,255,0.74);
      border: 1px solid rgba(212, 221, 226, 0.95);
      color: var(--ink-navy);
      text-decoration: none;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
      transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    }
    .workspace-pill:hover {
      color: var(--accent-teal);
      border-color: var(--border-mid);
      background: rgba(255,255,255,0.94);
      transform: translateY(-1px);
      box-shadow: 0 8px 18px rgba(27, 39, 51, 0.08);
    }
    .workspace-pill.active {
      background: linear-gradient(135deg, var(--ink-navy) 0%, var(--info-teal-text-deep) 100%);
      border-color: var(--info-teal-text-deep);
      color: var(--surface-white);
      box-shadow: 0 12px 24px rgba(26, 50, 61, 0.2);
    }
    .workspace-pill.loading {
      background: linear-gradient(90deg, rgba(231, 241, 248, 0.96) 0%, rgba(237, 245, 250, 0.96) 100%);
      border-color: var(--border-pale);
      color: var(--ink-slate);
      pointer-events: none;
    }
    .workspace-equal-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      align-items: stretch;
    }
    .quiet-link {
      color: inherit;
      text-decoration: none;
      transition: color 0.15s ease;
    }
    .quiet-link:hover {
      color: var(--ink-slate);
    }
    .report-inline-link {
      /* Real link color — uses the existing positive-text-deep token
         (#1f5b34) so inline speaker mentions read as actual links and
         not just underlined body text. Plain-text mentions that the
         linkifier didn't wrap stay near-black, so the user can scan
         and immediately tell what's clickable. */
      color: var(--positive-text-deep);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 2px;
      transition: color 0.15s ease;
    }
    .report-inline-link:hover {
      color: var(--positive-border-dark);
    }
    textarea {
      width: 100%;
      min-height: 90px;
      box-sizing: border-box;
      font-family: var(--font-sans);
    }
    select, input[type="number"], input[type="text"], input[type="password"], textarea {
      padding: 11px 12px;
      border: 1px solid var(--border-pale);
      border-radius: 12px;
      width: 100%;
      box-sizing: border-box;
      background: rgba(255,255,255,0.94);
      color: var(--text-main);
      transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    }
    select:focus, input[type="number"]:focus, input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
      outline: none;
      border-color: var(--info-steel-soft);
      box-shadow: 0 0 0 3px rgba(47, 106, 115, 0.14);
      background: var(--surface-white);
    }
    table {
      width: 100%;
      border-collapse: collapse;
    }
    thead th {
      background: var(--surface-pale-cool);
      text-transform: uppercase;
      text-align: center;
      vertical-align: middle;
      font-size: 14px;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }
    th, td {
      padding: 8px;
      border-bottom: 1px solid var(--surface-mint);
      vertical-align: middle;
      font-family: var(--font-sans);
    }
    tbody tr:nth-child(even) {
      background: var(--table-stripe-bg);
    }
    tr.manual-highlight td {
      background: var(--surface-cream-soft) !important;
      border-top: 2px solid var(--gold-accent);
      border-bottom: 2px solid var(--gold-accent);
    }
    tr.manual-highlight:nth-child(even) td {
      background: var(--gold-pure) !important;
    }
    .result-block {
      margin-top: 26px;
      padding-top: 0;
    }
    .result-block:first-child {
      margin-top: 0;
    }
    .result-copy {
      white-space: pre-wrap;
      text-align: justify; hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty;
      line-height: 1.7;
    }
    .status-banner {
      display: none;
      margin-top: 14px;
      padding: 14px 16px;
      border-radius: 10px;
      border: 1px solid var(--warning-border-soft);
      background: var(--surface-warm);
      font-weight: 700;
      color: var(--bronze-deep);
    }
    td.justified {
      /* NOTE: class name is `.justified` for legacy reasons, but
         per the typography guidelines table cells render as
         text-align: left — justification reads badly in narrow,
         variable-width table columns. Hyphens kept so long words
         in cells still wrap inside their column instead of pushing
         the table wider. */
      text-align: left;
      hyphens: auto;
      -webkit-hyphens: auto;
      text-wrap: pretty;
      line-height: 1.6;
      vertical-align: middle;
    }
    td.center, th.center {
      text-align: center;
      vertical-align: middle;
    }
    .nowrap {
      white-space: nowrap;
    }
    a.button, button {
      background: var(--btn-primary-bg);
      color: var(--btn-primary-fg);
      padding: 12px var(--btn-pad-x-md);
      border-radius: var(--btn-radius);
      text-decoration: none;
      border: 1px solid var(--btn-primary-border);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: var(--btn-font-md);
      font-weight: var(--btn-weight);
      letter-spacing: var(--btn-letter);
      text-transform: uppercase;
      box-shadow: var(--btn-shadow-rest);
      transition: var(--btn-transition);
    }
    a.button:hover, button:hover {
      transform: translateY(-1px);
      box-shadow: var(--btn-shadow-hover);
      filter: brightness(1.02);
    }
    .button-generate,
    .button-secondary {
      background: var(--btn-secondary-bg);
      color: var(--btn-secondary-fg);
      border-color: var(--btn-secondary-border);
    }
    .button-light {
      background: var(--btn-ghost-bg) !important;
      color: var(--btn-ghost-fg) !important;
      border: 1px solid var(--btn-ghost-border) !important;
      box-shadow: none !important;
    }
    .button-light:hover {
      background: var(--btn-ghost-bg-hover) !important;
      color: var(--btn-ghost-fg) !important;
    }
    .button-nav,
    .more-button {
      background: var(--btn-accent-bg) !important;
      color: var(--btn-accent-fg) !important;
    }
    a.button.button-admin, button.button-admin {
      background: var(--btn-admin-bg);
      border-color: var(--btn-admin-border);
      text-align: center;
    }
    /* Non-priority System-Ops tools: a lighter, lower-emphasis variant so the
       secondary tools recede next to the priority (rust) admin buttons. */
    a.button.button-admin.button-admin-muted,
    button.button-admin.button-admin-muted {
      background: var(--surface-pale-cool, #eef1f5);
      color: var(--ink-slate, #5a6675);
      border-color: var(--border-cool, #d7dde6);
    }
    a.button.button-admin.button-admin-muted:hover,
    button.button-admin.button-admin-muted:hover {
      background: var(--surface-mint, #e7f1ea);
      border-color: var(--surface-mint-deep, #cfe0d4);
      color: var(--ink-navy, #1c3343);
    }
    .button-fixed {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      gap: 8px;
      white-space: nowrap;
    }
    .table-action-button {
      min-width: 112px;
      width: 112px;
      font-size: 12px;
      line-height: 1;
      text-align: center;
      box-sizing: border-box;
    }
    button[disabled] {
      background: var(--btn-disabled-bg);
      cursor: not-allowed;
    }
    .button-disabled {
      background: var(--btn-disabled-bg) !important;
      color: var(--btn-disabled-fg) !important;
      cursor: wait !important;
    }
    .pending-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, var(--border-pale) 0%, var(--info-steel-soft) 56%, var(--info-steel-soft) 100%);
      margin-right: 8px;
      box-shadow:
        0 0 0 1px rgba(72, 116, 145, 0.18),
        0 2px 7px rgba(45, 78, 106, 0.2);
      animation: pendingPulse 1.35s ease-in-out infinite;
      vertical-align: middle;
    }
    .button-fixed .pending-dot {
      margin-right: 0;
      width: 8px;
      height: 8px;
      flex: 0 0 8px;
    }
    .app-progress {
      display: none;
      margin-top: 14px;
      padding: 12px 14px;
      border: 1px solid var(--border-pale);
      border-radius: 12px;
      background: var(--surface-white);
    }
    .app-progress.active {
      display: block;
    }
    .app-progress-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .app-progress-label {
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--ink-slate);
    }
    .app-progress-percent {
      font-size: 12px;
      font-weight: 800;
      color: var(--ink-slate);
      white-space: nowrap;
    }
    .app-progress-track {
      margin-top: 10px;
      width: 100%;
      height: 10px;
      border-radius: 999px;
      background: var(--info-blue-surface-pale);
      overflow: hidden;
    }
    .app-progress-fill {
      width: 0%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--surface-mint-deep) 0%, var(--ink-slate) 100%);
      transition: width 0.25s ease;
    }
    .app-progress-detail {
      margin-top: 10px;
      font-size: 12px;
      line-height: 1.5;
      color: var(--ink-muted);
    }
    img.thumb {
      max-width: 360px;
      border-radius: 10px;
    }
    pre {
      white-space: pre-wrap;
      word-wrap: break-word;
      font-family: Arial, Helvetica, sans-serif;
    }
    .pill {
      display: inline-block;
      padding: 6px 10px;
      border-radius: 999px;
      background: var(--surface-mint);
      margin-right: 6px;
      margin-bottom: 6px;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
      font-weight: bold;
    }
    ul.spaced li {
      margin-bottom: 0.6rem;
      text-align: justify; hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty;
      line-height: 1.6;
    }
    details summary {
      cursor: pointer;
      font-weight: bold;
      margin-bottom: 12px;
    }
    .field-block {
      margin-bottom: 18px;
    }
    .grey-placeholder {
      color: var(--positive-surface-deep);
      font-style: italic;
      font-family: Arial, Helvetica, sans-serif;
    }
    table.sortable th {
      cursor: pointer;
    }
    .summary-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }
    .summary-item {
      background: var(--accent-purple-surface-pale);
      padding: 12px;
      border-radius: 8px;
    }
    .summary-item strong {
      display: block;
      margin-bottom: 0.45rem;
    }
    .v21-shell {
      display: grid;
      /* Single implicit column with no template defaults to `auto`, which
         sizes to the widest child's max-content — so a non-shrinking child
         (e.g. the /reports page header) blows the grid wider than the
         viewport and the page scrolls horizontally on narrow screens. An
         explicit minmax(0, 1fr) column caps the track at the container width
         and lets content reflow instead (same pattern as the v21-kpi-grid). */
      grid-template-columns: minmax(0, 1fr);
      gap: 20px;
    }
    .v21-hero {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at top right, rgba(159, 190, 113, 0.24), transparent 26%),
        linear-gradient(140deg, var(--surface-warm) 0%, var(--surface-white) 40%, var(--surface-pale-cool) 100%);
      border: 1px solid var(--border-soft);
    }
    .v21-hero::after {
      content: "";
      position: absolute;
      inset: auto -8% -28% auto;
      width: 280px;
      height: 280px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(47, 106, 115, 0.12), transparent 68%);
      pointer-events: none;
    }
    .v21-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 20px;
      flex-wrap: wrap;
    }
    .v21-eyebrow {
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--brand-bronze);
      font-weight: 700;
      font-size: 12px;
    }
    .v21-hero-copy {
      max-width: 920px;
    }
    .v21-hero-copy p {
      margin: 0;
      max-width: 760px;
      line-height: 1.65;
      color: var(--ink-slate);
      font-size: 16px;
    }
    .v21-kpi-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      gap: 12px;
      margin-top: 20px;
    }
    .v21-kpi {
      background: rgba(255,255,255,0.86);
      border: 1px solid var(--border-warm-soft);
      border-radius: 16px;
      padding: 14px;
    }
    .v21-kpi strong {
      display: block;
      font-size: 12px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-green-muted);
      margin-bottom: 10px;
    }
    .v21-kpi-value {
      font-size: 28px;
      font-weight: 800;
      line-height: 1;
    }
    .v21-grid-2 {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
      gap: 18px;
    }
    .v21-grid-2-equal {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }
    /* Source-order override: the un-mediated 2-col grid rules below
       (`.v21-grid-2`, `.workspace-equal-grid`, `.summary-grid`,
       `.speaker-summary-top`, `.speaker-summary-stats`) are defined
       LATER in the file than the @media (max-width: 960px) stack-rule
       at the top of the file, so the desktop 2-col layout used to win
       at every viewport (the bug that made the workspace home page show
       two cramped columns on phone). Re-state the mobile collapse here
       so source order puts the single-column rule LAST. Future grids:
       define them ABOVE this block, or add them here too. */
    @media (max-width: 960px) {
      .v21-grid-2,
      .v21-grid-2-equal,
      .workspace-equal-grid,
      .summary-grid,
      .speaker-summary-top,
      .speaker-summary-stats {
        grid-template-columns: 1fr !important;
      }
    }
    .v21-card-title {
      margin: 0;
      font-size: clamp(24px, 3vw, 31px);
      line-height: 1.08;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      font-family: var(--font-display);
    }
    .v21-subtitle {
      margin: 8px 0 0 0;
      color: var(--text-muted);
      line-height: 1.65;
    }
    .v21-action-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 18px;
    }
    .v21-muted-box {
      border: 1px solid var(--surface-mint-deep);
      border-radius: 16px;
      padding: 16px;
      background: linear-gradient(180deg, rgba(252, 250, 246, 0.98), rgba(247, 250, 249, 0.98));
    }
    .v21-list {
      display: grid;
      gap: 10px;
      margin-top: 14px;
    }
    .v21-list-item {
      display: flex;
      justify-content: space-between;
      align-items: stretch;
      gap: 16px;
      padding: 12px 14px;
      border-radius: 16px;
      background: rgba(255,255,255,0.82);
      border: 1px solid var(--border-pale);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
    }
    .v21-list-item-copy {
      min-width: 0;
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .v21-list-item-title {
      display: block;
      line-height: 1.35;
      text-wrap: balance;
    }
    .v21-list-item-action {
      flex: 0 0 104px;
      width: 104px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .v21-chip-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 14px;
    }
    .v21-chip {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 8px 12px;
      border: 1px solid var(--border-cool);
      background: rgba(244, 247, 248, 0.96);
      color: var(--ink-slate);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    }
    .v21-chip:hover {
      border-color: var(--ink-cool-grey-pale);
      color: var(--ink-navy);
      box-shadow: 0 8px 18px rgba(27, 39, 51, 0.07);
    }
    .v21-chip.selected {
      background: linear-gradient(135deg, var(--info-teal-bg-bright) 0%, var(--positive-text-deep) 100%);
      border-color: var(--info-teal-text-deep);
      color: var(--surface-white);
      box-shadow: 0 0 0 2px rgba(47, 106, 115, 0.12);
    }
    .v21-table-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }
    .v21-helper {
      margin: 0;
      color: var(--text-muted);
      line-height: 1.55;
      max-width: 520px;
    }
    .v21-details {
      display: block;
      width: 100%;
      box-sizing: border-box;
      border: 1px solid var(--surface-mint-deep);
      border-radius: 18px;
      background: rgba(242, 244, 245, 0.88);
      padding: 16px 18px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
    }
    .v21-details[open] {
      background: rgba(255,255,255,0.96);
      border-color: var(--surface-mint-deep);
      box-shadow: var(--shadow-soft);
    }
    .v21-details summary {
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin: 0;
    }
    .v21-details summary::-webkit-details-marker {
      display: none;
    }
    .v21-summary-copy {
      display: grid;
      gap: 4px;
      flex: 1 1 auto;
      min-width: 0;
    }
    .v21-summary-copy strong {
      font-size: 16px;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--ink-navy);
    }
    .v21-summary-copy span {
      color: var(--text-muted);
      line-height: 1.5;
      font-weight: 400;
    }
    .v21-summary-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      flex: 0 0 72px;
      width: 72px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ink-slate);
      text-align: right;
      white-space: nowrap;
    }
    .v21-details[open] .v21-summary-toggle::after {
      content: "Collapse";
    }
    .v21-details:not([open]) .v21-summary-toggle::after {
      content: "Expand";
    }
    .v21-details-body {
      margin-top: 16px;
    }
    .v21-inline-note {
      margin-top: 10px;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid var(--surface-mint-deep);
      background: var(--surface-pale-cool);
      color: var(--ink-slate);
      line-height: 1.55;
    }
    .v21-answer-box {
      min-height: 320px;
    }
    .v21-guidance-list {
      display: grid;
      gap: 10px;
      margin-top: 16px;
    }
    .v21-guidance-item {
      padding: 12px 14px;
      border-radius: 10px;
      background: var(--surface-pale-cool);
      border: 1px solid var(--border-pale);
      line-height: 1.55;
    }
    .app-dialog {
      width: min(520px, calc(100vw - 24px));
      border: 0;
      border-radius: 18px;
      padding: 0;
      box-shadow: 0 24px 60px rgba(24, 35, 49, 0.24);
    }
    .app-dialog::backdrop {
      background: rgba(17, 26, 36, 0.42);
    }
    .app-dialog-card {
      padding: 22px;
      background: var(--surface-white);
    }
    .app-dialog-title {
      /* 2026-05-22 — Calmer hierarchy. `!important` on typography
         pinned to defend against stray inherited rules reintroducing
         uppercase / letter-spacing. */
      margin: 0;
      font-size: 28px !important;
      line-height: 1.12 !important;
      font-weight: 740 !important;
      letter-spacing: 0 !important;
      text-transform: none !important;
      text-align: center;
      color: var(--ink-navy, var(--ink-navy));
    }
    /* 2026-05-22 — Soft icon chip rendered above the title via the
       new `iconHtml` option on appConfirm. Sage-toned circle with
       a quiet 1px border + 28px SVG inside. Default-hidden via
       `display: none` when iconHtml isn't passed. */
    .app-dialog-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      margin: 0 auto 14px;
      background: rgba(31, 107, 73, 0.10);
      border: 1px solid rgba(31, 107, 73, 0.22);
      color: var(--positive-text-deep, #2a6b3a);
    }
    .app-dialog-icon svg {
      width: 28px;
      height: 28px;
      display: block;
    }
    /* Slightly more breathing room around the card content when
       the icon is present — gives the icon + title + body the
       calm rhythm the modal copy is aiming for. */
    .app-dialog-card {
      padding-top: 28px !important;
      padding-bottom: 22px !important;
    }
    .app-dialog-body {
      margin-top: 14px;
      color: var(--ink-slate);
      line-height: 1.65;
      text-align: center;
      white-space: pre-line;
    }
    /* 2026-05-22 — When app-dialog-body contains HTML paragraphs
       (via `bodyHtml`), give them sensible spacing. The quote
       variant emphasizes a dynamic title between two prose blocks
       (used by the "Only one matching transcript found" modal). */
    .app-dialog-body p {
      margin: 0 0 10px;
    }
    .app-dialog-body p:last-child {
      margin-bottom: 0;
    }
    /* 2026-05-23 — Spinner shown inside the preset-choice dialog
       while the smart auto-select fetches ranked candidates.
       Inline-flex so the spinner sits beside its label inside the
       same `<p>` body, vertically centered. */
    .report-preset-dialog-spinner {
      display: inline-block;
      vertical-align: middle;
      width: 16px;
      height: 16px;
      margin-right: 10px;
      border-radius: 50%;
      border: 2px solid rgba(28, 51, 67, 0.18);
      border-top-color: var(--positive-text-deep, #2a6b3a);
      animation: report-preset-dialog-spin 0.7s linear infinite;
    }
    .report-preset-dialog-loading-text {
      display: inline-block;
      vertical-align: middle;
      color: var(--ink-muted, var(--ink-muted));
      font-style: italic;
    }
    @keyframes report-preset-dialog-spin {
      to { transform: rotate(360deg); }
    }
    @media (prefers-reduced-motion: reduce) {
      .report-preset-dialog-spinner { animation: none; }
    }
    /* 2026-05-22 — Matched-transcript card. Replaces the dramatic
       italic quote with a compact evidence-style card: thumbnail
       (or document-icon fallback) on the left, eyebrow + title +
       optional channel on the right. Sage-tinted left border + soft
       background to match the rest of the app's "matched item"
       language. */
    .app-dialog-body .app-dialog-match-card {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 14px auto 18px;
      padding: 10px 12px;
      background: rgba(31, 107, 73, 0.05);
      border: 1px solid rgba(31, 107, 73, 0.18);
      border-left: 3px solid var(--positive-border-dark, var(--positive-border-dark));
      border-radius: 8px;
      max-width: 100%;
      text-align: left;
    }
    /* 2026-05-22 — When the match card has a review to open, it
       renders as an `<a>` rather than a `<div>` and carries the
       `-clickable` modifier. Reset the anchor's default link
       chrome (color/underline) so the card still looks like a
       card, add a soft hover affordance, and bump cursor so the
       affordance is obvious. The `base_shell.js:1796` capture-
       phase /review/ handler intercepts the click — paints the
       loading overlay on the card (`.app-dialog-match-card` is
       in CARD_SELECTOR) and fires the +2 fly-in on first-open
       before navigating. */
    .app-dialog-body a.app-dialog-match-card-clickable {
      color: inherit;
      text-decoration: none;
      cursor: pointer;
      transition: background-color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
    }
    .app-dialog-body a.app-dialog-match-card-clickable:hover,
    .app-dialog-body a.app-dialog-match-card-clickable:focus-visible {
      background: rgba(31, 107, 73, 0.10);
      border-color: rgba(31, 107, 73, 0.34);
      box-shadow: 0 6px 14px rgba(31, 107, 73, 0.12);
      transform: translateY(-1px);
      outline: none;
    }
    .app-dialog-body .app-dialog-match-thumb {
      width: 80px;
      height: 45px;
      flex: 0 0 80px;
      object-fit: cover;
      border-radius: 4px;
      display: block;
    }
    .app-dialog-body .app-dialog-match-thumb-fallback {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(31, 107, 73, 0.10);
      color: var(--positive-text-deep, #2a6b3a);
      border: 1px solid rgba(31, 107, 73, 0.20);
    }
    .app-dialog-body .app-dialog-match-thumb-fallback svg {
      width: 22px;
      height: 22px;
    }
    .app-dialog-body .app-dialog-match-text {
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 0;
      flex: 1 1 auto;
    }
    .app-dialog-body .app-dialog-match-eyebrow {
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--positive-text-deep, #2a6b3a);
    }
    .app-dialog-body .app-dialog-match-title {
      font-size: 13.5px;
      font-weight: 600;
      color: var(--ink-navy, var(--ink-navy));
      line-height: 1.35;
    }
    .app-dialog-body .app-dialog-match-channel {
      font-size: 11.5px;
      color: var(--ink-muted, var(--ink-muted));
      line-height: 1.35;
    }
    /* Extra breathing room before the final rule paragraph so the
       sequence (intro → match card → rule → buttons) has clear
       visual rhythm. */
    .app-dialog-body .app-dialog-rule {
      margin-top: 6px;
    }
    .app-dialog-body .app-dialog-quote {
      font-style: italic;
      color: var(--ink-navy, var(--ink-navy));
      /* 2026-05-22 — More prominent quoted-title typography.
         Was 15px / regular / italic — only marginally bigger than
         body, which made the named transcript feel like another
         line of prose rather than the artifact the modal is
         pointing at. Now 19px / 650 weight / still italic +
         centered. The size jump (~+27%) is the main lift; 650
         (closer to "demi") keeps it crisp without competing with
         the 740-weight title. Slight vertical padding gives it
         breathing room from the lead-in / rule paragraphs. */
      font-size: 19px;
      font-weight: 650;
      line-height: 1.30;
      padding: 6px 0 8px;
      /* 2026-05-22 — Balance the wrap so titles split across 2
         equal-width lines instead of one long + one short. The
         `max-inline-size: 32ch` constraint encourages wrapping for
         moderately-long titles. `margin: 0 auto` keeps the
         constrained block centered. */
      max-inline-size: 32ch;
      margin: 0 auto;
      text-wrap: balance;
    }
    .app-dialog-body strong {
      color: var(--ink-navy, var(--ink-navy));
      font-weight: 700;
    }
    .app-dialog-actions {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-top: 20px;
      flex-wrap: wrap;
    }
    .app-dialog-actions .button,
    .app-dialog-actions .button-light,
    .app-dialog-actions .button-secondary,
    .app-dialog-actions .button-admin {
      min-width: 160px;
      justify-content: center;
      text-align: center;
    }
    /* 2026-05-23 — Honor the HTML `hidden` attribute on dialog
       action buttons. Without this, `[hidden]` is overridden by
       the `.button-light { display: inline-flex }` rules and shows
       up as an empty min-width pill in the action row — same
       trap noted in `feedback_hidden_attr_overridden_by_display_flex`. */
    .app-dialog-actions button[hidden] {
      display: none !important;
    }
    /* 2026-05-19 — `variant: 'soft'` for the tracked-question delete
       confirm and similar polite-ask modals: sentence-case + left-
       aligned chrome, smaller chip list for affected items, slimmer
       action buttons. Reuses every other dialog primitive so the
       opt-in is one class. */
    .app-dialog.app-dialog-soft .app-dialog-card {
      padding: 24px 26px 22px;
    }
    .app-dialog.app-dialog-soft .app-dialog-title {
      font-size: 22px;
      line-height: 1.3;
      font-weight: 600;
      text-transform: none;
      letter-spacing: 0;
      text-align: left;
      color: var(--ink-deep, #1c2733);
    }
    .app-dialog.app-dialog-soft .app-dialog-body {
      margin-top: 12px;
      text-align: left;
      white-space: normal;
      font-size: 15px;
      color: var(--ink-mid, var(--ink-slate));
    }
    .app-dialog.app-dialog-soft .app-dialog-body .app-dialog-paragraph {
      margin: 0 0 10px 0;
    }
    .app-dialog.app-dialog-soft .app-dialog-body .app-dialog-paragraph:last-child {
      margin-bottom: 0;
    }
    .app-dialog.app-dialog-soft .app-dialog-body .app-dialog-chip-list {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin: 4px 0 14px 0;
    }
    .app-dialog.app-dialog-soft .app-dialog-body .app-dialog-chip {
      display: inline-block;
      max-width: 100%;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(28, 51, 67, 0.06);
      border: 1px solid rgba(28, 51, 67, 0.10);
      color: var(--ink-deep, #1c2733);
      font-size: 13px;
      line-height: 1.4;
      word-break: break-word;
    }
    .app-dialog.app-dialog-soft .app-dialog-actions {
      justify-content: flex-end;
      gap: 8px;
      margin-top: 18px;
    }
    /* The global `button` rule at line 662 applies `text-transform:
       uppercase` and a wide `letter-spacing` to every <button> in the
       app. The soft-variant dialog wants sentence-case + tighter
       letters so the modal feels calmer; override here and reduce
       padding so the primary action doesn't loom over the body. */
    .app-dialog.app-dialog-soft .app-dialog-actions .button,
    .app-dialog.app-dialog-soft .app-dialog-actions .button-light,
    .app-dialog.app-dialog-soft .app-dialog-actions .button-secondary,
    .app-dialog.app-dialog-soft .app-dialog-actions .button-admin {
      min-width: 0;
      padding: 8px 14px;
      font-size: 14px;
      font-weight: 600;
      text-transform: none;
      letter-spacing: 0;
      box-shadow: none;
    }
    .app-dialog.app-dialog-soft .app-dialog-actions .button:hover,
    .app-dialog.app-dialog-soft .app-dialog-actions .button-light:hover,
    .app-dialog.app-dialog-soft .app-dialog-actions .button-secondary:hover,
    .app-dialog.app-dialog-soft .app-dialog-actions .button-admin:hover {
      box-shadow: none;
      transform: none;
    }
    .app-toast {
      position: fixed;
      left: 50%;
      top: 96px;
      right: auto;
      transform: translateX(-50%) translateY(10px);
      z-index: 14000;
      min-width: 240px;
      max-width: min(420px, calc(100vw - 48px));
      padding: 12px 16px;
      border-radius: 16px;
      border: 1px solid rgba(22, 34, 46, 0.12);
      background: rgba(255, 255, 255, 0.96);
      box-shadow: 0 18px 44px rgba(21, 27, 34, 0.18);
      color: var(--ink-navy);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.18s ease, transform 0.18s ease;
      backdrop-filter: blur(10px);
    }
    .app-shell-page-with-extension .app-toast {
      top: 124px;
    }
    .app-toast[hidden] {
      display: none !important;
    }
    .app-toast.is-visible {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
    .app-toast.is-anchored {
      transform: translateY(10px);
    }
    .app-toast.is-anchored.is-visible {
      transform: translateY(0);
    }
    .app-toast-title {
      display: block;
      margin-bottom: 4px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-muted);
    }
    .app-toast-message {
      display: block;
      font-size: 13px;
      line-height: 1.5;
      color: var(--ink-navy);
    }
    .app-card-open-shell {
      position: relative;
      isolation: isolate;
    }
    .app-card-open-overlay {
      position: absolute;
      inset: 0;
      z-index: 6;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px;
      border-radius: inherit;
      background: rgba(247, 251, 255, 0.68);
      color: var(--ink-slate);
      font-size: 11px;
      font-weight: 760;
      letter-spacing: 0.01em;
      text-transform: none;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.14s ease;
      text-align: center;
    }
    .app-card-opening {
      pointer-events: none;
    }
    .app-card-opening .app-card-open-overlay {
      opacity: 1;
    }
    .page-banner {
      margin: 14px 0 0 0;
      padding: 13px 15px;
      border-radius: 14px;
      border: 1px solid var(--border-cool);
      background: var(--surface-pale-cool);
      color: var(--ink-navy);
      font-weight: 700;
      text-align: center;
    }
    .page-banner-error {
      border-color: var(--danger-border-soft);
      background: var(--surface-warm-warning);
      color: var(--danger-text-deep);
    }
    .app-analysis-queue {
      position: fixed;
      top: 132px;
      right: 56px;
      z-index: 2390;
      display: block;
      width: min(400px, calc(100vw - 112px));
      pointer-events: none;
    }
    .app-shell-page-with-extension .app-analysis-queue {
      top: 188px;
    }
    .app-analysis-queue[hidden] {
      display: none !important;
    }
    .app-analysis-queue-card {
      width: 100%;
      padding: 12px;
      border: 1px solid var(--border-pale);
      border-radius: 16px;
      background: linear-gradient(180deg, var(--surface-white) 0%, var(--surface-pale-cool) 100%);
      box-shadow: 0 20px 46px rgba(24, 35, 49, 0.18);
      pointer-events: auto;
      max-height: 50vh;
      box-sizing: border-box;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .app-analysis-queue.collapsed {
      width: 50px;
    }
    .app-analysis-queue.collapsed .app-analysis-queue-card {
      padding: 0;
      width: 50px;
      height: 50px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: var(--surface-white);
      border: 1px solid var(--ink-darkest);
      box-shadow: 0 14px 26px rgba(17, 17, 17, 0.12);
    }
    .app-analysis-queue-title {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--ink-muted);
    }
    .app-analysis-queue-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      padding-bottom: 10px;
      margin-bottom: 10px;
      border-bottom: 1px solid rgba(216, 225, 234, 0.9);
      background: linear-gradient(180deg, rgba(251, 252, 253, 0.98) 0%, rgba(248, 251, 253, 0.96) 100%);
      position: relative;
      z-index: 2;
    }
    .app-analysis-queue-head-main {
      min-width: 0;
      display: grid;
      gap: 4px;
      flex: 1 1 auto;
    }
    .app-analysis-queue-summary {
      font-size: 11px;
      line-height: 1.35;
      color: var(--ink-muted);
    }
    .app-analysis-queue-head-actions {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex: 0 0 auto;
    }
    .app-analysis-queue-clear {
      border: 1px solid var(--border-cool);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.9);
      color: var(--ink-slate);
      padding: 5px 10px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.03em;
      text-transform: none;
      cursor: pointer;
      transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
    }
    .app-analysis-queue-clear:hover {
      border-color: var(--border-mid);
      background: var(--surface-white);
      color: var(--ink-navy);
    }
    .app-analysis-queue-clear[hidden] {
      display: none !important;
    }
    .app-analysis-queue-toggle {
      width: 26px;
      height: 26px;
      border: 1px solid var(--border-cool);
      border-radius: 999px;
      background: rgba(255,255,255,0.92);
      color: var(--ink-slate);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      cursor: pointer;
      line-height: 1;
      flex: 0 0 auto;
    }
    .app-analysis-queue-toggle:hover {
      border-color: var(--border-mid);
      color: var(--ink-navy);
      background: var(--surface-white);
    }
    .app-analysis-queue-collapsed-icon {
      position: relative;
      display: none;
      width: 42px;
      height: 42px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: var(--ink-darkest);
      box-shadow: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    }
    .app-analysis-queue-collapsed-icon[hidden] {
      display: none !important;
    }
    .app-analysis-queue-collapsed-icon svg {
      width: 36px;
      height: 36px;
      display: block;
      filter: none;
      transform: translateX(1.5px);
    }
    .app-analysis-queue.collapsed.queue-ready-alert .app-analysis-queue-card {
      background: var(--rust-deep);
      border-color: var(--rust-deep);
      box-shadow: 0 16px 30px rgba(180, 35, 24, 0.32);
    }
    .app-analysis-queue.collapsed.queue-ready-alert .app-analysis-queue-collapsed-icon {
      color: var(--surface-white);
    }
    .app-analysis-queue.collapsed .app-analysis-queue-head {
      display: none;
    }
    .app-analysis-queue.collapsed .app-analysis-queue-list {
      display: none;
    }
    .app-analysis-queue.collapsed .app-analysis-queue-collapsed-icon {
      display: block;
    }
    .app-analysis-queue-list {
      display: grid;
      gap: 9px;
      margin-top: 0;
      max-height: calc(50vh - 74px);
      overflow: auto;
      padding-right: 6px;
      padding-bottom: 14px;
      box-sizing: border-box;
      scrollbar-gutter: stable;
    }
    .app-analysis-queue-row {
      position: relative;
      padding: 7px 8px 6px;
      border: 1px solid var(--border-pale);
      border-radius: 13px;
      background: rgba(255, 255, 255, 0.88);
      transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
    }
    .app-analysis-queue-row[data-queue-state='queued'] {
      border-color: var(--border-pale);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 250, 253, 0.96) 100%);
      box-shadow: 0 10px 20px rgba(80, 99, 121, 0.05);
    }
    .app-analysis-queue-row[data-queue-state='running'] {
      border-color: var(--border-cool);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(242, 248, 252, 0.98) 100%);
      box-shadow: 0 12px 24px rgba(46, 92, 122, 0.08);
    }
    .app-analysis-queue-row[data-queue-state='finalizing'] {
      border-color: var(--surface-mint-deep);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(244, 250, 246, 0.98) 100%);
      box-shadow: 0 12px 24px rgba(91, 138, 106, 0.08);
    }
    .app-analysis-queue-row[data-queue-state='completed'] {
      border-color: rgba(229, 236, 243, 0.96);
      background: linear-gradient(180deg, rgba(253, 254, 255, 0.98) 0%, rgba(250, 252, 254, 0.96) 100%);
      box-shadow: none;
    }
    .app-analysis-queue-row[data-queue-state='failed'] {
      border-color: var(--danger-border-soft);
      background: linear-gradient(180deg, rgba(255, 250, 250, 0.98) 0%, rgba(252, 244, 244, 0.96) 100%);
    }
    .app-analysis-queue-row.is-openable {
      cursor: pointer;
    }
    .app-analysis-queue-row.is-openable:hover,
    .app-analysis-queue-row.is-openable:focus-visible {
      border-color: var(--border-cool);
      box-shadow: 0 14px 30px rgba(24, 35, 45, 0.1);
      outline: none;
    }
    .app-analysis-queue-close {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 24px;
      height: 24px;
      border: 1px solid var(--border-cool);
      border-radius: 999px;
      background: rgba(255,255,255,0.9);
      color: var(--ink-muted);
      box-shadow: 0 2px 4px rgba(26, 38, 52, 0.05);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      cursor: pointer;
      line-height: 1;
    }
    .app-analysis-queue-close:hover {
      border-color: var(--border-mid);
      color: var(--ink-navy);
      background: var(--surface-white);
      box-shadow: 0 4px 8px rgba(26, 38, 52, 0.08);
    }
    .app-analysis-queue-row-main {
      display: grid;
      grid-template-columns: 120px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      padding-right: 28px;
    }
    .app-analysis-queue-thumb-column {
      display: flex;
      align-items: center;
    }
    .app-analysis-queue-status-column {
      min-width: 0;
      display: grid;
      gap: 6px;
    }
    .app-analysis-queue-info {
      display: grid;
      gap: 2px;
      min-width: 0;
      max-width: 100%;
    }
    .app-analysis-queue-row-title {
      width: 100%;
      font-size: 13px;
      line-height: 1.3;
      font-weight: 800;
      color: var(--ink-navy);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-wrap: balance;
    }
    .app-analysis-queue-thumb,
    .app-analysis-queue-thumb-placeholder {
      width: 120px;
      height: 68px;
      border-radius: 10px;
      display: block;
    }
    .app-analysis-queue-thumb {
      object-fit: cover;
      background: var(--border-pale);
      border: 1px solid var(--border-pale);
    }
    .app-analysis-queue-thumb-placeholder {
      background: linear-gradient(135deg, var(--surface-mint) 0%, var(--border-cool) 100%);
      border: 1px solid var(--border-pale);
    }
    .app-analysis-queue-row.queue-job-report .app-analysis-queue-thumb,
    .app-analysis-queue-row.queue-job-report .app-analysis-queue-thumb-placeholder {
      border: 2px solid rgba(204, 125, 46, 0.65);
      box-shadow: 0 0 0 1px rgba(243, 214, 177, 0.58) inset;
    }
    .app-analysis-queue-row.queue-job-material .app-analysis-queue-thumb,
    .app-analysis-queue-row.queue-job-material .app-analysis-queue-thumb-placeholder {
      border: 2px solid rgba(177, 140, 66, 0.62);
      box-shadow: 0 0 0 1px rgba(242, 232, 199, 0.6) inset;
    }
    .app-analysis-queue-row.queue-job-cross .app-analysis-queue-thumb,
    .app-analysis-queue-row.queue-job-cross .app-analysis-queue-thumb-placeholder {
      border: 2px solid rgba(70, 102, 168, 0.62);
      box-shadow: 0 0 0 1px rgba(197, 211, 242, 0.56) inset;
    }
    .app-analysis-queue-row.queue-job-debate .app-analysis-queue-thumb,
    .app-analysis-queue-row.queue-job-debate .app-analysis-queue-thumb-placeholder {
      border: 2px solid rgba(120, 89, 170, 0.64);
      box-shadow: 0 0 0 1px rgba(216, 199, 243, 0.56) inset;
    }
    .app-analysis-queue-row.queue-job-private-transcript .app-analysis-queue-thumb,
    .app-analysis-queue-row.queue-job-private-transcript .app-analysis-queue-thumb-placeholder {
      border: 2px solid rgba(84, 136, 110, 0.62);
      box-shadow: 0 0 0 1px rgba(203, 230, 214, 0.56) inset;
    }
    .app-analysis-queue-row.queue-job-transcript .app-analysis-queue-thumb,
    .app-analysis-queue-row.queue-job-transcript .app-analysis-queue-thumb-placeholder {
      border: 2px solid rgba(108, 130, 158, 0.54);
      box-shadow: 0 0 0 1px rgba(215, 226, 238, 0.52) inset;
    }
    .app-analysis-queue-status-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 8px;
      align-items: center;
    }
    .app-analysis-queue-status-row.has-action {
      grid-template-columns: minmax(0, 1fr) max-content;
      align-items: center;
      gap: 10px;
    }
    .app-analysis-queue-progress {
      margin-top: 0;
      background: rgba(255, 255, 255, 0.72);
      border-color: rgba(218, 226, 235, 0.82);
      padding: 6px 8px;
      min-height: 0;
      min-width: 0;
      box-sizing: border-box;
      display: grid;
      gap: 3px;
      align-self: stretch;
    }
    .app-analysis-queue-progress .app-progress-top,
    .app-analysis-queue-progress .app-progress-track,
    .app-analysis-queue-progress .app-progress-detail {
      margin-top: 0;
    }
    .app-analysis-queue-progress .app-progress-top {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 4ch;
      align-items: center;
      column-gap: 0;
    }
    .app-analysis-queue-progress .app-progress-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0;
      text-transform: none;
      color: var(--ink-slate);
      min-width: 0;
      justify-self: center;
      text-align: center;
    }
    .app-analysis-queue-progress .app-progress-percent {
      font-size: 10px;
      color: var(--ink-slate);
      width: 4ch;
      justify-self: end;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }
    .app-analysis-queue-progress .app-progress-track {
      height: 6px;
      background: var(--surface-pale-cool);
      margin-top: 1px;
    }
    .app-analysis-queue-progress .app-progress-detail {
      font-size: 10.5px;
      line-height: 1.3;
      color: var(--ink-muted);
      display: block;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .app-analysis-queue-progress.is-complete .app-progress-label {
      font-size: 10px;
      letter-spacing: 0;
    }
    .app-analysis-queue-progress.is-complete-inline {
      padding-top: 5px;
      padding-bottom: 5px;
      gap: 0;
    }
    .app-analysis-queue-progress.is-complete-inline .app-progress-top {
      display: flex;
      align-items: center;
      min-height: 22px;
      justify-content: flex-start;
      min-width: 0;
    }
    .app-analysis-queue-progress.is-complete-inline .app-progress-label {
      min-width: 0;
      justify-self: auto;
      text-align: left;
    }
    .app-analysis-queue-progress.is-complete-inline .app-analysis-queue-status-inline--completed {
      white-space: nowrap;
    }
    .app-analysis-queue-progress.is-queued .app-progress-fill {
      background: linear-gradient(90deg, var(--border-pale) 0%, var(--ink-muted) 100%);
    }
    .app-analysis-queue-progress.is-running .app-progress-fill {
      background: linear-gradient(90deg, var(--surface-mint-deep) 0%, var(--ink-slate) 100%);
    }
    .app-analysis-queue-progress.is-finalizing .app-progress-fill {
      background: linear-gradient(90deg, var(--positive-surface-deep) 0%, var(--brand-deep) 100%);
    }
    /* 2026-05-23 — Stuck-job state. A running/queued item that
       hasn't seen a server-side update in 8 min gets `.is-stuck`
       on the row. Muted amber tone reads as "needs attention"
       without screaming. */
    .app-analysis-queue-row.is-stuck {
      background: linear-gradient(135deg, var(--surface-warm) 0%, var(--surface-white) 60%);
      border-color: var(--border-warm-soft);
    }
    .app-analysis-queue-row.is-stuck .app-progress-fill {
      background: linear-gradient(90deg, #cf7d2d 0%, var(--brand-bronze) 100%);
      opacity: 0.65;
    }
    .app-analysis-queue-row.is-stuck .app-analysis-queue-status-pill {
      background: var(--surface-warm);
      color: var(--brand-bronze);
      border-color: #cf7d2d;
    }
    .app-analysis-queue-stuck-retry {
      background: var(--ink-slate) !important;
      color: var(--surface-white) !important;
      border-color: var(--ink-slate) !important;
      white-space: nowrap;
    }
    .app-analysis-queue-progress.is-complete .app-progress-fill,
    .app-analysis-queue-progress.is-completed .app-progress-fill {
      background: linear-gradient(90deg, var(--border-pale) 0%, var(--ink-cool-grey) 100%);
    }
    .app-analysis-queue-progress.is-complete,
    .app-analysis-queue-progress.is-completed {
      background: rgba(250, 252, 254, 0.86);
      border-color: rgba(227, 234, 241, 0.92);
    }
    .app-analysis-queue-progress.is-complete .app-progress-track,
    .app-analysis-queue-progress.is-completed .app-progress-track {
      background: var(--surface-pale-cool);
    }
    .app-analysis-queue-progress.is-failed .app-progress-fill {
      background: linear-gradient(90deg, var(--danger-border-soft) 0%, var(--rust-deep) 100%);
    }
    .app-analysis-queue-status-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 9px;
      border-radius: 999px;
      border: 1px solid transparent;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .app-analysis-queue-status-pill .pending-dot {
      margin: 0;
      flex: 0 0 auto;
    }
    .app-analysis-queue-status-pill--queued {
      border-color: var(--border-pale);
      background: var(--surface-pale-cool);
      color: var(--ink-muted);
    }
    .app-analysis-queue-status-pill--running {
      border-color: var(--border-pale);
      background: var(--surface-pale-cool);
      color: var(--ink-slate);
    }
    .app-analysis-queue-status-pill--finalizing {
      border-color: var(--surface-mint-deep);
      background: var(--surface-pale-cool);
      color: var(--positive-text-deep);
    }
    .app-analysis-queue-status-pill--completed {
      border-color: var(--border-pale);
      background: var(--surface-pale-cool);
      color: var(--ink-muted);
      padding-left: 7px;
      padding-right: 7px;
      font-size: 9.5px;
      letter-spacing: 0.04em;
    }
    .app-analysis-queue-status-inline {
      display: inline-block;
      min-width: 0;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      color: var(--ink-muted);
      line-height: 1.2;
    }
    .app-analysis-queue-status-inline--completed {
      color: var(--ink-muted);
    }
    .app-analysis-queue-status-pill--failed {
      border-color: var(--danger-border-soft);
      background: var(--surface-warm-warning);
      color: var(--danger-text-deep);
    }
    .app-analysis-queue-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 0;
      min-height: 0;
      flex: 0 0 auto;
      align-self: center;
      min-width: 0;
    }
    .app-analysis-queue-actions.is-empty {
      display: none;
    }
    .app-analysis-queue-open,
    .app-analysis-queue-open.button,
    .app-analysis-queue-open.button-fixed,
    .app-analysis-queue-retry,
    .app-analysis-queue-retry.button,
    .app-analysis-queue-retry.button-fixed,
    .app-analysis-queue-reupload,
    .app-analysis-queue-reupload.button,
    .app-analysis-queue-reupload.button-fixed {
      display: inline-flex;
      min-width: 58px;
      width: auto;
      min-height: 22px;
      padding: 0 8px;
      font-size: 9.5px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      border: 0;
      background: var(--ink-darkest);
      color: var(--surface-white);
      box-shadow: 0 6px 14px rgba(17, 17, 17, 0.1);
      justify-content: center;
      text-align: center;
      box-sizing: border-box;
    }
    .app-analysis-queue-reupload,
    .app-analysis-queue-reupload.button,
    .app-analysis-queue-reupload.button-fixed {
      background: var(--danger-text-deep);
    }
    .app-analysis-queue-reupload:hover,
    .app-analysis-queue-reupload.button:hover,
    .app-analysis-queue-reupload.button-fixed:hover {
      background: var(--danger-text-deep);
      color: var(--surface-white);
      filter: brightness(1.08);
    }
    .app-analysis-queue-open,
    .app-analysis-queue-open.button,
    .app-analysis-queue-open.button-fixed {
      width: auto;
      min-width: 58px;
    }
    .app-analysis-queue-open:hover,
    .app-analysis-queue-open.button:hover,
    .app-analysis-queue-open.button-fixed:hover {
      background: var(--ink-darkest);
      color: var(--surface-white);
    }
    .app-analysis-queue-retry,
    .app-analysis-queue-retry.button,
    .app-analysis-queue-retry.button-fixed {
      border: 1px solid var(--border-cool);
      background: rgba(255, 255, 255, 0.92);
      color: var(--ink-navy);
      box-shadow: none;
    }
    .app-analysis-queue-retry:hover,
    .app-analysis-queue-retry.button:hover,
    .app-analysis-queue-retry.button-fixed:hover {
      border-color: var(--border-mid);
      background: var(--surface-white);
      color: var(--ink-navy);
    }
    .app-analysis-queue-open[hidden] {
      display: none !important;
    }
    .app-analysis-queue-meta {
      font-size: 11px;
      color: var(--ink-muted);
      line-height: 1.35;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .app-analysis-queue-row-title,
    .app-analysis-queue-meta,
    .app-analysis-queue-progress .app-progress-label,
    .app-analysis-queue-progress .app-progress-percent,
    .app-analysis-queue-progress .app-progress-detail {
      user-select: text;
      -webkit-user-select: text;
    }
    @media (max-width: 720px) {
      .app-analysis-queue {
        top: 116px;
        right: 18px;
        left: 18px;
        width: auto;
      }
      .app-shell-page-with-extension .app-analysis-queue {
        top: 170px;
      }
      .app-toast {
        left: 50%;
        top: 96px;
        max-width: calc(100vw - 24px);
      }
      .app-shell-page-with-extension .app-toast {
        top: 128px;
      }
      .app-analysis-queue {
        width: min(100%, 382px);
      }
      .app-analysis-queue-card {
        padding: 10px;
      }
      .app-analysis-queue-head {
        gap: 8px;
        padding-bottom: 8px;
        margin-bottom: 8px;
      }
      .app-analysis-queue-head-actions {
        gap: 6px;
      }
      .app-analysis-queue-row-main {
        grid-template-columns: 102px minmax(0, 1fr);
        gap: 8px;
        padding-right: 24px;
      }
      .app-analysis-queue-thumb,
      .app-analysis-queue-thumb-placeholder {
        width: 102px;
        height: 58px;
      }
      .app-analysis-queue-clear {
        padding-left: 8px;
        padding-right: 8px;
      }
    }
    @media (max-width: 560px) {
      .app-analysis-queue-row-main {
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 8px;
      }
      .app-analysis-queue-thumb,
      .app-analysis-queue-thumb-placeholder {
        width: 92px;
        max-width: none;
        height: 54px;
      }
      .app-analysis-queue-status-row,
      .app-analysis-queue-status-row.has-action {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
      }
      .app-analysis-queue-open,
      .app-analysis-queue-open.button,
      .app-analysis-queue-open.button-fixed,
      .app-analysis-queue-retry,
      .app-analysis-queue-retry.button,
      .app-analysis-queue-retry.button-fixed {
        width: auto;
      }
    }
    .v21-compact-table td,
    .v21-compact-table th {
      padding-top: 10px;
      padding-bottom: 10px;
    }
    .speaker-summary-top {
      display: grid;
      grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr);
      gap: 12px;
      grid-column: 1 / span 3;
      align-items: stretch;
    }
    .speaker-summary-stats {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-auto-rows: minmax(112px, auto);
      gap: 12px;
    }
    .speaker-summary-links {
      display: flex;
      align-items: stretch;
      height: calc(112px + 112px + 12px + 8px);
    }
    .speaker-link-bubble {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin: 0 10px;
      width: 100%;
    }
    .speaker-link-copy {
      flex: 1 1 auto;
      min-width: 0;
    }
    .speaker-link-photo {
      width: 112px;
      height: 112px;
      border-radius: 14px;
      object-fit: cover;
      background: var(--surface-pale-cool);
      border: 1px solid var(--surface-mint-deep);
      flex: 0 0 112px;
    }
    .pill-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 8px;
    }
    .section-title.centered {
      text-align: center;
    }
    .section-divider {
      border-top: 1px solid var(--border-cool);
      margin-top: 22px;
      padding-top: 18px;
    }
    .section-spaced {
      margin-top: 24px;
      margin-bottom: 0;
    }
    .video-card-link {
      display: inline-block;
      color: inherit;
      text-decoration: none;
      max-width: 100%;
    }
    .video-card-link:hover .mosaic-thumb,
    .video-card-link:focus .mosaic-thumb {
      transform: translateY(-1px);
      box-shadow: 0 4px 18px rgba(0,0,0,0.12);
    }
    .mosaic-thumb {
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    .page-spotlight-overlay {
      position: fixed;
      inset: 0;
      z-index: 2500;
      background: rgba(14, 19, 18, 0.42);
      backdrop-filter: blur(5px);
      opacity: 0;
      pointer-events: none;
      visibility: hidden;
      transition: opacity 0.18s ease, visibility 0.18s ease;
    }
    .page-spotlight-overlay.open {
      opacity: 1;
      pointer-events: auto;
      visibility: visible;
    }
    #page-spotlight-card.page-spotlight-card {
      position: fixed;
      z-index: 2504;
      box-sizing: border-box;
      width: min(390px, calc(100vw - 24px));
      max-width: 390px;
      padding: 15px 16px 14px;
      text-align: center;
      border-radius: 18px;
      box-shadow: 0 16px 38px rgba(0, 0, 0, 0.15);
      opacity: 0;
      pointer-events: none;
      visibility: hidden;
      transition: top 0.22s ease, left 0.22s ease, opacity 0.18s ease, transform 0.18s ease;
    }
    #page-spotlight-card.page-spotlight-card.open {
      opacity: 1;
      pointer-events: auto;
      visibility: visible;
    }
    #page-spotlight-card.is-transitioning {
      animation: pageSpotlightCardIn 0.18s ease both;
    }
    @keyframes pageSpotlightCardIn {
      from {
        opacity: 0.86;
        transform: translateY(4px) scale(0.985);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
    #page-spotlight-eyebrow.page-spotlight-eyebrow {
      justify-content: center;
      text-align: center;
      font-size: 10.5px;
      letter-spacing: 0.08em;
    }
    #page-spotlight-title.page-spotlight-title {
      margin: 5px 0 0;
      text-align: center;
      font-size: 20px;
      line-height: 1.12;
      letter-spacing: 0.045em;
    }
    #page-spotlight-body.page-spotlight-body {
      margin: 7px 0 0;
      text-align: center;
      color: var(--positive-text-deep);
      font-size: 13px;
      line-height: 1.45;
    }
    #page-spotlight-actions.page-spotlight-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 10px;
    }
    #page-spotlight-close.page-spotlight-close-btn {
      min-width: 92px !important;
      min-height: 34px !important;
      padding: 8px 11px !important;
      box-shadow: 0 8px 18px rgba(17, 17, 17, 0.12);
      font-size: 12px !important;
      transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease, background 0.16s ease;
    }
    #page-spotlight-close.page-spotlight-close-btn:hover {
      transform: translateY(-1px);
    }
    .page-spotlight-elevated-container {
      position: relative;
      z-index: 2501;
    }
    .page-spotlight-highlight {
      position: relative;
      z-index: 2502;
      border-color: rgba(155, 122, 47, 0.52) !important;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.97) !important;
      box-shadow: 0 0 0 2px rgba(174, 143, 72, 0.78), 0 0 0 8px rgba(174, 143, 72, 0.16), 0 16px 32px rgba(49, 36, 10, 0.16) !important;
      transform: translateY(-1px);
      transition: box-shadow 0.22s ease, background 0.22s ease, transform 0.22s ease;
    }
    #page-spotlight-card.page-spotlight-confirmation {
      text-align: center;
    }
    #page-spotlight-card.page-spotlight-confirmation #page-spotlight-eyebrow {
      display: none;
    }
    #page-spotlight-card.page-spotlight-confirmation #page-spotlight-title {
      margin-top: 0 !important;
      text-align: center !important;
    }
    #page-spotlight-card.page-spotlight-confirmation #page-spotlight-body {
      text-align: center !important;
    }
    #page-spotlight-card.page-spotlight-confirmation #page-spotlight-body ol {
      margin: 12px auto 0;
      padding-left: 24px;
      text-align: left;
      display: inline-block;
      max-width: min(520px, 100%);
    }
    #page-spotlight-card.page-spotlight-confirmation #page-spotlight-body li + li {
      margin-top: 6px;
    }
    #page-spotlight-card.page-spotlight-confirmation #page-spotlight-actions {
      justify-content: center !important;
    }
    @media (max-width: 520px) {
      #page-spotlight-card.page-spotlight-card {
        width: min(356px, calc(100vw - 20px));
        padding: 13px;
      }
      #page-spotlight-title.page-spotlight-title {
        font-size: 18px;
      }
    }
    .global-agent-chat-launcher-dock {
      position: fixed;
      right: 32px;
      bottom: 34px;
      z-index: 1200;
    }
    .global-agent-chat-launcher-group {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .global-agent-chat-launcher {
      position: static;
      display: inline-flex;
      align-items: center;
      gap: 14px;
      min-width: 238px;
      max-width: calc(100vw - 48px);
      padding: 9px 10px 9px 9px;
      border: 1px solid rgba(37, 74, 58, 0.16);
      border-radius: 18px;
      background:
        radial-gradient(circle at 12% 8%, rgba(82, 124, 98, 0.13), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(236, 243, 239, 0.94) 100%);
      color: var(--brand-deep);
      font-size: 12px;
      font-weight: 720;
      letter-spacing: 0;
      text-transform: none;
      cursor: pointer;
      box-shadow:
        0 10px 24px rgba(27, 48, 39, 0.11),
        inset 0 1px 0 rgba(255,255,255,0.86);
      backdrop-filter: blur(12px);
      transition: min-width 0.24s cubic-bezier(.2,.8,.2,1), gap 0.24s cubic-bezier(.2,.8,.2,1), transform 0.22s cubic-bezier(.2,.8,.2,1), box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
    }
    .global-agent-chat-launcher:hover {
      min-width: 260px;
      transform: translateY(-3px);
      border-color: rgba(37, 74, 58, 0.28);
      background:
        radial-gradient(circle at 12% 8%, rgba(82, 124, 98, 0.18), transparent 30%),
        linear-gradient(180deg, var(--surface-white) 0%, var(--surface-mint) 100%);
      box-shadow:
        0 14px 30px rgba(27, 48, 39, 0.15),
        0 0 0 4px rgba(39, 93, 68, 0.055),
        inset 0 1px 0 rgba(255,255,255,0.92);
    }
    .global-agent-chat-launcher:active {
      transform: translateY(-1px);
    }
    .global-agent-chat-launcher:focus-visible {
      outline: 3px solid rgba(39, 93, 68, 0.2);
      outline-offset: 3px;
    }
    .global-agent-chat-launcher.hidden {
      display: none;
    }
    .global-agent-chat-launcher-group.launcher-hidden .global-agent-chat-launcher,
    .global-agent-chat-launcher-group.launcher-hidden .global-agent-chat-launcher-new {
      display: none;
    }
    .global-agent-chat-launcher-group.is-thinking .global-agent-chat-launcher-pulse {
      background: var(--warning-text, #9a6a00);
      box-shadow: 0 0 0 0 rgba(154, 106, 0, 0.28);
      animation-duration: 1.2s;
    }
    .global-agent-chat-launcher-group.is-thinking .global-agent-chat-launcher-dot {
      background: var(--warning-text, #9a6a00);
      box-shadow: 0 0 0 2px rgba(154, 106, 0, 0.12);
    }
    .global-agent-chat-launcher-orb {
      position: relative;
      width: 42px;
      height: 42px;
      flex: 0 0 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(23, 56, 45, 0.18);
      border-radius: 14px;
      background:
        linear-gradient(180deg, var(--brand-deep) 0%, var(--positive-text-deep) 100%);
      color: var(--surface-pale-cool);
      font-size: 11px;
      font-weight: 820;
      letter-spacing: 0.04em;
      box-shadow: 0 10px 22px rgba(23, 56, 45, 0.18);
    }
    .global-agent-chat-launcher-pulse {
      position: absolute;
      right: -2px;
      top: -2px;
      width: 8px;
      height: 8px;
      border: 2px solid var(--surface-pale-cool);
      border-radius: 999px;
      background: var(--ink-cool-grey-mid);
      box-shadow: 0 0 0 0 rgba(88, 144, 178, 0.18);
      animation: agentLauncherPulse 3.1s ease-in-out infinite;
    }
    .global-agent-chat-launcher-copy {
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 3px;
      min-width: 0;
      flex: 1 1 auto;
      text-align: left;
    }
    .global-agent-chat-launcher-title {
      display: block;
      max-width: 156px;
      overflow: hidden;
      color: var(--brand-deep);
      font-size: 12.5px;
      font-weight: 780;
      letter-spacing: 0.025em;
      line-height: 1.05;
      text-overflow: ellipsis;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .global-agent-chat-launcher-status {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      max-width: 166px;
      overflow: hidden;
      color: var(--ink-green-muted);
      font-size: 10.5px;
      font-weight: 640;
      line-height: 1.15;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .global-agent-chat-launcher-dot {
      width: 5px;
      height: 5px;
      flex: 0 0 5px;
      border-radius: 999px;
      background: var(--positive-surface-deep);
      box-shadow: 0 0 0 2px rgba(110, 164, 123, 0.09);
    }
    .global-agent-chat-launcher-hint {
      min-height: 23px;
      padding: 0 8px;
      border: 1px solid rgba(37, 74, 58, 0.12);
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,0.68);
      color: var(--positive-text-deep);
      font-size: 10px;
      font-weight: 760;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
    }
    .global-agent-chat-launcher:hover .global-agent-chat-launcher-hint {
      transform: translateX(2px);
      background: var(--brand-deep);
      color: var(--surface-white);
    }
    .global-agent-chat-launcher-new {
      min-height: 31px;
      min-width: 42px;
      padding: 0 7px;
      border: 1px solid rgba(23, 56, 45, 0.18);
      border-radius: 11px;
      background:
        linear-gradient(180deg, var(--brand-deep) 0%, var(--positive-text-deep) 100%);
      color: var(--surface-pale-cool);
      font-size: 11px;
      font-weight: 820;
      letter-spacing: 0.04em;
      text-transform: none;
      cursor: pointer;
      box-shadow:
        0 10px 22px rgba(23, 56, 45, 0.18),
        inset 0 1px 0 rgba(255,255,255,0.1);
      backdrop-filter: blur(12px);
      transition:
        transform 0.2s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
    }
    .global-agent-chat-launcher-new:hover {
      transform: translateY(-2px);
      border-color: rgba(23, 56, 45, 0.28);
      background:
        linear-gradient(180deg, var(--positive-text-deep) 0%, var(--positive-text-deep) 100%);
      color: var(--surface-white);
      box-shadow:
        0 14px 28px rgba(23, 56, 45, 0.22),
        0 0 0 3px rgba(39, 93, 68, 0.05),
        inset 0 1px 0 rgba(255,255,255,0.14);
    }
    .global-agent-chat-launcher-new:active {
      transform: translateY(-1px);
    }
    .global-agent-chat-launcher-new:focus-visible {
      outline: 3px solid rgba(39, 93, 68, 0.2);
      outline-offset: 3px;
    }
    .global-agent-chat-launcher-new-mark {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      transform: translateY(-0.5px);
    }
    @keyframes agentLauncherPulse {
      0% {
        transform: scale(0.92);
        box-shadow: 0 0 0 0 rgba(88, 144, 178, 0.18);
      }
      50% {
        transform: scale(1);
        box-shadow: 0 0 0 5px rgba(88, 144, 178, 0.08);
      }
      100% {
        transform: scale(0.92);
        box-shadow: 0 0 0 0 rgba(88, 144, 178, 0);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .pending-dot,
      .global-agent-chat-launcher-pulse {
        animation: none !important;
      }
    }
    .global-agent-chat-panel {
      position: fixed;
      right: 22px;
      bottom: 22px;
      z-index: 1201;
      width: min(560px, calc(100vw - 24px));
      height: min(78vh, 760px);
      display: none;
      flex-direction: column;
      border-radius: 18px;
      overflow: hidden;
      background: var(--surface-white);
      box-shadow: 0 22px 58px rgba(20, 32, 40, 0.22);
      border: 1px solid var(--surface-mint-deep);
    }
    .global-agent-chat-panel.open {
      display: flex;
      animation: agentChatPanelOpen 0.2s cubic-bezier(.2,.8,.2,1) both;
    }
    .global-agent-chat-panel.expanded {
      width: min(940px, calc(100vw - 32px));
      height: min(88vh, 940px);
    }
    .global-agent-chat-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px 13px;
      border-bottom: 1px solid rgba(39, 93, 68, 0.12);
      background:
        radial-gradient(circle at 12% 0%, rgba(39, 93, 68, 0.12), transparent 34%),
        linear-gradient(180deg, var(--surface-white) 0%, var(--surface-pale-cool) 100%);
      color: var(--ink-navy);
    }
    @keyframes agentChatPanelOpen {
      from {
        opacity: 0;
        transform: translateY(12px) scale(0.985);
        filter: blur(1px);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }
    .global-agent-chat-header-copy {
      flex: 1 1 auto;
      text-align: left;
      padding-left: 0;
      min-width: 0;
    }
    .global-agent-chat-header-kicker {
      color: var(--ink-green-muted);
      font-size: 10.5px;
      font-weight: 760;
      letter-spacing: 0.055em;
      line-height: 1.1;
      text-transform: uppercase;
    }
    .global-agent-chat-header strong {
      display: block;
      margin-top: 4px;
      color: var(--ink-navy);
      font-size: 18px;
      font-weight: 650;
      letter-spacing: 0.035em;
      line-height: 1.08;
      text-transform: uppercase;
    }
    .global-agent-chat-header-monitoring {
      margin-top: 5px;
      color: var(--positive-text-deep);
      font-size: 11.5px;
      font-weight: 620;
      line-height: 1.2;
    }
    .global-agent-chat-header span {
      display: block;
      margin-top: 4px;
      font-size: 12px;
      color: var(--ink-muted);
    }
    .global-agent-chat-header-note {
      max-width: 340px;
      line-height: 1.45;
    }
    .global-agent-chat-header button {
      border: none;
      background: transparent;
      color: var(--ink-slate);
      font-size: 18px;
      cursor: pointer;
    }
    .global-agent-chat-header-actions {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .global-agent-chat-header-icon {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      /* 2026-05-30 (round 2) — grid + place-items beats flexbox here
         because flex baselines vary subtly per browser when the
         child is an inline-flex span wrapping an SVG; grid centers
         purely by box geometry. Also reset all the browser-default
         button quirks (padding, border, font baseline) so nothing
         leaks into the centering. */
      display: grid;
      place-items: center;
      padding: 0 !important;
      margin: 0;
      border: 1px solid rgba(35, 74, 57, 0.1) !important;
      background: rgba(255,255,255,0.64) !important;
      box-shadow: none !important;
      /* font-size + line-height kept tight in case the glyph ever
         falls back to text rather than an SVG. */
      font-size: 15px !important;
      line-height: 1;
    }
    .global-agent-chat-header-icon-glyph {
      display: grid;
      place-items: center;
      width: 14px;
      height: 14px;
      line-height: 1;
      font-size: 15px;
    }
    /* 2026-05-30 — SVGs default to display:inline which aligns to a
       text baseline, leaving a few pixels of phantom descender space
       at the bottom of the line box. That phantom space shifted the
       × glyph up-and-right inside the 34px button. Forcing block
       display + centered margins removes the baseline behaviour so
       both header icons (expand square + close X) render
       geometrically centered. */
    .global-agent-chat-header-icon-glyph svg {
      display: block;
      margin: auto;
    }
    .global-agent-chat-body {
      flex: 1 1 auto;
      min-height: 0;
      padding: 14px;
      overflow-y: auto;
      background: var(--surface-pale-cool);
      min-height: 160px;
    }
    .global-agent-chat-content {
      position: relative;
      flex: 1 1 auto;
      min-height: 0;
      display: grid;
      grid-template-columns: var(--chat-sidebar-width, 34px) minmax(0, 1fr);
      height: 100%;
      min-height: 420px;
      background: var(--surface-pale-cool);
      transition: grid-template-columns 0.18s ease;
    }
    .global-agent-chat-content.sidebar-revealed,
    .global-agent-chat-content.sidebar-pinned {
      --chat-sidebar-width: 257px;
    }
    .global-agent-chat-hover-strip {
      position: absolute;
      left: 6px;
      top: 10px;
      bottom: 10px;
      width: 24px;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--surface-mint);
      border: 1px solid var(--border-pale);
      border-radius: 12px;
      cursor: pointer;
      user-select: none;
    }
    .global-agent-chat-hover-strip span {
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-muted);
    }
    .global-agent-chat-content.sidebar-revealed .global-agent-chat-hover-strip,
    .global-agent-chat-content.sidebar-pinned .global-agent-chat-hover-strip {
      opacity: 0;
      pointer-events: none;
    }
    .global-agent-chat-sidebar {
      position: relative;
      z-index: 1;
      border-right: 1px solid rgba(40, 60, 50, 0.08);
      background: var(--surface-pale-cool);
      padding: 12px;
      overflow-y: auto;
      overflow-x: hidden;
      min-width: 0;
      transition: opacity 0.18s ease, padding 0.18s ease;
    }
    .global-agent-chat-content:not(.sidebar-revealed):not(.sidebar-pinned) .global-agent-chat-sidebar {
      opacity: 0;
      pointer-events: none;
      padding-left: 28px;
      padding-right: 0;
    }
    .global-agent-chat-sidebar-top {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }
    .global-agent-chat-sidebar-head {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .global-agent-chat-sidebar-title {
      font-size: 11px;
      font-weight: 740;
      letter-spacing: 0.055em;
      text-transform: uppercase;
      color: var(--ink-slate);
      text-align: center;
    }
    .global-agent-chat-sidebar-pin {
      width: 28px;
      height: 28px;
      border: 1px solid var(--border-cool);
      border-radius: 8px;
      background: rgba(255,255,255,0.78);
      color: var(--ink-slate);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
    }
    .global-agent-chat-content.sidebar-pinned .global-agent-chat-sidebar-pin {
      background: var(--ink-navy);
      border-color: var(--ink-navy);
      color: var(--surface-white);
    }
    .global-agent-chat-new-thread-button {
      border: none;
      border-radius: 11px;
      background: linear-gradient(180deg, var(--info-teal-bg-strong) 0%, var(--brand-deep) 100%);
      color: var(--surface-white);
      font-size: 12px;
      font-weight: 720;
      letter-spacing: 0.035em;
      text-transform: uppercase;
      padding: 10px 12px;
      cursor: pointer;
      text-align: center;
    }
    .global-agent-chat-new-thread-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(17, 17, 17, 0.26);
      z-index: 2;
    }
    .global-agent-chat-new-thread-overlay.hidden {
      display: none;
    }
    .global-agent-chat-new-thread-panel {
      width: min(360px, 100%);
      padding: 16px;
      border-radius: 16px;
      border: 1px solid var(--border-pale);
      background: var(--surface-white);
      box-shadow: 0 18px 40px rgba(0,0,0,0.16);
      text-align: center;
    }
    .global-agent-chat-new-thread-title {
      font-size: 15px;
      font-weight: 800;
      color: var(--ink-navy);
      margin-bottom: 6px;
    }
    .global-agent-chat-new-thread-subtitle {
      font-size: 12px;
      line-height: 1.5;
      color: var(--ink-muted);
      margin-bottom: 14px;
    }
    .global-agent-chat-new-thread-panel select {
      width: 100%;
      border: 1px solid var(--border-cool);
      border-radius: 10px;
      padding: 10px 11px;
      font: inherit;
      background: var(--surface-white);
    }
    .global-agent-chat-new-thread-actions {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 12px;
    }
    .global-agent-chat-thread-create {
      border: none;
      border-radius: 999px;
      background: var(--ink-navy);
      color: var(--surface-white);
      min-width: 120px;
      padding: 9px 13px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      cursor: pointer;
      text-align: center;
    }
    .global-agent-chat-thread-cancel {
      border: 1px solid var(--border-cool);
      border-radius: 999px;
      background: var(--surface-white);
      color: var(--ink-slate);
      min-width: 120px;
      padding: 9px 13px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      cursor: pointer;
      text-align: center;
    }
    .global-agent-chat-thread-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 12px;
    }
    .global-agent-chat-thread-item {
      width: 100%;
      text-align: left;
      border: 1px solid var(--border-pale);
      /* OPAQUE — previously 82% white, which let chat-list text behind
         the absolutely-positioned Investigations panel (compact-rail
         mode) bleed through and made the two layers unreadable. */
      background: var(--surface-white);
      border-radius: 12px;
      padding: 9px 10px;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(24, 35, 45, 0.025);
      transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    }
    .global-agent-chat-thread-item:hover {
      transform: translateY(-1px);
      border-color: var(--surface-mint-deep);
      background: var(--surface-white);
      box-shadow: 0 10px 20px rgba(24, 35, 45, 0.07);
    }
    .global-agent-chat-thread-item-inner {
      display: flex;
      flex-direction: column;
      min-width: 0;
      align-items: flex-start;
      text-align: left;
    }
    .global-agent-chat-thread-item.active {
      border-color: var(--positive-text-deep);
      background: linear-gradient(180deg, var(--surface-pale-cool) 0%, var(--surface-mint) 100%);
      box-shadow: inset 3px 0 0 var(--positive-text-deep), 0 7px 18px rgba(24, 35, 45, 0.06);
    }
    .global-agent-chat-thread-item-title {
      font-size: 12px;
      font-weight: 650;
      line-height: 1.35;
      color: var(--ink-navy);
      /* Long titles get clamped to two lines with ellipsis so they don't
         spill outside the investigations panel. Hover/title attribute is
         already set by the JS renderer so the full title stays accessible. */
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-word;
    }
    .global-agent-chat-thread-item-meta {
      margin-top: 6px;
      font-size: 10px;
      font-weight: 720;
      letter-spacing: 0.035em;
      text-transform: uppercase;
      color: var(--ink-muted);
    }
    /* 2026-05-23 — Option C: italic "latest question" preview under the
       (stable) primary title. Visually quieter than the title — the user
       scans the title to identify the thread, glances at the preview to
       remember where they left off. Clamped to 2 lines. */
    .global-agent-chat-thread-item-preview {
      margin-top: 5px;
      font-size: 11.5px;
      font-style: italic;
      font-weight: 430;
      line-height: 1.4;
      color: #4a5b66;
      text-transform: none !important;
      letter-spacing: normal;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-word;
    }
    .global-agent-chat-thread-item-preview-empty {
      font-style: normal;
      color: #8a98a3;
    }
    .global-agent-chat-thread-item-time {
      margin-top: 5px;
      font-size: 11px;
      color: var(--ink-muted);
    }
    .global-agent-chat-thread-item-actions {
      display: flex;
      justify-content: flex-end;
      gap: 6px;
      margin-top: 8px;
    }
    .global-agent-chat-thread-action {
      width: 24px;
      height: 24px;
      border: 1px solid var(--border-cool);
      border-radius: 8px;
      background: rgba(255,255,255,0.88);
      color: var(--ink-slate);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      cursor: pointer;
      transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
    }
    .global-agent-chat-thread-action:hover {
      background: var(--surface-white);
      border-color: var(--border-mid);
      color: var(--ink-navy);
    }
    .global-agent-chat-thread-action.delete:hover {
      border-color: var(--rust-soft);
      color: var(--danger-text-deep);
    }
    .global-agent-chat-main {
      display: flex;
      flex-direction: column;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
    }
    .global-agent-chat-thread-bar {
      padding: 12px 14px 0;
      background: var(--surface-pale-cool);
    }
    .global-agent-chat-thread-title {
      font-size: 15px;
      font-weight: 650;
      color: var(--ink-navy);
      line-height: 1.35;
      text-transform: none;
    }
    .global-agent-chat-thread-subtitle {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 8px;
    }
    .global-agent-chat-scope-pill {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      background: var(--info-blue-surface-pale);
      color: var(--ink-slate);
      padding: 6px 10px;
      font-size: 11px;
      font-weight: 720;
      letter-spacing: 0.035em;
      text-transform: uppercase;
    }
    .global-agent-chat-scope-pill.link {
      text-decoration: none;
      cursor: pointer;
      transition: background 0.14s ease, color 0.14s ease;
    }
    .global-agent-chat-scope-pill.link:hover {
      background: var(--border-pale);
      color: var(--ink-navy);
    }
    .global-agent-chat-scope-note {
      font-size: 12px;
      color: var(--ink-muted);
      line-height: 1.45;
    }
    .global-agent-chat-empty {
      color: var(--ink-green-muted);
      font-size: 14px;
      line-height: 1.5;
      background: var(--surface-white);
      border: 1px solid var(--surface-pale-cool);
      border-radius: 12px;
      padding: 14px;
    }
    .global-agent-chat-message {
      margin-top: 12px;
      border-radius: 12px;
      padding: 14px 15px;
      border: 1px solid var(--surface-pale-cool);
      background: var(--surface-white);
    }
    .global-agent-chat-message.user {
      background: var(--border-warm-soft);
    }
    .global-agent-chat-message.assistant {
      background: var(--surface-pale-cool);
    }
    .global-agent-chat-message.thinking {
      border-style: dashed;
      border-color: var(--border-cool);
      background: linear-gradient(135deg, var(--surface-pale-cool) 0%, var(--surface-pale-cool) 100%);
    }
    /* 2026-05-24 (visual refinement) — Phase 4 Action Preview Card.
       Same base card surface across all action kinds; differentiate
       via subtle left-rail tint + icon-tile color by data-action-kind.
       Avoid loud full-card colors; the card is a commitment/decision
       moment, not a rainbow alert. Family tints below. */
    .global-agent-chat-action-preview {
      margin-top: 14px;
      padding: 14px 16px 14px 18px;
      background: var(--surface-white);
      border: 1px solid rgba(28, 51, 67, 0.10);
      /* 2026-05-24 (iter 2) — Left rail bumped 3px → 5px so the
         family-color accent is unambiguous next to the icon tile
         (QA couldn't visually distinguish track sage from report
         teal at 3px). Colors also nudged toward higher saturation
         to read clearly on warm displays. */
      border-left: 5px solid #2f5a48; /* sage default; overridden per kind */
      border-radius: 10px;
      box-shadow: 0 1px 3px rgba(20, 35, 28, 0.04);
      transition: opacity 0.2s ease, border-color 0.15s ease;
    }
    /* Family rail tints — subtle accent only, never the full card. */
    .global-agent-chat-action-preview[data-action-kind="track_question"] {
      border-left-color: #2f5a48; /* sage */
    }
    .global-agent-chat-action-preview[data-action-kind="report"] {
      border-left-color: #2f6f8c; /* teal-blue (was #4f7d8a, too close to sage) */
    }
    .global-agent-chat-action-preview[data-action-kind="compare"] {
      border-left-color: #5f4a8e; /* deeper purple (was #6f5b8c, too muted) */
    }
    .global-agent-chat-action-preview.is-dismissed {
      opacity: 0;
    }
    .global-agent-chat-action-preview.is-done {
      background: #f5faf7;
      border-color: rgba(122, 152, 134, 0.55);
    }
    /* 2026-05-24 — At-limit state. User clicked Run-this on a
       track_question card but they're at their tracked-question
       cap, so the server returned 400 + at_limit:true. The popup
       opens; the card itself fades to a muted warn tint so the
       user sees the card status mirrors the popup. */
    .global-agent-chat-action-preview.is-at-limit {
      background: #f6f0e6;
      border-color: rgba(184, 144, 64, 0.45);
    }
    .global-agent-chat-action-preview.is-at-limit .global-agent-chat-action-preview-btn-primary {
      opacity: 0.65;
      cursor: not-allowed;
    }
    /* -- HEADER row: icon tile + title + optional status badge -- */
    .global-agent-chat-action-preview-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }
    .global-agent-chat-action-preview-icon-tile {
      flex: 0 0 28px;
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 7px;
      background: #eef3f1;
      color: #2f5a48;
    }
    .global-agent-chat-action-preview[data-action-kind="report"] .global-agent-chat-action-preview-icon-tile {
      background: #e5eef3;
      color: #2f6f8c;
    }
    .global-agent-chat-action-preview[data-action-kind="compare"] .global-agent-chat-action-preview-icon-tile {
      background: #ebe5f3;
      color: #5f4a8e;
    }
    .global-agent-chat-action-preview-title {
      flex: 1 1 auto;
      font-size: 13.5px;
      font-weight: 700;
      color: #15291f;
      letter-spacing: 0.01em;
      min-width: 0;
    }
    /* Subtle status badge in header — never grabs focus from title. */
    .global-agent-chat-action-preview-badge {
      flex: 0 0 auto;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.02em;
      text-transform: none;
      white-space: nowrap;
    }
    .global-agent-chat-action-preview-badge-positive {
      background: #e3eee8;
      color: #2a5b44;
    }
    .global-agent-chat-action-preview-badge-neutral {
      background: #eef2f4;
      color: #4d6b78;
    }
    .global-agent-chat-action-preview-badge-warn {
      background: #f4e8d8;
      color: #7a5d28;
    }
    /* -- BODY: compact key-value rows -- */
    .global-agent-chat-action-preview-body {
      display: flex;
      flex-direction: column;
      gap: 5px;
      margin-bottom: 12px;
    }
    .global-agent-chat-action-preview-row {
      display: flex;
      align-items: baseline;
      gap: 10px;
      font-size: 12.5px;
      line-height: 1.45;
    }
    .global-agent-chat-action-preview-key {
      flex: 0 0 80px;
      color: #6b7a80;
      font-weight: 600;
      font-size: 11.5px;
      letter-spacing: 0.01em;
    }
    .global-agent-chat-action-preview-value {
      flex: 1 1 auto;
      color: #15291f;
      word-break: break-word;
      min-width: 0;
    }
    .global-agent-chat-action-preview-note {
      font-size: 12px;
      color: #7a5d28;
      font-style: italic;
      margin-bottom: 10px;
      padding: 6px 8px;
      background: rgba(244, 232, 216, 0.45);
      border-radius: 6px;
    }
    /* -- FOOTER: Run / Dismiss -- */
    .global-agent-chat-action-preview-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }
    .global-agent-chat-action-preview-btn {
      font-family: inherit;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
    }
    .global-agent-chat-action-preview-btn[disabled] {
      opacity: 0.7;
      cursor: progress;
    }
    .global-agent-chat-action-preview.is-done .global-agent-chat-action-preview-btn-primary {
      cursor: default;
    }
    /* 2026-05-24 — Lock the primary + cancel button colors across
       EVERY interactive state. The static inline `setProperty
       (!important)` in JS only covers the resting state — when the
       user hovers / focuses / clicks, the global
       `a.button, button:hover { … filter: brightness(1.02); … }`
       rule (line 666) plus the linear-gradient on
       `--btn-primary-bg` can bleed through and the button looks
       red/navy mid-interaction. These CSS rules with the same
       `[data-action-kind] .global-agent-chat-action-preview-btn-*`
       selector beat any single-class hover rule on specificity,
       and the `!important` defends against the global one. */
    .global-agent-chat-action-preview .global-agent-chat-action-preview-btn-primary,
    .global-agent-chat-action-preview .global-agent-chat-action-preview-btn-primary:hover,
    .global-agent-chat-action-preview .global-agent-chat-action-preview-btn-primary:focus,
    .global-agent-chat-action-preview .global-agent-chat-action-preview-btn-primary:focus-visible,
    .global-agent-chat-action-preview .global-agent-chat-action-preview-btn-primary:active {
      background: #2f5a48 !important;
      background-image: none !important;
      border: 1px solid #2f5a48 !important;
      color: var(--surface-white) !important;
      box-shadow: none !important;
      filter: none !important;
      transform: none !important;
      outline: none !important;
    }
    .global-agent-chat-action-preview .global-agent-chat-action-preview-btn-primary:hover {
      background: #21443a !important;
      border-color: #21443a !important;
    }
    .global-agent-chat-action-preview .global-agent-chat-action-preview-btn-cancel,
    .global-agent-chat-action-preview .global-agent-chat-action-preview-btn-cancel:hover,
    .global-agent-chat-action-preview .global-agent-chat-action-preview-btn-cancel:focus,
    .global-agent-chat-action-preview .global-agent-chat-action-preview-btn-cancel:focus-visible,
    .global-agent-chat-action-preview .global-agent-chat-action-preview-btn-cancel:active {
      background: transparent !important;
      background-image: none !important;
      border: 1px solid #d6dad8 !important;
      color: #5d6b6f !important;
      box-shadow: none !important;
      filter: none !important;
      transform: none !important;
      outline: none !important;
    }
    .global-agent-chat-action-preview .global-agent-chat-action-preview-btn-cancel:hover {
      background: #f5f5f5 !important;
      border-color: #b8bcbe !important;
    }
    /* Narrow viewport: stack the header rows so a long title +
       badge don't squeeze the icon. */
    @media (max-width: 480px) {
      .global-agent-chat-action-preview-header {
        flex-wrap: wrap;
      }
      .global-agent-chat-action-preview-badge {
        margin-left: 38px;
      }
      .global-agent-chat-action-preview-key {
        flex: 0 0 70px;
      }
    }

    /* 2026-05-24 — Agent Actions card. Rendered by
       `appendCtaSuggestionsBlock` under chat answers. Replaces the
       loose chip row with a structured card: eyebrow + list of
       icon + title + description + compact button rows. Reads as
       "the agent can do these for you" rather than chips floating
       under the message.
       Palette: pale sage / blue-grey, distinct from the warm
       beige used on the rest of the report cards so the user can
       feel the difference between an app card and an agent
       capability surface. */
    .global-agent-chat-actions-card {
      margin-top: 14px;
      padding: 12px 14px 10px;
      background: #eef3f1;
      border: 1px solid #d6e0dc;
      border-radius: 12px;
      box-shadow: 0 1px 2px rgba(21, 41, 31, 0.04);
    }
    .global-agent-chat-actions-eyebrow {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #5d6b6f;
      margin-bottom: 8px;
    }
    .global-agent-chat-actions-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .global-agent-chat-actions-row {
      display: grid;
      grid-template-columns: 36px minmax(0, 1fr) auto;
      column-gap: 12px;
      align-items: center;
      padding: 8px 4px;
      border-top: 1px solid transparent;
    }
    .global-agent-chat-actions-row + .global-agent-chat-actions-row {
      border-top-color: rgba(122, 152, 134, 0.14);
    }
    .global-agent-chat-actions-icon-tile {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: #dde8e3;
      color: #2f5a48;
      flex: 0 0 auto;
    }
    .global-agent-chat-actions-icon-tile svg {
      display: block;
    }
    .global-agent-chat-actions-body {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .global-agent-chat-actions-title {
      font-size: 13.5px;
      font-weight: 600;
      color: #15291f;
      line-height: 1.25;
    }
    .global-agent-chat-actions-desc {
      font-size: 12px;
      line-height: 1.35;
      color: #5d6b6f;
      /* Clamp to 2 lines so a long tracked-question doesn't push
         the row tall. Full text is on the `title` attribute. */
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .global-agent-chat-actions-btn {
      display: inline-flex !important;
      align-items: center !important;
      padding: 6px 12px !important;
      /* 2026-05-24 — Explicitly inherit the page font + normalize
         the case + spacing so the app-wide
         `a.button, button { background: var(--btn-primary-bg);
         text-transform: uppercase; … }` rule (base_part02.css
         line 648) can't make the api_action button look heavier
         than the navigate <a> siblings. All three actions now
         share the same sentence-case + same fill. */
      font-family: inherit !important;
      font-size: 12.5px !important;
      font-weight: 600 !important;
      line-height: 1.2 !important;
      letter-spacing: 0 !important;
      text-transform: none !important;
      color: #1f4a3a !important;
      background: var(--surface-white) !important;
      border: 1px solid #b8d0c6 !important;
      border-radius: 999px !important;
      text-decoration: none !important;
      cursor: pointer !important;
      white-space: nowrap !important;
      box-shadow: none !important;
      transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    }
    .global-agent-chat-actions-btn:hover,
    .global-agent-chat-actions-btn:focus-visible {
      background: #dde8e3;
      border-color: #7a9886;
      color: #15291f;
      outline: none;
    }
    .global-agent-chat-actions-btn.is-done,
    .global-agent-chat-actions-btn[disabled] {
      opacity: 0.85;
      cursor: default;
    }
    .global-agent-chat-actions-btn.is-done {
      background: #d8e8df;
      border-color: #7a9886;
      color: var(--positive-text-deep);
    }
    /* 2026-05-24 (iter 2) — Was a sage-filled primary treatment for
       `[data-cta-kind="api_action"]` chips (Track question, etc.) to
       differentiate the write-actions from the navigate links. User
       flagged the visual asymmetry as "red"-looking next to its
       white-outlined siblings (e.g. Stress-test →) and asked for
       uniform styling. Removed — all chips now share the default
       white-with-sage-border treatment in `.global-agent-chat-
       actions-btn` above. The `:hover` / `:focus` / `.is-done`
       variants inherit the same default-state rules; no separate
       api_action overrides needed. */
    /* Narrow viewport: stack the button under the body so the row
       doesn't horizontal-scroll. */
    @media (max-width: 540px) {
      .global-agent-chat-actions-row {
        grid-template-columns: 32px minmax(0, 1fr);
        grid-template-rows: auto auto;
        row-gap: 8px;
      }
      .global-agent-chat-actions-btn {
        grid-column: 2 / 3;
        justify-self: start;
      }
    }
    .global-agent-chat-meta {
      text-transform: uppercase;
      color: var(--ink-green-muted);
    }
    .global-agent-chat-role-meta {
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.07em;
      color: var(--ink-green-muted);
      margin-bottom: 10px;
    }
    /* 2026-05-24 — Global "search-match" highlight. Applied by the
       shared `window.highlightSearchMatches` helper (base_shell.js)
       to bold the matched word inside any DOM row a user searches
       through. Used by Speaker Videos, Channel page, Review history,
       and Worth Tracking. Sage tint + deep-green bold — same family
       as the Question Health and Worth-Tracking treatments so the
       app reads as one search-result language. */
    .app-search-match {
      background: rgba(31, 91, 52, 0.14);
      border-radius: 3px;
      padding: 0 2px;
      font-weight: 700;
      color: var(--positive-text-deep, var(--positive-text-deep));
    }
    .global-agent-chat-section-meta {
      font-size: 11px;
      font-weight: 680;
      letter-spacing: 0.035em;
      color: var(--ink-slate);
      margin-bottom: 0;
    }
    .global-agent-chat-text {
      white-space: pre-wrap;
      line-height: 1.6;
      font-size: 14px;
    }
    .global-agent-chat-message.assistant .global-agent-chat-text {
      text-align: justify; hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty;
    }
    .global-agent-chat-section {
      margin-top: 16px;
      padding: 0;
      border: 1px solid var(--surface-mint-deep);
      border-radius: 15px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.82) 0%, rgba(247,250,248,0.92) 100%);
      box-shadow: 0 5px 14px rgba(24, 35, 45, 0.035);
      overflow: hidden;
    }
    .global-agent-chat-section-summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: 0;
      padding: 10px 12px;
      border-bottom: 1px solid rgba(64, 89, 102, 0.08);
      cursor: pointer;
      list-style: none;
    }
    .global-agent-chat-section-heading {
      display: grid;
      gap: 2px;
      min-width: 0;
    }
    .global-agent-chat-section-title {
      color: var(--ink-navy);
      font-size: 12px;
      font-weight: 660;
      letter-spacing: 0.01em;
      line-height: 1.15;
    }
    .global-agent-chat-section-purpose {
      color: var(--ink-muted);
      font-size: 10.5px;
      font-weight: 560;
      letter-spacing: 0.01em;
      line-height: 1.2;
    }
    .global-agent-chat-section-summary::-webkit-details-marker {
      display: none;
    }
    .global-agent-chat-section-summary::after {
      content: "";
      width: 7px;
      height: 7px;
      flex: 0 0 7px;
      border: solid var(--ink-muted);
      border-width: 0 1.5px 1.5px 0;
      transform: rotate(45deg) translateY(-1px);
      transition: transform 0.16s ease;
    }
    .global-agent-chat-section[open] .global-agent-chat-section-summary::after {
      transform: rotate(225deg) translateY(-1px);
    }
    .global-agent-chat-section-count {
      margin-left: auto;
      color: var(--ink-muted);
      font-size: 10.5px;
      font-weight: 620;
      line-height: 1;
      white-space: nowrap;
    }
    .global-agent-chat-section-summary:hover .global-agent-chat-section-title {
      color: var(--info-blue-bg-strong);
    }
    .global-agent-chat-insight-list {
      display: grid;
      gap: 8px;
      padding: 10px 12px 12px;
    }
    .global-agent-chat-insight-card {
      display: grid;
      grid-template-columns: 22px minmax(0, 1fr) auto;
      gap: 9px;
      align-items: start;
      padding: 9px 10px;
      border: 1px solid var(--border-pale);
      border-radius: 12px;
      background: rgba(255,255,255,0.76);
      color: var(--ink-navy);
      line-height: 1.5;
      transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
      position: relative;
    }
    .global-agent-chat-insight-card:hover {
      transform: translateY(-1px);
      border-color: var(--surface-mint-deep);
      box-shadow: 0 7px 16px rgba(24, 35, 45, 0.055);
    }
    /* 2026-05-23 #4 — Copy-bullet button. Hidden until hover (or
       keyboard focus). Positioned in the trailing grid column so
       it doesn't shift the index/text layout when revealed. */
    .global-agent-chat-insight-copy {
      grid-column: 3;
      grid-row: 1;
      align-self: start;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      padding: 0;
      border: 1px solid transparent;
      border-radius: 6px;
      background: transparent;
      color: var(--ink-muted);
      font-size: 13px;
      line-height: 1;
      cursor: pointer;
      opacity: 0;
      transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    }
    .global-agent-chat-insight-card:hover .global-agent-chat-insight-copy,
    .global-agent-chat-insight-copy:focus-visible {
      opacity: 1;
    }
    .global-agent-chat-insight-copy:hover {
      background: var(--surface-pale-cool);
      color: var(--ink-navy);
      border-color: var(--border-cool);
    }
    .global-agent-chat-insight-copy-ok {
      opacity: 1 !important;
      background: var(--surface-mint);
      color: var(--positive-text-deep);
      border-color: var(--surface-mint-deep);
    }
    .global-agent-chat-insight-copy-err {
      opacity: 1 !important;
      background: var(--surface-warm-warning);
      color: var(--danger-text-deep);
      border-color: var(--danger-border-soft);
    }
    .global-agent-chat-insight-index {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      border-radius: 999px;
      background: var(--surface-mint);
      color: var(--positive-text-deep);
      font-size: 10.5px;
      font-weight: 760;
      line-height: 1;
    }
    .global-agent-chat-insight-text {
      min-width: 0;
      font-size: 13.5px;
      font-weight: 430;
      text-align: left;
      white-space: pre-wrap;
    }
    .global-agent-chat-section-counterpoints {
      border-color: var(--border-warm-soft);
      background: linear-gradient(180deg, rgba(255,255,255,0.84) 0%, rgba(250,247,242,0.92) 100%);
    }
    .global-agent-chat-section-counterpoints .global-agent-chat-insight-index {
      background: var(--surface-warm);
      color: var(--brand-bronze);
    }
    .global-agent-chat-section-key-points {
      border-color: var(--surface-mint-deep);
    }
    .global-agent-chat-section-suggested-videos {
      border-color: var(--border-pale);
      background: linear-gradient(180deg, rgba(255,255,255,0.84) 0%, rgba(245,249,251,0.94) 100%);
    }
    .global-agent-chat-section-relevant-transcripts {
      border-color: var(--border-pale);
    }
    .global-agent-chat-section > .global-agent-chat-text {
      padding: 10px 12px 12px;
    }
    .global-agent-chat-video-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      padding: 10px 12px 12px;
    }
    /* 2026-05-24 — Suggested-video cards stay single-column even in the
       expanded chat panel. The prior 2-col override at this breakpoint
       made the 96px thumbnail look cramped next to long titles +
       reason text on the right; one card per row gives the thumb +
       copy room to breathe and matches the Transcript card layout. */
    .global-agent-chat-video-card {
      display: grid;
      /* 2026-05-24 — Thumbnail column widened from 96px → 192px so
         the video tile reads as a real video, not a sliver. Paired
         with a 16:9 aspect-ratio wrapper below (192 × 108) which
         matches YouTube's native thumbnail shape and gives the
         "Evidence path" card real video affordance. Text column
         stays 1fr so titles + reason text get the remaining width. */
      grid-template-columns: 192px minmax(0, 1fr);
      align-items: stretch;
      text-decoration: none;
      color: inherit;
      background: var(--surface-white);
      border: 1px solid var(--border-pale);
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 3px 12px rgba(0,0,0,0.05);
      transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
    }
    .global-agent-chat-video-card:hover {
      transform: translateY(-1px);
      border-color: var(--border-mid);
      box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    }
    /* 2026-05-24 — Fixed 16:9 wrapper so the thumbnail always
       renders at its intended shape regardless of the source
       asset's dimensions. Inner <img> is absolutely positioned
       to fill the box with object-fit: cover. */
    .global-agent-chat-video-thumb-wrap {
      position: relative;
      display: block;
      width: 100%;
      aspect-ratio: 16 / 9;
      background: linear-gradient(135deg, var(--surface-pale-cool) 0%, var(--border-pale) 100%);
      overflow: hidden;
    }
    .global-agent-chat-video-thumb {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }
    .global-agent-chat-video-thumb-fallback {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, var(--surface-pale-cool) 0%, var(--border-pale) 100%);
      color: var(--ink-muted);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    /* 2026-05-24 — Subtle play-button overlay so the thumb reads
       as a video. Centered semi-transparent dark circle with a
       white play glyph, no shouty fill. Picks up slight lift on
       card hover for affordance. */
    .global-agent-chat-video-thumb-play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 999px;
      background: rgba(20, 28, 36, 0.62);
      color: var(--surface-white);
      pointer-events: none;
      transition: background 0.14s ease, transform 0.14s ease;
    }
    .global-agent-chat-video-card:hover .global-agent-chat-video-thumb-play {
      background: rgba(20, 28, 36, 0.78);
      transform: translate(-50%, -50%) scale(1.04);
    }
    .global-agent-chat-video-thumb-play svg {
      /* Optical centering: the play triangle's visual mass sits
         right of geometric center, so nudge it left ~1px. */
      transform: translateX(1px);
    }
    .global-agent-chat-video-content {
      padding: 12px 14px 12px;
      min-width: 0;
    }
    /* 2026-05-24 — Narrow viewport: stack thumb above text + use
       full-width 16:9 hero. ~540px matches the chat panel's
       compact mode. */
    @media (max-width: 540px) {
      .global-agent-chat-video-card {
        grid-template-columns: 1fr;
      }
      .global-agent-chat-video-content {
        padding: 10px 12px 11px;
      }
    }
    .global-agent-chat-video-title {
      font-size: 13px;
      font-weight: 700;
      line-height: 1.45;
      color: var(--ink-navy);
    }
    .global-agent-chat-video-published {
      margin-top: 5px;
      font-size: 11px;
      line-height: 1.35;
      color: var(--ink-muted);
      font-weight: 700;
      letter-spacing: 0.01em;
    }
    .global-agent-chat-video-reason {
      margin-top: 8px;
      font-size: 12px;
      line-height: 1.5;
      color: var(--ink-slate);
    }
    .global-agent-chat-transcript-list {
      display: grid;
      gap: 10px;
      padding: 10px 12px 12px;
    }
    .global-agent-chat-transcript-card {
      display: grid;
      grid-template-columns: 84px minmax(0, 1fr);
      text-decoration: none;
      color: inherit;
      background: var(--surface-white);
      border: 1px solid var(--border-pale);
      border-radius: 12px;
      overflow: hidden;
      transition: border-color 0.14s ease, background 0.14s ease, transform 0.14s ease;
    }
    .global-agent-chat-transcript-card:hover {
      background: var(--surface-white);
      border-color: var(--border-pale);
      transform: translateY(-1px);
    }
    .global-agent-chat-transcript-thumb {
      display: block;
      width: 100%;
      height: 100%;
      min-height: 82px;
      object-fit: cover;
      background: linear-gradient(135deg, var(--surface-pale-cool) 0%, var(--border-pale) 100%);
    }
    .global-agent-chat-transcript-thumb-fallback {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 82px;
      background: linear-gradient(135deg, var(--surface-pale-cool) 0%, var(--border-pale) 100%);
      color: var(--ink-muted);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .global-agent-chat-transcript-content {
      padding: 10px 12px 11px;
    }
    .global-agent-chat-transcript-title {
      font-size: 13px;
      font-weight: 700;
      line-height: 1.4;
      color: var(--ink-navy);
    }
    /* 2026-05-23 — Published-date line on transcript cards. Sits between
       the title and the reason/action so the reader sees freshness at a
       glance. Quiet muted tone — informational, not the primary signal. */
    .global-agent-chat-transcript-published {
      margin-top: 4px;
      font-size: 11.5px;
      font-weight: 500;
      letter-spacing: 0.01em;
      color: var(--ink-muted);
    }
    .global-agent-chat-transcript-reason {
      margin-top: 6px;
      font-size: 12px;
      line-height: 1.5;
      color: var(--ink-slate);
    }
    .global-agent-chat-transcript-action {
      margin-top: 8px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ink-muted);
    }
    @media (max-width: 700px) {
      .global-agent-chat-launcher-dock {
        right: 18px;
        bottom: 22px;
      }
      .global-agent-chat-launcher-group {
        gap: 6px;
      }
      .global-agent-chat-launcher {
        min-width: 214px;
        max-width: calc(100vw - 36px);
        padding: 8px 9px;
      }
      .global-agent-chat-launcher:hover {
        min-width: 214px;
      }
      .global-agent-chat-launcher-orb {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
      }
      .global-agent-chat-launcher-title {
        max-width: 126px;
        font-size: 11.5px;
      }
      .global-agent-chat-launcher-status {
        max-width: 136px;
        font-size: 10px;
      }
      .global-agent-chat-launcher-hint {
        display: none;
      }
      .global-agent-chat-launcher-new {
        min-height: 38px;
        min-width: 54px;
        padding: 0 12px;
        font-size: 10px;
        letter-spacing: 0.03em;
      }
      .global-agent-chat-panel {
        right: 12px;
        bottom: 12px;
        width: min(560px, calc(100vw - 16px));
        height: min(84vh, 760px);
        border-radius: 16px;
      }
      .global-agent-chat-panel.expanded {
        width: min(940px, calc(100vw - 16px));
        height: min(90vh, 940px);
      }
      .global-agent-chat-header {
        padding: 12px 14px;
      }
      .global-agent-chat-header-copy {
        padding-left: 0;
      }
      .global-agent-chat-header strong {
        font-size: 18px;
      }
      .global-agent-chat-header-note {
        display: none;
      }
      .global-agent-chat-content,
      .global-agent-chat-content.sidebar-revealed,
      .global-agent-chat-content.sidebar-pinned {
        grid-template-columns: 1fr;
      }
      .global-agent-chat-hover-strip,
      .global-agent-chat-sidebar,
      .global-agent-chat-content:not(.sidebar-revealed):not(.sidebar-pinned) .global-agent-chat-sidebar {
        display: none;
      }
    }
    .global-agent-chat-thinking-dots {
      display: inline-flex;
      gap: 6px;
      align-items: center;
      margin-top: 2px;
    }
    .global-agent-chat-thinking-dots span {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--ink-muted);
      animation: globalAgentChatPulse 1s infinite ease-in-out;
    }
    .global-agent-chat-thinking-dots span:nth-child(2) {
      animation-delay: 0.15s;
    }
    .global-agent-chat-thinking-dots span:nth-child(3) {
      animation-delay: 0.3s;
    }
    @keyframes globalAgentChatPulse {
      0%, 80%, 100% { opacity: 0.28; transform: translateY(0); }
      40% { opacity: 1; transform: translateY(-2px); }
    }
    .global-agent-chat-form {
      position: relative;
      padding: 14px;
      border-top: 1px solid var(--surface-pale-cool);
      background: var(--surface-white);
    }
    .global-agent-chat-input-shell {
      position: relative;
    }
    .global-agent-chat-input-rich {
      position: absolute;
      inset: 0;
      padding: 12px;
      border: 1px solid transparent;
      border-radius: 12px;
      font: inherit;
      line-height: inherit;
      color: var(--ink-deep);
      white-space: pre-wrap;
      word-break: break-word;
      overflow: hidden;
      pointer-events: none;
      z-index: 3;
    }
    .global-agent-chat-input-rich[hidden] {
      display: none;
    }
    .global-agent-chat-input-rich-text {
      color: var(--ink-deep);
      white-space: break-spaces;
    }
    .global-agent-chat-inline-chip {
      position: relative;
      display: inline;
      max-width: 100%;
      padding: 0 1px;
      margin: 0;
      border-radius: 4px;
      border: 0;
      background: rgba(55, 97, 143, 0.08);
      color: var(--ink-deep);
      font-size: inherit;
      font-weight: inherit;
      line-height: inherit;
      vertical-align: baseline;
      pointer-events: auto;
      cursor: pointer;
      white-space: normal;
    }
    .global-agent-chat-inline-chip.is-active {
      box-shadow: 0 0 0 2px rgba(55, 97, 143, 0.12);
    }
    .global-agent-chat-inline-chip-label {
      white-space: break-spaces;
    }
    .global-agent-chat-inline-chip-remove {
      position: absolute;
      right: -8px;
      top: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 12px;
      height: 12px;
      border-radius: 999px;
      font-size: 9px;
      line-height: 1;
      color: var(--ink-slate);
      opacity: 0;
      background: rgba(255, 255, 255, 0.88);
      box-shadow: 0 2px 8px rgba(16, 24, 40, 0.12);
      transform: translateY(-50%);
      transition: opacity 0.14s ease;
      pointer-events: none;
    }
    .global-agent-chat-inline-chip-type {
      display: none;
    }
    .global-agent-chat-inline-chip:hover .global-agent-chat-inline-chip-remove,
    .global-agent-chat-inline-chip.is-active .global-agent-chat-inline-chip-remove {
      opacity: 0.55;
    }
    .global-agent-chat-inline-chip.is-channel {
      background: rgba(55, 97, 143, 0.10);
    }
    .global-agent-chat-inline-chip.is-speaker {
      background: rgba(47, 90, 72, 0.10);
    }
    .global-agent-chat-inline-chip.is-asset {
      background: rgba(200, 154, 59, 0.12);
    }
    .global-agent-chat-inline-chip.is-transcript {
      background: rgba(124, 82, 149, 0.12);
    }
    .global-agent-chat-form textarea {
      position: relative;
      z-index: 2;
      width: 100%;
      min-height: 110px;
      resize: vertical;
      box-sizing: border-box;
      border: 1px solid var(--border-cool);
      border-radius: 12px;
      padding: 12px;
      font: inherit;
      background: var(--surface-white);
    }
    .global-agent-chat-form textarea.has-rich-render {
      color: transparent;
      caret-color: var(--ink-deep);
      background: transparent;
      text-shadow: none;
    }
    .global-agent-chat-form textarea.has-rich-render::selection {
      background: rgba(55, 97, 143, 0.18);
      color: transparent;
    }
    .global-agent-chat-mention-menu {
      position: fixed;
      left: 14px;
      top: 14px;
      width: 360px;
      max-height: 248px;
      border: 1px solid rgba(70, 92, 116, 0.18);
      border-radius: 12px;
      background: rgba(252, 253, 254, 0.98);
      box-shadow: 0 18px 34px rgba(16, 24, 40, 0.14);
      overflow: hidden;
      overflow-y: auto;
      z-index: 1305;
    }
    .global-agent-chat-mention-item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      width: 100%;
      padding: 7px 10px;
      border: 0;
      background: transparent;
      text-align: left;
      color: var(--ink-deep);
      cursor: pointer;
      text-transform: none !important;
      transition: background 0.14s ease, box-shadow 0.14s ease;
    }
    .global-agent-chat-mention-item + .global-agent-chat-mention-item {
      border-top: 1px solid rgba(111, 123, 140, 0.14);
    }
    .global-agent-chat-mention-item:focus-visible {
      outline: none;
      background: rgba(55, 97, 143, 0.09);
      box-shadow: inset 0 0 0 2px rgba(55, 97, 143, 0.24);
    }
    .global-agent-chat-mention-item.is-active {
      background: linear-gradient(90deg, rgba(47, 106, 115, 0.16) 0%, rgba(55, 97, 143, 0.08) 100%);
      box-shadow: inset 4px 0 0 var(--info-teal-text-deep);
    }
    .global-agent-chat-mention-menu[data-input-mode="mouse"] .global-agent-chat-mention-item:hover {
      background: linear-gradient(90deg, rgba(47, 106, 115, 0.16) 0%, rgba(55, 97, 143, 0.08) 100%);
      box-shadow: inset 4px 0 0 var(--info-teal-text-deep);
    }
    .global-agent-chat-mention-avatar,
    .global-agent-chat-mention-fallback {
      width: 24px;
      height: 24px;
      border-radius: 999px;
      flex: 0 0 24px;
    }
    .global-agent-chat-mention-avatar {
      object-fit: cover;
      background: rgba(111, 123, 140, 0.12);
    }
    .global-agent-chat-mention-fallback {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 800;
      color: var(--ink-green-deep);
      background: rgba(47, 90, 72, 0.10);
    }
    .global-agent-chat-mention-fallback-channel {
      color: var(--ink-navy);
      background: rgba(55, 97, 143, 0.12);
    }
    .global-agent-chat-mention-fallback-asset {
      color: #8a5a12;
      background: rgba(200, 154, 59, 0.12);
    }
    .global-agent-chat-mention-fallback-transcript {
      color: var(--ink-plum-deep);
      background: rgba(124, 82, 149, 0.12);
    }
    .global-agent-chat-mention-copy {
      min-width: 0;
      display: block;
      text-align: left;
      flex: 1 1 auto;
    }
    .global-agent-chat-mention-label-row {
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 6px;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
    }
    .global-agent-chat-mention-label {
      font-size: 12px;
      font-weight: 600;
      color: var(--ink-deep);
      text-transform: none !important;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
      flex: 1 1 auto;
    }
    .global-agent-chat-mention-separator {
      flex: 0 0 auto;
      font-size: 11px;
      color: var(--ink-slate);
    }
    .global-agent-chat-mention-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      font-size: 10px;
      line-height: 1;
      color: #b8841f;
    }
    .global-agent-chat-mention-subtext {
      font-size: 11px;
      color: var(--ink-slate);
      text-transform: none !important;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
      flex: 0 1 40%;
      max-width: 40%;
    }
    .global-agent-chat-mention-match {
      font-weight: 800;
      color: var(--ink-deep);
    }
    .global-agent-chat-mention-item.is-active .global-agent-chat-mention-label {
      color: var(--ink-navy);
    }
    .global-agent-chat-mention-item.is-active .global-agent-chat-mention-subtext,
    .global-agent-chat-mention-item.is-active .global-agent-chat-mention-separator {
      color: var(--ink-slate);
    }
    .global-agent-chat-mention-menu[data-input-mode="mouse"] .global-agent-chat-mention-item:hover .global-agent-chat-mention-label {
      color: var(--ink-navy);
    }
    .global-agent-chat-mention-menu[data-input-mode="mouse"] .global-agent-chat-mention-item:hover .global-agent-chat-mention-subtext,
    .global-agent-chat-mention-menu[data-input-mode="mouse"] .global-agent-chat-mention-item:hover .global-agent-chat-mention-separator {
      color: var(--ink-slate);
    }
    .global-agent-chat-entity-strip {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }
    .global-agent-chat-entity-strip[hidden] {
      display: none !important;
    }
    .global-agent-chat-entity-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(47, 90, 72, 0.08);
      border: 1px solid rgba(47, 90, 72, 0.14);
      color: var(--ink-deep);
      font-size: 12px;
    }
    .global-agent-chat-entity-pill-type {
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--ink-green-deep);
      font-size: 10px;
    }
    .global-agent-chat-entity-pill-remove {
      border: 0;
      background: transparent;
      color: var(--ink-slate);
      cursor: pointer;
      font-size: 13px;
      line-height: 1;
      padding: 0;
    }
    .global-agent-chat-actions {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      margin-top: 12px;
    }
    .global-agent-chat-actions-right {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      position: relative;
    }
    .global-agent-chat-help-toggle {
      width: 38px;
      height: 38px;
      border-radius: 999px;
      border: 1px solid var(--border-cool);
      background: var(--surface-white);
      color: var(--ink-slate);
      font-weight: 800;
      cursor: pointer;
    }
    .global-agent-chat-help-toggle:hover,
    .global-agent-chat-help-toggle[aria-expanded="true"] {
      border-color: var(--border-mid);
      color: var(--ink-navy);
      background: rgba(55, 97, 143, 0.08);
    }
    .global-agent-chat-help-popover {
      position: absolute;
      right: 14px;
      bottom: calc(100% + 12px);
      width: min(420px, calc(100vw - 60px));
      max-height: min(70vh, 560px);
      padding: 14px 15px;
      border: 1px solid var(--border-cool);
      border-radius: 14px;
      background: var(--surface-white);
      box-shadow: 0 18px 40px rgba(16, 24, 40, 0.14);
      overflow-y: auto;
      z-index: 9;
    }
    .global-agent-chat-help-title {
      font-size: 13px;
      font-weight: 800;
      color: var(--ink-deep);
      margin-bottom: 8px;
    }
    .global-agent-chat-help-section + .global-agent-chat-help-section {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid rgba(111, 123, 140, 0.12);
    }
    .global-agent-chat-help-kicker {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--ink-green-deep);
      margin-bottom: 6px;
    }
    .global-agent-chat-help-line {
      font-size: 12px;
      line-height: 1.5;
      color: var(--ink-slate);
    }
    .global-agent-chat-help-list {
      margin: 6px 0 0 0;
      padding-left: 18px;
    }
    .global-agent-chat-help-list .global-agent-chat-help-line {
      list-style: disc;
      margin: 4px 0 0 0;
      padding-left: 0;
    }
    .global-agent-chat-help-line code {
      background: rgba(55, 97, 143, 0.08);
      border-radius: 6px;
      padding: 1px 5px;
      color: var(--ink-deep);
    }
    .global-agent-chat-status {
      font-size: 12px;
      color: var(--ink-green-muted);
      min-height: 18px;
    }
    .global-agent-chat-status.editing {
      color: var(--ink-slate);
      font-weight: 700;
    }
    .global-agent-chat-message.user.editable {
      position: relative;
      padding-right: 48px;
    }
    .global-agent-chat-message-entities {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 10px;
    }
    .global-agent-chat-message-entity {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(29, 53, 87, 0.08);
      color: var(--ink-slate);
      font-size: 11px;
    }
    .global-agent-chat-message-entity-type {
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .global-agent-chat-message-edit {
      position: absolute;
      right: 12px;
      top: 12px;
      width: 26px;
      height: 26px;
      border: 1px solid var(--border-cool);
      border-radius: 8px;
      background: rgba(255,255,255,0.88);
      color: var(--ink-slate);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      cursor: pointer;
      transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
    }
    .global-agent-chat-message-edit:hover {
      background: var(--surface-white);
      border-color: var(--border-mid);
      color: var(--ink-navy);
    }
    .global-agent-chat-submit {
      border: none;
      border-radius: 999px;
      background: linear-gradient(180deg, var(--info-teal-bg-strong) 0%, var(--brand-deep) 100%);
      color: var(--surface-white);
      padding: 10px 16px;
      font-size: 12px;
      font-weight: 720;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      cursor: pointer;
      /* BUGFIX: INVESTIGATE truncation — keep the CTA on one line at any
         panel width (floating + docked + narrow mobile). The label is
         the longest single word in this row; without nowrap the button
         can collapse the "TE" off the right edge. flex-shrink:0 stops
         the surrounding flex row from squeezing the button itself
         when the textarea grabs space. */
      white-space: nowrap;
      flex-shrink: 0;
    }
    .global-agent-chat-submit:disabled {
      background: var(--ink-cool-grey);
      cursor: default;
    }
    @media (max-width: 720px) {
      .global-agent-chat-panel,
      .global-agent-chat-panel.expanded {
        width: calc(100vw - 18px);
        height: min(88vh, 860px);
        right: 9px;
        bottom: 9px;
      }
      .global-agent-chat-content {
        grid-template-columns: 1fr;
      }
      .global-agent-chat-hover-strip {
        display: none;
      }
      .global-agent-chat-sidebar {
        border-right: none;
        border-bottom: 1px solid var(--surface-pale-cool);
        max-height: 220px;
        opacity: 1 !important;
        pointer-events: auto !important;
        padding-left: 12px;
        padding-right: 12px;
      }
      .global-agent-chat-new-thread-overlay {
        padding: 12px;
      }
    }
    .global-agent-chat-content.compact-rail,
    .global-agent-chat-content.compact-rail.sidebar-revealed,
    .global-agent-chat-content.compact-rail.sidebar-pinned {
      grid-template-columns: minmax(0, 1fr) !important;
    }
    .global-agent-chat-content.compact-rail .global-agent-chat-main {
      min-width: 0;
    }
    .global-agent-chat-content.compact-rail .global-agent-chat-hover-strip {
      display: flex;
      left: 8px;
      top: 50%;
      bottom: auto;
      width: 28px;
      height: 112px;
      border: 1px solid var(--border-cool);
      border-radius: 12px;
      background: var(--surface-mint);
      opacity: 1;
      pointer-events: auto;
      transform: translateY(-50%);
      transition: opacity 0.16s ease, box-shadow 0.16s ease;
      z-index: 6;
      box-shadow: 5px 0 16px rgba(24, 35, 45, 0.05);
    }
    .global-agent-chat-content.compact-rail:not(.sidebar-revealed) .global-agent-chat-thread-bar,
    .global-agent-chat-content.compact-rail:not(.sidebar-revealed) .global-agent-chat-body,
    .global-agent-chat-content.compact-rail:not(.sidebar-revealed) .global-agent-chat-form {
      padding-left: 52px;
    }
    .global-agent-chat-content.compact-rail .global-agent-chat-hover-strip:hover {
      box-shadow: 7px 0 20px rgba(24, 35, 45, 0.09);
    }
    .global-agent-chat-content.compact-rail.sidebar-revealed .global-agent-chat-hover-strip {
      opacity: 0;
      pointer-events: none;
    }
    .global-agent-chat-content.compact-rail .global-agent-chat-sidebar,
    .global-agent-chat-content.compact-rail:not(.sidebar-revealed):not(.sidebar-pinned) .global-agent-chat-sidebar {
      position: absolute;
      inset: 0 auto 0 0;
      display: block;
      width: min(312px, calc(100% - 34px));
      max-height: none;
      border-right: 1px solid rgba(40, 60, 50, 0.08);
      border-bottom: none;
      border-radius: 0 16px 16px 0;
      box-shadow: 18px 0 38px rgba(20, 32, 40, 0.16);
      opacity: 0 !important;
      pointer-events: none !important;
      padding: 12px;
      transform: translateX(calc(-100% - 12px));
      transition: transform 0.18s ease, opacity 0.18s ease;
      /* Sits strictly above the chat list (.global-agent-chat-body
         creates the stacking context at z-index: 1). 10 ensures no
         future intermediate layer leaks through this panel. */
      z-index: 10;
      /* Opaque background — base rule sets #eaf3f6 but the explicit
         declaration here protects against any user-stylesheet or
         future inherit:transparent regression. No backdrop-filter.
         The chat content behind the panel must NEVER be visible
         through it. */
      background: var(--surface-pale-cool);
    }
    .global-agent-chat-content.compact-rail.sidebar-revealed .global-agent-chat-sidebar {
      opacity: 1 !important;
      pointer-events: auto !important;
      transform: translateX(0);
    }
    .global-agent-chat-content.compact-rail .global-agent-chat-sidebar-pin {
      background: rgba(255,255,255,0.9);
      color: var(--ink-slate);
      font-size: 18px;
      line-height: 1;
    }


    /* ============================================================
       2026-05-22 — Full-page "Opening …" overlay for hard-nav
       transitions. JS helper `window.showPageNavOverlay(label)`
       creates the element on first call + toggles `.is-visible`.
       Backdrop blurs the page underneath; centered card carries a
       spinner + status text. Disappears when the new page replaces
       the DOM, or after a 12s safety timeout (handled in JS).
       ============================================================ */
    .page-nav-overlay {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: none;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }
    .page-nav-overlay.is-visible {
      display: flex;
      pointer-events: auto;
      animation: pageNavOverlayFadeIn 160ms ease-out both;
    }
    @keyframes pageNavOverlayFadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    .page-nav-overlay-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(28, 51, 67, 0.45);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
    }
    .page-nav-overlay-panel {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      padding: 24px 32px;
      background: var(--surface-white, #ffffff);
      border: 1px solid rgba(40, 60, 50, 0.1);
      border-radius: 12px;
      box-shadow: 0 12px 40px rgba(28, 51, 67, 0.18);
      min-width: 200px;
      max-width: 380px;
      text-align: center;
    }
    .page-nav-overlay-spinner {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 3px solid rgba(40, 60, 50, 0.12);
      border-top-color: var(--brand-deep, #0f2a2e);
      animation: pageNavOverlaySpin 850ms linear infinite;
    }
    @keyframes pageNavOverlaySpin {
      to { transform: rotate(360deg); }
    }
    .page-nav-overlay-label {
      font-size: 13.5px;
      font-weight: 800;
      color: var(--brand-deep, #0f2a2e);
      letter-spacing: 0.02em;
    }
    @media (prefers-reduced-motion: reduce) {
      .page-nav-overlay-spinner {
        animation: none;
      }
      .page-nav-overlay.is-visible {
        animation: none;
      }
    }