* { box-sizing: border-box; }

/*
 * LOGO UND MENUE "VERSPRINGEN" BEIM SEITENWECHSEL (Desktop).
 *
 * Ursache: Der Inhalt ist mittig zentriert (.container, margin:0 auto).
 * Ist eine Seite laenger als der sichtbare Bereich, blendet der Browser
 * eine Bildlaufleiste ein und nimmt ihr den Platz vom rechten Rand weg —
 * bei einer kuerzeren Seite ohne Bildlaufleiste fehlt dieser Abzug. Der fuer
 * die Zentrierung verfuegbare Platz aendert sich dadurch von Seite zu
 * Seite, und mit ihm rutscht ALLES, was zentriert ist: Logo, Menue, Inhalt.
 *
 * Kontakte und Einstellungen zeigten den Effekt nicht, weil beide zufaellig
 * auf derselben Seite dieser Schwelle liegen (beide mit oder beide ohne
 * Bildlaufleiste) — nicht weil dort etwas anders waere.
 *
 * scrollbar-gutter:stable reserviert den Platz der Bildlaufleiste IMMER,
 * auch wenn sie gerade nicht gebraucht wird. Damit aendert sich die
 * verfuegbare Breite nie mehr zwischen den Seiten. Ohne Wirkung auf Safari
 * (kennt die Eigenschaft nicht) — dort ueberlagert die Bildlaufleiste den
 * Inhalt ohnehin, ohne Platz wegzunehmen, das Verspringen tritt dort also
 * gar nicht erst auf.
 */
html { scrollbar-gutter: stable; }

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

body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; min-height: 100vh; background: url("../images/people-chat_bg_001.jpg") center center / cover no-repeat fixed; overflow-x: hidden; }

a { color: inherit; text-decoration: none; }

.container { width: min(1100px, calc(100% - 32px)); margin: 0 auto; }

.site-header{ position: sticky; top: 0; z-index: 1000; width: 100%; background: #000000; border-bottom: 1px solid rgba(255,255,255,0.06); box-shadow: 0 4px 15px rgba(0,0,0,0.35); padding: 16px 0; }

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.site-header .nav a{ color: #ffffff; }

.site-header .logo-slogan{ color: #ffffff; }

.logo-link{ display:flex; align-items:center; gap:12px; text-decoration:none; }

.logo img{ height:65px; width:auto; border-radius: 8px; display:block; }

.logo-slogan{ color:#ffffff; font-size:16px; font-weight:500; letter-spacing:0.5px; }

logo-slogan{ color:#ffffff; font-size:16px; font-weight:500; letter-spacing:0.5px; }

.nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.main { margin-top: -10px; padding-bottom: 40px; }

.hero { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 28px; align-items: center; background: #fff; border-radius: 20px; padding: 32px; box-shadow: 0 10px 30px rgba(0,0,0,0.06); }

.hero h1 { margin-top: 0; font-size: 42px; line-height: 1.1; }

.hero p { font-size: 18px; line-height: 1.6; color: #425166; }

.hero-card { background: linear-gradient(180deg, #0a63c9, #0ab0f0); color: #fff; border-radius: 22px; padding: 24px; min-height: 280px; display: flex; flex-direction: column; justify-content: center; }

.btn { display: inline-block; background: #0a63c9; color: #fff; padding: 12px 18px; border-radius: 12px; border: none; cursor: pointer; font-weight: 700; transition: 0.2s ease; }

.btn:hover { transform: translateY(-1px); }

.btn-secondary { background: #edf4fb; color: #0a63c9; border: 1px solid #c8dbf1; }

.btn-small { padding: 10px 14px; font-size: 14px; }

.section { margin-top: 28px; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.card { background: #fff; border-radius: 18px; padding: 22px; box-shadow: 0 8px 25px rgba(0,0,0,0.05); }

.card h3 { margin-top: 0; }

.form-wrap { max-width: 520px; margin: 0 auto; background: #fff; border-radius: 18px; padding: 28px; box-shadow: 0 10px 30px rgba(0,0,0,0.06); }

.form-wrap h1 { margin-top: 0; }

.form-group { margin-bottom: 16px; }

.form-helper{ margin-top:8px; font-size:14px; }

.form-helper a{ color:#84d441; text-decoration:none; }

.form-helper a:hover{ text-decoration:underline; }

.login-actions{ display:flex; align-items:center; margin-top:25px; }

.login-forgot{ margin-left:30px; color:#000; font-size:15px; text-decoration:none; }

.login-forgot:hover{ text-decoration:underline; }

label { display: block; font-weight: 700; margin-bottom: 8px; }

input,
select,
textarea { width: 100%; padding: 13px 14px; border: 1px solid #cfd9e5; border-radius: 12px; font-size: 16px; background: #fff; }

input:focus,
select:focus,
textarea:focus { outline: none; border-color: #0a63c9; box-shadow: 0 0 0 3px rgba(10, 99, 201, 0.12); }

.alert { padding: 14px 18px; border-radius: 16px; margin-bottom: 20px; font-weight: 600; backdrop-filter: blur(6px); }

.alert-success { background: rgba(132, 212, 65, 0.10); color: #d7f7bd; border: 1px solid rgba(132, 212, 65, 0.28); box-shadow: 0 0 0 1px rgba(255,255,255,0.015) inset, 0 0 14px rgba(132, 212, 65, 0.08); }

.alert-error { background: rgba(255, 90, 90, 0.10); color: #ffd0d0; border: 1px solid rgba(255, 90, 90, 0.26); box-shadow: 0 0 0 1px rgba(255,255,255,0.015) inset, 0 0 14px rgba(255, 90, 90, 0.08); }

.dashboard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 20px; }

.dashboard-card { background: #fff; border-radius: 18px; border: 2px red; padding: 22px; min-height: 150px; box-shadow: 0 8px 25px rgba(0,0,0,0.05); }

.dashboard-card h3 { margin-top: 0; margin-bottom: 10px; }

.site-footer { position: fixed; bottom: 0; left: 0; width: 100%; height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: rgba(10, 14, 17, 0.3); backdrop-filter: blur(4px); border-top: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); font-size: 13px; z-index: 9999; }

.helper-text { font-size: 14px; color: #6b7a8b; margin-top: 6px; }

.inline-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }

.chat-layout { display: grid; grid-template-columns: 320px 1fr; gap: 20px; align-items: start; }

.chat-sidebar,
.chat-main,
.contacts-box { background: red; border-radius: 18px; box-shadow: 0 8px 25px rgba(0,0,0,0.05); }

.chat-sidebar { padding: 18px; }

.chat-main { position:relative; padding: 18px; }

.chat-list { display: flex; flex-direction: column; gap: 12px; }

.chat-item { display: block; padding: 14px; border: 1px solid #dbe5ef; border-radius: 14px; background: #f9fcff; }

.chat-item.active { border-color: #0a63c9; background: #eef6ff; }

.chat-item-name { font-weight: 700; margin-bottom: 6px; }

.chat-item-preview { font-size: 14px; color: #607286; }

.chat-item-time { font-size: 12px; color: #7d8da0; margin-top: 8px; }

.messages { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; max-height: 540px; overflow-y: auto; padding-right: 4px; }

/* padding-right grosszuegiger als links: Oben rechts sitzt der Menuepunkt
   (.msg-delete-trigger). Ohne diesen reservierten Streifen laeuft der Text
   der ersten Zeile darunter — auf dem Handy war genau das das Problem. Hier
   sind die Blasen breit genug, dass die 34 px nicht auffallen. */
.message { position: relative; max-width: 78%; padding: 14px 16px; border-radius: 16px; background: #eef4f9; }

/* Nachrichtenmenü (Löschen, Melden).
   ZWEI Fehler steckten hier drin:
   1. opacity:0 — der Knopf war unsichtbar, bis man zufällig mit der Maus über
      die Nachricht fuhr.
   2. color: rgba(0,0,0,.42) — SCHWARZ. Der Chat ist aber dunkel (siehe die
      Überschreibungen von .message.me/.other weiter unten), also waren die
      Punkte praktisch unsichtbar, auch mit voller Deckkraft.
   Jetzt ein sichtbarer runder Knopf mit hellen Punkten: Er sieht nach einem
   Bedienelement aus, statt nach einem Fleck in der Sprechblase. Ein
   Meldeweg, den man nur zufällig findet, ist keiner. */
.msg-delete-trigger {
    position: absolute; top: 6px; right: 6px;
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; padding: 0;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.24);
    color: rgba(255,255,255,.88);
    font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer;
    border-radius: 50%;
    transition: background .15s, border-color .15s, color .15s;
}
.message:hover .msg-delete-trigger,
.msg-delete-trigger:hover {
    background: rgba(132,212,65,.22);
    border-color: rgba(132,212,65,.55);
    color: #fff;
}
.message-deleted-text { font-style: italic; color: #8a96a3; }
.msg-delete-menu {
    position: absolute; z-index: 500; background: #fff; border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,.18); overflow: hidden; min-width: 170px;
    display: flex; flex-direction: column;
}
.msg-delete-menu button {
    all: unset; box-sizing: border-box; width: 100%; padding: 10px 14px;
    font-size: 14px; color: #d32f2f; cursor: pointer;
}
.msg-delete-menu button:hover { background: rgba(211,47,47,.08); }

/* ── Weitergeleitet-Kennzeichen und Reaktionen (Desktop) ──
   Siehe app/mobile-chat.php für dieselben Regeln mobil. */
.msg-forwarded {
    font-size: 12px; font-style: italic; color: rgba(255,255,255,.45);
    margin-bottom: 5px;
}
/* Reaktionen haengen NEBEN der Blase, auf der Seite, wo ohnehin Platz ist:
   Eigene Nachrichten stehen rechts, also links daneben; empfangene stehen
   links, also rechts daneben. So wird nichts zwischen Blase und Fensterrand
   gequetscht, und die Blase selbst wird nicht laenger.

   nowrap ist wichtig: Der freie Streifen ist schmal, mit Umbruch wuerden
   mehrere Chips untereinander stapeln und ueber die Nachbarnachricht
   laufen. Lieber eine Zeile, die im aeussersten Fall etwas gedraengt ist. */
.msg-reactions {
    position: absolute; bottom: 2px; z-index: 2;
    display: flex; flex-wrap: nowrap; gap: 4px;
}
.message.me    .msg-reactions { right: calc(100% + 6px); }
.message.other .msg-reactions { left:  calc(100% + 6px); }
.msg-reaction {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 8px; border-radius: 20px; cursor: pointer;
    background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16);
    font-size: 13px; color: rgba(255,255,255,.85);
}
.msg-reaction:hover { background: rgba(255,255,255,.14); }
.msg-reaction.is-mine { background: rgba(132,212,65,.20); border-color: rgba(132,212,65,.55); }
.msg-reaction .re-n { font-size: 11px; font-weight: 700; }

/* Reaktionsknopf: oben rechts, DIREKT LINKS neben dem ⋮.
   Unten rechts stand er im Weg: Dort sitzen Uhrzeit und die Punkte fuer
   den Sendestatus, und die gingen daneben unter. Oben stehen beide
   Knoepfe nebeneinander als EINE Bedienleiste, statt als zwei verstreute
   Elemente in der Blase.
   right: 34px = 6 (Rand) + 24 (Breite des ⋮) + 4 (Luft dazwischen). */
.msg-react-trigger {
    position: absolute; top: 6px; right: 34px;
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; padding: 0;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.24);
    color: rgba(255,255,255,.88);
    font-size: 15px; line-height: 1; cursor: pointer; border-radius: 50%;
    transition: background .15s, border-color .15s, color .15s;
}
.message:hover .msg-react-trigger,
.msg-react-trigger:hover {
    background: rgba(132,212,65,.22);
    border-color: rgba(132,212,65,.55);
    color: #fff;
}

/* Das Auswahlfenster haengt am <body>, nicht an der Blase: Innerhalb der
   Blase wuerde es vom Ueberlauf der Nachrichtenliste abgeschnitten. */
.msg-react-picker {
    position: fixed; z-index: 600;
    display: flex; gap: 2px; padding: 5px;
    background: #fff; border-radius: 24px;
    box-shadow: 0 6px 24px rgba(0,0,0,.22);
}
.msg-react-pick {
    all: unset; box-sizing: border-box; cursor: pointer;
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 21px;
}
.msg-react-pick:hover { background: rgba(0,0,0,.08); }


.message.me { margin-left: auto; background: #dff0ff; border-bottom-right-radius: 6px; }

.message.other { margin-right: auto; background: #f3f5f8; border-bottom-left-radius: 6px; }

.message-author { font-size: 12px; font-weight: 700; color: #476175; margin-bottom: 6px; }

.message-text { white-space: pre-wrap; line-height: 1.5; }

/* Nachrichten, die NUR aus Emoji bestehen, groesser darstellen — wie bei
   WhatsApp und Signal. Ein einzelnes Emoji in Textgroesse ist in einer
   Sprechblase kaum zu erkennen, und hier ist es die ganze Nachricht.
   Gestaffelt: eines darf am groessten sein, drei muessen nebeneinander
   noch in die Blase passen. Ab vier bleibt es normal (siehe inc/emoji.php).
   line-height etwas groesser als 1, sonst schneiden hohe Emoji oben ab. */
.emoji-only   { line-height: 1.15; }
.emoji-only-1 { font-size: 42px; }
.emoji-only-2 { font-size: 34px; }
.emoji-only-3 { font-size: 28px; }


.message-time { margin-top: 8px; font-size: 12px; color: #7c8a99; }

.chat-form textarea { min-height: 110px; resize: vertical; }

.contacts-box { padding: 22px; max-width: 700px; }

.contact-list { display: grid; gap: 12px; margin-top: 20px; }

.contact-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px; border: 1px solid #dbe5ef; border-radius: 14px; background: #f9fcff; }

.contact-meta { font-size: 14px; color: #607286; margin-top: 5px; }

.empty-state { padding: 18px; background: #f8fbff; border: 1px dashed #c8d9ea; border-radius: 14px; color: #5f7386; }


/* ===============================
CHAT MESSENGER STYLE
=============================== */

.chat-layout{ display:flex; gap:20px; height:75vh; }

.chat-sidebar{ width:320px; min-width:320px; max-width:320px; border-right:1px solid #ddd; padding-right:10px; overflow-y:auto; }

.chat-main{ flex:1; display:flex; flex-direction:column; }

.chat-list{ display:flex; flex-direction:column; gap:8px; }

.chat-item{ padding:10px; border-radius:8px; background:#f4f4f4; text-decoration:none; color:#333; }

.chat-item:hover{ background:#e9e9e9; }

.chat-item.active{ background:#d9eaff; }

.messages{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:10px 0; }

/* ACHTUNG: Diese Regel gewinnt gegen die .message-Regel weiter oben (gleiche
   Spezifitaet, steht spaeter). Deshalb steht der rechte Innenabstand fuer den
   Menuepunkt HIER — oben gesetzt hatte er keine Wirkung, und der Knopf lag auf
   dem Text der ersten Zeile. */
.message{ box-sizing:border-box; max-width:70%; min-width:260px; padding:10px 12px; border-radius:10px; font-size:14px; line-height:1.4; }

.message.me{ align-self:flex-end; margin-left:auto; margin-right:0; background:#d2f8d2; }

.message.other{ align-self:flex-start; margin-right:auto; margin-left:0; background:#f1f1f1; }

.message-author{ font-size:11px; font-weight:bold; opacity:0.7; margin-bottom:3px; }

.message-time{ font-size:10px; opacity:0.6; margin-top:4px; text-align:right; }

.chat-form{ border-top:1px solid #ddd; padding-top:10px; }

.chat-form textarea{ width:100%; height:70px; resize:none; padding:8px; border:1px solid #ccc; border-radius:6px; font-family:inherit; font-size:14px; }

.chat-form button{ margin-top:8px; }


/* =========================
   PEOPLE-CHAT INPUT STYLE
   ========================= */

.chat-form{ margin-top: 18px; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 14px; }

.chat-input-wrap{ display:flex; align-items:flex-end; gap:12px; }

.chat-input-shell{ flex:1; min-height:62px; display:flex; align-items:flex-end; gap:10px; padding:10px 14px; border-radius:10px; background:rgba(20, 27, 31, 0.92); border:1px solid rgba(255,255,255,0.06); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); }


.chat-input-shell textarea{ flex:1; min-height:24px; max-height:140px; resize:none; overflow-y:hidden; border:none; outline:none; background:transparent; color:#ffffff; font-size:18px; line-height:1.35; padding:6px 0; margin:0; box-shadow:none; position:relative; }
/* Unterlaengen (g, j, y, ...) wurden abgeschnitten: Bei 18px Schrift und
   1.35 Zeilenhoehe braucht eine Zeile rund 24.3px, autoGrowTextarea() (in
   app/chat.php) setzte die Box aber exakt auf 24px zurueck — mit
   overflow-y:hidden blieb kein Rand fuer das, was unter die Grundlinie
   reicht. In lateinischer Schrift faellt das kaum auf; sobald ein
   Sprachtext mehr Unterlaengen enthaelt (kyrillisch etc.), wird es
   sichtbar. line-height bewusst unveraendert, damit sich am Zeilenabstand
   bei mehrzeiligem Text nichts verschiebt — nur der Puffer wird groesser. */
.chat-input-shell textarea{ min-height:28px; padding:6px 0 4px; }
/* URSACHE DES "TEXT RUTSCHT RUNTER" BEIM SPRACHWECHSEL:
   autoGrowTextarea() (app/chat.php) misst beim Laden der Seite die
   scrollHeight der LEEREN Box — und die schliesst den Platzhaltertext mit
   ein. "Nachricht schreiben..." passt einzeilig hinein, laengere
   Uebersetzungen (Franzoesisch, Italienisch, Russisch, Ukrainisch, ...)
   brechen bei derselben Feldbreite auf zwei Zeilen um. Die Box wird dann
   zweizeilig hoch angelegt, obwohl nur eine Zeile Text zu sehen ist — durch
   align-items:flex-end sitzt diese eine Zeile am UNTEREN Rand der zu hohen
   Box, sichtbar tiefer als das Plus-Symbol daneben.
   Der Platzhalter ist ein Hinweistext, kein Inhalt — er muss nie umbrechen. */
.chat-input-shell textarea::placeholder{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.chat-input-shell textarea::placeholder{ color:rgba(255,255,255,0.58); }

.chat-icon-btn{ width:48px; height:48px; min-width:48px; border:none; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(132, 212, 65, 0.14); color:#a8eb78; cursor:pointer; transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease; opacity:1; border:1px solid rgba(132, 212, 65, 0.28); box-shadow: 0 0 0 1px rgba(255,255,255,0.015) inset, 0 0 12px rgba(132, 212, 65, 0.12); }

.chat-icon-btn:hover{ background:rgba(132, 212, 65, 0.22); color:#d7f7bd; transform:scale(1.06); box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset, 0 0 16px rgba(132, 212, 65, 0.18); }

.chat-icon-btn:active{ transform:scale(0.97); }

.chat-icon-btn svg{ width:26px; height:26px; display:block; fill:currentColor; }

.chat-send-btn{ width:58px; height:58px; min-width:58px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#ffffff; transition:transform 0.18s ease, filter 0.18s ease; }

.chat-record-status{ margin-top:10px; padding-left:8px; color:rgba(255,255,255,0.72); font-size:13px; }

/* Optional: Chatfläche dunkler, damit es stimmiger wirkt */
.chat-main{ background:rgba(10, 14, 17, 0.78); border-radius:20px; padding:20px; box-shadow:0 8px 25px rgba(0,0,0,0.18); }

.chat-sidebar{ background:rgba(10, 14, 17, 0.72); border-radius:20px; padding:18px; box-shadow:0 8px 25px rgba(0,0,0,0.18); }

.chat-main h1,
.chat-main h3,
.chat-main p,
.chat-sidebar h3,
.chat-item-name{ color:#ffffff; }

.chat-item{ background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.06); }

.chat-item:hover{ background:rgba(255,255,255,0.09); }

.chat-item.active{ background:rgba(132, 212, 65, 0.12); border-color:rgba(132, 212, 65, 0.55); }

.chat-item-preview,
.chat-item-time,
.message-author,
.message-time{ color:rgba(255,255,255,0.62); }

.messages{ padding-top:8px; padding-bottom:8px; }

.message.me{ background:rgba(132, 212, 65, 0.18); border:1px solid rgba(132, 212, 65, 0.22); }

.message.other{ background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.06); }

.message-text{ color:#ffffff; }


/* Standard Hintergrund (Desktop + Querformat) */
body { margin: 0; padding: 0; min-height: 100vh; display: flex; flex-direction: column; background: url("../images/people-chat_bg_001.jpg") center center / cover no-repeat fixed; }

.intro-wrap{ display:flex; justify-content:center; align-items:center; min-height:75vh; }

.intro-card{ width:min(900px, 100%); background:rgba(10, 14, 17, 0.82); border-radius:24px; padding:28px; box-shadow:0 10px 30px rgba(0,0,0,0.28); text-align:center; }

.intro-card h1,
.intro-card p{ color:#ffffff; }

.intro-video-box{ margin-top:20px; border-radius:20px; overflow:hidden; background:#000; box-shadow:0 8px 24px rgba(0,0,0,0.35); }

.intro-video-box video{ display:block; width:100%; height:auto; max-height:70vh; background:#000; }

.intro-actions{ margin-top:18px; display:flex; justify-content:center; }

/* =========================
   PEOPLECHAT INTRO PAGE
   ========================= */

.pc-intro-section{ position:relative; min-height:calc(100vh - 120px); display:flex; align-items:center; justify-content:center; padding:30px 0; }

.pc-intro-overlay{ position:absolute; inset:0; background: radial-gradient(circle at top left, rgba(132, 212, 65, 0.10), transparent 30%), radial-gradient(circle at bottom right, rgba(132, 212, 65, 0.08), transparent 26%); pointer-events:none; }

.pc-intro-card{ position:relative; z-index:2; width:min(1180px, 100%); background:rgba(7, 10, 11, 0.82); border:1px solid rgba(255,255,255,0.05); border-radius:28px; padding:28px; box-shadow:0 20px 60px rgba(0,0,0,0.35); backdrop-filter:blur(8px); }

.pc-intro-top{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:26px; }

.pc-intro-brand{ display:flex; align-items:center; gap:16px; }

.pc-intro-logo{ height:64px;width:auto; display:block; border-radius:12px; }

.pc-intro-brand-text h1{ margin:0; color:#ffffff; font-size:32px; line-height:1; }

.pc-intro-brand-text p{ margin:6px 0 0; color:rgba(255,255,255,0.72); font-size:15px; letter-spacing:0.3px; }

.pc-intro-skip{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px; border-radius:999px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); color:#ffffff; font-weight:600; transition:all 0.18s ease; }

.pc-intro-skip:hover{ background:rgba(255,255,255,0.10); transform:translateY(-1px); }

.pc-intro-content{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap:28px; align-items:center; }

.pc-intro-copy{ color:#ffffff; }

.pc-intro-badge{ display:inline-flex; align-items:center; min-height:34px; padding:0 14px; border-radius:999px; background:rgba(132, 212, 65, 0.14); border:1px solid rgba(132, 212, 65, 0.24); color:#a8eb78; font-size:13px; font-weight:700; letter-spacing:0.4px; margin-bottom:18px; }

.pc-intro-copy h2{ margin:0 0 14px; color:#ffffff; font-size:42px; line-height:1.08; }

.pc-intro-copy p{ margin:0; color:rgba(255,255,255,0.78); font-size:18px; line-height:1.6; }

.pc-intro-features{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }

.pc-intro-features span{ display:inline-flex; align-items:center; min-height:36px; padding:0 14px; border-radius:999px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.06); color:#ffffff; font-size:14px; font-weight:600; }

.pc-intro-video-box{ background:#000000; border-radius:24px; overflow:hidden; border:1px solid rgba(255,255,255,0.06); box-shadow:0 14px 40px rgba(0,0,0,0.38); }

.pc-intro-video{ display:block; width:100%; height:auto; max-height:70vh; background:#000000; }

.pc-intro-bottom{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,0.06); }

.pc-intro-note{ color:rgba(255,255,255,0.62); font-size:14px; }

.pc-intro-actions{ display:flex; gap:12px; }

.pc-intro-btn-secondary{ display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 20px; border-radius:999px; background:#84d441; color:#0b0f0d; font-weight:800; letter-spacing:0.2px; box-shadow:0 10px 24px rgba(132, 212, 65, 0.26); transition:all 0.18s ease; }

.pc-intro-btn-secondary:hover{ transform:translateY(-1px) scale(1.01); filter:brightness(1.03); }

/* =========================
   GLOW / LIGHT BORDER
   ========================= */

.card,
.form-wrap,
.contacts-box,
.chat-main,
.chat-sidebar,
.intro-card,
.dashboard-card,
.chat-item,
.message{ border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset, 0 0 14px rgba(255,255,255,0.04); }

/* etwas stärkerer grüner Glow für wichtige Elemente */
.chat-main,
.contacts-box,
.form-wrap,
.intro-card{ border: 1px solid rgba(132, 212, 65, 0.20); box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset, 0 0 18px rgba(132, 212, 65, 0.10); }

/* Sidebar und Chat-Items etwas dezenter */
.chat-sidebar,
.chat-item,
.dashboard-card{ border: 1px solid rgba(255,255,255,0.07); box-shadow: 0 0 0 1px rgba(255,255,255,0.015) inset, 0 0 10px rgba(255,255,255,0.03); }

/* aktiver Chat etwas stärker */
.chat-item.active{ border: 1px solid rgba(132, 212, 65, 0.38); box-shadow: 0 0 0 1px rgba(132, 212, 65, 0.08) inset, 0 0 18px rgba(132, 212, 65, 0.14); }

/* =========================
   FIXED CHAT LAYOUT
   ========================= */

.chat-layout-fixed{ display:grid; grid-template-columns: 320px 1fr; gap:20px; align-items:stretch; min-height: calc(100vh - 170px); }

.chat-main-fixed{ display:flex; flex-direction:column; min-height: calc(100vh - 170px); max-height: calc(100vh - 170px); overflow:hidden; }

.chat-main-top{ flex:0 0 auto; }

.messages-fixed{ flex:1 1 auto; min-height:0; overflow-y:auto; padding-right:6px; margin-top:8px; margin-bottom:12px; }

.chat-form-sticky{ flex:0 0 auto; margin-top:auto; padding-top:14px; border-top:1px solid rgba(255,255,255,0.08); background:linear-gradient(to top, rgba(10,14,17,0.98), rgba(10,14,17,0.86)); backdrop-filter: blur(4px); }

.messages-fixed::-webkit-scrollbar{ width:10px; }

.messages-fixed::-webkit-scrollbar-track{ background:rgba(255,255,255,0.04); border-radius:10px; }

.messages-fixed::-webkit-scrollbar-thumb{ background:rgba(132, 212, 65, 0.28); border-radius:10px; }

.chat-item-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:6px; }

.chat-item-preview-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }

.chat-item-meta{ display:flex; align-items:center; gap:8px; flex-shrink:0; }

.chat-unread-badge{ min-width:24px; height:24px; padding:0 8px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:#84d441; color:#0b0f0d; font-size:13px; font-weight:800; line-height:1; box-shadow:0 4px 12px rgba(132, 212, 65, 0.24); }

.chat-missed-call-badge{ min-width:24px; height:24px; padding:0 7px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; gap:3px; background:#ff5050; color:#fff; font-size:13px; font-weight:800; line-height:1; box-shadow:0 4px 12px rgba(255,80,80,0.35); }

.chat-item-time.is-unread{ color:#84d441 !important; font-weight:700; }

.chat-item-menu-btn{ width:24px; height:24px; padding:0; border:none; border-radius:50%; background:transparent; color:rgba(255,255,255,.4); font-size:16px; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.chat-item-menu-btn:hover{ background:rgba(255,255,255,.1); color:rgba(255,255,255,.8); }
.chat-item-menu{
    position:absolute; z-index:500; background:#1c2733; border:1px solid rgba(255,255,255,.08);
    border-radius:10px; box-shadow:0 6px 24px rgba(0,0,0,.35); overflow:hidden;
    min-width:170px; display:flex; flex-direction:column;
}
.chat-item-menu button{
    all:unset; box-sizing:border-box; width:100%; padding:11px 14px;
    font-size:14px; color:#ff6b6b; cursor:pointer; white-space:nowrap;
}
.chat-item-menu button:hover{ background:rgba(255,107,107,.12); }

/* =========================
   CHATS OVERVIEW PAGE
   ========================= */

.chat-overview-layout{ display:grid; grid-template-columns:320px 1fr; gap:20px; align-items:stretch; min-height:calc(100vh - 170px); }

.chat-overview-sidebar{ width:100%; max-width:none !important; min-height:calc(100vh - 170px); overflow-y:auto; }

.chat-overview-main{ min-height:calc(100vh - 170px); display:flex; align-items:stretch; justify-content:stretch; overflow:hidden; }

.chat-overview-title,
.chat-main h1{ margin:0 0 18px 0; font-size:22px !important; font-weight:700; line-height:1.2; color:#ffffff; }

.chat-overview-placeholder{ flex:1; display:flex; align-items:center; justify-content:center; min-height:100%; padding:30px; }

.chat-overview-placeholder-inner{ width:min(680px, 100%); text-align:center; }

.chat-overview-badge{ display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:0 14px; border-radius:999px; background:rgba(132, 212, 65, 0.14); border:1px solid rgba(132, 212, 65, 0.24); color:#a8eb78; font-size:13px; font-weight:700; letter-spacing:0.35px; margin-bottom:18px; }

.chat-overview-placeholder h2{ margin:0 0 12px 0; color:#ffffff; font-size:40px; line-height:1.1; font-weight:700; }

.chat-overview-placeholder p{ margin:0 auto; max-width:560px; color:rgba(255,255,255,0.76); font-size:18px; line-height:1.6; }

.chat-overview-features{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:22px; }

.chat-overview-features span{ display:inline-flex; align-items:center; min-height:38px; padding:0 14px; border-radius:999px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.07); color:#ffffff; font-size:14px; font-weight:600; }

.chat-overview-title,
.chat-main h1{ margin:0 0 18px 0; font-size:22px !important; font-weight:600; line-height:1.2; color:#ffffff; }


/* =========================
   CHAT OVERVIEW = SAME AS CHAT WINDOW
   ========================= */

/* Linke und rechte Karte gleicher Rahmen / Glow */
.chat-overview-sidebar,
.chat-overview-main{ border: 1px solid rgba(132, 212, 65, 0.20) !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset, 0 0 18px rgba(132, 212, 65, 0.10) !important; }

/* Titel links exakt wie Titel im geöffneten Chat */
.chat-overview-sidebar .chat-overview-title,
.chat-main h1{ margin: 0 0 18px 0 !important; padding: 0 !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 0 !important; color: #ffffff !important; }

/* Falls h2 browserseitig anders rendert: neutralisieren */
.chat-overview-sidebar h2{ margin: 0 0 18px 0 !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.2 !important; color: #ffffff !important; }

/* Gleicher oberer Innenabstand wie im Chatfenster */
.chat-overview-sidebar,
.chat-overview-main{ padding: 20px !important; }

/* Kontakt hinzufügen — Icon-Link ganz rechts neben dem "Chats"-Titel */
.chats-add-contact-link{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:32px; height:32px; border-radius:50%; color:#84d441; background:rgba(132,212,65,.10); border:1px solid rgba(132,212,65,.25); transition:background .15s, border-color .15s; }
.chats-add-contact-link:hover{ background:rgba(132,212,65,.20); border-color:rgba(132,212,65,.45); }
.chats-add-contact-link svg{ width:17px; height:17px; }

/* Titel+Kontakt-Zeile — identisch in chats.php und chat.php (dieselben Klassen,
   feste Werte statt geerbter/kollidierender h2/h3-Regeln), damit beim Wechsel
   zwischen den beiden Seiten nichts verspringt. Der 20px-Innenabstand hier
   gilt für beide .chat-sidebar-Varianten (siehe .chat-sidebar{padding:18px}
   weiter oben — hier bewusst überschrieben, damit beide Seiten exakt gleich sind). */
.chat-sidebar{ padding:20px !important; }
.chat-title-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 18px 0; }
/* Zweite (gleich-spezifische) Selektor-Variante nötig, um die ältere
   ".chat-overview-sidebar .chat-overview-title"-Regel (ebenfalls 2 Klassen +
   !important) per Reihenfolge zu schlagen — sonst bekäme chats.php zusätzlich
   zu diesem Margin noch das alte 18px-Margin am h2 selbst obendrauf, und der
   Chat-Liste-Start würde wieder verspringen. */
.chat-title-row-h,
.chat-overview-sidebar .chat-title-row-h{ margin:0 !important; padding:0 !important; font-size:18px !important; font-weight:700 !important; line-height:1.2 !important; letter-spacing:0 !important; color:#ffffff !important; }

.chats-search-wrap{ position:relative; margin:0 0 14px 0; }
.chats-search-icon{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:rgba(255,255,255,.35); pointer-events:none; }
.chats-search-input{ width:100%; box-sizing:border-box; padding:9px 12px 9px 36px; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); color:#fff; font-size:13px; outline:none; transition:border-color .15s, background .15s; }
.chats-search-input::placeholder{ color:rgba(255,255,255,.35); }
.chats-search-input:focus{ border-color:rgba(132,212,65,.45); background:rgba(255,255,255,.08); }

/* Linke Karte nicht abweichend abdunkeln */
.chat-overview-sidebar{ background: rgba(10, 14, 17, 0.78) !important; border-radius: 20px !important; }

/* Rechte Karte identisch lassen */
.chat-overview-main{
    background: rgba(10, 14, 17, 0.78) !important; border-radius: 20px !important; }


/* =========================
   PEOPLECHAT GLOBAL CARD
   ========================= */

.pc-card{ background: rgba(10, 14, 17, 0.78); border-radius: 20px; padding: 20px; border: 1px solid rgba(132, 212, 65, 0.20); box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset, 0 0 18px rgba(132, 212, 65, 0.10); backdrop-filter: blur(6px); }

/* Preis-wählen-Seite (app/preise.php) — bewusst 1:1 dieselbe Optik wie die
   Preise-Sektion der Landingpage (assets/css/landing.css .lp-pricing-*),
   nur mit pp-Präfix statt lp-Präfix, da beide Seiten nicht dasselbe
   Stylesheet laden (Klassennamen-Kollisionsgefahr mit .container/.btn). */
/* Aktueller mobiler App-Hintergrund (aus assets/css/mobile.css übernommen —
   dunkles Overlay + bg_mobile_002, NICHT das alte bg_mobile_001). */
body.pp-body {
    background:
        linear-gradient(rgba(5,8,12,0.58), rgba(5,8,12,0.58)),
        url("../images/people-chat_bg_mobile_002.jpg") center top / cover no-repeat fixed;
}
.pp-eyebrow { color:#84d441; font-weight:800; font-size:13px; letter-spacing:1px; text-transform:uppercase; margin-bottom:10px; }

.pp-toggle-row { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:30px; }
.pp-toggle-label { font-size:14px; font-weight:700; color:rgba(255,255,255,.45); cursor:pointer; user-select:none; transition:color .2s; }
.pp-toggle-label.active { color:#fff; }
.pp-toggle-switch { position:relative; width:52px; height:28px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); cursor:pointer; padding:0; flex:none; }
.pp-toggle-switch .pp-toggle-knob { position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%; background:#84d441; transition:transform .2s ease; box-shadow:0 2px 6px rgba(0,0,0,.3); }
.pp-toggle-switch[aria-checked="true"] .pp-toggle-knob { transform:translateX(24px); }

.pp-plans-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:20px; align-items:stretch; }
.pp-plan-card {
    background:linear-gradient(135deg, rgba(255,255,255,.13) 0%, rgba(15,25,40,.32) 100%);
    backdrop-filter:blur(4px) saturate(130%); -webkit-backdrop-filter:blur(4px) saturate(130%);
    border:0.5px solid rgba(255,255,255,.22); border-radius:12px; padding:26px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        inset 1px 0 0 rgba(255,255,255,.10),
        inset 0 -1px 0 rgba(0,0,0,.12),
        0 6px 24px rgba(0,0,0,.2);
    position:relative; display:flex; flex-direction:column;
}
.pp-plan-card.featured { border:1.5px solid #84d441; box-shadow:0 0 24px rgba(132,212,65,.25), 0 6px 24px rgba(0,0,0,.2); }
.pp-plan-badge {
    position:absolute; top:-13px; left:50%; transform:translateX(-50%);
    background:#84d441; color:#0a0f0a; font-size:11px; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
    padding:5px 14px; border-radius:999px; white-space:nowrap;
}
.pp-plan-card h3 { margin:6px 0 6px; font-size:18px; color:#fff; }
.pp-plan-desc { margin:0 0 14px; font-size:13px; color:rgba(255,255,255,.55); }
.pp-plan-price { margin:0 0 18px; }
.pp-plan-price .amount { font-size:32px; font-weight:800; color:#fff; }
.pp-plan-price .period { font-size:13px; font-weight:600; color:rgba(255,255,255,.5); margin-left:4px; }
.pp-plan-price .pp-price-yearly { display:none; }
.pp-plans-grid.pp-yearly-active .pp-plan-price .pp-price-monthly { display:none; }
.pp-plans-grid.pp-yearly-active .pp-plan-price .pp-price-yearly { display:inline; }
.pp-plan-tokens {
    display:inline-flex; align-items:center; gap:6px; margin:0 0 18px; padding:7px 12px;
    background:rgba(132,212,65,.08); border:1px solid rgba(132,212,65,.25); border-radius:8px;
    font-size:13px; font-weight:700; color:#84d441;
}
.pp-plan-tokens svg { width:15px; height:15px; flex:none; }
.pp-plan-features { list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:11px; flex:1; }
.pp-plan-features li { display:flex; align-items:flex-start; gap:9px; font-size:14px; color:rgba(255,255,255,.82); }
.pp-plan-features li svg { width:16px; height:16px; color:#84d441; flex:none; margin-top:2px; }
.pp-plan-actions { margin:0 0 8px; }
.pp-plan-actions .btn { width:100%; }

/* Titel innerhalb der Card */

.pc-card h1,
.pc-card h2,
.pc-card h3{ margin-top:0; color:#ffffff; }

/* Text */

.pc-card p{ color: rgba(255,255,255,0.78); }

/* =========================
   PEOPLECHAT FORM FIELDS
   dunkler Input-Stil wie im Chat
   ========================= */

.pc-card label{ color:#ffffff; }

.pc-card .helper-text,
.pc-card .form-helper,
.pc-card small,
.pc-card p{ color:rgba(255,255,255,0.72); }

.pc-card input:not([type="checkbox"]):not([type="radio"]),
.pc-card select,
.pc-card textarea{ width:100%; background:rgba(20, 27, 31, 0.92) !important; color:#ffffff !important; border:1px solid rgba(255,255,255,0.08) !important; border-radius:10px !important; box-shadow:inset 0 1px 0 rgba(255,255,255,0.03) !important; }

.pc-card input:not([type="checkbox"]):not([type="radio"])::placeholder,
.pc-card textarea::placeholder{ color:rgba(255,255,255,0.55) !important; }

.pc-card input:not([type="checkbox"]):not([type="radio"]):focus,
.pc-card select:focus,
.pc-card textarea:focus{ outline:none !important; border-color:rgba(132, 212, 65, 0.55) !important; box-shadow: 0 0 0 3px rgba(132, 212, 65, 0.10), inset 0 1px 0 rgba(255,255,255,0.03) !important; }

.pc-card select{ appearance:auto; }

.pc-card option{ background:#141b1f; color:#ffffff; }

/* Checkboxen angenehmer im dunklen Layout */
.pc-card input[type="checkbox"],
.pc-card input[type="radio"]{ accent-color:#84d441; }

/* Falls Formulartexte in Cards zu dunkel sind */
.pc-card .form-group label,
.pc-card .settings-label{ color:#ffffff !important; }

/* Hinweise unter Feldern */
.pc-card .field-note,
.pc-card .input-note{ color:rgba(255,255,255,0.65) !important; }



/* =========================
   SETTINGS STATUS BOX
   kein weißes Eingabefeld mehr
   ========================= */

.pc-card .settings-status,
.pc-card .status-box,
.pc-card .current-settings-box,
.pc-card .settings-preview{ background: rgba(255,255,255,0.04) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 16px !important; padding: 18px 20px !important; box-shadow: none !important; min-height: unset !important; }

.pc-card .settings-status p,
.pc-card .status-box p,
.pc-card .current-settings-box p,
.pc-card .settings-preview p,
.pc-card .settings-status div,
.pc-card .status-box div,
.pc-card .current-settings-box div,
.pc-card .settings-preview div{ color: rgba(255,255,255,0.82) !important; }

/* Falls unten aktuell noch ein textarea/input dafür missbraucht wird */
.pc-card textarea.settings-status,
.pc-card input.settings-status{ background: rgba(255,255,255,0.04) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 16px !important; box-shadow: none !important; resize: none !important; pointer-events: none; }

/* =========================
   CONTACT LIST ROWS
   dunkler statt grellweiß
   ========================= */

.pc-card .contact-row,
.pc-card .contact-item,
.pc-card .contact-card,
.pc-card .contact-entry{ background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 18px !important; color: #ffffff !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.015) inset, 0 0 10px rgba(255,255,255,0.03) !important; }

.pc-card .contact-row:hover,
.pc-card .contact-item:hover,
.pc-card .contact-card:hover,
.pc-card .contact-entry:hover{ background: rgba(255,255,255,0.07) !important; }

.pc-card .contact-row h1,
.pc-card .contact-row h2,
.pc-card .contact-row h3,
.pc-card .contact-row strong,
.pc-card .contact-item h1,
.pc-card .contact-item h2,
.pc-card .contact-item h3,
.pc-card .contact-item strong,
.pc-card .contact-card h1,
.pc-card .contact-card h2,
.pc-card .contact-card h3,
.pc-card .contact-card strong,
.pc-card .contact-entry h1,
.pc-card .contact-entry h2,
.pc-card .contact-entry h3,
.pc-card .contact-entry strong{ color: #ffffff !important; }

.pc-card .contact-meta,
.pc-card .contact-row p,
.pc-card .contact-item p,
.pc-card .contact-card p,
.pc-card .contact-entry p,
.pc-card .contact-row span,
.pc-card .contact-item span,
.pc-card .contact-card span,
.pc-card .contact-entry span{ color: rgba(255,255,255,0.74) !important; }

/* Buttons in Kontaktzeilen etwas passender */
.pc-card .contact-row .btn,
.pc-card .contact-item .btn,
.pc-card .contact-card .btn,
.pc-card .contact-entry .btn{ border-radius: 16px !important; }


/* =========================
   SETTINGS STATUS CARD
   ========================= */

.settings-status-card{ background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 18px !important; padding: 20px !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.015) inset, 0 0 10px rgba(255,255,255,0.03) !important; }

.settings-status-card h3{ margin: 0 0 14px 0 !important; color: #ffffff !important; font-size: 22px; font-weight: 700; }

.settings-status-card p{ margin: 0 0 10px 0; color: rgba(255,255,255,0.78) !important; font-size: 16px; line-height: 1.5; }

.settings-status-card p:last-child{ margin-bottom: 0; }

.settings-status-card strong{ color: #ffffff !important; }


/*========= BUTTONS ==========*/

.btn,
button{ background: linear-gradient(135deg,#7ED957,#4CAF50); color:#ffffff; border:none; border-radius:14px; padding:10px 18px; font-weight:600; cursor:pointer; transition:all .2s ease; }



.btn-secondary{ background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); color:#ffffff; }


.chat-icon-btn.is-recording{

}



/* Mikrofon-Button moderner und deutlich größer */
.chat-record-btn{ width:48px; height:48px; min-width:48px; display:flex; align-items:center; justify-content:center; cursor:pointer; }

/* Aufnahme aktiv */
.chat-record-btn.is-recording{

}

/* Verarbeitung (Transkription/Übersetzung) nach dem Stoppen der Aufnahme —
   Button optisch "beschäftigt" statt wieder ganz normal klickbar, sonst
   wirkt es, als sei nichts passiert und man könnte sofort neu aufnehmen. */
.chat-record-btn.is-processing{ cursor:default; opacity:.55; pointer-events:none; }
.chat-record-btn.is-processing img{ animation: pcRecSpin .8s linear infinite; }
@keyframes pcRecSpin{ to{ transform:rotate(360deg); } }
.chat-record-status{ font-weight:600; }

.chat-input-shell{ position:relative; }

.chat-input-shell textarea{ padding-right:110px; }

/* Mikro */
.chat-record-btn{ position:absolute; right:60px; top:50%; transform:translateY(-50%); }

/* Send Button */

.chat-send-btn{ position:absolute; right:12px; top:50%; transform:translateY(-50%); width:48px; height:48px; min-width:38px; display:flex; align-items:center; justify-content:center; cursor:pointer; }

/* =========================
   FIX: CHAT BUTTONS NO JUMP
   ========================= */

/* Mikro und Senden absolut sauber mittig */
.chat-record-btn,
.chat-send-btn{ top:50% !important; transform:translateY(-50%) !important; }

/* Alle Hover-/Focus-/Active-Zustände OHNE Positionssprung */
.chat-record-btn:hover,
.chat-record-btn:focus,
.chat-record-btn:active,
.chat-send-btn:focus,
.chat-send-btn:active{ transform:translateY(-50%) !important; }

/* Mikro-Button */
.chat-record-btn{ position:absolute; right:58px; width:48px; height:48px; min-width:48px; padding:0; display:flex; align-items:center; justify-content:center; background:transparent !important; box-shadow:none !important; cursor:pointer; }

.chat-record-btn.is-recording{  }

/* Send-Button */
.chat-send-btn{ position:absolute; right:12px; width:40px; height:40px; min-width:40px; padding:0; display:flex; align-items:center; justify-content:center; cursor:pointer; }

/* Textfeld mit genug Platz rechts für beide Buttons */
.chat-input-shell{ position:relative; }

.chat-input-shell textarea{ padding-right:112px !important; }

/* =========================
   CUSTOM AUDIO PLAYER
   ========================= */

.pc-audio-player { display:flex; align-items:center; gap:10px; width:100%; padding:2px 0; }
.pc-audio-player > audio { display:none !important; }

.pc-audio-play-btn { width:36px; height:36px; min-width:36px; border-radius:50%; border:none; background:linear-gradient(135deg,#7ED957,#4CAF50); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 2px 8px rgba(132,212,65,0.22); transition:filter 0.15s; padding:0; }
.pc-audio-play-btn:hover,.pc-audio-play-btn:focus { filter:brightness(1.1); }
.pc-audio-play-btn svg { width:18px; height:18px; }

.pc-audio-track { flex:1; display:flex; flex-direction:column; gap:5px; min-width:0; }

.pc-audio-bar { height:4px; background:rgba(255,255,255,0.18); border-radius:2px; cursor:pointer; position:relative; overflow:hidden; }
.message.me .pc-audio-bar { background:rgba(255,255,255,0.28); }

.pc-audio-fill { height:100%; width:0%; background:linear-gradient(90deg,#7ED957,#4CAF50); border-radius:2px; pointer-events:none; }

.pc-audio-time { display:flex; justify-content:space-between; font-size:11px; color:rgba(255,255,255,0.50); line-height:1; }
.message.me .pc-audio-time { color:rgba(255,255,255,0.70); }

/* =========================
   VOICE MESSAGE CARD
   ========================= */

.voice-msg-card { display:flex; flex-direction:column; width:100%; }

.voice-msg-section { padding-bottom:10px; }
.voice-msg-section:last-child { padding-bottom:0; }
.voice-msg-section + .voice-msg-section { border-top:1px solid rgba(255,255,255,0.10); padding-top:10px; }
.message.me .voice-msg-section + .voice-msg-section { border-top-color:rgba(255,255,255,0.22); }

.voice-msg-label { display:flex; align-items:center; gap:5px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:rgba(255,255,255,0.45); margin-bottom:7px; }
.message.me .voice-msg-label { color:rgba(255,255,255,0.65); }
.voice-msg-label svg { flex-shrink:0; }

/* Button left, text right — mirrors the audio player layout */
.voice-msg-translation-row { display:flex; align-items:flex-start; gap:10px; }
.voice-msg-text-body { flex:1; font-size:14px; line-height:1.55; word-break:break-word; overflow-wrap:anywhere; color:#ffffff; }

/* =========================
   TRANSLATED VOICE PLAY BUTTON
   ========================= */

.translated-voice-action { margin-top:10px; }

/* Standalone TTS button (text messages) */
.play-translated-voice-btn{ width:42px; height:42px; min-width:42px; border:none; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#7ED957,#4CAF50); color:#ffffff; cursor:pointer; padding:0; box-shadow:0 0 12px rgba(132,212,65,0.18); transition:filter 0.18s ease,box-shadow 0.18s ease,background 0.18s ease; }
.play-translated-voice-btn:hover,.play-translated-voice-btn:focus{ filter:brightness(1.08); box-shadow:0 0 16px rgba(132,212,65,0.28); }
.play-translated-voice-btn svg{ width:22px; height:22px; display:block; fill:currentColor; }

/* TTS button inside voice card — same size as audio play button for alignment */
.voice-msg-tts-btn{ width:36px !important; height:36px !important; min-width:36px !important; margin-top:0 !important; flex-shrink:0; }
.voice-msg-tts-btn svg{ width:18px !important; height:18px !important; }


.chat-item-preview{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; white-space:normal; line-height:1.35; max-height:2.7em; }

.chat-item-preview-row{ align-items:flex-start; }

.chat-item-time{ flex-shrink:0; margin-top:0; white-space:nowrap; }


.dashboard-card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }

.dashboard-unread-badge{ min-width:28px; height:28px; padding:0 9px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:#84d441; color:#0b0f0d; font-size:13px; font-weight:800; line-height:1; box-shadow:0 4px 12px rgba(132, 212, 65, 0.24); }


.dashboard-card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }

.dashboard-card-head h3{ margin:0; }

.dashboard-unread-badge{ min-width:28px; height:28px; padding:0 9px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:#84d441; color:#0b0f0d; font-size:13px; font-weight:800; line-height:1; box-shadow:0 4px 12px rgba(132, 212, 65, 0.24); }


.nav-chat-link{ display:inline-flex; align-items:center; gap:8px; }

.header-unread-badge{ min-width:22px; height:22px; padding:0 7px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:#84d441; color:#0b0f0d; font-size:12px; font-weight:800; line-height:1; box-shadow:0 4px 12px rgba(132, 212, 65, 0.24); }

/* Verpasste Anrufe — Header Nav */
.nav-calls-link{ display:inline-flex; align-items:center; gap:6px; text-decoration:none; }
.nav-calls-icon{ width:15px; height:15px; flex-shrink:0; color:currentColor; }
.nav-groups-link{ display:inline-flex; align-items:center; gap:6px; text-decoration:none; }
.nav-groups-icon{ width:15px; height:15px; flex-shrink:0; color:currentColor; }
.header-groups-badge{ min-width:22px; height:22px; padding:0 7px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:#84d441; color:#0b0f0d; font-size:12px; font-weight:800; line-height:1; box-shadow:0 4px 12px rgba(132,212,65,0.24); }
.header-missed-call-badge{ min-width:22px; height:22px; padding:0 7px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:#ff5050; color:#fff; font-size:12px; font-weight:800; line-height:1; box-shadow:0 4px 12px rgba(255,80,80,0.35); }

/* Anrufe-Seite */
.calls-page-layout{ max-width:700px; margin:0 auto; }
.calls-page-header{ display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.calls-page-title{ display:flex; align-items:center; gap:10px; margin:0; font-size:22px; font-weight:700; color:#fff; }
.calls-page-title-icon{ width:22px; height:22px; color:#84d441; flex-shrink:0; }
.calls-card{ padding:8px 4px; }
.calls-list{ display:flex; flex-direction:column; gap:2px; }
.call-item{ display:flex; align-items:center; border-radius:10px; transition:background 0.15s; }
.call-item:hover{ background:rgba(255,255,255,0.06); }
.call-item-inner{ display:flex; align-items:center; gap:14px; padding:11px 14px; text-decoration:none; color:inherit; flex:1; min-width:0; }
.call-item-callback{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:34px; height:34px; margin-right:12px; padding:0; border-radius:50%; color:#84d441; background:rgba(132,212,65,.10); border:1px solid rgba(132,212,65,.25); cursor:pointer; transition:background .15s, border-color .15s; }
.call-item-callback:hover{ background:rgba(132,212,65,.20); border-color:rgba(132,212,65,.45); }
.call-item-callback svg{ width:17px; height:17px; }
.call-item-avatar{ flex-shrink:0; }
.call-item-avatar img{ width:46px; height:46px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,0.08); display:block; }
.call-item-info{ flex:1; min-width:0; }
.call-item-name{ font-weight:600; font-size:15px; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#fff; }
.call-item-missed .call-item-name{ color:rgba(255,100,100,0.9); }
.call-item-sub{ font-size:12px; color:rgba(255,255,255,0.42); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.call-item-sub-missed{ color:rgba(255,100,100,0.65) !important; }
.call-item-time{ font-size:12px; color:rgba(255,255,255,0.32); white-space:nowrap; flex-shrink:0; text-align:right; }

/* Verpasste Anrufe — Dashboard Kachel */
.dashboard-badge-group{ display:inline-flex; align-items:center; gap:10px; }
.dashboard-missed-call-wrap{ display:inline-flex; align-items:center; gap:5px; }
.dashboard-phone-icon{ font-size:18px; line-height:1; }
.dashboard-missed-call-badge{ min-width:28px; height:28px; padding:0 9px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:#ff5050; color:#fff; font-size:13px; font-weight:800; line-height:1; box-shadow:0 4px 12px rgba(255,80,80,0.35); }

/* ── Dashboard-Kacheln (Desktop) — identischer Glaslook wie die mobile App
   (assets/css/mobile.css .m-quick-card), nur mit mehr Spalten pro Reihe. ── */
.dash-quick-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
    margin-top: 20px;
}
.dash-quick-card{
    background: linear-gradient(135deg, rgba(255,255,255,.13) 0%, rgba(15,25,40,.32) 100%);
    backdrop-filter: blur(4px) saturate(130%);
    -webkit-backdrop-filter: blur(4px) saturate(130%);
    border: 0.5px solid rgba(255,255,255,.22);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        inset 1px 0 0 rgba(255,255,255,.10),
        inset 0 -1px 0 rgba(0,0,0,.12),
        0 6px 24px rgba(0,0,0,.2);
    border-radius: 12px;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background .15s, box-shadow .15s, transform .15s;
    position: relative;
}
.dash-quick-card:hover{
    background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, rgba(15,25,40,.4) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.26),
        inset 1px 0 0 rgba(255,255,255,.12),
        inset 0 -1px 0 rgba(0,0,0,.14),
        0 8px 28px rgba(0,0,0,.28);
    transform: translateY(-2px);
}
.dash-quick-card svg{ width:26px; height:26px; fill:none; stroke:#84d441; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.dash-quick-card-label{ font-size:14px; font-weight:700; color:#f0f0f0; margin-top:4px; }
.dash-quick-card-sub{ font-size:12px; color:rgba(255,255,255,.4); }
.dash-quick-badge{
    position:absolute; top:10px; right:10px; min-width:20px; height:20px;
    background:#e03535; color:#fff; border-radius:10px; font-size:11px; font-weight:700;
    display:flex; align-items:center; justify-content:center; padding:0 5px;
}

/* ── Dashboard: Profilkopf, Zuletzt-aktiv-Karussell, QR-Karte (Desktop) —
   gleicher Glaslook wie assets/css/mobile.css (.m-card etc.), hier repliziert
   da Desktop-Seiten ein eigenes Stylesheet laden. ── */
.dash-card{
    background: linear-gradient(135deg, rgba(255,255,255,.13) 0%, rgba(15,25,40,.32) 100%);
    backdrop-filter: blur(4px) saturate(130%);
    -webkit-backdrop-filter: blur(4px) saturate(130%);
    border: 0.5px solid rgba(255,255,255,.22);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        inset 1px 0 0 rgba(255,255,255,.10),
        inset 0 -1px 0 rgba(0,0,0,.12),
        0 6px 24px rgba(0,0,0,.2);
    border-radius: 12px;
    padding: 18px;
}
/* Glaslook auch in den Karten der Unterseiten (Notizen, Gäste): gleiche Optik wie .dash-card. Das ".pc-card" davor
   erhöht die Spezifität gegenüber den Einzelregeln der Seiten. */
.pc-card .nt-item,
.pc-card .nt-settings,
.pc-card .gs-card {
    background: linear-gradient(135deg, rgba(255,255,255,.13) 0%, rgba(15,25,40,.32) 100%);
    backdrop-filter: blur(4px) saturate(130%);
    -webkit-backdrop-filter: blur(4px) saturate(130%);
    border: 0.5px solid rgba(255,255,255,.22);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        inset 1px 0 0 rgba(255,255,255,.10),
        inset 0 -1px 0 rgba(0,0,0,.12),
        0 6px 24px rgba(0,0,0,.2);
    border-radius: 12px;
}
.pc-card .gs-item { background: linear-gradient(135deg, rgba(255,255,255,.09) 0%, rgba(15,25,40,.28) 100%); border: 0.5px solid rgba(255,255,255,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.16); }
.dash-card-title{ font-size:12px; font-weight:700; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.06em; margin-bottom:12px; }

.dash-profile-header{ display:flex; align-items:center; gap:16px; margin:24px 0 20px; }
.dash-profile-avatar-outer{ position:relative; flex-shrink:0; width:76px; height:76px; }
.dash-avatar-wrap{ position:absolute; top:0; left:0; width:68px; height:68px; border-radius:50%; overflow:hidden; border:2px solid rgba(132,212,65,.72); }
.dash-avatar-wrap img{ width:100%; height:100%; object-fit:cover; }
.dash-avatar-flag{ position:absolute; bottom:0; right:0; font-size:24px; line-height:1; z-index:2; }
.dash-profile-info{ flex:1; min-width:0; }
.dash-profile-name{ font-size:22px; font-weight:800; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash-profile-sub{ font-size:14px; color:rgba(255,255,255,.4); margin-top:4px; }

.dash-recent-scroll{ overflow-x:auto; display:flex; gap:16px; padding:2px 2px 4px; }
.dash-recent-item{ display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; cursor:pointer; text-decoration:none; color:inherit; width:72px; }
.dash-recent-avatar-wrap{ position:relative; width:56px; height:56px; display:flex; align-items:center; justify-content:center; }
.dash-recent-avatar-wrap img{ width:56px; height:56px; border-radius:50%; object-fit:cover; }
.dash-recent-name{ font-size:12px; color:rgba(255,255,255,.65); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%; }

.dash-qr-scan-card{ display:flex; align-items:center; gap:14px; text-decoration:none; cursor:pointer; transition:background .15s; }
.dash-qr-scan-card:hover{ background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, rgba(15,25,40,.4) 100%); }
.dash-qr-scan-icon{ flex-shrink:0; width:46px; height:46px; background:rgba(132,212,65,.13); border-radius:13px; display:flex; align-items:center; justify-content:center; }
.dash-qr-scan-icon svg{ width:22px; height:22px; stroke:#84d441; }
.dash-qr-scan-info{ flex:1; min-width:0; }
.dash-qr-scan-title{ font-size:15px; font-weight:600; color:#fff; }
.dash-qr-scan-sub{ font-size:12px; margin-top:2px; color:rgba(255,255,255,.45); }
.dash-qr-scan-arrow{ width:18px; height:18px; flex-shrink:0; stroke:rgba(255,255,255,.25); }

.dash-qr-box{ display:flex; flex-direction:column; align-items:center; padding:16px; gap:8px; }
.dash-qr-img{ width:180px; height:180px; background:#fff; border-radius:12px; padding:8px; }
.dash-qr-label{ font-size:12px; color:rgba(255,255,255,.4); }



/* Uhrzeit und Sendestatus gehoeren an den RECHTEN RAND der Blase.
   flex-end allein reicht dafuer nicht: Es richtet am Textrand aus, und der
   endet seit den zwei Knoepfen 64px vor der Blasenkante — die Zeile stand
   dadurch scheinbar mittig. Der negative Aussenabstand holt sie in den
   reservierten Streifen zurueck, der unten ohnehin frei ist, seit die
   Knoepfe oben sitzen. -52px = 64 (Streifen) - 12 (Abstand zur Kante). */
.message-meta{ margin-top:8px; display:flex; align-items:center; justify-content:flex-end; gap:8px; }
/* Nur Blasen MIT den beiden Knoepfen — siehe app/mobile-chat.php. */
/* Der breite rechte Streifen gehoert NUR zu Blasen, die die beiden Knoepfe
   auch tragen. Vorher hatte JEDE Blase ihn — bei geloeschten Nachrichten
   und Standortkarten stand die Uhrzeit dadurch 65px vom Rand entfernt und
   wirkte eingerueckt, obwohl dort gar kein Knopf sitzt.
   Steht bewusst weiter unten als die .message-Grundregeln, damit es sie
   ueberschreibt. */
.message.has-msg-menu{ padding-right:64px; }
.message.has-msg-menu .message-meta{ margin-right:-52px; }

.message-status{ display:inline-flex; align-items:center; gap:4px; }

.status-dot{ width:7px; height:7px; border-radius:50%; display:inline-block; background:rgba(255,255,255,0.28); }

.message-status-sent .status-dot-1.is-on{ background:rgba(255,255,255,0.62); }

.message-status-delivered .status-dot-1.is-on,
.message-status-delivered .status-dot-2.is-on{ background:rgba(255,255,255,0.62); }

.message-status-read .status-dot-1.is-on,
.message-status-read .status-dot-2.is-on{ background:#4da3ff; box-shadow:0 0 10px rgba(77,163,255,0.28); }

/* Typing Indicator (schreibt gerade...) */

.typing-indicator{ position:absolute; bottom:98px; left:22px; display:flex; align-items:center; gap:6px; min-height:18px; padding:6px 10px; border-radius:14px; background:rgba(0,0,0,0.32); backdrop-filter:blur(6px); z-index:2000; pointer-events:none; }

.typing-dot{ width:8px; height:8px; border-radius:50%; background:#ffffff; opacity:0.35; animation:typingBounce 1.2s infinite ease-in-out; }

.typing-dot:nth-child(2){ animation-delay:0.18s; }

.typing-dot:nth-child(3){ animation-delay:0.36s; }

/* Chat-Header Statuszeile über CSS korrigieren */

.chat-main-top > div > div:last-child > div:last-child { margin-top: 1px !important; position: relative !important; z-index: 9999 !important; opacity: 0.96 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65) !important; }

.chat-user-status { color: #264A23; margin-top: -10px; opacity: 0.96; font-size: 0.95rem; position: relative; z-index: 9999; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65); }


.chat-user-meta { min-width: 0; position: relative; z-index: 200; }

.chat-user-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; position: relative; z-index: 201; }

.chat-user-link { text-decoration: none; color: inherit; }

.chat-user-name { margin: 0; font-size: 1.25rem; line-height: 1.2; }

.chat-user-status { margin-top: 1px; opacity: 0.96; font-size: 0.95rem; position: relative; z-index: 202; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65); }

.typing-indicator-inline{ display:none; align-items:center; gap:6px; min-height:18px; width:fit-content; margin:4px 0 10px 0; padding:8px 12px; border-radius:16px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.06); backdrop-filter:blur(6px); pointer-events:none; position:static !important; left:auto !important; bottom:auto !important; z-index:auto !important; }

/* Call message bubble */
.call-msg-row{ display:flex; justify-content:center; margin:6px 0; }
.call-msg-bubble{ display:inline-flex; align-items:center; gap:10px; padding:8px 16px; border-radius:20px; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1); font-size:13px; color:rgba(255,255,255,0.75); max-width:340px; }
.call-msg-bubble.call-msg-missed{ border-color:rgba(255,80,80,0.25); color:rgba(255,130,130,0.9); }
.call-msg-icon{ font-size:18px; flex-shrink:0; }
.call-msg-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.call-msg-label{ font-weight:600; font-size:13px; white-space:nowrap; }
.call-msg-status{ opacity:0.7; font-size:11px; white-space:nowrap; }
.call-msg-time{ margin-left:auto; opacity:0.4; font-size:11px; white-space:nowrap; padding-left:10px; flex-shrink:0; }
.call-msg-callback{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:26px; height:26px; margin-left:6px; padding:0; border-radius:50%; color:#84d441; background:rgba(132,212,65,.12); border:1px solid rgba(132,212,65,.3); cursor:pointer; transition:background .15s, border-color .15s; }
.call-msg-callback:hover{ background:rgba(132,212,65,.24); border-color:rgba(132,212,65,.5); }
.call-msg-callback svg{ width:14px; height:14px; }

/* ── In-Chat-Suche ─────────────────────────────────────── */
.chat-search-bar{ display:flex; align-items:center; gap:8px; margin-top:10px; padding:7px 12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:12px; }
.chat-search-bar-icon{ color:rgba(255,255,255,.4); flex-shrink:0; }
.chat-search-input{ flex:1; min-width:0; background:none; border:none; outline:none; color:#fff; font-size:14px; padding:4px 0; }
.chat-search-input::placeholder{ color:rgba(255,255,255,.35); }
.chat-search-count{ font-size:12px; color:rgba(255,255,255,.4); white-space:nowrap; flex-shrink:0; min-width:36px; text-align:right; }
.chat-search-nav-btn{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:28px; height:28px; padding:0; border-radius:8px; background:none; border:none; color:rgba(255,255,255,.6); cursor:pointer; transition:background .15s, color .15s; }
.chat-search-nav-btn:hover{ background:rgba(255,255,255,.08); color:#fff; }
mark.chat-search-hl{ background:rgba(255,214,0,.45); color:inherit; border-radius:3px; padding:0 1px; }
mark.chat-search-hl.chat-search-current{ background:#84d441; color:#0a0e12; }
.message.chat-search-date-hl .message-text,
.message.chat-search-date-hl .voice-msg-card,
.message.chat-search-date-hl .message-media{ outline:2px solid rgba(132,212,65,.55); outline-offset:3px; border-radius:8px; }
.message.chat-search-date-hl.chat-search-current .message-text,
.message.chat-search-date-hl.chat-search-current .voice-msg-card,
.message.chat-search-date-hl.chat-search-current .message-media{ outline-color:#84d441; outline-width:3px; }

.chat-scroll-bottom-btn{ position:absolute; right:20px; bottom:14px; z-index:20; display:flex; align-items:center; justify-content:center; width:42px; height:42px; padding:0; border-radius:50%; background:linear-gradient(135deg,#7ED957,#4CAF50); border:none; color:#ffffff; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.4); transition:transform .15s, box-shadow .15s; }
.chat-scroll-bottom-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.5); }
.chat-scroll-bottom-btn svg{ width:22px; height:22px; display:block; }

/* Date separator between days */
.chat-date-separator{ display:flex; align-items:center; gap:10px; margin:16px 8px; }
.chat-date-separator::before,.chat-date-separator::after{ content:''; flex:1; height:1px; background:rgba(255,255,255,0.1); }
.chat-date-separator span{ font-size:11px; color:rgba(255,255,255,0.35); white-space:nowrap; padding:2px 10px; background:rgba(255,255,255,0.05); border-radius:10px; }

/* =========================
   GLOBAL SCROLLBAR (MATCH RIGHT SIDE)
   ========================= */

/* für ALLE Scrollbereiche */
.messages-fixed,
.messages,
.chat-sidebar,
.chat-overview-sidebar { scrollbar-width: thin; scrollbar-color: rgba(132, 212, 65, 0.28) rgba(255,255,255,0.04); }

/* WebKit (Chrome, Safari, Edge) */

.messages-fixed::-webkit-scrollbar,
.messages::-webkit-scrollbar,
.chat-sidebar::-webkit-scrollbar,
.chat-overview-sidebar::-webkit-scrollbar { width:10px; }

.messages-fixed::-webkit-scrollbar-track,
.messages::-webkit-scrollbar-track,
.chat-sidebar::-webkit-scrollbar-track,
.chat-overview-sidebar::-webkit-scrollbar-track { background:rgba(255,255,255,0.04); border-radius:10px; }

.messages-fixed::-webkit-scrollbar-thumb,
.messages::-webkit-scrollbar-thumb,
.chat-sidebar::-webkit-scrollbar-thumb,
.chat-overview-sidebar::-webkit-scrollbar-thumb { background:rgba(132, 212, 65, 0.28); border-radius:10px;  min-height: 60px;   /* 🔥 MACHT DEN GRIFF GRÖSSER */ }

.messages-fixed::-webkit-scrollbar-thumb:hover,
.messages::-webkit-scrollbar-thumb:hover,
.chat-sidebar::-webkit-scrollbar-thumb:hover,
.chat-overview-sidebar::-webkit-scrollbar-thumb:hover { background:rgba(132, 212, 65, 0.45); }

.chat-input-wrap{ padding: 10px 14px; /* 🔥 Abstand zur Kartenkante */ }

.chat-form-sticky{ border-bottom-left-radius: 22px; border-bottom-right-radius: 22px; }

/* =========================
   FIX: CHAT OVERVIEW HEIGHT (MATCH CHAT.PHP)
   ========================= */

.chat-overview-layout{ height: calc(100vh - 170px) !important; min-height: unset !important; overflow: hidden; }

.chat-overview-sidebar{ height: 100% !important; min-height: unset !important; overflow-y: auto; }

.chat-overview-main{ height: 100% !important; min-height: unset !important; display: flex; flex-direction: column; overflow: hidden; }

/* verhindert, dass Inhalt die Card auseinanderzieht */
.chat-overview-main > *{ min-height: 0; }


/* =========================
   CHAT OVERVIEW LOGO
   ========================= */

.chat-overview-logo{ display:flex; justify-content:center; align-items:center; margin-bottom:18px; }

.chat-overview-logo img{ height:130px; width:auto; object-fit:contain; cursor:pointer; transition: transform 0.3s ease, filter 0.3s ease; /* 🔥 echte Kontur + Glow */ filter: drop-shadow(0 0 0 #000) drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000) drop-shadow(0 0 12px rgba(132, 212, 65, 0.35)); }

/* =========================
   LOGO CLICK ZOOM EFFECT
   ========================= */

.chat-overview-logo img.active{ transform: scale(2.8); z-index: 9999;  /* 🔥 Kontur bleibt + stärkerer Glow im Zoom */ filter: drop-shadow(0 0 0 #000) drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000) drop-shadow(0 0 18px rgba(132, 212, 65, 0.45)); }


/* =========================
   SCROLLABLE PAGE CARDS (CONTACTS / SETTINGS)
   ========================= */

/* ❗ WICHTIG: NUR noch scoped auf Settings + Contacts
   ...und NUR auf die aeussere Seitenkarte: ">" statt Leerzeichen.
   Mit dem Nachfahren-Selektor traf "height: calc(100vh - 170px)" auch jede
   Karte INNERHALB der Seitenkarte — Push-Benachrichtigungen, Meine Meldungen,
   Abo verwalten. Jede davon wurde so hoch wie das Fenster, mit riesigen
   Leerflaechen darunter, und man sah nicht mehr, dass weiter unten noch etwas
   kommt. Beide Seiten haben ihre Karte als direktes Kind des Wrappers,
   deshalb ist ">" hier genau richtig. */
.settings-page-wrap > .pc-card,
.contacts-page-wrap > .pc-card{ display:flex; flex-direction:column; height: calc(100vh - 170px); max-height: calc(100vh - 170px); overflow:hidden; position:relative; }

/* Innerer Content */
.settings-page-wrap > .pc-card > *,
.contacts-page-wrap > .pc-card > *{ flex-shrink:0; }

/* Scrollbereich vorbereiten */
.settings-page-wrap > .pc-card,
.contacts-page-wrap > .pc-card{ padding-right:4px; }

/* Karten INNERHALB der Seitenkarte wachsen mit ihrem Inhalt. Explizit
   zurueckgesetzt und nicht bloss weggelassen: Sollte irgendwo sonst noch eine
   Hoehenregel auf .pc-card zielen, gewinnt diese hier. */
.settings-page-wrap > .pc-card .pc-card,
.contacts-page-wrap > .pc-card .pc-card{
    height: auto; max-height: none; overflow: visible;
}

/* 👉 optionaler universeller Scrollcontainer */
.pc-card-inner-scroll{ flex:1; overflow-y:auto; min-height:0; padding-right:6px; }


/* =========================
   FIX: PAGE CARD SPACING (MATCH CHAT)
   ========================= */

.settings-page-wrap .form-wrap.pc-card,
.contacts-page-wrap .form-wrap.pc-card{ margin-top: 20px;}


/* =========================
   FIX: SCROLLBAR FOR PAGE CARDS
   ========================= */

.pc-card-inner-scroll{ scrollbar-width: thin; scrollbar-color: rgba(132, 212, 65, 0.28) rgba(255,255,255,0.04); }

.pc-card-inner-scroll::-webkit-scrollbar{ width:10px; }

.pc-card-inner-scroll::-webkit-scrollbar-track{ background:rgba(255,255,255,0.04); border-radius:10px; }

.pc-card-inner-scroll::-webkit-scrollbar-thumb{ background:rgba(132, 212, 65, 0.28); border-radius:10px; min-height:60px; }

.pc-card-inner-scroll::-webkit-scrollbar-thumb:hover{ background:rgba(132, 212, 65, 0.45); }


/* =========================
   SETTINGS PAGE FIX (MATCH CHAT)
   ========================= */

.settings-page-wrap{ display:flex; justify-content:center; align-items:flex-start; min-height: calc(100vh - 170px); }

/* 🔥 scoped */
.settings-page-wrap .settings-card{ width: min(900px, 100%); max-height: calc(100vh - 170px); overflow: hidden; display:flex; flex-direction:column; }

.settings-page-wrap .settings-scroll{ flex:1; overflow-y:auto; padding-right:6px; }

/* =========================
   SCROLLBAR MATCH CHAT
   ========================= */

.settings-page-wrap .settings-scroll{ scrollbar-width: thin; scrollbar-color: rgba(132, 212, 65, 0.28) rgba(255,255,255,0.04); }

.settings-page-wrap .settings-scroll::-webkit-scrollbar{ width:10px; }

.settings-page-wrap .settings-scroll::-webkit-scrollbar-track{ background:rgba(255,255,255,0.04); border-radius:10px; }

.settings-page-wrap .settings-scroll::-webkit-scrollbar-thumb{ background:rgba(132, 212, 65, 0.28); border-radius:10px; min-height:60px; }

.settings-page-wrap .settings-scroll::-webkit-scrollbar-thumb:hover{ background:rgba(132, 212, 65, 0.45); }

   /* =========================
      GLOBAL CARD STYLE (MATCH CHAT CLARITY)
      ========================= */
.pc-card{ background: rgba(10, 14, 17, 0.65); /* ❌ Blur komplett raus */ backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset, 0 0 18px rgba(132, 212, 65, 0.08); }


   /* =========================
    LOGIN PAGE FIX (PERFECT MATCH CHAT)
    ========================= */

 .login-page-wrap{ display:flex; justify-content:center; align-items:flex-start; min-height: calc(100vh - 170px); margin-top: 30px; }

 .login-card{ width:min(520px, 100%); }


 /* =========================
    REGISTER PAGE FIX (MATCH CHAT)
    ========================= */

 .register-page-wrap{ display:flex; justify-content:center; align-items:flex-start; min-height: calc(100vh - 170px); padding-top:20px; }

 /* Card selbst */
 .register-card{ width: min(600px, 100%); max-height: calc(100vh - 170px); overflow:hidden; display:flex; flex-direction:column; }

 /* Scrollbereich */
 .register-scroll{ flex:1; overflow-y:auto; min-height:0; padding-right:6px; }


 /* =========================
    SCROLLBAR (MATCH CHAT)
    ========================= */

 .register-scroll{ scrollbar-width: thin; scrollbar-color: rgba(132, 212, 65, 0.28) rgba(255,255,255,0.04); }

 .register-scroll::-webkit-scrollbar{ width:10px; }

 .register-scroll::-webkit-scrollbar-track{ background:rgba(255,255,255,0.04); border-radius:10px; }

 .register-scroll::-webkit-scrollbar-thumb{ background:rgba(132, 212, 65, 0.28); border-radius:10px; min-height:60px; }

 .register-scroll::-webkit-scrollbar-thumb:hover{ background:rgba(132, 212, 65, 0.45); }

 /* =========================
    LOGIN ROW FIX (CLEAN SPACING)
    ========================= */

 .login-row{ display:flex; align-items:center; margin-top:16px; }

 /* 🔥 Abstand kommt HIER, nicht mit gap */
 .login-row .btn{ margin-right:24px; }

 /* =========================
    FORGOT PASSWORD (VISIBLE!)
    ========================= */

 .forgot-password-link{ font-size:14px; color:rgba(255,255,255,0.75); text-decoration:none; transition: all 0.25s ease; }

 /* Hover passend zu deinem Neon-Style */
 .forgot-password-link:hover{ color:#84d441; text-shadow:0 0 10px rgba(132, 212, 65, 0.7); }

 /* =========================
   HEADER NAV – GREEN DEFAULT (FIXED)
   ========================= */

/* höhere Spezifität */
.site-header .nav a{
    position:relative; color:rgba(132, 212, 65, 0.75) !important; text-decoration:none; transition: all 0.25s ease; }

/* 🔥 Hover Effekt */
.site-header .nav a:hover{ color:#84d441 !important; text-shadow:0 0 10px rgba(132, 212, 65, 0.7); }

/* =========================
   PRO LEVEL: ACTIVE LINK
   ========================= */

.site-header .nav a.active{ color:#84d441 !important; text-shadow:0 0 12px rgba(132, 212, 65, 0.85); }

/* Registrieren-Button im Header: weiße Schrift auf grünem Hintergrund (lesbar) */
.site-header .nav a.btn,
.site-header .nav a.btn:hover,
.site-header .nav a.btn.active{ color:#ffffff !important; text-shadow:none; }

/* =========================
   OPTIONAL: UNDERLINE EFFECT (HIGH-END)
   ========================= */

.site-header .nav a::after{ content:''; position:absolute; left:0; bottom:-4px; width:0%; height:2px; background:#84d441; transition: width 0.25s ease; }

.site-header .nav a:hover::after{ width:100%; }

.site-header .nav a.active::after{ width:100%; }

/* =========================
   DASHBOARD QR INLINE
   ========================= */

.section .pc-card{ display:block; justify-content:space-between; align-items:center; gap:30px; }

/* linker Inhalt */
.section .pc-card > *:first-child{ flex:1; }

/* rechter QR Bereich */
.dashboard-qr-inline{ flex-shrink:0; }

/* QR etwas skalieren */
.dashboard-qr-inline img{ width:160px; height:auto; }

/* =========================
   QR CARD – MOBILE STYLE DESKTOP
   ========================= */

.qr-card{ position:relative; padding:5px 5px 5px; width:150px; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,0.4); }

/* =========================
   DASHBOARD LAYOUT FIX
   ========================= */

/* QR links */
.dashboard-top-left{ flex-shrink:0; }

/* QR sauber anzeigen */
.qr-direct{ display:flex; align-items:center; justify-content:center; }

.dashboard-top-row { display: flex; align-items: center; gap: 60px; }

.dashboard-top-right-text { flex: 1; max-width: 600px; }


/* =========================================
   CHAT PLUS MENU
========================================= */

.chat-input-shell{
    position:relative;
}

.chat-input-left{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-right:8px;
}




/* =========================================

   ➕ CHAT SUBMENU BUTTON

========================================= */

.chat-plus-btn{

    position:relative;

    width:44px;

    height:44px;

    padding:0;

    border:none;

    background:none;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

}

.chat-plus-btn img,
.chat-plus-btn svg{
    width:30px;
    height:30px;
    object-fit:contain;
    display:block;
    transition: transform 0.28s ease, opacity 0.22s ease;
}

/* ROTATION: + wird beim Öffnen zu × */
.chat-plus-btn.active img{ transform:rotate(180deg); }
.chat-plus-btn .chat-plus-lines{ transition: transform 0.28s ease; transform-origin: 22px 22px; }
.chat-plus-btn.active .chat-plus-lines{ transform: rotate(45deg); transform-origin: 22px 22px; }



/* POPUP */

.chat-plus-menu{
    position:absolute;
    bottom:62px;
    left:0;
    width:260px;

    background:rgba(10,15,20,0.96);

    border:1px solid rgba(255,255,255,0.08);

    border-radius:22px;

    padding:14px;

    display:flex;
    flex-direction:column;
    gap:10px;

    opacity:0;
    visibility:hidden;
    transform:translateY(10px) scale(0.96);

    transition:
        opacity 0.22s ease,
        transform 0.22s ease,
        visibility 0.22s;

    z-index:9999;

    box-shadow:
        0 12px 40px rgba(0,0,0,0.45),
        0 0 20px rgba(0,255,180,0.06);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.chat-plus-menu.open{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
}

/* ITEMS */

.chat-plus-item{
    width:100%;
    border:none;

    background:rgba(255,255,255,0.04);

    color:#ffffff;

    padding:14px 16px;

    border-radius:16px;

    text-align:left;

    font-size:15px;

    cursor:pointer;

    transition:all 0.18s ease;
}

.chat-plus-item:hover{
    background:rgba(255,255,255,0.10);
    transform:translateX(3px);
}

/* MOBILE */

@media (max-width:768px){

    .chat-plus-menu{
        width:230px;
        bottom:58px;
    }

    .chat-plus-item{
        font-size:14px;
        padding:13px 14px;
    }

}






/* .dashboard-qr .qr-name,
.dashboard-qr div:last-child { text-align: center !important; width: 100%; display: block; } */

/* Mobile */

@media (max-width:900px){

.chat-layout{ flex-direction:column; height:auto; }

.chat-sidebar{ width:100%; border-right:none; border-bottom:1px solid #ddd; padding-bottom:10px; }

.message{ max-width:90%; } }

@media (max-width: 900px) {
    .hero,
    .cards,
    .dashboard-grid,
    .chat-layout {grid-template-columns: 1fr; }
    .hero h1 { font-size: 34px; } }

@media (max-width: 640px){ .chat-icon-btn{ width:50px; height:50px; min-width:50px; } .chat-icon-btn svg{ width:28px; height:28px; } }

@media (max-width: 640px){ .chat-input-wrap{ gap:10px; } .chat-send-btn{ width:52px; height:52px; min-width:52px; } .chat-input-shell{ min-height:56px; padding:8px 12px; } .chat-input-shell textarea{ font-size:17px; } }

/* Smartphones Hochformat */

@media screen and (max-width: 768px) and (orientation: portrait){ body{ background-image:url("../images/people-chat_bg_mobile_001.jpg"); background-size:550px; } }

/* optional noch etwas größer auf Mobile */
@media (max-width: 640px){ .chat-record-btn{ width:50px; height:50px; min-width:50px; } .chat-record-btn svg{ width:36px !important; height:36px !important; } }

@media (max-width: 980px){ .pc-intro-content{ grid-template-columns:1fr; } .pc-intro-copy h2{ font-size:34px; } }

@media (max-width: 640px){ .pc-intro-card{ padding:18px; border-radius:22px; } .pc-intro-top{ flex-direction:column; align-items:flex-start; margin-bottom:20px; } .pc-intro-brand{ gap:12px; } .pc-intro-logo{ height:52px; } .pc-intro-brand-text h1{ font-size:28px; } .pc-intro-copy h2{ font-size:28px; } .pc-intro-copy p{ font-size:16px; } .pc-intro-bottom{ flex-direction:column; align-items:flex-start; } .pc-intro-actions{ width:100%; } .pc-intro-btn-secondary, .pc-intro-skip{ width:100%; justify-content:center; } }

@media (max-width: 900px){ .chat-layout-fixed{ grid-template-columns:1fr; min-height:auto; } .chat-main-fixed{ min-height: calc(100vh - 220px); max-height: calc(100vh - 220px); } }

@media (max-width: 900px){ .chat-overview-layout{ grid-template-columns:1fr; min-height:auto; } .chat-overview-sidebar{ min-height:auto; } .chat-overview-main{ min-height:320px; } .chat-overview-placeholder{ padding:22px 16px; } .chat-overview-placeholder h2{ font-size:28px; } .chat-overview-placeholder p{ font-size:16px; } }

/* Mobile */
@media (max-width: 640px){ .chat-record-btn{ right:56px; width:46px; height:46px; min-width:46px; } .chat-send-btn{ width:38px; height:38px; min-width:38px; } }

/* =========================
   MOBILE CHAT MESSAGE FIX
   ========================= */

@media (max-width: 640px){ /* Chatfläche innen etwas sauberer */ .chat-main{ padding:16px !important; } .messages, .messages-fixed{ padding-right:0 !important; overflow-x:hidden !important; } /* Alle Nachrichten dürfen mobil die volle sinnvolle Breite nutzen */ .message, .message.me, .message.other{ max-width:100% !important; min-width:0 !important; width:100% !important; margin-left:0 !important; margin-right:0 !important; align-self:stretch !important; box-sizing:border-box; } /* Optisch trotzdem leicht unterschiedlich ausrichten */ .message.me{ border-bottom-right-radius:6px; } .message.other{ border-bottom-left-radius:6px; } /* Text und Inhalt dürfen nie rauslaufen */ .message-text{ word-wrap:break-word; overflow-wrap:anywhere; } /* Audio / Voice Messages sauber in die Bubble zwingen */ .message audio, .message.me audio, .message.other audio{ display:block; width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box; margin-top:10px; } /* Falls andere Wrapper für Voice-Nachrichten existieren */ .message .audio-player, .message .voice-message, .message .voice-wrap{ width:100% !important; max-width:100% !important; min-width:0 !important; overflow:hidden !important; box-sizing:border-box; } /* Zeitstempel bleibt innerhalb der Bubble */ .message-time{ text-align:right; word-break:break-word; } }

@keyframes typingBounce{ 0%, 80%, 100%{ transform:translateY(0); opacity:0.35; } 40%{ transform:translateY(-5px); opacity:1; } }

/* =========================
   MOBILE: CHAT SIDEBAR AUSBLENDEN
   ========================= */

@media (max-width: 900px){ .chat-layout-fixed{ grid-template-columns: 1fr !important; } .chat-layout-fixed .chat-sidebar{ display: none !important; } }

/* =========================
   MOBILE BACK BUTTON
   ========================= */

.chat-back-mobile{ display:none; margin-bottom:10px; }

.chat-back-mobile a{ display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:10px; background:rgba(255,255,255,0.06); color:#ffffff; font-weight:600; font-size:14px; }

@media (max-width:900px){ .chat-back-mobile{ display:block; } }



@media (max-width: 640px) { .header-inner { flex-direction: column; align-items: flex-start; }

    .form-wrap,
    .contacts-box,
    .chat-sidebar,
    .chat-main,
    .hero { padding: 22px; }
    .hero h1 {
        font-size: 28px; } .contact-row { flex-direction: column; align-items: flex-start; } .message { max-width: 100%; } }

/* =========================
   SOUND PICKER (Settings)
   ========================= */

.sound-picker{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }

.sound-pick-row{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 12px;
    border-radius:10px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.07);
    transition:background 0.15s;
}

.sound-pick-row:has(input:checked){
    background:rgba(132,212,65,0.10);
    border-color:rgba(132,212,65,0.30);
}

.sound-pick-row input[type="radio"]{ width:auto; accent-color:#84d441; cursor:pointer; }

.sound-pick-label{ flex:1; color:rgba(255,255,255,0.85); font-size:14px; cursor:pointer; }

.btn-preview-sound{
    background:rgba(132,212,65,0.15);
    border:1px solid rgba(132,212,65,0.30);
    color:#84d441;
    border-radius:8px;
    padding:5px 12px;
    cursor:pointer;
    font-size:14px;
    line-height:1;
    transition:background 0.15s;
}

.btn-preview-sound:hover{ background:rgba(132,212,65,0.28); }

.btn-preview-sound.playing{
    background:rgba(231,76,60,0.20);
    border-color:rgba(231,76,60,0.40);
    color:#e87070;
}

/* ── Clickable links in chat messages ──────────────────────── */
.chat-link{
    color:#5bc8f5;
    text-decoration:underline;
    text-underline-offset:2px;
    word-break:break-all;
}
.chat-link:hover{ color:#7dd9ff; }

/* ── Link preview card ─────────────────────────────────────── */
.link-preview-card{
    margin-top:7px;
    border-radius:10px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.05);
    max-width:270px;
    cursor:pointer;
    transition:background .15s;
}
.link-preview-card:hover{ background:rgba(255,255,255,.09); }
.lp-inner{
    display:block;
    text-decoration:none;
    color:inherit;
}
.lp-img{
    width:100%;
    max-height:136px;
    object-fit:cover;
    display:block;
}
.lp-media{ position:relative; }
.lp-play{
    position:absolute; left:50%; top:50%; width:46px; height:46px; margin:-23px 0 0 -23px;
    border-radius:50%; background:rgba(0,0,0,.55); border:2px solid rgba(255,255,255,.85);
    pointer-events:none;
}
.lp-play::after{
    content:''; position:absolute; left:17px; top:12px;
    border-left:15px solid #fff; border-top:10px solid transparent; border-bottom:10px solid transparent;
}
.lp-content{
    padding:8px 10px 9px;
}
.lp-domain{
    font-size:10px;
    font-weight:700;
    color:#84d441;
    margin-bottom:3px;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
}
.lp-title{
    font-size:12px;
    font-weight:700;
    color:#e0e0e0;
    line-height:1.35;
    margin-bottom:2px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.lp-desc{
    font-size:11px;
    color:#888;
    line-height:1.4;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.lp-loading{
    padding:9px 12px;
    font-size:11px;
    color:#555;
    font-style:italic;
}

/* ── Upload progress indicator ─────────────────────────── */
.chat-upload-progress {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(18,22,28,.94);
    border: 0.5px solid rgba(255,255,255,.15);
    border-radius: 28px;
    padding: 10px 18px 10px 12px;
    display: none;
    align-items: center;
    gap: 10px;
    z-index: 9999;
    backdrop-filter: blur(10px);
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.chat-upload-progress.visible { display: flex; }
.chat-upload-progress__label  { font-size: 13px; color: rgba(255,255,255,.85); }
.chat-upload-arc-fg {
    stroke-dasharray: 75.4;
    stroke-dashoffset: 75.4;
    transition: stroke-dashoffset .2s linear;
}
/* Desktop file inputs: opacity-hidden so .click() works reliably */
.desktop-file-input {
    position: fixed;
    top: -200px; left: -200px;
    width: 1px; height: 1px;
    opacity: 0; pointer-events: none;
}

/* ── File attachment card (PDF, DOC, etc.) ────────────── */
.chat-file-card {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-radius: 12px; text-decoration: none;
    background: rgba(255,255,255,.08); border: 0.5px solid rgba(255,255,255,.16);
    max-width: 280px; transition: background .15s;
}
.chat-file-card:hover { background: rgba(255,255,255,.14); }
.chat-file-card-icon { font-size: 32px; flex-shrink: 0; line-height: 1; }
.chat-file-card-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.chat-file-card-name {
    font-size: 13px; font-weight: 600; color: rgba(255,255,255,.90);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px;
}
.chat-file-card-type { font-size: 11px; color: rgba(255,255,255,.45); text-transform: uppercase; }

/* ── Sprach-Umschalter (Header, kompaktes Aufklapp-Menü) ──────── */
.lang-switcher { position: relative; display: inline-block; margin-left: 8px; vertical-align: middle; }
.lang-switcher > summary {
    list-style: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 9px; border-radius: 8px;
    font-size: 12px; font-weight: 700; letter-spacing: .3px;
    color: rgba(255,255,255,.85);
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
    transition: background .15s, border-color .15s;
    user-select: none; -webkit-user-select: none; white-space: nowrap;
}
.lang-switcher > summary::-webkit-details-marker { display: none; }
.lang-switcher > summary:hover { background: rgba(255,255,255,.14); }
.lang-pill-flag  { font-size: 15px; line-height: 1; }
.lang-pill-arrow { font-size: 9px; opacity: .7; transition: transform .15s; }
.lang-switcher[open] > summary { background: rgba(255,255,255,.14); border-color: rgba(132,212,65,.5); }
.lang-switcher[open] .lang-pill-arrow { transform: rotate(180deg); }

.lang-menu {
    position: absolute; top: calc(100% + 6px); right: 0;
    min-width: 172px; z-index: 100;
    background: #141a1f;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    padding: 5px;
    max-height: 320px; overflow-y: auto;
}
.lang-item {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px; border-radius: 7px;
    text-decoration: none; color: rgba(255,255,255,.82);
    font-size: 14px; font-weight: 600; white-space: nowrap;
    transition: background .12s;
}
.lang-item:hover { background: rgba(255,255,255,.08); }
.lang-item.active { color: #84d441; }
.lang-item-flag  { font-size: 17px; line-height: 1; }
.lang-item-label { flex: 1; }
.lang-item-code  { font-size: 11px; font-weight: 700; opacity: .5; letter-spacing: .5px; }


/* Schmales Fenster: Die Blase nutzt die volle Breite, daneben ist kein Platz
   mehr. Die Chips wuerden ausserhalb des Bildes landen und von
   overflow-x:hidden verschluckt. Deshalb hier zurueck unter die Blase. */
@media (max-width: 640px) {
    .msg-reactions {
        position: static; flex-wrap: wrap;
        margin-top: 6px;
    }
    .message.me    .msg-reactions { justify-content: flex-end; }
    .message.other .msg-reactions { justify-content: flex-start; }
}

/* Geteilte Notiz / Teamnotiz-Einladung im Chat: anklickbare Karte (siehe pc_notes_chat_card()) */
.notes-chat-card{
    display:flex; flex-direction:column; gap:4px; text-decoration:none; color:inherit;
    padding:10px 12px; border-radius:12px; min-width:200px; max-width:100%;
    background:rgba(132,212,65,.12); border:1px solid rgba(132,212,65,.40);
}
.notes-chat-card:active{ background:rgba(132,212,65,.22); }
.notes-chat-card .ncc-text{ font-weight:600; word-break:break-word; }
.notes-chat-card .ncc-cta{ font-size:12px; font-weight:700; color:#84d441; }

/* Angepinnter Chat: kleines Nadel-Symbol neben dem Menü */
.pc-pin-ico{ font-size:12px; line-height:1; opacity:.85; margin-right:2px; flex-shrink:0; }

/* Kontakte: Karte so breit wie Anrufe/Gruppen (700px) statt der schmalen Formularbreite (520px),
   damit "PCC senden", "Chat starten" und "Kontakt entfernen" nebeneinander passen; bei sehr schmalen
   Fenstern rutschen die Knoepfe in die naechste Zeile statt abgeschnitten zu werden. */
.contacts-page-wrap .form-wrap.pc-card{ max-width:700px; width:100%; margin-left:auto; margin-right:auto; box-sizing:border-box; }
.contacts-page-wrap .contact-row{ flex-wrap:wrap; }
.contacts-page-wrap .contact-row > div[style*="display:flex"]{ flex-wrap:wrap; }