/*
 * Cindy mobile information-panel layout
 *
 * The results section deliberately clips its chrome (tabs, rounded border and
 * panel rail).  Its tabpanel wrapper must therefore be a bounded flex item;
 * otherwise the report's intrinsic height escapes the results slot and is
 * painted underneath the conversation controls.  Keep the shell fixed and
 * make only the report/detail body scrollable on touch devices.
 */
@media (max-width: 720px) {
  .glass-experience[data-agent-key="cindy"] .glass-results {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  .glass-experience[data-agent-key="cindy"] .glass-results > [role="tabpanel"] {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  .glass-experience[data-agent-key="cindy"] .glass-results > [role="tabpanel"] >
    :is(.glass-news-report, .glass-book-detail, .glass-event-detail,
      .glass-location-detail, .glass-guidance, .glass-cindy-broadcast-room) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Book/event/location detail views are rendered directly in the results
     section after a card is selected, without the tabpanel wrapper. */
  .glass-experience[data-agent-key="cindy"] .glass-results >
    :is(.glass-book-detail, .glass-event-detail, .glass-location-detail,
      .glass-guidance, .glass-cindy-broadcast-room) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }
}