/* v6 · agentul N · Dictarea (#/dictare) și butonul de microfon. Limbajul „Panou Automia” (tokens.css). */

/* pașii */
.pa-n-pasi { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.pa-n-pasbtn { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 16px; text-align: left; cursor: pointer; border-radius: 12px; border: 1px solid var(--hair-card); background: transparent; color: var(--cream); font: inherit; font-size: 16px; }
.pa-n-pasbtn b { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--dim); color: var(--void); font-family: var(--font-mono); font-weight: 500; font-size: 13px; }
.pa-n-pasbtn.is-activ { border-color: var(--accent); background: var(--bubble); }
.pa-n-pasbtn.is-activ b { background: var(--accent); }
.pa-n-pasbtn.is-facut b { background: var(--flux-green-ink); }
.pa-n-pasbtn:disabled { cursor: default; }
.pa-n-pasbtn:disabled:not(.is-activ) { color: var(--dim); }
.pa-n-pasbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* grila: pasul + „Cum vorbiți cu Alice” */
.pa-n-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.pa-n-col { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.pa-n-ajutor { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
@media (max-width: 1180px) { .pa-n-grid { grid-template-columns: minmax(0, 1fr); } }

/* pasul 1 · scena microfonului */
.pa-n-scena { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 40px 24px 32px; background: var(--panel); border: 1px solid var(--hair-card); border-radius: 16px; }
.pa-n-eticheta { margin: 0; font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--flux-orange-ink); text-align: center; }
.pa-n-micwrap { position: relative; width: 168px; height: 168px; display: grid; place-items: center; }
.pa-n-inel { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); animation: pa-n-inel 1.8s ease-out infinite; pointer-events: none; }
.pa-n-inel--2 { animation-delay: .9s; }
@keyframes pa-n-inel { from { transform: scale(.79); opacity: .9; } to { transform: scale(1.18); opacity: 0; } }
.pa-n-micmare { position: relative; width: 132px; height: 132px; display: grid; place-items: center; border-radius: 50%; border: none; cursor: pointer; background: var(--accent); color: var(--on-accent); box-shadow: 0 0 40px rgba(238,106,30,.35); transition: transform .15s; }
.pa-n-micmare:hover:not(:disabled) { transform: scale(1.04); }
.pa-n-micmare:focus-visible { outline: 3px solid var(--cream); outline-offset: 6px; }
.pa-n-micmare:disabled { cursor: not-allowed; background: var(--bubble); color: var(--dim); box-shadow: none; }
.pa-n-micmare.is-on { background: var(--accent); }
.pa-n-scena.is-pauza .pa-n-micmare { background: var(--bubble); color: var(--cream); border: 2px solid var(--accent); }

.pa-n-unda { display: flex; align-items: center; justify-content: center; gap: 5px; height: 46px; }
.pa-n-unda i { width: 5px; height: 46px; border-radius: 3px; background: var(--flux-orange-ink); transform: scaleY(.12); transition: transform .08s linear; }
.pa-n-unda i:nth-child(3n) { background: var(--accent); }
.pa-n-unda.is-stinsa i { background: var(--hair-card); transform: scaleY(.12); }
.pa-n-unda--mica { justify-content: flex-start; height: 26px; gap: 4px; }
.pa-n-unda--mica i { width: 4px; height: 26px; }

.pa-n-text { margin: 0; max-width: 820px; font-size: 21px; line-height: 1.6; text-align: center; color: var(--cream); white-space: pre-wrap; overflow-wrap: anywhere; }
.pa-n-sub { margin: 0; font-size: 15px; color: var(--dim); text-align: center; }
.pa-n-galben { color: var(--flux-yellow-ink); }
.pa-n-scris { width: 100%; max-width: 820px; display: flex; flex-direction: column; gap: 10px; }
.pa-n-scris[hidden] { display: none; }

/* pasul 2 · ce a înțeles Alice */
.pa-n-pas2, .pa-n-pas3 { display: flex; flex-direction: column; gap: 16px; }
.pa-n-dictat { max-width: 100%; white-space: normal; overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 6px; }
.pa-n-dictat [data-dictat] { white-space: pre-wrap; }
.pa-n-dictat .pa-link-mic { align-self: flex-start; }
.pa-n-inteles { padding: 0; }
.pa-n-intcap { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--hair-row); }
.pa-n-intcap > div { display: flex; flex-direction: column; gap: 4px; }
.pa-n-rand { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 6px 18px; padding: 14px 20px; border-bottom: 1px solid var(--hair-row); }
.pa-n-rand:last-child { border-bottom: 0; }
.pa-n-rand > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 17px; overflow-wrap: anywhere; }
.pa-n-rand b { font-weight: 600; }
.pa-n-rand--lipsa { background: rgba(232,193,90,.07); }
.pa-n-rand--lipsa > .pa-meta, .pa-n-rand--lipsa b { color: var(--flux-yellow-ink); }
.pa-n-parte { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pa-n-chipok { color: var(--flux-green-ink); }
.pa-n-lista { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.pa-n-decizie .pa-btn--cta { min-width: 180px; justify-content: center; }
.pa-n-corcard { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; }
.pa-n-corrand { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.pa-n-micmic { width: 64px; height: 64px; flex: none; display: grid; place-items: center; border-radius: 50%; border: none; cursor: pointer; background: var(--accent); color: var(--on-accent); }
.pa-n-micmic.is-on { animation: pa-n-puls 1.4s ease-in-out infinite; }
.pa-n-micmic:disabled { background: var(--bubble); color: var(--dim); cursor: default; animation: none; }
.pa-n-micmic:focus-visible { outline: 3px solid var(--cream); outline-offset: 4px; }
@keyframes pa-n-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(238,106,30,.55); } 50% { box-shadow: 0 0 0 12px rgba(238,106,30,0); } }

/* pasul 3 · Alice lucrează */
.pa-n-lucru { padding: 20px; }
.pa-n-bife { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 17px; }
.pa-n-bife li { display: flex; align-items: center; gap: 12px; color: var(--dim); }
.pa-n-bife li > span[aria-hidden] { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--hair-card); }
.pa-n-bife li.is-ok { color: var(--cream); }
.pa-n-bife li.is-ok > span[aria-hidden] { background: var(--flux-green-ink); border-color: var(--flux-green-ink); }
.pa-n-bife li.is-acum > span[aria-hidden] { border-color: var(--accent); border-top-color: transparent; animation: pa-n-roata 1s linear infinite; }
@keyframes pa-n-roata { to { transform: rotate(360deg); } }

/* butonul mic „Dictează” lângă câmpurile de text */
.pa-n-mic.is-on { border-color: var(--accent); color: var(--accent); animation: pa-n-puls 1.4s ease-in-out infinite; }
.pa-n-mic.is-off { color: var(--dim); border-style: dashed; }

/* telefon */
@media (max-width: 640px) {
  .pa-n-scena { padding: 28px 16px 24px; gap: 18px; }
  .pa-n-micwrap { width: 140px; height: 140px; }
  .pa-n-micmare { width: 110px; height: 110px; }
  .pa-n-text { font-size: 18px; }
  .pa-n-rand { grid-template-columns: minmax(0, 1fr); padding: 12px 16px; }
  .pa-n-intcap { padding: 16px; }
  .pa-n-decizie > .pa-btn { flex: 1 1 100%; justify-content: center; }
  .pa-n-scena .pa-actions > .pa-btn { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .pa-n-inel, .pa-n-micmic.is-on, .pa-n-mic.is-on, .pa-n-bife li.is-acum > span[aria-hidden] { animation: none !important; }
  .pa-n-inel { opacity: .5; transform: scale(1.05); }
  .pa-n-inel--2 { display: none; }
  .pa-n-unda i, .pa-n-micmare { transition: none !important; }
}