/*
  Dependency chain: Friends Circle route marker -> shared component/control CSS
  -> route shell layout. Keep reusable visual primitives in
  friends-circle-components.css and friends-circle-controls.css.
*/
:root[data-hf-friends-circle-entry],
:root[data-hf-friends-circle-entry] body,
:root[data-hf-friends-circle-entry] #app {
  min-height: 100%;
  height: auto !important;
  overflow-x: hidden;
  overflow-y: auto !important;
}

:root[data-hf-friends-circle-entry] body {
  background: var(--hf-ui-page-bg, #0b1428);
}

:root[data-hf-friends-circle-entry] .friend-interview-panel:not(.friend-interview-panel--embedded) {
  position: fixed !important;
  inset: 0;
  z-index: 2200;
  display: grid;
  align-items: start;
  justify-items: center;
  width: auto;
  max-width: 100vw;
  min-height: 100dvh;
  padding: max(1rem, env(safe-area-inset-top) + .85rem)
    max(1rem, env(safe-area-inset-right) + 1rem)
    max(2rem, env(safe-area-inset-bottom) + 1.5rem)
    max(1rem, env(safe-area-inset-left) + 1rem);
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  background: var(--hf-ui-page-bg, #0b1428) !important;
  color: var(--hf-ui-text, #f8fbff);
  font-family: Arial, Helvetica, sans-serif;
}

:root[data-hf-friends-circle-entry] #hf-friends-circle-fallback-host {
  position: relative;
  z-index: 2200;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

@media (max-width: 460px) {
  :root[data-hf-friends-circle-entry] body {
    background: #244a82;
  }

  :root[data-hf-friends-circle-entry] .friend-interview-panel:not(.friend-interview-panel--embedded) {
    padding: max(.72rem, env(safe-area-inset-top) + .72rem) max(.72rem, env(safe-area-inset-right) + .72rem) max(5.5rem, env(safe-area-inset-bottom) + 4rem) max(.72rem, env(safe-area-inset-left) + .72rem);
    background: #244a82 !important;
  }

  :root[data-hf-friends-circle-entry] .friend-interview-panel__surface {
    width: 100%;
    border-radius: 8px !important;
    box-shadow: none !important;
  }
}