/* =============================================================
   widget.css — Solace chat widget
   Brand colours sampled from the logo: navy, amber, leaf green.
   ============================================================= */

.sbot{
  --navy:#1A2948; --navy-d:#0E1A30; --amber:#F9A303; --amber-d:#E07C00;
  --green:#1E9213; --ink:#1A2948; --text:#4A5568; --muted:#718096;
  --line:#E2E8F0; --wash:#F7FAFC;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:15px; line-height:1.6;
}
.sbot *{box-sizing:border-box; margin:0; padding:0;}

/* ---------------- launcher ---------------- */
.sbot__fab{
  position:fixed; right:20px; bottom:20px; z-index:99998;
  width:58px; height:58px; border:0; border-radius:50%; cursor:pointer;
  background:linear-gradient(135deg,var(--navy) 0%,#2B3F63 100%);
  color:#fff; display:grid; place-items:center;
  box-shadow:0 10px 30px -8px rgba(26,41,72,.55);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s;
}
.sbot__fab:hover{transform:scale(1.07); box-shadow:0 14px 36px -8px rgba(26,41,72,.65);}
.sbot__fab:focus-visible{outline:3px solid var(--amber); outline-offset:3px;}
.sbot__fab svg{width:26px; height:26px; transition:transform .25s;}
.sbot__fab.is-open svg{transform:rotate(-90deg) scale(.9);}
.sbot__dot{
  position:absolute; top:-2px; right:-2px; min-width:20px; height:20px; padding:0 5px;
  border-radius:10px; background:var(--amber); color:var(--navy);
  font-size:11px; font-weight:800; display:grid; place-items:center;
  border:2px solid #fff; animation:sbotPop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes sbotPop{from{transform:scale(0)}to{transform:scale(1)}}

/* ---------------- panel ---------------- */
.sbot__panel{
  position:fixed; right:20px; bottom:88px; z-index:99999;
  width:376px; max-width:calc(100vw - 32px);
  height:min(580px, calc(100vh - 130px));
  background:#fff; border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 24px 60px -12px rgba(15,23,42,.35), 0 0 0 1px rgba(15,23,42,.06);
  opacity:0; transform:translateY(14px) scale(.98);
  transition:opacity .22s ease, transform .22s cubic-bezier(.34,1.3,.64,1);
}
.sbot__panel.is-on{opacity:1; transform:none;}
/* The hidden attribute is only a UA `display:none`, which our display:flex
   overrides. Without this the closed panel still intercepts pointer events. */
.sbot__panel[hidden]{display:none !important;}

/* header */
.sbot__hd{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px; background:linear-gradient(135deg,var(--navy) 0%,#243858 100%);
  color:#fff; flex:0 0 auto;
}
.sbot__id{display:flex; align-items:center; gap:11px; min-width:0;}
.sbot__av{
  width:38px; height:38px; border-radius:50%; flex:0 0 auto;
  background:linear-gradient(135deg,var(--amber),#FBBF24);
  display:grid; place-items:center; font-size:19px; color:var(--navy);
}
.sbot__id b{display:block; font-size:15px; font-weight:700; letter-spacing:.01em;}
.sbot__id small{
  display:flex; align-items:center; gap:6px;
  font-size:11.5px; color:rgba(255,255,255,.72); margin-top:1px;
}
.sbot__live{
  width:6px; height:6px; border-radius:50%; background:#4ADE80; display:block;
  box-shadow:0 0 0 0 rgba(74,222,128,.7); animation:sbotPulse 2s infinite;
}
@keyframes sbotPulse{
  70%{box-shadow:0 0 0 6px rgba(74,222,128,0)}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}
}
.sbot__hdact{display:flex; align-items:center; gap:4px; flex:0 0 auto;}
.sbot__lang{
  min-width:36px; height:30px; padding:0 8px; border:1px solid rgba(255,255,255,.28);
  border-radius:7px; background:rgba(255,255,255,.1); color:#fff;
  font-size:12px; font-weight:700; cursor:pointer; transition:background .15s;
  font-family:inherit;
}
.sbot__lang:hover{background:rgba(255,255,255,.22);}
.sbot__x{
  width:30px; height:30px; border:0; border-radius:7px; background:transparent;
  color:#fff; cursor:pointer; display:grid; place-items:center; transition:background .15s;
}
.sbot__x:hover{background:rgba(255,255,255,.16);}
.sbot__x svg{width:17px; height:17px;}

/* log */
.sbot__log{
  flex:1; overflow-y:auto; padding:16px 14px 6px; background:var(--wash);
  overscroll-behavior:contain; scroll-behavior:smooth;
}
.sbot__log::-webkit-scrollbar{width:6px;}
.sbot__log::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:6px;}

.sbot__m{display:flex; margin-bottom:11px; animation:sbotIn .26s ease;}
@keyframes sbotIn{from{opacity:0; transform:translateY(7px)}to{opacity:1; transform:none}}
.sbot__m--user{justify-content:flex-end;}
.sbot__b{
  max-width:84%; padding:11px 14px; border-radius:14px; font-size:14.5px;
  line-height:1.62; word-wrap:break-word;
}
.sbot__m--bot .sbot__b{
  background:#fff; color:var(--text); border:1px solid var(--line);
  border-bottom-left-radius:4px; box-shadow:0 1px 3px rgba(15,23,42,.05);
}
.sbot__m--user .sbot__b{
  background:var(--navy); color:#fff; border-bottom-right-radius:4px;
}
.sbot__b strong{font-weight:700; color:var(--ink);}
.sbot__m--user .sbot__b strong{color:#fff;}

.sbot__cta{
  display:inline-flex; align-items:center; gap:6px; margin-top:11px;
  background:var(--green); color:#fff; font-size:13.5px; font-weight:700;
  padding:9px 15px; border-radius:9px; text-decoration:none; border:0;
  cursor:pointer; font-family:inherit; transition:transform .16s, background .16s;
}
.sbot__cta:hover{background:var(--navy); color:#fff; transform:translateY(-1px);}
.sbot__cta:after{content:"→"; font-weight:700;}

/* typing */
.sbot__typing{display:flex; gap:4px; padding:14px 15px;}
.sbot__typing i{
  width:7px; height:7px; border-radius:50%; background:#B6C2CF; display:block;
  animation:sbotBlink 1.3s infinite;
}
.sbot__typing i:nth-child(2){animation-delay:.18s}
.sbot__typing i:nth-child(3){animation-delay:.36s}
@keyframes sbotBlink{0%,60%,100%{opacity:.3; transform:translateY(0)} 30%{opacity:1; transform:translateY(-3px)}}

/* chips */
.sbot__chips{
  display:flex; gap:7px; padding:9px 14px; flex-wrap:wrap;
  background:var(--wash); border-top:1px solid var(--line); flex:0 0 auto;
}
.sbot__chip{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:7px 13px; font-size:12.5px; font-weight:600; color:var(--navy);
  cursor:pointer; font-family:inherit; transition:.15s; white-space:nowrap;
}
.sbot__chip:hover{border-color:var(--amber); background:#FFF9EC;}

/* input */
.sbot__form{
  display:flex; gap:8px; padding:11px 12px; background:#fff;
  border-top:1px solid var(--line); flex:0 0 auto;
}
.sbot__form input{
  flex:1; min-width:0; padding:11px 14px; border:1px solid var(--line);
  border-radius:22px; font-size:14.5px; font-family:inherit; color:var(--ink);
  outline:none; transition:border-color .15s, box-shadow .15s; background:var(--wash);
}
.sbot__form input:focus{
  border-color:var(--amber); background:#fff; box-shadow:0 0 0 3px rgba(249,163,3,.14);
}
.sbot__form button{
  width:42px; height:42px; flex:0 0 auto; border:0; border-radius:50%;
  background:var(--amber); color:var(--navy); cursor:pointer;
  display:grid; place-items:center; transition:transform .16s, background .16s;
}
.sbot__form button:hover{background:var(--amber-d); color:#fff; transform:scale(1.06);}
.sbot__form button svg{width:17px; height:17px;}

/* footer */
.sbot__ft{
  display:flex; gap:14px; justify-content:center; padding:8px 12px 11px;
  background:#fff; font-size:12px; flex:0 0 auto;
}
.sbot__ft a{color:var(--muted); text-decoration:none; font-weight:600;}
.sbot__ft a:hover{color:var(--green);}

/* ---------------- mobile ---------------- */
@media (max-width:560px){
  .sbot__panel{
    right:0; left:0; bottom:0; width:100%; max-width:100%;
    height:min(88vh, 100dvh - 40px);
    border-radius:16px 16px 0 0;
  }
  .sbot__fab{right:16px; bottom:16px; width:54px; height:54px;}
  .sbot__b{max-width:88%;}
}

@media (prefers-reduced-motion:reduce){
  .sbot *{animation:none !important; transition:none !important;}
}