setValue(e.target.value)}
          placeholder={`Напишите запрос для AI-${agent.title}…`}
          rows={2}
          style={{
            width: '100%',
            background: 'transparent', border: 0, outline: 0, resize: 'none',
            fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--ink)', lineHeight: 1.5,
          }}
        />
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 8 }}>
          <div style={{ display: 'flex', gap: 4 }}>
            <ComposerBtn icon="paperclip" label="Прикрепить" />
            <ComposerBtn icon="doc" label="Из базы знаний" />
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.08em' }}>
              План: <strong style={{ color: 'var(--ink-2)' }}>Команда</strong> · осталось 287 / 500 запросов
            </span>
            <button
              className="btn btn-primary btn-sm"
              style={{ padding: '8px 16px' }}
            >
              Отправить <Glyph name="send" size={14} />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Context Panel — what's loaded for this case
// ─────────────────────────────────────────────────────────────────────────────

function ContextPanel({ agent, caseData }) {
  const c = caseData.company || { name: 'ООО «Хорошее дело»', inn: '7700123456', sphere: 'Розничная торговля', usn: '6% (доходы)' };
  return (
    <div style={{ padding: '20px' }}>
      <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', color: 'var(--ink-3)', textTransform: 'uppercase', marginBottom: 14 }}>
        Контекст дела
      </div>

<ContextBlock title="Файлы в этом деле" sub={`${caseData.files.length} документов`}>
          {caseData.files.map((f, i) => (
            <ContextFile key={i} name={f.name} size={f.size} active={f.active} tag={f.tag} />
          ))}
        </ContextBlock>

<ContextBlock title="Источники, на которые ссылается агент">
          {caseData.sources.map((s, i) => (
            <SourceItem key={i} cite={s.cite} desc={s.desc} />
          ))}
        </ContextBlock>

<div style={{ padding: 14, background: 'var(--forest-tint)', border: '1px solid var(--forest)', borderRadius: 4, marginTop: 8 }}>
          <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', color: 'var(--forest)', textTransform: 'uppercase', marginBottom: 6 }}>
            <Glyph name="shield" size={12} color="var(--forest)" /> Безопасность
          </div>
          <div style={{ fontSize: 12, color: 'var(--ink-2)', lineHeight: 1.5 }}>
            Документы хранятся в защищённом контуре в РФ.
            Удаление через 30 дней после закрытия дела.
            Не используются для дообучения модели.
          </div>
        </div>
      </div>
    </div>
  );
}

function ContextBlock({ title, sub, children }) {
  return (
    <div style={{ background: 'var(--paper)', border: '1px solid var(--rule)', borderRadius: 4, padding: '14px 16px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
        <div style={{ fontSize: 13, fontWeight: 600 }}>{title}</div>
        {sub && <div className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.08em' }}>{sub}</div>}
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        {children}
      </div>
    </div>
  );
}

function ContextItem({ k, v, mono }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12 }}>
      <span style={{ color: 'var(--ink-3)' }}>{k}</span>
      <span className={mono ? 'mono' : ''} style={{ color: 'var(--ink)' }}>{v}</span>
    </div>
  );
}

function ContextFile({ name, size, active, tag }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 8,
      padding: '6px 0',
      borderTop: '1px solid var(--rule)',
    }}>
      <Glyph name="doc" size={14} color={active ? 'var(--forest)' : 'var(--ink-3)'} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 12, lineHeight: 1.3, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
          {name}
        </div>
        <div className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.06em' }}>
          {size}
        </div>
      </div>
      {tag && <Tag>{tag}</Tag>}
    </div>
  );
}

function SourceItem({ cite, desc }) {
  return (
    <div style={{ padding: '6px 0', borderTop: '1px solid var(--rule)' }}>
      <div className="mono" style={{ fontSize: 12, color: 'var(--forest)', fontWeight: 500 }}>
        {cite}
      </div>
      <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>{desc}</div>
    </div>
  );
}

window.ChatScreen = ChatScreen;