/* Jacob OS P0 mobile chat layout guard.
   Loaded after legacy chat layers so the dynamic viewport, safe area and
   composer remain authoritative on narrow screens. */

:root {
  --jacob-mobile-viewport-height: 100dvh;
  --jacob-mobile-bottom-nav-height: 0px;
  --jacob-mobile-header-height: 64px;
  --jacob-mobile-composer-height: 78px;
  --jacob-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
}

@supports not (height: 100dvh) {
  :root {
    --jacob-mobile-viewport-height: 100vh;
  }
}

@media (max-width: 760px) {
  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    min-height: var(--jacob-mobile-viewport-height) !important;
    overflow-x: hidden !important;
  }

  body {
    padding-bottom: 0 !important;
  }

  .os-window {
    width: 100% !important;
    max-width: 100% !important;
    height: var(--jacob-mobile-viewport-height) !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  .main-panel {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding-bottom: calc(
      var(--jacob-mobile-bottom-nav-height)
      + var(--jacob-mobile-safe-bottom)
      + 8px
    ) !important;
  }

  body.jacob-mobile-keyboard-open .main-panel {
    padding-bottom: calc(var(--jacob-mobile-safe-bottom) + 4px) !important;
  }

  .main-panel > .topbar,
  .topbar,
  .jacob-mobile-header,
  .jacob-app-header {
    flex: 0 0 auto !important;
  }

  .page.active {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .conversation-panel,
  .priority-chat,
  #conversation {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: min(
      360px,
      calc(var(--jacob-mobile-viewport-height) - var(--jacob-mobile-header-height) - 72px)
    ) !important;
    height: min(
      74dvh,
      calc(
        var(--jacob-mobile-viewport-height)
        - var(--jacob-mobile-header-height)
        - var(--jacob-mobile-bottom-nav-height)
        - 24px
      )
    ) !important;
    max-height: calc(
      var(--jacob-mobile-viewport-height)
      - var(--jacob-mobile-bottom-nav-height)
      - 16px
    ) !important;
    overflow: hidden !important;
    contain: layout paint !important;
  }

  body.jacob-mobile-keyboard-open .conversation-panel,
  body.jacob-mobile-keyboard-open .priority-chat,
  body.jacob-mobile-keyboard-open #conversation {
    min-height: 220px !important;
    height: calc(var(--jacob-mobile-viewport-height) - 12px) !important;
    max-height: calc(var(--jacob-mobile-viewport-height) - 12px) !important;
  }

  #messages,
  .messages,
  .chat-history,
  [data-jacob-chat-messages] {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain !important;
    scroll-padding-top: 12px !important;
    scroll-padding-bottom: calc(var(--jacob-mobile-composer-height) + 18px) !important;
    padding-bottom: 18px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #chat-form,
  .chat-form,
  .chat-composer,
  [data-jacob-chat-composer] {
    position: sticky !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 45 !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-bottom: max(10px, var(--jacob-mobile-safe-bottom)) !important;
    box-sizing: border-box !important;
    isolation: isolate !important;
  }

  #chat-form.native-composer {
    grid-template-columns: 40px minmax(0, 1fr) !important;
  }

  #chat-form.native-composer .jacob-composer-shell {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #message-input,
  #chat-form textarea,
  .chat-form textarea,
  [data-jacob-chat-composer] textarea {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important;
    resize: none !important;
  }

  .message {
    min-width: 0 !important;
    max-width: calc(100% - 18px) !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .message-header,
  .message-meta,
  .jacob-message-meta {
    min-width: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
  }

  .message-body,
  .message p,
  .message pre,
  .message code {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  [data-jacob-mobile-bottom-nav="true"] {
    padding-bottom: max(6px, var(--jacob-mobile-safe-bottom)) !important;
    transition: transform 160ms ease, opacity 160ms ease !important;
  }

  body.jacob-mobile-keyboard-open [data-jacob-mobile-bottom-nav="true"] {
    transform: translateY(115%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

@media (max-width: 360px) {
  #chat-form.native-composer,
  #chat-form.chat-form.native-composer {
    gap: 6px !important;
    padding-inline: 8px !important;
  }

  #chat-form.native-composer .jacob-attach-button {
    width: 38px !important;
    min-width: 38px !important;
  }

  #chat-form.native-composer .jacob-composer-inline-actions {
    gap: 5px !important;
  }

  #chat-form.native-composer .jacob-mic-button,
  #chat-form.native-composer .send-message {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
}