/* A background/foreground pair with purposeful surface variations. Media keeps its colors. */
:root {
  color-scheme: light;
  --theme-background: #FAFCFE;
  --theme-foreground: #086EA6;
  --bg: var(--theme-background);
  --surface: #FBFDFE;
  --surface-soft: #ECF4F9;
  --ink: #152A3A;
  --muted: #5A6975;
  --line: #D8E8F2;
  --theme-control-border: #5199C0;
  --theme-outgoing-bubble: #E3EFF5;
  --accent: var(--theme-foreground);
  --accent-strong: var(--theme-foreground);
  --accent-soft: var(--surface-soft);
  --theme-secondary: var(--theme-background);
  --theme-secondary-soft: var(--surface-soft);
  --theme-on-primary: var(--theme-background);
  --theme-on-secondary: var(--theme-foreground);
  --blue: var(--accent);
  --blue-strong: var(--accent-strong);
  --blue-pale: var(--accent-soft);
  --green: var(--accent);
  --green-strong: var(--accent-strong);
  --soft-green: var(--accent-soft);
  --gold: var(--accent-strong);
  --red: var(--accent-strong);
  --dw-carbon: var(--ink);
  --dw-title-ink: var(--theme-on-primary);
  --dw-carbon-soft: var(--ink);
  --dw-cyan: var(--theme-secondary);
  --dw-gold: var(--theme-secondary);
}

.appearance-settings { padding: 12px 0; border-bottom: 1px solid var(--line, #ddd); }
.appearance-settings > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 0; list-style: none; cursor: pointer; }
.appearance-settings > summary::-webkit-details-marker { display: none; }
.appearance-settings > summary > ion-icon { width: 21px; height: 21px; color: var(--accent); flex-shrink: 0; }
.appearance-settings > summary > ion-icon:last-child { margin-left: auto; width: 16px; height: 16px; }
.appearance-settings > summary > span { display: grid; gap: 3px; min-width: 0; }
.appearance-settings > summary strong { color: var(--ink); font-size: 15px; }
.appearance-settings > summary small, .theme-setting-status { color: var(--muted); font-size: 12px; }
.theme-options { display: grid; grid-template-columns: 1fr; gap: 4px; min-width: 0; margin: 10px 0 0; padding: 0; border: 0; }
.theme-options legend { padding: 0 0 8px; font-size: 12px; color: var(--muted); }
.theme-option { display: grid; grid-template-columns: 18px 42px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 56px; padding: 8px; border: 1px solid transparent; border-radius: 6px; cursor: pointer; }
.theme-option:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); }
.theme-option:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.theme-option input { width: 17px; height: 17px; margin: 0; accent-color: var(--accent); }
.theme-swatch { display: grid; place-items: center; width: 42px; height: 32px; border-radius: 5px; overflow: hidden; border: 1px solid var(--swatch-primary); color: var(--swatch-primary); background: var(--swatch-secondary); font-size: 16px; font-weight: 600; }
.theme-option-copy { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.theme-option-copy small { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.theme-option-copy strong { font-size: 13px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.theme-setting-status { margin: 10px 8px 0; line-height: 1.45; }

.primary, .send-button { background-color: var(--accent); color: var(--theme-on-primary); }
body.dw-main-window { color: var(--ink); background: var(--bg); }
.dw-main-window .chat-row.active { background: var(--accent-soft); color: var(--ink); box-shadow: inset 3px 0 var(--accent); }
.dw-main-window .chat-row.active .row-title { color: var(--ink); }
.dw-main-window .chat-row.active :is(.row-subtitle, .row-meta small, .muted) { color: var(--muted); }
.dw-main-window .chat-row.active :is(ion-icon, .chat-draft-label) { color: var(--accent); }
.local-segments [aria-pressed="true"], .sidebar-language { color: var(--accent-strong); }
.chat-local-tools > .local-segments button[aria-pressed="true"] { border-bottom-color: var(--accent); background: var(--accent); color: var(--theme-on-primary); }
.dw-main-window .bubble, .dw-main-window .bubble.mine { background: var(--theme-incoming-bubble, var(--surface-soft)); color: var(--ink); border: 0; box-shadow: none; }
.dw-main-window .bubble.mine { background: var(--theme-outgoing-bubble); }
.dw-main-window .badge { background: var(--accent); color: var(--theme-on-primary); }
.dw-main-window .chat-row.active .badge { background: var(--accent); color: var(--theme-on-primary); }
@media (max-width: 760px), (max-width: 1100px) and (pointer: coarse) {
  .dw-main-window .shell.mobile-list .chat-row.active { color: var(--ink); }
  .dw-main-window .shell.mobile-list .chat-row.active { background: transparent; box-shadow: none; }
  .dw-main-window .shell.mobile-list .chat-row.active .row-title { color: var(--ink); }
  .dw-main-window .shell.mobile-list .chat-row.active .avatar:not(:has(img)) { background: var(--accent-soft); }
  .dw-main-window .shell.mobile-list .chat-row.active .badge { background: var(--accent); color: var(--theme-on-primary); }
}
.dw-main-window .composer-field:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent); }
.dw-main-window .search-field input { background: transparent; border: 0; }
.dw-main-window .avatar:not(:has(img)) { color: var(--accent); background: var(--accent-soft); }
.dw-main-window .chat-row.active .avatar:not(:has(img)) { background: var(--surface); }
.dw-main-window .row-meta small { color: var(--muted); }
.message-search-text, .message-search-current .message-search-text { background: var(--accent); color: var(--theme-on-primary); }
.message-search-current { background: var(--theme-secondary-soft); box-shadow: 0 0 0 2px var(--accent); }
.message-search-match { box-shadow: 0 0 0 2px var(--theme-secondary); }
.chat-draft-label, .composer-local-status, .local-error, .composer-modes,
.receipt.failed, .receipt.pending, .receipt.delivered, .receipt.retry:hover, .receipt.retry:focus-visible,
.dw-main-window .status:not(:empty), .conversation-tools-status.is-error, .schedule-error,
.discovery-status.is-error, .action-request-dialog .request-error { color: var(--accent-strong); }
.local-followup-count { background: var(--accent); color: var(--theme-on-primary); }
.inline-priority.active, .inline-view-once.active, .pill.off { background: var(--accent-soft); }
.notice-history > summary > ion-icon, .notice-history-icon, .inspector-guide-entry > span:first-child { background: var(--accent-soft); color: var(--accent); }
.onboarding-choice.ready-state > ion-icon, .tutorial-receipt, .translator-demo > strong, .voice-demo ion-icon { color: var(--accent); }
.chat-tools-menu [aria-checked="true"], .chat-tools-menu button:hover,
.chat-tools-menu button:focus-visible { color: var(--accent-strong); background: var(--accent-soft); }
.chat-catch-up a:focus-visible, .chat-conversation-tools button:focus-visible,
.chat-conversation-tools input:focus-visible, .chat-conversation-tools textarea:focus-visible,
.chat-voice-transcript button:focus-visible, .voice-transcribe-button:focus-visible { outline-color: var(--accent); }
.discovery-tabs [aria-selected="true"] { border-color: var(--accent); color: var(--accent); }
.discovery-avatar { color: var(--accent); background: var(--accent-soft); }
.discovery-visibility input, .action-request-dialog input[type="checkbox"] { accent-color: var(--accent); }
.discovery-preview > ion-icon { color: var(--accent); }
.contact-panel.invitation-focus { background: var(--theme-secondary-soft); box-shadow: inset 3px 0 0 var(--theme-secondary); animation: none; }
.onboarding-choice-icon, .onboarding-choice-icon.ready { background: var(--accent-soft); color: var(--accent-strong); }
.onboarding-choice-icon.warning, .onboarding-choice-icon.error { background: var(--theme-secondary-soft); color: var(--accent-strong); }
.onboarding-language-tile.selected, .onboarding-language-tile:hover { border-color: var(--accent); background: var(--accent-soft); }
.onboarding-check, .tutorial-wave i { background: var(--accent); }
.professional-network { --pn-accent: var(--accent); --pn-strong: var(--accent-strong); }
.professional-network .pn-error { color: var(--accent-strong); }
.professional-network .pn-avatar { color: var(--accent-strong); background: var(--accent-soft); }
.professional-network .pn-tabs [aria-pressed="true"] { border-bottom-color: var(--accent); }

.dw-titlebar { border-bottom-color: var(--theme-secondary); }
.dw-titlebar::after, .dw-drag-beacon { box-shadow: none; }
.dw-window-controls button:hover, .dw-window-controls button:focus-visible { background: var(--theme-background); color: var(--theme-foreground); }
.dw-window-controls .dw-window-close:hover, .dw-window-controls .dw-window-close:focus-visible { background: var(--theme-secondary); color: var(--theme-on-secondary); }
.dw-app-menu, .dw-about { background: var(--dw-carbon); border-color: var(--theme-secondary); }
.dw-app-menu button:hover, .dw-app-menu button:focus-visible { background: var(--theme-background); color: var(--theme-foreground); }

/* Call controls retain clear on/off, recording and hang-up symbols without a third accent. */
.dw-call-window .call-shell, .dw-call-window .video-grid,
.dw-call-window #remoteVideo, .dw-call-window .waiting { background: var(--theme-background); color: var(--theme-foreground); }
.dw-call-window .call-header, .dw-call-window .call-controls { background: var(--theme-background); color: var(--ink); border-color: var(--line); }
.dw-call-window .voice-mode .call-header { background: var(--surface); color: var(--ink); border-color: var(--line); }
.dw-call-window .waiting-avatar, .dw-call-window .voice-avatar { background: var(--accent); color: var(--theme-on-primary); box-shadow: none; }
.dw-call-window .control-icon { background: var(--theme-background); color: var(--theme-foreground); border: 1px solid currentColor; }
.dw-call-window .control:hover .control-icon, .dw-call-window .control:focus-visible .control-icon { background: var(--theme-secondary); color: var(--theme-on-secondary); }
.dw-call-window .voice-mode .control-icon { color: var(--accent); background: var(--accent-soft); }
.dw-call-window .control.active .control-icon, .dw-call-window .control.saver.active .control-icon,
.dw-call-window .control.end .control-icon { color: var(--theme-on-primary); background: var(--accent); }
.dw-call-window .record-control-icon { color: var(--accent); }
.dw-call-window .voice-mode .record-control-icon { color: var(--accent); }
.dw-call-window .control.recording .record-control-icon { color: var(--theme-on-primary); background: var(--accent); }
.dw-call-window .record-dot { background: var(--theme-secondary); }
.dw-call-window .share-status { background: var(--accent); color: var(--theme-on-primary); }
.dw-call-window .share-pointer { background: var(--theme-secondary); box-shadow: 0 0 0 3px var(--theme-secondary-soft); }
.dw-call-window .voice-mode .caption-state { color: var(--accent); }
body.dw-call-window { color: var(--ink); background: var(--bg); }
.dw-call-window :is(.voice-stage, .language-sheet-card, .call-settings, .recording-consent,
  .voice-mode .caption-source-line, .voice-mode .caption-translation-line) { color: var(--ink); background: var(--surface); }
.dw-call-window :is(.call-brand div > span, .call-time, .waiting p, .voice-stage h1, .voice-stage p,
  .control, .control-label, .language-chip, .voice-mode .caption-source, .voice-mode .caption-translation),
.dw-call-window .call-shell[data-call-state] :is(#callStatus, #voiceStatus) { color: var(--ink); }
.dw-call-window :is(.language-chip, .voice-mode .language-chip) { background: var(--surface); border: 1px solid var(--theme-control-border); }
.dw-call-window .voice-avatar { border-color: var(--bg); }
.dw-call-window :is(.call-notice, .media-notice) { color: var(--theme-on-primary); background: var(--accent); }
.dw-call-window button:focus-visible { outline-color: var(--accent); }
.dw-call-window :is(.language-dialog, .language-dialog select, .media-recovery) { color: var(--ink); background: var(--surface); border-color: var(--theme-control-border); }
.dw-call-window :is(.language-dialog p, .language-dialog label, .language-secondary, .media-recovery p) { color: var(--ink); }
.dw-call-window :is(.language-primary, .media-recovery-actions button) { color: var(--theme-on-primary); background: var(--accent); }

.eagle-academy .academy-return-button, .eagle-academy .compact-command,
.eagle-academy .access-row-action, .eagle-academy .access-status[data-tone="error"],
.eagle-academy .review-item b.incorrect { color: var(--accent-strong); }
.eagle-academy .practice-option.correct, .eagle-academy .practice-option.incorrect,
.eagle-academy .access-row-action[data-active="true"] { color: var(--accent-strong); border-color: var(--accent); background: var(--accent-soft); }
.eagle-academy .chapter-number, .eagle-academy .trophy-label { color: var(--accent); }
.eagle-academy .tab-button.active { border-color: var(--accent); }

/* Legacy shell rules must not reintroduce white panels or a blue/green third accent. */
.dw-main-window :is(.app-startup, .login, .chat-tools-menu, .composer-field:focus-within,
  .message-search, .message-search-bar, .local-search, .chat-discovery, .professional-network),
.dw-main-window :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
  background-color: var(--surface); color: var(--ink); border-color: var(--line);
}
.dw-main-window :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select),
.dw-main-window .professional-network :is(input, button:not(.pn-icon):not(.pn-person)),
.dw-main-window .chat-discovery :is(input, select) { border-color: var(--theme-control-border); }
.dw-main-window :is(.send-button, .primary, .avatar, .invitation-count-badge span) {
  background-color: var(--accent); color: var(--theme-on-primary);
}
.dw-main-window .search-field #search { background-color: transparent; }
.dw-main-window .chat-list .avatar:not(:has(img)) { background-color: var(--accent-soft); color: var(--accent); font-weight: 600; }
.dw-main-window :is(.chat-header, .sidebar, .inspector, .composer) { border-color: var(--line); }
.dw-main-window .topbar::after { background: var(--line); }
.dw-main-window :is(button, input, textarea, select):focus-visible { outline-color: var(--accent); }
.dw-main-window input::placeholder, .dw-main-window textarea::placeholder { color: var(--muted); opacity: 1; }
.dw-main-window .messages { scrollbar-color: var(--accent) var(--surface); }
.dw-main-window .auth-tab.active { color: var(--theme-on-primary); background: var(--accent); }
.dw-main-window .professional-network :is(button, input),
.dw-main-window .chat-discovery :is(input, select) { color: var(--ink); background: var(--surface); border-color: var(--line); }
.dw-main-window .professional-network :is(.pn-primary, .pn-primary:hover:enabled) { color: var(--theme-on-primary); background: var(--accent); }
.dw-main-window .professional-network :is(small, dt, p, .pn-status, .pn-empty),
  .dw-main-window .chat-discovery :is(small, .discovery-empty, .discovery-status, figcaption) { color: var(--muted); }
.dw-main-window .professional-network :is(header, .pn-tabs, .pn-results li, dl > div, .pn-discard),
.dw-main-window .chat-discovery :is(header, footer, .discovery-tabs, .discovery-list > li) { border-color: var(--line); }
.dw-main-window :is(.request-empty, .request-member-list small) { color: var(--ink); }
.dw-main-window .request-member-list, .dw-main-window .request-list article { border-color: var(--line); }
.dw-main-window :is(.desktop-onboarding, .desktop-onboarding-footer, .desktop-onboarding-progress,
  .onboarding-language-tile, .onboarding-choice, .onboarding-download-card) { background: var(--surface); }
.dw-main-window .desktop-onboarding-body { scrollbar-color: var(--accent) var(--bg); }
.dw-main-window .miniapp-runtime-controls button { color: var(--ink); background: var(--surface); opacity: 1; }

.eagle-academy { --canvas: var(--bg); --blue-soft: var(--surface); }
.eagle-academy :is(.topbar, .academy-return-button, .icon-button, .course-card, .access-field input,
  .metric-grid div, .achievement-strip div, .teacher-note, .hall-empty, .studio-toolbar,
  .studio-ai-panel, .studio-ai-prompt, .studio-question, .tab-button.active) {
  background: var(--surface); color: var(--ink); border-color: var(--line);
}
.eagle-academy :is(.course-badge, .primary-action, .chapter.complete .chapter-number,
  .studio-ai-badge, .access-primary) { color: var(--theme-on-primary); background: var(--accent); }
.eagle-academy :is(.teacher-symbol, .studio-notice, .studio-chapter[aria-selected="true"],
  .access-status[data-tone="error"], .access-status[data-tone="success"]) { color: var(--ink); }
.eagle-academy :is(.library-search, .access-field input, input, textarea, select) {
  color: var(--ink); background: var(--surface); border-color: var(--theme-control-border);
}
.eagle-academy input::placeholder, .eagle-academy textarea::placeholder { color: var(--muted); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .theme-option, .appearance-settings summary { transition: none; }
}

/* Filled bubbles carry the grouping; keyboard focus remains a separate state. */
.dw-main-window .messages { padding: 10px 12px; }
.dw-main-window .messages > .bubble {
  margin-bottom: 4px;
  border: 0;
  border-radius: 16px 16px 16px 5px;
  color: var(--ink);
  background: var(--theme-incoming-bubble, var(--surface-soft));
  box-shadow: none;
}
.dw-main-window .messages > .bubble.mine {
  border: 0;
  border-radius: 16px 16px 5px 16px;
  background: var(--accent-soft);
  background: var(--theme-outgoing-bubble);
}
.dw-main-window .messages > .bubble:not(.image-bubble) { padding: 7px 10px; }
.dw-main-window .messages > .bubble > .meta { margin-bottom: 2px; }
.dw-main-window #messages .bubble.message-search-match { box-shadow: none; }
.dw-main-window #messages .bubble.message-search-current {
  box-shadow: none;
  background: color-mix(in srgb, var(--accent) 23%, var(--surface));
}
.dw-main-window .bubble > .media-card { grid-template-columns: 32px minmax(0, 1fr); gap: 8px; }
.dw-main-window .bubble > .media-card .media-file-icon { width: 32px; height: 36px; }
.dw-main-window .chat-list > .chat-row { min-height: 64px; padding-block: 8px; }
.dw-main-window .chat-local-tools { margin-top: 0; gap: 6px; border-bottom: 0; }
.dw-main-window .chat-local-tools > .local-segments {
  flex: 0 1 200px;
  gap: 2px;
  padding: 2px;
  border-radius: 10px;
  background: var(--bg);
  background: color-mix(in srgb, var(--line) 35%, var(--surface));
}
.dw-main-window .chat-local-tools > .local-segments button {
  flex: 1 1 0;
  min-width: 64px;
  min-height: 44px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  color: var(--ink);
  background: transparent;
  font-weight: 500;
  transition: color var(--motion-fast), background-color var(--motion-fast);
}
.dw-main-window .chat-local-tools > .local-segments button[aria-pressed="true"] {
  color: var(--accent-strong);
  background: var(--surface);
  font-weight: 700;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 12%, transparent);
}
.dw-main-window .chat-local-tools > .local-segments button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
@media (max-width: 760px), (max-width: 1100px) and (pointer: coarse) {
  .dw-main-window .topbar { padding-inline: max(16px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-right)); min-height: 64px; }
  .dw-main-window .messages { padding: 10px max(10px, env(safe-area-inset-right)) 10px max(10px, env(safe-area-inset-left)); }
  .dw-main-window .chat-list > .chat-row { min-height: 68px; padding-block: 8px; }
  .dw-main-window .sidebar .chat-local-tools { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dw-main-window .chat-local-tools > .local-segments button { transition: none; }
}