/* ===========================================================================
   EventMesh — Erscheinungsbild
   ===========================================================================

   Vorbild ist WhatsApp Web: zwei Spalten, ruhige Flaechen, alles Gewicht auf
   dem Gespraech. Die Farben sind bewusst anders — dunkles Anthrazit statt
   Gruen, mit Eisblau als einziger Signalfarbe und Navy fuer die eigenen
   Nachrichten. Das gibt Wiedererkennungswert, ohne laut zu sein.

   Diese Datei liegt bewusst ueber chat.css statt darin: chat.css hat 5.500
   Zeilen gewachsene Regeln, und ein Umbau darin waere weder pruefbar noch
   umkehrbar. Hier wird zuerst die Token-Ebene neu gesetzt — damit aendert sich
   der groesste Teil der Oberflaeche auf einen Schlag — und danach nur das
   nachgezogen, was strukturell anders werden muss.

   Aufbau:
     1. Farben und Masse (Tokens)
     2. Grundflaechen
     3. Kopfzeile und Burger-Menue
     4. Seitenspalte (Chatliste)
     5. Gespraech
     6. Eingabezeile
     7. Knoepfe und Symbole
     8. Dialoge und Ueberlagerungen
     9. Hochformat: Vollbild mit Reiterleiste unten
   =========================================================================== */

/* ---------------------------------------------------------------- 1. Tokens */

:root {
    /* Flaechen — von tief nach erhaben. Kein reines Schwarz: auf OLED wirkt es
       hart, und feine Abstufungen brauchen etwas Luft nach unten. */
    --em-surface-sunken: #070a0e;
    --em-surface-base: #0d1218;
    --em-surface-panel: #141b23;
    --em-surface-raised: #1c252f;
    --em-surface-hover: #222d38;
    --em-surface-active: #29353f;

    /* Linien. Sichtbar genug zum Trennen, leise genug um nicht zu zeichnen. */
    --em-line: #212c37;
    --em-line-strong: #2d3a47;

    /* Schrift */
    --em-fg: #e8eef4;
    --em-fg-muted: #93a1b0;
    --em-fg-faint: #5f6f7e;
    --em-fg-on-accent: #04121d;

    /* Eisblau — die einzige Signalfarbe. Sparsam, sonst verliert sie ihre
       Bedeutung: sie markiert, was gerade zaehlt. */
    --em-accent: #4cc2ff;
    --em-accent-hover: #6fd0ff;
    --em-accent-dim: #2a8dc4;
    --em-accent-wash: rgba(76, 194, 255, 0.12);

    /* Navy — Flaechenfarbe fuer eigene Nachrichten und aktive Zeilen. Traegt
       ohne zu leuchten. */
    --em-navy: #16324f;
    --em-navy-raised: #1b3d61;
    --em-navy-line: #24507d;

    /* Zustaende */
    --em-ok: #3fb950;
    --em-warn: #d29922;
    --em-danger: #f85149;
    --em-danger-wash: rgba(248, 81, 73, 0.14);

    /* Masse. Eine Skala, damit Abstaende nicht geraten werden. */
    --em-sp-1: 4px;
    --em-sp-2: 8px;
    --em-sp-3: 12px;
    --em-sp-4: 16px;
    --em-sp-5: 24px;
    --em-sp-6: 32px;

    --em-radius-sm: 6px;
    --em-radius: 10px;
    --em-radius-lg: 16px;
    --em-radius-pill: 999px;

    --em-shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --em-shadow-2: 0 4px 16px rgba(0, 0, 0, .45);
    --em-shadow-3: 0 12px 40px rgba(0, 0, 0, .55);

    --em-header-h: 60px;
    --em-bottomnav-h: 58px;
    /* Kachelgroesse im Dateialbum. Die Ansicht setzt sie am Element, wenn am Regler gezogen
       wird; hier steht der Wert, mit dem sie oeffnet. */
    --convfiles-tile: 140px;
    --em-sidebar-w: 30%;
    --em-sidebar-min: 300px;
    --em-sidebar-max: 420px;

    --em-font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

    /* --- Die alten Namen auf die neuen Werte legen. --------------------------
       chat.css benutzt diese Variablen an mehreren hundert Stellen. Sie hier
       umzuhaengen faerbt die gesamte bestehende Oberflaeche um, ohne dass eine
       einzige alte Regel angefasst werden muss. */
    --em-primary: var(--em-accent);
    --em-primary-hover: var(--em-accent-hover);
    --em-primary-light: var(--em-accent-wash);
    --em-secondary: var(--em-fg-muted);
    --em-secondary-light: var(--em-surface-raised);
    --em-success: var(--em-ok);
    --em-success-bg: rgba(63, 185, 80, .14);
    --em-success-text: var(--em-ok);
    /* Kein Selbstbezug: "--em-danger: var(--em-danger)" ist ungueltiges CSS — der Browser
       verwirft die Eigenschaft, und alles was darauf zeigt faellt auf die Erbfarbe zurueck.
       Der Wert steht weiter oben und braucht hier keine Wiederholung. */
    --em-danger-bg: var(--em-danger-wash);
    --em-danger-text: var(--em-danger);
    --em-warning: var(--em-warn);

    --em-bg-primary: var(--em-surface-panel);
    --em-bg-secondary: var(--em-surface-base);
    --em-bg-tertiary: var(--em-surface-raised);

    --em-border: var(--em-line);
    --em-border-light: var(--em-line);

    --em-text-primary: var(--em-fg);
    --em-text-secondary: var(--em-fg-muted);
    --em-text-muted: var(--em-fg-faint);
    --em-text-light: var(--em-fg);

    --em-msg-sent-bg: var(--em-navy);
    --em-msg-sent-text: var(--em-fg);
    --em-msg-received-bg: var(--em-surface-raised);
    --em-msg-received-text: var(--em-fg);
}

/* ------------------------------------------------- 2. Grundflaechen */

html, body {
    background: var(--em-surface-sunken);
    color: var(--em-fg);
    font-family: var(--em-font);
    -webkit-font-smoothing: antialiased;
}

.em-chat-page {
    background: var(--em-surface-sunken);
    color: var(--em-fg);
}

/* Der Rahmen. WhatsApp Web setzt die Anwendung als Flaeche mit Abstand vor den
   Hintergrund, statt sie ins Fenster zu kleben — das ordnet und macht auch auf
   sehr breiten Bildschirmen eine Figur. */
#chat-container {
    background: var(--em-surface-base);
    color: var(--em-fg);
    max-width: 1600px;
    margin: 0 auto;
    height: 100vh;
    height: 100dvh;
    box-shadow: var(--em-shadow-3);
    overflow: hidden;
}

@media (min-width: 1280px) {
    #chat-container {
        height: calc(100vh - 38px);
        height: calc(100dvh - 38px);
        margin: 19px auto;
        border-radius: var(--em-radius);
        border: 1px solid var(--em-line);
    }
}

/* Bildlaufleisten: schmal und unauffaellig, sonst zerschneiden sie die Ruhe. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--em-line-strong) transparent;
}

*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--em-line-strong);
    border-radius: var(--em-radius-pill);
}
*::-webkit-scrollbar-thumb:hover { background: var(--em-fg-faint); }

::selection { background: var(--em-accent-wash); color: var(--em-fg); }

:focus-visible {
    outline: 2px solid var(--em-accent);
    outline-offset: 2px;
    border-radius: var(--em-radius-sm);
}

/* ------------------------------------------------- 3. Kopfzeile */

.chat-header {
    background: var(--em-surface-panel);
    border-bottom: 1px solid var(--em-line);
    height: var(--em-header-h);
    min-height: var(--em-header-h);
    padding: 0 var(--em-sp-4);
    display: flex;
    align-items: center;
    gap: var(--em-sp-3);
    color: var(--em-fg);
}

.chat-header h2,
.chat-header h3,
.chat-header .chat-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .1px;
    margin: 0;
    color: var(--em-fg);
}

.chat-header .chat-subtitle,
.chat-header .member-count,
.chat-header .presence-text {
    font-size: 12.5px;
    color: var(--em-fg-muted);
    font-weight: 400;
}

/* Das Burger-Menue rechts oben — Ablage fuer alles, was nicht ins Gespraech
   gehoert: eigene Dateien, Einstellungen, Profil. */
.em-appbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--em-sp-1);
}

.em-menu {
    position: relative;
}

.em-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 232px;
    background: var(--em-surface-raised);
    border: 1px solid var(--em-line-strong);
    border-radius: var(--em-radius);
    box-shadow: var(--em-shadow-2);
    padding: var(--em-sp-1);
    z-index: 1200;
    animation: em-menu-in .12s ease-out;
}

@keyframes em-menu-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

.em-menu-item {
    display: flex;
    align-items: center;
    gap: var(--em-sp-3);
    width: 100%;
    padding: 10px var(--em-sp-3);
    background: none;
    border: 0;
    border-radius: var(--em-radius-sm);
    color: var(--em-fg);
    font-size: 14px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.em-menu-item:hover { background: var(--em-surface-hover); }
.em-menu-item .em-icon { color: var(--em-fg-muted); flex: none; }
.em-menu-item:hover .em-icon { color: var(--em-accent); }

.em-menu-separator {
    height: 1px;
    background: var(--em-line);
    margin: var(--em-sp-1) var(--em-sp-2);
}

.em-menu-item.is-danger { color: var(--em-danger); }
.em-menu-item.is-danger .em-icon { color: var(--em-danger); }

.em-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1150;
}

/* ------------------------------------------------- 4. Seitenspalte */

.sidebar,
#users-panel {
    background: var(--em-surface-panel);
    border-right: 1px solid var(--em-line);
    color: var(--em-fg);
    width: var(--em-sidebar-w);
    min-width: var(--em-sidebar-min);
    max-width: var(--em-sidebar-max);
}

.sidebar-header,
.sidebar-header-mobile {
    background: var(--em-surface-panel);
    border-bottom: 1px solid var(--em-line);
    height: var(--em-header-h);
    padding: 0 var(--em-sp-4);
    color: var(--em-fg);
}

.sidebar-tabs {
    display: flex;
    background: var(--em-surface-panel);
    border-bottom: 1px solid var(--em-line);
    padding: 0 var(--em-sp-2);
    gap: var(--em-sp-1);
}

.sidebar-tab {
    flex: 1;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: var(--em-sp-3) var(--em-sp-2);
    color: var(--em-fg-muted);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: color .12s, border-color .12s;
}

.sidebar-tab:hover { color: var(--em-fg); background: none; }

.sidebar-tab.active {
    color: var(--em-accent);
    border-bottom-color: var(--em-accent);
    background: none;
}

/* Zeilen der Chat- und Topicliste. Eine Zeile ist eine Flaeche, kein Kaestchen
   — Rahmen um jeden Eintrag machen eine Liste unruhig. */
.user-item,
.topic-item,
.recent-item,
.contact-item {
    display: flex;
    align-items: center;
    gap: var(--em-sp-3);
    padding: var(--em-sp-3) var(--em-sp-4);
    border: 0;
    border-bottom: 1px solid var(--em-line);
    background: none;
    color: var(--em-fg);
    cursor: pointer;
    transition: background .1s;
}

.user-item:hover,
.topic-item:hover,
.recent-item:hover,
.contact-item:hover { background: var(--em-surface-hover); }

.user-item.selected,
.topic-item.selected,
.recent-item.selected {
    background: var(--em-navy);
    border-bottom-color: var(--em-navy-line);
}

.topic-section-label,
.section-header h6,
.list-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--em-fg-faint);
    padding: var(--em-sp-4) var(--em-sp-4) var(--em-sp-2);
    margin: 0;
}

.unread-badge,
.tab-badge {
    background: var(--em-accent);
    color: var(--em-fg-on-accent);
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--em-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tab-badge.live-badge { background: var(--em-danger); color: #fff; }

/* Avatare: ein Kreis mit Anfangsbuchstabe. Farbe aus dem Namen abgeleitet
   waere schoener, kostet aber Logik — hier reicht eine ruhige Flaeche. */
.user-avatar,
.user-avatar-default,
.avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--em-surface-active);
    color: var(--em-fg-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    flex: none;
    overflow: hidden;
}

.online-dot,
.presence-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--em-ok);
    border: 2px solid var(--em-surface-panel);
}

/* ------------------------------------------------- 5. Gespraech */

.messages,
.message-list,
.chat-messages {
    background: var(--em-surface-base);
    padding: var(--em-sp-4) var(--em-sp-5);
}

/* Ein sehr leises Muster im Hintergrund — WhatsApp benutzt eine Tapete, damit
   die Blasen nicht im Nichts schweben. Hier reicht ein Hauch Struktur. */
.messages::before,
.message-list::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .5;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .022) 1px, transparent 0);
    background-size: 22px 22px;
}

.message-bubble {
    background: var(--em-surface-raised);
    color: var(--em-fg);
    border: 0;
    border-radius: var(--em-radius-lg);
    padding: var(--em-sp-2) var(--em-sp-3);
    box-shadow: var(--em-shadow-1);
    max-width: min(68%, 640px);
    position: relative;
}

.message-bubble.sent,
.message-bubble.own,
.message-row.sent .message-bubble {
    background: var(--em-navy);
    color: var(--em-fg);
}

/* Die abgeflachte Ecke zur eigenen Seite hin — das kleine Detail, an dem man
   Sender und Empfaenger ohne Nachdenken auseinanderhaelt. */
.message-bubble.sent,
.message-row.sent .message-bubble { border-bottom-right-radius: var(--em-radius-sm); }
.message-bubble.received,
.message-row.received .message-bubble { border-bottom-left-radius: var(--em-radius-sm); }

.message-sender {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--em-accent);
    margin-bottom: 2px;
}

.message-time,
.message-meta {
    font-size: 11px;
    color: var(--em-fg-faint);
}

.message-bubble.sent .message-time { color: rgba(232, 238, 244, .45); }

.reply-quote {
    border-left: 3px solid var(--em-accent);
    background: rgba(0, 0, 0, .22);
    border-radius: var(--em-radius-sm);
    padding: var(--em-sp-2) var(--em-sp-3);
    margin-bottom: var(--em-sp-2);
}

.reply-quote-sender { color: var(--em-accent); font-size: 12px; font-weight: 600; }

.no-messages,
.empty-hint,
.empty-state {
    color: var(--em-fg-faint);
    text-align: center;
    padding: var(--em-sp-6) var(--em-sp-4);
    font-size: 14px;
}

/* ------------------------------------------------- 6. Eingabezeile */

.input-row,
.message-input-row {
    background: var(--em-surface-panel);
    border-top: 1px solid var(--em-line);
    padding: var(--em-sp-2) var(--em-sp-3);
    display: flex;
    align-items: center;
    gap: var(--em-sp-2);
    min-height: 64px;
}

.input-row input[type="text"],
.message-input-row input[type="text"] {
    flex: 1;
    background: var(--em-surface-raised);
    border: 1px solid transparent;
    border-radius: var(--em-radius-pill);
    padding: 11px var(--em-sp-4);
    color: var(--em-fg);
    font-size: 14.5px;
    font-family: inherit;
    outline: none;
    transition: border-color .12s, background .12s;
}

.input-row input[type="text"]::placeholder { color: var(--em-fg-faint); }

.input-row input[type="text"]:focus {
    background: var(--em-surface-hover);
    border-color: var(--em-accent-dim);
}

/* ------------------------------------------------- 7. Knoepfe und Symbole */

/* Die Grundform trug frueher app.css bei. Beim Aufraeumen dieser Vorlagenreste ist sie
   mitgegangen, und ein blosses .btn fiel damit auf die Browser-Vorgabe zurueck: ein hellgrauer
   Kasten mit dunkler Schrift, der auf der dunklen Flaeche leuchtete. Hier gehoert sie hin. */
.btn,
button.btn {
    font-family: inherit;
    border-radius: var(--em-radius);
    font-size: 14px;
    font-weight: 500;
    padding: 9px var(--em-sp-4);
    background: var(--em-surface-raised);
    border: 1px solid var(--em-line-strong);
    color: var(--em-fg);
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}

.btn:hover:not(:disabled) { background: var(--em-surface-hover); }

.btn-primary {
    background: var(--em-accent);
    border-color: var(--em-accent);
    color: var(--em-fg-on-accent);
    font-weight: 600;
}

.btn-primary:hover:not(:disabled) {
    background: var(--em-accent-hover);
    border-color: var(--em-accent-hover);
}

.btn-secondary,
.btn-sm {
    background: var(--em-surface-raised);
    border-color: var(--em-line-strong);
    color: var(--em-fg);
}

.btn-secondary:hover:not(:disabled),
.btn-sm:hover:not(:disabled) { background: var(--em-surface-hover); }

.btn-danger {
    background: transparent;
    border-color: var(--em-danger);
    color: var(--em-danger);
}

.btn-danger:hover:not(:disabled) { background: var(--em-danger-wash); }

.btn:disabled,
button:disabled { opacity: .45; cursor: not-allowed; }

/* box-sizing, sonst ragt der Knopf um die Polsterung seines Containers hinaus — auf einem
   457-px-Schirm waren das 16 px, die rechts abgeschnitten wurden. */
.btn-block {
    /* Nicht width:100% — das bezieht sich auf den Inhaltsbereich des Containers und ignoriert
       dessen Polsterung, wodurch der Knopf auf einem 457-px-Schirm 16 px rechts hinausragte.
       Ein Block-Element ohne Breitenangabe fuellt genau den verfuegbaren Platz. */
    display: block;
    width: auto;
    box-sizing: border-box;
}

/* Symbolknopf — die Grundform fuer alles in Kopfzeile und Eingabezeile. 40px
   ist gross genug fuer den Finger und klein genug fuer die Leiste. */
.btn-icon,
.file-upload-btn,
.emoji-toggle-btn,
.btn-voice-record,
.btn-video-record {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    border-radius: 50%;
    color: var(--em-fg-muted);
    cursor: pointer;
    padding: 0;
    transition: background .12s, color .12s;
}

.btn-icon:hover,
.file-upload-btn:hover,
.emoji-toggle-btn:hover,
.btn-voice-record:hover,
.btn-video-record:hover {
    background: var(--em-surface-hover);
    color: var(--em-fg);
}

.btn-icon.is-active { color: var(--em-accent); }
.logout-btn:hover { color: var(--em-danger); background: var(--em-danger-wash); }

/* Das Symbol selbst. Alles gezeichnet, nichts geladen: eine Strichzeichnung im
   24er-Raster, die ihre Farbe vom Text erbt. Damit gibt es keine Schriftart,
   kein Paket und keine Lizenz — und die Symbole passen automatisch zu jedem
   Zustand, in dem ihr Knopf gerade ist. */
.em-icon {
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.em-icon-sm { width: 18px; height: 18px; }
.em-icon-lg { width: 28px; height: 28px; }
.em-icon-filled { fill: currentColor; stroke: none; }

/* ------------------------------------------------- 8. Dialoge */

.modal,
.modal-backdrop,
.drive-overlay,
.loading-overlay {
    background: rgba(4, 7, 10, .72);
    backdrop-filter: blur(3px);
}

.modal-content,
.modal-dialog,
.dialog {
    background: var(--em-surface-panel);
    border: 1px solid var(--em-line-strong);
    border-radius: var(--em-radius-lg);
    box-shadow: var(--em-shadow-3);
    color: var(--em-fg);
}

.modal-header,
.modal-footer {
    border-color: var(--em-line);
}

.modal-header h3,
.modal-header h4 { color: var(--em-fg); font-size: 16px; font-weight: 600; }

/* .form-control kommt aus der Projektvorlage und wird quer durch die Anwendung
   verwendet — Nachrichteneingabe, Topic anlegen, Profil. Sie hier ausdruecklich
   mitzunehmen ist wichtiger als es aussieht: vorher definierte app.css sie als
   weisses Feld mit dunkler Schrift und lud zuletzt, womit jedes so ausgezeichnete
   Feld ein heller Kasten auf dunklem Grund war. */
input[type="text"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select,
.form-control {
    background: var(--em-surface-raised);
    border: 1px solid var(--em-line-strong);
    border-radius: var(--em-radius-sm);
    color: var(--em-fg);
    font-family: inherit;
    font-size: 14px;
    padding: 9px var(--em-sp-3);
    outline: none;
}

input:focus, textarea:focus, select:focus, .form-control:focus {
    border-color: var(--em-accent-dim);
    box-shadow: none;
}
input::placeholder, textarea::placeholder, .form-control::placeholder { color: var(--em-fg-faint); }

.toast,
.notification {
    background: var(--em-surface-raised);
    border: 1px solid var(--em-line-strong);
    border-left: 3px solid var(--em-accent);
    border-radius: var(--em-radius);
    color: var(--em-fg);
    box-shadow: var(--em-shadow-2);
}

.toast.toast-error { border-left-color: var(--em-danger); }
.toast.toast-success { border-left-color: var(--em-ok); }
.toast.toast-warning { border-left-color: var(--em-warn); }

/* Ladeanzeige */
.spinner {
    border: 2.5px solid var(--em-line-strong);
    border-top-color: var(--em-accent);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    animation: em-spin .7s linear infinite;
}

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

/* ------------------------------------------------- 9. Hochformat */

/* Unterhalb dieser Breite ist die Anwendung eine App, kein Fenster: eine
   Flaeche fuellt den Schirm, unten stehen die Bereiche als Reiter. Die
   Seitenspalte als Schublade waere hier falsch — auf dem Telefon greift der
   Daumen unten, nicht oben links. */
.em-bottom-nav { display: none; }

@media (max-width: 900px), (orientation: portrait) and (max-width: 1100px) {

    #chat-container {
        max-width: none;
        margin: 0;
        border: 0;
        border-radius: 0;
        height: 100vh;
        height: 100dvh;
    }

    /* Seitenspalte wird zur eigenen Ansicht statt einer Spalte daneben. */
    .sidebar,
    #users-panel {
        position: fixed;
        inset: 0 0 var(--em-bottomnav-h) 0;
        width: 100%;
        max-width: none;
        min-width: 0;
        border-right: 0;
        z-index: 900;
        transform: none;
    }

    /* Die alte Wisch-Schublade und ihr Griff entfallen — die Reiterleiste
       uebernimmt die Navigation. */
    .sidebar-backdrop,
    .sidebar-edge-tab { display: none !important; }

    /* Die Kopfzeile bricht um, wenn sie zu eng wird.

       Name, Zustand, Hoerer, Kamera, Inhalte und das Menue nebeneinander brauchen ihren Platz.
       Reicht er nicht, wurde bisher der Name zusammengedrueckt, bis von "Alexander Meier" ein
       "Al…" uebrigblieb — obwohl darunter eine ganze Zeile frei war.

       Der Umbruch ist nicht an eine Breite gebunden, sondern an den Bedarf: die Angaben haben
       eine Grundbreite, die Knopfreihe ebenso, und passt beides nicht nebeneinander, rutschen
       die Knoepfe von selbst in die zweite Zeile. Damit stimmt es auf jedem Geraet, auch auf
       denen, an die beim Setzen eines festen Umbruchpunkts niemand gedacht hat. */
    .chat-header {
        flex-wrap: wrap;
        row-gap: 6px;

        /* Und mitwachsen. Die feste Hoehe war der Grund, warum vom Umbruch nichts zu sehen war:
           die Knoepfe rutschten in die zweite Zeile, der Kopf blieb bei 60 Pixeln, und die Zeile
           lag darunter im Nichts. Gemessen: Inhalt 94 Pixel hoch, Kopf 61.

           Die Hoehe bleibt als Untergrenze — sonst schrumpft der Kopf im Normalfall, in dem
           alles nebeneinander passt. */
        height: auto;
        min-height: var(--em-header-h);

        /* Kein zusaetzlicher Rand oben und unten: der wuerde immer wirken, auch einzeilig, und
           machte den Kopf im Normalfall 17 Pixel hoeher als noetig. Die Untergrenze haelt die
           gewohnte Hoehe; bricht es um, ergibt sie sich aus dem Inhalt. */
        align-content: center;
    }

    .chat-header-info {
        flex: 1 1 190px;
        min-width: 0;        /* sonst schrumpft der Name nicht und nichts bricht um */
    }

    .chat-header-info strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* In der zweiten Zeile die volle Breite und rechtsbuendig — sonst stehen die Knoepfe
       verloren links unter dem Namen. */
    .chat-header-actions {
        flex: 1 0 auto;
        justify-content: flex-end;
    }

    /* Der Chatbereich legt sich ueber die Spalte, sobald ein Gespraech offen ist.
       Er heisst #chat-panel. Hier stand ".chat-main, .chat-area" — beide Namen gibt es im
       Markup nicht, die Regel griff also nie. Folge: die Spalte blieb bei z-index 900 fixiert
       liegen, der Chat darunter bei position:static. Er war da, vollstaendig aufgebaut, mit
       Kopfzeile und Eingabefeld — nur verdeckt. Ein Tippen auf einen Nutzer sah damit aus, als
       taete es nichts, und war von "reagiert nicht" nicht zu unterscheiden. Genau der Fall, der
       weiter unten fuers Drive schon einmal beschrieben ist.

       Und der Bereich darf sich NUR dann darueberlegen, wenn ein Gespraech offen ist. Ohne die
       Bedingung war es genau andersherum: der leere Chat mit "Select a user or topic" lag ueber
       der Liste, und man sah weder Nutzer noch Topics. Ein Fehler, der sich umdrehen laesst,
       ist noch nicht behoben.

       Die Bedingung ist .in-conversation an der Seite — dieselbe, die auch die Reiterleiste
       ausblendet. Es gab sie schon; eine zweite daneben zu stellen haette bedeutet, dass beide
       kuenftig auseinanderlaufen koennen. */
    .em-chat-page.in-conversation #chat-panel {
        position: fixed;
        inset: 0 0 var(--em-bottomnav-h) 0;
        z-index: 950;
    }

    /* Karte/Kalender fuellen mobil dieselbe Flaeche — die Bottom-Nav bleibt aber sichtbar,
       damit man den Bereich wechseln kann. */
    .em-chat-page.topics-main-open #chat-panel {
        position: fixed;
        inset: 0 0 var(--em-bottomnav-h) 0;
        z-index: 950;
    }

    .messages,
    .message-list { padding: var(--em-sp-3); }

    .message-bubble { max-width: 82%; }

    /* Die Eingabezeile bricht um: Bedienelemente oben, das Textfeld darunter ueber die volle
       Breite.

       Nebeneinander bleiben dem Text auf einem schmalen Schirm keine hundert Pixel — Anhang,
       Emoji, Mikrofon, Video und Qualitaet stehen daneben und nehmen den Platz. Man tippt dann
       durch ein Guckloch. Ueber die ganze Breite ist auch ein laengerer Satz zu ueberblicken. */
    .input-row {
        padding: var(--em-sp-2);
        min-height: 58px;
        flex-wrap: wrap;
        align-items: center;
    }

    .input-row .message-textarea {
        order: 10;          /* hinter alle Bedienelemente, also in die naechste Zeile */
        flex: 1 0 100%;
        margin-top: var(--em-sp-2);
    }

    /* Overlays muessen ueber die Spalte. Die ist hier fixiert und liegt bei z-index 900; das
       Drive kam mit 100 daher und verschwand dahinter — man tippte "My Drive", es oeffnete sich
       tatsaechlich, und zu sehen war weiter die Liste. Von aussen nicht von "reagiert nicht" zu
       unterscheiden. Unterhalb der Reiterleiste bleiben sie, damit man wieder herausfindet. */
    .drive-overlay,
    .modal-backdrop,
    .modal,
    .panel-overlay {
        z-index: 960;
    }

    .drive-overlay {
        inset: 0 0 var(--em-bottomnav-h) 0;
    }

    /* Dialoge fuellen hier den Schirm. Ein zentriertes Kaestchen mit fester Breite ist eine
       Schreibtisch-Form: auf 457 px ragte der Freigabe-Dialog seitlich heraus, und was
       hinausragt, ist nicht erreichbar — die Auswahl stand teils ausserhalb des Bildes. Als
       Vollbild gibt es kein Aussen mehr, und der Inhalt darf scrollen statt zu klemmen. */
    .modal-content,
    .modal-dialog,
    .dialog {
        position: fixed;
        inset: 0;
        width: 100%;
        max-width: none;
        max-height: none;
        height: 100%;
        border-radius: 0;
        border: 0;
        display: flex;
        flex-direction: column;
        z-index: 970;
    }

    .modal-body,
    .em-settings-body {
        flex: 1;
        overflow-y: auto;
        padding: var(--em-sp-4);
    }

    /* Die Fusszeile bleibt stehen, damit "Teilen" nicht weggescrollt werden kann. */
    .modal-footer {
        flex: none;
        display: flex;
        gap: var(--em-sp-2);
        padding: var(--em-sp-3) var(--em-sp-4);
        padding-bottom: calc(var(--em-sp-3) + env(safe-area-inset-bottom));
        border-top: 1px solid var(--em-line);
        background: var(--em-surface-panel);
    }

    .modal-footer .btn { flex: 1; }

    .modal-header {
        flex: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: var(--em-header-h);
        padding: 0 var(--em-sp-4);
        border-bottom: 1px solid var(--em-line);
    }

    /* Reiterleiste unten: Chats, Topics, Anrufe, Finden. */
    .em-bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: var(--em-bottomnav-h);
        background: var(--em-surface-panel);
        border-top: 1px solid var(--em-line);
        z-index: 1000;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .em-bottom-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        background: none;
        border: 0;
        color: var(--em-fg-faint);
        font-family: inherit;
        font-size: 10.5px;
        font-weight: 500;
        cursor: pointer;
        padding: 6px 0 4px;
        position: relative;
        transition: color .12s;
    }

    .em-bottom-nav-item .em-icon { width: 23px; height: 23px; }

    .em-bottom-nav-item.active { color: var(--em-accent); }

    /* Ein kurzer Strich oben statt einer gefuellten Flaeche — markiert den
       Bereich, ohne die Leiste zu zerlegen. */
    .em-bottom-nav-item.active::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 26px;
        height: 2.5px;
        border-radius: 0 0 3px 3px;
        background: var(--em-accent);
    }

    .em-bottom-nav-badge {
        position: absolute;
        top: 4px;
        left: calc(50% + 8px);
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        border-radius: var(--em-radius-pill);
        background: var(--em-accent);
        color: var(--em-fg-on-accent);
        font-size: 10px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Im Gespraech tritt die Reiterleiste zurueck: die Nachricht braucht den
       Platz, und der Zurueck-Pfeil in der Kopfzeile fuehrt heraus. */
    .em-chat-page.in-conversation .em-bottom-nav { display: none; }
    .em-chat-page.in-conversation .chat-main,
    .em-chat-page.in-conversation .chat-area { inset: 0; }
}

/* Sehr schmale Geraete: Beschriftungen der Reiter weglassen, Symbole reichen. */
@media (max-width: 360px) {
    .em-bottom-nav-item { font-size: 0; gap: 0; }
    .em-bottom-nav-item .em-icon { width: 26px; height: 26px; }
}

/* Querformat auf niedrigen Schirmen: die Kopfzeile darf schrumpfen. */
@media (orientation: landscape) and (max-height: 460px) {
    :root { --em-header-h: 48px; --em-bottomnav-h: 48px; }
}

/* Wer Bewegung reduziert haben will, bekommt sie nicht. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ------------------------------------------------- 10. Einstellungen */

.em-settings {
    width: min(520px, calc(100vw - 32px));
    max-height: min(680px, calc(100vh - 64px));
    display: flex;
    flex-direction: column;
}

.em-settings .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--em-sp-4);
    border-bottom: 1px solid var(--em-line);
}

.em-settings-body {
    overflow-y: auto;
    padding: var(--em-sp-2) var(--em-sp-4) var(--em-sp-5);
}

.em-settings-group { padding: var(--em-sp-4) 0; }
.em-settings-group + .em-settings-group { border-top: 1px solid var(--em-line); }

.em-settings-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--em-fg-faint);
    margin: 0 0 var(--em-sp-3);
}

.em-settings-row select { width: 100%; }

/* Schalterzeile: die Beschriftung ist die Klickflaeche, nicht nur das Kaestchen. */
.em-settings-toggle {
    display: flex;
    align-items: flex-start;
    gap: var(--em-sp-3);
    cursor: pointer;
    padding: var(--em-sp-2);
    margin: calc(var(--em-sp-2) * -1);
    border-radius: var(--em-radius);
}

.em-settings-toggle:hover { background: var(--em-surface-hover); }

.em-settings-toggle input {
    margin-top: 2px;
    width: 17px;
    height: 17px;
    accent-color: var(--em-accent);
    flex: none;
}

.em-settings-toggle span { display: flex; flex-direction: column; gap: 2px; }
.em-settings-toggle strong { font-size: 14px; font-weight: 500; color: var(--em-fg); }
.em-settings-toggle small { font-size: 12.5px; color: var(--em-fg-muted); }

.em-settings-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--em-sp-2) 0;
    font-size: 13.5px;
    color: var(--em-fg-muted);
}

.em-settings-meta code {
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: 12.5px;
    color: var(--em-fg);
    background: var(--em-surface-raised);
    border-radius: var(--em-radius-sm);
    padding: 2px 7px;
}

/* ------------------------------------------------- 11. Anrufflaeche */

.call-view,
.group-call-view,
.call-container {
    background: var(--em-surface-sunken);
    color: var(--em-fg);
}

.call-controls,
.call-ctrl-bar {
    background: linear-gradient(to top, rgba(7, 10, 14, .96), rgba(7, 10, 14, 0));
    padding: var(--em-sp-5) var(--em-sp-4) var(--em-sp-4);
    display: flex;
    justify-content: center;
    gap: var(--em-sp-5);
}

.call-ctrl-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.call-ctrl-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid var(--em-line-strong);
    background: var(--em-surface-raised);
    color: var(--em-fg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}

.call-ctrl-btn:hover:not(:disabled) { background: var(--em-surface-hover); }

/* "Aktiv" heisst hier durchweg: etwas ist ausgeschaltet oder laeuft gerade —
   Stummschaltung, Kamera aus, Freigabe laeuft. Deshalb Signalfarbe. */
.call-ctrl-btn.active {
    background: var(--em-accent);
    border-color: var(--em-accent);
    color: var(--em-fg-on-accent);
}

.call-ctrl-btn:disabled { opacity: .35; }

.call-ctrl-btn.hangup,
.btn-hangup {
    background: var(--em-danger);
    border-color: var(--em-danger);
    color: #fff;
}

.call-ctrl-label { font-size: 11px; color: var(--em-fg-muted); }

.participant-tile {
    background: var(--em-surface-panel);
    border: 1px solid var(--em-line);
    border-radius: var(--em-radius);
    overflow: hidden;
}

.participant-tile.speaking { border-color: var(--em-accent); }

/* Eingehender Anruf */
.incoming-call-overlay {
    background: rgba(4, 7, 10, .9);
    backdrop-filter: blur(6px);
}

.incoming-call-card {
    background: var(--em-surface-panel);
    border: 1px solid var(--em-line-strong);
    border-radius: var(--em-radius-lg);
    box-shadow: var(--em-shadow-3);
}

.btn-accept-call {
    background: var(--em-ok);
    border-color: var(--em-ok);
    color: #04150a;
}

.btn-reject-call {
    background: var(--em-danger);
    border-color: var(--em-danger);
    color: #fff;
}

/* Screen-Share-Picker (generisches Call-Overlay). Diese Klassen waren nie definiert — das
   Overlay rutschte ungestylt in den normalen Fluss, sein Start-Button lag unterhalb des
   Viewports und war nicht klickbar ("Freigabe-Klick bewirkt nichts"). Jetzt ein zentriertes
   Modal mit sichtbaren Buttons. */
.call-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--em-sp-4);
    background: rgba(4, 7, 10, .82);
    backdrop-filter: blur(6px);
}

.call-overlay-content {
    background: var(--em-surface-panel);
    border: 1px solid var(--em-line-strong);
    border-radius: var(--em-radius-lg);
    box-shadow: var(--em-shadow-3);
    padding: var(--em-sp-6) var(--em-sp-5);
    max-width: 360px;
    width: 100%;
    text-align: center;
    color: var(--em-fg);
}

.call-overlay-content h3 {
    margin: 0 0 var(--em-sp-2);
    font-size: 18px;
    color: var(--em-fg);
}

.call-overlay-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--em-sp-5);
    margin-top: var(--em-sp-4);
}

.call-overlay .call-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid var(--em-line-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    transition: transform .1s ease, filter .1s ease;
}

.call-overlay .call-btn:hover { filter: brightness(1.1); transform: scale(1.05); }

.call-overlay .call-accept {
    background: var(--em-ok);
    border-color: var(--em-ok);
    color: #04150a;
}

.call-overlay .call-reject {
    background: var(--em-danger);
    border-color: var(--em-danger);
    color: #fff;
}

/* ------------------------------------------------- 12. Drive */

.drive-view {
    background: var(--em-surface-base);
    color: var(--em-fg);
}

.drive-toolbar {
    background: var(--em-surface-panel);
    border-bottom: 1px solid var(--em-line);
    padding: var(--em-sp-3) var(--em-sp-4);
    display: flex;
    align-items: center;
    gap: var(--em-sp-2);
}

.drive-file-item {
    display: flex;
    align-items: center;
    gap: var(--em-sp-3);
    padding: var(--em-sp-3) var(--em-sp-4);
    border-bottom: 1px solid var(--em-line);
    cursor: pointer;
}

.drive-file-item:hover { background: var(--em-surface-hover); }
.drive-file-item.selected { background: var(--em-navy); }

.file-name { color: var(--em-fg); font-size: 14px; }
.file-meta, .file-size, .file-date { color: var(--em-fg-faint); font-size: 12.5px; }

.drive-drop-zone {
    border: 1.5px dashed var(--em-line-strong);
    border-radius: var(--em-radius);
    color: var(--em-fg-faint);
    padding: var(--em-sp-5);
    text-align: center;
}

.drive-drop-zone.dragging {
    border-color: var(--em-accent);
    background: var(--em-accent-wash);
    color: var(--em-accent);
}

/* ------------------------------------------------- 13. Anmeldung */

.em-auth {
    max-width: 400px;
    margin: 8vh auto;
    padding: var(--em-sp-6) var(--em-sp-5);
    background: var(--em-surface-panel);
    border: 1px solid var(--em-line);
    border-radius: var(--em-radius-lg);
    box-shadow: var(--em-shadow-2);
}

.em-auth-brand { text-align: center; margin-bottom: var(--em-sp-5); }
.em-auth-brand h2 { margin: 0 0 var(--em-sp-2); font-size: 24px; font-weight: 600; letter-spacing: -.2px; }
.em-auth-brand p { margin: 0; color: var(--em-fg-muted); font-size: 13.5px; line-height: 1.5; }
.em-auth-universe {
    display: inline-block; margin: 0 0 var(--em-sp-2);
    padding: 2px 10px; border-radius: 999px;
    background: rgba(37,99,235,.12);
    color: #2563eb; font-size: 11.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .4px;
}
.em-company-logo {
    display: block; max-height: 72px; max-width: 220px;
    margin: 0 0 12px; border-radius: 8px; object-fit: contain;
}
.em-company-desc {
    color: var(--em-text-secondary); font-size: 13.5px;
    margin: 0 0 16px; white-space: pre-wrap;
}
.em-auth-h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.em-auth-link {
    display: block; margin: 10px auto 0; background: none; border: none;
    color: #2563eb; font-size: 13px; cursor: pointer; text-decoration: underline;
}

/* Zwei Reiter statt zweier Seiten: Anmelden und Registrieren unterscheiden sich um ein Feld,
   und ein Seitenwechsel dafuer verliert nur das, was schon getippt wurde. */
.em-auth-switch {
    display: flex;
    background: var(--em-surface-base);
    border-radius: var(--em-radius);
    padding: 3px;
    margin-bottom: var(--em-sp-5);
}

.em-auth-tab {
    flex: 1;
    padding: 9px;
    border: 0;
    border-radius: var(--em-radius-sm);
    background: none;
    color: var(--em-fg-muted);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.em-auth-tab.active { background: var(--em-surface-raised); color: var(--em-fg); }

.em-auth-form { display: flex; flex-direction: column; gap: 6px; }

.em-auth-form label {
    font-size: 12px;
    font-weight: 600;
    color: var(--em-fg-muted);
    margin-top: var(--em-sp-3);
}

.em-auth-form .form-control { width: 100%; box-sizing: border-box; }

.em-auth-hint { font-size: 12px; color: var(--em-fg-faint); line-height: 1.45; }

/* Der Hinweis, dass das Passwort das Geraet nicht verlaesst, ist keine Beruhigungsfloskel — er
   ist die Warnung, dass es auch niemand zuruecksetzen kann. */
.em-auth-notice {
    display: flex;
    gap: var(--em-sp-2);
    align-items: flex-start;
    margin-top: var(--em-sp-3);
    padding: var(--em-sp-3);
    background: var(--em-accent-wash);
    border-radius: var(--em-radius-sm);
    font-size: 12.5px;
    color: var(--em-fg-muted);
    line-height: 1.45;
}

.em-auth-notice .em-icon { color: var(--em-accent); margin-top: 1px; }

.em-auth-error {
    display: flex;
    gap: var(--em-sp-2);
    align-items: flex-start;
    margin-top: var(--em-sp-3);
    padding: var(--em-sp-3);
    background: var(--em-danger-wash);
    border-radius: var(--em-radius-sm);
    color: var(--em-danger);
    font-size: 13px;
    line-height: 1.45;
}

.em-auth-submit { margin-top: var(--em-sp-5); padding: 12px; font-size: 15px; }

@media (max-width: 900px), (orientation: portrait) and (max-width: 1100px) {
    .em-auth {
        max-width: none;
        margin: 0;
        min-height: 100vh;
        min-height: 100dvh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: var(--em-sp-6) var(--em-sp-4);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* Die Benutzer-ID ist ein 32-stelliger Hash. Umbrechen statt abschneiden: sie ist zum
   Nachschlagen und Weitergeben da, eine halbe ID nuetzt niemandem. */
.em-settings-id {
    font-size: 11.5px;
    word-break: break-all;
    text-align: right;
    max-width: 62%;
    line-height: 1.4;
}

/* --- Freigabe-Dialog: Empfaengerauswahl ----------------------------------
 *
 * Fuenf zuletzt Kontaktierte sofort sichtbar, alles Weitere ueber die Suche.
 * Ein Auswahlfeld mit allen bekannten Benutzern ist bei einer Handvoll bequem
 * und bei tausend unbrauchbar — man scrollt durch Fremde, um den einen zu
 * finden, mit dem man staendig arbeitet.
 */

.em-share-subject {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 12px;
    border-radius: 6px;
    background: var(--em-surface-raised);
    color: var(--em-text-secondary);
    font-size: 13px;
}

.em-share-recent-label {
    margin: 10px 0 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--em-text-muted);
}

/* Gedeckelt, damit die Liste den Knopf nicht aus dem Bild schiebt. Im
 * Vollbild-Modus traegt der Dialog seine eigene Scrollflaeche, hier reicht
 * eine begrenzte Hoehe. */
.em-share-results {
    max-height: 240px;
    overflow-y: auto;
    border-radius: 6px;
    background: var(--em-surface-raised);
}

.em-share-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    color: var(--em-text-primary);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.em-share-row:hover { background: var(--em-surface-hover); }

/* Treffer sind gross genug zum Antippen — der Dialog wird auf dem Telefon
 * benutzt, und dort entscheidet die Flaeche, nicht die Schriftgroesse. */
.em-share-row { min-height: 44px; }

.em-share-avatar {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--em-navy, #16324f);
    color: var(--em-accent, #4cc2ff);
    font-size: 13px;
    font-weight: 600;
}

.em-share-dot {
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
}

.em-share-selected {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--em-accent, #4cc2ff);
    background: var(--em-surface-raised);
}

.em-share-selected-name { display: flex; flex-direction: column; }
.em-share-selected-name small { color: #4ade80; font-size: 11px; }
.em-share-selected .btn-icon { margin-left: auto; }

/* "Nichts gefunden" ist eine Antwort und muss auch so aussehen. Eine leere
 * Flaeche liesse offen, ob ueberhaupt gesucht wurde. */
.em-share-hint {
    padding: 12px;
    color: var(--em-text-muted);
    font-size: 13px;
    text-align: center;
}

/* --- Sprachumschalter im Menue -------------------------------------------
 *
 * Direkt im Menue und nicht nur in den Einstellungen: wer die Anwendung in
 * einer Sprache vor sich hat, die er nicht liest, findet den Weg dorthin
 * womoeglich gar nicht. Die Sprachnamen stehen deshalb in ihrer eigenen
 * Sprache ("Deutsch", nicht "German") — die erkennt man auch dann.
 */
.em-menu-section { padding: 8px 12px; }

.em-menu-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--em-text-muted);
    margin-bottom: 6px;
}


/* Sprachauswahl im Menue.

   Vorher eine Knopfreihe je Sprache — die traegt zwei, drei Eintraege und bricht danach. Mit der
   Liste des Systems kommen Bildlauf, Tastaturbedienung und die gewohnte Rolle auf dem Handy
   gratis mit. */
.em-menu-select {
    width: 100%;
    padding: 6px 8px;
    margin-top: 4px;
    font: inherit;
    color: var(--em-text-primary);
    background: var(--em-bg-secondary);
    border: 1px solid var(--em-border);
    border-radius: 6px;
    cursor: pointer;
}

.em-menu-select:focus-visible {
    outline: 2px solid var(--em-accent);
    outline-offset: 1px;
}