/* ═══════════════════════════════════════════════════════════════════
   Components: Understanding Panel & Step Guide
   ═══════════════════════════════════════════════════════════════════ */

.fy-understanding-panel,
.fy-step-guide {
  position: relative;
  margin-top: clamp(18px, 2.5vw, 28px);
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid rgba(168, 78, 47, 0.22);
  border-radius: clamp(22px, 2.5vw, 30px);
  background:
    linear-gradient(90deg, var(--color-brand-700) 0 6px, transparent 6px),
    linear-gradient(145deg, rgba(255, 250, 241, 0.98), rgba(245, 237, 222, 0.9));
  box-shadow: 0 18px 42px rgba(36, 31, 23, 0.08);
}

.fy-understanding-panel h3,
.fy-step-guide h3 {
  margin: 8px 0;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.7vw, 2.25rem);
}

.fy-understanding-panel > p,
.fy-step-guide > p {
  color: var(--color-ink-soft);
  line-height: var(--leading-relaxed);
}

.fy-understanding-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.fy-understanding-actions .button {
  min-height: 54px;
  white-space: normal;
}

/* Retell Panel */
.fy-retell-panel,
.fy-handoff-panel {
  margin-top: 20px;
  padding: 18px;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(40, 72, 66, 0.14);
}

.fy-retell-panel label {
  display: grid;
  gap: 10px;
  color: var(--color-ink);
  font-weight: var(--weight-black);
}

.fy-retell-panel input {
  min-height: 54px;
  padding: 12px 14px;
  border: 1px solid rgba(25, 38, 43, 0.24);
  border-radius: 14px;
  color: var(--color-ink);
  background: var(--color-paper-light);
  font: inherit;
}

.fy-retell-panel .button { width: 100%; margin-top: 12px; }

.fy-retell-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.fy-retell-panel > small,
.fy-handoff-panel li small {
  display: block;
  margin-top: 8px;
  color: var(--color-ink-soft);
  line-height: 1.55;
}

/* Handoff Panel */
.fy-handoff-panel ul {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.fy-handoff-panel li {
  padding: 12px 14px;
  border-left: 4px solid var(--color-accent-600);
  border-radius: 8px 14px 14px 8px;
  background: rgba(40, 72, 66, 0.06);
}

.fy-handoff-panel li span { font-weight: var(--weight-black); }

.fy-handoff-panel li p { margin: 4px 0 0; color: var(--color-ink-soft); }

.fy-handoff-panel li a {
  display: inline-flex;
  margin-top: 8px;
  font-weight: var(--weight-extrabold);
  color: var(--color-brand-700);
}

/* Status */
.fy-understanding-status {
  min-height: 1.7em;
  margin: 14px 0 0;
  color: var(--color-accent-600);
  font-weight: var(--weight-extrabold);
}

.fy-next-turn { width: 100%; margin-top: 10px; }

/* Step Guide */
.fy-step-counter {
  margin-bottom: 4px;
  color: var(--color-brand-700) !important;
  font-weight: var(--weight-black);
}

.fy-step-text {
  min-height: 92px;
  margin: 12px 0;
  padding: 18px;
  border-radius: 18px;
  color: var(--color-ink) !important;
  background: rgba(40, 72, 66, 0.08);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.3vw, 1.65rem);
  font-weight: var(--weight-extrabold);
}

.fy-understood-status {
  display: none;
  margin: 0;
  padding: 14px 18px;
  border-radius: 17px;
  background: rgba(40, 72, 66, 0.11);
  color: var(--color-accent-600);
  font-weight: var(--weight-extrabold);
}

/* Responsive */
@media (max-width: 620px) {
  .fy-understanding-actions { grid-template-columns: 1fr; }
  .fy-understanding-panel,
  .fy-step-guide { padding: 20px; }
}

@media (max-width: 520px) {
  .fy-retell-actions { grid-template-columns: 1fr; }
}