/* Parallel PMC surface: Adumbrate tokens are canonical; this file only maps
   the existing proven chat behavior onto the Operational Layer structures. */

[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; color: var(--ink); background: var(--paper-2); }
button, input, textarea { font: inherit; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

/* Login */
.parallel-login-body { min-height: 100vh; min-height: 100dvh; overflow: auto; }
.parallel-auth { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100vh; min-height: 100dvh; }
.parallel-auth .auth-rail { display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-12); }
.auth-logo { width: auto; height: 26px; align-self: flex-start; }
.auth-rail-copy { max-width: 580px; }
.auth-rail-copy .eyebrow, .auth-secure { color: rgba(255,255,255,.68); }
.auth-rail-copy h2 { margin: var(--space-3) 0 0; max-width: 15ch; }
.auth-rail-summary { max-width: 46ch; margin: var(--space-4) 0 0; color: rgba(255,255,255,.82); }
.auth-proof-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-8); max-width: 440px; margin-top: var(--space-10); }
.auth-proof { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-2); color: white; }
.auth-proof small { grid-column: 2; color: rgba(255,255,255,.64); font-family: var(--family-mono); font-size: var(--size-mono-xs); }
.parallel-auth .auth-form { display: grid; place-items: center; min-width: 0; padding: var(--space-8); }
.parallel-auth-card { width: min(410px,100%); }
.auth-form-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.parallel-auth-card h1 { margin: var(--space-2) 0 0; }
.auth-muted { margin: var(--space-1) 0 0; color: var(--ink-muted); }
.auth-stack { margin-top: var(--space-6); }
.auth-submit { width: 100%; }
.auth-boundary { margin: var(--space-5) 0 0; padding-top: var(--space-4); text-align: center; color: var(--ink-muted); border-top: var(--border-width) solid var(--rule); }
.auth-notice { margin-top: var(--space-4); padding: var(--space-3); border: var(--border-width) solid var(--rule-strong); font-size: var(--size-body-sm); }
.auth-notice.is-error { border-inline-start: var(--border-emph) solid var(--err); }
.auth-notice.is-ok { border-inline-start: var(--border-emph) solid var(--ok); }
.login-locale, .topbar-lang { display: inline-flex; border: var(--border-width) solid var(--rule-strong); }
.login-locale button, .locale-option { min-width: 36px; min-height: 30px; padding: 0 var(--space-2); color: var(--ink-muted); background: var(--paper-2); border: 0; cursor: pointer; }
.login-locale button + button, .locale-option + .locale-option { border-inline-start: var(--border-width) solid var(--rule); }
.login-locale button[aria-pressed="true"], .locale-option.is-active { color: var(--accent-ink); background: var(--accent); }

/* Global shell additions */
.parallel-app { --sidebar-w: 214px; }
.os-sidebar .nav-item.is-static { cursor: default; }
.status-dot { display: inline-block; width: 7px; height: 7px; flex: 0 0 7px; background: var(--ink-mute-2); border-radius: 50%; }
.status-dot.is-ok { background: var(--ok); }
.status-dot.is-warn { background: var(--warn); }
.status-dot.is-err { background: var(--err); }
.parallel-topbar { padding-inline: var(--space-4); }
.parallel-command { width: min(500px, 38vw); display: flex; align-items: center; gap: var(--space-2); padding-inline-start: var(--space-3); background: var(--paper-3); border: var(--border-width) solid var(--rule-strong); }
.parallel-command .input { min-width: 0; border: 0; background: transparent; }
.parallel-main { padding: 0; overflow: hidden; background: var(--paper-2); }
.parallel-workspace { height: 100%; }
.statusbar-end { margin-inline-start: auto; }
.status-badge { display: inline-flex; align-items: center; gap: var(--space-2); }
.nav-item.is-static:hover { background: transparent; }

/* User menu */
.user-menu { position: relative; }
.avatar-button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; color: var(--ink); background: var(--paper-3); border: var(--border-width) solid var(--rule-strong); font-family: var(--family-mono); font-size: var(--size-mono-sm); cursor: pointer; }
.avatar-menu { position: absolute; inset-block-start: calc(100% + var(--space-2)); inset-inline-end: 0; z-index: var(--z-popover); width: 220px; padding: var(--space-1); background: var(--paper-2); border: var(--border-width) solid var(--rule-strong); box-shadow: var(--elev-pop); }
.avatar-menu-head { display: grid; gap: var(--space-1); padding: var(--space-3); border-bottom: var(--border-width) solid var(--rule); }
.avatar-menu-head span { color: var(--ink-muted); font-family: var(--family-mono); font-size: var(--size-mono-xs); }
.avatar-menu a, .avatar-menu button { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 38px; padding: var(--space-2) var(--space-3); color: var(--ink-soft); background: transparent; border: 0; text-decoration: none; text-align: start; cursor: pointer; }
.avatar-menu a:hover, .avatar-menu button:hover { color: var(--ink); background: var(--accent-tint); }
.avatar-menu form { margin: 0; }

/* History compatibility */
.ops-chat-history .sidebar-title { margin: var(--space-2) var(--space-4) 0; }
.sidebar-history { min-height: 0; }
.session-list { display: grid; gap: var(--space-1); padding: var(--space-2); }
.session-item { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: var(--space-2); min-height: 52px; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); color: var(--ink-soft); background: transparent; border: var(--border-width) solid transparent; border-inline-start: var(--border-emph) solid transparent; cursor: pointer; }
.session-item:hover, .session-item:focus-visible { background: var(--paper-2); border-color: var(--rule); outline: none; }
.session-item.is-active { color: var(--ink); background: var(--paper-2); border-color: var(--rule-strong); border-inline-start-color: var(--accent); }
.session-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-medium); }
.session-time { color: var(--ink-muted); font-family: var(--family-mono); font-size: var(--size-mono-xs); white-space: nowrap; }
.session-delete { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; color: var(--ink-muted); background: transparent; border: 0; cursor: pointer; opacity: 0; }
.session-item:hover .session-delete, .session-item:focus-within .session-delete, .session-item.is-active .session-delete { opacity: 1; }
.session-delete:hover { color: var(--err); background: var(--err-tint); }
.session-empty { margin: var(--space-5); }
.ops-chat-history-foot [data-new-chat-alias] { width: 100%; justify-content: flex-start; }

/* Conversation */
.ops-chat-conversation-head { grid-template-columns: minmax(0,1fr) auto; }
.ops-chat-thread-identity h1 { margin: 0; overflow: hidden; font-size: var(--size-h3); text-overflow: ellipsis; white-space: nowrap; }
.ops-chat-thread-identity .avatar { flex: 0 0 auto; }
.parallel-chat-view { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow: hidden; }
.maintenance-banner { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); color: var(--warn-ink); background: var(--warn-tint); border-bottom: var(--border-width) solid var(--warn); font-size: var(--size-body-sm); }
.messages { position: relative; }
.starter { align-self: center; width: min(760px, 100%); margin: auto; padding: var(--space-8) var(--space-5); }
.starter-eyebrow { color: var(--ink-muted); }
.starter h2 { margin: var(--space-2) 0 0; font-size: var(--size-h2); }
.starter-copy { max-width: 58ch; margin: var(--space-2) 0 var(--space-5); color: var(--ink-muted); }
.starter-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-2); }
.starter-chip { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: var(--space-3); color: var(--ink-soft); background: var(--paper-3); border: var(--border-width) solid var(--rule); text-align: start; cursor: pointer; }
.starter-chip:hover, .starter-chip:focus-visible { color: var(--ink); background: var(--paper-2); border-color: var(--accent); outline: none; }
.starter-chip .icon { color: var(--accent); }
.scroll-bottom { position: absolute; z-index: var(--z-sticky); inset-inline-end: var(--space-5); inset-block-end: 104px; background: var(--paper-2); box-shadow: var(--elev-pop); }

/* Proven message renderer compatibility */
.message { display: flex; width: min(92%, 860px); }
.message.user { align-self: flex-end; justify-content: flex-end; }
.message.assistant { align-self: flex-start; }
.bubble { width: fit-content; max-width: 100%; padding: var(--space-3) var(--space-4); color: var(--ink-soft); background: var(--paper-3); border: var(--border-width) solid var(--rule); border-radius: 0; overflow-wrap: anywhere; }
.message.user .bubble { color: var(--ink); background: var(--accent-paper); border-color: var(--rule-strong); }
.message.assistant .bubble { width: 100%; }
.response-content > :first-child { margin-top: 0; }
.response-content > :last-child { margin-bottom: 0; }
.response-content p, .response-content li { line-height: var(--lh-normal); }
.response-content h1, .response-content h2, .response-content h3, .response-content h4 { margin: var(--space-5) 0 var(--space-2); font-family: var(--family-display); }
.response-content h1 { font-size: var(--size-h2); }
.response-content h2 { font-size: var(--size-h3); }
.response-content h3, .response-content h4 { font-size: var(--size-body); }
.response-content ul, .response-content ol { padding-inline-start: var(--space-5); }
.response-content code { padding: 1px var(--space-1); background: var(--paper-4); font-family: var(--family-mono); font-size: .92em; }
.response-content pre { overflow-x: auto; padding: var(--space-3); background: var(--ink); color: var(--paper-2); }
.response-content pre code { padding: 0; background: transparent; color: inherit; }
.table-scroll { width: 100%; overflow-x: auto; margin: var(--space-3) 0; }
.response-content table, .query-trace table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--size-body-sm); }
.response-content th, .response-content td, .query-trace th, .query-trace td { padding: var(--space-2); border: var(--border-width) solid var(--rule-strong); text-align: start; vertical-align: top; }
.response-content th, .query-trace th { background: var(--paper-4); font-weight: var(--weight-semibold); }
.response-meta, .loading-elapsed { margin-bottom: var(--space-2); color: var(--ink-muted); font-family: var(--family-mono); font-size: var(--size-mono-xs); }
.bubble.is-loading { display: flex; align-items: center; gap: var(--space-2); width: auto; }
.loading-spinner { width: 12px; height: 12px; border: 2px solid var(--rule-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.response-actions { display: flex; align-items: center; gap: var(--space-1); margin-top: var(--space-3); padding-top: var(--space-2); border-top: var(--border-width) solid var(--rule); }
.response-actions button, .response-actions a, .feedback-button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; color: var(--ink-muted); background: transparent; border: var(--border-width) solid transparent; cursor: pointer; }
.response-actions button:hover, .response-actions a:hover, .feedback-button:hover { color: var(--ink); background: var(--accent-tint); border-color: var(--rule); }
.feedback-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.query-trace { margin-top: var(--space-3); border: var(--border-width) solid var(--rule-strong); }
.query-trace summary { display: flex; align-items: center; gap: var(--space-2); min-height: 38px; padding: var(--space-2) var(--space-3); cursor: pointer; font-family: var(--family-mono); font-size: var(--size-mono-sm); }
.query-trace-badge { margin-inline-start: auto; color: var(--ink-muted); }
.query-trace-body { display: grid; gap: var(--space-2); padding: var(--space-3); border-top: var(--border-width) solid var(--rule); }
.query-trace-row { display: grid; grid-template-columns: minmax(90px,28%) minmax(0,1fr); gap: var(--space-3); }
.query-trace-key { color: var(--ink-muted); font-family: var(--family-mono); font-size: var(--size-mono-xs); text-transform: uppercase; letter-spacing: var(--track-wide); }
.query-trace-value { min-width: 0; overflow-wrap: anywhere; }
.smart-token { cursor: copy; border-bottom: var(--border-width) dotted var(--accent); }

/* Composer: shell plus send button */
.composer { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--space-2); align-items: end; }
.composer .input-shell { grid-column: 1; }
.composer > .ops-chat-send { grid-column: 2; margin-bottom: var(--space-2); }
.composer-expanded .ops-chat-input { min-height: 132px; }
.voice-meter-floating, .voice-interim, .voice-hint, .voice-notice { grid-column: 1 / -1; }
.voice-meter-floating, .voice-interim { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); background: var(--paper-3); border: var(--border-width) solid var(--rule); }
.voice-meter-bars { display: flex; align-items: center; gap: 2px; height: 18px; }
.voice-meter-bars span { width: 2px; height: 6px; background: var(--accent); }
.voice-meter-label, #voice-timer { font-family: var(--family-mono); font-size: var(--size-mono-xs); }
#voice-timer { margin-inline-start: auto; }

/* Context */
.context-stat-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-2); }
.context-stat { display: grid; gap: var(--space-2); padding: var(--space-3); background: var(--paper-3); border: var(--border-width) solid var(--rule); }
.context-stat span, .context-list dt { color: var(--ink-muted); font-family: var(--family-mono); font-size: var(--size-mono-xs); letter-spacing: var(--track-wide); text-transform: uppercase; }
.context-stat strong { font-size: var(--size-h3); }
.context-list { display: grid; gap: 0; margin: 0; border: var(--border-width) solid var(--rule); }
.context-list > div { display: grid; gap: var(--space-1); padding: var(--space-3); }
.context-list > div + div { border-top: var(--border-width) solid var(--rule); }
.context-list dd { margin: 0; overflow-wrap: anywhere; font-family: var(--family-mono); font-size: var(--size-mono-sm); }
.context-guardrails { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.context-guardrails li { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: start; gap: var(--space-2); }
.context-guardrails .status-dot { margin-top: 6px; }
.context-note { display: grid; grid-template-columns: auto minmax(0,1fr); gap: var(--space-3); padding: var(--space-3); background: var(--paper-3); border-inline-start: var(--border-emph) solid var(--accent); }
.context-note p { margin: 0; color: var(--ink-soft); }

/* Modals and toast */
.modal-backdrop { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--space-4); background: rgba(18,20,22,.45); }
.confirm-dialog, .feedback-dialog { width: min(480px,100%); padding: var(--space-5); background: var(--paper-2); border: var(--border-width) solid var(--rule-strong); box-shadow: var(--elev-modal); }
.confirm-dialog { display: grid; grid-template-columns: auto minmax(0,1fr); gap: var(--space-4); }
.confirm-icon { display: grid; place-items: center; width: 38px; height: 38px; background: var(--paper-3); border: var(--border-width) solid var(--rule); }
.confirm-content h2, .feedback-dialog h2 { margin: 0; font-size: var(--size-h3); }
.confirm-content p, .feedback-dialog p { color: var(--ink-muted); }
.confirm-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3); }
.confirm-session { font-family: var(--family-mono); color: var(--ink) !important; }
.feedback-choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.feedback-choice { min-height: 42px; background: var(--paper-3); border: var(--border-width) solid var(--rule); cursor: pointer; }
.feedback-choice.is-selected { border-color: var(--accent); background: var(--accent-tint); }
.feedback-text-field { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.toast { position: fixed; z-index: var(--z-toast); inset-inline-end: var(--space-5); inset-block-end: var(--space-12); display: flex; align-items: center; gap: var(--space-2); max-width: min(420px,calc(100vw - 32px)); padding: var(--space-3) var(--space-4); color: var(--paper-2); background: var(--ink); border: var(--border-width) solid var(--rule-strong); box-shadow: var(--elev-pop); }
.sidebar-backdrop { position: fixed; inset: var(--topbar-h) 0 var(--statusbar-h); z-index: calc(var(--z-sticky) - 1); background: rgba(18,20,22,.35); }

@media (max-width: 75em) {
  .parallel-command { width: min(340px,32vw); }
  .context-toggle { display: inline-grid; }
}

@media (min-width: 75.001em) {
  [data-context-close], .context-toggle { display: none; }
}

@media (max-width: 48em) {
  .avatar-button, .locale-option, .session-delete, .response-actions button, .response-actions a, .feedback-button { min-width: 44px; width: 44px; min-height: 44px; height: 44px; }
  .parallel-app { grid-template-columns: minmax(0,1fr); grid-template-areas: "topbar" "main" "statusbar"; }
  .os-sidebar { display: none; }
  .parallel-command { display: none; }
  .parallel-topbar { grid-template-columns: minmax(0,1fr) auto; }
  .parallel-topbar .topbar-actions { grid-column: 2; }
  .parallel-topbar .crumbs > :not(.crumb-current) { display: none; }
  .statusbar .sb-cell:nth-child(2), .statusbar .sb-cell:nth-child(3) { display: none; }
  html.sidebar-open .ops-chat-history { display: flex; }
  html.sidebar-open .sidebar-backdrop { display: block !important; }
  .starter { padding: var(--space-5) var(--space-3); }
  .starter-grid { grid-template-columns: minmax(0,1fr); }
  .message, .message.user, .message.assistant { width: 100%; }
  .ops-chat-conversation-head { padding-inline: var(--space-2); }
  .ops-chat-conversation-actions { display: none; }
  .ops-chat-composer { padding: var(--space-2); }
  .composer { grid-template-columns: minmax(0,1fr) auto; }
  .context-stat-grid { grid-template-columns: minmax(0,1fr); }
}

@media (min-width: 48.001em) {
  html.sidebar-collapsed .parallel-workspace { grid-template-columns: minmax(0,1fr) minmax(calc(var(--space-16) * 3),28fr); }
  html.sidebar-collapsed .ops-chat-history { display: none; }
}

@media (max-width: 900px) {
  .login-locale button { min-width: 44px; min-height: 44px; }
  .parallel-auth { grid-template-columns: minmax(0,1fr); }
  .parallel-auth .auth-rail { display: none; }
  .parallel-auth .auth-form { padding: var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}