/* ============================================================================ Source-AI — primitivo de layout do painel principal Regiões: A (navegação) · B (abas de sessão) · C (sidenavs) · D (view) · E (composer) REGRA DE COR: o cromo do layout (barra, abas, painéis, menus, chips, medidores) é NEUTRO. Cor de marca só aparece onde identifica uma LLM — dentro da view (bolha de prompt, avatar da LLM) e no composer (campo de prompt, botão de envio, chips de escolha de LLM). A paleta ativa vem de `body[data-llm=...]`. Interação dos painéis/menus é CSS-only (inputs escondidos + body:has()). ========================================================================== */ :root { --pad: 12px; /* folga única para todas as bordas da janela */ --topbar-h: calc(50px + 2 * var(--pad)); --col-w: 1080px; /* largura da coluna central (D + E) */ --panel-w: 360px; /* largura dos painéis A3/C5 no desktop */ /* --- cromo neutro --- */ --ink: #24262b; /* texto principal */ --ink-2: #5c616b; /* texto secundário e ÍCONES dos menus */ --dark: #3d3f44; /* superfícies escuras (aba ativa, avatares) */ /* --- sinais de status (semânticos, sem laranja para não imitar LLM) --- */ --ok: #30a659; /* fluindo */ --busy: #0fa3cc; /* desenvolvendo (pulsa) */ --warn: #b8910f; /* pendente / testar */ --bad: #e51f1f; /* ocorrente / bullet de novidade */ --done: #7d8490; /* concluído */ --radius-panel: 26px; --glass-hi: rgba(255, 255, 255, .75); } /* ---------------------------------------------------------------------------- PALETAS DE LLM — trocar `data-llm` no repinta histórico e composer. -------------------------------------------------------------------------- */ body[data-llm="claude"] { --llm: #df6949; --llm-2: #DE7356; /* laranja oficial do Claude */ --llm-soft: rgba(217, 119, 87, .16); --llm-border: rgba(217, 119, 87, .42); --llm-shadow: rgba(217, 119, 87, .40); --llm-ink: #542a17; } body[data-llm="gpt"] { --llm: #10a37f; --llm-2: #4cc4a5; --llm-soft: rgba(16, 163, 127, .16); --llm-border: rgba(16, 163, 127, .42); --llm-shadow: rgba(16, 163, 127, .38); --llm-ink: #0c4a3c; } body[data-llm="gemini"] { --llm: #4285f4; --llm-2: #7cabf8; --llm-soft: rgba(66, 133, 244, .16); --llm-border: rgba(66, 133, 244, .42); --llm-shadow: rgba(66, 133, 244, .38); --llm-ink: #17335f; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { /* Apple primeiro (macOS/iOS usam a do sistema, sem baixar nada); a Inter auto-hospedada é o fallback para Windows, Linux e Android. As demais só entram se a Inter falhar em carregar. */ font: 13.666px/1.5 -apple-system, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-optical-sizing: auto; color: var(--ink); min-height: 100vh; /* fundo neutro com variação de luz — é o que dá relevo ao liquid glass */ background: radial-gradient(1100px 720px at 88% -12%, #ffffff 0%, transparent 60%), radial-gradient(950px 680px at -8% 28%, #dfe4ec 0%, transparent 58%), radial-gradient(900px 860px at 52% 118%, #ffffff 0%, transparent 62%), linear-gradient(#eef0f4, #e3e6ec); background-attachment: fixed; } .ui-state { display: none; } /* ============================================================================ LIQUID GLASS — receita base (translucidez + blur saturado + borda especular) ========================================================================== */ .glass { position: relative; background: linear-gradient(135deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .26)); -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%); border: 1px solid rgba(255, 255, 255, .65); box-shadow: 0 10px 34px rgba(38, 50, 78, .14), inset 0 1px 0 var(--glass-hi), inset 0 -10px 26px rgba(255, 255, 255, .16); } /* ============================================================================ SCROLLBARS — cinza claro, sobrepostas ao conteúdo (calha invisível). Como o track é transparente e o polegar tem borda transparente com `background-clip: padding-box`, ele flutua sobre o conteúdo em vez de ocupar uma faixa cinza. Containers internos (campo de prompt, menus) usam a variante `.scroll-tiny`, mais fina. Exceção: a barra da VIEW (a rolagem da página) é a barra larga normal e ganha uma calha na cor do fundo, para se fundir com ele. A área da barra do documento não recebe o gradiente do body — sem essa cor, o navegador pinta ali a faixa branca/cinza padrão dele. ========================================================================== */ :root { --sb-size: 10px; /* barra padrão (painéis, listas) */ --sb-size-tiny: 6px; /* barra de containers internos */ --sb-size-view: 14px; /* barra da view (rolagem da página) */ --sb-thumb: rgba(20, 24, 32, .20); --sb-thumb-hover: rgba(20, 24, 32, .36); --sb-track-view: #e9ecf1; /* tom médio do fundo da página */ } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) transparent; } /* a da página fica na largura cheia e com a calha na cor do fundo */ html { scrollbar-width: auto; scrollbar-color: var(--sb-thumb) var(--sb-track-view); } /* WebKit / Blink */ ::-webkit-scrollbar { width: var(--sb-size); height: var(--sb-size); background: transparent; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; border: 0; } /* --- barra da view: larga, com a calha acompanhando o fundo --- */ html::-webkit-scrollbar { width: var(--sb-size-view); height: var(--sb-size-view); background: var(--sb-track-view); } /* mesma degradê vertical do fundo do body (a camada dominante dele), para a calha acompanhar a página de cima a baixo em vez de virar uma faixa chapada */ html::-webkit-scrollbar-track, html::-webkit-scrollbar-corner { background: linear-gradient(#eef0f4, #e3e6ec); } html::-webkit-scrollbar-thumb { border-width: 3px; } ::-webkit-scrollbar-thumb { background: var(--sb-thumb); border-radius: 999px; border: 2px solid transparent; /* respiro: afina o polegar sem calha */ background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); background-clip: padding-box; } /* nada de setas nas pontas */ ::-webkit-scrollbar-button { display: none; width: 0; height: 0; } /* --- variante fina: containers internos --- A classe .scroll-tiny serve para qualquer caixa nova; os containers internos que já existem entram aqui por seletor, sem depender do HTML. */ .scroll-tiny::-webkit-scrollbar, .prompt-field::-webkit-scrollbar, .chips::-webkit-scrollbar, .llm-menu::-webkit-scrollbar { width: var(--sb-size-tiny); height: var(--sb-size-tiny); } .scroll-tiny::-webkit-scrollbar-thumb, .prompt-field::-webkit-scrollbar-thumb, .chips::-webkit-scrollbar-thumb, .llm-menu::-webkit-scrollbar-thumb { border-width: 1px; } /* ============================================================================ BARRA SUPERIOR — A · B · C ========================================================================== */ .topbar { position: fixed; inset: 0 0 auto 0; z-index: 40; display: flex; align-items: stretch; gap: 10px; padding: var(--pad); height: var(--topbar-h); } /* A e C: pílulas com botões redondos */ .cluster { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 999px; flex-shrink: 0; } /* no desktop o agrupador some da caixa e os botões ficam em linha na pílula */ .cluster-more { display: contents; } .cluster-expander, .cluster-scrim { display: none; } .round-btn { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .7); background: linear-gradient(160deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .45)); box-shadow: 0 2px 8px rgba(38, 50, 78, .10), inset 0 1px 0 #fff; color: var(--ink-2); /* ícones do cromo: cinza */ display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 21px; flex-shrink: 0; transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease; -webkit-tap-highlight-color: transparent; } .round-btn:hover { transform: translateY(-1px); color: var(--ink); box-shadow: 0 4px 12px rgba(38, 50, 78, .16), inset 0 1px 0 #fff; } .round-btn:active { transform: translateY(0); } /* A1: botão da marca (cérebro) — círculo escuro para o logo aparecer */ .brand-btn { background: linear-gradient(160deg, #d0d3dd, #5d6883); border-color: rgba(255, 255, 255, .35); } .brand-btn img { width: 30px; height: 30px; display: block; } /* C1/C2: translúcido quando não há nada de novo */ .round-btn.quiet { opacity: .5; } .round-btn.quiet:hover { opacity: .85; } /* bullet vermelho de novidade/alerta */ .round-btn.has-news::after { content: ""; position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--bad); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); } /* C4: avatar com iniciais */ .avatar-btn { background: linear-gradient(160deg, #4a4c52, #2c2e33); border-color: rgba(255, 255, 255, .35); color: #fff; } .avatar-btn:hover { color: #fff; } .avatar-btn .initials { font-size: 13px; font-weight: 700; letter-spacing: .5px; } /* B: barra de abas */ .tabs-bar { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 26px; overflow-x: auto; scrollbar-width: none; } .tabs-bar::-webkit-scrollbar { display: none; } /* B1/B2: aba com path numa linha e status ao vivo na outra */ .tab { display: flex; align-items: center; gap: 4px; min-width: 168px; max-width: 230px; flex: 0 1 auto; height: 40px; padding: 3px 6px 3px 14px; border-radius: 20px; background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .6); cursor: pointer; transition: background .15s ease; } .tab:hover { background: rgba(255, 255, 255, .75); } .tab-lines { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; } .tab-path { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; } .tab-path .dim { color: var(--ink-2); font-weight: 400; } .tab-status { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--ink-2); line-height: 1.2; white-space: nowrap; overflow: hidden; } .tab-status .metric { margin-left: auto; opacity: .8; } .tab-close { flex-shrink: 0; width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); font-size: 15px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .tab-close:hover { background: rgba(0, 0, 0, .08); color: var(--ink); } /* B1: aba selecionada (escura, neutra) */ .tab.active { background: linear-gradient(160deg, #46484e, #333539); border-color: rgba(255, 255, 255, .25); } .tab.active .tab-path { color: #fff; } .tab.active .tab-path .dim { color: rgba(255, 255, 255, .55); } .tab.active .tab-status { color: rgba(255, 255, 255, .65); } .tab.active .tab-close { color: rgba(255, 255, 255, .6); } .tab.active .tab-close:hover { background: rgba(255, 255, 255, .15); color: #fff; } /* ---------------------------------------------------------------------------- TABGROUP — abas do mesmo projeto/serviço reunidas numa aba só. O bullet da segunda linha diz quantas sessões estão agrupadas; o LONGPRESS expande o grupo num painel escuro que cobre a aba e desce. Clicar em qualquer aba de dentro fecha o grupo (todas são rótulos do mesmo estado). -------------------------------------------------------------------------- */ .tab-group { position: relative; } /* bullet com o número de sessões agrupadas (2ª linha da aba) */ .group-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .30); color: #fff; font-size: 10px; font-weight: 700; line-height: 1; flex-shrink: 0; } /* na aba clara (grupo não selecionado) o bullet inverte para não sumir */ .tab:not(.active) .group-count { background: rgba(20, 24, 32, .10); border-color: rgba(20, 24, 32, .14); color: var(--ink-2); } /* alvo do longpress: cobre a aba, mas deixa o "fechar" acessível por cima */ .tab-group-expander { position: absolute; inset: 0; border-radius: inherit; z-index: 1; cursor: pointer; } .tab-group > .tab-close { position: relative; z-index: 2; } /* --- painel do grupo --- */ .tab-group-panel { display: none; position: absolute; top: -4px; left: -6px; width: 290px; max-width: 78vw; max-height: min(60vh, 420px); overflow-y: auto; z-index: 60; padding: 8px; border-radius: 22px; background: linear-gradient(165deg, #46484e, #303237); border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 18px 44px rgba(20, 24, 32, .34), inset 0 1px 0 rgba(255, 255, 255, .14); cursor: default; } body:has(#st-tabgroup:checked) .tab-group-panel { display: block; } /* a barra de abas recorta o que passa dela; enquanto o grupo está aberto, soltamos o recorte para o painel poder descer sobre a view */ body:has(#st-tabgroup:checked) .tabs-bar { overflow: visible; } /* véu: tocar fora fecha o grupo */ .tabgroup-scrim { display: none; position: fixed; inset: 0; z-index: 20; } body:has(#st-tabgroup:checked) .tabgroup-scrim { display: block; } .group-head { display: flex; align-items: center; gap: 8px; padding: 4px 4px 8px 12px; } .group-name { flex: 1; min-width: 0; color: rgba(255, 255, 255, .70); font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .group-close { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .6); font-size: 15px; cursor: pointer; } .group-close:hover { background: rgba(255, 255, 255, .15); color: #fff; } /* abas de dentro do grupo: mesmas duas linhas, empilhadas */ .tab-in-group { display: flex; align-items: center; gap: 4px; padding: 7px 6px 7px 12px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid transparent; cursor: pointer; transition: background .15s ease; } .tab-in-group + .tab-in-group { margin-top: 6px; } .tab-in-group:hover { background: rgba(255, 255, 255, .14); } .tab-in-group.active { background: rgba(255, 255, 255, .17); border-color: rgba(255, 255, 255, .22); } .tab-in-group .tab-lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .tab-in-group .tab-path { display: block; color: #fff; } .tab-in-group .tab-path .dim { color: rgba(255, 255, 255, .55); } .tab-in-group .tab-status { color: rgba(255, 255, 255, .62); } .tab-in-group .tab-close { color: rgba(255, 255, 255, .55); } .tab-in-group .tab-close:hover { background: rgba(255, 255, 255, .18); color: #fff; } /* bolinhas de status ao vivo */ .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block; margin-top: 2px; } .dot.idle { background: var(--ok); } .dot.working { background: var(--busy); animation: pulse 1.2s ease-in-out infinite; } .dot.pending { background: var(--warn); } .dot.done { background: var(--done); } .dot.alert { background: var(--bad); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } /* ============================================================================ PAINÉIS FLUTUANTES — A3 (menu principal) e C5 (menu lateral) ========================================================================== */ .panel { position: fixed; top: calc(var(--topbar-h) + 4px); bottom: var(--pad); width: var(--panel-w); border-radius: var(--radius-panel); z-index: 45; /* acima do composer: painel aberto tem prioridade */ display: flex; flex-direction: column; overflow: hidden; /* fechado por padrão */ opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transition: opacity .18s ease, transform .18s ease, visibility .18s; } .panel-left { left: var(--pad); transform-origin: 24px 0; } .panel-right { right: var(--pad); transform-origin: calc(100% - 24px) 0; } /* abertura (CSS-only) */ body:has(#st-menu:checked) #main-menu, body:has(input[name="side"]:checked:not(#side-none)) #side-panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .panel-head { display: flex; align-items: center; gap: 8px; padding: 12px; } .panel-title { flex: 1; margin: 0; font-size: 16px; font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .panel-title .t { display: none; } .icon-btn { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .65); background: rgba(255, 255, 255, .5); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; font-size: 19px; cursor: pointer; transition: background .15s ease, visibility .15s; } .icon-btn:hover { background: rgba(255, 255, 255, .85); color: var(--ink); } /* níveis: só o nível ativo aparece */ .panel-level { display: none; flex-direction: column; gap: 10px; padding: 6px 14px 14px; overflow-y: auto; } /* ---- A3: menu principal ---- */ body:has(#a3-lvl-root:checked) #main-menu .lvl-root, body:has(#a3-lvl-dev:checked) #main-menu .lvl-dev, body:has(#a3-lvl-serv:checked) #main-menu .lvl-serv { display: flex; } body:has(#a3-lvl-root:checked) #main-menu .t-root, body:has(#a3-lvl-dev:checked) #main-menu .t-dev, body:has(#a3-lvl-serv:checked) #main-menu .t-serv { display: inline; } body:has(#a3-lvl-root:checked) #main-menu .back { visibility: hidden; } /* ---- C5: menu lateral (conteúdo conforme C1–C4) ---- */ body:has(#side-notif:checked) #side-panel .sec-notif { display: flex; } body:has(#side-tasks:checked) #side-panel .sec-tasks { display: flex; } body:has(#side-user:checked) #side-panel .sec-user { display: flex; } body:has(#side-config:checked):has(#c5-lvl-root:checked) #side-panel .sec-config.lvl-root { display: flex; } body:has(#side-config:checked):has(#c5-lvl-sub:checked) #side-panel .sec-config.lvl-sub { display: flex; } body:has(#side-notif:checked) #side-panel .t-notif { display: inline; } body:has(#side-tasks:checked) #side-panel .t-tasks { display: inline; } body:has(#side-user:checked) #side-panel .t-user { display: inline; } body:has(#side-config:checked):has(#c5-lvl-root:checked) #side-panel .t-config { display: inline; } body:has(#side-config:checked):has(#c5-lvl-sub:checked) #side-panel .t-config-sub { display: inline; } /* voltar do C5 só faz sentido no sub-nível */ #side-panel .back { visibility: hidden; } body:has(#side-config:checked):has(#c5-lvl-sub:checked) #side-panel .back { visibility: visible; } /* cards de navegação (nível raiz do A3) — ícones cinza */ .nav-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 2px 10px rgba(38, 50, 78, .08), inset 0 1px 0 #fff; cursor: pointer; transition: transform .15s ease, background .15s ease; } .nav-card:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .8); } .card-ico { width: 44px; height: 44px; flex-shrink: 0; border-radius: 14px; background: rgba(20, 24, 32, .06); border: 1px solid rgba(20, 24, 32, .10); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; font-size: 24px; } .card-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .card-txt strong { font-size: 15px; } .card-txt small { color: var(--ink-2); font-size: 12.5px; } .chev { color: var(--ink-2); font-size: 20px; flex-shrink: 0; opacity: .7; } /* itens de lista (níveis 2 do A3 e listas do C5) — ícones cinza */ .nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; border: 1px solid transparent; background: rgba(255, 255, 255, .35); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background .15s ease; } .nav-item:hover { background: rgba(255, 255, 255, .7); border-color: rgba(255, 255, 255, .8); } .nav-item > .material-symbols-outlined:first-child { color: var(--ink-2); font-size: 21px; flex-shrink: 0; } .nav-item .item-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; } .nav-item .item-txt small { color: var(--ink-2); font-size: 12px; } .nav-item > span:not(.item-txt):not(.material-symbols-outlined) { flex: 1; } /* item de notificação novo: destaque pelo peso + bullet vermelho (sem cor de marca) */ .nav-item.fresh { background: rgba(255, 255, 255, .78); } .nav-item.fresh > .material-symbols-outlined:first-child { color: var(--ink); } .nav-item.fresh .item-txt strong::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 50%; background: var(--bad); vertical-align: middle; } /* card do usuário (C4) */ .user-card { display: flex; align-items: center; gap: 14px; padding: 16px 12px; } .big-avatar { width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(160deg, #4a4c52, #2c2e33); color: #fff; font-size: 19px; font-weight: 700; letter-spacing: .5px; display: inline-flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); } .user-card .item-txt { display: flex; flex-direction: column; } .user-card small { color: var(--ink-2); } /* ============================================================================ D) VIEW DE SESSÃO — aqui a cor da LLM é permitida ========================================================================== */ .view { padding: calc(var(--topbar-h) + 10px) var(--pad) 250px; } .view-col { max-width: var(--col-w); margin: 0 auto; display: flex; flex-direction: column; gap: 26px; } .round { display: flex; align-items: flex-start; gap: 10px; } .round-user { flex-direction: row-reverse; } /* D1/D3: avatares de rodada */ .msg-avatar { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; letter-spacing: .3px; box-shadow: 0 2px 8px rgba(38, 50, 78, .18), inset 0 1px 0 rgba(255, 255, 255, .3); } /* D1: usuário — neutro */ .user-avatar { background: linear-gradient(160deg, #4a4c52, #2c2e33); color: #fff; } /* D3: LLM — cor da marca */ .llm-avatar { background: linear-gradient(160deg, var(--llm-2), var(--llm)); color: #fff; } /* D2/D4: bolhas */ .bubble { max-width: 78%; padding: 14px 18px; border-radius: 22px; line-height: 1.55; } .bubble p { margin: 0 0 .7em; } .bubble p:last-child { margin-bottom: 0; } /* D2: prompt do usuário — pintado com a cor da LLM de destino */ .bubble-prompt { background: linear-gradient(150deg, var(--llm-2), var(--llm)); color: #fff; border-top-right-radius: 8px; box-shadow: 0 6px 20px var(--llm-shadow), inset 0 1px 0 rgba(255, 255, 255, .35); } /* D4: resposta da LLM */ .bubble-reply { background: #fff; border: 1px solid rgba(255, 255, 255, .9); border-top-left-radius: 8px; box-shadow: 0 6px 22px rgba(38, 50, 78, .10); max-width: 88%; } /* ============================================================================ E) COMPOSER ========================================================================== */ .composer-wrap { position: fixed; inset: auto 0 0 0; z-index: 35; padding: 0 var(--pad) var(--pad); pointer-events: none; /* só o composer em si captura */ } .composer { pointer-events: auto; max-width: var(--col-w); margin: 0 auto; border-radius: var(--radius-panel); padding: 12px 14px 6px; display: flex; flex-direction: column; gap: 9px; } /* E1 + E2 — neutros */ .composer-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--ink-2); padding: 0 4px; } .session-status { display: flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; overflow: hidden; } .session-status .dim { opacity: .75; } .session-usage { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .meter { display: inline-flex; align-items: center; gap: 6px; } .meter-label { font-size: 11px; } .meter-bar { width: 72px; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, .10); overflow: hidden; display: inline-block; } .meter-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #4b515c55, #4b515c); } .meter-bar i.warn { background: linear-gradient(90deg, #4b515c55, #4b515c); } .meter-val { font-size: 11px; font-variant-numeric: tabular-nums; } /* E3: chips — neutros */ .chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 2px; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .8); box-shadow: 0 1px 4px rgba(38, 50, 78, .08); font-size: 12px; color: var(--ink); max-width: 260px; } .chip > span:not(.material-symbols-outlined) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chip > .material-symbols-outlined { font-size: 15px; color: var(--ink-2); flex-shrink: 0; } .chip-x { width: 18px; height: 18px; flex-shrink: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .07); color: var(--ink-2); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .chip-x:hover { background: rgba(0, 0, 0, .15); color: var(--ink); } /* E4 + E5: envolvidos em padding (tipo header) — pintados com a cor da LLM */ /* a moldura (fundo + borda da LLM) vive AQUI, envolvendo campo e botão */ .prompt-wrap { display: flex; align-items: flex-end; gap: 10px; padding: 6px 6px 6px 12px; border-radius: 30px; background: var(--llm-soft); border: 2px solid var(--llm-border); box-shadow: inset 0 1px 3px rgba(20, 24, 32, .06), inset 0 1px 0 rgba(255, 255, 255, .4); transition: border-color .15s ease; } /* o foco do campo acende a moldura inteira */ .prompt-wrap:focus-within { border-color: var(--llm); } .prompt-row { flex: 1; display: flex; align-items: flex-end; gap: 10px; } /* o campo em si fica transparente: quem desenha a caixa é o .prompt-wrap */ .prompt-field { flex: 1; min-height: 40px; max-height: 45vh; overflow-y: auto; padding: 6px 4px; background: transparent; border: 0; outline: none; color: var(--llm-ink); } .prompt-field:empty::before { content: attr(data-placeholder); color: var(--llm-ink); opacity: .5; pointer-events: none; } /* E5: botão de envio — ícone da LLM + nome, com modelo · esforço embaixo */ .send-slot { position: relative; flex-shrink: 0; } .send-btn { display: inline-flex; align-items: center; gap: 9px; min-height: 45px; padding: 3px 14px 3px 6px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 22px; background: linear-gradient(150deg, var(--llm-2), var(--llm)); color: #fff; font: inherit; cursor: pointer; box-shadow: 0 6px 18px var(--llm-shadow), inset 0 1px 0 rgba(255, 255, 255, .45); transition: transform .15s ease, box-shadow .15s ease; -webkit-tap-highlight-color: transparent; } .send-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px var(--llm-shadow), inset 0 1px 0 rgba(255, 255, 255, .45); } .send-btn:active { transform: scale(.98); } .send-ico { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: rgba(255, 255, 255, .24); border: 1px solid rgba(255, 255, 255, .40); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; } /* as duas linhas alinhadas à esquerda, uma sob a outra */ .send-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; } .send-name { font-size: 14.5px; font-weight: 600; } .send-sub { font-size: 11px; opacity: .88; } /* menu flutuante do E5 (longpress; exibição controlada por JS futuramente) */ .llm-menu { position: absolute; right: 0; bottom: calc(100% + 10px); width: 250px; border-radius: 20px; padding: 12px; display: flex; flex-direction: column; gap: 10px; z-index: 50; } .llm-menu[hidden] { display: none; } .llm-menu-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .llm-menu-group small { width: 100%; text-transform: uppercase; letter-spacing: .6px; font-size: 10px; color: var(--ink-2); } .llm-menu .sel { border: 1px solid rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .55); color: var(--ink); font: inherit; font-size: 12.5px; padding: 5px 11px; border-radius: 999px; cursor: pointer; } /* modelo e esforço seguem a cor da LLM em uso */ .llm-menu .sel.active { background: linear-gradient(150deg, var(--llm-2), var(--llm)); border-color: transparent; color: #fff; } /* cada marca carrega a SUA paleta, mesmo quando não está selecionada */ .llm-menu .sel[data-llm="claude"] { --llm: #D97757; --llm-2: #e8a288; } .llm-menu .sel[data-llm="gpt"] { --llm: #10a37f; --llm-2: #4cc4a5; } .llm-menu .sel[data-llm="gemini"] { --llm: #4285f4; --llm-2: #7cabf8; } .llm-menu .sel[data-llm]::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--llm); vertical-align: 1px; } .llm-menu .sel[data-llm].active::before { background: rgba(255, 255, 255, .9); } /* E6–E9: ferramentas — neutras */ .composer-tools { display: flex; align-items: center; gap: 6px; padding: 0 2px; } .tools-spacer { flex: 1; } .tool-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--ink-2); font: inherit; font-size: 12.5px; cursor: pointer; transition: background .15s ease, color .15s ease; -webkit-tap-highlight-color: transparent; } .tool-btn:hover { background: rgba(255, 255, 255, .6); color: var(--ink); } .tool-btn .material-symbols-outlined { font-size: 18px; } /* E8/E9: estado ligado dos seletores — contraste neutro, sem cor de marca */ .tool-btn.toggle:has(input:checked) { background: rgba(20, 24, 32, .82); border-color: rgba(20, 24, 32, .82); color: #fff; } .tool-btn.toggle:has(input:checked) .material-symbols-outlined { color: #fff; } /* ============================================================================ MOBILE - a folga com a borda da janela é a MESMA para todos os elementos (--pad: 3vw) - cada cluster mostra só UM ícone; tocar expande os demais em coluna ========================================================================== */ @media (max-width: 760px) { :root { --pad: 3vw; } .topbar { gap: 6px; } /* --- clusters colapsados: só o botão-líder aparece --- */ .cluster { position: relative; } .cluster-more { display: none; position: absolute; top: calc(100% + 8px); flex-direction: column; gap: 6px; padding: 6px; border-radius: 999px; } #nav-cluster .cluster-more { left: 0; } #side-cluster .cluster-more { right: 0; } /* alvo que expande: cobre o botão-líder enquanto está fechado */ .cluster-expander { display: block; position: absolute; inset: 0; border-radius: 999px; z-index: 2; cursor: pointer; } /* --- expandido --- */ body:has(#st-navexp:checked) #nav-cluster .cluster-more, body:has(#st-sideexp:checked) #side-cluster .cluster-more { display: flex; } body:has(#st-navexp:checked) #nav-cluster .cluster-expander, body:has(#st-sideexp:checked) #side-cluster .cluster-expander { display: none; } /* véu que recolhe ao tocar fora */ .cluster-scrim { position: fixed; inset: 0; z-index: 20; } body:has(#st-navexp:checked) #scrim-nav { display: block; } body:has(#st-sideexp:checked) #scrim-side { display: block; } /* --- painéis: mesma folga das bordas --- */ .panel { top: calc(var(--topbar-h) + var(--pad)); bottom: var(--pad); left: var(--pad); right: var(--pad); width: auto; } .view { padding: calc(var(--topbar-h) + var(--pad)) var(--pad) 250px; } .bubble { max-width: 88%; } .bubble-reply { max-width: 94%; } .msg-avatar { width: 30px; height: 30px; font-size: 11px; } .composer { padding: 10px; gap: 8px; } .composer-meta { flex-wrap: wrap; } .meter-bar { width: 54px; } .tool-btn { padding: 6px 9px; } .tool-btn span:not(.material-symbols-outlined) { font-size: 12px; } /* --- prompt wrap: coluna no mobile, botão embaixo e à direita --- */ .prompt-wrap { flex-direction: column; align-items: flex-end; /* right-bottom: o botão encosta na direita */ justify-content: flex-end; gap: 6px; padding: 8px; } .prompt-row { width: 100%; flex-direction: column; gap: 6px; } .prompt-field { min-height: 48px; padding: 4px 6px; } .send-slot { align-self: flex-end; } .send-btn { min-height: 40px; padding: 3px 12px 3px 5px; gap: 7px; } .send-ico { width: 24px; height: 24px; font-size: 11px; } .send-name { font-size: 12px; } .send-sub { font-size: 9px; } } /* Telas bem estreitas: ferramentas do composer só com ícones */ @media (max-width: 480px) { .tool-btn span:not(.material-symbols-outlined) { display: none; } .tool-btn { padding: 8px 10px; } .tool-btn .material-symbols-outlined { font-size: 20px; } }