/* Brio LiveChat widget */
.brio-w,.brio-fab{--brio-accent:#4F7CFF;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;box-sizing:border-box}
.brio-w *,.brio-fab *{box-sizing:border-box}

.brio-fab{position:fixed;bottom:24px;width:60px;height:60px;border-radius:50%;border:0;cursor:pointer;
  background:var(--brio-accent);color:#fff;display:grid;place-items:center;z-index:2147483000;
  box-shadow:0 12px 34px -6px rgba(0,0,0,.45);transition:transform .2s ease}
.brio-fab:hover{transform:scale(1.06)}
.brio-fab:focus-visible{outline:3px solid #fff;outline-offset:2px}
.brio-fab svg{width:26px;height:26px;pointer-events:none}
.brio-fab.pos-right{right:24px}
.brio-fab.pos-left{left:24px}
.brio-fab .brio-n{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  background:#FF5A47;color:#fff;font-size:11px;line-height:20px;text-align:center;border:2px solid #fff;display:none}
.brio-fab .brio-n.on{display:block}

.brio-w{position:fixed;bottom:96px;width:370px;max-width:calc(100vw - 32px);height:520px;max-height:calc(100vh - 130px);
  background:#0C0E13;border:1px solid #232836;border-radius:18px;overflow:hidden;z-index:2147483001;
  display:none;flex-direction:column;box-shadow:0 30px 70px -20px rgba(0,0,0,.6);color:#EDEFF5}
.brio-w.on{display:flex;animation:brio-pop .22s ease both}
.brio-w.pos-right{right:24px}
.brio-w.pos-left{left:24px}
@keyframes brio-pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

.brio-head{background:var(--brio-accent);padding:14px 14px 14px 16px;display:flex;gap:10px;align-items:center;flex:none}
.brio-head .brio-av{width:40px;height:40px;border-radius:50%;background:#fff;color:var(--brio-accent);
  display:grid;place-items:center;font-weight:700;flex:none;font-size:15px}
.brio-head b{display:block;font-size:15px;color:#fff;line-height:1.3}
.brio-head small{font-size:12px;color:rgba(255,255,255,.85)}
.brio-head .brio-x{margin-left:auto;background:0;border:0;color:#fff;cursor:pointer;font-size:24px;line-height:1;opacity:.9;padding:0 2px}
.brio-head .brio-x:hover{opacity:1}

.brio-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px;background:#0C0E13}
.brio-msg{max-width:82%;padding:11px 15px;font-size:14px;line-height:1.5;word-wrap:break-word;overflow-wrap:anywhere;animation:brio-pop .2s ease both}
.brio-msg.them{background:#161A23;border-radius:18px 18px 18px 5px;align-self:flex-start}
.brio-msg.you{background:var(--brio-accent);color:#fff;border-radius:18px 18px 5px 18px;align-self:flex-end}
.brio-msg .brio-who{display:block;font-size:11px;opacity:.65;margin-bottom:3px}
.brio-sys{align-self:center;font-size:12px;color:#8E94A6;background:#161A23;border-radius:999px;padding:5px 13px;text-align:center;max-width:90%}
.brio-typing{display:flex;gap:4px;align-self:flex-start;background:#161A23;padding:14px 16px;border-radius:18px 18px 18px 5px}
.brio-typing i{width:6px;height:6px;border-radius:50%;background:#5C6273;animation:brio-blink 1.2s infinite}
.brio-typing i:nth-child(2){animation-delay:.2s}
.brio-typing i:nth-child(3){animation-delay:.4s}
@keyframes brio-blink{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.brio-foot{border-top:1px solid #232836;padding:10px 12px;display:flex;gap:8px;align-items:center;flex:none;background:#0C0E13}
.brio-foot input{flex:1;background:#161A23;border:1px solid #232836;border-radius:999px;padding:11px 15px;
  font-size:14px;color:#EDEFF5;outline:0;font-family:inherit;min-width:0}
.brio-foot input:focus{border-color:var(--brio-accent)}
.brio-foot input::placeholder{color:#5C6273}
.brio-send{width:38px;height:38px;border-radius:50%;background:var(--brio-accent);border:0;color:#fff;
  display:grid;place-items:center;cursor:pointer;flex:none}
.brio-send:disabled{opacity:.5;cursor:default}
.brio-send svg{width:16px;height:16px;pointer-events:none}
.brio-brand{text-align:center;font-size:11px;color:#5C6273;padding:0 0 9px;flex:none;background:#0C0E13}
.brio-brand a{color:#5C6273;text-decoration:none}
.brio-brand a:hover{color:#8E94A6}

.brio-pre{padding:20px 18px;display:flex;flex-direction:column;gap:12px}
.brio-pre p{margin:0;font-size:13.5px;color:#8E94A6;line-height:1.55}
.brio-pre label{font-size:12.5px;color:#8E94A6;display:block;margin-bottom:6px}
.brio-pre input{width:100%;background:#161A23;border:1px solid #232836;border-radius:9px;padding:11px 13px;
  font-size:14px;color:#EDEFF5;outline:0;font-family:inherit}
.brio-pre input:focus{border-color:var(--brio-accent)}
.brio-pre button{background:var(--brio-accent);color:#fff;border:0;border-radius:999px;padding:12px 18px;
  font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;margin-top:4px}
.brio-err{color:#FF9C90;font-size:12.5px;margin:0}

@media (max-width:520px){
  .brio-w{right:10px!important;left:10px!important;width:auto;bottom:86px;height:calc(100vh - 110px)}
  .brio-fab{bottom:16px}
  .brio-fab.pos-right{right:16px}
  .brio-fab.pos-left{left:16px}
}
@media (prefers-reduced-motion:reduce){
  .brio-w,.brio-msg,.brio-fab,.brio-typing i{animation:none!important;transition:none!important}
}

/* ---- attachments, end chat, rating ---- */
.brio-head .brio-ht{flex:1;min-width:0}
.brio-end{background:rgba(255,255,255,.18);border:0;color:#fff;font:inherit;font-size:12px;
  padding:6px 11px;border-radius:999px;cursor:pointer;flex:none;margin-left:auto}
.brio-end:hover{background:rgba(255,255,255,.3)}
.brio-head .brio-x{margin-left:6px}

.brio-clip{width:34px;height:34px;border-radius:50%;border:0;background:transparent;color:#8E94A6;
  display:grid;place-items:center;cursor:pointer;flex:none}
.brio-clip:hover{color:#EDEFF5;background:#161A23}
.brio-clip svg{width:17px;height:17px;pointer-events:none}
.brio-foot input:disabled{opacity:.55;cursor:not-allowed}

.brio-att{display:block;margin-top:7px;text-decoration:none;color:inherit}
.brio-att.img img{max-width:210px;max-height:190px;border-radius:10px;display:block}
.brio-file{display:flex;flex-direction:column;gap:2px;background:rgba(0,0,0,.22);
  border-radius:9px;padding:9px 11px;font-size:13px;word-break:break-word}
.brio-file small{opacity:.7;font-size:11px}
.brio-msg.them .brio-file{background:rgba(255,255,255,.06)}

.brio-rate{border-top:1px solid #232836;padding:14px 16px;background:#0C0E13;flex:none}
.brio-rate p{margin:0 0 10px;font-size:13.5px;color:#EDEFF5}
.brio-rate .brio-thanks{color:#3DDC97;margin:0}
.brio-rate textarea{width:100%;background:#161A23;border:1px solid #232836;border-radius:9px;
  padding:9px 11px;font-size:13.5px;color:#EDEFF5;font-family:inherit;resize:vertical;outline:0}
.brio-rate textarea:focus{border-color:var(--brio-accent)}
.brio-rate-btns{display:flex;gap:8px;margin-top:9px}
.brio-rate-btns button{flex:1;background:#161A23;border:1px solid #232836;color:#EDEFF5;
  border-radius:999px;padding:9px 12px;font-size:13.5px;cursor:pointer;font-family:inherit}
.brio-rate-btns button:hover{border-color:var(--brio-accent)}
.brio-rate-btns button.go{background:var(--brio-accent);border-color:var(--brio-accent);color:#fff;font-weight:600}

/* ==========================================================================
   Host-theme armour.
   The widget lives inside somebody else's website, whose theme rules leak in
   (Astra, Elementor and most page builders style bare button/input/svg/div).
   Everything below re-asserts our own layout so the widget looks the same on
   every site. Kept last in the file so it wins on source order too.
   ========================================================================== */
.brio-w *, .brio-w *::before, .brio-w *::after,
.brio-fab *, .brio-pop * {
  box-sizing: border-box !important;
  margin: 0 !important;
  float: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-shadow: none !important;
  text-indent: 0 !important;
  min-width: 0 !important;
  visibility: visible !important;
}
.brio-w, .brio-fab, .brio-pop {
  box-sizing: border-box !important;
  margin: 0 !important;
  float: none !important;
  visibility: visible !important;
}
.brio-w, .brio-fab, .brio-pop {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-align: left !important;
  direction: ltr;
}
.brio-w button, .brio-fab, .brio-pop button {
  font-family: inherit !important;
  text-transform: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
}
/* Round controls need their exact box back: host themes force width:100% and
   fat padding onto every <button>, which is what squashes the icons. */
.brio-fab {
  width: 60px !important; height: 60px !important;
  padding: 0 !important; border: 0 !important; border-radius: 50% !important;
  display: grid !important; place-items: center !important;
}
.brio-send {
  width: 38px !important; height: 38px !important;
  padding: 0 !important; border: 0 !important; border-radius: 50% !important;
  display: grid !important; place-items: center !important;
}
.brio-clip {
  width: 34px !important; height: 34px !important;
  padding: 0 !important; border: 0 !important; border-radius: 50% !important;
  display: grid !important; place-items: center !important;
}
.brio-head .brio-x {
  width: 30px !important; height: 30px !important;
  padding: 0 !important; border: 0 !important; background: none !important;
  font-size: 24px !important; line-height: 1 !important;
  display: grid !important; place-items: center !important;
}
.brio-end {
  width: auto !important; padding: 6px 11px !important;
  border: 0 !important; border-radius: 999px !important;
  font-size: 12px !important; line-height: 1.3 !important; white-space: nowrap;
}
.brio-head .brio-av {
  width: 40px !important; height: 40px !important; padding: 0 !important;
  border-radius: 50% !important; font-size: 15px !important;
}
.brio-pre button, .brio-rate-btns button {
  width: 100% !important; border: 0 !important; border-radius: 999px !important;
  padding: 12px 18px !important; font-size: 14px !important;
}
.brio-rate-btns button { border: 1px solid #232836 !important; padding: 9px 12px !important; }
.brio-w input, .brio-w textarea {
  font-family: inherit !important;
  box-shadow: none !important;
  min-height: 0 !important;
  height: auto !important;
  line-height: 1.4 !important;
}
/* Icons: themes love "svg{width:100%}" and "img,svg{height:auto}". */
.brio-w svg, .brio-fab svg, .brio-pop svg {
  display: block !important;
  flex: none !important;
  fill: none;
  vertical-align: middle;
  max-width: none !important;
  max-height: none !important;
}
.brio-fab svg  { width: 26px !important; height: 26px !important; }
.brio-send svg { width: 17px !important; height: 17px !important; }
.brio-clip svg { width: 18px !important; height: 18px !important; }
.brio-w img { height: auto !important; }
.brio-att.img img { max-width: 210px !important; max-height: 190px !important; }

/* Panel geometry — re-stated so a theme cannot collapse or overlap it. */
.brio-w { display: none; }
.brio-w.on {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.brio-head { flex: 0 0 auto !important; align-items: center !important; }
.brio-head .brio-ht { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden; }
.brio-head b     { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brio-head small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brio-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;         /* without this the list refuses to scroll */
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.brio-foot, .brio-brand, .brio-rate { flex: 0 0 auto !important; }
.brio-foot { align-items: center !important; }
.brio-foot input { flex: 1 1 auto !important; width: auto !important; }
.brio-send, .brio-clip, .brio-head .brio-x, .brio-end { flex: 0 0 auto !important; }
.brio-msg { max-width: 82% !important; width: auto !important; }

/* A tidy thin scrollbar instead of the host OS one. */
.brio-body { scrollbar-width: thin; scrollbar-color: #2E3444 transparent; }
.brio-body::-webkit-scrollbar { width: 8px; }
.brio-body::-webkit-scrollbar-track { background: transparent; }
.brio-body::-webkit-scrollbar-thumb { background: #2E3444; border-radius: 99px; border: 2px solid #0C0E13; }
.brio-body::-webkit-scrollbar-thumb:hover { background: #3C445A; }

/* Launcher sits above other floating buttons (WhatsApp bubbles and friends)
   and can be nudged with data-offset on the script tag. */
.brio-fab { bottom: var(--brio-bottom, 24px) !important; }
.brio-w   { bottom: calc(var(--brio-bottom, 24px) + 72px) !important; }

/* ---- proactive message (the eye-catcher) ---- */
.brio-pop{
  position:fixed; z-index:2147483000; width:280px;
  bottom:calc(var(--brio-bottom, 24px) + 74px);
  background:#0C0E13; color:#EDEFF5; border:1px solid #2A3040; border-radius:16px;
  padding:13px 13px 13px 15px; font-size:13.5px !important; line-height:1.5 !important;
  box-shadow:0 18px 44px -12px rgba(0,0,0,.55); cursor:pointer;
  display:none; animation:brio-pop .25s ease both;
}
.brio-pop.on{display:flex !important; align-items:flex-start; gap:8px}
.brio-pop.pos-right{right:24px}
.brio-pop.pos-left{left:24px}
.brio-pop .brio-pop-t{flex:1 1 auto !important; min-width:0 !important}
.brio-pop .brio-pop-x{
  flex:0 0 auto !important;
  width:22px !important; height:22px !important; padding:0 !important;
  background:#1B2130 !important; border:0 !important; border-radius:50% !important;
  color:#9AA1B4 !important; font-size:16px !important; line-height:1 !important;
  cursor:pointer; display:grid !important; place-items:center !important;
}
.brio-pop .brio-pop-x:hover{background:#2A3040 !important; color:#EDEFF5 !important}
@media (max-width:520px){
  .brio-pop{right:12px !important; left:auto !important; width:calc(100vw - 92px); max-width:260px}
}

/* Start-a-new-chat button, shown once a conversation has ended */
.brio-new{
  margin:0 12px 12px !important; width:calc(100% - 24px) !important;
  background:var(--brio-accent) !important; color:#fff !important;
  border:0 !important; border-radius:999px !important;
  padding:12px 16px !important; font-size:14px !important; font-weight:600 !important;
  cursor:pointer; flex:0 0 auto !important; line-height:1.3 !important;
}
.brio-new:hover{filter:brightness(1.06)}
.brio-new:disabled{opacity:.6;cursor:default}