/* Online service chat. Every size is measured from the 1080px-wide original and scaled with --u. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --u:calc(min(100vw, 430px) / 1080);
  --bg:#F5F5F5;
  --text:#1B1B1B;
  --sub:#767676;
  --blue:#2200F5;
  --green:#17855C;
  --red:#D93025;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans","Noto Sans Bengali",Helvetica,Arial,sans-serif;
}
[hidden]{display:none!important}
html,body{height:100%;background:#E4E4E4;font-family:var(--font);color:var(--text);-webkit-text-size-adjust:100%}
body{display:flex;justify-content:center;overflow:hidden}
button,input{font-family:inherit;border:none;background:none;outline:none;color:inherit}
button{cursor:pointer}
svg{display:block}
img{-webkit-user-select:none;user-select:none}

.chat{position:relative;width:100%;max-width:430px;height:100vh;height:100dvh;background:var(--bg);display:flex;flex-direction:column;overflow:hidden}

/* ---------- top bar ---------- */
.topbar{position:relative;z-index:30;flex:none;height:calc(120 * var(--u) + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);background:var(--bg)}
.cbtn{position:absolute;top:calc(20 * var(--u) + env(safe-area-inset-top,0px));width:calc(76 * var(--u));height:calc(76 * var(--u));border-radius:50%;background:#E3E3E3;color:#111;display:flex;align-items:center;justify-content:center}
.cbtn:active{background:#D5D5D5}
#btnBack{left:calc(22 * var(--u))}
#btnMore{left:calc(121 * var(--u))}
.cbtn-x{right:calc(23 * var(--u))}
.cbtn svg{width:calc(44 * var(--u));height:calc(44 * var(--u))}
#btnMore svg{width:calc(46 * var(--u))}

/* ---------- agent card ---------- */
.pill{position:absolute;z-index:25;left:50%;transform:translateX(-50%);background:#fff;display:flex;align-items:center;box-shadow:0 calc(6 * var(--u)) calc(26 * var(--u)) rgba(0,0,0,.14);border:1px solid #EDEDED;animation:pillin .22s ease-out}
@keyframes pillin{from{opacity:0}to{opacity:1}}
.pill-form{top:calc(120 * var(--u) + env(safe-area-inset-top,0px));width:calc(632 * var(--u));height:calc(163 * var(--u));border-radius:calc(82 * var(--u));padding-left:calc(32 * var(--u))}
.pill-chat{top:calc(44 * var(--u) + env(safe-area-inset-top,0px));width:calc(490 * var(--u));height:calc(106 * var(--u));border-radius:calc(53 * var(--u));padding-left:calc(20 * var(--u))}
.pill-ico{flex:none;width:calc(100 * var(--u));height:calc(100 * var(--u));border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.pill-ico svg{width:calc(52 * var(--u));height:calc(52 * var(--u))}
.pill-av{position:relative;flex:none;display:block}
.pill-av img{display:block;border-radius:50%;background:#fff}
.pill-form .pill-av{width:calc(85 * var(--u));height:calc(85 * var(--u));margin-left:calc(-19 * var(--u))}
.pill-chat .pill-av{width:calc(66 * var(--u));height:calc(66 * var(--u))}
.pill-av img{width:100%;height:100%}
.dot{position:absolute;border-radius:50%;background:var(--green);border:calc(3 * var(--u)) solid #fff}
.dot.off{background:#9E9E9E}
.pill-form .dot{width:calc(30 * var(--u));height:calc(30 * var(--u));right:calc(-14 * var(--u));top:calc(-8 * var(--u))}
.pill-chat .dot{width:calc(26 * var(--u));height:calc(26 * var(--u));right:calc(-10 * var(--u));top:calc(-6 * var(--u))}
.pill-txt{display:flex;flex-direction:column;justify-content:center;min-width:0}
.pill-form .pill-txt{margin-left:calc(36 * var(--u))}
.pill-chat .pill-txt{margin-left:calc(30 * var(--u))}
.pill-txt b{font-size:calc(36 * var(--u));line-height:calc(48 * var(--u));font-weight:700;color:#111;white-space:nowrap;letter-spacing:0}
.pill-txt em{font-style:normal;font-size:calc(36 * var(--u));line-height:calc(48 * var(--u));color:#555;white-space:nowrap}

/* ---------- options menu ---------- */
.menu{position:absolute;z-index:40;left:calc(88 * var(--u));top:calc(133 * var(--u) + env(safe-area-inset-top,0px));width:calc(495 * var(--u));background:#fff;border-radius:calc(30 * var(--u));padding:calc(8 * var(--u)) calc(11 * var(--u)) calc(22 * var(--u));box-shadow:0 calc(10 * var(--u)) calc(40 * var(--u)) rgba(0,0,0,.22);animation:pillin .15s ease-out}
.menu-item{display:flex;align-items:center;width:100%;color:#1B1B1B;font-size:calc(46 * var(--u));text-align:left}
.menu-item svg{flex:none;width:calc(56 * var(--u));height:calc(56 * var(--u))}
.menu-item span:not(.switch){margin-left:calc(26 * var(--u))}
#miTranscript{height:calc(110 * var(--u));padding:0 calc(28 * var(--u));border-radius:calc(14 * var(--u));background:#4A4A4A;color:#fff}
.sounds{height:calc(66 * var(--u));margin-top:calc(44 * var(--u));padding:0 calc(28 * var(--u));cursor:pointer}
.sounds span:not(.switch){flex:1}
.switch{flex:none;position:relative;width:calc(121 * var(--u));height:calc(66 * var(--u));border-radius:calc(33 * var(--u));background:#BDBDBD;transition:background .15s}
.switch i{position:absolute;top:calc(8 * var(--u));left:calc(8 * var(--u));width:calc(50 * var(--u));height:calc(50 * var(--u));border-radius:50%;background:#fff;transition:left .15s}
.switch.on{background:#1F8A52}
.switch.on i{left:calc(63 * var(--u))}

/* ---------- scrolling area ---------- */
.scroll{position:relative;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:calc(40 * var(--u))}
.st-form .scroll{padding-top:calc(209 * var(--u))}
.st-chat .scroll{padding-top:calc(82 * var(--u))}
.vrow{display:flex;align-items:flex-start;padding:0 calc(133 * var(--u)) 0 calc(55 * var(--u))}
.uav{flex:none;width:calc(55 * var(--u));height:calc(55 * var(--u));border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;margin-right:calc(23 * var(--u));margin-left:0;position:relative;left:0}
.uav svg{width:calc(32 * var(--u));height:calc(32 * var(--u))}
.card{flex:1;min-width:0;background:#fff;border:1px solid #E3E3E3;border-radius:calc(80 * var(--u))}

/* pre-chat form */
.form-card{padding:calc(67 * var(--u)) calc(67 * var(--u)) calc(67 * var(--u))}
.intro{font-size:calc(40 * var(--u));line-height:calc(45 * var(--u));color:#111}
.lbl{display:block;margin-top:calc(66 * var(--u));font-size:calc(40 * var(--u));line-height:calc(45 * var(--u));color:#111}
.lbl2{margin-top:calc(27 * var(--u))}
.req{font-style:normal;color:#D93025;margin-left:calc(4 * var(--u))}
.tf{display:block;width:100%;height:calc(109 * var(--u));margin-top:calc(19 * var(--u));padding:0 calc(26 * var(--u));background:#EEE;border:calc(2.5 * var(--u)) solid #8A8A8A;border-radius:calc(24 * var(--u));font-size:calc(42 * var(--u));color:#111}
.tf:focus{border-color:var(--blue);background:#EFEFFF}
.tf.bad{border-color:var(--red)}
.err{margin-top:calc(14 * var(--u));font-size:calc(34 * var(--u));line-height:calc(42 * var(--u));color:var(--red)}
.radios{margin-top:0}
.radio{position:relative;display:flex;align-items:center;padding:calc(8 * var(--u)) 0;cursor:pointer}
.radio input{position:absolute;opacity:0;width:0;height:0}
.rb{flex:none;position:relative;width:calc(44 * var(--u));height:calc(44 * var(--u));border-radius:50%;border:calc(3.5 * var(--u)) solid #6A6A6A;background:#fff;margin-right:calc(23 * var(--u))}
.rb::after{content:"";position:absolute;inset:calc(6 * var(--u));border-radius:50%;background:var(--blue);transform:scale(0);transition:transform .12s}
.radio input:checked + .rb{border-color:var(--blue)}
.radio input:checked + .rb::after{transform:scale(1)}
.radio input:focus-visible + .rb{box-shadow:0 0 0 calc(5 * var(--u)) rgba(34,0,245,.25)}
.rt{font-size:calc(40 * var(--u));line-height:calc(45 * var(--u));color:#111}
.start{display:block;width:100%;height:calc(110 * var(--u));margin-top:calc(75 * var(--u));border-radius:calc(55 * var(--u));background:var(--blue);color:#fff;font-size:calc(40 * var(--u));font-weight:700;letter-spacing:.2px}
.start:active{opacity:.88}
.start:disabled{opacity:.6}
.err + .start,.radios + .start{margin-top:calc(75 * var(--u))}

/* chat summary card */
.sum{padding:calc(66 * var(--u)) calc(67 * var(--u)) calc(89 * var(--u))}
.sum .k{font-size:calc(40 * var(--u));line-height:calc(45 * var(--u));color:#757575}
.sum .v{margin-top:calc(6 * var(--u));font-size:calc(40 * var(--u));line-height:calc(45 * var(--u));color:#111;word-break:break-word}
.sum .k + .v + .k{margin-top:calc(22 * var(--u))}

/* messages */
.msgs{padding-top:calc(73 * var(--u))}
.arow{display:flex;align-items:flex-start;padding-left:calc(60 * var(--u));padding-right:calc(60 * var(--u));margin-bottom:calc(62 * var(--u));animation:msgin .22s ease-out}
@keyframes msgin{from{opacity:0;transform:translateY(calc(10 * var(--u)))}to{opacity:1;transform:none}}
.aav{flex:none;width:calc(46 * var(--u));height:calc(46 * var(--u));margin-top:calc(4 * var(--u));margin-right:calc(26 * var(--u));border-radius:50%;overflow:hidden;background:#fff}
.aav img{display:block;width:100%;height:100%}
.bub{max-width:calc(770 * var(--u));background:#fff;border-radius:calc(40 * var(--u));padding:calc(35 * var(--u)) calc(50 * var(--u));box-shadow:0 calc(4 * var(--u)) calc(16 * var(--u)) rgba(0,0,0,.07);font-size:calc(40 * var(--u));line-height:calc(53 * var(--u));color:#111;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
.urow{display:flex;justify-content:flex-end;padding:0 calc(60 * var(--u));margin-bottom:calc(62 * var(--u));animation:msgin .22s ease-out}
.urow .bub{background:var(--blue);color:#fff;box-shadow:none}
.typing{display:flex;align-items:center;justify-content:center;gap:calc(22 * var(--u));width:calc(132 * var(--u));height:calc(114 * var(--u));padding:0}
.typing i{display:block;width:calc(24 * var(--u));height:calc(24 * var(--u));border-radius:50%;background:#111;animation:bob 1s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.16s}
.typing i:nth-child(3){animation-delay:.32s}
@keyframes bob{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(calc(-12 * var(--u)))}}
.note{margin:0 calc(60 * var(--u)) calc(40 * var(--u));text-align:center;font-size:calc(34 * var(--u));line-height:calc(44 * var(--u));color:var(--sub);animation:msgin .22s ease-out}
.again{display:block;margin:0 auto calc(40 * var(--u));min-width:calc(520 * var(--u));height:calc(104 * var(--u));padding:0 calc(50 * var(--u));border-radius:calc(52 * var(--u));background:var(--blue);color:#fff;font-size:calc(40 * var(--u));font-weight:700}
.again:active{opacity:.88}

/* ---------- composer ---------- */
.composer{flex:none;position:relative;z-index:20;display:flex;align-items:center;height:calc(128 * var(--u));margin:0 calc(43 * var(--u)) calc(2 * var(--u)) calc(42 * var(--u));background:#FAFAFA;border:1px solid #E0E0E0;border-radius:calc(64 * var(--u));box-shadow:0 calc(4 * var(--u)) calc(18 * var(--u)) rgba(0,0,0,.07)}
.plus{flex:none;width:calc(126 * var(--u));height:100%;display:flex;align-items:center;justify-content:center;color:#111;padding-left:calc(2 * var(--u))}
.plus svg{width:calc(50 * var(--u));height:calc(50 * var(--u))}
.composer input{flex:1;min-width:0;height:100%;padding:0 calc(12 * var(--u)) 0 calc(8 * var(--u));font-size:calc(46 * var(--u));color:#111}
.composer input::placeholder{color:#767676;opacity:1}
.composer input:disabled{color:#999}
.send{flex:none;width:calc(88 * var(--u));height:calc(88 * var(--u));margin-right:calc(12 * var(--u));border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;transition:background .15s}
.send svg{width:calc(46 * var(--u));height:calc(46 * var(--u))}
.send:disabled{background:#DADADA;color:#A3A3A3;cursor:default}
.composer.off{opacity:.75}

/* ---------- footer ---------- */
.powered{flex:none;display:flex;align-items:center;justify-content:center;gap:calc(14 * var(--u));height:calc(100 * var(--u) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);font-size:calc(34 * var(--u));color:#6F6F6F}
.powered svg{width:calc(38 * var(--u));height:calc(40 * var(--u))}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(260 * var(--u));transform:translateX(-50%);z-index:90;max-width:calc(min(100vw,430px) - 48px);background:rgba(40,40,42,.94);color:#fff;font-size:calc(38 * var(--u));line-height:1.4;text-align:center;padding:calc(26 * var(--u)) calc(44 * var(--u));border-radius:calc(22 * var(--u));animation:pillin .15s ease-out}

@media (min-width:431px){.chat{box-shadow:0 0 0 1px #D5D5D5}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}