/* ==========================================================
   CHAT ASSISTANT WIDGET
   ========================================================== */

/* Launcher and panel share one dock value so the panel's bottom edge sits
   exactly level with the launcher. --chat-dock clears the back-to-top
   button (50px tall at bottom:30px) plus a 16px gap.
   --consent-height is measured by chat.js and is 0px while the consent
   banner is closed. Do not gate these offsets on a body class: that class
   silently failed to apply once, leaving the controls under the banner. */

.chat-launcher,
.chat-panel{

    --chat-dock:96px;

    --chat-surface:var(--white);

    --chat-line:var(--gray-200);

    --chat-ink:var(--gray-700);

    --chat-muted:var(--gray-500);

    /* Brand gradient built entirely from existing tokens. */
    --chat-grad:linear-gradient(140deg, var(--secondary) 0%, var(--primary) 58%, var(--dark) 100%);

    --chat-grad-soft:linear-gradient(140deg, var(--primary-light) 0%, var(--primary) 100%);

}

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

.chat-launcher{

    position:fixed;

    right:30px;

    bottom:calc(var(--chat-dock) + var(--consent-height, 0px));

    z-index:1001;

    width:58px;

    height:58px;

    display:grid;

    place-items:center;

    border:none;

    border-radius:50%;

    background:var(--chat-grad);

    color:var(--white);

    font-size:1.3rem;

    box-shadow:0 8px 20px rgba(25,42,93,.28), 0 2px 6px rgba(15,23,42,.18);

    cursor:pointer;

    transition:transform .28s cubic-bezier(.34,1.56,.64,1),
               box-shadow .28s ease;

}

/* Attention ring. Runs once on load, then stops. */
.chat-launcher::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:50%;

    border:2px solid var(--secondary);

    animation:chatPulse 2.6s ease-out 2;

    pointer-events:none;

}

@keyframes chatPulse{

    0%{transform:scale(1);opacity:.6}

    70%{transform:scale(1.7);opacity:0}

    100%{transform:scale(1.7);opacity:0}

}

.chat-launcher:hover{

    transform:translateY(-3px) scale(1.04);

    box-shadow:0 14px 30px rgba(25,42,93,.34), 0 4px 10px rgba(15,23,42,.2);

}

.chat-launcher:active{

    transform:translateY(-1px) scale(.98);

}

/* The card replaces the button, so the button steps aside while it is open. */
.chat-launcher[hidden]{

    display:none;

}

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

.chat-panel{

    position:fixed;

    right:30px;

    /* Same dock as the launcher: the card's bottom edge is level with where
       the button sat, and it grows out of that corner. */
    bottom:calc(var(--chat-dock) + var(--consent-height, 0px));

    z-index:1001;

    width:min(392px, calc(100vw - 32px));

    /* 178px = 96px dock + 16px back-to-top + 66px headroom for the
       launcher that used to sit here. Reserving less than the dock lets
       the top edge go negative on short viewports. */
    height:min(600px, calc(100vh - 178px - var(--consent-height, 0px)));

    display:flex;

    flex-direction:column;

    background:var(--chat-surface);

    border:1px solid var(--gray-100);

    border-radius:20px;

    box-shadow:0 28px 70px rgba(15,23,42,.26), 0 8px 22px rgba(15,23,42,.14);

    overflow:hidden;

    /* Opens from the launcher's corner. */
    transform-origin:bottom right;

    /* The OPEN state is the plain, visible default.

       This is deliberate. An earlier version kept the panel permanently at
       opacity:0 / visibility:hidden and relied on a transition to reach the
       visible state. If no frame is ever painted -- which is exactly what
       happened on the live site -- the transition never advances and the
       panel stayed at opacity 0 while aria-expanded said otherwise: the
       launcher vanished and left nothing behind.

       Closing is therefore display:none via [hidden], and the entrance is an
       animation with no fill-mode, so a stalled animation degrades to
       "visible but static" rather than "invisible". */
    opacity:1;

    transform:none;

}

.chat-panel[hidden]{

    display:none;

}

.chat-panel.is-open{

    animation:chatPop .3s cubic-bezier(.34,1.4,.64,1);

}

@keyframes chatPop{

    from{opacity:0;transform:scale(.9) translateY(14px)}

    to{opacity:1;transform:scale(1) translateY(0)}

}

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

.chat-head{

    position:relative;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    padding:14px 14px 14px 16px;

    background:var(--chat-grad-soft);

    color:var(--white);

}

/* Soft sheen so the header does not read as a flat block. */
.chat-head::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(120deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 55%);

    pointer-events:none;

}

.chat-head-main{

    display:flex;

    align-items:center;

    gap:11px;

    min-width:0;

}

.chat-avatar{

    position:relative;

    flex-shrink:0;

    width:38px;

    height:38px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:var(--chat-grad);

    color:var(--white);

    font-size:.95rem;

    box-shadow:0 2px 8px rgba(15,23,42,.28);

}

.chat-avatar.is-sm{

    width:27px;

    height:27px;

    font-size:.72rem;

    box-shadow:0 1px 4px rgba(15,23,42,.2);

}

/* Presence dot: signals a reply is coming without claiming a real
   availability guarantee. */
.chat-online{

    position:absolute;

    right:-1px;

    bottom:-1px;

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--accent);

    border:2px solid var(--primary);

}

.chat-head-text{

    min-width:0;

}

.chat-head h2{

    margin:0;

    font-size:1rem;

    font-weight:600;

    line-height:1.25;

    color:var(--white);

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.chat-head p{

    margin:2px 0 0;

    font-size:.75rem;

    line-height:1.3;

    color:var(--gray-300);

}

.chat-close{

    position:relative;

    flex-shrink:0;

    width:44px;

    height:44px;

    display:grid;

    place-items:center;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.14);

    color:var(--white);

    font-size:.95rem;

    cursor:pointer;

    transition:background .2s ease, transform .3s ease;

}

.chat-close:hover{

    background:rgba(255,255,255,.28);

    transform:rotate(90deg);

}

/* ---------- Transcript ---------- */

.chat-log{

    flex:1;

    /* Required for a flex child to shrink below its content. Without it the
       log refuses to compress and pushes the composer out of the panel. */
    min-height:0;

    overflow-y:auto;

    overscroll-behavior:contain;

    padding:16px;

    background:var(--light);

    display:flex;

    flex-direction:column;

    gap:12px;

}

/* Thin, brand-tinted scrollbar. */
.chat-log::-webkit-scrollbar{

    width:6px;

}

.chat-log::-webkit-scrollbar-thumb{

    background:var(--gray-300);

    border-radius:3px;

}

.chat-log::-webkit-scrollbar-track{

    background:transparent;

}

.chat-row{

    display:flex;

    align-items:flex-end;

    gap:8px;

    max-width:100%;

    animation:chatIn .28s ease both;

}

.chat-row.is-bot{

    align-self:flex-start;

}

.chat-row.is-user{

    align-self:flex-end;

    justify-content:flex-end;

}

@keyframes chatIn{

    from{opacity:0;transform:translateY(7px)}

    to{opacity:1;transform:translateY(0)}

}

.chat-msg{

    max-width:82%;

    padding:10px 14px;

    border-radius:16px;

    font-size:.92rem;

    line-height:1.55;

    /* Text comes from a language model, so long unbroken tokens are likely. */
    white-space:pre-wrap;

    overflow-wrap:anywhere;

}

.chat-row.is-bot .chat-msg{

    background:var(--chat-surface);

    border:1px solid var(--chat-line);

    border-bottom-left-radius:6px;

    color:var(--chat-ink);

    box-shadow:0 1px 2px rgba(15,23,42,.05);

}

.chat-row.is-user .chat-msg{

    background:var(--chat-grad-soft);

    border-bottom-right-radius:6px;

    color:var(--white);

    box-shadow:0 2px 8px rgba(25,42,93,.22);

}

.chat-row.is-error .chat-msg{

    background:#FEF2F2;

    border:1px solid #FECACA;

    color:#991B1B;

}

.chat-msg a{

    color:var(--secondary-text);

    font-weight:600;

}

.chat-row.is-user .chat-msg a{

    color:var(--white);

    text-decoration:underline;

}

/* ---------- Typing indicator ---------- */

/* Three real dots. Animating the `content` property (the previous approach)
   is not animatable, so the indicator never actually moved. */
.chat-msg.is-typing{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:4px;

    min-width:54px;

    padding:13px 15px;

}

.chat-msg.is-typing span{

    width:6px;

    height:6px;

    border-radius:50%;

    background:var(--gray-500);

    animation:chatDot 1.2s ease-in-out infinite;

}

.chat-msg.is-typing span:nth-child(2){

    animation-delay:.18s;

}

.chat-msg.is-typing span:nth-child(3){

    animation-delay:.36s;

}

@keyframes chatDot{

    0%,60%,100%{transform:translateY(0);opacity:.4}

    30%{transform:translateY(-5px);opacity:1}

}

/* ---------- Suggested questions ---------- */

.chat-suggestions{

    flex-shrink:0;

    display:flex;

    flex-wrap:wrap;

    gap:7px;

    padding:12px 16px 14px;

    background:var(--light);

}

/* Once the visitor has asked something the chips have done their job, and
   chat.js hides them to give the conversation the space instead. */
.chat-suggestions[hidden]{

    display:none;

}

.chat-suggestion{

    display:inline-flex;

    align-items:center;

    gap:6px;

    /* 44px, matching the tap-target minimum used elsewhere on the site.
       Tightening this to 38px to look neater cost that accessibility floor. */
    min-height:44px;

    padding:8px 14px;

    border:1px solid var(--gray-300);

    border-radius:50px;

    background:var(--chat-surface);

    color:var(--primary);

    font-family:inherit;

    font-size:.81rem;

    font-weight:500;

    line-height:1.2;

    cursor:pointer;

    transition:background .18s ease, color .18s ease, border-color .18s ease,
               transform .18s ease;

}

.chat-suggestion i{

    font-size:.78rem;

    color:var(--secondary-text);

    transition:color .18s ease;

}

.chat-suggestion:hover{

    background:var(--chat-grad-soft);

    border-color:transparent;

    color:var(--white);

    transform:translateY(-1px);

}

.chat-suggestion:hover i{

    color:var(--white);

}

/* ---------- Composer ---------- */

.chat-form{

    flex-shrink:0;

    display:flex;

    align-items:flex-end;

    gap:9px;

    padding:12px 14px;

    border-top:1px solid var(--chat-line);

    background:var(--chat-surface);

}

.chat-input{

    flex:1;

    /* 44px clears the tap-target minimum and gives a single line of
       placeholder room without clipping. */
    min-height:44px;

    max-height:120px;

    padding:12px 16px;

    border:1px solid var(--gray-300);

    border-radius:22px;

    background:var(--light);

    color:var(--chat-ink);

    font-family:inherit;

    font-size:.92rem;

    line-height:1.4;

    resize:none;

    transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;

}

.chat-input::placeholder{

    color:var(--gray-500);

}

.chat-input:focus-visible{

    outline:none;

    background:var(--chat-surface);

    border-color:var(--secondary);

    box-shadow:0 0 0 3px rgba(59,130,246,.22);

}

.chat-send{

    flex-shrink:0;

    width:44px;

    height:44px;

    display:grid;

    place-items:center;

    border:none;

    border-radius:50%;

    background:var(--chat-grad);

    color:var(--white);

    font-size:.95rem;

    cursor:pointer;

    transition:transform .2s cubic-bezier(.34,1.56,.64,1), opacity .2s ease,
               box-shadow .2s ease;

}

.chat-send:hover:not(:disabled){

    transform:scale(1.08);

    box-shadow:0 6px 16px rgba(25,42,93,.3);

}

.chat-send:active:not(:disabled){

    transform:scale(.94);

}

.chat-send:disabled{

    opacity:.45;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;

}

/* ---------- Footer note ---------- */

.chat-foot{

    flex-shrink:0;

    margin:0;

    padding:0 16px 12px;

    background:var(--chat-surface);

    font-size:.73rem;

    line-height:1.5;

    color:var(--chat-muted);

}

.chat-foot a{

    color:var(--secondary-text);

    font-weight:600;

}

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

.chat-launcher:focus-visible,
.chat-close:focus-visible,
.chat-send:focus-visible,
.chat-suggestion:focus-visible{

    outline:3px solid var(--secondary);

    outline-offset:2px;

}

/* ---------- Mobile ---------- */

@media (max-width:600px){

    .chat-launcher,
    .chat-panel{

        --chat-dock:80px;

    }

    .chat-launcher{

        right:16px;

        width:54px;

        height:54px;

        font-size:1.2rem;

    }

    .chat-panel{

        right:10px;

        left:10px;

        /* No bottom override on purpose: the base rule already places the
           panel level with the launcher via --chat-dock, on mobile as well as
           desktop. */

        /* Must reserve the 80px dock plus a 16px top gap, otherwise the top
           edge goes negative on a short phone with the consent banner open. */
        height:min(78dvh, calc(100dvh - 96px - var(--consent-height, 0px)));

        width:auto;

        border-radius:18px;

    }

    .chat-log{

        padding:14px;

    }

    /* Trimmed from 12px/12px to recover 8px of panel height. On a 360x640
       phone with the consent banner open the fixed rows (head, chips, form,
       footer) overran the panel by 5px and pushed the composer out of view. */
    .chat-form{

        padding:10px 12px;

    }

    .chat-foot{

        padding:0 14px 8px;

    }

    .chat-msg{

        max-width:88%;

        font-size:.95rem;

    }

    /* One scrollable row: wrapped onto four or five rows the chips consumed
       214px of a 370px panel at 360px wide. */
    .chat-suggestions{

        flex-wrap:nowrap;

        overflow-x:auto;

        scrollbar-width:none;

    }

    .chat-suggestions::-webkit-scrollbar{

        display:none;

    }

    .chat-suggestion{

        flex-shrink:0;

    }

    .chat-suggestion i{

        display:none;

    }

}

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

@media (prefers-reduced-motion:reduce){

    .chat-launcher,
    .chat-panel,
    .chat-close,
    .chat-send,
    .chat-suggestion{

        transition:none;

    }

    .chat-launcher::after{

        animation:none;

    }

    .chat-panel.is-open{

        animation:none;

    }

    .chat-launcher:hover,
    .chat-send:hover:not(:disabled){

        transform:none;

    }

    .chat-row{

        animation:none;

    }

    .chat-msg.is-typing span{

        animation:none;

        opacity:.7;

    }

}