/* Layout only: no visibility/permission changes to customer or provider features. */
.responsive-table-scroll{max-width:100%;min-width:0}
.mobile-drawer-close,.inbox-back{display:none}
.crm-admin .app-topbar{display:none}
@media(max-width:768px){
 html{scroll-padding-top:64px}
 body{overflow-wrap:anywhere}
 *,*::before,*::after{box-sizing:border-box}
 img,video,canvas,audio,iframe{max-width:100%}
 input,select,textarea{font-size:16px!important;min-width:0;max-width:100%;min-height:44px}
 input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea{width:100%}
 input[type=checkbox],input[type=radio]{width:22px!important;height:22px;min-height:22px;flex:none;vertical-align:middle}
 label:has(>input[type=checkbox]),label:has(>input[type=radio]){min-height:44px;align-content:center}
 button,.btn,[role=button],summary,.nav-item,.logout-btn,.howto-sidebar-btn{min-height:44px;touch-action:manipulation}
 button,.btn{white-space:normal;max-width:100%;line-height:1.35}
 .btn-sm{padding:10px 12px}
 :focus-visible{outline:3px solid #5687e9;outline-offset:2px}
 .responsive-table-scroll,.table-wrap{width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
 .responsive-table-scroll>table{min-width:640px}
 .responsive-table-scroll td,.responsive-table-scroll th{overflow-wrap:normal}
 td button{white-space:nowrap}
 td .flex{flex-wrap:wrap;min-width:110px}
 .page,.card,.panel,section,main,.main,.form-group,.form-grid>*,.grid>*,.row>*,.stat-card{min-width:0;max-width:100%}
 .page-header,.page-actions,.actions,.toolbar,.flow-toolbar,.section-heading,.cw-nav,.cw-actions{flex-wrap:wrap;gap:8px;min-width:0}
 .page-actions{flex-shrink:1;width:100%}
 .page-actions>button,.actions>button{flex:1 1 auto}
 .page-title{font-size:21px}.page-sub{line-height:1.4}
 .form-grid,.detail-grid,.tool-grid,.dashboard-grid,.crm-hero,.grid,.row{grid-template-columns:minmax(0,1fr)!important}
 .form-grid .full{grid-column:auto}
 .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
 .crm-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .crm-hero{padding:16px}.crm-hero h2{font-size:22px}
 .card,.stat-card{padding:14px}.stat-value{font-size:24px}
 .mini-item,.task-row{flex-wrap:wrap}
 .modal-overlay{padding:10px;align-items:center}
 .modal-overlay .modal,dialog{width:100%!important;max-width:calc(100vw - 20px)!important;max-height:calc(var(--mobile-vh,100dvh) - 20px)!important;padding:18px;overflow:auto;overscroll-behavior:contain}
 dialog{width:calc(100vw - 20px)!important}
 dialog h2,.modal-title{overflow-wrap:anywhere}
 .modal .form-grid{grid-template-columns:minmax(0,1fr)!important}
 .modal [style*="display:flex"],.modal [style*="display: flex"]{flex-wrap:wrap}
 .toast{left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));width:auto;max-width:none}
 pre,code{white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%}
 /* Main CRM navigation and shell. Existing feature permissions stay authoritative. */
 .crm-app #app>.layout,.crm-admin>.layout{display:block;min-height:100dvh}
 .crm-app .main,.crm-admin .main{margin-left:0;padding:16px 12px;min-height:0;width:100%}
 .crm-app .app-topbar,.crm-admin .app-topbar{height:56px;min-height:56px;display:flex;position:sticky;top:0;z-index:40;align-items:center;justify-content:space-between;gap:12px;padding:6px 12px;background:var(--surface);border-bottom:1px solid var(--border)}
 .app-topbar-logo{font-size:16px!important;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .app-menu-btn{min-width:44px;min-height:44px;align-items:center;justify-content:center;flex:none}
 .crm-app .sidebar,.crm-admin .sidebar{position:fixed;inset:0 auto 0 0;height:var(--mobile-vh,100dvh);width:min(290px,calc(100vw - 44px));max-width:none;transform:translateX(-105%);overflow-y:auto;z-index:60;transition:transform .2s}
 .crm-app .sidebar.open,.crm-admin .sidebar.open{transform:translateX(0)}
 .sidebar .nav-item{padding:12px 10px;font-size:14px;white-space:normal}
 .sidebar-overlay.show{display:block;position:fixed;inset:0;background:#0f172a80;z-index:59}
 .mobile-drawer-close{display:block;margin:8px 12px 0 auto;min-width:44px;background:transparent;color:inherit;border:1px solid currentColor;border-radius:8px}
 .sidebar .mobile-drawer-close{color:var(--text,#fff)}
 .crm-app .sidebar .mobile-drawer-close{color:#fff}
 .crm-app .main [style*="grid-template-columns"]:not(.stats-grid):not(.flow-canvas):not(:has(>.dialpad-btn)){grid-template-columns:minmax(0,1fr)!important}
 .crm-app .main [style*="min-width:"]:not(.flow-node){min-width:0!important}
 .crm-app .main [style*="display:flex"],.crm-app .main [style*="display: flex"]{min-width:0;flex-wrap:wrap}
 #contactSearch,#contactStatus{width:100%!important;max-width:none!important}
 #page-contacts>.card>.flex,#contact-pagination>div,#contact-pagination>div>div{flex-wrap:wrap;gap:8px}
 #contact-pagination>div>div{margin-left:0!important}
 .contact-link{display:inline-flex;min-height:44px;align-items:center;overflow-wrap:anywhere}
 #page-contacts .responsive-table-scroll td:nth-child(2){min-width:220px}
 #page-contacts .responsive-table-scroll td:nth-child(3){min-width:150px}
 #page-contacts .responsive-table-scroll td:nth-child(4){min-width:150px}
 #contactDetailModal .modal{height:calc(var(--mobile-vh,100dvh) - 20px);padding:0;overflow:hidden}
 .cw-header{padding:12px;flex-wrap:wrap;flex-shrink:0}.cw-header h2{font-size:18px}
 .cw-grid{display:block;overflow:auto}.cw-col{overflow:visible;padding:14px;border-right:0;border-bottom:1px solid var(--border)}.cw-side{max-height:none}
 .cw-nav button{flex:1}.cw-nav{width:100%}.cw-composer{padding:12px}
 #floating-phone{width:calc(100vw - 24px);right:12px;max-height:calc(var(--mobile-vh,100dvh) - 100px)}
 .flow-shell{grid-template-columns:minmax(0,1fr);min-height:0}.flow-canvas-wrap{min-width:0;min-height:420px;max-width:100%;overflow:auto}
 #pipeline-board{display:flex!important;overflow-x:auto;max-width:100%;padding-bottom:12px}#pipeline-board>div{flex:0 0 min(280px,85vw)}
 /* Inbox: one screen at a time; visual viewport keeps the composer above the keyboard. */
 .crm-app .main:has(#page-conversations.active){height:calc(var(--mobile-vh,100dvh) - 56px);max-height:none;display:flex;flex-direction:column;overflow:hidden;padding:10px 12px}
 .workspace-utility-bar{flex-shrink:0;flex-wrap:wrap}
 #page-conversations.active{min-height:0;flex:1;overflow:hidden}
 #page-conversations .page-header{margin-bottom:10px}
 .conversation-shell{display:grid;grid-template-columns:minmax(0,1fr);height:0;min-height:0;flex:1;overflow:hidden}
 .conversation-list-pane{height:100%;min-height:0;border:0}
 .conversation-thread{display:none;height:100%;min-height:0;overflow:hidden}
 .mobile-thread-open .conversation-list-pane{display:none}
 .mobile-thread-open .conversation-thread{display:flex}
 #page-conversations.mobile-thread-open .page-header{display:none}
 .main:has(.mobile-thread-open)>.workspace-utility-bar{display:none}
 .inbox-back{display:inline-flex;align-items:center;padding:8px 12px;margin:8px;align-self:flex-start;flex:none}
 #conv-header{padding:10px 12px!important;gap:8px!important;font-size:14px;max-height:180px;overflow:auto}
 #conv-header>div{min-width:0;overflow-wrap:anywhere}
 #conv-messages{padding:12px!important;flex:1 1 auto!important;min-height:80px}
 #conv-messages>div>div{max-width:92%!important}
 #conv-reply{padding:10px 12px max(10px,env(safe-area-inset-bottom))!important;flex-shrink:0}
 #conv-reply>div:last-child{flex-wrap:nowrap!important;align-items:flex-end;gap:8px!important}
 #conv-reply textarea{min-width:0;width:0;flex:1;font-size:16px!important}
 #conv-reply button{flex:none;min-width:64px}
 /* Standalone AI Calling, Team and account forms. */
 .responsive-page header{padding:10px 12px;gap:10px;flex-wrap:wrap}
 .responsive-page header>a,.responsive-page header .actions>a{display:inline-flex;align-items:center;min-height:44px}
 .responsive-page header strong{min-width:0}
 .responsive-page main{padding:0 12px 30px;margin:20px auto;max-width:100%}
 .responsive-page section,.responsive-page .panel{padding:16px;margin:16px 0}
 .responsive-page .actions{margin-top:8px}.responsive-page .hours{flex-wrap:wrap}
 .responsive-page .control-grid{grid-template-columns:minmax(0,1fr);gap:0}
 .responsive-page .switch{min-height:44px;gap:12px}
 .responsive-page .simple-actions{grid-template-columns:minmax(0,1fr);gap:10px;margin:16px 0}
 .responsive-page .simple-actions button{min-height:54px;font-size:16px;padding:12px 16px;text-align:left}
 .responsive-page .website-sync{padding:12px}.responsive-page .website-sync button{width:100%}
 #campaign-script{min-height:240px;font-size:16px;line-height:1.6}
 #test-form button[type=submit],#test-call{width:100%;min-height:50px}
 .responsive-page .live-counts{grid-template-columns:repeat(2,minmax(0,1fr))}
 .responsive-page .check{min-width:0}.responsive-page nav:not(.simple-actions){gap:8px}
 .auth-page::before,.auth-page::after{max-width:100vw;left:0;right:0}
 .auth-page .container{grid-template-columns:minmax(0,1fr);gap:24px}
 .auth-page .nav{padding:8px 16px;height:auto;min-height:64px;gap:12px}
 .auth-page .main{padding:24px 16px;margin:0}
 .auth-page .card,.auth-page .form-card,.login-card{padding:24px 18px!important;max-width:100%}
 #loginScreen>div{padding:16px!important;min-height:100dvh!important;width:100%}
 .auth-page .benefits{display:none}
 .crm-admin .main [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}
 .crm-admin .page-actions{width:100%}.crm-admin .main [style*="display:flex"]{flex-wrap:wrap}
}
@media(max-width:360px){.stats-grid{grid-template-columns:minmax(0,1fr)!important}.crm-actions{grid-template-columns:minmax(0,1fr)}.responsive-page header strong{flex-basis:40%}}
@media(prefers-reduced-motion:reduce){.sidebar,.page.active{transition:none!important;animation:none!important}}