/* ════════════════════════════════════════════════════════════════════════════
   KI-Assistent – Widget-Styles  +  Hell-Modus (Light Theme)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Hell-Modus („Sonnenmodus"): überschreibt die dunklen :root-Variablen ──────
   Höhere Spezifität als :root (html.kf-light) + später geladen → gewinnt.

   SONNENTAUGLICH aufgerüstet (Vorbild Google-Maps-Tagesdesign): In praller Sonne
   überleben nur maximale Leuchtdichte-Kontraste. Deshalb:
   - nahezu weiße Flächen + fast schwarzer Text (≥ 12:1),
   - KEINE blassen Grautöne: text-muted von #7c8aa0 (~3:1, draußen unlesbar)
     auf #42556e (~7:1) angehoben,
   - kräftige, DUNKLERE Signalfarben (Grün/Rot/Amber/Akzent) – die hellen
     Dark-Theme-Töne (#22c55e/#f59e0b) haben auf Weiß nur ~2:1,
   - deutlich sichtbare Ränder statt Hauch-Linien (Alpha 0.10 → 0.30), weil
     Schatten im Sonnenlicht optisch verschwinden.                                */
html.kf-light {
  --bg-primary:   #f4f6fa;
  --bg-secondary: #ffffff;
  --bg-card:      #ffffff;
  --bg-hover:     #e7edf6;
  --bg-active:    #d8e2f0;

  --text-primary:   #0b1220;
  --text-secondary: #2f3e52;
  --text-muted:     #42556e;
  --text-inverse:   #ffffff;

  /* Signal-/Akzentfarben: dunklere, satte Töne für Weiß-Kontrast (Buttons mit
     weißer Schrift UND farbiger Text auf hellem Grund bleiben beide lesbar). */
  --accent:       #4338ca;
  --accent-hover: #3730a3;
  --accent-glow:  rgba(67, 56, 202, 0.22);
  --green:        #15803d;
  --green-glow:   rgba(21, 128, 61, 0.20);
  --red:          #b91c1c;
  --red-glow:     rgba(185, 28, 28, 0.18);
  --amber:        #92600a;
  --amber-glow:   rgba(146, 96, 10, 0.20);

  --glass:        rgba(15, 23, 42, 0.05);
  --glass-border: rgba(15, 23, 42, 0.30);
  --glass-hover:  rgba(15, 23, 42, 0.09);

  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.14);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.16);
  --shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.20);

  /* ── HELL-MODUS-ALIASSE (Pilot-Fund 2026-07-14 „Felder/Elemente schwarz") ──
     Viele JS-Inline-Styles nutzen VARIABLEN-NAMEN, die die Palette oben NICHT
     definiert (var(--border,#dunkel), var(--text-dim,…) …). Ist der Name
     undefiniert, gewinnt im Hell-Modus der DUNKLE Inline-Fallback → schwarze
     Kästen/Ränder auf Weiß. Diese Aliasse definieren genau jene Namen auf HELLE
     Werte → alle var-basierten Stellen kippen ohne Einzel-Edits. NUR im
     Hell-Modus; Dunkelmodus nutzt weiter den Inline-Fallback (unverändert). */
  --border:     var(--glass-border);
  --text:       var(--text-primary);
  --text-dim:   var(--text-muted);
  --muted:      var(--text-muted);
  --bg:         var(--bg-primary);
  --bg-input:   var(--bg-secondary);
  --surface:    var(--bg-card);
  --surface-2:  var(--bg-hover);
  --line:       var(--glass-border);
  --card:       var(--bg-card);
  --panel:      var(--bg-card);
  --warning:    var(--amber);
  --success:    var(--green);
  --danger:     var(--red);
}
html.kf-light body { background: var(--bg-primary); color: var(--text-primary); }

/* Schwebender Öffnen-Button (.kf-ai-fab) ENTFERNT – der Assistent ist nur noch
   über das Funktionen-Menü erreichbar (überlagerte sonst den Kassieren-Button). */

/* ── Gezielte Bereichs-Textgröße (KI: set_text_size) ──────────────────────────
   appearance.js setzt --kf-tz-<bereich> auf root; der jeweilige Container wird
   damit ge-„zoom"-t (Text + Bereich größer). Default 1 = unverändert.
   Neuer Bereich: hier Regel + in appearance.js (REGIONS) + Prompt ergänzen.      */
#articleInfoPopup { zoom: var(--kf-tz-allergens, 1); }   /* Allergen-/Artikel-Info-Fenster */
#paymentModal     { zoom: var(--kf-tz-payment, 1); }     /* Bezahlfenster */
.cart-panel       { zoom: var(--kf-tz-cart, 1); }        /* Warenkorb (gesamt) */
.ts-grid          { zoom: var(--kf-tz-tables, 1); }      /* Tischplan (Kachel-Raster) */
/* Einzelne Warenkorb-Elemente (gezielt) */
.cart-item__qty                      { zoom: var(--kf-tz-cartqty, 1); }    /* +/− Mengen-Knöpfe + Anzahl */
.cart-item__price, .cart-item__unit  { zoom: var(--kf-tz-cartprices, 1); } /* Zeilensumme + Einzelpreis */
.cart-item__name                     { zoom: var(--kf-tz-cartnames, 1); }  /* Produktnamen */
/* Schrift in den Produktkacheln (Name + Preis; Kachel wächst dank min-height/overflow:visible) */
.product-card__name, .product-card__price { zoom: var(--kf-tz-products, 1); }

/* ── Chat-Panel ────────────────────────────────────────────────────────────── */
.kf-ai-panel {
  position: fixed;
  right: 22px;
  bottom: 92px;
  width: 380px;
  max-width: calc(100vw - 44px);
  height: 560px;
  max-height: calc(100vh - 120px);
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 9001;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.kf-ai-panel.kf-ai-open { display: flex; }

.kf-ai-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--glass-border);
}
.kf-ai-header__title { font-weight: 700; color: var(--text-primary); font-size: 15px; flex: 1; }
.kf-ai-header__sub { color: var(--text-muted); font-size: 12px; font-weight: 500; }
.kf-ai-close {
  background: transparent; border: none; color: var(--text-secondary);
  font-size: 22px; cursor: pointer; line-height: 1; padding: 4px 8px; border-radius: 8px;
}
.kf-ai-close:hover { background: var(--bg-hover); color: var(--text-primary); }

.kf-ai-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kf-ai-msg { max-width: 86%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.kf-ai-msg--user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.kf-ai-msg--bot  { align-self: flex-start; background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--glass-border); border-bottom-left-radius: 4px; }
.kf-ai-msg--error { align-self: flex-start; background: var(--red-glow); color: var(--text-primary); border: 1px solid var(--red); }

/* Tipp-Indikator */
.kf-ai-typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; }
.kf-ai-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); animation: kfAiBlink 1.2s infinite both; }
.kf-ai-typing span:nth-child(2) { animation-delay: .2s; }
.kf-ai-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes kfAiBlink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* ── Vorschau-Karte für kosmetische Aktionen ───────────────────────────────── */
.kf-ai-action {
  align-self: stretch;
  background: var(--bg-card);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 12px;
}
.kf-ai-action__label { font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; }
.kf-ai-action__value { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; }
.kf-ai-action__hint { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.kf-ai-action__btns { display: flex; gap: 8px; }
.kf-ai-btn {
  flex: 1; padding: 9px 10px; border-radius: 10px; font-size: 13px; font-weight: 600;
  cursor: pointer; border: 1px solid var(--glass-border); background: var(--bg-hover); color: var(--text-primary);
}
.kf-ai-btn--apply { background: var(--accent); color: #fff; border-color: var(--accent); }
.kf-ai-btn--apply:hover { background: var(--accent-hover); }
.kf-ai-btn:disabled { opacity: .5; cursor: default; }

/* ── Eingabezeile ──────────────────────────────────────────────────────────── */
.kf-ai-input {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--glass-border);
  background: var(--bg-card);
}
.kf-ai-input textarea {
  flex: 1; resize: none; height: 42px; max-height: 120px; padding: 10px 12px;
  border-radius: 12px; border: 1px solid var(--glass-border);
  background: var(--bg-secondary); color: var(--text-primary); font: inherit; font-size: 14px;
}
.kf-ai-input textarea:focus { outline: none; border-color: var(--accent); }
.kf-ai-send {
  width: 42px; height: 42px; border-radius: 12px; border: none; cursor: pointer;
  background: var(--accent); color: #fff; font-size: 18px; flex-shrink: 0;
}
.kf-ai-send:hover { background: var(--accent-hover); }
.kf-ai-send:disabled { opacity: .5; cursor: default; }
.kf-ai-mic {
  width: 42px; height: 42px; border-radius: 12px; cursor: pointer; flex-shrink: 0;
  border: 1px solid var(--glass-border); background: var(--bg-secondary);
  color: var(--text-primary); font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, color .15s;
}
.kf-ai-mic:hover { border-color: var(--accent); }
.kf-ai-mic--on {
  background: #ef4444; border-color: #ef4444; color: #fff;
  animation: kf-ai-mic-pulse 1.2s ease-in-out infinite;
}
@keyframes kf-ai-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .5); }
  50%      { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

@media (max-width: 480px) {
  .kf-ai-panel { right: 12px; left: 12px; bottom: 84px; width: auto; max-width: none; height: calc(100vh - 110px); }
}