/* Shared surfaces and interactive states, loaded after the original page styles. */
:root {
  --r7-page: #f8f9fd;
  --r7-selected: #fcebf1;
  --r7-selected-border: #c76581;
  --r7-scroll-track: #eef1f7;
  --r7-scroll-thumb: #a76a80;
}
:root[data-theme=dark] {
  --r7-page: #101a2c;
  --r7-selected: #38283e;
  --r7-selected-border: #c67694;
  --r7-scroll-track: #152035;
  --r7-scroll-thumb: #ad7892;
  --border: var(--r7-border);
  background: var(--r7-page);
}
html, body { min-height: 100%; }
body { min-height: 100dvh; background: var(--r7-page); }
#app { min-height: 100dvh; }
* { scrollbar-width: auto; scrollbar-color: var(--r7-scroll-thumb) var(--r7-scroll-track); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--r7-scroll-track); border-radius: 10px; }
::-webkit-scrollbar-thumb { background: var(--r7-scroll-thumb); border: 3px solid var(--r7-scroll-track); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--r7-accent); }
::-webkit-scrollbar-corner { background: var(--r7-scroll-track); }
.workspace-grid, .central-main, .r7-select-options { scrollbar-gutter: stable; }
:root :is(.workspace-grid, .workspace-switcher, .workspace-body, .side-panel, .real-transcript-list,
  .r7-select-panel, .r7-select-options, .central-main, .ops-dialog, .coach-base-text) {
  scrollbar-width: auto;
  scrollbar-color: var(--r7-scroll-thumb) var(--r7-scroll-track);
}

/* SVG chevrons have a geometric center, unlike the former font glyphs. */
.r7-select-arrow { display: grid; place-items: center; flex: 0 0 18px; width: 18px; height: 18px; margin: 0; color: var(--r7-accent); }
.r7-select-arrow svg, .device-arrow svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.r7-select-trigger { align-items: center !important; }
.device-arrow { width: 46px; height: 46px; min-height: 46px; padding: 0; border-radius: 12px; background: var(--r7-surface); color: var(--r7-accent); border-color: var(--r7-border); }
.preview-actions { align-items: center; gap: 8px; }
.meeting-footer .device-arrow { width: 44px; height: 44px; min-height: 44px; margin-left: -3px; background: #27334c; color: #ebd9e6; }
.device-arrow:hover, .device-arrow:focus-visible { outline: 2px solid var(--r7-selected-border); outline-offset: 2px; }

/* Multi-module navigation: an open panel is the only filled state. */
.workspace-switcher button, .kb-navigation button, .kb-tab {
  background: transparent; color: var(--r7-accent); border: 1px solid transparent; border-radius: 8px;
}
.workspace-switcher button.active, .workspace-switcher button[aria-pressed=true], .kb-navigation button.active, .kb-tab.active {
  background: var(--r7-selected); color: var(--r7-accent); border: 1px solid var(--r7-selected-border);
}
.workspace-switcher button:hover, .kb-navigation button:hover { border-color: var(--r7-selected-border); }
.theme-toggle { background: transparent; border-color: transparent; box-shadow: none; }
.meeting-top>.theme-toggle { color: #e5b9ce; }

/* Active camera frames follow their own source; off-camera defaults to 16:9. */
.tile video.camera-video, .tile video#video-self.camera-video { object-fit: contain; }
.preview-box { aspect-ratio: 16 / 9; }
.tile video.screen-video { object-fit: contain; transform: none; }
.tile video.camera-video.picture-in-picture, .tile video#video-self.camera-video.picture-in-picture { object-fit: contain; aspect-ratio: auto; min-width: 0; min-height: 0; }
.tiles { gap: 16px; }
.tile { max-width: 100%; max-height: 100%; }

/* Dark surfaces: actual component selectors, including empty and paused states. */
html[data-theme=dark] :is(.kb-dashboard, .ops-summary-links button, .central-coach-block,
  .summary-sections>section, .feedback-card, .join-field, .ops-empty, .metric-grid article,
  .participant-history, .participant-transcripts>section, .kb-lookup-list article) {
  background: var(--r7-surface); border-color: var(--r7-border); color: var(--r7-text);
}
html[data-theme=dark] :is(.coach-listening, .coach-stage-rail>span, .coach-route, .coach-say,
  .coach-queue-item, .coach-queue-phrase, .coach-history>article, .coach-provenance blockquote,
  .coach-provenance article, .coach-base-text, .summary-waiting, .summary-private-note,
  .summary-evidence blockquote, .transcript-empty, .summary-lead, .transcription-sources,
  .participant-history h4, .participant-transcripts h4, .kb-file-import, .kb-integration-note,
  .kb-readiness, .kb-reading-main, .kb-source, .kb-card-meta span, .ops-calendar-event,
  .ops-history-row, .ops-conflict, .create-steps li, .seller-access-notice, .account-code,
  .snapshot-grid .tip-card, .event-details pre) {
  background: var(--r7-soft); border-color: var(--r7-border); color: var(--r7-text);
}
html[data-theme=dark] :is(.r7-coach-live, .r7-live-summary, .coach-stage-rail) { background: transparent; }
html[data-theme=dark] :is(.coach-live-profile strong, .coach-listening strong, .coach-check-row strong,
  .coach-why strong, .coach-provenance article>strong, .coach-route>strong,
  .summary-waiting strong, .summary-overview>p, .summary-sections h4,
  .kb-dashboard h3, .ops-summary-links strong, .floating-coach strong,
  .component-card>div, .session-mark) { color: var(--r7-text); }
html[data-theme=dark] :is(.summary-sections li>p, .coach-say p, .coach-queue-phrase,
  .coach-listening p, .coach-live-profile small, .coach-check-row small,
  .coach-why p, .coach-stage-caption, .coach-tip-time, .coach-private-footer,
  .summary-evidence, .summary-empty, .summary-footnote, .summary-sections li>small,
  .kb-dashboard p, .kb-dashboard small, .ops-summary-links span, .feedback-labels,
  .r7-select-search input, .ops-empty p) { color: var(--r7-muted) !important; }
html[data-theme=dark] :is(.summary-sections h4>span, .summary-revision, .coach-check-icon,
  .session-mark, .kb-dashboard-icon, .top-avatar, .ops-client-avatar, .ops-person-avatar) {
  background: var(--r7-soft); color: var(--r7-accent); border-color: var(--r7-border);
}
html[data-theme=dark] :is(.coach-stage-rail>span.current, .create-steps .current) {
  background: var(--r7-selected); border-color: var(--r7-selected-border); color: var(--r7-accent);
}
html[data-theme=dark] :is(.coach-check-icon.missing, .coach-live-warning, .feedback-thanks) {
  background: #3c2639; border-color: #86506a; color: #ffc2d4 !important;
}
html[data-theme=dark] .coach-check-row:has(.missing) strong { color: #f4a7bc; }
html[data-theme=dark] .coach-check-icon.observed { background: #203c43; color: #a1dce1; }
html[data-theme=dark] :is(.summary-empty, .summary-evidence, .summary-evidence>summary) { background: transparent; }
html[data-theme=dark] :is(.coach-why, .coach-provenance, .coach-history, .coach-queue-item>details,
  .summary-sections li+li, .recent-row, .chat-form, .session-item footer,
  .session-item-foot, .detail-identity, .member-row, .audit-row, .kb-card footer,
  .kb-category-grid article>div, .kb-dialog fieldset, .kb-history article,
  .kb-archive-row, .kb-lookup-source, .workspace-header, .workspace-switcher,
  .kb-navigation, .component-card, .ops-user-row, .data-badge, .audio-source,
  .coach-checklist, .event-details) { border-color: var(--r7-border); }
html[data-theme=dark] :is(.summary-controls button, .summary-controls a, .coach-role-settings button,
  .coach-base-settings button, .central-coach-block>button, .component-card button,
  .capture-local-actions button, .transcription-sources [data-retry-source], .feedback-scale button) {
  background: var(--r7-soft); color: var(--r7-text); border-color: var(--r7-border);
}
html[data-theme=dark] .feedback-scale button.selected, html[data-theme=dark] .feedback-scale button:hover {
  background: #a42d47; color: white; border-color: #d76b88;
}
html[data-theme=dark] #join-code { background: transparent; color: var(--r7-text); }
html[data-theme=dark] input::placeholder, html[data-theme=dark] textarea::placeholder { color: #9ba9bf; opacity: 1; }
html[data-theme=dark] :is(.eyebrow, .demo-link, .flow-cta, .r7-select-caption, .hero-foot .foot-icon) { color: var(--r7-accent); }
html[data-theme=dark] .hero-art { background: transparent; }
html[data-theme=dark] .hero-art:before { opacity: .24; }
html[data-theme=dark] .workspace-switcher button, html[data-theme=dark] .kb-navigation button,
html[data-theme=dark] .kb-tab { background: transparent; color: var(--r7-accent); border-color: transparent; }
html[data-theme=dark] .workspace-switcher button.active, html[data-theme=dark] .kb-navigation button.active,
html[data-theme=dark] .kb-tab.active { background: var(--r7-selected); color: var(--r7-accent); border-color: var(--r7-selected-border); }
html[data-theme=dark] .device-arrow { background: var(--r7-surface); color: var(--r7-accent); border-color: var(--r7-border); }
/* Text and structural navigation inherit the surface behind them. */
html[data-theme=dark] :is(.audio-guide, .audio-source, .text-button) { background: transparent; color: var(--r7-muted); }
html[data-theme=dark] .text-button:hover { color: var(--r7-accent); text-decoration: underline; }
html[data-theme=dark] .log-filters button { background: transparent; color: var(--r7-muted); border: 1px solid transparent; }
html[data-theme=dark] .log-filters button.active { background: var(--r7-selected); border-color: var(--r7-selected-border); color: var(--r7-accent); }
html[data-theme=dark] :is(.live-transcript-header, .live-transcript-header strong,
  .transcription-sources>div, .transcription-sources>div strong) { color: var(--r7-text); }

@media(max-width:760px) {
  .device-arrow { width: 42px; height: 42px; min-height: 42px; }
  .meeting-footer .device-arrow { width: 40px; height: 40px; min-height: 40px; }
  .meeting-footer .controls { gap: 5px; }
  .meeting-footer .control.share { padding: 0 10px; }
  .meeting-footer .control.share span { font-size: 10px; }
}
@media(max-width:520px) {
  .meeting-footer .control.share span { display: none; }
  .meeting-footer .control.share { min-width: 40px; padding: 0 10px; }
}
@media(prefers-reduced-motion:reduce) { .tile { transition: none; } }