.topbar-logout{min-height:34px;padding:0 11px;border:1px solid #d8dfda;border-radius:9px;background:#fff;color:#506057;font-size:12px;font-weight:650}
.topbar-logout:hover{background:#f3f7f4;border-color:#bfcac2}
.topbar-left{display:flex;align-items:center;gap:10px;min-width:0}
.nav-toggle{display:none;width:38px;height:38px;align-items:center;justify-content:center;border:1px solid #d8dfda;border-radius:10px;background:#fff;color:#35463d}
.nav-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.nav-icon{width:19px;height:19px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-overlay{display:none}
@media(max-width:760px){
  .sidebar{position:fixed;inset:0 auto 0 0;width:min(290px,86vw);height:100dvh;min-height:0;padding:20px 14px 14px;flex-direction:column;align-items:stretch;gap:0;transform:translateX(-105%);transition:transform .2s ease;box-shadow:12px 0 32px rgba(6,33,28,.18)}
  .sidebar.open{transform:translateX(0)}
  .brand-lockup{height:39px;margin:0 0 22px;padding:0 8px}
  .brand-lockup img{width:174px;height:36px}
  .workspace-switch{display:grid}
  .nav-label{display:block;margin:27px 9px 8px}
  .side-nav{display:grid}
  .sidebar-bottom{display:block;margin-top:auto}
  .workspace{min-height:100vh}
  .nav-toggle{display:inline-flex;flex:0 0 auto}
  .nav-overlay:not(.hidden){display:block;position:fixed;inset:0;z-index:4;border:0;background:rgba(3,17,14,.42)}
}
@media(max-width:450px){.topbar-left{gap:7px}.nav-toggle{width:36px;height:36px}}
@media(prefers-reduced-motion:reduce){.sidebar{transition:none}}
@media(max-width:450px){
  .topbar-right{gap:9px}
  .sync-status{display:none}
  .dial-input-row{display:grid;grid-template-columns:23px minmax(0,1fr);height:auto;gap:4px;padding:6px}
  .dial-input-row .phone-prefix{grid-column:1;grid-row:1}
  .dial-input-row input{grid-column:2;grid-row:1;width:100%;min-width:0;height:38px}
  .dial-input-row .button{grid-column:1/-1;grid-row:auto;width:100%;height:40px}
}

/* Touch targets follow the 44px mobile control token in the official UI kit. */
@media(max-width:760px){
  :root{--touch-min:44px}
  .nav-toggle{width:var(--touch-min);height:var(--touch-min)}
  .topbar-logout{min-height:var(--touch-min)}
  .button{min-height:var(--touch-min)}
  .add-device{min-height:var(--touch-min)}
  .session-select-row{height:var(--touch-min)}
  .session-select-row select{height:var(--touch-min)}
  .dial-input-row{min-height:56px}
  .dial-input-row input{height:44px}
}
@media(max-width:450px){
  .nav-toggle{width:var(--touch-min);height:var(--touch-min)}
  .add-device{width:var(--touch-min);min-width:var(--touch-min);height:var(--touch-min);padding:0}
  .dial-input-row .button{min-height:var(--touch-min);height:var(--touch-min)}
}

/* Simplified dialer: one clear question, two big buttons. */
.eyebrow,.panel-kicker,.phone-prefix,.environment,.topbar-divider,.secure-badge,.service-status{display:none}
.dial-input-row{height:auto;flex-wrap:wrap;padding:10px;gap:10px}
.dial-input-row input{flex:1 1 100%;grid-column:1/-1;height:54px;font-size:20px;padding:0 8px}
.dial-input-row .button{flex:1 1 calc(50% - 6px);grid-column:auto;min-height:54px;height:54px;font-size:16px;font-weight:700;justify-content:center}
.dial-panel label{font-size:15px;font-weight:650}
.dial-panel .field-hint{font-size:14px}
@media (max-width:560px){.dial-input-row .button{flex:1 1 100%}}