/*
 * KU Alumni design system — AI surfaces.
 *
 * The AI decision brief embedded in the Employment, Unemployment and
 * employer / job-title focus pages, the AI assistant (#ai-chat, shared with the
 * brief's Chat tab) and the AI activity audit (#ai-runs).
 *
 * Declarations live in the `ku` cascade layer with !important so they outrank
 * the legacy AI stylesheets. Values that scripts set inline (progress widths,
 * forecast tone variables, textarea height) are read, never overridden.
 */

@layer ku {
  /* ================================================================ brief */

  .ai-analytics-mount {
    margin: 0 0 28px !important;
    scroll-margin-top: calc(var(--topbar-h) + 20px) !important;
  }

  .ai-analytics-mount:empty {
    display: none !important;
  }

  .ai-decision-brief {
    position: relative !important;
    isolation: auto !important;
    overflow: visible !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--ink) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .ai-decision-brief::before,
  .ai-decision-brief::after {
    display: none !important;
  }

  /* Header card */

  .ai-brief-header {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    min-height: 0 !important;
    margin: 0 0 14px !important;
    padding: 26px 28px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-xl) !important;
    color: var(--ink) !important;
    background-color: var(--surface) !important;
    background-image: none !important;
    box-shadow: var(--shadow-2) !important;
    overflow: hidden !important;
  }

  .ai-brief-identity {
    display: flex !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .ai-brief-copy {
    display: grid !important;
    justify-items: start !important;
    gap: 0 !important;
    min-width: 0 !important;
  }

  .ai-brief-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 26px !important;
    margin: 0 0 12px !important;
    padding: 0 11px 0 8px !important;
    border-radius: var(--r-pill) !important;
    color: var(--brand-strong) !important;
    background: var(--brand-soft) !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .ai-brief-eyebrow::before {
    content: "" !important;
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230a58ca' d='M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
  }

  .ai-brief-eyebrow b {
    color: inherit !important;
    font-weight: 600 !important;
  }

  .ai-brief-header h2 {
    max-width: none !important;
    margin: 0 !important;
    color: var(--ink) !important;
    font-size: clamp(24px, 2.1vw, 30px) !important;
    font-weight: 480 !important;
    line-height: 1.12 !important;
    letter-spacing: -.028em !important;
    overflow-wrap: anywhere !important;
  }

  .ai-scope-meta-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 10px 0 0 !important;
  }

  .ai-brief-header .ai-scope-meta {
    margin: 0 !important;
    color: var(--ink-3) !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  .ai-brief-header .ai-scope-meta:empty {
    display: none !important;
  }

  .ai-status-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 0 !important;
    height: 24px !important;
    padding: 0 10px 0 9px !important;
    border: 0 !important;
    border-radius: var(--r-pill) !important;
    color: var(--warning-ink) !important;
    background: var(--warning-soft) !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-transform: none !important;
  }

  .ai-status-tag::before {
    content: "" !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--warning) !important;
  }

  .ai-status-tag[data-tone="caution"] {
    color: var(--heat-700) !important;
    background: var(--heat-100) !important;
  }

  .ai-status-tag[data-tone="caution"]::before {
    background: var(--heat-500) !important;
  }

  .ai-brief-actions {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: auto !important;
    margin: 0 0 0 auto !important;
  }

  /* Buttons */

  .ai-decision-brief .ai-primary-button,
  .ai-empty-state .ai-primary-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 20px 0 18px !important;
    border: 1px solid var(--ink) !important;
    border-radius: var(--r-pill) !important;
    color: var(--on-dark) !important;
    background: var(--ink) !important;
    box-shadow: 0 10px 22px -12px rgba(13, 15, 20, .7) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transform: none !important;
    transition: background-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease) !important;
  }

  .ai-decision-brief .ai-primary-button[data-ai-run]::before {
    content: "" !important;
    display: block !important;
    width: 15px !important;
    height: 15px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
  }

  .ai-decision-brief .ai-primary-button:hover:not(:disabled),
  .ai-empty-state .ai-primary-button:hover:not(:disabled) {
    border-color: var(--ink-hover) !important;
    color: #ffffff !important;
    background: var(--ink-hover) !important;
    box-shadow: 0 14px 26px -12px rgba(13, 15, 20, .75) !important;
    transform: translateY(-1px) !important;
  }

  .ai-decision-brief .ai-primary-button:active:not(:disabled) {
    transform: translateY(0) scale(.98) !important;
  }

  .ai-decision-brief .ai-primary-button:disabled {
    opacity: .55 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
  }

  .ai-decision-brief .ai-primary-button.danger,
  .ai-brief-header .ai-primary-button.danger {
    border-color: rgba(208, 59, 59, .18) !important;
    color: var(--critical-ink) !important;
    background: var(--critical-soft) !important;
    box-shadow: none !important;
  }

  .ai-decision-brief .ai-primary-button.danger:hover:not(:disabled),
  .ai-brief-header .ai-primary-button.danger:hover:not(:disabled) {
    border-color: rgba(208, 59, 59, .32) !important;
    color: var(--critical-ink) !important;
    background: #fbdede !important;
    box-shadow: none !important;
  }

  .ai-decision-brief .ai-secondary-button,
  .ai-evidence-focus-banner .ai-secondary-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 16px !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-pill) !important;
    color: var(--ink) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-1) !important;
    backdrop-filter: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    transform: none !important;
  }

  .ai-decision-brief .ai-secondary-button:hover:not(:disabled),
  .ai-evidence-focus-banner .ai-secondary-button:hover:not(:disabled) {
    border-color: var(--line-strong) !important;
    color: var(--ink) !important;
    background: var(--surface-2) !important;
    box-shadow: var(--shadow-1) !important;
  }

  .ai-decision-brief .ai-link-button,
  .ai-generation-actions .ai-link-button,
  .ai-decision-brief .ai-suggestion-card .ai-link-button,
  .ai-decision-brief .ai-semester-forecast-card .ai-link-button,
  .ai-source-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-pill) !important;
    color: var(--ink) !important;
    background: var(--surface) !important;
    box-shadow: none !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transform: none !important;
    transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease) !important;
  }

  .ai-decision-brief .ai-link-button[data-ai-view-evidence]::after,
  .ai-generation-actions .ai-link-button[data-ai-open-generation]::after,
  .ai-source-link::after {
    content: "\2192" !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: transform var(--fast) var(--ease) !important;
  }

  .ai-decision-brief .ai-link-button:hover:not(:disabled),
  .ai-generation-actions .ai-link-button:hover:not(:disabled),
  .ai-decision-brief .ai-suggestion-card .ai-link-button:hover:not(:disabled),
  .ai-decision-brief .ai-semester-forecast-card .ai-link-button:hover:not(:disabled),
  .ai-source-link:hover {
    border-color: var(--ink) !important;
    color: var(--on-dark) !important;
    background: var(--ink) !important;
  }

  .ai-decision-brief .ai-link-button:hover::after,
  .ai-generation-actions .ai-link-button:hover::after,
  .ai-source-link:hover::after {
    transform: translateX(2px) !important;
  }

  .ai-card-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 16px 0 0 !important;
    padding: 0 !important;
  }

  .ai-decision-brief button:focus-visible,
  .ai-decision-brief a:focus-visible,
  .ai-decision-brief textarea:focus-visible,
  #ai-runs button:focus-visible,
  #ai-runs summary:focus-visible,
  .wc-shell button:focus-visible,
  .wc-transcript:focus-visible {
    outline: 2px solid var(--brand) !important;
    outline-offset: 2px !important;
  }

  /* Alerts and live progress */

  .ai-brief-alerts {
    display: grid !important;
    gap: 10px !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
  }

  .ai-brief-alerts:empty {
    display: none !important;
  }

  .ai-state-banner {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 2px 10px !important;
    margin: 0 !important;
    padding: 15px 20px 15px 42px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-lg) !important;
    color: var(--ink-2) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-1) !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  .ai-state-banner::before {
    content: "" !important;
    position: absolute !important;
    top: 21px !important;
    left: 20px !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--brand) !important;
    box-shadow: 0 0 0 4px var(--brand-soft) !important;
  }

  .ai-state-banner strong {
    color: var(--ink) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
  }

  .ai-state-banner span {
    color: var(--ink-2) !important;
  }

  .ai-decision-brief .ai-state-banner.warning {
    border-color: rgba(250, 178, 25, .3) !important;
    color: var(--ink-2) !important;
    background: var(--warning-soft) !important;
  }

  .ai-decision-brief .ai-state-banner.warning::before {
    background: var(--warning) !important;
    box-shadow: 0 0 0 4px rgba(250, 178, 25, .2) !important;
  }

  .ai-state-banner.danger {
    border-color: rgba(208, 59, 59, .2) !important;
    background: var(--critical-soft) !important;
  }

  .ai-state-banner.danger::before {
    background: var(--critical) !important;
    box-shadow: 0 0 0 4px rgba(208, 59, 59, .14) !important;
  }

  .ai-progress-card,
  .ai-decision-brief .ai-progress-card {
    margin: 0 !important;
    padding: 20px 22px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-lg) !important;
    color: var(--ink) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-1) !important;
  }

  .ai-progress-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
  }

  .ai-progress-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
  }

  .ai-progress-spinner {
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    border: 2.5px solid var(--brand-soft) !important;
    border-top-color: var(--brand) !important;
    border-radius: 50% !important;
  }

  .ai-decision-brief .ai-progress-title-row strong,
  .ai-progress-title-row strong {
    display: block !important;
    color: var(--ink) !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
  }

  .ai-decision-brief .ai-progress-stage,
  .ai-progress-stage {
    display: block !important;
    margin: 2px 0 0 !important;
    color: var(--ink-3) !important;
    font-size: 12.5px !important;
  }

  .ai-decision-brief .ai-progress-percent,
  .ai-progress-percent {
    color: var(--ink) !important;
    font-size: 22px !important;
    font-weight: 420 !important;
    letter-spacing: -.02em !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
  }

  .ai-decision-brief .ai-progress-track,
  .ai-progress-track {
    height: 8px !important;
    margin: 16px 0 0 !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: var(--track) !important;
    overflow: hidden !important;
  }

  .ai-progress-track span {
    border-radius: 4px !important;
    background: var(--brand) !important;
    box-shadow: none !important;
  }

  .ai-progress-steps {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 14px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .ai-progress-step {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    height: 28px !important;
    padding: 0 12px 0 10px !important;
    border-radius: var(--r-pill) !important;
    color: var(--ink-3) !important;
    background: var(--surface-2) !important;
    font-size: 12px !important;
    font-weight: 550 !important;
    line-height: 1 !important;
  }

  .ai-progress-step-marker {
    width: 7px !important;
    height: 7px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--ink-4) !important;
    box-shadow: none !important;
  }

  .ai-progress-step.is-done {
    color: var(--good-ink) !important;
    background: var(--good-soft) !important;
  }

  .ai-progress-step.is-done .ai-progress-step-marker {
    background: var(--good) !important;
  }

  .ai-progress-step.is-active {
    color: var(--brand-strong) !important;
    background: var(--brand-soft) !important;
    font-weight: 600 !important;
  }

  .ai-progress-step.is-active .ai-progress-step-marker {
    background: var(--brand) !important;
    box-shadow: 0 0 0 3px rgba(10, 88, 202, .18) !important;
  }

  .ai-decision-brief .ai-progress-card p,
  .ai-progress-card p {
    margin: 14px 0 0 !important;
    color: var(--ink-3) !important;
    font-size: 12.5px !important;
  }

  /* Tabs — segmented pill control */

  .ai-brief-workspace,
  .ai-analytics-mount .ai-brief-workspace {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .ai-brief-tabs,
  .ai-brief-workspace > .ai-brief-tabs {
    display: inline-flex !important;
    flex-direction: row !important;
    align-self: flex-start !important;
    align-items: center !important;
    gap: 2px !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 0 16px !important;
    padding: 4px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-pill) !important;
    background: var(--glass-strong) !important;
    box-shadow: var(--shadow-1) !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  .ai-brief-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .ai-brief-tabs button {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: var(--r-pill) !important;
    color: var(--ink-2) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 13.5px !important;
    font-weight: 520 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    transform: none !important;
    transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease) !important;
  }

  .ai-brief-tabs button:hover {
    color: var(--ink) !important;
    background: rgba(13, 15, 20, .05) !important;
  }

  .ai-brief-tabs button[aria-selected="true"],
  .ai-brief-tabs button[aria-selected="true"]:hover {
    color: var(--on-dark) !important;
    background: var(--ink) !important;
    box-shadow: 0 6px 16px -8px rgba(13, 15, 20, .55) !important;
  }

  .ai-brief-panels,
  .ai-brief-workspace > .ai-brief-panels,
  .ai-analytics-mount .ai-brief-panels {
    display: block !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .ai-brief-panels > [role="tabpanel"],
  .ai-analytics-mount .ai-brief-panels > [role="tabpanel"] {
    min-height: 0 !important;
    padding: 0 !important;
  }

  /* Shared section heading + count */

  .ai-section-heading,
  .ai-overview-section .ai-section-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    margin: 0 0 16px !important;
  }

  .ai-overview-section h3,
  .ai-executive-summary h3,
  .ai-keep-in-mind h3,
  .ai-evidence-group h3,
  .ai-forecast-section > header h3,
  .ai-section-heading h3 {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 !important;
    color: var(--ink) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: -.015em !important;
  }

  .ai-count-badge,
  .ai-forecast-section > header > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 26px !important;
    height: 24px !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: var(--r-pill) !important;
    color: var(--ink-2) !important;
    background: var(--surface-3) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums !important;
  }

  .ai-section-empty,
  .ai-empty-secondary {
    margin: 0 !important;
    color: var(--ink-3) !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  /* ============================================================= overview */

  .ai-overview-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .ai-overview-signals {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 16px !important;
  }

  .ai-executive-summary,
  .ai-overview-section,
  .ai-keep-in-mind {
    min-width: 0 !important;
    padding: 24px 26px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-xl) !important;
    color: var(--ink) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-1) !important;
  }

  .ai-executive-summary {
    display: grid !important;
    grid-template-columns: minmax(160px, .22fr) minmax(0, 1fr) !important;
    gap: 8px 28px !important;
  }

  .ai-executive-summary h3 {
    align-self: start !important;
    color: var(--ink-3) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
  }

  .ai-executive-summary h3::before {
    content: "" !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--brand) !important;
    box-shadow: 0 0 0 4px var(--brand-soft) !important;
  }

  .ai-executive-summary p,
  .ai-executive-summary > .ai-executive-copy > p {
    max-width: 118ch !important;
    margin: 0 !important;
    color: var(--ink) !important;
    font-size: 15.5px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    letter-spacing: -.003em !important;
    text-wrap: pretty !important;
  }

  .ai-overview-section:has(.ai-positive-list) .ai-section-heading h3::before,
  .ai-overview-section:has(.ai-risk-list) .ai-section-heading h3::before,
  .ai-overview-section:has(.ai-suggestion-list) .ai-section-heading h3::before {
    content: "" !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--good) !important;
  }

  .ai-overview-section:has(.ai-risk-list) .ai-section-heading h3::before {
    background: var(--critical) !important;
  }

  .ai-overview-section:has(.ai-suggestion-list) .ai-section-heading h3::before {
    background: var(--ink) !important;
  }

  .ai-card-list {
    display: grid !important;
    gap: 12px !important;
  }

  .ai-positive-list,
  .ai-risk-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Insight cards (positives and risks) */

  .ai-insight-card {
    position: relative !important;
    min-width: 0 !important;
    padding: 18px 20px 18px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-lg) !important;
    color: var(--ink) !important;
    background: var(--surface-2) !important;
    box-shadow: none !important;
  }

  .ai-card-heading {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  .ai-card-type {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 10px 0 9px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-pill) !important;
    color: var(--ink-2) !important;
    background: var(--surface) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-transform: none !important;
  }

  .ai-card-type::before {
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: var(--ink-4) !important;
  }

  .ai-insight-positive .ai-card-type {
    color: var(--good-ink) !important;
  }

  .ai-insight-positive .ai-card-type::before {
    background: var(--good) !important;
  }

  .ai-insight-risk .ai-card-type {
    color: var(--critical-ink) !important;
  }

  .ai-insight-risk .ai-card-type::before {
    background: var(--critical) !important;
  }

  .ai-strength-badge {
    display: inline-flex !important;
    align-items: center !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: var(--r-pill) !important;
    color: var(--ink-2) !important;
    background: var(--surface-3) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-transform: none !important;
  }

  .ai-insight-positive .ai-strength-badge-high {
    color: var(--good-ink) !important;
    background: var(--good-soft) !important;
  }

  .ai-insight-risk .ai-strength-badge-high {
    color: var(--critical-ink) !important;
    background: var(--critical-soft) !important;
  }

  .ai-insight-risk .ai-strength-badge-medium {
    color: var(--warning-ink) !important;
    background: var(--warning-soft) !important;
  }

  .ai-strength-badge-low {
    color: var(--ink-3) !important;
  }

  .ai-insight-positive.ai-strength-high,
  .ai-insight-risk.ai-strength-high {
    box-shadow: none !important;
  }

  .ai-insight-card h4 {
    margin: 14px 0 6px !important;
    color: var(--ink) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.38 !important;
    letter-spacing: -.008em !important;
  }

  .ai-insight-card p {
    margin: 0 !important;
    color: var(--ink-2) !important;
    font-size: 13.5px !important;
    line-height: 1.62 !important;
  }

  .ai-insight-implication {
    margin: 14px 0 0 !important;
    padding: 14px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--line) !important;
  }

  .ai-insight-implication > span {
    display: block !important;
    margin: 0 0 4px !important;
    color: var(--ink) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .ai-insight-implication p {
    color: var(--ink-2) !important;
    font-size: 13px !important;
  }

  .ai-evidence-strip {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 12px 0 0 !important;
  }

  .ai-evidence-strip span {
    display: inline-flex !important;
    align-items: center !important;
    height: 26px !important;
    padding: 0 10px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-pill) !important;
    color: var(--ink-2) !important;
    background: var(--surface) !important;
    font-size: 12px !important;
    font-weight: 550 !important;
    font-variant-numeric: tabular-nums !important;
  }

  /* Suggested actions */

  .ai-decision-brief .ai-suggestion-list {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-columns: none !important;
    grid-auto-columns: minmax(min(86%, 300px), 1fr) !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin: 0 -4px !important;
    padding: 2px 4px 10px !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
    scroll-snap-type: x proximity !important;
    scroll-padding-inline: 4px !important;
  }

  .ai-suggestion-card {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    padding: 18px 18px 16px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-lg) !important;
    color: var(--ink) !important;
    background: var(--surface-2) !important;
    box-shadow: none !important;
    scroll-snap-align: start !important;
  }

  .ai-suggestion-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .ai-suggestion-heading > div:first-child {
    display: grid !important;
    justify-items: start !important;
    gap: 12px !important;
  }

  .ai-priority-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    height: 26px !important;
    padding: 0 11px 0 9px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-pill) !important;
    color: var(--ink) !important;
    background: var(--surface) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-transform: none !important;
    font-variant-numeric: tabular-nums !important;
  }

  .ai-priority-badge::before {
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: var(--ink-4) !important;
  }

  .ai-suggestion-card[data-priority="1"] .ai-priority-badge::before {
    background: var(--critical) !important;
  }

  .ai-suggestion-card[data-priority="2"] .ai-priority-badge::before {
    background: var(--serious) !important;
  }

  .ai-suggestion-card[data-priority="3"] .ai-priority-badge::before {
    background: var(--warning) !important;
  }

  .ai-suggestion-heading h4,
  .ai-suggestion-card h4 {
    margin: 0 !important;
    color: var(--ink) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.38 !important;
    letter-spacing: -.008em !important;
  }

  .ai-suggestion-responsibility {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 12px 0 !important;
    border: 0 !important;
    border-block: 1px solid var(--line) !important;
  }

  .ai-suggestion-responsibility > div {
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
  }

  .ai-suggestion-responsibility span,
  .ai-suggestion-audience > span,
  .ai-suggestion-action-plan > span,
  .ai-suggestion-outcome-heading {
    display: block !important;
    color: var(--ink-3) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: .01em !important;
    line-height: 1.3 !important;
    text-transform: none !important;
  }

  .ai-suggestion-responsibility strong {
    color: var(--ink) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
  }

  .ai-suggestion-plan {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    margin: 14px 0 0 !important;
  }

  .ai-suggestion-work {
    display: grid !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  .ai-suggestion-audience {
    margin: 0 !important;
    padding: 0 2px !important;
    border: 0 !important;
  }

  .ai-suggestion-card p,
  .ai-suggestion-audience p,
  .ai-suggestion-action-plan p,
  .ai-suggestion-outcome p {
    margin: 4px 0 0 !important;
    color: var(--ink-2) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.58 !important;
  }

  .ai-suggestion-action-plan,
  .ai-suggestion-outcome {
    display: grid !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 14px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-md) !important;
    background: var(--surface) !important;
    box-shadow: none !important;
  }

  .ai-suggestion-action-plan p {
    color: var(--ink) !important;
    font-size: 13.5px !important;
  }

  .ai-suggestion-outcome-heading {
    margin: 0 0 2px !important;
  }

  .ai-suggestion-outcome > div {
    padding: 10px 0 0 !important;
    border: 0 !important;
  }

  .ai-suggestion-outcome > div + div {
    margin-top: 10px !important;
    border-top: 1px solid var(--hairline) !important;
  }

  .ai-suggestion-outcome strong {
    color: var(--ink) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
  }

  .ai-suggestion-card .ai-why,
  .ai-suggestion-context {
    margin: 14px 0 0 !important;
    padding: 14px 2px 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--line) !important;
    color: var(--ink-3) !important;
    font-size: 12.5px !important;
    line-height: 1.55 !important;
  }

  .ai-suggestion-card .ai-why strong,
  .ai-suggestion-context strong {
    color: var(--ink-2) !important;
    font-weight: 600 !important;
  }

  .ai-suggestion-card > .ai-card-links {
    margin-top: auto !important;
    padding-top: 16px !important;
  }

  .ai-keep-in-mind ul {
    margin: 12px 0 0 !important;
    padding-left: 18px !important;
    color: var(--ink-2) !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
  }

  /* ============================================================ forecasts */

  .ai-forecasts-layout,
  .ai-forecast-sections {
    display: grid !important;
    gap: 30px !important;
  }

  .ai-forecast-section {
    display: grid !important;
    gap: 14px !important;
  }

  .ai-forecast-section > header {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 4px 4px 0 !important;
    border: 0 !important;
  }

  .ai-forecast-section > header p {
    margin: 4px 0 0 !important;
    color: var(--ink-3) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  .ai-semester-forecast-grid {
    gap: 16px !important;
    align-items: stretch !important;
  }

  .ai-semester-forecast-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    padding: 22px 22px 18px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-xl) !important;
    color: var(--ink) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-1) !important;
    overflow: hidden !important;
  }

  .ai-semester-forecast-card-heading {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .ai-semester-forecast-card-heading > div:first-child {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  .ai-semester-forecast-card-heading h4 {
    margin: 0 !important;
    color: var(--ink) !important;
    font-size: 15.5px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: -.01em !important;
  }

  .ai-forecast-rank {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 30px !important;
    height: 24px !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: var(--r-pill) !important;
    color: var(--ink-2) !important;
    background: var(--surface-3) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums !important;
  }

  .ai-semester-values {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 16px 0 14px !important;
    padding: 16px 18px !important;
    border: 0 !important;
    border-radius: var(--r-md) !important;
    background: var(--surface-2) !important;
  }

  .ai-semester-current-value > span,
  .ai-semester-values .ai-semester-predicted-value > span,
  .ai-semester-predicted-value span {
    display: block !important;
    color: var(--ink-3) !important;
    font-size: 12px !important;
    font-weight: 550 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .ai-semester-values strong,
  .ai-semester-values .ai-semester-predicted-value strong,
  .ai-semester-predicted-value strong {
    display: block !important;
    margin: 4px 0 2px !important;
    color: var(--ink) !important;
    font-size: 30px !important;
    font-weight: 420 !important;
    line-height: 1.1 !important;
    letter-spacing: -.035em !important;
    font-variant-numeric: tabular-nums !important;
  }

  .ai-semester-values small {
    display: block !important;
    color: var(--ink-3) !important;
    font-size: 12px !important;
  }

  .ai-semester-values-arrow {
    display: inline-grid !important;
    place-items: center !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    color: var(--ink-3) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-1) !important;
    font-size: 15px !important;
  }

  .ai-semester-chart-legend {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 16px !important;
    margin: 0 0 4px !important;
    color: var(--ink-3) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
  }

  .ai-semester-chart-legend span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .ai-semester-chart-legend .is-actual::before {
    border-top-color: var(--ink-3) !important;
  }

  .ai-semester-forecast-chart {
    margin: 0 !important;
  }

  .ai-semester-chart-gridline {
    stroke: var(--line) !important;
  }

  .ai-semester-chart-baseline {
    stroke: var(--line-strong) !important;
  }

  .ai-semester-axis-label {
    fill: var(--ink-3) !important;
    font-family: var(--font-sans) !important;
    font-size: 15px !important;
    font-variant-numeric: tabular-nums !important;
  }

  .ai-semester-history-line {
    stroke: var(--ink-3) !important;
  }

  .ai-semester-history-point {
    fill: var(--surface) !important;
    stroke: var(--ink-3) !important;
  }

  .ai-semester-forecast-divider {
    stroke: var(--ink-4) !important;
  }

  .ai-semester-history-caption {
    margin: 4px 0 14px !important;
    color: var(--ink-3) !important;
    font-size: 12px !important;
  }

  .ai-semester-forecast-card .ai-semester-change-strip,
  .ai-semester-change-strip {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 8px 14px !important;
    border: 0 !important;
    border-radius: var(--r-md) !important;
    color: var(--ink) !important;
    background: color-mix(in srgb, var(--ai-forecast-tone) 9%, var(--surface)) !important;
  }

  .ai-semester-change-strip strong {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--ink) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums !important;
  }

  .ai-semester-change-strip strong::before {
    content: "" !important;
    flex: 0 0 auto !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--ai-forecast-tone) !important;
  }

  .ai-semester-forecast-card .ai-semester-change-strip span {
    color: var(--ink-2) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums !important;
  }

  .ai-semester-forecast-meta {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 8px 0 0 !important;
  }

  .ai-semester-forecast-meta span {
    display: block !important;
    padding: 10px 12px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-md) !important;
    color: var(--ink) !important;
    background: var(--surface) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums !important;
  }

  .ai-semester-forecast-meta b {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 0 4px !important;
    color: var(--ink-3) !important;
    font-size: 11.5px !important;
    font-weight: 550 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .ai-semester-forecast-meta b::before {
    content: "" !important;
    flex: 0 0 auto !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: var(--ai-forecast-metric-tone, var(--ink-4)) !important;
  }

  .ai-forecast-rationale,
  .ai-semester-forecast-card .ai-forecast-rationale {
    display: grid !important;
    gap: 12px !important;
    margin: 12px 0 0 !important;
    padding: 16px !important;
    border: 0 !important;
    border-radius: var(--r-md) !important;
    background: var(--surface-2) !important;
  }

  .ai-forecast-rationale > span,
  .ai-forecast-rationale-block > b {
    display: block !important;
    color: var(--ink) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .ai-forecast-rationale > p,
  .ai-forecast-rationale-block > p {
    margin: 0 !important;
    color: var(--ink-2) !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  .ai-forecast-rationale-block {
    display: grid !important;
    gap: 4px !important;
  }

  .ai-forecast-rationale-block + .ai-forecast-rationale-block {
    margin: 0 !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid var(--line) !important;
  }

  .ai-semester-forecast-card > .ai-card-links {
    margin: 14px 0 16px !important;
  }

  .ai-prediction-footer {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px 14px !important;
    margin: auto 0 0 !important;
    padding: 14px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--hairline) !important;
  }

  .ai-forecast-rationale:has(+ .ai-prediction-footer) {
    margin-bottom: 16px !important;
  }

  .ai-prediction-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .ai-prediction-actions .chart-tooltip-forecast-button {
    display: inline-flex !important;
    align-items: center !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-pill) !important;
    color: var(--ink) !important;
    background: var(--surface-2) !important;
    box-shadow: none !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
  }

  .ai-prediction-actions .chart-tooltip-forecast-button:hover:not(:disabled) {
    border-color: var(--line-strong) !important;
    background: var(--surface-3) !important;
  }

  .ai-prediction-actions [data-ai-reforecast-status] {
    color: var(--ink-3) !important;
    font-size: 12px !important;
    font-weight: 550 !important;
  }

  .ai-prediction-actions [data-ai-reforecast-status][data-tone="error"] {
    color: var(--critical-ink) !important;
  }

  .ai-prediction-run-meta,
  .ai-prediction-footer .ai-prediction-run-meta {
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--ink-3) !important;
    font-size: 12px !important;
  }

  .ai-prediction-run-meta strong {
    color: var(--ink-3) !important;
    font-weight: 500 !important;
    font-variant-numeric: tabular-nums !important;
  }

  /* Compact forecast cards (no semester history) */

  .ai-forecast-card {
    min-width: 0 !important;
    padding: 20px 22px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-xl) !important;
    color: var(--ink) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-1) !important;
  }

  .ai-forecast-card .ai-card-heading h4 {
    margin: 0 !important;
    color: var(--ink) !important;
    font-size: 15.5px !important;
    font-weight: 600 !important;
  }

  .ai-forecast-metrics {
    gap: 8px !important;
    margin: 14px 0 0 !important;
  }

  .ai-forecast-metric {
    padding: 12px !important;
    border: 0 !important;
    border-radius: var(--r-md) !important;
    background: var(--surface-2) !important;
  }

  .ai-forecast-metric-label {
    color: var(--ink-3) !important;
    font-size: 11.5px !important;
    font-weight: 550 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .ai-forecast-metric-value,
  .ai-forecast-metric-value.ai-forecast-value,
  .ai-forecast-value {
    color: var(--ink) !important;
    font-size: 20px !important;
    font-weight: 450 !important;
    letter-spacing: -.02em !important;
    font-variant-numeric: tabular-nums !important;
  }

  .ai-forecast-metric-period {
    color: var(--ink-3) !important;
    font-size: 11.5px !important;
  }

  .ai-forecast-unavailable {
    margin: 14px 0 4px !important;
    color: var(--ink) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
  }

  .ai-forecast-review-note {
    margin: 0 0 8px !important;
    color: var(--warning-ink) !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }

  .ai-confidence {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 0 !important;
    height: 24px !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: var(--r-pill) !important;
    color: var(--ink-2) !important;
    background: var(--surface-3) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .ai-confidence[data-rating="high"] {
    color: var(--good-ink) !important;
    background: var(--good-soft) !important;
  }

  .ai-confidence[data-rating="medium"] {
    color: var(--brand-strong) !important;
    background: var(--brand-soft) !important;
  }

  .ai-confidence[data-rating="low"],
  .ai-confidence[data-rating="review"] {
    color: var(--warning-ink) !important;
    background: var(--warning-soft) !important;
  }

  .ai-confidence[data-rating="unavailable"] {
    color: var(--ink-3) !important;
  }

  /* ============================================================= evidence */

  .ai-evidence-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 30px !important;
  }

  .ai-evidence-group {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    min-width: 0 !important;
  }

  .ai-evidence-group h3 {
    padding: 4px 4px 0 !important;
  }

  .ai-evidence-grid {
    display: block !important;
    columns: 4 250px !important;
    column-gap: 14px !important;
  }

  .ai-evidence-group:has(.ai-evidence-table) .ai-evidence-grid {
    columns: 2 440px !important;
  }

  .ai-evidence-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 14px !important;
    break-inside: avoid !important;
    padding: 20px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-lg) !important;
    color: var(--ink) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-1) !important;
    overflow: hidden !important;
    transition: box-shadow 200ms var(--ease) !important;
  }

  .ai-evidence-card:hover {
    box-shadow: var(--shadow-2) !important;
  }

  .ai-evidence-card h4 {
    margin: 0 0 8px !important;
    color: var(--ink) !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    line-height: 1.38 !important;
    letter-spacing: -.005em !important;
  }

  .ai-evidence-value {
    display: block !important;
    margin: 2px 0 10px !important;
    color: var(--ink) !important;
    font-size: 28px !important;
    font-weight: 420 !important;
    line-height: 1.1 !important;
    letter-spacing: -.035em !important;
    font-variant-numeric: tabular-nums !important;
  }

  .ai-evidence-card p {
    margin: 0 0 4px !important;
    color: var(--ink-2) !important;
    font-size: 13px !important;
    line-height: 1.58 !important;
  }

  .ai-evidence-meta {
    display: grid !important;
    gap: 7px !important;
    margin: 12px 0 0 !important;
    padding: 14px 0 0 !important;
    border-top: 1px solid var(--hairline) !important;
  }

  .ai-evidence-meta > div {
    display: grid !important;
    grid-template-columns: 104px minmax(0, 1fr) !important;
    gap: 10px !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }

  .ai-evidence-meta dt {
    margin: 0 !important;
    color: var(--ink-3) !important;
    font-weight: 500 !important;
  }

  .ai-evidence-meta dd,
  .ai-evidence-card .ai-evidence-meta dd {
    margin: 0 !important;
    color: var(--ink-2) !important;
  }

  .ai-evidence-card > .ai-source-link {
    align-self: flex-start !important;
    margin-top: 14px !important;
  }

  .ai-evidence-layout.is-focused .ai-evidence-card {
    border-color: rgba(10, 88, 202, .22) !important;
    box-shadow: 0 0 0 3px var(--brand-wash), var(--shadow-1) !important;
  }

  .ai-evidence-focus-banner {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px 20px !important;
    padding: 18px 20px !important;
    border: 1px solid rgba(10, 88, 202, .14) !important;
    border-radius: var(--r-lg) !important;
    background: var(--brand-wash) !important;
  }

  .ai-evidence-focus-copy strong {
    color: var(--ink) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  .ai-evidence-focus-copy p {
    margin: 0 !important;
    color: var(--ink-2) !important;
    font-size: 13px !important;
  }

  .ai-evidence-focus-copy em {
    color: var(--ink) !important;
    font-style: normal !important;
    font-weight: 600 !important;
  }

  .ai-evidence-focus-note {
    margin: 0 !important;
    color: var(--warning-ink) !important;
    font-size: 12.5px !important;
  }

  .ai-evidence-table-wrap {
    max-height: 340px !important;
    margin: 6px 0 0 !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-md) !important;
    overflow: auto !important;
  }

  .ai-evidence-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  .ai-evidence-table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
    padding: 9px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    color: var(--ink-3) !important;
    background: var(--surface-2) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    text-align: right !important;
  }

  .ai-evidence-table thead th:first-child {
    text-align: left !important;
  }

  .ai-evidence-table tbody th,
  .ai-evidence-table tbody td {
    position: static !important;
    padding: 9px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--surface-3) !important;
    color: var(--ink-2) !important;
    background: transparent !important;
    font-size: 12.5px !important;
    font-weight: 450 !important;
    text-align: right !important;
    white-space: normal !important;
    font-variant-numeric: tabular-nums !important;
  }

  .ai-evidence-table tbody td {
    white-space: nowrap !important;
  }

  .ai-evidence-table tbody th {
    min-width: 150px !important;
    color: var(--ink) !important;
    font-weight: 500 !important;
    text-align: left !important;
  }

  .ai-evidence-table tbody tr:nth-child(even) th,
  .ai-evidence-table tbody tr:nth-child(even) td {
    background: transparent !important;
  }

  .ai-evidence-table tbody tr:last-child th,
  .ai-evidence-table tbody tr:last-child td {
    border-bottom: 0 !important;
  }

  /* =================================================== empty and loading */

  .ai-empty-state,
  .ai-analytics-mount .ai-empty-state {
    display: grid !important;
    justify-items: start !important;
    gap: 8px !important;
    min-height: 0 !important;
    padding: 32px 30px !important;
    border: 1px dashed var(--line-strong) !important;
    border-radius: var(--r-xl) !important;
    color: var(--ink-3) !important;
    background: rgba(255, 255, 255, .55) !important;
    box-shadow: none !important;
  }

  .ai-empty-state::before {
    content: "" !important;
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 0 6px !important;
    border-radius: 14px !important;
    background-color: var(--brand-soft) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230a58ca' d='M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 18px !important;
  }

  .ai-empty-state h4 {
    margin: 0 !important;
    color: var(--ink) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: -.01em !important;
  }

  .ai-empty-state p {
    max-width: 62ch !important;
    margin: 0 !important;
    color: var(--ink-3) !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
  }

  .ai-empty-state .ai-primary-button {
    margin-top: 8px !important;
  }

  .ai-decision-brief.ai-brief-loading {
    min-height: 0 !important;
    padding: 0 0 26px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-xl) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-2) !important;
    overflow: hidden !important;
  }

  .ai-brief-loading .ai-brief-header {
    min-height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .ai-skeleton-line,
  .ai-skeleton-grid span {
    height: 12px !important;
    margin: 16px 28px 0 !important;
    border-radius: var(--r-pill) !important;
    background-color: var(--surface-3) !important;
    background-image: none !important;
    background-size: 220% 100% !important;
  }

  .ai-skeleton-grid {
    gap: 14px !important;
    margin: 22px 28px 0 !important;
  }

  .ai-skeleton-grid span {
    height: 96px !important;
    margin: 0 !important;
    border-radius: var(--r-lg) !important;
  }

  /* ====================================================== embedded chat */

  .ai-brief-panels > [role="tabpanel"][data-ai-panel="chat"]:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    padding: 10px 14px 14px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-xl) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-1) !important;
  }

  .wc-embedded {
    height: clamp(460px, 70dvh, 780px) !important;
    min-height: 0 !important;
  }

  .wc-embedded .wc-welcome.ai-chat-welcome {
    margin-top: clamp(20px, 7vh, 72px) !important;
  }

  .wc-embedded .ai-chat-message.assistant .ai-chat-assistant-body {
    border-color: transparent !important;
    background: var(--surface-2) !important;
    box-shadow: none !important;
  }

  /* ============================================================ AI chat */

  /* The assistant opens as a tool window over the current page (stage.css).
     The page beneath keeps its normal layout and scroll; inside the window
     the transcript scrolls while the composer stays at the bottom. */
  body[data-view="ai-chat"] .app-shell {
    height: auto !important;
    overflow: visible !important;
  }

  body[data-view="ai-chat"] main {
    height: auto !important;
    min-height: 100vh !important;
    padding: calc(var(--topbar-h) + 18px) var(--page-pad) 56px var(--content-left) !important;
    overflow: visible !important;
  }

  body[data-view="ai-chat"] #ai-chat.view.active {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }

  #ai-chat > .stage-tool-bar {
    flex: none;
    margin-bottom: 0 !important;
  }

  #workspaceChatRoot {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    background: transparent !important;
  }

  .ai-chat-layout,
  .wc-shell.ai-chat-layout {
    --chat-foreground: var(--ink) !important;
    --chat-muted: var(--ink-3) !important;
    --chat-border: var(--line) !important;
    --chat-card: var(--surface) !important;
    --chat-background: var(--surface-2) !important;
    --chat-message-surface: var(--brand-soft) !important;
    --chat-message-foreground: var(--ink) !important;
    --chat-primary: var(--ink) !important;
    --chat-primary-foreground: #ffffff !important;
    --chat-accent: var(--surface-3) !important;
    --chat-destructive: var(--critical) !important;
    --chat-error-fg: var(--critical-ink) !important;
    --chat-ring: var(--brand) !important;
    --chat-radius: var(--r-md) !important;
    --chat-control-radius: var(--r-pill) !important;
    --chat-composer-outline: var(--hairline) !important;
    --chat-font-size: 14.5px !important;
    --chat-line-height: 1.65 !important;

    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    max-width: none !important;
    margin: 0 auto !important;
    color: var(--ink) !important;
    background: transparent !important;
  }

  .wc-new-chat {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    max-width: 50rem !important;
    margin: 0 auto !important;
    padding: 0 0 8px !important;
  }

  .ai-chat-ghost-button,
  .wc-new-chat .ai-chat-ghost-button,
  .wc-full .ai-chat-ghost-button,
  .wc-notice .ai-chat-ghost-button,
  .wc-turn-error .ai-chat-ghost-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 14px 0 12px !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-pill) !important;
    color: var(--ink) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-1) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .ai-chat-ghost-button:hover:not(:disabled) {
    border-color: var(--line-strong) !important;
    color: var(--ink) !important;
    background: var(--surface-2) !important;
  }

  .ai-chat-ghost-button:disabled {
    opacity: .5 !important;
  }

  .ai-chat-ghost-button svg {
    width: 15px !important;
    height: 15px !important;
  }

  .wc-transcript {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 10px 4px 20px !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%) !important;
    mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%) !important;
  }

  .wc-bottom {
    flex: 0 0 auto !important;
    width: 100% !important;
    padding: 0 !important;
  }

  /* Welcome */

  .ai-chat-welcome,
  .wc-welcome.ai-chat-welcome {
    display: grid !important;
    justify-items: center !important;
    gap: 10px !important;
    max-width: 40rem !important;
    margin: clamp(24px, 13vh, 150px) auto 24px !important;
    color: var(--ink-3) !important;
    text-align: center !important;
  }

  .ai-chat-welcome::before {
    content: "" !important;
    display: block !important;
    width: 56px !important;
    height: 56px !important;
    margin: 0 0 8px !important;
    border-radius: 18px !important;
    background-color: var(--brand) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center, center !important;
    background-size: 26px 26px, 100% 100% !important;
    box-shadow: 0 14px 30px -14px rgba(10, 88, 202, .75), inset 0 1px rgba(255, 255, 255, .25) !important;
  }

  .ai-chat-welcome > span {
    color: var(--ink) !important;
    font-size: clamp(24px, 2.4vw, 32px) !important;
    font-weight: 450 !important;
    line-height: 1.12 !important;
    letter-spacing: -.03em !important;
  }

  .ai-chat-welcome p {
    max-width: 34rem !important;
    margin: 0 !important;
    color: var(--ink-3) !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
  }

  .ai-chat-suggestions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 18px 0 0 !important;
  }

  .ai-chat-suggestions button {
    display: inline-flex !important;
    align-items: center !important;
    height: 38px !important;
    padding: 0 16px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-pill) !important;
    color: var(--ink-2) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-1) !important;
    font-size: 13px !important;
    font-weight: 550 !important;
    transform: none !important;
    transition: box-shadow var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease) !important;
  }

  .ai-chat-suggestions button:hover {
    border-color: var(--hairline) !important;
    color: var(--ink) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-2) !important;
    transform: translateY(-1px) !important;
  }

  .wc-embedded .ai-chat-suggestions button {
    background: var(--surface-2) !important;
    box-shadow: none !important;
  }

  .wc-embedded .ai-chat-suggestions button:hover {
    background: var(--surface-3) !important;
    box-shadow: none !important;
  }

  /* Conversation */

  .ai-chat-thread,
  .wc-messages.ai-chat-thread {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 50rem !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 8px 0 0 !important;
  }

  .wc-turn + .wc-turn {
    margin-top: 28px !important;
  }

  .ai-chat-message {
    padding-bottom: 10px !important;
  }

  .ai-chat-message.user {
    align-items: flex-end !important;
    gap: 2px !important;
  }

  .ai-chat-message.user .ai-chat-bubble {
    max-width: min(80%, 36rem) !important;
    padding: 12px 18px !important;
    border: 1px solid rgba(10, 88, 202, .1) !important;
    border-radius: 22px 22px 6px 22px !important;
    color: var(--ink) !important;
    background: var(--brand-soft) !important;
    box-shadow: none !important;
    font-size: 14.5px !important;
    line-height: 1.55 !important;
  }

  .ai-chat-message.user .ai-chat-bubble p,
  .wc-question {
    margin: 0 !important;
    color: var(--ink) !important;
  }

  .ai-chat-message.assistant .ai-chat-assistant-body {
    min-width: 0 !important;
    padding: 20px 24px 14px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 22px 22px 22px 6px !important;
    color: var(--ink-2) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-1) !important;
  }

  .ai-chat-response {
    color: var(--ink-2) !important;
    font-size: 14.5px !important;
    line-height: 1.68 !important;
  }

  .ai-chat-response p,
  .ai-chat-response li {
    color: var(--ink-2) !important;
  }

  .ai-chat-response h4 {
    margin: 1.2rem 0 .4rem !important;
    color: var(--ink) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
  }

  .ai-chat-response strong {
    color: var(--ink) !important;
    font-weight: 600 !important;
  }

  .ai-chat-response code,
  .wc-code {
    border-radius: 6px !important;
    color: var(--ink) !important;
    background: var(--surface-3) !important;
    font-family: var(--font-mono) !important;
    font-size: 12.5px !important;
  }

  .wc-code {
    padding: 14px 16px !important;
    border-radius: var(--r-md) !important;
    background: var(--surface-2) !important;
  }

  .wc-table-scroll {
    margin: 14px 0 !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-md) !important;
    background: var(--surface) !important;
  }

  .wc-shell table th {
    position: static !important;
    padding: 9px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    color: var(--ink-3) !important;
    background: var(--surface-2) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
  }

  .wc-shell table td {
    padding: 9px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--surface-3) !important;
    color: var(--ink-2) !important;
    font-size: 13px !important;
    font-variant-numeric: tabular-nums !important;
  }

  .wc-shell table tbody tr:last-child td {
    border-bottom: 0 !important;
  }

  .wc-research-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    height: 26px !important;
    margin: 0 0 12px !important;
    padding: 0 11px 0 9px !important;
    border-radius: var(--r-pill) !important;
    color: var(--brand-strong) !important;
    background: var(--brand-soft) !important;
    font-size: 12px !important;
    font-weight: 550 !important;
  }

  .wc-research-status::before {
    content: "" !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--brand) !important;
  }

  .wc-research-status.wc-research-warning {
    color: var(--warning-ink) !important;
    background: var(--warning-soft) !important;
  }

  .wc-research-status.wc-research-warning::before {
    background: var(--warning) !important;
  }

  .wc-activity {
    margin: 0 0 14px !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid var(--hairline) !important;
    color: var(--ink-3) !important;
    font-size: 12.5px !important;
  }

  .wc-activity-title {
    color: var(--ink-2) !important;
    font-weight: 600 !important;
  }

  .wc-thinking {
    color: var(--ink-3) !important;
    font-size: 14px !important;
  }

  .wc-caveats {
    margin: 16px 0 0 !important;
    padding: 12px 16px !important;
    border-radius: var(--r-md) !important;
    color: var(--ink-2) !important;
    background: var(--warning-soft) !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  .wc-caveats p {
    margin: 4px 0 !important;
    color: var(--ink-2) !important;
  }

  .wc-turn-error {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    border-radius: var(--r-md) !important;
    color: var(--critical-ink) !important;
    background: var(--critical-soft) !important;
    font-size: 13px !important;
  }

  /* Sources */

  .wc-evidence {
    margin: 18px 0 0 !important;
    padding: 16px 0 0 !important;
    border-top: 1px solid var(--hairline) !important;
    color: var(--ink-3) !important;
    font-size: 12px !important;
  }

  .wc-shell .wc-evidence-heading h3 {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    color: var(--ink) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }

  .wc-evidence-heading h3 span {
    display: inline-grid !important;
    place-items: center !important;
    min-width: 22px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 7px !important;
    border-radius: var(--r-pill) !important;
    color: var(--ink-2) !important;
    background: var(--surface-3) !important;
    font-size: 11.5px !important;
    font-variant-numeric: tabular-nums !important;
  }

  .wc-source-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)) !important;
    gap: 8px !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
    counter-reset: wc-source !important;
  }

  .wc-source {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    align-content: start !important;
    padding: 10px 12px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-md) !important;
    background: var(--surface-2) !important;
    overflow-wrap: anywhere !important;
    counter-increment: wc-source !important;
  }

  .wc-source::before {
    content: counter(wc-source) !important;
    grid-row: span 2 !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    color: var(--ink-2) !important;
    background: var(--surface) !important;
    box-shadow: inset 0 0 0 1px var(--hairline) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums !important;
  }

  .wc-embedded .wc-source {
    background: var(--surface) !important;
  }

  .wc-source-title {
    color: var(--ink) !important;
    font-size: 13px !important;
    font-weight: 550 !important;
    line-height: 1.4 !important;
  }

  .wc-source-title a {
    color: var(--ink) !important;
    text-decoration: none !important;
  }

  .wc-source-title a:hover {
    color: var(--brand) !important;
  }

  .wc-source-origin {
    margin-top: 2px !important;
    color: var(--ink-3) !important;
    font-size: 12px !important;
  }

  /* Hover meta */

  .ai-chat-meta {
    color: var(--ink-3) !important;
  }

  .wc-message-meta {
    margin: 10px 0 0 !important;
    padding: 0 !important;
  }

  .ai-chat-icon-button {
    width: 28px !important;
    height: 28px !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: var(--ink-3) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .ai-chat-icon-button:hover {
    color: var(--ink) !important;
    background: var(--surface-3) !important;
  }

  .wc-shell .ai-chat-icon-button svg {
    width: 14px !important;
    height: 14px !important;
  }

  .wc-shell .wc-jump {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    left: 50% !important;
    right: auto !important;
    height: 34px !important;
    padding: 0 14px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-pill) !important;
    color: var(--ink) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-3) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    transform: translateX(-50%) !important;
  }

  .wc-shell .wc-jump[hidden] {
    display: none !important;
  }

  /* Notices */

  .wc-notice,
  .wc-full {
    position: relative !important;
    max-width: 50rem !important;
    margin: 0 auto 10px !important;
    padding: 12px 16px 12px 36px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-lg) !important;
    color: var(--ink-2) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-1) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  .wc-notice::before,
  .wc-full::before {
    content: "" !important;
    position: absolute !important;
    top: 18px !important;
    left: 16px !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: var(--warning) !important;
    box-shadow: 0 0 0 3px rgba(250, 178, 25, .2) !important;
  }

  .wc-embedded .wc-notice {
    background: var(--surface-2) !important;
    box-shadow: none !important;
  }

  .wc-full {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    background: var(--warning-soft) !important;
  }

  .wc-full[hidden],
  .wc-notice[hidden] {
    display: none !important;
  }

  .wc-full strong {
    color: var(--ink) !important;
    font-weight: 600 !important;
  }

  .wc-full p {
    margin: 2px 0 0 !important;
    color: var(--ink-2) !important;
  }

  /* Composer — white pill */

  .wc-shell .ai-composer {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .ai-composer-shell {
    max-width: 50rem !important;
    margin: 0 auto !important;
  }

  .ai-composer-shell::before {
    border-radius: var(--r-xl) !important;
    background: var(--surface) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .ai-composer-host {
    border-radius: var(--r-xl) !important;
    box-shadow: var(--shadow-2) !important;
    transition: box-shadow var(--med) var(--ease) !important;
  }

  .ai-composer-host::after {
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-xl) !important;
    transition: border-color var(--fast) var(--ease) !important;
  }

  .ai-composer-host:focus-within {
    box-shadow: 0 0 0 4px rgba(10, 88, 202, .1), var(--shadow-2) !important;
  }

  .ai-composer-host:focus-within::after {
    border-color: rgba(10, 88, 202, .45) !important;
  }

  .ai-composer-main {
    border-radius: var(--r-xl) !important;
    padding: 0 !important;
  }

  .ai-composer-surface,
  .ai-composer-surface:focus-within {
    align-items: flex-end !important;
    gap: 10px !important;
    padding: 10px 10px 10px 24px !important;
    border-radius: var(--r-xl) !important;
    box-shadow: none !important;
  }

  .ai-composer-editor-wrap {
    align-self: center !important;
    padding: 6px 0 !important;
  }

  .ai-composer-editor,
  .ai-composer-editor:hover,
  .ai-composer-editor:focus,
  .ai-composer-editor:focus-visible {
    display: block !important;
    width: 100% !important;
    min-height: 24px !important;
    max-height: 200px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    color: var(--ink) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    resize: none !important;
  }

  .ai-composer-editor::placeholder {
    color: var(--ink-4) !important;
  }

  .ai-composer-editor:disabled {
    color: var(--ink-3) !important;
    cursor: not-allowed !important;
  }

  .ai-composer-inline-controls {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .ai-chat-send,
  .ai-chat-stop,
  .wc-shell .ai-composer-actions .ai-chat-send,
  .wc-shell .ai-composer-actions .ai-chat-stop {
    width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: var(--on-dark) !important;
    background: var(--ink) !important;
    box-shadow: 0 8px 18px -10px rgba(13, 15, 20, .7) !important;
  }

  .ai-chat-send:hover:not(:disabled) {
    background: var(--ink-hover) !important;
    transform: scale(1.04) !important;
  }

  .ai-chat-send:disabled,
  .wc-shell .ai-composer-actions .ai-chat-send:disabled {
    opacity: 1 !important;
    color: var(--ink-4) !important;
    background: var(--surface-3) !important;
    box-shadow: none !important;
  }

  .wc-shell .ai-composer-actions .ai-chat-send:disabled svg {
    color: var(--ink-4) !important;
  }

  .ai-chat-stop,
  .wc-shell .ai-composer-actions .ai-chat-stop {
    background: var(--critical) !important;
  }

  .ai-chat-stop:hover {
    background: var(--critical-ink) !important;
  }

  .ai-context-meter-button {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
  }

  .ai-context-track {
    stroke: var(--surface-3) !important;
  }

  .ai-context-fill {
    stroke: var(--ink-3) !important;
  }

  .ai-context-meter.is-overloaded .ai-context-fill,
  .ai-context-meter.is-overloaded .ai-context-bar > div {
    stroke: var(--critical) !important;
    background: var(--critical) !important;
  }

  .ai-context-popover {
    padding: 12px 14px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-md) !important;
    color: var(--ink) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-3) !important;
    font-size: 12px !important;
  }

  .ai-context-bar {
    background: var(--track) !important;
  }

  .ai-context-bar > div {
    background: var(--ink-2) !important;
  }

  /* ========================================================= AI activity */

  #ai-runs .ai-runs-page {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #ai-runs .ai-runs-page > .panel-head {
    align-items: flex-end !important;
    margin: 6px 4px 18px !important;
  }

  #ai-runs .ai-runs-page > .panel-head h2 {
    color: var(--ink) !important;
    font-size: clamp(28px, 2.6vw, 38px) !important;
    font-weight: 420 !important;
    line-height: 1.06 !important;
    letter-spacing: -.035em !important;
  }

  #ai-runs .ai-runs-page > .panel-head .panel-note {
    margin: 8px 0 0 !important;
    color: var(--ink-3) !important;
    font-size: 14px !important;
  }

  .ai-runs-status,
  .ai-runs-status:hover {
    gap: 7px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 12px 0 10px !important;
    border: 1px solid var(--hairline) !important;
    color: var(--ink-2) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-1) !important;
    transform: none !important;
  }

  .ai-runs-status::before {
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: var(--ink-4) !important;
  }

  .ai-runs-status[hidden] {
    display: none !important;
  }

  .ai-runs-audit-note {
    margin: 0 0 18px !important;
    padding: 16px 20px !important;
    border: 1px solid rgba(10, 88, 202, .12) !important;
    border-radius: var(--r-lg) !important;
    color: var(--ink-2) !important;
    background: var(--brand-wash) !important;
    line-height: 1.55 !important;
  }

  .ai-runs-audit-note strong {
    display: block !important;
    margin: 0 !important;
    color: var(--ink) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
  }

  .ai-runs-audit-note p {
    max-width: 150ch !important;
    margin: 4px 0 0 !important;
    color: var(--ink-2) !important;
    font-size: 13px !important;
  }

  .ai-runs-audit-summary {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin: 0 0 18px !important;
  }

  .ai-runs-audit-summary article {
    display: grid !important;
    align-content: start !important;
    min-width: 0 !important;
    min-height: 128px !important;
    padding: 20px 22px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-lg) !important;
    color: var(--ink) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-1) !important;
  }

  .ai-runs-audit-summary span {
    display: block !important;
    color: var(--ink-2) !important;
    font-size: 13px !important;
    font-weight: 550 !important;
  }

  .ai-runs-audit-summary strong {
    display: block !important;
    margin: 14px 0 6px !important;
    color: var(--ink) !important;
    font-size: clamp(26px, 2.5vw, 36px) !important;
    font-weight: 380 !important;
    line-height: 1 !important;
    letter-spacing: -.04em !important;
    font-variant-numeric: tabular-nums !important;
    overflow-wrap: anywhere !important;
  }

  .ai-runs-audit-summary small {
    display: block !important;
    color: var(--ink-3) !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  .ai-runs-audit-summary article:first-child {
    border-color: var(--ink) !important;
    background: var(--ink) !important;
    box-shadow: 0 16px 34px -20px rgba(13, 15, 20, .8) !important;
  }

  .ai-runs-audit-summary article:first-child span,
  .ai-runs-audit-summary article:first-child strong {
    color: var(--on-dark) !important;
  }

  .ai-runs-audit-summary article:first-child small {
    color: var(--on-dark-2) !important;
  }

  .ai-runs-audit-toolbar {
    display: grid !important;
    grid-template-columns: minmax(260px, 2fr) repeat(4, minmax(140px, 1fr)) auto !important;
    align-items: end !important;
    gap: 12px !important;
    margin: 0 0 14px !important;
    padding: 14px 16px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-lg) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-1) !important;
  }

  .ai-runs-audit-toolbar label {
    display: grid !important;
    gap: 6px !important;
    min-width: 0 !important;
    color: var(--ink-3) !important;
    font-size: 12px !important;
    font-weight: 550 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .ai-runs-search-field input,
  .ai-runs-search-field input:hover,
  .ai-runs-search-field input:focus {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 14px 0 38px !important;
    border-radius: var(--r-pill) !important;
    background-color: var(--surface-2) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b818c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 14px center !important;
    background-size: 15px 15px !important;
    font-size: 13px !important;
  }

  .ai-runs-search-field input:focus {
    background-color: var(--surface) !important;
  }

  .ai-runs-audit-toolbar .ui-select-trigger {
    height: 40px !important;
    min-height: 40px !important;
  }

  .ai-runs-audit-toolbar > .status-pill {
    justify-self: end !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    color: var(--ink-2) !important;
    background: var(--surface-2) !important;
    font-variant-numeric: tabular-nums !important;
  }

  .ai-runs-audit-list {
    display: grid !important;
    gap: 10px !important;
  }

  .ai-generation-card {
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-lg) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-1) !important;
    overflow: hidden !important;
    transition: box-shadow 200ms var(--ease) !important;
  }

  .ai-generation-card:hover,
  .ai-generation-card[open] {
    border-color: var(--hairline) !important;
    box-shadow: var(--shadow-2) !important;
  }

  .ai-generation-card > summary {
    position: relative !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 16px 56px 16px 22px !important;
    color: var(--ink) !important;
    background: transparent !important;
    list-style: none !important;
  }

  .ai-generation-card > summary:hover {
    background: transparent !important;
  }

  .ai-generation-card > summary::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    right: 18px !important;
    width: 28px !important;
    height: 28px !important;
    margin-top: -14px !important;
    border-radius: 50% !important;
    background-color: var(--surface-2) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23474d58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 15px 15px !important;
    transition: transform var(--med) var(--ease), background-color var(--fast) var(--ease) !important;
  }

  .ai-generation-card > summary:hover::after {
    background-color: var(--surface-3) !important;
  }

  .ai-generation-card[open] > summary::after {
    transform: rotate(180deg) !important;
  }

  .ai-generation-primary strong {
    color: var(--ink) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  .ai-generation-primary span {
    margin: 3px 0 0 !important;
    color: var(--ink-3) !important;
    font-size: 12px !important;
  }

  .ai-generation-card > summary > span:not(.ai-generation-status) {
    display: grid !important;
    gap: 2px !important;
  }

  .ai-generation-card > summary > span > strong {
    color: var(--ink) !important;
    font-size: 14px !important;
    font-weight: 560 !important;
    font-variant-numeric: tabular-nums !important;
  }

  .ai-generation-card > summary small {
    color: var(--ink-3) !important;
    font-size: 11.5px !important;
  }

  .ai-generation-status {
    display: inline-flex !important;
    align-items: center !important;
    justify-self: start !important;
    gap: 7px !important;
    height: 26px !important;
    padding: 0 11px 0 9px !important;
    border-radius: var(--r-pill) !important;
    color: var(--ink-2) !important;
    background: var(--surface-3) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }

  .ai-generation-status::before {
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: var(--ink-4) !important;
  }

  .ai-generation-status[data-tone="success"] {
    color: var(--good-ink) !important;
    background: var(--good-soft) !important;
  }

  .ai-generation-status[data-tone="success"]::before {
    background: var(--good) !important;
  }

  .ai-generation-status[data-tone="progress"] {
    color: var(--brand-strong) !important;
    background: var(--brand-soft) !important;
  }

  .ai-generation-status[data-tone="progress"]::before {
    background: var(--brand) !important;
    box-shadow: 0 0 0 3px rgba(10, 88, 202, .18) !important;
  }

  .ai-generation-status[data-tone="warning"] {
    color: var(--warning-ink) !important;
    background: var(--warning-soft) !important;
  }

  .ai-generation-status[data-tone="warning"]::before {
    background: var(--warning) !important;
  }

  .ai-generation-status[data-tone="danger"] {
    color: var(--critical-ink) !important;
    background: var(--critical-soft) !important;
  }

  .ai-generation-status[data-tone="danger"]::before {
    background: var(--critical) !important;
  }

  .ai-generation-details {
    padding: 18px 22px 20px !important;
    border-top: 1px solid var(--hairline) !important;
    background: var(--surface-2) !important;
  }

  .ai-generation-details dl {
    gap: 14px 20px !important;
  }

  .ai-generation-details dt {
    margin: 0 0 3px !important;
    color: var(--ink-3) !important;
    font-size: 11.5px !important;
    font-weight: 550 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .ai-generation-details dd {
    color: var(--ink) !important;
    font-size: 13px !important;
    font-variant-numeric: tabular-nums !important;
  }

  .ai-generation-actions {
    gap: 8px !important;
    margin: 16px 0 0 !important;
  }

  .ai-generation-actions:empty {
    display: none !important;
  }

  .ai-run-error {
    margin: 14px 0 0 !important;
    padding: 10px 14px !important;
    border-radius: var(--r-md) !important;
    color: var(--critical-ink) !important;
    background: var(--critical-soft) !important;
    font-size: 12.5px !important;
  }

  /* ========================================================== responsive */

  @media (max-width: 1280px) {
    .ai-runs-audit-toolbar {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .ai-runs-audit-toolbar > .ai-runs-search-field {
      grid-column: 1 / -2 !important;
    }

    .ai-runs-audit-toolbar > .status-pill {
      grid-column: -2 / -1 !important;
      grid-row: 1 !important;
    }
  }

  @media (max-width: 1100px) {
    .ai-executive-summary {
      grid-template-columns: minmax(0, 1fr) !important;
    }
  }

  @media (max-width: 1000px) {
    .ai-overview-signals {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    .ai-runs-audit-summary {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .ai-runs-audit-toolbar {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .ai-runs-audit-toolbar > .ai-runs-search-field {
      grid-column: 1 / -1 !important;
    }

    .ai-runs-audit-toolbar > .status-pill {
      grid-column: auto !important;
      grid-row: auto !important;
      justify-self: start !important;
    }
  }

  @media (max-width: 760px) {
    .ai-analytics-mount {
      margin-bottom: 22px !important;
    }

    .ai-brief-header {
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 18px !important;
      padding: 20px !important;
      border-radius: var(--r-lg) !important;
    }

    .ai-brief-actions {
      justify-content: flex-start !important;
      margin: 0 !important;
    }

    .ai-brief-actions .ai-primary-button {
      flex: 1 1 auto !important;
    }

    .ai-brief-tabs,
    .ai-brief-workspace > .ai-brief-tabs {
      align-self: stretch !important;
      width: auto !important;
    }

    .ai-brief-tabs button {
      flex: 1 0 auto !important;
      padding: 0 14px !important;
      font-size: 13px !important;
    }

    .ai-executive-summary,
    .ai-overview-section,
    .ai-keep-in-mind {
      padding: 18px !important;
      border-radius: var(--r-lg) !important;
    }

    .ai-executive-summary p,
    .ai-executive-summary > .ai-executive-copy > p {
      font-size: 14.5px !important;
    }

    .ai-insight-card,
    .ai-suggestion-card {
      padding: 16px !important;
    }

    .ai-semester-forecast-card,
    .ai-forecast-card {
      padding: 18px 16px 16px !important;
      border-radius: var(--r-lg) !important;
    }

    .ai-semester-values {
      padding: 14px !important;
    }

    .ai-semester-values strong,
    .ai-semester-values .ai-semester-predicted-value strong,
    .ai-semester-predicted-value strong {
      font-size: 24px !important;
    }

    .ai-semester-axis-label {
      font-size: 20px !important;
    }

    .ai-evidence-meta > div {
      grid-template-columns: minmax(0, 1fr) !important;
      gap: 1px !important;
    }

    .ai-empty-state,
    .ai-analytics-mount .ai-empty-state {
      padding: 22px 20px !important;
      border-radius: var(--r-lg) !important;
    }

    .ai-brief-panels > [role="tabpanel"][data-ai-panel="chat"]:not([hidden]) {
      padding: 8px 10px 10px !important;
      border-radius: var(--r-lg) !important;
    }

    .ai-chat-message.user .ai-chat-bubble {
      max-width: 88% !important;
    }

    .ai-chat-message.assistant .ai-chat-assistant-body {
      padding: 16px 16px 10px !important;
    }

    .ai-composer-surface,
    .ai-composer-surface:focus-within {
      padding: 8px 8px 8px 18px !important;
    }

    .ai-chat-send,
    .ai-chat-stop,
    .wc-shell .ai-composer-actions .ai-chat-send,
    .wc-shell .ai-composer-actions .ai-chat-stop {
      width: 40px !important;
      height: 40px !important;
      min-height: 40px !important;
    }

    .wc-full {
      flex-direction: column !important;
      align-items: flex-start !important;
    }

    .ai-runs-audit-summary article {
      min-height: 0 !important;
      padding: 16px !important;
    }

    .ai-runs-audit-summary strong {
      margin-top: 10px !important;
      font-size: 26px !important;
    }

    .ai-generation-card > summary {
      padding: 14px 52px 14px 16px !important;
    }

    .ai-generation-details {
      padding: 16px !important;
    }
  }

  @media (max-width: 900px) {
    .ai-generation-card > summary > span:not(.ai-generation-status) {
      display: none !important;
    }
  }

  @media (max-width: 560px) {
    .ai-runs-audit-toolbar {
      grid-template-columns: minmax(0, 1fr) !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ai-decision-brief .ai-primary-button,
    .ai-chat-suggestions button,
    .ai-generation-card > summary::after {
      transition: none !important;
    }
  }
}