/*
 * BIOS Personal mobile chat viewport R21.
 *
 * R20 owns the mobile section window. This layer gives Conversation a stable
 * viewport: only the message thread scrolls, while navigation and the glass
 * composer stay anchored to the visible chat window.
 */

@media (max-width: 760px),
  (max-width: 1024px) and (max-height: 500px) and (pointer: coarse) {
  body.bios-live.mobile-section-window:has(.view-ai-chat.active) {
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.bios-live.mobile-section-window .main:has(> .view-ai-chat.active) {
    height: calc(100dvh - 12px);
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto;
  }

  body.bios-live.mobile-section-window .view-ai-chat.active {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    box-sizing: border-box;
    padding: calc(76px + env(safe-area-inset-top)) 0 0;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.bios-live.mobile-section-window .view-ai-chat .chat-workspace,
  body.bios-live.mobile-section-window .view-ai-chat .chat-workspace.insights-collapsed {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  body.bios-live.mobile-section-window .view-ai-chat .chat-workspace::before {
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    border: 0;
    background: rgba(31, 52, 78, .09);
  }

  body.bios-live.mobile-section-window .view-ai-chat .chat-experience,
  body.bios-live.mobile-section-window .view-ai-chat .chat-workspace.insights-collapsed .chat-experience {
    position: absolute;
    inset: 0;
    display: flex;
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-height: none;
    flex-direction: column;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #fff;
    transform: none !important;
  }

  body.bios-live.mobile-section-window .view-ai-chat .chat-thread {
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    margin: 0;
    padding: 18px 14px calc(116px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    direction: rtl;
    scroll-padding-top: 18px;
    scroll-padding-bottom: calc(116px + env(safe-area-inset-bottom));
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
  }

  body.bios-live.mobile-section-window .view-ai-chat .chat-thread > * {
    direction: ltr;
  }

  /* In the RTL scroll rail, flex-start is the visual right edge. */
  body.bios-live.mobile-section-window .view-ai-chat .chat-thread > .message.user {
    margin-right: 0;
    margin-left: 0;
    align-self: flex-start;
  }

  body.bios-live.mobile-section-window .view-ai-chat .chat-thread > .message:last-child {
    margin-bottom: 0;
  }

  body.bios-live.mobile-section-window .view-ai-chat .chat-bottom {
    position: absolute;
    z-index: 30;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 12px 10px calc(10px + env(safe-area-inset-bottom));
    border: 0;
    background:
      linear-gradient(180deg, rgba(248, 251, 254, 0) 0%, rgba(245, 249, 252, .72) 22%, rgba(240, 246, 250, .88) 100%) !important;
    box-shadow: none;
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    pointer-events: none;
  }

  body.bios-live.mobile-section-window .view-ai-chat .chat-composer,
  body.bios-live.mobile-section-window .view-ai-chat .chat-experience.is-scrolling .chat-composer {
    display: grid;
    width: 100%;
    min-height: 62px;
    box-sizing: border-box;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 10px;
    align-items: center;
    margin: 0;
    padding: 8px 9px;
    border: 1px solid rgba(118, 151, 181, .24);
    border-radius: 22px;
    background: rgba(255, 255, 255, .58);
    box-shadow:
      0 18px 44px -28px rgba(22, 52, 80, .6),
      inset 0 1px 0 rgba(255, 255, 255, .9);
    backdrop-filter: blur(26px) saturate(160%);
    -webkit-backdrop-filter: blur(26px) saturate(160%);
    pointer-events: auto;
  }

  body.bios-live.mobile-section-window .view-ai-chat .chat-composer:focus-within {
    border-color: rgba(8, 124, 240, .34);
    background: rgba(255, 255, 255, .72);
    box-shadow:
      0 18px 44px -28px rgba(22, 52, 80, .64),
      0 0 0 3px rgba(8, 124, 240, .08),
      inset 0 1px 0 rgba(255, 255, 255, .94);
  }

  body.bios-live.mobile-section-window .view-ai-chat :is(.composer-plus, .composer-send) {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 15px;
  }

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

  body.bios-live.mobile-section-window .view-ai-chat .chat-disclaimer {
    margin: 6px 8px 0;
    color: #7e8fa2;
    font-size: 9.5px;
    line-height: 1.25;
    pointer-events: none;
  }

  /* Absolute inside the non-scrolling section window: stable while messages move. */
  body.bios-live.mobile-section-window .main:has(> .view-ai-chat.active) > .mobile-section-menu {
    position: absolute;
    top: calc(18px + env(safe-area-inset-top));
    left: 18px;
  }
}

@media (max-width: 360px) {
  body.bios-live.mobile-section-window .view-ai-chat .chat-thread {
    padding-right: 11px;
    padding-left: 11px;
  }

  body.bios-live.mobile-section-window .view-ai-chat .chat-bottom {
    padding-right: 8px;
    padding-left: 8px;
  }
}