:root{--color-bg: #0b1220;--color-text: #f8fafc;--color-muted: #cbd5e1;--color-border: #1f2937;--color-panel: #0f172a;--color-card: #111827;--color-primary: #2563eb;--color-success: #22c55e;--color-danger: #ef4444;--bubble-mine-bg: #1e293b;--bubble-mine-border: #334155;--bubble-other-bg: #111827;--bubble-other-border: var(--color-border);--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 24px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-bubble: 18px;--font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-size-xs: 11px;--font-size-sm: 12px;--font-size-md: 14px;--font-size-lg: 15px;--font-size-xl: 18px;--z-dropdown: 10;--z-toast: 9999;--z-call-banner: 1100;--z-call-window: 1000;--z-image-viewer: 1000;--safe-area-top: env(safe-area-inset-top, 0px);--safe-area-bottom: env(safe-area-inset-bottom, 0px);--safe-area-left: env(safe-area-inset-left, 0px);--safe-area-right: env(safe-area-inset-right, 0px);--sidebar-width: 360px;--focus-ring: 0 0 0 3px rgba(59, 130, 246, .55)}.app-shell{height:100vh;height:100dvh;display:flex;flex-direction:column;font-family:var(--font-family);background:var(--color-bg);color:var(--color-text)}.app-header{padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;background:var(--color-card);color:var(--color-text)}.app-header h1{margin:0;font-size:var(--font-size-xl)}.main-grid{flex:1;min-height:0;display:grid;grid-template-columns:var(--sidebar-width) 1fr;gap:0}.sidebar{border-right:1px solid var(--color-border);padding:var(--space-md);min-width:0;display:flex;flex-direction:column;background:var(--color-card);overflow:hidden}.chat-area{display:grid;grid-template-rows:auto 1fr auto;min-height:0;position:relative}.login-container{margin:3rem auto;width:min(520px,92vw)}.login-form{display:grid;gap:var(--space-md)}.boot-spinner{display:flex;align-items:center;justify-content:center;height:100%;color:var(--color-muted)}.back-btn{display:none}@media (max-width: 1024px){:root{--sidebar-width: 280px}}@media (max-width: 768px){.main-grid{grid-template-columns:1fr}.main-grid>.sidebar,.main-grid>.chat-area{display:none}.main-grid--show-sidebar>.sidebar{display:flex}.main-grid--show-chat>.chat-area{display:grid}.back-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-panel);color:var(--color-text);cursor:pointer;margin-right:var(--space-sm);flex-shrink:0}}@media (max-width: 480px){.sidebar{padding:var(--space-sm)}}@media (max-width: 360px){.composer{padding:var(--space-sm);gap:var(--space-xs)}}*{box-sizing:border-box}body{margin:0}:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-md)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.app-shell button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-panel);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;font-family:inherit}.app-shell button:disabled{opacity:.6;cursor:default}.app-shell input::placeholder{color:var(--color-muted);opacity:.85}.app-shell input[type=text],.app-shell input[type=email],.app-shell input[type=password]{background:var(--color-panel);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-sm);font-family:inherit}.chat-header{padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;align-items:center}.msg{position:relative;padding:var(--space-md) 14px 24px 14px;border-radius:var(--radius-bubble);white-space:pre-line;word-break:normal;overflow-wrap:break-word;min-width:180px;max-width:min(640px,90%);line-height:1.4;font-size:var(--font-size-md);color:var(--color-text)}.msg--mine{background:var(--bubble-mine-bg);border:1px solid var(--bubble-mine-border);border-top-right-radius:var(--radius-md);align-self:flex-end}.msg--other{background:var(--bubble-other-bg);border:1px solid var(--bubble-other-border);border-top-left-radius:var(--radius-md);align-self:flex-start}.msg--failed{border-color:var(--color-danger);opacity:.7}.msg__time{position:absolute;bottom:6px;display:flex;gap:6px;align-items:center;color:#64748b;font-size:var(--font-size-xs)}.msg__time--mine{right:12px}.msg__time--other{left:12px}.msg__sender-name{font-size:var(--font-size-sm);color:var(--color-text);font-weight:700;margin:0 var(--space-sm) 6px var(--space-sm)}.msg__image{max-width:100%;border-radius:var(--radius-lg);cursor:zoom-in}.msg__video{max-width:100%;border-radius:var(--radius-lg);background:#000}.msg__file{display:flex;align-items:center;gap:10px}.msg__file-icon{width:48px;height:48px;border-radius:var(--radius-md);background:var(--color-bg);display:grid;place-items:center;border:1px solid var(--color-border)}.msg__link{color:#93c5fd;text-decoration:underline}.day-separator{align-self:center;color:var(--color-muted);font-size:var(--font-size-sm);text-align:center;margin:var(--space-sm) 0}.message-list{overflow-y:auto;padding:var(--space-sm) var(--space-md) 88px var(--space-md)}.message-list__empty{color:var(--color-muted)}.composer{position:relative;display:flex;gap:var(--space-sm);padding:var(--space-md);border-top:1px solid var(--color-border)}.composer__btn{padding:6px 8px;border:1px solid var(--color-border);background:var(--color-panel);color:var(--color-text);border-radius:var(--radius-sm);min-width:36px;min-height:36px;display:inline-flex;align-items:center;justify-content:center}.composer__input{flex:1;padding:var(--space-sm);background:var(--color-panel);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-family:inherit;resize:none;max-height:120px;overflow-y:auto;field-sizing:content}.composer__send{padding:var(--space-sm) var(--space-md);background:var(--color-primary);color:#fff;border:1px solid var(--color-primary);border-radius:var(--radius-sm)}.emoji-picker-anchor{position:absolute;bottom:56px;left:var(--space-md);z-index:var(--z-dropdown)}@media (max-width: 768px){.emoji-picker-anchor{position:fixed;bottom:0;left:0;right:0;top:auto}.emoji-picker-anchor em-emoji-picker{width:100%!important;border-radius:var(--radius-lg) var(--radius-lg) 0 0}}.pending-bar{padding:var(--space-sm) var(--space-md);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);background:var(--color-card)}.pending-bar__actions{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-sm)}.pending-bar__grid{display:flex;gap:var(--space-sm);flex-wrap:wrap}@media (max-width: 768px){.pending-bar__grid{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}}.pending-thumb{position:relative;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-panel);flex-shrink:0}.pending-thumb__remove{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:999px;border:1px solid #334155;background:#111827;color:#cbd5e1;display:inline-flex;align-items:center;justify-content:center;font-size:14px;padding:0}.toast-container{position:fixed;top:var(--space-lg);right:var(--space-lg);display:flex;flex-direction:column;gap:10px;z-index:var(--z-toast);align-items:flex-end}@media (max-width: 768px){.toast-container{left:var(--space-lg);right:var(--space-lg);align-items:stretch}}.toast-item{background:var(--color-panel);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:14px var(--space-lg);box-shadow:0 12px 28px #00000073;max-width:420px;cursor:pointer;font-size:var(--font-size-lg);line-height:1.35;font-weight:600}@media (max-width: 768px){.toast-item{max-width:none}}.image-viewer-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000db;display:grid;place-items:center;z-index:var(--z-image-viewer)}.image-viewer__content{position:relative;max-width:92vw;max-height:92vh}.image-viewer__img{max-width:92vw;max-height:92vh;display:block;border-radius:var(--radius-lg)}.image-viewer__actions{position:absolute;top:var(--space-sm);right:var(--space-sm);display:flex;gap:var(--space-sm)}.image-viewer__download{padding:6px 10px;background:var(--color-success);color:var(--color-bg);border-radius:var(--radius-md);font-weight:700;text-decoration:none}.image-viewer__close{padding:6px 10px;background:var(--color-danger);color:#fff;border-radius:var(--radius-md);font-weight:700;border:none}.image-viewer__name{position:absolute;left:var(--space-sm);bottom:var(--space-sm);color:#e2e8f0;background:#02061799;padding:6px 10px;border-radius:var(--radius-md)}.call-banner{position:fixed;right:var(--space-lg);bottom:var(--space-lg);padding:var(--space-md) 14px;border-radius:var(--radius-lg);box-shadow:0 6px 20px #00000026;display:flex;gap:10px;align-items:center;z-index:var(--z-call-banner)}@media (max-width: 768px){.call-banner{left:var(--space-lg);right:var(--space-lg);bottom:calc(var(--space-lg) + var(--safe-area-bottom));justify-content:center}}.call-banner--incoming{background:#0ea5e9;color:#fff}.call-banner--outgoing{background:#f59e0b;color:#111}.call-banner__accept{padding:6px 10px;background:var(--color-success);color:#fff;border:none;border-radius:var(--radius-md)}.call-banner__decline,.call-banner__cancel{padding:6px 10px;background:var(--color-danger);color:#fff;border:none;border-radius:var(--radius-md)}.call-window{position:fixed;right:var(--space-lg);bottom:var(--space-lg);z-index:var(--z-call-window);width:98%;height:98%;background:#000;border-radius:var(--radius-lg);overflow:hidden;display:grid;grid-template-rows:auto 1fr;box-shadow:0 12px 40px #00000080;border:1px solid var(--color-border)}.call-window--minimized{width:320px;height:180px}@media (max-width: 768px){.call-window:not(.call-window--minimized){top:0;right:0;bottom:0;left:0;width:100%;height:100%;border-radius:0;padding-top:var(--safe-area-top)}.call-window--minimized{top:auto;left:auto;right:var(--space-sm);bottom:calc(var(--space-sm) + var(--safe-area-bottom));width:160px;height:90px}}.call-window__header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-sm);background:#111;color:#fff}.call-window__jitsi{width:100%;height:100%;position:relative;overflow:hidden}.call-window__jitsi iframe{display:block;background:#000!important}.conversation-list{display:flex;flex-direction:column;gap:6px;overflow-y:auto}.conversation-item{text-align:left;padding:10px var(--space-md);border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-panel);display:grid;grid-template-columns:1fr auto;gap:6px;width:100%}.conversation-item--active{background:#2563eb26}.conversation-item__name{font-weight:700;font-size:var(--font-size-md);color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conversation-item__snippet{color:var(--color-muted);font-size:var(--font-size-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.unread-badge{background:#ef4444;color:#fff;border-radius:999px;min-width:20px;height:20px;line-height:20px;text-align:center;font-size:var(--font-size-sm);padding:0 6px;font-weight:700}.user-list{display:flex;flex-direction:column;gap:var(--space-xs);max-height:220px;overflow-y:auto}.user-list-item{display:flex;align-items:center;gap:var(--space-sm);padding:6px var(--space-xs);cursor:pointer;border:none;background:none;color:inherit;width:100%;text-align:left}.user-list-item__dot{width:10px;height:10px;border-radius:999px;display:inline-block;flex-shrink:0}.user-list-item__dot--online{background:#20c997}.user-list-item__dot--offline{background:#555}.typing-indicator{padding:0 var(--space-md) 6px;color:var(--color-muted);font-size:var(--font-size-sm)}.drag-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#2563eb1a;border:2px dashed var(--color-primary);border-radius:var(--radius-md);z-index:5;display:grid;place-items:center;pointer-events:none}@keyframes spin{to{transform:rotate(360deg)}}.spinner{width:32px;height:32px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 12px}@keyframes micPulse{0%,to{box-shadow:0 0 #ef444466}50%{box-shadow:0 0 0 8px #ef444400}}.composer__btn--recording{border-color:var(--color-danger);background:var(--color-danger);color:#fff;animation:micPulse 1.5s ease-in-out infinite}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--color-muted);text-align:center;padding:var(--space-xl)}@media (max-width: 480px){.msg{max-width:88%;font-size:13px}}.ticks{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}