/* Gesprächsleiste (gespraech.js): oben rechts am Rechner, auf dem Handy als Streifen unter der Kopfzeile.
   Farben aus menue.css (Stübi), mit Ersatzwerten, falls die Datei fehlt. */

#gespraech {
  position: fixed; z-index: 22; top: 60px; right: 12px; width: min(360px, calc(100vw - 24px));
  display: flex; flex-direction: column; gap: 6px;
  background: rgba(20, 20, 20, .9); color: #fff; padding: 8px;
  border-left: 4px solid var(--stuebi-gelb, #ffd400);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.gs-kopf { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
#gs-titel { font: 700 16px/1.2 var(--stuebi-titel, var(--font)); text-transform: uppercase; letter-spacing: .4px; min-width: 0; }
.gs-knoepfe { display: flex; gap: 4px; flex-wrap: wrap; }
.gs-knoepfe button {
  display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 4px 8px;
  background: var(--stuebi-gelb, #ffd400); color: #141414; border: 0; border-radius: 0;
  font: 700 13px/1 var(--font);
}
.gs-knoepfe button.aus { background: #3a3a3a; color: #fff; }
.gs-knoepfe button.aus span[aria-hidden] { filter: grayscale(1); opacity: .7; }
.gs-knoepfe button:hover { outline: 2px solid #fff; outline-offset: -2px; }
#gs-verlassen { background: #fff; }
#gs-ton { background: #e5484d; color: #fff; }
#gs-hinweis { margin: 0; font-size: 12.5px; line-height: 1.35; color: #ddd; }
.gs-link { color: var(--stuebi-gelb, #ffd400); font-weight: 700; margin-right: 6px; }

#gs-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; max-height: 62vh; overflow-y: auto; }
.gs-kachel {
  position: relative; aspect-ratio: 4 / 3; background: #2b2b2b; overflow: hidden;
  outline: 3px solid transparent; outline-offset: -3px; transition: outline-color .12s;
}
.gs-kachel.spricht { outline-color: var(--stuebi-gelb, #ffd400); }
.gs-kachel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; opacity: 0; }
.gs-kachel.ich video { transform: scaleX(-1); }   /* eigenes Bild gespiegelt wie ein Spiegel */
.gs-kachel.mit-bild video { opacity: 1; }
.gs-bild {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 800 34px/1 var(--stuebi-titel, var(--font)); color: #141414;
}
.gs-bild::before {
  content: ''; position: absolute; width: 56px; height: 56px; border-radius: 50%; background: var(--stuebi-gelb, #ffd400); z-index: -1;
}
.gs-bild { z-index: 0; isolation: isolate; }
.gs-kachel.mit-bild .gs-bild { display: none; }
.gs-name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px; z-index: 1;
  background: rgba(0, 0, 0, .65); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gs-kachel.verbindet .gs-bild { opacity: .5; }
.gs-kachel.fehler .gs-name { background: #b3261e; }

/* Kopfzeile: Knopf „Nicht stören“ an */
#hud #btn-ruhe[aria-pressed="true"] { background: #e5484d; color: #fff; }

/* Chat: Empfänger links vor dem Eingabefeld */
#chat-form { display: flex; gap: 4px; }
#chat-an {
  flex: none; max-width: 42%; padding: 0 6px; border-radius: 0; font: inherit; font-size: 13px;
  background: rgba(20, 20, 20, .88); color: #fff; border: 1px solid var(--glass-line, rgba(255,255,255,.12));
}
#chat-an.nicht-alle { background: var(--stuebi-gelb, #ffd400); color: #141414; font-weight: 700; }
#chat-form #chat-input { flex: 1; min-width: 0; }
.msg .an { font-size: 11px; font-weight: 700; padding: 0 5px; margin-right: 6px; background: var(--stuebi-gelb, #ffd400); color: #141414; }
.msg.privat .an { background: #8fd3a8; }
.msg.gruppe, .msg.privat { border-left: 3px solid var(--stuebi-gelb, #ffd400); }
.msg.privat { border-left-color: #8fd3a8; }
.msg .who.klickbar { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }

/* ---------- Handy und flache Bildschirme ---------- */
@media (max-width: 720px), (max-height: 500px) {
  #gespraech {
    top: calc(60px + env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right));
    width: auto; padding: 6px; gap: 4px;
  }
  #gs-titel { font-size: 14px; }
  .gs-knoepfe button { min-height: 38px; padding: 4px 9px; }
  .gs-knoepfe .txt { display: none; }
  .gs-knoepfe button { font-size: 18px; }
  #gs-kacheln { display: flex; overflow-x: auto; overflow-y: hidden; max-height: none; }
  .gs-kachel { flex: none; width: 96px; }
  .gs-bild { font-size: 24px; }
  .gs-bild::before { width: 40px; height: 40px; }
  body.im-gespraech #toast, body.im-gespraech #conn { top: auto; bottom: calc(76px + env(safe-area-inset-bottom)); }
  html.touch #chat-an { font-size: 16px; }
}
@media (max-height: 500px) {
  /* Handy quer: Leiste rechts, Kacheln untereinander */
  #gespraech { left: auto; width: 220px; }
  #gs-kacheln { flex-direction: column; overflow-x: hidden; overflow-y: auto; max-height: calc(100vh - 150px); }
  .gs-kachel { width: 100%; }
}

/* Gesprächsanfrage an mich */
#gs-anfragen { position: fixed; z-index: 40; left: 50%; bottom: 76px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; width: min(440px, calc(100vw - 24px)); }
.gs-anfrage {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 14px;
  background: #fff; color: #141414; border: 2px solid #141414; border-left: 8px solid var(--stuebi-gelb, #ffd400);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .4); animation: gs-auf .16s ease-out;
}
@keyframes gs-auf { from { transform: translateY(10px); opacity: 0; } }
.gs-anfrage p { flex: 1 1 100%; margin: 0; font-weight: 700; font-size: 15px; }
.gs-anfrage button { min-height: 40px; min-width: 88px; border: 2px solid #141414; border-radius: 0; font: 800 17px/1 var(--stuebi-titel, var(--font)); text-transform: uppercase; }
.gs-anfrage .ja { background: var(--stuebi-gelb, #ffd400); color: #141414; }
.gs-anfrage .nein { background: #fff; color: #141414; }
.gs-tasten { margin-left: auto; font-size: 12px; color: #5b5b5b; }
html.touch .gs-tasten { display: none; }
@media (max-width: 720px), (max-height: 500px) {
  #gs-anfragen { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .gs-anfrage button { flex: 1; min-height: 48px; }
}