/* ==========================================================================
   Marketplace Manager — Design System
   Tokens de cor/tipografia + componentes de base reaproveitados em todas
   as páginas (nav, cards, tabelas, badges, botões, formulários).
   ========================================================================== */

:root {
    /* Marca / ação principal */
    --cor-primaria: #4f46e5;
    --cor-primaria-hover: #4338ca;
    --cor-primaria-bg: #eef2ff;
    --cor-primaria-bg-forte: #e0e7ff;

    /* Semântica de dados (lucro, alertas, status) */
    --cor-sucesso: #059669;
    --cor-sucesso-bg: #ecfdf5;
    --cor-sucesso-borda: #a7f3d0;

    --cor-perigo: #dc2626;
    --cor-perigo-bg: #fef2f2;
    --cor-perigo-borda: #fecaca;

    --cor-alerta: #d97706;
    --cor-alerta-bg: #fffbeb;
    --cor-alerta-borda: #fde68a;

    --cor-info: #0891b2;
    --cor-info-bg: #ecfeff;

    --cor-roxo: #9333ea;
    --cor-roxo-bg: #f5f3ff;

    /* Neutros */
    --cinza-50: #f9fafb;
    --cinza-100: #f3f4f6;
    --cinza-200: #e5e7eb;
    --cinza-300: #d1d5db;
    --cinza-400: #9ca3af;
    --cinza-500: #6b7280;
    --cinza-600: #4b5563;
    --cinza-700: #374151;
    --cinza-900: #111827;

    --fundo-pagina: #f6f7fb;
    --fundo-cartao: #ffffff;
    --borda: var(--cinza-200);
    --texto: var(--cinza-900);
    --texto-sutil: var(--cinza-500);

    --raio: 10px;
    --raio-pequeno: 6px;
    --raio-pill: 999px;
    --sombra-cartao: 0 1px 2px rgba(17, 24, 39, 0.04), 0 1px 3px rgba(17, 24, 39, 0.06);
    --sombra-elevada: 0 4px 6px -1px rgba(17, 24, 39, 0.08), 0 2px 4px -2px rgba(17, 24, 39, 0.06);

    --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
    font-family: var(--fonte);
    margin: 0;
    padding: 28px 32px 48px;
    background: var(--fundo-pagina);
    color: var(--texto);
    -webkit-font-smoothing: antialiased;
}

h1 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}

h2 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--cinza-700);
}

.subtitulo {
    color: var(--texto-sutil);
    margin: 0 0 24px;
    font-size: 14px;
}

a { color: inherit; }

/* ------------------------------ Navegação ------------------------------ */

.nav-topo {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 28px;
    padding: 8px;
    background: var(--fundo-cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-cartao);
}

.nav-marca {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
    color: var(--texto);
    padding: 6px 12px 6px 8px;
    margin-right: 4px;
    border-right: 1px solid var(--borda);
}

.nav-marca .ponto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--cor-primaria);
    display: inline-block;
}

.nav-topo a.nav-link {
    text-decoration: none;
    color: var(--texto-sutil);
    font-size: 13.5px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: var(--raio-pequeno);
    transition: background-color .12s ease, color .12s ease;
}

.nav-topo a.nav-link:hover { background: var(--cinza-100); color: var(--texto); }

.nav-topo a.nav-link.ativo {
    background: var(--cor-primaria);
    color: white;
}

.nav-direita {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-seletor-conta select {
    font-size: 13px;
    padding: 6px 10px;
    border-radius: var(--raio-pequeno);
    border: 1px solid var(--borda);
    background: var(--fundo-cartao);
    color: var(--texto);
}

.nav-sininho {
    position: relative;
    font-size: 16px !important;
    padding: 6px 10px !important;
}

.nav-sair {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.sininho-contador {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--cor-perigo);
    color: white;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 5px;
    border-radius: var(--raio-pill);
    transform: translate(40%, -40%);
}

/* -------------------------------- Cards --------------------------------- */

.resumo {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 24px;
}

.cartao {
    background: var(--fundo-cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-cartao);
    padding: 16px 20px;
    min-width: 160px;
}

.cartao .rotulo {
    font-size: 11px;
    font-weight: 700;
    color: var(--texto-sutil);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.cartao .valor {
    font-size: 23px;
    font-weight: 700;
    margin-top: 6px;
    letter-spacing: -0.01em;
}

/* ------------------------------- Flash ---------------------------------- */

.flash {
    background: var(--cor-sucesso-bg);
    border: 1px solid var(--cor-sucesso-borda);
    color: #065f46;
    padding: 11px 16px;
    border-radius: var(--raio);
    margin-bottom: 20px;
    font-size: 13.5px;
    font-weight: 500;
}

.flash-erro {
    background: var(--cor-perigo-bg);
    border: 1px solid var(--cor-perigo-borda);
    color: #991b1b;
}

/* ------------------------------ Filtros ---------------------------------- */

.filtros {
    background: var(--fundo-cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-cartao);
    padding: 16px 20px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 18px;
    align-items: end;
}

.filtros .campo { display: flex; flex-direction: column; gap: 5px; }

.filtros label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-sutil);
    font-weight: 700;
}

input[type="text"],
input[type="date"],
input[type="number"],
input[type="checkbox"],
select,
.nova-tag input[type="text"] {
    padding: 8px 10px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-pequeno);
    font-size: 13px;
    font-family: var(--fonte);
    background: var(--fundo-cartao);
    color: var(--texto);
    transition: border-color .12s ease, box-shadow .12s ease;
}

input[type="checkbox"] { padding: 0; width: 15px; height: 15px; }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px var(--cor-primaria-bg);
}

.filtros .faixa { display: flex; gap: 6px; align-items: center; }
.filtros .faixa input { width: 72px; }

/* -------------------------------- Botões --------------------------------- */

.btn, .filtros button, .nova-tag button, button[type="submit"] {
    padding: 8px 16px;
    border-radius: var(--raio-pequeno);
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-family: var(--fonte);
    background: var(--cor-primaria);
    color: white;
    transition: background-color .12s ease;
}

.btn:hover, .filtros button:hover, .nova-tag button:hover, button[type="submit"]:hover {
    background: var(--cor-primaria-hover);
}

a.limpar, .btn-secundario {
    padding: 8px 16px;
    border-radius: var(--raio-pequeno);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    background: var(--cinza-100);
    color: var(--cinza-700);
    display: inline-block;
    transition: background-color .12s ease;
}

a.limpar:hover, .btn-secundario:hover { background: var(--cinza-200); }

.btn-alerta {
    background: var(--cor-alerta-bg) !important;
    color: #92400e !important;
    border: 1px solid var(--cor-alerta-borda);
}

/* -------------------------------- Tabelas --------------------------------- */

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--fundo-cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    font-size: 13.5px;
    box-shadow: var(--sombra-cartao);
}

/* Sem "overflow: hidden" na tabela (isso quebraria o cabeçalho sticky) - os cantos
   arredondados são aplicados diretamente nas células de canto. */
thead tr:first-child th:first-child { border-top-left-radius: var(--raio); }
thead tr:first-child th:last-child { border-top-right-radius: var(--raio); }
tbody tr:last-child td:first-child { border-bottom-left-radius: var(--raio); }
tbody tr:last-child td:last-child { border-bottom-right-radius: var(--raio); }

th, td {
    padding: 11px 14px;
    text-align: left;
    border-bottom: 1px solid var(--borda);
    vertical-align: top;
}

th {
    background: var(--cinza-50);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: 0 1px 0 var(--borda);
    letter-spacing: .04em;
    color: var(--texto-sutil);
}

tbody tr:hover { background: #fbfbfe; }
tr:last-child td { border-bottom: none; }

.num { text-align: right; font-variant-numeric: tabular-nums; }

.th-link { color: var(--texto-sutil); text-decoration: none; }
.th-link:hover { color: var(--cor-primaria); }

.desconhecido { color: var(--cinza-400); font-style: italic; }
.vazio { color: var(--texto-sutil); font-size: 14px; padding: 32px; text-align: center; }

/* ----------------------------- Cores de dados ------------------------------ */

.lucro-pos { color: var(--cor-sucesso); font-weight: 700; }
.lucro-neg { color: var(--cor-perigo); font-weight: 700; }

/* ------------------------------- Badges ----------------------------------- */

.badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: var(--raio-pill);
    background: var(--cor-alerta-bg);
    color: #92400e;
    border: 1px solid var(--cor-alerta-borda);
}

.badge-sucesso { background: var(--cor-sucesso-bg); color: #065f46; border: 1px solid var(--cor-sucesso-borda); }
.badge-perigo { background: var(--cor-perigo-bg); color: #991b1b; border: 1px solid var(--cor-perigo-borda); }
.badge-neutro { background: var(--cinza-100); color: var(--cinza-600); border: 1px solid var(--cinza-200); }
.badge-info { background: var(--cor-primaria-bg); color: var(--cor-primaria-hover); border: 1px solid var(--cor-primaria-bg-forte); }

.badge-parado {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: var(--raio-pill);
    background: var(--cor-perigo-bg);
    color: #991b1b;
}

.badge-pack {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--cor-roxo);
}

.badge-abc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    width: 22px;
    height: 22px;
    border-radius: 50%;
}

.badge-abc.A { background: var(--cor-sucesso-bg); color: #166534; }
.badge-abc.B { background: var(--cor-alerta-bg); color: #854d0e; }
.badge-abc.C { background: var(--cor-perigo-bg); color: #991b1b; }

/* --------------------------- Insight de IA -------------------------------- */

.insight-ia {
    background: var(--fundo-cartao);
    border: 1px solid var(--cor-primaria-bg-forte);
    border-left: 3px solid var(--cor-primaria);
    border-radius: var(--raio);
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 13.5px;
    line-height: 1.6;
}

.insight-ia-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.insight-ia-titulo {
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cor-primaria-hover);
}

.insight-ia-data {
    font-size: 11.5px;
    color: var(--cinza-500);
}

.grafico-wrapper {
    background: var(--fundo-cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 16px 18px;
    margin-bottom: 16px;
}

.caixa-observacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--cor-alerta-bg);
    border: 1px solid var(--cor-alerta-borda);
    border-radius: var(--raio);
    padding: 12px 16px;
    margin-bottom: 20px;
}

.caixa-observacao-texto { font-size: 13px; color: #854d0e; }

.caixa-observacao form.filtros {
    background: transparent;
    border: none;
    padding: 0;
}

/* ----------------------------- Notificações ------------------------------- */

.lista-notificacoes {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cartao-notificacao {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--fundo-cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 14px 18px;
}

.cartao-notificacao.nao-lida {
    border-left: 3px solid var(--cor-primaria);
    background: var(--cor-primaria-bg);
}

.cartao-notificacao-icone { font-size: 20px; }

.cartao-notificacao-corpo { flex: 1; }

.cartao-notificacao-titulo {
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cartao-notificacao-mensagem {
    font-size: 13.5px;
    margin-top: 4px;
    color: var(--texto-sutil);
}

.cartao-notificacao-rodape {
    font-size: 11.5px;
    color: var(--cinza-500);
    margin-top: 8px;
}
.badge-abc.S { background: var(--cinza-100); color: var(--cinza-500); }

.estoque-divergente {
    background: var(--cor-perigo-bg);
    color: #991b1b;
    font-weight: 700;
}

/* ------------------------------ Thumbnails --------------------------------- */

.thumb, .thumb-produto {
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--borda);
    flex-shrink: 0;
}

.thumb { width: 32px; height: 32px; margin-right: 8px; vertical-align: middle; }
.thumb-produto { width: 40px; height: 40px; }

.produto-col { display: flex; align-items: center; }

.thumbs-empilhadas { display: inline-flex; margin-right: 8px; }
.thumbs-empilhadas .thumb { margin-right: -14px; margin-left: 0; }
.thumbs-empilhadas .thumb:last-child { margin-right: 8px; }

.link-produto { color: var(--texto); font-weight: 600; text-decoration: none; }
.link-produto:hover { color: var(--cor-primaria); text-decoration: underline; }

/* -------------------------------- Tags ------------------------------------- */

.tags-produto { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--cor-primaria-bg);
    color: var(--cor-primaria-hover);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: var(--raio-pill);
}

.tag-chip button {
    background: none;
    border: none;
    color: var(--cor-primaria-hover);
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    padding: 0 2px;
    line-height: 1;
}

.tag-chip button:hover { color: var(--cor-perigo); }

.add-tag select, .add-tag button {
    font-size: 11px;
    padding: 4px 7px;
    border-radius: var(--raio-pequeno);
    border: 1px solid var(--borda);
    font-family: var(--fonte);
}

.add-tag button { background: var(--fundo-cartao); color: var(--texto); cursor: pointer; font-weight: 600; }
.add-tag button:hover { background: var(--cinza-100); }

.nova-tag { display: flex; gap: 8px; margin-bottom: 20px; align-items: center; }
.nova-tag input { width: 260px; }

/* --------------------------- Linhas expansíveis ----------------------------- */

.linha-expansivel { cursor: pointer; }
.linha-expansivel:hover { background: var(--cinza-50); }

.itens-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--cor-primaria-hover);
}

.linha-detalhe td { background: var(--cinza-50); padding: 0; }

.tabela-itens { width: 100%; border-collapse: collapse; font-size: 13px; box-shadow: none; border: none; border-radius: 0; }
.tabela-itens th {
    background: var(--cinza-100);
    font-size: 10.5px;
    text-transform: uppercase;
    color: var(--texto-sutil);
    padding: 7px 14px 7px 40px;
    text-align: left;
    position: static;
    box-shadow: none;
}
.tabela-itens td { padding: 7px 14px 7px 40px; border-bottom: 1px solid var(--cinza-200); }
.tabela-itens tr:last-child td { border-bottom: none; }

/* ------------------------------- Timeline ----------------------------------- */

.rotulo-comentarios { font-size: 11px; font-weight: 700; color: var(--texto-sutil); margin-top: 10px; }

.timeline-comentarios { position: relative; width: 140px; height: 14px; margin-top: 4px; }
.timeline-linha {
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 2px;
    background: var(--cinza-200);
    transform: translateY(-50%);
}
.timeline-ponto {
    position: absolute;
    top: 50%;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--cor-primaria);
    transform: translate(-50%, -50%);
    cursor: default;
}

/* ------------------------------- Paginação ----------------------------------- */

.paginacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.paginacao a, .paginacao span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: var(--raio-pequeno);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: var(--cinza-700);
    background: var(--fundo-cartao);
    border: 1px solid var(--borda);
}

.paginacao a:hover { background: var(--cinza-100); }

.paginacao .ativa {
    background: var(--cor-primaria);
    color: white;
    border-color: var(--cor-primaria);
}

.paginacao .reticencias, .paginacao .desabilitada {
    border: none;
    background: none;
    color: var(--cinza-400);
}

.paginacao-info {
    text-align: center;
    font-size: 12.5px;
    color: var(--texto-sutil);
    margin-top: 8px;
}

/* --------------------------- Página de produto --------------------------- */

.voltar { font-size: 13px; color: var(--texto-sutil); text-decoration: none; display: inline-block; margin-bottom: 10px; }
.voltar:hover { color: var(--cor-primaria); }

.sku { color: var(--texto-sutil); font-size: 13px; margin-bottom: 20px; }

.form-comentario { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.form-comentario textarea {
    width: 100%;
    min-height: 70px;
    padding: 10px 12px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-pequeno);
    font-size: 14px;
    font-family: var(--fonte);
    resize: vertical;
    max-width: 560px;
}
.form-comentario textarea:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px var(--cor-primaria-bg);
}
.form-comentario button { align-self: flex-start; }

.lista-comentarios { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.comentario {
    background: var(--fundo-cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-cartao);
    padding: 12px 16px;
}
.comentario .texto { font-size: 14px; margin-bottom: 6px; white-space: pre-line; }
.comentario .data { font-size: 12px; color: var(--texto-sutil); }

/* ----------------------------- Lista de anúncios ---------------------------- */

.lista-anuncios { display: flex; flex-direction: column; gap: 10px; max-width: 560px; margin-bottom: 24px; }

.cartao-anuncio {
    display: flex;
    gap: 12px;
    align-items: center;
    background: var(--fundo-cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-cartao);
    padding: 12px 16px;
}

.cartao-anuncio-nome { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.cartao-anuncio-mlb { font-size: 12px; color: var(--texto-sutil); margin-bottom: 6px; }
.cartao-anuncio-valores { display: flex; gap: 16px; font-size: 13px; color: var(--cinza-700); }

/* ------------------------- Linha do tempo de preços ------------------------ */

.linha-tempo-precos {
    position: relative;
    max-width: 560px;
    padding-left: 20px;
    margin-bottom: 24px;
}

.linha-tempo-precos::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--borda);
}

.ponto-preco { position: relative; padding-bottom: 20px; }
.ponto-preco:last-child { padding-bottom: 0; }

.ponto-preco-marcador {
    position: absolute;
    left: -20px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--cor-primaria);
    border: 2px solid var(--fundo-cartao);
    box-shadow: 0 0 0 2px var(--cor-primaria-bg-forte);
}

.ponto-preco-conteudo {
    background: var(--fundo-cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-cartao);
    padding: 12px 16px;
}

.ponto-preco-data { font-size: 12px; color: var(--texto-sutil); font-weight: 600; margin-bottom: 6px; }

.ponto-preco-valores {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--cinza-700);
}

/* -------------------------------- Perguntas ------------------------------- */

.abas-status { display: flex; gap: 6px; margin-bottom: 20px; }
.abas-status a {
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    color: var(--texto-sutil);
    padding: 7px 16px;
    border-radius: var(--raio-pill);
    border: 1px solid var(--borda);
    background: var(--fundo-cartao);
    transition: background-color .12s ease;
}
.abas-status a:hover { background: var(--cinza-100); }
.abas-status a.ativo { background: var(--cor-primaria-bg); color: var(--cor-primaria-hover); border-color: var(--cor-primaria-bg-forte); }

.lista { display: flex; flex-direction: column; gap: 14px; }

.cartao-pergunta {
    background: var(--fundo-cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-cartao);
    padding: 18px 20px;
}
.cartao-pergunta .topo { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-bottom: 10px; }

.item-info-linha { display: flex; gap: 12px; align-items: flex-start; }
.foto-item {
    width: 56px; height: 56px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--borda);
    flex-shrink: 0;
}
.item-info { font-size: 13px; color: var(--texto-sutil); }
.item-info strong { color: var(--texto); }

.link-anuncio { color: var(--texto); font-weight: 600; text-decoration: none; font-size: 13px; }
.link-anuncio:hover { color: var(--cor-primaria); text-decoration: underline; }

.descricao-item { margin-top: 6px; }
.descricao-item summary { cursor: pointer; font-size: 12px; color: var(--cor-primaria); font-weight: 600; }
.descricao-item p { margin: 6px 0 0; font-size: 13px; color: var(--cinza-700); white-space: pre-line; max-width: 560px; }

.texto-pergunta { font-size: 15px; margin-bottom: 12px; }
.meta { font-size: 12px; color: var(--texto-sutil); white-space: nowrap; }

.badge-unanswered { background: var(--cor-alerta-bg); color: #92400e; border: 1px solid var(--cor-alerta-borda); }
.badge-answered { background: var(--cor-sucesso-bg); color: #065f46; border: 1px solid var(--cor-sucesso-borda); }
.badge-ia { background: var(--cor-primaria-bg); color: var(--cor-primaria-hover); margin-left: 6px; }

.sem-sugestao { font-size: 12px; color: var(--texto-sutil); font-style: italic; margin-bottom: 8px; }

form.resposta { display: flex; flex-direction: column; gap: 8px; }
form.resposta textarea {
    width: 100%;
    min-height: 70px;
    padding: 10px 12px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-pequeno);
    font-size: 14px;
    font-family: var(--fonte);
    resize: vertical;
}
form.resposta textarea:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px var(--cor-primaria-bg);
}
form.resposta .acoes { display: flex; justify-content: flex-end; gap: 8px; }

.resposta-dada {
    background: var(--cinza-50);
    border-radius: var(--raio-pequeno);
    padding: 10px 12px;
    font-size: 14px;
    color: var(--texto);
}