/* One tab per thing PaceNotes does: the agent, PaceNotes listening, and calling (shared/work-tabs.js). The browser page and the
   Chrome side panel both load this. Nothing here applies until the bar is in use (html[data-pn-tabs]), so the iPhone app and
   the signed-out screens keep their own layout. */

.pn-tabs { display: flex; gap: 4px; margin: 0 0 12px; padding: 4px; border: 1px solid var(--line, currentColor); border-radius: 14px; background: var(--panel, transparent); }
.pn-tabs[hidden] { display: none; }
.pn-tab {
  flex: 1 1 auto; min-width: 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 8px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; font-weight: 600;
  white-space: nowrap; cursor: pointer; touch-action: manipulation;
}
.pn-tab[hidden] { display: none; }
.pn-tab-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pn-tab[aria-selected="true"] { background: var(--btn, var(--primary, #ff5600)); color: var(--on-btn, var(--on-accent, #18181b)); }
.pn-tab:focus-visible { outline: 3px solid var(--accent, currentColor); outline-offset: 2px; }
.pn-tab-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ag-on, #3fb950); }
.pn-tab-dot[hidden] { display: none; }

/* ---- the agent tab: the agent window is the page, not a sheet over it ---- */
html[data-pn-tabs] .agent-sheet { position: static !important; inset: auto !important; z-index: auto; display: block; pointer-events: auto; }
html[data-pn-tabs] .agent-sheet[hidden], html[data-pn-tabs]:not([data-pn-tab="agent"]) .agent-sheet { display: none !important; }
html[data-pn-tabs] .agent-sheet-scrim, html[data-pn-tabs] .agent-sheet-close, html[data-pn-tabs] .agent-dock-grip,
html[data-pn-tabs] .agent-dock-corner, html[data-pn-tabs] .agent-dock-move { display: none !important; }
html[data-pn-tabs] .agent-sheet-box {
  position: relative !important; inset: auto !important; transform: none !important; box-sizing: border-box;
  width: 100% !important; max-width: none !important; margin: 0 auto;
  height: calc(100vh - var(--pn-tabs-bottom, 0px)) !important; height: calc(100dvh - var(--pn-tabs-bottom, 0px)) !important;
  min-height: 320px; max-height: none !important; padding: 0 clamp(12px, 2vw, 24px) !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent;
}
/* Pop out stays (the side panel hands the agent to its own window); it sits at the right of the header row, out of the way. */
html[data-pn-tabs] .agent-dock-bar { display: none !important; }
html[data-pn-tabs][data-pn-popout] .agent-dock-bar { display: flex !important; justify-content: flex-end; position: static; margin: 0 0 8px; padding: 0; border: 0; background: transparent; }
/* Everything that is not the agent steps aside, and the page no longer moves over for a docked sidebar. */
html[data-pn-tab="agent"] .pn-tab-page, html[data-pn-tab="agent"] .pn-tab-only-pacenotes, html[data-pn-tab="agent"] .pn-tab-only-call { display: none !important; }
html[data-pn-tabs] .app { margin-inline: auto !important; }
/* The thread scrolls inside the page. A short window (the box has a 320px floor) scrolls the page instead of clipping the composer. */
/* Only the window scrolls, and only when the box does not fit (a header taller than the window leaves under 320px). A locked
   window cut the composer off with no way down (Jake 2026-11-13). */
@media (min-height: 520px) { html[data-pn-tab="agent"] { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; } html[data-pn-tab="agent"] body { overflow: visible; } }
/* The agent strip (who else can I talk to) belongs to the agent tab. */
html[data-pn-tabs]:not([data-pn-tab="agent"]) .agent-bar { display: none !important; }

/* ---- the PaceNotes tab: listening on a call or a video ---- */
html[data-pn-tab="pacenotes"] .pn-tab-only-call { display: none !important; }

/* ---- the Call tab: the phone, and the call while one is up ---- */
html[data-pn-tab="call"] .pn-tab-page > :not([data-pn-tab-keep]), html[data-pn-tab="call"] .pn-tab-only-pacenotes { display: none !important; }
/* The phone page in place of its sheet (web/index.html #calling). It stays a positioned box: the sr-only labels in the panes
   off to the side are absolute, and anchored to the page they would give the whole page a sideways scroll. */
html[data-pn-tab="call"] .pn-tab-sheet {
  position: relative; inset: auto; z-index: auto; width: auto; max-width: 40rem; margin: 0 auto; padding: 0 16px 24px; overflow: visible; overflow-x: clip;
  border: 0; background: transparent; visibility: visible; transform: none; transition: none;
}
html[data-pn-tab="call"] .pn-tab-sheet .sheet-head { position: static; padding-top: 0; background: transparent; }
html[data-pn-tab="call"] .pn-tab-sheet [data-pn-tab-hide] { display: none !important; }
/* No backdrop for the phone page itself; a real sheet opened over it (Settings) keeps its backdrop. */
html[data-pn-tab="call"]:not(:has(.sheet.open:not(.pn-tab-sheet))) .pn-tab-scrim { display: none !important; }
/* A live call is the Call tab's page; the dialer waits under it. */
html.in-call[data-pn-tab="call"] .pn-tab-sheet { display: none !important; }
html[data-pn-tabs]:not([data-pn-tab="call"]) [data-pn-tab-entry="call"] { display: none !important; }
html[data-pn-tab="call"] [data-pn-tab-hide] { display: none !important; }

/* ---- the Chrome side panel: its parts are the body's own children ---- */
/* Help in this tab (body.tab-help) has its own rule and hides the bar; the keep-on-top cover and the update line stay. */
html[data-pn-tab="agent"] body.pn-panel:not(.tab-help) > :not(header):not(#call-remote):not(.pn-tabs):not(.agent-sheet):not(.agent-live-feed):not(dialog):not(#options-view):not(#float-cover):not(#update-available):not(script):not(canvas) { display: none !important; }
html[data-pn-tab="agent"] body.pn-panel > header .status-row, html[data-pn-tab="agent"] body.pn-panel > header .capture-strip { display: none !important; }
body.pn-panel > .pn-tabs { margin-top: 8px; }
/* The panel already has its own side margin; the agent page uses the full width it has. */
html[data-pn-tabs] body.pn-panel .agent-sheet-box { padding: 0 !important; }

/* ---- the agent (Grant) tab, while PaceNotes listens (Jake 2026-11-13: could not scroll and could not see the transcript) ------------
   The tab page locked the window's scroll (fixed in shared/work-tabs.css) and the box under the bar is as tall as what is left, with a 320px floor.
   When that floor is more than what is left, the window now scrolls instead of cutting the composer off. And shared/agent-live-transcript.js puts the "What was said" card in a short region above the window, newest line in view, scrolling inside itself. */
html[data-pn-tabs] .agent-live-feed { display: flex; flex-direction: column; min-height: 0; max-height: min(30dvh, 15rem); margin: 0 clamp(12px, 2vw, 24px) 8px; overflow: hidden; }
html[data-pn-tabs] .agent-live-feed #feed-box:not([hidden]) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin: 0; padding: 8px 12px; overflow: hidden; }
html[data-pn-tabs] .agent-live-feed #feed-box .feed-head { flex: none; flex-wrap: nowrap; gap: 8px; }
html[data-pn-tabs] .agent-live-feed #feed-box .feed-head h2 { font-size: 0.95rem; margin: 0; }
html[data-pn-tabs] .agent-live-feed #feed-box #feed-toggle, html[data-pn-tabs] .agent-live-feed #feed-box #mic-summary { display: none; }
html[data-pn-tabs] .agent-live-feed #feed-box .feed { flex: 1 1 auto; min-height: 0; max-height: none; margin: 6px 0 0; overflow-y: auto; overscroll-behavior: contain; }
html[data-pn-tabs][data-pn-live-feed] .agent-sheet-box {
  height: calc(100vh - var(--pn-tabs-bottom, 0px) - var(--pn-live-feed-h, 0px) - 8px) !important;
  height: calc(100dvh - var(--pn-tabs-bottom, 0px) - var(--pn-live-feed-h, 0px) - 8px) !important;
}
@media (max-height: 640px) { html[data-pn-tabs] .agent-live-feed { max-height: 6.5rem; } }
@media (max-height: 480px) { html[data-pn-tabs] .agent-live-feed { max-height: 4.5rem; } html[data-pn-tabs] .agent-live-feed #feed-box .feed-head h2 { display: none; } }