/* * ft-assistant-desk.css — Balcão do assistente (Views/Shared/_FtAssistantDesk.cshtml + Scripts/Components/ft-assistant-desk.js). Plano * docs/Features/support.md, passos B2 a B8. Prefixo ft-desk- (regra de ouro #5). * * CASCA (passo B8, decisão do dono de 2026-09-29): o Balcão deixou o painel claro no canto e usa a casca da modal do * chat IA — palco escuro com o assistente 3D à esquerda, conversa à direita. Quem a desenha são as regras do CHAT, * reaproveitadas sem cópia: ft-chat-surface.css (.ft-ai-app, .ft-ai-main, .ft-ai-log, .ft-ai-msg) e ft-assistant.css (o * palco, .assistant-conv, .assistant-sugg, .assistant-send, .assistant-close e o grid palco | conversa, com o corte de 860 px; o composer * e o rodapé do chat não entram — o Balcão não conversa, só oferece as ações, desde 2026-09-29). Por isso a página * carrega os dois ANTES deste arquivo (bundles home-ft e ft-layout). Aqui fica: * 1. o botão flutuante (Home); * 2. a caixa do — as medidas de .ft-modal__dialog--assistant — e o ::backdrop da FtModal do assistente; * 3. o que a página do iframe do chat (Ai/Panel, html.ft-ai-embed) dá ao card e aqui não existe: fundo, cantos e a * folga por onde a torre do palco sobe; * 4. a BASE que o chat herda do ft-theme.css (fonte, box-sizing, font: inherit, foco, disabled) e o FALLBACK DE TOKEN * das regras do chat que o Balcão usa: a Home não carrega o tema (home-ft.css copia só parte dos tokens) e a tela * legada do app não tem nenhum; * 5. o que é só do Balcão: Recomeçar, três pontos, cards, campos, tutoriais e o player. * * ESPECIFICIDADE, não ordem: no app o ft-layout (com este arquivo) vem ANTES do fixtres-components, que traz de novo o * ft-assistant.css e o ft-chat-surface.css. Toda regra daqui que sobrescreve uma do chat leva .ft-desk--shell na frente — * uma classe a mais que a do chat, e ganha em qualquer ordem de carga. Com os tokens do tema (tela Fixtres, clara ou * escura) o valor é o MESMO do chat; o literal do fallback é o do tema claro (ft-light.css). * ⚠️ Restrição do kit 3D: nada de filter/backdrop-filter/opacity animada no nem no card — são ancestrais do * . O desfoque do fundo é do ::backdrop, que não é ancestral de nada. * * NOMES — .ft-desk--shell é a casca (o ) e .ft-desk__app o card; peças que o JS clona no log têm nome próprio * (.ft-desk-card, .ft-desk-field, .ft-desk-dots, .ft-desk-meta…); .ft-desk-fab é o botão flutuante. O player * (dialog.ft-desk-player) vai para o , FORA da casca, e por isso tem base e box-sizing próprios. Estado sem * prefixo (is-invalid; body.ft-desk-open). */ /* ---------- 1. Botão flutuante ---------- */ /* Acima do selo do reCAPTCHA v3 (fixo no canto inferior direito), onde ficava o botão do WhatsApp; z-index 40, ABAIXO do header da Home (50): o A6 achou o botão antigo (60) por cima do menu aberto no celular. No app ele não aparece (.ft-desk-host--nofab, ft-topnav.css): a entrada é o avatar da topnav. O wrapper .assistant-2d do avatar e os rostos do kit (.assistant-face-kit) são regras do ft-assistant.css, que a página carrega antes deste arquivo. */ .ft-desk-fab, .ft-desk-fab *, .ft-desk-fab::after { box-sizing: border-box; } .ft-desk-fab { position: fixed; right: 20px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 40; width: 72px; height: 72px; border-radius: 50%; border: 0; padding: 8px; margin: 0; background: #fff; box-shadow: 0 14px 34px rgba(0, 0, 0, .25); cursor: pointer; display: grid; place-items: center; line-height: 0; } /* Anel pulsante. pointer-events: none — o anel cresce além do botão e não pode roubar clique do que está embaixo. */ .ft-desk-fab::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--ft-color-assistant-secondary, #00b638); opacity: .6; animation: ft-desk-pulse 2.2s ease-out infinite; pointer-events: none; } @keyframes ft-desk-pulse { 0% { transform: scale(.9); opacity: .7; } 100% { transform: scale(1.35); opacity: 0; } } .ft-desk-fab__badge { position: absolute; top: -6px; left: -6px; background: var(--ft-color-assistant-secondary, #00b638); color: #fff; font: 700 11px var(--ft-font-display, "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif); border-radius: 999px; padding: 3px 8px; } .ft-desk-fab:focus-visible { outline: 3px solid var(--ft-color-assistant-primary, #fe9402); outline-offset: 2px; } body.ft-desk-open .ft-desk-fab { display: none; } /* ---------- 2. A casca: o com as medidas da modal do assistente (.ft-modal__dialog--assistant, ft-assistant.css) ---------- */ /* Largura: o card (1040) + 16 px à direita, onde o × flutua fora do canto; 100vw − 32 é a área útil da FtModal (padding de 16 px). Altura: o card (700, limitado a 100vh − 72 como no chat) MAIS a torre que sobe acima dele. O UA dá ao dialog:modal max-width/max-height, margem, padding, borda, fundo e overflow próprios: todos reescritos. Sem display aqui — o do UA (none fechado, block aberto) é o que abre e fecha. Fonte e tamanho: os do corpo do chat na modal (ft-theme.css: html 90% × 1rem = 14,4 px, line-height 1.5, a família do tema); na Home, a família do corpo da Home (--ft-font-body), que o dono aprovou no A7. */ dialog.ft-desk--shell { position: fixed; inset: 0; margin: auto; padding: 0; border: 0; background: transparent; overflow: visible; width: min(calc(1040px + 16px), calc(100vw - 32px)); max-width: none; height: min(calc(700px + var(--ft-assistant-stage-overhang, 44px)), calc(100vh - 72px + var(--ft-assistant-stage-overhang, 44px))); /* Os mesmos números em dvh, onde houver: no celular o 100vh conta a barra do navegador escondida, e o fim do log (o fim da casca) ficaria atrás dela. No desktop dvh = vh — a segunda linha não muda nada. */ height: min(calc(700px + var(--ft-assistant-stage-overhang, 44px)), calc(100dvh - 72px + var(--ft-assistant-stage-overhang, 44px))); max-height: none; color: var(--ft-text-primary, #212529); font-family: var(--ft-font-body, var(--ft-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif)); font-size: 14.4px; font-weight: 400; line-height: 1.5; text-align: left; } /* Sem nativo (navegador antigo) o JS abre pelo atributo open, e o UA não esconderia a casca fechada. */ .ft-desk--shell:not([open]) { display: none; } /* O fundo da FtModal do assistente (ft-assistant.css › .ft-modal:has(> .ft-modal__dialog--assistant) > .ft-modal__backdrop). */ dialog.ft-desk--shell::backdrop { background: rgba(12, 22, 17, .58); backdrop-filter: blur(3px); } [data-theme="dark"] dialog.ft-desk--shell::backdrop { background: var(--ft-bg-backdrop, rgba(12, 22, 17, .58)); } /* ---------- 3. O card — o que o html.ft-ai-embed do chat dá ao .ft-ai-app--modal (ft-assistant.css › MODAL) ---------- */ /* min-height 0: o .ft-ai-app do chat nasce com 380 px de mínimo, e no celular deitado a casca tem menos que isso. */ .ft-desk--shell .ft-desk__app { position: relative; height: 100%; min-height: 0; background: var(--ft-bg-surface, #fff); border-radius: 28px; } .ft-desk--shell .ft-desk__app > .ft-ai-main { border-radius: 0; } @media not all and (max-width: 860px) { /* Com palco: o card desce a folga da torre (a margem negativa dela sobe nesse espaço) e deixa 16 px à direita para o × flutuar fora do canto — as mesmas medidas do card dentro do iframe. */ .ft-desk--shell .ft-desk__app:has(> .ft-assistant-stage) { margin: var(--ft-assistant-stage-overhang, 44px) 16px 0 0; height: calc(100% - var(--ft-assistant-stage-overhang, 44px)); } } /* ---------- 4. Base do ft-theme.css e fallback de token das regras do chat ---------- */ .ft-desk--shell, .ft-desk--shell *, .ft-desk--shell *::before, .ft-desk--shell *::after { box-sizing: border-box; } /* Especificidade ZERO de propósito: `font: inherit` com uma classe empataria com .assistant-send (0,1,0) e, vindo depois dela na Home, apagaria o 14px/600 do Enviar. Qualquer regra de autor ganha desta; ela só ganha do navegador. */ :where(.ft-desk--shell) :where(button, input, select, textarea) { font: inherit; } .ft-desk--shell :where(h2, h3, p) { margin: 0; } .ft-desk--shell button { cursor: pointer; } .ft-desk--shell button:disabled { cursor: not-allowed; opacity: .65; } .ft-desk--shell :focus-visible { outline: 0; box-shadow: 0 0 0 .25rem var(--ft-focus-ring, rgba(13, 110, 253, .25)); } /* O Bootstrap da tela legada contorna o botão até no clique do mouse. */ .ft-desk--shell button:focus:not(:focus-visible) { outline: 0; } /* O título é h2 do navegador (negrito) no chat; o Bootstrap da tela legada o deixa em 500. */ .ft-desk--shell .assistant-conv__title { font-weight: 700; } /* Cada linha abaixo: o seletor do chat com .ft-desk--shell na frente e o MESMO valor, só com o literal do tema claro atrás do token. Sem o token (Home, tela legada) sai o claro; com ele, sai idêntico ao chat. */ .ft-desk--shell .assistant-stage__ctx .dot { background: var(--ft-color-assistant-primary, #fe9402); } .ft-desk--shell .assistant-conv__head { border-bottom: 1px solid var(--ft-border-color, #dee2e6); } .ft-desk--shell .assistant-conv__status { color: var(--ft-text-muted, #868e96); } .ft-desk--shell .assistant-conv__status::before { background: var(--ft-color-assistant-secondary, #00b638); } .ft-desk--shell .assistant-close { color: var(--ft-text-primary, #212529); } .ft-desk--shell .ft-ai-app--modal > .assistant-close { background: var(--ft-bg-muted, #f1f3f5); } @media not all and (max-width: 860px) { .ft-desk--shell .ft-ai-app--modal:has(> .ft-assistant-stage) > .assistant-close { background: var(--ft-bg-surface, #fff); } } .ft-desk--shell .assistant-sugg button { border: 1px solid var(--ft-border-color, #dee2e6); background: var(--ft-bg-surface, #fff); } .ft-desk--shell .assistant-sugg button:hover { border-color: var(--ft-color-assistant-primary, #fe9402); } .ft-desk--shell .assistant-send { background: var(--ft-color-primary, #0d6efd); color: var(--ft-text-inverse, #fff); } .ft-desk--shell .assistant-send:hover { background: var(--ft-color-primary-hover, #0b5ed7); } /* ---------- 5. Cabeçalho: Recomeçar e o × (SVG, regra de ouro #5 — o do chat é o "×" de texto) ---------- */ .ft-desk--shell .ft-desk__btn { border: 0; background: transparent; color: var(--ft-text-secondary, #6c757d); border-radius: 8px; padding: 6px 10px; margin: 0; font-size: 12.5px; font-weight: 500; line-height: 1.2; white-space: nowrap; } .ft-desk--shell .ft-desk__btn:hover { background: var(--ft-bg-muted, #f1f3f5); color: var(--ft-text-primary, #212529); } .ft-desk--shell .assistant-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; } /* ---------- 6. Log: o que o Balcão põe além das bolhas do chat ---------- */ /* As bolhas são .ft-ai-msg (ft-chat-surface.css). Texto de servidor e de visitante pode vir sem espaço (URL, e-mail). */ .ft-desk--shell .ft-ai-log > .ft-ai-msg { overflow-wrap: anywhere; } /* Três pontos enquanto o envio ou a lista não chegam: uma bolha do assistente com três círculos piscando. */ .ft-desk--shell .ft-desk-dots { display: flex; gap: 5px; padding: 14px 16px; } .ft-desk-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--ft-text-secondary, #6c757d); animation: ft-desk-blink 1s infinite ease-in-out; } .ft-desk-dots span:nth-child(2) { animation-delay: .18s; } .ft-desk-dots span:nth-child(3) { animation-delay: .36s; } @keyframes ft-desk-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } } /* pre-line: a mensagem do servidor pode trazer várias linhas (o JS troca o
por quebra). */ .ft-desk-meta { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--ft-border-color, #dee2e6); white-space: pre-line; font: 11px/1.45 ui-monospace, Consolas, monospace; color: var(--ft-text-secondary, #6c757d); } .ft-desk--shell .ft-ai-msg a:not(.assistant-send) { color: var(--ft-color-primary, #0d6efd); } /* "Abrir WhatsApp" na bolha é o botão Enviar do chat num : sem o sublinhado nem a cor de link do Bootstrap/Home. */ .ft-desk--shell a.assistant-send { margin-top: 4px; text-decoration: none; } .ft-desk--shell a.assistant-send:hover { color: var(--ft-text-inverse, #fff); text-decoration: none; } /* Chips (.assistant-sugg button, o visual das sugestões do chat): o grupo já respondido fica apagado e sem clique. */ .ft-desk--shell .ft-desk-chips--used button { opacity: .4; pointer-events: none; } /* ---------- 7. Cards (contato, WhatsApp, tutoriais): filhos diretos do log, na largura toda ---------- */ /* Pintados como as sugestões do chat (.assistant-sugg button): superfície e borda do tema, raio 16. O botão de envio é o Enviar do chat (.assistant-send). */ .ft-desk--shell .ft-desk-card { display: grid; gap: 10px; width: 100%; margin: 0; padding: 14px 16px; background: var(--ft-bg-surface, #fff); color: var(--ft-text-primary, #212529); border: 1px solid var(--ft-border-color, #dee2e6); border-radius: 16px; } .ft-desk-card__title { font-family: var(--ft-font-display, inherit); font-weight: 700; font-size: 15px; line-height: 1.3; } .ft-desk--shell .ft-desk-card p { font-size: 13.5px; color: var(--ft-text-muted, #868e96); } /* minmax(0, 1fr): a largura intrínseca do input não empurra a coluna para fora do card. */ .ft-desk-card__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } @media (max-width: 420px) { .ft-desk-card__grid { grid-template-columns: 1fr; } } .ft-desk-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .ft-desk-card__foot .assistant-send { margin-left: auto; } /* o botão fica sozinho no rodapé, sempre à direita */ /* ---------- 8. Campos (contrato de ft-assistant-desk.js: .ft-desk-field / .ft-desk-feedback / .ft-desk-check / .ft-desk-phone) ---------- */ .ft-desk-field { display: grid; gap: 6px; min-width: 0; } .ft-desk--shell .ft-desk-field label { margin: 0; font-size: 12px; font-weight: 600; color: var(--ft-text-secondary, #6c757d); } .ft-desk--shell .ft-desk-field input, .ft-desk--shell .ft-desk-field textarea { width: 100%; margin: 0; padding: 8px 12px; border: 1px solid var(--ft-border-color, #dee2e6); border-radius: 12px; background: var(--ft-bg-surface, #fff); color: var(--ft-text-primary, #212529); font-size: 14px; line-height: 1.45; } .ft-desk--shell .ft-desk-field textarea { min-height: 64px; resize: vertical; } /* Foco como o do compositor do chat (.assistant-composer:focus-within): borda laranja e o halo claro. */ .ft-desk--shell .ft-desk-field input:focus, .ft-desk--shell .ft-desk-field textarea:focus { outline: 0; border-color: var(--ft-color-assistant-primary, #fe9402); box-shadow: 0 0 0 4px rgba(254, 148, 2, .14); } .ft-desk--shell .ft-desk-field.is-invalid input, .ft-desk--shell .ft-desk-field.is-invalid textarea { border-color: var(--ft-color-danger, #dc3545); } /* O JS escreve a mensagem e liga .is-invalid, mas não a apaga ao corrigir: é isto que a esconde. */ .ft-desk-feedback { display: none; font-size: 12.5px; font-weight: 600; color: var(--ft-color-danger, #dc3545); } .ft-desk-field.is-invalid .ft-desk-feedback, .ft-desk-check.is-invalid .ft-desk-feedback { display: block; } .ft-desk-check { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 10px; font-size: 13px; } .ft-desk--shell .ft-desk-check input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--ft-color-assistant-primary, #fe9402); } .ft-desk--shell .ft-desk-check label { flex: 1 1 0; min-width: 0; margin: 0; cursor: pointer; } .ft-desk--shell .ft-desk-check a { color: var(--ft-color-primary, #0d6efd); text-decoration: underline; cursor: pointer; } .ft-desk-check .ft-desk-feedback { flex-basis: 100%; } .ft-desk--shell .ft-desk-check.is-invalid { color: var(--ft-color-danger, #dc3545); } /* ---------- 9. Tutoriais (passo B6): card com o progresso ---------- */ .ft-desk-progress { height: 8px; border-radius: 999px; background: var(--ft-bg-muted, #f1f3f5); overflow: hidden; } .ft-desk-progress > span { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--ft-color-assistant-secondary, #00b638); transition: width .3s ease; } .ft-desk--shell .ft-desk-tuts__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } /* Cada item com o desenho de uma sugestão do chat (borda do tema, laranja no hover). */ .ft-desk--shell .ft-desk-tut { width: 100%; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 1px solid var(--ft-border-color, #dee2e6); border-radius: 12px; background: var(--ft-bg-surface, #fff); color: var(--ft-text-primary, #212529); padding: 8px 10px; margin: 0; text-align: left; font-size: 14px; line-height: 1.35; } .ft-desk--shell .ft-desk-tut:hover { border-color: var(--ft-color-assistant-primary, #fe9402); } /* Selo do tipo (MP4 | PDF, texto do JS a partir de Extension). */ .ft-desk-tut__type { font: 600 10px/1 ui-monospace, Consolas, monospace; letter-spacing: .02em; text-align: center; color: var(--ft-text-secondary, #6c757d); background: var(--ft-bg-muted, #f1f3f5); border-radius: 6px; padding: 6px 0; } .ft-desk-tut__name { min-width: 0; overflow-wrap: anywhere; } .ft-desk-tut__pct { font: 500 12px ui-monospace, Consolas, monospace; color: var(--ft-text-secondary, #6c757d); } .ft-desk-tut--done .ft-desk-tut__pct { color: var(--ft-color-assistant-secondary-dark, #0b7d2b); font-weight: 700; } /* ---------- 10. Player de tutorial (passo B6): nativo no , FORA da casca ---------- */ /* Abre por cima da casca (top layer) e fecha sem ela. Fica fora dela de propósito, então traz a própria base (fonte, box-sizing) e os mesmos tokens com fallback. Cabeçalho como o das políticas da Home (dialog.ft-home-policy em home-ft.css, que o app logado não carrega). O UA dá ao dialog:modal max-width/max-height, padding e borda próprios: os quatro são reescritos aqui. */ .ft-desk-player, .ft-desk-player *, .ft-desk-player *::before, .ft-desk-player *::after { box-sizing: border-box; } dialog.ft-desk-player { width: min(920px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; border-radius: 20px; overflow: auto; background: var(--ft-bg-surface, #fff); color: var(--ft-text-primary, #212529); box-shadow: 0 24px 60px rgba(0, 0, 0, .3); font-family: var(--ft-font-body, var(--ft-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif)); font-size: 14.4px; line-height: 1.5; text-align: left; } dialog.ft-desk-player::backdrop { background: rgba(15, 23, 42, .55); } /* O display dos filhos abaixo venceria o [hidden] do navegador (o