/* ═══════════════════════════════════════════════════════════════════════════
 * VSO Chatbot — Widget Styles (Dark Glassmorphism)
 * All selectors prefixed .vso-chat- to avoid theme collisions.
 * Theming via CSS custom properties.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Custom properties — neutral frosted glass ────────────────────────── */

:root {
    --vso-chat-primary: #e2e8f0;
    --vso-chat-primary-hover: #f1f5f9;
    --vso-chat-bg: rgba(10, 10, 14, 0.62);
    --vso-chat-surface: rgba(10, 10, 14, 0.35);
    --vso-chat-text: #f1f5f9;
    --vso-chat-text-muted: rgba(255, 255, 255, 0.55);
    --vso-chat-border: rgba(255, 255, 255, 0.1);
    --vso-chat-user-bg: rgba(255, 255, 255, 0.10);
    --vso-chat-user-text: #ffffff;
    --vso-chat-bot-bg: rgba(255, 255, 255, 0.04);
    --vso-chat-bot-text: #f1f5f9;
    --vso-chat-radius: 20px;
    --vso-chat-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --vso-chat-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
    --vso-chat-glass-border: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    /* Fix #189 — +25% over the prior 380×560. The header name (white-space:
       nowrap) marquee-scrolled whenever a site/agent name overran the 380px
       header; the extra ~95px of width lets typical names sit static, and the
       taller panel shows more of the conversation without scrolling. */
    --vso-chat-panel-width: 475px;
    --vso-chat-panel-height: 700px;
    --vso-chat-z-index: 99999;
}

/* ── Dark mode — deepen the glass slightly ─────────────────────────────── */

@media (prefers-color-scheme: dark) {
    :root {
        --vso-chat-bg: rgba(4, 4, 8, 0.72);
        --vso-chat-surface: rgba(4, 4, 8, 0.45);
        --vso-chat-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    }
}

/* ── Print: hide everything ──────────────────────────────────────────── */

@media print {
    .vso-chat-bubble,
    .vso-chat-panel {
        display: none !important;
    }
}

/* ── Focus: no outline on mouse click, keep for keyboard ────────────────── */

.vso-chat-bubble:focus:not(:focus-visible),
.vso-chat-panel button:focus:not(:focus-visible),
.vso-chat-panel a:focus:not(:focus-visible) {
    outline: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * BUBBLE (floating avatar button)
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
 * LIVING LAUNCHER (Fix #218) — branded gradient bubble that grows into a
 * nudge-pill and morphs its 3-dot mark into a canvas waveform while open.
 * Ported from ui-showcase/launcher-lab.css. CSS-var contract is driven by JS
 * (llApplyVars) from the hub-config'd Living Launcher settings.
 * ═══════════════════════════════════════════════════════════════════════════ */

.vso-chat-bubble {
    all: initial;
    --vso-size: 60px;
    --vso-bw: 2.5px;
    --vso-glow: 9px;
    --vso-glow-color: #6366f1;
    /* shadow intensity multiplier (0 = no shadow, 1 = full); JS overrides from
       the SHADOW_STRENGTH setting. 0.65 default = the softened look. Fix #262 */
    --vso-shadow-k: 0.65;
    /* nudge close-button geometry — config-driven (Fix #262) */
    --vso-close-size: 40px;
    --vso-close-bw: 2px;
    --vso-grad: linear-gradient(135deg, #3b4252, #5b8cff);
    --vso-grad-rev: linear-gradient(315deg, #5b8cff, #3b4252);
    --vso-grad-open: linear-gradient(135deg, #3b4252, #5b8cff);
    --vso-grad-speed: 14s;
    --vso-float-amp: 4px;
    --vso-float-speed: 4s;
    --vso-dot-size: 7px;
    --vso-dot-gap: 6px;
    position: fixed;
    bottom: 24px;
    z-index: var(--vso-chat-z-index);
    height: var(--vso-size);
    min-width: var(--vso-size);
    max-width: var(--vso-size);
    border: var(--vso-bw) solid transparent;
    border-radius: 999px;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-family: var(--vso-chat-font);
    -webkit-tap-highlight-color: transparent;
    /* Static base fill + 1px iridescent border ring. The MOVING sheen lives on
       ::before (transform-animated → compositor-only, zero per-frame repaint).
       background-position is NOT compositable; animating it here forced a
       full main-thread repaint every frame and fought the float transform,
       which is what made the collapsed bubble stutter (Fix #NNN). */
    background: var(--vso-grad) padding-box, var(--vso-grad-rev) border-box;
    background-size: 200% 200%;
    /* diffuse outer halo (soft, colour-bleeds outward) instead of a hard ring.
       Every layer's strength is scaled by --vso-shadow-k (SHADOW_STRENGTH setting,
       default 0.65) so "scade intensitatea shadow-ului" is a knob, not a redeploy
       (Fix #262). k=1 = the original strong look, k=0 = flat. */
    box-shadow:
        0 0 var(--vso-glow) calc(var(--vso-glow) * .35 * var(--vso-shadow-k)) var(--vso-glow-color),
        0 8px 24px rgba(0, 0, 0, calc(.30 * var(--vso-shadow-k))),
        0 2px 6px rgba(0, 0, 0, calc(.25 * var(--vso-shadow-k)));
    transition: max-width 0.42s cubic-bezier(.22, 1, .36, 1), box-shadow 0.25s;
    overflow: hidden;
}

/* Moving gradient sheen — a 200%×200% layer of the SAME fill gradient, scrolled
   diagonally by transform only (compositor-promoted, no repaint). translate
   (-50%,-50%) of this layer == one bubble-width/height of travel, the exact
   distance background-position:0%→100% covered on a 200% bg; the doubled
   palette (set in JS, mirrored in the default) makes the wrap seamless. Same
   --vso-grad-speed, linear, infinite → identical cadence and direction. */
.vso-chat-bubble::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    background-image: var(--vso-grad);
    background-size: 100% 100%;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
    transform: translateZ(0);
    animation: vso-chat-grad-shift var(--vso-grad-speed) linear infinite;
}

/* keep the mark/dots/wave/pill content above the moving sheen */
.vso-chat-bubble > * { position: relative; z-index: 1; }

/* float runs only when idle (added by JS after the intro bounce ends, so the
   bounce's resting transform flows straight into the float with no jump).
   The float lives on the bubble; the sheen lives on ::before — they no longer
   share a layer, so neither repaints the other. */
.vso-chat-bubble--floating {
    animation: vso-chat-float var(--vso-float-speed) ease-in-out infinite;
    will-change: transform;
}

.vso-chat-bubble--right { right: 24px; }
.vso-chat-bubble--left  { left: 24px;  flex-direction: row; }

/* hover: pause the bob (float) AND the sheen scroll so neither fights the
   shadow tween, and keep the SAME blur radius (grow only spread) so the
   browser reuses the already-rasterised glow → kills the first-hover stutter */
.vso-chat-bubble:hover {
    animation-play-state: paused;
    box-shadow: 0 0 var(--vso-glow) calc(var(--vso-glow) * .7 * var(--vso-shadow-k)) var(--vso-glow-color),
                0 12px 30px rgba(0, 0, 0, calc(.40 * var(--vso-shadow-k)));
}
.vso-chat-bubble:hover::before { animation-play-state: paused; }

.vso-chat-bubble:focus-visible {
    outline: 3px solid var(--vso-chat-primary);
    outline-offset: 3px;
}

/* the mark = dots, a square at the leading edge; the wave canvas spans the
   WHOLE launcher (absolute, inset:0) so the ribbon reaches both rims */
.vso-chat-mark {
    position: relative;
    flex: 0 0 calc(var(--vso-size) - 2 * var(--vso-bw));
    width: calc(var(--vso-size) - 2 * var(--vso-bw));
    height: 100%;
    display: grid;
    place-items: center;
}
.vso-chat-wave {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.35s;
    pointer-events: none;
}
.vso-chat-dots {
    display: flex;
    gap: var(--vso-dot-gap);
    align-items: center;
    transition: opacity 0.3s, transform 0.35s;
}
.vso-chat-dots i {
    width: var(--vso-dot-size);
    height: var(--vso-dot-size);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    animation: vso-chat-dot-bob 2.6s ease-in-out infinite;
}
.vso-chat-dots i:nth-child(1) { animation-delay: 0s;   animation-duration: 2.4s; }
.vso-chat-dots i:nth-child(2) { animation-delay: .45s; animation-duration: 3.1s; }
.vso-chat-dots i:nth-child(3) { animation-delay: .9s;  animation-duration: 2.7s; }

/* ---- face morph (on nudge) ----
   Keep all three as bubbles in their row and keep the wobble going (slower so
   the shape stays readable). Outer two RAISE into eyes, the middle DROPS and
   gets parts cut off into a mouth. Base offset via `top` so the bob animation's
   transform still composes on top → the face wobbles gently. */
.vso-chat-dots--face i {
    position: relative;
    top: 0;
    animation-duration: 5.5s !important;
    transition: top .5s cubic-bezier(.34, 1.56, .64, 1), width .5s, height .5s, border-radius .5s;
}
.vso-chat-dots--face i:nth-child(1),
.vso-chat-dots--face i:nth-child(3) { top: -3px; }
.vso-chat-dots--face i:nth-child(2) { top: 6px; }

/* variant 1 — „zâmbet": wide bubble, top cut flat → rounded-bottom smile */
.vso-chat-dots--face-1 i:nth-child(2) {
    width: calc(var(--vso-dot-size) * 1.9);
    height: calc(var(--vso-dot-size) * 1.05);
    border-radius: 35% 35% 100% 100%;
}
/* variant 2 — „fericit >w<": both eyes squint into happy domes */
.vso-chat-dots--face-2 i:nth-child(1),
.vso-chat-dots--face-2 i:nth-child(3) {
    width: calc(var(--vso-dot-size) * 1.15);
    height: calc(var(--vso-dot-size) * 1);
    border-radius: 100% 100% 28% 28%;
    top: -2px;
}
.vso-chat-dots--face-2 i:nth-child(2) {
    width: calc(var(--vso-dot-size) * 1.18);
    height: calc(var(--vso-dot-size) * 1.18);
    border-radius: 48% 48% 92% 92%;
}
/* variant 3 — „surprins": eyes raised more, small round O mouth */
.vso-chat-dots--face-3 i:nth-child(1),
.vso-chat-dots--face-3 i:nth-child(3) { top: -4px; }
.vso-chat-dots--face-3 i:nth-child(2) {
    width: calc(var(--vso-dot-size) * 1.25);
    height: calc(var(--vso-dot-size) * 1.25);
    top: 5px;
}

/* open state → background desaturates, waveform shows, dots hide, no float.
   The moving sheen on ::before keeps running (inherited); only its image swaps
   to --vso-grad-open. No element-level animation (sheen is on ::before). */
.vso-chat-bubble--open {
    background: var(--vso-grad-open) padding-box, var(--vso-grad-rev) border-box;
    background-size: 200% 200%;
    transition: max-width 0.42s cubic-bezier(.22, 1, .36, 1), box-shadow 0.25s, background 0.5s;
}
.vso-chat-bubble--open::before { background-image: var(--vso-grad-open); }
.vso-chat-bubble--open .vso-chat-wave { opacity: 1; }
.vso-chat-bubble--open .vso-chat-dots { opacity: 0; transform: scale(.4); }

/* pill (nudge) — the launcher itself grows */
.vso-chat-pill-text {
    white-space: nowrap;
    overflow: hidden;
    /* long nudge text degrades to an ellipsis instead of a hard mid-word cut */
    text-overflow: ellipsis;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    max-width: 0;
    opacity: 0;
    transition: max-width 0.4s ease, opacity 0.3s;
    /* dark contrast halo + thicker glyph border so white text stays readable on
       light brand gradients (admin 2026-06-02: text was hard to read going out) */
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.7), 0 1px 2px rgba(0, 0, 0, 0.72), 0 0 6px rgba(0, 0, 0, 0.5);
    paint-order: stroke fill;
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.6);
}
/* ~2x bigger + crisp white ring so the dismiss target is obvious
   (colleague 2026-06-02: "the (X) needs to be bigger and more visible") */
.vso-chat-pill-close {
    flex: 0 0 var(--vso-close-size, 40px);
    width: var(--vso-close-size, 40px);
    height: var(--vso-close-size, 40px);
    margin-right: 12px;
    border: var(--vso-close-bw, 2px) solid rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    transition: opacity 0.3s, background 0.2s, transform 0.15s;
}
.vso-chat-pill-close:hover { background: rgba(255, 255, 255, 0.45); transform: scale(1.08); }
.vso-chat-pill-close svg {
    width: calc(var(--vso-close-size, 40px) * 0.5);
    height: calc(var(--vso-close-size, 40px) * 0.5);
    stroke: #fff;
    stroke-width: 2.6;
    stroke-linecap: round;
    fill: none;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55));
}
/* sheen keeps running on ::before (inherited); no element-level animation */
.vso-chat-bubble--pill {
    max-width: 400px;
}
.vso-chat-bubble--pill .vso-chat-pill-text { max-width: 262px; opacity: 1; padding-right: 6px; }
.vso-chat-bubble--pill .vso-chat-pill-close { opacity: 1; }
.vso-chat-bubble--left.vso-chat-bubble--pill .vso-chat-pill-close { margin-right: 0; margin-left: 0; }

@media (prefers-reduced-motion: reduce) {
    .vso-chat-bubble,
    .vso-chat-bubble--open,
    .vso-chat-bubble--pill,
    .vso-chat-bubble--floating,
    .vso-chat-bubble--bounce,
    .vso-chat-bubble::before,
    .vso-chat-dots i {
        animation: none !important;
    }
    /* pin the sheen layer to a single static frame (top-left aligned) */
    .vso-chat-bubble::before { transform: none !important; }
}

/* ── Badge ────────────────────────────────────────────────────────────── */

.vso-chat-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font: 700 11px/18px var(--vso-chat-font);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transform: scale(0);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.vso-chat-badge--visible { transform: scale(1); }
.vso-chat-bubble--pill .vso-chat-badge,
.vso-chat-bubble--open .vso-chat-badge { transform: scale(0); }

/* ── Bounce intro ──────────────────────────────────────────────────────── */

/* bounce runs on the element (transform); the sheen runs on ::before */
.vso-chat-bubble--bounce {
    animation: vso-chat-bounce 0.9s cubic-bezier(.18, .89, .32, 1.28);
}

/* one-directional seamless scroll, now COMPOSITOR-ONLY: the ::before sheen
   layer is 200%×200%, so translating it by -50%,-50% of its own box == exactly
   one bubble-width/height of diagonal travel — the same distance the old
   background-position:0%→100% covered on a 200% background, in the same
   direction (image moves up-left). The palette is two identical halves
   (doubled in JS — Fix #218), so one period wraps seamlessly with no reversal.
   translateZ(0) keeps it on its own GPU layer. Animating transform here means
   ZERO per-frame repaint (the old background-position animation forced a full
   main-thread raster every frame and that is what stuttered). */
@keyframes vso-chat-grad-shift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, -50%, 0); }
}
/* starts & ends at translateY(0) to match the bounce's resting position */
@keyframes vso-chat-float {
    0%, 100% { transform: translateY(0); }
    25%      { transform: translateY(calc(var(--vso-float-amp) * -1)); }
    75%      { transform: translateY(var(--vso-float-amp)); }
}
@keyframes vso-chat-dot-bob {
    0%, 100% { transform: translateY(-2px); }
    50%      { transform: translateY(2px); }
}
@keyframes vso-chat-bounce {
    0%   { transform: scale(0) translateY(40px); }
    60%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * PANEL (frosted dark glass window)
 * ═══════════════════════════════════════════════════════════════════════════ */

.vso-chat-panel {
    all: initial;
    position: fixed;
    bottom: 96px;
    z-index: var(--vso-chat-z-index);
    width: var(--vso-chat-panel-width);
    height: var(--vso-chat-panel-height);
    max-height: calc(100vh - 120px);
    background: var(--vso-chat-bg);
    backdrop-filter: blur(32px) saturate(120%);
    -webkit-backdrop-filter: blur(32px) saturate(120%);
    border-radius: var(--vso-chat-radius);
    box-shadow: var(--vso-chat-shadow), var(--vso-chat-glass-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: var(--vso-chat-font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--vso-chat-text);
    box-sizing: border-box;

    opacity: 0;
    transform: translateY(16px) scale(0.97);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.vso-chat-panel--right { right: 24px; }
.vso-chat-panel--left  { left: 24px; }

.vso-chat-panel--open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.vso-chat-panel--custom-pos {
    right: auto !important;
    bottom: auto !important;
}

.vso-chat-panel--custom-pos:not(.vso-chat-panel--open) {
    transform: scale(0.97);
}

.vso-chat-panel--custom-pos.vso-chat-panel--open {
    transform: scale(1);
}

.vso-chat-panel--dragging {
    transition: none !important;
    user-select: none !important;
}

.vso-chat-panel *,
.vso-chat-panel *::before,
.vso-chat-panel *::after {
    box-sizing: border-box;
}

/* ── Header (drag handle on desktop) ───────────────────────────────── */

.vso-chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    user-select: none;
}

@media (min-width: 768px) {
    .vso-chat-header {
        cursor: grab;
    }

    .vso-chat-panel--dragging .vso-chat-header {
        cursor: grabbing;
    }
}

.vso-chat-header-avatar {
    width: 42px;
    height: 42px;
    /* Fix #257 — the favicon/logo renders FREELY in the header: no circular
       "bubble" disc, no crop. The admin asked to drop the round mask behind the
       header icon so a non-square favicon shows whole instead of being clipped.
       Supersedes the Fix #218 grey-disc strip, which kept the circle + crop. */
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vso-chat-header-avatar img {
    /* contain (not cover) + no circular clip = the full favicon, undistorted,
       fitted within the 42px box at its native aspect ratio. */
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 0;
}

.vso-chat-header-avatar svg {
    width: 22px;
    height: 22px;
    fill: rgba(255, 255, 255, 0.75);
}

.vso-chat-header-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.vso-chat-header-name {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    color: #fff;
}

/* Marquee scroll for long site names */
.vso-chat-header-name-text {
    display: inline-block;
}

.vso-chat-header-name--scrolling {
    mask-image: linear-gradient(to right, transparent 0%, white 8%, white 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, white 8%, white 92%, transparent 100%);
}

.vso-chat-header-name--scrolling .vso-chat-header-name-text {
    animation: vso-chat-marquee 8s ease-in-out infinite;
    animation-delay: 1.5s;
}

@keyframes vso-chat-marquee {
    0%, 15%  { transform: translateX(0); }
    40%, 60% { transform: translateX(var(--vso-marquee-dist, -80px)); }
    85%, 100% { transform: translateX(0); }
}

.vso-chat-header-status {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.25;
}

.vso-chat-header-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.vso-chat-header-btn {
    all: unset;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s;
}

.vso-chat-header-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.vso-chat-header-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

.vso-chat-header-btn svg {
    width: 18px;
    height: 18px;
    fill: rgba(255, 255, 255, 0.5);
}

.vso-chat-header-btn.vso-chat-info-unseen {
    position: relative;
}

.vso-chat-header-btn.vso-chat-info-unseen::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 5px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
    animation: vso-chat-info-pulse 1.8s ease-out infinite;
}

@keyframes vso-chat-info-pulse {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45); }
    70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ── Messages container ─────────────────────────────────────────────── */

.vso-chat-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--vso-chat-surface);
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* ── Scrollbar — all scrollable areas inside the panel ────────────── */

.vso-chat-panel,
.vso-chat-panel * {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.vso-chat-panel ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.vso-chat-panel ::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px 0;
}

.vso-chat-panel ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
}

.vso-chat-panel:hover ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
}

.vso-chat-panel ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Hide scrollbar until panel is hovered — avoids corner clip artifacts */
.vso-chat-panel ::-webkit-scrollbar-thumb:not(:hover) {
    transition: background 0.2s;
}

/* ── Message row ────────────────────────────────────────────────────── */

.vso-chat-msg {
    display: flex;
    gap: 8px;
    max-width: 88%;
    animation: vso-chat-msg-in 0.2s ease both !important;
}


@keyframes vso-chat-msg-in {
    from {
        opacity: 0 !important;
        transform: translateY(6px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ── Per-line streaming reveal (Fix #76 v2, JS-only — supersedes Fix #73's
   CSS animation portion).
   The reveal is now 100% inline-JS-driven. The streaming-markdown parser
   bakes `style="opacity:0 !important;transform:translateY(4px) !important;
   transition:none !important;"` directly onto every `.vso-chat-fade-line`
   element at creation. `revealLinesStaggered()` in chat-widget.js then
   transitions each line via inline `setProperty(..., 'important')` after
   resolvers finish, with a per-element layout flush between transition
   apply and opacity flip.

   No CSS rule for `.vso-chat-fade-line` here intentionally — the prior
   `animation: ...` rule and `@keyframes` block were removed because:
   1. `!important` inside `@keyframes` is ignored by the CSS spec, so host
      themes' `opacity:1 !important` won the from-state battle.
   2. Even with a pre-hide loop in JS, an active CSS animation on the
      class overrode the inline opacity:0 and re-revealed the lines
      within 380 ms regardless.
   Lines containing `[` still skip the wrap in the parser (shortcode
   lines: [product N], [embed=N], [contact], [map], …) — Fix #73
   bracket-guard invariant preserved. */

/* Fix #75 — when a stored sessionId exists at mount, the messages area
   is hidden until ensureHistoryHydrated() settles. The panel-open
   animation reveals either the populated transcript or the typewriter
   greeting — never the empty-state being painted then replaced. */
.vso-chat-messages.vso-chat-messages--hydrating {
    visibility: hidden;
}

.vso-chat-msg--user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.vso-chat-msg--bot {
    align-self: flex-start;
}

/* Per-message avatar removed (Fix #41). Header avatar still identifies the
   assistant; the per-row badge added clutter without adding clarity for a
   single-counterparty chat. Selectors retained for any third-party CSS that
   might still reference them; the JS no longer emits the element. */

/* ── Bubble content — splotch effect (fuzzy-edge diffuse bg) ─────── */

.vso-chat-msg-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    /* Flex children default to min-width:auto, which lets an intrinsic-sized
       <img> inside an embed card force the whole message row past its
       88% max-width. Clamping here keeps cards inside the bubble. */
    min-width: 0;
    max-width: 100%;
}

.vso-chat-msg-bubble {
    padding: 10px 14px;
    border-radius: 16px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.5;
    font-size: 14.5px;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.vso-chat-msg--user .vso-chat-msg-bubble {
    background: var(--vso-chat-user-bg);
    color: var(--vso-chat-user-text);
    border-bottom-right-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.vso-chat-msg--bot .vso-chat-msg-bubble {
    background: var(--vso-chat-bot-bg);
    color: var(--vso-chat-bot-text);
    border-bottom-left-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.vso-chat-msg-meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(0,0,0,0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 10px;
    padding: 2px 8px;
    position: absolute;
    bottom: -10px;
    left: -6px;
    z-index: 1;
}
.vso-chat-msg--user .vso-chat-msg-meta {
    left: auto;
    right: -6px;
}
.vso-chat-msg-meta-sep {
    font-size: 9px;
    color: rgba(255,255,255,0.25);
}
.vso-chat-msg-time {
    font-size: 10px;
    color: var(--vso-chat-text-muted);
}
/* ── Markdown inside bot bubbles ──────────────────────────────────── */

.vso-chat-msg-bubble strong { font-weight: 600; color: inherit; }
.vso-chat-msg-bubble em     { font-style: italic; }
.vso-chat-msg-bubble del    { text-decoration: line-through; }

.vso-chat-md-link {
    color: #93c5fd;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Ghost-bullet fix (BUG 2026-04-24): when the LLM writes a numbered list of
   [embed=N] references, markdown produces <li>[embed=N]</li>. The resolver
   replaces [embed=N] with a card <div>, but the list marker (1. 2. …) stays
   next to the card, and hallucinated-ID drops leave the <li> entirely empty.
   Strip the marker for li's that wrap a card, and hide truly-empty li's. */
.vso-chat-msg-bubble li:has(> .vso-chat-embed),
.vso-chat-msg-bubble li:has(> .vso-chat-product-card),
.vso-chat-msg-bubble li:has(> .vso-chat-person-card) {
    list-style: none;
    margin-left: -1.2em;
}
.vso-chat-msg-bubble li:empty { display: none; }

.vso-chat-msg--user .vso-chat-md-link {
    color: #fff;
}

.vso-chat-md-code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.9em;
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 5px;
    border-radius: 4px;
}

.vso-chat-md-pre {
    background: rgba(0, 0, 0, 0.25);
    color: #e2e8f0;
    padding: 12px;
    border-radius: 10px;
    overflow-x: auto;
    margin: 6px 0;
    font-size: 13px;
    line-height: 1.45;
}

.vso-chat-md-pre code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    background: none;
    padding: 0;
    color: inherit;
}

.vso-chat-md-h1,
.vso-chat-md-h2,
.vso-chat-md-h3,
.vso-chat-md-h4 {
    margin: 8px 0 4px;
    line-height: 1.3;
    color: inherit;
}

.vso-chat-md-h1 { font-size: 1.3em; font-weight: 700; }
.vso-chat-md-h2 { font-size: 1.15em; font-weight: 700; }
.vso-chat-md-h3 { font-size: 1.05em; font-weight: 600; }
.vso-chat-md-h4 { font-size: 1em; font-weight: 600; }

.vso-chat-md-list {
    margin: 4px 0;
    padding-left: 20px;
}

.vso-chat-md-list li {
    margin: 2px 0;
}

.vso-chat-md-bq {
    border-left: 3px solid rgba(255, 255, 255, 0.2);
    padding: 4px 10px;
    margin: 4px 0;
    color: var(--vso-chat-text-muted);
    font-style: italic;
}

.vso-chat-md-hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 8px 0;
}

.vso-chat-md-break {
    height: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * TYPING INDICATOR
 * ═══════════════════════════════════════════════════════════════════════════ */

.vso-chat-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 2px;
    transition: opacity 0.2s ease;
}

.vso-chat-typing--out {
    opacity: 0;
    position: absolute;
    pointer-events: none;
}

.vso-chat-typing-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    animation: vso-chat-dot-bounce 1.2s ease-in-out infinite;
}

.vso-chat-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.vso-chat-typing-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes vso-chat-dot-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
    30%           { transform: translateY(-6px); opacity: 0.9; }
}

/* Per-word fade during streaming */
.vso-chat-word-in {
    animation: vso-word-fade 0.15s ease both !important;
}

@keyframes vso-word-fade {
    from { opacity: 0 !important; }
    to   { opacity: 1 !important; }
}

/* ── Tool-call indicator ──────────────────────────────────────────── */

.vso-chat-tool-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: 4px 0;
    background: var(--vso-chat-bot-bg);
    border-radius: 10px;
    font-size: 12px;
    color: var(--vso-chat-text-muted);
    max-width: 88%;
    align-self: flex-start;
    animation: vso-chat-msg-in 0.2s ease both;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.vso-chat-tool-indicator svg {
    width: 14px;
    height: 14px;
    fill: var(--vso-chat-text-muted);
    animation: vso-chat-spin 1.5s linear infinite;
    flex-shrink: 0;
}

@keyframes vso-chat-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * PRODUCT CARDS
 * ═══════════════════════════════════════════════════════════════════════════ */

.vso-chat-products {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: visible;
    padding: 6px 0 2px;
    margin: 8px 0;
}


.vso-chat-product-card {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
    color: #fff;
    display: flex;
    align-items: stretch;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.vso-chat-product-img-wrap {
    flex: 0 0 auto;
    width: 92px;
    min-height: 92px;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.vso-chat-product-img-wrap:hover {
    background: rgba(255, 255, 255, 0.1);
}

.vso-chat-product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vso-chat-product-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    gap: 3px;
}

.vso-chat-product-name {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    /* Avoid orphan letters wrapping to a new line (e.g. the "g" in "500 g").
       `text-wrap: pretty` is a progressive enhancement (Chrome 117+, Safari
       17.4+); browsers that ignore it fall back to the existing behavior. */
    text-wrap: pretty;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
}
.vso-chat-product-name:hover {
    text-decoration: underline;
}

.vso-chat-product-price {
    font-size: 14px;
    font-weight: 700;
    color: #86efac;
    line-height: 1.25;
}
/* WC's price_html ships as <span class="woocommerce-Price-amount"> with
   an inner <bdi>. On sale it wraps a <del> (old price) and <ins> (new). */
.vso-chat-product-price .woocommerce-Price-amount,
.vso-chat-product-price bdi { color: inherit; }
.vso-chat-product-price del {
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
    margin-right: 4px;
}
.vso-chat-product-price ins {
    background: transparent;
    text-decoration: none;
    color: #86efac;
}
.vso-chat-product-price small.woocommerce-price-suffix {
    font-size: 10px;
    font-weight: 500;
    opacity: 0.7;
    margin-left: 3px;
}

/* ── Stock indicator ────────────────────────────────────────────────── */

.vso-chat-product-stock {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    margin-top: -1px;
}
.vso-chat-product-stock--in {
    color: #86efac;
}
.vso-chat-product-stock--out {
    color: #fca5a5;
}
.vso-chat-product-stock--backorder {
    color: #fbbf24;
}
/* Embed-context price + stock share a horizontal row so the card doesn't
   stack two short labels vertically. Baseline alignment keeps the smaller
   stock label visually anchored to the price's text baseline; flex-wrap
   protects narrow widths (mobile, side-by-side cards). */
.vso-chat-embed-price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
}
.vso-chat-embed-price-row .vso-chat-embed-price {
    flex: 0 0 auto;
}
.vso-chat-embed-price-row .vso-chat-embed-stock.vso-chat-product-stock {
    margin-top: 0;
    flex: 0 0 auto;
}
/* Visual separator between price and stock — only when stock is actually
   present (`:has(+ .vso-chat-embed-stock)`), so a card without stock data
   doesn't end up with a floating orphan dot. Per Gemini 3.1 Pro review
   2026-05-01. `:has()` is supported in all modern browsers (Chrome 105+,
   Safari 15.4+, Firefox 121+) — older browsers gracefully degrade to the
   plain gap separator already on `.vso-chat-embed-price-row`. */
.vso-chat-embed-price-row .vso-chat-embed-price:has(+ .vso-chat-embed-stock)::after {
    content: '\00B7';
    margin-left: 8px;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 400;
}

/* Inline cart-action error label — surfaces WC's "stock insufficient" /
   "no longer available" notices below the qty selector instead of a silent
   spinner. Sits inside the embed body so it inherits the parent gap. */
.vso-chat-cart-err {
    font-size: 11.5px;
    line-height: 1.3;
    color: #fca5a5;
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.25);
    border-radius: 6px;
    padding: 6px 9px;
}

/* Fulfilled cart-row state — replaces the qty/btn pair once the visitor
   already holds every available unit for this product. Neutral green note
   instead of the old red "Stoc epuizat" error which wrongly fired both on
   the initial probe AND right after a successful add of the last unit. */
.vso-chat-product-cart-row--fulfilled {
    background: rgba(74, 222, 128, 0.10);
    border: 1px solid rgba(74, 222, 128, 0.28);
    border-radius: 8px;
    padding: 8px 12px;
    justify-content: space-between;
    flex-wrap: wrap;
}
.vso-chat-cart-fulfilled {
    font-size: 12px;
    font-weight: 500;
    color: #bbf7d0;
    line-height: 1.35;
}
.vso-chat-cart-fulfilled-link {
    font-size: 12px;
    font-weight: 600;
    color: #86efac;
    text-decoration: none;
    white-space: nowrap;
}
.vso-chat-cart-fulfilled-link:hover {
    color: #4ade80;
    text-decoration: underline;
}

/* ── Qty + Add-to-cart row ──────────────────────────────────────────── */

.vso-chat-product-cart-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Inside an embed body the parent owns vertical rhythm via `gap`; the
       legacy `margin-top: auto` was meant for the search-card flex column
       and is harmless here, but removing the extra `padding-top: 4px`
       keeps spacing consistent with the rest of the body. */
}
.vso-chat-product-cart-row--cta {
    gap: 0;
}
.vso-chat-product-add-btn--contact {
    justify-content: center;
    text-align: center;
    background: rgba(59, 130, 246, 0.18);
    color: #bfdbfe;
    border: 1px solid rgba(59, 130, 246, 0.3);
    text-decoration: none !important;
}
.vso-chat-product-add-btn--contact:hover {
    background: rgba(59, 130, 246, 0.28);
}

.vso-chat-product-qty {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    overflow: hidden;
}

.vso-chat-qty-btn {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    background: transparent;
    border: none;
    padding: 0;
    font-family: inherit;
    transition: background 0.1s;
}
.vso-chat-qty-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.vso-chat-qty-val {
    width: 22px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    user-select: none;
}

.vso-chat-product-add-btn {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: none;
    border-radius: 6px;
    background: #15803d;
    color: #fff;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.15s, opacity 0.15s;
    line-height: 1.4;
}
.vso-chat-product-add-btn:hover {
    background: #16a34a;
}
.vso-chat-product-add-btn:disabled {
    opacity: 0.6;
    cursor: default;
}
.vso-chat-product-add-btn svg {
    flex-shrink: 0;
}

.vso-chat-product-add-btn--loading {
    opacity: 0.6;
}

.vso-chat-product-add-btn--done {
    background: #16a34a;
}

/* ── Product card shimmer + reveal ─────────────────────────────────── */

.vso-chat-product-card--loading {
    position: relative;
    min-height: 92px;
}

.vso-chat-product-card--loading .vso-chat-product-body,
.vso-chat-product-card--loading .vso-chat-product-img-wrap {
    opacity: 0;
}

.vso-chat-card-shimmer {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
}

.vso-chat-card-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255, 255, 255, 0.08) 45%,
        rgba(255, 255, 255, 0.14) 50%,
        rgba(255, 255, 255, 0.08) 55%,
        transparent 70%
    );
    animation: vso-shimmer 1.6s ease-in-out infinite;
}

@keyframes vso-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.vso-chat-skeleton-img {
    background: rgba(255, 255, 255, 0.06);
}

.vso-chat-skeleton-line {
    height: 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    margin: 6px 0;
}
.vso-chat-skeleton-line--wide  { width: 80%; }
.vso-chat-skeleton-line--short { width: 40%; }

/* Reveal: shimmer sweeps right one last time as content fades in */
.vso-chat-product-card--reveal .vso-chat-card-shimmer {
    animation: vso-shimmer-out 0.6s ease forwards;
}

.vso-chat-product-card--reveal > .vso-chat-product-img-wrap,
.vso-chat-product-card--reveal > .vso-chat-product-body {
    animation: vso-card-fadein 0.5s ease 0.1s forwards;
    opacity: 0;
}

@keyframes vso-shimmer-out {
    0%   { opacity: 1; }
    60%  { opacity: 0.5; }
    100% { opacity: 0; }
}

@keyframes vso-card-fadein {
    0%   { opacity: 0; transform: translateY(4px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ── Universal embed cards ──────────────────────────────────────────── */

.vso-chat-embed {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
    margin: 8px 0;
    color: #fff;
    font-size: 13px;
    max-width: 100%;
    box-sizing: border-box;
}

.vso-chat-embed--loading {
    padding: 16px;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

.vso-chat-embed--expired {
    padding: 8px 12px;
    color: rgba(255, 255, 255, 0.25);
    font-size: 11px;
    font-style: italic;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    display: inline-block;
}

.vso-chat-embed-img-wrap {
    display: block;
    width: 100%;
    overflow: hidden;
}

.vso-chat-embed-img {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    display: block;
}

.vso-chat-embed-body {
    padding: 10px 14px;
    /* Flex column with a single gap rule so we don't accumulate stacked
       margin-bottoms on every child. Earlier sequential margins added up
       to ~28px of dead space across description → price → stock → cart. */
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vso-chat-embed-title {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Fix #55: empty title (sparse map embed where the LLM forgot a title)
   would otherwise leave the body's `gap: 4px` plus padding visible as a
   dead band of background under the map. Collapse empty titles so the
   body shrinks to its real content. */
.vso-chat-embed-title:empty { display: none; }

.vso-chat-embed-desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    line-height: 1.4;
    white-space: pre-line;
    /* Cap to ~6 lines so a long WC short_description / post_excerpt /
       description_override doesn't turn the embed card into a wall of
       text. Visitor still gets the gist; the "Vezi detalii" CTA goes
       to the full product page for everything else. */
    display: -webkit-box;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vso-chat-embed-price {
    font-weight: 700;
    font-size: 15px;
    color: #4ade80;
}

.vso-chat-embed-info {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.vso-chat-embed-info-row {
    display: contents;
}

.vso-chat-embed-info-key {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
}

.vso-chat-embed-info-key::after {
    content: ':';
}

.vso-chat-embed-info-val {
    color: rgba(255, 255, 255, 0.6);
}

.vso-chat-embed-cta,
.vso-chat-embed-dl-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
    margin-top: 6px;
    margin-right: 6px;
    /* Fix #55: `.vso-chat-embed-body` is a flex column (default
       `align-items: stretch`), so an `inline-flex` CTA still gets
       stretched to the full cross-axis width — the "Vezi detalii" /
       "Contact" button on map + contact embeds rendered as a full-width
       banner instead of a content-sized pill. `align-self: flex-start`
       opts out of the stretch so the CTA respects its content width. */
    align-self: flex-start;
}

.vso-chat-embed-cta {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.vso-chat-embed-cta:hover {
    background: rgba(255, 255, 255, 0.2);
}

.vso-chat-embed-dl-btn {
    background: rgba(96, 165, 250, 0.15);
    color: #93c5fd;
}
.vso-chat-embed-dl-btn:hover {
    background: rgba(96, 165, 250, 0.25);
}

/* ── Map embed ─────────────────────────────────────────────────────── */

.vso-chat-embed-map {
    position: relative;
    width: 100%;
    height: 140px;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

.vso-chat-embed-map-frame {
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: none;
}

.vso-chat-embed-map-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 8px;
    cursor: pointer;
    background: linear-gradient(transparent 40%, rgba(0,0,0,0.4) 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    transition: background 0.2s;
}

.vso-chat-embed-map-overlay:hover {
    background: linear-gradient(transparent 20%, rgba(0,0,0,0.5) 100%);
}

.vso-chat-map-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85);
    padding: 24px;
}

.vso-chat-embed-map-fullscreen {
    width: 100%;
    height: 100%;
    max-width: 1200px;
    max-height: 800px;
    border: none;
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

/* ── Image lightbox ─────────────────────────────────────────────────── */

.vso-chat-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
    cursor: pointer;
}
.vso-chat-lightbox--open {
    opacity: 1;
}

.vso-chat-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.vso-chat-lightbox-img {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * NEW MESSAGES INDICATOR
 * ═══════════════════════════════════════════════════════════════════════════ */

.vso-chat-new-msgs {
    position: absolute;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    padding: 10px 22px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 1;
    border: none;
    font-family: var(--vso-chat-font);
    -webkit-tap-highlight-color: transparent;
}

/* System messages (takeover notifications) */
.vso-chat-msg--system {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    font-style: italic;
    padding: 8px 0;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * MEMORY METER BANNER (Fix #294)
 * Message-count meter warning, pinned at the top of the message list. The
 * dismissible warning (50/70/90%) reads as an info note; the persistent
 * ≥100% --full variant is stronger. Uses the widget glass tokens; contrast
 * kept ≥4.5:1 on the dark surface (amber/red on a translucent dark tint).
 * ═══════════════════════════════════════════════════════════════════════════ */
.vso-chat-memory-warning {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 8px;
    padding: 10px 12px;
    border-radius: 12px;
    font-family: var(--vso-chat-font);
    font-size: 12.5px;
    line-height: 1.4;
    /* Amber info tint — readable on the dark glass panel. */
    color: #ffe2b0;
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.38);
}

.vso-chat-memory-warning--full {
    /* Persistent "memory full" — stronger red tint, no close button. */
    color: #ffd4d4;
    background: rgba(220, 38, 38, 0.16);
    border-color: rgba(220, 38, 38, 0.46);
}

.vso-chat-memory-warning-text {
    flex: 1;
    min-width: 0;
}

.vso-chat-memory-warning-close {
    all: unset;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, color 0.15s;
}

.vso-chat-memory-warning-close:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

/* ── Live message-length counter (Fix #294) ────────────────────────────────
 * Sits between the textarea and the send button; hidden until near the cap.
 * Bottom-aligned with the send button via the flex input-area baseline. */
.vso-chat-char-counter {
    flex-shrink: 0;
    align-self: flex-end;
    margin-bottom: 11px;
    font-family: var(--vso-chat-font);
    font-size: 11px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.5);
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: opacity 0.15s;
    pointer-events: none;
    white-space: nowrap;
}

.vso-chat-char-counter--visible {
    opacity: 1;
    width: auto;
    margin-right: 2px;
}

.vso-chat-char-counter--warn {
    color: #ff9d7a;
    font-weight: 600;
}

.vso-chat-new-msgs--visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * INPUT AREA
 * ═══════════════════════════════════════════════════════════════════════════ */

.vso-chat-input-area {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
    flex-shrink: 0;
}

/* Fix #251 — always-visible "Powered by {brand}" credit under the typebox.
   Shares the input-area band tint so it reads as the SAME area as the typebox
   (one contiguous band, no separate footer seam); centered horizontally via
   text-align and vertically via symmetric padding so it never looks tight.
   NOTE: do NOT use display:flex here — flex wraps the "Powered by " text in an
   anonymous flex item and strips its trailing space, gluing it to the link. */
.vso-chat-powered {
    flex-shrink: 0;
    padding: 10px 14px;
    text-align: center;
    font-family: var(--vso-chat-font);
    font-size: 11px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.03);
    letter-spacing: 0.02em;
}

.vso-chat-powered a,
.vso-chat-powered-link {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-weight: 600;
}

.vso-chat-powered a:hover,
.vso-chat-powered-link:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.vso-chat-textarea {
    all: unset;
    flex: 1;
    font-family: var(--vso-chat-font) !important;
    font-size: 14px !important;
    color: #fff !important;
    line-height: 1.45 !important;
    padding: 8px 12px !important;
    background: rgba(20, 20, 28, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    resize: none !important;
    max-height: calc(1.45em * 4 + 18px);
    overflow-y: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    display: block;
    box-sizing: border-box !important;
    transition: border-color 0.15s;
}

.vso-chat-textarea:focus {
    border-color: rgba(255, 255, 255, 0.2) !important;
    background: rgba(20, 20, 28, 0.9) !important;
}

.vso-chat-textarea::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

.vso-chat-textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.vso-chat-send-btn {
    all: unset;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}

.vso-chat-send-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.18);
}

.vso-chat-send-btn:active:not(:disabled) {
    transform: scale(0.92);
}

.vso-chat-send-btn:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.3);
    outline-offset: 3px;
}

.vso-chat-send-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.vso-chat-send-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* ── Stop button ─────────────────────────────────────── */

.vso-chat-stop-btn {
    all: unset;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #dc2626;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}

.vso-chat-stop-btn:hover {
    background: #b91c1c;
}

.vso-chat-stop-btn:active {
    transform: scale(0.92);
}

.vso-chat-stop-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ERROR / RETRY
 * ═══════════════════════════════════════════════════════════════════════════ */

.vso-chat-error {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 14px;
    margin: 4px 0;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 10px;
    font-size: 13px;
    color: #fca5a5;
    animation: vso-chat-msg-in 0.2s ease both;
}

.vso-chat-error-retry {
    all: unset;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #93c5fd;
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-left: auto;
    white-space: nowrap;
}

.vso-chat-error-retry:hover {
    color: #bfdbfe;
}

.vso-chat-error-top {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.vso-chat-error-contact {
    margin-top: 0;
    padding: 8px 10px;
    background: rgba(255,255,255,0.03);
    border-color: rgba(239, 68, 68, 0.15);
}

/* Small header above the contact rows in the error block (the site's own
   contact since Fix #285). */
.vso-chat-error-contact-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 4px;
}

/* In the error fallback, values must be fully visible — no truncation.
   Stack value below label and allow wrap so long emails / page titles
   read in full without hover. */
.vso-chat-error-contact .vso-chat-contact-row {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 2px;
}
.vso-chat-error-contact .vso-chat-contact-row-value {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
    overflow-wrap: anywhere;
    text-align: left;
    flex: 1 1 100%;
    padding-left: 36px;
    font-size: 12.5px;
    color: rgba(255,255,255,0.78);
}

/* ── Info overlay ────────────────────────────────────────────────── */

.vso-chat-info-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.vso-chat-info-card {
    background: var(--vso-bg-primary, rgba(15,20,30,0.95));
    border: 1px solid var(--vso-border, rgba(255,255,255,0.1));
    border-radius: 16px;
    padding: 28px 24px 20px;
    max-width: 300px;
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    position: relative;
}

.vso-chat-info-x {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: rgba(255,255,255,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.vso-chat-info-x:hover {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.95);
}

.vso-chat-info-x svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.vso-chat-info-desc-p {
    margin: 0 0 10px;
}
.vso-chat-info-desc-p:last-child {
    margin-bottom: 0;
}

.vso-chat-info-hero {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    background: var(--vso-primary, #2563eb);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vso-chat-info-hero svg {
    width: 28px;
    height: 28px;
    fill: #fff;
}

.vso-chat-info-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--vso-text-primary, #fff);
    margin-bottom: 10px;
}

.vso-chat-info-desc {
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255,255,255,0.6);
    margin-bottom: 16px;
}

.vso-chat-info-powered {
    font-size: 12px;
    color: rgba(255,255,255,0.35);
    margin-bottom: 12px;
}

.vso-chat-info-powered a {
    color: rgba(255,255,255,0.55);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.vso-chat-info-privacy {
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    color: rgba(255,255,255,0.55);
    margin: 4px 0 14px;
}

.vso-chat-info-privacy a {
    color: var(--vso-primary, #60a5fa);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.vso-chat-info-privacy a:hover {
    opacity: 0.85;
}

.vso-chat-info-links {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 18px;
}

.vso-chat-info-link {
    font-size: 12px;
    color: var(--vso-primary, #60a5fa);
    text-decoration: none;
    padding: 4px 10px;
    border: 1px solid var(--vso-border, rgba(255,255,255,0.1));
    border-radius: 8px;
    transition: background 0.15s, border-color 0.15s;
}

.vso-chat-info-link:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.2);
}

.vso-chat-info-close {
    all: unset;
    cursor: pointer;
    display: block;
    width: 100%;
    padding: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--vso-primary, #2563eb);
    border-radius: 10px;
    text-align: center;
    transition: opacity 0.15s;
}

.vso-chat-info-close:hover { opacity: 0.85; }

/* P4: terms gate — Accept + Reject pair. Wrapper lays out side-by-side
   with the primary (Accept) action on the right per platform convention.
   Reject is a quieter secondary so the accept path remains the obvious
   default while still being a real, clickable choice (not a sneaky
   pre-check). */
.vso-chat-info-actions {
    display: flex;
    gap: 8px;
    width: 100%;
}

.vso-chat-info-actions .vso-chat-info-close {
    flex: 1;
}

.vso-chat-info-accept {
    all: unset;
    cursor: pointer;
    flex: 1;
    padding: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--vso-primary, #2563eb);
    border-radius: 10px;
    text-align: center;
    transition: opacity 0.15s;
}

.vso-chat-info-accept:hover { opacity: 0.85; }

.vso-chat-info-reject {
    all: unset;
    cursor: pointer;
    flex: 1;
    padding: 10px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--vso-border, rgba(255,255,255,0.1));
    border-radius: 10px;
    text-align: center;
    transition: background 0.15s, color 0.15s;
    box-sizing: border-box;
}

.vso-chat-info-reject:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

/* ═══════════════════════════════���═════════════════════════════���═════════════
 * MOBILE FULL-SCREEN (<768px)
 * ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    .vso-chat-panel {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100dvh; /* dynamic viewport height — shrinks with keyboard */
        height: 100%; /* fallback for older browsers */
        max-height: 100dvh;
        max-height: 100%;
        border-radius: 0;
        backdrop-filter: blur(32px);
        -webkit-backdrop-filter: blur(32px);
        /* Prevent scroll-away when keyboard opens */
        overflow: hidden;
        touch-action: none;
    }

    /* Allow scrolling only within the messages area */
    .vso-chat-panel .vso-chat-messages {
        touch-action: pan-y;
        overscroll-behavior: contain;
    }

    .vso-chat-panel--open {
        transform: translateY(0) scale(1);
    }

    .vso-chat-header-btn {
        width: 36px;
        height: 36px;
    }

    .vso-chat-header-btn svg {
        width: 22px;
        height: 22px;
    }

    .vso-chat-input-area {
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }

    .vso-chat-bubble {
        bottom: 16px;
    }

    .vso-chat-bubble--right { right: 16px; }
    .vso-chat-bubble--left  { left: 16px; }

    .vso-chat-product-card {
        width: 100%;
    }

    .vso-chat-bubble--pill {
        max-width: calc(100vw - 32px);
    }
    .vso-chat-bubble--pill .vso-chat-pill-text {
        max-width: calc(100vw - 112px);
    }

    .vso-chat-header {
        cursor: default !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ACCESSIBILITY — reduced motion
 * ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .vso-chat-panel,
    .vso-chat-msg,
    .vso-chat-bubble,
    .vso-chat-bubble::before,
    .vso-chat-badge,
    .vso-chat-new-msgs,
    .vso-chat-tool-indicator {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
    .vso-chat-bubble::before { transform: none !important; }

    .vso-chat-typing-dot {
        animation: none !important;
        opacity: 0.5;
    }

    .vso-chat-header-name--scrolling .vso-chat-header-name-text {
        animation: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * TAKEOVER / AGENT MODE
 * ═══════════════════════════════════════════════════════════════════════════ */

.vso-chat-header-status--live {
    color: var(--vso-chat-accent, #22c55e);
    font-weight: 500;
}
.vso-chat-header-status--live::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #22c55e;
    margin-right: 4px;
    vertical-align: middle;
    animation: vso-live-pulse 2s infinite;
}
@keyframes vso-live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.vso-chat-msg--agent .vso-chat-msg-bubble {
    background: rgba(251, 191, 36, 0.10);
    border: 1px solid rgba(251, 191, 36, 0.2);
}

/* ── Follow-up suggestions ───────────────────────────────────────── */

.vso-chat-suggestions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    padding: 2px 12px 4px 44px;
    /* Clearance for the absolutely-positioned meta pill (timestamp + feedback +
       confidence ring) which hangs ~14px below the bubble (bottom:-10px). With a
       negative/zero top margin the ring overlapped the first suggestion chip. */
    margin-top: 12px;
}
.vso-chat-suggestion-btn {
    font-family: inherit;
    font-size: 0.7rem;
    padding: 3px 10px;
    border: 1px solid var(--vso-border, rgba(255,255,255,0.12));
    border-radius: 12px;
    background: var(--vso-bg-secondary, rgba(255,255,255,0.06));
    color: var(--vso-text-secondary, rgba(255,255,255,0.7));
    cursor: pointer;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    line-height: 1.2;
    text-align: center;
    min-width: 50%;
    width: fit-content;
}
.vso-chat-suggestion-btn:hover {
    background: var(--vso-primary, #2563eb);
    border-color: var(--vso-primary, #2563eb);
    color: #fff;
}

/* Initial-state pills (rendered under the greeting from cfg.greeting's
 * trailing [suggestions:] tail). Audience-segmentation labels can be long
 * ("🚛 Manager flotă / companie privată"), so override the truncating
 * defaults from .vso-chat-suggestion-btn — wrap, full width, left-aligned. */
.vso-chat-suggestions--initial {
    align-items: stretch;
    padding: 8px 12px 4px 44px;
    gap: 6px;
}
.vso-chat-suggestions--initial .vso-chat-suggestion-btn {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    text-align: left;
    padding: 8px 12px;
    line-height: 1.35;
    font-size: 0.78rem;
    min-width: 100%;
    width: 100%;
    word-break: normal;
    overflow-wrap: break-word;
}

/* Welcome panel — per-site configurable HTML rendered in the empty-state
 * below the greeting. Hidden on first user send + when history loads. */
.vso-chat-welcome-panel {
    margin: 10px 12px 6px;
    padding: 12px 14px;
    background: var(--vso-bg-secondary, rgba(255,255,255,0.04));
    border: 1px solid var(--vso-border, rgba(255,255,255,0.10));
    border-radius: 12px;
    color: var(--vso-text, rgba(255,255,255,0.85));
    font-size: 0.82rem;
    line-height: 1.45;
    animation: vso-chat-msg-in 0.25s ease both !important;
}
.vso-chat-welcome-panel a {
    color: var(--vso-primary, #93c5fd);
    text-decoration: none;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.vso-chat-welcome-panel a:hover {
    text-decoration: underline;
}
.vso-chat-welcome-panel p {
    margin: 0 0 6px;
}
.vso-chat-welcome-panel p:last-child {
    margin-bottom: 0;
}
.vso-chat-welcome-panel ul,
.vso-chat-welcome-panel ol {
    margin: 4px 0 6px;
    padding-left: 18px;
}
.vso-chat-welcome-panel table {
    width: 100%;
    border-collapse: collapse;
    margin: 4px 0;
}
.vso-chat-welcome-panel th,
.vso-chat-welcome-panel td {
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid var(--vso-border, rgba(255,255,255,0.08));
    font-size: 0.8rem;
}
.vso-chat-welcome-panel th:last-child,
.vso-chat-welcome-panel td:last-child {
    text-align: right;
}
.vso-chat-welcome-panel tr:last-child th,
.vso-chat-welcome-panel tr:last-child td {
    border-bottom: 0;
}
.vso-chat-welcome-panel .vso-chat-welcome-btn,
.vso-chat-welcome-panel a.vso-chat-welcome-btn,
.vso-chat-welcome-panel button.vso-chat-welcome-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    margin: 4px 4px 0 0;
    border: 1px solid var(--vso-border, rgba(255,255,255,0.18));
    border-radius: 999px;
    background: var(--vso-bg-secondary, rgba(255,255,255,0.06));
    color: var(--vso-text, #fff);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
.vso-chat-welcome-panel .vso-chat-welcome-btn:hover,
.vso-chat-welcome-panel a.vso-chat-welcome-btn:hover {
    background: var(--vso-primary, #2563eb);
    border-color: var(--vso-primary, #2563eb);
    color: #fff;
    text-decoration: none;
}
.vso-chat-welcome-panel .vso-chat-welcome-btn--whatsapp,
.vso-chat-welcome-panel a.vso-chat-welcome-btn--whatsapp {
    background: rgba(37, 211, 102, 0.16);
    border-color: rgba(37, 211, 102, 0.35);
    color: #86efac;
}
.vso-chat-welcome-panel .vso-chat-welcome-btn--whatsapp:hover,
.vso-chat-welcome-panel a.vso-chat-welcome-btn--whatsapp:hover {
    background: #25d366;
    border-color: #25d366;
    color: #fff;
}

/* ── Action link buttons (phone, email, WhatsApp, URL) ───────────── */

.vso-chat-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 2px 1px;
    padding: 3px 10px;
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none !important;
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s;
    /* Long labels (breadcrumb-style link pills like "Lavatrici › Beko Wth84126as › 8 Kg")
       overflow the bubble with `white-space: nowrap`. Allow wrap inside the pill. */
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
    vertical-align: middle;
}
.vso-chat-action-btn > span { min-width: 0; }
.vso-chat-action-btn:hover { filter: brightness(1.2); transform: translateY(-1px); }
.vso-chat-action-btn:active { transform: translateY(0); }

.vso-chat-action-icon { flex-shrink: 0; width: 12px; height: 12px; display: inline-flex; align-items: center; justify-content: center; }
.vso-chat-action-icon svg { width: 100%; height: 100%; }
.vso-chat-action-favicon { width: 12px; height: 12px; border-radius: 2px; object-fit: contain; }

.vso-chat-action-btn--phone {
    background: rgba(234, 179, 8, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(234, 179, 8, 0.25);
}
.vso-chat-action-btn--phone:hover { background: rgba(234, 179, 8, 0.3); }

.vso-chat-action-btn--whatsapp {
    background: rgba(37, 211, 102, 0.15);
    color: #25d366;
    border: 1px solid rgba(37, 211, 102, 0.25);
}
.vso-chat-action-btn--whatsapp:hover { background: rgba(37, 211, 102, 0.3); }

.vso-chat-action-btn--email {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.25);
}
.vso-chat-action-btn--email:hover { background: rgba(59, 130, 246, 0.3); }

.vso-chat-action-btn--address {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.25);
}
.vso-chat-action-btn--address:hover { background: rgba(239, 68, 68, 0.3); }

.vso-chat-action-btn--link {
    background: var(--vso-bg-secondary, rgba(255,255,255,0.06));
    color: var(--vso-text-secondary, rgba(255,255,255,0.7));
    border: 1px solid var(--vso-border, rgba(255,255,255,0.1));
}
.vso-chat-action-btn--link:hover {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
    border-color: rgba(99, 102, 241, 0.3);
}

/* ── Contact block (token: [contact]) ───────────────────────────── */

.vso-chat-contact-block {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 8px 0 4px;
    background: var(--vso-bg-secondary, rgba(255,255,255,0.04));
    border: 1px solid var(--vso-border, rgba(255,255,255,0.08));
    border-radius: 10px;
    overflow: hidden;
}

.vso-chat-contact-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    text-decoration: none !important;
    color: var(--vso-text-primary, rgba(255,255,255,0.9));
    font-size: 13.5px;
    transition: background 0.15s;
    border-bottom: 1px solid var(--vso-border, rgba(255,255,255,0.06));
}

.vso-chat-contact-row:last-child { border-bottom: none; }

.vso-chat-contact-row:hover {
    background: rgba(255,255,255,0.06);
}

.vso-chat-contact-row-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.vso-chat-contact-row-icon svg { width: 14px; height: 14px; }

.vso-chat-contact-row-icon--phone    { background: rgba(234,179,8,0.15);  color: #fbbf24; }
.vso-chat-contact-row-icon--whatsapp { background: rgba(37,211,102,0.15); color: #25d366; }
.vso-chat-contact-row-icon--email    { background: rgba(59,130,246,0.15); color: #60a5fa; }
.vso-chat-contact-row-icon--address  { background: rgba(239,68,68,0.15);  color: #f87171; }
.vso-chat-contact-row-icon--map      { background: rgba(239,68,68,0.15);  color: #f87171; }
.vso-chat-contact-row-icon--link     { background: rgba(99,102,241,0.15); color: #a5b4fc; }

/* ── Welcome-panel auto-default contact card (Slice 4) ──────────── */

/* Drop double-frame when welcome panel hosts the auto-card. */
.vso-chat-welcome-panel:has(.vso-chat-contact-block--welcome) {
    padding: 0;
    background: transparent;
    border: 0;
}
.vso-chat-contact-block--welcome { margin: 0; }

/* CSS-driven glyph icons (sanitizeHTML strips SVG, so the welcome
   panel uses Unicode emoji glyphs via ::before). */
.vso-chat-contact-block--welcome .vso-chat-contact-row-icon {
    font-size: 14px;
    line-height: 1;
}
.vso-chat-contact-block--welcome .vso-chat-contact-row-icon::before {
    display: block;
}
.vso-chat-contact-block--welcome .vso-chat-contact-row-icon--phone::before    { content: "\1F4DE"; }
.vso-chat-contact-block--welcome .vso-chat-contact-row-icon--whatsapp::before { content: "\1F4AC"; }
.vso-chat-contact-block--welcome .vso-chat-contact-row-icon--email::before    { content: "\2709";  }
.vso-chat-contact-block--welcome .vso-chat-contact-row-icon--map::before      { content: "\1F4CD"; }
.vso-chat-contact-block--welcome .vso-chat-contact-row-icon--link::before     { content: "\1F517"; }

.vso-chat-contact-row-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: rgba(255,255,255,0.4);
    white-space: nowrap;
}

.vso-chat-contact-row-value {
    flex: 1;
    text-align: right;
    font-size: 13.5px;
    color: var(--vso-text-primary, rgba(255,255,255,0.85));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Multi-line address (or any contact value that needs to wrap).
   Opt-in via the --multiline modifier — default rows stay single-line. */
.vso-chat-contact-row-value--multiline {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.35;
}

/* ── Welcome-panel collapsible (native <details>) ──────────────── */

.vso-chat-welcome-collapse {
    background: var(--vso-bg-secondary, rgba(255,255,255,0.04));
    border: 1px solid var(--vso-border, rgba(255,255,255,0.08));
    border-radius: 10px;
    margin: 8px 0 4px;
    overflow: hidden;
}
.vso-chat-welcome-collapse > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    color: var(--vso-text-primary, rgba(255,255,255,0.9));
    transition: background 0.15s;
}
.vso-chat-welcome-collapse > summary::-webkit-details-marker { display: none; }
.vso-chat-welcome-collapse > summary:hover { background: rgba(255,255,255,0.06); }

.vso-chat-welcome-collapse-label {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.25;
}
.vso-chat-welcome-collapse-label > span:first-child {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--vso-text-primary, rgba(255,255,255,0.9));
}
.vso-chat-welcome-collapse-label > span:last-child {
    font-size: 11.5px;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Chevron — flips when <details> is open. */
.vso-chat-welcome-collapse > summary::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(255,255,255,0.5);
    border-bottom: 2px solid rgba(255,255,255,0.5);
    transform: rotate(45deg);
    transition: transform 0.2s;
    flex-shrink: 0;
    margin-right: 6px;
}
.vso-chat-welcome-collapse[open] > summary::after {
    transform: rotate(-135deg);
}

/* When the collapsible HOSTS the contact-block, drop its outer frame
   (the <details> already has the frame) so the rows sit flush. */
.vso-chat-welcome-collapse > .vso-chat-contact-block,
.vso-chat-welcome-collapse > .vso-chat-contact-block--welcome {
    border: 0;
    border-top: 1px solid var(--vso-border, rgba(255,255,255,0.08));
    border-radius: 0;
    margin: 0;
    background: transparent;
}

/* ── Feedback buttons (in meta pill) ────────────────────────────── */

.vso-chat-feedback {
    display: inline-flex;
    gap: 2px;
}
.vso-chat-feedback-btn {
    background: none;
    border: none;
    padding: 3px;
    cursor: pointer;
    color: rgba(255,255,255,0.5);
    border-radius: 4px;
    transition: color 0.15s, transform 0.15s;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.vso-chat-feedback-btn svg {
    width: 12px;
    height: 12px;
}
.vso-chat-feedback-btn:hover {
    color: rgba(255,255,255,0.95);
    transform: scale(1.15);
}
.vso-chat-feedback-btn:focus:not(:focus-visible) {
    outline: none;
}
.vso-chat-feedback-btn--active {
    color: var(--vso-primary, #2563eb) !important;
    opacity: 1;
}
.vso-chat-feedback-btn:disabled {
    cursor: default;
    transform: none;
}

/* ── Confidence/groundedness ring (Fix #267) ──────────────────────────
   Wrap-around progress ring around a percentage, opt-in per site. The arc
   is a conic-gradient driven by two custom properties set in JS:
     --vso-conf-pct   the filled sweep (0%–100%)
     --vso-conf-color the band colour (green/yellow/orange/red modifiers)
   A masked inner disc punches out the centre so only the rim shows. Score
   and band are computed server-side; this only paints. */
.vso-chat-conf {
    --vso-conf-pct: 0%;
    --vso-conf-color: #16a34a;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    cursor: help;
    background:
        conic-gradient(var(--vso-conf-color) var(--vso-conf-pct),
                       rgba(255,255,255,0.18) 0);
}
/* Inner disc: matches the meta-row tint so the ring reads as a rim. */
.vso-chat-conf::before {
    content: "";
    position: absolute;
    inset: 2.5px;
    border-radius: 50%;
    background: var(--vso-chat-surface, #1f2430);
}
.vso-chat-conf-val {
    position: relative;
    z-index: 1;
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    color: var(--vso-chat-text, #fff);
}
.vso-chat-conf--green  { --vso-conf-color: #16a34a; }
.vso-chat-conf--yellow { --vso-conf-color: #ca8a04; }
.vso-chat-conf--orange { --vso-conf-color: #ea580c; }
.vso-chat-conf--red    { --vso-conf-color: #dc2626; }

/* ── Modal (backdrop + centered card, scoped to .vso-chat-panel) ─── */

.vso-chat-modal-backdrop {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    animation: vso-chat-modal-in 0.16s ease both;
}

@keyframes vso-chat-modal-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.vso-chat-modal-card {
    position: relative;
    width: 100%;
    max-width: 320px;
    background: #1e2330;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    padding: 22px 20px 18px;
    color: #fff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    animation: vso-chat-modal-pop 0.18s ease both;
}

@keyframes vso-chat-modal-pop {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

.vso-chat-modal-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
}
.vso-chat-modal-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

/* ── Contact form (modal) ───────────────────────────────────────── */

.vso-chat-contact-form {
    /* Inherits modal-card layout; overrides only what's specific. */
}
.vso-chat-contact-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 14px;
    line-height: 1.4;
    padding-right: 18px;
}
.vso-chat-contact-field {
    display: block;
    margin-bottom: 10px;
}
.vso-chat-contact-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.vso-chat-contact-input {
    display: block;
    width: 100%;
    padding: 9px 12px;
    font-family: inherit;
    font-size: 0.88rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    box-sizing: border-box;
    transition: border-color 0.15s, background 0.15s;
}
.vso-chat-contact-input::placeholder {
    color: var(--vso-text-secondary, rgba(255,255,255,0.4));
}
.vso-chat-contact-input:focus {
    outline: none;
    border-color: var(--vso-primary, #2563eb);
}
.vso-chat-contact-submit {
    display: block;
    width: 100%;
    padding: 8px;
    margin-top: 8px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    background: var(--vso-primary, #2563eb);
    color: #fff;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}
.vso-chat-contact-submit:hover {
    filter: brightness(1.1);
}
.vso-chat-contact-submit:disabled {
    opacity: 0.6;
    cursor: default;
}

.vso-chat-contact-hint {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    margin: 4px 0 8px;
    line-height: 1.3;
}

.vso-chat-contact-input--pulse {
    animation: vso-contact-pulse 0.6s ease 2;
}

@keyframes vso-contact-pulse {
    0%, 100% { box-shadow: none; }
    50% { box-shadow: 0 0 0 2px var(--vso-chat-primary, #e2e8f0); }
}

/* ── Person directory card (resolved [person=ID] tokens) ──────────────── */
/* Styled to sit alongside .vso-chat-embed / .vso-chat-product-card in the
   bot bubble. Same glass background, same radius, slightly tighter padding
   because the content is short (name + role + section + a couple of meta
   rows) rather than a full editorial embed. */

.vso-chat-person-card {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 12px;
    margin: 8px 0;
    color: #fff;
    font-size: 13px;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vso-chat-person-card--loading {
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
    min-height: 56px;
    align-items: center;
    justify-content: center;
}

.vso-chat-person-card--missing {
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
}

.vso-chat-person-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.vso-chat-person-portrait {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 56px;
    background: rgba(255, 255, 255, 0.06);
}

.vso-chat-person-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vso-chat-person-name {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
    word-break: break-word;
}

.vso-chat-person-role {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.3;
}

.vso-chat-person-section,
a.vso-chat-person-section {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    line-height: 1.3;
}
a.vso-chat-person-section:hover {
    color: #fff;
    text-decoration: underline;
}

.vso-chat-person-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 8px;
}

.vso-chat-person-meta-row {
    line-height: 1.4;
    word-break: break-word;
}

.vso-chat-person-meta-label {
    color: rgba(255, 255, 255, 0.55);
}

.vso-chat-person-meta-val {
    color: rgba(255, 255, 255, 0.9);
}

a.vso-chat-person-meta-val {
    text-decoration: none;
    color: #fff;
}
a.vso-chat-person-meta-val:hover {
    text-decoration: underline;
}

a.vso-chat-person-cv {
    display: inline-block;
    align-self: flex-start;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
}
a.vso-chat-person-cv:hover {
    background: rgba(255, 255, 255, 0.18);
}