/*
 * ============================================================================
 * XCHAT_MOBILE_V2_STAGE2A_SHEETS_V1
 * ============================================================================
 *
 * Shared mobile presentation contract for:
 *
 *   - INFO
 *   - Private Mail
 *
 * Behaviour/data stay owned by their existing JavaScript modules.
 *
 * This file owns only PHONE presentation:
 * viewport placement, sheet geometry, title bars, touch targets,
 * safe-area handling and mobile scrolling.
 *
 * Future mobile dialogs should extend this contract instead of inventing
 * another independent phone-modal geometry.
 * ============================================================================
 */


@media (max-width: 700px) {

  /*
   * --------------------------------------------------------------------------
   * 1. SHARED VISUAL VIEWPORT ROOT
   * --------------------------------------------------------------------------
   *
   * Stage1C already exposes the real visual viewport. Anchoring modal roots
   * to those variables prevents a software keyboard from leaving dialogs
   * behind the obscured part of the browser viewport.
   */

  #xchatInfoPopup,

  .xpm-root {
    position:
      fixed !important;

    inset:
      auto 0 auto 0 !important;

    top:
      var(
        --xchat-visual-offset-top,
        0px
      )
      !important;

    width:
      100vw !important;

    height:
      var(
        --xchat-mobile-vh,
        100dvh
      )
      !important;

    max-width:
      100vw !important;

    max-height:
      var(
        --xchat-mobile-vh,
        100dvh
      )
      !important;

    box-sizing:
      border-box !important;

    overflow:
      hidden !important;
  }


  /*
   * Shared dark backdrop.
   */

  #xchatInfoPopup
  .xip-bg,

  .xpm-root
  .xpm-backdrop {
    position:
      absolute !important;

    inset:
      0 !important;

    background:
      rgba(
        0,
        2,
        20,
        .68
      )
      !important;

    backdrop-filter:
      blur(3px);

    -webkit-backdrop-filter:
      blur(3px);
  }


  /*
   * --------------------------------------------------------------------------
   * 2. INFO SHEET
   * --------------------------------------------------------------------------
   *
   * Keep the existing INFO contents and the user's coloured avatar aura.
   * Only replace the small desktop-centered window geometry.
   */

  #xchatInfoPopup
  .xip-window {
    position:
      absolute !important;

    top:
      auto !important;

    right:
      6px !important;

    bottom:
      max(
        6px,
        env(safe-area-inset-bottom)
      )
      !important;

    left:
      6px !important;

    transform:
      none !important;

    display:
      flex !important;

    flex-direction:
      column !important;

    width:
      auto !important;

    min-width:
      0 !important;

    max-width:
      none !important;

    max-height:
      calc(
        100% -
        max(
          12px,
          env(safe-area-inset-top)
        )
      )
      !important;

    box-sizing:
      border-box !important;

    border:
      1px solid
      rgba(
        102,
        137,
        224,
        .86
      )
      !important;

    border-radius:
      17px 17px 12px 12px
      !important;

    background:
      linear-gradient(
        180deg,
        rgba(
          10,
          18,
          54,
          .99
        ) 0%,
        rgba(
          2,
          6,
          28,
          .99
        ) 100%
      )
      !important;

    color:
      #ffffff !important;
  }


  #xchatInfoPopup
  .xip-title {
    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      space-between !important;

    flex:
      0 0 48px !important;

    min-height:
      48px !important;

    padding:
      2px
      max(
        4px,
        env(safe-area-inset-right)
      )
      2px
      max(
        13px,
        env(safe-area-inset-left)
      )
      !important;

    box-sizing:
      border-box !important;

    border-bottom:
      1px solid
      rgba(
        100,
        135,
        220,
        .62
      )
      !important;

    border-radius:
      16px 16px 0 0
      !important;

    background:
      linear-gradient(
        90deg,
        #101d55 0%,
        #091235 100%
      )
      !important;

    color:
      #fff58a !important;

    font:
      700 14px/1.2
      Verdana,
      Arial,
      sans-serif
      !important;
  }


  #xchatInfoPopup
  .xip-title button {
    display:
      inline-flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    flex:
      0 0 44px !important;

    width:
      44px !important;

    min-width:
      44px !important;

    max-width:
      44px !important;

    height:
      44px !important;

    min-height:
      44px !important;

    max-height:
      44px !important;

    margin:
      0 !important;

    padding:
      0 !important;

    border:
      0 !important;

    border-left:
      1px solid
      rgba(
        100,
        135,
        220,
        .56
      )
      !important;

    border-radius:
      0 14px 0 0
      !important;

    background:
      rgba(
        9,
        18,
        55,
        .92
      )
      !important;

    color:
      #ffffff !important;

    font:
      400 28px/40px
      Arial,
      sans-serif
      !important;

    touch-action:
      manipulation;
  }


  #xchatInfoPopup
  .xip-title button:active {
    background:
      #173274 !important;

    color:
      #fff58a !important;
  }


  #xchatInfoPopup
  .xip-body {
    flex:
      1 1 auto !important;

    min-height:
      0 !important;

    padding:
      14px
      max(
        14px,
        env(safe-area-inset-right)
      )
      max(
        16px,
        calc(
          env(safe-area-inset-bottom) +
          10px
        )
      )
      max(
        14px,
        env(safe-area-inset-left)
      )
      !important;

    box-sizing:
      border-box !important;

    overflow-x:
      hidden !important;

    overflow-y:
      auto !important;

    overscroll-behavior:
      contain;

    -webkit-overflow-scrolling:
      touch;

    scrollbar-width:
      none;
  }


  #xchatInfoPopup
  .xip-body::-webkit-scrollbar {
    display:
      none;

    width:
      0;

    height:
      0;
  }


  /*
   * Preserve avatar/vip presentation, but allow it to fit small screens.
   */

  #xchatInfoPopup
  .xip-profile-layout.has-avatar {
    min-width:
      0 !important;
  }


  #xchatInfoPopup
  .xip-avatar {
    max-width:
      100% !important;
  }


  /*
   * Any INFO action should be finger-friendly.
   */

  #xchatInfoPopup
  .xip-body button,

  #xchatInfoPopup
  .xip-mail-action {
    min-height:
      44px !important;

    touch-action:
      manipulation;
  }


  /*
   * --------------------------------------------------------------------------
   * 3. PRIVATE MAIL SHEET
   * --------------------------------------------------------------------------
   */

  .xpm-root
  .xpm-window {
    position:
      absolute !important;

    top:
      auto !important;

    right:
      4px !important;

    bottom:
      max(
        4px,
        env(safe-area-inset-bottom)
      )
      !important;

    left:
      4px !important;

    transform:
      none !important;

    width:
      auto !important;

    min-width:
      0 !important;

    max-width:
      none !important;

    height:
      calc(
        100% -
        max(
          8px,
          env(safe-area-inset-top)
        ) -
        max(
          4px,
          env(safe-area-inset-bottom)
        )
      )
      !important;

    max-height:
      none !important;

    box-sizing:
      border-box !important;

    grid-template-rows:
      48px
      minmax(0, 1fr)
      !important;

    border:
      1px solid
      rgba(
        102,
        137,
        224,
        .86
      )
      !important;

    border-radius:
      17px 17px 10px 10px
      !important;

    overflow:
      hidden !important;

    background:
      linear-gradient(
        180deg,
        #071334 0%,
        #02061c 100%
      )
      !important;
  }


  .xpm-root
  .xpm-titlebar {
    min-width:
      0 !important;

    min-height:
      48px !important;

    padding:
      0
      max(
        4px,
        env(safe-area-inset-right)
      )
      0
      max(
        13px,
        env(safe-area-inset-left)
      )
      !important;

    box-sizing:
      border-box !important;

    border-bottom:
      1px solid
      rgba(
        100,
        135,
        220,
        .62
      )
      !important;

    background:
      linear-gradient(
        90deg,
        #101d55 0%,
        #091235 100%
      )
      !important;

    color:
      #fff58a !important;

    font:
      700 14px/1.2
      Verdana,
      Arial,
      sans-serif
      !important;
  }


  .xpm-root
  .xpm-titlebar button {
    display:
      inline-flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    flex:
      0 0 44px !important;

    width:
      44px !important;

    min-width:
      44px !important;

    max-width:
      44px !important;

    height:
      44px !important;

    min-height:
      44px !important;

    max-height:
      44px !important;

    margin:
      0 !important;

    padding:
      0 !important;

    border:
      0 !important;

    border-left:
      1px solid
      rgba(
        100,
        135,
        220,
        .56
      )
      !important;

    border-radius:
      0 14px 0 0
      !important;

    background:
      rgba(
        9,
        18,
        55,
        .92
      )
      !important;

    color:
      #ffffff !important;

    font:
      400 28px/40px
      Arial,
      sans-serif
      !important;

    touch-action:
      manipulation;
  }


  .xpm-root
  .xpm-titlebar button:active {
    background:
      #173274 !important;

    color:
      #fff58a !important;
  }


  /*
   * Content remains a grid. Existing mailbox renderer stays authoritative.
   */

  .xpm-root
  .xpm-content {
    min-width:
      0 !important;

    min-height:
      0 !important;

    padding:
      8px
      max(
        8px,
        env(safe-area-inset-right)
      )
      max(
        10px,
        calc(
          env(safe-area-inset-bottom) +
          6px
        )
      )
      max(
        8px,
        env(safe-area-inset-left)
      )
      !important;

    box-sizing:
      border-box !important;

    overflow:
      hidden !important;
  }


  /*
   * Three main mailbox actions behave like a compact app tab bar.
   */

  .xpm-root
  .xpm-toolbar {
    display:
      grid !important;

    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      )
      !important;

    align-items:
      stretch !important;

    gap:
      5px !important;

    min-height:
      0 !important;

    padding:
      0 0 7px !important;
  }


  .xpm-root
  .xpm-toolbar button {
    min-width:
      0 !important;

    min-height:
      42px !important;

    padding:
      4px 5px !important;

    overflow:
      hidden !important;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;

    font-size:
      11px !important;

    touch-action:
      manipulation;
  }


  .xpm-root
  .xpm-capacity {
    grid-column:
      1 / -1 !important;

    width:
      100% !important;

    min-width:
      0 !important;

    margin:
      0 !important;

    padding:
      1px 2px 0 !important;

    box-sizing:
      border-box !important;

    color:
      #9fbbe9 !important;

    font-size:
      10px !important;

    line-height:
      1.3 !important;

    text-align:
      center;

    white-space:
      normal !important;
  }


  /*
   * Inbox: list above, selected message below.
   * Both retain their own native scrolling.
   */

  .xpm-root
  .xpm-inbox-layout {
    min-width:
      0 !important;

    min-height:
      0 !important;

    grid-template-columns:
      minmax(0, 1fr)
      !important;

    grid-template-rows:
      minmax(118px, 36%)
      minmax(0, 1fr)
      !important;

    gap:
      7px !important;

    padding-top:
      7px !important;

    overflow:
      hidden !important;
  }


  .xpm-root
  .xpm-message-list,

  .xpm-root
  .xpm-detail-body {
    overscroll-behavior:
      contain;

    -webkit-overflow-scrolling:
      touch;
  }


  .xpm-root
  .xpm-message-row {
    min-height:
      54px !important;

    padding:
      8px !important;

    touch-action:
      manipulation;
  }


  .xpm-root
  .xpm-detail-meta {
    padding:
      8px !important;

    font-size:
      12px !important;

    line-height:
      1.45 !important;
  }


  .xpm-root
  .xpm-detail-body {
    padding:
      10px !important;
  }


  .xpm-root
  .xpm-detail-actions {
    gap:
      6px !important;

    padding:
      7px !important;
  }


  .xpm-root
  .xpm-detail-actions button,

  .xpm-root
  .xpm-compose-actions button {
    flex:
      1 1 0 !important;

    min-height:
      44px !important;

    padding:
      6px 8px !important;

    touch-action:
      manipulation;
  }


  /*
   * Compose screen.
   *
   * 16px is deliberate on phone inputs:
   * iOS Safari does not auto-zoom a normally sized editable control.
   */

  .xpm-root
  .xpm-compose {
    min-width:
      0 !important;

    min-height:
      0 !important;

    grid-template-rows:
      auto
      auto
      minmax(0, 1fr)
      auto
      !important;

    gap:
      8px !important;

    padding-top:
      7px !important;

    overflow:
      hidden !important;
  }


  .xpm-root
  .xpm-compose label {
    min-width:
      0 !important;

    grid-template-columns:
      minmax(0, 1fr)
      !important;

    gap:
      4px !important;

    font-size:
      11px !important;
  }


  .xpm-root
  .xpm-compose input,

  .xpm-root
  .xpm-compose textarea {
    min-width:
      0 !important;

    min-height:
      44px !important;

    padding:
      9px 10px !important;

    font-size:
      16px !important;

    line-height:
      1.35 !important;
  }


  .xpm-root
  .xpm-compose textarea {
    min-height:
      110px !important;

    overflow-y:
      auto !important;

    -webkit-overflow-scrolling:
      touch;
  }


  .xpm-root
  .xpm-compose-actions {
    width:
      100% !important;

    gap:
      7px !important;
  }


  .xpm-root
  .xpm-suggestions {
    max-height:
      min(
        220px,
        34dvh
      )
      !important;

    overscroll-behavior:
      contain;

    -webkit-overflow-scrolling:
      touch;
  }


  .xpm-root
  .xpm-suggestions button {
    min-height:
      44px !important;

    padding:
      9px 10px !important;

    touch-action:
      manipulation;
  }


  /*
   * Keyboard-open mode:
   * save vertical room for the actual message being typed.
   */

  html.xc-mobile-keyboard-open
  .xpm-root
  .xpm-capacity {
    display:
      none !important;
  }


  html.xc-mobile-keyboard-open
  .xpm-root
  .xpm-toolbar button {
    min-height:
      38px !important;
  }


  html.xc-mobile-keyboard-open
  .xpm-root
  .xpm-compose {
    gap:
      5px !important;

    padding-top:
      4px !important;
  }


  html.xc-mobile-keyboard-open
  .xpm-root
  .xpm-compose textarea {
    min-height:
      72px !important;
  }


  /*
   * Mobile mail button itself gets a proper touch target.
   */

  .xc-mail-mobile-button {
    min-height:
      40px !important;

    min-width:
      72px !important;

    touch-action:
      manipulation;
  }
}


/*
 * Small phones get a little more compact without changing functionality.
 */

@media (max-width: 360px) {

  #xchatInfoPopup
  .xip-title,

  .xpm-root
  .xpm-titlebar {
    font-size:
      13px !important;
  }


  .xpm-root
  .xpm-toolbar button {
    padding:
      3px !important;

    font-size:
      10px !important;
  }


  .xpm-root
  .xpm-inbox-layout {
    grid-template-rows:
      minmax(105px, 34%)
      minmax(0, 1fr)
      !important;
  }
}


/*
 * Sheet entrance animation is presentation only.
 */

@media
  (max-width: 700px)
  and
  (prefers-reduced-motion: no-preference) {

  #xchatInfoPopup
  .xip-window,

  .xpm-root.is-open
  .xpm-window {
    animation:
      xchat-mobile-sheet-enter
      .16s
      ease-out
      both;
  }


  @keyframes xchat-mobile-sheet-enter {
    from {
      opacity: .70;
      translate: 0 16px;
    }

    to {
      opacity: 1;
      translate: 0 0;
    }
  }
}