/* Comunidade, Conta e Administração — acabamento Linhas. * Esta base entra pelo antes das peles específicas de Perfil, * Feed/Fórum e Chat. As regras são deliberadamente locais: a casca e os * produtos Canal/Robô não mudam aqui. */ .dotti-shell :is(.feed-duplo, .forum-real, .chat, .pf-topo, .pf-colunas, .nt-painel, .admin-suite) { --caa-line: color-mix(in srgb, var(--linha) 88%, transparent); --caa-soft: color-mix(in srgb, var(--sup2) 76%, transparent); --caa-red-soft: color-mix(in srgb, var(--marca) 9%, var(--sup)); } .dotti-shell .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── Feed / rede social ─────────────────────────────────────────────── */ .dotti-shell .feed-duplo { grid-template-columns: minmax(12rem, 14rem) minmax(32rem, 46rem) minmax(13rem, 17rem); gap: clamp(1rem, 2vw, 1.75rem); align-items: start; } .dotti-shell .feed-duplo > :is(.atalhos, .pessoas) { position: sticky; top: 4.5rem; border-radius: 0; border-color: var(--caa-line); background: transparent; box-shadow: none; } .dotti-shell .feed-duplo .feed { gap: 1rem; } .dotti-shell .escrever, .dotti-shell .post { max-width: none; padding: 1.125rem; border-radius: 6px; border-color: var(--caa-line); background: color-mix(in srgb, var(--sup) 93%, transparent); box-shadow: 0 1.25rem 3.5rem -3.25rem color-mix(in srgb, var(--marca) 35%, transparent); } .dotti-shell .post { gap: .8rem; } .dotti-shell .post:hover { border-color: color-mix(in srgb, var(--linha2) 86%, var(--marca)); } .dotti-shell .post .p-topo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: .75rem; } .dotti-shell .post .p-txt { max-width: 68ch; font-size: .9375rem; line-height: 1.62; } .dotti-shell .post .p-acoes { margin-inline: -1.125rem; margin-block-end: -1.125rem; padding: .7rem 1.125rem; border-block-start: 1px solid var(--caa-line); background: color-mix(in srgb, var(--sup2) 50%, transparent); } .dotti-shell .escrever textarea { min-height: 6rem; border-radius: 6px; background: color-mix(in srgb, var(--sup2) 68%, transparent); } /* O CONTADOR DE CARACTERES do compositor e da conversa. Ele mora na barra de * ações, encostado no botão que publica/envia — é lá que o olho já está quando * o texto está pronto. `tabular-nums` porque o número muda a cada tecla: sem * ele a barra inteira treme. Ao chegar perto do teto vira âmbar, o mesmo tom * que o resto da suíte usa para "atenção", nunca vermelho: passar de 3.800 não * é erro, é aviso. */ .dotti-shell .esc-conta { flex: 0 0 auto; color: var(--texto3); font-size: .7rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .dotti-shell .esc-conta.perto { color: var(--amarelo); } .dotti-shell .escrever textarea:focus-visible, .dotti-shell :is(.ch-busca input, .cv-escrever textarea):focus-visible { outline: 2px solid color-mix(in srgb, var(--marca) 70%, white); outline-offset: 2px; border-color: transparent; } .dotti-shell .cmt { padding-block: .7rem; border-block-start: 1px solid var(--caa-line); } /* ── Fórum ──────────────────────────────────────────────────────────── */ .dotti-shell .forum-real { max-width: 76rem; } .dotti-shell .forum-real-barra { gap: .75rem; padding: .75rem; border: 1px solid var(--caa-line); border-radius: 6px 6px 0 0; background: color-mix(in srgb, var(--sup) 92%, transparent); } .dotti-shell .forum-real-lista { border: 1px solid var(--caa-line); border-block-start: 0; border-radius: 0 0 6px 6px; overflow: clip; } .dotti-shell .forum-real-topico { display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto; min-height: 6.25rem; padding: 1rem; gap: 1rem; border-block-end: 1px solid var(--caa-line); background: transparent; } .dotti-shell .forum-real-topico:last-child { border-block-end: 0; } .dotti-shell .forum-real-topico:hover { background: color-mix(in srgb, var(--sup2) 48%, transparent); } .dotti-shell .forum-real-votos { border-inline-end: 1px solid var(--caa-line); padding-inline-end: 1rem; } .dotti-shell .forum-real-titulo { max-width: 78ch; line-height: 1.45; } .dotti-shell .forum-real-meta { margin-block-start: .45rem; } .dotti-shell .forum-real-fixada { color: color-mix(in srgb, var(--marca) 82%, white); } /* ── Chat ───────────────────────────────────────────────────────────── */ .dotti-shell .chat { grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr); gap: 0; border: 1px solid var(--caa-line); border-radius: 6px; overflow: clip; background: color-mix(in srgb, var(--sup) 92%, transparent); } .dotti-shell .ch-esq, .dotti-shell .ch-palco { border: 0; border-radius: 0; background: transparent; } .dotti-shell .ch-esq { border-inline-end: 1px solid var(--caa-line); } /* Cabeçalho e filtro da coluna de conversas. A lista abria direto na busca, * sem dizer o que ela é nem quantas pessoas tem — e a bolinha de não-lidas * existia sem nenhum jeito de agrupar por ela. As abas reusam a gramática das * de Notificações (`.nt-aba`): mesma altura, mesmo sublinhado, mesma pílula * de contagem. */ .dotti-shell .ch-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; min-height: 3.25rem; padding: .9rem .875rem .2rem; } .dotti-shell .ch-cabeca b { font-size: .9rem; } .dotti-shell .ch-cabeca span { color: var(--texto3); font-size: .72rem; } .dotti-shell .ch-abas { display: flex; gap: 1rem; padding-inline: .875rem; border-block-end: 1px solid var(--caa-line); } .dotti-shell .ch-aba { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.6rem; border: 0; border-block-end: 2px solid transparent; background: none; color: var(--texto3); font: inherit; font-size: .74rem; font-weight: 700; cursor: pointer; } .dotti-shell .ch-aba.on { color: var(--texto); border-block-end-color: var(--marca); } .dotti-shell .ch-aba span { min-width: 1.3rem; padding: .1rem .36rem; border-radius: 999px; background: var(--sup3); font-size: .68rem; } .dotti-shell .ch-aba span[hidden] { display: none; } .dotti-shell .ch-busca { padding: .875rem; } .dotti-shell .ch-busca input { min-height: 2.75rem; border-radius: 6px; background: color-mix(in srgb, var(--sup2) 72%, transparent); } .dotti-shell .ch-item { position: relative; min-height: 4.8rem; padding: .8rem .9rem; border-block-end-color: var(--caa-line); } .dotti-shell .ch-item.on { background: var(--caa-red-soft); box-shadow: inset 1px 0 color-mix(in srgb, var(--marca) 76%, white); } .dotti-shell .ch-item:focus-visible, .dotti-shell .nt-item:focus-visible, .dotti-shell .forum-real-abrir:focus-visible { outline: 2px solid color-mix(in srgb, var(--marca) 72%, white); outline-offset: -3px; } .dotti-shell .cv-topo { min-height: 4.5rem; padding-inline: 1.125rem; background: color-mix(in srgb, var(--sup2) 38%, transparent); } .dotti-shell .cv-voltar { display: none; } .dotti-shell .msgs { padding: clamp(1rem, 3vw, 2rem); background-image: radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--marca) 5%, transparent), transparent 30%), linear-gradient(color-mix(in srgb, var(--linha) 30%, transparent) 1px, transparent 1px); background-size: auto, 100% 5rem; } .dotti-shell .bolha { max-width: min(42rem, 82%); border-radius: 6px; border-color: var(--caa-line); box-shadow: none; } .dotti-shell .linha-msg.minha .bolha { background: color-mix(in srgb, var(--marca) 12%, var(--sup2)); border-color: color-mix(in srgb, var(--marca) 36%, var(--linha)); } .dotti-shell .cv-escrever { padding: .875rem; background: color-mix(in srgb, var(--sup2) 44%, transparent); } .dotti-shell .cv-escrever textarea { border-radius: 6px; min-height: 2.75rem; } /* ── Perfil ─────────────────────────────────────────────────────────── */ .dotti-shell .pf-topo, .dotti-shell .pf-abas, .dotti-shell .pf-colunas { max-width: 72rem; } .dotti-shell .pf-topo { border-radius: 6px; border-color: var(--caa-line); } .dotti-shell .pf-capa { height: clamp(9rem, 18vw, 13rem); background-image: radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--marca) 26%, transparent), transparent 35%), linear-gradient(135deg, color-mix(in srgb, var(--sup3) 84%, black), color-mix(in srgb, var(--marca) 10%, var(--sup2))); } .dotti-shell .pf-capa::after { content: ''; display: block; height: 100%; background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--sup) 44%, transparent)); pointer-events: none; } .dotti-shell .pf-cabeca { padding: 1.125rem 1.4rem 1.4rem; } .dotti-shell .pf-cabeca > .com-ponto { margin-block-start: -3.8rem; } .dotti-shell .pf-cabeca .retrato.gr { width: 6.8rem; height: 6.8rem; border-width: 3px; box-shadow: 0 0 0 1px var(--caa-line); } /* UMA COLUNA, porque agora são duas ABAS. O mural e a ficha deixaram de * disputar a largura: cada leitura ocupa a página inteira e a outra fica * `hidden` (ver `perfil.js`). Sem isto o painel aberto continuaria espremido * na faixa de 20rem que a coluna lateral reservava. */ .dotti-shell .pf-colunas { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; } .dotti-shell .pf-lado { position: static; border-radius: 6px; border-color: var(--caa-line); background: transparent; } /* As abas do perfil falam a mesma língua das de Notificações e do Bate-papo: * mesma altura, mesmo sublinhado vermelho, mesma pílula de contagem. */ .dotti-shell .pf-abas { display: flex; gap: 1rem; margin-block: .25rem .9rem; border-block-end: 1px solid var(--caa-line); } .dotti-shell .pf-aba { display: inline-flex; align-items: center; gap: .45rem; min-height: 3rem; border: 0; border-block-end: 2px solid transparent; background: none; color: var(--texto3); font: inherit; font-weight: 700; cursor: pointer; } .dotti-shell .pf-aba.on { color: var(--texto); border-block-end-color: var(--marca); } .dotti-shell .pf-aba span { min-width: 1.35rem; padding: .1rem .38rem; border-radius: 999px; background: var(--sup3); font-size: .7rem; } .dotti-shell .pf-ficha { border-block-start-color: var(--caa-line); } .dotti-shell .pf-item { min-height: 2rem; } .dotti-shell .pf-mural .feed { max-width: none; } .dotti-shell .pf-estatisticas { display: flex; flex-wrap: wrap; gap: 1rem; margin: .7rem 0 0; } .dotti-shell .pf-estatisticas > div { display: flex; align-items: baseline; gap: .35rem; } .dotti-shell .pf-estatisticas dt { color: var(--texto3); font-size: .68rem; } .dotti-shell .pf-estatisticas dd { margin: 0; color: var(--texto); font-size: .76rem; font-weight: 700; } /* ── Notificações ───────────────────────────────────────────────────── */ .dotti-shell .nt-painel { max-width: 66rem; border: 1px solid var(--caa-line); border-radius: 6px; overflow: clip; background: color-mix(in srgb, var(--sup) 92%, transparent); } .dotti-shell .nt-resumo { display: flex; justify-content: space-between; gap: 1rem; align-items: center; min-height: 4.25rem; padding: .9rem 1.125rem; border-block-end: 1px solid var(--caa-line); background: color-mix(in srgb, var(--sup2) 36%, transparent); } .dotti-shell .nt-resumo > div { display: grid; gap: .2rem; } .dotti-shell .nt-resumo span { color: var(--texto3); font-size: .78rem; } .dotti-shell .nt-contagem { white-space: nowrap; } .dotti-shell .nt-abas { display: flex; gap: 1rem; padding-inline: 1.125rem; border-block-end: 1px solid var(--caa-line); } .dotti-shell .nt-aba { display: inline-flex; align-items: center; gap: .45rem; min-height: 3rem; border: 0; border-block-end: 2px solid transparent; background: none; color: var(--texto3); font: inherit; font-weight: 700; cursor: pointer; } .dotti-shell .nt-aba.on { color: var(--texto); border-block-end-color: var(--marca); } .dotti-shell .nt-aba span { min-width: 1.35rem; padding: .1rem .38rem; border-radius: 999px; background: var(--sup3); font-size: .7rem; } .dotti-shell .nt-lista { border: 0; border-radius: 0; } .dotti-shell .nt-item { position: relative; min-height: 5.35rem; padding: 1rem 1.125rem; border-block-end-color: var(--caa-line); } .dotti-shell .nt-item.nova { box-shadow: inset 1px 0 color-mix(in srgb, var(--marca) 76%, white); background: var(--caa-red-soft); } .dotti-shell .nt-item.nova .nt-diz::after { content: ''; display: inline-block; width: .38rem; height: .38rem; margin-inline-start: .5rem; border-radius: 999px; background: var(--marca); vertical-align: .14em; } .dotti-shell .nt-ic { position: relative; border: 1px solid var(--caa-line); background: var(--sup2); } .dotti-shell .nt-ic::before { font-size: .72rem; font-weight: 800; color: var(--texto2); } .dotti-shell .nt-ic.tipo-resposta::before { content: 'R'; } .dotti-shell .nt-ic.tipo-curtida::before { content: 'C'; } .dotti-shell .nt-ic.tipo-acesso::before { content: 'A'; } .dotti-shell .nt-ic.tipo-fila::before { content: 'F'; } .dotti-shell .nt-ic.tipo-geral::before { content: 'N'; } .dotti-shell .nt-diz { font-weight: 700; } .dotti-shell .nt-det { margin-block-start: .28rem; max-width: 64ch; line-height: 1.45; } .dotti-shell .nt-vazio { display: grid; gap: .35rem; place-items: center; min-height: 13rem; padding: 2rem; text-align: center; } .dotti-shell .nt-vazio span { color: var(--texto3); } /* ── Chaves e conexões do Robô ─────────────────────────────────────── */ .dotti-shell .robo-raiz .rl-config-section-heading { margin-block: 1.8rem .75rem; } .dotti-shell .robo-raiz .rl-config-section-heading h2 { font-size: 1.1rem; } .dotti-shell .robo-raiz .rl-provider-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } .dotti-shell .robo-raiz .chave-card { position: relative; min-width: 0; padding: 1rem; border: 1px solid var(--caa-line); border-inline-start-width: 1px; border-radius: 6px; background: color-mix(in srgb, var(--sup) 92%, transparent); box-shadow: none; } .dotti-shell .robo-raiz .chave-card:is(.ok, .falta, .ruim, .vazia, .guardada) { border-inline-start-color: var(--caa-line); } .dotti-shell .robo-raiz .chave-card.ok { background: linear-gradient(135deg, color-mix(in srgb, var(--ok) 5%, var(--sup)), var(--sup) 42%); } .dotti-shell .robo-raiz .chave-card.falta { background: linear-gradient(135deg, color-mix(in srgb, var(--amarelo) 5%, var(--sup)), var(--sup) 42%); } .dotti-shell .robo-raiz .ch-topo { align-items: center; } .dotti-shell .robo-raiz .ch-nome { font-size: 1rem; } .dotti-shell .robo-raiz .rl-provider-logo { width: 2.5rem; height: 2.5rem; border-radius: 6px; background-color: var(--sup2); } .dotti-shell .robo-raiz .chaves-linhas { margin-block-start: .8rem; padding-block-start: .75rem; border-block-start: 1px solid var(--caa-line); } .dotti-shell .robo-raiz .chave-linha { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .dotti-shell .robo-raiz .abrir-chave { min-height: 2.3rem; } .dotti-shell .robo-raiz .conexao-heygen { border-radius: 6px; border-color: var(--caa-line); } /* ── Supervisão do Robô: os quatro números viraram recorte ───────────── */ /* SEM O PREFIXO `.dotti-shell` DE PROPÓSITO, e isto é a parte que importa. * O indicador virou `