/* chatbot.css - the on-site AI assistant widget (Ch 20).
   Scoped under .lbk-chat so it can't collide with the rest of the site. Colors
   lean on the brand's deep teal/ink so it feels part of the site, not bolted on. */

.lbk-chat {
    --cb-ink: #0a2f45;
    --cb-accent: #0a6a8a;
    --cb-accent-ink: #ffffff;
    --cb-bg: #ffffff;
    --cb-line: #dfe6ea;
    --cb-you: #0a6a8a;
    --cb-bot: #eef3f6;
    position: fixed;
    right: clamp(12px, 4vw, 28px);
    bottom: clamp(12px, 4vw, 28px);
    z-index: 1000;
    font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* The bubble button (the always-visible part). */
.lbk-chat__bubble {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.1rem .7rem .9rem;
    border: 0;
    border-radius: 999px;
    background: var(--cb-accent);
    color: var(--cb-accent-ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(10, 47, 69, .28);
    transition: transform .15s ease, box-shadow .15s ease;
}
.lbk-chat__bubble:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(10, 47, 69, .34); }
.lbk-chat__bubble:focus-visible { outline: 3px solid #7fd0e6; outline-offset: 2px; }
.lbk-chat__bubble-icon { width: 22px; height: 22px; }
/* Hide the bubble while the panel is open (the panel replaces it visually). */
.lbk-chat.is-open .lbk-chat__bubble { display: none; }

/* The panel. CRITICAL: [hidden] must win over any id/display rule, so the widget
   loads CLOSED (the trap the book calls out). This one line guarantees it. */
.lbk-chat__panel[hidden] { display: none !important; }

.lbk-chat__panel {
    display: flex;
    flex-direction: column;
    width: min(370px, calc(100vw - 24px));
    height: min(560px, calc(100vh - 40px));
    background: var(--cb-bg);
    border: 1px solid var(--cb-line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(10, 47, 69, .32);
}

.lbk-chat__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: .9rem 1rem;
    background: var(--cb-ink);
    color: #fff;
}
.lbk-chat__title { margin: 0; font-weight: 700; font-size: 1rem; }
.lbk-chat__subtitle { margin: .1rem 0 0; font-size: .8rem; color: #bcd6e2; }
.lbk-chat__close {
    background: transparent; border: 0; color: #cfe6ef; font-size: 1.6rem; line-height: 1;
    cursor: pointer; padding: 0 .2rem;
}
.lbk-chat__close:hover { color: #fff; }

.lbk-chat__log {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    background: #f8fafb;
}

.lbk-chat__msg {
    max-width: 85%;
    padding: .55rem .8rem;
    border-radius: 14px;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.lbk-chat__msg--bot { align-self: flex-start; background: var(--cb-bot); color: var(--cb-ink); border-bottom-left-radius: 4px; }
.lbk-chat__msg--you { align-self: flex-end; background: var(--cb-you); color: #fff; border-bottom-right-radius: 4px; }

/* The typing dots. */
.lbk-chat__typing { display: inline-flex; gap: 4px; align-items: center; }
.lbk-chat__typing span {
    width: 7px; height: 7px; border-radius: 50%; background: #9fb3bd;
    animation: lbkBlink 1.2s infinite ease-in-out;
}
.lbk-chat__typing span:nth-child(2) { animation-delay: .2s; }
.lbk-chat__typing span:nth-child(3) { animation-delay: .4s; }
@keyframes lbkBlink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }

.lbk-chat__form {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    padding: .6rem;
    border-top: 1px solid var(--cb-line);
    background: #fff;
}
.lbk-chat__input {
    flex: 1 1 auto;
    resize: none;
    border: 1px solid var(--cb-line);
    border-radius: 12px;
    padding: .55rem .7rem;
    font: inherit;
    max-height: 120px;
}
.lbk-chat__input:focus-visible { outline: 2px solid var(--cb-accent); outline-offset: 1px; }
.lbk-chat__send {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    border: 0; border-radius: 50%;
    background: var(--cb-accent); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.lbk-chat__send:hover { background: #08566f; }
.lbk-chat__send:focus-visible { outline: 3px solid #7fd0e6; outline-offset: 2px; }

.lbk-chat__note { margin: 0; padding: 0 .8rem .7rem; font-size: .72rem; color: #6b7c85; background: #fff; }
.lbk-chat__note a { color: var(--cb-accent); }

.lbk-chat__sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .lbk-chat__bubble, .lbk-chat__typing span { transition: none; animation: none; }
}

/* On phones the fixed Call / Get-a-Free-Quote bar sits along the bottom edge, so
   lift the chat launcher above it - otherwise the bubble covers the Quote button. */
@media (max-width: 760px) {
    .lbk-chat { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}