/**
 * lernidee_ai frontend chat ("KI Reisefinder").
 *
 * Self-contained and scoped under .lernidee-ai-chat — the widget must work on
 * any page without the lernidee frontend's component library or design tokens.
 * Colours, radii and fonts are exposed as --lernidee-ai-chat-* custom
 * properties so an integrator can align the widget with a site theme by setting
 * them on :root; the values below are the standalone defaults.
 *
 * Layout: a full-height panel docked to the left edge with a dimming scrim over
 * the rest of the page. The panel is a three-row flex column — header, scrolling
 * transcript, composer. The widget has no launcher of its own; it is opened by
 * elements that already exist on the page (see adoptTriggers in chat.js).
 */

.lernidee-ai-chat {
    --lai-brand: var(--lernidee-ai-chat-brand, #023d7c);
    --lai-brand-strong: var(--lernidee-ai-chat-brand-strong, #01305f);
    --lai-accent: var(--lernidee-ai-chat-accent, #087bb4);
    --lai-brand-soft: var(--lernidee-ai-chat-brand-soft, #ecf3f8);
    --lai-brand-line: var(--lernidee-ai-chat-brand-line, #c4dbeb);
    --lai-surface: var(--lernidee-ai-chat-surface, #fff);
    --lai-field: var(--lernidee-ai-chat-field, #f2f3f4);
    --lai-text: var(--lernidee-ai-chat-text, #1c2b3a);
    --lai-muted: var(--lernidee-ai-chat-muted, #5d6b7a);
    --lai-border: var(--lernidee-ai-chat-border, #dfe3e8);
    --lai-danger: var(--lernidee-ai-chat-danger, #a3243c);
    --lai-radius: var(--lernidee-ai-chat-radius, 1.5rem);
    --lai-field-radius: var(--lernidee-ai-chat-field-radius, 0.5rem);
    --lai-gutter: 1rem;

    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
}

@media (min-width: 48rem) {
    .lernidee-ai-chat {
        --lai-gutter: 1.75rem;
    }
}

/**
 * Defensive reset. The widget is injected into an unknown host page, so anything
 * the host styles globally (uppercase headings, list-style: none, button themes,
 * letter-spacing) would otherwise bleed in. Only the elements this widget owns
 * are touched, and this block stays above the component rules so those can still
 * override it.
 */
.lernidee-ai-chat h2,
.lernidee-ai-chat h3,
.lernidee-ai-chat h4,
.lernidee-ai-chat p,
.lernidee-ai-chat ul,
.lernidee-ai-chat ol,
.lernidee-ai-chat li,
.lernidee-ai-chat a,
.lernidee-ai-chat article,
.lernidee-ai-chat span,
.lernidee-ai-chat button,
.lernidee-ai-chat textarea {
    box-sizing: border-box;
    font-family: inherit;
    letter-spacing: normal;
    text-transform: none;
}

.lernidee-ai-chat button,
.lernidee-ai-chat textarea {
    margin: 0;
    box-shadow: none;
    font: inherit;
    text-align: inherit;
    appearance: none;
}

.lernidee-ai-chat__body ol {
    list-style: decimal;
}

.lernidee-ai-chat__body ul {
    list-style: disc;
}

/* Scroll lock while the modal panel is open (class, not inline style — CSP). */
html.lernidee-ai-chat-is-open,
html.lernidee-ai-chat-is-open body {
    overflow: hidden;
}

/* --- Scrim + panel ---------------------------------------------------- */

.lernidee-ai-chat__scrim {
    position: fixed;
    inset: 0;
    z-index: 9995;
    background: rgb(12 26 43 / 0.45);
    animation: lernidee-ai-chat-fade 0.25s ease;
}

.lernidee-ai-chat__panel {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 9996;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    background: var(--lai-surface);
    color: var(--lai-text);
    box-shadow: 0 0 2.5rem rgb(0 0 0 / 0.25);
    animation: lernidee-ai-chat-slide-in 0.28s ease;
}

/* The display: flex above outranks the [hidden] attribute's display: none, so
   re-assert hiding with matching specificity for both animated layers. */
.lernidee-ai-chat__panel[hidden],
.lernidee-ai-chat__scrim[hidden] {
    display: none;
}

@media (min-width: 60rem) {
    .lernidee-ai-chat__panel {
        width: clamp(30rem, 57vw, 62rem);
    }
}

@keyframes lernidee-ai-chat-slide-in {
    from {
        transform: translateX(-2rem);
        opacity: 0;
    }
}

@keyframes lernidee-ai-chat-fade {
    from {
        opacity: 0;
    }
}

/* --- Header ----------------------------------------------------------- */

.lernidee-ai-chat__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem var(--lai-gutter) 0.5rem;
}

.lernidee-ai-chat__heading {
    margin: 0;
    /* Takes the free space so both icon buttons stay flush to the trailing edge. */
    flex: 1 1 auto;
    color: var(--lai-brand);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
}

.lernidee-ai-chat__close,
.lernidee-ai-chat__clear {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--lai-brand);
    cursor: pointer;
}

.lernidee-ai-chat__close:hover,
.lernidee-ai-chat__clear:hover:not(:disabled) {
    background: var(--lai-brand-soft);
}

/* Nothing to clear yet — kept in place (not hidden) so the header does not
   reflow once the first message arrives. */
.lernidee-ai-chat__clear:disabled {
    opacity: 0.35;
    cursor: default;
}

/* --- Transcript ------------------------------------------------------- */

.lernidee-ai-chat__transcript {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.75rem var(--lai-gutter) 1.5rem;
}

.lernidee-ai-chat__transcript:focus-visible {
    outline: 2px solid var(--lai-accent);
    outline-offset: -2px;
}

/* Backend-managed greeting above the conversation. Styled like an assistant turn
   but separated from it, since it is not part of the thread. */
.lernidee-ai-chat__welcome {
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--lai-border);
}

.lernidee-ai-chat__welcome[hidden] {
    display: none;
}

.lernidee-ai-chat__log {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.lernidee-ai-chat__message {
    margin: 0;
}

/* User turn: a blue speech bubble aligned to the trailing edge. */
.lernidee-ai-chat__message--user {
    position: relative;
    align-self: flex-end;
    max-width: min(85%, 34rem);
    padding: 0.7rem 1.25rem;
    border-radius: var(--lai-radius);
    background: var(--lai-brand);
    color: #fff;
    /* Preserve the user's own line breaks and wrap long words. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Bubble tail, bottom leading corner. */
.lernidee-ai-chat__message--user::after {
    content: "";
    position: absolute;
    left: 1.1rem;
    bottom: -0.4rem;
    width: 1.1rem;
    height: 0.55rem;
    background: inherit;
    clip-path: polygon(0 100%, 0 0, 100% 0);
}

/* Assistant turn: no bubble, just the KI mark next to flowing prose. */
.lernidee-ai-chat__message--assistant {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
}

.lernidee-ai-chat__avatar {
    display: grid;
    place-items: center;
    color: var(--lai-brand);
    /* Nudge the mark onto the first text line's baseline. */
    margin-top: 0.1rem;
}

.lernidee-ai-chat__avatar .lernidee-ai-chat__icon {
    width: 1.5rem;
    height: 1.5rem;
}

.lernidee-ai-chat__body {
    min-width: 0;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* --- Rendered answer markup (see renderMarkdown in chat.js) ----------- */

.lernidee-ai-chat__body > :first-child {
    margin-top: 0;
}

.lernidee-ai-chat__body > :last-child {
    margin-bottom: 0;
}

.lernidee-ai-chat__body p,
.lernidee-ai-chat__body ul,
.lernidee-ai-chat__body ol {
    margin: 0 0 0.75em;
}

.lernidee-ai-chat__body ul,
.lernidee-ai-chat__body ol {
    padding-left: 1.6em;
}

.lernidee-ai-chat__body li {
    margin-bottom: 0.2em;
}

.lernidee-ai-chat__body li:last-child {
    margin-bottom: 0;
}

/* A list directly after another block needs a little air, but two adjacent
   lists (a split list) must not double up. */
.lernidee-ai-chat__body ul + ul,
.lernidee-ai-chat__body ol + ol {
    margin-top: -0.5em;
}

.lernidee-ai-chat__body li::marker {
    color: var(--lai-brand);
}

.lernidee-ai-chat__body h3,
.lernidee-ai-chat__body h4 {
    margin: 1em 0 0.4em;
    color: var(--lai-brand);
    font-size: 1.05em;
    font-weight: 700;
    line-height: 1.3;
}

.lernidee-ai-chat__body strong {
    font-weight: 700;
}

.lernidee-ai-chat__body code {
    padding: 0.1em 0.35em;
    border-radius: 0.25rem;
    background: var(--lai-field);
    font-size: 0.9em;
}

.lernidee-ai-chat__body hr {
    height: 0;
    margin: 1.25rem 0;
    border: 0;
    border-top: 1px solid var(--lai-border);
}

/* Links carry a glyph (see decorateLink in chat.js) plus weight and a clear
   underline, so they stand out from the surrounding prose. */
.lernidee-ai-chat__body a {
    color: var(--lai-brand);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.15em;
}

.lernidee-ai-chat__body a:hover {
    color: var(--lai-accent);
}

/* Inline, not inline-flex — the link text has to stay able to wrap. */
.lernidee-ai-chat__link-icon {
    display: inline;
    margin-right: 0.3em;
}

.lernidee-ai-chat__link-icon .lernidee-ai-chat__icon {
    width: 0.95em;
    height: 0.95em;
    vertical-align: -0.1em;
    /* Compensate for the small render size — the shared 1.6 would look spindly. */
    stroke-width: 2.4;
}

.lernidee-ai-chat__message--user a {
    color: inherit;
    text-decoration: underline;
}

.lernidee-ai-chat__message--error .lernidee-ai-chat__body {
    color: var(--lai-danger);
}

/* --- Travel cards ----------------------------------------------------- */

.lernidee-ai-chat__cards {
    display: grid;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--lai-border);
}

.lernidee-ai-chat__card {
    /* Anchor for the stretched title link (see __card-title a::after). */
    position: relative;
    overflow: hidden;
    border: 1px solid var(--lai-border);
    border-radius: 0.75rem;
    background: var(--lai-surface);
    box-shadow: 0 1px 2px rgb(12 26 43 / 0.05);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.lernidee-ai-chat__card:hover {
    border-color: var(--lai-brand-line);
    box-shadow: 0 0.5rem 1.5rem rgb(12 26 43 / 0.14);
}

/* Image mosaic. The lead image spans both rows; the data-count attribute set by
   renderCardImages() picks the grid, since a card may carry one to three images. */
.lernidee-ai-chat__card-images {
    display: grid;
    gap: 2px;
    aspect-ratio: 5 / 2;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    background: var(--lai-field);
}

.lernidee-ai-chat__card-images > :first-child {
    grid-row: span 2;
}

.lernidee-ai-chat__card-images[data-count="1"] {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.lernidee-ai-chat__card-images[data-count="2"] {
    grid-template-rows: 1fr;
}

.lernidee-ai-chat__card-images[data-count="2"] > :first-child {
    grid-row: auto;
}

.lernidee-ai-chat__card-images img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Compact card (default): one stamp-sized photo beside the text instead of the
   mosaic above. The photo keeps the card recognisable, the row keeps it part of
   the conversation — the mosaic version is four times as tall and pushes the
   next line off screen. Which of the two runs is a backend setting. */
.lernidee-ai-chat__card[data-media="thumb"] {
    display: flex;
    align-items: stretch;
}

/* 16:9 as the floor, not as a fixed box, and it matches what the API actually
   delivers: the card loads the `thumb_medium_16x9` variant (640x360), so a
   narrower frame would crop the sides off every photo. A stretched flex item
   gets a definite height, which beats `aspect-ratio` — the ratio is therefore
   expressed as a min-height (9/16 of the width) and the photo grows with the
   text instead of leaving a white strip below itself when the text runs
   longer. */
.lernidee-ai-chat__card-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 15.5rem;
    min-height: 8.72rem;
    background: var(--lai-field);
}

.lernidee-ai-chat__card-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The gallery stacks every photo in the frame and shows one. Without this the
   rule above would keep a hidden image displayed — an author `display: block`
   beats the user agent's `[hidden] { display: none }`. */
.lernidee-ai-chat__card-thumb img[hidden] {
    display: none;
}

/* Paging buttons and the counter sit above the card's stretched title link,
   which covers everything at inset 0 — without the stacking context they would
   be there to see but not to click. */
.lernidee-ai-chat__card-thumb-nav {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.85);
    color: var(--lai-text);
    cursor: pointer;
    transition: background 0.2s ease;
}

.lernidee-ai-chat__card-thumb-nav:hover {
    background: var(--lai-surface);
}

.lernidee-ai-chat__card-thumb-nav:focus-visible {
    outline: 2px solid var(--lai-accent);
    outline-offset: 2px;
}

.lernidee-ai-chat__card-thumb-nav .lernidee-ai-chat__icon {
    width: 1rem;
    height: 1rem;
}

.lernidee-ai-chat__card-thumb-nav--prev {
    left: 0.4rem;
}

.lernidee-ai-chat__card-thumb-nav--next {
    right: 0.4rem;
}

/* One glyph, mirrored — the two arrows can never drift apart. */
.lernidee-ai-chat__card-thumb-nav--next .lernidee-ai-chat__icon {
    transform: scaleX(-1);
}

.lernidee-ai-chat__card-thumb-count {
    position: absolute;
    right: 0.4rem;
    bottom: 0.4rem;
    z-index: 1;
    margin: 0;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: rgb(12 26 43 / 0.62);
    color: #fff;
    font-size: 0.7rem;
    line-height: 1.5;
}

.lernidee-ai-chat__card-text {
    padding: 1rem 1.25rem 1.25rem;
}

/* The text column sets the card's height — the photo only has a floor. Every
   line here is therefore a line of photo as well, which is why the compact card
   runs a notch smaller than the mosaic one throughout. */
.lernidee-ai-chat__card[data-media="thumb"] .lernidee-ai-chat__card-text {
    flex: 1 1 auto;
    /* Without this a long title would widen the track and squeeze the photo. */
    min-width: 0;
    padding: 0.5rem 0.9rem 0.55rem;
}

.lernidee-ai-chat__card[data-media="thumb"] .lernidee-ai-chat__card-title {
    font-size: 1rem;
}

.lernidee-ai-chat__card[data-media="thumb"] .lernidee-ai-chat__card-subtitle {
    font-size: 0.9rem;
}

.lernidee-ai-chat__card[data-media="thumb"] .lernidee-ai-chat__card-facts {
    margin-top: 0.35rem;
    font-size: 0.875rem;
}

.lernidee-ai-chat__card[data-media="thumb"] .lernidee-ai-chat__card-cta {
    margin-top: 0.35rem;
    font-size: 0.9rem;
}

/* Without a photo the card would read as an empty box: a tinted panel and a
   brand edge give it the same visual weight as an image card. */
.lernidee-ai-chat__card[data-media="none"] {
    background: var(--lai-brand-soft);
    border-left: 4px solid var(--lai-brand);
}

.lernidee-ai-chat__card-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.25;
}

.lernidee-ai-chat__card-title a {
    color: var(--lai-brand);
    text-decoration: none;
}

/* Stretches the one link over the whole card: big click target, still a single
   focus stop named after the travel. */
.lernidee-ai-chat__card-title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.lernidee-ai-chat__card:hover .lernidee-ai-chat__card-title a {
    text-decoration: underline;
}

/* Since the link covers the card, show its focus on the card rather than around
   the title text alone. */
.lernidee-ai-chat__card:has(a:focus-visible) {
    outline: 2px solid var(--lai-accent);
    outline-offset: 2px;
}

.lernidee-ai-chat__card-title a:focus-visible {
    outline: none;
}

.lernidee-ai-chat__card-subtitle {
    margin: 0.3rem 0 0;
    color: var(--lai-muted);
    font-size: 0.95rem;
    line-height: 1.4;
}

.lernidee-ai-chat__card-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.9rem 0 0;
}

.lernidee-ai-chat__fact {
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: var(--lai-brand-soft);
    color: var(--lai-brand);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

/* On the tinted no-image card the soft pill would vanish into the background. */
.lernidee-ai-chat__card[data-media="none"] .lernidee-ai-chat__fact {
    background: var(--lai-surface);
}

/* The price is the figure people scan for — give it the loud treatment. */
.lernidee-ai-chat__fact[data-fact="price"] {
    background: var(--lai-brand);
    color: #fff;
}

.lernidee-ai-chat__card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    margin-top: 0.9rem;
    color: var(--lai-brand);
    font-weight: 600;
}

.lernidee-ai-chat__card-cta .lernidee-ai-chat__link-icon {
    margin: 0;
    transition: transform 0.2s ease;
}

.lernidee-ai-chat__card:hover .lernidee-ai-chat__card-cta .lernidee-ai-chat__link-icon {
    transform: translateX(0.2rem);
}

@media (max-width: 47.999rem) {
    .lernidee-ai-chat__card-images {
        aspect-ratio: 3 / 2;
    }

    .lernidee-ai-chat__card-thumb {
        width: 10rem;
        min-height: 5.625rem;
    }

    /* The frame is 160px wide here — full-size controls would leave no photo
       between them. */
    .lernidee-ai-chat__card-thumb-nav {
        width: 1.5rem;
        height: 1.5rem;
    }

    .lernidee-ai-chat__card-thumb-nav .lernidee-ai-chat__icon {
        width: 0.85rem;
        height: 0.85rem;
    }

    .lernidee-ai-chat__card-thumb-count {
        font-size: 0.65rem;
    }

    .lernidee-ai-chat__card-text {
        padding: 0.85rem 1rem 1rem;
    }

    .lernidee-ai-chat__card-title {
        font-size: 1.1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lernidee-ai-chat__card,
    .lernidee-ai-chat__card-cta .lernidee-ai-chat__link-icon {
        transition: none;
    }

    .lernidee-ai-chat__card:hover .lernidee-ai-chat__card-cta .lernidee-ai-chat__link-icon {
        transform: none;
    }
}

/* --- Contact cards ----------------------------------------------------- */

/* Built like the compact travel card — stamp beside the text — but with its
   own links, so the whole card is deliberately not one click target. */
.lernidee-ai-chat__contact {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--lai-border);
    border-radius: 0.75rem;
    background: var(--lai-surface);
    box-shadow: 0 1px 2px rgb(12 26 43 / 0.05);
}

.lernidee-ai-chat__contact[data-media="none"] {
    background: var(--lai-brand-soft);
    border-left: 4px solid var(--lai-brand);
}

.lernidee-ai-chat__contact-photo {
    flex: 0 0 auto;
    width: 5.5rem;
    min-height: 5.5rem;
    background: var(--lai-field);
}

.lernidee-ai-chat__contact-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Portraits: keep the face in frame when the card is taller than wide. */
    object-position: center top;
}

.lernidee-ai-chat__contact-text {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.7rem 1rem 0.8rem;
}

.lernidee-ai-chat__contact-name {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
}

.lernidee-ai-chat__contact-name a {
    color: var(--lai-brand);
    text-decoration: none;
}

.lernidee-ai-chat__contact-name a:hover {
    text-decoration: underline;
}

.lernidee-ai-chat__contact-role {
    margin: 0.2rem 0 0;
    color: var(--lai-muted);
    font-size: 0.95rem;
    line-height: 1.4;
}

.lernidee-ai-chat__contact-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.9rem;
    margin: 0.5rem 0 0;
    font-size: 0.95rem;
}

.lernidee-ai-chat__contact-links a {
    color: var(--lai-brand);
    font-weight: 600;
    text-decoration: none;
}

.lernidee-ai-chat__contact-links a:hover {
    text-decoration: underline;
}

.lernidee-ai-chat__contact-absent {
    margin: 0.4rem 0 0;
    color: var(--lai-danger);
    font-size: 0.85rem;
}

@media (max-width: 47.999rem) {
    .lernidee-ai-chat__contact-photo {
        width: 4.5rem;
        min-height: 4.5rem;
    }
}

/* --- Pending indicator ------------------------------------------------ */

.lernidee-ai-chat__typing {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    height: 1.6em;
}

.lernidee-ai-chat__typing span {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--lai-brand);
    opacity: 0.4;
    animation: lernidee-ai-chat-bounce 1.2s ease-in-out infinite;
}

.lernidee-ai-chat__typing span:nth-child(2) {
    animation-delay: 0.2s;
}

.lernidee-ai-chat__typing span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes lernidee-ai-chat-bounce {
    0%,
    80%,
    100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    40% {
        transform: translateY(-0.3rem);
        opacity: 1;
    }
}

/* Blinking caret while the answer is revealed (fake streaming, see chat.js).
   The class rides on whichever element currently receives text, so the caret
   sits at the insertion point — including inside a <strong> or a list item. */
.lernidee-ai-chat__body .is-typing::after {
    content: "▋";
    margin-left: 0.1em;
    color: var(--lai-brand);
    animation: lernidee-ai-chat-caret 1s steps(1) infinite;
}

/* Reveal units not reached yet are hidden so they reserve no space and show no
   stray list bullet. Asserted here because a host page's `p { display: block }`
   or `li { display: list-item }` would beat the UA [hidden] rule. */
.lernidee-ai-chat__body [hidden] {
    display: none;
}

@keyframes lernidee-ai-chat-caret {
    50% {
        opacity: 0;
    }
}

/* --- Composer --------------------------------------------------------- */

.lernidee-ai-chat__composer {
    flex: 0 0 auto;
    padding: 1.1rem var(--lai-gutter);
    background: var(--lai-brand);
}

.lernidee-ai-chat__field {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.5rem 0.4rem 0.9rem;
    border-radius: var(--lai-field-radius);
    background: var(--lai-field);
}

/**
 * No ring around the field while typing. A text field matches :focus-visible
 * whenever it has focus — mouse included — so an outline here would always show.
 * Instead the field brightens to white: a visible focus change without a frame.
 * The buttons inside keep their own ring (see the focus rules at the bottom).
 */
.lernidee-ai-chat__field:focus-within {
    background: #fff;
}

.lernidee-ai-chat__field-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--lai-brand);
}

.lernidee-ai-chat__field-icon .lernidee-ai-chat__icon {
    width: 1.5rem;
    height: 1.5rem;
}

.lernidee-ai-chat__input {
    flex: 1 1 auto;
    min-width: 0;
    max-height: 7.5rem;
    padding: 0.4rem 0;
    border: 0;
    background: transparent;
    color: var(--lai-text);
    font: inherit;
    line-height: 1.5;
    resize: none;
    overflow-y: auto;
    /* Grow with the content where supported; chat.js keeps the rows attribute
       in sync as the fallback. */
    field-sizing: content;
}

/* The textarea itself never draws a ring — neither its own outline nor a host
   page's :focus border. Focus is shown by the field brightening (see above). */
.lernidee-ai-chat__input:focus,
.lernidee-ai-chat__input:focus-visible {
    border: 0;
    outline: none;
    box-shadow: none;
}

.lernidee-ai-chat__input::placeholder {
    color: var(--lai-muted);
    opacity: 1;
}

.lernidee-ai-chat__mic,
.lernidee-ai-chat__send {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--lai-brand);
    cursor: pointer;
}

.lernidee-ai-chat__mic:hover,
.lernidee-ai-chat__send:hover {
    background: var(--lai-brand-soft);
}

/* Active whenever a voice mode is on — in conversation mode the button has to
   stay lit while the answer is being fetched, not just while the mic is open. */
.lernidee-ai-chat__mic[aria-pressed="true"],
.lernidee-ai-chat__mic[data-mode="conversation"] {
    background: var(--lai-brand);
    color: #fff;
}

/* Pulses only while actually listening. */
.lernidee-ai-chat__mic[aria-pressed="true"] {
    animation: lernidee-ai-chat-listening 1.4s ease-in-out infinite;
}

/* Second ring marks hands-free conversation mode apart from a one-off dictation. */
.lernidee-ai-chat__mic[data-mode="conversation"] {
    box-shadow: 0 0 0 2px var(--lai-surface), 0 0 0 4px var(--lai-brand);
}

.lernidee-ai-chat__mic[data-mode="conversation"]:disabled {
    opacity: 1;
}

@keyframes lernidee-ai-chat-listening {
    50% {
        box-shadow: 0 0 0 0.35rem rgb(2 61 124 / 0.2);
    }
}

.lernidee-ai-chat__send:disabled,
.lernidee-ai-chat__mic:disabled {
    opacity: 0.45;
    cursor: default;
    background: transparent;
}

/* The send button doubles as the stop button: both glyphs ship with the markup,
   data-state decides which one shows. Swapping via CSS keeps the button — and
   with it the keyboard focus — in place while a request runs. */
.lernidee-ai-chat__send-idle,
.lernidee-ai-chat__send-busy {
    display: grid;
    place-items: center;
}

.lernidee-ai-chat__send[data-state="idle"] .lernidee-ai-chat__send-busy,
.lernidee-ai-chat__send[data-state="busy"] .lernidee-ai-chat__send-idle {
    display: none;
}

/* Filled circle while busy, so "stop" reads as the active, primary action. */
.lernidee-ai-chat__send[data-state="busy"] {
    color: var(--lai-brand);
}

.lernidee-ai-chat__send[data-state="busy"]:hover {
    background: var(--lai-brand-soft);
}

/* Note under an answer the visitor stopped. */
.lernidee-ai-chat__stopped {
    margin: 0.5rem 0 0;
    color: var(--lai-muted);
    font-size: 0.8125rem;
    font-style: italic;
}

/* --- Rating ------------------------------------------------------------ */

/* Sits below the answer, deliberately quiet: it is an offer, not a call to
   action, and must not pull attention away from the answer itself. */
.lernidee-ai-chat__rating {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.6rem 0 0;
}

.lernidee-ai-chat__rate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--lai-muted);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.lernidee-ai-chat__rate .lernidee-ai-chat__icon {
    width: 1.1rem;
    height: 1.1rem;
    /* Explicit, not left to the SVG's own fill="none": the site stylesheet sets
       a global `svg { fill: currentcolor }`, and CSS beats presentation
       attributes — without this the thumb is filled in both states and the
       rating no longer looks any different once given. */
    fill: none;
}

.lernidee-ai-chat__rate:hover,
.lernidee-ai-chat__rate:focus-visible {
    background: var(--lai-brand-soft);
    color: var(--lai-brand);
}

/* The down variant is the up glyph flipped, so the pair can never drift apart
   in weight, size or corner radius the way two hand-drawn paths would. */
.lernidee-ai-chat__rate--down .lernidee-ai-chat__icon {
    transform: scaleY(-1);
}

/* Rated: the same outline, now filled. Shape stays identical, so the state
   change reads as "this one is set" rather than as a different icon. */
.lernidee-ai-chat__rate[aria-pressed="true"] {
    color: var(--lai-brand);
}

/* Distinct colour for the negative rating: with both thumbs filled in the same
   brand blue, a mis-click is easy to miss at a glance. */
.lernidee-ai-chat__rate--down[aria-pressed="true"] {
    color: var(--lai-danger);
}

.lernidee-ai-chat__rate--down:hover,
.lernidee-ai-chat__rate--down:focus-visible {
    color: var(--lai-danger);
}

.lernidee-ai-chat__rate[aria-pressed="true"] .lernidee-ai-chat__icon {
    fill: currentColor;
}

.lernidee-ai-chat__rate-note {
    color: var(--lai-muted);
    font-size: 0.8125rem;
}

/* --- Shared ----------------------------------------------------------- */

.lernidee-ai-chat__icon {
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 auto;
}

/* Scoped to the interactive elements — the textarea deliberately shows its focus
   on the surrounding field instead (see .lernidee-ai-chat__field:has(:focus-visible)). */
.lernidee-ai-chat button:focus-visible,
.lernidee-ai-chat a:focus-visible,
.lernidee-ai-chat [tabindex]:focus-visible {
    outline: 2px solid var(--lai-accent);
    outline-offset: 2px;
}

/* Inside the brand-coloured composer bar the accent ring has too little
   contrast — use white there. */
.lernidee-ai-chat__composer button:focus-visible {
    outline-color: #fff;
}

/* Visually hidden, but available to screen readers. */
.lernidee-ai-chat__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .lernidee-ai-chat__panel,
    .lernidee-ai-chat__scrim,
    .lernidee-ai-chat__mic[aria-pressed="true"] {
        animation: none;
    }

    .lernidee-ai-chat__body .is-typing::after {
        animation: none;
    }

    .lernidee-ai-chat__typing span {
        animation: lernidee-ai-chat-pulse 1.4s ease-in-out infinite;
        transform: none;
    }

    @keyframes lernidee-ai-chat-pulse {
        0%,
        100% {
            opacity: 0.3;
        }
        50% {
            opacity: 0.9;
        }
    }
}