/* ==========================================================================
   QD Chatbot Widget
   Flaches Design ohne Rundungen. Die Schrift kommt vom WordPress-Theme, die
   Farbe aus den Plugin-Einstellungen.

   Anpassung an ein anderes Theme: Die Variablen unten lassen sich im Theme-CSS
   überschreiben, ohne diese Datei zu ändern (sie wird bei Plugin-Updates
   ersetzt). Beispiel im Theme-Stylesheet:

       :root {
           --qd-chatbot-z-panel: 90;
           --qd-chatbot-z-fab: 91;
       }
   ========================================================================== */

/* --- Default: AM Suisse colors (link color = #e50064) --- */
:root {
    --qd-chatbot-primary: #e50064;
    --qd-chatbot-primary-hover: #c00054;
    --qd-chatbot-primary-light: #fce8f0;
    --qd-chatbot-text: #1a1a1a;
    --qd-chatbot-text-light: #666666;
    --qd-chatbot-bg: #dcddde;
    --qd-chatbot-bg-light: #ffffff;
    --qd-chatbot-border: #dcddde;
    --qd-chatbot-error: #C73333;
    --qd-chatbot-error-bg: #fdecea;
    --qd-chatbot-shadow: none;
    /* Height of the sticky page header on mobile. The chat panel
       must not climb above this on small screens. Theme CSS can
       override this value per breakpoint if the header height
       changes. */
    --qd-chatbot-mobile-header-offset: 100px;
    /* Stapelreihenfolge. Die Vorgabe stammt aus dem AM-Suisse-Theme, dessen
       Cookie-Layer auf 1029 liegt -- der Chat muss darunter bleiben, sonst ist
       der Consent-Dialog auf Mobilgeräten nicht mehr erreichbar. In einem
       anderen Theme sind diese Werte zu prüfen. */
    --qd-chatbot-z-panel: 1019;
    --qd-chatbot-z-fab: 1020;
}

/* Die drei Primaerfarben oben sind Vorgabewerte. Die im Backend gewaehlte
   Farbe wird als Inline-Style nachgeschoben und ueberschreibt sie; die
   Hover-Variante und die helle Toenung werden dabei berechnet. */

/* --- FAB Button --- */

.qd-chatbot-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    /* The AM Suisse cookie consent layer uses z-index 1029, so the
       chat must sit below it -- otherwise the consent modal cannot be
       reached on mobile when the panel is open. Above 1020 still
       reliably wins against ordinary page chrome (navbar etc.). */
    z-index: var(--qd-chatbot-z-fab);
    width: 56px;
    height: 56px;
    border-radius: 0;
    border: none;
    background: var(--qd-chatbot-primary);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--qd-chatbot-shadow);
    transition: background-color 0.2s ease;
    /* No outline on touch-triggered focus (mobile browsers fire :focus
       after a tap). focus-visible below restores it for keyboard users. */
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.qd-chatbot-fab:hover {
    background: var(--qd-chatbot-primary-hover);
}

.qd-chatbot-fab:focus {
    outline: none;
}

.qd-chatbot-fab:focus-visible {
    outline: 2px solid var(--qd-chatbot-primary);
    outline-offset: 2px;
}

/* --- Chat Panel --- */

.qd-chatbot-panel {
    position: fixed;
    bottom: 24px;
    right: 24px;
    /* Same constraint as the fab: stay below the cookie consent
       (z-index 1029). One below the fab so the fab can sit on top of
       its own panel when both are stacked. */
    z-index: var(--qd-chatbot-z-panel);
    width: 400px;
    max-height: 600px;
    background: var(--qd-chatbot-bg);
    border-radius: 0;
    box-shadow: -1px 2px 1px -1px #c2c4c7;
    border: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Keine eigene Schriftart: Das Widget übernimmt die Typografie des
       WordPress-Themes. Die font-family: inherit weiter unten sorgen dafür,
       dass auch Eingabefeld und Buttons mitziehen -- Formularelemente
       erben Schriften sonst nicht. */
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
    color: var(--qd-chatbot-text);
    box-sizing: border-box;
}

/* Force border-box on everything inside the panel so width: 100% on
   mobile does not overflow when children add padding or borders. */
.qd-chatbot-panel,
.qd-chatbot-panel * {
    box-sizing: border-box;
}

/* --- Header --- */

.qd-chatbot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--qd-chatbot-primary);
    color: #ffffff;
    flex-shrink: 0;
}

.qd-chatbot-title {
    font-weight: 700;
    font-size: 23px;
    line-height: normal;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Firefox font metrics fix */
@-moz-document url-prefix() {
    .qd-chatbot-title {
        padding-top: 0.2em;
    }
}

.qd-chatbot-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qd-chatbot-btn-icon {
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 8px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
}

.qd-chatbot-btn-icon:hover {
    background: rgba(255, 255, 255, 0.2);
}

.qd-chatbot-btn-icon:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 1px;
}

/* --- Messages --- */

.qd-chatbot-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 200px;
    max-height: 400px;
}

.qd-chatbot-msg {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.qd-chatbot-msg a {
    color: var(--qd-chatbot-primary);
    text-decoration: underline;
}

.qd-chatbot-msg-user {
    align-self: flex-end;
    background: var(--qd-chatbot-primary);
    color: #ffffff;
}

.qd-chatbot-msg-bot {
    align-self: flex-start;
    background: var(--qd-chatbot-bg-light);
    color: var(--qd-chatbot-text);
}

/* Blase, in der der Text während des Streams waechst. Zeilenumbrueche aus der
   Antwort bleiben sichtbar, obwohl noch kein Markup erzeugt wurde. */
.qd-chatbot-msg-streaming {
    white-space: pre-wrap;
}

/* Blinkender Schreibbalken am Ende des bisher eingetroffenen Textes. */
.qd-chatbot-msg-streaming::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: var(--qd-chatbot-primary);
    animation: qd-chatbot-caret 1s steps(2, start) infinite;
}

@keyframes qd-chatbot-caret {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .qd-chatbot-msg-streaming::after {
        animation: none;
    }
}

/* ==========================================================================
   Schutz gegen Theme-Vorgaben

   Das Widget haengt am <body>, also ausserhalb der Container, fuer die Themes
   ihre Inhaltsstile definieren (.entry-content, #main-content, .et-l--body …).
   Viele Themes setzen aber globale Resets, die trotzdem greifen -- Divi etwa
   "ol, ul { list-style: none }" und stellt die Punkte nur innerhalb von
   .entry-content wieder her. Im Chat fehlen die Aufzaehlungszeichen dann
   ersatzlos.

   Deshalb setzt der folgende Block die benoetigten Eigenschaften fuer den
   Widget-Inhalt ausdruecklich. Die doppelte Klasse (.qd-chatbot-panel
   .qd-chatbot-panel) erhoeht die Spezifitaet auf 0-2-1 und schlaegt damit
   uebliche Theme-Selektoren wie ".entry-content ul" (0-1-1), ohne zu
   !important greifen zu muessen -- das bliebe fuer den Notfall.
   ========================================================================== */

/* Listen: Aufzaehlungszeichen und Einzug erzwingen. */
.qd-chatbot-panel.qd-chatbot-panel ul.qd-chatbot-list,
.qd-chatbot-panel.qd-chatbot-panel ol.qd-chatbot-list {
    list-style-position: outside;
    padding: 0 0 0 1.5em;
    margin: 0 0 0.75em;
    text-indent: 0;
}

.qd-chatbot-panel.qd-chatbot-panel ul.qd-chatbot-list {
    list-style-type: disc;
}

.qd-chatbot-panel.qd-chatbot-panel ol.qd-chatbot-list {
    list-style-type: decimal;
}

/* Zweite Ebene optisch unterscheiden. */
.qd-chatbot-panel.qd-chatbot-panel ul.qd-chatbot-list ul.qd-chatbot-list {
    list-style-type: circle;
}

.qd-chatbot-panel.qd-chatbot-panel ol.qd-chatbot-list ol.qd-chatbot-list {
    list-style-type: lower-alpha;
}

.qd-chatbot-panel.qd-chatbot-panel .qd-chatbot-list li {
    display: list-item;
    margin: 0 0 0.25em;
    padding: 0;
    background: none;
    text-indent: 0;
    float: none;
    width: auto;
    line-height: inherit;
    /* Manche Themes haengen Icons per ::before an Listenpunkte. */
    list-style-image: none;
}

.qd-chatbot-panel.qd-chatbot-panel .qd-chatbot-list li::before,
.qd-chatbot-panel.qd-chatbot-panel .qd-chatbot-list li::marker {
    /* ::marker bewusst nicht zuruecksetzen -- das ist das Aufzaehlungszeichen
       selbst. Nur ein vom Theme ergaenztes ::before-Icon entfernen. */
    font-family: inherit;
}

.qd-chatbot-panel.qd-chatbot-panel .qd-chatbot-list li::before {
    content: none;
}

/* Tabellen: Themes setzen haeufig eigene Rahmen, Streifen und Abstaende. */
.qd-chatbot-panel.qd-chatbot-panel table.qd-chatbot-table {
    border-collapse: collapse;
    border-spacing: 0;
    width: auto;
    min-width: 100%;
    margin: 0;
    background: none;
    font-size: 0.95em;
    table-layout: auto;
}

.qd-chatbot-panel.qd-chatbot-panel .qd-chatbot-table tr,
.qd-chatbot-panel.qd-chatbot-panel .qd-chatbot-table tbody tr:nth-child(2n) {
    background: none;
}

.qd-chatbot-panel.qd-chatbot-panel .qd-chatbot-table th,
.qd-chatbot-panel.qd-chatbot-panel .qd-chatbot-table td {
    border: 1px solid var(--qd-chatbot-border);
    padding: 5px 9px;
    text-align: left;
    vertical-align: top;
    background: none;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    text-transform: none;
    letter-spacing: normal;
}

.qd-chatbot-panel.qd-chatbot-panel .qd-chatbot-table th {
    background: var(--qd-chatbot-primary-light);
    font-weight: 700;
}

/* Absaetze und Ueberschriften: keine Theme-Abstaende oder -Groessen. */
.qd-chatbot-panel.qd-chatbot-panel .qd-chatbot-msg-bot p {
    margin: 0 0 0.75em;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    text-transform: none;
}

.qd-chatbot-panel.qd-chatbot-panel .qd-chatbot-heading {
    margin: 0.9em 0 0.4em;
    padding: 0;
    color: inherit;
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: normal;
    border: none;
}

/* Links im Antworttext: Themes setzen gern eigene Farben und Rahmen. */
.qd-chatbot-panel.qd-chatbot-panel .qd-chatbot-msg-bot a {
    color: var(--qd-chatbot-primary);
    text-decoration: underline;
    background: none;
    border: none;
    padding: 0;
    font-weight: inherit;
    box-shadow: none;
}

/* Zitate, Code und Trennlinien. */
.qd-chatbot-panel.qd-chatbot-panel blockquote.qd-chatbot-quote {
    margin: 0 0 0.75em;
    padding: 6px 12px;
    border: none;
    border-left: 3px solid var(--qd-chatbot-primary);
    background: var(--qd-chatbot-primary-light);
    font-style: normal;
    font-size: inherit;
    color: inherit;
    quotes: none;
}

.qd-chatbot-panel.qd-chatbot-panel blockquote.qd-chatbot-quote::before,
.qd-chatbot-panel.qd-chatbot-panel blockquote.qd-chatbot-quote::after {
    content: none;
}

.qd-chatbot-panel.qd-chatbot-panel pre.qd-chatbot-pre,
.qd-chatbot-panel.qd-chatbot-panel code.qd-chatbot-code,
/* Auch das code-Element im Codeblock -- Themes stylen "pre, code"
   gemeinsam, der innere Knoten traegt sonst weiter Rahmen und Farbe. */
.qd-chatbot-panel.qd-chatbot-panel .qd-chatbot-pre code {
    border: none;
    color: inherit;
    text-shadow: none;
}

/* Die eigenen Flaechen erst danach setzen -- pre und der Inline-Code haben
   einen Hintergrund, nur der Code IM Block bleibt transparent. */
.qd-chatbot-panel.qd-chatbot-panel pre.qd-chatbot-pre,
.qd-chatbot-panel.qd-chatbot-panel code.qd-chatbot-code {
    background: var(--qd-chatbot-bg);
}

.qd-chatbot-panel.qd-chatbot-panel .qd-chatbot-pre code {
    background: none;
}

.qd-chatbot-panel.qd-chatbot-panel hr.qd-chatbot-hr {
    height: 0;
    border: none;
    border-top: 1px solid var(--qd-chatbot-border);
    background: none;
    margin: 0.9em 0;
}

/* --- Markdown in Bot-Antworten --- */

/* Antworten mit Tabelle oder Codeblock duerfen die uebliche Blasenbreite von
   85% ausreizen -- sonst bleibt fuer die Spalten kaum Platz. */
.qd-chatbot-msg-bot:has(.qd-chatbot-table-wrap),
.qd-chatbot-msg-bot:has(.qd-chatbot-pre) {
    max-width: 100%;
    width: 100%;
}

/* Absaetze: aussen kein Abstand, damit die Blase nicht auseinanderlaeuft. */
.qd-chatbot-msg-bot p {
    margin: 0 0 0.75em;
}

.qd-chatbot-msg-bot p:last-child {
    margin-bottom: 0;
}

.qd-chatbot-msg-bot > *:first-child {
    margin-top: 0;
}

.qd-chatbot-msg-bot > *:last-child {
    margin-bottom: 0;
}

.qd-chatbot-heading {
    margin: 0.9em 0 0.4em;
    font-weight: 700;
    line-height: 1.3;
}

h4.qd-chatbot-heading { font-size: 1.1em; }
h5.qd-chatbot-heading { font-size: 1em; }
h6.qd-chatbot-heading { font-size: 0.95em; }

.qd-chatbot-list {
    margin: 0 0 0.75em;
    padding-left: 1.5em;
}

.qd-chatbot-list:last-child {
    margin-bottom: 0;
}

.qd-chatbot-list li {
    margin-bottom: 0.25em;
}

/* Verschachtelte Listen enger setzen. */
.qd-chatbot-list .qd-chatbot-list {
    margin: 0.25em 0 0.25em;
}

.qd-chatbot-quote {
    margin: 0 0 0.75em;
    padding: 6px 12px;
    border-left: 3px solid var(--qd-chatbot-primary);
    background: var(--qd-chatbot-primary-light);
}

.qd-chatbot-hr {
    border: none;
    border-top: 1px solid var(--qd-chatbot-border);
    margin: 0.9em 0;
}

.qd-chatbot-code {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.9em;
    background: var(--qd-chatbot-bg);
    padding: 1px 5px;
    word-break: break-word;
}

.qd-chatbot-pre {
    margin: 0 0 0.75em;
    padding: 10px 12px;
    background: var(--qd-chatbot-bg);
    overflow-x: auto;
    max-width: 100%;
}

.qd-chatbot-pre code {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.9em;
    background: none;
    padding: 0;
    white-space: pre;
}

/* Tabellen koennen breiter als die Blase sein: eigener Scrollbereich, damit
   das Panel selbst nie horizontal scrollt. */
.qd-chatbot-table-wrap {
    margin: 0 0 0.75em;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

.qd-chatbot-table-wrap:last-child {
    margin-bottom: 0;
}

.qd-chatbot-table {
    border-collapse: collapse;
    width: auto;
    min-width: 100%;
    font-size: 0.95em;
}

.qd-chatbot-table th,
.qd-chatbot-table td {
    border: 1px solid var(--qd-chatbot-border);
    padding: 5px 9px;
    text-align: left;
    vertical-align: top;
    white-space: normal;
}

.qd-chatbot-table th {
    background: var(--qd-chatbot-primary-light);
    font-weight: 700;
}

.qd-chatbot-msg-bot del {
    opacity: 0.7;
}

.qd-chatbot-msg-error {
    align-self: flex-start;
    background: var(--qd-chatbot-error-bg);
    color: var(--qd-chatbot-error);
    font-size: 15px;
}

/* --- Citation link in text --- */

.qd-chatbot-cite-link {
    color: var(--qd-chatbot-primary) !important;
    text-decoration: none !important;
    font-weight: 700;
}

.qd-chatbot-cite-link:hover {
    text-decoration: underline !important;
}

/* Themes (u.a. der WordPress-Standard) setzen sup auf position: relative
   mit bottom: .8em. Das hebt die Quellenmarker weit über die Zeile und
   reisst den Zeilenabstand auf. Hier wird die Hochstellung wieder dem
   Browser-Standard (vertical-align: super) überlassen. */
.qd-chatbot-msg sup,
.qd-chatbot-cite-link sup {
    position: static;
    bottom: auto;
    top: auto;
    vertical-align: super;
    font-size: 0.75em;
    line-height: 0;
}

/* --- Citation cards --- */

.qd-chatbot-citations {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-self: flex-start;
    max-width: 85%;
}

.qd-chatbot-citation-card {
    display: block;
    padding: 8px 12px;
    background: var(--qd-chatbot-primary-light);
    border-radius: 0;
    border-left: 3px solid var(--qd-chatbot-primary);
    text-decoration: none;
    color: var(--qd-chatbot-text);
    font-size: 14px;
    line-height: 1.4;
    transition: background-color 0.15s ease;
}

.qd-chatbot-citation-card:hover {
    background: var(--qd-chatbot-border);
}

.qd-chatbot-citation-number {
    font-weight: 700;
    color: var(--qd-chatbot-primary);
}

.qd-chatbot-citation-title {
    color: var(--qd-chatbot-text);
}

/* --- Follow-up suggestions --- */

.qd-chatbot-suggestions {
    padding: 0 16px 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex-shrink: 0;
}

.qd-chatbot-suggestion {
    background: transparent;
    color: var(--qd-chatbot-primary);
    border: 1px solid var(--qd-chatbot-primary);
    border-radius: 0;
    padding: 6px 14px;
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    text-align: left;
}

.qd-chatbot-suggestion:hover {
    background: var(--qd-chatbot-primary);
    color: #ffffff;
}

.qd-chatbot-suggestion:focus-visible {
    outline: 2px solid var(--qd-chatbot-primary);
    outline-offset: 2px;
}

/* --- Input area --- */

.qd-chatbot-input-area {
    padding: 12px 16px;
    border-top: none;
    flex-shrink: 0;
    position: relative;
}

.qd-chatbot-input-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: #000000;
}

.qd-chatbot-input-wrapper {
    display: flex;
    align-items: stretch;
    gap: 8px;
    background: none;
    border-radius: 0;
    padding: 0;
}

.qd-chatbot-input {
    flex: 1;
    border: 1px solid #000000;
    background: var(--qd-chatbot-bg-light);
    font-size: 16px;
    line-height: 1;
    height: 40px;
    box-sizing: border-box;
    color: var(--qd-chatbot-text);
    outline: none;
    padding: 0 12px;
    font-family: inherit;
    transition: border-color 0.15s ease;
}

.qd-chatbot-input:focus {
    border-color: var(--qd-chatbot-primary);
}

.qd-chatbot-input::placeholder {
    color: var(--qd-chatbot-text-light);
}

.qd-chatbot-send {
    width: 40px;
    border-radius: 0;
    border: none;
    background: var(--qd-chatbot-primary);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.qd-chatbot-send:hover:not(:disabled) {
    background: var(--qd-chatbot-primary-hover);
}

.qd-chatbot-send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.qd-chatbot-send:focus-visible {
    outline: 2px solid var(--qd-chatbot-primary);
    outline-offset: 2px;
}

/* --- Character count --- */

.qd-chatbot-charcount {
    font-size: 13px;
    color: var(--qd-chatbot-text-light);
    text-align: right;
    padding-top: 4px;
}

.qd-chatbot-charcount-over {
    color: var(--qd-chatbot-error);
    font-weight: 700;
}

/* --- Loading animation --- */

.qd-chatbot-loading {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
}

.qd-chatbot-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--qd-chatbot-text-light);
    animation: qd-chatbot-bounce 1.4s infinite ease-in-out both;
}

.qd-chatbot-dot:nth-child(1) {
    animation-delay: -0.32s;
}

.qd-chatbot-dot:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes qd-chatbot-bounce {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.4;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* --- Scrollbar --- */

.qd-chatbot-messages::-webkit-scrollbar {
    width: 6px;
}

.qd-chatbot-messages::-webkit-scrollbar-track {
    background: transparent;
}

.qd-chatbot-messages::-webkit-scrollbar-thumb {
    background: var(--qd-chatbot-border);
    border-radius: 3px;
}

/* --- Responsive --- */

/* Anything narrower than a small tablet portrait: full-screen panel.
   Width is anchored via left + right (= 0 from both sides) instead of
   `width: 100%` so a stray inherited width on body or a parent stacking
   context cannot push it past the viewport edge. min-width: 0 stops
   Flexbox from defending the 400px content-min from the desktop rule.

   Height is capped so the panel never grows up past the sticky page
   header: max-height = viewport-height minus the header offset. The
   panel sits at the bottom (bottom: 0) and grows upward until it hits
   that cap, so the visible page content stays reachable behind/above
   the header. */
@media (max-width: 600px) {
    .qd-chatbot-panel {
        top: auto;
        bottom: 0;
        /* Anchor both horizontal edges and DO NOT set width. Letting
           the browser derive the width from left + right is the only
           variant that works correctly across iOS Safari, Chrome
           Mobile and DevTools device emulation:
            - width: 100% inherits a stale ancestor width and can be
              wider than the viewport
            - width: 100vw includes the scrollbar gutter on iOS Safari
              and bleeds past the right edge
            - left + right with no width leaves the browser to compute
              `100% - 0 - 0` from the viewport itself */
        left: 0;
        right: 0;
        /* Override the 400px width from the desktop rule explicitly --
           with left + right + width: 400px set, the panel sticks to
           400px and just floats against the right edge. `width: auto`
           lets the browser fall back to left + right = full viewport. */
        width: auto;
        min-width: 0;
        max-width: 100vw;
        max-height: calc(100vh - var(--qd-chatbot-mobile-header-offset));
        max-height: calc(100dvh - var(--qd-chatbot-mobile-header-offset));
        border-radius: 0;
        /* Final safety net: if any descendant still managed to render
           wider than this panel, clip it instead of letting it cause
           a horizontal page scroll. */
        overflow-x: hidden;
    }

    .qd-chatbot-messages {
        /* Within the panel: messages area gets the remaining height
           between header + suggestions + input. Header is ~50px, input
           is ~60px, plus some buffer for the suggestions row. */
        min-height: 320px;
        max-height: calc(100vh - var(--qd-chatbot-mobile-header-offset) - 160px);
        max-height: calc(100dvh - var(--qd-chatbot-mobile-header-offset) - 160px);
    }

    .qd-chatbot-title {
        font-size: 21px;
    }

    /* Defensive width caps on the elements that hug the panel edges. */
    .qd-chatbot-input-area,
    .qd-chatbot-suggestions,
    .qd-chatbot-messages {
        max-width: 100%;
    }
    .qd-chatbot-input-wrapper {
        min-width: 0;
        max-width: 100%;
        /* width: 100% forces the flex container to actually fit its
           parent, instead of inheriting the intrinsic width of its
           biggest child (the input element on iOS). */
        width: 100%;
    }
    .qd-chatbot-input {
        min-width: 0;
        /* Setting flex-basis: 0 makes the input expand from zero to
           fill the available row, instead of starting from its
           intrinsic content width and refusing to shrink. */
        flex: 1 1 0;
        width: 0;
    }

    .qd-chatbot-fab {
        bottom: 16px;
        right: 16px;
    }
}

/* --- Feedback bar (like/dislike under each bot answer) --- */

.qd-chatbot-feedback {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 12px 0;
    padding: 0 4px;
    flex-wrap: wrap;
}

.qd-chatbot-feedback-btn {
    background: transparent;
    color: #666;
    border: 1px solid transparent;
    border-radius: 0;
    padding: 4px 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.qd-chatbot-feedback-btn:hover {
    color: var(--qd-chatbot-primary);
    border-color: var(--qd-chatbot-primary);
}

.qd-chatbot-feedback-btn:focus-visible {
    outline: 2px solid var(--qd-chatbot-primary);
    outline-offset: 1px;
}

.qd-chatbot-feedback-btn:disabled {
    cursor: default;
    opacity: 0.5;
}

.qd-chatbot-feedback-commenting {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.qd-chatbot-feedback-comment {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 15px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 0;
    resize: vertical;
    min-height: 48px;
    color: inherit;
    background: #ffffff;
}

.qd-chatbot-feedback-comment:focus-visible {
    outline: 2px solid var(--qd-chatbot-primary);
    outline-offset: 1px;
    border-color: var(--qd-chatbot-primary);
}

.qd-chatbot-feedback-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.qd-chatbot-feedback-submit,
.qd-chatbot-feedback-skip {
    background: transparent;
    color: var(--qd-chatbot-primary);
    border: 1px solid var(--qd-chatbot-primary);
    border-radius: 0;
    padding: 4px 12px;
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.qd-chatbot-feedback-submit:hover,
.qd-chatbot-feedback-skip:hover {
    background: var(--qd-chatbot-primary);
    color: #ffffff;
}

.qd-chatbot-feedback-skip {
    color: #666;
    border-color: #ccc;
}

.qd-chatbot-feedback-skip:hover {
    background: #ccc;
    color: #000;
}

.qd-chatbot-feedback-submit:focus-visible,
.qd-chatbot-feedback-skip:focus-visible {
    outline: 2px solid var(--qd-chatbot-primary);
    outline-offset: 1px;
}

.qd-chatbot-feedback-submit:disabled,
.qd-chatbot-feedback-skip:disabled,
.qd-chatbot-feedback-comment:disabled {
    opacity: 0.5;
    cursor: default;
}

.qd-chatbot-feedback-done {
    justify-content: flex-start;
}

.qd-chatbot-feedback-thanks {
    font-size: 15px;
    color: #666;
    font-style: italic;
}

/* --- Fullscreen mode (mobile + desktop) ---
   Toggled by the fullscreen button in the header. JS adds the
   qd-chatbot-panel-fullscreen class on the panel; CSS takes over and
   blows the panel up to 100vw x 100dvh.

   On mobile the inner content stretches edge to edge. On desktop the
   window still fills the viewport, but the actual conversation column
   (messages, suggestions, input) is capped to the site content width
   and centered, so it does not smear across an ultra-wide monitor. */
.qd-chatbot-panel.qd-chatbot-panel-fullscreen {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    max-width: 100vw;
    min-width: 0;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    /* In fullscreen mode the chat behaves as a modal: it covers
       the sticky header and the cookie consent overlay. The user
       explicitly asked for fullscreen, so leaving consent layers
       on top would be confusing. Pick a value high enough to
       also win against typical third-party widgets. */
    z-index: 2147483000;
}

.qd-chatbot-panel.qd-chatbot-panel-fullscreen .qd-chatbot-messages {
    /* Header (~50px) + suggestions (~40-60px) + input (~60px)
       ~= 160px total chrome. dvh adapts to the browser address bar. */
    max-height: calc(100vh - 160px);
    max-height: calc(100dvh - 160px);
}

/* Desktop fullscreen: center the conversation column at the site
   content width (bootstrap .container caps at 1160px on wide screens).
   The header keeps its full width like the site navigation; only the
   scrolling content, suggestions and input row are constrained. */
@media (min-width: 601px) {
    .qd-chatbot-panel.qd-chatbot-panel-fullscreen .qd-chatbot-messages,
    .qd-chatbot-panel.qd-chatbot-panel-fullscreen .qd-chatbot-suggestions,
    .qd-chatbot-panel.qd-chatbot-panel-fullscreen .qd-chatbot-input-area {
        width: 100%;
        max-width: 1160px;
        margin-left: auto;
        margin-right: auto;
    }
}