.zc-presence-panel,
.zc-routing-card {
  margin: 18px 0;
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(6,26,47,.06);
}

.zc-presence-heading,
.zc-routing-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.zc-presence-heading h2,
.zc-routing-heading h2 {
  margin-bottom: 8px;
}

.zc-presence-heading p,
.zc-routing-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.zc-presence-controls {
  display: grid;
  grid-template-columns: minmax(180px, .7fr) minmax(0, 1.5fr);
  gap: 14px;
  margin-top: 18px;
  align-items: end;
}

.zc-presence-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.zc-status-button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.zc-status-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(6,26,47,.08);
}

.zc-status-button.active { box-shadow: inset 0 0 0 2px currentColor; }
.zc-status-button.is-available { color: #0f766e; background: #effcf9; }
.zc-status-button.is-urgent { color: #9a5a09; background: #fff8e8; }
.zc-status-button.is-unavailable { color: #a53b3b; background: #fff2f2; }
.zc-status-button.is-neutral { color: #5f7084; background: #f5f7fa; }

.zc-presence-hint {
  display: block;
  margin-top: 12px;
  color: var(--muted);
}

.zc-presence-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.zc-presence-badge i {
  font-style: normal;
  font-weight: 900;
}

.zc-presence-badge.is-available { color: #0f766e; background: #effcf9; }
.zc-presence-badge.is-urgent { color: #9a5a09; background: #fff8e8; }
.zc-presence-badge.is-unavailable { color: #a53b3b; background: #fff2f2; }
.zc-presence-badge.is-neutral { color: #607388; background: #f5f7fa; }
.zc-presence-badge.is-compact { min-height: 26px; padding: 4px 8px; font-size: 10px; }

[data-zc-person-presence] {
  display: inline-flex;
  margin-top: 6px;
}

.zc-routing-card {
  display: grid;
  gap: 14px;
}

.zc-routing-person {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfdfe;
}

.zc-routing-person span:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.zc-routing-person small { color: var(--muted); }
.zc-routing-person strong { color: var(--ink); }

.zc-routing-action {
  display: grid;
  gap: 10px;
  padding: 15px;
  border-radius: 15px;
  background: #fff8ed;
  border: 1px solid #f7d8aa;
}

.zc-routing-action .button { width: 100%; }
.zc-routing-action > small { color: #775c35; line-height: 1.45; }

.zc-routing-history {
  display: grid;
  gap: 6px;
  padding-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.zc-routing-history strong { color: var(--ink); }

@media (max-width: 760px) {
  .zc-presence-heading,
  .zc-routing-heading {
    flex-direction: column;
    align-items: stretch;
  }

  .zc-presence-controls {
    grid-template-columns: 1fr;
  }

  .zc-presence-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zc-routing-person {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 390px) {
  .zc-presence-actions { grid-template-columns: 1fr; }
}