/* Workspace window in the bright AI palette (overrides the legacy cream theme in styles.css). */

html[data-stage-scene="ai"] {
  --ai-ink: #1e1b4b;
  --ai-ink-soft: rgb(30 27 75 / 0.72);
  --ai-ink-muted: rgb(30 27 75 / 0.56);
  --ai-indigo: #4f46e5;
  --ai-indigo-deep: #3730a3;
  --ai-line: rgb(99 102 241 / 0.14);
  --ai-line-strong: rgb(99 102 241 / 0.26);
  --ai-surface: rgb(255 255 255 / 0.82);
  --ai-surface-tint: #f5f6ff;
}

/* ---------------------------------------------------------------- chrome */
html[data-stage-scene="ai"] .workspace-window {
  border-color: rgb(255 255 255 / 0.9) !important;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.95), rgb(246 247 255 / 0.93)) !important;
  box-shadow:
    0 40px 80px rgb(79 70 229 / 0.14),
    0 12px 30px rgb(15 23 42 / 0.06),
    inset 0 1px 0 rgb(255 255 255 / 0.95) !important;
}

html[data-stage-scene="ai"] .workspace-window__header {
  border-bottom: 1px solid var(--ai-line) !important;
  background: rgb(255 255 255 / 0.9) !important;
}

html[data-stage-scene="ai"] .workspace-tab {
  border-color: var(--ai-line) !important;
  background: rgb(255 255 255 / 0.6) !important;
  color: var(--ai-ink) !important;
}

html[data-stage-scene="ai"] .workspace-tab.is-active {
  border-color: var(--ai-line-strong) !important;
  background: linear-gradient(180deg, #fff, #f1f2ff) !important;
  box-shadow: 0 6px 16px rgb(79 70 229 / 0.12), inset 0 -2px 0 var(--ai-indigo) !important;
}

html[data-stage-scene="ai"] .workspace-tab__icon {
  border-color: var(--ai-line) !important;
  background: linear-gradient(135deg, #eef0ff, #e3f6ff) !important;
}

html[data-stage-scene="ai"] .workspace-tab__label,
html[data-stage-scene="ai"] .workspace-tab__text {
  color: var(--ai-ink) !important;
}

html[data-stage-scene="ai"] .workspace-tab__close {
  color: var(--ai-ink-muted) !important;
}

html[data-stage-scene="ai"] .workspace-window__body,
html[data-stage-scene="ai"] .workspace-page {
  border-color: var(--ai-line) !important;
  background:
    radial-gradient(circle at 92% 0%, rgb(186 230 253 / 0.45), transparent 32%),
    radial-gradient(circle at 0% 30%, rgb(221 214 254 / 0.4), transparent 34%),
    linear-gradient(180deg, #fbfbff, #f4f5ff) !important;
}

/* ---------------------------------------------------------------- type */
html[data-stage-scene="ai"] .workspace-window h1,
html[data-stage-scene="ai"] .workspace-window h2,
html[data-stage-scene="ai"] .workspace-window .app-page__copy h2,
html[data-stage-scene="ai"] .workspace-window strong,
html[data-stage-scene="ai"] .workspace-window .app-page__character-banner-title {
  color: var(--ai-ink) !important;
}

html[data-stage-scene="ai"] .workspace-window p,
html[data-stage-scene="ai"] .workspace-window .app-page__list-item,
html[data-stage-scene="ai"] .workspace-window .app-page__list-item span,
html[data-stage-scene="ai"] .workspace-window .app-page__infra-spec-val,
html[data-stage-scene="ai"] .workspace-window td {
  color: var(--ai-ink-soft) !important;
}

html[data-stage-scene="ai"] .workspace-window a:not(.stage-hero__chip, .gh-repo, .app-page__block-card, .app-page__block-chip, .app-page__service-shot) {
  color: var(--ai-indigo-deep) !important;
}

/* Section pills (legacy dark chips on h3) become indigo gradient tags. */
html[data-stage-scene="ai"] .workspace-window .app-page__card > h3,
html[data-stage-scene="ai"] .workspace-window .app-page__list-group h3,
html[data-stage-scene="ai"] .workspace-window .app-page__card h3:not(.app-page__infra-stack-title, .app-page__infra-section-title, .app-page__ai-usage-title) {
  border: 0 !important;
  background: linear-gradient(90deg, #4f46e5, #6366f1) !important;
  box-shadow: 0 6px 14px rgb(79 70 229 / 0.2) !important;
  color: #fff !important;
}

html[data-stage-scene="ai"] .workspace-window .app-page__list-group {
  background: rgb(238 240 255 / 0.65) !important;
  border-color: var(--ai-line) !important;
}

html[data-stage-scene="ai"] .workspace-window .app-page__list-group p {
  color: var(--ai-ink-muted) !important;
}

/* ---------------------------------------------------------------- surfaces */
html[data-stage-scene="ai"] .workspace-window .app-page__summary,
html[data-stage-scene="ai"] .workspace-window .app-page__visual,
html[data-stage-scene="ai"] .workspace-window .app-page__rail-item,
html[data-stage-scene="ai"] .workspace-window .app-page__infra-stat,
html[data-stage-scene="ai"] .workspace-window .app-page__infra-stack,
html[data-stage-scene="ai"] .workspace-window .app-page__infra-spec,
html[data-stage-scene="ai"] .workspace-window .app-page__infra-table-scroll {
  border-color: var(--ai-line) !important;
}

html[data-stage-scene="ai"] .workspace-window .app-page__visual,
html[data-stage-scene="ai"] .workspace-window .app-page__rail-item,
html[data-stage-scene="ai"] .workspace-window .app-page__infra-stat,
html[data-stage-scene="ai"] .workspace-window .app-page__infra-spec {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.92), rgb(245 246 255 / 0.85)) !important;
  box-shadow: 0 10px 24px rgb(79 70 229 / 0.07) !important;
}

html[data-stage-scene="ai"] .workspace-window .app-page__infra-stack {
  background:
    radial-gradient(circle at 85% -10%, rgb(165 180 252 / 0.25), transparent 45%),
    linear-gradient(180deg, #fff, #f5f6ff) !important;
}

html[data-stage-scene="ai"] .workspace-window .app-page__infra-stat-value,
html[data-stage-scene="ai"] .workspace-window .app-page__infra-stack-title,
html[data-stage-scene="ai"] .workspace-window .app-page__infra-section-title,
html[data-stage-scene="ai"] .workspace-window .app-page__ai-usage-title,
html[data-stage-scene="ai"] .workspace-window .app-page__infra-spec-key,
html[data-stage-scene="ai"] .workspace-window td.is-key {
  color: var(--ai-indigo-deep) !important;
}

html[data-stage-scene="ai"] .workspace-window .app-page__infra-stat-value {
  background: linear-gradient(135deg, #4f46e5, #0891b2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

html[data-stage-scene="ai"] .workspace-window .app-page__infra-stat-label,
html[data-stage-scene="ai"] .workspace-window .app-page__infra-stack-subtitle,
html[data-stage-scene="ai"] .workspace-window .app-page__ai-usage-asof {
  color: var(--ai-ink-muted) !important;
}

html[data-stage-scene="ai"] .workspace-window .app-page__infra-layer-name {
  border-color: rgb(99 102 241 / 0.3) !important;
  background: rgb(99 102 241 / 0.1) !important;
  color: var(--ai-indigo-deep) !important;
}

html[data-stage-scene="ai"] .workspace-window .app-page__infra-chip {
  border-color: rgb(6 182 212 / 0.28) !important;
  background: rgb(6 182 212 / 0.07) !important;
  color: #0e7490 !important;
}

html[data-stage-scene="ai"] .workspace-window th {
  background: linear-gradient(180deg, #312e81, #1e1b4b) !important;
  color: #fff !important;
}

html[data-stage-scene="ai"] .workspace-window td {
  border-color: rgb(99 102 241 / 0.1) !important;
  background: rgb(255 255 255 / 0.7) !important;
}

html[data-stage-scene="ai"] .workspace-window tbody tr:nth-child(odd) td {
  background: rgb(245 246 255 / 0.85) !important;
}

html[data-stage-scene="ai"] .workspace-window .app-page__rail-icon,
html[data-stage-scene="ai"] .workspace-window .app-page__rail-icon svg {
  border-color: var(--ai-line) !important;
  color: var(--ai-indigo) !important;
}

html[data-stage-scene="ai"] .workspace-window .app-page__character-banner {
  border-color: var(--ai-line) !important;
  background:
    radial-gradient(circle at 18% 28%, rgb(255 255 255 / 0.85), transparent 40%),
    linear-gradient(120deg, #eef0ff, #e3f4ff 55%, #f4ecff) !important;
}

html[data-stage-scene="ai"] .workspace-window .app-page__character-banner-kicker {
  color: var(--ai-indigo) !important;
}

/* Badges: shield style kept, warm yellow values become indigo. */
html[data-stage-scene="ai"] .workspace-window .app-page__badge-label {
  background: linear-gradient(180deg, #475569, #334155) !important;
}

html[data-stage-scene="ai"] .workspace-window .app-page__badge-value {
  background: linear-gradient(180deg, #6366f1, #4f46e5) !important;
  color: #fff !important;
}

html[data-stage-scene="ai"] .workspace-window .app-page__source-link {
  border-color: var(--ai-line-strong) !important;
  background: rgb(238 240 255 / 0.8) !important;
  color: var(--ai-indigo-deep) !important;
}

html[data-stage-scene="ai"] .workspace-window .app-page__service-status[data-tone="beta"] {
  background: rgb(236 72 153 / 0.12) !important;
  color: #be185d !important;
}

/* Contact form and buttons. */
html[data-stage-scene="ai"] .workspace-window input,
html[data-stage-scene="ai"] .workspace-window textarea {
  border-color: var(--ai-line-strong) !important;
  background: #fff !important;
  color: var(--ai-ink) !important;
}

html[data-stage-scene="ai"] .workspace-window input:focus,
html[data-stage-scene="ai"] .workspace-window textarea:focus {
  outline: 2px solid rgb(99 102 241 / 0.35) !important;
  border-color: var(--ai-indigo) !important;
}

html[data-stage-scene="ai"] .workspace-window button[type="submit"],
html[data-stage-scene="ai"] .workspace-window .app-page__action--primary {
  border: 0 !important;
  background: linear-gradient(90deg, #4f46e5, #6366f1) !important;
  color: #fff !important;
}

/* Section pills: match the legacy operator-doc selector's specificity. */
html[data-stage-scene="ai"] .workspace-window .workspace-page--app[data-surface] .app-page__grid .app-page__card h3:not(.app-page__infra-stack-title, .app-page__infra-section-title, .app-page__ai-usage-title),
html[data-stage-scene="ai"] .workspace-window .workspace-page--app[data-surface] .app-page__list-group h3 {
  background: linear-gradient(90deg, #4f46e5, #6366f1) !important;
  box-shadow: 0 6px 14px rgb(79 70 229 / 0.22) !important;
  color: #fff !important;
}

html[data-stage-scene="ai"] .workspace-window .app-page__rail-item {
  color: var(--ai-ink-soft) !important;
}

/* Group headings are tags, never full-width bars (company page lacks the legacy pill rule). */
html[data-stage-scene="ai"] .workspace-window .workspace-page--app .app-page__list-group h3 {
  display: inline-flex !important;
  width: fit-content !important;
  align-items: center !important;
  min-height: 26px !important;
  padding: 6px 10px !important;
  border-radius: 7px !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

/* The AI usage rows stay dark, so their names stay light. */
html[data-stage-scene="ai"] .workspace-window .app-page__ai-usage-row strong,
html[data-stage-scene="ai"] .workspace-window .app-page__ai-usage-id strong {
  color: #fff !important;
}

html[data-stage-scene="ai"] body .workspace-window .workspace-page--app[data-page-key] .app-page__grid .app-page__card .app-page__list-group h3 {
  display: inline-flex !important;
  width: fit-content !important;
  max-width: 100% !important;
  padding: 6px 10px !important;
  border-radius: 7px !important;
}

/* Hero illustration frame: same lavender paper as the art, image fills the frame. */
html[data-stage-scene="ai"] body .workspace-window .workspace-page--app[data-page-key][data-surface] .app-page__visual {
  border-color: var(--ai-line) !important;
  background: #f5f6ff !important;
}

html[data-stage-scene="ai"] body .workspace-window .workspace-page--app[data-page-key][data-surface] .app-page__visual img {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover !important;
}

html[data-stage-scene="ai"] body .workspace-window .workspace-page--app[data-page-key][data-surface] .app-page__visual::before,
html[data-stage-scene="ai"] body .workspace-window .workspace-page--app[data-page-key][data-surface] .app-page__visual::after {
  background: none !important;
}

/* List titles on pages without the legacy pill rule (company) are tags too. */
html[data-stage-scene="ai"] body .workspace-window .workspace-page--app[data-page-key] .app-page__grid .app-page__card > h3 {
  display: inline-flex !important;
  width: fit-content !important;
  max-width: 100% !important;
  align-items: center !important;
  min-height: 26px !important;
  padding: 6px 10px !important;
  border-radius: 7px !important;
  font-size: 0.82rem !important;
  line-height: 1.2 !important;
}