/*
 * OpenSER mobile override layer for Local Deep Research.
 *
 * Upgrade-safe rule: keep our mobile UX fixes in this single late-loaded file
 * instead of editing upstream page styles. When upstream updates, conflicts are
 * limited to the template link that loads this file.
 */

@media (max-width: 767px) {
  :root {
    --openser-content-max: none;
    --openser-content-pad: 0px;
    --openser-mobile-edge: clamp(10px, 3.2vw, 14px);
    --openser-mobile-topbar-h: 56px;
  }

  html,
  body {
    width: 100%;
    max-width: none !important;
    min-width: 0 !important;
    overflow-x: clip;
  }

  body {
    min-height: 100dvh;
    background: var(--bg-primary);
  }

  /* Let flex/grid children shrink instead of pushing the viewport wider. */
  *,
  *::before,
  *::after {
    min-width: 0;
    box-sizing: border-box;
  }

  .ldr-app-container {
    display: block !important;
    width: 100%;
    max-width: 100%;
  }

  /* Mobile must not look like a desktop card floating inside a background. */
  .ldr-main-content {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100dvh;
    padding: 0 !important;
    overflow-x: clip !important;
    background: var(--bg-primary);
  }

  .ldr-shell-island {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--bg-primary);
    padding:
      calc(var(--openser-mobile-topbar-h) + max(env(safe-area-inset-top), 0px) + 12px)
      var(--openser-mobile-edge)
      calc(var(--mobile-nav-clearance-standard, 88px) + max(env(safe-area-inset-bottom), 0px) + 14px) !important;
  }

  /* Fixed header: compact, full-width, no hidden 210px context overflow. */
  .ldr-top-bar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0;
    width: 100% !important;
    max-width: none !important;
    height: var(--openser-mobile-topbar-h) !important;
    min-height: var(--openser-mobile-topbar-h) !important;
    padding: max(env(safe-area-inset-top), 0px) var(--openser-mobile-edge) 0 !important;
    background: color-mix(in srgb, var(--bg-primary) 92%, transparent) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    backdrop-filter: blur(14px);
    overflow: visible !important;
    gap: 0.5rem;
  }

  .ldr-top-bar-left,
  .ldr-top-bar-right {
    min-width: 0;
    gap: 0.4rem;
  }

  .ldr-top-context {
    min-width: 0 !important;
    max-width: 42vw;
  }

  .ldr-top-context-kicker {
    display: none;
  }

  .ldr-top-context strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
  }

  .ldr-theme-selector,
  .ldr-user-info,
  .ldr-user-menu,
  .ldr-top-bar button,
  .ldr-top-bar a {
    flex-shrink: 0;
  }

  /* Page rhythm: use the screen width, not nested desktop card gutters. */
  .ldr-page,
  .ldr-page.active,
  .ldr-page-header,
  .ldr-card,
  .card,
  .ldr-research-card,
  .ldr-settings-content,
  .ldr-settings-page,
  .ldr-library-container,
  .ldr-rag-manager-container,
  .ldr-news-page-wrapper,
  .ldr-news-container,
  .ldr-chat-container,
  .ldr-download-manager,
  .ldr-metrics-page {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: visible !important;
  }

  .ldr-page.active,
  .ldr-page-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .ldr-card,
  .card,
  .ldr-research-card {
    border-radius: 16px;
    padding: 0 !important;
  }

  .ldr-card-content,
  .card-body,
  .ldr-settings-section,
  .ldr-settings-card {
    width: 100%;
    max-width: 100%;
    padding-left: var(--openser-mobile-edge) !important;
    padding-right: var(--openser-mobile-edge) !important;
  }

  .ldr-page-header h1 {
    font-size: clamp(1.8rem, 10vw, 2.45rem);
    line-height: 1.02;
    overflow-wrap: anywhere;
  }

  .ldr-page-subtitle,
  p,
  label,
  .ldr-hint-text,
  .text-muted,
  .text-secondary {
    overflow-wrap: anywhere;
  }

  /* Forms and mode cards: single column, no desktop min-widths. */
  form,
  fieldset,
  .ldr-form-row,
  .ldr-form-group,
  .ldr-settings-form,
  .ldr-settings-item,
  .ldr-settings-item-header {
    max-width: 100%;
    min-width: 0 !important;
  }

  input,
  textarea,
  select,
  .ldr-form-control,
  .form-control,
  .custom-dropdown,
  .custom-dropdown-toggle {
    width: 100% !important;
    max-width: 100% !important;
  }

  .ldr-mode-selection,
  .ldr-research-mode-options,
  .ldr-settings-grid,
  .ldr-metrics-grid,
  .ldr-card-grid,
  .ldr-run-summary,
  .ldr-filters,
  .ldr-news-grid,
  .ldr-collections-grid,
  .ldr-subscriptions-grid,
  .ldr-collection-actions-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.75rem !important;
  }

  .ldr-mode-option,
  .ldr-research-mode-option,
  .ldr-news-card,
  .ldr-collection-card,
  .ldr-metric-card {
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
  }

  .ldr-mode-info,
  .ldr-mode-info h2,
  .ldr-mode-info p {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .ldr-search-hints,
  .ldr-hint-row {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
  }

  .ldr-hint-item {
    min-width: 0;
    max-width: 100%;
  }

  /* Action rows should wrap instead of escaping to the right. */
  .ldr-header-actions,
  .ldr-research-header,
  .ldr-card-actions,
  .ldr-form-actions,
  .ldr-settings-actions,
  .ldr-page-actions,
  .action-buttons,
  .button-group,
  .btn-group {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch;
    gap: 0.5rem !important;
    width: 100%;
    max-width: 100%;
  }

  .ldr-header-actions > *,
  .ldr-research-header > *,
  .ldr-card-actions > *,
  .ldr-form-actions > *,
  .ldr-settings-actions > *,
  .ldr-page-actions > *,
  .action-buttons > *,
  .button-group > *,
  .btn-group > * {
    min-width: 0;
    max-width: 100%;
  }

  button,
  .btn,
  a.btn,
  [role="button"] {
    max-width: 100%;
    white-space: normal;
  }

  /* Tabs scroll locally; they must not make the entire page wider. */
  .nav-tabs,
  .ldr-tab-navigation,
  .ldr-settings-tabs,
  [role="tablist"] {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .nav-tabs > *,
  .ldr-tab-navigation > *,
  .ldr-settings-tabs > *,
  [role="tablist"] > * {
    flex: 0 0 auto;
  }

  /* Tables/code can scroll inside themselves, not the page. */
  table,
  pre,
  code,
  .ldr-config-example,
  .ldr-file-path,
  .table-responsive,
  .ldr-table-scroll {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  table {
    display: block;
  }

  img,
  video,
  iframe,
  canvas,
  svg {
    max-width: 100% !important;
    height: auto;
  }

  /* Bottom nav stays, but content clearance is centralized here. */
  .ldr-mobile-bottom-nav {
    width: 100%;
    max-width: 100%;
  }
}

/* Auth pages: on phones the login/register flow is the page, not a card in a frame. */
@media (max-width: 640px) {
  body.ldr-login-page,
  body.ldr-register-page,
  body.ldr-change-password-page {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
    background: var(--auth-bg, var(--bg-primary)) !important;
  }

  .ldr-auth-page-shell {
    width: 100% !important;
    min-height: 100dvh !important;
    height: auto !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--auth-bg, var(--bg-primary));
  }

  .ldr-auth-brand-panel {
    display: none !important;
  }

  .ldr-auth-form-panel {
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-height: auto !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--auth-surface, var(--bg-secondary)) !important;
    padding:
      max(env(safe-area-inset-top), 20px)
      clamp(16px, 5vw, 22px)
      max(env(safe-area-inset-bottom), 24px) !important;
    justify-content: flex-start !important;
    overflow: visible !important;
  }

  .ldr-auth-form-header,
  .ldr-auth-security-note,
  .ldr-auth-alerts,
  .ldr-auth-form,
  .ldr-auth-links,
  .ldr-register-grid,
  .ldr-register-section {
    width: 100% !important;
    max-width: none !important;
  }

  .ldr-auth-form-header h1,
  .ldr-auth-form-header h2 {
    font-size: clamp(1.55rem, 8vw, 2rem);
    line-height: 1.08;
  }
}

/* Second-pass mobile containment: keep legacy full-bleed card headers inside
 * their cards. Some upstream panels use negative margins/oversized widths for
 * desktop emphasis; on phones that creates clipped side slivers even when the
 * document itself no longer horizontally scrolls.
 */
@media (max-width: 767px) {
  .ldr-card-header,
  .card-header,
  .ldr-semantic-panel-header {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-left-width: 0 !important;
    border-right-width: 0 !important;
  }

  .ldr-card > .ldr-card-header,
  .card > .card-header,
  .ldr-semantic-panel > .ldr-semantic-panel-header {
    border-radius: inherit inherit 0 0;
  }

  /* Horizontal setting tabs are allowed to scroll locally, but the tab strip
   * itself must stay clipped to the page width with momentum scrolling.
   */
  .ldr-settings-tabs {
    width: 100% !important;
    max-width: 100% !important;
    contain: inline-size;
    scroll-padding-inline: var(--openser-mobile-edge, 12px);
  }
}