/* Circle 4.7.9 — mobile/tablet-only layer. Loaded with media=max-width:900px.
   Desktop stylesheet and desktop markup intentionally untouched. */
:root{--circle-mobile-gap:12px;--circle-mobile-side:14px;--circle-mobile-nav:calc(72px + env(safe-area-inset-bottom,0px))}
html,body{max-width:100%;overflow-x:clip}
*,*::before,*::after{box-sizing:border-box}
img,video,canvas,svg{max-width:100%}
img,video{height:auto}
button,a,input,textarea,select{touch-action:manipulation}
button,a,summary{ -webkit-tap-highlight-color:transparent }
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}
.circle-main,.chat,.layout,.panel,.feed-post,.group-hero,.circle-home-grid,.circle-profile-columns,.circle-profile-editor,.circle-community-editor,.circle-admin-cards{min-width:0;max-width:100%}
.circle-main>*{min-width:0;max-width:100%;}
.circle-main .panel,.circle-main .feed-post{overflow-wrap:break-word}
.circle-main input:not([type=checkbox]):not([type=radio]):not([type=range]),.circle-main textarea,.circle-main select{max-width:100%;min-width:0}
pre,code{max-width:100%;overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere}
/* Tablet fallback rules; the shared touch layout below supersedes these up to 900px. */
@media(min-width:681px) and (max-width:900px){
 .layout,body.sidebar-collapsed .layout{grid-template-columns:108px 174px minmax(0,1fr)!important;min-width:0}
 .layout>.sidebar.circle-sidebar{min-width:0;padding:14px 6px!important}
 .primary-nav .nav-item{padding:9px 3px!important;min-width:0}
 .primary-nav .nav-item>span:not(.nav-icon){font-size:11px!important;overflow-wrap:anywhere!important;white-space:normal!important;max-width:100%}
 .layout>.community-rail{min-width:0;padding:10px 7px!important}
 .community-rail-heading{gap:5px;min-width:0}
 .community-rail-heading>*{min-width:0}
 .community-rail-meta strong{white-space:normal;overflow-wrap:anywhere}
 .circle-main{padding:18px 14px 28px!important}
 .circle-main>.circle-profile-columns{grid-template-columns:minmax(0,1fr)!important}
 .circle-profile-left,.circle-profile-center,.circle-profile-right{grid-column:1!important}
 .circle-profile-right{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .friends-workspace,.notifications-workspace{grid-template-columns:minmax(0,1fr)!important}
 .group-layout{grid-template-columns:minmax(0,1fr)!important}
 .group-subnav{position:static;display:flex;flex-wrap:wrap}
 .group-right{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 .circle-main>.circle-home-grid{grid-template-columns:minmax(0,1fr)!important}
 .circle-home-grid>.circle-home-stories{grid-row:1!important;grid-column:1!important}
 .circle-home-grid>.circle-home-feed{grid-row:2!important;grid-column:1!important}
 .circle-home-grid>.circle-home-voice{grid-row:3!important;grid-column:1!important;position:static!important}
 .circle-admin-cards,.circle-community-management-grid{grid-template-columns:minmax(0,1fr)!important}
}
@media(max-width:900px){
 :root{--circle-mobile-side:clamp(9px,3.4vw,16px)}
 html{scroll-padding-top:5px}
 body{width:100%;min-width:0;overflow-x:clip}
 .topbar{height:62px!important;min-height:62px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:6px!important;padding:0 var(--circle-mobile-side)!important}
 .topbar .brand-lockup{flex:0 0 auto;min-width:0;gap:5px!important}
 .topbar .brand-lockup img{width:28px!important;height:28px!important}
 .topbar .brand-lockup span{font-size:18px!important}
 .topbar .brand-tagline,.topbar .brand small{display:none!important}
 .topbar>.header-actions{order:2;display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;min-width:0;margin:0!important;gap:3px!important}
 .topbar>.userline{order:1;min-width:0;max-width:29vw;flex:0 1 auto;margin:0!important}
 .topbar .header-profile-wrap{min-width:0;max-width:100%}
 .topbar .header-identity{min-width:0;max-width:100%}
 .topbar .header-identity .user-name{min-width:0;max-width:clamp(44px,14vw,90px)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px!important}
 .topbar .header-avatar-wrap,.topbar .topbar-avatar{flex-shrink:0}
 .topbar .icon-control,.topbar .header-logout-button{width:34px!important;min-width:34px!important;height:34px!important;min-height:34px!important;padding:6px!important}
 .topbar #sidebarToggle{display:none!important} /* mobile navigation is always visible below */
 .topbar .header-presence-menu{max-width:min(260px,calc(100vw - 20px));left:auto!important;right:0!important;z-index:80}
 .layout,body.sidebar-collapsed .layout{display:flex!important;flex-direction:column!important;width:100%;min-width:0;height:calc(100dvh - 62px - var(--circle-mobile-nav))!important;min-height:0!important;overflow:hidden!important}
 .layout>.sidebar.circle-sidebar{display:none!important}
 .layout>.community-rail{order:0;display:flex!important;flex:0 0 auto;flex-direction:row;align-items:center;justify-content:flex-start;gap:9px;width:100%!important;min-width:0;max-width:100%;height:60px;min-height:60px;max-height:60px;padding:8px var(--circle-mobile-side)!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
 .community-rail-heading{flex:0 0 auto;min-width:max-content;gap:6px}
 .community-rail-item,.community-rail-add,.rail-home{flex:0 0 43px;width:43px!important;min-width:43px;height:43px!important;min-height:43px;border-radius:12px}
 .community-rail-item img{width:100%;height:100%;object-fit:cover}
 .community-rail-list{display:flex!important;gap:8px;align-items:center;flex:0 0 auto;min-width:max-content}
 .community-rail-meta{max-width:96px;overflow:hidden}
 .community-rail-meta strong{font-size:11px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .community-rail-meta small{font-size:9px!important}
 .layout>.chat,.layout>.circle-main{order:2;flex:1 1 auto;min-width:0!important;min-height:0!important;width:100%!important;max-width:100%!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior-y:contain;padding:12px var(--circle-mobile-side) calc(24px + env(safe-area-inset-bottom,0px))!important;scrollbar-gutter:stable}
 .mobile-bottom-nav{position:fixed!important;left:0!important;right:0!important;bottom:0!important;z-index:45!important;display:grid!important;border-top:1px solid rgba(198,161,91,.28)!important;background:rgba(17,18,21,.96)!important;backdrop-filter:blur(18px);min-height:var(--circle-mobile-nav)!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:2px!important;padding:6px 5px calc(6px + env(safe-area-inset-bottom,0px))!important}
 .mobile-bottom-nav a{min-width:0!important;padding:5px 0!important;gap:3px!important}
 .mobile-bottom-nav a>span{min-width:24px;min-height:24px;display:grid;place-items:center}
 .mobile-bottom-nav small{font-size:10px!important;line-height:1.25!important;overflow:hidden;text-overflow:ellipsis;max-width:100%}
 .circle-main>*{width:100%!important;margin-left:0!important;margin-right:0!important;max-width:100%!important}
 .panel{padding:14px!important;margin:10px 0!important;border-radius:13px}
 h1{font-size:clamp(20px,6vw,27px)}
 h2{font-size:16px}
 .grid,.invite-create-grid{grid-template-columns:minmax(0,1fr)!important}
 /* Home stories are the full-width header; voice activity stacks below posts. */
 .circle-main>.circle-home-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto auto!important;gap:12px!important;align-items:start;width:100%!important}
 .circle-home-grid>.circle-home-stories{grid-column:1!important;grid-row:1!important;width:100%!important;max-width:100%;min-width:0;margin:0!important;padding:0 0 3px!important;overflow:hidden}
 .circle-home-grid>.circle-home-stories .stories-row{display:flex!important;gap:12px!important;overflow-x:auto!important;overscroll-behavior-x:contain;scroll-snap-type:x proximity;max-width:100%;padding:5px 3px 13px!important}
 .circle-home-grid>.circle-home-stories .story-card.story-preview-card{flex:0 0 126px!important;width:126px!important;height:176px!important;min-height:176px!important;scroll-snap-align:start}
 .circle-home-grid>.circle-home-stories .story-add.circle-story-add-trigger{flex:0 0 76px!important;width:76px!important;min-width:76px!important;height:76px!important;min-height:76px!important;margin:0 10px!important;align-self:center!important;aspect-ratio:1!important;display:grid!important;place-items:center!important}
 .circle-home-grid>.circle-home-stories .story-add.circle-story-add-trigger>.circle-story-plus-icon{display:block!important;width:35px!important;height:35px!important;margin:0!important;position:static!important}
 .circle-home-grid>.circle-home-feed{grid-column:1!important;grid-row:2!important;width:100%!important;min-width:0!important;margin:0!important;padding:0!important}
 .circle-home-grid>.circle-home-voice{grid-column:1!important;grid-row:3!important;width:100%!important;min-width:0!important;position:static!important;margin:0!important;padding:0!important}
 .circle-home-voice-card{min-width:0;padding:14px!important}
 .circle-home-voice-card a,.circle-home-voice-card button{max-width:100%}
 /* Publication: never let media, toolbar, or usernames extend beyond viewport. */
 .feed-post,.single-post{width:100%!important;max-width:100%!important;min-width:0!important;padding:13px!important;margin:9px 0 13px!important;overflow:hidden!important}
 .feed-post .post-head,.single-post .post-head{display:flex;align-items:flex-start;flex-wrap:wrap;gap:7px;min-width:0}
 .feed-post .post-head>*{min-width:0}
 .feed-post .post-head .circle-post-controls,.single-post .post-head .circle-post-controls{margin-left:auto!important;max-width:100%;flex-wrap:wrap;height:auto!important;min-height:36px!important;gap:3px!important}
 .feed-post .post-head .circle-pin-icon-form{flex:0 0 auto;margin-left:0!important}
 .feed-post .post-media,.single-post .post-media{max-width:100%!important;margin:10px auto 13px!important;justify-content:center!important;overflow:hidden!important}
 .feed-post .post-media img,.feed-post .post-media video,.single-post .post-media img,.single-post .post-media video{display:block!important;max-width:100%!important;max-height:min(60dvh,420px)!important;width:auto!important;height:auto!important;object-fit:contain!important}
 .feed-post h3{font-size:clamp(18px,5vw,22px)!important;line-height:1.3!important;overflow-wrap:anywhere}
 .social-interactions,.social-interaction-row{max-width:100%;min-width:0}
 .social-interactions .social-interaction-row{gap:5px!important;flex-wrap:wrap!important}
 .social-interactions .circle-modern-action{min-height:39px;min-width:37px!important;padding:6px 5px!important}
 .social-interactions .circle-action-divider{width:13px!important;gap:2px!important}
 .social-interactions .circle-action-divider i{width:3px!important;height:3px!important}
 .social-interactions .circle-action-divider i:nth-child(2){width:5px!important;height:5px!important}
 .comment-item,.comment-reply,.comment-card{min-width:0;max-width:100%;overflow-wrap:anywhere}
 .comments-list input,.comments-list textarea{min-width:0}
 /* Profile: stable information, feed, and friend panels in a vertical stack. */
 .circle-main>.circle-profile-columns{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important;width:100%!important;align-items:start}
 .circle-profile-left,.circle-profile-center,.circle-profile-right{grid-column:1!important;min-width:0!important;max-width:100%!important;width:100%!important}
 .circle-profile-left{grid-row:1}.circle-profile-center{grid-row:2}.circle-profile-right{grid-row:3;display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
 .circle-profile-left .profile-identity{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:10px!important;padding:12px!important}
 .circle-profile-left .profile-name,.circle-profile-left .profile-stats{min-width:0!important;max-width:100%;margin:0!important;padding:0!important}
 .circle-profile-left .profile-name{flex:1 1 150px}
 .circle-profile-left .profile-avatar-large{flex:0 0 76px!important;width:76px!important;height:76px!important;margin:0!important;position:relative!important}
 .circle-profile-left .profile-stats{flex:1 1 100%;justify-content:flex-start!important;gap:18px!important;flex-wrap:wrap}
 .circle-profile-left .profile-name h1{font-size:clamp(20px,6vw,26px)!important;overflow-wrap:anywhere}
 .circle-profile-post-tabs,.circle-profile-center>.circle-profile-post-tabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;width:100%!important;min-width:0!important}
 .circle-profile-post-tabs a,.circle-profile-post-tabs .circle-new-post-trigger{font-size:clamp(10px,2.8vw,13px)!important;min-width:0!important;min-height:48px!important;max-width:100%;padding:8px 5px!important;white-space:normal!important;overflow-wrap:anywhere;line-height:1.25!important;text-align:center!important}
 .circle-profile-center>.circle-profile-post-tabs:not(:has(.circle-new-post-trigger)){grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .circle-profile-friend-grid{grid-template-columns:repeat(auto-fill,minmax(68px,1fr))!important;gap:12px 8px}
 /* Settings and administration: one column, sticky previews disabled, no clipped forms. */
 .circle-profile-editor,.circle-community-editor{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important;align-items:start!important}
 .circle-profile-preview-col,.circle-community-preview-col,.circle-profile-settings,.circle-community-settings-col{width:100%!important;max-width:100%;min-width:0!important}
 .circle-preview-sticky{position:static!important;top:auto!important}
 .circle-profile-settings,.circle-community-settings-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
 .circle-profile-settings>.circle-setting-card,.circle-community-settings-grid>.circle-setting-card{height:auto!important;margin:0!important;padding:14px!important;min-width:0}
 .circle-profile-save,.circle-community-settings-grid>.circle-profile-save{grid-column:1!important;display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-width:0}
 .circle-profile-save button,.circle-community-settings-grid>.circle-profile-save button{min-height:44px;max-width:100%}
 .circle-crop-viewport,.circle-story-canvas{max-width:100%;touch-action:none}
 .circle-crop-controls,.circle-crop-presets{display:flex;flex-wrap:wrap;gap:7px;max-width:100%}
 .circle-crop-controls button,.circle-crop-presets button{max-width:100%}
 .circle-admin-cards,.circle-community-management-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
 .circle-admin-cards>.panel,.circle-community-management-grid>.panel{width:100%!important;min-width:0;margin:0!important}
 .feature-row{flex-wrap:wrap;gap:8px;min-width:0}
 .feature-row form{max-width:100%}
 /* Group: subnav is a horizontal row, voice/member cards stack below news/chat. */
 .group-hero{max-width:100%;margin:0 0 12px!important;overflow:hidden}
 .group-cover{height:135px!important;min-height:0!important;padding:12px!important}
 .group-title-row{padding:12px!important;margin-top:-24px!important;gap:10px!important;align-items:flex-start!important;flex-wrap:wrap}
 .group-identity{min-width:0!important;flex:1 1 180px;gap:9px!important}
 .group-avatar-large{flex:0 0 60px!important;width:60px!important;height:60px!important;font-size:23px!important}
 .group-title-row h1{font-size:clamp(18px,5vw,23px)!important}
 .group-layout{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important;min-width:0}
 .group-subnav{position:static!important;display:flex!important;flex-wrap:wrap!important;gap:8px!important;grid-column:1;padding:7px!important}
 .group-subnav a{flex:1 1 100px;min-height:42px;justify-content:center;text-align:center}
 .group-main,.group-right{grid-column:1!important;min-width:0!important;width:100%!important}
 .group-right{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
 .group-right-card{padding:13px!important;min-width:0}
 .member-row,.call-participant{max-width:100%;min-width:0}
 .temp-voice-create{max-width:100%;min-width:0}
 .temp-voice-create select,.temp-voice-create input{width:100%;min-width:0}
 /* Friends and notifications: actions wrap rather than overlap names. */
 .friends-workspace,.notifications-workspace{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
 .friends-grid{grid-template-columns:minmax(0,1fr)!important}
 .friend-card{min-width:0;padding:10px!important;flex-wrap:wrap;gap:9px!important}
 .friend-card-main{min-width:0;flex:1 1 140px}
 .friend-card-actions{max-width:100%;gap:5px;flex-wrap:wrap}
 .friend-request-row,.friend-mini-row,.notification-row{min-width:0;flex-wrap:wrap;gap:9px}
 .notification-actions{display:flex;flex-wrap:wrap;width:100%}
 .notification-filters{overflow-x:auto;max-width:100%;flex-wrap:nowrap}
 .friends-search-panel form{grid-template-columns:minmax(0,1fr) auto}
 /* Messenger: full-width list and chat, visible keyboard-safe composer and toolbar. */
 .messenger-workspace{display:flex!important;flex-direction:column!important;gap:10px!important;width:100%!important;min-width:0!important;height:auto!important;min-height:0!important;max-height:none!important}
 .dm-sidebar{display:flex;flex-direction:column;flex:0 0 auto;max-height:min(36dvh,290px);min-height:120px;overflow:hidden;padding:10px!important}
 .dm-sidebar-heading{flex-wrap:wrap}
 .dm-conversation-list{overflow-y:auto!important;min-height:0!important}
 .dm-conversation-area{display:flex!important;flex-direction:column!important;flex:0 0 auto!important;width:100%!important;min-width:0!important;height:clamp(360px,65dvh,780px)!important;min-height:360px!important;max-height:none!important;overflow:hidden!important}
 .dm-chat-header{display:flex!important;flex-wrap:wrap!important;gap:8px!important;min-width:0!important;padding:9px!important;flex:0 0 auto!important}
 .dm-chat-header>*,.dm-chat-header-actions{min-width:0!important;max-width:100%;flex-wrap:wrap!important}
 .dm-chat-header-actions{width:100%;display:flex;gap:6px}
 .dm-chat-header-actions .dm-private-call{display:flex;gap:5px;flex-wrap:wrap;min-width:0}
 .dm-chat-header-actions button,.dm-chat-header-actions .circle-open-call{min-width:0!important;max-width:100%!important;min-height:38px!important;white-space:normal!important;overflow-wrap:anywhere}
 .dm-messages,#dmMessages{display:flex;flex-direction:column;flex:1 1 auto!important;min-height:0!important;height:auto!important;max-height:none!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior-y:contain;padding:10px 8px!important}
 .dm-messages .dm-message-card{box-sizing:border-box!important;width:min(100%,100%)!important;min-width:0!important;max-width:100%!important;padding:8px!important;margin:0 0 8px!important}
 .dm-messages .dm-message-card.dm-own{align-self:flex-end!important}
 .dm-messages .dm-message-card.dm-other{align-self:flex-start!important}
 .dm-messages .dm-message-card .dm-message-line{min-width:0!important;max-width:100%!important;width:100%!important}
 .dm-messages .dm-message-card .dm-message-payload{min-width:0!important;max-width:100%!important}
 .dm-messages .dm-message-card .message-body{min-width:0!important;max-width:100%!important;overflow-wrap:anywhere}
 .dm-messages .message-attachments,.dm-messages .message-attachments img,.dm-messages .message-attachments video{max-width:100%!important}
 .dm-jump-latest{max-width:calc(100% - 20px)!important;align-self:center!important;margin:5px auto 10px!important;flex:0 0 auto!important}
 .dm-composer{display:grid!important;grid-template-columns:40px minmax(0,1fr) 72px!important;align-items:start!important;gap:6px!important;max-width:100%!important;width:100%!important;padding:9px!important;flex:0 0 auto!important}
 .dm-composer #dmComposer{min-height:68px!important;max-height:23dvh!important;order:0!important;grid-column:2!important;width:100%!important;margin:0!important;min-width:0!important;resize:vertical}
 .dm-composer .dm-send-stack{grid-column:3!important;min-width:0!important;min-height:0!important;width:100%!important;display:flex!important;flex-direction:column!important;gap:6px!important}
 .dm-composer .dm-send-button{width:100%!important;min-width:0!important;max-width:100%;min-height:40px!important;font-size:11px!important;padding:7px 3px!important;white-space:normal!important}
 .dm-composer .dm-attach-button{grid-column:1!important;min-width:0!important;max-width:100%;min-height:42px}
 .dm-composer .voice-record-controls,.dm-composer .dm-voice-record{min-width:0!important;max-width:100%;height:auto!important;min-height:40px!important}
 .dm-composer #dmVoiceRecordStatus{grid-column:1/-1;min-width:0}
 .dm-attachment-card,.voice-message-player,.circle-audio-player{max-width:100%!important;min-width:0!important}
 .circle-audio-player .circle-audio-controls{max-width:100%;min-width:0}
 /* Dialogs and native editors sit within the visual viewport with scrollable content. */
 .circle-post-editor,.circle-story-editor,.story-viewer,.circle-incoming-call,.circle-image-lightbox{max-width:100vw}
 .circle-post-editor,.circle-story-editor{padding:10px!important;align-items:center!important;overflow-y:auto!important;overscroll-behavior:contain}
 .circle-post-editor-panel,.circle-story-editor-panel{width:100%!important;max-width:100%!important;max-height:calc(100dvh - 24px)!important;min-width:0;overflow-y:auto!important;overscroll-behavior:contain;padding:14px!important}
 .circle-post-editor-head{margin-bottom:12px!important}
 .circle-post-editor-head h2{font-size:20px!important}
 .circle-post-editor-actions,.circle-story-editor-foot{flex-wrap:wrap;gap:9px;justify-content:flex-end}
 .circle-post-editor-actions button,.circle-story-editor-foot button{min-height:43px;max-width:100%}
 .story-viewer{padding:0!important;gap:0!important}
 .story-viewer-card{width:100vw!important;height:100dvh!important;max-height:100dvh!important;min-height:0!important;border-radius:0!important}
 .story-viewer-nav{position:absolute;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:3}
 .circle-incoming-call{position:fixed!important;left:10px!important;right:10px!important;bottom:calc(var(--circle-mobile-nav) + 10px)!important;width:auto!important;max-width:calc(100% - 20px)!important;padding:12px!important}
 .auth,.installer{max-width:calc(100% - 20px);width:calc(100% - 20px);padding:18px!important;margin:12px auto!important}
}
@media(max-width:360px){
 .topbar .brand-lockup span{font-size:16px!important}
 .topbar .header-identity .user-name{display:none!important}
 .topbar .icon-control,.topbar .header-logout-button{width:32px!important;min-width:32px!important;height:32px!important;min-height:32px!important}
 .feed-post,.single-post{padding:10px!important}
 .circle-home-grid>.circle-home-stories .story-card.story-preview-card{flex-basis:110px!important;width:110px!important;height:155px!important;min-height:155px!important}
 .circle-profile-post-tabs a,.circle-profile-post-tabs .circle-new-post-trigger{font-size:10px!important;padding:7px 3px!important}
 .dm-composer{grid-template-columns:35px minmax(0,1fr) 65px!important;gap:4px!important;padding:7px!important}
 .dm-messages{padding:8px 4px!important}
 .social-interactions .social-interaction-row{gap:3px!important}
 .social-interactions .circle-action-divider{width:9px!important}
}
@media(max-height:550px) and (max-width:900px){
 .circle-post-editor-panel,.circle-story-editor-panel{max-height:calc(100dvh - 12px)!important}
 .story-viewer-card{max-height:100dvh!important}
 .layout>.chat,.layout>.circle-main{overscroll-behavior-y:contain}
}
@media(prefers-reduced-motion:reduce){
 .mobile-bottom-nav a,.community-rail-item,.circle-post-editor-panel{transition:none!important;animation:none!important}
}
/* No automatic snapping away from the first "create story" control. */
@media(max-width:900px){
 .circle-home-grid>.circle-home-stories .stories-row{scroll-snap-type:none!important;scroll-padding-inline:0!important}
 .circle-home-grid>.circle-home-stories .story-add.circle-story-add-trigger{scroll-snap-align:none!important}
}

/* Circle 4.9.35 — mobile navigation and layout stability. */
@media(max-width:900px){
 html{min-height:100%;overflow-x:hidden;scroll-padding-bottom:calc(82px + env(safe-area-inset-bottom,0px));}
 body{min-height:100dvh;overflow-x:hidden;}
 .topbar{position:relative;z-index:52;}
 .layout,body.sidebar-collapsed .layout{height:auto!important;min-height:calc(100dvh - 62px - var(--circle-mobile-nav))!important;max-height:none!important;overflow:visible!important;display:flex!important;flex-direction:column!important;}
 .layout>.community-rail{position:relative;z-index:2;flex-shrink:0;}
 .layout>.chat,.layout>.circle-main{overflow:visible!important;overflow-x:clip!important;min-height:0!important;max-height:none!important;flex:1 0 auto!important;padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))!important;}
 .mobile-bottom-nav{position:fixed!important;z-index:1000!important;pointer-events:auto!important;isolation:isolate;box-sizing:border-box;transform:none!important;touch-action:manipulation;}
 .mobile-bottom-nav a{position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;min-height:45px!important;pointer-events:auto!important;touch-action:manipulation;}
 .mobile-bottom-nav a .nav-icon-svg{pointer-events:none;}
 .mobile-bottom-nav a>span,.mobile-bottom-nav a>small{pointer-events:none;}
 .circle-main .friends-workspace,.circle-main .messenger-workspace,.circle-main .notifications-workspace,.circle-main .group-layout{min-width:0;max-width:100%;}
 .circle-main .dm-chat-header,.circle-main .friends-heading,.circle-main .messenger-heading{min-width:0;flex-wrap:wrap;}
 .circle-main .feed-post,.circle-main .panel,.circle-main .friend-card{min-width:0;overflow-wrap:anywhere;}
 .circle-main video,.circle-main img{max-width:100%;height:auto;}
 /* Mobile sign-in: one compatible MP4 with a non-animated poster fallback. */
 .circle-auth-shell{min-height:100dvh;height:auto!important;overflow:visible!important;isolation:isolate;}
 .circle-auth-shell .circle-auth-motion{inset:0;position:fixed!important;z-index:-1;overflow:hidden;pointer-events:none;background-position:center;background-size:cover;}
 .circle-auth-shell .circle-auth-motion .circle-auth-video{display:block;width:100%;height:100%;object-fit:cover;object-position:center center;pointer-events:none;}
 .circle-auth-shell .circle-auth-layout,.circle-auth-shell .circle-auth-panel-wrap{position:relative;z-index:1;width:100%;min-width:0;}
 .circle-auth-shell .circle-auth-panel,.circle-auth-shell .circle-auth-register{max-width:100%;min-width:0;}
}
@media(max-width:480px){
 .topbar .header-identity .user-name{display:none!important;}
 .topbar>.userline{max-width:none!important;flex:0 0 auto!important;}
 .circle-auth-shell{padding:20px 12px 36px!important;}
 .circle-auth-actions{grid-template-columns:1fr 1fr!important;gap:10px!important;}
 .circle-auth-actions .primary{grid-column:1 / -1;grid-row:1;width:100%;}
 .circle-auth-actions a{grid-row:2;text-align:center;}
 .circle-auth-panel{gap:13px!important;}
 .group-hero-actions,.circle-community-editor-actions{max-width:100%;flex-wrap:wrap;}
}
@media(prefers-reduced-motion:reduce){.circle-auth-shell .circle-auth-motion .circle-auth-video{display:none!important;}}

/* 4.9.36: visibly painted fallback even if mobile autoplay is disabled. */
@media(max-width:900px){
 .circle-auth-shell{position:relative!important;isolation:isolate;background-color:#0d0f12!important;}
 .circle-auth-shell .circle-auth-motion{position:fixed!important;inset:0!important;z-index:0!important;opacity:1!important;visibility:visible!important;background-color:#0d0f12!important;background-image:linear-gradient(90deg,rgba(9,11,14,.55),rgba(9,11,14,.33) 50%,rgba(9,11,14,.72)),url('/assets/auth-network-poster.jpg')!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important;}
 .circle-auth-shell .circle-auth-motion .circle-auth-video{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;}
 .circle-auth-shell .circle-auth-motion:after{z-index:1;}
 .circle-auth-shell .circle-auth-layout{position:relative!important;z-index:2!important;}
}
@media(prefers-reduced-motion:reduce){
 .circle-auth-shell .circle-auth-motion{background-image:linear-gradient(90deg,rgba(9,11,14,.55),rgba(9,11,14,.33) 50%,rgba(9,11,14,.72)),url('/assets/auth-network-poster.jpg')!important;}
}

/* Circle 4.9.38: iOS layout hardening. */
@media (max-width:900px){
 body.circle-page-dm .circle-main{padding-inline:0!important;}
 body.circle-page-dm .messenger-heading{padding-inline:12px!important;}
 body.circle-page-dm .messenger-workspace.has-active-conversation .dm-sidebar{display:none!important;}
 body.circle-page-dm .messenger-workspace.no-active-conversation .dm-conversation-area{display:none!important;}
 body.circle-page-dm .dm-conversation-area{padding-inline:0!important;}
 body.circle-page-dm .dm-chat-header-actions{gap:4px!important;}
 body.circle-page-dm .dm-chat-header-actions button{font-size:12px!important;}
 body.circle-page-dm .dm-composer{grid-template-columns:36px minmax(0,1fr) 66px!important;gap:5px!important;}
}

/* Circle 4.9.39: mobile messenger entry screen is only existing dialogs + voice-meeting creator.
   Chat messages remain fully usable when a dialog is open. Desktop UI is unchanged. */
@media screen and (max-width:900px){
 body.circle-page-dm .messenger-workspace.no-active-conversation .dm-sidebar{
  display:flex!important;flex-direction:column!important;min-height:0!important;max-width:100%!important;
 }
 body.circle-page-dm .dm-sidebar .dm-new-chat,
 body.circle-page-dm .dm-sidebar .dm-search,
 body.circle-page-dm .dm-sidebar .dm-active-meetings,
 body.circle-page-dm .dm-sidebar .dm-conversation-list .conversation-menu,
 body.circle-page-dm .dm-sidebar .dm-list-empty>a,
 body.circle-page-dm .dm-sidebar-heading .small{
  display:none!important;
 }
 body.circle-page-dm .dm-sidebar-heading{flex:0 0 auto!important;padding:4px 3px 8px!important;}
 body.circle-page-dm .dm-sidebar-heading h2{font-size:18px!important;line-height:1.35!important;}
 body.circle-page-dm .dm-conversation-list{
  display:grid!important;flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;
  overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;padding:0 2px!important;
 }
 body.circle-page-dm .dm-sidebar>.group-call-picker{
  display:block!important;flex:0 0 auto!important;margin-top:8px!important;max-width:100%!important;
 }
 body.circle-page-dm .dm-sidebar>.group-call-picker>summary{min-height:48px!important;touch-action:manipulation;}
 body.circle-page-dm .dm-sidebar>.group-call-picker>summary strong{font-size:13px!important;}
 body.circle-page-dm .dm-sidebar>.group-call-picker[open]{overflow-y:auto;max-height:55%;}
 body.circle-page-dm .dm-sidebar>.group-call-picker .group-call-members{max-height:130px!important;}
 body.circle-page-dm .dm-sidebar .conversation-row{gap:9px!important;min-width:0!important;}
 body.circle-page-dm .dm-sidebar .conversation-link{min-width:0!important;overflow:hidden!important;}
}


/* Circle 4.9.40: iOS-safe full-height conversation list + swipeable communities. */
@media screen and (max-width:1024px){
 body.circle-page-dm .messenger-workspace.no-active-conversation{
  display:flex!important;flex-direction:column!important;
  box-sizing:border-box!important;width:100%!important;max-width:100%!important;
  height:calc(100dvh - 62px - 92px - 78px - env(safe-area-inset-bottom,0px))!important;
  min-height:240px!important;max-height:none!important;overflow:hidden!important;
 }
 body.circle-page-dm .messenger-workspace.no-active-conversation>.dm-sidebar{
  display:flex!important;flex-direction:column!important;flex:1 1 auto!important;
  width:100%!important;max-width:100%!important;min-height:0!important;
  height:100%!important;max-height:none!important;overflow:hidden!important;
 }
 body.circle-page-dm .dm-sidebar .dm-list-tabs{
  display:flex!important;flex:0 0 auto!important;flex-wrap:nowrap!important;
  max-width:100%!important;min-height:40px!important;overflow-x:auto!important;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
 }
 body.circle-page-dm .dm-sidebar .dm-list-tabs>a{flex:0 0 auto!important;white-space:nowrap!important;min-width:max-content!important;}
 body.circle-page-dm .messenger-workspace.no-active-conversation .dm-conversation-list{
  display:block!important;flex:1 1 auto!important;min-height:0!important;
  height:auto!important;max-height:none!important;overflow-y:auto!important;overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;
 }
 body.circle-page-dm .messenger-workspace.no-active-conversation .dm-sidebar>.group-call-picker{
  flex:0 0 auto!important;max-height:40%!important;overflow-y:auto!important;
 }
 .layout>.community-rail{box-sizing:border-box!important;min-width:0!important;max-width:100%!important;overflow:hidden!important;}
 .layout>.community-rail>.community-rail-list{
  display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
  width:100%!important;min-width:0!important;max-width:100%!important;
  overflow-x:auto!important;overflow-y:hidden!important;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  touch-action:pan-x pinch-zoom;scrollbar-width:thin;
  gap:8px!important;padding:2px 4px 6px!important;
 }
 .layout>.community-rail>.community-rail-list>.community-rail-item{
  display:grid!important;flex:0 0 148px!important;width:148px!important;
  min-width:148px!important;max-width:148px!important;box-sizing:border-box!important;
 }
 .layout>.community-rail>.community-rail-list>.community-rail-item .community-rail-meta{
  min-width:0!important;max-width:100%!important;overflow:hidden!important;
 }
 .layout>.community-rail>.community-rail-list>.community-rail-item .community-rail-meta strong{
  display:block!important;max-width:100%!important;overflow:hidden!important;
  white-space:nowrap!important;text-overflow:ellipsis!important;
 }
}
@media screen and (max-width:680px){
 body.circle-page-dm .messenger-workspace.no-active-conversation{height:calc(100dvh - 62px - 92px - 78px - env(safe-area-inset-bottom,0px))!important;}
}


/* Circle 4.9.41: mobile messenger is an isolated two-screen experience.
   In-page CSS deliberately comes after legacy 4.9.38-4.9.40 rules, including on iOS. */
@media screen and (max-width:900px){
 html:has(body.circle-page-dm){height:100%;overflow:hidden!important;}
 body.circle-page-dm{height:100vh!important;height:100dvh!important;min-height:0!important;max-height:100dvh!important;overflow:hidden!important;overscroll-behavior:none;padding:0!important;margin:0!important;background:#111215!important;}
 body.circle-page-dm>.topbar,
 body.circle-page-dm>.layout>.community-rail,
 body.circle-page-dm>.layout>.circle-sidebar,
 body.circle-page-dm>nav.mobile-bottom-nav{display:none!important;visibility:hidden!important;pointer-events:none!important;}
 body.circle-page-dm>.layout{display:block!important;width:100%!important;max-width:100%!important;height:100%!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important;}
 body.circle-page-dm>.layout>.circle-main{display:block!important;width:100%!important;max-width:none!important;height:100%!important;min-height:0!important;padding:0!important;margin:0!important;overflow:hidden!important;}
 body.circle-page-dm .messenger-workspace,
 body.circle-page-dm .messenger-workspace.no-active-conversation,
 body.circle-page-dm .messenger-workspace.has-active-conversation{display:flex!important;flex-direction:column!important;width:100%!important;max-width:none!important;height:100%!important;min-height:0!important;max-height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;border:0!important;border-radius:0!important;background:#161719!important;}
 /* Screen A: conversation index. */
 body.circle-page-dm .messenger-workspace.no-active-conversation>.dm-sidebar{display:flex!important;flex-direction:column!important;width:100%!important;height:100%!important;flex:1 1 0!important;min-height:0!important;max-height:none!important;padding:calc(8px + env(safe-area-inset-top,0px)) 12px calc(10px + env(safe-area-inset-bottom,0px))!important;border:0!important;border-radius:0!important;overflow:hidden!important;background:#161719!important;}
 body.circle-page-dm .messenger-workspace.no-active-conversation>.dm-conversation-area{display:none!important;}
 body.circle-page-dm .dm-sidebar-heading{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;flex:0 0 auto!important;padding:5px 3px 15px!important;}
 body.circle-page-dm .dm-sidebar-heading h2{font-size:21px!important;line-height:1.2!important;margin:0!important;}
 body.circle-page-dm .dm-mobile-exit{display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 auto;min-width:45px;min-height:44px;border:1px solid rgba(201,163,93,.4);border-radius:12px;color:#dfbd7b;text-decoration:none;font-size:24px;line-height:1;}
 body.circle-page-dm .dm-list-tabs{gap:6px!important;min-height:45px!important;margin:0 0 9px!important;padding:0!important;}
 body.circle-page-dm .dm-list-tabs>a{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:42px!important;padding:8px 14px!important;font-size:13px!important;border-radius:11px!important;}
 body.circle-page-dm .messenger-workspace.no-active-conversation .dm-conversation-list{display:block!important;flex:1 1 0!important;min-height:0!important;height:auto!important;max-height:none!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch;padding:2px 0!important;}
 body.circle-page-dm .dm-sidebar .conversation-row{position:relative!important;display:flex!important;align-items:center!important;min-height:76px!important;padding:11px 10px!important;margin:0 0 6px!important;gap:12px!important;border-radius:13px!important;touch-action:manipulation;}
 body.circle-page-dm .dm-sidebar .conversation-link{display:flex!important;flex:1 1 auto!important;min-width:0!important;gap:3px!important;overflow:hidden!important;}
 body.circle-page-dm .dm-sidebar .conversation-link::after{content:"";position:absolute;inset:0;z-index:2;cursor:pointer;}
 body.circle-page-dm .dm-sidebar .conversation-link strong{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px!important;}
 body.circle-page-dm .dm-sidebar .conversation-link span{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px!important;}
 body.circle-page-dm .dm-sidebar .conversation-menu{display:none!important;}
 body.circle-page-dm .dm-sidebar>.group-call-picker{display:block!important;flex:0 0 auto!important;min-height:0!important;max-height:48%!important;margin-top:8px!important;margin-bottom:0!important;overflow-y:auto!important;}
 body.circle-page-dm .dm-sidebar>.group-call-picker>summary{min-height:52px!important;cursor:pointer;touch-action:manipulation;}
 body.circle-page-dm .dm-sidebar>.group-call-picker:not([open]){overflow:hidden!important;}
 /* Screen B: individual conversation, no dialog list or global navigation. */
 body.circle-page-dm .messenger-workspace.has-active-conversation>.dm-sidebar{display:none!important;}
 body.circle-page-dm .messenger-workspace.has-active-conversation>.dm-conversation-area{display:flex!important;flex-direction:column!important;flex:1 1 0!important;min-height:0!important;height:100%!important;max-height:100%!important;width:100%!important;margin:0!important;padding:env(safe-area-inset-top,0px) 0 0!important;border:0!important;border-radius:0!important;overflow:hidden!important;background:#161719!important;}
 body.circle-page-dm .has-active-conversation .dm-chat-header{display:flex!important;flex:0 0 auto!important;align-items:center!important;min-height:59px!important;gap:8px!important;padding:6px 10px!important;margin:0!important;border-radius:0!important;}
 body.circle-page-dm .has-active-conversation .dm-mobile-back{display:inline-flex!important;align-items:center;justify-content:center;min-height:44px!important;min-width:43px!important;padding:8px!important;white-space:nowrap;font-size:13px!important;border-radius:10px;touch-action:manipulation;}
 body.circle-page-dm .has-active-conversation .dm-peer-info{flex:1 1 auto!important;min-width:0!important;overflow:hidden!important;}
 body.circle-page-dm .has-active-conversation #dmMessages{display:flex!important;flex-direction:column!important;flex:1 1 0!important;min-height:0!important;height:auto!important;max-height:none!important;overflow-y:auto!important;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;padding:10px 8px!important;}
 body.circle-page-dm .has-active-conversation .dm-composer{display:grid!important;flex:0 0 auto!important;min-height:55px!important;width:100%!important;max-height:38dvh!important;overflow-y:auto!important;padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px))!important;margin:0!important;border-radius:0!important;}
 body.circle-page-dm .has-active-conversation .dm-composer textarea{font-size:16px!important;min-height:38px!important;max-height:108px!important;}
 body.circle-page-dm .has-active-conversation .dm-send-feedback{padding:0 8px!important;}
 body.circle-page-dm .has-active-conversation .dm-jump-latest{bottom:95px!important;}
}
/* Desktop: the exit button is mobile-only. */
@media screen and (min-width:901px){.dm-mobile-exit{display:none!important;}}



/* Circle 4.9.42: ONLY the mobile messenger. Desktop layout remains unchanged. */
@media screen and (max-width: 900px) {
  /* Keep the page title centered between the two navigation actions. */
  body.circle-page-dm .messenger-workspace.no-active-conversation .dm-sidebar-heading {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    align-items: center !important;
    justify-content: stretch !important;
    column-gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  body.circle-page-dm .messenger-workspace.no-active-conversation .dm-sidebar-heading > div {
    grid-column: 2;
    justify-self: stretch;
    min-width: 0 !important;
    text-align: center !important;
  }
  body.circle-page-dm .messenger-workspace.no-active-conversation .dm-sidebar-heading h2 {
    margin: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  body.circle-page-dm .messenger-workspace.no-active-conversation .dm-mobile-exit {
    grid-column: 1;
    width: 44px !important;
    min-width: 44px !important;
  }
  body.circle-page-dm .messenger-workspace.no-active-conversation .dm-new-chat {
    grid-column: 3;
    justify-self: end;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
  }
  /* One line: back, avatar, contact name, call icon. */
  body.circle-page-dm .messenger-workspace.has-active-conversation .dm-chat-header {
    display: grid !important;
    grid-template-columns: auto 36px minmax(0, 1fr) 44px !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  body.circle-page-dm .messenger-workspace.has-active-conversation .dm-chat-header > .dm-mobile-back {
    grid-column: 1;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    padding-inline: 6px !important;
    font-size: 12px !important;
  }
  body.circle-page-dm .messenger-workspace.has-active-conversation .dm-chat-header > .dm-peer-profile-link {
    grid-column: 2;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    overflow: hidden !important;
  }
  body.circle-page-dm .messenger-workspace.has-active-conversation .dm-peer-info {
    grid-column: 3;
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }
  body.circle-page-dm .messenger-workspace.has-active-conversation .dm-peer-info strong {
    max-width: 100%;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body.circle-page-dm .messenger-workspace.has-active-conversation .dm-chat-header-actions {
    grid-column: 4;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: none !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
  }
  body.circle-page-dm .messenger-workspace.has-active-conversation .dm-chat-header-actions .circle-open-call {
    display: inline-flex !important;
    flex: none !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }
  body.circle-page-dm .messenger-workspace.has-active-conversation .dm-chat-header-actions .circle-open-call > span {
    display: none !important;
  }
  body.circle-page-dm .messenger-workspace.has-active-conversation .dm-chat-header-actions .circle-open-call > svg {
    display: block !important;
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
  }
}

/* Circle 4.9.49: mobile placement overrides for dynamic emoji triggers. */
@media(max-width:900px){
 body .dm-composer.circle-emoji-composer{grid-template-columns:40px 40px minmax(0,1fr) 72px!important}
 body .dm-composer.circle-emoji-composer>#dmComposer{grid-column:3!important;grid-row:1!important;min-width:0!important}
 body .dm-composer.circle-emoji-composer>.dm-send-stack{grid-column:4!important;grid-row:1!important}
 body .dm-composer.circle-emoji-composer>.circle-emoji-trigger{grid-column:2!important;grid-row:1!important}
}
@media(max-width:380px){body .dm-composer.circle-emoji-composer{grid-template-columns:36px 36px minmax(0,1fr) 66px!important}}