/* V1.1.1 – verejný konfigurátor, široký chat a animácia. */
.chat-page {
    display: block;
    max-width: 1500px;
    padding-top: 22px;
    padding-bottom: 28px;
}
.chat-info { display: none; }
.chat-panel {
    width: 100%;
    min-height: min(78vh, 850px);
    border-color: var(--brand-border, #ded8d7);
}
.chat-heading { flex-wrap: wrap; }
.chat-heading strong { color: var(--brand-text, #202125); }
.messages {
    max-height: none;
    min-height: 350px;
    flex: 1 1 auto;
    overflow-y: auto;
}
.chat-page .messages .bubble { max-width: min(90%, 850px); }
.chat-panel form { display: grid; gap: 8px; }
.chat-panel .compose { display: flex; flex-wrap: nowrap; gap: 10px; }
.chat-panel .compose input { min-width: 0; flex: 1 1 auto; }
.chat-panel .compose #send { flex: 0 0 auto; }
.chat-panel .quote-action-row { display: flex; justify-content: flex-end; }
.chat-panel .quote-action-row #quote-request { min-width: 170px; }
.chat-page .typing-dots { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; }
.chat-page .typing-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--brand-primary, #8c151c);
    animation: aria-typing 1.25s infinite ease-in-out;
}
.chat-page .typing-dots span:nth-child(2) { animation-delay: .18s; }
.chat-page .typing-dots span:nth-child(3) { animation-delay: .36s; }
@keyframes aria-typing {
    0%, 60%, 100% { opacity: .25; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
    .chat-page .typing-dots span { animation: none; opacity: .8; }
}
@media (max-width: 600px) {
    .chat-page { padding: 14px 12px 22px; }
    .chat-panel { min-height: 75vh; }
    .chat-page .messages .bubble { max-width: 96%; }
    .chat-panel .quote-action-row #quote-request { flex: 1 1 auto; }
}

/* V1.1.2: layout definitive — override historic two-column chat.css */
html body main.container.chat-page {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    width: min(100% - 32px, 1500px) !important;
    max-width: 1500px !important;
    margin-inline: auto !important;
    padding: 22px 0 30px !important;
    gap: 0 !important;
}
html body main.chat-page > .chat-info { display: none !important; }
html body main.chat-page > .chat-panel {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    min-height: min(80vh, 850px);
}
html body main.chat-page .compose { display: flex !important; flex-direction: row !important; }
html body main.chat-page .compose input { flex: 1 1 auto !important; min-width: 0 !important; }
html body main.chat-page .quote-action-row { display: flex !important; justify-content: flex-end; }
@media(max-width:600px) {
    html body main.container.chat-page { width: calc(100% - 20px) !important; padding: 12px 0 20px !important; }
}

/* V1.1.3 – pevná obrazovka: posúva sa len história správ. */
html {
    height: 100%;
}
html body {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    margin: 0;
    overflow: hidden;
}
html body > .site-header {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
}
html body main.container.chat-page {
    box-sizing: border-box;
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding-block: 12px !important;
}
html body main.chat-page > .chat-panel {
    box-sizing: border-box;
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
}
html body main.chat-page .chat-heading {
    flex: 0 0 auto !important;
}
html body main.chat-page .messages {
    box-sizing: border-box;
    flex: 1 1 0% !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
html body main.chat-page #chat-form {
    flex: 0 0 auto !important;
    min-height: 0;
}
@media (max-width: 600px) {
    html body main.container.chat-page {
        padding-block: 8px !important;
    }
    html body main.chat-page #chat-form {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}