*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;font-family:'Heebo',sans-serif;background:#111;display:flex;align-items:center;justify-content:center;}
.wrap{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px;}
.phone{width:370px;border-radius:36px;overflow:hidden;border:7px solid #222;box-shadow:0 32px 80px rgba(0,0,0,0.7),0 0 0 1px #333;display:flex;flex-direction:column;height:720px;background:#fff;position:relative;}
.wa-hdr{background:#075E54;padding:10px 16px 10px;flex-shrink:0;}
.status-bar{display:flex;justify-content:space-between;font-size:11px;color:rgba(255,255,255,0.8);margin-bottom:8px;}
.hdr-row{display:flex;align-items:center;gap:11px;direction:rtl;}
.av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#25D366,#075E54);display:flex;align-items:center;justify-content:center;font-size:21px;flex-shrink:0;border:2px solid rgba(255,255,255,0.3);}
.hdr-name{font-size:15px;font-weight:700;color:#fff;letter-spacing:.2px;}
.hdr-status{font-size:11px;transition:color .3s;}
.hdr-status.online{color:rgba(255,255,255,0.65);}
.hdr-status.typing{color:#25D366;font-style:italic;}
.body{flex:1;overflow-y:auto;padding:10px 10px 6px;direction:rtl;display:flex;flex-direction:column;gap:4px;background:#ECE5DD url("data:image/svg+xml,%3Csvg width='50' height='50' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23b0a090' fill-opacity='0.1'%3E%3Cpath d='M25 25h3v3h-3zm-12 0h3v3h-3zm24 0h3v3h-3zm-12-12h3v3h-3zm0 24h3v3h-3z'/%3E%3C/g%3E%3C/svg%3E");}
.body::-webkit-scrollbar{width:3px;}
.body::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.15);border-radius:3px;}
.date-div{text-align:center;margin:4px 0 10px;}
.date-div span{background:rgba(255,255,255,0.85);font-size:11px;color:#555;padding:3px 12px;border-radius:8px;}
.msg{display:flex;flex-direction:column;max-width:82%;margin-bottom:1px;}
.msg.in{align-self:flex-start;}
.msg.out{align-self:flex-end;}
.sender-name{font-size:11px;font-weight:700;color:#128C7E;margin-bottom:2px;padding-right:3px;}
.bubble{padding:8px 12px 6px;font-size:13.5px;line-height:1.5;direction:rtl;text-align:right;color:#111;}
.bubble.in{background:#fff;border-radius:0 8px 8px 8px;box-shadow:0 1px 2px rgba(0,0,0,0.1);}
.bubble.out{background:#DCF8C6;border-radius:8px 0 8px 8px;box-shadow:0 1px 2px rgba(0,0,0,0.1);}
.msg-meta{font-size:10px;color:#aaa;margin-top:2px;display:flex;align-items:center;gap:3px;}
.msg.out .msg-meta{justify-content:flex-end;}
.ticks{color:#53bdeb;}
.badge{display:inline-block;font-size:10px;padding:2px 9px;border-radius:10px;font-weight:700;margin-bottom:5px;margin-left:4px;}
.badge-dream{background:#fce4ec;color:#880e4f;}
.badge-rec{background:#e8f5e9;color:#2e7d32;}
.badge-warn{background:#fff3e0;color:#e65100;}
.badge-upgrade{background:#e3f2fd;color:#1565c0;}
.badge-search{background:#ede7f6;color:#4527a0;}
.badge-theft{background:#fbe9e7;color:#bf360c;}
.typing-bubble{display:flex;align-items:center;gap:5px;padding:10px 14px;background:#fff;border-radius:0 8px 8px 8px;width:fit-content;box-shadow:0 1px 2px rgba(0,0,0,0.1);}
.dot{width:7px;height:7px;background:#bbb;border-radius:50%;animation:tdot 1.2s infinite;}
.dot:nth-child(2){animation-delay:.2s;}
.dot:nth-child(3){animation-delay:.4s;}
@keyframes tdot{0%,60%,100%{transform:translateY(0);}30%{transform:translateY(-6px);}}
.prog{background:rgba(255,255,255,0.72);border-radius:9px;padding:7px 11px;margin:4px 0;}
.prog-lbl{font-size:10px;color:#666;margin-bottom:4px;text-align:right;}
.prog-track{background:#ddd;border-radius:4px;height:5px;}
.prog-fill{background:linear-gradient(90deg,#075E54,#25D366);border-radius:4px;height:5px;transition:width .5s;}
.prog-steps{display:flex;justify-content:space-between;margin-top:4px;}
.qr-wrap{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end;margin:5px 0 10px;}
.qr{background:rgba(255,255,255,0.94);border:1.5px solid #25D366;border-radius:18px;padding:6px 13px;font-size:12px;color:#075E54;cursor:pointer;font-family:inherit;font-weight:600;transition:all .15s;}
.qr:hover{background:#25D366;color:#fff;}
.input-bar{background:#f0f0f0;padding:8px 10px;display:flex;align-items:center;gap:8px;direction:rtl;border-top:1px solid #e0e0e0;flex-shrink:0;}
.msg-input{flex:1;background:#fff;border:none;border-radius:22px;padding:10px 15px;font-size:13.5px;font-family:inherit;direction:rtl;outline:none;color:#333;}
.msg-input:disabled{opacity:.5;}
.send{width:42px;height:42px;background:#25D366;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;font-size:18px;color:#fff;transition:all .15s;}
.send:disabled{opacity:.35;cursor:not-allowed;}
.send:hover:not(:disabled){background:#20ba5a;transform:scale(1.05);}
.powered{font-size:11px;color:#555;text-align:center;letter-spacing:.3px;}
.powered span{color:#25D366;font-weight:600;}