/* workspace/dock — the AI chat panel (web/aichat.js, web/aichat.css) laid out for a workspace page
   (sfhost-work/tutorme/PLAN.md §2.1-§2.7). CSS only: every control is the panel's own element with its own handler
   (the mic #aichat-mic, talk #aichat-hf, mute #aichat-mute, upload #aichat-attach, the text box #aichat-in, send
   #aichat-send); web/aichat-voice.js and web/aichat.js are not edited for this.

     phone / tablet portrait   a BOTTOM DOCK: [upload][mic][talk] [ask or answer…] [send], a two-line chat above it
                               (peek), half the screen (half) or the whole screen under the top bar (full)
     phone landscape           the workspace on the left, the chat as a narrow column on the right
     1000 px and wider         the workspace in the middle, the chat panel on the right as on every site

   What a learner does not need here is not shown: the terminal / MCP mode toggle, "Tutor me" (this site always
   tutors), the model picker, the course button (the workspace has its own course page), the For-teams strip, the
   API-keys and own-key sections of the credits window, and the panel's close button (the dock is the chat). */

html[data-ws-shell] #aichat-toggle, html[data-ws-shell] #aichat-mode, html[data-ws-shell] #aichat-tutor, html[data-ws-shell] #aichat-model,
html[data-ws-shell] #aichat-courses, html[data-ws-shell] #aichat-close, html[data-ws-shell] #aichat-suggest, html[data-ws-shell] #aichat-apikeys,
html[data-ws-shell] #aichat-byok, html[data-ws-shell] #aichat-cr-note, html[data-ws-shell] #aichat-cv, html[data-ws-shell] .msg .aiactions,
html[data-ws-shell] #aichat-hint:empty { display: none !important; }
html[data-ws-shell] #aichat-panel { font: 15px/1.5 var(--ws-sans); }
html[data-ws-shell] .msg.ai .txt { font-family: var(--ws-sans); font-size: 15.5px; }
html[data-ws-shell] #aichat-send { min-width: 44px; min-height: 44px; border-radius: 14px; font-weight: 700; }
html[data-ws-shell] #aichat-stop { min-height: 44px; border-radius: 14px; }
html[data-ws-shell] #aichat-in { font-size: 16px; }                 /* no zoom-on-focus on iOS */
#ws-handle { display: none; }

/* ------------------------------------------------------------------ the bottom dock (under 1000 px wide) */
@media (max-width: 999.98px) {
  /* peek: as tall as its content (two lines of chat, the chips when there are any, the bar); the shell measures it
     (--ws-dockpx) so the workspace ends exactly where the dock starts */
  html[data-ws-shell] { --dock-h: auto; }
  html[data-ws-shell][data-dock="half"] { --dock-h: 52vh; }
  html[data-ws-shell][data-dock="full"] { --dock-h: calc(var(--ws-vh) - var(--ws-top) - env(safe-area-inset-top)); }
  html[data-ws-shell].ws-login { --dock-h: auto; }
  html[data-ws-shell].ws-login #aichat-panel { max-height: min(78vh, 600px); overflow-y: auto; }
  html[data-ws-shell].ws-login #aichat-body { flex: 0 1 auto; }
  html[data-ws-shell] body { flex-direction: column; }
  html[data-ws-shell] #sf-left.ws { padding-bottom: var(--ws-dockpx, 148px); }           /* the workspace ends where the PEEK dock starts */
  html[data-ws-shell] #aichat-panel, html[data-ws-shell].aichat-open #aichat-panel {
    display: flex; position: fixed; left: 0; right: 0; top: auto; bottom: var(--ws-kb); width: auto; max-width: none; height: var(--dock-h); max-height: calc(var(--ws-vh) - var(--ws-top));
    flex: none; border: 0; border-top: 1px solid var(--ws-line); border-radius: 20px 20px 0 0; box-shadow: 0 -8px 30px rgba(20, 24, 60, .16); z-index: 40;
    padding-bottom: env(safe-area-inset-bottom); background: var(--ws-surface);
  }
  html[data-ws-shell][data-theme="dark"] #aichat-panel { box-shadow: 0 -8px 30px rgba(0, 0, 0, .5); }
  /* the drag handle */
  #ws-handle { display: grid; place-items: center; flex: 0 0 22px; width: 100%; height: 22px; border: 0; background: transparent; cursor: grab; touch-action: none; padding: 0; }
  #ws-handle i { width: 44px; height: 5px; border-radius: 3px; background: var(--ws-line); }
  /* peek: no header, the latest line only (two lines) */
  html[data-ws-shell][data-dock="peek"]:not(.ws-login) #aichat-head { display: none; }
  html[data-ws-shell][data-dock="peek"]:not(.ws-login) #aichat-msgs { flex: 0 0 auto; max-height: 3.3em; min-height: 1.6em; overflow: hidden; padding: 0 14px; cursor: pointer; }
  html[data-ws-shell][data-dock="peek"]:not(.ws-login) #aichat-msgs .msg { display: none; margin: 0; }
  html[data-ws-shell][data-dock="peek"]:not(.ws-login) #aichat-msgs .msg:last-child { display: block; }
  html[data-ws-shell][data-dock="peek"] #aichat-msgs .msg .steps, html[data-ws-shell][data-dock="peek"] #aichat-msgs .msg .meta, html[data-ws-shell][data-dock="peek"] #aichat-msgs .msg .aispk-row,
  html[data-ws-shell][data-dock="peek"] #aichat-msgs .msg .afiles, html[data-ws-shell][data-dock="peek"] #aichat-msgs .msg .airich, html[data-ws-shell][data-dock="peek"] #aichat-msgs .msg .dstep { display: none; }
  html[data-ws-shell][data-dock="peek"] #aichat-msgs .msg .txt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; padding: 0; background: none; max-width: 100%; font-size: 15px; line-height: 1.4; }
  html[data-ws-shell][data-dock="peek"] #aichat-msgs .msg.me .txt { color: var(--ws-dim); margin-left: 0; }
  html[data-ws-shell][data-dock="peek"] #aichat-side { display: none; }
  html[data-ws-shell][data-dock="peek"]:not(.ws-login) #aichat-status { margin: 0 12px; padding: 2px 8px; font-size: 12.5px; }
  /* half / full: the header returns, compact */
  html[data-ws-shell] #aichat-head { padding: 2px 10px 6px; border-bottom: 1px solid var(--ws-line); background: transparent; }
  html[data-ws-shell] #aichat-body { min-height: 0; flex: 1 1 auto; }
  /* the workspace stays visible above a half dock, dimmed; under a full dock it is covered */
  html[data-ws-shell][data-dock="half"] #ws-work, html[data-ws-shell].ws-login #ws-work { filter: brightness(.82) saturate(.9); }
  /* the keyboard is up: the dock keeps to the bar and a few lines so the board stays visible */
  html[data-ws-shell].ws-typing[data-dock="half"] { --dock-h: min(52vh, 260px); }
}
@media (max-width: 999.98px) and (prefers-reduced-motion: reduce) { html[data-ws-shell] #aichat-panel { transition: none; } }

/* ------------------------------------------------------------------ the bar: ONE row [upload][mic][talk][mute] [text] [stop][send] */
html[data-ws-shell] #aichat-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; margin: 4px 8px 8px; padding: 6px; border-radius: 22px; flex: 0 0 auto; }
html[data-ws-shell] #aichat-form .row, html[data-ws-shell] #aichat-voicebar { display: contents; }
html[data-ws-shell] #aichat-files { order: 0; flex: 1 1 100%; }
html[data-ws-shell] #aichat-attach { order: 1; }
html[data-ws-shell] #aichat-mic { order: 2; }
html[data-ws-shell] #aichat-hf { order: 3; }
html[data-ws-shell] #aichat-mute { order: 4; }
html[data-ws-shell] #aichat-in { order: 6; flex: 1 1 120px; min-width: 0; max-height: 6.4em; align-self: center; margin: 0; }
html[data-ws-shell] #aichat-stop { order: 7; }
html[data-ws-shell] #aichat-send { order: 8; }
html[data-ws-shell] #aichat-form .vbtn { width: 44px; height: 44px; }
html[data-ws-shell] #aichat-attach { color: var(--ws-acc); }
html[data-ws-shell] #aichat-mic { background: var(--ws-acc-soft); color: var(--ws-acc); }
html[data-ws-shell] #aichat-hf { background: color-mix(in srgb, var(--ws-mint) 16%, transparent); color: var(--ws-mint); }
html[data-ws-shell] #aichat-hf.on, html[data-ws-shell] #aichat-mic[aria-pressed="true"] { background: var(--ws-acc); color: var(--ws-acc-ink); }
/* the state label ("Listening…", "Hearing you", "Thinking…") sits over the text box while the microphone is live */
html[data-ws-shell] #aichat-vstate { order: 5; flex: 0 1 auto; max-width: 42%; align-self: center; font-size: 14px; font-weight: 700; color: var(--ws-acc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ws-shell] #aichat-vstate:empty { display: none; }
html[data-ws-shell] #aichat-hint { order: 9; flex: 1 1 100%; font-size: 12px; text-align: right; }
/* the speaker and the gear: in the pulled-up chat's header corner (peek: not shown; the menu has the same switches) */
html[data-ws-shell] #aichat-voice, html[data-ws-shell] #aichat-vcfg { position: absolute; top: 24px; width: 36px; height: 36px; z-index: 3; }
html[data-ws-shell] #aichat-voice { right: 46px; } html[data-ws-shell] #aichat-vcfg { right: 8px; }
html[data-ws-shell] #aichat-head { padding-right: 92px !important; }
@media (max-width: 999.98px) {
  html[data-ws-shell][data-dock="peek"]:not(.ws-login) #aichat-voice, html[data-ws-shell][data-dock="peek"]:not(.ws-login) #aichat-vcfg { display: none; }
  html[data-ws-shell] #aichat-form .vbtn.small { width: 36px; height: 36px; }
}
/* the voice card (consent, settings, errors) and the status line stay inside the chat: the card is never wider or
   taller than the room it has there and scrolls inside itself, so every control (mic / talk settings and the Narrator
   section) can be reached at any size. (Before 2026-11-11 the peek rule below was not limited to the bottom dock; the
   shell sets data-dock="peek" at every width, so on a desktop the card was fixed across the whole page over the board,
   8 px from both edges, its bottom placed by a dock height that is never measured there.) */
html[data-ws-shell] #aichat-vcard { flex: 0 1 auto; min-height: 0; min-width: 0; margin: 0 10px 6px; max-height: 46vh; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
html[data-ws-shell] #aichat-vcard select { min-width: 0; }
@media (max-width: 999.98px) {
  /* peek: the dock is only two lines high, so the card floats just above it: centred, at most 560 px wide, and never
     taller than the room between the top bar and the dock */
  html[data-ws-shell][data-dock="peek"] #aichat-vcard:not([hidden]) {
    position: fixed; left: 8px; right: 8px; margin: 0 auto; max-width: 560px; bottom: calc(var(--ws-dockpx, 148px) + var(--ws-kb) + 6px);
    max-height: min(46vh, calc(var(--ws-vh) - var(--ws-top) - var(--ws-dockpx, 148px) - var(--ws-kb) - 18px)); z-index: 45; box-shadow: var(--ws-shadow);
  }
}
/* not signed in: the bar is not shown at all (the logon card is the dock), so the voice bar cannot ask for a logon */
html[data-ws-shell].ws-login #ws-chips { display: none; }

/* ------------------------------------------------------------------ phone landscape: workspace left, chat column right */
@media (max-width: 999.98px) and (max-height: 500px) and (orientation: landscape) {
  html[data-ws-shell] body { flex-direction: row; }
  html[data-ws-shell] #sf-left.ws { padding-bottom: 0; flex: 1 1 62%; }
  html[data-ws-shell] #aichat-panel, html[data-ws-shell].aichat-open #aichat-panel { position: static; height: 100%; max-height: none; flex: 0 0 38%; width: 38%; border-radius: 0; border-top: 0; border-left: 1px solid var(--ws-line); box-shadow: none; }
  #ws-handle { display: none; }
  html[data-ws-shell] #aichat-head { display: none; }
  html[data-ws-shell][data-dock] #aichat-msgs { flex: 1 1 auto; max-height: none; overflow-y: auto; }
  html[data-ws-shell][data-dock] #aichat-msgs .msg { display: block; }
  html[data-ws-shell] #aichat-in { flex-basis: 100%; order: 0; }
  html[data-ws-shell] #ws-work { filter: none !important; }
  /* the chat is a column here (no peek dock): the card stays in it, above the bar */
  html[data-ws-shell][data-dock] #aichat-vcard:not([hidden]) { position: static; max-width: none; margin: 0 8px 6px; max-height: 60vh; box-shadow: var(--ai-shadow); }
}

/* ------------------------------------------------------------------ desktop / tablet landscape: the panel on the right */
@media (min-width: 1000px) {
  html[data-ws-shell] #aichat-panel { height: 100%; position: relative; }
  html[data-ws-shell] #aichat-voice, html[data-ws-shell] #aichat-vcfg { position: static; order: 6; width: 36px; height: 36px; }
  html[data-ws-shell] #aichat-head { padding-right: 10px !important; }
  html[data-ws-shell] #aichat-in { flex-basis: 100%; order: 0; }
  html[data-ws-shell] #aichat-vstate { flex: 1 1 auto; max-width: none; }
  html[data-ws-shell] #ws-chips { padding: 6px 12px; flex-wrap: wrap; }
  /* the voice card: in the chat column, between the messages and the bar (as on every site), never over the board;
     the messages give it room first, and it scrolls inside itself when the window is short */
  html[data-ws-shell] #aichat-vcard { max-height: min(62vh, 560px); }
}