/* ======================================================
   IA — Projetos (tn_20)
   Mesmo vocabulário visual do Histórico/Chats (glass + slate/blue).
   ⚠️ .ia-kebab / .ia-pop / .ia-fade são definidos por TELA (o chat tem os
   seus em module/chat/index.css) — por isso vivem aqui também.
   ====================================================== */

/* ---------- Cabeçalho ---------- */
.ia-proj-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    flex-wrap: wrap; gap: 16px; margin-bottom: 20px;
}
.ia-proj-head--detalhe { margin-bottom: 14px; }
.ia-proj-head-text { min-width: 0; flex: 1; }
.ia-proj-title { font-size: 30px; letter-spacing: -.6px; margin-bottom: 6px; }
.ia-proj-lead { font-size: 14.5px; color: #64748B; margin: 0; max-width: 720px; }
.ia-proj-head-acoes { display: flex; flex-wrap: wrap; gap: 8px; }

.ia-proj-voltar {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    background: none; border: none; padding: 0; margin: 0 0 14px;
    font-family: var(--ia-font-ui); font-size: 13px; font-weight: 600; color: #64748B;
    transition: color .15s;
}
/* Serve ao <button> "Todos os projetos" e ao <a> que volta à FICHA (tn_23) —
   por isso o text-decoration explícito. */
.ia-proj-voltar, .ia-proj-voltar:hover { text-decoration: none; }
.ia-proj-voltar:hover { color: #2563EB; }

/* ---------- Botões ---------- */
.ia-proj-btn {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    height: 40px; padding: 0 15px; border-radius: 12px;
    border: 1px solid var(--ia-border-2); background: rgba(255, 255, 255, .85);
    font-family: var(--ia-font-ui); font-size: 13px; font-weight: 600; color: #475569;
    transition: background .15s, border-color .15s, color .15s, filter .15s;
}
.ia-proj-btn i { font-size: 12px; }
.ia-proj-btn:hover { background: #fff; border-color: rgba(148, 163, 184, .55); color: #0F172A; }
.ia-proj-btn:disabled { opacity: .55; cursor: not-allowed; }
.ia-proj-btn--primary {
    border: none; color: #fff;
    background: var(--ia-grad, linear-gradient(135deg, #2563EB, #4F46E5));
    box-shadow: 0 10px 22px -12px rgba(37, 99, 235, .8);
}
/* ⛔ O hover da VARIANTE tem de redeclarar o `background`. `.ia-proj-btn:hover`
   (0,2,0) vence `.ia-proj-btn--primary` (0,1,0): sem a linha abaixo o gradiente
   virava `background: #fff` no hover e, como a variante mantém `color: #fff`,
   o botão ficava BRANCO E VAZIO — texto e ícone sumiam. Vale para toda
   variante nova: quem muda o fundo no estado normal declara o seu hover. */
.ia-proj-btn--primary:hover {
    filter: brightness(1.07);
    color: #fff;
    background: var(--ia-grad, linear-gradient(135deg, #2563EB, #4F46E5));
}
.ia-proj-btn--danger { color: #DC2626; }
.ia-proj-btn--danger:hover { background: #FEF2F2; border-color: rgba(220, 38, 38, .35); color: #DC2626; }

/* Reativar: laranja do ESTADO arquivado (mesmo tom do chip `--arq` e da faixa
   de aviso), não o gradiente do projeto. O primário azul é do caminho normal
   ("Conversar"); aqui o botão pertence à condição em que a tela está, e a cor
   é o que liga a faixa amarela lá em cima ao botão que a resolve.
   ⚠️ Variante que muda o fundo REDECLARA o seu hover — `.ia-proj-btn:hover`
   (0,2,0) vence `.ia-proj-btn--reativar` (0,1,0), e sem a linha abaixo o botão
   ficaria BRANCO com texto branco (o mesmo defeito já documentado no
   `--primary`). Depende da ORDEM: este bloco tem de vir depois do
   `.ia-proj-btn:hover`. */
.ia-proj-btn--reativar {
    border: none; color: #fff;
    background: linear-gradient(135deg, #F59E0B, #D97706);
    box-shadow: 0 10px 22px -12px rgba(217, 119, 6, .85);
}
.ia-proj-btn--reativar:hover {
    filter: brightness(1.06);
    color: #fff;
    background: linear-gradient(135deg, #F59E0B, #D97706);
}

/* ---------- Filtro (segmented) ---------- */
.ia-proj-filtros { margin-bottom: 16px; }
.ia-proj-seg {
    display: inline-flex; gap: 3px; padding: 4px; border-radius: 13px;
    background: rgba(15, 23, 42, .05); border: 1px solid rgba(15, 23, 42, .04);
}
.ia-proj-seg-btn {
    cursor: pointer; padding: 8px 14px; border-radius: 10px; border: none;
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    font-family: var(--ia-font-ui); font-size: 13px; font-weight: 600;
    background: transparent; color: #64748B; transition: background .15s, color .15s, box-shadow .15s;
}
.ia-proj-seg-btn:hover { color: #334155; }
.ia-proj-seg-btn--active { background: #fff; color: #2563EB; box-shadow: 0 4px 12px -6px rgba(15, 23, 42, .35); }
.ia-proj-seg-qtd {
    font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
    background: rgba(15, 23, 42, .07); color: #64748B;
}
.ia-proj-seg-btn--active .ia-proj-seg-qtd { background: rgba(37, 99, 235, .12); color: #2563EB; }

/* ---------- Cards da lista ---------- */
.ia-proj-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.ia-proj-card {
    position: relative; border-radius: 18px; border: 1px solid var(--ia-border);
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px -20px rgba(15, 23, 42, .25);
    transition: box-shadow .15s, transform .15s, border-color .15s;
}
.ia-proj-card:hover { box-shadow: 0 16px 34px -20px rgba(15, 23, 42, .4); border-color: rgba(37, 99, 235, .25); }
.ia-proj-card--arquivado { opacity: .78; }
.ia-proj-card-main {
    width: 100%; text-align: left; cursor: pointer; background: none; border: none;
    display: flex; flex-direction: column; gap: 9px; padding: 18px 18px 14px;
}
.ia-proj-card-topo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ia-proj-card-ico {
    width: 34px; height: 34px; flex-shrink: 0; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(37, 99, 235, .1); color: #2563EB; font-size: 14px;
}
.ia-proj-card-nome {
    font-family: var(--ia-font-display); font-size: 16px; font-weight: 700; color: #0F172A;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 26px;
}
.ia-proj-card-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ia-proj-chips-detalhe { margin-top: 10px; }
.ia-proj-card-desc {
    font-size: 13px; color: #64748B; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ia-proj-card-desc--vazio { color: #CBD5E1; font-style: italic; }
.ia-proj-card-rodape {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 2px; padding-top: 11px; border-top: 1px solid rgba(15, 23, 42, .05);
}
.ia-proj-card-data { font-size: 11.5px; color: #94A3B8; display: inline-flex; align-items: center; gap: 6px; }
.ia-proj-card-abrir {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 700; color: #2563EB;
    opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s;
}
.ia-proj-card:hover .ia-proj-card-abrir { opacity: 1; transform: translateX(0); }

/* ---------- Chips ---------- */
.ia-proj-chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
    background: rgba(15, 23, 42, .06); color: #64748B; white-space: nowrap;
}
.ia-proj-chip--dono    { background: rgba(37, 99, 235, .12); color: #1D4ED8; }
.ia-proj-chip--editor  { background: rgba(22, 163, 74, .12); color: #15803D; }
.ia-proj-chip--leitor  { background: rgba(100, 116, 139, .14); color: #475569; }
.ia-proj-chip--compart { background: rgba(124, 58, 237, .1); color: #6D28D9; }
.ia-proj-chip--arq     { background: rgba(217, 119, 6, .12); color: #B45309; }
.ia-proj-chip--comp    { background: rgba(15, 23, 42, .05); color: #64748B; }
.ia-proj-chip--outro   { background: rgba(124, 58, 237, .1); color: #6D28D9; }

/* ---------- Kebab do card ---------- */
.ia-proj-card-menu { position: absolute; top: 14px; right: 12px; }
.ia-kebab {
    width: 28px; height: 28px; padding: 0; cursor: pointer; border: none; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: #94A3B8; font-size: 13px;
    transition: background .15s, color .15s;
}
.ia-kebab:hover, .ia-kebab--active { background: rgba(15, 23, 42, .08); color: #475569; }
.ia-proj-pop {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; min-width: 168px;
    background: #fff; border: 1px solid var(--ia-border-2); border-radius: 12px;
    box-shadow: 0 16px 36px -12px rgba(15, 23, 42, .35); padding: 5px;
}
.ia-proj-pop-item {
    display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px;
    font-size: 13px; font-weight: 600; color: #475569; text-decoration: none;
}
.ia-proj-pop-item i { width: 14px; text-align: center; font-size: 12px; color: #94A3B8; }
.ia-proj-pop-item:hover { background: #F1F5F9; color: #0F172A; text-decoration: none; }

/* Cor por AÇÃO, não decoração: o cinza único fazia "Arquivar" e "Excluir"
   pesarem igual, e o ícone é o que se lê primeiro num menu curto. As cores
   saem da mesma paleta dos projetos (index.js -> `paleta`).
   ⚠️ Declaradas ANTES de `--danger` e `--on`: mesma especificidade (0,2,1),
   então quem vem depois vence — é o que mantém o vermelho do excluir e o
   azul do item ativo por cima destas. */
.ia-proj-pop-item--editar i   { color: #2563EB; }
.ia-proj-pop-item--aparencia i { color: #7C3AED; }
.ia-proj-pop-item--arquivar i { color: #D97706; }

.ia-proj-pop-item--danger { color: #DC2626; }
.ia-proj-pop-item--danger:hover { background: #FEF2F2; color: #DC2626; }
.ia-proj-pop-item--danger i { color: #DC2626; }

/* Divisória antes do que não tem volta. `border-top` no próprio item
   encostaria nas bordas arredondadas do popover; a linha própria respeita
   o `padding: 5px` dele. */
.ia-proj-pop-sep { height: 1px; margin: 5px 6px; background: rgba(15, 23, 42, .09); }

/* ---------- Menu de ações do cabeçalho do DETALHE ----------
   Reusa `.ia-proj-pop` (que é `position: absolute; right: 0`) — o único
   trabalho daqui é ancorá-lo: sem o `relative`, o popover se posiciona pelo
   `.ia-proj-page` e sai do lugar. */
.ia-proj-head-menu { position: relative; }
.ia-proj-btn--menu { padding: 0 14px; }
.ia-proj-btn--menu i { font-size: 14px; }
.ia-proj-pop--head { top: calc(100% + 6px); min-width: 190px; }
/* Item "Aparência" enquanto o painel está aberto: é o feedback que antes era
   o botão marcado (`.ia-proj-btn--on`). Sem ele, o único sinal de que o
   painel abriu é ele surgir abaixo — que no mobile rola fora da vista. */
.ia-proj-pop-item--on { background: #EFF6FF; color: #1D4ED8; }
.ia-proj-pop-item--on i { color: #1D4ED8; }

.ia-pop-enter-active, .ia-pop-leave-active { transition: opacity .12s ease, transform .12s ease; }
.ia-pop-enter-from, .ia-pop-leave-to { opacity: 0; transform: translateY(-4px); }
.ia-fade-enter-active, .ia-fade-leave-active { transition: opacity .15s ease; }
.ia-fade-enter-from, .ia-fade-leave-to { opacity: 0; }

/* ---------- Faixas de aviso ---------- */
.ia-proj-faixa {
    display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px;
    padding: 12px 14px; border-radius: 13px;
    background: rgba(37, 99, 235, .06); border: 1px solid rgba(37, 99, 235, .16);
    font-size: 12.5px; color: #334155; line-height: 1.5;
}
.ia-proj-faixa i { margin-top: 2px; color: #2563EB; font-size: 12px; }
/* Âmbar = ressalva que muda a confiabilidade do que está na tela. */
.ia-proj-faixa--aviso {
    background: rgba(217, 119, 6, .08); border-color: rgba(217, 119, 6, .25); color: #92400E;
}
.ia-proj-faixa--aviso i { color: #B45309; }

/* ---------- Abas ---------- */
.ia-proj-abas {
    display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 18px;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
}
.ia-proj-aba {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 10px 14px; border: none; background: none; border-bottom: 2px solid transparent;
    font-family: var(--ia-font-ui); font-size: 13.5px; font-weight: 600; color: #64748B;
    transition: color .15s, border-color .15s;
}
.ia-proj-aba i { font-size: 12px; opacity: .8; }
.ia-proj-aba:hover { color: #334155; }
.ia-proj-aba--active { color: #2563EB; border-bottom-color: #2563EB; }
.ia-proj-aba-qtd {
    font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
    background: rgba(15, 23, 42, .07); color: #64748B;
}
.ia-proj-aba--active .ia-proj-aba-qtd { background: rgba(37, 99, 235, .12); color: #2563EB; }

/* ---------- Painéis ---------- */
.ia-proj-painel {
    border-radius: 18px; border: 1px solid var(--ia-border);
    background: rgba(255, 255, 255, .7);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px -20px rgba(15, 23, 42, .25);
    padding: 20px;
}
.ia-proj-painel-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; margin-bottom: 16px;
}
.ia-proj-painel-titulo {
    font-family: var(--ia-font-display); font-size: 17px; font-weight: 700; color: #0F172A; margin: 0 0 4px;
}
.ia-proj-painel-sub { font-size: 12.5px; color: #64748B; margin: 0; max-width: 640px; line-height: 1.5; }
.ia-proj-sub-titulo {
    font-family: var(--ia-font-display); font-size: 14.5px; font-weight: 700; color: #0F172A; margin: 0 0 4px;
}
.ia-proj-vazio-bloco {
    padding: 26px 18px; text-align: center; font-size: 13px; color: #94A3B8;
    border: 1px dashed rgba(148, 163, 184, .4); border-radius: 14px; background: rgba(255, 255, 255, .5);
}

/* ---------- Upload ---------- */
.ia-proj-drop {
    border: 1.5px dashed rgba(148, 163, 184, .5); border-radius: 15px;
    padding: 22px 16px; text-align: center; background: rgba(248, 250, 252, .6);
    transition: border-color .15s, background .15s; margin-bottom: 14px;
}
.ia-proj-drop--on { border-color: #2563EB; background: rgba(37, 99, 235, .06); }
.ia-proj-drop > i { font-size: 22px; color: #94A3B8; }
.ia-proj-drop-input { display: none; }
.ia-proj-drop-txt { margin: 8px 0 3px; font-size: 13.5px; color: #475569; }
.ia-proj-drop-link {
    background: none; border: none; padding: 0; cursor: pointer;
    font-family: var(--ia-font-ui); font-size: 13.5px; font-weight: 700; color: #2563EB;
}
.ia-proj-drop-link:hover { text-decoration: underline; }
.ia-proj-drop-hint { margin: 0; font-size: 11.5px; color: #94A3B8; }

/* ---------- Lista de arquivos ---------- */
.ia-proj-arqs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ia-proj-arq {
    display: flex; align-items: center; gap: 12px; padding: 11px 13px;
    border: 1px solid var(--ia-border-2); border-radius: 13px; background: #fff;
}
.ia-proj-arq--fila { background: rgba(248, 250, 252, .9); }
.ia-proj-arq-ico {
    width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, .05); color: #64748B; font-size: 14px;
}
.ia-proj-arq-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ia-proj-arq-txt strong {
    font-size: 13.5px; font-weight: 600; color: #0F172A;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ia-proj-arq-txt small { font-size: 11.5px; color: #94A3B8; }
/* ⛔ Cores DISTINTAS entre a linha de tamanho, o aviso e o erro: a
   indistinção visual foi metade da causa de um corte de 85% passar batido. */
.ia-proj-arq-aviso { color: #B45309 !important; font-weight: 600; white-space: normal; }
.ia-proj-arq-info  { color: #64748B !important; white-space: normal; }
.ia-proj-arq-erro  { color: #DC2626 !important; font-weight: 600; white-space: normal; }
.ia-proj-arq-acoes { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.ia-proj-arq-btn, .ia-proj-arq-del {
    width: 30px; height: 30px; padding: 0; cursor: pointer; border: none; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: #94A3B8; font-size: 12.5px;
    transition: background .15s, color .15s;
}
.ia-proj-arq-btn:hover { background: rgba(37, 99, 235, .1); color: #2563EB; }
.ia-proj-arq-btn:disabled { opacity: .5; cursor: not-allowed; }
.ia-proj-arq-del:hover { background: #FEF2F2; color: #DC2626; }

/* ---------- Instruções ---------- */
.ia-proj-textarea {
    width: 100%; border-radius: 14px; border: 1px solid var(--ia-border-2);
    background: #fff; padding: 13px 15px; resize: vertical;
    font-family: var(--ia-font-ui); font-size: 13.5px; line-height: 1.6; color: #0F172A;
    outline: none; transition: border-color .15s, box-shadow .15s;
}
.ia-proj-textarea:focus { border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.ia-proj-textarea[readonly] { background: #F8FAFC; color: #475569; }
.ia-proj-instr-rodape {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px;
}
.ia-proj-contador { font-size: 11.5px; color: #94A3B8; }
.ia-proj-contador--cheio { color: #B45309; font-weight: 700; }

/* ---------- Proposta da IA (analisarInstrucoes) ----------
   Painel de COMPARAÇÃO: o texto atual de um lado, a proposta do outro. O campo
   só muda se a pessoa escolher — e mesmo assim ainda não grava. */
.ia-proj-btn--ia { border-color: rgba(79, 70, 229, .35); color: #4F46E5; }
.ia-proj-btn--ia:hover { background: rgba(79, 70, 229, .07); border-color: rgba(79, 70, 229, .5); color: #4338CA; }

.ia-proj-prop {
    margin-top: 16px; padding: 16px; border-radius: 15px;
    border: 1px solid rgba(79, 70, 229, .22); background: rgba(79, 70, 229, .035);
}
.ia-proj-prop--carregando {
    display: flex; align-items: center; gap: 10px;
    font-size: 12.5px; color: #4338CA; font-weight: 600;
}
.ia-proj-prop--carregando i { font-size: 13px; }
.ia-proj-prop-head { margin-bottom: 12px; }
.ia-proj-prop-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ia-proj-prop-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ia-proj-prop-rotulo {
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #94A3B8;
}
.ia-proj-prop-rotulo--nova { color: #4F46E5; }
.ia-proj-prop-txt {
    border: 1px solid var(--ia-border-2); border-radius: 12px; background: #fff;
    padding: 12px 14px; max-height: 320px; overflow-y: auto;
    font-size: 13px; line-height: 1.6; color: #0F172A;
    white-space: pre-wrap; word-break: break-word;
}
.ia-proj-prop-txt--atual { background: #F8FAFC; color: #475569; }
.ia-proj-prop-txt--vazio { color: #94A3B8; font-style: italic; }
.ia-proj-prop-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px;
}
.ia-proj-prop-btns { display: flex; align-items: center; gap: 8px; }

@media (max-width: 760px) {
    .ia-proj-prop-cols { grid-template-columns: 1fr; }
    .ia-proj-prop-foot { flex-direction: column; align-items: stretch; }
}

/* ---------- Memória ---------- */
.ia-proj-estado { display: flex; flex-direction: column; gap: 12px; }
.ia-proj-item { border: 1px solid var(--ia-border-2); border-radius: 15px; background: #fff; padding: 15px 16px; }
.ia-proj-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ia-proj-item-titulo {
    font-family: var(--ia-font-display); font-size: 14.5px; font-weight: 700; color: #0F172A; margin: 0;
}
.ia-proj-item-resumo { font-size: 13px; color: #475569; line-height: 1.55; margin: 7px 0 0; }
.ia-proj-item-linhas { margin: 9px 0 0; padding-left: 18px; }
.ia-proj-item-linhas li { font-size: 12.5px; color: #475569; line-height: 1.6; }
.ia-proj-item-proc {
    display: flex; flex-wrap: wrap; gap: 12px; margin-top: 11px; padding-top: 10px;
    border-top: 1px solid rgba(15, 23, 42, .05);
}
.ia-proj-item-proc-i { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: #94A3B8; }
.ia-proj-item-alerta {
    display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 9px 11px;
    border-radius: 10px; background: rgba(217, 119, 6, .08); border: 1px solid rgba(217, 119, 6, .22);
    font-size: 12px; color: #92400E; line-height: 1.5; font-weight: 600;
}
.ia-proj-item-alerta i { margin-top: 2px; }

/* ---------- Conversas ---------- */
.ia-proj-convs { display: flex; flex-direction: column; gap: 8px; }
.ia-proj-conv {
    display: flex; align-items: center; gap: 6px;
    border: 1px solid var(--ia-border-2); border-radius: 13px; background: #fff; padding-right: 8px;
    transition: border-color .15s, background .15s;
}
.ia-proj-conv:hover { border-color: rgba(37, 99, 235, .3); background: rgba(37, 99, 235, .03); }
.ia-proj-conv-main {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px;
    background: none; border: none; cursor: pointer; text-align: left; padding: 11px 13px;
}
.ia-proj-conv-av { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; }
.ia-proj-conv-body { flex: 1; min-width: 0; }
.ia-proj-conv-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ia-proj-conv-star { color: #F59E0B; font-size: 11px; }
.ia-proj-conv-titulo {
    font-size: 13.5px; font-weight: 600; color: #0F172A;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ia-proj-conv-meta { display: block; font-size: 11.5px; color: #94A3B8; margin-top: 2px; }
.ia-proj-conv-abrir {
    display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
    font-size: 12px; font-weight: 700; color: #2563EB;
    opacity: 0; transition: opacity .15s;
}
.ia-proj-conv:hover .ia-proj-conv-abrir { opacity: 1; }

/* ---------- Compartilhamento ---------- */
.ia-proj-acessos { display: flex; flex-direction: column; gap: 8px; }
.ia-proj-acesso {
    display: flex; align-items: center; gap: 12px; padding: 11px 13px;
    border: 1px solid var(--ia-border-2); border-radius: 13px; background: #fff;
}
.ia-proj-acesso--dono { background: rgba(37, 99, 235, .04); border-color: rgba(37, 99, 235, .18); }
.ia-proj-acesso-av {
    width: 34px; height: 34px; flex-shrink: 0; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, .05); color: #64748B; font-size: 13px;
}
.ia-proj-acesso-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ia-proj-acesso-txt strong { font-size: 13.5px; font-weight: 600; color: #0F172A; }
.ia-proj-acesso-txt small { font-size: 11.5px; color: #94A3B8; }
.ia-proj-acesso-papel, .ia-proj-select {
    height: 34px; border-radius: 10px; border: 1px solid var(--ia-border-2);
    background: #fff; padding: 0 10px; cursor: pointer; outline: none;
    font-family: var(--ia-font-ui); font-size: 12.5px; font-weight: 600; color: #475569;
}
.ia-proj-acesso-papel:focus, .ia-proj-select:focus { border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.ia-proj-transferir { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(15, 23, 42, .07); }
.ia-proj-transferir-linha { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ia-proj-select { height: 40px; min-width: 240px; }

/* ---------- Modal ---------- */
.ia-proj-modal-bg {
    position: fixed; inset: 0; z-index: 1050; display: flex; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, .45); backdrop-filter: blur(3px); padding: 20px;
}
.ia-proj-modal {
    width: 100%; max-width: 560px; max-height: 90vh; overflow: hidden;
    display: flex; flex-direction: column;
    background: #fff; border-radius: 20px; box-shadow: 0 30px 70px -25px rgba(15, 23, 42, .6);
}
.ia-proj-modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 18px 20px 14px; border-bottom: 1px solid rgba(15, 23, 42, .07);
}
.ia-proj-modal-titulo { font-family: var(--ia-font-display); font-size: 17px; font-weight: 700; color: #0F172A; margin: 0; }
.ia-proj-modal-x {
    width: 30px; height: 30px; padding: 0; cursor: pointer; border: none; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: #94A3B8; transition: background .15s, color .15s;
}
.ia-proj-modal-x:hover { background: rgba(15, 23, 42, .06); color: #0F172A; }
.ia-proj-modal-body { padding: 16px 20px; overflow-y: auto; }
.ia-proj-modal-foot {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 14px 20px 18px; border-top: 1px solid rgba(15, 23, 42, .07);
}
.ia-proj-label {
    display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: #64748B; margin: 14px 0 6px;
}
.ia-proj-label:first-child { margin-top: 0; }
.ia-proj-input {
    width: 100%; border-radius: 12px; border: 1px solid var(--ia-border-2); background: #fff;
    padding: 10px 13px; outline: none;
    font-family: var(--ia-font-ui); font-size: 13.5px; color: #0F172A;
    transition: border-color .15s, box-shadow .15s;
}
.ia-proj-input:focus { border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.ia-proj-input--area { resize: vertical; line-height: 1.55; }
.ia-proj-input--curto { max-width: 220px; }
.ia-proj-hint { margin: 5px 0 0; font-size: 11.5px; color: #94A3B8; }
/* Diz onde ficam as instruções, já que elas saíram do modal. */
.ia-proj-hint--depois {
    display: flex; align-items: flex-start; gap: 8px; margin-top: 16px;
    padding: 10px 12px; border-radius: 11px;
    background: rgba(37, 99, 235, .05); border: 1px solid rgba(37, 99, 235, .14);
    color: #475569; line-height: 1.5;
}
.ia-proj-hint--depois i { margin-top: 2px; color: #2563EB; font-size: 10.5px; }

/* ---------- Assistente de criação (entrevista dentro do modal) ----------
   Três passos no MESMO modal: ESCOLHA -> ENTREVISTA -> FORM. O último é sempre
   o formulário de criação, com o botão Criar por clicar: a entrevista propõe,
   quem cria é a pessoa. */
.ia-proj-modal--larga { max-width: 640px; }

.ia-proj-escolha-lead { margin: 0 0 14px; }
.ia-proj-escolha { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ia-proj-opcao {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    padding: 16px 15px; cursor: pointer; text-align: left;
    border: 1px solid var(--ia-border-2); border-radius: 16px; background: #fff;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ia-proj-opcao:hover {
    border-color: rgba(37, 99, 235, .4); transform: translateY(-1px);
    box-shadow: 0 14px 30px -20px rgba(15, 23, 42, .5);
}
.ia-proj-opcao:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.ia-proj-opcao strong { font-size: 14px; font-weight: 700; color: #0F172A; }
.ia-proj-opcao small { font-size: 12px; color: #64748B; line-height: 1.5; }
.ia-proj-opcao-ico {
    width: 34px; height: 34px; border-radius: 11px; margin-bottom: 2px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(37, 99, 235, .1); color: #2563EB; font-size: 13px;
}
.ia-proj-opcao--ia:hover { border-color: rgba(79, 70, 229, .45); }
.ia-proj-opcao--ia .ia-proj-opcao-ico { background: rgba(79, 70, 229, .1); color: #4F46E5; }

.ia-proj-entrev-topo {
    display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; gap: 8px; margin-bottom: 10px;
}
.ia-proj-entrev-passo {
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: #4F46E5;
}
.ia-proj-entrev-nota { font-size: 11.5px; color: #94A3B8; }

.ia-proj-bolhas {
    display: flex; flex-direction: column; gap: 9px;
    min-height: 120px; max-height: 42vh; overflow-y: auto;
    padding: 14px; margin-bottom: 14px;
    border: 1px solid var(--ia-border-2); border-radius: 15px; background: #F8FAFC;
}
.ia-proj-bolha {
    max-width: 85%; padding: 10px 13px; border-radius: 14px;
    font-size: 13px; line-height: 1.55; white-space: pre-wrap; word-break: break-word;
}
.ia-proj-bolha--ia { align-self: flex-start; background: #fff; border: 1px solid var(--ia-border-2); color: #0F172A; }
.ia-proj-bolha--eu { align-self: flex-end; background: #2563EB; color: #fff; }
.ia-proj-bolha--pensando {
    display: inline-flex; align-items: center; gap: 8px;
    color: #4338CA; font-weight: 600; font-size: 12.5px;
}

.ia-proj-entrev-envio { display: flex; gap: 8px; align-items: center; }
.ia-proj-entrev-envio .ia-proj-input { flex: 1; min-width: 0; }
.ia-proj-entrev-saidas {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px;
    padding-top: 14px; border-top: 1px solid rgba(15, 23, 42, .07);
}

.ia-proj-link {
    padding: 0; border: none; background: none; cursor: pointer;
    font: inherit; color: #B45309; font-weight: 700; text-decoration: underline;
}

/* "Pontos que ficaram sem resposta": o antídoto da proposta bonita e vazia.
   ⛔ Lista PERSISTENTE — em toast, o buraco só apareceria semanas depois. */
.ia-proj-aberto {
    margin-top: 14px; padding: 12px 14px; border-radius: 13px;
    background: rgba(217, 119, 6, .08); border: 1px solid rgba(217, 119, 6, .25);
}
.ia-proj-aberto-titulo {
    display: flex; align-items: center; gap: 8px; margin: 0 0 7px;
    font-size: 12px; font-weight: 700; color: #92400E;
}
.ia-proj-aberto-lista { margin: 0; padding-left: 20px; }
.ia-proj-aberto-lista li { font-size: 12.5px; color: #92400E; line-height: 1.6; }
.ia-proj-aberto-nota { margin: 8px 0 0; font-size: 11.5px; color: #B45309; line-height: 1.5; }

@media (max-width: 620px) {
    .ia-proj-escolha { grid-template-columns: 1fr; }
    .ia-proj-entrev-envio { flex-direction: column; align-items: stretch; }
}

/* ---------- Esqueleto / vazio ---------- */
.ia-proj-skel { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.ia-proj-skel-card {
    height: 148px; border-radius: 18px;
    background: linear-gradient(90deg, #EEF2F7 25%, #F8FAFC 37%, #EEF2F7 63%);
    background-size: 400% 100%; animation: ia-proj-shimmer 1.4s ease infinite;
}
@keyframes ia-proj-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------- Loader do detalhe ----------
   Mesmo desenho do preloader global (header.php: anel cinza + topo azul).
   ⚠️ O keyframe é PRÓPRIO: o `ia-spin` do preloader vive num <style> que o
   footer REMOVE do DOM depois de montar — reusar aquele nome daria um
   spinner parado, e parado ele vira "travou". */
.ia-proj-loader {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; min-height: 320px; padding: 40px 20px;
}
.ia-proj-loader-spin {
    width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid rgba(148, 163, 184, .3); border-top-color: #2563EB;
    animation: ia-proj-spin .6s linear infinite;
}
.ia-proj-loader-txt { font-size: 13px; font-weight: 600; color: #64748B; }
@keyframes ia-proj-spin { to { transform: rotate(360deg); } }

.ia-proj-empty {
    text-align: center; padding: 54px 20px;
    border-radius: 18px; border: 1px dashed rgba(148, 163, 184, .4); background: rgba(255, 255, 255, .5);
}
.ia-proj-empty-ico {
    width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(37, 99, 235, .08); color: #2563EB; font-size: 22px;
}
.ia-proj-empty-titulo { margin: 0 0 5px; font-size: 15px; font-weight: 700; color: #334155; }
.ia-proj-empty-txt { margin: 0 auto; max-width: 440px; font-size: 13px; color: #94A3B8; }
.ia-proj-empty-btn {
    display: inline-flex; align-items: center; margin-top: 16px; cursor: pointer;
    padding: 9px 18px; border-radius: 11px; border: none;
    background: var(--ia-grad, linear-gradient(135deg, #2563EB, #1D4ED8)); color: #fff;
    font-family: var(--ia-font-ui); font-size: 13px; font-weight: 700; text-decoration: none;
    box-shadow: 0 10px 22px -12px rgba(37, 99, 235, .8); transition: filter .15s;
}
.ia-proj-empty-btn:hover { filter: brightness(1.07); color: #fff; text-decoration: none; }

/* ======================================================
   Identidade visual do projeto (tn_22)
   `cor` é a base (sempre existe) e a imagem é o override. A capa é um <img>
   — e não um background-image — justamente porque precisa de @error: URL
   assinada de objeto já apagado responde 403 e, sem o fallback, vira ícone
   quebrado.
   ====================================================== */
.ia-proj-card-capa {
    width: 34px; height: 34px; flex-shrink: 0; border-radius: 11px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, .05);
}
.ia-proj-card-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ia-proj-head-ident { display: flex; align-items: flex-start; gap: 14px; }
.ia-proj-head-info { min-width: 0; flex: 1; }
.ia-proj-detalhe-capa {
    width: 56px; height: 56px; flex-shrink: 0; margin-top: 3px;
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 10px 24px -14px rgba(15, 23, 42, .55);
}
.ia-proj-detalhe-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Botão "Aparência" com o painel aberto */
.ia-proj-btn--on { background: #fff; border-color: rgba(37, 99, 235, .45); color: #1D4ED8; }
/* Mesmo motivo do `--primary`: sem o hover próprio, `.ia-proj-btn:hover`
   apagava o azul do estado "painel aberto" justo quando o mouse está nele. */
.ia-proj-btn--on:hover { background: #fff; border-color: rgba(37, 99, 235, .6); color: #1D4ED8; }

.ia-proj-ident {
    position: relative;
    margin-bottom: 14px; padding: 16px 18px; border-radius: 16px;
    border: 1px solid var(--ia-border); background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    display: grid; gap: 16px;
}
/* Absoluto de propósito: o painel é um `grid`, e o X como filho normal
   comeria uma linha inteira do fluxo. O `relative` acima é o que o ancora. */
.ia-proj-ident-fechar {
    position: absolute; top: 10px; right: 10px; z-index: 1;
    width: 28px; height: 28px; padding: 0; cursor: pointer; border: none; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: #94A3B8; font-size: 13px;
    transition: background .15s, color .15s;
}
.ia-proj-ident-fechar:hover { background: rgba(15, 23, 42, .07); color: #0F172A; }
/* Reserva a faixa do X — sem isto, a frase da prévia passa POR BAIXO dele. */
.ia-proj-ident-previa { display: flex; align-items: center; gap: 13px; padding-right: 32px; }
.ia-proj-ident-capa {
    width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px; overflow: hidden;
    box-shadow: 0 8px 20px -14px rgba(15, 23, 42, .6);
}
.ia-proj-ident-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ia-proj-ident-previa-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ia-proj-ident-previa-txt strong { font-size: 13.5px; color: #0F172A; }
.ia-proj-ident-previa-txt small { font-size: 12px; color: #94A3B8; line-height: 1.45; }

.ia-proj-ident-bloco { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ia-proj-ident-rotulo {
    font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: #64748B;
}
.ia-proj-ident-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ia-proj-ident-salvar { margin-top: 2px; }

.ia-proj-cores { display: flex; flex-wrap: wrap; gap: 8px; }
.ia-proj-cor {
    position: relative; width: 30px; height: 30px; padding: 0; cursor: pointer;
    border-radius: 10px; border: 2px solid transparent;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .1) inset;
    transition: transform .12s, border-color .12s;
}
.ia-proj-cor:hover { transform: translateY(-1px); }
.ia-proj-cor--on { border-color: #0F172A; }
.ia-proj-cor--custom,
.ia-proj-cor--limpa {
    display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
    background: #fff; color: #94A3B8; font-size: 11px;
    border: 1px dashed rgba(148, 163, 184, .7); box-shadow: none;
}
.ia-proj-cor--custom input[type="color"] {
    position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%;
    padding: 0; border: none; cursor: pointer;
}
.ia-proj-cor--limpa.ia-proj-cor--on { border-style: solid; border-color: #0F172A; color: #475569; }

@media (max-width: 575.98px) {
    .ia-proj-head-ident { gap: 11px; }
    .ia-proj-detalhe-capa { width: 44px; height: 44px; border-radius: 13px; }
    .ia-proj-title { font-size: 24px; }
    .ia-proj-grid, .ia-proj-skel { grid-template-columns: 1fr; }
    .ia-proj-card-abrir, .ia-proj-conv-abrir { opacity: 1; transform: none; }
    .ia-proj-abas { overflow-x: auto; flex-wrap: nowrap; }
    .ia-proj-painel { padding: 16px 14px; }
    .ia-proj-select { min-width: 0; width: 100%; }
}