/* VL Assist 0.3.1 — chat-first, scoped, responsive */
.vla, .vla * { box-sizing:border-box; }
.vla { --ink:#162b3b; --muted:#6c8190; --accent:#077c78; --accent-dark:#075b5c; --line:#e3eaf0;
  position:relative; isolation:isolate; width:min(960px,calc(100vw - 32px)); max-width:none;
  left:50%; transform:translateX(-50%); margin:18px 0 26px;
  height:min(790px,calc(100dvh - 110px)); min-height:530px; overflow:hidden;
  border:1px solid #dfe8ed; border-radius:22px; background:#fff; box-shadow:0 18px 60px rgba(19,44,59,.10);
  color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.5;
}
.vla__panel { display:flex; flex-direction:column; min-height:0; height:100%; background:#fff; }
.vla__panel-top { display:flex; align-items:center; gap:13px; min-height:78px; flex-shrink:0; padding:16px 28px;
  border-bottom:1px solid var(--line); background:#fff; }
.vla__avatar { display:grid; place-items:center; flex-shrink:0; width:42px; height:42px; border-radius:12px;
  background:#0d303b; color:#e6fffb; font-size:15px; font-weight:850; letter-spacing:-.07em; }
.vla__agent { flex:1; min-width:0; }
.vla__agent strong { color:#112c3a; font-size:16px; line-height:1.2; font-weight:760; display:block; }
.vla__agent span { color:#7e909c; font-size:12px; line-height:1.3; display:block; margin-top:4px; }
.vla__status-chip { white-space:nowrap; padding:6px 10px; font-size:10px; letter-spacing:.075em; font-weight:800;
  color:#526f72; border:1px solid #dce9e8; background:#f2f8f8; border-radius:999px; }
.vla__reset { flex-shrink:0; display:grid; place-items:center; width:36px; height:36px; border-radius:11px!important;
  background:#fff!important; border:1px solid #dce6ed!important; color:#557381!important;
  line-height:1!important; font-size:23px!important; padding:0!important; cursor:pointer; }
.vla__reset:hover { background:#f2f7f8!important; }
.vla__messages { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; scroll-behavior:smooth;
  padding:32px max(26px,calc((100% - 740px)/2)) 30px; background:#fafcfd; }
.vla__welcome { margin:0 auto 38px; text-align:center; max-width:520px; }
.vla__welcome-mark { display:grid; place-items:center; margin:0 auto 14px; background:#e2f5f0; color:#096c69;
  border-radius:17px; width:52px; height:52px; font-size:25px; }
.vla__welcome h2 { color:#142b37!important; font-weight:780!important; letter-spacing:-.04em;
  font-size:clamp(23px,2.5vw,30px)!important; line-height:1.2!important; margin:0 0 8px!important; }
.vla__welcome p { margin:0!important; color:#637b88!important; font-size:14px!important; line-height:1.65!important; }
.vla__message { display:flex; margin:0 0 18px; }
.vla__message--bot { justify-content:flex-start; }
.vla__message--user { justify-content:flex-end; }
.vla__bubble { color:#243f4d; background:#eaf1f4; max-width:85%; border-radius:15px 15px 15px 4px;
  padding:13px 17px; font-size:14.5px; line-height:1.65; word-break:break-word; white-space:pre-wrap; }
.vla__message--user .vla__bubble { color:white; background:#0b5661; border-radius:15px 15px 4px 15px; }
.vla__message--typing .vla__bubble { color:#567685; font-style:italic; background:#eef4f6; }
.vla__chat-bottom { flex-shrink:0; padding:14px max(22px,calc((100% - 740px)/2)) 13px;
  border-top:1px solid var(--line); background:#fff; }
.vla__suggestions { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:13px; }
.vla__suggestions[hidden], .vla__welcome[hidden] { display:none!important; }
.vla__suggestions button { border-radius:999px!important; padding:8px 12px!important; font-weight:660!important;
  font-size:12px!important; background:#f2f7f8!important; border:1px solid #dae9e9!important;
  color:#345e6a!important; line-height:1.2!important; cursor:pointer; }
.vla__suggestions button:hover { background:#e5f3f1!important; color:#0b5759!important; }
.vla__form { display:flex; align-items:flex-end; gap:9px; padding:7px; border-radius:15px;
  border:1px solid #cbdde2; background:#fcfefe; box-shadow:0 2px 7px rgba(0,0,0,.02); }
.vla__form:focus-within { border-color:#45b4a5; box-shadow:0 0 0 3px rgba(50,167,148,.12); }
.vla__form textarea { display:block; flex:1; width:100%; min-width:0; max-height:125px; min-height:40px;
  padding:10px 12px!important; background:transparent!important; border:0!important; box-shadow:none!important; outline:0!important;
  color:#193847!important; font:inherit!important; font-size:14px!important; line-height:1.5!important; resize:none; }
.vla__form textarea::placeholder { color:#8c9fa9; }
.vla__send { flex-shrink:0; border:0!important; background:#0a7476!important; color:white!important;
  width:42px; height:42px; border-radius:12px!important; display:grid; place-items:center; font-size:17px!important;
  cursor:pointer; line-height:1!important; padding:0!important; transform:none!important; }
.vla__send:hover { background:#095e63!important; }
.vla__send:disabled,.vla__form textarea:disabled { opacity:.55; cursor:wait; }
.vla__disclaimer { margin:10px 0 0!important; text-align:center; color:#8798a1!important;
  font-size:10.5px!important; line-height:1.4!important; }
.vla__sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important;
  overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.vla button:focus-visible,.vla textarea:focus-visible { outline:3px solid #42b8a9!important; outline-offset:2px; }
@media (max-width:700px) {
  .vla { width:calc(100vw - 18px); border-radius:15px; height:calc(100dvh - 72px); min-height:430px; margin:9px 0 16px; }
  .vla__panel-top { min-height:68px; padding:12px 16px; gap:9px; }
  .vla__agent strong { font-size:15px; }
  .vla__agent span { font-size:10.5px; }
  .vla__status-chip { font-size:9px; padding:5px 7px; }
  .vla__messages { padding:24px 16px; }
  .vla__chat-bottom { padding:11px 13px 12px; }
  .vla__bubble { max-width:93%; font-size:13.5px; }
  .vla__welcome { margin-bottom:25px; }
  .vla__welcome p { font-size:12.5px!important; }
}
@media (max-width:400px) { .vla__agent span { max-width:200px; } .vla__status-chip { display:none; } }
@media (prefers-reduced-motion:reduce) { .vla__messages { scroll-behavior:auto; } .vla * { transition:none!important; } }