/* Lotse, the AI assistant (decision 9.21): the chat (page and panel) and the floating button with its panel. */
.dlt { display: flex; flex-direction: column; gap: 1rem; width: 100%; }
.dlt-page { max-width: 52rem; margin-inline: auto; }
.dlt-card { background: var(--dui-card); border: 1px solid var(--dui-border); border-radius: var(--dui-radius, 1rem); box-shadow: var(--dui-shadow); }
.dlt-intro { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.dlt-intro p { margin: 0; color: var(--dui-muted); font-size: .875rem; }
.dlt-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .75rem; }
.dlt-group h3 { margin: 0 0 .375rem; font-size: .75rem; font-weight: 500; color: var(--dui-muted); }
.dlt-chip { display: block; width: 100%; text-align: start; margin-bottom: .375rem; padding: .5rem .75rem; font-size: .8125rem; color: var(--dui-strong); background: var(--dui-hover); border: 1px solid transparent; border-radius: var(--dui-radius-control, .5rem); cursor: pointer; transition: background-color .15s, border-color .15s; }
.dlt-chip:hover { border-color: var(--dui-border); background: var(--dui-card); }
.dlt-thread { display: flex; flex-direction: column; gap: .75rem; }
.dlt-msg { max-width: 100%; font-size: .875rem; line-height: 1.55; overflow-wrap: anywhere; }
.dlt-user { align-self: flex-end; max-width: 85%; padding: .625rem .875rem; background: var(--dui-hover); border: 1px solid var(--dui-border); border-radius: var(--dui-radius-md, .7rem); white-space: pre-wrap; color: var(--dui-strong); }
.dlt-bot { padding: 1rem 1.125rem; }
.dlt-who { display: flex; align-items: center; gap: .375rem; margin-bottom: .375rem; font-size: .75rem; font-weight: 500; color: var(--dui-muted); }
.dlt-who svg { width: 1rem; height: 1rem; }
.dlt-answer > :first-child { margin-top: 0; } .dlt-answer > :last-child { margin-bottom: 0; }
.dlt-answer p, .dlt-answer ul, .dlt-answer ol { margin: .5rem 0; }
.dlt-answer ul, .dlt-answer ol { padding-inline-start: 1.25rem; } .dlt-answer ul { list-style: disc; } .dlt-answer ol { list-style: decimal; }
.dlt-answer strong { font-weight: 600; color: var(--dui-strong); }
.dlt-answer a { color: var(--primary-600); text-decoration: underline; text-underline-offset: 2px; }
.dark .dlt-answer a { color: var(--primary-400); }
.dlt-answer table { width: 100%; border-collapse: collapse; margin: .5rem 0; font-size: .8125rem; font-variant-numeric: tabular-nums; display: block; overflow-x: auto; }
.dlt-answer th, .dlt-answer td { text-align: start; padding: .375rem .5rem; border-bottom: 1px solid var(--dui-border); white-space: nowrap; }
.dlt-answer th { font-weight: 500; color: var(--dui-muted); }
.dlt-answer h1, .dlt-answer h2, .dlt-answer h3 { font-size: .9375rem; font-weight: 600; margin: .75rem 0 .25rem; }
.dlt-copy { margin-top: .5rem; display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; color: var(--dui-muted); background: none; border: 0; padding: 0; cursor: pointer; }
.dlt-copy:hover { color: var(--dui-strong); }
.dlt-copy svg { width: .875rem; height: .875rem; }
.dlt-wait, .dlt-loading { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--dui-muted); padding: .25rem; }
.dlt-loading { justify-content: center; padding: 2rem; }
.dlt-dots span { display: inline-block; width: .375rem; height: .375rem; margin-inline-end: .1875rem; border-radius: 50%; background: currentColor; opacity: .35; animation: dlt-pulse 1.2s infinite; }
.dlt-dots span:nth-child(2) { animation-delay: .2s; } .dlt-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes dlt-pulse { 0%, 100% { opacity: .25 } 50% { opacity: .9 } }
.dlt-error { overflow-wrap: anywhere; padding: .75rem 1rem; font-size: .875rem; color: var(--danger-700); background: color-mix(in srgb, var(--danger-500) 8%, transparent); border-radius: var(--dui-radius-md, .7rem); }
.dark .dlt-error { color: var(--danger-300); }
.dlt-form { position: sticky; bottom: .75rem; padding: .5rem; display: flex; gap: .5rem; align-items: flex-end; }
.dlt-form textarea { flex: 1; min-height: 2.75rem; max-height: 12rem; resize: none; border: 0; background: transparent; padding: .625rem .5rem; font-size: .875rem; color: var(--dui-strong); outline: none; field-sizing: content; }
.dlt-form textarea::placeholder { color: var(--dui-muted); }
.dlt-send { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--th-btn-radius, var(--dui-radius-control, .5rem)); background: var(--th-btn, var(--primary-600)); color: var(--th-on, #fff); border: 0; cursor: pointer; transition: opacity .15s; }
.dlt-send:disabled { opacity: .4; cursor: default; }
.dlt-send svg { width: 1.125rem; height: 1.125rem; }
.dlt-note { font-size: .75rem; color: var(--dui-muted); text-align: center; margin: -.25rem 0 0; }
.dlt-top { display: flex; justify-content: flex-end; gap: .5rem; }

/* history (decision 9.22): a list in the panel, a column beside the chat on a wide page */
.dlt-history { display: flex; flex-direction: column; gap: .125rem; }
.dlt-history h3 { margin: .75rem 0 .25rem; font-size: .75rem; font-weight: 500; color: var(--dui-muted); }
.dlt-history h3:first-of-type { margin-top: .25rem; }
.dlt-conv { display: flex; align-items: center; border-radius: var(--dui-radius-control, .5rem); transition: background-color .15s; }
.dlt-conv:hover, .dlt-conv.is-on { background: var(--dui-hover); }
.dlt-conv-open { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: .5rem; padding: .5rem .625rem; background: none; border: 0; text-align: start; cursor: pointer; color: var(--dui-strong); font-size: .8125rem; }
.dlt-conv-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlt-conv.is-on .dlt-conv-title { font-weight: 600; }
.dlt-conv-time { flex: none; font-size: .75rem; color: var(--dui-muted); font-variant-numeric: tabular-nums; }
.dlt-conv-del { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; margin-inline-end: .125rem; border: 0; background: none; border-radius: var(--dui-radius-control, .5rem); color: var(--gray-400); cursor: pointer; opacity: 0; transition: opacity .15s, color .15s; }
.dlt-conv:hover .dlt-conv-del, .dlt-conv-del:focus-visible { opacity: 1; }
.dlt-conv-del:hover { color: var(--danger-600); }
.dlt-conv-del svg { width: 1rem; height: 1rem; }
@media (hover: none) { .dlt-conv-del { opacity: 1; } }
.dlt-history-empty, .dlt-history-note { margin: .5rem .625rem; font-size: .75rem; color: var(--dui-muted); }
.dlt-history-note { margin-top: 1rem; }
.dlt-back { display: inline-flex; align-items: center; gap: .375rem; align-self: flex-start; margin-bottom: .25rem; padding: .375rem .5rem; border: 0; background: none; font-size: .8125rem; font-weight: 500; color: var(--dui-strong); border-radius: var(--dui-radius-control, .5rem); cursor: pointer; }
.dlt-back:hover { background: var(--dui-hover); }
.dlt-back svg { width: 1rem; height: 1rem; }
.dlt-compact .dlt-history { flex: 1; min-height: 0; overflow-y: auto; padding: .75rem .625rem; }
/* page: the list left of the chat on wide screens, a toggled list above it on narrow ones */
.dlt-page { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 72rem; }
.dlt-page > .dlt-top, .dlt-page > .dlt-intro { grid-column: 1 / -1; }
.dlt-page > .dlt-history { display: none; }
.dlt-page > .dlt-history.is-open { display: flex; }
@media (min-width: 64rem) {
    .dlt-page { grid-template-columns: 15rem minmax(0, 1fr); column-gap: 1.5rem; align-items: start; }
    .dlt-page > .dlt-history { display: flex; grid-column: 1; grid-row: 2 / span 3; position: sticky; top: 5rem; max-height: calc(100dvh - 7rem); overflow-y: auto; }
    .dlt-page > .dlt-thread, .dlt-page > .dlt-form, .dlt-page > .dlt-note { grid-column: 2; }
    .dlt-page .dlt-history-toggle { display: none; }
}
.dlt-usage { display: block; margin-top: .125rem; font-variant-numeric: tabular-nums; }
.dlt-topics { display: none; }
/* the page is the conversation: the "+" button of the app would lie on the field, so it stays away here */
body:has(.dlt-page) .dlf { display: none; }
.dlt-page .dlt-form { bottom: calc(env(safe-area-inset-bottom, 0px) + .75rem); }
/* phones (12.11.2026): the examples of one topic at a time (chips choose it) instead of a list two screens long */
@media (max-width: 40rem) {
    .dlt-page { gap: .75rem; }
    .dlt-page .dlt-intro { padding: 1rem; gap: .75rem; }
    .dlt-page .dlt-topics { display: flex; flex-wrap: wrap; gap: .375rem; }
    .dlt-topics button { min-height: 2.25rem; padding: .25rem .75rem; font-size: .8125rem; font-weight: 500; color: var(--dui-strong); background: var(--dui-hover); border: 0; box-shadow: inset 0 0 0 1px var(--dui-border); border-radius: var(--th-btn-radius, var(--dui-radius-control, .5rem)); cursor: pointer; }
    .dlt-topics button[aria-pressed="true"] { background: var(--gray-950); color: #fff; box-shadow: none; }
    .dark .dlt-topics button[aria-pressed="true"] { background: #fff; color: var(--gray-950); }
    .dlt-page .dlt-groups { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .dlt-page .dlt-group:not(.is-on), .dlt-page .dlt-group h3 { display: none; }
    .dlt-page .dlt-chip { min-height: 2.5rem; margin-bottom: .375rem; }
    .dlt-page .dlt-chip:last-child { margin-bottom: 0; }
    .dlt-page .dlt-note { margin-bottom: .25rem; }
}

/* compact: inside the floating panel */
.dlt-compact { gap: .75rem; height: 100%; min-height: 0; }
.dlt-compact .dlt-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .75rem; padding: .75rem .875rem 0; overscroll-behavior: contain; }
.dlt-compact .dlt-intro { padding: 0; border: 0; box-shadow: none; background: none; }
.dlt-compact .dlt-groups { grid-template-columns: 1fr; gap: .25rem; }
.dlt-compact .dlt-group h3 { display: none; }
.dlt-compact .dlt-bot { padding: .75rem .875rem; }
.dlt-compact .dlt-form { position: static; margin: 0 .75rem; }
.dlt-compact .dlt-note { margin: -.375rem .75rem .625rem; }
@media (prefers-reduced-motion: reduce) { .dlt-dots span { animation: none; } }

/* the panel, opened from "Lotse" in the top bar (decision 9.98): under the top bar on the right, ending above the
   form action bar, so it never lies on a form's buttons; full screen on phones */
.dlf { position: fixed; top: 0; right: 0; z-index: 35; }
.dlf [x-cloak] { display: none !important; }
body:has(.fi-modal-open) .dlf, .dealer-search-open .dlf { display: none; }
.dlf-panel { position: fixed; top: 4.5rem; right: calc(env(safe-area-inset-right, 0px) + 1rem); width: min(26rem, calc(100vw - 2rem)); height: min(40rem, calc(100dvh - 11rem)); min-height: min(22rem, calc(100dvh - 5.5rem)); display: flex; flex-direction: column; background: var(--gray-50, #fafafa); border: 1px solid var(--dui-border); border-radius: var(--dui-radius, 1rem); box-shadow: 0 24px 48px -12px rgb(0 0 0 / .28), 0 2px 8px rgb(0 0 0 / .08); overflow: hidden; }
.dark .dlf-panel { background: var(--gray-950, #0a0a0a); box-shadow: 0 24px 48px -12px rgb(0 0 0 / .8); }
.dlf-head { display: flex; align-items: center; gap: .5rem; padding: .625rem .625rem .625rem .875rem; border-bottom: 1px solid var(--dui-border); background: var(--dui-card); }
.dlf-title { display: flex; align-items: center; gap: .375rem; font-size: .9375rem; font-weight: 600; color: var(--dui-strong); margin-inline-end: auto; }
.dlf-title svg { width: 1.125rem; height: 1.125rem; color: var(--th-btn, var(--primary-600)); }
.dlf-icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--dui-radius-control, .5rem); color: var(--gray-500); background: none; border: 0; cursor: pointer; transition: background-color .15s, color .15s; }
.dlf-icon:hover { background: var(--dui-hover); color: var(--dui-strong); }
.dlf-icon svg { width: 1.125rem; height: 1.125rem; }
.dlf-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dlf-body > div { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* the opening and closing motion is in panel.blade.php (clip-path from and back into the top bar button) */
/* phones and short windows (large zoom): the panel is a full-screen dialog with its close button on top */
@media (max-width: 40rem), (max-height: 34rem) {
    .dlf-panel { inset: 0; min-height: 0; width: auto; height: 100dvh; border-radius: 0; border: 0; }
}