:root{color:#1f2937;background:#f3f4f6;font-family:system-ui,sans-serif}body{min-height:100vh;margin:0}#root{box-sizing:border-box;max-width:720px;margin:0 auto;padding:16px}input{border:1px solid #d1d5db;border-radius:6px;padding:10px;font-size:1rem}button{color:#fff;cursor:pointer;background:#2563eb;border:0;border-radius:6px;padding:10px 16px;font-size:1rem}button.link{color:#2563eb;background:0 0;padding:4px}.card{background:#fff;border-radius:10px;flex-direction:column;gap:12px;max-width:360px;margin:10vh auto;padding:24px;display:flex}.error{color:#dc2626;margin:0}.center{text-align:center}.chat{background:#fff;border-radius:10px;flex-direction:column;height:calc(100vh - 32px);display:flex;overflow:hidden}.chat header{border-bottom:1px solid #e5e7eb;align-items:center;gap:12px;padding:12px 16px;display:flex}.chat .online{color:#6b7280;flex:1;font-size:.85rem}.messages{flex-direction:column;flex:1;gap:8px;padding:16px;display:flex;overflow-y:auto}.msg{background:#f3f4f6;border-radius:10px;align-self:flex-start;max-width:75%;padding:8px 12px}.msg.own{background:#dbeafe;align-self:flex-end}.msg small{color:#6b7280}.msg p{white-space:pre-wrap;word-break:break-word;margin:2px 0 0}.chat form{border-top:1px solid #e5e7eb;gap:8px;padding:12px;display:flex}.chat form input{flex:1}button:disabled{opacity:.6;cursor:default}button.attach{color:inherit;background:#e5e7eb;padding:10px 12px}.form-error{padding:0 16px}.thumb{cursor:zoom-in;border-radius:8px;max-width:100%;max-height:260px;margin-top:4px;display:block}.thumb.video{cursor:pointer;width:fit-content;position:relative}.thumb.video video{pointer-events:none;border-radius:8px;max-width:100%;max-height:260px;display:block}.thumb.video .play{color:#fff;text-shadow:0 0 12px #000000b3;justify-content:center;align-items:center;font-size:2.5rem;display:flex;position:absolute;inset:0}.modal{z-index:100;box-sizing:border-box;background:#000000d9;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.modal-content img,.modal-content video{border-radius:6px;max-width:calc(100vw - 48px);max-height:calc(100vh - 48px);display:block}.modal-close{background:0 0;padding:4px 10px;font-size:2.5rem;line-height:1;position:absolute;top:12px;right:16px}.attachment-preview{background:#f3f4f6;border-radius:8px;align-items:center;gap:12px;margin:0 12px;padding:8px;display:flex}.preview-media{background:#e5e7eb;border-radius:6px;flex:none;justify-content:center;align-items:center;width:64px;height:64px;display:flex;position:relative;overflow:hidden}.preview-media img,.preview-media video{object-fit:cover;pointer-events:none;width:100%;height:100%}.preview-media .play{color:#fff;text-shadow:0 0 8px #000000b3;justify-content:center;align-items:center;font-size:1.4rem;display:flex;position:absolute;inset:0}.preview-fallback{font-size:1.8rem}.preview-info{flex-direction:column;flex:1;min-width:0;display:flex}.preview-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.preview-info small{color:#6b7280}.preview-remove{color:#6b7280;background:0 0;padding:4px 10px;font-size:1.6rem;line-height:1}.progress{background:#e5e7eb;border-radius:10px;height:20px;margin:8px 12px 0;position:relative;overflow:hidden}.progress-bar{background:#93c5fd;transition:width .15s linear;position:absolute;inset:0 auto 0 0}.progress small{text-align:center;color:#1f2937;line-height:20px;display:block;position:relative}.thumb.status{cursor:default;color:#4b5563;background:#e5e7eb;align-items:center;gap:8px;padding:10px 14px;font-size:.9rem;display:flex}.thumb.status.failed{color:#b91c1c;background:#fee2e2}.spinner{border:2px solid #9ca3af;border-top-color:#0000;border-radius:50%;width:14px;height:14px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.preview-remove:disabled{opacity:.4;cursor:default}.hint{color:#6b7280;margin:0}