/* One room, two independent panels. All three keep their contents mounted. */
.call-view[data-role=therapist] {
    --workspace-width: clamp(316px, 25vw, 366px);
    --tools-width: clamp(320px, 25vw, 380px);
    --camera-rail-width: clamp(216px, 18vw, 272px);
}
.call-view[data-role=therapist] .call-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--room-gutter);
    min-width: 0;
    min-height: 0;
    padding: 0 var(--room-gutter) max(12px, env(safe-area-inset-bottom));
}
.therapist-panel-region { display: none; min-width: 0; min-height: 0; }
.therapist-panels { position: relative; display: grid; min-width: 0; min-height: 0; gap: var(--room-gutter); overflow: hidden; }
.therapist-tools-slot { min-width: 0; min-height: 0; }
.therapist-panel-navigation { display: none; }
.call-view[data-role=therapist]:is([data-workspace-open=true], [data-tools-open=true]) .call-body { grid-template-columns: minmax(0, 1fr) auto; }
.call-view[data-role=therapist]:is([data-workspace-open=true], [data-tools-open=true]) .therapist-panel-region { display: grid; grid-template-rows: minmax(0, 1fr); }
.call-view[data-role=therapist][data-workspace-open=true] .therapist-panels { grid-template-columns: var(--workspace-width); }
.call-view[data-role=therapist][data-tools-open=true] .therapist-panels { grid-template-columns: var(--tools-width); }
.call-view[data-role=therapist][data-workspace-open=true][data-tools-open=true] .therapist-panels { grid-template-columns: var(--workspace-width) var(--tools-width); }
.call-view[data-role=therapist][data-workspace-view=workspace] .call-body { grid-template-columns: var(--camera-rail-width) minmax(0, 1fr); }
.call-view[data-role=therapist][data-workspace-view=workspace] .therapist-panels { grid-template-columns: minmax(0, 1fr); }
.call-view[data-role=therapist][data-workspace-view=workspace][data-tools-open=true] .therapist-panels { grid-template-columns: minmax(0, 1fr) var(--tools-width); }

/* Window actions belong to the heading; the tabs below describe workspace content. */
.therapist-panel { container: therapist-workspace / inline-size; }
.workspace-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px 10px; padding: 16px 20px 18px; flex-shrink: 0; }
.workspace-heading h2 { margin: 0; }
.workspace-heading-actions { display: flex; align-items: center; gap: 4px; }
.workspace-heading .workspace-privacy { grid-column: 1 / -1; margin: 0; }
.workspace-layout-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 32px; padding: 6px 9px; border: 1px solid var(--room-line); border-radius: 9px;
    background: var(--surface); color: var(--green); font: 500 11px/1.4 var(--sans); white-space: nowrap;
    transition: background 140ms ease;
}
.workspace-layout-button .icon { width: 12px; height: 12px; font-size: 12px; }
.workspace-layout-button:hover { background: var(--sage); }
.workspace-heading-actions button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.workspace-tabs { margin-inline: 20px; }
.workspace-feature-heading { flex-shrink: 0; }
.workspace-feature-title { margin-top: 6px; color: var(--ink); font: 400 27px/1.12 var(--serif); letter-spacing: -.025em; }
.workspace-columns, .workspace-columns > * { min-width: 0; }
.workspace-note-columns, .workspace-file-columns { margin-top: 22px; }
.workspace-notebook { display: flex; flex-direction: column; }
.workspace-notebook .workspace-section-heading > label { color: var(--ink); font: 500 14px/1.5 var(--sans); }
.workspace-notebook .workspace-autosave { font-size: 10px; }
.workspace-notebook #session-notes { flex: 0 0 auto; min-height: 180px; height: 220px; margin-top: 12px; resize: vertical; }
.workspace-context .workspace-explanation { color: var(--room-secondary); }
.workspace-saved-moments .file-heading { margin-top: 0; }
.workspace-file-details { margin-top: 22px; }
.workspace-file-details .capture-instruction { margin-top: 0; }
.capture-instruction h4 { margin: 0 0 5px; color: var(--ink); font: 500 13px/1.5 var(--sans); }
.workspace-file-details .capture-settings { border-bottom: 0; padding-bottom: 0; }

/* Full workspace: a writing surface with a separate, contextual column. */
.call-view[data-workspace-view=workspace] .workspace-panel {
    display: flex; flex-direction: column; overflow: hidden; padding: 24px;
}
.call-view[data-workspace-view=workspace] .workspace-feature-heading { padding-bottom: 20px; border-bottom: 1px solid var(--room-line); }
.call-view[data-workspace-view=workspace] .workspace-columns { flex: 1; min-height: 0; margin-top: 20px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.call-view[data-workspace-view=workspace] .workspace-current-actions .action-composer { margin-top: 0; }
.call-view[data-workspace-view=workspace] .workspace-context { padding: 18px; border: 1px solid var(--room-line); border-radius: 16px; background: var(--paper); }
.call-view[data-workspace-view=workspace] .previous-actions > summary { min-height: 24px; color: var(--ink); cursor: default; }
.call-view[data-workspace-view=workspace] .previous-actions > summary > .icon:last-child { display: none; }
.call-view[data-workspace-view=workspace] .previous-action-list .workspace-empty { padding: 16px 0; border: 0; background: transparent; }
.call-view[data-workspace-view=workspace] .workspace-notebook { min-height: 350px; }
.call-view[data-workspace-view=workspace] #session-notes { flex: 1; min-height: 280px; height: auto; padding: 20px; resize: none; }
.call-view[data-workspace-view=workspace] .timestamped-note { padding: 14px; border-color: var(--room-line); background: var(--surface); }
.call-view[data-workspace-view=workspace] .timestamped-note > p { color: var(--ink); }
.call-view[data-workspace-view=workspace] .timestamped-note time { color: var(--room-secondary); }
.call-view[data-workspace-view=workspace] .snapshot-gallery { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 16px; }
.call-view[data-workspace-view=workspace] .snapshot-card { background: var(--paper); }
.call-view[data-workspace-view=workspace] .snapshot-card img { padding: 10px; object-fit: contain; }
.call-view[data-workspace-view=workspace] .snapshot-card span { padding: 10px 14px; border-top: 1px solid var(--room-line); color: var(--room-secondary); }
.call-view[data-workspace-view=workspace] .workspace-saved-moments .empty-gallery { display: grid; place-items: center; min-height: 240px; padding: 28px; border: 1px dashed var(--room-line); border-radius: 16px; background: var(--paper); text-align: center; }
.call-view[data-workspace-view=workspace] .workspace-file-details .capture-instruction { padding: 0; border: 0; background: transparent; }
.call-view[data-workspace-view=workspace] .workspace-file-details .capture-instruction-icon { flex-basis: 22px; }

@container therapist-workspace (min-width: 640px) {
    .workspace-heading { padding: 18px 24px; }
    .workspace-tabs { grid-template-columns: repeat(3, minmax(0, 130px)); justify-content: start; margin: 0 24px; padding: 0 0 10px; gap: 6px; border: 0; border-bottom: 1px solid var(--room-line); border-radius: 0; background: transparent; }
    .workspace-tab { min-height: 40px; }
    .workspace-tab[aria-selected=true] { background: var(--sage); border-color: var(--room-line); box-shadow: none; }
    .call-view[data-workspace-view=workspace] .workspace-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, .65fr); gap: 24px; overflow: hidden; }
    .call-view[data-workspace-view=workspace] .workspace-columns > * { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
    .call-view[data-workspace-view=workspace] .workspace-context { margin: 0; }
    .call-view[data-workspace-view=workspace] .workspace-notebook { overflow: hidden; }
    .call-view[data-workspace-view=workspace] #session-notes { min-height: 180px; }
    .call-view[data-workspace-view=workspace] .timestamped-notes-list { gap: 14px; }
}

/* The camera rail reuses the live feeds while the workspace has more room. */
.workspace-camera-heading { display: flex; align-items: center; min-height: 28px; flex-shrink: 0; padding: 0 2px 8px; color: var(--room-secondary); font: 500 12px/1.5 var(--sans); }
.call-view[data-role=therapist][data-camera-rail=true] .video-area { gap: 0; overflow: hidden; border-radius: 0; }
.call-view[data-role=therapist] .video-grid[data-presentation=rail] { display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0; min-height: 0; overflow: auto; border: 0; border-radius: 0; background: transparent; scrollbar-width: thin; }
.call-view[data-role=therapist] .video-grid[data-presentation=rail] > .feed-tile { position: relative; inset: auto; flex: 0 0 auto; width: 100%; height: auto; min-height: 0; aspect-ratio: 4 / 3; border: 1px solid var(--room-line); border-radius: 16px; }
.call-view[data-role=therapist] .video-grid[data-presentation=rail] .feed-tile .feed-focus { display: grid; }
.call-view[data-role=therapist] .video-grid[data-presentation=rail] .feed-actions { display: flex; }
.call-view[data-role=therapist] .video-grid[data-presentation=rail] .feed-overlay { min-height: 40px; padding: 8px; font-size: 11px; }
.call-view[data-role=therapist] .video-grid[data-presentation=rail] .feed-overlay > span { padding: 3px 7px; }
.call-view[data-role=therapist] .video-grid[data-presentation=rail] > .empty-call { position: relative; inset: auto; order: -2; flex: 0 0 auto; width: 100%; height: auto; padding: 24px 16px; border-radius: 16px; }
.call-view[data-role=therapist][data-camera-rail=true] .arrival-welcome-symbol { width: 42px; height: 48px; margin-bottom: 14px; }
.call-view[data-role=therapist][data-camera-rail=true] .arrival-welcome-symbol .brand-mark { width: 22px; height: 28px; }
.call-view[data-role=therapist][data-camera-rail=true] .arrival-welcome-eyebrow { font-size: 9px; }
.call-view[data-role=therapist][data-camera-rail=true] .arrival-waiting strong { font-size: 26px; }
.call-view[data-role=therapist][data-camera-rail=true] .arrival-message p { font-size: 12px; line-height: 1.65; }
.call-view[data-role=therapist][data-camera-rail=true] .arrival-open-button { width: 100%; margin-top: 18px; padding-inline: 10px; gap: 8px; font-size: 11px; }
.call-view[data-role=therapist][data-camera-rail=true] .arrival-welcome-note { display: none; }
.call-view[data-role=therapist][data-camera-rail=true] .shared-pointer-tool { position: relative; inset: auto; max-width: none; align-items: stretch; flex-shrink: 0; padding-bottom: 10px; }
.call-view[data-role=therapist][data-camera-rail=true] .shared-pointer-tool:has(.shared-pointer-toggle:disabled) { display: none; }
.call-view[data-role=therapist][data-camera-rail=true] .shared-pointer-controls { align-items: stretch; }
.call-view[data-role=therapist][data-camera-rail=true] .shared-pointer-toggle { min-height: 34px; border-color: var(--room-line); background: var(--surface); box-shadow: none; font-size: 11px; }
.call-view[data-role=therapist][data-camera-rail=true] .call-status { top: 45px; left: 8px; right: 8px; font-size: 11px; }

/* On a tablet, cameras sit above the two panels instead of squeezing either one. */
@media (max-width: 1020px) {
    .call-view[data-role=therapist]:is([data-workspace-open=true], [data-tools-open=true]) .call-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: clamp(150px, 24dvh, 210px) minmax(360px, 1fr); overflow-y: auto; }
    .call-view[data-role=therapist][data-workspace-view=workspace] .call-body { grid-template-rows: clamp(140px, 20dvh, 180px) minmax(360px, 1fr); }
    .call-view[data-role=therapist] .therapist-panels { grid-template-columns: minmax(0, 1fr); }
    .call-view[data-role=therapist][data-workspace-open=true][data-tools-open=true] .therapist-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .call-view[data-role=therapist][data-camera-rail=true] .video-area { position: relative; }
    .call-view[data-role=therapist] .video-grid[data-presentation=rail] { flex-direction: row; }
    .call-view[data-role=therapist] .video-grid[data-presentation=rail] > .feed-tile { width: auto; height: 100%; }
    .call-view[data-role=therapist] .video-grid[data-presentation=rail] > .empty-call { width: min(320px, 65%); height: 100%; padding: 14px; overflow: auto; }
    .call-view[data-role=therapist][data-camera-rail=true] .arrival-welcome-symbol,
    .call-view[data-role=therapist][data-camera-rail=true] .arrival-welcome-eyebrow,
    .call-view[data-role=therapist][data-camera-rail=true] .arrival-message p { display: none; }
    .call-view[data-role=therapist][data-camera-rail=true] .arrival-waiting strong { font-size: 23px; }
    .call-view[data-role=therapist][data-camera-rail=true] .arrival-open-button { margin-top: 12px; }
    .call-view[data-role=therapist][data-camera-rail=true] .shared-pointer-tool { position: absolute; top: 0; right: 0; max-width: 55%; padding: 0; z-index: 6; }
    .call-view[data-role=therapist][data-camera-rail=true] .shared-pointer-hint { display: none; }
}

/* A narrow screen keeps both panels open on a shelf, with explicit navigation. */
@media (max-width: 700px) {
    .call-view[data-role=therapist][data-workspace-open=true][data-tools-open=true] .therapist-panel-region { grid-template-rows: auto minmax(0, 1fr); gap: 8px; }
    .call-view[data-role=therapist][data-workspace-open=true][data-tools-open=true] .therapist-panel-navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 3px; border-radius: 12px; background: var(--sage); }
    .therapist-panel-navigation button { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--room-secondary); font: 500 12px/1.5 var(--sans); }
    .therapist-panel-navigation button[aria-pressed=true] { border-color: var(--room-line); background: var(--surface); color: var(--green); }
    .therapist-panel-navigation button:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
    .call-view[data-role=therapist][data-workspace-open=true][data-tools-open=true] .therapist-panels { grid-template-columns: repeat(2, 100%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .therapist-panels > * { scroll-snap-align: start; }
    .workspace-heading { padding: 18px; }
    .workspace-tabs { margin-inline: 18px; }
    .call-view[data-workspace-view=workspace] .workspace-panel { padding: 20px 18px; }
    .call-view[data-role=therapist][data-camera-rail=true] .shared-pointer-toggle { min-height: 40px; }
}
@media (pointer: coarse) {
    .workspace-layout-button { min-width: 44px; min-height: 44px; }
    .workspace-heading-actions .chat-icon-button { --chat-icon-size: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .workspace-layout-button { transition: none; }
}