// M — Dashboard, AI Assistant drawer, mobile screens, error states

// ============================================================
// M. Dashboard
// ============================================================
const ScreenM_Dashboard = () => {
  const posts = [
    {date:'22 мая', title:'Маня смотрит дождь', kind:'заметка', tags:['site','tg-ru','tg-en','vk','dzen'], status:'опубликован', stat:'412 просм.'},
    {date:'18 мая', title:'Шорох пакетов, или как Маня выбирает день', kind:'статья', tags:['site','tg-ru','tg-en','vk','dzen'], status:'опубликован', stat:'1.2k просм.'},
    {date:'14 мая', title:'Утреннее окно', kind:'фото-пост', tags:['site','tg-ru','vk','dzen'], status:'опубликован', stat:'301 просм.'},
    {date:'09 мая', title:'Когда кошка прячется — погода меняется', kind:'заметка', tags:['site','tg-ru','tg-en','ig'], status:'черновик', stat:''},
    {date:'04 мая', title:'Первая запись', kind:'заметка', tags:['site','tg-ru','vk'], status:'опубликован', stat:'2.1k просм.'},
  ];
  const channels = [
    {n:'Свой сайт', sub:'manya.world', kind:'moss'},
    {n:'Telegram · 4', sub:'ru, en, es, zh', kind:'moss'},
    {n:'ВКонтакте', sub:'Маня · Дневник', kind:'moss'},
    {n:'Яндекс Дзен', sub:'Manya World', kind:'moss'},
    {n:'Facebook Page', sub:'ждёт App Review · 3ч', kind:'warning'},
    {n:'Instagram', sub:'после FB', kind:'warning'},
  ];
  return (
    <div className="park" style={{display:'grid', gridTemplateColumns:'232px 1fr', height:'100%'}}>
      {/* Sidebar */}
      <aside style={{borderRight:'1px solid var(--hairline)', background:'var(--paper-soft)', display:'flex', flexDirection:'column'}}>
        <div style={{padding:'18px 18px 14px', display:'flex', alignItems:'center', gap:10, borderBottom:'1px solid var(--hairline)'}}>
          <BotanicalMark size={20} color="var(--moss)"/>
          <div>
            <div style={{fontFamily:'var(--font-display)', fontStyle:'italic', fontSize:18, color:'var(--forest)', lineHeight:1}}>Manya World</div>
            <div className="mono" style={{fontSize:10, color:'var(--bark-dim)', marginTop:2, letterSpacing:'0.06em'}}>manya.world</div>
          </div>
        </div>

        <nav style={{padding:'14px 10px', display:'flex', flexDirection:'column', gap:2}}>
          <div className="mono" style={{fontSize:9, color:'var(--bark-dim)', letterSpacing:'0.14em', textTransform:'uppercase', padding:'4px 10px 6px'}}>записи</div>
          <div className="nav-item active"><I.Pen size={14}/> Дневник <span className="mono" style={{marginLeft:'auto', fontSize:10, color:'var(--bark-dim)'}}>14</span></div>
          <div className="nav-item"><I.Doc size={14}/> Стихи <span className="mono" style={{marginLeft:'auto', fontSize:10, color:'var(--bark-dim)'}}>3</span></div>
          <div className="nav-item"><I.Image size={14}/> Альбомы <span className="mono" style={{marginLeft:'auto', fontSize:10, color:'var(--bark-dim)'}}>2</span></div>

          <div className="mono" style={{fontSize:9, color:'var(--bark-dim)', letterSpacing:'0.14em', textTransform:'uppercase', padding:'14px 10px 6px'}}>сайт</div>
          <div className="nav-item"><I.Channels size={14}/> Каналы</div>
          <div className="nav-item"><I.Spark size={14}/> Дизайн</div>
          <div className="nav-item"><I.Globe size={14}/> Языки</div>
          <div className="nav-item"><I.Settings size={14}/> Настройки</div>
        </nav>

        <div style={{marginTop:'auto', padding:14, borderTop:'1px solid var(--hairline)'}}>
          <div style={{padding:12, background:'#fff', border:'1px solid var(--hairline)'}}>
            <div className="eyebrow"><I.Sprout size={12} color="var(--moss)"/>теплица</div>
            <div style={{fontSize:12, color:'var(--bark)', marginTop:6, lineHeight:1.5}}>
              Свой бот @manya_world_bot — нажмите, чтобы открыть.
            </div>
            <button className="btn btn-link" style={{marginTop:8, fontSize:11}}><I.Telegram size={12}/> открыть в Telegram</button>
          </div>
        </div>
      </aside>

      {/* Main */}
      <div style={{display:'flex', flexDirection:'column', overflow:'hidden'}}>
        {/* topbar */}
        <div style={{height:64, padding:'0 32px', borderBottom:'1px solid var(--hairline)', display:'flex', alignItems:'center', justifyContent:'space-between', background:'var(--paper)'}}>
          <div>
            <div className="eyebrow" style={{color:'var(--bark-dim)'}}>дневник</div>
            <h2 style={{fontSize:20, fontWeight:500, fontFamily:'var(--font-display)', color:'var(--forest)', lineHeight:1, marginTop:2}}>Последние записи</h2>
          </div>
          <div style={{display:'flex', alignItems:'center', gap:14}}>
            <span className="mono" style={{fontSize:11, color:'var(--bark)', letterSpacing:'0.06em'}}>сайт · <span style={{color:'var(--moss)'}}>● онлайн</span></span>
            <button className="btn btn-ghost"><I.Eye size={14}/> Посмотреть</button>
            <button className="btn btn-primary"><I.Plus size={14}/> Новая запись</button>
          </div>
        </div>

        <div style={{flex:1, padding:'24px 32px 32px', overflow:'auto'}}>
          {/* Posts list */}
          <div style={{background:'#fff', border:'1px solid var(--hairline)'}}>
            <div style={{display:'grid', gridTemplateColumns:'80px 1fr 130px 220px 100px 20px', padding:'10px 18px', borderBottom:'1px solid var(--hairline)', background:'var(--paper-soft)', fontFamily:'var(--font-mono)', fontSize:10, color:'var(--bark)', letterSpacing:'0.14em', textTransform:'uppercase'}}>
              <span>дата</span><span>заголовок</span><span>тип</span><span>каналы</span><span>стат.</span><span/>
            </div>
            {posts.map((p,i) => (
              <div key={i} style={{display:'grid', gridTemplateColumns:'80px 1fr 130px 220px 100px 20px', padding:'16px 18px', borderBottom: i<posts.length-1?'1px solid var(--hairline)':'none', alignItems:'center'}}>
                <span className="mono" style={{fontSize:12, color:'var(--bark)'}}>{p.date}</span>
                <span style={{fontSize:14.5, color:'var(--forest)', fontFamily:'var(--font-display)'}}>
                  {p.title}
                  {p.status === 'черновик' && <span className="pill pill-warning" style={{marginLeft:10}}>черновик</span>}
                </span>
                <span className="mono" style={{fontSize:11, color:'var(--bark-dim)', letterSpacing:'0.08em'}}>{p.kind}</span>
                <span style={{display:'flex', gap:4, flexWrap:'wrap'}}>
                  {p.tags.map(t => (
                    <span key={t} style={{
                      padding:'2px 6px', fontSize:10, fontFamily:'var(--font-mono)',
                      background: t==='ig' || t==='fb' ? '#F4E6BD' : 'var(--moss-tint)',
                      color: t==='ig' || t==='fb' ? '#6F571B' : '#3F5639',
                      border: t==='ig' || t==='fb' ? '1px solid #DCC179' : '1px solid #C2CEB8',
                      letterSpacing:'0.06em',
                    }}>{t}</span>
                  ))}
                </span>
                <span className="mono" style={{fontSize:11, color:'var(--bark)'}}>{p.stat}</span>
                <button className="btn btn-link" style={{fontSize:14}}>…</button>
              </div>
            ))}
          </div>

          {/* Channel grid */}
          <div style={{marginTop:28}}>
            <div style={{display:'flex', alignItems:'baseline', gap:12, marginBottom:12}}>
              <h3 style={{fontSize:18, fontFamily:'var(--font-display)', color:'var(--forest)', fontWeight:500}}>Каналы</h3>
              <span className="mono" style={{fontSize:11, color:'var(--bark-dim)', letterSpacing:'0.08em'}}>4 готовы · 2 в работе</span>
              <button className="btn btn-link" style={{marginLeft:'auto'}}>управлять →</button>
            </div>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:10}}>
              {channels.map(c => (
                <div key={c.n} style={{padding:'14px 16px', background:'var(--paper-soft)', border:'1px solid var(--hairline)', display:'flex', alignItems:'center', gap:14}}>
                  <span style={{width:8, height:8, borderRadius:999, background: c.kind==='moss'?'var(--moss)':'var(--warning)'}}/>
                  <div style={{flex:1}}>
                    <div style={{fontSize:14, color:'var(--forest)'}}>{c.n}</div>
                    <div className="mono" style={{fontSize:11, color:'var(--bark-dim)', marginTop:2}}>{c.sub}</div>
                  </div>
                  <span className={c.kind==='moss'?'pill pill-moss':'pill pill-warning'}>
                    {c.kind==='moss'?<I.Check size={10}/>:<span className="dot"/>}
                    {c.kind==='moss'?'готов':'в работе'}
                  </span>
                </div>
              ))}
            </div>
          </div>

          {/* analytics row */}
          <div style={{marginTop:28, padding:18, background:'var(--paper-soft)', border:'1px solid var(--hairline)', display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:24}}>
            {[
              {l:'постов · всего', v:'14', sub:'+ 3 за неделю'},
              {l:'просмотров · 30 дней', v:'8 942', sub:'+ 12%'},
              {l:'подписчики · все каналы', v:'461', sub:'+ 28 за неделю'},
              {l:'время до публикации', v:'96 сек', sub:'медиана'},
            ].map(s => (
              <div key={s.l}>
                <div className="mono" style={{fontSize:10, color:'var(--bark-dim)', letterSpacing:'0.12em', textTransform:'uppercase'}}>{s.l}</div>
                <div style={{fontFamily:'var(--font-display)', fontStyle:'italic', fontSize:34, color:'var(--forest)', marginTop:6, lineHeight:1}}>{s.v}</div>
                <div style={{fontSize:11.5, color:'var(--moss)', marginTop:6}}>{s.sub}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <AssistantFab/>
    </div>
  );
};

// ============================================================
// AI Assistant — open drawer state
// ============================================================
const ScreenAI_Drawer = () => {
  const msgs = [
    {from:'ai', text:'Привет! Я Claude. Помогу подсказать, что делать на этом шаге. Подключаете Facebook Page?'},
    {from:'me', text:'Да, но не понимаю, что такое App Review.'},
    {from:'ai', text:'Это процедура, через которую любой разработчик проходит, чтобы Meta разрешила его приложению постить в чьи-то Page. Звучит страшно — мы пройдём вместе. Хотите, открою форму прямо сейчас?'},
    {from:'me', text:'Давай.'},
    {from:'ai', text:'Открыла. По полям нужно объяснить, зачем вам каждое разрешение. Я заполню черновиками — вы пройдёте сверху вниз и подправите. Готовы?'},
  ];
  return (
    <div className="park" style={{display:'grid', gridTemplateColumns:'1fr 380px', height:'100%'}}>
      {/* Background page — faded G.4 */}
      <div style={{position:'relative', overflow:'hidden', filter:'opacity(0.55)'}}>
        <ScreenG4_FB/>
      </div>
      <div style={{position:'absolute', inset:0, background:'rgba(31,58,40,0.10)', pointerEvents:'none'}}/>

      {/* Drawer */}
      <aside style={{
        position:'absolute', right:0, top:0, height:'100%', width:380,
        background:'var(--paper-soft)', borderLeft:'1px solid var(--hairline)',
        display:'flex', flexDirection:'column',
        boxShadow:'-10px 0 30px rgba(31,58,40,0.10)',
        zIndex:10,
      }}>
        {/* Header */}
        <div style={{padding:'14px 18px', borderBottom:'1px solid var(--hairline)', display:'flex', alignItems:'center', gap:10, background:'var(--paper)'}}>
          <div style={{width:30, height:30, borderRadius:999, background:'var(--moss-tint)', display:'flex', alignItems:'center', justifyContent:'center', color:'var(--moss)'}}>
            <I.Spark size={14}/>
          </div>
          <div style={{flex:1}}>
            <div style={{fontSize:14, color:'var(--forest)', fontWeight:500}}>Помощник</div>
            <div className="mono" style={{fontSize:10, color:'var(--bark-dim)'}}>контекст: facebook page · g.4</div>
          </div>
          <button className="btn btn-link" style={{padding:6}}><I.X size={14}/></button>
        </div>

        {/* Context strip — what assistant knows */}
        <div style={{padding:'10px 18px', borderBottom:'1px solid var(--hairline)', background:'#fff'}}>
          <div className="mono" style={{fontSize:9, color:'var(--bark-dim)', letterSpacing:'0.14em', textTransform:'uppercase', marginBottom:6}}>вижу</div>
          <div style={{display:'flex', gap:6, flexWrap:'wrap'}}>
            <span className="pill">facebook · app review</span>
            <span className="pill">manya world</span>
            <span className="pill">шаг 4 / 6</span>
          </div>
        </div>

        {/* Messages */}
        <div style={{flex:1, overflow:'auto', padding:'18px 18px 12px', display:'flex', flexDirection:'column', gap:12}}>
          {msgs.map((m,i) => m.from === 'ai' ? (
            <div key={i} style={{display:'flex', gap:10}}>
              <div style={{width:24, height:24, borderRadius:999, background:'var(--moss-tint)', color:'var(--moss)', display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 24px'}}><I.Spark size={11}/></div>
              <div style={{background:'#fff', border:'1px solid var(--hairline)', padding:'10px 12px', fontSize:13, lineHeight:1.55, color:'var(--forest)', maxWidth:'85%'}}>{m.text}</div>
            </div>
          ) : (
            <div key={i} style={{display:'flex', justifyContent:'flex-end'}}>
              <div style={{background:'var(--ochre-tint)', border:'1px solid var(--ochre-dim)', padding:'10px 12px', fontSize:13, color:'var(--forest)', maxWidth:'85%'}}>{m.text}</div>
            </div>
          ))}
          {/* assistant suggestion chips */}
          <div style={{display:'flex', gap:6, flexWrap:'wrap', marginTop:4}}>
            <button className="btn btn-ghost" style={{fontSize:11, padding:'6px 10px'}}>Заполни обоснования</button>
            <button className="btn btn-ghost" style={{fontSize:11, padding:'6px 10px'}}>Покажи скриншот шага</button>
            <button className="btn btn-ghost" style={{fontSize:11, padding:'6px 10px'}}>Сколько займёт?</button>
          </div>
        </div>

        {/* Composer */}
        <div style={{padding:14, borderTop:'1px solid var(--hairline)', background:'var(--paper)'}}>
          <div style={{display:'flex', gap:8, alignItems:'flex-end', background:'#fff', border:'1px solid var(--hairline-strong)', padding:8}}>
            <textarea placeholder="Спросите помощника…" style={{flex:1, border:0, outline:0, resize:'none', fontFamily:'inherit', fontSize:13, lineHeight:1.5, color:'var(--forest)', height:42, background:'transparent'}}/>
            <button className="btn btn-primary" style={{padding:'8px 12px'}}><I.Send size={12}/></button>
          </div>
          <div style={{display:'flex', justifyContent:'space-between', marginTop:6, color:'var(--bark-dim)', fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'0.06em'}}>
            <span>помощник видит этот экран</span>
            <span>claude haiku 4.5</span>
          </div>
        </div>
      </aside>
    </div>
  );
};

// ============================================================
// Mobile — landing
// ============================================================
const MobileLanding = () => (
  <div className="park" style={{overflow:'auto'}}>
    <div style={{padding:'18px 20px', borderBottom:'1px solid var(--hairline)', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
      <div style={{display:'flex', alignItems:'center', gap:8}}>
        <BotanicalMark size={16} color="var(--forest)"/>
        <span style={{fontFamily:'var(--font-display)', fontStyle:'italic', fontSize:16, color:'var(--forest)'}}>Парник</span>
      </div>
      <button className="btn btn-link" style={{fontSize:13}}>Войти</button>
    </div>
    <section style={{padding:'40px 24px 24px'}}>
      <div className="eyebrow"><BotanicalMark size={12} color="var(--moss)"/>sitefarm</div>
      <h1 style={{fontSize:36, marginTop:14, lineHeight:1.05}}>Дневник<br/>на свой домен<br/><span style={{fontStyle:'italic'}}>за один вечер.</span></h1>
      <p style={{marginTop:14, fontSize:14.5, color:'var(--bark)', lineHeight:1.55}}>
        Свой сайт, четыре языка, посты разлетаются в Telegram, VK, Facebook, Instagram и Дзен — одним сообщением в ваш бот.
      </p>
      <div style={{marginTop:22, display:'flex', flexDirection:'column', gap:10}}>
        <button className="btn btn-primary" style={{padding:'14px', justifyContent:'center', width:'100%'}}>Завести дневник <I.Arrow size={14}/></button>
        <button className="btn btn-ghost" style={{padding:'14px', justifyContent:'center', width:'100%'}}>manya.world — пример</button>
      </div>
    </section>
    <section style={{padding:'10px 24px 30px'}}>
      <div style={{position:'relative'}}>
        <div style={{background:'#fff', border:'1px solid var(--hairline-strong)', padding:18}}>
          <div className="eyebrow" style={{color:'var(--bark-dim)', fontSize:9}}>manya.world</div>
          <h2 className="reading" style={{fontFamily:'var(--font-reading)', fontStyle:'italic', fontSize:22, color:'var(--forest)', fontWeight:400, marginTop:8}}>Маня смотрит дождь</h2>
          <div className="img-ph" style={{height:140, marginTop:12}}>фото · маня</div>
          <p className="reading" style={{marginTop:10, fontSize:13, color:'var(--forest)', lineHeight:1.65}}>Сегодня небо медленно опускалось на крыши…</p>
        </div>
      </div>
    </section>
    <section style={{padding:'10px 24px 40px'}}>
      <div className="rule"><span className="mono" style={{fontSize:10, letterSpacing:'0.2em'}}>что внутри</span></div>
      <div style={{marginTop:24, display:'flex', flexDirection:'column', gap:22}}>
        {[
          {n:'01', t:'Свой сайт без кода', d:'Поговорите с Claude — он соберёт первый макет.'},
          {n:'02', t:'Один бот, все каналы', d:'Заводите своего Telegram-бота — пишете в него.'},
          {n:'03', t:'Четыре языка', d:'Пишете на русском — выходит на 4 языках сразу.'},
        ].map(f => (
          <div key={f.n}>
            <div style={{fontFamily:'var(--font-display)', fontStyle:'italic', fontSize:36, color:'var(--ochre)', lineHeight:1}}>{f.n}</div>
            <div style={{height:1, background:'var(--hairline)', margin:'10px 0 12px'}}/>
            <h3 style={{fontSize:18}}>{f.t}</h3>
            <p style={{marginTop:6, fontSize:13.5, color:'var(--bark)'}}>{f.d}</p>
          </div>
        ))}
      </div>
    </section>
    <AssistantFab/>
  </div>
);

// ============================================================
// Mobile — composer (the most common touch surface)
// ============================================================
const MobileComposer = () => (
  <div className="park" style={{display:'flex', flexDirection:'column'}}>
    <div style={{padding:'14px 18px', borderBottom:'1px solid var(--hairline)', display:'flex', alignItems:'center', justifyContent:'space-between'}}>
      <button className="btn btn-link" style={{padding:0, fontSize:13}}><I.ArrowLeft size={14}/></button>
      <span className="mono" style={{fontSize:10, color:'var(--bark)', letterSpacing:'0.1em'}}>ЧЕРНОВИК · 22 МАЯ</span>
      <button className="btn btn-link" style={{padding:0, fontSize:13}}>Сохр.</button>
    </div>
    <div style={{flex:1, padding:'18px 22px', overflow:'auto'}}>
      <input
        defaultValue="Маня смотрит дождь"
        style={{width:'100%', border:0, outline:0, background:'transparent', fontFamily:'var(--font-reading)', fontStyle:'italic', fontWeight:400, fontSize:28, color:'var(--forest)'}}
      />
      <div className="mono" style={{fontSize:10, color:'var(--bark-dim)', marginTop:6, letterSpacing:'0.06em'}}>заметка · авто-сохр. 4 сек назад</div>
      <div className="dz" style={{height:130, marginTop:16}}>+ фото</div>
      <textarea
        style={{width:'100%', border:0, outline:0, background:'transparent', fontFamily:'var(--font-reading)', fontSize:15.5, color:'var(--forest)', lineHeight:1.7, resize:'none', marginTop:14, height:280}}
        defaultValue={`Сегодня небо медленно опускалось на крыши, и Маня сидела на подоконнике, разглядывая каждую каплю как посетителя.\n\nСнаружи начался дождь, который кошки слышат раньше людей.`}
      />
    </div>
    {/* Mini status */}
    <div style={{padding:'10px 18px', borderTop:'1px solid var(--hairline)', background:'var(--paper-soft)', display:'flex', alignItems:'center', gap:10, fontSize:12, color:'var(--bark)'}}>
      <div style={{display:'flex', gap:4}}>
        <span style={{width:6, height:6, borderRadius:999, background:'var(--moss)'}}/>
        <span style={{width:6, height:6, borderRadius:999, background:'var(--moss)'}}/>
        <span style={{width:6, height:6, borderRadius:999, background:'var(--warning)'}}/>
        <span style={{width:6, height:6, borderRadius:999, background:'var(--hairline-strong)'}}/>
      </div>
      <span>2 готовы · 1 ждёт</span>
      <span style={{marginLeft:'auto'}} className="mono">87 слов</span>
    </div>
    {/* Bottom bar */}
    <div style={{padding:12, borderTop:'1px solid var(--hairline)', display:'flex', gap:8}}>
      <button className="btn btn-ghost" style={{flex:1, justifyContent:'center'}}>Предпросмотр</button>
      <button className="btn btn-primary" style={{flex:1, justifyContent:'center'}}>Опубликовать</button>
    </div>
  </div>
);

// ============================================================
// Error state — composer with translation failure
// ============================================================
const ScreenJ_Error = () => (
  <div className="park" style={{display:'flex', flexDirection:'column'}}>
    <OnboardingTopbar step={10} total={18} stepLabel="первый пост · ошибка"/>
    <div style={{padding:'18px 56px 0'}}>
      <div className="eyebrow"><BotanicalMark size={14}/>состояние с ошибкой</div>
      <h2 style={{fontSize:26, marginTop:6}}>Перевод на ZH не получился</h2>
    </div>
    <div style={{padding:'18px 56px 24px', display:'grid', gridTemplateColumns:'1.45fr 0.55fr', gap:32, flex:1, minHeight:0}}>
      <div style={{background:'#fff', border:'1px solid var(--hairline)', padding:36}}>
        {/* Inline error banner */}
        <div style={{padding:'12px 14px', background:'#F0D6CF', border:'1px solid #DA9C8E', color:'#6F2C1D', display:'flex', gap:12, alignItems:'flex-start'}}>
          <I.X size={16}/>
          <div style={{flex:1}}>
            <strong style={{fontWeight:500}}>Claude не справился с переводом на 中文.</strong>
            <div style={{marginTop:4, fontSize:13}}>Попробовать ещё раз, оставить только RU/EN/ES или вписать перевод вручную.</div>
          </div>
          <button className="btn btn-link" style={{color:'#6F2C1D'}}>Повторить</button>
        </div>
        <h1 className="reading" style={{fontFamily:'var(--font-reading)', fontStyle:'italic', fontSize:32, marginTop:24, color:'var(--forest)', fontWeight:400}}>Маня смотрит дождь</h1>
        <p className="reading" style={{marginTop:14, fontSize:15.5, color:'var(--forest)', lineHeight:1.7}}>
          Сегодня небо медленно опускалось на крыши, и Маня сидела на подоконнике…
        </p>
      </div>
      <aside style={{display:'flex', flexDirection:'column', gap:14}}>
        <div className="card" style={{padding:16}}>
          <div className="eyebrow" style={{marginBottom:8}}>переводы</div>
          <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', padding:'6px 0'}}><span>RU</span><span className="pill pill-moss"><I.Check size={10}/>основной</span></div>
          <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', padding:'6px 0', borderTop:'1px solid var(--hairline)'}}><span>EN</span><span className="pill pill-moss"><I.Check size={10}/>готов</span></div>
          <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', padding:'6px 0', borderTop:'1px solid var(--hairline)'}}><span>ES</span><span className="pill pill-moss"><I.Check size={10}/>готов</span></div>
          <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', padding:'6px 0', borderTop:'1px solid var(--hairline)'}}><span>ZH</span><span className="pill pill-error"><I.X size={10}/>ошибка</span></div>
        </div>
        <div className="card" style={{padding:16, background:'#F0D6CF', border:'1px solid #DA9C8E'}}>
          <div className="eyebrow" style={{color:'#6F2C1D'}}>что делать</div>
          <ul style={{margin:'8px 0 0', paddingLeft:18, fontSize:13, color:'#6F2C1D', lineHeight:1.6}}>
            <li>Нажать «Повторить» — Claude попробует ещё раз</li>
            <li>Опубликовать без ZH — три остальных языка готовы</li>
            <li>Открыть редактор перевода и вписать вручную</li>
          </ul>
        </div>
      </aside>
    </div>
    <AssistantFab/>
  </div>
);

Object.assign(window, { ScreenM_Dashboard, ScreenAI_Drawer, MobileLanding, MobileComposer, ScreenJ_Error });