:root{--brand:#25D366;--bg:#f7f7f8;--text:#111;--muted:#666;--border:#ddd;}
*{box-sizing:border-box}
body{margin:0;font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg)}
a{color:#0a66c2;text-decoration:none}
header{background:#fff;border-bottom:1px solid var(--border)}
.container{max-width:1000px;margin:0 auto;padding:16px}
.row{display:grid;grid-template-columns:1fr 320px;gap:16px}
.card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:#111;color:#fff;cursor:pointer}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-light{background:#fff;color:#111}
.muted{color:var(--muted)}
.uploader{border:1px dashed var(--border);border-radius:12px;padding:16px;background:#fff}
.uploader.drag{outline:2px solid var(--brand)}
.spinner{width:16px;height:16px;border:3px solid rgba(0,0,0,.1);border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pill{display:inline-block;padding:2px 8px;border:1px solid var(--border);border-radius:999px;background:#f8f8f8}
.preview{padding:16px}
.date{margin:16px 0 8px;text-align:center;color:#6b7280;font-size:12px}
.rowmsg{display:flex;gap:10px;margin:6px 0;align-items:flex-start}
.avatar{width:28px;height:28px;border-radius:50%;background:#e5e7eb;display:flex;align-items:center;justify-content:center;font-size:10px;border:1px solid #d1d5db;color:#374151}
.bubble{border:1px solid #e5e7eb;background:#fafafa;border-radius:12px;padding:10px 12px;max-width:75%}
.bubble.me{background:rgba(37,211,102,.1);border-color:rgba(37,211,102,.3)}
.meta{font-size:10px;color:#6b7280;margin-top:6px}
.controls{display:flex;gap:12px;align-items:center;justify-content:space-between;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:#fff;padding:8px 16px}
.right a{margin-left:12px}
.error{color:#7f1d1d;background:#fee2e2;border:1px solid #fecaca;border-radius:10px;padding:8px 10px;margin-top:8px;display:none}
.progress{display:none;gap:8px;align-items:center;margin-top:8px}
.footer{text-align:center;color:#777;font-size:12px;padding:24px 0}
.badge{width:36px;height:36px;border-radius:10px;background:rgba(37,211,102,.15);color:var(--brand);display:flex;align-items:center;justify-content:center;font-weight:700}
.topbtn{position:fixed;right:16px;bottom:16px;z-index:50;width:44px;height:44px;border-radius:50%;background:var(--brand);color:#fff;border:none;box-shadow:0 2px 6px rgba(0,0,0,.25);display:none;font-size:18px}
@media (max-width: 900px){.row{grid-template-columns:1fr}}
@media print{header,.controls,.right,.sidebar,.uploader,.error,.progress,.footer,.topbtn{display:none!important}.container{max-width:none;padding:0}.card{border:none;border-radius:0}.bubble{page-break-inside:avoid}}