/*
 * GUYCOLLE bexio Services — Panel-Theme
 *
 * Eigenstaendig. Das frühere Package `guycollegmbh/filament-theme` ist ausgebaut, damit
 * entfallen auch dessen Vorgaben (0px-Radius, Schattenfreiheit, dunkle Sidebar) und die
 * `!important`-Kaskade, mit der sie zurueckgenommen werden mussten.
 *
 * Formensprache nach Sneat: heller Seitenhintergrund, runde Karten mit weichem Schatten,
 * helle Sidebar mit gefuellter Pille, schwebende Topbar, weich getoente Badges, luftige
 * Tabellen. Markenfarbe bleibt GUYCOLLE-Blau.
 *
 * Zur Farbe, weil es nicht offensichtlich ist: #00AEEF traegt keine weisse Schrift.
 * Kontrast 2,5:1, gefordert sind 4,5:1. Gefuellte Flaechen mit weissem Text nutzen darum
 * #0077A8 (5,0:1), der aktive Verlauf laeuft von #005E87 (6,8:1) dorthin. Das reine
 * #00AEEF bleibt Akzent fuer Raender, Icons und Fokusringe.
 *
 * Farbpalette und Schrift setzt `AdminPanelProvider` ueber Filaments eigene API. Hier steht
 * nur, was Filament nicht ueber Tokens abbildet: Form, Schatten, Flaechen.
 */

:root {
    /* Flaechen */
    --gc-bg:            #f5f5f9;
    --gc-surface:       #ffffff;
    --gc-border:        #d9dee3;

    /* Schrift */
    --gc-heading:       #566a7f;
    --gc-body:          #697a8d;
    --gc-muted:         #a1acb8;

    /* Marke */
    --gc-primary:       #00aeef;  /* Akzent, Raender, Icons, Fokus */
    --gc-primary-solid: #0077a8;  /* gefuellte Flaechen mit weisser Schrift (AA) */
    --gc-primary-deep:  #005e87;  /* dunkles Ende des aktiven Verlaufs */
    --gc-primary-soft:  #e8f8fe;  /* weiche Badges */

    /* Form */
    --gc-radius:        0.5rem;
    --gc-radius-sm:     0.375rem;
    --gc-shadow:        0 0.125rem 0.375rem 0 rgba(67, 89, 113, 0.12);
    --gc-shadow-lg:     0 0.3rem 0.75rem 0 rgba(67, 89, 113, 0.16);
}

/* ========================================================================
   Grundflaeche
   ======================================================================== */

.fi-body {
    background-color: var(--gc-bg);
    color: var(--gc-body);
}

.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading {
    color: var(--gc-heading);
    font-weight: 600;
}

.fi-header-subheading,
.fi-section-header-description {
    color: var(--gc-muted);
}

/* ========================================================================
   Karten, Modals, Dropdowns
   ======================================================================== */

.fi-section,
.fi-card,
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    border-radius: var(--gc-radius);
    border-color: transparent;
    box-shadow: var(--gc-shadow);
}

/* Infolist (die Lese-Ansicht): Beschriftung klein und grau, der Wert als Text.
   Keine Karte je Eintrag, sonst sieht Lesen aus wie Bearbeiten. */
.fi-in-entry-wrp {
    border-radius: 0;
    box-shadow: none;
}

.fi-in-entry-wrp-label > span {
    color: var(--gc-muted);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.fi-in-text-item {
    color: var(--gc-heading);
}

.fi-modal-window,
.fi-dropdown-panel {
    border-radius: var(--gc-radius);
    box-shadow: var(--gc-shadow-lg);
}

.fi-avatar,
.fi-user-avatar {
    border-radius: 9999px;
}

/* ========================================================================
   Sidebar
   Hell, mit gefuellter Pille fuer den aktiven Eintrag. Der Verlauf bleibt im
   lesbaren Bereich: mit #00AEEF am hellen Ende waere die rechte Haelfte der
   Beschriftung nicht mehr lesbar.
   ======================================================================== */

.fi-sidebar,
.fi-sidebar-header {
    background-color: var(--gc-surface);
}

.fi-sidebar {
    border-right: 1px solid rgba(67, 89, 113, 0.08);
}

.fi-sidebar-nav {
    padding-inline: 0.75rem;
}

.fi-sidebar-item-button {
    border-radius: var(--gc-radius-sm);
    margin-block: 0.125rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:hover {
    background-color: rgba(67, 89, 113, 0.06);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background: linear-gradient(72.47deg, var(--gc-primary-deep) 22.16%, var(--gc-primary-solid) 76.47%);
    box-shadow: 0 0.125rem 0.375rem 0 rgba(0, 119, 168, 0.4);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-button .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-button .fi-sidebar-item-icon {
    color: #ffffff;
}

/* Gruppen nach Sneat: der Gruppenkopf ist ein Menuepunkt mit Icon und Chevron, die
   Eintraege darunter tragen einen Punkt statt eines Icons. Filament liefert diese
   Struktur, sobald die Gruppe ein Icon hat - hier steht nur die Form dazu. */

.fi-sidebar-group-button {
    border-radius: var(--gc-radius-sm);
    margin-block: 0.125rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fi-sidebar-group-button:hover {
    background-color: rgba(67, 89, 113, 0.06);
}

.fi-sidebar-group-label {
    color: var(--gc-heading);
    font-size: 0.875rem;
}

.fi-sidebar-group-icon {
    color: var(--gc-body);
}

.fi-sidebar-group.fi-active .fi-sidebar-group-label,
.fi-sidebar-group.fi-active .fi-sidebar-group-icon {
    color: var(--gc-primary-solid);
}

/* Chevron: offen zeigt er nach unten, zu nach rechts. Filament nimmt ein Chevron-Up
   und dreht es zu um 180 Grad - das ergibt unten/oben, Sneat kennt unten/rechts. */
.fi-sidebar-group-collapse-button {
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}

.fi-sidebar-group-collapse-button.-rotate-180 {
    transform: rotate(90deg);
}

/* Der Punkt genuegt, die Verbindungslinie zwischen den Punkten faellt weg. */
.fi-sidebar-item-grouped-border > div:not(:last-child) {
    display: none;
}

/* Aktiver Eintrag in einer Gruppe: helle Pille statt Verlauf, damit die Gruppe als
   Ganzes lesbar bleibt. Der Verlauf bleibt dem Dashboard, dem einzigen Eintrag ohne
   Gruppe - Filament legt ihn in eine Gruppe mit leerem Label, daher der Selektor. */
.fi-sidebar-group:not([data-group-label=""]) .fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background: var(--gc-primary-soft);
    box-shadow: none;
}

.fi-sidebar-group:not([data-group-label=""]) .fi-sidebar-item.fi-active .fi-sidebar-item-button .fi-sidebar-item-label {
    color: var(--gc-primary-solid);
}

.fi-sidebar-group:not([data-group-label=""]) .fi-sidebar-item.fi-active .fi-sidebar-item-grouped-border > div:last-child {
    background-color: var(--gc-primary-solid);
}

/* ========================================================================
   Topbar — schwebend, als eigene Karte
   ======================================================================== */

.fi-topbar {
    background-color: transparent;
    box-shadow: none;
}

.fi-topbar > nav {
    background-color: var(--gc-surface);
    border-radius: var(--gc-radius);
    box-shadow: var(--gc-shadow);
    margin: 0.75rem 0.75rem 0;
}

/* ========================================================================
   Tabellen
   ======================================================================== */

.fi-ta-header-cell {
    color: var(--gc-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fi-ta-row {
    border-color: rgba(67, 89, 113, 0.08);
}

.fi-ta-row:hover {
    background-color: rgba(67, 89, 113, 0.04);
}

.fi-ta-cell {
    color: var(--gc-body);
}

/* ========================================================================
   Buttons, Tabs, Eingaben
   ======================================================================== */

.fi-btn,
.fi-tabs-item,
.fi-dropdown-list-item {
    border-radius: var(--gc-radius-sm);
}

.fi-btn {
    font-weight: 500;
    letter-spacing: 0.01em;
}

.fi-btn.fi-color-primary {
    box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 119, 168, 0.4);
}

.fi-btn:active {
    transform: translateY(1px);
}

.fi-input-wrp,
.fi-select-input {
    border-radius: var(--gc-radius-sm);
}

/* Eine echte Umrandung, kein Ring: Filament zeichnet den Rahmen als `ring-1`, also als
   Schatten. Das Theme ersetzt Schatten durch Form — ohne eigene Linie waere ein weisses
   Feld auf einer weissen Karte unsichtbar, und genau das war es auf der Zeiterfassung.
   Der Rahmen haengt am Feld und nicht am Hintergrund, damit es auf beiden sitzt. */
.fi-input-wrp {
    border: 1px solid var(--gc-border);
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Native Selects tragen ihren Rahmen selbst. Die Tabellensuche nicht: sie steckt wie die
   globale Suche in einem `.fi-input-wrp`, und ein zweiter Rahmen am Eingabefeld zeichnete
   ein Kaestchen im Kaestchen (2026-09-28). */
.fi-select-input {
    border: 1px solid var(--gc-border);
}

.fi-input-wrp:focus-within {
    border-color: var(--gc-primary);
    box-shadow: 0 0 0 0.125rem rgba(0, 174, 239, 0.25);
}

/* ========================================================================
   Badges — weich getoent statt kraeftig gefuellt
   ======================================================================== */

.fi-badge {
    border-radius: var(--gc-radius-sm);
    font-weight: 500;
    letter-spacing: 0.01em;
}

.fi-badge.fi-color-primary,
.fi-badge.fi-color-info {
    background-color: var(--gc-primary-soft);
    color: var(--gc-primary-solid);
}

/* ========================================================================
   Statistik-Kacheln
   ======================================================================== */

.fi-wi-stats-overview-stat-value {
    color: var(--gc-heading);
    font-weight: 600;
}

.fi-wi-stats-overview-stat-label {
    color: var(--gc-muted);
    font-size: 0.8125rem;
}

/* ========================================================================
   Anmeldeseite
   ======================================================================== */

.fi-simple-layout {
    background-color: var(--gc-bg);
}

/* ========================================================================
   Dark Mode — blaustichig wie bei Sneat, nicht neutral
   ======================================================================== */

.dark .fi-body {
    background-color: #232333;
    color: #b7b9d3;
}

.dark .fi-sidebar,
.dark .fi-sidebar-header,
.dark .fi-topbar > nav {
    background-color: #2b2c40;
    border-right-color: rgba(255, 255, 255, 0.06);
}

/* Logo-Umschaltung: `dark:block` gibt es in Filaments Stylesheet nicht. */
.gc-logo-light {
    display: block;
}

.gc-logo-dark {
    display: none;
}

.dark .gc-logo-light {
    display: none;
}

.dark .gc-logo-dark {
    display: block;
}

.dark .fi-in-text-item {
    color: #cbcbe2;
}

.dark .fi-in-entry-wrp-label > span {
    color: #8592a3;
}

.dark .fi-input-wrp,
.dark .fi-select-input {
    border-color: rgba(255, 255, 255, 0.12);
}

.dark .fi-sidebar-group-label {
    color: #cbcbe2;
}

.dark .fi-sidebar-group-icon {
    color: #b7b9d3;
}

.dark .fi-sidebar-group-button:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.dark .fi-sidebar-group.fi-active .fi-sidebar-group-label,
.dark .fi-sidebar-group.fi-active .fi-sidebar-group-icon {
    color: #4dc8f0;
}

.dark .fi-sidebar-group:not([data-group-label=""]) .fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background: rgba(0, 174, 239, 0.16);
}

.dark .fi-sidebar-group:not([data-group-label=""]) .fi-sidebar-item.fi-active .fi-sidebar-item-button .fi-sidebar-item-label {
    color: #4dc8f0;
}

.dark .fi-sidebar-group:not([data-group-label=""]) .fi-sidebar-item.fi-active .fi-sidebar-item-grouped-border > div:last-child {
    background-color: #4dc8f0;
}

.dark .fi-section,
.dark .fi-card,
.dark .fi-ta-ctn,
.dark .fi-wi-stats-overview-stat {
    background-color: #2b2c40;
    box-shadow: 0 0.125rem 0.375rem 0 rgba(15, 20, 34, 0.4);
}

.dark .fi-header-heading,
.dark .fi-section-header-heading,
.dark .fi-wi-stats-overview-stat-value {
    color: #cbcbe2;
}

.dark .fi-ta-row:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

.dark .fi-badge.fi-color-primary,
.dark .fi-badge.fi-color-info {
    background-color: rgba(0, 174, 239, 0.16);
    color: #4dc8f0;
}

.dark .fi-simple-layout {
    background-color: #232333;
}

/* ========================================================================
   Bewegung nur, wenn sie gewuenscht ist
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
    .fi-sidebar-item-button,
    .fi-sidebar-group-button,
    .fi-sidebar-group-collapse-button,
    .fi-input-wrp,
    .fi-btn,
    .gc-chat-input,
    .gc-chat-attach {
        transition: none;
    }

    .fi-btn:active {
        transform: none;
    }
}

/* ---------------------------------------------------------------------------
   Hilfsklassen, die Filaments mitgeliefertes CSS nicht enthaelt
   ---------------------------------------------------------------------------
   Die Oberflaeche wird mit Filaments fertigem Stylesheet ausgeliefert, nicht mit
   einem eigenen Tailwind-Durchlauf. Klassen, die Filament selbst nirgends benutzt,
   fehlen darin schlicht - in der Zeiterfassung fiel das an den Zeilenumbruechen der
   Beschreibung auf, die stillschweigend verschwanden.
   --------------------------------------------------------------------------- */

.whitespace-pre-line {
    white-space: pre-line;
}

.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* Der laufende Zeiteintrag. Eigene Klasse statt ring-1 ring-primary-500: die
   Ring-Farbe kommt sonst aus Tailwinds Vorgabe und ist blau, nicht unsere. */
.gc-running {
    box-shadow: 0 0 0 1px var(--gc-primary-solid), 0 0.125rem 0.5rem rgba(0, 119, 168, 0.15);
}

/* Hinweisfläche für zurückgestellte Zeiten. Eigene Klassen, weil Filaments
   Stylesheet die Warn-Farbstufen nur in seinen eigenen Bausteinen führt: als
   Hilfsklassen (bg-warning-50, text-warning-600) gibt es sie nicht, sie fallen
   stillschweigend auf Grau zurück. */
.gc-notice {
    background-color: #fffbeb;
    border: 1px solid #fcd34d;
}

.gc-notice-text {
    color: #b45309;
}

.dark .gc-notice {
    background-color: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.3);
}

.dark .gc-notice-text {
    color: #fbbf24;
}

/* Positionstabelle der Offerte (resources/views/filament/quote/positions.blade.php).
   Eigene Klassen, weil Filaments Stylesheet nur die Hilfsklassen fuehrt, die es selbst
   benutzt: uppercase, ps-5, border-t-2 und aehnliche gibt es dort nicht, sie fielen
   stillschweigend weg. */
.gc-positions thead th {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Positionen in einer Gruppe stehen eingerueckt unter ihrer Ueberschrift. */
.gc-positions .gc-pos-indent {
    padding-inline-start: 1.25rem;
}

/* Eine Ueberschrift bekommt Luft nach oben, damit sie den Abschnitt eroeffnet. */
.gc-positions .gc-pos-heading > td {
    padding-top: 1rem;
    padding-bottom: 0.25rem;
}

/* Zwischentotal und Summenblock schliessen ab: ein kraeftigerer Strich darueber. */
.gc-positions .gc-pos-subtotal,
.gc-positions tfoot tr:first-child {
    border-top: 2px solid var(--gc-border);
}

.gc-positions tfoot td {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.gc-positions tfoot tr:first-child td {
    padding-top: 0.75rem;
}

.dark .gc-positions .gc-pos-subtotal,
.dark .gc-positions tfoot tr:first-child {
    border-top-color: rgba(255, 255, 255, 0.2);
}

/* ---------------------------------------------------------------------------
 * Statusmarke auf der Einstellungsseite «Verbindungen». Filament liefert nur die
 * Klassen, die es selbst benutzt; bg-success-100 und Co. waeren im Build nicht da.
 * ------------------------------------------------------------------------- */
.gc-status {
    display: inline-flex;
    align-items: center;
    border-radius: 0.375rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25rem;
}

.gc-status-success { background: rgba(var(--success-500), 0.12); color: rgb(var(--success-700)); }
.gc-status-warning { background: rgba(var(--warning-500), 0.15); color: rgb(var(--warning-700)); }
.gc-status-danger { background: rgba(var(--danger-500), 0.12); color: rgb(var(--danger-700)); }

.dark .gc-status-success { color: rgb(var(--success-400)); }
.dark .gc-status-warning { color: rgb(var(--warning-400)); }
.dark .gc-status-danger { color: rgb(var(--danger-400)); }

/* ---------------------------------------------------------------------------
 * QuoteBot-Chat (resources/views/filament/pages/quote-bot-chat.blade.php).
 * Eigene Klassen, weil Filaments Stylesheet die noetigen Utilities nicht fuehrt:
 * h-[55vh], max-w-[80%] und border-dashed fielen stillschweigend weg, der Chat
 * wuchs ohne Scrollbereich und alle Flaechen waren eckig.
 * ------------------------------------------------------------------------- */

/* Karte wie eine Section: runde Ecken, weicher Schatten, kein Rahmen. */
.gc-chat {
    display: flex;
    flex-direction: column;
    height: clamp(26rem, 60vh, 44rem);
    overflow: hidden;
    background-color: var(--gc-surface);
    border-radius: var(--gc-radius);
    box-shadow: var(--gc-shadow);
}

/* Der Verlauf liegt auf der Seitenfarbe, damit die weissen Antworten sich abheben. */
.gc-chat-log {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
    padding: 1.5rem;
    background-color: #f8f8fb;
}

.gc-chat-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.gc-chat-row-user {
    justify-content: flex-end;
}

.gc-chat-avatar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background-color: var(--gc-primary-soft);
    color: var(--gc-primary-solid);
}

.gc-chat-avatar-lg {
    width: 3rem;
    height: 3rem;
}

/* Die Sprechblase. Die Ecke zum Absender ist kleiner, damit die Richtung lesbar bleibt. */
.gc-bubble {
    max-width: min(80%, 44rem);
    padding: 0.625rem 1rem;
    border-radius: var(--gc-radius);
    font-size: 0.875rem;
    line-height: 1.5rem;
    overflow-wrap: anywhere;
}

/* Gefuellt mit Stufe 600: #00AEEF traegt keine weisse Schrift. */
.gc-bubble-user {
    background-color: var(--gc-primary-solid);
    color: #ffffff;
    border-top-right-radius: 0.125rem;
    box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 119, 168, 0.3);
}

.gc-bubble-bot {
    background-color: var(--gc-surface);
    color: var(--gc-heading);
    border-top-left-radius: 0.125rem;
    box-shadow: var(--gc-shadow);
}

.gc-bubble-muted {
    color: var(--gc-muted);
}

.gc-bubble-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.gc-chat-empty {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--gc-muted);
}

.gc-chat-empty .gc-chat-avatar {
    margin-bottom: 0.5rem;
}

.gc-chat-empty-title {
    font-weight: 600;
    color: var(--gc-heading);
}

/* Eingabezeile */
.gc-chat-composer {
    border-top: 1px solid rgba(67, 89, 113, 0.08);
}

.gc-chat-form {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    padding: 1rem;
}

.gc-chat-pending {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1rem 0;
}

.gc-chat-hint {
    padding: 0.75rem 1rem 0;
    font-size: 0.75rem;
    color: var(--gc-muted);
}

/* Wie ein Filament-Feld: echter Rahmen, Fokusring in der Markenfarbe. */
.gc-chat-input {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 2.5rem;
    max-height: 12rem;
    resize: vertical;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gc-border);
    border-radius: var(--gc-radius-sm);
    background-color: var(--gc-surface);
    color: var(--gc-heading);
    font-size: 0.875rem;
    line-height: 1.5rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gc-chat-input::placeholder {
    color: var(--gc-muted);
}

.gc-chat-input:focus {
    outline: none;
    border-color: var(--gc-primary);
    box-shadow: 0 0 0 0.125rem rgba(0, 174, 239, 0.25);
}

.gc-chat-input:disabled {
    opacity: 0.6;
}

.gc-chat-attach {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    cursor: pointer;
    border: 1px solid var(--gc-border);
    border-radius: var(--gc-radius-sm);
    color: var(--gc-body);
    transition: border-color 0.15s ease, color 0.15s ease;
}

.gc-chat-attach:hover {
    border-color: var(--gc-primary);
    color: var(--gc-primary-solid);
}

/* Anhang als weiche Marke, wie die Badges. */
.gc-chip {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--gc-radius-sm);
    background-color: var(--gc-primary-soft);
    color: var(--gc-primary-solid);
    font-size: 0.75rem;
    line-height: 1rem;
}

.gc-chip-on-solid {
    background-color: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

.gc-chip-name {
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gc-chip-meta {
    opacity: 0.7;
}

.gc-chip-remove {
    display: inline-flex;
    color: inherit;
    opacity: 0.7;
}

.gc-chip-remove:hover {
    opacity: 1;
    color: rgb(var(--danger-600));
}

/* Hinweiskarte mit Aktion: Extraktion, angelegte Offerte. Karte wie eine Section,
   die Farbe traegt nur das Icon. */
.gc-callout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background-color: var(--gc-surface);
    border-radius: var(--gc-radius);
    box-shadow: var(--gc-shadow);
}

.gc-callout-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--gc-radius-sm);
    background-color: var(--gc-primary-soft);
    color: var(--gc-primary-solid);
}

.gc-callout-body {
    flex: 1 1 16rem;
    min-width: 0;
}

.gc-callout-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gc-heading);
}

.gc-callout-text {
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    color: var(--gc-muted);
}

.gc-callout-success .gc-callout-icon {
    background-color: rgba(var(--success-500), 0.12);
    color: rgb(var(--success-700));
}

/* Dark Mode */
.dark .gc-chat,
.dark .gc-callout,
.dark .gc-bubble-bot {
    background-color: #2b2c40;
    box-shadow: 0 0.125rem 0.375rem 0 rgba(15, 20, 34, 0.4);
}

.dark .gc-chat-log {
    background-color: #25263a;
}

/* Die Antwort eine Stufe heller als die Karte, sonst verschwimmt sie im Verlauf. */
.dark .gc-bubble-bot {
    background-color: #33344b;
}

.dark .gc-bubble-bot,
.dark .gc-chat-input,
.dark .gc-chat-empty-title,
.dark .gc-callout-title {
    color: #cbcbe2;
}

.dark .gc-bubble-muted,
.dark .gc-chat-empty,
.dark .gc-chat-hint,
.dark .gc-callout-text {
    color: #8592a3;
}

.dark .gc-chat-composer {
    border-top-color: rgba(255, 255, 255, 0.06);
}

.dark .gc-chat-input {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.12);
}

.dark .gc-chat-attach {
    border-color: rgba(255, 255, 255, 0.12);
    color: #b7b9d3;
}

.dark .gc-chat-attach:hover {
    border-color: #4dc8f0;
    color: #4dc8f0;
}

.dark .gc-chat-avatar,
.dark .gc-callout-icon,
.dark .gc-chip {
    background-color: rgba(0, 174, 239, 0.16);
    color: #4dc8f0;
}

.dark .gc-chip-on-solid {
    background-color: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

.dark .gc-callout-success .gc-callout-icon {
    background-color: rgba(var(--success-500), 0.16);
    color: rgb(var(--success-400));
}

/* Handybreite: weniger Rand, Blasen duerfen breiter werden. */
@media (max-width: 640px) {
    .gc-chat-log {
        padding: 1rem;
    }

    .gc-bubble {
        max-width: 88%;
    }

    /* Das Feld bekommt die volle Breite, Anhang und Senden stehen darunter. Neben
       beiden Knoepfen blieben dem Feld auf 390 px keine 130 px. */
    .gc-chat-form {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.75rem;
    }

    .gc-chat-form .gc-chat-input {
        flex-basis: 100%;
        order: -1;
    }

    .gc-chat-form > .fi-btn {
        margin-left: auto;
    }

    .gc-callout {
        padding: 1rem;
    }
}

/* ---------------------------------------------------------------------------
 * Tailwind-Klassen, die Filaments Stylesheet nicht fuehrt (2026-09-28).
 * Filament liefert nur die Utilities, die es selbst benutzt. Was unsere eigenen
 * Ansichten darueber hinaus schreiben, fiel stillschweigend weg: im dunklen Modus
 * blieben Betraege im hellen Grau (dark:text-gray-300 gibt es dort nur mit /50),
 * die Platzhalter-Knoepfe hatten keine Flaeche. Die Regeln folgen Filaments Muster,
 * damit Dunkel- und Hover-Varianten gleich stark greifen wie dort.
 * tests/Feature/Filament/ThemeUtilityClassesTest.php meldet jede weitere fehlende Klasse.
 * ------------------------------------------------------------------------- */
.text-gray-300 { color: rgb(var(--gray-300)); }
.text-gray-900 { color: rgb(var(--gray-900)); }
.text-primary-700 { color: rgb(var(--primary-700)); }
.bg-gray-50\/60 { background-color: rgba(var(--gray-50), 0.6); }
.bg-primary-50 { background-color: rgb(var(--primary-50)); }
.hover\:bg-primary-100:hover { background-color: rgb(var(--primary-100)); }
.border-gray-200\/70 { border-color: rgba(var(--gray-200), 0.7); }
.border-white\/40 { border-color: rgba(255, 255, 255, 0.4); }
.ring-primary-600\/20 { --tw-ring-color: rgba(var(--primary-600), 0.2); }
.hover\:underline:hover { text-decoration-line: underline; }

.dark\:text-gray-100:is(.dark *) { color: rgb(var(--gray-100)); }
.dark\:text-gray-300:is(.dark *) { color: rgb(var(--gray-300)); }
.dark\:text-gray-600:is(.dark *) { color: rgb(var(--gray-600)); }
.dark\:bg-primary-400\/10:is(.dark *) { background-color: rgba(var(--primary-400), 0.1); }
.dark\:hover\:bg-primary-400\/20:hover:is(.dark *) { background-color: rgba(var(--primary-400), 0.2); }
.dark\:ring-primary-400\/30:is(.dark *) { --tw-ring-color: rgba(var(--primary-400), 0.3); }

.mt-4 { margin-top: 1rem; }
.pb-1 { padding-bottom: 0.25rem; }
.pr-2 { padding-right: 0.5rem; }
.pr-4 { padding-right: 1rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.items-baseline { align-items: baseline; }
.last\:border-0:last-child { border-width: 0; }
.max-h-\[70vh\] { max-height: 70vh; }
.max-w-\[16rem\] { max-width: 16rem; }
.max-w-\[min\(80\%\,42rem\)\] { max-width: min(80%, 42rem); }
.prose-p\:my-0 p { margin-top: 0; margin-bottom: 0; }
.prose-p\:my-1 p { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.prose-ul\:my-1 ul { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.prose-ol\:my-1 ol { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.prose-li\:my-0 li { margin-top: 0; margin-bottom: 0; }
.prose-headings\:my-2 :is(h1, h2, h3, h4, h5, h6, th) { margin-top: 0.5rem; margin-bottom: 0.5rem; }

@media (min-width: 640px) {
    .sm\:flex-col { flex-direction: column; }
    .sm\:items-baseline { align-items: baseline; }
}