:root[data-theme=light]{--color-primary:#3b82f6;--color-secondary:#8b5cf6;--color-success:#22c55e;--color-background:#fff;--color-surface:#f8fafc;--color-border:#e2e8f0;--color-text-primary:#0f172a;--color-text-secondary:#64748b;--color-muted:#64748b;--color-field:#f8fafc;--color-white:#fff;--color-error:#ff5a5a;--color-danger:#dc2626;--color-deep-text:#0f172a;--color-warning:#f59e0b;--color-info:#9bd4e4;--color-red:red;--color-blue:#00f;--color-gradient-mid:color-mix(in srgb, var(--color-primary) 12%, var(--color-background));--color-primary-hover:color-mix(in srgb, var(--color-primary) 85%, black);--color-danger-hover:color-mix(in srgb, var(--color-danger) 85%, black);--color-primary-tint-bg:color-mix(in srgb, var(--color-primary) 8%, transparent);--color-primary-tint-border:color-mix(in srgb, var(--color-primary) 22%, transparent);--color-primary-tint-border-strong:color-mix(in srgb, var(--color-primary) 35%, transparent);--color-danger-tint-bg:color-mix(in srgb, var(--color-danger) 8%, transparent);--color-success-tint-bg:color-mix(in srgb, var(--color-success) 16%, transparent);--color-muted-tint-bg:color-mix(in srgb, var(--color-muted) 12%, transparent);--color-success-strong:#15803d;--color-muted-strong:#475569;--color-surface-elevated:color-mix(in srgb, var(--color-background) 92%, transparent);--color-surface-panel:color-mix(in srgb, var(--color-background) 82%, transparent);--color-border-soft:color-mix(in srgb, var(--color-border) 90%, transparent);--color-overlay-backdrop:color-mix(in srgb, var(--color-text-primary) 45%, transparent);--color-shadow:color-mix(in srgb, var(--color-text-primary) 24%, transparent);--color-inverse-surface:var(--color-text-primary);--color-inverse-text:var(--color-surface)}:root[data-theme=dark]{--color-primary:#60a5fa;--color-secondary:#a78bfa;--color-success:#4ade80;--color-background:#0f172a;--color-surface:#1e293b;--color-border:#334155;--color-text-primary:#f8fafc;--color-text-secondary:#94a3b8;--color-muted:#94a3b8;--color-field:#1e293b;--color-white:#fff;--color-error:#ff7a7a;--color-danger:#f87171;--color-deep-text:#020617;--color-warning:#fbbf24;--color-info:#7dd3fc;--color-red:#ff6b6b;--color-blue:#60a5fa;--color-gradient-mid:color-mix(in srgb, var(--color-primary) 14%, var(--color-background));--color-primary-hover:color-mix(in srgb, var(--color-primary) 85%, white);--color-danger-hover:color-mix(in srgb, var(--color-danger) 85%, white);--color-primary-tint-bg:color-mix(in srgb, var(--color-primary) 14%, transparent);--color-primary-tint-border:color-mix(in srgb, var(--color-primary) 30%, transparent);--color-primary-tint-border-strong:color-mix(in srgb, var(--color-primary) 40%, transparent);--color-danger-tint-bg:color-mix(in srgb, var(--color-danger) 14%, transparent);--color-success-tint-bg:color-mix(in srgb, var(--color-success) 20%, transparent);--color-muted-tint-bg:color-mix(in srgb, var(--color-muted) 18%, transparent);--color-success-strong:var(--color-success);--color-muted-strong:var(--color-text-secondary);--color-surface-elevated:color-mix(in srgb, var(--color-surface) 92%, transparent);--color-surface-panel:color-mix(in srgb, var(--color-surface) 82%, transparent);--color-border-soft:color-mix(in srgb, var(--color-border) 90%, transparent);--color-overlay-backdrop:#0000008c;--color-shadow:#00000073;--color-inverse-surface:var(--color-surface);--color-inverse-text:var(--color-text-primary)}html,body,#root{min-width:320px;min-height:100vh;margin:0}body{background:var(--color-background);min-height:100vh;color:var(--color-text-primary);margin:0}*{box-sizing:border-box}button,input{font:inherit}.app-shell{background:linear-gradient(135deg, var(--color-surface) 0%, var(--color-gradient-mid) 35%, var(--color-background) 100%);min-height:100vh;color:var(--color-text-primary);font-family:Inter,Segoe UI,sans-serif}.login-page{place-items:center;min-height:100vh;padding:24px;display:grid}.login-card{background:var(--color-surface-elevated);border:1px solid var(--color-border-soft);width:min(100%,480px);box-shadow:0 24px 80px var(--color-shadow);border-radius:24px;padding:32px}.brand-block{align-items:center;gap:16px;margin-bottom:20px;display:flex}.brand-mark{background:0 0;place-items:center;width:56px;height:56px;display:grid;overflow:visible}.brand-mark.small{width:42px;height:42px}.brand-mark-image{object-fit:contain;background:0 0;width:100%;height:100%;display:block}.brand-mark-image.small{border-radius:12px}.brand-subtitle{text-transform:uppercase;letter-spacing:.12em;color:var(--color-text-secondary);margin:0;font-size:.65rem}h1,h2,p,dd,dt,strong,small{margin:0}.brand-block h1{font-size:2.2rem;line-height:1.1}.mobile-only-banner{border:1px solid var(--color-primary-tint-border);background:var(--color-primary-tint-bg);color:var(--color-text-secondary);border-radius:12px;margin-bottom:20px;padding:12px 14px;font-size:.95rem}.login-form{flex-direction:column;gap:16px;display:flex}.login-form label{color:var(--color-text-primary);flex-direction:column;gap:8px;font-size:.9rem;display:flex}.login-form input{box-sizing:border-box;border:1px solid var(--color-border);background:var(--color-field);width:100%;color:var(--color-text-primary);border-radius:12px;padding:12px 14px;font-size:1rem}.password-input-wrapper{position:relative}.password-input-wrapper input{padding-right:68px}.login-form .password-visibility-button{min-height:32px;color:var(--color-primary-hover);background:0 0;padding:4px 8px;font-size:.85rem;font-weight:700;position:absolute;top:30%;right:8px;transform:translateY(-50%)}.login-form button,.logout-button,.nav-button,.list-item button{cursor:pointer;border:none;border-radius:12px;min-height:44px;transition:transform .15s,opacity .15s}.login-form button{background:var(--color-primary);color:var(--color-white);margin-top:8px;padding:12px 18px;font-size:1rem;font-weight:700}.login-form button:disabled{opacity:.6;cursor:not-allowed}.error-message{color:var(--color-danger);font-size:.9rem}.verification-resend{gap:12px;display:grid}.text-button{color:var(--color-primary);font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;justify-self:start;padding:4px 0;font-weight:700}.resend-form{gap:12px;display:grid}.resend-form label{flex-direction:column;gap:8px;display:flex}.resend-form input{box-sizing:border-box;border:1px solid var(--color-border);width:100%;color:var(--color-text-primary);background:var(--color-surface);font:inherit;border-radius:10px;padding:12px}.resend-form p{color:var(--color-text-secondary);font-size:.9rem}.forgot-password-link{color:var(--color-primary);align-self:flex-end;font-size:.9rem;font-weight:600}.workspace{min-height:100vh;display:flex}.sidebar{background:var(--color-surface-elevated);border-right:1px solid var(--color-border-soft);flex-direction:column;gap:24px;width:260px;padding:24px 18px;display:flex}.sidebar-header{align-items:center;gap:12px;padding:8px 10px;display:flex}.menu-toggle{background:var(--color-primary-tint-bg);border:1px solid var(--color-primary-tint-border);cursor:pointer;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:44px;height:44px;margin-left:auto;padding:8px 10px;display:none}.menu-toggle span{background:var(--color-text-primary);border-radius:99px;width:18px;height:2px;display:block}.sidebar-header strong{font-size:1.05rem;display:block}.sidebar-header small{color:var(--color-text-secondary);margin-top:2px;display:block}.nav{flex-direction:column;gap:10px;display:flex}.nav-button{text-align:left;width:100%;color:var(--color-text-primary);box-sizing:border-box;background:0 0;border:1px solid #0000;padding:12px 14px;text-decoration:none;display:block}.nav-button.active{background:var(--color-primary-tint-bg);border-color:var(--color-primary-tint-border);color:var(--color-text-primary)}.logout-button{background:var(--color-danger-tint-bg);color:var(--color-danger-hover);margin-top:auto;padding:12px 14px}.theme-toggle{background:var(--color-primary-tint-bg);color:var(--color-text-primary);border:1px solid var(--color-primary-tint-border);cursor:pointer;border-radius:12px;justify-content:center;align-items:center;gap:8px;min-height:40px;margin-top:8px;padding:10px 14px;display:flex}.content-area{flex:1;padding:30px}.message-toast{z-index:10;border:1px solid var(--color-primary-tint-border-strong);background:var(--color-inverse-surface);max-width:calc(100vw - 48px);box-shadow:0 12px 28px var(--color-shadow);color:var(--color-inverse-text);border-radius:8px;align-items:center;gap:12px;padding:12px 14px;display:flex;position:fixed;bottom:24px;right:24px}.message-toast button{color:var(--color-primary);cursor:pointer;font:inherit;background:0 0;border:0}.panel-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;display:grid}.panel{background:var(--color-surface-panel);border:1px solid var(--color-border-soft);border-radius:20px;padding:20px}.eyebrow{text-transform:uppercase;letter-spacing:.12em;color:var(--color-primary);margin-bottom:12px;font-size:.72rem;display:inline-block}.panel h2{margin-bottom:10px;font-size:1.6rem}.stat-row{gap:20px;margin-top:18px;display:flex}.stat-row div{flex-direction:column;gap:6px;display:flex}.stat-row strong{font-size:1.8rem}.status-list{color:var(--color-text-secondary);flex-direction:column;gap:10px;margin:12px 0 0;padding:0;list-style:none;display:flex}.list-table{flex-direction:column;gap:12px;margin-top:12px;display:flex}.blocked-contacts-heading{margin-top:8px;font-size:1rem}.contact-search{box-sizing:border-box;border:1px solid var(--color-border);background:var(--color-field);width:100%;color:var(--color-text-primary);border-radius:12px;padding:12px 14px;font-size:1rem}.list-item{border:1px solid var(--color-border-soft);background:var(--color-surface);border-radius:12px;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;display:flex}.contact-list-main{flex:1;align-items:center;gap:12px;min-width:0;display:flex}.contact-list-info{min-width:0}.contact-list-status{align-items:center;gap:6px;display:flex}.contact-list-status .status-dot{flex-shrink:0}.list-item strong{margin-bottom:4px;display:block}.list-item small{color:var(--color-text-secondary)}.presence{border-radius:999px;padding:6px 10px;font-size:.75rem;font-weight:700}.presence.online{background:var(--color-success-tint-bg);color:var(--color-success-strong)}.presence.offline{background:var(--color-muted-tint-bg);color:var(--color-muted-strong)}.list-item-end{align-items:center;gap:8px;display:flex}.unread-badge{background:var(--color-danger);min-width:20px;height:20px;color:var(--color-white);border-radius:999px;justify-content:center;align-items:center;padding:0 6px;font-size:.7rem;font-weight:700;display:inline-flex}.request-item button{background:var(--color-primary);color:var(--color-white);padding:9px 12px;font-weight:700}.request-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.request-item .request-action-secondary{background:var(--color-muted-tint-bg);color:var(--color-text-primary)}.request-item .request-action-danger{background:var(--color-danger);color:var(--color-white)}.request-item button:disabled{opacity:.6;cursor:not-allowed}.empty-state{color:var(--color-text-secondary)}.panel-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.secondary-button{background:var(--color-primary-tint-bg);color:var(--color-primary-hover);border:1px solid var(--color-primary-tint-border);cursor:pointer;border-radius:12px;min-height:40px;padding:9px 14px;font-weight:600}.settings-option{border:1px solid var(--color-border-soft);background:var(--color-surface);border-radius:12px;justify-content:space-between;align-items:center;gap:16px;margin-top:16px;padding:14px;display:flex}.settings-option span{flex-direction:column;gap:5px;display:flex}.settings-option small{color:var(--color-text-secondary)}.settings-option input{width:20px;height:20px;accent-color:var(--color-primary);flex-shrink:0}.success-message{color:var(--color-success);font-size:.9rem}.list-item-button{background:var(--color-surface);width:100%;font:inherit;color:inherit;text-align:left}.dialog-backdrop{background:var(--color-overlay-backdrop);z-index:20;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.dialog{background:var(--color-background);width:min(100%,420px);box-shadow:0 24px 80px var(--color-shadow);border-radius:20px;padding:24px}.dialog-form{flex-direction:column;gap:14px;margin-top:16px;display:flex}.dialog-form label{color:var(--color-text-primary);flex-direction:column;gap:8px;font-size:.9rem;display:flex}.dialog-form input{box-sizing:border-box;border:1px solid var(--color-border);background:var(--color-field);width:100%;color:var(--color-text-primary);border-radius:12px;padding:12px 14px;font-size:1rem}.dialog-form button[type=submit]{background:var(--color-primary);color:var(--color-white);padding:12px 18px;font-weight:700}.dialog-form button:disabled{opacity:.6;cursor:not-allowed}.dialog-actions{justify-content:flex-end;gap:10px;display:flex}.conversation-panel{flex-direction:column;height:calc(100vh - 60px);display:flex}.message-list{flex-direction:column;flex:1;gap:10px;margin:16px 0;padding-right:4px;display:flex;overflow-y:auto}.chat-header{border-bottom:1px solid var(--color-border-soft);align-items:center;gap:12px;padding-bottom:14px;display:flex}.icon-button{color:var(--color-text-primary);cursor:pointer;background:0 0;border:none;border-radius:10px;width:36px;height:36px;padding:0;font-size:1.5rem;line-height:1}.icon-button:hover{background:var(--color-muted-tint-bg)}.avatar{background:var(--color-primary);width:44px;height:44px;color:var(--color-white);border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;font-size:.95rem;font-weight:700;display:flex}.avatar-small{border-radius:12px;width:36px;height:36px;font-size:.8rem}.chat-header-info{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.chat-header-name{font-size:1.05rem}.mute-icon{margin-left:8px;font-size:.9rem}.chat-header-status{color:var(--color-text-secondary);align-items:center;gap:6px;font-size:.8rem;display:flex}.status-dot{background:var(--color-muted);border-radius:50%;width:8px;height:8px}.status-dot.online{background:var(--color-success)}.chat-menu{position:relative}.dropdown-menu{z-index:20;background:var(--color-surface);border:1px solid var(--color-border);min-width:180px;box-shadow:0 10px 30px var(--color-shadow);border-radius:12px;flex-direction:column;padding:6px;display:flex;position:absolute;top:calc(100% + 6px);right:0}.dropdown-menu button{text-align:left;color:var(--color-text-primary);cursor:pointer;background:0 0;border:none;border-radius:8px;padding:10px 12px;font-size:.9rem}.dropdown-menu button:hover{background:var(--color-muted-tint-bg);transform:none}.dropdown-menu button.danger{color:var(--color-danger)}.day-separator{color:var(--color-text-secondary);align-items:center;gap:12px;margin:6px 0;font-size:.75rem;display:flex}.day-separator:before,.day-separator:after{content:"";background:var(--color-border);flex:1;height:1px}.typing-indicator{color:var(--color-text-secondary);margin:0 0 8px;font-size:.85rem}.message-row{align-items:flex-start;gap:10px;max-width:75%;display:flex}.message-row.outgoing{align-self:flex-end}.message-row.incoming{align-self:flex-start}.message-content{flex-direction:column;gap:4px;min-width:0;display:flex}.message-row.outgoing .message-content{align-items:flex-end}.message-bubble{background:var(--color-surface);overflow-wrap:anywhere;border-radius:16px;padding:12px 16px;line-height:1.4}.message-bubble.outgoing{background:var(--color-primary);color:var(--color-white)}.message-bubble.incoming{background:var(--color-surface)}.message-text-link{color:var(--color-primary);text-decoration:underline}.message-bubble.outgoing .message-text-link{color:var(--color-white)}.message-meta{color:var(--color-text-secondary);align-items:center;gap:6px;padding:0 4px;font-size:.7rem;display:flex}.message-ticks{color:var(--color-primary);vertical-align:middle;margin-left:4px}.message-composer{flex-wrap:wrap;gap:10px;display:flex}.composer-banner{border-left:3px solid var(--color-primary);background:var(--color-muted-tint-bg);color:var(--color-text-secondary);border-radius:8px;flex-basis:100%;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;font-size:.85rem;display:flex}.composer-banner span{flex-direction:column;min-width:0;display:flex}.composer-banner em{text-overflow:ellipsis;white-space:nowrap;color:var(--color-text-primary);overflow:hidden}.message-composer .composer-banner button{width:auto;height:auto;color:var(--color-text-secondary);background:0 0;padding:4px 8px}.reply-quote{opacity:.85;background:#0000001f;border-left:3px solid;border-radius:6px;flex-direction:column;margin-bottom:6px;padding:4px 8px;font-size:.8rem;display:flex}.reply-quote span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.message-bubble{position:relative}.message-bubble:has(.message-menu-trigger){padding-right:32px}.message-menu{position:absolute;top:2px;right:6px}.message-menu-trigger{color:inherit;cursor:pointer;opacity:0;background:0 0;border:none;padding:2px 6px;font-size:1rem;line-height:1}.message-bubble:hover .message-menu-trigger,.message-menu-trigger:focus-visible,.message-menu-trigger[aria-expanded=true]{opacity:1}.message-bubble .dropdown-menu{color:var(--color-text-primary)}.message-edited{font-style:italic}.ping-row{justify-content:flex-end;margin-bottom:8px;display:flex}.ping-button{background:var(--color-primary);color:var(--color-white);cursor:pointer;border:none;border-radius:12px;justify-content:center;align-items:center;padding:9px;display:inline-flex}.ping-button svg{width:20px;height:20px}.ping-button:disabled{opacity:.6;cursor:not-allowed}.message-composer input{box-sizing:border-box;border:1px solid var(--color-border);background:var(--color-field);color:var(--color-text-primary);border-radius:999px;flex:1;padding:12px 18px;font-size:1rem}.message-composer button{background:var(--color-primary);color:var(--color-white);cursor:pointer;border:none;border-radius:14px;width:44px;height:44px;padding:0;font-weight:700}.message-composer button:disabled{opacity:.6;cursor:not-allowed}.contact-muted-icon{margin-left:6px;font-size:.85rem}.profile-card dl{gap:14px;margin-top:10px;display:grid}.profile-card dl div{border-bottom:1px solid var(--color-muted-tint-bg);justify-content:space-between;gap:16px;padding-bottom:10px;display:flex}.profile-card dt{color:var(--color-text-secondary)}.profile-card dd{color:var(--color-text-primary);font-weight:600}button:hover{transform:translateY(-1px)}@media (width<=820px){.login-page{padding:18px 14px}.login-card{border-radius:18px;padding:24px 18px}.brand-block{gap:12px}.workspace{flex-direction:column}.sidebar{border-right:none;border-bottom:1px solid var(--color-border-soft);width:100%;padding:16px 14px}.menu-toggle{display:inline-flex}.nav{flex-flow:wrap;margin-top:12px;display:none}.nav.is-open{display:flex}.nav-button{flex:calc(50% - 8px);min-width:120px}.logout-button{margin-top:12px}.content-area,.panel{padding:16px}.list-item{flex-direction:column;align-items:flex-start}.request-item{align-items:center;width:100%}.request-item button{width:100%}.profile-card dl div{flex-direction:column;align-items:flex-start;gap:6px}}@media (width<=480px){.brand-block{flex-direction:column;align-items:flex-start}.brand-block h1{font-size:clamp(1.8rem,9vw,2.2rem)}.mobile-only-banner{font-size:.85rem;line-height:1.5}.panel-grid{grid-template-columns:1fr}.stat-row{flex-direction:column;gap:14px}.list-item{width:100%}.nav-button{flex-basis:100%}}.reaction-picker{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;gap:2px;max-width:calc(100vw - 32px);padding:4px;display:flex;overflow-x:auto}.reaction-picker button{cursor:pointer;background:0 0;border:none;flex:none;width:auto;padding:2px 6px;font-size:1.2rem}.reaction-row{-webkit-overflow-scrolling:touch;flex-wrap:nowrap;gap:4px;max-width:100%;margin-top:2px;display:flex;overflow-x:auto}.reaction-chip{white-space:nowrap;color:var(--color-text-primary);background:var(--color-field);border:1px solid var(--color-border);border-radius:12px;flex:none;padding:1px 8px;font-size:.85rem}.reaction-chip:not(:disabled){cursor:pointer}.reaction-chip.mine{border-color:var(--color-primary)}.delivery-error{color:var(--color-danger);align-items:center;gap:.5rem;font-size:.75rem;display:flex}.delivery-error button{color:inherit;font:inherit;cursor:pointer;background:0 0;border:none;padding:0;font-weight:600;text-decoration:underline}.not-found-card{text-align:center}.not-found-card .brand-block{justify-content:center}.not-found-code{color:var(--color-primary);font-size:5rem;font-weight:800;line-height:1}.not-found-title{margin-top:12px;font-size:1.5rem}.not-found-copy{color:var(--color-text-secondary);margin-top:8px}.not-found-actions{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px;display:flex}.primary-link-button{background:var(--color-primary);min-height:44px;color:var(--color-white);border-radius:12px;justify-content:center;align-items:center;padding:12px 18px;font-weight:700;text-decoration:none;transition:transform .15s,opacity .15s;display:inline-flex}.primary-link-button:hover{background:var(--color-primary-hover);transform:translateY(-1px)}.login-form button:hover:not(:disabled),.request-item button:not(.request-action-secondary):not(.request-action-danger):hover:not(:disabled),.dialog-form button[type=submit]:hover:not(:disabled),.message-composer button:hover:not(:disabled),.ping-button:hover:not(:disabled){background:var(--color-primary-hover)}.login-form .password-visibility-button:hover:not(:disabled){background:0 0}
