/* Product mode first run (html[data-product], firstrun.js): Joe's question, one box with Send and a microphone, the AI
   disclosure, and everything else behind "More". Every rule but the first is scoped, so the course site is unchanged. */
#welcome .welcomeProduct { display: none; }
html[data-product] #welcome .welcomeCourse { display: none; }
html[data-product] #welcome .welcomeProduct { display: block; }
html[data-product] .welcomeCard { max-width: 380px; padding: 20px 20px 18px; }
html[data-product] .welcomeProduct img { display: block; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 42%; margin: 0 0 12px; box-shadow: 0 0 0 3px #6b8e8355; }
html[data-product] .welcomeProduct p { margin: 0 0 10px; font-size: 16px; line-height: 1.45; }
html[data-product] .welcomeProduct a { color: inherit; }
html[data-product] #welcomeStart { display: block; width: 100%; margin-top: 16px; padding: 12px 16px; border-radius: 999px; border: 0; background: var(--rust); color: #fff; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }

/* Course framing, internal notes and duplicate entry points are not part of the product screen. */
html[data-product] .v2nav, html[data-product] #v2Video, html[data-product] #assessmentNote, html[data-product] #v2Week,
html[data-product] [data-feedback="app"], html[data-product] #answerHint, html[data-product] #legacySettingsNotice,
html[data-product] #tellLink, html[data-product] #situationsLink, html[data-product] #skillsLink, html[data-product] #v2Link,
html[data-product] .v2row, html[data-product] .v2ask, html[data-product] #v2Resume, html[data-product] #savedDataPanel,
html[data-product] .messageActions .rate, html[data-product] #leaveFeedback, html[data-product] #captureStorage,
html[data-product] #disclosure #howItWorks, html[data-product] #disclosure #aboutToggle, html[data-product] .stageNote,
html[data-product] .stageCopy h2, html[data-product] #avatarBadge, html[data-product] #recordingHelp:empty, html[data-product] #keepTypedDraft { display: none !important; }

html[data-product] header { border-bottom: 0; padding-bottom: 6px; }
html[data-product] #fxMoreBtn { margin-left: auto; padding: 8px 16px; font-size: 15px; background: var(--paper); }
html[data-product] #fxMoreBtn[aria-expanded="true"] { border-color: var(--sage); }
html[data-product] #disclosure { margin: 6px 0 12px; }

/* Joe (photo and status) appears once the conversation starts, as one slim sticky row. */
html[data-product] main:not(:has(#messages .message)) #stage:not(.idle):not(.live) { display: none; }
html[data-product] #stage:not(.idle):not(.live) { padding: 8px 14px; gap: 12px; flex-wrap: nowrap; align-items: center; border-radius: 14px; }
html[data-product] #stage:not(.idle):not(.live) .portrait { min-width: 0; }
html[data-product] #stage:not(.idle):not(.live) #portraitPhoto { width: 44px; height: 44px; }
html[data-product] #stage #status { font-size: 15px; line-height: 1.35; }

/* Joe asks first. */
html[data-product] .fxAsk { display: flex; gap: 10px; align-items: flex-end; margin: 4px 0 8px; }
html[data-product] .fxAsk img { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 42%; }
html[data-product] .fxAsk .fxBubble { background: #f4e7da; border-radius: 15px 15px 15px 3px; padding: 10px 14px; max-width: 520px; }
html[data-theme="dim"][data-product] .fxAsk .fxBubble { background: #2d2823; }
html[data-product] .fxBubble small { display: block; color: var(--muted); font-size: 12.5px; margin-bottom: 2px; }
html[data-product] .fxBubble p { margin: 0; font-size: 17px; line-height: 1.4; color: var(--ink); }
html[data-product] #starters .lastTime { margin: 0 0 8px 54px; }
html[data-product] .fxExamples { margin: 4px 0 6px; }
html[data-product] .fxExamples > p { margin: 0 0 6px; font-size: 14px; color: var(--muted); }
html[data-product] .fxExamples > div { display: flex; flex-direction: column; gap: 6px; }
html[data-product] .fxExample { text-align: left; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 12px; padding: 9px 12px; font-size: 15px; line-height: 1.35; cursor: pointer; }
html[data-product] .fxExample:hover { border-color: var(--sage); }

/* The box: a real microphone icon, Send, and nothing else. */
html[data-product] #mic { font-size: 0; width: 46px; height: 46px; padding: 0; position: relative; flex: none; }
html[data-product] #mic::before { content: ""; position: absolute; inset: 0; margin: auto; width: 24px; height: 24px; background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21h2v-3.08A7 7 0 0 0 19 11h-2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21h2v-3.08A7 7 0 0 0 19 11h-2z'/%3E%3C/svg%3E") center / contain no-repeat; }
html[data-product] #mic.recording::before { width: 16px; height: 16px; border-radius: 3px; -webkit-mask: none; mask: none; }
html[data-product] #send { font-weight: 600; }
html[data-product] .fxUnder { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 6px 2px 0; }
html[data-product] body:not([data-state="speaking"]) #stopSpeaking { display: none; }
html[data-product] #stopSpeaking { margin: 0; }
html[data-product] #voiceNotice { margin: 0; font-size: 13.5px; color: var(--muted); }

/* A take with nothing in it, or one that could not be turned into words: one plain next step. */
html[data-product] #transcriptReview .fxEmpty, html[data-product] #transcriptReview .fxFailed { display: none; }
html[data-product] #transcriptReview[data-outcome="empty"] > :not(.fxEmpty) { display: none; }
html[data-product] #transcriptReview[data-outcome="empty"] .fxEmpty { display: block; }
html[data-product] #transcriptReview[data-outcome="failed"] .fxFailed { display: block; }
html[data-product] #transcriptReview[data-outcome="failed"] #reviewHint, html[data-product] #transcriptReview[data-outcome="failed"] label,
html[data-product] #transcriptReview[data-outcome="failed"] #sendTranscript, html[data-product] #transcriptReview[data-outcome="failed"] #continueRecording { display: none; }
html[data-product] .fxEmpty p, html[data-product] .fxFailed { margin: 0 0 10px; font-size: 16px; font-weight: 600; color: var(--ink); }
html[data-product] .fxEmpty { text-align: left; }
html[data-product] #fxRecordAgain { border: 0; border-radius: 999px; background: var(--rust); color: #fff; padding: 10px 22px; font-size: 16px; font-weight: 600; }

/* More. */
html[data-product] #fxMore { border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; margin: 8px 0 12px; background: var(--paper); box-shadow: 0 10px 28px #17323818; font-size: 15px; }
html[data-product] #fxMore .fxRow { display: flex; flex-wrap: wrap; gap: 8px; }
html[data-product] #fxMore .fxRow > .quiet { margin: 0; font-size: 14.5px; }
html[data-product] #fxMore .fxRow > a.quiet[hidden] { display: none; }
html[data-product] #fxMore .fxRow > a.quiet { text-decoration: none; display: inline-block; }
html[data-product] .fxSec { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; }
html[data-product] .fxSec h3 { margin: 0 0 8px; font-size: 15px; }
html[data-product] #fxMore #lessonHistory { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); padding: 0; }
html[data-product] #fxMore #lessonHistory button { white-space: normal; text-align: left; border-radius: 10px; }
html[data-product] #fxWays > label { display: flex; gap: 8px; align-items: center; font-size: 14.5px; color: var(--ink); }
html[data-product] #fxWays .v2keep { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; padding: 0; }
html[data-product] #fxWays .v2keep:not(:has(button:not([hidden]))) { display: none; }
html[data-product] #fxWays #quickActions { flex-wrap: wrap; overflow: visible; margin: 0; padding: 8px 0 0; }
html[data-product] #fxSettings .toggle { display: flex; gap: 8px; align-items: center; margin: 4px 0; font-size: 14.5px; color: var(--ink); }
html[data-product] #fxSettings .toggle[hidden] { display: none; }
html[data-product] #fxSettings .recordLimit { display: block; margin: 6px 0 0; font-size: 14.5px; color: var(--ink); }
html[data-product] .fxSec details { margin-top: 6px; padding-top: 8px; font-size: 14px; }
html[data-product] .fxLinks { margin: 6px 0 0; color: var(--muted); }
html[data-product] .fxLinks a, html[data-product] .fxLinks .link, html[data-product] .fxHelp a, html[data-product] .fxFoot a { color: var(--ink); text-decoration: underline; }
html[data-product] .fxLinks .link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
html[data-product] .fxLegal { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; }
html[data-product] .fxHelp { margin: 6px 0 0; color: var(--muted); }
html[data-product] #fxDeleteBox { border: 1px solid #d9b5a5; border-radius: 12px; padding: 10px 12px; margin-top: 8px; font-size: 14.5px; }
html[data-product] #fxDeleteBox p { margin: 0 0 8px; }
html[data-product] .fxActions { display: flex; flex-wrap: wrap; gap: 8px; }
html[data-product] .fxActions button { border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 999px; padding: 7px 14px; font-size: 14.5px; }
html[data-product] .fxActions .fxDanger { background: #b3261e; border-color: #b3261e; color: #fff; font-weight: 600; }
html[data-product] .fxNote { font-size: 13.5px; color: var(--muted); margin: 6px 0 0; }
html[data-product] #fxAbout #aboutPanel { border: 0; margin: 6px 0 0; padding: 0; }
html[data-product] #fxAbout #aboutPanel > summary { display: none; }
html[data-product] #fxAbout #aboutBody p { margin: 0 0 6px; color: var(--ink); font-size: 14.5px; }
html[data-product] .fxFoot { margin: 28px 0 0; padding-top: 12px; border-top: 1px solid var(--line); text-align: center; font-size: 13px; color: var(--muted); }
html[data-product] header { flex-wrap: nowrap; }
html[data-product] header > div:not(.mark) { flex: 1 1 auto; min-width: 0; }
html[data-product] #starters .fxBubble p { color: var(--ink); }
html[data-product] #starters .fxBubble small { color: var(--muted); }
html[data-product] #transcriptReview .fxEmpty { text-align: left; padding: 2px 0; }
html[data-product] main:not(:has(#messages .message)) #voiceNotice { display: none; }
html[data-product] .fxStageAI { display: none; }
html[data-product] main:has(#messages .message) #disclosure { display: none; }
html[data-product] main:has(#messages .message) .fxStageAI { display: block; margin: 0 0 2px; font-size: 12.5px; line-height: 1.35; color: var(--ink); }
html[data-product] #stage .stageCopy { min-width: 0; }
html[data-product] #fxDeleteBox a { color: var(--ink); }