/* First task. Scoped to onboarding and the subscription card. */
.onboarding{flex:1;display:flex;flex-direction:column;padding:4px 2px 12px;scroll-padding-block:16px;gap:0;color:#e8eaf0}
.onboarding>*{flex-shrink:0}
.onboarding .eyebrow{color:#9aa2b4;font-size:10px;letter-spacing:1.8px;margin:0 0 14px;font-weight:650}
.onboarding h1{font-size:clamp(30px,8.3vw,40px);line-height:1.08;letter-spacing:-1.3px;font-weight:650;margin:0 0 12px}
.onboarding h1 span{color:#6c5ce7}
.onboarding-lead{font-size:14px;line-height:1.5;color:#9aa2b4;margin:0 0 24px}
.onboarding .onboarding-form{border:0;background:none;border-radius:0;padding:0;align-items:stretch;display:flex;flex-direction:column;gap:0;margin:0}
.onboarding-mic{display:flex;align-items:center;justify-content:center;gap:12px;min-height:64px;padding:12px 16px;border-radius:20px;background:var(--green,#6c5ce7);border:1px solid #6c5ce7;color:#1b1730;font-size:16px;font-weight:650}
.onboarding-mic-icon{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0}
.onboarding-mic[disabled]{opacity:1;background:#262b38;border-color:#262b38;color:#9aa2b4}
.onboarding-caption{font-size:12px;line-height:1.45;color:#9aa2b4;margin:9px 0 0}
.onboarding-label{font-size:13px;font-weight:550;margin:22px 0 8px;color:#e8eaf0}
.onboarding .onboarding-form textarea{width:100%;resize:vertical;border:1px solid #9aa2b4;border-radius:16px;background:#241f3d;padding:14px;font-size:16px;line-height:1.45;min-height:100px;max-height:180px;color:#e8eaf0}
.onboarding-form textarea::placeholder{color:#9aa2b4;opacity:1}
.onboarding-start{min-height:50px;margin-top:18px;border-radius:16px;font-size:15px;display:flex;justify-content:space-between;align-items:center}
.onboarding-start:disabled{opacity:1;background:#9aa2b4;color:#0f1117}
.onboarding-facts{display:flex;align-items:center;gap:12px;margin-top:20px;border-top:1px solid #262b38;padding-top:16px}
.onboarding-facts>span{font-size:25px;color:#6c5ce7}
.onboarding-facts p{font-size:12px;line-height:1.6;margin:0;color:#e8eaf0}
.onboarding-facts p span{color:#9aa2b4}
.onboarding .onboarding-skip{align-self:center;min-height:44px;padding:10px 12px;margin-top:8px;font-size:12px;color:#9aa2b4}
.onboarding :is(button,textarea):focus-visible,.subscribe-block :is(button,a):focus-visible{outline:3px solid #8b7cf6;outline-offset:3px}
.subscribe-block{border:1px solid #6c5ce7;background:#241f3d;border-radius:20px;padding:16px;margin:4px 0 10px;flex-shrink:0;color:#e8eaf0;max-height:46dvh;overflow:auto;overscroll-behavior:contain;touch-action:pan-y}
.subscribe-eyebrow{display:block;font-size:10px;letter-spacing:1.5px;font-weight:650;color:#e8eaf0;margin-bottom:8px}
.subscribe-block strong{display:block;font-size:18px;letter-spacing:-.4px;font-weight:650;margin-bottom:8px}
.subscribe-block p{font-size:13px;line-height:1.5;color:#e8eaf0;margin:0 0 12px}
.subscribe-actions{display:flex;flex-direction:column;gap:8px}
.subscribe-actions :is(.primary,.secondary){display:block;min-height:44px;padding:12px;text-align:center;text-decoration:none;border-radius:14px;font-size:14px;margin:0}
.subscribe-actions .secondary{border:1px solid #9aa2b4;background:#0f1117;color:#1b1730}
.subscribe-block .subscribe-hint{font-size:11px;color:#e8eaf0;margin:10px 0 0}
@media(max-height:700px){.onboarding .eyebrow{margin-bottom:10px}.onboarding h1{font-size:30px}.onboarding-lead{margin-bottom:16px}.onboarding-mic{min-height:56px}.onboarding-label{margin-top:16px}.onboarding-facts{margin-top:14px;padding-top:12px}.onboarding-start{margin-top:14px}}
/* The existing variable is the available viewport height, not keyboard inset. */
.shell:has(.onboarding){height:min(var(--moment-height,100dvh),var(--moment-keyboard-height,100dvh));padding-top:calc(14px + var(--moment-safe-top,env(safe-area-inset-top,0px)));padding-bottom:calc(10px + var(--moment-safe-bottom,env(safe-area-inset-bottom,0px)))}
@media(prefers-reduced-motion:reduce){.onboarding *{transition:none}}

.subscribe-block .subscribe-error{color:#ef4444;margin:12px 0 0}
.subscribe-actions button:disabled{opacity:1;background:#241f3d;color:#e8eaf0}

/* Moment · экран подписки и оплаты. Статус обновляется опросом (вебхук не настроен). */
.pay-block { flex: 1; display: flex; flex-direction: column; padding: 4px 2px 24px; }
.pay-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.pay-head h2 { font-size: 22px; font-weight: 620; letter-spacing: -.6px; margin: 0; }
.pay-plan {
  border: 1px solid #262b38; background: linear-gradient(120deg, #241f3d, #241f3d);
  border-radius: 20px; padding: 18px; margin-bottom: 20px;
}
.pay-plan-title { display: block; font-size: 15px; color: #e8eaf0; margin-bottom: 8px; }
.pay-plan-amount { display: block; font-size: 30px; font-weight: 620; letter-spacing: -1px; }
.pay-plan-amount small { font-size: 14px; font-weight: 450; color: #e8eaf0; letter-spacing: 0; }
.pay-label { display: block; font-size: 13px; color: #9aa2b4; margin-bottom: 10px; }
.pay-label input {
  display: block; width: 100%; margin-top: 8px; border: 1px solid #262b38; border-radius: 15px;
  background: #171a23; padding: 14px 15px; font-size: 16px;
}
.pay-hint { font-size: 13px; line-height: 1.5; color: #9aa2b4; margin: 0 0 14px; }
.pay-status { display: flex; align-items: center; gap: 12px; font-size: 17px; margin: 8px 0 14px; }
.pay-status.ok strong { color: #6c5ce7; }
.pay-status.bad strong { color: #ef4444; }
.pay-spinner {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid #241f3d; border-top-color: #6c5ce7; animation: paySpin .9s linear infinite;
}
@keyframes paySpin { to { transform: rotate(360deg); } }
.pay-block .primary, .pay-block .secondary { width: 100%; margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .pay-spinner { animation: none; } }

/* Одна кнопка в блоке подписки: сначала открывает канал, потом проверяет статус. */
.subscribe-open { display: block; text-align: center; text-decoration: none; }
.subscribe-block .text { min-height: 36px; font-size: 13px; color: #e8eaf0; }
.subscribe-error { font-size: 13px; color: #ef4444; margin: 10px 0 0; }
/* Короткая строка вместо трёх фактов в окне записи. */
.voice-facts-line { font-size: 13px; color: #9aa2b4; margin: 0 0 18px; line-height: 1.45; }

/* Выбор модели распознавания: вес загрузки важно видеть до нажатия. */
.model-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.model-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; padding: 13px 15px;
  border: 1px solid var(--m-line, #e3e6da); border-radius: 16px;
  background: var(--m-raised, #f8f9f6); color: inherit;
}
.model-row.current { border-color: var(--m-accent, #6c5ce7); background: var(--m-accent-deep, #eef3e2); }
.model-main { min-width: 0; display: block; }
.model-main strong { display: block; font-size: 15px; font-weight: 600; }
.model-main small { display: block; font-size: 12px; line-height: 1.4; color: var(--m-muted, #8a9080); margin-top: 4px; }
.model-side { text-align: right; flex-shrink: 0; }
.model-side b { display: block; font-size: 14px; font-weight: 600; }
.model-side em { display: block; font-size: 11px; font-style: normal; color: var(--m-accent-text, #87a746); margin-top: 3px; }