/* Reader assistant dialog, opened from the "Chat với AI" item of the contact menu. Only needs the colour tokens. */
.ai-chat-dialog {
    width: min(520px, calc(100vw - 24px)); max-height: min(86vh, 720px); max-height: min(86dvh, 720px); margin: auto; padding: 16px; box-sizing: border-box;
    border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-bg); color: var(--color-text-primary); box-shadow: var(--shadow-lg);
}
.ai-chat-dialog[open] { display: flex; flex-direction: column; gap: 12px; animation: ai-chat-in .22s cubic-bezier(.2, .8, .2, 1); }
.ai-chat-dialog[open]::backdrop { animation: ai-chat-fade .2s ease-out; }
/* The dialog itself takes focus when opened by touch, so the close button does not show a ring the reader never asked for. */
.ai-chat-dialog:focus { outline: none; }
.ai-chat-dialog::backdrop { background: rgb(0 0 0 / .5); }
@keyframes ai-chat-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes ai-chat-fade { from { opacity: 0; } }
@keyframes ai-chat-pulse { 50% { opacity: .5; } }
.ai-chat-dialog > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ai-chat-dialog h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-family: inherit; font-size: 1.125rem; line-height: 1.3; }
.ai-chat-dialog p { margin: 0; line-height: 1.55; }
/* The theme has no global .screen-reader-text rule, so the hidden input label needs its own. */
.ai-chat-dialog .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ai-chat-story { color: var(--color-text-secondary); font-size: .875rem; overflow-wrap: anywhere; }
.ai-chat-dialog .btn { min-height: 44px; }

.ai-chat-actions { display: flex; align-items: center; gap: 8px; }
.ai-chat-reset[hidden] { display: none; }
.ai-chat-log { display: flex; flex-direction: column; gap: 8px; min-height: 120px; max-height: 44vh; overflow-y: auto; padding: 2px; scroll-behavior: smooth; }
.ai-chat-msg { max-width: 88%; padding: 10px 12px; border-radius: 14px; font-size: .9375rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; text-wrap: pretty; }
.ai-chat-msg.is-bot { align-self: flex-start; border-bottom-left-radius: 4px; background: var(--color-bg-tertiary); }
.ai-chat-msg.is-user { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--color-badge-primary-bg); color: var(--color-badge-primary-text); }
.ai-chat-link { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ai-chat-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 2px; }
.ai-chat-msg.is-pending { color: var(--color-text-secondary); font-style: italic; animation: ai-chat-pulse 1.2s ease-in-out infinite; }
.ai-chat-msg.is-error { align-self: stretch; max-width: none; border: 1px solid transparent; background: var(--color-badge-danger-bg); color: var(--color-badge-danger-text); }

.ai-chat-suggestions { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-chat-suggestions[hidden] { display: none; }
.ai-chat-suggestions button { min-height: 44px; padding: 6px 14px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-bg); color: var(--color-text-primary); font: inherit; font-size: .8125rem; cursor: pointer; transition-property: border-color, background-color, transform; transition-duration: .15s; transition-timing-function: ease-out; }
/* Hover only where a pointer can really hover; on touch it would stay stuck after a tap. */
@media (hover: hover) { .ai-chat-suggestions button:hover { border-color: var(--color-primary); } }
.ai-chat-suggestions button:active { background: var(--color-bg-tertiary); transform: scale(.97); }
.ai-chat-suggestions button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.ai-chat-form { display: flex; align-items: flex-end; gap: 8px; margin: 0; }
.ai-chat-form textarea {
    flex: 1 1 auto; min-width: 0; min-height: 44px; max-height: 140px; padding: 10px 12px; box-sizing: border-box; resize: none;
    border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-bg); color: var(--color-text-primary); font: inherit; font-size: 1rem; line-height: 1.45;
}
.ai-chat-form textarea:focus-visible { border-color: var(--color-primary); outline: 1px solid var(--color-primary); outline-offset: 0; }
.ai-chat-form .btn { flex: none; width: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; transition-property: transform, background-color, box-shadow, opacity; transition-duration: .15s; transition-timing-function: ease-out; }
.ai-chat-form .btn:active:not(:disabled) { transform: scale(.94); }
.ai-chat-quota { color: var(--color-text-secondary); font-size: .8125rem; }
.ai-chat-quota.is-low { color: var(--color-badge-warning-text); font-weight: 600; }
.ai-chat-note { color: var(--color-text-secondary); font-size: .75rem; }
.ai-chat-note a { color: inherit; text-decoration: underline; }

@media (max-width: 600px) {
    /* Floating popup, not a modal sheet: ai-chat.js opens it with show(), so there is no dark backdrop and the page behind stays readable and scrollable.
       Kept above the contact button (910) and below the site's own modals. */
    .ai-chat-dialog { position: fixed; z-index: 1250; top: auto; left: 8px; right: 8px; width: auto; max-width: none; margin: 0;
        height: 62vh; height: min(62dvh, 520px); max-height: none; gap: 8px; border-radius: 16px; padding: 12px; overscroll-behavior: contain;
        box-shadow: 0 8px 32px rgb(0 0 0 / .28), 0 0 0 1px var(--color-border); }
    /* The on-screen keyboard overlays the page instead of resizing it, so ai-chat.js measures the visible area (visualViewport)
       and these two variables keep the popup, and the input in it, above the keyboard. */
    .ai-chat-dialog { bottom: calc(8px + env(safe-area-inset-bottom, 0px) + var(--ai-kb, 0px)); }
    .ai-chat-dialog.is-keyboard { height: calc(var(--ai-vv-height, 100dvh) - 16px); max-height: calc(100dvh - 16px); }
    /* With the keyboard up the conversation needs the room: drop the subject line and the disclaimer. */
    .ai-chat-dialog.is-keyboard .ai-chat-story, .ai-chat-dialog.is-keyboard .ai-chat-note { display: none; }
    .ai-chat-story { flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ai-chat-dialog > header { flex: none; }
    .ai-chat-log { flex: 1 1 auto; min-height: 0; max-height: none; overscroll-behavior: contain; }
    .ai-chat-msg { max-width: 92%; }
    .ai-chat-reset span { display: none; }
    .ai-chat-reset { width: 44px; padding: 0; }
    .ai-chat-suggestions { flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px; padding: 0 12px 2px; scrollbar-width: none; }
    .ai-chat-suggestions::-webkit-scrollbar { display: none; }
    .ai-chat-suggestions button { flex: none; white-space: nowrap; }
    .ai-chat-quota, .ai-chat-note { font-size: .75rem; line-height: 1.4; }
}
/* Short phones: the conversation matters more than the disclaimer. */
@media (max-width: 600px) and (max-height: 640px) { .ai-chat-note { display: none; } }
@media (prefers-reduced-motion: reduce) {
    .ai-chat-log { scroll-behavior: auto; }
    .ai-chat-dialog[open], .ai-chat-dialog[open]::backdrop, .ai-chat-msg.is-pending { animation: none; }
    .ai-chat-suggestions button:active, .ai-chat-form .btn:active:not(:disabled) { transform: none; }
}