.frame:has(.social-screen) { aspect-ratio:auto; background:#fbf8f1 }
.frame:has(.social-screen)::before { display:none }
.frame:has(.social-screen) #content { height:auto; display:block }
.frame:fullscreen:has(.social-screen), #expanded-view .frame:has(.social-screen) { overflow-y:auto }
.social-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); padding:0 }
.social-preview { display:block; width:100%; padding:0; border:0; background:transparent; cursor:zoom-in }
.frame .social-screen img { display:block; width:100%; height:auto }
.social-toolbar { padding:12px 16px }
.social-open, .social-close { font:inherit; min-height:44px; padding:8px 14px; border:0; border-radius:8px; color:white; background:#233e2e; cursor:pointer }
.social-viewer { width:96vw; max-width:96vw; height:94dvh; max-height:94dvh; padding:0; border:0; border-radius:12px; background:#fbf8f1; color:#233e2e }
.social-viewer[open] { display:flex; flex-direction:column }
.social-viewer::backdrop { background:rgb(15 24 17 / .85) }
.social-viewer header { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:10px; flex:none }
.social-viewer label { display:flex; align-items:center; gap:8px; font-size:14px }
.social-viewer input { width:clamp(80px,15vw,200px); accent-color:#233e2e }
.social-viewer output { font-size:13px; font-variant-numeric:tabular-nums }
.social-close { margin-left:auto }
.social-scroll { overflow:auto; min-height:0; flex:1; overscroll-behavior:contain }
.frame .social-scroll img { max-width:none }
.social-artwork { position:relative }
.manager-chat { position:absolute; left:27.4%; top:87.7%; width:44.4%; height:8.4%; border-radius:50px; cursor:pointer }
.manager-chat:hover { box-shadow:0 0 0 3px #8da64d }
.social-toolbar { display:flex; flex-wrap:wrap; gap:10px }
.manager-chat-text { display:none; text-decoration:none; align-items:center }
@container (max-width:800px) {
  .manager-chat { display:none }
  .manager-chat-text { display:flex }
}