@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Nunito:wght@400;600;700&display=swap');

:root {
  --bg0: #eef4ff;
  --bg1: #f7eef8;
  --bg2: #e8faf4;
  --bg-spot-1: #dfe7ff;
  --bg-spot-2: #f6d9ea;
  --bg-spot-3: #d8f5ef;
  --ink: #243044;
  --muted: #3f5270;
  --card: rgba(255, 255, 255, 0.55);
  --stroke: rgba(255, 255, 255, 0.65);
  --accent: #7c8cff;
  --accent-2: #57c5b6;
  --online: #2a9b7a;
  --rose: #e8a0bf;
  --danger: #d4546a;
  --shadow: 0 20px 60px rgba(70, 90, 140, 0.14);
  --input-bg: rgba(255, 255, 255, 0.8);
  --input-border: rgba(90, 110, 150, 0.22);
  /* Farbring-Token (Avatar-Ring hsl H 55% 55%); Bubbles = dunkler/schwächer */
  --msg-ring: hsl(210 55% 55%);
  /* Aussenkontur eigener Bubbles: nur #fff oder #000 (msgRimCss) */
  --msg-rim: #fff;
  /* Umrandung eigener Bubbles/Avatar: Nuance heller/dunkler als Farbring */
  --msg-ring-edge: hsl(210 58% 40%);
  /* Bubble-Text ≈ Body-Schrift (Browser-Default ~16px); Admin: msg_font_size */
  --msg-font-size: 16px;
  /* Fremde: Farbring-Wash an persönliche Farbe angelehnt (opaque, lesbar) */
  --msg-bg: color-mix(in srgb, var(--msg-ring) 26%, #c8d0de);
  /* Meine: klarer Farbring-Anteil aus den Profileinstellungen */
  --msg-mine-bg: color-mix(in srgb, var(--msg-ring) 34%, #d4dae6);
  --composer-bg: rgba(255, 255, 255, 0.35);
  --bar-bg: rgba(255, 255, 255, 0.88);
  --btn-secondary-bg: rgba(255, 255, 255, 0.7);
  --surface-soft: rgba(255, 255, 255, 0.4);
  --divider: rgba(90, 110, 150, 0.12);
  --nav-hover: rgba(124, 140, 255, 0.15);
  --radius: 22px;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Nunito', system-ui, sans-serif;
  --app-vh: 100dvh;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --titlebar-area-x: env(titlebar-area-x, 0px);
  --titlebar-area-y: env(titlebar-area-y, 0px);
  --titlebar-area-w: env(titlebar-area-width, 0px);
  --titlebar-area-h: env(titlebar-area-height, 0px);
  --nav-h: 3.65rem;
  --mobile-bar-tab-h: 22px;
  --avatar-scale: 1.3;
  --tap: 44px;
  --shell-pad: max(0.75rem, var(--safe-l));
  --shell-pad-r: max(0.75rem, var(--safe-r));
  /* Desktop-Overlays = exakt Chatfenster (0 = bündig); Pad nur innen */
  --chat-overlay-inset: 0px;
  --chat-overlay-pad: 2.15rem;
  --btn-glow: 0 0 18px rgba(124, 140, 255, 0.48), 0 8px 24px rgba(124, 140, 255, 0.28);
  --btn-glow-soft: 0 0 14px rgba(124, 140, 255, 0.36), 0 6px 16px rgba(70, 90, 140, 0.14);
  /* Konvexe 3D-Buttons: Highlight oben, Kante + Schlagschatten unten */
  --btn-3d:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1.5px 0 rgba(0, 0, 0, 0.16),
    0 3px 0 color-mix(in srgb, var(--accent) 40%, #2a3558),
    0 7px 16px rgba(124, 140, 255, 0.3);
  --btn-3d-hover:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.58),
    inset 0 -1.5px 0 rgba(0, 0, 0, 0.14),
    0 4px 0 color-mix(in srgb, var(--accent) 40%, #2a3558),
    0 10px 22px rgba(124, 140, 255, 0.36),
    0 0 16px rgba(124, 140, 255, 0.32);
  --btn-3d-pressed:
    inset 0 2px 5px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 1px 0 color-mix(in srgb, var(--accent) 40%, #2a3558),
    0 2px 8px rgba(124, 140, 255, 0.2);
  --btn-surface-face: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(255, 255, 255, 0.72) 48%,
    rgba(226, 233, 246, 0.9) 100%
  );
  --btn-surface-face-active: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 28%, #fff) 0%,
    color-mix(in srgb, var(--accent) 18%, #f2f5ff) 50%,
    color-mix(in srgb, var(--accent) 26%, #dfe6f8) 100%
  );
  --btn-surface-3d:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1.5px 0 rgba(70, 90, 140, 0.14),
    0 2px 0 rgba(90, 110, 150, 0.2),
    0 5px 12px rgba(70, 90, 140, 0.14);
  --btn-surface-3d-hover:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1.5px 0 rgba(70, 90, 140, 0.12),
    0 3px 0 rgba(90, 110, 150, 0.22),
    0 8px 16px rgba(70, 90, 140, 0.16),
    0 0 14px rgba(124, 140, 255, 0.22);
  --btn-surface-3d-pressed:
    inset 0 2px 5px rgba(70, 90, 140, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 1px 0 rgba(90, 110, 150, 0.18),
    0 2px 6px rgba(70, 90, 140, 0.12);
  color-scheme: light;
}

html[data-theme="dark"] {
  --btn-glow: 0 0 20px rgba(150, 165, 255, 0.42), 0 8px 26px rgba(80, 100, 200, 0.32);
  --btn-glow-soft: 0 0 14px rgba(150, 165, 255, 0.3), 0 6px 16px rgba(40, 50, 90, 0.28);
  --btn-3d:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1.5px 0 rgba(0, 0, 0, 0.35),
    0 3px 0 color-mix(in srgb, var(--accent) 35%, #141a2e),
    0 7px 18px rgba(40, 50, 100, 0.4);
  --btn-3d-hover:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1.5px 0 rgba(0, 0, 0, 0.3),
    0 4px 0 color-mix(in srgb, var(--accent) 35%, #141a2e),
    0 10px 24px rgba(60, 80, 160, 0.42),
    0 0 18px rgba(150, 165, 255, 0.28);
  --btn-3d-pressed:
    inset 0 2px 6px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 1px 0 color-mix(in srgb, var(--accent) 35%, #141a2e),
    0 2px 8px rgba(0, 0, 0, 0.35);
  --btn-surface-face: linear-gradient(
    180deg,
    rgba(58, 72, 104, 0.98) 0%,
    rgba(28, 38, 58, 0.96) 48%,
    rgba(12, 16, 26, 0.98) 100%
  );
  --btn-surface-face-active: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 42%, #3a4870) 0%,
    color-mix(in srgb, var(--accent) 28%, #243048) 50%,
    color-mix(in srgb, var(--accent) 34%, #161e30) 100%
  );
  --btn-surface-3d:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1.5px 0 rgba(0, 0, 0, 0.38),
    0 2px 0 rgba(0, 0, 0, 0.42),
    0 5px 14px rgba(0, 0, 0, 0.36);
  --btn-surface-3d-hover:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1.5px 0 rgba(0, 0, 0, 0.32),
    0 3px 0 rgba(0, 0, 0, 0.45),
    0 8px 18px rgba(0, 0, 0, 0.4),
    0 0 14px rgba(150, 165, 255, 0.2);
  --btn-surface-3d-pressed:
    inset 0 2px 6px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1px 0 rgba(0, 0, 0, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.3);
  --bg0: #0a0c12;
  --bg1: #07090e;
  --bg2: #050608;
  --bg-spot-1: #141a2a;
  --bg-spot-2: #1a1220;
  --bg-spot-3: #0a0c10;
  --ink: #eef3fc;
  --muted: #d4deef;
  --card: rgba(10, 12, 18, 0.94);
  --stroke: rgba(140, 160, 200, 0.2);
  --accent: #9aa6ff;
  --accent-2: #57c5b6;
  --online: #2a9b7a;
  --rose: #c98aaa;
  --danger: #e06b7e;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  --input-bg: rgba(18, 24, 38, 0.92);
  --input-border: rgba(140, 160, 200, 0.28);
  /* Farbring stärker an persönliche Farbe — Flächen bleiben hell genug für Text */
  --msg-bg: color-mix(in srgb, var(--msg-ring) 40%, #3a4660);
  --msg-mine-bg: color-mix(in srgb, var(--msg-ring) 52%, #455472);
  --composer-bg: rgba(18, 24, 38, 0.62);
  --bar-bg: rgba(18, 24, 38, 0.94);
  --btn-secondary-bg: rgba(40, 50, 72, 0.92);
  --surface-soft: rgba(40, 50, 72, 0.55);
  --divider: rgba(140, 160, 200, 0.16);
  --nav-hover: rgba(124, 140, 255, 0.22);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  height: 100%;
  touch-action: manipulation;
}

html, body { margin: 0; min-height: 100%; }

/* PWA: kein Pinch-/Browser-Zoom */
html, body {
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  overscroll-behavior: none;
}

html.app-noscroll,
body.app-noscroll {
  height: 100%;
  height: var(--app-vh, 100dvh);
  max-height: var(--app-vh, 100dvh);
  overflow: hidden;
  overscroll-behavior: none;
}

body.app-noscroll {
  position: fixed;
  inset: 0;
  width: 100%;
  touch-action: manipulation;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(1200px 700px at 10% -10%, var(--bg-spot-1) 0%, transparent 55%),
    radial-gradient(900px 600px at 100% 0%, var(--bg-spot-2) 0%, transparent 50%),
    radial-gradient(800px 500px at 50% 100%, var(--bg-spot-3) 0%, transparent 55%),
    linear-gradient(160deg, var(--bg0), var(--bg1) 45%, var(--bg2));
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

@supports not (height: 100dvh) {
  :root { --app-vh: 100vh; }
  html.app-noscroll,
  body.app-noscroll {
    height: 100vh;
    max-height: 100vh;
  }
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.35) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.25) 0 1px, transparent 2px),
    radial-gradient(circle at 40% 80%, rgba(124,140,255,.18) 0 1.5px, transparent 2px);
  background-size: 180px 180px, 140px 140px, 220px 220px;
  animation: drift 40s linear infinite;
  opacity: .7;
  z-index: 0;
}
html[data-theme="dark"] body::before {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.08) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.05) 0 1px, transparent 2px),
    radial-gradient(circle at 40% 80%, rgba(124,140,255,.1) 0 1.5px, transparent 2px);
  opacity: .28;
}
html[data-theme="dark"] body {
  background:
    radial-gradient(900px 500px at 12% -8%, rgba(40, 52, 90, 0.45) 0%, transparent 55%),
    radial-gradient(700px 420px at 92% 0%, rgba(60, 36, 70, 0.28) 0%, transparent 50%),
    linear-gradient(180deg, #0c0f18 0%, #07090e 42%, #030406 100%);
  background-attachment: fixed;
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  * { scroll-behavior: auto !important; }
}

@keyframes drift {
  from { transform: translateY(0); }
  to { transform: translateY(-80px); }
}

#app {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Desktop-PWA: Window Controls Overlay — Titel/Adresse weg, eigene Drag-Leiste */
.pwa-titlebar {
  display: none;
  box-sizing: border-box;
  position: fixed;
  z-index: 10000;
  left: var(--titlebar-area-x);
  top: var(--titlebar-area-y);
  width: var(--titlebar-area-w);
  height: var(--titlebar-area-h);
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.75rem;
  margin: 0;
  border: 0;
  background: color-mix(in srgb, var(--accent) 18%, var(--bar-bg));
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  user-select: none;
  pointer-events: auto;
  -webkit-app-region: drag;
  app-region: drag;
}
.pwa-titlebar-brand {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme="dark"] .pwa-titlebar {
  background: color-mix(in srgb, var(--accent) 22%, rgba(18, 24, 38, 0.96));
  color: var(--ink);
}
@media (display-mode: window-controls-overlay) {
  :root {
    --safe-t: calc(env(safe-area-inset-top, 0px) + env(titlebar-area-height, 36px));
  }
  .pwa-titlebar {
    display: flex;
  }
}
html.pwa-wco .pwa-titlebar {
  display: flex;
}
html.pwa-wco {
  --safe-t: calc(env(safe-area-inset-top, 0px) + env(titlebar-area-height, 36px));
}

body.app-noscroll #app {
  height: 100%;
  height: var(--app-vh, 100dvh);
  max-height: var(--app-vh, 100dvh);
  min-height: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.shell {
  width: min(1100px, calc(100% - var(--shell-pad) - var(--shell-pad-r)));
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
}

.glass {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* —— Landing —— */
.landing {
  padding: max(1.25rem, var(--safe-t)) 0 max(2.5rem, calc(1.5rem + var(--safe-b)));
}
.hero-brand {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .55rem;
  margin: 0 0 1.2rem;
  width: fit-content;
  max-width: 100%;
}
/* Desktop: Marke links, lindic rechts in derselben Zeile */
@media (min-width: 861px) {
  .landing .hero-brand {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 1.5rem;
  }
  .landing .hero-brand .logo-lindic-byline {
    width: auto;
    min-width: 0;
    max-width: 12rem;
    flex: 0 1 12rem;
    align-self: center;
    margin-left: auto;
  }
}
.logo-swiss-chat {
  display: flex;
  align-items: center;
  gap: .9rem;
  text-decoration: none;
  color: inherit;
  flex: 0 0 auto;
  width: max-content;
  max-width: 100%;
}
.logo-swiss-chat img {
  width: clamp(77px, 16.8vw, 115px);
  height: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 12px 28px rgba(70, 90, 140, .18));
}
.logo-swiss-chat .wordmark {
  display: flex;
  flex-direction: column;
  line-height: .95;
}
/* Gestapelt: «Schweiz» / «Chat» */
.logo-swiss-chat .wordmark .wm-chatline {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  white-space: nowrap;
  margin-top: .05rem;
}
.logo-swiss-chat .wordmark .chat,
.logo-swiss-chat .wordmark .wm-hyphen {
  font-family: var(--font-body);
  font-size: clamp(1.85rem, 6vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.logo-swiss-chat .wordmark .wm-hyphen {
  margin: 0;
}
.logo-swiss-chat .wordmark .swiss {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 7.8vw, 4.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-top: 0;
}
.logo-lindic-byline {
  display: block;
  text-decoration: none;
  opacity: .95;
  margin: 0;
  /* Mobil: volle Breite unter der Marke */
  width: 0;
  min-width: 100%;
  max-width: 100%;
  min-height: 0;
  align-self: stretch;
  box-sizing: border-box;
  transition: opacity .2s ease, transform .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .logo-lindic-byline:hover {
    opacity: 1;
    transform: translateY(-1px);
  }
}
/* lindic.net = volle Breite von SchweizChat-Logo + Text */
.logo-lindic-byline img,
.logo-lindic-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  min-width: 0;
}
/* Spezifischer als `.logo-lindic-byline img`, sonst erscheinen Light+Dark gleichzeitig */
.logo-lindic-byline img.logo-lindic-img-dark,
.logo-lindic-img-dark {
  display: none;
}
html[data-theme="dark"] .logo-lindic-byline img.logo-lindic-img-light,
html[data-theme="dark"] .logo-lindic-img-light {
  display: none;
}
html[data-theme="dark"] .logo-lindic-byline img.logo-lindic-img-dark,
html[data-theme="dark"] .logo-lindic-img-dark {
  display: block;
}
html[data-theme="dark"] .logo-swiss-chat img {
  filter: drop-shadow(0 10px 26px rgba(124, 140, 255, 0.35));
}
html[data-theme="dark"] .logo-swiss-chat .wordmark .swiss {
  color: #f4f7ff;
}
html[data-theme="dark"] .logo-swiss-chat .wordmark .chat {
  color: #a8b4ff;
}
.tagline {
  color: var(--ink);
  opacity: .88;
  font-size: clamp(1rem, 2.6vw, 1.1rem);
  margin: 0 0 1.5rem;
  max-width: 34rem;
  line-height: 1.45;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 1.5rem;
  align-items: stretch;
}
.hero-grid > .hero-info,
.hero-grid > .hero-auth {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  height: 100%;
}
.hero-grid > .hero-auth .btn-row {
  margin-top: auto;
  padding-top: 1rem;
}
.hero-info .hint {
  color: var(--ink);
  opacity: .9;
  font-size: .9rem;
  line-height: 1.5;
}
.hero-info .hint + .hint { margin-top: .65rem; }
.hero-info a { color: var(--accent); font-weight: 700; }
.hero-auth .hint,
.hero-auth label {
  color: var(--ink);
  opacity: .88;
}
html[data-theme="dark"] .landing .glass {
  background: rgba(6, 8, 12, 0.96);
  border-color: rgba(160, 175, 210, 0.18);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}
html[data-theme="dark"] .landing .hero-info,
html[data-theme="dark"] .landing .hero-auth {
  background: #050608;
  border-color: rgba(170, 185, 220, 0.2);
}
html[data-theme="dark"] .landing .hero-info h3,
html[data-theme="dark"] .landing .hero-info .hint,
html[data-theme="dark"] .landing .hero-info .hint strong {
  color: #f2f6ff;
  opacity: 1;
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 1.1rem; }
  .hero-grid > .hero-auth { order: -1; }
  .hero-grid > .hero-auth .btn-row {
    margin-top: 1rem;
    padding-top: 0;
  }
}

.panel { padding: clamp(1rem, 2.5vw, 1.35rem); }
.panel h2, .panel h3 {
  font-family: var(--font-display);
  margin: 0 0 .75rem;
  letter-spacing: -0.02em;
}
label {
  display: block;
  font-size: .85rem;
  color: var(--muted);
  margin: .65rem 0 .25rem;
}
input, select, textarea, button {
  font: inherit;
  color: inherit;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select,
textarea {
  width: 100%;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  border-radius: 14px;
  padding: .75rem .9rem;
  min-height: var(--tap);
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}
.reg-blocked {
  padding: .25rem 0 .5rem;
}
.tabs button:disabled {
  opacity: .45;
  cursor: not-allowed;
}
textarea { min-height: 90px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button:focus-visible {
  outline: 2px solid var(--online);
  outline-offset: 2px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, #2a3558);
  border-radius: 999px;
  padding: .75rem 1.2rem;
  min-height: var(--tap);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 55%, #fff) 0%,
    var(--accent) 46%,
    color-mix(in srgb, var(--accent) 72%, #2f3a66) 100%
  );
  color: #fff;
  box-shadow: var(--btn-3d);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  transform-origin: center;
}

/* Flache / sekundäre Controls: gleiche konvexe 3D-Optik */
.btn.secondary,
.btn.ghost,
.side .nav button:not(.ghost):not(.nav-section-tab),
.side .nav a.nav-legal,
.mobile-menu-drawer .nav button:not(.ghost):not(.nav-section-tab),
.mobile-menu-drawer .nav a.nav-legal,
.scope-pills button,
.tabs button,
.theme-toggle,
.theme-pref-pills button,
.composer-icon,
.drawer-close,
.mobile-bar-menu,
.mobile-bar-online,
.media-viewer-close {
  background: var(--btn-surface-face);
  box-shadow: var(--btn-surface-3d);
  border-color: var(--online);
}

.side .nav button:not(.nav-section-tab).active,
.side .nav a.nav-legal.active,
.mobile-menu-drawer .nav button:not(.nav-section-tab).active,
.mobile-menu-drawer .nav a.nav-legal.active,
.scope-pills button.active,
.tabs button.active,
.theme-pref-pills button.active {
  background: var(--btn-surface-face-active);
  box-shadow: var(--btn-surface-3d);
}

/*
 * Hover: anheben + heller/stärkerer Schatten — kein scale().
 * scale() wird in Overlay-/Scroll-Fenstern (overflow:hidden|auto) abgeschnitten.
 */
@media (hover: hover) and (pointer: fine) {
  .btn,
  .side .nav button:not(.nav-section-tab),
  .side .nav a.nav-legal,
  .mobile-menu-drawer .nav button:not(.nav-section-tab),
  .mobile-menu-drawer .nav a.nav-legal,
  .scope-pills button,
  .tabs button,
  .theme-toggle,
  .theme-pref-pills button,
  .composer-icon,
  .dm-inbox-btn,
  .drawer-close,
  .smiley-item,
  .smiley-reset-recent,
  button.linkish,
  .mobile-bar-menu,
  .mobile-bar-online,
  .msg-nick-btn,
  .media-viewer-close,
  .avatar-editor-btns .btn,
  .avatar-photo-actions .btn {
    transition:
      transform .16s ease,
      box-shadow .16s ease,
      filter .16s ease,
      background .16s ease,
      border-color .16s ease,
      color .16s ease;
    transform-origin: center;
  }

  .btn:hover:not(:disabled),
  .avatar-editor-btns .btn:hover:not(:disabled),
  .avatar-photo-actions .btn:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.08) saturate(1.06);
    box-shadow: var(--btn-3d-hover);
    z-index: 3;
  }

  .btn.secondary:hover:not(:disabled),
  .btn.ghost:hover:not(:disabled),
  .side .nav button:hover:not(:disabled):not(.dm-inbox-btn):not(.ghost),
  .side .nav a.nav-legal:hover,
  .mobile-menu-drawer .nav button:hover:not(:disabled):not(.dm-inbox-btn):not(.ghost),
  .mobile-menu-drawer .nav a.nav-legal:hover,
  .scope-pills button:hover:not(:disabled),
  .tabs button:hover:not(:disabled),
  .theme-toggle:hover:not(:disabled),
  .theme-pref-pills button:hover:not(:disabled),
  .composer-icon:hover,
  .drawer-close:hover:not(:disabled),
  .smiley-item:hover,
  .smiley-reset-recent:not(:disabled):hover,
  .mobile-bar-menu:hover:not(:disabled),
  .mobile-bar-online:hover:not(:disabled),
  .media-viewer-close:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.08) saturate(1.04);
    box-shadow: var(--btn-surface-3d-hover);
    z-index: 3;
  }

  .dm-inbox-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.08);
    z-index: 3;
  }

  .msg-nick-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.1) saturate(1.06);
    z-index: 3;
  }

  .btn.danger:hover:not(:disabled) {
    box-shadow:
      inset 0 1.5px 0 rgba(255, 255, 255, 0.42),
      inset 0 -1.5px 0 rgba(0, 0, 0, 0.2),
      0 4px 0 color-mix(in srgb, var(--danger) 55%, #5a1824),
      0 10px 22px rgba(212, 84, 106, 0.36),
      0 0 16px rgba(212, 84, 106, 0.32);
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .btn:hover:not(:disabled),
  .side .nav button:hover:not(:disabled),
  .side .nav a.nav-legal:hover,
  .mobile-menu-drawer .nav button:hover:not(:disabled),
  .mobile-menu-drawer .nav a.nav-legal:hover,
  .scope-pills button:hover:not(:disabled),
  .tabs button:hover:not(:disabled),
  .theme-toggle:hover:not(:disabled),
  .theme-pref-pills button:hover:not(:disabled),
  .composer-icon:hover,
  .dm-inbox-btn:hover:not(:disabled),
  .drawer-close:hover:not(:disabled),
  .smiley-item:hover,
  .smiley-reset-recent:not(:disabled):hover,
  button.linkish:hover:not(:disabled),
  .mobile-bar-menu:hover:not(:disabled),
  .mobile-bar-online:hover:not(:disabled),
  .msg-nick-btn:hover:not(:disabled),
  .media-viewer-close:hover:not(:disabled),
  .avatar-editor-btns .btn:hover:not(:disabled),
  .avatar-photo-actions .btn:hover:not(:disabled) {
    transform: none;
  }
}

.btn:active:not(:disabled) {
  transform: translateY(2px) scale(0.99);
  box-shadow: var(--btn-3d-pressed);
}
.btn.secondary:active:not(:disabled),
.btn.ghost:active:not(:disabled),
.side .nav button:active:not(:disabled):not(.dm-inbox-btn):not(.ghost),
.side .nav a.nav-legal:active,
.mobile-menu-drawer .nav button:active:not(:disabled):not(.dm-inbox-btn):not(.ghost),
.mobile-menu-drawer .nav a.nav-legal:active,
.scope-pills button:active:not(:disabled),
.tabs button:active:not(:disabled),
.theme-toggle:active:not(:disabled),
.theme-pref-pills button:active:not(:disabled),
.composer-icon:active,
.drawer-close:active:not(:disabled),
.mobile-bar-menu:active:not(:disabled),
.mobile-bar-online:active:not(:disabled),
.media-viewer-close:active:not(:disabled) {
  transform: translateY(2px) scale(0.99);
  box-shadow: var(--btn-surface-3d-pressed);
}
.btn.secondary {
  background: var(--btn-surface-face);
  color: var(--ink);
  box-shadow: var(--btn-surface-3d);
  border-color: var(--online);
}
.btn.danger {
  background: linear-gradient(
    180deg,
    #f08a9a 0%,
    var(--danger) 48%,
    color-mix(in srgb, var(--danger) 70%, #5a1824) 100%
  );
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1.5px 0 rgba(0, 0, 0, 0.2),
    0 3px 0 color-mix(in srgb, var(--danger) 55%, #5a1824),
    0 7px 16px rgba(212, 84, 106, 0.3);
  border-color: color-mix(in srgb, var(--danger) 60%, #5a1824);
}
.btn.danger:active:not(:disabled) {
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 1px 0 color-mix(in srgb, var(--danger) 55%, #5a1824),
    0 2px 8px rgba(212, 84, 106, 0.22);
}
.btn.ghost {
  background: var(--btn-surface-face);
  color: var(--muted);
  box-shadow: var(--btn-surface-3d);
  border: 1px solid var(--online);
}

/*
 * Menü-Seiten + Profil (Drawer, Desktop & Mobile):
 * Farben/Format wie Side-Nav — Surface, grüner Rand, gleiches Padding.
 * Danger bleibt rot; #logout-btn bleibt Orange-Ghost.
 */
.mobile-view-drawer .btn:not(.danger),
.mobile-view-drawer label.btn:not(.danger) {
  padding: .55rem 1rem;
  font-weight: 600;
  background: var(--btn-surface-face);
  color: var(--ink);
  border: 1px solid var(--online);
  box-shadow: var(--btn-surface-3d);
}
.mobile-view-drawer .btn.ghost:not(#logout-btn),
.mobile-view-drawer label.btn.ghost {
  color: var(--muted);
}
.mobile-view-drawer .btn.small:not(.danger) {
  padding: .45rem .9rem;
  font-size: .88rem;
  min-height: 2.35rem;
}
/* Aktive Filter (bare .btn.small ohne .ghost) = wie Nav .active */
.mobile-view-drawer .btn.small:not(.ghost):not(.secondary):not(.danger) {
  background: var(--btn-surface-face-active);
  font-weight: 700;
}
html[data-theme="dark"] .mobile-view-drawer .btn:not(.danger):not(.ghost):not(#logout-btn),
html[data-theme="dark"] .mobile-view-drawer label.btn:not(.danger):not(.ghost) {
  color: rgba(238, 243, 252, 0.68);
}
html[data-theme="dark"] .mobile-view-drawer .btn.small:not(.ghost):not(.secondary):not(.danger) {
  color: var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  .mobile-view-drawer .btn:not(.danger):hover:not(:disabled),
  .mobile-view-drawer label.btn:not(.danger):hover {
    transform: translateY(-2px);
    filter: brightness(1.08) saturate(1.04);
    box-shadow: var(--btn-surface-3d-hover);
    background: var(--btn-surface-face-active);
    color: var(--ink);
  }
  .mobile-view-drawer .btn.ghost:not(#logout-btn):hover:not(:disabled) {
    color: var(--ink);
  }
}
.mobile-view-drawer .btn:not(.danger):active:not(:disabled),
.mobile-view-drawer label.btn:not(.danger):active {
  transform: translateY(2px) scale(0.99);
  box-shadow: var(--btn-surface-3d-pressed);
  background: var(--btn-surface-face-active);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1rem;
}
.err { color: var(--danger); font-size: .9rem; margin: .5rem 0 0; }
.ok { color: var(--online); font-size: .9rem; margin: .5rem 0 0; }
.hint { color: var(--muted); font-size: .88rem; margin: .4rem 0 0; line-height: 1.45; }
html[data-theme="dark"] .hint,
html[data-theme="dark"] label,
html[data-theme="dark"] .tagline,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .chat-status,
html[data-theme="dark"] .btn.ghost {
  color: var(--muted);
  opacity: 1;
}
.place-results {
  list-style: none;
  margin: .4rem 0 0;
  padding: 0;
  max-height: min(40dvh, 220px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  border-radius: 14px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(90,110,150,.15);
}
.place-results li {
  padding: .7rem .85rem;
  min-height: var(--tap);
  cursor: pointer;
  border-bottom: 1px solid rgba(90,110,150,.08);
  touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine) {
  .place-results li:hover, .place-results li.active { background: rgba(124,140,255,.12); }
}
.place-results li:active, .place-results li.active { background: rgba(124,140,255,.12); }
.place-results .meta { color: var(--muted); font-size: .8rem; }

.scope-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: .5rem 0 0;
}
.scope-pills button {
  border: 1px solid var(--online);
  background: var(--btn-surface-face);
  box-shadow: var(--btn-surface-3d);
  border-radius: 999px;
  padding: .55rem 1rem;
  min-height: var(--tap);
  font: inherit;
  cursor: pointer;
  color: var(--ink);
  touch-action: manipulation;
  flex: 1 1 auto;
  text-align: center;
  position: relative;
  transform-origin: center;
}
.scope-pills button.active {
  background: var(--btn-surface-face-active);
  border-color: var(--online);
  font-weight: 700;
}
html[data-theme="dark"] .scope-pills button {
  background: var(--btn-surface-face);
  border-color: var(--online);
  color: rgba(238, 243, 252, 0.68);
}
html[data-theme="dark"] .scope-pills button.active {
  background: var(--btn-surface-face-active);
  border-color: var(--online);
  color: var(--ink);
}
.scope-pills button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  line-height: 1.15;
}
.scope-pills .scope-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
}
.scope-pills .scope-sub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  font-size: .68rem;
  font-weight: 600;
  opacity: .85;
  max-width: 7.5rem;
  overflow: hidden;
  white-space: nowrap;
}
.scope-pills .scope-sub-label {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.scope-pills .scope-sub .canton-flag,
.scope-pills .scope-sub .place-flag {
  width: 0.95em;
  height: 0.95em;
  flex-shrink: 0;
}
.scope-pills .scope-sub .scope-context-map {
  width: 1.45em;
  height: 1.45em;
  flex-shrink: 0;
  object-fit: contain;
  vertical-align: -0.28em;
  border: 0;
  border-radius: 2px;
  opacity: 0.92;
}
/* Schweiz / Kanton / Gemeinde: Unterzeile + Flagge/Karte +10 % (via em) */
#chat-scope button[data-scope="ch"] .scope-sub,
#chat-scope button[data-scope="kanton"] .scope-sub,
#chat-scope button[data-scope="ort"] .scope-sub {
  font-size: 0.748rem; /* 0.68rem × 1.1 */
}
@media (max-width: 860px) and (orientation: portrait) {
  .chat-head-tools .scope-pills {
    width: 100%;
    justify-content: stretch;
  }
  .chat-head .scope-pills button {
    flex: 1 1 0;
    min-width: 0;
  }
  .scope-pills .scope-sub {
    max-width: 100%;
  }
}
.scope-pills .scope-online {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--online) 16%, transparent);
  color: color-mix(in srgb, var(--online) 78%, #000);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
}
.scope-pills button.active .scope-online {
  background: color-mix(in srgb, var(--online) 22%, transparent);
}
html[data-theme="dark"] .scope-pills .scope-online {
  background: color-mix(in srgb, var(--online) 28%, transparent);
  color: color-mix(in srgb, var(--online) 45%, #fff);
}
.online-scope-hint {
  margin-top: .15rem;
  font-size: .78rem;
}
/* Kantone / Gemeinden — Sheet wie Menü */
.scope-picker-backdrop.modal-backdrop,
#scope-picker-modal.modal-backdrop {
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  background: rgba(20, 28, 48, 0.45);
}
.scope-picker-sheet {
  display: flex;
  position: fixed;
  z-index: 90;
  left: 0;
  right: 0;
  top: 0;
  bottom: calc(var(--nav-h, 3.65rem) + 0.9rem + var(--safe-b, 0px));
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  margin: 0;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  padding:
    max(0.35rem, var(--safe-t))
    max(1rem, var(--safe-l))
    max(1rem, var(--safe-b))
    max(1rem, var(--safe-r));
  flex-direction: column;
  gap: 0.45rem;
  overflow: hidden;
  transform: translateY(12px);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.25s ease;
  touch-action: pan-y;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 248, 255, 0.97) 45%, rgba(240, 252, 248, 0.97) 100%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: none;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.scope-picker-sheet.is-open {
  transform: translateY(0);
  opacity: 1;
}
.scope-picker-sheet.is-closing {
  transform: translateY(12px);
  opacity: 0;
}
.scope-picker-sheet.is-dragging {
  transition: none;
  touch-action: none;
}
.scope-picker-sheet .drawer-head {
  cursor: grab;
  touch-action: none;
}
.scope-picker-sheet.is-dragging .drawer-head {
  cursor: grabbing;
}
html[data-theme="dark"] .scope-picker-sheet {
  background:
    linear-gradient(180deg, rgba(36, 46, 72, 0.98) 0%, rgba(28, 38, 58, 0.98) 50%, rgba(24, 42, 48, 0.98) 100%);
  border-color: rgba(140, 160, 200, 0.28);
}
@media (min-width: 861px) {
  .scope-picker-backdrop.modal-backdrop,
  #scope-picker-modal.modal-backdrop {
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
  }
  .scope-picker-sheet {
    position: relative;
    inset: auto;
    width: min(28rem, 96vw);
    max-width: 96vw;
    height: min(80vh, 36rem);
    max-height: min(80vh, 36rem);
    border-radius: 22px;
    border: 1px solid rgba(124, 140, 255, 0.18);
    box-shadow: 0 18px 48px rgba(40, 55, 85, .18);
  }
}
@media (max-width: 860px) and (orientation: portrait) {
  .scope-pick-item {
    min-height: 2.85rem;
    padding: 0.75rem 0.85rem;
  }
}
.scope-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--divider);
  flex-shrink: 0;
}
.scope-picker-head h2,
.scope-picker-head h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}
.scope-picker-hint {
  margin: 0;
  flex-shrink: 0;
}
.scope-pick-search-wrap {
  flex-shrink: 0;
  padding: 0 0 0.35rem;
}
.scope-pick-search {
  width: 100%;
  box-sizing: border-box;
  min-height: var(--tap);
  padding: 0.55rem 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
.scope-pick-search::placeholder {
  color: var(--muted);
  opacity: 0.85;
}
.scope-pick-search:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 1px;
}
html[data-theme="dark"] .scope-pick-search {
  background: rgba(18, 24, 38, 0.92);
  border-color: rgba(140, 160, 200, 0.28);
  color: var(--ink);
}
.scope-pick-list {
  list-style: none;
  margin: 0;
  padding: .35rem;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  flex: 1 1 auto;
  min-height: 0;
  border-top: 1px solid #c5ccd8;
  background: #dde3eb;
  border-radius: 14px;
  touch-action: pan-y;
}
html[data-theme="dark"] .scope-pick-list {
  border-top-color: rgba(140, 160, 200, 0.16);
  background: rgba(6, 10, 18, 0.96);
}
.scope-pick-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .65rem .7rem;
  margin: .2rem 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #d0d7e2;
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  min-height: var(--tap);
}
html[data-theme="dark"] .scope-pick-item {
  background: rgba(16, 22, 36, 0.96);
  border-color: rgba(90, 110, 150, 0.18);
  color: var(--ink);
}
.scope-pick-item:hover,
.scope-pick-item:focus-visible {
  background: #c2cad8;
  border-color: #aeb8c8;
  outline: none;
}
html[data-theme="dark"] .scope-pick-item:hover,
html[data-theme="dark"] .scope-pick-item:focus-visible {
  background: rgba(28, 38, 58, 0.98);
  border-color: rgba(124, 140, 255, 0.35);
}
.scope-pick-item.active {
  background: #b8c2d4;
  border-color: #8f9db5;
  font-weight: 700;
}
html[data-theme="dark"] .scope-pick-item.active {
  background: rgba(124, 140, 255, 0.22);
  border-color: var(--accent);
}
.scope-pick-name {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
.scope-pick-name .canton-flag,
.scope-pick-name .place-flag {
  flex-shrink: 0;
}

.scope-pick-count {
  flex: 0 0 auto;
  min-width: 2rem;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #2f3f5c;
  background: #bec7d6;
  border: 1px solid #a8b3c6;
  border-radius: 999px;
  padding: .2rem .55rem;
  font-size: .85rem;
}
html[data-theme="dark"] .scope-pick-count {
  color: #d4deef;
  background: rgba(6, 10, 18, 0.92);
  border-color: rgba(140, 160, 200, 0.28);
}
html[data-theme="dark"] .place-results {
  background: rgba(6, 10, 18, 0.96);
  border-color: rgba(140, 160, 200, 0.22);
  color: var(--ink);
}
html[data-theme="dark"] .place-results li {
  border-bottom-color: rgba(140, 160, 200, 0.12);
}
html[data-theme="dark"] .place-results li:hover,
html[data-theme="dark"] .place-results li.active,
html[data-theme="dark"] .place-results li:active {
  background: rgba(28, 38, 58, 0.95);
}

.tabs { display: flex; gap: .4rem; margin-bottom: 1rem; }
.tabs button {
  flex: 1;
  border: 1px solid var(--online);
  background: var(--btn-surface-face);
  box-shadow: var(--btn-surface-3d);
  border-radius: 999px;
  padding: .6rem .9rem;
  min-height: var(--tap);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  position: relative;
  transform-origin: center;
}
.tabs button.active {
  background: var(--btn-surface-face-active);
  font-weight: 700;
}
.tabs.tabs-3 button { font-size: .92rem; padding: .55rem .45rem; }

.guest-badge {
  display: inline-block;
  margin-left: .35rem;
  padding: .12rem .45rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  vertical-align: middle;
  color: #5a3d12;
  background: #f5d27a;
  border: 1px solid rgba(180, 130, 40, .35);
}
.self-badge {
  display: inline-block;
  margin-left: .35rem;
  padding: .12rem .45rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  vertical-align: middle;
  color: var(--accent);
  background: rgba(124, 140, 255, 0.14);
  border: 1px solid rgba(124, 140, 255, 0.28);
}
.online-user.is-self {
  opacity: 0.95;
}
.user-chip .guest-badge { display: block; margin: .25rem 0 0; width: fit-content; }
.msg .guest-badge { margin-left: .4rem; font-size: .68rem; }
.guest-geo {
  margin: .65rem 0;
  padding: .65rem .75rem;
  border-radius: 12px;
  background: rgba(90, 140, 90, .08);
  border: 1px solid rgba(90, 140, 90, .2);
  font-size: .92rem;
}
.guest-geo.warn {
  background: rgba(190, 90, 60, .08);
  border-color: rgba(190, 90, 60, .28);
}
.guest-geo p { margin: .2rem 0; }

.msg-report {
  margin-left: .45rem;
  border: 0;
  background: transparent;
  color: var(--muted, #667089);
  font: inherit;
  font-size: .75rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.msg.mine .msg-report { display: none; }
@media (hover: hover) and (pointer: fine) {
  .msg-report:hover { color: #b04545; }
}

.moderation-gate h2 { margin-top: .35rem; }
.moderation-gate .mod-lead { font-weight: 600; }
.mod-strike-pill {
  display: inline-block;
  padding: .2rem .65rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  background: rgba(190, 90, 60, .15);
  color: #8a3a22;
  margin: 0 0 .5rem;
}
.mod-accusations {
  margin: .75rem 0 1.25rem;
  padding-left: 1.2rem;
}
.mod-accusations li { margin: .55rem 0; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(20, 28, 45, .45);
  backdrop-filter: blur(2px);
  opacity: 0;
  animation: schweizchat-fade-in 0.25s ease forwards;
}
.modal-card {
  width: min(420px, 100%);
  max-height: min(90vh, 640px);
  overflow: auto;
  transform: translateY(12px);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.25s ease;
}
.modal-card.is-open {
  transform: translateY(0);
  opacity: 1;
}
.modal-card.is-closing {
  transform: translateY(12px);
  opacity: 0;
}
@keyframes schweizchat-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* —— Gast: periodischer Registrierungs-Hinweis (Chat-Fläche) —— */
.guest-signup-prompt {
  z-index: 85;
  box-sizing: border-box;
}
.guest-signup-card {
  width: min(28rem, 100%);
  max-height: min(92%, 640px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  padding: 1.35rem 1.4rem 1rem;
  overflow: auto;
}
.guest-signup-brand {
  justify-content: center;
  margin: 0 auto 0.85rem;
  gap: 0.55rem;
}
.guest-signup-brand img {
  width: 4.5rem;
  height: 4.5rem;
  filter: drop-shadow(0 6px 16px rgba(70, 90, 140, 0.2));
}
.guest-signup-brand .wordmark .swiss {
  font-size: 1.85rem;
}
.guest-signup-brand .wordmark .chat {
  font-size: 1.45rem;
}
.guest-signup-card h3 {
  margin: 0 0 0.55rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.guest-signup-lead {
  margin: 0 0 0.85rem;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--ink);
}
.guest-signup-benefits {
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
  text-align: left;
  display: grid;
  gap: 0.45rem;
}
.guest-signup-benefits li {
  position: relative;
  padding: 0.35rem 0.55rem 0.35rem 1.55rem;
  border-radius: 0.55rem;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-size: 0.92rem;
  line-height: 1.4;
}
.guest-signup-benefits li::before {
  content: '✓';
  position: absolute;
  left: 0.5rem;
  top: 0.35rem;
  font-weight: 700;
  color: var(--accent);
}
.guest-signup-actions {
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 0 0.35rem;
}
.guest-signup-actions .btn {
  flex: 1 1 8.5rem;
  min-width: 8.5rem;
}
.guest-signup-lindic {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  display: flex;
  justify-content: center;
}
.guest-signup-lindic .logo-lindic-byline {
  width: auto;
  min-width: 0;
  max-width: 6.75rem;
  margin: 0 auto;
  opacity: 0.88;
}
html[data-theme="dark"] .guest-signup-benefits li {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .guest-signup-prompt {
    animation: none;
    opacity: 1;
  }
  .guest-signup-prompt .modal-card {
    transition: none;
  }
}

body[data-schweizchat-wait="1"]::before {
  content: 'Kurz unterbrochen — Login bleibt erhalten…';
  position: fixed;
  inset: auto 0 0 0;
  z-index: 9999;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font: 600 0.92rem/1.35 system-ui, sans-serif;
  color: #1a2438;
  background: rgba(255, 248, 220, 0.96);
  border-top: 1px solid rgba(180, 140, 40, 0.35);
  pointer-events: none;
}

.doc-overlay-backdrop {
  z-index: 120;
  padding: max(0.5rem, var(--safe-t)) max(0.5rem, var(--safe-r)) max(0.5rem, var(--safe-b)) max(0.5rem, var(--safe-l));
  align-items: stretch;
  justify-items: stretch;
}
.doc-overlay-card {
  width: min(920px, 100%);
  max-width: 100%;
  height: min(92vh, 900px);
  max-height: min(92vh, 900px);
  margin: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 0 0.35rem;
  transform: translateY(12px);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.25s ease;
}
.doc-overlay-card.is-open {
  transform: translateY(0);
  opacity: 1;
}
.doc-overlay-card.is-closing {
  transform: translateY(12px);
  opacity: 0;
}
.doc-overlay-card.is-dragging {
  transition: none;
  touch-action: none;
}
.doc-overlay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem .85rem .7rem;
  border-bottom: 1px solid var(--divider);
  flex-shrink: 0;
}
.doc-overlay-head h2 {
  margin: 0;
  font-size: 1.05rem;
  font-family: var(--font-display);
  line-height: 1.25;
  min-width: 0;
}
.doc-overlay-frame {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: 0;
  background: #fff;
}
html[data-theme="dark"] .doc-overlay-frame {
  background: #050608;
}
@media (max-width: 860px) {
  .doc-overlay-backdrop {
    padding: 0;
    align-items: end;
    background: rgba(20, 28, 48, 0.45);
  }
  .doc-overlay-card {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    padding-top: max(0.35rem, var(--safe-t));
    padding-bottom: max(0.5rem, var(--safe-b));
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 248, 255, 0.97) 45%, rgba(240, 252, 248, 0.97) 100%);
  }
  html[data-theme="dark"] .doc-overlay-card {
    background:
      linear-gradient(180deg, rgba(36, 46, 72, 0.98) 0%, rgba(28, 38, 58, 0.98) 50%, rgba(24, 42, 48, 0.98) 100%);
  }
}

.nick-suggestions {
  margin: .35rem 0 .85rem;
  padding: .65rem .75rem;
  border-radius: 12px;
  background: rgba(190, 140, 60, .08);
  border: 1px solid rgba(190, 140, 60, .25);
}
.nick-suggestions .hint { margin: 0 0 .45rem; }
.nick-suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.nick-chip {
  border: 1px solid rgba(90, 110, 150, .28);
  background: rgba(255, 255, 255, .75);
  border-radius: 999px;
  padding: .35rem .75rem;
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine) {
  .nick-chip:hover {
    border-color: var(--accent, #5a6bb8);
    background: rgba(124, 140, 255, .12);
  }
}
.soft-rule {
  border: 0;
  border-top: 1px solid rgba(90,110,150,.12);
  margin: 1.25rem 0;
}
.empty { color: var(--muted); padding: 1rem 0; }
/* Gentle letter-wave on empty room invite («Noch keine Nachrichten — sag Hallo!») */
.empty-wave .empty-wave-ch {
  display: inline-block;
  will-change: transform, opacity;
  animation: empty-wave-letter 2.6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.05s);
}
@keyframes empty-wave-letter {
  0%, 100% { transform: translateY(0); opacity: 0.78; }
  40% { transform: translateY(-0.18em); opacity: 1; }
  70% { transform: translateY(0.04em); opacity: 0.88; }
}
@media (prefers-reduced-motion: reduce) {
  .empty-wave .empty-wave-ch {
    animation: none;
    opacity: inherit;
    transform: none;
    will-change: auto;
  }
}
.empty-chat {
  margin: 1rem 0.25rem 1.5rem;
  padding: 1.1rem 1.15rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(124, 140, 255, 0.22);
  color: var(--ink);
  line-height: 1.45;
}
html[data-theme="dark"] .empty-chat {
  background: rgba(28, 38, 58, 0.72);
  border-color: rgba(140, 160, 200, 0.22);
}
.empty-chat p { margin: 0 0 0.7rem; }
.empty-chat p:last-child { margin-bottom: 0; }
.empty-chat-lead { font-size: 1.08rem; }
.empty-chat-status { font-weight: 600; }
.empty-chat-status.ok { color: #1f7a5f; }
.empty-chat-status.warn { color: var(--danger, #c04545); }
.empty-chat-invite { font-weight: 600; }
.nick-with-honor {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  flex-wrap: wrap;
}
.honor-medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.5rem;
  line-height: 0;
  vertical-align: middle;
  filter: drop-shadow(0 1px 1.5px rgba(40, 48, 60, 0.28));
}
.honor-medal-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.mobile-bar-name .honor-medal,
.user-chip .honor-medal {
  width: 1.25rem;
  height: 1.65rem;
}

.person-sheet .actions #person-join-room {
  width: 100%;
}
.person-join-room-hint {
  margin: -0.15rem 0 0.35rem;
  width: 100%;
  text-align: center;
}
.person-card-head .honor-medal {
  width: 1.45rem;
  height: 1.9rem;
}
.online-meta .honor-medal {
  width: 1.05rem;
  height: 1.38rem;
}
html[data-theme="dark"] .honor-medal {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

/* —— App shell (logged in) —— */
.app-root {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding:
    max(0.5rem, var(--safe-t))
    var(--shell-pad-r)
    0
    var(--shell-pad);
}

.app-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 0.85rem;
  flex: 1 1 0;
  min-height: 0;
  height: auto;
  max-height: 100%;
  align-items: stretch;
  overflow: hidden;
  padding-bottom: 0.75rem;
}

.app-shell > main {
  min-width: 0;
  min-height: 0;
  height: auto;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  align-self: stretch;
}

.app-shell > main > .glass,
.app-shell > main > .chat-frame {
  flex: 1 1 0;
  min-height: 0;
  height: auto;
  max-height: 100%;
}

/* Online-Liste rechts — standardmässig aus (Portrait-Handy) */
.online-rail {
  display: none;
  flex-direction: column;
  gap: .35rem;
  min-width: 0;
  min-height: 0;
  height: auto;
  max-height: 100%;
  overflow: hidden;
  align-self: stretch;
  box-sizing: border-box;
  padding: .75rem .7rem;
}
.online-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  flex-shrink: 0;
  padding: 0 .15rem .35rem;
  border-bottom: 1px solid rgba(30, 40, 80, .08);
}
.online-head h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}
.online-list-toggle {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
  margin: 0 0 0.25rem;
  padding: 0 0.1rem;
}
.online-list-toggle.scope-pills {
  margin-top: 0;
}
.online-list-toggle button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 1.85rem;
  padding: 0.25rem 0.45rem;
  font-size: 0.78rem;
  /* Menü-Nav: gleiche Fläche / Border / Text / Aktiv */
  font-weight: 600;
  border: 1px solid var(--online);
  background: var(--btn-surface-face);
  box-shadow: var(--btn-surface-3d);
  color: var(--ink);
}
.online-list-toggle button.active {
  background: var(--btn-surface-face-active);
  border-color: var(--online);
  font-weight: 700;
}
html[data-theme="dark"] .online-list-toggle button {
  background: var(--btn-surface-face);
  border-color: var(--online);
  color: rgba(238, 243, 252, 0.68);
}
html[data-theme="dark"] .online-list-toggle button.active {
  background: var(--btn-surface-face-active);
  border-color: var(--online);
  color: var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  .online-list-toggle button:hover:not(:disabled) {
    background: var(--btn-surface-face-active);
    border-color: var(--online);
  }
  .online-list-toggle button.active:hover:not(:disabled) {
    background: var(--btn-surface-face-active);
  }
  html[data-theme="dark"] .online-list-toggle button:hover:not(:disabled) {
    background: var(--btn-surface-face-active);
    color: var(--ink);
  }
  html[data-theme="dark"] .online-list-toggle button.active:hover:not(:disabled) {
    background: var(--btn-surface-face-active);
  }
}
.online-list-toggle .online-room-toggle-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  max-width: 100%;
  min-width: 0;
}
.online-list-toggle .online-room-toggle-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.online-list-toggle .online-room-toggle-label .canton-flag,
.online-list-toggle .online-room-toggle-label .place-flag {
  width: 0.95em;
  height: 0.95em;
  flex-shrink: 0;
}
.mobile-online-drawer .online-list-toggle {
  margin: 0.35rem 0.85rem 0.15rem;
}
.online-map-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.7rem;
  flex-shrink: 0;
  margin: 0 0 0.3rem;
  padding: 0 0.15rem;
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--muted);
}
.online-map-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  min-width: 0;
}
.online-map-legend-swatch {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(36, 48, 68, 0.18);
}
.online-map-legend-swatch-room {
  background: #e23c4a;
}
html[data-theme="dark"] .online-map-legend-swatch {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.mobile-online-drawer .online-map-legend {
  margin: 0 0.85rem 0.2rem;
}
.online-count {
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 .45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--online) 15%, transparent);
  color: color-mix(in srgb, var(--online) 78%, #000);
  font-size: .8rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.online-list-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.online-map-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  isolation: isolate;
  /* Nur Silhouette / Wappen — kein graues Vollflächen-Feld */
  background-color: transparent;
  background-image: var(--online-map-url, url("/assets/img/outlines/context/ch.svg?v=ctx"));
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.55;
}
html[data-theme="dark"] .online-map-bg {
  opacity: 0.45;
  filter: brightness(1.25);
}
/* Profil-Layer über Raumkarte: Heimat-Kanton aus Profileinstellungen immer ausgefüllt (Hue) + Gemeinde + «du!»-Nadel. */
.online-map-home {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: block;
  opacity: 0.9;
}
/* Rote Chatraum-Nadel über Profil-Layer — voll deckend, Kopf nicht verwaschen/verdeckt. */
.online-map-room-pin-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  display: block;
  opacity: 1;
}
.online-map-room-pin-layer .online-map-room-pin-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
/* Persistente Slots: Kanton/Self bleiben beim Listen-Umschalter; nur Peers wechseln. */
.online-map-home-canton,
.online-map-home-peers,
.online-map-home-self {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.online-map-home-canton { z-index: 0; }
.online-map-home-peers { z-index: 1; }
.online-map-home-self { z-index: 2; }
.online-map-home-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.online-map-home .online-map-profile-canton-svg {
  z-index: 0;
  opacity: 0.85;
}
.online-map-home .online-map-profile-canton-svg.online-map-profile--outline {
  /* Kontur klarer; leichter Underlay lässt Raum-Rot durch */
  opacity: 1;
}
.online-map-home .online-map-pins-svg {
  z-index: 1;
}
/* «du!» über der Nadel: einfacher Font, kein Doppel-Stroke */
.online-map-home .map-pin-you {
  fill: #1a2230;
  stroke: none;
  paint-order: normal;
  font-weight: 700;
}
html[data-theme="dark"] .online-map-home .map-pin-you {
  fill: #f2f5fb;
}
.online-map-profile-canton-svg .online-map-profile-ch {
  fill: none;
}
html[data-theme="dark"] .online-map-home {
  opacity: 0.95;
  filter: brightness(1.06);
}
html[data-theme="dark"] .online-map-home .online-map-profile-canton-svg {
  opacity: 0.9;
}
html[data-theme="dark"] .online-map-home .online-map-profile-canton-svg.online-map-profile--outline {
  opacity: 1;
}
/* Legacy: Wappen-Modus (nicht mehr für Scope-Umrisse) */
.online-map-bg.online-map-bg--emblem {
  background-size: min(78%, 16rem);
  opacity: 0.34;
  filter: none;
}
html[data-theme="dark"] .online-map-bg.online-map-bg--emblem {
  opacity: 0.4;
  filter: none;
}
/* Schweiz-/Kanton-/Gemeinde-Umrisse (gleicher Kontext-Stil) */
.online-map-bg[data-map-kind="ch"],
.online-map-bg[data-map-kind="canton"],
.online-map-bg[data-map-kind="place"] {
  background-size: contain;
  opacity: 0.55;
  filter: none;
}
html[data-theme="dark"] .online-map-bg[data-map-kind="ch"],
html[data-theme="dark"] .online-map-bg[data-map-kind="canton"],
html[data-theme="dark"] .online-map-bg[data-map-kind="place"] {
  opacity: 0.45;
  filter: brightness(1.25);
}
/* Gewählter Raum-Kanton: inline SVG, Kanton rot */
.online-map-bg.online-map-bg--inline {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: none;
  opacity: 0.78;
  filter: none;
}
html[data-theme="dark"] .online-map-bg.online-map-bg--inline {
  opacity: 0.88;
  filter: none;
}
.online-map-bg-svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
}
.online-map-bg-svg .online-map-ch {
  fill: #c5cbd4;
}
.online-map-bg-svg .online-map-canton {
  fill: #e23c4a;
  /* Kein currentColor / Hue von Eltern — Raum bleibt hart rot */
  color: #e23c4a;
}
.online-map-bg-svg .online-map-place {
  fill: #3d4658;
}
html[data-theme="dark"] .online-map-bg-svg .online-map-ch {
  fill: #9aa3b0;
}
html[data-theme="dark"] .online-map-bg-svg .online-map-canton {
  fill: #ff5c6e;
}
html[data-theme="dark"] .online-map-bg-svg .online-map-place {
  fill: #5a6578;
}
.mobile-online-drawer .online-list-wrap {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
}
.online-list {
  list-style: none;
  margin: 0;
  padding: .35rem 0 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  z-index: 1;
  background: transparent;
}
.online-list .online-empty {
  padding: .75rem .35rem;
  color: var(--muted);
  font-size: .88rem;
}
.online-user {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .55rem;
  align-items: start;
  padding: .45rem .4rem;
  border-radius: 12px;
  cursor: pointer;
  touch-action: manipulation;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  min-width: 0;
  /* 20 % Deckkraft → Schweiz-Grundriss bleibt erkennbar */
  background: color-mix(in srgb, var(--card) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--divider) 55%, transparent);
}
.online-user:hover,
.online-user:focus-visible {
  background: color-mix(in srgb, var(--card) 35%, transparent);
}
/* Trennlinie: aussen schmal, zur Mitte dicker (Linsenform) */
.online-list > .online-user + .online-user {
  margin-top: 0.2rem;
  padding-top: 0.55rem;
}
.online-list > .online-user + .online-user::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0.2rem;
  right: 0.2rem;
  height: 3px;
  pointer-events: none;
  border-radius: 50%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(90, 110, 150, 0.18) 18%,
    rgba(90, 110, 150, 0.42) 50%,
    rgba(90, 110, 150, 0.18) 82%,
    transparent 100%
  );
  box-shadow: 0 0 0 0.5px rgba(90, 110, 150, 0.06);
}
html[data-theme="dark"] .online-list > .online-user + .online-user::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(160, 175, 220, 0.16) 18%,
    rgba(160, 175, 220, 0.4) 50%,
    rgba(160, 175, 220, 0.16) 82%,
    transparent 100%
  );
  box-shadow: none;
}
.online-user .avatar {
  width: calc(2rem * var(--avatar-scale));
  height: calc(2rem * var(--avatar-scale));
  font-size: calc(.85rem * var(--avatar-scale));
  align-self: start;
  margin-top: 0.12rem;
}
.online-demographics,
.user-demographics {
  font-weight: 600;
  color: var(--ink);
  opacity: .8;
}
.age-tip.is-empty,
.place-tip.is-empty,
.person-field .is-empty {
  opacity: 0.55;
  letter-spacing: 0.04em;
}
.canton-flag {
  display: inline-block;
  width: 1.21em; /* +15% gegenüber 1.05em */
  height: 1.21em;
  vertical-align: -0.18em;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: cover;
  flex-shrink: 0;
}
.online-place,
.msg-place,
.person-place {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.28rem;
}
.msg-place,
.msg-canton {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.2;
  font-weight: 400;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
}
.msg .who .msg-symbols {
  display: inline-flex;
  align-items: center;
  gap: 0.12rem 0.2rem;
  flex-shrink: 0;
}
.msg .who .msg-symbols .honors-row {
  margin-left: 0;
}
.msg .who .msg-canton {
  flex: 0 0 auto;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.msg .who .msg-place {
  display: inline;
  max-width: 28%;
}
.msg .who .msg-demographics {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: 0;
  font-size: 0.92em;
  opacity: 0.95;
  flex-shrink: 0;
}
.msg .who .msg-demographics .gender-ico {
  font-size: 1.15em;
  vertical-align: 0;
}
.msg .who .msg-demographics .device-ico {
  width: 1.05rem;
  height: 1.05rem;
}
.msg .who .msg-demographics .device-ico svg {
  width: 100%;
  height: 100%;
}
.msg .who .honors-row {
  margin-left: 0;
  gap: 0.12rem;
  flex-shrink: 0;
}
.msg .who .honor-medal {
  width: 1rem;
  height: 1.3rem;
}
.msg .who .honor-medal.honor-coin {
  width: 1.05rem;
  height: 1.05rem;
}
.ad-author-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  min-width: 0;
}
.ad-author-demo {
  font-size: 0.85em;
}
.gender-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2.24em;
  font-weight: 700;
  line-height: 1;
  vertical-align: -0.12em;
  cursor: help;
}
.gender-ico.gender-m {
  color: #111;
}
html[data-theme="dark"] .gender-ico.gender-m {
  color: #fff;
}
.gender-ico.gender-w {
  color: #e85a9b;
}
.gender-ico.gender-d {
  color: #7a6bb5;
}
.gender-ico.gender-x {
  color: var(--muted);
}
.gender-ico.gender-unknown {
  color: var(--muted);
  font-size: 1.85em;
  font-weight: 800;
}
.person-facts .gender-ico {
  font-size: 2.3em;
}
.person-facts .gender-ico.gender-unknown {
  font-size: 1.9em;
}
.has-tip {
  cursor: help;
  position: relative;
}
.tip-bubble {
  position: fixed;
  z-index: 12000;
  max-width: min(18rem, calc(100vw - 1.5rem));
  padding: 0.45rem 0.65rem;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  color: #fff;
  background: rgba(28, 36, 52, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  pointer-events: none;
  white-space: pre-wrap;
}
html[data-theme="light"] .tip-bubble {
  background: rgba(32, 40, 56, 0.94);
}
.device-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  color: var(--muted);
  flex-shrink: 0;
}
.device-ico.device-mobile,
.device-ico.device-desktop { color: #fff; }
.online-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.online-dot.on,
.online-dot.active {
  background: var(--online);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--online) 18%, transparent);
}
.online-dot.away {
  background: #e09a2b;
  box-shadow: 0 0 0 3px rgba(224, 154, 43, .2);
}
.online-dot.off,
.online-dot.gone {
  background: #d4546a;
  box-shadow: 0 0 0 3px rgba(212, 84, 106, .18);
}
.presence-aside {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex-shrink: 0;
}
.online-user.is-offline {
  opacity: 0.88;
}
.online-user.is-away {
  opacity: 0.95;
}
.online-last-seen {
  color: #c23d55;
  font-weight: 600;
}
.online-user.is-away .online-last-seen {
  color: #c48a1a;
  font-weight: 600;
}
.online-logout-countdown {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
html[data-theme="dark"] .online-last-seen {
  color: #f0a0ad;
}
.online-meta {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.12rem;
}
.online-nick-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
.online-nick-main {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.online-nick-row .presence-aside {
  margin-left: 0;
  flex: 0 0 auto;
}
.online-nick-row .nick-slot {
  flex: 0 1 auto;
  font-size: .9rem;
}
.online-nick-row .self-badge,
.online-nick-row .honors-row {
  flex-shrink: 0;
}
.online-demographics .guest-badge {
  margin-left: 0;
  vertical-align: baseline;
}
.online-demographics,
.online-place {
  min-height: 1.15em;
}
.online-meta .hint {
  margin: 0;
  font-size: .75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* Fester Slot für max. 10 Zeichen Spitzname */
.nick-slot {
  display: inline-block;
  box-sizing: border-box;
  width: 10ch;
  min-width: 10ch;
  max-width: 10ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  font-variant-numeric: tabular-nums;
}
.msg .who .nick-slot {
  flex: 0 0 10ch;
  min-width: 10ch;
  max-width: 10ch;
}
.msg .who .nick-slot .msg-nick-btn {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.user-chip-meta .nick-slot,
.mobile-bar-name .nick-slot {
  display: block;
}
@media (hover: hover) and (pointer: fine) {
  .online-user:hover {
    background: var(--nav-hover);
  }
}

.side {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  align-self: stretch;
  min-height: 0;
  height: auto;
  max-height: 100%;
  box-sizing: border-box;
}
.side .nav {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.nav-section-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0 auto 0.55rem;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  box-sizing: border-box;
}
.nav-section-tab {
  /* Wie Darstellung-Pills: etwas kleinere Schrift */
  min-height: 2.25rem;
  padding: 0.35rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--online);
  background: var(--btn-surface-face);
  box-shadow: var(--btn-surface-3d);
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.1;
  cursor: pointer;
  touch-action: manipulation;
  text-align: center;
  justify-content: center;
}
.nav-section-tab.active {
  background: var(--btn-surface-face-active);
  color: var(--ink);
  border-color: var(--online);
  box-shadow: var(--btn-surface-3d);
  font-weight: 700;
}
html[data-theme="dark"] .nav-section-tab {
  background: var(--btn-surface-face);
  border-color: var(--online);
  color: rgba(238, 243, 252, 0.68);
}
html[data-theme="dark"] .nav-section-tab.active {
  background: var(--btn-surface-face-active);
  color: var(--ink);
}
.nav-section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  width: 100%;
  opacity: 1;
  transition: opacity 0.2s ease;
}
.nav-section[hidden] {
  display: none !important;
}
/* Sektionswechsel Chat/Weitere/Info: sanftes Einblenden, kein Slide von links */
.nav-section.is-fading-in {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .nav-section {
    transition: none;
  }
}
.nav-section-title {
  margin: 0.1rem 0 0.2rem;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.2;
  text-align: center;
}
.nav-section-items {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  width: 100%;
}
.nav > #logout-btn {
  margin-top: 0.75rem;
  width: 100%;
}
.side .nav button:not(.nav-section-tab),
.side .nav a.nav-legal {
  text-align: center;
  border: 1px solid var(--online);
  background: var(--btn-surface-face);
  box-shadow: var(--btn-surface-3d);
  border-radius: 999px;
  padding: .55rem 1rem;
  min-height: var(--tap);
  font: inherit;
  cursor: pointer;
  color: var(--ink);
  touch-action: manipulation;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  box-sizing: border-box;
  position: relative;
  transform-origin: center;
}
.side .nav .nav-section-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}
.side .nav button:not(.nav-section-tab).active,
.side .nav a.nav-legal.active {
  background: var(--btn-surface-face-active);
  border-color: var(--online);
  font-weight: 700;
}
.side .nav .nav-section-tab.active,
.mobile-menu-drawer .nav .nav-section-tab.active {
  background: var(--btn-surface-face-active);
  color: var(--ink);
  border-color: var(--online);
  box-shadow: var(--btn-surface-3d);
  font-weight: 700;
}
.side .nav button.ghost,
.mobile-menu-drawer .nav button.ghost,
#logout-btn {
  margin-top: 0.25rem;
  color: var(--muted);
  font-weight: 600;
  background: transparent;
  border: 2px solid #ff8a1a;
  box-shadow:
    0 0 6px rgba(255, 138, 26, 0.7),
    0 0 16px rgba(255, 138, 26, 0.45),
    0 0 32px rgba(255, 138, 26, 0.25);
}
html[data-theme="dark"] .side .nav button:not(.ghost),
html[data-theme="dark"] .side .nav a.nav-legal {
  background: var(--btn-surface-face);
  border-color: var(--online);
  color: rgba(238, 243, 252, 0.68);
}
html[data-theme="dark"] .side .nav button.active,
html[data-theme="dark"] .side .nav a.nav-legal.active {
  background: var(--btn-surface-face-active);
  border-color: var(--online);
  color: var(--ink);
}
html[data-theme="dark"] .side .nav button.ghost,
html[data-theme="dark"] .mobile-menu-drawer .nav button.ghost,
html[data-theme="dark"] #logout-btn {
  background: transparent;
  border: 2px solid #ff9a33;
  box-shadow:
    0 0 8px rgba(255, 154, 51, 0.75),
    0 0 18px rgba(255, 154, 51, 0.5),
    0 0 36px rgba(255, 154, 51, 0.3);
  color: rgba(238, 243, 252, 0.55);
}
@media (hover: hover) and (pointer: fine) {
  .side .nav button:hover:not(.ghost),
  .side .nav a.nav-legal:hover {
    background: var(--btn-surface-face-active);
    border-color: var(--online);
  }
  .side .nav button.active:hover,
  .side .nav a.nav-legal.active:hover {
    background: var(--btn-surface-face-active);
  }
  .side .nav button.ghost:hover,
  .mobile-menu-drawer .nav button.ghost:hover,
  #logout-btn:hover {
    background: transparent;
    border-color: #ff9a33;
    box-shadow:
      0 0 8px rgba(255, 138, 26, 0.85),
      0 0 20px rgba(255, 138, 26, 0.55),
      0 0 40px rgba(255, 138, 26, 0.32);
    color: var(--ink);
  }
  html[data-theme="dark"] .side .nav button:hover:not(.ghost),
  html[data-theme="dark"] .side .nav a.nav-legal:hover {
    background: var(--btn-surface-face-active);
    color: var(--ink);
  }
  html[data-theme="dark"] .side .nav button.active:hover,
  html[data-theme="dark"] .side .nav a.nav-legal.active:hover {
    background: var(--btn-surface-face-active);
  }
}

/* Theme: Hell / Dunkel / Auto */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.65rem;
  height: 2.65rem;
  min-height: 2.65rem;
  padding: 0;
  border: 1px solid var(--online);
  border-radius: 50%;
  background: var(--btn-surface-face);
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  flex-shrink: 0;
  box-shadow: var(--btn-surface-3d);
  position: relative;
  transform-origin: center;
}
.theme-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}
.theme-toggle .ico-sun,
.theme-toggle .ico-moon,
.theme-toggle .ico-auto { display: none; }
html[data-theme-pref="light"] .theme-toggle .ico-sun { display: block; }
html[data-theme-pref="dark"] .theme-toggle .ico-moon { display: block; }
html[data-theme-pref="auto"] .theme-toggle .ico-auto { display: block; }
/* Fallback wenn Pref noch nicht gesetzt */
html:not([data-theme-pref]) .theme-toggle .ico-auto { display: block; }
.theme-pref-pills {
  display: inline-flex;
  align-items: stretch;
  gap: 0.2rem;
  flex-shrink: 0;
  max-width: 100%;
}
.theme-pref-pills button {
  border: 1px solid var(--online);
  background: var(--btn-surface-face);
  box-shadow: var(--btn-surface-3d);
  border-radius: 999px;
  padding: 0.35rem 0.55rem;
  min-height: 2.25rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.1;
  cursor: pointer;
  color: var(--ink);
  touch-action: manipulation;
  white-space: nowrap;
}
.theme-pref-pills button.active {
  background: var(--btn-surface-face-active);
  border-color: var(--online);
  font-weight: 700;
}
html[data-theme="dark"] .theme-pref-pills button {
  background: var(--btn-surface-face);
  color: rgba(238, 243, 252, 0.78);
}
html[data-theme="dark"] .theme-pref-pills button.active {
  background: var(--btn-surface-face-active);
  color: var(--ink);
}
.theme-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  margin: 0 0 .75rem;
  flex-wrap: wrap;
}
.theme-toggle-row .hint {
  margin: 0;
  flex: 1 1 auto;
  min-width: 4.5rem;
}
.theme-toggle-row .theme-pref-pills {
  margin-left: auto;
}
.theme-toggle-float {
  position: fixed;
  top: max(0.65rem, var(--safe-t));
  right: max(0.65rem, var(--safe-r));
  z-index: 50;
}
@media (hover: hover) and (pointer: fine) {
  .theme-toggle:hover,
  .theme-pref-pills button:hover:not(.active) {
    border-color: var(--online);
    background: var(--btn-surface-face-active);
    box-shadow: var(--btn-surface-3d-hover);
  }
}
.side .nav button.nav-with-badge,
.mobile-menu-drawer .nav button.nav-with-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.nav-activity-badge {
  min-width: 1.45rem;
  height: 1.45rem;
  padding: 0 .4rem;
  border-radius: 999px;
  background: #d4546a;
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}
.nav-activity-badge[hidden] {
  display: none !important;
}
.nav-guest-lock {
  display: inline-flex;
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  color: var(--muted);
  opacity: 0.85;
}
.nav-guest-lock svg {
  width: 100%;
  height: 100%;
  display: block;
}
.side .nav button.nav-guest-locked,
.mobile-menu-drawer .nav button.nav-guest-locked {
  color: var(--muted);
  font-weight: 600;
}
html[data-theme="dark"] .side .nav button.nav-guest-locked,
html[data-theme="dark"] .mobile-menu-drawer .nav button.nav-guest-locked {
  color: rgba(200, 210, 230, 0.82);
}

.user-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .85rem;
  min-width: 0;
}
.user-chip-meta {
  min-width: 0;
  flex: 1 1 auto;
}
.user-chip-meta strong {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-chip-meta .nick-slot {
  width: 10ch;
  min-width: 10ch;
  max-width: 10ch;
}
/* Desktop: Mitteilungen unverändert, ganz rechts im Radius von «Zum Chat» */
.desk-side .nav-chat-with-dm {
  position: relative;
  display: block;
  width: 100%;
}
.desk-side .nav-chat-with-dm > [data-view="chat"] {
  width: 100%;
}
.desk-side .nav-chat-with-dm:has(.dm-inbox-btn:not([hidden])) > [data-view="chat"] {
  /* Platz für 2.35rem-Badge + Inset im rechten Pill-Bogen */
  padding-right: calc(2.35rem + max(0.12rem, calc((var(--tap) - 2.35rem) / 2)) + 0.35rem);
}
.desk-side .nav-chat-with-dm .nav-chat-dm-slot {
  position: absolute;
  /* Exakt im rechten Radius der Pill (wie Kreis im Halbkreis-Ende) */
  right: max(0.12rem, calc((var(--tap) - 2.35rem) / 2));
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  pointer-events: none;
}
.desk-side .nav-chat-with-dm .nav-chat-dm-slot .dm-inbox-btn,
.desk-side .user-chip .dm-inbox-btn {
  position: relative;
  right: auto;
  top: auto;
  bottom: auto;
  margin: 0;
  z-index: 3;
  pointer-events: auto;
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  min-width: 2.35rem;
  min-height: 2.35rem;
  max-width: 2.35rem;
  max-height: 2.35rem;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
  /* Nav-Button-Styles überschreiben — Badge bleibt wie mobil */
  border: 2px solid #fff;
  background: linear-gradient(
    180deg,
    #f08a9a 0%,
    #d4546a 48%,
    color-mix(in srgb, #d4546a 70%, #5a1824) 100%
  );
  color: #fff;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1.5px 0 rgba(0, 0, 0, 0.2),
    0 2px 0 color-mix(in srgb, #d4546a 55%, #5a1824),
    0 5px 12px rgba(212, 84, 106, 0.45);
  animation: dm-inbox-pulse 1.6s ease-in-out infinite, dm-inbox-glow 2s ease-in-out infinite;
  filter: none;
  transform-origin: center;
}
html[data-theme="dark"] .desk-side .nav-chat-with-dm .nav-chat-dm-slot .dm-inbox-btn,
html[data-theme="dark"] .desk-side .user-chip .dm-inbox-btn {
  border-color: rgba(255, 255, 255, 0.85);
  background: linear-gradient(
    180deg,
    #f0a0ad 0%,
    #e06b7e 48%,
    color-mix(in srgb, #e06b7e 70%, #5a1824) 100%
  );
  color: #fff;
}
/* Nav-Hover darf Badge-Glow/Animation nicht überschreiben */
@media (hover: hover) and (pointer: fine) {
  .desk-side .nav-chat-with-dm .nav-chat-dm-slot .dm-inbox-btn:hover:not(:disabled) {
    border: 2px solid #fff;
    background: linear-gradient(
      180deg,
      #f08a9a 0%,
      #d4546a 48%,
      color-mix(in srgb, #d4546a 70%, #5a1824) 100%
    );
    color: #fff;
    box-shadow:
      inset 0 1.5px 0 rgba(255, 255, 255, 0.4),
      inset 0 -1.5px 0 rgba(0, 0, 0, 0.2),
      0 2px 0 color-mix(in srgb, #d4546a 55%, #5a1824),
      0 5px 12px rgba(212, 84, 106, 0.45);
    filter: brightness(1.06);
  }
  html[data-theme="dark"] .desk-side .nav-chat-with-dm .nav-chat-dm-slot .dm-inbox-btn:hover:not(:disabled) {
    border-color: rgba(255, 255, 255, 0.85);
    background: linear-gradient(
      180deg,
      #f0a0ad 0%,
      #e06b7e 48%,
      color-mix(in srgb, #e06b7e 70%, #5a1824) 100%
    );
    color: #fff;
  }
}
/* Legacy: User-Chip mit Inbox (falls woanders noch genutzt) */
.desk-side .user-chip.has-dm-inbox {
  padding: 0.3rem 0.55rem 0.3rem 0.3rem;
  border-radius: 16px;
  background: var(--surface-soft);
  border: 1px solid var(--divider);
}
.desk-side .user-chip.has-dm-inbox:has(.dm-inbox-btn:not([hidden])) {
  padding-right: 2.85rem;
}
.desk-side .user-chip .dm-inbox-btn {
  position: absolute;
  right: 0.3rem;
  top: 0;
  bottom: 0;
  margin-block: auto;
  z-index: 2;
  width: 2.35rem;
  height: 2.35rem;
  min-width: 2.35rem;
  min-height: 2.35rem;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    #f08a9a 0%,
    #d4546a 48%,
    color-mix(in srgb, #d4546a 70%, #5a1824) 100%
  );
  color: #fff;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1.5px 0 rgba(0, 0, 0, 0.2),
    0 2px 0 color-mix(in srgb, #d4546a 55%, #5a1824),
    0 5px 12px rgba(212, 84, 106, 0.45);
  animation: dm-inbox-pulse 1.6s ease-in-out infinite, dm-inbox-glow 2s ease-in-out infinite;
}
.avatar {
  width: calc(42px * var(--avatar-scale));
  height: calc(42px * var(--avatar-scale));
  font-size: calc(0.95rem * var(--avatar-scale));
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
  isolation: isolate;
}
.avatar.avatar-live {
  position: relative;
}
.avatar .avatar-letter {
  display: inline-block;
  line-height: 1;
  transform-origin: center center;
  will-change: transform, filter;
  backface-visibility: hidden;
}
.avatar.avatar-photo {
  background: transparent;
  padding: 2px;
  box-shadow: 0 0 0 2.5px var(--avatar-ring, hsl(210 55% 55%));
  box-sizing: border-box;
}
.avatar.avatar-photo img,
.avatar.avatar-photo .avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  transform-origin: center center;
  will-change: transform;
  backface-visibility: hidden;
}
/* Foto: dezenter Dauer-Atemzug (CSS). Kuschel: WAAPI auf Teilen. */
.avatar.avatar-live-on.avatar-photo:not(.avatar-kuschler) .avatar-img {
  animation: avatar-breathe 4.6s ease-in-out infinite;
}
@keyframes avatar-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
.avatar.avatar-kuschler {
  padding: 2px;
}
.avatar.avatar-kuschler .avatar-kuschler-host {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  line-height: 0;
  background: transparent;
}
.avatar.avatar-kuschler .avatar-kuschler-host svg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  overflow: hidden;
}
/* Fallback transform-origins falls SVG ohne <style> (ältere Avatare) */
.avatar.avatar-kuschler .avatar-kuschler-host svg .k-head,
.avatar.avatar-kuschler .avatar-kuschler-host svg .k-ear-l,
.avatar.avatar-kuschler .avatar-kuschler-host svg .k-ear-r,
.avatar.avatar-kuschler .avatar-kuschler-host svg .k-eye-l,
.avatar.avatar-kuschler .avatar-kuschler-host svg .k-eye-r,
.avatar.avatar-kuschler .avatar-kuschler-host svg .k-lid-l,
.avatar.avatar-kuschler .avatar-kuschler-host svg .k-lid-r,
.avatar.avatar-kuschler .avatar-kuschler-host svg .k-nose,
.avatar.avatar-kuschler .avatar-kuschler-host svg .k-mouth,
.avatar.avatar-kuschler .avatar-kuschler-host svg .k-acc,
.avatar.avatar-kuschler .avatar-kuschler-host svg .k-acc-hat,
.avatar.avatar-kuschler .avatar-kuschler-host svg .k-acc-glasses {
  transform-box: fill-box;
  transform-origin: center;
}
.avatar.avatar-kuschler .avatar-kuschler-host svg .k-head {
  transform-box: view-box;
  transform-origin: 50% 55%;
}
.avatar.avatar-kuschler .avatar-kuschler-host svg .k-ear-l,
.avatar.avatar-kuschler .avatar-kuschler-host svg .k-ear-r {
  transform-origin: center bottom;
}
.avatar.avatar-kuschler .avatar-kuschler-host svg .k-mouth {
  transform-origin: center top;
}
@media (prefers-reduced-motion: reduce) {
  .avatar .avatar-letter,
  .avatar.avatar-photo .avatar-img {
    will-change: auto;
    animation: none !important;
  }
}
.avatar-photo-field {
  margin: 1rem 0 1.25rem;
  width: 100%;
  box-sizing: border-box;
}
.avatar-photo-field .avatar-preview {
  justify-content: center;
  margin: 0;
  width: 100%;
}
.avatar-photo-field .avatar-preview .avatar {
  width: calc(7.25rem * var(--avatar-scale));
  height: calc(7.25rem * var(--avatar-scale));
  font-size: calc(1.85rem * var(--avatar-scale));
  flex-shrink: 0;
}
.avatar-color-field .avatar-preview .avatar {
  width: calc(4.25rem * var(--avatar-scale));
  height: calc(4.25rem * var(--avatar-scale));
  font-size: calc(1.2rem * var(--avatar-scale));
}
.avatar-photo-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  width: 100%;
  margin-top: 0.35rem;
  box-sizing: border-box;
}
.avatar-photo-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.avatar-photo-actions .btn,
.avatar-photo-actions .avatar-file-btn {
  width: 100%;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}
.avatar-photo-actions .hint {
  width: 100%;
  margin: 0.15rem 0 0;
  line-height: 1.4;
}
.avatar-gen-btns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  width: 100%;
}
.avatar-gen-btns .btn {
  width: 100%;
  min-width: 0;
  font-size: 0.88rem;
  padding: 0.5rem 0.4rem;
  box-sizing: border-box;
}
@media (max-width: 380px) {
  .avatar-gen-btns {
    grid-template-columns: 1fr;
  }
}
.avatar-file-btn { cursor: pointer; }
.avatar-gen-card { max-width: min(28rem, 96vw); }
.avatar-gen-gender { justify-content: center; margin-bottom: 0.55rem; }
.avatar-gen-stage {
  display: flex;
  justify-content: center;
  margin: .75rem 0 .5rem;
}
.avatar-gen-preview,
.avatar-gen-placeholder {
  width: calc(12rem * var(--avatar-scale));
  height: calc(12rem * var(--avatar-scale));
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--avatar-ring, #7c8cff);
}
.avatar-gen-preview.avatar {
  width: calc(12rem * var(--avatar-scale));
  height: calc(12rem * var(--avatar-scale));
  font-size: inherit;
}
.avatar-gen-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.avatar-gen-placeholder {
  display: grid;
  place-items: center;
  font-size: calc(2.5rem * var(--avatar-scale));
  font-weight: 700;
  color: var(--muted);
  background: rgba(90, 110, 150, .08);
}
.avatar-gen-label {
  text-align: center;
  margin: 0 0 .75rem;
  font-weight: 700;
}
.avatar-gen-mood { justify-content: center; margin-bottom: .85rem; }
.avatar-gen-actions { flex-wrap: wrap; justify-content: center; }
.avatar-editor-card {
  width: min(40rem, 96vw);
  max-width: min(40rem, 96vw);
  max-height: min(92vh, 900px);
}
.avatar-editor-stage {
  display: grid;
  place-items: center;
  width: 100%;
  margin: .85rem 0;
  padding: .75rem;
  background: #d8dee8;
  border-radius: 16px;
  border: 1px solid #c0c8d6;
  box-sizing: border-box;
}
#avatar-editor-canvas {
  width: 100%;
  max-width: min(100%, 70vmin, 32rem);
  aspect-ratio: 1;
  height: auto;
  touch-action: none;
  cursor: grab;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--avatar-ring, hsl(210 55% 55%));
  background: #b8c0ce;
}
#avatar-editor-canvas:active { cursor: grabbing; }
.avatar-editor-controls { display: flex; flex-direction: column; gap: .75rem; }
.avatar-editor-zoom {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .9rem;
}
.avatar-editor-zoom input[type="range"] { width: 100%; }
.avatar-editor-btns .btn {
  min-width: 2.75rem;
  font-size: 1.15rem;
  padding: .45rem .65rem;
}

/* App-Marke (rechts im Chat-Kopf) + Online-Zähler (Mitte, gestapelt) */
.mobile-brand,
.chat-brand {
  display: none;
}

/* Chat-Marke: drei klare Beats Logo → Schweiz → Chat, mit weichem Überlapp.
   Peak ≈0.36s @ 1.28; nächstes Segment startet erst, wenn das vorherige schon
   wieder schrumpft — so bleibt die Reihenfolge lesbar, wirkt aber flüssig.
   Innerhalb von Schweiz/Chat feiner Buchstaben-Stagger. 10s Zyklus. */
.chat-brand .app-brand-swiss .swiss,
.chat-brand .app-brand-swiss .chat {
  display: inline-flex;
  white-space: nowrap;
}
.chat-brand .app-brand-swiss > img,
.chat-brand .app-brand-swiss .wm-ch {
  display: inline-block;
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: transform;
  animation: brand-soft-inflate 10s linear infinite;
}
.chat-brand .app-brand-swiss > img {
  animation-delay: 0s;
}
/* Beat 2 — Schweiz: nach Logo-Peak (~0.36s), Start mitten im Schrumpfen (~0.55s) */
.chat-brand .app-brand-swiss .swiss .wm-ch:nth-child(1) { animation-delay: 0.55s; }
.chat-brand .app-brand-swiss .swiss .wm-ch:nth-child(2) { animation-delay: 0.59s; }
.chat-brand .app-brand-swiss .swiss .wm-ch:nth-child(3) { animation-delay: 0.63s; }
.chat-brand .app-brand-swiss .swiss .wm-ch:nth-child(4) { animation-delay: 0.67s; }
.chat-brand .app-brand-swiss .swiss .wm-ch:nth-child(5) { animation-delay: 0.71s; }
.chat-brand .app-brand-swiss .swiss .wm-ch:nth-child(6) { animation-delay: 0.75s; }
.chat-brand .app-brand-swiss .swiss .wm-ch:nth-child(7) { animation-delay: 0.79s; }
/* Beat 3 — Chat: erst wenn Schweiz als Wort klar gelaufen ist (~1.15s) */
.chat-brand .app-brand-swiss .chat .wm-ch:nth-child(1) { animation-delay: 1.15s; }
.chat-brand .app-brand-swiss .chat .wm-ch:nth-child(2) { animation-delay: 1.19s; }
.chat-brand .app-brand-swiss .chat .wm-ch:nth-child(3) { animation-delay: 1.23s; }
.chat-brand .app-brand-swiss .chat .wm-ch:nth-child(4) { animation-delay: 1.27s; }
@keyframes brand-soft-inflate {
  /* Peak 3.6%≈0.36s @ 1.28; Settle 8.2%≈0.82s */
  0% { transform: scale(1); animation-timing-function: cubic-bezier(0.33, 1.15, 0.45, 1); }
  3.6% { transform: scale(1.28); animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); }
  8.2% { transform: scale(1); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-brand .app-brand-swiss > img,
  .chat-brand .app-brand-swiss .wm-ch {
    animation: none !important;
    will-change: auto;
  }
}
.chat-head-online {
  display: none;
}
.chat-head-online .brand-online {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.08em;
  flex: 0 0 auto;
  min-width: 2.35rem;
  height: auto;
  min-height: 2.35rem;
  padding: 0.28rem 0.5rem;
  margin: 0;
  border-radius: 14px;
  background: color-mix(in srgb, var(--online) 16%, transparent);
  color: color-mix(in srgb, var(--online) 78%, #000);
  font-family: var(--font-body);
  font-size: 1.01rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  text-align: center;
}
.chat-head-online .brand-online-prefix {
  display: block;
  font-size: 0.68em;
  font-weight: 650;
  opacity: 0.9;
  line-height: 1;
  text-transform: none;
}
.chat-head-online .brand-online-n {
  display: block;
  font-size: 1.05em;
  font-weight: 800;
  line-height: 1;
}
html[data-theme="dark"] .chat-head-online .brand-online {
  background: color-mix(in srgb, var(--online) 28%, transparent);
  color: color-mix(in srgb, var(--online) 45%, #fff);
}
.app-brand-swiss {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: inherit;
  flex: 0 0 auto;
  width: max-content;
  max-width: 100%;
}
.app-brand-swiss img {
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 10px rgba(70, 90, 140, 0.16));
}
.app-brand-swiss .wordmark {
  display: flex;
  flex-direction: column;
  line-height: 0.92;
}
.app-brand-swiss .wordmark .wm-chatline {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  white-space: nowrap;
  margin-top: 0.02rem;
}
.app-brand-swiss .wordmark .chat,
.app-brand-swiss .wordmark .wm-hyphen {
  font-family: var(--font-body);
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.app-brand-swiss .wordmark .wm-hyphen {
  margin: 0;
}
.app-brand-swiss .wordmark .swiss {
  font-family: var(--font-display);
  font-size: 1.26rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.mobile-brand .logo-lindic-byline,
.chat-brand .logo-lindic-byline {
  margin: 0.12rem 0 0;
  min-height: 0;
  opacity: 0.9;
  width: 0;
  min-width: 100%;
  max-width: 100%;
  align-self: stretch;
}
.mobile-brand .logo-lindic-byline img,
.mobile-brand .logo-lindic-img,
.chat-brand .logo-lindic-byline img,
.chat-brand .logo-lindic-img {
  width: 100%;
  height: auto;
  max-width: none;
  min-width: 0;
}
html[data-theme="dark"] .app-brand-swiss img {
  filter: drop-shadow(0 4px 12px rgba(124, 140, 255, 0.3));
}
html[data-theme="dark"] .app-brand-swiss .wordmark .swiss { color: #f4f7ff; }
html[data-theme="dark"] .app-brand-swiss .wordmark .chat { color: #a8b4ff; }

/* Desktop: Marke+Titel links, Online zentriert, Aktionen rechts; Scope-Pills darunter */
@media (min-width: 861px) {
  .chat-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    min-height: 0;
    /* Über Nachrichten — nichts aus dem Log darf in die Kopfzeile ragen/klicken */
    position: relative;
    z-index: 3;
  }
  .chat-head-top {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.65rem;
    min-height: var(--nav-h);
    width: 100%;
    overflow: visible;
  }
  .chat-head-start {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(50% - 4.5rem);
    z-index: 2;
  }
  .chat-head-title {
    flex: 1 1 auto;
    min-width: 0;
  }
  .chat-head-online {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    pointer-events: none;
  }
  .chat-head-aside {
    flex: 0 0 auto;
    margin-left: auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    z-index: 2;
  }
  /* Mitteilungen: gleicher runder Badge wie mobil / Menü, links neben dem Logo */
  .chat-head-aside > .dm-inbox-btn:not([hidden]) {
    position: relative;
    flex: 0 0 auto;
    width: 2.35rem;
    height: 2.35rem;
    min-width: 2.35rem;
    min-height: 2.35rem;
    max-width: 2.35rem;
    max-height: 2.35rem;
    padding: 0;
    margin: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
    pointer-events: auto;
    border: 2px solid #fff;
    background: linear-gradient(
      180deg,
      #f08a9a 0%,
      #d4546a 48%,
      color-mix(in srgb, #d4546a 70%, #5a1824) 100%
    );
    color: #fff;
    box-shadow:
      inset 0 1.5px 0 rgba(255, 255, 255, 0.4),
      inset 0 -1.5px 0 rgba(0, 0, 0, 0.2),
      0 2px 0 color-mix(in srgb, #d4546a 55%, #5a1824),
      0 5px 12px rgba(212, 84, 106, 0.45);
    animation: dm-inbox-pulse 1.6s ease-in-out infinite, dm-inbox-glow 2s ease-in-out infinite;
    filter: none;
    transform-origin: center;
  }
  html[data-theme="dark"] .chat-head-aside > .dm-inbox-btn:not([hidden]) {
    border-color: rgba(255, 255, 255, 0.85);
    background: linear-gradient(
      180deg,
      #f0a0ad 0%,
      #e06b7e 48%,
      color-mix(in srgb, #e06b7e 70%, #5a1824) 100%
    );
    color: #fff;
  }
  @media (hover: hover) and (pointer: fine) {
    .chat-head-aside > .dm-inbox-btn:hover:not(:disabled) {
      filter: brightness(1.06);
    }
  }
  .chat-brand {
    position: static;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    gap: 0.28rem;
    padding: 0;
    border: 0;
    margin: 0;
    width: max-content;
    max-width: 100%;
    height: auto;
    pointer-events: none;
  }
  .chat-head-tools {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    min-width: 0;
    justify-content: stretch;
    margin-left: 0;
    position: relative;
    z-index: 2;
  }
  .chat-head-tools .scope-pills {
    width: 100%;
    flex: 1 1 auto;
    justify-content: stretch;
    margin: 0;
  }
  .chat-head .scope-pills button {
    flex: 1 1 0;
    min-width: 0;
  }
  .chat-head .scope-pills .scope-sub {
    max-width: 100%;
  }
  .chat-head-online .brand-online {
    min-width: 2.45rem;
    min-height: 2.45rem;
    height: auto;
    font-size: 1.04rem;
  }
  .chat-brand .app-brand-swiss {
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
  }
  .chat-brand .app-brand-swiss img {
    width: 2.22rem;
    height: 2.22rem;
  }
  .chat-brand .app-brand-swiss .wordmark {
    flex-direction: row;
    align-items: baseline;
    gap: 0;
    line-height: 1;
  }
  .chat-brand .app-brand-swiss .wordmark .wm-hyphen {
    display: inline;
    font-family: var(--font-body);
    font-size: 1.14rem;
    font-weight: 700;
    color: var(--accent);
    margin: 0;
  }
  .chat-brand .app-brand-swiss .wordmark .swiss {
    font-size: 1.2rem;
  }
  .chat-brand .app-brand-swiss .wordmark .chat {
    font-size: 1.14rem;
  }
  .chat-brand .logo-lindic-byline {
    display: none;
  }
}

/* Mobile portrait bar: Hamburger + User + PN + Online */
.mobile-bar {
  --mobile-bar-tab-h: 22px;
  display: none;
  position: sticky;
  bottom: 0;
  z-index: 40;
  /* TRBL: links = -shell-pad, rechts = -shell-pad-r (nicht vertauscht) */
  margin: 0 calc(-1 * var(--shell-pad-r)) 0 calc(-1 * var(--shell-pad));
  padding: 0;
  background: var(--bar-bg);
  border-top: 1px solid var(--divider);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 -8px 28px rgba(70, 90, 140, 0.08);
  flex-direction: column;
  align-items: stretch;
  will-change: transform;
}
.mobile-bar-kb-tab {
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--mobile-bar-tab-h);
  height: var(--mobile-bar-tab-h);
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  overflow: visible;
}
.mobile-bar-kb-reiter {
  display: block;
  width: 2.6rem;
  height: 0.28rem;
  border-radius: 999px;
  background: rgba(124, 140, 255, 0.5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  position: relative;
  z-index: 0;
}
html[data-theme="dark"] .mobile-bar-kb-reiter {
  background: rgba(160, 175, 220, 0.55);
  box-shadow: none;
}

/* Pending-Mitteilung: rote Pfeile am Reiter (statt Ghost im Chat) */
.mobile-bar-kb-pending {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.mobile-bar-kb-pending.is-visible {
  opacity: 1;
}
.mobile-bar-kb-pending[hidden] {
  display: none !important;
}
.mobile-bar-kb-arrow {
  position: absolute;
  top: 50%;
  display: block;
  width: 0.72rem;
  height: 0.72rem;
  margin-top: -0.36rem;
  pointer-events: none;
}
.mobile-bar-kb-arrow--l {
  right: calc(50% + 1.55rem);
}
.mobile-bar-kb-arrow--r {
  left: calc(50% + 1.55rem);
}
.mobile-bar-kb-arrow-bob,
.mobile-bar-kb-arrow-spin {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  will-change: transform;
}
.mobile-bar-kb-arrow-glyph {
  display: block;
  width: 0;
  height: 0;
  filter: drop-shadow(0 1px 2px rgba(180, 40, 60, 0.45));
}
.mobile-bar-kb-arrow--l .mobile-bar-kb-arrow-glyph {
  /* ▶ zum Reiter */
  border-top: 0.28rem solid transparent;
  border-bottom: 0.28rem solid transparent;
  border-left: 0.48rem solid #e23c4a;
  margin-left: 0.12rem;
}
.mobile-bar-kb-arrow--r .mobile-bar-kb-arrow-glyph {
  /* ◀ zum Reiter */
  border-top: 0.28rem solid transparent;
  border-bottom: 0.28rem solid transparent;
  border-right: 0.48rem solid #e23c4a;
  margin-left: 0.12rem;
}
html[data-theme="dark"] .mobile-bar-kb-arrow--l .mobile-bar-kb-arrow-glyph {
  border-left-color: #ff5a6e;
}
html[data-theme="dark"] .mobile-bar-kb-arrow--r .mobile-bar-kb-arrow-glyph {
  border-right-color: #ff5a6e;
}
@media (prefers-reduced-motion: reduce) {
  .mobile-bar-kb-arrow-bob,
  .mobile-bar-kb-arrow-spin {
    will-change: auto;
  }
}
.mobile-bar-body {
  /*
   * Profilchip liegt absolut zwischen den Seiten-Slots — unabhängig davon,
   * ob Menü/Online position:fixed sind und aus dem Grid-Flow fallen.
   * (Fixed Grid-Items belegen keinen Auto-Placement-Slot → Chip rutschte
   * sonst in Spalte 1 unter den Menü-Button.)
   */
  --mobile-bar-gap: 0.5rem;
  --mobile-bar-pad-top: 0.45rem;
  --mobile-bar-pad-bottom: max(0.45rem, var(--safe-b));
  --mobile-bar-pad-left: max(0.55rem, var(--safe-l));
  --mobile-bar-pad-right: max(0.55rem, var(--safe-r));
  --mobile-bar-side: var(--nav-h);
  position: relative;
  display: grid;
  grid-template-columns: var(--mobile-bar-side) minmax(0, 1fr) var(--mobile-bar-side);
  gap: var(--mobile-bar-gap);
  align-items: center;
  padding:
    var(--mobile-bar-pad-top) var(--mobile-bar-pad-right)
    var(--mobile-bar-pad-bottom) var(--mobile-bar-pad-left);
  min-width: 0;
  min-height: calc(
    var(--mobile-bar-pad-top) + var(--mobile-bar-side) + var(--mobile-bar-pad-bottom)
  );
}
.mobile-bar-end {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex-shrink: 0;
  width: 100%;
  min-width: 0;
  min-height: var(--nav-h);
}
.mobile-bar-menu {
  grid-column: 1;
  position: relative;
  width: var(--nav-h);
  height: var(--nav-h);
  border: 1px solid var(--online);
  border-radius: 999px;
  background: var(--btn-surface-face);
  box-shadow: var(--btn-surface-3d);
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.mobile-bar-menu .hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 1.25rem;
  height: 1.05rem;
  position: relative;
}
.mobile-bar-menu .hamburger span {
  display: block;
  height: 2.5px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
  transition:
    transform 0.22s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.16s ease;
}
/* Menü offen: Hamburger → × zum Schliessen */
.app-root.drawer-menu .mobile-bar-menu .hamburger,
.mobile-bar-menu.active .hamburger {
  gap: 0;
}
.app-root.drawer-menu .mobile-bar-menu .hamburger span,
.mobile-bar-menu.active .hamburger span {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: -1.25px;
}
.app-root.drawer-menu .mobile-bar-menu .hamburger span:nth-child(1),
.mobile-bar-menu.active .hamburger span:nth-child(1) {
  transform: rotate(45deg);
}
.app-root.drawer-menu .mobile-bar-menu .hamburger span:nth-child(2),
.mobile-bar-menu.active .hamburger span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.app-root.drawer-menu .mobile-bar-menu .hamburger span:nth-child(3),
.mobile-bar-menu.active .hamburger span:nth-child(3) {
  transform: rotate(-45deg);
}
@media (prefers-reduced-motion: reduce) {
  .mobile-bar-menu .hamburger span {
    transition: none;
  }
}
.mobile-bar-menu .mobile-menu-activity-badge {
  position: absolute;
  top: 0.15rem;
  right: 0.15rem;
}
/*
 * .mobile-bar hat z-index 40 + will-change:transform → Stacking-Context.
 * Fixed Menü-/Online-Buttons mit z-index 80 bleiben darin gefangen und liegen
 * unter Backdrop (60) / Sheets (72+) / Menü-Drawer (76). Bar bei offenem
 * Drawer anheben, sonst ist der Menü-Button unten links nicht tappbar.
 */
.app-root.drawer-open .mobile-bar {
  z-index: 81;
}
/*
 * Menü-Button wie Online über Backdrop/Sheet/Drawer — immer erreichbar.
 * pointer-events:auto — auch wenn .mobile-bar-body im KB-Modus none hat.
 */
.app-root.drawer-open .mobile-bar-menu {
  position: fixed;
  left: max(0.55rem, var(--safe-l));
  bottom: max(0.45rem, var(--safe-b));
  z-index: 82;
  pointer-events: auto;
  background: var(--btn-surface-face);
  border: 1px solid var(--online);
  box-shadow: var(--btn-surface-3d);
}
html.kb-portrait .app-root.drawer-open .mobile-bar-menu {
  bottom: max(0.45rem, var(--mobile-bar-kb-pad, var(--mobile-bar-tab-h, 22px)));
}
/* Menü offen: gleiche Pille, Fläche und 3D-Kante wie die übrigen Menü-Buttons */
.app-root.drawer-menu .mobile-bar-menu,
.mobile-bar-menu.active {
  background: var(--btn-surface-face);
  border: 1px solid var(--online);
  border-radius: 999px;
  box-shadow: var(--btn-surface-3d);
  color: var(--ink);
  transform: none;
}
/*
 * Menü offen: Bar transparent / pointer-events:none → Taps gehen durch
 * aufs Menü. Profilchip, Online-Button und Menü-Button bleiben sichtbar
 * und mit pointer-events:auto bedienbar (über dem Overlay).
 */
.app-root.drawer-menu .mobile-bar {
  background: transparent;
  border-top-color: transparent;
  box-shadow: none;
  pointer-events: none;
}
.app-root.drawer-menu .mobile-bar-kb-tab {
  opacity: 0;
  pointer-events: none;
}
.app-root.drawer-menu .mobile-bar-user,
.app-root.drawer-menu .mobile-bar-end,
.app-root.drawer-menu .mobile-bar-menu {
  pointer-events: auto;
}
.mobile-bar-user {
  /* Fester Mittel-Slot: gleiche left/right-Insets wie Menü-/Online-Spur */
  position: absolute;
  left: calc(var(--mobile-bar-pad-left) + var(--mobile-bar-side) + var(--mobile-bar-gap));
  right: calc(var(--mobile-bar-pad-right) + var(--mobile-bar-side) + var(--mobile-bar-gap));
  top: var(--mobile-bar-pad-top);
  bottom: var(--mobile-bar-pad-bottom);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: auto;
  max-width: none;
  min-width: 0;
  min-height: 0;
  height: auto;
  box-sizing: border-box;
  padding: 0.3rem 0.55rem 0.3rem 0.3rem;
  border-radius: 16px;
  background: var(--surface-soft);
  border: 1px solid var(--divider);
  color: var(--ink);
  text-align: left;
  pointer-events: none;
  overflow: hidden;
}
.mobile-bar-user:has(.dm-inbox-btn:not([hidden])) {
  padding-right: 2.85rem;
}
.mobile-bar-user .avatar {
  flex: 0 0 auto;
  /* Im Chip kompakter als Chat-Avatare, damit Nick + Ort sichtbar bleiben */
  width: calc(2.05rem * min(var(--avatar-scale), 1.15));
  height: calc(2.05rem * min(var(--avatar-scale), 1.15));
  font-size: calc(0.85rem * min(var(--avatar-scale), 1.15));
}
.mobile-bar-user .dm-inbox-btn {
  position: absolute;
  right: 0.3rem;
  top: 0;
  bottom: 0;
  margin-block: auto;
  z-index: 2;
  pointer-events: auto;
  width: 2.35rem;
  height: 2.35rem;
  min-width: 2.35rem;
  min-height: 2.35rem;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 800;
  border: 2px solid #fff;
  background: linear-gradient(
    180deg,
    #f08a9a 0%,
    #d4546a 48%,
    color-mix(in srgb, #d4546a 70%, #5a1824) 100%
  );
  color: #fff;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1.5px 0 rgba(0, 0, 0, 0.2),
    0 2px 0 color-mix(in srgb, #d4546a 55%, #5a1824),
    0 5px 12px rgba(212, 84, 106, 0.45);
  animation: dm-inbox-pulse 1.6s ease-in-out infinite, dm-inbox-glow 2s ease-in-out infinite;
}
html[data-theme="dark"] .mobile-bar-user .dm-inbox-btn {
  border-color: rgba(255, 255, 255, 0.85);
  background: linear-gradient(
    180deg,
    #f0a0ad 0%,
    #e06b7e 48%,
    color-mix(in srgb, #e06b7e 70%, #5a1824) 100%
  );
  color: #fff;
}
.mobile-bar-name {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.08rem;
  overflow: hidden;
}
.mobile-bar-nick-row {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  min-width: 0;
  max-width: 100%;
}
.mobile-bar-name .nick-slot {
  display: block;
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  max-width: 10ch;
  font-size: 0.92rem;
  line-height: 1.15;
}
.mobile-bar-nick-row .guest-badge {
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.1;
}
.mobile-bar-nick-row .honors-row {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 0.12rem;
  margin-left: 0.08rem;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.mobile-bar-nick-row .honor-medal {
  width: 1.05rem;
  height: 1.35rem;
}
.mobile-bar-nick-row .honor-medal.honor-coin {
  width: 1.1rem;
  height: 1.1rem;
}
.mobile-bar-nick-row .honor-medal.honor-trophy,
.mobile-bar-nick-row .honor-medal.honor-ribbon {
  width: 1.15rem;
  height: 1.35rem;
}
.mobile-bar-name .hint,
.mobile-bar-place {
  font-size: 0.7rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
}
.mobile-bar-place .canton-flag,
.mobile-bar-place .place-flag {
  width: 13px;
  height: 13px;
  vertical-align: -0.12em;
}
.mobile-bar-online {
  position: relative;
  width: var(--nav-h);
  height: var(--nav-h);
  border: 1px solid var(--online);
  border-radius: 16px;
  background: var(--btn-surface-face);
  box-shadow: var(--btn-surface-3d);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.mobile-bar-online:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.mobile-bar-online .nav-ico {
  font-size: 1.25rem;
  line-height: 1;
}
/* Schliessen auf derselben Position wie Öffnen (über dem Online-Sheet) */
.app-root.drawer-online .mobile-bar-online {
  position: fixed;
  /* entspricht .mobile-bar padding-right / padding-bottom */
  right: max(0.55rem, var(--safe-r));
  bottom: max(0.45rem, var(--safe-b));
  z-index: 82;
  pointer-events: auto;
  background: var(--btn-surface-face);
  border: 1px solid var(--online);
  box-shadow: var(--btn-surface-3d);
}
html.kb-portrait .app-root.drawer-online .mobile-bar-online {
  bottom: max(0.45rem, var(--mobile-bar-kb-pad, var(--mobile-bar-tab-h, 22px)));
}
.app-root.drawer-online .mobile-bar-online.is-close .nav-ico {
  font-size: 1.65rem;
  font-weight: 500;
  line-height: 1;
}
/* Mobile drawers (Menü / Online) */
.drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(20, 28, 48, 0.45);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.app-root.drawer-open .drawer-backdrop {
  display: block;
  opacity: 1;
}
/* Desktop: Backdrop nur über dem Chat — Seitenmenü bleibt erreichbar */
.drawer-backdrop.is-chat-sized {
  border-radius: 22px;
}
.mobile-drawer {
  display: none;
  position: fixed;
  z-index: 70;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: min(85vh, 640px);
  margin: 0;
  border-radius: 26px 26px 0 0;
  /* TRBL: right=safe-r, left=safe-l (nicht vertauscht) */
  padding:
    0.55rem max(1rem, var(--safe-r))
    max(1rem, var(--safe-b))
    max(1rem, var(--safe-l));
  flex-direction: column;
  gap: 0.65rem;
  overflow: hidden;
  /* Heller, farbiger Sheet-Hintergrund statt grauem Glas */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 248, 255, 0.97) 45%, rgba(240, 252, 248, 0.97) 100%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-bottom: 0;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 -18px 52px rgba(70, 90, 140, 0.18);
  transform: translateY(12px);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.25s ease;
  touch-action: pan-y;
}
.mobile-drawer.is-open {
  opacity: 1;
  transform: translateY(0);
}
.mobile-drawer.is-closing {
  opacity: 0;
  transform: translateY(12px);
}
.mobile-menu-drawer {
  max-height: none;
}
.mobile-drawer.is-dragging {
  transition: none;
  touch-action: none;
}
html[data-theme="dark"] .mobile-drawer {
  background:
    linear-gradient(180deg, rgba(36, 46, 72, 0.98) 0%, rgba(28, 38, 58, 0.98) 50%, rgba(24, 42, 48, 0.98) 100%);
  border-color: rgba(140, 160, 200, 0.28);
  box-shadow: 0 -18px 52px rgba(0, 0, 0, 0.45);
}
.mobile-drawer::before { display: none; }
.drawer-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0.05rem 0 0.15rem;
  padding: 0.45rem 0 0.2rem;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.drawer-handle span {
  display: block;
  width: 3rem;
  height: 0.34rem;
  border-radius: 999px;
  background: rgba(124, 140, 255, 0.45);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
html[data-theme="dark"] .drawer-handle span {
  background: rgba(160, 175, 220, 0.55);
  box-shadow: none;
}
.mobile-drawer.is-dragging .drawer-handle {
  cursor: grabbing;
}
.mobile-menu-drawer .drawer-head,
.mobile-online-drawer .drawer-head,
.mobile-scope-drawer .drawer-head,
.mobile-view-drawer .drawer-head,
.mobile-guide-drawer .drawer-head,
.mobile-doc-drawer .drawer-head {
  cursor: grab;
  touch-action: none;
}
.mobile-menu-drawer.is-dragging .drawer-head,
.mobile-online-drawer.is-dragging .drawer-head,
.mobile-scope-drawer.is-dragging .drawer-head,
.mobile-view-drawer.is-dragging .drawer-head,
.mobile-guide-drawer.is-dragging .drawer-head,
.mobile-doc-drawer.is-dragging .drawer-head {
  cursor: grabbing;
}
/* Mitteilungen + Ansichts-Sheets: Bottom-Sheets (bis zur Mobile-Bar) */
.app-root.drawer-scope .mobile-scope-drawer,
.app-root.drawer-dm .mobile-dm-drawer,
.app-root.drawer-view .mobile-view-drawer,
.app-root.drawer-guide .mobile-guide-drawer,
.app-root.drawer-doc .mobile-doc-drawer {
  display: flex;
  top: 0;
  bottom: calc(var(--nav-h) + 0.9rem + var(--safe-b));
  left: 0;
  right: 0;
  width: auto;
  height: auto;
  max-height: none;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  padding-top: max(0.35rem, var(--safe-t));
  box-shadow: none;
  transform: translateY(12px);
}
.app-root.drawer-scope .mobile-scope-drawer.is-open,
.app-root.drawer-dm .mobile-dm-drawer.is-open,
.app-root.drawer-view .mobile-view-drawer.is-open,
.app-root.drawer-guide .mobile-guide-drawer.is-open,
.app-root.drawer-doc .mobile-doc-drawer.is-open {
  transform: translateY(0);
  opacity: 1;
}
/*
 * Soft-Keyboard (interactive-widget=resizes-content): Layout-Viewport wird oft «landscape».
 * html.kb-portrait (JS: Geräte-Portrait) erzwingt Mobile-Chrome + volle Overlay-Höhe.
 */
@media (max-width: 860px) {
  html.kb-portrait .app-shell {
    grid-template-columns: 1fr !important;
  }
  html.kb-portrait .app-shell > .desk-side,
  html.kb-portrait .app-shell.has-online > .online-rail {
    display: none !important;
  }
  html.kb-portrait .mobile-bar {
    display: flex !important;
  }
  html.kb-portrait .app-root.drawer-scope .mobile-scope-drawer,
  html.kb-portrait .app-root.drawer-dm .mobile-dm-drawer,
  html.kb-portrait .app-root.drawer-view .mobile-view-drawer,
  html.kb-portrait .app-root.drawer-guide .mobile-guide-drawer,
  html.kb-portrait .app-root.drawer-doc .mobile-doc-drawer {
    display: flex !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    /* Layout-Unterkante = Tastatur-Oberkante */
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    transform: none !important;
    border-radius: 0 !important;
  }
  html.kb-portrait .app-root.drawer-menu .mobile-menu-drawer,
  html.kb-portrait .app-root.drawer-online .mobile-online-drawer {
    display: flex !important;
    padding-bottom: max(
      calc(var(--mobile-bar-kb-pad, var(--mobile-bar-tab-h, 22px)) + var(--safe-b) + 0.35rem),
      calc(2.2rem + var(--safe-b))
    );
  }
  html.kb-portrait .scope-picker-sheet {
    bottom: 0 !important;
  }
  html.kb-portrait .app-root.drawer-open .drawer-backdrop {
    display: block !important;
    inset: 0 !important;
  }
  html.kb-portrait .app-root.drawer-view .chat-frame .composer,
  html.kb-portrait .app-root.drawer-guide .chat-frame .composer,
  html.kb-portrait .app-root.drawer-doc .chat-frame .composer,
  html.kb-portrait .app-root.drawer-dm .chat-frame .composer,
  html.kb-portrait .app-root.drawer-scope .chat-frame .composer {
    visibility: hidden;
    pointer-events: none;
  }
}
.mobile-online-drawer,
.mobile-scope-drawer,
.mobile-view-drawer {
  max-height: none;
  z-index: 72;
}
.app-root.drawer-scope .mobile-scope-drawer {
  z-index: 73;
}

/*
 * Menü (links) + Online (rechts): Seitenschubladen mit translateX.
 * Reiter am offenen Rand — horizontal wischen zum Schliessen.
 */
.app-root.drawer-menu .mobile-menu-drawer,
.app-root.drawer-online .mobile-online-drawer {
  display: flex;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  padding-top: max(0.35rem, var(--safe-t));
  padding-bottom: max(
    calc(var(--nav-h) + 0.85rem + var(--safe-b)),
    calc(4.4rem + var(--safe-b))
  );
  border-radius: 0;
  border-top: 0;
  border-bottom: 0;
  overflow: visible;
  touch-action: pan-y;
  pointer-events: auto;
}
.app-root.drawer-menu .mobile-menu-drawer {
  z-index: 76;
  border-left: 0;
  border-right: 0;
  /* Symmetrisch — Inhalt mittig, Reiter überlappt innen */
  --menu-pad-x: max(1rem, var(--safe-l), var(--safe-r));
  padding-left: var(--menu-pad-x);
  padding-right: var(--menu-pad-x);
  box-shadow: none;
  transform: translateX(-100%);
  opacity: 0;
  align-items: center;
}
.app-root.drawer-online .mobile-online-drawer {
  z-index: 73;
  border-left: 0;
  border-right: 0;
  padding-left: 1.15rem;
  box-shadow: none;
  transform: translateX(100%);
  opacity: 0;
}
.app-root.drawer-menu .mobile-menu-drawer.is-open,
.app-root.drawer-online .mobile-online-drawer.is-open {
  transform: translateX(0);
  opacity: 1;
}
.app-root.drawer-menu .mobile-menu-drawer.is-closing {
  transform: translateX(-100%);
  opacity: 0;
}
.app-root.drawer-online .mobile-online-drawer.is-closing {
  transform: translateX(100%);
  opacity: 0;
}
html[data-theme="dark"] .app-root.drawer-menu .mobile-menu-drawer {
  box-shadow: 12px 0 40px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] .app-root.drawer-online .mobile-online-drawer {
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45);
}
/* Vertikaler Wisch-Reiter am offenen Rand (wie horizontaler Handle oben) */
.mobile-menu-drawer > .drawer-handle,
.mobile-online-drawer > .drawer-handle {
  position: absolute;
  top: 50%;
  margin: 0;
  padding: 1.1rem 0.55rem;
  z-index: 30;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 2px 10px rgba(70, 90, 140, 0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
html[data-theme="dark"] .mobile-menu-drawer > .drawer-handle,
html[data-theme="dark"] .mobile-online-drawer > .drawer-handle {
  background: rgba(36, 46, 72, 0.88);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.mobile-menu-drawer > .drawer-handle {
  /* Volle Breite: Reiter innen am rechten Rand (sonst außerhalb des Viewports) */
  right: 0.15rem;
  left: auto;
}
.mobile-online-drawer > .drawer-handle {
  left: 0.15rem;
  right: auto;
}
.mobile-menu-drawer > .drawer-handle span,
.mobile-online-drawer > .drawer-handle span {
  width: 0.38rem;
  height: 3.25rem;
}
.mobile-menu-drawer.is-dragging > .drawer-handle,
.mobile-online-drawer.is-dragging > .drawer-handle {
  transform: translateY(-50%);
}
.app-root.drawer-guide .mobile-guide-drawer,
.app-root.drawer-doc .mobile-doc-drawer {
  z-index: 75;
}
.mobile-guide-drawer,
.mobile-doc-drawer {
  max-height: none;
}
.mobile-view-drawer-body,
.mobile-guide-drawer-body,
.mobile-doc-drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* pan-y: nativer Vertikal-Scroll; Horizontal-Wisch via JS (Axis-Lock + preventDefault) */
  touch-action: pan-y;
}
/* Gesamte Overlay-Fläche (nicht nur .drawer-head) für Menü-Wisch */
.mobile-view-drawer,
.mobile-guide-drawer {
  touch-action: pan-y;
}
.mobile-doc-drawer-body {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.mobile-doc-drawer-body .doc-overlay-frame {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  border: 0;
  background: #fff;
}
html[data-theme="dark"] .mobile-doc-drawer-body .doc-overlay-frame {
  background: #050608;
}
.mobile-view-drawer-body > .glass,
.mobile-view-drawer-body > .panel-scroll {
  height: auto !important;
  max-height: none !important;
  min-height: 0;
  overflow: visible !important;
  flex: none !important;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding-left: 0;
  padding-right: 0;
}
.app-root.drawer-dm .mobile-dm-drawer {
  z-index: 73;
}
/* Mobile: Menüpunkte in jedem Overlay + Horizontal-Wisch */
.overlay-menu-strip {
  display: none;
  flex-shrink: 0;
  gap: 0.4rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 0.15rem 0 0.55rem;
  margin: 0 -0.15rem;
  border-bottom: 1px solid var(--divider);
  touch-action: pan-x;
}
.overlay-menu-strip::-webkit-scrollbar {
  display: none;
}
@media (max-width: 860px) {
  .overlay-menu-strip {
    display: flex;
  }
  /*
   * Profil-Overlay Sticky-Stack (Smartphone):
   * 1) .drawer-head (Close) — flex, ausserhalb Scroll
   * 2) .overlay-menu-strip — flex / sticky, z-index 6
   * 3) .profile-sticky-top (Subnav-Links) — sticky im Body, z-index 5
   * 4) Formular — scrollt darunter
   */
  .mobile-view-drawer .overlay-menu-strip {
    position: sticky;
    top: 0;
    z-index: 6;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 248, 255, 0.97) 100%);
    margin-left: 0;
    margin-right: 0;
    padding-left: 0.05rem;
    padding-right: 0.05rem;
  }
  html[data-theme="dark"] .mobile-view-drawer .overlay-menu-strip {
    background:
      linear-gradient(180deg, rgba(36, 46, 72, 0.98) 0%, rgba(28, 38, 58, 0.98) 100%);
  }
  .mobile-view-drawer.is-profile .drawer-head h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .mobile-view-drawer-body .profile-sticky-top {
    position: sticky;
    top: 0;
    z-index: 5;
    margin-bottom: 0.85rem;
    padding: 0.35rem 0 0;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 248, 255, 0.97) 72%, rgba(245, 248, 255, 0.88) 100%);
    border-bottom: 1px solid var(--divider);
  }
  html[data-theme="dark"] .mobile-view-drawer-body .profile-sticky-top {
    background:
      linear-gradient(180deg, rgba(36, 46, 72, 0.98) 0%, rgba(28, 38, 58, 0.98) 72%, rgba(28, 38, 58, 0.9) 100%);
  }
}
.overlay-menu-link {
  flex: 0 0 auto;
  appearance: none;
  border: 1px solid var(--divider);
  background: var(--surface-soft);
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 0.42rem 0.75rem;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.overlay-menu-link.is-active {
  background: var(--nav-hover);
  border-color: rgba(124, 140, 255, 0.45);
  color: var(--accent, #4b5fd6);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
html[data-theme="dark"] .overlay-menu-link.is-active {
  background: rgba(124, 140, 255, 0.22);
  border-color: rgba(160, 175, 220, 0.4);
  color: #c5d0ff;
  box-shadow: none;
}
.overlay-menu-link .nav-activity-badge,
.overlay-menu-link .chat-unread-badge,
.overlay-menu-link .friends-activity-badge {
  position: static;
  transform: none;
}
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-shrink: 0;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--divider);
}
.drawer-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.drawer-close {
  width: 2.65rem;
  height: 2.65rem;
  border: 0;
  border-radius: 14px;
  background: var(--btn-surface-face);
  box-shadow: var(--btn-surface-3d);
  border: 1px solid var(--online);
  color: var(--ink);
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  position: relative;
  transform-origin: center;
}
.mobile-menu-drawer .theme-toggle-row {
  align-self: center;
  width: min(22rem, 100%);
  max-width: 100%;
  margin: 0.15rem 0 0.45rem;
  padding: 0.65rem 0.85rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(124, 140, 255, 0.18);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  text-align: center;
}
.mobile-menu-drawer .theme-toggle-row .hint {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  margin: 0;
  text-align: center;
}
.mobile-menu-drawer .theme-toggle-row .theme-pref-pills {
  margin: 0;
  justify-content: center;
  width: auto;
  max-width: 100%;
}
html[data-theme="dark"] .mobile-menu-drawer .theme-toggle-row {
  background: rgba(48, 60, 90, 0.75);
  border-color: rgba(140, 160, 200, 0.22);
}
.mobile-menu-drawer .user-chip {
  margin: 0 auto 0.45rem;
  padding: 0.7rem 0.75rem;
  border-radius: 18px;
  background: rgba(124, 140, 255, 0.14);
  border: 1px solid rgba(124, 140, 255, 0.2);
  align-self: center;
  width: min(22rem, 100%);
  max-width: 100%;
  box-sizing: border-box;
}
html[data-theme="dark"] .mobile-menu-drawer .user-chip {
  background: rgba(124, 140, 255, 0.18);
  border-color: rgba(140, 160, 200, 0.22);
}
.mobile-menu-drawer .user-chip .avatar {
  width: calc(3rem * var(--avatar-scale));
  height: calc(3rem * var(--avatar-scale));
  font-size: calc(1.15rem * var(--avatar-scale));
}
.mobile-menu-drawer .user-chip strong {
  font-size: 1.05rem;
}
.mobile-menu-drawer .drawer-head {
  position: relative;
  justify-content: center;
  width: min(22rem, 100%);
  max-width: 100%;
  box-sizing: border-box;
  padding-left: 2.65rem;
  padding-right: 2.65rem;
}
.mobile-menu-drawer .drawer-head h2 {
  justify-content: center;
  text-align: center;
  width: 100%;
}
.mobile-menu-drawer .drawer-head .drawer-close {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.mobile-menu-drawer .nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.15rem 0 0.35rem;
  min-height: 0;
  flex: 1 1 auto;
  align-self: center;
  width: min(22rem, 100%);
  max-width: 100%;
  box-sizing: border-box;
}
.mobile-menu-drawer .nav-section,
.mobile-menu-drawer .nav-section-tabs,
.mobile-menu-drawer .nav-section-items,
.mobile-menu-drawer .nav > #logout-btn {
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  box-sizing: border-box;
}
.mobile-menu-drawer .nav-section-title {
  margin: 0 0 0.35rem;
  text-align: center;
}
.mobile-menu-drawer .nav button:not(.nav-section-tab),
.mobile-menu-drawer .nav a.nav-legal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  min-height: var(--tap);
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  text-align: center;
  color: var(--ink);
  background: var(--btn-surface-face);
  box-shadow: var(--btn-surface-3d);
  border: 1px solid var(--online);
  cursor: pointer;
  touch-action: manipulation;
  text-decoration: none;
  box-sizing: border-box;
}
.mobile-menu-drawer .nav .nav-section-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
/* Gleiche Farben wie Chat/Weitere — Tabs und Einträge teilen dieselben Regeln */
html[data-theme="dark"] .mobile-menu-drawer .nav button:not(.ghost),
html[data-theme="dark"] .mobile-menu-drawer .nav a.nav-legal {
  background: var(--btn-surface-face);
  border-color: var(--online);
  color: rgba(238, 243, 252, 0.68);
}
.mobile-menu-drawer .nav button:not(.ghost).active,
.mobile-menu-drawer .nav a.nav-legal.active {
  background: var(--btn-surface-face-active);
  border-color: var(--online);
  font-weight: 700;
}
html[data-theme="dark"] .mobile-menu-drawer .nav button:not(.ghost).active,
html[data-theme="dark"] .mobile-menu-drawer .nav a.nav-legal.active {
  background: var(--btn-surface-face-active);
  border-color: var(--online);
  color: var(--ink);
}
.mobile-menu-drawer .nav button.ghost {
  margin-top: 0.25rem;
  color: var(--muted);
  font-weight: 600;
  background: transparent;
  border: 2px solid #ff8a1a;
  box-shadow:
    0 0 6px rgba(255, 138, 26, 0.7),
    0 0 16px rgba(255, 138, 26, 0.45),
    0 0 32px rgba(255, 138, 26, 0.25);
}
html[data-theme="dark"] .mobile-menu-drawer .nav button.ghost {
  background: transparent;
  border: 2px solid #ff9a33;
  box-shadow:
    0 0 8px rgba(255, 154, 51, 0.75),
    0 0 18px rgba(255, 154, 51, 0.5),
    0 0 36px rgba(255, 154, 51, 0.3);
  color: rgba(238, 243, 252, 0.55);
}
@media (hover: hover) and (pointer: fine) {
  .mobile-menu-drawer .nav button:hover:not(.ghost):not(.nav-section-tab),
  .mobile-menu-drawer .nav a.nav-legal:hover {
    background: var(--btn-surface-face-active);
    border-color: var(--online);
  }
  .mobile-menu-drawer .nav button:not(.nav-section-tab).active:hover,
  .mobile-menu-drawer .nav a.nav-legal.active:hover {
    background: var(--btn-surface-face-active);
  }
  .mobile-menu-drawer .nav button.ghost:hover {
    background: transparent;
    border-color: #ff9a33;
    box-shadow:
      0 0 8px rgba(255, 138, 26, 0.85),
      0 0 20px rgba(255, 138, 26, 0.55),
      0 0 40px rgba(255, 138, 26, 0.32);
    color: var(--ink);
  }
  html[data-theme="dark"] .mobile-menu-drawer .nav button:hover:not(.ghost),
  html[data-theme="dark"] .mobile-menu-drawer .nav a.nav-legal:hover {
    background: var(--btn-surface-face-active);
    color: var(--ink);
  }
  html[data-theme="dark"] .mobile-menu-drawer .nav button.active:hover,
  html[data-theme="dark"] .mobile-menu-drawer .nav a.nav-legal.active:hover {
    background: var(--btn-surface-face-active);
  }
}
.mobile-menu-drawer .nav button.nav-with-badge {
  justify-content: center;
}
.mobile-menu-drawer .nav-activity-badge {
  min-width: 1.65rem;
  height: 1.65rem;
  font-size: 0.8rem;
}
.mobile-online-drawer .online-list,
.mobile-scope-drawer .online-list {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: 0.5rem;
}
.mobile-online-drawer .online-user,
.mobile-scope-drawer .scope-pick-item {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(124, 140, 255, 0.12);
  margin-bottom: 0;
}
html[data-theme="dark"] .mobile-online-drawer .online-user,
html[data-theme="dark"] .mobile-scope-drawer .scope-pick-item {
  background: rgba(48, 60, 90, 0.2);
  border-color: rgba(140, 160, 200, 0.18);
}
.mobile-online-drawer .online-list > .online-user + .online-user,
.mobile-scope-drawer .online-list > .scope-pick-item + .scope-pick-item {
  margin-top: 0.35rem;
}
/* Kanton/Gemeinde-Drawer: Liste wie Online (kein grauer Kasten) */
.mobile-scope-drawer .scope-pick-list {
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 0 0 0.5rem;
}
.mobile-scope-drawer .scope-pick-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  border-radius: 14px;
  padding: 0.65rem 0.75rem;
  min-height: var(--tap);
}
.mobile-scope-drawer .scope-pick-item.active {
  background: rgba(124, 140, 255, 0.18);
  border-color: rgba(124, 140, 255, 0.35);
  font-weight: 700;
}
html[data-theme="dark"] .mobile-scope-drawer .scope-pick-item.active {
  background: rgba(124, 140, 255, 0.22);
  border-color: var(--accent);
}
.mobile-scope-drawer .scope-pick-count {
  background: rgba(124, 140, 255, 0.12);
  border-color: rgba(124, 140, 255, 0.2);
  color: var(--ink);
}
html[data-theme="dark"] .mobile-scope-drawer .scope-pick-count {
  background: rgba(6, 10, 18, 0.55);
  border-color: rgba(140, 160, 200, 0.28);
  color: #d4deef;
}
@media (min-width: 861px) {
  html[data-theme="dark"] .app-root.drawer-scope .mobile-scope-drawer {
    border-color: rgba(140, 160, 200, 0.28);
  }
  .app-root.drawer-scope .mobile-scope-drawer .drawer-handle {
    opacity: 0.85;
  }
}

/* —— Chat —— */
.chat-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.chat-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .55rem;
  padding: .75rem .9rem;
  border-bottom: 1px solid var(--divider);
  flex-shrink: 0;
}
.chat-head-top {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  width: 100%;
  min-width: 0;
  overflow: visible;
}
.chat-head-start {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 1 1 auto;
  min-width: 0;
  z-index: 2;
}
.chat-head-aside {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  min-width: 0;
  z-index: 2;
}
/* Mobil: Mitteilungen bleiben in der App-Leiste — nicht doppelt im Chat-Kopf */
@media (max-width: 860px) {
  .chat-head-aside > .dm-inbox-btn {
    display: none !important;
  }
}
.chat-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 3.2vw, 1.25rem);
  line-height: 1.2;
}
.chat-status { font-size: .82rem; color: var(--muted); }
.chat-status.online { color: var(--online); }
.chat-head-tools {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  width: 100%;
  justify-content: stretch;
  min-width: 0;
}
.chat-head-tools .scope-pills {
  margin: 0;
  flex: 1 1 auto;
  width: 100%;
  justify-content: stretch;
  min-width: 0;
}
.chat-head .scope-pills button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 2.5rem;
  padding: .4rem .75rem;
  font-size: .9rem;
}
.dm-inbox-btn {
  flex: 0 0 auto;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  border: 1px solid #d4546a;
  background: linear-gradient(
    180deg,
    rgba(255, 210, 218, 0.95) 0%,
    rgba(212, 84, 106, 0.28) 48%,
    rgba(194, 61, 85, 0.38) 100%
  );
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1.5px 0 rgba(120, 30, 45, 0.18),
    0 2px 0 rgba(180, 50, 70, 0.28),
    0 5px 12px rgba(212, 84, 106, 0.22);
  color: #c23d55;
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: dm-inbox-pulse 1.6s ease-in-out infinite;
}
.dm-inbox-btn[hidden] { display: none !important; }
.dm-inbox-count { display: inline-block; min-width: 1ch; }
@keyframes dm-inbox-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@keyframes dm-inbox-glow {
  0%, 100% {
    box-shadow:
      inset 0 1.5px 0 rgba(255, 255, 255, 0.4),
      inset 0 -1.5px 0 rgba(0, 0, 0, 0.2),
      0 2px 0 color-mix(in srgb, #d4546a 55%, #5a1824),
      0 5px 12px rgba(212, 84, 106, 0.45),
      0 0 0 0 rgba(212, 84, 106, 0.4);
  }
  50% {
    box-shadow:
      inset 0 1.5px 0 rgba(255, 255, 255, 0.4),
      inset 0 -1.5px 0 rgba(0, 0, 0, 0.2),
      0 2px 0 color-mix(in srgb, #d4546a 55%, #5a1824),
      0 5px 12px rgba(212, 84, 106, 0.45),
      0 0 0 6px rgba(212, 84, 106, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dm-inbox-btn { animation: none; }
}
html[data-theme="dark"] .dm-inbox-btn {
  border-color: #e06b7e;
  background: linear-gradient(
    180deg,
    rgba(240, 160, 173, 0.45) 0%,
    rgba(224, 107, 126, 0.28) 48%,
    rgba(160, 50, 70, 0.4) 100%
  );
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1.5px 0 rgba(0, 0, 0, 0.35),
    0 2px 0 rgba(120, 40, 55, 0.4),
    0 5px 12px rgba(0, 0, 0, 0.35);
  color: #f0a0ad;
}
.mobile-dm-drawer {
  max-height: none;
  touch-action: pan-y;
}
.mobile-dm-drawer::before { display: none; }
html[data-theme="dark"] .mobile-dm-drawer {
  border-color: rgba(140, 160, 200, 0.28);
}
.dm-inbox-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.dm-inbox-list .empty {
  padding: 1rem 0.25rem;
  color: var(--muted);
}
.dm-inbox-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.7rem;
  border: 1px solid var(--divider);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  color: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
html[data-theme="dark"] .dm-inbox-item {
  background: rgba(28, 38, 58, 0.72);
}
.dm-inbox-item .avatar {
  width: calc(2.55rem * var(--avatar-scale));
  height: calc(2.55rem * var(--avatar-scale));
  flex-shrink: 0;
  font-size: calc(1rem * var(--avatar-scale));
}
.dm-inbox-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}
.dm-inbox-meta strong {
  font-size: 0.98rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-inbox-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  font-size: 0.78rem;
  color: var(--muted);
}
.dm-inbox-sub-count { opacity: 0.9; }
.dm-kind {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  border: 1px solid transparent;
}
.dm-kind-ico { letter-spacing: -0.12em; }
.dm-kind-text {
  background: rgba(124, 140, 255, 0.14);
  border-color: rgba(124, 140, 255, 0.28);
  color: #4d5fd6;
}
.dm-kind-file {
  background: rgba(42, 155, 122, 0.14);
  border-color: rgba(42, 155, 122, 0.3);
  color: #1f7a5f;
}
.dm-kind-both {
  background: rgba(212, 84, 106, 0.12);
  border-color: rgba(212, 84, 106, 0.28);
  color: #c23d55;
}
html[data-theme="dark"] .dm-kind-text {
  background: rgba(124, 140, 255, 0.2);
  color: #b4beff;
}
html[data-theme="dark"] .dm-kind-file {
  background: rgba(42, 155, 122, 0.22);
  color: #7ddec0;
}
html[data-theme="dark"] .dm-kind-both {
  background: rgba(224, 107, 126, 0.2);
  color: #f0a0ad;
}
.dm-inbox-item-count {
  flex: 0 0 auto;
  min-width: 1.45rem;
  height: 1.45rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: #d4546a;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html[data-theme="dark"] .dm-inbox-item-count {
  background: #e06b7e;
}

.messages-shell {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.messages {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Neue Msgs nicht per Browser-Anchoring sofort einblenden — wir scrollen selbst */
  overflow-anchor: none;
  touch-action: pan-y;
  padding: .85rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.scroll-bottom-btn {
  position: absolute;
  right: max(0.75rem, var(--safe-r));
  bottom: 0.75rem;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.85rem;
  border: 1px solid var(--online);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  --scroll-btn-shadow: 0 8px 24px rgba(70, 90, 140, 0.18);
  box-shadow: var(--scroll-btn-shadow);
  cursor: pointer;
  touch-action: manipulation;
  font: inherit;
  font-weight: 700;
  transform-origin: center;
  animation:
    scroll-bottom-pump 1.8s ease-in-out infinite,
    scroll-bottom-neon 2.4s ease-in-out infinite;
}
.scroll-bottom-btn[hidden] {
  display: none !important;
}

.scroll-bottom-ico {
  font-size: 1.15rem;
  line-height: 1;
}
.scroll-bottom-count {
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: #d4546a;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.scroll-bottom-count[hidden] {
  display: none !important;
}
html[data-theme="dark"] .scroll-bottom-btn {
  background: rgba(28, 38, 58, 0.96);
  border-color: var(--online);
  color: var(--ink);
  --scroll-btn-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  box-shadow: var(--scroll-btn-shadow);
}
@keyframes scroll-bottom-pump {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@keyframes scroll-bottom-neon {
  0%, 100% {
    border-color: color-mix(in srgb, var(--online) 72%, transparent);
    box-shadow:
      var(--scroll-btn-shadow),
      0 0 4px 0 color-mix(in srgb, var(--online) 12%, transparent),
      0 0 10px 0 color-mix(in srgb, var(--online) 0%, transparent);
  }
  50% {
    border-color: var(--online);
    box-shadow:
      var(--scroll-btn-shadow),
      0 0 12px 2px color-mix(in srgb, var(--online) 48%, transparent),
      0 0 26px 6px color-mix(in srgb, var(--online) 28%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-bottom-btn {
    animation: none;
  }
}
.msg-row {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  max-width: 100%;
  align-self: flex-start;
  flex-direction: row;
  box-sizing: border-box;
}
/* Neue Nachricht baut sich unter der letzten auf, während der Scroll sie hochschiebt */
.msg-row.msg-row--enter {
  animation: msg-row-build 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transform-origin: center bottom;
  will-change: transform, opacity;
}
/* Mobile: Enter-Animation 20 % langsamer (gleicher Takt wie Scroll-to-Bottom) */
@media (max-width: 860px) {
  .msg-row.msg-row--enter {
    animation-duration: 0.504s;
  }
}
@keyframes msg-row-build {
  from {
    opacity: 0;
    transform: translateY(1.25rem) scaleY(0.82);
  }
  55% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .msg-row.msg-row--enter {
    animation: none;
    will-change: auto;
  }
}
.msg-row.mine {
  align-self: flex-end;
  flex-direction: row;
}
/* Meine Nachrichten links → andere rechts (Avatar aussen) */
html[data-msg-side="left"] .msg-row {
  align-self: flex-end;
  flex-direction: row-reverse;
}
html[data-msg-side="left"] .msg-row.mine {
  align-self: flex-start;
  flex-direction: row;
}
.msg-avatar-btn,
.msg-avatar-static {
  position: relative;
  flex-shrink: 0;
  width: calc(2.35rem * var(--avatar-scale));
  height: calc(2.35rem * var(--avatar-scale));
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 50%;
  cursor: default;
}
/* Verbindungslinie Avatar ↔ Nachricht — exakt Farbring (= Avatar-Ring) */
.msg-avatar-btn::after,
.msg-avatar-static::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(100% + 1px);
  right: auto;
  width: calc(0.7rem - 2px);
  height: 3.5px;
  margin-top: -1.75px;
  border-radius: 3px;
  background: var(--msg-ring);
  pointer-events: none;
}
html[data-msg-side="left"] .msg-row:not(.mine) .msg-avatar-btn::after,
html[data-msg-side="left"] .msg-row:not(.mine) .msg-avatar-static::after {
  left: auto;
  right: calc(100% + 1px);
}
.msg-avatar-btn {
  cursor: pointer;
  touch-action: manipulation;
}
.msg-avatar-btn .avatar,
.msg-avatar-static .avatar {
  width: calc(2.35rem * var(--avatar-scale));
  height: calc(2.35rem * var(--avatar-scale));
  font-size: calc(.95rem * var(--avatar-scale));
}
.msg {
  min-width: 0;
  flex: 1 1 auto;
  max-width: 100%;
  /* Höhe folgt dem Text — kein max-height. overflow:hidden (nicht
     overflow-x:hidden + overflow-y:visible): sonst rechnet der Browser
     y als auto → Scrollbar-Flash bei animierten Smileys. */
  overflow: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  box-sizing: border-box;
  padding: 0.35rem 0.65rem;
  border-radius: 16px;
  /* Fill = Farbring-Wash (--msg-bg / --msg-mine-bg je Theme); border = Farbring */
  background: var(--msg-bg);
  border: 2px solid var(--msg-ring);
  color: var(--ink);
}
.msg::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.msg.mine {
  background: var(--msg-mine-bg);
  color: var(--msg-mine-ink, var(--ink));
  /* Eigene Bubbles: dicke Umrandung, Nuance heller/dunkler als Avatar (--msg-ring-edge) */
  border: 5px solid var(--msg-ring-edge, var(--msg-ring));
  outline: none;
  box-shadow: none;
}
.msg.mine .hint,
.msg.mine .when,
.msg.mine .msg-place {
  color: color-mix(in srgb, var(--msg-mine-ink, var(--ink)) 72%, transparent);
}
/* Gleicher dicker Kontrast-Rand um den eigenen Avatar */
.msg-row.mine .msg-avatar-btn,
.msg-row.mine .msg-avatar-static {
  border-radius: 50%;
  box-shadow: 0 0 0 5px var(--msg-ring-edge, var(--msg-ring));
}
.msg-row.mine .avatar.avatar-photo {
  box-shadow: none;
}
html[data-msg-side="left"] .msg-row:not(.mine) .msg {
  border-top-right-radius: 6px;
}
html[data-msg-side="left"] .msg-row.mine .msg,
html:not([data-msg-side="left"]) .msg-row:not(.mine) .msg {
  border-top-left-radius: 6px;
}
html:not([data-msg-side="left"]) .msg-row.mine .msg {
  border-top-right-radius: 6px;
}
.msg .who {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.22rem 0.35rem;
  font-weight: 700;
  font-size: .85rem;
  line-height: 1.2;
  margin-bottom: .12rem;
  min-width: 0;
}
.msg .who .msg-nick-btn {
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
}
.msg .who .guest-badge,
.msg .who .when {
  line-height: 1.2;
  flex-shrink: 0;
}
.msg .when {
  color: var(--muted);
  font-size: .75rem;
  margin-left: auto;
  font-weight: 400;
}
.msg .body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  /* Kein Scroll / kein max-height — Blase wächst mit dem Text */
  overflow: hidden;
  max-height: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Wie früher: Body-Schrift (~16px); Admin kann --msg-font-size setzen */
  font-size: var(--msg-font-size, 1rem);
  line-height: 1.35;
}
.msg .body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.composer {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  padding: .65rem .75rem max(.65rem, calc(.25rem + var(--safe-b)));
  border-top: 1px solid var(--divider);
  flex-shrink: 0;
  background: var(--composer-bg);
}
.composer textarea,
.composer input {
  flex: 1;
  min-width: 0;
  min-height: var(--tap);
  max-height: 8rem;
  resize: none;
  line-height: 1.35;
  padding: .7rem .85rem;
  field-sizing: content;
}
.composer .btn {
  flex-shrink: 0;
  min-width: var(--tap);
  padding-left: 1rem;
  padding-right: 1rem;
}

.panel-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.list-people { list-style: none; margin: 0; padding: 0; }
.list-people li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  /* Links etwas Luft: Avatar-Ring (box-shadow) nicht abschneiden */
  padding: .75rem 0 .75rem 4px;
  border-bottom: 1px solid rgba(90,110,150,.1);
  flex-wrap: wrap;
}
.list-people .info { display: flex; align-items: center; gap: .6rem; min-width: 0; flex: 1 1 12rem; }
.list-people .actions { display: flex; flex-wrap: wrap; gap: .35rem; }

.guest-member-lock {
  margin: 0 0 1rem;
  padding: .85rem 1rem;
  border-radius: 14px;
  background: rgba(124, 140, 255, .1);
  border: 1px solid rgba(124, 140, 255, .22);
}
.guest-member-lock p { margin: 0 0 .45rem; }
.guest-member-lock .btn-row { margin: .65rem 0 0; }
.guest-sensitive-blur {
  filter: blur(5px);
  user-select: none;
  pointer-events: none;
  display: inline-block;
  max-width: 100%;
  vertical-align: baseline;
}
.online-place .guest-sensitive-blur,
.person-place .guest-sensitive-blur,
.person-facts .guest-sensitive-blur,
.msg-symbols .guest-sensitive-blur,
.who .guest-sensitive-blur {
  filter: blur(4.5px);
}
.profile-readonly-fields input[readonly],
.profile-readonly-fields textarea[readonly],
.search-form[aria-disabled="true"] input:disabled,
.search-form[aria-disabled="true"] select:disabled,
.search-form[aria-disabled="true"] button:disabled {
  opacity: .85;
  cursor: default;
  background: rgba(90, 110, 150, .06);
}
html[data-theme="dark"] .guest-member-lock {
  background: rgba(124, 140, 255, .14);
  border-color: rgba(124, 140, 255, .28);
}

.search-panel h2 { margin-bottom: .35rem; }
.search-panel .search-form { margin-bottom: 1.25rem; }
.search-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
}
.search-grid-age { max-width: 22rem; }
.search-place-picked {
  margin: .35rem 0 .5rem;
  font-size: .9rem;
}
.search-place-results {
  list-style: none;
  margin: .4rem 0 .75rem;
  padding: 0;
  max-height: min(36dvh, 200px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(90,110,150,.15);
}
.search-place-results[hidden] { display: none !important; }
.search-place-results li {
  padding: .7rem .85rem;
  min-height: var(--tap);
  cursor: pointer;
  border-bottom: 1px solid rgba(90,110,150,.08);
}
.search-place-results .meta { color: var(--muted); font-size: .8rem; }
@media (hover: hover) and (pointer: fine) {
  .search-place-results li:hover { background: rgba(124,140,255,.12); }
}
.search-results-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .5rem;
}
.search-results-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.search-results-list .online-user {
  cursor: pointer;
}
.dm-kind-friend {
  color: #1b7a3a;
}
.dm-kind-update {
  color: #1a5f9e;
}
.dm-inbox-item.is-app-update .dm-inbox-item-count {
  background: #1a5f9e;
  color: #fff;
}
.dm-inbox-item.is-app-update.is-applying {
  cursor: wait;
  opacity: .9;
}
/* Centered viewport / #app-main overlay while skipWaiting → reload */
.app-update-banner {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 13000;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding:
    max(1rem, env(safe-area-inset-top, 0px))
    max(1rem, env(safe-area-inset-right, 0px))
    max(1rem, env(safe-area-inset-bottom, 0px))
    max(1rem, env(safe-area-inset-left, 0px));
  background: rgba(6, 10, 18, 0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none; /* brief status only — reload follows */
}
.app-update-banner.show { display: flex; }
.app-update-banner p {
  margin: 0;
  max-width: min(22rem, 100%);
  padding: 1.15rem 1.4rem;
  border-radius: 16px;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.4;
  color: #fff;
  background: rgba(26, 95, 158, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 12px 36px rgba(10, 30, 60, 0.35);
}
.app-update-banner strong { font-weight: 750; color: inherit; }

/* Maintenance grace apology — blocks chat until confirmed */
.maint-grace-overlay {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 14000;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding:
    max(1rem, env(safe-area-inset-top, 0px))
    max(1rem, env(safe-area-inset-right, 0px))
    max(1rem, env(safe-area-inset-bottom, 0px))
    max(1rem, env(safe-area-inset-left, 0px));
  background: rgba(8, 12, 20, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: auto;
}
.maint-grace-card {
  width: min(22.5rem, 100%);
  padding: 1.35rem 1.45rem 1.25rem;
  border-radius: 16px;
  text-align: center;
  color: #101820;
  background: #fffaf8;
  border: 1px solid rgba(227, 6, 19, 0.22);
  box-shadow: 0 14px 40px rgba(10, 20, 40, 0.32);
}
.maint-grace-card h2 {
  margin: 0 0 0.55rem;
  font-size: 1.28rem;
  font-weight: 750;
  color: #e30613;
}
.maint-grace-card p {
  margin: 0 0 0.7rem;
  font-size: 1.02rem;
  line-height: 1.45;
  color: #243040;
}
.maint-grace-card .maint-grace-dismiss {
  margin-top: 0.35rem;
  min-width: 9rem;
}
.maint-grace-strip {
  position: fixed;
  left: 50%;
  bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 12050;
  max-width: min(26rem, calc(100vw - 1.5rem));
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  font-size: 0.92rem;
  line-height: 1.3;
  text-align: center;
  color: #fff;
  background: rgba(180, 40, 40, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 8px 24px rgba(40, 10, 10, 0.28);
  pointer-events: none;
}
.maint-grace-strip strong { font-variant-numeric: tabular-nums; }

html[data-theme="dark"] .dm-kind-update { color: #7eb8f0; }
.dm-kind-ad {
  background: rgba(60, 120, 190, 0.14);
  border-color: rgba(60, 110, 180, 0.32);
  color: #2f5f9a;
}
.dm-kind-wish {
  background: rgba(180, 140, 40, 0.14);
  border-color: rgba(160, 120, 30, 0.32);
  color: #8a6a12;
}
html[data-theme="dark"] .dm-kind-ad {
  background: rgba(60, 120, 190, 0.22);
  color: #9ec4f0;
}
html[data-theme="dark"] .dm-kind-wish {
  background: rgba(180, 140, 40, 0.22);
  color: #e0c56a;
}
.dm-inbox-item.is-friend-accepted .dm-inbox-item-count {
  background: #1b7a3a;
  color: #fff;
}
.dm-inbox-item.is-ad_thread .dm-inbox-item-count {
  background: #2f5f9a;
  color: #fff;
}
.dm-inbox-item.is-wish .dm-inbox-item-count {
  background: #8a6a12;
  color: #fff;
}
html[data-theme="dark"] .search-place-results {
  background: rgba(20,24,36,.85);
  border-color: rgba(255,255,255,.08);
}
html[data-theme="dark"] .dm-kind-friend { color: #6ddea0; }
@media (max-width: 560px) {
  .search-grid { grid-template-columns: 1fr; }
}
.footer-mini {
  text-align: center;
  color: var(--ink);
  opacity: .82;
  font-size: .86rem;
  padding: 1rem 0 max(1.5rem, var(--safe-b));
}
.footer-mini a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
html[data-theme="dark"] .footer-mini {
  color: var(--muted);
  opacity: 1;
}
html[data-theme="dark"] .footer-mini a {
  color: #b4beff;
}
.auth-subhead {
  margin: 0 0 .85rem;
  font-size: 1.1rem;
}
.verify-gate h2 { margin: 0 0 .5rem; }
.verify-gate p { margin: .55rem 0; line-height: 1.45; }

.profile-page {
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Sticky Kopf: Subnav-Links (mehrzeilig) */
.profile-sticky-top {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 0.85rem;
  padding: 0.35rem 0 0.65rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 248, 255, 0.97) 72%, rgba(245, 248, 255, 0.88) 100%);
  border-bottom: 1px solid var(--divider);
}
html[data-theme="dark"] .profile-sticky-top {
  background:
    linear-gradient(180deg, rgba(36, 46, 72, 0.98) 0%, rgba(28, 38, 58, 0.98) 72%, rgba(28, 38, 58, 0.9) 100%);
}
.profile-title-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.profile-sticky-top .profile-subnav-wrap {
  margin: 0;
  padding: 0;
  border-bottom: 0;
  overflow: visible;
}
.profile-subnav-wrap {
  margin: 0 0 1rem;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid var(--divider);
  overflow: visible;
}
.profile-subnav {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.4rem;
  overflow: visible;
  padding: 0.1rem 0;
  margin: 0;
  touch-action: manipulation;
}
.profile-subnav-link {
  flex: 0 1 auto;
  appearance: none;
  border: 1px solid var(--online);
  background: var(--btn-surface-face);
  box-shadow: var(--btn-surface-3d);
  color: var(--ink);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  position: relative;
  transform-origin: center;
}
.profile-subnav-link.is-active {
  background: var(--btn-surface-face-active);
  border-color: var(--online);
  color: var(--ink);
  font-weight: 700;
  box-shadow: var(--btn-surface-3d);
}
html[data-theme="dark"] .profile-subnav-link {
  color: rgba(238, 243, 252, 0.68);
}
html[data-theme="dark"] .profile-subnav-link.is-active {
  background: var(--btn-surface-face-active);
  border-color: var(--online);
  color: var(--ink);
  box-shadow: var(--btn-surface-3d);
}
@media (hover: hover) and (pointer: fine) {
  .profile-subnav-link {
    transition:
      transform .16s ease,
      box-shadow .16s ease,
      filter .16s ease,
      background .16s ease,
      border-color .16s ease,
      color .16s ease;
  }
  .profile-subnav-link:hover {
    transform: translateY(-2px);
    filter: brightness(1.08) saturate(1.04);
    box-shadow: var(--btn-surface-3d-hover);
    background: var(--btn-surface-face-active);
    color: var(--ink);
  }
}
.profile-subnav-link:active {
  transform: translateY(2px) scale(0.99);
  box-shadow: var(--btn-surface-3d-pressed);
}
.profile-panel {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0 0 0.35rem;
}
.profile-panel[hidden] {
  display: none !important;
}
.profile-card {
  margin: 0;
  padding: 1rem 1.05rem 1.1rem;
  border-radius: 16px;
  border: 1px solid var(--divider);
  background: color-mix(in srgb, var(--card) 72%, transparent);
}
.profile-card + .profile-card {
  margin-top: 0;
}
.profile-card-title {
  margin: 0 0 0.65rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
}
.profile-card > .hint:first-of-type {
  margin-top: -0.25rem;
}
/* Profil-Kanton: immer ausgefüllt (Wert + Hue-Fill-Mini-Karte) */
.profile-canton-filled {
  margin: 0 0 0.85rem;
}
.profile-field-label {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--ink);
}
.profile-canton-value {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.4rem;
  padding: 0.45rem 0.65rem;
  border-radius: 12px;
  border: 1px solid var(--divider);
  background: color-mix(in srgb, var(--card) 88%, var(--accent) 6%);
}
.profile-canton-value .canton-flag {
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
}
.profile-canton-name {
  font-weight: 600;
  letter-spacing: -0.01em;
}
.profile-autosave-bar {
  margin: 0.35rem 0 0.5rem;
  min-height: 1.25rem;
  text-align: center;
}
.profile-autosave-bar .hint,
.profile-autosave-bar .ok,
.profile-autosave-bar .err {
  margin: 0;
  font-size: 0.88rem;
}
.profile-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.35rem;
}
.profile-notice {
  margin: 0;
  padding: .85rem 1rem;
  border-radius: 14px;
  background: rgba(124, 140, 255, 0.1);
  border: 1px solid rgba(124, 140, 255, 0.22);
  font-size: .92rem;
  line-height: 1.45;
}
.profile-notice p { margin: .35rem 0; }
.profile-notice a { color: var(--accent, #5a6bb8); }
.profile-danger {
  margin-top: 0;
  border-color: rgba(212, 84, 106, 0.35);
  background: rgba(212, 84, 106, 0.08);
}
html[data-theme="dark"] .profile-danger {
  background: rgba(224, 107, 126, 0.1);
  border-color: rgba(224, 107, 126, 0.35);
}
.profile-danger .profile-card-title,
.profile-danger .profile-section-title {
  color: var(--danger);
  margin-top: 0;
}
.contact-form label {
  display: block;
  margin: .7rem 0 .3rem;
  color: var(--ink);
  font-size: .9rem;
}
.contact-form .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact-form textarea {
  min-height: 140px;
}
.contact-alert { margin: .75rem 0 1rem; }
.contact-doc .btn-row { margin-top: 1.1rem; }
.profile-notify-check {
  margin: .55rem 0;
}
.profile-swipe-sheet-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.65rem 0 0.35rem;
}
.profile-swipe-sheet-check {
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 14px;
  background: rgba(124, 140, 255, 0.08);
  border: 1px solid rgba(124, 140, 255, 0.14);
}
html[data-theme="dark"] .profile-swipe-sheet-check {
  background: rgba(124, 140, 255, 0.12);
  border-color: rgba(140, 160, 200, 0.18);
}
.notify-settings-wrap {
  overflow-x: auto;
  margin: .75rem 0 1rem;
}
table.notify-settings {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}
table.notify-settings th,
table.notify-settings td {
  padding: .55rem .45rem;
  text-align: left;
  border-bottom: 1px solid var(--line, rgba(40, 50, 80, .12));
  vertical-align: middle;
}
table.notify-settings thead th {
  font-weight: 700;
  color: var(--muted, #5a6478);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .02em;
}
table.notify-settings tbody th {
  font-weight: 600;
  padding-right: .75rem;
}
.notify-cell-check {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
  font-weight: 500;
  white-space: nowrap;
}
.notify-cell-check input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--accent, #5a6bb8);
}
.profile-section-title {
  margin: 1.25rem 0 .65rem;
  font-size: 1.05rem;
}
.profile-card.avatar-color-field {
  margin: 0;
  padding: 1rem 1.05rem 1.1rem;
  border: 1px solid var(--divider);
  background: color-mix(in srgb, var(--card) 72%, transparent);
  box-shadow: none;
}
.profile-card.avatar-photo-field {
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}
.profile-card.avatar-photo-field .avatar-photo-row {
  margin-top: 0.2rem;
}
.profile-devices .hint { margin-bottom: .75rem; }
.trusted-device-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.trusted-device-row {
  padding: .75rem .85rem;
  border: 1px solid var(--line, rgba(40, 50, 80, .12));
  border-radius: 12px;
  background: rgba(255, 255, 255, .35);
}
html[data-theme="dark"] .trusted-device-row {
  background: rgba(20, 24, 36, .35);
  border-color: rgba(255, 255, 255, .1);
}
.trusted-device-row.is-this {
  border-color: rgba(70, 110, 200, .45);
}
.trusted-device-badge {
  display: inline-block;
  margin-left: .4rem;
  font-size: .72rem;
  font-weight: 700;
  color: var(--accent, #4a5fad);
  vertical-align: middle;
}
.trusted-device-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .65rem;
  align-items: center;
  margin-top: .55rem;
}
.trusted-device-check {
  margin: 0;
  flex: 1 1 100%;
}
.danger-text { color: var(--danger, #c04545) !important; }
.unlock-panel .unlock-user {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .85rem;
}
.unlock-panel .unlock-user .avatar,
.unlock-panel .unlock-user .av {
  flex-shrink: 0;
}
.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .75rem;
}
.profile-form label .opt,
.profile-form label .req {
  font-weight: 500;
  font-size: .78rem;
  margin-left: .25rem;
}
.profile-form label .opt { color: var(--muted, #667089); }
.profile-form label .req { color: #c04545; }
.avatar-preview {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: .2rem 0 .55rem;
}
.avatar-color-field {
  margin: .85rem 0 1.1rem;
  padding: .85rem .9rem;
  border-radius: 16px;
  background: var(--surface-soft);
  border: 1px solid var(--divider);
}
.avatar-color-label {
  display: block;
  font-weight: 700;
  margin-bottom: .45rem;
}
.hue-swatches {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .45rem;
  margin: .35rem 0 .75rem;
}
.hue-swatch {
  width: 100%;
  aspect-ratio: 1;
  max-width: 2.75rem;
  margin: 0 auto;
  border: 2px solid rgba(255, 255, 255, .85);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(40, 50, 80, .16);
  cursor: pointer;
  padding: 0;
  touch-action: manipulation;
}
.hue-swatch.active {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(124, 140, 255, .35), 0 2px 8px rgba(40, 50, 80, .16);
}
.avatar-hue-label {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin: 0;
}
.avatar-hue-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1.35rem;
  border-radius: 999px;
  border: 1px solid rgba(30, 40, 80, .12);
  background: linear-gradient(
    to right,
    hsl(0 70% 55%),
    hsl(40 75% 50%),
    hsl(70 70% 45%),
    hsl(120 55% 42%),
    hsl(180 55% 42%),
    hsl(220 65% 55%),
    hsl(280 60% 55%),
    hsl(320 65% 55%),
    hsl(360 70% 55%)
  );
  cursor: pointer;
}
.avatar-hue-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(30, 40, 80, .45);
  box-shadow: 0 2px 6px rgba(30, 40, 80, .25);
}
.avatar-hue-range::-moz-range-thumb {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(30, 40, 80, .45);
  box-shadow: 0 2px 6px rgba(30, 40, 80, .25);
}
.avatar-hue-range::-moz-range-track {
  height: 1.35rem;
  border-radius: 999px;
  background: transparent;
}
.auth-links {
  margin: .65rem 0 0;
  text-align: center;
}
button.linkish {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  color: var(--accent);
  font: inherit;
  font-size: .92rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
button.linkish:hover { filter: brightness(1.08); }
html[data-theme="dark"] button.linkish {
  color: #b4beff;
}
.check-legal {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin: .85rem 0 .35rem;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--ink);
  cursor: pointer;
}
.check-legal input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: .05rem 0 0 !important;
  padding: 0 !important;
  flex: 0 0 1.4rem !important;
  width: 1.4rem !important;
  height: 1.4rem !important;
  min-width: 1.4rem !important;
  min-height: 1.4rem !important;
  max-width: 1.4rem !important;
  border: 2.5px solid #243044 !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: 0 1px 2px rgba(36, 48, 68, 0.18) !important;
  cursor: pointer;
  color: transparent !important;
  accent-color: #5a6bb8;
}
.check-legal input[type="checkbox"]:checked {
  border-color: #3d4f9c !important;
  background-color: #5a6bb8 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.2 8.2l3 3 6.6-6.8'/%3E%3C/svg%3E") !important;
  background-size: 0.95rem 0.95rem !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.check-legal input[type="checkbox"]:focus-visible {
  outline: 3px solid #7c8cff;
  outline-offset: 2px;
}
.check-legal input[type="checkbox"]:disabled {
  opacity: .4;
  cursor: not-allowed;
}
html[data-theme="dark"] .check-legal input[type="checkbox"] {
  border-color: #e8eef8 !important;
  background-color: #050608 !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
}
html[data-theme="dark"] .check-legal input[type="checkbox"]:checked {
  border-color: #e8eef8 !important;
  background-color: #8b9aff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23050608' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.2 8.2l3 3 6.6-6.8'/%3E%3C/svg%3E") !important;
}
.check-legal a { color: var(--accent, #5a6bb8); font-weight: 700; }
html[data-theme="dark"] .check-legal a { color: #b4beff; }
.legal-inline { margin: 1rem 0 0; }
.legal-inline a { color: var(--accent, #5a6bb8); }

/* AGB / legal document page */
body.legal-page {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(124,140,255,.22), transparent 55%),
    radial-gradient(900px 500px at 90% 0%, rgba(87,197,182,.18), transparent 50%),
    linear-gradient(180deg, #eef1fb 0%, #f7f8fc 40%, #eef2f8 100%);
  color: var(--ink, #1c2438);
}
/* Im App-Overlay: Theme + Basisfarbe statt festem Weiss/Blau */
body.legal-page.legal-embed {
  min-height: 100%;
  --accent: var(--chrome-accent, #7c8cff);
  --ink: var(--chrome-ink, #1c2438);
  --muted: var(--chrome-muted, #667089);
  --input-bg: color-mix(in srgb, var(--chrome-surface, #fff) 88%, var(--chrome-accent, #7c8cff) 12%);
  --input-border: color-mix(in srgb, var(--chrome-border, rgba(90, 110, 150, 0.22)) 85%, var(--chrome-accent, #7c8cff) 15%);
  background:
    radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--chrome-accent, var(--accent, #7c8cff)) 32%, transparent), transparent 55%),
    radial-gradient(900px 500px at 90% 0%, color-mix(in srgb, var(--chrome-accent, var(--accent, #7c8cff)) 18%, transparent), transparent 50%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--chrome-accent, #7c8cff) 14%, #eef1fb) 0%,
      color-mix(in srgb, var(--chrome-accent, #7c8cff) 7%, #f7f8fc) 42%,
      color-mix(in srgb, var(--chrome-surface, #eef2f8) 88%, var(--chrome-accent, #7c8cff) 12%) 100%
    );
  color: var(--chrome-ink, var(--ink, #1c2438));
}
html[data-theme="dark"] body.legal-page.legal-embed {
  --ink: var(--chrome-ink, #e8eefc);
  --muted: var(--chrome-muted, #a8b4cc);
  --input-bg: color-mix(in srgb, var(--chrome-surface, #121826) 90%, var(--chrome-accent, #9aa6ff) 10%);
  --input-border: color-mix(in srgb, var(--chrome-border, rgba(140, 160, 200, 0.22)) 80%, var(--chrome-accent, #9aa6ff) 20%);
  background:
    radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--chrome-accent, var(--accent, #9aa6ff)) 28%, transparent), transparent 55%),
    radial-gradient(900px 500px at 90% 0%, color-mix(in srgb, var(--chrome-accent, var(--accent, #9aa6ff)) 14%, transparent), transparent 50%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--chrome-accent, #9aa6ff) 16%, #0c0f18) 0%,
      color-mix(in srgb, var(--chrome-surface, #121826) 92%, var(--chrome-accent, #9aa6ff) 8%) 100%
    );
  color: var(--chrome-ink, #e8eefc);
}
body.legal-page.legal-embed .legal-doc {
  background: color-mix(in srgb, var(--chrome-surface, rgba(255, 255, 255, 0.82)) 86%, var(--chrome-accent, #7c8cff) 14%);
  border-color: color-mix(in srgb, var(--chrome-border, rgba(90, 110, 150, 0.2)) 80%, var(--chrome-accent, #7c8cff) 20%);
  box-shadow: 0 18px 50px color-mix(in srgb, var(--chrome-accent, #7c8cff) 12%, rgba(60, 75, 120, 0.12));
}
html[data-theme="dark"] body.legal-page.legal-embed .legal-doc {
  background: color-mix(in srgb, var(--chrome-surface, rgba(18, 24, 38, 0.94)) 88%, var(--chrome-accent, #9aa6ff) 12%);
  border-color: color-mix(in srgb, var(--chrome-border, rgba(140, 160, 200, 0.22)) 75%, var(--chrome-accent, #9aa6ff) 25%);
}
body.legal-page.legal-embed .legal-lead {
  background: color-mix(in srgb, var(--chrome-accent, #7c8cff) 14%, transparent);
  border-color: color-mix(in srgb, var(--chrome-accent, #7c8cff) 28%, transparent);
}
body.legal-page.legal-embed .legal-toc {
  background: color-mix(in srgb, var(--chrome-surface, #fff) 70%, var(--chrome-accent, #7c8cff) 8%);
  border-color: color-mix(in srgb, var(--chrome-border, rgba(90, 110, 150, 0.14)) 80%, transparent);
}
body.legal-page.legal-embed .legal-nav a,
body.legal-page.legal-embed .legal-toc a,
body.legal-page.legal-embed .footer-mini a,
body.legal-page.legal-embed .brand-mark-swiss .wordmark .chat,
body.legal-page.legal-embed .brand-mark-swiss .wordmark .wm-hyphen {
  color: var(--chrome-accent, var(--accent, #5a6bb8));
}
body.legal-page.legal-embed .legal-nav,
body.legal-page.legal-embed .footer-mini {
  display: none;
}
body.legal-page.legal-embed .legal-shell {
  width: 100%;
  margin: 0;
  padding: 0.85rem 0.9rem 1.25rem;
  box-sizing: border-box;
}
.legal-shell {
  width: min(820px, calc(100% - 1.5rem));
  margin: 0 auto;
  padding: 1.25rem 0 max(2.5rem, env(safe-area-inset-bottom));
}
.legal-nav { margin: 0 0 1rem; font-size: .95rem; }
.legal-nav a { color: var(--accent, #5a6bb8); font-weight: 600; text-decoration: none; }
.legal-doc {
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(90,110,150,.14);
  border-radius: 22px;
  box-shadow: 0 18px 50px rgba(60,75,120,.1);
  backdrop-filter: blur(12px);
  padding: 1.5rem 1.35rem 2rem;
}
.legal-header { margin-bottom: 1.25rem; }
.legal-kicker {
  margin: 0 0 .35rem;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted, #667089);
}
.legal-kicker-brands {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem .75rem;
  text-transform: none;
  letter-spacing: 0;
  font-size: inherit;
  font-weight: inherit;
}
.legal-kicker-sep { opacity: .45; font-weight: 700; }
.legal-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  vertical-align: middle;
  line-height: 1;
  max-width: 100%;
}
.brand-mark img {
  display: block;
  flex-shrink: 0;
  height: auto;
}
/* Einzeilig in Fliesstext: SchweizChat */
.brand-mark-swiss .wordmark {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0;
  white-space: nowrap;
}
.brand-mark-swiss .wordmark .wm-chatline {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  white-space: nowrap;
}
.brand-mark-swiss .wordmark .wm-hyphen {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--accent);
  margin: 0;
}
.brand-mark-swiss .wordmark .swiss {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.brand-mark-swiss .wordmark .chat {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.brand-mark-inline {
  gap: .28rem;
  margin: 0 .1em;
  transform: translateY(-0.08em);
}
.brand-mark-inline img { width: 1.38em; height: 1.38em; }
.brand-mark-inline .wordmark .swiss,
.brand-mark-inline .wordmark .chat,
.brand-mark-inline .wordmark .wm-hyphen { font-size: 1.26em; }
.brand-mark-nav img { width: 34px; height: 34px; }
.brand-mark-nav .wordmark .swiss,
.brand-mark-nav .wordmark .chat,
.brand-mark-nav .wordmark .wm-hyphen { font-size: 1.26rem; }
.brand-mark-header img { width: 48px; height: 48px; }
.brand-mark-header .wordmark .swiss,
.brand-mark-header .wordmark .chat,
.brand-mark-header .wordmark .wm-hyphen { font-size: 1.62rem; }
.brand-mark-lindic img {
  width: auto;
  height: 1.15em;
  max-width: 7.5rem;
}
.brand-mark-lindic.brand-mark-header img {
  height: 1.55rem;
  max-width: 9rem;
}
.brand-mark-lindic img.logo-lindic-img-dark,
.brand-mark-lindic .logo-lindic-img-dark { display: none; }
html[data-theme="dark"] .brand-mark-lindic img.logo-lindic-img-light,
html[data-theme="dark"] .brand-mark-lindic .logo-lindic-img-light { display: none; }
html[data-theme="dark"] .brand-mark-lindic img.logo-lindic-img-dark,
html[data-theme="dark"] .brand-mark-lindic .logo-lindic-img-dark { display: block; }
html[data-theme="dark"] .brand-mark-swiss .wordmark .swiss { color: #f4f7ff; }
html[data-theme="dark"] .brand-mark-swiss .wordmark .chat { color: #a8b4ff; }
.legal-doc h1 {
  margin: 0 0 .5rem;
  font-size: clamp(1.55rem, 4vw, 2rem);
  line-height: 1.2;
}
.legal-meta { margin: 0; color: var(--muted, #667089); font-size: .88rem; }
.legal-lead {
  margin: 1rem 0 1.25rem;
  padding: .9rem 1rem;
  border-radius: 14px;
  background: rgba(124,140,255,.1);
  border: 1px solid rgba(124,140,255,.22);
  line-height: 1.5;
}
/* Sticky Index-Button AGB / Datenschutz — wie Menü-Buttons, horizontal zentriert */
.legal-help-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 .85rem;
  padding: .45rem 0 .35rem;
  background: none;
}
.legal-help-nav .legal-index-btn {
  text-align: center;
  border: 1px solid var(--online);
  background: var(--btn-surface-face);
  box-shadow: var(--btn-surface-3d);
  border-radius: 999px;
  padding: .55rem 1.25rem;
  min-height: var(--tap);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  color: var(--ink);
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
  transform-origin: center;
}
@media (hover: hover) and (pointer: fine) {
  .legal-help-nav .legal-index-btn {
    transition:
      transform .16s ease,
      box-shadow .16s ease,
      filter .16s ease,
      background .16s ease,
      border-color .16s ease,
      color .16s ease;
  }
  .legal-help-nav .legal-index-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.08) saturate(1.04);
    box-shadow: var(--btn-surface-3d-hover);
  }
}
.legal-help-nav .legal-index-btn:active:not(:disabled) {
  transform: translateY(1px);
  background: var(--btn-surface-face-active);
  box-shadow: var(--btn-surface-3d-pressed);
}
html[data-theme="dark"] .legal-help-nav .legal-index-btn {
  background: var(--btn-surface-face);
  border-color: var(--online);
  color: var(--ink);
}
.legal-toc {
  margin: 0 0 1.5rem;
  padding: 1rem 1rem 1rem 1.25rem;
  border-radius: 14px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(90,110,150,.12);
  scroll-margin-top: 3.4rem;
}
.legal-toc ol { margin: 0; padding-left: 1.1rem; }
.legal-toc li { margin: .35rem 0; }
.legal-toc a { color: var(--accent, #5a6bb8); text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }
.legal-section { margin: 1.5rem 0 0; scroll-margin-top: 3.4rem; }
.legal-section h2 {
  margin: 0 0 .65rem;
  font-size: 1.15rem;
  line-height: 1.3;
}
.legal-section p,
.legal-section li {
  line-height: 1.55;
  font-size: .95rem;
}
.legal-section ul { padding-left: 1.2rem; margin: .5rem 0 1rem; }
.legal-section li { margin: .35rem 0; }
@media (min-width: 720px) {
  .legal-doc { padding: 2rem 2.25rem 2.5rem; }
}

.install-banner {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: 0 0 1rem;
  padding: .75rem 1rem;
  border-radius: 16px;
  background: rgba(124, 140, 255, 0.14);
  border: 1px solid rgba(124, 140, 255, 0.28);
}
.install-banner.show { display: flex; flex-wrap: wrap; }
.install-banner p { margin: 0; flex: 1 1 12rem; font-size: .92rem; color: var(--ink); }
.install-banner .btn-row { margin: 0; }

.install-page {
  padding: 1rem 1.1rem 1.5rem;
  max-width: 42rem;
}
.install-hero h2 {
  margin: 0 0 .35rem;
  font-family: var(--font-display);
  font-size: 1.45rem;
}
.install-hero .hint { margin-top: 0; }
.install-cta-row { margin-top: .85rem; }
.install-cta-hint,
.install-already { margin-top: .75rem; }
.install-benefits {
  margin: 1.35rem 0 1.1rem;
}
.install-benefits h3,
.install-os h3 {
  margin: 0 0 .55rem;
  font-size: 1.05rem;
}
.install-benefit-list {
  margin: 0;
  padding: 0 0 0 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  color: var(--ink);
  line-height: 1.45;
  font-size: .92rem;
}
.install-os-grid {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.install-os {
  padding: .85rem .9rem;
  border-radius: 16px;
  background: var(--surface-soft);
  border: 1px solid var(--divider);
}
.install-os.is-current {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--divider));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-soft));
}
.install-os-badge {
  display: inline-block;
  margin-left: .35rem;
  padding: .12rem .45rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  vertical-align: middle;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--ink);
}
.install-steps {
  margin: 0;
  padding-left: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--ink);
}
.install-footnote {
  margin: 1.15rem 0 0;
}
/* Legacy (falls noch irgendwo referenziert) */
.menu-install {
  margin-top: .85rem;
  padding: .85rem .9rem;
  border-radius: 16px;
  background: rgba(124, 140, 255, 0.12);
  border: 1px solid rgba(124, 140, 255, 0.28);
}
.btn.small {
  min-height: 2.35rem;
  padding: .45rem .9rem;
  font-size: .88rem;
}
.mobile-menu-drawer .menu-install {
  margin: .35rem 0 .5rem;
  flex-shrink: 0;
}
.menu-guest-note {
  margin: 0 0 .65rem;
  padding: .65rem .75rem;
  border-radius: 14px;
  font-size: .82rem;
  line-height: 1.4;
  color: var(--ink);
  background: rgba(124, 140, 255, 0.12);
  border: 1px solid rgba(124, 140, 255, 0.22);
}
html[data-theme="dark"] .menu-guest-note {
  background: rgba(124, 140, 255, 0.16);
  border-color: rgba(180, 190, 255, 0.24);
}
.mobile-menu-drawer .menu-guest-note {
  margin: 0 0 .45rem;
  flex-shrink: 0;
}
.menu-register-cta {
  width: 100%;
  margin: 0 0 .75rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.mobile-menu-drawer .menu-register-cta {
  margin: 0 0 .55rem;
  flex-shrink: 0;
}
.menu-version {
  margin: .65rem 0 0;
  padding: 0 .15rem;
  font-size: .75rem;
  line-height: 1.3;
  color: var(--muted, #667089);
  text-align: center;
  letter-spacing: .02em;
}
.menu-version-value {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  color: var(--ink);
  opacity: .85;
}
.mobile-menu-drawer .menu-version {
  margin: auto auto 0;
  padding: 0.45rem 0 0.2rem;
  flex-shrink: 0;
  align-self: center;
  width: min(22rem, 100%);
  max-width: 100%;
  text-align: center;
}

/* SEO landings */
.seo-land {
  width: min(1100px, calc(100% - var(--shell-pad) - var(--shell-pad-r)));
  margin: 0 auto max(2rem, var(--safe-b));
  padding: 1.5rem 1.25rem 2rem;
  background: rgba(255,255,255,.42);
  border: 1px solid rgba(90,110,150,.12);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
html[data-theme="dark"] .seo-land {
  background: #050608;
  border-color: rgba(170, 185, 220, 0.18);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  color: #f2f6ff;
}
.seo-land h1 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.5vw, 1.9rem);
  letter-spacing: -0.02em;
  margin: .35rem 0 .75rem;
}
.seo-land h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 1.35rem 0 .55rem;
}
html[data-theme="dark"] .seo-land h1,
html[data-theme="dark"] .seo-land h2 {
  color: #f5f8ff;
}
.seo-land p, .seo-intro {
  color: var(--muted);
  line-height: 1.45;
  margin: 0 0 .75rem;
}
html[data-theme="dark"] .seo-land p,
html[data-theme="dark"] .seo-land .seo-intro,
html[data-theme="dark"] .seo-land .seo-crumb,
html[data-theme="dark"] .seo-land li {
  color: #e4ebf8;
}
.seo-crumb {
  font-size: .85rem;
  color: var(--muted);
  margin-bottom: .35rem;
}
.seo-crumb a { color: var(--accent); text-decoration: none; font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  .seo-crumb a:hover { text-decoration: underline; }
}
.seo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .55rem;
}
.seo-list li a {
  display: inline-block;
  padding: .45rem .75rem;
  min-height: 2.4rem;
  border-radius: 999px;
  background: rgba(124,140,255,.12);
  border: 1px solid rgba(124,140,255,.22);
  color: var(--ink);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 600;
  touch-action: manipulation;
}
body.app-noscroll .seo-land { display: none; }
.seo-steps {
  margin: .4rem 0 0;
  padding-left: 1.2rem;
  color: var(--muted);
  line-height: 1.5;
}
.seo-faq { margin: .5rem 0 1rem; }
.seo-faq-item {
  margin: 0 0 .85rem;
  padding: .75rem .9rem;
  border-radius: 14px;
  background: rgba(124, 140, 255, 0.08);
  border: 1px solid rgba(124, 140, 255, 0.16);
}
.seo-faq-item h3 {
  margin: 0 0 .35rem;
  font-size: 1rem;
  font-family: var(--font-display);
  color: var(--ink);
}
.seo-faq-item p { margin: 0; }
html[data-theme="dark"] .seo-faq-item {
  background: rgba(124, 140, 255, 0.1);
  border-color: rgba(180, 190, 255, 0.18);
}
html[data-theme="dark"] .seo-faq-item h3 { color: #f5f8ff; }
.seo-foot {
  margin: 1.25rem 0 0;
  font-size: .85rem;
}
.seo-legal a { font-weight: 700; }

/* —— Responsive: phone / tablet portrait —— */
@media (max-width: 860px) {
  .app-root {
    padding-bottom: 0;
    /* Links Rand; rechts 0 → Scrollbars am Bildschirmrand */
    --shell-pad: max(1vw, var(--safe-l));
    --shell-pad-r: 0px;
    --content-pad-r: max(1vw, var(--safe-r));
    padding-right: 0;
    overflow: hidden;
    min-height: 0;
  }
  /*
   * Scrollbar nur wenn nötig, dann ganz rechts am Bildschirmrand.
   * Inhalt bleibt über --content-pad-r / padding eingerückt.
   */
  .chat-head {
    padding-right: max(0.9rem, var(--content-pad-r));
  }
  /* Nur .composer (hat Hintergrund) — nicht .composer-wrap, sonst schwarzer Spalt rechts */
  .composer {
    padding-right: max(0.75rem, var(--content-pad-r));
  }
  .composer-wrap {
    padding-right: 0;
    background: var(--composer-bg);
  }
  .messages {
    padding-right: max(0.9rem, var(--content-pad-r));
  }
  .app-shell > main > .glass.panel-scroll {
    padding-right: max(0.9rem, var(--content-pad-r));
  }
  .mobile-drawer {
    padding-right: 0;
  }
  .mobile-drawer:not(.mobile-menu-drawer) .drawer-head,
  .mobile-drawer .overlay-menu-strip,
  .mobile-drawer .online-list-toggle,
  .mobile-drawer .online-map-legend,
  .mobile-drawer:not(.mobile-menu-drawer) .theme-toggle-row,
  .mobile-drawer .scope-pick-search-wrap {
    padding-right: max(var(--chat-overlay-pad), var(--safe-r));
  }
  .mobile-drawer:not(.mobile-menu-drawer) .user-chip,
  .mobile-drawer .menu-guest-note,
  .mobile-drawer .menu-register-cta,
  .mobile-drawer:not(.mobile-menu-drawer) .menu-version {
    margin-right: max(var(--chat-overlay-pad), var(--safe-r));
  }
  /* Menü: alles in einer zentrierten Spalte, kein Extra-Pad nur rechts */
  .mobile-menu-drawer .theme-toggle-row,
  .mobile-menu-drawer .user-chip,
  .mobile-menu-drawer .menu-version,
  .mobile-menu-drawer .drawer-head,
  .mobile-menu-drawer .nav {
    align-self: center;
    width: min(22rem, 100%);
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-right: 0;
  }
  .mobile-menu-drawer .theme-toggle-row,
  .mobile-menu-drawer .user-chip,
  .mobile-menu-drawer .menu-version {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
    box-sizing: border-box;
  }
  .mobile-menu-drawer .drawer-head {
    padding-left: 2.65rem;
    padding-right: 2.65rem;
  }
  .mobile-menu-drawer .nav {
    padding-left: 0;
    padding-right: 0;
  }
  /* Overlays über dem Chat: grosszügiger Aussenabstand für Inhalte */
  .mobile-view-drawer,
  .mobile-guide-drawer,
  .mobile-doc-drawer,
  .mobile-dm-drawer,
  .mobile-scope-drawer {
    padding-left: max(var(--chat-overlay-pad), var(--safe-l));
  }
  .mobile-view-drawer .drawer-head,
  .mobile-guide-drawer .drawer-head,
  .mobile-doc-drawer .drawer-head,
  .mobile-dm-drawer .drawer-head,
  .mobile-scope-drawer .drawer-head,
  .mobile-view-drawer .overlay-menu-strip {
    padding-left: 0;
  }
  /* Scrollport: Pad nur bei Overlays — Menü bleibt symmetrisch zentriert */
  .mobile-view-drawer-body,
  .mobile-guide-drawer-body,
  .mobile-dm-drawer .dm-inbox-list,
  .mobile-online-drawer .online-list,
  .mobile-scope-drawer .online-list {
    padding-right: max(var(--chat-overlay-pad), var(--safe-r));
  }
  /* Rechts kein Extra-Pad (Scrollbar am Rand); links etwas Luft für Avatar-Ring */
  .mobile-view-drawer-body > .glass,
  .mobile-view-drawer-body > .panel-scroll {
    padding-right: 0 !important;
    padding-left: 0.45rem !important;
  }
  /*
   * Wichtig: nicht height:100% auf .app-shell — sonst verdrängt die Mobile-Bar
   * den Chat / die Message-Fläche kollabiert auf 0 (Desktop ohne Bar ok).
   */
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr);
    padding-bottom: 0;
    gap: 0;
    flex: 1 1 0;
    min-height: 0;
    height: auto;
    max-height: none;
    overflow: hidden;
  }
  .app-shell > .desk-side {
    display: none;
  }
  .app-shell > main {
    height: auto;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  .app-shell > main > .chat-frame,
  .app-shell > main > .glass {
    flex: 1 1 0;
    min-height: 0;
    height: auto;
    max-height: 100%;
    overflow: hidden;
  }
  /* Profil / Freunde / Suche: Inhalt muss scrollbar bleiben (nicht wie Chat-Frame) */
  .app-shell > main > .glass.panel-scroll {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
  .messages-shell {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
  }
  .messages {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-bar {
    display: flex;
    flex: 0 0 auto;
    position: relative; /* statt sticky: stabile Flex-Höhe */
    bottom: auto;
  }
}

/*
 * Portrait + OSK: Mobile-Bar unter die Tastatur schieben.
 * Nur Tab/Reiter bleibt über der Tastatur; Pull/Tap holt die Bar hoch.
 * Klassen auf <html>: .kb-portrait / .mobile-bar-kb-open (via visualViewport).
 */
@media (max-width: 860px) and (orientation: portrait) {
  html.kb-portrait .app-root {
    position: relative;
    padding-bottom: var(--mobile-bar-kb-pad, var(--mobile-bar-tab-h, 22px));
  }
  html.kb-portrait .mobile-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    flex: none;
    z-index: 45;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  }
  html.kb-portrait .mobile-bar-kb-tab {
    display: flex;
  }
  html.kb-portrait:not(.mobile-bar-kb-open) .mobile-bar-body {
    pointer-events: none;
  }
  html.kb-portrait.mobile-bar-kb-open .mobile-bar-body {
    pointer-events: auto;
  }
}
@media (max-width: 860px) and (orientation: portrait) and (prefers-reduced-motion: reduce) {
  html.kb-portrait .mobile-bar {
    transition: none;
  }
}

@media (max-width: 860px) {
  /* Kein separater Marken-Bereich oben — Marke bleibt im Chat-Kopf */
  .mobile-brand {
    display: none !important;
  }
  .chat-head-top {
    justify-content: flex-start;
    overflow: visible;
  }
  .chat-head-start {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(50% - 3.25rem);
    z-index: 2;
  }
  .chat-head-online {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    pointer-events: none;
  }
  .chat-brand {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
    gap: 0.22rem;
    padding: 0;
    border: 0;
    margin: 0;
  }
  .chat-head-online .brand-online {
    min-width: 0;
    min-height: 2.05rem;
    height: auto;
    padding: 0.22rem 0.36rem;
    margin: 0;
    font-size: 0.84rem;
    gap: 0.06em;
  }
  .chat-head-aside {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    flex: 0 0 auto;
    margin-left: auto;
    z-index: 2;
  }
  .chat-brand .app-brand-swiss {
    gap: 0.3rem;
    max-width: 100%;
    min-width: 0;
  }
  .chat-brand .app-brand-swiss img {
    width: 1.86rem;
    height: 1.86rem;
  }
  .chat-brand .app-brand-swiss .wordmark {
    flex-direction: row;
    align-items: baseline;
    gap: 0;
    line-height: 1;
  }
  .chat-brand .app-brand-swiss .wordmark .wm-hyphen {
    display: inline;
    font-family: var(--font-body);
    font-size: 1.06rem;
    font-weight: 700;
    color: var(--accent);
    margin: 0;
  }
  .chat-brand .app-brand-swiss .wordmark .swiss {
    font-size: 1.1rem;
  }
  .chat-brand .app-brand-swiss .wordmark .chat {
    font-size: 1.06rem;
  }
  .chat-brand .logo-lindic-byline {
    display: none;
  }
  .chat-frame,
  .panel-scroll.glass,
  main > .glass {
    border-radius: 18px;
  }
  .chat-head {
    padding: .65rem max(0.85rem, var(--safe-r)) .65rem max(0.75rem, var(--safe-l));
  }
  .chat-head-tools {
    width: 100%;
  }
  .chat-head-tools .scope-pills {
    width: 100%;
    flex: 1 1 auto;
    justify-content: stretch;
  }
  .chat-head .scope-pills button {
    flex: 1 1 0;
  }
  .composer {
    padding-bottom: .55rem;
  }
  .list-people li {
    align-items: flex-start;
  }
  .list-people .actions {
    width: 100%;
  }
  .list-people .actions .btn {
    flex: 1 1 auto;
  }
}

/* Narrow phones */
@media (max-width: 420px) {
  :root {
    --radius: 18px;
  }
  .logo-swiss-chat { gap: .65rem; }
  .panel { padding: .9rem; }
  .msg-row { width: 100%; max-width: 100%; }
  .mobile-bar-name strong { font-size: 0.9rem; }
}

/* Desktop-Reiter: Menü / Online nach aussen schieben (nur ≥861px) */
.desk-rail-tab,
.chat-edge-rail-tab {
  display: none;
}
@media (max-width: 860px) {
  .desk-rail-tab,
  .chat-edge-rail-tab {
    display: none !important;
  }
}

/* Desktop / Tablet: Menü, Chat und Online-Liste gleiche Höhe, intern scrollbar */
@media (min-width: 861px) {
  .app-root {
    width: 100%;
    max-width: none;
    padding-bottom: max(0.5rem, var(--safe-b));
    overflow: hidden;
  }
  .app-shell {
    --desk-side-w: 240px;
    --desk-online-w-px: 270px;
    /* Schmale Reiter am Panelrand — an Glas/Card-Farben angelehnt */
    --desk-rail-bar: 0.2rem;
    --desk-rail-strip: 1.05rem;
    --desk-rail-pad: calc(var(--desk-rail-strip) + 0.2rem);
    --desk-gap: 0.85rem;
    /* Einblenden: flüssig; Ausfahren: langsam starten, dann beschleunigen */
    --desk-rail-expand: 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    --desk-rail-collapse: 0.55s cubic-bezier(0.55, 0.05, 0.95, 0.45);
    --desk-rail-ease: var(--desk-rail-expand);
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--desk-gap);
    padding-bottom: 0;
    overflow: hidden;
    flex: 1 1 0;
    min-height: 0;
    height: auto;
    max-height: 100%;
    /*
     * In die app-root-Seitenpolster ziehen: Panels reichen bis zum Bildschirmrand.
     * Sonst liegt toter Raum ausserhalb der Panels → mouseleave → Peek klappt ein.
     */
    margin-left: calc(-1 * var(--shell-pad));
    margin-right: calc(-1 * var(--shell-pad-r));
    width: auto;
  }
  .app-shell.has-online > .online-rail {
    display: flex;
  }
  /*
   * Chat-Breite folgt den Panels: fester Gap, Panels in Flow.
   * Eingeklappt = Panel behält Originalbreite und fährt nach aussen
   * (neg. Margin); sichtbar bleibt nur der Reiter-Streifen. Hover peekt.
   */
  .app-shell > .desk-side,
  .app-shell > .side,
  .app-shell > main,
  .app-shell.has-online > .online-rail {
    min-height: 0;
    max-height: 100%;
    height: auto;
    align-self: stretch;
    overflow: hidden;
  }
  .app-shell > main {
    flex: 1 1 0;
    min-width: 0;
  }
  .app-shell > .desk-side {
    position: relative;
    flex: 0 0 var(--desk-side-w);
    width: var(--desk-side-w);
    max-width: var(--desk-side-w);
    box-sizing: border-box;
    margin-left: 0;
    /* Innen Platz für Reiter — Inhalt wird nicht verdeckt */
    padding-right: var(--desk-rail-pad);
    overflow-x: hidden;
    overflow-y: auto;
    transition: margin-left var(--desk-rail-expand);
  }
  .app-shell.has-online > .online-rail {
    position: relative;
    flex: 0 0 var(--desk-online-w-px);
    width: var(--desk-online-w-px);
    max-width: var(--desk-online-w-px);
    box-sizing: border-box;
    margin-right: 0;
    padding-left: var(--desk-rail-pad);
    overflow: hidden;
    transition: margin-right var(--desk-rail-expand);
  }
  .app-shell > main .messages,
  .app-shell > main .panel-scroll {
    overflow: auto;
  }

  .desk-rail-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    z-index: 6;
    width: var(--desk-rail-strip);
    min-width: var(--desk-rail-strip);
    max-width: var(--desk-rail-strip);
    height: auto;
    margin: 0;
    padding: 0.55rem 0;
    border: 1px solid color-mix(in srgb, var(--divider) 70%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--card) 78%, transparent);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--ink) 8%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: color-mix(in srgb, var(--muted) 70%, var(--ink));
    cursor: pointer;
    touch-action: manipulation;
    transform: translateY(-50%);
    transition:
      background 0.2s ease,
      border-color 0.2s ease,
      box-shadow 0.2s ease,
      color 0.2s ease,
      opacity 0.2s ease;
    opacity: 0.92;
  }
  html[data-theme="dark"] .desk-rail-tab {
    background: color-mix(in srgb, var(--card) 88%, transparent);
    border-color: color-mix(in srgb, var(--divider) 85%, transparent);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.28);
    color: color-mix(in srgb, var(--muted) 55%, var(--ink));
  }
  .desk-rail-tab span {
    display: block;
    width: var(--desk-rail-bar);
    height: 1.85rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 42%, var(--muted));
    box-shadow: none;
    font-size: 0;
    line-height: 0;
    transition: height 0.2s ease, background 0.2s ease, width 0.2s ease;
  }
  html[data-theme="dark"] .desk-rail-tab span {
    background: color-mix(in srgb, var(--accent) 38%, #9aa8c8);
  }
  @media (hover: hover) and (pointer: fine) {
    .desk-rail-tab:hover {
      opacity: 1;
      background: color-mix(in srgb, var(--card) 92%, var(--accent) 6%);
      border-color: color-mix(in srgb, var(--accent) 28%, var(--divider));
      box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 12%, transparent);
    }
    .desk-rail-tab:hover span {
      background: color-mix(in srgb, var(--accent) 62%, var(--muted));
      height: 2.05rem;
    }
  }
  /* Fixiert: gleicher schmaler Reiter, dezentes × */
  .desk-rail-tab.is-pinned {
    background: color-mix(in srgb, var(--card) 86%, var(--accent) 5%);
    border-color: color-mix(in srgb, var(--accent) 22%, var(--divider));
    box-shadow: 0 1px 5px color-mix(in srgb, var(--accent) 10%, transparent);
    color: color-mix(in srgb, var(--accent) 55%, var(--muted));
    opacity: 0.95;
  }
  html[data-theme="dark"] .desk-rail-tab.is-pinned {
    background: color-mix(in srgb, var(--card) 90%, var(--accent) 6%);
    border-color: color-mix(in srgb, var(--accent) 28%, var(--divider));
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
    color: color-mix(in srgb, var(--accent) 50%, #c8d0e4);
  }
  .desk-rail-tab.is-pinned span {
    width: auto;
    height: auto;
    min-width: 0.7rem;
    padding: 0;
    text-align: center;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    color: inherit;
    opacity: 0.85;
  }
  @media (hover: hover) and (pointer: fine) {
    .desk-rail-tab.is-pinned:hover {
      color: color-mix(in srgb, var(--accent) 75%, var(--ink));
      border-color: color-mix(in srgb, var(--accent) 40%, var(--divider));
    }
    .desk-rail-tab.is-pinned:hover span {
      height: auto;
      background: transparent;
      opacity: 1;
    }
  }
  .app-shell > .desk-side > .desk-rail-tab {
    right: 0.08rem;
    left: auto;
  }
  .app-shell > .online-rail > .desk-rail-tab {
    left: 0.08rem;
    right: auto;
  }

  /*
   * Chat-Schnellzugriff: dieselben schmalen Reiter, 90° → horizontal
   * oben/unten im Chatfenster (nicht fixierbar — nur Hover/Klick).
   */
  .chat-edge-rail-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    z-index: 90;
    width: auto;
    height: var(--desk-rail-strip, 1.05rem);
    min-height: var(--desk-rail-strip, 1.05rem);
    max-height: var(--desk-rail-strip, 1.05rem);
    margin: 0;
    padding: 0 0.55rem;
    border: 1px solid color-mix(in srgb, var(--divider) 70%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--card) 78%, transparent);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--ink) 8%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: color-mix(in srgb, var(--muted) 70%, var(--ink));
    cursor: pointer;
    touch-action: manipulation;
    transform: translateX(-50%);
    opacity: 0.92;
    transition:
      background 0.2s ease,
      border-color 0.2s ease,
      box-shadow 0.2s ease,
      opacity 0.2s ease;
  }
  html[data-theme="dark"] .chat-edge-rail-tab {
    background: color-mix(in srgb, var(--card) 88%, transparent);
    border-color: color-mix(in srgb, var(--divider) 85%, transparent);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.28);
  }
  .chat-edge-rail-tab span {
    display: block;
    width: 1.85rem;
    height: var(--desk-rail-bar, 0.2rem);
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 42%, var(--muted));
    transition: width 0.2s ease, background 0.2s ease;
  }
  html[data-theme="dark"] .chat-edge-rail-tab span {
    background: color-mix(in srgb, var(--accent) 38%, #9aa8c8);
  }
  .chat-edge-rail-tab-top {
    top: -0.12rem;
    bottom: auto;
  }
  .chat-edge-rail-tab-bottom {
    bottom: -0.12rem;
    top: auto;
  }
  .chat-edge-rail-tab.is-open {
    opacity: 1;
    background: color-mix(in srgb, var(--card) 86%, var(--accent) 5%);
    border-color: color-mix(in srgb, var(--accent) 22%, var(--divider));
  }
  @media (hover: hover) and (pointer: fine) {
    .chat-edge-rail-tab:hover {
      opacity: 1;
      background: color-mix(in srgb, var(--card) 92%, var(--accent) 6%);
      border-color: color-mix(in srgb, var(--accent) 28%, var(--divider));
      box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 12%, transparent);
    }
    .chat-edge-rail-tab:hover span {
      width: 2.05rem;
      background: color-mix(in srgb, var(--accent) 62%, var(--muted));
    }
  }

  /* Eingeklappt: volle Breite nach aussen — Layout-Slot = Reiter-Streifen */
  .app-shell.desk-side-collapsed > .desk-side {
    margin-left: calc(var(--desk-rail-strip) - var(--desk-side-w));
    transition: margin-left var(--desk-rail-collapse);
  }
  .app-shell.desk-online-collapsed > .online-rail {
    margin-right: calc(var(--desk-rail-strip) - var(--desk-online-w-px));
    transition: margin-right var(--desk-rail-collapse);
  }
  /*
   * Hover-/Peek: Panel einfahren.
   * .is-peeking hält nach mouseleave noch 500ms offen (JS), dann Ease-in-Ausfahrt.
   * Inhalt bleibt während der Fahrt sichtbar (nur app-shell overflow clippt).
   */
  @media (hover: hover) and (pointer: fine) {
    .app-shell.desk-side-collapsed > .desk-side:hover,
    .app-shell.desk-side-collapsed > .desk-side.is-peeking {
      margin-left: 0;
      transition: margin-left var(--desk-rail-expand);
    }
    .app-shell.desk-online-collapsed > .online-rail:hover,
    .app-shell.desk-online-collapsed > .online-rail.is-peeking {
      margin-right: 0;
      transition: margin-right var(--desk-rail-expand);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .app-shell > .desk-side,
    .app-shell.has-online > .online-rail,
    .app-shell.desk-side-collapsed > .desk-side,
    .app-shell.desk-online-collapsed > .online-rail {
      transition: none;
    }
  }
}

/* Tablet / schmaleres Desktop: etwas engere Spalten */
@media (min-width: 861px) and (max-width: 1100px) {
  .app-shell {
    --desk-side-w: 210px;
    --desk-online-w-px: 200px;
  }
  .app-shell.has-online {
    --desk-side-w: 190px;
  }
}

/*
 * Smartphone / Tablet Querformat = gleiches Layout wie Desktop
 * (Menü links, Chat Mitte, Online rechts) — nur kompakter.
 * Keine Desktop-Reiter / Einklapp-Logik (nur ≥861px).
 */
@media (orientation: landscape) and (max-width: 860px) {
  .app-root {
    width: 100%;
    padding-bottom: max(0.35rem, var(--safe-b));
    overflow: hidden;
  }
  .app-shell {
    display: grid;
    grid-template-columns: minmax(132px, 168px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 0.5rem;
    padding-bottom: 0;
    align-items: stretch;
    overflow: hidden;
    flex: 1 1 0;
    min-height: 0;
    height: auto;
    max-height: 100%;
  }
  .app-shell.has-online {
    grid-template-columns: minmax(120px, 150px) minmax(0, 1fr) minmax(140px, 180px);
  }
  .app-shell > .desk-side {
    display: flex;
  }
  .app-shell.has-online > .online-rail {
    display: flex;
    padding: 0.45rem 0.5rem;
  }
  .app-shell > .desk-side,
  .app-shell > .side,
  .app-shell > main,
  .app-shell.has-online > .online-rail {
    height: auto;
    min-height: 0;
    max-height: 100%;
    align-self: stretch;
    overflow: hidden;
  }
  .app-shell > .side {
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0.55rem 0.5rem;
  }
  .app-shell > .side .user-chip {
    margin-bottom: 0.45rem;
  }
  .app-shell > .side .user-chip .avatar {
    width: calc(2rem * var(--avatar-scale));
    height: calc(2rem * var(--avatar-scale));
    font-size: calc(0.85rem * var(--avatar-scale));
  }
  .app-shell > .side .nav button,
  .app-shell > .side .nav a.nav-legal {
    min-height: 2.35rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.9rem;
    border-radius: 999px;
  }
  .theme-toggle-row {
    margin-bottom: 0.45rem;
  }
  .theme-toggle {
    width: 2.25rem;
    height: 2.25rem;
    min-height: 2.25rem;
  }
  .theme-pref-pills button {
    min-height: 2rem;
    padding: 0.3rem 0.45rem;
    font-size: 0.72rem;
  }
  .online-head h2 { font-size: 0.92rem; }
  .online-user { padding: 0.3rem 0.25rem; }
  .online-user .avatar {
    width: calc(1.7rem * var(--avatar-scale));
    height: calc(1.7rem * var(--avatar-scale));
    font-size: calc(0.75rem * var(--avatar-scale));
  }

  .chat-head {
    padding: 0.4rem 0.65rem;
    gap: 0.35rem;
  }
  .chat-head h2 { font-size: 1rem; }
  .chat-head .scope-pills {
    width: auto;
    justify-content: flex-end;
  }
  .chat-head .scope-pills button {
    flex: 0 1 auto;
    min-height: 2.15rem;
    padding: 0.3rem 0.55rem;
    font-size: 0.82rem;
  }
  .messages { padding: 0.55rem 0.65rem; gap: 0.45rem; }
  .msg { padding: 0.3rem 0.55rem; }
  .composer {
    padding: 0.4rem 0.55rem;
  }
  .composer textarea,
  .composer input {
    min-height: 2.35rem;
    max-height: 4.5rem;
    padding: 0.45rem 0.7rem;
  }

  /* Mobile-Bar aus — Overlays wie Desktop (Chatfenster-Grösse via JS auf ≥861px) */
  .mobile-bar,
  .mobile-drawer:not(.mobile-dm-drawer):not(.mobile-guide-drawer):not(.mobile-view-drawer):not(.mobile-doc-drawer):not(.mobile-scope-drawer),
  .app-root:not(.drawer-dm):not(.drawer-guide):not(.drawer-view):not(.drawer-doc):not(.drawer-scope) .drawer-backdrop {
    display: none !important;
  }
  .app-root.drawer-dm .mobile-dm-drawer,
  .app-root.drawer-guide .mobile-guide-drawer,
  .app-root.drawer-view .mobile-view-drawer,
  .app-root.drawer-doc .mobile-doc-drawer,
  .app-root.drawer-scope .mobile-scope-drawer {
    display: flex !important;
  }
  .app-root.drawer-dm .drawer-backdrop,
  .app-root.drawer-guide .drawer-backdrop,
  .app-root.drawer-view .drawer-backdrop,
  .app-root.drawer-doc .drawer-backdrop,
  .app-root.drawer-scope .drawer-backdrop {
    display: block !important;
  }

  .landing { padding-top: max(0.5rem, var(--safe-t)); }
  .hero-brand { margin-bottom: 0.6rem; gap: 0.45rem; }
  .logo-swiss-chat img { width: 62px; }
  .logo-swiss-chat .wordmark .swiss { font-size: 1.92rem; }
  .logo-swiss-chat .wordmark .chat,
  .logo-swiss-chat .wordmark .wm-hyphen { font-size: 1.5rem; }
  .tagline { margin-bottom: 0.75rem; font-size: 0.95rem; }
  .hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
}

/* Sehr schmales Querformat: Nav etwas schmaler */
@media (orientation: landscape) and (max-width: 700px) {
  .app-shell {
    grid-template-columns: minmax(112px, 132px) minmax(0, 1fr);
    gap: 0.4rem;
  }
  .app-shell.has-online {
    grid-template-columns: minmax(108px, 128px) minmax(0, 1fr) minmax(120px, 150px);
  }
  .side .nav button,
  .side .nav a.nav-legal {
    font-size: 0.84rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
  }
}

/* Short portrait (small phones) */
@media (max-height: 700px) and (orientation: portrait) and (max-width: 860px) {
  .chat-head h2 { font-size: 1.05rem; }
  .messages { padding: .7rem .75rem; }
}

/* PWA standalone: slightly tighter top chrome — nicht auf Mobile-Portrait (Marke braucht Platz) */
@media (display-mode: standalone), (display-mode: fullscreen) {
  .landing {
    padding-top: max(1rem, var(--safe-t));
  }
}
@media (min-width: 861px) and (display-mode: standalone),
       (min-width: 861px) and (display-mode: fullscreen) {
  .app-root {
    padding-top: max(0.35rem, var(--safe-t));
  }
}
@media (max-width: 860px) and (orientation: landscape) and (display-mode: standalone),
       (max-width: 860px) and (orientation: landscape) and (display-mode: fullscreen) {
  .app-root {
    padding-top: max(0.35rem, var(--safe-t));
  }
}

/* Desktop: mobile bar/drawers aus — Overlays = Chatfenster-Grösse via syncChatSizedOverlays() */
@media (min-width: 861px) {
  .overlay-menu-strip {
    display: none !important;
  }
  .mobile-bar,
  .mobile-drawer:not(.mobile-dm-drawer):not(.mobile-guide-drawer):not(.mobile-view-drawer):not(.mobile-doc-drawer):not(.mobile-scope-drawer),
  .app-root:not(.drawer-dm):not(.drawer-guide):not(.drawer-view):not(.drawer-doc):not(.drawer-scope) .drawer-backdrop {
    display: none !important;
  }
  .app-root.drawer-dm .drawer-backdrop,
  .app-root.drawer-guide .drawer-backdrop,
  .app-root.drawer-view .drawer-backdrop,
  .app-root.drawer-doc .drawer-backdrop,
  .app-root.drawer-scope .drawer-backdrop {
    display: block !important;
  }
  .app-root.drawer-dm .mobile-dm-drawer,
  .app-root.drawer-guide .mobile-guide-drawer,
  .app-root.drawer-view .mobile-view-drawer,
  .app-root.drawer-doc .mobile-doc-drawer,
  .app-root.drawer-scope .mobile-scope-drawer {
    display: flex !important;
    border: 1px solid var(--stroke);
    box-shadow: var(--shadow);
    padding-top: 0.35rem;
    max-height: none;
    z-index: 75;
    overflow: hidden;
  }
  /* Chat-Overlays: Inhalt deutlich vom Rahmen eingerückt */
  .app-root.drawer-dm .mobile-dm-drawer.is-chat-sized,
  .app-root.drawer-guide .mobile-guide-drawer.is-chat-sized,
  .app-root.drawer-view .mobile-view-drawer.is-chat-sized,
  .app-root.drawer-doc .mobile-doc-drawer.is-chat-sized,
  .app-root.drawer-scope .mobile-scope-drawer.is-chat-sized {
    padding: var(--chat-overlay-pad);
    box-sizing: border-box;
  }
  .app-root.drawer-dm .mobile-dm-drawer.is-chat-sized .drawer-head,
  .app-root.drawer-guide .mobile-guide-drawer.is-chat-sized .drawer-head,
  .app-root.drawer-view .mobile-view-drawer.is-chat-sized .drawer-head,
  .app-root.drawer-doc .mobile-doc-drawer.is-chat-sized .drawer-head,
  .app-root.drawer-scope .mobile-scope-drawer.is-chat-sized .drawer-head {
    padding-left: 0;
    padding-right: 0;
  }
  .modal-backdrop.is-chat-sized {
    padding: var(--chat-overlay-pad) !important;
  }
  .app-root.drawer-scope .mobile-scope-drawer {
    z-index: 90;
    padding-top: 0.55rem;
  }
  /* Modals / Person-Sheet / Medien: füllen die Chat-Fläche */
  .modal-backdrop.is-chat-sized,
  .media-viewer-backdrop.is-chat-sized {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    place-items: stretch;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
    background: rgba(20, 28, 45, 0.45);
  }
  .media-viewer-backdrop.is-chat-sized {
    background: rgba(6, 10, 18, 0.92);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
  }
  .modal-backdrop.is-chat-sized .modal-card:not(.feature-compose-card),
  .modal-backdrop.is-chat-sized .person-sheet,
  .modal-backdrop.is-chat-sized .guest-signup-card,
  .modal-backdrop.is-chat-sized .avatar-editor-card,
  .modal-backdrop.is-chat-sized .avatar-gen-card {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    border-radius: inherit;
    box-sizing: border-box;
  }
  /* Anzeige/Wunsch-Compose bleibt kleiner und zentriert im Chat-Rahmen */
  .modal-backdrop.is-chat-sized .feature-compose-card {
    width: min(26rem, 92%);
    max-width: min(26rem, 92%);
    height: auto;
    max-height: min(78%, 560px);
    margin: auto;
    border-radius: 18px;
    box-sizing: border-box;
  }
  #doc-overlay-host .doc-overlay-backdrop.is-chat-sized {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
  }
  #doc-overlay-host .doc-overlay-backdrop.is-chat-sized .mobile-doc-drawer {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    max-height: none;
    margin: 0;
    border-radius: inherit;
  }
}

/* Landing-Doc-Overlay (Anmelden/Registrieren/Besucher, ohne App-Chrome) */
#doc-overlay-host {
  position: relative;
  z-index: 200;
}
#doc-overlay-host .mobile-doc-drawer {
  display: flex;
  transform: translateY(0);
  opacity: 1;
  z-index: 201;
}
/* Smartphone: AGB/Datenschutz/Kontakt vollflächig */
@media (max-width: 860px) {
  #doc-overlay-host:not(:empty) {
    position: fixed;
    inset: 0;
    z-index: 200;
  }
  #doc-overlay-host .doc-overlay-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    background: rgba(20, 28, 48, 0.55);
  }
  #doc-overlay-host .mobile-doc-drawer {
    position: fixed;
    inset: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto;
    height: auto;
    max-height: none;
    margin: 0;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    padding:
      max(0.35rem, var(--safe-t))
      max(0.75rem, var(--safe-r))
      max(0.5rem, var(--safe-b))
      max(0.75rem, var(--safe-l));
    z-index: 201;
  }
  #doc-overlay-host .mobile-doc-drawer-body {
    flex: 1 1 auto;
    min-height: 0;
  }
  #doc-overlay-host .doc-overlay-frame {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
  }
}
@media (min-width: 861px) {
  #doc-overlay-host .doc-overlay-backdrop {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(1rem, var(--safe-t)) max(1rem, var(--shell-pad-r)) max(1rem, var(--safe-b)) max(1rem, var(--shell-pad));
  }
  #doc-overlay-host .mobile-doc-drawer {
    position: relative;
    inset: auto;
    width: min(720px, 100%);
    height: min(88vh, 900px);
    max-height: min(88vh, 900px);
    border-radius: 22px;
    border: 1px solid var(--stroke);
    box-shadow: var(--shadow);
    margin: 0;
  }
}

/* —— Smileys / Composer —— */
.composer-wrap {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.composer-tools { display: flex; gap: .35rem; align-items: center; }
.dm-file-locked {
  margin: 0;
  padding: .45rem .65rem .15rem;
  font-size: .8rem;
  line-height: 1.4;
}
.composer-icon {
  position: relative;
  flex-shrink: 0;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--online);
  border-radius: 12px;
  background: var(--btn-surface-face);
  box-shadow: var(--btn-surface-3d);
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1;
  padding: 0;
  margin: 0;
  cursor: pointer;
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transform-origin: center;
}
.composer-icon > span {
  display: block;
  line-height: 1;
  pointer-events: none;
}
.composer-icon input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  border: 0;
}
.smiley-picker {
  /*
   * --smiley-picker-max = Budget; JS setzt --smiley-picker-h auf ein ganzzahliges
   * Vielfaches der Zeilenhöhe (+ Gaps/Padding), damit unten keine Smileys abgeschnitten sind.
   */
  --smiley-picker-max: min(260px, 42vh);
  border-top: 1px solid var(--divider);
  background: var(--input-bg);
  color: var(--ink);
  height: var(--smiley-picker-h, var(--smiley-picker-max));
  max-height: var(--smiley-picker-max);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}
html[data-theme="dark"] .smiley-picker {
  background: rgba(22, 30, 48, 0.96);
  border-top-color: rgba(140, 160, 200, 0.22);
}
.smiley-picker[hidden] { display: none !important; }
.smiley-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: .25rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  padding: .4rem .5rem .15rem;
  flex-shrink: 0;
  box-sizing: border-box;
}
.smiley-tab {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: .3rem .65rem;
  /* wie Senden / Composer / Kanton: System-/Body-Schriftgrösse */
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
  color: var(--muted);
  flex: 0 0 auto;
}
.smiley-tab.active {
  background: var(--nav-hover);
  color: var(--ink);
  font-weight: 700;
}
html[data-theme="dark"] .smiley-tab {
  color: #b8c4d8;
}
html[data-theme="dark"] .smiley-tab.active {
  background: rgba(139, 154, 255, 0.28);
  color: #f0f4ff;
}
.smiley-grid {
  /*
   * Breite ÷ Spalten, Abstand = gap (auch vertikal).
   * Wichtig: grid-auto-rows = Zellenbreite — sonst kollabieren Zeilen
   * und Kacheln liegen übereinander.
   */
  container-type: inline-size;
  container-name: smiley-grid;
  --smiley-cols: 16;
  --smiley-gap: 1px;
  --smiley-cell: 2.75rem;
  display: grid;
  grid-template-columns: repeat(var(--smiley-cols), minmax(0, 1fr));
  grid-auto-rows: var(--smiley-cell);
  gap: var(--smiley-gap);
  align-content: start;
  justify-content: stretch;
  padding: .3rem .15rem .45rem;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
@supports (width: 1cqi) {
  .smiley-grid {
    /* Zellenbreite = Spaltenbreite (kein min-rem — sonst Desktop 14-col höher als breit) */
    --smiley-cell: max(
      0px,
      calc((100cqi - (var(--smiley-cols) - 1) * var(--smiley-gap)) / var(--smiley-cols))
    );
  }
}
.smiley-item {
  border: 0;
  background: transparent;
  border-radius: 8px;
  font-size: calc(var(--smiley-cell) * 0.72);
  line-height: 1;
  padding: 0;
  margin: 0;
  cursor: pointer;
  touch-action: manipulation;
  color: var(--ink);
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  align-self: stretch;
  justify-self: stretch;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  font-variant-emoji: emoji;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
  /* Globaler Hover-Scale würde Reihen überlagern */
  transform: none !important;
}
.smiley-glyph,
.smiley-item .sticker-face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  pointer-events: none;
  transform-origin: center center;
  font-size: 1em;
  line-height: 1;
  box-sizing: border-box;
}
html[data-theme="dark"] .smiley-item {
  background: rgba(48, 60, 90, 0.45);
  color: #f2f5fc;
}
.smiley-recent-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .25rem .55rem .1rem;
  flex-shrink: 0;
}
.smiley-recent-bar .hint {
  margin: 0;
  font-size: .78rem;
}
.smiley-reset-recent {
  border: 1px solid var(--online);
  background: var(--btn-secondary-bg);
  color: var(--ink);
  border-radius: 999px;
  padding: .28rem .7rem;
  font: inherit;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  flex-shrink: 0;
}
.smiley-reset-recent:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.smiley-recent-empty {
  grid-column: 1 / -1;
  margin: .55rem .15rem;
  text-align: center;
}
@media (hover: hover) and (pointer: fine) {
  .smiley-item:hover {
    background: var(--nav-hover);
    transform: none !important;
    filter: none;
    box-shadow: none;
  }
  html[data-theme="dark"] .smiley-item:hover {
    background: rgba(139, 154, 255, 0.28);
  }
  .smiley-reset-recent:not(:disabled):hover {
    border-color: var(--online);
    background: var(--nav-hover);
  }
}

/* Mobile: engere Tabs/Grid, alles im Viewport */
@media (max-width: 860px) {
  .smiley-picker {
    /* ~¾ der bisherigen Höhe (Budget; JS snapt auf volle Zeilen) */
    --smiley-picker-max: min(210px, 34.5vh);
  }
  .smiley-tabs {
    gap: .15rem;
    padding: .35rem .4rem .1rem;
  }
  .smiley-tab {
    padding: .28rem .48rem;
  }
  .smiley-grid {
    --smiley-cols: 10;
    --smiley-gap: 1px;
    padding: .28rem 0.1rem .4rem;
  }
  .composer {
    max-width: 100%;
    min-width: 0;
  }
}
.sticker-face { display: inline-block; transform-origin: center center; }
.smiley-grid .sticker-face { display: flex; }
.anim-bounce .sticker-face { animation: sm-bounce 1.1s ease-in-out infinite; }
.anim-spin .sticker-face { animation: sm-spin 2.2s linear infinite; }
.anim-pulse .sticker-face { animation: sm-pulse 1.2s ease-in-out infinite; }
.anim-shake .sticker-face { animation: sm-shake .55s ease-in-out infinite; }
.anim-wiggle .sticker-face { animation: sm-wiggle .8s ease-in-out infinite; }
.anim-float .sticker-face { animation: sm-float 1.6s ease-in-out infinite; }
.anim-pop .sticker-face { animation: sm-pop 1.1s ease-in-out infinite; }
.anim-blink .sticker-face { animation: sm-blink 1.8s step-end infinite; }
.anim-hop .sticker-face { animation: sm-hop .85s cubic-bezier(.34,1.56,.64,1) infinite; }
.anim-flip .sticker-face { animation: sm-flip 1.8s ease-in-out infinite; }
.anim-jelly .sticker-face { animation: sm-jelly 1s ease-in-out infinite; }
.anim-swing .sticker-face { animation: sm-swing 1.2s ease-in-out infinite; }
.anim-zoom .sticker-face { animation: sm-zoom 1.15s ease-in-out infinite; }
.anim-tada .sticker-face { animation: sm-tada 1.1s ease-in-out infinite; }
.anim-heartbeat .sticker-face { animation: sm-heartbeat 1.1s ease-in-out infinite; }
.anim-roll .sticker-face { animation: sm-roll 1.6s linear infinite; }
@keyframes sm-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes sm-spin { to { transform: rotate(360deg); } }
@keyframes sm-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.18)} }
@keyframes sm-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }
@keyframes sm-wiggle { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-8deg)} 75%{transform:rotate(8deg)} }
@keyframes sm-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px) scale(1.05)} }
@keyframes sm-pop { 0%,100%{transform:scale(1)} 40%{transform:scale(1.25)} 60%{transform:scale(.95)} }
@keyframes sm-blink { 0%,90%,100%{opacity:1} 95%{opacity:.15} }
@keyframes sm-hop {
  0%,100%{transform:translateY(0) scale(1,1)}
  35%{transform:translateY(-10px) scale(1.05,.9)}
  55%{transform:translateY(0) scale(.95,1.08)}
  70%{transform:translateY(-4px) scale(1.02,.96)}
}
@keyframes sm-flip {
  0%{transform:perspective(120px) rotateY(0)}
  50%{transform:perspective(120px) rotateY(180deg)}
  100%{transform:perspective(120px) rotateY(360deg)}
}
@keyframes sm-jelly {
  0%,100%{transform:skewX(0) scale(1)}
  25%{transform:skewX(-8deg) scale(1.08,0.92)}
  50%{transform:skewX(6deg) scale(0.94,1.06)}
  75%{transform:skewX(-4deg) scale(1.04,0.96)}
}
@keyframes sm-swing {
  0%,100%{transform:rotate(0)}
  20%{transform:rotate(12deg)}
  40%{transform:rotate(-10deg)}
  60%{transform:rotate(6deg)}
  80%{transform:rotate(-4deg)}
}
@keyframes sm-zoom {
  0%,100%{transform:scale(1)}
  40%{transform:scale(1.35)}
  55%{transform:scale(.88)}
  70%{transform:scale(1.12)}
}
@keyframes sm-tada {
  0%,100%{transform:scale(1) rotate(0)}
  10%,20%{transform:scale(.92) rotate(-6deg)}
  30%,50%,70%{transform:scale(1.18) rotate(6deg)}
  40%,60%{transform:scale(1.18) rotate(-6deg)}
}
@keyframes sm-heartbeat {
  0%,100%{transform:scale(1)}
  14%{transform:scale(1.22)}
  28%{transform:scale(1)}
  42%{transform:scale(1.18)}
  70%{transform:scale(1)}
}
@keyframes sm-roll {
  0%{transform:translateX(0) rotate(0)}
  25%{transform:translateX(3px) rotate(90deg)}
  50%{transform:translateX(0) rotate(180deg)}
  75%{transform:translateX(-3px) rotate(270deg)}
  100%{transform:translateX(0) rotate(360deg)}
}
.msg-sticker {
  display: inline-flex;
  font-size: 2.4rem;
  line-height: 1;
  padding: .2rem 0;
  transform-origin: center center;
}
.msg-sticker.anim-bounce { animation: sm-bounce 1.1s ease-in-out infinite; }
.msg-sticker.anim-spin { animation: sm-spin 2.2s linear infinite; }
.msg-sticker.anim-pulse { animation: sm-pulse 1.2s ease-in-out infinite; }
.msg-sticker.anim-shake { animation: sm-shake .55s ease-in-out infinite; }
.msg-sticker.anim-wiggle { animation: sm-wiggle .8s ease-in-out infinite; }
.msg-sticker.anim-float { animation: sm-float 1.6s ease-in-out infinite; }
.msg-sticker.anim-pop { animation: sm-pop 1.1s ease-in-out infinite; }
.msg-sticker.anim-blink { animation: sm-blink 1.8s step-end infinite; }
.msg-sticker.anim-hop { animation: sm-hop .85s cubic-bezier(.34,1.56,.64,1) infinite; }
.msg-sticker.anim-flip { animation: sm-flip 1.8s ease-in-out infinite; }
.msg-sticker.anim-jelly { animation: sm-jelly 1s ease-in-out infinite; }
.msg-sticker.anim-swing { animation: sm-swing 1.2s ease-in-out infinite; }
.msg-sticker.anim-zoom { animation: sm-zoom 1.15s ease-in-out infinite; }
.msg-sticker.anim-tada { animation: sm-tada 1.1s ease-in-out infinite; }
.msg-sticker.anim-heartbeat { animation: sm-heartbeat 1.1s ease-in-out infinite; }
.msg-sticker.anim-roll { animation: sm-roll 1.6s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .anim-bounce .sticker-face,
  .anim-spin .sticker-face,
  .anim-pulse .sticker-face,
  .anim-shake .sticker-face,
  .anim-wiggle .sticker-face,
  .anim-float .sticker-face,
  .anim-pop .sticker-face,
  .anim-blink .sticker-face,
  .anim-hop .sticker-face,
  .anim-flip .sticker-face,
  .anim-jelly .sticker-face,
  .anim-swing .sticker-face,
  .anim-zoom .sticker-face,
  .anim-tada .sticker-face,
  .anim-heartbeat .sticker-face,
  .anim-roll .sticker-face,
  .msg-sticker[class*="anim-"] {
    animation: none !important;
  }
}

.msg-nick-btn {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .msg-nick-btn:hover { text-decoration-color: currentColor; }
}

/* Person sheet / report */
.unsaved-prompt-card {
  max-width: 26rem;
  width: min(26rem, calc(100vw - 1.5rem));
}
.unsaved-prompt-actions {
  flex-wrap: wrap;
  gap: 0.5rem;
}
.unsaved-prompt-actions .btn {
  flex: 1 1 auto;
  min-width: 10rem;
}
.person-sheet {
  max-width: 26rem;
  width: min(26rem, calc(100vw - 1.5rem));
}
.person-card-head {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .35rem;
}
.person-card-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.15rem 0.25rem;
}
.person-card-head h3 .nick-slot {
  flex: 0 0 10ch;
}
.person-card-head .avatar {
  width: calc(3.25rem * var(--avatar-scale));
  height: calc(3.25rem * var(--avatar-scale));
  font-size: calc(1.25rem * var(--avatar-scale));
}
.person-card-head .drawer-close {
  margin-left: auto;
}
.person-card-body {
  margin: .65rem 0 .35rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.person-facts {
  margin: 0;
  font-weight: 700;
  font-size: 1.02rem;
}
.person-field {
  padding: .65rem .75rem;
  border-radius: 14px;
  background: var(--surface-soft);
  border: 1px solid var(--divider);
}
.person-field-label {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .2rem;
}
.person-field p,
.person-field strong {
  margin: 0;
  font-size: .95rem;
  line-height: 1.4;
}
.person-card-locked {
  margin: .75rem 0;
  padding: .9rem 1rem;
  border-radius: 16px;
  background: var(--surface-soft);
  border: 1px solid var(--divider);
}
.person-card-locked p { margin: 0 0 .55rem; }
.person-card-loading { margin: .75rem 0; }
.person-sheet .actions { display: flex; flex-direction: column; gap: .45rem; margin-top: .75rem; }
.person-sheet .actions .btn { width: 100%; }

/* File offer / blur */
.file-offer-card, .media-pending {
  margin-top: .35rem;
  padding: .65rem;
  border-radius: 12px;
  background: rgba(90,110,150,.08);
  border: 1px solid rgba(90,110,150,.18);
}
.media-blur {
  filter: blur(14px);
  transform: scale(1.05);
  pointer-events: none;
  user-select: none;
  max-width: 220px;
  max-height: 160px;
  border-radius: 10px;
  display: block;
}
.media-clear {
  max-width: 240px;
  max-height: 220px;
  border-radius: 10px;
  display: block;
}
.media-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  max-width: 100%;
}
.media-ephemeral-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(212, 84, 106, 0.14);
  border: 1px solid rgba(212, 84, 106, 0.35);
  color: #c23d55;
  font-size: 0.72rem;
  font-weight: 700;
}
html[data-theme="dark"] .media-ephemeral-badge {
  background: rgba(224, 107, 126, 0.2);
  color: #f0a0ad;
}
.media-save-btn {
  min-height: 2rem;
  padding: 0.25rem 0.7rem;
  font-size: 0.82rem;
}
.file-ephemeral-gone {
  margin-top: 0.25rem;
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  background: rgba(90, 110, 150, 0.1);
  border: 1px dashed rgba(90, 110, 150, 0.35);
  color: var(--muted);
  font-size: 0.88rem;
  font-style: italic;
}
.media-dissolving {
  animation: media-dissolve 1.45s ease forwards;
  pointer-events: none;
}
@keyframes media-dissolve {
  0% {
    filter: none;
    opacity: 1;
    transform: scale(1);
  }
  35% {
    filter: contrast(1.4) saturate(0.4) blur(1px);
    opacity: 0.9;
    transform: scale(1.01);
  }
  70% {
    filter: contrast(2.2) saturate(0) blur(6px);
    opacity: 0.45;
    transform: scale(0.97);
  }
  100% {
    filter: contrast(3) saturate(0) blur(18px);
    opacity: 0;
    transform: scale(0.9);
  }
}
@media (prefers-reduced-motion: reduce) {
  .media-dissolving {
    animation: media-dissolve-reduced 0.7s ease forwards;
  }
  @keyframes media-dissolve-reduced {
    to { opacity: 0; filter: blur(8px); }
  }
}
.composer-ephemeral {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.15rem 0.75rem 0.1rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--divider);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  width: fit-content;
}
.composer-ephemeral input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: #d4546a;
}
.composer-ephemeral.on {
  border-color: rgba(212, 84, 106, 0.45);
  background: rgba(212, 84, 106, 0.12);
  color: #c23d55;
}
html[data-theme="dark"] .composer-ephemeral.on {
  color: #f0a0ad;
}
.media-open {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  touch-action: manipulation;
  border-radius: 10px;
  max-width: 100%;
  line-height: 0;
}
.media-open:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.media-open .media-clear {
  pointer-events: none;
}
.media-open-badge {
  position: absolute;
  right: 0.4rem;
  bottom: 0.4rem;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(20, 28, 45, 0.72);
  color: #fff;
  font-size: 0.75rem;
  pointer-events: none;
}
.media-viewer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding:
    max(0.75rem, var(--safe-t))
    max(0.75rem, var(--safe-r))
    max(0.75rem, var(--safe-b))
    max(0.75rem, var(--safe-l));
  background: rgba(6, 10, 18, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.media-viewer-close {
  position: absolute;
  top: max(0.65rem, var(--safe-t));
  right: max(0.65rem, var(--safe-r));
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.32) 0%,
    rgba(255, 255, 255, 0.14) 50%,
    rgba(0, 0, 0, 0.28) 100%
  );
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1.5px 0 rgba(0, 0, 0, 0.35),
    0 2px 0 rgba(0, 0, 0, 0.35),
    0 5px 14px rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.media-viewer-close:hover {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(0, 0, 0, 0.28) 100%
  );
}
.media-viewer-stage {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: grid;
  place-items: center;
}
.media-viewer-media {
  max-width: min(100%, 1100px);
  max-height: min(82vh, 900px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  background: #000;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
}
video.media-viewer-media {
  width: min(100%, 1100px);
}
.media-viewer-hint {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.82rem;
  text-align: center;
}
.media-viewer-countdown {
  position: absolute;
  top: max(0.75rem, var(--safe-t));
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.75rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(212, 84, 106, 0.92);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.media-viewer-ephemeral-note {
  position: absolute;
  top: max(0.85rem, var(--safe-t));
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(212, 84, 106, 0.88);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}
.media-viewer-ephemeral .media-viewer-close {
  background: rgba(212, 84, 106, 0.35);
}
.media-blur-video {
  display: grid;
  place-items: center;
  width: 140px;
  height: 100px;
  font-size: 2rem;
  filter: none;
  transform: none;
  background: rgba(90, 110, 150, 0.15);
}
.file-rejected {
  margin-top: 0.25rem;
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  background: rgba(212, 84, 106, 0.1);
  border: 1px solid rgba(212, 84, 106, 0.28);
  color: #c23d55;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
}
.file-rejected-out {
  background: rgba(90, 110, 150, 0.1);
  border-color: rgba(90, 110, 150, 0.28);
  color: var(--muted);
}
html[data-theme="dark"] .file-rejected {
  background: rgba(224, 107, 126, 0.16);
  border-color: rgba(224, 107, 126, 0.35);
  color: #f0a0ad;
}
html[data-theme="dark"] .file-rejected-out {
  background: rgba(140, 160, 200, 0.12);
  border-color: rgba(140, 160, 200, 0.28);
  color: var(--muted);
}
.dm-form-error {
  margin: 0.35rem 0.75rem 0;
}
.file-offer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .55rem;
}

/* DM */
.dm-head-back { margin-right: .5rem; }
.file-policy-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding: .35rem .75rem;
  font-size: .85rem;
  color: var(--muted);
  border-bottom: 1px solid rgba(90,110,150,.1);
}

/* —— Wunschkonzert & Anzeigen —— */
.section-sub {
  margin: 1.25rem 0 0.65rem;
  font-size: 1rem;
  font-weight: 700;
}
.wish-form,
.ad-compose {
  margin: 0.75rem 0 1rem;
  padding: 0.85rem 0.9rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(90, 110, 150, 0.14);
}
/* Anzeige / Wunsch aufgeben: kleineres schliessbares Fenster */
.feature-compose-card {
  width: min(26rem, 94vw);
  max-height: min(78vh, 560px);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.55rem 0.95rem 1rem;
  overflow: hidden;
}
.feature-compose-card > .drawer-handle {
  margin: 0.05rem 0 0;
}
.feature-compose-card .scope-picker-head {
  flex-shrink: 0;
  margin: 0;
}
.feature-compose-card .scope-picker-head h3 {
  margin: 0;
  font-size: 1.1rem;
}
.feature-compose-card > .hint {
  margin: 0;
  flex-shrink: 0;
}
.compose-search-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  flex-shrink: 0;
}
.compose-search-label .scope-pick-search {
  width: 100%;
  box-sizing: border-box;
}
.feature-list-search {
  margin: 0 0 0.85rem;
}
.compose-similar {
  flex: 0 1 auto;
  min-height: 0;
  max-height: 9.5rem;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding: 0.35rem 0.15rem;
  border-radius: 12px;
  border: 1px solid rgba(90, 110, 150, 0.12);
  background: rgba(255, 255, 255, 0.28);
}
html[data-theme="dark"] .compose-similar {
  background: rgba(22, 30, 48, 0.45);
  border-color: rgba(140, 160, 200, 0.16);
}
.compose-similar-empty {
  margin: 0.35rem 0.45rem;
}
.compose-similar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.compose-similar-item {
  margin: 0;
}
.compose-similar-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  margin: 0;
  padding: 0.45rem 0.55rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
button.compose-similar-btn:hover,
button.compose-similar-btn:focus-visible {
  background: rgba(124, 140, 255, 0.12);
  outline: none;
}
.compose-similar-snippet {
  font-size: 0.86rem;
  line-height: 1.35;
  opacity: 0.9;
  white-space: pre-wrap;
}
.feature-compose-form {
  margin: 0;
  flex-shrink: 0;
  overflow: auto;
  max-height: none;
}
html[data-theme="dark"] .wish-form,
html[data-theme="dark"] .ad-compose {
  background: rgba(28, 38, 58, 0.55);
  border-color: rgba(140, 160, 200, 0.18);
}
.wish-list,
.ad-thread-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.wish-item {
  padding: 0.75rem 0.85rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(90, 110, 150, 0.12);
}
html[data-theme="dark"] .wish-item {
  background: rgba(22, 30, 48, 0.55);
  border-color: rgba(140, 160, 200, 0.16);
}
.wish-item.is-mine {
  border-color: rgba(124, 140, 255, 0.35);
}
.wish-item.is-unseen {
  border-color: rgba(40, 140, 110, 0.45);
  box-shadow: inset 3px 0 0 rgba(40, 140, 110, 0.55);
}
.wish-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.15rem 0 0.2rem;
}
.wish-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.45rem;
}
.wish-toolbar.ad-mode-bar {
  margin: 0.35rem 0 0.85rem;
}
.wish-head .avatar {
  width: calc(2rem * var(--avatar-scale));
  height: calc(2rem * var(--avatar-scale));
  font-size: calc(0.8rem * var(--avatar-scale));
}
.wish-body {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.45;
}
.ad-toolbar { margin: 0.5rem 0 0.85rem; }
.ad-mode-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.85rem;
  align-items: center;
  justify-content: space-between;
  margin: 0.35rem 0 0.85rem;
}
.ad-mode-toggle,
.ad-filter {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.ad-feed {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.ad-feed-stage {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 0.5rem;
}
.ad-feed-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
}
.ad-feed-viewport {
  touch-action: pan-y;
  user-select: none;
  min-height: 12rem;
}
.ad-feed-card {
  min-height: 12rem;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ad-feed-card:active {
  transform: scale(0.985);
}
.ad-feed-nav {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}
.ad-feed-nav .btn {
  min-width: 3.2rem;
}
.ad-heart-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: #b33a5a;
  background: rgba(200, 60, 90, 0.12);
  border: 1px solid rgba(180, 50, 80, 0.28);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
}
.ad-heart-badge.is-on {
  background: rgba(200, 60, 90, 0.22);
}
html[data-theme="dark"] .ad-heart-badge {
  color: #f0a0b4;
  background: rgba(200, 60, 90, 0.2);
}
.ad-fresh-badge {
  color: #3a6aa8;
  background: rgba(60, 120, 190, 0.14);
  border-color: rgba(60, 110, 180, 0.35);
}
html[data-theme="dark"] .ad-fresh-badge {
  color: #9ec4f0;
  background: rgba(60, 120, 190, 0.22);
}
.ad-card {
  padding: 0.85rem 0.95rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid rgba(90, 110, 150, 0.14);
}
html[data-theme="dark"] .ad-card {
  background: rgba(22, 30, 48, 0.58);
  border-color: rgba(140, 160, 200, 0.18);
}
.ad-card.is-unseen {
  border-color: rgba(40, 140, 110, 0.45);
  box-shadow: inset 3px 0 0 rgba(40, 140, 110, 0.55);
}
.ad-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.45rem;
}
.ad-author {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.ad-author .avatar {
  width: calc(2.1rem * var(--avatar-scale));
  height: calc(2.1rem * var(--avatar-scale));
  font-size: calc(0.85rem * var(--avatar-scale));
}
.ad-new-badge {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #1f7a5f;
  background: rgba(40, 160, 120, 0.16);
  border: 1px solid rgba(40, 140, 110, 0.35);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
}
html[data-theme="dark"] .ad-new-badge {
  color: #8fe0c4;
  background: rgba(40, 160, 120, 0.22);
}
.ad-when { margin-left: auto; }
.ad-owner-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0 0 0.55rem;
}
.ad-owner-meta span {
  white-space: nowrap;
}
.ad-card.is-mine {
  border-color: rgba(90, 110, 150, 0.28);
}
.ad-edit-form {
  margin: 0 0 0.35rem;
}
.ad-title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}
.ad-body {
  margin: 0 0 0.45rem;
  white-space: pre-wrap;
  line-height: 1.45;
}
.ad-meta { margin-bottom: 0.55rem; }
.ad-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.ad-threads-box { margin: 0.5rem 0 1rem; }
.ad-thread-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  text-align: left;
  border: 1px solid rgba(90, 110, 150, 0.14);
  background: rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  padding: 0.55rem 0.7rem;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
html[data-theme="dark"] .ad-thread-item {
  background: rgba(22, 30, 48, 0.55);
  border-color: rgba(140, 160, 200, 0.16);
}
.ad-thread-item .avatar {
  width: calc(2rem * var(--avatar-scale));
  height: calc(2rem * var(--avatar-scale));
}
.ad-thread-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}
/* Anzeige-Gespräch: gleiche Bubble-Darstellung wie Chat (.messages + .msg-row) */
.ad-thread-msgs.messages {
  flex: none;
  min-height: 10rem;
  max-height: min(52dvh, 28rem);
  margin-bottom: 0.75rem;
  border-radius: 14px;
  border: 1px solid var(--divider);
  background: color-mix(in srgb, var(--card) 48%, transparent);
}
html[data-theme="dark"] .ad-thread-msgs.messages {
  background: color-mix(in srgb, var(--card) 55%, transparent);
}
.ad-thread-form {
  display: grid;
  gap: 0.45rem;
}
.ad-thread-form textarea {
  width: 100%;
  resize: vertical;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wish-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.55rem;
}

.wish-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.25rem;
}
.wish-list-head .section-sub { margin: 1.25rem 0 0.35rem; }
.wish-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  margin: 0 0 0.75rem;
}
.wish-filter {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.wish-search-label {
  flex: 1 1 12rem;
  min-width: 10rem;
  margin: 0;
}
.wish-search {
  width: 100%;
  min-height: 2.35rem;
  padding: 0.45rem 0.75rem;
  border-radius: 12px;
  border: 1px solid rgba(90, 110, 150, 0.22);
  background: rgba(255, 255, 255, 0.65);
  color: var(--ink);
  font: inherit;
}
html[data-theme="dark"] .wish-search {
  background: rgba(22, 30, 48, 0.65);
  border-color: rgba(140, 160, 200, 0.22);
}

.honors-row {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  margin-left: 0.28rem;
  vertical-align: middle;
}
.honor-medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.5rem;
  line-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  filter: drop-shadow(0 1px 1.5px rgba(40, 48, 60, 0.28));
}
.honor-medal.honor-coin {
  width: 1.2rem;
  height: 1.2rem;
}
.honor-medal.honor-trophy,
.honor-medal.honor-ribbon {
  width: 1.35rem;
  height: 1.6rem;
}
.online-nick-row .honors-row,
.person-card-head .honors-row,
.user-chip-meta .honors-row {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: 0.2rem;
  vertical-align: middle;
}
.honor-medal.is-interactive {
  cursor: pointer;
  touch-action: manipulation;
}
.honor-medal.is-interactive:focus-visible {
  outline: 2px solid rgba(124, 140, 255, 0.65);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Honor/medal click spotlight: overlay clone at 3×, anchored to badge, 5s */
.honor-medal-spotlight {
  position: fixed;
  z-index: 12500;
  pointer-events: auto;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  transition:
    transform 0.48s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s ease;
  filter: drop-shadow(0 6px 14px rgba(30, 40, 55, 0.35));
  will-change: transform, opacity;
  transform-origin: center center;
  cursor: pointer;
}
.honor-spotlight-caption {
  position: absolute;
  left: 50%;
  top: calc(100% + 0.45rem);
  transform: translateX(-50%) scale(0.34);
  transform-origin: top center;
  margin: 0;
  min-width: 9rem;
  max-width: 14rem;
  padding: 0.45rem 0.55rem;
  border-radius: 10px;
  background: rgba(20, 28, 45, 0.92);
  color: #f4f7ff;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  pointer-events: none;
}
.honor-spotlight-caption strong {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 0.15rem;
}
.honor-spotlight-caption span {
  display: block;
  opacity: 0.9;
  font-weight: 400;
}
.honor-medal-spotlight.is-active {
  transform: translate(-50%, -50%) scale(3);
}
.honor-medal-spotlight.is-leaving {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1);
  transition:
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.38s ease;
}
.honor-medal-spotlight-bob {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.honor-medal-spotlight.is-active .honor-medal-spotlight-bob {
  animation: honor-spotlight-bob 2.4s ease-in-out infinite;
}
.honor-medal-spotlight-clone {
  width: 100% !important;
  height: 100% !important;
  cursor: default !important;
  pointer-events: none !important;
  outline: none !important;
}
.honor-medal-spotlight-clone .honor-medal-svg {
  width: 100%;
  height: 100%;
}
@keyframes honor-spotlight-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}
@media (prefers-reduced-motion: reduce) {
  .honor-medal-spotlight {
    transition-duration: 0.22s;
  }
  .honor-medal-spotlight.is-active {
    transform: translate(-50%, -50%) scale(3);
  }
  .honor-medal-spotlight.is-active .honor-medal-spotlight-bob {
    animation: none;
  }
  .honor-medal-spotlight.is-leaving {
    transition-duration: 0.2s;
  }
}
.wish-thread-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}
.wish-thread-idea {
  padding: 0.75rem 0.85rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(90, 110, 150, 0.14);
}
html[data-theme="dark"] .wish-thread-idea {
  background: rgba(22, 30, 48, 0.55);
}
.wish-cmt-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}
.wish-cmt {
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(90, 110, 150, 0.12);
}
.wish-cmt.is-admin {
  border-color: rgba(124, 140, 255, 0.35);
  background: rgba(124, 140, 255, 0.1);
}
html[data-theme="dark"] .wish-cmt {
  background: rgba(22, 30, 48, 0.55);
}
.wish-cmt-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.wish-cmt-head .avatar {
  width: calc(1.85rem * var(--avatar-scale));
  height: calc(1.85rem * var(--avatar-scale));
  font-size: calc(0.75rem * var(--avatar-scale));
}
.wish-cmt-body {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.4;
}

/* —— Self-click toast —— */
.self-click-toast {
  position: fixed;
  z-index: 12000;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 240px;
  padding: 0.55rem 0.8rem;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.92rem;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.self-click-toast.is-on {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.self-click-toast-face {
  font-size: 1.15rem;
  line-height: 1;
}
.online-user.is-self {
  cursor: pointer;
}

/* —— Composer smiley: Glyph grösser; Live-Tricks via WAAPI (kein festes transform) —— */
/* At rest the face was inline-block (emoji metrics offset). :hover only adds
   transform:scale on .composer-icon — that compositor layer made it look centered.
   Pin the glyph in the tap box so rest matches hover; keep button size unchanged. */
.composer-icon.composer-smiley-live {
  font-size: 1.25rem; /* Box wie Geschwister */
}
.composer-smiley-live .composer-smiley-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform-origin: center center;
  will-change: transform;
  backface-visibility: hidden;
  line-height: 1;
  font-size: 1.55em;
  /* Own layer at rest (same as when parent gets hover scale) */
  transform: translateZ(0);
}
@media (prefers-reduced-motion: reduce) {
  .composer-smiley-live .composer-smiley-face {
    will-change: auto;
    animation: none !important;
    transform: none;
  }
}

/* —— Intro Lindic splash (Web + PWA): Overlay über Messages-Shell —— */
.empty-room-splash {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 1.25rem 0.75rem;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--bg1) 88%, var(--card));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity 0.48s ease, transform 0.48s ease;
  pointer-events: auto;
}
.empty-room-splash.is-leaving {
  opacity: 0;
  transform: scale(0.98);
  pointer-events: none;
}
.empty-room-splash-mark {
  position: relative;
  width: min(96%, 52rem);
  max-width: 100%;
  animation: empty-splash-in 0.9s ease both, empty-splash-pulse 2.4s ease-in-out 0.6s infinite;
}
.empty-room-splash-logo {
  display: block;
  width: 100%;
  height: auto;
}
.empty-room-splash-logo-dark { display: none; }
html[data-theme="dark"] .empty-room-splash-logo-light { display: none; }
html[data-theme="dark"] .empty-room-splash-logo-dark { display: block; }
@keyframes empty-splash-in {
  from { opacity: 0; transform: scale(0.92) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes empty-splash-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
  50% { transform: scale(1.03); filter: drop-shadow(0 10px 28px rgba(124, 140, 255, 0.28)); }
}
@media (prefers-reduced-motion: reduce) {
  .empty-room-splash-mark {
    animation: none;
  }
  .empty-room-splash {
    transition: none;
  }
}

/* —— Chrome background animations (profile preference) —— */
:root {
  --bg-anim-color: #7c8cff;
}

/*
 * Anim lives in #chrome-bg-layer inside .messages-shell only — not #app, rails,
 * header, or composer. Absolute fill + overflow clip; canvas sized via ResizeObserver.
 */
#chrome-bg-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.chrome-bg-canvas,
#chrome-bg-plasma {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  display: block;
}
html[data-bg-anim="itp"] .chrome-bg-itp {
  opacity: 1;
}
body.has-chrome-bg-anim::before {
  opacity: 0.12;
}

/*
 * Only the messages band is clear so the anim is the chat BACKGROUND.
 * Head / composer / side rails / #app stay opaque — anim must not wash them.
 */
/* Drop glass veil on the chat frame so #chrome-bg-layer is the real backdrop */
body.has-chrome-bg-anim .glass.chat-frame {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
body.has-chrome-bg-anim .messages-shell {
  isolation: isolate;
  overflow: hidden;
  background: transparent !important;
  background-color: transparent !important;
}
/* Canvas layer MUST sit under bubbles but above any accidental shell paint */
body.has-chrome-bg-anim .messages-shell > #chrome-bg-layer {
  z-index: 0;
}
body.has-chrome-bg-anim .messages-shell > .messages {
  position: relative;
  z-index: 1;
  background: transparent !important;
  background-color: transparent !important;
}
/* Empty-state copy must not paint an opaque slab over Zellen */
body.has-chrome-bg-anim .messages-shell > .messages > .empty {
  background: transparent !important;
  background-color: transparent !important;
}
/* Head / Composer / Buttons: Kontrast aus --chrome-* (bg_anim_color + Luminanz) */
body.has-chrome-bg-anim .chat-frame .chat-head {
  background: var(--chrome-surface, #ffffff);
  border-bottom-color: color-mix(in srgb, var(--chrome-border, rgba(90, 110, 150, 0.28)) 70%, transparent);
  color: var(--chrome-ink, var(--ink));
}
body.has-chrome-bg-anim .chat-frame .chat-head h2,
body.has-chrome-bg-anim .chat-frame .chat-head .chat-head-title,
body.has-chrome-bg-anim .chat-frame .chat-head .chat-brand {
  color: var(--chrome-ink, var(--ink));
}
body.has-chrome-bg-anim .chat-frame .chat-head .chat-status {
  color: var(--chrome-muted, var(--muted));
}
body.has-chrome-bg-anim .chat-frame .chat-head .chat-status.online {
  color: color-mix(in srgb, var(--online) 70%, var(--chrome-ink, var(--ink)));
}
body.has-chrome-bg-anim .chat-frame .chat-head .scope-pills button {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--chrome-btn-bg, var(--btn-secondary-bg)) 70%, #fff) 0%,
    var(--chrome-btn-bg, var(--btn-secondary-bg)) 48%,
    color-mix(in srgb, var(--chrome-btn-bg, var(--btn-secondary-bg)) 82%, #000) 100%
  );
  color: var(--chrome-btn-ink, var(--ink));
  border-color: var(--online);
  box-shadow: var(--btn-surface-3d);
}
body.has-chrome-bg-anim .chat-frame .chat-head .scope-pills button.active {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--chrome-btn-active-bg, var(--nav-hover)) 65%, #fff) 0%,
    var(--chrome-btn-active-bg, var(--nav-hover)) 48%,
    color-mix(in srgb, var(--chrome-btn-active-bg, var(--nav-hover)) 82%, #000) 100%
  );
  color: var(--chrome-btn-active-ink, var(--accent));
  border-color: var(--online);
  box-shadow: var(--btn-surface-3d);
}
body.has-chrome-bg-anim .chat-frame .composer {
  background: var(--chrome-composer, #f7f8fc);
  border-top-color: color-mix(in srgb, var(--chrome-border, rgba(90, 110, 150, 0.28)) 70%, transparent);
  color: var(--chrome-ink, var(--ink));
}
body.has-chrome-bg-anim .chat-frame .composer textarea,
body.has-chrome-bg-anim .chat-frame .composer input {
  color: var(--chrome-ink, var(--ink));
  background: color-mix(in srgb, var(--chrome-surface, #fff) 78%, transparent);
  border-color: color-mix(in srgb, var(--chrome-border, var(--input-border)) 80%, transparent);
}
body.has-chrome-bg-anim .chat-frame .composer textarea::placeholder,
body.has-chrome-bg-anim .chat-frame .composer input::placeholder {
  color: var(--chrome-muted, var(--muted));
  opacity: 0.9;
}
body.has-chrome-bg-anim .chat-frame .composer .composer-icon,
body.has-chrome-bg-anim .chat-frame .composer .btn.secondary,
body.has-chrome-bg-anim .chat-frame .composer .btn.ghost {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--chrome-btn-bg, var(--btn-secondary-bg)) 70%, #fff) 0%,
    var(--chrome-btn-bg, var(--btn-secondary-bg)) 48%,
    color-mix(in srgb, var(--chrome-btn-bg, var(--btn-secondary-bg)) 82%, #000) 100%
  );
  color: var(--chrome-btn-ink, var(--ink));
  border-color: var(--online);
  box-shadow: var(--btn-surface-3d);
}
body.has-chrome-bg-anim .chat-frame .composer .btn:not(.secondary):not(.ghost):not(.danger) {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--chrome-btn-active-bg, var(--accent)) 55%, #fff) 0%,
    var(--chrome-btn-active-bg, var(--accent)) 46%,
    color-mix(in srgb, var(--chrome-btn-active-bg, var(--accent)) 72%, #2f3a66) 100%
  );
  color: var(--chrome-btn-active-ink, #fff);
  border-color: var(--online);
  box-shadow: var(--btn-3d);
}
body.has-chrome-bg-anim .chat-frame .scroll-bottom-btn {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--chrome-btn-bg, var(--card)) 70%, #fff) 0%,
    var(--chrome-btn-bg, var(--card)) 48%,
    color-mix(in srgb, var(--chrome-btn-bg, var(--card)) 82%, #000) 100%
  );
  color: var(--chrome-btn-ink, var(--ink));
  border-color: var(--online);
  --scroll-btn-shadow: var(--btn-surface-3d);
  box-shadow: var(--scroll-btn-shadow);
}

/* Mobile-Bar + Overlays/Sheets: gleiche Chrome-Farbpalette wie Chat-Kopf */
body.has-chrome-bg-anim .mobile-bar {
  background: color-mix(in srgb, var(--chrome-surface, #fff) 94%, transparent);
  border-top-color: color-mix(in srgb, var(--chrome-border, var(--divider)) 70%, transparent);
  color: var(--chrome-ink, var(--ink));
  box-shadow: 0 -8px 28px color-mix(in srgb, var(--chrome-border, rgba(70, 90, 140, 0.28)) 35%, transparent);
}
/* Menü offen: Chrome-BG darf die transparente «nur Menü»-Bar nicht überschreiben */
body.has-chrome-bg-anim .app-root.drawer-menu .mobile-bar {
  background: transparent;
  border-top-color: transparent;
  box-shadow: none;
}
body.has-chrome-bg-anim .mobile-bar-menu,
body.has-chrome-bg-anim .mobile-bar-online {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--chrome-btn-bg, var(--nav-hover)) 70%, #fff) 0%,
    var(--chrome-btn-bg, var(--nav-hover)) 48%,
    color-mix(in srgb, var(--chrome-btn-bg, var(--nav-hover)) 82%, #000) 100%
  );
  color: var(--chrome-btn-ink, var(--ink));
  border-color: color-mix(in srgb, var(--chrome-border, var(--online)) 75%, var(--online));
  box-shadow: var(--btn-surface-3d);
}
body.has-chrome-bg-anim .mobile-bar-user {
  background: color-mix(in srgb, var(--chrome-btn-bg, var(--surface-soft)) 55%, var(--chrome-surface, #fff));
  border-color: color-mix(in srgb, var(--chrome-border, var(--divider)) 75%, transparent);
  color: var(--chrome-ink, var(--ink));
}
body.has-chrome-bg-anim .mobile-bar-name strong {
  color: var(--chrome-ink, var(--ink));
}
body.has-chrome-bg-anim .mobile-bar-name .hint,
body.has-chrome-bg-anim .mobile-bar-name .guest-badge {
  color: var(--chrome-muted, var(--muted));
}
body.has-chrome-bg-anim .app-root.drawer-online .mobile-bar-online {
  background: var(--chrome-btn-active-bg, var(--surface-soft));
  color: var(--chrome-btn-active-ink, var(--ink));
  border-color: color-mix(in srgb, var(--chrome-accent, var(--accent)) 40%, var(--chrome-border, var(--online)));
}

body.has-chrome-bg-anim .mobile-drawer,
body.has-chrome-bg-anim .scope-picker-sheet,
body.has-chrome-bg-anim .person-sheet,
body.has-chrome-bg-anim .modal-card {
  background: var(--chrome-surface, #ffffff);
  border-color: color-mix(in srgb, var(--chrome-border, var(--divider)) 55%, transparent);
  color: var(--chrome-ink, var(--ink));
  box-shadow: 0 -18px 52px color-mix(in srgb, var(--chrome-border, rgba(70, 90, 140, 0.28)) 40%, transparent);
}
html[data-theme="dark"] body.has-chrome-bg-anim .mobile-drawer,
html[data-theme="dark"] body.has-chrome-bg-anim .scope-picker-sheet,
html[data-theme="dark"] body.has-chrome-bg-anim .person-sheet,
html[data-theme="dark"] body.has-chrome-bg-anim .modal-card {
  background: var(--chrome-surface, rgb(18, 24, 38));
  border-color: color-mix(in srgb, var(--chrome-border, rgba(140, 160, 200, 0.28)) 55%, transparent);
  box-shadow: 0 -18px 52px rgba(0, 0, 0, 0.45);
}
body.has-chrome-bg-anim .mobile-drawer .drawer-head,
body.has-chrome-bg-anim .scope-picker-sheet .drawer-head,
body.has-chrome-bg-anim .person-sheet .drawer-head,
body.has-chrome-bg-anim .modal-card .drawer-head {
  border-bottom-color: color-mix(in srgb, var(--chrome-border, var(--divider)) 70%, transparent);
  color: var(--chrome-ink, var(--ink));
}
body.has-chrome-bg-anim .mobile-drawer .drawer-head h2,
body.has-chrome-bg-anim .scope-picker-sheet .drawer-head h2,
body.has-chrome-bg-anim .person-sheet .drawer-head h2,
body.has-chrome-bg-anim .modal-card .drawer-head h2 {
  color: var(--chrome-ink, var(--ink));
}
body.has-chrome-bg-anim .mobile-drawer .drawer-close,
body.has-chrome-bg-anim .scope-picker-sheet .drawer-close,
body.has-chrome-bg-anim .person-sheet .drawer-close,
body.has-chrome-bg-anim .modal-card .drawer-close {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--chrome-btn-bg, var(--surface-soft)) 70%, #fff) 0%,
    var(--chrome-btn-bg, var(--surface-soft)) 48%,
    color-mix(in srgb, var(--chrome-btn-bg, var(--surface-soft)) 82%, #000) 100%
  );
  color: var(--chrome-btn-ink, var(--ink));
  border-color: color-mix(in srgb, var(--chrome-border, var(--online)) 75%, var(--online));
  box-shadow: var(--btn-surface-3d);
}
body.has-chrome-bg-anim .drawer-handle span {
  background: color-mix(in srgb, var(--chrome-accent, var(--accent)) 50%, transparent);
  box-shadow: none;
}
body.has-chrome-bg-anim .overlay-menu-link,
body.has-chrome-bg-anim .profile-subnav-link {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--chrome-btn-bg, rgba(255, 255, 255, 0.65)) 70%, #fff) 0%,
    var(--chrome-btn-bg, rgba(255, 255, 255, 0.65)) 48%,
    color-mix(in srgb, var(--chrome-btn-bg, rgba(255, 255, 255, 0.65)) 82%, #000) 100%
  );
  color: var(--chrome-btn-ink, var(--ink));
  border-color: color-mix(in srgb, var(--chrome-border, var(--online)) 75%, var(--online));
  box-shadow: var(--btn-surface-3d);
}
body.has-chrome-bg-anim .overlay-menu-link.is-active,
body.has-chrome-bg-anim .profile-subnav-link.is-active {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--chrome-btn-active-bg, var(--nav-hover)) 65%, #fff) 0%,
    var(--chrome-btn-active-bg, var(--nav-hover)) 48%,
    color-mix(in srgb, var(--chrome-btn-active-bg, var(--nav-hover)) 82%, #000) 100%
  );
  color: var(--chrome-btn-active-ink, var(--accent));
  border-color: color-mix(in srgb, var(--chrome-accent, var(--accent)) 40%, var(--chrome-border, var(--online)));
  box-shadow: var(--btn-surface-3d);
}
/* Menü-Seiten/Profil: Primary-Buttons wie Nav (nicht Accent) */
body.has-chrome-bg-anim .mobile-view-drawer .btn:not(.danger):not(#logout-btn),
body.has-chrome-bg-anim .mobile-view-drawer label.btn:not(.danger) {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--chrome-btn-bg, rgba(255, 255, 255, 0.65)) 70%, #fff) 0%,
    var(--chrome-btn-bg, rgba(255, 255, 255, 0.65)) 48%,
    color-mix(in srgb, var(--chrome-btn-bg, rgba(255, 255, 255, 0.65)) 82%, #000) 100%
  );
  color: var(--chrome-btn-ink, var(--ink));
  border-color: color-mix(in srgb, var(--chrome-border, var(--online)) 75%, var(--online));
  box-shadow: var(--btn-surface-3d);
}
body.has-chrome-bg-anim .mobile-view-drawer .btn.small:not(.ghost):not(.secondary):not(.danger) {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--chrome-btn-active-bg, var(--nav-hover)) 65%, #fff) 0%,
    var(--chrome-btn-active-bg, var(--nav-hover)) 48%,
    color-mix(in srgb, var(--chrome-btn-active-bg, var(--nav-hover)) 82%, #000) 100%
  );
  color: var(--chrome-btn-active-ink, var(--accent));
  border-color: color-mix(in srgb, var(--chrome-accent, var(--accent)) 40%, var(--chrome-border, var(--online)));
}
body.has-chrome-bg-anim .mobile-view-drawer .btn.ghost:not(#logout-btn) {
  color: var(--chrome-muted, var(--muted));
}
@media (hover: hover) and (pointer: fine) {
  body.has-chrome-bg-anim .mobile-view-drawer .btn:not(.danger):not(#logout-btn):hover:not(:disabled),
  body.has-chrome-bg-anim .mobile-view-drawer label.btn:not(.danger):hover,
  body.has-chrome-bg-anim .profile-subnav-link:hover {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--chrome-btn-active-bg, var(--nav-hover)) 55%, #fff) 0%,
      color-mix(in srgb, var(--chrome-btn-active-bg, var(--nav-hover)) 55%, var(--chrome-btn-bg, #fff)) 48%,
      color-mix(in srgb, var(--chrome-btn-active-bg, var(--nav-hover)) 70%, #000) 100%
    );
    color: var(--chrome-btn-ink, var(--ink));
    border-color: color-mix(in srgb, var(--chrome-accent, var(--accent)) 35%, var(--chrome-border, var(--online)));
    box-shadow: var(--btn-surface-3d-hover);
  }
}
body.has-chrome-bg-anim .mobile-menu-drawer .theme-toggle-row,
body.has-chrome-bg-anim .mobile-menu-drawer .user-chip {
  background: color-mix(in srgb, var(--chrome-btn-bg, var(--surface-soft)) 60%, var(--chrome-surface, #fff));
  border-color: color-mix(in srgb, var(--chrome-border, var(--divider)) 70%, transparent);
  color: var(--chrome-ink, var(--ink));
}
body.has-chrome-bg-anim .mobile-view-drawer .overlay-menu-strip,
body.has-chrome-bg-anim .profile-sticky-top {
  background: var(--chrome-surface, #ffffff);
}
html[data-theme="dark"] body.has-chrome-bg-anim .mobile-view-drawer .overlay-menu-strip,
html[data-theme="dark"] body.has-chrome-bg-anim .profile-sticky-top {
  background: var(--chrome-surface, rgb(18, 24, 38));
}
body.has-chrome-bg-anim .mobile-menu-drawer .theme-toggle-row .hint,
body.has-chrome-bg-anim .mobile-menu-drawer .user-chip .hint,
body.has-chrome-bg-anim .mobile-drawer .hint {
  color: var(--chrome-muted, var(--muted));
}
/*
 * Menü-Buttons = dieselbe Chrome-Farbe wie Chat/Weitere.
 * html[data-theme] nötig, sonst schlagen Dark-Surface-Overrides die Chrome-Tint.
 */
html body.has-chrome-bg-anim .mobile-menu-drawer .nav button:not(.ghost),
html body.has-chrome-bg-anim .mobile-menu-drawer .nav a.nav-legal,
html[data-theme="dark"] body.has-chrome-bg-anim .mobile-menu-drawer .nav button:not(.ghost),
html[data-theme="dark"] body.has-chrome-bg-anim .mobile-menu-drawer .nav a.nav-legal,
html body.has-chrome-bg-anim .mobile-bar-menu,
html body.has-chrome-bg-anim .app-root.drawer-menu .mobile-bar-menu,
html body.has-chrome-bg-anim .mobile-bar-menu.active,
html[data-theme="dark"] body.has-chrome-bg-anim .mobile-bar-menu,
html[data-theme="dark"] body.has-chrome-bg-anim .app-root.drawer-menu .mobile-bar-menu,
html[data-theme="dark"] body.has-chrome-bg-anim .mobile-bar-menu.active,
body.has-chrome-bg-anim .mobile-online-drawer .online-list-toggle button {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--chrome-btn-bg, rgba(255, 255, 255, 0.65)) 70%, #fff) 0%,
    var(--chrome-btn-bg, rgba(255, 255, 255, 0.65)) 48%,
    color-mix(in srgb, var(--chrome-btn-bg, rgba(255, 255, 255, 0.65)) 82%, #000) 100%
  );
  color: var(--chrome-btn-ink, var(--ink));
  border-color: color-mix(in srgb, var(--chrome-border, var(--online)) 75%, var(--online));
  box-shadow: var(--btn-surface-3d);
}
body.has-chrome-bg-anim .mobile-menu-drawer .nav button.ghost {
  background: transparent;
  border: 2px solid #ff8a1a;
  box-shadow:
    0 0 6px rgba(255, 138, 26, 0.7),
    0 0 16px rgba(255, 138, 26, 0.45),
    0 0 32px rgba(255, 138, 26, 0.25);
  color: var(--chrome-muted, var(--muted));
}
html body.has-chrome-bg-anim .mobile-menu-drawer .nav button.active,
html body.has-chrome-bg-anim .mobile-menu-drawer .nav a.nav-legal.active,
html[data-theme="dark"] body.has-chrome-bg-anim .mobile-menu-drawer .nav button.active,
html[data-theme="dark"] body.has-chrome-bg-anim .mobile-menu-drawer .nav a.nav-legal.active,
body.has-chrome-bg-anim .mobile-online-drawer .online-list-toggle button.active {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--chrome-btn-active-bg, var(--nav-hover)) 65%, #fff) 0%,
    var(--chrome-btn-active-bg, var(--nav-hover)) 48%,
    color-mix(in srgb, var(--chrome-btn-active-bg, var(--nav-hover)) 82%, #000) 100%
  );
  color: var(--chrome-btn-active-ink, var(--accent));
  border-color: color-mix(in srgb, var(--chrome-accent, var(--accent)) 40%, var(--chrome-border, var(--online)));
  box-shadow: var(--btn-surface-3d);
}
body.has-chrome-bg-anim .mobile-menu-drawer .menu-install,
body.has-chrome-bg-anim .mobile-menu-drawer .menu-guest-note {
  background: color-mix(in srgb, var(--chrome-accent, var(--accent)) 14%, var(--chrome-surface, #fff));
  border-color: color-mix(in srgb, var(--chrome-accent, var(--accent)) 28%, transparent);
  color: var(--chrome-ink, var(--ink));
}
body.has-chrome-bg-anim .mobile-menu-drawer .menu-version {
  color: var(--chrome-muted, var(--muted));
}
body.has-chrome-bg-anim .desk-side .user-chip.has-dm-inbox {
  background: color-mix(in srgb, var(--chrome-btn-bg, var(--surface-soft)) 55%, var(--chrome-surface, #fff));
  border-color: color-mix(in srgb, var(--chrome-border, var(--divider)) 75%, transparent);
  color: var(--chrome-ink, var(--ink));
}

/* Desktop: Menü + Online-Liste wie Mobile-Overlays einfärben */
body.has-chrome-bg-anim .app-shell > .desk-side,
body.has-chrome-bg-anim .app-shell > .online-rail {
  background: var(--chrome-surface, #ffffff);
  border-color: color-mix(in srgb, var(--chrome-border, var(--stroke)) 55%, transparent);
  color: var(--chrome-ink, var(--ink));
  box-shadow: var(--shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-theme="dark"] body.has-chrome-bg-anim .app-shell > .desk-side,
html[data-theme="dark"] body.has-chrome-bg-anim .app-shell > .online-rail {
  background: var(--chrome-surface, rgb(18, 24, 38));
  border-color: color-mix(in srgb, var(--chrome-border, rgba(140, 160, 200, 0.28)) 55%, transparent);
}
body.has-chrome-bg-anim .desk-side .theme-toggle-row,
body.has-chrome-bg-anim .desk-side .user-chip {
  background: color-mix(in srgb, var(--chrome-btn-bg, var(--surface-soft)) 60%, var(--chrome-surface, #fff));
  border: 1px solid color-mix(in srgb, var(--chrome-border, var(--divider)) 70%, transparent);
  border-radius: 16px;
  color: var(--chrome-ink, var(--ink));
}
body.has-chrome-bg-anim .desk-side .theme-toggle-row {
  padding: 0.55rem 0.7rem;
  margin-bottom: 0.45rem;
}
body.has-chrome-bg-anim .desk-side .theme-toggle-row .hint,
body.has-chrome-bg-anim .desk-side .user-chip .hint,
body.has-chrome-bg-anim .desk-side .menu-version,
body.has-chrome-bg-anim .online-rail .hint,
body.has-chrome-bg-anim .online-rail .online-scope-hint {
  color: var(--chrome-muted, var(--muted));
}
body.has-chrome-bg-anim .theme-pref-pills button {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--chrome-btn-bg, var(--btn-secondary-bg)) 70%, #fff) 0%,
    var(--chrome-btn-bg, var(--btn-secondary-bg)) 48%,
    color-mix(in srgb, var(--chrome-btn-bg, var(--btn-secondary-bg)) 82%, #000) 100%
  );
  color: var(--chrome-btn-ink, var(--ink));
  border-color: color-mix(in srgb, var(--chrome-border, var(--online)) 75%, var(--online));
  box-shadow: var(--btn-surface-3d);
}
body.has-chrome-bg-anim .theme-pref-pills button.active {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--chrome-btn-active-bg, var(--nav-hover)) 65%, #fff) 0%,
    var(--chrome-btn-active-bg, var(--nav-hover)) 48%,
    color-mix(in srgb, var(--chrome-btn-active-bg, var(--nav-hover)) 82%, #000) 100%
  );
  color: var(--chrome-btn-active-ink, var(--accent));
  border-color: color-mix(in srgb, var(--chrome-accent, var(--accent)) 40%, var(--chrome-border, var(--online)));
  box-shadow: var(--btn-surface-3d);
}
body.has-chrome-bg-anim .desk-side .user-chip strong,
body.has-chrome-bg-anim .desk-side .nav,
body.has-chrome-bg-anim .online-rail .online-head h2,
body.has-chrome-bg-anim .online-rail .online-title {
  color: var(--chrome-ink, var(--ink));
}
body.has-chrome-bg-anim .desk-side .nav button:not(.ghost),
body.has-chrome-bg-anim .desk-side .nav a.nav-legal,
body.has-chrome-bg-anim .online-rail .online-list-toggle button {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--chrome-btn-bg, rgba(255, 255, 255, 0.65)) 70%, #fff) 0%,
    var(--chrome-btn-bg, rgba(255, 255, 255, 0.65)) 48%,
    color-mix(in srgb, var(--chrome-btn-bg, rgba(255, 255, 255, 0.65)) 82%, #000) 100%
  );
  color: var(--chrome-btn-ink, var(--ink));
  border-color: color-mix(in srgb, var(--chrome-border, var(--online)) 75%, var(--online));
  box-shadow: var(--btn-surface-3d);
}
body.has-chrome-bg-anim .desk-side .nav button.active,
body.has-chrome-bg-anim .desk-side .nav a.nav-legal.active,
body.has-chrome-bg-anim .online-rail .online-list-toggle button.active {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--chrome-btn-active-bg, var(--nav-hover)) 65%, #fff) 0%,
    var(--chrome-btn-active-bg, var(--nav-hover)) 48%,
    color-mix(in srgb, var(--chrome-btn-active-bg, var(--nav-hover)) 82%, #000) 100%
  );
  color: var(--chrome-btn-active-ink, var(--accent));
  border-color: color-mix(in srgb, var(--chrome-accent, var(--accent)) 40%, var(--chrome-border, var(--online)));
  box-shadow: var(--btn-surface-3d);
}
body.has-chrome-bg-anim .desk-side .nav button.ghost {
  background: transparent;
  border: 2px solid #ff8a1a;
  box-shadow:
    0 0 6px rgba(255, 138, 26, 0.7),
    0 0 16px rgba(255, 138, 26, 0.45),
    0 0 32px rgba(255, 138, 26, 0.25);
  color: var(--chrome-muted, var(--muted));
}
@media (hover: hover) and (pointer: fine) {
  body.has-chrome-bg-anim .desk-side .nav button:hover:not(.ghost),
  body.has-chrome-bg-anim .desk-side .nav a.nav-legal:hover,
  body.has-chrome-bg-anim .online-rail .online-list-toggle button:hover:not(:disabled) {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--chrome-btn-active-bg, var(--nav-hover)) 55%, #fff) 0%,
      color-mix(in srgb, var(--chrome-btn-active-bg, var(--nav-hover)) 55%, var(--chrome-btn-bg, #fff)) 48%,
      color-mix(in srgb, var(--chrome-btn-active-bg, var(--nav-hover)) 70%, #000) 100%
    );
    color: var(--chrome-btn-ink, var(--ink));
    border-color: color-mix(in srgb, var(--chrome-accent, var(--accent)) 35%, var(--chrome-border, var(--online)));
    box-shadow: var(--btn-surface-3d-hover);
  }
  body.has-chrome-bg-anim .desk-side .nav button.ghost:hover,
  body.has-chrome-bg-anim .mobile-menu-drawer .nav button.ghost:hover {
    background: transparent;
    border-color: #ff9a33;
    box-shadow:
      0 0 8px rgba(255, 138, 26, 0.85),
      0 0 20px rgba(255, 138, 26, 0.55),
      0 0 40px rgba(255, 138, 26, 0.32);
    color: var(--chrome-ink, var(--ink));
  }
  body.has-chrome-bg-anim .desk-side .nav button.active:hover,
  body.has-chrome-bg-anim .online-rail .online-list-toggle button.active:hover:not(:disabled) {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--chrome-btn-active-bg, var(--nav-hover)) 65%, #fff) 0%,
      var(--chrome-btn-active-bg, var(--nav-hover)) 48%,
      color-mix(in srgb, var(--chrome-btn-active-bg, var(--nav-hover)) 82%, #000) 100%
    );
    color: var(--chrome-btn-active-ink, var(--accent));
  }
}
body.has-chrome-bg-anim .desk-side .menu-install,
body.has-chrome-bg-anim .desk-side .menu-guest-note {
  background: color-mix(in srgb, var(--chrome-accent, var(--accent)) 14%, var(--chrome-surface, #fff));
  border-color: color-mix(in srgb, var(--chrome-accent, var(--accent)) 28%, transparent);
  color: var(--chrome-ink, var(--ink));
}
body.has-chrome-bg-anim .online-rail .online-head {
  border-bottom-color: color-mix(in srgb, var(--chrome-border, var(--divider)) 70%, transparent);
  color: var(--chrome-ink, var(--ink));
}
body.has-chrome-bg-anim .online-rail .online-count {
  background: var(--chrome-btn-bg, var(--surface-soft));
  color: var(--chrome-btn-ink, var(--ink));
  border-color: color-mix(in srgb, var(--chrome-border, var(--divider)) 70%, transparent);
}
body.has-chrome-bg-anim .online-rail .online-user {
  color: var(--chrome-ink, var(--ink));
}
body.has-chrome-bg-anim .online-rail .online-user:hover,
body.has-chrome-bg-anim .online-rail .online-user:focus-visible {
  background: color-mix(in srgb, var(--chrome-btn-bg, var(--surface-soft)) 55%, transparent);
}
body.has-chrome-bg-anim .online-rail .online-empty {
  color: var(--chrome-muted, var(--muted));
}

body.has-chrome-bg-anim .mobile-drawer .btn:not(.secondary):not(.ghost):not(.danger),
body.has-chrome-bg-anim .person-sheet .btn:not(.secondary):not(.ghost):not(.danger),
body.has-chrome-bg-anim .modal-card .btn:not(.secondary):not(.ghost):not(.danger) {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--chrome-btn-active-bg, var(--accent)) 55%, #fff) 0%,
    var(--chrome-btn-active-bg, var(--accent)) 46%,
    color-mix(in srgb, var(--chrome-btn-active-bg, var(--accent)) 72%, #2f3a66) 100%
  );
  color: var(--chrome-btn-active-ink, #fff);
  border-color: color-mix(in srgb, var(--chrome-border, var(--online)) 60%, var(--online));
  box-shadow: var(--btn-3d);
}
body.has-chrome-bg-anim .mobile-drawer .btn.secondary,
body.has-chrome-bg-anim .mobile-drawer .btn.ghost,
body.has-chrome-bg-anim .person-sheet .btn.secondary,
body.has-chrome-bg-anim .person-sheet .btn.ghost,
body.has-chrome-bg-anim .modal-card .btn.secondary,
body.has-chrome-bg-anim .modal-card .btn.ghost {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--chrome-btn-bg, var(--btn-secondary-bg)) 70%, #fff) 0%,
    var(--chrome-btn-bg, var(--btn-secondary-bg)) 48%,
    color-mix(in srgb, var(--chrome-btn-bg, var(--btn-secondary-bg)) 82%, #000) 100%
  );
  color: var(--chrome-btn-ink, var(--ink));
  border-color: color-mix(in srgb, var(--chrome-border, var(--online)) 75%, var(--online));
  box-shadow: var(--btn-surface-3d);
}
body.has-chrome-bg-anim .dm-inbox-item,
body.has-chrome-bg-anim .online-list .online-user {
  color: var(--chrome-ink, var(--ink));
}
body.has-chrome-bg-anim .dm-inbox-item .dm-inbox-sub,
body.has-chrome-bg-anim .online-list .hint {
  color: var(--chrome-muted, var(--muted));
}

/* Solid bubbles under chrome anim — Farbring wash fill; border/stem = exact ring */
body.has-chrome-bg-anim .msg {
  background: var(--msg-bg);
  border-color: var(--msg-ring);
  color: var(--ink);
}
body.has-chrome-bg-anim .msg.mine {
  background: var(--msg-mine-bg);
  border: 5px solid var(--msg-ring-edge, var(--msg-ring));
  outline: none;
  box-shadow: none;
  color: var(--ink);
}
html[data-theme="dark"] body.has-chrome-bg-anim .glass.chat-frame {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
body.has-chrome-bg-anim .msg-avatar-btn::after,
body.has-chrome-bg-anim .msg-avatar-static::after {
  background: var(--msg-ring);
}
/* Canvas styles: CSS fallback base = profile Basisfarbe (no per-style paper hues) */
html[data-bg-anim="lindic"] #chrome-bg-layer,
html[data-bg-anim="itp"] #chrome-bg-layer,
html[data-bg-anim="pastel"] #chrome-bg-layer,
html[data-bg-anim="hearts"] #chrome-bg-layer,
html[data-bg-anim="teddys"] #chrome-bg-layer,
html[data-bg-anim="tropfen"] #chrome-bg-layer,
html[data-bg-anim="rainbow"] #chrome-bg-layer,
html[data-bg-anim="fog"] #chrome-bg-layer,
html[data-bg-anim="lines"] #chrome-bg-layer,
html[data-bg-anim="plasma"] #chrome-bg-layer {
  background:
    radial-gradient(900px 560px at 18% -8%, color-mix(in srgb, var(--bg-anim-color) 48%, #fff) 0%, transparent 55%),
    radial-gradient(600px 400px at 88% 100%, color-mix(in srgb, var(--bg-anim-color) 22%, transparent) 0%, transparent 50%),
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--bg-anim-color) 28%, #fff),
      color-mix(in srgb, var(--bg-anim-color) 18%, #f4f6fa) 48%,
      color-mix(in srgb, var(--bg-anim-color) 32%, #fff)
    );
}
html[data-bg-anim="solid"] #chrome-bg-layer {
  background: var(--bg-anim-color);
  opacity: 1;
}
html[data-theme="dark"][data-bg-anim="lindic"] #chrome-bg-layer,
html[data-theme="dark"][data-bg-anim="itp"] #chrome-bg-layer,
html[data-theme="dark"][data-bg-anim="pastel"] #chrome-bg-layer,
html[data-theme="dark"][data-bg-anim="hearts"] #chrome-bg-layer,
html[data-theme="dark"][data-bg-anim="teddys"] #chrome-bg-layer,
html[data-theme="dark"][data-bg-anim="tropfen"] #chrome-bg-layer,
html[data-theme="dark"][data-bg-anim="rainbow"] #chrome-bg-layer,
html[data-theme="dark"][data-bg-anim="fog"] #chrome-bg-layer,
html[data-theme="dark"][data-bg-anim="lines"] #chrome-bg-layer,
html[data-theme="dark"][data-bg-anim="plasma"] #chrome-bg-layer {
  background:
    radial-gradient(900px 500px at 12% -8%, color-mix(in srgb, var(--bg-anim-color) 42%, #141a2a) 0%, transparent 55%),
    radial-gradient(600px 400px at 90% 100%, color-mix(in srgb, var(--bg-anim-color) 18%, transparent) 0%, transparent 50%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg-anim-color) 22%, #0c0f18) 0%,
      color-mix(in srgb, var(--bg-anim-color) 12%, #07090e) 42%,
      #030406 100%
    );
}
html[data-theme="dark"][data-bg-anim="solid"] #chrome-bg-layer {
  background: var(--bg-anim-color);
}
.msg-side-settings {
  margin: 0.35rem 0 0.75rem;
}
.msg-side-settings select {
  max-width: 16rem;
}
.bg-anim-settings {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem 1rem;
  align-items: end;
  margin: 0.35rem 0 0.75rem;
}
.bg-anim-settings label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.profile-base-color-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.35rem 0 0.85rem;
  font-weight: 600;
}
.profile-base-color-label input[type="color"] {
  width: 3.2rem;
  height: 2.4rem;
  padding: 0.15rem;
  border-radius: 10px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  cursor: pointer;
}
.profile-bubble-color {
  margin-top: 0.35rem;
}
.profile-bubble-color > .profile-field-label,
.profile-peer-bubble-color > .profile-field-label {
  display: block;
  margin-bottom: 0.4rem;
}
.profile-bubble-mode,
.profile-peer-bubble-mode {
  margin: 0 0 0.65rem;
}
.profile-bubble-custom {
  margin: 0.35rem 0 0.55rem;
}
.profile-peer-bubble-color {
  margin-top: 1.1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--divider);
}
.profile-peer-bubble-color > .hint {
  margin: 0 0 0.55rem;
}
.profile-peer-bubble-color-label {
  margin-top: 0.15rem;
}
.profile-bubble-preview {
  margin: 0.55rem 0 0.15rem;
}
.profile-bubble-sample {
  display: inline-block;
  max-width: 100%;
  padding: 0.45rem 0.75rem;
  border-radius: 14px 14px 4px 14px;
  border: 2px solid var(--msg-ring, #7c8cff);
  background: var(--msg-mine-bg, color-mix(in srgb, var(--msg-ring, #7c8cff) 34%, #d4dae6));
  color: var(--msg-mine-ink, var(--ink));
  font-size: 0.9rem;
  font-weight: 600;
}
html[data-theme="dark"] .profile-bubble-sample {
  background: var(--msg-mine-bg, color-mix(in srgb, var(--msg-ring, #7c8cff) 52%, #455472));
}
.bg-anim-preview {
  position: relative;
  height: 3.25rem;
  margin: 0 0 1.1rem;
  border-radius: 14px;
  border: 1px solid var(--divider);
  background:
    radial-gradient(80% 120% at 20% 30%, color-mix(in srgb, var(--bg-anim-color) 35%, transparent), transparent 60%),
    radial-gradient(70% 100% at 80% 70%, color-mix(in srgb, var(--bg-anim-color) 22%, transparent), transparent 55%),
    var(--surface-soft);
  overflow: hidden;
}
.bg-anim-preview .chrome-bg-canvas,
.bg-anim-preview #chrome-bg-plasma {
  border-radius: 14px;
  opacity: 1;
}
.bg-anim-preview[data-bg-anim-preview="none"] {
  opacity: 0.45;
}
/* Static fallback: solid / outline / half-left / half-right hearts (matches canvas variants) */
.bg-anim-preview[data-bg-anim-preview="hearts"] {
  background-color: color-mix(in srgb, var(--bg-anim-color) 14%, var(--surface-soft));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='52' viewBox='0 0 160 52'%3E%3Cg fill='none' stroke='%23e878a0' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M18 28c0-6-8-8-8-14 0-4 3-7 7-7s6 3 7 7c1-4 3-7 7-7s7 3 7 7c0 6-8 8-8 14l-6 8z' fill='%23e878a088'/%3E%3Cpath d='M52 30c0-5-7-7-7-12 0-3.5 2.5-6 6-6s5 2.5 6 6c1-3.5 2.5-6 6-6s6 2.5 6 6c0 5-7 7-7 12l-5 7z'/%3E%3Cpath d='M92 26c0-5.5-7.5-7.5-7.5-13.5C84.5 8 87.5 5 91.5 5s5.5 3 6.5 6.5C99 8 102 5 106 5s7 3 7 7.5c0 6-7.5 8-7.5 13.5L100 34z'/%3E%3CclipPath id='hl'%3E%3Cpath d='M92 26c0-5.5-7.5-7.5-7.5-13.5C84.5 8 87.5 5 91.5 5s5.5 3 6.5 6.5C99 8 102 5 106 5s7 3 7 7.5c0 6-7.5 8-7.5 13.5L100 34z'/%3E%3C/clipPath%3E%3Crect x='84' y='4' width='16' height='34' fill='%23e878a099' clip-path='url(%23hl)'/%3E%3Cpath d='M132 28c0-6-8-8-8-14 0-4 3-7 7-7s6 3 7 7c1-4 3-7 7-7s7 3 7 7c0 6-8 8-8 14l-6 8z'/%3E%3CclipPath id='hr'%3E%3Cpath d='M132 28c0-6-8-8-8-14 0-4 3-7 7-7s6 3 7 7c1-4 3-7 7-7s7 3 7 7c0 6-8 8-8 14l-6 8z'/%3E%3C/clipPath%3E%3Crect x='132' y='4' width='20' height='36' fill='%23e878a099' clip-path='url(%23hr)'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
}
.bg-anim-preview[data-bg-anim-preview="rainbow"] {
  background: linear-gradient(110deg, #ff8a9a, #ffd07a, #8dffb0, #7ec8ff, #d0a0ff);
  background-size: 220% 220%;
}
.bg-anim-preview[data-bg-anim-preview="fog"] {
  background-image:
    radial-gradient(60% 80% at 25% 40%, color-mix(in srgb, var(--bg-anim-color) 40%, transparent), transparent 70%),
    radial-gradient(50% 70% at 75% 60%, color-mix(in srgb, var(--bg-anim-color) 28%, transparent), transparent 65%),
    var(--surface-soft);
}
.bg-anim-preview[data-bg-anim-preview="lines"] {
  background-image:
    linear-gradient(color-mix(in srgb, var(--bg-anim-color) 35%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--bg-anim-color) 35%, transparent) 1px, transparent 1px),
    var(--surface-soft);
  background-size: 100% 12px, 18px 100%, auto;
}
.bg-anim-preview[data-bg-anim-preview="pastel"] {
  background:
    radial-gradient(70% 90% at 30% 30%, rgba(255, 255, 255, 0.65), transparent 60%),
    radial-gradient(60% 80% at 80% 70%, color-mix(in srgb, var(--bg-anim-color) 28%, transparent), transparent 55%),
    color-mix(in srgb, var(--bg-anim-color) 22%, #fff);
}
.bg-anim-preview[data-bg-anim-preview="lindic"] {
  background-image:
    radial-gradient(70% 100% at 20% 30%, color-mix(in srgb, var(--bg-anim-color) 38%, transparent), transparent 60%),
    radial-gradient(60% 90% at 80% 70%, color-mix(in srgb, var(--bg-anim-color) 22%, transparent), transparent 55%),
    linear-gradient(160deg, color-mix(in srgb, var(--bg-anim-color) 28%, #fff), color-mix(in srgb, var(--bg-anim-color) 16%, #f0f4f8));
}
.bg-anim-preview[data-bg-anim-preview="itp"] {
  /* Fewer, larger preview cells with hairline (~0.5–1px) membranes */
  background-image:
    radial-gradient(circle at 30% 48%, color-mix(in srgb, var(--bg-anim-color) 62%, #0a100e) 0 16px, transparent 16.55px),
    radial-gradient(circle at 30% 48%, transparent 16.55px, color-mix(in srgb, var(--bg-anim-color) 92%, #1a221e) 16.8px, transparent 17.05px),
    radial-gradient(circle at 68% 42%, color-mix(in srgb, var(--bg-anim-color) 55%, #0a100e) 0 20px, transparent 20.55px),
    radial-gradient(circle at 68% 42%, transparent 20.55px, color-mix(in srgb, var(--bg-anim-color) 90%, #1a221e) 20.8px, transparent 21.05px),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-anim-color) 28%, #fff) 0%, color-mix(in srgb, var(--bg-anim-color) 18%, #f4f4f8) 55%, color-mix(in srgb, var(--bg-anim-color) 32%, #fff));
}
.bg-anim-preview[data-bg-anim-preview="solid"] {
  background: var(--bg-anim-color);
  opacity: 1;
}
.bg-anim-preview[data-bg-anim-preview="tropfen"] {
  background-image:
    radial-gradient(circle at 50% 50%, transparent 0 8px, color-mix(in srgb, var(--bg-anim-color) 45%, transparent) 9px, transparent 11px),
    radial-gradient(circle at 50% 50%, transparent 0 16px, color-mix(in srgb, var(--bg-anim-color) 30%, transparent) 17px, transparent 20px),
    radial-gradient(circle at 50% 50%, transparent 0 24px, color-mix(in srgb, var(--bg-anim-color) 18%, transparent) 25px, transparent 28px),
    color-mix(in srgb, var(--bg-anim-color) 12%, var(--surface-soft));
}
.bg-anim-preview[data-bg-anim-preview="teddys"] {
  background-color: color-mix(in srgb, var(--bg-anim-color) 14%, var(--surface-soft));
  background-image:
    radial-gradient(circle at 28% 55%, color-mix(in srgb, var(--bg-anim-color) 50%, transparent) 0 10px, transparent 11px),
    radial-gradient(circle at 22% 42%, color-mix(in srgb, var(--bg-anim-color) 40%, transparent) 0 4px, transparent 5px),
    radial-gradient(circle at 34% 42%, color-mix(in srgb, var(--bg-anim-color) 40%, transparent) 0 4px, transparent 5px),
    radial-gradient(circle at 70% 48%, color-mix(in srgb, var(--bg-anim-color) 45%, transparent) 0 12px, transparent 13px),
    linear-gradient(160deg, color-mix(in srgb, var(--bg-anim-color) 12%, #fff8f0), var(--surface-soft));
}
@media (max-width: 560px) {
  .bg-anim-settings {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-bg-anim] #chrome-bg-layer,
  html[data-bg-anim] #chrome-bg-layer::after,
  html[data-bg-anim] body::before {
    animation: none !important;
  }
  .chrome-bg-canvas,
  #chrome-bg-plasma { display: none; }
}

/* —— Anleitung (Buch im Overlay) —— */
.guide-book {
  max-width: none;
  margin: 0;
  /* rechts Abstand zum Scrollbar-Rand; Scrollbar selbst sitzt am Drawer-Rand */
  padding: 0.25rem max(0.85rem, var(--safe-r)) 1.25rem 0.15rem;
}
.guide-cover {
  margin: 0 0 1.35rem;
  padding: 0 0 1.15rem;
  border-bottom: 1px solid var(--divider);
}
.guide-cover-compact {
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
}
.guide-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.85rem 0 0;
}
.guide-page-head + .guide-search {
  margin: 0 0 1rem;
}
.guide-search-input {
  width: 100%;
  min-height: var(--tap, 2.75rem);
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  border-radius: 14px;
  padding: 0.65rem 2.5rem 0.65rem 0.9rem;
  font: inherit;
  color: var(--ink);
}
.guide-search-input:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 1px;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--input-border));
}
.guide-search-clear {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 1.15rem;
  line-height: 1;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
}
.guide-search-clear:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--surface-soft) 80%, transparent);
}
.guide-search-meta {
  margin: 0.65rem 0 0;
}
.guide-search-empty {
  margin: 0.5rem 0 1rem;
  color: var(--muted);
}
.guide-search-back {
  margin: 1rem 0 0;
}
.guide-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.guide-cover h2 {
  margin: 0 0 0.45rem;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 4vw, 1.85rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.guide-cover-actions {
  margin-top: 0.95rem;
}
.guide-toc h3 {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
}
.guide-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.guide-toc-item {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: center;
  text-align: left;
  border: 1px solid var(--input-border);
  background: var(--surface-soft);
  border-radius: 16px;
  padding: 0.75rem 0.9rem;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
}
.guide-toc-num {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-size: 0.95rem;
}
.guide-toc-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.guide-toc-text strong {
  font-size: 0.98rem;
  line-height: 1.25;
}
.guide-toc-text .hint {
  margin: 0;
  font-size: 0.82rem;
}
.guide-toc-go {
  color: var(--muted);
  font-weight: 700;
}
@media (hover: hover) and (pointer: fine) {
  /* Kein Scale: verbreitert die Scrollbar-Situation und lässt den Inhalt springen */
  .guide-toc-item:hover {
    border-color: var(--accent);
    background: var(--nav-hover);
    box-shadow: var(--btn-glow-soft, 0 6px 16px rgba(124, 140, 255, 0.2));
  }
}
.guide-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 1rem;
}
.guide-linkish {
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  padding: 0.25rem 0;
  cursor: pointer;
  touch-action: manipulation;
}
.guide-page-meta {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.guide-chapter-num {
  margin: 0 0 0.25rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.guide-chapter h2 {
  margin: 0 0 0.85rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.8vw, 1.75rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.guide-chapter-body {
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink);
}
.guide-chapter-body p,
.guide-chapter-body ul,
.guide-chapter-body ol {
  margin: 0 0 0.9rem;
}
.guide-chapter-body ul,
.guide-chapter-body ol {
  padding-left: 1.25rem;
}
.guide-chapter-body li {
  margin: 0.25rem 0;
}
.guide-chapter-body strong {
  font-weight: 800;
}
.guide-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin-top: 1.35rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--divider);
}
.guide-pager-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  min-height: 3.4rem;
  padding: 0.65rem 0.9rem;
  text-align: left;
}
.guide-pager-btn:last-child {
  align-items: flex-end;
  text-align: right;
}
.guide-pager-dir {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
}
.guide-pager-label {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.25;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 520px) {
  .guide-pager {
    grid-template-columns: 1fr;
  }
  .guide-pager-btn:last-child {
    align-items: flex-start;
    text-align: left;
  }
}

/* Kleines Smartphone Querformat: nicht unterstützt — Portrait-Hinweis */
.phone-landscape-gate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  box-sizing: border-box;
  padding: max(0.75rem, env(safe-area-inset-top, 0px))
    max(1rem, env(safe-area-inset-right, 0px))
    max(0.75rem, env(safe-area-inset-bottom, 0px))
    max(1rem, env(safe-area-inset-left, 0px));
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(124, 140, 255, 0.22), transparent 55%),
    linear-gradient(160deg, #eef1ff 0%, #f7f8fc 42%, #e8ecf8 100%);
  color: var(--ink, #1a1f36);
  -webkit-user-select: none;
  user-select: none;
}
html[data-theme="dark"] .phone-landscape-gate {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(124, 140, 255, 0.28), transparent 55%),
    linear-gradient(160deg, #12162a 0%, #0e1220 45%, #151a30 100%);
  color: #f4f7ff;
}
.phone-landscape-gate-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  min-height: 0;
  text-align: center;
}
.phone-landscape-gate-brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin: 0;
  width: auto;
  max-width: min(92vw, 36rem);
  flex: 0 0 auto;
  z-index: 1;
}
.phone-landscape-gate-brand img {
  width: clamp(64px, 16vmin, 140px) !important;
  height: auto !important;
  flex-shrink: 0;
}
.phone-landscape-gate-brand .wordmark .swiss {
  font-size: clamp(1.85rem, 8.5vmin, 3.6rem);
}
.phone-landscape-gate-brand .wordmark .chat {
  font-size: clamp(1.4rem, 6.5vmin, 2.75rem);
}
.phone-landscape-gate-msg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  margin: 0;
  width: min(36rem, 92%);
  max-width: 36rem;
  padding: 0 0.75rem;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: clamp(1.15rem, 4.8vmin, 1.55rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.015em;
  opacity: 0.95;
  pointer-events: none;
}
.phone-landscape-gate-foot {
  display: flex;
  justify-content: center;
  width: min(12.5rem, 38vw);
  max-width: 100%;
  padding-bottom: 0.1rem;
  flex: 0 0 auto;
  z-index: 1;
}
.phone-landscape-gate-foot .logo-lindic-byline {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
}
/*
 * Gate nur via JS-Klasse — NICHT per CSS orientation:landscape.
 * Soft-Keyboard macht Viewport oft breiter als hoch → falsches «Landscape»,
 * #app wird unsichtbar, Fokus weg, Tastatur klappt sofort zu.
 */
html.phone-landscape-lock .phone-landscape-gate {
  display: flex;
}
html.phone-landscape-lock,
html.phone-landscape-lock body {
  overflow: hidden !important;
  overscroll-behavior: none;
}
html.phone-landscape-lock #app {
  visibility: hidden;
  pointer-events: none;
}


/* —— Premium —— */
.premium-page { padding: 1rem 1.1rem 2rem; }
.premium-head h2 { margin: 0 0 .4rem; color: var(--ink); }
.premium-status { margin: .35rem 0 .75rem; color: var(--ink); }
.premium-status.ok { color: var(--ok, #1a7f37); font-weight: 600; }
.premium-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .85rem;
  margin: 1rem 0 1.5rem;
}
.premium-card {
  border: 1px solid var(--divider);
  border-radius: 16px;
  padding: 1rem 1.05rem 1.1rem;
  background: color-mix(in srgb, var(--card) 72%, transparent);
}
.premium-card h3 {
  margin: 0 0 .35rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.premium-price { margin: .25rem 0 .6rem; color: var(--ink); }
.premium-benefits { margin: 0 0 .85rem; padding-left: 1.1rem; font-size: .92rem; color: var(--ink); }
.premium-benefits li { margin: .2rem 0; }
.premium-cert, .premium-options { margin-top: 1.25rem; }
.premium-cert h3, .premium-options h3 {
  margin: 0 0 .4rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}

/* —— Zertifizierung —— */
.certify-page .certify-head { margin-bottom: 0.85rem; }
.certify-hero-badge {
  display: flex;
  align-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 0 0.55rem;
}
.certify-hero-badge svg { width: 100%; height: 100%; display: block; }
.certify-list {
  margin: 0;
  padding-left: 1.15rem;
  font-size: .93rem;
  line-height: 1.45;
  color: var(--ink);
}
.certify-list li { margin: .28rem 0; }
.certify-list strong { color: var(--ink); }
.certify-action .btn-row { margin-top: .65rem; gap: .5rem; flex-wrap: wrap; }