/*
 * BIOS Personal mobile shell R19.
 *
 * Loaded after the shared dashboard styles so the phone layout cannot fall
 * back to the legacy two-column sidebar rules in dashboard-app.css.
 */

@media (max-width: 760px),
  (max-width: 1024px) and (max-height: 500px) and (pointer: coarse) {
  html,
  body.bios-live {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    overscroll-behavior-x: none;
    background: #edf1f4;
  }

  body.bios-live .app {
    display: block;
    width: 100%;
    min-width: 0;
  }

  /* Native mobile navigation replaces the desktop sidebar. */
  body.bios-live .sidebar {
    position: fixed;
    z-index: 90;
    inset: auto 0 0;
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid rgba(28, 54, 84, .1);
    background: rgba(251, 252, 253, .95);
    box-shadow: 0 -12px 34px rgba(21, 47, 75, .08);
    backdrop-filter: blur(24px) saturate(1.18);
    -webkit-backdrop-filter: blur(24px) saturate(1.18);
  }

  body.bios-live .sidebar > .brand,
  body.bios-live .sidebar > .pulse-card,
  body.bios-live .sidebar > .sidebar-foot {
    display: none !important;
  }

  body.bios-live .sidebar .nav {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
  }

  body.bios-live .sidebar .nav-item {
    display: none !important;
    width: auto;
    min-width: 0;
    min-height: 57px;
    padding: 6px 2px 5px;
    border-radius: 13px;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    color: #758397;
    font-size: 10px;
    font-weight: 650;
    line-height: 1.05;
    text-align: center;
    white-space: nowrap;
  }

  body.bios-live .sidebar .nav-item[data-tab="today"],
  body.bios-live .sidebar .nav-item[data-tab="ai-chat"],
  body.bios-live .sidebar .nav-item[data-tab="protocols"],
  body.bios-live .sidebar .nav-item[data-tab="doctors"],
  body.bios-live .sidebar .nav-item[data-tab="family"] {
    display: flex !important;
  }

  body.bios-live .sidebar .nav-item:hover,
  body.bios-live .sidebar .nav-item.future-locked:hover {
    background: transparent;
    color: #53657a;
  }

  body.bios-live .sidebar .nav-item.active {
    background: #eaf4ff;
    color: #1177d5;
    box-shadow: inset 0 0 0 1px rgba(20, 126, 225, .07);
  }

  body.bios-live .sidebar .nav-symbol {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: currentColor;
  }

  body.bios-live .sidebar .nav-item.active .nav-symbol {
    border: 0;
    background: transparent;
    color: currentColor;
  }

  body.bios-live .sidebar .nav-symbol svg {
    width: 20px;
    height: 20px;
  }

  body.bios-live .sidebar .nav-symbol img {
    width: 24px;
    height: 24px;
  }

  body.bios-live .sidebar .nav-lock {
    top: 6px;
    right: calc(50% - 23px);
    width: 15px;
    height: 15px;
    transform: none;
    border: 1px solid rgba(255, 255, 255, .9);
    background: #e7edf3;
  }

  body.bios-live .sidebar .nav-lock svg {
    width: 9px;
    height: 9px;
  }

  body.bios-live .sidebar .nav-lock[data-tooltip]::before,
  body.bios-live .sidebar .nav-lock[data-tooltip]::after {
    display: none;
  }

  /* Content uses the same white-sheet visual language as the desktop shell. */
  body.bios-live .main,
  body.bios-live .main:has(> .view.active:not(.view-ai-chat)) {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 8px 8px calc(84px + env(safe-area-inset-bottom));
    background: #edf1f4;
  }

  body.bios-live .main > .view,
  body.bios-live .main > .view.active:not(.view-ai-chat) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
  }

  body.bios-live .main > .view.active:not(.view-ai-chat) {
    min-height: calc(100svh - 100px - env(safe-area-inset-bottom));
    padding: 24px 16px 34px;
    overflow-x: clip;
    border: 1px solid rgba(28, 48, 72, .06);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 20px 46px -42px rgba(24, 44, 68, .25);
  }

  body.bios-live .main > .view-today.active {
    padding-bottom: 34px;
  }

  body.bios-live :is(.topbar, .page-head, .family-head, .create-protocol-head) {
    min-width: 0;
    margin-bottom: 22px;
  }

  body.bios-live .view-today .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  body.bios-live .view-today .topbar-right {
    display: grid;
    width: 100%;
    max-width: none;
    grid-template-columns: minmax(0, 1fr) 42px 34px;
    align-items: center;
    gap: 8px;
    margin: 0;
  }

  body.bios-live .today-telegram-connect {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 42px;
    padding-inline: 14px;
    overflow: hidden;
    border-radius: 14px;
    text-overflow: ellipsis;
  }

  body.bios-live .view-today .topbar-right .bell {
    width: 42px;
    height: 42px;
  }

  body.bios-live .main .topbar-right > .avatar[data-tab="profile"] {
    display: block !important;
    width: 34px;
    height: 34px;
    cursor: pointer;
  }

  body.bios-live .greeting h1,
  body.bios-live .page-head h1,
  body.bios-live .view-today .greeting h1 {
    max-width: 100%;
    font-size: clamp(29px, 8.2vw, 34px);
    line-height: 1.04;
  }

  body.bios-live :is(.grid-2, .summary-grid, .settings-grid, .privacy-layout,
    .family-layout, .family-content, .family-overview-grid, .home-benefit-grid,
    .home-article-grid, .med-record-grid) {
    grid-template-columns: minmax(0, 1fr);
  }

  body.bios-live :is(.panel, .card, .privacy-card, .settings-list,
    .bios-live-profile-panel, .bios-live-panel, .bios-live-protocols) {
    min-width: 0;
    max-width: 100%;
  }

  body.bios-live .notifications-popover {
    top: auto;
    right: 8px;
    bottom: calc(80px + env(safe-area-inset-bottom));
    left: 8px;
    width: auto;
    max-width: none;
    max-height: min(70svh, 620px);
    border-radius: 20px;
  }

  body.bios-live .notifications-popover::before {
    display: none;
  }

  body.bios-live .app > .bios-app-footer {
    display: none !important;
  }
}

@media (max-width: 360px) {
  body.bios-live .sidebar {
    padding-inline: 4px;
  }

  body.bios-live .sidebar .nav {
    gap: 1px;
  }

  body.bios-live .sidebar .nav-item {
    font-size: 9px;
  }

  body.bios-live .main > .view.active:not(.view-ai-chat) {
    padding-inline: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.bios-live .sidebar,
  body.bios-live .sidebar .nav-item {
    transition: none;
  }
}