/* x25lab · Authoritative mobile AI chat layout · v25
   Loaded last, as a separate, shared file on every active HTML page.
   Does not change visibility (display), open/closed JS state or desktop layout.
   No CSS/JS modification of checkout, BPMN, portal, or cookie UI.
*/
@media screen and (max-width: 767.98px), screen and (max-height: 600px) and (pointer: coarse) {
  /* Older x25lab AI Chatbot */
  #mc-floating-chatbox.mc-floating-chatbox,
  #mc-floating-chatbox,
  .mc-floating-chatbox {
    position: fixed !important;
    inset: auto !important;
    top: max(12px, env(safe-area-inset-top, 0px)) !important;
    bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    left: max(12px, env(safe-area-inset-left, 0px)) !important;
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding-bottom: 0;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow: hidden !important;
    transition-property: opacity, transform, visibility !important;
  }
  #mc-floating-chatbox > .mc-floating-header,
  #mc-floating-chatbox > .mc-chatbox-form,
  #mc-floating-chatbox > .mc-chatbox-hint,
  .mc-floating-chatbox > .mc-floating-header,
  .mc-floating-chatbox > .mc-chatbox-form,
  .mc-floating-chatbox > .mc-chatbox-hint {
    flex: 0 0 auto !important;
    min-height: 0;
  }
  #mc-floating-chatbox > #mc-chatbox-messages,
  #mc-floating-chatbox > .mc-chatbox-window,
  .mc-floating-chatbox > .mc-chatbox-window {
    flex: 1 1 0px !important;
    height: 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    overflow-wrap: anywhere;
  }
  #mc-floating-chatbox .mc-chatbox-window > *,
  .mc-floating-chatbox .mc-chatbox-window > * {
    flex-shrink: 0;
    max-width: 100%;
  }
  /* Modern AI Bot: separate panel and answer viewport */
  #x25-contact-panel,
  .x25-contact-panel {
    position: fixed !important;
    inset: auto !important;
    top: max(12px, env(safe-area-inset-top, 0px)) !important;
    bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    left: max(12px, env(safe-area-inset-left, 0px)) !important;
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow: hidden !important;
    transition-property: opacity, transform, visibility !important;
  }
  #x25-contact-panel .x25-contact-head,
  #x25-contact-panel .x25-contact-form,
  #x25-contact-panel .x25-contact-foot,
  .x25-contact-panel .x25-contact-head,
  .x25-contact-panel .x25-contact-form,
  .x25-contact-panel .x25-contact-foot {
    flex: 0 0 auto !important;
    min-height: 0;
  }
  #x25-contact-panel .x25-contact-messages,
  .x25-contact-panel .x25-contact-messages {
    flex: 1 1 0px !important;
    height: 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: none !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    overflow-wrap: anywhere;
  }
  #x25-contact-panel .x25-contact-messages > *,
  .x25-contact-panel .x25-contact-messages > * {
    max-width: 100%;
    min-width: 0;
  }
}

/* Roman Mayr AI Bot · balanced mobile window v30.
   Single replacement of v28 geometry; no additional cascading hotfix.
   Initial dimensions do not depend on content or the site-header JS variable.
   Streaming and the separate internal message scrollport are preserved. */
@media screen and (max-width: 768px) {
  /* Preserve the non-sidebar version of the bot. */
  #mc-hp-chat-section:not(.mcHpSidebarPanel) .mcHpMainRow {
    box-sizing: border-box !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  #mc-hp-chat-section:not(.mcHpSidebarPanel) #mc-hp-chatbox.mcHpChatbox {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: min(76vh, 680px) !important;
    height: min(76dvh, 680px) !important;
    max-height: min(76dvh, 680px) !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* A large chat window, centred in the *visible* mobile viewport. 
     The page header is still visible above the dialog: not fullscreen. v30 also forces symmetric side gutters and slightly lower positioning. */
  html.mcHpSidebarMode #mc-hp-chat-section.mcHpSidebarPanel,
  body.mcHpSidebarMode #mc-hp-chat-section.mcHpSidebarPanel {
    --x25-bot-gutter: 16px;
    --x25-bot-top: max(112px, calc(env(safe-area-inset-top, 0px) + 86px));
    --x25-bot-height: min(calc(100dvh - var(--x25-bot-top) - 18px), 640px);
    box-sizing: border-box !important;
    position: fixed !important;
    top: var(--x25-bot-top) !important;
    bottom: auto !important;
    left: var(--x25-bot-gutter) !important;
    right: auto !important;
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    min-width: 0 !important;
    height: var(--x25-bot-height) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - var(--x25-bot-top) - 18px) !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }
  html.mcHpSidebarMode #mc-hp-chat-section.mcHpSidebarPanel > .container,
  html.mcHpSidebarMode #mc-hp-chat-section.mcHpSidebarPanel > .container-fluid,
  body.mcHpSidebarMode #mc-hp-chat-section.mcHpSidebarPanel > .container,
  body.mcHpSidebarMode #mc-hp-chat-section.mcHpSidebarPanel > .container-fluid {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  /* Preserve existing JS open/close state and off-screen slide animation. */
  html.mcHpSidebarMode #mc-hp-chat-section.mcHpSidebarPanel:not(.mcHpSidebarPanel--open) {
    transform: translate3d(calc(100% + 28px), 0, 0) !important;
  }
  html.mcHpSidebarMode #mc-hp-chat-section.mcHpSidebarPanel.mcHpSidebarPanel--open {
    transform: translate3d(0, 0, 0) !important;
  }
  html.mcHpSidebarMode #mc-hp-chat-section.mcHpSidebarPanel .mcHpMainRow {
    box-sizing: border-box !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: inherit !important;
    overflow: hidden !important;
  }
  html.mcHpSidebarMode #mc-hp-chat-section.mcHpSidebarPanel .mcHpMainRow > [class*="col-"] {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  html.mcHpSidebarMode #mc-hp-chatbox.mcHpChatbox--sidebar {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    contain: layout !important;
  }
  #mc-hp-chatbox > .mcHpChatHeader,
  #mc-hp-chatbox > .mcHpChips,
  #mc-hp-chatbox > .mcHpConsentBar,
  #mc-hp-chatbox > .mcHpInputArea {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    max-width: 100% !important;
  }
  #mc-hp-chatbox > #mc-hp-messages.mcHpMessages {
    box-sizing: border-box !important;
    display: flex !important;
    flex: 1 1 0px !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overflow-wrap: anywhere;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
  #mc-hp-chatbox > #mc-hp-messages.mcHpMessages > * {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  #mc-hp-chatbox > .mcHpChips {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
  }
}
/* Landscape and limited keyboard-height: use most of the short viewport. */
@media screen and (max-width: 768px) and (max-height: 520px) {
  html.mcHpSidebarMode #mc-hp-chat-section.mcHpSidebarPanel,
  body.mcHpSidebarMode #mc-hp-chat-section.mcHpSidebarPanel {
    --x25-bot-gutter: 12px;
    --x25-bot-top: 18px;
    --x25-bot-height: calc(100dvh - 36px);
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    max-height: calc(100dvh - 36px) !important;
  }
}