/* ============================================================ A casca no modelo de painel, com as medidas tiradas do painel de referência: barra de 64px no topo de ponta a ponta, moldura escura com 8px de margem, menu de 260px, conteúdo num painel de canto 24px. Fundos e tipografia iguais; a cor da marca é o marrom. Nada do app é editado: isto entra por cima das folhas dele. ============================================================ */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/shell/dm-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/shell/dm-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --shell-dark: #2B1E16; /* no lugar do azul-marinho da referência */ --shell-side: #EAEAEC; --shell-canvas: #F5F5F6; --shell-ink: #18181A; --shell-mute: #58585E; --font: "DM Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; } #view-lab { transform: none; transition: none; } #sheet-profile .new-actions { display: none; } /* ── Menu ──────────────────────────────────────────────────────────────────── Linha: 36px de altura, 8px 12px por dentro, canto 12px, 16px entre ícone e nome, 2px entre linhas, texto 14px em peso 500, ícone de 20px em cinza. */ #lab-menu ul { display: flex; flex-direction: column; margin: 0; } #lab-menu li { margin-bottom: 2px; } #lab-menu .row { width: 100%; min-height: 36px; gap: 16px; padding: 8px 12px; border-radius: 12px; box-shadow: none; } #lab-menu .row__title { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0; color: var(--shell-ink); } #lab-menu .lab-icon { flex: none; display: grid; place-items: center; width: 20px; height: 20px; color: var(--shell-mute); } #lab-menu .lab-icon svg { width: 20px; height: 20px; stroke-width: 1.8; } #lab-menu .row[aria-current="true"] { background: #FFF; box-shadow: none; } #lab-menu .row[aria-current="true"] .lab-icon { color: var(--shell-ink); } /* Sub-itens da área aberta: recuados 37px, mesma altura e canto, pastilha branca no atual. */ #lab-menu .lab-sub { display: flex; flex-direction: column; margin: 2px 0 0; } #lab-menu .lab-sub[hidden] { display: none; } #lab-menu .lab-sub__row { width: calc(100% - 37px); min-height: 36px; margin-left: 37px; padding: 8px 12px; border-radius: 12px; text-align: left; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--shell-ink); transition: background var(--t-fast) var(--ease-out); } #lab-menu .lab-sub__row[aria-current="true"] { background: #FFF; } /* Título de seção do menu: 12px em peso 600, cinza, com 12px de respiro em cima. */ #sheet-profile .sheet__section { display: flex; align-items: center; margin: 12px 0 0; padding: 8px 12px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--shell-mute); } #sheet-profile .sheet__section::after { content: none; } /* A lista de conteúdos segue a mesma linha do menu. */ #chat-list li { margin-bottom: 2px; } #chat-list .row { min-height: 36px; padding: 8px 12px; border-radius: 12px; box-shadow: none; } #chat-list .row__title { font-size: 14px; line-height: 20px; font-weight: 400; color: var(--shell-ink); } #chat-list .row[aria-current="true"] { background: #FFF; } #chat-list .row[aria-current="true"] .row__title { font-weight: 500; } @media (hover: hover) and (pointer: fine) { #lab-menu .row:not([aria-current="true"]):hover, #lab-menu .lab-sub__row:not([aria-current="true"]):hover, #chat-list .row:not([aria-current="true"]):hover { background: rgba(255, 255, 255, .5); } } .lab-new { display: none; } @media (min-width: 900px) { :root { --sidebar-w: 260px; --topbar-h: 64px; } /* Barra no topo de ponta a ponta; menu e conteúdo dentro da moldura escura, com 8px de cada lado. */ .app { grid-template-areas: "topbar topbar" "side stage"; padding: 0 8px; background: var(--shell-dark); } .app[data-editando="true"] { padding: 0; } .app .topbar { padding-inline: 12px; border-bottom: 0; background: var(--shell-dark); color: #FFF; -webkit-backdrop-filter: none; backdrop-filter: none; } .app .topbar .topbar__left { display: flex; align-items: center; gap: 12px; } .app .topbar .orb { width: 32px; height: 32px; color: #F8F9FA; background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); } .app .topbar .orb:hover { background: rgba(255, 255, 255, .10); } .app .wordmark { display: block; color: #FFF; font-size: 16px; font-weight: 600; letter-spacing: -.01em; cursor: pointer; } /* O seletor mantém a largura: 76px por aba. */ .app .segments { width: calc(var(--n, 2) * 76px + 6px); height: 36px; background: rgba(255, 255, 255, .12); box-shadow: none; transition: width var(--t-base) var(--ease-out); } .app .segment { color: rgba(255, 255, 255, .62); } .app .segment:hover { color: #FFF; } .app .segment[aria-selected="true"] { color: var(--shell-dark); } /* Menu: 260px, canto superior de 24px, 12px de respiro lateral. */ .app #sheet-profile { border-right: 0; border-radius: 24px 0 0 0; background: var(--shell-side); padding-bottom: 12px; } .app #sheet-profile .sheet__head { padding: 12px 12px 4px; } .app #sheet-profile .sheet__body { padding: 0 12px; } .app #sheet-profile .profile { min-height: 44px; padding: 6px 12px; border-radius: 12px; background: transparent; box-shadow: none; } .app #sheet-profile .profile:hover { background: rgba(255, 255, 255, .5); } /* Conteúdo: painel claro com o outro canto de 24px. */ .app .stage { --bg: var(--shell-canvas); border-radius: 0 24px 0 0; overflow: hidden; background: var(--shell-canvas); } .app[data-side="closed"] .stage { border-radius: 24px 24px 0 0; } .app[data-editando="true"] .stage { border-radius: 0; } .app .msg--me .msg__body { background: #E9E9EB; } /* Na tela da conta a barra do topo continua no lugar. */ .app[data-account="true"] { grid-template-rows: auto minmax(0, 1fr); } .app[data-account="true"] .topbar { display: grid; } } /* Sem o botão de abrir e fechar: no computador o menu fica sempre aberto, mesmo que este navegador tenha guardado o estado "fechado" de antes. */ @media (min-width: 900px) { .app #btn-menu { display: none; } .app[data-side="closed"]:not([data-editando="true"]) { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); } .app[data-side="closed"]:not([data-editando="true"]) #sheet-profile { opacity: 1; pointer-events: auto; } .app[data-side="closed"]:not([data-editando="true"]) .stage { border-radius: 0 24px 0 0; } .app .topbar .topbar__left { padding-left: 8px; } } /* A linha-guia dos sub-itens: desce do ícone da área aberta até o último sub-item. */ #lab-menu .lab-sub { position: relative; margin: 2px 0 4px; gap: 2px; } #lab-menu .lab-sub::before { content: ""; position: absolute; left: 22px; top: 0; bottom: 0; width: 1px; background: rgba(24, 24, 26, .16); } #lab-menu .lab-sub li { margin: 0; } /* Os sub-itens abrem descendo e fecham subindo. */ #lab-menu .lab-sub { overflow: hidden; max-height: 0; opacity: 0; margin-top: 0; margin-bottom: 0; transition: max-height 320ms var(--ease-out), opacity 220ms var(--ease-out), margin 320ms var(--ease-out); } #lab-menu .lab-sub[data-open="true"] { max-height: var(--h, 400px); opacity: 1; margin-top: 2px; margin-bottom: 4px; } #lab-menu .lab-sub__row { transform: translateY(-4px); transition: transform 320ms var(--ease-out), background var(--t-fast) var(--ease-out); } #lab-menu .lab-sub[data-open="true"] .lab-sub__row { transform: none; } /* Perfil: fora do menu, num ícone da barra do topo, à esquerda do de aulas. */ #lab-profile { display: none; } @media (min-width: 900px) { .app #sheet-profile .sheet__head { display: none; } .app #sheet-profile .sheet__body { padding-top: 12px; } .app .topbar #lab-profile { display: grid; position: absolute; top: 50%; right: 52px; margin-top: -16px; } } /* Com uma página do menu na tela, a conversa aberta por trás não fica marcada na lista: só um item selecionado por vez. */ .app:has(#view-lab[data-active="true"]) #chat-list .row[aria-current="true"] { background: none; } .app:has(#view-lab[data-active="true"]) #chat-list .row[aria-current="true"] .row__title { font-weight: 400; } /* Sem pulo no menu: as linhas não encolhem ao clicar; só o fundo muda. */ #lab-menu .row, #lab-menu .row:active, #chat-list .row, #chat-list .row:active, .app .topbar .orb:active, .app .segment:active { transform: none; } #lab-menu .lab-sub__row, #lab-menu .lab-sub[data-open="true"] .lab-sub__row { transform: none; } /* A página de blocos de gravação foi removida: sem a aba dela e sem o aviso e os cartões que levavam até lá, no fim do roteiro. */ .recording-ready, .chat-previews, #view-blog { display: none !important; } /* O perfil fica no canto direito da barra; o ícone de aulas vem à esquerda dele. */ @media (min-width: 900px) { .app .topbar #lab-profile { right: 12px; } .app .topbar #btn-lessons { margin-right: 40px; } } /* Etapas do raciocínio enquanto o roteiro é escrito, e o aviso de pontos. */ #lab-phase { position: absolute; left: 50%; bottom: 148px; z-index: 5; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; max-width: calc(100% - 48px); padding: 8px 14px; border-radius: 12px; background: #FFF; border: 1px solid rgba(0, 0, 0, .1); box-shadow: 0 8px 24px rgba(24, 24, 26, .08); font-size: 13px; line-height: 20px; font-weight: 500; color: var(--shell-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #lab-phase[hidden] { display: none; } #lab-phase::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #5C4433; animation: lab-pulse 1s ease-in-out infinite; } @keyframes lab-pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } } .lab-notice { position: fixed; left: 50%; bottom: 28px; z-index: 200; transform: translateX(-50%); padding: 10px 16px; border-radius: 12px; background: #18181A; color: #FFF; font-size: 14px; line-height: 20px; font-weight: 500; box-shadow: 0 12px 32px rgba(0, 0, 0, .24); } /* ── Resumo das escolhas no topo da conversa ───────────────────────────────────── No desenho do cartão de plano em destaque da referência, numa versão fina: fundo escuro em degradê com um reflexo claro, cabeçalho num painel mais escuro com o selo, as escolhas em lista com ✓ (texto branco, sublinhado pontilhado) e uma barra translúcida no rodapé com o que mais a IA usa. Marrom no lugar do roxo. */ #lab-brief { flex: none; width: min(1100px, calc(100% - 48px)); padding: 6px; border-radius: 16px; color: #FFF; overflow: hidden; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .16) 52%, rgba(255, 255, 255, 0) 66%), linear-gradient(120deg, #2B1E16 0%, #5C4433 46%, #7C5E49 62%, #33241B 100%); } #lab-brief[hidden] { display: none; } #view-chat[data-empty="true"] #lab-brief { display: none; } .lab-brief__head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px 10px 16px; border-radius: 12px; background: rgba(22, 17, 13, .5); color: #FFF; text-align: left; cursor: pointer; } .lab-brief__title { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; } .lab-brief__title b { font-size: 16px; line-height: 24px; font-weight: 500; color: #FFF; } .lab-brief__title span { font-size: 12px; line-height: 16px; color: rgba(255, 255, 255, .78); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lab-brief__badge { flex: none; padding: 2px 8px; border-radius: 6px; background: #EBD9B4; color: #2B1E16; font-size: 12px; line-height: 16px; font-weight: 700; } .lab-brief__toggle { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #FFF; background: rgba(255, 255, 255, .12); } #lab-brief[data-open="true"] .lab-brief__toggle svg { transform: rotate(180deg); } .lab-brief__body { display: none; } #lab-brief[data-open="true"] .lab-brief__body { display: block; } .lab-brief__checks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 20px; margin: 0; padding: 14px 16px; list-style: none; } .lab-brief__checks li { display: flex; align-items: flex-start; gap: 10px; min-width: 0; font-size: 14px; line-height: 20px; color: #FFF; } .lab-brief__checks li[data-wide] { grid-column: span 2; } .lab-brief__checks svg { flex: none; margin-top: 3px; color: #EBD9B4; } .lab-brief__checks li > span { min-width: 0; text-decoration: underline dotted rgba(255, 255, 255, .45); text-underline-offset: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .lab-brief__checks em { font-style: normal; color: rgba(255, 255, 255, .72); margin-right: 6px; } .lab-brief__uses { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px 12px 8px 16px; border-radius: 12px; background: rgba(255, 255, 255, .12); } .lab-brief__uses span { margin-right: auto; font-size: 12px; line-height: 16px; font-weight: 600; color: rgba(255, 255, 255, .9); } .lab-brief__uses i { padding: 3px 8px; border-radius: 6px; background: rgba(22, 17, 13, .45); font-style: normal; font-size: 12px; line-height: 16px; font-weight: 500; color: #FFF; } @media (max-width: 900px) { .lab-brief__checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lab-brief__title span { display: none; } } @media (max-width: 560px) { .lab-brief__checks { grid-template-columns: minmax(0, 1fr); } .lab-brief__checks li[data-wide] { grid-column: auto; } } /* O resumo rola junto com a conversa (não fica fixo no topo). */ #lab-brief { position: absolute; top: 16px; left: 0; right: 0; z-index: 2; margin: 0 auto; will-change: transform; } #view-chat > #thread { padding-top: calc(32px + var(--brief-h, 0px)); } /* Brilho metálico do cartão em destaque da referência, em marrom: base escura, uma faixa clara em diagonal que atravessa o cartão, um canto quase preto embaixo à esquerda e um reflexo no alto. */ #lab-brief { background: radial-gradient(90% 160% at 0% 110%, rgba(8, 5, 3, .92) 0%, rgba(8, 5, 3, 0) 58%), radial-gradient(60% 120% at 100% 110%, rgba(8, 5, 3, .7) 0%, rgba(8, 5, 3, 0) 60%), linear-gradient(118deg, rgba(255, 255, 255, 0) 34%, rgba(214, 178, 146, .42) 47%, rgba(255, 238, 220, .5) 53%, rgba(214, 178, 146, .3) 59%, rgba(255, 255, 255, 0) 72%), linear-gradient(160deg, #3D2B20 0%, #6B4E3A 42%, #4A3528 70%, #241811 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); } .lab-brief__head { background: rgba(18, 12, 8, .58); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .lab-brief__uses { background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* As escolhas curtas numa linha de colunas iguais; os textos longos numa segunda linha, lado a lado. Uma linha por item. */ .lab-brief__checks { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); padding: 12px 16px 4px; } .lab-brief__checks--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 4px; } .lab-brief__checks:last-of-type { padding-bottom: 12px; } .lab-brief__checks li { align-items: center; } .lab-brief__checks svg { margin-top: 0; } .lab-brief__checks li > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 560px) { .lab-brief__checks--wide { grid-template-columns: minmax(0, 1fr); } } /* Sem o brilho: fundo escuro liso, para o texto branco ter contraste em todo o cartão. Cada escolha vira um par organizado: rótulo pequeno em cima, valor embaixo, com o ✓ ao lado; colunas separadas por um fio discreto. */ #lab-brief { background: linear-gradient(180deg, #33241B 0%, #241811 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); } .lab-brief__head { background: rgba(0, 0, 0, .28); -webkit-backdrop-filter: none; backdrop-filter: none; } .lab-brief__uses { background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: none; backdrop-filter: none; } .lab-brief__uses i { background: rgba(0, 0, 0, .32); } .lab-brief__checks { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; padding: 14px 6px 6px; } .lab-brief__checks--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 6px 6px 14px; } .lab-brief__checks:only-of-type { padding-bottom: 14px; } .lab-brief__checks li { align-items: flex-start; gap: 10px; padding: 2px 14px; border-left: 1px solid rgba(255, 255, 255, .12); } .lab-brief__checks li:first-child { border-left: 0; } .lab-brief__checks svg { margin-top: 3px; color: #EBD9B4; } .lab-brief__checks li > span { display: flex; flex-direction: column; white-space: normal; text-decoration: none; overflow: visible; font-size: 14px; line-height: 20px; font-weight: 500; color: #FFF; } .lab-brief__checks em { margin: 0 0 1px; font-size: 12px; line-height: 16px; font-weight: 500; color: rgba(255, 255, 255, .66); } .lab-brief__checks--wide li > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .lab-brief__checks--wide em { display: block; } .lab-brief__title span { color: rgba(255, 255, 255, .7); } @media (max-width: 560px) { .lab-brief__checks li { border-left: 0; padding-block: 6px; } } /* Cartão branco, com o marrom metálico só no que importa: a faixa do título e os ✓. O texto das escolhas fica escuro sobre branco; o rodapé, em cinza claro. */ #lab-brief { background: #FFF; color: var(--shell-ink); border: 1px solid rgba(0, 0, 0, .1); box-shadow: none; } .lab-brief__head { color: #FFF; background: linear-gradient(112deg, rgba(255, 255, 255, 0) 52%, rgba(226, 190, 158, .34) 68%, rgba(255, 240, 224, .26) 74%, rgba(255, 255, 255, 0) 88%), linear-gradient(120deg, #2B1E16 0%, #4A3528 55%, #6B4E3A 78%, #33241B 100%); } .lab-brief__title b { color: #FFF; } .lab-brief__title span { color: rgba(255, 255, 255, .78); } .lab-brief__toggle { background: rgba(255, 255, 255, .14); color: #FFF; } .lab-brief__checks li { border-left-color: rgba(0, 0, 0, .1); } .lab-brief__checks li > span { color: var(--shell-ink); } .lab-brief__checks em { color: var(--shell-mute); } .lab-brief__checks svg { color: #5C4433; } .lab-brief__uses { background: #F5F5F6; } .lab-brief__uses span { color: var(--shell-mute); } .lab-brief__uses i { background: #FFF; color: var(--shell-ink); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); } .lab-notice--bad { background: #8A1F1F; } /* Linha com o caminho da página do conteúdo, logo abaixo da última mensagem. */ #lab-path { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(1100px, calc(100% - 48px)); margin: 0 auto; padding: 12px 16px; border-radius: 12px; background: #FFF; border: 1px solid rgba(0, 0, 0, .1); color: var(--shell-ink); text-decoration: none; will-change: transform; } #lab-path[hidden] { display: none; } #lab-path:hover { border-color: rgba(0, 0, 0, .24); } .lab-path__crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; line-height: 20px; color: var(--shell-mute); } .lab-path__crumbs i { font-style: normal; color: rgba(0, 0, 0, .3); } .lab-path__crumbs b { min-width: 0; font-weight: 600; color: var(--shell-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lab-path__go { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 20px; font-weight: 600; color: #5C4433; } /* Espaço para a linha no fim da conversa. */ #view-chat[data-path="on"] > #thread > :last-child { margin-bottom: 72px; } @media (max-width: 640px) { .lab-path__crumbs span, .lab-path__crumbs i { display: none; } } /* ── Leitura dos roteiros no chat ───────────────────────────────────────────────── Texto de 16px com entrelinha larga; o título do roteiro em destaque; cada cena numa seção com um fio em cima e o nome em marrom; e, dentro dela, um item por linha com o rótulo numa coluna e o texto na outra. A fala fica um ponto maior, que é o que se lê em voz alta. */ #thread .msg--ai .msg__body { font-size: 16px; line-height: 1.7; color: var(--shell-ink); } #thread .msg--ai .msg__body > p { margin: 0 0 14px; max-width: 78ch; } #thread .msg--ai .msg__body > h3 { margin: 0 0 12px; font-size: 26px; line-height: 34px; font-weight: 400; letter-spacing: -.01em; max-width: 30em; } #thread .msg--ai .msg__body > h4 { margin: 28px 0 14px; padding-top: 22px; border-top: 1px solid rgba(0, 0, 0, .1); font-size: 13px; line-height: 20px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #5C4433; } #thread .msg--ai .msg__body > hr { display: none; } #thread .msg--ai .msg__body > ul { display: grid; gap: 12px; margin: 0 0 6px; padding: 0; list-style: none; } #thread .msg--ai .msg__body > ul > li { margin: 0; padding: 0; max-width: 86ch; } #thread .msg--ai .msg__body > ul > li::before, #thread .msg--ai .msg__body > ul > li::marker { content: none; } #thread .msg--ai .msg__body > ul > li:has(> strong:first-child) { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 16px; align-items: baseline; } #thread .msg--ai .msg__body > ul > li > strong:first-child { font-size: 12px; line-height: 20px; font-weight: 600; color: var(--shell-mute); } #thread .msg--ai .msg__body > h4 + ul > li:has(> strong:first-child):nth-child(2) { font-size: 17px; } #thread .msg--ai .msg__body > p > strong:first-child { font-weight: 600; } #thread .msg--ai .msg__body > :last-child { margin-bottom: 0; } @media (max-width: 640px) { #thread .msg--ai .msg__body > ul > li:has(> strong:first-child) { grid-template-columns: minmax(0, 1fr); gap: 2px; } #thread .msg--ai .msg__body > h3 { font-size: 22px; line-height: 30px; } } /* Lista de conteúdos vazia: uma mensagem só, centralizada. */ #chat-list .sheet-empty { display: flex; align-items: center; justify-content: center; min-height: 72px; margin: 4px 0 0; padding: 16px 12px; border-radius: 12px; border: 1px dashed rgba(24, 24, 26, .18); background: none; text-align: center; } #chat-list .sheet-empty .t-label { margin: 0; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--shell-mute); } #chat-list .sheet-empty .t-meta { display: none; } /* Todos os itens da cena no mesmo tamanho. */ #thread .msg--ai .msg__body > h4 + ul > li:has(> strong:first-child):nth-child(2) { font-size: inherit; } /* ── Leitura mais fácil ─────────────────────────────────────────────────────────── Cada cena é um cartão branco: o nome e o tempo no alto, e dentro um item por linha. A fala (o que se diz em voz alta) vem maior e com uma barra marrom ao lado; os rótulos ficam numa coluna fixa, em cinza, para o olho achar rápido cada parte. */ #thread .msg--ai .msg__body { font-size: 16px; line-height: 1.75; } #thread .msg--ai .msg__body > h3 { margin-bottom: 14px; font-size: 28px; line-height: 36px; } #thread .msg--ai .msg__body > h3 + p { font-size: 17px; line-height: 28px; color: var(--shell-ink); } #thread .msg--ai .msg__body > p { max-width: 72ch; } #thread .msg--ai .msg__body > h4 { margin: 16px 0 0; padding: 16px 24px 12px; border: 1px solid rgba(0, 0, 0, .1); border-bottom: 0; border-radius: 16px 16px 0 0; background: #FFF; font-size: 14px; line-height: 20px; letter-spacing: .02em; } #thread .msg--ai .msg__body > h4 + ul, #thread .msg--ai .msg__body > h4 + p { margin: 0; padding: 6px 24px 20px; border: 1px solid rgba(0, 0, 0, .1); border-top: 0; border-radius: 0 0 16px 16px; background: #FFF; max-width: none; } #thread .msg--ai .msg__body > h4 + p { font-size: 16px; line-height: 28px; white-space: pre-line; } #thread .msg--ai .msg__body > ul { gap: 0; } #thread .msg--ai .msg__body > ul > li { max-width: none; padding: 12px 0; font-size: 16px; line-height: 26px; } #thread .msg--ai .msg__body > ul > li + li { border-top: 1px solid rgba(0, 0, 0, .07); } #thread .msg--ai .msg__body > ul > li:has(> strong:first-child) { grid-template-columns: 148px minmax(0, 1fr); gap: 20px; } #thread .msg--ai .msg__body > ul > li > strong:first-child { font-size: 13px; line-height: 26px; font-weight: 600; color: var(--shell-mute); } #thread .msg--ai .msg__body > ul > li > em { padding-left: 14px; border-left: 3px solid #5C4433; font-style: normal; font-size: 18px; line-height: 28px; font-weight: 500; color: var(--shell-ink); } #thread .msg--ai .msg__body > p:has(> strong:first-child):not(:has(+ ul)) { margin-bottom: 4px; } @media (max-width: 640px) { #thread .msg--ai .msg__body > h4, #thread .msg--ai .msg__body > h4 + ul, #thread .msg--ai .msg__body > h4 + p { padding-inline: 16px; } #thread .msg--ai .msg__body > ul > li:has(> strong:first-child) { grid-template-columns: minmax(0, 1fr); gap: 2px; } } /* ── Cabeçalho de cada cena ─────────────────────────────────────────────────────── O nome da cena à esquerda, em letra maior e escura; o tempo à direita, numa etiqueta. */ #thread .msg--ai .msg__body > h4 { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; border-bottom: 1px solid rgba(0, 0, 0, .07); font-size: 17px; line-height: 24px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--shell-ink); } #thread .msg--ai .msg__body > h4 code { flex: none; padding: 4px 10px; border-radius: 8px; background: #EFE6DE; font-family: inherit; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .02em; color: #5C4433; } #thread .msg--ai .msg__body > h4 + ul, #thread .msg--ai .msg__body > h4 + p { padding-top: 4px; } #thread .msg--ai .msg__body > h4 + p { padding-top: 16px; } #thread .msg--ai .msg__body > h4 { margin-top: 12px; } /* Conversa criada pelas páginas: o pedido já está no bloco de escolhas, então o balão dele no topo não aparece. */ #view-chat[data-brief="on"] > #thread > .msg--me:first-child { display: none; } /* ── Roteiro em blocos, no formato de fala ──────────────────────────────────────── A abertura da estrategista em texto corrido; depois cada bloco ([GANCHO], [CONTEÚDO], [CTA]) com o nome pequeno em marrom e as falas uma por linha, grandes; GRAVAÇÃO e LEGENDA no fim. */ #thread .msg--ai .msg__body > hr { display: block; margin: 28px 0; border: 0; border-top: 1px solid rgba(0, 0, 0, .1); } #thread .msg--ai .msg__body > h4 { display: block; margin: 30px 0 12px; padding: 0; border: 0; border-radius: 0; background: none; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: none; color: #5C4433; } #thread .msg--ai .msg__body > hr + h4, #thread .msg--ai .msg__body > h4:first-child { margin-top: 0; } #thread .msg--ai .msg__body > h4 + ul, #thread .msg--ai .msg__body > h4 + p { margin: 0 0 12px; padding: 0; border: 0; border-radius: 0; background: none; } #thread .msg--ai .msg__body > p { margin: 0 0 12px; max-width: 70ch; font-size: 17px; line-height: 28px; white-space: normal; } #thread .msg--ai .msg__body > h4 + p { font-size: 17px; line-height: 28px; padding-top: 0; } #thread .msg--ai .msg__body > p strong { font-weight: 700; } #thread .msg--ai .msg__body > ul, #thread .msg--ai .msg__body > ol { display: block; margin: 0 0 12px; padding-left: 22px; max-width: 70ch; } #thread .msg--ai .msg__body > ul > li, #thread .msg--ai .msg__body > ol > li { display: list-item; padding: 3px 0; border: 0; font-size: 16px; line-height: 26px; } #thread .msg--ai .msg__body > ul > li:has(> strong:first-child), #thread .msg--ai .msg__body > ol > li:has(> strong:first-child) { display: list-item; } #thread .msg--ai .msg__body > ul > li > strong:first-child, #thread .msg--ai .msg__body > ol > li > strong:first-child { font-size: inherit; line-height: inherit; font-weight: 700; color: var(--shell-ink); } #thread .msg--ai .msg__body > ul > li + li { border-top: 0; } #thread .msg--ai .msg__body > ul > li::marker { content: "• "; color: #5C4433; } #thread .msg--ai .msg__body > ol > li::marker { content: counter(list-item) ". "; color: #5C4433; font-weight: 600; } /* ── Roteiro em cartões (nosso visual de antes) ─────────────────────────────────── Cada bloco do roteiro — [GANCHO], [CONTEÚDO·…], [CTA], GRAVAÇÃO, TEXTO NA TELA, CAPAS, LEGENDA — vira um cartão branco: o nome do bloco em marrom no alto e, dentro, as falas uma por linha. A fala em destaque. A abertura da estrategista e a pergunta final ficam em texto corrido, fora dos cartões. */ #thread .msg--ai .msg__body { font-size: 16px; line-height: 1.7; } /* Divisórias viram só respiro entre as três zonas (abertura · roteiro · fecho). */ #thread .msg--ai .msg__body > hr { display: block; height: 0; margin: 20px 0; border: 0; } /* Cabeçalho de cada cartão. */ #thread .msg--ai .msg__body > h4 { display: block; margin: 12px 0 0; padding: 16px 22px 10px; border: 1px solid rgba(0, 0, 0, .1); border-bottom: 0; border-radius: 16px 16px 0 0; background: #FFF; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .06em; text-transform: none; color: #5C4433; } /* Corpo do cartão: tudo que vem depois de um cabeçalho. */ #thread .msg--ai .msg__body > h4 ~ :is(p, ul, ol) { margin: 0; padding: 2px 22px; border: 1px solid rgba(0, 0, 0, .1); border-top: 0; border-bottom: 0; border-radius: 0; background: #FFF; max-width: none; } #thread .msg--ai .msg__body > h4 ~ p { font-size: 17px; line-height: 28px; padding-block: 3px 7px; color: var(--shell-ink); } #thread .msg--ai .msg__body > h4 ~ p strong { font-weight: 700; } #thread .msg--ai .msg__body > h4 ~ ul, #thread .msg--ai .msg__body > h4 ~ ol { padding: 4px 22px 4px 44px; } #thread .msg--ai .msg__body > h4 ~ :is(ul, ol) > li { display: list-item; padding: 3px 0; border: 0; font-size: 15px; line-height: 24px; } #thread .msg--ai .msg__body > h4 ~ ul > li::marker { content: "• "; color: #5C4433; } #thread .msg--ai .msg__body > h4 ~ ol > li::marker { color: #5C4433; font-weight: 600; } /* Fecho do cartão: o último elemento antes do próximo cabeçalho ou do respiro. */ #thread .msg--ai .msg__body > :is(p, ul, ol):has(+ h4), #thread .msg--ai .msg__body > :is(p, ul, ol):has(+ hr), #thread .msg--ai .msg__body > h4 ~ :is(p, ul, ol):last-child { border-bottom: 1px solid rgba(0, 0, 0, .1); border-radius: 0 0 16px 16px; padding-bottom: 16px; } /* A fala em destaque, com a barra marrom ao lado. */ #thread .msg--ai .msg__body > h4[data-block] + p, #thread .msg--ai .msg__body > :where(h4) ~ p:first-of-type { } /* Abertura da estrategista (antes do primeiro cabeçalho) e fecho (depois do último respiro): texto corrido. */ #thread .msg--ai .msg__body > :is(p, ul, ol):not(h4 ~ *) { border: 0; background: none; padding-inline: 0; max-width: 72ch; font-size: 17px; line-height: 28px; } #thread .msg--ai .msg__body > hr:last-of-type ~ :is(p, ul, ol, h4) { margin-top: 10px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--shell-ink); } #thread .msg--ai .msg__body > hr:last-of-type ~ h4 { font-size: 17px; line-height: 26px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--shell-ink); } #thread .msg--ai .msg__body > hr:last-of-type ~ ol { padding-left: 24px; max-width: 72ch; } #thread .msg--ai .msg__body > hr:last-of-type ~ ol > li { display: list-item; padding: 4px 0; border: 0; font-size: 16px; line-height: 25px; } #thread .msg--ai .msg__body > hr:last-of-type ~ ol > li::marker { color: #5C4433; font-weight: 700; } /* ── Cartões do roteiro iguais ao visual de antes ───────────────────────────────── Nome do bloco claro acima; a fala grande, com a barra marrom ao lado (é o que se diz em voz alta). As seções (gravação, capas, legenda) mantêm a lista. */ #thread .msg--ai .msg__body > h4 { padding: 18px 24px 12px; font-size: 14px; letter-spacing: .04em; font-weight: 700; color: #5C4433; } #thread .msg--ai .msg__body > h4 ~ p { padding: 6px 24px 6px 38px; position: relative; font-size: 19px; line-height: 30px; font-weight: 500; color: var(--shell-ink); } #thread .msg--ai .msg__body > h4 ~ p::before { content: ""; position: absolute; left: 24px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: #5C4433; } #thread .msg--ai .msg__body > h4 ~ p strong { font-weight: 800; } /* Nas seções (gravação, texto na tela, capas, legenda), a lista e os parágrafos ficam sem a barra, menores. */ #thread .msg--ai .msg__body > h4 ~ ul, #thread .msg--ai .msg__body > h4 ~ ol { padding: 4px 24px 8px 48px; } #thread .msg--ai .msg__body > h4 ~ :is(ul, ol) > li { font-size: 15px; line-height: 25px; } /* As seções que vêm depois do roteiro (gravação, texto na tela, capas, legenda) são texto normal, sem a barra da fala. */ #thread .msg--ai .msg__body > hr:nth-of-type(2) ~ p { padding: 4px 24px 8px; font-size: 15px; line-height: 25px; font-weight: 400; } #thread .msg--ai .msg__body > hr:nth-of-type(2) ~ p::before { content: none; } /* O fecho (pergunta + ideias) fica fora de cartão — reafirmado por último para prevalecer. */ #thread .msg--ai .msg__body > hr:last-of-type ~ :is(p, ul, ol, h4) { margin-top: 10px; padding: 0; border: 0; border-radius: 0; background: none; } #thread .msg--ai .msg__body > hr:last-of-type ~ p { font-size: 17px; line-height: 28px; font-weight: 400; } #thread .msg--ai .msg__body > hr:last-of-type ~ p::before { content: none; } #thread .msg--ai .msg__body > hr:last-of-type ~ h4 { font-size: 17px; line-height: 26px; letter-spacing: 0; color: var(--shell-ink); } #thread .msg--ai .msg__body > hr:last-of-type ~ ol { padding: 0 0 0 24px; max-width: 72ch; } #thread .msg--ai .msg__body > hr:last-of-type ~ ol > li { font-size: 16px; line-height: 25px; } /* Linhas de rótulo dentro dos cartões (Contexto:, Texto na tela:, Estilo Visual:) são texto normal, sem a barra da fala. */ #thread .msg--ai .msg__body > h4 ~ p:has(> strong:first-child) { padding-left: 24px; font-size: 15px; line-height: 24px; font-weight: 400; color: var(--shell-mute); } #thread .msg--ai .msg__body > h4 ~ p:has(> strong:first-child)::before { content: none; } #thread .msg--ai .msg__body > h4 ~ p:has(> strong:first-child) strong { color: var(--shell-ink); font-weight: 700; } #thread .msg--ai .msg__body > p:has(> strong:first-child):not(h4 ~ *) { font-size: 16px; } /* No fecho, a linha "Ideias pro seu próximo conteúdo:" fica alinhada com o resto, sem recuo. */ #thread .msg--ai .msg__body > hr:last-of-type ~ p:has(> strong:first-child) { padding: 0; font-size: 17px; line-height: 28px; color: var(--shell-ink); } /* ── Resumo e linha do caminho presos à rolagem da conversa ─────────────────────── Uma animação dirigida pela rolagem do #thread move os dois junto com as mensagens, quadro a quadro, sem JavaScript: nada de tremer nem atrasar. */ #view-chat[data-smooth="true"] { timeline-scope: --lab-thread; } #view-chat[data-smooth="true"] > #thread { scroll-timeline: --lab-thread block; } @keyframes lab-follow { from { transform: translateY(0); } to { transform: translateY(calc(-1px * var(--lab-range, 0))); } } #view-chat[data-smooth="true"] #lab-brief, #view-chat[data-smooth="true"] #lab-path { animation: lab-follow linear both; animation-timeline: --lab-thread; will-change: transform; } /* ── Cartões no visual de antes: rótulo à esquerda, conteúdo à direita ────────────── Nome do bloco pequeno no alto. Dentro, duas colunas: "Fala" à esquerda (só na primeira linha) e a fala grande à direita, com a barra marrom. Contexto, Texto na tela e Estilo Visual seguem o mesmo esquema, em texto menor. */ #thread .msg--ai .msg__body > h4 ~ p { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px; align-items: baseline; padding: 4px 24px 4px 24px; } #thread .msg--ai .msg__body > h4 ~ p::before { content: ""; position: static; width: auto; height: auto; border: 0; background: none; font-size: 12px; line-height: 20px; font-weight: 600; color: var(--shell-mute); } #thread .msg--ai .msg__body > h4 + p:not(:has(> strong:first-child))::before { content: "Fala"; } /* a fala em si: grande, com a barra à esquerda do texto */ #thread .msg--ai .msg__body > h4 ~ p:not(:has(> strong:first-child)) { font-size: 19px; line-height: 30px; font-weight: 500; } #thread .msg--ai .msg__body > h4 ~ p:not(:has(> strong:first-child))::after { content: none; } #thread .msg--ai .msg__body > h4 ~ p:not(:has(> strong:first-child)) { grid-template-columns: 112px 3px minmax(0, 1fr); } #thread .msg--ai .msg__body > h4 ~ p:not(:has(> strong:first-child))::after { content: ""; grid-column: 2; align-self: stretch; margin: 4px 0; border-radius: 2px; background: #5C4433; } #thread .msg--ai .msg__body > h4 ~ p:not(:has(> strong:first-child)) > * , #thread .msg--ai .msg__body > h4 ~ p:not(:has(> strong:first-child)) { } /* rótulos em negrito (Contexto:, Texto na tela:, Estilo Visual:) viram a coluna da esquerda */ #thread .msg--ai .msg__body > h4 ~ p:has(> strong:first-child) { grid-template-columns: 112px minmax(0, 1fr); padding-left: 24px; font-size: 15px; line-height: 24px; color: var(--shell-ink); } #thread .msg--ai .msg__body > h4 ~ p:has(> strong:first-child)::before { content: none; } #thread .msg--ai .msg__body > h4 ~ p:has(> strong:first-child) > strong:first-child { font-size: 12px; line-height: 20px; font-weight: 600; color: var(--shell-mute); } /* seções depois do roteiro (gravação, legenda) e o fecho ficam como estavam */ #thread .msg--ai .msg__body > hr:nth-of-type(2) ~ p { display: block; padding: 4px 24px 8px; font-size: 15px; line-height: 25px; font-weight: 400; } #thread .msg--ai .msg__body > hr:nth-of-type(2) ~ p::before, #thread .msg--ai .msg__body > hr:nth-of-type(2) ~ p::after { content: none; } #thread .msg--ai .msg__body > hr:last-of-type ~ p { display: block; padding: 0; } #thread .msg--ai .msg__body > hr:last-of-type ~ p::before, #thread .msg--ai .msg__body > hr:last-of-type ~ p::after { content: none; } @media (max-width: 640px) { #thread .msg--ai .msg__body > h4 ~ p { grid-template-columns: minmax(0, 1fr) !important; } #thread .msg--ai .msg__body > h4 ~ p::before, #thread .msg--ai .msg__body > h4 ~ p::after { display: none; } } /* Duas colunas de verdade (rótulo | texto); a barra marrom fica desenhada à esquerda do texto, sem ocupar coluna. */ #thread .msg--ai .msg__body > h4 ~ p:not(:has(> strong:first-child)) { position: relative; grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px; padding-left: 24px; } #thread .msg--ai .msg__body > h4 ~ p:not(:has(> strong:first-child))::after { content: ""; position: absolute; left: calc(24px + 112px + 16px - 14px); top: 9px; bottom: 9px; width: 3px; margin: 0; border-radius: 2px; background: #5C4433; grid-column: auto; } /* ── Acabamento dos cartões: margens, respiro e tamanhos ───────────────────────── */ #thread .msg--ai .msg__body > p:not(h4 ~ *) { margin: 0 0 12px; max-width: 72ch; font-size: 17px; line-height: 28px; } #thread .msg--ai .msg__body > p:not(h4 ~ *):has(> strong:first-child) { max-width: none; margin: 4px 0 0; padding: 14px 20px; border-radius: 12px; background: #F5F5F6; font-size: 15px; line-height: 24px; color: var(--shell-ink); } #thread .msg--ai .msg__body > hr { margin: 22px 0; } #thread .msg--ai .msg__body > h4 { margin-top: 16px; padding: 18px 24px 6px; font-size: 11px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; } #thread .msg--ai .msg__body > hr + h4, #thread .msg--ai .msg__body > h4:first-child { margin-top: 0; } #thread .msg--ai .msg__body > h4 ~ p { padding-top: 6px; padding-bottom: 6px; } #thread .msg--ai .msg__body > h4 + p { padding-top: 10px; } #thread .msg--ai .msg__body > h4 ~ p:not(:has(> strong:first-child)) { grid-template-columns: 96px minmax(0, 1fr); column-gap: 20px; font-size: 19px; line-height: 30px; } #thread .msg--ai .msg__body > h4 ~ p:not(:has(> strong:first-child))::after { left: calc(24px + 96px + 20px - 14px); top: 11px; bottom: 11px; } #thread .msg--ai .msg__body > h4 ~ p::before { line-height: 30px; } #thread .msg--ai .msg__body > h4 ~ p:has(> strong:first-child) { grid-template-columns: 96px minmax(0, 1fr); column-gap: 20px; } #thread .msg--ai .msg__body > :is(p, ul, ol):has(+ h4), #thread .msg--ai .msg__body > :is(p, ul, ol):has(+ hr), #thread .msg--ai .msg__body > h4 ~ :is(p, ul, ol):last-child { padding-bottom: 20px; } #thread .msg--ai .msg__body > h4 ~ ul, #thread .msg--ai .msg__body > h4 ~ ol { padding: 6px 24px 8px 46px; } #thread .msg--ai .msg__body > hr:nth-of-type(2) ~ p { padding: 6px 24px; font-size: 15px; line-height: 26px; } #thread .msg--ai .msg__body > hr:nth-of-type(2) ~ h4 + p { padding-top: 10px; } #thread .msg--ai .msg__body > hr:last-of-type ~ p { margin: 0 0 10px; padding: 0; max-width: 72ch; } #thread .msg--ai .msg__body > hr:last-of-type ~ ol { margin-top: 4px; } #thread .msg--ai .msg__body > hr:last-of-type ~ ol > li { padding: 5px 0; } /* ── Fala em bloco único ────────────────────────────────────────────────────────── A fala de cada bloco é uma lista só: o rótulo "Fala" fica à esquerda uma vez e as frases, grandes, uma embaixo da outra à direita, com a barra marrom contínua. */ #view-chat #thread .msg--ai .msg__body > h4 ~ ul { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 20px; align-items: start; margin: 0; padding: 10px 24px 6px; list-style: none; } #view-chat #thread .msg--ai .msg__body > h4 ~ ul::before { content: "Fala"; font-size: 12px; line-height: 30px; font-weight: 600; color: var(--shell-mute); } #view-chat #thread .msg--ai .msg__body > h4 ~ ul > li { display: block; grid-column: 2; margin: 0; padding: 2px 0 2px 14px; border: 0; border-left: 3px solid #5C4433; font-size: 19px; line-height: 30px; font-weight: 500; color: var(--shell-ink); } #view-chat #thread .msg--ai .msg__body > h4 ~ ul > li + li { margin-top: 4px; } #view-chat #thread .msg--ai .msg__body > h4 ~ ul > li::marker { content: none; } #view-chat #thread .msg--ai .msg__body > h4 ~ ul > li strong { font-weight: 800; } /* Parágrafos dentro dos cartões (Contexto:, Texto na tela:, a frase do story): rótulo à esquerda, texto à direita. */ #view-chat #thread .msg--ai .msg__body > h4 ~ p { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 20px; position: static; padding: 6px 24px; font-size: 15px; line-height: 26px; font-weight: 400; color: var(--shell-ink); } #view-chat #thread .msg--ai .msg__body > h4 ~ p::before, #view-chat #thread .msg--ai .msg__body > h4 ~ p::after { content: none; } #view-chat #thread .msg--ai .msg__body > h4 ~ p:not(:has(> strong:first-child)) { grid-template-columns: minmax(0, 1fr); padding-left: calc(24px + 96px + 20px); font-size: 17px; line-height: 28px; font-weight: 500; } #view-chat #thread .msg--ai .msg__body > h4 ~ p > strong:first-child { font-size: 12px; line-height: 26px; font-weight: 600; color: var(--shell-mute); } /* Seções depois do roteiro (gravação, texto na tela, capas, legenda): texto e listas normais, sem rótulo "Fala" nem barra. */ #view-chat #thread .msg--ai .msg__body > hr:nth-of-type(2) ~ ul { display: block; padding: 6px 24px 8px 46px; list-style: disc; } #view-chat #thread .msg--ai .msg__body > hr:nth-of-type(2) ~ ul::before { content: none; } #view-chat #thread .msg--ai .msg__body > hr:nth-of-type(2) ~ ul > li { display: list-item; padding: 3px 0; border: 0; font-size: 15px; line-height: 25px; font-weight: 400; } #view-chat #thread .msg--ai .msg__body > hr:nth-of-type(2) ~ ul > li::marker { content: "• "; color: #5C4433; } #view-chat #thread .msg--ai .msg__body > hr:nth-of-type(2) ~ p { display: block; padding: 6px 24px; font-size: 15px; line-height: 26px; font-weight: 400; } #view-chat #thread .msg--ai .msg__body > hr:nth-of-type(2) ~ p::before, #view-chat #thread .msg--ai .msg__body > hr:nth-of-type(2) ~ p::after { content: none; } /* Fecho (pergunta + ideias): fora de cartão. */ #view-chat #thread .msg--ai .msg__body > hr:last-of-type ~ :is(p, ul, ol, h4) { display: block; margin: 0 0 10px; padding: 0; border: 0; border-radius: 0; background: none; max-width: 72ch; font-size: 17px; line-height: 28px; font-weight: 400; color: var(--shell-ink); } #view-chat #thread .msg--ai .msg__body > hr:last-of-type ~ p::before, #view-chat #thread .msg--ai .msg__body > hr:last-of-type ~ p::after, #view-chat #thread .msg--ai .msg__body > hr:last-of-type ~ ul::before { content: none; } #view-chat #thread .msg--ai .msg__body > hr:last-of-type ~ p > strong:first-child { font-size: inherit; line-height: inherit; font-weight: 700; color: var(--shell-ink); } #view-chat #thread .msg--ai .msg__body > hr:last-of-type ~ ol { padding-left: 24px; } #view-chat #thread .msg--ai .msg__body > hr:last-of-type ~ ol > li { display: list-item; padding: 5px 0; border: 0; font-size: 16px; line-height: 25px; } #view-chat #thread .msg--ai .msg__body > hr:last-of-type ~ ol > li::marker { content: counter(list-item) ". "; color: #5C4433; font-weight: 700; } /* Fecho do cartão (último elemento antes do próximo cabeçalho ou do respiro). */ #view-chat #thread .msg--ai .msg__body > :is(p, ul, ol):has(+ h4), #view-chat #thread .msg--ai .msg__body > :is(p, ul, ol):has(+ hr), #view-chat #thread .msg--ai .msg__body > h4 ~ :is(p, ul, ol):last-child { border-bottom: 1px solid rgba(0, 0, 0, .1); border-radius: 0 0 16px 16px; padding-bottom: 20px; } #view-chat #thread .msg--ai .msg__body > hr:last-of-type ~ :is(p, ul, ol) { border-bottom: 0; } @media (max-width: 640px) { #view-chat #thread .msg--ai .msg__body > h4 ~ ul, #view-chat #thread .msg--ai .msg__body > h4 ~ p { grid-template-columns: minmax(0, 1fr); padding-left: 16px; } #view-chat #thread .msg--ai .msg__body > h4 ~ ul::before { display: none; } #view-chat #thread .msg--ai .msg__body > h4 ~ ul > li { grid-column: 1; } } /* ── Slides do carrossel: blocos 1080×1350, lado a lado, com rolagem horizontal ────── */ .lab-slides { display: flex; gap: 16px; margin: 4px 0 8px; padding: 4px 0 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; } .lab-slides::-webkit-scrollbar { height: 8px; } .lab-slides::-webkit-scrollbar-thumb { border-radius: 4px; background: rgba(0, 0, 0, .18); } .lab-slide { position: relative; flex: none; display: flex; flex-direction: column; width: 320px; aspect-ratio: 1080 / 1350; padding: 26px 26px 22px; border-radius: 16px; background: #FFF; border: 1px solid rgba(0, 0, 0, .1); scroll-snap-align: start; } .lab-slide__n { position: absolute; left: 18px; top: 16px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #2B1E16; color: #FFF; font-size: 12px; font-weight: 700; } .lab-slide__count { position: absolute; right: 18px; bottom: 14px; font-size: 12px; line-height: 16px; font-weight: 600; color: #58585E; } .lab-slide__body { flex: 1; display: flex; align-items: center; min-height: 0; margin-top: 30px; } .lab-slide__body ul, .lab-slide__body ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; width: 100%; } .lab-slide__body li { display: block; margin: 0; padding: 0; border: 0; font-size: 18px; line-height: 26px; font-weight: 500; color: #18181A; text-align: center; } .lab-slide__body li::marker { content: none; } .lab-slide__body li strong { font-weight: 800; } .lab-slide__body p { margin: 0; font-size: 16px; line-height: 24px; text-align: center; color: #18181A; } .lab-slides .lab-slide:first-child { background: #2B1E16; border-color: #2B1E16; } .lab-slides .lab-slide:first-child .lab-slide__n { background: #FFF; color: #2B1E16; } .lab-slides .lab-slide:first-child .lab-slide__count { color: rgba(255, 255, 255, .7); } .lab-slides .lab-slide:first-child .lab-slide__body li, .lab-slides .lab-slide:first-child .lab-slide__body p { color: #FFF; font-size: 22px; line-height: 31px; font-weight: 600; } .lab-slides .lab-slide:last-child { background: #EFE6DE; border-color: #EFE6DE; } /* Dentro dos slides, os itens não seguem as regras dos cartões do roteiro. */ #view-chat #thread .msg--ai .msg__body > .lab-slides ul { display: grid; padding: 0; } #view-chat #thread .msg--ai .msg__body > .lab-slides ul::before { content: none; } #view-chat #thread .msg--ai .msg__body > .lab-slides li { grid-column: auto; border-left: 0; padding: 0; } /* O texto de abertura (antes do roteiro) não leva a borda de fecho de cartão. */ #view-chat #thread .msg--ai .msg__body > p:not(h4 ~ *) { border: 0; border-radius: 0; padding-bottom: 0; } /* Frases do slide uma embaixo da outra, centralizadas. */ .lab-slide__body ul, .lab-slide__body ol { display: flex !important; flex-direction: column; gap: 10px; } .lab-slide__body li { display: block !important; width: 100%; grid-column: auto; border: 0 !important; padding: 0 !important; } /* Legenda, gravação e fecho sem o recuo da coluna "Fala". */ #view-chat #thread .msg--ai .msg__body > hr:nth-of-type(2) ~ p:not(:has(> strong:first-child)) { display: block; padding: 6px 24px; font-size: 15px; line-height: 26px; font-weight: 400; } #view-chat #thread .msg--ai .msg__body > hr:last-of-type ~ p:not(:has(> strong:first-child)) { display: block; padding: 0; font-size: 17px; line-height: 28px; font-weight: 400; } #view-chat #thread .msg--ai .msg__body > hr:last-of-type ~ p:has(> strong:first-child) { display: block; padding: 0; font-size: 17px; line-height: 28px; } /* Texto do slide: uma frase embaixo da outra, centralizado no bloco (vale para lista e para parágrafos). */ .lab-slide__body { flex-direction: column; justify-content: center; align-items: stretch; gap: 10px; } .lab-slide__body > p, .lab-slide__body > ul, .lab-slide__body > ol { width: 100%; margin: 0 !important; padding: 0 !important; border: 0 !important; text-align: center; } .lab-slide__body > p { display: block !important; font-size: 18px; line-height: 26px; font-weight: 500; color: #18181A; grid-template-columns: none; } .lab-slide__body > p::before, .lab-slide__body > p::after { content: none !important; } .lab-slides .lab-slide:first-child .lab-slide__body > p { color: #FFF; font-size: 22px; line-height: 31px; font-weight: 600; } /* As seções depois do roteiro (gravação, texto na tela, capas, legenda) ficam no fundo do chat, sem cartão. */ #view-chat #thread .msg--ai .msg__body > hr:nth-of-type(2) ~ h4 { margin: 22px 0 8px; padding: 0; border: 0; border-radius: 0; background: none; } #view-chat #thread .msg--ai .msg__body > hr:nth-of-type(2) ~ :is(p, ul, ol) { padding-left: 0; padding-right: 0; border: 0 !important; border-radius: 0; background: none; max-width: 72ch; } #view-chat #thread .msg--ai .msg__body > hr:nth-of-type(2) ~ p:not(:has(> strong:first-child)) { padding: 0 0 10px; font-size: 16px; line-height: 27px; } #view-chat #thread .msg--ai .msg__body > hr:nth-of-type(2) ~ ul { padding: 0 0 6px 22px; } #view-chat #thread .msg--ai .msg__body > hr:nth-of-type(2) ~ :is(p, ul, ol):has(+ h4), #view-chat #thread .msg--ai .msg__body > hr:nth-of-type(2) ~ :is(p, ul, ol):has(+ hr) { padding-bottom: 6px; } /* "Estilo Visual" alinhado à esquerda, no mesmo canto do texto, sem recuo nem caixa. */ #view-chat #thread .msg--ai .msg__body > p:not(h4 ~ *):has(> strong:first-child) { margin: 6px 0 14px; padding: 0; border-radius: 0; background: none; max-width: 72ch; font-size: 15px; line-height: 24px; } #view-chat #thread .msg--ai .msg__body > p:not(h4 ~ *):has(> strong:first-child) > strong:first-child { font-size: inherit; line-height: inherit; font-weight: 700; color: var(--shell-ink); } /* A tela vazia do chat não é mais usada: sem conversa, o Painel ocupa o lugar. */ #view-chat[data-empty="true"] .chat-welcome { visibility: hidden; } /* Fecho alinhado no canto: pergunta numa linha só, "Ideias…" logo abaixo e a lista com os números na mesma margem. */ #view-chat #thread .msg--ai .msg__body > hr:last-of-type ~ p { margin: 0 0 8px; padding: 0; max-width: none; } #view-chat #thread .msg--ai .msg__body > hr:last-of-type ~ p:has(> strong:first-child) { margin: 14px 0 6px; } #view-chat #thread .msg--ai .msg__body > hr:last-of-type ~ ol { margin: 0; padding: 0; list-style-position: inside; max-width: none; } #view-chat #thread .msg--ai .msg__body > hr:last-of-type ~ ol > li { padding: 4px 0; } #view-chat #thread .msg--ai .msg__body > hr:last-of-type ~ ol > li::marker { content: counter(list-item) ". "; } /* Stories: um cartão por tela, texto na tela em destaque, cena e interação como rótulo discreto. */ #view-chat #thread .msg--ai .msg__body.lab-stories > h4 ~ ul::before { content: "Texto"; } #view-chat #thread .msg--ai .msg__body.lab-stories > h4 ~ p:has(> strong:first-child) { color: var(--shell-mute); font-size: 15px; line-height: 24px; } #view-chat #thread .msg--ai .msg__body.lab-stories > h4 ~ p:has(> strong:first-child) > strong:first-child { color: var(--shell-mute); font-weight: 600; } /* Sem linhas dividindo o miolo do cartão de story: o cartão é um bloco só, separado por espaço. */ #view-chat #thread .msg--ai .msg__body.lab-stories > h4 ~ p:has(> strong:first-child) { border-top: 0 !important; border-bottom: 0 !important; padding-top: 2px; padding-bottom: 2px; } #view-chat #thread .msg--ai .msg__body.lab-stories > h4 ~ ul { padding-bottom: 12px; } #view-chat #thread .msg--ai .msg__body.lab-stories > h4 ~ p:has(> strong:first-child):last-child, #view-chat #thread .msg--ai .msg__body.lab-stories > h4 ~ p:has(> strong:first-child):has(+ h4), #view-chat #thread .msg--ai .msg__body.lab-stories > h4 ~ p:has(> strong:first-child):has(+ hr) { padding-bottom: 20px; } /* ───────── O roteiro em um cartão só: rótulo pequeno, fala grande, nada de caixas aninhadas ───────── */ #view-chat #thread .msg--ai .msg__body > hr { height: 0; border: 0; margin: 4px 0; } #view-chat #thread .msg--ai .msg__body .lab-script { margin: 20px 0 24px; padding: 4px 30px 28px; background: #FFF; border: 1px solid #EDE6E0; border-radius: 16px; } #view-chat #thread .msg--ai .msg__body .lab-script > h4 { margin: 0; padding: 26px 0 12px; border: 0; border-top: 1px solid #F3EDE8; background: none; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: #9A887B; } #view-chat #thread .msg--ai .msg__body .lab-script > h4:first-child { border-top: 0; padding-top: 24px; } #view-chat #thread .msg--ai .msg__body .lab-script > ul { margin: 0; padding: 0; list-style: none; display: block; } #view-chat #thread .msg--ai .msg__body .lab-script > ul::before { content: none; } #view-chat #thread .msg--ai .msg__body .lab-script > ul > li { margin: 0; padding: 2px 0; border: 0; background: none; font-size: 18px; line-height: 31px; font-weight: 450; color: #18181A; } #view-chat #thread .msg--ai .msg__body .lab-script > ul > li::marker, #view-chat #thread .msg--ai .msg__body .lab-script > ul > li::before { content: none; } #view-chat #thread .msg--ai .msg__body .lab-script > p { margin: 10px 0 0; padding: 0; border: 0; background: none; display: block; font-size: 15px; line-height: 24px; color: #7D6E63; } #view-chat #thread .msg--ai .msg__body .lab-script > p::before { content: none; } #view-chat #thread .msg--ai .msg__body .lab-script > p > strong:first-child { font-size: inherit; line-height: inherit; font-weight: 600; color: #9A887B; } /* ───────── Roteiro: tempo e bloco numa linha, a fala logo abaixo, sem caixa ───────── */ #view-chat #thread .msg--ai .msg__body .lab-script { margin: 10px 0 18px; padding: 0; background: none; border: 0; border-radius: 0; } #view-chat #thread .msg--ai .msg__body .lab-script > h4 { margin: 0; padding: 26px 0 10px; border: 0; background: none; font-size: 12px; line-height: 17px; font-weight: 600; letter-spacing: .06em; color: #9A887B; } #view-chat #thread .msg--ai .msg__body .lab-script > h4:first-child { padding-top: 6px; } #view-chat #thread .msg--ai .msg__body .lab-script > ul > li { padding: 2px 0 2px 30px; font-size: 18px; line-height: 31px; font-weight: 450; color: #18181A; } #view-chat #thread .msg--ai .msg__body .lab-script > p { margin: 8px 0 0; padding: 0 0 0 30px; font-size: 15px; line-height: 24px; color: #8A7A6E; } /* ───────── A resposta inteira num cartão com borda: traço fino separando roteiro, gravação e legenda ───────── */ #view-chat #thread .msg--ai .msg__body { padding: 22px 26px 24px; background: #FFF; border: 1px solid #E6E1DC; border-radius: 14px; } #view-chat #thread .msg--ai .msg__body > hr { height: 0; margin: 22px 0; border: 0; border-top: 1px solid #ECE7E2; } #view-chat #thread .msg--ai .msg__body > p, #view-chat #thread .msg--ai .msg__body .lab-script > ul > li, #view-chat #thread .msg--ai .msg__body > ul > li, #view-chat #thread .msg--ai .msg__body > ol > li { font-size: 15px; line-height: 25px; font-weight: 400; color: #18181A; max-width: none; } #view-chat #thread .msg--ai .msg__body > p { margin: 0 0 14px; padding: 0; } #view-chat #thread .msg--ai .msg__body > p:last-child { margin-bottom: 0; } /* Blocos do roteiro: nome entre colchetes, no corpo do texto, com a fala logo abaixo. */ #view-chat #thread .msg--ai .msg__body .lab-script { margin: 0; padding: 0; background: none; border: 0; } #view-chat #thread .msg--ai .msg__body .lab-script > h4 { margin: 0; padding: 22px 0 14px; border: 0; background: none; font-size: 15px; line-height: 22px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #18181A; } #view-chat #thread .msg--ai .msg__body .lab-script > h4:first-child { padding-top: 0; } #view-chat #thread .msg--ai .msg__body .lab-script > ul { margin: 0; padding: 0; } #view-chat #thread .msg--ai .msg__body .lab-script > ul > li { margin: 0 0 14px; padding: 0; } #view-chat #thread .msg--ai .msg__body .lab-script > ul > li:last-child { margin-bottom: 0; } #view-chat #thread .msg--ai .msg__body .lab-script > p { margin: 0 0 14px; padding: 0; font-size: 15px; line-height: 25px; color: #6F635A; } /* Seções do fim: nome em negrito escuro com dois-pontos, como no modelo. */ #view-chat #thread .msg--ai .msg__body > hr ~ h4 { margin: 0; padding: 0 0 14px; border: 0; background: none; font-size: 15px; line-height: 22px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #18181A; } #view-chat #thread .msg--ai .msg__body > hr ~ h4::after { content: ":"; } #view-chat #thread .msg--ai .msg__body > hr ~ :is(p, ul, ol) { padding-left: 0; } /* O negrito dentro da fala é o peso da palavra, não um título. */ #view-chat #thread .msg--ai .msg__body .lab-script > ul > li > strong { font-size: inherit; line-height: inherit; font-weight: 700; color: inherit; } /* ───────── Abertura e fecho no fundo do chat; o conteúdo entregue dentro do cartão ───────── */ #view-chat #thread .msg--ai .msg__body { padding: 0; background: none; border: 0; border-radius: 0; } #view-chat #thread .msg--ai .msg__body > hr { height: 0; margin: 2px 0; border: 0; } #view-chat #thread .msg--ai .msg__body > p { margin: 0 0 14px; padding: 0; border: 0; background: none; font-size: 15px; line-height: 25px; color: #18181A; max-width: none; } #view-chat #thread .msg--ai .msg__body .lab-card { margin: 16px 0 18px; padding: 22px 26px 24px; background: #FFF; border: 1px solid #E6E1DC; border-radius: 14px; } #view-chat #thread .msg--ai .msg__body .lab-card > hr { height: 0; margin: 22px 0; border: 0; border-top: 1px solid #ECE7E2; } #view-chat #thread .msg--ai .msg__body .lab-card > h4 { margin: 0; padding: 0 0 14px; border: 0; background: none; font-size: 15px; line-height: 22px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #18181A; } #view-chat #thread .msg--ai .msg__body .lab-card > h4::after { content: ":"; } #view-chat #thread .msg--ai .msg__body .lab-card > p { margin: 0 0 14px; padding: 0; border: 0; background: none; font-size: 15px; line-height: 25px; color: #18181A; max-width: none; } #view-chat #thread .msg--ai .msg__body .lab-card > p:last-child { margin-bottom: 0; } #view-chat #thread .msg--ai .msg__body .lab-card > ul, #view-chat #thread .msg--ai .msg__body .lab-card > ol { margin: 0 0 14px; padding-left: 20px; } #view-chat #thread .msg--ai .msg__body .lab-card > ul > li, #view-chat #thread .msg--ai .msg__body .lab-card > ol > li { padding: 0; border: 0; background: none; font-size: 15px; line-height: 25px; color: #18181A; } /* O cartão do roteiro já na tela enquanto a IA pensa: três linhas que respiram, no lugar onde o texto vai nascer. */ #view-chat #thread .lab-esperando { padding: 0 var(--shell-gutter, 0); } #view-chat #thread .lab-esperando .lab-card { display: flex; flex-direction: column; gap: 14px; } #view-chat #thread .lab-esperando .lab-card > span { display: block; height: 13px; border-radius: 7px; background: #F1ECE7; animation: lab-respira 1.6s ease-in-out infinite; } #view-chat #thread .lab-esperando .lab-card > span:nth-child(1) { width: 62%; } #view-chat #thread .lab-esperando .lab-card > span:nth-child(2) { width: 88%; animation-delay: .2s; } #view-chat #thread .lab-esperando .lab-card > span:nth-child(3) { width: 45%; animation-delay: .4s; } @keyframes lab-respira { 0%, 100% { opacity: .5 } 50% { opacity: 1 } } @media (prefers-reduced-motion: reduce) { #view-chat #thread .lab-esperando .lab-card > span { animation: none; } } /* Durante a escrita, a última resposta já usa o cartão: o texto nasce dentro dele. */ #view-chat #thread[data-gerando] .msg--ai:last-of-type .msg__body { margin: 16px 0 18px; padding: 22px 26px 24px; background: #FFF; border: 1px solid #E6E1DC; border-radius: 14px; } #view-chat #thread[data-gerando] .msg--ai:last-of-type .msg__body > hr { height: 0; margin: 22px 0; border: 0; border-top: 1px solid #ECE7E2; } #view-chat #thread[data-gerando] .msg--ai:last-of-type .msg__body > h4 { margin: 0; padding: 22px 0 14px; border: 0; background: none; font-size: 15px; line-height: 22px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #18181A; } #view-chat #thread[data-gerando] .msg--ai:last-of-type .msg__body > h4:first-child { padding-top: 0; } #view-chat #thread[data-gerando] .msg--ai:last-of-type .msg__body > p { margin: 0 0 14px; padding: 0; border: 0; background: none; font-size: 15px; line-height: 25px; color: #18181A; max-width: none; } #view-chat #thread[data-gerando] .msg--ai:last-of-type .msg__body > :is(ul, ol) { margin: 0 0 14px; padding-left: 20px; } #view-chat #thread[data-gerando] .msg--ai:last-of-type .msg__body > :is(ul, ol) > li { padding: 0; border: 0; background: none; font-size: 15px; line-height: 25px; color: #18181A; } #view-chat #thread[data-gerando] .msg--ai:last-of-type .msg__body > :is(p, ul, ol)::before { content: none; } /* Durante a escrita, a abertura fica no fundo do chat e o cartão só começa depois do primeiro traço: a estrategista fala, e aí o roteiro nasce dentro do cartão, que cresce conforme o texto chega. */ #view-chat #thread[data-gerando] .msg--ai:last-of-type .msg__body { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; } #view-chat #thread[data-gerando] .msg--ai:last-of-type .msg__body > hr:first-of-type { height: 0; margin: 16px 0 0; border: 0; } #view-chat #thread[data-gerando] .msg--ai:last-of-type .msg__body > hr:first-of-type ~ * { margin: 0; padding: 0 26px; background: #FFF; border-left: 1px solid #E6E1DC; border-right: 1px solid #E6E1DC; border-top: 0; border-bottom: 0; border-radius: 0; max-width: none; } #view-chat #thread[data-gerando] .msg--ai:last-of-type .msg__body > hr:first-of-type + * { padding-top: 22px; border-top: 1px solid #E6E1DC; border-radius: 14px 14px 0 0; } #view-chat #thread[data-gerando] .msg--ai:last-of-type .msg__body > hr:first-of-type ~ *:last-child { padding-bottom: 24px; border-bottom: 1px solid #E6E1DC; border-radius: 0 0 14px 14px; } #view-chat #thread[data-gerando] .msg--ai:last-of-type .msg__body > hr:first-of-type ~ h4 { padding-top: 22px; padding-bottom: 14px; font-size: 15px; line-height: 22px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #18181A; } #view-chat #thread[data-gerando] .msg--ai:last-of-type .msg__body > hr:first-of-type ~ p { padding-bottom: 14px; font-size: 15px; line-height: 25px; color: #18181A; } #view-chat #thread[data-gerando] .msg--ai:last-of-type .msg__body > hr:first-of-type ~ :is(ul, ol) { padding-bottom: 14px; padding-left: 46px; } #view-chat #thread[data-gerando] .msg--ai:last-of-type .msg__body > hr:first-of-type ~ :is(ul, ol) > li { font-size: 15px; line-height: 25px; color: #18181A; border: 0; background: none; padding: 0; } #view-chat #thread[data-gerando] .msg--ai:last-of-type .msg__body > hr:first-of-type ~ hr { height: 0; padding: 0 26px; margin: 22px 0; border-top: 1px solid #ECE7E2; } /* A abertura, antes do traço, continua solta no fundo do chat. */ #view-chat #thread[data-gerando] .msg--ai:last-of-type .msg__body > p:not(hr ~ *) { margin: 0 0 14px; padding: 0; background: none; border: 0; font-size: 15px; line-height: 25px; color: #18181A; max-width: none; } /* O cartão começa no primeiro bloco, não no traço: o traço só vira
quando a linha inteira chega, e nesse intervalo o [GANCHO] aparecia sem cartão e a caixa entrava depois. Ancorando no próprio bloco, a caixa está lá desde a primeira palavra dele. */ #view-chat #thread[data-gerando] .msg--ai:last-of-type .msg__body > hr:first-of-type ~ * { padding: 0; background: none; border: 0; border-radius: 0; } #view-chat #thread[data-gerando] .msg--ai:last-of-type .msg__body > :is(h4:first-of-type, h4:first-of-type ~ *) { margin: 0; padding: 0 26px; background: #FFF; border-left: 1px solid #E6E1DC; border-right: 1px solid #E6E1DC; border-radius: 0; max-width: none; } #view-chat #thread[data-gerando] .msg--ai:last-of-type .msg__body > h4:first-of-type { padding-top: 22px; border-top: 1px solid #E6E1DC; border-radius: 14px 14px 0 0; } #view-chat #thread[data-gerando] .msg--ai:last-of-type .msg__body > :is(h4:first-of-type, h4:first-of-type ~ *):last-child { padding-bottom: 24px; border-bottom: 1px solid #E6E1DC; border-radius: 0 0 14px 14px; } #view-chat #thread[data-gerando] .msg--ai:last-of-type .msg__body > h4:first-of-type:last-child { border-radius: 14px; } #view-chat #thread[data-gerando] .msg--ai:last-of-type .msg__body > :is(h4:first-of-type, h4:first-of-type ~ h4) { padding-top: 22px; padding-bottom: 14px; font-size: 15px; line-height: 22px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #18181A; } #view-chat #thread[data-gerando] .msg--ai:last-of-type .msg__body > h4:first-of-type ~ p { padding-bottom: 14px; font-size: 15px; line-height: 25px; color: #18181A; } #view-chat #thread[data-gerando] .msg--ai:last-of-type .msg__body > h4:first-of-type ~ :is(ul, ol) { padding-bottom: 14px; padding-left: 46px; } #view-chat #thread[data-gerando] .msg--ai:last-of-type .msg__body > h4:first-of-type ~ :is(ul, ol) > li { font-size: 15px; line-height: 25px; color: #18181A; border: 0; background: none; padding: 0; } #view-chat #thread[data-gerando] .msg--ai:last-of-type .msg__body > h4:first-of-type ~ hr { height: 0; margin: 22px 0; border-top: 1px solid #ECE7E2; } /* O traço que separa a abertura do roteiro vira só espaço. */ #view-chat #thread[data-gerando] .msg--ai:last-of-type .msg__body > hr { height: 0; margin: 16px 0 0; border: 0; padding: 0; background: none; } /* O cartão agora é elemento de verdade mesmo durante a escrita, então o remendo de CSS sai do caminho. */ #view-chat #thread[data-gerando] .msg--ai:last-of-type .msg__body > :is(h4:first-of-type, h4:first-of-type ~ *, hr:first-of-type ~ *) { background: none; border-left: 0; border-right: 0; border-radius: 0; padding-left: 0; padding-right: 0; } #view-chat #thread[data-gerando] .msg--ai:last-of-type .msg__body > h4:first-of-type { border-top: 0; padding-top: 22px; } #view-chat #thread[data-gerando] .msg--ai:last-of-type .msg__body > :is(h4:first-of-type, h4:first-of-type ~ *):last-child { border-bottom: 0; padding-bottom: 0; } /* Enquanto cresce, o cartão não precisa piscar: a borda de baixo acompanha o texto. */ #view-chat #thread .msg--ai .msg__body .lab-card { transition: none; }