/* ==========================================================================
   CAMRALS Assistant: guided chat widget
   Uses the site's CSS variables, with fallbacks so it also works standalone.
   ========================================================================== */
.cb{
  --cb-red:var(--red,#E0031E);
  --cb-ink:var(--ink,#08090A);
  --cb-panel:#0C0E11;
  --cb-bubble:#191D22;
  --cb-line:rgba(255,255,255,.10);
  --cb-txt:#E8EBEE;
  --cb-mut:#9AA1A9;
  --cb-ease:cubic-bezier(.22,.8,.28,1);
  font-family:var(--body,"Inter",system-ui,sans-serif);
}

/* ---------- Launcher ---------- */
.cb-launch{
  position:fixed;right:22px;bottom:22px;z-index:97;
  display:flex;align-items:center;gap:11px;
  background:var(--cb-red);color:#fff;border:0;cursor:pointer;
  padding:14px 20px 14px 17px;
  box-shadow:0 14px 40px rgba(224,3,30,.38),0 4px 12px rgba(0,0,0,.5);
  font-family:var(--display,"Barlow Condensed",sans-serif);
  font-weight:700;text-transform:uppercase;letter-spacing:.13em;font-size:.84rem;
  transition:transform .3s var(--cb-ease),box-shadow .3s var(--cb-ease);
}
.cb-launch:hover{transform:translateY(-3px);box-shadow:0 20px 48px rgba(224,3,30,.5)}
.cb-launch svg{width:22px;height:22px;flex:none}
.cb-launch .cb-x{display:none}
.cb-launch.open .cb-chat,.cb-launch.open .cb-launch-txt{display:none}
.cb-launch.open .cb-x{display:block}
.cb-launch.open{padding:16px;border-radius:50%}
.cb-dot{
  position:absolute;top:-4px;right:-4px;width:14px;height:14px;border-radius:50%;
  background:#fff;border:3px solid var(--cb-red);
}
.cb-launch.open .cb-dot,.cb-launch.seen .cb-dot{display:none}

/* teaser bubble */
.cb-teaser{
  position:fixed;right:22px;bottom:86px;z-index:97;max-width:250px;
  background:var(--cb-panel);border:1px solid var(--cb-line);border-left:3px solid var(--cb-red);
  padding:14px 38px 14px 16px;color:var(--cb-txt);font-size:.86rem;line-height:1.5;
  box-shadow:0 18px 44px rgba(0,0,0,.6);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .4s var(--cb-ease),transform .4s var(--cb-ease);
}
.cb-teaser.show{opacity:1;transform:none;pointer-events:auto}
.cb-teaser button{
  position:absolute;top:6px;right:6px;width:26px;height:26px;
  background:none;border:0;color:var(--cb-mut);cursor:pointer;font-size:16px;line-height:1;
}
.cb-teaser button:hover{color:#fff}

/* ---------- Panel ---------- */
.cb-panel{
  position:fixed;right:22px;bottom:92px;z-index:98;
  width:min(384px,calc(100vw - 32px));
  height:min(624px,calc(100vh - 132px));
  background:var(--cb-panel);border:1px solid var(--cb-line);
  box-shadow:0 34px 80px rgba(0,0,0,.72);
  display:flex;flex-direction:column;overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(18px) scale(.98);
  transition:opacity .32s var(--cb-ease),transform .32s var(--cb-ease),visibility .32s;
}
.cb-panel.open{opacity:1;visibility:visible;transform:none}

.cb-head{
  background:linear-gradient(120deg,#111418,#0A0C0E);
  border-bottom:1px solid var(--cb-line);padding:16px 18px;
  display:flex;align-items:center;gap:12px;flex:none;position:relative;
}
.cb-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--cb-red)}
.cb-head .cb-mark{width:36px;height:29px;flex:none}
.cb-head h2{
  margin:0;font-family:var(--display,"Barlow Condensed",sans-serif);
  font-weight:800;text-transform:uppercase;font-size:1.12rem;letter-spacing:.03em;
  line-height:1;color:#fff;
}
.cb-head p{margin:4px 0 0;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cb-mut)}
.cb-head .cb-live{display:inline-block;width:7px;height:7px;border-radius:50%;background:#4ED07A;margin-right:6px}
.cb-head .cb-close{
  margin-left:auto;width:34px;height:34px;background:none;border:0;color:var(--cb-mut);
  cursor:pointer;display:grid;place-items:center;flex:none;
}
.cb-head .cb-close:hover{color:var(--cb-red)}
.cb-head .cb-close svg{width:18px;height:18px}

/* ---------- Messages ---------- */
.cb-log{
  flex:1;overflow-y:auto;padding:20px 18px 8px;display:flex;flex-direction:column;gap:12px;
  scrollbar-width:thin;scrollbar-color:#2A2F35 transparent;
}
.cb-log::-webkit-scrollbar{width:6px}
.cb-log::-webkit-scrollbar-thumb{background:#2A2F35}
.cb-msg{max-width:88%;padding:12px 15px;font-size:.885rem;line-height:1.6;animation:cb-in .32s var(--cb-ease)}
@keyframes cb-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cb-bot{background:var(--cb-bubble);color:var(--cb-txt);align-self:flex-start;border-left:2px solid var(--cb-red)}
.cb-user{background:var(--cb-red);color:#fff;align-self:flex-end;font-weight:500}
.cb-msg strong{color:#fff}
.cb-msg a{color:#FF6B70;text-decoration:underline}
.cb-note{font-size:.75rem;color:var(--cb-mut);line-height:1.55;align-self:flex-start;max-width:92%;padding:0 2px}

.cb-typing{display:flex;gap:5px;align-self:flex-start;padding:14px 16px;background:var(--cb-bubble);border-left:2px solid var(--cb-red)}
.cb-typing i{width:7px;height:7px;border-radius:50%;background:var(--cb-mut);animation:cb-bounce 1.3s infinite}
.cb-typing i:nth-child(2){animation-delay:.18s}
.cb-typing i:nth-child(3){animation-delay:.36s}
@keyframes cb-bounce{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

/* ---------- Quick replies ---------- */
.cb-opts{display:flex;flex-wrap:wrap;gap:7px;padding:4px 18px 14px}
.cb-opts button{
  background:transparent;border:1px solid rgba(224,3,30,.45);color:#F0F2F4;cursor:pointer;
  padding:9px 14px;font-family:var(--display,"Barlow Condensed",sans-serif);
  font-weight:600;text-transform:uppercase;letter-spacing:.09em;font-size:.76rem;
  transition:.25s var(--cb-ease);
}
.cb-opts button:hover{background:var(--cb-red);border-color:var(--cb-red);color:#fff;transform:translateY(-2px)}
.cb-opts a.cb-call{
  background:var(--cb-red);border-color:var(--cb-red);color:#fff;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;padding:10px 15px;
  font-family:var(--display,"Barlow Condensed",sans-serif);
  font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;
}
.cb-opts a.cb-call svg{width:14px;height:14px}
.cb-opts a.cb-call:hover{background:#fff;color:var(--cb-ink)}

/* ---------- Input row ---------- */
.cb-form{border-top:1px solid var(--cb-line);padding:12px;display:flex;gap:8px;flex:none;background:#0A0C0E}
.cb-form input{
  flex:1;background:#141821;border:1px solid var(--cb-line);color:#fff;
  padding:12px 13px;font-size:.88rem;font-family:inherit;border-radius:0;min-width:0;
}
.cb-form input:focus{outline:none;border-color:var(--cb-red);box-shadow:0 0 0 3px rgba(224,3,30,.16)}
.cb-form input::placeholder{color:#5D646C}
.cb-form button{
  background:var(--cb-red);border:0;color:#fff;cursor:pointer;width:46px;flex:none;
  display:grid;place-items:center;transition:.25s var(--cb-ease);
}
.cb-form button:hover{background:#fff;color:var(--cb-ink)}
.cb-form button svg{width:17px;height:17px}

.cb-foot{padding:0 12px 10px;font-size:.63rem;color:#6B7178;text-align:center;background:#0A0C0E;flex:none}

/* ---------- Mobile ---------- */
@media (max-width:860px){
  /* clear the sticky call bar at the bottom of the page */
  .cb-launch{bottom:76px;right:16px;padding:13px 17px 13px 14px}
  .cb-teaser{bottom:138px;right:16px}
  .cb-panel{
    right:0;left:0;bottom:0;width:100%;
    height:min(88vh,calc(100vh - 60px));
    border-left:0;border-right:0;border-bottom:0;
  }
}
@media (max-width:420px){
  .cb-launch .cb-launch-txt{display:none}
  .cb-launch{border-radius:50%;padding:16px}
}
@media (prefers-reduced-motion:reduce){
  .cb-panel,.cb-launch,.cb-teaser,.cb-msg,.cb-opts button{transition:none;animation:none}
  .cb-typing i{animation:none}
}

/* one-click link buttons: visually distinct from both the quick replies
   and the red call button, with an arrow marking that it opens a page */
.cb-opts a.cb-link{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(224,3,30,.10);border:1px solid rgba(224,3,30,.55);
  color:#fff;text-decoration:none;padding:9px 13px;
  font-family:var(--display,"Barlow Condensed",sans-serif);
  font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:.76rem;
  transition:.25s var(--cb-ease);
}
.cb-opts a.cb-link svg{width:13px;height:13px;flex:none;color:var(--cb-red);transition:.25s var(--cb-ease)}
.cb-opts a.cb-link:hover{background:var(--cb-red);border-color:var(--cb-red);transform:translateY(-2px)}
.cb-opts a.cb-link:hover svg{color:#fff;transform:translate(2px,-2px)}

/* logo-matched accents: red stays primary, blue supports */
.cb{--cb-blue:var(--blue,#01A2F0)}
.cb-head .cb-mark{height:30px;width:auto}
.cb-opts a.cb-link{
  background:rgba(1,162,240,.12);border-color:rgba(1,162,240,.55);
}
.cb-opts a.cb-link svg{color:var(--cb-blue)}
.cb-opts a.cb-link:hover{background:var(--cb-blue);border-color:var(--cb-blue)}
.cb-msg a{color:var(--cb-blue)}
.cb-form input:focus{border-color:var(--cb-blue);box-shadow:0 0 0 3px rgba(1,162,240,.18)}

/* Chat is the secondary channel, so it reads blue. The call button inside it
   stays red, which makes the phone the obvious primary action. */
.cb-launch{background:var(--blue-panel,#0176B8);
  box-shadow:0 14px 40px rgba(1,118,184,.40),0 4px 12px rgba(0,0,0,.5)}
.cb-launch:hover{box-shadow:0 20px 48px rgba(1,118,184,.52)}
.cb-dot{border-color:var(--blue-panel,#0176B8)}
.cb-teaser{border-left-color:var(--blue,#01A2F0)}
.cb-head::after{background:var(--blue,#01A2F0)}
.cb-bot{border-left-color:var(--blue,#01A2F0)}
.cb-typing{border-left-color:var(--blue,#01A2F0)}
.cb-user{background:var(--blue-panel,#0176B8)}
.cb-opts button{border-color:rgba(1,162,240,.50)}
.cb-opts button:hover{background:var(--blue-panel,#0176B8);border-color:var(--blue-panel,#0176B8)}
.cb-form input:focus{border-color:var(--blue,#01A2F0);box-shadow:0 0 0 3px rgba(1,162,240,.18)}
.cb-form button{background:var(--blue-panel,#0176B8)}
.cb-head .cb-close:hover{color:var(--blue,#01A2F0)}
/* the one thing that stays red: the call button */
.cb-opts a.cb-call{background:var(--red,#E0031E);border-color:var(--red,#E0031E)}

/* chat surfaces follow the lighter foundation */
.cb{--cb-panel:#202429;--cb-bubble:#292E34;--cb-line:rgba(255,255,255,.13);--cb-ink:#1A1D21}
.cb-head{background:linear-gradient(120deg,#262B31,#1E2227)}
.cb-form{background:#1B1F24}
.cb-form input{background:#15181C;border-color:rgba(255,255,255,.14)}
.cb-foot{background:#1B1F24;color:#8F969E}
.cb-panel{box-shadow:0 30px 66px rgba(0,0,0,.5)}
.cb-teaser{box-shadow:0 16px 38px rgba(0,0,0,.45)}
.cb-log::-webkit-scrollbar-thumb{background:#3A4048}