/* ============================================================================
   DESIGN „GLAS" — Chat (chat.php, beide Rollen)
   ----------------------------------------------------------------------------
   Die Regeln des Chats stehen im <style>-Block von chat.php und bleiben dort
   (klassisch sieht aus wie immer). Hier werden sie überschrieben: Kontakte als
   Glas-Zeilen, Nachrichten als Blasen (eigene im Verlauf, fremde aus Glas), die
   Eingabe als Kapsel mit rundem Sende-Knopf.

   Feste Farben der Seite (#fff, #1f8a4c, rgba(0,0,0,…)) sind durch Token ersetzt.
   Ausnahme wie überall: #fff als Schrift auf dem Verlauf.

   Die Schale (.chat-shell) bekommt Fläche, Kante und Schatten schon in 00-grund.css.
   ============================================================================ */

html[data-design="glas"] .chat-shell { border-radius: 28px; }
html[data-design="glas"] .chat-list { border-right-color: var(--line); }
html[data-design="glas"] .chat-list-head { padding-bottom: var(--s-8); border-bottom: 0; }
html[data-design="glas"] .chat-list-head h1 { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
html[data-design="glas"] .chat-search { padding-top: var(--s-4); border-bottom: 0; }
/* 16 px: Darunter zoomt iOS beim Antippen in die Seite. */
html[data-design="glas"] .chat-search input { min-height: 44px; border-color: var(--line); background: var(--surface); font-size: 16px; }

/* --- Kontaktliste: jede Person eine Glas-Zeile --- */
html[data-design="glas"] .chat-contacts { display: flex; flex-direction: column; gap: var(--s-6); padding: var(--s-4) var(--s-10) var(--s-12); }
html[data-design="glas"] .chat-contact {
    flex: 0 0 auto; min-height: 64px; padding: var(--s-10) var(--s-12);
    border: 1px solid var(--glas-kante); border-radius: 20px; background: var(--glas-stark);
    transition: transform .2s var(--feder), background .2s, border-color .2s;
}
html[data-design="glas"] .chat-contact:hover { border-color: var(--line-2); background: var(--surface); }
html[data-design="glas"] .chat-contact:active { transform: scale(0.985); }
html[data-design="glas"] .chat-contact.active { border-color: transparent; background: var(--accent-soft); }
html[data-design="glas"] .chat-contact-preview { font-size: 13px; }
html[data-design="glas"] .chat-badge { background: var(--verlauf); }

/* --- Unterhaltung --- */
html[data-design="glas"] .chat-conv-head { border-bottom-color: var(--line); background: transparent; }
html[data-design="glas"] .chat-back {
    flex: 0 0 auto; width: 40px; height: 40px; padding: 0; border-radius: 50%;
    background: var(--paper-2); color: var(--ink); font-size: 24px; line-height: 36px; text-align: center;
}
html[data-design="glas"] .chat-conv-status { font-family: var(--font-sans); }
html[data-design="glas"] .chat-messages { background: transparent; background-image: none; }

/* Blasen: fremde aus Glas mit der Ecke unten links, eigene im Verlauf mit der Ecke unten rechts. */
html[data-design="glas"] .chat-bubble { flex: 0 0 auto; padding: var(--s-10) var(--s-14); border-radius: 20px; font-size: 15px; box-shadow: var(--shadow); }
html[data-design="glas"] .chat-bubble.them {
    border: 1px solid var(--glas-kante); border-radius: 20px 20px 20px 6px; background: var(--glas-stark); color: var(--ink);
}
html[data-design="glas"] .chat-bubble.me {
    border-radius: 20px 20px 6px 20px; background: var(--verlauf); color: #fff; box-shadow: 0 14px 26px -18px var(--accent);
}
/* Uhrzeit und „bearbeitet" in voller Deckkraft: Abgeschwächt lagen sie in der eigenen Blase
   bei 2,2–3,6:1. */
html[data-design="glas"] .chat-time { font-family: var(--font-sans); font-size: 11px; font-variant-numeric: tabular-nums; opacity: 1; }
html[data-design="glas"] .bubble-edited { font-size: 11px; opacity: 1; }
/* Gelesen: volle Deckkraft in der Farbe der Blase statt Hellblau — das trägt auf dem Verlauf nicht. */
html[data-design="glas"] .bubble-ticks.read { color: inherit; opacity: 1; }
html[data-design="glas"] .chat-date-sep span { background: var(--paper-2); color: var(--ink-3); font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.02em; }
/* „⋯" an der eigenen Nachricht — am Handy der einzige Weg zu Bearbeiten und Löschen: 40 px.
   Links neben der Blase ist dafür immer Platz (die Blase ist höchstens 84 % breit). Das Menü
   hängt am RECHTEN Rand der Blase: Bei einer kurzen Blase ragte es sonst über den Rand. */
html[data-design="glas"] .bubble-act-btn { top: 0; left: -42px; width: 40px; height: 40px; border-color: var(--glas-kante); background: var(--glas-stark); font-size: 18px; }
html[data-design="glas"] .bubble-act-menu { top: 44px; left: auto; right: 0; border-color: var(--glas-kante); border-radius: 16px; }
html[data-design="glas"] .bubble-act-menu button { min-height: 44px; white-space: nowrap; }
html[data-design="glas"] .bubble-edit-input { border-radius: 12px; font-size: 16px; }
html[data-design="glas"] .bubble-edit-bar button { min-height: 36px; border-radius: 999px; }
html[data-design="glas"] .bubble-edit-bar .be-save { background: var(--surface); color: var(--ink); }

/* Zeit-Vorschlag */
html[data-design="glas"] .chat-proposal { border: 1px solid var(--accent); border-radius: 22px; background: var(--glas-stark); box-shadow: var(--shadow); }
html[data-design="glas"] .chat-prop-banner { border-bottom-color: var(--accent-soft); font-family: var(--font-sans); letter-spacing: 0.06em; }
html[data-design="glas"] .chat-prop-row .k { font-family: var(--font-sans); }
html[data-design="glas"] .chat-prop-row .v { font-variant-numeric: tabular-nums; }
html[data-design="glas"] .chat-prop-actions button { min-height: 44px; padding: 0 var(--s-14); border-radius: 999px; white-space: nowrap; }
/* Grün mit der Schrift der Gegenseite: hell auf dunklem Grün, im Dunkeln umgekehrt. */
html[data-design="glas"] .chat-prop-accept { background: var(--success-2); color: var(--paper); }
html[data-design="glas"] .chat-prop-withdraw { color: var(--warning); }
html[data-design="glas"] .chat-prop-status { font-family: var(--font-sans); }
html[data-design="glas"] .chat-prop-status.accepted { color: var(--success-2); }
html[data-design="glas"] .chat-prop-status.declined { color: var(--warning); }

/* --- Eingabe: eine Kapsel, darin Vorschlag-Knopf, Feld und runder Sende-Knopf --- */
html[data-design="glas"] .chat-composer {
    margin: 0 var(--s-10) var(--s-10); padding: var(--s-6); gap: var(--s-6);
    border: 1px solid var(--line-2); border-radius: 28px; background: var(--surface);
    transition: border-color .2s, box-shadow .2s;
}
html[data-design="glas"] .chat-composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
html[data-design="glas"] .chat-composer textarea {
    min-height: 44px; padding: var(--s-10) var(--s-6); border: 0; border-radius: 0; background: transparent;
    font-size: 16px; line-height: 1.45; box-shadow: none;
}
html[data-design="glas"] .chat-composer textarea:focus { border: 0; outline: none; box-shadow: none; }
html[data-design="glas"] .chat-composer textarea::placeholder { color: var(--ink-4); }
html[data-design="glas"] .chat-prop-btn {
    width: 44px; height: 44px; border: 0; background: var(--paper-2); color: var(--ink-2);
    transition: transform .2s var(--feder), background .2s, color .2s;
}
html[data-design="glas"] .chat-prop-btn:hover { background: var(--accent-soft); color: var(--accent-2); }
html[data-design="glas"] .chat-send-btn {
    width: 44px; height: 44px; background: var(--verlauf); color: #fff; box-shadow: 0 12px 22px -12px var(--accent);
    transition: transform .2s var(--feder), filter .2s, opacity .2s;
}
html[data-design="glas"] .chat-send-btn:hover { filter: brightness(1.07); transform: scale(1.06); }
html[data-design="glas"] .chat-send-btn:active { transform: scale(0.95); }
html[data-design="glas"] .chat-send-btn:disabled { opacity: 0.4; box-shadow: none; filter: none; transform: none; }
html[data-design="glas"] .chat-prop-btn:disabled { opacity: 0.4; }

/* Formular „Zeit-Vorschlag": eine Glas-Karte über der Kapsel. Am kleinen Handy ist die
   Schale niedriger als Kopf + Formular + Kapsel: Das Formular darf dann schrumpfen und
   rollt in sich (min-height: 0, overflow) — sonst läge „Vorschlag senden" außerhalb. */
html[data-design="glas"] .chat-proposal-form {
    flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    margin: 0 var(--s-10) var(--s-8); border: 1px solid var(--glas-kante); border-radius: 22px; background: var(--glas-stark);
    box-shadow: var(--shadow);
}
/* Kopf, Nachrichten und Kapsel behalten ihre Höhe bzw. geben zuerst nach. */
html[data-design="glas"] .chat-conv-head { flex: 0 0 auto; }
html[data-design="glas"] .chat-composer { flex: 0 0 auto; }
html[data-design="glas"] .chat-messages { min-height: 0; }
html[data-design="glas"] .chat-proposal-form .field input { min-height: 44px; font-size: 16px; }
html[data-design="glas"] .chat-proposal-form .field label { font-size: 11px; }
html[data-design="glas"] .chat-proposal-form .btn { margin-top: var(--s-10); }
html[data-design="glas"] .chat-prop-close { width: 40px; height: 40px; border-radius: 50%; background: var(--paper-2); color: var(--ink-2); }

/* --- Kanal „Produktionsplanung" ---
   In der Liste steht er oben wie jede andere Zeile; ihn kennzeichnet allein der Kreis im
   Verlauf mit dem Symbol (keine Person, kein Kürzel). Im Kanal trägt jede fremde Nachricht
   ihren Absender (Kreis + Name), eine Antwort an eine Aushilfe ihr „an …". */
html[data-design="glas"] .chat-avatar-symbol { background: var(--verlauf); color: #fff; }
html[data-design="glas"] .bubble-von { gap: var(--s-6); margin-bottom: var(--s-6); font-size: 13px; }
html[data-design="glas"] .bubble-von .pkreis { width: 24px; height: 24px; font-size: 10px; }
html[data-design="glas"] .bubble-an { color: var(--ink-3); opacity: 1; }
html[data-design="glas"] .chat-bubble.me .bubble-an { color: inherit; }
/* Meldung des Assistenten: ein leises Etikett und ein schmaler Strich am Rand — kein Alarm. */
html[data-design="glas"] .bubble-marke { color: var(--accent-2); font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.04em; opacity: 1; }
html[data-design="glas"] .chat-bubble.me .bubble-marke { color: inherit; }
html[data-design="glas"] .chat-bubble.chat-meldung.them { border-left: 1px solid var(--glas-kante); box-shadow: inset 3px 0 0 var(--accent), var(--shadow); }
/* Der Teil einer Meldung nur für die Planung: zweiter Block unter dem Text, leise abgesetzt. */
html[data-design="glas"] .bubble-nur-planung { border-top-color: var(--line); font-size: 14px; }
html[data-design="glas"] .bubble-nur-planung-marke { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.04em; }
/* „An Anna antworten" (nur Planung): eine kleine Kapsel links neben der Uhrzeit, 40 px hoch. */
html[data-design="glas"] .bubble-antwort {
    min-height: 40px; padding: 0 var(--s-14); border-radius: 999px; background: var(--accent-soft); color: var(--accent-2);
    font-size: 13px; transition: transform .2s var(--feder), background .2s;
}
html[data-design="glas"] .bubble-antwort:active { transform: scale(0.96); }
html[data-design="glas"] .chat-bubble .chat-meta { gap: var(--s-8); }
/* „Antwort an …" über der Kapsel: dieselbe Form, damit beides zusammengehört. */
html[data-design="glas"] .chat-antwort {
    flex: 0 0 auto; margin: 0 var(--s-10) var(--s-6); padding: var(--s-2) var(--s-4) var(--s-2) var(--s-16);
    border: 1px solid var(--glas-kante); border-radius: 22px; background: var(--accent-soft); color: var(--accent-2); font-size: 14px;
}
html[data-design="glas"] .chat-antwort-zu { width: 40px; height: 40px; border-radius: 50%; }
/* Nicht gesendet: eigene, gestrichelte Blase mit „Erneut senden" und „Verwerfen" (je 40 px). */
html[data-design="glas"] .chat-bubble.me.chat-ungesendet {
    border: 1px dashed var(--accent); background: var(--glas-stark); color: var(--ink); box-shadow: none;
}
html[data-design="glas"] .chat-bubble.me.chat-ungesendet .bubble-marke { color: var(--accent-2); }
html[data-design="glas"] .chat-bubble.me.chat-ungesendet .bubble-an { color: var(--ink-3); }
html[data-design="glas"] .bubble-fehler { font-size: 13px; }
html[data-design="glas"] .bubble-ungesendet-knoepfe button {
    border-color: var(--line-2); background: var(--surface); color: var(--ink);   /* --glas-kante wäre hell auf Weiß unsichtbar */
    transition: transform .2s var(--feder), filter .2s;
}
html[data-design="glas"] .bubble-ungesendet-knoepfe .bu-erneut { border-color: transparent; background: var(--verlauf); color: #fff; }
html[data-design="glas"] .bubble-ungesendet-knoepfe button:active { transform: scale(0.96); }
/* „Ältere Nachrichten laden" über dem Verlauf. */
html[data-design="glas"] .chat-aeltere {
    min-height: 40px; border-color: var(--glas-kante); background: var(--glas-stark); color: var(--ink-2);
    transition: transform .2s var(--feder), border-color .2s;
}
html[data-design="glas"] .chat-aeltere:hover { border-color: var(--line-2); }
html[data-design="glas"] .chat-aeltere:active { transform: scale(0.97); }

/* Höhe der Schale: vom eigenen Anfang bis über die Leiste unten. Wo sie anfängt, misst
   chat.php (--chat-oben; ohne Skript: Kopf 74 + Abstand 18) — über der Seite kann ein
   Hinweis stehen. Die Seite selbst rechnet mit der klassischen Leiste: Hier läge die
   Eingabe sonst dahinter. */
html[data-design="glas"] .chat-shell {
    height: calc(100vh - var(--chat-oben, 92px) - var(--leiste-unten) - var(--s-24));
    height: calc(100dvh - var(--chat-oben, 92px) - var(--leiste-unten) - var(--s-24));
}
@media (max-width: 860px) {
    html[data-design="glas"] .chat-shell {
        height: calc(100vh - var(--chat-oben, 92px) - var(--leiste-unten) - var(--s-12));
        height: calc(100dvh - var(--chat-oben, 92px) - var(--leiste-unten) - var(--s-12));
        min-height: 340px;
    }
    html[data-design="glas"] .chat-shell.view-conversation {
        height: calc(100vh - var(--chat-oben, 92px) - var(--leiste-unten) - var(--s-12));
        height: calc(100dvh - var(--chat-oben, 92px) - var(--leiste-unten) - var(--s-12));
    }
    html[data-design="glas"] .chat-bubble { max-width: 84%; }
}

@media (prefers-reduced-motion: reduce) {
    html[data-design="glas"] .chat-contact,
    html[data-design="glas"] .chat-prop-btn,
    html[data-design="glas"] .chat-send-btn,
    html[data-design="glas"] .bubble-antwort,
    html[data-design="glas"] .chat-aeltere,
    html[data-design="glas"] .bubble-ungesendet-knoepfe button,
    html[data-design="glas"] .chat-composer { transition: none; }
}