/* ============================================================
   Navigator Hub — powiadomienie „Dzwoni” (public/ui/incoming-call.js)
   Wygląd wyłącznie przez tokeny z tokens.css — zero literałów kolorów, zero !important.
   Stos siedzi w kolumnie komunikatów (#toastContainer): nad kartą pacjenta i oknami.
   ============================================================ */

.nh-inc-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.nh-inc-stack:empty { display: none; }
.nh-inc-stack--free {                 /* awaryjnie, gdy brak kolumny komunikatów */
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 100070;
}

.nh-inc {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  width: 300px;
  max-width: 100%;
  background: var(--nh-surface);
  border: 2px solid var(--nh-ok-text);
  border-radius: var(--nh-r-card);
  box-shadow: var(--nh-sh-modal);
  font-family: var(--nh-font-body);
  color: var(--nh-text);
}
.nh-inc[data-inc-phase="ivr"]     { border-color: var(--nh-warn-text); }
.nh-inc[data-inc-phase="missed"],
.nh-inc[data-inc-phase="dropped"] { border-color: var(--nh-miss-text); }
.nh-inc-return                    { border-color: var(--nh-line); }

.nh-inc-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: none;
  border: 0;
  border-radius: var(--nh-r-card);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.nh-inc-main:hover { background: var(--nh-field); }

.nh-inc-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--nh-font-head);
  font-size: var(--nh-text-sm);
  font-weight: 600;
  color: var(--nh-ok-text);
}
.nh-inc[data-inc-phase="ivr"] .nh-inc-title     { color: var(--nh-warn-text); }
.nh-inc[data-inc-phase="missed"] .nh-inc-title,
.nh-inc[data-inc-phase="dropped"] .nh-inc-title { color: var(--nh-miss-text); }
.nh-inc-return .nh-inc-title                    { color: var(--nh-text-2); }

.nh-inc-name {
  font-size: var(--nh-text-base);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nh-inc-sub {
  font-size: var(--nh-text-sm);
  color: var(--nh-text-2);
  font-variant-numeric: tabular-nums;
}
.nh-inc-sub:empty { display: none; }

.nh-inc-x {
  flex: none;
  margin: var(--space-2);
  padding: var(--space-1);
  background: none;
  border: 0;
  border-radius: var(--nh-r-btn);
  color: var(--nh-text-2);
  cursor: pointer;
}
.nh-inc-x:hover { background: var(--nh-field); color: var(--nh-text); }

@media (prefers-reduced-motion: no-preference) {
  .nh-inc[data-inc-phase="ringing"] { animation: nhIncPulse 1.4s ease-in-out infinite; }
}
@keyframes nhIncPulse {
  0%, 100% { box-shadow: var(--nh-sh-modal), 0 0 0 0 color-mix(in srgb, var(--nh-ok-text) 45%, transparent); }
  50%      { box-shadow: var(--nh-sh-modal), 0 0 0 6px color-mix(in srgb, var(--nh-ok-text) 0%, transparent); }
}