/* Stable App Shell geometry from v497; content remains visually card-free. */
:root{--im-main-nav-height:46px;--im-main-nav-safe:env(safe-area-inset-bottom,0px);--im-main-nav-total:calc(var(--im-main-nav-height) + var(--im-main-nav-safe));--im-shell-gap:10px;--im-shell-inset:18px;--im-card-radius:22px;--im-glass:rgba(255,255,255,.48);--im-glass-strong:rgba(255,255,255,.64);--im-glass-soft:rgba(255,255,255,.34);--im-glass-border:rgba(255,255,255,.62);--im-glass-shadow:0 10px 28px rgba(37,50,78,.08);--im-glass-blur:blur(20px) saturate(145%)}
:root[data-theme="dark"]{--bg:#172033;--panel:#202b40;--panel2:#29364d;--line:rgba(255,255,255,.20);--text:#f8fbff;--muted:#c3ccdc;--rail:rgba(23,32,51,.96);--sidebar:rgba(29,40,59,.96);--main:#172033;--topbar:rgba(32,43,64,.96);--composer:rgba(32,43,64,.96);--input:#2a374f;--card:#243149;--hover:#31415e;--bubble:#2a3852;--tool:#2b3a54;--avatar1:#50688f;--avatar2:#334765;--im-glass:rgba(45,58,82,.72);--im-glass-strong:rgba(53,68,95,.82);--im-glass-soft:rgba(40,53,76,.62);--im-glass-border:rgba(235,241,250,.28);--im-glass-shadow:0 10px 28px rgba(0,0,0,.20)}
html,body{height:100%;overflow:hidden;overscroll-behavior:none;margin:0!important;padding:0!important}
#imAppShell{position:fixed;inset:0;width:100vw;height:var(--im-shell-vh,100dvh);min-height:0;max-height:var(--im-shell-vh,100dvh);display:grid;grid-template-columns:74px minmax(0,1fr);grid-template-rows:minmax(0,1fr) var(--im-main-nav-total);padding:env(safe-area-inset-top) 0 0;overflow:clip;background:var(--im-surface-bg,var(--bg));box-sizing:border-box}
@media (display-mode:browser){:root{--im-main-nav-safe:0px}}
html.has-chat-wallpaper #imAppShell:not([data-surface="live"]){background:var(--im-chat-wallpaper);background-position:center;background-size:cover;background-repeat:no-repeat}
#imAppShell>.rail{grid-column:1;grid-row:1/3;min-height:0}
#imPageHost{position:relative;grid-column:2;grid-row:1;min-width:0;min-height:0;overflow:clip;display:flex;background:transparent}
#imPageHost>.sidebar,#imPageHost>.main{position:relative;inset:auto;transform:none;transition:none;flex:1 1 0;width:100%;height:100%;min-height:0;max-height:100%;margin:0;border:0;overflow:clip;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
#imPageHost>.sidebar{display:flex;flex-direction:column}
#imPageHost>.main{display:flex;flex-direction:column}
#imAppShell #imMessagesPage[hidden],#imAppShell #main[hidden],#imAppShell #chatView[hidden],#imAppShell #panelView[hidden]{display:none!important}
#imAppShell #panelView:not([data-owner="shared-media"]){position:relative;inset:auto;flex:1 1 auto;width:100%;height:100%;min-height:0;max-height:100%;padding:var(--im-shell-inset);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;background:transparent;box-sizing:border-box}
#imAppShell #chatView{min-width:0;min-height:0;flex:1 1 auto;background:transparent}
#imAppShell #chatView>.topbar{height:68px;min-height:68px;flex:0 0 68px;padding:0 18px;background:transparent}
#imAppShell #panelView.im-primary-page{display:block;padding:var(--im-shell-inset);background:transparent}
#imAppShell .primarypanel-head{margin:0 0 14px;font-size:22px;line-height:1.3;color:var(--text);background:transparent}
#imAppShell .sidehead{flex:0 0 auto;margin:10px var(--im-shell-inset) 6px;padding:10px 12px 12px;background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
#imAppShell .sidehead .search,#imAppShell .sidehead #search{background:rgba(255,255,255,.24);border:0;box-shadow:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#imAppShell #list{flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px var(--im-shell-inset) var(--im-shell-inset);display:grid;gap:var(--im-shell-gap);align-content:start;overscroll-behavior:contain;background:transparent}
#imAppShell #list .chat{width:100%;min-height:72px;margin:0;padding:11px 14px;display:grid;grid-template-columns:50px minmax(0,1fr) auto;gap:12px;align-items:center;background:transparent!important;border:0!important;border-radius:0!important;outline:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;color:var(--text)}
#imAppShell #list .chat>.avatar{width:50px;height:50px;min-width:50px;max-width:50px;min-height:50px;max-height:50px;flex:0 0 50px;border-radius:15px;overflow:hidden;display:grid;place-items:center;box-sizing:border-box;line-height:1}
#imAppShell #list .chat .avatar img,#imAppShell .avatar img{width:100%;height:100%;object-fit:cover;display:block}
#imAppShell #list .chat .name{font-weight:820;color:var(--text)}
#imAppShell #list .chat .preview{margin-top:2px;color:var(--muted)}
#imAppShell #list .chat:hover,#imAppShell #list .chat.active,#imAppShell #list .chat.pinned{background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important}
#imAppShell #list .chat.pinned .im-chat-last-time::before{content:'🔝 ';}
:root[data-theme="dark"].has-chat-wallpaper #imAppShell #sideTitle,:root[data-theme="dark"].has-chat-wallpaper #imAppShell #list .chat,:root[data-theme="dark"].has-chat-wallpaper #imAppShell #list .chat .name,html.chat-wallpaper-dark #imAppShell #sideTitle,html.chat-wallpaper-dark #imAppShell #list .chat,html.chat-wallpaper-dark #imAppShell #list .chat .name,html.has-chat-wallpaper[style*="url("] #imAppShell #sideTitle,html.has-chat-wallpaper[style*="url("] #imAppShell #list .chat,html.has-chat-wallpaper[style*="url("] #imAppShell #list .chat .name{color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 1px rgba(0,0,0,.95)}
:root[data-theme="dark"].has-chat-wallpaper #imAppShell #list .chat .preview,:root[data-theme="dark"].has-chat-wallpaper #imAppShell #list .chat .im-chat-last-time,html.chat-wallpaper-dark #imAppShell #list .chat .preview,html.chat-wallpaper-dark #imAppShell #list .chat .im-chat-last-time,html.has-chat-wallpaper[style*="url("] #imAppShell #list .chat .preview,html.has-chat-wallpaper[style*="url("] #imAppShell #list .chat .im-chat-last-time{color:#f1f5f9!important;text-shadow:0 1px 2px rgba(0,0,0,.92),0 0 1px rgba(0,0,0,.95)}
:root[data-theme="dark"].has-chat-wallpaper #imAppShell #chatView #chatName,:root[data-theme="dark"].has-chat-wallpaper #imAppShell #chatView .name,:root[data-theme="dark"].has-chat-wallpaper #imAppShell #chatView .bubble,:root[data-theme="dark"].has-chat-wallpaper #imAppShell #chatView #messageInput,html.chat-wallpaper-dark #imAppShell #chatView #chatName,html.chat-wallpaper-dark #imAppShell #chatView .name,html.chat-wallpaper-dark #imAppShell #chatView .bubble,html.chat-wallpaper-dark #imAppShell #chatView #messageInput,html.has-chat-wallpaper[style*="url("] #imAppShell #chatView #chatName,html.has-chat-wallpaper[style*="url("] #imAppShell #chatView .name,html.has-chat-wallpaper[style*="url("] #imAppShell #chatView #messageInput{color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 1px rgba(0,0,0,.95)}
:root[data-theme="dark"].has-chat-wallpaper #imAppShell #chatView #chatStatus,:root[data-theme="dark"].has-chat-wallpaper #imAppShell #chatView .msgtime,:root[data-theme="dark"].has-chat-wallpaper #imAppShell #chatView .small,:root[data-theme="dark"].has-chat-wallpaper #imAppShell #chatView .muted,html.chat-wallpaper-dark #imAppShell #chatView #chatStatus,html.chat-wallpaper-dark #imAppShell #chatView .msgtime,html.chat-wallpaper-dark #imAppShell #chatView .small,html.chat-wallpaper-dark #imAppShell #chatView .muted,html.has-chat-wallpaper[style*="url("] #imAppShell #chatView #chatStatus,html.has-chat-wallpaper[style*="url("] #imAppShell #chatView .msgtime{color:#f1f5f9!important;text-shadow:0 1px 2px rgba(0,0,0,.92),0 0 1px rgba(0,0,0,.95)}
:root[data-theme="dark"].has-chat-wallpaper #imAppShell #chatView #messageInput::placeholder,html.chat-wallpaper-dark #imAppShell #chatView #messageInput::placeholder,html.has-chat-wallpaper[style*="url("] #imAppShell #chatView #messageInput::placeholder{color:#e2e8f0!important;opacity:1!important;text-shadow:0 1px 2px rgba(0,0,0,.92),0 0 1px rgba(0,0,0,.95)}
#imFoldedConversationsToggle{width:100%;min-height:24px;margin:0;padding:0;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;color:var(--muted);display:grid;place-items:center;cursor:pointer}
#imFoldedConversationsToggle .arrow{display:block;font-size:22px;line-height:1;font-weight:800;transform:rotate(90deg);background:transparent;border:0;box-shadow:none}
:root[data-theme="dark"].has-chat-wallpaper #imFoldedConversationsToggle,html.chat-wallpaper-dark #imFoldedConversationsToggle,html.has-chat-wallpaper[style*="url("] #imFoldedConversationsToggle{color:#f1f5f9;text-shadow:0 1px 2px rgba(0,0,0,.92),0 0 1px rgba(0,0,0,.95)}
#imAppShell .im-primary-page .primarymenu,#imAppShell .im-primary-page #meMenu{display:grid;grid-template-columns:1fr;gap:var(--im-shell-gap);margin:0;padding:0;border:0;border-radius:0;background:transparent;overflow:visible}
#imAppShell .im-primary-page .primarymenu>button,#imAppShell .im-primary-page .im-menu-row{width:100%;min-height:72px;max-height:none;margin:0;padding:11px 14px;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;text-align:left;overflow:hidden;font:inherit;cursor:pointer;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;color:var(--text)}
#imAppShell .im-primary-page .im-menu-item{width:100%;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
#imAppShell .im-primary-page .im-menu-panel{margin:7px 0 0;padding:12px 13px;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
#imAppShell .im-primary-page .mi{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:transparent;font-size:22px;border:0;box-shadow:none}
:root[data-theme="dark"] #imAppShell .im-primary-page .mi{background:transparent}
#imAppShell .im-primary-page .mt{min-width:0;font-size:16px;font-weight:820;color:var(--text)}
#imAppShell .im-primary-page .arrow{margin-left:auto;font-size:22px;line-height:1;color:var(--muted);font-weight:800;transition:transform .16s;background:transparent;border:0;box-shadow:none}
#imAppShell .im-primary-page .im-menu-item.open>.im-menu-row .arrow{transform:rotate(90deg)}
:root[data-theme="dark"] #imAppShell .im-primary-page .primarymenu>button,:root[data-theme="dark"] #imAppShell .im-primary-page .im-menu-row,:root[data-theme="dark"] #imAppShell .im-primary-page .mt{color:#f8fbff!important}
:root[data-theme="dark"] #imAppShell .im-primary-page .arrow,:root[data-theme="dark"] #imAppShell .im-primary-page .muted,:root[data-theme="dark"] #imAppShell .im-primary-page small,:root[data-theme="dark"] #imAppShell .im-primary-page .im-menu-panel{color:#cbd5e1!important}
#imAppShell .im-primary-page>.card,#imAppShell .im-primary-page .card,#imAppShell #panelView>.card,#imAppShell #panelView .card{margin-bottom:var(--im-shell-gap);background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;color:var(--text)}
#imAppShell #panelView input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),#imAppShell #panelView textarea,#imAppShell #panelView select{background:rgba(255,255,255,.24);border:0;color:var(--text);box-shadow:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#imAppShell #mobileTabs{grid-column:2;grid-row:2;position:relative;inset:auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;height:var(--im-main-nav-total);min-height:0;max-height:var(--im-main-nav-total);margin:0;padding:1px 8px var(--im-main-nav-safe);border:0;background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;z-index:50000;overflow:hidden;box-sizing:border-box;box-shadow:none}
:root[data-theme="dark"] #imAppShell #mobileTabs{background:#1d283b}
:is(#imAppShell #mobileTabs,body.im-role-page .im-main-nav-page) .mobiletab{position:relative;height:44px;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;display:flex;flex-direction:column;gap:1px;align-items:center;justify-content:center;text-decoration:none;color:var(--text);font-size:10px;line-height:1;cursor:pointer;opacity:.76}
:is(#imAppShell #mobileTabs,body.im-role-page .im-main-nav-page) .tabicon{display:grid;place-items:center;width:21px;height:21px}
:is(#imAppShell #mobileTabs,body.im-role-page .im-main-nav-page) .tabicon img{width:20px;height:20px;display:block;object-fit:contain}
:is(#imAppShell #mobileTabs,body.im-role-page .im-main-nav-page) .mobiletab>span:last-child{font-size:10px;line-height:1;font-weight:500}
:is(#imAppShell #mobileTabs,body.im-role-page .im-main-nav-page) .mobiletab.active{opacity:1;background:transparent!important}
:is(#imAppShell #mobileTabs,body.im-role-page .im-main-nav-page) .mobiletab.active>span:last-child{font-weight:700}
:is(#imAppShell #mobileTabs,body.im-role-page .im-main-nav-page) .mobiletab::after{display:none;content:''}
:is(#imAppShell #mobileTabs,body.im-role-page .im-main-nav-page) .mobiletab.active::after{display:block;position:absolute;left:50%;bottom:0;width:22px;height:2px;border-radius:999px;background:currentColor;transform:translateX(-50%);pointer-events:none}
nav.mobiletabs:not(#mobileTabs),body:not(.im-role-page) nav.im-main-nav:not(#mobileTabs),.im-main-nav-root:not(#mobileTabs){display:none!important}
body.imcall-active #imAppShell{grid-template-rows:minmax(0,1fr) 0}
body.imcall-active #imAppShell #mobileTabs{display:none!important}
body.chat-detail #imPageHost>.sidebar{flex:0 0 330px;border-right:1px solid var(--line)}
body.chat-detail #imPageHost>.main{flex:1 1 0}
@media(max-width:850px),(orientation:landscape) and (max-height:600px) and (pointer:coarse){
  #imAppShell{grid-template-columns:minmax(0,1fr)}
  #imAppShell>.rail{display:none}
  #imPageHost,#imAppShell #mobileTabs{grid-column:1}
  body.chat-detail #imPageHost>.sidebar{display:none}
  #imAppShell #chatView>.topbar{height:58px;min-height:58px;flex:0 0 58px;padding:0 10px}
  html.im-keyboard-open body.chat-detail #imAppShell{top:var(--im-vv-top,0px);height:var(--im-vv-height,var(--im-shell-vh,100dvh));max-height:var(--im-vv-height,var(--im-shell-vh,100dvh))}
}
#imAppShell #imPageHost [hidden]{display:none!important}
html body #imAppShell[data-viewport-lock]{height:var(--im-locked-vh);max-height:var(--im-locked-vh);grid-template-rows:minmax(0,1fr) var(--im-main-nav-total)}


/* Secondary surfaces inherit the selected app theme; primary wallpaper UI above is untouched. */
#imAppShell #panelView:not(.im-primary-page),#imAppShell #panelView:not(.im-primary-page) .modal,#imAppShell #panelView:not(.im-primary-page) .sheet,#imAppShell #panelView:not(.im-primary-page) .panel{color:var(--text)!important;background-color:var(--bg)!important}
#imAppShell #panelView:not(.im-primary-page) .card,#imAppShell #panelView:not(.im-primary-page) .field,#imAppShell #panelView:not(.im-primary-page) input,#imAppShell #panelView:not(.im-primary-page) textarea,#imAppShell #panelView:not(.im-primary-page) select{color:var(--text)!important;background-color:var(--panel)!important;border-color:var(--line)!important}
#imAppShell #panelView:not(.im-primary-page) button:not(.danger):not(.primary){color:var(--text)}

/* One avatar shape/crop everywhere; each surface may keep its own semantic size. */
#imAppShell .avatar,#imAppShell .sm-ava,#imAppShell .member-avatar,#imAppShell .memberAvatar,#imAppShell [data-member-avatar]{width:50px!important;height:50px!important;min-width:50px;flex:0 0 50px;border-radius:15px!important;overflow:hidden!important}
#imAppShell .avatar img,#imAppShell .sm-ava img,#imAppShell .member-avatar img,#imAppShell .memberAvatar img,#imAppShell [data-member-avatar] img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;display:block!important}

/* Logout is text-only, centered, and never rendered as a card/button box. */
#imAccountInlineLogout,.im-account-actions{text-align:center!important;background:transparent!important;border:0!important;box-shadow:none!important}
#imAccountInlineLogout,.im-account-actions [data-im-logout]{display:inline-block!important;width:auto!important;min-height:0!important;max-width:none!important;margin:18px auto 8px!important;padding:8px 12px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--danger)!important;text-align:center!important;font-weight:850!important}

/* Media tabs stay tactile while their single owner refreshes cached/network data. */
#imAppShell .sm-tab,#imAppShell .sm-feed-modes button{transition:transform .12s ease,opacity .12s ease,color .12s ease,border-color .12s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation;will-change:transform}
#imAppShell .sm-tab:active,#imAppShell .sm-feed-modes button:active{transform:scale(.94);opacity:1!important}
#imAppShell .sm-tab.on,#imAppShell .sm-feed-modes button.on{transform:translateZ(0);opacity:1}

/* Conversation avatar invariant: one size, one crop, one corner radius. */

/* Nearby surface: loaded before the first navigation frame. */
#panelView[data-owner="nearby"]{padding:0!important;overflow:hidden!important}.im-nearby-map-page{height:100%;min-height:0;display:flex;flex-direction:column;background:var(--main)}.im-nearby-map-head{display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top) + 8px) 10px 8px;flex:0 0 auto}.im-nearby-map-head b{flex:1;font-size:17px}.im-nearby-map-head button{height:34px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--text);font-size:12px;font-weight:700}.im-nearby-map-wrap{position:relative;flex:1;min-height:300px;margin:0 8px 8px;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#111}.im-nearby-tiles{position:absolute;inset:0;overflow:hidden;background:#111}.im-nearby-tiles img{position:absolute;width:256px;height:256px;max-width:none;border:0;border-radius:0;pointer-events:none;user-select:none}.im-nearby-marker{position:absolute;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;border:3px solid #fff;background:#4f7df3;box-shadow:0 5px 18px rgba(0,0,0,.32);overflow:hidden;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:900;z-index:4}.im-nearby-marker.me{border-color:#53c26b}.im-nearby-marker.on{box-shadow:0 0 0 4px rgba(255,79,135,.35),0 5px 18px rgba(0,0,0,.32)}.im-nearby-marker img{width:100%;height:100%;object-fit:cover}.im-nearby-bottom{display:flex;align-items:center;gap:8px;padding:8px 10px 2px;flex:0 0 auto}.im-nearby-distance{min-width:0;flex:1;font-size:13px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.im-nearby-bottom button{height:34px;padding:0 11px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--text);font-size:12px;font-weight:750}.im-nearby-credit{font-size:8px;color:var(--muted);opacity:.45;text-align:right;padding:0 10px calc(var(--im-main-nav-height,64px) + env(safe-area-inset-bottom) + 7px)}

body.im-role-page .im-main-nav-page{position:fixed;left:0;right:0;bottom:0;width:100%;height:var(--im-main-nav-total);min-height:0;margin:0;padding:1px 8px var(--im-main-nav-safe);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:0;border-top:1px solid var(--line);background:var(--panel);box-sizing:border-box}
/* Group settings remain inside the existing chat surface; never cover the App Shell's single navigation row. */
#imAppShell #imPageHost #imGroupModal.im-group-chat-overlay{position:absolute;inset:0;z-index:120;display:block;max-height:100%;margin:0;padding:12px max(12px,env(safe-area-inset-right)) 18px max(12px,env(safe-area-inset-left));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--bg);color:var(--text);box-sizing:border-box}
#imAppShell #imPageHost #imGroupModal.im-group-chat-overlay>.modal,#imAppShell #imPageHost #imGroupModal.im-group-chat-overlay>.im-group-settings-subpage>.modal{width:min(100%,540px);max-width:540px;max-height:none;margin:0 auto;box-sizing:border-box}
#imAppShell #imPageHost #imGroupModal.im-group-chat-overlay>.group-settings-modal[hidden]{display:none!important}
#imAppShell #imPageHost #imGroupModal.im-group-chat-overlay>.im-group-settings-subpage{min-height:0}
#imAppShell #imPageHost #imBotCenter.im-bot-group-inline{position:absolute;inset:0;z-index:121;overflow-y:auto;max-height:100%;-webkit-overflow-scrolling:touch}
#imAppShell #imPageHost #imBotCenter.im-bot-group-inline .bc-sheet{min-height:100%;height:auto;padding-bottom:18px}


/* Desktop window layout. Mobile App Shell rules and original chat DOM are unchanged. */
#imAppShell[data-desktop="1"]{grid-template-columns:64px minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important;padding:0!important;--im-desktop-list-width:330px;--im-shell-inset:12px;background:var(--bg)}
#imAppShell[data-desktop="1"]>.rail{display:flex!important;grid-column:1!important;grid-row:1!important;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;gap:4px;padding:12px 6px;background:var(--rail);border-right:1px solid var(--line)}
#imAppShell[data-desktop="1"]>.rail .brand{width:42px;height:42px;flex:0 0 auto;margin:2px 0 10px}
#imAppShell[data-desktop="1"]>.rail .navbtn{width:44px;height:43px;flex:0 0 auto;border-radius:12px}
#imAppShell[data-desktop="1"]>.rail .navbtn.active{background:var(--hover)}
#imAppShell[data-desktop="1"] #mobileTabs{display:none!important}
#imAppShell[data-desktop="1"] #imPageHost{display:grid!important;grid-column:2!important;grid-row:1!important;grid-template-columns:var(--im-desktop-list-width,330px) minmax(0,1fr);grid-template-rows:minmax(0,1fr);min-width:0;height:100%;overflow:hidden}
#imAppShell[data-desktop="1"] #imPageHost>.sidebar{grid-column:1;grid-row:1;width:auto!important;min-width:0;max-width:none;flex:none!important;display:flex!important;background:var(--sidebar);border-right:1px solid var(--line);overflow:hidden}
#imAppShell[data-desktop="1"] #imPageHost>.main{grid-column:2;grid-row:1;width:auto!important;min-width:0;max-width:none;flex:none!important;background:var(--main);overflow:hidden}
#imAppShell[data-desktop="1"] #imPageHost[data-surface="panel"],#imAppShell[data-desktop="1"] #imPageHost[data-surface="moments"],#imAppShell[data-desktop="1"] #imPageHost[data-surface="favorites"],#imAppShell[data-desktop="1"] #imPageHost[data-surface="live"]{grid-template-columns:minmax(0,1fr)}
#imAppShell[data-desktop="1"] #imPageHost[data-surface="panel"]>.main,#imAppShell[data-desktop="1"] #imPageHost[data-surface="moments"]>.main,#imAppShell[data-desktop="1"] #imPageHost[data-surface="favorites"]>.main{grid-column:1}
#imAppShell[data-desktop="1"] #imPageHost>.sidebar .sidehead{margin:0;padding:17px 16px 11px;border-bottom:1px solid var(--line)}
#imAppShell[data-desktop="1"] #imPageHost>.sidebar .sidehead .title{font-size:18px;min-height:32px;gap:6px}
#imAppShell[data-desktop="1"] #imPageHost>.sidebar .sidehead .groupQuick{height:30px;min-height:30px;padding:0 8px;font-size:12px}
#imAppShell[data-desktop="1"] #imPageHost>.sidebar .sidehead .add{width:30px;height:30px;flex:0 0 30px}
#imAppShell[data-desktop="1"] #imPageHost>.sidebar #search{height:38px;margin-top:12px;padding:8px 12px;border:1px solid var(--line);border-radius:9px;background:var(--input);backdrop-filter:none;-webkit-backdrop-filter:none;font-size:13px}
#imAppShell[data-desktop="1"] #imPageHost #list{display:block!important;overflow-y:auto;overflow-x:hidden;min-height:0;padding:4px 0 12px;scrollbar-width:thin;overscroll-behavior:contain}
#imAppShell[data-desktop="1"] #imPageHost #list .chat{min-height:68px;padding:9px 14px;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;border-radius:0!important;margin:0;background:transparent!important}
#imAppShell[data-desktop="1"] #imPageHost #list .chat>.avatar{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;max-width:44px;border-radius:12px!important;flex-basis:44px!important}
#imAppShell[data-desktop="1"] #imPageHost #list .chat:hover{background:var(--hover)!important}
#imAppShell[data-desktop="1"] #imPageHost #list .chat.active{background:color-mix(in srgb,var(--accent) 12%,var(--sidebar))!important}
#imAppShell[data-desktop="1"] #imPageHost #list .chat .name{font-size:14px;font-weight:700}
#imAppShell[data-desktop="1"] #imPageHost #list .chat .preview{font-size:12px;margin-top:3px}
#imAppShell[data-desktop="1"] #chatView{height:100%!important;max-height:100%;background:var(--main)}
#imAppShell[data-desktop="1"] #chatView>.topbar{height:60px;min-height:60px;flex:0 0 60px;padding:0 20px;border-bottom:1px solid var(--line);background:var(--topbar);gap:12px}
#imAppShell[data-desktop="1"] #chatView .topbar .pname{font-size:15px}
#imAppShell[data-desktop="1"] #chatView .topbar .status{font-size:11px}
#imAppShell[data-desktop="1"] #chatView .topbar .iconbtn{width:34px;height:34px;border:0;border-radius:8px;background:transparent;box-shadow:none}
#imAppShell[data-desktop="1"] #chatView .topbar .iconbtn:hover{background:var(--hover)}
#imAppShell[data-desktop="1"] #chatView #messages{padding:20px clamp(16px,4vw,58px);gap:10px;overscroll-behavior:contain}
#imAppShell[data-desktop="1"] #chatView .msg{max-width:min(730px,82%)}
#imAppShell[data-desktop="1"] #chatView .bubble{border-radius:11px 11px 11px 3px;box-shadow:none;font-size:14px;line-height:1.5}
#imAppShell[data-desktop="1"] #chatView .me .bubble{border-radius:11px 11px 3px 11px}
#imAppShell[data-desktop="1"] #chatView .composer{border-top:1px solid var(--line);background:var(--composer);padding:12px 18px 14px;flex:0 0 auto;min-height:78px}
#imAppShell[data-desktop="1"] #chatView .inputrow{max-width:1100px;margin:0 auto}
#imAppShell[data-desktop="1"] #chatView #messageInput{font-size:14px;line-height:1.5;min-height:38px}
#imAppShell[data-desktop="1"] #chatView[data-desktop-empty]>.topbar,#imAppShell[data-desktop="1"] #chatView[data-desktop-empty]>.composer,#imAppShell[data-desktop="1"] #chatView[data-desktop-empty]>#imChatBottom{display:none!important}
#imAppShell[data-desktop="1"] #chatView[data-desktop-empty] #messages{align-items:center;justify-content:center}
#imAppShell[data-desktop="1"] #chatView [data-im-desktop-empty]{font-size:14px;color:var(--muted);letter-spacing:.03em}
#imAppShell[data-desktop="1"] #imDesktopBack{display:none;align-items:center;justify-content:center;width:34px;height:34px;padding:0;flex:0 0 34px;font-size:29px;line-height:1;border-radius:9px}
#imAppShell[data-desktop="1"] #imDesktopSplitHandle{position:absolute;left:calc(var(--im-desktop-list-width,330px) - 4px);top:0;bottom:0;width:8px;z-index:5;cursor:col-resize;touch-action:none;background:transparent}
#imAppShell[data-desktop="1"] #imDesktopSplitHandle:hover,#imAppShell[data-desktop="1"] #imDesktopSplitHandle:focus-visible{background:color-mix(in srgb,var(--accent) 28%,transparent);outline:none}
#imAppShell[data-desktop="1"] #imPageHost[data-surface="panel"] #imDesktopSplitHandle,#imAppShell[data-desktop="1"] #imPageHost[data-surface="moments"] #imDesktopSplitHandle,#imAppShell[data-desktop="1"] #imPageHost[data-surface="favorites"] #imDesktopSplitHandle,#imAppShell[data-desktop="1"] #imPageHost[data-surface="live"] #imDesktopSplitHandle{display:none}
@media(max-width:760px){
 #imAppShell[data-desktop="1"] #imPageHost{grid-template-columns:minmax(0,1fr)}
 #imAppShell[data-desktop="1"] #imPageHost[data-surface="chat"]>.sidebar{display:none!important}
 #imAppShell[data-desktop="1"] #imPageHost[data-surface="messages"]>.main{display:none!important}
 #imAppShell[data-desktop="1"] #imPageHost[data-surface="messages"]>.sidebar{display:flex!important;grid-column:1}
 #imAppShell[data-desktop="1"] #imPageHost[data-surface="chat"]>.main{grid-column:1}
 #imAppShell[data-desktop="1"] #imDesktopSplitHandle{display:none}
 #imAppShell[data-desktop="1"] #chatView #imDesktopBack{display:flex}
 #imAppShell[data-desktop="1"] #chatView>.topbar{padding:0 10px;height:56px;min-height:56px;flex-basis:56px}
 #imAppShell[data-desktop="1"] #chatView>.topbar .actions{gap:2px}
}
@media(max-height:580px){
 #imAppShell[data-desktop="1"]>.rail{gap:0;padding:5px 4px}
 #imAppShell[data-desktop="1"]>.rail .navbtn{height:37px}
 #imAppShell[data-desktop="1"] #chatView>.topbar{height:52px;min-height:52px;flex-basis:52px}
}

#imAppShell[data-desktop="1"]>.rail .navbtn{color:var(--muted)!important}
#imAppShell[data-desktop="1"]>.rail .navbtn.active{color:var(--accent)!important}
#imAppShell[data-desktop="1"]>.rail .navbtn:hover{color:var(--text)!important}
#imAppShell[data-desktop="1"]>.rail .navglyph,#imAppShell[data-desktop="1"]>.rail .navglyph svg{display:grid;place-items:center;width:22px;height:22px}
