/* Shared canvas in all four cabinet sections; theme is applied before React navigation. */
:root { color-scheme: light; --cabinet-canvas: #eef2f4; }
html.dark { color-scheme: dark; --cabinet-canvas: #141f2c; }
html, body, #root, #root > div, #root > div > div:last-child {
  min-height: 100%;
  background-color: var(--cabinet-canvas);
}
body[data-karma-view="analytics"] #root [class~="h-screen"][class~="overflow-hidden"] > [class~="flex-1"],
body[data-karma-view="reports"] #root [class~="h-screen"][class~="overflow-hidden"] > [class~="flex-1"],
body[data-karma-view="dialogs"] #root [class~="h-screen"][class~="overflow-hidden"] > [class~="flex-1"],
body[data-karma-view="transcription"] #root .karma-transcription-page {
  background: var(--cabinet-canvas) !important;
}
html.dark body[data-karma-view="dialogs"] #root [class~="w-1/2"][class~="border-r"],
html.dark body[data-karma-view="dialogs"] #root [class~="w-1/2"][class~="bg-gray-50"],
html.dark body[data-karma-view="dialogs"] #root [class~="w-1/2"][class~="bg-gray-900"],
html.dark body[data-karma-view="dialogs"] #root [data-karma-analysis],
html.dark body[data-karma-view="dialogs"] #root [data-karma-analysis-part="body"] {
  background: var(--cabinet-canvas) !important;
}
html.dark body[data-karma-view="dialogs"] #root [data-karma-analysis] { --ka-canvas: var(--cabinet-canvas); }
html.dark body[data-karma-view="reports"] #root [class~="h-screen"][class~="overflow-hidden"] { --kr-canvas: var(--cabinet-canvas); }
html:not(.dark) body[data-karma-view="dialogs"] #root [class~="w-1/2"][class~="border-r"],
html:not(.dark) body[data-karma-view="dialogs"] #root [class~="w-1/2"][class~="bg-gray-50"],
html:not(.dark) body[data-karma-view="dialogs"] #root [data-karma-analysis],
html:not(.dark) body[data-karma-view="dialogs"] #root [data-karma-analysis-part="body"] {
  background: var(--cabinet-canvas) !important;
}
html:not(.dark) body[data-karma-view="dialogs"] #root [data-karma-analysis] { --ka-canvas: var(--cabinet-canvas); }
html:not(.dark) body[data-karma-view="reports"] #root [class~="h-screen"][class~="overflow-hidden"] { --kr-canvas: var(--cabinet-canvas); }

/* Existing WaveSurfer instance renders decoded real audio. Place it on a tonal track. */
body[data-karma-view="dialogs"] #root [data-karma-analysis-part="player"] > div > div[class~="items-center"] {
  grid-template-rows: 44px 17px !important;
  min-height: 67px !important;
}
body[data-karma-view="dialogs"] #root [data-karma-analysis-part="player"] > div > div[class~="items-center"] > div[class~="relative"] {
  height: 44px !important;
  min-height: 44px !important;
  overflow: visible;
  background: #e2ebef !important;
  border-radius: 10px;
}
html.dark body[data-karma-view="dialogs"] #root [data-karma-analysis-part="player"] > div > div[class~="items-center"] > div[class~="relative"] {
  background: #1a2938 !important;
}
body[data-karma-view="dialogs"] #root [data-karma-analysis-part="player"] [role="application"] {
  height: 44px !important;
  min-height: 44px !important;
}
body[data-karma-view="dialogs"] #root [data-karma-analysis-part="player"] [role="application"] wave {
  border-radius: 10px;
  overflow: hidden;
}
body[data-karma-view="dialogs"] #root [data-karma-analysis-section="transcription"] [data-active] { cursor: pointer; }
body[data-karma-view="dialogs"] #root [data-karma-analysis-section="transcription"] [data-active]:focus-visible {
  outline: 2px solid #70aed0;
  outline-offset: 2px;
}