#communicationAssist {
  display: grid;
  gap: var(--space-4, 1rem);
  color: var(--text-primary, #1a1a2e);
  font-size: 14px;
}

#communicationAssist section {
  min-width: 0;
  display: grid;
  gap: var(--space-3, 12px);
  padding: var(--space-4, 1rem);
  border: 1px solid var(--border-strong, var(--border, #e2e8f0));
  border-radius: var(--radius-md, 10px);
  background: var(--surface-subtle, var(--bg-card, #fff));
}

#communicationAssist :is(p, li, label, dt, dd, .capability-banner, .capability-scenario-picker) {
  font-size: 14px;
}

#communicationAssist > header h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
}

#communicationAssist section :is(h4, h5) {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
}

#communicationAssist :is(button, input, select, textarea) {
  min-height: var(--control-height, 40px);
  font: inherit;
}

#communicationAssist :is(button, input, select, textarea):focus-visible {
  outline: 3px solid var(--primary, #e31937);
  outline-offset: 2px;
}

#communicationAssist :is(button, input, select, textarea):disabled {
  cursor: not-allowed;
  opacity: .58;
}

#communicationAssist .btn-primary:hover { transform: none; }

#communicationAssistViewState {
  margin: 0;
  padding: var(--space-3, 12px);
  border: 1px solid var(--border-strong, var(--border, #e2e8f0));
  border-color: currentColor;
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-subtle, var(--bg-light, #f8f9fc));
  overflow-wrap: anywhere;
}

#communicationAssistViewState:is(
  [data-status="error"],
  [data-status="forbidden"]
) {
  background: #fff1f2;
  color: #9f1239;
}

#communicationAssistViewState:is(
  [data-status="empty"],
  [data-status="not_configured"],
  [data-status="human_review"]
) {
  background: #fff7ed;
  color: #9a3412;
}

#communicationAssist [data-status="cleared"] {
  background: var(--surface-subtle, var(--bg-light, #f8f9fc));
  color: var(--text-secondary, #64748b);
}

.communication-assist textarea {
  box-sizing: border-box;
  display: block;
  inline-size: 100%;
  max-inline-size: 48rem;
  min-block-size: 6rem;
  padding: var(--space-3, 12px);
  border: 1px solid var(--border-strong, var(--border, #e2e8f0));
  border-radius: var(--radius-sm, 6px);
  background: var(--bg-card, #fff);
}

.communication-assist__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
}

@media (max-width: 640px) {
  #communicationAssist section { padding: var(--space-3, 12px); }
  #communicationAssist :is(button, input, select, textarea) { min-height: var(--control-height-touch, 44px); }
  #communicationAssist .communication-assist__actions .btn { flex: 1 1 12rem; }
}

@media (prefers-reduced-motion: reduce) {
  #communicationAssist, #communicationAssist * { transition-duration: 0s !important; animation-duration: 0s !important; }
}