*{box-sizing:border-box;padding:0}*,body{margin:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg-secondary);color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;transition:background-color .2s ease,color .2s ease}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}:root{--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;--font-mono:"Menlo","Monaco","Consolas","Roboto Mono","Courier New",monospace;--text-xs:0.75rem;--text-sm:0.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--font-normal:400;--font-medium:500;--font-semibold:600;--font-bold:700;--leading-tight:1.25;--leading-normal:1.5;--leading-relaxed:1.625;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--radius-xs:2px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-full:9999px;--z-base:0;--z-above:10;--z-drawer:100;--z-modal:200;--z-toast:300;--z-call-overlay:400;--transition-fast:120ms ease;--transition-base:200ms ease;--transition-slow:300ms ease;--touch-target:44px;--text-on-accent:#fff}:root[data-theme=dark]{--bg-primary:#36393f;--bg-secondary:#2f3136;--bg-tertiary:#202225;--bg-hover:#3c3f44;--bg-active:#40444b;--text-primary:#dcddde;--text-secondary:#b9bbbe;--text-muted:#72767d;--accent:#5865f2;--accent-hover:#4752c4;--accent-active:#3c45a5;--success:#43b581;--warning:#faa61a;--danger:#f04747;--info:#00b0f4;--border-color:#202225;--border-color-light:#3c3f44;--shadow:#0003;--shadow-lg:#0006;--input-bg:#202225;--input-border:#40444b;--input-focus:#5865f2;--button-primary-bg:#5865f2;--button-primary-hover:#4752c4;--button-secondary-bg:#4f545c;--button-secondary-hover:#5d6269;--scrollbar-thumb:#202225;--scrollbar-track:#2f3136;--call-bg:#1e2124;--call-tile-bg:#202225;--call-overlay-bg:#000000b3;--call-control-bg:#0009;--call-control-hover:#000c;--call-control-mute:#f04747;--call-control-mute-hover:#d73737;--call-control-video:#43b581;--call-control-video-hover:#3ca374;--call-control-invite:#7289da;--call-control-invite-hover:#677bc4;--call-control-leave:#f04747;--call-control-leave-hover:#d73737;--call-connecting-color:#7289da;--call-empty-color:#72767d}:root[data-theme=light]{--bg-primary:#fff;--bg-secondary:#f2f3f5;--bg-tertiary:#e3e5e8;--bg-hover:#e9ecef;--bg-active:#dee2e6;--text-primary:#060607;--text-secondary:#4f5660;--text-muted:#747f8d;--accent:#5865f2;--accent-hover:#4752c4;--accent-active:#3c45a5;--success:#248046;--warning:#f0b232;--danger:#f23f43;--info:#00b0f4;--border-color:#e3e5e8;--border-color-light:#f2f3f5;--shadow:#0000001a;--shadow-lg:#0003;--input-bg:#fff;--input-border:#d1d9de;--input-focus:#5865f2;--button-primary-bg:#5865f2;--button-primary-hover:#4752c4;--button-secondary-bg:#4f545c;--button-secondary-hover:#5d6269;--scrollbar-thumb:#b9bbbe;--scrollbar-track:#f2f3f5;--call-bg:#1e2124;--call-tile-bg:#202225;--call-overlay-bg:#000000b3;--call-control-bg:#0009;--call-control-hover:#000c;--call-control-mute:#f04747;--call-control-mute-hover:#d73737;--call-control-video:#43b581;--call-control-video-hover:#3ca374;--call-control-invite:#7289da;--call-control-invite-hover:#677bc4;--call-control-leave:#f04747;--call-control-leave-hover:#d73737;--call-connecting-color:#7289da;--call-empty-color:#72767d}body *{transition:background-color .2s ease,color .2s ease,border-color .2s ease}.participant-video-wrapper,audio,video{transition:none!important}.auth-container{align-items:center;background:var(--bg-secondary);display:flex;justify-content:center;min-height:100vh;padding:2rem}.auth-box{background:var(--bg-primary);border-radius:8px;box-shadow:0 2px 10px var(--shadow);max-width:400px;padding:2rem;width:100%}.auth-box h2{color:var(--text-primary);font-size:1.5rem;margin-bottom:1.5rem;text-align:center}.form-group{margin-bottom:1rem}.form-group label{color:var(--text-secondary);display:block;font-size:.875rem;font-weight:600;letter-spacing:.5px;margin-bottom:.5rem;text-transform:uppercase}.form-group input{background:var(--input-bg);border:1px solid var(--input-border);border-radius:4px;box-sizing:border-box;color:var(--text-primary);font-size:1rem;padding:.75rem;transition:border-color .2s;width:100%}.form-group input:focus{border-color:var(--input-focus);outline:none}.form-group input::placeholder{color:var(--text-muted)}.error-message{background:var(--danger);border-radius:4px;color:#fff;font-size:.875rem;margin-bottom:1rem;padding:.75rem;text-align:center}.auth-button{background:var(--accent);border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;margin-top:.5rem;padding:.75rem;transition:background .2s;width:100%}.auth-button:hover:not(:disabled){background:var(--accent-hover)}.auth-button:disabled{background:var(--bg-active);cursor:not-allowed}.auth-switch{color:var(--text-muted);font-size:.875rem;margin-top:1.5rem;text-align:center}.link-button{background:none;border:none;color:var(--accent);cursor:pointer;font-size:.875rem;margin-left:.25rem;padding:0;text-decoration:underline}.link-button:hover{color:var(--accent-hover)}@media (prefers-reduced-motion:reduce){.auth-button,.form-group input{transition-duration:.01ms}}.avatar{align-items:center;border-radius:var(--radius-full);display:inline-flex;flex-shrink:0;justify-content:center;overflow:hidden;position:relative}.avatar-sm{font-size:var(--text-xs);height:24px;width:24px}.avatar-md{font-size:var(--text-base);height:40px;width:40px}.avatar-lg{font-size:var(--text-lg);height:64px;width:64px}.avatar-xl{font-size:var(--text-xl);height:96px;width:96px}.avatar-img{height:100%;object-fit:cover;width:100%}.avatar-initials{align-items:center;color:#fff;display:flex;font-weight:var(--font-semibold);height:100%;justify-content:center;width:100%}.avatar-status{border:2px solid var(--bg-primary);border-radius:50%;bottom:0;height:25%;position:absolute;right:0;width:25%}.avatar-status.online{background:var(--success)}.avatar-status.offline{background:var(--text-muted)}.btn{align-items:center;border:none;border-radius:var(--radius-sm);cursor:pointer;display:inline-flex;font-family:var(--font-sans);font-weight:var(--font-semibold);gap:var(--space-2);justify-content:center;min-height:var(--touch-target);transition:background-color var(--transition-fast),color var(--transition-fast),transform .1s ease;white-space:nowrap}.btn-sm{min-height:32px;padding:var(--space-1) var(--space-3)}.btn-md,.btn-sm{font-size:var(--text-sm)}.btn-md{padding:var(--space-2) var(--space-4)}.btn-lg{font-size:var(--text-base);padding:var(--space-3) var(--space-6)}.btn-primary{background:var(--button-primary-bg)}.btn-primary:hover{background:var(--button-primary-hover)}.btn-secondary{background:var(--button-secondary-bg)}.btn-secondary:hover{background:var(--button-secondary-hover)}.btn-ghost{background:#0000;color:var(--text-secondary)}.btn-ghost:hover{background:var(--bg-hover);color:var(--text-primary)}.btn-danger{color:#fff}.btn-danger:hover{background:var(--call-control-leave-hover)}.btn:disabled{cursor:not-allowed;opacity:.5}.btn:active:not(:disabled){transform:scale(.97)}@media (prefers-reduced-motion:reduce){.btn{transition-duration:.01ms}.btn:active:not(:disabled){transform:none}}.ui-input,.ui-textarea{background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--radius-sm);box-sizing:border-box;color:var(--text-primary);font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-normal);padding:var(--space-2) var(--space-3);transition:border-color var(--transition-fast);width:100%}.ui-input:focus,.ui-textarea:focus{border-color:var(--input-focus);outline:none}.ui-input::placeholder,.ui-textarea::placeholder{color:var(--text-muted)}.ui-textarea{min-height:80px;resize:vertical}@media (prefers-reduced-motion:reduce){.ui-input,.ui-textarea{transition-duration:.01ms}}.friends-page{background:var(--bg-primary);box-sizing:border-box;display:flex;flex-direction:column;height:100%;overflow:hidden}.friends-page-header{align-items:center;border-bottom:1px solid var(--border-color);display:flex;flex-shrink:0;gap:12px;padding:12px 16px}.friends-page-back-btn{align-items:center;background:#0000;border:none;border-radius:4px;color:var(--text-primary);cursor:pointer;display:inline-flex;height:44px;justify-content:center;min-height:44px;transition:background .2s;width:44px}.friends-page-back-btn:hover{background:var(--bg-hover)}.friends-page-back-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.friends-page-title{color:var(--text-primary);font-size:1.125rem;font-weight:600}.friends-tab-bar{border-bottom:1px solid var(--border-color);display:flex;flex-shrink:0;gap:4px;overflow-x:auto;padding:0 12px}.friends-tab{align-items:center;background:#0000;border:none;border-bottom:2px solid #0000;color:var(--text-secondary);cursor:pointer;display:inline-flex;font-size:.9375rem;font-weight:500;gap:6px;min-height:44px;padding:0 16px;transition:color .2s,border-color .2s;white-space:nowrap}.friends-tab.active{border-bottom-color:var(--accent)}.friends-tab.active,.friends-tab:hover{color:var(--text-primary)}.friends-tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.tab-badge{align-items:center;background:var(--accent);border-radius:10px;color:#fff;display:inline-flex;font-size:.75rem;height:20px;justify-content:center;min-width:20px;padding:0 6px}.friends-tab-panel{flex:1 1;min-height:0;overflow-y:auto;padding:16px}.friends-rows{display:flex;flex-direction:column;gap:4px}.friends-row{align-items:center;background:var(--bg-secondary);border-radius:6px;display:flex;gap:12px;min-height:44px;padding:8px 12px;transition:background .2s}.friends-row:hover{background:var(--bg-hover)}.friends-row-info{display:flex;flex:1 1;flex-direction:column;gap:2px;min-width:0}.friends-row-name{color:var(--text-primary);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.friends-row-status{color:var(--text-muted);font-size:.75rem}.empty-state{font-size:.9375rem;padding:32px 16px}.pending-divider{border-bottom:1px solid var(--border-color);color:var(--text-secondary);font-size:.875rem;font-weight:600;letter-spacing:.5px;margin-bottom:8px;padding:12px 4px 8px;text-transform:uppercase}.pending-divider:not(:first-child){margin-top:16px}.friends-add-panel{display:flex;flex-direction:column;gap:12px}.search-section{display:flex;flex-direction:column;gap:8px}.search-input{box-sizing:border-box;width:100%}.search-results{display:flex;flex-direction:column;gap:4px;max-height:400px;overflow-y:auto}.search-result-item{align-items:center;background:var(--bg-secondary);border-radius:6px;display:flex;gap:12px;min-height:44px;padding:8px 12px}@media (max-width:480px){.friends-page-header{padding:8px 12px}.friends-tab-bar{padding:0 8px}.friends-tab{font-size:.875rem;padding:0 12px}.friends-tab-panel{padding:12px}}@media (prefers-reduced-motion:reduce){.friends-page-back-btn,.friends-row,.friends-tab{transition-duration:.01ms}}.connection-quality-indicator{background:#0009;border-radius:8px;color:#fff;display:flex;flex-direction:column;font-size:12px;gap:4px;min-width:120px;padding:8px}.connection-section,.quality-section{align-items:center;display:flex;gap:6px}.quality-icon{font-size:18px}.quality-icon.excellent{color:#4caf50}.quality-icon.good{color:#8bc34a}.quality-icon.fair{color:#ffc107}.quality-icon.poor{color:#ff9800}.quality-icon.very-poor{color:#f44336}.quality-score{font-size:14px;font-weight:700}.quality-score.excellent{color:#4caf50}.quality-score.good{color:#8bc34a}.quality-score.fair{color:#ffc107}.quality-score.poor{color:#ff9800}.quality-score.very-poor{color:#f44336}.connection-icon{font-size:16px}.connection-icon.connected{color:#4caf50}.connection-icon.connecting{animation:pulse 1.5s ease-in-out infinite;color:#ffc107}.connection-icon.disconnected{color:#f44336}.connection-state{font-size:11px;text-transform:capitalize}.connection-state.connected{color:#4caf50}.connection-state.connecting{color:#ffc107}.connection-state.disconnected,.connection-state.failed{color:#f44336}.image-lightbox-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000d9;inset:0;position:fixed;z-index:var(--z-modal)}.image-lightbox-overlay[data-state=open]{animation:fadeIn var(--transition-base)}.image-lightbox-overlay[data-state=closed]{animation:fadeOut var(--transition-base)}.image-lightbox-content{align-items:center;display:flex;inset:0;justify-content:center;padding:max(var(--space-4),env(safe-area-inset-top)) max(var(--space-4),env(safe-area-inset-right)) max(var(--space-4),env(safe-area-inset-bottom)) max(var(--space-4),env(safe-area-inset-left));position:fixed;z-index:var(--z-modal)}.image-lightbox-img{border-radius:var(--radius-sm);display:block;max-height:100%;max-width:100%;object-fit:contain}.image-lightbox-close{align-items:center;background:#0009;border:none;border-radius:var(--radius-full);color:var(--text-on-accent);cursor:pointer;display:inline-flex;height:var(--touch-target);justify-content:center;position:absolute;right:max(var(--space-3),env(safe-area-inset-right));top:max(var(--space-3),env(safe-area-inset-top));width:var(--touch-target);z-index:1}.image-lightbox-close:hover{background:#000c}@media (prefers-reduced-motion:reduce){.image-lightbox-overlay[data-state=closed],.image-lightbox-overlay[data-state=open]{animation-duration:.01ms}}.voice-bubble{align-items:center;display:flex;gap:10px;margin-top:4px;min-width:200px;width:-webkit-fit-content;width:fit-content}.voice-bubble-play{align-items:center;background:var(--accent);border:none;border-radius:50%;color:#fff;cursor:pointer;display:inline-flex;flex-shrink:0;height:36px;justify-content:center;width:36px}.message-row.own .voice-bubble-play{background:#fff;color:var(--accent)}.voice-bubble-play:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.message-row.own .voice-bubble-play:focus-visible{outline-color:#fff}.voice-bubble-waveform{align-items:center;display:flex;flex:1 1;gap:2px;height:32px;min-width:120px;overflow:hidden}.voice-bubble-bar{background:var(--text-muted);border-radius:2px;flex:1 1;min-width:2px;transition:background-color 80ms linear}.voice-bubble-bar[data-played="1"]{background:var(--accent)}.message-row.own .voice-bubble-bar{background:#ffffff80}.message-row.own .voice-bubble-bar[data-played="1"]{background:#fff}.voice-bubble-duration{font-feature-settings:"tnum";color:var(--text-muted);flex-shrink:0;font-size:.75rem;font-variant-numeric:tabular-nums}.message-row.own .voice-bubble-duration{color:#ffffffd9}@media (prefers-reduced-motion:reduce){.voice-bubble-bar{transition-duration:.01ms}}.video-circle-bubble{background:var(--bg-tertiary);border-radius:50%;cursor:pointer;height:240px;margin-top:4px;overflow:hidden;position:relative;width:240px}.video-circle-bubble video{border-radius:50%;display:block;height:100%;object-fit:cover;width:100%}.video-circle-bubble-ring{left:0;pointer-events:none;position:absolute;top:0}.video-circle-bubble-ring circle{transition:stroke-dashoffset .12s linear}.video-circle-bubble-play-overlay{align-items:center;background:#00000040;border-radius:50%;display:flex;inset:0;justify-content:center;pointer-events:none;position:absolute}.video-circle-bubble-duration{font-feature-settings:"tnum";background:#0000008c;border-radius:12px;bottom:8px;color:#fff;font-size:.75rem;font-variant-numeric:tabular-nums;left:50%;padding:2px 8px;pointer-events:none;position:absolute;transform:translateX(-50%);z-index:1}@media (prefers-reduced-motion:reduce){.video-circle-bubble-ring circle{transition-duration:.01ms}}.reaction-picker{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;box-shadow:0 4px 12px #0003;padding:8px;position:fixed;z-index:100}.reaction-quick-row{display:flex;gap:4px}.reaction-quick-btn{align-items:center;background:#0000;border:none;border-radius:8px;cursor:pointer;display:inline-flex;font-size:1.5rem;height:36px;justify-content:center;width:36px}.reaction-quick-btn:hover{background:var(--bg-tertiary)}.reaction-picker-expanded{margin-top:8px;max-height:320px;overflow:hidden}.message-row{align-items:flex-end;display:flex;gap:8px;padding:4px 16px;padding:var(--chat-density-padding,4px) 16px;position:relative}.message-row.own{flex-direction:row-reverse}.message-row.own .message-avatar.avatar{display:none}.message-row.failed .message-body{border:1px solid var(--warning)}.message-avatar.avatar{flex-shrink:0;font-size:.875rem;height:32px;width:32px}.message-body{border-radius:16px;flex:0 1 auto;max-width:70%;min-width:0;padding:8px 12px}.message-row.own .message-body{background:var(--accent);border-bottom-right-radius:4px;color:#fff}.message-row.other .message-body{background:var(--bg-secondary);border-bottom-left-radius:4px}.message-author-line{align-items:baseline;display:flex;font-size:.875rem;gap:8px;margin-bottom:2px}.author-other{color:var(--text-primary);font-weight:600}.message-time{color:var(--text-muted);font-size:.75rem;font-weight:400}.message-content{word-wrap:break-word;color:var(--text-primary);font-size:.875rem;font-size:calc(.875rem*var(--chat-font-scale, 1));line-height:1.5;overflow-wrap:anywhere}.message-content a{color:var(--accent);text-decoration:underline}.message-row.own .message-content,.message-row.own .message-content .message-deleted{color:#fff}.message-row.own .message-time{color:#fffc}.message-row.own .message-content a{color:#fff;text-decoration:underline}.message-deleted{color:var(--text-muted);font-style:italic}.message-failed-row{color:var(--warning);font-size:.75rem;margin-top:4px}.message-retry-btn{background:#0000;border:none;color:var(--warning);cursor:pointer;font-size:.75rem;padding:0;text-decoration:underline}.message-confirm-row{align-items:center;color:var(--text-secondary);display:flex;font-size:.75rem;gap:8px;margin-top:8px}.confirm-delete-btn{background:var(--danger);border:none;border-radius:4px;color:#fff}.confirm-delete-btn,.confirm-keep-btn{cursor:pointer;font-size:.75rem;font-weight:600;padding:4px 8px}.confirm-keep-btn{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary)}.message-delete-btn{align-items:center;background:var(--bg-tertiary);border:none;border-radius:4px;color:var(--text-secondary);cursor:pointer;display:inline-flex;height:28px;justify-content:center;position:absolute;right:16px;top:4px;width:28px}.message-delete-btn:hover{color:var(--danger)}.message-row.own .message-delete-btn{left:16px;right:auto}.message-image-attachment{margin-top:4px;max-width:400px}.message-thumb{background:var(--bg-tertiary);border-radius:4px;cursor:pointer;display:block;max-height:320px;max-width:100%;transition:opacity .12s ease}.message-thumb:hover{opacity:.9}.message-file-card{align-items:center;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;display:flex;gap:12px;margin-top:4px;max-width:400px;padding:10px 12px}.file-card-icon{align-items:center;background:var(--bg-tertiary);border-radius:4px;color:var(--text-secondary);display:inline-flex;flex-shrink:0;height:40px;justify-content:center;width:40px}.file-card-meta{display:flex;flex:1 1;flex-direction:column;min-width:0}.file-card-name{color:var(--text-primary);font-size:.875rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-card-size{color:var(--text-muted);font-size:.75rem}.file-download-btn{align-items:center;background:var(--bg-tertiary);border-radius:4px;color:var(--text-secondary);display:inline-flex;flex-shrink:0;height:36px;justify-content:center;text-decoration:none;width:36px}.file-download-btn:hover{background:var(--bg-hover);color:var(--accent)}@media (prefers-reduced-motion:reduce){.message-thumb{transition-duration:.01ms}}.message-call-event{align-items:center;background:#ffffff0f;background:var(--system-message-bg,#ffffff0f);border-radius:999px;color:#a0a0a0;color:var(--text-secondary,#a0a0a0);display:flex;font-size:.8rem;gap:.5rem;justify-content:center;margin:.5rem auto;max-width:90%;padding:.4rem .75rem;width:-webkit-fit-content;width:fit-content}.message-call-event-icon{font-size:.9rem}.message-call-event-text{white-space:nowrap}.message-status{align-items:center;display:inline-flex;flex-shrink:0;margin-left:4px}.message-status svg{height:14px;width:14px}.message-status.pending svg,.message-status.sent svg{color:#ffffffb3}.message-status.read svg{color:#54c7ff}.message-reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}.reaction-chip{align-items:center;background:#0000001a;border:1px solid #0000;border-radius:12px;color:inherit;cursor:pointer;display:inline-flex;font-size:.875rem;gap:4px;line-height:1.2;padding:2px 8px}.message-row.own .reaction-chip{background:#fff3;color:#fff}.reaction-chip.mine{background:var(--accent);border-color:var(--accent);color:#fff}.reaction-chip:hover{background:#00000026}.message-row.own .reaction-chip:hover{background:#ffffff47}.message-react-btn{align-items:center;background:var(--bg-tertiary);border:none;border-radius:4px;color:var(--text-secondary);cursor:pointer;display:inline-flex;height:28px;justify-content:center;position:absolute;right:48px;top:4px;width:28px}.message-row.own .message-react-btn{left:48px;right:auto}.message-react-btn:hover{color:var(--accent)}.message-row.pure-video .message-body{background:#0000;border:none;border-radius:0;max-width:none;padding:0}.message-row.other.pure-video .message-body,.message-row.own.pure-video .message-body{background:#0000;border-bottom-left-radius:0;border-bottom-right-radius:0}.chat-input-area{align-items:center;background:var(--bg-secondary);border-top:1px solid var(--border-color);display:flex;gap:8px;outline:none;padding:16px;position:relative}.chat-input-bar{align-items:center;background:var(--input-bg);border:1px solid var(--input-border);border-radius:24px;display:flex;flex:1 1;gap:4px;min-width:0;padding:4px}.chat-input-bar:focus-within{border-color:var(--input-focus)}.chat-input-bar .attach-btn,.chat-input-bar .emoji-picker-btn{background:#0000}.chat-input-textarea{background:#0000;border:0;border-radius:0;color:var(--text-primary);flex:1 1;font-family:inherit;font-size:.875rem;line-height:1.5;max-height:200px;min-height:36px;min-width:0;outline:none;padding:8px 4px;resize:none}.chat-input-textarea:focus,.chat-input-textarea:focus-visible{border:0;box-shadow:none;outline:none;outline-offset:0}.chat-input-textarea::placeholder{color:var(--text-muted)}.emoji-picker-btn,.send-btn{align-items:center;border:none;cursor:pointer;display:inline-flex;flex-shrink:0;height:40px;justify-content:center;width:40px}.emoji-picker-btn{background:#0000;border-radius:8px;color:var(--text-secondary);height:36px;width:36px}.emoji-picker-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.send-btn{background:var(--accent);border-radius:50%;color:#fff}.send-btn:disabled{background:var(--bg-tertiary);color:var(--text-muted);cursor:not-allowed}.char-counter{bottom:24px;color:var(--text-muted);font-size:.75rem;pointer-events:none;position:absolute;right:68px}.char-counter.over-limit{color:var(--danger)}.emoji-picker-popover{bottom:80px;left:16px;position:absolute;z-index:100}.chat-input-area.drag-active{background:var(--bg-hover);outline:2px dashed var(--accent);outline-offset:-2px}.attach-btn{align-items:center;background:#0000;border:none;border-radius:8px;color:var(--text-secondary);cursor:pointer;display:inline-flex;flex-shrink:0;height:36px;justify-content:center;width:36px}.attach-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.staging-card{align-items:center;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;bottom:76px;display:flex;gap:12px;left:16px;padding:8px 12px;position:absolute;right:16px;z-index:5}.staging-thumb{object-fit:cover}.staging-file-icon,.staging-thumb{border-radius:4px;flex-shrink:0;height:48px;width:48px}.staging-file-icon{align-items:center;background:var(--bg-secondary);color:var(--text-secondary);display:inline-flex;justify-content:center}.staging-meta{flex:1 1;min-width:0}.staging-name{color:var(--text-primary);font-size:.875rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.staging-size{color:var(--text-muted);font-size:.75rem}.upload-progress{background:var(--bg-secondary);border-radius:2px;height:4px;margin-top:4px;overflow:hidden}.upload-progress-fill{background:var(--accent);height:100%;transition:width .12s ease}.staging-error{color:var(--danger);font-size:.75rem;margin-top:4px}.cancel-upload-btn{align-items:center;background:#0000;border:none;border-radius:4px;color:var(--text-secondary);cursor:pointer;display:inline-flex;flex-shrink:0;height:28px;justify-content:center;width:28px}.cancel-upload-btn:hover{background:var(--bg-hover);color:var(--danger)}@media (max-width:480px){.chat-input-area{background:#0000;border-top:0;padding:var(--space-2);padding-bottom:var(--space-1)}.chat-input-bar{border:0;box-shadow:0 2px 8px var(--shadow)}.chat-drawer-mobile .chat-input-area{padding:var(--space-2);padding-bottom:var(--space-1)}.chat-input-textarea{font-size:16px}}@media (prefers-reduced-motion:reduce){.upload-progress-fill{transition-duration:.01ms}}.send-btn-cancelling,.send-btn-mic,.send-btn-recording{-webkit-touch-callout:none;touch-action:none;user-select:none;-webkit-user-select:none}.send-btn-mic{background:var(--accent);color:#fff}.send-btn-recording{background:var(--danger);color:#fff;transform:scale(1.05)}.send-btn-cancelling{background:var(--danger);box-shadow:0 0 0 4px #ff3b3040}.chat-input-recording-overlay{align-items:center;background:#ff3b301a;border:1px solid var(--danger);border-radius:24px;color:var(--danger);display:flex;flex:1 1;font-size:.875rem;gap:12px;min-height:44px;padding:8px 16px;touch-action:none}.chat-input-recording-overlay.cancelling{background:#ff3b3040;color:var(--danger);font-weight:600}.chat-input-recording-dot{animation:voice-rec-pulse 1.2s ease-in-out infinite;background:var(--danger);border-radius:50%;flex-shrink:0;height:12px;width:12px}.chat-input-recording-timer{font-feature-settings:"tnum";font-variant-numeric:tabular-nums;font-weight:600;min-width:44px}.chat-input-recording-hint{flex:1 1;opacity:.75;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes voice-rec-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}@media (prefers-reduced-motion:reduce){.chat-input-recording-dot{animation-duration:.01ms}}.chat-input-recording-cancel-btn{align-items:center;background:#0000;border:none;border-radius:50%;color:var(--danger);cursor:pointer;display:inline-flex;flex-shrink:0;height:32px;justify-content:center;width:32px}.chat-input-recording-cancel-btn:hover{background:var(--bg-tertiary)}.chat-input-recording-preview{background:var(--bg-tertiary);border-radius:50%;flex-shrink:0;height:80px;object-fit:cover;width:80px}.chat-drawer{background:var(--bg-secondary);border-left:1px solid var(--border-color);display:flex;flex-direction:column;height:100%;overflow:hidden;transform:translateX(360px);transition:transform .22s cubic-bezier(.4,0,.2,1);width:360px}.chat-drawer.open{transform:translateX(0)}.chat-drawer-header{align-items:center;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);display:flex;flex-shrink:0;height:48px;justify-content:space-between;padding:0 16px}.chat-drawer-title{color:var(--text-primary);font-size:1rem;font-weight:600}.chat-drawer-close{align-items:center;background:#0000;border:none;border-radius:4px;color:var(--text-secondary);cursor:pointer;display:inline-flex;height:32px;justify-content:center;width:32px}.chat-drawer-close:hover{background:var(--bg-hover);color:var(--text-primary)}.chat-drawer-messages{background:var(--bg-primary);flex:1 1;overflow-y:auto;padding:16px 0}.load-older-spinner{padding:24px 16px}.empty-conv{padding:32px 16px}.chat-drawer-input-wrapper{background:var(--bg-secondary);flex-shrink:0}.chat-drawer-mobile{background:var(--bg-secondary);border-radius:var(--radius-lg) var(--radius-lg) 0 0;display:flex;flex-direction:column;width:100vw;z-index:var(--z-modal)}.chat-drawer-handle{background:var(--text-muted);border-radius:var(--radius-full);flex-shrink:0;height:4px;margin:var(--space-3) auto;width:36px}.chat-drawer-mobile .chat-drawer-header{align-items:center;border-bottom:1px solid var(--border-color-light);display:flex;flex-shrink:0;justify-content:space-between;min-height:var(--touch-target);padding:0 var(--space-4)}.chat-drawer-mobile .chat-drawer-title{color:var(--text-primary);font-size:var(--text-lg);font-weight:var(--font-semibold)}.chat-drawer-close-btn{align-items:center;background:#0000;border:0;border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;display:inline-flex;height:var(--touch-target);justify-content:center;margin-left:auto;min-height:var(--touch-target);min-width:var(--touch-target);width:var(--touch-target)}.chat-drawer-close-btn:hover{color:var(--text-primary)}.chat-drawer-body{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden}.chat-drawer-body .chat-drawer-messages,.chat-drawer-body .chat-messages,.chat-drawer-body .messages-list{overscroll-behavior-y:contain;touch-action:pan-y}@media (prefers-reduced-motion:reduce){.chat-drawer-mobile{transition:none}}.call-pip-selfview{aspect-ratio:9/16;aspect-ratio:var(--pip-aspect,9/16);background:var(--call-tile-bg);border:2px solid #ffffff4d;border-radius:var(--radius-md);box-shadow:0 4px 12px #00000080;cursor:grab;height:auto;overflow:hidden;position:absolute;touch-action:none;transition:transform .15s ease-out,box-shadow var(--transition-fast);width:90px;z-index:11}.call-pip-selfview.pip-landscape{width:160px}.call-pip-selfview:active{cursor:grabbing}.call-pip-selfview video{height:100%;object-fit:cover;transform:scaleX(-1);width:100%}.pip-top-left{left:calc(12px + env(safe-area-inset-left, 0px));right:auto}.pip-top-left,.pip-top-right{bottom:auto;top:calc(12px + env(safe-area-inset-top, 0px))}.pip-top-right{left:auto;right:calc(12px + env(safe-area-inset-right, 0px))}.pip-bottom-left{left:calc(12px + env(safe-area-inset-left, 0px));right:auto}.pip-bottom-left,.pip-bottom-right{bottom:calc(12px + env(safe-area-inset-bottom, 0px));top:auto}.pip-bottom-right{left:auto;right:calc(12px + env(safe-area-inset-right, 0px))}@media (orientation:landscape) and (max-height:480px){.call-pip-selfview{height:90px;width:120px}}@media (prefers-reduced-motion:reduce){.call-pip-selfview{transition:none}}.screen-share-modal-overlay{animation:screenShareOverlayFadeIn .18s ease-out;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;inset:0;position:fixed;z-index:200;z-index:var(--z-modal,200)}.screen-share-modal-content{animation:screenShareContentEnter .18s ease-out;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;box-shadow:0 20px 60px #00000080;color:var(--text-primary);left:50%;max-height:calc(100vh - 32px);overflow-y:auto;padding:20px 20px 16px;position:fixed;top:50%;transform:translate(-50%,-50%);width:min(480px,calc(100vw - 32px));z-index:201;z-index:calc(var(--z-modal, 200) + 1)}.screen-share-modal-title{color:var(--text-primary);font-size:1.125rem;font-weight:700;margin:0 0 16px}.screen-share-section-label{color:var(--text-muted);font-size:.75rem;font-weight:600;letter-spacing:.5px;margin:0 0 8px;text-transform:uppercase}.screen-share-quality-grid{grid-gap:8px;display:grid;gap:8px;grid-template-columns:1fr 1fr;margin-bottom:20px}.screen-share-quality-card{align-items:flex-start;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);cursor:pointer;display:flex;flex-direction:column;font:inherit;gap:4px;padding:12px 14px;text-align:left;transition:background .12s ease,border-color .12s ease}.screen-share-quality-card:hover{background:var(--bg-hover)}.screen-share-quality-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.screen-share-quality-card.selected{background:#5865f226;border-color:var(--accent)}.screen-share-quality-title{font-size:.95rem;font-weight:600}.screen-share-quality-bitrate{color:var(--text-muted);font-size:.8rem}.screen-share-audio-toggle{align-items:flex-start;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;cursor:pointer;display:flex;gap:10px;margin-bottom:20px;padding:12px}.screen-share-audio-toggle input[type=checkbox]{cursor:pointer;flex-shrink:0;margin-top:2px}.screen-share-audio-label{display:flex;flex-direction:column;gap:2px}.screen-share-audio-title{color:var(--text-primary);font-size:.9rem;font-weight:600}.screen-share-audio-help{color:var(--text-muted);font-size:.8rem;line-height:1.4}.screen-share-modal-footer{border-top:1px solid var(--border-color);display:flex;gap:8px;justify-content:flex-end;padding-top:12px}.screen-share-btn-primary,.screen-share-btn-secondary{border:none;border-radius:4px;cursor:pointer;font-family:inherit;font-size:.875rem;font-weight:600;padding:8px 16px}.screen-share-btn-primary{background:var(--accent);color:#fff;color:var(--text-on-accent,#fff)}.screen-share-btn-primary:hover{filter:brightness(1.05)}.screen-share-btn-secondary{background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-primary)}.screen-share-btn-secondary:hover{background:var(--bg-hover)}.screen-share-btn-primary:focus-visible,.screen-share-btn-secondary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@keyframes screenShareOverlayFadeIn{0%{opacity:0}to{opacity:1}}@keyframes screenShareContentEnter{0%{opacity:0;transform:translate(-50%,calc(-50% + 8px)) scale(.98)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@media (max-width:480px){.screen-share-modal-content{padding:16px 16px 12px;width:calc(100vw - 16px)}.screen-share-quality-grid{grid-template-columns:1fr}.screen-share-modal-footer{flex-direction:column-reverse}.screen-share-btn-primary,.screen-share-btn-secondary{width:100%}}@media (prefers-reduced-motion:reduce){.screen-share-modal-content,.screen-share-modal-overlay{animation:none}}.call-view{background:var(--call-bg);border-radius:8px;margin-bottom:0;min-height:400px;overflow:hidden;padding:0}.call-controls-overlay{background:linear-gradient(to top,var(--call-overlay-bg) 0,#0000 100%);gap:.75rem;opacity:0;padding:1rem;pointer-events:none;transition:opacity .3s ease;z-index:var(--z-above)}.call-controls-overlay.visible{opacity:1;pointer-events:all}.control-icon-btn{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:var(--call-control-bg);border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;height:48px;justify-content:center;transition:all .2s ease;width:48px}.control-icon-btn:hover{background:var(--call-control-hover);transform:scale(1.1)}.control-icon-btn svg{height:20px;width:20px}.control-icon-btn.mute-btn.muted{background:var(--call-control-mute)}.control-icon-btn.mute-btn.muted:hover{background:var(--call-control-mute-hover)}.control-icon-btn.video-btn.active{background:var(--call-control-video)}.control-icon-btn.video-btn.active:hover{background:var(--call-control-video-hover)}.control-icon-btn.screen-btn.active{background:var(--call-control-invite)}.control-icon-btn.screen-btn.active:hover{background:var(--call-control-invite-hover)}.control-icon-btn.invite-btn{background:var(--call-control-invite)}.control-icon-btn.invite-btn:hover{background:var(--call-control-invite-hover)}.control-icon-btn.leave-btn{background:var(--call-control-leave)}.control-icon-btn.leave-btn:hover{background:var(--call-control-leave-hover)}.participants-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));min-height:400px;padding:1rem}.participant-video-wrapper{aspect-ratio:16/9;background:var(--call-tile-bg);border-radius:8px;min-height:200px;overflow:hidden;position:relative}.participant-video-wrapper video{height:100%;object-fit:cover;width:100%}.participant-info-overlay{align-items:center;background:linear-gradient(to top,var(--call-overlay-bg) 0,#0000 100%);bottom:0;color:#fff;display:flex;font-size:.875rem;gap:.5rem;left:0;padding:.75rem;position:absolute;right:0}.participant-fullscreen-btn{align-items:center;background:#0000008c;border:none;border-radius:4px;color:#fff;cursor:pointer;display:inline-flex;justify-content:center;opacity:0;padding:.4rem;position:absolute;right:.5rem;top:.5rem;transition:opacity .15s ease,background .15s ease;z-index:5}.participant-fullscreen-btn:focus-visible,.participant-video-wrapper:hover .participant-fullscreen-btn{opacity:1}.participant-fullscreen-btn:hover{background:#000000bf}.participant-name{font-weight:500}.mute-indicator,.screen-indicator{font-size:1rem}.participant-audio-wrapper{aspect-ratio:16/9;background:var(--call-tile-bg);border-radius:8px;flex-direction:column;gap:1rem;min-height:200px;padding:2rem}.audio-avatar,.participant-audio-wrapper{align-items:center;display:flex;justify-content:center}.audio-avatar{background:var(--call-control-invite);border-radius:50%;color:#fff;height:80px;width:80px}.audio-avatar svg{height:40px;width:40px}.participant-info{align-items:center;color:#fff;display:flex;flex-direction:column;gap:.5rem}.connecting-indicator{animation:pulse 2s ease-in-out infinite;color:var(--call-connecting-color);font-size:.75rem;font-style:italic;margin-top:.25rem}.empty-call-state{color:var(--call-empty-color);font-size:1rem;grid-column:1/-1;min-height:400px}.empty-call-state,.invite-modal-overlay{align-items:center;display:flex;justify-content:center}.invite-modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:var(--call-overlay-bg);bottom:0;left:0;position:fixed;right:0;top:0;z-index:var(--z-modal)}.invite-modal{background:var(--call-bg);border-radius:8px;box-shadow:0 8px 32px var(--shadow-lg);display:flex;flex-direction:column;max-height:80vh;max-width:500px;overflow:hidden;width:90%}.invite-modal-header{align-items:center;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;padding:1.5rem}.invite-modal-header h3{color:#fff;font-size:1.25rem;margin:0}.close-modal-btn{align-items:center;background:#0000;border:none;border-radius:4px;color:var(--text-secondary);cursor:pointer;display:flex;height:32px;justify-content:center;transition:all .2s;width:32px}.close-modal-btn:hover{background:var(--bg-secondary);color:#fff}.close-modal-btn svg{height:20px;width:20px}.invite-modal-search{border-bottom:1px solid var(--border-color);padding:1rem 1.5rem}.search-input-wrapper{align-items:center;display:flex;position:relative}.search-icon{color:var(--text-muted);height:18px;left:.75rem;pointer-events:none;position:absolute;width:18px}.invite-search-input{background:var(--call-tile-bg);border:1px solid var(--border-color);border-radius:4px;box-sizing:border-box;color:var(--text-primary);font-size:.875rem;padding:.75rem .75rem .75rem 2.5rem;transition:border-color .2s;width:100%}.invite-search-input:focus{border-color:var(--call-connecting-color);outline:none}.invite-search-input::placeholder{color:var(--text-muted)}.invite-modal-content{flex:1 1;overflow-y:auto;padding:1rem 1.5rem}.invite-section{margin-bottom:1rem}.invite-section h4{color:var(--text-secondary);font-size:.875rem;font-weight:600;letter-spacing:.5px;margin:0 0 .75rem;text-transform:uppercase}.invite-friends-list{display:flex;flex-direction:column;gap:.5rem}.invite-friend-item{align-items:center;background:var(--bg-secondary);border-radius:4px;display:flex;justify-content:space-between;padding:.75rem;transition:background .2s}.invite-friend-item:hover{background:var(--bg-primary)}.friend-info{display:flex;flex:1 1;flex-direction:column;gap:.25rem}.friend-name{color:#fff;font-size:.875rem;font-weight:500}.friend-status{align-items:center;color:var(--text-muted);display:flex;font-size:.75rem;gap:.25rem}.friend-status .online{color:var(--success);font-size:.5rem}.friend-status .offline{color:var(--text-muted);font-size:.5rem}.status-dot{border-radius:50%;display:inline-block;flex-shrink:0;height:10px;width:10px}.status-dot.online{background:var(--success)}.status-dot.offline{background:var(--text-muted)}.invite-friend-btn{background:var(--success);border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:.75rem;font-weight:700;padding:.5rem 1rem;transition:background .2s;white-space:nowrap}.invite-friend-btn:hover:not(:disabled){background:var(--call-control-video-hover)}.invite-friend-btn:disabled{background:var(--bg-active);cursor:not-allowed;opacity:.5}.empty-state{padding:2rem 1rem}@media (max-width:768px){.participants-grid{grid-template-columns:1fr}.control-icon-btn{height:40px;width:40px}.control-icon-btn svg{height:18px;width:18px}}.call-view.chat-open{display:grid;grid-template-columns:1fr 360px;grid-template-rows:minmax(0,1fr);overflow:visible}.chat-drawer-toggle-btn{background:var(--call-control-bg);color:#fff}.chat-drawer-toggle-btn:hover{background:var(--call-control-hover);color:#fff}.call-view{height:100%;min-height:0;position:relative}.call-controls-overlay{align-items:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:var(--call-control-bg);bottom:0;display:flex;gap:var(--space-3);justify-content:center;left:0;padding:var(--space-2) max(var(--space-4),env(safe-area-inset-right,0px)) calc(var(--space-2) + env(safe-area-inset-bottom, 0px)) max(var(--space-4),env(safe-area-inset-left,0px));position:absolute;right:0;transition:opacity .22s cubic-bezier(.2,.8,.2,1),transform .22s cubic-bezier(.2,.8,.2,1);z-index:calc(var(--z-above) + 2)}.call-view.controls-visible .call-controls-overlay{opacity:1;pointer-events:all;transform:translateY(0)}.call-view:not(.controls-visible) .call-controls-overlay{opacity:0;pointer-events:none;transform:translateY(12px)}.call-controls-overlay .control-icon-btn,.call-controls-overlay button{align-items:center;border-radius:var(--radius-full);display:inline-flex;height:var(--touch-target);justify-content:center;min-height:var(--touch-target);min-width:var(--touch-target);width:var(--touch-target)}@media (max-width:480px){.call-view{padding-top:env(safe-area-inset-top,0)}}.call-view.layout-speaker .participants-grid{display:flex;flex-direction:column;height:100%}.call-view.layout-speaker .participant-video-wrapper{flex:1 1 auto;min-height:0}.call-view.layout-grid .participants-grid{grid-gap:var(--space-2);display:grid;gap:var(--space-2);grid-template-columns:1fr 1fr;overflow-y:auto;overscroll-behavior-y:contain;padding:var(--space-2)}@media (max-width:480px){.call-view.layout-grid .participants-grid{grid-template-columns:1fr}}.call-view.tile-fullscreen-mode .participant-audio-wrapper.tile-hidden,.call-view.tile-fullscreen-mode .participant-video-wrapper.tile-hidden{display:none}.participant-audio-wrapper.tile-fullscreen,.participant-video-wrapper.tile-fullscreen{border-radius:0;height:100%;inset:0;position:absolute;width:100%;z-index:var(--z-above)}.participant-video-wrapper.tile-fullscreen video{object-fit:contain}.participant-audio-wrapper.active-speaker,.participant-video-wrapper.active-speaker{border:2px solid var(--call-control-invite)}@media (prefers-reduced-motion:reduce){.call-controls-overlay{transform:none;transition:none}.call-view:not(.controls-visible) .call-controls-overlay{transform:none}}@media (hover:none){.call-controls-overlay .tooltip-content,.call-controls-overlay [role=tooltip]{display:none}}.participant-video-wrapper.tile-mirror video{transform:scaleX(-1)}.participant-audio-wrapper.tile-speaking,.participant-video-wrapper.tile-speaking{box-shadow:0 0 12px #43b581;box-shadow:0 0 12px var(--success,#43b581);outline:3px solid #43b581;outline:3px solid var(--success,#43b581);outline-offset:-3px;transition:box-shadow .12s ease,outline-color .12s ease}@media (prefers-reduced-motion:reduce){.participant-audio-wrapper.tile-speaking,.participant-video-wrapper.tile-speaking{transition-duration:.01ms}}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;inset:0;position:fixed;z-index:var(--z-modal)}.modal-overlay[data-state=open]{animation:fadeIn var(--transition-base)}.modal-overlay[data-state=closed]{animation:fadeOut var(--transition-base)}.modal-content{background:var(--bg-primary);border-radius:var(--radius-lg);box-shadow:0 8px 32px var(--shadow-lg);left:50%;max-height:85vh;max-width:90vw;overflow-y:auto;padding:var(--space-6);position:fixed;top:50%;transform:translate(-50%,-50%);width:500px;z-index:var(--z-modal)}.modal-title{color:var(--text-primary);font-size:var(--text-xl);font-weight:var(--font-semibold);margin-bottom:var(--space-3)}.modal-description{color:var(--text-secondary);font-size:var(--text-sm);margin-bottom:var(--space-4)}@media (prefers-reduced-motion:reduce){.modal-overlay[data-state=closed],.modal-overlay[data-state=open]{animation-duration:.01ms}}.settings-overlay{align-items:center;animation:fadeIn .2s ease;background:var(--call-overlay-bg);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.settings-modal{animation:slideUp .3s ease;background:var(--bg-primary);border-radius:8px;box-shadow:0 8px 32px var(--shadow-lg);max-height:90vh;max-width:500px;overflow-y:auto;width:90%}.settings-header{align-items:center;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;padding:1.5rem}.settings-header h2{color:var(--text-primary);font-size:1.5rem;margin:0}.settings-close{background:none;border:none;border-radius:4px;color:var(--text-secondary);cursor:pointer;font-size:1.5rem;padding:.25rem .5rem;transition:background-color .2s,color .2s}.settings-close:hover{background:var(--bg-hover);color:var(--text-primary)}.settings-content{padding:1.5rem}.settings-section{margin-bottom:2rem}.settings-section:last-child{margin-bottom:0}.settings-section h3{color:var(--text-primary);font-size:1.125rem;font-weight:600;margin:0 0 1rem}.settings-item{margin-bottom:1.5rem}.settings-item:last-child{margin-bottom:0}.settings-item label{color:var(--text-primary);display:block}.setting-label{align-items:center;display:flex;justify-content:space-between;margin-bottom:.5rem}.setting-label span:first-child{font-weight:500}.permission-status{color:var(--text-muted);font-size:.875rem}.setting-controls{align-items:center;display:flex;gap:1rem}.toggle-switch{cursor:pointer;display:inline-block;height:24px;position:relative;width:44px}.toggle-switch input{height:0;opacity:0;width:0}.toggle-slider{background-color:var(--bg-tertiary);border-radius:24px;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;transition:.3s}.toggle-slider:before{background-color:#fff;border-radius:50%;bottom:3px;content:"";height:18px;left:3px;position:absolute;transition:.3s;width:18px}.toggle-switch input:checked+.toggle-slider{background-color:var(--accent)}.toggle-switch input:checked+.toggle-slider:before{transform:translateX(20px)}.toggle-switch input:disabled+.toggle-slider{cursor:not-allowed;opacity:.5}.theme-toggle{display:flex;gap:.5rem;margin-top:.5rem}.theme-btn{background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:6px;color:var(--text-primary);cursor:pointer;flex:1 1;font-size:.875rem;padding:.75rem 1rem;transition:all .2s}.theme-btn:hover{background:var(--bg-hover);border-color:var(--accent)}.theme-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.volume-control{align-items:center;display:flex;gap:1rem;margin-top:.5rem}.volume-slider{-webkit-appearance:none;background:var(--bg-tertiary);border-radius:3px;flex:1 1;height:6px;outline:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--accent);border-radius:50%;cursor:pointer;height:18px;-webkit-transition:all .2s;transition:all .2s;width:18px}.volume-slider::-webkit-slider-thumb:hover{background:var(--accent-hover);transform:scale(1.2)}.volume-slider::-moz-range-thumb{background:var(--accent);border:none;border-radius:50%;cursor:pointer;height:18px;-moz-transition:all .2s;transition:all .2s;width:18px}.volume-slider::-moz-range-thumb:hover{background:var(--accent-hover);transform:scale(1.2)}.volume-value{color:var(--text-secondary);font-size:.875rem;min-width:3rem;text-align:right}.request-permission-btn{background:var(--accent);border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:.875rem;padding:.5rem 1rem;transition:background-color .2s}.request-permission-btn:hover:not(:disabled){background:var(--accent-hover)}.request-permission-btn:disabled{cursor:not-allowed;opacity:.5}.device-select{background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:6px;color:var(--text-primary);cursor:pointer;font-size:.875rem;margin-top:.5rem;padding:.75rem;transition:all .2s;width:100%}.device-select:focus,.device-select:hover{border-color:var(--accent)}.device-select:focus{box-shadow:0 0 0 3px #7289da1a;outline:none}.device-loading{color:var(--text-secondary);font-size:.875rem;font-style:italic;margin-top:.5rem}.device-not-supported{display:flex;flex-direction:column;gap:.25rem;margin-top:.5rem}.device-warning{color:var(--text-secondary);font-size:.875rem}.device-hint{color:var(--text-muted);font-size:.75rem;font-style:italic}.settings-modal::-webkit-scrollbar{width:8px}.settings-modal::-webkit-scrollbar-track{background:var(--scrollbar-track)}.settings-modal::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:4px}.settings-modal::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.modal-content.settings-modal-content{max-width:560px;width:90vw}.settings-mobile{animation:settings-mobile-enter var(--transition-base);background:var(--bg-primary);display:flex;flex-direction:column;inset:0;padding-bottom:env(safe-area-inset-bottom,0);position:fixed;z-index:var(--z-modal)}.settings-mobile-header{align-items:center;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);display:flex;gap:var(--space-3);min-height:56px;padding-left:var(--space-4);padding-right:var(--space-4);padding-top:env(safe-area-inset-top,0)}.settings-mobile-header h2{color:var(--text-primary);font-size:var(--text-xl);font-weight:var(--font-semibold);margin:0}.settings-back-btn{align-items:center;background:#0000;border:0;border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;display:inline-flex;height:var(--touch-target);justify-content:center;min-height:var(--touch-target);min-width:var(--touch-target);width:var(--touch-target)}.settings-back-btn:hover{color:var(--text-primary)}.settings-mobile-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior-y:contain;padding:var(--space-4)}@keyframes settings-mobile-enter{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.settings-mobile{animation:none}}.settings-call-section .settings-section-label{color:var(--text-secondary);font-size:var(--text-sm);margin:0 0 var(--space-2)}.settings-call-section .settings-radio-row{align-items:flex-start;cursor:pointer;display:flex;gap:var(--space-3);min-height:var(--touch-target);padding:var(--space-3) 0}.settings-call-section .settings-radio-row input[type=radio]{flex-shrink:0;margin-top:4px}.settings-call-section .settings-radio-row strong{color:var(--text-primary);display:block;font-weight:var(--font-semibold)}.settings-call-section .settings-radio-desc{color:var(--text-secondary);display:block;font-size:var(--text-sm);margin-top:var(--space-1)}.settings-profile-avatar-row{align-items:center;display:flex;gap:var(--space-4);margin-bottom:1.25rem}.settings-profile-avatar-btn{background:none;border:0;border-radius:50%;cursor:pointer;padding:0;transition:opacity .2s}.settings-profile-avatar-btn:hover{opacity:.85}.settings-profile-avatar-btn:disabled{cursor:not-allowed;opacity:.6}.settings-profile-avatar-meta{display:flex;flex-direction:column;gap:var(--space-1)}.settings-profile-upload-btn{align-self:flex-start;background:var(--accent);border:none;border-radius:6px;color:#fff;color:var(--text-on-accent,#fff);cursor:pointer;font-size:.875rem;padding:.5rem 1rem;transition:background-color .2s}.settings-profile-upload-btn:hover:not(:disabled){background:var(--accent-hover)}.settings-profile-upload-btn:disabled{cursor:not-allowed;opacity:.5}.settings-profile-avatar-hint{color:var(--text-muted);font-size:.875rem;font-size:var(--text-sm,.875rem)}.settings-text-input,.settings-textarea{background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-family:inherit;font-size:.875rem;margin-top:.5rem;padding:.625rem .75rem;transition:border-color .2s;width:100%}.settings-text-input:focus,.settings-textarea:focus{border-color:var(--accent);outline:none}.settings-textarea{min-height:64px;resize:vertical}.settings-textarea-counter{color:var(--text-muted);font-size:.75rem;margin-top:.25rem;text-align:right}.settings-profile-save-btn{background:var(--accent);border:none;border-radius:6px;color:#fff;color:var(--text-on-accent,#fff);cursor:pointer;font-size:.9rem;font-weight:500;margin-top:.5rem;padding:.625rem 1.25rem;transition:background-color .2s}.settings-profile-save-btn:hover:not(:disabled){background:var(--accent-hover)}.settings-profile-save-btn:disabled{cursor:not-allowed;opacity:.5}.settings-logout-btn{background:var(--danger);border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.9rem;font-weight:600;margin-top:1rem;padding:.625rem 1rem;transition:background-color .2s,opacity .2s;width:100%}.settings-logout-btn:hover{opacity:.9}.incoming-call-overlay{align-items:center;animation:fadeIn .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#000c;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:var(--z-call-overlay)}.modal-overlay.incoming-call-overlay{z-index:calc(var(--z-call-overlay) - 1)}.modal-content.incoming-call-gradient{animation:incomingCallEnter .4s cubic-bezier(.34,1.56,.64,1);background:linear-gradient(135deg,#667eea,#764ba2);border-radius:24px;box-shadow:0 20px 60px #00000080;max-width:400px;min-width:320px;overflow:hidden;padding:3rem 2rem;width:90%;z-index:var(--z-call-overlay)}@media (max-width:480px){.modal-content.incoming-call-gradient{min-width:280px;padding:2rem 1.5rem}}@keyframes incomingCallEnter{0%{opacity:0;transform:translate(-50%,calc(-50% + 50px)) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@media (prefers-reduced-motion:reduce){.modal-content.incoming-call-gradient{animation:none}}.incoming-call-modal{overflow:hidden}.incoming-call-modal:before{animation:pulse 2s ease-in-out infinite;background:radial-gradient(circle,#ffffff1a 0,#0000 70%);content:"";height:200%;left:-50%;position:absolute;top:-50%;width:200%}@keyframes slideUp{0%{opacity:0;transform:translateY(50px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes pulse{0%,to{opacity:.5;transform:scale(1) rotate(0deg)}50%{opacity:.3;transform:scale(1.1) rotate(180deg)}}.incoming-call-content{align-items:center;display:flex;flex-direction:column;gap:2rem;position:relative;z-index:1}.caller-avatar{align-items:center;animation:avatarPulse 2s ease-in-out infinite;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fff3;border:4px solid #ffffff4d;border-radius:50%;box-shadow:0 10px 30px #0000004d;display:flex;height:120px;justify-content:center;width:120px}@keyframes avatarPulse{0%,to{box-shadow:0 10px 30px #0000004d;transform:scale(1)}50%{box-shadow:0 15px 40px #fff3;transform:scale(1.05)}}.phone-icon{animation:phoneRing 1s ease-in-out infinite;color:#fff;height:60px;width:60px}@keyframes phoneRing{0%,to{transform:rotate(0deg)}25%{transform:rotate(-15deg)}75%{transform:rotate(15deg)}}.caller-info{color:#fff;text-align:center}.caller-name{animation:nameSlide .5s ease;font-size:2rem;font-weight:700;margin:0 0 .5rem;text-shadow:0 2px 10px #0000004d}@keyframes nameSlide{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.call-status{font-size:1rem;font-weight:500;margin:0;opacity:.9;text-shadow:0 1px 5px #0003}.incoming-call-actions{align-items:center;display:flex;gap:2rem}.accept-call-btn,.reject-call-btn{align-items:center;animation:buttonAppear .5s ease;border:none;border-radius:50%;box-shadow:0 4px 15px #0000004d;cursor:pointer;display:flex;font-size:1.5rem;height:64px;justify-content:center;transition:all .3s cubic-bezier(.34,1.56,.64,1);width:64px}@keyframes buttonAppear{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}.accept-call-btn{background:var(--call-control-video);color:#fff}.accept-call-btn:hover{background:var(--call-control-video-hover);box-shadow:0 6px 20px #43b58180;transform:scale(1.1) rotate(5deg)}.accept-call-btn:active{transform:scale(.95)}.reject-call-btn{background:var(--call-control-mute);color:#fff}.reject-call-btn:hover{background:var(--call-control-mute-hover);box-shadow:0 6px 20px #f0474780;transform:scale(1.1) rotate(-5deg)}.reject-call-btn:active{transform:scale(.95)}.accept-call-btn svg,.reject-call-btn svg{height:28px;width:28px}@media (max-width:480px){.incoming-call-modal{min-width:280px;padding:2rem 1.5rem}.caller-avatar{height:100px;width:100px}.phone-icon{height:50px;width:50px}.caller-name{font-size:1.5rem}.accept-call-btn,.reject-call-btn{height:56px;width:56px}.accept-call-btn svg,.reject-call-btn svg{height:24px;width:24px}.incoming-call-actions{gap:1.5rem}}.notification-toast{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:#fffffff2;border:1px solid #0000000f;border-radius:12px;box-shadow:0 8px 32px #0000001f,0 2px 8px #00000014;cursor:pointer;margin-bottom:12px;max-width:420px;min-width:320px;opacity:0;padding:16px;position:fixed;right:20px;top:20px;transform:translateX(400px);transition:all .3s cubic-bezier(.4,0,.2,1);z-index:var(--z-toast)}.notification-toast.visible{opacity:1;transform:translateX(0)}.notification-toast.leaving{opacity:0;transform:translateX(400px)}.dark .notification-toast,[data-theme=dark] .notification-toast{background:#1e1e1ef2;border:1px solid #ffffff1a;box-shadow:0 8px 32px #0006,0 2px 8px #0003}.toast-content{align-items:flex-start;display:flex;gap:12px}.toast-icon{flex-shrink:0;height:24px;margin-top:2px;width:24px}.toast-icon.success{color:#34c759}.toast-icon.error{color:#ff3b30}.toast-icon.warning{color:#ff9500}.toast-icon.info{color:#007aff}.toast-message{flex:1 1;min-width:0}.toast-title{font-size:14px;font-weight:600;line-height:1.4;margin-bottom:4px}.dark .toast-title,.toast-title,[data-theme=dark] .toast-title{color:var(--text-primary)}.toast-description{word-wrap:break-word;color:var(--text-muted);font-size:13px;line-height:1.4}.dark .toast-description,[data-theme=dark] .toast-description{color:var(--text-secondary)}.toast-close{align-items:center;background:none;border:none;border-radius:4px;color:var(--text-muted);cursor:pointer;display:flex;flex-shrink:0;height:24px;justify-content:center;padding:4px;transition:all .2s;width:24px}.dark .toast-close:hover,.toast-close:hover,[data-theme=dark] .toast-close:hover{background:var(--bg-hover);color:var(--text-primary)}.toast-close:active{transform:scale(.95)}.notification-toast.success{border-left:3px solid #34c759}.notification-toast.error{border-left:3px solid #ff3b30}.notification-toast.warning{border-left:3px solid #ff9500}.notification-toast.info{border-left:3px solid #007aff}.notification-container{display:flex;flex-direction:column;gap:12px;pointer-events:none;position:fixed;right:20px;top:20px;z-index:var(--z-toast)}.notification-container>*{pointer-events:auto}@media (max-width:480px){.notification-toast{left:20px;max-width:calc(100vw - 40px);min-width:calc(100vw - 40px);right:20px;transform:translateY(-100px)}.notification-toast.visible{transform:translateY(0)}.notification-toast.leaving{transform:translateY(-100px)}}@media (prefers-reduced-motion:reduce){.notification-toast,.toast-close{transition-duration:.01ms}}.conversations-sidebar{background:var(--bg-secondary);border-right:1px solid var(--border-color);display:flex;flex-direction:column;height:100%;overflow:hidden;width:280px}.sidebar-header{align-items:center;border-bottom:1px solid var(--border-color);display:flex;flex-shrink:0;justify-content:space-between;padding:24px 16px 16px}.sidebar-header h2{color:var(--text-primary);font-size:1rem;font-weight:600;margin:0}.conv-avatar.avatar-dm,.new-group-btn,.unread-badge{color:#fff}.new-group-btn{align-items:center;background:var(--accent);border:none;border-radius:4px;cursor:pointer;display:inline-flex;font-size:.75rem;font-weight:600;gap:4px;padding:4px 8px}.new-group-btn:hover{opacity:.9}.sidebar-friends-entry{border-bottom:1px solid var(--border-color);flex-shrink:0;padding:8px 16px}.friends-page-btn{align-items:center;background:#0000;border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);cursor:pointer;display:inline-flex;font-size:.875rem;font-weight:600;gap:8px;justify-content:center;min-height:44px;padding:10px 12px;width:100%}.friends-page-btn:hover{background:var(--bg-hover)}.sidebar-list{flex:1 1;overflow-y:auto;padding:8px 0}.sidebar-section-header{color:var(--text-muted);font-size:.75rem;font-weight:600;letter-spacing:.5px;padding:16px 16px 4px;text-transform:uppercase}.empty-state{font-size:.875rem;padding:48px 16px}.empty-state-sm{color:var(--text-muted);font-size:.75rem;padding:8px 16px}.conversation-row{align-items:center;border-left:3px solid #0000;cursor:pointer;display:flex;gap:8px;height:64px;padding:8px 16px;transition:background .12s ease}.conversation-row.active,.conversation-row:hover{background:var(--bg-hover)}.conversation-row.active{border-left-color:var(--accent)}.conv-avatar{align-items:center;border-radius:50%;display:flex;flex-shrink:0;font-weight:600;height:40px;justify-content:center;width:40px}.conv-avatar.avatar-dm{background:var(--accent);font-size:1rem}.conv-avatar.avatar-group{background:var(--bg-tertiary);color:var(--text-secondary);font-size:.875rem}.conv-body{flex:1 1;min-width:0}.conv-name{color:var(--text-primary);font-size:.875rem;font-weight:600}.conv-name,.conv-preview{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.conv-preview{color:var(--text-muted);font-size:.75rem}.conv-meta{align-items:flex-end;display:flex;flex-direction:column;flex-shrink:0;gap:4px}.conv-time{color:var(--text-muted);font-size:.75rem}.unread-badge{align-items:center;background:var(--danger);border-radius:10px;display:inline-flex;font-size:.75rem;font-weight:600;height:20px;justify-content:center;min-width:20px;padding:0 6px}.friend-row{border-left:3px solid #0000;gap:12px;min-height:44px;padding:8px 16px;transition:background .12s ease}.friend-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.friend-row-name{color:var(--text-primary);font-size:.875rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (prefers-reduced-motion:reduce){.conversation-row{transition-duration:.01ms}}.sidebar-connection-status{align-items:center;background:var(--bg-secondary);border-top:1px solid #ffffff0f;border-top:1px solid var(--border-subtle,#ffffff0f);color:#a0a0a0;color:var(--text-secondary,#a0a0a0);display:flex;flex-shrink:0;font-size:.75rem;gap:.5rem;padding:.4rem .75rem}.sidebar-connection-dot{background:#f04747;background:var(--status-disconnected,#f04747);border-radius:50%;flex-shrink:0;height:8px;transition:background .12s ease;width:8px}.sidebar-connection-status[data-connected=true] .sidebar-connection-dot{background:#43b581;background:var(--status-connected,#43b581)}.sidebar-connection-status[data-reconnecting=true] .sidebar-connection-dot{animation:sidebar-conn-pulse 1.2s ease-in-out infinite;background:#faa61a;background:var(--warning,#faa61a)}@keyframes sidebar-conn-pulse{0%,to{opacity:1}50%{opacity:.4}}@media (prefers-reduced-motion:reduce){.sidebar-connection-status[data-reconnecting=true] .sidebar-connection-dot{animation-duration:.01ms}}.sidebar-connection-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (prefers-reduced-motion:reduce){.sidebar-connection-dot{transition-duration:.01ms}}.sidebar-mobile-topbar{display:none}@media (max-width:480px){.conversations-sidebar{border-right:0;height:100%;width:100%}.sidebar-mobile-topbar{-webkit-app-region:no-drag;align-items:center;background:var(--bg-tertiary);border-bottom:1px solid var(--border-color);display:flex;flex-shrink:0;gap:8px;justify-content:space-between;padding:max(8px,env(safe-area-inset-top)) 12px 8px}.sidebar-mobile-topbar-user{align-items:center;display:inline-flex;gap:8px;min-width:0}.sidebar-mobile-topbar-username{color:var(--text-primary);font-size:.9375rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-mobile-topbar-actions{align-items:center;display:inline-flex;flex-shrink:0;gap:4px}.sidebar-mobile-topbar-btn{align-items:center;background:#0000;border:0;border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;display:inline-flex;height:var(--touch-target);justify-content:center;min-height:var(--touch-target);min-width:var(--touch-target);transition:background .12s ease,color .12s ease;width:var(--touch-target)}.sidebar-mobile-topbar-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.sidebar-mobile-topbar-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.sidebar-mobile-topbar-logout:hover{color:var(--danger)}}@media (prefers-reduced-motion:reduce){.sidebar-mobile-topbar-btn{transition-duration:.01ms}}.drawer-overlay{background:#00000080;inset:0}.drawer-content,.drawer-overlay{position:fixed;z-index:var(--z-drawer)}.drawer-content{background:var(--bg-secondary);display:flex;flex-direction:column;overflow:hidden}.drawer-left{left:0}.drawer-left,.drawer-right{height:100%;top:0;width:min(85vw,360px)}.drawer-right{right:0}.drawer-bottom{border-radius:var(--radius-lg) var(--radius-lg) 0 0;bottom:0}.drawer-bottom,.drawer-top{left:0;max-height:90vh;right:0}.drawer-top{border-radius:0 0 var(--radius-lg) var(--radius-lg);top:0}.group-settings-panel{background:var(--bg-primary);display:flex;flex-direction:column;height:100%}.group-settings-header{align-items:center;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);display:flex;flex-shrink:0;gap:12px;height:48px;padding:0 16px}.group-settings-header h2{color:var(--text-primary);font-size:1rem;font-weight:600;margin:0}.back-btn{align-items:center;background:#0000;border:none;border-radius:4px;color:var(--text-secondary);cursor:pointer;display:inline-flex;height:32px;justify-content:center;width:32px}.back-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.group-settings-body{flex:1 1;overflow-y:auto;padding:24px 16px}.settings-section{margin-bottom:32px}.settings-label{color:var(--text-muted);display:block;font-size:.75rem;font-weight:600;letter-spacing:.5px;margin-bottom:8px;text-transform:uppercase}.rename-row{align-items:stretch;display:flex;gap:8px}.member-list{display:flex;flex-direction:column;gap:4px}.member-row{align-items:center;border-radius:4px;display:flex;gap:12px;padding:8px 12px}.member-row:hover{background:var(--bg-hover)}.member-avatar{align-items:center;background:var(--accent);border-radius:50%;display:inline-flex;flex-shrink:0;font-size:.875rem;font-weight:600;height:32px;justify-content:center;width:32px}.member-name{color:var(--text-primary);flex:1 1;font-size:.875rem}.role-badge{background:var(--accent);border-radius:4px;font-size:.75rem;font-weight:600;padding:2px 6px}.btn-danger,.btn-primary,.member-avatar,.role-badge{color:#fff}.icon-btn-ghost{align-items:center;background:#0000;border:none;border-radius:4px;color:var(--text-secondary);cursor:pointer;display:inline-flex;height:28px;justify-content:center;width:28px}.icon-btn-ghost:hover{background:var(--bg-tertiary);color:var(--danger)}.btn-danger,.btn-primary,.btn-secondary{border:none;border-radius:4px;cursor:pointer;font-size:.875rem;font-weight:600;padding:8px 16px}.btn-danger{background:var(--danger)}.btn-danger.full-width{width:100%}.confirm-actions,.confirm-inline{display:inline-flex;gap:8px}.leave-confirm p{color:var(--text-secondary);font-size:.875rem;margin:0 0 12px}.empty-list{color:var(--text-muted);font-size:.875rem;padding:16px 12px}.modal-content.group-settings-modal-content{max-width:520px;width:90vw}.group-settings-panel-body{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-4) 0}@media (max-width:480px){.group-settings-panel-body{padding:var(--space-4);padding-bottom:env(safe-area-inset-bottom,0)}}.chat-pane{background:var(--bg-primary);display:flex;flex-direction:column;height:100%;overflow:hidden;position:relative}.chat-pane.empty{align-items:center;justify-content:center}.chat-pane-header{align-items:center;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);display:flex;flex-shrink:0;height:48px;padding:0 16px}.conv-title{color:var(--text-primary);font-size:1rem;font-weight:600}.conv-members{color:var(--text-muted);font-size:.75rem;font-weight:400}.messages-list{background:var(--bg-primary);flex:1 1;overflow-y:auto;padding:16px 0}.load-older-spinner{padding:32px 16px}.history-beginning,.load-older-spinner{color:var(--text-muted);font-size:.75rem;text-align:center}.history-beginning{border-bottom:1px solid var(--border-color);margin-bottom:16px;padding:16px}.empty-conv{color:var(--text-muted);font-size:.875rem;padding:48px 16px;text-align:center}.jump-to-latest-btn{background:var(--accent);border:none;border-radius:16px;bottom:96px;color:var(--text-on-accent);cursor:pointer;font-size:.75rem;font-weight:600;left:50%;padding:6px 16px;position:absolute;transform:translateX(-50%);z-index:10}.chat-pane-header{justify-content:space-between}.chat-pane-settings-btn{align-items:center;background:#0000;border:none;border-radius:4px;color:var(--text-secondary);cursor:pointer;display:inline-flex;height:32px;justify-content:center;width:32px}.chat-pane-settings-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.chat-pane-header-actions{align-items:center;display:inline-flex;flex-shrink:0;gap:4px}.chat-pane-call-btn{align-items:center;background:#0000;border:none;border-radius:4px;color:var(--text-secondary);cursor:pointer;display:inline-flex;height:32px;justify-content:center;transition:background .2s,color .2s;width:32px}.chat-pane-call-btn:hover:not(:disabled){background:var(--bg-hover);color:var(--text-primary)}.chat-pane-call-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.chat-pane-call-btn:disabled,.chat-pane-call-btn[aria-disabled=true]{cursor:not-allowed;opacity:.4;pointer-events:none}.chatpane-back-btn{-webkit-app-region:no-drag;align-items:center;background:#0000;border:0;border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;display:none;height:var(--touch-target);justify-content:center;min-height:var(--touch-target);min-width:var(--touch-target);width:var(--touch-target)}.chatpane-back-btn:hover{color:var(--text-primary)}@media (max-width:480px){.chatpane-back-btn{display:inline-flex}.chat-pane-call-btn,.chat-pane-settings-btn{height:var(--touch-target);min-height:var(--touch-target);min-width:var(--touch-target);width:var(--touch-target)}.chat-pane{min-height:0;width:100%}.chat-pane .chat-messages,.chat-pane .messages-list{overscroll-behavior-y:contain;touch-action:pan-y}}@media (prefers-reduced-motion:reduce){.chat-pane-call-btn,.chat-pane-settings-btn{transition-duration:.01ms}}.modal-content.newgroup-modal-content{max-width:440px}.new-group-modal-body{overflow-y:auto;padding:0 0 var(--space-2)}.form-label,.form-section-label{color:var(--text-muted);display:block;font-size:.75rem;font-weight:600;letter-spacing:.5px;margin:16px 0 8px;text-transform:uppercase}.form-input{background:var(--input-bg);border:1px solid var(--input-border);border-radius:4px;box-sizing:border-box;color:var(--text-primary);font-size:.875rem;outline:none;padding:10px 12px;width:100%}.form-input:focus{border-color:var(--input-focus)}.friend-list{display:flex;flex-direction:column;gap:4px;max-height:280px;overflow-y:auto;padding:4px 0}.friend-list-empty{color:var(--text-muted);font-size:.875rem;padding:16px;text-align:center}.friend-row{align-items:center;border-radius:4px;color:var(--text-primary);cursor:pointer;display:flex;font-size:.875rem;gap:8px;padding:8px 12px}.friend-row.selected,.friend-row:hover{background:var(--bg-hover)}.new-group-modal-footer{border-top:1px solid var(--border-color);display:flex;gap:8px;justify-content:flex-end;margin-top:var(--space-4);padding-top:var(--space-4)}.btn-primary,.btn-secondary{border:none;border-radius:4px;cursor:pointer;font-size:.875rem;font-weight:600;padding:8px 16px}.btn-primary{background:var(--accent);color:#fff}.btn-primary:disabled{background:var(--bg-tertiary);color:var(--text-muted);cursor:not-allowed}.btn-secondary{background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-primary)}.ios-install-banner{align-items:center;background:var(--bg-tertiary);border-bottom:1px solid var(--border-color);color:var(--text-primary);display:flex;flex-shrink:0;font-size:.8125rem;gap:10px;padding:max(10px,env(safe-area-inset-top)) 14px 10px}.ios-install-banner-icon{color:var(--accent);flex-shrink:0}.ios-install-banner-text{flex:1 1;line-height:1.35;min-width:0}.ios-install-banner-close{align-items:center;background:#0000;border:0;border-radius:4px;border-radius:var(--radius-sm,4px);color:var(--text-secondary);cursor:pointer;display:inline-flex;flex-shrink:0;height:28px;justify-content:center;width:28px}.ios-install-banner-close:hover{background:var(--bg-hover);color:var(--text-primary)}.app{display:flex;flex-direction:column;min-height:100vh}.header{-webkit-app-region:drag;align-items:center;background:var(--bg-tertiary);border-bottom:1px solid var(--border-color);box-shadow:0 2px 4px var(--shadow);display:flex;justify-content:space-between;padding:calc(1rem + 36px) 2rem 1rem;transition:background-color .2s ease,border-color .2s ease;-webkit-user-select:none;user-select:none}@supports (-webkit-app-region:drag){@media not (prefers-color-scheme:dark){.header{padding-top:calc(1rem + 10px)}}}.logo{align-items:center;animation:fadeIn .3s ease;color:var(--accent);display:flex;font-size:1.5rem;font-weight:700;gap:.75rem;transition:color .2s ease}.logo-img{display:block;height:2rem;width:auto}.header .logo,.header .logo-img,.header .logout-btn,.header .room-info,.header .settings-btn,.header .user-info,.header button,.header span{-webkit-app-region:no-drag}.header button{cursor:pointer}.room-info,.user-info{align-items:center;display:flex;gap:1rem}.user-info{border-left:1px solid #40444b;padding-left:1rem}.user-info span{color:var(--text-primary);font-weight:500}.settings-btn{align-items:center;background:#0000;border:none;border-radius:4px;color:var(--text-secondary);cursor:pointer;display:flex;font-size:1.25rem;justify-content:center;padding:.5rem .75rem;transition:all .2s ease}.settings-btn:hover{color:var(--text-primary);transform:rotate(90deg)}.logout-btn{background:var(--danger);border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:.875rem;font-weight:700;padding:.5rem 1rem;transition:all .2s ease}.logout-btn:hover{background:#d73737;box-shadow:0 2px 4px var(--shadow);transform:translateY(-1px)}.room-input{display:flex;gap:.5rem}.room-input input{background:#40444b;border:1px solid #2f3136;border-radius:4px;color:#dcddde;font-size:.9rem;padding:.5rem 1rem}.room-input input::placeholder{color:#72767d}.room-input button{background:#7289da;border:none;border-radius:4px;color:#fff;cursor:pointer;font-weight:700;padding:.5rem 1.5rem;transition:background .2s}.room-input button:hover{background:#677bc4}.room-input button:disabled{background:#40444b;cursor:not-allowed}.main-content{display:flex;flex:1 1;flex-direction:column;gap:1rem;overflow:hidden;padding:1rem}.app-layout{grid-gap:1rem;animation:slideIn .3s ease;display:grid;gap:1rem;grid-template-columns:280px 1fr;height:100%;overflow:hidden}@keyframes slideIn{0%{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}@media (max-width:480px){.header{display:none}.app{height:100dvh;min-height:0;overflow:hidden}.main-content{gap:0;padding:0}.app-layout{gap:0;grid-template-columns:1fr;grid-template-rows:1fr;height:100%}.app-layout .main-pane{border-radius:0;height:98%}.app-layout.app-layout--mobile-chat .conversations-sidebar,.app-layout:not(.app-layout--mobile-chat) .main-pane{display:none}.controls{gap:.5rem}.control-btn{font-size:.875rem;padding:.5rem 1rem}.videos-container{gap:1rem;grid-template-columns:1fr}}.friends-panel{height:calc(100vh - 120px);overflow-y:auto}.call-panel{gap:1rem;overflow-y:auto}.call-panel,.main-pane{display:flex;flex-direction:column;height:calc(100vh - 120px)}.main-pane{background:var(--bg-primary);border-radius:8px;overflow:hidden}.controls{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}.control-btn{align-items:center;border:none;border-radius:8px;box-shadow:0 2px 4px var(--shadow);cursor:pointer;display:flex;font-size:1rem;font-weight:700;gap:.5rem;padding:.75rem 1.5rem;transition:all .2s ease}.control-btn:hover{box-shadow:0 4px 8px var(--shadow-lg);transform:translateY(-2px)}.control-btn:active{transform:translateY(0)}.mute-btn{background:var(--danger);color:#fff}.mute-btn:hover{background:#d73737}.mute-btn.unmuted{background:var(--success)}.mute-btn.unmuted:hover{background:#3ca374}.share-screen-btn{background:var(--accent);color:#fff}.share-screen-btn:hover{background:var(--accent-hover)}.share-screen-btn.active{background:var(--danger)}.share-screen-btn.active:hover{background:#d73737}.videos-container{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:1rem}.video-wrapper{animation:scaleIn .3s ease;aspect-ratio:16/9;background:var(--bg-tertiary);border-radius:8px;box-shadow:0 4px 8px var(--shadow);overflow:hidden;position:relative;transition:transform .2s ease,box-shadow .2s ease}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.video-wrapper:hover{box-shadow:0 6px 12px var(--shadow-lg);transform:translateY(-2px)}.video-wrapper video{height:100%;object-fit:cover;width:100%}.video-label{align-items:center;background:linear-gradient(0deg,#000c,#0000);bottom:0;display:flex;font-size:.9rem;justify-content:space-between;left:0;padding:.5rem 1rem;position:absolute;right:0}.screen-sharing-indicator{background:#f04747;border-radius:4px;color:#fff;font-size:.75rem;font-weight:700;padding:.25rem .5rem}.empty-state{animation:fadeIn .5s ease;color:var(--text-muted);padding:4rem 2rem;text-align:center}.empty-state h2{color:var(--text-primary);margin-bottom:1rem}.audio-only-indicator{align-items:center;background:var(--bg-tertiary);border-radius:8px;box-shadow:0 4px 8px var(--shadow);display:flex;flex-direction:column;gap:1rem;justify-content:center;min-height:200px;padding:2rem}.audio-icon{font-size:4rem;opacity:.8}.audio-label{align-items:center;color:var(--text-primary);display:flex;flex-direction:column;font-weight:500;gap:.5rem}.audio-badge{background:var(--bg-secondary);border-radius:12px;color:var(--text-secondary);font-size:.875rem;padding:.25rem .75rem}.call-panel::-webkit-scrollbar,.friends-panel::-webkit-scrollbar{width:8px}.call-panel::-webkit-scrollbar-track,.friends-panel::-webkit-scrollbar-track{background:var(--scrollbar-track)}.call-panel::-webkit-scrollbar-thumb,.friends-panel::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:4px}.call-panel::-webkit-scrollbar-thumb:hover,.friends-panel::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}:focus-visible{border-radius:var(--radius-sm);outline:2px solid var(--accent);outline-offset:2px}.accept-call-btn:focus-visible,.call-controls-overlay button:focus-visible,.reject-call-btn:focus-visible{border-radius:var(--radius-full);outline-offset:4px}@media (prefers-reduced-motion:reduce){:not(.preserve-motion),:not(.preserve-motion):after,:not(.preserve-motion):before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}@media (hover:none) and (pointer:coarse){body{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.message-content,.message-deleted,[contenteditable=true],input:not([type]),input[type=text],textarea{-webkit-touch-callout:default;-webkit-user-select:text;user-select:text}}.tooltip-content{background:var(--bg-tertiary);border-radius:var(--radius-sm);box-shadow:0 4px 12px var(--shadow-lg);color:var(--text-primary);font-size:var(--text-xs);font-weight:var(--font-medium);max-width:280px;padding:var(--space-1) var(--space-3);-webkit-user-select:none;user-select:none;z-index:var(--z-toast)}.tooltip-arrow{fill:var(--bg-tertiary)}.tooltip-content[data-state=delayed-open]{animation:fadeIn var(--transition-fast)}.tooltip-content[data-state=closed]{animation:fadeOut var(--transition-fast)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.tooltip-content[data-state=closed],.tooltip-content[data-state=delayed-open]{animation-duration:.01ms}}
/*# sourceMappingURL=main.c5f41bd8.css.map*/