/* Chat bubble + panel, bottom-left. Colours come from app.css tokens, with
   fallbacks so the widget still looks right on a page without them. */
.ac-launch{
  position:fixed; right:32px; bottom:calc(32px + env(safe-area-inset-bottom,0px)); z-index:130;
  width:58px; height:58px; border-radius:50%; border:0; cursor:pointer;
  background:var(--btn,#15803D);
  color:var(--btn-ink,#fff); box-shadow:0 12px 28px var(--btn-glow,rgba(21,128,61,.3));
  display:grid; place-items:center;
  transition:transform .3s var(--ease,ease), box-shadow .3s ease;
}
.ac-launch:hover{ transform:translateY(-3px) scale(1.04); }
.ac-launch:focus-visible{ outline:3px solid var(--brand,#16A34A); outline-offset:3px; }
.ac-launch svg{ width:26px; height:26px; }
.ac-launch .ac-x{ display:none; }
.ac-launch[aria-expanded="true"] .ac-x{ display:block; }
.ac-launch[aria-expanded="true"] .ac-bubble{ display:none; }
.ac-dot{
  position:absolute; top:2px; right:2px; width:13px; height:13px; border-radius:50%;
  background:var(--gold,#A16207); border:2px solid var(--bg,#fff);
}
.ac-launch[aria-expanded="true"] .ac-dot{ display:none; }

.ac-panel{
  position:fixed; right:32px; bottom:calc(104px + env(safe-area-inset-bottom,0px)); z-index:130;
  width:376px; max-width:calc(100vw - 40px); height:min(566px, calc(100vh - 160px));
  display:none; flex-direction:column; overflow:hidden;
  background:var(--surface,#fff); border:1px solid var(--line,#E1E8E3); border-radius:22px;
  box-shadow:0 30px 70px var(--shadow-lg,rgba(16,40,24,.22));
}
/* One animation that ends fully opaque — no second class to time, so the panel
   can never be left half-visible. */
.ac-panel.open{ display:flex; animation:ac-in .26s var(--ease,ease) both; }
@keyframes ac-in{ from{ opacity:0; transform:translateY(12px) scale(.98); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .ac-panel.open{ animation:none; } }

.ac-head{
  display:flex; align-items:center; gap:10px; padding:15px 16px;
  background:var(--btn,#15803D); color:var(--btn-ink,#fff);
}
.ac-head .ac-name{ font-weight:800; font-size:15px; }
.ac-head .ac-restart{ margin-left:auto; }
.ac-head .ac-restart, .ac-head .ac-close{
  background:rgba(255,255,255,.16); border:0; color:#fff; cursor:pointer;
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
}
.ac-head .ac-restart{ margin-right:6px; }
.ac-head .ac-restart:hover, .ac-head .ac-close:hover{ background:rgba(255,255,255,.28); }

.ac-log{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px;
  background:var(--bg-alt,#F5F8F6); }
.ac-msg{ max-width:84%; padding:10px 14px; border-radius:16px; font-size:14px; line-height:1.55;
  white-space:pre-wrap; overflow-wrap:anywhere; }
.ac-msg.bot{ background:var(--surface,#fff); border:1px solid var(--line,#E1E8E3); border-bottom-left-radius:6px; align-self:flex-start; }
.ac-msg.me{ background:var(--btn,#15803D); color:#fff; border-bottom-right-radius:6px; align-self:flex-end; }
.ac-msg.err{ background:transparent; border:1px dashed var(--line-strong,#C9D5CD); color:var(--ink-faint,#66776D); font-size:13px; align-self:center; text-align:center; }

.ac-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.ac-chips button{
  background:var(--surface,#fff); border:1.5px solid var(--brand,#16A34A); color:var(--brand-text,#15803D);
  border-radius:999px; padding:7px 13px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit;
}
.ac-chips button:hover{ background:var(--brand-soft,#E4F5EA); }

.ac-cards{ display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; }
.ac-card{ flex:0 0 152px; background:var(--surface,#fff); border:1px solid var(--line,#E1E8E3);
  border-radius:14px; overflow:hidden; display:flex; flex-direction:column; }
.ac-card img{ width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--surface-2,#F2F6F3); }
.ac-card .ac-c-body{ padding:10px 12px; display:grid; gap:3px; }
.ac-card .ac-c-title{ font-weight:700; font-size:13px; }
.ac-card .ac-c-sub{ font-size:12px; color:var(--ink-faint,#66776D); }
.ac-card .ac-c-btn{ margin:0 12px 12px; background:var(--brand-soft,#E4F5EA); color:var(--brand-text,#15803D);
  border:0; border-radius:10px; padding:8px; font-weight:700; font-size:12.5px; cursor:pointer; font-family:inherit; }

.ac-typing{ align-self:flex-start; display:flex; gap:4px; padding:12px 14px;
  background:var(--surface,#fff); border:1px solid var(--line,#E1E8E3); border-radius:16px; border-bottom-left-radius:6px; }
.ac-typing i{ width:6px; height:6px; border-radius:50%; background:var(--ink-faint,#66776D); animation:ac-blink 1.3s infinite; }
.ac-typing i:nth-child(2){ animation-delay:.2s; } .ac-typing i:nth-child(3){ animation-delay:.4s; }
@keyframes ac-blink{ 0%,60%,100%{opacity:.25; transform:translateY(0);} 30%{opacity:1; transform:translateY(-3px);} }

.ac-foot{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--line,#E1E8E3); background:var(--surface,#fff); }
.ac-foot input{
  flex:1; min-width:0; border:1px solid var(--line-strong,#C9D5CD); background:var(--bg,#fff);
  color:var(--ink,#0F1A14); border-radius:999px; padding:10px 15px; font-size:14px; font-family:inherit;
}
.ac-foot input:focus{ outline:2px solid var(--brand,#16A34A); outline-offset:-1px; }
.ac-foot button{
  width:42px; height:42px; flex:0 0 42px; border-radius:50%; border:0; cursor:pointer;
  background:var(--btn,#15803D); color:#fff; display:grid; place-items:center;
}
.ac-foot button:disabled{ opacity:.5; cursor:default; }

@media (max-width:520px){
  .ac-panel{ left:16px; right:16px; width:auto; height:min(70vh, calc(100vh - 140px)); bottom:calc(92px + env(safe-area-inset-bottom,0px)); }
  .ac-launch{ right:20px; bottom:calc(20px + env(safe-area-inset-bottom,0px)); }
}
@media (prefers-reduced-motion: reduce){
  .ac-launch, .ac-panel{ transition:none; }
  .ac-typing i{ animation:none; }
}