/* =============================================================================
   b9-producao.css — a aba PRODUÇÃO e o COPILOTO (29/08/2026)

   TUDO ESCOPADO em #producao-view-container / #copiloto-view-container. O painel
   já teve três donos de CSS brigando pela mesma tela (a de API e Webhooks, com
   86 regras `!important` no design-system vencendo o arquivo que "desenhava") —
   escopar é o que impede a próxima briga.

   ESCALA, não valores soltos: tipo 18/15/13/12/11, espaço em múltiplo de 4,
   raio pelos tokens --r-sm/md/lg, uma curva e uma duração de transição.

   COR: só token de tema, e o verde da marca NUNCA como texto no tema claro
   (#00a884 sobre #f0f2f5 dá 3.03:1, abaixo do mínimo de 4.5:1). Ele entra em
   fundo, borda e ponto — e o texto por cima dele é branco.
   ============================================================================= */

#producao-view-container,
#copiloto-view-container {
    --prod-gap: 16px;
    --prod-superficie: var(--bg-header);
    --prod-t: 0.18s ease;
    /* CORES MEDIDAS, não escolhidas no olho (29/08/2026).
       Cada valor abaixo foi conferido contra o fundo REAL em que ele aparece —
       texto do selo sobre o card com a camada de 16% por cima, texto branco sobre
       o botão — compondo a pilha num canvas. O contraste medido vai no comentário.
       Trocar qualquer um destes exige repetir a medição: o verde da marca
       (#00a884) dá 3.03:1 com branco e reprova, e foi daí que estas cores vieram. */
    --prod-ok: #2ecfa6;        /* 5.64:1 como texto do selo no escuro */
    --prod-erro: #ff8585;      /* 4.93:1 */
    --prod-aviso: #f59e0b;     /* 5.95:1 */
    --prod-ativo: #7dbaff;     /* 5.44:1 */
    /* Fundo de botão/bolha que leva TEXTO BRANCO. Serve nos dois temas: 4.89:1.
       `--accent` (#00a884) daria 3.03:1 — é a regra do GLOBALMEMORY, o verde da
       marca só serve para preenchimento, nunca sob texto branco. */
    --prod-forte: #00806a;
    --prod-contagem: #1d4ed8;  /* 6.6:1 com branco — o selo do menu lateral */
    /* O texto secundário DESTA tela. No escuro, o token do painel serve. No
       claro NÃO: `--text-secondary` (#667781) passa sobre BRANCO (4.65:1) e
       reprova sobre o cinza #f0f2f5 (4.14:1), que é o fundo da timeline e dos
       cards. Era daí que vinham 36 dos 43 achados do tema claro. */
    --prod-fraco: var(--text-secondary);
}

/* Verde e azul como TEXTO reprovam contraste no tema claro; no escuro passam.
   Em vez de um valor por tema espalhado pelas regras, os tokens de TEXTO são
   redefinidos aqui e as regras usam sempre o token. */
html.light-theme #producao-view-container,
html.light-theme #copiloto-view-container {
    /* Mesmos textos, medidos sobre o card CLARO (#f0f2f5) com a camada de 16%. */
    --prod-ok: #025c46;        /* 5.53:1 */
    --prod-ativo: #1e40af;     /* 5.95:1 */
    --prod-erro: #9b1c1f;      /* 5.50:1 */
    --prod-aviso: #8a4d05;     /* 5.13:1 */
    --prod-fraco: #4e5f68;     /* 5.92:1 sobre o cinza, 6.64:1 sobre o branco */
    /* No tema claro `--bg-header` é #f0f2f5 — a MESMA cor de `--bg-main`. Uma
       bolha com esse fundo sobre esse fundo só se distingue pela borda de 1px.
       O branco eleva a superfície e é o que o resto do painel já faz. */
    --prod-superficie: #ffffff;
}

/* ============================ ABA PRODUÇÃO ============================ */

.prod-wrap {
    display: flex;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: var(--bg-main);
}

.prod-coluna {
    width: 360px;
    min-width: 360px;
    border-right: 1px solid var(--border);
    background: var(--bg-sidebar);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.prod-coluna-topo {
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--border);
}

.prod-titulo {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.prod-subtitulo {
    font-size: 12px;
    color: var(--prod-fraco);
    margin: 0 0 12px;
    line-height: 1.5;
}

#prod-filtros {
    display: flex;
    gap: 8px;
}

.prod-filtro {
    flex: 1;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--prod-fraco);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--prod-t);
    font-family: inherit;
}

.prod-filtro:hover { color: var(--text-main); border-color: var(--text-secondary); }

.prod-filtro.ativo {
    background: var(--prod-forte);
    border-color: var(--prod-forte);
    color: #ffffff;
}

#prod-lista {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.prod-item {
    padding: 12px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    background: var(--bg-header);
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color var(--prod-t), transform var(--prod-t);
}

.prod-item:hover { border-color: var(--border); transform: translateX(2px); }
.prod-item.ativo { border-color: var(--accent); }

.prod-item-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.prod-item-tipo {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: capitalize;
}

.prod-item-tipo i { color: var(--prod-fraco); font-size: 12px; }

.prod-item-contato {
    font-size: 13px;
    color: var(--text-main);
    font-weight: 600;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prod-item-passo {
    font-size: 12px;
    color: var(--prod-fraco);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.prod-item-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 11px;
    color: var(--prod-fraco);
}

.prod-badge-instrucao {
    /* branco sobre o âmbar dava 2,15:1 no escuro (medido); tinta + texto na
       própria cor de aviso, o mesmo desenho dos selos de estado */
    background: color-mix(in srgb, var(--prod-aviso) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--prod-aviso) 45%, transparent);
    color: var(--prod-aviso);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
}

/* Selo de estado. Largura automática de propósito: com "Entregando" dentro, um
   selo de largura fixa cortaria o texto (a mesma lição do selo de não lidas). */
.prod-selo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid transparent;
}

.prod-selo-ativo  { background: color-mix(in srgb, var(--prod-ativo) 16%, transparent); color: var(--prod-ativo); border-color: color-mix(in srgb, var(--prod-ativo) 40%, transparent); }
.prod-selo-ok     { background: color-mix(in srgb, var(--prod-ok) 16%, transparent);    color: var(--prod-ok);    border-color: color-mix(in srgb, var(--prod-ok) 40%, transparent); }
.prod-selo-erro   { background: color-mix(in srgb, var(--prod-erro) 16%, transparent);  color: var(--prod-erro);  border-color: color-mix(in srgb, var(--prod-erro) 40%, transparent); }
.prod-selo-espera { background: color-mix(in srgb, var(--prod-fraco) 14%, transparent); color: var(--prod-fraco); border-color: var(--border); }

/* O pulso é o único sinal de "acontecendo agora" que não pede leitura. Só
   `transform`/`opacity`: em lista longa, animar qualquer outra propriedade
   multiplica repaint pelo número de itens (lição do esqueleto de 26/08). */
.prod-pulso {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    animation: prodPulso 1.4s ease-in-out infinite;
}

@keyframes prodPulso {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.72); }
}

@media (prefers-reduced-motion: reduce) {
    .prod-pulso { animation: none; }
}

/* ---- Coluna direita: a linha do tempo ---- */

.prod-detalhe {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.prod-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--prod-superficie);
    flex-wrap: wrap;
}

.prod-cab-esq { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prod-cab-dir { display: flex; align-items: center; gap: 12px; }

.prod-cab-tipo {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: capitalize;
}

.prod-cab-tipo i { color: var(--prod-fraco); }
.prod-cab-tipo b { color: var(--prod-fraco); font-weight: 600; }

.prod-cab-contato { font-size: 12px; color: var(--prod-fraco); }
.prod-cab-tempo { font-size: 12px; color: var(--prod-fraco); display: flex; align-items: center; gap: 6px; }

.prod-btn-fantasma {
    width: 32px;
    height: 32px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--prod-fraco);
    cursor: pointer;
    transition: all var(--prod-t);
}

.prod-btn-fantasma:hover { color: var(--text-main); border-color: var(--text-secondary); }

.prod-pedido {
    padding: 10px 20px;
    font-size: 12px;
    color: var(--prod-fraco);
    background: var(--bg-main);
    border-bottom: 1px solid var(--border);
    word-break: break-word;
}

.prod-pedido b { color: var(--text-main); }

.prod-timeline {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: var(--bg-main);
}

.prod-ev {
    display: flex;
    gap: 12px;
    padding-bottom: 16px;
    position: relative;
}

/* Fio ligando os passos: some no último para não sobrar linha solta no fim. */
.prod-ev::before {
    content: '';
    position: absolute;
    left: 13px;
    top: 30px;
    bottom: 0;
    width: 2px;
    background: var(--border);
}

.prod-ev:last-child::before { display: none; }

.prod-ev-marca {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    background: var(--bg-header);
    border: 1px solid var(--border);
    color: var(--prod-fraco);
    z-index: 1;
}

.prod-ev-ok   .prod-ev-marca { color: var(--prod-ok);    border-color: color-mix(in srgb, var(--prod-ok) 50%, transparent); }
.prod-ev-erro .prod-ev-marca { color: var(--prod-erro);  border-color: color-mix(in srgb, var(--prod-erro) 50%, transparent); }
.prod-ev-aviso .prod-ev-marca { color: var(--prod-aviso); border-color: color-mix(in srgb, var(--prod-aviso) 50%, transparent); }

.prod-ev-corpo { flex: 1; min-width: 0; padding-top: 4px; }

.prod-ev-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.prod-ev-titulo {
    font-size: 13px;
    color: var(--text-main);
    line-height: 1.5;
    word-break: break-word;
}

.prod-ev-erro .prod-ev-titulo { color: var(--prod-erro); font-weight: 600; }

.prod-ev-hora {
    font-size: 11px;
    color: var(--prod-fraco);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.prod-ev-meta {
    font-size: 11px;
    color: var(--prod-fraco);
    margin-top: 4px;
}

.prod-ev-abrir {
    margin-top: 8px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--prod-fraco);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--prod-t);
}

.prod-ev-abrir:hover { color: var(--text-main); border-color: var(--text-secondary); }

/* O conteúdo grande (prompt de 30k, HTML de 100k) rola DENTRO da própria caixa:
   sem isso a página inteira ganharia rolagem horizontal. */
.prod-ev-detalhe {
    margin: 8px 0 0;
    padding: 12px;
    background: var(--bg-header);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-main);
    max-height: 420px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.prod-composer {
    display: flex;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: var(--bg-header);
    align-items: flex-end;
}

.prod-composer textarea {
    flex: 1;
    resize: none;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--bg-main);
    color: var(--text-main);
    padding: 10px 12px;
    font-size: 13px;
    font-family: inherit;
    line-height: 1.5;
    outline: none;
    transition: border-color var(--prod-t);
}

.prod-composer textarea:focus { border-color: var(--accent); }
.prod-composer textarea:disabled { opacity: 0.6; }

.prod-btn-enviar {
    width: 40px;
    height: 40px;
    border-radius: var(--r-md);
    border: none;
    background: var(--prod-forte);
    color: #ffffff;
    cursor: pointer;
    font-size: 14px;
    transition: filter var(--prod-t);
}

.prod-btn-enviar:hover { filter: brightness(1.1); }

.prod-aviso {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    font-size: 12px;
    transition: max-height var(--prod-t), padding var(--prod-t);
}

.prod-aviso.visivel { max-height: 60px; padding: 8px 20px; }
.prod-aviso-ok    { color: var(--prod-ok); }
.prod-aviso-erro  { color: var(--prod-erro); }
.prod-aviso-aviso { color: var(--prod-aviso); }

.prod-vazio {
    text-align: center;
    padding: 40px 24px;
    color: var(--prod-fraco);
}

.prod-vazio i { font-size: 32px; opacity: 0.4; margin-bottom: 12px; display: block; }
.prod-vazio p { font-size: 14px; color: var(--text-main); margin: 0 0 6px; font-weight: 600; }
.prod-vazio span { font-size: 12px; line-height: 1.6; display: block; max-width: 360px; margin: 0 auto; }

.prod-vazio-grande { margin: auto; }
.prod-vazio-grande i { font-size: 44px; }

/* Selo de produção viva no ícone do menu lateral. */
.lateral-menu-item { position: relative; }

.prod-menu-selo {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--prod-contagem);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ============================== CELULAR ============================== */
/* A regra do CRM (só no PC) não vale aqui: acompanhar produção é justamente o
   que se quer fazer longe da mesa. A lista vira topo e a linha do tempo ocupa o
   resto — sem coluna lateral, que em 360px não caberia. */
@media (max-width: 960px) {
    .prod-wrap { flex-direction: column; }
    .prod-coluna {
        width: 100%;
        min-width: 0;
        max-height: 40%;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .prod-timeline { padding: 16px 12px; }
    .prod-cabecalho { padding: 12px 16px; }
    .prod-pedido, .prod-composer { padding-left: 16px; padding-right: 16px; }
}

/* ---------------------------------------------------------------------------
   A TARJA DO FILTRO POR CLIENTE — "vendo só as produções de X".
   Chega pelo botão de engrenagem no cabeçalho da conversa (29/08/2026:
   "uma tela pra cada chat pra ver o progresso").
--------------------------------------------------------------------------- */
.prod-filtro-chat {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--prod-superficie);
    color: var(--prod-fraco);
    font-size: 12px;
}
.prod-filtro-chat b { color: var(--text-main); }
.prod-filtro-chat button {
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--prod-fraco);
    font-size: 11px;
    padding: 2px 8px;
    cursor: pointer;
    font-family: inherit;
}
.prod-filtro-chat button:hover { color: var(--text-main); border-color: var(--text-secondary); }

/* =============================================================================
   LISTA COMPACTA E AGRUPADA POR SITE (31/08/2026, ordem do dono)
   -----------------------------------------------------------------------------
   Duas ordens, na mesma mensagem: *"diminuir o tamanho, deixar mais reduzido,
   o tamanho dos cards"* e *"unifique cada conversa... o criterio tem que ser
   separado por site; se a Raisa tem dois sites, deveria ter dois chats"*.

   Antes: cada TASK era um card de 12px de padding com tipo, contato, passo e
   rodape — a Raisa sozinha ocupava cinco cards e o painel virava rolagem.
   Agora: um cabecalho por SITE e, dentro dele, linhas de uma altura so.

   Estas regras vem DEPOIS das originais no arquivo, entao vencem por ordem de
   cascata sem precisar de !important.
   ========================================================================== */

/* =============================================================================
   A CAIXA DO CLIENTE NA LISTA (02/09/2026, ordem do dono: "organize, tá muito
   bagunçado; mostre o nome, contato e foto da pessoa pra saber quem é")
   -----------------------------------------------------------------------------
   Um grupo = um cliente + um site. Cabeçalho com foto (ou iniciais) e o selo da
   rede no canto — as mesmas cores da lista de conversas —, nome, contato e o
   site; à direita o contador (com ponto vivo quando há produção rodando) e a
   setinha de recolher. As produções vêm embaixo, uma por linha, com ícone do
   tipo, o passo atual e o selo de estado. Escala: 13.5/12/11/10.5, raio 12/8. */
.prod-grupo {
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-header);
    transition: border-color var(--prod-t), box-shadow var(--prod-t);
}
.prod-grupo.aberto { border-color: var(--prod-forte); box-shadow: 0 0 0 2px color-mix(in srgb, var(--prod-forte) 18%, transparent); }

.prod-grupo-topo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 10px 12px;
    cursor: pointer;
    transition: background var(--prod-t);
}
.prod-grupo-topo:hover { background: color-mix(in srgb, var(--prod-forte) 8%, var(--bg-header)); }

.prod-avatar {
    position: relative;
    width: 42px; height: 42px; flex: 0 0 auto;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12.5px; font-weight: 700; color: var(--text-main);
    background: linear-gradient(135deg, color-mix(in srgb, var(--prod-forte) 30%, transparent), rgba(56, 189, 248, .22));
    border: 1px solid var(--border);
}
.prod-avatar img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    border-radius: 50%; object-fit: cover; object-position: center 20%;
}
.prod-avatar-net {
    position: absolute; right: -3px; bottom: -3px;
    width: 17px; height: 17px; border-radius: 50%; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    color: #ffffff; font-size: 9px; border: 2px solid var(--bg-header); background: #607d8b;
}
html.light-theme .prod-avatar-net { border-color: #ffffff; }
.prod-avatar-net.is-whatsapp  { background: #25d366; }
.prod-avatar-net.is-instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.prod-avatar-net.is-messenger { background: #0084ff; }
.prod-avatar-net.is-bootcamp  { background: #f59e0b; }

.prod-grupo-quem { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.prod-grupo-contato {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-main);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prod-grupo-sub {
    font-size: 11px;
    color: var(--prod-fraco);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prod-grupo-site {
    display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; max-width: 100%;
    margin-top: 2px; padding: 2px 8px; border-radius: 999px;
    font-size: 10.5px; font-weight: 600; text-decoration: none;
    /* texto no verde CLARO (--prod-ok): o --prod-forte é fundo de botão e, como
       texto sobre a tinta, dava 2,82:1 no escuro (medido em 02/09/2026) */
    color: var(--prod-ok);
    background: color-mix(in srgb, var(--prod-forte) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--prod-forte) 30%, transparent);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prod-grupo-site i { font-size: 9px; }
.prod-grupo-site-seta { opacity: .7; }
a.prod-grupo-site:hover { background: color-mix(in srgb, var(--prod-forte) 24%, transparent); }
.prod-grupo-site-vazio { color: var(--prod-fraco); background: color-mix(in srgb, var(--prod-fraco) 10%, transparent); border-color: var(--border); }
html.light-theme .prod-grupo-site { color: #025c46; }

.prod-grupo-dir { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }

.prod-grupo-conta {
    display: inline-flex; align-items: center; gap: 6px;
    min-width: 26px; height: 22px; padding: 0 8px; box-sizing: border-box;
    border-radius: 999px;
    font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
    color: var(--text-main);
    background: color-mix(in srgb, var(--prod-fraco) 14%, transparent);
    border: 1px solid var(--border);
}
.prod-grupo-conta.viva { color: var(--prod-ativo); background: color-mix(in srgb, var(--prod-ativo) 14%, transparent); border-color: color-mix(in srgb, var(--prod-ativo) 40%, transparent); }
/* ponto vivo do grupo: mesma animação do pulso da tarefa, classe própria — o
   pulso é o sinal da TAREFA, e é contado como tal no teste */
.prod-vivo { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: prodPulso 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .prod-vivo { animation: none; } }

.prod-grupo-seta {
    width: 26px; height: 26px; border-radius: 8px; border: 1px solid transparent; background: transparent;
    color: var(--prod-fraco); font-size: 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--prod-t), border-color var(--prod-t), color var(--prod-t);
}
.prod-grupo-seta:hover { background: color-mix(in srgb, var(--prod-forte) 12%, transparent); border-color: color-mix(in srgb, var(--prod-forte) 30%, transparent); color: var(--text-main); }

/* --- as produções do grupo --- */
.prod-grupo-itens { border-top: 1px solid var(--border); background: var(--bg-sidebar); padding: 4px 6px 6px; }

.prod-grupo .prod-item {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 8px 8px 8px 8px;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
}
.prod-grupo .prod-item + .prod-item { margin-top: 2px; }
.prod-grupo .prod-item:hover { transform: none; background: color-mix(in srgb, var(--prod-forte) 8%, transparent); border-color: color-mix(in srgb, var(--prod-forte) 22%, transparent); }
.prod-grupo .prod-item.ativo { background: color-mix(in srgb, var(--prod-forte) 14%, transparent); border-color: var(--prod-forte); }

.prod-item-icone-box {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; margin-top: 1px;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--prod-fraco) 12%, transparent); border: 1px solid var(--border);
}
.prod-item-icone { font-size: 11px; color: var(--prod-fraco); }
.prod-grupo .prod-item.ativo .prod-item-icone-box { background: color-mix(in srgb, var(--prod-forte) 18%, transparent); border-color: color-mix(in srgb, var(--prod-forte) 40%, transparent); }
.prod-grupo .prod-item.ativo .prod-item-icone { color: var(--prod-forte); }

.prod-item-corpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.prod-item-linha { display: flex; align-items: center; gap: 8px; min-width: 0; }

.prod-grupo .prod-item-passo {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-main);
    margin: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    -webkit-line-clamp: unset;
    display: block;
}

.prod-grupo .prod-selo { flex: 0 0 auto; font-size: 10px; padding: 2px 8px; }

.prod-grupo .prod-item-rodape {
    margin-top: 0;
    padding-left: 0;
    font-size: 10.5px;
    color: var(--prod-fraco);
    font-variant-numeric: tabular-nums;
}


/* =============================================================================
   DIFF: O QUE ENTROU E O QUE SAIU DO SITE (31/08/2026, ordem do dono)
   -----------------------------------------------------------------------------
   As cores NAO sao o verde/vermelho puros: sobre o fundo escuro do painel eles
   vibram e cansam. Sao o verde da marca e um vermelho suave, os dois medidos
   contra `--bg-sidebar` nos DOIS temas (minimo 4,5:1 no texto).
   ========================================================================== */

.prod-diff {
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    overflow: hidden;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    line-height: 1.55;
}

.prod-diff-resumo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 9px;
    background: var(--bg-header);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--prod-fraco);
}
.prod-diff-resumo i { font-size: 10px; }
.prod-diff-mais-conta  { color: #2ecfa6; font-weight: 600; }
.prod-diff-menos-conta { color: #ff8585; font-weight: 600; }

.prod-diff-bloco { border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.prod-diff-bloco:last-child { border-bottom: 0; }

.prod-diff-linha {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 1px 9px;
    white-space: pre-wrap;
    word-break: break-word;
}

.prod-diff-sinal { flex: 0 0 auto; width: 9px; text-align: center; opacity: .8; font-weight: 700; }
.prod-diff-txt   { flex: 1 1 auto; min-width: 0; }

.prod-diff-mais  { background: color-mix(in srgb, #2ecfa6 13%, transparent); color: #7ee3c4; }
.prod-diff-menos { background: color-mix(in srgb, #ff8585 12%, transparent); color: #ffb0b0; }

.prod-diff-fora {
    margin: 0;
    padding: 6px 9px;
    background: var(--bg-main);
    color: var(--prod-fraco);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow: auto;
}

html.light-theme .prod-diff-mais-conta  { color: #025c46; }
html.light-theme .prod-diff-menos-conta { color: #9b1c1f; }
html.light-theme .prod-diff-mais  { background: color-mix(in srgb, #025c46 10%, transparent); color: #024f3d; }
html.light-theme .prod-diff-menos { background: color-mix(in srgb, #9b1c1f 9%, transparent);  color: #8a1a1d; }

/* O LINK DO SITE no cabeçalho da produção aberta. */
.prod-cab-site {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--prod-forte) 40%, transparent);
    background: color-mix(in srgb, var(--prod-forte) 12%, transparent);
    color: var(--prod-forte);
    font-size: 11px;
    text-decoration: none;
}
.prod-cab-site:hover { background: color-mix(in srgb, var(--prod-forte) 20%, transparent); }
.prod-cab-site i { font-size: 9px; }

/* ------------------------------------------------------------------ RACIOCINIO
   O pensamento do modelo, ao vivo (31/08/2026). Ele nasce ABERTO e precisa se
   distinguir do resto da timeline sem competir com ela: fundo proprio, borda
   lateral e texto em italico — a convencao de "isto e a maquina pensando, nao
   e o que ela entregou". Cor por token, medida nos dois temas. */
.prod-ev-pensa .prod-ev-marca { color: #c4a2ff; }
.prod-ev-pensa .prod-ev-detalhe {
    background: rgba(150, 110, 240, .10);
    border-left: 3px solid rgba(150, 110, 240, .55);
    color: var(--prod-fraco);
    font-style: italic;
    font-family: var(--font-sans, inherit);
    font-size: 12.5px;
    line-height: 1.6;
    max-height: 340px;
}
.prod-ev-pensa .prod-ev-abrir { color: #c4a2ff; }

html.light-theme .prod-ev-pensa .prod-ev-marca,
html.light-theme .prod-ev-pensa .prod-ev-abrir { color: #6b3fb8; }
html.light-theme .prod-ev-pensa .prod-ev-detalhe {
    background: rgba(107, 63, 184, .07);
    border-left-color: rgba(107, 63, 184, .45);
}

/* ---------------------------------------------------- CAPITULO DA CONVERSA
   Uma tarja separando as producoes dentro do chat do site (31/08/2026, ordem
   do dono: "todas as alteracoes em fila em 1 unico chat por cliente"). Ela
   precisa dizer DE QUE PEDIDO sao os passos abaixo, sem competir com eles —
   por isso e uma faixa fina, com o texto do pedido em destaque e o resto
   apagado. */
.prod-capitulo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 22px 0 12px;
    padding: 7px 12px;
    border-radius: var(--r-md, 8px);
    background: color-mix(in srgb, var(--prod-forte) 10%, transparent);
    border-left: 3px solid var(--prod-forte);
    font-size: 12px;
}
.prod-capitulo:first-child { margin-top: 4px; }
.prod-capitulo-texto {
    flex: 1;
    min-width: 0;
    color: var(--text-main);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.prod-capitulo-id {
    color: var(--prod-fraco);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.prod-capitulo-selo { flex: none; }

/* Grupo com a conversa aberta: o cabecalho vira o "chat selecionado". */
.prod-grupo.aberto > .prod-grupo-topo {
    background: color-mix(in srgb, var(--prod-forte) 16%, transparent);
    box-shadow: inset 3px 0 0 var(--prod-forte);
}
.prod-grupo-topo { cursor: pointer; transition: background var(--prod-t, .16s) ease; }
.prod-grupo-topo:hover { background: color-mix(in srgb, var(--text-main) 6%, transparent); }
.prod-grupo-seta {
    padding: 4px;
    margin: -4px;
    border-radius: 4px;
    transition: background var(--prod-t, .16s) ease;
}
.prod-grupo-seta:hover { background: color-mix(in srgb, var(--text-main) 12%, transparent); }

.prod-composer textarea[disabled] { opacity: .6; cursor: not-allowed; }
.prod-btn-enviar[disabled] { opacity: .4; cursor: not-allowed; }

/* =========================================================================
   LABORATÓRIO DE CONVERSAS (Configurações, 02/09/2026) — usa a MESMA régua de
   contraste desta tela. Os tokens `--prod-*` vivem em
   #producao-view-container/#copiloto-view-container, NÃO em :root — dentro do
   modal de Configurações eles não existem, e `var(--prod-forte)` inválido
   deixa o botão TRANSPARENTE [medido em 02/09/2026: 1,12:1, botão fantasma].
   Por isso o bloco base (valores do tema escuro) é declarado aqui de novo, e
   o claro só redefine os textos — sem isso o laboratório caía em
   `--text-secondary` sobre o cinza #f0f2f5 do modal: 4,14:1. Com ele: 5,92:1.
   ========================================================================= */
#view-laboratorio {
    --prod-ok: #2ecfa6;
    --prod-erro: #ff8585;
    --prod-aviso: #f59e0b;
    --prod-ativo: #7dbaff;
    --prod-forte: #00806a;
    --prod-fraco: var(--text-secondary);
}
html.light-theme #view-laboratorio {
    --prod-ok: #025c46;
    --prod-ativo: #1e40af;
    --prod-erro: #9b1c1f;
    --prod-aviso: #8a4d05;
    --prod-fraco: #4e5f68;
}

/* ======================= VISÃO GERAL + polimento (13/09/2026) =======================
   Direção escuro-técnico: card um degrau acima, borda de 1px, sem sombra, filtros em
   pílula com o acento sutil, número tabular. Só tokens; os dois temas. */
.prod-coluna { width: 380px; min-width: 380px; }
.prod-coluna-topo { padding: 18px 16px 12px; }
.prod-titulo { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.prod-titulo i { color: var(--accent-text); font-size: 15px; }
.prod-filtro { border-radius: 999px; font-weight: 500; height: 30px; }
.prod-filtro.ativo { background: var(--accent-subtle); border-color: var(--accent-border); color: var(--accent-text); }
.prod-grupo { background: var(--bg-card); }
.prod-grupo.aberto { box-shadow: none; border-color: var(--accent-border); }
.prod-item { background: var(--bg-card); }
.prod-item:hover { transform: none; background: var(--bg-surface-hover); }
.prod-detalhe { background: var(--bg-main); }

.prod-visao {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 1200px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
}
.prod-visao-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.prod-visao-topo h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); display: flex; align-items: center; gap: 10px; }
.prod-visao-topo p { margin: 4px 0 0; font-size: 13px; color: var(--prod-fraco); }
.prod-aovivo {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    padding: 4px 9px; border-radius: 6px;
    background: var(--accent-subtle); color: var(--accent-text); border: 1px solid var(--accent-border);
}
.prod-aovivo .prod-vivo { color: var(--accent-text); }
.prod-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.prod-kpi {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
    padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.prod-kpi-rotulo { font-size: 12.5px; color: var(--prod-fraco); font-weight: 500; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.prod-kpi-rotulo i { font-size: 12px; opacity: .8; }
.prod-kpi-valor { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1.1; }
.prod-kpi-sub { font-size: 12px; color: var(--prod-fraco); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.prod-kpi--ativo .prod-kpi-valor { color: var(--prod-ativo); }
.prod-kpi--ok .prod-kpi-valor { color: var(--prod-ok); }
.prod-kpi--erro .prod-kpi-valor { color: var(--prod-erro); }
.prod-visao-grade { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
.prod-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.prod-card-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.prod-card-topo h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.prod-card-topo h3 i { color: var(--prod-fraco); font-size: 12px; }
.prod-card-topo span { font-size: 12px; color: var(--prod-fraco); }
.prod-feed { display: flex; flex-direction: column; }
.prod-feed-item {
    display: flex; align-items: center; gap: 10px; padding: 9px 4px; margin: 0 -4px;
    border-top: 1px solid var(--border-subtle); cursor: pointer; border-radius: 8px;
    transition: background var(--prod-t);
}
.prod-feed-item:first-child { border-top: 0; }
.prod-feed-item:hover { background: var(--bg-surface-hover); }
.prod-feed-icone {
    width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-surface-active); color: var(--prod-fraco); font-size: 12px;
}
.prod-feed-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.prod-feed-titulo { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod-feed-sub { font-size: 12px; color: var(--prod-fraco); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod-feed-dir { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: 0 0 auto; }
.prod-feed-hora { font-size: 11px; color: var(--prod-fraco); font-variant-numeric: tabular-nums; }
.prod-tipos { display: flex; flex-direction: column; gap: 8px; }
.prod-tipo { display: grid; grid-template-columns: 110px minmax(0, 1fr) 36px; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-main); }
.prod-tipo i { width: 14px; text-align: center; color: var(--prod-fraco); margin-right: 6px; }
.prod-tipo-barra { height: 8px; border-radius: 999px; background: var(--bg-surface-active); overflow: hidden; }
.prod-tipo-barra span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.prod-tipo b { text-align: right; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.prod-visao-vazio { font-size: 13px; color: var(--prod-fraco); padding: 8px 0 2px; }
.prod-visao-dica { font-size: 12.5px; color: var(--prod-fraco); display: flex; align-items: center; gap: 8px; }
.prod-visao-dica i { color: var(--accent-text); }
@media (max-width: 960px) {
    .prod-coluna { width: 100%; min-width: 0; }
    .prod-visao { padding: 16px 14px 32px; }
    .prod-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .prod-visao-grade { grid-template-columns: 1fr; }
}