/* ChiroSimple AI Assistant — side panel widget */
:root{
  --cs-accent:#007d97;        /* ChiroSimple brand blue (site header/accents) */
  --cs-accent-d:#006074;      /* darker blue for hover */
  --cs-orange:#f4814e;        /* site accent orange */
  --cs-bg:#ffffff;
  --cs-panel:#eff5f7;         /* very light blue-tinted panel */
  --cs-text:#1c2b30;
  --cs-muted:#5f7278;
  --cs-user:#007d97;          /* user bubble = brand blue */
  --cs-border:#dde8eb;
}
#cs-ai-launcher{
  position:fixed; right:22px; bottom:22px; z-index:2147482999;
  display:flex; align-items:center; gap:9px;
  background:var(--cs-accent); color:#fff; border:none; cursor:pointer;
  padding:13px 18px; border-radius:999px; font:600 15px/1 system-ui,sans-serif;
  box-shadow:0 6px 22px rgba(0,0,0,.18); transition:transform .15s, background .15s;
}
#cs-ai-launcher:hover{ background:var(--cs-accent-d); transform:translateY(-1px); }
#cs-ai-launcher svg{ width:20px; height:20px; }

#cs-ai-panel{
  position:fixed; top:0; right:0; z-index:2147483000; /* above any site header/banner */
  width:400px; max-width:100vw; height:100dvh;
  background:var(--cs-bg); box-shadow:-6px 0 30px rgba(0,0,0,.15);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .28s cubic-bezier(.4,0,.2,1);
  font-family:system-ui,-apple-system,sans-serif; color:var(--cs-text);
}
#cs-ai-panel.cs-open{ transform:translateX(0); }

.cs-head{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; gap:10px;
  padding:14px 16px;
  background:var(--cs-accent);   /* brand green header bar */
  color:#fff;
}
.cs-head .cs-logo{ height:26px; width:auto; flex:1; object-fit:contain; object-position:left center; }
.cs-head .cs-logo-fallback{ font-size:16px; font-weight:700; flex:1; color:#fff; }
.cs-head .cs-spark{ color:#fff; width:22px; height:22px; flex-shrink:0; opacity:.9; }
.cs-head .cs-close{
  background:rgba(255,255,255,.18); border:none; cursor:pointer; color:#fff;
  width:34px; height:34px; border-radius:8px; flex-shrink:0;
  display:grid; place-items:center;
}
.cs-head .cs-close:hover{ background:rgba(255,255,255,.32); }

.cs-msgs{ flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:14px; }
.cs-msg{ max-width:88%; padding:11px 14px; border-radius:14px; font-size:14.5px; line-height:1.5; white-space:pre-wrap; word-wrap:break-word; }
.cs-msg.cs-u{ align-self:flex-end; background:var(--cs-user); color:#fff; border-bottom-right-radius:4px; }
.cs-msg.cs-a{ align-self:flex-start; background:var(--cs-panel); color:var(--cs-text); border-bottom-left-radius:4px; }
.cs-msg.cs-a a{ color:var(--cs-accent); }
.cs-msg ol,.cs-msg ul{ margin:8px 0 8px 20px; padding:0; }
.cs-msg li{ margin:5px 0; padding-left:2px; }
.cs-msg li::marker{ color:var(--cs-accent); font-weight:600; }
.cs-msg p{ margin:8px 0; }
.cs-msg p:first-child{ margin-top:0; }
.cs-msg p:last-child{ margin-bottom:0; }
.cs-msg strong{ font-weight:700; color:#123; }
.cs-msg em{ font-style:italic; }
.cs-msg h3,.cs-msg h4,.cs-msg h5{ margin:12px 0 4px; font-weight:700; line-height:1.3; }
.cs-msg h3{ font-size:15.5px; } .cs-msg h4{ font-size:14.5px; } .cs-msg h5{ font-size:13.5px; color:var(--cs-muted); }
.cs-msg h3:first-child,.cs-msg h4:first-child{ margin-top:0; }
.cs-msg code{ background:#e6eef0; color:#0b5563; padding:1px 5px; border-radius:5px;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; }
.cs-msg blockquote{ margin:8px 0; padding:6px 12px; border-left:3px solid var(--cs-accent);
  background:rgba(26,155,168,.06); color:var(--cs-muted); border-radius:0 6px 6px 0; }
.cs-msg a{ text-decoration:underline; }
/* highlighted support/contact links in bot replies */
.cs-msg.cs-a a.cs-link{
  color:var(--cs-accent); font-weight:600; text-decoration:none;
  border-bottom:1.5px solid rgba(0,125,151,.35); padding-bottom:1px;
}
.cs-msg.cs-a a.cs-link:hover{ border-bottom-color:var(--cs-accent); background:rgba(0,125,151,.06); border-radius:3px; }

.cs-intro{ color:var(--cs-muted); font-size:13.5px; line-height:1.5; }
.cs-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.cs-chip{ border:1px solid var(--cs-border); background:#fff; color:var(--cs-accent);
  padding:7px 11px; border-radius:999px; font-size:12.5px; cursor:pointer; }
.cs-chip:hover{ background:var(--cs-panel); }

.cs-typing{ display:inline-flex; gap:4px; padding:4px 0; }
.cs-typing i{ width:7px; height:7px; border-radius:50%; background:var(--cs-muted); opacity:.4; animation:cs-blink 1.2s infinite; }
.cs-typing i:nth-child(2){ animation-delay:.2s; } .cs-typing i:nth-child(3){ animation-delay:.4s; }
@keyframes cs-blink{ 0%,60%,100%{opacity:.25;transform:translateY(0)} 30%{opacity:1;transform:translateY(-3px)} }

.cs-foot{ border-top:1px solid var(--cs-border); padding:12px; }
.cs-inputrow{ display:flex; gap:8px; align-items:flex-end;
  border:1.5px solid var(--cs-border); border-radius:14px; padding:8px 8px 8px 12px; }
.cs-inputrow:focus-within{ border-color:var(--cs-accent); }
.cs-inputrow textarea{ flex:1; border:none; outline:none; resize:none; font:14.5px system-ui,sans-serif;
  max-height:120px; background:transparent; color:var(--cs-text); }
.cs-send{ background:var(--cs-accent); border:none; color:#fff; width:34px; height:34px; border-radius:9px; cursor:pointer; flex-shrink:0; display:grid; place-items:center; }
.cs-send:disabled{ opacity:.4; cursor:default; }
.cs-disc{ text-align:center; font-size:11px; color:var(--cs-muted); margin-top:7px; }

/* ---- pre-chat gate ---- */
.cs-gate-wrap{ padding:22px 20px; }
.cs-gate-card{ text-align:left; }
.cs-gate-title{ font-size:20px; font-weight:700; letter-spacing:-.01em; color:var(--cs-text); margin:4px 0 8px; }
.cs-gate-sub{ font-size:13.5px; line-height:1.55; color:var(--cs-muted); margin:0 0 22px; }

.cs-gate-form{ display:flex; flex-direction:column; gap:16px; }
.cs-field{ display:flex; flex-direction:column; gap:7px; }
.cs-field label{ font-size:13px; font-weight:600; color:var(--cs-text); display:flex; align-items:center; gap:8px; }
.cs-req{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--cs-accent); }
.cs-opt{ font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--cs-muted); }

.cs-field input{
  width:100%; box-sizing:border-box;
  height:48px; border:1.5px solid var(--cs-border); border-radius:10px;
  padding:0 14px; font-size:15px; color:var(--cs-text); background:#fff; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.cs-field input::placeholder{ color:#a9b4b7; }
.cs-field input:focus{ border-color:var(--cs-accent); box-shadow:0 0 0 3px rgba(0,125,151,.13); }
.cs-field input.cs-invalid{ border-color:#e5533a; }
.cs-field input.cs-invalid:focus{ box-shadow:0 0 0 3px rgba(229,83,58,.15); }

/* phone: searchable country-code picker + number */
.cs-phone{ display:flex; gap:8px; }
.cs-phone > input[type=tel]{ flex:1 1 auto; }
.cs-cc{ position:relative; flex:0 0 auto; }
.cs-cc-btn{
  display:flex; align-items:center; gap:5px; height:48px; box-sizing:border-box;
  border:1.5px solid var(--cs-border); border-radius:10px; background:#fff;
  padding:0 10px; font-size:14px; color:var(--cs-text); cursor:pointer; white-space:nowrap;
}
.cs-cc-btn:hover{ border-color:#c3cdcf; }
.cs-cc-btn .cs-cc-flag{ font-size:16px; line-height:1; }
.cs-cc-btn .cs-cc-caret{ font-size:10px; color:var(--cs-muted); }
.cs-cc[aria-expanded] .cs-cc-btn, .cs-cc-btn[aria-expanded=true]{ border-color:var(--cs-accent); }

.cs-cc-pop{
  position:absolute; top:calc(100% + 6px); left:0; z-index:20;
  width:260px; max-width:78vw; background:#fff; border:1px solid var(--cs-border);
  border-radius:12px; box-shadow:0 10px 30px rgba(16,36,43,.18); overflow:hidden;
}
.cs-cc-search{
  width:100%; box-sizing:border-box; border:none; border-bottom:1px solid var(--cs-border);
  padding:11px 13px; font-size:14px; outline:none; color:var(--cs-text);
}
.cs-cc-list{ max-height:220px; overflow-y:auto; padding:4px; }
.cs-cc-item{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  border:none; background:none; cursor:pointer; padding:9px 10px; border-radius:8px; font-size:13.5px; color:var(--cs-text);
}
.cs-cc-item:hover{ background:var(--cs-panel); }
.cs-cc-item[aria-selected=true]{ background:rgba(0,125,151,.08); font-weight:600; }
.cs-cc-item .cs-cc-flag{ font-size:16px; }
.cs-cc-item .cs-cc-name{ flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cs-cc-item .cs-cc-code{ color:var(--cs-muted); font-variant-numeric:tabular-nums; }
.cs-cc-empty{ padding:14px; text-align:center; color:var(--cs-muted); font-size:13px; }

.cs-field-err{ font-size:12px; color:#cf3d22; }
.cs-field-err:empty{ display:none; }

.cs-gate-btn{
  margin-top:4px; height:50px; width:100%;
  background:var(--cs-accent); color:#fff; border:none; cursor:pointer;
  border-radius:10px; font-size:15px; font-weight:600;
  transition:filter .15s, transform .1s;
}
.cs-gate-btn:hover{ filter:brightness(.95); }
.cs-gate-btn:active{ transform:translateY(1px); }
.cs-gate-btn:disabled{ opacity:.6; cursor:default; }
.cs-gate-fine{ text-align:center; font-size:12px; color:var(--cs-muted); margin:6px 0 0; }

@media (max-width:480px){ #cs-ai-panel{ width:100vw; } }