/* 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; }

.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; }

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