/* ==========================================================================
   GLAVIS Assistant — chatbot widget
   Reuses the brand tokens declared in css/style.css (:root)
   ========================================================================== */

.glv-chat {
    --glv-dark: var(--color-defence-dark, #162C15);
    --glv-green: var(--color-defence-green, #2E522A);
    --glv-accent: var(--color-accent, #FFD524);
    --glv-surface: #FFFFFF;
    --glv-canvas: #F4F6F3;
    --glv-line: #DDE3DC;
    --glv-ink: #1B241A;
    --glv-ink-soft: #5A6558;
    --glv-radius: 14px;
    --glv-shadow: 0 18px 48px rgba(22, 44, 21, .22), 0 4px 12px rgba(22, 44, 21, .10);

    position: fixed;
    right: clamp(1rem, 3vw, 1.75rem);
    /* --glv-lift is set from JS to the height of the cookie-consent banner
       (position:fixed; bottom:0; z-index:9999) so the launcher is never
       covered by it. Deliberately kept BELOW the banner's z-index: if the
       measurement ever fails, consent stays reachable. */
    bottom: calc(clamp(1rem, 3vw, 1.75rem) + var(--glv-lift, 0px));
    z-index: 9990;
    font-family: var(--font-body, 'Nunito Sans', sans-serif);
    transition: bottom var(--transition-normal, .3s ease);
}

/* ---------- Launcher ---------- */

.glv-chat__launcher {
    position: relative;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--glv-dark);
    color: var(--glv-accent);
    cursor: pointer;
    box-shadow: var(--glv-shadow);
    transition: transform var(--transition-fast, .15s ease),
                background-color var(--transition-fast, .15s ease);
}

.glv-chat__launcher:hover { transform: translateY(-2px); background: var(--glv-green); }
.glv-chat__launcher:active { transform: translateY(0); }

.glv-chat__launcher-icon {
    grid-area: 1 / 1;
    display: grid;
    place-items: center;
    transition: opacity var(--transition-fast, .15s ease),
                transform var(--transition-fast, .15s ease);
}

.glv-chat__launcher-icon--close { opacity: 0; transform: rotate(-45deg) scale(.6); }

.glv-chat.is-open .glv-chat__launcher-icon--open  { opacity: 0; transform: rotate(45deg) scale(.6); }
.glv-chat.is-open .glv-chat__launcher-icon--close { opacity: 1; transform: none; }

/* Attention pulse — stops once the widget has been opened */
.glv-chat__launcher-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--glv-accent);
    animation: glv-pulse 2.8s ease-out infinite;
    pointer-events: none;
}

.glv-chat.is-open .glv-chat__launcher-pulse,
.glv-chat.is-seen .glv-chat__launcher-pulse { display: none; }

@keyframes glv-pulse {
    0%       { opacity: .7; transform: scale(1); }
    70%,100% { opacity: 0;  transform: scale(1.55); }
}

/* ---------- Panel ---------- */

.glv-chat__panel {
    position: absolute;
    right: 0;
    bottom: calc(60px + var(--spacing-sm, 1rem));
    display: flex;
    flex-direction: column;
    width: min(23.5rem, calc(100vw - 2rem));
    /* The lift is subtracted as well, otherwise the panel overflows the top of
       the viewport while the cookie banner is pushing the widget upwards. */
    height: min(34rem, calc(100vh - 8rem - var(--glv-lift, 0px)));
    background: var(--glv-canvas);
    border-radius: var(--glv-radius);
    box-shadow: var(--glv-shadow);
    overflow: hidden;
    transform-origin: bottom right;
    animation: glv-in .22s cubic-bezier(.22, 1, .36, 1);
}

.glv-chat__panel[hidden] { display: none; }

@keyframes glv-in {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Header ---------- */

.glv-chat__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xs, .5rem);
    padding: .85rem 1rem;
    background: linear-gradient(135deg, var(--glv-dark) 0%, var(--glv-green) 140%);
    color: var(--glv-surface);
    flex-shrink: 0;
}

.glv-chat__brand { display: flex; align-items: center; gap: .6rem; min-width: 0; }

.glv-chat__mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(255, 213, 36, .14);
    color: var(--glv-accent);
    flex-shrink: 0;
}

.glv-chat__title {
    font-family: var(--font-heading, 'Bebas Neue', sans-serif);
    font-size: 1.12rem;
    font-weight: 400;
    letter-spacing: .06em;
    line-height: 1.15;
}

.glv-chat__tools { display: flex; align-items: center; gap: .3rem; flex-shrink: 0; }

.glv-chat__icon-btn {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, .78);
    cursor: pointer;
    transition: background-color var(--transition-fast, .15s ease),
                color var(--transition-fast, .15s ease);
}

.glv-chat__icon-btn:hover { background: rgba(255, 255, 255, .14); color: var(--glv-surface); }

/* ---------- Message log ---------- */

.glv-chat__log {
    flex: 1;
    min-height: 0;
    padding: 1rem .9rem .4rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--glv-line) transparent;
}

.glv-chat__log::-webkit-scrollbar { width: 6px; }
.glv-chat__log::-webkit-scrollbar-thumb { background: var(--glv-line); border-radius: 3px; }

.glv-msg {
    max-width: 86%;
    margin-bottom: .5rem;
    padding: .62rem .8rem;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--glv-ink);
    background: var(--glv-surface);
    border: 1px solid var(--glv-line);
    border-radius: 13px 13px 13px 4px;
    animation: glv-msg-in .24s ease both;
}

.glv-msg--user {
    margin-left: auto;
    background: var(--glv-accent);
    border-color: var(--glv-accent);
    border-radius: 13px 13px 4px 13px;
    color: var(--glv-dark);
    font-weight: 600;
}

.glv-msg--head {
    font-family: var(--font-heading, 'Bebas Neue', sans-serif);
    font-size: 1.05rem;
    letter-spacing: .05em;
    background: var(--glv-dark);
    border-color: var(--glv-dark);
    color: var(--glv-surface);
}

.glv-msg a { color: var(--glv-green); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.glv-msg a:hover { color: var(--glv-dark); }
.glv-msg--head a { color: var(--glv-accent); }

.glv-msg dl { display: grid; grid-template-columns: auto 1fr; gap: .18rem .6rem; margin: .35rem 0 0; }
.glv-msg dt { font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--glv-ink-soft); align-self: center; }
.glv-msg dd { margin: 0; font-weight: 600; }

@keyframes glv-msg-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* Typing indicator */
.glv-typing { display: flex; gap: 4px; width: max-content; padding: .75rem .8rem; }
.glv-typing span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--glv-ink-soft);
    animation: glv-bounce 1.1s infinite ease-in-out;
}
.glv-typing span:nth-child(2) { animation-delay: .15s; }
.glv-typing span:nth-child(3) { animation-delay: .3s; }

@keyframes glv-bounce {
    0%, 60%, 100% { opacity: .3; transform: translateY(0); }
    30%           { opacity: 1;  transform: translateY(-4px); }
}

/* ---------- Options ---------- */

.glv-chat__options {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .6rem .9rem .9rem;
    background: var(--glv-canvas);
    border-top: 1px solid var(--glv-line);
    flex-shrink: 0;
    max-height: 42%;
    overflow-y: auto;
}

.glv-opt {
    flex: 1 1 auto;
    min-height: 44px; /* WCAG 2.1 AA target size */
    padding: .5rem .85rem;
    border: 1.5px solid var(--glv-green);
    border-radius: 999px;
    background: var(--glv-surface);
    color: var(--glv-green);
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--transition-fast, .15s ease),
                color var(--transition-fast, .15s ease),
                border-color var(--transition-fast, .15s ease);
}

.glv-opt:hover { background: var(--glv-green); color: var(--glv-surface); }

.glv-opt--primary {
    border-color: var(--glv-dark);
    background: var(--glv-dark);
    color: var(--glv-accent);
}
.glv-opt--primary:hover { background: var(--glv-green); border-color: var(--glv-green); color: var(--glv-surface); }

.glv-opt--ghost { flex: 1 1 100%; border-color: var(--glv-line); color: var(--glv-ink-soft); font-weight: 600; }
.glv-opt--ghost:hover { background: var(--glv-line); color: var(--glv-ink); }

/* ---------- Focus visibility ---------- */

.glv-chat :focus-visible {
    outline: 2px solid var(--glv-green);
    outline-offset: 2px;
}

.glv-chat__header :focus-visible,
.glv-chat__launcher:focus-visible {
    outline: 2px solid var(--glv-accent);
    outline-offset: 2px;
}

/* ---------- Mobile: full-height sheet ---------- */

@media (max-width: 640px) {
    .glv-chat { right: 1rem; bottom: 1rem; }

    .glv-chat__panel {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
        animation: glv-in-sheet .22s cubic-bezier(.22, 1, .36, 1);
    }

    .glv-chat__options { max-height: 46%; padding-bottom: max(.9rem, env(safe-area-inset-bottom)); }
    .glv-chat__header  { padding-top: max(.85rem, env(safe-area-inset-top)); }
    .glv-msg { max-width: 90%; }

    @keyframes glv-in-sheet {
        from { opacity: 0; transform: translateY(16px); }
        to   { opacity: 1; transform: none; }
    }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .glv-chat *,
    .glv-chat *::before,
    .glv-chat *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .glv-chat__launcher-pulse { display: none; }
}

/* ---------- Print ---------- */

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