.basil{ position:fixed; right:24px; bottom:24px; z-index:80; font-family:'Geist',sans-serif; }

/* Avatar */
.basil__avatar{ position:relative; width:30px; height:30px; border-radius:50%; background:var(--green); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.basil__avatar--sm{ width:30px; height:30px; }
.basil__avatar--lg{ width:72px; height:72px; margin:0 auto; }
.basil__avatar--lg svg{ width:36px; height:36px; }
.basil__avatar--online::after{ content:''; position:absolute; bottom:0; right:0; width:28%; height:28%; min-width:8px; min-height:8px; border-radius:50%; background:var(--leaf); border:2px solid var(--white); }

/* ─── Closed: FAB + nudge ─────────────────────────────────── */
.basil__fab{ position:relative; width:64px; height:64px; border-radius:50%; background:var(--ink); border:none; display:flex; align-items:center; justify-content:center; box-shadow:0 18px 32px -10px rgba(15,26,20,.4); margin-left:auto; }
.basil__fab-dot{ position:absolute; top:0; right:0; width:18px; height:18px; border-radius:50%; background:var(--lime); border:2px solid var(--white); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:600; color:var(--green-dark); }
.basil__fab-online{ position:absolute; bottom:-2px; left:-2px; width:14px; height:14px; border-radius:50%; background:var(--leaf); border:2px solid var(--white); }
.basil__nudge{ position:absolute; right:80px; bottom:14px; width:220px; background:var(--white); border:1px solid var(--line-2); border-radius:14px 14px 4px 14px; padding:12px 16px; box-shadow:0 12px 24px -10px rgba(15,26,20,.18); cursor:pointer; line-height:1.4; }
.basil__nudge-chip{ display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--green-dark); background:var(--mint-2); padding:2px 8px; border-radius:999px; margin-bottom:6px; }
.basil__nudge-dot{ width:5px; height:5px; border-radius:999px; background:var(--green); }
.basil__nudge-title{ font-weight:500; font-size:13px; }
.basil__nudge-sub{ font-size:12px; color:var(--ink-soft); margin-top:2px; }

/* ─── Panel ───────────────────────────────────────────────── */
.basil__panel{ width:420px; height:600px; max-height:calc(100vh - 48px); background:var(--white); border:1px solid var(--line); border-radius:24px; overflow:hidden; display:none; flex-direction:column; box-shadow:0 24px 60px -20px rgba(15,26,20,.25); }
.basil[data-state="open"] .basil__panel{ display:flex; }
.basil[data-state="open"] .basil__fab, .basil[data-state="open"] .basil__nudge{ display:none; }

.basil__header{ padding:14px 16px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--line); }
.basil__header .basil__avatar{ width:38px; height:38px; }
.basil__header .basil__avatar svg{ width:19px; height:19px; }
.basil__header-text{ flex:1; min-width:0; }
.basil__header-title{ display:flex; align-items:center; gap:6px; }
.basil__header-title .h-sans{ font-weight:600; font-size:16px; }
.basil__badge{ padding:2px 7px; border-radius:999px; background:var(--mint-2); color:var(--green-dark); font-size:10px; font-weight:600; letter-spacing:.04em; }
.basil__header-sub{ font-size:11.5px; color:var(--ink-soft); margin-top:2px; }
.basil__icon-btn{ width:32px; height:32px; border-radius:999px; border:none; background:var(--paper); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:18px; line-height:1; }

.basil__body{ flex:1; overflow:auto; padding:24px 20px; }

/* Welcome */
.basil__welcome-hero{ text-align:center; }
.basil__welcome-title{ font-size:28px; font-weight:600; margin-top:18px; letter-spacing:-.03em; }
.basil__welcome-title .h-serif{ color:var(--green); font-size:32px; }
.basil__welcome-sub{ font-size:13.5px; color:var(--ink-soft); margin-top:8px; line-height:1.55; padding:0 14px; }
.basil__try-label{ font-size:11px; color:var(--ink-soft); letter-spacing:.14em; text-transform:uppercase; margin:32px 0 12px; }
.basil__prompts{ display:flex; flex-direction:column; gap:10px; }
.basil__prompt{ padding:12px 14px; border-radius:14px; border:none; background:var(--paper); display:flex; align-items:center; gap:10px; text-align:left; width:100%; }
.basil__prompt:hover{ background:var(--mint-2); }
.basil__prompt-ico{ width:28px; height:28px; border-radius:999px; background:var(--white); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.basil__prompt-q{ font-size:13.5px; color:var(--ink-2); flex:1; }
.basil__privacy{ margin-top:24px; padding:12px 14px; border-radius:12px; background:var(--mint-2); display:flex; gap:10px; align-items:flex-start; }
.basil__privacy span{ font-size:12.5px; color:var(--green-dark); line-height:1.45; }

/* Messages */
.basil__messages{ display:flex; flex-direction:column; }
.basil__row{ display:flex; gap:10px; margin-bottom:14px; }
.basil__row--user{ justify-content:flex-end; }
.basil__bubble-wrap{ max-width:82%; }
.basil__bubble{ padding:12px 16px; font-size:14px; line-height:1.55; }
.basil__bubble--bot{ background:var(--paper); color:var(--ink); border-radius:4px 18px 18px 18px; }
.basil__bubble--user{ background:var(--ink); color:var(--white); border-radius:18px 4px 18px 18px; }
.basil__time{ font-size:11px; color:var(--ink-soft); margin-top:4px; margin-left:4px; }
.basil__time--right{ text-align:right; margin-right:4px; }

.basil__products{ margin-top:10px; }
.basil__product{ display:flex; gap:12px; padding:10px; background:var(--white); border-radius:14px; margin-bottom:8px; border:1px solid var(--line); }
.basil__product-img{ width:72px; height:72px; border-radius:12px; overflow:hidden; flex-shrink:0; background:var(--mint-2); }
.basil__product-img img{ width:100%; height:100%; object-fit:cover; }
.basil__product-body{ flex:1; min-width:0; }
.basil__product-top{ display:flex; align-items:baseline; gap:8px; }
.basil__product-top .h-sans{ font-size:15px; font-weight:600; }
.basil__product-desc{ font-size:12px; color:var(--ink-soft); margin-top:4px; line-height:1.4; }
.basil__product-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.basil__product-foot .vd-price{ font-size:15px; font-weight:600; }
.basil__add{ padding:5px 12px; border-radius:999px; border:none; background:var(--ink); color:var(--white); font-size:12px; font-weight:500; }
.basil__added{ display:flex; align-items:center; gap:10px; }
.basil__added span{ font-size:13px; color:var(--green-dark); font-weight:500; }

.basil__dots{ display:flex; gap:5px; align-items:center; }
.basil__dots span{ width:6px; height:6px; border-radius:999px; background:var(--ink-soft); animation:basil-blink 1.2s infinite; }
.basil__dots span:nth-child(2){ animation-delay:.2s; }
.basil__dots span:nth-child(3){ animation-delay:.4s; }
@keyframes basil-blink{ 0%,60%,100%{ opacity:.25; } 30%{ opacity:.9; } }

/* Input */
.basil__input-wrap{ padding:14px 16px; border-top:1px solid var(--line); }
.basil__input{ display:flex; align-items:center; gap:8px; padding:6px; border:1px solid var(--line-2); border-radius:999px; }
.basil__attach{ width:34px; height:34px; border:none; border-radius:999px; background:transparent; color:var(--ink-soft); display:flex; align-items:center; justify-content:center; }
.basil__input input{ flex:1; border:none; outline:none; background:transparent; font-size:14px; padding:6px 0; min-width:0; }
.basil__send{ width:36px; height:36px; border-radius:50%; border:none; background:var(--ink); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.basil__foot{ display:flex; justify-content:space-between; align-items:center; margin-top:8px; font-size:11px; color:var(--ink-soft); padding:0 4px; }
.basil__foot-left{ display:inline-flex; align-items:center; gap:6px; }
.basil__foot-dot{ width:4px; height:4px; border-radius:999px; background:var(--green); }

@media (max-width:640px){
  .basil{ right:16px; bottom:16px; }
  .basil__panel{ position:fixed; inset:0; width:100%; height:100%; max-height:100vh; border-radius:0; }
  .basil__nudge{ display:none; }
}