:root{--primary:#00E5FF;--secondary:#38BDF8;--tertiary:#818CF8;--bg:#0B0F19;--surface:#151D30;--card:#1E2942;--text-primary:#F1F5F9;--text-secondary:#94A3B8;--border:#334155;--border-soft:#1E2942;--error:#F87171;--error-bg:#3f1d1d;--success:#10B981;--header-bg:#0F172A;--input-border:#475569;--scrollbar:#1E2942;--safe-top:env(safe-area-inset-top, 0px);--safe-bottom:env(safe-area-inset-bottom, 0px);--safe-left:env(safe-area-inset-left, 0px);--safe-right:env(safe-area-inset-right, 0px)}[data-theme=light]{--bg:#F8FAFC;--surface:#FFFFFF;--card:#E2E8F0;--text-primary:#0F172A;--text-secondary:#64748B;--border:#CBD5E1;--border-soft:#E2E8F0;--header-bg:#FFFFFF;--input-border:#CBD5E1;--scrollbar:#E2E8F0}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body{height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text-primary);overscroll-behavior:none;transition:background .2s ease,color .2s ease;height:100dvh;overflow:hidden}button{font-family:inherit;cursor:pointer}input,textarea{font-family:inherit;font-size:16px}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:3px}a{color:inherit}.hidden{display:none!important}#auth-view{min-height:100dvh;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#0f172a,#020617);padding:24px;padding-top:calc(24px + var(--safe-top));padding-bottom:calc(24px + var(--safe-bottom));overflow-y:auto}.auth-wrap{width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center}.auth-logo{width:80px;height:80px;border-radius:24px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,rgba(0,229,255,.4),transparent 70%);border:1.5px solid;border-image:linear-gradient(135deg,var(--primary),var(--tertiary)) 1;margin-bottom:16px}.auth-logo span{font-family:Courier New,monospace;font-weight:900;font-size:40px;color:var(--primary)}.auth-title{font-size:28px;font-weight:700;letter-spacing:4px;color:#fff}.auth-subtitle{font-size:14px;font-weight:500;color:var(--secondary);margin:4px 0 32px}.auth-card{width:100%;background:#1e293bcc;border:1px solid #334155;border-radius:24px;padding:24px}.auth-error{width:100%;background:#3f1d1d;border:1px solid #7f1d1d;border-radius:12px;padding:14px 16px;margin-bottom:16px;display:flex;gap:10px;align-items:center;color:#fecaca;font-size:14px;font-weight:500}.auth-step-title{font-size:20px;font-weight:700;letter-spacing:1.5px;color:#fff;margin-bottom:12px;text-align:center;width:100%}.auth-step-title.with-back{display:flex;align-items:center;gap:8px;text-align:left}.auth-desc{font-size:13px;color:var(--secondary);margin-bottom:16px;text-align:center}.field{margin-bottom:14px;width:100%;position:relative}.field label{display:block;font-size:12px;color:var(--text-secondary);margin-bottom:6px;font-weight:500}.field-input-wrap{position:relative;display:flex;align-items:center}.field-icon{position:absolute;left:12px;opacity:.8;pointer-events:none;font-size:16px}.field input,.field textarea{width:100%;background:transparent;border:1.5px solid var(--input-border);border-radius:12px;padding:12px 12px 12px 38px;color:#fff;outline:none;transition:border-color .15s ease}[data-theme=light] .field input,[data-theme=light] .field textarea{color:var(--text-primary)}.field textarea{padding-left:38px;resize:vertical;min-height:60px}.field input:focus,.field textarea:focus{border-color:var(--primary)}.field.valid input{border-color:var(--success)}.field-trailing{position:absolute;right:10px;display:flex;gap:4px}.field-trailing button{background:none;border:none;color:var(--text-secondary);font-size:16px;padding:4px}.field-hint{font-size:11px;color:var(--text-secondary);margin-top:4px;padding-left:4px}.field-hint.valid{color:var(--success)}.btn{width:100%;padding:14px;border:none;border-radius:12px;font-weight:700;font-size:15px;background:var(--primary);color:#0f172a;transition:opacity .15s ease,transform .1s ease}.btn:hover{opacity:.9}.btn:active{transform:scale(.98)}.btn:disabled{background:#334155;color:var(--text-secondary);cursor:not-allowed}.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text-primary)}.btn-danger{background:var(--error);color:#fff}.link-btn{background:none;border:none;color:var(--secondary);font-size:14px;font-weight:600;margin-top:24px;padding:8px}.spinner{width:22px;height:22px;border-radius:50%;border:3px solid rgba(0,229,255,.25);border-top-color:var(--primary);animation:spin .7s linear infinite;margin:0 auto}@keyframes spin{to{transform:rotate(360deg)}}#auth-loading-overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:200}#app-view{display:none;height:100dvh;overflow:hidden;padding-top:var(--safe-top)}#app-view.active{display:flex}.list-pane{width:100%;max-width:420px;min-width:300px;display:flex;flex-direction:column;border-right:1px solid var(--border-soft);background:var(--bg);padding-left:var(--safe-left)}.chat-pane{flex:1;display:flex;flex-direction:column;background:var(--bg);min-width:0;padding-right:var(--safe-right)}@media (max-width: 860px){.list-pane{max-width:none;min-width:0;border-right:none}#app-view.chat-open .list-pane{display:none}#app-view:not(.chat-open) .chat-pane{display:none}}@media (min-width: 861px){.chat-pane{display:flex!important}}.list-header{background:var(--surface);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-soft)}.user-chip{display:flex;align-items:center;gap:12px;cursor:pointer;min-width:0}.avatar{width:44px;height:44px;border-radius:50%;background:var(--card);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;color:#fff;font-weight:700;font-size:16px;position:relative}.avatar img{width:100%;height:100%;object-fit:cover}.avatar.group{background:#4c3d7a}.avatar.channel{background:#164e63}.user-chip-text{min-width:0}.user-chip-text .name{font-size:15px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}.user-chip-text .uname{font-size:12px;color:var(--secondary);font-weight:500}.header-actions{display:flex;align-items:center;gap:2px}.icon-btn{background:none;border:none;color:var(--text-primary);width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;transition:background .12s ease}.icon-btn:hover{background:#ffffff0f}.icon-btn.accent{color:var(--primary)}.icon-btn.danger{color:#ef4444}.search-bar-wrap{padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--border-soft)}.search-input-wrap{display:flex;align-items:center;gap:8px;background:var(--card);border-radius:24px;padding:10px 14px}.search-input-wrap input{flex:1;background:none;border:none;outline:none;color:var(--text-primary);font-size:14px}.search-input-wrap svg{flex-shrink:0}.clear-btn{background:none;border:none;color:var(--text-secondary);font-size:16px}.list-body{flex:1;overflow-y:auto;position:relative;-webkit-overflow-scrolling:touch}.empty-state{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center;color:var(--text-secondary)}.empty-state .big-icon{font-size:56px;opacity:.35;margin-bottom:16px}.empty-state .title{font-weight:700;font-size:17px;color:var(--text-primary);margin-bottom:6px}.chat-list-item{display:flex;align-items:center;gap:14px;padding:12px 16px;cursor:pointer;border-bottom:1px solid var(--border-soft);transition:background .1s ease}.chat-list-item:hover{background:#ffffff08}.chat-list-item .meta{flex:1;min-width:0}.row-between{display:flex;align-items:center;justify-content:space-between;gap:8px}.chat-name-row{display:flex;align-items:center;gap:5px;min-width:0}.chat-name{font-weight:700;font-size:15px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}.badge-tag{font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;background:var(--card);color:var(--secondary);flex-shrink:0}.badge-tag.group{background:#3730a3;color:#c7d2fe}.badge-tag.channel{background:#0e7490;color:#a5f3fc}.chat-time{font-size:11px;color:var(--text-secondary);flex-shrink:0}.chat-last-msg{font-size:13px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.verified-badge{color:var(--primary);flex-shrink:0}.search-section-title{font-size:11px;font-weight:700;color:var(--primary);letter-spacing:.5px;padding:12px 16px 6px}.search-result-item{display:flex;align-items:center;gap:12px;padding:10px 16px;cursor:pointer}.search-result-item:hover{background:#ffffff08}.search-result-item .meta{flex:1;min-width:0}.search-result-item .uname{font-size:12px;color:var(--text-secondary)}.fab{position:absolute;right:20px;bottom:20px;width:52px;height:52px;border-radius:16px;background:var(--primary);color:#0f172a;display:flex;align-items:center;justify-content:center;font-size:24px;border:none;box-shadow:0 4px 16px #0006}.chat-header{background:var(--header-bg);padding:10px 8px;display:flex;align-items:center;border-bottom:1px solid var(--border-soft);gap:2px;flex-shrink:0}.chat-header .titlebox{flex:1;display:flex;align-items:center;gap:10px;cursor:pointer;min-width:0;padding:4px 6px}.chat-header .name{font-size:15px;font-weight:700}.chat-header .sub{font-size:11px;color:var(--secondary)}.messages-wrap{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:2px;-webkit-overflow-scrolling:touch}.msg-row{display:flex;flex-direction:column;max-width:80%;margin-bottom:8px}.msg-row.mine{align-self:flex-end;align-items:flex-end}.msg-row.theirs{align-self:flex-start;align-items:flex-start}.msg-sender{font-size:11px;font-weight:700;padding:2px 4px;cursor:pointer}.msg-row.mine .msg-sender{color:var(--primary)}.msg-row.theirs .msg-sender{color:var(--secondary)}.msg-bubble{border-radius:16px;padding:10px 12px;cursor:pointer;max-width:100%;word-wrap:break-word;white-space:pre-wrap;position:relative}.msg-row.mine .msg-bubble{background:var(--primary);color:#0f172a;border-bottom-right-radius:4px}.msg-row.theirs .msg-bubble{background:var(--card);color:var(--text-primary);border-bottom-left-radius:4px;border:.5px solid var(--border-soft)}.msg-text{font-size:14px}.msg-time{font-size:10px;text-align:right;margin-top:4px;opacity:.65}.msg-image{max-width:220px;max-height:280px;border-radius:8px;display:block;cursor:zoom-in;object-fit:cover}.msg-audio{display:flex;align-items:center;gap:8px;min-width:170px}.msg-audio button{background:none;border:none;font-size:20px;color:inherit;display:flex}.audio-bars{flex:1;display:flex;align-items:center;justify-content:space-evenly;height:16px;gap:2px}.audio-bars span{width:2px;border-radius:2px;background:currentColor;display:block}.reactions-row{display:flex;gap:4px;padding:2px 6px;margin-top:4px;background:var(--card);border:.5px solid var(--border);border-radius:12px}.reactions-row span{font-size:11px;font-weight:700;color:var(--primary)}.reaction-picker{display:flex;gap:10px;align-items:center;background:var(--card);border:1px solid rgba(0,229,255,.2);border-radius:20px;padding:6px 10px;margin-top:6px}.reaction-picker .emoji{font-size:18px;cursor:pointer}.reaction-picker .del-btn{width:24px;height:24px;border-radius:50%;background:var(--error-bg);display:flex;align-items:center;justify-content:center;color:#fecaca;font-size:12px;border:none;cursor:pointer}.recording-bar{display:flex;align-items:center;justify-content:space-between;background:#2a2560;padding:10px 20px;gap:10px;flex-shrink:0}[data-theme=light] .recording-bar{background:#eaddff}.rec-dot{width:10px;height:10px;border-radius:50%;background:red;animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.recording-bar .label{font-size:14px;font-weight:700;color:#fff}[data-theme=light] .recording-bar .label{color:#21005d}.chat-input-bar{background:var(--header-bg);padding:8px 10px;padding-bottom:calc(8px + var(--safe-bottom));display:flex;align-items:center;gap:8px;flex-shrink:0}.channel-locked{background:var(--card);padding:16px;text-align:center;font-size:13px;font-weight:500;color:var(--text-secondary);flex-shrink:0}.pill-input{flex:1;display:flex;align-items:center;gap:6px;background:var(--card);border:.5px solid var(--border);border-radius:24px;padding:4px 6px 4px 12px}.pill-input textarea{flex:1;background:none;border:none;outline:none;resize:none;color:var(--text-primary);font-size:16px;max-height:100px;padding:8px 0;line-height:1.3}.pill-input button.emoji-btn{background:none;border:none;font-size:18px}.round-btn{width:46px;height:46px;border-radius:50%;border:none;flex-shrink:0;background:var(--primary);color:#0f172a;display:flex;align-items:center;justify-content:center;font-size:18px}.round-btn.recording{background:#ef4444;color:#fff}.round-btn.mic{background:var(--card);color:var(--primary)}.chat-placeholder{flex:1;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:15px;text-align:center;padding:32px}.modal-overlay{position:fixed;inset:0;background:#000000a6;display:flex;align-items:center;justify-content:center;z-index:100;padding:16px;padding-top:calc(16px + var(--safe-top));padding-bottom:calc(16px + var(--safe-bottom))}.modal-card{background:var(--surface);border:1px solid var(--border);border-radius:24px;width:100%;max-width:440px;max-height:88vh;overflow-y:auto;padding:24px}.modal-title{font-size:18px;font-weight:700;letter-spacing:.5px;margin-bottom:16px;text-align:center}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.modal-actions .btn,.modal-actions .btn-outline{width:auto;padding:10px 18px}.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;gap:12px}.toggle-row .txt .t1{font-size:14px;font-weight:600;color:var(--text-primary)}.toggle-row .txt .t2{font-size:11px;color:var(--text-secondary);margin-top:2px}.switch{position:relative;width:42px;height:24px;flex-shrink:0}.switch input{opacity:0;width:0;height:0}.switch .slider{position:absolute;inset:0;background:var(--card);border:1px solid var(--border);border-radius:24px;transition:.15s;cursor:pointer}.switch .slider:before{content:"";position:absolute;height:18px;width:18px;left:2px;top:2px;background:#94a3b8;border-radius:50%;transition:.15s}.switch input:checked+.slider{background:#00e5ff40;border-color:var(--primary)}.switch input:checked+.slider:before{transform:translate(18px);background:var(--primary)}hr.sep{border:none;border-top:1px solid var(--border-soft);margin:14px 0}.section-label{font-size:11px;font-weight:700;color:var(--primary);letter-spacing:1px;margin-bottom:10px}.profile-avatar-edit{width:90px;height:90px;border-radius:50%;margin:0 auto 20px;position:relative;cursor:pointer;background:var(--card);display:flex;align-items:center;justify-content:center;overflow:hidden}.profile-avatar-edit img{width:100%;height:100%;object-fit:cover}.profile-avatar-edit .overlay{position:absolute;inset:0;background:#00000059;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px}.blocked-item{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:.5px solid var(--border-soft)}.blocked-item:last-child{border:none}.small-btn{padding:6px 12px;font-size:11px;font-weight:700;border-radius:8px;border:none;background:var(--error-bg);color:#fecaca}.type-tabs{display:flex;gap:8px;margin-bottom:14px}.type-tabs button{flex:1;padding:10px;border-radius:10px;border:none;background:var(--card);color:var(--text-secondary);font-weight:600}.type-tabs button.active{background:var(--primary);color:#0f172a}.profile-view-avatar{width:80px;height:80px;border-radius:50%;margin:0 auto 12px;background:var(--card);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;overflow:hidden}.profile-view-avatar img{width:100%;height:100%;object-fit:cover}.bio-card{background:var(--card);border-radius:16px;padding:14px;margin:12px 0}.bio-card .lbl{font-size:10px;font-weight:700;color:var(--primary);letter-spacing:1.5px}.bio-card .txt{font-size:13px;color:var(--text-secondary);margin-top:4px}.member-row{display:flex;align-items:center;gap:10px;padding:6px 0}.member-row .meta{flex:1;min-width:0}.member-row .tag{font-size:8px;font-weight:700;padding:1px 4px;border-radius:4px;margin-left:4px}.member-row .tag.creator{background:#00e5ff26;color:var(--primary)}.member-row .tag.admin{background:#818cf826;color:var(--tertiary)}.member-actions{display:flex;gap:2px}.fullscreen-img-overlay{position:fixed;inset:0;background:#000000eb;z-index:300;display:flex;align-items:center;justify-content:center}.fullscreen-img-overlay img{max-width:92vw;max-height:92vh;object-fit:contain}.fullscreen-close{position:absolute;top:calc(16px + var(--safe-top));right:16px;background:#ffffff1a;border:none;color:#fff;width:40px;height:40px;border-radius:50%;font-size:20px}#toast-container{position:fixed;top:calc(16px + var(--safe-top));left:50%;transform:translate(-50%);z-index:500;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:100%;padding:0 16px}.toast{background:var(--card);color:var(--text-primary);border:1px solid var(--border);padding:10px 18px;border-radius:12px;font-size:13px;font-weight:500;box-shadow:0 4px 16px #0000004d;animation:toast-in .2s ease;max-width:400px;text-align:center}@keyframes toast-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.error-text{color:var(--error);font-size:12px;margin:4px 0}@media (max-width: 420px){.modal-card{padding:18px;border-radius:18px}.auth-card{padding:18px}.msg-row{max-width:88%}}