:root{
  --ink:#171717;
  --muted:#7a7f87;
  --line:#ececf0;
  --page:#f5f6f8;
  --card:#fff;
  --green:#22c55e;
  --wa:#25d366;
  --bubble:#f4f4f6;
  --mine:#111827;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--page);color:var(--ink);-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit}
a{color:inherit}
.page-shell{min-height:100%;display:grid;place-items:center;padding:18px}
.chat-card{width:min(100%,520px);height:min(900px,calc(100dvh - 36px));min-height:620px;background:#fff;border:1px solid #e7e7eb;border-radius:17px;box-shadow:0 18px 60px rgba(20,24,32,.10);overflow:hidden;display:flex;flex-direction:column;position:relative}
.chat-header{min-height:72px;display:flex;align-items:center;gap:11px;padding:12px 14px;background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:4}
.avatar-wrap{width:46px;height:46px;position:relative;flex:0 0 46px}
.brand-avatar{width:46px;height:46px;display:block;border-radius:12px;object-fit:cover;background:#050505;border:1px solid #e7e7e7}
.avatar-online{position:absolute;right:-2px;bottom:-1px;width:13px;height:13px;border-radius:50%;background:var(--green);border:3px solid #fff}
.brand-copy{min-width:0;flex:1}
.brand-copy h1{margin:0 0 5px;font-size:14.5px;line-height:1.2;font-weight:750;letter-spacing:-.15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-copy h1 span{font-weight:500;color:#44464c}
.presence{display:flex;align-items:center;gap:5px;color:#6d7279;font-size:11.5px;font-weight:500}
.presence i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green)}
.header-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.wa-round{width:35px;height:35px;display:grid;place-items:center;border-radius:9px;background:var(--wa);color:white;text-decoration:none;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.wa-round svg{width:21px;height:21px}
.save-btn{height:35px;padding:0 11px;border:1px solid #dedfe3;border-radius:9px;background:#fff;color:#222;font-size:11.5px;font-weight:650;cursor:pointer;white-space:nowrap}
.save-btn:hover{background:#f8f8fa}
.save-panel{padding:9px 12px;background:#fafafb;border-bottom:1px solid var(--line)}
.save-panel form{display:flex;gap:7px}
.save-panel input{flex:1;min-width:0;height:39px;padding:0 12px;border:1px solid #d9dbe0;border-radius:9px;background:#fff;color:#222;outline:none;font-size:13px}
.save-panel input:focus{border-color:#aaadb4;box-shadow:0 0 0 3px rgba(17,24,39,.05)}
.save-panel button{height:39px;padding:0 16px;border:0;border-radius:9px;background:#171717;color:white;font-size:12px;font-weight:700;cursor:pointer}
.privacy-box{text-align:center;background:#fff;border-bottom:1px solid #f0f0f2;padding:8px 16px 9px;color:#8b8f96;font-size:10.5px;line-height:1.45}
.privacy-box a{display:inline-block;margin-top:3px;color:#62666d;text-decoration:underline;text-underline-offset:2px}
.messages{flex:1;overflow-y:auto;background:#fbfbfc;padding:15px 13px 19px;scroll-behavior:smooth;overscroll-behavior:contain}
.messages::-webkit-scrollbar{width:5px}.messages::-webkit-scrollbar-thumb{background:#dedfe3;border-radius:8px}
.msg-row{display:flex;align-items:flex-end;gap:7px;margin:8px 0}
.msg-row.agent,.msg-row.system{justify-content:flex-start}.msg-row.visitor{justify-content:flex-end}
.msg-avatar{width:28px;height:28px;flex:0 0 28px;align-self:flex-end}
.msg-avatar img{display:block;width:28px;height:28px;border-radius:8px;object-fit:cover;background:#000}
.msg-avatar.spacer{visibility:hidden}
.message-stack{display:flex;flex-direction:column;max-width:min(82%,385px)}
.bubble{position:relative;width:max-content;max-width:100%;padding:9px 11px 8px;border-radius:14px 14px 14px 4px;background:#fff;border:1px solid #e8e8eb;color:#1f2023;font-size:13.2px;line-height:1.42;word-break:break-word;box-shadow:0 1px 1px rgba(0,0,0,.02)}
.visitor .message-stack{align-items:flex-end}
.visitor .bubble{border-color:#1b1b1d;background:#1b1b1d;color:#fff;border-radius:14px 14px 4px 14px}
.system .bubble{background:#fff9df;border-color:#f4e7aa;color:#6c5a18;font-size:11.5px}
.media-bubble{padding:4px;background:#fff;overflow:hidden}
.bubble img{display:block;max-width:100%;max-height:330px;border-radius:10px;object-fit:cover}
.media-bubble img{width:min(270px,65vw);aspect-ratio:1/1;object-fit:cover;background:#000}
.msg-time{display:block;margin-top:4px;font-size:9px;line-height:1;color:#9a9da3;text-align:right;white-space:nowrap}
.visitor .msg-time{color:rgba(255,255,255,.58)}
.loading{text-align:center;color:#9ba0a7;font-size:11px;margin:26px 0}
.typing{min-height:25px;padding:0 0 4px 52px;background:#fbfbfc;display:flex;align-items:center;gap:4px}
.typing span{width:5px;height:5px;border-radius:50%;background:#9da1a7;animation:typingBounce 1s infinite ease-in-out}
.typing span:nth-child(2){animation-delay:.12s}.typing span:nth-child(3){animation-delay:.24s}
@keyframes typingBounce{0%,65%,100%{transform:translateY(0);opacity:.55}32%{transform:translateY(-3px);opacity:1}}
.composer{display:flex;align-items:flex-end;gap:8px;padding:10px 11px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line)}
.attach-btn,.send-btn{width:40px;height:40px;flex:0 0 40px;border:0;border-radius:10px;display:grid;place-items:center;cursor:pointer}
.attach-btn{background:#f2f2f4;color:#55585e}
.attach-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.input-shell{flex:1;min-width:0;min-height:40px;border:1px solid #dedfe3;border-radius:11px;background:#fff;display:flex;align-items:center}
.composer textarea{width:100%;min-height:38px;max-height:112px;resize:none;border:0;outline:0;padding:10px 11px 8px;background:transparent;color:#222;font-size:13px;line-height:1.4}
.composer textarea::placeholder{color:#a0a3a8}
.send-btn{background:#171717;color:#fff}
.send-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.send-btn:disabled{opacity:.42;cursor:not-allowed}
@media(max-width:620px){
  body{background:#fff}
  .page-shell{padding:0;display:block}
  .chat-card{width:100%;height:100dvh;min-height:100dvh;border:0;border-radius:0;box-shadow:none}
  .chat-header{padding-top:calc(10px + env(safe-area-inset-top));min-height:calc(68px + env(safe-area-inset-top))}
  .brand-copy h1{font-size:14px}
  .brand-copy h1 span{display:inline}
  .messages{padding-left:11px;padding-right:11px}
  .message-stack{max-width:84%}
}
@media(max-width:380px){
  .save-btn{padding:0 8px;font-size:10.5px}
  .wa-round{width:33px;height:33px}
  .brand-copy h1 span{display:none}
  .privacy-box{padding-left:10px;padding-right:10px}
}