/* Brio LiveChat widget */
.brio-w,.brio-fab,.brio-pop{
  --brio-accent:#4F7CFF;
  --brio-bg:#0C0E13;
  --brio-raised:#161A23;
  --brio-line:#232836;
  --brio-text:#EDEFF5;
  --brio-muted:#8E94A6;
  --brio-faint:#5C6273;
  --brio-scroll:#2E3444;
  --brio-scroll-hi:#3C445A;
  --brio-shadow:rgba(0,0,0,.6);
}
.brio-w.brio-light,.brio-fab.brio-light,.brio-pop.brio-light{
  --brio-bg:#FFFFFF;
  --brio-raised:#EEF2F8;
  --brio-line:#DDE3ED;
  --brio-text:#11141B;
  --brio-muted:#596173;
  --brio-faint:#828A9B;
  --brio-scroll:#C7CEDC;
  --brio-scroll-hi:#AEB7C8;
  --brio-shadow:rgba(19,26,45,.22);
}
.brio-w,.brio-fab{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 var(--brio-shadow);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:var(--brio-bg);border:1px solid var(--brio-line);border-radius:18px;overflow:hidden;z-index:2147483001;
  display:none;flex-direction:column;box-shadow:0 30px 70px -20px var(--brio-shadow);color:var(--brio-text)}
.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:var(--brio-bg)}
.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:var(--brio-raised);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:var(--brio-muted);background:var(--brio-raised);border-radius:999px;padding:5px 13px;text-align:center;max-width:90%}
.brio-typing{display:flex;gap:4px;align-self:flex-start;background:var(--brio-raised);padding:14px 16px;border-radius:18px 18px 18px 5px}
.brio-typing i{width:6px;height:6px;border-radius:50%;background:var(--brio-faint);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 var(--brio-line);padding:10px 12px;display:flex;gap:8px;align-items:center;flex:none;background:var(--brio-bg)}
.brio-foot input{flex:1;background:var(--brio-raised);border:1px solid var(--brio-line);border-radius:999px;padding:11px 15px;
  font-size:14px;color:var(--brio-text);outline:0;font-family:inherit;min-width:0}
.brio-foot input:focus{border-color:var(--brio-accent)}
.brio-foot input::placeholder{color:var(--brio-faint)}
.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:var(--brio-faint);padding:0 0 9px;flex:none;background:var(--brio-bg)}
.brio-brand a{color:var(--brio-faint);text-decoration:none}
.brio-brand a:hover{color:var(--brio-muted)}

.brio-pre{padding:20px 18px;display:flex;flex-direction:column;gap:12px}
.brio-pre p{margin:0;font-size:13.5px;color:var(--brio-muted);line-height:1.55}
.brio-pre label{font-size:12.5px;color:var(--brio-muted);display:block;margin-bottom:6px}
.brio-pre input{width:100%;background:var(--brio-raised);border:1px solid var(--brio-line);border-radius:9px;padding:11px 13px;
  font-size:14px;color:var(--brio-text);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:var(--brio-muted);
  display:grid;place-items:center;cursor:pointer;flex:none}
.brio-clip:hover{color:var(--brio-text);background:var(--brio-raised)}
.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 var(--brio-line);padding:14px 16px;background:var(--brio-bg);flex:none}
.brio-rate p{margin:0 0 10px;font-size:13.5px;color:var(--brio-text)}
.brio-rate .brio-thanks{color:#3DDC97;margin:0}
.brio-rate textarea{width:100%;background:var(--brio-raised);border:1px solid var(--brio-line);border-radius:9px;
  padding:9px 11px;font-size:13.5px;color:var(--brio-text);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:var(--brio-raised);border:1px solid var(--brio-line);color:var(--brio-text);
  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 var(--brio-line) !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: var(--brio-scroll) transparent; }
.brio-body::-webkit-scrollbar { width: 8px; }
.brio-body::-webkit-scrollbar-track { background: transparent; }
.brio-body::-webkit-scrollbar-thumb { background: var(--brio-scroll); border-radius: 99px; border: 2px solid var(--brio-bg); }
.brio-body::-webkit-scrollbar-thumb:hover { background: var(--brio-scroll-hi); }

/* 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:var(--brio-bg); color:var(--brio-text); border:1px solid var(--brio-line); border-radius:16px;
  padding:13px 13px 13px 15px; font-size:13.5px !important; line-height:1.5 !important;
  box-shadow:0 18px 44px -12px var(--brio-shadow); 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:var(--brio-raised) !important; border:0 !important; border-radius:50% !important;
  color:var(--brio-muted) !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:var(--brio-line) !important; color:var(--brio-text) !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}

/* Light mode corrections: the dark theme leaned on contrast alone */
.brio-w.brio-light{border-color:var(--brio-line)}
.brio-w.brio-light .brio-msg.them{background:var(--brio-raised);color:var(--brio-text)}
.brio-w.brio-light .brio-file{background:rgba(19,26,45,.06)}
.brio-w.brio-light .brio-msg.you .brio-file{background:rgba(255,255,255,.18)}
.brio-w.brio-light .brio-body::-webkit-scrollbar-thumb{border-color:var(--brio-bg)}
.brio-pop.brio-light{border-color:var(--brio-line)}

/* Visitor's own light/dark switch, in the widget header */
.brio-theme{
  width:30px !important;height:30px !important;padding:0 !important;
  background:none !important;border:0 !important;border-radius:50% !important;
  color:#fff !important;cursor:pointer;opacity:.9;
  display:grid !important;place-items:center !important;flex:0 0 auto !important;
}
.brio-theme:hover{opacity:1;background:rgba(255,255,255,.16) !important}
.brio-theme svg{width:17px !important;height:17px !important}

/* ==========================================================================
   Pre-chat form, header menu and the visitor's transcript request.
   Every control re-asserts its own box with !important for the same reason
   the armour above does: host themes force width:100% onto bare buttons.
   ========================================================================== */

/* ---- required fields ---- */
.brio-pre .brio-f{margin:0}
.brio-pre .brio-f label i{color:#E5484D;font-style:normal;font-weight:700}
.brio-pre .brio-fe{display:none;color:#E5484D;font-style:normal;font-size:12px;margin-top:5px;line-height:1.35}
.brio-pre .brio-f.bad .brio-fe{display:block}
.brio-pre .brio-f.bad input{border-color:#E5484D !important}
.brio-pre .brio-f.bad label{color:#E5484D}
.brio-pre-note{font-weight:500;color:var(--brio-text) !important;font-size:14px !important}
.brio-w.brio-light .brio-err{color:#C0342B}

/* ---- header overflow menu ---- */
.brio-dots{
  width:30px !important;height:30px !important;padding:0 !important;
  background:none !important;border:0 !important;border-radius:50% !important;
  color:#fff !important;cursor:pointer;opacity:.9;
  display:grid !important;place-items:center !important;flex:0 0 auto !important;
}
.brio-dots:hover{opacity:1;background:rgba(255,255,255,.16) !important}
.brio-dots svg{width:18px !important;height:18px !important}

.brio-menu{
  position:absolute;top:56px;right:14px;z-index:5;
  min-width:196px;padding:6px !important;
  background:var(--brio-raised);border:1px solid var(--brio-line);
  border-radius:12px;box-shadow:0 18px 40px -14px var(--brio-shadow);
  display:none;flex-direction:column;gap:2px;
}
.brio-menu.on{display:flex}
.brio-mi{
  width:100% !important;padding:10px 11px !important;
  background:none !important;border:0 !important;border-radius:8px !important;
  color:var(--brio-text) !important;font-size:14px !important;font-weight:500 !important;
  text-align:left !important;cursor:pointer;
  display:flex !important;align-items:center !important;gap:10px !important;
}
.brio-mi:hover{background:var(--brio-line) !important}
.brio-mi svg{width:17px !important;height:17px !important;flex:0 0 auto;color:var(--brio-muted)}
.brio-mi span{flex:1 1 auto;min-width:0}
/* the Sounds switch */
.brio-mi .brio-sw{
  flex:0 0 auto;width:34px;height:19px;border-radius:999px;
  background:var(--brio-line);position:relative;transition:background .15s;
}
.brio-mi .brio-sw::after{
  content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
  background:#fff;transition:transform .15s;
}
.brio-mi.on .brio-sw{background:#17B26A}
.brio-mi.on .brio-sw::after{transform:translateX(15px)}

/* ---- "email me a copy" ---- */
.brio-tx{
  flex:none;padding:14px 16px !important;
  border-top:1px solid var(--brio-line);background:var(--brio-raised);
  display:flex;flex-direction:column;gap:8px;
}
.brio-tx label{font-size:12.5px;color:var(--brio-muted);display:block}
.brio-tx-row{display:flex;gap:8px;align-items:stretch}
.brio-tx input{
  flex:1 1 auto;min-width:0;width:auto !important;
  background:var(--brio-bg);border:1px solid var(--brio-line);border-radius:9px;
  padding:10px 12px !important;font-size:14px;color:var(--brio-text);outline:0;font-family:inherit;
}
.brio-tx input:focus{border-color:var(--brio-accent)}
.brio-tx button{
  width:auto !important;flex:0 0 auto;
  background:var(--brio-accent) !important;color:#fff !important;
  border:0 !important;border-radius:9px !important;
  padding:10px 16px !important;font-size:14px !important;font-weight:600 !important;
  cursor:pointer;white-space:nowrap;
}
.brio-tx button:disabled{opacity:.6;cursor:default}
.brio-tx-msg{display:none;font-style:normal;font-size:12.5px;line-height:1.4}
.brio-tx-msg.ok{display:block;color:#17B26A}
.brio-tx-msg.bad{display:block;color:#E5484D}

/* These three icons must keep their strokes even though the armour above
   zeroes fills on every svg the host theme might touch. */
.brio-dots svg,.brio-mi svg{fill:none !important;stroke:currentColor !important}
.brio-w .brio-hide{display:none !important}

/* Light mode: the alert red that reads on black is too pale on white. */
.brio-w.brio-light .brio-pre .brio-fe,
.brio-w.brio-light .brio-pre .brio-f.bad label,
.brio-w.brio-light .brio-pre .brio-f label i,
.brio-w.brio-light .brio-tx-msg.bad{color:#B42318}
.brio-w.brio-light .brio-pre .brio-f.bad input{border-color:#B42318 !important}
.brio-w.brio-light .brio-tx-msg.ok{color:#087443}
.brio-w.brio-light .brio-menu{box-shadow:0 14px 34px -14px rgba(19,26,45,.28)}