:root{color-scheme:dark;font-family:Segoe UI,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.5;font-weight:400;background:#0f1115;color:#f5f7fa;--safe-area-top: env(safe-area-inset-top, 0px);--safe-area-right: env(safe-area-inset-right, 0px);--safe-area-bottom: env(safe-area-inset-bottom, 0px);--safe-area-left: env(safe-area-inset-left, 0px);--app-gap: 16px}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100svh;min-height:100dvh;background:radial-gradient(circle at top,rgba(91,140,255,.2),transparent 32%),#0f1115}button,input,textarea,select{font:inherit}button{cursor:pointer}#root{min-height:100svh;min-height:100dvh}.app-shell{width:min(100%,1120px);margin:0 auto;padding:calc(var(--app-gap) + var(--safe-area-top)) calc(var(--app-gap) + var(--safe-area-right)) var(--app-gap) calc(var(--app-gap) + var(--safe-area-left));display:grid;gap:16px;min-height:100svh;min-height:100dvh}.card{background:#171a21f5;border:1px solid #2a2f3a;border-radius:20px;padding:16px;box-shadow:0 14px 32px #0003}.hero-card{display:grid;gap:6px;padding:13px 15px}.hero-title-block{display:grid;gap:2px}.hero-head,.meta-row,.burn-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.eyebrow{margin:0 0 4px;color:#98a2b3;font-size:12px;text-transform:uppercase;letter-spacing:.08em}h1,h2,h3,p{margin:0}.hero-copy{color:#d0d5dd}.hero-subtitle{color:#98a2b3;font-size:14px}.status-pill{padding:8px 12px;border-radius:999px;font-size:13px;border:1px solid #2a2f3a;white-space:nowrap}.status-pill.ok{color:#8df2b6;border-color:#22c55e73;background:#22c55e1f}.status-pill.idle{color:#98a2b3}.form-card,.lobby-page,.chat-page,.message-card,.message-list,.bottom-composer,.custom-burn{display:grid;gap:12px}.lobby-page,.chat-page{gap:16px}.lobby-page{min-height:100%;align-content:center;gap:10px}.form-card{gap:8px;padding:13px}.chat-page{height:calc(100svh - (var(--app-gap) * 2) - var(--safe-area-top));height:calc(100dvh - (var(--app-gap) * 2) - var(--safe-area-top));grid-template-rows:auto minmax(0,1fr) auto;min-height:0}.segmented{background:#0f1115;padding:3px;border-radius:12px;display:grid;grid-template-columns:repeat(2,1fr);gap:3px}.segmented button,.preset,.ghost-button,.primary-button{min-height:44px;border-radius:10px;border:none;transition:transform .15s ease,background .15s ease,border-color .15s ease}.segmented button,.preset,.ghost-button{background:#0f1115;color:#f5f7fa;border:1px solid #2a2f3a}.segmented button.active,.preset.active{background:#5b8cff;border-color:#5b8cff}label span{display:block;margin-bottom:4px;color:#d0d5dd;font-size:13px}.field-error{display:block;margin-top:6px;color:#fca5a5;font-size:12px;line-height:1.4}input,textarea,select{width:100%;background:#0f1115;color:#f5f7fa;border:1px solid #2a2f3a;border-radius:10px;padding:12px 14px;outline:none}textarea{resize:vertical;min-height:92px}input:focus,textarea:focus,select:focus{border-color:#5b8cff;box-shadow:0 0 0 2px #5b8cff33}.primary-button{background:linear-gradient(135deg,#5b8cff,#7d62ff);color:#fff;font-weight:600}.primary-button:disabled,.ghost-button:disabled,.segmented button:disabled{opacity:.72;cursor:default;transform:none}.ghost-button{border:1px solid #2a2f3a;color:#d0d5dd}.icon-button{width:44px;min-width:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;justify-self:end}.close-icon{position:relative;width:16px;height:16px;display:inline-block}.close-icon:before,.close-icon:after{content:"";position:absolute;left:7px;top:0;width:2px;height:16px;border-radius:999px;background:currentColor}.close-icon:before{transform:rotate(45deg)}.close-icon:after{transform:rotate(-45deg)}.danger-button{color:#ffb4b4;border-color:#ef444459}.primary-button:active,.ghost-button:active,.preset:active,.segmented button:active{transform:scale(.98)}.chat-topbar,.chat-header,.chat-title-block,.top-composer,.connection-state,.sheet-head,.menu-list,.member-list,.member-row,.sheet-actions{display:grid;gap:12px}.chat-header{grid-template-columns:40px minmax(0,1fr) 40px;align-items:center}.chat-topbar{position:sticky;top:0;z-index:3;padding:12px 14px}.chat-title-block{justify-items:center;text-align:center}.chat-title-block h2{font-size:28px;line-height:1.2}.chat-header-spacer{width:40px;height:40px}.connection-state{display:inline-flex;align-items:center;justify-content:center;gap:8px;color:#98a2b3;font-size:13px}.connection-state-hero{min-height:18px;font-size:12px;line-height:1;letter-spacing:.02em;justify-self:end;align-self:end}.state-dot{width:8px;height:8px;border-radius:999px;display:inline-block}.state-dot.connected{background:#22c55e;box-shadow:0 0 10px #22c55eb3}.state-dot.reconnecting{background:#f59e0b;box-shadow:0 0 10px #f59e0b8c}.menu-button{width:40px;height:40px;padding:0;border-radius:999px;border:1px solid #2a2f3a;background:#0f1115;display:inline-flex;align-items:center;justify-content:center;gap:4px}.menu-button span{width:4px;height:4px;border-radius:999px;background:#f5f7fa;display:inline-block}.bottom-composer{grid-template-columns:minmax(0,1fr) 52px;align-items:center}.bottom-composer textarea{min-height:52px;max-height:120px;resize:none}.send-icon-button{width:52px;height:52px;border:none;border-radius:16px;background:linear-gradient(135deg,#5b8cff,#7d62ff);display:inline-flex;align-items:center;justify-content:center;color:#fff}.send-icon-button:active{transform:scale(.98)}.send-glyph{width:18px;height:18px;background:currentColor;clip-path:polygon(0 48%,100% 0,62% 50%,100% 100%)}.preset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.custom-burn{grid-template-columns:minmax(120px,1fr) minmax(100px,140px)}.burn-unit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.burn-unit{min-height:44px;border-radius:12px;border:1px solid #2a2f3a;background:#0f1115;color:#f5f7fa;transition:transform .15s ease,background .15s ease,border-color .15s ease}.burn-unit.active{background:#5b8cff;border-color:#5b8cff}.burn-unit:active{transform:scale(.98)}.toggle{display:inline-flex;align-items:center;gap:8px;color:#d0d5dd}.toggle input{width:auto;margin:0}.message-card{min-height:0;overflow:hidden}.message-list{min-height:0;height:100%;overflow:auto;padding-right:4px}.chat-content{align-content:start;padding-bottom:0}.bottom-composer{position:static;background:#171a21fa;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);grid-template-columns:40px 40px minmax(0,1fr) 48px;align-items:center;gap:8px}.composer-wrap{display:grid;gap:10px;padding-bottom:min(var(--safe-area-bottom),8px)}.hidden-file-input{display:none}.emoji-panel{padding:12px}.emoji-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:10px}.emoji-tab{min-height:36px;border-radius:10px;border:1px solid #2a2f3a;background:#0f1115;color:#d0d5dd;font-size:13px}.emoji-tab.active{background:#5b8cff;border-color:#5b8cff;color:#fff}.emoji-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;max-height:200px;overflow:auto}.emoji-cell{min-height:42px;border-radius:12px;border:1px solid #2a2f3a;background:#0f1115;color:#f5f7fa;font-size:22px}.emoji-cell:active{transform:scale(.98)}.emoji-trigger,.file-trigger,.send-icon-button{border-radius:12px;border:1px solid #2a2f3a;background:#0f1115;color:#f5f7fa}.emoji-trigger,.file-trigger{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center}.emoji-trigger.active{background:#5b8cff;border-color:#5b8cff}.emoji-glyph{width:18px;height:18px;border-radius:999px;border:2px solid currentColor;position:relative;display:inline-block}.emoji-glyph:before,.emoji-glyph:after{content:"";position:absolute;top:4px;width:3px;height:3px;border-radius:999px;background:currentColor}.emoji-glyph:before{left:4px}.emoji-glyph:after{right:4px}.emoji-glyph{box-shadow:inset 0 -5px 0 -4px currentColor}.emoji-trigger:active,.file-trigger:active{transform:scale(.98)}.file-glyph{width:15px;height:18px;border:2px solid currentColor;border-radius:4px;position:relative;display:inline-block}.file-glyph:before{content:"";position:absolute;right:-2px;top:-2px;width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;background:#0f1115;clip-path:polygon(0 0,100% 0,100% 100%)}.loading-backdrop{position:fixed;inset:0;z-index:45;background:#040810d1;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;padding:20px}.loading-panel{width:min(100%,260px);padding:22px 18px;border-radius:20px;border:1px solid #2a2f3a;background:#171a21fa;box-shadow:0 14px 32px #00000040;display:grid;justify-items:center;gap:14px;text-align:center}.loading-panel p{color:#d0d5dd;font-size:14px}.loading-spinner{width:34px;height:34px;border-radius:999px;border:3px solid rgba(255,255,255,.14);border-top-color:#5b8cff;animation:loading-spin .85s linear infinite}.update-refresh-backdrop{position:fixed;inset:0;z-index:48;background:#0f1115eb;display:flex;align-items:center;justify-content:center;padding:20px}.update-refresh-panel{display:grid;justify-items:center;gap:12px;text-align:center}.update-refresh-panel p{color:#f5f7fa;font-size:14px;letter-spacing:.02em}@keyframes loading-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.empty-state{margin:auto;text-align:center;color:#98a2b3;display:grid;gap:6px}.system-message{display:flex;justify-content:center;padding:2px 0}.system-message span{color:#98a2b3;font-size:12px;line-height:1.4}.message-row{display:flex;align-items:flex-end;justify-content:flex-start;gap:10px}.message-row.own{justify-content:flex-end}.bubble{width:min(100%,78%);padding:12px 14px;border-radius:18px 18px 18px 6px;background:#111827;border:1px solid #2a2f3a;display:grid;gap:8px}.bubble.own{border-radius:18px 18px 6px;background:#5b8cff38}.bubble p{word-break:break-word}.bubble-image-wrap{display:block;padding:0;border:none;background:transparent;cursor:zoom-in}.bubble-image{display:block;width:min(100%,260px);max-width:100%;max-height:320px;object-fit:cover;border-radius:14px}.bubble-video-wrap{display:block}.bubble-video{display:block;width:min(100%,260px);max-width:100%;max-height:320px;border-radius:14px;background:#000}.bubble-video-fallback{display:grid;gap:10px;width:min(100%,260px);padding:14px;border-radius:14px;background:#0f1115d1;border:1px solid #2a2f3a}.bubble-video-fallback p{color:#d0d5dd;font-size:13px}.media-binary-placeholder{display:grid;place-items:center;width:min(100%,260px);min-height:120px;padding:16px;border-radius:14px;background:#0f1115d1;border:1px solid #2a2f3a;text-align:center}.media-binary-placeholder p{color:#d0d5dd;font-size:13px;word-break:break-word}.media-upload-status{display:grid;gap:8px}.media-upload-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#d0d5dd;font-size:12px}.media-upload-progress{width:100%;height:6px;overflow:hidden;border-radius:999px;background:#98a2b338}.media-upload-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(135deg,#5b8cff,#7d62ff);transition:width .2s ease}.media-upload-retry-button{min-height:44px;width:100%;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:#ffffff14;color:#f5f7fa;font-size:13px;font-weight:600;transition:background .2s ease,border-color .2s ease,transform .2s ease}.media-upload-retry-button:hover{background:#5b8cff29;border-color:#7d62ff66}.media-upload-retry-button:active{transform:scale(.99)}.bubble-video-link{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border-radius:12px;background:linear-gradient(135deg,#5b8cff,#7d62ff);color:#fff;text-decoration:none;font-weight:600}.preview-backdrop{position:fixed;inset:0;z-index:40;background:#03060be6;display:flex;align-items:center;justify-content:center;padding:16px}.preview-shell{width:min(100%,960px);height:min(100%,92vh)}.preview-stage{height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:12px;touch-action:none;cursor:grab}.preview-image{max-width:100%;max-height:100%;object-fit:contain;transform-origin:center center;cursor:inherit}.bubble-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#98a2b3;font-size:12px;white-space:nowrap}.meta-trailing{display:inline-flex;align-items:center;gap:8px}.message-checks{display:inline-flex;align-items:center;min-width:16px;color:#98a2b3}.message-checks.read{color:#7dd3fc}.message-check{position:relative;width:8px;height:12px;display:inline-block}.message-check:before,.message-check:after{content:"";position:absolute;background:currentColor;border-radius:999px}.message-check:before{left:0;bottom:2px;width:2px;height:5px;transform:rotate(-45deg)}.message-check:after{left:3px;bottom:1px;width:2px;height:10px;transform:rotate(42deg)}.message-check.overlap{margin-left:-3px}.message-checks.unread .message-check.overlap{display:none}.bubble-avatar{width:36px;height:36px;border-radius:999px;flex:0 0 36px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;box-shadow:0 8px 18px #0003}.sheet-backdrop{position:fixed;inset:0;z-index:20;background:#03060bb8;display:flex;align-items:flex-end;justify-content:center;padding:16px}.sheet-card{width:min(100%,560px);max-height:min(82vh,720px);overflow:auto;display:grid;gap:16px;border-radius:24px;transition:transform .22s ease;transform-origin:bottom center}.dialog-backdrop{position:fixed;inset:0;z-index:30;background:#03060bb8;display:flex;align-items:center;justify-content:center;padding:16px}.dialog-card{width:min(100%,360px);display:grid;gap:16px;text-align:center}.dialog-body{display:grid;gap:8px}.security-overlay-backdrop{position:fixed;inset:0;z-index:35;background:#040810f5;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);display:flex;align-items:stretch;justify-content:center}.security-overlay{width:min(100%,560px);min-height:100svh;padding:calc(28px + var(--safe-area-top)) 20px calc(24px + var(--safe-area-bottom)) 20px;display:grid;grid-template-rows:auto auto auto 1fr auto;gap:24px}.security-overlay-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:16px}.security-overlay-head h3{margin-bottom:8px;font-size:28px;text-align:center}.security-dots{display:grid;grid-template-columns:repeat(4,20px);justify-content:center;gap:18px;padding:16px 0 8px}.security-dot{width:20px;height:20px;border-radius:999px;border:2px solid rgba(255,255,255,.28);background:#ffffff0a;box-shadow:inset 0 0 0 1px #ffffff0a}.security-dot.filled{border-color:#7d62ff;background:linear-gradient(135deg,#5b8cff,#7d62ff);box-shadow:0 8px 18px #5d6cff59}.security-error{min-height:20px;margin:0;text-align:center;font-size:14px;line-height:1.4;color:transparent}.security-error.visible{color:#fca5a5}.security-pad{align-self:end;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.security-key{min-height:82px;border:1px solid rgba(255,255,255,.08);border-radius:26px;background:#ffffff0f;color:#f5f7fa;font-size:32px;font-weight:600;box-shadow:0 14px 30px #00000029;transition:transform .16s ease,background .16s ease,border-color .16s ease}.security-key:active:not(:disabled){transform:scale(.98);background:#ffffff1a;border-color:#7d62ff7a}.security-key.action{font-size:17px;color:#cbd5e1}.security-key:disabled{opacity:.55;cursor:default}.sheet-grabber{display:flex;justify-content:center;padding-top:2px}.sheet-bar{width:52px;height:5px;border-radius:999px;background:#98a2b380}.sheet-head{grid-template-columns:minmax(0,1fr) auto;align-items:start}.member-list,.menu-list{gap:10px}.menu-item{width:100%;text-align:left;padding:14px 16px;border-radius:16px;border:1px solid #2a2f3a;background:#0f1115;color:#f5f7fa;display:grid;gap:4px}.menu-item strong{font-size:15px}.menu-item span{color:#98a2b3;font-size:13px}.danger-item{border-color:#ef444459}.danger-item strong{color:#ffb4b4}.member-row{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:12px 14px;border-radius:16px;border:1px solid #2a2f3a;background:#0f1115}.member-row p{color:#98a2b3;font-size:13px}.member-badge{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;background:#5b8cff29;color:#cfe0ff;font-size:13px}.panel-note{color:#98a2b3}.sheet-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.exit-confirm{background:linear-gradient(135deg,#ef4444,#c026d3)}@media(min-width:900px){.lobby-page{grid-template-columns:380px minmax(0,1fr);align-items:center}.chat-topbar{top:0}}@media(max-width:640px){.app-shell{--app-gap: 12px}.card{padding:14px;border-radius:18px}.hero-card,.form-card{padding:11px}.custom-burn,.sheet-actions{grid-template-columns:1fr}.chat-header{grid-template-columns:32px minmax(0,1fr) 32px}.chat-topbar{padding:10px 12px}.connection-state-hero{font-size:10px}.message-list{height:100%}.bubble{width:min(100%,88%)}.sheet-backdrop{padding:12px}.sheet-card{width:100%;max-height:min(88vh,720px)}.chat-title-block h2{font-size:22px}.bottom-composer{grid-template-columns:36px 36px minmax(0,1fr) 46px;gap:6px}.send-icon-button{width:46px;height:46px;border-radius:13px}.emoji-trigger,.file-trigger{width:34px;height:34px}.emoji-panel{padding:8px}.emoji-grid{grid-template-columns:repeat(6,minmax(0,1fr));max-height:180px}.chat-page{height:calc(100svh - (var(--app-gap) * 2) - var(--safe-area-top));height:calc(100dvh - (var(--app-gap) * 2) - var(--safe-area-top))}.security-overlay{padding:calc(22px + var(--safe-area-top)) 16px calc(18px + var(--safe-area-bottom)) 16px;gap:18px}.security-key{min-height:74px;border-radius:22px;font-size:28px}.security-overlay-head h3{font-size:26px}}
