/* ============ base ============ */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:#1b2130;-webkit-font-smoothing:antialiased;
}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font:inherit}
img,svg{display:block}
:focus-visible{outline:2px solid #002f6d;outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ============ chat primitives ============ */
.thread{
  flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;
  padding:18px 16px;scroll-behavior:smooth;min-height:110px;
}
.dock{overflow-y:auto}
.msg{
  max-width:82%;padding:10px 14px;line-height:1.45;font-size:15px;
  border-radius:16px;animation:pop .25s ease both;overflow-wrap:break-word;
}
.msg.bot{align-self:flex-start;border-bottom-left-radius:6px}
.msg.user{align-self:flex-end;border-bottom-right-radius:6px}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.typing{display:inline-flex;gap:5px;align-items:center;padding:14px 16px}
.typing i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.4;animation:blink 1.1s infinite}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:.9;transform:translateY(-3px)}}

.qlabel{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:9px 15px;border-radius:999px;font-size:14.5px;font-weight:500;
  transition:transform .12s,background .15s,color .15s,border-color .15s;
}
.chip:hover{transform:translateY(-1px)}
.chip:active{transform:translateY(0)}

.rehead{display:flex;align-items:center;gap:12px}
.dot{width:8px;height:8px;border-radius:50%;background:#2fbf71;position:relative;flex:none}
.dot::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  border:2px solid #2fbf71;opacity:.5;animation:pulse 1.8s infinite;
}
@keyframes pulse{from{transform:scale(.6);opacity:.6}to{transform:scale(1.5);opacity:0}}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.01em}
.logo img{height:22px;width:auto;display:block}
.v1-ava{width:42px;height:42px;border-radius:50%;overflow:hidden;flex:none;background:#e5eaf0}
.v1-ava img{width:100%;height:100%;object-fit:cover;display:block}

/* ============ widget ============ */
.v1{--accent:#002f6d;--accent-2:#00245a;--ink:#1c2330;--sub:#6a7180;--bot-bg:#f1f3f8;--card:#ffffff}
.v1-stage{
  min-height:100vh;min-height:100dvh;
  display:grid;place-items:center;padding:28px 14px;
  background:#eaf1fb;
  background-image:radial-gradient(at 20% 15%,#f2f7fe 0,transparent 55%),
                   radial-gradient(at 85% 80%,#cfe0f5 0,transparent 55%);
}
.v1-card{
  width:min(420px,100%);
  height:min(690px,calc(100vh - 56px));height:min(690px,calc(100dvh - 56px));
  min-height:500px;display:flex;flex-direction:column;overflow:hidden;
  background:var(--card);border-radius:22px;
  box-shadow:0 30px 70px rgba(28,35,48,.16),0 4px 14px rgba(28,35,48,.06);
}
.v1-top{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 0}
.v1 .logo{color:var(--ink);font-size:14px}
.v1-head{padding:11px 16px 13px;border-bottom:1px solid #edf0f5}
.v1-name{font-size:15px;font-weight:700;color:var(--ink)}
.v1-status{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--sub);margin-top:2px}
.v1 .msg.bot{background:var(--bot-bg);color:var(--ink)}
.v1 .msg.user{background:var(--accent);color:#fff}
.v1 .typing{color:#8a92a3;background:var(--bot-bg);border-radius:16px;border-bottom-left-radius:6px;align-self:flex-start}
.v1 .dock{padding:13px 16px 15px;border-top:1px solid #edf0f5;background:#fbfcfe}
.v1 .qlabel{color:#98a0b0}
.v1 .chip{background:#fff;border:1.5px solid var(--accent);color:var(--accent)}
.v1 .chip:hover{background:var(--accent);color:#fff}

@media (max-width:520px){
  .msg{max-width:88%}
  .v1-stage{padding:14px 10px}
  .v1-card{height:calc(100vh - 28px);height:calc(100dvh - 28px);border-radius:18px}
}

/* form placement under chat */
#custom-regbox{
  padding: 24px 14px 48px;
  background:#eaf1fb;
  background-image:radial-gradient(at 20% 15%,#f2f7fe 0,transparent 55%),
                   radial-gradient(at 85% 80%,#cfe0f5 0,transparent 55%);
}