/* Individual groups share the desktop shell; mobile keeps its existing layout. */
@media (min-width: 1024px) {
  body.circle-open { background: #17191b !important; }
  #circleView.circle-view, #circleView.circle-view.gc-mode {
    inset: 0 var(--group-right, 0px) 0 var(--group-left, 0px);
    width: auto;
    height: 100dvh;
    min-height: 0;
    padding: 24px 24px 0;
    box-sizing: border-box;
    background: #17191b;
    border: 0;
    transform: none;
  }
  body.agc-open #circleView.circle-view { --group-right: var(--agent-reserved); }
  #circleView::before, #circleView::after { display: none; }
  #circleView.circle-view .circle-view-inner {
    flex: 1;
    min-height: 0;
    height: auto;
    width: 100%;
    /* The legacy full-screen chat rule uses !important for this property. */
    max-width: 880px !important;
    padding: 0;
    margin: 0 auto;
    overflow-y: auto !important;
    transform: none;
  }
  #circleView.circle-view .circle-view-header {
    display: block !important;
    flex-shrink: 0;
    padding: 0 16px 16px;
    max-height: none;
    background: transparent;
    overflow: visible;
  }
  #circleView .circle-hero-banner { display: none; }
  #circleView .circle-nav-row { position: static; margin: 0; }
  #circleView.circle-view .circle-hero-row { padding: 8px 0; gap: 8px; }
  #circleView.circle-view .circle-hero-orb-shell,
  #circleView.circle-view .circle-hero-orb { width: 48px; height: 48px; font-size: 26px; box-shadow: none; }
  #circleView.circle-view .circle-hero-orb-shell::before { display: none; }
  #circleView.circle-view .circle-hero-name { font-size: 24px; letter-spacing: 0; overflow-wrap: anywhere; }
  #circleView .circle-hero-description { max-width: 560px; overflow-wrap: anywhere; }
  #circleView.circle-view .circle-seg { flex-shrink: 0; margin: 0; padding-inline: 16px; background: transparent; }
  #circleView.circle-view .circle-feed { min-height: 0; padding: 16px !important; background: transparent; }
  #circleView.gc-mode .circle-view-inner { overflow: hidden !important; }
  #circleView.gc-mode .circle-feed { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
  #circleView.gc-mode .gc-wrap { flex: 1; min-height: 0; overflow: hidden; }
  #circleView.gc-mode #gcMessages { padding: 16px 0; min-height: 0; overflow-y: auto; }
  #circleView.circle-view :is(#circleComposeBar, #gcInputBar) {
    position: relative;
    inset: auto;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    padding: 16px !important;
    background: #17191b;
    border-top: 1px solid #303438;
    transform: none;
  }
  #circleView.circle-view :is(.ccb-text-input, .gc-textarea) {
    box-sizing: border-box; min-height: 44px; max-height: 144px;
    padding: 12px; font-size: 14px; line-height: 20px;
  }
  #circleView.circle-view .gc-input-row { gap: 8px; align-items: flex-end; }
}
@media (min-width: 1280px) {
  body.desktop-navigation-enabled #circleView { --group-left: 280px; }
  body.circle-open #desktopNavigation { z-index: 10000; }
  body.desktop-navigation-enabled #circleView .circle-back-btn { display: none; }
  body.desktop-navigation-enabled #circleView .circle-nav-row { justify-content: flex-end; }
}