/*
 * CODSHIPX AI CRM
 * AUTHENTICATED MOBILE FINAL R6-R1
 *
 * Scope:
 *   authenticated .app-shell only
 *   <= 820px only
 *
 * Does NOT target Codi onboarding/setup.
 */

@media (max-width:820px){

  /* ======================================================
     1. GLOBAL AUTHENTICATED SHELL GEOMETRY
     ====================================================== */

  body .app-shell,
  body .app-shell .app-main,
  body .app-shell .app-content{
    box-sizing:border-box !important;

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

  body .app-shell{
    overflow-x:hidden !important;
  }

  body .app-shell .app-main{
    margin-left:0 !important;
    overflow-x:hidden !important;
  }

  body .app-shell .app-content{
    margin:0 !important;

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

    overflow-x:hidden !important;
  }

  body .app-shell .app-content > *,
  body .app-shell .page-stack > *,
  body .app-shell .command-page > *{
    box-sizing:border-box !important;

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


  /* ======================================================
     2. TOPBAR
     ====================================================== */

  body .app-shell .topbar{
    box-sizing:border-box !important;

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

    min-height:58px !important;

    padding:
      7px
      9px !important;

    gap:7px !important;
  }

  body .app-shell .topbar-left{
    flex:
      1 1 auto !important;

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

    gap:7px !important;

    overflow:hidden !important;
  }

  body .app-shell .menu-button{
    flex:
      0 0
      38px !important;

    width:38px !important;
    min-width:38px !important;
    height:38px !important;

    margin:0 !important;
  }

  body .app-shell .page-ident{
    flex:
      1 1 auto !important;

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

    overflow:hidden !important;
  }

  body .app-shell .page-ident small,
  body .app-shell .page-ident strong{
    display:block !important;

    max-width:100% !important;

    overflow:hidden !important;

    white-space:nowrap !important;

    text-overflow:ellipsis !important;
  }

  body .app-shell .topbar-right{
    flex:
      0 0 auto !important;

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

    margin-left:auto !important;

    gap:5px !important;
  }

  body .app-shell .topbar-right > *{
    flex:
      0 0 auto !important;
  }


  /* ======================================================
     3. SIDEBAR / DRAWER
     ====================================================== */

  body .app-shell .sidebar{
    box-sizing:border-box !important;

    width:min(86vw,300px) !important;
    max-width:min(86vw,300px) !important;
    min-width:0 !important;

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

    -webkit-overflow-scrolling:touch !important;
  }


  /* ======================================================
     4. SHARED CRM PAGE CONTENT
     ====================================================== */

  body .app-shell .page-stack,
  body .app-shell .command-page,
  body .app-shell .cx-dashboard-v2,
  body .app-shell .command-grid,
  body .app-shell .module-head{
    box-sizing:border-box !important;

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

  body .app-shell .module-head{
    flex-wrap:wrap !important;

    gap:
      8px
      10px !important;
  }

  body .app-shell .module-head > *{
    min-width:0 !important;
    max-width:100% !important;
  }

  body .app-shell .module-head h1,
  body .app-shell .module-head h2{
    max-width:100% !important;

    overflow-wrap:anywhere !important;
  }


  /* ======================================================
     5. SHARED FORM CONTROLS
     ====================================================== */

  body .app-shell .app-content input,
  body .app-shell .app-content textarea,
  body .app-shell .app-content select{
    box-sizing:border-box !important;

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

  body .app-shell .app-content textarea{
    resize:vertical !important;
  }

  body .app-shell .app-content img,
  body .app-shell .app-content video,
  body .app-shell .app-content canvas{
    max-width:100% !important;
  }

  body .app-shell .app-content pre{
    max-width:100% !important;

    overflow-x:auto !important;

    -webkit-overflow-scrolling:touch !important;
  }


  /* ======================================================
     6. TABLES
     ====================================================== */

  body .app-shell
  .app-content:not(.inbox-content)
  table{
    display:block !important;

    box-sizing:border-box !important;

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

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

    -webkit-overflow-scrolling:touch !important;

    overscroll-behavior-x:contain !important;
  }


  /* ======================================================
     7. DIALOGS / MODALS
     ====================================================== */

  body .app-shell [role="dialog"]{
    box-sizing:border-box !important;

    width:min(
      calc(100vw - 20px),
      680px
    ) !important;

    max-width:calc(100vw - 20px) !important;

    max-height:calc(100dvh - 20px) !important;

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

    -webkit-overflow-scrolling:touch !important;
  }

  body .app-shell .modal,
  body .app-shell .crm-modal,
  body .app-shell .modal-card{
    box-sizing:border-box !important;

    max-width:calc(100vw - 20px) !important;
    max-height:calc(100dvh - 20px) !important;

    overflow:auto !important;
  }

  body .app-shell .drawer,
  body .app-shell .drawer-panel{
    box-sizing:border-box !important;

    width:min(92vw,420px) !important;
    max-width:92vw !important;

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


  /* ======================================================
     8. INBOX — OWN MOBILE LAYOUT
     ====================================================== */

  body .app-shell .app-content.inbox-content{
    box-sizing:border-box !important;

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

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

    overflow:hidden !important;
  }

  body .app-shell .inbox-shell{
    box-sizing:border-box !important;

    display:block !important;

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

    height:
      calc(
        100dvh
        - 132px
        - env(safe-area-inset-bottom)
      )
      !important;

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

    margin:0 !important;

    overflow:hidden !important;
  }

  body .app-shell .inbox-list{
    box-sizing:border-box !important;

    display:flex !important;
    flex-direction:column !important;

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

    height:100% !important;
    min-height:0 !important;

    margin:0 !important;

    overflow:hidden !important;
  }

  body .app-shell .inbox-list-head{
    box-sizing:border-box !important;

    flex:
      0 0 auto !important;

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

    gap:8px !important;
  }

  body .app-shell .inbox-list-head > div{
    min-width:0 !important;
  }

  body .app-shell .inbox-list-head h1{
    max-width:100% !important;

    overflow:hidden !important;

    white-space:nowrap !important;
    text-overflow:ellipsis !important;
  }


  /* Search */
  body .app-shell .inbox-filter{
    box-sizing:border-box !important;

    flex:
      0 0 auto !important;

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

  body .app-shell .inbox-filter input{
    flex:
      1 1 auto !important;

    width:auto !important;
    min-width:0 !important;
  }


  /*
   * Runtime has inline:
   * flexWrap:"nowrap"
   * and date input width/minWidth:124.
   *
   * Override only inside Inbox mobile UI.
   */
  body .app-shell
  .inbox-content
  .cx-r64-date-filter{
    box-sizing:border-box !important;

    display:flex !important;

    flex:
      0 0 auto !important;

    flex-wrap:wrap !important;

    align-items:center !important;

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

    column-gap:5px !important;
    row-gap:5px !important;

    padding:
      6px
      0
      4px !important;

    overflow:visible !important;
  }

  body .app-shell
  .inbox-content
  .cx-r64-date-filter > button{
    flex:
      0 0 auto !important;

    max-width:100% !important;

    padding-left:8px !important;
    padding-right:8px !important;
  }

  body .app-shell
  .inbox-content
  .cx-r64-date-filter
  > input[type="date"]{
    flex:
      1 1
      118px !important;

    width:auto !important;
    min-width:110px !important;
    max-width:100% !important;
  }


  /* Read / unread tabs */
  body .app-shell .inbox-tabs{
    box-sizing:border-box !important;

    display:flex !important;
    flex:
      0 0 auto !important;

    flex-wrap:wrap !important;

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

    gap:4px !important;
  }


  /* Conversation list owns the remaining height. */
  body .app-shell .conversation-stack{
    box-sizing:border-box !important;

    flex:
      1 1 auto !important;

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

    min-height:0 !important;

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

    -webkit-overflow-scrolling:touch !important;

    overscroll-behavior-y:contain !important;
  }

  body .app-shell .conversation-stack > button{
    box-sizing:border-box !important;

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

  body .app-shell .conversation-copy{
    min-width:0 !important;
    max-width:100% !important;
  }

  body .app-shell .conversation-copy strong,
  body .app-shell .conversation-copy small,
  body .app-shell .conversation-copy em{
    max-width:100% !important;

    overflow:hidden !important;

    text-overflow:ellipsis !important;
  }


  /* Empty state */
  body .app-shell .inbox-content .crm-empty{
    box-sizing:border-box !important;

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

    padding:
      24px
      14px !important;

    text-align:center !important;
  }


  /* ======================================================
     9. INBOX MOBILE CHAT
     ====================================================== */

  body .app-shell
  .inbox-shell:not(.mobile-chat)
  .chat-pane{
    display:none !important;
  }

  body .app-shell
  .inbox-shell.mobile-chat
  .inbox-list{
    display:none !important;
  }

  body .app-shell
  .inbox-shell.mobile-chat
  .chat-pane{
    box-sizing:border-box !important;

    display:flex !important;
    flex-direction:column !important;

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

    height:100% !important;
    min-height:0 !important;

    margin:0 !important;

    overflow:hidden !important;
  }

  body .app-shell .chat-head{
    box-sizing:border-box !important;

    display:grid !important;

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

    align-items:center !important;

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

    gap:
      7px
      8px !important;

    padding:
      8px
      9px !important;
  }

  body .app-shell .chat-head > div:not(.chat-head-actions){
    min-width:0 !important;
  }

  body .app-shell .chat-head > div:not(.chat-head-actions) strong,
  body .app-shell .chat-head > div:not(.chat-head-actions) small{
    max-width:100% !important;

    overflow:hidden !important;

    text-overflow:ellipsis !important;
  }

  body .app-shell .chat-head-actions{
    grid-column:
      1 / -1 !important;

    display:flex !important;

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

    gap:6px !important;

    padding-top:4px !important;

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

    -webkit-overflow-scrolling:touch !important;

    overscroll-behavior-x:contain !important;
  }

  body .app-shell .chat-head-actions > *{
    flex:
      0 0 auto !important;

    max-width:
      min(180px,72vw) !important;
  }


  /* ======================================================
     10. MOBILE BOTTOM DOCK
     ====================================================== */

  body .app-shell .mobile-dock{
    box-sizing:border-box !important;

    position:fixed !important;

    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    display:flex !important;

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

    min-height:58px !important;

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

    gap:2px !important;

    z-index:1000 !important;
  }

  body .app-shell .mobile-dock > button{
    box-sizing:border-box !important;

    position:relative !important;

    flex:
      1 1
      0 !important;

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

    padding:
      4px
      2px !important;
  }

  body .app-shell .mobile-dock > button span{
    max-width:100% !important;
  }

  body .app-shell .mobile-dock > button small{
    display:block !important;

    max-width:100% !important;

    overflow:hidden !important;

    white-space:nowrap !important;

    text-overflow:ellipsis !important;

    font-size:9.5px !important;
  }


  /* ======================================================
     11. SAFETY — NO AUTHENTICATED HORIZONTAL LEAK
     ====================================================== */

  body .app-shell .app-content,
  body .app-shell .page-stack,
  body .app-shell .command-page,
  body .app-shell .module-head,
  body .app-shell .inbox-shell{
    max-inline-size:100% !important;
  }
}


@media (max-width:540px){

  body .app-shell .app-content{
    padding-left:9px !important;
    padding-right:9px !important;
  }

  body .app-shell .topbar{
    padding-left:7px !important;
    padding-right:7px !important;
  }

  body .app-shell .module-head h1{
    font-size:
      clamp(24px,8.2vw,32px) !important;
  }

  body .app-shell
  .inbox-content
  .cx-r64-date-filter
  > input[type="date"]{
    flex:
      1 1
      100% !important;

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

  body .app-shell .chat-head{
    grid-template-columns:
      36px
      38px
      minmax(0,1fr)
      !important;
  }

  body .app-shell .mobile-dock > button small{
    font-size:9px !important;
  }
}


@media (max-width:360px){

  body .app-shell .app-content{
    padding-left:7px !important;
    padding-right:7px !important;
  }

  body .app-shell .topbar-right{
    max-width:38% !important;
  }

  body .app-shell
  .inbox-content
  .cx-r64-date-filter{
    column-gap:4px !important;
  }

  body .app-shell
  .inbox-content
  .cx-r64-date-filter > button{
    padding-left:7px !important;
    padding-right:7px !important;

    font-size:10.5px !important;
  }
}

/* END CODSHIPX_AI_CRM_AUTHENTICATED_MOBILE_FINAL_R6_R1 */