/* telnyx-demo-dialer.css — homepage click-to-call widget for answerfirstring.com
   Any button/link with class="cin-dd-trigger" becomes an in-browser call button.
   Inline controls (.cin-dd-ui) are injected right next to the clicked trigger. */

.cin-dd-trigger.cin-dd-disabled,
.cin-dd-trigger[disabled] {
  opacity: .55;
  cursor: default;
  pointer-events: none;
}

.cin-dd-ui {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: 12px;
  vertical-align: middle;
  font-family: inherit;
}

.cin-dd-ui .cin-dd-status {
  font-size: .92rem;
  color: #6b7280;
  white-space: nowrap;
}
.cin-dd-ui .cin-dd-status.cin-dd-busy  { color: #2563eb; }
.cin-dd-ui .cin-dd-status.cin-dd-live  { color: #059669; font-weight: 600; }
.cin-dd-ui .cin-dd-status.cin-dd-error { color: #dc2626; white-space: normal; }

/* pulsing dot when connected */
.cin-dd-ui .cin-dd-status.cin-dd-live::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: #10b981;
  vertical-align: middle;
  animation: cin-dd-pulse 1.2s ease-in-out infinite;
}
@keyframes cin-dd-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .35; transform: scale(1.6); }
}

.cin-dd-ui button {
  padding: 9px 16px;
  font-size: .9rem;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1;
}
.cin-dd-ui .cin-dd-hangup {
  color: #fff;
  background: #dc2626;
}
.cin-dd-ui .cin-dd-hangup:hover { background: #b91c1c; }
.cin-dd-ui .cin-dd-mute {
  color: #1f2937;
  background: #f3f4f6;
  border-color: #d1d5db;
}
.cin-dd-ui .cin-dd-mute:hover { background: #e5e7eb; }