/*
 * CODSHIPX AI CRM
 * MOBILE CODI SETUP VISUAL GEOMETRY R3
 * 2026-10-06
 *
 * Visual/layout only.
 * R2 continues to own scrolling + touch.
 */

@media (max-width:820px){

  /*
   * Remove the duplicate floating setup topbar from the mobile
   * cinematic/setup surface. The Codi identity already exists
   * inside the setup screen itself.
   */
  .codi-mandatory-gate .r7-r31-codi-topbar{
    display:none !important;
  }


  /*
   * Decorative desktop geometry must never float across text
   * or outside the phone viewport.
   */
  .codi-mandatory-gate .codi-mandatory-stream,
  .codi-mandatory-gate .codi-mandatory-node{
    display:none !important;
  }

  .codi-mandatory-gate .codi-mandatory-grid{
    position:fixed !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    opacity:.28 !important;

    transform:none !important;
  }


  /*
   * LANGUAGE / FIRST SCREEN
   * Force true one-column mobile flow.
   */
  .codi-mandatory-gate .codi-mandatory-language{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;

    grid-template-columns:none !important;
    grid-template-rows:none !important;

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

    margin:0 !important;
    padding:0 !important;

    transform:none !important;
  }


  /*
   * Dark Codi introduction block.
   */
  .codi-mandatory-gate .codi-mandatory-identity{
    position:relative !important;

    inset:auto !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;

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

    min-height:0 !important;

    margin:0 !important;

    padding:
      34px
      24px
      38px !important;

    transform:none !important;

    overflow:hidden !important;
  }


  /*
   * Reactor stays inside the identity section instead of floating
   * over headings.
   */
  .codi-mandatory-gate .codi-mandatory-mini-reactor{
    position:relative !important;

    inset:auto !important;

    flex:0 0 auto !important;

    width:72px !important;
    height:72px !important;

    margin:0 0 20px !important;

    transform:none !important;
  }

  .codi-mandatory-gate
  .codi-mandatory-mini-reactor
  .codi-mandatory-logo{
    position:absolute !important;
    inset:8px !important;

    width:auto !important;
    height:auto !important;

    transform:none !important;
  }


  .codi-mandatory-gate .codi-mandatory-live{
    position:relative !important;

    inset:auto !important;

    margin:0 0 20px !important;

    transform:none !important;
  }

  .codi-mandatory-gate .codi-mandatory-identity h1{
    width:100% !important;

    margin:
      0
      0
      14px !important;

    font-size:clamp(38px,10.8vw,54px) !important;
    line-height:.98 !important;
    letter-spacing:-.055em !important;
  }

  .codi-mandatory-gate .codi-mandatory-identity > p{
    width:100% !important;
    max-width:520px !important;

    margin:
      0
      0
      28px !important;

    font-size:16px !important;
    line-height:1.55 !important;
  }

  .codi-mandatory-gate .codi-mandatory-signals{
    position:relative !important;

    inset:auto !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;

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

    gap:10px !important;

    margin:0 auto !important;

    transform:none !important;
  }

  .codi-mandatory-gate .codi-mandatory-signals > span{
    box-sizing:border-box !important;

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

    min-height:52px !important;

    justify-content:flex-start !important;
  }


  /*
   * White language selection panel.
   */
  .codi-mandatory-gate .codi-mandatory-language-panel{
    position:relative !important;

    inset:auto !important;

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

    min-height:auto !important;

    margin:0 !important;

    padding:
      38px
      24px
      48px !important;

    transform:none !important;

    border-radius:0 !important;
  }

  .codi-mandatory-gate .codi-mandatory-step{
    display:block !important;

    margin-bottom:28px !important;

    font-size:13px !important;
    line-height:1.2 !important;
  }

  .codi-mandatory-gate .codi-mandatory-language-panel h2{
    width:100% !important;
    max-width:560px !important;

    margin:
      0
      0
      22px !important;

    font-size:clamp(38px,10.2vw,52px) !important;
    line-height:.98 !important;
    letter-spacing:-.05em !important;
  }

  .codi-mandatory-gate .codi-mandatory-language-panel > p{
    width:100% !important;
    max-width:560px !important;

    margin:
      0
      0
      32px !important;

    font-size:16px !important;
    line-height:1.55 !important;
  }

  .codi-mandatory-gate .codi-mandatory-language-options{
    display:flex !important;
    flex-direction:column !important;

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

    margin:0 auto !important;

    gap:18px !important;
  }

  .codi-mandatory-gate .codi-mandatory-language-options button{
    box-sizing:border-box !important;

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

    min-height:128px !important;

    margin:0 !important;

    padding:
      20px
      20px !important;

    transform:none !important;
  }

  .codi-mandatory-gate .codi-mandatory-lock{
    display:block !important;

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

    margin:
      28px
      auto
      0 !important;

    text-align:center !important;
  }


  /*
   * CONVERSATION SCREEN
   *
   * Desktop is a two-column layout.
   * Mobile must become one clean vertical flow.
   */
  .codi-mandatory-gate .codi-setup-conversation{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;

    grid-template-columns:none !important;
    grid-template-rows:none !important;

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

    margin:0 !important;
    padding:0 !important;

    transform:none !important;
  }


  /*
   * Mobile summary/progress section.
   */
  .codi-mandatory-gate .codi-conversation-side{
    position:relative !important;

    inset:auto !important;

    flex:none !important;

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

    margin:0 !important;

    padding:
      28px
      20px
      28px !important;

    transform:none !important;

    border-radius:0 !important;
  }


  /*
   * Do not show the big reactor twice on the compact
   * conversation summary.
   */
  .codi-mandatory-gate
  .codi-conversation-side
  > .codi-mandatory-mini-reactor{
    display:none !important;
  }


  .codi-mandatory-gate .codi-conversation-side h2{
    width:100% !important;

    margin:
      0
      0
      10px !important;

    font-size:28px !important;
    line-height:1.06 !important;
  }

  .codi-mandatory-gate .codi-conversation-side > p{
    width:100% !important;
    max-width:100% !important;

    margin:
      0
      0
      20px !important;

    font-size:14px !important;
    line-height:1.55 !important;
  }


  /*
   * Progress card must remain completely inside the phone.
   */
  .codi-mandatory-gate .codi-conversation-progress{
    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;

    margin:
      18px
      0
      14px !important;

    padding:18px !important;

    transform:none !important;
  }

  .codi-mandatory-gate
  .codi-conversation-progress > div{
    box-sizing:border-box !important;

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

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

    gap:12px !important;
  }

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

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

    min-height:76px !important;

    margin:
      0
      0
      12px !important;

    padding:14px !important;
  }

  .codi-mandatory-gate .codi-products-launch,
  .codi-mandatory-gate .codi-review-launch{
    box-sizing:border-box !important;

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

    margin:
      12px
      0
      0 !important;

    transform:none !important;
  }


  /*
   * Actual Codi chat now comes directly below the progress area,
   * never off-screen to the right.
   */
  .codi-mandatory-gate .codi-conversation-main{
    position:relative !important;

    inset:auto !important;

    flex:none !important;

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

    margin:0 !important;

    transform:none !important;

    border-radius:0 !important;
  }

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

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

    padding:
      14px
      16px !important;
  }

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

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

    padding:
      16px
      14px
      20px !important;
  }

  .codi-mandatory-gate .codi-chat-row{
    max-width:100% !important;
  }

  .codi-mandatory-gate .codi-chat-row > div{
    max-width:min(88%,520px) !important;
  }

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

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

    padding:
      12px
      14px
      calc(18px + env(safe-area-inset-bottom))
      !important;
  }


  /*
   * Footer belongs to document flow, not floating across content.
   */
  .codi-mandatory-gate .r7-r31-codi-footer{
    position:relative !important;

    inset:auto !important;

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

    min-height:42px !important;

    margin:0 !important;

    padding:
      12px
      18px
      calc(12px + env(safe-area-inset-bottom))
      !important;

    transform:none !important;

    justify-content:center !important;
    flex-wrap:wrap !important;

    opacity:.72 !important;
  }
}


/*
 * Narrow phones
 */
@media (max-width:540px){

  .codi-mandatory-gate .codi-mandatory-identity{
    padding:
      28px
      20px
      32px !important;
  }

  .codi-mandatory-gate .codi-mandatory-language-panel{
    padding:
      32px
      20px
      42px !important;
  }

  .codi-mandatory-gate .codi-mandatory-identity h1{
    font-size:clamp(36px,11.5vw,48px) !important;
  }

  .codi-mandatory-gate .codi-mandatory-language-panel h2{
    font-size:clamp(36px,10.8vw,46px) !important;
  }

  .codi-mandatory-gate .codi-mandatory-language-options button{
    min-height:116px !important;

    padding:
      17px
      16px !important;
  }

  .codi-mandatory-gate .codi-conversation-side{
    padding:
      24px
      16px !important;
  }

  .codi-mandatory-gate .codi-conversation-progress{
    padding:15px !important;
  }
}


/*
 * Very narrow devices.
 */
@media (max-width:390px){

  .codi-mandatory-gate .codi-mandatory-identity,
  .codi-mandatory-gate .codi-mandatory-language-panel{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .codi-mandatory-gate .codi-mandatory-language-panel h2{
    font-size:35px !important;
  }

  .codi-mandatory-gate .codi-mandatory-identity h1{
    font-size:38px !important;
  }
}

/* END CODSHIPX_AI_CRM_MOBILE_SETUP_GEOMETRY_R3_20261006 */