// prototype-screens-2.jsx — Prosjekt-detalj + Protokoll med tiltaksplan + live transkripsjon

// ═══════════════════════════════════════════════════════════════════════════
// PROSJEKT-DETALJ
// ═══════════════════════════════════════════════════════════════════════════
function ProjectDetailMock({ id, go }) {
  const project = PROJECTS.find(p => p.id === id) || PROJECTS[0];
  const [tab, setTab] = React.useState('oversikt');

  const days = daysUntil(project.end);
  const budgetPct = Math.round(project.budget.spent / project.budget.plan * 100);

  // Aggregér tiltak fra protokoller som er koblet til dette prosjektet
  const relatedProtocols = PROTOCOLS.filter(p => p.projectIds.includes(project.id));
  const allTiltak = relatedProtocols.flatMap(pr =>
    pr.tiltak.map(t => ({ ...t, protokoll: pr.title, protokollDate: pr.date, protokollId: pr.id }))
  );
  const openTiltak = allTiltak.filter(t => t.status !== 'done');

  const tabs = [
    { id: 'oversikt', label: 'Oversikt' },
    { id: 'maal', label: 'Mål & resultater' },
    { id: 'tiltak', label: `Tiltak (${openTiltak.length})` },
    { id: 'protokoller', label: `Protokoller (${relatedProtocols.length})` },
    { id: 'okonomi', label: 'Økonomi' },
    { id: 'team', label: 'Team' },
    { id: 'docs', label: 'Dokumenter' },
  ];

  return (
    <div className="ok-content__inner">
      {/* Header */}
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 18 }}>
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
            <Pill status={project.status} />
            <span style={{ fontSize: 11.5, color: SK.soft, fontWeight: 500 }}>{project.phase}</span>
            <span style={{ fontSize: 11.5, color: SK.soft }}>·</span>
            <span style={{ fontSize: 11.5, color: SK.soft, fontWeight: 500 }}>{project.avd}</span>
          </div>
          <h1 style={{ margin: 0, fontSize: 26, fontWeight: 600, letterSpacing: -0.02 }}>{project.name}</h1>
          <div style={{ marginTop: 4, color: SK.soft, fontSize: 13 }}>{project.desc}</div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <Button size="sm" icon={I.download}>Statusrapport</Button>
          <Button variant="primary" icon={I.plus}>Aktivitet</Button>
        </div>
      </div>

      <Tabs tabs={tabs} value={tab} onChange={setTab} />

      {tab === 'maal' && <ProjectMaalView projectId={project.id} go={go} />}

      {tab === 'oversikt' && (
        <>
          {/* KPI rad */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginBottom: 14 }}>
            <Card padded>
              <KPI label="Fremdrift" value={`${project.progress} %`} sub={project.phase} />
              <Progress value={project.progress} status={project.status === 'delay' ? 'delay' : project.status === 'risk' ? 'risk' : 'track'} style={{ marginTop: 10 }} />
            </Card>
            <Card padded>
              <KPI label="Frist" value={fmtDate(project.end)}
                sub={days < 0 ? `${Math.abs(days)} dgr forsinket` : `om ${days} dgr`}
                accent={days < 14}
              />
            </Card>
            <Card padded>
              <KPI label="Budsjett" value={`${budgetPct} %`} sub={`${fmtKr(project.budget.spent)} av ${fmtKr(project.budget.plan)} kr`} accent={budgetPct > 85} />
              <Progress value={budgetPct} status={budgetPct > 85 ? 'risk' : 'track'} style={{ marginTop: 10 }} />
            </Card>
            <Card padded>
              <KPI label="Åpne tiltak" value={openTiltak.length} sub={`${allTiltak.filter(t => t.status === 'done').length} fullført`} accent={openTiltak.length > 5} />
            </Card>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 14 }}>
            {/* Tiltak-preview */}
            <Card title="Aktive tiltak fra protokoller"
              padded={false}
              action={<Button size="sm" variant="ghost" onClick={() => setTab('tiltak')}>
                Se alle ({openTiltak.length}) <span style={{ marginLeft: 4 }}>{I.chevron}</span>
              </Button>}
            >
              <div style={{ padding: '0 0 6px' }}>
                {openTiltak.slice(0, 5).map((t, i) => (
                  <div key={i} style={{
                    padding: '12px 18px',
                    borderTop: i ? '1px solid rgba(17,24,61,.06)' : 'none',
                    display: 'flex', gap: 12, alignItems: 'flex-start',
                  }}>
                    <input type="checkbox" style={{ marginTop: 3, accentColor: SK.coral, flexShrink: 0 }} />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 13 }}>{t.title}</div>
                      <div style={{ fontSize: 11, color: SK.soft, marginTop: 3 }}>
                        <Avatar initials={TEAM[t.ansvarlig]?.i} color={TEAM[t.ansvarlig]?.c} size={16} style={{ verticalAlign: 'middle', marginRight: 4 }} />
                        {TEAM[t.ansvarlig]?.n} · {t.gruppe} · fra «{t.protokoll}»
                      </div>
                    </div>
                    <Pill status={t.status === 'in_progress' ? 'in_progress' : daysUntil(t.frist) < 3 ? 'delay' : 'draft'}>
                      {t.status === 'in_progress' ? 'Pågår' : `frist ${fmtDate(t.frist)}`}
                    </Pill>
                  </div>
                ))}
              </div>
            </Card>

            {/* Sidebar: team + neste milepæl */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <Card title="Neste milepæl">
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div style={{ width: 44, height: 44, borderRadius: 10, background: SK.iceBlue, display: 'flex', alignItems: 'center', justifyContent: 'center', color: SK.ink }}>{I.cal}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontWeight: 600, fontSize: 13 }}>{project.nextMilestone}</div>
                  </div>
                </div>
              </Card>

              <Card title="Team" action={<Button size="sm" variant="ghost">Endre</Button>}>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {project.team.map(k => (
                    <div key={k} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      <Avatar initials={TEAM[k].i} color={TEAM[k].c} />
                      <div style={{ flex: 1 }}>
                        <div style={{ fontSize: 12.5, fontWeight: 500 }}>{TEAM[k].n}</div>
                        <div style={{ fontSize: 11, color: SK.soft }}>{TEAM[k].r}</div>
                      </div>
                      {k === project.owner ? <Pill status="done">Eier</Pill> : null}
                    </div>
                  ))}
                </div>
              </Card>

              <Card title="Koblet til" padded>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: 12.5 }}>
                  <div style={{ color: SK.soft }}>Outlook-kalender · # ledelse (Teams)</div>
                  <div style={{ color: SK.soft }}>SharePoint-mappe · /Prosjekter/{project.id}</div>
                  <div style={{ color: SK.soft }}>Visma-prosjektkode · {project.id.toUpperCase()}-26</div>
                </div>
              </Card>
            </div>
          </div>
        </>
      )}

      {tab === 'tiltak' && (
        <Card title={`Alle tiltak (${allTiltak.length})`} padded={false}
          action={<Button size="sm" icon={I.plus}>Manuelt tiltak</Button>}
        >
          <table className="ok-table">
            <thead>
              <tr>
                <th></th>
                <th>Tiltak</th>
                <th>Ansvarlig</th>
                <th>Gruppe</th>
                <th>Frist</th>
                <th>Status</th>
                <th>Fra protokoll</th>
              </tr>
            </thead>
            <tbody>
              {allTiltak.map((t, i) => (
                <tr key={i} style={{ cursor: 'default' }}>
                  <td style={{ paddingLeft: 18, width: 28 }}>
                    <input type="checkbox" defaultChecked={t.status === 'done'} style={{ accentColor: SK.coral }} />
                  </td>
                  <td style={{ fontSize: 12.5, textDecoration: t.status === 'done' ? 'line-through' : 'none', color: t.status === 'done' ? SK.soft : SK.ink }}>{t.title}</td>
                  <td>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                      <Avatar initials={TEAM[t.ansvarlig]?.i} color={TEAM[t.ansvarlig]?.c} size={20} />
                      <span style={{ fontSize: 12 }}>{TEAM[t.ansvarlig]?.n}</span>
                    </div>
                  </td>
                  <td style={{ fontSize: 12 }}>{t.gruppe}</td>
                  <td style={{ fontSize: 12 }}>{fmtDate(t.frist)}</td>
                  <td><Pill status={t.status} /></td>
                  <td>
                    <a onClick={(e) => { e.preventDefault(); go({ screen: 'protocol', id: t.protokollId }); }}
                      style={{ fontSize: 12, color: SK.coral, cursor: 'pointer', textDecoration: 'underline' }}>
                      {t.protokoll}
                    </a>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>
      )}

      {tab === 'protokoller' && (
        <Card title="Protokoller knyttet til prosjektet" padded={false}>
          <table className="ok-table">
            <tbody>
              {relatedProtocols.map(pr => (
                <TR key={pr.id} onClick={() => go({ screen: 'protocol', id: pr.id })}>
                  <td style={{ paddingLeft: 18 }}>
                    <div style={{ fontWeight: 600 }}>{pr.title}</div>
                    <div style={{ fontSize: 11.5, color: SK.soft, marginTop: 2 }}>
                      {fmtDate(pr.date)} · {pr.time} · {pr.tiltak.length} tiltak
                    </div>
                  </td>
                  <td>
                    <Pill status={pr.status === 'approved' ? 'done' : pr.status === 'review' ? 'risk' : 'draft'}>
                      {pr.status === 'approved' ? 'Godkjent' : pr.status === 'review' ? 'Til gjennomgang' : 'Utkast'}
                    </Pill>
                  </td>
                  <td style={{ paddingRight: 18, textAlign: 'right' }}>
                    <AvatarGroup people={pr.attendees.map(k => TEAM[k])} />
                  </td>
                </TR>
              ))}
            </tbody>
          </table>
        </Card>
      )}

      {(tab === 'okonomi' || tab === 'team' || tab === 'docs') && (
        <Card padded>
          <div style={{ padding: '40px 20px', textAlign: 'center', color: SK.soft }}>
            <div style={{ fontSize: 14, fontWeight: 600, color: SK.ink }}>Ikke implementert i prototypen</div>
            <div style={{ fontSize: 12.5, marginTop: 4 }}>
              Denne fanen kobles til {tab === 'okonomi' ? 'Visma' : tab === 'team' ? 'AD/HR-systemet' : 'SharePoint'} i full versjon.
            </div>
          </div>
        </Card>
      )}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// PROTOKOLL — live transkripsjon + tiltaksplan
// ═══════════════════════════════════════════════════════════════════════════
function ProtocolMock({ id, go }) {
  const protocol = PROTOCOLS.find(p => p.id === id) || PROTOCOLS[0];

  // Live-transkripsjon state
  const [liveOn, setLiveOn] = React.useState(false);
  const [liveLines, setLiveLines] = React.useState([]);
  const [liveStep, setLiveStep] = React.useState(0);
  const [elapsed, setElapsed] = React.useState(0); // sekunder siden start
  const transcriptRef = React.useRef(null);

  // Tiltak — lokal state så brukeren kan endre status, frist, etc.
  const [tiltak, setTiltak] = React.useState(protocol.tiltak);
  React.useEffect(() => setTiltak(protocol.tiltak), [protocol.id]);

  // Live-transkripsjon: spill av scriptet linje for linje når liveOn er på
  React.useEffect(() => {
    if (!liveOn) return;
    if (liveStep >= LIVE_TRANSCRIPT_SCRIPT.length) return;
    const item = LIVE_TRANSCRIPT_SCRIPT[liveStep];
    const t = setTimeout(() => {
      setLiveLines(ls => [...ls, item]);
      setLiveStep(s => s + 1);
    }, item.delay);
    return () => clearTimeout(t);
  }, [liveOn, liveStep]);

  // Timer
  React.useEffect(() => {
    if (!liveOn) return;
    const t = setInterval(() => setElapsed(e => e + 1), 1000);
    return () => clearInterval(t);
  }, [liveOn]);

  // Auto-scroll transkripsjon
  React.useEffect(() => {
    if (transcriptRef.current) transcriptRef.current.scrollTop = transcriptRef.current.scrollHeight;
  }, [liveLines.length]);

  const startLive = () => { setLiveOn(true); setLiveLines([]); setLiveStep(0); setElapsed(0); };
  const stopLive = () => setLiveOn(false);
  const resetLive = () => { setLiveOn(false); setLiveLines([]); setLiveStep(0); setElapsed(0); };

  const fmtTime = (s) => {
    const m = Math.floor(s / 60), sec = s % 60;
    return `${String(m).padStart(2, '0')}:${String(sec).padStart(2, '0')}`;
  };

  const updateTiltakStatus = (tid, newStatus) => {
    setTiltak(ts => ts.map(t => t.id === tid ? { ...t, status: newStatus } : t));
  };

  // Mock: legg til AI-foreslått tiltak
  const acceptAISuggestion = () => {
    const newId = 't' + (tiltak.length + 1);
    setTiltak(ts => [...ts, {
      id: newId,
      title: 'Hanne frigjør 2 ressurser fra HR/Kvalitet til anbudsteamet',
      ansvarlig: 'HM',
      gruppe: 'HR-stab',
      frist: '2026-05-26',
      status: 'open',
      kilde: 'ai',
    }]);
  };

  // Gruppér tiltak per gruppe (tiltaksplan)
  const tiltakByGroup = tiltak.reduce((acc, t) => {
    if (!acc[t.gruppe]) acc[t.gruppe] = [];
    acc[t.gruppe].push(t);
    return acc;
  }, {});

  // Vis enten live-transkripsjon eller den ferdige (avhengig av om live er på/har vært på)
  const displayedTranscript = liveOn || liveLines.length > 0 ? liveLines : protocol.transcript;
  const aiSuggestionVisible = liveLines.some(l => l.isBot) && !tiltak.find(t => t.kilde === 'ai');

  return (
    <div className="ok-content__inner">
      {/* Header */}
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 18 }}>
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
            <Pill status={protocol.status === 'approved' ? 'done' : protocol.status === 'review' ? 'risk' : 'draft'}>
              {protocol.status === 'approved' ? 'Godkjent' : protocol.status === 'review' ? 'Til gjennomgang' : 'Utkast'}
            </Pill>
            <span style={{ fontSize: 12, color: SK.soft }}>{fmtDate(protocol.date)} · {protocol.time}</span>
            <span style={{ fontSize: 12, color: SK.soft }}>·</span>
            <span style={{ fontSize: 12, color: SK.soft }}>Referent: {protocol.minutes === 'AI' ? 'AI · godkjent av ' + TEAM[protocol.chair].n : TEAM[protocol.minutes]?.n}</span>
          </div>
          <h1 style={{ margin: 0, fontSize: 26, fontWeight: 600, letterSpacing: -0.02 }}>{protocol.title}</h1>
          <div style={{ marginTop: 8, display: 'flex', alignItems: 'center', gap: 6 }}>
            <span style={{ fontSize: 11.5, color: SK.soft }}>Deltakere:</span>
            <AvatarGroup people={protocol.attendees.map(k => TEAM[k])} max={6} />
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <Button size="sm" icon={I.download}>PDF</Button>
          <Button size="sm">Send til godkjenning</Button>
          <Button variant="primary">Publiser tiltaksplan</Button>
        </div>
      </div>

      {/* MØTESERIE-BANNER + behandling av forrige tiltaksplan */}
      {(() => {
        const series = MEETING_SERIES.find(s => s.id === protocol.seriesId);
        const carry = CARRYOVER[protocol.id];
        const prev = carry ? PROTOCOLS.find(p => p.id === carry.prevId) : null;
        const prevOpen = prev ? prev.tiltak.filter(t => t.status !== 'done') : [];
        if (!series && !prev) return null;
        return (
          <>
            {series && (
              <div style={{
                padding: '10px 14px', marginBottom: 14, borderRadius: 10,
                background: SK.pureWhite, border: '1px solid rgba(17,24,61,.08)',
                display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap',
              }}>
                <div style={{
                  width: 32, height: 32, borderRadius: 8,
                  background: series.accent + '22', color: series.accent,
                  display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                }}>{SERIES_ICONS[series.icon]}</div>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 10.5, fontWeight: 600, color: SK.soft, letterSpacing: 0.05, textTransform: 'uppercase' }}>Del av møteserie</div>
                  <div style={{ fontSize: 13, fontWeight: 600, marginTop: 1 }}>
                    <a onClick={() => go({ screen: 'series', id: series.id })} style={{ color: SK.ink, cursor: 'pointer', textDecoration: 'underline', textDecorationColor: 'rgba(17,24,61,.2)' }}>{series.name}</a>
                  </div>
                </div>
                <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 8 }}>
                  <CadenceBadge>{series.cadenceShort}</CadenceBadge>
                  <ConfPill level={series.confidentiality} />
                </div>
              </div>
            )}

            {prev && prevOpen.length > 0 && (
              <Card padded={false} style={{ marginBottom: 14, borderLeft: `3px solid ${SK.coral}` }}>
                <div style={{ padding: '12px 18px', borderBottom: '1px solid rgba(17,24,61,.06)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, flexWrap: 'wrap' }}>
                  <div>
                    <h3 style={{ margin: 0, fontSize: 13.5, fontWeight: 600 }}>
                      Behandling av forrige tiltaksplan
                      <span style={{ marginLeft: 8, fontSize: 10.5, color: SK.coral, fontWeight: 700 }}>✦ AI</span>
                    </h3>
                    <div style={{ fontSize: 11.5, color: SK.soft, marginTop: 2 }}>
                      {prevOpen.length} tiltak fra <a onClick={() => go({ screen: 'protocol', id: prev.id })} style={{ color: SK.coral, cursor: 'pointer', textDecoration: 'underline' }}>{prev.title}</a> ({fmtDate(prev.date)}) er ennå ikke fullført — behandle status før nye saker.
                    </div>
                  </div>
                  <Button size="sm" variant="ghost">Skjul</Button>
                </div>
                <div>
                  {prevOpen.map((t, i) => {
                    const overdue = daysUntil(t.frist) < 0;
                    return (
                      <div key={i} style={{
                        padding: '12px 18px',
                        borderTop: i ? '1px solid rgba(17,24,61,.06)' : 'none',
                        display: 'flex', gap: 12, alignItems: 'flex-start',
                      }}>
                        <span style={{
                          minWidth: 22, height: 22, borderRadius: '50%',
                          background: overdue ? SK.lightCoral : SK.iceBlue,
                          color: overdue ? SK.coral : SK.ink,
                          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                          fontSize: 11, fontWeight: 700, flexShrink: 0,
                        }}>{i + 1}</span>
                        <div style={{ flex: 1, minWidth: 0 }}>
                          <div style={{ fontSize: 12.5, fontWeight: 500, lineHeight: 1.4 }}>{t.title}</div>
                          <div style={{ fontSize: 11, color: SK.soft, marginTop: 4, display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
                            <Avatar initials={TEAM[t.ansvarlig]?.i} color={TEAM[t.ansvarlig]?.c} size={16} />
                            <span>{TEAM[t.ansvarlig]?.n}</span>
                            <span style={{ color: 'rgba(17,24,61,.3)' }}>·</span>
                            <span>{t.gruppe}</span>
                            <span style={{ color: 'rgba(17,24,61,.3)' }}>·</span>
                            <span style={{ color: overdue ? SK.coral : SK.soft, fontWeight: overdue ? 600 : 400 }}>
                              {overdue ? `${Math.abs(daysUntil(t.frist))}d forsinket` : `frist ${fmtDate(t.frist)}`}
                            </span>
                            {t.carryReason && (
                              <>
                                <span style={{ color: 'rgba(17,24,61,.3)' }}>·</span>
                                <span style={{ fontStyle: 'italic' }}>«{t.carryReason}»</span>
                              </>
                            )}
                          </div>
                        </div>
                        <div style={{ display: 'flex', gap: 4, flexShrink: 0 }}>
                          <Button size="sm" variant="ghost">Fullført</Button>
                          <Button size="sm">Videreført</Button>
                        </div>
                      </div>
                    );
                  })}
                </div>
                <div style={{ padding: '10px 18px', background: SK.iceBlueLight, fontSize: 11.5, color: SK.soft, borderTop: '1px solid rgba(17,24,61,.06)' }}>
                  Tiltak som videreføres blir lagt til som nye punkter i denne protokollens tiltaksplan med ny frist.
                </div>
              </Card>
            )}
          </>
        );
      })()}

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, alignItems: 'flex-start' }}>
        {/* VENSTRE: Transkripsjon */}
        <Card padded={false} style={{ position: 'sticky', top: 0 }}>
          <div style={{ padding: '14px 18px 12px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid rgba(17,24,61,.06)' }}>
            <div>
              <h3 style={{ margin: 0, fontSize: 13.5, fontWeight: 600 }}>Transkripsjon</h3>
              <div style={{ fontSize: 11, color: SK.soft, marginTop: 2 }}>
                {liveOn ? `Live · ${fmtTime(elapsed)}` : liveLines.length ? `Stoppet · ${fmtTime(elapsed)}` : `${protocol.transcript.length} replikker · ferdig`}
              </div>
            </div>
            <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
              {liveOn && (
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '3px 10px', borderRadius: 99, background: SK.lightCoral, color: SK.coral, fontSize: 11, fontWeight: 600 }}>
                  <span style={{ width: 8, height: 8, borderRadius: '50%', background: SK.coral, animation: 'okPulse 1.4s ease-in-out infinite' }} />
                  LIVE
                </span>
              )}
              {!liveOn && liveLines.length === 0 && (
                <Button size="sm" variant="accent" icon={I.mic} onClick={startLive}>Start opptak</Button>
              )}
              {liveOn && (
                <Button size="sm" onClick={stopLive}>Pause</Button>
              )}
              {!liveOn && liveLines.length > 0 && (
                <>
                  <Button size="sm" onClick={() => setLiveOn(true)}>Fortsett</Button>
                  <Button size="sm" variant="ghost" onClick={resetLive}>Nullstill</Button>
                </>
              )}
            </div>
          </div>

          <div ref={transcriptRef} style={{
            padding: 18, maxHeight: 480, minHeight: 300, overflowY: 'auto',
            display: 'flex', flexDirection: 'column', gap: 10,
          }}>
            {displayedTranscript.length === 0 && !liveOn && (
              <div style={{ color: SK.soft, fontSize: 12.5, textAlign: 'center', padding: '60px 0' }}>
                <div style={{ marginBottom: 10 }}>{I.mic}</div>
                Trykk "Start opptak" for å se simulert live-transkripsjon.
                <div style={{ marginTop: 6, fontSize: 11 }}>
                  (Eller åpne <a onClick={() => go({ screen: 'protocol', id: 'ledgr-21-5' })} style={{ color: SK.coral, textDecoration: 'underline', cursor: 'pointer' }}>Ledergruppemøte 21/5</a> for ferdig protokoll)
                </div>
              </div>
            )}
            {displayedTranscript.map((l, i) => (
              <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', animation: 'okFade .35s ease-out' }}>
                {l.isBot ? (
                  <span style={{
                    width: 26, height: 26, borderRadius: '50%', background: SK.lightCoral, color: SK.coral,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, fontWeight: 700, flexShrink: 0,
                  }}>✦</span>
                ) : (
                  <Avatar initials={TEAM[l.who]?.i || l.who} color={TEAM[l.who]?.c} />
                )}
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 11.5, fontWeight: 600, color: l.isBot ? SK.coral : SK.ink, marginBottom: 2 }}>
                    {l.isBot ? 'OK · AI' : TEAM[l.who]?.n || l.who}
                  </div>
                  <div style={{ fontSize: 12.5, lineHeight: 1.45, color: l.isBot ? SK.coral : SK.ink, fontStyle: l.isBot ? 'italic' : 'normal' }}>{l.t}</div>
                  {l.isBot && aiSuggestionVisible && (
                    <div style={{ marginTop: 8, display: 'flex', gap: 6 }}>
                      <Button size="sm" variant="accent" onClick={acceptAISuggestion}>+ Legg til</Button>
                      <Button size="sm" variant="ghost">Avvis</Button>
                    </div>
                  )}
                </div>
              </div>
            ))}
            {liveOn && (
              <div style={{ display: 'flex', gap: 8, color: SK.soft, fontSize: 11, fontStyle: 'italic', padding: '4px 0' }}>
                <span style={{ display: 'inline-flex', gap: 3 }}>
                  <span style={{ width: 4, height: 4, borderRadius: '50%', background: SK.soft, animation: 'okBlink 1.2s ease-in-out infinite' }} />
                  <span style={{ width: 4, height: 4, borderRadius: '50%', background: SK.soft, animation: 'okBlink 1.2s ease-in-out infinite .2s' }} />
                  <span style={{ width: 4, height: 4, borderRadius: '50%', background: SK.soft, animation: 'okBlink 1.2s ease-in-out infinite .4s' }} />
                </span>
                lytter…
              </div>
            )}
          </div>
        </Card>

        {/* HØYRE: Sammendrag, vedtak, tiltaksplan */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <Card title="Sammendrag" action={<span style={{ fontSize: 10.5, color: SK.soft, fontWeight: 500 }}>generert av AI</span>}>
            <div style={{ fontSize: 12.5, lineHeight: 1.55 }}>{protocol.summary}</div>
          </Card>

          <Card title={`Vedtak (${protocol.decisions.length})`}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {protocol.decisions.map((d, i) => (
                <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                  <span style={{
                    minWidth: 22, height: 22, borderRadius: '50%', background: SK.ink, color: '#fff',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 600, flexShrink: 0,
                  }}>{i + 1}</span>
                  <div style={{ fontSize: 12.5, lineHeight: 1.5 }}>{d}</div>
                </div>
              ))}
            </div>
          </Card>

          {/* TILTAKSPLAN — gruppert per gruppe */}
          <Card title={`Tiltaksplan (${tiltak.length})`}
            action={<Button size="sm" icon={I.plus} variant="ghost">Manuelt tiltak</Button>}
            padded={false}
          >
            <div style={{ padding: '4px 0 14px' }}>
              {Object.entries(tiltakByGroup).map(([gruppe, items], gi) => (
                <div key={gruppe} style={{ borderTop: gi ? '1px solid rgba(17,24,61,.06)' : 'none' }}>
                  <div style={{
                    padding: '10px 18px 6px',
                    fontSize: 11, fontWeight: 600, color: SK.soft,
                    letterSpacing: 0.05, textTransform: 'uppercase',
                    display: 'flex', justifyContent: 'space-between',
                  }}>
                    <span>{gruppe}</span>
                    <span>{items.filter(t => t.status === 'done').length}/{items.length}</span>
                  </div>
                  {items.map((t, i) => (
                    <div key={t.id} style={{
                      padding: '10px 18px',
                      display: 'flex', gap: 10, alignItems: 'flex-start',
                      background: t.kilde === 'ai' ? SK.lightCoral + '55' : 'transparent',
                    }}>
                      <input
                        type="checkbox"
                        checked={t.status === 'done'}
                        onChange={() => updateTiltakStatus(t.id, t.status === 'done' ? 'open' : 'done')}
                        style={{ marginTop: 3, accentColor: SK.coral, flexShrink: 0 }}
                      />
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{
                          fontSize: 12.5, lineHeight: 1.4,
                          textDecoration: t.status === 'done' ? 'line-through' : 'none',
                          color: t.status === 'done' ? SK.soft : SK.ink,
                        }}>
                          {t.title}
                          {t.kilde === 'ai' ? <span style={{ marginLeft: 6, color: SK.coral, fontSize: 11 }}>✦ AI</span> : null}
                        </div>
                        <div style={{ fontSize: 11, color: SK.soft, marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 }}>
                          <Avatar initials={TEAM[t.ansvarlig]?.i} color={TEAM[t.ansvarlig]?.c} size={16} />
                          <span>{TEAM[t.ansvarlig]?.n}</span>
                          <span style={{ color: 'rgba(17,24,61,.3)' }}>·</span>
                          <span>frist {fmtDate(t.frist)}</span>
                        </div>
                      </div>
                      <select
                        value={t.status}
                        onChange={(e) => updateTiltakStatus(t.id, e.target.value)}
                        className="ok-input"
                        style={{ padding: '3px 6px', fontSize: 11, width: 110 }}
                      >
                        <option value="open">Åpen</option>
                        <option value="in_progress">Pågår</option>
                        <option value="done">Fullført</option>
                        <option value="blocked">Blokkert</option>
                      </select>
                    </div>
                  ))}
                </div>
              ))}
            </div>
          </Card>

          <Card title="Distribusjon" padded>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: 12.5 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <span style={{ color: SK.soft }}>Tiltakene blir publisert til:</span>
              </div>
              {Object.keys(tiltakByGroup).map(g => (
                <div key={g} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ width: 6, height: 6, borderRadius: '50%', background: SK.coral }} />
                  <span>{g}</span>
                  <span style={{ marginLeft: 'auto', fontSize: 11, color: SK.soft }}>{tiltakByGroup[g].length} tiltak</span>
                </div>
              ))}
              <div style={{ marginTop: 6, fontSize: 11, color: SK.soft }}>
                Hver gruppe får sine tiltak på sin egen oppgaveliste + i Teams-kanalen sin.
              </div>
            </div>
          </Card>
        </div>
      </div>

      {/* Keyframes via style tag, en gang */}
      <style>{`
        @keyframes okFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
        @keyframes okPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
        @keyframes okBlink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
      `}</style>
    </div>
  );
}

Object.assign(window, { ProjectDetailMock, ProtocolMock });