:root {
  --bg: #14161a;
  --panel: #1e2127;
  --panel-2: #272b33;
  --text: #e8eaed;
  --muted: #9aa0a6;
  --accent: #3b82f6;
  --danger: #dc2626;
  --ok: #16a34a;
  --radius: 10px;
  --border: #3a3f49;
  --border-hover: #5a6170;
  --on-accent: #fff;
  --surface: #2b3038;
  --tile-bg: #000;
  --btn-radius: 8px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --title-font: var(--font);
  --bg-image: none;
  --glow: none;
  --ico-stroke: 2;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.4 var(--font);
  background-image: var(--bg-image); background-attachment: fixed;
}
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.error { color: #f87171; }

button, select, input {
  font: inherit;
  color: inherit;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--btn-radius);
  padding: 8px 12px;
}
button { cursor: pointer; }
button:hover { border-color: var(--border-hover); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
button.danger { background: var(--danger); border-color: var(--danger); color: var(--on-accent); }

/* Beitritt */
#join { min-height: 100%; display: grid; place-items: center; padding: 16px; }
.card {
  width: min(400px, 100%);
  background: var(--panel);
  padding: 28px;
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 14px;
}
.card h1 { margin: 0; font-size: 24px; }
.card p { margin: 0; }
.card label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); }
.card input { color: var(--text); }

.status { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--panel-2); font-size: 14px; }
.status.ok { color: #86efac; }
.status.warn { color: #fcd34d; }
#inapp-hint { display: flex; flex-direction: column; gap: 8px; }
#inapp-hint .share-btn { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
#inapp-hint .muted { font-size: 12px; }
.privacy { font-size: 13px; color: var(--muted); }
.privacy summary { cursor: pointer; }
.privacy p { margin-top: 6px; }
.legal { margin: 0; font-size: 13px; color: var(--muted); text-align: center; }
.legal a { color: inherit; }


/* Raum */
#app { height: 100%; display: flex; flex-direction: column; }
header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; background: var(--panel); gap: 12px;
}
main { flex: 1; display: flex; min-height: 0; }
#stage { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 12px; gap: 12px; }

#videos {
  flex: 1; display: grid; gap: 10px; min-height: 0;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-auto-rows: minmax(160px, 1fr);
}
.tile {
  position: relative; background: var(--tile-bg); border-radius: var(--radius);
  overflow: hidden; min-height: 0;
}
.tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile.screen video, .tile.pinned video { object-fit: contain; }
.tile.local video { transform: scaleX(-1); }
.tile.local.screen video { transform: none; }
.tile .avatar {
  position: absolute; inset: 0; display: none; place-items: center;
  font-size: 42px; font-weight: 600; background: var(--panel-2);
}
.tile.nocam .avatar { display: grid; }
.tile .label {
  position: absolute; left: 8px; bottom: 8px; display: flex; gap: 6px;
  background: rgba(0,0,0,.6); padding: 3px 8px; border-radius: 6px; font-size: 13px;
}
.tile.hand { outline: 3px solid #f59e0b; }
.tile.pinned { grid-column: 1 / -1; grid-row: span 2; }

/* Präsentationsmodus: Dokument/Whiteboard groß, Videos als schmale Spalte rechts */
#stage.board-open { flex-direction: row; }
#stage.board-open #videos {
  order: 2; flex: 0 0 200px; align-content: start;
  grid-template-columns: 1fr; grid-auto-rows: 120px;
  overflow-y: auto;
}
#stage.board-open .tile.pinned { grid-column: auto; grid-row: auto; }
#board-wrap { flex: 1; display: flex; flex-direction: column; gap: 6px; min-height: 0; min-width: 0; }

/* Schlanke Symbolleiste */
#board-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
#board-tools .tool-group {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px;
  background: var(--panel); border-radius: 10px;
}
#board-tools button {
  width: 34px; height: 34px; padding: 0; display: inline-grid; place-items: center;
  background: transparent; border: none; border-radius: 8px; color: var(--text);
}
#board-tools button:hover { background: var(--panel-2); }
#board-tools button:disabled { opacity: .35; cursor: default; background: transparent; }
#board-tools button.active { background: var(--accent); color: var(--on-accent); }
#board-tools .ico svg { width: 18px; height: 18px; }
/* Farbpunkt in der Leiste: zeigt aktuelle Farbe und Stärke */
#style-btn .dot {
  display: block; width: 18px; height: 18px; border-radius: 50%;
  background: var(--c, currentColor); box-shadow: 0 0 0 2px rgba(255,255,255,.5);
}
/* Strichstärken direkt in der Leiste (Punkt in der aktuellen Farbe) */
#board-tools .size .dot {
  display: block; width: var(--d); height: var(--d); border-radius: 50%;
  background: var(--pen, #e8eaed);
}
#board-tools .size.active { background: var(--panel-2); outline: 2px solid var(--accent); outline-offset: -2px; }
#style-btn.open { background: var(--panel-2); }

/* Auswahl Farbe & Stärke */
#board-wrap { position: relative; }
.popover {
  position: absolute; top: 44px; z-index: 20; width: 236px; padding: 10px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45); display: flex; flex-direction: column; gap: 10px;
}
.popover .swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.popover .color {
  width: 28px; height: 28px; padding: 0; border-radius: 50%;
  background: var(--c); border: 2px solid var(--border);
}
.popover .color.active { outline: 2px solid var(--accent); outline-offset: 2px; }
.popover .color.custom {
  position: relative; overflow: hidden; cursor: pointer;
  background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
}
.popover .color.custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; padding: 0; border: none; }
#page-info, #zoom-label { font-size: 13px; color: var(--muted); min-width: 42px; text-align: center; white-space: nowrap; }

/* Flächen: Dokument links, Whiteboard (aufklappbar) rechts */
#board-panes { flex: 1; min-height: 0; display: flex; gap: 8px; }
.surface {
  position: relative; flex: 1; min-width: 0; overflow: hidden;
  border-radius: var(--radius); background: var(--surface);
  touch-action: none; cursor: crosshair;
}
.surface-page {
  position: absolute; left: 0; top: 0; background: #ffffff; /* Papier bleibt immer weiß */
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
}
/* Dokumentseite als eigenes Bild unter dem durchsichtigen Zeichenbereich
   (als CSS-Hintergrund des Canvas zeigt Chrome/Edge sie teils nur weiß an) */
.surface-page img, .surface-page canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.surface-page img { pointer-events: none; user-select: none; }
.surface[data-tool="eraser"] { cursor: cell; }
.surface[data-tool="hand"], .surface.pan { cursor: grab; }
.surface.grabbing { cursor: grabbing; }
.surface.loading::after {
  content: 'Seite wird geladen …'; position: absolute; inset: 0; display: grid; place-items: center;
  color: #ccc; font-size: 14px; pointer-events: none;
}
.pane-btn {
  position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center; background: var(--panel); border: none; opacity: .85;
}
.pane-btn .ico svg { width: 18px; height: 18px; }
/* Rechte: Bedienelemente nur zeigen, wenn man sie nutzen darf */
body:not(.can-present) .presenter-only { display: none !important; }
body:not(.can-draw) .drawer-only { display: none !important; }
body:not(.can-draw) .surface:not([data-tool="hand"]) { cursor: default; }
body:not(.is-teacher) .teacher-only { display: none !important; }
/* Nur Whiteboard: Seitenblättern und "Whiteboard daneben" ausblenden */
#board-wrap[data-mode="tafel"] .doc-only { display: none !important; }


/* Ende der Stunde */
#join.ended #join-form > :not(#join-title):not(#join-sub) { display: none; }

#people li { flex-wrap: wrap; gap: 4px; }
.perms { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.perm { padding: 3px 8px; font-size: 12px; border-radius: 999px; color: var(--muted); }
.perm.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Einladungsfenster */
.modal {
  position: fixed; inset: 0; z-index: 50; padding: 16px;
  display: grid; place-items: center; background: rgba(0,0,0,.6);
}
.invite-card { position: relative; width: min(460px, 100%); max-height: 100%; overflow-y: auto; }
.invite-card h2 { margin: 0; font-size: 22px; }
.modal-close { position: absolute; top: 12px; right: 12px; background: transparent; border: none; font-size: 18px; }
.link-box { display: flex; gap: 8px; }
.link-box input { flex: 1; min-width: 0; font-size: 15px; color: var(--text); font-family: ui-monospace, Consolas, monospace; }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.share-btn {
  flex: 1; text-align: center; text-decoration: none; color: var(--text); white-space: nowrap;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: 14px;
}
a.share-btn:hover { border-color: var(--border-hover); }
#share-whatsapp { background: #128c4a; border-color: #128c4a; color: var(--on-accent); }
.share-btn.disabled { pointer-events: none; opacity: .5; }
.qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
#qr { width: 180px; background: #ffffff; border-radius: 8px; line-height: 0; }
#qr:empty { display: none; }
#qr svg { width: 100%; height: auto; }
.qr-wrap p { font-size: 13px; }

/* Seitenleiste */
#side {
  width: 300px; background: var(--panel); display: flex; flex-direction: column;
  padding: 12px; gap: 8px; min-height: 0;
}
#side h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 4px 0; }
#people { list-style: none; margin: 0; padding: 0; max-height: 30%; overflow-y: auto; }
#people li { padding: 4px 0; display: flex; justify-content: space-between; }
#chat-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; min-height: 80px; }
.msg { background: var(--panel-2); padding: 6px 10px; border-radius: 8px; word-wrap: break-word; }
.msg .meta { font-size: 12px; color: var(--muted); }
#chat-form { display: flex; gap: 6px; }
#chat-input { flex: 1; min-width: 0; }

.side-head { display: flex; justify-content: space-between; align-items: center; }
/* Am PC einklappbar: mehr Platz für Präsentation und Videos */
#app.side-closed #side { display: none; }

/* Hinweis-Banner (z. B. Kamera blockiert) */
#banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 16px; background: #3b2f0b; color: #fde68a;
}
#banner-text { flex: 1; min-width: 200px; }
#banner-close { background: transparent; border: none; color: inherit; }

/* Steuerleiste */
#controls {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px;
  padding: 10px 16px; background: var(--panel);
}
#controls button { display: inline-flex; align-items: center; gap: 8px; position: relative; }
.ico svg { width: 20px; height: 20px; display: block; stroke-width: var(--ico-stroke); filter: var(--glow); }
.toggle.on { background: var(--ok); border-color: var(--ok); color: var(--on-accent); }
.toggle.off { background: var(--danger); border-color: var(--danger); color: var(--on-accent); }
.toggle.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.toggle.busy { opacity: .6; cursor: progress; }
.badge {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--danger); color: var(--on-accent); font-size: 11px; font-weight: 600;
}
.mobile-only { display: none !important; }

/* ---------- Handy ---------- */
@media (max-width: 800px) {
  #app { height: 100vh; height: 100dvh; }
  input, select, button { font-size: 16px; } /* verhindert Zoom auf iPhones */
  header { padding: 8px 12px; }
  main { position: relative; }
  #stage { padding: 8px; gap: 8px; position: relative; }

  #videos { grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 8px; }
  #videos:not([data-count="1"]):not([data-count="2"]):not([data-count="3"]) { grid-template-columns: 1fr 1fr; }
  .tile .avatar { font-size: 32px; }

  /* Eigenes Bild als kleines Fenster unten rechts */
  #videos:not([data-count="1"]) .tile.local {
    position: absolute; right: 16px; bottom: 16px; z-index: 5;
    width: 28vw; max-width: 140px; aspect-ratio: 3 / 4;
    box-shadow: 0 4px 16px rgba(0,0,0,.5); border: 2px solid var(--panel-2);
  }
  #videos:not([data-count="1"]) .tile.local .label { display: none; }

  /* Präsentation auf dem Handy: Videos als Leiste unten, Flächen untereinander */
  #stage.board-open { flex-direction: column; }
  #stage.board-open #videos {
    flex: 0 0 90px; grid-template-columns: none; grid-auto-flow: column;
    grid-auto-columns: 120px; grid-auto-rows: 1fr; overflow-x: auto; overflow-y: hidden;
  }
  #stage.board-open .tile.local { position: relative !important; right: auto !important; bottom: auto !important; width: auto !important; aspect-ratio: auto !important; }
  #board-panes { flex-direction: column; }
  /* Symbolleiste als eine wischbare Zeile */
  #board-tools { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  #board-tools .tool-group { flex: none; }
  #board-tools button { width: 38px; height: 38px; }
  /* Chat & Teilnehmende als Vollbild-Fenster */
  .mobile-only { display: inline-flex !important; }
  #side { position: absolute; inset: 0; width: auto; z-index: 10; display: none; }
  #side.open { display: flex; }

  /* Runde Symbol-Knöpfe */
  #controls {
    flex-wrap: nowrap; justify-content: space-evenly; gap: 4px;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  }
  #controls button { padding: 11px; border-radius: 50%; }
  #controls .txt { display: none; }
}