/* ============================================================
   style.css - Wirio Design System 💜
   Farbpalette: beruhigend, modern, augenfreundlich (Lavender).
   Helles Theme als Standard; Dark Mode automatisch, wenn das
   Betriebssystem des Nutzers dunkel eingestellt ist.
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ---------- Helles Theme (Standard) ---------- */
:root {
  --bg:            #F8F9FC;  /* Soft Gray: App-Hintergrund */
  --bg-chat:       #F4F1FF;  /* Lavender Mist: Chat-Hintergrund */
  --panel:         #FFFFFF;  /* Pure White: Karten, Sidebar */
  --hover:         #F4F1FF;  /* Hover-Flächen */
  --selected:      #CFC3F4;  /* Lavender Light: ausgewählte Chats */
  --border:        #E6E4F2;
  --text:          #2D3142;  /* Text Dark */
  --text-dim:      #6B7280;  /* Text Secondary */
  --accent:        #7E78B8;  /* Wirio Lavender */
  --accent-hover:  #9188D8;  /* Hover: heller (lt. Design-System) */
  --accent-press:  #6A64A8;  /* Gedrückt: dunkler */
  --on-accent:     #FFFFFF;
  --input-border:  #E5E7EB;
  --card:          #FFFFFF;  /* Chatkarten (lt. Design-System: weiß) */
  --list-bg:       #F8F9FC;  /* Hintergrund der Chatliste: Soft Gray */
  --bubble-mine:       #E9E2FF;  /* eigene Nachrichten */
  --bubble-mine-text:  #2D3142;
  --bubble-theirs:     #FFFFFF;  /* empfangene Nachrichten */
  --bubble-theirs-text:#2D3142;
  --online:        #7BC67B;  /* sanftes Grün */
  --offline:       #C9CCD8;
  --read:          #7DA7D9;  /* Pastellblau: gelesen */
  --danger:        #D97878;  /* sanftes Rot */
  --chat-pattern:  url('/chat-pattern-light.svg');  /* Doodle-Hintergrund */
}

/* ---------- Dark Mode ----------
   Gilt in zwei Fällen:
   1. Nutzer hat "Dunkel" gewählt  -> :root[data-theme="dark"]
   2. Nutzer hat "Automatisch" (oder nichts) gewählt UND das System
      steht auf dunkel -> @media, aber NICHT wenn "Hell" erzwungen ist
   Die Farbwerte stehen einmal in einer wiederverwendeten Regel. */
:root[data-theme="dark"],
:root[data-theme="auto"].sys-dark,
:root:not([data-theme]).sys-dark {
  --bg:            #161924;  /* App-Hintergrund (Blau-Schwarz) */
  --bg-chat:       #1B1E2D;  /* Chat-Hintergrund, minimal heller */
  --panel:         #25273A;  /* Karten/Menüs/Popups/Eingabefeld */
  --hover:         #2F3450;  /* Hover-Flächen, Reaktionen */
  --selected:      #3A3560;  /* ausgewählt / eigene Reaktion */
  --border:        #2E3248;  /* Trennflächen, sehr dezent */
  --text:          #F5F5F7;  /* Haupttext, fast weiß */
  --text-dim:      #C7CBD6;  /* Sekundärtext (Zeitstempel/Status) */
  --accent:        #9188D8;  /* Wirio Lavender Dark */
  --accent-hover:  #A79AF2;  /* Lavender Accent (Hover/aktive Icons) */
  --accent-press:  #7E78B8;  /* gedrückt */
  --on-accent:     #FFFFFF;
  --input-border:  #32364E;  /* Rand Eingabefeld */
  --card:          #25273A;  /* Chatkarten */
  --list-bg:       #1C2030;  /* Seitenleiste */
  --bubble-mine:       #3A3560;  /* eigene Nachrichten (dunkles Lavendel) */
  --bubble-mine-text:  #F5F5F7;
  --bubble-theirs:     #25273A;  /* empfangene Nachrichten */
  --bubble-theirs-text:#F5F5F7;
  --online:        #6FCF97;  /* Online (Dark-Variante) */
  --offline:       #555B6E;
  --chat-pattern:  url('/chat-pattern-dark.svg');  /* Doodle-Hintergrund (dunkel) */
}

/* Dark-Mode-Feinheiten aus der Design-Vorgabe:
   ausgewählter Chat mit Glow, eigene Reaktion, Profilbild-Ring */
:root[data-theme="dark"] #contact-list li.active,
:root[data-theme="dark"] #group-list li.active,
:root[data-theme="auto"].sys-dark #contact-list li.active,
:root[data-theme="auto"].sys-dark #group-list li.active,
:root:not([data-theme]).sys-dark #contact-list li.active,
:root:not([data-theme]).sys-dark #group-list li.active {
  background: #312D4D;
  box-shadow: 0 0 0 1px rgba(145, 136, 216, 0.35), 0 6px 20px rgba(0, 0, 0, 0.28);
}
:root[data-theme="dark"] .reaction-chip.mine,
:root[data-theme="auto"].sys-dark .reaction-chip.mine,
:root:not([data-theme]).sys-dark .reaction-chip.mine {
  background: #4D4585;
}
:root[data-theme="dark"] #my-avatar .avatar,
:root[data-theme="dark"] #profile-avatar .avatar,
:root[data-theme="auto"].sys-dark #my-avatar .avatar,
:root[data-theme="auto"].sys-dark #profile-avatar .avatar,
:root:not([data-theme]).sys-dark #my-avatar .avatar,
:root:not([data-theme]).sys-dark #profile-avatar .avatar {
  box-shadow: 0 0 0 2px var(--accent);
}

body {
  /* Schrift lt. Design-System: Inter / SF Pro, nüchtern statt verspielt.
     (Nutzt die Systemschrift des Geräts - Apple-Geräte bekommen SF Pro,
      der Rest Inter/Segoe, ohne dass wir Schriften nachladen müssen.) */
  /* 'Noto Color Emoji' am Ende: Text nutzt Inter/SF Pro, aber alle
     Emojis werden einheitlich aus unserer mitgelieferten Font
     gezeichnet - so sehen sie auf PC und Handy gleich aus. */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text',
               'Manrope', 'Segoe UI', 'Noto Color Emoji', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  height: 100dvh;   /* dvh = echte sichtbare Höhe am Handy (Adressleiste!) */
  overflow: hidden;
}

.view { height: 100vh; height: 100dvh; }
.hidden { display: none !important; }

/* Zurück-Knopf: nur am Handy sichtbar (siehe Media Query unten) */
#btn-back { display: none; }

/* ---------- Login-Ansicht ---------- */
#auth-view { display: flex; flex-direction: column; align-items: center; justify-content: center; }

.auth-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px;
  width: 340px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 6px 24px rgba(126, 120, 184, 0.10);
}
.auth-box h1 {
  text-align: center;
  margin-bottom: 8px;
  font-size: 26px;
  font-weight: 600;          /* Semibold lt. Design-System */
  color: var(--accent);
}

/* Das Wirio-Logo über dem Login */
.auth-box .logo {
  width: 84px;
  height: 84px;
  border-radius: 20px;
  align-self: center;
  box-shadow: 0 4px 14px rgba(126, 120, 184, 0.25);
}

/* Maskottchen (freigestellt): weicher Schatten folgt der Figur */
.auth-mascot, #empty-state .mascot {
  filter: drop-shadow(0 8px 14px rgba(126, 120, 184, 0.30));
}

/* Maskottchen auf der Login-Seite */
.auth-mascot {
  width: 128px;
  height: auto;
  align-self: center;
  margin-bottom: -4px;
}

input {
  background: var(--panel);
  border: 1px solid var(--input-border);
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 15px;
  outline: none;
  transition: border-color 200ms ease;
}
input:focus { border-color: var(--accent); }
input::placeholder { color: var(--text-dim); }

button {
  background: var(--accent);
  border: none;
  border-radius: 12px;
  padding: 10px 16px;
  color: var(--on-accent);
  font-size: 15px;
  cursor: pointer;
  transition: background 200ms ease;   /* weiche Übergänge (180-250ms) */
}
button:hover { background: var(--accent-hover); }
button:active { background: var(--accent-press); transform: scale(0.97); }  /* leichtes Eindrücken */
button.secondary {
  background: var(--hover);
  border: 1px solid var(--border);
  color: var(--text);
}
button.secondary:hover { background: var(--selected); }
button.small {
  padding: 4px 10px;
  font-size: 13px;
  background: var(--hover);
  color: var(--text);
  border: 1px solid var(--border);
}
button.small:hover { background: var(--selected); }

/* ---------- Icons (SVG, nehmen die Textfarbe an) ---------- */
.icon { display: block; }
button .icon { pointer-events: none; }

/* Buttons, die nur ein Icon enthalten, mittig ausrichten */
#send-btn, #btn-emoji, #btn-attach, #btn-mic, #btn-cancel-rec,
#btn-call, #btn-video, #btn-add-member, #btn-back, #btn-add, #btn-new-group,
#btn-story-photo, #btn-story-cancel, #btn-story-publish,
#btn-viewer-close, .call-buttons button, #btn-reply-cancel, #btn-edit-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Chat-Header-Buttons: runde, dezente Icon-Knöpfe in Lavender
   (wie im Design: Line-Icon in Markenfarbe) */
#chat-header .small, #sidebar header .small, .section-title .small, #btn-add {
  background: transparent;
  border: none;
  color: var(--accent);
  padding: 7px;
  border-radius: 50%;
}
#chat-header .small:hover, #sidebar header .small:hover,
.section-title .small:hover, #btn-add:hover {
  background: var(--hover);
}

/* Profil-Buttons mit Icon + Text: Icon links */
#profile-logout, #profile-push { display: inline-flex; align-items: center; gap: 8px; }
#profile-logout .icon, #profile-push .icon { flex-shrink: 0; }

.auth-buttons { display: flex; gap: 8px; }
.auth-buttons button { flex: 1; }
.error { color: var(--danger); font-size: 14px; text-align: center; min-height: 18px; }

/* Impressum/Datenschutz-Links unter dem Login */
.legal-links { text-align: center; font-size: 13px; }
.legal-links a { color: var(--text-dim); text-decoration: none; }
.legal-links a:hover { color: var(--accent); text-decoration: underline; }

/* ---------- Messenger-Ansicht ---------- */
#chat-view { display: flex; }

#sidebar {
  width: 280px;
  background: var(--list-bg);   /* Soft Gray - die Karten heben sich ab */
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

/* Chat-Suche */
.search-box { padding: 10px 12px 0; }
.search-box input { width: 100%; }
#sidebar header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: var(--accent);
}

.add-contact { display: flex; gap: 6px; padding: 10px; position: relative; }
.add-contact input { flex: 1; min-width: 0; }
.add-contact button { padding: 8px 14px; }

/* Vorschlagsliste unter dem Hinzufügen-Feld */
#user-suggest {
  position: absolute;
  top: calc(100% - 2px);
  left: 10px; right: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(45, 49, 66, 0.16);
  z-index: 20;
  max-height: 280px;
  overflow-y: auto;
}
#user-suggest.hidden { display: none; }
.suggest-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 14px;
  text-align: left;
}
.suggest-row:hover { background: var(--hover); }
.suggest-row .avatar {
  width: 30px; height: 30px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
.suggest-row .avatar.fallback {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 13px;
}

/* Scrollbarer Bereich mit beiden Listen (Gruppen + Kontakte) */
.lists { overflow-y: auto; flex: 1; }

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px 4px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

/* Chatkarten (lt. Design-System): weiße Karten mit weichem Schatten
   und 14px-Radius auf Soft Gray statt Zeilen mit Trennlinien */
#contact-list, #group-list { list-style: none; padding: 8px 12px 0; }
#contact-list li, #group-list li {
  padding: 12px 14px;
  padding-right: 52px;      /* Platz für das Ungelesen-Badge rechts */
  cursor: pointer;
  background: var(--card);
  border-radius: 14px;
  margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(45, 49, 66, 0.06);
  position: relative;
}

/* ---------- Profilbilder (Avatare) ---------- */
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;         /* Foto füllt den Kreis, ohne zu verzerren */
  flex-shrink: 0;
}
.avatar.fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 17px;
}

/* Listeneintrag mit Avatar: Bild links, Text rechts daneben */
li.with-avatar {
  display: flex;
  align-items: center;
  gap: 11px;
}
.li-text { min-width: 0; flex: 1; }

/* Eigenes Profil oben: Avatar (klein) + Name, klickbar */
#me-box {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  min-width: 0;
}
#me-box .avatar { width: 32px; height: 32px; font-size: 14px; }
#me-box:hover #my-name { text-decoration: underline; }
#my-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ungelesen-Badge: lila Zahl, vertikal mittig am rechten Rand */
.badge {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  min-width: 24px;
  text-align: center;
}
#contact-list li, #group-list li { transition: background 200ms ease; }
#contact-list li:hover, #group-list li:hover { background: var(--hover); }
/* Ausgewählter Chat: dünner Lavender-Streifen + nur LEICHTE Tönung,
   nicht voll einfärben (lt. Design-System) */
#contact-list li.active, #group-list li.active {
  background: rgba(207, 195, 244, 0.18);   /* Hauch von Lavender Light */
  border-left: 3px solid var(--accent);
}
.contact-name { font-weight: 600; display: flex; align-items: center; gap: 7px; }
.contact-last {
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

/* Online-Status-Punkt */
.dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dot.online  { background: var(--online); }
.dot.offline { background: var(--offline); }

#chat-area {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  /* Dezentes Doodle-Muster hinter den Nachrichten (Wirio-Stil).
     Liegt auf dem Chat-Bereich fest, die Nachrichten scrollen darüber. */
  background-color: var(--bg-chat);
  background-image: var(--chat-pattern);
  background-repeat: repeat;
  background-size: 300px 300px;
}
#chat-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
#chat-title {
  flex: 1;                 /* füllt die Mitte -> steht links neben ← */
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Leerer Zustand: freundliches Maskottchen, wenn kein Chat offen ist */
#empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
}
#empty-state.hidden { display: none; }
#empty-state .mascot { width: 190px; height: auto; }
#empty-text { color: var(--text-dim); font-size: 16px; max-width: 320px; }

/* Nachrichtenblasen: 18px-Radius, sehr dezenter Schatten,
   weiches Einblenden statt Springen (lt. Design-System) */
.msg {
  max-width: 65%;
  padding: 9px 14px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.4;
  word-wrap: break-word;
  box-shadow: 0 1px 3px rgba(45, 49, 66, 0.07);
  animation: msg-in 220ms ease both;
}
@keyframes msg-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes chat-in {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}
.msg.mine {
  align-self: flex-end;
  background: var(--bubble-mine);
  color: var(--bubble-mine-text);
  border-bottom-right-radius: 5px;
}
.msg.theirs {
  align-self: flex-start;
  background: var(--bubble-theirs);
  color: var(--bubble-theirs-text);
  border-bottom-left-radius: 5px;
}
.msg .time { display: block; font-size: 11px; opacity: 0.6; margin-top: 3px; text-align: right; }

/* ---------- Sprachnachricht (nach Fabians Design) ----------
   [Avatar] [Play] [Wellenform / Zeit+Regler+Dauer] [1.0x / ⬇] */
.voice-msg {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 260px;
  padding: 4px 2px;
}
.voice-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}
.voice-msg .avatar.fallback.voice-avatar {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 17px;
}
.voice-play {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(126, 120, 184, 0.35);
}
/* In der eigenen (Lavender-)Blase: weißer Knopf mit Lavender-Icon */
.msg.mine .voice-play { background: rgba(255, 255, 255, 0.92); color: var(--accent); }

/* Mittelteil: Wellenform oben, Zeitleiste darunter */
.voice-mid {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Wellenform: Säulen in der Textfarbe der Blase - blass für
   Ungespieltes, kräftig für den bereits gehörten Teil */
.voice-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 26px;
  cursor: pointer;
}
.voice-wave span {
  flex: 1;
  min-width: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.32;
  transition: opacity 120ms;
}
.voice-wave span.on { opacity: 1; }

/* Zeit links, Schieberegler mittig, Dauer rechts */
.voice-slider {
  display: flex;
  align-items: center;
  gap: 6px;
}
.voice-range {
  flex: 1;
  min-width: 0;
  height: 4px;
  accent-color: var(--accent);
  cursor: pointer;
  margin: 0;
}
.msg.mine .voice-range { accent-color: #fff; }

.voice-time {
  font-size: 11px;
  opacity: 0.75;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;   /* Zeit "zappelt" nicht */
}

/* Rechte Spalte: Tempo-Pille + Herunterladen */
.voice-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.voice-speed {
  border: none;
  border-radius: 12px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 700;
  background: var(--accent);
  color: #fff;
  min-width: 44px;
}
.msg.mine .voice-speed { background: rgba(255, 255, 255, 0.92); color: var(--accent); }

/* Absendername über fremden Nachrichten in Gruppen */
.msg .sender {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 2px;
}

/* Haken: ✓ = gesendet, ✓✓ = gelesen */
.checks { margin-left: 5px; }
.checks.read { color: var(--read); opacity: 1; }

/* Platzhalter, während verschlüsselte Medien geladen werden */
.media-loading { font-size: 13px; opacity: 0.7; padding: 6px 0; }

/* Nachrichten sind antippbar (öffnet das Aktions-Menü) */
.msg { cursor: pointer; }

/* Zitat-Block in der Blase (worauf geantwortet wurde) */
.reply-quote {
  border-left: 3px solid var(--accent);
  background: rgba(126, 120, 184, 0.10);
  border-radius: 8px;
  padding: 5px 9px;
  margin-bottom: 5px;
  font-size: 13px;
}
.reply-quote-name { font-weight: 700; color: var(--accent); font-size: 12px; }
.reply-quote-text {
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

/* Aktions-Menü an einer angetippten Nachricht */
.msg-actions {
  display: flex;
  gap: 2px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 6px;
  margin-top: 6px;
  box-shadow: 0 4px 14px rgba(22, 25, 36, 0.18);
  width: max-content;
  animation: msg-in 180ms ease;
}
.msg-actions button {
  background: transparent;
  border: none;
  font-size: 17px;
  padding: 3px 5px;
  border-radius: 50%;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.msg-actions button:hover { background: var(--hover); }
.msg-actions button:active { background: var(--selected); }
.msg-actions .act-icon { color: var(--accent); }        /* Antworten/Bearbeiten in Lavender */
.msg-actions .act-danger { color: var(--danger); }       /* Löschen in Rot */
/* schmaler Trenner zwischen Emoji-Reaktionen und Aktions-Icons */
.msg-actions-sep {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  margin: 4px 3px;
}

/* Reaktions-Chips unter der Nachricht */
.reactions { display: flex; gap: 4px; margin-top: 5px; flex-wrap: wrap; }
.reactions.hidden { display: none; }
.reaction-chip {
  background: var(--hover);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 13px;
}
.reaction-chip.mine { background: var(--selected); border-color: var(--accent); }
.reaction-chip:hover { background: var(--selected); }

/* Emoji-Auswahl über dem Eingabefeld (mit Suche + Kategorien) */
#emoji-panel {
  display: flex;
  flex-direction: column;
  padding: 8px 10px;
  background: var(--panel);
  border-top: 1px solid var(--border);
}
#emoji-panel.hidden { display: none; }

#emoji-search {
  width: 100%;
  margin-bottom: 8px;
  background: var(--bg);
  border: 1px solid var(--input-border);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--text);
  outline: none;
}
#emoji-search:focus { border-color: var(--accent); }

/* Reiter-Leiste (Kategorien) */
#emoji-tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.emoji-tab {
  background: transparent;
  border: none;
  font-size: 20px;
  padding: 5px 7px;
  border-radius: 8px;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.7;
}
.emoji-tab:hover { background: var(--hover); opacity: 1; }
.emoji-tab.active { background: var(--selected); opacity: 1; }

#emoji-cat-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  padding: 8px 2px 4px;
}

#emoji-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  max-height: 180px;
  overflow-y: auto;
}
.emoji-btn {
  background: transparent;
  border: none;
  font-size: 22px;
  padding: 4px;
  border-radius: 8px;
  line-height: 1;
}
.emoji-btn:hover { background: var(--hover); }
.emoji-empty {
  color: var(--text-dim);
  font-size: 14px;
  padding: 16px;
  width: 100%;
  text-align: center;
}

/* Standort-Link in einer Nachricht */
.location-link {
  display: inline-block;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  padding: 4px 0;
}
.location-link:hover { text-decoration: underline; }

/* Profil-Menü (Dropdown beim Klick aufs Profilbild) */
#profile-menu {
  position: absolute;
  top: 54px;
  left: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(45, 49, 66, 0.18);
  padding: 6px;
  z-index: 30;
  min-width: 210px;
}
#profile-menu.hidden { display: none; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 15px;
  text-align: left;
}
.menu-item:hover { background: var(--hover); }
.menu-item .icon { flex-shrink: 0; color: var(--accent); }
.menu-item.danger { color: var(--danger); }
.menu-item.danger .icon { color: var(--danger); }
#sidebar header { position: relative; }   /* Anker für das Menü */

/* "tippt gerade..." über dem Eingabefeld */
#typing-indicator {
  padding: 4px 20px;
  font-size: 13px;
  font-style: italic;
  color: var(--accent);
  animation: msg-in 180ms ease;
}
#typing-indicator.hidden { display: none; }

/* Gelöschte Nachricht: dezenter Platzhalter */
.msg.deleted {
  opacity: 0.7;
  font-style: italic;
  color: var(--text-dim) !important;
  background: var(--hover) !important;
  box-shadow: none;
  cursor: default;
}

/* Antwort-Leiste über dem Eingabefeld */
#reply-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  background: var(--panel);
  border-top: 1px solid var(--border);
}
#reply-bar.hidden { display: none; }
.reply-info {
  flex: 1;
  min-width: 0;
  border-left: 3px solid var(--accent);
  padding-left: 9px;
}
#reply-name { display: block; font-weight: 700; color: var(--accent); font-size: 12px; }
#reply-text {
  display: block;
  color: var(--text-dim);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Datums-Trenner im Chat: kleine Pille in der Mitte ("Heute") */
.date-divider {
  align-self: center;
  background: var(--card);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  margin: 6px 0;
  box-shadow: 0 1px 2px rgba(45, 49, 66, 0.05);
}

/* Punkt im Chat-Header sauber ausrichten */
#chat-title .dot { display: inline-block; margin-right: 3px; }

/* ---------- Profil-Bereich (Tab am Handy) ---------- */
#profile-pane {
  display: none;              /* wird nur im Profil-Tab eingeblendet */
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 36px 22px;
}
#profile-pane .avatar { width: 96px; height: 96px; font-size: 36px; cursor: pointer; }
#profile-name { font-size: 20px; font-weight: 600; }
.profile-btn { width: 100%; max-width: 260px; }
#profile-pane .legal-links { margin-top: 10px; }

/* ---------- Status/Stories ---------- */
#story-strip {
  display: flex;
  gap: 12px;
  padding: 12px 14px 6px;
  overflow-x: auto;
}
#story-strip:empty { display: none; }

.story-item { text-align: center; cursor: pointer; flex-shrink: 0; width: 56px; }
.story-ring {
  position: relative;
  width: 52px; height: 52px;
  border-radius: 50%;
  padding: 3px;
  display: flex; align-items: center; justify-content: center;
}
.story-ring .avatar { width: 44px; height: 44px; font-size: 18px; }
.story-ring.unseen { background: linear-gradient(135deg, var(--accent), #CFC3F4); }
.story-ring.seen   { background: var(--border); }
.story-ring.empty  { background: transparent; border: 2px dashed var(--border); }
.story-plus {
  position: absolute;
  right: -2px; bottom: -2px;
  background: var(--accent);
  color: var(--on-accent);
  width: 20px; height: 20px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 20px;
  border: 2px solid var(--panel);
}
.story-label {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Status erstellen */
#story-composer {
  position: fixed; inset: 0;
  background: rgba(22, 25, 36, 0.65);
  display: flex; align-items: center; justify-content: center;
  z-index: 25;
}
#story-composer.hidden { display: none; }
.story-box {
  background: var(--panel);
  border-radius: 18px;
  padding: 16px;
  width: min(92vw, 380px);
  display: flex; flex-direction: column; gap: 12px;
}
#composer-preview {
  border-radius: 14px;
  min-height: 300px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
#composer-preview img { max-width: 100%; max-height: 55vh; display: block; }
#story-text {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  width: 100%;
  min-height: 120px;
  resize: none;
  padding: 20px;
}
#story-text::placeholder { color: rgba(255, 255, 255, 0.7); }
.story-colors { display: flex; gap: 8px; justify-content: center; }
.color-chip {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border);
  padding: 0;
}
.story-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* Status ansehen (Vollbild) */
#story-viewer {
  position: fixed; inset: 0;
  background: #161924;
  z-index: 26;
  display: flex; flex-direction: column;
}
#story-viewer.hidden { display: none; }
#viewer-top {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  color: #F5F5F7;
}
#viewer-top .avatar { width: 38px; height: 38px; }
#viewer-name { font-weight: 600; }
#viewer-time { font-size: 12px; color: #9CA1B3; }
#viewer-views { margin-left: auto; font-size: 14px; color: #9CA1B3; }
#viewer-top button { flex-shrink: 0; }
#viewer-views { margin-left: auto; }
/* Wenn kein Augen-Zähler da ist, schiebt der Löschen-Knopf nach rechts */
#viewer-views.hidden + #btn-story-delete { margin-left: auto; }
#btn-story-delete {
  background: var(--danger);
  color: #fff;
  border: none;
}
#btn-story-delete:hover { background: #c96a6a; }
#viewer-content {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  overflow: hidden;
  color: #F5F5F7;
}
#viewer-content img { max-width: 100%; max-height: 100%; object-fit: contain; }
.story-text-view {
  font-size: 26px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  padding: 30px;
  max-width: 600px;
  word-wrap: break-word;
}
#viewer-dots {
  display: flex; gap: 5px; justify-content: center;
  padding: 12px;
}
.viewer-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #33364D;
}
.viewer-dot.active { background: var(--accent); }

/* Bearbeiten-Leiste (gleicher Look wie die Antwort-Leiste) */
#edit-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 18px;
  background: var(--panel);
  border-top: 1px solid var(--border);
}
#edit-bar.hidden { display: none; }

/* Popups erscheinen mit Fade + leichtem Zoom (95% -> 100%) */
@keyframes popup-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
.settings-box, .forward-box, .call-box, .story-box, .auth-box {
  animation: popup-in 200ms ease;
}

/* ---------- Einstellungen ---------- */
#settings-modal {
  position: fixed; inset: 0;
  background: rgba(22, 25, 36, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 28;
}
#settings-modal.hidden { display: none; }
.settings-box {
  background: var(--panel);
  border-radius: 16px;
  width: min(92vw, 360px);
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(22, 25, 36, 0.35);
}
.settings-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
.settings-section-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-dim);
  padding: 14px 16px 6px;
}
#theme-options { padding: 4px 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.theme-option {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  background: transparent; border: 1.5px solid transparent;
  padding: 12px 14px;
  border-radius: 12px;
  color: var(--text);
  font-size: 15px;
  text-align: left;
}
.theme-option:hover { background: var(--hover); }
.theme-option .theme-ico { color: var(--accent); display: flex; }
.theme-option.active {
  background: rgba(126, 120, 184, 0.10);
  border-color: var(--accent);
}
.theme-option.active::after {
  content: '✓'; margin-left: auto; color: var(--accent); font-weight: 700;
}

/* iPhone-Installations-Hinweis (nur Safari-Tab, nicht standalone) */
#ios-install-hint {
  display: flex; align-items: center; gap: 10px;
  max-width: 340px;
  margin: 14px auto 0;
  background: rgba(126, 120, 184, 0.10);
  border: 1px solid var(--accent);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.45;
}
#ios-install-hint.hidden { display: none; }
#ios-hint-close {
  background: transparent; border: none;
  color: var(--text-dim); font-size: 14px;
  flex-shrink: 0; padding: 4px;
}

/* Schlüssel-Sicherung */
#key-card { padding: 4px 16px 14px; }
#key-info { font-size: 14px; color: var(--text-dim); line-height: 1.5; margin-bottom: 12px; }
#key-actions { display: flex; gap: 8px; }
.key-btn {
  flex: 1;
  background: rgba(126, 120, 184, 0.10);
  color: var(--accent);
  border: 1.5px solid var(--accent);
  padding: 11px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
}
.key-btn:hover { background: rgba(126, 120, 184, 0.18); }

/* Konto löschen */
#delete-account-card { padding: 4px 16px 18px; }
.da-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
#da-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--hover); color: var(--accent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
#da-title { font-size: 18px; font-weight: 600; }
#da-info { font-size: 14px; color: var(--text-dim); line-height: 1.5; margin-bottom: 12px; }
#da-warn {
  background: rgba(217, 120, 120, 0.10);
  border: 1px solid rgba(217, 120, 120, 0.30);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.da-warn-title {
  display: flex; align-items: center; gap: 8px;
  color: var(--danger); font-weight: 700; font-size: 14px; margin-bottom: 2px;
}
#da-warn-text { font-size: 13px; color: var(--text-dim); }
#btn-delete-account {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--danger);
  color: #fff;
  border: none;
  padding: 13px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
}
#btn-delete-account:hover { background: #c96a6a; }
#btn-delete-account .icon { color: #fff; }

/* ---------- Weiterleiten-Auswahl ---------- */
#forward-modal {
  position: fixed; inset: 0;
  background: rgba(22, 25, 36, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 28;
}
#forward-modal.hidden { display: none; }
.forward-box {
  background: var(--panel);
  border-radius: 16px;
  width: min(92vw, 360px);
  max-height: 70vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(22, 25, 36, 0.35);
}
.forward-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
#forward-list { overflow-y: auto; padding: 6px; }
.forward-row {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  background: transparent; border: none;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text);
  font-size: 15px;
  text-align: left;
}
.forward-row:hover { background: var(--hover); }
.forward-row .avatar { width: 38px; height: 38px; font-size: 15px; }

/* Kurze Bestätigungs-Einblendung (Toast) */
#toast {
  position: fixed;
  left: 50%; bottom: 90px;
  transform: translateX(-50%) translateY(10px);
  background: var(--text);
  color: var(--panel);
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 40;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Anruf-Ansicht ---------- */
#call-overlay {
  position: fixed;
  inset: 0;
  background: rgba(22, 25, 36, 0.55);   /* Rest der App abdunkeln */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  animation: msg-in 220ms ease;
}
#call-overlay.hidden { display: none; }

.call-box {
  background: var(--panel);
  border-radius: 20px;
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: 0 12px 40px rgba(22, 25, 36, 0.35);
  min-width: 260px;
}
.call-box .avatar { width: 96px; height: 96px; font-size: 36px; }

/* ---- Videoanruf-Layout ---- */
#call-videos {
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}
#call-videos.hidden { display: none; }
#remote-video {
  display: block;
  width: 100%;
  max-height: 60vh;
  min-height: 220px;
  object-fit: cover;
  background: #000;
}
#local-video {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 96px;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
/* Im Video-Modus: Box breiter, Avatar weg, Name/Status kompakt */
#call-overlay.video .call-box { width: min(92vw, 480px); padding: 16px; }
#call-overlay.video .call-box .avatar { display: none; }
#call-overlay.video #call-name { font-size: 16px; }
#call-name { font-size: 21px; font-weight: 600; }
#call-status { color: var(--text-dim); min-height: 20px; }

.call-buttons { display: flex; gap: 10px; margin-top: 10px; }
.speaker-on { background: var(--accent) !important; color: var(--on-accent) !important; }
/* Anruf-Knopf im "aus"-Zustand (stumm / Kamera aus): rot getönt */
.call-buttons .active-off { background: var(--danger) !important; color: #fff !important; }
.call-accept  { background: var(--online); }     /* sanftes Grün */
.call-accept:hover { background: #6cb56c; }
.call-hangup  { background: var(--danger); }     /* sanftes Rot */
.call-hangup:hover { background: #c96a6a; }

/* ---------- Bottom-Navigation (nur Handy, siehe Media Query) ---------- */
#bottom-nav { display: none; }
.nav-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  font-size: 21px;
  padding: 4px 0 2px;
  border-radius: 0;
  transition: color 200ms ease;
}
.nav-btn:hover, .nav-btn:active { background: transparent; }
.nav-btn span { font-size: 11px; font-weight: 600; }
.nav-btn.active { color: var(--accent); }   /* aktiver Tab: Lavender */

/* Bilder und Videos in Nachrichten */
.msg img, .msg video {
  display: block;
  max-width: 100%;
  max-height: 320px;
  border-radius: 10px;
  margin-bottom: 4px;
}
.msg img { cursor: pointer; }   /* Klick = in voller Größe öffnen */
.msg video { min-width: 220px; }

/* Sprachnachrichten: kompakter Audio-Player */
.msg audio { display: block; width: 250px; max-width: 100%; margin-bottom: 4px; }

/* Mikro: Halten-Geste - der Browser darf daraus kein Scrollen
   oder Textmarkieren machen. transform lässt das Mikro dem
   Finger nach oben folgen. */
#btn-mic {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: transform 60ms linear;
}

/* Einrast-Anzeige: Pfeil + Schloss über dem Mikro */
#rec-lock {
  position: absolute;
  right: 16px;
  bottom: 76px;
  z-index: 14;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 7px;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(45, 49, 66, 0.16);
  color: var(--accent);
  animation: lock-in 180ms ease;
}
#rec-lock.hidden { display: none; }
#rec-lock .rl-chev { display: flex; animation: chev-bounce 1s infinite; }
#rec-lock .rl-lock { display: flex; }

/* Eingerastet: Schloss wird kräftig lavender und hüpft kurz */
#rec-lock.locked {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  animation: lock-pop 220ms ease;
}
#rec-lock.locked .rl-chev { display: none; animation: none; }

@keyframes lock-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes chev-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes lock-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* Mikrofon-Button während der Aufnahme: sanftes Rot, pulsierend */
#btn-mic.recording {
  background: var(--danger);
  color: #fff;
  animation: pulse 1.2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}
#send-form {
  display: flex;
  padding: 12px;
  border-top: 1px solid var(--border);
  background: var(--panel);
}

/* Die Composer-Leiste im WhatsApp-Stil: EINE runde Pille,
   in der die Icons und das Textfeld zusammen sitzen. */
#composer-pill {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--hover);
  border-radius: 24px;
  padding: 4px 6px;
  min-width: 0;
}
/* min-width: 0 ist entscheidend: ohne das hat ein Textfeld eine
   eingebaute Mindestbreite (~200px) und sprengt am Handy die Zeile -
   die ganze Seite wird dann breiter als der Bildschirm! */
#composer-pill input {
  flex: 1; min-width: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 10px 6px;
}
#composer-pill input:focus { outline: none; border: none; box-shadow: none; }
#composer-pill button { flex-shrink: 0; }

/* Senden: runder Lavender-Kreis mit weißem Icon (nur sichtbar bei Text) */
#send-btn {
  width: 40px; height: 40px;
  padding: 0;
  border-radius: 50%;
  color: #fff;
}
/* Plus, Emoji & Mikrofon: nackte Icons in der Leiste (wie WhatsApp) */
#btn-emoji, #btn-attach, #btn-mic, #btn-cancel-rec {
  width: 40px; height: 40px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  border: none;
}
#btn-emoji:hover, #btn-attach:hover, #btn-mic:hover, #btn-cancel-rec:hover {
  background: var(--selected);
  color: var(--accent);
}

/* Anhang-Menü (Foto/Video, Standort) über dem 📎-Button */
#attach-menu {
  position: absolute;
  bottom: 66px;
  left: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(45, 49, 66, 0.18);
  padding: 6px;
  z-index: 15;
  min-width: 190px;
}
#attach-menu.hidden { display: none; }
#chat-area { position: relative; }   /* Anker für das Menü */

/* ============================================================
   Responsive Ansichten
   - Desktop  (> 1024px): Sidebar 280px + Chat (Standard oben)
   - Tablet   (701-1024px): schmalere Sidebar + Chat
   - Handy    (<= 700px): ENTWEDER Liste ODER Chat (WhatsApp-Stil),
     Wechsel über die Klasse .chat-open + Zurück-Knopf
   ============================================================ */

/* ---------- Tablet ---------- */
@media (min-width: 701px) and (max-width: 1024px) {
  #sidebar { width: 230px; }
}

/* ---------- Handy ---------- */
@media (max-width: 700px) {
  /* Eine Spalte: Liste füllt den ganzen Bildschirm ... */
  #sidebar { width: 100%; border-right: none; }
  #chat-area { display: none; }

  /* ... bis ein Chat geöffnet wird - dann umgekehrt,
     mit weichem Einblenden (lt. Design-System: 180-250ms, kein Springen) */
  #chat-view.chat-open #sidebar { display: none; }
  #chat-view.chat-open #chat-area {
    display: flex;
    animation: chat-in 220ms ease;
  }

  /* Bottom-Navigation einblenden (im offenen Chat ausgeblendet) */
  #bottom-nav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--panel);
    border-top: 1px solid var(--border);
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
    z-index: 5;
  }
  #chat-view.chat-open #bottom-nav { display: none; }
  .lists, #profile-pane { padding-bottom: 84px; }   /* nichts hinter der Leiste verstecken */

  /* Tab-Ansichten: was die Seitenleiste je Tab zeigt */
  #sidebar.mode-chats .add-contact { display: none; }
  #sidebar.mode-contacts .search-box { display: none; }
  #sidebar.mode-contacts .groups-title { display: none; }
  #sidebar.mode-contacts #group-list { display: none; }
  #sidebar.mode-profile .search-box,
  #sidebar.mode-profile .add-contact,
  #sidebar.mode-profile .lists { display: none; }
  #sidebar.mode-profile #profile-pane { display: flex; }

  /* Zurück-Knopf einblenden */
  #btn-back { display: inline-block; flex-shrink: 0; }

  /* Deutlich einrücken: Nachrichten mit viel Luft zum Rand */
  #messages { padding: 22px 28px; }
  .msg { max-width: 84%; padding: 10px 15px; }
  #chat-header { padding: 14px 22px; }

  /* Eingabezeile: eingerückt, Senden-Pfeil weit weg von der Kante,
     und Platz für den iPhone-Home-Balken (safe-area).
     Kompakte Knöpfe, damit die Zeile sicher in jede Bildschirmbreite passt. */
  #send-form {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }

  /* Sicherheitsnetz: nichts darf die Seite horizontal aufdrücken */
  body { overflow-x: hidden; }

  /* Listen und Kopfzeile: gleiche Einrückung */
  #sidebar header { padding: 16px 22px; }
  .add-contact { padding: 12px 22px; }
  .section-title { padding: 12px 22px 4px; }
  #contact-list li, #group-list li { padding: 14px 22px; }

  input { font-size: 16px; }   /* verhindert Auto-Zoom beim iPhone */
}