/* =============================================================
   O OPERADOR
=============================================================

   A regra estética deste arquivo inteiro: o rascunho não pode parecer
   um aviso do sistema. Ele tem que parecer uma frase que alguém deixou
   escrita para você — discreta, do lado, sem pedir atenção.

   Por isso quase nada aqui tem fundo. O que marca é uma barra fina na
   lateral do campo e uma linha de texto de 11px acima dele. Uma caixa
   colorida em volta do campo de escrever transformaria cada mensagem
   recebida num alarme.
*/

/* -------------------------------------------------------------
   O CAMPO COM RASCUNHO
-------------------------------------------------------------
   A barra é a única coisa que muda no campo. Nem fundo, nem cor de
   texto: o texto já é o que vai ser enviado, e mudá-lo de cor faria
   parecer que ainda não é de verdade. */

#inputChatMessageText.op-campo-rascunho {
    border-left: 2px solid var(--accent) !important;
    padding-left: 10px;
    animation: op-chega .2s ease both;
}

@keyframes op-chega {
    from { opacity: .35; }
    to   { opacity: 1; }
}

/* Primeira tecla: a barra some. A partir dali o texto é seu, e o
   sistema não reivindica mais nada. */
#inputChatMessageText.op-campo-tocado {
    border-left-color: transparent !important;
    transition: border-color .25s ease;
}

/* -------------------------------------------------------------
   A FAIXA
-------------------------------------------------------------
   Uma linha só acima do campo, com dois inquilinos — o rascunho e a
   objeção — e uma gaveta compartilhada embaixo. Ela some inteira
   quando os dois estão vazios, que é a maior parte do tempo. */

.op-tira {
    padding: 7px 12px 0;
    animation: op-abre .2s ease both;
}
.op-tira[hidden] { display: none; }

@keyframes op-abre {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: none; }
}

.op-linha {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 20px;
}

/* Os dois inquilinos não formam caixa: os filhos entram direto na
   linha. Sem isto, cada um viraria um bloco e a linha quebraria em
   duas mesmo sobrando espaço. */
.op-parte { display: contents; }

.op-marca {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--accent-hi);
    white-space: nowrap;
    flex: 0 0 auto;
}
.op-marca i { font-size: 9.5px; }

.op-marca-fraca { color: var(--text-faint); font-weight: 500; }
.op-marca-mao { color: var(--warn); }

/* "sai por Chip 3": aparece só quando você escolheu um número à mão e
   ele NÃO é o que já falava com essa pessoa. É um aviso, não um erro —
   fica no tom de atenção, sem fundo, porque a escolha foi sua. */
.op-marca-envio { color: var(--warn); }

.op-assunto {
    font-size: 11px;
    color: var(--text-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}

/* O selo: uma pílula minúscula que abre a gaveta. Mesmo gesto do selo
   do tempo na Colheita. */
.op-selo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    max-width: 58%;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 500;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.op-selo:hover { color: var(--text); border-color: var(--border-strong); }
.op-selo i { font-size: 9px; opacity: .9; flex: 0 0 auto; }

.op-selo-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.op-selo-aberto {
    color: var(--accent-hi);
    border-color: rgba(var(--accent-rgb), .35);
    background: var(--accent-soft);
}

/* A lâmpada acende: é a única coisa da faixa que muda o que você vai
   escrever agora, e ela aparece raramente — quando aparece, merece ser
   vista sem procurar. */
.op-selo-luz {
    color: var(--accent-hi);
    border-color: rgba(var(--accent-rgb), .4);
    background: var(--accent-soft);
}
.op-selo-quente { color: var(--warn); border-color: rgba(var(--warn-rgb), .4); }

/* O número só aparece quando o texto do selo não cabe — no celular. */
.op-selo-n { display: none; font-variant-numeric: tabular-nums; font-weight: 700; }

.op-apagar {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--text-faint);
    font-size: 11px;
    cursor: pointer;
    border-radius: 6px;
    transition: color .15s ease, background-color .15s ease;
}
.op-apagar:hover { color: var(--danger); background: rgba(255, 255, 255, .05); }

/* -------------------------------------------------------------
   A GAVETA
------------------------------------------------------------- */

.op-gaveta {
    margin-top: 7px;
    max-height: min(260px, 38vh);
    overflow-y: auto;
    animation: op-abre .18s ease both;
}
.op-gaveta[hidden] { display: none; }

.op-citacao {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.5;
    padding-left: 9px;
    border-left: 2px solid var(--border);
    margin-bottom: 6px;
}

.op-motivo {
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.55;
}

/* -------------------------------------------------------------
   QUANDO ELE PARA DE PROPÓSITO
-------------------------------------------------------------
   Preço, desconto, prazo, pagamento: o campo fica vazio por decisão, e
   campo vazio sem explicação parece sistema quebrado. Então este é o
   único caso em que a gaveta já abre sozinha, com fundo de aviso — a
   pessoa precisa LER o motivo antes de concluir que o Ramboo falhou.

   Não virou uma caixa colorida em volta do campo. Isso transformaria
   cada pergunta de preço num alarme, e pergunta de preço é o momento
   mais comum de qualquer conversa de venda. */

.op-tira:has(.op-marca-mao) .op-gaveta {
    padding: 9px 11px;
    border-radius: 11px;
    border: 1px solid rgba(var(--warn-rgb), .28);
    background: rgba(var(--warn-rgb), .07);
}
.op-tira:has(.op-marca-mao) .op-citacao { border-left-color: rgba(var(--warn-rgb), .5); }
.op-tira:has(.op-marca-mao) .op-motivo { margin-top: 5px; color: var(--text); }

/* -------------------------------------------------------------
   A CANETA NA LISTA
-------------------------------------------------------------
   Do tamanho da bolinha de presença e no mesmo canto do olhar: ao lado
   do nome. Diz uma coisa só — aqui tem coisa escrita esperando. */

/* O nome ocupa a linha inteira por padrão, e a pena acabaria encostada
   na hora, do outro lado do item — longe de quem ela qualifica. Aqui o
   nome encolhe para o tamanho do texto e a pena fica colada nele.

   Navegador que não conhece :has ignora a segunda regra e mostra a pena
   junto da hora: desalinhado do ideal, mas inteiro e legível. */
.ci-top:has(.op-caneta) .ci-name { flex: 0 1 auto; }

.op-caneta {
    flex: 0 0 auto;
    margin-left: 5px;
    margin-right: auto;
    font-size: 9px;
    color: var(--accent);
    opacity: .9;
    line-height: 1;
}
.op-caneta-mao { color: var(--warn); }

/* -------------------------------------------------------------
   A GAVETA DA FORMAÇÃO
------------------------------------------------------------- */

.op-resumo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 7px;
    font-size: 12.5px;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.op-resumo b { color: var(--text); font-variant-numeric: tabular-nums; }
.op-fraco { color: var(--text-faint); }

.op-cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
}

.op-cartao {
    padding: 11px 12px;
    border-radius: 12px;
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, .018);
}

.op-cartao-topo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.op-cartao-nome {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.op-etiqueta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 18px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .03em;
    border: 1px solid var(--border-soft);
    color: var(--text-faint);
}
.op-etiqueta i { font-size: 8.5px; }

/* Os três estados se separam pela FORMA antes da cor: vazado,
   meio-preenchido, sólido com selo. Numa tela em preto e branco a
   leitura continua inteira. */
.op-etiqueta-aprendendo { border-style: dashed; }
.op-etiqueta-quase { color: var(--text-dim); border-color: var(--border); }
.op-etiqueta-formado {
    color: var(--bg);
    background: var(--accent);
    border-color: var(--accent);
}
.op-etiqueta-mao {
    color: var(--warn);
    border-color: rgba(var(--warn-rgb), .4);
}

.op-barra {
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    overflow: hidden;
    margin-bottom: 8px;
}

.op-cheio {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
    width: 0;
    transition: width .7s cubic-bezier(.22, .8, .3, 1);
}

.op-n-aprendendo .op-cheio { background: var(--text-faint); }
.op-n-quase .op-cheio { background: var(--warn); }

/* Amostra pequena: preenchimento tracejado. Uma barra sólida com três
   decisões atrás dela é uma mentira bonita, e quem olha uma barra
   cheia conclui "ele já sabe" sem ler o número embaixo. */
.op-pouco .op-cheio {
    background-image: repeating-linear-gradient(
        135deg,
        rgba(0, 0, 0, .38) 0 3px,
        transparent 3px 6px
    );
}

.op-cartao-frase {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.5;
}

.op-cartao-humano {
    border-style: dashed;
    border-color: rgba(var(--warn-rgb), .3);
    background: transparent;
}

/* -------------------------------------------------------------
   O DIÁRIO
------------------------------------------------------------- */

.op-dia {
    display: flex;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border-soft);
}
.op-dia:last-child { border-bottom: 0; }

.op-dia-hora {
    flex: 0 0 auto;
    width: 68px;
    font-size: 11px;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
    padding-top: 1px;
}

.op-dia-texto {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    color: var(--text-dim);
    line-height: 1.55;
}
.op-dia-texto b { color: var(--text); font-weight: 600; }

.op-vazio {
    font-size: 12.5px;
    color: var(--text-faint);
    line-height: 1.6;
    padding: 10px 2px;
}

/* -------------------------------------------------------------
   CELULAR
-------------------------------------------------------------
   O campo é o mesmo — trocar o desenho no celular seria pedir para a
   pessoa aprender duas telas. O que muda: o selo perde a palavra e
   fica só o ícone (a linha não cabe em 360px), a tira quente ocupa a
   largura toda, e os cartões viram um por linha. */

@media (max-width: 780px) {
    .op-tira { padding: 6px 10px 0; }

    /* A palavra sai, o ícone fica. A linha inteira não cabe em 360px
       com o assunto, o selo e o X — e o assunto é o que dá contexto. */
    .op-selo-texto { display: none; }
    .op-selo { padding: 0 7px; justify-content: center; }
    .op-selo-n { display: inline; }

    .op-gaveta { max-height: 34vh; }

    .op-cartoes { grid-template-columns: 1fr; }


    .op-dia-hora { width: 54px; }
}

@media (prefers-reduced-motion: reduce) {
    .op-tira, .op-gaveta, #inputChatMessageText.op-campo-rascunho { animation: none; }
    .op-cheio { transition: none; }
    .op-selo, .op-apagar { transition: none; }
}