/* Shared UI: app/globals.css */
:root {
  --ink: #202938;
  --muted: #737d8e;
  --border: #e5e7ed;
  --line: var(--border);
  --accent: #8248d2;
  --purple: #a04eff;
  --blue: #229cf5;
  --sidebar: 256px;
  --surface: #fff;
  --font: Inter, Arial, Helvetica, sans-serif;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
button,
input,
select {
  font: inherit;
}
button,
a,
input,
select {
  -webkit-tap-highlight-color: transparent;
}
button,
a {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  color: inherit;
}
button:disabled {
  cursor: wait;
  opacity: 0.65;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid #bda0ff;
  outline-offset: 3px;
}
button svg,
a svg {
  flex-shrink: 0;
}
h1,
h2,
h3,
p {
  margin: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: -80px;
  left: 280px;
  background: #202938;
  color: white;
  padding: 12px;
  z-index: 100;
}
.skip-link:focus {
  top: 8px;
}
.app {
  min-height: 100vh;
}
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar);
  border-right: 1px solid var(--border);
  background: white;
  display: flex;
  flex-direction: column;
  z-index: 30;
  transition: width 0.18s;
}
.brand-row {
  height: 80px;
  display: flex;
  align-items: center;
  padding: 0 17px;
  gap: 12px;
  flex-shrink: 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.brand-mark {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.brand-name {
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.5px;
}
.icon-button {
  border: 0;
  background: transparent;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: #788294;
  position: relative;
  flex-shrink: 0;
}
.icon-button:hover {
  background: #f4f4f7;
  color: #333b49;
}
.navigation {
  padding: 0 15px 20px;
  overflow: auto;
  flex: 1;
}
.nav-group + .nav-group {
  margin-top: 23px;
}
.nav-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1px;
  color: var(--muted);
  padding: 0 9px 9px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 10px;
  min-height: 41px;
  margin: 2px 0;
  border-radius: 9px;
  color: #505b6b;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
}
.nav-item:hover {
  background: #f5f5f8;
}
.nav-item.active {
  background: #ebeaed;
  color: #263141;
}
.nav-item.active svg {
  color: #a374f9;
}
.sidebar-footer {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 18px 25px;
  color: #818995;
  font-size: 12px;
  border-top: 1px solid #f2f2f5;
  white-space: nowrap;
}
.tingting-logo {
  opacity: 0.45;
  display: block;
  width: 144px;
  max-width: 100%;
  height: auto;
  flex-shrink: 0;
}
.sidebar-footer:has(.tingting-logo) {
  padding: 10px 16px;
  justify-content: center;
}
.sidebar-footer .tingting-logo {
  width: 112px;
}
.workspace {
  margin-left: var(--sidebar);
  transition: margin-left 0.18s;
}
.topbar {
  height: 72px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26px;
  background: white;
}
.breadcrumb {
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}
.account-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}
.inbox-button {
  border: 1px solid var(--border);
  height: 38px;
  width: 38px;
}
.notification-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 6px;
  height: 6px;
  background: var(--purple);
  border-radius: 50%;
  border: 1px solid white;
}
.account {
  display: flex;
  align-items: center;
  gap: 10px;
}
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f4eaff;
  color: #9a3eee;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
}
.account-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.account-copy strong {
  font-size: 14px;
  font-weight: 600;
}
.account-copy small {
  font-size: 12px;
  color: #7d8696;
}
main {
  max-width: 1800px;
  margin: auto;
  padding: 28px 28px 20px;
  outline: none;
}
.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}
.page-heading h1 {
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -0.65px;
  background: linear-gradient(105deg, #129dff 0%, #a850f4 85%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  display: inline-block;
}
.page-heading p {
  font-size: 13px;
  color: var(--muted);
  margin-top: 7px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: white;
  padding: 10px 13px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
  color: #536071;
}
.button:hover {
  background: #f8f8fb;
  border-color: #cfd3df;
}
.metric-section {
  margin-bottom: 24px;
}
.section-eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 2px 10px;
  color: #616b7b;
  font-size: 12px;
  font-weight: 500;
}
.quiet-label {
  color: #8c93a1;
  font-weight: 400;
}
.metric-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 23px 0;
  box-shadow: 0 1px 3px #182b4002;
}
.metric {
  padding: 0 24px;
  min-width: 0;
}
.metric + .metric {
  border-left: 1px solid var(--border);
}
.metric-label {
  display: flex;
  gap: 9px;
  align-items: center;
  color: #777f8b;
  font-size: 13px;
  line-height: 20px;
}
.metric-label svg {
  color: #a1aaba;
  flex-shrink: 0;
}
.metric-value {
  font-size: 29px;
  font-weight: 600;
  letter-spacing: -0.8px;
  margin-top: 10px;
  color: #2a2e34;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.calls-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 22px 0;
  margin-top: 28px;
  overflow: hidden;
}
.card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.card-heading h2 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.25px;
}
.card-heading p {
  font-size: 13px;
  color: #818794;
  margin-top: 7px;
}
.text-link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #7a5aca;
  font-weight: 500;
}
.text-link:hover {
  color: #963fea;
}
.table-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  margin: 20px 0 17px;
}
.search-field {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 11px;
  width: 280px;
  max-width: 65%;
  color: #939cab;
}
.search-field input {
  width: 100%;
  height: 36px;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--ink);
  font-size: 12px;
  min-width: 0;
}
.search-field:focus-within {
  outline: 2px solid #ccb7ff;
  outline-offset: 2px;
}
.search-field input::placeholder {
  color: #9299a5;
}
.direction-filter select {
  border: 1px solid var(--border);
  border-radius: 8px;
  height: 36px;
  padding: 0 29px 0 12px;
  background: #fff;
  color: #667082;
  font-size: 12px;
}
.table-scroll {
  overflow: auto;
}
table {
  border-collapse: collapse;
  width: 100%;
  text-align: left;
  font-size: 13px;
  white-space: nowrap;
}
th {
  font-size: 12px;
  color: #566070;
  background: #f8f9fb;
  font-weight: 500;
  padding: 13px 12px;
  border-bottom: 1px solid var(--border);
}
td {
  height: 55px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
  color: #4c5666;
}
tbody tr:last-child td {
  border-bottom: 0;
}
tbody tr:hover {
  background: #fcfcfe;
}
.caller-cell {
  font-weight: 500;
  color: #263142;
  font-variant-numeric: tabular-nums;
}
.direction {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.direction.inbound svg {
  color: #7590a2;
}
.direction.outbound svg {
  color: #9d85b7;
}
.date-cell {
  color: #858c9b;
  font-size: 12px;
}
.duration-cell {
  font-variant-numeric: tabular-nums;
}
.badge {
  display: inline-block;
  border-radius: 6px;
  background: #f0f1f5;
  color: #717b8a;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 500;
  text-transform: capitalize;
}
.badge.answered {
  background: #edfbf2;
  color: #208b4b;
}
.badge.missed,
.badge.abandoned {
  background: #fff0f0;
  color: #c56669;
}
.badge.voicemail {
  background: #f3eeff;
  color: #8d60c7;
}
.table-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--border);
  padding: 15px 0;
  font-size: 11px;
  color: #9198a5;
  margin-top: 3px;
}
.calling-banner {
  display: flex;
  align-items: center;
  gap: 15px;
  background: linear-gradient(110deg, #fafbff, #fcfaff);
  border: 1px solid #eeebf7;
  border-radius: 12px;
  padding: 20px 22px;
  margin-top: 22px;
}
.calling-banner-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: white;
  border: 1px solid #ece9f4;
  border-radius: 11px;
  color: #9470da;
  flex-shrink: 0;
}
.calling-banner h2 {
  font-size: 14px;
  font-weight: 500;
  color: #434553;
}
.calling-banner p {
  font-size: 12px;
  color: #8a8d9b;
  margin-top: 5px;
}
.primary-button {
  margin-left: auto;
  background: #fff;
  border-color: #e2d9f5;
  color: #7654b8;
  font-size: 12px;
}
.primary-button:hover {
  background: #f3eefe;
  border-color: #cabbec;
}
.page-footer {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #a0a5ae;
  padding: 23px 2px 0;
}
.footer-separator {
  padding: 0 7px;
  color: #c9ccd3;
}
.skeleton {
  background: linear-gradient(90deg, #f0f1f4, #fafafa, #f0f1f4);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 5px;
}
.metric-skeleton {
  height: 32px;
  width: 65px;
  margin-top: 10px;
}
.row-skeleton {
  height: 13px;
  width: 75%;
}
.account-skeleton {
  width: 130px;
  height: 30px;
}
.empty-state {
  padding: 42px 20px;
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
}
.empty-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  background: #f6f3fc;
  border: 1px solid #efebf6;
  border-radius: 15px;
  color: #a490be;
  margin-bottom: 17px;
}
.empty-state h3 {
  font-size: 15px;
  font-weight: 500;
}
.empty-state p {
  font-size: 13px;
  color: var(--muted);
  margin: 9px 0 17px;
}
.notice,
.error-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  margin-bottom: 20px;
  border-radius: 9px;
  font-size: 13px;
}
.notice {
  background: #f6f1ff;
  color: #7c55af;
  border: 1px solid #e9ddff;
}
.error-notice {
  background: #fff5f3;
  color: #a4483d;
  border: 1px solid #f3d7d2;
}
.notice a,
.error-notice a {
  margin-left: auto;
  text-decoration: underline;
  white-space: nowrap;
}
.error-notice svg,
.notice svg {
  flex-shrink: 0;
}
.spinning {
  animation: spin 1s linear infinite;
}
.mobile-menu,
.mobile-close,
.sidebar-scrim {
  display: none;
}
.is-collapsed {
  --sidebar: 76px;
}
.is-collapsed .brand-row {
  padding: 0 20px;
  height: 114px;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.is-collapsed .brand {
  flex: 0;
}
.is-collapsed .brand-name,
.is-collapsed .nav-item span,
.is-collapsed .nav-label,
.is-collapsed .sidebar-footer {
  display: none;
}
.is-collapsed .navigation {
  padding: 0 13px 20px;
}
.is-collapsed .nav-item {
  justify-content: center;
  padding: 11px 0;
}
.is-collapsed .nav-group + .nav-group {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (min-width: 1600px) {
  :root {
    --sidebar: 280px;
  }
  main {
    padding: 34px;
  }
  .metric-card {
    padding: 28px 0;
  }
  .metric {
    padding: 0 26px;
  }
  .metric-value {
    font-size: 31px;
  }
  td {
    height: 59px;
  }
  .topbar {
    height: 78px;
  }
  .brand-row {
    height: 86px;
  }
  .nav-item {
    padding: 12px;
  }
}
@media (max-width: 1100px) {
  .metric {
    padding: 0 16px;
  }
  .metric-label {
    font-size: 11px;
    gap: 7px;
  }
  .metric-value {
    font-size: 26px;
  }
  main {
    padding: 24px 20px;
  }
  .account-actions {
    gap: 12px;
  }
  .calling-banner {
    flex-wrap: wrap;
  }
  .primary-button {
    margin-left: 57px;
  }
  .table-footer {
    flex-wrap: wrap;
  }
}
@media (max-width: 760px) {
  .app,
  .is-collapsed {
    --sidebar: 256px;
  }
  .workspace,
  .is-collapsed .workspace {
    margin-left: 0;
  }
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s;
    width: 256px;
  }
  .mobile-open .sidebar {
    transform: translateX(0);
  }
  .mobile-menu,
  .mobile-close {
    display: inline-flex;
  }
  .collapse-button {
    display: none;
  }
  .mobile-open .sidebar-scrim {
    display: block;
    position: fixed;
    inset: 0;
    border: 0;
    background: #24263550;
    z-index: 25;
  }
  .brand-row,
  .is-collapsed .brand-row {
    height: 76px;
    flex-direction: row;
    justify-content: initial;
    padding: 0 17px;
    gap: 12px;
  }
  .is-collapsed .brand {
    flex: 1;
  }
  .is-collapsed .brand-name,
  .is-collapsed .nav-item span,
  .is-collapsed .nav-label {
    display: block;
  }
  .is-collapsed .sidebar-footer {
    display: flex;
  }
  .is-collapsed .navigation {
    padding: 0 15px 20px;
  }
  .is-collapsed .nav-item {
    justify-content: flex-start;
    padding: 11px 10px;
  }
  .is-collapsed .nav-group + .nav-group {
    border: 0;
    padding-top: 0;
    margin-top: 23px;
  }
  .topbar {
    padding: 0 16px;
    height: 66px;
  }
  .breadcrumb {
    font-size: 16px;
  }
  .account-copy {
    display: none;
  }
  .account-actions {
    gap: 9px;
  }
  .avatar {
    width: 35px;
    height: 35px;
  }
  .inbox-button {
    height: 34px;
    width: 34px;
  }
  main {
    padding: 23px 16px 18px;
  }
  .page-heading {
    margin-bottom: 23px;
  }
  .page-heading h1 {
    font-size: 25px;
  }
  .page-heading p {
    font-size: 12px;
  }
  .refresh-button {
    font-size: 12px;
    padding: 9px 11px;
  }
  .metric-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0;
  }
  .metric {
    padding: 19px 17px;
  }
  .metric:nth-child(3) {
    border-left: 0;
  }
  .metric:nth-child(n + 3) {
    border-top: 1px solid var(--border);
  }
  .metric-label {
    font-size: 12px;
  }
  .metric-value {
    font-size: 27px;
  }
  .metric-section {
    margin-bottom: 20px;
  }
  .calls-card {
    padding: 20px 14px 0;
    margin-top: 24px;
  }
  .card-heading h2 {
    font-size: 16px;
  }
  .card-heading p {
    font-size: 12px;
  }
  .text-link {
    font-size: 11px;
    white-space: nowrap;
  }
  .table-toolbar {
    gap: 8px;
  }
  .search-field {
    max-width: 62%;
    padding: 0 8px;
  }
  .direction-filter select {
    max-width: 135px;
    padding: 0 8px;
    font-size: 11px;
  }
  .calling-banner {
    padding: 18px 16px;
    gap: 12px;
  }
  .calling-banner h2 {
    font-size: 13px;
  }
  .calling-banner p {
    font-size: 11px;
  }
  .primary-button {
    margin-left: 54px;
  }
  .page-footer {
    font-size: 10px;
  }
  .skip-link {
    left: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* Persistent navigation and call surface. */
.navigation-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 16px 14px;
  padding: 8px 10px;
  background: #f8f9fb;
  border: 1px solid #edf0f5;
  border-radius: 8px;
  color: #909aaa;
}
.navigation-search input {
  border: 0;
  outline: 0;
  background: none;
  width: 100%;
  min-width: 0;
  font-size: 12px;
  color: #536172;
}
.is-collapsed .navigation-search {
  display: none;
}
.module-main {
  padding: 0;
  max-width: none;
}
.phone-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.availability-wrap {
  position: relative;
}
.availability-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #e5e9ed;
  border-radius: 7px;
  padding: 7px 9px;
  font-size: 11px;
  background: #fbfcfd;
  white-space: nowrap;
}
.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a6adb9;
  flex-shrink: 0;
}
.state-available .status-dot,
.status-dot.available,
.connected .status-dot,
.healthy .status-dot {
  background: #23a46b;
}
.state-on_call .status-dot {
  background: #428def;
}
.state-not_ready .status-dot,
.state-on_break .status-dot,
.state-acw .status-dot,
.status-dot.away {
  background: #e6aa45;
}
.dnd-label {
  font-size: 9px;
  background: #fff0f0;
  color: #bd5c60;
  border-radius: 3px;
  padding: 2px 4px;
}
.phone-connection {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  color: #8a94a4;
  font-size: 10px;
  white-space: nowrap;
}
.phone-connection.connected {
  color: #42836c;
}
.dialer-toggle {
  font-size: 11px;
  padding: 8px 11px;
  border-color: #e7def7;
  color: #8c64c4;
}
.dialer-toggle.on-call {
  background: #ecf9f2;
  color: #248762;
  border-color: #c5ead8;
}
.availability-menu {
  position: absolute;
  right: 0;
  top: 40px;
  z-index: 60;
  width: 235px;
  background: white;
  border: 1px solid #e4e7ef;
  box-shadow: 0 12px 40px #26314215;
  border-radius: 12px;
  padding: 14px;
}
.availability-menu h3 {
  font-size: 13px;
  margin-bottom: 10px;
}
.availability-menu p {
  font-size: 11px;
  color: #8190a0;
  line-height: 1.5;
  margin-bottom: 8px;
}
.availability-menu > button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 7px;
  background: white;
  font-size: 12px;
}
.availability-menu > button:hover {
  background: #f7f5fc;
}
.availability-menu label {
  display: block;
  font-size: 11px;
  color: #7a8595;
  margin: 8px 0;
}
.availability-menu select {
  display: block;
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  border: 1px solid #e5e7ed;
  border-radius: 7px;
  font-size: 12px;
}
.phone-dock {
  position: fixed;
  right: 24px;
  top: 86px;
  width: 345px;
  max-height: calc(100dvh - 102px);
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e4e7ef;
  border-radius: 17px;
  box-shadow:
    0 20px 70px #212d4626,
    0 4px 12px #212d460a;
  z-index: 65;
  padding: 19px;
}
.phone-dock-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.phone-dock-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.phone-dock-title h2 {
  font-size: 15px;
  font-weight: 600;
}
.phone-dock-title p {
  font-size: 11px;
  color: #8a94a4;
  margin-top: 4px;
}
.phone-health {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  border-top: 1px solid #edf0f5;
  border-bottom: 1px solid #edf0f5;
  padding: 12px 0;
  font-size: 10px;
  color: #8793a3;
}
.phone-health > span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.phone-health .healthy {
  color: #238961;
}
.phone-message {
  font-size: 11px;
  color: #9d7550;
  background: #fff9f1;
  border: 1px solid #f1e4d4;
  border-radius: 8px;
  padding: 10px;
  line-height: 1.5;
  display: flex;
  gap: 6px;
  margin-top: 12px;
}
.phone-message button {
  border: 0;
  background: none;
  color: inherit;
  align-self: flex-start;
}
.number-field {
  display: flex;
  align-items: center;
  padding: 20px 0 10px;
}
.number-field input {
  border: 0;
  background: none;
  outline: 0;
  width: 100%;
  min-width: 0;
  text-align: center;
  font-size: 23px;
  letter-spacing: 0.5px;
  color: #39485a;
}
.number-field input::placeholder {
  font-size: 19px;
  color: #b2b9c5;
  letter-spacing: 0;
}
.dialer-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin: 10px 0 16px;
}
.dialer-keypad button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid transparent;
  background: #fafbfc;
  border-radius: 10px;
  padding: 10px;
  min-height: 54px;
}
.dialer-keypad button:hover {
  background: #f5f0fe;
  border-color: #e6d9fa;
}
.dialer-keypad strong {
  font-size: 22px;
  font-weight: 500;
  color: #495469;
}
.dialer-keypad small {
  font-size: 8px;
  letter-spacing: 1.3px;
  color: #959eac;
}
.call-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 13px;
  font-size: 13px;
  font-weight: 500;
}
.call-button.answer {
  background: #249b74;
  color: white;
}
.call-button.hangup {
  background: #e3616b;
  color: white;
}
.call-button:disabled {
  background: #e9edf1;
  color: #a6afba;
  cursor: not-allowed;
  opacity: 1;
}
.phone-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid #edf0f5;
}
.phone-footer button {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 0;
  font-size: 9px;
  color: #8290a1;
  padding: 0;
}
.call-identity {
  text-align: center;
  padding: 18px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.call-avatar {
  height: 56px;
  width: 56px;
  border-radius: 50%;
  background: #f4edff;
  color: #9c73d7;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
}
.call-identity h3 {
  font-size: 18px;
  font-weight: 500;
}
.call-identity p,
.call-identity > span {
  font-size: 12px;
  color: #8d96a5;
}
.call-clock {
  font-size: 24px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
}
.call-identity .recording-cue {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: #d26172;
}
.incoming-buttons {
  display: flex;
  gap: 10px;
}
.call-controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-bottom: 15px;
}
.call-controls button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  border: 1px solid #e9edf2;
  background: #fff;
  padding: 12px 5px;
  border-radius: 10px;
  color: #68778a;
}
.call-controls span {
  font-size: 10px;
}
.call-controls button.selected {
  background: #f2ebff;
  color: #9268ca;
  border-color: #dcccfa;
}
.active-call-pill {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 55;
  display: flex;
  gap: 10px;
  align-items: center;
  background: #249b74;
  color: white;
  border: 0;
  border-radius: 13px;
  padding: 15px 19px;
  box-shadow: 0 7px 25px #239b7330;
  font-size: 12px;
}
.topbar {
  position: relative;
  z-index: 40;
}
@media (max-width: 1200px) {
  .phone-connection span:last-child {
    display: none;
  }
  .account-actions {
    gap: 10px;
  }
  .phone-toolbar {
    gap: 7px;
  }
  .topbar {
    padding: 0 17px;
  }
  .account-copy {
    display: none;
  }
}
@media (max-width: 760px) {
  .phone-toolbar {
    gap: 5px;
  }
  .phone-connection {
    display: none;
  }
  .availability-pill {
    font-size: 10px;
    padding: 6px;
  }
  .dialer-toggle {
    padding: 7px;
  }
  .dialer-toggle span {
    display: none;
  }
  .account-actions .inbox-button {
    display: none;
  }
  .account-actions {
    gap: 5px;
  }
  .breadcrumb {
    font-size: 14px;
    max-width: 130px;
    overflow: hidden;
  }
  .breadcrumb > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .phone-dock {
    right: 10px;
    top: 76px;
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 88px);
  }
  .is-collapsed .navigation-search {
    display: flex;
  }
  .active-call-pill {
    right: 10px;
    bottom: 12px;
    max-width: calc(100vw - 20px);
  }
}
.availability-menu {
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
}
@media (max-width: 760px) {
  .phone-connection {
    display: flex;
    padding: 5px;
  }
  .phone-connection > span:last-child {
    display: none;
  }
}
/* Branded startup state, visible in the static export before JavaScript loads. */
.connect-loading {
  display: grid;
  place-items: center;
  min-height: min(60dvh, 560px);
  padding: 36px 24px;
  text-align: center;
}
.connect-loading--page {
  min-height: 100vh;
  min-height: 100dvh;
  background: #f8f9fc;
}
.connect-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}
.connect-loading-emblem {
  position: relative;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  margin-bottom: 24px;
}
.connect-loading-emblem::before {
  content: "";
  position: absolute;
  inset: -34px;
  border-radius: 50%;
  background: radial-gradient(circle, #e9e1fa90, #e3f4fc50 48%, transparent 70%);
}
.connect-loading-orbit {
  position: absolute;
  inset: 0;
  border: 2px solid #e8e5f2;
  border-top-color: var(--accent);
  border-right-color: var(--blue);
  border-radius: 50%;
  animation: connect-loading-turn 1.6s linear infinite;
}
.connect-loading .brand-mark {
  position: relative;
  width: 64px;
  height: 64px;
}
.connect-loading-brand {
  color: var(--ink);
  font-size: 27px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.7px;
  overflow-wrap: anywhere;
}
@keyframes connect-loading-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .connect-loading-orbit { animation: none; }
}
@media (max-height: 360px) {
  .connect-loading { padding: 20px; }
  .connect-loading-emblem { width: 86px; height: 86px; margin-bottom: 16px; }
  .connect-loading .brand-mark { width: 52px; height: 52px; }
  .connect-loading-brand { font-size: 23px; }
}

/* One navigation hierarchy and one canvas for the Connect workspace. */
:root {
  --sidebar: 232px;
}
.brand-row {
  height: 72px;
}
.topbar {
  height: 72px;
  padding: 0 28px;
}
.nav-group + .nav-group {
  margin-top: 20px;
}
.nav-label {
  font-size: 11px;
  color: #8a91a0;
  padding: 0 10px 6px;
}
.nav-item {
  min-height: 38px;
  padding: 9px 10px;
  font-size: 13px;
  gap: 11px;
}
.nav-item.active {
  background: #f0ecfa;
  color: #61479c;
}
.nav-item.active svg {
  color: #8963cd;
}
.nav-empty {
  padding: 12px;
  font-size: 12px;
  color: #758096;
  line-height: 1.6;
}
.breadcrumb {
  gap: 10px;
  font-size: 17px;
}
.breadcrumb small {
  color: #848c9b;
  font-size: 13px;
  font-weight: 400;
}
.breadcrumb-divider {
  color: #c4c8d1;
}
.section-navigation {
  display: flex;
  gap: 26px;
  padding: 0 30px;
  min-height: 52px;
  border-bottom: 1px solid #e9ebf1;
  background: #fff;
  overflow-x: auto;
  scrollbar-width: thin;
}
.section-navigation a {
  display: flex;
  align-items: center;
  white-space: nowrap;
  color: #737c8c;
  font-size: 12px;
  padding: 17px 0 14px;
  border-bottom: 2px solid transparent;
}
.section-navigation a:hover {
  color: #634a9b;
}
.section-navigation a.active {
  color: #7854bc;
  border-color: #9c80d8;
  font-weight: 600;
}
.native-page {
  padding: 28px 30px 40px;
  background: #fafbfd;
  min-height: calc(100dvh - 124px);
  color: #293243;
}
.native-page-heading {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 22px;
}
.native-page-heading h1 {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.75px;
  line-height: 1.3;
}
.native-page-heading p {
  font-size: 12px;
  color: #7b8391;
  line-height: 1.6;
  margin-top: 7px;
}
.native-heading-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.native-heading-actions .button {
  min-height: 36px;
  font-size: 12px;
  padding: 9px 12px;
}
.native-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid #e3e6ed;
  border-radius: 8px;
  background: white;
  color: #7d8492;
}
.native-select select {
  border: none;
  color: #465064;
  font: inherit;
  font-size: 12px;
  background: transparent;
  padding: 9px 18px 9px 0;
}
.native-input,
.native-date-range input,
.native-filters input,
.native-filters select {
  border: 1px solid #e1e5ed;
  background: white;
  border-radius: 8px;
  color: #465064;
  padding: 9px 11px;
  font: inherit;
  font-size: 12px;
  min-width: 0;
}
.native-date-range {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin-bottom: 20px;
  padding: 16px;
  border: 1px solid #e5e8f0;
  background: white;
  border-radius: 10px;
}
.native-date-range label {
  display: grid;
  gap: 7px;
  font-size: 12px;
  color: #7b8391;
}
.native-date-range .primary-button {
  padding: 10px 16px;
  font-size: 12px;
}
.native-export {
  position: relative;
}
.native-export summary {
  cursor: pointer;
  list-style: none;
}
.native-export summary::-webkit-details-marker {
  display: none;
}
.native-export > div {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  right: 0;
  width: 170px;
  background: #fff;
  border: 1px solid #e3e6ed;
  border-radius: 9px;
  padding: 5px;
  box-shadow: 0 6px 24px #25324712;
}
.native-export a {
  display: block;
  padding: 10px;
  font-size: 12px;
  border-radius: 5px;
}
.native-export a:hover {
  background: #f4f1fb;
}
.native-report-body {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.native-report-body.is-refreshing {
  opacity: 0.6;
  pointer-events: none;
}
.report-scope {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 10px;
  color: #9097a5;
  margin-top: -8px;
}
.native-stats {
  display: grid;
  background: white;
  border: 1px solid #e4e7ee;
  border-radius: 12px;
  overflow: hidden;
  padding: 23px 0;
}
.native-stats.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.native-stats.borderless {
  border: 0;
  border-top: 1px solid #eff0f5;
  border-radius: 0 0 12px 12px;
}
.native-stat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 22px;
  min-width: 0;
}
.native-stat + .native-stat {
  border-left: 1px solid #edf0f5;
}
.native-stat-label {
  color: #808797;
  font-size: 12px;
}
.native-stat > strong {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.8px;
  font-variant-numeric: tabular-nums;
}
.native-stat-detail {
  font-size: 11px;
  color: #9198a7;
  line-height: 1.5;
}
a.native-stat:hover {
  color: #7959b2;
}
.native-grid {
  display: grid;
  gap: 22px;
  min-width: 0;
}
.native-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.native-grid.chart-grid {
  grid-template-columns: minmax(0, 1.65fr) minmax(260px, 1fr);
}
.native-panel {
  background: #fff;
  border: 1px solid #e4e7ee;
  border-radius: 12px;
  min-width: 0;
  overflow: hidden;
}
.native-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px;
}
.native-panel h2 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.native-panel-heading p {
  font-size: 11px;
  color: #939aaa;
  line-height: 1.5;
  margin-top: 6px;
}
.native-panel-heading a {
  color: #9674c7;
  font-size: 11px;
  white-space: nowrap;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.native-live-strip {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid #e4e7ee;
  border-radius: 12px;
}
.live-caption {
  display: grid;
  grid-template-columns: 6px auto;
  column-gap: 7px;
  align-items: center;
  padding-right: 22px;
  border-right: 1px solid #edf0f5;
}
.live-caption strong {
  font-size: 11px;
  font-weight: 600;
}
.live-caption small {
  grid-column: 2;
  font-size: 9px;
  color: #a0a6b1;
  margin-top: 5px;
  white-space: nowrap;
}
.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #45b38d;
}
.is-stale .live-dot {
  background: #eab277;
}
.native-live-strip > a {
  display: flex;
  align-items: center;
  gap: 7px;
}
.native-live-strip > a strong {
  font-size: 18px;
  font-weight: 600;
}
.native-live-strip > a span {
  font-size: 10px;
  color: #8f97a5;
  white-space: nowrap;
}
.native-live-strip .live-open {
  margin-left: auto;
  font-size: 11px;
  color: #8e71b8;
  white-space: nowrap;
}
.native-chart {
  height: 204px;
  display: flex;
  padding: 10px 22px 0;
  gap: 10px;
}
.chart-scale {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 26px;
  color: #a0a7b6;
  font-size: 9px;
  width: 30px;
}
.chart-bars {
  flex: 1;
  display: flex;
  align-items: stretch;
  gap: 5px;
  min-width: 0;
  background: repeating-linear-gradient(
    to top,
    transparent 0,
    transparent calc(50% - 1px),
    #f0f1f6 calc(50% - 1px),
    #f0f1f6 50%
  );
}
.chart-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  background: none;
  padding: 0;
  border: 0;
  min-width: 0;
  position: relative;
}
.chart-column:disabled {
  opacity: 1;
  cursor: default;
}
.chart-bar-track {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: end;
  justify-content: center;
}
.chart-bar {
  min-height: 2px;
  width: 72%;
  max-width: 42px;
  border-radius: 5px 5px 0 0;
  background: #b9a5e5;
}
.chart-column:hover .chart-bar,
.chart-column:focus-visible .chart-bar {
  background: #8f73c8;
}
.chart-tick {
  padding-top: 10px;
  height: 30px;
  color: #9aa2b1;
  font-size: 9px;
  white-space: nowrap;
}
.chart-footnote {
  padding: 8px 22px 18px;
  font-size: 10px;
  color: #a0a6b3;
}
.outcome-summary {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 22px 22px 32px;
}
.outcome-donut {
  height: 140px;
  width: 140px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.outcome-donut > div {
  border-radius: 50%;
  width: 116px;
  height: 116px;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.outcome-donut strong {
  font-size: 28px;
  font-weight: 600;
}
.outcome-donut span {
  font-size: 10px;
  color: #8e96a4;
}
.outcome-legend {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 17px;
}
.outcome-legend a {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: #8c94a2;
}
.outcome-legend strong {
  margin-left: auto;
  color: #444f61;
  font-weight: 500;
}
.legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c9d0dc;
}
.legend-dot.answered {
  background: #9782df;
}
.legend-dot.missed {
  background: #f0b779;
}
.legend-dot.voicemail {
  background: #d8dfe9;
}
.native-table-scroll {
  overflow-x: auto;
}
.native-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  white-space: nowrap;
}
.native-table th {
  background: #fafbfc;
  border-block: 1px solid #eef0f5;
  font-weight: 500;
  text-align: left;
  color: #8891a0;
  padding: 0;
}
.native-table th button {
  background: none;
  padding: 12px 18px;
  border: 0;
  font: inherit;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 8px;
}
.native-table th button svg {
  opacity: 0.45;
}
.native-table td {
  padding: 15px 18px;
  border-bottom: 1px solid #f0f1f5;
  color: #5f6a7d;
}
.native-table tr:last-child td {
  border: 0;
}
.native-table td a {
  color: #58637a;
  font-weight: 500;
}
.native-table td a:hover {
  color: #8c66c2;
}
.native-table tbody tr:hover {
  background: #fcfbfe;
}
.table-person {
  display: flex;
  align-items: center;
  gap: 9px;
}
.mini-avatar {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #f1eef9;
  color: #9376c7;
  font-size: 11px;
}
.native-chip {
  display: inline-flex;
  padding: 4px 7px;
  background: #f2f4f7;
  color: #7b8494;
  border-radius: 6px;
  font-size: 10px;
  text-transform: capitalize;
}
.native-chip.positive {
  background: #effaf5;
  color: #479d7b;
}
.table-search {
  display: flex;
  gap: 9px;
  align-items: center;
  color: #949dae;
  margin: 0 22px 18px;
}
.table-search input {
  padding: 9px 0;
  border: 0;
  outline: 0;
  min-width: 0;
  flex: 1;
  font: inherit;
  font-size: 12px;
  color: #546073;
}
.table-search:focus-within {
  box-shadow: 0 1px #b9a5e5;
}
.table-search span {
  font-size: 10px;
  white-space: nowrap;
}
.native-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 34px 20px;
  min-height: 170px;
  text-align: center;
  gap: 8px;
}
.empty-symbol {
  background: #f5f3fa;
  color: #aa98c9;
  border-radius: 12px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
}
.native-empty h3 {
  font-size: 13px;
  font-weight: 500;
  color: #777e8f;
}
.native-empty p {
  font-size: 11px;
  color: #9ba2b0;
  line-height: 1.7;
  max-width: 280px;
}
.native-loading {
  padding: 90px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #949eae;
  font-size: 13px;
}
.keyword-list {
  padding: 0 22px 22px;
  display: grid;
  gap: 18px;
}
.keyword-list a {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 12px;
}
.keyword-list a > span {
  width: 100px;
  color: #738097;
}
.keyword-meter {
  flex: 1;
  background: #f6f4fb;
  border-radius: 4px;
  height: 7px;
}
.keyword-meter span {
  display: block;
  height: 100%;
  background: #c0ace9;
  border-radius: 4px;
}
.keyword-list strong {
  font-weight: 500;
  color: #8c94a3;
}
.comparison-bars {
  padding: 0 22px 22px;
  display: grid;
  gap: 14px;
  max-height: 400px;
  overflow: auto;
}
.comparison-bars a {
  display: grid;
  grid-template-columns: minmax(100px, 180px) 1fr 65px;
  gap: 20px;
  align-items: center;
  font-size: 12px;
  color: #738097;
}
.comparison-bars a > div {
  background: #f7f5fb;
  height: 14px;
  border-radius: 3px;
}
.comparison-bars i {
  background: #baa5e4;
  height: 100%;
  display: block;
  border-radius: 3px;
}
.comparison-bars strong {
  font-size: 11px;
  font-weight: 500;
  text-align: right;
}
.native-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.native-filters .button,
.native-filters .text-button {
  font-size: 12px;
}
.native-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  border-top: 1px solid #eef0f5;
  color: #9199a7;
  font-size: 11px;
}
.native-pagination > div {
  display: flex;
  gap: 8px;
}
.native-pagination .button {
  padding: 7px 10px;
  font-size: 11px;
}
@media (min-width: 1600px) {
  .native-page {
    padding: 32px 36px;
  }
  .native-grid,
  .native-report-body {
    gap: 26px;
  }
  .native-stat > strong {
    font-size: 30px;
  }
}
@media (max-width: 1240px) {
  .native-live-strip {
    flex-wrap: wrap;
    gap: 16px;
  }
  .native-grid.chart-grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(250px, 1fr);
  }
  .outcome-summary {
    flex-direction: column;
    gap: 20px;
    padding-top: 8px;
  }
  .outcome-legend {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .outcome-legend a {
    min-width: 43%;
  }
  .outcome-donut {
    height: 110px;
    width: 110px;
  }
  .outcome-donut > div {
    height: 90px;
    width: 90px;
  }
  .native-stat {
    padding: 0 15px;
  }
  .native-stat-detail {
    font-size: 10px;
  }
}
@media (max-width: 1024px) {
  .native-page-heading {
    flex-direction: column;
    gap: 16px;
  }
  .native-grid.two,
  .native-grid.chart-grid {
    grid-template-columns: 1fr;
  }
  .outcome-summary {
    flex-direction: row;
  }
  .outcome-legend {
    flex-direction: column;
  }
  .native-stats.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 24px;
  }
  .native-stat:nth-child(3) {
    border-left: 0;
  }
  .native-stat > strong {
    font-size: 24px;
  }
  .breadcrumb small,
  .breadcrumb-divider {
    display: none;
  }
  .section-navigation {
    gap: 22px;
    padding-inline: 24px;
  }
}
@media (max-width: 760px) {
  .topbar {
    height: 68px;
    padding: 0 16px;
  }
  .brand-row {
    height: 68px;
  }
  .native-page {
    padding: 22px 16px;
  }
  .native-page-heading h1 {
    font-size: 22px;
  }
  .native-page-heading p {
    font-size: 11px;
  }
  .native-live-strip {
    padding: 16px;
  }
  .live-caption {
    border: 0;
  }
  .native-live-strip .live-open {
    margin-left: 0;
  }
  .native-stats {
    padding-block: 18px;
  }
  .report-scope {
    font-size: 9px;
    flex-wrap: wrap;
  }
  .native-panel-heading {
    padding: 18px 16px;
  }
  .native-panel-heading p {
    font-size: 10px;
  }
  .native-table th button,
  .native-table td {
    padding-inline: 14px;
  }
  .chart-tick {
    font-size: 8px;
  }
  .chart-bars {
    gap: 3px;
  }
  .section-navigation {
    padding-inline: 16px;
    gap: 20px;
  }
  .native-date-range .primary-button {
    margin: 0;
  }
  .native-heading-actions {
    width: 100%;
  }
  .native-filters > input {
    width: 100%;
  }
  .native-pagination {
    padding: 14px 16px;
    flex-wrap: wrap;
  }
  .native-pagination span {
    font-size: 10px;
  }
}
.native-dialog {
  border: 1px solid #e4e7ee;
  border-radius: 16px;
  padding: 0;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  color: #3a4457;
  box-shadow: 0 20px 100px #1f293733;
}
.native-dialog.wide {
  width: min(850px, calc(100vw - 32px));
}
.native-dialog::backdrop {
  background: #28324766;
  backdrop-filter: blur(3px);
}
.native-dialog-heading {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eef0f5;
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
}
.native-dialog h2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.3px;
}
.native-dialog form,
.native-dialog-body {
  padding: 24px;
}
.native-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.native-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  color: #727d90;
}
.native-field input,
.native-field textarea,
.native-field select {
  border: 1px solid #dfe4ed;
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
  color: #4b576c;
  min-width: 0;
  background: #fff;
}
.native-field textarea {
  resize: vertical;
}
.native-field small {
  color: #8791a3;
  font-size: 11px;
  line-height: 1.5;
}
.native-field.full-width {
  grid-column: 1 / -1;
}
.native-field.checkbox-field {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}
.native-field input[type="checkbox"] {
  accent-color: #9171c9;
}
.native-form-actions {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.native-form-actions .primary-button {
  padding: 10px 20px;
  font-size: 13px;
}
.native-success {
  padding: 12px 16px;
  border: 1px solid #d9eee2;
  background: #f4fbf7;
  border-radius: 8px;
  color: #418263;
  font-size: 12px;
  margin-block: 14px;
}
.native-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.native-row-actions button {
  font-size: 11px;
  padding: 6px 10px;
}
.native-danger {
  color: #b25757 !important;
}
.native-dialog .error-notice {
  margin-block: 15px;
  font-size: 12px;
}
.native-form-grid + .error-notice {
  margin-top: 20px;
}
.native-page .native-stat-label,
.native-page .native-stat-detail,
.native-page .native-panel-heading p,
.native-page .report-scope,
.native-page .chart-footnote {
  color: #727d8e;
}
.native-page .native-empty p,
.native-page .chart-scale,
.native-page .chart-tick,
.native-page .live-caption small {
  color: #778294;
}
@media (max-width: 760px) {
  .native-form-grid {
    grid-template-columns: 1fr;
  }
  .native-form-actions .primary-button {
    margin: 0;
  }
  .native-dialog-heading,
  .native-dialog form,
  .native-dialog-body {
    padding: 18px;
  }
}
.query-filters {
  padding: 18px;
  border: 1px solid #e4e7ee;
  border-radius: 12px;
  background: white;
  margin-bottom: 22px;
}
.query-filter-row {
  display: flex;
  gap: 10px;
  align-items: end;
  flex-wrap: wrap;
}
.query-filter-row > .native-form-grid {
  flex: 1;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  min-width: 240px;
  gap: 10px;
}
.query-filter-row .native-field {
  font-size: 10px;
  gap: 6px;
}
.query-filter-row .native-field input,
.query-filter-row .native-field select {
  height: 36px;
  font-size: 12px;
  padding: 8px 10px;
}
.query-filter-row .button {
  min-height: 36px;
  font-size: 11px;
  padding: 8px 10px;
}
.query-filter-row .text-button {
  font-size: 11px;
  height: 36px;
}
.advanced-filters {
  padding-top: 20px;
  margin-top: 18px;
  border-top: 1px solid #eff0f5;
}
.advanced-filters > .native-form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.table-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  color: #59687e;
  font: inherit;
  font-weight: 500;
}
.table-link small {
  display: block;
  font-weight: 400;
  font-size: 10px;
  color: #929daf;
  margin-top: 5px;
}
.tag-list {
  display: flex;
  gap: 4px;
}
.conversation-detail-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.conversation-detail-header > div > span + span {
  font-size: 11px;
  margin-left: 12px;
  color: #788496;
}
.conversation-detail-header p {
  font-size: 12px;
  color: #788496;
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.recording-player {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  background: #f8f9fc;
  padding: 12px;
  border-radius: 10px;
  font-size: 11px;
  margin-bottom: 24px;
}
.recording-player audio {
  height: 34px;
  flex: 1;
  min-width: 180px;
}
.recording-player a {
  color: #9376bc;
}
.native-tabs {
  display: flex;
  align-items: center;
  gap: 22px;
  border-bottom: 1px solid #e8ebf1;
  overflow-x: auto;
  margin-bottom: 20px;
}
.native-tabs button {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 14px 0;
  font: inherit;
  font-size: 12px;
  color: #7d8799;
  white-space: nowrap;
  text-transform: capitalize;
}
.native-tabs button[aria-selected="true"] {
  border-color: #a182d7;
  color: #7955b1;
}
.native-dialog .detail-form {
  padding: 0;
}
.summary-content {
  font-size: 13px;
  line-height: 1.8;
  color: #667288;
}
.summary-content > p,
.summary-list > p {
  white-space: pre-wrap;
  margin-block: 10px;
}
.summary-content h3 {
  font-size: 13px;
  margin-block: 16px 8px;
}
.summary-details {
  display: grid;
  gap: 12px;
}
.summary-details > div {
  border-bottom: 1px solid #eff1f5;
  padding-bottom: 14px;
}
.summary-details dt {
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
  color: #8b769f;
}
.summary-details dd {
  margin: 5px 0 0;
}
.summary-list {
  display: grid;
  gap: 10px;
}
.native-help {
  color: #838fa2;
  font-size: 12px;
  line-height: 1.7;
  margin-block: 12px;
}
.voicemail-player {
  width: 100%;
  margin-block: 20px;
  height: 40px;
}
.button.selected {
  background: #f4eefb;
  border-color: #d7c8ec;
  color: #8967bc;
}
@media (max-width: 760px) {
  .query-filter-row > .native-form-grid {
    grid-template-columns: 1fr;
    width: 100%;
  }
  .advanced-filters > .native-form-grid {
    grid-template-columns: 1fr;
  }
  .conversation-detail-header {
    flex-direction: column;
  }
  .native-row-actions {
    flex-wrap: wrap;
  }
  .native-tabs {
    gap: 16px;
  }
}
.phone-label-compact {
  display: none;
}
.phone-connection .phone-label-full {
  display: inline;
}
.additional-numbers {
  margin-top: 24px;
  border-top: 1px solid #eef0f5;
  padding-top: 20px;
}
.additional-numbers h3 {
  font-size: 13px;
  margin-bottom: 14px;
}
.additional-number {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.additional-number input {
  width: 35%;
}
.selection-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  font-size: 11px;
  color: #818c9f;
}
.selection-toolbar label {
  display: flex;
  align-items: center;
  gap: 9px;
}
.selection-toolbar input {
  accent-color: #a081d5;
}
.selection-toolbar > span {
  margin-left: auto;
}
.selection-toolbar .button {
  padding: 7px 10px;
  font-size: 11px;
}
.import-mapping {
  margin-block: 16px;
  flex-wrap: wrap;
}
.back-link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: #9773c6;
  font-size: 12px;
  margin-bottom: 22px;
}
.contact-profile-grid {
  display: grid;
  grid-template-columns: minmax(230px, 0.8fr) minmax(0, 2fr);
  gap: 22px;
}
.contact-facts {
  padding: 22px;
}
.contact-facts dl {
  margin-block: 22px;
  display: grid;
  gap: 14px;
}
.contact-facts dl > div {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  font-size: 11px;
}
.contact-facts dt {
  color: #939aab;
}
.contact-facts dd {
  margin: 0;
  text-align: right;
  color: #647189;
}
.contact-phone {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  margin-block: 16px;
}
.contact-facts h3 {
  font-size: 12px;
  margin: 22px 0 12px;
}
.contact-facts .tag-list {
  flex-wrap: wrap;
}
.tag-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-size: 11px;
  margin-top: 16px;
}
.tag-form input.native-input {
  width: 100%;
}
.tag-remove {
  border: 0;
  background: none;
  color: inherit;
  padding: 0 0 0 5px;
  display: inline-flex;
  align-items: center;
}
.profile-tabs {
  margin-inline: 22px;
}
.contact-summaries {
  padding: 0 22px;
}
.contact-summaries article {
  border-bottom: 1px solid #edf0f5;
  padding: 20px 0;
  font-size: 12px;
  color: #718096;
}
.contact-summaries article > div {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
}
.contact-summaries p {
  white-space: pre-wrap;
  line-height: 1.7;
}
.native-heading-actions .primary-button {
  font-size: 12px;
  padding: 10px 14px;
}
@media (max-width: 1200px) {
  .phone-connection .phone-label-full {
    display: none;
  }
  .phone-connection .phone-label-compact {
    display: inline;
    font-size: 10px;
  }
  .contact-profile-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .native-heading-actions .primary-button {
    margin: 0;
  }
  .additional-number {
    flex-wrap: wrap;
  }
  .additional-number input {
    width: 42%;
  }
  .phone-connection .phone-label-compact {
    font-size: 9px;
  }
}
.task-view-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-block: 18px;
}
.task-view-toolbar > span {
  font-size: 11px;
  color: #8793a8;
  margin-right: auto;
}
.task-view-toolbar .button {
  font-size: 11px;
  padding: 8px 12px;
}
.task-board {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 18px;
  scroll-snap-type: x proximity;
}
.task-lane {
  flex: 0 0 254px;
  padding: 14px;
  border-radius: 12px;
  background: #f1f3f8;
  min-height: 400px;
  scroll-snap-align: start;
}
.task-lane h2 {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: #718199;
  text-transform: capitalize;
  padding: 2px 2px 14px;
}
.task-lane h2 span {
  font-size: 11px;
  color: #a1aabb;
}
.task-card {
  border: 1px solid #e4e8f1;
  border-radius: 10px;
  padding: 14px;
  background: #fff;
  margin-bottom: 12px;
}
.task-card-labels {
  display: flex;
  gap: 6px;
  align-items: center;
}
.task-card-labels input {
  margin-left: auto;
  accent-color: #a285cf;
}
.task-card-title {
  background: none;
  border: 0;
  padding: 12px 0 8px;
  color: #515f75;
  text-align: left;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}
.task-card-title:hover {
  color: #9572bc;
}
.task-card p {
  color: #8794a7;
  font-size: 11px;
  margin-bottom: 12px;
}
.task-scheduled {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #939eaf;
}
.task-card-footer {
  border-top: 1px solid #eff1f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  color: #9da5b4;
  font-size: 10px;
}
.task-card-footer > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.task-lane-empty {
  text-align: center;
  margin-top: 60px;
  color: #aab1be;
  font-size: 11px;
}
.task-detail-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
  color: #8e98aa;
  font-size: 11px;
}
.task-detail-summary .button {
  margin-left: auto;
  font-size: 12px;
}
.task-comments h3 {
  font-size: 14px;
}
.task-comments article {
  padding: 16px 0;
  border-bottom: 1px solid #edf0f5;
  font-size: 12px;
  color: #8190a4;
}
.task-comments article strong {
  font-weight: 500;
  color: #5f6e85;
}
.task-comments article time {
  font-size: 10px;
  margin-left: 10px;
}
.task-comments article p {
  margin-top: 10px;
  line-height: 1.7;
  white-space: pre-wrap;
}
.native-dialog .task-comments form {
  padding: 24px 0 0;
}

/* Native administration shares the same page canvas and form rhythm. */
.native-editor {
  max-width: 1120px;
  padding: 24px;
}
.native-form-section {
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 0 0 24px;
  margin: 0 0 24px;
  min-width: 0;
}
.native-form-section legend {
  font-size: 15px;
  font-weight: 650;
  color: var(--ink);
  padding: 0 0 16px;
}
.native-form-section:last-of-type {
  margin-bottom: 0;
}
.native-field-errors {
  color: #a32637;
  background: #fff2f3;
  border: 1px solid #f4ccd2;
  border-radius: 10px;
  padding: 16px 32px;
}
.native-key-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.native-key-values dt {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}
.native-key-values dd {
  margin: 0;
  font-size: 14px;
}
.table-secondary {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 5px;
  font-weight: 400;
}
.native-two-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.assignment-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin: 16px 0;
  max-height: 440px;
  overflow: auto;
}
.assignment-options label {
  display: flex;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 14px;
  font-size: 14px;
}
.assignment-options input {
  accent-color: var(--accent);
}
.assignment-options strong {
  font-weight: 550;
}
.assignment-options small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}
.assignment-agent {
  max-width: 380px;
  margin-bottom: 24px;
}
.native-panel > .native-input {
  margin: 0 24px;
  width: calc(100% - 48px);
}
.native-delete,
.native-disclosure {
  padding: 20px 0;
  border-top: 1px solid var(--line);
  margin-top: 24px;
}
.native-delete > summary {
  color: #b33344;
  cursor: pointer;
  font-size: 13px;
}
.native-disclosure > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}
.native-inline-form {
  display: flex;
  gap: 12px;
  padding-bottom: 20px;
}
.native-inline-form .native-input {
  max-width: 360px;
}
.server-form {
  min-width: 0;
}
.server-form > .native-form-actions {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  margin-top: 24px;
}
.native-dialog .server-form {
  padding: 24px;
}
.native-dialog .native-help {
  padding: 0 24px;
}
.native-field select[multiple] {
  min-height: 150px;
}
.native-field select[multiple] option {
  padding: 6px 8px;
}
.native-field input[type="file"] {
  padding: 10px;
  min-height: 42px;
  background: #f8f9fc;
}
.native-dialog > form {
  padding: 24px;
}
.native-dialog .native-dialog-body > form {
  padding: 0;
}
@media (max-width: 1024px) {
  .native-two-columns {
    grid-template-columns: 1fr;
  }
  .native-editor {
    padding: 20px;
  }
}
@media (max-width: 600px) {
  .native-key-values {
    grid-template-columns: 1fr;
  }
  .native-inline-form {
    flex-wrap: wrap;
  }
  .native-editor {
    padding: 16px;
  }
  .native-form-section {
    padding-bottom: 20px;
  }
  .native-dialog .server-form {
    padding: 16px;
  }
}
.setup-guide .primary-button,
.native-page .primary-button,
.native-dialog .primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  background: #8351c9;
  border: 1px solid #8351c9;
  border-radius: 8px;
  color: white;
  font-weight: 550;
  font-size: 13px;
  padding: 10px 16px;
  margin-left: 0;
  white-space: nowrap;
}
.setup-guide .primary-button:hover,
.native-page .primary-button:hover,
.native-dialog .primary-button:hover {
  background: #7240b7;
}
.setup-guide .text-button,
.setup-resume .text-button,
.native-page .text-button,
.native-dialog .text-button {
  border: 0;
  background: transparent;
  color: #7654aa;
  padding: 7px 10px;
  font: inherit;
  font-size: 12px;
  border-radius: 7px;
}
.setup-guide .text-button:hover,
.setup-resume .text-button:hover,
.native-page .text-button:hover,
.native-dialog .text-button:hover {
  background: #f3eefb;
}
.setup-guide button:disabled,
.native-page button:disabled,
.native-dialog button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.native-stats:not(.four) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.report-distribution {
  padding: 0 24px 24px;
}
.report-distribution > div {
  display: grid;
  grid-template-columns: 140px 1fr 50px;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
  font-size: 13px;
}
.report-distribution > div > div {
  height: 8px;
  background: #f1edf7;
  border-radius: 8px;
  overflow: hidden;
}
.report-distribution i {
  height: 100%;
  display: block;
  background: #9b79cb;
  border-radius: 8px;
}
.bi-filter-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.bi-filter-row > * {
  min-width: 0;
  flex: 1;
}
.bi-filter-row > button {
  flex: 0 0 36px;
}
.conversation-review {
  padding: 24px;
  display: grid;
  gap: 14px;
}
.conversation-review h2 {
  font-size: 18px;
}
.conversation-review p {
  font-size: 13px;
  color: var(--muted);
}
.conversation-review audio {
  width: min(100%, 560px);
}
.conversation-review .button {
  justify-self: start;
}
.shift-list {
  display: grid;
  gap: 8px;
}
.shift-list > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.live-workspace {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.live-workspace > .native-page-heading {
  margin-bottom: 0;
}
.live-call-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 350px), 1fr));
  gap: 20px;
}
.native-live-call {
  min-width: 0;
  overflow-wrap: anywhere;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: white;
  padding: 22px;
}
.live-call-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}
.live-call-heading > div:not(.live-call-avatar) {
  min-width: 0;
}
.live-call-heading h2 {
  font-size: 16px;
}
.live-call-heading p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 5px;
}
.live-call-heading > .native-chip {
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: auto;
}
.live-call-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: #f1ebfb;
  color: #8c64c0;
  border-radius: 12px;
  display: grid;
  place-items: center;
}
.native-live-call dl {
  display: grid;
  gap: 12px;
  font-size: 13px;
  padding: 22px 0;
  margin: 0;
}
.native-live-call dl > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.native-live-call dt {
  color: var(--muted);
}
.native-live-call dd {
  min-width: 0;
  text-align: right;
  margin: 0;
}
.live-duration {
  font-variant-numeric: tabular-nums;
}
.live-call-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
.live-search {
  display: block;
  width: 100%;
  max-width: 430px;
  min-height: 40px;
  align-self: flex-start;
}
.connection-indicator {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #aaa7b0;
  margin-right: 6px;
}
.connection-indicator.connected {
  background: #2aaf79;
}
.native-wallboard:fullscreen {
  overflow: auto;
  background: #f8f9fc;
}
.native-wallboard .native-stat > strong {
  font-size: 36px;
}
@media (max-width: 1200px) {
  .phone-connection > span.phone-label-compact {
    display: inline;
    font-size: 10px;
  }
}
@media (max-width: 1024px) {
  .native-stats:not(.four) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .phone-connection > span.phone-label-compact {
    font-size: 9px;
  }
  .live-call-grid {
    grid-template-columns: 1fr;
  }
  .bi-filter-row {
    flex-wrap: wrap;
  }
  .bi-filter-row > * {
    flex-basis: 40%;
  }
  .report-distribution > div {
    grid-template-columns: 90px 1fr 32px;
  }
}
.flow-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  border: 1px solid var(--border);
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  background: #fff;
  min-height: 600px;
}
.flow-palette {
  padding: 16px;
  overflow: auto;
  max-height: 650px;
  border-right: 1px solid var(--border);
}
.flow-palette .native-input {
  width: 100%;
  font-size: 12px;
}
.flow-palette h2 {
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #858398;
  margin: 24px 0 12px;
}
.flow-palette section > button {
  width: 100%;
  display: flex;
  gap: 8px;
  align-items: center;
  border: 0;
  background: transparent;
  border-radius: 7px;
  padding: 10px 6px;
  text-align: left;
  color: #5d6074;
  font-size: 12px;
}
.flow-palette section > button:hover {
  background: #f2eef9;
  color: #8258b4;
}
.flow-canvas-scroll {
  height: 650px;
  overflow: auto;
  background-color: #fafbfe;
  background-image: radial-gradient(#dbdce5 0.9px, transparent 0.9px);
  background-size: 18px 18px;
}
.flow-canvas {
  position: relative;
  min-width: 100%;
  min-height: 100%;
}
.flow-canvas-scaled {
  position: relative;
  width: 3000px;
  height: 3000px;
  transform-origin: top left;
}
.flow-connections {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}
.flow-node {
  position: absolute;
  width: 230px;
  background: #fff;
  border: 1px solid #dad2e7;
  border-radius: 12px;
  box-shadow: 0 3px 9px #39354a0a;
}
.flow-node-heading {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 10px;
  background: #f4f0fc;
  border-radius: 11px 11px 0 0;
}
.post-call .flow-node-heading {
  background: #eef7fc;
}
.flow-node-heading > span {
  font-size: 10px;
  color: #9b90aa;
  margin-left: auto;
}
.flow-drag {
  touch-action: none;
  cursor: grab;
  border: 0;
  background: none;
  display: flex;
  padding: 1px;
  color: #a99aba;
}
.flow-node-name {
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: #625078;
}
.flow-node > p {
  font-size: 11px;
  color: #8c829b;
  padding: 12px 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.flow-node-ports {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 10px 12px;
}
.flow-node-ports > button {
  border: 0;
  background: none;
  font-size: 10px;
  color: #9778bc;
  display: flex;
  align-items: center;
  gap: 6px;
}
.flow-node-ports > button[aria-pressed="true"] {
  color: #5e2dab;
  font-weight: 650;
}
.flow-node.connect-target {
  outline: 2px solid #ceb7ee;
}
.flow-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  background: white;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.flow-toolbar .button {
  font-size: 11px;
  padding: 7px 10px;
}
.flow-connect-hint {
  color: #7954ae;
  display: flex;
  align-items: center;
  gap: 6px;
}
.flow-validation {
  padding: 16px;
  border: 1px solid #efd9b8;
  background: #fffbf3;
  border-radius: 10px;
  margin-bottom: 18px;
  font-size: 12px;
}
.flow-validation > strong {
  display: block;
  margin-bottom: 6px;
}
.flow-validation > button {
  display: block;
  text-align: left;
}
.flow-connection-list {
  padding: 20px;
  margin-top: 20px;
}
.flow-connection-list > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
}
.flow-connection-list .native-inline-form {
  align-items: flex-end;
}
.flow-connection-list .native-form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  flex: 1;
}
.flow-edge-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  border-top: 1px solid var(--border);
  padding: 8px 0;
}
.flow-mappings {
  margin-top: 24px;
}
.flow-mappings h3 {
  font-size: 15px;
}
.native-table audio {
  width: 220px;
  height: 32px;
}
@media (max-width: 1024px) {
  .flow-layout {
    grid-template-columns: 170px minmax(0, 1fr);
  }
  .flow-toolbar {
    flex-wrap: wrap;
  }
  .flow-palette {
    padding: 12px;
  }
}
@media (max-width: 600px) {
  .flow-layout {
    grid-template-columns: 1fr;
  }
  .flow-palette {
    max-height: 190px;
    border-bottom: 1px solid var(--border);
    border-right: 0;
  }
  .flow-palette section {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .flow-palette section h2 {
    width: 100%;
  }
  .flow-palette section > button {
    width: auto;
    border: 1px solid var(--border);
  }
  .flow-connection-list .native-form-grid {
    grid-template-columns: 1fr;
  }
  .flow-canvas-scroll {
    height: 480px;
  }
}
.integration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.integration-card {
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  padding: 24px;
  color: var(--text);
  cursor: pointer;
}
.integration-card:hover {
  border-color: #b493e1;
  background: #fdfbff;
}
.integration-card h2 {
  font-size: 17px;
  margin: 16px 0 8px;
}
.integration-card p {
  color: var(--muted);
  line-height: 1.6;
  min-height: 44px;
}
.integration-card > svg,
.integration-card > span {
  color: var(--accent);
}
.integration-card > span {
  font-size: 13px;
  font-weight: 600;
}
.native-panel > h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
}
.native-panel > p {
  color: var(--muted);
  line-height: 1.6;
}
.secret-value {
  padding: 18px;
  background: #faf7ff;
  border: 1px solid #e5d9f7;
  border-radius: 10px;
  margin: 16px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.secret-value p {
  flex-basis: 100%;
  margin: 0;
  font-size: 13px;
}
.secret-value input {
  flex: 1;
  min-width: 160px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.native-details {
  margin-top: 24px;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}
.native-details summary {
  cursor: pointer;
  font-weight: 600;
}
.dialog-body {
  padding: 24px;
}
.mobile-pairing {
  max-width: 560px;
  text-align: center;
  margin: 0 auto;
}
.mobile-pairing img {
  display: block;
  margin: 24px auto;
}
.mobile-pairing > h2 {
  justify-content: center;
}
.mobile-pairing > .primary-button {
  display: inline-flex;
}
.phone-consult {
  padding: 16px;
  background: #f5f0ff;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
}
.phone-consult strong {
  width: 100%;
}
.call-customer {
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 22px;
}
.call-customer h2 {
  font-size: 22px;
}
.call-customer p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}
.phone-dock .call-controls button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.native-panel:has(> .server-form),
.native-panel:has(> .native-actions),
.native-panel.mobile-pairing {
  padding: 22px;
}
.native-panel:has(> .server-form) > h2,
.native-panel:has(> .native-actions) > h2 {
  margin-bottom: 10px;
}
.native-panel + .native-panel,
.integration-grid + .native-panel {
  margin-top: 22px;
}
.manager-workspace > .native-heading-actions {
  margin-bottom: 20px;
}
.manager-form {
  padding: 24px;
}
.manager-form > h2 {
  font-size: 18px;
  margin-bottom: 12px;
}
.manager-form > p {
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 18px;
}
.manager-tabs {
  display: flex;
  overflow: auto;
  gap: 20px;
  margin: 0 0 24px;
  border-bottom: 1px solid var(--border);
}
.manager-tabs a {
  padding: 14px 0;
  white-space: nowrap;
  font-size: 12px;
  color: var(--muted);
  border-bottom: 2px solid transparent;
}
.manager-tabs a.active {
  color: var(--accent);
  border-color: var(--accent);
}
.operation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.manager-form details {
  margin-top: 22px;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
.manager-form summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.manager-workspace > .native-actions {
  margin: 20px 0;
}
.manager-form .server-form {
  padding: 0;
  margin-top: 16px;
}
.admin-app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px;
}
.admin-model-list {
  display: grid;
  gap: 0;
}
.admin-model-list > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.admin-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 18px 0;
}
.admin-filters > label {
  min-width: 150px;
  flex: 1;
}
.admin-workspace .selection-toolbar select {
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: white;
}

.auth-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f8f9fc;
  padding: 32px;
  gap: 24px;
}
.auth-card {
  width: min(100%, 440px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 10px 40px #242f4910;
}
.auth-card .brand {
  font-weight: 650;
  font-size: 25px;
  display: flex;
  gap: 12px;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
}
.auth-heading {
  margin: 36px 0 26px;
}
.auth-heading h1,
.auth-card > h1 {
  font-size: 25px;
  letter-spacing: -0.6px;
}
.auth-heading p,
.auth-footer,
.auth-brand-footer {
  color: var(--muted);
  font-size: 13px;
}
.auth-card form {
  display: grid;
  gap: 18px;
}
.auth-card form > .primary-button {
  justify-content: center;
  min-height: 44px;
}
.auth-footer {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.auth-brand-footer {
  font-size: 12px;
}
.compact-auth {
  padding: 18px;
  background: white;
}
.compact-auth .auth-card {
  padding: 20px;
  border: 0;
  box-shadow: none;
}
.embedded-phone {
  min-height: 100dvh;
  background: #fff;
  padding: 18px;
  color: var(--ink);
  font-size: 13px;
}
.embedded-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.embedded-heading .brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 20px;
  font-weight: 650;
}
.embedded-heading small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
  margin-top: 3px;
}
.embedded-heading .brand-mark {
  width: 36px;
  height: 36px;
}
.embedded-status {
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 17px 0;
  color: var(--muted);
  font-size: 12px;
}
.embedded-status small {
  margin-left: auto;
}
.embedded-status .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9ca3af;
}
.embedded-status .positive {
  background: #16a576;
}
.embedded-phone .native-tabs {
  gap: 6px;
  padding: 0;
  margin: 0 0 20px;
}
.embedded-phone .native-tabs button {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.embedded-phone .native-tabs button[aria-pressed="true"] {
  color: #8b5cf6;
  border-bottom-color: #8b5cf6;
}
.embedded-number {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
}
.embedded-number .primary-button {
  grid-column: 1/-1;
  justify-content: center;
}
.embedded-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 18px 0;
}
.embedded-keypad button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: white;
  color: var(--ink);
}
.embedded-keypad button:hover {
  background: #f6f3ff;
  border-color: #d8c9ff;
}
.embedded-keypad strong {
  font-size: 22px;
  font-weight: 500;
}
.embedded-keypad small {
  font-size: 9px;
  letter-spacing: 1.3px;
  color: var(--muted);
  min-height: 13px;
}
.embedded-active {
  text-align: center;
  padding: 20px 0 8px;
}
.embedded-active .avatar {
  display: inline-flex;
}
.embedded-active h1 {
  font-size: 21px;
  margin: 14px 0 6px;
}
.embedded-active p {
  color: var(--muted);
  font-size: 12px;
}
.embedded-call-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 22px 0;
}
.embedded-hangup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #dc3b51;
  color: white;
  border: 0;
  border-radius: 24px;
  padding: 12px 24px;
}
.embedded-context {
  background: #f9fafc;
  border-radius: 12px;
  padding: 16px;
  margin-top: 18px;
  overflow-wrap: anywhere;
}
.embedded-context h2 {
  font-size: 13px;
}
.embedded-context h3 {
  font-size: 15px;
}
.embedded-context article {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 12px;
}
.embedded-history {
  display: grid;
  gap: 8px;
}
.embedded-history > button {
  text-align: left;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  color: var(--ink);
}
.embedded-history small {
  display: block;
  color: var(--muted);
  margin-top: 5px;
}
.embedded-history p {
  font-size: 12px;
  line-height: 1.5;
}
.embedded-gate {
  padding: 32px 8px;
}
.embedded-gate h1 {
  font-size: 21px;
}
@media (min-width: 620px) {
  .embedded-phone.full .embedded-content {
    display: grid;
    grid-template-columns: minmax(260px, 360px) 1fr;
    gap: 24px;
  }
  .embedded-phone.full .embedded-context {
    margin: 0;
  }
}
.native-panel + .integration-grid {
  margin-top: 22px;
}
.auth-page .primary-button,
.embedded-phone .primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 16px;
  background: #8351c9;
  border: 1px solid #8351c9;
  border-radius: 8px;
  color: #fff;
  margin-left: 0;
  font-size: 13px;
}
.auth-page .primary-button:disabled,
.embedded-phone button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Shared hosted workspace and platform administration. */
.saas-workspace {
  display: grid;
  align-content: start;
  gap: 22px;
}
.saas-workspace > .native-page-heading { margin-bottom: 0; }
.saas-workspace .native-panel {
  margin: 0;
}
.saas-workspace .native-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.saas-workspace .native-panel-body {
  padding: 22px;
}
.saas-workspace .native-panel .native-panel {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.saas-context-nav,
.saas-actions,
.saas-feature-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.saas-context-nav {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.saas-context-nav a {
  color: var(--accent);
  font-size: 13px;
}
.saas-stack {
  display: grid;
  gap: 16px;
}
.saas-feature {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
}
.saas-inline-note {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f3f0fa;
  color: #695385;
  border-radius: 10px;
  padding: 16px;
  font-size: 13px;
}
.saas-workspace td small {
  display: block;
  padding-top: 4px;
}
.saas-workspace .server-form {
  max-width: 960px;
}

/* Phone actions stay reachable while the call details/keypad scroll. */
.phone-dock { display: flex; flex-direction: column; overflow: hidden; width: 360px; padding: 16px; }
.phone-dock-heading, .phone-health, .phone-dock-call-actions, .phone-footer { flex-shrink: 0; }
.phone-dock-heading { margin-bottom: 12px; }
.phone-dock-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding-right: 3px; }
.phone-dock-call-actions { padding-top: 12px; background: white; }
.phone-dock .call-identity { position: relative; padding: 16px 0 12px; gap: 4px; }
.phone-dock .call-avatar { display: none; }
.phone-dock .call-identity h3 { max-width: 100%; overflow-wrap: anywhere; font-size: 20px; }
.phone-dock .call-clock { font-size: 26px; font-variant-numeric: tabular-nums; }
.phone-dock .call-controls { margin: 4px 0 10px; }
.phone-dock .call-controls button { min-height: 56px; padding: 8px 4px; gap: 5px; }
.phone-dock .call-controls span { font-size: 11px; }
.call-recording-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.call-recording-controls button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px; border: 1px solid #e4e7ef; border-radius: 9px; background: white; font-size: 11px; }
.call-recording-controls button.selected { color: #8956d7; background: #f5efff; border-color: #e7d8ff; }
.phone-dock .phone-footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
  padding-top: 12px;
  gap: 6px 8px;
}
.phone-dock .phone-footer button {
  min-width: 0;
  min-height: 40px;
  justify-content: flex-start;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.4;
  text-align: left;
}
.phone-dock .phone-footer button:not(:disabled):hover { background: #f7f5fb; }
.phone-dock .call-button { min-height: 44px; }
.native-form-section[hidden] { display: none; }
@media (max-width: 760px) { .phone-dock { width: min(360px, calc(100vw - 20px)); top: 76px; max-height: calc(100dvh - 88px); } }
@media (max-height: 540px) { .phone-dock { top: 12px; max-height: calc(100dvh - 24px); } .phone-health { padding: 7px 0; } }

.number-count { font-size: 12px; color: #8b5bd7; background: #f3edfc; padding: 3px 8px; border-radius: 7px; margin-left: 6px; }
.number-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 22px 18px; }
.number-toolbar label { display: flex; align-items: center; gap: 9px; background: #f9fafc; border: 1px solid #e5e8ef; border-radius: 9px; padding: 11px 13px; width: min(430px, 100%); }
.number-toolbar input { border: none; background: none; outline: none; min-width: 0; width: 100%; font-size: 13px; }
.number-primary { display: flex; gap: 11px; align-items: center; }
.number-symbol { display: grid; place-items: center; color: #8b5bd7; background: #f6f1fd; border-radius: 10px; width: 36px; height: 36px; flex-shrink: 0; }
.number-primary strong, .number-destination strong { font-size: 13px; font-weight: 550; }
.number-primary small, .number-destination small { display: block; margin-top: 5px; font-size: 11px; color: #8490a2; white-space: normal; max-width: 260px; }
.number-destination small.warning-text { color: #a86c20; }
.number-directory td { padding-top: 19px; padding-bottom: 19px; }
.number-search-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 22px 0; }
.number-search-form > button { justify-self: start; grid-column: 1 / -1; }
.number-purchase-summary { display: flex; align-items: center; flex-direction: column; gap: 8px; padding: 24px; margin: 18px 0; border: 1px solid #e7e1f1; border-radius: 12px; background: #fcfaff; }
.number-purchase-summary strong { font-size: 24px; }
@media (max-width: 640px) { .number-toolbar { align-items: stretch; flex-direction: column; } .number-search-form { grid-template-columns: 1fr; } }

/* Call panel: same surfaces, type and accent as the workspace. */
.phone-dock.phone-dock-with-context { width: min(420px, calc(100vw - 24px)); padding: 18px; border-color: var(--border); border-radius: 16px; }
.phone-dock-with-context .phone-dock-heading { margin-bottom: 10px; }
.phone-dock-with-context .phone-dock-heading h2 { font-size: 15px; font-weight: 600; }
.phone-dock-with-context .phone-health { margin-bottom: 0; padding: 9px 0; color: var(--muted); }
.phone-dock-with-context .call-identity { padding: 18px 0; display: grid; grid-template-columns: 1fr auto; text-align: left; align-items: center; }
.phone-dock-with-context .call-identity h3 { grid-column: 1; font-size: 22px; font-weight: 600; letter-spacing: -.4px; }
.phone-dock-with-context .call-identity p, .phone-dock-with-context .call-identity > span { grid-column: 1; }
.phone-dock-with-context .call-clock { grid-column: 2; grid-row: 1 / span 3; font-size: 17px; color: var(--muted); letter-spacing: 0; }
.phone-dock-with-context .phone-dock-call-actions { padding-top: 16px; }
.phone-dock-with-context .call-button { border-radius: 10px; min-height: 46px; font-size: 14px; }
.phone-dock-with-context .call-button.hangup { background: #fff1f2; border: 1px solid #f5d7dc; color: #c84e62; }
.phone-dock-with-context .call-button.hangup:hover { background: #fce4e8; }
.phone-dock-with-context .phone-footer { margin-top: 12px; }
.caller-context { min-width: 0; overflow-wrap: anywhere; color: var(--ink); font-size: 13px; line-height: 1.6; }
.caller-context p { margin: 6px 0; }
.caller-context h3 { margin: 0; font-size: 13px; font-weight: 600; }
.caller-context .text-button { font: inherit; font-size: 12px; color: var(--accent); border: 0; background: transparent; padding: 5px 0; cursor: pointer; white-space: nowrap; }
.caller-context .text-button:hover { text-decoration: underline; }
.caller-profile { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; }
.caller-profile > div { min-width: 0; }
.caller-profile h3 { font-size: 15px; }
.caller-profile p { margin: 2px 0; color: var(--muted); font-size: 12px; }
.caller-profile-avatar { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; background: #f3eefb; color: var(--accent); font-size: 12px; font-weight: 600; }
.caller-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 9px; }
.caller-tags span { border: 1px solid var(--border); background: #fafbfc; color: var(--muted); border-radius: 5px; padding: 1px 6px; font-size: 10px; line-height: 1.6; }
.caller-facts { display: flex; gap: 12px; justify-content: space-between; align-items: center; font-size: 11px; color: var(--muted); margin: 0 0 12px; }
.caller-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.caller-section-heading time, .caller-timeline-heading time { font-size: 11px; color: var(--muted); }
.caller-pinned-summary { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 15px; margin-bottom: 12px; }
.caller-current-handoff { border: 2px solid #8b5cf6; border-radius: 12px; background: #f5f3ff; color: #29203f; padding: 16px; margin-bottom: 16px; }
.caller-current-handoff h3 { display: flex; align-items: center; gap: 7px; color: #5b21b6; }
.caller-current-handoff > p { margin: 10px 0; line-height: 1.5; white-space: pre-line; }
.caller-handoff-now { background: #6d28d9; color: white; border-radius: 20px; padding: 3px 9px; font-size: 12px; font-weight: 700; }
.caller-current-handoff .caller-handoff-source { color: #655b78; font-size: 12px; }
.caller-handoff-action { background: white; border-radius: 8px; padding: 12px; border-left: 3px solid #7c3aed; }
.caller-handoff-action > strong { color: #5b21b6; }
.caller-handoff-action p { margin: 5px 0 0; line-height: 1.5; }
.caller-pinned-summary > .caller-section-heading { margin-bottom: 12px; }
.caller-summary-body { font-size: 13px; line-height: 1.65; }
.caller-summary-body ul { margin: 8px 0; padding-left: 17px; }
.caller-summary-body li { padding-left: 2px; margin: 7px 0; }
.caller-summary-body li::marker { color: #aa94c6; }
.caller-summary-body p { white-space: pre-wrap; }
.caller-summary-kind { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--accent); }
.caller-summary-more { margin-top: 8px; font-size: 12px; }
.caller-summary-more summary { cursor: pointer; color: var(--muted); padding: 3px 0; }
.caller-summary-more summary span { margin-left: 4px; font-size: 10px; }
.caller-summary-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #f0f1f5; }
.caller-call-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.caller-call-meta > span { display: inline-flex; align-items: center; gap: 3px; }
.caller-direction { color: var(--muted); }
.caller-direction.missed { color: #c84e62; }
.caller-call-meta .caller-resolved { color: #218568; }
.caller-contact-notes { margin: 8px 0; color: var(--muted); font-size: 12px; }
.caller-contact-notes summary { cursor: pointer; padding: 6px 0; }
.caller-recent-calls { border-top: 1px solid var(--border); margin-top: 12px; }
.caller-recent-calls > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 14px 0; color: var(--muted); font-size: 12px; list-style: none; }
.caller-recent-calls > summary::-webkit-details-marker { display: none; }
.caller-recent-calls > summary::after { content: "+"; font-size: 17px; }
.caller-recent-calls[open] > summary::after { content: "−"; }
.caller-history-count { margin-left: auto; background: #f5f6f9; border-radius: 5px; padding: 0 6px; font-size: 10px; }
.caller-timeline-item { padding: 12px 0; border-top: 1px solid #f0f1f5; }
.caller-timeline-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.caller-timeline-item .caller-summary-body { font-size: 12px; margin-top: 8px; }
.caller-timeline-item > .text-button { margin-top: 6px; }
.caller-empty { padding: 12px 0; color: var(--muted); font-size: 12px; }
.phone-toast { position: fixed; right: 24px; bottom: 70px; max-width: min(400px, calc(100vw - 24px)); z-index: 66; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 32px #20293815; display: flex; align-items: center; gap: 12px; font-size: 13px; }
@media (max-width: 480px) {
  .phone-dock.phone-dock-with-context { right: 12px; padding: 14px; }
  .caller-pinned-summary { padding: 12px; }
  .caller-summary-footer { align-items: flex-start; }
}

/* Connect Saas Manager: the same tokens and controls, with operator context. */
.manager-brand { line-height: 1.1; }
.manager-brand small { display: block; margin-top: 5px; font-size: 11px; font-weight: 500; letter-spacing: .02em; color: var(--muted); }
.saas-console { max-width: 1500px; margin-inline: auto; width: 100%; display: grid; gap: 22px; }
.saas-console .native-panel, .saas-console > .native-page-heading { margin: 0; }
.console-eyebrow { color: var(--accent) !important; font-size: 11px !important; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.console-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.console-metric { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 22px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
a.console-metric:hover { border-color: var(--accent); background: #fcfaff; }
.console-metric-label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.console-metric-label svg { color: var(--accent); }
.console-metric > strong { font-size: 30px; letter-spacing: -.9px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.console-metric-detail { display: flex; justify-content: space-between; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.console-two-columns { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; align-items: start; }
.console-section { min-width: 0; overflow: hidden; }
.console-section .native-panel-heading { align-items: center; gap: 16px; }
.console-section h2 { font-size: 16px; }
.console-section .native-panel-heading p { max-width: 700px; line-height: 1.6; }
.console-link { color: var(--accent); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.console-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.console-workspace-name { display: flex; flex-direction: column; gap: 5px; }
.console-workspace-name small { font-size: 11px; color: var(--muted); line-height: 1.5; max-width: 330px; overflow-wrap: anywhere; }
.console-number, .console-credit-added { font-variant-numeric: tabular-nums; }
.console-credit-added { color: #187958; }
.console-attention-links { padding: 4px 22px 16px; display: grid; }
.console-attention-links a { display: flex; align-items: center; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--border); color: var(--ink); text-decoration: none; }
.console-attention-links a:last-child { border-bottom: 0; }
.console-attention-links a:hover span { color: var(--accent); }
.console-attention-links a > svg { color: var(--muted); }
.console-attention-links a > span { flex: 1; font-size: 13px; }
.console-attention-links small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); margin-top: 5px; }
.console-attention-links strong { min-width: 29px; height: 29px; display: grid; place-items: center; background: #f4effb; color: var(--accent); border-radius: 8px; font-size: 13px; }
.console-attention-workspaces { border-top: 1px solid var(--border); padding: 4px 22px; background: #fafbfe; }
.console-attention-workspaces > div { display: flex; align-items: center; gap: 12px; padding: 13px 0; font-size: 11px; }
.console-attention-workspaces .console-workspace-name { flex: 1; }
.console-attention-workspaces > div > span { color: var(--muted); }
.console-service-list { padding: 0 22px 16px; }
.console-service-list > div { display: flex; align-items: center; gap: 14px; padding: 19px 0; }
.console-service-list > div > div { flex: 1; }
.console-service-list strong { font-size: 13px; font-weight: 500; }
.console-service-list small { display: block; font-size: 11px; line-height: 1.5; color: var(--muted); margin-top: 6px; }
.console-service-list .console-link { font-size: 11px; }
.console-service-icon { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; background: #f5f0fc; color: var(--accent); }
.console-usage { display: flex; align-items: center; gap: 40px; padding: 8px 24px 30px; }
.console-usage > div:first-child { display: flex; flex-direction: column; gap: 8px; min-width: 180px; }
.console-usage strong { font-size: 32px; font-weight: 600; letter-spacing: -.8px; }
.console-usage span, .console-usage small { color: var(--muted); font-size: 12px; }
.console-bars { flex: 1; display: flex; align-items: end; gap: 6px; height: 150px; border-bottom: 1px solid var(--border); padding: 0 0 22px; }
.console-bar { height: 100%; flex: 1; min-width: 5px; max-width: 65px; display: flex; align-items: center; justify-content: end; flex-direction: column; position: relative; }
.console-bar span { display: block; width: 75%; max-width: 26px; background: #a183dd; border-radius: 4px 4px 0 0; min-height: 4px; }
.console-bar small { position: absolute; bottom: -20px; font-size: 9px; white-space: nowrap; }
.console-bar:nth-child(even) small { display: none; }
.console-integration-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.console-integration { display: flex; flex-direction: column; align-items: start; gap: 18px; padding: 26px; }
.console-integration-top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.console-integration p { color: var(--muted); font-size: 13px; line-height: 1.7; max-width: 480px; }
.console-integration h2 { font-size: 19px; }
.console-integration small { color: var(--muted); font-size: 11px; margin-top: auto; }
.console-empty { display: flex; align-items: center; text-align: center; flex-direction: column; gap: 12px; padding: 35px 25px; color: var(--muted); }
.console-empty > svg { color: var(--accent); }
.console-empty h3 { font-size: 15px; font-weight: 500; color: var(--ink); }
.console-empty p { font-size: 12px; line-height: 1.7; max-width: 440px; }
.console-footnote { font-size: 11px; color: var(--muted); line-height: 1.6; }
.console-dialog-intro { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 22px; }
@media (max-width: 1180px) { .console-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); } .console-two-columns { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .console-metrics { gap: 10px; } .console-metric { padding: 16px; gap: 12px; } .console-metric > strong { font-size: 24px; }
  .console-integration-grid { grid-template-columns: 1fr; } .console-usage { flex-direction: column; align-items: stretch; gap: 20px; } .console-bars { flex: auto; }
  .console-section .native-panel-heading { flex-wrap: wrap; } .console-attention-workspaces > div { flex-wrap: wrap; }
  .console-service-list > div { gap: 10px; } .console-service-icon { width: 35px; height: 35px; }
}

.saas-workspace #phone-service, .saas-workspace #agents-access { scroll-margin-top: 90px; }

/* Guided workspace setup and call-flow creation. */
.google-sign-in { margin: 0 0 20px; }
.google-sign-in > div:first-child { min-height: 44px; }
.auth-divider { display: flex; gap: 12px; align-items: center; margin-top: 20px; color: var(--muted, #687083); font-size: 12px; }
.auth-divider::before,.auth-divider::after { content: ""; height: 1px; background: var(--border, #e4e7ed); flex: 1; }
.setup-guide { background: var(--surface, #fff); border: 1px solid var(--border, #e4e7ed); border-radius: 16px; margin: 0 0 24px; overflow: hidden; }
.setup-heading { display: flex; justify-content: space-between; align-items: start; gap: 16px; padding: 24px; background: #f7f7fc; border-bottom: 1px solid #e8e7f2; }
.setup-heading h2 { margin: 8px 0; font-size: 23px; letter-spacing: -.5px; }
.setup-heading p,.setup-detail p { color: #687083; line-height: 1.65; font-size: 14px; }
.setup-layout { display: grid; grid-template-columns: minmax(210px, 1fr) 2fr; }
.setup-layout nav { min-width: 0; padding: 16px; border-right: 1px solid #e8e7f2; }
.setup-layout ol { list-style: none; padding: 0; margin: 0; }
.setup-layout nav button { display: flex; width: 100%; gap: 10px; align-items: center; text-align: left; border: 0; border-radius: 8px; background: transparent; padding: 12px; color: #515b70; cursor: pointer; }
.setup-layout nav button.selected { background: #f0effa; color: #5545a0; }
.setup-layout nav button svg { flex-shrink: 0; }
.setup-layout nav small { display: block; font-size: 10px; margin-top: 4px; color: #687083; }
.setup-detail { padding: 28px; min-width: 0; }
.setup-detail h3 { font-size: 21px; margin: 12px 0; }
.setup-detail .positive { display: flex; align-items: center; gap: 6px; color: #16805c; }
.setup-pager,.setup-resume { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.setup-pager { margin-top: 24px; padding-top: 16px; border-top: 1px solid #e8e7f2; }
.setup-resume { margin-bottom: 20px; padding: 12px 16px; background: #f7f7fc; border-radius: 10px; font-size: 13px; }
.guide-stages { list-style: none; display: flex; padding: 0; margin: 0 0 24px; gap: 10px; justify-content: space-between; }
.guide-stages li { display: flex; align-items: center; gap: 8px; color: #737b8c; font-size: 12px; }
.guide-stages li span { border-radius: 50%; background: #eff0f4; width: 26px; height: 26px; display: grid; place-items: center; }
.guide-stages .current { color: #5948a1; font-weight: 600; }
.guide-stages .current span { color: white; background: #6555ad; }
.guide-stages .done span { color: #16805c; background: #e6f5ee; }
.guide-stage-body h2 { font-size: 23px; letter-spacing: -.4px; }
.guide-stage-body > p { font-size: 14px; color: #687083; line-height: 1.65; }
.guide-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0; }
.guide-choice { display: grid; grid-template-columns: 18px 1fr; gap: 10px; border: 1px solid #dce0e8; padding: 18px; border-radius: 12px; cursor: pointer; }
.guide-choice.selected { border-color: #7564bb; background: #f8f7fd; }
.guide-choice span { grid-column: 2; font-size: 12px; line-height: 1.6; color: #687083; }
.guide-destination { border: 1px solid #e4e7ed; border-radius: 12px; padding: 18px; margin: 16px 0; min-width: 0; }
.guide-destination legend { font-size: 12px; color: #687083; padding: 0 8px; }
.guide-input-row { display: grid; grid-template-columns: 1fr 2fr; gap: 14px; }
.guide-review { list-style: none; border-left: 2px solid #dfdbea; padding-left: 22px; margin: 24px 10px; }
.guide-review li { display: flex; align-items: center; gap: 12px; padding: 12px 0; font-size: 14px; }
@media(max-width: 650px) {
 .setup-layout,.guide-choice-grid,.guide-input-row { grid-template-columns: minmax(0, 1fr); }
 .setup-heading,.setup-detail { padding: 18px; }
 .setup-layout nav { border-right: 0; border-bottom: 1px solid #e8e7f2; }
 .setup-layout nav ol { display: flex; overflow-x: auto; }
 .setup-layout nav li { flex: 0 0 175px; }
 .guide-stages { gap: 4px; } .guide-stages li { flex-direction: column; font-size: 10px; }
 .setup-resume { align-items: start; flex-direction: column; }
}

/* Global command search: the native modal keeps focus and phone state intact. */
.command-trigger { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; background: #f8f9fc; color: var(--muted); }
.command-trigger kbd, .command-palette kbd { font: 11px var(--font); border: 1px solid var(--border); border-radius: 4px; padding: 2px 5px; color: var(--muted); background: white; white-space: nowrap; }
.command-palette { width: min(660px, calc(100vw - 24px)); max-height: calc(100dvh - 40px); margin: min(12vh, 96px) auto auto; padding: 0; border: 1px solid var(--border); border-radius: 16px; color: var(--ink); background: var(--surface); box-shadow: 0 24px 100px #20293840; overflow: hidden; }
.command-palette[open] { display: flex; flex-direction: column; }
.command-palette::backdrop { background: #20293866; backdrop-filter: blur(3px); }
.command-title { font-size: 12px; font-weight: 600; margin: 18px 20px 0; color: var(--muted); }
.command-input-row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.command-input-row > svg { flex-shrink: 0; color: var(--accent); }
.command-input-row input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--ink); font-size: 16px; padding: 8px 2px; outline-offset: 0; }
.command-status { padding: 12px 20px; font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.command-results { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: 0 8px 8px; }
.command-group { padding: 12px 12px 6px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.command-result { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 8px; cursor: pointer; }
.command-result:hover { background: #f7f5fb; }
.command-result[aria-selected="true"] { background: #f0e8fb; color: #6331a8; }
.command-result > svg { flex-shrink: 0; }
.command-result > span { flex: 1; min-width: 0; }
.command-result strong, .command-result small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.command-result strong { font-size: 14px; font-weight: 600; }
.command-result small { margin-top: 4px; font-size: 12px; color: var(--muted); }
.command-empty { padding: 24px 20px; color: var(--muted); }
.command-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--border); padding: 13px 20px; font-size: 11px; color: var(--muted); background: #fafbfc; }
@media (max-width: 760px) { .command-trigger { padding: 8px; } .command-trigger > span, .command-trigger > kbd { display: none; } .command-palette { margin-top: 16px; } .command-footer { font-size: 10px; } }

.setup-heading > .native-row-actions { flex-wrap: nowrap; flex-shrink: 0; }
.setup-heading .icon-button { padding: 7px; }

/* Compact, consistent spacing for password and Google sign-in. */
.auth-page:has(.auth-card > form) {
  padding: 32px 20px;
  gap: 16px;
}
.auth-card:has(> form) {
  width: min(100%, 420px);
  padding: 32px;
  border-radius: 18px;
  box-shadow: 0 8px 28px #242f4908;
}
.auth-card:has(> form) > .brand {
  font-size: 22px;
  line-height: 32px;
  gap: 10px;
}
.auth-card:has(> form) .brand-mark,
.auth-card:has(> form) .brand-mark img {
  width: 32px;
  height: 32px;
}
.auth-card:has(> form) > .auth-heading {
  margin: 24px 0;
}
.auth-card:has(> form) .auth-heading h1 {
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -.5px;
}
.auth-card:has(> form) .auth-heading p {
  margin-top: 6px;
  line-height: 1.5;
}
.auth-card > .google-sign-in {
  margin: 0 0 20px;
}
.auth-card > .google-sign-in > div:first-child {
  min-height: 40px;
}
.auth-card > .google-sign-in .native-help {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}
.auth-card > .google-sign-in .auth-divider {
  margin-top: 20px;
  line-height: 18px;
  font-size: 11px;
}
.auth-card > form {
  gap: 16px;
}
.auth-card > form > .native-field {
  gap: 6px;
}
.auth-card > form > .native-field > span {
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  color: var(--ink);
}
.auth-card > form > .native-field > input {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 9px;
}
.auth-card > form > div:empty {
  display: none;
}
.auth-card > form > .primary-button {
  min-height: 44px;
  border-radius: 9px;
  margin-top: 4px;
}
.auth-card:has(> form) > .auth-footer {
  display: none;
}
.auth-page:has(.auth-card > form) > .auth-brand-footer .tingting-logo {
  width: 112px;
}
@media (max-width: 480px) {
  .auth-page:has(.auth-card > form) {
    padding: 24px 16px;
  }
  .auth-card:has(> form) {
    padding: 28px 24px;
  }
  .auth-card > form > .native-field > input {
    font-size: 16px;
  }
}
.auth-card > form > .native-field > input:focus-visible {
  border-color: var(--accent);
  outline: 3px solid #8248d226;
  outline-offset: 1px;
}

/* Clear spacing and readable feedback for sign-in states. */
.auth-card > .google-sign-in > .error-notice,
.auth-card > form > .error-notice {
  display: block;
  margin: 0;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
  overflow-wrap: anywhere;
}
.auth-card > .google-sign-in > .error-notice {
  margin-top: 12px;
}
.auth-card > .google-sign-in > p[role="status"] {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.auth-card > .google-sign-in > .error-notice + .native-help {
  margin-top: 12px;
}

/* Focused AI workspace connection card. */
.native-panel.agents-connection {
  max-width: 840px;
  padding: 24px;
}
.agents-connection-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.agents-connection-heading h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.4;
}
.agents-connection-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 20px;
  background: #f1f3f6;
  color: #667085;
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
}
.agents-connection-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.agents-connection-status.is-connected {
  background: #edf8f1;
  color: #28754b;
}
.agents-connection > .agents-connection-description {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.agents-connection > .notice,
.agents-connection > .error-notice {
  margin: 16px 0 0;
}
.agents-connection > .agents-connection-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.agents-connection .agents-connection-actions > button {
  min-height: 40px;
  padding: 9px 14px;
  font-size: 12px;
}
.agents-connection-actions > .agents-disconnect {
  margin-left: auto;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}
.agents-connection-actions > .agents-disconnect:hover:not(:disabled) {
  color: #a4483d;
  background: #fff5f3;
  border-color: #f3d7d2;
}
.agents-connection > .native-details {
  margin-top: 24px;
  padding-top: 16px;
}
.agents-connection > .native-details > summary {
  width: fit-content;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 24px;
}
.agents-connection > .native-details[open] > summary {
  margin-bottom: 16px;
}
.agents-connection > .native-details > .server-form {
  padding: 0;
}
.agents-connection > .native-details > .button {
  margin-top: 12px;
}
@media (max-width: 600px) {
  .native-panel.agents-connection { padding: 20px; }
  .agents-connection > .agents-connection-actions { align-items: stretch; }
  .agents-connection .agents-connection-actions > button { flex: 1 1 180px; min-height: 44px; }
  .agents-connection-actions > .agents-disconnect { margin-left: 0; flex-basis: 100%; }
}

/* A quiet, compact workspace search palette. */
.command-palette {
  width: min(600px, calc(100vw - 32px));
  max-height: min(560px, calc(100dvh - 64px));
  margin: min(14vh, 112px) auto auto;
  border: 1px solid #ffffffcc;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 32px 80px #18202f29, 0 4px 16px #18202f0d, 0 0 0 1px #18202f0a;
}
.command-palette::backdrop {
  background: #18202f33;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.command-palette .command-title,
.command-palette:has(.command-input-row input:placeholder-shown) .command-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.command-palette .command-input-row {
  flex-shrink: 0;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid #eceef2;
}
.command-palette .command-input-row:has(input:focus-visible) {
  border-bottom-color: #c5bbd9;
  box-shadow: inset 0 -1px #c5bbd9;
}
.command-palette .command-input-row > svg {
  width: 20px;
  height: 20px;
  color: #8a909b;
  stroke-width: 1.75;
}
.command-palette .command-input-row input {
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: 17px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -.25px;
  caret-color: var(--accent);
  box-shadow: none;
}
.command-palette .command-input-row input:focus-visible {
  outline: none;
}
.command-palette .command-input-row input::placeholder {
  color: #9297a1;
  opacity: 1;
}
.command-palette .command-input-row .icon-button {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 7px;
  border: 0;
  border-radius: 50%;
  background: #f3f4f6;
  color: #8a909b;
}
.command-palette .command-input-row .icon-button:hover {
  color: #343b48;
  background: #e9ebef;
}
.command-palette button:focus-visible {
  outline: 2px solid #9584b4;
  outline-offset: 2px;
}
.command-palette .command-status {
  flex-shrink: 0;
  padding: 12px 22px 2px;
  font-size: 11px;
  line-height: 18px;
}
.command-palette .command-results {
  max-height: 380px;
  padding: 8px;
  scrollbar-width: thin;
  scrollbar-color: #d7dae1 transparent;
}
.command-palette .command-group {
  padding: 10px 12px 8px;
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: .01em;
  text-transform: none;
  color: #858b96;
}
.command-palette .command-result {
  min-height: 58px;
  padding: 10px 12px;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #303642;
}
.command-palette .command-result:hover {
  background: #f7f8fa;
}
.command-palette .command-result[aria-selected="true"] {
  color: #222833;
  background: #f0f1f5;
  border-color: #e9ebf0;
}
.command-palette .command-result > svg {
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 8px;
  background: #f5f6f8;
  color: #7b8290;
  stroke-width: 1.6;
}
.command-palette .command-result[aria-selected="true"] > svg {
  background: #ffffff;
  color: #6b5b88;
}
.command-palette .command-result strong {
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -.1px;
}
.command-palette .command-result small {
  margin-top: 2px;
  font-size: 11px;
  line-height: 16px;
  color: #858b96;
}
.command-palette kbd {
  min-width: 23px;
  padding: 2px 5px;
  border-color: #e0e3e9;
  border-radius: 5px;
  font-size: 11px;
  line-height: 17px;
  text-align: center;
  color: #8a909b;
  background: #ffffffb3;
  box-shadow: 0 1px 1px #18202f05;
}
.command-palette .command-empty {
  padding: 32px 24px;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}
.command-palette .command-footer {
  flex-shrink: 0;
  gap: 12px;
  padding: 12px 20px;
  border-top-color: #eceef2;
  background: #fafafb;
  color: #8a909b;
  font-size: 10px;
  line-height: 16px;
}
@media (max-width: 600px) {
  .command-palette {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 32px);
    margin-top: 16px;
    border-radius: 16px;
  }
  .command-palette .command-input-row { padding: 12px 14px; gap: 10px; }
  .command-palette .command-input-row input { font-size: 16px; }
  .command-palette .command-input-row .icon-button { flex-basis: 36px; width: 36px; height: 36px; padding: 9px; }
  .command-palette .command-result { min-height: 56px; padding: 9px 10px; gap: 10px; }
  .command-palette .command-footer { padding: 10px 18px; }
}


/* Flow designer dialogs: size the surface to the task, not the canvas. */
.flow-workspace .native-dialog {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  border: 1px solid #e4e7ee;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 64px #20293829, 0 4px 16px #2029380a;
}
.flow-workspace .native-dialog[open] {
  display: flex;
  flex-direction: column;
}
/* Dense steps and the audio library need room for two useful columns. */
.flow-workspace .native-dialog:has(> form > .native-form-grid > .native-field:nth-child(5)),
.flow-workspace .native-dialog:has(> form > .flow-mappings),
.flow-workspace .native-dialog:has(> .native-dialog-body > [aria-label="Add audio"]) {
  width: min(720px, calc(100vw - 32px));
}
.flow-workspace .native-dialog:has(> .guided-flow) {
  width: min(680px, calc(100vw - 32px));
}
.flow-workspace .native-dialog::backdrop {
  background: #20293840;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.flow-workspace .native-dialog-heading {
  flex-shrink: 0;
  position: relative;
  padding: 16px 20px;
  gap: 16px;
}
.flow-workspace .native-dialog-heading h2 {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -.2px;
  overflow-wrap: anywhere;
}
.flow-workspace .native-dialog-heading .icon-button {
  width: 32px;
  height: 32px;
  font-size: 20px;
  color: #858d9c;
}
.flow-workspace .native-dialog > form,
.flow-workspace .native-dialog > .native-dialog-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px;
}
.flow-workspace .native-dialog .native-dialog-body > form {
  padding: 16px 0 20px;
}
.flow-workspace .native-dialog .native-help {
  padding: 0;
  margin: 0 0 18px;
  font-size: 12px;
  line-height: 1.6;
}
.flow-workspace .native-dialog .native-form-grid {
  gap: 16px;
}
.flow-workspace .native-dialog .native-field {
  min-width: 0;
  gap: 6px;
  line-height: 1.5;
}
.flow-workspace .native-dialog .native-field :is(input:not([type="checkbox"]):not([type="radio"]), select:not([multiple])) {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  line-height: 20px;
}
.flow-workspace .native-dialog .native-field textarea {
  width: 100%;
  min-height: 96px;
  line-height: 1.6;
}
/* A key is a short value; its label gets the rest of the space. */
@media (min-width: 761px) {
  .flow-workspace .native-dialog form > .native-form-grid:has(> .native-field select[name="key"]) {
    grid-template-columns: 112px minmax(0, 1fr);
  }
}
.flow-workspace .native-dialog form > .native-form-grid > .native-field:only-child {
  grid-column: 1 / -1;
}
.flow-workspace .native-dialog .native-form-actions {
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #eceef3;
  background: white;
}
.flow-workspace .native-dialog > form > .native-form-actions {
  position: sticky;
  bottom: -20px;
  padding-bottom: 20px;
  margin-bottom: -20px;
  z-index: 1;
}
.flow-workspace .native-dialog .native-form-actions > :is(.button, .primary-button) {
  min-height: 40px;
  margin: 0;
  padding: 9px 14px;
  font-size: 13px;
  line-height: 20px;
  border-radius: 8px;
}
.flow-workspace .native-dialog .native-form-actions > .native-danger {
  margin-right: auto;
  padding-inline: 8px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.flow-workspace .native-dialog .native-form-actions > .native-danger:hover {
  background: #fff3f3;
  border-color: #f5dede;
}
.flow-workspace .native-dialog .flow-mappings {
  margin-top: 20px;
}
.flow-workspace .native-dialog .flow-mappings > .native-panel-heading {
  padding: 0 0 14px;
  gap: 12px;
  flex-wrap: wrap;
}
.flow-workspace .native-dialog .flow-mappings fieldset {
  min-width: 0;
}
.flow-workspace .native-dialog .guide-stage-body > .native-field,
.flow-workspace .native-dialog .guide-stage-body > .button {
  margin-top: 16px;
}
.flow-workspace .native-dialog .guide-stage-body h2 {
  font-size: 20px;
  line-height: 1.35;
  margin-bottom: 8px;
}
@media (max-width: 600px) {
  .flow-workspace .native-dialog {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    border-radius: 12px;
  }
  .flow-workspace .native-dialog-heading { padding: 12px 16px; }
  .flow-workspace .native-dialog-heading .icon-button { width: 40px; height: 40px; }
  .flow-workspace .native-dialog > form,
  .flow-workspace .native-dialog > .native-dialog-body { padding: 16px; }
  .flow-workspace .native-dialog .native-form-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-workspace .native-dialog > form > .native-form-actions { bottom: -16px; padding-bottom: 16px; margin-bottom: -16px; }
  .flow-workspace .native-dialog .native-form-actions > .native-danger { grid-column: 1 / -1; justify-self: start; }
  .flow-workspace .native-dialog .native-form-actions > :only-child { grid-column: 1 / -1; }
  .flow-workspace .native-dialog .native-form-actions > :is(.button, .primary-button),
  .flow-workspace .native-dialog .native-field :is(input:not([type="checkbox"]):not([type="radio"]), select:not([multiple])) { min-height: 44px; }
  .flow-workspace .native-dialog .native-form-actions > :is(.button, .primary-button) { padding-inline: 10px; white-space: normal; text-align: center; }
}

/* Queue setup and hold music: common actions first. */
.queue-music-help { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; padding:14px 16px; margin-bottom:24px; border-radius:10px; background:#f7f8fb; color:var(--muted); font-size:12px; line-height:1.6; }
.queue-music-help a { color:var(--accent); }
.queue-advanced { border-top:1px solid var(--border); padding:18px 0; }
.queue-advanced summary { cursor:pointer; font-size:13px; font-weight:500; color:var(--muted); }
.queue-advanced[open] summary { margin-bottom:20px; }
.music-collection .native-panel-heading { align-items:center; gap:16px; flex-wrap:wrap; }
.music-collection audio { display:block; width:220px; height:34px; }
.music-track-name { display:block; max-width:280px; overflow:hidden; text-overflow:ellipsis; }
.music-empty { padding:24px; border-top:1px solid var(--border); }
.music-empty strong { font-size:14px; font-weight:500; }
.music-empty p { margin:8px 0 16px; color:var(--muted); font-size:13px; line-height:1.6; }
@media(max-width:600px) { .music-collection .native-row-actions { flex-wrap:wrap; } .queue-music-help { gap:10px; } }

/* Shared workspace layout: action spacing, shrinking content and focus. */
.button, .primary-button { vertical-align: middle; }
.native-page .primary-button, .native-dialog .primary-button { line-height: 18px; }
.workspace-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.workspace-actions > .button { min-height: 38px; }
.native-form-actions { flex-wrap: wrap; align-items: center; }
.native-row-actions { flex-wrap: wrap; }
.native-panel-heading { flex-wrap: wrap; }
.native-page-heading > div, .native-panel-heading > div,
.native-dialog-heading > h2, .native-field, .native-stats > *,
.number-primary > div, .number-destination { min-width: 0; }
.native-page-heading h1, .native-panel-heading h2,
.native-dialog-heading h2, .native-field small { overflow-wrap: anywhere; }
.native-dialog-heading { gap: 16px; }
.native-field :is(input, select, textarea) { max-width: 100%; }
.query-filter-row > .native-form-grid { min-width: 0; flex-basis: 360px; }
.native-pagination > div { flex-wrap: wrap; }
.native-table-scroll { max-width: 100%; overscroll-behavior-x: contain; }
.native-table-scroll:focus-visible { outline: 3px solid #bda0ff; outline-offset: -3px; }
textarea:focus-visible, summary:focus-visible { outline: 3px solid #bda0ff; outline-offset: 3px; }
.number-toolbar label:focus-within { border-color: #a382d4; box-shadow: 0 0 0 3px #a382d426; }
.number-toolbar svg, .table-search > svg { flex-shrink: 0; }
.muted { color: #687487; font-size: 13px; line-height: 1.6; }
.number-routing-body > .muted { margin-bottom: 20px; }
.table-empty-actions { display: flex; justify-content: center; padding: 0 20px 24px; }
.notice, .error-notice { flex-wrap: wrap; overflow-wrap: anywhere; }
.notice > span, .error-notice > span { flex: 1 1 180px; min-width: 0; }
button:disabled { cursor: not-allowed; }
button[aria-busy="true"] { cursor: wait; }

@media (max-width: 760px) {
  .native-page :is(.button, .primary-button),
  .native-dialog :is(.button, .primary-button),
  .native-dialog-heading .icon-button { min-height: 44px; }
  .native-dialog-heading .icon-button { min-width: 44px; }
  .native-form-actions > :is(.button, .primary-button) { white-space: normal; text-align: center; }
  .native-panel-heading > .native-heading-actions { width: auto; }
  .table-toolbar { flex-wrap: wrap; }
  .table-toolbar .search-field { flex: 1 1 220px; max-width: 100%; }
  .table-search { flex-wrap: wrap; margin-inline: 16px; }
  .table-search input { flex-basis: 180px; }
  .table-search > span { margin-left: 25px; }
  .number-toolbar { padding-inline: 16px; }
  .number-toolbar label { width: 100%; }
  /* Number actions stay alongside their number on small screens. */
  .number-directory .native-table, .number-directory tbody { display: block; white-space: normal; }
  .number-directory thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .number-directory .native-table tr { display: grid; grid-template-columns: minmax(0, 1fr); padding: 18px 16px; gap: 14px; }
  .number-directory .native-table tr + tr { border-top: 1px solid var(--border); }
  .number-directory .native-table td { display: block; padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; }
  .number-directory td:not(:first-child):not(:last-child)::before { content: attr(data-label); display: block; margin-bottom: 6px; font-size: 11px; font-weight: 600; color: #687487; }
  .number-directory .number-primary small, .number-directory .number-destination small { max-width: none; }
  .number-directory .workspace-actions { padding-top: 4px; }
  .number-directory .workspace-actions > .button { flex: 1 1 120px; white-space: normal; }
}

.number-primary small, .number-destination { overflow-wrap: anywhere; white-space: normal; }
.number-destination { max-width: 260px; }
.number-directory .workspace-actions { flex-wrap: nowrap; }
@media (max-width: 760px) {
  .number-directory .workspace-actions { flex-wrap: wrap; }
  .number-destination { max-width: none; }
}

.native-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.native-actions > .primary-button { margin-left: 0; }
.native-panel:has(> h2) { padding: 22px; }
.native-panel > h2 { margin-bottom: 10px; }
.native-panel > p { margin-block: 8px 16px; }
.native-panel > .table-search:first-child { padding-top: 18px; }
.native-stats + .native-panel { margin-top: 22px; }
.native-page-heading p, .native-panel-heading p { color: #687487; }
@media (max-width: 760px) {
  .native-panel:has(> h2) { padding: 16px; }
  .native-actions > :is(.button, .primary-button) { white-space: normal; }
}

@media (max-width: 760px) {
  .native-page-heading { flex-direction: row; flex-wrap: wrap; }
  .native-page-heading > .native-heading-actions:has(> :only-child) { width: auto; }
  .native-page-heading > div:first-child:not(.native-heading-actions) { flex: 1 1 200px; }
  .number-directory .native-table tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .number-directory td:first-child, .number-directory td:nth-child(2), .number-directory td:last-child { grid-column: 1 / -1; }
}

/* Keep visually hidden table labels inside their horizontal scroll container. */
.native-table-scroll { position: relative; }
.remote-access-panel { padding: 22px; }
.remote-access-panel > .native-panel-heading { padding: 0 0 18px; }
.remote-access-panel > a { display: block; overflow-wrap: anywhere; margin-bottom: 16px; }
@media (max-width: 760px) { .remote-access-panel { padding: 16px; } }

/* Preferences: support the shared settings markup in existing panel releases. */
.native-panel:has(> .native-table-scroll[aria-label="Forwarding rules table"]) {
  padding: 0;
}
.native-panel:has(> .native-table-scroll[aria-label="Forwarding rules table"]) > h2 {
  margin: 0;
  padding: 22px 22px 0;
}
.native-panel:has(> .native-table-scroll[aria-label="Forwarding rules table"]) > p {
  margin: 6px 22px 20px;
  color: #687487;
  font-size: 13px;
  line-height: 1.6;
}
.native-table-scroll[aria-label="Forwarding rules table"] {
  position: relative;
  max-width: 100%;
}
.native-table-scroll[aria-label="Forwarding rules table"] .native-table {
  white-space: normal;
  table-layout: fixed;
}
.native-table-scroll[aria-label="Forwarding rules table"] th button,
.native-table-scroll[aria-label="Forwarding rules table"] td {
  padding: 14px 22px;
}
.native-table-scroll[aria-label="Forwarding rules table"] th:nth-child(1) { width: 30%; }
.native-table-scroll[aria-label="Forwarding rules table"] th:nth-child(2) { width: 18%; }
.native-table-scroll[aria-label="Forwarding rules table"] th:last-child { width: 136px; }
.native-table-scroll[aria-label="Forwarding rules table"] td { overflow-wrap: anywhere; }
.native-table-scroll[aria-label="Forwarding rules table"] td:first-child { color: #3a4457; font-weight: 500; }
.native-table-scroll[aria-label="Forwarding rules table"] td:last-child { text-align: right; }
.native-table-scroll[aria-label="Forwarding rules table"] .text-button {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid #e5ddef;
  border-radius: 8px;
  background: #fff;
  line-height: 18px;
  white-space: nowrap;
}
.native-table-scroll[aria-label="Forwarding rules table"] .text-button:hover {
  background: #f7f3fd;
  border-color: #bba2de;
}
.native-panel:has(> .server-form input[name="auto_record_all_calls"]) {
  padding: 22px;
}
.native-panel:has(> .server-form input[name="auto_record_all_calls"]) > h2 { margin: 0 0 8px; }
.native-panel:has(> .server-form input[name="auto_record_all_calls"]) > p {
  margin: 0 0 16px;
  color: #687487;
  font-size: 13px;
  line-height: 1.6;
}
.server-form:has(input[name="auto_record_all_calls"]) > .native-form-grid { grid-template-columns: minmax(0, 1fr); }
.server-form:has(input[name="auto_record_all_calls"]) .checkbox-field {
  min-height: 44px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  color: #4b576c;
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
}
.server-form input[name="auto_record_all_calls"] {
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
}
.server-form:has(input[name="auto_record_all_calls"]) > .native-form-actions {
  margin-top: 16px;
  padding-top: 16px;
  flex-wrap: wrap;
}
@media (max-width: 760px) {
  .native-panel:has(> .native-table-scroll[aria-label="Forwarding rules table"]) > h2 { padding: 18px 16px 0; }
  .native-panel:has(> .native-table-scroll[aria-label="Forwarding rules table"]) > p { margin: 6px 16px 18px; }
  .native-table-scroll[aria-label="Forwarding rules table"] .native-table,
  .native-table-scroll[aria-label="Forwarding rules table"] tbody { display: block; }
  .native-table-scroll[aria-label="Forwarding rules table"] thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .native-table-scroll[aria-label="Forwarding rules table"] tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-top: 1px solid #eef0f5;
  }
  .native-table-scroll[aria-label="Forwarding rules table"] td { display: block; height: auto; padding: 0; border: 0; min-width: 0; }
  .native-table-scroll[aria-label="Forwarding rules table"] td:nth-child(2) { text-align: right; }
  .native-table-scroll[aria-label="Forwarding rules table"] td:nth-child(3) { grid-column: 1 / -1; }
  .native-table-scroll[aria-label="Forwarding rules table"] td:nth-child(3)::before { content: attr(data-label) ": "; color: #687487; }
  .native-table-scroll[aria-label="Forwarding rules table"] td:last-child { grid-column: 1 / -1; }
  .native-table-scroll[aria-label="Forwarding rules table"] .text-button { min-height: 44px; width: 100%; }
  .native-panel:has(> .server-form input[name="auto_record_all_calls"]) { padding: 18px 16px; }
  .server-form:has(input[name="auto_record_all_calls"]) > .native-form-actions .primary-button {
    min-height: 44px;
    width: 100%;
    margin-left: 0;
    justify-content: center;
  }
}

/* Recent callers open the call-details dialog without leaving Home. */
.caller-cell .text-link {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: inherit;
  text-align: left;
}

/* Shared UI: app/motion.css */
/* Shared by the calling workspace, SaaS console, authentication and embeds.
   Keep feedback immediate: no delayed actions, persistent will-change, or
   animations on live table rows/counters that update during a call. */
:root {
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-enter: 240ms;
  --motion-ease: cubic-bezier(.2, .7, .2, 1);
  --motion-focus: 0 0 0 3px #8248d214;
}

/* A small set of shared timings makes every control feel related. */
:where(button, a, input, select, textarea, summary, [role="option"]) {
  transition:
    background-color var(--motion-base) var(--motion-ease),
    border-color var(--motion-base) var(--motion-ease),
    color var(--motion-base) var(--motion-ease),
    box-shadow var(--motion-base) var(--motion-ease),
    opacity var(--motion-fast) ease,
    translate var(--motion-fast) var(--motion-ease),
    scale var(--motion-fast) var(--motion-ease);
}

/* Press feedback works on touch and keyboard without changing layout. */
:where(button, .button, .primary-button, .nav-item, .console-metric, a.native-stat)
  :where(svg) {
  transition: color var(--motion-base) ease, translate var(--motion-base) var(--motion-ease);
}
:where(button, .button, .primary-button):not(:disabled):not([aria-disabled="true"]):not(.sidebar-scrim):active {
  scale: .975;
  translate: 0 0;
  transition-duration: 70ms;
}
:where(button:disabled, [aria-disabled="true"]) {
  scale: 1;
  translate: 0 0;
}
:where(textarea):focus-visible {
  outline: 3px solid #bda0ff;
  outline-offset: 3px;
}
:where(input, select, textarea):not(:disabled):focus-visible {
  box-shadow: var(--motion-focus);
}
:where(.search-field, .navigation-search, .table-search, .command-input-row) {
  transition: border-color var(--motion-base) ease, box-shadow var(--motion-base) ease;
}
:where(.search-field, .navigation-search, .table-search):focus-within {
  border-color: #bda0df;
  box-shadow: var(--motion-focus);
}
:where(.native-table tbody tr, .calls-card tbody tr) {
  transition: background-color var(--motion-fast) ease;
}
.native-table tbody tr:focus-within {
  background-color: #f8f5fc;
}

/* Elevation belongs to clickable surfaces, so static cards stay quiet. */
:where(a.native-stat, .console-metric) {
  transition: border-color var(--motion-base) ease, box-shadow var(--motion-base) ease,
    background-color var(--motion-base) ease, translate var(--motion-base) var(--motion-ease);
}
@media (hover: hover) and (pointer: fine) {
  :where(.button, .primary-button, .call-button, .command-trigger):not(:disabled):not([aria-disabled="true"]):hover {
    translate: 0 -1px;
    box-shadow: 0 4px 10px #20293810;
  }
  :where(a.native-stat, .console-metric):hover {
    translate: 0 -2px;
    border-color: #d6c6ee;
    box-shadow: 0 6px 18px #2029380d;
  }
  :where(.nav-item, .console-link, .text-link, .text-button):hover > svg:not(.spinning) {
    translate: 2px 0;
  }
  :where(.icon-button, .dialpad button, .call-controls button):not(:disabled):hover {
    box-shadow: inset 0 0 0 1px #8248d21a;
  }
  :where(.button, .primary-button, .call-button, .command-trigger):not(:disabled):active {
    translate: 0 0;
  }
}

.sidebar {
  transition: width var(--motion-enter) var(--motion-ease), transform var(--motion-enter) var(--motion-ease);
}
.workspace {
  transition: margin-left var(--motion-enter) var(--motion-ease);
}

/* Fade page content without creating a transform container for fixed controls.
   No fill-mode: finished animations must not leave stacking contexts behind. */
.native-page, .page-heading, .metric-section, .calls-card, .setup-guide,
.native-empty, .empty-state, .console-empty {
  animation: connect-surface-in var(--motion-enter) var(--motion-ease);
}
.auth-card {
  animation: connect-panel-in 320ms var(--motion-ease);
}
.native-dialog[open], .command-palette[open] {
  animation: connect-panel-in var(--motion-enter) var(--motion-ease);
}
.native-dialog[open]::backdrop, .command-palette[open]::backdrop,
.mobile-open .sidebar-scrim {
  animation: connect-surface-in var(--motion-base) ease;
}
.availability-menu, .phone-dock {
  transform-origin: top right;
  animation: connect-panel-in var(--motion-enter) var(--motion-ease);
}
.phone-toast, .active-call-pill {
  animation: connect-notice-in var(--motion-enter) var(--motion-ease);
}
.native-success, .error-notice, .phone-message {
  animation: connect-notice-in var(--motion-base) var(--motion-ease);
}

/* Show a clear selection change without moving the hit target. */
:where(.native-tabs button, .manager-tabs a, .section-navigation a,
  .setup-layout nav button, .call-controls button, .availability-pill,
  .status-dot, .status-chip, .badge) {
  transition: background-color var(--motion-base) ease, color var(--motion-base) ease,
    border-color var(--motion-base) ease, box-shadow var(--motion-base) ease,
    scale var(--motion-fast) var(--motion-ease);
}
.console-bar > span {
  transform-origin: bottom;
  animation: connect-bar-in 320ms var(--motion-ease);
}

@keyframes connect-surface-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes connect-panel-in {
  from { opacity: 0; transform: translateY(6px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes connect-notice-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes connect-bar-in {
  from { transform: scaleY(.92); }
  to { transform: scaleY(1); }
}

/* Also remove instantaneous spatial jumps, not just their transitions.
   Focus, hover colors, selected states and status text remain available. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  :where(button, a, input, select, textarea, summary, [role="option"], button svg, a svg) {
    scale: none !important;
    translate: none !important;
  }
}

/* Motion refinement: visible travel and complete entrance/exit states. */
:root {
  --motion-fast: 140ms;
  --motion-base: 220ms;
  --motion-enter: 320ms;
  --motion-ease: cubic-bezier(.16, 1, .3, 1);
}
@media (prefers-reduced-motion: no-preference) {
  .button, .primary-button, .icon-button, .command-trigger, .nav-item,
  .native-tabs button, .flow-palette button, .flow-audio-list article {
    transition: background-color 220ms ease, border-color 220ms ease,
      color 180ms ease, box-shadow 220ms ease, translate 220ms var(--motion-ease),
      scale 160ms var(--motion-ease), opacity 180ms ease;
  }
  .button:not(:disabled):active, .primary-button:not(:disabled):active,
  .icon-button:not(:disabled):active, .native-tabs button:not(:disabled):active {
    scale: .95;
    translate: 0 0;
    transition-duration: 90ms;
  }
  .native-dialog[open], .command-palette[open] {
    animation: connect-dialog-enter 320ms var(--motion-ease);
  }
  .native-dialog[open]::backdrop, .command-palette[open]::backdrop {
    animation: connect-surface-in 260ms ease;
  }
  .native-dialog[open][data-leaving="true"], .command-palette[open][data-leaving="true"] {
    animation: connect-dialog-exit 180ms ease-in forwards;
    pointer-events: none;
  }
  .native-dialog[data-leaving="true"]::backdrop, .command-palette[data-leaving="true"]::backdrop {
    animation: connect-fade-out 180ms ease-in forwards;
  }
  .flow-workspace .flow-inspector {
    animation: connect-drawer-enter 340ms var(--motion-ease);
  }
  .flow-workspace .flow-inspector[data-leaving="true"] {
    animation: connect-drawer-exit 180ms ease-in forwards;
    pointer-events: none;
  }
  .phone-dock { animation: connect-dock-enter 340ms var(--motion-ease); }
  .availability-menu { animation: connect-dialog-enter 260ms var(--motion-ease); }
  .phone-dock[data-leaving="true"], .availability-menu[data-leaving="true"] {
    animation: connect-dialog-exit 180ms ease-in forwards;
    pointer-events: none;
  }
  .native-page > .native-heading, .page-heading { animation: connect-content-enter 360ms var(--motion-ease); }
  .flow-audio-tab-content, .flow-audio-now { animation: connect-content-enter 280ms var(--motion-ease); }
  .flow-audio-list article { animation: connect-content-enter 300ms var(--motion-ease) backwards; }
  .flow-audio-list article:nth-child(2) { animation-delay: 30ms; }
  .flow-audio-list article:nth-child(3) { animation-delay: 60ms; }
  .flow-audio-list article:nth-child(4) { animation-delay: 90ms; }
  .flow-audio-list article:nth-child(5) { animation-delay: 120ms; }
  .native-tabs button { position: relative; border-bottom-color: transparent; }
  .native-tabs button::after {
    content: ""; position: absolute; height: 2px; inset: auto 0 0;
    background: #9568d0; transform: scaleX(0); transform-origin: center;
    transition: transform 240ms var(--motion-ease);
  }
  .native-tabs button[aria-selected="true"]::after { transform: scaleX(1); }
  .flow-workspace .flow-node {
    animation: connect-node-enter 300ms var(--motion-ease);
    transition: border-color 200ms ease, box-shadow 240ms ease, scale 180ms var(--motion-ease);
  }
  .flow-workspace .flow-node.is-dragging {
    scale: 1.025; z-index: 3; border-color: #9461cf;
    box-shadow: 0 16px 32px #51337426, 0 0 0 3px #9461cf16;
  }
  .flow-workspace .flow-node-heading :is(button, .flow-drag),
  .flow-workspace .flow-node-ports > button {
    scale: 1; translate: none;
  }
  .flow-workspace .flow-node.selected { box-shadow: 0 0 0 3px #9166c925, 0 8px 22px #51337412; }
  .native-success { animation: connect-feedback-enter 320ms var(--motion-ease); }
  .error-notice { animation: connect-content-enter 260ms var(--motion-ease); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .button:not(:disabled):hover, .primary-button:not(:disabled):hover, .command-trigger:hover {
    translate: 0 -2px; box-shadow: 0 6px 16px #51337418;
  }
  .primary-button:not(:disabled):hover { box-shadow: 0 6px 18px #8248d22e; }
  .button:not(:disabled):active, .primary-button:not(:disabled):active { translate: 0 0; }
  .icon-button:not(:disabled):hover { scale: 1.08; background-color: #f1ebfa; }
  .nav-item:hover { translate: 3px 0; }
  .flow-palette section > button:not(:disabled):hover { translate: 3px 0; background-color: #f3edfb; }
  .flow-audio-list article:hover { border-color: #c7b0e2; box-shadow: 0 3px 12px #5133740c; }
  .flow-workspace .flow-node:not(.is-dragging):hover { border-color: #b79bd8; box-shadow: 0 7px 18px #51337414; }
  .flow-workspace .flow-node-ports > button:hover { background-color: #f0e7fc; box-shadow: 0 0 0 5px #9461cf20; }
}
@keyframes connect-dialog-enter {
  from { opacity: 0; transform: translateY(18px) scale(.965); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes connect-dialog-exit {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(10px) scale(.98); }
}
@keyframes connect-drawer-enter {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes connect-drawer-exit {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(20px); }
}
@keyframes connect-dock-enter {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes connect-content-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes connect-node-enter {
  from { opacity: 0; scale: .94; }
  to { opacity: 1; scale: 1; }
}
@keyframes connect-feedback-enter {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes connect-fade-out { to { opacity: 0; } }

/* Shared UI: app/flow-designer.css */
/* A canvas, a small step list, and settings alongside the selected step. */
.flow-workspace .flow-layout { grid-template-columns: 180px minmax(0, 1fr); height: min(760px, calc(100dvh - 250px)); min-height: 500px; }
.flow-workspace .flow-layout.with-inspector { grid-template-columns: 180px minmax(280px, 1fr) 340px; }
.flow-workspace .flow-palette { max-height: none; padding: 14px 12px; }
.flow-workspace .flow-palette-title { margin: 0 0 14px; font-size: 13px; color: var(--ink); text-transform: none; letter-spacing: 0; }
.flow-workspace .flow-palette section > button { cursor: grab; padding: 11px 8px; border: 1px solid transparent; }
.flow-workspace .flow-palette section > button:hover { border-color: #e1d6f1; }
.flow-workspace .flow-palette section > button:disabled { cursor: not-allowed; }
.flow-workspace .flow-canvas-scroll { height: 100%; min-height: 0; position: relative; touch-action: none; cursor: grab; overscroll-behavior: contain; }
.flow-workspace .flow-canvas-scroll:active { cursor: grabbing; }
.flow-workspace .flow-canvas-scaled { position: absolute; }
.flow-workspace .flow-toolbar { flex-wrap: wrap; padding: 10px 14px; }
.flow-workspace .flow-toolbar .native-row-actions { flex-wrap: wrap; }
.flow-hint { padding: 9px 14px; background: #fff; border-inline: 1px solid var(--border); border-top: 1px solid #f0f1f5; font-size: 11px; line-height: 1.6; color: var(--muted); }
.flow-canvas-empty { position: absolute; top: 32%; left: 50%; transform: translateX(-50%); width: 260px; text-align: center; color: #939ba9; pointer-events: none; z-index: 1; }
.flow-canvas-empty h3 { color: #687182; font-size: 15px; margin: 12px 0 8px; }
.flow-canvas-empty p { font-size: 12px; line-height: 1.6; }
.flow-workspace .flow-node { min-height: 144px; border-color: #dfe2eb; border-radius: 10px; box-shadow: 0 3px 10px #20293809; cursor: default; }
.flow-workspace .flow-node.selected { border-color: #9166c9; box-shadow: 0 0 0 2px #9166c91f, 0 5px 14px #2029380d; }
.flow-workspace .flow-node-heading { height: 44px; padding: 10px; background: #f8f6fc; border-radius: 9px 9px 0 0; cursor: grab; touch-action: none; }
.flow-workspace .flow-node-heading:active { cursor: grabbing; }
.flow-workspace .flow-node-name { flex: 1; cursor: inherit; touch-action: none; }
.flow-node-content { padding: 12px 18px 14px 12px; display: grid; gap: 10px; }
.flow-node-summary, .flow-node-audio { border: 0; background: none; padding: 0; text-align: left; color: #657083; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.flow-node-audio { display: flex; gap: 6px; align-items: center; color: #8351c9; font-size: 11px; }
.flow-workspace .flow-node-ports { position: absolute; right: -14px; top: 52px; display: flex; flex-direction: column; gap: 8px; padding: 0; }
.flow-workspace .flow-node-ports > button { width: 28px; height: 28px; justify-content: center; background: white; border: 2px solid #a685cf; border-radius: 50%; touch-action: none; position: relative; }
.flow-workspace .flow-node-ports > button > span { position: absolute; right: 34px; color: #93869f; font-size: 9px; pointer-events: none; }
.flow-workspace .flow-node-ports > button[aria-pressed="true"] { background: #8351c9; color: white; border-color: #8351c9; }
.flow-input-port { position: absolute; left: -11px; top: 55px; width: 22px; height: 22px; border: 2px solid #c0b0d2; background: white; border-radius: 50%; }
.flow-inspector { min-width: 0; display: flex; flex-direction: column; background: white; border-left: 1px solid var(--border); overflow: hidden; }
.flow-inspector-heading { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.flow-inspector-heading span { font-size: 10px; letter-spacing: .07em; color: #9b8ba9; }
.flow-inspector-heading h2 { font-size: 16px; margin-top: 4px; }
.flow-inspector > form { overflow-y: auto; min-height: 0; padding: 18px; }
.flow-inspector-fields { margin: 0; padding: 0; border: 0; min-width: 0; }
.flow-inspector .native-form-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.flow-inspector .native-help { margin: 0 0 16px; padding: 0; font-size: 12px; }
.flow-inspector .native-field { min-width: 0; }
.flow-inspector .native-field :is(input,select,textarea) { width: 100%; min-width: 0; }
.flow-inspector .native-field input[type="checkbox"] { width: auto; }
.flow-inspector .flow-mappings { margin-top: 20px; }
.flow-inspector .flow-mappings .native-panel-heading { padding: 0 0 12px; flex-wrap: wrap; gap: 10px; }
.flow-inspector .native-form-section { min-width: 0; border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin: 14px 0; }
.flow-inspector .native-form-actions { position: sticky; bottom: -18px; padding: 14px 0 18px; margin-bottom: -18px; border-top: 1px solid var(--border); background: white; display: flex; flex-wrap: wrap; gap: 8px; z-index: 1; }
.flow-inspector .native-form-actions > .native-danger { flex-basis: 100%; border: 0; background: none; justify-content: flex-start; padding: 4px 0; }
.flow-inspector .native-form-actions > .button, .flow-inspector .native-form-actions > .primary-button { font-size: 12px; min-height: 38px; }
.flow-audio-field { margin: 18px 0; min-width: 0; }
.flow-audio-field > span { color: #727d90; font-size: 12px; }
.flow-audio-field-actions { display: flex; gap: 4px; margin-top: 7px; align-items: center; }
.flow-audio-field-actions > .button { min-width: 0; flex: 1; justify-content: flex-start; font-size: 12px; overflow-wrap: anywhere; white-space: normal; }
.flow-audio-preview { margin-top: 10px; }
.flow-audio-preview audio { width: 100%; min-width: 0; height: 36px; }
.flow-audio-preview small { display: block; margin-top: 6px; font-size: 11px; color: #b25757; }
.flow-waiting-clips { margin-top: 20px; }
.flow-waiting-clips h3 { font-size: 13px; margin-bottom: 8px; }
.native-dialog:has(> .flow-audio-library), .flow-workspace .native-dialog:has(> .flow-audio-library) { width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); }
.flow-audio-library { padding: 0 20px 20px; overflow-y: auto; min-height: 0; }
.flow-audio-library > .native-tabs { position: sticky; top: 0; z-index: 2; background: white; padding-top: 10px; margin-bottom: 18px; }
.flow-audio-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.flow-audio-filters .table-search { flex: 1 1 220px; min-width: 0; margin: 0; }
.flow-audio-filters select { border: 1px solid var(--border); border-radius: 8px; padding: 8px; font-size: 12px; color: #687083; background: white; }
.flow-audio-count { font-size: 11px; color: var(--muted); margin: 16px 0 8px; }
.flow-audio-list { display: grid; gap: 8px; }
.flow-audio-list article { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; }
.flow-audio-list article > svg { color: #9477b7; flex-shrink: 0; }
.flow-audio-list article.selected { border-color: #b198ce; background: #faf7fe; }
.flow-audio-copy { flex: 1; min-width: 0; }
.flow-audio-copy strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
.flow-audio-copy small { display: block; font-size: 11px; color: var(--muted); margin-top: 5px; }
.flow-audio-copy p { margin-top: 6px; color: #9097a5; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow-audio-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.flow-audio-row-actions .button { font-size: 12px; padding: 7px 10px; }
.flow-audio-now { padding: 16px; border: 1px solid #e6ddf3; border-radius: 10px; background: #fbf9fe; margin: 14px 0; }
.flow-audio-now > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.flow-audio-now strong { font-size: 13px; }
.flow-audio-now p { font-size: 12px; color: #727d90; line-height: 1.6; margin: 10px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.flow-audio-now .primary-button { margin-top: 12px; }
.native-dialog .flow-audio-create { padding: 0; }
.flow-audio-create > fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 16px; }
.flow-audio-create .native-help { margin: 0; padding: 0; }
@media(max-width: 1200px) {
 .flow-workspace .flow-layout.with-inspector { grid-template-columns: 150px minmax(0,1fr); }
 .flow-workspace .flow-layout.with-inspector .flow-inspector { position: fixed; z-index: 60; right: 12px; top: 84px; bottom: 12px; width: 350px; max-width: calc(100vw - 24px); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 50px #20293826; }
}
@media(max-width:600px) {
 .flow-workspace .flow-layout, .flow-workspace .flow-layout.with-inspector { grid-template-columns: minmax(0,1fr); grid-template-rows: 160px minmax(0,1fr); height: 680px; min-height: 0; }
 .flow-workspace .flow-palette { max-height: 160px; }
 .flow-workspace .flow-palette section > button { padding: 10px; }
 .flow-workspace .flow-layout.with-inspector .flow-inspector { top: 72px; }
 .flow-inspector input, .flow-inspector select, .flow-inspector textarea, .flow-audio-create input, .flow-audio-create select, .flow-audio-create textarea { font-size: 16px; }
 .flow-audio-library { padding-inline: 14px; }
 .flow-audio-list article { flex-wrap: wrap; padding: 12px; }
 .flow-audio-row-actions { width: 100%; padding-left: 30px; }
 .flow-audio-row-actions .button { min-height: 40px; }
 .flow-inspector .native-form-actions > .button, .flow-inspector .native-form-actions > .primary-button { min-height: 44px; }
}
@media(prefers-reduced-motion: no-preference) { .flow-inspector { animation: connect-surface-in 180ms ease; } }

.native-dialog:has(> .flow-audio-library)[open] { display: flex; flex-direction: column; overflow: hidden; }
.native-dialog:has(> .flow-audio-library) > .native-dialog-heading { flex-shrink: 0; }

/* Shared UI: app/workspace-spacing.css */
/* Shared rhythm for every Connect page. Containers own section spacing;
   cards in a grid must never inherit the margins of a document stack. */
:root {
  --workspace-section-gap: 22px;
  --workspace-content-inset: 22px;
}
.native-page:not(.flow-workspace) {
  display: flex;
  flex-direction: column;
  gap: var(--workspace-section-gap);
}
.native-page:not(.flow-workspace) > :not(dialog):not([hidden]) {
  min-width: 0;
  margin-block: 0;
}
.native-page:not(.flow-workspace) > :not(dialog) {
  flex-shrink: 0;
}
.native-report-body > :not(dialog):not([hidden]) {
  margin-block: 0;
  min-width: 0;
}
:is(.native-grid, .native-two-columns, .admin-app-grid,
    .console-two-columns, .console-integration-grid) > .native-panel {
  margin-block: 0;
}
:is(.native-grid, .native-two-columns, .admin-app-grid,
    .console-two-columns, .console-integration-grid) > * {
  min-width: 0;
}
.native-panel > .native-panel-body {
  padding: var(--workspace-content-inset);
}
.native-panel > .native-inline-form {
  padding-inline: var(--workspace-content-inset);
  flex-wrap: wrap;
  align-items: center;
}
.native-panel > .native-disclosure {
  padding-inline: var(--workspace-content-inset);
}
.native-panel > h2 {
  line-height: 1.4;
}
.native-panel > p {
  line-height: 1.6;
}
.native-panel.manager-form > .native-actions {
  margin-top: 16px;
}
.native-dialog :is(.dialog-body, .native-dialog-body) > p {
  line-height: 1.6;
  margin-bottom: 16px;
}
.native-dialog :is(.dialog-body, .native-dialog-body) > .native-actions {
  margin-top: 16px;
}
@media (max-width: 760px) {
  :root {
    --workspace-section-gap: 18px;
    --workspace-content-inset: 16px;
  }
  .native-panel > .native-inline-form > :is(input, select) {
    flex: 1 1 180px;
    max-width: 100%;
  }
}

/* Card actions follow their description even when the copy wraps. */
.integration-grid > .integration-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.integration-grid > .integration-card > p {
  min-height: 0;
  margin-bottom: 16px;
}
.integration-grid > .integration-card > span {
  margin-top: auto;
}
.native-panel.native-editor > .native-panel-heading {
  padding: 0 0 20px;
}
.native-panel > .native-panel-body > p:not(:last-child) {
  margin-bottom: 16px;
  line-height: 1.6;
}
.native-dialog > :is(p, .native-help) {
  margin: 0;
  padding: 20px 24px 0;
  line-height: 1.6;
}
@media (max-width: 760px) {
  .native-dialog > :is(p, .native-help) { padding: 16px 16px 0; }
}

/* Shared UI: app/topbar.css */
/* Keep the header focused on search, availability, calling, and the account. */
.topbar { gap: 24px; }
.topbar .breadcrumb { min-width: 0; overflow: hidden; white-space: nowrap; }
.topbar .breadcrumb > span, .topbar .breadcrumb > small { overflow: hidden; text-overflow: ellipsis; }
.topbar .account-actions { flex-shrink: 0; gap: 10px; }
.topbar .command-trigger { min-height: 38px; padding: 8px 11px; gap: 8px; border-color: transparent; background: #f5f6f9; }
.topbar .assistant-toggle { width: 38px; height: 38px; padding: 0; justify-content: center; border-color: transparent; background: transparent; color: #7d688f; }
.topbar .assistant-toggle > span { display: none; }
.topbar .assistant-toggle:hover { background: #f5effc; }
.topbar .phone-toolbar { gap: 10px; }
.topbar .availability-pill { min-height: 38px; border-color: transparent; background: transparent; padding: 8px; }
.topbar .dialer-toggle { min-height: 38px; gap: 8px; border-color: #e9def8; background: #faf7ff; padding: 8px 12px; }
.topbar .dialer-toggle.on-call { border-color: #b7e4cd; background: #ecf8f1; }
.topbar .dialer-symbol { position: relative; display: inline-flex; flex-shrink: 0; }
.topbar .dialer-symbol .status-dot { display: block; position: absolute; right: -4px; bottom: -3px; width: 8px; height: 8px; border: 2px solid #faf7ff; box-sizing: content-box; }
.topbar .dialer-symbol.needs-attention .status-dot { background: #cf941f; }
.topbar .account-menu { position: relative; border-left: 1px solid #ececf1; padding-left: 12px; }
.topbar .account-menu-trigger { display: flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: #8991a0; border-radius: 24px; cursor: pointer; }
.topbar .account-menu-trigger .avatar { position: relative; width: 36px; height: 36px; font-size: 12px; }
.account-unread-dot { position: absolute; top: 0; right: 0; width: 9px; height: 9px; border: 2px solid white; border-radius: 50%; background: #a45ce6; }
.account-menu-panel { position: absolute; z-index: 70; top: calc(100% + 13px); right: 0; width: 252px; max-width: calc(100vw - 24px); padding: 6px; border: 1px solid #e7e8ef; border-radius: 14px; background: white; box-shadow: 0 14px 45px #24314720; }
.account-menu-heading { display: flex; flex-direction: column; gap: 5px; padding: 12px 10px 15px; margin-bottom: 4px; border-bottom: 1px solid #f0f0f4; overflow-wrap: anywhere; }
.account-menu-heading strong { font-size: 13px; color: #273142; }
.account-menu-heading small { font-size: 11px; color: #7d889c; }
.account-menu-panel > a, .account-menu-panel form > button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: #566176; font: inherit; font-size: 12px; text-align: left; text-decoration: none; cursor: pointer; }
.account-menu-panel > a:hover, .account-menu-panel form > button:hover { background: #f6f3fb; color: #8053ad; }
.account-menu-panel form { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid #f0f0f4; }
.account-menu-panel .account-unread-count { margin-left: auto; padding: 2px 7px; border-radius: 10px; background: #f1e8fc; color: #8b4ec2; font-size: 10px; }
.phone-dock .phone-sound-setup { display: flex; align-items: center; justify-content: center; width: 100%; gap: 8px; padding: 9px; margin: 0 0 12px; border: 1px solid #ece3f6; border-radius: 8px; background: #faf7ff; color: #8053ad; font-size: 11px; }
@media (max-width: 1100px) { .topbar .command-trigger kbd { display: none; } }
@media (max-width: 900px) { .topbar .availability-label { display: none; } .topbar .availability-pill { min-width: 34px; justify-content: center; } }
@media (max-width: 600px) {
  .topbar { padding-left: 12px; padding-right: 12px; gap: 8px; }
  .topbar .breadcrumb > span, .topbar .breadcrumb > small, .topbar .breadcrumb-divider { display: none; }
  .topbar .breadcrumb { flex-shrink: 0; }
  .topbar .account-actions, .topbar .phone-toolbar { gap: 4px; }
  .topbar .command-trigger { width: 36px; justify-content: center; padding: 8px; }
  .topbar .assistant-toggle { width: 34px; }
  .topbar .dialer-toggle { padding: 8px 10px; }
  .topbar .account-menu { padding-left: 7px; }
  .topbar .account-menu-trigger { gap: 2px; }
  .topbar .account-menu-trigger > svg { display: none; }
}

/* Shared UI: components/bi-studio.css */
/* Call-centre business intelligence */
.bi-studio {
  display: grid;
  gap: 22px;
  min-width: 0;
}
.bi-toolbar,
.bi-filter-footer,
.bi-context,
.bi-analysis-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.bi-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f8f9fc;
  flex-wrap: wrap;
}
.bi-tabs button {
  border: 0;
  background: transparent;
  padding: 10px 15px;
  border-radius: 7px;
  font-weight: 600;
  font-size: 13px;
  color: #657084;
}
.bi-tabs button.active {
  background: white;
  color: var(--accent);
  box-shadow: 0 1px 4px #20293815;
}
.bi-filters {
  padding: 22px;
}
.bi-filter-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 14px;
}
.bi-filter-footer {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.bi-context {
  color: #687487;
  font-size: 12px;
}
.bi-context strong {
  color: var(--ink);
  font-weight: 600;
}
.bi-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.bi-kpi {
  display: flex;
  flex-direction: column;
  padding: 21px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  gap: 10px;
}
.bi-kpi > span:first-child {
  color: #596579;
  font-size: 13px;
  font-weight: 600;
}
.bi-kpi > strong {
  font-size: 31px;
  font-weight: 600;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}
.bi-kpi small {
  font-size: 11px;
  color: #697589;
  line-height: 1.5;
}
.bi-change {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  font-size: 11px;
  color: #687487;
}
.bi-change.positive {
  color: #16714d;
}
.bi-change.negative {
  color: #a84444;
}
.bi-chart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
  gap: 18px;
}
.bi-studio .native-panel {
  min-width: 0;
}
.bi-studio .native-panel-heading p {
  font-size: 12px;
  line-height: 1.6;
}
.bi-trend {
  position: relative;
  padding-bottom: 20px;
}
.bi-trend-scroll {
  overflow-x: auto;
  margin: 12px 22px 0 55px;
}
.bi-trend-bars {
  display: flex;
  height: 220px;
  gap: 5px;
  border-bottom: 1px solid var(--border);
  background: repeating-linear-gradient(
    to top,
    transparent 0,
    transparent 54px,
    #edf0f5 54px,
    #edf0f5 55px
  );
}
.bi-trend-day {
  border: 0;
  background: transparent;
  padding: 0 2px;
  flex: 1;
  min-width: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.bi-bar-track {
  display: flex;
  align-items: end;
  justify-content: center;
  width: 100%;
  flex: 1;
}
.bi-bar-track i {
  display: block;
  width: 85%;
  max-width: 44px;
  background: #9868d9;
  border-radius: 4px 4px 0 0;
  min-height: 1px;
  transition: height 0.2s;
}
.bi-trend-day:hover i {
  background: #6e38b6;
}
.bi-trend-day small {
  font-size: 10px;
  white-space: nowrap;
  color: #677487;
  padding-bottom: 8px;
}
.bi-trend-scale {
  position: absolute;
  left: 18px;
  top: 103px;
  bottom: 51px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 10px;
  color: #657084;
}
.bi-outcomes {
  padding-bottom: 12px;
}
.bi-outcome {
  width: calc(100% - 40px);
  margin: 5px 20px 17px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 3px 0;
  font-size: 12px;
}
.bi-outcome > div {
  height: 7px;
  border-radius: 5px;
  background: #f0f2f6;
  align-self: center;
  overflow: hidden;
}
.bi-outcome i {
  display: block;
  height: 100%;
  background: #9868d9;
  border-radius: 5px;
}
.bi-outcome.answered i {
  background: #439784;
}
.bi-outcome.missed i {
  background: #e19c54;
}
.bi-outcome.abandoned i {
  background: #c97180;
}
.bi-outcome small {
  font-size: 10px;
  color: #657084;
}
.bi-outcome:hover > span {
  color: var(--accent);
  text-decoration: underline;
}
.bi-heat-scroll {
  overflow-x: auto;
  margin: 4px 22px 22px;
}
.bi-heatmap {
  display: grid;
  grid-template-columns: 40px repeat(24, minmax(19px, 1fr));
  gap: 5px;
  min-width: 640px;
}
.bi-heatmap small {
  text-align: center;
  font-size: 10px;
  color: #657084;
  padding-bottom: 4px;
}
.bi-heat-row {
  display: contents;
}
.bi-heat-row > span {
  align-self: center;
  font-size: 11px;
  color: #596579;
}
.bi-heat-row button {
  border: 0;
  height: 23px;
  border-radius: 3px;
}
.bi-heat-row button:hover {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.bi-heat-legend {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #687487;
  font-size: 11px;
}
.bi-heat-legend i {
  width: 80px;
  height: 9px;
  background: linear-gradient(to right, #eee7f7, #8248d2);
  border-radius: 3px;
}
.bi-analysis-controls {
  justify-content: flex-start;
  margin: 0 22px 15px;
}
.bi-analysis-controls .native-field {
  min-width: 180px;
}
.bi-studio .native-panel > .native-help {
  margin: 12px 22px;
}
.bi-ranked {
  display: grid;
  gap: 13px;
  padding: 18px 22px;
}
.bi-ranked > button {
  display: grid;
  grid-template-columns: minmax(100px, 180px) 1fr 60px;
  align-items: center;
  gap: 18px;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 12px;
}
.bi-ranked > button > span {
  overflow-wrap: anywhere;
}
.bi-ranked > button > div {
  height: 15px;
  background: #f6f3fa;
  border-radius: 4px;
}
.bi-ranked i {
  display: block;
  height: 100%;
  background: #9868d9;
  border-radius: 4px;
}
.bi-ranked strong {
  text-align: right;
}
.bi-call-search {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 22px;
}
.bi-call-search .search-field {
  max-width: 440px;
  flex: 1;
  min-width: 180px;
}
.bi-drill-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 22px;
  border: 1px solid #ded0ef;
  background: #f8f4fd;
  color: #713aab;
  padding: 3px 7px 3px 12px;
  border-radius: 8px;
  font-size: 12px;
}
.bi-definitions {
  border-top: 1px solid var(--border);
  padding-top: 18px;
  font-size: 12px;
  line-height: 1.8;
  color: #657084;
}
.bi-definitions summary {
  cursor: pointer;
  color: #536074;
  font-weight: 600;
}
.bi-definitions p {
  max-width: 1050px;
}
.bi-explainer {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #f8f5fc;
  border: 1px solid #e9dff6;
  padding: 18px;
  border-radius: 10px;
}
.bi-explainer p {
  margin: 6px 0 0;
  color: #657084;
  font-size: 12px;
}
@media (max-width: 1200px) {
  .bi-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bi-chart-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .bi-filter-grid,
  .bi-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bi-kpi {
    padding: 15px;
  }
  .bi-kpi > strong {
    font-size: 27px;
  }
  .bi-filters {
    padding: 16px;
  }
  .bi-context {
    line-height: 1.7;
  }
  .bi-tabs {
    width: 100%;
  }
  .bi-tabs button {
    flex: 1;
    padding: 9px;
    font-size: 12px;
  }
  .bi-analysis-controls .native-field {
    min-width: 0;
    width: 100%;
  }
  .bi-studio .native-panel-heading {
    flex-wrap: wrap;
  }
  .bi-toolbar > .native-row-actions {
    flex-wrap: wrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bi-bar-track i {
    transition: none;
  }
}
.bi-tag-filter {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.bi-tag-filter .native-field {
  min-width: 170px;
}
.bi-selected-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-bottom: 4px;
}
.bi-selected-tags > span,
.bi-tag-link,
.bi-topic-cloud button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f6f0fd;
  border: 1px solid #e9dbf9;
  color: #6934a4;
  padding: 6px 9px;
  border-radius: 6px;
  font-size: 12px;
}
.bi-selected-tags button {
  display: flex;
  border: 0;
  background: transparent;
  padding: 2px;
  color: inherit;
}
.bi-topic-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 22px 22px;
}
.bi-topic-cloud strong {
  font-size: 11px;
  border-left: 1px solid #dfc9f5;
  padding-left: 8px;
}
.bi-record-tags {
  display: block;
  min-width: 140px;
  max-width: 250px;
  white-space: normal;
  line-height: 1.7;
  font-size: 11px;
}

.bi-builder-dimensions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 20px;
}
.bi-builder-dimensions fieldset {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 0;
  padding: 12px;
}
.bi-builder-dimensions legend {
  padding: 0 6px;
  font-weight: 600;
  font-size: 12px;
}
.bi-builder-options {
  display: grid;
  gap: 10px;
  max-height: 270px;
  overflow: auto;
}
.bi-builder-options label,
.bi-builder-measures label {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}
.bi-builder-measures {
  display: grid;
  gap: 12px;
  max-height: 270px;
  overflow: auto;
}
.bi-builder-measures > div {
  display: grid;
  grid-template-columns: 1fr 80px;
  gap: 6px;
}
.bi-builder-measures select {
  border: 1px solid var(--border);
  border-radius: 5px;
  background: white;
  font-size: 12px;
  padding: 5px;
}
@media (max-width: 800px) {
  .bi-builder-dimensions {
    grid-template-columns: 1fr;
  }
}

.bi-template-intro {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 26px;
  border: 1px solid #e5dbf2;
  border-radius: 12px;
  background: linear-gradient(120deg, #faf7fe, #fff);
}
.bi-template-intro > svg {
  color: var(--accent);
  flex-shrink: 0;
}
.bi-template-intro h2 {
  margin: 0 0 8px;
  font-size: 20px;
  letter-spacing: -0.4px;
}
.bi-template-intro p {
  margin: 0;
  line-height: 1.7;
  color: #657084;
  max-width: 700px;
}
.bi-template-controls {
  display: flex;
  gap: 18px;
  align-items: end;
  flex-wrap: wrap;
  margin: 22px 0 12px;
}
.bi-template-controls .search-field {
  flex: 1;
  max-width: 420px;
  min-width: 180px;
}
.bi-template-controls .native-help {
  padding-bottom: 10px;
}
.bi-template-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.bi-template-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
.bi-template-category {
  display: block;
  color: #7946b2;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.35px;
  margin-bottom: 10px;
}
.bi-template-card h3 {
  font-size: 16px;
  margin: 0;
  line-height: 1.45;
}
.bi-template-card p {
  font-size: 12px;
  color: #657084;
  line-height: 1.7;
  margin: 10px 0 14px;
}
.bi-template-card ul {
  list-style: none;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 0;
  margin: auto 0 18px;
}
.bi-template-card li {
  background: #f4f5f9;
  color: #5f6b7d;
  font-size: 10px;
  padding: 5px 7px;
  border-radius: 4px;
}
.bi-template-card .button {
  width: 100%;
  justify-content: space-between;
}
.bi-template-card:hover {
  border-color: #c9b0e8;
}
.bi-active-template,
.bi-template-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  border: 1px solid #e5dbf2;
  border-radius: 10px;
  background: #faf7fe;
}
.bi-active-template .bi-template-category {
  margin-bottom: 6px;
}
.bi-active-template p {
  font-size: 12px;
  line-height: 1.6;
  color: #657084;
  max-width: 750px;
  margin: 7px 0 0;
}
.bi-active-template .native-row-actions {
  flex-shrink: 0;
  flex-wrap: wrap;
}
.bi-template-prompt small {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.6;
  color: #657084;
}
.bi-template-prompt > button {
  flex-shrink: 0;
}
@media (max-width: 1100px) {
  .bi-template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bi-active-template {
    flex-wrap: wrap;
  }
}
@media (max-width: 640px) {
  .bi-template-grid {
    grid-template-columns: 1fr;
  }
  .bi-template-intro {
    padding: 18px;
  }
  .bi-template-prompt {
    flex-wrap: wrap;
  }
  .bi-template-controls {
    align-items: stretch;
  }
  .bi-template-controls .search-field,
  .bi-template-controls .native-field {
    width: 100%;
    max-width: none;
  }
  .bi-template-controls .native-help {
    padding-bottom: 0;
  }
}

/* Shared UI: components/bi-visual-studio.css */
.bi-canvas {
  container-type: inline-size;
  --bc-accent: #635bdb;
  --bc-border: var(--line, #e4e7ec);
  --bc-muted: var(--muted, #687386);
  color: var(--text, #1d2739);
  min-width: 0;
}
.bc-topbar,
.bc-ribbon,
.bc-actions,
.bc-chartbar,
.bc-pane-heading,
.bc-well-title,
.bc-slicer-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bc-topbar {
  justify-content: space-between;
  margin-bottom: 14px;
}
.bc-title {
  min-width: 140px;
  flex: 1;
}
.bc-eyebrow {
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--bc-accent);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 750;
  margin-bottom: 5px;
}
.bc-title > input {
  font: inherit;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.5px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  width: min(100%, 480px);
  padding: 4px 0;
  border-radius: 5px;
}
.bc-title > input:focus {
  border-color: var(--bc-accent);
  outline-offset: 3px;
}
.bc-ribbon {
  flex-wrap: wrap;
  background: var(--surface, #fff);
  border: 1px solid var(--bc-border);
  padding: 10px 12px;
  border-radius: 10px;
}
.bc-ribbon label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--bc-muted);
}
.bc-ribbon select,
.bc-ribbon input,
.bc-add-to select,
.bc-sort select {
  border: 1px solid var(--bc-border);
  background: var(--surface, #fff);
  color: var(--text, #1d2739);
  border-radius: 6px;
  min-height: 31px;
  padding: 4px 7px;
  font: inherit;
  font-size: 11px;
  max-width: 220px;
}
.bc-ribbon input[type="number"] {
  width: 58px;
}
.bc-guidance {
  font-size: 12px;
  color: var(--bc-muted);
  margin: 12px 0 4px;
  line-height: 1.6;
}
.bc-announcement {
  font-size: 12px;
  color: var(--bc-accent);
  min-height: 20px;
  margin-bottom: 8px;
}
.bc-workbench {
  display: grid;
  grid-template-columns: 184px minmax(0, 1fr) 226px;
  align-items: start;
  gap: 12px;
}
.bc-fields,
.bc-build,
.bc-report {
  border: 1px solid var(--bc-border);
  border-radius: 10px;
  background: var(--surface, #fff);
  min-width: 0;
}
.bc-fields {
  grid-column: 1;
  grid-row: 1;
  padding: 12px;
  position: sticky;
  top: 15px;
  max-height: calc(100vh - 100px);
  overflow: auto;
}
.bc-build {
  grid-column: 3;
  grid-row: 1;
  padding: 12px;
}
.bc-report {
  grid-column: 2;
  grid-row: 1;
  overflow: hidden;
  min-height: 560px;
}
.bc-pane-heading {
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 12px;
}
.bc-pane-heading small {
  font-size: 10px;
  color: var(--bc-muted);
}
.bc-search {
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--bc-border);
  border-radius: 6px;
  padding: 7px;
}
.bc-search input {
  border: 0;
  background: transparent;
  outline: 0;
  min-width: 0;
  width: 100%;
  font-size: 11px;
  color: inherit;
}
.bc-search:focus-within {
  outline: 2px solid var(--bc-accent);
}
.bc-add-to {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: var(--bc-muted);
  margin: 10px 0;
}
.bc-add-to select {
  width: 105px;
}
.bc-field-group h3 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--bc-muted);
  margin: 17px 0 7px;
}
.bc-field {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 5px;
  min-height: 32px;
  padding: 6px 3px;
  background: transparent;
  color: inherit;
  font-size: 11px;
  cursor: grab;
  margin: 2px 0;
}
.bc-field span {
  flex: 1;
}
.bc-field > svg:first-child {
  color: #9aa3b0;
}
.bc-field > svg:last-child {
  opacity: 0;
}
.bc-field:hover,
.bc-field:focus-visible {
  border-color: #d9d3f9;
  background: #f6f3ff;
}
.bc-field:hover > svg:last-child,
.bc-field:focus-visible > svg:last-child {
  opacity: 1;
}
.bc-field.is-measure span:before {
  content: "Σ";
  font-weight: 700;
  color: var(--bc-accent);
  margin-right: 6px;
}
.bc-fields-note,
.bc-measure-guide {
  font-size: 10px;
  line-height: 1.6;
  color: var(--bc-muted);
  margin-top: 15px;
}
.bc-measure-guide summary {
  cursor: pointer;
  font-weight: 600;
}
.bc-well {
  border: 1px dashed #cfd5df;
  border-radius: 7px;
  padding: 8px;
  margin-top: 10px;
  transition:
    background 0.1s,
    border-color 0.1s;
}
.bc-well.is-target {
  border-color: #b7a8f1;
}
.bc-well.is-over {
  background: #eee9ff;
  border: 2px solid var(--bc-accent);
  padding: 7px;
}
.bc-well-title {
  border: 0;
  padding: 0;
  background: transparent;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 650;
  color: inherit;
  width: 100%;
  text-align: left;
  cursor: pointer;
  margin-bottom: 7px;
}
.bc-well-title small {
  font-size: 10px;
  font-weight: 400;
  color: var(--bc-muted);
  display: flex;
  gap: 4px;
}
.bc-chip {
  display: flex;
  align-items: center;
  gap: 3px;
  background: #f1f4f8;
  border: 1px solid #e0e5ed;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 550;
  padding: 7px 4px;
  margin-bottom: 5px;
  cursor: grab;
  min-width: 0;
}
.bc-chip > span {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.bc-chip > svg {
  flex-shrink: 0;
  color: #8690a3;
}
.bc-chip.is-measure {
  background: #f1edfe;
  border-color: #ddd4fb;
  color: #5941a1;
}
.bc-chip-actions {
  display: flex;
  flex-shrink: 0;
}
.bc-chip-actions button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 2px;
  min-height: 23px;
  min-width: 17px;
}
.bc-chip-actions button:hover {
  background: #e2daf9;
  border-radius: 3px;
}
.bc-chip-actions button:disabled {
  opacity: 0.22;
  cursor: default;
}
.bc-drop-hint {
  font-size: 9px;
  line-height: 1.5;
  color: var(--bc-muted);
  margin: 8px 0 3px;
}
.bc-chartbar {
  padding: 10px;
  border-bottom: 1px solid var(--bc-border);
  gap: 6px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.bc-visual-types {
  display: flex;
  background: #f2f4f8;
  border-radius: 6px;
  padding: 3px;
  gap: 2px;
}
.bc-visual-types button {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  font-size: 10px;
  padding: 6px 7px;
  color: var(--bc-muted);
  cursor: pointer;
  border-radius: 4px;
}
.bc-visual-types button[aria-pressed="true"] {
  background: var(--surface, #fff);
  color: var(--bc-accent);
  box-shadow: 0 1px 4px #1c244018;
}
.bc-sort {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 10px;
  color: var(--bc-muted);
}
.bc-sort select {
  max-width: 150px;
  font-size: 10px;
  min-height: 28px;
}
.bc-chartbar > .button {
  font-size: 10px;
  padding: 6px 8px;
  min-height: 29px;
}
.bc-slicers {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px;
  border-bottom: 1px solid var(--bc-border);
  background: #f9fafc;
}
.bc-slicer {
  background: var(--surface, #fff);
  border: 1px solid var(--bc-border);
  border-radius: 6px;
  min-width: 145px;
  flex: 1;
  max-width: 300px;
}
.bc-slicer > summary {
  cursor: pointer;
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 8px;
  font-size: 11px;
  font-weight: 600;
  list-style: none;
}
.bc-slicer > summary::-webkit-details-marker {
  display: none;
}
.bc-slicer > summary span {
  flex: 1;
  text-align: right;
  font-size: 9px;
  color: var(--bc-muted);
  font-weight: 400;
}
.bc-slicer-body {
  padding: 0 8px 8px;
}
.bc-slicer-body > input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--bc-border);
  border-radius: 4px;
  font-size: 10px;
  padding: 5px;
  color: inherit;
  background: transparent;
}
.bc-slicer-tools {
  justify-content: space-between;
  font-size: 9px;
  color: var(--bc-muted);
  padding: 6px 0;
}
.bc-slicer-tools button {
  background: transparent;
  border: 0;
  color: var(--bc-accent);
  font-size: 10px;
  cursor: pointer;
  padding: 0;
}
.bc-slicer-values {
  max-height: 116px;
  overflow: auto;
}
.bc-slicer-values > label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  padding: 4px 0;
  cursor: pointer;
}
.bc-slicer-values input {
  accent-color: var(--bc-accent);
  margin: 0;
}
.bc-slicer-values span {
  flex: 1;
  overflow-wrap: anywhere;
}
.bc-slicer-values small {
  color: var(--bc-muted);
  font-size: 9px;
}
.bc-report-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  padding: 18px 16px 10px;
}
.bc-report-heading h2 {
  font-size: 15px;
  line-height: 1.4;
  margin: 0;
  font-weight: 650;
}
.bc-report-heading p {
  font-size: 10px;
  color: var(--bc-muted);
  margin: 5px 0 0;
  line-height: 1.5;
}
.bc-live {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  color: #238370;
  margin-top: 4px;
}
.bc-total-cards {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 16px 16px;
}
.bc-total-cards > div {
  border-left: 2px solid #d7cef5;
  padding: 2px 12px 2px 9px;
  flex: 1;
  min-width: 95px;
}
.bc-total-cards span {
  font-size: 10px;
  color: var(--bc-muted);
  display: block;
}
.bc-total-cards strong {
  display: block;
  font-size: 22px;
  letter-spacing: -0.6px;
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
}
.bc-matrix-scroll {
  overflow: auto;
  max-height: 560px;
  border-top: 1px solid var(--bc-border);
}
.bc-matrix {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 11px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.bc-matrix caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.bc-matrix th,
.bc-matrix td {
  padding: 10px 12px;
  text-align: right;
  border-bottom: 1px solid #edf0f5;
  border-right: 1px solid #edf0f5;
}
.bc-matrix thead th {
  background: #f6f7fb;
  color: var(--bc-muted);
  font-weight: 600;
  font-size: 10px;
}
.bc-matrix thead tr:first-child th {
  background: #eef0f7;
  color: #424d66;
}
.bc-matrix th:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
  max-width: 260px;
  white-space: normal;
  min-width: 100px;
}
.bc-matrix tbody th {
  font-weight: 500;
}
.bc-matrix tbody tr:hover {
  background: #f9f7ff;
}
.bc-matrix td button {
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: inherit;
  font: inherit;
  padding: 3px 5px;
  cursor: pointer;
}
.bc-matrix td button:hover:not(:disabled) {
  background: #ece6fe;
  color: var(--bc-accent);
}
.bc-matrix td button:disabled {
  cursor: default;
  color: var(--bc-muted);
}
.bc-matrix tfoot td,
.bc-matrix tfoot th {
  font-weight: 700;
  background: #f3f0fb;
  border-top: 1px solid #ddd5f4;
}
.bc-matrix .bc-subtotal {
  background: #faf9fe;
  font-weight: 650;
}
.bc-row-label {
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  padding: 0;
  cursor: pointer;
}
.bc-row-label:hover:enabled {
  color: var(--bc-accent);
  text-decoration: underline;
}
.bc-row-label:disabled {
  cursor: default;
}
.bc-footnote,
.bc-note {
  font-size: 10px;
  color: var(--bc-muted);
  line-height: 1.6;
  padding: 12px 16px;
  margin: 0;
}
.bc-loading,
.bc-empty {
  padding: 55px 20px;
  text-align: center;
  color: var(--bc-muted);
  font-size: 12px;
}
.bc-empty h3 {
  font-size: 15px;
  color: var(--text, #1d2739);
}
.bc-empty svg {
  margin: auto;
  color: #9586c9;
}
.bc-charts {
  padding: 0 16px;
}
.bc-chart {
  border-top: 1px solid var(--bc-border);
  padding: 14px 0;
}
.bc-chart h3 {
  font-size: 12px;
  margin: 0 0 8px;
}
.bc-legend {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 13px;
  font-size: 9px;
  color: var(--bc-muted);
}
.bc-legend span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.bc-legend i {
  height: 7px;
  width: 7px;
  border-radius: 2px;
}
.bc-bar-row {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 8px;
  margin: 12px 0;
  align-items: center;
}
.bc-bar-row > strong {
  font-size: 10px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.bc-bar-row > div {
  min-width: 0;
}
.bc-bar-row button {
  display: flex;
  align-items: center;
  gap: 5px;
  position: relative;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  min-height: 20px;
  margin: 3px 0;
  padding-right: 46px;
  box-sizing: border-box;
}
.bc-bar-row button > span {
  height: 12px;
  min-width: 1px;
  border-radius: 0 3px 3px 0;
  flex-shrink: 0;
}
.bc-bar-row small {
  font-size: 9px;
  white-space: nowrap;
  color: var(--bc-muted);
}
.bc-bar-row button:hover {
  background: #f3f0fd;
}
.bc-line svg {
  width: 100%;
  height: auto;
  min-height: 160px;
}
.bc-line text {
  font-size: 10px;
  fill: var(--bc-muted);
}
.bc-line-inspect {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  max-height: 64px;
  overflow: auto;
}
.bc-line-inspect button {
  font-size: 9px;
}
.bc-scope {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  font-size: 10px;
  color: var(--bc-muted);
}
.bc-scope button {
  border: 1px solid #ddd4fa;
  border-radius: 14px;
  padding: 4px 8px;
  background: #f5f1ff;
  color: #65518d;
  display: flex;
  gap: 4px;
  align-items: center;
  font-size: 10px;
  cursor: pointer;
}
.bc-drill {
  margin-top: 16px;
  scroll-margin-top: 25px;
}
.bc-drill h2 {
  font-size: 16px;
}
.bc-drill p {
  font-size: 12px;
  color: var(--bc-muted);
}
.bi-canvas button:focus-visible,
.bi-canvas select:focus-visible,
.bi-canvas input:focus-visible,
.bi-canvas summary:focus-visible {
  outline: 2px solid var(--bc-accent);
  outline-offset: 2px;
}
.bi-canvas button:disabled {
  cursor: default;
  opacity: 0.4;
}
@container (max-width:860px) {
  .bc-workbench {
    grid-template-columns: 165px minmax(0, 1fr);
  }
  .bc-build {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .bc-build > .bc-pane-heading {
    grid-column: 1/-1;
    margin: 0;
  }
  .bc-build > .bc-well {
    margin: 0;
  }
  .bc-measure-guide {
    grid-column: 1/-1;
    margin-top: 0;
  }
  .bc-report {
    grid-column: 2;
    grid-row: 2;
  }
  .bc-fields {
    grid-row: 1/3;
  }
  .bc-topbar {
    align-items: flex-start;
  }
  .bc-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .bc-actions .button {
    font-size: 11px;
    padding: 7px;
  }
}
@container (max-width:640px) {
  .bc-workbench {
    grid-template-columns: minmax(0, 1fr);
  }
  .bc-fields {
    grid-column: 1;
    grid-row: 1;
    position: static;
    max-height: 240px;
  }
  .bc-field-group {
    display: inline;
  }
  .bc-field {
    width: 48%;
    display: inline-flex;
    margin: 2px 1%;
  }
  .bc-build {
    grid-column: 1;
    grid-row: 2;
  }
  .bc-report {
    grid-column: 1;
    grid-row: 3;
  }
  .bc-topbar {
    flex-wrap: wrap;
  }
  .bc-title {
    flex-basis: 100%;
  }
  .bc-title > input {
    font-size: 18px;
  }
  .bc-ribbon {
    align-items: flex-start;
  }
  .bc-ribbon label {
    flex-wrap: wrap;
  }
  .bc-chartbar {
    gap: 8px;
  }
  .bc-total-cards strong {
    font-size: 19px;
  }
  .bc-report-heading {
    flex-wrap: wrap;
  }
  .bc-slicer {
    min-width: 130px;
  }
  .bc-matrix th,
  .bc-matrix td {
    padding: 8px;
  }
  .bc-guidance {
    font-size: 11px;
  }
  .bc-fields-note {
    display: none;
  }
}

.bc-field,
.bc-chip {
  touch-action: none;
  user-select: none;
}
.bc-announcement:empty {
  display: none;
}
.bc-drag-ghost {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  background: #635bdb;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 7px;
  padding: 10px 14px;
  font-size: 12px;
  box-shadow: 0 8px 24px #41357c40;
}

.bc-slicer-tools select {
  background: transparent;
  color: var(--bc-muted);
  border: 1px solid var(--bc-border);
  border-radius: 4px;
  font-size: 9px;
  padding: 3px;
  max-width: 90px;
}

/* Shared UI: components/crm-onboarding.css */
.crm-onboarding {
  border: 1px solid #e3e6ef;
  border-radius: 14px;
  padding: 24px;
  margin: 0 0 24px;
  background: var(--surface, #fff);
  color: var(--text, #263147);
}
.crm-onboarding h2 {
  font-size: 20px;
  margin: 0 0 8px;
}
.crm-onboarding h3 {
  font-size: 17px;
  margin: 0 0 10px;
}
.crm-onboarding p {
  font-size: 13px;
  line-height: 1.6;
  margin: 8px 0 16px;
}
.crm-provider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 20px 0;
}
.crm-provider-grid button {
  text-align: left;
  padding: 16px;
  border: 1px solid #e3e6ef;
  border-radius: 10px;
  background: var(--surface, #fff);
}
.crm-provider-grid button.is-selected {
  border-color: #6b56e7;
  background: #f3efff;
  color: #4936b9;
}
.crm-provider-grid span {
  display: block;
  font-size: 12px;
  margin-top: 7px;
  color: #6d758b;
}
.crm-setup {
  border-top: 1px solid #e3e6ef;
  padding-top: 20px;
}
.crm-connect-form,
.crm-mapping {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
  margin: 16px 0;
}
.crm-onboarding label {
  font-size: 13px;
  display: block;
}
.crm-onboarding input:not([type="checkbox"]),
.crm-onboarding select {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #dce0eb;
  border-radius: 8px;
  font: inherit;
  margin-top: 6px;
  background: var(--surface, #fff);
}
.crm-onboarding input[type="checkbox"] {
  margin-right: 8px;
}
.crm-connect-form button {
  justify-self: start;
}
.crm-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 16px 0;
}
.crm-upload {
  margin: 16px 0;
}
.crm-muted {
  color: #707a90;
}
.crm-error {
  padding: 12px;
  border-radius: 8px;
  background: #fff0ef;
  color: #9e302c;
}
.crm-notice {
  padding: 12px;
  border-radius: 8px;
  background: #ecf9f2;
  color: #246946;
}
.crm-table-scroll {
  overflow: auto;
  max-height: 380px;
  margin: 14px 0;
  border: 1px solid #e3e6ef;
  border-radius: 9px;
}
.crm-onboarding table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 12px;
}
.crm-onboarding th,
.crm-onboarding td {
  padding: 10px 12px;
  border-bottom: 1px solid #e3e6ef;
  overflow-wrap: anywhere;
  max-width: 260px;
}
.crm-onboarding th {
  position: sticky;
  top: 0;
  background: #f7f8fb;
}
.crm-onboarding td small {
  display: block;
  color: #737d91;
}
.crm-onboarding a {
  color: #654de0;
  text-decoration: underline;
}
.crm-onboarding button:disabled {
  opacity: 0.5;
  cursor: default;
}
@media (max-width: 640px) {
  .crm-onboarding {
    padding: 16px;
  }
  .crm-connect-form,
  .crm-mapping {
    grid-template-columns: 1fr;
  }
  .crm-provider-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Shared UI: components/integration-hub.css */
.integration-hub{margin:0 0 28px;color:var(--text,#263147)}.integration-tabs{display:flex;gap:8px;border-bottom:1px solid var(--line,#e3e7ee);margin-bottom:24px;padding-bottom:12px}.integration-tabs button{display:flex;align-items:center;gap:8px;background:transparent;border:1px solid transparent;padding:10px 16px;border-radius:9px;font:inherit;font-size:13px}.integration-tabs button[aria-selected=true]{background:#ecebff;color:#5547bd}.integration-intro,.power-dialer>header{display:flex;justify-content:space-between;gap:24px;align-items:center;margin:18px 0 24px}.integration-hub h2{font-size:25px;letter-spacing:-.6px;line-height:1.2;margin:8px 0 12px}.integration-hub h3{font-size:16px;margin:12px 0}.integration-hub p{font-size:13px;line-height:1.65;color:var(--muted,#6b7485)}.integration-eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:700;color:#7364bc}.integration-count{font-size:42px;letter-spacing:-2px;text-align:right;color:#6253c2}.integration-count small{display:block;font-size:11px;letter-spacing:0;white-space:nowrap;color:#788196}.integration-filters{display:flex;gap:10px}.integration-filters label{display:flex;align-items:center;gap:10px;flex:1;padding-left:12px;border:1px solid #e0e4ed;border-radius:9px;background:var(--surface,#fff)}.integration-filters label input{border:0}.integration-hub input:not([type=checkbox]),.integration-hub select,.integration-hub textarea{width:100%;background:var(--surface,#fff);color:inherit;border:1px solid #dde2eb;border-radius:8px;padding:10px 12px;font:inherit;font-size:13px;box-sizing:border-box}.integration-filters select{width:auto}.integration-caption{font-size:12px!important;margin:10px 0 18px}.integration-directory{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:12px;max-height:560px;overflow:auto;padding:2px 3px 16px}.integration-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left;border:1px solid #e1e5ec;border-radius:12px;background:var(--surface,#fff);padding:18px;min-height:164px;color:inherit;font:inherit;cursor:pointer}.integration-tile:hover{border-color:#b6addf;box-shadow:0 4px 14px #262d4810}.integration-tile.selected{border-color:#7866d0;box-shadow:0 0 0 2px #7866d026}.integration-monogram{display:grid;place-items:center;height:34px;min-width:34px;padding:0 5px;border-radius:10px;background:#f1effa;color:#6253a6;font-size:11px;font-weight:700}.integration-tile strong{font-size:14px}.integration-tile small{font-size:11px;color:#8990a1}.integration-badge{display:inline-flex;align-items:center;width:fit-content;white-space:nowrap;border-radius:5px;padding:4px 7px;background:#f2f3f6;color:#6e7789;font-size:10px;line-height:1.4}.integration-badge.direct{background:#e8f5ee;color:#27754d}.integration-badge.bridge{background:#f1edfc;color:#70529c}.integration-arrow{position:absolute;top:23px;right:18px;color:#a8adba}.integration-configured{display:flex;gap:5px;align-items:center;font-size:10px;color:#378568}.integration-detail{margin-top:24px;background:var(--surface,#fff);border:1px solid #e1e5ec;border-radius:14px;padding:24px}.integration-detail>header{display:flex;justify-content:space-between;align-items:center}.bridge-steps{padding-left:22px}.bridge-steps>li{padding:16px 0;border-top:1px solid #ebedf2;margin:12px 0}.bridge-setup code,.bridge-setup pre{font-family:monospace;font-size:12px;background:#f4f5fa;border-radius:7px;padding:8px;overflow-wrap:anywhere;color:#52617b}.bridge-setup pre{padding:16px;overflow:auto}.bridge-setup label,.dialer-panel>label,.dialer-active label{display:block;font-size:12px;margin:12px 0}.bridge-setup input,.dialer-panel label input,.dialer-panel label select,.dialer-active textarea{margin-top:7px}.dialer-layout{display:grid;grid-template-columns:minmax(230px,.85fr) minmax(280px,1.15fr);gap:20px}.dialer-panel{border:1px solid #e0e4ed;border-radius:14px;padding:22px;background:var(--surface,#fff)}.dialer-contacts{max-height:300px;overflow:auto;border:1px solid #e8ebf1;border-radius:8px;margin:15px 0}.dialer-contacts label{display:flex;gap:10px;align-items:center;padding:10px;font-size:12px;border-bottom:1px solid #edf0f5}.dialer-contacts small,.dialer-history small{display:block;color:#8993a3;font-size:11px;margin-top:3px}.dialer-active{background:#f6f4fc;border-radius:12px;padding:18px;margin:18px 0}.dialer-active textarea{min-height:90px;resize:vertical}.dialer-auto{font-size:12px;line-height:1.6;margin-top:18px;display:block}.dialer-history{margin-top:20px;max-height:280px;overflow:auto}.dialer-history>div{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 0;border-top:1px solid #edf0f5;font-size:12px}.power-dialer progress{width:100%;height:6px;accent-color:#7866d0}.integration-hub button:disabled{opacity:.5;cursor:not-allowed}.integration-hub :focus-visible{outline:2px solid #7866d0;outline-offset:3px}@media(max-width:760px){.integration-intro,.power-dialer>header{align-items:flex-start}.integration-count{font-size:32px}.integration-filters{flex-wrap:wrap}.integration-filters label{flex-basis:100%}.integration-filters select{flex:1;min-width:0}.dialer-layout{grid-template-columns:1fr}.integration-directory{grid-template-columns:repeat(2,minmax(0,1fr))}.integration-tile{padding:13px}.integration-detail,.dialer-panel{padding:16px}.integration-hub h2{font-size:21px}.integration-tile .integration-badge{white-space:normal}}

.integration-hub .integration-filters label input{border:0;background:transparent}

/* Shared UI: components/email-workspace.css */
.email-workspace .native-panel { padding: 24px; }
.email-workspace .native-panel > h2 { margin: 0 0 12px; font-size: 18px; }
.email-workspace .native-panel > p { margin: 0 0 16px; line-height: 1.6; }
.email-workspace label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 500; max-width: 480px; }
.email-workspace input, .email-workspace select { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid #dce0e8; border-radius: 8px; background: #fff; color: #202432; font: inherit; }
.email-workspace input:focus-visible, .email-workspace select:focus-visible { outline: 2px solid #774cc2; outline-offset: 2px; }
.email-workspace .native-actions { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 16px 0; }
.email-workspace .native-actions label { flex: 1; min-width: 160px; }
.email-workspace .native-table { min-width: 580px; }
.email-workspace .native-table th { text-align: left; padding: 12px 16px; }
.email-workspace .native-table td { vertical-align: middle; }
.email-workspace .native-table td p { margin: 6px 0 0; }
.email-workspace .native-panel a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) { .email-workspace .native-panel { padding: 18px; } .email-workspace .native-actions { align-items: stretch; } }

/* Shared UI: components/ai-assistant.css */
.assistant-toggle{display:inline-flex;align-items:center;gap:7px;border:1px solid #e4e7ec;border-radius:9px;background:#f4f5f7;color:#243040;padding:8px 11px;font-family:inherit;font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer}
.assistant-overlay{position:fixed;inset:0;z-index:1300;font-family:Inter,system-ui,sans-serif;color:#243040}.assistant-backdrop{position:absolute;inset:0;background:#10182824;border:0;width:100%;height:100%;cursor:default}.assistant-panel{position:absolute;right:0;top:0;bottom:0;width:min(480px,100%);background:#ffffff;box-shadow:-12px 0 60px #10182818;display:flex;flex-direction:column;animation:assistant-enter .22s ease-out}.assistant-header{display:flex;align-items:center;gap:12px;padding:24px 22px 20px;border-bottom:1px solid #e4e7ec;background:white}.assistant-mark{display:grid;place-items:center;width:43px;height:43px;border-radius:14px;color:#243040;background:#f4f5f7}.assistant-header h2{font-size:17px;letter-spacing:-.4px;margin:0 0 5px}.assistant-header p{font-size:11px;color:#667085;margin:0}.assistant-header>.icon-button{margin-left:auto;flex-shrink:0}.assistant-toolbar{display:flex;gap:6px;padding:10px 20px;border-bottom:1px solid #e4e7ec}.assistant-toolbar select{min-width:0;flex:1;background:transparent;border:0;color:#667085;font-size:12px}.assistant-toolbar button{border:0;background:transparent;display:grid;place-items:center;padding:7px;border-radius:7px;color:#667085;cursor:pointer}.assistant-toolbar button:hover{background:#f4f5f7}.assistant-scroll{flex:1;overflow:auto;padding:24px 22px;overscroll-behavior:contain}.assistant-welcome{padding:14px 0 18px}.assistant-eyebrow{font-size:9px;letter-spacing:1.8px;font-weight:700;color:#667085}.assistant-welcome h3{font-size:29px;line-height:1.2;letter-spacing:-1px;font-weight:600;margin:14px 0}.assistant-welcome>p{font-size:13px;line-height:1.8;color:#667085;max-width:345px}.assistant-suggestions{display:grid;gap:9px;margin-top:25px}.assistant-suggestions button{border:1px solid #e4e7ec;background:#fff;padding:14px;border-radius:11px;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;line-height:1.5;color:#243040;cursor:pointer}.assistant-suggestions button svg{flex-shrink:0;color:#667085}.assistant-suggestions button:hover{background:#f4f5f7;border-color:#cbd1d9}.assistant-message{margin-bottom:25px;font-size:13px;line-height:1.7;overflow-wrap:anywhere}.assistant-message.user{margin-left:36px;padding:13px 16px;border-radius:15px 15px 3px 15px;background:#f4f5f7}.assistant-message-label{font-size:10px;font-weight:600;color:#667085;display:flex;align-items:center;gap:6px}.assistant-prose{min-width:0}.assistant-prose p{margin:8px 0}.assistant-prose>:first-child{margin-top:6px}.assistant-prose>:last-child{margin-bottom:0}.assistant-prose h1,.assistant-prose h2,.assistant-prose h3,.assistant-prose h4,.assistant-prose h5,.assistant-prose h6{font-weight:650;line-height:1.4;letter-spacing:-.2px;margin:18px 0 8px;color:#243040}.assistant-prose h1{font-size:20px}.assistant-prose h2{font-size:18px}.assistant-prose h3{font-size:16px}.assistant-prose h4,.assistant-prose h5,.assistant-prose h6{font-size:14px}.assistant-prose ul,.assistant-prose ol{margin:8px 0;padding-left:22px}.assistant-prose ul{list-style:disc}.assistant-prose ol{list-style:decimal}.assistant-prose li{margin:4px 0}.assistant-prose li>p{margin:4px 0}.assistant-prose li ul,.assistant-prose li ol{margin:4px 0}.assistant-prose a{color:#245ea8;text-decoration:underline;text-underline-offset:3px}.assistant-prose code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.9em;background:#f4f5f7;border-radius:4px;padding:2px 4px}.assistant-prose pre{max-width:100%;overflow-x:auto;white-space:pre;background:#f4f5f7;border:1px solid #e4e7ec;border-radius:8px;padding:12px;margin:12px 0}.assistant-prose pre code{padding:0;background:transparent;overflow-wrap:normal}.assistant-prose blockquote{margin:12px 0;padding:1px 12px;border-left:3px solid #cbd1d9;color:#667085}.assistant-prose hr{border:0;border-top:1px solid #e4e7ec;margin:16px 0}.assistant-table-scroll{max-width:100%;overflow-x:auto;margin:12px 0;border:1px solid #e4e7ec;border-radius:8px}.assistant-prose table{border-collapse:collapse;width:100%;font-size:12px}.assistant-prose th,.assistant-prose td{padding:8px 10px;border-bottom:1px solid #e4e7ec;text-align:left;min-width:90px}.assistant-prose th{background:#f4f5f7;font-weight:600}.assistant-prose tr:last-child td{border-bottom:0}.assistant-prose .task-list-item{list-style:none}.assistant-prose .task-list-item input{margin-right:6px}.assistant-activity{font-size:10px;color:#667085;margin-top:12px}.assistant-activity p{display:flex;gap:5px;margin:3px 0}.assistant-sources{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}.assistant-sources button{font-size:10px;color:#245ea8;border:1px solid #e4e7ec;background:white;border-radius:15px;padding:4px 8px;cursor:pointer}.assistant-action{background:white;border:1px solid #e4e7ec;border-radius:13px;margin:16px 0;padding:16px;overflow:hidden}.assistant-action-heading{display:flex;justify-content:space-between;gap:8px;font-size:9px;letter-spacing:.8px;color:#667085}.assistant-action-heading small{letter-spacing:0;font-size:10px}.assistant-action h4{font-size:14px;margin:11px 0}.assistant-action p{font-size:11px;color:#667085;line-height:1.7;overflow-wrap:anywhere}.assistant-action details{font-size:11px;color:#667085;margin:13px 0}.assistant-action pre{font-size:10px;max-height:260px;overflow:auto;background:#f4f5f7;padding:12px;white-space:pre-wrap;overflow-wrap:anywhere}.assistant-action-buttons{display:flex;gap:8px;margin-top:15px}.assistant-action-buttons button{font-size:11px;border:1px solid #e4e7ec;background:white;border-radius:7px;padding:9px 12px;cursor:pointer}.assistant-action-buttons .assistant-primary{background:#263445;color:white;border-color:#263445}.assistant-action dl{font-size:11px}.assistant-action dl>div{display:flex;gap:10px;margin-bottom:7px}.assistant-action dt{color:#667085;min-width:80px}.assistant-action dd{margin:0;overflow-wrap:anywhere}.assistant-warning{background:#fff7e9;padding:8px;border-radius:5px;color:#8b652b!important}.assistant-open-result,.assistant-saved button{display:flex;align-items:center;gap:5px;border:0;background:transparent;color:#245ea8;padding:8px 0;font-size:12px;cursor:pointer}.assistant-saved{font-size:12px;color:#667085;margin:20px 0}.assistant-compose{border-top:1px solid #e4e7ec;padding:16px 20px 18px;background:#fff}.assistant-compose>div{position:relative;border:1px solid #e4e7ec;border-radius:12px;background:#ffffff;padding:4px}.assistant-compose textarea{width:100%;box-sizing:border-box;background:transparent;border:0;resize:none;padding:11px 48px 11px 10px;font-family:inherit;font-size:12px;line-height:1.6;color:#243040;min-height:80px}.assistant-send{position:absolute;right:10px;bottom:10px;width:32px;height:32px;border:0;border-radius:9px;background:#263445;color:white;display:grid;place-items:center;cursor:pointer}.assistant-compose>p{font-size:8px;line-height:1.6;color:#667085;margin:10px 0 0;display:flex;justify-content:space-between;gap:12px}.assistant-working{display:flex;align-items:center;gap:8px;color:#667085;font-size:12px}.assistant-working svg{animation:assistant-spin 1.4s linear infinite}.assistant-error,.assistant-notice{font-size:12px;line-height:1.6;border-radius:9px;padding:12px;margin:12px 0;background:#fff1f1;color:#995555}.assistant-notice{background:#f4f5f7;color:#667085}.assistant-error button{display:block;margin-top:8px}.assistant-panel button:disabled{opacity:.45;cursor:not-allowed}.assistant-panel :focus-visible{outline:3px solid #7297bf;outline-offset:3px}.assistant-panel summary{cursor:pointer}.assistant-flow-preview{text-transform:capitalize}.assistant-panel .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@keyframes assistant-enter{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes assistant-spin{to{transform:rotate(360deg)}}@media(max-width:640px){.assistant-toggle{padding:8px}.assistant-toggle>span{display:none}.assistant-panel{width:100%}.assistant-compose{padding-bottom:max(18px,env(safe-area-inset-bottom))}.assistant-header{padding-top:max(22px,env(safe-area-inset-top))}}@media(prefers-reduced-motion:reduce){.assistant-panel,.assistant-working svg{animation:none}}

.assistant-panel .icon-button{color:#667085}.assistant-panel .icon-button:hover{background:#f4f5f7}.assistant-toggle:hover{background:#e9edf2}.assistant-compose textarea::placeholder{color:#667085}

/* Shared UI: components/transcript-content.css */
.call-sentiment{margin:0 0 24px;padding:20px;border:1px solid var(--border-color,#e4e6ed);border-radius:14px;background:var(--surface,#fff)}
.call-sentiment-heading h3{margin:0;font-size:15px}.call-sentiment-heading p{margin:5px 0 12px;font-size:12px;color:var(--text-secondary,#738099)}
.call-sentiment-scroll{overflow-x:auto}.call-sentiment svg{display:block;width:100%;min-width:480px;height:auto;color:var(--text-secondary,#738099)}
.call-sentiment svg text{font:12px inherit;fill:currentColor}.call-sentiment svg circle:focus{outline:2px solid currentColor;outline-offset:3px}
.call-sentiment-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 24px;font-size:12px}.call-sentiment-legend span{display:inline-flex;align-items:center;gap:7px}.call-sentiment-legend i{display:inline-block;width:20px;height:3px;border-radius:2px}
.call-transcript-segments{display:grid;gap:12px;margin-top:20px}.call-transcript-segment{border:1px solid var(--border-color,#e4e6ed);border-radius:12px;padding:16px}.call-transcript-segment header{display:flex;align-items:center;gap:12px;justify-content:space-between;font-size:13px}.call-transcript-segment p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7;margin:10px 0 0}.call-transcript-segment .native-chip{text-transform:capitalize;font-size:11px}
@media(max-width:600px){.call-sentiment{padding:14px}.call-transcript-segment{padding:12px}}
.call-summary{padding:8px 0 20px}.call-summary-text,.call-summary-points{font-size:15px;line-height:1.85;white-space:pre-wrap;color:var(--text-primary,#3b465b);margin:0}.call-summary-points{padding-left:22px}.call-summary-next{margin-top:24px;padding-top:18px;border-top:1px solid var(--border-color,#e4e6ed)}.call-summary-next h3{font-size:12px;color:var(--text-secondary,#738099);margin:0 0 8px}.call-summary-next p{margin:0;line-height:1.7}.call-summary-waiting{display:flex;align-items:center;gap:12px;padding:20px 0}.call-summary-waiting strong{font-size:14px;font-weight:500}.call-summary-waiting p{font-size:13px;color:var(--text-secondary,#738099);margin:6px 0 0}.call-summary-dot{width:9px;height:9px;flex-shrink:0;border-radius:50%;background:#8050c8}
.call-transcript-segments{display:flex;flex-direction:column;gap:14px;padding:8px 0}.call-transcript-segment{width:fit-content;max-width:82%;min-width:min(230px,80%);border:0;padding:14px 18px;box-sizing:border-box}.call-transcript-segment.left{align-self:flex-start;background:#eaf6f1;color:#245849;border-radius:18px 18px 18px 4px}.call-transcript-segment.right{align-self:flex-end;background:#f0eafa;color:#51317d;border-radius:18px 18px 4px 18px}.call-transcript-segment header{gap:24px;font-size:12px}.call-transcript-segment p{font-size:14px;margin-top:7px;color:inherit}.call-transcript-segment .native-chip{background:rgba(255,255,255,.65);color:inherit;padding:3px 7px;font-size:10px}.call-sentiment svg text{font-family:inherit;font-size:12px}
@media(max-width:600px){.call-transcript-segment{max-width:90%;padding:12px 14px}.call-transcript-segment header{gap:12px}}

.call-summary-facts{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-bottom:20px;font-size:12px;color:var(--text-secondary,#738099)}
.call-summary-outcome{border-radius:999px;padding:5px 10px;font-weight:600}.call-summary-outcome.resolved{background:#eaf6f1;color:#247657}.call-summary-outcome.open{background:#fff4df;color:#936421}
.call-summary-satisfaction{display:inline-flex;align-items:center;flex-wrap:wrap;gap:7px}.call-summary-stars{color:#b58225;font-size:14px;letter-spacing:1px}.call-summary-stars>span{color:#ab9d80}.call-summary-satisfaction strong{font-size:12px;font-weight:500}.call-summary-agent{margin-left:auto}.call-summary-agent strong{font-weight:500;color:var(--text-primary,#3b465b)}.call-summary-disposition{text-transform:capitalize}
.call-summary-reason{font-size:14px;line-height:1.7;margin:0 0 18px;color:var(--text-primary,#3b465b)}.call-summary-reason>span{display:block;font-size:11px;font-weight:600;color:var(--text-secondary,#738099);margin-bottom:4px}
.call-summary-topics{margin-top:20px;display:flex;align-items:baseline;gap:12px}.call-summary-label{font-size:11px;font-weight:600;color:var(--text-secondary,#738099)}.call-summary-topics>div{display:flex;gap:7px;flex-wrap:wrap}.call-summary-tag{font-size:12px;line-height:1.4;padding:5px 10px;border-radius:7px;background:#f2eff9;color:#715393;overflow-wrap:anywhere}
.call-summary-next{border:0;border-left:3px solid #a482d6;background:#f8f6fc;padding:14px 18px;border-radius:0 9px 9px 0;margin-top:22px}.call-summary-next h3{font-size:12px;font-weight:600;color:#745495;margin-bottom:5px}.call-summary-next p{font-size:14px;color:var(--text-primary,#3b465b)}.call-summary-empty{font-size:14px;color:var(--text-secondary,#738099)}
@media(max-width:600px){.call-summary-agent{margin-left:0}.call-summary-facts{gap:10px 14px}.call-summary-topics{display:block}.call-summary-topics>div{margin-top:7px}}

.call-processing{display:flex;align-items:center;gap:13px;padding:15px 18px;margin:0 0 20px;background:#f5f0fc;border:1px solid #e3d7f4;border-radius:12px;color:#63438c}.call-processing strong{display:block;font-size:14px;font-weight:600;line-height:1.5}.call-processing p{margin:3px 0 0;font-size:12px;line-height:1.6;color:#79678f}.call-processing-spinner{width:21px;height:21px;box-sizing:border-box;flex-shrink:0;border:2px solid #d9c7ef;border-top-color:#8050c8;border-radius:50%;animation:call-processing-spin .9s linear infinite}@keyframes call-processing-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.call-processing-spinner{animation:none;border-style:dotted}}

/* Shared UI: components/whats-new.css */
.connect-whats-new{margin:18px 24px;border:1px solid #ddd5f2;border-radius:14px;padding:22px;background:linear-gradient(125deg,#faf8ff,#fff 65%);color:#24253a;box-shadow:0 4px 20px #6250a509}.whats-new-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.whats-new-eyebrow{display:flex;align-items:center;gap:7px;text-transform:uppercase;letter-spacing:1px;color:#776294;font-size:10px;font-weight:650}.whats-new-top h2{font-size:22px;letter-spacing:-.5px;margin:8px 0}.whats-new-top p,.whats-new-grid p{font-size:12px;line-height:1.65;color:#6f6f81;margin:0}.whats-new-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 26px;margin:22px 0}.whats-new-grid article{display:flex;gap:9px;align-items:flex-start}.whats-new-grid article>svg{color:#7960a8;flex-shrink:0;margin-top:2px}.whats-new-grid h3{font-size:13px;margin:0 0 5px;font-weight:650}.whats-new-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid #eee8f7;padding-top:16px}.whats-new-footer>span{font-size:10px;color:#838091}.whats-new-footer>div{display:flex;gap:8px}.connect-whats-new button:focus-visible{outline:2px solid #7960a8;outline-offset:3px}@media(max-width:700px){.connect-whats-new{margin:14px;padding:17px}.whats-new-grid{grid-template-columns:1fr;gap:16px}.whats-new-footer{flex-wrap:wrap}.whats-new-top h2{font-size:20px}.whats-new-footer>div{flex-wrap:wrap}}