*{box-sizing:border-box}body{margin:0;font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Arabic",sans-serif;background:#efeae2}
.chat{display:flex;flex-direction:column;height:100vh;height:100dvh;max-width:560px;margin:0 auto;background:#efeae2;position:relative}
.ch-head{background:#075e54;color:#fff;padding:.65rem .9rem;display:flex;align-items:center;gap:.6rem}
.ch-av{width:38px;height:38px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;font-weight:700}
.ch-t b{display:block}.ch-t small{opacity:.85;font-size:.75rem}
.ch-body{flex:1;overflow-y:auto;padding:.8rem .7rem;background-image:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1px);background-size:16px 16px}
.bb{max-width:84%;padding:.45rem .7rem .3rem;border-radius:9px;margin:.28rem 0;white-space:pre-wrap;word-wrap:break-word;box-shadow:0 1px .5px rgba(0,0,0,.13);font-size:.95rem;position:relative}
.bb.me{background:#d9fdd3;margin-left:auto;border-top-right-radius:2px}.bb.bot{background:#fff;margin-right:auto;border-top-left-radius:2px}
.bb.sys{background:#fff8d6;margin:.5rem auto;font-size:.78rem;max-width:94%;color:#5b4a00}.bb.hum{background:#fff;border-left:3px solid #34b7f1}
.bb .tm{font-size:.66rem;color:#7a8a85;text-align:right;margin-top:.15rem}.bb img{max-width:100%;border-radius:6px;margin-bottom:.3rem}
.qrb{display:flex;flex-direction:column;gap:.25rem;margin:.1rem 0 .4rem;max-width:84%}
.qrb button{background:#fff;border:0;border-radius:9px;padding:.55rem;color:#027eb5;font:inherit;font-weight:600;box-shadow:0 1px .5px rgba(0,0,0,.13);cursor:pointer}
.qrb button:disabled{color:#9aa;cursor:default}
.ex{display:flex;gap:.35rem;overflow-x:auto;padding:.45rem .6rem;background:#f0f2f5;border-top:1px solid #dde}
.ex button{flex:none;border:1px solid #cfe3dc;background:#fff;border-radius:99px;padding:.35rem .7rem;font:inherit;font-size:.82rem;cursor:pointer;color:#075e54;max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-in{display:flex;gap:.45rem;padding:.5rem;background:#f0f2f5}
.ch-in input{flex:1;border:0;border-radius:22px;padding:.7rem 1rem;font:inherit;outline:none;min-height:44px}
.ch-in button{width:46px;height:46px;border-radius:50%;border:0;background:#00a884;color:#fff;font-size:1.2rem;cursor:pointer}
.typing{font-size:.8rem;color:#667;padding:0 .3rem;height:1.1rem}
.note{font-size:.72rem;color:#5b4a00;background:#fff8d6;text-align:center;padding:.25rem}