/* Camera-first layout; other pages keep their established stylesheet. */
:root {
  --bg: #070d17;
  --surface: #0b1423;
  --surface-2: #111c2d;
  --surface-3: #172338;
  --line: rgba(255, 255, 255, .12);
  --text: #f5f7fb;
  --muted: #9aa6b8;
  --purple: #7c5cff;
  --purple-soft: #a594ff;
  --green: #45d39a;
  --danger: #f04d55;
  --shadow: 0 24px 70px rgba(0, 0, 0, .42);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); }
button, select, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.topbar { height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; background: #08111f; border-bottom: 1px solid rgba(255, 255, 255, .05); position: relative; z-index: 20; }
.brand { display: inline-flex; align-items: center; color: var(--text); text-decoration: none; font-size: 21px; font-weight: 760; letter-spacing: -.7px; }
.brand-connect { color: var(--purple-soft); }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; margin-right: 9px; border-radius: 10px; background: var(--purple); font-weight: 900; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.menu-trigger, .avatar-button { border: 0; color: var(--text); background: transparent; cursor: pointer; }
.menu-trigger { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.menu-trigger i { font-size: 19px; }
/* Ein einziger Einstieg ins Hauptmenü: Kontokreis, Beschriftung und Pfeil in
   einem Knopf. Vorher öffneten der Hamburger und der Avatar dasselbe Panel. */
.avatar-button { display: flex; align-items: center; gap: 8px; padding: 3px 10px 3px 3px; border-radius: 999px; font-size: 13px; transition: background-color .18s ease; }
.avatar-button:hover { background: rgba(255, 255, 255, .07); }
.avatar-initial { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #121b47; font-size: 13px; }
.avatar-button > i { color: var(--muted); font-size: 15px; }

.camera-app { height: 100dvh; overflow: hidden; }
.camera-main { height: calc(100dvh - 54px); }
.screen { display: none; }
.screen.active { display: grid; }
.chat-screen { height: 100%; grid-template-rows: minmax(0, 1fr) 88px; background: #050a12; overflow: hidden; }
.video-stage { min-height: 0; position: relative; overflow: hidden; background: #121722; touch-action: pan-y; }
.video-card { position: absolute; overflow: hidden; background: transparent; }
.remote-card { inset: 0; z-index: 2; }
.remote-card > video, .local-card > video { width: 100%; height: 100%; object-fit: cover; background: transparent; }
.local-card { z-index: 4; right: 24px; bottom: 24px; width: clamp(260px, 21vw, 430px); aspect-ratio: 16 / 10; border: 1px solid rgba(255, 255, 255, .35); border-radius: 17px; box-shadow: 0 14px 34px rgba(0, 0, 0, .38); transition: width .32s ease, height .32s ease, inset .32s ease, border-radius .32s ease; }
.local-card > video { transform: scaleX(-1); }
.video-stage.rear-camera .local-card > video { transform: none; }
.video-card.is-pip { z-index: 4; inset: auto 24px 24px auto; width: clamp(260px, 21vw, 430px); height: auto; aspect-ratio: 16 / 10; border: 1px solid rgba(255, 255, 255, .35); border-radius: 17px; box-shadow: 0 14px 34px rgba(0, 0, 0, .38); cursor: grab; touch-action: none; transition: width .32s ease, height .32s ease, border-radius .32s ease; }
.video-card.is-pip.dragging { cursor: grabbing; transition: none; }
.pip-grip { display: none; }
.video-card.is-pip .pip-grip { position: absolute; z-index: 8; top: 8px; left: 50%; display: block; width: 28px; height: 4px; transform: translateX(-50%); border-radius: 99px; background: rgba(255,255,255,.72); box-shadow: 0 1px 5px rgba(0,0,0,.4); pointer-events: none; }
.video-stage.has-remote.layout-self-main .local-card { z-index: 2; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; }
.video-stage.has-remote.layout-self-main .remote-card.is-pip { z-index: 4; }
.video-stage.has-remote.layout-split .video-card { width: 50%; height: 100%; top: 0; bottom: auto; border: 0; border-radius: 0; box-shadow: none; aspect-ratio: auto; }
.video-stage.has-remote.layout-split .remote-card { left: 0; right: auto; }
.video-stage.has-remote.layout-split .local-card { left: 50%; right: auto; }
.video-stage.has-remote.layout-split.split-self-first .local-card { left: 0; }
.video-stage.has-remote.layout-split.split-self-first .remote-card { left: 50%; }
.video-stage.has-remote.layout-self-hidden .local-card { display: none; }
.video-stage:not(.has-remote) .local-card { z-index: 1; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; }
.video-stage:not(.has-remote) .flip-camera { display: none; }
.video-stage:not(.has-remote) .local-meta { left: auto; right: 22px; }
.video-meta { position: absolute; z-index: 5; top: 18px; left: 20px; display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: 12px; background: rgba(6, 12, 22, .58); backdrop-filter: blur(12px); }
.video-meta > span { font-size: 21px; }
.video-meta div { display: flex; flex-direction: column; }
.video-meta b { font-size: 12px; }
.video-meta small { color: #b2bccb; font-size: 10px; margin-top: 2px; }
.local-meta { top: 10px; left: 10px; padding: 6px 8px; }
.flip-camera { position: absolute; z-index: 6; right: 10px; bottom: 10px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; color: white; background: rgba(6, 12, 22, .78); cursor: pointer; }
.flip-camera i { font-size: 20px; }
.remote-state { position: absolute; z-index: 6; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; text-align: center; background: rgba(5, 9, 15, .12); }
.remote-state h2 { margin: 14px 0 5px; font-size: 18px; letter-spacing: -.3px; }
.remote-state p { max-width: 360px; margin: 0; color: #d1d6de; font-size: 12px; }
.video-stage.has-remote .remote-state { display: none; }
.video-stage:not(.has-remote) .remote-meta { display: none; }
.video-stage.camera-ready:not(.has-remote) .remote-state { justify-content: flex-start; padding-top: 32px; pointer-events: none; }
.video-stage.camera-off .local-card video { visibility: hidden; }
.local-card { background: #121722; }
.video-stage.camera-ready .search-ring { display: none; }
body:not([data-chat-state="searching"]) .status-spinner { animation: none; border-color: #6f7c92; }
body[data-chat-state="connected"] .status-spinner { border-color: var(--green); background: var(--green); width: 8px; height: 8px; flex-basis: 8px; box-shadow: 0 0 0 4px rgba(69, 211, 154, .18); }
button:disabled { opacity: .4; cursor: default; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--purple-soft); outline-offset: 3px; }
.resume-audio { position: absolute; z-index: 8; top: 18px; left: 50%; transform: translateX(-50%); border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: white; padding: 12px; cursor: pointer; }
.home-country-value { display: flex; align-items: center; gap: 10px; }
.menu-connection { display: grid; gap: 5px; margin: 15px; font-size: 12px; color: var(--muted); }
.accessible-gestures { position: absolute; z-index: 10; bottom: 15px; left: 15px; }
.accessible-gestures button:not(:focus) { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.accessible-gestures button:focus { padding: 12px; color: white; background: var(--surface); border: 1px solid var(--purple); }
.search-ring, .status-spinner { border-radius: 50%; border: 2px solid rgba(124, 92, 255, .35); border-top-color: var(--purple); animation: spin 1.1s linear infinite; }
.search-ring { width: 34px; height: 34px; }
.status-spinner { width: 18px; height: 18px; flex: 0 0 18px; }
.retry-camera { margin-top: 18px; border: 1px solid var(--line); border-radius: 9px; padding: 10px 13px; color: white; background: var(--surface-2); cursor: pointer; }
.moderation-badge { position: absolute; z-index: 6; left: 22px; bottom: 18px; display: flex; align-items: center; gap: 7px; padding: 7px 9px; color: #b8f4dd; background: rgba(7, 28, 24, .76); border-radius: 8px; font-size: 10px; }
.moderation-badge i { font-size: 15px; }

.call-friend-request { position: absolute; z-index: 14; top: 20px; left: 50%; width: min(560px, calc(100% - 40px)); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; transform: translateX(-50%); padding: 12px 14px; border: 1px solid rgba(165, 148, 255, .42); border-radius: 14px; background: rgba(9, 18, 32, .96); box-shadow: 0 16px 45px rgba(0, 0, 0, .48); backdrop-filter: blur(16px); }
.call-friend-request-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: #d7ceff; background: rgba(124, 92, 255, .22); }
.call-friend-request-icon i { font-size: 21px; }
.call-friend-request p { min-width: 0; margin: 0; color: #dce2eb; font-size: 13px; line-height: 1.4; }
.call-friend-request p strong { color: white; overflow-wrap: anywhere; }
.call-friend-request-actions { display: flex; align-items: center; gap: 6px; }
.call-friend-request-actions button { min-height: 34px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 9px; color: #e5e9f0; background: rgba(255, 255, 255, .07); font-size: 11px; font-weight: 700; cursor: pointer; }
.call-friend-request-actions button:hover:not(:disabled) { background: rgba(255, 255, 255, .13); }
.call-friend-request-actions .accept { border-color: rgba(124, 92, 255, .7); color: white; background: var(--purple); }
.call-friend-request-actions .accept:hover:not(:disabled) { background: #8d74ff; }
.call-friend-request-actions .quiet { border-color: transparent; color: var(--muted); background: transparent; }

/* Die untere Leiste hat drei Zonen: links Zielland und Status, in der Mitte die
   Gesprächstasten, rechts Ansicht und Einstellungen. Vorher standen alle Tasten
   zusammengedrängt am rechten Rand, wodurch breite Bildschirme in der Mitte leer
   wirkten und die farbigen Haupttasten zwischen den grauen Symbolen untergingen. */
.control-dock { position: relative; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 8px 22px; background: #0a1220; border-top: 1px solid rgba(255, 255, 255, .05); }
.match-strip { grid-column: 1; min-width: 0; display: grid; grid-template-columns: minmax(148px, 212px) minmax(0, 1fr); align-items: center; gap: 12px; }
.target-country-control { position: relative; display: block; min-width: 0; }
.country-flag { width: 24px; height: 18px; flex: 0 0 24px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); overflow: hidden; }
select { appearance: none; width: 100%; color: white; background: #111c2d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%239ba7ba' stroke-width='2'/%3E%3C/svg%3E") no-repeat calc(100% - 15px) center; border: 1px solid var(--line); padding: 14px 40px 14px 51px; border-radius: 11px; outline: 0; }
select:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(124, 92, 255, .14); }
select:disabled { opacity: .72; cursor: not-allowed; }
/* Das Zielland wird nicht mehr über die Systemliste eines <select> gewählt:
   bei 61 Einträgen zeigt die weder Flaggen noch eine Suche und sieht auf jedem
   Betriebssystem anders aus. Das <select> bleibt versteckt bestehen und bleibt
   die Wahrheit – die Kacheln unten schreiben nur hinein. */
.country-trigger { width: 100%; min-width: 0; display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 11px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 11px; background: rgba(255, 255, 255, .05); color: var(--text); font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background-color .18s ease, border-color .18s ease; }
.country-trigger:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .2); }
.country-trigger[aria-expanded="true"] { background: rgba(124, 92, 255, .16); border-color: rgba(124, 92, 255, .5); }
.country-trigger-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.country-caret { flex: 0 0 auto; font-size: 13px; color: var(--muted); transition: transform .18s ease; }
.country-trigger[aria-expanded="true"] .country-caret { transform: rotate(180deg); }

/* Die Auswahl klappt über das Videobild nach oben auf, weil die Leiste am
   unteren Rand klebt. Sie hängt an der Leiste, nicht am schmalen Knopf,
   damit das Raster die volle Breite nutzen kann. */
.country-picker { position: absolute; z-index: 12; left: 24px; bottom: calc(100% + 10px); width: min(614px, calc(100vw - 48px)); max-height: min(376px, 52vh); display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255, 255, 255, .16); border-radius: 16px; background: rgba(9, 18, 32, .98); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); backdrop-filter: blur(18px); animation: country-rise .16s ease-out; }
.country-picker[hidden] { display: none; }
@keyframes country-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.country-picker-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.country-search { position: relative; flex: 1; min-width: 0; }
.country-search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 15px; color: #7c88a0; pointer-events: none; }
.country-search input { width: 100%; height: 38px; padding: 0 12px 0 34px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; background: rgba(255, 255, 255, .05); color: var(--text); font-size: 13px; outline: 0; }
.country-search input::placeholder { color: #7c88a0; }
.country-search input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(124, 92, 255, .2); }
.country-picker .dialog-close { width: 34px; height: 34px; flex: 0 0 34px; }
.country-scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.country-any { width: calc(100% - 20px); display: flex; align-items: center; gap: 11px; margin: 10px 10px 4px; padding: 11px 12px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 11px; background: rgba(255, 255, 255, .04); color: #dce2eb; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer; }
.country-any-text { flex: 1; min-width: 0; }
.country-any small { display: block; margin-top: 2px; color: #8b95a8; font-size: 10.5px; font-weight: 400; }
.country-any:hover, .country-any.active { background: rgba(255, 255, 255, .09); color: white; }
.country-any[aria-selected="true"] { border-color: rgba(124, 92, 255, .45); background: rgba(124, 92, 255, .18); color: #c9bcff; }
.country-globe { width: 24px; height: 18px; flex: 0 0 24px; display: grid; place-items: center; border-radius: 3px; background: rgba(124, 92, 255, .2); color: var(--purple-soft); font-size: 14px; }
.country-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 2px; padding: 6px 10px 12px; }
.country-option { min-height: 40px; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 0; border-radius: 9px; background: transparent; color: #dce2eb; font-size: 13px; text-align: left; cursor: pointer; }
.country-option-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.country-option:hover, .country-option.active { background: rgba(255, 255, 255, .07); color: white; }
.country-option[aria-selected="true"] { background: rgba(124, 92, 255, .17); color: #c9bcff; }
.country-any.active, .country-option.active { box-shadow: inset 0 0 0 1px rgba(124, 92, 255, .55); }
.country-check { flex: 0 0 auto; font-size: 14px; color: var(--purple-soft); opacity: 0; }
[aria-selected="true"] > .country-check { opacity: 1; }
.country-empty { margin: 0; padding: 26px 14px; color: #7c88a0; font-size: 12.5px; text-align: center; }
.country-picker-foot { display: flex; justify-content: space-between; gap: 10px; padding: 9px 14px; border-top: 1px solid rgba(255, 255, 255, .08); color: #7c88a0; font-size: 10.5px; }
.match-status { justify-self: start; max-width: 100%; min-width: 0; display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 14px 0 12px; border: 1px solid rgba(255, 255, 255, .06); border-radius: 999px; background: rgba(255, 255, 255, .03); color: #c6cdda; font-size: 11px; }
.match-status > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Die Hülle verschwindet aus dem Raster, damit die beiden Gruppen selbst zu
   Rasterfeldern werden – mittig die Gesprächstasten, rechts die Ansichtstasten. */
.desktop-controls { display: contents; }
.control-cluster { display: flex; align-items: center; gap: 4px; }
.call-cluster { grid-column: 2; justify-self: center; }
.view-cluster { grid-column: 3; justify-self: end; }
.mobile-controls { display: none; }
.control-button { width: 64px; height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; padding: 0 2px 4px; border: 0; border-radius: 13px; color: #c3ccdb; background: transparent; cursor: pointer; transition: color .18s ease; }
/* Alle Beschriftungen sitzen auf einer Linie, weil die Tasten unten ausgerichtet
   sind; nur die runden Flächen darüber sind unterschiedlich groß. */
.control-button i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; font-size: 20px; transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.control-button span { font-size: 10px; line-height: 1; letter-spacing: .2px; }
.control-button:hover:not(:disabled) { color: var(--text); }
.control-button:hover:not(:disabled) i { background: rgba(255, 255, 255, .1); }
.control-button:active:not(:disabled) i { transform: scale(.94); }
.control-button:disabled { cursor: default; }
.control-button.off { color: #ffb3b8; }
.control-button.off i { background: rgba(240, 77, 85, .16); }
.layout-control.active { color: var(--purple-soft); }
.layout-control.active i { background: rgba(124, 92, 255, .18); }
.call-cluster .control-stop { margin-left: 6px; }
.control-stop i, .control-next i { width: 44px; height: 44px; color: white; font-size: 22px; }
.control-stop i { background: linear-gradient(180deg, #ff6f76, #e63f48); box-shadow: 0 6px 16px rgba(230, 63, 72, .3); }
.control-next i { background: linear-gradient(180deg, #9179ff, #6c48ff); box-shadow: 0 6px 18px rgba(108, 72, 255, .36); }
.control-stop:hover:not(:disabled) i { background: linear-gradient(180deg, #ff8087, #ea4a53); box-shadow: 0 11px 24px rgba(230, 63, 72, .44); transform: translateY(-1px); }
.control-next:hover:not(:disabled) i { background: linear-gradient(180deg, #a591ff, #7856ff); box-shadow: 0 12px 26px rgba(108, 72, 255, .52); transform: translateY(-1px); }
.control-stop:disabled i, .control-next:disabled i { box-shadow: none; }
.control-stop:disabled { opacity: .42; cursor: default; }

.swipe-hint { display: none; }
@media (min-width: 851px) and (max-width: 1150px) {
  .control-dock { gap: 12px; padding: 8px 14px; }
  .match-strip { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .target-country-control { width: min(100%, 208px); }
  .country-trigger { height: 36px; font-size: 12.5px; }
  .country-picker { left: 16px; width: min(614px, calc(100vw - 32px)); }
  .match-status { height: 32px; padding: 0 12px 0 10px; }
  .control-cluster { gap: 0; }
  .call-cluster .control-stop { margin-left: 4px; }
  .control-button { width: 58px; height: 56px; }
  .control-button i { width: 36px; height: 36px; font-size: 19px; }
  .control-stop i, .control-next i { width: 42px; height: 42px; font-size: 21px; }
}

dialog { border: 0; padding: 0; color: var(--text); background: transparent; }
dialog::backdrop { background: rgba(2, 5, 10, .72); backdrop-filter: blur(4px); }
.dialog-card { width: min(420px, calc(100vw - 28px)); padding: 28px; border: 1px solid var(--line); border-radius: 18px; color: var(--text); background: var(--surface); box-shadow: var(--shadow); text-align: center; }
.dialog-card h3 { margin: 14px 0 5px; }
.dialog-card p { color: var(--muted); font-size: 13px; }
.dialog-icon { width: 42px; height: 42px; display: grid; place-items: center; margin: auto; border-radius: 12px; color: #ff9ea5; background: rgba(240, 77, 85, .13); }
.dialog-icon i { font-size: 21px; }
.reason-list { display: grid; gap: 8px; margin: 20px 0; }
.reason-list button, .cancel-button { padding: 12px; border: 1px solid var(--line); border-radius: 10px; color: white; background: var(--surface-2); cursor: pointer; }
.reason-list button:hover { border-color: var(--danger); }
.cancel-button { width: 100%; color: var(--muted); background: transparent; }
.primary-button { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 15px 17px; border: 0; border-radius: 11px; color: white; background: var(--purple); box-shadow: 0 10px 25px rgba(124, 92, 255, .18); font-weight: 800; cursor: pointer; }
.primary-button:disabled { opacity: .55; cursor: wait; }

/* Zentrale Einstellungen: ein scrollbares Overlay über der Kameraansicht. */
.settings-dialog { width: min(480px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); overflow: hidden; }
.settings-panel { display: flex; flex-direction: column; max-height: calc(100dvh - 32px); }
.settings-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.settings-head h3 { margin: 0; font-size: 17px; }
.settings-body { min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 6px 20px 20px; }
.settings-group { min-width: 0; padding: 15px 0; border-bottom: 1px solid var(--line); }
.settings-group:last-of-type { border-bottom: 0; }
.settings-group h4 { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .2px; }
.settings-group h4 i { font-size: 17px; color: var(--purple-soft); }
.settings-field { display: grid; gap: 7px; min-width: 0; margin-bottom: 12px; color: #d8deea; font-size: 12px; font-weight: 700; }
.settings-field select { max-width: 100%; padding-left: 14px; }
.settings-help { display: block; color: var(--muted); font-size: 10px; line-height: 1.5; margin: -4px 0 10px; }
.settings-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.settings-toggle { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; color: #dce2eb; background: var(--surface-2); font: inherit; font-size: 12px; cursor: pointer; }
.settings-toggle i { font-size: 18px; }
.settings-toggle:hover:not(:disabled) { border-color: var(--purple); }
.settings-toggle.off { color: #ffb1b6; border-color: rgba(240, 77, 85, .3); background: rgba(240, 77, 85, .12); }
.settings-toggle:disabled { opacity: .45; cursor: default; }
.settings-row-link { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; color: #dce2eb; background: var(--surface-2); font: inherit; font-size: 13px; cursor: pointer; }
.settings-row-link span { display: inline-flex; align-items: center; gap: 10px; }
.settings-row-link i { font-size: 18px; color: #9aa6b8; }
.settings-row-link:hover { border-color: var(--purple); color: white; }
.settings-static-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; margin-top: 8px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; color: #dce2eb; background: var(--surface-2); font-size: 13px; }
.settings-static-row span { display: inline-flex; align-items: center; gap: 10px; }
.settings-static-row i { color: #9aa6b8; font-size: 18px; }
.settings-static-row strong { color: var(--muted); font-size: 11px; font-weight: 600; }
.settings-visibility { min-width: 0; margin: 0; padding: 0; border: 0; }
.settings-visibility legend { padding: 0; font-size: 13px; font-weight: 700; }
.settings-choice { display: flex; gap: 11px; align-items: center; padding: 11px 12px; margin: 9px 0 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); cursor: pointer; }
.settings-choice:has(input:checked) { border-color: var(--purple); background: rgba(124, 92, 255, .12); }
.settings-choice input { flex: none; margin-top: 2px; accent-color: var(--purple); }
.settings-choice > span { min-width: 0; }
.settings-choice strong { display: block; font-size: 13px; }
.settings-choice small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.settings-msg { margin: 6px 0 0; font-size: 11px; min-height: 14px; }
.settings-msg:empty { display: none; }
.settings-msg.success { color: var(--green); }
.settings-msg.error { color: #ffb1b6; }
.settings-foot { padding: 16px 0 4px; }
.settings-dialog .primary-button { box-shadow: none; }
@media (max-width: 560px) {
  .settings-dialog { width: 100%; max-width: 100%; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; }
  .settings-panel { width: 100%; max-height: none; height: 100dvh; }
  .settings-body { padding: 4px 16px calc(24px + env(safe-area-inset-bottom)); }
  .settings-head { padding: 16px 16px 14px; }
  .settings-toggle { flex-basis: 100%; }
}

/* Breite am <dialog> selbst (wie bei den übrigen Dialogen), damit die native
   Zentrierung nicht von der Innenbreite abhängt. */
.onboarding-dialog { width: min(360px, calc(100vw - 24px)); max-width: none; margin: auto; }
.onboarding-dialog .dialog-card { text-align: left; width: 100%; padding: 22px; }
.onboarding-icon { width: 34px; height: 34px; color: #ffd479; background: rgba(255, 200, 90, .14); }
.onboarding-icon i { font-size: 17px; }
.onboarding-card > h3 { margin: 10px 0 0; font-size: 16px; text-align: center; }
.onboarding-steps { list-style: none; margin: 14px 0 16px; padding: 0; display: grid; gap: 9px; }
.onboarding-steps li { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.4; color: var(--text); }
.onboarding-steps li i { flex: none; font-size: 16px; color: var(--purple); margin-top: 1px; }
.onboarding-steps li strong { font-weight: 700; }
.onboarding-steps li em { font-style: normal; color: var(--muted); }
.onboarding-card .primary-button { width: auto; min-width: 150px; margin: 4px auto 0; justify-content: center; padding: 10px 22px; box-shadow: none; font-size: 13px; font-weight: 700; }

.layout-dialog { width: min(360px, calc(100vw - 28px)); max-width: none; margin: 0; inset: auto 24px 100px auto; overflow: visible; }
.layout-dialog::backdrop { background: transparent; backdrop-filter: none; }
.layout-palette { overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; background: rgba(9,18,32,.97); box-shadow: 0 20px 55px rgba(0,0,0,.48); backdrop-filter: blur(18px); }
.layout-palette > header { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 8px 18px; }
.layout-palette h3 { margin: 0; font-size: 15px; }
.layout-palette .dialog-close { width: 34px; height: 34px; }
.layout-options { display: grid; padding: 4px 10px 11px; }
.layout-options > button { min-height: 54px; display: grid; grid-template-columns: 30px 1fr 24px; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-bottom: 1px solid rgba(255,255,255,.07); color: #dce2eb; background: transparent; text-align: left; cursor: pointer; }
.layout-options > button:hover, .layout-options > button[aria-pressed="true"] { color: white; background: rgba(124,92,255,.1); }
.layout-options > button > i:first-child { color: #aeb9c9; font-size: 22px; }
.layout-options > button[aria-pressed="true"] > i:first-child, .layout-options > button[aria-pressed="true"] strong { color: var(--purple-soft); }
.layout-options > button > span { display: grid; gap: 2px; }
.layout-options strong { font-size: 13px; }
.layout-options small { color: var(--muted); font-size: 10px; }
.layout-check { color: var(--purple-soft); opacity: 0; }
.layout-options > button[aria-pressed="true"] .layout-check { opacity: 1; }
.split-order { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 8px 10px 11px 50px; border-bottom: 1px solid rgba(255,255,255,.07); color: var(--muted); font-size: 10px; }
.split-order > div { display: flex; padding: 2px; border-radius: 8px; background: #162238; }
.split-order button { padding: 7px 9px; border: 0; border-radius: 6px; color: #b8c1cf; background: transparent; font-size: 10px; cursor: pointer; }
.split-order button[aria-pressed="true"] { color: white; background: var(--purple); }

.side-dialog { width: min(370px, 100vw); max-width: none; height: 100dvh; max-height: none; margin: 0 0 0 auto; }
.menu-panel { min-height: 100%; display: flex; flex-direction: column; padding: 24px; background: #091220; border-left: 1px solid var(--line); box-shadow: -24px 0 60px rgba(0, 0, 0, .35); }
.menu-panel > header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.menu-panel > header div { display: flex; flex-direction: column; gap: 3px; }
.menu-panel > header .menu-identity { flex-direction: row; align-items: center; gap: 12px; min-width: 0; }
.menu-identity > div { min-width: 0; }
.menu-identity strong { overflow-wrap: anywhere; font-size: 15px; }
.menu-avatar { display: grid; place-items: center; width: 43px; height: 43px; flex-shrink: 0; border-radius: 50%; color: #c8bcff; background: #1d2141; font-size: 19px; }
.menu-hint { color: #8291a6; font-size: 10px; line-height: 1.6; margin: 15px 14px 0; }
.menu-panel small { color: var(--muted); font-size: 10px; }
.dialog-close { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border: 0; border-radius: 9px; color: white; background: var(--surface-2); cursor: pointer; }
.dialog-close i { font-size: 18px; }
.main-navigation { display: grid; gap: 3px; }
.main-navigation a, .main-navigation button, .logout-button, .menu-group > button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; border-radius: 9px; color: #dce2eb; background: transparent; text-decoration: none; text-align: left; font: inherit; font-size: 14px; cursor: pointer; }
.main-navigation i, .logout-button i, .menu-group > button i { width: 22px; font-size: 20px; color: #9aa6b8; }
.main-navigation .active, .main-navigation a:hover, .main-navigation button:hover, .menu-group > button:not(:disabled):hover { color: white; background: var(--surface-2); }
.menu-group { display: grid; gap: 3px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.menu-section-label { margin: 0 0 2px 14px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.menu-group > button:disabled { opacity: .4; cursor: default; }
.menu-country { display: flex; flex-direction: column; gap: 5px; margin-top: 22px; padding: 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
#install-slot { margin-top: auto; }
.logout-button { margin-top: 10px; color: #ffadb2; }
.install-app-button.install-menu-button { position: static; width: 100%; justify-content: flex-start; border-radius: 9px; box-shadow: none; background: var(--surface-2); }

.install-app-button { position: fixed; z-index: 19; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 8px; padding: 11px 15px; border: 1px solid var(--line); border-radius: 999px; color: white; background: var(--purple); box-shadow: var(--shadow); font-size: 12px; font-weight: 800; cursor: pointer; }
.install-icon { color: #c9bcff; background: rgba(124, 92, 255, .14); }
.install-online-note { margin: 18px 0 !important; color: #7f8b9d !important; font-size: 10px !important; }

#toast { position: fixed; z-index: 40; left: 50%; bottom: 22px; transform: translate(-50%, 18px); padding: 11px 16px; border-radius: 9px; color: #101725; background: white; box-shadow: var(--shadow); font-size: 12px; font-weight: 750; opacity: 0; pointer-events: none; transition: opacity .24s ease, transform .24s ease; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Shared styles used by login, profile and moderation pages. */
.ambient { position: fixed; width: 350px; height: 350px; border-radius: 50%; filter: blur(120px); opacity: .18; pointer-events: none; }
.ambient-one { left: -150px; top: 15%; background: var(--purple); }
.ambient-two { right: -170px; bottom: 2%; background: #1aa59a; }
.glass-card { border: 1px solid var(--line); border-radius: 24px; background: #111a2a; box-shadow: var(--shadow); }
.eyebrow { margin-bottom: 15px; color: var(--purple-soft); font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.fixed-country { min-height: 49px; display: flex; align-items: center; gap: 12px; padding: 14px 15px; border: 1px solid var(--line); border-radius: 11px; color: white; background: #111a29; }
.fixed-country strong { font-size: 14px; }
.country-select-wrap { position: relative; width: 100%; }
.country-select-wrap > .country-flag { position: absolute; z-index: 1; left: 15px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.country-select-wrap select { padding-left: 52px; }

@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 850px) {
  .call-friend-request { top: auto; right: 12px; bottom: 14px; left: 12px; width: auto; grid-template-columns: auto minmax(0, 1fr); gap: 9px 10px; transform: none; padding: 11px 12px; }
  .call-friend-request-icon { width: 34px; height: 34px; }
  .call-friend-request-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); }
  .call-friend-request-actions button { min-height: 36px; }
  .topbar { height: calc(48px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 16px 0; }
  .brand { font-size: 20px; }
  .menu-trigger span { display: none; }
  .top-actions { gap: 8px; }
  .avatar-button { gap: 7px; padding-right: 9px; }
  .avatar-initial { width: 32px; height: 32px; }
  .camera-main { height: calc(100dvh - 48px - env(safe-area-inset-top)); }
  .chat-screen { grid-template-rows: minmax(0, 1fr) calc(110px + env(safe-area-inset-bottom)); }
  .local-card { right: 16px; top: 18px; bottom: auto; width: 112px; height: 150px; aspect-ratio: auto; border-radius: 14px; }
  .video-card.is-pip { inset: 18px 16px auto auto; width: 112px; height: 150px; aspect-ratio: auto; border-radius: 14px; }
  .video-stage.has-remote.layout-split .video-card { left: 0; right: auto; width: 100%; height: 50%; }
  .video-stage.has-remote.layout-split .remote-card { top: 0; }
  .video-stage.has-remote.layout-split .local-card { top: 50%; }
  .video-stage.has-remote.layout-split.split-self-first .local-card { top: 0; left: 0; }
  .video-stage.has-remote.layout-split.split-self-first .remote-card { top: 50%; left: 0; }
  .local-meta { display: none; }
  .flip-camera { display: none !important; }
  .remote-meta { top: 12px; left: 12px; }
  .moderation-badge { display: none; }
  /* Oben andocken, damit der KI-Hinweis nicht den Wischhinweis oder die
     Freundschaftskarte am unteren Rand überlagert. */
  .ai-moderation-overlay { top: 56px; bottom: auto; }
  .remote-state { justify-content: flex-end; padding-bottom: 38px; }
  .remote-state h2 { font-size: 16px; }
  /* Keep idle camera views free of permanent swipe instructions. */
  body[data-chat-state="idle"] .camera-ready .remote-state { display: none; }
  .control-dock { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 7px; padding: 7px 14px calc(7px + env(safe-area-inset-bottom)); }
  .match-strip { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 12px; }
  .country-trigger { height: 36px; gap: 7px; padding: 0 9px; font-size: 12px; border-radius: 10px; }
  .country-trigger .country-flag { width: 20px; flex-basis: 20px; height: 15px; }
  .country-picker { left: 14px; width: calc(100vw - 28px); max-height: min(340px, 46vh); }
  .country-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .match-status { height: 34px; padding: 0 11px 0 9px; font-size: 11px; }
  .desktop-controls { display: none; }
  .mobile-controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .mobile-controls .control-button { width: 100%; min-width: 0; height: 48px; justify-content: center; gap: 3px; padding: 0; border-radius: 12px; background: rgba(255, 255, 255, .05); }
  .mobile-controls .control-button i { width: auto; height: auto; border-radius: 0; background: none; font-size: 21px; }
  .mobile-controls .control-button:hover:not(:disabled) { background: rgba(255, 255, 255, .1); }
  .mobile-controls .control-button.off { background: rgba(240, 77, 85, .16); }
  .mobile-controls .layout-control.active { color: var(--purple-soft); background: rgba(124, 92, 255, .18); }
  .mobile-controls .control-button span { font-size: 10px; letter-spacing: .1px; }
  .layout-dialog { inset: auto 12px calc(118px + env(safe-area-inset-bottom)) auto; width: min(350px, calc(100vw - 24px)); }
  .layout-palette { border-radius: 15px; }
  .layout-palette > header { padding-top: 11px; }
  .layout-options > button { min-height: 50px; }
  .split-order { grid-template-columns: 1fr auto; padding-left: 50px; }
  .swipe-hint { position: absolute; z-index: 9; left: 24px; right: 24px; bottom: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; color: rgba(255, 255, 255, .88); opacity: 0; transform: translateY(8px); transition: opacity .9s ease, transform .9s ease; pointer-events: none; text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }
  .swipe-hint.is-visible { opacity: 1; transform: translateY(0); }
  .swipe-hint.is-hiding { opacity: 0; transform: translateY(8px); }
  .swipe-hint > div { display: flex; align-items: center; gap: 7px; font-size: 12px; }
  .swipe-hint > div:nth-child(2) { justify-content: flex-end; }
  .swipe-hint i { font-size: 27px; }
  .swipe-hint p { grid-column: 1 / -1; margin: 2px 0 0; color: rgba(255, 255, 255, .72); font-size: 10px; text-align: center; }
  .video-stage.swipe-left { animation: swipeLeft .28s ease; }
  .video-stage.swipe-right { animation: swipeRight .28s ease; }
  .install-app-button:not(.install-menu-button) { right: 12px; bottom: 12px; }
}

@media (max-width: 420px) {
  .topbar { padding: env(safe-area-inset-top) 14px 0; }
  .brand { font-size: 19px; }
  .chat-screen { grid-template-rows: minmax(0, 1fr) calc(108px + env(safe-area-inset-bottom)); }
  .control-dock { padding-left: 12px; padding-right: 12px; }
  .country-picker { left: 12px; width: calc(100vw - 24px); }
  .match-strip { gap: 8px; }
  .status-spinner { width: 15px; height: 15px; flex-basis: 15px; }
  .swipe-hint { left: 16px; right: 16px; bottom: 14px; }
}

@keyframes swipeLeft { 50% { transform: translateX(-7%); opacity: .72; } }
@keyframes swipeRight { 50% { transform: translateX(7%); opacity: .72; } }
@media (max-height: 500px) and (max-width: 850px) {
  .chat-screen { grid-template-rows: minmax(0, 1fr) 78px; }
  .control-dock { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; gap: 12px; padding: 8px 14px; }
  .match-strip { grid-template-columns: 1fr; gap: 5px; }
  .mobile-controls .control-button { height: 46px; }
  .local-card { width: 95px; height: 110px; }
  .video-card.is-pip { width: 95px; height: 110px; }
  .layout-dialog { bottom: 84px; }
  .country-picker { max-height: calc(100vh - 150px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Breite Bildschirme: Das Kamerabild füllt die Fläche wieder vollständig aus.
   Vorher stand es mit "contain" mittig, wodurch links und rechts breite
   schwarze Streifen übrig blieben. Seit der Chat die rechte Spalte belegt, ist
   die Videofläche nur noch etwa 16:9 breit – "cover" schneidet dadurch kaum
   noch etwas ab, anders als früher auf der 2,5:1 breiten Fläche. */
@media (min-width: 851px) {
  /* Der Hinweistext lag mitten im Gesicht. Ein Verlauf nach oben macht ihn
     lesbar, ohne das ganze Bild abzudunkeln. */
  .video-stage.camera-ready:not(.has-remote) .remote-state {
    background: linear-gradient(180deg, rgba(5, 9, 15, .62) 0%, rgba(5, 9, 15, .28) 38%, rgba(5, 9, 15, 0) 68%);
  }
}

/* Textchat im Gespräch. Übernommen aus dem Branch local-import
   (Commit 4fbd799) und hier auf den aktuellen Stand gesetzt. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.chat-trigger { position: relative; }
.chat-unread { position: absolute; top: -8px; right: -9px; min-width: 19px; height: 19px; display: grid; place-items: center; padding: 0 5px; border-radius: 999px; color: white; background: var(--danger); font-size: 10px; line-height: 1; }
.call-workspace { min-height: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
.call-workspace.chat-visible { grid-template-columns: minmax(0, 1fr) 320px; }
.call-chat { min-height: 0; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border-left: 1px solid rgba(255, 255, 255, .05); background: #070d17; }
.call-chat > header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.call-chat > header > div { display: grid; gap: 2px; }
.call-chat > header strong { font-size: 13px; }
.call-chat > header small { color: var(--muted); font-size: 10px; }
.call-chat > header button { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 9px; color: white; background: var(--surface-2); cursor: pointer; }
.call-chat-messages { min-height: 0; display: flex; flex-direction: column; gap: 9px; overflow-y: auto; padding: 14px; }
.call-chat-empty { margin: auto 18px; color: var(--muted); font-size: 11px; line-height: 1.5; text-align: center; }
.call-chat-message { max-width: 84%; margin: 0; padding: 10px 12px; border-radius: 13px; color: white; background: var(--surface-3); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; white-space: pre-wrap; }
.call-chat-message.own { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--purple); }
.call-chat-message.remote { align-self: flex-start; border-bottom-left-radius: 4px; }
.call-chat-form { display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: 8px; padding: 10px; border-top: 1px solid rgba(255, 255, 255, .05); }
.call-chat-form input { min-width: 0; border: 1px solid var(--line); border-radius: 11px; padding: 11px 12px; color: white; background: var(--surface-2); outline: 0; }
.call-chat-form input:focus { border-color: var(--purple); }
.call-chat-form button { border: 0; border-radius: 11px; color: white; background: var(--purple); cursor: pointer; }
.call-chat-form button i { font-size: 19px; }

/* Auf dem Handy liegt der Chat unter dem Video statt daneben. */
@media (max-width: 850px) {
  .call-workspace.chat-visible { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) min(42%, 250px); }
  .call-chat { border-left: 0; border-top: 1px solid var(--line); }
  .call-chat > header { padding: 5px 12px; }
  .call-chat > header small, .call-chat-empty { display: none; }
  .call-chat-messages { padding: 8px 12px; gap: 5px; }
  .call-chat-form { padding: 6px 10px; }
  .call-chat-form input { font-size: 16px; padding: 8px; }
}

/* Im Querformat ist wieder nebeneinander sinnvoller. */
@media (max-height: 500px) and (max-width: 850px) {
  .call-workspace.chat-visible { grid-template-columns: minmax(0, 1fr) min(42%, 300px); grid-template-rows: minmax(0, 1fr); }
}

/* Am Computer ist der Chat fest angedockt: Er füllt dauerhaft die rechte
   Spalte und lässt sich nicht mehr öffnen oder schließen. Vorher blieb dort
   nur ein schwarzer Streifen neben dem Videobild übrig. */
@media (min-width: 851px) {
  .call-workspace,
  .call-workspace.chat-visible { grid-template-columns: minmax(0, 1fr) clamp(296px, 23vw, 380px); }
  .call-chat,
  .call-chat[hidden] { display: grid !important; }
  /* Ohne Öffnen und Schließen braucht es weder den Knopf oben noch das Kreuz. */
  .chat-trigger,
  #call-chat-close { display: none; }
  .call-chat > header { padding: 13px 16px; }
}
.call-chat-form input:disabled { opacity: .55; cursor: not-allowed; }
.call-chat-form button:disabled { opacity: .45; cursor: default; }

/* 50 / 50 gilt am Computer schon vor dem Verbinden: Die eigene Kamera bleibt
   auf ihrer Hälfte, die andere Hälfte ist der Platz der noch fehlenden Person.
   Vorher füllte das eigene Bild die ganze Fläche und sprang beim Verbinden auf
   die Hälfte zurück. */
@media (min-width: 851px) {
  .video-stage.layout-split:not(.has-remote) .local-card {
    z-index: 4; inset: 0 0 0 50%; width: auto; height: auto; aspect-ratio: auto;
    border: 0; border-radius: 0; box-shadow: none;
  }
  .video-stage.layout-split:not(.has-remote) .remote-card { inset: 0 50% 0 0; background: #0e1626; }
  .video-stage.layout-split.split-self-first:not(.has-remote) .local-card { inset: 0 50% 0 0; }
  .video-stage.layout-split.split-self-first:not(.has-remote) .remote-card { inset: 0 0 0 50%; }
  /* Auf der leeren Hälfte braucht der Hinweistext keinen Verlauf und steht mittig. */
  .video-stage.layout-split.camera-ready:not(.has-remote) .remote-state {
    justify-content: center; padding-top: 30px; background: none;
  }
}

/* KI-Moderation: Hinweis und Test-Schalter als Overlay über dem Video, damit sie
   das Grid der Kameraansicht nicht verschieben. */
.ai-moderation-overlay {
  position: absolute; z-index: 7; left: 12px; right: 12px; bottom: 16px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  pointer-events: none;
}
.ai-moderation-overlay > * { pointer-events: auto; }
.ai-moderation-notice {
  margin: 0; width: fit-content; max-width: 360px; border-radius: 9px;
  background: rgba(14, 18, 27, 0.78); color: #cdc4ff;
  backdrop-filter: blur(6px);
  font-size: 11px; line-height: 1.45;
}
.ai-moderation-notice > summary {
  list-style: none; display: block; padding: 6px 10px; cursor: pointer;
}
.ai-moderation-notice > summary::-webkit-details-marker { display: none; }
.ai-moderation-more { color: #a9c7ff; font-weight: 700; white-space: nowrap; }
.ai-moderation-more::before { content: " · "; color: #7c88a0; font-weight: 400; }
.ai-moderation-notice[open] .ai-moderation-more { color: #8ea9d8; }
.ai-moderation-notice > p { margin: 0; padding: 0 10px 8px; color: #b7b0d8; }
.ai-moderation-sim {
  margin: 0; padding: 4px 9px;
  border: 1px dashed rgba(255, 209, 114, 0.5); border-radius: 8px;
  background: rgba(14, 18, 27, 0.78); color: #ffd172;
  backdrop-filter: blur(6px);
  font: inherit; font-size: 10.5px; font-weight: 700; cursor: pointer;
}