/* Bridge the existing five theme families and two modes into every learning surface. */
body.learning-workspace-page {
  --ws-bg-page: var(--bg-page, #f8fafc);
  --ws-bg-surface: var(--bg-card, #fff);
  --ws-bg-card: var(--bg-card, #fff);
  --ws-bg-card-hover: var(--bg-card-alt, #f8fafc);
  --ws-bg-surface-blue: var(--accent-light, #f0f9ff);
  --ws-border: var(--border-card, #e2e8f0);
  --ws-border-strong: var(--accent-border, #bae6fd);
  --ws-border-subtle: var(--border-subtle, #e2e8f0);
  --ws-text-primary: var(--text-primary, #0f172a);
  --ws-text-secondary: var(--text-secondary, #334155);
  --ws-text-muted: var(--text-secondary, #475569);
  --ws-text-faint: var(--text-secondary, #475569);
  --ws-accent: var(--primary-color, #0369a1);
  --ws-accent-hover: var(--primary-hover, #075985);
  --ws-accent-surface: var(--accent-light, #f0f9ff);
  --ws-link: var(--badge-text, #0369a1);
  --ws-button-bg: var(--accent-dark, #0369a1);
  --ws-button-hover: var(--accent-dark, #0369a1);
  --ws-on-accent: #fff;
  --ws-success-text: #065f46;
  --ws-warning-text: #854d0e;
  --ws-error-text: #b91c1c;
  --ws-success-bg: color-mix(in srgb, var(--ws-bg-card) 92%, #10b981);
  --ws-warning-bg: color-mix(in srgb, var(--ws-bg-card) 92%, #f59e0b);
  --ws-error-bg: color-mix(in srgb, var(--ws-bg-card) 92%, #ef4444);
  --ws-emerald: var(--ws-success-text);
  --ws-amber: var(--ws-warning-text);
  --ws-shadow: var(--shadow-sm, 0 2px 10px #0000000a);
  color: var(--ws-text-primary);
}
:is(html[data-mode="dark"], html[data-theme-mode="dark"], html[data-theme="dark"]) body.learning-workspace-page,
body.learning-workspace-page:is(.dark-mode, .dark-theme) {
  --ws-on-accent: #070a12;
  --ws-button-bg: var(--primary-color, #7dd3fc);
  --ws-button-hover: color-mix(in srgb, var(--ws-button-bg) 85%, white);
  --ws-success-text: #a7f3d0;
  --ws-warning-text: #fde68a;
  --ws-error-text: #fda4af;
}
/* These tokens must live below the old root-level light/dark overrides. */
body.learning-workspace-page #workspaceGridContainer,
body.learning-workspace-page :is(#mobileDrawerRoadmap, #mobileSheetMaterials) {
  --pniel-ai-bg: var(--ws-bg-surface);
  --pniel-ai-surface: var(--ws-bg-card);
  --pniel-ai-surface-subtle: var(--ws-bg-card-hover);
  --pniel-ai-border: var(--ws-border);
  --pniel-ai-text-primary: var(--ws-text-primary);
  --pniel-ai-text-secondary: var(--ws-text-muted);
  --pniel-ai-accent: var(--ws-link);
  --pniel-ai-accent-bg: var(--ws-accent-surface);
  --pniel-ai-bubble-user: var(--ws-accent-surface);
  color: var(--ws-text-primary);
}
body.learning-workspace-page #workspaceGridContainer #pnielAiWorkspace,
body.learning-workspace-page #workspaceGridContainer #pnielAiWorkspace :is(.pniel-ai-header, .pniel-ai-messages, .pniel-ai-bottom-area, .pniel-ai-composer-area) {
  background: var(--ws-bg-surface) !important; border-color: var(--ws-border) !important;
}
body.learning-workspace-page #workspaceGridContainer #pnielAiWorkspace :is(.pniel-ai-title, .onboarding-hero-title, .msg-meta-author, .pniel-ai-locked-title) {
  color: var(--ws-text-primary) !important;
}
body.learning-workspace-page #workspaceGridContainer #pnielAiWorkspace :is(.pniel-ai-subtitle, .onboarding-hero-subtitle, .msg-meta-time, .pniel-ai-locked-sub, .pniel-ai-composer-subtext, .pniel-ai-char-counter) {
  color: var(--ws-text-muted) !important;
}
body.learning-workspace-page #workspaceGridContainer #pnielAiWorkspace .pniel-ai-onboarding-hero {
  color: var(--ws-text-primary) !important; background: transparent !important;
}
body.learning-workspace-page #workspaceGridContainer #pnielAiWorkspace :is(.pniel-ai-form, .pniel-ai-locked-card, .pniel-ai-action-chip, .pniel-ai-followup-chip) {
  background: var(--ws-bg-card-hover) !important;
  color: var(--ws-text-primary) !important; border-color: var(--ws-border) !important;
}
body.learning-workspace-page #workspaceGridContainer #pnielAiWorkspace .pniel-ai-textarea {
  color: var(--ws-text-primary) !important; background: transparent !important;
  caret-color: var(--ws-text-primary);
}
body.learning-workspace-page #workspaceGridContainer #pnielAiWorkspace .pniel-ai-textarea::placeholder { color: var(--ws-text-muted) !important; opacity: 1; }
body.learning-workspace-page #workspaceGridContainer #pnielAiWorkspace .pniel-ai-message.tutor .pniel-ai-bubble {
  color: var(--ws-text-primary) !important; background: transparent !important;
}
body.learning-workspace-page #workspaceGridContainer #pnielAiWorkspace .pniel-ai-message.user .pniel-ai-bubble {
  color: var(--ws-text-primary) !important; background: var(--ws-accent-surface) !important;
  border-color: var(--accent-border, var(--ws-border)) !important;
}
/* Do not recolor SVG curves, plot labels or molecule atoms. Only message HTML. */
body.learning-workspace-page #workspaceGridContainer #pnielAiWorkspace .pniel-ai-bubble :is(p, strong, em, li, blockquote, h1, h2, h3, h4, h5, h6) {
  color: inherit !important;
}
body.learning-workspace-page #workspaceGridContainer #pnielAiWorkspace .pniel-ai-bubble a { color: var(--ws-link) !important; text-decoration: underline; }
body.learning-workspace-page #workspaceGridContainer #pnielAiWorkspace .pniel-ai-bubble :is(pre, code, table, th, td, .katex-display, details.chat-expander-card, details.chat-expander-card summary, .expander-content) {
  color: var(--ws-text-primary) !important; background: var(--ws-bg-card-hover) !important; border-color: var(--ws-border) !important;
}
body.learning-workspace-page #workspaceGridContainer #pnielAiWorkspace .pniel-ai-bubble :is(.katex, .katex-html, details.chat-expander-card summary) { color: var(--ws-text-primary) !important; }
body.learning-workspace-page #workspaceGridContainer #pnielAiWorkspace .pniel-ai-bubble :is(.visual-title, .visual-badge, .control-title, .visual-loading-state, .visual-loading-state > div) { color: var(--ws-text-primary) !important; }
body.learning-workspace-page #workspaceGridContainer #pnielAiWorkspace :is(.pniel-ai-usage-notice.is-warning) { color: var(--ws-warning-text) !important; background: var(--ws-warning-bg) !important; border-color: var(--ws-warning-text) !important; }
body.learning-workspace-page #workspaceGridContainer #pnielAiWorkspace :is(.pniel-ai-usage-notice.is-critical, .pniel-visual-error, .visual-fallback-notice) { color: var(--ws-error-text) !important; background: var(--ws-error-bg) !important; border-color: var(--ws-error-text) !important; }
body.learning-workspace-page #workspaceGridContainer :is(.roadmap-step.current .step-title, .materials-task-item.is-active .material-task-title, .material-status-pill.pill-reading) { color: var(--ws-link) !important; }
body.learning-workspace-page #workspaceGridContainer :is(.roadmap-step.current, .materials-task-item.is-active) { background: var(--ws-accent-surface) !important; border-color: var(--accent-border, var(--ws-border)) !important; }
body.learning-workspace-page #workspaceGridContainer :is(.step-title, .reader-title, .material-task-title, .panel-header-title, .progress-ring-label, .progress-summary-count, .stat-number) { color: var(--ws-text-primary) !important; }
body.learning-workspace-page #workspaceGridContainer :is(.step-subtitle, .material-task-sub, .stat-caption, .reader-meta-row, .material-status-pill.pill-unread) { color: var(--ws-text-muted) !important; }
body.learning-workspace-page #workspaceGridContainer :is(.roadmap-step.completed .step-title, .material-status-pill.pill-completed) { color: var(--ws-success-text) !important; }
body.learning-workspace-page #workspaceGridContainer :is(.roadmap-step.completed .step-marker-btn, .material-marker-btn.is-completed) { color: var(--ws-success-text) !important; background: var(--ws-success-bg) !important; border-color: var(--ws-success-text) !important; }
body.learning-workspace-page :is(.workspace-view-btn.is-active, .btn-material-action-primary:not(.is-completed), .btn-complete-reader-resource:not(.is-completed), .btn-open-ai-teach),
body.learning-workspace-page #workspaceGridContainer #pnielAiWorkspace :is(.pniel-ai-send-btn, .pniel-ai-locked-cta, .pniel-ai-onboarding-btn) {
  color: var(--ws-on-accent) !important; background: var(--ws-button-bg) !important; border-color: var(--ws-button-bg) !important;
}
body.learning-workspace-page :is(.workspace-view-btn.is-active, .btn-material-action-primary:not(.is-completed), .btn-complete-reader-resource:not(.is-completed), .btn-open-ai-teach):hover,
body.learning-workspace-page #workspaceGridContainer #pnielAiWorkspace :is(.pniel-ai-send-btn, .pniel-ai-locked-cta, .pniel-ai-onboarding-btn):hover { background: var(--ws-button-hover) !important; }
body.learning-workspace-page :is(button, a, textarea, input, select):focus-visible { outline: 2px solid var(--ws-link) !important; outline-offset: 3px; }
body.learning-workspace-page .workspace-nav-hamburger.is-collapsed { color: var(--ws-link) !important; border-color: var(--accent-border, var(--ws-border)) !important; background: var(--ws-accent-surface) !important; }
/* Existing inline controls and mobile panels need the same palette as the chat. */
body.learning-workspace-page :is(.mobile-drawer, .mobile-sheet, .workspace-tools-dropdown, .workspace-course-dropdown) {
  background: var(--ws-bg-card) !important; color: var(--ws-text-primary) !important; border-color: var(--ws-border) !important;
}
body.learning-workspace-page :is(.drawer-header, .drawer-close-btn, .roadmap-panel, .materials-panel) { color: var(--ws-text-primary) !important; }
body.learning-workspace-page :is(.btn-goto-course-booklets, .orientation-chip, .workspace-course-item.is-active) {
  color: var(--ws-link) !important; background: var(--ws-accent-surface) !important; border-color: var(--accent-border, var(--ws-border)) !important;
}
body.learning-workspace-page #workspaceGridContainer #pnielAiWorkspace :is(.pniel-ai-clean-input, .pniel-ai-clean-textarea, .pniel-ai-clean-select, .pniel-ai-cancel-btn, .pniel-ai-usage-notice button, #pnielAiBtnMinorYes) {
  color: var(--ws-text-primary) !important; background: var(--ws-bg-card-hover) !important; border-color: var(--ws-border) !important;
}
body.learning-workspace-page #workspaceGridContainer #pnielAiWorkspace :is(.pniel-ai-clean-input, .pniel-ai-clean-textarea)::placeholder { color: var(--ws-text-muted) !important; opacity: 1; }
body.learning-workspace-page #workspaceGridContainer #pnielAiWorkspace :is(#pnielAiBtnAdultYes, #pnielAiBtnSendLegacyGuardian) { color: var(--ws-on-accent) !important; background: var(--ws-button-bg) !important; }
body.learning-workspace-page #workspaceGridContainer #pnielAiWorkspace #pnielAiLegacyMinorForm > div:first-child { color: var(--ws-warning-text) !important; }
body.learning-workspace-page #workspaceGridContainer #pnielAiWorkspace :is(.pniel-visual-header, .visual-controls, .visual-controls-panel) { color: var(--ws-text-primary) !important; background: var(--ws-bg-card-hover) !important; border-color: var(--ws-border) !important; }
body.learning-workspace-page :is(#workspaceGridContainer, #mobileDrawerRoadmap, #mobileSheetMaterials) :is(.state-progress-pct, .material-status-pill.pill-reading, .roadmap-step.current .step-title) { color: var(--ws-link) !important; }
body.learning-workspace-page :is(#workspaceGridContainer, #mobileDrawerRoadmap, #mobileSheetMaterials) :is(.material-status-pill.pill-reading, .roadmap-step.current, .materials-task-item.is-active) { background: var(--ws-accent-surface) !important; border-color: var(--accent-border, var(--ws-border)) !important; }
body.learning-workspace-page :is(#workspaceGridContainer, #mobileDrawerRoadmap, #mobileSheetMaterials) :is(.material-status-pill.pill-unread, .step-marker-btn) { color: var(--ws-text-muted) !important; background: var(--ws-bg-card-hover) !important; border-color: var(--ws-border) !important; }
body.learning-workspace-page :is(#workspaceGridContainer, #mobileDrawerRoadmap, #mobileSheetMaterials) :is(.material-status-pill.pill-completed, .tag-mastered, .btn-material-action-primary.is-completed, .btn-complete-reader-resource.is-completed) { color: var(--ws-success-text) !important; background: var(--ws-success-bg) !important; border-color: var(--ws-success-text) !important; }
body.learning-workspace-page :is(#workspaceGridContainer, #mobileDrawerRoadmap) :is(.tag-developing, .tag-practice) { color: var(--ws-warning-text) !important; background: var(--ws-warning-bg) !important; border-color: var(--ws-warning-text) !important; }

/* Chat composer: one focus indicator on the capsule, no inner rectangle. */
body.learning-workspace-page #workspaceGridContainer #pnielAiWorkspace #pnielAiInput:is(:focus, :focus-visible) {
  outline: none !important; border: none !important; box-shadow: none !important;
}
body.learning-workspace-page #workspaceGridContainer #pnielAiWorkspace #pnielAiForm:focus-within {
  border-color: var(--ws-link) !important;
  box-shadow: 0 0 0 2px var(--ws-accent-surface) !important;
}
body.learning-workspace-page #workspaceGridContainer #pnielAiWorkspace .pniel-visual-graphic-wrapper:focus-visible {
  outline: 2px solid var(--ws-link); outline-offset: -3px;
}