/* TS WhatsApp v13.0.3 — visual refinement pass
   Focus: sidebar/topbar geometry, cleaner collapsed mode, calmer spacing */
body.ts-studio{
  --studio-control-height:46px;
  --studio-sidebar-expanded:270px;
  --studio-sidebar-collapsed:88px;
  --studio-panel-radius:18px;
  --studio-soft-shadow:0 18px 42px rgba(8,18,40,.16);
}

/* Desktop shell proportions */
@media(min-width:981px){
  html body.ts-studio:not(.sidebar-collapsed) .app-shell{grid-template-columns:var(--studio-sidebar-expanded) minmax(0,1fr)!important}
  html body.ts-studio:not(.sidebar-collapsed) .app-shell>.sidebar{width:var(--studio-sidebar-expanded)!important;max-width:var(--studio-sidebar-expanded)!important}
  html body.ts-studio.sidebar-collapsed .app-shell{grid-template-columns:var(--studio-sidebar-collapsed) minmax(0,1fr)!important}
  html body.ts-studio.sidebar-collapsed .app-shell>.sidebar{width:var(--studio-sidebar-collapsed)!important;max-width:var(--studio-sidebar-collapsed)!important}
}

/* Sidebar general */
html body.ts-studio .app-shell>.sidebar{
  padding:14px 12px 12px!important;
  border-right:1px solid color-mix(in srgb,var(--studio-line-strong) 72%, transparent)!important;
}
html body.ts-studio .sidebar-scroll{padding-right:4px!important}
html body.ts-studio .studio-brandbar{
  position:relative!important;
  min-height:84px!important;
  padding:16px 14px 16px 16px!important;
  margin-bottom:8px!important;
  border-bottom:1px solid var(--studio-line)!important;
}
html body.ts-studio .studio-brandbar .brand{
  gap:12px!important;
  align-items:center!important;
}
html body.ts-studio .brand-mark{
  width:42px!important;height:42px!important;min-width:42px!important;
  border-radius:14px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 18px rgba(43,99,255,.16)!important;
}
html body.ts-studio .brand-mark img{max-width:26px!important;max-height:26px!important}
html body.ts-studio .studio-brandbar .brand-copy b{
  font-size:15px!important;line-height:1.18!important;font-weight:780!important;letter-spacing:-.28px!important;
}
html body.ts-studio .studio-brandbar .brand-copy span{
  font-size:11px!important;line-height:1.28!important;opacity:.88!important;margin-top:3px!important;
}
html body.ts-studio .sidebar-collapse,
html body.ts-studio .menu-toggle{
  width:36px!important;height:36px!important;min-height:36px!important;min-width:36px!important;
  border-radius:12px!important;
}
html body.ts-studio .studio-space-label{
  min-height:50px!important;
  margin:12px 10px 10px!important;
  padding:12px 13px!important;
  border-radius:14px!important;
  font-size:12px!important;
}
html body.ts-studio .studio-space-label b{font-size:13px!important;line-height:1.25!important}
html body.ts-studio .studio-space-label .dot{width:9px!important;height:9px!important}
html body.ts-studio .studio-nav-section>.sidebar-label{
  margin:18px 10px 9px!important;
  font-size:10px!important;
  letter-spacing:.14em!important;
  line-height:1!important;
  opacity:.72!important;
}
html body.ts-studio .side-nav{gap:4px!important}
html body.ts-studio .side-nav .nav-item,
html body.ts-studio .sidebar .logout-link{
  position:relative!important;
  min-height:46px!important;
  padding:11px 12px!important;
  border-radius:14px!important;
  font-size:13px!important;
  font-weight:650!important;
}
html body.ts-studio .side-nav .nav-item:hover,
html body.ts-studio .sidebar .logout-link:hover{transform:none!important}
html body.ts-studio .side-nav .nav-item.active{
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--studio-accent) 44%, transparent)!important;
}
html body.ts-studio .side-nav .nav-icon,
html body.ts-studio .sidebar .logout-link .nav-icon{width:20px!important;height:20px!important;flex:0 0 20px!important}
html body.ts-studio .side-nav .nav-label,
html body.ts-studio .sidebar .logout-link .nav-label{font-size:13px!important;line-height:1.2!important}
html body.ts-studio .side-nav .nav-badge{
  min-width:22px!important;height:22px!important;border-radius:999px!important;padding:0 6px!important;
  font-size:10px!important;font-weight:800!important;
}
html body.ts-studio .studio-sidebar-footer{padding:12px 10px 10px!important}
html body.ts-studio .cloud-status{
  padding:12px 13px!important;
  border-radius:14px!important;
  gap:10px!important;
  box-shadow:none!important;
}
html body.ts-studio .cloud-status b{font-size:12.5px!important}
html body.ts-studio .cloud-status small{font-size:11px!important;opacity:.86!important}

/* Collapsed sidebar — intentionally simplified and clean */
@media(min-width:981px){
  html body.ts-studio.sidebar-collapsed .app-shell>.sidebar{padding:14px 10px 12px!important}
  html body.ts-studio.sidebar-collapsed .sidebar .studio-brandbar{
    padding:12px 8px 14px!important;
    min-height:auto!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:10px!important;
  }
  html body.ts-studio.sidebar-collapsed .sidebar .brand{display:flex!important;justify-content:center!important;align-items:center!important;gap:0!important;flex:none!important}
  html body.ts-studio.sidebar-collapsed .sidebar .brand-copy,
  html body.ts-studio.sidebar-collapsed .sidebar .studio-space-label,
  html body.ts-studio.sidebar-collapsed .sidebar .sidebar-label,
  html body.ts-studio.sidebar-collapsed .sidebar .cloud-status>div,
  html body.ts-studio.sidebar-collapsed .sidebar .nav-label{display:none!important}
  html body.ts-studio.sidebar-collapsed .sidebar .brand-mark{width:42px!important;height:42px!important;min-width:42px!important}
  html body.ts-studio.sidebar-collapsed .sidebar .sidebar-collapse{margin:0 auto!important}
  html body.ts-studio.sidebar-collapsed .sidebar .sidebar-scroll{padding:10px 2px 6px!important}
  html body.ts-studio.sidebar-collapsed .sidebar .studio-nav-section{margin:0!important}
  html body.ts-studio.sidebar-collapsed .sidebar .side-nav{gap:8px!important}
  html body.ts-studio.sidebar-collapsed .sidebar .side-nav .nav-item,
  html body.ts-studio.sidebar-collapsed .sidebar .logout-link{
    width:100%!important;min-width:0!important;min-height:46px!important;
    justify-content:center!important;align-items:center!important;padding:0!important;gap:0!important;
    border-radius:14px!important;
  }
  html body.ts-studio.sidebar-collapsed .sidebar .nav-badge{
    position:absolute!important;top:5px!important;right:5px!important;
    min-width:18px!important;height:18px!important;font-size:9px!important;padding:0 4px!important;
  }
  html body.ts-studio.sidebar-collapsed .sidebar .studio-sidebar-footer{padding:10px 2px 8px!important}
  html body.ts-studio.sidebar-collapsed .sidebar .cloud-status{
    justify-content:center!important;padding:11px 0!important;min-height:48px!important;border-radius:14px!important;
  }
  html body.ts-studio.sidebar-collapsed .sidebar .cloud-status .dot{margin:0!important}
}

/* Topbar — calmer and more legible */
html body.ts-studio .topbar{
  height:74px!important;min-height:74px!important;
  padding:0 24px!important;gap:18px!important;
  border-bottom:1px solid var(--studio-line)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.02)!important;
}
html body.ts-studio .studio-topbar-left{min-width:205px!important;gap:12px!important}
html body.ts-studio .breadcrumb strong{font-size:14px!important;line-height:1.18!important}
html body.ts-studio .breadcrumb-eyebrow{font-size:11px!important;line-height:1.1!important}
html body.ts-studio .studio-topbar-center .topbar-search{width:min(100%,560px)!important;max-width:560px!important}
html body.ts-studio .topbar-search form,
html body.ts-studio .notif-chip,
html body.ts-studio .workspace-switcher,
html body.ts-studio .account-trigger{height:46px!important;min-height:46px!important}
html body.ts-studio .topbar-search form input[type=search]{height:46px!important;min-height:46px!important;padding:0 48px 0 46px!important;border-radius:14px!important;font-size:14px!important}
html body.ts-studio .topbar-search .studio-search-mark{left:16px!important}
html body.ts-studio .topbar-search form kbd{right:13px!important}
html body.ts-studio .topbar-right{gap:10px!important}
html body.ts-studio .workspace-switcher{padding:5px 10px 5px 12px!important;gap:9px!important;border-radius:14px!important;max-width:272px!important}
html body.ts-studio .workspace-switcher>span{font-size:10px!important;letter-spacing:.08em!important;text-transform:uppercase!important;opacity:.78!important}
html body.ts-studio .workspace-switcher select{height:34px!important;font-size:13px!important;padding:0 24px 0 2px!important;max-width:185px!important}
html body.ts-studio .notif-chip{width:46px!important;min-width:46px!important;border-radius:14px!important}
html body.ts-studio .notif-chip em{top:6px!important;right:6px!important}
html body.ts-studio .account-trigger{padding:5px 12px 5px 5px!important;border-radius:14px!important;gap:10px!important}
html body.ts-studio .account-trigger .avatar{width:34px!important;height:34px!important;min-width:34px!important}
html body.ts-studio .account-trigger .user-copy b{font-size:12px!important;line-height:1.15!important}
html body.ts-studio .account-trigger .user-copy span{font-size:10px!important;line-height:1.15!important;opacity:.8!important}

/* Page/body spacing */
html body.ts-studio .content{padding:20px 18px 40px!important}
html body.ts-studio .studio-page-heading{margin-bottom:22px!important}
html body.ts-studio .studio-page-heading h1{font-size:31px!important;line-height:1.06!important;letter-spacing:-.8px!important}
html body.ts-studio .surface-card,
html body.ts-studio .studio-panel,
html body.ts-studio .dashboard-card,
html body.ts-studio .studio-module-intro,
html body.ts-studio .studio-inbox-account,
html body.ts-studio .studio-broadcast .bc-preview-card,
html body.ts-studio .studio-broadcast .bc-form-card,
html body.ts-studio .studio-contacts-toolbar,
html body.ts-studio .contact-search-shell,
html body.ts-studio .studio-device-list,
html body.ts-studio .account-scope-card{border-radius:18px!important;box-shadow:none!important}

/* Inbox — slightly more premium density */
@media(min-width:1321px){
  html body.ts-studio.page-inbox .studio-inbox{--inbox-rail:218px;--inbox-list:404px!important}
}
html body.ts-studio.page-inbox .studio-inbox-account{border-radius:18px!important;padding:14px 16px!important}
html body.ts-studio.page-inbox .studio-inbox .inbox-rail-head{padding:16px 14px!important}
html body.ts-studio.page-inbox .studio-inbox .inbox-list-head{height:82px!important;min-height:82px!important;padding:16px 18px!important}
html body.ts-studio.page-inbox .studio-inbox form.inbox-search{padding:11px 13px!important;min-height:66px!important}
html body.ts-studio.page-inbox .studio-inbox .inbox-row-link{min-height:78px!important;padding:10px 13px!important}
html body.ts-studio.page-inbox .studio-inbox .inbox-avatar{width:42px!important;height:42px!important;min-width:42px!important;border-radius:14px!important}
html body.ts-studio.page-inbox .studio-inbox .inbox-row-title b{font-size:13.5px!important}
html body.ts-studio.page-inbox .studio-inbox .inbox-v2-empty{padding:56px 38px!important}

/* Medium screens */
@media(max-width:1120px){
  html body.ts-studio .studio-topbar-center{display:none!important}
  html body.ts-studio .topbar{padding:0 16px!important;gap:10px!important}
  html body.ts-studio .workspace-switcher{max-width:212px!important}
}

/* Mobile/tablet sidebar opened mode */
@media(max-width:980px){
  html body.ts-studio .sidebar,
  html body.ts-studio.page-inbox .sidebar{width:252px!important;padding:16px 12px 14px!important}
  html body.ts-studio .studio-brandbar{padding:16px 14px 16px 16px!important}
  html body.ts-studio .topbar{height:68px!important;min-height:68px!important;padding:0 12px!important}
  html body.ts-studio .studio-topbar-left{min-width:0!important}
  html body.ts-studio .workspace-switcher>span,
  html body.ts-studio .account-trigger .user-copy span{display:none!important}
  html body.ts-studio .content{padding:16px 12px 32px!important}
}
@media(max-width:560px){
  html body.ts-studio .topbar{height:64px!important;min-height:64px!important;padding:0 10px!important}
  html body.ts-studio .workspace-switcher{max-width:164px!important;padding:5px 8px 5px 10px!important}
  html body.ts-studio .workspace-switcher select{max-width:112px!important;font-size:12px!important}
  html body.ts-studio .account-trigger{padding:4px!important;width:42px!important;min-width:42px!important;justify-content:center!important}
  html body.ts-studio .account-trigger .user-copy,
  html body.ts-studio .account-trigger .account-chevron{display:none!important}
  html body.ts-studio .notif-chip{width:42px!important;min-width:42px!important;height:42px!important;min-height:42px!important}
  html body.ts-studio .content{padding:14px 10px 28px!important}
}