/* ── Coach ausprobieren ohne Konto (coach-demo.js) ────────────────────────────
   Eigenstaendig (Praefix cd-), laeuft auf der Landing und auf der Schulen-Seite.
   Blasen wie der Helfer (.sh-msg), Tipp-Punkte wie components.css (4),
   Knopf wie .btn-primary der Landing, Busy-Zustand wie .btn-busy. */

.cd-card {
  background: #fff; border-radius: 20px; padding: 24px; max-width: 720px; margin: 0 auto;
  box-shadow: 0 1px 2px rgba(24,24,27,0.04), 0 24px 60px rgba(24,24,27,0.1);
  text-align: left; color: #18181B;
}

/* Schritt 1: Wunschberuf */
.cd-label { display: block; font-size: 13px; font-weight: 700; color: #3F3F46; margin-bottom: 8px; }
.cd-start-row { display: flex; gap: 10px; }
.cd-input, .cd-textarea {
  width: 100%; min-width: 0; font-family: inherit; font-size: 16px; color: #18181B;
  background: #FAFBFF; border: 1.5px solid #E4E4E7; border-radius: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.cd-input { flex: 1; height: 44px; padding: 0 14px; }
.cd-input::placeholder, .cd-textarea::placeholder { color: #A1A1AA; }
.cd-input:focus, .cd-textarea:focus {
  outline: none; border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37,99,235,0.15); background: #fff;
}
.cd-input.is-invalid, .cd-textarea.is-invalid { border-color: #DC2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.12); }

/* Knopf: Pille wie .btn-primary der Landing */
.cd-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  height: 44px; padding: 0 22px; border-radius: 100px; border: none; cursor: pointer;
  background: #2563EB; color: #fff; font-family: inherit; font-size: 14px; font-weight: 700;
  text-decoration: none; white-space: nowrap; box-shadow: 0 6px 18px rgba(37,99,235,0.28);
  transition: background .2s, transform .2s cubic-bezier(0.16,1,0.3,1);
}
.cd-btn:hover { background: #1D4ED8; }
.cd-btn:hover, .cd-btn:focus { text-decoration: none; }
.cd-btn:active { transform: scale(0.97); }
.cd-btn:focus-visible, .cd-retry:focus-visible { outline: 2px solid #1D4ED8; outline-offset: 2px; }
.cd-btn-ghost { background: #fff; color: #1D4ED8; box-shadow: inset 0 0 0 1.5px #2563EB; }
.cd-btn-ghost:hover { background: #EFF6FF; }

/* Busy-Zustand wie .btn-busy (base.css) */
.cd-btn.is-busy { color: transparent; pointer-events: none; cursor: progress; }
.cd-btn.is-busy:disabled { opacity: 0.92; }
.cd-btn.is-busy > * { visibility: hidden; }
.cd-btn.is-busy::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;
  animation: cdSpin .7s linear infinite;
}
@keyframes cdSpin { to { transform: rotate(360deg); } }

/* Schritt 2: Gespraech */
.cd-log { display: flex; flex-direction: column; gap: 12px; }
.cd-row { display: flex; align-items: flex-end; gap: 8px; }
.cd-row.is-user { justify-content: flex-end; }
.cd-row.is-new { animation: cdIn .22s cubic-bezier(0.23,1,0.32,1) both; }
@keyframes cdIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cd-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; object-fit: cover; background: #EFF6FF; }

.cd-msg {
  max-width: 85%; padding: 10px 13px; font-size: 14px; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.cd-msg.is-user { background: #2563EB; color: #fff; border-radius: 16px 16px 4px 16px; }
.cd-msg.is-bot { background: #F4F6FA; color: #18181B; border-radius: 16px 16px 16px 4px; }
.cd-msg.is-error { background: #FFF7ED; color: #7C2D12; white-space: normal; }
.cd-retry {
  display: inline-flex; margin-left: 8px; padding: 5px 12px; border-radius: 100px; cursor: pointer;
  border: 1px solid #DBEAFE; background: #fff; color: #1D4ED8; font-family: inherit; font-size: 13px; font-weight: 700;
}
.cd-retry:hover { background: #EFF6FF; }

/* "Coach schreibt gerade" – gleiche Werte wie helper.css / components.css (4) */
.cd-card .cd-msg.is-typing { padding: 12px 14px; }
.cd-card .typing-indicator { display: inline-flex; align-items: center; gap: 10px; min-height: 21px; }
.cd-card .typing-dots { display: inline-flex; align-items: center; gap: 4px; }
.cd-card .typing-dots i {
  width: 7px; height: 7px; border-radius: 50%; background: #2563EB; opacity: 0.55;
  animation: cdTyping 1.3s ease-in-out infinite;
}
.cd-card .typing-dots i:nth-child(2) { animation-delay: 0.16s; }
.cd-card .typing-dots i:nth-child(3) { animation-delay: 0.32s; }
@keyframes cdTyping {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
  30%           { transform: translateY(-3px); opacity: 1; }
}
.cd-card .typing-label { font-size: 12.5px; color: #71717A; white-space: normal; }

/* Eingabe unter dem Gespraech */
.cd-compose { margin-top: 18px; }
.cd-textarea { display: block; padding: 12px 14px; line-height: 1.5; resize: vertical; min-height: 84px; }
.cd-textarea[readonly] { opacity: 0.7; }
.cd-compose-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.cd-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: #71717A; }
.cd-count { font-variant-numeric: tabular-nums; }
.cd-left { font-weight: 600; color: #1D4ED8; }

/* Abschluss */
.cd-end { margin-top: 18px; padding: 20px; border-radius: 16px; background: #EFF6FF; }
.cd-end.is-new { animation: cdIn .22s cubic-bezier(0.23,1,0.32,1) both; }
.cd-end-title { font-size: 18px; font-weight: 800; color: #18181B; margin: 0 0 6px; }
.cd-end-text { font-size: 14px; line-height: 1.6; color: #3F3F46; margin: 0 0 14px; }
.cd-end-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Hinweis unter dem Widget */
.cd-note { max-width: 720px; margin: 12px auto 0; font-size: 12px; line-height: 1.5; color: #71717A; text-align: center; }

@media (max-width: 640px) {
  .cd-card { padding: 16px; }
  .cd-start-row { flex-direction: column; }
  .cd-start-row .cd-input { flex: none; }
  .cd-start-row .cd-btn { width: 100%; }
  .cd-msg { max-width: 88%; }
  .cd-end { padding: 16px; }
  .cd-end-actions .cd-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cd-row.is-new, .cd-end.is-new, .cd-card .typing-dots i, .cd-btn.is-busy::after { animation: none; }
  .cd-card .typing-dots i { opacity: 0.7; }
  .cd-btn, .cd-input, .cd-textarea { transition: none; }
  .cd-btn:active { transform: none; }
}