/* lunix.css — externe Stylesheet-Ebene fuer Lunix / Claudette.
   ------------------------------------------------------------------
   Wird NACH der eingebauten Basis-CSS (inline in app.py) geladen und
   ueberschreibt sie. Neue oder geaenderte Optik hier eintragen — danach
   genuegt ein Browser-Refresh (KEIN App-Neustart noetig).
   Gilt fuer beide Instanzen (privat + LAS), da gemeinsamer Code.

   Vorgehen beim Restyling:
   - Farben/Radien/Abstaende zentral ueber die Variablen unten steuern.
   - Einzelne Komponenten gezielt ueber ihre Basis-Selektoren ueberschreiben
     (z.B. .message.assistant { ... }).
   ------------------------------------------------------------------ */

:root {
  /* Aktuelles Theme — hier zentral anpassbar */
  --bg:      #1a1a2e;   /* Seitenhintergrund        */
  --panel:   #16213e;   /* Header/Eingabe/Assistent  */
  --panel-2: #0f3460;   /* Buttons/User-Blase/Rahmen */
  --accent:  #e94560;   /* Akzent (Senden/aktiv)     */
  --text:    #e0e0e0;   /* Haupttext                 */
  --muted:   #a8b2d8;   /* gedaempfter Text          */
  --radius:  12px;      /* Ecken-Rundung             */
}

/* --- Erste Politur --- */

/* Gruppen-Titel der Befehls-Leiste heller + kraeftiger (statt gedaempftem Grau) */
.cmd-group {
  color: var(--muted);
  font-weight: 700;
  opacity: .95;
}

/* --- Kompakte Icon-Leiste: nur Icons + Gruppen-Titel, Label/Beschreibung per Hover --- */
.cmdbar-body { flex: 0 0 88px; }                 /* schmale Icon-Spalte -> viel Platz fuer Output */
.cmd-group   { text-align: center; font-size: 10px; }
.cmd-item    { position: relative; padding: 9px 6px; text-align: center; }
.cmd-item .ci { display: block; width: auto; margin: 0; font-size: 17px; opacity: .95; }
.cmd-item .cl { display: none; }                 /* Label im Ruhezustand versteckt */

/* Label/Beschreibung erscheinen als natives Tooltip (title-Attribut) beim Hover —
   robust, kein Clipping durch die scrollende Icon-Spalte. */

/* Kleine Bildschirme (Handy): Labels dauerhaft sichtbar, Spalte breit */
@media (max-width: 768px) {
  .cmdbar-body { flex: 0 0 300px; }
  .cmd-group   { text-align: left; font-size: 11px; }
  .cmd-item    { text-align: left; padding: 8px 10px; }
  .cmd-item .ci { display: inline-block; width: 1.5em; margin-right: 7px; font-size: 13px; }
  .cmd-item .cl { display: inline; }
  .cmd-item .cl .cb-hint { display: none; }
  .cmd-item:hover .cl { position: static; transform: none; margin: 0; padding: 0;
    background: none; border: none; box-shadow: none; min-width: 0; font-weight: 400; }
}

/* Dunkles, themen-konformes Tooltip fuer die Icon-Leiste (ersetzt das native weisse) */
#cmdTip {
  position: fixed; display: none; z-index: 500; max-width: 260px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--accent); border-radius: 8px;
  padding: 8px 11px; font-size: 13px; line-height: 1.35;
  box-shadow: 0 6px 22px rgba(0,0,0,.55); pointer-events: none;
}
#cmdTip b { color: #fff; }
#cmdTip .th { margin-top: 4px; font-size: 12px; opacity: .8; }

/* Sprach-Schalter (Bediener / Claudette) in der Eingabe-Toolbar */
.toolbar-btn.vsw { font-size: 11px; padding: 4px 8px; }
.toolbar-btn.vsw.on  { color: #48bb78; }   /* aktiv (senden / spricht) */
.toolbar-btn.vsw.off { color: #a8b2d8; opacity: .8; }  /* alternative Stellung, klar lesbar */

/* Writer-Suche: Treffer-Hervorhebung (dunkles Theme); aktueller Treffer im Akzent */
#wrap mark { background: #e9c046; color: #1a1a2e; border-radius: 3px; padding: 0 1px; }
#wrap mark.cur { background: var(--accent); color: #fff; box-shadow: 0 0 0 2px var(--accent); }

/* Mobile-Header: alles in EINER Zeile halten. Der Titel kuerzt sich mit "…",
   die Icons (Menue, 🪟, ⚡) und der Online-Status bleiben inline -> kein Umbruch,
   damit das Writer-Icon nicht mehr unter "Chat – Claudette" rutscht. */
@media (max-width: 768px) {
  .header { flex-wrap: nowrap; gap: 8px; }
  .header .hamburger, .header .cmd-toggle, .header #writerBtn { flex: 0 0 auto; }
  .header-title { flex: 1 1 auto; min-width: 0; font-size: 15px;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .header-status { margin: 0 !important; flex: 0 0 auto; white-space: nowrap; }
}