/* Ping 3.0 — calm, VK-inspired desktop layout with Telegram-style profile sheets. */
:root{
  color-scheme:light;
  --blue:#087cf5;--blue-strong:#006de4;--pale:#edf5ff;
  --ink:#172438;--sub:#8592a3;--line:#e6ebf2;--canvas:#f2f5f9;
  --panel:#fff;--radius:18px;--app-height:100dvh;--vv-top:0px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-synthesis:none;-webkit-font-smoothing:antialiased;
  color:var(--ink);background:var(--canvas);
}
*{box-sizing:border-box}
html,body{height:100%;min-height:100%;margin:0;overflow:hidden}
body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
button,input,textarea{font:inherit}
button{cursor:pointer;touch-action:manipulation}
button:disabled{opacity:.55;cursor:wait}
a{color:var(--blue)}
.hidden,.visually-hidden{display:none!important}
input,textarea{outline:0}
svg{display:block}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #449cf6;outline-offset:2px}

/* Authorization screen */
.auth-shell{position:relative;height:100vh;height:100dvh;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 18px;background:radial-gradient(circle at 25% 1%,#e7f2ff 0,transparent 36%),#f5f7fb}
.auth-header{display:flex;align-items:center;gap:10px;margin:0 auto 22px}
.logo-icon{height:39px;width:39px;display:inline-grid;place-items:center;background:var(--blue);color:white;border-radius:12px;font-size:24px;font-weight:900;letter-spacing:-3px;padding-right:4px;box-shadow:0 7px 20px #087cf52f}
.logo-icon span,.logo-type span{color:#74c0ff}
.logo-type{font-size:26px;font-weight:800;letter-spacing:-1.8px}
.header-tag{margin-left:8px;color:#a0abba;font-size:10px;font-weight:750;letter-spacing:1.3px}
.auth-card{width:min(100%,430px);background:white;padding:26px 38px 31px;border:1px solid #e9edf4;border-radius:23px;box-shadow:0 19px 60px #334f6d14}
.auth-illustration{height:140px;position:relative;background:linear-gradient(145deg,#eaf4ff,#f6f9ff);border-radius:17px;margin:0 0 27px;overflow:hidden}
.auth-illustration-bubble{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(15deg);width:68px;height:68px;display:grid;place-items:center;color:#fff;border-radius:25px;background:#1388fa;font-size:35px;box-shadow:0 14px 36px #168bfa53}
.mini-message{position:absolute;z-index:2;padding:9px 14px;background:#fff;border-radius:14px;font-size:12px;font-weight:650;box-shadow:0 6px 17px #58769f26}
.mini-message.left{left:21px;top:25px;display:flex;gap:8px;align-items:center}
.mini-dot{width:23px;height:23px;border-radius:50%;background:#dbe6ff}
.mini-lines{display:flex;flex-direction:column;gap:4px}.mini-lines i{height:4px;width:36px;background:#c6d9ed;border-radius:10px}.mini-lines i+ i{width:24px}
.mini-message.right{right:20px;top:18px;background:var(--blue);color:#fff}.mini-message.lower{bottom:19px;right:38px}
.eyebrow{font-size:10px;font-weight:800;color:var(--blue);letter-spacing:1.9px;margin:0}
.auth-card h1{font-size:30px;letter-spacing:-1px;margin:8px 0 8px}.auth-card h1 em{font-style:normal;color:var(--blue)}
.auth-subtitle{font-size:13px;color:#8c98a9;margin:0 0 27px;line-height:1.6}
#auth-form{display:flex;flex-direction:column;gap:9px}
#auth-form label,.edit-dialog label{font-size:12px;font-weight:700;color:#435268;margin-top:9px}
#auth-form input,.edit-dialog input,.edit-dialog textarea{border:1px solid #e1e8f0;background:#f8fafc;border-radius:11px;padding:13px 14px;width:100%;min-height:46px;color:#172438;font-size:16px}
#auth-form input:focus,.edit-dialog input:focus,.edit-dialog textarea:focus{border-color:#4fa5fb;background:#fff;box-shadow:0 0 0 3px #087cf51a}
#invite-field{display:flex;flex-direction:column;gap:9px}
.form-error{color:#d5445b;font-size:12px;min-height:8px;margin:0}
.primary-button{min-height:46px;width:100%;border:0;border-radius:11px;background:var(--blue);color:#fff;font-size:14px;font-weight:750;padding:12px 18px;display:flex;justify-content:center;align-items:center;gap:10px}
.primary-button:hover{background:var(--blue-strong)}.primary-button span{margin-left:auto;font-size:19px}
.auth-switch{margin:20px 0 0;text-align:center;color:#8a96a7;font-size:13px}
.text-button,.link-button{border:0;background:transparent;color:var(--blue);padding:0;font-weight:700}.text-button:hover,.link-button:hover{text-decoration:underline}
.footnote{font-size:10px;font-weight:750;letter-spacing:1.2px;color:#b6c0ce;margin:24px 0 0}

/* Three-column desktop shell */
.messenger{width:min(100%,1590px);height:100vh;height:100dvh;height:var(--app-height,100dvh);margin:auto;display:grid;grid-template-columns:218px 355px minmax(0,1fr);background:#fff;box-shadow:0 0 65px #1a36500b;overflow:hidden;position:relative}
.rail{background:#fafbfd;display:flex;flex-direction:column;border-right:1px solid var(--line);padding:30px 12px 18px;min-height:0}
.rail-brand{display:flex;align-items:center;gap:10px;margin:0 16px 47px}
.nav-section-label,.section-eyebrow{font-size:10px;letter-spacing:1.4px;font-weight:750;color:#a1acb9;padding-left:15px;margin-bottom:12px}
.rail-link{border:0;background:transparent;display:flex;align-items:center;gap:12px;color:#68788d;width:100%;height:46px;padding:0 13px;border-radius:11px;text-align:left;font-size:13px;font-weight:650;margin-bottom:3px;white-space:nowrap}
.rail-link svg{width:20px;height:20px}
.rail-link:hover{background:#f0f4fa;color:#263e5b}.rail-link.active{background:#eaf4ff;color:var(--blue)}
.rail-ico{width:23px;height:23px;display:grid;place-items:center}
.rail-counter{margin-left:auto;min-width:20px;text-align:center;border-radius:10px;background:#d9edff;color:var(--blue);font-size:10px;padding:3px 5px}
.rail-counter:empty{display:none}
.rail-separator{height:1px;background:var(--line);margin:20px 12px 25px}
.rail-fill{flex:1;min-height:20px}
.rail-account{background:#fff;border:1px solid var(--line);border-radius:13px;padding:10px;box-shadow:0 4px 12px #132b4210}
.account-main{border:0;background:transparent;width:100%;display:flex;align-items:center;gap:9px;text-align:left;padding:0;min-width:0}
.rail-account-info{display:flex;min-width:0;flex:1;flex-direction:column;gap:4px}
.rail-account-info strong{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-account-info small{font-size:10px;color:var(--sub)}
.account-more{color:#a9b3bf;font-size:11px;letter-spacing:1px}
.logout-button{border:0;background:#f4f7fa;color:#8d9bab;border-radius:8px;width:100%;padding:8px;font-size:11px;margin-top:10px}
.logout-button:hover{color:#e05d60;background:#fff1f2}
.sidebar{min-height:0;min-width:0;display:flex;flex-direction:column;background:var(--panel);border-right:1px solid var(--line)}
.sidebar-top{padding:35px 24px 16px}
.sidebar-top .section-eyebrow{padding-left:1px;display:block;margin-bottom:9px}
.sidebar-title-row{display:flex;align-items:center;gap:8px}
.sidebar-title-row h1{font-size:25px;line-height:1.2;letter-spacing:-.9px;margin:0;flex:1}
.icon-button{border:0;background:transparent;color:#8290a4;display:grid;place-items:center;width:40px;height:40px;border-radius:11px;flex-shrink:0}
.icon-button:hover{color:var(--blue);background:#edf5ff}.icon-button svg{height:20px;width:20px}
.notify-button{font-size:17px}.notify-button.selected{background:#eaf4ff;color:var(--blue)}
.search-box{display:flex;align-items:center;gap:10px;background:#f2f5f9;border-radius:11px;margin:4px 18px 27px;padding:0 13px;min-height:43px}
.search-box svg{width:18px;height:18px;color:#9aa8b9;flex-shrink:0}
.search-box input{background:transparent;border:0;width:100%;min-width:0;font-size:13px;color:#263850;padding:12px 0}
.search-box input::placeholder{color:#a4afbd}.search-box kbd{font-family:inherit;color:#b4bdc8;white-space:nowrap;font-size:10px}
.list-heading{padding:0 22px 11px;display:flex;gap:9px;align-items:center;font-size:10px;font-weight:800;letter-spacing:1.1px;color:#9caab9}
.list-count{color:#7893af;background:#f1f5fa;border-radius:7px;min-width:20px;padding:3px 6px;text-align:center;letter-spacing:0}
.users-list{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 10px 14px;min-height:0}
.user-row{width:100%;min-height:79px;background:transparent;border:0;border-radius:13px;display:flex;align-items:center;gap:12px;text-align:left;color:var(--ink);padding:12px;margin-bottom:2px;position:relative}
.user-row:hover{background:#f5f8fc}.user-row.active{background:#eaf4ff}
.user-row .avatar{height:50px;width:50px;flex:0 0 50px;font-size:19px}
.avatar{background:linear-gradient(145deg,#63b4fc,#2584e9);display:inline-grid;place-items:center;position:relative;color:#fff;font-weight:760;user-select:none;overflow:visible;border-radius:50%;flex-shrink:0;min-width:0;background-size:cover;background-position:center}
.avatar img{height:100%;width:100%;object-fit:cover;border-radius:inherit;display:block}
.avatar-me{height:40px;width:40px;font-size:16px}
.user-row .status-indicator{position:absolute;bottom:0;right:0;height:12px;width:12px;border:2.5px solid #fff;background:#b8c0cc;border-radius:50%}
.user-row .status-indicator.online{background:#22bc89}
.user-info{display:flex;flex:1;min-width:0;flex-direction:column;gap:6px}
.user-info strong{font-size:13px;font-weight:760;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.last-preview{font-size:12px;color:#96a3b4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;max-width:100%}
.unread{min-width:22px;height:22px;background:var(--blue);color:#fff;border-radius:13px;font-size:11px;font-weight:800;display:grid;place-items:center;padding:0 5px}
.list-time{font-size:10px;color:#a7b2c0;align-self:flex-start;white-space:nowrap;padding-top:2px}
.no-users{text-align:center;color:#99a5b5;font-size:12px;line-height:1.7;padding:32px 20px}
.sidebar-footer{height:55px;min-height:55px;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:0 23px;color:#8e9daf;font-size:11px}
.online-dot{display:inline-block;width:7px;height:7px;background:#28c38a;border-radius:50%;flex-shrink:0}
.version-note{margin-left:auto;font-size:10px;color:#b6c0ce}

/* Conversation */
.conversation{min-width:0;min-height:0;background:linear-gradient(180deg,#f6f9fc,#f0f5fa);display:flex;flex-direction:column}
.chat-empty{margin:auto;text-align:center;max-width:415px;padding:25px 20px 80px}
.welcome-art{width:205px;height:156px;margin:0 auto 35px;position:relative}
.art-card{position:absolute;display:grid;place-items:center;box-shadow:0 16px 32px #386c9b26;background:#fff;border:1px solid #e4eefc}
.art-a{left:5px;top:34px;height:92px;width:92px;color:#fff;background:#60b7ff;font-size:42px;border-radius:29px;transform:rotate(-20deg)}
.art-b{right:5px;top:2px;height:116px;width:116px;border-radius:32px;font-size:54px;transform:rotate(12deg)}
.art-c{right:33px;bottom:0;height:53px;width:53px;border-radius:17px;color:#ff668e;font-size:29px;transform:rotate(-8deg)}
.welcome-pill{background:#e6f2ff;border-radius:30px;padding:7px 11px;color:var(--blue);font-size:10px;font-weight:850;letter-spacing:1px}
.chat-empty h2{font-size:27px;margin:16px 0 9px;letter-spacing:-1px}
.chat-empty p{font-size:13px;line-height:1.75;color:#90a0b2;margin:0 auto 20px}
.empty-action{border:0;border-radius:10px;padding:12px 20px;background:var(--blue);color:white;font-weight:700;font-size:12px}
.chat-active{display:flex;flex-direction:column;min-height:0;height:100%}
.chat-header{min-height:77px;display:flex;align-items:center;padding:10px 28px;background:#fff;border-bottom:1px solid var(--line);gap:10px;flex-shrink:0}
.peer-title-button{background:none;border:0;display:flex;align-items:center;text-align:left;gap:12px;padding:0;min-width:0}
.avatar-small{width:47px;height:47px;font-size:18px}
.peer-details{display:flex;flex-direction:column;gap:5px;min-width:0}
.peer-details strong{font-size:14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.peer-details small{font-size:11px;color:#9eacbc}
.peer-details small.online{color:#1bb485}
.chat-header-spacer{flex:1}
.chat-private{color:#9faaba;font-size:11px;white-space:nowrap}
.back-button{display:none}
.chat-search{display:flex;align-items:center;gap:8px;background:white;padding:8px 25px;border-bottom:1px solid var(--line)}
.chat-search input{min-height:42px;width:100%;border:1px solid var(--line);border-radius:9px;padding:10px 12px;color:var(--ink);font-size:16px}
.messages-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.messages{display:flex;min-height:100%;width:min(100%,815px);margin:0 auto;padding:30px 28px 14px;flex-direction:column;justify-content:flex-end}
.messages #message-list{display:flex;flex-direction:column;gap:12px}
.message{display:flex;max-width:min(75%,530px);flex-direction:column;align-self:flex-start;align-items:flex-start;gap:4px}
.message.mine{align-self:flex-end;align-items:flex-end}
.bubble{background:white;color:#33455b;border-radius:16px 16px 16px 4px;box-shadow:0 1px 4px #1a426916;font-size:13px;line-height:1.55;padding:11px 15px;white-space:pre-wrap;overflow-wrap:anywhere}
.message.mine .bubble{color:#0d417e;background:#dceeff;border-radius:16px 16px 4px 16px}
.message.deleted .bubble{color:#9da8b8;background:#eaf0f5;font-style:italic}
.message-meta{display:flex;align-items:center;gap:5px;padding:0 5px;min-height:17px}
.time{color:#9cabb9;font-size:10px}
.ticks{font-size:12px;color:#95b5d9}.ticks.seen{color:#0f89f3}
.message-actions{display:flex;gap:3px;margin-left:5px;opacity:0;transition:opacity .15s}
.message:hover .message-actions,.message:focus-within .message-actions{opacity:1}
.message-actions button{padding:1px 5px;border:0;background:transparent;color:#8b9db0;font-size:11px}
.message-actions button:hover{color:var(--blue)}
.older-button{align-self:center;margin:0 auto 20px;border:1px solid #d8e8f7;background:white;color:#4a92dc;border-radius:10px;padding:9px 15px;font-size:12px}
.first-message{color:#a3afbe;text-align:center;font-size:13px;line-height:1.7;margin:40px auto}
.voice-message{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:min(300px,62vw)}
.voice-caption{font-size:12px;font-weight:750}.voice-message audio{width:100%;max-width:100%;height:36px}
.speed-button{border:1px solid #b7dcff;background:#f3f9ff;color:var(--blue);border-radius:8px;padding:5px 10px;font-weight:700;font-size:11px}
.typing-line{height:19px;min-height:19px;color:var(--blue);font-size:11px;padding:2px 30px 0}
.compose{min-height:81px;display:flex;align-items:center;gap:10px;padding:12px 26px 19px;background:white;border-top:1px solid var(--line);flex-shrink:0}
.compose-icon{font-size:23px;color:#8498ad}.compose-icon svg{height:22px;width:22px}
.compose-field{flex:1;display:flex;align-items:center;gap:10px;min-width:0;border:1px solid #e6edf4;background:#f6f8fb;border-radius:13px;padding:0 15px}
.compose-field:focus-within{border-color:#bfdfff;background:#fff}
.compose-field input{width:100%;min-width:0;height:46px;border:0;background:transparent;color:#243950;font-size:16px}
.compose-field input::placeholder{color:#a6b2c1}
.compose-hint{font-size:10px;color:#adb9c6;white-space:nowrap}
.send-button{border:0;background:var(--blue);color:#fff;border-radius:12px;width:47px;height:47px;display:grid;place-items:center;flex-shrink:0}
.send-button svg{height:20px;width:20px}.send-button:hover{background:#006ddd}
.emoji-picker{background:white;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));padding:10px 25px;gap:3px;border-top:1px solid var(--line)}
.emoji-picker button{font-size:19px;border:0;background:transparent;padding:5px;border-radius:9px}.emoji-picker button:hover{background:#f1f7ff}
.voice-recorder,.voice-preview{display:flex;align-items:center;gap:11px;padding:12px 25px;background:#fff;min-height:63px;border-top:1px solid var(--line)}
.voice-recorder #record-label{flex:1;color:#8ba1b6;font-size:12px}.voice-recorder #record-timer{font-variant-numeric:tabular-nums}
.record-action{min-height:36px;padding:8px 13px;border:0;border-radius:9px;background:var(--blue);color:#fff;font-weight:750;font-size:12px;white-space:nowrap}
.record-action.cancel{background:#edf2f7;color:#7791ad}
.rec-dot{display:block;width:11px;height:11px;flex:0 0 11px;background:#f35a6e;border-radius:50%;box-shadow:0 0 0 5px #f35a6e1e;animation:record 1s infinite alternate}
@keyframes record{to{opacity:.45;transform:scale(.75)}}
.voice-preview audio{height:36px;flex:1;min-width:80px;max-width:360px}.voice-preview #voice-preview-length{font-size:11px;color:#8ba1b6}
.compose-icon.recording{color:#e85573;background:#fff1f4}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:1000;background:#1f3852;color:#fff;border-radius:12px;padding:13px 20px;font-size:12px;max-width:min(90vw,480px);box-shadow:0 12px 30px #16283930;text-align:center}

/* Telegram-like profile drawer and editing screens */
.modal-overlay{position:fixed;inset:0;background:#1a2d4470;z-index:90;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.profile-drawer{position:fixed;right:0;top:0;bottom:0;z-index:91;width:min(100%,390px);background:white;overflow-y:auto;overscroll-behavior:contain;box-shadow:-10px 0 40px #112c4829;animation:drawer-in .2s ease-out}
@keyframes drawer-in{from{transform:translateX(100%)}to{transform:translateX(0)}}
.profile-cover{height:165px;position:relative;overflow:hidden;background:linear-gradient(125deg,#0f7be9,#67baff)}
.profile-cover-shape{position:absolute;display:block;width:210px;height:210px;border:1px solid #ffffff4d;border-radius:65px;transform:rotate(30deg)}
.shape-one{right:-30px;top:-125px}.shape-two{left:-100px;bottom:-145px}
.profile-close{position:absolute;right:14px;top:16px;color:#fff;background:#ffffff24;z-index:2}
.profile-close:hover{background:#ffffff50;color:white}
.profile-content{padding:0 27px 30px}
.profile-avatar-line{height:67px;display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:17px}
.avatar-xl{height:100px;width:100px;min-width:100px;font-size:40px;border:5px solid white;transform:translateY(-28px);box-shadow:0 5px 15px #3046601c}
.outline-button{border:1px solid #d6e9fc;background:#f1f8ff;color:var(--blue);border-radius:10px;padding:10px 13px;font-size:12px;font-weight:750;margin-bottom:14px}
.profile-content h2{font-size:24px;letter-spacing:-.6px;margin:0 0 5px;overflow-wrap:anywhere}
.profile-online{font-size:12px;color:#26b685;margin-bottom:26px}
.profile-field{border-top:1px solid var(--line);padding:16px 0}
.profile-field>span{display:block;color:#9eaebe;font-size:10px;font-weight:750;letter-spacing:1.15px;margin-bottom:8px}
.profile-field strong{color:#1679de;font-size:14px}
.profile-field p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.65;color:#52667e}
.profile-write-button{width:100%;padding:13px;border:0;border-radius:12px;background:var(--blue);color:white;font-size:13px;font-weight:750;margin-top:18px}
.edit-overlay{z-index:95}.edit-dialog,.crop-dialog{position:fixed;z-index:96;width:min(94vw,480px);max-height:min(92dvh,850px);overflow-y:auto;left:50%;top:50%;transform:translate(-50%,-50%);background:white;border-radius:20px;box-shadow:0 20px 70px #162c4744}
.modal-title{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid var(--line)}
.modal-title h2{font-size:18px;letter-spacing:-.35px;margin:0}
.edit-body{padding:21px 24px 25px}
.avatar-editor{display:flex;gap:15px;align-items:center;padding-bottom:19px;border-bottom:1px solid var(--line)}
.avatar-edit{border:0;height:85px;width:85px;min-width:85px;font-size:33px}
.avatar-editor strong{font-size:14px}.avatar-editor p{margin:5px 0 9px;font-size:11px;color:#91a0b2;line-height:1.5}
.link-button{font-size:12px;display:inline-block;margin:4px 13px 0 0}.link-button.danger{color:#d65d61}
#profile-form{display:flex;flex-direction:column;gap:9px;margin-top:15px}
.edit-dialog label small{color:#95a3b6;font-weight:500}
.edit-dialog textarea{resize:vertical;min-height:85px;max-height:140px}
.prefixed-input{display:flex;align-items:center;border:1px solid #e1e8f0;border-radius:11px;background:#f8fafc;overflow:hidden}
.prefixed-input span{color:#8ca5bc;padding-left:13px}.prefixed-input input{border:0;background:transparent;padding-left:4px;box-shadow:none!important}
.edit-help{color:#8ea0b3;font-size:11px;line-height:1.5;margin:4px 0 7px}
.crop-overlay{z-index:101}.crop-dialog{z-index:102;width:min(94vw,420px)}
.crop-content{padding:22px 24px}.crop-stage{position:relative;margin:auto;width:min(300px,75vw);height:min(300px,75vw);border-radius:50%;overflow:hidden;touch-action:none;background:#dfe8f2;cursor:grab}
.crop-stage:active{cursor:grabbing}
.crop-stage canvas{height:100%;width:100%;display:block}
.crop-content p{text-align:center;color:#91a1b2;font-size:12px;line-height:1.6;margin:16px 0 18px}
.zoom-label{display:flex;align-items:center;gap:13px;font-size:12px;font-weight:750;margin:0 0 23px}
.zoom-label span{font-size:19px;color:#8395a7}.zoom-label input{flex:1;accent-color:var(--blue)}

/* Tablet */
@media(max-width:1100px){.messenger{grid-template-columns:72px 330px minmax(0,1fr)}.rail{align-items:center;padding:20px 8px}.rail-brand{margin:0 0 35px}.rail-brand .logo-type,.nav-section-label,.rail-link:not(.active) .rail-counter,.rail-link{font-size:0}.rail-link{justify-content:center;width:53px;padding:0;margin-bottom:7px}.rail-ico{width:auto}.rail-link .rail-ico svg{height:23px;width:23px}.rail-counter{position:absolute;margin:0 0 31px 29px;font-size:10px}.rail-separator{width:40px;margin:15px auto}.rail-account{width:54px;padding:5px}.rail-account-info,.account-more,.logout-button{display:none}.account-main{justify-content:center}.rail-account .avatar{width:40px;height:40px}}
@media(max-width:800px){.messenger{grid-template-columns:300px minmax(0,1fr)}.rail{display:none}.chat-header{padding:9px 15px}.chat-private{display:none}.compose{padding:11px 15px}.messages{padding:24px 16px 12px}.message-actions{opacity:1}}

/* iPhone and smaller Android screens */
@media(max-width:620px){
  .messenger{position:fixed;top:var(--vv-top,0px);left:0;width:100vw;height:var(--app-height,100dvh);height:var(--app-height,100dvh);margin:0;grid-template-columns:minmax(0,1fr);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
  .messenger.keyboard-open{padding-bottom:0}
  .sidebar{border:0}.sidebar-top{padding:20px 21px 15px}.sidebar-title-row h1{font-size:28px}
  .section-eyebrow{font-size:10px}.search-box{margin:3px 16px 22px}.search-box input{font-size:16px}
  .users-list{padding:0 9px 14px}.user-row{min-height:78px}.sidebar-footer{min-height:48px;height:48px}
  .conversation{display:none}.messenger.show-chat .sidebar{display:none}.messenger.show-chat .conversation{display:flex}
  .chat-header{min-height:65px;padding:7px 12px;gap:5px}
  .back-button{display:grid;width:36px;margin-right:2px}.avatar-small{height:40px;width:40px;font-size:16px}.peer-title-button{gap:8px}.peer-details strong{font-size:13px}
  .chat-private{display:none}.chat-header .icon-button{width:35px;height:40px}
  .messages{padding:15px 11px 10px}.message{max-width:88%}.message-meta{gap:3px}.bubble{font-size:14px;padding:10px 12px}
  .typing-line{padding-left:14px}.compose{gap:5px;min-height:65px;padding:6px 9px 10px}.compose-icon{width:34px;height:43px;flex:0 0 34px}
  .compose-hint{display:none}.compose-field{padding:0 11px;border-radius:12px}.compose-field input{font-size:16px;height:43px}
  .send-button{height:43px;width:43px}.emoji-picker{grid-template-columns:repeat(6,minmax(0,1fr));padding:8px}
  .voice-recorder,.voice-preview{padding:8px;gap:7px;flex-wrap:wrap}.voice-recorder #record-label{display:none}.voice-preview audio{width:110px}
  .profile-drawer{width:100%;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
  .edit-dialog,.crop-dialog{width:100vw;max-height:calc(var(--app-height,100dvh) - env(safe-area-inset-top,0px));border-radius:19px 19px 0 0;top:auto;bottom:0;transform:translateX(-50%);padding-bottom:env(safe-area-inset-bottom,0px)}
  .edit-body{padding:17px 20px 21px}.modal-title{padding:16px 19px}
  .auth-shell{padding-top:calc(28px + env(safe-area-inset-top,0px));padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));justify-content:flex-start}
  .auth-header{margin:12px auto 25px}.auth-card{padding:22px 24px 27px}.auth-illustration{height:115px}
  .auth-card h1{font-size:28px}
  .toast{bottom:calc(20px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:360px){.sidebar-top{padding:18px 15px 12px}.search-box{margin:2px 11px 20px}.chat-header .chat-search-btn{display:none}.compose{padding:6px 5px 8px;gap:3px}.profile-content{padding-left:19px;padding-right:19px}}
@media(prefers-reduced-motion:reduce){.messages-scroll{scroll-behavior:auto}.rec-dot{animation:none}.profile-drawer{animation:none}}

.mobile-profile-trigger{display:none}
@media(max-width:800px){.mobile-profile-trigger{display:grid}}

.avatar-lightbox{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:35px;background:#061626ed}
.avatar-lightbox img{display:block;width:min(85vw,620px);height:min(85vw,620px);max-height:80dvh;object-fit:contain;border-radius:17px;box-shadow:0 18px 70px #0008}
.lightbox-close{position:absolute;right:calc(15px + env(safe-area-inset-right,0px));top:calc(15px + env(safe-area-inset-top,0px));width:44px;height:44px;border:0;border-radius:13px;background:#ffffff1c;color:white;font-size:22px}

/* ═══════════ NO SIGNAL v4 | DARK SYSTEM ═══════════ */
:root{
  color-scheme:dark;
  --blue:#8190ff;--blue-strong:#6879ec;--pale:#202942;
  --ink:#ebeffb;--sub:#8896ad;--line:#252e40;--canvas:#080a10;
  --panel:#111722;--radius:18px;
  --accent:#8190ff;--accent-faint:#242c47;
  background:var(--canvas);color:var(--ink);
}
:root[data-accent="cyan"]{--blue:#49c9f0;--blue-strong:#2fa7cf;--accent:#49c9f0;--accent-faint:#1a3543}
:root[data-accent="emerald"]{--blue:#65d5b1;--blue-strong:#41b28e;--accent:#65d5b1;--accent-faint:#173e37}
:root[data-accent="rose"]{--blue:#e88bb6;--blue-strong:#d16b9c;--accent:#e88bb6;--accent-faint:#482838}
:root[data-accent="amber"]{--blue:#e4b568;--blue-strong:#cb9650;--accent:#e4b568;--accent-faint:#473623}
body{background:#080a10;color:var(--ink)}
button,input,textarea,select{color:inherit}
::selection{background:#6677d855;color:white}
::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-thumb{background:#323b50;border-radius:8px}::-webkit-scrollbar-track{background:transparent}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.auth-shell{background:radial-gradient(ellipse 50% 38% at 54% 4%,#2529577a 0,transparent 100%),radial-gradient(ellipse 40% 38% at 0% 100%,#132e344d 0,transparent 100%),#080a10}
.auth-header{margin-bottom:26px}
.logo-icon{background:#1c2440;border:1px solid #3b4774;color:#9bafff;box-shadow:0 0 32px #6677ea30;font-size:29px;letter-spacing:-3px;padding:0 3px 0 0;border-radius:13px}
.logo-icon span{color:#6ae7e1}
.logo-type{font-size:23px;font-weight:850;letter-spacing:-1.2px;text-transform:uppercase;color:#ecf1fe}
.logo-type span{color:var(--accent)}
.header-tag,.footnote{color:#64718a}
.auth-card{background:#111722eF;border:1px solid #30394d;box-shadow:0 38px 100px #0009}
.auth-illustration{background:radial-gradient(circle at 50% 50%,#253365,transparent 80%),linear-gradient(135deg,#141c31,#101620);border:1px solid #2a3550}
.auth-illustration-bubble{background:linear-gradient(140deg,#6774ee,#4d5aa8);box-shadow:0 0 30px #7079ed48}
.mini-message{background:#1c2537;border:1px solid #33415e;color:#cad5ee;box-shadow:0 7px 23px #0006}
.mini-dot{background:#5463ba}.mini-lines i{background:#424e78}
.mini-message.right{background:#424fa5;color:#fff}
.eyebrow{color:#91a1ff}.auth-card h1{font-size:32px}.auth-subtitle,.auth-switch{color:#9aa7c0}
#auth-form label,.edit-dialog label{color:#c0c9db}
#auth-form input,.edit-dialog input,.edit-dialog textarea{background:#151c2a;border:1px solid #323d52;color:#eef2ff}
#auth-form input:focus,.edit-dialog input:focus,.edit-dialog textarea:focus{background:#182235;border-color:var(--accent);box-shadow:0 0 0 3px #8190ff1f}
.primary-button,.profile-write-button,.record-action{background:linear-gradient(120deg,var(--accent),var(--blue-strong));color:#0c1020;font-weight:800}
.primary-button:hover,.profile-write-button:hover,.record-action:hover{filter:brightness(1.1);background:var(--accent)}
.messenger{background:#0e121b;box-shadow:0 0 80px #0009}
.rail{background:#0c111a;border-color:var(--line)}
.rail-brand{margin-bottom:49px}
.nav-section-label,.section-eyebrow{color:#6e7c97}
.rail-link{color:#8d9ab1;font-weight:650}.rail-link:hover{color:#e4eafb;background:#1a2332}.rail-link.active{color:#c4ccff;background:linear-gradient(90deg,#303b685c,#222c453b)}
.rail-counter{color:#c7cfff;background:#2b365d}.rail-separator{background:#263043}
.rail-account{background:#171e2a;border-color:#2c3647;box-shadow:none}.rail-account-info small,.account-more{color:#7c89a2}
.logout-button{background:#222b3b;color:#a3aec3}.logout-button:hover{background:#402431;color:#ff8e9d}
.sidebar{background:#111722;border-color:#252d3c}
.sidebar-top .section-eyebrow{color:#7788a9}.sidebar-title-row h1{font-size:26px}
.icon-button{color:#8999b3}.icon-button:hover{background:#273148;color:#d1daff}
.notify-button.selected{background:#28375b;color:#a6baff}
.search-box{background:#1b2331;border:1px solid #2b3445;margin-bottom:12px}
.search-box input{color:#e7edff}.search-box input::placeholder{color:#77849b}.search-box kbd{color:#61708a}.search-box svg{color:#8192ac}
.list-heading{color:#7b8aa4;padding-bottom:10px}.list-count{background:#242f42;color:#97abce}
.user-row{color:#e5ebf8}.user-row:hover{background:#1a2331}.user-row.active{background:#242f47;border:1px solid #394768;padding:11px}
.user-row .avatar{border:1px solid #718bd033;background:linear-gradient(135deg,#5468b0,#2d496e)}
.user-row .status-indicator{border-color:#131925;background:#68758e}.user-row .status-indicator.online{background:#64d3ac}
.last-preview{color:#8a98b1}.unread{background:var(--accent);color:#11172a}.list-time{color:#71819d}.no-users{color:#8b99b2}
.sidebar-footer{border-color:#273044;color:#7887a2}.sidebar-footer .online-dot{background:#62d7b3}
.conversation{background:radial-gradient(ellipse 55% 55% at 55% 50%,#19203a46,transparent 100%),linear-gradient(145deg,#0e1420,#0c1019)}
.chat-header{background:#131b27;border-color:#293246}.peer-details strong{color:#eaf0ff}.peer-details small{color:#8799af}.peer-details small.online{color:#75dcb6}.chat-private{color:#7f90a8}
.chat-search{background:#121b29;border-color:#2a3345;position:relative;z-index:12;flex-wrap:wrap}
.chat-search input{background:#202a3a;border:1px solid #3c4860;color:#e9efff}
.messages-scroll{background:transparent}.messages #message-list{gap:13px}
.bubble{background:#212a3b;color:#e4ebfc;box-shadow:0 2px 14px #0004;border:1px solid #303a50;font-size:13px}
.message.mine .bubble{color:#f0f3ff;background:linear-gradient(140deg,#39478a,#303b73);border-color:#5665a2}
.message.deleted .bubble{background:#212838;color:#92a0b9;border-color:#2c3548}
.message-meta{gap:7px}.time{color:#7586a0}.ticks{color:#7187bc}.ticks.seen{color:#89e0d9}
.message-actions button{color:#a0aac0}.message-actions button:hover{color:var(--accent)}
.older-button{background:#20293b;border-color:#3a4560;color:#abb8ee}.first-message{color:#7c8aa2}
.speed-button{background:#25314e;border:1px solid #455c88;color:#c1caff}
.typing-line{color:#a2b1ff}
.compose{background:#141b29;border-color:#2c364a}.compose-icon{color:#8b9bb3}
.compose-field{background:#1e2839;border:1px solid #374358}.compose-field:focus-within{background:#222d43;border-color:#697bb8}
.compose-field textarea{width:100%;min-width:0;height:42px;min-height:42px;max-height:118px;resize:none;align-content:center;line-height:1.4;border:0;background:transparent;color:#eef3ff;font-size:16px;padding:9px 0 6px;overflow-y:auto}
.compose-field textarea::placeholder{color:#8290a8}.compose-hint{color:#697d99}
.send-button{background:var(--accent);color:#11172a}.send-button:hover{background:var(--blue-strong)}
.emoji-picker,.voice-recorder,.voice-preview{background:#141b29;border-color:#303c50}.emoji-picker button:hover{background:#2a3651}
.voice-recorder #record-label,.voice-preview #voice-preview-length{color:#9aacc5}.record-action.cancel{background:#293348;color:#c3d0e6}
.compose-icon.recording{color:#f88eaa;background:#452738}
.toast{background:#293450;border:1px solid #53638c;box-shadow:0 12px 40px #0009}
.modal-overlay{background:#030610bc;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.profile-drawer{background:#151d2a;box-shadow:-15px 0 80px #000b}
.profile-cover{background:radial-gradient(ellipse at 85% 12%,#4c65998e,transparent 60%),linear-gradient(135deg,#1d2950,#192340,#101725)}
.avatar-xl{border-color:#151d2a}.outline-button{background:#25314a;border-color:#465478;color:#b4c5ff}
.profile-content h2{color:#eef3ff}.profile-online{color:#7cdec2}
.profile-field{border-color:#293548}.profile-field>span{color:#8897b0}.profile-field strong{color:#9bb4ff}.profile-field p{color:#bac5da}
.edit-dialog,.crop-dialog{background:#171f2d;border:1px solid #323e52;box-shadow:0 25px 80px #000b}
.modal-title{border-color:#344055}.avatar-editor{border-color:#313d50}.avatar-editor p,.edit-help,.crop-content p{color:#92a0b8}.prefixed-input{background:#151c2a;border-color:#35425a}.prefixed-input span{color:#889dbe}.edit-dialog label small{color:#8999b5}
.crop-stage{background:#202a40}.zoom-label span{color:#abb9cb}.profile-write-button{color:#12192a}
.auth-shell .logo-type{font-size:24px}
.welcome-pill{background:#273253;color:#b4c1ff;border:1px solid #394b80}
.chat-empty h2{color:#edf1ff}.chat-empty p{color:#91a0b8}
.art-card{background:#1c263a;border-color:#354363;box-shadow:0 16px 32px #0007}
.art-a{background:#394c95}.art-b{background:#1d2e4f}.art-c{color:#a1b1ff}

/* New No Signal features */
.chat-filters{padding:0 18px 12px;display:flex;gap:6px;overflow-x:auto;flex-shrink:0}
.filter-chip{border:1px solid #313d51;background:#1a2230;border-radius:20px;padding:6px 10px;color:#91a0b8;font-size:11px;white-space:nowrap}
.filter-chip.active{background:var(--accent-faint);border-color:var(--accent);color:var(--accent)}
.date-separator{align-self:center;margin:10px auto 2px;padding:7px 14px;background:#2630448f;color:#aab9d1;border:1px solid #374255;border-radius:20px;font-size:10px;font-weight:700;text-align:center}
.inline-reply{display:block;text-align:left;padding:7px 8px;background:#0f14284d;color:#c2cffd;border:0;border-left:3px solid #9cafff;border-radius:5px;font-size:11px;max-width:100%;overflow-wrap:anywhere;margin-bottom:8px}
.bubble-text{white-space:pre-wrap;overflow-wrap:anywhere}
.bubble-reactions{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.reaction-chip{border-radius:16px;background:#1b243b;border:1px solid #3b4667;color:#cbd6f4;font-size:11px;padding:3px 8px}
.reaction-chip.mine-reaction{background:#414f85;border-color:#8497dc}
.message-more{color:#8396b4;background:transparent;border:0;padding:0 5px;border-radius:9px;font-size:21px;line-height:14px;min-width:30px;min-height:26px}
.message-more:hover,.message-more:focus-visible{color:white;background:#303e58}
.message-highlight .bubble{outline:2px solid var(--accent)}
.reply-preview{display:flex;align-items:center;gap:10px;background:#182237;border-top:1px solid #39496b;padding:9px 24px;color:#d9e4fb}
.reply-preview-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;border-left:3px solid var(--accent);padding-left:12px}
.reply-preview-main strong{font-size:12px;color:#c7d0ff}
.reply-preview-main span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:#a2adc1}
.server-search-results{background:#1a2333;position:absolute;left:12px;right:12px;top:100%;padding:10px;border:1px solid #414c69;border-radius:14px;box-shadow:0 15px 30px #0009;max-height:300px;overflow-y:auto;z-index:30}
.server-search-results p{color:#a0acc2;padding:6px 12px;font-size:13px}
.search-hit{display:flex;flex-direction:column;gap:7px;width:100%;padding:11px 13px;text-align:left;border:0;border-bottom:1px solid #34405a;background:transparent;color:#e2eafd;font-size:12px;overflow-wrap:anywhere}
.search-hit:hover{background:#273349}.search-hit small{color:#8798b4}
.tools-overlay{z-index:200}
.tools-dialog,.message-menu{position:fixed;z-index:201;left:50%;top:50%;transform:translate(-50%,-50%);width:min(94vw,440px);max-height:min(90dvh,830px);overflow-y:auto;border-radius:19px;background:#18202f;border:1px solid #34415a;box-shadow:0 22px 80px #000b;color:#eaf1ff}
.tools-content{padding:20px 22px 24px;display:flex;flex-direction:column;gap:13px}
.settings-toggle{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:9px 0;border-bottom:1px solid #29364b}
.settings-toggle label{font-size:13px;font-weight:740;cursor:pointer}.settings-toggle small{display:block;font-size:11px;font-weight:400;color:#8798b0;margin-top:5px;line-height:1.35}
.settings-toggle input{width:20px;height:20px;accent-color:var(--accent);flex-shrink:0}
.field-label{font-size:12px;font-weight:700;color:#a8b8d3;margin-top:8px}
.tools-input{background:#111824;border:1px solid #3b4b63;color:#eff3ff;padding:12px;border-radius:10px;font-size:16px;min-height:44px;width:100%}
.tools-input:focus{border-color:var(--accent)}
.secondary-button{background:#242f43;color:#bdcbec;border:1px solid #3b4c67;padding:12px;border-radius:10px;font-size:12px;font-weight:700;min-height:44px}
.secondary-button:hover{background:#34425b}
.settings-caption{margin:8px 0 0;font-size:11px;letter-spacing:1.5px;color:#8799bd;font-weight:800}
#password-form{display:flex;flex-direction:column;gap:10px}
.message-menu{width:min(94vw,410px);z-index:211}
#message-menu-overlay{z-index:210}
.menu-quote{margin:14px 20px;padding:9px 11px;background:#222c41;border-left:3px solid var(--accent);color:#b5c5df;max-height:75px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px}
.reaction-picker{display:flex;justify-content:space-around;gap:2px;padding:8px 15px;flex-wrap:wrap}
.reaction-picker button{background:#29354a;border:1px solid #3c4b65;border-radius:11px;font-size:21px;min-width:37px;min-height:39px}
.message-menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:15px 20px 21px}
.message-menu-grid button{background:#263148;border:1px solid #364562;color:#d0ddf1;min-height:44px;border-radius:11px;font-size:12px;text-align:left;padding:10px}
.message-menu-grid button:hover{background:#34425f}
.bookmarks-results{padding:12px 22px 25px;max-height:65vh;overflow-y:auto;color:#9facbf;font-size:13px}
:root.compact .message{gap:1px}:root.compact .bubble{padding:7px 10px;font-size:12px}:root.compact .messages #message-list{gap:5px}
:root.compact .user-row{min-height:60px;padding-top:7px;padding-bottom:7px}:root.compact .message-meta{min-height:13px}
.mobile-menu-trigger{display:none}
@media(max-width:800px){.mobile-menu-trigger{display:grid}}
@media(max-width:620px){
  .message-more{color:#a4b5d2;min-width:37px;min-height:32px;font-size:25px}
  .message{max-width:92%}.bubble{font-size:14px}
  .reply-preview{padding:9px 12px}
  .tools-dialog,.message-menu{width:100vw;top:auto;bottom:0;transform:translateX(-50%);max-height:calc(var(--app-height,100dvh) - 20px);border-radius:20px 20px 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}
  .tools-content{padding:16px 19px 25px}
  .chat-search{padding:7px 12px}.server-search-results{left:6px;right:6px}
  .compose-field textarea{font-size:16px;height:42px;min-height:42px}
  .chat-filters{padding-bottom:11px}.filter-chip{min-height:29px}
  .profile-cover{height:155px}
}

@media(max-width:620px){
 .messenger{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
 .tools-dialog,.message-menu{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
}

/* No Signal v5 — care, family, media, calls, and account security. */
.profile-cover{background-position:center;background-size:cover}
.profile-links{display:flex;flex-direction:column;gap:6px;overflow-wrap:anywhere}
.profile-links a{color:#b3c0ff;text-decoration:none;font-size:13px}
.profile-links a:hover{text-decoration:underline}
.verified-icon{display:inline-block;margin:0 0 9px;color:#b3cbff;border:1px solid #4569bc;border-radius:20px;padding:4px 10px;background:#27385c;font-size:11px;font-weight:800}
.cover-editor{border-top:1px solid #34415a;border-bottom:1px solid #34415a;display:flex;flex-direction:column;gap:8px;padding:14px 0;color:#dce5ff;font-size:13px}
.inline-check{display:flex;align-items:center;gap:9px}.inline-check input{width:18px!important;min-height:18px!important;height:18px!important}
.media-link{display:block;margin-top:8px;color:#c9d6ff;text-decoration:underline;overflow-wrap:anywhere;font-size:12px}
.sent-photo{display:block;max-width:min(310px,68vw);max-height:340px;width:auto;height:auto;object-fit:contain;border-radius:12px}
.sent-video{display:block;max-width:min(320px,68vw);max-height:300px;border-radius:12px}
.e2ee-action{font-size:19px}
.danger-text{color:#ff9fae!important}
.small-note{font-size:12px;color:#9caec9;line-height:1.65;margin:5px 0;overflow-wrap:anywhere}
.sessions-list{display:flex;flex-direction:column;gap:9px;font-size:12px;color:#c7d2e7}
.session-item{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid #344460;border-radius:12px;padding:11px;background:#111b2b;overflow-wrap:anywhere}
.session-item>div{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1;overflow-wrap:anywhere}
.session-item strong{color:#e5ecfa;font-size:12px;font-weight:680}
.session-item small{color:#99a8bf;font-size:11px}
.session-item .secondary-button{width:auto;flex-shrink:0;padding:7px 10px;min-height:36px}
.session-item a{font-size:12px;color:#a9c6ff}
#trusted-select{appearance:auto}
#phone-input,#phone-code{font-size:16px}
.call-dialog{position:fixed;z-index:280;left:50%;top:50%;transform:translate(-50%,-50%);background:#101724;color:#eaf0ff;width:min(95vw,900px);max-height:90dvh;overflow-y:auto;border:1px solid #475a87;box-shadow:0 20px 70px #000a;border-radius:21px;padding:20px}
#call-overlay{z-index:279}
.call-heading{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:15px}
.call-heading h2{margin:0;font-size:23px}.call-heading span{font-size:12px;color:#aab9d3}
.call-videos{display:flex;align-items:stretch;gap:10px;min-height:160px;max-height:48vh}
.call-videos video{display:block;width:100%;height:100%;background:#080d15;border-radius:14px;object-fit:contain}
#local-video{width:35%;max-width:240px;max-height:40vh;aspect-ratio:3/4;object-fit:cover;transform:scaleX(-1)}
.remote-videos{display:flex;flex:1;align-items:stretch;justify-content:center;gap:8px;min-width:0}
.remote-peer{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;overflow:hidden}
.remote-peer video{min-height:100px;max-height:37vh}
.remote-peer div{font-size:12px;color:#a4b6d2}
.call-actions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin:20px 0}
.call-actions button{width:auto;min-width:125px}
:root.senior-mode{font-size:20px}
:root.senior-mode .rail-link{font-size:16px;height:58px}
:root.senior-mode .user-info strong{font-size:17px}
:root.senior-mode .last-preview{font-size:14px}
:root.senior-mode .bubble{font-size:19px;line-height:1.55;padding:13px 17px}
:root.senior-mode .compose-field textarea{font-size:20px;min-height:58px}
:root.senior-mode .compose{gap:9px}
:root.senior-mode .send-button,:root.senior-mode .icon-button{min-width:52px;min-height:52px}
:root.senior-mode .user-row{min-height:84px}
:root.senior-mode .message-more{font-size:27px}
:root.senior-mode .chat-search-btn,:root.senior-mode #chat-tools-open,:root.senior-mode #emoji-button,:root.senior-mode .chat-filters,:root.senior-mode #call-video{display:none}
:root.senior-mode .primary-button,:root.senior-mode .secondary-button{font-size:16px;min-height:52px}
@media(max-width:620px){
  .chat-header{gap:0;padding-left:7px;padding-right:7px}
  .chat-header .icon-button{width:35px;min-width:35px;padding:4px;font-size:19px}
  .chat-header .chat-info-btn{display:none}
  .chat-header .peer-title-button{min-width:0}
  .chat-header .peer-details strong{overflow:hidden;text-overflow:ellipsis;max-width:115px;white-space:nowrap}
  .call-dialog{top:auto;bottom:0;transform:translateX(-50%);width:100vw;max-height:calc(var(--app-height,100dvh) - 12px);border-radius:18px 18px 0 0;padding:20px 12px calc(12px + env(safe-area-inset-bottom,0px))}
  .call-videos{max-height:52dvh;min-height:180px}
  .call-actions button{flex:1;min-width:100px}
  .sent-photo,.sent-video{max-width:65vw}
  .compose{gap:3px}
  .compose .icon-button{width:33px;min-width:33px}
  :root.senior-mode .compose .icon-button{min-width:43px;width:43px}
}


/* Family group calls are independent from emergency services. */
.group-select-list{display:flex;flex-direction:column;gap:9px;margin:8px 0 16px;max-height:300px;overflow-y:auto}
.group-person{display:flex;align-items:center;gap:12px;background:var(--surface-2,#25283b);border:1px solid var(--border,#383c55);border-radius:12px;padding:13px 15px;font-size:14px;cursor:pointer}
.group-person input{width:21px;height:21px;accent-color:var(--accent,#8888ff)}
.group-dialog{z-index:251}
#group-overlay{z-index:250}

/* No Signal 5.1: human-readable ICE diagnostics, compatible with mobile Safari. */
.call-diagnostics{border:1px solid #394962;border-radius:12px;padding:10px;margin:10px 0;color:#c6d2e6}
.call-diagnostics summary{cursor:pointer;font-size:13px;font-weight:600}
.call-diagnostics pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;background:#080e19;color:#c7d9f0;padding:10px;border-radius:7px;user-select:text;-webkit-user-select:text}
.call-diagnostics button{margin:6px 0 0;width:auto}