/* One control surface for Web and native clients. Only chrome moves; the
   canvas and its input coordinate space never resize when tools are hidden. */
#view-session {
  --session-surface: rgba(250,250,249,.86);
  --session-text: #232326;
  --session-secondary: #68686f;
  --session-line: rgba(30,30,35,.12);
  --session-hover: rgba(30,30,35,.07);
  --session-accent: #0071e3;
  --session-danger: #c82a2a;
  --session-shadow: 0 14px 34px rgba(0,0,0,.16),0 1px 3px rgba(0,0,0,.08);
  background:#090a0c;
}
[data-theme='dark'] #view-session {
  --session-surface: rgba(44,44,46,.88);
  --session-text: #f5f5f7;
  --session-secondary: #b0b0b9;
  --session-line: rgba(255,255,255,.14);
  --session-hover: rgba(255,255,255,.09);
  --session-accent: #70b5ff;
  --session-danger: #ff817a;
}
#view-session .session-workspace { position:relative; width:100%; height:100%; min-height:0; padding:0; gap:0; flex:1; }
#view-session .stage { width:100%; height:100%; border:0; border-radius:0; box-shadow:none; background:#090a0c; }
#view-session .video-wrap { border:0; border-radius:0; background:#090a0c; }
#view-session #session-video { border-radius:0; background:#090a0c; object-fit:contain; }
#view-session .session-sidepanel, #view-session .session-desktop-hint, #view-session .control-hint,
#view-session .session-kicker, #view-session .traffic-badge,
#view-session .path-badge { display:none; }
#view-session .sessbar, #view-session .toolbar {
  color:var(--session-text);
  background:var(--session-surface);
  border:1px solid var(--session-line);
  border-radius:18px;
  box-shadow:var(--session-shadow);
  backdrop-filter:blur(20px) saturate(120%);
  -webkit-backdrop-filter:blur(20px) saturate(120%);
  will-change:auto;
  transition:transform 180ms ease-out,opacity 150ms ease-out,visibility 180ms;
}
#view-session .sessbar {
  top:max(12px,env(safe-area-inset-top));
  left:max(12px,env(safe-area-inset-left));
  right:max(12px,env(safe-area-inset-right));
  width:auto;
  max-width:700px;
  min-height:58px;
  height:auto;
  margin:0 auto;
  padding:6px;
  display:flex;
  align-items:center;
  gap:6px;
}
#view-session .sess-info { display:flex; flex:1; flex-direction:column; min-width:0; gap:4px; padding:2px 12px; }
#view-session .sess-peer { color:var(--session-text); font-size:13px; font-weight:600; line-height:1.2; }
#view-session .sess-status, #view-session .session-os { color:var(--session-secondary); font-size:10px; line-height:1.3; }
#view-session .sess-status { max-width:100%; }
#view-session .session-status-line { min-width:0; gap:7px; }
#view-session .iconbtn { width:40px; height:40px; flex:0 0 40px; border:0; border-radius:9px; background:transparent; color:var(--session-secondary); transition:transform 120ms ease-out,background 120ms ease-out; }
#view-session .iconbtn svg, #view-session .iconbtn .ic { width:18px; height:18px; }
#view-session .iconbtn:hover { color:var(--session-text); border:0; background:var(--session-hover); }
#view-session .iconbtn:active { transform:scale(.96); }
#view-session #session-disconnect { color:var(--session-danger); background:transparent; border-right:1px solid var(--session-line); border-radius:9px 0 0 9px; width:44px; flex-basis:44px; }
#view-session #session-disconnect:hover { background:var(--session-hover); color:var(--session-danger); }
#view-session .toolbar { right:50%; left:auto; bottom:max(14px,env(safe-area-inset-bottom)); display:flex; flex-wrap:wrap; justify-content:center; gap:4px; width:max-content; max-width:calc(100% - 28px); min-height:56px; margin:0; padding:6px 8px; overflow:visible; transform:translateX(50%); }
#view-session .toolbtn { display:flex; flex-direction:row; align-items:center; justify-content:center; gap:7px; min-width:72px; min-height:40px; flex:0 0 auto; padding:9px 12px; border:1px solid transparent; border-radius:9px; background:transparent; color:var(--session-secondary); font-size:11px; transition:transform 120ms ease-out,background 120ms ease-out; }
#view-session .toolbtn > svg, #view-session .toolbtn .ic { width:17px; height:17px; }
#view-session .toolbtn:hover { color:var(--session-text); background:var(--session-hover); border-color:transparent; }
#view-session .toolbtn.active { color:var(--session-accent); background:var(--session-hover); border-color:var(--session-line); }
#view-session .toolbtn:active { transform:scale(.97); }
#view-session .session-toolbar-stats { display:none; }
#view-session .session-stats-overlay { top:max(16px,env(safe-area-inset-top)); padding:7px 12px; border:1px solid var(--session-line); border-radius:8px; color:var(--session-secondary); background:var(--session-surface); box-shadow:var(--session-shadow); font-size:10px; backdrop-filter:none; -webkit-backdrop-filter:none; transition:opacity 150ms ease-out,transform 180ms ease-out,visibility 180ms; }
#view-session .session-edge-reveal { width:78px; height:8px; border-radius:3px; pointer-events:auto; transition:opacity 150ms ease-out; }
#view-session .session-edge-reveal::before { width:60px; height:2px; }
#view-session .session-edge-reveal-top { top:env(safe-area-inset-top,0px); }
#view-session .session-edge-reveal-bottom { bottom:env(safe-area-inset-bottom,0px); }
#view-session .session-edge-reveal:active { transform:translateX(-50%); }
#view-session :is(.toolbtn,.iconbtn,.session-edge-reveal):focus-visible { outline:2px solid var(--session-accent); outline-offset:2px; }
#view-session.session-chrome-hidden .sessbar { transform:translateY(calc(-100% - 24px - env(safe-area-inset-top,0px))); }
#view-session.session-chrome-hidden .toolbar { display:flex !important; transform:translateX(50%) translateY(calc(100% + 24px + env(safe-area-inset-bottom,0px))); }
#view-session .mobile-only-control { display:none; }
#view-session #tb-stream-settings { display:none; }
#view-session .stream-settings-card, #view-session .text-card, #view-session .file-transfer-panel {
  color:var(--session-text); background:var(--ui-surface-solid); border:1px solid var(--session-line); border-radius:18px; box-shadow:var(--session-shadow); backdrop-filter:none; -webkit-backdrop-filter:none;
}
#view-session :is(.stream-settings-head h2,.text-title,.stream-setting-row label span,.stream-setting-copy span,.file-transfer-heading-copy strong) { color:var(--session-text); }
#view-session :is(.stream-settings-head .section-kicker,.stream-setting-row label small,.stream-setting-copy small,.stream-settings-note,.text-card .hint,.file-transfer-eyebrow,.file-transfer-overview,.file-transfer-list-header,.file-transfer-meta,.file-transfer-meta-secondary) { color:var(--session-secondary); }
#view-session .stream-setting-row select, #view-session .text-card textarea { color:var(--session-text); background:var(--session-hover); border:1px solid var(--session-line); }
#view-session .stream-setting-row select { min-height:44px; }
#view-session .stream-settings-actions .btn.ghost, #view-session .text-actions .btn.ghost { color:var(--session-secondary); background:var(--session-hover); border-color:var(--session-line); }
#view-session .stream-setting-switch { background:var(--session-secondary); }
#view-session .stream-setting-toggle input:checked + .stream-setting-switch { background:var(--ui-accent); }
#view-session .transfer-launcher { top:82px; background:var(--session-surface); color:var(--session-text); border-color:var(--session-line); box-shadow:var(--session-shadow); backdrop-filter:none; -webkit-backdrop-filter:none; }
#view-session .transfer-launcher-copy span { color:var(--session-secondary); }
#view-session .file-transfer-panel { top:82px; }
#view-session .file-transfer-name { color:var(--session-text); }
#view-session .file-transfer-item, #view-session .file-transfer-clear { color:var(--session-text); background:var(--session-hover); border-color:var(--session-line); }
#view-session .file-transfer-progress::-webkit-progress-value { transition:none; }

/* Recovery is deliberately lighter than the initial waiting surface: preserve
   the remote canvas and input focus while making an automatic reconnect
   visible. It remains present even when the toolbars are hidden. */
#view-session .session-recovery-banner {
  position:absolute;
  z-index:36;
  top:max(78px,calc(env(safe-area-inset-top) + 68px));
  left:50%;
  display:flex;
  align-items:center;
  gap:8px;
  max-width:min(420px,calc(100% - 32px));
  padding:8px 12px;
  overflow:hidden;
  color:#765116;
  border:1px solid rgba(213,139,0,.24);
  border-radius:999px;
  background:rgba(255,248,226,.92);
  box-shadow:0 10px 26px rgba(70,48,0,.16);
  font-size:11px;
  pointer-events:none;
  transform:translateX(-50%);
  transition:opacity 150ms ease-out,transform 180ms ease-out;
}
[data-theme='dark'] #view-session .session-recovery-banner {
  color:#ffda7a;
  border-color:rgba(255,203,85,.25);
  background:rgba(54,43,13,.92);
  box-shadow:0 10px 26px rgba(0,0,0,.28);
}
#view-session.session-chrome-hidden .session-recovery-banner {
  top:max(16px,calc(env(safe-area-inset-top) + 10px));
}
#view-session .session-recovery-indicator {
  width:10px;
  height:10px;
  flex:0 0 10px;
  border:2px solid currentColor;
  border-top-color:transparent;
  border-radius:50%;
  animation:session-recovery-spin 800ms linear infinite;
}
#view-session .session-recovery-message {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#view-session .session-recovery-attempt {
  flex:0 0 auto;
  color:currentColor;
  opacity:.72;
  font-size:10px;
  white-space:nowrap;
}
@keyframes session-recovery-spin { to { transform:rotate(360deg); } }

/* A compact status button keeps the normal session chrome quiet while making
   the full connection picture one click away. The panel never covers the
   remote input surface unless the user explicitly opens it. */
#view-session #session-quality {
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-width:0;
  max-width:160px;
  overflow:hidden;
  padding:6px 2px;
  border:0;
  border-radius:7px;
  color:var(--session-secondary);
  background:transparent;
  font:inherit;
  font-size:10px;
  text-overflow:ellipsis;
  white-space:nowrap;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  transition:color 120ms ease-out,background 120ms ease-out;
}
#view-session #session-quality::before { content:''; width:6px; height:6px; flex:0 0 6px; border-radius:50%; background:currentColor; opacity:.9; }
#view-session #session-quality[data-quality='warn'] { color:#d58b00; }
[data-theme='dark'] #view-session #session-quality[data-quality='warn'] { color:#ffcb55; }
#view-session #session-quality[data-quality='normal'] { color:var(--session-secondary); }
#view-session #session-quality:hover { color:var(--session-text); background:var(--session-hover); }
#view-session #session-quality:focus-visible { outline:2px solid var(--session-accent); outline-offset:2px; }
.session-quality-panel {
  position:absolute;
  z-index:34;
  top:76px;
  right:max(18px,env(safe-area-inset-right));
  width:min(340px,calc(100% - 36px));
  padding:15px;
  color:var(--session-text);
  border:1px solid var(--session-line);
  border-radius:16px;
  background:var(--session-surface);
  box-shadow:var(--session-shadow);
  backdrop-filter:blur(20px) saturate(120%);
  -webkit-backdrop-filter:blur(20px) saturate(120%);
  pointer-events:auto;
  touch-action:manipulation;
}
.session-quality-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.session-quality-panel-head > div { min-width:0; display:flex; flex-direction:column; gap:5px; }
.session-quality-eyebrow { color:var(--session-secondary); font-size:9px; letter-spacing:.08em; }
#session-quality-panel-title { color:var(--session-text); font-size:15px; font-weight:650; letter-spacing:-.02em; }
.session-quality-close { width:28px; height:28px; flex:0 0 28px; display:grid; place-items:center; padding:0; color:var(--session-secondary); border:0; border-radius:8px; background:transparent; font-size:21px; line-height:1; cursor:pointer; }
.session-quality-close .ic, .session-quality-close .site-icon { width:15px; height:15px; }
.session-quality-close:hover { color:var(--session-text); background:var(--session-hover); }
.session-quality-close:focus-visible { outline:2px solid var(--session-accent); outline-offset:2px; }
.session-quality-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:14px; }
.session-quality-grid > div { min-width:0; display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:9px 10px; border:1px solid var(--session-line); border-radius:10px; background:var(--session-hover); }
.session-quality-grid span, .session-quality-route-row span { color:var(--session-secondary); font-size:10px; }
.session-quality-grid strong, .session-quality-route-row strong { min-width:0; overflow:hidden; color:var(--session-text); font-size:10px; font-variant-numeric:tabular-nums; font-weight:620; text-overflow:ellipsis; white-space:nowrap; }
.session-quality-trend { margin-top:10px; padding:9px 10px 10px; border:1px solid var(--session-line); border-radius:10px; background:var(--session-hover); }
.session-quality-trend-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.session-quality-trend-head span { color:var(--session-secondary); font-size:10px; }
.session-quality-trend-head strong { color:var(--session-text); font-size:10px; font-weight:620; }
.session-quality-trend-bars { display:grid; grid-template-columns:repeat(30,minmax(0,1fr)); gap:3px; height:7px; margin-top:9px; }
.session-quality-trend-bar { min-width:0; border-radius:3px; background:var(--session-secondary); opacity:.2; }
.session-quality-trend-bar[data-level='good'] { background:#43b77b; opacity:.95; }
.session-quality-trend-bar[data-level='normal'] { background:#d9a535; opacity:.9; }
.session-quality-trend-bar[data-level='warn'] { background:#db765e; opacity:.95; }
.session-quality-trend-bar[data-level='empty'] { opacity:.12; }
[data-theme='dark'] .session-quality-trend-bar[data-level='good'] { background:#61d49a; }
[data-theme='dark'] .session-quality-trend-bar[data-level='normal'] { background:#f1c75d; }
[data-theme='dark'] .session-quality-trend-bar[data-level='warn'] { background:#ff9179; }
.session-quality-route-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px; padding:9px 10px; border-top:1px solid var(--session-line); }
.session-quality-advice { margin:11px 1px 0; color:var(--session-secondary); font-size:10px; line-height:1.55; }
.session-quality-actions { display:flex; align-items:center; gap:8px; margin-top:12px; min-height:28px; }
.session-quality-actions .btn-ghost { min-height:28px; padding:5px 9px; color:var(--session-text); border:1px solid var(--session-line); border-radius:8px; background:var(--session-hover); font-size:10px; line-height:1.2; cursor:pointer; }
.session-quality-actions .btn-ghost:hover { border-color:var(--session-accent); background:color-mix(in srgb,var(--session-accent) 8%,var(--session-hover)); }
.session-quality-actions .btn-ghost:focus-visible { outline:2px solid var(--session-accent); outline-offset:2px; }
.session-quality-copy-status { min-width:0; color:var(--session-secondary); font-size:10px; line-height:1.3; }
.session-quality-copy-status[data-state='ok'] { color:#299663; }
.session-quality-copy-status[data-state='error'] { color:#c25642; }
[data-theme='dark'] .session-quality-copy-status[data-state='ok'] { color:#72d8a3; }
[data-theme='dark'] .session-quality-copy-status[data-state='error'] { color:#ff9882; }
#view-session .session-quality-panel[data-quality='warn'] #session-quality-panel-title { color:#d58b00; }
[data-theme='dark'] #view-session .session-quality-panel[data-quality='warn'] #session-quality-panel-title { color:#ffcb55; }
#view-session.session-chrome-hidden .session-quality-panel { display:none; }
@media (max-width:760px) {
  #view-session .sessbar { gap:2px; padding:5px; min-height:56px; }
  #view-session .sess-info { padding:2px 7px; }
  #view-session .iconbtn { width:36px; height:40px; flex-basis:36px; }
  #view-session .toolbar { padding:6px; gap:2px; max-width:calc(100% - 16px); bottom:max(10px,env(safe-area-inset-bottom)); }
  #view-session .session-toolbar-stats { width:100%; padding:4px 8px 7px; border-right:0; border-bottom:1px solid var(--session-line); text-align:center; }
  #view-session .toolbtn { min-width:54px; min-height:44px; padding:6px 9px; flex-direction:column; gap:4px; font-size:10px; }
  #view-session #session-quality { display:inline-flex; width:24px; max-width:24px; flex:0 0 24px; padding:6px; font-size:0; }
  #view-session .session-quality-panel { top:72px; right:10px; width:calc(100% - 20px); max-width:340px; }
  #view-session .transfer-launcher { top:80px; bottom:auto; }
  #view-session .file-transfer-panel { top:80px; bottom:auto; max-height:calc(100dvh - 200px); }
}
@media (pointer:coarse) {
  #view-session .iconbtn { width:44px; height:44px; flex-basis:44px; }
  #view-session .session-edge-reveal { height:16px; }
  #view-session .mobile-only-control { display:flex; }
  #view-session #tb-stream-settings { display:flex; }
  #view-session .toolbar { max-width:calc(100% - 16px); }
  #view-session .toolbtn { min-width:56px; min-height:44px; flex-direction:column; padding:6px 8px; }
}
@media (pointer:coarse) and (max-width:760px) {
  #view-session .toolbar { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:344px; }
  #view-session .session-toolbar-stats { grid-column:1 / -1; }
  #view-session .session-settings-button { display:none; }
}
@media (prefers-reduced-transparency:reduce) {
  #view-session { --session-surface:#fafaf9; }
  [data-theme='dark'] #view-session { --session-surface:#1e1f23; }
  #view-session .sessbar,#view-session .toolbar { backdrop-filter:none; -webkit-backdrop-filter:none; }
}
@media (prefers-reduced-motion:reduce) {
  #view-session .sessbar,#view-session .toolbar,#view-session .session-stats-overlay,#view-session .session-edge-reveal { transition:none; }
}

/* Desktop file transfers stay in a small, dismissible center instead of
   pushing the remote canvas or competing with the primary toolbar. */
#view-session .session-file-transfer-center {
  position:absolute;
  z-index:35;
  top:max(76px,calc(env(safe-area-inset-top) + 64px));
  right:max(18px,env(safe-area-inset-right));
  width:min(390px,calc(100% - 36px));
  max-height:min(52vh,440px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:14px;
  color:var(--session-text);
  border:1px solid var(--session-line);
  border-radius:16px;
  background:var(--session-surface);
  box-shadow:var(--session-shadow);
  backdrop-filter:blur(20px) saturate(120%);
  -webkit-backdrop-filter:blur(20px) saturate(120%);
}
#view-session .session-file-transfer-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
#view-session .session-file-transfer-head > div:first-child { min-width:0; display:flex; flex-direction:column; gap:4px; }
#view-session .session-file-transfer-eyebrow { color:var(--session-secondary); font-size:9px; letter-spacing:.08em; }
#view-session .session-file-transfer-head strong { color:var(--session-text); font-size:15px; font-weight:650; letter-spacing:-.02em; }
#view-session .session-file-transfer-actions { display:flex; align-items:center; gap:4px; flex:0 0 auto; }
#view-session .session-file-transfer-actions button { min-height:28px; padding:5px 7px; color:var(--session-secondary); border:0; border-radius:7px; background:transparent; font:inherit; font-size:10px; cursor:pointer; }
#view-session .session-file-transfer-actions button:hover:not(:disabled) { color:var(--session-text); background:var(--session-hover); }
#view-session .session-file-transfer-actions button:disabled { cursor:default; opacity:.45; }
#view-session #session-file-transfer-close { width:28px; height:28px; padding:0; font-size:20px; line-height:1; }
#view-session #session-file-transfer-close .ic, #view-session #session-file-transfer-close .site-icon { width:15px; height:15px; }
#view-session .session-file-transfer-list { min-height:0; display:grid; gap:7px; overflow:auto; margin:12px -3px 0; padding:0 3px 2px; list-style:none; scrollbar-width:thin; }
#view-session .session-file-transfer-row { display:grid; gap:8px; padding:10px; border:1px solid var(--session-line); border-radius:11px; background:var(--session-hover); }
#view-session .session-file-transfer-row-head, #view-session .session-file-transfer-row-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; }
#view-session .session-file-transfer-row-head strong { min-width:0; overflow:hidden; color:var(--session-text); font-size:11px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
#view-session .session-file-transfer-row-head span { flex:0 0 auto; color:var(--session-secondary); font-size:9px; }
#view-session .session-file-transfer-row progress { width:100%; height:5px; overflow:hidden; border:0; border-radius:999px; background:var(--session-line); appearance:none; }
#view-session .session-file-transfer-row progress::-webkit-progress-bar { background:var(--session-line); border-radius:999px; }
#view-session .session-file-transfer-row progress::-webkit-progress-value { background:var(--session-accent); border-radius:999px; transition:width 180ms ease-out; }
#view-session .session-file-transfer-row progress::-moz-progress-bar { background:var(--session-accent); border-radius:999px; }
#view-session .session-file-transfer-row[data-state='failed'] progress::-webkit-progress-value, #view-session .session-file-transfer-row[data-state='cancelled'] progress::-webkit-progress-value { background:var(--session-danger); }
#view-session .session-file-transfer-row[data-state='failed'] progress::-moz-progress-bar, #view-session .session-file-transfer-row[data-state='cancelled'] progress::-moz-progress-bar { background:var(--session-danger); }
#view-session .session-file-transfer-row-foot span { min-width:0; overflow:hidden; color:var(--session-secondary); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
#view-session .session-file-transfer-row-foot button { flex:0 0 auto; min-height:27px; padding:5px 8px; color:var(--session-accent); border:1px solid var(--session-line); border-radius:7px; background:transparent; font:inherit; font-size:10px; cursor:pointer; }
#view-session .session-file-transfer-row-foot button:hover { background:var(--session-hover); }
#view-session .session-file-transfer-row-foot button:focus-visible, #view-session .session-file-transfer-actions button:focus-visible { outline:2px solid var(--session-accent); outline-offset:2px; }
#view-session .session-transfers-count { min-width:16px; height:16px; display:inline-grid; place-items:center; padding:0 4px; color:var(--session-text); border-radius:999px; background:var(--session-line); font-size:9px; font-variant-numeric:tabular-nums; font-weight:650; }
#view-session #session-transfers-toggle.active .session-transfers-count { color:var(--session-accent); background:color-mix(in srgb,var(--session-accent) 16%,transparent); }
@media (max-width:760px) {
  #view-session .session-file-transfer-center { top:max(68px,calc(env(safe-area-inset-top) + 56px)); right:8px; width:calc(100% - 16px); max-height:min(58vh,430px); }
}
@media (prefers-reduced-motion:reduce) {
  #view-session .session-file-transfer-row progress::-webkit-progress-value { transition:none; }
}