:root {
  --bg: #111417;
  --panel: #1b2026;
  --panel-2: #232a31;
  --text: #e8edf2;
  --muted: #8a97a3;
  --accent: #3a86ff;
  --accent-2: #2f6fd6;
  --in: #272e35;
  --out: #2f6fd6;
  --ok: #35c66b;
  --idle: #d6a53a;
  --off: #6b7680;
  --err: #ff6b6b;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
}

.fatal { padding: 2rem; text-align: center; color: var(--err); }

/* Screens */
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; }
.screen[hidden] { display: none; }

/* Zentrierte Karten (Setup/Lock/Pair) */
/* align-items zentriert horizontal; die Karte zentriert sich vertikal per auto-Rand,
   kann aber scrollen, wenn sie höher ist als der Bildschirm (kleine Geräte). */
#screen-setup, #screen-pair {
  align-items: center; justify-content: flex-start;
  padding: 20px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}

/* Tarn-Fassade: Taschenrechner (füllt den Bildschirm wie eine echte Rechner-App) */
#screen-lock { padding: 0; }
.facade { flex: 1; display: flex; }
.calc { flex: 1; display: flex; flex-direction: column; background: #0b0d10; }
.calc-display {
  flex: 1; display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 24px; padding-top: calc(env(safe-area-inset-top) + 24px);
  font-size: 3rem; font-weight: 300; color: #fff;
  text-align: right; word-break: break-all; overflow: hidden;
}
.calc-keys {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: #171b20; padding: 1px;
  padding-bottom: calc(env(safe-area-inset-bottom) + 1px);
}
.calc-key {
  background: #2a2f36; color: #fff; border: none; border-radius: 0;
  font-size: 1.6rem; padding: 22px 0; cursor: pointer; -webkit-user-select: none; user-select: none;
}
.calc-key:active { background: #3a414a; }
.calc-key.op { background: #39404a; }
.calc-key.op:active { background: #495360; }
.calc-key.fn { background: #20242a; color: #cfd6dd; }
.calc-key.fn:active { background: #2d333b; }
.calc-key.eq { background: var(--accent); }
.calc-key.eq:active { background: var(--accent-2); }
.calc-key.zero { grid-column: span 2; } /* „0" zwei Spalten breit wie bei echten Rechnern */
.calc-key.wide { grid-column: span 2; }  /* breite Aktionstaste (z. B. ⇄) */
.calc-key.full { grid-column: span 4; }  /* volle Breite (z. B. Start) */

/* Umrechner: zwei rechtsbündige Zeilen in der Anzeige */
.conv-lines { width: 100%; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.conv-main { font-size: 3rem; font-weight: 300; }
.conv-sub { font-size: 1.4rem; color: var(--muted); }

/* Auswahl der Darstellung bei der Einrichtung */
.skin-chooser, .name-chooser { display: flex; flex-wrap: wrap; gap: 8px; }
.skin-chooser button, .name-chooser button { flex: 1 1 calc(50% - 4px); padding: 10px 6px; }
.skin-chooser button.selected, .name-chooser button.selected { background: var(--accent); color: #fff; border-color: var(--accent); }
.look-extra { display: flex; flex-direction: column; gap: 8px; }
.look-extra[hidden] { display: none; }
.icon-chooser { display: flex; gap: 12px; }
.icon-chooser button { padding: 0; background: none; border: 3px solid transparent; border-radius: 18px; }
.icon-chooser button.selected { border-color: var(--accent); }
.icon-chooser img { display: block; width: 60px; height: 60px; border-radius: 14px; }
.card {
  width: 100%; max-width: 360px;
  margin: auto 0;        /* vertikal zentriert, bei Überlänge scrollbar statt abgeschnitten */
  flex: 0 0 auto;        /* Inhalt nicht stauchen */
  background: var(--panel);
  border-radius: 16px;
  padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
}
h1 { font-size: 1.3rem; margin: 0 0 4px; }
.sub { color: var(--muted); font-size: .9rem; margin: 0; }
.error { color: var(--err); font-size: .85rem; min-height: 1em; }
.warn {
  background: rgba(214,165,58,.12); border: 1px solid var(--idle);
  color: #f0d79a; border-radius: 10px; padding: 10px 12px; font-size: .85rem; line-height: 1.35;
}

input, textarea {
  font: inherit; color: var(--text);
  background: var(--panel-2); border: 1px solid #313a43; border-radius: 10px;
  padding: 12px 14px; outline: none; width: 100%;
}
input:focus, textarea:focus { border-color: var(--accent); }
.pin { letter-spacing: .15em; }

button { font: inherit; cursor: pointer; border: none; border-radius: 10px; padding: 12px 16px; }
.primary { background: var(--accent); color: #fff; font-weight: 600; }
.primary:active { background: var(--accent-2); }
.ghost { background: var(--panel-2); color: var(--text); border: 1px solid #313a43; }
.link { background: none; color: var(--muted); text-decoration: underline; padding: 6px; }
.small { padding: 6px 10px; }

/* Kopplung */
.qr { display: flex; justify-content: center; background: #fff; border-radius: 12px; padding: 10px; }
.qr svg { width: 100%; height: auto; max-width: 260px; display: block; }
.code-row { display: flex; gap: 8px; }
.code { font-size: .8rem; }
.status { color: var(--muted); font-size: .9rem; text-align: center; min-height: 1.2em; }
.safety {
  font-size: 2rem; font-weight: 700; letter-spacing: .1em;
  text-align: center; background: var(--panel-2); border-radius: 12px; padding: 12px;
}
.pair-block { display: flex; flex-direction: column; gap: 8px; }
.pair-code-big {
  font-size: 2.4rem; font-weight: 700; letter-spacing: .25em;
  text-align: center; background: var(--panel-2); border-radius: 12px;
  padding: 14px; color: var(--accent); font-variant-numeric: tabular-nums;
}
#pair-join-input { text-align: center; letter-spacing: .25em; font-size: 1.1rem; }

/* Chat */
.chat-header {
  display: flex; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top) + 12px) 12px 12px;
  background: var(--panel); border-bottom: 1px solid #272e35;
}
/* Statuszeile bleibt einzeilig und kürzt sich ab, statt umzubrechen und die Kopfzeile
   auf kleinen Bildschirmen aufzublähen. */
.chat-status {
  color: var(--muted); font-size: .9rem; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-header .ghost.small { flex: none; padding: 6px 9px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--off); flex: none; }
.dot.on { background: var(--ok); }
.dot.idle { background: var(--idle); }
.dot.off { background: var(--off); }

.messages {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.msg { max-width: 78%; display: flex; flex-direction: column; }
.msg.in { align-self: flex-start; align-items: flex-start; }
.msg.out { align-self: flex-end; align-items: flex-end; }
.bubble {
  padding: 9px 13px; border-radius: 16px; white-space: pre-wrap; word-break: break-word;
}
.msg.in .bubble { background: var(--in); border-bottom-left-radius: 5px; }
.msg.out .bubble { background: var(--out); border-bottom-right-radius: 5px; }
.meta { font-size: .7rem; color: var(--muted); margin-top: 3px; padding: 0 4px; }
.tick { color: var(--accent); }

.composer {
  display: flex; gap: 6px; padding: 10px 10px calc(env(safe-area-inset-bottom) + 10px);
  background: var(--panel); border-top: 1px solid #272e35;
  align-items: flex-end;
}
/* flex + min-width:0 lässt das Textfeld schrumpfen UND wieder wachsen, ohne dass der
   Platzhalter („Nachricht") umbricht, wenn mehrere Knöpfe daneben stehen. */
.composer textarea { flex: 1 1 auto; min-width: 0; resize: none; max-height: 120px; }
.send { flex: none; }
#chat-send { padding: 12px 14px; }
#chat-attach { font-size: 1.25rem; line-height: 1; padding: 10px 12px; }

/* Bildnachrichten */
.bubble.img { padding: 3px; background: var(--panel-2); border-radius: 14px; }
.msg.out .bubble.img { background: var(--out); }
.bubble.img img {
  display: block; max-width: 220px; max-height: 300px; width: auto; height: auto;
  border-radius: 12px; cursor: zoom-in;
}
.bubble.placeholder { color: var(--muted); font-style: italic; }

/* Sprachnachrichten */
.bubble.aud { padding: 6px 8px; background: var(--panel-2); }
.msg.out .bubble.aud { background: var(--out); }
.bubble.aud audio { display: block; width: 240px; max-width: 62vw; height: 40px; }

/* Aufnahmeleiste (ersetzt die Eingabezeile während der Aufnahme) */
.rec-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px calc(env(safe-area-inset-bottom) + 10px);
  background: var(--panel); border-top: 1px solid #272e35;
}
.rec-bar[hidden] { display: none; }
.rec-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--err); flex: none; animation: recpulse 1s ease-in-out infinite; }
.rec-time { font-variant-numeric: tabular-nums; color: var(--text); }
.rec-hint { color: var(--muted); flex: 1; font-size: .9rem; }
@keyframes recpulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
#chat-mic, #chat-cam { font-size: 1.2rem; line-height: 1; padding: 10px 11px; }

/* Sehr schmale Geräte (z. B. iPhone SE / mini): Knöpfe enger stellen, damit das
   Textfeld genug Platz behält. */
@media (max-width: 380px) {
  .composer { gap: 4px; padding-left: 8px; padding-right: 8px; }
  .composer .ghost.send { padding: 9px 9px; font-size: 1.1rem; }
  #chat-attach { padding: 9px 10px; }
  #chat-send { padding: 11px 12px; }
  .chat-header { gap: 6px; }
}

/* Videonachrichten */
.bubble.vid { padding: 3px; background: var(--panel-2); border-radius: 14px; }
.msg.out .bubble.vid { background: var(--out); }
.bubble.vid video { display: block; width: 240px; max-width: 62vw; border-radius: 12px; }

/* Video-Aufnahme (Vollbild-Overlay mit Kameravorschau) */
.vid-rec { position: fixed; inset: 0; z-index: 70; background: #000; display: flex; }
.vid-rec[hidden] { display: none; }
.vid-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.vid-preview.mirror { transform: scaleX(-1); }
.vid-top {
  position: absolute; top: 0; left: 0; right: 0;
  padding: calc(env(safe-area-inset-top) + 14px) 16px 14px; text-align: center;
}
.vid-top .rec-time {
  display: inline-block; background: rgba(0,0,0,.55); color: #fff;
  padding: 4px 12px; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.vid-controls {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px calc(env(safe-area-inset-bottom) + 24px); gap: 16px;
}
.vid-controls .ghost { background: rgba(0,0,0,.45); color: #fff; border: 1px solid rgba(255,255,255,.25); }
.vid-rec-btn {
  width: 72px; height: 72px; border-radius: 50%; flex: none; padding: 0;
  background: var(--err); border: 4px solid #fff; cursor: pointer;
}
.vid-rec-btn.recording { background: #fff; }
.vid-rec-btn.recording::after {
  content: ''; display: block; width: 26px; height: 26px; margin: 0 auto;
  background: var(--err); border-radius: 5px; /* Stopp-Quadrat */
}

/* Sprachanruf-Overlay */
.call-ui {
  position: fixed; inset: 0; z-index: 80; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 40px 24px calc(env(safe-area-inset-bottom) + 40px);
}
.call-ui[hidden] { display: none; }
.call-head { text-align: center; margin-bottom: 40px; }
.call-name { font-size: 2rem; font-weight: 600; }
.call-sub { color: var(--muted); font-size: 1.1rem; margin-top: 8px; font-variant-numeric: tabular-nums; }
.call-actions { display: flex; align-items: center; gap: 20px; }
.call-btn {
  min-width: 120px; padding: 16px 20px; border-radius: 999px;
  font-size: 1.05rem; font-weight: 600; background: var(--panel-2); color: var(--text);
}
.call-btn.ok { background: var(--ok); color: #06240f; }
.call-btn.end { background: var(--err); color: #3a0b0b; }
.call-btn.active { background: var(--accent); color: #fff; }
#call-mute { min-width: 0; width: 56px; height: 56px; padding: 0; font-size: 1.4rem; }
/* Stummgeschaltet unmissverständlich signalisieren (rot = Mikro aus). */
#call-mute.active { background: var(--err); color: #fff; }

/* Aktionsmenü im Chat (von unten eingeblendet) */
.sheet {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,.5);
  display: flex; align-items: flex-end; justify-content: center; padding: 16px;
}
.sheet[hidden] { display: none; }
.sheet-card {
  width: 100%; max-width: 360px;
  background: var(--panel); border-radius: 16px; padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: calc(env(safe-area-inset-bottom) + 8px);
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.sheet-card .danger { color: var(--err); }

/* Tarn-Fassade „Fotos“: unverfängliche Galerie der ersten Stufe */
.gallery {
  flex: 1; display: flex; flex-direction: column; background: var(--bg);
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; /* kein iOS-„Bild sichern“-Menü, keine Auswahl (Safari braucht das Präfix) */
}
.gal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 16px) 18px 14px;
  background: var(--panel); border-bottom: 1px solid #272e35;
}
.gal-title { font-size: 1.4rem; font-weight: 600; }
.gal-add {
  background: none; color: var(--text); font-size: 1.6rem; line-height: 1;
  padding: 4px 10px; border-radius: 10px;
}
.gal-add:active { background: var(--panel-2); }
.gal-empty {
  position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%);
  text-align: center; color: var(--muted); font-size: .95rem; line-height: 1.6; padding: 0 24px;
}
.gal-grid {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px;
  align-content: start;
}
.gal-cell {
  aspect-ratio: 1 / 1; padding: 0; border: none; border-radius: 0;
  background: var(--panel-2); overflow: hidden;
}
.gal-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Vollbild-Betrachter (eigenes Bild ansehen / löschen) */
.gal-viewer {
  position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.95);
  display: flex; align-items: center; justify-content: center;
}
.gal-viewer[hidden] { display: none; }
.gal-viewer img { max-width: 100%; max-height: 100%; }
.gal-viewer-close, .gal-viewer-del {
  position: absolute; top: calc(env(safe-area-inset-top) + 14px);
  background: rgba(0,0,0,.5); color: #fff; border-radius: 999px;
  width: 44px; height: 44px; font-size: 1.2rem; padding: 0;
}
.gal-viewer-close { left: 16px; }
.gal-viewer-del { right: 16px; top: auto; bottom: calc(env(safe-area-inset-bottom) + 20px); }

/* Geheime PIN-Oberfläche (erst nach der Geste sichtbar) */
.pin-overlay {
  position: fixed; inset: 0; z-index: 58; background: var(--bg);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.pin-overlay[hidden] { display: none; }
.pin-box { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; max-width: 300px; }
.pin-dots { display: flex; gap: 12px; min-height: 14px; align-items: center; }
.pin-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--text); }
.pin-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: 100%; }
.pin-key {
  aspect-ratio: 1 / 1; border-radius: 50%; background: var(--panel-2); color: var(--text);
  font-size: 1.6rem; padding: 0; display: flex; align-items: center; justify-content: center;
}
.pin-key:active { background: #313a43; }
.pin-key.eq { background: var(--accent); color: #fff; }
.pin-key.eq:active { background: var(--accent-2); }
.pin-cancel { margin-top: 4px; }
.pin-overlay.shake { animation: pinshake .4s ease; }
@keyframes pinshake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

/* Vollbild-Ansicht (Lightbox) */
.lightbox {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }