:root { color-scheme: light; --bg:#edf0f8; --panel:#fff; --ink:#20263b; --muted:#73798c; --line:#e2e6f0; --accent:#7768e8; --secondary:#45bda9; --dark:#12182b; --green:#45bda9; --yellow:#f0c96b; --shadow:0 28px 80px rgba(26,34,65,.16); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:radial-gradient(circle at 12% 8%,#f9f7ff 0,transparent 32%),linear-gradient(135deg,#eef2fa,#e7eaf5); }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
svg { width:19px; height:19px; stroke-width:2; }
.hidden { display:none !important; }
.app-shell { min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:20px; }

.login-view { width:min(1020px,100%); min-height:650px; display:grid; grid-template-columns:1.08fr .92fr; overflow:hidden; border:1px solid rgba(255,255,255,.7); border-radius:28px; background:var(--panel); box-shadow:var(--shadow); }
.login-intro { position:relative; display:flex; flex-direction:column; justify-content:center; padding:64px; color:#fff; background:linear-gradient(145deg,#18223d,#0d1223 72%); overflow:hidden; }
.login-intro::after { content:""; position:absolute; right:-90px; bottom:-150px; width:340px; height:340px; border:58px solid #7768e8; border-radius:44%; opacity:.78; transform:rotate(18deg); }
.brand-mark,.small-mark { display:grid; place-items:center; overflow:hidden; color:#fff; background:var(--dark); font-weight:900; }
.brand-mark img,.small-mark img { width:100%; height:100%; }
.brand-mark { width:58px; height:58px; margin-bottom:42px; border-radius:18px; box-shadow:0 14px 34px rgba(0,0,0,.25); }
.small-mark { width:40px; height:40px; border-radius:13px; font-size:13px; }
.eyebrow { margin:0 0 12px; color:#a7a9af; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:1.4px; }
h1 { margin:0; font-size:64px; line-height:.94; font-weight:820; letter-spacing:-2.4px; }
.intro-copy { max-width:400px; margin:24px 0 38px; color:#c7c8cc; font-size:17px; line-height:1.55; }
.member-preview { position:relative; z-index:1; display:flex; }
.avatar { display:grid; place-items:center; flex:0 0 auto; overflow:hidden; border-radius:50%; color:#fff; font-weight:850; text-transform:uppercase; background:#555; }
.avatar img { width:100%; height:100%; object-fit:cover; }
.preview-avatar { width:42px; height:42px; margin-right:-8px; border:3px solid var(--dark); font-size:12px; }
.login-card { align-self:center; display:grid; gap:20px; padding:64px 58px; }
.card-heading,.modal-heading { display:flex; gap:14px; align-items:flex-start; justify-content:space-between; margin-bottom:12px; }
.round-icon { display:grid; place-items:center; width:40px; height:40px; flex:0 0 auto; border-radius:50%; color:var(--accent); background:#fff0eb; }
.card-heading > div { flex:1; }
.card-heading h2,.modal-heading h2 { margin:0 0 5px; font-size:24px; }
.card-heading p,.modal-heading p { margin:0; color:var(--muted); font-size:14px; }
label { display:grid; gap:8px; color:#4f5157; font-size:13px; font-weight:750; }
select,input,textarea { width:100%; border:1px solid var(--line); border-radius:14px; outline:none; color:var(--ink); background:#f7f8fc; transition:border-color .16s,box-shadow .16s; }
select,input { height:52px; padding:0 14px; }
select:focus,input:focus,textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,92,53,.12); }
.primary-button { min-height:52px; display:flex; justify-content:center; align-items:center; gap:10px; padding:0 18px; border:0; border-radius:14px; color:#fff; background:linear-gradient(135deg,var(--accent),#5e52c9); font-weight:800; box-shadow:0 10px 25px rgba(119,104,232,.22); transition:background .16s,transform .16s; }
.primary-button:hover,.composer button:hover { background:var(--accent); }
.secondary-button { min-height:48px; display:flex; justify-content:center; align-items:center; gap:9px; padding:0 16px; border:1px solid var(--line); border-radius:14px; color:var(--ink); background:#fff; font-weight:780; transition:border-color .16s,color .16s,background .16s; }
.secondary-button:hover { border-color:#cfc8fa; color:var(--accent); background:#f8f6ff; }
.secondary-button svg { width:17px; height:17px; }
.form-error { min-height:18px; margin:-5px 0 0; color:#d93025; font-size:13px; }

.chat-view { width:min(1180px,100%); height:min(820px,calc(100vh - 40px)); display:grid; grid-template-columns:300px 1fr; overflow:hidden; border:1px solid rgba(255,255,255,.6); border-radius:24px; background:var(--panel); box-shadow:var(--shadow); }
.sidebar { min-width:0; display:flex; flex-direction:column; overflow-y:auto; padding:24px 16px 16px; color:#fff; background:linear-gradient(180deg,#151c32,#0e1426); }
.room-brand { display:flex; gap:12px; align-items:center; padding:0 7px 25px; border-bottom:1px solid #292a2e; }
.room-brand div,.me-card div,.contact-info { min-width:0; display:grid; gap:3px; }
.room-brand strong { font-size:14px; }
.room-brand span,.me-card span,.contact-info span { color:#92949b; font-size:12px; }
.section-label { display:flex; justify-content:space-between; padding:25px 8px 10px; color:#85878e; font-size:11px; font-weight:800; text-transform:uppercase; }
.group-call-button { width:100%; display:flex; gap:10px; align-items:center; margin-bottom:8px; padding:10px 9px; border:1px solid #303a58; border-radius:14px; color:#fff; text-align:left; background:#1a233c; }
.group-call-button:hover,.group-call-button.active { border-color:var(--accent); background:#292a30; }
.group-call-button > span:nth-child(2) { min-width:0; display:grid; flex:1; gap:2px; }
.group-call-button strong { font-size:13px; }
.group-call-button small { overflow:hidden; color:#92949b; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.group-call-button > svg { width:16px; color:var(--accent); }
.group-call-icon { width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; color:#10221c; background:var(--secondary); }
.group-call-icon svg { width:17px; }
.add-contact-button { width:100%; min-height:38px; display:flex; align-items:center; justify-content:center; gap:8px; margin:0 0 10px; border:1px dashed #3d3f45; border-radius:6px; color:#d6d8dd; background:transparent; font-size:12px; font-weight:800; }
.add-contact-button:hover { border-color:var(--secondary); color:#fff; background:#202126; }
.add-contact-button svg { width:16px; height:16px; }
.contact-list,.group-list { display:grid; align-content:start; gap:5px; }
.contact-list { max-height:34%; overflow-y:auto; }
.group-list { min-height:0; flex:1; overflow-y:auto; }
.groups-label { padding-top:15px; }
.sidebar-tools { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.sidebar-tools .add-contact-button { min-width:0; padding:7px; line-height:1.2; }
.friend-requests-button { width:100%; min-height:40px; display:flex; align-items:center; gap:8px; margin-bottom:9px; padding:0 10px; border:1px solid rgba(69,189,169,.35); border-radius:11px; color:#d9fff8; background:rgba(69,189,169,.12); font-size:12px; font-weight:800; }
.friend-requests-button span { flex:1; text-align:left; }
.friend-requests-button b { min-width:21px; height:21px; display:grid; place-items:center; border-radius:50%; color:#10231f; background:var(--secondary); }
.group-row { width:100%; display:flex; gap:11px; align-items:center; padding:10px 9px; border:0; border-radius:13px; color:#fff; text-align:left; background:transparent; }
.group-row:hover,.group-row.active { background:#1e2943; }
.group-avatar { width:44px; height:44px; display:grid; place-items:center; flex:0 0 auto; border-radius:14px; color:#fff; background:linear-gradient(135deg,var(--accent),var(--secondary)); }
.group-row > span:last-child { min-width:0; display:grid; gap:3px; }
.group-row strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.group-row small { color:#929aae; font-size:11px; }
.contact-row { width:100%; display:flex; gap:11px; align-items:center; padding:10px 9px; border:0; border-radius:13px; color:#fff; text-align:left; background:transparent; }
.contact-row:hover,.contact-row.active { background:#1e1f23; }
.contact-row .avatar { width:44px; height:44px; font-size:12px; }
.contact-info { flex:1; }
.contact-info strong { overflow:hidden; text-overflow:ellipsis; font-size:14px; }
.contact-status { display:flex; align-items:center; gap:5px; }
.contact-status::before { content:""; width:6px; height:6px; border-radius:50%; background:#55575d; }
.contact-row.online .contact-status::before { background:var(--green); }
.unread { min-width:20px; height:20px; display:grid; place-items:center; padding:0 6px; border-radius:10px; color:#fff; background:var(--accent); font-size:11px; font-style:normal; font-weight:800; }
.me-card { display:flex; gap:9px; align-items:center; padding:14px 5px 2px; border-top:1px solid #292a2e; }
.medium { width:40px; height:40px; font-size:12px; }
.me-card div { flex:1; }
.icon-button { width:42px; height:42px; display:grid; place-items:center; flex:0 0 auto; border:1px solid var(--line); border-radius:50%; color:var(--ink); background:#fff; transition:color .16s,background .16s,border-color .16s; }
.icon-button:hover { color:var(--accent); border-color:#ffd0c5; background:#fff4f1; }
.dark-icon { width:34px; height:34px; border:0; color:#92949b; background:transparent; }
.dark-icon svg { width:17px; height:17px; }
.dark-icon:hover { color:#fff; background:#27282d; }
.chat-main { min-width:0; min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto auto; background:#f5f6fb; }
.chat-header { min-height:82px; display:flex; gap:13px; align-items:center; padding:14px 25px; border-bottom:1px solid var(--line); background:#fff; }
.header-avatar { width:45px; height:45px; font-size:12px; }
.peer-heading { min-width:0; flex:1; }
.peer-heading h2 { margin:0 0 4px; font-size:18px; }
.peer-heading p { margin:0; color:var(--muted); font-size:12px; }
.call-actions { display:flex; gap:8px; }
.accent-button { border-color:var(--accent); color:#fff; background:var(--accent); }
.accent-button:hover { color:#fff; background:#e94924; }
.mobile-back { display:none; }
.messages { min-height:0; display:flex; flex-direction:column; gap:14px; overflow-x:hidden; overflow-y:auto; padding:28px 34px; scroll-behavior:smooth; scrollbar-gutter:stable; overscroll-behavior:contain; touch-action:pan-y; -webkit-overflow-scrolling:touch; }
.messages::-webkit-scrollbar { width:8px; }
.messages::-webkit-scrollbar-track { background:transparent; }
.messages::-webkit-scrollbar-thumb { border:2px solid transparent; border-radius:8px; background:#c9c7c1; background-clip:padding-box; }
.messages::-webkit-scrollbar-thumb:hover { background:#aaa8a2; background-clip:padding-box; }
.empty-state { margin:auto; display:grid; justify-items:center; color:var(--muted); text-align:center; }
.empty-state .avatar { width:58px; height:58px; margin-bottom:14px; font-size:15px; }
.empty-state strong { color:var(--ink); font-size:16px; }
.empty-state p { margin:6px 0; font-size:13px; }
.message { max-width:min(68%,590px); }
.message.mine { align-self:flex-end; }
.message.peer { align-self:flex-start; }
.message-meta { display:flex; gap:10px; align-items:baseline; margin:0 3px 6px; color:var(--muted); font-size:11px; }
.message-meta span:first-child { color:var(--author,var(--ink)); font-weight:850; }
.message.mine .message-meta { justify-content:flex-end; }
.message-read { color:#8b8e95 !important; font-weight:650 !important; }
.message-read.is-read { color:var(--green) !important; }
.message-body { padding:11px 14px; border:1px solid var(--line); border-radius:6px 18px 18px 18px; background:#fff; box-shadow:0 7px 20px rgba(27,35,67,.05); white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.45; }
.message.mine .message-body { border:0; border-radius:18px 6px 18px 18px; color:#fff; background:linear-gradient(135deg,#7768e8,#5d55c8); }
.typing { min-height:25px; padding:0 34px; color:var(--muted); font-size:12px; }
.composer { display:grid; grid-template-columns:40px 1fr 48px; gap:10px; padding:14px 18px 18px; border-top:1px solid var(--line); background:#fff; }
textarea { min-height:48px; max-height:140px; resize:none; padding:13px 15px; line-height:1.4; }
.composer button { width:48px; height:48px; display:grid; place-items:center; border:0; border-radius:6px; color:#fff; background:var(--dark); transition:background .16s; }
.composer .attach-button { width:40px; height:48px; color:var(--muted); background:#eef1f3; }
.composer .attach-button:hover { color:#fff; background:var(--secondary); }
button:disabled,textarea:disabled { cursor:not-allowed; opacity:.48; }

.modal-backdrop { position:fixed; z-index:40; inset:0; display:grid; place-items:center; padding:20px; background:rgba(10,11,13,.68); backdrop-filter:blur(5px); }
.modal-card { width:min(460px,100%); max-height:calc(100vh - 30px); overflow-y:auto; display:grid; gap:18px; padding:28px; border-radius:22px; background:#fff; box-shadow:var(--shadow); }
.modal-heading { margin:0; }
.avatar-editor { display:flex; gap:16px; align-items:center; padding:15px; border:1px solid var(--line); border-radius:6px; background:#f8f7f4; }
.profile-avatar { width:72px; height:72px; font-size:18px; }
.avatar-editor > div { display:flex; flex-wrap:wrap; gap:8px; }
.upload-button,.text-button { display:flex; align-items:center; gap:7px; padding:9px 11px; border:0; border-radius:5px; font-size:12px; font-weight:750; }
.upload-button { color:#fff; background:var(--dark); cursor:pointer; }
.upload-button svg { width:15px; }
.text-button { color:#b22b1b; background:#ffebe6; }
.optional { color:var(--muted); font-size:11px; font-weight:500; }
.install-app-card { display:flex; gap:10px; align-items:center; padding:12px; border:1px solid #dedaf9; border-radius:14px; background:#f6f4ff; }
.install-app-card > span { width:36px; height:36px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; color:#fff; background:var(--accent); }
.install-app-card > span svg { width:17px; }
.install-app-card > div { min-width:0; display:grid; flex:1; gap:2px; }
.install-app-card strong { font-size:12px; }
.install-app-card small { color:var(--muted); font-size:10px; line-height:1.3; }
.install-app-card button { min-height:34px; padding:0 11px; border:0; border-radius:10px; color:#fff; background:var(--accent); font-size:11px; font-weight:800; }
.search-result,.request-row { display:flex; align-items:center; gap:11px; padding:12px; border:1px solid var(--line); border-radius:14px; background:#f7f8fc; }
.search-result > div,.request-row > div { min-width:0; display:grid; flex:1; gap:3px; }
.search-result small,.request-row small { color:var(--muted); }
.search-result button,.request-actions button { min-height:34px; padding:0 10px; border:0; border-radius:9px; color:#fff; background:var(--accent); font-size:11px; font-weight:800; }
.request-list,.member-picker { display:grid; gap:8px; }
.request-actions { display:flex; gap:6px; }
.request-actions .decline-request { color:#a93434; background:#ffebeb; }
.field-title { display:block; margin-bottom:8px; color:#4f5157; font-size:13px; font-weight:750; }
.member-picker { max-height:250px; overflow-y:auto; padding:5px; border:1px solid var(--line); border-radius:14px; }
.member-option { display:flex; align-items:center; gap:10px; padding:9px; border-radius:10px; font-weight:700; }
.member-option:hover { background:#f2f0ff; }
.member-option input { width:18px; height:18px; }
.attachment-actions { display:flex; gap:6px; margin-top:8px; }
.attachment-action { min-height:28px; padding:0 9px; border:0; border-radius:8px; color:#fff; background:var(--accent); font-size:10px; font-weight:800; }
.attachment-action.delete { color:#9e3030; background:#ffe9e9; }
.attachment-trash-note { display:block; margin-top:6px; color:#d08080; font-size:10px; }

html[data-theme="dark"] { color-scheme:dark; --bg:#090d18; --panel:#151b2c; --ink:#f0f2f8; --muted:#98a1b7; --line:#2a334b; --shadow:0 28px 80px rgba(0,0,0,.38); }
html[data-theme="dark"] body { background:radial-gradient(circle at 12% 8%,#1d2340 0,transparent 34%),#090d18; }
html[data-theme="dark"] .login-view,html[data-theme="dark"] .login-card,html[data-theme="dark"] .chat-header,html[data-theme="dark"] .composer,html[data-theme="dark"] .modal-card { background:var(--panel); }
html[data-theme="dark"] .chat-main,html[data-theme="dark"] .avatar-editor,html[data-theme="dark"] select,html[data-theme="dark"] input,html[data-theme="dark"] textarea,html[data-theme="dark"] .search-result,html[data-theme="dark"] .request-row { background:#101625; }
html[data-theme="dark"] .message-body { background:#1b2337; }
html[data-theme="dark"] .secondary-button,html[data-theme="dark"] .icon-button { color:var(--ink); background:#1b2337; }
html[data-theme="dark"] label,html[data-theme="dark"] .field-title { color:#c2c8d7; }
html[data-theme="dark"] .reply-composer,html[data-theme="dark"] .attachment-preview { background:#142820; }
.logout-profile-button { min-height:44px; display:none; align-items:center; justify-content:center; gap:8px; border:1px solid #ffd0c5; border-radius:6px; color:#b22b1b; background:#fff4f1; font-weight:750; }
.toast { position:fixed; z-index:100; left:50%; bottom:28px; max-width:min(420px,calc(100vw - 30px)); transform:translateX(-50%); padding:12px 16px; border-radius:6px; color:#fff; background:#25262a; box-shadow:0 12px 30px rgba(0,0,0,.2); font-size:13px; }
.notification-banner { position:fixed; z-index:110; top:max(14px,env(safe-area-inset-top)); left:50%; width:min(420px,calc(100vw - 24px)); display:flex; gap:11px; align-items:center; transform:translateX(-50%); padding:11px 13px; border:1px solid #353941; border-radius:8px; color:#fff; text-align:left; background:#1d2026; box-shadow:0 16px 45px rgba(0,0,0,.28); animation:banner-in .22s ease-out; }
.notification-banner .avatar { width:40px; height:40px; font-size:11px; }
.notification-banner span { min-width:0; display:grid; flex:1; gap:3px; }
.notification-banner strong { font-size:13px; }
.notification-banner small { overflow:hidden; color:#b7bbc3; text-overflow:ellipsis; white-space:nowrap; }
.notification-banner > svg { color:var(--secondary); }
@keyframes banner-in { from { opacity:0; transform:translate(-50%,-16px); } }

.call-overlay { position:fixed; z-index:80; inset:0; overflow:hidden; color:#fff; background:#111215; }
#remoteVideo,#localVideo { position:absolute; width:100%; height:100%; object-fit:cover; }
#localVideo { z-index:3; top:20px; right:20px; left:auto; width:min(220px,25vw); height:auto; aspect-ratio:4/3; display:none; border:2px solid rgba(255,255,255,.4); border-radius:8px; background:#25262b; box-shadow:0 15px 40px rgba(0,0,0,.3); }
.call-overlay.has-local #localVideo { display:block; }
.call-overlay.audio-only video { opacity:0; pointer-events:none; }
.call-shade { position:absolute; z-index:2; inset:0; background:linear-gradient(to bottom,rgba(0,0,0,.15),rgba(0,0,0,.05) 55%,rgba(0,0,0,.72)); }
.call-overlay.audio-only .call-shade { background:radial-gradient(circle at center,#303137 0,#17181c 68%); }
.group-call-panel { position:absolute; z-index:4; inset:0; display:grid; grid-template-rows:auto 1fr; padding:24px 24px 120px; background:#111215; }
.group-call-heading { display:flex; justify-content:space-between; align-items:center; padding:0 4px 18px; }
.group-call-heading div { display:flex; gap:9px; align-items:center; }
.group-call-heading p { margin:0; color:#a9abb1; font-size:13px; }
.live-dot { width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(49,184,107,.14); }
.group-video-grid { min-height:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; align-content:center; }
.group-video-tile { position:relative; min-height:210px; overflow:hidden; border:1px solid #383a40; border-radius:8px; background:radial-gradient(circle at center,#2f3036,#1b1c20 68%); }
.group-video-tile video { position:absolute; z-index:2; inset:0; width:100%; height:100%; opacity:0; object-fit:cover; transition:opacity .2s; }
.group-video-tile.connected video { opacity:1; }
.group-tile-avatar { position:absolute; z-index:1; top:50%; left:50%; width:84px; height:84px; transform:translate(-50%,-50%); font-size:22px; }
.group-tile-name { position:absolute; z-index:3; left:12px; bottom:10px; padding:5px 8px; border-radius:4px; color:#fff; background:rgba(0,0,0,.52); font-size:12px; font-weight:750; backdrop-filter:blur(5px); }
.group-call-panel + .call-person { z-index:4; }
.call-overlay.group-mode > #remoteVideo,.call-overlay.group-mode > #localVideo,.call-overlay.group-mode > .call-shade,.call-overlay.group-mode > .call-person { display:none !important; }
.call-person { position:absolute; z-index:4; top:50%; left:50%; display:grid; justify-items:center; transform:translate(-50%,-50%); text-align:center; }
.call-avatar { width:112px; height:112px; margin-bottom:18px; border:4px solid rgba(255,255,255,.2); font-size:28px; box-shadow:0 20px 55px rgba(0,0,0,.3); }
.call-person h2 { margin:0 0 7px; font-size:28px; }
.call-person p { margin:0; color:#c8c9cd; }
.incoming-actions,.active-call-actions { position:absolute; z-index:5; left:50%; bottom:45px; display:flex; gap:20px; transform:translateX(-50%); }
.call-control { width:58px; height:58px; display:grid; place-items:center; border:0; border-radius:50%; color:#fff; background:rgba(255,255,255,.18); backdrop-filter:blur(10px); }
.call-control.off { color:#17181b; background:#fff; }
.call-control.accept { background:var(--green); }
.call-control.decline { background:#e6403a; }

@media (max-width:760px) {
  .app-shell { padding:0; }
  .login-view { min-height:100vh; min-height:100dvh; grid-template-columns:1fr; border-radius:0; }
  .login-intro { min-height:305px; padding:32px 27px; justify-content:flex-start; }
  .brand-mark { width:42px; height:42px; margin-bottom:24px; }
  h1 { font-size:46px; }
  .intro-copy { margin:14px 0 20px; font-size:14px; }
  .login-intro::after { width:220px; height:220px; right:-95px; bottom:-120px; border-width:38px; }
  .login-card { padding:32px 25px; }
  .logout-profile-button { display:flex; }
  .chat-view { width:100%; height:100vh; height:100dvh; grid-template-columns:88px 1fr; border-radius:0; }
  .sidebar { padding:max(15px,env(safe-area-inset-top)) 8px max(10px,env(safe-area-inset-bottom)); }
  .room-brand { justify-content:center; padding:0 0 17px; }
  .room-brand div,.section-label,.contact-info,.me-card div,.dark-icon:last-child { display:none; }
  .group-call-button { width:56px; justify-self:center; justify-content:center; padding:8px; border:0; background:#202126; }
  .group-call-button > span:nth-child(2),.group-call-button > svg { display:none; }
  .group-call-icon { width:40px; height:40px; }
  .add-contact-button { width:56px; min-height:40px; justify-self:center; padding:0; border:0; background:#202126; }
  .add-contact-button span { display:none; }
  .contact-list { justify-items:center; padding-top:13px; }
  .contact-row { width:58px; justify-content:center; padding:7px; }
  .contact-row .avatar { width:44px; height:44px; }
  .unread { position:absolute; margin:-32px 0 0 34px; }
  .me-card { justify-content:center; flex-wrap:wrap; padding-top:12px; }
  .me-card .medium { width:42px; height:42px; }
  .dark-icon { width:38px; height:34px; }
  .chat-header { min-height:72px; padding:max(11px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 11px 12px; gap:9px; }
  .header-avatar { width:40px; height:40px; }
  .call-actions { gap:5px; }
  .call-actions .icon-button { width:38px; height:38px; }
  .mobile-back { display:none; }
  .messages { padding:20px 14px; }
  .message { max-width:86%; }
  .typing { padding:0 15px; }
  .composer { grid-template-columns:40px 1fr 46px; padding:10px max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) 10px; }
  #localVideo { top:12px; right:12px; width:105px; }
  .group-call-panel { padding:16px 10px 105px; }
  .group-video-grid { grid-template-columns:1fr; grid-template-rows:repeat(3,minmax(0,1fr)); gap:7px; align-content:stretch; }
  .group-video-tile { min-height:0; }
  .group-tile-avatar { width:60px; height:60px; font-size:16px; }
  .call-avatar { width:92px; height:92px; }
  .call-person h2 { font-size:24px; }
  .incoming-actions,.active-call-actions { bottom:max(30px,calc(env(safe-area-inset-bottom) + 18px)); }
}

@media (display-mode:standalone) and (max-width:760px) {
  body { background:var(--dark); }
}

@media (max-width:470px) {
  .chat-view { grid-template-columns:72px 1fr; }
  .sidebar { padding-left:5px; padding-right:5px; }
  .small-mark { width:36px; height:36px; }
  .contact-row { width:52px; }
  .contact-row .avatar { width:40px; height:40px; }
  .peer-heading h2 { font-size:15px; }
  .peer-heading p { max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

/* TRIO message tools and phone-first navigation */
.message-row { display:flex; gap:7px; align-items:center; }
.message-body { min-width:0; }
.message.mine .message-row { flex-direction:row-reverse; }
.message-action { width:32px; height:32px; display:grid; place-items:center; flex:0 0 auto; border:0; border-radius:50%; opacity:0; color:var(--muted); background:#fff; box-shadow:0 5px 14px rgba(20,22,26,.1); transition:opacity .15s,color .15s,transform .15s; }
.message:hover .message-action,.message-action:focus-visible { opacity:1; }
.message-action:hover { color:var(--accent); transform:translateY(-1px); }
.message-action svg { width:15px; }
.quoted-message { width:100%; display:grid; gap:2px; margin:0 0 8px; padding:0 0 0 9px; border:0; border-left:3px solid var(--secondary); color:inherit; text-align:left; background:transparent; }
.quoted-message strong { color:var(--secondary); font-size:11px; }
.quoted-message span { overflow:hidden; opacity:.72; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.attachment-card { display:flex; gap:10px; align-items:center; margin-top:8px; padding:10px; border:1px solid rgba(34,185,135,.28); border-radius:6px; color:inherit; text-decoration:none; background:rgba(34,185,135,.08); }
.attachment-card:first-child { margin-top:0; }
.attachment-card svg { flex:0 0 auto; color:var(--secondary); }
.attachment-card span { min-width:0; display:grid; gap:2px; }
.attachment-card strong,.attachment-card small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.attachment-card strong { font-size:13px; }
.attachment-card small { opacity:.72; font-size:11px; }
.attachment-card.is-deleted { opacity:.62; pointer-events:none; }
.message-highlight .message-body { animation:message-highlight 1.3s ease; }
@keyframes message-highlight { 0%,100% { box-shadow:0 5px 15px rgba(24,25,28,.04); } 35% { box-shadow:0 0 0 5px rgba(34,185,135,.24); } }
.reply-composer,.attachment-preview { grid-column:1/-1; min-width:0; display:flex; gap:10px; align-items:center; margin:-4px 2px 0; padding:9px 11px; border-left:3px solid var(--secondary); border-radius:4px; background:#f0faf6; }
.reply-composer > svg { flex:0 0 auto; color:var(--secondary); }
.attachment-preview > svg { flex:0 0 auto; color:var(--secondary); }
.reply-composer div,.attachment-preview span { min-width:0; flex:1; }
.reply-composer span,.attachment-preview small { color:var(--muted); font-size:11px; }
.reply-composer strong,.attachment-preview strong { color:var(--ink); }
.reply-composer p { margin:2px 0 0; overflow:hidden; color:#555a63; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.composer .reply-cancel { width:30px; height:30px; border-radius:50%; color:var(--muted); background:transparent; }
.composer .reply-cancel:hover { color:var(--ink); background:#dfeee8; }
.call-control.labeled { width:82px; height:64px; gap:3px; border-radius:8px; }
.call-control.labeled span { font-size:10px; font-weight:750; }

@media (max-width:760px) {
  body { overflow:hidden; background:var(--dark); }
  .chat-view { display:block; width:100%; height:100dvh; }
  .chat-view .sidebar { width:100%; height:100%; padding:max(20px,env(safe-area-inset-top)) 18px max(15px,env(safe-area-inset-bottom)); }
  .chat-view .chat-main { width:100%; height:100%; }
  .chat-view.mobile-list-open .chat-main { display:none; }
  .chat-view.mobile-chat-open .sidebar { display:none; }
  .room-brand { justify-content:flex-start; padding:0 2px 20px; }
  .room-brand div,.section-label,.contact-info,.me-card div { display:grid; }
  .room-brand strong { font-size:18px; letter-spacing:.5px; }
  .small-mark { width:46px; height:46px; border-radius:8px; }
  .section-label { display:flex; padding:22px 4px 10px; }
  .group-call-button { width:100%; justify-self:stretch; justify-content:flex-start; margin-bottom:12px; padding:13px; border:1px solid #343840; border-radius:8px; }
  .group-call-button > span:nth-child(2) { display:grid; }
  .group-call-button > svg { display:block; }
  .group-call-icon { width:44px; height:44px; }
  .add-contact-button { width:100%; min-height:42px; justify-self:stretch; margin-bottom:10px; padding:0 12px; border:1px dashed #3d3f45; border-radius:8px; background:transparent; }
  .add-contact-button span { display:inline; }
  .sidebar-tools { grid-template-columns:1fr 1fr; }
  .contact-list { max-height:32%; }
  .contact-list { justify-items:stretch; gap:5px; padding:0; }
  .contact-row { position:relative; width:100%; justify-content:flex-start; gap:13px; padding:12px 10px; border-radius:8px; }
  .contact-row .avatar { width:52px; height:52px; }
  .contact-info strong { font-size:16px; }
  .contact-info span { font-size:12px; }
  .unread { position:static; margin:0; }
  .me-card { justify-content:flex-start; flex-wrap:nowrap; padding:14px 3px 0; }
  .me-card div { flex:1; }
  .me-card .medium { width:44px; height:44px; }
  .dark-icon,.dark-icon:last-child { display:grid; width:38px; height:38px; }
  .chat-header { min-height:70px; padding:max(10px,env(safe-area-inset-top)) 10px 10px; }
  .mobile-back { display:grid; width:38px; height:38px; border:0; background:transparent; }
  .peer-heading h2 { font-size:16px; }
  .peer-heading p { max-width:110px; }
  .messages { padding:18px 12px; }
  .message { max-width:92%; }
  .message-action { width:30px; height:30px; opacity:1; box-shadow:none; background:transparent; }
  .message-meta { gap:7px; }
  .message-read { max-width:78px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .composer { grid-template-columns:38px 1fr 46px; gap:8px; padding:9px max(10px,env(safe-area-inset-right)) max(9px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); }
  .composer .attach-button { width:38px; height:46px; border-radius:50%; }
  .composer .send-button { width:46px; height:46px; border-radius:50%; background:var(--accent); }
  textarea { min-height:46px; padding:12px 14px; border-radius:18px; }
  .group-call-heading { align-items:flex-start; }
  .active-call-actions { width:100%; justify-content:center; gap:12px; }
  .call-control.labeled { width:76px; height:62px; }
}