*{box-sizing:border-box}html,body{height:100%;touch-action:manipulation;-webkit-text-size-adjust:100%}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',Inter,Segoe UI,Roboto,Arial;background:#0b141a;color:#e9edef;overflow:hidden}
.app-bg{position:fixed;inset:0;background:#0b141a;z-index:-2}
.wa-shell{width:min(1320px,100vw);height:100vh;height:100dvh;margin:0 auto;display:grid;grid-template-columns:340px 1fr;background:#111b21}
.wa-sidebar{border-right:1px solid #222d34;background:#111b21;display:flex;flex-direction:column}
.sb-top{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#202c33;border-bottom:1px solid #2a3942}.sb-top small{display:block;color:#8696a0}.sb-actions{margin-left:auto;display:flex;gap:6px}
.sb-search{margin:10px;padding:11px 12px;border-radius:8px;background:#202c33;color:#8696a0;font-size:14px}.sb-chat{display:flex;gap:10px;align-items:center;padding:12px 14px;border-top:1px solid #1f2a30;cursor:pointer}.sb-chat small{display:block;color:#8696a0}.sb-chat.active{background:#2a3942}
.wa-chat{position:relative;display:flex;flex-direction:column;height:100%;min-height:0;min-width:0;background:transparent}.wa-head{height:60px;display:flex;align-items:center;gap:10px;padding:0 14px;background:#202c33;border-bottom:1px solid #2a3942}.wa-head small{display:block;color:#8696a0}.head-actions{margin-left:auto;display:flex;gap:6px}
.queue-screen{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:linear-gradient(180deg,#0b1324,#0a1a33)}
.queue-screen[hidden]{display:none !important}
.queue-card{width:min(420px,92%);padding:22px;border-radius:16px;background:#111f39;border:1px solid #2d4b7d;text-align:center;box-shadow:0 20px 45px rgba(0,0,0,.35)}
.q-logo{width:56px;height:56px;border-radius:50%;margin:0 auto 10px;background:#fff url('https://vexuspayments.com/logo/favicon.png') center/cover no-repeat}
.queue-card h3{margin:4px 0 8px}.queue-card p{margin:0 0 10px;color:#b6c7e6;font-size:14px}.q-timer{font-size:36px;font-weight:800;color:#63b3ff;margin-bottom:10px}.q-bar{height:8px;border-radius:999px;background:#23385f;overflow:hidden}.q-bar>div{height:100%;background:linear-gradient(90deg,#54a8ff,#6f7bff);width:100%;transition:width 1s linear}.queue-card small{display:block;color:#8fa6cc;margin-top:10px}
.q-agent{min-height:20px;margin-top:8px;color:#cfe2ff;font-size:13px}
.avatar{width:40px;height:40px;border-radius:50%;background:#fff url('https://vexuspayments.com/logo/favicon.png') center/cover no-repeat;border:1px solid #3c4f5a}.avatar.small{width:34px;height:34px}.avatar.tiny{width:30px;height:30px}
.icon-btn,.icon.plain{border:0;background:transparent;color:#aebac1;cursor:pointer;padding:6px;border-radius:8px}.icon-btn:hover,.icon.plain:hover{background:#2a3942}.icon-btn svg,.icon svg,.send svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.wa-messages{flex:1;min-height:0;overflow:auto;padding:14px;background:#0b141a url('https://i.pinimg.com/736x/a4/30/23/a43023018773f7636f33a935d1316c33.jpg') center/220px repeat;display:flex;flex-direction:column;align-items:flex-start}.msg{display:inline-block;width:fit-content;max-width:min(78%,620px);padding:8px 11px 6px;border-radius:8px;margin:7px 0;line-height:1.36;font-size:14px;box-shadow:0 1px 0 rgba(0,0,0,.25);word-break:break-word;position:relative}.msg-text{display:block;padding-right:52px}.msg-time{position:absolute;right:9px;bottom:5px;font-size:11px;opacity:.75}.bot{background:#202c33;border-top-left-radius:0}.bot .msg-time{color:#9fb0bb}.me{background:#005c4b;align-self:flex-end;border-top-right-radius:0}.me .msg-time{color:#c8f0e4}
.notice{align-self:center;background:rgba(11,20,26,.72);border:1px dashed #4f697f;color:#c9dae7;padding:6px 10px;border-radius:999px;box-shadow:none}.notice .msg-time{display:none}.notice .msg-text{padding-right:0}
.wa-input-row{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#202c33;border-top:1px solid #2a3942;position:sticky;bottom:0;z-index:5}input{flex:1;min-width:0;background:#2a3942;border:1px solid transparent;color:#e9edef;padding:11px 13px;border-radius:8px;font-size:16px;outline:none}input:focus{border-color:#00a884}
.send{width:42px;height:42px;border-radius:50%;border:0;background:#00a884;color:#0b141a;display:grid;place-items:center;cursor:pointer}.send:hover{filter:brightness(1.06)}.send svg{width:18px;height:18px}

body.embed-mode .wa-sidebar,body.embed-mode .head-actions,body.embed-mode .icon.plain{display:none}
body.embed-mode .wa-shell{grid-template-columns:1fr;width:100%;height:100%}

@media (max-width:980px){
  body{overflow:auto}
  .wa-shell{grid-template-columns:1fr;height:100svh;height:100dvh}
  .queue-card{padding:18px}
  .wa-sidebar{display:none}
  .wa-head{height:56px;padding:0 10px;background:#075e54;border-bottom-color:#0b4f47}
  .wa-head strong{font-size:15px}.wa-head small{font-size:12px;color:#cde7e3}
  .head-actions .icon-btn:hover{background:transparent}
  .wa-messages{padding:10px 8px}
  .msg{max-width:88%;font-size:14px}
  .wa-input-row{padding:8px calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));background:#1f2c34}
  input{border-radius:22px;background:#2a3942;padding:10px 14px}
  .icon.plain{padding:4px}
  .send{width:38px;height:38px}
}