/* TS WhatsApp v13.0.5 — topbar cleanup + workspace selector polish */

/* 1) Remove the bulky page header area on every module */
html body.ts-studio .studio-page-heading{
  display:none!important;
}
html body.ts-studio .content{
  padding-top:18px!important;
}
html body.ts-studio.page-inbox .content{
  padding-top:10px!important;
}

/* 2) Rebuild topbar composition: left info, command palette, global search, then right controls */
@media(min-width:981px){
  html body.ts-studio .topbar{
    justify-content:flex-start!important;
    gap:18px!important;
    padding:0 24px!important;
  }
  html body.ts-studio .studio-topbar-left{
    min-width:190px!important;
    flex:0 0 auto!important;
  }
  html body.ts-studio .studio-topbar-center{
    flex:1 1 auto!important;
    justify-content:flex-start!important;
    min-width:280px!important;
  }
  html body.ts-studio .studio-topbar-center .topbar-search{
    width:min(100%,620px)!important;
    max-width:620px!important;
    margin:0!important;
  }
  html body.ts-studio .topbar-right{
    margin-left:auto!important;
    gap:12px!important;
    flex:0 0 auto!important;
  }
}

/* 3) Put "Cari menu / Ctrl K" before global search with proper spacing */
html body.ts-studio .topbar > .v2-command-open{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  flex:0 0 auto!important;
  min-height:42px!important;
  height:42px!important;
  padding:0 14px!important;
  border:1px solid var(--studio-line)!important;
  background:var(--studio-paper)!important;
  color:var(--studio-sub)!important;
  border-radius:12px!important;
  margin-right:4px!important;
  white-space:nowrap!important;
}
html body.ts-studio .topbar > .v2-command-open:hover{
  background:var(--studio-tint)!important;
  color:var(--studio-ink)!important;
  border-color:var(--studio-line-strong)!important;
}
html body.ts-studio .topbar > .v2-command-open kbd{
  font-size:9px!important;
  line-height:1!important;
  border:1px solid var(--studio-line)!important;
  background:var(--studio-tint)!important;
  color:var(--studio-sub)!important;
  border-radius:6px!important;
  padding:4px 6px!important;
}
@media(max-width:980px){
  html body.ts-studio .topbar > .v2-command-open{display:none!important}
}

/* 4) Make the business/workspace picker wider, centered, and obviously clickable */
html body.ts-studio .workspace-switcher{
  position:relative!important;
  min-width:300px!important;
  max-width:360px!important;
  height:44px!important;
  min-height:44px!important;
  gap:10px!important;
  padding:4px 14px 4px 12px!important;
  border-radius:12px!important;
  background:var(--studio-paper)!important;
  border:1px solid var(--studio-line)!important;
}
html body.ts-studio .workspace-switcher::after{
  content:'▾';
  position:absolute!important;
  right:14px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  font-size:12px!important;
  line-height:1!important;
  color:var(--studio-sub)!important;
  pointer-events:none!important;
}
html body.ts-studio .workspace-switcher > span{
  flex:0 0 auto!important;
  font-size:9px!important;
  letter-spacing:.55px!important;
  color:var(--studio-sub)!important;
  text-transform:uppercase!important;
  font-weight:800!important;
}
html body.ts-studio .workspace-switcher select{
  appearance:none!important;
  -webkit-appearance:none!important;
  -moz-appearance:none!important;
  cursor:pointer!important;
  border:0!important;
  background:transparent!important;
  color:var(--studio-ink)!important;
  min-width:220px!important;
  width:100%!important;
  max-width:none!important;
  height:34px!important;
  min-height:34px!important;
  padding:0 22px 0 8px!important;
  text-align:center!important;
  text-align-last:center!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1.2!important;
}
html body.ts-studio .workspace-switcher:hover{
  border-color:var(--studio-line-strong)!important;
  background:var(--studio-tint)!important;
}
html body.ts-studio .workspace-switcher:focus-within{
  border-color:var(--studio-accent)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--studio-accent) 16%, transparent)!important;
}

/* Give other topbar items clearer spacing */
html body.ts-studio .notif-chip{
  width:42px!important;min-width:42px!important;height:42px!important;
}
html body.ts-studio .account-trigger{
  min-height:44px!important;
}

/* Dark/light compatibility around the cleaned topbar */
[data-theme="dark"] body.ts-studio .topbar > .v2-command-open,
[data-theme="dark"] body.ts-studio .workspace-switcher,
[data-theme="dark"] body.ts-studio .topbar-search form,
[data-theme="dark"] body.ts-studio .account-trigger,
[data-theme="dark"] body.ts-studio .notif-chip{
  background:var(--studio-paper)!important;
  border-color:var(--studio-line)!important;
}

/* On narrower desktop keep the workspace switcher readable */
@media (max-width:1280px) and (min-width:981px){
  html body.ts-studio .workspace-switcher{
    min-width:250px!important;
    max-width:300px!important;
  }
  html body.ts-studio .topbar > .v2-command-open span{
    display:none!important;
  }
}