:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#eef2ef;color:#17211d;font-synthesis:none;text-rendering:geometricPrecision}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;min-width:320px;min-height:100%;overflow:hidden;background:#eef2ef}button,input,textarea{font:inherit}button{cursor:pointer}.app-shell{display:grid;grid-template-columns:340px minmax(0,1fr);height:100dvh;min-height:0;overflow:hidden;background:#eef2ef}.sidebar{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;gap:18px;min-height:0;padding:24px;overflow:hidden;background:#101915;color:#f4f7f3}.brand{display:flex;align-items:center;gap:12px}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(255,255,255,.18);background:#1f8a70}.brand strong,.brand span{display:block}.brand strong{font-size:22px;letter-spacing:0}.brand span{margin-top:2px;color:#aebbb4;font-size:13px}.search-box{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:9px;min-height:42px;border:1px solid rgba(255,255,255,.12);background:#ffffff14;color:#aebbb4;padding:0 12px}.search-box input{width:100%;border:0;outline:0;background:transparent;color:#f4f7f3}.search-box input::placeholder{color:#91a19a}.conversation-list{min-height:0;overflow-y:auto}.section-label{margin:0 0 10px;color:#81938b;font-size:12px;font-weight:800;letter-spacing:.02em;text-transform:uppercase}.conversation{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;min-height:74px;border:1px solid rgba(255,255,255,.16);background:#ffffff14;color:#fff;padding:12px;text-align:left}.conversation span,.conversation strong,.conversation small{display:block;min-width:0}.conversation strong{font-size:15px}.conversation small{margin-top:4px;overflow:hidden;color:#aebbb4;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.conversation time{align-self:start;color:#8fa29a;font-size:12px}.avatar{display:grid;place-items:center;width:42px;height:42px;flex:0 0 auto;background:#dce7df;color:#163129;font-size:13px;font-weight:800}.avatar.self{background:#1f8a70;color:#f4fffb}.avatar.large{width:52px;height:52px}.connection-card,.profile-card{border-top:1px solid rgba(255,255,255,.12);padding-top:16px}.connection-row{display:flex;align-items:center;gap:9px;margin-bottom:10px;color:#dbe4df}.connection-row b{margin-left:auto;padding:3px 8px;background:#ffffff1f;color:#dfe8e3;font-size:12px;text-transform:uppercase}.connection-row b.ok{background:#1f8a704d;color:#bff4e5}.connection-row b.down{background:#bd4a3b4d;color:#ffd6d0}.connection-card input{width:100%;border:1px solid rgba(255,255,255,.14);background:#ffffff14;color:#f4f7f3;padding:10px 11px;outline:none}.profile-heading{display:flex;align-items:center;gap:12px}.profile-heading span,.profile-heading small,.profile-heading strong{display:block}.profile-heading small{color:#8fa29a;font-size:12px}.profile-heading strong{margin-top:2px;color:#fff}.profile-note{margin:12px 0 0;color:#9cafaa;font-size:13px;line-height:1.45}.chat-panel{display:grid;grid-template-rows:auto auto auto auto minmax(0,1fr) auto;min-width:0;min-height:0;height:100%;overflow:hidden}.chat-header{grid-row:1;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 36px 18px;border-bottom:1px solid #d9e0dc;background:#f7f8f4f0}.chat-title{display:flex;align-items:center;gap:14px;min-width:0}.eyebrow{margin:0 0 5px;color:#65746e;font-size:12px;font-weight:800;text-transform:uppercase}h1{margin:0;color:#16211d;font-size:30px;line-height:1.05;letter-spacing:0}.header-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}.icon-button{display:grid;place-items:center;width:40px;height:40px;border:1px solid #cbd5cf;background:#fff;color:#23312b}.icon-button.danger{color:#8a2f22}.icon-button.danger:hover{border-color:#e3b2a8;background:#fff4f1}.icon-button.call,.icon-button.accept{color:#1f8a70}.icon-button.call:hover,.icon-button.accept:hover{border-color:#8fcdbd;background:#edf8f4}.sync-state{display:flex;align-items:center;gap:7px;color:#53625c;font-size:14px}.trust-bar{grid-row:2;display:flex;align-items:center;gap:8px;min-height:42px;padding:0 36px;border-bottom:1px solid #d9e0dc;background:#edf4ef;color:#4d6259;font-size:14px}.call-banner{grid-row:3;display:flex;align-items:center;gap:8px;min-height:42px;padding:0 36px;border-bottom:1px solid #d9e0dc;background:#f1f8f5;color:#2f6f58;font-size:14px;font-weight:700}.call-banner.warning{background:#fff4f1;color:#8a2f22}.call-banner.incoming{background:#eef8ff;color:#245b7a}.error-banner{grid-row:4;display:flex;align-items:center;gap:10px;margin:14px 36px 0;padding:12px 14px;background:#fff4f1;border:1px solid #f0c4bb;color:#8a2f22}.remote-video-wrap,.local-video-wrap{position:relative;min-width:0;min-height:0;overflow:hidden;background:#0d1512}.remote-video,.local-video{display:block;width:100%;height:100%;object-fit:cover;background:#0d1512}.video-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;align-content:center;gap:12px;color:#e8f0ec;text-align:center}.video-placeholder strong{font-size:14px;font-weight:800}.local-video-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#102019;color:#cfe6de;font-weight:900}.message-history{grid-row:5;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:28px 36px}.empty-state{display:grid;place-items:center;align-content:center;min-height:100%;color:#5f6d67;text-align:center}.empty-state h2{margin:18px 0 8px;color:#1f2a25;font-size:24px}.empty-state p{max-width:440px;margin:0;line-height:1.5}.message{width:min(620px,86%);margin:0 0 14px;padding:15px 17px 12px;background:#fff;border:1px solid #d8e0dc}.message.mine{margin-left:auto;background:#163129;border-color:#163129;color:#f5faf7}.message-meta{display:flex;justify-content:space-between;gap:12px;margin-bottom:7px;color:#6b7a73;font-size:12px;font-weight:800;text-transform:uppercase}.message.mine .message-meta{color:#9ac8ba}.message p{margin:0;white-space:pre-wrap;line-height:1.48;overflow-wrap:anywhere}.receipt{display:flex;align-items:center;gap:5px;margin-top:10px;color:#718079;font-size:12px}.message.mine .receipt{color:#9ac8ba}.attachment{display:flex;align-items:center;gap:8px;max-width:100%;margin-top:12px;border:1px solid #cfd8d3;background:#f8faf8;color:#18231f;padding:9px 10px}.attachment span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attachment small{margin-left:auto;color:#708078}.composer{grid-row:6;display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:10px;align-items:end;padding:18px 36px 26px;border-top:1px solid #d9e0dc;background:#f7f8f4f5}.file-picker{display:grid;place-items:center;width:46px;height:46px;border:1px solid #cbd5cf;background:#fff;color:#22312b}.file-picker.attached{color:#fff;background:#2f6f9f;border-color:#2f6f9f}.file-picker input{display:none}textarea{width:100%;height:46px;min-height:46px;resize:none;border:1px solid #cbd5cf;background:#fff;color:#16211d;padding:12px 13px;outline:none}textarea:focus,.connection-card input:focus,.search-box:focus-within{border-color:#1f8a70}.send-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:104px;height:46px;border:0;background:#1f8a70;color:#fff;padding:0 18px;font-weight:800}.send-button:disabled{cursor:not-allowed;background:#aebbb4}.spin{animation:spin .8s linear infinite}.call-dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;padding:28px;background:#0a110eb8}.call-dialog{display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(980px,100%);max-height:calc(100dvh - 56px);overflow:hidden;background:#111b17;color:#eef7f3;box-shadow:0 24px 80px #0000005c}.call-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.12)}.call-dialog-header h2{margin:0;font-size:24px;line-height:1.1}.call-status{display:inline-flex;align-items:center;min-height:32px;padding:0 10px;background:#ffffff14;color:#cfe2da;font-size:13px;font-weight:800}.call-status.connected{background:#1f8a7042;color:#bff4e5}.call-dialog-body{position:relative;display:grid;min-height:0;padding:18px;background:#0b120f}.call-dialog-body .remote-video-wrap{min-height:min(56vw,520px);aspect-ratio:16 / 9}.call-dialog-body .local-video-wrap{position:absolute;right:34px;bottom:34px;width:min(210px,24vw);aspect-ratio:16 / 10;border:1px solid rgba(255,255,255,.22);box-shadow:0 16px 40px #00000059}.call-dialog-actions{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px 20px 20px;border-top:1px solid rgba(255,255,255,.12)}.call-action{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:48px;height:44px;border:1px solid rgba(255,255,255,.18);background:#ffffff14;color:#f4faf7;padding:0 16px;font-weight:800}.call-action.accept{border-color:#1f8a70;background:#1f8a70}.call-action.danger{border-color:#b84c3d;background:#8a2f22}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:860px){.app-shell{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}.sidebar{grid-template-rows:auto auto auto;gap:12px;padding:16px;overflow:visible}.brand-mark{width:40px;height:40px}.search-box,.connection-card{display:none}.conversation-list{overflow:visible}.conversation{min-height:62px}.profile-card{display:none}.chat-panel{height:auto}.chat-header{align-items:flex-start;flex-direction:column;gap:12px;padding:18px 20px 14px}.header-actions{flex-wrap:wrap}.avatar.large{width:46px;height:46px}h1{font-size:26px}.trust-bar,.call-banner{min-height:38px;padding:0 20px;font-size:13px}.call-dialog-backdrop{padding:14px}.call-dialog{max-height:calc(100dvh - 28px)}.call-dialog-header{align-items:flex-start;flex-direction:column;gap:10px;padding:16px}.call-dialog-body{padding:12px}.call-dialog-body .remote-video-wrap{min-height:260px}.call-dialog-body .local-video-wrap{right:22px;bottom:22px;width:116px}.call-dialog-actions{padding:12px 16px 16px}.call-action{height:42px;padding:0 13px}.message-history{padding:18px 20px}.message{width:94%}.composer{grid-template-columns:42px minmax(0,1fr);padding:14px 20px 18px}.send-button{grid-column:1/-1;min-height:44px}}
