/* ==========================================================================
   MaeliOS Kobold   -   usr/lib/chat.css
   --------------------------------------------------------------------------
   Chat im Stil eines Messengers der Neunziger: grüner Kopf,
   Kontaktleiste links, weißes Nachrichtenfenster, eckige Knöpfe und
   die Blume als Statuspunkt. Die Farben sind absichtlich fest und
   folgen nicht dem Farbschema - der Chat soll wie ein eigenes
   Programm aus jener Zeit aussehen.
   ========================================================================== */

.chat{
  --chat-face:#d4d0c8; --chat-face2:#e8e6e1; --chat-linie:#a9a49b;
  --chat-tinte:#000; --chat-blau:#00309c; --chat-gruen:#5a8f2e; --chat-gruen2:#3f6b1d;
  position:absolute; inset:0; display:flex; flex-direction:column; min-height:0;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top, 0px);
  padding-bottom:env(safe-area-inset-bottom, 0px);
  container-type:inline-size;
  background:var(--chat-face); color:var(--chat-tinte);
  overflow:hidden;
  font:12px/1.45 Tahoma, Verdana, 'DejaVu Sans', sans-serif;
}

/* ------------------------------------------------------------- Kopfzeile */
.chat-kopf{
  flex:0 0 auto; display:flex; align-items:center; gap:10px;
  padding:7px 10px; color:#fff;
  background:linear-gradient(180deg, #6aa73a 0%, var(--chat-gruen) 55%, var(--chat-gruen2) 100%);
  border-bottom:1px solid #2c4a12;
}
.chat-logo{
  display:flex; align-items:center; gap:7px;
  font:700 17px/1 'Trebuchet MS', Verdana, sans-serif;
  letter-spacing:.01em; text-shadow:1px 1px 0 rgba(0,0,0,.35);
}
/* Sprechblase als Zeichen: weißer Kasten mit Zipfel nach unten links. */
.chat-logozeichen{
  position:relative; width:19px; height:14px; border-radius:4px 4px 4px 1px;
  background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.25);
}
.chat-logozeichen::before{
  content:''; position:absolute; left:4px; top:4px; width:3px; height:3px;
  border-radius:50%; background:#5a8f2e;
  box-shadow:5px 0 0 #5a8f2e, 10px 0 0 #5a8f2e;
}
.chat-logozeichen::after{
  content:''; position:absolute; left:0; bottom:-5px;
  border:5px solid transparent; border-top-color:#fff; border-left:0;
}
.chat-wer{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.chat-wer b{ font-size:12.5px; }
.chat-abstand{ flex:1; }

.chat-blume{
  width:13px; height:13px; flex:0 0 auto; border-radius:50%;
  background:
    radial-gradient(circle at 50% 18%, #8fd44f 0 32%, transparent 34%),
    radial-gradient(circle at 82% 50%, #8fd44f 0 32%, transparent 34%),
    radial-gradient(circle at 50% 82%, #8fd44f 0 32%, transparent 34%),
    radial-gradient(circle at 18% 50%, #8fd44f 0 32%, transparent 34%),
    radial-gradient(circle at 50% 50%, #f2c200 0 26%, transparent 30%);
}
.chat-blume.aus{ filter:grayscale(1) brightness(1.15); opacity:.55; }

.chat-ton, .chat-pfeil{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 8px; cursor:pointer; font:11px/1 Tahoma, Verdana, sans-serif;
  color:#12300a; background:#d9dcce;
  border:1px solid #2c4a12; border-radius:2px;
  box-shadow:inset 1px 1px 0 #fff, inset -1px -1px 0 #8a8f7c;
}
.chat-ton:hover, .chat-pfeil:hover{ background:#e9ecdf; }
.chat-ton.aus{ color:#6a6a6a; background:#c3c6b9; }

/* Menue und Ausstieg im Kiosk. Im Fenster stehen sie in der Titelzeile. */
.chat-menue, .chat-voll{
  display:none; align-items:center; justify-content:center; flex:0 0 auto;
  width:30px; height:26px; padding:0; cursor:pointer;
  font:14px/1 Tahoma, Verdana, sans-serif; color:#12300a; background:#d9dcce;
  border:1px solid #2c4a12; border-radius:2px;
  box-shadow:inset 1px 1px 0 #fff, inset -1px -1px 0 #8a8f7c;
}
.chat-menue:hover, .chat-voll:hover{ background:#e9ecdf; }
.win.kiosk .chat-menue, .win.kiosk .chat-voll{ display:inline-flex; }

/* -------------------------------------------------------------- Körper */
.chat-koerper{ flex:1; display:flex; min-height:0; }

/* Kontaktleiste */
.chat-links{
  width:214px; flex:0 0 auto; display:flex; flex-direction:column; min-height:0;
  background:var(--chat-face2); border-right:1px solid var(--chat-linie);
}
.chat-liste{ flex:1; overflow-y:auto; padding:4px 3px 8px; }
.chat-titel{
  display:flex; align-items:center; gap:5px;
  margin:8px 4px 3px; font:700 10.5px/1 Tahoma, sans-serif;
  text-transform:uppercase; letter-spacing:.05em; color:#5c5a54;
}
.chat-titel::after{ content:''; flex:1; height:1px; background:var(--chat-linie); }

.chat-zeile-k{
  display:flex; align-items:center; gap:6px; padding:3px 6px;
  cursor:default; outline:none; border:1px solid transparent;
}
.chat-zeile-k:hover{ background:#f4f3ef; border-color:#d8d4cb; }
.chat-zeile-k.on{ background:#316ac5; color:#fff; border-color:#24509a; }
.chat-pname{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-badge{
  min-width:16px; height:15px; padding:0 4px; border-radius:2px;
  background:#c0392b; color:#fff; font:700 10px/15px Tahoma, sans-serif; text-align:center;
}
.chat-stumm-knopf{
  width:15px; height:15px; padding:0; border:0; background:transparent;
  cursor:pointer; font-size:10px; line-height:15px; opacity:.35; color:inherit;
}
.chat-zeile-k:hover .chat-stumm-knopf, .chat-zeile-k.stumm .chat-stumm-knopf{ opacity:.9; }
.chat-stumm-knopf:hover{ opacity:1; }
.chat-knopfreihe{ padding:6px; border-top:1px solid var(--chat-linie); display:flex; gap:5px; }
.chat-leer{ padding:6px 8px; font-size:11px; color:#6f6c65; line-height:1.35; }

/* Nachrichtenfenster */
.chat-rechts{ flex:1; display:flex; flex-direction:column; min-width:0; background:#fff; }
.chat-kopf2{
  flex:0 0 auto; display:flex; align-items:center; gap:8px;
  padding:6px 10px; background:var(--chat-face);
  border-bottom:1px solid var(--chat-linie);
}
.chat-kopf2 b{ font-size:12.5px; }
.chat-status{ font-size:11px; color:#5c5a54; }
.chat-status.fehler{ color:#b02020; }
.chat-kopf2 .chat-knopf{ padding:3px 9px; }
.chat-kopfstumm.an{ color:#7a776f; }
.chat-kopfverlassen{
  padding:3px 10px; cursor:pointer; font:700 11px/1.4 Tahoma, sans-serif;
  color:#7a1010; background:#e8dede; border:1px solid #a08080; border-radius:2px;
  box-shadow:inset 1px 1px 0 #fff, inset -1px -1px 0 #b09090;
}
.chat-kopfverlassen:hover{ background:#f0d6d6; }
.chat-stumm-zeichen{ margin-left:auto; font-size:10px; opacity:.8; }
.chat-abzeichen{ margin-left:auto; font-size:11px; color:#5c5a54; }

.chat-verlauf{
  flex:1; overflow-y:auto; padding:8px 10px; background:#fff; color:#000;
  font:12px/1.5 Tahoma, Verdana, sans-serif;
}
.chat-zeile{ display:flex; gap:6px; align-items:baseline; padding:1px 0; }
.chat-zeile.ich{ background:#f2f7ea; }
.chat-zeit{ flex:0 0 auto; font:10.5px/1.4 'Lucida Console', monospace; color:#8a877f; }
.chat-name{ flex:0 0 auto; max-width:140px; font-weight:700; color:var(--chat-blau);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-zeile.ich .chat-name{ color:#2f6b12; }
.chat-text{ flex:1; min-width:0; overflow-wrap:anywhere; word-break:break-word; white-space:pre-wrap; }
.chat-text .chat-link{ color:var(--chat-blau); text-decoration:underline; }

.chat-beitreten{
  flex:0 0 auto; padding:2px 8px; cursor:pointer;
  font:700 10.5px/1.4 Tahoma, sans-serif; color:#fff; background:var(--chat-gruen);
  border:1px solid #2c4a12; border-radius:2px;
  box-shadow:inset 1px 1px 0 #9ed064;
}
.chat-beitreten:hover{ background:#6ba338; }

/* Eingabe */
.chat-eingabe{ flex:0 0 auto; background:var(--chat-face); border-top:1px solid var(--chat-linie); }
.chat-feld{
  display:block; width:100%; box-sizing:border-box; resize:none;
  height:56px; padding:6px 8px; font:12px/1.45 Tahoma, Verdana, sans-serif;
  color:#000; background:#fff; border:1px solid var(--chat-linie);
  box-shadow:inset 1px 1px 0 #9b968c;
}
.chat-feld:focus{ outline:0; border-color:#316ac5; }
.chat-feld:disabled{ background:var(--chat-face2); color:#6d6a63; cursor:not-allowed; }

/* Chat im Schalter oben rechts aus: Leiste unter dem Kopf, Eingabe gesperrt. */
.chat-aus-leiste{
  flex:0 0 auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:6px 10px; font:11.5px/1.4 Tahoma, Verdana, sans-serif;
  color:#4a2a00; background:#ffe9b8; border-bottom:1px solid #d8b268;
}
.chat-aus-leiste[hidden]{ display:none; }
.chat-aus-an{
  padding:3px 10px; cursor:pointer; font:700 11.5px/1.4 Tahoma, sans-serif;
  color:#fff; background:var(--chat-gruen); border:1px solid #2c4a12; border-radius:2px;
  box-shadow:inset 1px 1px 0 #9ed064, inset -1px -1px 0 #33590f;
}
.chat-aus-an:hover{ background:#6ba338; }
.chat.chat-aus .chat-senden,
.chat.chat-aus .chat-leiste{ opacity:.5; }
.chat-leiste{ display:flex; align-items:center; gap:6px; padding:5px 6px; }
.chat-senden{
  padding:4px 14px; cursor:pointer; font:700 11.5px/1.4 Tahoma, sans-serif;
  color:#fff; background:var(--chat-gruen); border:1px solid #2c4a12; border-radius:2px;
  box-shadow:inset 1px 1px 0 #9ed064, inset -1px -1px 0 #33590f;
}
.chat-senden:hover{ background:#6ba338; }
.chat-senden:active{ box-shadow:inset -1px -1px 0 #9ed064, inset 1px 1px 0 #33590f; }
.chat-knopf{
  padding:3px 9px; cursor:pointer; font:11px/1.4 Tahoma, sans-serif; color:#000;
  background:var(--chat-face); border:1px solid #808080; border-radius:2px;
  box-shadow:inset 1px 1px 0 #fff, inset -1px -1px 0 #6b6b6b;
}
.chat-knopf:hover{ background:#e4e1da; }
.chat-knopf:active{ box-shadow:inset -1px -1px 0 #fff, inset 1px 1px 0 #6b6b6b; }
.chat-zeichen{ margin-left:auto; font:10.5px/1 'Lucida Console', monospace; color:#6f6c65; }

/* Einlade-Popup */
.chat-pop{
  position:absolute; right:10px; bottom:96px; width:246px; z-index:4;
  background:var(--chat-face); border:1px solid #808080;
  box-shadow:2px 2px 0 rgba(0,0,0,.35), inset 1px 1px 0 #fff;
}
.chat-pop.kopf-leer{ display:none; }
.chat-pop-titel{
  padding:4px 8px; font:700 11px/1.4 Tahoma, sans-serif; color:#fff;
  background:linear-gradient(180deg, #2a63b8, #184a92);
}
.chat-pop-inhalt{ padding:6px; display:flex; flex-direction:column; gap:4px; }
.chat-poptitel{
  padding:2px 2px 0; font:700 10px/1.4 Tahoma, sans-serif; text-transform:uppercase;
  letter-spacing:.05em; color:#5c5a54;
}
.chat-spiel{
  display:flex; align-items:center; gap:7px; width:100%; padding:5px 7px; cursor:pointer;
  font:11.5px/1.4 Tahoma, sans-serif; text-align:left; color:#000;
  background:#f4f3ef; border:1px solid var(--chat-linie);
}
.chat-spiel:hover{ background:#e2efd3; border-color:var(--chat-gruen); }
.chat-spiel.aus{ cursor:not-allowed; color:#8a877f; background:#e8e6e1; }
.chat-spiel small{ margin-left:auto; font-size:10px; color:#7a776f; }
.chat-pop-fuss{ padding:0 8px 7px; font-size:10.5px; color:#5c5a54; line-height:1.35; }


/* ------------------------------------------------- Schmaler Bildschirm
   Ein-Spalten-Ansicht: Räume und Leute füllen die Breite, das Gespräch
   ersetzt die Liste. Der Pfeil im Gesprächskopf führt zurück. */
.chat-zurueck{
  display:none; flex:0 0 auto; width:26px; height:26px; padding:0;
  align-items:center; justify-content:center; cursor:default;
  font:700 15px/1 Tahoma, Verdana, sans-serif; color:#000;
  background:var(--chat-face2); border:1px solid var(--chat-linie);
  border-radius:2px;
}
.chat-zurueck:hover{ background:#fff; }

@container (max-width:520px){
  .chat-links{ width:100%; border-right:0; }
  .chat-rechts{ display:none; }
  .chat.chat-offen .chat-links{ display:none; }
  .chat.chat-offen .chat-rechts{ display:flex; }
  .chat-zurueck{ display:inline-flex; }
  .chat-wer{ display:none; }
  .chat-kopf{ padding:8px 10px; gap:8px; }
  .chat-ton{ padding:7px 10px; min-height:34px; }
  .chat-menue, .chat-voll{ width:36px; height:34px; font-size:15px; }
  .chat-zeile-k{ padding:8px; font-size:13px; }
  .chat-kopf2{ padding:6px 8px; }
  .chat-zurueck{ width:34px; height:34px; font-size:16px; }
  .chat-blume{ width:15px; height:15px; }
  .chat-stumm-knopf{ width:24px; height:24px; line-height:24px; font-size:13px; }
  .chat-badge{ height:18px; line-height:18px; font-size:11px; }
  .chat-knopfreihe{ padding:8px; gap:8px; }
  .chat-knopfreihe .chat-knopf{ flex:1; padding:9px 6px; }
  .chat-verlauf{ padding:10px; font-size:13px; }
  .chat-feld{ height:64px; font-size:13px; }
  .chat-leiste{ flex-wrap:wrap; padding:6px; }
  .chat-senden, .chat-leiste .chat-knopf{ padding:8px 12px; }
  .chat-zeichen{ width:100%; margin-left:0; text-align:right; }
}