/* Bottom navigation shares the same layout in the site and Studio iframe. */
.app{grid-template-columns:350px minmax(0,1fr)}
.app>.rail{display:none}
.sidebar{position:relative;overflow:hidden}
.sidebar-head #open-settings-mobile{display:none!important}
.sidebar-head #new-chat[hidden]{display:none!important}
.section-title{margin:2px 22px 14px;font:750 23px/1.3 Manrope,'DM Sans',sans-serif;letter-spacing:-.6px;color:var(--ink)}
.sidebar-head{padding-bottom:14px}
.sidebar>.search{order:1}
.sidebar>.section-title{order:0}
.sidebar>.filters{order:2;flex-shrink:0}
.sidebar>.list-heading{order:3}
.sidebar>.contacts,.sidebar>.profile-panel{order:4}
.sidebar>.bottom-navigation{order:5}
.sidebar-head{order:-1;flex-shrink:0}
.bottom-navigation{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;flex-shrink:0;padding:8px 9px max(9px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#fff;z-index:3}
.bottom-navigation button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:56px;padding:3px 0;border-radius:14px;color:var(--muted);background:transparent;font-size:11px;font-weight:550;line-height:1.3}
.bottom-navigation .nav-icon{position:relative;display:grid;place-items:center;width:52px;height:30px;border-radius:11px;transition:background .15s,color .15s}
.bottom-navigation svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bottom-navigation button[aria-current=page]{color:var(--rose);font-weight:750}
.bottom-navigation button[aria-current=page] .nav-icon{background:var(--rose-soft)}
.bottom-navigation button:hover{background:#fcf7f9}
.bottom-navigation button:focus-visible{outline:2px solid var(--rose);outline-offset:-2px}
.nav-badge{position:absolute;top:-2px;right:1px;min-width:16px;height:16px;padding:0 4px;display:grid;place-items:center;border-radius:10px;background:var(--rose);color:#fff;font-size:9px;border:2px solid #fff;box-sizing:content-box}
.nav-badge[hidden],.sidebar>[hidden]{display:none!important}
.friends-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.friends-toolbar .text-button{font-size:12px;padding:10px 12px;white-space:nowrap}
.profile-panel{flex:1;min-height:0;overflow:hidden}
.profile-panel>dialog.profile-settings[open]{position:relative;inset:auto;display:flex;width:100%;max-width:none;height:100%;max-height:none;margin:0;border:0;border-radius:0;box-shadow:none;padding:0;background:#fbf7f9}
.app[data-main-view=profile] .section-title{display:none}
.profile-panel .settings-content{scrollbar-gutter:auto}
.profile-panel .settings-header{padding-top:12px;min-height:56px}
html.studio-green .bottom-navigation button[aria-current=page]{color:#185c43}
html.studio-green .bottom-navigation button[aria-current=page] .nav-icon{background:#e2f3eb}
html.studio-green .bottom-navigation button:hover{background:#f1f8f4}
html.studio-green .bottom-navigation .nav-badge{background:#185c43}
html.studio-green .bottom-navigation button:focus-visible{outline-color:#185c43}
html.studio-green .profile-panel>dialog.profile-settings[open]{background:#f4f9f6}
@media(min-width:1500px){.app{grid-template-columns:385px minmax(0,1fr)}}
@media(min-width:721px) and (max-width:1000px){.app{grid-template-columns:320px minmax(0,1fr)}}
@media(max-width:720px){.app{grid-template-columns:minmax(0,1fr)}.sidebar{grid-column:1;grid-row:1}.section-title{font-size:24px;margin:0 20px 14px}.bottom-navigation{padding-top:7px}.bottom-navigation button{min-height:55px;font-size:11px}.profile-panel .settings-header h2{font-size:21px}.app.chat-open .sidebar{display:none}.app.chat-open .conversation{display:flex}}
@media(prefers-reduced-motion:reduce){.bottom-navigation .nav-icon{transition:none}}

/* Section title and add action share a single compact header. */
.sidebar-head{min-height:82px;padding:20px 20px 16px;gap:12px;align-items:center;justify-content:space-between}
.sidebar-head>.section-title{display:block;flex:1;margin:0;padding:0;font-size:24px;line-height:32px;letter-spacing:-.6px}
.sidebar-head>#new-chat{margin-left:auto;flex:0 0 40px;width:40px;height:40px}
.app[data-main-view=profile] .sidebar-head{display:none}
.profile-panel #settings-dialog[data-screen=home] #close-settings{display:none!important}
.profile-panel #settings-dialog[data-screen=home] .settings-header{min-height:74px;padding:20px 22px 16px;background:#fff}
.profile-panel #settings-dialog[data-screen=home] .settings-header h2{font-size:24px;line-height:32px;font-weight:750;letter-spacing:-.6px}
@media(max-width:720px){.sidebar-head{min-height:80px;padding:18px 20px 16px}}

/* Profile home starts directly with the account; subpage headers remain available. */
.profile-panel #settings-dialog[data-screen=home]>.settings-header{display:none!important}