/* Seite des Web-Viewers. Nur Tokens aus stammheimer.css, keine Farbliterale. */
html, body { height: 100%; }
[hidden] { display: none !important; }
body { margin: 0; display: flex; flex-direction: column; color: var(--text); background: var(--bg-deep); font-family: var(--font-sans); font-size: var(--fs-body, 13px); }
button, a { font: inherit; cursor: pointer; }
button { border: 0; }
a { text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.topbar { display: flex; align-items: baseline; gap: 10px; padding: 14px 20px; }
.brand { color: var(--text-strong); font-size: 16px; font-weight: 700; letter-spacing: -.01em; }

#main { flex: 1; display: grid; align-content: start; justify-items: center; padding: 0 16px 24px; min-height: 0; }
.card { width: min(560px, 100%); display: grid; gap: 12px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-view); background: var(--surface); box-shadow: var(--shadow-sm); }
.card h2 { margin: 0; color: var(--text-strong); font-size: 20px; font-weight: 700; letter-spacing: -.025em; }
.card p { margin: 0; line-height: 1.5; color: var(--text-soft); }
.muted { color: var(--muted); }
.card .muted { color: var(--muted); }
.error-text { color: var(--danger-text) !important; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.actions .primary-action { width: auto; }
.actions .dialog-cancel { display: inline-flex; align-items: center; }
.fp { justify-self: start; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--text-strong); background: var(--surface-soft); font: 15px/1.4 var(--font-mono); letter-spacing: .04em; user-select: all; }

/* Sitzung */
#main:has(.session) { display: flex; flex-direction: column; padding: 0; }
.session { flex: 1; display: flex; flex-direction: column; width: 100%; min-height: 0; }
.session-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--bg); }
.session-bar strong { color: var(--text-strong); }
.session-bar .status { color: var(--text-soft); }
.session-bar .hangup { width: auto; margin-left: auto; }
.tools { display: flex; flex-wrap: wrap; gap: 6px; }
.tool { min-height: 30px; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); color: var(--text-soft); background: transparent; font-size: 12px; font-weight: 600; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.tool:hover:not(:disabled) { color: var(--text-strong); background: var(--hover-bg); }
.tool:active:not(:disabled) { background: var(--press-bg); }
.tool:disabled { opacity: .45; cursor: default; }
.tool.active { color: var(--accent-bright); border-color: rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .12); }
.context-menu.floating { position: fixed; z-index: 25; }
.text-input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-control); color: var(--text-strong); background: var(--bg-sunken); font: 14px/1.45 var(--font-sans); resize: vertical; }
.text-input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); }
.screen.controlling { cursor: crosshair; outline: none; }
.screen:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.screen-wrap:fullscreen { background: var(--bg-sunken); }
.badge-chip { padding: 2px 8px; border-radius: var(--radius-pill); color: var(--text-soft); background: var(--surface-soft); font-size: 11px; font-weight: 600; }
.screen-wrap { position: relative; flex: 1; min-height: 0; background: var(--bg-sunken); overflow: hidden; }
/* Bühne: von mobile.js eingepasst (Breite/Höhe) und gezoomt (transform); Zeiger darin in Bildkoordinaten */
.stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.screen { display: block; width: 100%; height: 100%; background: var(--bg-sunken); }
.remote-cursor { position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border: 2px solid var(--accent-bright); border-radius: 50%; pointer-events: none; scale: var(--inv, 1); }

/* Monitor-Auswahl (monitors.js): Kacheln mit Vorschau, am PC unter dem Knopf, schmal als Blatt über die ganze Breite */
.monitor-picker {
  position: fixed; z-index: 25; display: grid; gap: 8px; width: max-content; max-width: min(640px, calc(100vw - 16px));
  max-height: calc(var(--app-h, 100dvh) - 80px); overflow-y: auto; overscroll-behavior: contain; padding: 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-menu, 12px); background: var(--panel-raised);
  box-shadow: var(--shadow-lg); transform-origin: top left; animation: pop-in var(--dur-fast) var(--ease-out);
}
.monitor-picker.sheet { left: 8px; right: 8px; width: auto; max-width: none; }
.mp-title { padding: 0 2px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.mp-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), 168px); gap: 8px; }
.monitor-picker.sheet .mp-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.mp-tile {
  display: grid; gap: 6px; align-content: start; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-control);
  color: var(--text-soft); background: var(--surface-soft); text-align: left;
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.mp-tile:hover { color: var(--text-strong); border-color: var(--line-strong); background: var(--hover-bg); }
.mp-tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.mp-tile[aria-pressed="true"] { color: var(--text-strong); border-color: rgba(var(--accent-rgb), .7); background: rgba(var(--accent-rgb), .14); }
.mp-thumb { display: grid; place-items: center; height: 96px; border-radius: var(--radius-sm); background: var(--bg-sunken); }
.mp-screen { position: relative; display: grid; place-items: center; max-width: 100%; overflow: hidden; border-radius: 4px; background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); }
.mp-screen img { display: block; width: 100%; height: 100%; object-fit: fill; }
.mp-num { color: var(--muted); font-size: 22px; font-weight: 700; }
.mp-all { display: block; background: transparent; box-shadow: none; }
.mp-part { position: absolute; display: grid; place-items: center; box-sizing: border-box; overflow: hidden; border: 1px solid var(--bg-sunken); background: var(--surface); }
.mp-part .mp-num { font-size: 14px; }
.mp-name { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.mp-tag { padding: 1px 7px; border-radius: var(--radius-pill); color: var(--text-soft); background: var(--surface); font-size: 11px; font-weight: 600; }
.mp-tile[aria-pressed="true"] .mp-tag { color: var(--accent-bright); background: rgba(var(--accent-rgb), .14); }
.mp-res { color: var(--muted); font: 11px var(--font-mono); }
.session.touch ~ .monitor-picker .mp-tile, body.fern-touch .mp-tile { padding: 10px; }
@media (prefers-reduced-motion: reduce) { .monitor-picker { animation: none; } }

#toasts { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); display: grid; gap: 8px; justify-items: center; z-index: 30; }
.modal-backdrop { position: fixed; inset: 0; z-index: 20; }

/* ---------------------------------------------------------------- Handy und Tablet (mobile.js, .touch) */
body.fern-touch { overscroll-behavior: none; }
body.fern-touch:has(.session.touch) .topbar { display: none; }
.session.touch { position: fixed; left: 0; right: 0; top: var(--app-top, 0); height: var(--app-h, 100dvh); z-index: 1; background: var(--bg-sunken); }
.session.touch .screen-wrap { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.session.touch .session-bar {
  position: absolute; z-index: 5; top: calc(env(safe-area-inset-top) + 6px);
  left: calc(env(safe-area-inset-left) + 6px); right: calc(env(safe-area-inset-right) + 6px);
  gap: 6px 8px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-view);
  background: var(--surface); box-shadow: var(--shadow-md);
}
.session.touch .session-bar .stats { display: none; }
.session.touch .session-bar .status { flex: 1 1 140px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session.touch .tools { gap: 6px; }
.session.touch .tool, .session.touch .hangup { min-height: 44px; padding: 6px 14px; font-size: 14px; }
.session.touch .session-bar .hangup { margin-left: 0; }
.session.touch .bar-toggle { min-width: 44px; padding: 0; font-size: 18px; }
.session.touch .session-bar.collapsed { left: auto; right: calc(env(safe-area-inset-right) + 8px); padding: 4px; opacity: .88; }
.session.touch .session-bar.collapsed > :not(.bar-toggle) { display: none; }
.session.touch.trackpad .remote-cursor { display: none !important; }
.touch-pointer {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 26px; pointer-events: none; z-index: 2;
  transform-origin: 0 0; scale: var(--inv, 1); background: var(--text-strong);
  clip-path: polygon(0 0, 0 78%, 24% 60%, 40% 96%, 56% 90%, 41% 55%, 72% 55%);
  filter: drop-shadow(0 0 1.5px var(--bg-deep)) drop-shadow(0 1px 2px var(--bg-deep));
}
.keybar {
  position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; display: flex; gap: 6px; overflow-x: auto;
  padding: 6px calc(env(safe-area-inset-right) + 6px) calc(env(safe-area-inset-bottom) + 6px) calc(env(safe-area-inset-left) + 6px);
  border-top: 1px solid var(--line-strong); background: var(--surface); scrollbar-width: none; overscroll-behavior-x: contain;
}
.keybar::-webkit-scrollbar { display: none; }
.keybar .key-group { display: contents; }
.keybar .key-group[hidden] { display: none; }
.key {
  flex: 0 0 auto; min-width: 46px; height: 44px; padding: 0 10px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-control); color: var(--text-strong); background: var(--surface-soft);
  font-size: 14px; font-weight: 600; touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.key:active { background: var(--press-bg); }
.key.active { color: var(--accent-bright); border-color: rgba(var(--accent-rgb), .55); background: rgba(var(--accent-rgb), .14); }
.key.locked { box-shadow: inset 0 -3px 0 var(--accent); }
.session.touch:has(.keybar:not([hidden])) .screen-wrap { margin-bottom: calc(env(safe-area-inset-bottom) + 57px); }
/* verstecktes Eingabefeld der Bildschirmtastatur: 16px gegen Auto-Zoom (iOS), oben fixiert gegen Springen */
.soft-input {
  position: fixed; left: 0; top: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; resize: none;
  font-size: 16px; color: transparent; caret-color: transparent; background: transparent; pointer-events: none;
}
.session.touch:fullscreen { top: 0; height: 100%; }
@media (orientation: landscape) and (max-height: 500px) {
  .session.touch .tool, .session.touch .hangup { min-height: 40px; }
  .key { height: 40px; }
  .session.touch:has(.keybar:not([hidden])) .screen-wrap { margin-bottom: calc(env(safe-area-inset-bottom) + 53px); }
}