/* Live chat (Crisp): floating button and chat panel. Behaviour is in js/live-chat.js. */

.live-chat {
    --live-chat-offset: 0px;
    --live-chat-gap: 1.25rem;
}

/* Button and panel are siblings, not nested, so each has its own stacking order: the button sits under
   the sticky nav (1000) and the panel on phones sits over everything, including the consent banner. */
.live-chat-launcher {
    position: fixed;
    right: var(--live-chat-gap);
    bottom: calc(var(--live-chat-gap) + var(--live-chat-offset));
    z-index: 900;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1.1rem;
    border: 0;
    border-radius: 999px;
    background: var(--brand-600, #2563eb);
    color: #fff;
    font-family: var(--font-sans, system-ui, sans-serif);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(11, 22, 38, .18));
    transition: background-color .12s ease, transform .12s ease;
}
.live-chat-launcher:hover { background: var(--brand-700, #1d4ed8); }
.live-chat-launcher:active { transform: scale(.97); }
.live-chat-launcher:focus-visible,
.live-chat-close:focus-visible,
.live-chat-footer a:focus-visible {
    outline: 3px solid var(--brand-300, #93b4fd);
    outline-offset: 2px;
}

.live-chat-panel {
    position: fixed;
    right: var(--live-chat-gap);
    bottom: calc(var(--live-chat-gap) + var(--live-chat-offset) + 3.5rem);
    z-index: 905;
    display: flex;
    flex-direction: column;
    width: min(380px, calc(100vw - 2.5rem));
    height: min(640px, calc(100vh - 9rem - var(--live-chat-offset)));
    height: min(640px, calc(100dvh - 9rem - var(--live-chat-offset)));
    overflow: hidden;
    border-radius: var(--radius-lg, 14px);
    background: var(--surface, #fff);
    box-shadow: var(--shadow-xl, 0 16px 48px rgba(11, 22, 38, .22));
    animation: live-chat-in .18s ease-out;
}
.live-chat-panel[hidden] { display: none; }

@keyframes live-chat-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.live-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .875rem 1rem;
    background: var(--navy, #0b1626);
    color: #fff;
}
.live-chat-heading { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.live-chat-heading strong {
    font-family: var(--font-display, var(--font-sans, system-ui, sans-serif));
    font-size: 1rem;
}
.live-chat-heading span { font-size: .8125rem; color: var(--ink-300, #94a3b8); }

.live-chat-close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -.4rem -.4rem -.4rem 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
}
.live-chat-close:hover { background: rgba(255, 255, 255, .12); }

.live-chat-body { flex: 1; min-height: 0; background: var(--surface-2, #f7f9fc); }
.live-chat-frame { display: block; width: 100%; height: 100%; border: 0; }

.live-chat-footer {
    margin: 0;
    padding: .55rem 1rem;
    border-top: 1px solid var(--line, #e3e8ef);
    background: var(--surface, #fff);
    color: var(--ink-500, #4a5768);
    font-size: .75rem;
    line-height: 1.4;
    text-align: center;
}
.live-chat-footer a { color: var(--brand-700, #1d4ed8); }

/* Phones: the panel becomes a full-screen sheet. */
@media (max-width: 640px) {
    .live-chat-panel {
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 10001; /* above the consent banner (10000) so it cannot cover the message box */
        width: auto;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
    }
    .live-chat-header { padding-top: calc(.875rem + env(safe-area-inset-top)); }
    .live-chat-footer { padding-bottom: calc(.55rem + env(safe-area-inset-bottom)); }
}

body.live-chat-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .live-chat-panel { animation: none; }
    .live-chat-launcher { transition: none; }
}

@media print {
    .live-chat { display: none; }
}