/* ------------------------------------------------------------------
   Agent Automation – Chat Theme
   Nur Variablen laut offizieller n8n @n8n/chat Dokumentation
   Quelle: https://www.npmjs.com/package/@n8n/chat
------------------------------------------------------------------ */

:root {
    /* Allgemeine Farben */
    --chat--color-primary: var(--accent);           /* Hauptfarbe */
    --chat--color-primary-shade-50: #16a34a;        /* Abdunklung 50% */
    --chat--color-primary-shade-100: #15803d;       /* Abdunklung 100% */

    /* Hintergrund für den Nachrichtenbereich */
    --chat--body--background: #333641;   /* var(--bg) oder #020617 */

    --chat--color-secondary: var(--bg-card);        /* Karten-Hintergrund */
    --chat--color-white: #ffffff;
    --chat--color-light: #f1f5f9;
    --chat--color-dark: #020617;
    --chat--color-muted: var(--muted);

    /* Fenster-Styling */
    --chat--window--width: 420px;
    --chat--window--height: 560px;
    --chat--window--background: black;
    --chat--window--border-radius: 1.25rem;
    --chat--window--border: 1px solid #ffffff; /* var(--border) oder #020617 */
    --chat--window--box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);

    /* Typografie */
    --chat--font-family: var(--font);
    --chat--heading--font-size: 1rem;
    --chat--message--font-size: 0.9rem;
    --chat--message-line-height: 1.5;

    /* Chat-Abstände */
    --chat--spacing: 0.9rem;

    /* Bot Messages also Nachrichten die der Bot ausgibt */
    --chat--message--bot--background: #052d2d;
    --chat--message--bot--color: #052d2d/*var(--text);*/

    /* User Messages */
    --chat--message--user--background: rgba(34, 197, 94, 0.18);
    --chat--message--user--color: var(--accent-soft);

    /* Eingabefeld */
    --chat--input--background: #020617;
    --chat--input--text-color: var(--text);
    --chat--input--placeholder-color: var(--muted);
    --chat--input--border: 1px solid var(--border);
    --chat--input--border-radius: 0.9rem;
    --chat--input--padding: 0.85rem;
    --chat--textarea--height: auto;
    /* Buttons im Footer (Senden / Datei) */
    --chat--input--send--button--background: var(--bg);   /* oder eigene Farbe */
    --chat--input--send--button--color: #4ade80;              /* Icon-Farbe */

    /* Disabled Buttons */
    --chat--input--send--button--background-disabled: #4ade80;
    --chat--input--send--button--color-disabled: rgba(177, 14, 14, 0.3);

    /* Buttons */
    --chat--button--background: linear-gradient(135deg, #22c55e, #4ade80);
    --chat--button--hover--background: #22c55e;
    --chat--button--color: #022c22;

    /* Launcher-Button / Toggle Button (Doku-konform!) */
    --chat--toggle--background: #22c55e;                    /* Grün */
    --chat--toggle--hover--background: #16a34a;             /* dunkleres Grün */
    --chat--toggle--active--background: #15803d;            /* noch dunkler, aktiv */
    --chat--toggle--color: #edf1eb;                         /* Icon-Farbe der Sprechblase zb:: #020617*/
    --chat--toggle--size: 64px;                             /* Button-Durchmesser */

    /* Header */
    --chat--header--background: #020617;
    --chat--header--color: var(--accent-soft);

    /* Footer-Hintergrund & Textfarbe im Chat-Fenster */
    --chat--footer--background: var(--bg);      /* oder z.B. #020617 oder var(--bg-card) */
    --chat--footer--color: var(--text);        /* Textfarbe im Footer */

    /* optional: die helle Linie oben im Footer etwas abdunkeln */
    --chat--color-light-shade-100: rgba(255, 255, 255, 0.08);

    
}


/* Footer soll als Positionierungsschicht dienen */
.chat-layout .chat-footer {
    position: relative;
}

/* Größerer Button */
.chat-input-send-button[data-v-66014261] {
    height: 48px !important;
    width: 48px !important;
    font-size: 28px !important;
    position: absolute !important;
    right: 12px !important;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
}

/* Icon anpassen */
.chat-input-send-button[data-v-66014261] svg {
    width: 28px !important;
    height: 28px !important;
}