/* ---------- Tokens ---------- */
:root {
  --fundo: #fbf7f0;
  --superficie: #ffffff;
  --superficie-2: #f4ede1;
  --borda: #e7ddcc;
  --texto: #2b2620;
  --texto-suave: #6f665a;
  --primaria: #2f7d5b;
  --primaria-forte: #23664a;
  --primaria-suave: #e2f1e9;
  --destaque: #d9572b;
  --destaque-suave: #fbe6dc;
  --aviso: #9a6512;
  --aviso-suave: #fdf1d6;
  --sugestao: #5b4bc4;
  --sugestao-suave: #eeebfd;
  --perigo: #b83227;
  --sombra: 0 1px 2px rgb(60 45 20 / .06), 0 4px 16px rgb(60 45 20 / .06);
  --raio: 14px;
  --fonte: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-leitura: "Literata", Georgia, serif;
  --lateral: 236px;
  --painel-claude: 400px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #1a1815;
    --superficie: #23201c;
    --superficie-2: #2c2823;
    --borda: #3b352d;
    --texto: #f1ebe1;
    --texto-suave: #b2a897;
    --primaria: #62c294;
    --primaria-forte: #7fd3aa;
    --primaria-suave: #1f3a2d;
    --destaque: #f08055;
    --destaque-suave: #3d2419;
    --aviso: #e8b65c;
    --aviso-suave: #3a2f17;
    --sugestao: #ad9ff7;
    --sugestao-suave: #2b2549;
    --perigo: #f07466;
    --sombra: 0 1px 2px rgb(0 0 0 / .3), 0 4px 16px rgb(0 0 0 / .25);
    color-scheme: dark;
  }
}

:root[data-tema="escuro"] {
  --fundo: #1a1815;
  --superficie: #23201c;
  --superficie-2: #2c2823;
  --borda: #3b352d;
  --texto: #f1ebe1;
  --texto-suave: #b2a897;
  --primaria: #62c294;
  --primaria-forte: #7fd3aa;
  --primaria-suave: #1f3a2d;
  --destaque: #f08055;
  --destaque-suave: #3d2419;
  --aviso: #e8b65c;
  --aviso-suave: #3a2f17;
  --sugestao: #ad9ff7;
  --sugestao-suave: #2b2549;
  --perigo: #f07466;
  --sombra: 0 1px 2px rgb(0 0 0 / .3), 0 4px 16px rgb(0 0 0 / .25);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.55 var(--fonte);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primaria); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; border-radius: 6px; }

/* ---------- Layout ---------- */
.app {
  display: grid;
  grid-template-columns: var(--lateral) minmax(0, 1fr) var(--painel-claude);
  grid-template-rows: 60px minmax(0, 1fr);
  grid-template-areas: "topo topo topo" "lateral conteudo claude";
  height: 100vh;
}
.app.claude-fechado { grid-template-columns: var(--lateral) minmax(0, 1fr) 0; }
.app.claude-fechado .claude { display: none; }

.topo {
  grid-area: topo;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}
.marca { display: flex; align-items: center; gap: 10px; color: var(--texto); }
.marca:hover { text-decoration: none; }
.marca-logo {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--primaria-suave); font-size: 19px;
}
.marca strong { display: block; font-size: 16px; font-weight: 800; line-height: 1.1; }
.marca small { display: block; font-size: 12px; color: var(--texto-suave); }
.busca { flex: 1; max-width: 460px; margin-left: auto; }
.busca input {
  width: 100%; padding: 8px 14px;
  border: 1px solid var(--borda); border-radius: 999px;
  background: var(--fundo);
}

.lateral {
  grid-area: lateral;
  overflow-y: auto;
  padding: 16px 10px 32px;
  border-right: 1px solid var(--borda);
  background: var(--superficie);
}
.lateral h3 {
  margin: 18px 10px 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texto-suave);
}
.lateral a {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: 9px;
  color: var(--texto); font-weight: 600; font-size: 15px;
}
.lateral a:hover { background: var(--superficie-2); text-decoration: none; }
.lateral a.ativo { background: var(--primaria-suave); color: var(--primaria-forte); }
.lateral a .contagem {
  margin-left: auto; min-width: 22px; padding: 0 7px; border-radius: 999px;
  background: var(--aviso-suave); color: var(--aviso); font-size: 12px; text-align: center;
}
.lateral .sub { padding-left: 30px; font-weight: 400; font-size: 14px; }

.conteudo { grid-area: conteudo; overflow-y: auto; padding: 28px clamp(16px, 4vw, 48px) 80px; }
.conteudo > * { max-width: 1080px; margin-left: auto; margin-right: auto; }

/* ---------- Componentes ---------- */
.botao {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 10px;
  border: 1px solid var(--borda); background: var(--superficie);
  font-weight: 700; font-size: 14px; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.botao:hover { background: var(--superficie-2); }
.botao:disabled { opacity: .5; cursor: not-allowed; }
a.botao:hover { text-decoration: none; }
.botao-primario { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.botao-primario:hover { background: var(--primaria-forte); }
:root[data-tema="escuro"] .botao-primario { color: #10221a; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .botao-primario { color: #10221a; } }
.botao-fantasma { background: transparent; border-color: transparent; }
.botao-perigo { color: var(--perigo); }
.botao-pequeno { padding: 5px 10px; font-size: 13px; border-radius: 8px; }
.botao-claude { background: var(--destaque-suave); border-color: transparent; color: var(--destaque); }
.botao-icone {
  display: grid; place-items: center;
  width: 36px; height: 36px; border: 0; border-radius: 10px;
  background: transparent; cursor: pointer; font-size: 17px;
}
.botao-icone:hover { background: var(--superficie-2); }
.so-celular { display: none; }

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: 999px;
  background: var(--superficie-2); color: var(--texto-suave);
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.chip-verde { background: var(--primaria-suave); color: var(--primaria-forte); }
.chip-aviso { background: var(--aviso-suave); color: var(--aviso); }
.chip-sugestao { background: var(--sugestao-suave); color: var(--sugestao); }
.chip-destaque { background: var(--destaque-suave); color: var(--destaque); }

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

.cabecalho { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 20px; }
.cabecalho h1 { margin: 0; font-size: clamp(26px, 3vw, 34px); line-height: 1.15; font-weight: 800; }
.cabecalho .sobretitulo { margin: 0 0 4px; color: var(--texto-suave); font-size: 13px; font-weight: 700; }
.cabecalho .acoes { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.trilha { font-size: 13px; color: var(--texto-suave); margin-bottom: 6px; word-break: break-all; }

.secao { margin-top: 34px; }
.secao > h2 { display: flex; align-items: center; gap: 10px; font-size: 20px; margin: 0 0 14px; }
.secao > h2 a { font-size: 14px; font-weight: 700; margin-left: auto; }

.grade { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.grade-pequena { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }

.vazio {
  padding: 32px; text-align: center; color: var(--texto-suave);
  border: 2px dashed var(--borda); border-radius: var(--raio);
}
.vazio p { margin: 0 0 14px; }

/* Painel */
.hero {
  display: grid; gap: 20px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  padding: 28px; border-radius: 20px;
  background: linear-gradient(135deg, var(--primaria-suave), var(--superficie-2));
}
.hero h1 { margin: 0 0 8px; font-size: clamp(28px, 4vw, 40px); font-weight: 800; }
.hero p { margin: 0; color: var(--texto-suave); font-size: 17px; }
.acoes-rapidas { display: grid; gap: 8px; align-content: start; }
.acoes-rapidas .botao { justify-content: flex-start; background: var(--superficie); }

.livro {
  display: flex; flex-direction: column; gap: 10px; padding: 18px;
  color: var(--texto); transition: transform .15s;
}
.livro:hover { text-decoration: none; transform: translateY(-2px); }
.livro-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.livro-numero {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--destaque); color: #fff; font-weight: 800;
}
.livro h3 { margin: 0; font-size: 18px; line-height: 1.25; }
.livro p { margin: 0; color: var(--texto-suave); font-size: 14px; }
.livro-capa { aspect-ratio: 16 / 9; border-radius: 10px; object-fit: cover; width: 100%; background: var(--superficie-2); }
.progresso { display: flex; flex-wrap: wrap; gap: 4px; }
.novo {
  display: grid; place-items: center; gap: 6px; min-height: 160px; padding: 18px;
  border: 2px dashed var(--borda); border-radius: var(--raio);
  background: transparent; color: var(--texto-suave); font-weight: 700; cursor: pointer;
}
.novo:hover { border-color: var(--primaria); color: var(--primaria); }
.novo span { font-size: 28px; }

.contadores { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.contador { padding: 16px 18px; color: var(--texto); }
.contador:hover { text-decoration: none; border-color: var(--primaria); }
.contador strong { display: block; font-size: 30px; line-height: 1; }
.contador span { color: var(--texto-suave); font-size: 14px; font-weight: 600; }

/* Personagens */
.personagem { overflow: hidden; color: var(--texto); display: flex; flex-direction: column; }
.personagem:hover { text-decoration: none; border-color: var(--primaria); }
.personagem-foto {
  aspect-ratio: 1; width: 100%; object-fit: cover; object-position: top;
  background: var(--superficie-2);
}
.personagem-inicial {
  display: grid; place-items: center; aspect-ratio: 1;
  background: var(--sugestao-suave); color: var(--sugestao);
  font-size: 48px; font-weight: 800;
}
.personagem-info { padding: 12px 14px 14px; display: grid; gap: 6px; }
.personagem-info h3 { margin: 0; font-size: 17px; }
.personagem-info p {
  margin: 0; font-size: 13px; color: var(--texto-suave);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.avatares { display: flex; flex-wrap: wrap; gap: 8px; }
.avatar {
  width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--superficie); box-shadow: var(--sombra); background: var(--superficie-2);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.galeria { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 20px; }
.galeria figure { margin: 0; flex: 0 0 auto; }
.galeria img { height: 220px; width: auto; border-radius: 12px; cursor: zoom-in; background: var(--superficie-2); }
.galeria figcaption { font-size: 12px; color: var(--texto-suave); margin-top: 4px; }

/* Abas */
.abas { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--borda); margin-bottom: 22px; }
.abas a {
  padding: 9px 14px; border-bottom: 3px solid transparent;
  color: var(--texto-suave); font-weight: 700; white-space: nowrap;
}
.abas a:hover { color: var(--texto); text-decoration: none; }
.abas a.ativo { color: var(--primaria-forte); border-bottom-color: var(--primaria); }
.abas a.faltando { opacity: .55; }

/* Markdown */
.md { overflow-wrap: anywhere; }
.md h1 { font-size: 28px; line-height: 1.2; margin: 0 0 16px; }
.md h2 { font-size: 21px; margin: 30px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--borda); }
.md h3 { font-size: 17px; margin: 22px 0 8px; }
.md p, .md ul, .md ol { margin: 0 0 12px; }
.md li { margin: 3px 0; }
.md blockquote {
  margin: 0 0 14px; padding: 10px 16px;
  border-left: 4px solid var(--primaria); border-radius: 0 10px 10px 0;
  background: var(--primaria-suave);
}
.md blockquote p:last-child { margin-bottom: 0; }
.md code { padding: 1px 6px; border-radius: 6px; background: var(--superficie-2); font-size: .88em; }
.md pre { padding: 14px; border-radius: 10px; background: var(--superficie-2); overflow-x: auto; }
.md pre code { padding: 0; background: none; }
.md hr { border: 0; border-top: 1px solid var(--borda); margin: 24px 0; }
.md img { border-radius: 10px; margin: 8px 0; }
.md a.caminho { font-family: inherit; }
.md .tem-aviso { box-shadow: inset 3px 0 0 var(--aviso); padding-left: 8px; }
.md .tem-sugestao { box-shadow: inset 3px 0 0 var(--sugestao); padding-left: 8px; }
.md td.tem-aviso, .md td.tem-sugestao { padding-left: 12px; }
.tabela { overflow-x: auto; margin: 0 0 16px; border: 1px solid var(--borda); border-radius: 10px; }
.md table { border-collapse: collapse; width: 100%; font-size: 14px; }
.md th, .md td { padding: 8px 10px; border-bottom: 1px solid var(--borda); text-align: left; vertical-align: top; }
.md th { background: var(--superficie-2); font-weight: 800; white-space: nowrap; }
.md tr:last-child td { border-bottom: 0; }
.filtro-tabela { width: 100%; max-width: 320px; margin: 0 0 8px; padding: 6px 12px; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); }
.propriedades { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.propriedades .chip b { color: var(--texto); font-weight: 800; }

/* Manuscrito e ilustrações */
.leitura { font-family: var(--fonte-leitura); font-size: 17px; line-height: 1.7; }
.paginas-indice { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; }
.paginas-indice button {
  min-width: 34px; padding: 3px 8px; border: 0; border-radius: 8px; text-align: center;
  background: var(--superficie-2); color: var(--texto); font-weight: 700; font-size: 13px; cursor: pointer;
}
.paginas-indice button:hover { background: var(--primaria-suave); }
.barra-arquivo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.barra-arquivo .dica { margin-right: auto; word-break: break-all; }
.pagina {
  display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: 20px; margin-bottom: 18px; scroll-margin-top: 16px;
}
.pagina.sem-imagem { grid-template-columns: 1fr; }
.pagina-imagem img { width: 100%; border-radius: 10px; cursor: zoom-in; position: sticky; top: 0; }
.pagina-cabecalho { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.pagina-cabecalho h3 { margin: 0; font-family: var(--fonte); font-size: 16px; }
.pagina-cabecalho .chip { font-family: var(--fonte); }
.pagina-cabecalho .botao { margin-left: auto; font-family: var(--fonte); }

/* Revisão */
.md td.selecao, .md th.selecao { width: 34px; text-align: center; }
.md td.selecao input { width: 17px; height: 17px; cursor: pointer; }
.md tr.selecionada td { background: var(--primaria-suave); }
.barra-selecao {
  position: sticky; bottom: 16px; z-index: 5;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; margin-top: 16px;
}
.barra-selecao span { font-weight: 700; }
.barra-selecao .botao:first-of-type { margin-left: auto; }

/* Pendências */
.filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.filtros .botao { border-radius: 999px; }
.filtros .ativo, .filtros .ativo:hover { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.bloco { margin-bottom: 18px; padding: 16px 18px; }
.bloco h3 { margin: 0 0 10px; font-size: 16px; }
.bloco h3 small { color: var(--texto-suave); font-weight: 600; font-size: 12px; }
.pendencia { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--borda); }
.pendencia:first-of-type { border-top: 0; }
.pendencia .texto { flex: 1; font-size: 14px; }
.pendencia .texto p { margin: 0; }
.pendencia .acoes { display: flex; gap: 6px; flex-shrink: 0; }

/* Lista de arquivos e busca */
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { padding: 8px 0; border-top: 1px solid var(--borda); }
.lista li:first-child { border-top: 0; }
.lista small { display: block; color: var(--texto-suave); font-size: 13px; }
.lista mark { background: var(--aviso-suave); color: inherit; border-radius: 3px; padding: 0 2px; }

/* Editor */
.editor { display: grid; gap: 10px; }
.editor textarea {
  width: 100%; min-height: 65vh; padding: 16px; resize: vertical;
  border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie);
  font: 14px/1.6 ui-monospace, "Cascadia Code", Consolas, monospace;
}
.editor-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.editor-barra .dica { margin-right: auto; }
.dica { color: var(--texto-suave); font-size: 12px; }

/* ---------- Claude ---------- */
.claude {
  grid-area: claude;
  display: flex; flex-direction: column; min-height: 0;
  border-left: 1px solid var(--borda); background: var(--superficie);
}
.claude-topo { display: flex; align-items: center; gap: 6px; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--borda); }
.claude-titulo { font-weight: 800; color: var(--destaque); margin-right: auto; }
.claude-titulo { white-space: nowrap; }
.compositor-linha select { padding: 4px 6px; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); font-size: 12px; max-width: 140px; }
.claude-topo .botao.ativo { background: var(--primaria-suave); color: var(--primaria-forte); }
.titulo-conversa {
  padding: 7px 16px; border-bottom: 1px solid var(--borda);
  font-size: 13px; font-weight: 700; color: var(--texto-suave);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lista-conversas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.lista-conversas > .botao { justify-content: center; margin-bottom: 6px; }
.item-conversa { display: flex; align-items: center; gap: 2px; border-radius: 10px; }
.item-conversa:hover { background: var(--superficie-2); }
.item-conversa.atual { background: var(--primaria-suave); }
.item-conversa .abrir {
  flex: 1; min-width: 0; padding: 8px 10px; border: 0; background: transparent;
  text-align: left; cursor: pointer;
}
.item-conversa .abrir strong { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-conversa .abrir small { display: block; font-size: 12px; color: var(--texto-suave); }
.item-conversa .botao-icone { width: 30px; height: 30px; font-size: 14px; opacity: .55; flex-shrink: 0; }
.item-conversa .botao-icone:hover { opacity: 1; }
.claude-aviso { margin: 10px 12px 0; padding: 10px 12px; border-radius: 10px; background: var(--aviso-suave); color: var(--aviso); font-size: 13px; font-weight: 600; }
.claude-mensagens { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 14px; }
.boas-vindas { color: var(--texto-suave); font-size: 14px; }
.boas-vindas h3 { color: var(--texto); margin: 0 0 6px; font-size: 16px; }
.boas-vindas .sugestoes { display: grid; gap: 6px; margin-top: 12px; }
.boas-vindas .sugestoes button { text-align: left; justify-content: flex-start; font-weight: 600; }
.msg { max-width: 100%; font-size: 14px; }
.msg-usuario {
  align-self: flex-end; max-width: 88%;
  padding: 9px 13px; border-radius: 14px 14px 4px 14px;
  background: var(--primaria); color: #fff; white-space: pre-wrap;
}
:root[data-tema="escuro"] .msg-usuario { color: #10221a; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .msg-usuario { color: #10221a; } }
.msg-claude .md { font-size: 14px; }
.msg-claude .md h1, .msg-claude .md h2 { font-size: 16px; border: 0; margin: 14px 0 6px; padding: 0; }
.msg-claude .md h3 { font-size: 15px; }
.msg-claude .md p:last-child { margin-bottom: 0; }
.ferramentas { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; }
.ferramenta {
  display: flex; gap: 6px; align-items: baseline;
  padding: 4px 9px; border-radius: 8px; background: var(--superficie-2);
  font-size: 12px; color: var(--texto-suave); border: 0; text-align: left;
}
button.ferramenta { cursor: pointer; }
button.ferramenta:hover { color: var(--primaria); }
.ferramenta.falhou { color: var(--perigo); text-decoration: line-through; }
.ferramentas details summary { cursor: pointer; font-size: 12px; color: var(--texto-suave); padding: 2px 0; }
.digitando { display: inline-flex; gap: 4px; padding: 4px 0; }
.digitando i { width: 7px; height: 7px; border-radius: 50%; background: var(--destaque); animation: pulo 1s infinite ease-in-out; }
.digitando i:nth-child(2) { animation-delay: .15s; }
.digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes pulo { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.msg-rodape { margin-top: 6px; font-size: 11px; color: var(--texto-suave); }
.msg-erro { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--destaque-suave); color: var(--perigo); font-size: 13px; white-space: pre-wrap; }

.compositor { padding: 10px 12px 12px; border-top: 1px solid var(--borda); display: grid; gap: 8px; }
.compositor textarea {
  width: 100%; resize: none; padding: 10px 12px; max-height: 40vh;
  border: 1px solid var(--borda); border-radius: 12px; background: var(--fundo);
}
.compositor textarea:focus { border-color: var(--primaria); outline: none; }
.compositor textarea.destacado { animation: brilho 1.2s ease-out; }
@keyframes brilho { from { box-shadow: 0 0 0 4px var(--primaria-suave); } to { box-shadow: none; } }
.compositor-linha { display: flex; align-items: center; gap: 8px; }
.compositor-linha .dica { margin-right: auto; }
.contexto:empty { display: none; }
.contexto label {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 3px 10px; border-radius: 999px; background: var(--superficie-2);
  font-size: 12px; color: var(--texto-suave); cursor: pointer;
}
.contexto label { white-space: nowrap; }
.contexto label span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.claude-topo .botao { white-space: nowrap; }

/* ---------- Sobreposições ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: rgb(10 8 5 / .88); padding: 24px;
}
.lightbox figure { margin: 0; max-width: min(1400px, 92vw); }
.lightbox img { max-height: 84vh; width: auto; margin: 0 auto; border-radius: 10px; }
.lightbox figcaption { color: #eee; text-align: center; font-size: 14px; margin-top: 8px; }
.lightbox .botao-icone { color: #fff; font-size: 28px; flex-shrink: 0; }
.lightbox .botao-icone:hover { background: rgb(255 255 255 / .1); }
.lightbox-fechar { position: absolute; top: 14px; right: 14px; }

.avisos { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60; display: grid; gap: 8px; }
.aviso {
  padding: 10px 16px; border-radius: 12px; box-shadow: var(--sombra);
  background: var(--texto); color: var(--fundo); font-size: 14px; font-weight: 600;
  animation: entrar .2s ease-out;
}
.aviso.erro { background: var(--perigo); color: #fff; }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Entrada (login) ---------- */
.pagina-entrar { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.entrar { width: min(380px, 100%); padding: 32px 28px; text-align: center; }
.entrar .marca-logo { margin: 0 auto 12px; width: 52px; height: 52px; font-size: 26px; border-radius: 14px; }
.entrar h1 { margin: 0; font-size: 26px; }
.entrar > p { margin: 2px 0 22px; color: var(--texto-suave); }
.entrar form { display: grid; gap: 10px; text-align: left; }
.entrar label { font-weight: 700; font-size: 14px; }
.entrar input { padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; background: var(--fundo); }
.entrar .botao { justify-content: center; padding: 10px; }
.entrar-erro { margin: 0; color: var(--perigo); font-size: 14px; font-weight: 600; }

/* ---------- Telas menores ---------- */
@media (max-width: 1180px) {
  .app, .app.claude-fechado { grid-template-columns: var(--lateral) minmax(0, 1fr); grid-template-areas: "topo topo" "lateral conteudo"; }
  .claude {
    position: fixed; top: 60px; right: 0; bottom: 0; z-index: 40;
    width: min(var(--painel-claude), 100vw); box-shadow: -8px 0 30px rgb(0 0 0 / .18);
  }
}
@media (max-width: 760px) {
  .app, .app.claude-fechado { grid-template-columns: minmax(0, 1fr); grid-template-areas: "topo" "conteudo"; }
  .so-celular { display: grid; }
  .lateral { position: fixed; top: 60px; left: 0; bottom: 0; z-index: 45; width: 260px; display: none; box-shadow: 8px 0 30px rgb(0 0 0 / .18); }
  .app.menu-aberto .lateral { display: block; }
  .botao-claude { font-size: 0; }
  .botao-claude::before { content: "✳"; font-size: 16px; }
  .marca > span:last-child { display: none; }
  .busca { max-width: none; }
  .hero, .pagina { grid-template-columns: 1fr; }
  .conteudo { padding: 20px 16px 80px; }
  .pagina-imagem img { position: static; }
}