:root{--bg:#0b0f14;--panel:#111821;--panel2:#151e28;--line:#263241;--text:#edf3f8;--muted:#8fa2b5;--green:#21c47b;--red:#ff6470;--amber:#f4ba4a;--blue:#6ca8ff;--shadow:0 18px 45px rgba(0,0,0,.22)}*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:linear-gradient(180deg,#0a0e13,#0d131a 45%,#0b1016);color:var(--text);font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}a{color:inherit;text-decoration:none}button,input,select{font:inherit}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:24px;padding:14px 22px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(10,14,19,.88);backdrop-filter:blur(14px)}.brand{font-weight:850;font-size:18px;letter-spacing:-.5px;white-space:nowrap}.nav{display:flex;gap:5px;flex:1;overflow:auto}.nav a,.linkbtn{border:0;background:transparent;color:var(--muted);padding:8px 10px;border-radius:9px;white-space:nowrap;cursor:pointer}.nav a:hover,.linkbtn:hover{background:#17212c;color:var(--text)}.logout{margin:0}.wrap{width:min(1180px,calc(100% - 28px));margin:28px auto 70px}.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:6px 0 24px;padding:28px;border:1px solid var(--line);border-radius:20px;background:radial-gradient(circle at 85% 10%,rgba(33,196,123,.13),transparent 28%),var(--panel);box-shadow:var(--shadow)}.hero.compact{padding:22px 24px}.hero h1{font-size:34px;line-height:1.05;margin:5px 0 7px;letter-spacing:-1px}.hero.compact h1{font-size:30px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:1.6px;color:var(--green);margin:0}.muted{color:var(--muted);margin:0}.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:18px}.stat{padding:18px;border:1px solid var(--line);background:var(--panel);border-radius:16px}.stat span{display:block;color:var(--muted);font-size:12px}.stat strong{display:block;font-size:28px;margin-top:5px}.stat:hover{border-color:#38506a;transform:translateY(-1px)}.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px;margin-bottom:18px;box-shadow:0 10px 25px rgba(0,0,0,.08)}.panel.flush{padding:0;overflow:hidden}.panelhead,.accountHead,.messageTop,.eventhead{display:flex;align-items:center;justify-content:space-between;gap:14px}.panel h2,.accountHead h2{margin:0;font-size:18px}.panelhead{margin-bottom:14px}.panelhead>a{color:var(--blue)}.button,button{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 14px;border-radius:10px;border:1px solid transparent;cursor:pointer;font-weight:700}.primary{background:var(--green);color:#04140d;border-color:var(--green)}.secondary{background:#17222e;color:var(--text);border-color:#314255}.dangerbtn{background:#2a171b;color:#ffadb4;border-color:#63313a}.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.actions form{margin:0}.empty{padding:24px;color:var(--muted);text-align:center}.accountrowgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.accountmini{display:flex;justify-content:space-between;align-items:center;padding:13px 14px;border-radius:13px;background:var(--panel2);border:1px solid var(--line)}.accountmini small{display:block;color:var(--muted);margin-top:2px}.badge{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.6px;text-transform:uppercase}.badge.ok{background:rgba(33,196,123,.13);color:#62e5a7;border:1px solid rgba(33,196,123,.28)}.badge.bad{background:rgba(255,100,112,.12);color:#ff9ca5;border:1px solid rgba(255,100,112,.28)}.badge.wait{background:rgba(244,186,74,.11);color:#f8cf7e;border:1px solid rgba(244,186,74,.27)}.messageList{display:flex;flex-direction:column}.messageItem{display:grid;grid-template-columns:42px 1fr auto;gap:13px;align-items:center;padding:14px 6px;border-top:1px solid rgba(255,255,255,.055)}.flush .messageItem{padding:15px 18px}.messageItem:first-child{border-top:0}.messageItem:hover{background:#141e29}.avatar{width:38px;height:38px;border-radius:12px;background:#1c2b39;display:grid;place-items:center;color:#a8c5dd;font-weight:900}.messageMain{min-width:0}.messageTop strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.messageTop span,.messageMeta{color:var(--muted);font-size:11px}.messageMeta{display:flex;gap:5px;margin-top:2px}.messageMain p{margin:5px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#cbd7e1}.filters{display:grid;grid-template-columns:2fr repeat(3,1fr) auto auto;gap:9px;align-items:center}.filters input,.filters select,.addAccount input,.stack input{width:100%;background:#0d141c;border:1px solid #2b3a4a;color:var(--text);border-radius:10px;padding:10px 11px;outline:none}.filters input:focus,.filters select:focus,.addAccount input:focus,.stack input:focus{border-color:#4d7196}.check{display:flex;gap:7px;align-items:center;white-space:nowrap;color:var(--muted)}.check input{width:auto}.pager{display:flex;align-items:center;justify-content:center;gap:16px;margin:18px 0}.currentMessage{padding:18px;border-radius:14px;background:#0d141c;border:1px solid #253443}.currentMessage small{color:var(--muted)}.currentMessage p{font-size:18px;white-space:pre-wrap;margin:8px 0 0}.detailgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:12px;margin-top:14px}.detailgrid>div{background:var(--panel2);border:1px solid var(--line);padding:12px;border-radius:12px;min-width:0}.detailgrid span{display:block;color:var(--muted);font-size:11px;margin-bottom:5px}.detailgrid code{display:block;overflow:hidden;text-overflow:ellipsis}.goodtext{color:#63e6a8}.badtext{color:#ff8e98}.timeline{padding-left:12px}.event{position:relative;display:grid;grid-template-columns:18px 1fr;gap:12px;padding-bottom:16px}.event:before{content:"";position:absolute;left:6px;top:16px;bottom:-3px;border-left:1px solid #314355}.event:last-child:before{display:none}.eventdot{width:13px;height:13px;border-radius:50%;background:var(--green);margin-top:16px;z-index:1;box-shadow:0 0 0 5px rgba(33,196,123,.09)}.eventcard{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:13px 14px}.eventhead span{font-size:11px;color:var(--muted)}.eventcard p{white-space:pre-wrap}.eventcard small{color:var(--muted)}.hash{display:block;margin-top:8px;color:#60758a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.addAccount{display:flex;gap:9px;margin-top:12px}.accountCards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accountCards .panel{margin:0}.accountDetail{color:var(--muted);min-height:21px}.qrWrap{text-align:center;background:#fff;border-radius:14px;padding:14px;margin:14px 0;color:#26313b}.qrWrap.hidden{display:none}.qr{display:block;width:min(330px,100%);margin:auto}.qrWrap p{margin:8px 0 0;font-weight:700}.integritybox{display:flex;align-items:center;gap:18px;padding:28px}.integrityicon{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:30px;font-weight:900}.integrityok .integrityicon{background:rgba(33,196,123,.14);color:#60e6a5}.integritybad .integrityicon{background:rgba(255,100,112,.14);color:#ff919b}.loginbody{display:grid;place-items:center;padding:20px}.loginbox{width:min(390px,100%);padding:28px;border-radius:20px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow)}.loginbox h1{margin:8px 0 0}.logoMark{width:48px;height:48px;border-radius:14px;background:var(--green);color:#04140d;display:grid;place-items:center;font-weight:950}.stack{display:flex;flex-direction:column;gap:13px;margin-top:22px}.stack label{color:var(--muted);font-size:12px}.stack input{display:block;margin-top:5px;color:var(--text)}.alert{padding:10px 12px;border-radius:10px;margin-top:14px}.alert.danger{background:#2c171b;color:#ffadb5;border:1px solid #613039}.footer{color:#627487;text-align:center;padding:0 16px 35px;font-size:12px}@media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}.filters{grid-template-columns:1fr 1fr}.detailgrid{grid-template-columns:1fr 1fr}.accountCards{grid-template-columns:1fr}.topbar{align-items:flex-start;flex-wrap:wrap}.nav{order:3;width:100%}.logout{margin-left:auto}}@media(max-width:600px){.wrap{width:min(100% - 18px,1180px);margin-top:14px}.hero{padding:20px;align-items:flex-start;flex-direction:column}.hero h1,.hero.compact h1{font-size:27px}.stats{gap:8px}.stat{padding:14px}.stat strong{font-size:23px}.accountrowgrid{grid-template-columns:1fr}.messageItem{grid-template-columns:36px 1fr}.messageItem>.badge{grid-column:2;justify-self:start}.filters{grid-template-columns:1fr}.detailgrid{grid-template-columns:1fr}.addAccount{flex-direction:column}.eventhead{align-items:flex-start;flex-direction:column}.topbar{padding:11px 12px}.panel{padding:15px}}

/* v2.2 grouped conversations */
.stats{grid-template-columns:repeat(6,1fr)}
.chatFilters{grid-template-columns:2fr 1fr auto}
.chatList{display:flex;flex-direction:column}
.chatItem{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;padding:16px 18px;border-top:1px solid rgba(255,255,255,.055)}
.chatItem:first-child{border-top:0}.chatItem:hover{background:#141e29}.avatar.big{width:48px;height:48px;border-radius:16px;font-size:17px}.chatMain{min-width:0}.chatMain p{margin:6px 0 4px;color:#cbd7e1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contactIdentity{font-size:12px;color:#7fa0bd;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chatCounts{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:11px}.conversationHero{align-items:center}.renamePanel{display:flex;align-items:end;justify-content:space-between;gap:18px}.renameForm{display:flex;align-items:end;gap:10px;min-width:min(560px,100%)}.renameForm label{flex:1;color:var(--muted);font-size:12px}.renameForm input{display:block;width:100%;margin-top:5px;background:#0d141c;border:1px solid #2b3a4a;color:var(--text);border-radius:10px;padding:10px 11px;outline:none}.conversationStats{display:flex;gap:16px;color:var(--muted);font-size:12px;white-space:nowrap}.conversationStats strong{color:var(--text)}.conversationPanel{padding:18px}.thread{display:flex;flex-direction:column;gap:8px;max-width:920px;margin:auto}.bubbleRow{display:flex}.bubbleRow.mine{justify-content:flex-end}.bubbleRow.theirs{justify-content:flex-start}.bubble{max-width:min(72%,700px);min-width:170px;padding:10px 12px;border-radius:15px;background:#17222e;border:1px solid #2d3d4e}.mine .bubble{background:#123329;border-color:#245c49}.bubble:hover{filter:brightness(1.06)}.deletedBubble{border-color:#6b333a;background:#2b171b}.mine .deletedBubble{background:#351c20}.bubbleSender{font-size:11px;font-weight:800;color:#7fd2aa;margin-bottom:4px}.theirs .bubbleSender{color:#91b9dc}.bubbleText{white-space:pre-wrap;word-break:break-word}.bubbleMeta{display:flex;justify-content:flex-end;gap:8px;margin-top:6px;color:var(--muted);font-size:10px}
@media(max-width:900px){.stats{grid-template-columns:repeat(3,1fr)}.renamePanel{align-items:stretch;flex-direction:column}.renameForm{min-width:0}.conversationStats{white-space:normal;flex-wrap:wrap}}
@media(max-width:600px){.stats{grid-template-columns:repeat(2,1fr)}.chatFilters{grid-template-columns:1fr}.chatItem{grid-template-columns:44px 1fr}.chatItem>.badge{grid-column:2;justify-self:start}.avatar.big{width:42px;height:42px}.bubble{max-width:88%}.renameForm{align-items:stretch;flex-direction:column}}

/* v2.3 professional number-based chat workspace */
.wrap{width:min(1500px,calc(100% - 28px))}
.chatWorkspace{height:calc(100vh - 132px);min-height:670px;display:grid;grid-template-columns:390px minmax(0,1fr);overflow:hidden;border:1px solid #263647;border-radius:22px;background:#0c131a;box-shadow:0 24px 70px rgba(0,0,0,.28)}
.chatRail{min-width:0;display:flex;flex-direction:column;background:#101821;border-right:1px solid #263647}
.chatRailHeader{padding:22px 20px 12px;display:flex;align-items:center;justify-content:space-between;gap:16px}.chatRailHeader h1{font-size:28px;letter-spacing:-.8px;margin:2px 0 0}.sectionKicker{font-size:10px;letter-spacing:1.35px;font-weight:900;color:#48d89a}.liveDotWrap{display:flex;align-items:center;gap:7px;padding:6px 9px;border-radius:999px;background:rgba(33,196,123,.09);border:1px solid rgba(33,196,123,.18);font-size:11px;color:#81e6b8;font-weight:750}.liveDot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#32d98b;box-shadow:0 0 0 4px rgba(50,217,139,.1)}
.chatSearch{padding:8px 14px 12px;display:grid;grid-template-columns:1fr 120px auto;gap:7px}.searchField{position:relative;min-width:0}.searchField input,.chatSearch select{width:100%;height:40px;background:#0a1118;border:1px solid #263749;color:#eaf1f6;border-radius:11px;outline:none}.searchField input{padding:0 12px 0 34px}.searchField input:focus,.chatSearch select:focus{border-color:#477099;box-shadow:0 0 0 3px rgba(79,122,162,.1)}.searchIcon{position:absolute;left:12px;top:8px;color:#70879b;font-size:18px}.chatSearch select{padding:0 8px}.iconSearchBtn{min-height:40px;padding:0 11px;border-radius:11px;background:#172330;border-color:#2b3f52;color:#d9e4ed;font-size:12px}
.chatRailMeta{padding:0 18px 10px;color:#71869a;font-size:11px;display:flex;align-items:center;gap:6px}.chatRailMeta strong{color:#b9c9d6}.unresolvedHint{margin-left:auto;color:#d8b76a}
.chatListPro{overflow:auto;overscroll-behavior:contain;flex:1;border-top:1px solid rgba(255,255,255,.045);scrollbar-width:thin;scrollbar-color:#304254 transparent}.chatEmpty{padding:50px 22px;text-align:center;color:#91a4b5;line-height:1.7}.chatEmpty span{font-size:12px;color:#667b8e}.chatRowPro{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.045);transition:background .14s ease,border-color .14s ease;position:relative}.chatRowPro:hover{background:#15202b}.chatRowPro.active{background:linear-gradient(90deg,rgba(33,196,123,.13),rgba(33,196,123,.025));box-shadow:inset 3px 0 #27c980}.chatRowPro.unresolved{opacity:.78}.chatAvatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#263a4b,#172633);border:1px solid #32495d;color:#d5e6f3;font-size:16px;font-weight:850}.chatRowPro.active .chatAvatar{background:linear-gradient(145deg,#1f6a50,#174331);border-color:#2d7f61}.chatRowBody{min-width:0}.chatRowTop{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.chatRowTop strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chatRowTop time{flex:0 0 auto;color:#718598;font-size:10px}.chatNumber{margin-top:1px;color:#84a8c5;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chatNumber span{color:#62788b}.chatPreview{margin-top:6px;display:flex;align-items:center;gap:8px;min-width:0}.chatPreview>span{flex:1;min-width:0;color:#aabac7;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chatPreview.deletedPreview>span{color:#d5949a}.miniBadges{display:flex;flex:0 0 auto}.miniBadge{font-style:normal;font-size:9px;padding:3px 6px;border-radius:999px;font-weight:800}.miniBadge.danger{color:#ff9da6;background:rgba(255,100,112,.1);border:1px solid rgba(255,100,112,.18)}
.chatStage{min-width:0;display:flex;flex-direction:column;background:radial-gradient(circle at 50% 10%,rgba(72,102,125,.08),transparent 28%),#0b1218}.noChatSelected{margin:auto;text-align:center;max-width:440px;padding:34px;color:#8ca0b1}.noChatIcon{width:76px;height:76px;margin:0 auto 18px;border-radius:24px;display:grid;place-items:center;background:#15222d;border:1px solid #293b4a;color:#4ad59a;font-size:20px;font-weight:900;box-shadow:0 14px 40px rgba(0,0,0,.2)}.noChatSelected h2{color:#dfeaf2;margin:0 0 8px}.noChatSelected p{margin:0;line-height:1.7}
.contactBar{min-height:88px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:18px;background:rgba(15,23,31,.95);border-bottom:1px solid #263647;backdrop-filter:blur(10px)}.contactMain{display:flex;align-items:center;min-width:0;gap:13px}.contactAvatar{width:50px;height:50px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#27634f,#173c31);border:1px solid #39755f;color:#e2fff2;font-weight:900;font-size:17px}.contactText{min-width:0}.contactTitleRow{display:flex;align-items:center;gap:9px;min-width:0}.contactTitleRow h2{margin:0;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contactNumber{margin-top:1px;color:#7fcaa8;font-size:12px;font-weight:750}.contactSub{display:flex;align-items:center;gap:6px;color:#71869a;font-size:10px;margin-top:2px}.deletedCountPill{font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.3px;color:#ffa2aa;background:rgba(255,100,112,.1);border:1px solid rgba(255,100,112,.22);padding:4px 7px;border-radius:999px}.contactActions{display:flex;align-items:center;gap:12px}.threadCounters{display:flex;align-items:center;gap:10px;color:#718598;font-size:10px}.threadCounters span{padding:6px 8px;border-radius:9px;background:#111b24;border:1px solid #22313f}.threadCounters b{color:#cdd9e2}.renameMenu{position:relative}.renameMenu summary{list-style:none;cursor:pointer;padding:8px 10px;border:1px solid #2e4052;background:#15212c;border-radius:10px;color:#c8d6e1;font-size:11px;font-weight:750}.renameMenu summary::-webkit-details-marker{display:none}.renameMenu[open] form{position:absolute;right:0;top:42px;z-index:10;width:280px;padding:12px;background:#111a23;border:1px solid #304356;border-radius:13px;box-shadow:0 18px 45px rgba(0,0,0,.35);display:flex;gap:7px}.renameMenu input{min-width:0;flex:1;background:#0b1218;border:1px solid #2d3d4d;border-radius:9px;color:#e8f0f6;padding:8px 9px}.renameMenu button{min-height:34px;padding:7px 10px;font-size:11px}
.threadViewport{position:relative;flex:1;overflow:auto;overscroll-behavior:contain;background:linear-gradient(rgba(9,15,20,.94),rgba(9,15,20,.94)),radial-gradient(circle at 20% 30%,#173126 0 1px,transparent 1px);background-size:auto,34px 34px;scrollbar-width:thin;scrollbar-color:#304254 transparent}.threadInner{width:min(900px,calc(100% - 56px));margin:0 auto;padding:22px 0 34px}.dateDivider{display:flex;justify-content:center;margin:10px 0 18px}.dateDivider span{font-size:10px;font-weight:750;color:#8498aa;background:#14202a;border:1px solid #263847;padding:5px 9px;border-radius:999px;box-shadow:0 4px 16px rgba(0,0,0,.12)}.proBubbleRow{display:flex;margin:3px 0}.proBubbleRow.mine{justify-content:flex-end}.proBubbleRow.theirs{justify-content:flex-start}.proBubble{display:inline-flex;flex-direction:column;width:fit-content;max-width:min(66%,620px);min-width:0;padding:7px 9px 6px;border:1px solid rgba(48,68,86,.82);border-radius:14px 14px 14px 5px;background:#15212b;box-shadow:0 1px 2px rgba(0,0,0,.18);transition:filter .12s ease,box-shadow .12s ease}.proBubbleRow.mine .proBubble{background:#12392d;border-color:rgba(40,105,84,.92);border-radius:14px 14px 5px 14px}.proBubble:hover{filter:brightness(1.03);box-shadow:0 2px 6px rgba(0,0,0,.18)}.proBubble.isDeleted{background:#28171b;border-color:#61313a}.proBubbleRow.mine .proBubble.isDeleted{background:#321b1f;border-color:#6b3740}.bubbleAuthor{font-size:10px;color:#8fc2e8;font-weight:850;margin-bottom:2px}.bubbleBody{white-space:pre-wrap;word-break:break-word;color:#e5edf3;font-size:13px;line-height:1.42}.isDeleted .bubbleBody{color:#f0c4c8}.bubbleFooter{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:3px;min-height:11px;align-self:flex-end}.bubbleFooter time{color:#77909f;font-size:8.5px}.stateTag{font-size:7.5px;text-transform:uppercase;letter-spacing:.28px;font-weight:900;padding:1px 4px;border-radius:999px}.editedTag{color:#9db7ca;background:rgba(130,159,180,.1)}.deletedTag{color:#ff9aa3;background:rgba(255,100,112,.11)}.newMessageJump{position:sticky;bottom:15px;float:right;margin-right:18px;border-radius:999px;background:#1f7658;color:#e8fff4;border-color:#328b6a;box-shadow:0 8px 24px rgba(0,0,0,.3);font-size:11px}.hidden{display:none!important}
.archiveStatusBar{min-height:34px;padding:8px 15px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#657c8f;font-size:9px;border-top:1px solid #22313f;background:#0f171e}.archiveStatusBar span{display:flex;align-items:center;gap:6px}.archiveStatusBar .liveDot{width:6px;height:6px}
@media(max-width:1100px){.chatWorkspace{grid-template-columns:340px minmax(0,1fr)}.threadCounters{display:none}.chatSearch{grid-template-columns:1fr 105px}.iconSearchBtn{display:none}}
@media(max-width:780px){.wrap{width:100%;margin:0}.topbar{position:relative}.chatWorkspace{height:calc(100vh - 126px);min-height:620px;border-radius:0;border-left:0;border-right:0;grid-template-columns:1fr}.chatWorkspace[data-chat=""] .chatRail{display:flex}.chatWorkspace[data-chat=""] .chatStage{display:none}.chatWorkspace:not([data-chat=""]) .chatRail{display:none}.chatStage{display:flex}.threadInner{width:calc(100% - 20px)}.proBubble{max-width:88%}.contactBar{padding:10px 12px}.contactAvatar{width:42px;height:42px}.contactActions{gap:5px}.renameMenu{display:none}.archiveStatusBar span:nth-child(2){display:none}}

/* v2.4 professional workspace + reliable independent scrolling */
@media (min-width:781px){
  body:has(.chatWorkspace){overflow:hidden}
  .wrap:has(.chatWorkspace){margin:14px auto 0}
  body:has(.chatWorkspace) .footer{display:none}
  .chatWorkspace{height:calc(100dvh - 112px);min-height:0;grid-template-columns:410px minmax(0,1fr)}
}
.chatWorkspace{isolation:isolate}
.chatRail{min-height:0;overflow:hidden}
.chatStage{min-height:0;overflow:hidden}
.chatListPro{min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;overscroll-behavior-y:contain}
.threadViewport{min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;overscroll-behavior-y:contain}
.chatListPro::-webkit-scrollbar,.threadViewport::-webkit-scrollbar{width:10px}
.chatListPro::-webkit-scrollbar-track,.threadViewport::-webkit-scrollbar-track{background:transparent}
.chatListPro::-webkit-scrollbar-thumb,.threadViewport::-webkit-scrollbar-thumb{background:#2b3f50;border:3px solid transparent;background-clip:padding-box;border-radius:999px}
.chatListPro::-webkit-scrollbar-thumb:hover,.threadViewport::-webkit-scrollbar-thumb:hover{background:#40596d;border:3px solid transparent;background-clip:padding-box}
.chatTypeTabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:0 14px 8px;padding:4px;background:#0a1118;border:1px solid #223240;border-radius:12px}
.chatTypeTabs a{display:flex;align-items:center;justify-content:center;height:32px;border-radius:8px;color:#75899b;font-size:11px;font-weight:800;transition:.15s ease}
.chatTypeTabs a:hover{color:#dce8f0;background:#14202a}
.chatTypeTabs a.active{color:#eafff4;background:#184735;box-shadow:inset 0 0 0 1px #286a51}
.filteredHint{margin-left:auto;color:#5f8b77;border:1px solid rgba(64,174,125,.18);background:rgba(44,156,107,.07);padding:2px 6px;border-radius:999px;white-space:nowrap}
.unresolvedHint+.filteredHint{margin-left:4px}
.chatRailHeader{flex:0 0 auto}
.chatTypeTabs,.chatSearch,.chatRailMeta{flex:0 0 auto}
.chatRowPro{min-height:82px;padding:14px 15px}
.chatRowPro.active{background:linear-gradient(90deg,rgba(33,196,123,.16),rgba(33,196,123,.025) 82%)}
.chatRowTop strong{font-size:14.5px;letter-spacing:-.12px}
.chatNumber{font-variant-numeric:tabular-nums;color:#91acc0}
.chatPreview>span{font-size:12.5px;line-height:1.35}
.contactBar{flex:0 0 auto;box-shadow:0 8px 30px rgba(0,0,0,.10);z-index:2}
.archiveStatusBar{flex:0 0 auto}
.threadInner{padding:28px 0 46px}
.proBubbleRow{margin:4px 0}
.proBubble{padding:8px 10px 7px;max-width:min(68%,650px);border-color:rgba(45,63,77,.86);box-shadow:0 1px 3px rgba(0,0,0,.16)}
.proBubbleRow.mine .proBubble{background:#123c2f;border-color:#27634e}
.bubbleBody{font-size:13.5px;line-height:1.46;letter-spacing:0}
.bubbleFooter{margin-top:4px;gap:5px}
.bubbleFooter time{font-size:9px;font-variant-numeric:tabular-nums}
.proBubble.isDeleted{background:linear-gradient(145deg,#29171c,#23151a);border-color:#64323c}
.proBubbleRow.mine .proBubble.isDeleted{background:linear-gradient(145deg,#351c21,#2c191e);border-color:#713943}
.deletedTag{padding:2px 6px}
.dateDivider{position:sticky;top:10px;z-index:1;pointer-events:none}
.dateDivider span{backdrop-filter:blur(8px);background:rgba(20,32,42,.90)}
.newMessageJump{z-index:4}
@media(max-width:1100px) and (min-width:781px){.chatWorkspace{grid-template-columns:350px minmax(0,1fr)}}
@media(max-width:780px){
  .chatWorkspace{min-height:0;height:calc(100dvh - 126px)}
  .chatRail,.chatStage{min-height:0;overflow:hidden}
  .chatListPro,.threadViewport{min-height:0}
  .chatTypeTabs{margin-left:10px;margin-right:10px}
}

/* v2.5 Pro: health, search, deleted center, media, lazy history */
.versionMark{font-size:11px;opacity:.65;font-weight:700;margin-left:4px}.proHero{background:radial-gradient(circle at 88% 5%,rgba(33,196,123,.18),transparent 30%),radial-gradient(circle at 12% 100%,rgba(108,168,255,.08),transparent 35%),var(--panel)}.proStats{grid-template-columns:repeat(6,1fr)}.dangerStat strong{color:#ff939d}.dashboardGrid{display:grid;grid-template-columns:1.4fr .8fr;gap:18px}.paddedHead{padding:18px 18px 6px}.sectionKicker{font-size:9px;font-weight:900;letter-spacing:1.3px;color:#5f788d}.healthAccounts,.diagAccounts,.alertRows{display:flex;flex-direction:column;gap:8px}.healthAccount{display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:11px;padding:12px 13px;background:#0e161e;border:1px solid #22313e;border-radius:12px}.healthAccount small,.healthRight small,.diagAccount small{display:block;color:var(--muted);font-size:10px}.healthRight{text-align:right}.healthRight b{font-size:10px;color:#61dda2}.healthDot{width:9px;height:9px;border-radius:50%;background:#6a7782;box-shadow:0 0 0 4px rgba(106,119,130,.08)}.healthDot.online{background:#2ddd91;box-shadow:0 0 0 4px rgba(45,221,145,.10)}.healthDot.offline{background:#ff6470;box-shadow:0 0 0 4px rgba(255,100,112,.09)}.backupMini{display:flex;flex-direction:column;padding:10px 0;border-top:1px solid rgba(255,255,255,.05)}.backupMini:first-of-type{border-top:0}.backupMini span{color:var(--muted);font-size:10px}.compactEmpty{padding:10px}.healthAlert{display:grid;grid-template-columns:10px 1fr;gap:10px;padding:11px 12px;border:1px solid #524421;background:#211c10;border-radius:12px}.healthAlert.critical{border-color:#66313a;background:#261519}.healthAlert.resolved{opacity:.48;filter:saturate(.5)}.healthAlert p{margin:1px 0;color:#d9e1e7}.healthAlert small{color:var(--muted);font-size:10px}.healthPulse{width:8px;height:8px;margin-top:5px;border-radius:50%;background:#f3bc52}.critical .healthPulse{background:#ff6470}.rowBadges{display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.proFilters{grid-template-columns:minmax(220px,2fr) repeat(3,minmax(120px,1fr)) repeat(2,minmax(130px,.8fr)) auto auto}.listQuote{margin-top:5px;color:#7e9aaf;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:2px solid #3f718e;padding-left:7px}
.deletedHero{background:radial-gradient(circle at 90% 15%,rgba(255,100,112,.14),transparent 30%),var(--panel)}.deletedStats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}.deletedStats a{padding:18px;border-radius:15px;border:1px solid #3c2a31;background:linear-gradient(145deg,#171319,#12171d)}.deletedStats span{display:block;color:#bd8d94;font-size:11px}.deletedStats strong{display:block;font-size:27px;color:#ff9ca5;margin-top:3px}.deletedFilters{grid-template-columns:2fr 1fr 1fr 1fr 1fr auto}.deletedItem{border-left:2px solid transparent}.deletedItem:hover{border-left-color:#ff6470}.deletedAvatar{background:#2d1b20;color:#ffadb4}
.mediaFilters{grid-template-columns:2fr 1fr 1fr auto}.mediaGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.mediaCard{overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.10)}.mediaPreview{height:190px;background:#091016;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.mediaPreview img,.mediaPreview video{width:100%;height:100%;object-fit:contain}.mediaPreview audio{width:90%;position:absolute;bottom:18px}.fileIcon{font-weight:900;font-size:27px;color:#6f879a}.mediaInfo{padding:13px}.mediaInfo strong,.mediaInfo span,.mediaInfo small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mediaInfo span{color:#9db0bf;font-size:11px;margin-top:3px}.mediaInfo small{color:#677d8f;font-size:9px;margin-top:2px}.smallBtn{min-height:31px;padding:5px 9px;font-size:10px;margin-top:9px}
.diagnosticGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}.diagCard{padding:17px;border:1px solid var(--line);background:var(--panel);border-radius:15px}.diagCard span,.diagCard small{display:block;color:var(--muted);font-size:10px}.diagCard strong{display:block;font-size:18px;margin:4px 0}.diagAccount{display:grid;grid-template-columns:12px 1fr 1.5fr 1fr .5fr;gap:12px;align-items:center;padding:13px;border:1px solid #22313f;background:#0e161e;border-radius:12px}.diagAccount>div:nth-child(n+3) span{display:block;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.5px}.accountHealthStrip{display:grid;grid-template-columns:2fr 2fr .7fr;gap:8px;margin:12px 0}.accountHealthStrip>div{padding:9px 10px;background:#0c141b;border:1px solid #22303d;border-radius:10px}.accountHealthStrip span,.accountHealthStrip strong{display:block}.accountHealthStrip span{color:var(--muted);font-size:9px}.accountHealthStrip strong{font-size:10px;margin-top:3px}
.historySummary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}.historySummary>div{padding:16px;border:1px solid var(--line);background:var(--panel);border-radius:14px}.historySummary span{font-size:10px;color:var(--muted);text-transform:uppercase;font-weight:850}.historySummary p{margin:7px 0 3px;white-space:pre-wrap}.historySummary small{color:#657a8c}.historySummary .deletedSummary{border-color:#5f3139;background:#21161a}.attachmentRows{display:flex;flex-direction:column;gap:7px}.attachmentRows a{display:flex;justify-content:space-between;gap:10px;padding:11px;border:1px solid #273744;background:#0e171f;border-radius:10px}.attachmentRows span{color:var(--muted);font-size:11px}
.accountSwitcher{padding:0 14px 8px}.accountSwitcher select{width:100%;padding:9px 10px;background:#0b131a;border:1px solid #273746;border-radius:10px;color:#dfe9f0}.chatAvatarWrap{position:relative;flex:0 0 auto}.pinMark{position:absolute;right:-2px;bottom:-2px;width:13px;height:13px;border-radius:50%;display:grid;place-items:center;background:#111b23;border:2px solid #111b23;color:#57d69b;font-size:8px}.starMark{color:#f4ba4a;font-size:11px}.favoritePill{font-size:9px;padding:3px 6px;border-radius:999px;background:rgba(244,186,74,.10);border:1px solid rgba(244,186,74,.22);color:#f4c96f}.photoAvatar{position:relative;overflow:hidden}.photoAvatar>span{z-index:0}.contactPhoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}.compactAction{min-height:32px;padding:5px 10px;font-size:10px}.quickForm{margin:0}.iconAction{width:32px;height:32px;min-height:32px;padding:0;border-radius:9px;background:#131e28;border:1px solid #2c3e4e;color:#70879a}.iconAction.active{color:#f3c660;border-color:#6e5b29;background:#231f13}.exportMenu[open] .menuLinks,.renameMenu[open] .moreMenu{position:absolute;right:0;top:42px;z-index:20;min-width:170px;padding:7px;background:#101922;border:1px solid #304356;border-radius:12px;box-shadow:0 18px 45px rgba(0,0,0,.4)}.menuLinks a{display:block;padding:8px 10px;border-radius:8px;color:#cad9e3}.menuLinks a:hover{background:#1a2834}.moreMenu{width:310px}.moreMenu form{position:static!important;width:auto!important;padding:6px!important;box-shadow:none!important;border:0!important;background:transparent!important}.threadSearchBar{position:relative;flex:0 0 auto;display:grid;grid-template-columns:minmax(220px,1fr) auto auto;gap:8px;align-items:center;padding:8px 14px;background:#101a22;border-bottom:1px solid #283847}.threadSearchBar .searchField{margin:0}.threadSearchBar>span{color:var(--muted);font-size:10px}.threadSearchResults{position:absolute;left:14px;right:90px;top:48px;z-index:15;max-height:340px;overflow:auto;background:#101922;border:1px solid #334758;border-radius:12px;box-shadow:0 18px 45px rgba(0,0,0,.42)}.threadSearchResults:empty{display:none}.threadSearchResult{display:flex;flex-direction:column;padding:10px 12px;border-top:1px solid rgba(255,255,255,.06)}.threadSearchResult:first-child{border-top:0}.threadSearchResult:hover{background:#182631}.threadSearchResult strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.threadSearchResult span{font-size:9px;color:var(--muted)}.quotedReply{display:flex;flex-direction:column;gap:1px;margin-bottom:7px;padding:7px 9px;border-left:3px solid #58a6c7;border-radius:5px;background:rgba(5,12,17,.26);max-width:100%}.quotedReply small{font-size:8px;color:#79b7d3;text-transform:uppercase;font-weight:850}.quotedReply span{font-size:10px;color:#9fb0bd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.detailQuote{max-width:720px}.mediaArchived{margin-top:7px;font-size:9px;color:#77b89a;font-weight:700}.loadOlderButton{display:block;margin:0 auto 14px;min-height:28px;padding:4px 10px;font-size:9px;background:#14212b;border:1px solid #2a3d4c;color:#88a0b3;border-radius:999px}.loadOlderButton:disabled{opacity:.45;cursor:default}.searchHit .proBubble{outline:2px solid #6ca8ff;box-shadow:0 0 0 5px rgba(108,168,255,.10)}
@media(max-width:1100px){.proFilters{grid-template-columns:1fr 1fr 1fr}.mediaGrid{grid-template-columns:repeat(3,1fr)}.diagnosticGrid{grid-template-columns:repeat(2,1fr)}.diagAccount{grid-template-columns:12px 1fr 1fr}.diagAccount>div:nth-child(4),.diagAccount>div:nth-child(5){display:none}.dashboardGrid{grid-template-columns:1fr}.deletedFilters{grid-template-columns:1fr 1fr 1fr}.contactActions .quickForm{display:none}}
@media(max-width:720px){.proStats,.deletedStats{grid-template-columns:repeat(2,1fr)}.mediaGrid{grid-template-columns:repeat(2,1fr)}.diagnosticGrid{grid-template-columns:1fr}.historySummary{grid-template-columns:1fr}.accountHealthStrip{grid-template-columns:1fr}.mediaFilters,.deletedFilters,.proFilters{grid-template-columns:1fr}.threadSearchBar{grid-template-columns:1fr auto}.threadSearchBar>span{display:none}.threadSearchResults{right:14px}.contactActions .exportMenu{display:none}}
@media(max-width:480px){.mediaGrid{grid-template-columns:1fr}.deletedStats{grid-template-columns:1fr 1fr}}
.chatAvatarPhoto{position:relative;overflow:hidden}.chatAvatarPhoto>span{position:relative;z-index:1}.railContactPhoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;background:var(--panel,#fff)}.railContactPhoto[src=""]{display:none}.warntext{color:#c88719}

/* v3.3 audited Mobile PWA ------------------------------------------------- */
:root{--mobile-nav-h:68px;--mobile-top-h:58px}
button,a,input,select,summary{-webkit-tap-highlight-color:transparent}
button,a,summary{touch-action:manipulation}
.pwaInstallTop{display:none;min-height:34px;padding:6px 11px;border:1px solid rgba(33,196,123,.28);background:rgba(33,196,123,.10);color:#72e8b3;border-radius:10px;font-size:11px}
.pwaInstallTop.is-ready{border-color:rgba(33,196,123,.48);background:rgba(33,196,123,.17)}
.loginInstallButton{width:100%;margin-top:12px;background:#14212b;border:1px solid #2b3e4e;color:#9fb3c3}
.loginInstallButton.is-ready{color:#6ce3ad;border-color:#2b765a;background:#10271f}
.pwaInstallToast{position:fixed;left:50%;bottom:24px;z-index:120;max-width:min(92vw,520px);transform:translate(-50%,24px);opacity:0;pointer-events:none;padding:11px 15px;border:1px solid #345064;border-radius:12px;background:#111b23;color:#e7f0f6;box-shadow:0 18px 50px rgba(0,0,0,.42);transition:.2s ease;font-size:12px;text-align:center}
.pwaInstallToast.show{opacity:1;transform:translate(-50%,0)}
.mobileBottomNav,.mobileMoreSheet,.mobileChatBack{display:none}
.nav a.active{background:#17242f;color:#e8f4fb}

@media(max-width:780px){
  html,body{min-height:100%;overscroll-behavior-y:none}
  body{padding-bottom:calc(var(--mobile-nav-h) + env(safe-area-inset-bottom));background:#0b1016}
  body.mobileSheetOpen{overflow:hidden}
  .topbar{position:sticky;top:0;z-index:60;min-height:var(--mobile-top-h);padding:calc(9px + env(safe-area-inset-top)) 12px 9px;align-items:center;flex-wrap:nowrap;gap:10px;background:rgba(9,14,19,.96)}
  .topbar .brand{font-size:17px;overflow:hidden;text-overflow:ellipsis}.topbar .versionMark{display:none}
  .topbar .nav,.topbar .logout{display:none}
  .pwaInstallTop{display:inline-flex;margin-left:auto;white-space:nowrap}.pwaInstallTop[hidden]{display:none}
  .wrap{width:100%;margin:0;padding:12px 10px 20px}
  .footer{display:none}

  .mobileBottomNav{position:fixed;left:0;right:0;bottom:0;z-index:70;height:calc(var(--mobile-nav-h) + env(safe-area-inset-bottom));padding:5px 6px env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(5,1fr);background:rgba(11,17,24,.97);border-top:1px solid #253443;box-shadow:0 -12px 35px rgba(0,0,0,.30);backdrop-filter:blur(18px)}
  .mobileBottomNav a,.mobileBottomNav button{border:0;background:transparent;color:#71869a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:54px;padding:3px 2px;border-radius:11px;font-size:9px;font-weight:750}
  .mobileBottomNav .mobileNavIcon{font-size:20px;line-height:1;font-weight:500}.mobileBottomNav a.active{color:#55daa1;background:rgba(33,196,123,.08)}
  .mobileMoreSheet{display:block;position:fixed;inset:0;z-index:100;pointer-events:none;visibility:hidden}.mobileMoreSheet.open{pointer-events:auto;visibility:visible}
  .mobileSheetBackdrop{position:absolute;inset:0;border:0;border-radius:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .2s}.mobileMoreSheet.open .mobileSheetBackdrop{opacity:1}
  .mobileSheetCard{position:absolute;left:0;right:0;bottom:0;padding:8px 14px calc(16px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;border:1px solid #2c3d4c;border-bottom:0;background:#111a23;box-shadow:0 -20px 60px rgba(0,0,0,.45);transform:translateY(105%);transition:transform .24s ease}.mobileMoreSheet.open .mobileSheetCard{transform:translateY(0)}
  .mobileSheetHandle{width:40px;height:4px;border-radius:999px;background:#3d5060;margin:2px auto 10px}.mobileSheetHead{display:flex;align-items:center;justify-content:space-between;padding:4px 2px 12px}.mobileSheetHead strong{font-size:16px}.mobileSheetClose{width:36px;height:36px;min-height:36px;padding:0;border-radius:50%;background:#1a2732;border:1px solid #304252;color:#bdd0df;font-size:22px}
  .mobileSheetGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mobileSheetGrid a,.mobileSheetGrid button{display:flex;align-items:center;justify-content:flex-start;min-height:48px;padding:11px 13px;border-radius:12px;border:1px solid #293a49;background:#151f29;color:#d6e2eb;font-weight:750}.mobileSheetGrid .mobileInstallAction{color:#71e4b0;border-color:#2c664f}.mobileLogout{margin-top:10px}.mobileLogout .dangerbtn{width:100%;min-height:46px}

  .hero,.hero.compact{margin:0 0 12px;padding:17px;border-radius:16px;box-shadow:none}.hero h1,.hero.compact h1{font-size:26px}.hero .actions{width:100%}.hero .actions .button{flex:1;min-height:42px}.eyebrow{font-size:9px;letter-spacing:1.15px}
  .panel{margin-bottom:11px;padding:14px;border-radius:15px;box-shadow:none}.panel.flush{padding:0}.panelhead{align-items:center;margin-bottom:10px}.panelhead h2,.panel h2{font-size:16px}
  .stats,.proStats,.deletedStats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:11px}.stat,.deletedStats a{padding:13px;border-radius:13px}.stat strong,.deletedStats strong{font-size:22px}.stat span,.deletedStats span{font-size:10px}
  .dashboardGrid{gap:0}.healthAccount{grid-template-columns:10px minmax(0,1fr) auto;padding:11px}.healthRight small{max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .messageItem,.flush .messageItem{grid-template-columns:38px minmax(0,1fr);padding:12px 13px;gap:10px}.messageItem>.rowBadges,.messageItem>.badge{grid-column:2;justify-self:start}.messageTop{min-width:0}.messageTop strong{font-size:13px}.messageMain p{font-size:12px}.rowBadges{justify-content:flex-start}
  .filters,.proFilters,.deletedFilters,.mediaFilters{grid-template-columns:1fr;gap:8px}.filters input,.filters select,.addAccount input,.stack input,.searchField input,.accountSwitcher select{min-height:44px;font-size:16px}
  .button,button{min-height:42px}.actions{gap:7px}.actions>.button{flex:1}
  .accountCards{grid-template-columns:1fr;gap:10px}.accountCards .panel{padding:14px}.accountHead{align-items:flex-start}.qrWrap{padding:10px}.qr{width:min(300px,90vw)}
  .mediaGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.mediaCard{border-radius:13px}.mediaPreview{height:145px}.mediaInfo{padding:10px}
  .diagnosticGrid{grid-template-columns:1fr 1fr;gap:8px}.diagCard{padding:13px}.diagAccount{grid-template-columns:10px minmax(0,1fr);gap:9px}.diagAccount>div:nth-child(n+3){display:none}.accountHealthStrip{grid-template-columns:1fr}.historySummary{grid-template-columns:1fr;gap:8px}
  .currentMessage{padding:14px}.currentMessage p{font-size:15px}.detailgrid{grid-template-columns:1fr}.timeline{padding-left:2px}.event{grid-template-columns:15px 1fr;gap:8px}.eventcard{padding:11px}
  .pager{gap:8px}.pager .button{padding:8px 10px}

  /* Native-feeling mobile chat list */
  body:has(.chatWorkspace){overflow:hidden;padding-bottom:calc(var(--mobile-nav-h) + env(safe-area-inset-bottom))}
  body:has(.chatWorkspace) .wrap{padding:0;margin:0}
  .chatWorkspace{height:calc(100dvh - var(--mobile-top-h) - var(--mobile-nav-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:0;border:0;border-radius:0;box-shadow:none;grid-template-columns:1fr;background:#0d151d}
  .chatWorkspace[data-chat=""] .chatRail{display:flex}.chatWorkspace[data-chat=""] .chatStage{display:none}.chatWorkspace:not([data-chat=""]) .chatRail{display:none}.chatWorkspace:not([data-chat=""]) .chatStage{display:flex}
  .chatRail{border:0;background:#0f171f}.chatRailHeader{padding:14px 15px 8px}.chatRailHeader h1{font-size:25px}.liveDotWrap{font-size:10px;padding:5px 8px}
  .accountSwitcher{padding:0 12px 7px}.chatTypeTabs{padding:0 12px 8px}.chatTypeTabs a{min-height:38px;display:flex;align-items:center;justify-content:center}.chatSearch{padding:0 12px 9px;grid-template-columns:1fr}.chatSearch .iconSearchBtn{display:none}.chatRailMeta{padding:0 14px 8px}.filteredHint{margin-left:auto;font-size:9px}
  .chatListPro{-webkit-overflow-scrolling:touch}.chatRowPro{min-height:76px;padding:11px 13px;grid-template-columns:48px minmax(0,1fr);gap:10px}.chatAvatar{width:48px;height:48px}.chatRowTop strong{font-size:14px}.chatRowTop time{font-size:9px}.chatNumber{font-size:10px}.chatPreview{margin-top:4px}.chatPreview>span{font-size:11px}.miniBadge{font-size:8px;padding:2px 5px}

  /* Selected conversation becomes its own full-screen app view. */
  body:has(.chatWorkspace:not([data-chat=""])){padding-bottom:0}
  body:has(.chatWorkspace:not([data-chat=""])) .topbar{display:none}
  body:has(.chatWorkspace:not([data-chat=""])) .mobileBottomNav{display:none}
  body:has(.chatWorkspace:not([data-chat=""])) .chatWorkspace{height:100dvh}
  .chatStage{background:#0b1218}.contactBar{min-height:calc(68px + env(safe-area-inset-top));padding:calc(9px + env(safe-area-inset-top)) 10px 9px;gap:8px;background:rgba(13,21,29,.98);position:relative}.mobileChatBack{display:grid;place-items:center;flex:0 0 auto;width:38px;height:38px;border-radius:50%;color:#cce0ec;background:#16232d;border:1px solid #2a3d4d;font-size:29px;line-height:1}.contactMain{gap:9px;min-width:0;flex:1}.contactAvatar{width:40px;height:40px}.contactTitleRow h2{font-size:15px}.contactNumber{font-size:10px}.contactSub{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.favoritePill,.deletedCountPill{display:none}.contactActions{gap:5px}.contactActions .compactAction{width:38px;overflow:hidden;text-indent:-999px;position:relative;padding:0}.contactActions .compactAction:after{content:none;display:none}.contactActions .renameMenu,.contactActions .quickForm{display:none}
  .threadSearchBar{grid-template-columns:1fr auto;padding:7px 9px}.threadSearchBar .searchField input{min-height:40px;font-size:16px}.threadSearchResults{left:8px;right:8px;top:51px;max-height:45dvh}
  .threadViewport{-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;scrollbar-width:none}.threadViewport::-webkit-scrollbar{display:none}.threadInner{width:100%;padding:14px 9px 28px}.dateDivider{margin:8px 0 12px}.proBubbleRow{margin:4px 0}.proBubble{max-width:88%;min-width:84px;padding:8px 10px 6px;border-radius:13px 13px 13px 4px}.proBubbleRow.mine .proBubble{border-radius:13px 13px 4px 13px}.bubbleBody{font-size:14px;line-height:1.43}.bubbleAuthor{font-size:9px}.bubbleFooter time{font-size:9px}.quotedReply{padding:6px 8px}.newMessageJump{bottom:12px;margin-right:10px;min-height:38px;font-size:10px}.loadOlderButton{min-height:32px;font-size:9px}.archiveStatusBar{display:none}

  .pwaInstallToast{bottom:calc(var(--mobile-nav-h) + env(safe-area-inset-bottom) + 12px);font-size:11px}
  body:has(.chatWorkspace:not([data-chat=""])) .pwaInstallToast{bottom:16px}
}

@media(max-width:430px){
  .wrap{padding-left:8px;padding-right:8px}.stats,.proStats,.deletedStats{gap:6px}.stat,.deletedStats a{padding:12px}.mediaGrid{grid-template-columns:1fr}.diagnosticGrid{grid-template-columns:1fr}.healthRight small{display:none}.mobileSheetGrid{grid-template-columns:1fr 1fr}.loginbody{padding:16px}.loginbox{padding:22px;border-radius:18px}.logoMark{width:44px;height:44px}
}

@media(display-mode:standalone){
  .pwaInstallButton{display:none!important}
  body{user-select:none}.bubbleBody,.currentMessage p,.eventcard p,input,textarea{user-select:text}
}

/* v3.3 audited PWA reliability + mobile polish */
:root{--app-height:100dvh}
.connectionBanner{position:fixed;z-index:220;left:50%;top:max(10px,env(safe-area-inset-top));transform:translateX(-50%);width:min(720px,calc(100% - 24px));padding:10px 14px;border:1px solid #8d6a23;border-radius:12px;background:#2a2110;color:#ffe4a3;box-shadow:0 14px 45px rgba(0,0,0,.35);font-size:12px;font-weight:750;text-align:center}.connectionBanner.offline{border-color:#8b4e55;background:#2a171b;color:#ffd0d5}.connectionBanner[hidden]{display:none}
.pwaInstallToast[data-reload="1"]{cursor:pointer;border-color:#337e61;color:#98f0c7}.pwaInstallToast[data-reload="1"]:after{content:' · tap to refresh';font-weight:800}
.mobileChatMenuButton,.mobileChatActionSheet{display:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid #54d9a0;outline-offset:2px}
button,a{-webkit-tap-highlight-color:transparent}

@media(max-width:780px){
  body.chatListOnly,body.chatOpen{overflow:hidden;padding-bottom:calc(var(--mobile-nav-h) + env(safe-area-inset-bottom))}
  body.chatListOnly .wrap,body.chatOpen .wrap{padding:0;margin:0}
  body.chatListOnly .chatWorkspace,body.chatOpen .chatWorkspace{height:calc(var(--app-height) - var(--mobile-top-h) - var(--mobile-nav-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:0;border:0;border-radius:0;box-shadow:none;grid-template-columns:1fr;background:#0d151d}
  body.chatListOnly .chatRail{display:flex}body.chatListOnly .chatStage{display:none}
  body.chatOpen{padding-bottom:0}body.chatOpen .topbar{display:none}body.chatOpen .mobileBottomNav{display:none}body.chatOpen .chatRail{display:none}body.chatOpen .chatStage{display:flex}body.chatOpen .chatWorkspace{height:var(--app-height)}

  .contactActions .compactAction,.contactActions .renameMenu,.contactActions .quickForm{display:none!important}
  .mobileChatMenuButton{display:grid;place-items:center;width:40px;height:40px;min-height:40px;padding:0;border:1px solid #2c3e4e;border-radius:50%;background:#16232d;color:#d8e6ef;font-size:17px;letter-spacing:1px;flex:0 0 auto}
  .mobileChatActionSheet{display:block;position:fixed;inset:0;z-index:180;pointer-events:none;visibility:hidden}.mobileChatActionSheet.open{pointer-events:auto;visibility:visible}
  .mobileChatActionBackdrop{position:absolute;inset:0;border:0;border-radius:0;background:rgba(0,0,0,.6);opacity:0;transition:opacity .18s ease}.mobileChatActionSheet.open .mobileChatActionBackdrop{opacity:1}
  .mobileChatActionCard{position:absolute;left:0;right:0;bottom:0;max-height:min(78dvh,620px);overflow:auto;-webkit-overflow-scrolling:touch;padding:8px 14px calc(18px + env(safe-area-inset-bottom));border:1px solid #2d3e4d;border-bottom:0;border-radius:22px 22px 0 0;background:#111a23;box-shadow:0 -22px 70px rgba(0,0,0,.5);transform:translateY(105%);transition:transform .22s ease}.mobileChatActionSheet.open .mobileChatActionCard{transform:translateY(0)}
  .mobileChatActionHead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 2px 12px;border-bottom:1px solid #22313d;margin-bottom:6px}.mobileChatActionHead>div{min-width:0}.mobileChatActionHead strong,.mobileChatActionHead small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobileChatActionHead strong{font-size:15px}.mobileChatActionHead small{margin-top:2px;color:#8298aa;font-size:10px}.mobileChatActionClose{width:36px;height:36px;min-height:36px;border-radius:50%;padding:0;background:#1b2934;border:1px solid #304452;color:#d8e6ef;font-size:22px}
  .mobileChatActionCard form{margin:0}.mobileActionRow{width:100%;min-height:50px;padding:11px 10px;border:0;border-bottom:1px solid #21303c;border-radius:0;background:transparent;color:#dce8f0;display:flex;align-items:center;gap:12px;text-align:left;font-size:16px;font-weight:600}.mobileActionRow span{font-size:13px}.mobileActionDetails>summary{list-style:none;cursor:pointer}.mobileActionDetails>summary::-webkit-details-marker{display:none}.mobileActionDetails[open]{background:#0e171f;border-radius:12px}.mobileExportGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:9px}.mobileExportGrid a{display:grid;place-items:center;min-height:42px;border:1px solid #2d4252;border-radius:10px;background:#16232d;color:#d9e7f0;text-decoration:none;font-size:12px;font-weight:800}.mobileInlineForm{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:7px;padding:9px}.mobileInlineForm input{min-width:0;min-height:43px;font-size:16px}.mobileInlineForm button{min-height:43px}
  body.mobileChatActionsOpen{overflow:hidden}

  .chatStage .contactBar{height:auto;min-height:calc(66px + env(safe-area-inset-top));padding-left:8px;padding-right:8px}.contactText{min-width:0}.contactActions{margin-left:auto}
  .threadViewport{height:auto;min-height:0}
  .threadInner{padding-bottom:max(30px,env(safe-area-inset-bottom))}
  .connectionBanner{top:max(8px,env(safe-area-inset-top));font-size:11px;padding:9px 11px;width:calc(100% - 18px)}
}

@media(max-width:430px){
  .mobileChatActionCard{padding-left:10px;padding-right:10px}.mobileActionRow{padding-left:8px;padding-right:8px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
.liveDot.offlineDot{background:#e06b78;box-shadow:0 0 0 3px rgba(224,107,120,.12)}


/* v3.3.2 inline media in chat bubbles ------------------------------------ */
.proBubble.hasInlineMedia{padding:6px 6px 7px;max-width:min(76%,540px)}
.proBubble.hasInlineMedia .bubbleAuthor,.proBubble.hasInlineMedia .quotedReply,.proBubble.hasInlineMedia .bubbleBody,.proBubble.hasInlineMedia .bubbleFooter,.proBubble.hasInlineMedia .mediaArchived{margin-left:5px;margin-right:5px}
.inlineMediaPreview{display:block;overflow:hidden;border-radius:10px;background:#091117;margin:0 0 7px;width:min(250px,100%);max-width:100%;border:1px solid rgba(255,255,255,.05);cursor:zoom-in}
.inlineMediaPreview img{display:block;width:100%;height:auto;max-height:240px;object-fit:cover;background:#091117}
.inlineMediaPreview.stickerPreview{background:transparent;border:0;min-width:0;width:min(180px,60vw);margin:1px 4px 6px;cursor:zoom-in}
.inlineMediaPreview.stickerPreview img{max-height:220px;object-fit:contain;background:transparent}
.inlineMediaPreview.mediaLoadFailed{min-height:90px;display:grid;place-items:center}
.inlineMediaPreview.mediaLoadFailed:after{content:'Media unavailable';font-size:10px;color:#8da0ae;padding:18px}
.inlineMediaPreview.mediaLoadFailed img{display:none}
.inlineMediaFile{display:flex;align-items:center;gap:10px;padding:11px 12px;margin:0 0 7px;border-radius:10px;background:rgba(5,12,17,.32);border:1px solid rgba(255,255,255,.06)}
.inlineMediaIcon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:#203342;color:#8fdab8;font-size:11px;font-weight:900;flex:0 0 auto}
.inlineMediaFile>div{display:flex;flex-direction:column;min-width:0}.inlineMediaFile strong{font-size:11px;color:#e4edf3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inlineMediaFile small{font-size:9px;color:#8296a5;margin-top:2px}
@media(max-width:780px){.proBubble.hasInlineMedia{max-width:92%;padding:5px 5px 6px}.inlineMediaPreview{width:min(220px,66vw)}.inlineMediaPreview img{max-height:200px}.inlineMediaPreview.stickerPreview{width:min(170px,56vw)}.inlineMediaPreview.stickerPreview img{max-height:170px}}

/* ========================================================================
   v3.6 FULL SYSTEM AUDIT — polished desktop + native-feeling mobile
   Visual-only layer; capture/database behavior intentionally unchanged.
   ======================================================================== */
:root{
  --bg:#071014;--bg2:#091419;--panel:#0d181e;--panel2:#111f26;--panel3:#15262e;
  --line:#20343d;--line-soft:rgba(255,255,255,.065);--text:#f2f7f8;--muted:#8aa0aa;
  --green:#25d366;--green2:#19b979;--green-soft:rgba(37,211,102,.11);--blue:#7bb6ff;
  --red:#ff6674;--amber:#f6c55d;--shadow:0 18px 52px rgba(0,0,0,.28);
  --radius:18px;--radius-sm:12px;
}
html{background:var(--bg)}
body{background:
  radial-gradient(1000px 500px at 90% -10%,rgba(37,211,102,.055),transparent 55%),
  radial-gradient(700px 420px at -8% 30%,rgba(63,131,248,.04),transparent 60%),
  linear-gradient(180deg,#071014 0%,#091319 44%,#071014 100%);
  letter-spacing:-.01em}

/* top navigation */
.topbar{min-height:68px;padding:10px max(18px,calc((100vw - 1440px)/2));gap:20px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(7,16,20,.88);box-shadow:0 8px 30px rgba(0,0,0,.12)}
.brand{display:flex;align-items:center;gap:10px;min-width:max-content;font-size:14px;letter-spacing:0}
.brandIcon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(145deg,#2de47a,#18b76a);color:#042312;font-size:12px;font-weight:1000;box-shadow:0 9px 22px rgba(37,211,102,.16)}
.brandCopy{display:flex;flex-direction:column;line-height:1.05}.brandCopy strong{font-size:14px}.brandCopy small{margin-top:4px;font-size:9px;color:#6f8791;font-weight:650;letter-spacing:.02em}.versionMark{margin-left:1px;padding:3px 6px;border:1px solid rgba(37,211,102,.18);border-radius:999px;background:rgba(37,211,102,.07);color:#7be7ac;font-size:9px;opacity:1}
.nav{gap:4px;justify-content:center}.nav a{display:flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid transparent;border-radius:11px;color:#8298a2;font-size:12px;font-weight:700;transition:.16s ease}.nav a:hover{background:#101e25;color:#eaf3f5;border-color:#1d343e}.nav a.active{background:rgba(37,211,102,.095);border-color:rgba(37,211,102,.18);color:#c8f8da}.navGlyph{width:17px;text-align:center;color:#6f8994;font-size:14px}.nav a.active .navGlyph{color:#38dc82}.topActions{display:flex;align-items:center;gap:5px}.pwaInstallTop{min-height:34px;border-radius:10px;background:#11261e;border-color:#20553c;color:#71e6a4;font-size:11px}.logoutButton{display:flex;align-items:center;gap:4px;font-size:11px}

/* main layout and page surfaces */
.wrap{width:min(1340px,calc(100% - 34px));margin:24px auto 72px}.panel,.hero,.stat,.deletedStats a{border-color:rgba(255,255,255,.075);box-shadow:0 10px 35px rgba(0,0,0,.095)}
.panel{background:linear-gradient(180deg,rgba(15,27,34,.96),rgba(12,23,29,.96));border-radius:20px}.hero{border-radius:24px;background:radial-gradient(circle at 88% 2%,rgba(37,211,102,.14),transparent 32%),linear-gradient(145deg,#0e1a20,#0b151b)}
.hero h1{font-weight:820;letter-spacing:-1.35px}.eyebrow,.sectionKicker{color:#51dc91}
.button,button{border-radius:11px}.primary{background:linear-gradient(180deg,#2bdd79,#21c96b);border-color:#2bd878;color:#032211;box-shadow:0 6px 18px rgba(37,211,102,.12)}.secondary{background:#13232b;border-color:#29404a}.secondary:hover{background:#182b34}

/* dashboard */
.proHero{min-height:180px;align-items:center}.proHero h1{font-size:39px}.proHero .muted{max-width:720px;color:#91a4ad;font-size:14px}.proStats{gap:10px}.stat{position:relative;overflow:hidden;min-height:106px;padding:17px;background:linear-gradient(150deg,#0f1b22,#0b151a);transition:transform .16s,border-color .16s,background .16s}.stat:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(37,211,102,.45),transparent);opacity:.34}.stat:hover{transform:translateY(-2px);border-color:#31505a;background:#102028}.stat span{font-size:11px;font-weight:700}.stat strong{font-size:30px;letter-spacing:-1px}.dangerStat:before{background:linear-gradient(90deg,transparent,rgba(255,102,116,.6),transparent)}
.healthAccount,.backupMini,.accountmini{background:#0b161c;border-color:#1e333c}.healthAccount{border-radius:14px}.healthDot.online{box-shadow:0 0 0 5px rgba(45,221,145,.08),0 0 16px rgba(45,221,145,.12)}
.messageItem{border-color:rgba(255,255,255,.045);border-radius:10px;margin:2px 7px;padding:13px 11px}.messageItem:hover{background:#112129}.avatar{border-radius:50%;background:linear-gradient(145deg,#18303a,#102129);border:1px solid #29424d}

/* chats: desktop app-like polish */
.chatWorkspace{height:calc(100dvh - 110px);min-height:640px;grid-template-columns:380px minmax(0,1fr);border-radius:20px;border-color:#213640;background:#0a1419;box-shadow:0 26px 80px rgba(0,0,0,.33)}
.chatRail{background:linear-gradient(180deg,#0e1a20,#0c171d);border-right-color:#20353e}.chatRailHeader{padding:19px 18px 10px}.chatRailHeader h1{font-size:25px;letter-spacing:-.8px}.liveDotWrap{background:rgba(37,211,102,.075);border-color:rgba(37,211,102,.16);color:#7ae5a8}.accountSwitcher select,.chatSearch input,.threadSearchBar input{background:#09151a;border-color:#223943}.chatTypeTabs{gap:5px}.chatTypeTabs a{border-radius:10px;font-weight:750}.chatTypeTabs a.active{background:rgba(37,211,102,.1);color:#aef0c8;border-color:rgba(37,211,102,.17)}
.chatListPro{padding:3px 7px 10px}.chatRowPro{margin:2px 0;padding:11px 10px;border:1px solid transparent;border-radius:13px;transition:background .12s,border-color .12s,transform .12s}.chatRowPro:hover{background:#122129;border-color:#1b3540}.chatRowPro.active{background:linear-gradient(90deg,rgba(37,211,102,.12),rgba(37,211,102,.045));border-color:rgba(37,211,102,.16);box-shadow:inset 3px 0 0 #25d366}.chatAvatar{border-radius:50%!important;background:#152832!important;border:1px solid #29414b;overflow:hidden}.chatRowTop strong{font-size:13px}.chatRowTop time{font-size:9px;color:#78909a}.chatNumber{font-size:9px;color:#67818c}.chatPreview{margin-top:3px;color:#9eb0b8}.miniBadge{border-radius:999px!important}
.chatStage{background:
 radial-gradient(circle at 25% 20%,rgba(37,211,102,.025),transparent 24%),
 radial-gradient(circle at 75% 70%,rgba(84,128,160,.025),transparent 26%),
 #081217}.chatStage:before{content:"";pointer-events:none;position:absolute;inset:0;opacity:.16;background-image:radial-gradient(rgba(255,255,255,.12) .55px,transparent .65px);background-size:18px 18px}.chatStage>*{position:relative;z-index:1}
.contactBar{border-bottom:1px solid #20333c;background:rgba(12,24,30,.94);backdrop-filter:blur(18px)}.contactAvatar{border-radius:50%!important;border-color:#2b434e}.contactTitleRow h2{font-weight:780;letter-spacing:-.25px}.contactNumber{color:#77909b}.contactSub{color:#657c86}
.threadViewport{scrollbar-color:#2d454f transparent}.threadInner{width:min(830px,calc(100% - 34px));padding-top:22px}.dateDivider span{background:#13232a;border:1px solid #253b44;color:#8ca1aa;box-shadow:0 5px 18px rgba(0,0,0,.15)}
.proBubble{border:1px solid rgba(255,255,255,.055);box-shadow:0 3px 10px rgba(0,0,0,.11);background:#17252c;color:#e9f0f2}.proBubbleRow.mine .proBubble{background:linear-gradient(145deg,#07594a,#075044);border-color:#0f6a58}.proBubbleRow.theirs .proBubble{border-bottom-left-radius:5px}.proBubbleRow.mine .proBubble{border-bottom-right-radius:5px}.bubbleBody{font-size:13.5px;line-height:1.5}.bubbleFooter{opacity:.78}.bubbleFooter time{font-variant-numeric:tabular-nums}.stateTag{border-radius:999px}.quotedReply{border-left:3px solid #40d88a;background:rgba(0,0,0,.13);border-radius:8px}.inlineMediaPreview{border-radius:12px;border-color:rgba(255,255,255,.07);background:#061014}.inlineMediaPreview img{max-height:240px}.archiveStatusBar{background:#0b171c;border-top-color:#20343d;color:#718892}
.noChatSelected{background:radial-gradient(circle,rgba(37,211,102,.04),transparent 65%);border-radius:24px}.noChatIcon{border-radius:50%;background:rgba(37,211,102,.09);border-color:rgba(37,211,102,.18);color:#62e6a1}

/* login */
.loginbody{background:radial-gradient(circle at 50% 8%,rgba(37,211,102,.09),transparent 35%),linear-gradient(180deg,#071014,#09151a);min-height:100dvh}.loginbox{width:min(430px,100%);padding:30px;border-radius:24px;background:rgba(13,25,31,.96);border-color:#24404a;box-shadow:0 28px 90px rgba(0,0,0,.38)}.loginBrand{display:flex;align-items:center;gap:13px}.loginBrand h1{margin:0;font-size:25px;letter-spacing:-.7px}.loginBrand .muted{margin-top:4px}.loginTrust{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0 4px}.loginTrust span{padding:5px 8px;border-radius:999px;background:#0b171c;border:1px solid #213741;color:#839aa4;font-size:9px;font-weight:750}.loginTrust span:first-child{color:#79e5a7;border-color:rgba(37,211,102,.19);background:rgba(37,211,102,.06)}.stack input{min-height:46px;border-radius:12px;background:#091419;border-color:#253d47}.stack .primary{min-height:46px}.loginInstallButton{width:100%;margin-top:12px;background:#10251d;border-color:#25613f;color:#73e5a5}

/* desktop responsive refinement */
@media(max-width:1180px) and (min-width:781px){.topbar{gap:10px}.brandCopy small,.versionMark{display:none}.nav a{padding:8px}.nav a span:last-child{display:none}.navGlyph{font-size:16px}.chatWorkspace{grid-template-columns:340px minmax(0,1fr)}}

/* mobile native-feeling refresh */
@media(max-width:780px){
  :root{--mobile-nav-h:62px;--mobile-top-h:58px}
  body{background:#091319}.topbar{min-height:var(--mobile-top-h);padding:8px 12px;gap:8px;background:rgba(8,18,23,.96);border-bottom-color:#1c3038}.brandIcon{width:34px;height:34px;border-radius:11px}.brandCopy strong{font-size:13px}.brandCopy small,.versionMark{display:none}.topbar .nav{display:none}.topActions{margin-left:auto}.pwaInstallTop{display:none!important}.logoutButton{width:36px;height:36px;min-height:36px;padding:0;border-radius:50%;font-size:0;background:#112028;border:1px solid #223943}.logoutButton:first-letter{font-size:16px}.logoutButton span{display:none}
  .wrap{width:100%;padding:0 10px;margin:13px auto calc(var(--mobile-nav-h) + 22px)}.hero{border-radius:18px;padding:18px;min-height:auto}.hero h1,.hero.compact h1,.proHero h1{font-size:27px;letter-spacing:-.9px}.proHero .muted{font-size:12px;line-height:1.55}.hero .actions{width:100%}.hero .actions .button{flex:1}.stats,.proStats,.deletedStats{gap:7px}.stat{min-height:88px;padding:12px;border-radius:15px}.stat strong{font-size:24px}.panel{border-radius:17px;padding:14px}.dashboardGrid{gap:10px}.messageItem{margin:2px 0;padding:12px 8px}.messageItem .avatar{width:38px;height:38px}
  .mobileBottomNav{height:calc(var(--mobile-nav-h) + env(safe-area-inset-bottom));padding:4px 7px env(safe-area-inset-bottom);background:rgba(8,18,23,.97);border-top-color:#20353d;box-shadow:0 -14px 40px rgba(0,0,0,.34)}.mobileBottomNav a,.mobileBottomNav button{min-height:52px;border-radius:13px;color:#708892;font-size:9px}.mobileBottomNav a.active{background:rgba(37,211,102,.09);color:#72e7a5}.mobileBottomNav .mobileNavIcon{font-size:19px}
  body.chatListOnly .chatWorkspace,body.chatOpen .chatWorkspace{background:#081217}.chatRail{background:#0c171d}.chatRailHeader{padding:14px 14px 7px}.chatRailHeader h1{font-size:24px}.chatListPro{padding:2px 6px 10px}.chatRowPro{padding:10px 8px;margin:1px 0;border-radius:12px}.chatRowPro.active{box-shadow:none}.chatAvatar{width:47px!important;height:47px!important}.chatRowTop strong{font-size:13px}.chatPreview{font-size:11px}.chatNumber{font-size:9px}
  .chatStage:before{opacity:.11;background-size:16px 16px}.chatStage .contactBar{background:rgba(10,21,26,.98);border-bottom-color:#1d3139}.mobileChatBack,.mobileChatMenuButton{background:#102129;border-color:#233943}.threadInner{width:100%;padding:14px 8px 28px}.proBubble{max-width:89%;padding:8px 10px 6px}.proBubble.hasInlineMedia{max-width:94%}.bubbleBody{font-size:14px}.inlineMediaPreview{width:min(220px,64vw)}.inlineMediaPreview img{max-height:190px}.archiveStatusBar{display:none}.newMessageJump{border-radius:999px;background:#17342a;border:1px solid #286347;color:#91edb7;box-shadow:0 8px 25px rgba(0,0,0,.25)}
  .mobileMoreSheet .mobileSheetCard,.mobileChatActionCard{background:#0d1a20;border-color:#28414b}.mobileSheetGrid a,.mobileExportGrid a{background:#11232a;border-color:#29414c}.mobileActionRow{border-color:#213740}.connectionBanner{border-radius:13px;box-shadow:0 16px 44px rgba(0,0,0,.34)}
  .loginbody{padding:14px}.loginbox{padding:23px;border-radius:21px}.loginTrust{gap:5px}.loginTrust span{font-size:8px}
}

@media(max-width:430px){.wrap{padding-left:8px;padding-right:8px}.proStats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat{min-height:83px}.chatRowBody{min-width:0}.inlineMediaPreview{width:min(200px,62vw)}.proBubble.hasInlineMedia{max-width:96%}}

.chatStage{position:relative}
@media(max-width:780px){.logoutButton:before{content:'↗';font-size:16px}.logoutButton{font-size:0!important}.logoutButton span{display:none!important}}


/* v3.5.1 Delete-for-me state */
.localDeletedTag{color:#f6cb73;background:rgba(244,186,74,.12);border:1px solid rgba(244,186,74,.18)}
.proBubble.isLocalDeleted{outline:1px dashed rgba(244,186,74,.42);outline-offset:-1px}
.localDeletedBubble{border-color:#725b2e!important;box-shadow:inset 0 0 0 1px rgba(244,186,74,.08)}
.warntext{color:#f6cb73}

/* v3.5.3 linked-device session recovery */
.sessionRecoveryNotice{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.8fr);gap:18px;align-items:center;border-color:rgba(123,182,255,.16)}
.sessionSecurityNote{margin:0;padding:12px 14px;border-radius:13px;background:rgba(246,197,93,.07);border:1px solid rgba(246,197,93,.18);color:#c8b780;font-size:11px;line-height:1.55}
.sessionRecoveryBox{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:15px 0;padding:13px 14px;border:1px solid #203943;border-radius:14px;background:#0a171d}
.sessionRecoveryCopy{display:flex;flex-direction:column;gap:4px;min-width:0}.sessionRecoveryCopy strong{font-size:12px}.sessionRecoveryCopy small{color:#708993;font-size:9px}.sessionReady{color:#6fe3a1;font-size:10px;font-weight:750}.sessionUnavailable{color:#b7a86f;font-size:10px;font-weight:700}
.sessionRecoveryActions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.sessionRecoveryActions .button,.sessionRecoveryActions button{min-height:36px;padding:8px 11px;font-size:10px}.sessionExportButton{color:#8ec2ff}
@media(max-width:780px){.sessionRecoveryNotice{grid-template-columns:1fr}.sessionRecoveryBox{align-items:stretch;flex-direction:column}.sessionRecoveryActions{justify-content:stretch}.sessionRecoveryActions .button,.sessionRecoveryActions button{flex:1;text-align:center}.sessionSecurityNote{font-size:10px}}

/* v3.6 audit: messages can carry both local-delete and revoke history. */
.deletedBadgeStack{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end}
.inlineDownloadForm{display:inline-flex;margin:0}
.miniBadge.warn{color:#ffd58a;border-color:rgba(255,193,94,.26);background:rgba(255,193,94,.09)}
.localDeletePill{border-color:rgba(255,193,94,.25)!important;color:#ffd58a!important;background:rgba(255,193,94,.08)!important}

/* v3.6.1 production-lock diagnostics */
.buttonRow{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.buttonRow form{margin:0}.smallText{font-size:12px;margin-top:12px}.notice{padding:11px 13px;border-radius:11px;margin:10px 0 14px;border:1px solid var(--line);background:var(--panel2)}.notice.successNotice{border-color:rgba(33,196,123,.28);background:rgba(33,196,123,.08);color:#9ef0c6}.notice.dangerNotice{border-color:rgba(255,100,112,.3);background:rgba(255,100,112,.08);color:#ffadb5}.badge.success{background:rgba(33,196,123,.13);color:#62e5a7;border:1px solid rgba(33,196,123,.28)}.badge.danger{background:rgba(255,100,112,.12);color:#ff9ca5;border:1px solid rgba(255,100,112,.28)}button:disabled{opacity:.55;cursor:not-allowed}


/* v3.6.4 fresh-capture account state */
.freshCaptureState{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 2px}.freshCaptureState small{color:var(--muted,#91a6b1);font-size:12px}.freshCaptureState .badge{white-space:nowrap}

/* v3.6.5 desktop chat action popovers ------------------------------------ */
.desktopActionMenu{display:inline-flex;align-items:center;position:relative}
.desktopPopoverTrigger{gap:6px;white-space:nowrap;min-width:70px;transition:border-color .14s,background .14s,color .14s,box-shadow .14s}
.desktopPopoverTrigger:hover,.desktopPopoverTrigger[aria-expanded="true"]{background:#1a2a35;border-color:#3b5568;color:#eef6fb;box-shadow:0 7px 22px rgba(0,0,0,.18)}
.menuChevron{display:inline-block;font-size:9px;color:#7991a3;transition:transform .14s ease}
.desktopPopoverTrigger[aria-expanded="true"] .menuChevron{transform:rotate(180deg)}
.desktopActionPopover{display:none;position:fixed;inset:auto;margin:0;width:min(330px,calc(100vw - 24px));padding:9px;border:1px solid #304754;border-radius:14px;background:linear-gradient(180deg,#11212a,#0e1a21);color:#e7f0f5;box-shadow:0 24px 70px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.025);z-index:2147483000;overflow:hidden;visibility:hidden;opacity:0;pointer-events:none}
.desktopActionPopover:popover-open,.desktopActionPopover.fallbackOpen{display:block}
.desktopActionPopover:popover-open.popoverPositioned,.desktopActionPopover.fallbackOpen.popoverPositioned{visibility:visible;opacity:1;pointer-events:auto}
.desktopActionPopover::backdrop{background:transparent}
.exportPopover{width:min(250px,calc(100vw - 24px))}
.desktopPopoverHead{padding:7px 8px 10px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:6px}
.desktopPopoverHead strong,.desktopPopoverHead small{display:block}.desktopPopoverHead strong{font-size:12px;letter-spacing:.1px}.desktopPopoverHead small{margin-top:2px;color:#78909d;font-size:9px}
.desktopExportGrid{display:grid;gap:4px}.desktopExportGrid a{display:grid;grid-template-columns:48px 1fr;align-items:center;gap:8px;padding:9px 10px;border:1px solid transparent;border-radius:10px;color:#d9e7ee;transition:background .12s,border-color .12s}.desktopExportGrid a:hover,.desktopExportGrid a:focus-visible{background:#172a33;border-color:#29434f;outline:none}.desktopExportGrid a span{font-size:11px;font-weight:850}.desktopExportGrid a small{font-size:9px;color:#78909c}
.morePopover{width:min(350px,calc(100vw - 24px));padding:10px}
.desktopPopoverForm{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px;position:static!important;width:auto!important;margin:0!important;padding:10px 8px!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.desktopPopoverForm+.desktopPopoverForm{border-top:1px solid rgba(255,255,255,.07)!important}
.desktopPopoverForm label{display:block;min-width:0;color:#78909d;font-size:9px;font-weight:700}.desktopPopoverForm label>span{display:block;margin:0 0 5px 1px}.desktopPopoverForm input{width:100%;min-width:0;height:38px;padding:8px 10px;background:#09141a;border:1px solid #2a424f;border-radius:9px;color:#eaf2f6;outline:none}.desktopPopoverForm input:focus{border-color:#3d735e;box-shadow:0 0 0 3px rgba(37,211,102,.08)}.desktopPopoverForm button{min-height:38px;padding:8px 12px}
@media(max-width:780px){.desktopActionMenu{display:none!important}}
@media(min-width:781px) and (max-width:1180px){.contactActions{gap:6px}.desktopPopoverTrigger{min-width:auto;padding-left:9px;padding-right:9px}}

/* v3.6.9 full UI audit ------------------------------------------------------ */
/* General resilience for long labels / filenames / metadata. */
.messageTop,.messageMain,.healthAlert>div,.diagAccount>div,.mediaInfo,.backupMini{min-width:0}
.messageTop strong{min-width:0;flex:1}
.messageMeta{min-width:0;flex-wrap:wrap;row-gap:2px}
.backupMini strong,.healthAlert strong,.healthAlert p,.diagCard small,.sessionRecoveryCopy small{overflow-wrap:anywhere;word-break:break-word}
.mediaInfo strong,.mediaInfo span,.mediaInfo small{max-width:100%}
.contactMain{flex:1;min-width:0}.contactText{flex:1;min-width:0}.contactTitleRow h2{flex:1;min-width:0}.contactActions{flex:0 0 auto}

/* Mid-size desktop/tablet: avoid cramped multi-column forms and cards. */
@media(min-width:781px) and (max-width:1180px){
  .dashboardGrid{grid-template-columns:1fr}
  .diagnosticGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mediaGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .deletedStats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proFilters,.deletedFilters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proFilters>button,.deletedFilters>button{min-height:42px}
  .contactTitleRow .favoritePill,.contactTitleRow .deletedCountPill{display:none}
}

/* The search button is hidden below 1100px, so remove its now-empty grid track. */
@media(min-width:781px) and (max-width:1100px){
  .chatSearch{grid-template-columns:1fr}
  .chatSearch .searchField{width:100%}
}

/* Compact desktop / landscape tablet. Keep the topbar on one row and give the
   open chat enough space to show the contact name and core actions. */
@media(min-width:781px) and (max-width:900px){
  .topbar{align-items:center;flex-wrap:nowrap}
  .nav{order:0;width:auto;min-width:0}
  .logout{margin-left:0}
  .chatWorkspace{grid-template-columns:300px minmax(0,1fr)}
  .contactBar{gap:10px;padding-left:12px;padding-right:12px}
  .contactActions{gap:5px}
  .contactActions .quickForm{display:none}
  .desktopPopoverTrigger{padding-left:9px;padding-right:9px}
  .chatRailMeta{padding-left:12px;padding-right:12px}
}

/* Mobile list rows: Deleted badges used to create an implicit third CSS-grid
   column and could render outside the card. Keep all badges inside column 2. */
@media(max-width:780px){
  .deletedBadgeStack{grid-column:2;justify-content:flex-start;max-width:100%}
  .deletedBadgeStack .badge{white-space:normal;text-align:left;line-height:1.25}
  .messageMeta{font-size:10px}
  .messageMeta span{min-width:0;overflow-wrap:anywhere}
  .accountCard>.actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .accountCard>.actions form,.accountCard>.actions form>button{width:100%;margin:0}
  .backupMini strong{font-size:10px;line-height:1.35}
  .mediaCard .actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .mediaCard .actions .button{width:100%;margin-top:6px}
  .mobileBottomNav a.active,.mobileBottomNav button.active{color:#72e7a5;background:rgba(37,211,102,.09)}
  .mobileSheetGrid a.active{border-color:rgba(37,211,102,.28);background:rgba(37,211,102,.09);color:#8be9b1}
}
@media(max-width:430px){
  .accountCard>.actions{grid-template-columns:1fr}
  .mediaGrid{grid-template-columns:1fr}
}

/* Very short desktop windows: preserve a usable conversation viewport rather
   than forcing a large minimum page height. */
@media(min-width:781px) and (max-height:680px){
  .chatWorkspace{height:calc(100dvh - 96px)}
  .wrap:has(.chatWorkspace){margin-top:10px}
  .contactBar{min-height:74px;padding-top:9px;padding-bottom:9px}
  .chatRailHeader{padding-top:13px}
}

/* v3.6.9: instant chat switching + stable avatar presentation */
.chatStage.chatSwitching .threadViewport{opacity:.58;transition:opacity .12s ease}
.chatStage.chatSwitching .contactBar{opacity:.78;transition:opacity .12s ease}
.railContactPhoto.hidden,.contactPhoto.hidden{display:none!important}
@media (prefers-reduced-motion:reduce){.chatStage.chatSwitching .threadViewport,.chatStage.chatSwitching .contactBar{transition:none}}

/* v3.6.9 account lifecycle clarity */
.removedAccountList{display:grid;gap:10px}.removedAccountRow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.018)}.removedAccountRow>div{min-width:0}.removedAccountRow .messageMeta{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}.removedAccountRow form{flex:0 0 auto}@media(max-width:720px){.removedAccountRow{align-items:stretch;flex-direction:column}.removedAccountRow form,.removedAccountRow button{width:100%}}
/* v3.7 backup reliability */
.backupStatusGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0 12px}.backupStatusGrid>div{padding:10px 11px;border:1px solid #20343d;border-radius:11px;background:#0b151c;min-width:0}.backupStatusGrid span{display:block;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.6px}.backupStatusGrid strong{display:block;margin-top:3px;font-size:11px;overflow-wrap:anywhere}.backupLocation{padding:10px 11px;margin-bottom:8px;border:1px solid #20343d;border-radius:11px;background:#0a141a}.backupLocation span,.backupLocation small{display:block;color:var(--muted);font-size:9px}.backupLocation code{display:block;margin:4px 0 3px;color:#7be5b0;font-size:10px;overflow-wrap:anywhere}.backupMini .linkbtn{text-decoration:none;display:inline-flex;align-items:center}.backupPanel .panelhead{gap:12px}
@media(max-width:600px){.backupStatusGrid{grid-template-columns:1fr}.backupPanel .panelhead{align-items:flex-start;flex-direction:column}.backupPanel .panelhead .button{width:100%;justify-content:center}}

/* v3.7.2 premium desktop navigation --------------------------------------- */
@media(min-width:1181px){
  .topbar{
    min-height:78px;
    padding:0 max(24px,calc((100vw - 1480px)/2));
    gap:30px;
    background:linear-gradient(180deg,rgba(6,17,21,.97),rgba(7,17,21,.93));
    border-bottom:1px solid rgba(120,180,166,.10);
    box-shadow:0 12px 38px rgba(0,0,0,.16);
    backdrop-filter:blur(20px) saturate(125%);
  }
  .topbar:after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:-1px;height:1px;
    background:linear-gradient(90deg,transparent 5%,rgba(37,211,102,.14) 30%,rgba(101,157,184,.10) 70%,transparent 95%);
    pointer-events:none;
  }
  .brand{
    gap:12px;
    min-width:240px;
    padding:8px 0;
  }
  .brandIcon{
    width:44px;height:44px;
    border-radius:14px;
    font-size:13px;
    letter-spacing:-.2px;
    background:linear-gradient(145deg,#36e989,#1fc46e 70%);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 10px 28px rgba(31,196,110,.18),inset 0 1px 0 rgba(255,255,255,.18);
  }
  .brandCopy strong{
    font-size:15px;
    line-height:1.1;
    letter-spacing:-.25px;
    color:#f2f8f6;
  }
  .brandCopy small{
    margin-top:5px;
    font-size:10px;
    color:#738a91;
    letter-spacing:.015em;
  }
  .versionMark{
    margin-left:2px;
    padding:4px 8px;
    font-size:9px;
    font-weight:850;
    color:#8aefb6;
    border-color:rgba(37,211,102,.22);
    background:rgba(37,211,102,.075);
    box-shadow:inset 0 0 0 1px rgba(37,211,102,.025);
  }
  .nav{
    flex:1;
    justify-content:center;
    align-items:center;
    gap:6px;
    overflow:visible;
  }
  .nav a{
    position:relative;
    min-height:42px;
    gap:8px;
    padding:0 13px;
    border-radius:12px;
    color:#8fa3aa;
    font-size:12px;
    font-weight:720;
    letter-spacing:-.05px;
    transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease;
  }
  .nav a:hover{
    color:#eaf4f1;
    background:rgba(255,255,255,.035);
    border-color:rgba(118,166,159,.12);
    transform:translateY(-1px);
  }
  .nav a.active{
    color:#dbf8e7;
    background:linear-gradient(180deg,rgba(37,211,102,.13),rgba(37,211,102,.075));
    border-color:rgba(37,211,102,.24);
    box-shadow:0 8px 22px rgba(0,0,0,.13),inset 0 1px 0 rgba(255,255,255,.035);
  }
  .nav a.active:after{
    content:"";
    position:absolute;
    left:50%;bottom:4px;
    width:16px;height:2px;
    transform:translateX(-50%);
    border-radius:99px;
    background:#39d984;
    box-shadow:0 0 10px rgba(57,217,132,.45);
  }
  .navSvg{
    width:17px;height:17px;
    fill:none;
    stroke:#6f8991;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex:0 0 auto;
    transition:stroke .16s ease,transform .16s ease;
  }
  .nav a:hover .navSvg{stroke:#b7cdc6}
  .nav a.active .navSvg{stroke:#4ade91}
  .navDivider{
    flex:0 0 1px;
    width:1px;height:28px;
    margin:0 5px;
    background:linear-gradient(180deg,transparent,rgba(141,179,174,.20),transparent);
  }
  .topActions{
    min-width:118px;
    justify-content:flex-end;
    gap:8px;
  }
  .themeToggleButton{
    min-height:44px;
    padding:8px 14px 8px 12px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    border:1px solid rgba(123,161,168,.14);
    border-radius:14px;
    background:rgba(255,255,255,.02);
    color:#e9f0f4;
    box-shadow:none;
    transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease;
  }
  .themeToggleButton:hover{
    background:rgba(255,255,255,.05);
    border-color:rgba(123,161,168,.24);
    color:#ffffff;
    transform:translateY(-1px);
    box-shadow:0 6px 20px rgba(0,0,0,.16);
  }
  .themeToggleButton .themeToggleIcon{
    width:24px;
    height:24px;
    min-width:24px;
    border-radius:999px;
    display:grid;
    place-items:center;
    font-size:12px;
    line-height:1;
    background:rgba(255,255,255,.07);
    color:#ffffff;
  }
  .themeToggleButton .themeToggleMeta{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:1px;
    line-height:1.12;
    min-width:0;
  }
  .themeToggleButton .themeToggleMeta strong,
  .themeToggleButton .themeToggleMeta small{
    display:block;
    margin:0;
    white-space:nowrap;
  }
  .themeToggleButton .themeToggleMeta strong{
    font-size:13px;
    font-weight:800;
    letter-spacing:-.1px;
  }
  .themeToggleButton .themeToggleMeta small{
    font-size:11px;
    color:#91a4ae;
    opacity:1;
  }
  .logoutButton{
    min-height:40px;
    padding:0 13px;
    gap:8px;
    border:1px solid rgba(123,161,168,.12);
    border-radius:12px;
    background:rgba(255,255,255,.018);
    color:#8fa3aa;
    font-size:11px;
    font-weight:720;
    transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
  }
  .logoutButton:hover{
    color:#f0f5f4;
    background:rgba(255,255,255,.045);
    border-color:rgba(123,161,168,.20);
    transform:translateY(-1px);
  }
  .logoutSvg{
    width:16px;height:16px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
}

/* Keep the same visual language on normal laptop widths without squeezing. */
@media(min-width:901px) and (max-width:1180px){
  .topbar{min-height:70px;padding-left:18px;padding-right:18px;gap:12px;background:rgba(7,17,21,.95)}
  .brand{min-width:auto;gap:9px}.brandIcon{width:39px;height:39px}.brandCopy strong{font-size:14px}
  .nav{justify-content:center;gap:4px}
  .nav a{width:40px;height:40px;padding:0;justify-content:center;border-radius:11px}
  .nav a span:not(.navGlyph){display:none}
  .navSvg{display:block;width:17px;height:17px;fill:none;stroke:#738d95;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .nav a.active .navSvg{stroke:#4ade91}
  .navGlyph{display:none!important}
  .navDivider{display:block;width:1px;height:24px;margin:0 3px;background:rgba(130,169,163,.16)}
  .topActions{min-width:auto;gap:7px}
  .themeToggleButton{min-height:40px;padding:0 11px;border-radius:12px;gap:8px}
  .themeToggleButton .themeToggleIcon{width:22px;height:22px;min-width:22px;font-size:11px}
  .themeToggleButton .themeToggleMeta small{display:none}
  .themeToggleButton .themeToggleMeta strong{font-size:12px}
  .logoutButton{width:40px;height:40px;padding:0;justify-content:center;border-radius:11px;border:1px solid rgba(123,161,168,.12);background:rgba(255,255,255,.02)}
  .logoutButton span{display:none}.logoutSvg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
}

/* Legacy glyphs are replaced by consistent inline SVG icons in v3.7.2. */
.navGlyph{display:none}
@media(max-width:900px){.navDivider{display:none}.navSvg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.logoutSvg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}}

/* v3.7.3 premium dashboard ------------------------------------------------ */
.dashboardHeroV3{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(360px,.65fr);gap:26px;align-items:stretch;margin:4px 0 18px;padding:34px 36px;border:1px solid rgba(255,255,255,.075);border-radius:26px;overflow:hidden;background:radial-gradient(circle at 78% 14%,rgba(37,211,102,.13),transparent 31%),radial-gradient(circle at 4% 94%,rgba(80,140,180,.06),transparent 27%),linear-gradient(145deg,#0e1b21,#0a151a 62%,#0a171b);box-shadow:0 24px 70px rgba(0,0,0,.2)}
.dashboardHeroV3:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;background-image:radial-gradient(rgba(255,255,255,.16) .55px,transparent .65px);background-size:20px 20px;mask-image:linear-gradient(90deg,#000,transparent 62%)}
.dashboardHeroCopy,.dashboardPulseCard{position:relative;z-index:1}.dashboardHeroCopy{display:flex;flex-direction:column;justify-content:center;min-width:0}.dashboardHeroBadge{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;margin-bottom:17px;padding:6px 9px;border:1px solid rgba(255,255,255,.075);border-radius:999px;background:rgba(7,18,22,.62);color:#92a9b2;font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.dashboardLiveDot{width:7px;height:7px;border-radius:50%;background:#647985}.dashboardLiveDot.online{background:#2edd7f;box-shadow:0 0 0 5px rgba(46,221,127,.08),0 0 16px rgba(46,221,127,.25)}.dashboardHeroV3 .eyebrow{margin-bottom:7px}.dashboardHeroV3 h1{margin:0;color:#f2f8f7;font-size:46px;line-height:1.03;letter-spacing:-2.1px;font-weight:820}.dashboardHeroV3 h1 span{color:#8ea4ac}.dashboardHeroText{max-width:690px;margin:15px 0 0;color:#8da2ab;font-size:14px;line-height:1.7}.dashboardHeroActions{display:flex;align-items:center;gap:9px;margin-top:24px}.dashboardHeroActions .button{min-height:43px;padding:9px 15px}.dashboardHeroActions svg{width:17px;height:17px;margin-right:7px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.dashboardSecondaryAction{background:rgba(17,34,41,.9);border-color:#29434e;color:#dce8eb}.dashboardSecondaryAction:hover{background:#172b34;border-color:#365562}
.dashboardPulseCard{align-self:stretch;padding:20px;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:linear-gradient(180deg,rgba(11,25,30,.88),rgba(8,19,24,.92));box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 18px 45px rgba(0,0,0,.14)}.dashboardPulseTop{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center}.dashboardPulseIcon{width:42px;height:42px;display:grid;place-items:center;border:1px solid #29404a;border-radius:13px;background:#102129;color:#6f8790}.dashboardPulseIcon.online{border-color:rgba(37,211,102,.2);background:rgba(37,211,102,.075);color:#5ce49a}.dashboardPulseIcon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}.dashboardPulseTop div:nth-child(2){min-width:0}.dashboardPulseTop span:not(.dashboardStatusPill){display:block;color:#728992;font-size:9px;text-transform:uppercase;letter-spacing:.08em;font-weight:800}.dashboardPulseTop strong{display:block;margin-top:3px;font-size:15px;letter-spacing:-.2px}.dashboardStatusPill{display:inline-flex;align-items:center;padding:4px 7px;border-radius:999px;font-size:8px;font-weight:950;letter-spacing:.08em}.dashboardStatusPill.ok{background:rgba(37,211,102,.09);border:1px solid rgba(37,211,102,.2);color:#76e7a9}.dashboardStatusPill.wait{background:rgba(244,186,74,.08);border:1px solid rgba(244,186,74,.2);color:#f0c76f}.dashboardPulseGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}.dashboardPulseGrid>div{padding:12px;border:1px solid #20343d;border-radius:13px;background:rgba(6,17,21,.6)}.dashboardPulseGrid span{display:block;color:#6d858f;font-size:9px;text-transform:uppercase;letter-spacing:.06em;font-weight:800}.dashboardPulseGrid strong{display:block;margin-top:5px;font-size:18px;letter-spacing:-.55px}.dashboardPulseGrid small{display:block;margin-top:2px;color:#6e848d;font-size:9px}.dashboardPulseFooter{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:13px;border-top:1px solid rgba(255,255,255,.055);color:#718892;font-size:9px}.dashboardPulseFooter>span{display:flex;align-items:center;gap:7px;min-width:0}.dashboardPulseFooter a{color:#78dca4;font-weight:700;white-space:nowrap}.dashboardMiniDot{width:6px;height:6px;flex:0 0 auto;border-radius:50%;background:#687d86}.dashboardMiniDot.online{background:#2bdc7c;box-shadow:0 0 9px rgba(43,220,124,.4)}
.dashboardMetrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin-bottom:18px}.dashboardMetric{display:flex;align-items:center;gap:12px;min-width:0;min-height:104px;padding:15px;border:1px solid rgba(255,255,255,.07);border-radius:17px;background:linear-gradient(150deg,#0f1b22,#0b151a);transition:transform .15s ease,border-color .15s ease,background .15s ease}.dashboardMetric:hover{transform:translateY(-2px);border-color:#31505a;background:#102028}.dashboardMetricIcon{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;border-radius:12px;border:1px solid rgba(37,211,102,.16);background:rgba(37,211,102,.07);color:#5ee49b}.dashboardMetricIcon.red{border-color:rgba(255,100,112,.18);background:rgba(255,100,112,.07);color:#ff8993}.dashboardMetricIcon.amber{border-color:rgba(244,186,74,.2);background:rgba(244,186,74,.07);color:#efc56e}.dashboardMetricIcon.blue{border-color:rgba(108,168,255,.19);background:rgba(108,168,255,.07);color:#85b6ff}.dashboardMetricIcon.cyan{border-color:rgba(74,207,224,.18);background:rgba(74,207,224,.07);color:#72d9e7}.dashboardMetricIcon.violet{border-color:rgba(178,129,255,.18);background:rgba(178,129,255,.07);color:#c09bff}.dashboardMetricIcon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.dashboardMetricCopy{min-width:0}.dashboardMetricCopy small{display:block;color:#78909a;font-size:9px;font-weight:750}.dashboardMetricCopy strong{display:block;margin:2px 0 1px;font-size:25px;line-height:1.05;letter-spacing:-.8px}.dashboardMetricCopy em{display:block;overflow:hidden;color:#607984;font-size:8px;font-style:normal;white-space:nowrap;text-overflow:ellipsis}
.dashboardSectionHead{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:14px}.dashboardSectionHead.compact{align-items:center}.dashboardSectionHead h2{margin:1px 0 0;font-size:18px;letter-spacing:-.35px}.dashboardSectionHead p:not(.sectionKicker){margin:4px 0 0;color:#748b94;font-size:10px}.dashboardSectionHead .sectionKicker{margin:0;font-size:8px;letter-spacing:.13em}.dashboardTextLink{color:#75dca2;font-size:10px;font-weight:750;white-space:nowrap}.dashboardTextLink:hover{color:#9aeabd}.dashboardAlertPanel{padding:18px 20px}.dashboardAlertRows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.dashboardAlertRow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:11px 12px;border:1px solid rgba(244,186,74,.16);border-radius:12px;background:rgba(244,186,74,.045)}.dashboardAlertRow.critical{border-color:rgba(255,100,112,.18);background:rgba(255,100,112,.05)}.dashboardAlertIcon{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:rgba(244,186,74,.09);color:#eec66f}.dashboardAlertRow.critical .dashboardAlertIcon{background:rgba(255,100,112,.08);color:#ff8993}.dashboardAlertIcon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.dashboardAlertRow strong{font-size:11px}.dashboardAlertRow p{margin:2px 0 3px;color:#a4b4ba;font-size:10px;line-height:1.4}.dashboardAlertRow small{color:#667d86;font-size:8px}
.dashboardContentGrid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(320px,.75fr);gap:14px;align-items:start}.dashboardRecentPanel{padding:18px 0 8px;overflow:hidden}.dashboardRecentPanel>.dashboardSectionHead{padding:0 18px}.dashboardActivityList{display:flex;flex-direction:column}.dashboardActivityItem{display:grid;grid-template-columns:43px minmax(0,1fr) auto;gap:11px;align-items:center;padding:11px 18px;border-top:1px solid rgba(255,255,255,.045);transition:background .12s ease}.dashboardActivityItem:hover{background:#102027}.dashboardActivityAvatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;overflow:hidden;border:1px solid #29434e;background:linear-gradient(145deg,#17303a,#102129);color:#a5bbc4;font-size:11px;font-weight:900}.dashboardActivityMain{min-width:0}.dashboardActivityTop{display:flex;align-items:center;justify-content:space-between;gap:10px}.dashboardActivityTop strong{min-width:0;overflow:hidden;font-size:11px;white-space:nowrap;text-overflow:ellipsis}.dashboardActivityTop time{flex:0 0 auto;color:#647b85;font-size:8px}.dashboardActivityMeta{display:flex;align-items:center;gap:5px;margin-top:1px;color:#667f89;font-size:8px;white-space:nowrap;overflow:hidden}.dashboardDirection{padding:2px 5px;border-radius:999px;font-weight:800}.dashboardDirection.out{background:rgba(37,211,102,.07);color:#73dba1}.dashboardDirection.in{background:rgba(108,168,255,.07);color:#86b5ee}.dashboardActivityMain p{margin:4px 0 0;overflow:hidden;color:#a6b7bd;font-size:10px;white-space:nowrap;text-overflow:ellipsis}.dashboardActivityBadges{display:flex;align-items:center;justify-content:flex-end;gap:5px}.dashboardActivityBadges .badge{padding:3px 6px;font-size:7px}.dashboardActivityBadges svg{width:14px;height:14px;margin-left:2px;fill:none;stroke:#4c6570;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.dashboardEmpty{padding:40px 20px}.dashboardSideStack{display:grid;gap:14px}.dashboardSidePanel{margin:0;padding:17px}.dashboardAccountList{display:flex;flex-direction:column;gap:6px}.dashboardAccountRow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center;padding:10px;border:1px solid #1f343d;border-radius:12px;background:#0a151b}.dashboardAccountRow:hover{background:#0e1b21;border-color:#2b4651}.dashboardAccountStatus{width:23px;height:23px;display:grid;place-items:center;border-radius:8px;background:#111f26}.dashboardAccountStatus i{width:7px;height:7px;border-radius:50%;background:#71848b}.dashboardAccountStatus.online{background:rgba(37,211,102,.07)}.dashboardAccountStatus.online i{background:#2ddd7e;box-shadow:0 0 9px rgba(45,221,126,.35)}.dashboardAccountInfo,.dashboardAccountRight{min-width:0}.dashboardAccountInfo strong,.dashboardAccountRight b{display:block;font-size:10px}.dashboardAccountInfo small,.dashboardAccountRight small{display:block;margin-top:2px;color:#687f88;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dashboardAccountRight{text-align:right;max-width:130px}.dashboardAccountRight b{color:#73dfa3;font-size:8px;letter-spacing:.06em}.dashboardLatestBackup{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;padding:12px;border:1px solid rgba(37,211,102,.12);border-radius:13px;background:rgba(37,211,102,.035)}.dashboardBackupIcon{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:rgba(37,211,102,.075);color:#67dfa0}.dashboardBackupIcon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.dashboardLatestBackup small,.dashboardLatestBackup span{display:block;color:#6d858e;font-size:8px}.dashboardLatestBackup strong{display:block;margin:2px 0;font-size:10px}.dashboardBackupHistory{margin:9px 0}.dashboardBackupHistory>div{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 2px;border-bottom:1px solid rgba(255,255,255,.04)}.dashboardBackupHistory span{display:flex;align-items:center;gap:6px;color:#92a4aa;font-size:8px}.dashboardBackupHistory i{width:5px;height:5px;border-radius:50%;background:#3fd78a}.dashboardBackupHistory small{color:#607983;font-size:8px}.dashboardBackupAction{width:100%;min-height:36px;margin-top:4px;background:#102129;border-color:#28414b;color:#b9c9ce;font-size:9px}.dashboardBackupAction:hover{background:#14262f}.dashboardBackupPanel{overflow:hidden}

@media(max-width:1180px) and (min-width:781px){.dashboardHeroV3{grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);padding:28px}.dashboardHeroV3 h1{font-size:38px}.dashboardMetrics{grid-template-columns:repeat(3,minmax(0,1fr))}.dashboardContentGrid{grid-template-columns:minmax(0,1.5fr) minmax(280px,.8fr)}}
@media(max-width:920px) and (min-width:781px){.dashboardHeroV3{grid-template-columns:1fr}.dashboardPulseCard{display:grid;grid-template-columns:1fr auto;gap:14px}.dashboardPulseTop{grid-column:1}.dashboardPulseGrid{grid-column:2;grid-row:1;margin-top:0;min-width:280px}.dashboardPulseFooter{grid-column:1/-1;margin-top:0}.dashboardContentGrid{grid-template-columns:1fr}.dashboardSideStack{grid-template-columns:1fr 1fr}.dashboardAlertRows{grid-template-columns:1fr}}
@media(max-width:780px){.dashboardHeroV3{display:block;margin:0 0 11px;padding:18px;border-radius:18px}.dashboardHeroBadge{margin-bottom:12px}.dashboardHeroV3 h1{font-size:30px;letter-spacing:-1.2px}.dashboardHeroText{font-size:11px;line-height:1.6}.dashboardHeroActions{margin-top:17px}.dashboardHeroActions .button{flex:1}.dashboardPulseCard{margin-top:17px;padding:14px;border-radius:15px}.dashboardPulseGrid{margin-top:12px}.dashboardPulseFooter{align-items:flex-start;flex-direction:column}.dashboardMetrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:11px}.dashboardMetric{min-height:85px;padding:11px;gap:9px;border-radius:15px}.dashboardMetricIcon{width:32px;height:32px;border-radius:10px}.dashboardMetricCopy strong{font-size:21px}.dashboardMetricCopy em{display:none}.dashboardContentGrid{grid-template-columns:1fr;gap:10px}.dashboardSideStack{gap:10px}.dashboardRecentPanel{padding-top:14px}.dashboardRecentPanel>.dashboardSectionHead{padding:0 14px}.dashboardActivityItem{grid-template-columns:38px minmax(0,1fr) auto;padding:10px 12px}.dashboardActivityAvatar{width:36px;height:36px}.dashboardActivityBadges .badge{display:none}.dashboardActivityTop time{display:none}.dashboardAlertRows{grid-template-columns:1fr}.dashboardAlertPanel{padding:14px}.dashboardSectionHead p:not(.sectionKicker){display:none}.dashboardSidePanel{padding:14px}.dashboardBackupHistory>div:nth-child(n+3){display:none}}
@media(max-width:430px){.dashboardHeroActions{display:grid;grid-template-columns:1fr}.dashboardPulseGrid{grid-template-columns:1fr}.dashboardMetrics{grid-template-columns:1fr 1fr}.dashboardMetric{min-height:78px}.dashboardMetricIcon{display:none}.dashboardActivityBadges svg{display:none}}

/* v3.7.4 premium mobile navigation --------------------------------------- */
@media(max-width:780px){
  :root{--mobile-nav-h:72px;--mobile-top-h:62px}
  body{padding-bottom:calc(var(--mobile-nav-h) + env(safe-area-inset-bottom) + 16px)}
  .topbar{
    min-height:var(--mobile-top-h);
    padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
    background:linear-gradient(180deg,rgba(6,15,19,.98),rgba(8,18,23,.95));
    border-bottom:1px solid rgba(122,169,164,.10);
    backdrop-filter:blur(18px) saturate(125%);
    box-shadow:0 10px 34px rgba(0,0,0,.15);
  }
  .topbar .brand{gap:9px;min-width:0}
  .topbar .brandIcon{
    width:36px;height:36px;border-radius:12px;
    background:linear-gradient(145deg,#31e586,#1dbf6d 72%);
    box-shadow:0 10px 22px rgba(37,211,102,.14);
  }
  .topbar .brandCopy strong{font-size:13px;letter-spacing:-.18px}
  .topbar .brandCopy small{display:block;margin-top:3px;font-size:9px;color:#6d858f}
  .topbar .versionMark{display:none}
  .topActions{margin-left:auto}
  .logoutButton{
    width:38px;height:38px;min-height:38px;padding:0;border-radius:12px;
    background:rgba(255,255,255,.03);border:1px solid rgba(126,166,171,.12);color:#9fb2ba;
  }
  .logoutButton span{display:none}

  .mobileBottomNav{
    left:10px;right:10px;bottom:10px;z-index:70;
    height:calc(var(--mobile-nav-h) + env(safe-area-inset-bottom));
    padding:8px 8px calc(8px + env(safe-area-inset-bottom));
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;
    border:1px solid rgba(120,165,171,.12);
    border-radius:24px;
    background:linear-gradient(180deg,rgba(10,20,26,.96),rgba(8,16,21,.98));
    box-shadow:0 18px 40px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.03);
    backdrop-filter:blur(22px) saturate(130%);
  }
  .mobileBottomNav::before{
    content:"";position:absolute;left:20px;right:20px;top:0;height:1px;border-radius:999px;
    background:linear-gradient(90deg,transparent,rgba(37,211,102,.18),rgba(111,154,179,.12),transparent);
    pointer-events:none;
  }
  .mobileBottomNav a,
  .mobileBottomNav button{
    position:relative;z-index:1;border:0;background:transparent;color:#778f98;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    min-height:54px;padding:5px 4px;border-radius:16px;font-size:10px;font-weight:760;
    letter-spacing:-.02em;transition:background .16s ease,color .16s ease,transform .16s ease;
  }
  .mobileBottomNav a:active,
  .mobileBottomNav button:active{transform:scale(.98)}
  .mobileBottomNav a.active,
  .mobileBottomNav button.active{
    color:#e8f8ef;
    background:linear-gradient(180deg,rgba(37,211,102,.14),rgba(37,211,102,.08));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 8px 20px rgba(0,0,0,.16);
  }
  .mobileNavGlyph{
    width:28px;height:28px;display:grid;place-items:center;border-radius:11px;
    background:rgba(255,255,255,.03);border:1px solid rgba(122,165,170,.08);
    transition:background .16s ease,border-color .16s ease,transform .16s ease,color .16s ease;
  }
  .mobileBottomNav a.active .mobileNavGlyph,
  .mobileBottomNav button.active .mobileNavGlyph{
    background:rgba(37,211,102,.12);border-color:rgba(37,211,102,.18);color:#69e7a2;
    box-shadow:0 0 0 1px rgba(37,211,102,.04),0 10px 20px rgba(37,211,102,.08);
    transform:translateY(-1px);
  }
  .mobileNavGlyph svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .mobileNavLabel{line-height:1;white-space:nowrap}

  .mobileMoreSheet{display:block;position:fixed;inset:0;z-index:100;pointer-events:none;visibility:hidden}
  .mobileMoreSheet.open{pointer-events:auto;visibility:visible}
  .mobileSheetBackdrop{position:absolute;inset:0;border:0;border-radius:0;background:rgba(0,0,0,.58);backdrop-filter:blur(2px);opacity:0;transition:opacity .2s ease}
  .mobileMoreSheet.open .mobileSheetBackdrop{opacity:1}
  .mobileSheetCard{
    position:absolute;left:0;right:0;bottom:0;
    padding:10px 14px calc(18px + env(safe-area-inset-bottom));
    border-radius:24px 24px 0 0;border:1px solid rgba(126,168,172,.12);border-bottom:0;
    background:linear-gradient(180deg,#102028,#0c171d 78%);
    box-shadow:0 -24px 70px rgba(0,0,0,.48);
    transform:translateY(105%);transition:transform .22s ease;
  }
  .mobileMoreSheet.open .mobileSheetCard{transform:translateY(0)}
  .mobileSheetHandle{width:42px;height:4px;border-radius:999px;background:#425563;margin:0 auto 12px}
  .mobileSheetHead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 0 14px}
  .mobileSheetBrand{display:flex;align-items:center;gap:10px;min-width:0}
  .mobileSheetBrandIcon{
    width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;
    border-radius:11px;background:linear-gradient(145deg,#31e586,#1dbf6d 72%);color:#032312;font-size:11px;font-weight:1000;
  }
  .mobileSheetBrand strong{display:block;font-size:15px;letter-spacing:-.2px}
  .mobileSheetBrand small{display:block;margin-top:2px;color:#728993;font-size:10px}
  .mobileSheetClose{width:38px;height:38px;min-height:38px;padding:0;border-radius:12px;background:#182833;border:1px solid #2d4451;color:#c5d7df;font-size:23px}
  .mobileSheetGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .mobileSheetLink,
  .mobileSheetGrid button.mobileSheetLink{
    display:flex;align-items:flex-start;gap:10px;min-height:74px;width:100%;text-align:left;
    padding:12px;border-radius:16px;border:1px solid #233944;background:#111f27;color:#dbe7ec;font-weight:700;
  }
  .mobileSheetLink.active{border-color:rgba(37,211,102,.22);background:rgba(37,211,102,.07)}
  .mobileSheetLinkIcon{
    width:36px;height:36px;display:grid;place-items:center;flex:0 0 auto;
    border-radius:12px;border:1px solid rgba(120,160,166,.11);background:#162831;color:#75dda4;
  }
  .mobileSheetLinkIcon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .mobileSheetLink span:last-child{display:block;min-width:0}
  .mobileSheetLink strong{display:block;font-size:12px;line-height:1.15}
  .mobileSheetLink small{display:block;margin-top:4px;color:#778f98;font-size:10px;line-height:1.3}
  .mobileInstallAction{color:#e6f4eb}.mobileInstallAction .mobileSheetLinkIcon{background:rgba(37,211,102,.09);border-color:rgba(37,211,102,.16)}
  .mobileLogout{margin-top:12px}.mobileLogout .dangerbtn{width:100%;min-height:48px;border-radius:14px}
  .pwaInstallToast{
    bottom:calc(var(--mobile-nav-h) + env(safe-area-inset-bottom) + 22px);
    padding:12px 16px;border-radius:14px;background:#101b22;border-color:#304857;
    box-shadow:0 20px 54px rgba(0,0,0,.4)
  }
}

@media(max-width:430px){
  .mobileBottomNav{left:8px;right:8px;bottom:8px;padding-left:6px;padding-right:6px;border-radius:20px}
  .mobileBottomNav a,.mobileBottomNav button{min-height:52px;padding:5px 2px;font-size:9px}
  .mobileNavGlyph{width:26px;height:26px;border-radius:10px}
  .mobileNavGlyph svg{width:17px;height:17px}
  .mobileSheetGrid{grid-template-columns:1fr}
}

/* ========================================================================
   v3.8.0 — WhatsApp-like mobile app language
   Mobile/PWA presentation only. Backend, capture, storage and desktop stay
   unchanged. Familiar messaging-app structure without cloning brand assets.
   ======================================================================== */
@media(max-width:780px){
  :root{
    --wa-mobile-bg:#0b141a;
    --wa-mobile-header:#202c33;
    --wa-mobile-surface:#111b21;
    --wa-mobile-surface-2:#18252d;
    --wa-mobile-line:#202f36;
    --wa-mobile-muted:#8696a0;
    --wa-mobile-text:#e9edef;
    --wa-mobile-green:#00a884;
    --wa-mobile-green-bright:#25d366;
    --wa-mobile-out:#005c4b;
    --wa-mobile-in:#202c33;
  }

  html,body{background:var(--wa-mobile-bg);color:var(--wa-mobile-text)}
  body{font-size:14px;letter-spacing:0}
  .wrap{padding:0 0 24px;background:var(--wa-mobile-bg)}

  /* app bar */
  .topbar{
    min-height:calc(var(--mobile-top-h) + env(safe-area-inset-top));
    padding:calc(8px + env(safe-area-inset-top)) 14px 8px;
    background:var(--wa-mobile-header);border-bottom:0;box-shadow:none;
  }
  .topbar:after{display:none}
  .topbar .brandIcon{width:36px;height:36px;border-radius:50%;background:var(--wa-mobile-green);box-shadow:none;color:#05251e}
  .topbar .brandCopy strong{font-size:16px;font-weight:750;color:#f3f7f8}
  .topbar .brandCopy small{display:block;font-size:10px;color:#aebac1}
  .logoutButton{background:transparent;border:0;color:#aebac1}

  /* bottom navigation */
  .mobileBottomNav{
    left:0;right:0;bottom:0;border-radius:0;border:0;border-top:1px solid #213038;
    height:calc(68px + env(safe-area-inset-bottom));padding:6px 7px env(safe-area-inset-bottom);
    background:#111b21;box-shadow:0 -6px 22px rgba(0,0,0,.22);backdrop-filter:blur(18px);
  }
  .mobileBottomNav::before{display:none}
  .mobileBottomNav a,.mobileBottomNav button{min-height:54px;border-radius:12px;color:#8696a0;gap:3px;font-size:10px;font-weight:650}
  .mobileBottomNav a.active,.mobileBottomNav button.active{background:transparent;color:#00a884;box-shadow:none}
  .mobileNavGlyph{width:34px;height:29px;border:0;background:transparent;border-radius:999px}
  .mobileBottomNav a.active .mobileNavGlyph,.mobileBottomNav button.active .mobileNavGlyph{background:rgba(0,168,132,.16);border:0;color:#25d366;box-shadow:none;transform:none}
  .mobileNavGlyph svg{width:20px;height:20px;stroke-width:1.9}
  .mobileNavLabel{font-weight:700}

  /* generic page header becomes a compact app section, not a desktop hero */
  .hero,.hero.compact{
    margin:0;padding:18px 16px 13px;border:0;border-radius:0;background:var(--wa-mobile-bg);box-shadow:none;
  }
  .hero:before,.hero.compact:before{display:none}
  .hero h1,.hero.compact h1{margin:3px 0 5px;font-size:26px;line-height:1.1;letter-spacing:-.7px;color:#f4f8fa}
  .eyebrow,.sectionKicker{font-size:9px;letter-spacing:1.25px;color:#00a884}
  .hero .muted{font-size:12px;line-height:1.48;color:#8696a0}
  .hero .actions{margin-top:8px}

  /* panels become messaging-app sections */
  .panel{
    margin:0 0 10px;padding:14px 16px;border:0;border-top:1px solid rgba(255,255,255,.035);border-bottom:1px solid rgba(255,255,255,.035);
    border-radius:0;background:var(--wa-mobile-surface);box-shadow:none;
  }
  .panel.flush{padding:0;border-radius:0;background:var(--wa-mobile-surface)}
  .panel h2,.accountHead h2{font-size:16px;font-weight:720;letter-spacing:-.15px}
  .panelhead{margin-bottom:11px}
  .muted{color:var(--wa-mobile-muted)}
  .button,button{border-radius:10px}.primary{background:var(--wa-mobile-green);border-color:var(--wa-mobile-green);color:#062b23}.secondary{background:#202c33;border-color:#2e3e46;color:#e9edef}

  /* forms/search */
  .filters,.proFilters,.deletedFilters,.mediaFilters{gap:7px}
  .filters input,.filters select,.addAccount input,.stack input,.searchField input,.accountSwitcher select,
  .renameForm input,.mobileInlineForm input{
    min-height:44px;background:#202c33;border:1px solid transparent;border-radius:10px;color:#e9edef;font-size:16px;
  }
  .filters input::placeholder,.addAccount input::placeholder,.searchField input::placeholder{color:#8696a0}
  .filters input:focus,.filters select:focus,.addAccount input:focus,.stack input:focus,.searchField input:focus{border-color:#00a884;box-shadow:0 0 0 1px #00a884}

  /* dashboard: simple WhatsApp-like home instead of desktop control-center */
  .dashboardHeroV3{display:block;margin:0;padding:18px 16px 15px;border:0;border-radius:0;background:var(--wa-mobile-bg);box-shadow:none}
  .dashboardHeroV3:before{display:none}.dashboardHeroBadge{margin-bottom:12px;padding:5px 8px;border:0;background:#18252d;color:#9fb0b8}
  .dashboardHeroV3 .eyebrow{display:none}.dashboardHeroV3 h1{font-size:28px;line-height:1.12;letter-spacing:-.9px}.dashboardHeroV3 h1 br{display:none}.dashboardHeroV3 h1 span{color:#e9edef}
  .dashboardHeroText{margin-top:8px;font-size:12px;color:#8696a0;line-height:1.45}.dashboardHeroActions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.dashboardHeroActions .button{min-height:42px;margin:0;font-size:12px}
  .dashboardPulseCard{margin:14px 0 0;padding:13px;border:0;border-radius:14px;background:#111b21;box-shadow:none}.dashboardPulseTop{gap:10px}.dashboardPulseIcon{width:38px;height:38px;border:0;background:#18252d}.dashboardPulseIcon.online{background:rgba(0,168,132,.18);color:#25d366}.dashboardPulseGrid{gap:6px;margin-top:12px}.dashboardPulseGrid>div{padding:10px;border:0;border-radius:10px;background:#18252d}.dashboardPulseFooter{margin-top:10px;padding-top:10px}
  .dashboardMetrics{display:flex;gap:8px;padding:0 12px 12px;margin:0;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}.dashboardMetrics::-webkit-scrollbar{display:none}.dashboardMetric{flex:0 0 142px;min-height:82px;padding:12px;border:0;border-radius:14px;background:#111b21;scroll-snap-align:start}.dashboardMetric:hover{transform:none}.dashboardMetricIcon{width:31px;height:31px;border:0;border-radius:50%;background:#18252d}.dashboardMetricCopy strong{font-size:21px}.dashboardMetricCopy small{font-size:9px}.dashboardMetricCopy em{display:none}
  .dashboardContentGrid{display:block}.dashboardRecentPanel{margin:0;background:#111b21}.dashboardSideStack{display:grid;gap:10px}.dashboardSectionHead{padding-left:0!important;padding-right:0!important}.dashboardSectionHead h2{font-size:17px}.dashboardActivityItem{grid-template-columns:44px minmax(0,1fr) auto;margin:0;padding:12px 16px;border-top:1px solid #202f36;border-radius:0;background:#111b21}.dashboardActivityItem:hover{background:#111b21}.dashboardActivityAvatar{width:43px;height:43px;border:0}.dashboardActivityTop strong{font-size:13px}.dashboardActivityMain p{font-size:12px;color:#aebac1}.dashboardActivityMeta{font-size:9px}.dashboardAccountRow{border:0;border-bottom:1px solid #202f36;border-radius:0;background:#111b21;padding:11px 4px}.dashboardAccountRow:last-child{border-bottom:0}.dashboardLatestBackup{border:0;background:#18252d}.dashboardAlertPanel{background:#111b21}.dashboardAlertRow{border:0;border-radius:11px;background:#18252d}

  /* chat list: flat WhatsApp conversation list */
  .chatWorkspace,.chatRail,.chatStage{background:var(--wa-mobile-bg)}
  .chatRail{background:#111b21}.chatRailHeader{padding:15px 16px 8px;border:0;background:#111b21}.chatRailHeader .sectionKicker{display:none}.chatRailHeader h1{font-size:28px;letter-spacing:-.7px}.liveDotWrap{background:rgba(0,168,132,.12);color:#25d366;border-color:rgba(0,168,132,.14)}
  .accountSwitcher{padding:0 12px 7px}.accountSwitcher select{background:#202c33;border:0;border-radius:12px;padding-left:14px}
  .chatTypeTabs{margin:0 12px 8px;padding:3px;border:0;border-radius:12px;background:#18252d}.chatTypeTabs a{border-radius:9px;color:#8696a0}.chatTypeTabs a.active{background:#00a884;color:#061f19}
  .chatSearch{padding:0 12px 9px}.searchField{background:#202c33;border:0;border-radius:11px}.searchIcon{color:#8696a0}.iconSearchBtn{display:none}
  .chatRailMeta{padding:4px 16px 7px;border:0;color:#667781}.filteredHint{display:none}
  .chatListPro{background:#111b21}.chatRowPro{grid-template-columns:52px minmax(0,1fr);gap:11px;padding:11px 14px;border-top:0;border-bottom:1px solid #202f36;background:#111b21}.chatRowPro.active{background:#18252d;border-left:0}.chatAvatar,.chatAvatar.big{width:50px;height:50px;border-radius:50%;border:0}.chatRowTop strong{font-size:15px;font-weight:650}.chatRowTop time{font-size:10px;color:#667781}.chatNumber{font-size:10px;color:#8696a0}.chatPreview{margin-top:3px;font-size:12px;color:#8696a0}.miniBadge{padding:2px 5px;font-size:7px}.pinMark{background:#00a884}

  /* open chat: classic dark messaging surface */
  body.chatOpen .chatWorkspace{background:#0b141a}.contactBar{min-height:62px;padding:8px 10px;background:#202c33;border-bottom:0}.mobileChatBack{width:34px;height:42px;display:grid;place-items:center;font-size:30px;color:#d7e1e5}.contactAvatar{width:40px;height:40px;border-radius:50%;border:0}.contactTitleRow h2{font-size:15px;font-weight:650}.contactNumber{font-size:10px;color:#aebac1}.contactSub{display:none}.favoritePill,.deletedCountPill{display:none}.mobileChatMenuButton{background:transparent;border:0;color:#aebac1;font-size:19px}.contactActions>.secondary.compactAction{background:transparent;border:0;color:#aebac1;font-size:0}.contactActions>.secondary.compactAction:after{content:none;display:none}
  .threadViewport{background-color:#0b141a;background-image:radial-gradient(rgba(255,255,255,.025) .7px,transparent .8px);background-size:18px 18px}.threadInner{width:calc(100% - 16px);padding-top:8px}.dateDivider span{padding:5px 9px;background:#182229;border:0;color:#aebac1;font-size:10px;box-shadow:0 1px 1px rgba(0,0,0,.15)}
  .proBubbleRow{margin:1px 0}.proBubble{max-width:88%;padding:7px 8px 5px;border:0;border-radius:8px;box-shadow:0 1px 1px rgba(0,0,0,.22);font-size:13px}.proBubbleRow.theirs .proBubble{background:var(--wa-mobile-in);border-top-left-radius:3px}.proBubbleRow.mine .proBubble{background:var(--wa-mobile-out);border-top-right-radius:3px}.proBubble.isDeleted{background:#3b1f24}.proBubble.isLocalDeleted{box-shadow:inset 0 0 0 1px rgba(246,197,93,.25),0 1px 1px rgba(0,0,0,.22)}.bubbleAuthor{color:#53bdeb;font-size:11px}.bubbleBody{line-height:1.36;color:#e9edef}.bubbleFooter{justify-content:flex-end;gap:5px;color:#95a5ad;font-size:9px}.stateTag{padding:2px 4px;border-radius:5px;font-size:7px}.quotedReply{background:rgba(0,0,0,.15);border-left:3px solid #00a884;border-radius:5px}.inlineMediaPreview{border:0;border-radius:7px;background:#10181d;width:min(210px,64vw)}.inlineMediaPreview img{max-height:180px}.inlineMediaFile{background:rgba(0,0,0,.15);border:0}.newMessageJump{right:12px;bottom:14px;border:0;background:#202c33;color:#dfe8ec;box-shadow:0 4px 14px rgba(0,0,0,.35)}.archiveStatusBar{display:none}
  .threadSearchBar{background:#202c33;border-bottom:0}.threadSearchBar .searchField{background:#111b21}

  /* mobile chat actions sheet */
  .mobileChatActionCard{background:#111b21;border:0;border-radius:22px 22px 0 0}.mobileChatActionHead{border-bottom:1px solid #202f36}.mobileChatActionClose{background:#202c33;border:0;color:#d9e2e6}.mobileActionRow{min-height:54px;border-bottom:1px solid #202f36;color:#e9edef;font-size:14px}.mobileActionIcon{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:#202c33;color:#00a884}.mobileActionIcon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.mobileActionDetails[open]{background:#18252d}.mobileExportGrid a{background:#202c33;border:0;color:#e9edef}

  /* Deleted Center */
  .deletedHero{padding-bottom:10px}.deletedStats{display:flex;gap:8px;padding:0 12px 12px;margin:0;overflow-x:auto;scrollbar-width:none}.deletedStats::-webkit-scrollbar{display:none}.deletedStats a{flex:0 0 128px;min-height:76px;padding:12px;border:0;border-radius:13px;background:#111b21}.deletedStats span{font-size:10px;color:#8696a0}.deletedStats strong{font-size:22px}.deletedList{background:#111b21}.deletedItem{grid-template-columns:44px minmax(0,1fr);gap:11px;padding:12px 14px;border-top:0;border-bottom:1px solid #202f36;background:#111b21}.deletedAvatar{width:43px;height:43px;border-radius:50%;background:#3b2025;color:#ff9aa5}.deletedBadgeStack{grid-column:2;justify-self:start;display:flex;gap:5px;flex-wrap:wrap;margin-top:3px}.deletedItem .messageTop strong{font-size:14px}.deletedItem .messageMain p{font-size:12px;color:#aebac1}

  /* Search / archive */
  .proFilters{padding:0}.proFilters .check{min-height:44px;padding:0 10px;border-radius:10px;background:#202c33}.messageList{background:#111b21}.messageItem,.flush .messageItem{grid-template-columns:44px minmax(0,1fr);gap:11px;margin:0;padding:12px 14px;border-top:0;border-bottom:1px solid #202f36;border-radius:0;background:#111b21}.messageItem:hover{background:#111b21}.messageItem .avatar{width:43px;height:43px;border-radius:50%;border:0;background:#202c33}.messageItem .messageTop strong{font-size:14px}.messageItem .messageMain p{font-size:12px;color:#aebac1}.messageItem>.rowBadges,.messageItem>.badge{grid-column:2}.rowBadges .badge{font-size:7px;padding:3px 5px}.pager{padding:0 12px}.pager .button{min-width:100px}

  /* Media: WhatsApp gallery feel */
  .mediaGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;padding:3px;background:#0b141a}.mediaCard{border:0;border-radius:0;background:#111b21;overflow:hidden}.mediaPreview{height:46vw;max-height:220px;border-radius:0;background:#18252d}.mediaPreview img,.mediaPreview video{width:100%;height:100%;object-fit:cover}.mediaInfo{padding:9px 10px}.mediaInfo strong{font-size:11px}.mediaInfo span,.mediaInfo small{font-size:9px;color:#8696a0}.mediaInfo .actions{display:grid;grid-template-columns:1fr 1fr;margin-top:7px}.mediaInfo .button{min-height:34px;padding:6px;font-size:9px;background:#202c33;border:0}

  /* Accounts: settings-like rows */
  .addAccount{display:grid;grid-template-columns:1fr;gap:8px}.addAccount button{width:100%}.sessionRecoveryNotice{display:block;background:#111b21}.sessionSecurityNote{margin:10px 0 0;padding:10px;border-radius:10px;background:#2a2619;color:#e7d8a8;border:0}.accountCards{display:block}.accountCards .accountCard{margin:0 0 10px;padding:0;border:0;background:#111b21}.accountHead{padding:14px 16px 8px}.accountDetail{padding:0 16px;color:#8696a0}.freshCaptureState{margin:8px 16px}.accountHealthStrip{margin:8px 12px;grid-template-columns:repeat(3,1fr);gap:1px;background:#202f36;border-radius:11px;overflow:hidden}.accountHealthStrip>div{padding:10px;background:#18252d;border:0;border-radius:0}.accountHealthStrip span{font-size:8px}.accountHealthStrip strong{font-size:9px}.sessionRecoveryBox{margin:10px 12px;padding:12px;border:0;border-radius:12px;background:#18252d}.sessionRecoveryActions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.sessionRecoveryActions>*{width:100%}.sessionRecoveryActions button{width:100%;font-size:10px}.accountCard>.actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 12px 13px}.accountCard>.actions form,.accountCard>.actions button{width:100%}.accountCard>.actions button{min-height:42px;padding:8px;font-size:10px}.removedAccountRow{border:0;border-bottom:1px solid #202f36;border-radius:0;background:#111b21}

  /* Health / diagnostics: compact status settings */
  .diagnosticGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:0;background:#0b141a}.diagCard{min-height:86px;padding:11px;border:0;border-radius:12px;background:#111b21}.diagCard span{font-size:8px}.diagCard strong{font-size:11px}.diagCard small{font-size:8px;color:#8696a0}.diagAccounts{background:#111b21}.diagAccount{border:0;border-bottom:1px solid #202f36;border-radius:0;background:#111b21;padding:12px}.diagAccount:last-child{border-bottom:0}.healthAlert{border:0;border-radius:10px;background:#18252d}.backupStatusGrid{gap:5px}.backupStatusGrid>div{border:0;background:#18252d}.backupLocation{border:0;background:#18252d}.backupMini{border-bottom:1px solid #202f36}.notice{border:0;border-radius:10px;background:#18252d}

  /* Integrity */
  .integritybox{margin:0;padding:28px 18px 34px;align-items:center;justify-content:center;flex-direction:column;text-align:center;border:0;background:#111b21}.integrityicon{width:66px;height:66px;background:rgba(0,168,132,.14)!important;color:#25d366!important}.integritybox h2{font-size:22px;margin:0 0 5px}.integritybox p{color:#8696a0}

  /* More sheet follows settings style */
  .mobileMoreSheet .mobileSheetCard{background:#111b21}.mobileSheetLink,.mobileSheetGrid button.mobileSheetLink{background:#18252d;border:0}.mobileSheetLinkIcon{background:#202c33;border:0;color:#00a884}.mobileSheetClose{background:#202c33;border:0}

  /* Empty states */
  .empty,.compactEmpty{color:#8696a0;background:transparent}.noChatSelected{background:#0b141a;color:#8696a0}.noChatIcon{background:#18252d;color:#25d366;border:0}
}

@media(max-width:430px){
  .dashboardHeroActions{grid-template-columns:1fr 1fr}.dashboardMetrics{padding-left:10px;padding-right:10px}.dashboardMetric{flex-basis:132px}
  .mediaGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.mediaPreview{height:48vw}
  .accountHealthStrip{grid-template-columns:1fr 1fr}.accountHealthStrip>div:last-child{grid-column:1/-1}.sessionRecoveryActions,.accountCard>.actions{grid-template-columns:1fr}
}

/* Login uses the same mobile messaging-app language. */
@media(max-width:600px){
  .loginbody{display:flex;align-items:stretch;justify-content:center;padding:0;background:#0b141a}
  .loginbox{width:100%;min-height:100dvh;padding:calc(54px + env(safe-area-inset-top)) 24px 32px;border:0;border-radius:0;background:#0b141a;box-shadow:none}
  .loginBrand{justify-content:center;flex-direction:column;text-align:center;gap:12px}.loginBrand .logoMark{width:66px;height:66px;border-radius:50%;background:#00a884;color:#05251f;font-size:17px}.loginbox h1{font-size:25px}.loginbox .muted{color:#8696a0}.loginTrust{justify-content:center;flex-wrap:wrap;color:#8696a0}.stack{margin-top:30px}.stack label{font-size:11px;color:#aebac1}.stack input{min-height:50px;background:#202c33;border:1px solid transparent;border-radius:10px;font-size:16px}.stack input:focus{border-color:#00a884}.stack .primary{min-height:48px;background:#00a884;border-color:#00a884;color:#05251f;border-radius:10px}.loginInstallButton{min-height:46px;border:0;background:#18252d;color:#00a884}
}

/* ========================================================================
   v3.8.1 — refined phone UI
   Stronger WhatsApp-like hierarchy on phones while keeping desktop intact.
   ======================================================================== */
@media(max-width:780px){
  :root{
    --mobile-nav-h:68px;
    --wa-mobile-bg:#0b141a;
    --wa-mobile-header:#202c33;
    --wa-mobile-surface:#111b21;
    --wa-mobile-surface-2:#18252d;
    --wa-mobile-divider:rgba(255,255,255,.055);
    --wa-mobile-muted:#8696a0;
    --wa-mobile-text:#e9edef;
    --wa-mobile-green:#00a884;
    --wa-mobile-green-bright:#25d366;
  }

  /* Cleaner app shell */
  body{background:var(--wa-mobile-bg);overscroll-behavior-y:none}
  .topbar{padding-left:16px;padding-right:10px}
  .topbar .brand{gap:10px}
  .topbar .brandIcon{width:34px;height:34px;font-size:10px;font-weight:900}
  .topbar .brandCopy strong{font-size:16px;letter-spacing:-.25px}
  .topbar .brandCopy small{font-size:9px;color:#8696a0}
  .logoutButton{width:40px;height:40px;min-height:40px}

  /* Chats is a native app screen: no duplicated global header. */
  body:has(.chatWorkspace) .topbar{display:none}
  body:has(.chatWorkspace){padding-bottom:calc(var(--mobile-nav-h) + env(safe-area-inset-bottom))}
  body:has(.chatWorkspace) .chatWorkspace,
  body.chatListOnly .chatWorkspace{
    height:calc(var(--app-height) - var(--mobile-nav-h) - env(safe-area-inset-bottom));
  }
  body.chatOpen .chatWorkspace,
  body:has(.chatWorkspace:not([data-chat=""])) .chatWorkspace{height:var(--app-height)}

  /* Bottom bar feels anchored instead of floating/dashboard-like. */
  .mobileBottomNav{
    left:0!important;right:0!important;bottom:0!important;border-radius:0!important;
    padding:5px 8px env(safe-area-inset-bottom)!important;
    border-top:1px solid #1f2c33!important;background:rgba(17,27,33,.98)!important;
    box-shadow:0 -2px 10px rgba(0,0,0,.18)!important;
  }
  .mobileBottomNav a,.mobileBottomNav button{
    min-height:56px!important;padding:4px 2px!important;border-radius:12px!important;
    color:#7e8d95!important;font-size:10px!important;font-weight:650!important;
  }
  .mobileBottomNav a.active,.mobileBottomNav button.active{color:#e9edef!important;background:transparent!important}
  .mobileNavGlyph{width:38px!important;height:28px!important;border:0!important;background:transparent!important;border-radius:999px!important}
  .mobileBottomNav a.active .mobileNavGlyph,.mobileBottomNav button.active .mobileNavGlyph{
    background:rgba(0,168,132,.18)!important;color:#25d366!important;box-shadow:none!important;
  }
  .mobileNavGlyph svg{width:20px!important;height:20px!important;stroke-width:1.9!important}

  /* Chats header */
  .chatRail{background:#111b21!important}
  .chatRailHeader{
    min-height:calc(62px + env(safe-area-inset-top));padding:calc(14px + env(safe-area-inset-top)) 16px 9px!important;
    align-items:center;background:#202c33!important;border-bottom:0!important;
  }
  .chatRailHeader h1{margin:0!important;font-size:24px!important;line-height:1!important;font-weight:720!important;letter-spacing:-.55px!important;color:#f0f4f5}
  .chatRailHeader .sectionKicker{display:none!important}
  .liveDotWrap{padding:0!important;border:0!important;background:transparent!important;color:#9bb0b9!important;font-size:0!important;gap:0!important}
  .liveDotWrap .liveDot{width:9px;height:9px;margin:0;box-shadow:0 0 0 4px rgba(37,211,102,.09)}

  /* Account selector becomes a subtle archive-specific row. */
  .accountSwitcher{padding:9px 12px 7px!important;background:#111b21}
  .accountSwitcher select{
    height:38px;min-height:38px!important;padding:0 34px 0 13px!important;border:0!important;border-radius:9px!important;
    background:#18252d!important;color:#aebac1!important;font-size:12px!important;font-weight:600;
  }

  /* Search bar */
  .chatSearch{padding:0 12px 8px!important;background:#111b21}
  .chatSearch .searchField,.threadSearchBar .searchField{
    height:42px;min-height:42px;border:0!important;border-radius:10px!important;background:#202c33!important;
  }
  .searchField{display:flex;align-items:center}
  .searchField .searchIcon{width:40px;height:40px;display:grid;place-items:center;flex:0 0 auto;color:#8696a0;font-size:0}
  .searchField .searchIcon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .chatSearch input,.threadSearchBar input{padding-left:0!important;font-size:15px!important;color:#e9edef!important}
  .chatSearch input::placeholder,.threadSearchBar input::placeholder{color:#8696a0!important}

  /* Filter chips: WhatsApp-like, not a segmented dashboard control. */
  .chatTypeTabs{
    order:0;display:flex!important;justify-content:flex-start!important;gap:7px!important;margin:0!important;padding:1px 12px 9px!important;
    overflow-x:auto;scrollbar-width:none;background:#111b21!important;border:0!important;border-radius:0!important;
  }
  .chatTypeTabs::-webkit-scrollbar{display:none}
  .chatTypeTabs a{
    flex:0 0 auto!important;min-height:32px!important;padding:0 13px!important;border:0!important;border-radius:999px!important;
    background:#18252d!important;color:#9aaab2!important;font-size:12px!important;font-weight:650!important;
  }
  .chatTypeTabs a.active{background:rgba(0,168,132,.17)!important;color:#55d6b7!important}
  .chatRailMeta{padding:2px 16px 6px!important;background:#111b21!important;color:#667781!important;font-size:10px!important;border:0!important}
  .chatRailMeta strong{color:#8696a0;font-weight:650}

  /* Conversation rows: tighter, cleaner, closer to WhatsApp. */
  .chatListPro{background:#111b21!important}
  .chatRowPro{
    position:relative;min-height:72px!important;padding:9px 12px!important;grid-template-columns:52px minmax(0,1fr)!important;gap:11px!important;
    border:0!important;background:#111b21!important;
  }
  .chatRowPro:after{content:"";position:absolute;left:75px;right:0;bottom:0;height:1px;background:var(--wa-mobile-divider)}
  .chatRowPro:last-child:after{display:none}
  .chatRowPro:active{background:#18252d!important}
  .chatRowPro.active{background:#18252d!important}
  .chatAvatar,.chatAvatar.big{width:52px!important;height:52px!important;border:0!important;border-radius:50%!important;background:#2a3940!important}
  .chatAvatar span{font-size:17px!important;font-weight:650!important;color:#c8d2d7!important}
  .chatAvatar img{border-radius:50%}
  .pinMark{right:-1px!important;bottom:0!important;width:15px!important;height:15px!important;border:2px solid #111b21!important;background:#00a884!important;font-size:0!important}
  .chatRowBody{min-width:0;padding-top:1px}
  .chatRowTop{gap:8px!important;align-items:baseline!important}
  .chatRowTop strong{font-size:15px!important;line-height:1.28!important;font-weight:650!important;color:#f0f3f4!important;letter-spacing:-.12px!important}
  .chatRowTop time{margin-left:auto!important;font-size:10.5px!important;color:#7f8f97!important;font-variant-numeric:tabular-nums}
  .starMark{font-size:11px!important;color:#00a884!important}
  .chatNumber{display:none!important}
  .chatPreview{display:flex!important;align-items:center!important;min-width:0;margin:4px 0 0!important;color:#8696a0!important}
  .chatPreview>span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px!important;line-height:1.35!important}
  .chatPreview.deletedPreview>span{color:#aebac1!important;font-style:italic}
  .miniBadges{display:none!important}
  .chatEmpty{padding:64px 28px!important;color:#8696a0!important;background:#111b21!important;font-size:13px!important}
  .chatEmpty span{color:#667781!important}

  /* Full-screen conversation header */
  .contactBar{
    min-height:calc(60px + env(safe-area-inset-top))!important;padding:calc(7px + env(safe-area-inset-top)) 7px 7px!important;
    gap:4px!important;background:#202c33!important;box-shadow:0 1px 0 rgba(0,0,0,.16)!important;
  }
  .mobileChatBack{
    width:38px!important;height:44px!important;min-height:44px!important;padding:0!important;border:0!important;border-radius:50%!important;background:transparent!important;color:#d7e1e5!important;
  }
  .mobileChatBack svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
  .contactMain{gap:8px!important;min-width:0!important}
  .contactAvatar{width:40px!important;height:40px!important;flex:0 0 40px!important;background:#2a3940!important}
  .contactText{min-width:0!important}
  .contactTitleRow h2{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15.5px!important;font-weight:650!important;color:#f1f4f5!important}
  .contactNumber{margin-top:1px;font-size:10.5px!important;color:#aebac1!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .contactActions{gap:0!important;margin-left:auto!important}
  .mobileChatMenuButton{
    width:42px!important;height:42px!important;min-height:42px!important;border:0!important;border-radius:50%!important;background:transparent!important;color:#d1dadd!important;font-size:0!important;
  }
  .mobileChatMenuButton svg{width:21px;height:21px;fill:currentColor}

  /* Conversation canvas and message bubbles */
  .threadViewport{
    background-color:#0b141a!important;
    background-image:linear-gradient(rgba(11,20,26,.92),rgba(11,20,26,.92)),radial-gradient(circle at 10px 10px,rgba(255,255,255,.055) 1px,transparent 1.2px)!important;
    background-size:auto,22px 22px!important;
  }
  .threadInner{width:100%!important;padding:10px 8px calc(18px + env(safe-area-inset-bottom))!important}
  .loadOlderButton{margin:2px auto 10px!important;min-height:30px!important;padding:5px 10px!important;border:0!important;border-radius:999px!important;background:#18252d!important;color:#8696a0!important;font-size:9px!important;box-shadow:none!important}
  .dateDivider{margin:8px 0 10px!important}
  .dateDivider span{padding:5px 9px!important;border:0!important;border-radius:7px!important;background:#18252d!important;color:#aebac1!important;font-size:9.5px!important;font-weight:650!important;box-shadow:0 1px 2px rgba(0,0,0,.18)!important}
  .proBubbleRow{margin:2px 0!important}
  .proBubble{
    max-width:84%!important;min-width:0!important;padding:5px 7px 4px!important;border:0!important;border-radius:8px!important;
    box-shadow:0 1px .5px rgba(0,0,0,.24)!important;
  }
  .proBubbleRow.theirs .proBubble{background:#202c33!important;border-top-left-radius:2px!important}
  .proBubbleRow.mine .proBubble{background:#005c4b!important;border-top-right-radius:2px!important}
  .bubbleAuthor{margin-bottom:2px!important;font-size:10px!important;font-weight:650!important;color:#53bdeb!important}
  .bubbleBody{font-size:13px!important;line-height:1.36!important;letter-spacing:0!important;color:#e9edef!important;overflow-wrap:anywhere}
  .bubbleFooter{margin-top:2px!important;gap:4px!important;color:#a5b1b7!important;font-size:8px!important;line-height:1!important}
  .bubbleFooter time{font-size:8px!important}
  .stateTag{padding:1px 4px!important;border-radius:4px!important;font-size:6.8px!important}
  .quotedReply{margin-bottom:5px!important;padding:5px 7px!important;border-left:3px solid #00a884!important;border-radius:5px!important;background:rgba(0,0,0,.16)!important}
  .quotedReply small{font-size:8px!important}.quotedReply span{font-size:10px!important}
  .proBubble.hasInlineMedia{max-width:82%!important;padding:4px 4px 5px!important}
  .inlineMediaPreview{margin:0 0 4px!important;border:0!important;border-radius:6px!important;width:min(200px,62vw)!important}
  .inlineMediaPreview img{max-height:180px!important}
  .inlineMediaPreview.stickerPreview{width:min(170px,54vw)!important}
  .inlineMediaPreview.stickerPreview img{max-height:170px!important}
  .newMessageJump{right:12px!important;bottom:12px!important;width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important;padding:0!important;border-radius:50%!important;font-size:0!important}
  .newMessageJump:before{content:"↓";font-size:20px!important;line-height:1;color:#dfe8ec}

  /* In-chat search */
  .threadSearchBar{padding:7px 8px!important;background:#202c33!important}
  .threadSearchBar .searchField{background:#111b21!important}
  .threadSearchBar .linkbtn{min-height:40px!important;padding:0 8px!important;color:#53bdeb!important;font-size:12px!important}
  .threadSearchResults{border-radius:10px!important;background:#111b21!important;box-shadow:0 12px 30px rgba(0,0,0,.35)!important}

  /* Generic mobile pages: flatter rows and less dashboard chrome. */
  .hero,.hero.compact{padding-left:16px!important;padding-right:16px!important}
  .panel{border-color:#1f2c33!important}
  .panel.flush{border-top:1px solid #1f2c33!important;border-bottom:1px solid #1f2c33!important}
  .messageItem,.flush .messageItem,.deletedItem,.dashboardActivityItem{min-height:66px!important}
  .messageItem .avatar,.deletedAvatar,.dashboardActivityAvatar{border-radius:50%!important}

  /* Bottom sheets */
  .mobileMoreSheet .mobileSheetCard,.mobileChatActionCard{border-radius:20px 20px 0 0!important;background:#111b21!important}
  .mobileSheetHandle{width:36px!important;height:4px!important;background:#46545b!important}
  .mobileSheetLink,.mobileSheetGrid button.mobileSheetLink{min-height:66px!important;border-radius:12px!important;background:#18252d!important}
  .mobileActionRow{min-height:52px!important;font-size:14px!important}
}

@media(max-width:430px){
  .chatRailHeader h1{font-size:23px!important}
  .chatRowPro{padding-left:10px!important;padding-right:10px!important}
  .chatRowPro:after{left:73px!important}
  .chatAvatar,.chatAvatar.big{width:50px!important;height:50px!important}
  .chatRowTop strong{font-size:14.5px!important}
  .chatPreview>span{font-size:12px!important}
  .proBubble{max-width:90%!important}
  .proBubble.hasInlineMedia{max-width:86%!important}
}

/* v4.5 media storage + gallery */
.mediaHeroV45{align-items:center}.mediaHeroStorage{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;padding:12px 15px;border:1px solid var(--line);border-radius:14px;background:var(--panel2)}.mediaHeroStorage strong{font-size:22px;line-height:1}.mediaHeroStorage span{margin-top:5px;color:var(--muted);font-size:10px}.mediaNotice{display:flex;align-items:center;gap:8px;margin:-6px 0 14px;padding:10px 13px;border:1px solid rgba(37,211,102,.2);border-radius:12px;background:rgba(37,211,102,.07);color:#73dfa3;font-size:11px;font-weight:700}.mediaStorageOverview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}.mediaStorageStat{display:flex;align-items:center;gap:12px;min-width:0;padding:14px 15px;border:1px solid var(--line);border-radius:15px;background:var(--panel);box-shadow:0 8px 22px rgba(0,0,0,.07)}.mediaStorageIcon{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;border-radius:12px;background:rgba(37,211,102,.08);border:1px solid rgba(37,211,102,.14);color:#62dfa0;font-weight:900}.mediaStorageStat div{min-width:0}.mediaStorageStat small,.mediaStorageStat strong,.mediaStorageStat em{display:block}.mediaStorageStat small{color:var(--muted);font-size:9px;font-weight:750}.mediaStorageStat strong{margin-top:2px;font-size:19px}.mediaStorageStat em{margin-top:2px;color:#6f8791;font-size:8.5px;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mediaControlPanel{padding:17px 18px}.mediaControlHead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.mediaControlHead h2{margin:2px 0 0}.mediaControlHead p:not(.sectionKicker){margin:4px 0 0;color:var(--muted);font-size:10px}.mediaPolicyBadge{display:flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid rgba(37,211,102,.16);border-radius:999px;background:rgba(37,211,102,.06);color:#6ddda1;font-size:9px;font-weight:800}.mediaPolicyForm{display:grid;grid-template-columns:minmax(240px,1.5fr) repeat(3,minmax(150px,1fr)) auto;gap:9px;align-items:end}.mediaPolicyForm>label{display:flex;flex-direction:column;gap:5px;min-width:0;color:var(--muted);font-size:9px;font-weight:700}.mediaPolicyForm select{width:100%;min-height:42px;padding:0 10px;border:1px solid #2b3a4a;border-radius:10px;background:#0d141c;color:var(--text)}.mediaToggleField{min-height:58px;flex-direction:row!important;align-items:center!important;justify-content:space-between;gap:14px!important;padding:9px 12px;border:1px solid var(--line);border-radius:11px;background:var(--panel2)}.mediaToggleField span{min-width:0}.mediaToggleField strong,.mediaToggleField small{display:block}.mediaToggleField strong{color:var(--text);font-size:11px}.mediaToggleField small{margin-top:2px;color:var(--muted);font-size:8.5px;font-weight:500}.mediaToggleField input{width:18px;height:18px;flex:0 0 auto;accent-color:var(--green)}.mediaSavePolicy{min-height:42px;white-space:nowrap}.mediaMaintenanceRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.055)}.mediaMaintenanceRow form{margin:0}.mediaMaintenanceRow .secondary{min-height:35px;font-size:9px}.mediaMaintenanceRow p{margin:0 0 0 auto;color:var(--muted);font-size:8.5px}.mediaFilterPanel{padding:13px 14px}.mediaGridV45{grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}.mediaCardV45{border-radius:15px;transition:transform .15s ease,border-color .15s ease}.mediaCardV45:hover{transform:translateY(-2px);border-color:#344955}.mediaCardV45 .mediaPreview{height:auto;aspect-ratio:4/3;background:#0b1419}.mediaCardV45 .mediaPreview img,.mediaCardV45 .mediaPreview video{object-fit:cover}.mediaKindPill,.mediaSizePill,.mediaOptimizedPill{position:absolute;top:8px;z-index:2;padding:4px 6px;border-radius:999px;background:rgba(7,14,18,.72);backdrop-filter:blur(8px);color:#dbe5e9;font-size:7px;font-weight:850;text-transform:uppercase;letter-spacing:.03em}.mediaKindPill{left:8px}.mediaSizePill{right:8px}.mediaOptimizedPill{left:8px;top:auto;bottom:8px;background:rgba(15,126,91,.82);color:#e6fff5}.mediaCardV45 .mediaInfo{padding:11px 12px}.mediaCardV45 .mediaInfo strong{font-size:11px}.mediaCardV45 .mediaInfo span{font-size:9px}.mediaCardV45 .mediaInfo small{font-size:8.5px}.mediaCardV45 .actions{margin-top:7px}.mediaEmptyV45{grid-column:1/-1;display:flex;flex-direction:column;gap:4px}.mediaEmptyV45 span{font-size:10px}.mediaCardV45 audio{max-width:92%}@media(max-width:1180px){.mediaPolicyForm{grid-template-columns:1fr 1fr 1fr}.mediaToggleField{grid-column:1/-1}.mediaSavePolicy{grid-column:1/-1}.mediaGridV45{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:780px){.mediaStorageOverview{grid-template-columns:1fr}.mediaPolicyForm{grid-template-columns:1fr 1fr}.mediaToggleField,.mediaSavePolicy{grid-column:1/-1}.mediaMaintenanceRow p{width:100%;margin-left:0}.mediaGridV45{grid-template-columns:repeat(2,minmax(0,1fr))}}
.attachmentExpired{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px dashed var(--line);border-radius:10px;color:var(--muted)}.attachmentExpired strong{color:var(--text);font-size:11px}.attachmentExpired span{font-size:9px}


/* v4.5.1 media availability */
.mediaUnavailable{min-height:180px;display:grid;place-items:center;align-content:center;gap:6px;text-align:center;padding:20px;color:#8fa2b5;background:linear-gradient(145deg,#111b21,#18252d)}
.mediaUnavailable>span{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:rgba(244,186,74,.12);color:#f4ba4a;font-weight:900}
.mediaUnavailable strong{color:#dce7ed;font-size:12px}.mediaUnavailable small{max-width:190px;font-size:9px;line-height:1.4}.mediaMissingLabel{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:6px 8px;border-radius:9px;background:rgba(244,186,74,.08);color:#d6b667;font-size:9px;font-weight:800}
html[data-theme="light"] .mediaUnavailable{background:linear-gradient(145deg,#f8fafb,#eef3f6)!important;color:#70828d!important}html[data-theme="light"] .mediaUnavailable strong{color:#33434d!important}html[data-theme="light"] .mediaUnavailable>span{background:#fff8ea!important;color:#a15c00!important}html[data-theme="light"] .mediaMissingLabel{background:#fff8ea!important;color:#9a6110!important}

.chatMediaLightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:22px;background:rgba(4,9,12,.86);backdrop-filter:blur(9px);z-index:1200}
.chatMediaLightbox.open{display:flex}
.chatMediaLightboxInner{position:relative;display:flex;flex-direction:column;gap:10px;align-items:center;max-width:min(96vw,1100px);max-height:92vh;min-width:min(70vw,760px)}
.chatMediaLightbox img{display:block;max-width:min(92vw,1100px);max-height:78vh;border-radius:14px;box-shadow:0 25px 70px rgba(0,0,0,.45);background:#091117;object-fit:contain;user-select:none;-webkit-user-drag:none}
.chatMediaLightboxMeta{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;color:#d7e4eb;font-size:12px;text-align:center}
.chatMediaLightboxMeta strong{font-size:13px;color:#fff}.chatMediaLightboxCount{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:28px;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.08);color:#cbd8de;font-size:11px;font-weight:800}
.chatMediaLightboxClose,.chatMediaLightboxOpen,.chatMediaLightboxNav{appearance:none;border:1px solid rgba(255,255,255,.14);background:rgba(9,18,24,.88);color:#f4fbff;border-radius:999px;font:inherit;font-weight:800;cursor:pointer;min-height:42px}
.chatMediaLightboxOpen{padding:10px 14px}.chatMediaLightboxClose{position:absolute;top:0;right:0;transform:translate(12px,-12px);width:42px;height:42px;padding:0;display:grid;place-items:center;font-size:18px;line-height:1;z-index:4}
.chatMediaLightboxNav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;padding:0;display:grid;place-items:center;font-size:34px;line-height:1;z-index:3;box-shadow:0 8px 24px rgba(0,0,0,.24)}
.chatMediaLightboxPrev{left:-68px}.chatMediaLightboxNext{right:-68px}.chatMediaLightboxNav:disabled{opacity:.25;cursor:default}.chatMediaLightboxNav[hidden]{display:none!important}
body.mediaLightboxOpen{overflow:hidden}
@media(max-width:780px){.chatMediaLightbox{padding:14px}.chatMediaLightboxInner{max-width:100%;width:100%;min-width:0}.chatMediaLightbox img{max-width:100%;max-height:70vh;border-radius:12px}.chatMediaLightboxMeta{font-size:11px;padding:0 8px;width:100%}.chatMediaLightboxClose{transform:none;top:-4px;right:4px}.chatMediaLightboxOpen{width:100%;justify-content:center}.chatMediaLightboxNav{top:auto;bottom:56px;transform:none;width:46px;height:46px;background:rgba(9,18,24,.92)}.chatMediaLightboxPrev{left:8px}.chatMediaLightboxNext{right:8px}.chatMediaLightboxCount{order:-1}.chatMediaLightboxMeta strong{flex:1 1 100%}}


/* v4.6.0 cleanup & performance */
.desktopNavMore{position:relative;display:flex;align-items:center}
.navMoreTrigger{display:flex;align-items:center;gap:6px;min-height:38px;padding:8px 10px;border:1px solid transparent;border-radius:11px;background:transparent;color:#8298a2;font:inherit;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.navMoreTrigger:hover,.navMoreTrigger.active{background:#101e25;color:#eaf3f5;border-color:#1d343e}.navMoreTrigger.active .navSvg{stroke:#4ade91}
.globalMorePopover{width:300px}.globalMoreLinks{display:grid;gap:5px;padding:5px}.globalMoreLinks>a{display:flex;align-items:center;gap:11px;padding:10px;border-radius:11px;color:var(--text)}.globalMoreLinks>a:hover{background:#14232a}.globalMoreLinks a>span:last-child{min-width:0}.globalMoreLinks strong,.globalMoreLinks small{display:block}.globalMoreLinks strong{font-size:11px}.globalMoreLinks small{margin-top:2px;color:var(--muted);font-size:9px}.globalMoreIcon{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:#15272e;color:#55d998;font-size:15px;flex:0 0 auto}
.captureStatusChip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 9px;border:1px solid #263b43;border-radius:999px;background:#0d1b20;color:#879ba4;font-size:9px;font-weight:850;white-space:nowrap}.captureStatusChip i{width:6px;height:6px;border-radius:50%;background:#70818a}.captureStatusChip.live{border-color:rgba(37,211,102,.2);background:rgba(37,211,102,.07);color:#72dfa2}.captureStatusChip.live i{background:#25d366;box-shadow:0 0 8px rgba(37,211,102,.42)}.captureStatusChip.issue{border-color:rgba(244,186,74,.22);background:rgba(244,186,74,.06);color:#e8bf69}.captureStatusChip.issue i{background:#f4ba4a}
.dashboardMetricsCompact{grid-template-columns:repeat(4,minmax(0,1fr))}.dashboardBackupActions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}.dashboardBackupActions form{margin:0}.dashboardBackupActions .dashboardBackupAction{width:100%;margin:0}
.mediaPolicyForm{grid-template-columns:minmax(230px,1.35fr) repeat(4,minmax(135px,1fr)) auto}.mediaChatScope{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:-4px 0 14px;padding:11px 13px;border:1px solid rgba(37,211,102,.18);border-radius:12px;background:rgba(37,211,102,.055);color:#7de2aa;font-size:10px;font-weight:700}.mediaChatScope>div:first-child{min-width:0;display:flex;flex-direction:column;gap:2px}.mediaChatScope strong{color:#dff9ea;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mediaChatScope span{color:#79a990;font-size:9px;font-weight:600}.mediaChatScopeActions{display:flex;align-items:center;gap:10px;flex:0 0 auto}.mediaChatScope a{color:#9cf0bd;text-decoration:none;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.045)}.mediaChatScope a:hover{background:rgba(255,255,255,.08)}
.contactInfoTrigger{cursor:pointer;border-radius:10px;outline:none}.contactInfoTrigger:hover{background:rgba(255,255,255,.025)}.contactInfoTrigger:focus-visible{box-shadow:0 0 0 2px rgba(37,211,102,.22)}
.contactInfoDrawer{position:fixed;inset:0;z-index:240;visibility:hidden;pointer-events:none}.contactInfoDrawer.open{visibility:visible;pointer-events:auto}.contactInfoBackdrop{position:absolute;inset:0;border:0;border-radius:0;background:rgba(0,0,0,.42);opacity:0;transition:opacity .18s}.contactInfoDrawer.open .contactInfoBackdrop{opacity:1}.contactInfoCard{position:absolute;top:0;right:0;width:min(390px,92vw);height:100%;padding:18px;border-left:1px solid #233640;background:#0d181d;box-shadow:-25px 0 70px rgba(0,0,0,.35);transform:translateX(104%);transition:transform .22s ease;overflow:auto}.contactInfoDrawer.open .contactInfoCard{transform:translateX(0)}.contactInfoHead{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid #203139}.contactInfoHead strong{font-size:16px}.contactInfoClose{width:36px;height:36px;min-height:36px;padding:0;border:0;border-radius:50%;background:#17262d;color:#c6d2d7;font-size:21px}.contactInfoProfile{text-align:center;padding:22px 8px 18px}.contactInfoProfile .contactAvatar{width:76px!important;height:76px!important;margin:0 auto 10px}.contactInfoProfile h3{margin:0;font-size:20px}.contactInfoProfile p{margin:3px 0 0;color:var(--muted);font-size:11px}.contactInfoStats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.contactInfoStats>a,.contactInfoStats>div{padding:11px 5px;border:1px solid #20333c;border-radius:11px;background:#101f25;text-align:center}.contactInfoStats strong,.contactInfoStats span{display:block}.contactInfoStats strong{font-size:16px}.contactInfoStats span{margin-top:2px;color:var(--muted);font-size:8px}.contactInfoSection{margin-top:18px}.contactInfoSectionHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}.contactInfoSectionHead strong{font-size:12px}.contactInfoSectionHead a{color:#61dda2;font-size:9px}.contactInfoMediaGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.contactInfoMediaThumb{aspect-ratio:1;display:grid;place-items:center;overflow:hidden;border-radius:9px;background:#15252c;color:#91a6af;font-size:8px;font-weight:800}.contactInfoMediaThumb img{width:100%;height:100%;object-fit:cover}.contactInfoLoading{grid-column:1/-1;padding:18px;text-align:center;color:var(--muted);font-size:10px}.desktopQuickPreference{margin:4px 5px 7px}.desktopPreferenceRow{width:100%;display:flex;align-items:center;justify-content:space-between;min-height:39px;padding:8px 10px;border-radius:9px;background:#112027;border:1px solid #223841;color:#dce8eb;font-size:10px}.desktopPreferenceRow span{color:#718892}.desktopPreferenceRow strong{font-size:10px}
.searchHeroV46{margin-bottom:12px}.searchHubPanel{padding:14px}.globalSearchForm{display:grid;grid-template-columns:minmax(280px,2fr) minmax(150px,.7fr) auto;gap:8px}.globalSearchField{display:flex;align-items:center;gap:8px;min-width:0;padding:0 11px;border:1px solid #2b3a4a;border-radius:11px;background:#0d141c}.globalSearchField svg{width:17px;height:17px;fill:none;stroke:#7e929e;stroke-width:1.8}.globalSearchField input{width:100%;height:42px;border:0;outline:0;background:transparent;color:var(--text)}.globalSearchForm select{min-height:42px;padding:0 10px;border:1px solid #2b3a4a;border-radius:11px;background:#0d141c;color:var(--text)}.searchTabs{display:flex;gap:5px;margin-top:11px;padding-top:11px;border-top:1px solid rgba(255,255,255,.055)}.searchTabs a{padding:7px 11px;border-radius:9px;color:var(--muted);font-size:10px;font-weight:750}.searchTabs a:hover{background:#142029;color:var(--text)}.searchTabs a.active{background:rgba(37,211,102,.09);color:#65dda0}.searchAdvancedPanel{padding:12px 14px}.searchAdvancedPanel summary{cursor:pointer;color:#9fb0b8;font-size:10px;font-weight:800}.searchAdvancedPanel details[open] summary{margin-bottom:11px}.searchChatResults{display:flex;flex-direction:column}.searchChatRow{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:11px;align-items:center;padding:12px 15px;border-bottom:1px solid rgba(255,255,255,.05)}.searchChatRow:last-child{border-bottom:0}.searchChatRow:hover{background:#121e25}.searchChatRow .chatAvatar{width:46px;height:46px}.searchChatRow strong,.searchChatRow small,.searchChatRow p{display:block}.searchChatRow small{margin-top:1px;color:var(--muted);font-size:9px}.searchChatRow p{margin:4px 0 0;color:#a9b8be;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.searchChatRow>span{color:#647c86;font-size:20px}.searchMediaGrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}.searchMediaCard{min-width:0;padding:7px;border:1px solid var(--line);border-radius:13px;background:var(--panel)}.searchMediaCard>div{aspect-ratio:1;display:grid;place-items:center;overflow:hidden;border-radius:9px;background:#0a1419;color:#80939d;font-size:10px;font-weight:850}.searchMediaCard img{width:100%;height:100%;object-fit:cover}.searchMediaCard strong,.searchMediaCard small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.searchMediaCard strong{margin-top:7px;font-size:9px}.searchMediaCard small{margin-top:2px;color:var(--muted);font-size:8px}
.proBubbleRow{content-visibility:auto;contain-intrinsic-size:auto 68px}.messageFocusPulse .proBubble{animation:messageFocusPulse 1.6s ease}@keyframes messageFocusPulse{0%,100%{box-shadow:0 1px 1px rgba(0,0,0,.22)}30%{box-shadow:0 0 0 3px rgba(37,211,102,.35),0 8px 24px rgba(0,0,0,.24)}}
.chatMediaLightboxJump{appearance:none;border:1px solid rgba(255,255,255,.14);background:rgba(9,18,24,.88);color:#f4fbff;border-radius:999px;padding:10px 14px;font:inherit;font-weight:800;cursor:pointer;min-height:42px}
@media(max-width:1180px) and (min-width:781px){.captureStatusChip{display:none}.dashboardMetricsCompact{grid-template-columns:repeat(2,minmax(0,1fr))}.searchMediaGrid{grid-template-columns:repeat(4,minmax(0,1fr))}.mediaPolicyForm{grid-template-columns:1fr 1fr 1fr}.mediaPolicyForm .mediaToggleField,.mediaPolicyForm .mediaSavePolicy{grid-column:1/-1}}
@media(max-width:780px){.desktopNavMore,.captureStatusChip{display:none!important}.dashboardMetricsCompact{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboardBackupActions{grid-template-columns:1fr}.contactInfoCard{top:auto;bottom:0;width:100%;height:auto;max-height:82dvh;border-left:0;border-top:1px solid #263841;border-radius:22px 22px 0 0;padding:14px;transform:translateY(104%)}.contactInfoDrawer.open .contactInfoCard{transform:translateY(0)}.contactInfoStats{grid-template-columns:repeat(3,1fr)}.contactInfoProfile{padding:14px 8px}.contactInfoProfile .contactAvatar{width:68px!important;height:68px!important}.contactInfoMediaGrid{grid-template-columns:repeat(4,1fr)}.globalSearchForm{grid-template-columns:1fr}.searchTabs{overflow-x:auto}.searchTabs a{flex:1;text-align:center;min-width:78px}.searchMediaGrid{grid-template-columns:repeat(3,minmax(0,1fr))}.mediaChatScope{margin-left:10px;margin-right:10px;align-items:flex-start}.mediaChatScopeActions{gap:6px}.mediaChatScope a{padding:6px}.chatMediaLightboxJump{width:100%}}
@media(max-width:430px){.searchMediaGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.contactInfoStats{gap:4px}.contactInfoStats>a,.contactInfoStats>div{padding:9px 3px}.contactInfoMediaGrid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:781px){body:has(.chatWorkspace) .chatRailHeader .liveDotWrap{display:none}.navMoreTrigger{min-height:40px}}
.mediaScopeField{min-height:42px;display:flex;align-items:center;padding:0 11px;border:1px solid #2b3a4a;border-radius:10px;background:#0d141c;color:#81949e;font-size:10px;font-weight:750}
@media(min-width:901px) and (max-width:1180px){.navMoreTrigger{width:40px;height:40px;padding:0;justify-content:center;border-radius:11px}.navMoreTrigger span{display:none}.navMoreTrigger .navSvg{width:17px;height:17px}}
body.contactInfoOpen{overflow:hidden}
@media(max-width:780px){.mediaPolicyForm{grid-template-columns:1fr 1fr}.mediaPolicyForm .mediaToggleField,.mediaPolicyForm .mediaSavePolicy{grid-column:1/-1}}
.starredMessageButton{color:#ffd66b!important;border-color:rgba(244,186,74,.28)!important;background:rgba(244,186,74,.08)!important}


/* v4.7.0 Status archive */
.statusHero{align-items:center}.statusHeroStats{display:flex;gap:9px;flex:0 0 auto}.statusHeroStats>span{min-width:104px;padding:11px 14px;border:1px solid rgba(37,211,102,.16);border-radius:13px;background:rgba(37,211,102,.055);text-align:right}.statusHeroStats strong,.statusHeroStats small{display:block}.statusHeroStats strong{font-size:22px;color:#65e2a0}.statusHeroStats small{margin-top:2px;font-size:9px;color:var(--muted)}.statusHeroStats .deleted{border-color:rgba(255,100,112,.18);background:rgba(255,100,112,.06)}.statusHeroStats .deleted strong{color:#ff8e99}.statusFilters{grid-template-columns:2fr 1fr 1fr auto}.statusGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:20px}.statusCard{overflow:hidden;border:1px solid var(--line);border-radius:17px;background:var(--panel);box-shadow:0 10px 26px rgba(0,0,0,.08)}.statusCard.isDeleted{border-color:rgba(255,100,112,.22)}.statusCardHead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 13px;border-bottom:1px solid rgba(255,255,255,.055)}.statusPerson{display:flex;align-items:center;gap:9px;min-width:0}.statusPerson>span:last-child{min-width:0}.statusPerson strong,.statusPerson small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.statusPerson strong{font-size:12px}.statusPerson small{margin-top:2px;color:var(--muted);font-size:9px}.statusAvatar{position:relative;width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:grid;place-items:center;background:#20313a;overflow:hidden}.statusAvatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}.statusAvatar b{font-size:12px}.statusState{padding:4px 7px;border-radius:999px;font-size:7px;font-weight:850;text-transform:uppercase;letter-spacing:.04em}.statusState.active{background:rgba(37,211,102,.10);color:#66e0a0;border:1px solid rgba(37,211,102,.16)}.statusState.deleted{background:rgba(255,100,112,.10);color:#ff98a1;border:1px solid rgba(255,100,112,.18)}.statusContent{min-height:210px;background:#091117}.statusMedia{display:block}.statusContent img,.statusContent video{display:block;width:100%;height:230px;object-fit:cover;background:#091117}.statusText{min-height:230px;display:grid;place-items:center;padding:24px;color:#ecf4f6;font-size:18px;line-height:1.45;text-align:center;background:linear-gradient(145deg,#15352c,#10242e)}.statusCaption{margin:0;padding:10px 12px;border-top:1px solid rgba(255,255,255,.05);font-size:11px;color:#c7d3d8;white-space:pre-wrap}.statusCardFoot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;color:var(--muted);font-size:8.5px}.statusCardFoot strong{color:#cfdade;font-weight:650}.statusCardFoot .deletedTime{color:#d8838c}.statusCardFoot .deletedTime strong{color:#ff9ba5}.statusEmpty{grid-column:1/-1;display:flex;flex-direction:column;gap:4px}.statusEmpty span{font-size:10px;color:var(--muted)}
@media(max-width:1100px){.statusGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.statusFilters{grid-template-columns:1fr 1fr}}
@media(max-width:780px){.statusHero{align-items:flex-start!important}.statusHeroStats{width:100%}.statusHeroStats>span{flex:1;text-align:left}.statusFilterPanel{padding:10px!important}.statusFilters{grid-template-columns:1fr!important}.statusGrid{grid-template-columns:1fr;gap:8px;padding:0 8px}.statusCard{border-radius:15px}.statusContent img,.statusContent video,.statusText{height:auto;min-height:0;max-height:58dvh}.statusContent img{aspect-ratio:9/14;object-fit:cover}.statusText{min-height:260px}.statusCardFoot{font-size:8px;flex-wrap:wrap}}


/* v4.7.1 WhatsApp-like passive Status UI */
.statusPage{max-width:920px;margin:0 auto 28px}.statusAppHeader{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:2px 0 14px;padding:4px 2px}.statusAppHeader h1{margin:1px 0 2px;font-size:28px;letter-spacing:-.8px}.statusAppHeader p:not(.sectionKicker){margin:0;color:var(--muted);font-size:10px}.statusPrivacyPill{display:flex;align-items:center;gap:6px;min-height:30px;padding:0 10px;border:1px solid rgba(37,211,102,.16);border-radius:999px;background:rgba(37,211,102,.06);color:#75dfa5;font-size:8px;font-weight:800;white-space:nowrap}.statusPrivacyPill>.statusPrivacyDot{width:6px;height:6px;border-radius:50%;background:#25d366;box-shadow:0 0 8px rgba(37,211,102,.35)}
.statusSearchBar{display:grid;grid-template-columns:auto minmax(0,1fr) 180px auto;gap:8px;align-items:center;margin-bottom:10px;padding:9px 10px;border:1px solid var(--line);border-radius:15px;background:var(--panel)}.statusSearchIcon{width:32px;height:32px;display:grid;place-items:center;color:#718891}.statusSearchIcon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.statusSearchBar input,.statusSearchBar select{min-height:38px;border:0;border-radius:10px;background:var(--panel2);color:var(--text);padding:0 11px;outline:none}.statusSearchBar button{min-height:38px}.statusTabs{display:flex;gap:6px;margin-bottom:12px}.statusTabs a{display:flex;align-items:center;gap:6px;min-height:34px;padding:0 11px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--muted);font-size:9px;font-weight:780}.statusTabs a span{min-width:18px;height:18px;display:grid;place-items:center;border-radius:999px;background:rgba(255,255,255,.05);font-size:7px}.statusTabs a.active{color:#8ff0b7;border-color:rgba(37,211,102,.25);background:rgba(37,211,102,.08)}
.statusWhatsAppList{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--panel)}.statusSectionTitle{margin:0;padding:13px 16px 7px;color:#82969f;font-size:9px;text-transform:uppercase;letter-spacing:.09em}.statusSectionTitle.deleted{color:#c27e86}.statusContactRow{width:100%;min-height:74px;padding:9px 14px;display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:11px;align-items:center;border:0;border-radius:0;border-top:1px solid rgba(255,255,255,.045);background:transparent;color:var(--text);text-align:left;cursor:pointer}.statusSectionTitle+.statusContactRow{border-top:0}.statusContactRow:hover{background:rgba(255,255,255,.025)}.statusRing{width:50px;height:50px;display:grid;place-items:center;border-radius:50%;padding:3px;background:conic-gradient(#25d366 0 360deg)}.statusRing.deleted{background:conic-gradient(#ff6470 0 360deg)}.statusRing.mixed{background:conic-gradient(#25d366 0 72%,#ff6470 72% 100%)}.statusRing.multi{background:repeating-conic-gradient(#25d366 0 54deg,transparent 54deg 61deg)}.statusRing.deleted.multi{background:repeating-conic-gradient(#ff6470 0 54deg,transparent 54deg 61deg)}.statusRing.mixed.multi{background:repeating-conic-gradient(#25d366 0 42deg,transparent 42deg 48deg,#ff6470 48deg 58deg,transparent 58deg 64deg)}.statusRing .statusAvatar{width:44px;height:44px;border:2px solid var(--panel);border-radius:50%;background:#22343d}.statusRowBody{min-width:0}.statusRowBody strong,.statusRowBody small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.statusRowBody strong{font-size:13px}.statusRowBody small{margin-top:3px;color:var(--muted);font-size:9px}.statusRowChevron{color:#5f747d;font-size:22px}.statusDeletedBadge{padding:4px 7px;border-radius:999px;border:1px solid rgba(255,100,112,.18);background:rgba(255,100,112,.08);color:#ff9ba4;font-size:7px;font-weight:850;text-transform:uppercase}.statusListEmpty{min-height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;color:var(--muted)}.statusEmptyIcon{width:54px;height:54px;display:grid;place-items:center;border-radius:50%;background:rgba(37,211,102,.07);color:#61df9e;font-size:31px}.statusListEmpty strong{color:var(--text);font-size:13px}.statusListEmpty small{max-width:300px;font-size:9px}
.statusViewer{position:fixed;inset:0;z-index:250;display:none}.statusViewer.open{display:block}.statusViewerBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(8px)}.statusViewerShell{position:absolute;inset:3vh max(12px,calc((100vw - 430px)/2));display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:#071014;box-shadow:0 30px 90px rgba(0,0,0,.5)}.statusViewerProgress{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;padding:9px 9px 4px}.statusViewerProgress span{height:2px;border-radius:999px;background:rgba(255,255,255,.25)}.statusViewerProgress span.done,.statusViewerProgress span.current{background:#f2f6f7}.statusViewerHead{display:flex;align-items:center;gap:9px;padding:5px 10px 10px;color:#fff}.statusViewerAvatar{width:34px;height:34px;overflow:hidden;border-radius:50%;background:#24343c}.statusViewerAvatar img{width:100%;height:100%;object-fit:cover}.statusViewerPerson{min-width:0;flex:1}.statusViewerPerson strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.statusViewerMetaLine{display:flex;align-items:center;gap:6px;min-width:0;margin-top:1px}.statusViewerMetaLine small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#a6b4ba;font-size:8px}.statusViewerMetaLine em{display:inline-flex;align-items:center;min-height:17px;padding:0 5px;border-radius:999px;background:rgba(255,100,112,.16);color:#ffadb4;font-size:7px;font-style:normal;font-weight:850;white-space:nowrap}.statusViewerClose{width:36px;height:36px;min-height:36px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.07);color:#fff;font-size:22px}.statusViewerCanvas{position:relative;flex:1;min-height:0;display:grid;place-items:center;overflow:hidden;background:#050b0e;cursor:pointer}.statusViewerCanvas>img,.statusViewerCanvas>video{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}.statusViewerText{width:100%;height:100%;display:grid;place-items:center;padding:34px;color:#fff;font-size:22px;line-height:1.45;text-align:center;background:linear-gradient(145deg,#194d3d,#143246)}.statusViewerCaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:14px 18px;background:linear-gradient(transparent,rgba(0,0,0,.78));color:#fff;font-size:12px;text-align:center;white-space:pre-wrap}.statusViewerDeleted{padding:8px 12px;background:#4b171d;color:#ffb3ba;text-align:center;font-size:9px;font-weight:800}.statusViewerNav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:52px;min-height:52px;padding:0;border:0;border-radius:12px;background:rgba(0,0,0,.32);color:#fff;font-size:33px}.statusViewerNav.prev{left:8px}.statusViewerNav.next{right:8px}.statusViewerNav:disabled{opacity:.15;pointer-events:none}body.statusViewerOpen{overflow:hidden}
@media(max-width:780px){.statusPage{width:100%;margin:0}.statusAppHeader{padding:12px 15px 8px;margin:0}.statusAppHeader h1{font-size:24px}.statusAppHeader p:not(.sectionKicker){display:none}.statusPrivacyPill{min-height:27px;padding:0 8px;font-size:7px}.statusSearchBar{grid-template-columns:auto minmax(0,1fr);margin:0 10px 8px;padding:4px 8px;border-radius:12px}.statusSearchBar select,.statusSearchBar button{display:none}.statusSearchBar input{background:transparent;padding:0}.statusTabs{padding:0 10px;margin-bottom:8px;overflow-x:auto}.statusTabs a{flex:1;justify-content:center;min-width:82px}.statusWhatsAppList{border-left:0;border-right:0;border-radius:0}.statusSectionTitle{padding-left:15px}.statusContactRow{min-height:72px;padding:9px 14px}.statusViewerShell{inset:0;border:0;border-radius:0}.statusViewerNav{display:none}.statusViewerCanvas>img,.statusViewerCanvas>video{max-height:100%;max-width:100%}}


/* v4.7.7 status viewer media/navigation polish */
.statusViewerSound{width:36px;height:36px;min-height:36px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.07);color:#fff;flex:0 0 auto}
.statusViewerSound[hidden]{display:none!important}.statusViewerSound svg{width:18px;height:18px;fill:currentColor}.statusViewerSound .soundWave{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.statusViewerSound.muted .soundWave{display:none}.statusViewerSound.muted:after{content:"";position:absolute;width:18px;height:2px;border-radius:2px;background:#ff9aa4;transform:rotate(-45deg)}
.statusViewerCanvas>video{background:#050b0e}
.statusViewerPlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:8;width:62px;height:62px;min-height:62px;padding:0;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(7,14,18,.68);backdrop-filter:blur(8px);color:#fff;font-size:24px;box-shadow:0 12px 34px rgba(0,0,0,.32)}
.statusViewerPlay[hidden]{display:none!important}
.statusViewerProgress span{position:relative;overflow:hidden;background:rgba(255,255,255,.24)!important}
.statusViewerProgress span:after{content:"";position:absolute;inset:0 auto 0 0;width:0;background:#f4f7f8;border-radius:inherit}
.statusViewerProgress span.done:after{width:100%}.statusViewerProgress span.current:after{width:var(--status-progress,0%)}
.statusViewerNav{z-index:7;display:grid;place-items:center;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.statusMediaUnavailable{gap:10px}.statusMediaUnavailable small{display:block;margin-top:8px;color:#aebbc0;font-size:11px}
@media(max-width:780px){
  .statusViewerNav{display:grid!important;top:50%;width:42px!important;height:74px!important;min-height:74px!important;border-radius:0 12px 12px 0!important;background:linear-gradient(90deg,rgba(0,0,0,.28),transparent)!important;font-size:30px!important;opacity:.82!important}
  .statusViewerNav.prev{left:0!important}.statusViewerNav.next{right:0!important;border-radius:12px 0 0 12px!important;background:linear-gradient(270deg,rgba(0,0,0,.28),transparent)!important}
  .statusViewerNav:disabled{opacity:.08!important}
  .statusViewerCanvas>video{width:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important}
  .statusViewerSound{width:34px;height:34px;min-height:34px}.statusViewerPlay{width:58px;height:58px;min-height:58px}
}

/* v4.8.0 reliability + archive experience */
.statusControlStrip{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-2px 0 12px;padding:10px 12px;border:1px solid #20343d;border-radius:14px;background:#0d181e}.statusHealthMini{display:flex;align-items:center;gap:8px;min-width:0}.statusHealthMini strong{font-size:12px}.statusHealthMini small{color:var(--muted);font-size:10px}.statusHealthDot{width:8px;height:8px;border-radius:50%;background:#25d366;box-shadow:0 0 0 4px rgba(37,211,102,.08)}.statusRetentionForm label{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:10px}.statusRetentionForm select{min-height:34px;padding:5px 28px 5px 9px;border-radius:9px;border:1px solid #293d46;background:#101d23;color:#dce7eb}.statusContactRow.seen .statusRing:not(.deleted):not(.mixed){background:#667781}.statusContactRow.unseen .statusRowBody strong{color:#f5f8f9}.statusViewerCounter{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:9;padding:4px 8px;border-radius:999px;background:rgba(0,0,0,.32);color:#dbe4e8;font-size:10px;pointer-events:none}.statusViewerHint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:9;color:rgba(255,255,255,.52);font-size:10px;white-space:nowrap;pointer-events:none}.statusViewer.holding .statusViewerPlay{display:none!important}.statusViewer.holding .statusViewerProgress{opacity:.65}.statusViewerText{width:min(88vw,560px);min-height:min(68vh,620px);display:flex!important;align-items:center;justify-content:center;padding:44px;text-align:center;font-size:clamp(28px,5vw,52px);font-weight:650;line-height:1.2;border-radius:20px;overflow-wrap:anywhere}.statusViewerText[data-whatsapp-font="1"]{font-family:Georgia,serif;font-style:italic}.statusViewerText[data-whatsapp-font="2"]{font-family:monospace}.statusViewerText[data-whatsapp-font="5"]{font-weight:800}.statusViewerText[data-whatsapp-font="6"]{font-family:serif}.statusViewerText[data-whatsapp-font="7"]{font-family:monospace;font-weight:700}

.voiceNotePlayer{--voice-progress:0%;display:grid;grid-template-columns:34px minmax(110px,1fr) auto;align-items:center;gap:8px;min-width:220px;padding:7px 8px;border-radius:11px;background:rgba(0,0,0,.12)}.voiceNotePlayer audio{display:none}.voiceNotePlay{width:34px;height:34px;min-height:34px;padding:0;border:0;border-radius:50%;background:#25d366;color:#092218;font-size:13px}.voiceWave{height:28px;display:flex;align-items:center;gap:2px;position:relative;overflow:hidden}.voiceWave:after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--voice-progress);background:rgba(37,211,102,.22);pointer-events:none}.voiceWave i{display:block;width:3px;border-radius:999px;background:#8ca0a9;position:relative;z-index:1}.voiceWave i:nth-child(1),.voiceWave i:nth-child(7){height:8px}.voiceWave i:nth-child(2),.voiceWave i:nth-child(9){height:14px}.voiceWave i:nth-child(3),.voiceWave i:nth-child(8),.voiceWave i:nth-child(12){height:20px}.voiceWave i:nth-child(4),.voiceWave i:nth-child(10){height:11px}.voiceWave i:nth-child(5){height:24px}.voiceWave i:nth-child(6),.voiceWave i:nth-child(11){height:17px}.voiceTime{font-size:9px;color:#93a4ac;white-space:nowrap}.bubbleReactions{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0 -2px}.bubbleReactions span{display:inline-flex;align-items:center;gap:2px;padding:2px 6px;border:1px solid rgba(140,166,176,.22);border-radius:999px;background:rgba(0,0,0,.12);font-size:10px;color:#c6d3d8}.bubbleReactions b{font-size:13px;line-height:1}.quotedReply.jumpable{cursor:pointer}.quotedReply.jumpable:hover{filter:brightness(1.08)}.messageJumpFlash .proBubble{animation:messageJumpFlash 1.4s ease}@keyframes messageJumpFlash{0%,100%{box-shadow:0 1px .5px rgba(0,0,0,.28)}25%,70%{box-shadow:0 0 0 3px rgba(37,211,102,.48),0 5px 20px rgba(37,211,102,.18)}}

.messageQuickInspector{position:fixed;inset:0;z-index:240;display:none}.messageQuickInspector.open{display:block}.messageQuickInspectorBackdrop{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;background:rgba(0,0,0,.56)}.messageQuickInspectorCard{position:absolute;right:18px;top:86px;width:min(390px,calc(100vw - 36px));max-height:calc(100vh - 110px);overflow:auto;border:1px solid #2a3c46;border-radius:18px;background:#111d23;box-shadow:0 26px 70px rgba(0,0,0,.4)}.messageQuickInspectorCard>header{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 15px;border-bottom:1px solid #263840;background:#111d23}.messageQuickInspectorCard header strong,.messageQuickInspectorCard header small{display:block}.messageQuickInspectorCard header small{margin-top:2px;color:var(--muted);font-size:10px}.messageQuickInspectorClose{width:34px;height:34px;min-height:34px;padding:0;border-radius:50%;background:#1b2a31;border:1px solid #30434d;color:#d5dfe3;font-size:19px}.messageQuickInspectorBody{padding:14px}.quickInspectorSummary{padding:11px;border-radius:12px;background:#0c171c;border:1px solid #22343d}.quickInspectorSummary strong,.quickInspectorSummary small{display:block}.quickInspectorSummary small{margin-top:5px;color:#8ca0a9;font-size:10px}.quickInspectorReactions{display:flex;align-items:center;gap:6px;margin:10px 0}.quickInspectorReactions small{color:var(--muted)}.quickInspectorReactions span,.messageReactionSummary span{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;background:#17272e;border:1px solid #2b4049}.quickInspectorTimeline{display:grid;gap:7px;margin-top:10px}.quickInspectorEvent{padding:9px 10px;border-radius:10px;background:#0d171c;border:1px solid #21343c}.quickInspectorEvent strong,.quickInspectorEvent span,.quickInspectorEvent small{display:block}.quickInspectorEvent span{margin-top:3px;white-space:pre-wrap}.quickInspectorEvent small{margin-top:4px;color:#82959e;font-size:9px}.quickInspectorFull{width:100%;margin-top:10px}.messageReactionSummary{display:flex;gap:8px;flex-wrap:wrap}

.systemAuditRows{display:grid}.systemAuditRow{display:grid;grid-template-columns:82px minmax(0,1fr) auto;gap:12px;align-items:start;padding:11px 4px;border-top:1px solid rgba(255,255,255,.06)}.systemAuditRow:first-child{border-top:0}.auditCategory{display:inline-flex;width:max-content;padding:3px 7px;border-radius:999px;background:#132a23;color:#67dda1;font-size:9px;text-transform:uppercase;font-weight:800}.systemAuditRow strong{display:block}.systemAuditRow p{margin:2px 0 0;color:var(--muted);font-size:11px}.systemAuditRow time{color:#71858e;font-size:9px;white-space:nowrap}.repairPanel .panelhead{margin:0}.statusSearchResults .avatar{border-radius:50%}

.proBubbleRow{content-visibility:auto;contain-intrinsic-size:64px}.mediaCard,.deletedItem,.messageItem{content-visibility:auto;contain-intrinsic-size:90px}

@media(max-width:780px){.statusControlStrip{align-items:flex-start;flex-direction:column}.statusHealthMini{width:100%}.statusRetentionForm{width:100%}.statusRetentionForm label{justify-content:space-between}.statusRetentionForm select{flex:0 0 auto}.statusViewerCounter{top:11px}.statusViewerHint{bottom:10px;font-size:9px}.statusViewerText{width:100%;min-height:62vh;border-radius:0;padding:34px 24px}.voiceNotePlayer{min-width:190px;grid-template-columns:32px minmax(92px,1fr) auto}.voiceNotePlay{width:32px;height:32px;min-height:32px}.messageQuickInspectorCard{left:0;right:0;top:auto;bottom:0;width:100%;max-height:74dvh;border-radius:22px 22px 0 0;border-bottom:0}.systemAuditRow{grid-template-columns:66px minmax(0,1fr);gap:8px}.systemAuditRow time{grid-column:2}.statusViewerHint{display:none}}

/* v4.9.0 status archive timeline + person profiles */
.statusPrimaryTabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 12px}.statusPrimaryTabs a{display:grid;grid-template-columns:34px minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:9px;min-height:58px;padding:9px 12px;border:1px solid var(--line);border-radius:15px;background:var(--panel);color:var(--text)}.statusPrimaryTabs a.active{border-color:rgba(37,211,102,.28);background:linear-gradient(135deg,rgba(37,211,102,.10),rgba(37,211,102,.035))}.statusPrimaryIcon{grid-row:1/3;width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:var(--panel2);color:#7c919a;font-size:16px}.statusPrimaryTabs a.active .statusPrimaryIcon{background:rgba(37,211,102,.13);color:#55db91}.statusPrimaryTabs strong{font-size:11px;align-self:end}.statusPrimaryTabs small{grid-column:2;color:var(--muted);font-size:8px;align-self:start}.statusPrimaryTabs a>small:last-child{grid-column:3;grid-row:1/3;align-self:center;padding:4px 7px;border-radius:999px;background:rgba(255,255,255,.045);white-space:nowrap}
.statusRetentionPair{display:flex;align-items:center;gap:8px}.statusArchiveTabs{display:flex;gap:6px;margin:0 0 12px;padding:3px;border:1px solid var(--line);border-radius:13px;background:var(--panel)}.statusArchiveTabs a{flex:1;min-height:34px;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:10px;color:var(--muted);font-size:9px;font-weight:800}.statusArchiveTabs a.active{background:var(--panel2);color:#72e3a5;box-shadow:inset 0 0 0 1px rgba(37,211,102,.13)}.statusArchiveTabs a span{min-width:17px;height:17px;display:grid;place-items:center;border-radius:999px;background:rgba(37,211,102,.10);font-size:7px}
.statusArchiveCalendar{display:flex;gap:7px;overflow-x:auto;margin:0 0 13px;padding:2px 1px 7px;scrollbar-width:none}.statusArchiveCalendar::-webkit-scrollbar{display:none}.statusArchiveCalendar a{flex:0 0 auto;min-width:105px;padding:9px 10px;border:1px solid var(--line);border-radius:13px;background:var(--panel);color:var(--text)}.statusArchiveCalendar a.active{border-color:rgba(37,211,102,.28);background:rgba(37,211,102,.07)}.statusArchiveCalendar strong,.statusArchiveCalendar small{display:block}.statusArchiveCalendar strong{font-size:9px}.statusArchiveCalendar small{margin-top:3px;color:var(--muted);font-size:7px}
.statusArchiveTimeline{display:grid;gap:13px}.statusArchiveDay{position:relative}.statusArchiveDay>header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 5px 7px}.statusArchiveDay>header>div{display:flex;align-items:center;gap:7px}.statusArchiveDay h2{margin:0;font-size:11px}.statusArchiveDay header small{color:var(--muted);font-size:8px}.statusArchiveDayDot{width:7px;height:7px;border-radius:50%;background:#25d366;box-shadow:0 0 0 4px rgba(37,211,102,.08)}.statusArchiveDayList{border-radius:15px}.statusArchiveRow{grid-template-columns:46px minmax(0,1fr) auto;min-height:66px}.statusAvatar.archiveAvatar{position:relative;width:42px;height:42px;overflow:hidden;border-radius:50%;background:#22343d;display:grid;place-items:center}.statusAvatar.archiveAvatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.statusAvatar.archiveAvatar b{font-size:13px}.statusTinyStar{display:inline-block;margin-left:4px;color:#f5c65d;font-size:10px;vertical-align:1px}.statusArchiveThumbStack{display:flex;justify-content:flex-end;min-width:60px}.statusArchiveThumb{width:31px;height:40px;margin-left:-9px;overflow:hidden;display:grid;place-items:center;border:2px solid var(--panel);border-radius:8px;background:#1a2a31;color:#aebbc1;font-size:11px}.statusArchiveThumb:first-child{margin-left:0}.statusArchiveThumb img{width:100%;height:100%;object-fit:cover}.statusArchiveEmpty{min-height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:28px;border:1px dashed #29404a;border-radius:18px;background:rgba(255,255,255,.012);text-align:center;color:var(--muted)}.statusArchiveEmpty.wide{grid-column:1/-1}.statusArchiveEmpty>span{width:52px;height:52px;display:grid;place-items:center;border-radius:16px;background:rgba(37,211,102,.07);color:#65dea0;font-size:26px}.statusArchiveEmpty strong{margin-top:4px;color:var(--text);font-size:13px}.statusArchiveEmpty small{max-width:390px;font-size:9px;line-height:1.55}
.statusPeopleGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.statusPersonCard{display:grid;grid-template-columns:52px minmax(0,1fr) auto;grid-template-rows:auto auto auto;gap:2px 10px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--text);transition:.16s ease}.statusPersonCard:hover{transform:translateY(-1px);border-color:#31505b;background:#112129}.statusPersonAvatar{grid-row:1/4;position:relative;width:50px;height:50px;overflow:hidden;display:grid;place-items:center;border-radius:50%;background:#24363e}.statusPersonAvatar:after{content:"";position:absolute;inset:0;border:2px solid rgba(37,211,102,.45);border-radius:inherit}.statusPersonAvatar img{position:absolute;inset:3px;width:44px;height:44px;border-radius:50%;object-fit:cover}.statusPersonAvatar b{font-size:14px}.statusPersonIdentity{min-width:0}.statusPersonIdentity strong,.statusPersonIdentity small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.statusPersonIdentity strong{font-size:12px}.statusPersonIdentity small{margin-top:2px;color:var(--muted);font-size:8px}.statusPersonCount{text-align:right}.statusPersonCount strong,.statusPersonCount small{display:block}.statusPersonCount strong{font-size:16px;color:#7ce5aa}.statusPersonCount small{color:var(--muted);font-size:7px}.statusPersonMetrics{grid-column:2/4;color:#90a3ac;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.statusPersonMetrics b{color:#dbe5e9}.statusPersonSince{grid-column:2/4;color:#657b84;font-size:7px}
.statusProfileHero{display:grid;grid-template-columns:72px minmax(0,1fr) auto;grid-template-rows:auto auto auto;gap:7px 14px;align-items:center;margin-bottom:13px;padding:16px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,#102028,#0d181e)}.statusProfileBack{grid-column:1/-1;width:max-content;color:#74dca3;font-size:9px;font-weight:800}.statusProfileAvatar{grid-row:2/4;position:relative;width:70px;height:70px;overflow:hidden;display:grid;place-items:center;border-radius:50%;background:#22343d}.statusProfileAvatar:after{content:"";position:absolute;inset:0;border:3px solid rgba(37,211,102,.55);border-radius:50%}.statusProfileAvatar img{position:absolute;inset:4px;width:62px;height:62px;border-radius:50%;object-fit:cover}.statusProfileAvatar b{font-size:20px}.statusProfileTitle h2{margin:0;font-size:20px}.statusProfileTitle p{margin:2px 0 0;color:var(--muted);font-size:9px}.statusProfileMetrics{display:flex;align-items:stretch;gap:5px}.statusProfileMetrics span{min-width:58px;padding:7px 8px;border:1px solid #263b44;border-radius:11px;background:rgba(0,0,0,.12);text-align:center}.statusProfileMetrics strong,.statusProfileMetrics small{display:block}.statusProfileMetrics strong{font-size:13px}.statusProfileMetrics small{margin-top:2px;color:var(--muted);font-size:7px}.statusProfileRange{grid-column:2/4;display:flex;gap:16px;color:var(--muted);font-size:8px}.statusProfileRange strong{color:#c9d6db;font-weight:700}.statusProfileTimeline{display:grid;gap:7px}.statusProfileDay{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:11px 13px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);text-align:left;cursor:pointer}.statusProfileDay:hover{background:#112129}.statusProfileDayDate{position:relative;padding-left:18px}.statusProfileDayDate i{position:absolute;left:1px;top:7px;width:8px;height:8px;border-radius:50%;background:#25d366;box-shadow:0 0 0 4px rgba(37,211,102,.08)}.statusProfileDayDate strong,.statusProfileDayDate small{display:block}.statusProfileDayDate strong{font-size:10px}.statusProfileDayDate small{margin-top:2px;color:var(--muted);font-size:7px}.statusProfileDayStats{color:#8fa3ac;font-size:8px}.statusProfileDayStats b{color:#dbe6ea}.statusArchiveFootnote{display:flex;gap:10px;align-items:flex-start;margin-top:13px;padding:10px 12px;border:1px solid #203741;border-radius:13px;background:#0c171d}.statusArchiveFootnote span{flex:0 0 auto;padding:3px 6px;border-radius:999px;background:rgba(37,211,102,.08);color:#70dfa4;font-size:7px;font-weight:850;text-transform:uppercase}.statusArchiveFootnote p{margin:0;color:#7f939c;font-size:8px;line-height:1.55}.statusArchiveFootnote strong{color:#bfd0d6}
.statusViewerFavorite{width:36px;height:36px;min-height:36px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.07);color:#dce5e8;font-size:19px;line-height:1}.statusViewerFavorite.active{background:rgba(245,198,93,.14);color:#f5c65d}.statusViewerFavorite:active{transform:scale(.96)}

@media(max-width:780px){
  .statusPrimaryTabs{margin:0 10px 9px;gap:6px}.statusPrimaryTabs a{min-height:52px;padding:7px 9px;border-radius:13px;grid-template-columns:29px minmax(0,1fr)}.statusPrimaryIcon{width:29px;height:29px;border-radius:9px;font-size:14px}.statusPrimaryTabs a>small:last-child{display:none}
  .statusRetentionPair{width:100%;display:grid;grid-template-columns:1fr;gap:6px}.statusArchiveTabs{margin:0 10px 9px}.statusArchiveCalendar{margin:0 10px 10px}.statusArchiveCalendar a{min-width:94px}.statusArchiveTimeline{gap:11px}.statusArchiveDay>header{padding:0 14px 6px}.statusArchiveDayList{border-radius:0}.statusArchiveRow{grid-template-columns:44px minmax(0,1fr) auto;padding-left:14px}.statusArchiveThumbStack{min-width:48px}.statusArchiveThumb{width:27px;height:35px}
  .statusPeopleGrid{grid-template-columns:1fr;padding:0 10px}.statusPersonCard{border-radius:14px}.statusArchiveEmpty{margin:0 10px;border-radius:15px}.statusProfileHero{grid-template-columns:58px minmax(0,1fr);grid-template-rows:auto auto auto auto;margin:0 10px 10px;padding:13px;gap:6px 10px}.statusProfileBack{grid-column:1/-1}.statusProfileAvatar{grid-row:2/4;width:56px;height:56px}.statusProfileAvatar img{inset:4px;width:48px;height:48px}.statusProfileTitle h2{font-size:16px}.statusProfileMetrics{grid-column:1/-1;overflow-x:auto;padding-top:5px}.statusProfileMetrics span{min-width:58px;flex:1}.statusProfileRange{grid-column:1/-1;display:grid;gap:4px}.statusProfileTimeline{padding:0 10px}.statusProfileDay{padding:10px 11px}.statusProfileDayStats{max-width:120px;text-align:right}.statusArchiveFootnote{margin:11px 10px 0}.statusViewerFavorite{width:34px;height:34px;min-height:34px;font-size:18px}
}

/* v5.0.1 Stability Suite: voice/media controls, restore tools and responsive polish */
.voiceNotePlayer{grid-template-columns:34px minmax(110px,1fr) auto auto auto!important;gap:7px!important}
.voiceWave{appearance:none;-webkit-appearance:none;width:100%;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;touch-action:manipulation}
.voiceSpeed{min-width:34px;height:28px;min-height:28px;padding:0 7px;border:1px solid rgba(140,166,176,.22);border-radius:999px;background:rgba(0,0,0,.12);color:#b8c7cd;font-size:9px;font-weight:800}
.voiceDownload{width:28px;height:28px;display:grid;place-items:center;border:1px solid rgba(140,166,176,.22);border-radius:50%;background:rgba(0,0,0,.12);color:#b8c7cd;text-decoration:none;font-size:14px;font-weight:900}
.voiceNotePlayer.voiceError{outline:1px solid rgba(255,100,112,.35)}.voiceNotePlayer.voiceError .voiceWave{opacity:.35}.voiceNotePlayer.voiceBlocked .voiceNotePlay{box-shadow:0 0 0 3px rgba(37,211,102,.15)}
.inlineMediaFile{gap:9px}.inlineMediaActions{display:flex;gap:5px;margin-left:auto}.inlineMediaActions a{padding:4px 7px;border:1px solid rgba(140,166,176,.22);border-radius:8px;color:#b9c9cf;text-decoration:none;font-size:8px;font-weight:800}
.chatMediaLightboxDownload{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 11px;border:1px solid rgba(255,255,255,.17);border-radius:9px;background:rgba(255,255,255,.07);color:#fff;text-decoration:none;font-size:10px;font-weight:800}
.backupMiniV5{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}.backupMiniV5>div:first-child{min-width:0}.backupMiniV5>div:first-child span{display:block;margin-top:2px}.backupMiniActions{display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-end}.backupMiniActions form{margin:0}.backupMiniActions .dangerbtn{background:#4a1d23;border-color:#6f3039;color:#ffc4c9}
.repairToolGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}.repairToolGrid form{margin:0}.repairToolGrid button{width:100%;height:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:11px 12px;text-align:left}.repairToolGrid button strong{font-size:10px}.repairToolGrid button small{color:var(--muted);font-size:8px;line-height:1.35}.diagnosticGridSecondary{margin-top:-6px}.diagNotice{margin:0 0 10px}.mediaCardV45{content-visibility:auto;contain-intrinsic-size:360px}.mediaDownloadBtn{font-weight:800}
.statusViewerCanvas{overscroll-behavior:none;touch-action:pan-y}.statusContactRow,.statusProfileDay,.statusPersonCard{touch-action:manipulation}.statusPrimaryTabs,.statusArchiveTabs{scrollbar-width:none}.statusPrimaryTabs::-webkit-scrollbar,.statusArchiveTabs::-webkit-scrollbar{display:none}
@media(max-width:900px){.repairToolGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.backupMiniV5{grid-template-columns:1fr}.backupMiniActions{justify-content:flex-start}}
@media(max-width:780px){
  .voiceNotePlayer{grid-template-columns:32px minmax(82px,1fr) auto auto auto!important;width:min(310px,80vw)!important}.voiceSpeed{min-width:31px;padding:0 5px}.voiceDownload{width:27px;height:27px}.voiceTime{font-size:8px}
  .inlineMediaActions{flex-direction:column}.inlineMediaActions a{padding:3px 6px}
  .statusPrimaryTabs{position:sticky;top:0;z-index:18;background:var(--bg);padding:6px 10px 7px;margin:0 -1px 8px}.statusArchiveTabs{position:sticky;top:56px;z-index:17;background:var(--bg);padding:6px 10px;margin:0 0 8px;overflow-x:auto}
  .statusViewerHead{padding-top:max(8px,env(safe-area-inset-top));padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}.statusViewerHint{display:none!important}.statusViewerProgress{padding-top:max(8px,env(safe-area-inset-top))}
  .statusContactRow{min-height:74px}.statusRowBody small{line-height:1.35}.statusProfileMetrics{scroll-snap-type:x proximity}.statusProfileMetrics span{scroll-snap-align:start}
  .repairToolGrid{grid-template-columns:1fr 1fr}.backupMiniActions{gap:6px}.backupMiniActions .smallBtn{min-height:34px}
}
@media(max-width:430px){.repairToolGrid{grid-template-columns:1fr}.voiceNotePlayer{width:min(285px,78vw)!important}.chatMediaLightboxMeta{gap:6px!important;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
.proBubble.reactionPulse{animation:reactionPulse .42s ease}@keyframes reactionPulse{0%{transform:scale(1)}45%{transform:scale(1.012);box-shadow:0 0 0 2px rgba(37,211,102,.16)}100%{transform:scale(1)}}

/* v5.2.1 Chat insights: links, voice history, calendar, storage by contact, alerts */
.contactInfoTools{display:grid;gap:6px;margin-top:14px}.contactInfoTools>a{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px 11px;border:1px solid #20333c;border-radius:11px;background:#101f25;color:#dce8eb;text-decoration:none}.contactInfoTools>a:hover{border-color:#31505c;background:#13252c}.contactInfoToolIcon{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:#172a32;color:#63dea4;font-size:15px;font-weight:900}.contactInfoTools strong,.contactInfoTools small{display:block}.contactInfoTools strong{font-size:11px}.contactInfoTools small{margin-top:2px;color:#879aa3;font-size:8px}.contactInfoTools small b{color:#b8c7cd}.contactInfoTools>a>i{font-style:normal;color:#71868e;font-size:19px}.chatDateMode{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 14px;border-bottom:1px solid #203039;background:#102027;color:#a9bac1;font-size:10px}.chatDateMode>div{display:flex;gap:10px}.chatDateMode a{color:#5cdda0;text-decoration:none;font-weight:800}
.featureHero,.storageHero,.alertsHero{align-items:center}.featureHero>.button,.alertsHero form{flex:0 0 auto}.featureListPanel{padding:0;overflow:hidden}.sharedLinksList,.voiceHistoryList,.storageContactList,.systemAlertList{display:grid}.sharedLinkRow,.voiceHistoryRow,.storageContactRow,.systemAlertRow{display:grid;align-items:center;gap:12px;padding:13px 15px;border-bottom:1px solid #1f3038}.sharedLinkRow:last-child,.voiceHistoryRow:last-child,.storageContactRow:last-child,.systemAlertRow:last-child{border-bottom:0}.sharedLinkRow{grid-template-columns:38px minmax(0,1fr) auto}.sharedLinkIcon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:#11252c;color:#58d99a;font-size:18px;font-weight:900}.sharedLinkMain{min-width:0}.sharedLinkMain strong,.sharedLinkMain a,.sharedLinkMain small{display:block}.sharedLinkMain strong{font-size:12px}.sharedLinkMain a{margin-top:3px;color:#58d99a;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sharedLinkMain small{margin-top:4px;color:var(--muted);font-size:9px}.voiceHistoryRow{grid-template-columns:150px minmax(250px,1fr) auto}.voiceHistoryMeta strong,.voiceHistoryMeta span,.voiceHistoryMeta small{display:block}.voiceHistoryMeta strong{font-size:11px}.voiceHistoryMeta span{margin-top:3px;color:#a7b7bd;font-size:9px}.voiceHistoryMeta small{margin-top:2px;color:var(--muted);font-size:8px}.voiceHistoryRow .voiceNotePlayer{width:100%!important;min-width:0!important}.compactUnavailable{min-height:58px!important;padding:10px!important}.calendarPanel{max-width:860px;margin-left:auto;margin-right:auto}.calendarHead{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin-bottom:16px}.calendarHead>div{text-align:center}.calendarHead strong,.calendarHead small{display:block}.calendarHead strong{font-size:18px}.calendarHead small{margin-top:3px;color:var(--muted);font-size:9px}.calendarGrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}.calendarWeekdays{margin-bottom:6px;color:#81949d;text-align:center;font-size:9px;font-weight:800}.calendarDay,.calendarBlank{min-height:92px;border-radius:12px}.calendarDay{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:9px;border:1px solid #1e3139;background:#0e1a20;color:#a9bac1;text-decoration:none}.calendarDay>span{font-size:11px}.calendarDay strong{font-size:18px;color:#f0f5f6}.calendarDay small{font-size:8px;color:#81949d}.calendarDay.active{border-color:#2c5a4b;background:#10261f}.calendarDay.active:hover{background:#143026;border-color:#3b7a63}.calendarDay.active:after{content:"";width:6px;height:6px;border-radius:50%;background:#25d366;position:absolute}.calendarDay.active{position:relative}.calendarDay.active:after{right:8px;top:8px}.calendarLegend{display:flex;justify-content:space-between;gap:10px;margin-top:13px;color:var(--muted);font-size:9px}.calendarLegend i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#25d366;margin-right:5px}.storageContactPanel{padding:0;overflow:hidden}.storageContactRow{grid-template-columns:42px minmax(0,1fr) auto auto;text-decoration:none;color:inherit}.storageContactAvatar{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#173039;color:#dce7eb;font-weight:900}.storageContactRow>div:nth-child(2){min-width:0}.storageContactRow strong,.storageContactRow small{display:block}.storageContactRow strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.storageContactRow small{margin-top:3px;color:var(--muted);font-size:9px}.storageContactRow>b{font-size:11px;color:#72e0aa}.storageContactRow>span{color:#728891;font-size:20px}.alertStatsGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}.alertStatsGrid>div{padding:14px;border:1px solid #20333c;border-radius:13px;background:#0e1b21}.alertStatsGrid span,.alertStatsGrid strong{display:block}.alertStatsGrid span{color:var(--muted);font-size:9px}.alertStatsGrid strong{margin-top:4px;font-size:22px}.alertsPanel{padding:0;overflow:hidden}.systemAlertRow{grid-template-columns:10px minmax(0,1fr) auto}.systemAlertMark{width:8px;height:8px;border-radius:50%;background:#e4a83a;box-shadow:0 0 0 5px rgba(228,168,58,.1)}.systemAlertRow.error .systemAlertMark{background:#ff6470;box-shadow:0 0 0 5px rgba(255,100,112,.1)}.systemAlertRow.resolved{opacity:.6}.systemAlertTop{display:flex;align-items:center;gap:8px}.systemAlertTop strong{font-size:11px}.systemAlertRow p{margin:4px 0;color:#b8c7cd;font-size:10px}.systemAlertRow small{color:var(--muted);font-size:8px}.systemAlertBadge{min-width:18px;height:18px;display:inline-grid;place-items:center;margin-left:auto;padding:0 5px;border-radius:999px;background:#d69a31;color:#14191c;font-size:8px;font-weight:900}.systemAlertBadge.critical{background:#ff6470;color:#fff}.globalMoreLinks>a{position:relative}.alertFilters{grid-template-columns:minmax(180px,1.4fr) repeat(3,minmax(120px,.7fr)) auto}
@media(max-width:780px){.contactInfoTools{grid-template-columns:repeat(2,minmax(0,1fr))}.contactInfoTools>a{grid-template-columns:30px minmax(0,1fr);padding:9px}.contactInfoTools>a>i{display:none}.featureHero,.storageHero,.alertsHero{align-items:flex-start}.featureHero>.button{width:100%;text-align:center}.sharedLinkRow{grid-template-columns:34px minmax(0,1fr)}.sharedLinkRow>.button{grid-column:2;width:max-content}.voiceHistoryRow{grid-template-columns:1fr}.voiceHistoryRow>.button{width:max-content}.calendarPanel{padding:12px}.calendarGrid{gap:3px}.calendarDay,.calendarBlank{min-height:74px}.calendarDay{padding:7px}.calendarDay strong{font-size:15px}.calendarDay small{font-size:7px}.calendarLegend{flex-direction:column}.storageContactRow{grid-template-columns:38px minmax(0,1fr) auto}.storageContactAvatar{width:38px;height:38px}.storageContactRow>span{display:none}.alertStatsGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.alertFilters{grid-template-columns:1fr}.systemAlertRow{grid-template-columns:8px minmax(0,1fr)}.systemAlertRow form{grid-column:2}.chatDateMode{align-items:flex-start;flex-direction:column}.chatDateMode>div{width:100%;justify-content:space-between}}
@media(max-width:430px){.contactInfoTools{grid-template-columns:1fr}.calendarDay,.calendarBlank{min-height:64px}.calendarDay small{display:none}.calendarDay strong{font-size:13px}.storageContactRow>b{font-size:9px}.sharedLinkMain a{max-width:72vw}}
.systemAlertBadge[hidden]{display:none!important}

/* v5.2.1 chat flow: call events, jump-to-latest and long-thread polish */
.callEventBubble{min-width:210px!important;max-width:min(78%,420px)!important;padding:7px 9px!important;background:rgba(18,29,37,.94)!important;border-color:#30434f!important}.proBubbleRow.mine .callEventBubble{background:rgba(18,57,45,.94)!important;border-color:#2b6b55!important}.callEventCard{display:flex;align-items:center;gap:10px;min-height:42px}.callEventIcon{width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:grid;place-items:center;background:rgba(37,211,102,.12);color:#58d68d;font-size:17px;font-weight:900}.callEventText{min-width:0;display:flex;flex-direction:column;gap:2px}.callEventText strong{font-size:12px;line-height:1.25;color:#e8eef1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.callEventText small{font-size:9px;color:#81949e}.callEventBubble .bubbleFooter{margin-top:2px}.callEventBubble:hover{filter:brightness(1.04)}
.newMessageJump{display:flex;align-items:center;gap:6px;min-height:34px;padding:6px 10px;z-index:6}.jumpLatestIcon{font-size:15px;line-height:1}.jumpLatestLabel{font-size:10px;font-weight:800}.jumpLatestCount{display:none;min-width:17px;height:17px;padding:0 4px;border-radius:999px;place-items:center;background:#25d366;color:#07150d;font-size:9px;font-weight:900}.jumpLatestCount.show{display:grid}
.threadInner{contain:layout style}.proBubbleRow{contain:layout paint style;content-visibility:auto;contain-intrinsic-size:auto 64px}.inlineMediaPreview img{content-visibility:auto}
@media(max-width:780px){.callEventBubble{min-width:190px!important;max-width:88%!important}.callEventCard{min-height:38px}.callEventIcon{width:31px;height:31px;flex-basis:31px;font-size:15px}.newMessageJump .jumpLatestLabel{display:none}.newMessageJump .jumpLatestIcon{font-size:18px!important}.newMessageJump .jumpLatestCount{position:absolute;right:-3px;top:-3px;border:2px solid #111b21}.newMessageJump:before{content:none!important}}

/* v5.2.2 Chat info scoped Deleted + Starred popup */
.contactInfoCard{isolation:isolate}
.contactStarredPopup{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;padding:18px;background:#0d181d;transform:translateX(105%);transition:transform .2s ease;pointer-events:none;overflow:hidden}
.contactStarredPopup.open{transform:translateX(0);pointer-events:auto}
.contactStarredHead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid #203139}.contactStarredHead>div{min-width:0}.contactStarredHead strong,.contactStarredHead small{display:block}.contactStarredHead strong{font-size:16px}.contactStarredHead small{margin-top:2px;color:var(--muted);font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contactStarredClose{width:36px;height:36px;min-height:36px;padding:0;border:0;border-radius:50%;background:#17262d;color:#c6d2d7;font-size:21px}.contactStarredList{flex:1;min-height:0;overflow:auto;padding:10px 0;display:grid;align-content:start;gap:6px}.contactStarredMessage{width:100%;display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:9px;align-items:center;padding:10px;border:1px solid #20333c;border-radius:12px;background:#101f25;color:var(--text);text-align:left;cursor:pointer}.contactStarredMessage:hover{background:#13262e;border-color:#2b4651}.contactStarredIcon{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:rgba(245,198,93,.1);color:#f5c65d;font-size:15px}.contactStarredCopy{min-width:0}.contactStarredCopy strong,.contactStarredCopy small,.contactStarredCopy em{display:block}.contactStarredCopy strong{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contactStarredCopy small{margin-top:3px;color:var(--muted);font-size:8px}.contactStarredCopy em{margin-top:3px;color:#cf9aa1;font-size:7px;font-style:normal}.contactStarredChevron{color:#68808a;font-size:18px}.contactStarredEmpty{padding:32px 12px;text-align:center;color:var(--muted);font-size:10px}.deletedChatScope{margin-top:8px!important;color:#8fa2aa!important;font-size:9px!important}.deletedChatScope strong{color:#dce7ea}.deletedChatScope a{color:#65dda0}
@media(max-width:780px){.contactStarredPopup{padding:14px;border-radius:22px 22px 0 0}.contactStarredMessage{min-height:58px}}

/* v5.2.3 Starred popup back navigation */
.contactStarredHeadMain{display:flex;align-items:center;min-width:0;gap:9px}.contactStarredHeadMain>div{min-width:0}.contactStarredBack{width:38px;height:38px;min-width:38px;min-height:38px;padding:0;border:1px solid #29404a;border-radius:50%;background:#13242b;color:#d8e3e7;font-size:30px;line-height:1;display:grid;place-items:center;cursor:pointer}.contactStarredBack:hover,.contactStarredBack:focus-visible{background:#193039;border-color:#3a5966;outline:none}.contactStarredHead{position:sticky;top:0;z-index:2;background:#0d181d}.contactStarredHeadMain strong{font-size:16px}.contactStarredHeadMain small{margin-top:2px;color:var(--muted);font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:780px){.contactStarredBack{width:42px;height:42px;min-width:42px;min-height:42px}.contactStarredClose{width:42px;height:42px;min-width:42px;min-height:42px}}


/* v5.2.4 Starred desktop back visibility */
.contactStarredBack{visibility:visible!important;opacity:1!important;display:inline-flex!important;align-items:center;justify-content:center;gap:7px;position:relative;z-index:3;flex:0 0 auto}
.contactStarredBackIcon{display:block;font-size:18px;line-height:1;font-weight:800}
.contactStarredBackLabel{display:block;font-size:10px;line-height:1;font-weight:850;letter-spacing:.01em}
@media(min-width:781px){
  .contactStarredBack{width:auto!important;min-width:76px!important;height:36px!important;min-height:36px!important;padding:0 12px!important;border-radius:10px!important}
  .contactStarredHeadMain{overflow:visible!important;flex:1 1 auto}
  .contactStarredHead{overflow:visible!important}
}
@media(max-width:780px){
  .contactStarredBack{width:42px!important;min-width:42px!important;height:42px!important;min-height:42px!important;padding:0!important;border-radius:50%!important}
  .contactStarredBackLabel{display:none}
  .contactStarredBackIcon{font-size:22px}
}

/* v5.2.5 Starred popup structural desktop fix */
.contactInfoDrawer > .contactStarredPopup{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:auto;
  width:min(390px,92vw);
  height:100%;
  box-sizing:border-box;
  z-index:20;
  padding:18px;
  border-left:1px solid #233640;
  background:#0d181d;
  box-shadow:-25px 0 70px rgba(0,0,0,.35);
  overflow:hidden;
  transform:translateX(104%);
  transition:transform .22s ease;
  pointer-events:none;
}
.contactInfoDrawer > .contactStarredPopup.open{transform:translateX(0);pointer-events:auto}
.contactInfoDrawer > .contactStarredPopup .contactStarredHead{position:relative;top:auto;flex:0 0 auto;visibility:visible!important;opacity:1!important;display:flex!important}
.contactInfoDrawer > .contactStarredPopup .contactStarredList{flex:1 1 auto;min-height:0;overflow:auto}
@media(max-width:780px){
  .contactInfoDrawer > .contactStarredPopup{
    top:auto;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    height:auto;
    max-height:82dvh;
    padding:14px;
    border-left:0;
    border-top:1px solid #263841;
    border-radius:22px 22px 0 0;
    transform:translateY(104%);
  }
  .contactInfoDrawer > .contactStarredPopup.open{transform:translateY(0)}
}

/* v5.2.6 compact Starred popup on desktop */
@media(min-width:781px){
  .contactInfoDrawer > .contactStarredPopup{
    position:absolute!important;
    top:92px!important;
    right:18px!important;
    bottom:auto!important;
    left:auto!important;
    width:min(360px,calc(100vw - 36px))!important;
    height:auto!important;
    min-height:0!important;
    max-height:min(520px,calc(100dvh - 128px))!important;
    padding:0!important;
    border:1px solid #273b45!important;
    border-radius:16px!important;
    background:#0d181d!important;
    box-shadow:0 18px 60px rgba(0,0,0,.5)!important;
    overflow:hidden!important;
    opacity:0;
    transform:translateY(-8px) scale(.985)!important;
    transform-origin:top right;
    transition:opacity .16s ease,transform .18s ease!important;
    pointer-events:none;
  }
  .contactInfoDrawer > .contactStarredPopup.open{
    opacity:1;
    transform:translateY(0) scale(1)!important;
    pointer-events:auto;
  }
  .contactInfoDrawer > .contactStarredPopup .contactStarredHead{
    padding:11px 12px!important;
    border-bottom:1px solid #203139!important;
    background:#0d181d!important;
    flex:0 0 auto;
  }
  .contactInfoDrawer > .contactStarredPopup .contactStarredHeadMain{gap:8px!important}
  .contactInfoDrawer > .contactStarredPopup .contactStarredHeadMain strong{font-size:13px!important}
  .contactInfoDrawer > .contactStarredPopup .contactStarredHeadMain small{font-size:8px!important}
  .contactInfoDrawer > .contactStarredPopup .contactStarredBack{
    min-width:66px!important;
    width:auto!important;
    height:32px!important;
    min-height:32px!important;
    padding:0 10px!important;
    border-radius:9px!important;
  }
  .contactInfoDrawer > .contactStarredPopup .contactStarredBackIcon{font-size:16px!important}
  .contactInfoDrawer > .contactStarredPopup .contactStarredBackLabel{font-size:9px!important}
  .contactInfoDrawer > .contactStarredPopup .contactStarredClose{
    width:32px!important;
    height:32px!important;
    min-height:32px!important;
    font-size:18px!important;
  }
  .contactInfoDrawer > .contactStarredPopup .contactStarredList{
    flex:0 1 auto!important;
    min-height:0!important;
    max-height:min(448px,calc(100dvh - 200px))!important;
    padding:10px 12px 12px!important;
    overflow:auto!important;
  }
  .contactInfoDrawer > .contactStarredPopup .contactStarredEmpty{
    min-height:104px;
    padding:18px 12px!important;
    display:grid;
    place-items:center;
    border:1px dashed #20333c;
    border-radius:12px;
    background:#101d23;
    text-align:center;
  }
  .contactInfoDrawer > .contactStarredPopup .contactStarredMessage{padding:9px!important;border-radius:10px!important}
}

/* v5.2.7 Shared links + Voice notes compact chat-info popups */
.contactInsightPopup{position:absolute;z-index:21;display:flex;flex-direction:column;background:#0d181d;border:1px solid #273b45;overflow:hidden;pointer-events:none;opacity:0}.contactInsightPopup.open{pointer-events:auto;opacity:1}.contactInsightHead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:0 0 auto;padding:11px 12px;border-bottom:1px solid #203139;background:#0d181d}.contactInsightHeadMain{display:flex;align-items:center;gap:8px;min-width:0;flex:1}.contactInsightHeadMain>div{min-width:0}.contactInsightHead strong,.contactInsightHead small{display:block}.contactInsightHead strong{font-size:13px}.contactInsightHead small{margin-top:2px;color:var(--muted);font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contactInsightBack{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:66px;height:32px;min-height:32px;padding:0 10px;border:1px solid #29404a;border-radius:9px;background:#13242b;color:#d8e3e7;font-size:9px;font-weight:850;cursor:pointer}.contactInsightBack>span:first-child{font-size:16px;line-height:1}.contactInsightBack:hover,.contactInsightBack:focus-visible{background:#193039;border-color:#3a5966;outline:none}.contactInsightClose{width:32px;height:32px;min-height:32px;padding:0;border:0;border-radius:50%;background:#17262d;color:#c6d2d7;font-size:18px;cursor:pointer}.contactInsightList{min-height:0;overflow:auto;padding:10px 12px 12px;display:grid;align-content:start;gap:7px}.contactInsightEmpty{min-height:104px;padding:18px 12px;display:grid;place-items:center;border:1px dashed #20333c;border-radius:12px;background:#101d23;color:var(--muted);text-align:center;font-size:10px}.contactLinkPopupRow{display:grid;grid-template-columns:32px minmax(0,1fr) 30px;gap:9px;align-items:center;padding:9px;border:1px solid #20333c;border-radius:11px;background:#101f25}.contactLinkPopupIcon{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:rgba(37,211,102,.1);color:#5ade9a;font-size:15px;font-weight:900}.contactLinkPopupMain{min-width:0}.contactLinkPopupMain strong,.contactLinkPopupMain a,.contactLinkPopupMain small{display:block}.contactLinkPopupMain strong{font-size:10px;color:#e5eef1}.contactLinkPopupMain a{margin-top:3px;color:#58d99a;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}.contactLinkPopupMain a:hover{text-decoration:underline}.contactLinkPopupMain small{margin-top:3px;color:var(--muted);font-size:8px}.contactPopupJump{width:30px;height:30px;min-height:30px;padding:0;border:1px solid #2a404a;border-radius:9px;background:#13242b;color:#8399a2;font-size:18px;cursor:pointer}.contactPopupJump:hover{background:#193039;color:#cfe0e6}.contactVoicePopupRow{display:grid;grid-template-columns:minmax(88px,110px) minmax(0,1fr) 30px;gap:8px;align-items:center;padding:9px;border:1px solid #20333c;border-radius:11px;background:#101f25}.contactVoicePopupMeta{min-width:0}.contactVoicePopupMeta strong,.contactVoicePopupMeta small{display:block}.contactVoicePopupMeta strong{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contactVoicePopupMeta small{margin-top:3px;color:var(--muted);font-size:8px}.contactVoicePopupRow .voiceNotePlayer{width:100%!important;min-width:0!important;grid-template-columns:30px minmax(72px,1fr) auto auto auto!important;padding:5px 6px!important;gap:5px!important}.contactVoicePopupRow .voiceNotePlay{width:30px;height:30px;min-height:30px}.contactVoicePopupRow .voiceWave{min-width:70px}.contactVoicePopupRow .voiceTime{font-size:8px}.contactVoiceUnavailable{min-width:0;padding:7px 9px;border-radius:9px;background:#0d191e}.contactVoiceUnavailable strong,.contactVoiceUnavailable small{display:block}.contactVoiceUnavailable strong{font-size:9px}.contactVoiceUnavailable small{margin-top:2px;color:var(--muted);font-size:7px}
@media(min-width:781px){.contactInfoDrawer>.contactInsightPopup{top:92px;right:18px;bottom:auto;left:auto;width:min(420px,calc(100vw - 36px));height:auto;max-height:min(560px,calc(100dvh - 128px));border-radius:16px;box-shadow:0 18px 60px rgba(0,0,0,.5);transform:translateY(-8px) scale(.985);transform-origin:top right;transition:opacity .16s ease,transform .18s ease}.contactInfoDrawer>.contactInsightPopup.open{transform:translateY(0) scale(1)}.contactInfoDrawer>.contactInsightPopup .contactInsightList{max-height:min(488px,calc(100dvh - 200px))}.contactInfoDrawer>.contactVoicePopup{width:min(520px,calc(100vw - 36px))}}
@media(max-width:780px){.contactInfoDrawer>.contactInsightPopup{top:auto;right:0;bottom:0;left:0;width:100%;height:auto;max-height:82dvh;border-left:0;border-right:0;border-bottom:0;border-radius:22px 22px 0 0;transform:translateY(104%);transition:opacity .16s ease,transform .2s ease}.contactInfoDrawer>.contactInsightPopup.open{transform:translateY(0)}.contactInsightHead{padding:12px 14px}.contactInsightBack{width:42px;min-width:42px;height:42px;min-height:42px;padding:0;border-radius:50%}.contactInsightBackLabel{display:none}.contactInsightClose{width:42px;height:42px;min-height:42px}.contactInsightList{padding:10px 12px calc(16px + env(safe-area-inset-bottom))}.contactVoicePopupRow{grid-template-columns:1fr 30px}.contactVoicePopupMeta{grid-column:1}.contactVoicePopupRow .voiceNotePlayer,.contactVoiceUnavailable{grid-column:1}.contactVoicePopupRow>.contactPopupJump{grid-column:2;grid-row:1 / span 2}.contactLinkPopupRow{grid-template-columns:30px minmax(0,1fr) 30px}}

/* v5.2.8 — Calendar + Storage chat-info popups */
.contactCalendarBody,.contactStorageBody{gap:10px!important}
.contactCalendarNav{display:grid;grid-template-columns:36px minmax(0,1fr) 36px;align-items:center;gap:8px;padding:2px 0 4px}
.contactCalendarNavBtn{width:36px;height:36px;min-height:36px;padding:0;border:1px solid #29404a;border-radius:10px;background:#13242b;color:#d8e3e7;font-size:24px;line-height:1;cursor:pointer}
.contactCalendarNavBtn:hover,.contactCalendarNavBtn:focus-visible{background:#193039;border-color:#3a5966;outline:none}
.contactCalendarMonth{text-align:center;min-width:0}.contactCalendarMonth strong,.contactCalendarMonth small{display:block}.contactCalendarMonth strong{font-size:13px;color:#e7f0f3}.contactCalendarMonth small{margin-top:2px;color:var(--muted);font-size:8px}
.contactCalendarGrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.contactCalendarWeekdays{padding:0 2px}.contactCalendarWeekdays span{text-align:center;color:#78909a;font-size:7px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.contactCalendarDays{align-items:stretch}
.contactCalendarBlank{min-height:48px}
.contactCalendarDay{min-width:0;min-height:48px;padding:6px 4px;border:1px solid #20333c;border-radius:10px;background:#0f1c22;color:#718791;text-decoration:none;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:2px;overflow:hidden}
.contactCalendarDay.active{background:#10241f;border-color:#245b43;color:#e6f5ed;cursor:pointer}
.contactCalendarDay.active:hover,.contactCalendarDay.active:focus-visible{background:#143127;border-color:#2f7957;outline:none}
.contactCalendarDayNum{font-size:9px;font-weight:800}.contactCalendarDay strong{font-size:11px;line-height:1;color:#58d99a}.contactCalendarDay small{width:100%;font-size:6px;line-height:1.15;color:#8da1a9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contactCalendarHint{padding:8px 10px;border-radius:9px;background:#0f1b20;color:#78909a;font-size:8px;text-align:center}
.contactStorageHero{padding:14px;border:1px solid #234039;border-radius:13px;background:linear-gradient(135deg,#10261f,#102026)}
.contactStorageHero>div>span,.contactStorageHero>div>strong,.contactStorageHero>div>small{display:block}.contactStorageHero>div>span{font-size:8px;color:#7f9892;text-transform:uppercase;letter-spacing:.07em;font-weight:800}.contactStorageHero>div>strong{margin-top:4px;font-size:24px;line-height:1;color:#eaf6f0}.contactStorageHero>div>small{margin-top:6px;color:#91a6ad;font-size:8px}
.contactStorageSectionTitle{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:3px 2px}.contactStorageSectionTitle strong{font-size:10px;color:#dce8ec}.contactStorageSectionTitle small{font-size:7px;color:#71858e;text-align:right}
.contactStorageBreakdown,.contactStorageFiles{display:grid;gap:6px}
.contactStorageTypeRow{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:8px;align-items:center;padding:9px 10px 12px;border:1px solid #20333c;border-radius:11px;background:#101f25;overflow:hidden}
.contactStorageTypeIcon,.contactStorageFileIcon{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:rgba(37,211,102,.09);color:#58d99a;font-size:13px;font-weight:900}
.contactStorageTypeCopy{min-width:0}.contactStorageTypeCopy strong,.contactStorageTypeCopy small{display:block}.contactStorageTypeCopy strong{font-size:9px;color:#e0eaee}.contactStorageTypeCopy small{margin-top:2px;font-size:7px;color:#78909a}.contactStorageTypeRow>b{font-size:9px;color:#dce8ec}
.contactStorageBar{position:absolute;left:10px;right:10px;bottom:5px;height:3px;border-radius:999px;background:#172a32;overflow:hidden}.contactStorageBar::after{content:"";display:block;width:var(--storage-pct,0%);height:100%;border-radius:inherit;background:#25d366}
.contactStorageFile{width:100%;display:grid;grid-template-columns:30px minmax(0,1fr) auto 18px;gap:8px;align-items:center;padding:9px;border:1px solid #20333c;border-radius:11px;background:#101f25;color:inherit;text-align:left;cursor:pointer}.contactStorageFile:hover,.contactStorageFile:focus-visible{background:#13272e;border-color:#2a4853;outline:none}
.contactStorageFileCopy{min-width:0}.contactStorageFileCopy strong,.contactStorageFileCopy small{display:block}.contactStorageFileCopy strong{font-size:9px;color:#e0eaee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contactStorageFileCopy small{margin-top:2px;color:#78909a;font-size:7px}.contactStorageFile>b{font-size:8px;color:#9fb2ba}.contactStorageChevron{color:#607b86;font-size:16px;text-align:center}
.contactStorageFooter{padding-top:2px;text-align:center}.contactStorageFooter a{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:0 11px;border:1px solid #29404a;border-radius:9px;background:#13242b;color:#73dca1;font-size:8px;font-weight:800;text-decoration:none}.contactStorageFooter a:hover{background:#193039}
@media(min-width:781px){.contactInfoDrawer>.contactCalendarPopup{width:min(470px,calc(100vw - 36px))}.contactInfoDrawer>.contactStoragePopup{width:min(460px,calc(100vw - 36px))}.contactInfoDrawer>.contactCalendarPopup .contactInsightList,.contactInfoDrawer>.contactStoragePopup .contactInsightList{max-height:min(500px,calc(100dvh - 200px))}}
@media(max-width:780px){.contactCalendarDay{min-height:52px;padding:6px 4px}.contactCalendarDayNum{font-size:10px}.contactCalendarDay strong{font-size:12px}.contactCalendarDay small{font-size:7px}.contactStorageHero>div>strong{font-size:26px}.contactStorageFile{min-height:54px}.contactCalendarNavBtn{width:40px;height:40px;min-height:40px}}

/* v5.2.10 — compact message receipt popover */
.messageQuickInspectorBackdrop{background:rgba(0,0,0,.08)!important;backdrop-filter:none!important}
.messageQuickInspectorCard{width:min(330px,calc(100vw - 24px))!important;max-height:min(420px,calc(100vh - 100px))!important;overflow:hidden!important;border-radius:16px!important;background:#111d23!important;box-shadow:0 18px 55px rgba(0,0,0,.42)!important}
.messageQuickInspectorCard>header{position:relative!important;padding:11px 12px!important;background:#111d23!important}
.messageQuickInspectorCard header strong{font-size:13px!important}.messageQuickInspectorCard header small{font-size:9px!important}
.messageQuickInspectorClose{width:30px!important;height:30px!important;min-height:30px!important;font-size:17px!important}
.messageQuickInspectorBody{max-height:340px;overflow:auto;padding:11px!important}
.quickReceiptPreview{padding:9px 10px;border:1px solid #22343d;border-radius:11px;background:#0c171c}
.quickReceiptPreview strong,.quickReceiptPreview small{display:block}.quickReceiptPreview strong{font-size:12px;line-height:1.35;white-space:pre-wrap;overflow-wrap:anywhere}.quickReceiptPreview small{margin-top:4px;color:#90a1a9;font-size:9px}
.quickReceiptGrid{display:grid;gap:6px;margin-top:9px}.quickReceiptRow{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:center;padding:8px 9px;border:1px solid #21333c;border-radius:10px;background:#0d171c}.quickReceiptIcon{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;font-size:13px;font-weight:900;background:#17262d;color:#7f949d}.quickReceiptRow.done .quickReceiptIcon{background:rgba(37,211,102,.11);color:#66dda0}.quickReceiptRow.seen .quickReceiptIcon{background:rgba(83,189,235,.12);color:#77d6ff}.quickReceiptText strong,.quickReceiptText small{display:block}.quickReceiptText strong{font-size:10px}.quickReceiptText small{margin-top:2px;color:#8fa1a9;font-size:9px}.quickReceiptRow.pending{opacity:.78}
.quickReceiptActions{display:flex;justify-content:flex-end;margin-top:9px}.quickReceiptDetails{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:6px 10px;border:1px solid #2b4049;border-radius:9px;background:#17242a;color:#b9c8ce;font-size:9px;font-weight:750;text-decoration:none}.quickReceiptDetails:hover{background:#1b2c33;color:#e4ecef}
@media(max-width:780px){.messageQuickInspectorBackdrop{background:rgba(0,0,0,.26)!important}.messageQuickInspectorCard{left:10px!important;right:10px!important;bottom:10px!important;top:auto!important;width:auto!important;max-height:58dvh!important;border-radius:18px!important}.messageQuickInspectorBody{max-height:46dvh}.quickReceiptRow{padding:9px 10px}.quickReceiptDetails{min-height:36px;font-size:10px}}

/* v5.2.26 audited WhatsApp-style message receipts */
/*
   Receipt semantics:
   sent      = one gray check
   delivered = two gray checks
   read      = two blue checks
   One self-contained SVG is used per state so double checks cannot overlap or
   inherit old glyph styles. Bubble, sidebar preview and Message info use the
   same visual source of truth.
*/
.receiptIcon{
  display:inline-block!important;
  flex:0 0 auto!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:contain!important;
  vertical-align:middle!important;
  font-size:0!important;
  line-height:0!important;
}
.receiptIcon--sent{
  width:14px!important;
  min-width:14px!important;
  height:10px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1.2 4.7 4 7.5 10.8 1.4' fill='none' stroke='%238696a0' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
}
.receiptIcon--delivered{
  width:18px!important;
  min-width:18px!important;
  height:11px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 11'%3E%3Cpath d='M1.2 5.5 4.2 8.4 10.4 2.2' fill='none' stroke='%238696a0' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.2 5.5 10.2 8.4 18.7 1.3' fill='none' stroke='%238696a0' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
}
.receiptIcon--read{
  width:18px!important;
  min-width:18px!important;
  height:11px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 11'%3E%3Cpath d='M1.2 5.5 4.2 8.4 10.4 2.2' fill='none' stroke='%2353bdeb' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.2 5.5 10.2 8.4 18.7 1.3' fill='none' stroke='%2353bdeb' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
}

/* Chat bubble footer: timestamp and checks sit on the same WhatsApp-like baseline. */
.bubbleMetaGroup{
  display:inline-flex!important;
  align-items:flex-end!important;
  justify-content:flex-end!important;
  gap:2px!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.bubbleMetaGroup time{
  line-height:1!important;
  transform:translateY(-.1px)!important;
}
.bubbleMetaGroup .receiptIcon{
  margin-left:0!important;
  transform:translateY(1px)!important;
  background-position:left bottom!important;
}

/* Chat-list preview: slightly smaller than the in-bubble receipt, as WhatsApp does. */
.chatPreviewReceiptIcon.receiptIcon--sent{
  width:13px!important;
  min-width:13px!important;
  height:9px!important;
  margin-right:3px!important;
  transform:translateY(.5px)!important;
}
.chatPreviewReceiptIcon.receiptIcon--delivered,
.chatPreviewReceiptIcon.receiptIcon--read{
  width:17px!important;
  min-width:17px!important;
  height:10px!important;
  margin-right:3px!important;
  transform:translateY(.5px)!important;
}

/* Message info: neutral sent/delivered indicators, blue only after read. */
.quickReceiptRow.sent .quickReceiptIcon.receiptIcon,
.quickReceiptRow.delivered .quickReceiptIcon.receiptIcon,
.quickReceiptRow.seen .quickReceiptIcon.receiptIcon{
  width:30px!important;
  min-width:30px!important;
  height:30px!important;
  display:block!important;
  border-radius:50%!important;
  transform:none!important;
  background-position:center!important;
}
.quickReceiptRow.sent .quickReceiptIcon.receiptIcon--sent{
  background-size:14px 10px!important;
  background-color:rgba(134,150,160,.11)!important;
}
.quickReceiptRow.delivered .quickReceiptIcon.receiptIcon--delivered{
  background-size:19px 11px!important;
  background-color:rgba(134,150,160,.11)!important;
}
.quickReceiptRow.seen .quickReceiptIcon.receiptIcon--read{
  background-size:19px 11px!important;
  background-color:rgba(83,189,235,.13)!important;
}
.quickReceiptRow.sent .quickReceiptText small,
.quickReceiptRow.delivered .quickReceiptText small{color:#9aaab3!important}
.quickReceiptRow.seen .quickReceiptText small{color:#9fdcff!important}
.quickReceiptRow.pending .quickReceiptIcon{background:#17262d!important;color:#7f949d!important}

@media(max-width:780px){
  /* Keep receipts readable on mobile instead of shrinking them into a blur. */
  .bubbleMetaGroup .receiptIcon--sent{
    width:13px!important;
    min-width:13px!important;
    height:9px!important;
  }
  .bubbleMetaGroup .receiptIcon--delivered,
  .bubbleMetaGroup .receiptIcon--read{
    width:17px!important;
    min-width:17px!important;
    height:10px!important;
  }
  .bubbleMetaGroup .receiptIcon{transform:translateY(.9px)!important}
  .chatPreviewReceiptIcon.receiptIcon--sent{
    width:12px!important;
    min-width:12px!important;
    height:8px!important;
    margin-right:2px!important;
  }
  .chatPreviewReceiptIcon.receiptIcon--delivered,
  .chatPreviewReceiptIcon.receiptIcon--read{
    width:16px!important;
    min-width:16px!important;
    height:9px!important;
    margin-right:2px!important;
  }
}

/* Preserve compact chat-preview layout after receipt CSS consolidation. */
.chatPreviewText{display:flex!important;align-items:center;gap:4px;min-width:0;overflow:hidden}
.chatPreviewText>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:780px){.chatPreviewText{gap:3px!important}}

/* v5.2.34 desktop receipt size adjustment */
@media(min-width:781px){
  .bubbleMetaGroup .receiptIcon--sent{
    width:13px!important;
    min-width:13px!important;
    height:9px!important;
    flex-basis:13px!important;
  }
  .bubbleMetaGroup .receiptIcon--delivered,
  .bubbleMetaGroup .receiptIcon--read{
    width:16px!important;
    min-width:16px!important;
    height:9px!important;
    flex-basis:16px!important;
  }
}


/* v5.2.37 uploaded WhatsApp logo asset */
.brand{display:flex!important;align-items:center!important;gap:12px!important}
.brandIcon,.mobileSheetBrandIcon,.logoMark,.offlineLogo{
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  color:inherit!important;
}
.brandIcon{width:42px!important;height:42px!important;border-radius:0!important}
.mobileSheetBrandIcon{width:34px!important;height:34px!important;border-radius:0!important}
.logoMark{width:58px!important;height:58px!important;border-radius:0!important}
.offlineLogo{width:72px!important;height:72px!important;border-radius:0!important;margin:0 auto 18px!important}
.brandIcon img,.mobileSheetBrandIcon img,.logoMark img,.offlineLogo img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.10));
}
.brandCopy strong{letter-spacing:-.25px!important}
.brandCopy small{opacity:.92!important}
@media(max-width:780px){
  .brand{gap:10px!important}
  .brandIcon{width:36px!important;height:36px!important}
  .mobileSheetBrandIcon{width:32px!important;height:32px!important}
  .logoMark{width:54px!important;height:54px!important}
  .offlineLogo{width:66px!important;height:66px!important}
}


/* v5.3.2 contact resolver */.contactResolverCopy{min-width:0}.contactResolverCopy strong,.contactResolverCopy small{display:block}.contactResolverCopy strong{font-size:11px}.contactResolverCopy small{margin-top:2px;color:var(--muted);font-size:9px}.contactResolverCopy b{color:#f6c76d}.contactResolverBox.needsRepair{border-color:#55461f;background:#1d190e}.contactRepairButton{min-height:32px;padding:6px 10px;font-size:9px;white-space:nowrap}.contactResolverBox form{margin:0}@media(max-width:780px){.contactResolverBox{margin:8px 12px 10px;align-items:stretch;flex-direction:column}.contactRepairButton{width:100%;min-height:38px}.contactResolverCopy small{line-height:1.5}}

/* v5.3.4 contact resolver v2 + address book import */
.contactImportButton,.contactPickerButton{min-height:32px;padding:6px 9px;font-size:9px;white-space:nowrap}
.contactCountryCode{display:flex;align-items:center;gap:5px;min-height:32px;padding:3px 5px 3px 8px;border:1px solid #263a43;border-radius:9px;background:#101c22;color:#748b95;font-size:8px;white-space:nowrap}
.contactCountryCode input{width:54px;min-height:24px;padding:3px 5px;border:0;border-radius:6px;outline:0;background:#0a1419;color:#dfe8eb;font-size:9px;text-align:center}
@media(max-width:780px){
  .contactCountryCode{grid-column:1/-1;justify-content:space-between;min-height:38px;padding-left:10px}
  .contactCountryCode input{width:74px;min-height:30px}
}

/* v5.3.5 automatic contact-number bootstrap */


/* v5.3.8 Status viewer + list polish */
.statusPage{max-width:1120px;margin-inline:auto}
.statusAppHeader{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:6px 4px 14px}
.statusAppHeader h1{margin:2px 0 3px;font-size:30px;letter-spacing:-.8px}
.statusAppHeader>div>p:last-child{max-width:620px;color:#80949d;font-size:10px}
.statusPrivacyPill{min-height:30px;padding:0 10px;border:1px solid rgba(37,211,102,.16);background:rgba(37,211,102,.07);box-shadow:none}
.statusPrimaryTabs{gap:8px;margin-bottom:12px}
.statusPrimaryTabs a{border-radius:15px;border-color:#21353e;background:linear-gradient(180deg,#101d23,#0d181e);box-shadow:0 7px 20px rgba(0,0,0,.08)}
.statusPrimaryTabs a.active{border-color:rgba(37,211,102,.35);background:linear-gradient(180deg,rgba(37,211,102,.11),rgba(37,211,102,.045))}
.statusControlStrip{border-color:#20353e!important;background:linear-gradient(180deg,#0e1a20,#0b161b)!important;border-radius:16px!important;box-shadow:0 8px 24px rgba(0,0,0,.07)}
.statusHealthDot{box-shadow:0 0 0 4px rgba(37,211,102,.08),0 0 14px rgba(37,211,102,.22)!important}
.statusSearchBar{border-radius:14px!important;border-color:#20343d!important;background:#0d181e!important}
.statusWhatsAppList{overflow:hidden;border:1px solid #20343d;border-radius:17px;background:#0d181e}
.statusSectionTitle{margin:0;padding:11px 14px 8px;color:#7f949d;font-size:8px;font-weight:850;letter-spacing:.85px;text-transform:uppercase}
.statusContactRow{min-height:76px;padding:9px 14px;border-top:1px solid rgba(255,255,255,.045);background:transparent;transition:background .14s ease,transform .14s ease}
.statusContactRow:hover{background:#112028}
.statusContactRow:active{background:#14252d}
.statusRing{width:54px;height:54px;padding:3px;box-shadow:none}
.statusAvatar{width:48px;height:48px}
.statusRowBody strong{font-size:12px;letter-spacing:-.08px}
.statusRowBody small{margin-top:3px;color:#82969f;font-size:8.5px;line-height:1.45}
.statusRowChevron{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:#13242b;color:#71868f;font-size:18px}

.statusViewerBackdrop{background:rgba(1,6,9,.84)!important;backdrop-filter:blur(9px)}
.statusViewerShell{inset:2.5vh max(12px,calc((100vw - 455px)/2))!important;border:1px solid rgba(255,255,255,.095)!important;border-radius:22px!important;background:#071014!important;box-shadow:0 32px 100px rgba(0,0,0,.58)!important}
.statusViewerProgress{gap:4px!important;padding:11px 12px 5px!important}
.statusViewerProgress span{height:2.5px!important;background:rgba(255,255,255,.2)!important}
.statusViewerHead{gap:8px!important;padding:7px 11px 11px!important;background:linear-gradient(180deg,rgba(5,12,16,.82),rgba(5,12,16,.45),transparent)!important}
.statusViewerAvatar{width:38px!important;height:38px!important;flex:0 0 38px!important;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 14px rgba(0,0,0,.16)}
.statusViewerPerson strong{font-size:12.5px!important;letter-spacing:-.1px}
.statusViewerMetaLine{gap:5px!important;margin-top:2px!important}
.statusViewerMetaLine small{font-size:8px!important;color:#98a8ae!important}
.statusViewerPhone{color:#c1cdd1!important}
.statusViewerPhone:not([hidden])::after{content:"·";margin-left:5px;color:#60737b}

.statusViewerFavorite,.statusViewerSound,.statusViewerPause,.statusViewerClose{width:34px!important;height:34px!important;min-height:34px!important;flex:0 0 34px!important;border:1px solid rgba(255,255,255,.075)!important;background:rgba(255,255,255,.055)!important;color:#e6edef!important;box-shadow:none!important;transition:background .14s ease,transform .14s ease,color .14s ease!important}
.statusViewerFavorite:hover,.statusViewerSound:hover,.statusViewerPause:hover,.statusViewerClose:hover{background:rgba(255,255,255,.105)!important}
.statusViewerFavorite:active,.statusViewerSound:active,.statusViewerPause:active,.statusViewerClose:active{transform:scale(.95)}
.statusViewerFavorite.active{background:rgba(245,198,93,.13)!important;border-color:rgba(245,198,93,.16)!important;color:#f5c65d!important}
.statusViewerPause{padding:0!important;border-radius:50%!important;display:grid!important;place-items:center!important}
.statusViewerPause svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.statusViewerPause .playGlyph{display:none;fill:currentColor;stroke:none}
.statusViewerPause.paused{background:rgba(37,211,102,.12)!important;border-color:rgba(37,211,102,.18)!important;color:#7ce3aa!important}
.statusViewerPause.paused .pauseGlyph{display:none}
.statusViewerPause.paused .playGlyph{display:block}
.statusViewerSound svg{width:16px!important;height:16px!important}
.statusViewerClose{font-size:19px!important}
.statusViewerCanvas{background:radial-gradient(circle at 50% 42%,#0c171c,#050b0e 70%)!important}
.statusViewerCanvas>img,.statusViewerCanvas>video{max-width:100%!important;max-height:100%!important;object-fit:contain!important}
.statusViewer.paused .statusViewerProgress span.current:after{animation-play-state:paused!important}
.statusViewer.paused .statusViewerCanvas:after{content:"Paused";position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:9;padding:5px 9px;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(5,12,16,.64);backdrop-filter:blur(8px);color:rgba(255,255,255,.72);font-size:8px;font-weight:750;letter-spacing:.2px;pointer-events:none}
.statusViewerPlay{width:58px!important;height:58px!important;min-height:58px!important;border-color:rgba(255,255,255,.12)!important;background:rgba(5,12,16,.68)!important}
.statusViewerNav{width:38px!important;height:66px!important;min-height:66px!important;background:rgba(3,8,11,.22)!important;color:rgba(255,255,255,.72)!important;font-size:29px!important}
.statusViewerHint{bottom:12px!important;display:flex!important;align-items:center;gap:7px!important;padding:5px 8px;border:1px solid rgba(255,255,255,.055);border-radius:999px;background:rgba(5,12,16,.36);backdrop-filter:blur(8px);color:rgba(255,255,255,.44)!important;font-size:7.5px!important}
.statusViewerHint span+span:before{content:"·";margin-right:7px;color:rgba(255,255,255,.25)}
.statusViewerCaption{padding:26px 18px 15px!important;font-size:11px!important;line-height:1.45!important}

@media(max-width:780px){
  .statusPage{max-width:none}.statusAppHeader{padding:11px 14px 8px}.statusAppHeader h1{font-size:25px}.statusPrivacyPill{min-height:27px}.statusWhatsAppList{border-left:0;border-right:0;border-radius:0}.statusContactRow{min-height:72px;padding:8px 14px}.statusRing{width:51px;height:51px}.statusAvatar{width:45px;height:45px}
  .statusViewerShell{inset:0!important;border:0!important;border-radius:0!important}.statusViewerProgress{padding:9px 9px 4px!important}.statusViewerHead{padding:5px 9px 9px!important}.statusViewerAvatar{width:36px!important;height:36px!important;flex-basis:36px!important}.statusViewerFavorite,.statusViewerSound,.statusViewerPause,.statusViewerClose{width:32px!important;height:32px!important;min-height:32px!important;flex-basis:32px!important}.statusViewerHint{display:none!important}.statusViewer.paused .statusViewerCanvas:after{bottom:14px}
}


/* v5.3.9 Status tap + swipe gestures */
.statusViewerShell{transition:transform .18s cubic-bezier(.2,.72,.22,1),opacity .18s ease!important;transform-origin:50% 18%!important}
.statusViewer.swipingDown .statusViewerShell{transition:none!important;will-change:transform,opacity}
.statusViewer.swipingDown .statusViewerBackdrop{transition:none!important}
.statusViewer.swipeReset .statusViewerShell,.statusViewer.swipeReset .statusViewerBackdrop{transition:transform .18s cubic-bezier(.2,.72,.22,1),opacity .18s ease!important}
.statusViewerCanvas{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
@media(max-width:780px){
  .statusViewerCanvas{touch-action:pan-y!important}
  .statusViewerProgress:before{content:"";position:absolute;top:3px;left:50%;width:34px;height:3px;transform:translateX(-50%);border-radius:999px;background:rgba(255,255,255,.24);pointer-events:none}
  .statusViewerProgress{position:relative!important;padding-top:10px!important}
}


/* v5.4.0 Status viewer identity/header cleanup */
.statusViewerHead{
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr) auto!important;
  align-items:center!important;
  column-gap:9px!important;
  min-width:0!important;
}
.statusViewerAvatar{grid-column:1!important;min-width:0!important}
.statusViewerPerson{grid-column:2!important;display:block!important;min-width:0!important;overflow:hidden!important}
.statusViewerTitleLine{display:flex!important;align-items:center!important;gap:7px!important;min-width:0!important}
.statusViewerTitleLine strong{display:block!important;min-width:0!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.statusViewerCounter{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  z-index:auto!important;
  flex:0 0 auto!important;
  padding:2px 6px!important;
  border:1px solid rgba(255,255,255,.06)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.055)!important;
  color:#aab9bf!important;
  font-size:7.5px!important;
  font-weight:750!important;
  line-height:1.25!important;
  pointer-events:none!important;
}
.statusViewerMetaLine{
  display:flex!important;
  align-items:center!important;
  gap:0!important;
  min-width:0!important;
  margin-top:3px!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}
.statusViewerMetaLine small{
  flex:0 0 auto!important;
  display:inline-block!important;
  max-width:none!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
  font-size:8.5px!important;
  line-height:1.35!important;
  font-variant-numeric:tabular-nums!important;
}
.statusViewerPhone{color:#c4d0d4!important;font-weight:650!important}
.statusViewerPhone:not([hidden])::after{content:"·"!important;margin:0 5px!important;color:#62757d!important}
#statusViewerTime{color:#8da0a8!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important}
.statusViewerMetaLine em{
  flex:0 0 auto!important;
  min-height:16px!important;
  margin-left:7px!important;
  padding:1px 6px!important;
  border:1px solid rgba(255,95,110,.16)!important;
  border-radius:999px!important;
  background:rgba(255,95,110,.105)!important;
  color:#ff9da7!important;
  font-size:7px!important;
  font-weight:850!important;
  line-height:1.25!important;
  letter-spacing:.01em!important;
}
.statusViewerActions{
  grid-column:3!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
  flex:0 0 auto!important;
  min-width:max-content!important;
}
@media(max-width:780px){
  .statusViewerHead{
    grid-template-columns:36px minmax(0,1fr) auto!important;
    column-gap:8px!important;
    padding:5px 8px 9px!important;
  }
  .statusViewerActions{gap:5px!important}
  .statusViewerTitleLine{gap:6px!important}
  .statusViewerTitleLine strong{font-size:13px!important}
  .statusViewerCounter{padding:2px 5px!important;font-size:7px!important}
  .statusViewerMetaLine{margin-top:2px!important}
  .statusViewerMetaLine small{font-size:8px!important}
  .statusViewerMetaLine em{margin-left:6px!important;padding:1px 5px!important;font-size:6.8px!important}
}
@media(max-width:380px){
  .statusViewerHead{grid-template-columns:34px minmax(0,1fr) auto!important;column-gap:7px!important;padding-inline:7px!important}
  .statusViewerAvatar{width:34px!important;height:34px!important;flex-basis:34px!important}
  .statusViewerActions{gap:4px!important}
  .statusViewerFavorite,.statusViewerSound,.statusViewerPause,.statusViewerClose{width:30px!important;height:30px!important;min-height:30px!important;flex-basis:30px!important}
  .statusViewerMetaLine small{font-size:7.6px!important}
}


/* v5.4.1 Status relative-time metadata */
.statusViewerMetaLine{gap:6px!important}
.statusViewerPhone{display:none!important}
#statusViewerTime{color:#8da0a8!important;font-size:8.5px!important;font-weight:550!important;white-space:nowrap!important}
#statusViewerTime.deletedAge{color:#aab8bd!important}
.statusViewerMetaLine em#statusViewerDeleted{
  margin-left:0!important;
  min-height:16px!important;
  padding:1px 6px!important;
  flex:0 0 auto!important;
}
.statusViewerMetaLine em#statusViewerDeleted:not([hidden]) + #statusViewerTime::before{
  content:"·";
  margin-right:6px;
  color:#63757d;
}
@media(max-width:420px){
  #statusViewerTime{font-size:8px!important}
  .statusViewerMetaLine{gap:5px!important}
}


/* v5.4.2 Status center-tap pause / resume */
.statusViewerActions .statusViewerPause{display:none!important}
.statusViewerCanvas{cursor:pointer}
.statusViewer.paused .statusViewerCanvas:after{
  content:"Paused";
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:9;
  padding:5px 9px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  background:rgba(5,12,16,.64);
  backdrop-filter:blur(8px);
  color:rgba(255,255,255,.74);
  font-size:8px;
  font-weight:750;
  letter-spacing:.2px;
  pointer-events:none
}
.statusViewerCanvas:before{
  content:"";
  position:absolute;
  inset:0 42%;
  z-index:6;
  pointer-events:none
}
@media(max-width:780px){
  .statusViewerCanvas{cursor:default}
}


/* v5.4.3 Status pause/resume animated feedback */
.statusViewer.paused .statusViewerCanvas:after{display:none!important;content:none!important}
.statusPlaybackFeedback{
  position:absolute;
  inset:0;
  z-index:32;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  pointer-events:none;
  opacity:0;
  transform:scale(.9);
  visibility:hidden;
}
.statusPlaybackFeedback.show{
  visibility:visible;
  animation:statusPlaybackFeedbackPop .76s cubic-bezier(.2,.8,.2,1) both;
}
.statusPlaybackFeedbackButton{
  position:relative;
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  background:rgba(6,14,18,.62);
  -webkit-backdrop-filter:blur(12px) saturate(1.12);
  backdrop-filter:blur(12px) saturate(1.12);
  box-shadow:0 14px 38px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.035);
}
.statusPlaybackFeedbackButton:after{
  content:"";
  position:absolute;
  inset:-1px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:inherit;
  opacity:0;
  transform:scale(.92);
}
.statusPlaybackFeedback.show .statusPlaybackFeedbackButton:after{
  animation:statusPlaybackFeedbackRing .72s ease-out both;
}
.statusPlaybackFeedbackIcon{
  position:relative;
  display:block;
  width:25px;
  height:25px;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.28));
}
.statusPlaybackFeedback.isPause .statusPlaybackFeedbackIcon:before,
.statusPlaybackFeedback.isPause .statusPlaybackFeedbackIcon:after{
  content:"";
  position:absolute;
  top:2px;
  bottom:2px;
  width:6px;
  border-radius:2.5px;
  background:#fff;
}
.statusPlaybackFeedback.isPause .statusPlaybackFeedbackIcon:before{left:4px}
.statusPlaybackFeedback.isPause .statusPlaybackFeedbackIcon:after{right:4px}
.statusPlaybackFeedback.isPlay .statusPlaybackFeedbackIcon:before{
  content:"";
  position:absolute;
  left:5px;
  top:2px;
  width:20px;
  height:21px;
  background:#fff;
  clip-path:polygon(8% 0,100% 50%,8% 100%);
}
.statusPlaybackFeedback.isPlay .statusPlaybackFeedbackButton{
  border-color:rgba(92,229,145,.26);
  background:rgba(17,82,47,.52);
  box-shadow:0 14px 38px rgba(0,0,0,.34),0 0 0 1px rgba(37,211,102,.08) inset;
}
.statusPlaybackFeedback.isPlay .statusPlaybackFeedbackButton:after{border-color:rgba(92,229,145,.34)}
.statusPlaybackFeedbackLabel{
  padding:4px 8px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  background:rgba(5,12,16,.46);
  -webkit-backdrop-filter:blur(9px);
  backdrop-filter:blur(9px);
  color:rgba(255,255,255,.86);
  font-size:8px;
  line-height:1;
  font-weight:750;
  letter-spacing:.2px;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
}
.statusPlaybackFeedback.isPlay .statusPlaybackFeedbackLabel{color:#baf4cf}
@keyframes statusPlaybackFeedbackPop{
  0%{opacity:0;transform:scale(.78)}
  18%{opacity:1;transform:scale(1.06)}
  34%{opacity:1;transform:scale(1)}
  72%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(.95)}
}
@keyframes statusPlaybackFeedbackRing{
  0%{opacity:.9;transform:scale(.9)}
  100%{opacity:0;transform:scale(1.42)}
}
@media(max-width:780px){
  .statusPlaybackFeedback{gap:7px}
  .statusPlaybackFeedbackButton{width:60px;height:60px}
  .statusPlaybackFeedbackIcon{width:23px;height:23px}
  .statusPlaybackFeedbackLabel{font-size:7.5px;padding:4px 7px}
}
@media(prefers-reduced-motion:reduce){
  .statusPlaybackFeedback.show{animation:statusPlaybackFeedbackFade .45s ease both}
  .statusPlaybackFeedback.show .statusPlaybackFeedbackButton:after{animation:none}
  @keyframes statusPlaybackFeedbackFade{0%{opacity:0}20%,75%{opacity:1}100%{opacity:0}}
}


/* v5.4.4 persistent pause indicator */
.statusPlaybackFeedback.persistPause{
  visibility:visible!important;
  opacity:1!important;
  transform:scale(1)!important;
  animation:statusPlaybackPauseIn .42s cubic-bezier(.2,.82,.2,1) both!important;
}
.statusPlaybackFeedback.persistPause .statusPlaybackFeedbackButton:after{
  animation:statusPlaybackFeedbackRing .72s ease-out both!important;
}
.statusPlaybackFeedback.persistPause .statusPlaybackFeedbackButton{
  background:rgba(6,14,18,.68)!important;
  border-color:rgba(255,255,255,.20)!important;
  box-shadow:0 14px 38px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.04)!important;
}
.statusPlaybackFeedback.persistPause .statusPlaybackFeedbackLabel{
  color:rgba(255,255,255,.90)!important;
  background:rgba(5,12,16,.54)!important;
}
.statusViewer.paused .statusViewerProgress{
  opacity:.62!important;
  transition:opacity .18s ease!important;
}
.statusViewer:not(.paused) .statusViewerProgress{
  opacity:1!important;
  transition:opacity .18s ease!important;
}
@keyframes statusPlaybackPauseIn{
  0%{opacity:0;transform:scale(.78)}
  55%{opacity:1;transform:scale(1.06)}
  100%{opacity:1;transform:scale(1)}
}
@media(prefers-reduced-motion:reduce){
  .statusPlaybackFeedback.persistPause{animation:none!important;opacity:1!important;transform:scale(1)!important}
  .statusPlaybackFeedback.persistPause .statusPlaybackFeedbackButton:after{animation:none!important}
}


/* v5.4.5 Media dark theme safety */
html:not([data-theme="light"]) .mediaStorageStat,
html:not([data-theme="light"]) .mediaControlPanel,
html:not([data-theme="light"]) .mediaFilterPanel,
html:not([data-theme="light"]) .mediaCardV45{background:var(--panel)!important;border-color:var(--line)!important;color:var(--text)!important}
html:not([data-theme="light"]) .mediaStorageStat strong,
html:not([data-theme="light"]) .mediaToggleField strong{color:var(--text)!important}
html:not([data-theme="light"]) .mediaStorageStat small,
html:not([data-theme="light"]) .mediaStorageStat em,
html:not([data-theme="light"]) .mediaControlHead p:not(.sectionKicker),
html:not([data-theme="light"]) .mediaPolicyForm>label,
html:not([data-theme="light"]) .mediaMaintenanceRow p{color:var(--muted)!important}
html:not([data-theme="light"]) .mediaStorageIcon{background:rgba(37,211,102,.08)!important;border-color:rgba(37,211,102,.14)!important;color:#62dfa0!important}
html:not([data-theme="light"]) .mediaToggleField{background:var(--panel2)!important;border-color:var(--line)!important}
html:not([data-theme="light"]) .mediaPolicyForm select,
html:not([data-theme="light"]) .mediaFilters input,
html:not([data-theme="light"]) .mediaFilters select{background:#0d141c!important;border-color:#2b3a4a!important;color:var(--text)!important;color-scheme:dark!important}


/* v5.4.7 safer Status touch controls.
   This block was inserted as a single line with literal \n escape sequences
   instead of newlines, so the browser could not parse any of it and dropped
   the lot. It has been dead since v5.4.7. Restored verbatim below; the only
   change is that the newlines are real. */
.statusViewerShell{overscroll-behavior:contain!important}
.statusViewerCanvas{
  touch-action:none!important;
  -webkit-user-select:none!important;
  user-select:none!important;
}
.statusViewerNav{
  z-index:24!important;
  width:40px!important;
  height:72px!important;
  min-height:72px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(255,255,255,.07)!important;
  background:rgba(3,8,11,.26)!important;
  -webkit-backdrop-filter:blur(8px)!important;
  backdrop-filter:blur(8px)!important;
  color:rgba(255,255,255,.86)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.12)!important;
  opacity:.72!important;
  transition:opacity .14s ease,background .14s ease,transform .14s ease!important;
}
.statusViewerNav:hover{opacity:1!important;background:rgba(3,8,11,.46)!important}
.statusViewerNav:active{transform:translateY(-50%) scale(.94)!important}
.statusViewerNav.prev{left:8px!important}
.statusViewerNav.next{right:8px!important}
.statusViewerNav:disabled{opacity:.12!important;pointer-events:none!important}
@media(max-width:780px){
  .statusViewerNav{
    display:grid!important;
    width:34px!important;
    height:68px!important;
    min-height:68px!important;
    border-radius:13px!important;
    font-size:28px!important;
    background:rgba(3,8,11,.22)!important;
    opacity:.62!important;
  }
  .statusViewerNav.prev{left:6px!important}
  .statusViewerNav.next{right:6px!important}
}


/* v5.4.10 status posted-time-only UI */
.statusViewerMetaLine #statusViewerDeleted{display:none!important}
.statusViewerMetaLine{gap:0!important}
.statusViewerMetaLine #statusViewerTime{color:#a6b4ba!important;font-size:9px!important}
.statusContactRow.deleted{background:transparent!important}
.statusRing.deleted,.statusRing.mixed{background:conic-gradient(#25d366 0 360deg)!important}
.statusRing.deleted.multi,.statusRing.mixed.multi{background:repeating-conic-gradient(#25d366 0 54deg,transparent 54deg 61deg)!important}


/* v5.4.11 WhatsApp-style status time + verified delete clock */
.statusViewerMetaLine{gap:7px!important;flex-wrap:wrap!important}
#statusViewerTime{font-size:9px!important;color:#a6b4ba!important;font-weight:560!important}
.statusViewerMetaLine #statusViewerDeleted:not([hidden]){
  display:inline-flex!important;align-items:center!important;min-height:18px!important;
  padding:2px 7px!important;border:1px solid rgba(255,112,126,.18)!important;
  border-radius:999px!important;background:rgba(190,45,61,.16)!important;color:#ffadb6!important;
  font-size:7.5px!important;font-weight:850!important;letter-spacing:.01em!important;
}
@media(max-width:780px){
  #statusViewerTime{font-size:8.5px!important}
  .statusViewerMetaLine #statusViewerDeleted:not([hidden]){font-size:7px!important;padding:2px 6px!important}
}


/* v5.4.13 hide empty/hidden Deleted metadata on active statuses */
.statusViewerMetaLine #statusViewerDeleted[hidden],
.statusViewerMetaLine #statusViewerDeleted:empty{
  display:none!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}


/* v5.4.15 smooth Status progress: frame-synced + GPU transform */
.statusViewerProgress span{contain:paint!important}
.statusViewerProgress span:after{
  width:100%!important;
  transform-origin:left center!important;
  transform:translateZ(0) scaleX(0)!important;
  will-change:transform!important;
  backface-visibility:hidden!important;
}
.statusViewerProgress span.done:after{
  width:100%!important;
  transform:translateZ(0) scaleX(1)!important;
}
.statusViewerProgress span.current:after{
  width:100%!important;
  transform:translateZ(0) scaleX(var(--status-progress-scale,0))!important;
}
@media(prefers-reduced-motion:reduce){.statusViewerProgress span:after{will-change:auto!important}}


/* v5.4.15 Status captions + emoji rendering */
.statusViewerCaption{
  z-index:8!important;
  box-sizing:border-box!important;
  max-height:42%!important;
  overflow:auto!important;
  padding:44px 24px max(18px,env(safe-area-inset-bottom))!important;
  background:transparent!important;
  color:#fff!important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif!important;
  font-size:13px!important;
  line-height:1.42!important;
  font-weight:500!important;
  text-align:center!important;
  white-space:pre-wrap!important;
  overflow-wrap:anywhere!important;
  text-shadow:0 1px 3px rgba(0,0,0,.9)!important;
  pointer-events:none!important;
  scrollbar-width:none!important;
}
.statusViewerCaption::-webkit-scrollbar{display:none!important}
.statusViewerText{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif!important;
  white-space:pre-wrap!important;
  overflow-wrap:anywhere!important;
}
@media(max-width:780px){
  .statusViewerCaption{padding:40px 18px max(16px,env(safe-area-inset-bottom))!important;font-size:13px!important;line-height:1.4!important}
}


/* v5.4.17 Status caption: clean, media-aware, no gradient */
.statusViewerCaption{
  left:50%!important;
  right:auto!important;
  bottom:var(--status-caption-bottom,max(34px,env(safe-area-inset-bottom)))!important;
  transform:translateX(-50%)!important;
  width:min(var(--status-caption-width,100%),100%)!important;
  max-width:100%!important;
  max-height:38%!important;
  margin:0!important;
  padding:4px 18px 8px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#fff!important;
  font-size:13px!important;
  line-height:1.38!important;
  font-weight:550!important;
  letter-spacing:0!important;
  text-align:center!important;
  white-space:pre-wrap!important;
  overflow-wrap:anywhere!important;
  text-wrap:pretty!important;
  text-shadow:0 1px 2px rgba(0,0,0,.98),0 0 5px rgba(0,0,0,.72)!important;
  pointer-events:none!important;
  scrollbar-width:none!important;
}
.statusViewerCaption::-webkit-scrollbar{display:none!important}
@media(max-width:780px){
  .statusViewerCaption{
    bottom:var(--status-caption-bottom,max(38px,env(safe-area-inset-bottom)))!important;
    width:min(var(--status-caption-width,100%),100%)!important;
    padding:4px 16px 7px!important;
    font-size:13px!important;
    line-height:1.36!important;
  }
}
@media(max-width:390px){
  .statusViewerCaption{padding-inline:14px!important;font-size:12.5px!important}
}


/* v5.4.18 status filter simplification */
.statusTabs.statusTabsCompact{width:max-content;max-width:100%}
.statusTabs.statusTabsCompact a{min-width:92px;justify-content:center}
@media(max-width:780px){
  .statusTabs.statusTabsCompact{width:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}
  .statusTabs.statusTabsCompact a{min-width:0;width:100%}
}


/* v5.5.3 status label polish; ring segmentation unchanged */
.statusRing,
.statusRing.multi,
.statusRing.deleted,
.statusRing.mixed,
.statusRing.deleted.multi,
.statusRing.mixed.multi,
.statusContactRow.seen .statusRing:not(.deleted):not(.mixed){
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  background:transparent!important;
  overflow:visible!important;
}
.statusRingSvg{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
  transform:rotate(-90deg);
  pointer-events:none;
}
.statusRingSegment{
  fill:none;
  stroke-width:3;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.statusRingSegment.unseen{stroke:#25d366}
.statusRingSegment.seen{stroke:#667781}
.statusRing .statusAvatar{
  position:relative!important;
  z-index:1!important;
  width:calc(100% - 8px)!important;
  height:calc(100% - 8px)!important;
  border:2px solid var(--panel)!important;
  box-sizing:border-box!important;
}

/* v5.5.5 Status page UX polish: compact desktop, native mobile, no engine changes */
.statusPage{max-width:1100px!important;margin-inline:auto}
.statusAppHeader{align-items:center!important;margin:0 0 9px!important;padding:0 4px 8px!important}
.statusAppTitle{min-width:0}
.statusAppHeader .sectionKicker{margin:0 0 2px!important}
.statusAppHeader h1{margin:0 0 2px!important;font-size:27px!important;line-height:1.08!important;letter-spacing:-.72px!important}
.statusAppHeader>div>p:last-child{margin:0!important;max-width:620px!important;color:#7f939c!important;font-size:9.5px!important;line-height:1.4!important}
.statusPrivacyPill{display:inline-flex!important;align-items:center!important;min-height:28px!important;padding:0 9px!important;gap:6px!important;flex:0 0 auto!important;margin-left:auto!important;border-color:rgba(37,211,102,.18)!important;background:rgba(37,211,102,.055)!important;font-size:8px!important;line-height:1!important;box-shadow:none!important}
.statusPrivacyDot{display:block!important;width:6px!important;height:6px!important;flex:0 0 6px!important;border-radius:50%!important;background:#25d366!important;box-shadow:0 0 0 3px rgba(37,211,102,.08),0 0 8px rgba(37,211,102,.25)!important}
.statusPrivacyText{display:inline-flex!important;align-items:center!important;gap:3px!important;width:auto!important;height:auto!important;min-width:0!important;flex:0 0 auto!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;line-height:1!important}
.statusPrivacyLong{width:auto!important;height:auto!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}

.statusPrimaryTabs{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:3px!important;margin:0 0 8px!important;padding:3px!important;border:1px solid #20343d!important;border-radius:14px!important;background:#0b161b!important}
.statusPrimaryTabs a{display:grid!important;grid-template-columns:30px minmax(0,1fr) auto!important;grid-template-rows:1fr!important;column-gap:9px!important;align-items:center!important;min-height:46px!important;padding:5px 8px!important;border:0!important;border-radius:10px!important;background:transparent!important;box-shadow:none!important;color:#9cadb4!important}
.statusPrimaryTabs a:hover{background:rgba(255,255,255,.025)!important}
.statusPrimaryTabs a.active{background:#12241f!important;box-shadow:inset 0 0 0 1px rgba(37,211,102,.16)!important;color:#ecf5f1!important}
.statusPrimaryIcon{grid-row:auto!important;width:30px!important;height:30px!important;border-radius:9px!important;background:#122129!important;color:#748b95!important;font-size:14px!important}
.statusPrimaryTabs a.active .statusPrimaryIcon{background:rgba(37,211,102,.11)!important;color:#52d98d!important}
.statusPrimaryCopy{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1px}
.statusPrimaryCopy strong{font-size:10.5px!important;line-height:1.2!important;color:inherit}
.statusPrimaryCopy small{grid-column:auto!important;color:#71858e!important;font-size:7.5px!important;line-height:1.2!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.statusPrimaryCount{grid-column:auto!important;grid-row:auto!important;align-self:center!important;display:flex!important;align-items:baseline!important;gap:4px!important;padding:4px 7px!important;border-radius:999px!important;background:rgba(255,255,255,.04)!important;color:#81959d!important;white-space:nowrap}
.statusPrimaryCount b{font-size:9px!important;color:#b6c5ca!important;line-height:1}
.statusPrimaryCount small{grid-column:auto!important;color:inherit!important;font-size:7px!important;line-height:1!important}
.statusPrimaryTabs a.active .statusPrimaryCount{background:rgba(37,211,102,.08)!important;color:#63d99a!important}
.statusPrimaryTabs a.active .statusPrimaryCount b{color:#90e6b6!important}

.statusControlStrip{min-height:44px!important;margin:0 0 8px!important;padding:6px 7px 6px 11px!important;border-radius:13px!important;border-color:#20343d!important;background:#0d181e!important;box-shadow:none!important}
.statusHealthMini{display:grid!important;grid-template-columns:8px minmax(0,1fr)!important;gap:0 8px!important;align-items:center!important;min-width:0}
.statusHealthDot{grid-row:1/3;width:7px!important;height:7px!important;box-shadow:0 0 0 3px rgba(37,211,102,.07)!important}
.statusHealthCopy{min-width:0;display:flex;align-items:baseline;gap:7px}
.statusHealthCopy strong{font-size:10.5px!important;white-space:nowrap}
.statusHealthCopy small{min-width:0;color:#758a93!important;font-size:8px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.statusRetentionForm label{gap:7px!important;font-size:8px!important}
.statusRetentionForm select{min-height:31px!important;padding:4px 27px 4px 9px!important;border-radius:9px!important;font-size:9px!important}
.statusRetentionLabel{color:#758a93}

.statusSearchWrap{margin:0 0 8px}
.statusSearchBar{grid-template-columns:28px minmax(0,1fr) 168px auto!important;gap:6px!important;margin:0!important;padding:6px 7px!important;border-radius:13px!important;border-color:#20343d!important;background:#0d181e!important;box-shadow:none!important}
.statusSearchIcon{width:28px!important;height:32px!important}
.statusSearchIcon svg{width:15px!important;height:15px!important}
.statusSearchBar input,.statusSearchBar select{min-height:34px!important;border-radius:9px!important;padding-inline:10px!important;font-size:10px!important}
.statusSearchBar button{min-height:34px!important;padding:6px 12px!important;border-radius:9px!important;font-size:9px!important}

.statusFilterBar{display:flex;align-items:center;gap:7px;margin:0 0 8px}
.statusTabs.statusTabsCompact{width:max-content!important;max-width:100%!important;margin:0!important;gap:5px!important}
.statusTabs.statusTabsCompact a{min-width:84px!important;min-height:31px!important;padding:0 10px!important;justify-content:center!important;font-size:8.5px!important}
.statusTabs.statusTabsCompact a span{min-width:17px!important;height:17px!important;font-size:7px!important}
.statusMobileSearchToggle{display:none}

.statusWhatsAppList{border-radius:15px!important;border-color:#20343d!important;background:#0d181e!important;box-shadow:none!important}
.statusSectionTitle{padding:9px 13px 6px!important;font-size:7.5px!important;letter-spacing:.8px!important}
.statusContactRow{grid-template-columns:58px minmax(0,1fr) 24px!important;gap:11px!important;min-height:72px!important;padding:7px 12px!important;transition:background .13s ease!important}
.statusContactRow:hover{background:#101f26!important}
.statusRing{width:56px!important;height:56px!important}
.statusRing .statusAvatar{width:calc(100% - 8px)!important;height:calc(100% - 8px)!important}
.statusRowBody strong{font-size:12.5px!important;letter-spacing:-.08px!important}
.statusRowBody small{display:flex!important;align-items:center!important;gap:7px!important;margin-top:3px!important;min-width:0!important;color:#81959d!important;font-size:8.7px!important;line-height:1.25!important;overflow:visible!important;white-space:nowrap!important}
.statusRowMeta{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.statusRowNew{flex:0 0 auto;color:#53dc91;font-weight:850;white-space:nowrap}
.statusRowChevron{width:22px!important;height:22px!important;border-radius:50%!important;background:transparent!important;color:#5e747d!important;font-size:19px!important;opacity:.72;transition:opacity .13s ease,background .13s ease!important}
.statusContactRow:hover .statusRowChevron{opacity:1;background:#13242b!important}

@media(max-width:780px){
  .statusPage{width:100%!important;max-width:none!important;margin:0!important}
  .statusAppHeader{padding:2px 14px 7px!important;margin:0!important;align-items:center!important}
  .statusAppHeader h1{font-size:23px!important;letter-spacing:-.55px!important}
  .statusAppHeader>div>p:last-child{display:none!important}
  .statusPrivacyPill{min-height:26px!important;padding:0 8px!important;gap:5px!important;font-size:7.5px!important;max-width:42vw!important}
  .statusPrivacyText{font-size:7.5px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .statusPrivacyLong{display:none!important}

  .statusPrimaryTabs{margin:0 10px 7px!important;padding:3px!important;border-radius:13px!important}
  .statusPrimaryTabs a{grid-template-columns:27px minmax(0,1fr) auto!important;min-height:42px!important;padding:4px 7px!important;column-gap:7px!important;border-radius:9px!important}
  .statusPrimaryIcon{width:27px!important;height:27px!important;border-radius:8px!important;font-size:12px!important}
  .statusPrimaryCopy strong{font-size:10px!important}
  .statusPrimaryCopy small{display:none!important}
  .statusPrimaryCount{padding:3px 6px!important;gap:0!important}
  .statusPrimaryCount b{font-size:8px!important}
  .statusPrimaryCount small{display:none!important}

  .statusControlStrip{min-height:42px!important;margin:0 10px 7px!important;padding:5px 6px 5px 9px!important;border-radius:12px!important;gap:8px!important}
  .statusHealthCopy{display:block!important;line-height:1.15}
  .statusHealthCopy strong{display:block;font-size:9.5px!important}
  .statusHealthCopy small{display:block;margin-top:2px;font-size:7.2px!important;max-width:48vw}
  .statusRetentionPair{width:auto!important;display:block!important}
  .statusRetentionLabel{display:none}
  .statusRetentionForm select{min-height:30px!important;padding:3px 24px 3px 8px!important;font-size:8px!important}

  .statusSearchWrap{margin:0 10px 7px!important}
  .statusPage[data-status-section="updates"] .statusSearchBar{display:none!important}
  .statusPage[data-status-section="updates"] .statusSearchWrap.searchOpen .statusSearchBar{display:grid!important}
  .statusPage[data-status-section="archive"] .statusSearchBar{display:grid!important}
  .statusSearchBar{grid-template-columns:24px minmax(0,1fr) auto!important;gap:6px!important;padding:6px!important;border-radius:12px!important}
  .statusSearchIcon{grid-column:1;grid-row:1;width:24px!important;height:34px!important}
  .statusSearchBar input{grid-column:2/4;grid-row:1;background:var(--panel2)!important;padding:0 9px!important}
  .statusSearchBar select{display:block!important;grid-column:1/3;grid-row:2;min-width:0!important;background:var(--panel2)!important}
  .statusSearchBar button{display:inline-flex!important;grid-column:3;grid-row:2;min-width:72px!important;padding-inline:10px!important}

  .statusFilterBar{position:sticky;top:calc(var(--mobile-top-h) + 5px);z-index:14;margin:0!important;padding:5px 10px 7px!important;background:linear-gradient(180deg,rgba(9,19,25,.98) 72%,rgba(9,19,25,.92));backdrop-filter:blur(12px)}
  .statusTabs.statusTabsCompact{flex:1!important;width:auto!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important;padding:0!important;overflow:visible!important}
  .statusTabs.statusTabsCompact a{width:100%!important;min-width:0!important;min-height:33px!important;padding:0 8px!important}
  .statusMobileSearchToggle{display:grid;width:34px;height:34px;min-height:34px;flex:0 0 34px;padding:0;border:1px solid #263a43;border-radius:10px;background:#101f26;color:#80949d;place-items:center}
  .statusMobileSearchToggle svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
  .statusMobileSearchToggle.active{border-color:rgba(37,211,102,.28);background:rgba(37,211,102,.09);color:#65dfa0}

  .statusWhatsAppList{margin:0!important;border-left:0!important;border-right:0!important;border-radius:0!important}
  .statusSectionTitle{padding:8px 14px 5px!important}
  .statusContactRow{grid-template-columns:54px minmax(0,1fr) 20px!important;gap:10px!important;min-height:68px!important;padding:7px 14px!important}
  .statusRing{width:53px!important;height:53px!important}
  .statusRowBody strong{font-size:12.5px!important}
  .statusRowBody small{gap:6px!important;font-size:8.2px!important}
  .statusRowNew{font-size:8.2px!important}
  .statusRowChevron{width:20px!important;height:20px!important;font-size:18px!important;opacity:.58}
}

@media(max-width:390px){
  .statusAppHeader{padding-inline:12px!important}
  .statusPrimaryTabs,.statusControlStrip,.statusSearchWrap{margin-left:8px!important;margin-right:8px!important}
  .statusPrimaryTabs a{grid-template-columns:24px minmax(0,1fr) auto!important;padding-inline:6px!important}
  .statusPrimaryIcon{width:24px!important;height:24px!important}
  .statusHealthCopy small{max-width:44vw}
  .statusContactRow{padding-left:12px!important;padding-right:12px!important}
}


/* v5.5.6 Status counts + cleaner retention controls.
   Same fault as the v5.4.7 block above: written as one line with literal \n
   escapes, so the browser dropped all of it. Dead since v5.5.6. Restored
   verbatim; only the newlines changed. */
.statusRetentionToolbar{display:flex;align-items:center;justify-content:flex-end;min-height:32px;margin:0 0 8px;padding:0 1px}
.statusRetentionToolbar .statusRetentionPair{width:auto}
@media(max-width:780px){
  .statusRetentionToolbar{min-height:30px;margin:0 10px 7px;padding:0}
  .statusRetentionToolbar .statusRetentionPair{width:auto!important;display:block!important}
  .statusRetentionToolbar .statusRetentionLabel{display:none!important}
  .statusRetentionToolbar .statusRetentionForm select{min-height:30px!important;padding:3px 24px 3px 8px!important;font-size:8px!important}
}
@media(max-width:390px){.statusRetentionToolbar{margin-left:8px!important;margin-right:8px!important}}

/* v5.5.7 Status top strip compact layout */
.statusTopStrip{display:grid;grid-template-columns:minmax(150px,1fr) auto minmax(150px,1fr);align-items:center;gap:10px;margin:0 0 10px;padding:0 1px}
.statusMiniSwitch{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:0 14px;border:1px solid #20343d;border-radius:14px;background:#0d181e;color:#8da0a9;box-shadow:0 8px 22px rgba(0,0,0,.06)}
.statusMiniSwitch:hover{background:#112028;color:#eef4f7}
.statusMiniSwitch.active{border-color:rgba(37,211,102,.28);background:linear-gradient(180deg,rgba(37,211,102,.09),rgba(37,211,102,.04));color:#edf7f2}
.statusMiniLabel{display:block;font-size:12px;font-weight:800;letter-spacing:-.1px;white-space:nowrap}
.statusMiniCount{display:inline-flex;align-items:center;gap:5px;min-height:24px;padding:0 8px;border-radius:999px;background:rgba(255,255,255,.04);color:#8fa2ab;font-size:9px;font-weight:800;white-space:nowrap}
.statusMiniCount b{color:#edf3f6;font-size:11px}
.statusMiniSwitch.active .statusMiniCount{background:rgba(37,211,102,.11);color:#72dfa2}
.statusMiniSwitch.active .statusMiniCount b{color:#a4efc2}
.statusMiniKeep{display:flex;justify-content:center}
.statusMiniKeep .statusRetentionForm{margin:0}
.statusMiniKeep .statusRetentionForm label{display:flex;align-items:center;gap:8px;padding:0 10px;min-height:44px;border:1px solid #20343d;border-radius:14px;background:#0d181e}
.statusMiniKeep .statusRetentionLabel{margin:0;color:#8fa2ab;font-size:10px;font-weight:750;white-space:nowrap}
.statusMiniKeep .statusRetentionForm select{min-width:98px;min-height:32px;padding:5px 28px 5px 10px;border-radius:10px;background:#12212a;border:1px solid #28404a;color:#e8eff3;font-size:11px;font-weight:800}
.statusRetentionToolbar{display:none!important}

@media(max-width:780px){
  .statusTopStrip{grid-template-columns:1fr 1fr;gap:7px;margin:0 10px 8px;padding:0}
  .statusMiniSwitch{min-height:40px;padding:0 10px;border-radius:12px}
  .statusMiniLabel{font-size:10.5px}
  .statusMiniCount{min-height:20px;padding:0 6px;font-size:7.5px;gap:4px}
  .statusMiniCount b{font-size:9px}
  .statusMiniKeep{grid-column:1/-1;justify-content:flex-start}
  .statusMiniKeep .statusRetentionForm label{min-height:36px;padding:0 8px;border-radius:12px}
  .statusMiniKeep .statusRetentionLabel{font-size:8px}
  .statusMiniKeep .statusRetentionForm select{min-height:28px;min-width:88px;padding:3px 24px 3px 8px;font-size:8.5px}
}

@media(max-width:390px){
  .statusTopStrip{margin-left:8px;margin-right:8px}
  .statusMiniSwitch{padding-inline:9px}
}

/* v5.5.8 Remove redundant Updates strip */
.statusTopStripNoUpdates{grid-template-columns:auto minmax(220px,1fr);justify-content:end;align-items:center}
.statusTopStripNoUpdates .statusMiniKeep{justify-content:flex-start}
.statusTopStripNoUpdates .statusMiniSwitch{width:100%}
@media(max-width:780px){
  .statusTopStripNoUpdates{grid-template-columns:auto minmax(0,1fr);gap:7px}
  .statusTopStripNoUpdates .statusMiniKeep{grid-column:auto;justify-content:flex-start}
  .statusTopStripNoUpdates .statusMiniKeep .statusRetentionLabel{display:none}
  .statusTopStripNoUpdates .statusMiniKeep .statusRetentionForm label{padding:0 6px}
  .statusTopStripNoUpdates .statusMiniSwitch{min-width:0}
}
@media(max-width:430px){
  .statusTopStripNoUpdates{grid-template-columns:1fr auto}
  .statusTopStripNoUpdates .statusMiniSwitch{grid-column:1/-1}
  .statusTopStripNoUpdates .statusMiniKeep{grid-row:1;justify-self:start}
}

/* v5.5.9 Status utility panel cleanup */
.statusUtilityPanel{margin:0 0 12px;padding:10px;border:1px solid #1b3139;border-radius:18px;background:linear-gradient(180deg,rgba(12,24,30,.96),rgba(10,19,24,.98));box-shadow:0 10px 28px rgba(0,0,0,.08)}
.statusUtilityPanel .statusSearchWrap{margin:0!important}
.statusUtilityPanel .statusSearchBar{margin:0!important;border-radius:14px!important;background:#0f1c22!important;border-color:#20343d!important;box-shadow:none!important}
.statusTopStripNoUpdates{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px;padding:0}
.statusTopStripNoUpdates .statusMiniKeep{justify-content:flex-start;flex:0 0 auto}
.statusTopStripNoUpdates .statusMiniKeep .statusRetentionForm label{min-height:38px;padding:0 8px;border-radius:12px;background:#0f1c22;border-color:#21363f;box-shadow:none}
.statusTopStripNoUpdates .statusMiniKeep .statusRetentionLabel{font-size:9.5px;letter-spacing:.01em}
.statusTopStripNoUpdates .statusMiniKeep .statusRetentionForm select{min-height:30px;min-width:90px;padding:4px 26px 4px 9px;border-radius:9px;background:#13232b;border-color:#28404a;font-size:10px}
.statusTopStripNoUpdates .statusMiniSwitch{width:auto;min-width:220px;max-width:280px;min-height:38px;padding:0 12px;border-radius:12px;background:#0f1c22;border-color:#21363f;box-shadow:none}
.statusTopStripNoUpdates .statusMiniLabel{font-size:11px}
.statusTopStripNoUpdates .statusMiniCount{min-height:22px;padding:0 7px;font-size:8px}
.statusTopStripNoUpdates .statusMiniCount b{font-size:10px}

@media(max-width:780px){
  .statusUtilityPanel{margin:0 10px 8px;padding:8px;border-radius:16px}
  .statusTopStripNoUpdates{flex-wrap:wrap;gap:8px;margin-bottom:8px}
  .statusTopStripNoUpdates .statusMiniKeep{order:1}
  .statusTopStripNoUpdates .statusMiniSwitch{order:2;min-width:0;max-width:none;flex:1 1 100%}
  .statusTopStripNoUpdates .statusMiniKeep .statusRetentionForm label{min-height:34px;padding:0 7px}
  .statusTopStripNoUpdates .statusMiniKeep .statusRetentionLabel{display:block;font-size:8px}
  .statusTopStripNoUpdates .statusMiniKeep .statusRetentionForm select{min-height:27px;min-width:84px;font-size:8px}
  .statusUtilityPanel .statusSearchBar{border-radius:12px!important}
}

@media(max-width:390px){
  .statusUtilityPanel{margin-left:8px;margin-right:8px;padding:7px}
}


/* v5.5.10 Compact status search bar */
.statusUtilityPanel .statusSearchBar{grid-template-columns:22px minmax(0,1fr) 148px auto!important;gap:5px!important;padding:5px!important;border-radius:12px!important}
.statusUtilityPanel .statusSearchIcon{width:22px!important;height:22px!important;align-self:center!important}
.statusUtilityPanel .statusSearchIcon svg{width:14px!important;height:14px!important}
.statusUtilityPanel .statusSearchBar input,.statusUtilityPanel .statusSearchBar select{min-height:32px!important;border-radius:9px!important;padding:0 10px!important;font-size:9.5px!important}
.statusUtilityPanel .statusSearchBar button{min-height:32px!important;padding:0 11px!important;border-radius:9px!important;font-size:9px!important}
.statusUtilityPanel .statusSearchBar select{min-width:0!important}

@media(max-width:780px){
  .statusUtilityPanel .statusSearchBar{grid-template-columns:22px minmax(0,1fr) auto!important;gap:5px!important;padding:5px!important}
  .statusUtilityPanel .statusSearchIcon{width:22px!important;height:32px!important}
  .statusUtilityPanel .statusSearchBar input{grid-column:2/4!important;min-height:32px!important;font-size:9px!important}
  .statusUtilityPanel .statusSearchBar select{grid-column:1/3!important;min-height:30px!important;font-size:8px!important}
  .statusUtilityPanel .statusSearchBar button{min-width:66px!important;min-height:30px!important;font-size:8px!important}
}


/* v5.5.11 Icon-only status search button */
.statusSearchSubmit{width:32px!important;min-width:32px!important;min-height:32px!important;padding:0!important;border-radius:9px!important}
.statusSearchSubmit svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.statusUtilityPanel .statusSearchBar{grid-template-columns:22px minmax(0,1fr) 148px 32px!important}
@media(max-width:780px){
  .statusUtilityPanel .statusSearchBar{grid-template-columns:22px minmax(0,1fr) 32px!important}
  .statusUtilityPanel .statusSearchBar button{min-width:32px!important;width:32px!important;min-height:30px!important}
}

/* v5.5.12 Clean compact status controls */
.statusUtilityPanel.statusUtilityCompact{margin:0 0 10px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.statusUtilityToolbar{display:flex;align-items:center;gap:8px;min-height:38px}
.statusUtilityToolbar .statusMiniKeep{display:flex;justify-content:flex-start;flex:0 0 auto}
.statusUtilityToolbar .statusMiniKeep .statusRetentionForm{margin:0}
.statusUtilityToolbar .statusMiniKeep .statusRetentionForm label{display:flex;align-items:center;gap:7px;min-height:38px;padding:0 7px 0 10px;border:1px solid #20353e;border-radius:12px;background:#0e1b21;box-shadow:none}
.statusUtilityToolbar .statusMiniKeep .statusRetentionLabel{margin:0;color:#8397a0;font-size:9px;font-weight:750;white-space:nowrap}
.statusUtilityToolbar .statusMiniKeep .statusRetentionForm select{min-width:88px;min-height:28px;padding:3px 24px 3px 8px;border:1px solid #29414a;border-radius:8px;background:#13232b;color:#e5edf1;font-size:9px;font-weight:800}
.statusArchiveShortcut{margin-left:auto!important;min-width:184px!important;max-width:230px!important;min-height:38px!important;padding:0 10px!important;border:1px solid #20353e!important;border-radius:12px!important;background:#0e1b21!important;box-shadow:none!important}
.statusArchiveShortcut .statusMiniLabel{font-size:10px!important}
.statusArchiveShortcut .statusMiniCount{min-height:21px!important;padding:0 7px!important;font-size:7.5px!important}
.statusArchiveShortcut .statusMiniCount b{font-size:9px!important}
.statusSearchToggle{width:38px;height:38px;min-width:38px;min-height:38px;padding:0;border:1px solid #20353e;border-radius:12px;background:#0e1b21;color:#7e939c;display:grid;place-items:center;box-shadow:none}
.statusSearchToggle:hover,.statusSearchToggle.active{border-color:rgba(37,211,102,.28);background:rgba(37,211,102,.08);color:#70dda2}
.statusSearchToggle svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.statusSearchDrawer{display:none!important;justify-content:flex-end;margin:8px 0 0!important;padding:0!important}
.statusSearchDrawer.searchOpen{display:flex!important}
.statusSearchDrawer .statusSearchBar{width:min(590px,100%)!important;grid-template-columns:20px minmax(0,1fr) 132px 30px!important;gap:5px!important;margin:0!important;padding:4px!important;border:1px solid #20353e!important;border-radius:11px!important;background:#0e1b21!important;box-shadow:0 8px 20px rgba(0,0,0,.06)!important}
.statusSearchDrawer .statusSearchIcon{width:20px!important;height:30px!important}
.statusSearchDrawer .statusSearchIcon svg{width:13px!important;height:13px!important}
.statusSearchDrawer .statusSearchBar input,.statusSearchDrawer .statusSearchBar select{grid-column:auto!important;grid-row:auto!important;min-height:30px!important;padding:0 8px!important;border:0!important;border-radius:8px!important;background:#122129!important;color:var(--text)!important;font-size:9px!important}
.statusSearchDrawer .statusSearchBar select{display:block!important;min-width:0!important}
.statusSearchDrawer .statusSearchSubmit{display:inline-grid!important;grid-column:auto!important;grid-row:auto!important;width:30px!important;min-width:30px!important;height:30px!important;min-height:30px!important;padding:0!important;border-radius:8px!important}
.statusSearchDrawer .statusSearchSubmit svg{width:13px!important;height:13px!important}

@media(max-width:780px){
  .statusUtilityPanel.statusUtilityCompact{margin:0 10px 7px!important;padding:0!important}
  .statusUtilityToolbar{display:grid;grid-template-columns:minmax(82px,1fr) minmax(116px,auto) 36px;gap:6px;min-height:36px}
  .statusUtilityToolbar .statusMiniKeep{min-width:0}
  .statusUtilityToolbar .statusMiniKeep .statusRetentionForm,.statusUtilityToolbar .statusMiniKeep .statusRetentionForm label{width:100%}
  .statusUtilityToolbar .statusMiniKeep .statusRetentionForm label{min-height:36px;padding:0 5px;border-radius:10px}
  .statusUtilityToolbar .statusMiniKeep .statusRetentionLabel{display:none!important}
  .statusUtilityToolbar .statusMiniKeep .statusRetentionForm select{width:100%;min-width:0;min-height:28px;padding:3px 22px 3px 7px;font-size:8px}
  .statusArchiveShortcut{margin-left:0!important;width:100%!important;min-width:0!important;max-width:none!important;min-height:36px!important;padding:0 8px!important;border-radius:10px!important}
  .statusArchiveShortcut .statusMiniLabel{font-size:9px!important}
  .statusArchiveShortcut .statusMiniCount{min-height:19px!important;padding:0 6px!important}
  .statusArchiveShortcut .statusMiniCount small{display:none!important}
  .statusSearchToggle{width:36px;height:36px;min-width:36px;min-height:36px;border-radius:10px}
  .statusSearchDrawer{margin-top:6px!important}
  .statusSearchDrawer .statusSearchBar{width:100%!important;grid-template-columns:18px minmax(0,1fr) 92px 30px!important;gap:4px!important;padding:4px!important;border-radius:10px!important}
  .statusSearchDrawer .statusSearchIcon{width:18px!important;height:30px!important}
  .statusSearchDrawer .statusSearchBar input,.statusSearchDrawer .statusSearchBar select{grid-column:auto!important;grid-row:auto!important;min-height:30px!important;padding:0 7px!important;font-size:8.2px!important}
  .statusSearchDrawer .statusSearchSubmit{grid-column:auto!important;grid-row:auto!important;min-width:30px!important;width:30px!important;min-height:30px!important;height:30px!important}
  .statusMobileSearchToggle{display:none!important}
  .statusFilterBar{padding-right:10px!important}
}

@media(max-width:390px){
  .statusUtilityPanel.statusUtilityCompact{margin-left:8px!important;margin-right:8px!important}
  .statusUtilityToolbar{grid-template-columns:minmax(70px,1fr) minmax(104px,auto) 34px;gap:5px}
  .statusSearchToggle{width:34px;height:34px;min-width:34px;min-height:34px}
  .statusArchiveShortcut .statusMiniLabel{font-size:8.5px!important}
  .statusSearchDrawer .statusSearchBar{grid-template-columns:17px minmax(0,1fr) 84px 28px!important;gap:3px!important;padding:3px!important}
  .statusSearchDrawer .statusSearchSubmit{width:28px!important;min-width:28px!important;height:28px!important;min-height:28px!important}
}

/* v5.5.13 Status controls responsive polish */
.statusUtilityPanel.statusUtilityCompact{margin:0 0 10px!important;padding:0!important}
.statusUtilityToolbar{
  display:grid!important;
  grid-template-columns:auto 184px 36px!important;
  align-items:center!important;
  gap:0!important;
  width:max-content!important;
  max-width:100%!important;
  min-height:42px!important;
  padding:4px!important;
  border:1px solid #20343d!important;
  border-radius:14px!important;
  background:#0d1a20!important;
  box-shadow:0 8px 22px rgba(0,0,0,.055)!important;
}
.statusUtilityToolbar .statusMiniKeep{min-width:0!important}
.statusUtilityToolbar .statusMiniKeep .statusRetentionForm label{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  min-height:34px!important;
  padding:0 9px!important;
  border:0!important;
  border-radius:9px!important;
  background:transparent!important;
}
.statusControlIcon{width:20px;height:20px;flex:0 0 20px;display:grid;place-items:center;border-radius:7px;background:#13262d;color:#6e9aa2}
.statusControlIcon svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.statusRetentionShort,.statusArchiveShort{display:none}
.statusUtilityToolbar .statusMiniKeep .statusRetentionLabel{font-size:9px!important;color:#8599a2!important;font-weight:750!important}
.statusUtilityToolbar .statusMiniKeep .statusRetentionForm select{
  min-width:82px!important;
  min-height:28px!important;
  padding:3px 24px 3px 8px!important;
  border:1px solid #29414a!important;
  border-radius:8px!important;
  background:#12232a!important;
  color:#e7eff2!important;
  font-size:9px!important;
}
.statusArchiveShortcut{
  display:grid!important;
  grid-template-columns:20px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:7px!important;
  width:184px!important;
  min-width:0!important;
  max-width:none!important;
  min-height:34px!important;
  margin:0!important;
  padding:0 8px!important;
  border:0!important;
  border-left:1px solid #20343d!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.statusArchiveShortcut:hover{background:#11232a!important}
.statusArchiveShortcut.active{background:rgba(37,211,102,.07)!important;color:#e9f5ef!important}
.statusArchiveShortcut .statusControlIcon{background:#13262d}
.statusArchiveShortcut.active .statusControlIcon{background:rgba(37,211,102,.10);color:#6ade9d}
.statusArchiveShortcut .statusMiniLabel{min-width:0;font-size:9.5px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.statusArchiveShortcut .statusMiniCount{min-height:20px!important;padding:0 6px!important;font-size:7px!important}
.statusArchiveShortcut .statusMiniCount b{font-size:9px!important}
.statusSearchToggle{
  width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;
  margin-left:2px!important;padding:0!important;border:0!important;border-left:1px solid #20343d!important;
  border-radius:0 9px 9px 0!important;background:transparent!important;color:#7f949d!important;
}
.statusSearchToggle:hover,.statusSearchToggle.active{background:#11232a!important;color:#71dda2!important;border-color:#20343d!important}
.statusSearchDrawer{justify-content:flex-start!important;margin:7px 0 0!important}
.statusSearchDrawer .statusSearchBar{
  width:min(520px,100%)!important;
  grid-template-columns:minmax(0,1fr) 126px 30px!important;
  gap:5px!important;
  padding:4px!important;
  border:1px solid #20343d!important;
  border-radius:11px!important;
  background:#0d1a20!important;
  box-shadow:0 8px 22px rgba(0,0,0,.055)!important;
}
.statusSearchDrawer .statusSearchBar input,.statusSearchDrawer .statusSearchBar select{
  grid-column:auto!important;grid-row:auto!important;min-height:30px!important;padding:0 9px!important;
  border:0!important;border-radius:8px!important;background:#12232a!important;color:var(--text)!important;font-size:9px!important;
}
.statusSearchDrawer .statusSearchSubmit{display:grid!important;width:30px!important;min-width:30px!important;height:30px!important;min-height:30px!important;padding:0!important}

@media(max-width:780px){
  .statusUtilityPanel.statusUtilityCompact{margin:0 10px 7px!important}
  .statusUtilityToolbar{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) 36px!important;
    width:100%!important;
    min-height:42px!important;
    padding:3px!important;
    border-radius:13px!important;
  }
  .statusUtilityToolbar .statusMiniKeep,.statusUtilityToolbar .statusMiniKeep .statusRetentionForm,.statusUtilityToolbar .statusMiniKeep .statusRetentionForm label{width:100%!important;min-width:0!important}
  .statusUtilityToolbar .statusMiniKeep .statusRetentionForm label{gap:5px!important;padding:0 6px!important}
  .statusUtilityToolbar .statusMiniKeep .statusRetentionLabel{min-width:0!important}
  .statusUtilityToolbar .statusMiniKeep .statusRetentionForm select{width:auto!important;min-width:72px!important;max-width:86px!important;margin-left:auto!important;font-size:8px!important}
  .statusArchiveShortcut{width:100%!important;min-width:0!important;padding:0 7px!important;gap:5px!important}
  .statusArchiveShortcut .statusMiniLabel{font-size:9px!important}
  .statusArchiveShortcut .statusMiniCount small{display:none!important}
  .statusSearchToggle{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important}
  .statusSearchDrawer{margin-top:6px!important}
  .statusSearchDrawer .statusSearchBar{width:100%!important;grid-template-columns:minmax(0,1fr) 98px 30px!important;gap:4px!important;padding:4px!important}
  .statusSearchDrawer .statusSearchBar input,.statusSearchDrawer .statusSearchBar select{min-height:30px!important;font-size:8.3px!important}
}

@media(max-width:520px){
  .statusRetentionLong,.statusArchiveLong{display:none!important}
  .statusRetentionShort,.statusArchiveShort{display:inline!important}
  .statusControlIcon{width:18px;height:18px;flex-basis:18px}
  .statusControlIcon svg{width:11px;height:11px}
  .statusUtilityToolbar .statusMiniKeep .statusRetentionForm select{min-width:66px!important;max-width:76px!important;padding-left:6px!important;padding-right:20px!important}
  .statusSearchDrawer .statusSearchBar{grid-template-columns:minmax(0,1fr) 30px!important;grid-template-rows:30px 30px!important}
  .statusSearchDrawer .statusSearchBar input{grid-column:1!important;grid-row:1!important}
  .statusSearchDrawer .statusSearchBar select{grid-column:1/3!important;grid-row:2!important}
  .statusSearchDrawer .statusSearchSubmit{grid-column:2!important;grid-row:1!important}
}

@media(max-width:390px){
  .statusUtilityPanel.statusUtilityCompact{margin-left:8px!important;margin-right:8px!important}
  .statusUtilityToolbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 34px!important;gap:0!important}
  .statusUtilityToolbar .statusMiniKeep .statusRetentionForm label{padding-inline:5px!important}
  .statusUtilityToolbar .statusMiniKeep .statusRetentionLabel{font-size:8px!important}
  .statusArchiveShortcut .statusMiniLabel{font-size:8.2px!important}
  .statusSearchToggle{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important}
}


/* v5.5.14 Status toolbar cleanup */
.statusAppHeader{justify-content:flex-start!important;align-items:flex-start!important}
.statusAppTitle{max-width:620px}
.statusUtilityPanel.statusUtilityCompact{display:flex;flex-direction:column;width:min(100%,560px);margin:0 0 12px;padding:0;background:transparent!important;border:0!important;box-shadow:none!important}
.statusUtilityToolbar{display:grid!important;grid-template-columns:minmax(0,208px) minmax(0,210px) 38px;align-items:center;gap:8px;width:100%;padding:8px 10px;border:1px solid #1f343d;border-radius:16px;background:linear-gradient(180deg,#0f1c22,#0d181e);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.statusUtilityToolbar .statusMiniKeep,.statusArchiveShortcut{min-width:0}
.statusUtilityToolbar .statusMiniKeep .statusRetentionForm label{min-height:40px!important;padding:0 8px 0 10px!important;border-radius:12px!important;background:#102028!important;border-color:#20353e!important}
.statusUtilityToolbar .statusMiniKeep .statusRetentionForm select{min-width:84px!important;min-height:30px!important}
.statusArchiveShortcut{margin-left:0!important;width:100%!important;min-width:0!important;max-width:none!important;min-height:40px!important;padding:0 10px!important;border-radius:12px!important;background:#102028!important;border-color:#20353e!important}
.statusArchiveShortcut .statusMiniLabel{font-size:10px!important}
.statusArchiveShortcut .statusMiniCount{min-width:46px;justify-content:center;background:rgba(255,255,255,.045)!important}
.statusArchiveShortcut .statusMiniCount.is-empty{background:rgba(255,255,255,.03)!important;color:#7f949d!important}
.statusArchiveShortcut .statusMiniCount.is-empty b{color:#c7d3d8!important}
.statusArchiveShortcut .statusMiniCount.is-empty small{opacity:.8}
.statusSearchToggle{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;border-radius:12px!important;background:#102028!important;border-color:#20353e!important}
.statusSearchDrawer{display:none!important;width:min(100%,560px);margin-top:8px!important}
.statusSearchDrawer.searchOpen{display:flex!important}
.statusSearchDrawer .statusSearchBar{width:100%!important;grid-template-columns:minmax(0,1fr) 132px 32px!important;gap:6px!important;padding:6px!important;border-radius:14px!important;border:1px solid #1f343d!important;background:#0f1c22!important;box-shadow:none!important}
.statusSearchDrawer .statusSearchBar input,.statusSearchDrawer .statusSearchBar select{min-height:34px!important;border-radius:10px!important;padding:0 10px!important;background:#12212a!important;font-size:9px!important}
.statusSearchDrawer .statusSearchSubmit{width:32px!important;min-width:32px!important;min-height:34px!important;border-radius:10px!important}
.statusFilterBar{align-items:center!important}
.statusMobileSearchToggle{display:none!important}

@media(max-width:780px){
  .statusAppHeader{padding:12px 14px 8px!important}
  .statusUtilityPanel.statusUtilityCompact{width:auto!important;margin:0 10px 8px!important}
  .statusUtilityToolbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 36px!important;gap:6px!important;padding:7px!important;border-radius:15px!important}
  .statusUtilityToolbar .statusMiniKeep .statusRetentionForm label{min-height:38px!important;padding:0 7px!important}
  .statusUtilityToolbar .statusMiniKeep .statusRetentionLabel{display:flex!important;min-width:0!important;font-size:8.2px!important}
  .statusRetentionLong{display:none!important}
  .statusRetentionShort,.statusArchiveShort{display:inline!important}
  .statusArchiveLong{display:none!important}
  .statusUtilityToolbar .statusMiniKeep .statusRetentionForm select{min-width:68px!important;max-width:78px!important;padding:3px 21px 3px 7px!important;font-size:8px!important}
  .statusArchiveShortcut{min-height:38px!important;padding:0 8px!important;gap:6px!important}
  .statusArchiveShortcut .statusMiniLabel{font-size:8.6px!important}
  .statusArchiveShortcut .statusMiniCount{min-width:32px!important;padding:0 5px!important}
  .statusArchiveShortcut .statusMiniCount small{display:none!important}
  .statusSearchToggle{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important}
  .statusSearchDrawer{width:100%!important;margin-top:7px!important}
  .statusSearchDrawer .statusSearchBar{grid-template-columns:minmax(0,1fr) 108px 32px!important;gap:5px!important;padding:5px!important;border-radius:13px!important}
  .statusSearchDrawer .statusSearchBar input,.statusSearchDrawer .statusSearchBar select{min-height:32px!important;font-size:8.5px!important}
  .statusSearchDrawer .statusSearchSubmit{min-height:32px!important}
}

@media(max-width:520px){
  .statusUtilityToolbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 34px!important}
  .statusUtilityToolbar .statusMiniKeep .statusRetentionForm label{padding-inline:6px!important;gap:5px!important}
  .statusControlIcon{width:18px!important;height:18px!important;flex:0 0 18px!important}
  .statusControlIcon svg{width:11px!important;height:11px!important}
  .statusUtilityToolbar .statusMiniKeep .statusRetentionForm select{min-width:64px!important;max-width:74px!important}
  .statusArchiveShortcut .statusMiniLabel{font-size:8.1px!important}
  .statusSearchDrawer .statusSearchBar{grid-template-columns:minmax(0,1fr) 32px!important;grid-template-rows:32px 32px!important}
  .statusSearchDrawer .statusSearchBar input{grid-column:1!important;grid-row:1!important}
  .statusSearchDrawer .statusSearchBar select{grid-column:1/3!important;grid-row:2!important}
  .statusSearchDrawer .statusSearchSubmit{grid-column:2!important;grid-row:1!important}
}

@media(max-width:390px){
  .statusUtilityPanel.statusUtilityCompact{margin-left:8px!important;margin-right:8px!important}
  .statusUtilityToolbar{gap:5px!important;padding:6px!important}
  .statusUtilityToolbar .statusMiniKeep .statusRetentionLabel{font-size:7.8px!important}
  .statusArchiveShortcut .statusMiniLabel{font-size:7.8px!important}
  .statusSearchToggle{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important}
}

/* v5.5.20 Status contact diagnosis on Accounts */

/* v5.5.22 Clear unidentified statuses */

/* v5.5.25 Contacts card — rebuilt for a real hierarchy instead of stacked prose */
.contactCard{margin:10px 0 14px;padding:12px;border:1px solid #203943;border-radius:12px;background:#0b171d}
.contactCardHead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.contactCardHead h3{margin:0;font-size:12px;font-weight:700;letter-spacing:.01em;color:#e6eef1}
.contactState{display:inline-flex;align-items:center;gap:5px;font-size:9px;line-height:1.4;color:#91a5af}
.contactState::before{content:"";width:6px;height:6px;border-radius:50%;background:#5d747f;flex:0 0 auto}
.contactState.is-ok{color:#69d99e}.contactState.is-ok::before{background:#25d366}
.contactState.is-wait{color:#dbbd79}.contactState.is-wait::before{background:#f4ba4a}
.contactState.is-bad{color:#f09a92}.contactState.is-bad::before{background:#e5675c}

/* Figures instead of a dot-joined sentence: the numbers are the content. */
.contactFigures{display:flex;flex-wrap:wrap;gap:6px;margin:11px 0 0;padding:0}
.contactFigures>div{flex:1 1 68px;min-width:68px;padding:7px 9px;border:1px solid #1c3039;border-radius:9px;background:#0f1c23}
.contactFigures dt{margin:0;font-size:8.5px;line-height:1.3;color:#7e939d;font-weight:500}
.contactFigures dd{margin:2px 0 0;font-size:15px;line-height:1.15;font-weight:700;color:#e6eef1;font-variant-numeric:tabular-nums}
.contactFigures>div.is-warn dd{color:#dbbd79}
.contactFigures.is-inline{margin-top:7px;gap:5px}
.contactFigures.is-inline>div{flex:1 1 60px;min-width:60px;padding:5px 7px;background:transparent;border-color:#22333b}
.contactFigures.is-inline dd{font-size:12.5px}

.contactNote{margin-top:11px;padding:9px 10px 9px 11px;border:1px solid #22333b;border-left-width:2px;border-radius:9px;background:#0f1c23}
.contactNote.is-ok{border-left-color:#25d366}
.contactNote.is-wait{border-left-color:#f4ba4a}
.contactNote.is-bad{border-left-color:#e5675c}
.contactNoteHead{margin:0;font-size:9px;font-weight:700;color:#c5d3d9}
.contactNote p:not(.contactNoteHead){margin:7px 0 0;max-width:62ch;font-size:9px;line-height:1.55;color:#8ea2ac}

.contactCardActions{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:7px;margin-top:12px}
.contactCardActions form{display:contents}
.contactBtn{display:flex;align-items:center;justify-content:center;width:100%;min-height:38px;padding:8px 10px;border:1px solid #27414b;border-radius:9px;background:#132229;color:#dfe8eb;font-size:10px;font-weight:600;line-height:1.25;text-align:center;cursor:pointer}
.contactBtn:hover:not(:disabled){background:#172a32;border-color:#31505c}
.contactBtn:focus-visible{outline:2px solid #25d366;outline-offset:2px}
.contactBtn:disabled{opacity:.45;cursor:not-allowed}
.contactBtn.is-primary{background:rgba(37,211,102,.12);border-color:rgba(37,211,102,.34);color:#7ce0a6}
.contactBtn.is-primary:hover:not(:disabled){background:rgba(37,211,102,.18)}
.contactBtn.is-quiet{color:#dbbd79;border-color:#3a3320}
.contactCardActions .contactCountryCode{grid-column:1/-1;min-height:38px}

/* v5.5.26 Group author tints — same person, same colour, like the real client */
.bubbleAuthor.tone0{color:#53bdeb}
.bubbleAuthor.tone1{color:#e542a3}
.bubbleAuthor.tone2{color:#25d366}
.bubbleAuthor.tone3{color:#f2a33c}
.bubbleAuthor.tone4{color:#a66bff}
.bubbleAuthor.tone5{color:#ff8f7a}
.bubbleAuthor.tone6{color:#66d6c1}
.bubbleAuthor.tone7{color:#d9c76a}

/* v5.5.27 Chat header — keep it a slim bar and never let an icon size itself.
   The action row is a single horizontal group; icons are pinned so a missing
   width attribute can no longer expand an SVG to fill its box. */
.chatStage .contactBar .contactActions{display:flex;align-items:center;gap:6px;flex:0 0 auto;margin-left:auto}
.chatStage .contactBar .contactActions form{display:flex;align-items:center;margin:0}
.chatStage .contactBar .compactAction{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:auto;min-width:0;min-height:34px;padding:0 10px;white-space:nowrap}
.chatStage .contactBar .compactAction svg,
.chatStage .contactBar .mobileChatMenuButton svg{width:17px;height:17px;flex:0 0 17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.chatStage .contactBar .contactAvatar{width:42px;height:42px;flex:0 0 42px}
.chatStage .contactBar{min-height:0;padding-top:8px;padding-bottom:8px}
.chatStage .contactBar .contactMain{align-items:center;gap:10px}
.chatStage .contactBar .contactText{min-width:0}
.chatStage .contactBar h2{font-size:14px;line-height:1.25;margin:0}
.chatStage .contactBar .contactNumber{font-size:10.5px;line-height:1.35}
.chatStage .contactBar .contactSub{font-size:9.5px;line-height:1.35}

/* v5.5.28 Chats — reading pass.
   This is an archive, not a messenger: you read it back, you cannot reply. So
   the work here is legibility at density, quiet time structure, and making the
   states only an archive has (edited / revoked / local delete) read as record
   annotations rather than alerts. Scoped to .chatWorkspace throughout. */

/* --- rail ---------------------------------------------------------------- */
.chatWorkspace .chatRailHeader h1{font-size:19px;font-weight:700;letter-spacing:-.01em;margin:0}
.chatWorkspace .accountSwitcher select{min-height:36px;font-size:11.5px;border-radius:10px}
.chatWorkspace .chatTypeTabs{gap:2px;padding:3px;border-radius:11px;background:#101d24;border:1px solid #1d2f38}
.chatWorkspace .chatTypeTabs a{flex:1;text-align:center;padding:6px 8px;border-radius:8px;font-size:11.5px;font-weight:600;color:#8ba0aa;border:0;background:transparent}
.chatWorkspace .chatTypeTabs a.active{background:#1c3038;color:#e7eef1}

/* one field, not a field plus a button standing beside it */
.chatWorkspace .chatSearch{display:block;position:relative}
.chatWorkspace .chatSearch .searchField{display:flex;align-items:center;gap:7px;min-height:38px;padding:0 38px 0 11px;border:1px solid #1d2f38;border-radius:11px;background:#101d24}
.chatWorkspace .chatSearch .searchField:focus-within{border-color:#2c5b4a;background:#122229}
.chatWorkspace .chatSearch .searchIcon svg{width:15px;height:15px;stroke:#6e858f;fill:none;stroke-width:1.9;stroke-linecap:round}
.chatWorkspace .chatSearch input[name="q"]{flex:1;min-width:0;border:0;background:transparent;outline:0;color:#e7eef1;font-size:12.5px}
.chatWorkspace .chatSearch input[name="q"]::placeholder{color:#637983}
.chatWorkspace .iconSearchBtn{position:absolute;top:50%;right:5px;transform:translateY(-50%);display:grid;place-items:center;width:28px;height:28px;min-height:0;padding:0;border:0;border-radius:8px;background:transparent;color:#7f959f}
.chatWorkspace .iconSearchBtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chatWorkspace .iconSearchBtn:hover{background:#1a2b33;color:#e7eef1}

.chatWorkspace .chatRailMeta{display:flex;align-items:baseline;gap:5px;padding:2px 2px 0;color:#637983;font-size:10.5px;border:0;background:transparent}
.chatWorkspace .chatRailMeta strong{color:#8ba0aa;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}

/* --- chat rows ----------------------------------------------------------- */
/* Three columns so a long name truncates instead of shoving the time away. */
.chatWorkspace .chatRowPro{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:11px;position:relative;padding:9px 11px 9px 13px;border:0;border-radius:12px;background:transparent}
.chatWorkspace .chatRowPro+.chatRowPro{margin-top:1px}
.chatWorkspace .chatRowPro:hover{background:#111e25}
.chatWorkspace .chatRowPro.active{background:#132630}
/* The row already carries its own left marker: an inset box-shadow that
   follows the row's corner radius. v5.5.28 added a second straight bar on top
   of it, which read as a stray green capsule beside the row. One marker. */
.chatWorkspace .chatRowPro .chatAvatar{width:46px;height:46px;flex:0 0 46px}
.chatWorkspace .chatRowBody{min-width:0}
.chatWorkspace .chatRowTop{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:8px}
.chatWorkspace .chatRowTop strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600;letter-spacing:-.005em;color:#e7eef1}
.chatWorkspace .chatRowTop time{flex:0 0 auto;font-size:10.5px;font-weight:500;color:#637983;font-variant-numeric:tabular-nums}
.chatWorkspace .chatRowPro.active .chatRowTop time{color:#7f959f}
.chatWorkspace .chatNumber{margin-top:1px;font-size:10.5px;line-height:1.35;color:#5f7580;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chatWorkspace .chatPreview{display:flex;align-items:center;gap:6px;margin-top:3px;min-width:0}
.chatWorkspace .chatPreviewText{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:1.4;color:#8ba0aa}
.chatWorkspace .chatPreview.deletedPreview .chatPreviewText{color:#6d8089;font-style:italic}

/* archive annotations: present, never loud */
.chatWorkspace .miniBadge{padding:1px 6px;border-radius:999px;font-size:8.5px;font-weight:700;font-style:normal;letter-spacing:.01em;color:#7f959f;background:#16242c;border:1px solid #223640}
.chatWorkspace .miniBadge.danger{color:#e59a93;background:rgba(229,103,92,.09);border-color:rgba(229,103,92,.2)}
.chatWorkspace .miniBadge.warn{color:#d9bd7c;background:rgba(244,186,74,.08);border-color:rgba(244,186,74,.18)}

/* --- thread -------------------------------------------------------------- */
.chatWorkspace .dateDivider span,.chatWorkspace .loadOlderButton{padding:4px 11px;border-radius:999px;border:1px solid #1d2f38;background:#111e25;color:#7f959f;font-size:10px;font-weight:600}
.chatWorkspace .proBubble{max-width:min(560px,74%);padding:7px 10px 5px;border-radius:12px;font-size:13.5px;line-height:1.45}
.chatWorkspace .proBubbleRow.theirs .proBubble{border-top-left-radius:5px;background:#16242c;color:#e7eef1}
.chatWorkspace .proBubbleRow.mine .proBubble{border-top-right-radius:5px;background:#10432f;color:#e9f6ef}
.chatWorkspace .bubbleAuthor{margin-bottom:2px;font-size:11.5px;font-weight:700;letter-spacing:-.005em}
.chatWorkspace .bubbleFooter{margin-top:2px;gap:4px;font-size:9.5px;color:#7f959f;font-variant-numeric:tabular-nums}
.chatWorkspace .proBubbleRow.mine .bubbleFooter{color:#8fc7ab}
.chatWorkspace .quotedReply{margin-bottom:4px;padding:5px 8px;border-left:2.5px solid #25d366;border-radius:6px;background:rgba(255,255,255,.045)}
.chatWorkspace .quotedReply small{display:block;font-size:9.5px;font-weight:700;color:#6fd39b;letter-spacing:.01em}
.chatWorkspace .quotedReply span{display:block;font-size:11.5px;line-height:1.4;color:#9db0b9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chatWorkspace .proBubble.isDeleted,.chatWorkspace .proBubble.isLocalDeleted{opacity:.72;font-style:italic}

/* --- footer -------------------------------------------------------------- */
.chatWorkspace .archiveStatusBar{padding:7px 12px;font-size:10px;color:#637983;border-top:1px solid #1d2f38;background:#0d181e}

/* v5.5.35 `contain-intrinsic-size:auto` alone is invalid CSS and is dropped,
   which left an older `auto 64px` in force: every row reserved 64px whether its
   content needed it or not. Kept because it is a defect, not a look. */
.chatWorkspace .proBubbleRow,.chatWorkspace .chatRowPro{content-visibility:visible;contain-intrinsic-size:none}

/* v5.5.39 Message rhythm only. Frames, widths and every other surface are left
   exactly as they are; this touches nothing but the bubbles and the space
   between them. */

/* Rows were reserving a fixed 64px each regardless of content, because
   `contain-intrinsic-size:auto` alone is invalid and gets dropped, leaving an
   older `auto 64px` in force. A one-line bubble needs about 48px. */
.chatWorkspace .proBubbleRow{content-visibility:visible;contain-intrinsic-size:none}

/* Turns from the same person belong together; the gap opens when the speaker
   changes. Flat spacing made every message look equally unrelated to the last. */
.chatWorkspace .proBubbleRow{margin:0}
.chatWorkspace .proBubbleRow+.proBubbleRow{margin-top:8px}
.chatWorkspace .proBubbleRow.mine+.proBubbleRow.mine,
.chatWorkspace .proBubbleRow.theirs+.proBubbleRow.theirs{margin-top:2px}

/* Only the first bubble of a run keeps its corner notch, so the run reads as one
   block rather than as separate boxes that happen to be adjacent. */
.chatWorkspace .proBubbleRow.theirs+.proBubbleRow.theirs .proBubble{border-bottom-left-radius:14px}
.chatWorkspace .proBubbleRow.mine+.proBubbleRow.mine .proBubble{border-bottom-right-radius:14px}

/* A little less air inside the bubble, and the timestamp closer to the text it
   belongs to. */
.chatWorkspace .proBubble{padding:6px 9px 5px;line-height:1.38}
.chatWorkspace .bubbleFooter{margin-top:1px}
.chatWorkspace .dateDivider{margin:12px 0 8px}

/* v5.5.40 The empty strip beside the bubbles.
   Measured before changing anything: the message column was capped at 830px in a
   958px viewport, leaving 59px of dead space on the left and 69px on the right
   (the extra ten being the scrollbar gutter). Those are the strips the arrows
   marked. They come down to about 24px.
   The column still has a ceiling: past roughly 1120px a line of text gets too
   long to track, so on a very wide screen the extra room goes to the frame, not
   to the paragraphs. Nothing outside the thread is touched. */
@media(min-width:781px){
  .chatWorkspace .threadInner{width:min(1120px,calc(100% - 48px));max-width:none;margin:0 auto}
}

/* v5.5.41 Message bubbles only — the two strips your arrows marked.
   Measured first, on your Hanife/Jehona thread at a 948px thread column:

     every single-line bubble        45.3px tall
     time on the same line as text   no, on all 14 sample bubbles
     second bubble of a run          still notched (see note 3)

   A one-line message needs about 29px. The other 16px were an entire second
   text line reserved for a five-character clock. That is the thing that reads
   as unfinished: "Pak" rendered as a tall box with a word on top and a time
   underneath. Frames, widths, rail, header, colours and bubble backgrounds are
   not touched — this block changes the inside of the bubble and nothing else. */

/* 1. The time sits on the text line, and wraps to its own line only when the
   text genuinely fills the width. The bubble becomes a wrapping row: body and
   footer share line one when they fit, and the footer drops below when they do
   not, which is what the reference client does in both cases. */
.chatWorkspace .proBubble{
  flex-direction:row;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:flex-start;
  column-gap:8px;
  row-gap:0;
}
.chatWorkspace .bubbleBody{flex:0 1 auto;min-width:0;max-width:100%}
/* The text starts at the left edge and the clock takes the right, via an auto
   margin rather than a justify rule: on a short message there is no free space
   for the margin to absorb, so the bubble still shrink-wraps to the two of them,
   while on a wide one (a photo caption, a reply) the clock holds the corner
   instead of the caption being dragged over to it.
   Written as `.proBubble .bubbleFooter` on purpose: media bubbles carry a
   three-class rule from v4.5.0 pinning the footer to margin-left:5px, and a
   two-class selector loses to it, which leaves the clock stranded under the
   left edge of a photo. */
.chatWorkspace .proBubble .bubbleFooter{flex:0 0 auto;margin-top:0;margin-left:auto;min-height:0;white-space:nowrap}

/* Anything that is a block in its own right keeps a full line to itself, so the
   row layout above never pulls an author label or a quote up beside the text. */
.chatWorkspace .bubbleAuthor,
.chatWorkspace .quotedReply,
.chatWorkspace .callEventCard,
.chatWorkspace .inlineMediaPreview,
.chatWorkspace .inlineMediaFile,
.chatWorkspace .voiceNotePlayer,
.chatWorkspace .mediaArchived,
.chatWorkspace .bubbleReactions{flex:1 0 100%;max-width:100%}

/* 2. The clock was 9px against 13.5px text — small enough to read as a caption
   that fell off something rather than part of the message. */
.chatWorkspace .bubbleFooter time{font-size:10.5px;font-variant-numeric:tabular-nums;letter-spacing:.1px}

/* 3. v5.5.39 meant to drop the corner notch on the second and later bubbles of
   a run, but it reset the bottom corners while the notch is on the top one, so
   every bubble in a run kept its notch and gained a 14px bottom corner the rest
   of the thread does not have. Correct corner, and the bottom put back to 12px. */
.chatWorkspace .proBubbleRow.theirs+.proBubbleRow.theirs .proBubble{border-top-left-radius:12px;border-bottom-left-radius:12px}
.chatWorkspace .proBubbleRow.mine+.proBubbleRow.mine .proBubble{border-top-right-radius:12px;border-bottom-right-radius:12px}

/* 4. With the bubbles no longer double height, the grouping from v5.5.39 is
   finally visible, so the gap between speakers can carry it: 2px inside a run,
   10px when the speaker changes. */
.chatWorkspace .proBubbleRow+.proBubbleRow{margin-top:10px}
.chatWorkspace .proBubbleRow.mine+.proBubbleRow.mine,
.chatWorkspace .proBubbleRow.theirs+.proBubbleRow.theirs{margin-top:2px}

/* 5. One notch per bubble. Two rules from different eras were both live: an old
   one putting the notch on the bottom corner and a newer one putting it on the
   top, so every bubble carried a sharp corner at *both* ends of one side and
   read as a flag rather than a bubble. Outgoing also kept a 14px left side while
   incoming used 12px, so the two columns were not the same shape. Top notch
   only, 12px everywhere else, both sides equal. */
.chatWorkspace .proBubbleRow.theirs .proBubble{border-top-right-radius:12px;border-bottom-right-radius:12px;border-bottom-left-radius:12px}
.chatWorkspace .proBubbleRow.mine .proBubble{border-top-left-radius:12px;border-bottom-left-radius:12px;border-bottom-right-radius:12px}

/* 6. Bottom-aligning the footer to the text block left the clock sitting about
   3px under the text baseline, which reads as a slip rather than a choice. The
   half-leading of the 13.5px/1.38 line is what puts it there; 2px of bottom
   padding takes it back onto the line the text is actually on. */
.chatWorkspace .proBubble .bubbleFooter{padding-bottom:2px}

/* v5.5.42 Layout, narrowed only.
   Measured on your deployed 5.5.41, window 1554px, stage 958px:

     thread column            900px
     widest empty band between
     the two speaker columns  725px
     longest line             560px  (~88 characters)
     side strips              24px left, 34px right

   With the bubbles fixed, what was left is horizontal stretch: a two-word
   exchange was throwing "Mi" and "Po po" 725px apart, so a back-and-forth read
   as two separate columns rather than one conversation.

   The obvious lever — capping the thread column — is the wrong one here,
   because the column is bound by `calc(100% - 48px)`, not by its ceiling, so
   lowering the ceiling only re-opens the empty strips you marked in v5.5.40.
   Narrowing the card instead moves the whole stage in, and the column follows
   it while the strips stay where they are. Everything below gets smaller;
   nothing gets wider at any width. */

/* The card comes in by 100px on screens wide enough for it to matter. Below
   1240px the cap never binds, so narrow windows and mobile are untouched. */
@media(min-width:781px){
  .chatWorkspace{max-width:1230px;margin-left:auto;margin-right:auto}
}

/* v5.5.43 corrects this: see the block at the end of this file. The rule that
   was here reserved a second, empty scrollbar gutter on the left, which is the
   10px you can see beside the incoming bubbles. */

/* 560px is about 88 characters at 13.5px, past the point where the eye starts
   losing its place returning to the next line. 500px is about 78. The 74%
   floor is unchanged, so on a narrow column the bubbles behave exactly as they
   did before. */
.chatWorkspace .proBubble{max-width:min(500px,74%)}

/* v5.5.43 The space your arrows marked.

   You pointed at the gap to the left of `Mazdarka a mgjat paj` and the gap to
   the right of `Aha` and asked how big they were. Measured:

     left   34px of empty space
     right  24px of empty space, then the 10px scrollbar

   They should be the same and they were not. This is mine, from v5.5.42. The
   probe I used to justify that change measured from the viewport's border box,
   which counts the scrollbar as if it were empty margin, so v5.5.41 looked like
   24/34 when what the eye actually saw was 24/24. Acting on that reading I
   reserved a scrollbar gutter on both edges — which put a real, empty 10px on
   the left where there had been none.

   `scrollbar-gutter:stable` is already set further up this file and is correct;
   the `both-edges` keyword was the mistake. Removed. The card cap drops from
   1240px to 1230px at the same time so the thread column stays at exactly 790px
   and nothing gains width from this correction. */
@media(min-width:781px){
  .chatWorkspace .threadViewport{scrollbar-gutter:stable}
}

/* v5.5.44 20px each side.
   The thread column was bound by `calc(100% - 48px)`, which is 24px of margin
   per side. You asked for 20px, so the reserve drops to 40px. The card cap
   comes down 10px with it, from 1230px to 1220px, so the column does not gain
   the 8px that the smaller margin would otherwise hand it:

                      v5.5.43   v5.5.44
     empty left        24px      20px
     empty right       24px      20px   (then the 10px scrollbar, as before)
     thread column    790px     788px

   On a window narrow enough that the 1220px cap never binds there is nothing to
   take the 8px back from, so the column there is 8px wider than it was. That is
   the arithmetic of the margin you asked for, not a separate decision. Mobile
   is untouched: below 781px the column is full width with its own padding. */
@media(min-width:781px){
  .chatWorkspace{max-width:1220px}
  .chatWorkspace .threadInner{width:min(1120px,calc(100% - 40px))}
}

/* v5.5.45 Bringing the two sides together.
   The empty band between the columns is not a setting — it is whatever is left
   of the thread column after the bubble, so it varies per message:

     Pak (82px)                  706px of empty band beside it
     Tfala bajn kto (169px)      619px
     Falemnderit bonvu... (236px) 552px
     a full two-line message      288px

   With both sides anchored to opposite edges, the only lever is the width of
   the column itself, and the only way to narrow the column without re-opening
   the 20px margins is to bring the card in. From 1220px to 1120px: the column
   goes 788px -> 688px and every band above loses 100px.

   1120px is deliberately the floor for this. Below it the column drops under
   676px, at which point 74% becomes the binding constraint on a bubble instead
   of the 500px line cap, and long messages start re-wrapping to an extra line.
   Here the cap still binds, so nothing about a long message changes — only the
   empty middle shrinks. */
@media(min-width:781px){
  .chatWorkspace{max-width:1120px}
}

/* v5.5.46 The conversation counter in the rail.
   Measured where each element in the rail starts, from the rail's left edge:

     Chats title        18px
     account select     14px
     tabs               14px
     search field       14px
     conversation count  2px   <-- 12px adrift of everything above it
     first row avatar   20px

   It also had no bottom padding at all, so the list's 1px divider sat directly
   under the text with nothing between them. The count read as something that
   had fallen out of the layout rather than a label belonging to the list.

   Aligned to 14px with the rest of the header stack, and given room to sit in.
   Colours are deliberately left alone: the light theme sets this element's
   colour with !important, and the label inherits from the container, so
   declaring a colour here would be correct in dark and wrong in light. */
.chatWorkspace .chatRailMeta{padding:7px 14px 9px;gap:5px}
.chatWorkspace .chatRailMeta strong{font-size:12px}
.chatWorkspace .chatRailMeta span{font-size:11px}

/* v5.5.47 Two tabs, not three.
   `.chatTypeTabs` was a fixed three-column grid. With All gone that would have
   left the two remaining tabs occupying two thirds of the row with a third of
   it empty. Column count is now taken from however many tabs are actually
   there, so the row stays correct whatever the markup holds. */
.chatWorkspace .chatTypeTabs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}

/* v5.5.48 Status ring on the chat-list avatar.
   The ring itself reuses the Status page's `.statusRingSvg` / `.statusRingSegment`
   rules, which handle the arc geometry and the seen/unseen stroke colours. It
   deliberately does NOT reuse `.statusRing`: that class paints a solid
   conic-gradient disc behind the avatar and is pinned to 50-56px by several
   !important rules meant for the Status page's own list.

   The avatar shrinks inside the ring rather than the ring growing outside it, so
   a row with a live status is exactly as tall and as wide as one without and the
   list does not shift as statuses appear and expire. */
/* The wrap has no width of its own, so shrinking the avatar would shrink the
   whole box and the ring with it. Pin it to the 46px the unringed rows use. */
.chatWorkspace .chatAvatarWrap.hasStatusRing{width:46px;height:46px;display:grid;place-items:center;cursor:pointer}
.chatWorkspace .chatAvatarWrap.hasStatusRing .chatAvatar{width:38px;height:38px;flex:0 0 38px;font-size:13px}
.chatWorkspace .chatAvatarWrap.hasStatusRing .railContactPhoto{border-radius:50%}
.chatWorkspace .chatStatusRing{
  position:absolute;inset:0;z-index:0;
  display:block;border-radius:50%;
  background:transparent;padding:0;border:0;
  pointer-events:none;
}
/* The whole face is the target, as it is in the reference client: tapping a
   ringed avatar opens the status, tapping anywhere else on the row opens the
   chat. The svg is pointer-events:none, so the span is what gets the click. */
.chatWorkspace .chatStatusRing .statusRingSvg{position:absolute;inset:0;width:100%;height:100%}
.chatWorkspace .chatStatusRing .statusRingSegment{stroke-width:2.5}
.chatWorkspace .chatStatusRing:hover .statusRingSegment.unseen{stroke:#3ae07d}

/* v5.5.53 The "not captured" card.
   `.statusViewerText` is the treatment for a real text status: clamp(28px,5vw,52px)
   at weight 650, in a row-direction flex. The media-unavailable fallback borrowed
   that class, so "Video unavailable" has been rendering at poster size with its
   explanatory line pushed out beside it rather than under it. This gives the card
   its own proportions without touching how a genuine text status looks. */
.chatWorkspace .statusViewerText.statusMediaUnavailable,
.statusViewerText.statusMediaUnavailable{
  flex-direction:column!important;
  gap:4px!important;
  padding:32px 26px!important;
  font-size:19px!important;
  font-weight:600!important;
  line-height:1.35!important;
}
.statusViewerText.statusMediaUnavailable small{
  max-width:34ch;margin-top:2px;
  font-size:12px;font-weight:400;line-height:1.5;color:#9fb0b7;
}
.statusViewerText.statusMediaUnavailable .statusUnavailableCaption{
  margin:16px 0 0;max-width:34ch;
  font-size:14px;font-weight:400;line-height:1.45;color:#e7eef1;
}

/* v5.5.56 Remove-empty control, sitting beside the retention select. */
.statusPurgeEmptyForm{display:inline-flex;margin-right:8px}
.statusPurgeEmptyBtn{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;
  border:1px solid rgba(255,255,255,.1);border-radius:999px;
  background:rgba(255,255,255,.04);color:#c9d6db;
  font-size:11.5px;font-weight:600;cursor:pointer;white-space:nowrap;
}
.statusPurgeEmptyBtn:hover{background:rgba(255,255,255,.08);color:#e7eef1}

/* v5.5.63 The profile photo opens full size.
   It reuses the lightbox already built for chat media rather than adding a
   second viewer: same close button, same Escape key, same backdrop click. */
.contactInfoProfile .contactAvatar img{cursor:zoom-in}
.contactInfoProfile .contactAvatar:hover img{filter:brightness(1.06)}

/* v5.5.65 The lightbox showed a small file at its natural size.
   The only rules on the image were max-width and max-height, so anything
   smaller than the frame was left at whatever size it happened to be — a 105px
   file floated in the middle of a full-screen overlay. Giving the image a real
   box with object-fit:contain makes it fill the frame and keep its aspect
   ratio, whatever its pixel size. */
.chatMediaLightbox img{
  width:min(92vw,1100px);
  height:min(78vh,760px);
  object-fit:contain;
}
@media(max-width:780px){
  .chatMediaLightbox img{width:min(96vw,720px);height:min(70vh,560px)}
}

/* v5.5.69 Deleted messages, in the contact panel.
   The popup shell, header and empty state come from the existing insight
   popups (Links, Voice notes), so this only styles what is new: the scope
   filter and the rows. */
.contactDeletedFilters{display:flex;gap:6px;padding:10px 14px 4px}
/* A padding-only pill turns a short label into a circle: "All" ended up round
   next to "Deleted for me". A minimum width keeps the three the same family. */
.contactDeletedFilter{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-width:68px;height:30px;padding:0 13px;border-radius:999px;
  border:1px solid rgba(128,128,128,.22);background:rgba(128,128,128,.08);
  color:var(--muted);font-size:11.5px;font-weight:600;cursor:pointer;white-space:nowrap;
}
/* The count tells you whether a tab is worth opening before you open it. */
.contactDeletedFilter b{
  min-width:16px;padding:0 4px;border-radius:999px;
  background:rgba(128,128,128,.18);
  font-size:10px;font-weight:700;line-height:16px;text-align:center;
}
.contactDeletedFilter.active b{background:rgba(255,255,255,.22);color:#eafff5}
.contactDeletedFilter.isEmpty{opacity:.55}
.contactDeletedFilter:hover{background:rgba(128,128,128,.16);color:inherit}
.contactDeletedFilter.active{background:#1f6a50;border-color:#2d7f61;color:#eafff5}

.contactDeletedList{display:flex;flex-direction:column;gap:2px;padding:6px 8px 14px;overflow:auto}
.contactDeletedRow{
  display:grid;grid-template-columns:28px 1fr 14px;align-items:center;gap:10px;
  width:100%;padding:9px 10px;border:0;border-radius:12px;
  background:transparent;color:inherit;text-align:left;cursor:pointer;
}
.contactDeletedRow:hover{background:rgba(128,128,128,.12)}
/* Revoked and deleted-for-me are different events. One is the other person
   taking a message back, the other is your own removal — worth telling apart
   at a glance rather than reading the label every time. */
.contactDeletedIcon{
  display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  font-size:13px;background:rgba(128,128,128,.14);color:var(--muted);
}
.contactDeletedRow.revoked .contactDeletedIcon{background:rgba(214,84,84,.16);color:#e08b8b}
.contactDeletedRow.localDeleted .contactDeletedIcon{background:rgba(214,170,84,.16);color:#d9b271}
.contactDeletedCopy{display:flex;flex-direction:column;gap:2px;min-width:0}
/* Colours come from the theme, not from this block. The first version hardcoded
   dark-theme greys, which on the light theme was near-white text on white. The
   two accent tints below are the exception: they read on both. */
.contactDeletedCopy strong{
  font-size:13px;font-weight:600;color:inherit;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.contactDeletedCopy small{font-size:11px;color:var(--muted)}
.contactDeletedCopy em{font-size:10.5px;font-style:normal;font-weight:600;color:var(--muted)}
.contactDeletedRow.revoked .contactDeletedCopy em{color:#e08b8b}
.contactDeletedRow.localDeleted .contactDeletedCopy em{color:#d9b271}
.contactDeletedChevron{color:var(--muted);font-size:15px}
@media(max-width:780px){
  .contactDeletedFilters{padding:10px 12px 4px;overflow-x:auto}
  .contactDeletedRow{grid-template-columns:26px 1fr 12px;padding:10px 8px}
}

/* The shared .contactInsightEmpty is a 104px dashed box with 10px type, which
   dwarfs a one-line message. Scoped to this list so the other popups keep
   whatever suits them. */
.contactDeletedList .contactInsightEmpty{
  min-height:0;padding:26px 18px;gap:10px;
  border:0;background:transparent;font-size:12.5px;line-height:1.5;
}
.contactDeletedEmptyMark{
  display:grid;place-items:center;width:44px;height:44px;margin:0 auto 2px;
  border-radius:50%;background:rgba(128,128,128,.12);color:var(--muted);font-size:18px;
}
/* The light theme sets the shared empty state's background and border with
   !important, so the scoped rule above loses to it and the box came back on
   light only. Matched at the same weight rather than raising the shared one,
   which other popups still rely on. */
html[data-theme="light"] .contactDeletedList .contactInsightEmpty{
  background:transparent!important;border:0!important;
}
html[data-theme="light"] .contactDeletedEmptyMark{background:rgba(21,35,45,.07)}

/* v5.5.72 Status rings on the phone.
   mobile-whatsapp.css sets the row avatar to 50px with !important, which beat
   the 38px shrink the ring needs. The result was a 50px avatar inside a 46px
   wrap: not square, and the ring painted behind the face instead of around it.
   Matched at the same weight, sized to the phone's own 50px row so the list
   does not change height. */
@media(max-width:780px){
  .chatWorkspace .chatAvatarWrap.hasStatusRing{width:50px!important;height:50px!important;display:grid!important;place-items:center!important}
  .chatWorkspace .chatAvatarWrap.hasStatusRing .chatAvatar{width:41px!important;height:41px!important;flex:0 0 41px!important;font-size:14px!important}
  .chatWorkspace .chatAvatarWrap.hasStatusRing .chatStatusRing{inset:0!important}
}

/* v5.5.74 No flash of the status list on the way to a story.
   Tapping a ring in the chat list navigates here and the viewer opens as soon as
   the script runs — but the page has already painted its list by then, so the
   trip showed a frame of the Status page. The class is rendered by the server,
   so the list is hidden from the very first paint; the script reveals it again
   once the viewer is up, or after a moment if it never opens. */
.statusPage.statusDeepLinkBoot > *:not(#statusViewer){visibility:hidden}
.statusPage.statusDeepLinkBoot{background:var(--bg,#0b0f14)}

/* v5.5.77 Call log. Rows reuse the deleted-list shape; only the summary strip
   and the outcome tints are new. */
.contactCallsSummary{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:10px 14px 4px}
.contactCallsStat{display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 4px;border-radius:12px;background:rgba(128,128,128,.10)}
.contactCallsStat strong{font-size:14px;font-weight:700;color:inherit}
.contactCallsStat small{font-size:9.5px;color:var(--muted);text-align:center}
.contactCallRow.answered .contactDeletedIcon{background:rgba(37,211,102,.16);color:#4fce87}
.contactCallRow.answered .contactDeletedCopy em{color:#4fce87}
.contactCallRow.missed .contactDeletedIcon{background:rgba(214,84,84,.16);color:#e08b8b}
.contactCallRow.missed .contactDeletedCopy em{color:#e08b8b}
@media(max-width:780px){.contactCallsSummary{padding:10px 12px 4px;gap:5px}.contactCallsStat strong{font-size:13px}}

/* v5.5.81 Talk time in the call bubble.
   The duration used to be part of one sentence. It is now its own element on
   the right of the row, so the length of a call is readable at a glance. */
.chatWorkspace .callEventCard{align-items:center}
.chatWorkspace .callEventDuration{
  margin-left:auto;padding:3px 9px;border-radius:999px;
  background:rgba(37,211,102,.16);color:#4fce87;
  font-size:11.5px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;
}
.chatWorkspace .callEventCard.callMissed .callEventIcon{background:rgba(214,84,84,.16);color:#e08b8b}
.chatWorkspace .callEventCard.callMissed small{color:#e08b8b}
.chatWorkspace .callEventCard.callAnswered .callEventIcon{background:rgba(37,211,102,.16);color:#4fce87}

/* v5.5.90 Archive tools sheet, trimmed.
   The theme switch is a control, not a destination, so it sits in the header
   beside the close button instead of taking a row of its own. */
.mobileSheetHeadActions{display:flex;align-items:center;gap:8px}
.mobileSheetHeadToggle{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(128,128,128,.22);background:rgba(128,128,128,.10);
  color:inherit;font-size:16px;cursor:pointer;
}
.mobileSheetHeadToggle:hover{background:rgba(128,128,128,.18)}
.visuallyHidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Health and Integrity moved behind the alerts page; these lead on to them. */
.statusSubnav{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 14px}

/* v5.5.92 Login layout.
   .loginbody used place-items:center on an auto-height body, which centres
   horizontally and does nothing vertically — so the card sat at the top with a
   void beneath it on a phone. svh rather than vh because vh on mobile means the
   viewport with the browser chrome hidden, which overflows when it is not. */
.loginbody{
  min-height:100vh;min-height:100svh;
  display:grid;place-items:center;
  padding:24px 18px calc(24px + env(safe-area-inset-bottom));
}
.loginbox{width:min(392px,100%);padding:30px 26px 26px;border-radius:22px}

.loginBrand{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;margin-bottom:16px}
.loginBrand .logoMark img{width:58px;height:58px;display:block}
.loginbox h1{margin:0;font-size:26px;letter-spacing:-.4px}
.loginBrand .muted{margin:2px 0 0;font-size:13px}

/* The pills are reassurance, not navigation — small, quiet, one line. */
.loginTrust{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 0 20px}
.loginTrust span{padding:4px 10px;border-radius:999px;font-size:11px;font-weight:600;line-height:1.5}

.loginbox .stack{display:flex;flex-direction:column;gap:14px}
.loginbox .stack label{
  display:flex;flex-direction:column;gap:6px;
  font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.2px;
}
.loginbox .stack input{
  height:46px;padding:0 13px;border-radius:12px;font-size:15px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.loginbox .stack input:focus{
  border-color:#25d366;box-shadow:0 0 0 3px rgba(37,211,102,.16);
}
.loginbox .stack .primary{
  height:48px;margin-top:4px;border-radius:12px;
  font-size:15px;font-weight:700;letter-spacing:.2px;
}
.loginInstallButton{height:44px;border-radius:12px;font-size:13px;font-weight:600}
.loginbox .alert{margin:0 0 14px;font-size:13px}

/* Below 600px the login is already a full-screen panel rather than a card —
   that is the right shape for a phone. What it lacked was vertical rhythm: the
   content sat against the top padding with the rest of the screen empty. Making
   the panel a centred column puts the form in the optical middle instead. */
@media(max-width:600px){
  .loginbox{
    display:flex;flex-direction:column;justify-content:center;
    padding-top:calc(24px + env(safe-area-inset-top));
    padding-bottom:calc(24px + env(safe-area-inset-bottom));
  }
  .loginBrand .logoMark img{width:64px;height:64px}
  .loginbox h1{font-size:28px}
  .loginBrand{margin-bottom:18px}
  .loginTrust{margin-bottom:24px}
}

/* v5.5.93 Login, dressed properly.
   The layout was fixed in 5.5.92; this is the part that makes it look like
   something rather than a form on a background. */

/* A soft green cast behind the card, matching the brand without shouting. */
.loginbody{
  background:
    radial-gradient(760px 420px at 50% -8%, rgba(37,211,102,.13), transparent 62%),
    radial-gradient(520px 380px at 84% 100%, rgba(37,211,102,.06), transparent 60%),
    linear-gradient(180deg,#070d11,#0a1319 55%,#070d11);
}
.loginbox{
  position:relative;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg, rgba(23,34,42,.96), rgba(16,25,31,.96));
  box-shadow:0 30px 80px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.04) inset;
  backdrop-filter:blur(8px);
}
/* One highlight along the top edge — the detail that stops a dark card looking flat. */
.loginbox::before{
  content:"";position:absolute;left:22px;right:22px;top:0;height:1px;border-radius:1px;
  background:linear-gradient(90deg,transparent,rgba(37,211,102,.55),transparent);
}

/* The logo gets a halo instead of sitting bare on the panel. */
.loginBrand .logoMark{
  display:grid;place-items:center;width:78px;height:78px;border-radius:50%;
  background:radial-gradient(circle at 50% 35%, rgba(37,211,102,.20), rgba(37,211,102,.04) 62%, transparent 70%);
}
.loginbox h1{font-weight:700}
.loginBrand .muted{opacity:.85}

/* Fields: icon inside, label above it in small caps. */
.loginField{display:flex;flex-direction:column;gap:7px}
.loginFieldLabel{font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:#7e94a2}
.loginFieldBox{
  position:relative;display:flex;align-items:center;
  border-radius:13px;background:#0c141a;border:1px solid #23323d;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.loginFieldBox:focus-within{border-color:#25d366;box-shadow:0 0 0 3px rgba(37,211,102,.16);background:#0d171d}
.loginFieldIcon{
  width:19px;height:19px;flex:0 0 19px;margin:0 0 0 13px;
  fill:none;stroke:#6d8494;stroke-width:1.7;stroke-linecap:round;
}
.loginFieldBox:focus-within .loginFieldIcon{stroke:#25d366}
.loginbox .stack .loginFieldBox input{
  flex:1;height:48px;border:0;background:transparent;box-shadow:none;
  padding:0 14px 0 11px;font-size:15px;color:var(--text);
}
.loginbox .stack .loginFieldBox input:focus{border:0;box-shadow:none}
.loginbox .stack .loginFieldBox input::placeholder{color:#5d7280}

.loginbox .stack .primary{
  height:50px;margin-top:6px;border:0;
  background:linear-gradient(180deg,#2ee178,#1fb85c);
  color:#06231a;box-shadow:0 10px 26px rgba(37,211,102,.22);
}
.loginbox .stack .primary:hover{filter:brightness(1.05)}
.loginbox .stack .primary:active{transform:translateY(1px);box-shadow:0 6px 16px rgba(37,211,102,.20)}

.loginInstallButton{margin-top:10px;background:transparent;border:1px solid rgba(255,255,255,.10);color:#8ea3b1}
.loginInstallButton:hover{background:rgba(255,255,255,.04);color:#cfe0ea}

/* The pills now sit under the form as a quiet footer, not a headline. */
.loginTrust{margin:18px 0 0;gap:5px;opacity:.72}
.loginTrust span{padding:3px 9px;font-size:10.5px;font-weight:600}
/* Same guard for the dark theme: the generic .stack input rule must not draw a
   frame inside the field box. */
.loginbox .stack .loginFieldBox input{background:transparent;border:0;box-shadow:none}

/* v5.5.94 The login page has no bottom nav.
   `body:not(:has(.chatWorkspace))` reserves room for the mobile tab bar with
   !important, on every page that is not a chat — which includes the login, where
   there is no tab bar. The reservation became 62px of scroll below a screen that
   has nothing to scroll to. Below 600px the panel carries its own safe-area
   padding, so there the reservation goes entirely. */
@media(max-width:780px){
  html body.loginbody{padding-bottom:calc(18px + env(safe-area-inset-bottom))!important}
}
@media(max-width:600px){
  html body.loginbody{padding-bottom:0!important}
}

/* v5.5.95 Clients panel. */
.usersIntro{max-width:70ch;margin:0 0 16px}
.usersPanel{margin-bottom:16px}
.usersPanel h2{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:15px}
.usersCount{font-size:12px;font-weight:600}
.usersNewForm{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;align-items:end}
.usersNewForm label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:var(--muted)}
.usersNewForm input,.usersNewForm select{height:40px;padding:0 11px;border-radius:10px}
.usersNewForm .primary{height:40px;border-radius:10px}

.userCard{border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:10px;background:rgba(128,128,128,.05)}
.userCard.isDisabled{opacity:.62}
.userCardHead{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.userCardHead strong{font-size:15px}
.userCardMeta{font-size:11.5px}
.userRole{margin-left:8px;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.userRole.owner{background:rgba(37,211,102,.16);color:#4fce87}
.userRole.client{background:rgba(128,128,128,.16);color:var(--muted)}
.userRole.disabled{background:rgba(214,84,84,.16);color:#e08b8b}
.userFieldLabel{display:block;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.userAccountList{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.userAccountPick{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid var(--line);border-radius:999px;font-size:12.5px;cursor:pointer}
.userAccountPick input{margin:0}
.userCardActions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.userInlineForm{display:flex;gap:6px;align-items:center}
.userInlineForm input{height:34px;padding:0 10px;border-radius:9px;font-size:13px}
.dangerText{color:#e08b8b}
@media(max-width:600px){
  .usersNewForm{grid-template-columns:1fr}
  .userCardActions{flex-direction:column;align-items:stretch}
  .userInlineForm{width:100%}
  .userInlineForm input{flex:1;min-width:0}
}

/* v5.5.99 Admin panel. Its own shell on purpose: this is where an account is
   handed from one client to another, and that does not belong inside the
   reading interface where a stray click lands on a chat. */
.adminBody{margin:0;min-height:100vh;min-height:100svh;background:var(--bg,#0b1016)}
.adminTop{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(37,211,102,.06),transparent);
}
.adminTopMain strong{display:block;font-size:17px;letter-spacing:-.2px}
.adminTopMain small{color:var(--muted);font-size:12px}
.adminTopActions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.adminWho{padding:4px 10px;border-radius:999px;background:rgba(128,128,128,.14);font-size:12px;font-weight:600}
.adminLogout{display:inline-flex;margin:0}
.adminMain{max-width:1000px;margin:0 auto;padding:18px 20px 40px}

.adminStats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:18px}
.adminStat{display:flex;flex-direction:column;gap:2px;padding:14px;border:1px solid var(--line);border-radius:14px;background:rgba(128,128,128,.05)}
.adminStat strong{font-size:22px;font-weight:700;letter-spacing:-.5px}
.adminStat small{font-size:11px;color:var(--muted)}
.adminStat.warn strong{color:#d9b271}

.adminPanel{margin-bottom:22px;padding:16px;border:1px solid var(--line);border-radius:16px;background:rgba(128,128,128,.04)}
.adminPanel h2{margin:0 0 6px;font-size:15px}
.adminHint{max-width:70ch;margin:0 0 14px;font-size:12.5px}

.adminAccount{
  display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;
  padding:12px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;
}
.adminAccountMain{display:flex;flex-direction:column;gap:2px;min-width:0}
.adminAccountMain strong{font-size:14px}
.adminAccountKey{font-size:11px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.adminAccountMain small{font-size:11.5px}
.adminFieldLabel{display:block;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.adminHolderNow{font-size:13px;font-weight:600}
.adminHolderNow.none{color:var(--muted);font-weight:500}
.adminTransfer{display:flex;gap:8px;align-items:center}
.adminTransfer select{height:36px;padding:0 10px;border-radius:10px;max-width:220px}

.adminClients{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin-bottom:12px}
.adminClient{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.adminClient.isDisabled{opacity:.6}
.adminClient small{flex:1 0 100%;font-size:11.5px}

@media(max-width:700px){
  .adminAccount{grid-template-columns:1fr;gap:10px}
  .adminTransfer{flex-direction:column;align-items:stretch}
  .adminTransfer select{max-width:none}
}

/* v5.6.0 Client management inside the admin panel. */
.adminNewClient{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;align-items:end;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.adminNewClient label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:var(--muted)}
.adminNewClient input,.adminNewClient select{height:38px;padding:0 11px;border-radius:10px}
.adminNewClient .primary{height:38px;border-radius:10px}
.adminClientRow{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:11px 12px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px}
.adminClientRow.isDisabled{opacity:.6}
.adminClientWho{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;min-width:0}
.adminClientWho small{flex:1 0 100%;font-size:11.5px}
.adminClientActions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.adminInline{display:flex;gap:5px;align-items:center;margin:0}
.adminInline input{height:32px;padding:0 9px;border-radius:9px;font-size:12.5px;max-width:150px}
@media(max-width:700px){
  .adminNewClient{grid-template-columns:1fr}
  .adminClientRow{grid-template-columns:1fr}
  .adminClientActions{flex-direction:column;align-items:stretch}
  .adminInline{width:100%}
  .adminInline input{flex:1;min-width:0;max-width:none}
}

/* v5.6.6 Per-client permissions. */
.adminPerms{grid-column:1 / -1;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.adminPermList{display:flex;flex-wrap:wrap;gap:7px;margin:7px 0 9px}
.adminPermPick{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;font-size:12px;cursor:pointer}
.adminPermPick input{margin:0}
.adminClientRow{grid-template-columns:1fr auto}
@media(max-width:700px){.adminPermList{gap:6px}}

/* v5.7.0 Admin panel: health, storage, activity, access window, view-as. */
.adminHealth{display:inline-block;align-self:flex-start;width:fit-content;margin-top:3px;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.adminHealth.ok{background:rgba(37,211,102,.16);color:#4fce87}
.adminHealth.stale{background:rgba(214,170,84,.18);color:#d9b271}
.adminHealthError{display:block;margin-top:3px;font-size:11px;color:#e08b8b}
.adminClientFacts{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;font-size:11.5px;color:var(--muted)}
.adminClientFacts code{font-size:11px}
.adminExpired{color:#e08b8b;font-weight:600}
.adminAccessForm{grid-column:1 / -1;margin-top:8px}
.adminAccessForm input[type="date"]{height:32px;padding:0 9px;border-radius:9px;font-size:12.5px}
.adminActivity{grid-column:1 / -1;margin-top:8px;font-size:12px}
.adminActivity summary{cursor:pointer;color:var(--muted);font-weight:600}
.adminActivity ul{margin:7px 0 0;padding-left:16px;display:flex;flex-direction:column;gap:3px}
.adminActivity li{font-size:11.5px;color:var(--muted)}
.adminActivity li span{font-variant-numeric:tabular-nums;opacity:.8;margin-right:6px}
/* Impersonation must never be quiet: the banner rides above every page. */
.viewAsBanner{position:sticky;top:0;z-index:60;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;
  padding:8px 14px;background:#d9b271;color:#20160a;font-size:12.5px;font-weight:700}
.viewAsBanner form{margin:0}
.viewAsBanner button{height:28px;padding:0 11px;border-radius:999px;border:0;background:#20160a;color:#f7e9d2;font-size:11.5px;font-weight:700;cursor:pointer}

/* v5.7.1 Admin panel, rebuilt as sections.
   One column carrying overview, accounts and every client at once had outgrown
   itself: the page that matters most was the one you had to scroll furthest to
   reach. Three sections, each a screenful. */
.adminTop{position:static}
.adminTopMain{display:flex;align-items:center;gap:11px}
.adminMark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:rgba(37,211,102,.14);color:#4fce87;font-size:15px}

.adminTabs{
  position:sticky;top:0;z-index:39;display:flex;gap:2px;padding:0 20px;
  border-bottom:1px solid var(--line);background:inherit;overflow-x:auto;
}
.adminTabs a{
  display:inline-flex;align-items:center;gap:7px;padding:11px 14px;
  border-bottom:2px solid transparent;color:var(--muted);
  font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;
}
.adminTabs a:hover{color:inherit}
.adminTabs a.active{color:inherit;border-bottom-color:#25d366}
.adminTabCount{padding:1px 7px;border-radius:999px;background:rgba(128,128,128,.16);font-size:11px;font-weight:700}

.adminAllClear{margin:0;font-size:13px;color:#4fce87}
.adminAttention{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.adminAttention li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding:10px 12px;
  border:1px solid var(--line);border-radius:11px;font-size:13px;
}
.adminAttention li.warn{border-color:rgba(214,170,84,.45);background:rgba(214,170,84,.07)}
.adminAttention li a{margin-left:auto;font-size:12px;font-weight:600}

/* A client is now a panel of its own rather than a row in a list. */
.adminClientRow{display:block;padding:16px}
.adminClientHead{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:10px}
.adminClientWho{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.adminClientWho strong{font-size:16px}
.adminClientActions{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;border:0}
.adminClientFacts{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 12px;padding-bottom:12px;
  border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
.adminClientGrid{display:grid;grid-template-columns:1.35fr 1fr;gap:12px}
.adminClientBox{padding:12px;border:1px solid var(--line);border-radius:12px;background:rgba(128,128,128,.04)}
.adminClientBox .adminFieldLabel{margin-bottom:8px}
.adminInlineLabel{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.adminAccessForm{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px}
.adminAccessForm small{flex:1 0 100%;font-size:11px}
.adminPasswordForm{margin:0}
.adminActivity{margin-top:12px}

@media(max-width:820px){
  .adminTabs{top:auto;position:static}
  .adminTop{position:static}
  .adminClientGrid{grid-template-columns:1fr}
  .adminClientHead{flex-direction:column;align-items:flex-start}
  .adminClientActions{width:100%}
  .adminClientActions .adminInline{flex:1}
  .adminClientActions .button{width:100%}
}

/* v5.7.2 Audit page and the new client controls. */
.auditFilters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.auditFilters input{flex:1;min-width:200px;height:38px;padding:0 12px;border-radius:10px}
.auditFilters select{height:38px;padding:0 10px;border-radius:10px}
.auditList{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px}
.auditList li{display:grid;grid-template-columns:150px minmax(180px,auto) 1fr auto;gap:12px;align-items:baseline;
  padding:8px 10px;border-radius:9px;font-size:12.5px}
.auditList li:nth-child(odd){background:rgba(128,128,128,.06)}
.auditList time{color:var(--muted);font-variant-numeric:tabular-nums;font-size:11.5px}
.auditWhat{display:flex;align-items:baseline;gap:7px;font-weight:600}
.auditCat{padding:1px 7px;border-radius:999px;background:rgba(128,128,128,.16);font-size:10px;font-weight:700;text-transform:uppercase}
.auditDetail{color:var(--muted);overflow-wrap:anywhere}
.auditAccount{color:var(--muted);font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.auditPager{display:flex;align-items:center;gap:12px;margin-top:14px}
.adminLimitsForm{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px}
.adminLimitsForm small{flex:1 0 100%;font-size:11px;line-height:1.45}
.adminLimitsForm input[type="number"]{width:92px;height:32px;padding:0 9px;border-radius:9px;font-size:12.5px}
@media(max-width:820px){
  .auditList li{grid-template-columns:1fr;gap:3px}
  .auditList time{font-size:11px}
}

/* v5.7.3 Two-factor setup. */
.totpSecret,.totpRecovery{margin:0 0 14px;padding:12px 14px;border:1px dashed var(--line);border-radius:11px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:17px;letter-spacing:2px;overflow-wrap:anywhere}
.totpRecovery{border-style:solid;border-color:rgba(214,170,84,.5);background:rgba(214,170,84,.08)}
.totpUri{margin:0 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--muted);overflow-wrap:anywhere}

/* v5.7.4 Individual sessions. */
.adminSessions{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.adminSession{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:7px 0;font-size:12.5px}
.adminSession + .adminSession{border-top:1px dashed var(--line)}
.adminSessionWhere code{font-size:12px}
.adminSessionWhen{color:var(--muted);font-size:11.5px}
.adminSession form{margin-left:auto}

/* v5.8.0 Watch terms. */
.adminWatches{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.adminWatchList{display:flex;flex-wrap:wrap;gap:6px;margin:7px 0 9px}
.adminWatchChip{display:inline-flex;align-items:center;gap:6px;margin:0;padding:4px 6px 4px 11px;
  border:1px solid var(--line);border-radius:999px;font-size:12px}
.adminWatchChip button{border:0;background:transparent;color:var(--muted);font-size:15px;line-height:1;cursor:pointer;padding:0 3px}
.adminWatchChip button:hover{color:#e08b8b}

/* v5.8.1 A client's own account page. */
.adminPermPick.permOff{opacity:.5}
.adminPermPick{cursor:default}

/* v5.8.1 The admin panel on a phone.
   Each client card has grown to carry permissions, an access date, a password
   field, sessions and watches. Measured at 390px, fourteen of those controls
   were under 32px tall and four inputs under 110px wide — small enough that
   hitting the right one is luck. */
@media(max-width:600px){
  .adminMain input,.adminMain select,.adminMain button,
  .adminMain .button,.adminMain .primary{min-height:40px}
  .adminInline input,.adminLimitsForm input[type="number"],
  .adminAccessForm input[type="date"],.adminPasswordForm input{
    flex:1 1 140px;min-width:140px;max-width:none;font-size:15px;
  }
  .adminLimitsForm,.adminAccessForm,.adminInline{width:100%}
  .adminLimitsForm label,.adminAccessForm label{flex:1 1 100%}
  .adminPermPick,.adminWatchChip{min-height:38px;padding-left:13px;padding-right:13px}
  .adminPermPick input[type="checkbox"],.adminAccountPick input[type="checkbox"]{width:18px;height:18px}
  .adminSession{flex-direction:column;align-items:flex-start;gap:6px}
  .adminSession form{margin-left:0;width:100%}
  .adminWatchChip button{min-width:32px;min-height:32px}
  /* 16px stops iOS zooming the page when a field takes focus. */
  .adminMain input,.adminMain select{font-size:16px}
}

/* v5.8.2 Capture health, three states.
   The time sat inside a badge with text-transform:uppercase, so "6m" for six
   minutes was rendered "6M" and read as six months — the opposite of the truth.
   It is spelled out now, and outside the badge. */
.adminHealth.warn{background:rgba(214,170,84,.18);color:#d9b271}
.adminHealthWhen{display:block;margin-top:3px;font-size:11.5px;color:var(--muted)}
.adminHealthError{display:block;margin-top:3px;font-size:11px;color:#e08b8b}
.adminHealthError.isTransient{color:var(--muted)}

/* v5.8.3 Admin layout.
   Measured at 1900px: the panel used 1000 and left 900 empty, and inside each
   account row the name sat at the far left with the controls at the far right —
   400px of nothing between two things you read together. Columns fix both. */
.adminMain{max-width:min(1360px,100%)}

.acctTable{display:flex;flex-direction:column;gap:2px}
.acctHead,.acctRow{
  display:grid;
  grid-template-columns:minmax(200px,1.5fr) minmax(190px,1.2fr) 150px minmax(130px,1fr) minmax(250px,auto);
  gap:18px;align-items:center;
}
.acctHead{padding:0 12px 8px;border-bottom:1px solid var(--line)}
.acctHead span{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.acctRow{padding:13px 12px;border:1px solid transparent;border-radius:12px}
.acctRow:nth-child(odd){background:rgba(128,128,128,.045)}
.acctRow:hover{border-color:var(--line)}
.acctName{display:flex;flex-direction:column;gap:2px;min-width:0}
.acctName strong{font-size:14.5px}
.acctState{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
/* Numbers line up under each other, so a long history is obvious at a glance
   rather than something you have to read. */
.acctSize{display:grid;grid-template-columns:auto auto;gap:1px 6px;align-items:baseline}
.acctSize strong{font-size:14px;font-variant-numeric:tabular-nums;text-align:right}
.acctSize small{font-size:11px;color:var(--muted)}
.acctHolder .adminHolderNow{font-size:13.5px}
.acctMove .adminTransfer{margin:0;justify-content:flex-end}
.acctMove select{flex:1;min-width:140px}

@media(max-width:900px){
  /* Below this the columns would be thinner than their contents, so each row
     goes back to being a stacked card. */
  .acctHead{display:none}
  .acctRow{grid-template-columns:1fr;gap:10px;border-color:var(--line);background:rgba(128,128,128,.04)}
  .acctSize{grid-template-columns:auto auto;justify-content:start;gap:2px 8px}
  .acctMove .adminTransfer{justify-content:flex-start}
}

/* v5.8.3 Client cards.
   Two boxes forced to equal height left the permissions box two-thirds empty,
   and "Access" had collected four unrelated controls. Three columns sized to
   their own content instead. */
.adminClientGrid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:start}
.adminClientBox{height:auto}
.adminWatches{margin-top:0;padding-top:12px;border-top:0}
.adminClientActions .adminPasswordForm input{min-width:150px}
.adminClientActions .dangerText{margin-left:auto}
.adminSessions{margin-top:10px;padding-top:10px}
.adminAccessForm small,.adminLimitsForm small{color:var(--muted)}

/* v5.8.3 A slim bar rather than a full panel for a single action. */
.adminBar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  padding:10px 14px;margin-bottom:14px;border:1px solid var(--line);border-radius:12px;
  background:rgba(128,128,128,.04);font-size:12.5px;color:var(--muted)}
.adminBar form{margin:0}

/* v5.9.0 Typed confirmation for the two actions that cannot be undone. */
.confirmMain{display:grid;place-items:center;min-height:100svh;padding:20px}
.confirmPanel{max-width:520px;width:100%}
.confirmWarning{margin:0 0 14px;font-size:13.5px;line-height:1.55}
.confirmField{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;font-size:13px}
.confirmField input{height:44px;padding:0 13px;border-radius:11px;font-size:15px}
.confirmActions{display:flex;flex-wrap:wrap;gap:8px}
.confirmActions .primary,.confirmActions .button{height:42px;display:inline-flex;align-items:center;justify-content:center;padding:0 18px}

/* v5.9.0 Searching and sorting the client list. */
.clientFilter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.clientFilter input{flex:1;min-width:220px;height:38px;padding:0 12px;border-radius:10px}
.clientFilter select{height:38px;padding:0 10px;border-radius:10px}
.clientFilterCount{font-size:12px;color:var(--muted)}
.acctLink{font-size:14.5px;font-weight:700;color:inherit;text-decoration:none}
.acctLink:hover{text-decoration:underline}

/* v5.9.0 Acting on several clients at once. */
.bulkBar{position:sticky;top:45px;z-index:20;display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding:10px 14px;margin-bottom:12px;border:1px solid rgba(37,211,102,.4);border-radius:12px;
  background:rgba(37,211,102,.08)}
.bulkCount{font-size:12.5px;font-weight:700}
.bulkBar select,.bulkBar input[type="date"]{height:36px;padding:0 10px;border-radius:10px}
.bulkPick{display:inline-flex;align-items:center;margin-right:4px}
.bulkPick input{width:17px;height:17px;margin:0}

/* v5.9.1 The client filter, without a button to press.
   It was a text box, a dropdown and an Apply — three steps to answer "where is
   Fidan". The search filters as it is typed and the sort options are chips that
   act on the tap. */
.clientFilter{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.clientSearch{position:relative;display:flex;align-items:center;flex:1;min-width:230px;
  height:40px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:rgba(128,128,128,.05);
  transition:border-color .15s ease, box-shadow .15s ease}
.clientSearch:focus-within{border-color:#25d366;box-shadow:0 0 0 3px rgba(37,211,102,.14)}
.clientSearch svg{width:17px;height:17px;flex:0 0 17px;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round}
.clientSearch input{flex:1;height:100%;border:0;background:transparent;box-shadow:none;padding:0 8px;font-size:14px;color:inherit}
.clientSearch input:focus{border:0;box-shadow:none}
.clientSearch input::-webkit-search-cancel-button{display:none}
.clientSearchClear{border:0;background:transparent;color:var(--muted);font-size:19px;line-height:1;cursor:pointer;padding:0 2px}
.clientSearchClear:hover{color:inherit}
.sortChips{display:flex;gap:5px;flex-wrap:wrap}
.sortChip{padding:7px 13px;border:1px solid var(--line);border-radius:999px;font-size:12.5px;font-weight:600;
  color:var(--muted);text-decoration:none;white-space:nowrap}
.sortChip:hover{color:inherit}
.sortChip.active{background:rgba(37,211,102,.14);border-color:rgba(37,211,102,.4);color:#4fce87}
.clientFilterCount{font-size:12px;color:var(--muted)}
@media(max-width:600px){ .clientSearch{min-width:100%} .sortChips{width:100%} .sortChip{flex:1;text-align:center} }

/* v5.9.1 The hidden attribute has to win.
   `[hidden]{display:none}` is a browser default with almost no specificity, so
   any rule of mine that sets display beats it. The clear button and the bulk
   action bar both set display:flex, so both were on screen while marked hidden —
   the bar I said stays out of the way until something is selected was in fact
   always there. */
.adminBody [hidden]{display:none!important}

/* v5.9.2 Switching theme from inside the panel.
   The panel pages are their own shells and never carried the toggle, so the only
   way to change theme was to go back to the archive and find it there. It sits
   in the shared navigation, which means every panel page has it and none of them
   can be forgotten. */
.adminThemeToggle{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border:1px solid var(--line);border-radius:999px;
  background:transparent;color:var(--muted);font-size:12.5px;font-weight:600;cursor:pointer;
}
.adminThemeToggle:hover{color:inherit}
@media(max-width:600px){ .adminThemeToggle{margin-left:0} }

/* ===========================================================================
   v5.9.3 Panel shell: a sidebar on wide screens.
   The tab strip was a phone pattern stretched across a desktop — five words on
   a 1900px line, with the sections disappearing the moment you scrolled. On a
   wide screen the sections belong down the side, always visible, and the width
   they were wasting goes to the content.

   Done in CSS against the markup that is already there, so the shared nav
   partial, the section links and the tests that check them are untouched.
   =========================================================================== */
@media (min-width: 1100px) {
  .adminBody{
    display:grid;
    grid-template-columns:230px minmax(0,1fr);
    grid-template-rows:auto 1fr;
    grid-template-areas:"head head" "nav main";
    min-height:100svh;
  }
  .adminTop{
    grid-area:head;padding:14px 28px;
    border-bottom:1px solid var(--line);
  }
  .adminTabs{
    grid-area:nav;flex-direction:column;align-items:stretch;gap:2px;
    padding:14px 12px;border-bottom:0;border-right:1px solid var(--line);
    position:sticky;top:0;align-self:stretch;max-height:100svh;overflow-y:auto;
  }
  .adminTabs a{
    justify-content:flex-start;padding:9px 13px;border-bottom:0;border-radius:10px;
  }
  .adminTabs a:hover{background:rgba(128,128,128,.08)}
  .adminTabs a.active{
    background:rgba(37,211,102,.12);color:inherit;
    box-shadow:inset 3px 0 0 #25d366;
  }
  .adminTabCount{margin-left:auto}
  .adminThemeToggle{margin:14px 1px 0;justify-content:center}
  .adminMain{grid-area:main;max-width:none;margin:0;padding:22px 28px 48px}
}

/* --- type and spacing: a scale instead of everything at 13px --------------- */
.adminMain h2{font-size:14px;letter-spacing:-.1px}
.adminPanel{padding:18px;border-radius:16px}
.adminPanel + .adminPanel{margin-top:14px}
.adminHint{font-size:12.5px;line-height:1.55;max-width:66ch}

/* --- less chrome: one border, not three nested ---------------------------- */
.adminClientBox{border:0;background:transparent;padding:0}
.adminClientGrid{gap:26px 30px}
.adminClientBox .adminFieldLabel{padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:10px}

/* --- the tile that matters should not look like the other four ------------ */
.adminStats{gap:12px}
.adminStat{padding:16px;border-radius:14px}
.adminStat strong{font-size:24px;letter-spacing:-.6px}
.adminStat.warn{border-color:rgba(214,170,84,.45);background:rgba(214,170,84,.07)}

/* --- the accounts table reads as rows, not as boxes ----------------------- */
.acctRow{border-radius:10px}
.acctRow:nth-child(odd){background:transparent}
.acctRow + .acctRow{border-top:1px solid var(--line);border-radius:0}
.acctRow:hover{background:rgba(128,128,128,.05);border-color:transparent}

/* v5.9.3 Control sizing inside the panel.
   Twenty-three buttons measured under 32px tall. That is small enough to notice
   with a mouse and a nuisance without one; 34 is the floor here. */
.adminMain .smallBtn,.adminMain .button.smallBtn,.adminMain button.smallBtn{
  min-height:34px;padding-top:0;padding-bottom:0;display:inline-flex;align-items:center;
}
.adminMain .adminInline button,.adminMain .adminTransfer button{min-height:34px}

/* v5.9.6 Disk. */
.diskPanel.isWarn{border-color:rgba(214,170,84,.45)}
.diskPanel.isUrgent{border-color:rgba(224,139,139,.55);background:rgba(224,139,139,.06)}
.diskBar{display:block;height:8px;border-radius:999px;background:rgba(128,128,128,.18);overflow:hidden;margin:4px 0 10px}
.diskBar span{display:block;height:100%;background:#25d366;border-radius:999px}
.diskPanel.isWarn .diskBar span{background:#d6aa54}
.diskPanel.isUrgent .diskBar span{background:#e08b8b}
.diskFacts{margin:0 0 6px;font-size:13px}
.diskVerdict{margin:0;font-size:13px;color:var(--muted)}

/* ===========================================================================
   v5.11.0 Accounts, shown on the client that holds them.
   An account has no meaning apart from whoever holds it, so a separate tab made
   you hold two lists in your head and match them up. It is the first thing on a
   client card now, because it is the substance — the permissions and dates are
   settings about it.
   =========================================================================== */
.heldAccounts{display:flex;flex-direction:column;gap:2px;margin-bottom:18px}
.heldAccount{
  display:grid;grid-template-columns:minmax(170px,1.3fr) minmax(170px,1.1fr) 140px minmax(230px,auto);
  gap:16px;align-items:center;padding:12px;border-radius:12px;background:rgba(128,128,128,.05);
}
.heldAccount + .heldAccount{margin-top:2px}
.heldWho{display:flex;flex-direction:column;gap:2px;min-width:0}
.heldState{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.heldSize{display:grid;grid-template-columns:auto auto;gap:1px 6px;align-items:baseline}
.heldSize strong{font-size:14px;font-variant-numeric:tabular-nums;text-align:right}
.heldSize small{font-size:11px;color:var(--muted)}
.heldMove{margin:0;justify-content:flex-end}
.heldMove select{flex:1;min-width:130px}
.heldNone{margin:0 0 16px;padding:11px 13px;border:1px dashed var(--line);border-radius:11px;
  font-size:12.5px;color:var(--muted)}
.unassignedPanel{border-color:rgba(214,170,84,.4)}
.unassignedPanel .heldAccount{grid-template-columns:minmax(170px,1.3fr) 140px minmax(230px,auto)}

@media(max-width:900px){
  .heldAccount,.unassignedPanel .heldAccount{grid-template-columns:1fr;gap:9px}
  .heldSize{justify-content:start}
  .heldMove{justify-content:flex-start}
}

/* v5.11.2 Freezes, shown where they cannot be missed. */
.blockPanel{border-color:rgba(224,139,139,.5);background:rgba(224,139,139,.05)}
.blockList li{grid-template-columns:150px 1fr}
.blockList .auditDetail{color:inherit;font-size:12.5px}

/* ===========================================================================
   v5.12.1 Client cards fold.
   One client was taking nine hundred pixels with everything open at once — the
   accounts, four boxes of settings, five sessions and the activity fold. With
   more than a couple of clients the page becomes a wall you scroll rather than
   a list you scan.
   Folded, a client is one line carrying what you look for: who, which accounts
   and whether they are capturing, how much they hold, and when they were last
   here. Everything else is one click away.
   =========================================================================== */
.clientCard > summary{list-style:none;cursor:pointer}
.clientCard > summary::-webkit-details-marker{display:none}
.clientSummary{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:4px 2px;border-radius:12px;
}
.clientSummary:hover{background:rgba(128,128,128,.05)}
.clientChevron{color:var(--muted);font-size:12px;transition:transform .15s ease;flex:0 0 auto}
.clientCard[open] > summary .clientChevron{transform:rotate(90deg)}
.clientIdent{display:flex;align-items:center;gap:8px;min-width:0}
.clientIdent strong{font-size:15px}
.clientAccountsBrief{display:flex;flex-wrap:wrap;gap:7px;min-width:0}
.briefAccount{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}
.briefAccount .adminHealth{margin:0}
.briefAccount.none{font-style:italic}
.clientBrief{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}
/* The header inside only appears once the card is open. */
.clientCard[open] .adminClientHead{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.adminSessions > summary{cursor:pointer;list-style:none}
.adminSessions > summary::-webkit-details-marker{display:none}
.adminSessions > summary:hover{color:inherit}
@media(max-width:820px){
  .clientBrief{margin-left:0;flex:1 0 100%;white-space:normal}
  .clientAccountsBrief{flex:1 0 100%}
}

/* v5.12.1 The page leads with the list, not with the form. */
.addClientPanel{padding:12px 18px}
.addClientSummary{cursor:pointer;list-style:none;font-size:14px;font-weight:700}
.addClientSummary::-webkit-details-marker{display:none}
.addClientSummary::before{content:'+';margin-right:8px;color:var(--muted);font-weight:600}
.addClientPanel details[open] .addClientSummary{margin-bottom:12px}
.adminBar > span:first-child{font-weight:700;color:inherit}

/* ===========================================================================
   v5.12.3 The panel on a phone.
   Measured at 390px: the header was 143px, the maintenance bar 151px for two
   rarely-pressed buttons, and the first client did not appear until 538px —
   nearly two thirds of the screen before anything you came to see. The theme
   switch sat 59px off the right edge, reachable only by scrolling the tab strip.
   =========================================================================== */
.adminBarFold{display:block;padding:0}
.adminBarFold > summary{
  list-style:none;cursor:pointer;padding:11px 14px;font-weight:700;color:inherit;font-size:13px;
}
.adminBarFold > summary::-webkit-details-marker{display:none}
.adminBarFold > summary::before{content:'\25B8';margin-right:9px;color:var(--muted);display:inline-block;transition:transform .15s ease}
.adminBarFold[open] > summary::before{transform:rotate(90deg)}
.adminBarFold[open]{padding-bottom:12px}
.adminBarFold form{display:inline-flex;margin:0 6px 0 14px}

/* The switch stays put while the sections scroll under it, instead of sitting
   off the edge where it can only be found by accident. */
@media(max-width:1099px){
  .adminThemeToggle{margin-left:auto;flex:0 0 auto}
}
@media(max-width:640px){
  .adminTabs{padding:0 10px;gap:0;overflow-x:visible}
  .adminTabs a{padding:11px 9px;font-size:12.5px;white-space:nowrap}
  .adminTabCount{margin-left:5px;padding:1px 5px;font-size:10px}
  .adminThemeToggle{padding:6px 10px;font-size:11.5px;margin:0 0 0 auto}
}

@media(max-width:640px){
  /* A title and a subtitle and two buttons on three lines is a lot of room for
     something that only says where you are. */
  .adminTop{padding:10px 14px;gap:8px}
  .adminTopMain small{display:none}
  .adminTopMain strong{font-size:15px}
  .adminMark{width:26px;height:26px;font-size:13px}
  .adminTopActions{gap:6px}
  .adminMain{padding:14px 14px 40px}
  .adminPanel{padding:14px}
  .clientSummary{gap:8px}
  .adminBarFold form{margin:0 4px}
  .adminBarFold[open] form{display:flex;margin:6px 14px 0}
}

/* At 360px the four sections plus the switch were 14px too wide. The counts are
   the least useful thing there — the number of clients is on the page itself. */
@media(max-width:380px){
  .adminTabs{padding:0 6px}
  .adminTabs a{padding:11px 7px;font-size:12px}
  .adminTabs .adminTabCount{display:none}
  .adminThemeToggle{padding:6px 9px;font-size:11px}
}

/* v5.13.0 Packages. */
.planBadge{padding:2px 9px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.3px}
.planBadge.isFull{background:rgba(37,211,102,.14);color:#4fce87}
.planBadge.isBasic{background:rgba(128,150,190,.16);color:#9db0d4}
.planForm{display:flex;flex-direction:column;gap:7px;margin:0 0 9px}
.planPick{display:flex;align-items:flex-start;gap:9px;padding:9px 11px;border:1px solid var(--line);
  border-radius:11px;cursor:pointer;font-size:12.5px}
.planPick.isOn{border-color:rgba(37,211,102,.45);background:rgba(37,211,102,.07)}
.planPick input{margin-top:2px}
.planPick span{display:flex;flex-direction:column;gap:2px}
.planPick small{color:var(--muted);font-size:11.5px}
.planNote{font-size:11.5px;line-height:1.5;display:block}

/* v5.14.0 A flag beside an address, when the country is known. */
.ipFlag{font-size:15px;line-height:1;margin-right:4px;vertical-align:-1px}

/* v5.15.0 Security: sign-ins, blocked addresses, devices. */
.signInList li{grid-template-columns:150px minmax(120px,1fr) minmax(150px,1fr) 130px auto}
.signInList li.isBad{background:rgba(224,139,139,.07)}
.signInWhere{display:flex;align-items:center;gap:4px;min-width:0}
.signInOutcome{font-size:11.5px;font-weight:700}
.signInOutcome.isOk{color:#4fce87}
.signInOutcome.isBad{color:#e08b8b}
@media(max-width:900px){ .signInList li{grid-template-columns:1fr;gap:4px} }

/* ===========================================================================
   v5.15.1 Security, arranged.
   It was four stacked panels with no summary: you had to read all of them to
   learn whether anything was wrong. The sign-in rows had columns wide enough to
   put a hand's width between a name and its address, and the device rows printed
   the raw user-agent string, which nobody reads.
   =========================================================================== */
.secStats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.secStats .adminStat strong{font-size:22px}

.signInTable{display:flex;flex-direction:column;gap:1px;margin-top:4px}
.signInHead,.signInRow{
  display:grid;
  grid-template-columns:110px minmax(90px,140px) minmax(150px,230px) 130px 1fr;
  gap:14px;align-items:center;
}
.signInHead{padding:0 10px 7px;border-bottom:1px solid var(--line)}
.signInHead span{font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.signInRow{padding:9px 10px;border-radius:9px;font-size:12.5px}
.signInRow:nth-child(odd){background:rgba(128,128,128,.04)}
.signInRow.isBad{background:rgba(224,139,139,.07)}
.signInRow time{color:var(--muted);font-variant-numeric:tabular-nums;font-size:11.5px}
.signInWho{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.signInWhere{display:flex;align-items:center;gap:5px;min-width:0}
.signInWhere code{font-size:12px}
.outcomePill{justify-self:start;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
.outcomePill.isOk{background:rgba(37,211,102,.14);color:#4fce87}
.outcomePill.isBad{background:rgba(224,139,139,.16);color:#e08b8b}
.signInAction{justify-self:end}

.secGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px}
.secGrid .adminPanel{margin-top:0}
.blockForm{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:6px}
.blockForm input{flex:1;min-width:120px;height:36px;padding:0 11px;border-radius:10px}
.blockNote{font-size:11.5px;margin:0 0 12px}
.secRow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:9px 0;font-size:12.5px}
.secRow + .secRow{border-top:1px dashed var(--line)}
.secRow.isBlocked{opacity:.65}
.secRowMain{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}
.secRowMain small{color:var(--muted);font-size:11.5px}
.secRowWhen{color:var(--muted);font-size:11.5px;margin-left:auto}
.secRow form{margin:0}

@media(max-width:900px){
  .signInHead{display:none}
  .signInRow{grid-template-columns:1fr auto;gap:4px 10px}
  .signInRow time{grid-column:1}
  .outcomePill{grid-column:2;grid-row:1;justify-self:end}
  .signInAction{grid-column:2;justify-self:end}
  .secRowWhen{margin-left:0;flex:1 0 100%}
}

/* One button measured 31px on a tablet — a pixel under, which is the kind of
   thing that only shows up when it is measured. */
.secRow .button,.secRow button,.blockForm button,.signInAction button{min-height:34px}
/* The header's own buttons were outside that rule, which is why one stayed at
   31px while everything in the page body was fixed. */
.adminTopActions .button,.adminTopActions button{min-height:34px}

/* ===========================================================================
   v5.16.0 The audit log, arranged.
   It was a hundred rows of mixed events, four thousand pixels tall, behind a
   dropdown and a Filter button — the same shape I had already replaced on the
   client list because you were right about it.
   =========================================================================== */
.auditStats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:12px}
.auditFilter{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:10px}
.auditFilter .clientSearch{flex:1;min-width:240px}
.auditCount{font-size:12px;color:var(--muted)}

.catChips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.catChip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line);
  border-radius:999px;font-size:12px;font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap}
.catChip:hover{color:inherit}
.catChip.active{background:rgba(37,211,102,.14);border-color:rgba(37,211,102,.4);color:#4fce87}
.catChip .adminTabCount{margin:0}

.auditTable{display:flex;flex-direction:column;gap:1px}
.auditRow{
  display:grid;grid-template-columns:104px 108px minmax(130px,190px) minmax(180px,1fr) 120px;
  gap:12px;align-items:baseline;padding:8px 10px;border-radius:8px;font-size:12.5px;
}
.auditRow:nth-child(odd){background:rgba(128,128,128,.04)}
.auditRow time{color:var(--muted);font-variant-numeric:tabular-nums;font-size:11.5px}
.auditRow .auditCat{justify-self:start;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.3px;background:rgba(128,128,128,.16);color:var(--muted)}
/* The few categories worth telling apart at a glance. */
.auditRow .cat-security{background:rgba(224,139,139,.18);color:#e08b8b}
.auditRow .cat-system{background:rgba(214,170,84,.18);color:#d9b271}
.auditRow .cat-users{background:rgba(37,211,102,.14);color:#4fce87}
.auditRow .cat-backup{background:rgba(128,150,190,.18);color:#9db0d4}
.auditAction{font-weight:600}
.auditRow .auditDetail{color:var(--muted);overflow-wrap:anywhere}
.auditRow .auditAccount{color:var(--muted);font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;justify-self:end}

@media(max-width:900px){
  .auditRow{grid-template-columns:auto 1fr;gap:3px 10px}
  .auditRow time{grid-column:1}
  .auditRow .auditCat{grid-column:2;justify-self:end}
  .auditAction,.auditRow .auditDetail,.auditRow .auditAccount{grid-column:1/-1;justify-self:start}
}

/* v5.16.0 Disk and memory read as one picture of the machine, not two panels. */
.healthGrid{margin-bottom:14px}
.healthGrid .adminPanel{margin-top:0}
.clientStats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin-bottom:14px}

/* v5.16.0 The summary strips on a phone.
   Five tiles stacked one per row pushed the first client from 359px down to
   655px — the summary undoing the folding that put it there. Two per row, and
   shorter, keeps both. */
@media(max-width:640px){
  .adminStats{grid-template-columns:repeat(2,1fr);gap:8px}
  .adminStats .adminStat{padding:10px 12px}
  .adminStats .adminStat strong{font-size:17px}
  .adminStats .adminStat small{font-size:10.5px}
  .clientStats .adminStat:nth-child(n+3){display:none}
  .auditStats{grid-template-columns:repeat(3,1fr)}
}
/* At 360px and below the summary is the difference between seeing a client and
   scrolling for one, so it goes entirely: the sidebar already carries the count
   and the list itself is the answer. */
@media(max-width:380px){
  .clientStats{display:none}
}

/* v5.17.0 A statement of what the archive did. */
.stmtRows{display:flex;flex-direction:column}
.stmtRow{display:flex;gap:16px;align-items:baseline;padding:10px 2px;font-size:13px}
.stmtRow + .stmtRow{border-top:1px solid var(--line)}
.stmtRow span{flex:0 0 190px;color:var(--muted);font-size:12.5px}
.stmtRow strong{overflow-wrap:anywhere}
@media(max-width:600px){ .stmtRow{flex-direction:column;gap:2px} .stmtRow span{flex:none} }
.priceForm{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:0 0 9px}
.priceForm input[name="price"]{width:92px}
.priceForm select{height:34px;padding:0 8px;border-radius:9px}
.stmtLink{display:inline-flex;margin-bottom:9px}
/* The price row's own controls. Added with the form and promptly measured at
   under 32px by the check that exists for exactly that. */
.priceForm input,.priceForm select,.priceForm button{min-height:34px}
.priceForm .adminInlineLabel{display:inline-flex;align-items:center;gap:6px}

/* v5.19.1 The owner's own password. */
.ownerPassword{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ownerPassword input{flex:1;min-width:180px;height:36px;padding:0 11px;border-radius:10px}

/* ===========================================================================
   v5.19.2 How you sign in.
   Two panels said the same thing — a password and a second factor are both
   "how you get in" — and the password form was three bare boxes in a row with
   placeholders standing in for labels, which is fine until you are halfway
   through and cannot see which box you are in.
   =========================================================================== */
.signInHalves{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px;align-items:start}
.signInHalf h3{margin:0 0 6px;font-size:13px;font-weight:700;letter-spacing:.2px;
  display:flex;align-items:center;gap:9px}
.signInWhy{font-size:12.5px;line-height:1.55;margin:0 0 14px}
.stateDot{padding:2px 9px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase}
.stateDot.isOn{background:rgba(37,211,102,.14);color:#4fce87}
.stateDot.isOff{background:rgba(214,170,84,.16);color:#d9b271}

.stackedForm{display:flex;flex-direction:column;gap:12px;max-width:340px}
.stackedForm label{display:flex;flex-direction:column;gap:5px}
.stackedForm label > span{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
.stackedForm input{height:38px;padding:0 12px;border-radius:10px;font-size:13.5px}
.stackedForm small{font-size:11px;color:var(--muted);line-height:1.5}
.stackedForm button{align-self:flex-start;margin-top:2px}
/* the two-factor side reuses the inline form; give it the same rhythm */
.signInHalf .adminInline{margin:0;flex-wrap:wrap;gap:8px}
.signInHalf .adminInline input{height:38px;padding:0 12px;border-radius:10px}
.signInHalf .totpSecret,.signInHalf .totpUri{font-size:12px;overflow-wrap:anywhere;margin:0 0 10px}
@media(max-width:640px){ .stackedForm{max-width:none} }

/* ===========================================================================
   v5.20.0 Update, as a section of its own.
   =========================================================================== */
.updateStats{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-bottom:14px}
.updateStats .adminStat strong{font-size:19px;font-variant-numeric:tabular-nums}
.updateBar strong{color:inherit}

.dropZone{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:34px 20px;margin:4px 0 14px;
  border:2px dashed var(--line);border-radius:16px;
  text-align:center;transition:border-color .15s ease,background .15s ease;
}
.dropZone.isOver{border-color:rgba(37,211,102,.6);background:rgba(37,211,102,.07)}
.dropIcon{width:30px;height:30px;color:var(--muted);margin-bottom:2px}
.dropZone.isOver .dropIcon{color:#4fce87}
.dropTitle{margin:0;font-size:14px;font-weight:700}
.dropOr{margin:0;font-size:12.5px;color:var(--muted)}
.linkBtn{background:none;border:0;padding:0;font:inherit;color:#4fce87;cursor:pointer;text-decoration:underline}
.pickPlain{margin:4px 0 14px}
.pickBtn{display:inline-flex;min-height:40px;align-items:center}

.updateProgress{margin:0 0 14px}
.progressBar{height:6px;border-radius:999px;background:rgba(128,128,128,.18);overflow:hidden}
.progressBar span{display:block;height:100%;width:0;border-radius:999px;background:#4fce87;transition:width .3s ease}
.progressNote{margin:8px 0 0;font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.progressNote.isBad{color:#e08b8b}
.progressNote.isGood{color:#4fce87}

.releaseRow{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:11px 0}
.releaseRow + .releaseRow{border-top:1px dashed var(--line)}
.releaseName{display:flex;align-items:center;gap:9px;font-size:13.5px}
.releaseRow form{margin:0 0 0 auto}
@media(max-width:640px){
  /* Not hidden by width: a narrow desktop window can still drag a file, and the
     script already hides it where the pointer is a finger. */
  .releaseRow form{margin-left:0;flex:1 0 100%}
}

/* Five sections and a theme switch on a phone: the row was tuned for four, and
   Update pushed the switch off the edge. Tighter, and the counts go earlier. */
@media(max-width:640px){
  .adminTabs{padding:0 6px}
  .adminTabs a{padding:11px 6px;font-size:11.5px}
  .adminTabs .adminTabCount{display:none}
  .adminThemeToggle{padding:6px 8px;font-size:11px}
}
@media(max-width:400px){
  .adminTabs a{padding:11px 5px;font-size:11px;letter-spacing:-.1px}
  .adminThemeToggle{padding:6px 7px;font-size:10.5px}
}
/* 320px is the narrowest phone still in use, and it was seven pixels over. */
@media(max-width:340px){
  .adminTabs a{padding:11px 4px;font-size:10.5px}
  .adminThemeToggle{padding:6px 6px;font-size:10px}
}