/*
 * BIOS Personal mobile refinement R31.
 *
 * Loaded after R27. This layer follows the post-activation phone review:
 * display type is deliberately quieter, live-rendered settings rows keep their
 * actions inside the card, and Conversation retains one stable viewport.
 */

@media (max-width: 760px),
  (max-width: 1024px) and (max-height: 500px) and (pointer: coarse) {
  body.bios-live.mobile-section-window {
    --mobile-title-size: clamp(24px, 6.6vw, 28px);
    --mobile-section-title-size: clamp(21px, 5.8vw, 24px);
  }

  body.bios-live.mobile-section-window .main > .view.active:not(.view-ai-chat) {
    overflow-x: clip;
  }

  body.bios-live.mobile-section-window .main > .view.active:not(.view-ai-chat)
    :is(.greeting h1, .page-title h1, .privacy-head h1, .family-head h1,
      .family-title h1, .create-protocol-head h1, .protocol-detail-head h1,
      .case-detail-head h1, .consent-review-title h1) {
    max-width: 100%;
    font-size: var(--mobile-title-size) !important;
    line-height: 1.12;
    letter-spacing: -.025em !important;
    text-wrap: pretty;
  }

  body.bios-live.mobile-section-window .main > .view.active:not(.view-ai-chat)
    :is(.page-title p, .privacy-head p, .family-head p, .family-title p,
      .create-protocol-head p, .consent-review-title p) {
    font-size: 14px;
    line-height: 1.48;
  }

  body.bios-live.mobile-section-window .view-today .greeting h1 {
    font-size: clamp(27px, 7.5vw, 31px) !important;
    line-height: 1.08;
  }

  body.bios-live.mobile-section-window .view-today .topbar {
    margin-bottom: 20px;
  }

  body.bios-live.mobile-section-window .ai-title h2 {
    font-size: clamp(20px, 5.6vw, 23px) !important;
    line-height: 1.2;
  }

  body.bios-live.mobile-section-window .home-editorial {
    padding: 22px 18px 0;
  }

  body.bios-live.mobile-section-window .home-editorial-copy h2 {
    max-width: 12ch;
    font-size: clamp(26px, 7.2vw, 30px) !important;
    line-height: 1.1;
    letter-spacing: -.025em !important;
  }

  body.bios-live.mobile-section-window .home-editorial-copy p {
    font-size: 14px;
  }

  body.bios-live.mobile-section-window .home-editorial-visual {
    width: calc(100% + 36px);
    height: 190px;
    margin-right: -18px;
    margin-left: -18px;
  }

  body.bios-live.mobile-section-window .home-referral-card h3 {
    max-width: 18ch;
    font-size: clamp(23px, 6.4vw, 27px) !important;
    line-height: 1.15;
    letter-spacing: -.02em;
  }

  body.bios-live.mobile-section-window .home-referral-card p {
    font-size: 13px;
  }

  body.bios-live.mobile-section-window .home-bonus-card > strong {
    font-size: clamp(38px, 10.5vw, 44px);
  }

  body.bios-live.mobile-section-window .home-articles-head h2 {
    font-size: var(--mobile-section-title-size) !important;
  }

  body.bios-live.mobile-section-window .home-article-copy :is(b, strong) {
    font-size: clamp(16px, 4.5vw, 18px) !important;
    line-height: 1.3;
    letter-spacing: -.01em;
  }

  body.bios-live.mobile-section-window .home-article-copy small {
    font-size: 11px;
  }

  body.bios-live.mobile-section-window :is(.privacy-group, .settings-section,
    .backup-card, .export-panel, .doctors-card, .doctor-cases-panel,
    .case-detail-card, .protocol-detail-overview, .protocol-detail-ai,
    .protocol-detail-steps, .protocol-detail-data, .protocol-detail-note) > h2,
  body.bios-live.mobile-section-window :is(.privacy-group, .settings-section) header > h2 {
    font-size: clamp(18px, 5vw, 21px);
    line-height: 1.2;
  }

  /* The live security surface is rebuilt by dashboard-app.js and has no icons. */
  body.bios-live.mobile-section-window .view-security :is(.privacy-main,
    .privacy-group, .privacy-list) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  body.bios-live.mobile-section-window .view-security .privacy-row.bios-action-row,
  body.bios-live.mobile-section-window .view-security .privacy-row:has(> .btn-outline) {
    grid-template-columns: minmax(0, 1fr) auto !important;
    column-gap: 12px;
    padding: 15px 14px;
  }

  body.bios-live.mobile-section-window .view-security .privacy-row > div:first-child {
    min-width: 0;
    grid-column: 1;
  }

  body.bios-live.mobile-section-window .view-security .privacy-row.bios-action-row > span,
  body.bios-live.mobile-section-window .view-security .privacy-row > .btn-outline {
    min-width: 0;
    max-width: 104px;
    grid-column: 2;
    justify-self: end;
    white-space: normal;
    text-align: right;
    overflow-wrap: normal;
  }

  body.bios-live.mobile-section-window .view-security .privacy-row b {
    font-size: 14px;
  }

  body.bios-live.mobile-section-window .view-security .privacy-row p {
    font-size: 12px;
    line-height: 1.4;
  }

  body.bios-live.mobile-section-window .view-security .toggle-switch {
    width: 44px;
    max-width: 44px !important;
  }

  /* Keep Conversation compact without changing its anchoring from R27. */
  body.bios-live.mobile-section-window .view-ai-chat .page-title h1 {
    font-size: clamp(20px, 5.5vw, 22px) !important;
    line-height: 1.15;
  }

  body.bios-live.mobile-section-window .view-ai-chat > .page-head {
    min-height: 44px;
    padding-bottom: 8px;
  }

  body.bios-live.mobile-section-window .view-ai-chat .chat-thread {
    padding-inline: 11px;
  }

  body.bios-live.mobile-section-window .view-ai-chat .message:not(.user) .bios-message-text {
    font-size: 13.5px;
    line-height: 1.52;
  }

  body.bios-live.mobile-section-window .view-ai-chat .chat-bottom {
    box-sizing: border-box;
    max-width: 100%;
  }

  body.bios-live.mobile-section-window .view-ai-chat .chat-input {
    min-width: 0;
    font-size: 16px;
  }
}

@media (max-width: 360px) {
  body.bios-live.mobile-section-window .view-today .greeting h1 {
    font-size: 26px !important;
  }

  body.bios-live.mobile-section-window .home-editorial-copy h2 {
    font-size: 25px !important;
  }

  body.bios-live.mobile-section-window .view-security .privacy-row.bios-action-row,
  body.bios-live.mobile-section-window .view-security .privacy-row:has(> .btn-outline) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.bios-live.mobile-section-window .view-security .privacy-row.bios-action-row > span,
  body.bios-live.mobile-section-window .view-security .privacy-row > .btn-outline {
    max-width: 100%;
    grid-column: 1;
    justify-self: start;
    text-align: left;
  }

  body.bios-live.mobile-section-window .view-security .privacy-row.bios-action-row > .toggle-switch {
    position: absolute;
    top: 16px;
    right: 14px;
  }
}