/* =========================================================
   Vago assistant: floating text chat
   ========================================================= */
.va { --va-b: #2f6bff; --va-b2: #6b95ff; --va-bg: #0f0f12; --va-s: #1d1d22; --va-line: rgba(255,255,255,.08); --va-tx2: #8e8e93; font-family: var(--ff); }
.va svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.va-v path { stroke-width: 3.4; stroke: #fff; }
.va-v .b { stroke: #fff; opacity: .55; }

/* ---------- floating button ---------- */
.va-fab {
  position: fixed; z-index: 70; right: 16px; bottom: calc(var(--tabh) + var(--safe-b) + 22px);
  width: 58px; height: 58px; border-radius: 50%; color: #fff;
  background: radial-gradient(120% 120% at 30% 20%, #5a8bff, var(--va-b) 55%, #1d4fd6);
  box-shadow: 0 14px 34px -8px rgba(47,107,255,.65), 0 0 0 1px rgba(255,255,255,.14) inset;
  display: grid; place-items: center;
  transition: transform .45s var(--spring), box-shadow .3s;
  opacity: 0; transform: scale(.6) translateY(20px);
}
.loaded .va-fab { opacity: 1; transform: none; transition: transform .7s var(--spring) .9s, opacity .4s .9s, box-shadow .3s; }
.va-fab:hover { box-shadow: 0 18px 40px -8px rgba(47,107,255,.85), 0 0 0 1px rgba(255,255,255,.2) inset; }
.va-fab:active, .loaded .va-fab:active { transform: scale(.92); }
.va-fab::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(107,149,255,.6); animation: va-ping 2.8s ease-out 4; /* a few pulses to catch the eye, then rest */ pointer-events: none; }
@keyframes va-ping { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(1.55); opacity: 0; } }
.va-fab-i { position: absolute; display: grid; place-items: center; transition: transform .45s var(--spring), opacity .25s; }
.va-fab-chat svg { width: 28px; height: 28px; fill: #fff; stroke: none; }
.va-fab-chat .f { fill: var(--va-b); }
.va-fab-x { opacity: 0; transform: rotate(-90deg) scale(.6); }
.va-fab-x svg { width: 22px; height: 22px; stroke-width: 2.2; }
.va.open .va-fab-chat { opacity: 0; transform: rotate(90deg) scale(.6); }
.va.open .va-fab-x { opacity: 1; transform: none; }
.va.open .va-fab::before { display: none; }
.va-badge { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #ff3b30; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px #000; transition: transform .35s var(--spring); }
.va-badge.gone { transform: scale(0); }

/* ---------- greeting bubble ---------- */
.va-hint {
  position: fixed; z-index: 70; right: 16px; bottom: calc(var(--tabh) + var(--safe-b) + 94px);
  width: min(280px, calc(100vw - 32px)); display: flex; gap: 10px; align-items: flex-start;
  padding: 14px 34px 14px 14px; border-radius: 18px 18px 6px 18px; cursor: pointer;
  background: #fff; color: #0b0b0c; box-shadow: 0 20px 50px -12px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(10px) scale(.96); transform-origin: bottom right; pointer-events: none;
  transition: opacity .35s, transform .5s var(--spring);
}
.va-hint.show { opacity: 1; transform: none; pointer-events: auto; }
.va-hint p { font-size: 13.5px; line-height: 1.45; }
.va-hint p b { display: block; font-size: 12px; color: #6e6e73; font-weight: 500; margin-bottom: 2px; }
.va-hint-av { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--va-b); display: grid; place-items: center; }
.va-hint-av svg { width: 18px; height: 18px; }
.va-hint-x { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #8e8e93; }
.va-hint-x svg { width: 12px; height: 12px; stroke-width: 2.4; }
.va.open .va-hint { display: none; }

/* ---------- panel ---------- */
.va-panel {
  position: fixed; z-index: 100; inset: 0; display: flex; flex-direction: column;
  background: var(--va-bg); color: var(--tx);
  transform: translateY(100%); transition: transform .55s cubic-bezier(.32, .72, 0, 1), visibility 0s .55s; visibility: hidden;
}
.va.open .va-panel { transform: none; visibility: visible; transition: transform .55s cubic-bezier(.32, .72, 0, 1), visibility 0s; }
.va-head { flex: none; display: flex; align-items: center; gap: 10px; padding: calc(var(--safe-t) + 10px) 10px 10px; border-bottom: 1px solid var(--va-line); background: rgba(15,15,18,.92); }
.va-back, .va-hbtn { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--tx); transition: background .25s, transform .35s var(--spring); }
.va-back:active, .va-hbtn:active { transform: scale(.9); }
.va-back svg { width: 24px; height: 24px; }
.va-hbtn svg { width: 20px; height: 20px; }
.va-hbtn:hover, .va-back:hover { background: rgba(255,255,255,.08); }
.va-callbtn { color: var(--va-b2); }
.va-x { display: none; }
.va-av { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(120% 120% at 30% 20%, #5a8bff, var(--va-b) 60%, #1d4fd6); }
.va-av svg { width: 20px; height: 20px; }
.va-av i { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: #30d158; box-shadow: 0 0 0 2px var(--va-bg); }
.va-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.va-who b { font-size: 15px; font-weight: 600; }
.va-status { font-size: 12px; color: #30d158; }

.va-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px 12px 8px; -webkit-overflow-scrolling: touch; }
.va-day { width: max-content; margin: 2px auto 14px; padding: 4px 10px; border-radius: 8px; font-size: 11px; color: var(--va-tx2); background: rgba(255,255,255,.05); }
.va-list { display: flex; flex-direction: column; gap: 4px; }
.va-row { display: flex; animation: va-in .35s var(--ease) both; }
@keyframes va-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.va-row-me { justify-content: flex-end; }
.va-row-me + .va-row-bot, .va-row-bot + .va-row-me { margin-top: 8px; }
.va-b { position: relative; max-width: 82%; padding: 9px 12px 7px; font-size: 14.5px; line-height: 1.45; word-wrap: break-word; border-radius: 18px; }
.va-row-bot .va-b { background: var(--va-s); border-bottom-left-radius: 6px; }
.va-row-me .va-b { background: linear-gradient(180deg, #4a7dff, var(--va-b)); color: #fff; border-bottom-right-radius: 6px; }
.va-b a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.va-row-bot .va-b a { color: var(--va-b2); }
.va-b .li { display: block; padding-left: 14px; position: relative; }
.va-b .li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .6; }
.va-meta { float: right; display: inline-flex; align-items: center; gap: 3px; margin: 6px 0 -2px 10px; font-size: 10.5px; opacity: .55; }
.va-row-me .va-meta { opacity: .8; }
.va-tk svg { width: 16px; height: 11px; stroke-width: 1.6; }
.va-tk.read { color: #b8d0ff; }

.va-typing .va-b { display: inline-flex; gap: 4px; padding: 13px 14px; }
.va-typing i { width: 7px; height: 7px; border-radius: 50%; background: #8e8e93; animation: va-dot 1.2s ease-in-out infinite; }
.va-typing i:nth-child(2) { animation-delay: .15s; }
.va-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes va-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }

.va-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; animation: va-in .4s var(--ease) .15s both; }
.va-chips button { padding: 8px 12px; border-radius: 16px; font-size: 13px; color: var(--va-b2); border: 1px solid rgba(107,149,255,.35); background: rgba(47,107,255,.08); transition: background .25s, transform .3s var(--spring); }
.va-chips button:hover { background: rgba(47,107,255,.18); }
.va-chips button:active { transform: scale(.95); }

.va-comp { flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px calc(var(--safe-b) + 10px); border-top: 1px solid var(--va-line); background: var(--va-bg); }
.va-comp textarea { flex: 1; resize: none; max-height: 120px; overflow-y: hidden; scrollbar-width: none; height: 44px; padding: 11px 16px; border-radius: 22px; border: 1px solid var(--va-line); background: #1a1a1e; color: var(--tx); font: inherit; font-size: 16px; line-height: 1.35; outline: none; transition: border-color .25s; }
.va-comp textarea:focus { border-color: rgba(107,149,255,.45); }
.va-send { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--va-b); color: #fff; transition: transform .35s var(--spring), opacity .25s, background .25s; }
.va-send svg { width: 20px; height: 20px; stroke-width: 2.2; }
.va-send:disabled { opacity: .35; transform: scale(.92); }
.va-send:not(:disabled):active { transform: scale(.88); }

/* ---------- desktop ---------- */
@media (min-width: 1024px) {
  .va-fab { right: 28px; bottom: 28px; width: 60px; height: 60px; }
  .va-hint { right: 28px; bottom: 102px; }
  .va-panel {
    inset: auto 28px 102px auto; width: 384px; height: min(640px, calc(100vh - 140px));
    border-radius: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 40px 100px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.4);
    transform: translateY(16px) scale(.96); transform-origin: bottom right; opacity: 0;
    transition: transform .45s var(--spring), opacity .25s, visibility 0s .45s;
  }
  .va.open .va-panel { transform: none; opacity: 1; transition: transform .45s var(--spring), opacity .25s, visibility 0s; }
  .va-head { padding: 12px 10px 12px 14px; }
  .va-back { display: none; }
  .va-x { display: grid; }
  .va-comp textarea { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .va-fab::before { animation: none !important; }
}

.va-comp textarea::-webkit-scrollbar { display: none; }