.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);border:none;border-radius:var(--radius-md);font-weight:600;cursor:pointer;transition:background var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);white-space:nowrap}.btn:active:not(:disabled){transform:scale(.98)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn--sm{padding:6px 12px;font-size:var(--fs-xs)}.btn--md{padding:10px 18px;font-size:var(--fs-sm)}.btn--lg{padding:13px 24px;font-size:var(--fs-base)}.btn--full{width:100%}.btn--primary{background:var(--color-accent);color:var(--color-accent-contrast)}.btn--primary:hover:not(:disabled){background:var(--color-accent-hover)}.btn--secondary{background:var(--color-surface-raised);color:var(--color-text);border:1px solid var(--color-border)}.btn--secondary:hover:not(:disabled){border-color:var(--color-teal)}.btn--ghost{background:transparent;color:var(--color-text-muted)}.btn--ghost:hover:not(:disabled){color:var(--color-text);background:var(--color-surface-raised)}.btn--danger{background:var(--color-danger-bg);color:var(--color-danger)}.btn--danger:hover:not(:disabled){background:#ff6b6b38}.btn__spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.field{display:flex;flex-direction:column;gap:var(--space-1);text-align:left}.field__label{font-size:var(--fs-xs);color:var(--color-text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}.field__input{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:11px 14px;color:var(--color-text);font-size:var(--fs-base);font-family:var(--font-body);transition:border-color var(--transition-fast)}.field__input:focus{border-color:var(--color-accent);outline:none}.field__error{color:var(--color-danger);font-size:var(--fs-xs)}.avatar{border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--color-surface-raised);display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:600;color:var(--color-text);position:relative}.avatar--sm{width:32px;height:32px;font-size:var(--fs-xs)}.avatar--md{width:44px;height:44px;font-size:var(--fs-sm)}.avatar--lg{width:88px;height:88px;font-size:var(--fs-xl)}.avatar__status{position:absolute;bottom:0;right:0;width:11px;height:11px;border-radius:50%;border:2px solid var(--color-surface)}.avatar__status--online{background:var(--color-teal)}.avatar__status--offline{background:var(--color-text-faint)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a0b1099;display:flex;align-items:center;justify-content:center;z-index:100;padding:var(--space-4)}.modal{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:440px;padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4)}.modal__header{display:flex;align-items:center;justify-content:space-between}.modal__close{background:none;border:none;color:var(--color-text-muted);cursor:pointer;font-size:var(--fs-lg);line-height:1}.spinner-wrap{display:flex;align-items:center;justify-content:center;padding:var(--space-6)}.spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--color-border);border-top-color:var(--color-accent);animation:spin .8s linear infinite}.sidebar{width:var(--sidebar-width);flex-shrink:0;background:var(--color-surface);border-right:1px solid var(--color-border);display:flex;flex-direction:column;align-items:center;padding:var(--space-4) 0;gap:var(--space-5)}.sidebar__brand-mark{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--color-accent);color:var(--color-accent-contrast);font-family:var(--font-display);font-weight:700;font-size:var(--fs-md);display:flex;align-items:center;justify-content:center}.sidebar__nav{display:flex;flex-direction:column;gap:var(--space-2);flex:1}.sidebar__link{width:48px;height:48px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:var(--fs-md);color:var(--color-text-muted);transition:background var(--transition-fast),color var(--transition-fast)}.sidebar__link:hover{background:var(--color-surface-raised);color:var(--color-text)}.sidebar__link--active{background:var(--color-surface-raised);color:var(--color-accent);box-shadow:inset 0 0 0 1px var(--color-border)}.sidebar__profile{margin-top:auto}.topbar{height:64px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-5);border-bottom:1px solid var(--color-border);background:var(--color-surface)}.topbar__title{display:flex;align-items:center;gap:var(--space-3)}.topbar__meta{font-size:var(--fs-xs);color:var(--color-text-muted)}.topbar__actions{display:flex;align-items:center;gap:var(--space-2)}.main-content{flex:1;display:flex;overflow:hidden}@media (max-width: 720px){.app-shell{flex-direction:column}.sidebar{width:100%;height:64px;flex-direction:row;border-right:none;border-top:1px solid var(--color-border);order:2;padding:0 var(--space-3)}.sidebar__nav{flex-direction:row;flex:1;justify-content:space-around}.sidebar__brand,.sidebar__profile{display:none}.main-content{order:1}}.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--color-bg);padding:var(--space-5)}.auth-card{width:100%;max-width:400px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:var(--space-4)}.auth-card__logo{display:flex;justify-content:center;margin-bottom:var(--space-2);color:var(--color-text)}.auth-card__title{text-align:center;font-size:var(--fs-xl)}.auth-card__subtitle{text-align:center;color:var(--color-text-muted);font-size:var(--fs-sm);margin-top:calc(var(--space-1) * -1)}.auth-card form{display:flex;flex-direction:column;gap:var(--space-3)}.auth-card__error{background:var(--color-danger-bg);color:var(--color-danger);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);font-size:var(--fs-sm)}.auth-card__success{background:#4cd9c01f;color:var(--color-teal);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);font-size:var(--fs-sm)}.auth-card__footer{text-align:center;font-size:var(--fs-sm);color:var(--color-text-muted)}.auth-card__divider{display:flex;align-items:center;gap:var(--space-3);color:var(--color-text-faint);font-size:var(--fs-xs)}.auth-card__divider:before,.auth-card__divider:after{content:"";flex:1;height:1px;background:var(--color-border)}.chat-list{width:var(--chatlist-width);flex-shrink:0;border-right:1px solid var(--color-border);display:flex;flex-direction:column;background:var(--color-bg)}.chat-list__search{padding:var(--space-4)}.chat-list__search input{width:100%;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:9px 16px;color:var(--color-text);font-size:var(--fs-sm)}.chat-list__items{overflow-y:auto;flex:1}.chat-list__item{width:100%;display:flex;gap:var(--space-3);align-items:center;padding:var(--space-3) var(--space-4);background:none;border:none;text-align:left;cursor:pointer;border-bottom:1px solid transparent}.chat-list__item:hover{background:var(--color-surface)}.chat-list__item--active{background:var(--color-surface-raised);box-shadow:inset 3px 0 0 var(--color-accent)}.chat-list__item-body{flex:1;min-width:0}.chat-list__item-top,.chat-list__item-bottom{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2)}.chat-list__item-name{font-weight:600;font-size:var(--fs-sm)}.chat-list__item-time{font-size:var(--fs-xs);color:var(--color-text-faint);font-family:var(--font-mono)}.chat-list__item-preview{font-size:var(--fs-xs);color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-list__badge{background:var(--color-accent);color:var(--color-accent-contrast);border-radius:var(--radius-pill);font-size:var(--fs-xs);font-weight:700;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;padding:0 5px}.chat-list__empty{padding:var(--space-6) var(--space-4);color:var(--color-text-muted);font-size:var(--fs-sm);text-align:center}.chat-window{flex:1;display:flex;flex-direction:column;min-width:0}.chat-window__messages{flex:1;overflow-y:auto;padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2)}.chat-window__empty{margin:auto;color:var(--color-text-muted);font-size:var(--fs-sm)}.bubble-row{display:flex;justify-content:flex-start}.bubble-row--own{justify-content:flex-end}.bubble{position:relative;max-width:min(520px,72%);background:var(--color-bubble-other);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3)}.bubble--own{background:var(--color-bubble-own);border-color:var(--color-bubble-own-border)}.bubble--deleted{font-style:italic;color:var(--color-text-faint);background:transparent;border-style:dashed}.bubble__reply{border-left:3px solid var(--color-teal);padding-left:var(--space-2);margin-bottom:var(--space-1);font-size:var(--fs-xs)}.bubble__reply-author{display:block;color:var(--color-teal);font-weight:600}.bubble__reply-text{color:var(--color-text-muted)}.bubble__forwarded{font-size:var(--fs-xs);color:var(--color-text-faint);font-style:italic;margin-bottom:var(--space-1)}.bubble__text{font-size:var(--fs-base);white-space:pre-wrap;word-break:break-word}.bubble__media{display:flex;align-items:center;gap:var(--space-2);font-size:var(--fs-sm)}.bubble__media-icon{font-size:var(--fs-lg)}.bubble__meta{display:flex;justify-content:flex-end;gap:var(--space-1);margin-top:var(--space-1);font-family:var(--font-mono);font-size:.7rem;color:var(--color-text-faint)}.bubble__ticks--read{color:var(--color-teal)}.bubble__actions{position:absolute;top:-14px;right:var(--space-2);display:none;gap:2px;background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:2px 4px}.bubble:hover .bubble__actions{display:flex}.bubble__actions button{background:none;border:none;cursor:pointer;font-size:var(--fs-xs);padding:2px 4px}.typing-indicator{padding:0 var(--space-5) var(--space-1);font-size:var(--fs-xs);color:var(--color-text-muted);display:flex;align-items:center;gap:var(--space-2);min-height:20px}.typing-indicator__dots{display:inline-flex;gap:3px}.typing-indicator__dots span{width:5px;height:5px;border-radius:50%;background:var(--color-teal);animation:bounce 1.2s infinite ease-in-out}.typing-indicator__dots span:nth-child(2){animation-delay:.15s}.typing-indicator__dots span:nth-child(3){animation-delay:.3s}@keyframes bounce{0%,80%,to{transform:translateY(0)}40%{transform:translateY(-4px)}}.message-input{border-top:1px solid var(--color-border);background:var(--color-surface);padding:var(--space-3) var(--space-4);position:relative}.message-input__reply-banner{display:flex;justify-content:space-between;align-items:flex-start;background:var(--color-surface-raised);border-left:3px solid var(--color-teal);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);margin-bottom:var(--space-2);font-size:var(--fs-xs)}.message-input__reply-banner p{color:var(--color-text-muted);margin-top:2px}.message-input__reply-banner button{background:none;border:none;color:var(--color-text-muted);cursor:pointer;font-size:var(--fs-md)}.message-input__error{color:var(--color-danger);font-size:var(--fs-xs);margin-bottom:var(--space-2)}.message-input__emoji-popover{position:absolute;bottom:100%;left:var(--space-4);margin-bottom:var(--space-2);z-index:20;box-shadow:var(--shadow-lg);border-radius:var(--radius-md);overflow:hidden}.message-input__row{display:flex;align-items:center;gap:var(--space-2)}.message-input__icon-btn{background:none;border:none;font-size:var(--fs-md);cursor:pointer;padding:var(--space-1);border-radius:var(--radius-sm);flex-shrink:0}.message-input__icon-btn:hover{background:var(--color-surface-raised)}.message-input__text{flex:1;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:10px 16px;color:var(--color-text);font-size:var(--fs-base);min-width:0}.message-input__send{background:var(--color-accent);color:var(--color-accent-contrast);border:none;border-radius:var(--radius-pill);padding:10px 18px;font-weight:600;cursor:pointer;flex-shrink:0}.message-input__send:disabled{opacity:.5;cursor:not-allowed}.message-input__record--active{background:var(--color-danger-bg);color:var(--color-danger);border-radius:var(--radius-pill);padding:6px 12px;border:none;font-family:var(--font-mono);font-size:var(--fs-xs);cursor:pointer}@media (max-width: 720px){.chat-list{width:100%}.bubble{max-width:85%}}.page{flex:1;display:flex;flex-direction:column;overflow:hidden}.page__header{padding:var(--space-5);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between}.page__header h2{font-size:var(--fs-lg)}.page__body{flex:1;overflow-y:auto;padding:var(--space-5)}.page__empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:var(--space-3);color:var(--color-text-muted);text-align:center}.page__empty-state-icon{font-size:2.5rem}.dashboard{display:flex;flex:1;overflow:hidden;width:100%}.dashboard__placeholder{flex:1;display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);flex-direction:column;gap:var(--space-2)}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-4)}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);transition:border-color var(--transition-fast),transform var(--transition-fast)}.card:hover{border-color:var(--color-teal)}.card__header{display:flex;align-items:center;gap:var(--space-3)}.card__title{font-weight:600}.card__meta{font-size:var(--fs-xs);color:var(--color-text-muted)}.card__actions{display:flex;gap:var(--space-2);margin-top:auto}.room-breadcrumb{display:flex;gap:var(--space-1);align-items:center;font-size:var(--fs-sm);color:var(--color-text-muted);margin-bottom:var(--space-4)}.room-breadcrumb button{background:none;border:none;color:var(--color-teal);cursor:pointer;font-size:inherit}@media (max-width: 720px){.page__header,.page__body{padding:var(--space-4)}}.profile-page{max-width:480px}.profile-page__avatar-row{display:flex;align-items:center;gap:var(--space-5);margin-bottom:var(--space-6)}.profile-page__hint{font-size:var(--fs-xs);color:var(--color-text-muted);margin-top:var(--space-1)}.profile-page__form{display:flex;flex-direction:column;gap:var(--space-4)}textarea.field__input{resize:vertical;font-family:var(--font-body)}.settings-page{max-width:560px;display:flex;flex-direction:column;gap:var(--space-6)}.settings-section{display:flex;flex-direction:column;gap:var(--space-3)}.settings-section h3{font-size:var(--fs-md);padding-bottom:var(--space-2);border-bottom:1px solid var(--color-border)}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.settings-row__label{font-weight:600;font-size:var(--fs-sm)}.settings-row__hint{font-size:var(--fs-xs);color:var(--color-text-muted);max-width:360px}.settings-blocked-list{display:flex;flex-direction:column;gap:var(--space-2)}.settings-blocked-list li{display:flex;align-items:center;gap:var(--space-3)}.settings-blocked-list li span{flex:1;font-size:var(--fs-sm)}:root{--color-bg: #12141c;--color-surface: #1b1e29;--color-surface-raised: #232735;--color-border: #2f3444;--color-text: #eef0f5;--color-text-muted: #9aa0b4;--color-text-faint: #656b80;--color-accent: #ffb238;--color-accent-hover: #ffc361;--color-accent-contrast: #12141c;--color-teal: #4cd9c0;--color-teal-hover: #6ee4cf;--color-danger: #ff6b6b;--color-danger-bg: rgba(255, 107, 107, .12);--color-success: #4cd9c0;--color-warning: #ffb238;--color-bubble-own: #2a3a4a;--color-bubble-own-border: #3a5064;--color-bubble-other: var(--color-surface-raised);--font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;--font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;--font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;--fs-xs: .75rem;--fs-sm: .875rem;--fs-base: 1rem;--fs-md: 1.125rem;--fs-lg: 1.375rem;--fs-xl: 1.75rem;--fs-xxl: 2.25rem;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--space-7: 48px;--radius-sm: 8px;--radius-md: 14px;--radius-lg: 20px;--radius-pill: 999px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 16px rgba(0, 0, 0, .35);--shadow-lg: 0 12px 40px rgba(0, 0, 0, .45);--transition-fast: .12s ease;--transition-base: .2s ease;--sidebar-width: 76px;--chatlist-width: 340px}[data-theme=light]{--color-bg: #f6f5f2;--color-surface: #ffffff;--color-surface-raised: #ffffff;--color-border: #e4e2dc;--color-text: #1b1e29;--color-text-muted: #5b6072;--color-text-faint: #8b90a0;--color-accent-contrast: #1b1e29;--color-bubble-own: #fff1d9;--color-bubble-own-border: #ffdca3;--color-bubble-other: #ffffff;--shadow-sm: 0 1px 2px rgba(20, 20, 30, .06);--shadow-md: 0 4px 16px rgba(20, 20, 30, .08);--shadow-lg: 0 12px 40px rgba(20, 20, 30, .12)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:var(--font-body);background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;transition:background var(--transition-base),color var(--transition-base)}h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;margin:0;letter-spacing:-.01em}p{margin:0}a{color:var(--color-teal);text-decoration:none}a:hover{color:var(--color-teal-hover)}button{font-family:inherit}ul{list-style:none;margin:0;padding:0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-pill)}::-webkit-scrollbar-track{background:transparent}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:var(--radius-sm)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}.app-shell{display:flex;height:100vh;overflow:hidden}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}