/* ============================================================
   Custom Styling für Chainlit Action-Buttons (Quiz-UI)
   Verifiziert gegen Chainlit 2.11.1 Frontend-Quellcode:
   - Alle Action-Buttons sind <button class="... text-muted-foreground ...">
     (shadcn/ui Button, variant="ghost", size="sm")
   - Buttons mit cl.Action(icon=...) enthalten zusätzlich ein <svg>
     -> genutzt, um Navigations-Buttons (Start/Weiter) optisch von den
        Quiz-Antwort-Buttons (A/B/C/D, ohne Icon) zu unterscheiden.
   ============================================================ */

/* --- Basis: ALLE Action-Buttons generell aufwerten ---
   text-muted-foreground ist die feste Klasse, die Chainlit jedem
   Action-Button mitgibt (siehe ActionButton.tsx). Diese Klasse wird
   aber AUCH von Header-Icons (Neuer Chat, Dark-Mode-Toggle) verwendet -
   deshalb zusaetzlich auf den Actions-Wrapper-Container eingeschränkt
   (div.flex.items-center.flex-wrap ist eindeutig der Action-Button-
   Container unterhalb einer Nachricht, kein Header-Element). */
div.flex.items-center.flex-wrap > button.text-muted-foreground {
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  padding: 0.65rem 1.5rem !important;
  height: auto !important;
  min-height: 24px !important;
  border-radius: 10px !important;
  margin: 0.3rem !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

div.flex.items-center.flex-wrap > button.text-muted-foreground:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35) !important;
  filter: brightness(1.08);
  color: #ffffff !important;
}

div.flex.items-center.flex-wrap > button.text-muted-foreground:active {
  transform: translateY(0) scale(0.98);
}

div.flex.items-center.flex-wrap > button.text-muted-foreground:focus-visible {
  outline: 3px solid #ffd166 !important;
  outline-offset: 2px;
}

div.flex.items-center.flex-wrap > button.text-muted-foreground:disabled {
  opacity: 0.5 !important;
  transform: none !important;
}

/* --- Quiz-Antwort-Buttons (A / B / C / D) ---------------------
   Diese Buttons haben KEIN Icon -> kein <svg>-Kind.
   Kräftiges Blau, quadratisch-kompakt, gut antippbar. */
div.flex.items-center.flex-wrap > button.text-muted-foreground:not(:has(svg)) {
  background-color: #2563eb !important;
  min-width: 32px !important;
  font-size: 1.0rem !important;
}

div.flex.items-center.flex-wrap > button.text-muted-foreground:not(:has(svg)):hover {
  background-color: #1d4ed8 !important;
}

/* --- Navigations-Buttons (Quiz starten / Weiter) --------------
   Diese Buttons haben ein Icon -> enthalten ein <svg>.
   Kräftiges Grün, breiter, deutlich als "geht weiter"-Aktion erkennbar. */
div.flex.items-center.flex-wrap > button.text-muted-foreground:has(svg) {
  background-color: #16a34a !important;
  min-width: 200px !important;
  padding: 0.75rem 1.8rem !important;
}

div.flex.items-center.flex-wrap > button.text-muted-foreground:has(svg):hover {
  background-color: #15803d !important;
}

div.flex.items-center.flex-wrap > button.text-muted-foreground:has(svg) svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* --- Kleine Bildschirme: Touch-Target-Größe erhalten --- */
@media (max-width: 480px) {
  div.flex.items-center.flex-wrap > button.text-muted-foreground {
    font-size: 1rem !important;
    padding: 0.55rem 1.1rem !important;
    min-height: 46px !important;
  }
  div.flex.items-center.flex-wrap > button.text-muted-foreground:has(svg) {
    min-width: 0 !important;
    width: 100%;
  }
}