/* ============================================================
   CG Product Advisor — widget styles (clean, professional)
   White page, minimal, no character. Brand accent in :root.
   ============================================================ */
.cg-launch,.cg-panel{
  --accent:#0d7a63;        /* primary brand green */
  --accent-2:#12a184;      /* lighter accent */
  --accent-ink:#0a5f4d;
  --ink:#0f172a;
  --mut:#64748b;
  --faint:#94a3b8;
  --line:#e6e9ee;
  --bubble:#f4f6f8;
  --bad:#dc2626;
}
/* Scoped to the widget only — must never restyle the host site. */
.cg-launch,.cg-launch *,.cg-panel,.cg-panel *{box-sizing:border-box}
.cg-panel{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.4;
}

/* ---------- launcher ---------- */
.cg-launch{
  position:fixed;bottom:24px;right:24px;width:58px;height:58px;border-radius:50%;
  border:none;cursor:pointer;z-index:60;padding:0;
  background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(13,122,99,.34), 0 2px 6px rgba(15,23,42,.12);
  opacity:0;transform:translateY(12px);
  animation:cgLaunchIn .5s ease .3s forwards;
  transition:background .2s, transform .15s;
}
.cg-launch:hover{background:var(--accent-ink)}
.cg-launch:active{transform:scale(.95)}
@keyframes cgLaunchIn{to{opacity:1;transform:none}}
.cg-launch .cg-ic-close{display:none}
.cg-launch.open .cg-ic-open{display:none}
.cg-launch.open .cg-ic-close{display:block}

/* ---------- panel ---------- */
.cg-panel{
  position:fixed;bottom:94px;right:24px;width:384px;height:588px;
  max-height:calc(100vh - 118px);max-width:calc(100vw - 32px);
  background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;z-index:61;
  box-shadow:0 20px 60px rgba(15,23,42,.18), 0 2px 10px rgba(15,23,42,.06);
  opacity:0;transform:translateY(14px) scale(.98);transform-origin:bottom right;
  pointer-events:none;transition:opacity .24s ease, transform .28s cubic-bezier(.2,.9,.3,1);
}
.cg-panel.open{opacity:1;transform:none;pointer-events:auto}

/* header */
.cg-head{
  display:flex;align-items:center;gap:11px;padding:14px 14px 14px 16px;
  background:var(--accent);color:#fff;flex:none;
}
.cg-mark{flex:none;width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center}
.cg-hd-t{font-size:15px;font-weight:700;line-height:1.15}
.cg-hd-s{font-size:11.5px;opacity:.9;display:flex;align-items:center;gap:6px;margin-top:2px}
.cg-on{width:6px;height:6px;border-radius:50%;background:#5ef0c0;box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.cg-hbtn{border:none;background:rgba(255,255,255,.14);color:#fff;width:29px;height:29px;border-radius:7px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s}
.cg-hbtn:hover{background:rgba(255,255,255,.26)}
.cg-hbtn:first-of-type{margin-left:auto}
.cg-hbtn + .cg-hbtn{margin-left:7px}

/* body */
.cg-body{
  flex:1;padding:18px 15px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;background:#fff;
  scrollbar-width:thin;scrollbar-color:#d5dbe2 transparent;
}
.cg-body::-webkit-scrollbar{width:6px}
.cg-body::-webkit-scrollbar-thumb{background:#d5dbe2;border-radius:3px}

.cg-m{font-size:13.6px;line-height:1.5;padding:10px 13px;max-width:85%;animation:cgPop .26s ease;word-wrap:break-word}
.cg-m.bot{background:var(--bubble);color:var(--ink);border-radius:4px 13px 13px 13px;align-self:flex-start}
.cg-m.user{background:var(--accent);color:#fff;border-radius:13px 4px 13px 13px;align-self:flex-end}
@keyframes cgPop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.cg-typing{display:flex;gap:4px;align-items:center;background:var(--bubble);border-radius:4px 13px 13px 13px;padding:12px 14px;align-self:flex-start;animation:cgPop .2s ease}
.cg-typing i{width:6px;height:6px;border-radius:50%;background:#b7c1cc;animation:cgBlink 1.1s infinite}
.cg-typing i:nth-child(2){animation-delay:.18s}
.cg-typing i:nth-child(3){animation-delay:.36s}
@keyframes cgBlink{0%,60%,100%{opacity:.35}30%{opacity:1}}

/* quick replies */
.cg-chips{display:flex;flex-wrap:wrap;gap:7px;max-width:96%;animation:cgPop .26s ease}
.cg-chip{
  border:1px solid var(--line);color:var(--accent-ink);background:#fff;border-radius:999px;
  padding:8px 13px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:.15s;
}
.cg-chip:hover{border-color:var(--accent);background:#f0faf6}

/* recommendation card */
.cg-reco{background:#fff;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;padding:13px 14px;max-width:94%;align-self:flex-start;animation:cgPop .3s ease;box-shadow:0 4px 14px rgba(15,23,42,.05)}
.cg-reco .lbl{font-size:10px;font-weight:800;letter-spacing:1.1px;color:var(--accent);text-transform:uppercase}
.cg-reco .name{font-size:15px;font-weight:750;margin:5px 0 3px}
.cg-reco .grade{display:inline-block;background:#eaf6f1;color:var(--accent-ink);border-radius:999px;padding:3px 10px;font-size:10.5px;font-weight:700;margin-bottom:8px}
.cg-reco .why{font-size:12.5px;color:var(--mut);line-height:1.5;margin:0 0 8px}
.cg-reco .alt{font-size:11.6px;color:var(--mut);border-top:1px dashed var(--line);padding-top:8px}
.cg-reco .alt b{color:var(--ink)}

/* lead form */
.cg-lead{display:flex;flex-direction:column;gap:7px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;max-width:94%;align-self:flex-start;animation:cgPop .3s ease;box-shadow:0 4px 14px rgba(15,23,42,.05)}
.cg-lf{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:9px;padding:6px 11px}
.cg-lf small{font-size:9.5px;color:var(--faint);letter-spacing:.5px;text-transform:uppercase;font-weight:700}
.cg-lf input{border:none;outline:none;font-size:13px;font-family:inherit;color:var(--ink);padding:2px 0;background:none}
.cg-lf.bad{border-color:var(--bad)}
.cg-lead.done{opacity:.55;pointer-events:none}

/* buttons inside cards */
.cg-btns{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.cg-b{border-radius:999px;text-align:center;font-size:12.6px;font-weight:700;padding:10px;cursor:pointer;border:none;font-family:inherit}
.cg-b.p{background:var(--accent);color:#fff}
.cg-b.p:hover{background:var(--accent-ink)}
.cg-b.g{border:1px solid var(--line);color:var(--accent-ink);background:#fff}
.cg-b.g:hover{border-color:var(--accent);background:#f0faf6}

.cg-note{border:1px dashed #b7d8cd;background:#f2faf7;border-radius:10px;padding:10px 13px;font-size:11.5px;line-height:1.5;color:#3a5c52;max-width:96%;align-self:center;animation:cgPop .3s ease}
.cg-note b{color:var(--accent-ink)}

/* input */
.cg-input{border-top:1px solid var(--line);background:#fff;padding:11px 12px;display:flex;gap:8px;align-items:center;flex:none}
.cg-field{flex:1;background:#f4f6f8;border:1px solid transparent;border-radius:999px;padding:11px 15px;font-size:13px;font-family:inherit;color:var(--ink);outline:none}
.cg-field:focus{border-color:var(--accent);background:#fff}
.cg-send{flex:none;width:38px;height:38px;border-radius:50%;background:var(--accent);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer}
.cg-send:hover{background:var(--accent-ink)}
.cg-foot{font-size:10px;color:var(--faint);text-align:center;padding:0 10px 9px;flex:none}

@media (max-width:480px){
  .cg-panel{right:8px;bottom:88px;width:calc(100vw - 16px);height:74vh}
  .cg-launch{right:16px;bottom:18px}
}