:root{font-family:SF Pro Text,Segoe UI,sans-serif;color:#111827}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{background:#dfe6ec}.gate{min-height:100svh;display:grid;place-items:center;padding:24px;text-align:center;color:#1f2937;background:radial-gradient(circle at 20% 0%,rgba(120,185,255,.45),transparent 36%),radial-gradient(circle at 80% 0%,rgba(92,156,223,.28),transparent 28%),linear-gradient(180deg,#eaf3fb,#d7e6f5)}.auth-card{width:min(420px,100%);border-radius:20px;padding:24px 20px 18px;background:#ffffffeb;box-shadow:0 20px 40px #1e40af24;border:1px solid #d8e4f1;text-align:left}.auth-logo{display:inline-flex;padding:7px 12px;border-radius:999px;background:#e3f2ff;color:#1d4c73;font-size:12px;font-weight:600}.auth-card h1{margin:12px 0 6px;font-size:24px;line-height:1.2}.auth-sub{margin:0 0 14px;color:#64748b;font-size:14px}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;background:#edf3f9;border-radius:12px;padding:4px;gap:4px;margin-bottom:12px}.auth-tabs button{border:0;border-radius:9px;background:transparent;color:#475569;min-height:38px;font-weight:600}.auth-tabs button.active{background:#fff;color:#0f172a;box-shadow:0 2px 6px #0f172a14}.auth-form{display:grid;gap:10px}.auth-form label{font-size:12px;color:#475569;display:grid;gap:6px}.auth-form input{width:100%;border:1px solid #cbd5e1;border-radius:12px;padding:12px 14px;font-size:15px;outline:none}.auth-form input:focus{border-color:#38bdf8;box-shadow:0 0 0 3px #38bdf833}.auth-submit{margin-top:4px;border:0;border-radius:12px;min-height:46px;background:linear-gradient(180deg,#3da9fc,#2f8be6);color:#fff;font-size:16px;font-weight:600}.auth-error{margin:10px 0 0;font-size:13px;color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:10px;padding:9px 10px}.app{width:min(960px,100vw);margin:0 auto;height:100svh;display:grid;grid-template-columns:270px 1fr;background:#e9eff5;position:relative;overflow:hidden}.backdrop{display:none}.sidebar{border-right:1px solid #d2dde8;padding:12px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;background:linear-gradient(180deg,#f6fbff,#eef5fb)}.chat{display:grid;grid-template-rows:auto 1fr auto;min-width:0;min-height:0}.chat-head{display:flex;align-items:center;gap:10px;min-height:54px;padding:calc(8px + env(safe-area-inset-top)) 12px 8px;border-bottom:1px solid #d2dde8;background:#5682a3;color:#fff}.chat-head-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.menu-btn{border:0;background:transparent;color:#fff;font-size:21px;min-width:36px}.profile-card{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:#fff;border:1px solid #d7e5f2;border-radius:14px;padding:10px}.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#44a7ff;color:#fff;font-weight:700}.profile-meta{display:grid}.profile-meta strong{font-size:14px}.profile-meta span{font-size:12px;color:#64748b}.ghost-btn{border:0;background:transparent;color:#64748b;font-size:13px}.sidebar-actions{display:grid;gap:8px}.primary-btn,.secondary-btn{border:0;border-radius:12px;min-height:42px;padding:0 12px;font-weight:600;text-align:left}.primary-btn{background:linear-gradient(180deg,#3da9fc,#2f8be6);color:#fff}.secondary-btn{background:#fff;color:#1e3a5f;border:1px solid #cfe0f0}.secondary-btn:disabled{opacity:.6}.invite-card{background:#fff;border:1px dashed #9ec5eb;border-radius:12px;padding:10px;display:grid;gap:8px}.invite-card span{font-size:12px;color:#64748b}.invite-card a{color:#0369a1;font-size:12px;word-break:break-all;text-decoration:none}.invite-card em{font-size:12px;color:#166534;font-style:normal}.flow-input{width:100%;border:1px solid #cbd5e1;border-radius:10px;min-height:40px;padding:0 10px;font-size:14px}.chat-list{display:grid;gap:6px}.chat-row{width:100%;border:1px solid transparent;border-radius:12px;min-height:44px;background:transparent;display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center;padding:0 10px;text-align:left;color:#1e293b}.chat-row:hover{background:#e5f0fb}.chat-row.active{background:#d7eaff;border-color:#b8d6f4}.chat-dot{width:8px;height:8px;border-radius:50%;background:#6b7280}.chat-row.active .chat-dot{background:#0ea5e9}.topbar{padding:calc(10px + env(safe-area-inset-top)) 14px 10px;border-bottom:1px solid #d2dde8;display:flex;flex-direction:column;background:#5682a3;color:#fff}.topline{display:flex;justify-content:space-between;align-items:center}.topbar strong{font-size:18px;font-weight:600}.topbar span{font-size:12px;color:#dce9f5}.push-btn{border:0;border-radius:10px;padding:7px 10px;font-size:12px;color:#0f172a;background:#f8fafc}.push-btn:disabled{opacity:.75}.messages{overflow-y:auto;min-height:0;padding:14px;display:flex;flex-direction:column;gap:10px;background:radial-gradient(circle at 18% 22%,rgba(255,255,255,.6) 0,transparent 30%),radial-gradient(circle at 88% 8%,rgba(198,228,255,.8) 0,transparent 24%),linear-gradient(180deg,#dce6ef,#d5e3ee)}.bubble{max-width:82%;border-radius:12px;padding:10px 12px;line-height:1.4;word-break:break-word;box-shadow:0 1px 2px #0f172a26}.bubble.owner{align-self:flex-start;background:#fff}.bubble.peer{align-self:flex-end;background:#d8f7c7;color:#111827}.composer{display:flex;gap:8px;padding:10px 12px calc(12px + env(safe-area-inset-bottom));border-top:1px solid #d2dde8;background:#e9eff5}.composer input{flex:1;border:1px solid #cbd5e1;border-radius:999px;padding:11px 14px;font-size:16px}.composer button{border:none;border-radius:999px;background:#0284c7;color:#fff;padding:0 16px;font-size:15px;min-height:44px}.icon-btn{min-width:44px;min-height:44px;padding:0;font-size:20px}.icon-btn.recording{background:#dc2626}.media-img{width:min(240px,100%);border-radius:10px;display:block}.media-audio{width:220px;max-width:100%}.typing{font-size:12px;color:#475569;padding:4px 8px}@media (max-width: 820px){.app{grid-template-columns:1fr;height:100svh}.sidebar{position:absolute;top:0;left:0;bottom:0;width:min(82vw,320px);transform:translate(-102%);transition:transform .22s ease;z-index:30;border-right:1px solid #d2dde8;border-bottom:0;max-height:none}.sidebar.open{transform:translate(0)}.backdrop{display:block;position:absolute;top:0;right:0;bottom:0;left:0;background:#0f172a5c;opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:20}.backdrop.show{opacity:1;pointer-events:auto}.auth-card{padding:20px 16px 14px;border-radius:16px}}