/* The web places a retained screen above history and a task rail above its
   composer. Watch stays inside that layout, so steering remains available. */
.vicit-workspace { flex:none; min-width:0; width:100%; max-width:820px; align-self:center; padding:0 18px 6px; box-sizing:border-box; }
.vicit-workspace [hidden],.vicit-workspace-task [hidden],.vicit-workspace[hidden],.vicit-workspace-task[hidden] { display:none!important; }
.vicit-screen { position:relative; min-width:0; background:var(--bg); }
.vicit-screen-head { position:relative; display:flex; align-items:center; gap:6px; min-height:44px; }
.vicit-workspace-device { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); font-size:13px; }
.vicit-workspace-device-select { min-width:0; max-width:150px; min-height:44px; padding:5px 22px 5px 8px; border:1px solid var(--control-border); border-radius:8px; color:var(--text); background:var(--surface); font:inherit; font-size:12px; }
.vicit-screen-status { min-width:0; margin-left:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:12px; }
.vicit-screen[data-live-state="live"] .vicit-screen-status { color:var(--ok); }
.vicit-screen[data-live-state="live"] .vicit-screen-status::before { content:""; display:inline-block; width:5px; height:5px; border-radius:50%; margin-right:5px; background:currentColor; }
.vicit-screen-head > .btn { flex:none; min-height:44px; padding:7px 10px; border:0; background:transparent; }
.vicit-screen-head > .vicit-screen-closer,.vicit-screen-head > .vicit-screen-collapse { min-width:44px; width:44px; display:flex; justify-content:center; align-items:center; padding:10px; }
.vicit-screen-head > .btn > svg { width:19px; height:19px; }
.vicit-screen-picture .vicit-screen-head { position:absolute; top:5px; left:6px; right:6px; z-index:2; pointer-events:none; }
.vicit-screen-picture .vicit-screen-head > * { pointer-events:auto; }
.vicit-screen-picture .vicit-workspace-device { display:none; }
.vicit-screen-picture .vicit-screen-status { margin-left:0; margin-right:auto; padding:3px 7px; border-radius:6px; background:#101820ed; color:#fff; font-size:11px; }
.vicit-screen-picture[data-live-state="live"] .vicit-screen-status { color:#a0edc5; }
.vicit-screen-picture .vicit-screen-head > .btn,.vicit-screen-picture .vicit-workspace-device-select { background:#101820ed; color:#fff; border-color:#ffffff30; border-radius:8px; }
.vicit-screen-stage { position:relative; min-width:0; }
.vicit-screen-viewport { position:relative; min-width:0; width:100%; max-height:280px; aspect-ratio:var(--vicit-screen-aspect,16 / 9); overflow:hidden; overscroll-behavior:contain; border-radius:12px; background:#101114; touch-action:none; user-select:none; -webkit-user-select:none; }
.vicit-screen-viewport:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.vicit-screen-canvas { position:absolute; left:0; top:0; width:100%; height:100%; transform-origin:0 0; }
.vicit-screen-canvas > video { display:block; width:100%; max-width:none; height:100%; margin:0; border-radius:0; object-fit:contain; background:#101114; pointer-events:none; }
.vicit-screen-viewport.zoomed { cursor:grab; }
.vicit-screen-hint { position:absolute; inset:60px 20px 20px; display:flex; align-items:center; justify-content:center; text-align:center; color:#cbd1db; font-size:14px; line-height:21px; overflow:auto; }
.vicit-screen-viewport.dragging { cursor:grabbing; }
.vicit-screen-tools { position:absolute; right:7px; bottom:7px; z-index:3; display:flex; flex-direction:column; gap:4px; }
.vicit-screen-tools > .btn { display:flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:8px; border:0; border-radius:9px; background:#101820ed; color:#fff; }
.vicit-screen-tools svg,.vicit-screen-pan-buttons svg { width:19px; height:19px; }
.vicit-screen-zoom { position:absolute; z-index:4; right:58px; bottom:7px; width:206px; max-width:calc(100% - 70px); padding:6px; box-sizing:border-box; border:1px solid var(--control-border); border-radius:12px; background:var(--surface); box-shadow:0 3px 16px #0003; }
.vicit-screen-zoom-buttons,.vicit-screen-pan-buttons { display:flex; align-items:center; justify-content:space-between; }
.vicit-screen-pan-buttons { border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.vicit-screen-zoom-value { color:var(--muted); min-width:42px; text-align:center; font-size:12px; font-variant-numeric:tabular-nums; }
.vicit-screen-zoom .btn { display:flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:6px; border:0; background:transparent; }
.vicit-screen-fit-all { width:100%; }
.vicit-workspace.vicit-watching { flex:1 1 auto; min-height:0; max-width:none; align-self:stretch; padding:0; display:flex; }
.vicit-screen-expanded { flex:1 1 auto; min-height:0; width:100%; display:flex; flex-direction:column; }
.vicit-screen-expanded .vicit-screen-stage { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
/* Watch can take the computer (live-control.js): the bar and the phone's keys
   sit under the picture, in Watch only; the picture takes the input. */
.vicit-screen-stage > .live-control { flex:none; padding:6px 6px 0; }
.vicit-screen-stage > .live-control[hidden] { display:none; }
.vicit-screen-canvas.live-control-held { cursor:none; }
.vicit-screen-expanded .vicit-screen-viewport { flex:1 1 auto; min-height:0; max-height:none; aspect-ratio:auto; border-radius:0; }
.vicit-task-caption { flex:none; min-width:0; margin:0; padding:4px 12px 8px; color:var(--muted); font-size:12px; line-height:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vicit-workspace-task { flex:none; min-width:0; width:100%; max-width:820px; align-self:center; padding:0 18px; box-sizing:border-box; border-top:1px solid var(--border); }
.vicit-workspace-task .vicit-task-controls { display:flex; align-items:center; gap:6px; min-width:0; min-height:46px; }
.vicit-workspace-task .vicit-task-status { appearance:none; border:0; background:transparent; min-height:44px; min-width:0; padding:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--accent-link); font:500 12px/18px var(--font); cursor:pointer; }
.vicit-workspace-task .vicit-task-count { flex:none; margin-right:auto; color:var(--muted); font-size:11px; line-height:16px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.vicit-workspace-task .vicit-task-controls > .btn { flex:none; display:flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:6px 8px; border:0; background:transparent; white-space:nowrap; font-size:12px; }
.vicit-workspace-task .vicit-task-controls > .btn > svg { width:18px; height:18px; }
.vicit-workspace-task .vicit-task-pause,.vicit-workspace-task .vicit-task-resume { width:44px; }
.vicit-workspace-task .vicit-task-stop { color:var(--danger); }
.vicit-workspace-task .vicit-task-open { color:var(--accent-link); font-weight:600; }
.vicit-workspace-task.vicit-task-ended .vicit-task-controls { justify-content:center; }
.vicit-workspace-task .vicit-task-delivery { display:flex; gap:7px; align-items:center; min-width:0; padding:4px 0; font-size:12px; }
.vicit-workspace-task .vicit-task-delivery-status { flex:none; color:var(--danger); }
.vicit-workspace-task .vicit-task-delivery[data-phase="unconfirmed"] .vicit-task-delivery-status { color:var(--muted); }
.vicit-workspace-task .vicit-task-delivery-text { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vicit-workspace-task .vicit-task-delivery-retry { flex:none; margin-left:auto; min-height:44px; }
.vicit-workspace button:focus-visible,.vicit-workspace-task button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.conversation-thread-pane > .conversation-messages { flex:1 1 auto; min-height:0; }
@media (max-width:760px), (max-width:1024px) and (max-height:600px) {
  .vicit-workspace { padding:0 10px 4px; }
  .vicit-workspace-task { padding:0 10px; }
  .vicit-workspace-device-select { max-width:130px; }
  .vicit-screen-viewport { max-height:min(25dvh,210px); }
}
@media (prefers-reduced-motion:no-preference) {
  .vicit-workspace.vicit-watching { animation:vicit-watch-enter 180ms ease-out; }
  @keyframes vicit-watch-enter { from { opacity:.7; } to { opacity:1; } }
}

/* Explicit addressing stays in the one persistent composer, above its draft. */
.composer-recipient { display:flex; align-items:center; gap:4px; min-height:34px; padding:0 0 7px; }
.recipient-button { appearance:none; border:1px solid transparent; border-radius:7px; padding:5px 10px; min-height:30px; background:transparent; color:var(--muted); font:inherit; font-size:12px; line-height:18px; cursor:pointer; }
.recipient-button[aria-pressed="true"] { color:var(--accent-link); background:var(--accent-soft); border-color:var(--accent-soft); font-weight:600; }
.recipient-button:focus-visible,.recipient-suggestion:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.recipient-status { min-width:0; margin-left:auto; color:var(--muted); font-size:11px; }
.recipient-suggestion { appearance:none; align-self:flex-start; border:1px solid var(--control-border); border-radius:8px; margin:0 0 6px; padding:8px 14px; background:var(--surface); color:var(--accent-link); font:inherit; font-size:13px; cursor:pointer; }
.vicit-addressed .composer-wrap { border-color:var(--accent); }
.composer-action-buttons { position:absolute; right:8px; bottom:8px; display:flex; align-items:center; gap:5px; }
.composer-action-buttons > .microphone-btn,.composer-action-buttons > .send-btn { position:static; inset:auto; flex:none; min-height:40px; height:40px; }
.composer-action-buttons > .microphone-btn { width:40px; }
.composer-action-buttons > .send-btn { display:flex; align-items:center; gap:6px; width:auto; max-width:190px; padding:8px 10px; }
.composer-send-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:500 12px/18px var(--font); }
.composer-wrap:has(.composer-action-buttons) { padding-bottom:56px; }
.composer-mode-button,.composer-mobile-label { display:none; }
.vicit-check-ins { display:flex; flex:none; gap:8px; overflow-x:auto; padding:8px 18px; scrollbar-width:thin; }
.vicit-check-in { appearance:none; display:flex; flex-direction:column; flex:0 0 auto; align-items:flex-start; gap:3px; max-width:260px; padding:8px 12px; border:1px solid var(--border); border-radius:9px; background:var(--surface); color:var(--text); text-align:left; cursor:pointer; }
.vicit-check-in > span { color:var(--muted); font-size:11px; line-height:16px; }
.vicit-check-in > strong { max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:12px; line-height:18px; font-weight:500; }
.vicit-check-in:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (hover:none), (pointer:coarse) {
  .recipient-button,.recipient-suggestion { min-height:44px; }
}
@media (max-width:600px) {
  .composer-recipient { padding-bottom:4px; }
  .recipient-status { font-size:10.5px; }
  .vicit-check-ins { padding:5px 10px; }
}
@media (max-width:760px), (max-width:1024px) and (max-height:600px) {
  .conversation-workspace,.conversation-main-pane { height:var(--phone-viewport-height,100dvh); min-height:0; }
  .account-shell.chat-shell .account-content { min-height:0; }
  .conversation-composer { padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
  .conversation-composer-input { font-size:16px; }
  .conversation-composer-note { display:none; }
  .conversation-composer { padding-top:6px; }
  .composer-recipient,.conversation-composer-footer { display:none; }
  .composer-wrap:has(.composer-action-buttons) { display:flex; flex-wrap:wrap; align-items:center; gap:2px; min-height:52px; padding:4px; }
  .composer-mode-button { display:flex; align-items:center; justify-content:center; flex:none; order:0; min-width:44px; max-width:64px; min-height:44px; padding:0 5px; border:0; border-radius:7px; background:var(--accent-soft); color:var(--accent-link); font:500 11px/16px var(--font); white-space:nowrap; }
  .composer-wrap > .conversation-composer-input { flex:1 1 0; order:2; width:0; min-width:0; min-height:44px; height:44px!important; max-height:44px; padding:11px 5px; border-radius:0; font-size:16px; line-height:22px; white-space:pre; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; resize:none; }
  .composer-wrap > .conversation-composer-input::-webkit-scrollbar { display:none; }
  .composer-wrap > .add-context-chip { position:static; inset:auto; flex:none; order:1; width:30px; min-width:30px; min-height:44px; height:44px; padding:0; margin:0; display:flex; align-items:center; justify-content:center; font-size:20px; }
  .composer-action-buttons { position:static; inset:auto; flex:none; order:3; gap:2px; }
  .composer-action-buttons > .microphone-btn,.composer-action-buttons > .send-btn { min-height:44px; height:44px; padding:0; justify-content:center; }
  .composer-action-buttons > .microphone-btn { width:34px; }
  .composer-action-buttons > .send-btn { width:38px; max-width:38px; }
  .composer-send-label,.composer-desktop-label { display:none; }
  .composer-mobile-label { display:inline; }
  .composer-wrap > .conversation-microphone-waveform { left:88px; width:calc(100% - 170px); bottom:12px; }
  .composer-wrap > .conversation-transcribing { left:88px; max-width:calc(100% - 170px); top:15px; font-size:12px; }
  .composer-wrap > .composer-attachments { flex-basis:100%; order:-1; }
}