/* Werkbank-Chat – klassischer Messenger-Look (Kontaktliste + Gesprächsfenster) */
:root{
  --desk1:#3d6e8f; --desk2:#1d3c55;
  --rahmen:#8aa3bd; --fenster:#eef3f8; --panel:#ffffff; --ink:#1b2430; --leise:#66758a; --linie:#c9d5e2;
  --titel1:#4f86c0; --titel2:#1f4d80; --titelink:#fff;
  --hover:#e1ebf6; --aktiv:#c8dcf3; --gruppe:#dbe6f2;
  --ich:#c0392b; --du:#1f5fa8; --akzent:#2e8b3d; --akzent2:#257232; --gelb:#f0b429; --rot:#c8372d; --blau:#2a7fd4;
  --schatten:0 10px 30px rgba(10,30,55,.35);
  --schrift:"Segoe UI",Tahoma,Verdana,-apple-system,system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{--desk1:#14283a; --desk2:#0a1520; --rahmen:#33485e; --fenster:#1a2532; --panel:#121b25; --ink:#e3e9f0; --leise:#91a0b3;
    --linie:#2b3b4d; --titel1:#2e5a8a; --titel2:#16314f; --hover:#203145; --aktiv:#284466; --gruppe:#1f2d3d; --ich:#ff7a6b; --du:#7fb6ff;}
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:linear-gradient(160deg,var(--desk1),var(--desk2));color:var(--ink);font:14px/1.45 var(--schrift);-webkit-text-size-adjust:100%}
button,input,textarea{font:inherit;color:inherit}
.versteckt{display:none!important}
.leise{color:var(--leise);font-size:12px}
.fehler{color:var(--rot);font-size:13px;min-height:1em;margin:6px 0}
.hinweis{background:#fff6d6;color:#5b4a0c;border:1px solid #ecd98f;border-radius:6px;padding:8px 10px;font-size:13px}

/* ---------- Fenster-Rahmen ---------- */
.fenster{background:var(--fenster);border:1px solid var(--rahmen);border-radius:8px;box-shadow:var(--schatten);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.titel{display:flex;align-items:center;gap:8px;min-height:34px;padding:0 6px 0 10px;color:var(--titelink);font-weight:600;font-size:13.5px;
  background:linear-gradient(180deg,var(--titel1),var(--titel2));border-bottom:1px solid rgba(0,0,0,.25);text-shadow:0 1px 1px rgba(0,0,0,.35);flex:none;user-select:none}
.titel-logo{width:18px;height:18px;flex:none;border-radius:4px;background:url(/icon-192.png) center/cover}
.titel-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.titel-unter{font-weight:400;opacity:.85;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.titelknopf{margin-left:auto;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;border-radius:5px;min-width:26px;height:24px;cursor:pointer;font-size:14px;line-height:1}
.titelknopf:hover{background:rgba(255,255,255,.25)}
.fenster-inhalt{padding:16px;overflow-y:auto}
.gross-logo{width:46px;height:46px;border-radius:10px;background:url(/icon-192.png) center/cover;box-shadow:0 2px 6px rgba(0,0,0,.2)}

/* ---------- Knöpfe & Felder ---------- */
.knopf{border:1px solid var(--rahmen);border-radius:6px;padding:7px 14px;cursor:pointer;background:linear-gradient(#fff,#e4ebf3);color:#1b2430;font-size:13.5px}
.knopf:hover{background:linear-gradient(#fff,#d7e3f0)}
.knopf.haupt{background:linear-gradient(#3fa64f,var(--akzent2));border-color:#1f6a2b;color:#fff;font-weight:600;text-shadow:0 1px 1px rgba(0,0,0,.3)}
.knopf.haupt:hover{background:linear-gradient(#47b558,#1f6a2b)}
.knopf.gelb{background:linear-gradient(#ffd25e,#e5a50f);border-color:#b98100;color:#3b2b00}
.knopf.rot{background:linear-gradient(#e0574c,#b02a21);border-color:#8f1f18;color:#fff}
.knopf.breit{width:100%;margin-top:6px;padding:9px}
.kleinknopf{border:1px solid var(--linie);background:var(--panel);border-radius:6px;padding:5px 9px;font-size:12.5px;cursor:pointer}
.kleinknopf:hover{background:var(--hover)}
label{display:block;font-size:12.5px;color:var(--leise);margin:10px 0}
label input,label textarea{display:block;width:100%;margin-top:4px;padding:8px 10px;border:1px solid var(--rahmen);border-radius:5px;background:var(--panel);font-size:15px;box-shadow:inset 0 1px 2px rgba(0,0,0,.08)}
label input:focus,textarea:focus{outline:2px solid #7fb0e6;outline-offset:0}

/* ---------- Anmelden ---------- */
.vollbild{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px}
.anmeldefenster{width:360px;max-width:100%}
.anmelde-kopf{display:flex;gap:12px;align-items:center;margin-bottom:6px}

/* ---------- Hauptbereich ---------- */
#app{display:grid;grid-template-columns:300px minmax(0,1fr);gap:14px;height:100vh;height:100dvh;padding:14px;max-width:1280px;margin:0 auto}

/* Kontaktliste */
.ichkopf{display:flex;align-items:center;gap:10px;padding:10px 12px;background:linear-gradient(var(--panel),var(--fenster));border-bottom:1px solid var(--linie)}
.ichtext{display:flex;flex-direction:column;min-width:0}
.pausebalken{background:var(--gelb);color:#3b2b00;font-size:12.5px;padding:5px 12px}
.kontakte{flex:1;overflow-y:auto;background:var(--panel);padding-bottom:6px}
.gruppe-kopf{display:flex;align-items:center;gap:6px;padding:5px 10px;margin-top:2px;background:var(--gruppe);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);
  font-weight:600;font-size:12.5px;cursor:pointer;user-select:none}
.gruppe-kopf .dreieck{display:inline-block;width:10px;transition:transform .15s;color:var(--leise)}
.gruppe-kopf.zu .dreieck{transform:rotate(-90deg)}
.gruppe-kopf .anzahl{color:var(--leise);font-weight:400}
.kontakt{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 22px;cursor:pointer;border-left:3px solid transparent}
.kontakt:hover{background:var(--hover)}
.kontakt.aktiv{background:var(--aktiv);border-left-color:var(--titel2)}
.kontakt.offline .kname{color:var(--leise)}
.ktext{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.kname{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ktext .leise{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zaehler{background:var(--rot);color:#fff;border-radius:9px;font-size:11px;font-weight:700;padding:0 6px;line-height:17px}
.kontakt.blinkt .status-icon{animation:blink 1s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
.listenfuss{border-top:1px solid var(--linie);padding:8px;display:flex;flex-direction:column;gap:6px;background:var(--fenster);padding-bottom:max(8px,env(safe-area-inset-bottom))}
.statusknopf{display:flex;align-items:center;gap:8px;width:100%;border:1px solid var(--rahmen);border-radius:6px;padding:7px 10px;background:linear-gradient(var(--panel),var(--fenster));cursor:pointer;font-weight:600}
.statusknopf:hover{background:var(--hover)}
.statusknopf .pfeil{margin-left:auto;color:var(--leise)}
.fussknoepfe{display:flex;gap:6px}
.fussknoepfe .kleinknopf:last-child{flex:1}

/* Status-Symbole (glänzende Punkte) */
.status-icon{display:inline-block;width:13px;height:13px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,#fff 0 12%,#c4ccd6 30%,#8b97a6 100%);box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.status-icon.online{background:radial-gradient(circle at 35% 30%,#fff 0 12%,#7ee08a 30%,#1f9a33 100%)}
.status-icon.abwesend{background:radial-gradient(circle at 35% 30%,#fff 0 12%,#ffd36b 30%,#d08a00 100%)}
.status-icon.unsichtbar{background:transparent;box-shadow:inset 0 0 0 2px #8b97a6}
.status-icon.gruppe{border-radius:3px;background:radial-gradient(circle at 35% 30%,#fff 0 12%,#9cc3ee 30%,#2f6eb5 100%)}

.avatar{width:36px;height:36px;flex:none;border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:14px;box-shadow:inset 0 -8px 12px rgba(0,0,0,.15)}

/* Gesprächsfenster */
.chattitelleiste .zurueck{display:none;margin:0 4px 0 0;font-size:20px}
.chattitelleiste .status-icon{box-shadow:0 0 0 1px rgba(255,255,255,.6)}
.verlauf{flex:1;overflow-y:auto;padding:10px 14px;background:var(--panel)}
.leer{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--leise);text-align:center;font-size:13.5px}
.tag{display:flex;align-items:center;gap:10px;color:var(--leise);font-size:11.5px;margin:12px 0 4px}
.tag::before,.tag::after{content:"";flex:1;border-top:1px solid var(--linie)}
.eintrag{padding:1px 0}
.eintrag .kopf{display:flex;align-items:baseline;gap:8px;margin-top:8px}
.eintrag .wer{font-weight:700;font-size:13.5px}
.eintrag.ich .wer{color:var(--ich)} .eintrag.du .wer{color:var(--du)}
.eintrag .zeit{font-size:11px;color:var(--leise)}
.eintrag .inhalt{padding-left:12px;white-space:pre-wrap;overflow-wrap:anywhere;position:relative}
.eintrag .haken{font-size:11px;color:var(--leise);margin-left:6px;white-space:nowrap}
.eintrag .haken.gelesen{color:var(--blau)}
.eintrag img{display:block;max-width:280px;width:100%;border-radius:6px;border:1px solid var(--linie);margin:4px 0;cursor:zoom-in;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;background:var(--hover);min-height:80px}
.mehr{display:block;margin:4px auto 8px}
.tippt{font-size:12px;color:var(--leise);font-style:italic;padding:2px 14px;min-height:20px;background:var(--panel);border-top:1px solid var(--linie)}
.eingabe{background:var(--fenster);border-top:1px solid var(--linie);padding:6px 10px 10px;padding-bottom:max(10px,env(safe-area-inset-bottom))}
.werkzeuge{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.werkzeug{border:1px solid transparent;background:none;border-radius:5px;padding:3px 8px;cursor:pointer;font-size:13px}
.werkzeug:hover{border-color:var(--linie);background:var(--panel)}
.werkzeug-hinweis{margin-left:auto;font-size:11px;color:var(--leise)}
.eingabezeile{display:flex;gap:8px;align-items:stretch}
.eingabezeile textarea{flex:1;resize:none;border:1px solid var(--rahmen);border-radius:5px;padding:7px 10px;font-size:15px;max-height:160px;background:var(--panel);box-shadow:inset 0 1px 2px rgba(0,0,0,.08)}
.sende{min-width:90px}
.smileys{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:2px;background:var(--panel);border:1px solid var(--linie);border-radius:6px;padding:6px;margin-bottom:6px;max-height:150px;overflow-y:auto}
.smileys button{border:0;background:none;font-size:20px;padding:3px;border-radius:5px;cursor:pointer}
.smileys button:hover{background:var(--hover)}

/* Menü, Toasts, Dialoge */
.menue{position:fixed;z-index:20;background:var(--panel);border:1px solid var(--rahmen);border-radius:7px;box-shadow:var(--schatten);padding:5px;width:276px}
.menue button{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;padding:8px 10px;border-radius:5px;cursor:pointer;text-align:left}
.menue button:hover{background:var(--hover)}
.menue small{color:var(--leise);font-size:11px;margin-left:auto}
.menue label{margin:6px 10px 8px}
.toasts{position:fixed;right:16px;bottom:16px;z-index:50;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--rahmen);border-left:4px solid var(--akzent);border-radius:6px;box-shadow:var(--schatten);padding:9px 12px;font-size:13px;animation:hoch .25s ease-out}
@keyframes hoch{from{transform:translateY(20px);opacity:0}}
.fensterhinter{position:fixed;inset:0;background:rgba(5,15,30,.5);z-index:30;display:flex;align-items:center;justify-content:center;padding:16px}
.dialog{width:460px;max-width:100%;max-height:90vh}
.dialog h3{margin:16px 0 6px;font-size:14px}
.zeile{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 0;border-top:1px solid var(--linie)}
.zeile .knoepfe{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.zeile .knopf{padding:5px 9px;font-size:12.5px}
.reihe{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.schluesselbox{background:var(--panel);border:1px dashed var(--akzent);border-radius:6px;padding:12px;white-space:pre-wrap;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;user-select:all}
.haekchenliste label{display:flex;align-items:center;gap:8px;margin:6px 0;color:var(--ink);font-size:14px}
.haekchenliste input{width:auto;margin:0;box-shadow:none}
.tabs{display:flex;gap:2px;margin:-16px -16px 14px;padding:8px 10px 0;background:var(--gruppe);border-bottom:1px solid var(--rahmen)}
.tabs button{border:1px solid transparent;border-bottom:0;background:none;border-radius:6px 6px 0 0;padding:6px 14px;cursor:pointer;margin-bottom:-1px}
.tabs button.an{background:var(--fenster);border-color:var(--rahmen);font-weight:600}

.bildgross{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.93);display:flex;align-items:center;justify-content:center;overflow:auto;touch-action:pinch-zoom pan-x pan-y}
.bildgross img{max-width:96vw;max-height:90vh;transition:transform .2s;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.bildgross.zoom img{transform:scale(2.3);cursor:zoom-out}
.bildgross .hint{position:fixed;bottom:max(14px,env(safe-area-inset-bottom));left:0;right:0;text-align:center;color:#bbb;font-size:12px}

/* Handy: Liste und Gespräch nacheinander, ohne Rand */
@media (max-width:760px){
  #app{grid-template-columns:1fr;padding:0;gap:0}
  #app .fenster{border-radius:0;border:0;box-shadow:none}
  #app.zeige-chat aside{display:none}
  #app:not(.zeige-chat) section#chat{display:none}
  .titel{padding-top:env(safe-area-inset-top);min-height:calc(42px + env(safe-area-inset-top))}
  .chattitelleiste .zurueck{display:block}
  .werkzeug-hinweis{display:none}
  .kontakt{padding-top:8px;padding-bottom:8px}
  .toasts{left:16px;right:16px;bottom:auto;top:calc(52px + env(safe-area-inset-top))}
}
.dialog h2{font-size:16px;margin:0 0 8px}