/* ============================================================
   ANNA — site guide chat widget (scripted v1)
   Self-contained. Reuses the site design tokens (styles.css :root)
   with hardcoded fallbacks so it renders even in isolation.
   All classes are ag- prefixed to avoid collisions.
   ============================================================ */
.ag-root{
  --ag-accent:var(--accent,#C9552E);
  --ag-accent-deep:var(--accent-deep,#A84424);
  --ag-sage:var(--sage,#5B7065);
  --ag-paper:var(--paper,#FAF7F2);
  --ag-paper2:var(--paper-2,#F3EEE5);
  --ag-card:var(--card,#FFFFFF);
  --ag-ink:var(--ink,#2B2B28);
  --ag-ink-soft:var(--ink-soft,#57544C);
  --ag-line:var(--line,#E2DBCE);
  --ag-font-d:var(--font-display,'Outfit',-apple-system,'Segoe UI',Roboto,Arial,sans-serif);
  --ag-font-b:var(--font-body,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif);
}

/* ---------- launcher ---------- */
.ag-launcher{
  position:fixed;right:20px;bottom:20px;z-index:2147483000;
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--ag-accent);color:#fff;border:none;cursor:pointer;
  font-family:var(--ag-font-d);font-weight:700;font-size:1rem;
  padding:.8rem 1.15rem .8rem .9rem;border-radius:999px;
  box-shadow:0 10px 28px rgba(43,43,40,.28);
  transition:background .15s,transform .15s;
}
.ag-launcher:hover{background:var(--ag-accent-deep)}
.ag-launcher:active{transform:scale(.97)}
.ag-launcher .ag-lb-ico{font-size:1.25rem;line-height:1}
.ag-launcher[hidden]{display:none}
/* keep clear of the sticky mobile call bar */
@media(max-width:768px){
  .ag-launcher{bottom:calc(76px + env(safe-area-inset-bottom));right:14px;padding:.7rem 1rem}
  .ag-launcher .ag-lb-text{display:none}
  .ag-launcher .ag-lb-ico{font-size:1.5rem}
}

/* ---------- panel ---------- */
.ag-panel{
  position:fixed;right:20px;bottom:20px;z-index:2147483001;
  width:380px;max-width:calc(100vw - 32px);height:600px;max-height:calc(100vh - 40px);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--ag-paper);border:1px solid var(--ag-line);border-radius:18px;
  box-shadow:0 18px 50px rgba(43,43,40,.30);
  font-family:var(--ag-font-b);font-size:15px;color:var(--ag-ink);
}
.ag-panel[hidden]{display:none}
@media(max-width:768px){
  .ag-panel{right:0;left:0;bottom:0;width:100%;max-width:100%;
    height:88vh;max-height:88vh;border-radius:18px 18px 0 0}
}
@media(prefers-reduced-motion:no-preference){
  .ag-panel{animation:ag-in .18s ease-out}
}
@keyframes ag-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- header ---------- */
.ag-head{
  display:flex;align-items:center;gap:.7rem;
  padding:.85rem 1rem;background:var(--ag-accent);color:#fff;flex:0 0 auto;
}
.ag-avatar{
  width:38px;height:38px;flex:0 0 auto;border-radius:50%;
  background:#fff;color:var(--ag-accent);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ag-font-d);font-weight:800;font-size:1.2rem;
}
.ag-head-txt{flex:1 1 auto;min-width:0;line-height:1.2}
.ag-head-txt b{font-family:var(--ag-font-d);font-size:1.02rem;display:block}
.ag-head-txt small{font-size:.72rem;opacity:.92}
.ag-close{
  flex:0 0 auto;background:rgba(255,255,255,.16);color:#fff;border:none;cursor:pointer;
  width:32px;height:32px;border-radius:8px;font-size:1.2rem;line-height:1;
}
.ag-close:hover{background:rgba(255,255,255,.28)}

/* ---------- message stream ---------- */
.ag-body{flex:1 1 auto;overflow-y:auto;padding:1rem .9rem;-webkit-overflow-scrolling:touch}
.ag-msg{max-width:88%;margin-bottom:.6rem;padding:.7rem .9rem;border-radius:14px;line-height:1.5}
.ag-msg p{margin:0 0 .5rem}
.ag-msg p:last-child{margin-bottom:0}
.ag-msg ul{margin:.3rem 0 .1rem;padding-left:1.15rem}
.ag-msg li{margin:.18rem 0}
.ag-msg a{color:var(--ag-accent);font-weight:600}
.ag-bot{background:var(--ag-card);border:1px solid var(--ag-line);border-bottom-left-radius:5px;margin-right:auto}
.ag-user{background:var(--ag-sage);color:#fff;border-bottom-right-radius:5px;margin-left:auto}
.ag-user a{color:#fff;text-decoration:underline}
.ag-disc{font-size:.74rem;color:var(--ag-ink-soft);text-align:center;margin:.2rem auto .8rem;max-width:90%}

/* plan card inside a bot bubble */
.ag-plan{border:1px solid var(--ag-line);border-radius:12px;padding:.7rem .8rem;margin:.5rem 0;background:var(--ag-paper2)}
.ag-plan.fit{border:2px solid var(--ag-sage)}
.ag-plan .ag-p-name{font-family:var(--ag-font-d);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ag-sage);font-size:.72rem}
.ag-plan .ag-p-price{font-family:var(--ag-font-d);font-weight:800;font-size:1.5rem;margin:.05rem 0}
.ag-plan .ag-p-price span{font-size:.8rem;font-weight:600;color:var(--ag-ink-soft)}
.ag-plan .ag-p-desc{font-size:.85rem;color:var(--ag-ink-soft);margin:.15rem 0 .55rem}

/* ---------- choice buttons ---------- */
.ag-choices{display:flex;flex-wrap:wrap;gap:.45rem;margin:.1rem 0 .9rem}
.ag-choice{
  font-family:var(--ag-font-d);font-weight:700;font-size:.9rem;cursor:pointer;
  background:var(--ag-card);color:var(--ag-accent);border:1.5px solid var(--ag-accent);
  border-radius:999px;padding:.5rem .9rem;transition:background .12s,color .12s;
}
.ag-choice:hover{background:var(--ag-accent);color:#fff}
.ag-choice.ag-cta{background:var(--ag-accent);color:#fff}
.ag-choice.ag-cta:hover{background:var(--ag-accent-deep);border-color:var(--ag-accent-deep)}
.ag-choice.ag-ghost{border-color:var(--ag-line);color:var(--ag-ink-soft)}
.ag-choice.ag-ghost:hover{background:var(--ag-paper2);color:var(--ag-ink)}

/* ---------- lead form ---------- */
.ag-lead{background:var(--ag-card);border:1px solid var(--ag-line);border-radius:14px;padding:.85rem .9rem;margin-bottom:.9rem}
.ag-lead label{display:block;font-family:var(--ag-font-d);font-weight:700;font-size:.8rem;margin:.5rem 0 .25rem}
.ag-lead label:first-child{margin-top:0}
.ag-lead input,.ag-lead textarea{
  width:100%;background:var(--ag-paper);border:1px solid var(--ag-line);border-radius:9px;
  color:var(--ag-ink);font-family:var(--ag-font-b);font-size:.95rem;padding:.6rem .75rem;
}
.ag-lead input:focus,.ag-lead textarea:focus{border-color:var(--ag-accent);outline:none;box-shadow:0 0 0 3px rgba(201,85,46,.15)}
.ag-lead textarea{resize:vertical;min-height:56px}
.ag-lead .ag-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ag-lead-submit{
  width:100%;margin-top:.7rem;background:var(--ag-accent);color:#fff;border:none;cursor:pointer;
  font-family:var(--ag-font-d);font-weight:700;font-size:.98rem;padding:.75rem 1rem;border-radius:10px;
}
.ag-lead-submit:hover{background:var(--ag-accent-deep)}
.ag-lead-submit:disabled{opacity:.6;cursor:default}
.ag-lead-err{color:#B03A1E;font-size:.82rem;margin-top:.5rem}

/* ---------- v2: free-text input row (LLM brain) ---------- */
.ag-inputrow{
  flex:0 0 auto;display:flex;gap:.5rem;align-items:center;
  padding:.6rem .7rem;border-top:1px solid var(--ag-line);
  background:var(--ag-paper2);
}
.ag-inputrow input{
  flex:1 1 auto;min-width:0;border:1px solid var(--ag-line);border-radius:999px;
  padding:.55rem .9rem;font-family:var(--ag-font-b);font-size:.95rem;
  color:var(--ag-ink);background:#fff;outline:none;
}
.ag-inputrow input:focus{border-color:var(--ag-accent)}
.ag-inputrow button{
  flex:0 0 auto;width:38px;height:38px;border:none;border-radius:50%;
  background:var(--ag-accent);color:#fff;font-size:1rem;cursor:pointer;
  transition:background .15s;
}
.ag-inputrow button:hover{background:var(--ag-accent-deep)}
.ag-typing span{
  display:inline-block;animation:agDots 1.2s infinite;font-weight:700;
}
.ag-typing span:nth-child(2){animation-delay:.2s}
.ag-typing span:nth-child(3){animation-delay:.4s}
@keyframes agDots{0%,60%,100%{opacity:.25}30%{opacity:1}}