/* ==========================================================================
   CRM Demo Link Modal - Result Box & Specific Styles
   Inherits canonical backdrop & dialog styles from modal.css
   ========================================================================== */

.crm-demo-result-box {
  background: color-mix(in srgb, var(--primary) 8%, var(--apple-bg));
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
  border-radius: var(--apple-radius-sm);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.crm-demo-result-box__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.crm-demo-result-box__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--apple-text);
}

.crm-demo-link-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.crm-demo-link-input {
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: calc(var(--apple-radius-sm) - 2px);
  background: var(--apple-bg);
  border: 1px solid var(--apple-border);
  color: var(--apple-text);
  outline: none;
  transition: border-color 0.15s ease;
}

.crm-demo-link-input:focus {
  border-color: var(--primary);
}

.crm-demo-email-template {
  font-size: 12px;
  line-height: 1.5;
  padding: 12px;
  background: var(--apple-bg);
  border: 1px solid var(--apple-border);
  border-radius: calc(var(--apple-radius-sm) - 2px);
  color: var(--apple-text-secondary);
  white-space: pre-wrap;
  user-select: all;
}