/* TS WhatsApp 13.0.6 — Mobile-first layout and interaction repairs.
   Scoped to small screens, loaded after all preexisting styles. */
html body.ts-studio .studio-mobile-search-toggle{display:none!important}
html body.ts-studio{overflow-x:clip!important}
html body.ts-studio :is(.workspace,.content){min-width:0!important}

@media(max-width:980px){
  /* Break the desktop grid completely: offcanvas navigation + one flexible content column. */
  html body.ts-studio .app-shell{display:block!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important;min-width:0!important}
  html body.ts-studio .workspace{display:flex!important;flex-direction:column!important;width:100%!important;min-width:0!important;max-width:100%!important}
  html body.ts-studio .app-shell>.sidebar,
  html body.ts-studio.page-inbox .app-shell>.sidebar{
    position:fixed!important;top:0!important;left:0!important;right:auto!important;bottom:0!important;
    width:min(300px,86vw)!important;max-width:min(300px,86vw)!important;
    height:100dvh!important;min-height:0!important;overflow:hidden!important;
    transform:translate3d(-105%,0,0)!important;transition:transform .2s ease!important;
    z-index:210!important;padding:0!important;
    border-right:1px solid var(--studio-line)!important;
    box-shadow:20px 0 50px rgba(6,12,30,.16)!important;
  }
  html body.ts-studio.sidebar-open .app-shell>.sidebar,
  html body.ts-studio.mobile-nav-open .app-shell>.sidebar{
    left:0!important;transform:translate3d(0,0,0)!important;
  }
  html body.ts-studio .sidebar .studio-brandbar{min-height:76px!important;padding:14px 18px!important}
  html body.ts-studio .sidebar .sidebar-scroll{overflow-y:auto!important;min-height:0!important;flex:1!important}
  html body.ts-studio .sidebar .studio-sidebar-footer{margin-top:auto!important}
  html body.ts-studio .sidebar .sidebar-width-toggle{display:none!important}
  html body.ts-studio.sidebar-open{overflow:hidden!important}
  html body.ts-studio .sidebar-overlay[data-sidebar-overlay]{
    position:fixed!important;inset:0!important;z-index:200!important;
    background:rgba(7,15,31,.55)!important;backdrop-filter:blur(2px)!important;
    pointer-events:none!important;opacity:0!important;transition:opacity .2s ease!important;
  }
  html body.ts-studio.sidebar-open .sidebar-overlay[data-sidebar-overlay]{pointer-events:auto!important;opacity:1!important}

  /* Usable header: hamburger, search, company switcher, notifications, account. */
  html body.ts-studio .topbar{
    position:sticky!important;top:0!important;z-index:120!important;
    display:flex!important;align-items:center!important;justify-content:space-between!important;
    box-sizing:border-box!important;width:100%!important;max-width:100%!important;
    height:64px!important;min-height:64px!important;
    padding:0 12px!important;gap:7px!important;
    border-bottom:1px solid var(--studio-line)!important;
    background:var(--studio-paper)!important;
  }
  html body.ts-studio .studio-topbar-left{display:flex!important;align-items:center!important;flex:0 0 auto!important;min-width:0!important;gap:7px!important}
  html body.ts-studio .topbar .breadcrumb{display:none!important}
  html body.ts-studio .topbar .menu-toggle,
  html body.ts-studio .studio-mobile-search-toggle{
    display:grid!important;place-items:center!important;
    width:40px!important;height:40px!important;min-height:40px!important;min-width:40px!important;
    padding:9px!important;margin:0!important;
    border:1px solid var(--studio-line)!important;
    border-radius:12px!important;background:var(--studio-tint)!important;color:var(--studio-ink)!important;
    cursor:pointer!important;
  }
  html body.ts-studio .studio-mobile-search-toggle svg{height:20px!important;width:20px!important;stroke:currentColor!important;stroke-width:1.8!important;fill:none!important}
  html body.ts-studio .topbar > .v2-command-open{display:none!important}
  html body.ts-studio .topbar .studio-topbar-center{display:none!important}
  html body.ts-studio.studio-mobile-search-open .topbar .studio-topbar-center{
    display:flex!important;position:absolute!important;
    top:calc(100% + 8px)!important;left:12px!important;right:12px!important;
    width:auto!important;max-width:none!important;min-width:0!important;
    z-index:165!important;padding:9px!important;
    border:1px solid var(--studio-line)!important;border-radius:16px!important;
    background:var(--studio-paper)!important;box-shadow:0 14px 35px rgba(9,19,40,.20)!important;
  }
  html body.ts-studio.studio-mobile-search-open .studio-mobile-search-toggle{border-color:var(--studio-accent)!important;color:var(--studio-accent)!important;background:var(--studio-wash)!important}
  html body.ts-studio .studio-topbar-center .topbar-search,
  html body.ts-studio .studio-topbar-center .topbar-search form{width:100%!important;max-width:none!important}
  html body.ts-studio .studio-topbar-center .topbar-search input{font-size:16px!important}
  html body.ts-studio .topbar-right{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:6px!important;flex:1 1 auto!important;min-width:0!important;margin-left:auto!important}
  html body.ts-studio .topbar-right .workspace-switcher,
  html body.ts-studio .topbar-right .workspace-static{
    display:flex!important;flex:1 1 auto!important;align-items:center!important;justify-content:center!important;
    width:auto!important;min-width:0!important;max-width:260px!important;height:40px!important;min-height:40px!important;
    padding:3px 22px 3px 5px!important;margin:0!important;gap:0!important;
    border:1px solid var(--studio-line)!important;border-radius:12px!important;background:var(--studio-tint)!important;
    overflow:hidden!important;
  }
  html body.ts-studio .topbar-right .workspace-switcher > span,
  html body.ts-studio .topbar-right .workspace-static > span{display:none!important}
  html body.ts-studio .topbar-right .workspace-switcher::after{right:8px!important;font-size:12px!important}
  html body.ts-studio .topbar-right .workspace-switcher select{
    display:block!important;appearance:none!important;flex:1 1 auto!important;
    width:100%!important;min-width:0!important;max-width:100%!important;
    height:36px!important;min-height:36px!important;
    padding:0 2px 0 4px!important;text-overflow:ellipsis!important;
    background:transparent!important;color:var(--studio-ink)!important;
    font-size:12px!important;font-weight:720!important;text-align:center!important;text-align-last:center!important;
  }
  html body.ts-studio .topbar-right .workspace-static b{font-size:12px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  html body.ts-studio .topbar .notif-chip,
  html body.ts-studio .topbar .account-trigger{
    flex:0 0 39px!important;width:39px!important;height:40px!important;min-height:40px!important;min-width:39px!important;
    padding:3px!important;border-radius:12px!important;margin:0!important;
  }
  html body.ts-studio .topbar .account-trigger{justify-content:center!important}
  html body.ts-studio .account-trigger :is(.user-copy,.account-chevron){display:none!important}
  html body.ts-studio .topbar .account-trigger .avatar{height:31px!important;width:31px!important;min-width:31px!important;align-self:center!important}
  html body.ts-studio .topbar .account-dropdown{
    position:fixed!important;top:67px!important;right:10px!important;left:auto!important;
    width:min(340px,calc(100vw - 20px))!important;max-height:calc(100dvh - 78px)!important;
    overflow-y:auto!important;z-index:185!important;
    border:1px solid var(--studio-line)!important;background:var(--studio-menu)!important;
  }
  html body.ts-studio .topbar .account-dropdown[hidden]{display:none!important}

  /* Global content and touch-friendly controls. */
  html body.ts-studio .content,
  html body.ts-studio.page-inbox .content{
    box-sizing:border-box!important;width:100%!important;max-width:100%!important;
    margin:0!important;min-width:0!important;
    height:auto!important;min-height:calc(100dvh - 64px)!important;
    padding:16px 12px 32px!important;
    overflow-x:clip!important;overflow-y:visible!important;
  }
  html body.ts-studio .studio-page-heading{display:none!important}
  html body.ts-studio .content :is(.card,.panel,.stats-card,.stat-card,.content-card,.module-card,.provider-section,.table-card),
  html body.ts-studio .studio-module-intro,
  html body.ts-studio .studio-health-summary,
  html body.ts-studio .studio-device-list{max-width:100%!important;min-width:0!important;border-radius:14px!important}
  html body.ts-studio .content :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),select,textarea){
    box-sizing:border-box!important;max-width:100%!important;min-width:0!important;
    font-size:16px!important;
  }
  html body.ts-studio .content :is(button,.btn,input[type=submit]){min-height:42px!important;font-size:13px!important}
  html body.ts-studio .content :is(.table-wrap,.table-responsive,.studio-mobile-table-scroll){
    display:block!important;max-width:100%!important;min-width:0!important;
    overflow-x:auto!important;overflow-y:visible!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:thin!important;border-radius:12px!important;
  }
  html body.ts-studio .studio-mobile-table-scroll>table{width:max-content!important;min-width:560px!important;max-width:none!important}
  html body.ts-studio .content :is(.table-wrap,.table-responsive)>table{width:max-content!important;min-width:100%!important}

  /* Dashboard and general cards stack correctly. */
  html body.ts-studio .dashboard-attention-tiles,
  html body.ts-studio .stats-grid,
  html body.ts-studio .dashboard-team-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  html body.ts-studio .dashboard-attention-tiles>a,
  html body.ts-studio .stats-grid .stat-card{min-width:0!important;padding:15px!important}
  html body.ts-studio .workspace-summary-hero{padding:20px!important;min-width:0!important}
  html body.ts-studio .workspace-summary-hero>.actions{display:flex!important;flex-wrap:wrap!important;gap:8px!important}
  html body.ts-studio .studio-dashboard-detail,
  html body.ts-studio .dashboard-grid,
  html body.ts-studio .report-grid,
  html body.ts-studio .profile-grid{grid-template-columns:minmax(0,1fr)!important}

  /* Broadcast: a single readable form, preview after inputs, no fixed-width phones. */
  html body.ts-studio.page-campaigns .bc-page,
  html body.ts-studio.page-campaigns .bc-shell{width:100%!important;min-width:0!important;max-width:100%!important}
  html body.ts-studio .studio-broadcast .bc-title{display:flex!important;align-items:flex-start!important;flex-wrap:wrap!important;gap:10px!important}
  html body.ts-studio .studio-broadcast .bc-title h2{font-size:22px!important;line-height:1.2!important}
  html body.ts-studio .studio-broadcast .studio-flow-steps{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  html body.ts-studio .studio-broadcast .bc-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:0!important;min-width:0!important}
  html body.ts-studio .studio-broadcast :is(.bc-fields,.bc-preview){min-width:0!important;width:100%!important;max-width:100%!important;padding:18px 14px!important}
  html body.ts-studio .studio-broadcast .bc-grid>.bc-preview{border-left:0!important;border-top:1px solid var(--studio-line)!important}
  html body.ts-studio .studio-broadcast .bc-preview-card{position:static!important;top:auto!important}
  html body.ts-studio .studio-broadcast .bc-phone{width:100%!important;max-width:100%!important;min-width:0!important;margin-inline:auto!important}
  html body.ts-studio .studio-broadcast .bc-filter-grid{grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
  html body.ts-studio .studio-broadcast .bc-bottom,
  html body.ts-studio .studio-broadcast .bc-footer,
  html body.ts-studio .studio-broadcast .bc-recipient,
  html body.ts-studio .studio-broadcast .bc-actions{display:flex!important;align-items:stretch!important;flex-direction:column!important;gap:10px!important;width:100%!important}
  html body.ts-studio .studio-broadcast .bc-bottom{padding:14px!important;position:static!important}
  html body.ts-studio .studio-broadcast .bc-recipient{position:relative!important;padding-right:45px!important}
  html body.ts-studio .studio-broadcast .bc-recipient .bc-refresh{position:absolute!important;top:50%!important;right:0!important;transform:translateY(-50%)!important}
  html body.ts-studio .studio-broadcast .bc-actions :is(button,.btn){width:100%!important;justify-content:center!important}

  /* Contacts/AI/templates/system health: a consistent single-column layout. */
  html body.ts-studio .studio-contacts-toolbar{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:10px!important;padding:13px!important}
  html body.ts-studio .studio-contacts-toolbar>div{display:flex!important;gap:8px!important;flex-wrap:wrap!important;justify-content:flex-start!important}
  html body.ts-studio .studio-module-intro{padding:18px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:10px!important}
  html body.ts-studio .account-scope-card{display:flex!important;flex-wrap:wrap!important;gap:12px!important;padding:16px!important}
  html body.ts-studio .contact-search-shell{padding:14px!important}
  html body.ts-studio .studio-ai-hero{padding:20px!important;flex-direction:column!important;gap:12px!important}
  html body.ts-studio .studio-ai-tabs{display:flex!important;overflow-x:auto!important;max-width:100%!important;gap:7px!important}
  html body.ts-studio .studio-ai-tabs a{flex:0 0 auto!important;white-space:nowrap!important}
  html body.ts-studio .studio-ai-numbers,
  html body.ts-studio .health-grid,
  html body.ts-studio .device-access-grid{grid-template-columns:minmax(0,1fr)!important}
  html body.ts-studio .studio-device-list{padding:14px!important}

  /* Inbox: remove forced desktop pane dimensions on mobile. */
  html body.ts-studio.page-inbox .studio-inbox-account{
    width:100%!important;min-width:0!important;max-width:100%!important;
    display:flex!important;flex-direction:column!important;gap:12px!important;
    padding:14px!important;border-radius:14px!important;margin:0 0 12px!important;
  }
  html body.ts-studio.page-inbox .inbox-account-current{min-width:0!important;max-width:100%!important;gap:10px!important}
  html body.ts-studio.page-inbox .inbox-account-copy{min-width:0!important;flex:1 1 auto!important;overflow-wrap:anywhere!important}
  html body.ts-studio.page-inbox .inbox-account-copy b{font-size:13px!important;white-space:normal!important;overflow-wrap:anywhere!important}
  html body.ts-studio.page-inbox .inbox-account-picker{width:100%!important;min-width:0!important;max-width:100%!important;display:flex!important;flex-direction:column!important;gap:6px!important;border-left:0!important;border-top:1px solid var(--studio-line)!important;padding:10px 0 0!important}
  html body.ts-studio.page-inbox .inbox-account-picker select{width:100%!important;max-width:100%!important;min-width:0!important}
  html body.ts-studio.page-inbox .studio-inbox{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;min-width:0!important;max-width:100%!important;
    height:auto!important;min-height:calc(100dvh - 230px)!important;max-height:none!important;
    overflow:hidden!important;border-radius:14px!important;
  }
  html body.ts-studio.page-inbox .studio-inbox .inbox-v2-rail{display:none!important}
  html body.ts-studio.page-inbox .studio-inbox .inbox-v2-list-panel,
  html body.ts-studio.page-inbox .studio-inbox .inbox-v2-main{
    width:100%!important;max-width:100%!important;min-width:0!important;
    grid-column:1!important;border-right:0!important;
  }
  html body.ts-studio.page-inbox .studio-inbox .inbox-v2-main{display:none!important}
  html body.ts-studio.page-inbox .studio-inbox:has(.inbox-chat-layout) .inbox-v2-list-panel{display:none!important}
  html body.ts-studio.page-inbox .studio-inbox:has(.inbox-chat-layout) .inbox-v2-main{display:block!important}
  html body.ts-studio.page-inbox .inbox-v2-list-panel .inbox-list-head{padding:14px!important;min-height:68px!important;height:auto!important}
  html body.ts-studio.page-inbox .studio-inbox form.inbox-search{display:grid!important;grid-template-columns:18px minmax(0,1fr) 62px!important;gap:8px!important;padding:10px!important}
  html body.ts-studio.page-inbox .studio-inbox form.inbox-search input[name=q]{min-width:0!important;width:100%!important;font-size:15px!important}
  html body.ts-studio.page-inbox .inbox-row-link{min-width:0!important;max-width:100%!important;grid-template-columns:42px minmax(0,1fr) 26px!important;padding:11px 12px!important}
  html body.ts-studio.page-inbox .inbox-row-main{min-width:0!important}
  html body.ts-studio.page-inbox .inbox-row-title b{max-width:100%!important;overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important}
  html body.ts-studio.page-inbox .inbox-chat-layout{min-width:0!important;width:100%!important;max-width:100%!important;height:calc(100dvh - 85px)!important;max-height:none!important}
  html body.ts-studio.page-inbox .inbox-chat-head{min-width:0!important;gap:8px!important;flex-wrap:wrap!important}
  html body.ts-studio.page-inbox .inbox-composer{min-width:0!important;width:100%!important;max-width:100%!important}
  html body.ts-studio.page-inbox .message-bubble{max-width:92%!important;overflow-wrap:anywhere!important}
}
@media(max-width:380px){
  html body.ts-studio .topbar{padding:0 8px!important;gap:5px!important}
  html body.ts-studio .studio-topbar-left{gap:5px!important}
  html body.ts-studio .topbar .menu-toggle,
  html body.ts-studio .studio-mobile-search-toggle{width:36px!important;min-width:36px!important;height:38px!important;min-height:38px!important}
  html body.ts-studio .topbar-right{gap:4px!important}
  html body.ts-studio .topbar .notif-chip,
  html body.ts-studio .topbar .account-trigger{width:36px!important;min-width:36px!important;flex-basis:36px!important;height:38px!important;min-height:38px!important}
  html body.ts-studio .topbar-right .workspace-switcher select{font-size:11px!important}
  html body.ts-studio .dashboard-attention-tiles a b,
  html body.ts-studio .stat-number{font-size:23px!important}
}
@media(prefers-reduced-motion:reduce){html body.ts-studio .app-shell>.sidebar,html body.ts-studio .sidebar-overlay{transition:none!important}}
/* Corrections found during rendered QA, not synthetic geometry assumptions. */
@media(max-width:980px){
  html body.ts-studio.studio-mobile-search-open .topbar .studio-topbar-center .topbar-search,
  html body.ts-studio.studio-mobile-search-open .topbar .studio-topbar-center .topbar-search form{
    display:block!important;width:100%!important;height:44px!important;min-height:44px!important;
  }
  html body.ts-studio.studio-mobile-search-open .topbar .studio-topbar-center .topbar-search input[name="q"]{
    display:block!important;width:100%!important;min-width:0!important;max-width:none!important;
    height:44px!important;min-height:44px!important;padding:0 42px 0 44px!important;
    border:1px solid var(--studio-line-strong)!important;background:var(--studio-tint)!important;
  }
  html body.ts-studio.page-inbox .inbox-account-selector.studio-inbox-account{
    height:auto!important;min-height:0!important;max-height:none!important;
    overflow:visible!important;flex:0 0 auto!important;align-items:stretch!important;
  }
  html body.ts-studio.page-inbox .inbox-account-selector .inbox-account-picker{
    height:auto!important;max-height:none!important;overflow:visible!important;
    flex:none!important;min-width:0!important;min-height:0!important;
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    border-left:0!important;border-top:1px solid var(--studio-line)!important;
    padding:12px 0 0!important;margin:0!important;gap:7px!important;
  }
  html body.ts-studio.page-inbox .inbox-account-selector .inbox-account-picker label{
    display:block!important;position:static!important;margin:0!important;
    font-size:11px!important;font-weight:700!important;line-height:1.25!important;
    white-space:normal!important;color:var(--studio-sub)!important;
  }
  html body.ts-studio.page-inbox .inbox-account-selector .inbox-account-picker select{
    display:block!important;height:42px!important;min-height:42px!important;min-width:0!important;
    width:100%!important;max-width:100%!important;margin:0!important;
    background:var(--studio-tint)!important;color:var(--studio-ink)!important;
    border:1px solid var(--studio-line-strong)!important;border-radius:11px!important;
    padding:0 30px 0 12px!important;font-size:13px!important;
  }
  html body.ts-studio .studio-broadcast .bc-phone{
    background:#e9eeeb!important;color:#1c332d!important;
  }
  html body.ts-studio .studio-broadcast .bc-phone :is(.bc-phone-head,.bc-day,.bc-bubble,.bc-bubble p,.bc-bubble b,.bc-bubble span,.bc-bubble small){
    color:#1c332d!important;
  }
  html body.ts-studio .studio-broadcast .bc-bubble{
    background:#fff!important;border-radius:10px!important;padding:12px!important;
    box-shadow:0 1px 2px rgba(0,0,0,.06)!important;
  }
}
@media(min-width:981px){html body.ts-studio .studio-mobile-table-scroll{display:contents!important}}