@media(max-width:768px){
  :root{--nav-w:0px;--inbox-w:100%;--crm-w:100%}
  #app{flex-direction:column;height:100vh;height:100dvh;height:-webkit-fill-available}
  .screen.active{min-height:0}
  .desktop-nav{display:none}
  .mobile-tabs{display:flex}
  .inbox-panel,.chat-panel,.crm-panel,.contacts-panel,.calls-panel,.settings-panel,.keypad-panel{width:100%;border:none;max-width:none;min-width:0;flex:none!important}
}

@media(min-width:769px){
  .mobile-tabs{display:none}
  .back-btn{display:none}
  #profile-back{display:inline-block}
}

/* ═══ MOBILE UX FIXES ═══ */

@media(max-width:768px){
  #view-chat{height:100vh!important;height:100dvh!important;max-height:-webkit-fill-available;flex:none!important}
  .chat-messages{flex:none!important;height:calc(100vh - 96px - var(--safe-t));height:calc(100dvh - 96px - var(--safe-t));overflow-y:auto!important;-webkit-overflow-scrolling:touch;padding-bottom:0}
  .chat-messages::after{content:"";display:block;min-height:calc(260px + var(--safe-b));flex-shrink:0}
  #view-inbox{height:100vh!important;height:100dvh!important;max-height:-webkit-fill-available;flex:none!important}
  .inbox-list{flex:none!important;height:calc(100vh - 150px - var(--safe-t));height:calc(100dvh - 150px - var(--safe-t));overflow-y:auto!important;-webkit-overflow-scrolling:touch;padding-bottom:calc(100px + var(--safe-b))}
  #view-contacts{height:100vh!important;height:100dvh!important;max-height:-webkit-fill-available;flex:none!important}
  .contacts-list{flex:none!important;height:calc(100vh - 200px - var(--safe-t));height:calc(100dvh - 200px - var(--safe-t));overflow-y:auto!important;-webkit-overflow-scrolling:touch;padding-bottom:calc(100px + var(--safe-b))}
  #view-calls{height:100vh!important;height:100dvh!important;max-height:-webkit-fill-available;flex:none!important}
  .calls-list{flex:none!important;height:calc(100vh - 56px - var(--safe-t));height:calc(100dvh - 56px - var(--safe-t));overflow-y:auto!important;-webkit-overflow-scrolling:touch;padding-bottom:calc(100px + var(--safe-b))}
  #view-settings{height:100vh!important;height:100dvh!important;max-height:-webkit-fill-available;flex:none!important}
  .settings-list{flex:none!important;height:calc(100vh - var(--safe-t));height:calc(100dvh - var(--safe-t));overflow-y:auto!important;-webkit-overflow-scrolling:touch;padding:var(--space-6);padding-bottom:calc(100px + var(--safe-b))}
  /* Swipe action buttons behind convo items */
  .convo-swipe-wrapper{position:relative;overflow:hidden;touch-action:pan-y}
  .convo-swipe-actions{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:stretch;transform:translateX(100%);transition:none}
  .convo-swipe-actions.visible{transform:translateX(0)}
  .swipe-action{display:flex;align-items:center;justify-content:center;width:72px;color:var(--white);font-size:var(--fs-xs);font-weight:600;flex-direction:column;gap:var(--space-1);border:none;cursor:pointer}
  .swipe-action.swipe-pin{background:var(--role-owner)}
  .swipe-action.swipe-read{background:var(--blue)}
  .swipe-action.swipe-delete{background:var(--danger)}
}

@media(max-width:768px){
  .call-swipe-wrapper{position:relative;overflow:hidden;touch-action:pan-y}
  .call-swipe-actions{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:stretch;transform:translateX(100%);transition:none}
  .call-swipe-actions.visible{transform:translateX(0)}
  .call-item{transition:transform 0.15s ease-out}
}

@media(min-width:769px){.topbar{padding-top:var(--space-3)}}

@media(min-width:769px){.search-box{display:none}}

@media(min-width:769px){.fab{bottom:20px}}

@media(min-width:769px){
  .mob-profile-header{display:none}
  .mob-header-btn#mob-search-btn{display:none}
  .mob-header-btn#mob-settings-btn{display:none}
  .mob-toggle-cards{display:none}
  .mob-compose-fab{display:none}
  #inbox-switcher{display:flex}
}

@media(max-width:768px){
  .calls-inline-list{display:none}
}

@media(min-width:769px){
  .inbox-topbar-mobile{display:none}
  .inbox-filters-mobile{display:none}
}

@media(min-width:769px){.inbox-list{padding-bottom:0}}

@media(min-width:769px){.chat-header{padding-top:var(--space-3)}}

@media(min-width:769px){.msg-bubble{max-width:65%;font-size:var(--fs-sm)}}

@media(min-width:769px){.chat-input-bar{padding-bottom:var(--space-3)}}

@media(max-width:1200px) and (min-width:1001px){.crm-panel{flex-basis:220px;min-width:180px;max-width:220px}.inbox-panel{flex-basis:260px;min-width:220px}}

@media(max-width:1000px) and (min-width:851px){.crm-panel{display:none}.inbox-panel{flex-basis:260px;min-width:220px}}

@media(max-width:850px) and (min-width:769px){.crm-panel{display:none}.inbox-panel{flex-basis:220px;min-width:180px}}

@media(min-width:769px) and (max-width:1100px){.chat-panel{min-width:280px}}

@media(min-width:769px){#view-contacts{flex-direction:row}.contacts-list-panel{flex:1;min-width:0;display:flex;flex-direction:column;border-right:1px solid var(--border)}.contacts-detail-panel{width:var(--crm-w);min-width:0;max-width:360px;flex-shrink:1;overflow-y:auto;background:var(--bg);display:flex;flex-direction:column;overflow-x:hidden}.contacts-detail-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-3)}}

@media(max-width:768px){.contacts-detail-panel{display:none}.contacts-list-panel{width:100%}}

@media(min-width:769px){.contacts-list{padding-bottom:0}}

@media(min-width:769px){.contacts-desk-header{display:flex}.contacts-topbar-mobile{display:none}.contacts-search-mobile{display:none}.contacts-filters-mobile{display:none}.contacts-iebar-mobile{display:none}}

@media(min-width:769px){.calls-fab{bottom:20px}}

@media(max-width:768px){.gsearch-overlay{padding-top:0}}

@media(max-width:768px){.gsearch-box{max-width:100%;max-height:100vh;border-radius:0;height:100%}}

@media(min-width:769px){
  .settings-panel{flex-direction:row}
  .settings-nav{width:220px;flex-shrink:0;background:var(--bg-2);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;padding:var(--space-4) var(--space-2)}
  .settings-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--space-8) var(--space-10);min-width:0;max-width:100%;box-sizing:border-box}
  .settings-list{display:none}
}

@media(max-width:768px){
  .settings-nav{display:none}
  .settings-content{display:none}
}

@media(max-width:500px){.emoji-picker{width:min(320px,90vw);height:380px}}

@media(max-width:768px){
  .team-panel{width:100%;max-width:100%;height:100%;max-height:100%;border-radius:0}
  .team-invite-modal{max-width:100%;border-radius:var(--radius-md)}
  .team-menu-btn{opacity:1}
}

/* MOBILE PREMIUM REDESIGN — Quo-inspired                         */

@media(max-width:768px){

  /* ─── A. MOBILE TAB BAR (Bottom Navigation) ─── */
  .mobile-tabs{
    position:fixed;bottom:0;left:0;right:0;
    height:auto;
    padding:var(--space-2) 0;
    padding-bottom:calc(8px + var(--safe-b));
    background:var(--bg);
    border-top:1px solid var(--border);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    z-index:50;display:none;
    align-items:stretch;
    gap:0;
  }
  .mob-tab{
    flex:1;display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    gap:var(--space-1);
    min-height:44px;min-width:44px;
    font-size:var(--fs-2xs);font-weight:500;
    color:var(--text-3);
    cursor:pointer;position:relative;
    background:none;border:none;
    padding:var(--space-1) 0;
    -webkit-tap-highlight-color:transparent;
    transition:color .12s ease;
  }
  .mob-tab-icon{
    width:24px;height:24px;
    display:flex;align-items:center;justify-content:center;
    position:relative;
  }
  .mob-tab-icon svg{
    width:22px;height:22px;
    stroke:currentColor;
    transition:background .12s ease,color .12s ease;
  }
  .mob-tab.active .mob-tab-icon svg{
    stroke:var(--text);
    stroke-width:2.2;
  }
  .mob-tab-label{
    font-size:var(--fs-2xs);
    font-weight:500;
    letter-spacing:.2px;
    line-height:1;
  }
  /* Active indicator dot */
  .mob-tab.active::before{
    content:'';
    position:absolute;
    top:2px;
    left:50%;transform:translateX(-50%);
    width:4px;height:4px;
    border-radius:50%;
    background:var(--text);
  }
  .mob-tab .badge{
    position:absolute;
    top:2px;right:calc(50% - 18px);
    background:var(--danger);color:var(--white);
    font-size:var(--fs-2xs);font-weight:700;
    border-radius:var(--radius-sm);padding:0 var(--space-1);
    min-width:16px;height:16px;
    line-height:16px;text-align:center;
  }

  /* ─── B. MOBILE TOPBAR/HEADER ─── */
  .topbar{
    display:flex;align-items:center;gap:var(--space-3);
    height:56px;
    padding:0 var(--space-4);
    padding-top:var(--safe-t);
    background:var(--bg);
    border-bottom:1px solid var(--border);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    flex-shrink:0;
  }
  .topbar h2{
    font-size:var(--fs-lg);font-weight:600;
    flex:1;
    letter-spacing:-.2px;
  }
  .back-btn{
    background:none;border:none;
    color:var(--brand);
    font-size:var(--fs-2xl);font-weight:600;
    padding:0;
    width:44px;height:44px;
    min-width:44px;min-height:44px;
    display:flex;align-items:center;justify-content:center;
    margin-left:-8px;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .icon-btn{
    width:44px;height:44px;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:var(--fs-base);
    color:var(--text-3);
    cursor:pointer;
    background:transparent;
    border:1px solid var(--active-overlay);
    min-height:44px;min-width:44px;
    transition:background .12s ease,color .12s ease;
  }
  .chat-header{
    display:flex;align-items:center;gap:var(--space-3);
    height:56px;
    padding:0 var(--space-4);
    padding-top:calc(12px + var(--safe-t));
    border-bottom:1px solid var(--border);
    flex-shrink:0;
    background:var(--bg);
  }
  .chat-name{font-size:var(--fs-md);font-weight:600;letter-spacing:-.2px}
  .chat-sub{font-size:var(--fs-2xs);color:var(--text-3);margin-top:1px}

  /* ─── C. CONVERSATION LIST (Inbox) ─── */
  .convo-item{
    display:flex;align-items:flex-start;
    gap:var(--space-3);
    padding:var(--space-3) var(--space-4);
    min-height:68px;
    border-bottom:1px solid var(--border-lighter);
    cursor:pointer;
    transition:background .12s ease;
    position:relative;
  }
  .convo-item::after{display:none}
  .convo-item.active{
    background:var(--brand-bg);
    border-left:none;
    box-shadow:none;
  }
  .convo-item.pinned{
    border-left:none;
    background:var(--brand-bg);
  }
  .convo-body{flex:1;min-width:0;padding-top:1px}
  .convo-top{display:flex;justify-content:space-between;align-items:baseline}
  .convo-time{font-size:var(--fs-2xs);color:var(--text-3);flex-shrink:0;font-variant-numeric:tabular-nums}
  .convo-msg{font-size:var(--fs-xs);color:var(--text-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
  .convo-badge{
    font-size:var(--fs-xs);font-weight:700;
    min-width:20px;height:20px;
    line-height:20px;text-align:center;
    border-radius:var(--radius-md);
    padding:0 var(--space-2);
    flex-shrink:0;
  }

  /* Inbox filters */
  .inbox-filters{
    display:flex;gap:var(--space-2);
    padding:var(--space-2) var(--space-4);
    overflow-x:auto;
    flex-shrink:0;
    border-bottom:1px solid var(--border);
    -webkit-overflow-scrolling:touch;
  }
  .inbox-filters::-webkit-scrollbar{display:none}

  /* Search box */
  .search-box{
    margin:var(--space-2) var(--space-4);
    background:var(--bg-3);
    border-radius:var(--radius-md);
    padding:var(--space-2) var(--space-3);
    display:flex;
    align-items:center;gap:var(--space-3);
    border:1px solid transparent;
  }
  .search-box input{font-size:var(--fs-md)}

  /* ─── D. CHAT BUBBLES (Messages) ─── */
  .msg-bubble{
    max-width:80%;
    padding:var(--space-3) var(--space-4);
    font-size:var(--fs-md);line-height:1.4;
    word-wrap:break-word;
  }
  .msg-bubble.inbound{
    border-radius:var(--radius-xl) var(--radius-xl) var(--radius-xl) var(--radius-xs);
    border:1px solid var(--hover-overlay);
  }
  .msg-bubble.outbound{
    border-radius:var(--radius-xl) var(--radius-xl) var(--radius-xs) var(--radius-xl);
  }
  .msg-meta{font-size:var(--fs-2xs);margin-top:2px;opacity:.7}
  .msg-date{
    font-size:var(--fs-xs);color:var(--text-3);
    padding:var(--space-3) 0;
    font-weight:500;
    letter-spacing:.3px;
  }

  /* CRM strip: hide on mobile chat */
  .crm-strip{display:none}

  /* ─── E. COMPOSER BAR (Message Input) ─── */
  .chat-input-bar{
    position:fixed;
    bottom:calc(56px + var(--safe-b));
    left:0;right:0;
    z-index:50;
    background:var(--bg);
    border-top:1px solid var(--border);
    padding:var(--space-2) var(--space-3);
  }
  .msg-composer{
    border-radius:0;
    padding:0;
    border-width:1px;
  }
  .msg-composer textarea,
  #chat-input{
    border-radius:var(--radius-xl);
    min-height:44px;
    padding:var(--space-2) var(--space-4);
    font-size:var(--fs-md);
  }
  .msg-toolbar{padding-top:var(--space-1)}
  .msg-tbtn{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:var(--radius-sm)}
  .msg-send,
  #chat-send-btn{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:50%}

  /* ─── F. CONTACTS VIEW ─── */
  .contact-item{
    display:flex;align-items:center;gap:var(--space-3);
    padding:var(--space-3) var(--space-4);
    min-height:56px;
    border-bottom:1px solid var(--border-lighter);
    cursor:pointer;
    transition:background .12s ease;
    position:relative;
  }
  .contact-item .avatar{width:40px;height:40px;font-size:var(--fs-md)}
  .contact-item .contact-name{font-size:var(--fs-md);font-weight:500}
  .contact-item .contact-phone{font-size:var(--fs-sm);color:var(--text-3)}
  .contact-alpha{
    font-size:var(--fs-sm);font-weight:600;
    color:var(--text-3);
    padding:var(--space-2) var(--space-4);
    background:var(--bg-2);
    border-bottom:1px solid var(--border);
    position:sticky;top:0;z-index:1;
  }
  .contacts-list{
    padding-bottom:calc(100px + var(--safe-b));
  }

  /* ─── G. SETTINGS VIEW (Mobile) ─── */
  .settings-card{
    background:var(--bg-2);
    border-radius:var(--radius-md);
    border:1px solid var(--border);
    overflow:hidden;
    margin-bottom:var(--space-4);
  }
  .settings-row{
    display:flex;align-items:center;
    height:44px;
    padding:0 var(--space-4);
    cursor:pointer;
    transition:background .12s ease;
    border-bottom:none;
    position:relative;
  }
  .settings-row + .settings-row::before{content:'';position:absolute;top:0;left:16px;right:0;height:0.5px;background:var(--border)}
  .settings-row:last-child::before{display:none}
  .settings-row-label{font-size:var(--fs-md);font-weight:400}
  .settings-row-value{font-size:var(--fs-base)}
  .settings-row-chevron{font-size:var(--fs-md);color:var(--text-3)}
  .settings-section-label{
    font-size:var(--fs-sm);font-weight:600;
    color:var(--text-3);
    text-transform:uppercase;
    letter-spacing:.5px;
    padding:0 0 var(--space-2);
    margin-top:var(--space-4);
  }
  .settings-title{
    font-size:var(--fs-3xl-minus);font-weight:700;
    padding-bottom:var(--space-5);
    letter-spacing:-.5px;
  }

  /* ─── H. GENERAL MOBILE POLISH ─── */

  /* Remove hover effects on mobile */
  .convo-item:hover{background:transparent}
  .contact-item:hover{background:transparent}
  .settings-row:hover{background:transparent}
  .mob-tab:hover{background:transparent}

  /* Active/tap feedback */
  .convo-item:active{background:var(--bg-2)}
  .contact-item:active{background:var(--bg-2);transform:none}
  .settings-row:active{background:var(--bg-2);transform:none}

  /* FAB improvements */
  .fab{
    bottom:calc(72px + var(--safe-b));
    right:16px;
    width:52px;height:52px;
    border-radius:var(--radius-lg);
    font-size:var(--fs-2xl);
  }
  .calls-fab{
    bottom:calc(72px + var(--safe-b));
    right:16px;
    width:52px;height:52px;
    border-radius:var(--radius-lg);
  }

  /* Inbox topbar mobile */
  .inbox-topbar-mobile{
    height:56px;
    padding:0 var(--space-4);
    padding-top:var(--safe-t);
    display:flex;align-items:center;
    gap:var(--space-3);
    background:var(--bg);
    border-bottom:1px solid var(--border);
    backdrop-filter:none;
    position:relative;
  }

  /* Smoother inbox list scroll */
  .inbox-list{
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
  }

  /* Better dropdown */
  .inbox-dropdown{
    border-radius:0 0 var(--radius-lg) var(--radius-lg);
    border-top:1px solid var(--border);
    box-shadow:var(--shadow-lg);
  }
  .inbox-dd-item{
    padding:var(--space-4) var(--space-4);
    min-height:48px;
  }

  /* Compose view polish */
  .compose-input{
    border-radius:var(--radius-md);
    padding:var(--space-4);
    font-size:var(--fs-md);
  }
  .compose-send{
    border-radius:var(--radius-lg);
    padding:var(--space-4);
    font-size:var(--fs-md);font-weight:600;
  }

  /* Calls list polish */
  .call-item{
    padding:var(--space-3) var(--space-4);
    min-height:56px;
    border-bottom:1px solid var(--border);
  }
  .call-icon{
    width:40px;height:40px;
    border-radius:50%;
    font-size:var(--fs-lg);
  }
  .call-name{font-size:var(--fs-md);font-weight:600}
  .call-detail{font-size:var(--fs-sm)}

  /* Profile view */
  .np-row{min-height:44px;padding:var(--space-2) var(--space-2)}
  .np-label{font-size:var(--fs-sm)}
  .np-val{font-size:var(--fs-base)}

  /* Toast on mobile */
  .toast{
    top:auto;
    bottom:calc(80px + var(--safe-b));
    border-radius:var(--radius-md);
    font-size:var(--fs-base);
    padding:var(--space-3) var(--space-5);
    max-width:calc(100vw - 32px);
    transform:translateX(-50%) translateY(80px);
  }

  /* Global search mobile */
  .gsearch-box{
    border-radius:0;
    height:100%;max-height:100vh;
  }
  .gsearch-input{font-size:var(--fs-md)}
  .gsearch-result{padding:var(--space-4) var(--space-4);min-height:56px}

  /* Pill touch targets */
  .pill{
    padding:var(--space-2) var(--space-4);
    font-size:var(--fs-sm);
    min-height:44px;
    display:inline-flex;align-items:center;
  }

  /* Better list heights accounting for tab bar */
  .inbox-list{
    height:calc(100dvh - 150px - var(--safe-t));
    padding-bottom:calc(80px + var(--safe-b));
  }
  .contacts-list{
    height:calc(100dvh - 200px - var(--safe-t));
    padding-bottom:calc(80px + var(--safe-b));
  }
  .calls-list{
    height:calc(100dvh - 56px - var(--safe-t));
    padding-bottom:calc(80px + var(--safe-b));
  }
  .chat-messages{
    height:calc(100dvh - 96px - var(--safe-t));
    padding-bottom:0;
  }
  .chat-messages::after{
    min-height:calc(260px + var(--safe-b));
  }
  .settings-list{
    height:calc(100dvh - var(--safe-t));
    padding:var(--space-5) var(--space-4);
    padding-bottom:calc(80px + var(--safe-b));
  }

  /* Context menu - ensure tap targets */
  .ctx-menu-item{
    min-height:44px;
    padding:var(--space-3) var(--space-4);
    font-size:var(--fs-md);
  }

  /* Swipe actions - bigger targets */
  .swipe-action{
    width:76px;
    font-size:var(--fs-sm);
  }
  .swipe-action .swipe-icon{font-size:var(--fs-xl)}

  /* Template overlay mobile */
  .tmpl-panel{
    width:100%;max-width:100%;
    height:100%;max-height:100%;
    border-radius:0;
  }

  /* ─── Mobile input font-size (prevent iOS zoom) ─── */
  input, textarea, select { font-size: 16px ; }

  /* ─── Mobile touch target: filter pills ─── */
  .inbox-filter-pill { min-height: 44px; display: inline-flex; align-items: center; }

  /* ─── Overscroll containment ─── */
  .chat-messages, .contacts-list, .calls-list, .settings-list, .compose-body, .crm-panel, .tmpl-list, .team-list, .gsearch-results { overscroll-behavior-y: contain; }

  /* ─── User-selectable text ─── */
  .msg-bubble, .crm-big-phone, .convo-name, .contact-phone { user-select: text; -webkit-user-select: text; }

  /* ─── Hide PWA drag bar on mobile ─── */
  #pwa-drag-bar { display: none; }
}

@media(max-width:768px){
  /* ─── REDESIGNED: Mobile Tab Bar ─── */
  .mobile-tabs{
    position:fixed;bottom:0;left:0;right:0;
    height:52px;
    padding:0;
    padding-bottom:var(--safe-b);
    background:var(--bg);
    border-top:1px solid var(--border);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    z-index:50;display:none;
    align-items:stretch;
    gap:0;
  }
  .mob-tab{
    flex:1;display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    gap:var(--space-1);
    min-height:44px;min-width:44px;
    font-size:var(--fs-2xs);font-weight:500;
    letter-spacing:0.3px;
    color:var(--text-3);
    cursor:pointer;position:relative;
    background:none;border:none;
    padding:var(--space-1) 0;
    -webkit-tap-highlight-color:transparent;
    transition:color .12s ease;
  }
  .mob-tab.active{color:var(--text)}
  .mob-tab .ico{display:none}
  .mob-tab-icon{
    width:22px;height:22px;
    display:flex;align-items:center;justify-content:center;
    position:relative;
  }
  .mob-tab-icon svg{
    width:20px;height:20px;
    stroke:currentColor;
    transition:background .12s ease,color .12s ease;
  }
  .mob-tab.active .mob-tab-icon svg{
    stroke:var(--text);
    stroke-width:2;
  }
  .mob-tab-label{
    font-size:var(--fs-2xs);
    font-weight:500;
    letter-spacing:0.3px;
    line-height:1;
  }
  /* Remove old active dot indicator */
  .mob-tab.active::before{display:none}
  .mob-tab .badge{
    position:absolute;
    top:0px;right:calc(50% - 18px);
    background:var(--danger);color:var(--white);
    font-size:10px;font-weight:700;
    border-radius:var(--radius-sm);padding:0 var(--space-1);
    min-width:16px;height:16px;
    line-height:16px;text-align:center;
  }

  /* ─── REDESIGNED: Profile Header ─── */
  .mob-profile-header{
    display:flex;
    align-items:center;
    gap:var(--space-2);
  }
  .mob-profile-info{
    display:flex;
    flex-direction:column;
    gap:var(--space-1);
  }
  .mob-profile-name{
    font-size:var(--fs-lg);
    font-weight:700;
    letter-spacing:-.3px;
    color:var(--text);
  }
  .mob-profile-phone{
    font-size:var(--fs-sm);
    color:var(--text-3);
    font-weight:400;
  }
  .mob-header-btn{
    width:44px;height:44px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    color:var(--text-3);
    background:none;border:none;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .mob-header-btn:active{background:var(--bg-2)}
  .mob-header-btn svg{color:var(--text-3)}

  /* ─── REDESIGNED: Hide tag pills on conversation rows ─── */
  .convo-crm{display:none;gap:var(--space-1);margin-top:var(--space-1);flex-wrap:wrap}

  /* ─── REDESIGNED: Chats/Calls toggle cards ─── */
  .inbox-filters-mobile{display:none}
  .mob-toggle-cards{
    display:flex;
    gap:var(--space-2);
    padding:var(--space-3) var(--space-4);
    flex-shrink:0;
  }
  .mob-toggle-card{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    padding:var(--space-3) var(--space-4);
    border-radius:var(--radius-md);
    background:var(--hover-overlay);
    border:1px solid var(--overlay-light);
    cursor:pointer;
    transition:background .12s ease,color .12s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .mob-toggle-card.active{
    background:var(--active-overlay);
    border-color:var(--overlay-medium);
    color:var(--white);
  }
  .mob-toggle-card:not(.active){
    color:var(--text-3);
  }
  .mob-toggle-icon{
    margin-bottom:var(--space-1);
    opacity:.6;
  }
  .mob-toggle-card.active .mob-toggle-icon{
    opacity:1;
  }
  .mob-toggle-label{
    font-size:var(--fs-base);
    font-weight:700;
  }
  .mob-toggle-count{
    font-size:var(--fs-xs);
    font-weight:400;
    opacity:0.5;
  }

  /* ─── REDESIGNED: Compose FAB ─── */
  .mob-compose-fab{
    position:fixed;
    bottom:calc(70px + var(--safe-b));
    right:20px;
    width:52px;height:52px;
    background:var(--brand);
    border:none;border-radius:50%;
    color:var(--white);
    display:flex;align-items:center;justify-content:center;
    z-index:50;
    cursor:pointer;
    box-shadow:var(--shadow-md);
    -webkit-tap-highlight-color:transparent;
    transition:transform .15s ease,box-shadow .15s ease;
  }
  .mob-compose-fab:active{opacity:.85}

  /* Hide old FAB on mobile (we use new one) */
  .fab{display:none}

  /* ─── REDESIGNED: Inbox topbar styling ─── */
  .inbox-topbar-mobile{
    height:56px;
    padding:0 var(--space-4);
    padding-top:var(--safe-t);
    display:flex;align-items:center;
    gap:var(--space-2);
    background:var(--bg);
    border-bottom:1px solid var(--border);
    backdrop-filter:none;
    position:relative;
  }
  .inbox-name{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.2px}
  .inbox-arrow{font-size:var(--fs-sm);color:var(--text-3)}
}

@media(max-width:768px){.epp-modal{width:calc(100% - 32px);max-width:360px}}

@media(hover:none){.stmpl-actions{opacity:1}}

/* ═══ MOBILE FIX PASS — March 17, 2026 ═══ */

@media(max-width:768px){
  /* Settings back button alignment */
  .settings-title{display:flex;align-items:center}
  .settings-title .back-btn{flex-shrink:0}

  /* Inbox dropdown full-width on mobile */
  .inbox-dropdown{z-index:50;background:var(--bg-2);box-shadow:var(--shadow-lg)}
  .inbox-dropdown.open{display:block}

  /* Hide mob-profile-header arrow on desktop (safety) */
  .mob-profile-header .inbox-arrow{display:inline}

  /* Contact profile: ensure scrollable */
  #view-contact-profile{height:100dvh!important;max-height:-webkit-fill-available;flex:none!important;flex-direction:column}
  #profile-content{height:calc(100dvh - 56px - var(--safe-t));flex:none!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;padding-bottom:calc(100px + var(--safe-b))}

  /* Compose view: ensure scrollable */
  #view-compose{height:100dvh!important;max-height:-webkit-fill-available;flex:none!important;flex-direction:column}
  .compose-body{flex:none!important;height:calc(100dvh - 56px - var(--safe-t));overflow-y:auto!important;-webkit-overflow-scrolling:touch;padding-bottom:calc(100px + var(--safe-b));padding:var(--space-4)}

  /* Internal chat: scrollable on mobile */
  .ic-conv-row{padding:var(--space-3) var(--space-4);min-height:56px}

  /* Dialpad overlay: full screen on mobile */
  .dialpad-overlay{padding:0}
  .dialpad{width:100%;max-width:100%;border-radius:0;height:100%}

  /* Hide desktop elements that leak on mobile */
  .inbox-desk-header{display:none}
  .contacts-desk-header{display:none}

  /* Mobile settings: iOS card spacing */
  .settings-card{margin-bottom:var(--space-3)}
  .settings-inner{padding-bottom:80px}

  /* Ensure chat input bar doesn't overlap tab bar */
  .chat-input-bar{position:fixed;bottom:0;left:0;right:0;z-index:50;background:var(--bg);border-top:1px solid var(--border);padding:var(--space-2) var(--space-3);padding-bottom:calc(8px + var(--safe-b))}

  /* Hide tab bar when in chat view */
  body.chat-active .mobile-tabs{display:none}
}

@media(max-width:768px){.inbox-panel{max-width:none;min-width:0;flex:1}}

@media(max-width:768px){.crm-panel{max-width:none;min-width:0}}

@media(max-width:768px){
  .convo-item{transition:transform 0.15s ease-out;padding:var(--space-4) var(--space-4);min-height:64px}
  .convo-av{width:42px;height:42px;font-size:var(--fs-md);flex-shrink:0}
  .convo-name{font-size:var(--fs-md);font-weight:600;letter-spacing:-.1px}
}

@media(max-width:768px){.dialpad-overlay{display:none}.dialpad-overlay.open{display:none}}

/* ═══ SMALL SCREEN (iPhone SE / 375px) ═══ */

@media(max-width:375px){
  .mob-profile-name{font-size:var(--fs-md)}
  .mob-profile-phone{font-size:var(--fs-xs)}
  .settings-title{font-size:var(--fs-2xl-plus)}
  .convo-item{padding:var(--space-3) var(--space-3)}
  .contact-item{padding:var(--space-3)}
  .settings-list{padding:var(--space-4) var(--space-3)}
  .inbox-topbar-mobile{padding:0 var(--space-3);padding-top:var(--safe-t)}
  .chat-header{padding:0 var(--space-3);padding-top:calc(8px + var(--safe-t))}
  .chat-input-bar{padding:var(--space-2) var(--space-2)}
  .mob-toggle-card{padding:var(--space-3)}
  .compose-input{padding:var(--space-3)}
  .pill{padding:var(--space-2) var(--space-3);font-size:var(--fs-xs)}
  .msg-bubble{max-width:85%;padding:var(--space-3)}
  .convo-badge{min-width:18px;height:18px;line-height:18px;padding:0 var(--space-2)}
  .mob-compose-fab{width:48px;height:48px;right:16px;bottom:calc(66px + var(--safe-b))}
  .avatar-picker-card{width:calc(100% - 32px);max-width:none}
  .profile-row-value{max-width:min(200px,55vw)}
}

/* ═══ TOUCH DEVICE TARGETS (pointer: coarse) ═══ */

@media(pointer:coarse){
  .icon-btn{min-width:44px;min-height:44px}
  .settings-toggle{min-height:44px;min-width:44px}
  .pill{min-height:44px}
  .inbox-filter-pill{min-height:44px}
  .inbox-dd-item{min-height:48px}
  .settings-row{min-height:48px}
  .contact-item{min-height:48px}
  .convo-item{min-height:64px}
  .call-item{min-height:56px}
  .ctx-menu-item{min-height:48px}
  .gsearch-result{min-height:48px}
  .mob-header-btn{min-width:44px;min-height:44px}
  .np-row{min-height:44px}
  button:not(.np-row):not(.dialpad-key):not(.icon-btn){min-height:44px}
  .epp-cell{width:44px;height:44px}
  .inbox-ctx-item{min-height:44px;display:flex;align-items:center}
}

/* ═══ MOBILE FONT-SIZE FLOOR (no sub-12px text) ═══ */

@media(max-width:768px){
  .mob-tab .badge{font-size:10px}
  .chat-sub,
  .convo-time,
  .msg-meta,
  .mob-tab-label,
  .mob-tab{font-size:max(var(--fs-2xs), 12px)}
  .convo-msg{font-size:max(var(--fs-xs), 12px)}
}

/* ═══ MOBILE SETTINGS TOGGLE TAP TARGET ═══ */

@media(max-width:768px){
  .settings-toggle{min-height:44px;min-width:44px;width:44px;height:44px}
  .settings-toggle::after{width:20px;height:20px;top:50%;left:2px;transform:translateY(-50%)}
  .settings-toggle.on::after{transform:translateY(-50%) translateX(20px)}
}

/* ═══ LANDSCAPE SAFE-AREA HANDLING (notched devices) ═══ */

@media(max-width:768px) and (orientation:landscape){
  /* Pad left/right edges for notch and sensor housing */
  #app{padding-left:var(--safe-l);padding-right:var(--safe-r)}
  .mobile-tabs{padding-left:var(--safe-l);padding-right:var(--safe-r)}
  .topbar{padding-left:calc(16px + var(--safe-l));padding-right:calc(16px + var(--safe-r))}
  .inbox-topbar-mobile{padding-left:calc(16px + var(--safe-l));padding-right:calc(16px + var(--safe-r))}
  .chat-header{padding-left:calc(16px + var(--safe-l));padding-right:calc(16px + var(--safe-r))}
  .chat-input-bar{padding-left:calc(12px + var(--safe-l));padding-right:calc(12px + var(--safe-r))}
  .convo-item{padding-left:calc(16px + var(--safe-l));padding-right:calc(16px + var(--safe-r))}
  .contact-item{padding-left:calc(16px + var(--safe-l));padding-right:calc(16px + var(--safe-r))}
  .settings-list{padding-left:calc(16px + var(--safe-l));padding-right:calc(16px + var(--safe-r))}
  .toast{max-width:calc(100vw - 32px - var(--safe-l) - var(--safe-r))}
  /* Landscape height compensation: tab bar + composer eat ~100px */
  .chat-messages{max-height:calc(100dvh - 140px)}
  .inbox-list{max-height:calc(100dvh - 120px)}
  .contacts-list{max-height:calc(100dvh - 120px)}
  .calls-list{max-height:calc(100dvh - 100px)}
}

/* ═══ iPHONE 15 BREAKPOINT (390px) ═══ */

@media(max-width:390px) and (min-width:376px){
  .mob-profile-name{font-size:var(--fs-md)}
  .settings-title{font-size:var(--fs-3xl-minus)}
  .convo-item{padding:var(--space-3) var(--space-4)}
  .msg-bubble{max-width:84%}
  .mob-compose-fab{width:48px;height:48px;bottom:calc(68px + var(--safe-b))}
  .avatar-picker-card{width:calc(100% - 32px);max-width:none}
}

/* ═══ TOUCH TARGET ENFORCEMENT (44px minimum) ═══ */

@media(max-width:768px){
  /* mob-header-btn: visual + tap target already 44px in redesign block */
  /* Textarea in composer: ensure 44px tappable height */
  .msg-composer textarea,
  #chat-input{min-height:44px;padding:var(--space-3) var(--space-4)}
  /* Pills: enforce 44px touch target */
  .pill{min-height:44px;display:inline-flex;align-items:center}
  .inbox-filter-pill{min-height:44px;display:inline-flex;align-items:center}
  /* CRM action buttons */
  .crm-act{min-height:44px;min-width:44px}
  .crm-act svg{width:16px;height:16px}
  /* Notation/profile rows */
  .np-row{min-height:44px;padding:var(--space-2) var(--space-2)}
  .dialpad-key .sub{font-size:10px}
}