/* Bio2Twin /chat/ scroll restoration, 2026-11-05.
   The shared message centre is inserted as an additional chat-page child.
   The original chat viewport deliberately locks body scrolling for regular chat;
   only unlock that viewport while the message centre is visible. */
@supports selector(body:has(.b2t-shared-messages:not([hidden]))) {
  body.bt-chat:has(.b2t-shared-messages:not([hidden])) {
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.bt-chat:has(.b2t-shared-messages:not([hidden])) > .app {
    display: block !important;
    height: auto !important;
    min-height: calc(100dvh - var(--nav, 64px)) !important;
    overflow: visible !important;
  }

  body.bt-chat:has(.b2t-shared-messages:not([hidden])) .chat-page {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: calc(100dvh - var(--nav, 64px)) !important;
    padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important;
    overflow: visible !important;
  }

  body.bt-chat:has(.b2t-shared-messages:not([hidden])) .b2t-shared-messages {
    flex: 0 0 auto !important;
    min-width: 0;
  }

  body.bt-chat:has(.b2t-shared-messages:not([hidden])) .chat-shell {
    flex: 0 0 auto !important;
    height: clamp(240px, 42dvh, 460px) !important;
    min-height: 240px !important;
    overflow: hidden !important;
  }

  body.bt-chat:has(.b2t-shared-messages:not([hidden])) .chat-log {
    min-height: 80px;
    overflow-y: auto;
    padding-bottom: 20px !important;
  }

  /* When reading message history, keep the composer in normal document flow.
     The fixed desktop/mobile composer otherwise obscures message cards. */
  body.bt-chat:has(.b2t-shared-messages:not([hidden])) .chat-page #chat-form.composer {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: min(100%, 760px) !important;
    margin: 8px auto 0 !important;
  }

  body.bt-chat:has(.b2t-shared-messages:not([hidden])) .chat-page .disclaimer {
    position: static !important;
    width: 100% !important;
    margin: 6px 0 0 !important;
    text-align: center !important;
  }

  @media (max-width: 640px) {
    body.bt-chat:has(.b2t-shared-messages:not([hidden])) .chat-page {
      padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
    }
    body.bt-chat:has(.b2t-shared-messages:not([hidden])) .chat-shell {
      height: clamp(220px, 38dvh, 340px) !important;
      min-height: 220px !important;
    }
  }
}

/* On narrow iPhones, the original five-row grid could stretch the four
   starter buttons into very tall cards. Keep them readable and tappable. */
@media (max-width: 640px) {
  /* The sticky top bar occupies a separate 64px. Do not add another full
     viewport beneath it; that allowed a stale 64px scroll offset on reload,
     hiding the first line of the mobile heading. */
  body.bt-chat:not(.keyboard-open):not(:has(.b2t-shared-messages:not([hidden]))) > .app {
    height: calc(100dvh - var(--nav, 64px)) !important;
  }

  body.bt-chat .chat-page {
    display: flex !important;
    flex-direction: column !important;
  }

  body.bt-chat .chat-page .chat-starters {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    flex: 0 0 auto !important;
  }

  body.bt-chat .chat-page .chat-starters > button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 82px !important;
    height: auto !important;
    padding: 10px !important;
    scroll-snap-align: none !important;
  }

  body.bt-chat .chat-page .chat-starters > button span {
    display: block !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    line-height: 1.4 !important;
  }

  body.bt-chat .chat-page .chat-shell {
    flex: 1 1 auto;
    min-height: 0;
  }
}