@meistrari/minuta-nuxt 0.1.0

package/README.md

@@ -0,0 +1,106 @@
+# @meistrari/minuta-nuxt
+
+Embed do editor de minuta do **defesa.ai** para qualquer app Nuxt: o documento
+paginado em A4 com edição rica e export DOCX fiel ao preview, renderizado
+como componente — sem iframe e **sem segredos no browser**.
+
+Segue a mesma arquitetura do `@meistrari/chat-nuxt`: o componente fala com
+rotas Nitro registradas no próprio app hospedeiro (`/api/minuta/*`), e o proxy
+encaminha para a API do Case Defense Builder com o **JWT Tela do usuário
+logado** — a API valida o token contra a auth central e resolve o workspace.
+
+O pacote mora em `packages/minuta-nuxt` do repositório
+[case-defense-builder](https://github.com/meistrari/case-defense-builder) e é
+publicado no npm pelo workflow `Publish @meistrari/minuta-nuxt`. O próprio
+cliente do defesa.ai consome esta mesma versão publicada — a tela `/minutas/:id`
+é só um invólucro do `<MinutaEmbed>`, então bug corrigido aqui chega nos dois.
+
+## Instalação
+
+```bash
+npm install @meistrari/minuta-nuxt
+```
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+    modules: ['@meistrari/minuta-nuxt'],
+    minutaNuxt: {
+        // URL da API do Case Defense Builder
+        cdbApiUrl: process.env.CDB_API_URL, // backend do defesa.ai
+        // opcional: cookie do host que carrega o JWT Tela do usuário
+        // (default: event.context.auth.token → cookie `tela-jwt`)
+        // authTokenCookie: 'meu-cookie-jwt',
+    },
+})
+```
+
+## Uso
+
+```vue
+<template>
+    <MinutaEmbed
+        minuta-id="94a53f33-…"
+        style="height: 100vh"
+        @saved="onSaved"
+    />
+</template>
+```
+
+Criando uma minuta a partir do host (composable auto-importado):
+
+```ts
+const { uploadMinutaFile, createMinuta } = useMinutaApi()
+
+// arquivos de QUALQUER tipo — sobem pro Vault via proxy
+const files = await Promise.all([...pickedFiles].map(f => uploadMinutaFile(f)))
+
+const minuta = await createMinuta({
+    name: 'Contestação — João da Silva',
+    files,
+    // contexto livre sobre a peça (tipo, juízo, orientações do escritório…)
+    context: 'Contestação para o réu; linha de defesa: culpa exclusiva do consumidor.',
+    // agente Tela que escreve a minuta ("organizationName/repository")
+    agentId: 'tela/defesa-minuta-avulsa',
+})
+// navegue para a tela que renderiza <MinutaEmbed :minuta-id="minuta.id" />
+```
+
+### Props do `<MinutaEmbed>`
+
+| Prop | Default | Descrição |
+|---|---|---|
+| `minutaId` | — | id da minuta avulsa no CDB |
+| `editable` | `true` | permite editar o documento |
+| `autoSave` | `true` | salva 2s após a última edição |
+| `showToolbar` | `true` | barra com nome, estado de save e export |
+| `margins` | 2,5cm/3cm | margens da página em px @96dpi |
+
+Eventos: `ready(editor)`, `saved(minuta)`, `error(message)`.
+`defineExpose`: `saveNow()`, `exportDocx()`, `editor`.
+
+A barra do embed inclui **Histórico**: versões são criadas automaticamente
+conforme o documento é editado (snapshot no auto-save, com espaçamento mínimo
+de 10 min) e podem ser restauradas — o estado atual vira um snapshot antes.
+
+## Como funciona
+
+1. `MinutaEmbed` busca a minuta em `/api/minuta/:id` (rota Nitro do módulo).
+2. O proxy resolve o JWT do usuário (contexto de auth do host ou cookie) e
+   encaminha para `{cdbApiUrl}/standalone-minuta/:id` com `Authorization: Bearer`.
+3. Enquanto `status === 'PROCESSING'`, o embed faz polling (3s) — o próprio GET
+   no CDB consulta o agente e materializa o resultado.
+4. Com `status === 'READY'`, o HTML entra no editor paginado (Tiptap + motor de
+   paginação A4 próprio). O export DOCX é 100% client-side, com as quebras de
+   página idênticas ao preview.
+
+## Desenvolvimento
+
+```bash
+npm install
+npm run build      # nuxt-module-build
+```
+
+O núcleo do editor (`MinutaDocxEditor.vue`, `paginationPlugin`, `docxExport`,
+`editorExtensions`) é portado do Case Defense Builder — a intenção é que o CDB
+passe a consumir este package para existir **um único editor** mantido.

package/dist/module.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.mts

@@ -0,0 +1,18 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+    /**
+     * URL base da API do Case Defense Builder (o backend do defesa.ai).
+     * O proxy Nitro encaminha as requisições do embed para cá.
+     */
+    cdbApiUrl?: string;
+    /**
+     * Nome do cookie do app hospedeiro que carrega o JWT Tela do usuário.
+     * Sem valor, usa `event.context.auth.token` e cai para o cookie `tela-jwt`.
+     */
+    authTokenCookie?: string;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.d.ts

@@ -0,0 +1,18 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+    /**
+     * URL base da API do Case Defense Builder (o backend do defesa.ai).
+     * O proxy Nitro encaminha as requisições do embed para cá.
+     */
+    cdbApiUrl?: string;
+    /**
+     * Nome do cookie do app hospedeiro que carrega o JWT Tela do usuário.
+     * Sem valor, usa `event.context.auth.token` e cai para o cookie `tela-jwt`.
+     */
+    authTokenCookie?: string;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "@meistrari/minuta-nuxt",
+  "configKey": "minutaNuxt",
+  "version": "0.1.0",
+  "builder": {
+    "@nuxt/module-builder": "0.8.4",
+    "unbuild": "2.0.0"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,45 @@
+import { defineNuxtModule, createResolver, addComponentsDir, addImports, addServerHandler } from '@nuxt/kit';
+import { defu } from 'defu';
+
+const module = defineNuxtModule({
+  meta: {
+    name: "@meistrari/minuta-nuxt",
+    configKey: "minutaNuxt"
+  },
+  defaults: {
+    cdbApiUrl: "",
+    authTokenCookie: void 0
+  },
+  setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    nuxt.options.css = nuxt.options.css || [];
+    if (!nuxt.options.css.includes("@fontsource-variable/inter"))
+      nuxt.options.css.push("@fontsource-variable/inter");
+    nuxt.options.runtimeConfig.minutaNuxt = defu(
+      nuxt.options.runtimeConfig.minutaNuxt,
+      {
+        cdbApiUrl: options.cdbApiUrl || process.env.CDB_API_URL || "",
+        authTokenCookie: options.authTokenCookie
+      }
+    );
+    addComponentsDir({
+      path: resolver.resolve("./runtime/components"),
+      pathPrefix: false
+    });
+    addImports({
+      name: "useMinutaApi",
+      as: "useMinutaApi",
+      from: resolver.resolve("./runtime/composables/useMinutaApi")
+    });
+    addServerHandler({
+      route: "/api/minuta",
+      handler: resolver.resolve("./runtime/server/api/minuta/index")
+    });
+    addServerHandler({
+      route: "/api/minuta/**",
+      handler: resolver.resolve("./runtime/server/api/minuta/[...path]")
+    });
+  }
+});
+
+export { module as default };

package/dist/runtime/components/MinutaAnnotationsGutter.vue

@@ -0,0 +1,425 @@
+<script setup lang="ts">
+import type { Editor } from '@tiptap/core'
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import type { MinutaAnalysis } from '../composables/useMinutaApi'
+import { annotationY, applyAnnotationDecorations, findTextRange, getAnnotationDecorationRanges, getUserEditRanges, locateAnnotationDetailed, scrollToAnnotation, setUserEditRanges, trackUserEdits } from '../composables/annotationAnchors'
+
+/**
+ * Comentários de margem (estilo Google Docs): cada item da análise vira um
+ * card ancorado na altura do trecho da minuta onde ele se aplica. Clicar num
+ * card rola o documento até o trecho e o destaca.
+ */
+
+const props = defineProps<{
+    editor: Editor | null
+    analysis: MinutaAnalysis
+    /** container com scroll do documento (para o scroll suave ao clicar) */
+    scrollContainer: HTMLElement | null
+}>()
+
+const emit = defineEmits<{
+    /** card de fato extraído pediu o documento-fonte no preview */
+    openDocument: [payload: { documento: string, pagina?: number, highlight?: string }]
+    /**
+     * o estado de âncora mudou (anotação virou/deixou de ser manual, texto
+     * adicionado pelo usuário) — o dono persiste a analysis via PATCH
+     */
+    updateAnalysis: [analysis: MinutaAnalysis]
+}>()
+
+/** o próprio gutter rola junto com o conteúdo — é a referência de coordenadas */
+const rootRef = ref<HTMLElement | null>(null)
+
+interface GutterItem {
+    id: string
+    kind: 'tese' | 'jurisprudencia' | 'citacao' | 'fato'
+    /** origem na analysis (para persistir mudanças de estado da âncora) */
+    source: { key: 'teses' | 'jurisprudencias' | 'citacoes' | 'fatos', index: number }
+    title: string
+    body?: string
+    onde?: string
+    trecho?: string
+    trechoOriginal?: string
+    /** fato extraído: documento-fonte e página */
+    documento?: string
+    pagina?: number
+    range: { from: number, to: number } | null
+    /** o usuário editou o trecho — a âncora verbatim original não vale mais */
+    manual?: boolean
+    y: number | null
+    finalY: number
+}
+
+/** cores por categoria — as MESMAS do highlight no texto (associação card↔trecho) */
+const KIND_META: Record<GutterItem['kind'], { label: string, color: string, bg: string }> = {
+    tese: { label: 'Tese', color: '#6d28d9', bg: 'rgba(139, 92, 246, 0.12)' },
+    jurisprudencia: { label: 'Jurisprudência', color: '#b45309', bg: 'rgba(217, 119, 6, 0.12)' },
+    citacao: { label: 'Citação', color: '#1d4ed8', bg: 'rgba(37, 99, 235, 0.10)' },
+    fato: { label: 'Extraído', color: '#047857', bg: 'rgba(5, 150, 105, 0.12)' },
+}
+
+/** trecho editado pelo usuário: a anotação vira "manual" (cinza) */
+const MANUAL_META = { label: 'Editado', color: '#565d69', bg: 'rgba(107, 114, 128, 0.12)' }
+
+function metaFor(item: GutterItem) {
+    return item.manual ? MANUAL_META : KIND_META[item.kind]
+}
+
+const items = ref<GutterItem[]>([])
+const activeId = ref<string | null>(null)
+const cardRefs = new Map<string, HTMLElement>()
+
+function setCardRef(id: string, el: unknown) {
+    if (el instanceof HTMLElement)
+        cardRefs.set(id, el)
+    else
+        cardRefs.delete(id)
+}
+
+function flatten(): GutterItem[] {
+    const analysis = props.analysis
+    const out: GutterItem[] = []
+    const anchor = (anno: { trecho?: string, manual?: boolean, trechoOriginal?: string }) => ({
+        trecho: anno.trecho,
+        manual: anno.manual,
+        trechoOriginal: anno.trechoOriginal,
+    })
+    analysis.teses?.forEach((tese, i) => {
+        out.push({ id: `tese-${i}`, kind: 'tese', source: { key: 'teses', index: i }, title: tese.titulo, body: tese.fundamento, onde: tese.onde, ...anchor(tese), range: null, y: null, finalY: 0 })
+    })
+    analysis.jurisprudencias?.forEach((juris, i) => {
+        out.push({ id: `juris-${i}`, kind: 'jurisprudencia', source: { key: 'jurisprudencias', index: i }, title: juris.referencia, body: juris.tese, onde: juris.onde, ...anchor(juris), range: null, y: null, finalY: 0 })
+    })
+    analysis.citacoes?.forEach((citacao, i) => {
+        out.push({ id: `cit-${i}`, kind: 'citacao', source: { key: 'citacoes', index: i }, title: citacao.referencia, body: citacao.como, onde: citacao.onde, ...anchor(citacao), range: null, y: null, finalY: 0 })
+    })
+    analysis.fatos?.forEach((fato, i) => {
+        out.push({ id: `fato-${i}`, kind: 'fato', source: { key: 'fatos', index: i }, title: fato.dado, onde: fato.onde, documento: fato.documento, pagina: fato.pagina, ...anchor(fato), range: null, y: null, finalY: 0 })
+    })
+    return out
+}
+
+/** ids que já ancoraram por trecho verbatim nesta sessão */
+const trechoAnchored = new Set<string>()
+
+/** menor tamanho de texto adicionado que vale persistir (âncora verbatim confiável) */
+const MIN_PERSISTED_EDIT_LENGTH = 15
+
+interface AnchorPatch {
+    source: GutterItem['source']
+    changes: { manual?: boolean, trecho?: string, trechoOriginal?: string }
+}
+
+/** persiste mudanças de âncora (manual/trecho) + rastro de texto adicionado */
+function emitAnalysisChanges(patches: AnchorPatch[], edicoesManuais: string[] | null) {
+    if (!patches.length && edicoesManuais === null)
+        return
+    const next: MinutaAnalysis = {
+        ...props.analysis,
+        teses: props.analysis.teses?.map(a => ({ ...a })),
+        jurisprudencias: props.analysis.jurisprudencias?.map(a => ({ ...a })),
+        citacoes: props.analysis.citacoes?.map(a => ({ ...a })),
+        fatos: props.analysis.fatos?.map(a => ({ ...a })),
+    }
+    for (const patch of patches) {
+        const target = (next[patch.source.key] as Array<Record<string, unknown>> | undefined)?.[patch.source.index]
+        if (!target)
+            continue
+        for (const [key, value] of Object.entries(patch.changes)) {
+            if (value === undefined)
+                delete target[key]
+            else
+                target[key] = value
+        }
+    }
+    if (edicoesManuais !== null)
+        next.edicoesManuais = edicoesManuais
+    emit('updateAnalysis', next)
+}
+
+async function compute() {
+    const editor = props.editor
+    const reference = rootRef.value
+    if (!editor || editor.isDestroyed || !reference)
+        return
+
+    // ranges das decorações mapeados pelas edições — rastreiam o texto editado
+    const mapped = getAnnotationDecorationRanges(editor)
+    const capturedText = (range: { from: number, to: number }) =>
+        editor.state.doc.textBetween(range.from, Math.min(range.to, editor.state.doc.content.size), ' ').trim()
+
+    const patches: AnchorPatch[] = []
+    const flat = flatten()
+    for (const item of flat) {
+        if (item.manual) {
+            // anotação já convertida (persistida): o trecho aponta pro texto editado
+            const original = item.trechoOriginal ? findTextRange(editor, item.trechoOriginal) : null
+            if (original) {
+                // o texto original voltou (undo) → restaura a categoria
+                item.manual = false
+                item.range = original
+                trechoAnchored.add(item.id)
+                patches.push({ source: item.source, changes: { manual: undefined, trecho: item.trechoOriginal, trechoOriginal: undefined } })
+            }
+            else {
+                const current = item.trecho ? findTextRange(editor, item.trecho) : null
+                if (current) {
+                    item.range = current
+                }
+                else {
+                    // editou de novo: segue pelo range mapeado e atualiza o trecho
+                    item.range = mapped.get(item.id) ?? null
+                    if (item.range) {
+                        const text = capturedText(item.range)
+                        if (text && text !== item.trecho)
+                            patches.push({ source: item.source, changes: { trecho: text } })
+                    }
+                }
+            }
+        }
+        else {
+            const located = locateAnnotationDetailed(editor, { trecho: item.trecho, onde: item.onde })
+            if (located?.matchedBy === 'trecho') {
+                // o trecho verbatim está no documento (inclusive de volta, após undo)
+                trechoAnchored.add(item.id)
+                item.range = located.range
+            }
+            else if (trechoAnchored.has(item.id)) {
+                // ancorava por trecho e não acha mais: o usuário editou ali.
+                // A anotação vira "manual", segue o texto pelo range mapeado e a
+                // conversão é PERSISTIDA (sobrevive a reload); trecho apagado → órfã.
+                item.manual = true
+                item.range = mapped.get(item.id) ?? null
+                const text = item.range ? capturedText(item.range) : ''
+                patches.push({
+                    source: item.source,
+                    changes: { manual: true, trechoOriginal: item.trecho, ...(text ? { trecho: text } : {}) },
+                })
+            }
+            else {
+                item.range = located?.range ?? null
+            }
+        }
+        item.y = item.range ? annotationY(editor, item.range.from, reference) : null
+    }
+
+    // --- rastro de texto ADICIONADO pelo usuário ---
+    let userRanges = getUserEditRanges(editor)
+    const stored = props.analysis.edicoesManuais ?? []
+    if (!userRanges.length && stored.length) {
+        // pós-reload/reset: re-ancora os trechos persistidos por busca verbatim
+        const seeds = stored
+            .map(trecho => findTextRange(editor, trecho))
+            .filter((range): range is { from: number, to: number } => !!range)
+        if (seeds.length) {
+            setUserEditRanges(editor, seeds)
+            userRanges = getUserEditRanges(editor)
+        }
+    }
+    const persistable = userRanges
+        .map(capturedText)
+        .filter(text => text.length >= MIN_PERSISTED_EDIT_LENGTH)
+    const edicoesChanged = JSON.stringify(persistable) !== JSON.stringify(stored)
+
+    emitAnalysisChanges(patches, edicoesChanged ? persistable : null)
+
+    // ancorados por ordem de posição; resumo primeiro; não-localizados no fim
+    const anchored = flat.filter(i => i.y != null).sort((a, b) => a.y! - b.y!)
+    const orphans = flat.filter(i => i.y == null)
+    items.value = [...anchored, ...orphans]
+
+    // passo 2: resolve sobreposição com as alturas reais renderizadas
+    await nextTick()
+    let cursor = 8
+    for (const item of items.value) {
+        const desired = item.y ?? cursor
+        item.finalY = Math.max(desired, cursor)
+        const height = cardRefs.get(item.id)?.offsetHeight ?? 80
+        cursor = item.finalY + height + 10
+    }
+    // força re-render das posições
+    items.value = [...items.value]
+    syncDecorations()
+}
+
+/** pinta no texto o highlight discreto de cada item ancorado, na cor da categoria */
+function syncDecorations() {
+    const editor = props.editor
+    if (!editor || editor.isDestroyed)
+        return
+    applyAnnotationDecorations(editor, items.value
+        .filter(item => item.range)
+        .map(item => ({
+            id: item.id,
+            from: item.range!.from,
+            to: item.range!.to,
+            kind: item.manual ? 'manual' as const : item.kind,
+            active: item.id === activeId.value,
+        })))
+}
+
+function onCardClick(item: GutterItem) {
+    activeId.value = item.id
+    syncDecorations()
+    if (item.range && props.editor)
+        scrollToAnnotation(props.editor, item.range.from, props.scrollContainer)
+}
+
+// --- recomputa quando o documento muda/assenta ---
+let debounceTimer: ReturnType<typeof setTimeout> | null = null
+function scheduleCompute(delay = 300) {
+    if (debounceTimer)
+        clearTimeout(debounceTimer)
+    debounceTimer = setTimeout(() => void compute(), delay)
+}
+
+const onEditorUpdate = () => scheduleCompute(400)
+let resizeObserver: ResizeObserver | null = null
+
+watch(() => props.editor, (editor, old) => {
+    old?.off('update', onEditorUpdate)
+    if (editor) {
+        // rastro de texto adicionado pelo usuário (highlight cinza)
+        trackUserEdits(editor)
+        editor.on('update', onEditorUpdate)
+        // a paginação assenta async — recomputa em ondas
+        scheduleCompute(50)
+        setTimeout(() => scheduleCompute(0), 800)
+        setTimeout(() => scheduleCompute(0), 2000)
+    }
+}, { immediate: true })
+
+onMounted(() => {
+    const sheet = rootRef.value?.parentElement
+    if (sheet) {
+        // como o Google Docs: com os comentários abertos, a folha desloca pra
+        // esquerda pra dar lugar à coluna (a classe vive enquanto o gutter vive)
+        sheet.classList.add('poc-sheet--with-gutter')
+        resizeObserver = new ResizeObserver(() => scheduleCompute(200))
+        resizeObserver.observe(sheet)
+    }
+    scheduleCompute(100)
+})
+
+watch(() => props.analysis, () => scheduleCompute(50), { deep: true })
+
+onUnmounted(() => {
+    rootRef.value?.parentElement?.classList.remove('poc-sheet--with-gutter')
+    if (props.editor && !props.editor.isDestroyed)
+        applyAnnotationDecorations(props.editor, null)
+    props.editor?.off('update', onEditorUpdate)
+    resizeObserver?.disconnect()
+    if (debounceTimer)
+        clearTimeout(debounceTimer)
+})
+</script>
+
+<template>
+    <div ref="rootRef" class="minuta-gutter">
+        <div
+            v-for="item in items"
+            :key="item.id"
+            :ref="el => setCardRef(item.id, el)"
+            class="minuta-gutter-card"
+            :class="{
+                'minuta-gutter-card--active': activeId === item.id,
+                'minuta-gutter-card--orphan': !item.range,
+            }"
+            :style="{ transform: `translateY(${item.finalY}px)` }"
+            @click="onCardClick(item)"
+        >
+            <div class="minuta-gutter-card__kind">
+                <span
+                    class="minuta-gutter-card__badge"
+                    :style="{ color: metaFor(item).color, background: metaFor(item).bg }"
+                >
+                    {{ metaFor(item).label }}
+                </span>
+                <span v-if="item.manual" class="minuta-gutter-card__onde">era: {{ KIND_META[item.kind].label.toLowerCase() }}</span>
+                <span v-else-if="item.onde" class="minuta-gutter-card__onde">{{ item.onde }}</span>
+            </div>
+            <p class="minuta-gutter-card__title">
+                {{ item.title }}
+            </p>
+            <p v-if="item.body" class="minuta-gutter-card__body">
+                {{ item.body }}
+            </p>
+            <div v-if="item.documento" class="minuta-gutter-card__source">
+                <span class="minuta-gutter-card__source-text">
+                    {{ item.documento }}<template v-if="item.pagina">, pág. {{ item.pagina }}</template>
+                </span>
+                <button
+                    class="minuta-gutter-card__source-btn"
+                    type="button"
+                    @click.stop="emit('openDocument', { documento: item.documento!, pagina: item.pagina, highlight: item.title })"
+                >
+                    Ver documento
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.minuta-gutter{height:100%;left:calc(100% + 16px);pointer-events:none;position:absolute;top:0;width:264px;z-index:20}.minuta-gutter-card{background:#fff;border:.5px solid #dee3e7;border-radius:10px;cursor:pointer;left:0;padding:8px 12px;pointer-events:auto;position:absolute;right:0;transition:border-color .15s ease,background .15s ease,transform .2s ease}.minuta-gutter-card:hover{border-color:#b6bcc6}.minuta-gutter-card--active{background:#fafbfc;border-color:#565d69}.minuta-gutter-card--orphan{border-style:dashed;opacity:.7}.minuta-gutter-card__source{align-items:baseline;border-top:.5px solid #eceef1;display:flex;gap:8px;justify-content:space-between;margin-top:5px;padding-top:5px}.minuta-gutter-card__source-text{color:#9ca3af;font-size:10px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.minuta-gutter-card__source-btn{background:none;border:none;color:#565d69;cursor:pointer;flex-shrink:0;font-size:10px;font-weight:500;padding:0}.minuta-gutter-card__source-btn:hover{color:#111827;text-decoration:underline}.minuta-gutter-card__badge{align-items:center;border-radius:999px;display:inline-flex;flex-shrink:0;font-size:9.5px;font-weight:650;letter-spacing:.05em;line-height:1.5;padding:1px 7px;text-transform:uppercase}.minuta-gutter-card__kind{align-items:center;display:flex;gap:6px;margin-bottom:4px;min-width:0}.minuta-gutter-card__onde{color:#b6bcc6;font-size:10px;font-weight:400;letter-spacing:normal;min-width:0;overflow:hidden;text-overflow:ellipsis;text-transform:none;white-space:nowrap}.minuta-gutter-card__title{color:#111827;font-size:12px;font-weight:590;line-height:1.35;margin:0}.minuta-gutter-card__body{color:#6b7280;display:-webkit-box;font-size:11px;-webkit-line-clamp:3;line-height:1.45;margin:3px 0 0;-webkit-box-orient:vertical;overflow:hidden}
+</style>
+
+<style>
+/* com os comentários abertos a folha desloca pra esquerda (estilo Google Docs):
+   centraliza o conjunto folha+coluna; em tela estreita encosta na esquerda */
+.poc-sheet--with-gutter {
+    margin-left: max(8px, calc(50% - 545px)) !important;
+    margin-right: auto !important;
+    transition: margin-left 0.2s ease;
+}
+
+/* highlight persistente dos trechos da análise (decoração PM — mesma cor do
+   selo do card na margem, pra associação imediata cor↔categoria) */
+.minuta-anno {
+    border-radius: 2px;
+    box-decoration-break: clone;
+    -webkit-box-decoration-break: clone;
+    transition: background 0.2s ease;
+}
+
+.minuta-anno--tese {
+    background: rgba(139, 92, 246, 0.13);
+}
+
+.minuta-anno--jurisprudencia {
+    background: rgba(217, 119, 6, 0.13);
+}
+
+.minuta-anno--citacao {
+    background: rgba(37, 99, 235, 0.11);
+}
+
+.minuta-anno--fato {
+    background: rgba(5, 150, 105, 0.13);
+}
+
+.minuta-anno--manual {
+    background: rgba(107, 114, 128, 0.13);
+}
+
+/* card ativo na margem → trecho correspondente acende mais forte */
+.minuta-anno--active.minuta-anno--manual {
+    background: rgba(107, 114, 128, 0.28);
+}
+
+.minuta-anno--active.minuta-anno--tese {
+    background: rgba(139, 92, 246, 0.3);
+}
+
+.minuta-anno--active.minuta-anno--jurisprudencia {
+    background: rgba(217, 119, 6, 0.3);
+}
+
+.minuta-anno--active.minuta-anno--citacao {
+    background: rgba(37, 99, 235, 0.26);
+}
+
+.minuta-anno--active.minuta-anno--fato {
+    background: rgba(5, 150, 105, 0.28);
+}
+</style>