/*
 * CODSHIPX AI CRM
 * MOBILE TOUCH + SCROLL R2
 * 2026-10-06
 *
 * Scope:
 * mandatory Codi first-login/setup UI only
 * <= 820px only
 *
 * Important:
 * body scroll remains intentionally locked by runtime.
 * The full-screen setup surface becomes the mobile scroll owner.
 */

@media (max-width:820px){

  /*
   * Main fix:
   * body is intentionally overflow:hidden while Codi setup is active.
   * Therefore this fixed gate must own vertical scrolling itself.
   */
  .codi-mandatory-gate.r7-r31-r4-setup-active,
  .codi-mandatory-gate.r7-r30r1-setup-reveal{
    box-sizing:border-box !important;

    position:fixed !important;
    inset:0 !important;

    width:100vw !important;
    max-width:100vw !important;

    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;

    -webkit-overflow-scrolling:touch !important;

    overscroll-behavior-x:none !important;
    overscroll-behavior-y:contain !important;

    touch-action:pan-y pinch-zoom !important;

    pointer-events:auto !important;
  }


  /*
   * Decorative full-screen layers must never intercept taps/swipes.
   */
  .codi-mandatory-gate .codi-mandatory-grid,
  .codi-mandatory-gate .codi-mandatory-stream,
  .codi-mandatory-gate .codi-mandatory-node{
    pointer-events:none !important;
    touch-action:none !important;
  }


  /*
   * Real setup UI must sit above decorative layers and receive touch.
   */
  .codi-mandatory-gate .r7-r31-codi-topbar,
  .codi-mandatory-gate .r7-r31-codi-footer,
  .codi-mandatory-gate .codi-mandatory-language,
  .codi-mandatory-gate .codi-mandatory-checking,
  .codi-mandatory-gate .codi-setup-conversation,
  .codi-mandatory-gate .codi-conversation-side,
  .codi-mandatory-gate .codi-conversation-main{
    position:relative !important;
    z-index:5 !important;
    pointer-events:auto !important;
  }


  /*
   * Language / first setup screen:
   * allow full content height instead of clipping to one viewport.
   */
  .codi-mandatory-gate .codi-mandatory-language{
    box-sizing:border-box !important;

    width:100% !important;
    max-width:100% !important;

    height:auto !important;
    min-height:100dvh !important;
    max-height:none !important;

    overflow:visible !important;

    touch-action:pan-y !important;
  }

  .codi-mandatory-gate .codi-mandatory-identity,
  .codi-mandatory-gate .codi-mandatory-language-panel{
    box-sizing:border-box !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    height:auto !important;
    max-height:none !important;

    overflow:visible !important;

    pointer-events:auto !important;
  }

  .codi-mandatory-gate .codi-mandatory-language-options{
    position:relative !important;
    z-index:10 !important;

    width:100% !important;
    max-width:100% !important;

    pointer-events:auto !important;
  }

  .codi-mandatory-gate .codi-mandatory-language-options button{
    position:relative !important;
    z-index:11 !important;

    pointer-events:auto !important;
    touch-action:manipulation !important;
  }


  /*
   * Conversation/setup steps:
   * do not trap content inside a clipped desktop-height shell.
   */
  .codi-mandatory-gate .codi-setup-conversation{
    box-sizing:border-box !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    height:auto !important;
    min-height:100dvh !important;
    max-height:none !important;

    overflow:visible !important;
  }

  .codi-mandatory-gate .codi-conversation-side{
    box-sizing:border-box !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    overflow-x:hidden !important;
    overflow-y:visible !important;

    touch-action:pan-y !important;
  }

  .codi-mandatory-gate .codi-conversation-main{
    box-sizing:border-box !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    overflow:visible !important;

    pointer-events:auto !important;
  }

  .codi-mandatory-gate .codi-conversation-messages{
    box-sizing:border-box !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    height:auto !important;
    min-height:240px !important;
    max-height:none !important;

    overflow:visible !important;

    pointer-events:auto !important;
  }


  /*
   * Composer and all interactive controls remain tappable.
   */
  .codi-mandatory-gate button,
  .codi-mandatory-gate a,
  .codi-mandatory-gate input,
  .codi-mandatory-gate textarea,
  .codi-mandatory-gate select,
  .codi-mandatory-gate label{
    pointer-events:auto !important;
  }

  .codi-mandatory-gate button,
  .codi-mandatory-gate a,
  .codi-mandatory-gate input,
  .codi-mandatory-gate textarea,
  .codi-mandatory-gate select{
    touch-action:manipulation !important;
  }

  .codi-mandatory-gate .codi-conversation-composer{
    box-sizing:border-box !important;

    width:100% !important;
    max-width:100% !important;

    position:relative !important;
    z-index:20 !important;

    pointer-events:auto !important;
  }


  /*
   * Product workspace already owns an internal scroll area.
   * Preserve it and make touch scrolling explicit.
   */
  .codi-mandatory-gate .codi-product-tools{
    max-height:calc(100dvh - 110px) !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;

    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;

    touch-action:pan-y !important;

    pointer-events:auto !important;
  }


  /*
   * Header stays available without covering the document flow.
   */
  .codi-mandatory-gate .r7-r31-codi-topbar{
    position:sticky !important;
    top:0 !important;

    width:100% !important;

    z-index:30 !important;
  }


  /*
   * Footer must not form a fixed invisible touch blocker.
   */
  .codi-mandatory-gate .r7-r31-codi-footer{
    position:relative !important;
    inset:auto !important;

    width:100% !important;

    pointer-events:none !important;
  }
}


/*
 * Narrow-phone safety:
 * keep controls inside viewport without changing design language.
 */
@media (max-width:540px){

  .codi-mandatory-gate .codi-mandatory-language,
  .codi-mandatory-gate .codi-setup-conversation{
    width:100% !important;
    max-width:100% !important;
  }

  .codi-mandatory-gate .codi-mandatory-language-options button,
  .codi-mandatory-gate .codi-conversation-composer,
  .codi-mandatory-gate .codi-conversation-composer textarea{
    max-width:100% !important;
  }
}

/* END CODSHIPX_AI_CRM_MOBILE_TOUCH_SCROLL_R2_20261006 */