/* The interactive trainer only. Public articles keep the editorial theme. */
body.talk-studio {
  --pv-page:#f2f2f7; --pv-surface:#fff; --pv-ink:#1c1c1e; --pv-muted:#63636b;
  --pv-line:#d9d9df; --pv-accent:#0064d8; --pv-accent-strong:#004fae;
  --pv-accent-soft:#e9f2ff;
  background:var(--pv-page);
}
.talk-studio .talk-main { max-width:1120px; padding:0 16px 24px; }
.talk-studio .talk-heading { padding:24px 0 20px; }
.talk-studio .talk-heading h1 { font-size:clamp(30px,3.5vw,44px); line-height:1.12; letter-spacing:-.035em; margin:0 0 16px; }
.talk-studio .talk-heading .lead { font-size:16px; max-width:680px; }
.talk-studio :is(.action,.button) { border-radius:14px; min-height:48px; padding:13px 22px; font-size:16px; }
.talk-studio .action--quiet { background:white; border-color:#d1d1db; }
.talk-studio .scenario-list { grid-template-columns:minmax(0,1fr); gap:12px; }
.talk-studio .scenario-item { padding:20px; border:1px solid #e1e1e8; border-radius:22px; background:#fff; box-shadow:0 3px 12px #20203004; }
.talk-studio .scenario-item :is(h2,h3) { font-size:24px; line-height:1.22; margin:0 0 18px; }
.talk-studio .scenario-item h2 a { color:var(--pv-ink); }
.talk-studio .scenario-item .scenario-meta { font-size:12px; line-height:1.5; }
.talk-studio .scenario-item p { font-size:15px; margin:14px 0 0; }
.talk-studio :is(.briefing,.results,.methodology,#practice-content) { max-width:880px; margin-inline:auto; }
.talk-studio .briefing { background:white; border:1px solid #e1e1e8; border-radius:24px; padding:20px; }
.talk-studio .briefing h2 { font-size:21px; }
.talk-studio .briefing-roles { grid-template-columns:minmax(0,1fr); gap:16px; padding-bottom:20px; }
.talk-studio .briefing-context { padding:28px 0; }
.talk-studio .briefing-goals { grid-template-columns:minmax(0,1fr); gap:16px; padding:16px; background:#f2f2f7; border-radius:18px; }
.talk-studio .briefing-goals section+section { padding:16px 0 0; border-left:0; border-top:1px solid #d9d9e0; }
.talk-studio .briefing-lesson { padding:16px; margin-top:20px; background:#e9f2ff; border-radius:18px; }
.talk-studio .briefing-start { margin-top:28px; padding-top:24px; }
/* A single page scroll keeps messages and long choices accessible. */
.talk-studio:has(.messenger) .talk-main { max-width:900px; padding:0 8px 24px; }
.talk-studio .messenger { margin:12px auto 0; border:1px solid #dcdce3; border-radius:22px; background:white; box-shadow:0 12px 48px #27273509; overflow:clip; }
.talk-studio .chat-header { display:grid; grid-template-columns:44px minmax(0,1fr) auto; padding:12px; gap:8px; background:#fafafd; border-bottom:1px solid #e1e1e8; }
.talk-studio .chat-back { display:grid; place-items:center; width:44px; min-height:44px; margin:0; font:400 38px/1 var(--pv-font); text-decoration:none; color:var(--pv-accent); }
.talk-studio .chat-avatar { display:none; width:44px; height:44px; border:1px solid #0000000d; }
.talk-studio .chat-header h1 { font-size:16px; font-weight:650; line-height:1.3; letter-spacing:-.025em; overflow-wrap:anywhere; }
.talk-studio .chat-kind { display:block; font-size:12px; color:var(--pv-muted); margin-top:3px; }
.talk-studio .chat-header p { display:none; font-size:12px; margin-top:3px; }
.talk-studio .chat-header .text-button { padding:10px; border:0; background:#e9eef7; border-radius:14px; color:var(--pv-accent); min-height:44px; font-size:14px; }
.talk-studio .chat-context { padding:16px; background:#f2f6fd; }
.talk-studio .chat-context h2 { font-size:22px; }
.talk-studio .conversation-orientations { padding:16px; background:#fafafd; border-bottom:1px solid #e8e8ed; }
.talk-studio .conversation-orientations p { font-size:14px; line-height:1.5; color:#63636b; }
.talk-studio .chat-layout,.talk-studio .chat-messages { background:#fff; }
.talk-studio .chat-messages { padding:20px 12px; gap:20px; }
.talk-studio .bubble { max-width:94%; padding:14px 16px; border:0; background:#e9e9ee; color:#1c1c1e; border-radius:22px 22px 22px 7px; }
.talk-studio .bubble p { font-size:16px; line-height:1.5; }
.talk-studio .bubble-name { font-size:11px; color:#606069; margin-bottom:6px; }
.talk-studio .bubble[data-avatar]::before { display:none; }
.talk-studio .bubble::after { background:#e9e9ee; }
.talk-studio .bubble--self { background:#0064d8; color:white; border-radius:22px 22px 7px 22px; }
.talk-studio .bubble--self .bubble-name { color:#e1edff; }
.talk-studio .bubble--self::after { background:#0064d8; }
.talk-studio .dialogue-choices { width:100%; max-width:none; margin-top:8px; padding:16px 0 0; border-radius:0; background:transparent; }
.talk-studio .reply-heading { gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.talk-studio .reply-heading h2 { font-size:16px; }
.talk-studio .reply-heading>span { font-size:12px; }
.talk-studio .reply-options { gap:10px; }
.talk-studio .reply-option { min-height:54px; border:1px solid #dcdce4; border-radius:15px; padding:15px 44px 15px 14px; background:white; color:#174d90; font-size:16px; line-height:1.5; overflow-wrap:anywhere; box-shadow:0 2px 5px #00000003; }
.talk-studio .reply-option::after { content:'↑'; display:grid; place-items:center; right:12px; width:23px; height:23px; border-radius:50%; background:#0064d8; color:white; font:600 19px/1 var(--pv-font); }
.talk-studio .reply-option:hover { background:#e9f2ff; border-color:#89b8f0; }
.talk-studio .reply-option:active { background:#dceaff; }
.talk-studio .reply-option:disabled { opacity:.55; }
.talk-studio .chat-summary { padding:12px 16px; border-top:1px solid #e1e1e8; background:#fafafd; }
.talk-studio .conversation-actions { flex-wrap:wrap; gap:8px 20px; }
.talk-studio .conversation-actions .text-button { color:var(--pv-accent); min-height:44px; }
.talk-studio #end-talk { color:#a53028; }
.talk-studio .typing-bubble { padding:15px 19px; background:#e9e9ee; border-radius:22px; }
.talk-studio :is(.key-insight,.empty-practice,.resume-practice,.methodology,.share-card) { padding:20px; border:1px solid #e1e1e8; border-radius:22px; background:#fff; }
.talk-studio :is(.closing-reply,.next-steps) { padding:16px; border-radius:20px; }
.talk-studio .key-insight .insight-title { font-size:25px; }
.talk-studio .talk-subsection { padding:28px 0 0; margin-top:32px; }
.talk-studio .talk-subsection h2 { font-size:27px; }
.talk-studio .review-stack { border-radius:20px; border-color:#e1e1e8; }
.talk-studio details { padding-inline:16px; border-radius:18px; }
.talk-studio details[open] { padding-bottom:24px; }
.talk-studio .review-stack>details { border-radius:0; }
.talk-studio .practice-row { padding:20px; background:white; flex-direction:column; align-items:flex-start; }
.talk-studio .observation { padding:24px; background:white; border-radius:18px; margin-bottom:12px; }
.talk-studio .talk-confirm { padding:20px; max-height:calc(100dvh - 24px); overflow:auto; border:1px solid #dcdce4; border-radius:26px; }
.talk-studio .notice { border-radius:18px; }
@media(prefers-reduced-motion:reduce) { .talk-studio * { animation:none!important; transition:none!important; } }
@media(forced-colors:active) { .talk-studio :is(.bubble,.reply-option,.scenario-item) { border:1px solid CanvasText; } }

/* Mobile is the base; add space and columns only when they fit. */
.talk-studio .briefing-start .field__hint { min-width:0; flex-basis:100%; }
.talk-studio .briefing-start .action { width:100%; white-space:normal; }
.talk-studio :is(.briefing,.results,.practice-row,.methodology) { overflow-wrap:anywhere; min-width:0; }
.talk-studio :is(input,textarea,select) { max-width:100%; min-width:0; font-size:16px; }
.talk-studio .conversation-actions { display:grid; grid-template-columns:minmax(0,1fr); }
.talk-studio .conversation-actions .text-button { font-size:14px; text-align:left; }
.talk-studio .notice { max-width:calc(100% - 32px); width:max-content; overflow-wrap:anywhere; bottom:max(16px,env(safe-area-inset-bottom)); }
@media(min-width:400px) {
 .talk-studio .chat-header { grid-template-columns:44px 36px minmax(0,1fr) auto; }
 .talk-studio .chat-avatar { display:block; width:36px; height:36px; }
 .talk-studio .conversation-actions { display:flex; justify-content:space-between; }
}
@media(min-width:761px) {
  .talk-studio .talk-main { max-width:1120px; padding:0 32px 40px; }
  .talk-studio .talk-heading { padding:40px 0 28px; }
  .talk-studio .talk-heading .lead { font-size:18px; max-width:680px; }
  .talk-studio .scenario-list { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
  .talk-studio .scenario-item { padding:28px; border:1px solid #e1e1e8; border-radius:22px; background:#fff; box-shadow:0 3px 12px #20203004; }
  .talk-studio .briefing { background:white; border:1px solid #e1e1e8; border-radius:24px; padding:32px; }
  .talk-studio .briefing-roles { gap:24px; padding-bottom:24px; }
  .talk-studio .briefing-goals { gap:24px; padding:24px; background:#f2f2f7; border-radius:18px; }
  .talk-studio .briefing-goals section+section { padding-left:24px; border-color:#d9d9e0; }
  .talk-studio .briefing-lesson { padding:24px; margin-top:20px; background:#e9f2ff; border-radius:18px; }
  .talk-studio:has(.messenger) .talk-main { max-width:900px; padding-inline:24px; }
  .talk-studio .messenger { margin:28px auto 0; border:1px solid #dcdce3; border-radius:28px; background:white; box-shadow:0 12px 48px #27273509; overflow:clip; }
  .talk-studio .chat-header { display:flex; padding:20px 24px; gap:12px; background:#fafafd; border-bottom:1px solid #e1e1e8; }
  .talk-studio .chat-back { display:grid; place-items:center; flex:none; width:32px; min-height:44px; margin-left:-8px; font:400 38px/1 var(--pv-font); text-decoration:none; color:var(--pv-accent); }
  .talk-studio .chat-avatar { width:44px; height:44px; border:1px solid #0000000d; }
  .talk-studio .chat-header h1 { font-size:17px; font-weight:650; line-height:1.3; letter-spacing:-.025em; }
  .talk-studio .chat-header p { font-size:12px; margin-top:3px; }
  .talk-studio .chat-header .text-button { padding:10px 13px; border:0; background:#e9eef7; border-radius:14px; color:var(--pv-accent); min-height:44px; }
  .talk-studio .chat-context { padding:24px; background:#f2f6fd; }
  .talk-studio .conversation-orientations { padding:16px 24px; background:#fafafd; border-bottom:1px solid #e8e8ed; }
  .talk-studio .chat-messages { padding:28px 28px 24px; gap:22px; }
  .talk-studio .bubble { max-width:85%; padding:15px 19px; border:0; background:#e9e9ee; color:#1c1c1e; border-radius:22px 22px 22px 7px; }
  .talk-studio .bubble p { font-size:17px; line-height:1.5; }
  .talk-studio .dialogue-choices { width:100%; max-width:none; margin-top:8px; padding:22px; border-radius:22px; background:#f2f2f7; }
  .talk-studio .reply-option { min-height:54px; border:1px solid #dcdce4; border-radius:15px; padding:16px 52px 16px 18px; background:white; color:#174d90; font-size:16px; line-height:1.5; box-shadow:0 2px 5px #00000003; }
  .talk-studio .reply-option::after { content:'↑'; display:grid; place-items:center; right:15px; width:25px; height:25px; border-radius:50%; background:#0064d8; color:white; font:600 19px/1 var(--pv-font); }
  .talk-studio .chat-summary { padding:12px 24px; border-top:1px solid #e1e1e8; background:#fafafd; }
  .talk-studio :is(.key-insight,.empty-practice,.resume-practice,.methodology,.share-card) { padding:28px; border:1px solid #e1e1e8; border-radius:22px; background:#fff; }
  .talk-studio :is(.closing-reply,.next-steps) { padding:24px; border-radius:20px; }
  .talk-studio details { padding-inline:24px; border-radius:18px; }
  .talk-studio .practice-row { padding:22px 24px; background:white; }
  .talk-studio .talk-confirm { padding:28px; border:1px solid #dcdce4; border-radius:26px; }
 .talk-studio .bubble--self { background:#0064d8; color:white; border-radius:22px 22px 7px 22px; }
 .talk-studio .chat-avatar { display:block; }
 .talk-studio .chat-header p { display:block; }
 .talk-studio .briefing-roles { grid-template-columns:1fr 1fr; }
 .talk-studio .briefing-goals { grid-template-columns:1fr 1fr; }
 .talk-studio .briefing-goals section+section { border-top:0; border-left:1px solid #d9d9e0; padding:0 0 0 24px; }
 .talk-studio .briefing-start .field__hint { flex-basis:auto; }
 .talk-studio .briefing-start .action { width:auto; }
 .talk-studio .practice-row { flex-direction:row; align-items:center; }
 .talk-studio .scenario-list { grid-template-columns:1fr; }
}
@media(min-width:901px) { .talk-studio .scenario-list { grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* Keep the character visible on narrow phones without squeezing the name. */
@media(max-width:399px) {
 .talk-studio .chat-header { grid-template-columns:44px 36px minmax(0,1fr); }
 .talk-studio .chat-avatar { display:block; width:36px; height:36px; }
 .talk-studio .chat-header .text-button { grid-column:2 / -1; justify-self:start; }
}