/* ============================================================================ J.A.R.V.I.S. · AURORA — o sistema de desenho da casa nova ---------------------------------------------------------------------------- Pedido dele (17 ago 2026), com duas imagens de referência e a frase «quero tudo isto exatamente assim implementado, o OS assim fica lindooooo e com opção de claro e escuro nos temas». O QUE ISTO É: um sistema completo — dois temas, uma moldura de sistema operativo (coluna de áreas à esquerda, ecrã ao meio, estado à direita, dock a flutuar) e os componentes que os ecrãs usam. Vive num ficheiro próprio, com prefixo `au-`, e NÃO toca em nada do que já existe: a casa antiga continua a funcionar enquanto esta não estiver de pé. Liga-se com data-shell="aurora" no . AS DUAS REGRAS QUE ISTO NÃO QUEBRA: 1. Um alvo nunca é menor do que 44 px (48 no Jarvis OS) — a lição do respirar.css, que continua a valer. 2. Nenhuma cor vive só dentro de um tema: os componentes falam por tokens, e cada tema redefine os tokens. É o que permite trocar de tema numa linha e não descobrir texto invisível três ecrãs depois. ========================================================================== */ /* ===== 1 · OS DOIS TEMAS =================================================== Claro é o predefinido (é a imagem que ele mandou primeiro). Escuro NÃO é o claro invertido: é uma paleta própria, índigo-noite, porque inverter dá sempre um cinzento sujo e um acento que grita. */ :root[data-shell="aurora"] { /* fundo e vidro */ --au-fundo: #e9f1f8; --au-vidro: rgba(255, 255, 255, 0.58); --au-vidro-forte: rgba(255, 255, 255, 0.74); --au-vidro-fundo: rgba(255, 255, 255, 0.42); --au-aresta: rgba(255, 255, 255, 0.7); --au-linha: rgba(16, 86, 122, 0.14); --au-sombra: 0 10px 40px rgba(35, 70, 95, 0.09); --au-sombra-alta: 0 18px 54px rgba(35, 70, 95, 0.14); --au-veu: linear-gradient(180deg, rgba(240, 246, 251, 0.55), rgba(233, 241, 248, 0.28) 45%, rgba(226, 236, 245, 0.6)); /* tinta */ --au-tinta: #12242f; --au-tinta-2: #48697c; --au-tinta-3: rgba(72, 105, 124, 0.62); /* acentos */ --au-acento: #0e7fae; --au-acento-forte: #0b5f84; --au-acento-veu: rgba(14, 127, 174, 0.10); --au-lav: #7b6bd6; --au-lav-veu: rgba(123, 107, 214, 0.12); --au-ambar: #a35a0e; --au-ambar-veu: rgba(201, 111, 18, 0.12); --au-bom: #2f7d55; --au-mau: #b3403f; /* o orbe do Jarvis — a única coisa saturada em todo o sistema */ --au-orbe: radial-gradient(circle at 34% 28%, #fff 0%, #dfe4fa 26%, #a79fe4 62%, #7a6fd0 100%); --au-orbe-luz: 0 10px 30px rgba(122, 111, 208, 0.32), inset 0 -6px 18px rgba(90, 78, 180, 0.25); /* medida */ --au-r: 22px; --au-r-m: 16px; --au-r-s: 12px; --au-toque: 44px; --au-desfoque: blur(26px) saturate(160%); --au-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --au-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; } :root[data-shell="aurora"][data-au="escuro"] { --au-fundo: #0a0f1e; --au-vidro: rgba(255, 255, 255, 0.045); --au-vidro-forte: rgba(255, 255, 255, 0.07); --au-vidro-fundo: rgba(255, 255, 255, 0.03); --au-aresta: rgba(255, 255, 255, 0.09); --au-linha: rgba(255, 255, 255, 0.07); --au-sombra: 0 12px 44px rgba(0, 0, 0, 0.45); --au-sombra-alta: 0 20px 60px rgba(0, 0, 0, 0.55); --au-veu: linear-gradient(180deg, rgba(10, 15, 30, 0.62), rgba(10, 15, 30, 0.42) 45%, rgba(8, 12, 26, 0.78)); --au-tinta: #e9eef9; --au-tinta-2: #98a8c2; --au-tinta-3: rgba(152, 168, 194, 0.72); /* No escuro o ciano do Jarvis fica agressivo em áreas grandes: o acento passa a azul-violeta, que é o da própria referência dele. */ --au-acento: #7aa6ff; --au-acento-forte: #a9c6ff; --au-acento-veu: rgba(122, 166, 255, 0.14); --au-lav: #9d8cf0; --au-lav-veu: rgba(157, 140, 240, 0.16); --au-ambar: #e6b579; --au-ambar-veu: rgba(226, 160, 84, 0.14); --au-bom: #6fd39b; --au-mau: #ff9a9a; --au-orbe: radial-gradient(circle at 34% 26%, #fff 0%, #cdd8ff 18%, #7f8ff0 55%, #4a4fb8 100%); --au-orbe-luz: 0 14px 44px rgba(90, 100, 220, 0.5), inset 0 -8px 22px rgba(30, 30, 110, 0.6); } /* No Jarvis OS o dedo é o único ponteiro: o alvo mínimo sobe. */ :root[data-shell="aurora"] body.intent-os { --au-toque: 48px; } /* ===== 2 · A MOLDURA ======================================================= */ :root[data-shell="aurora"] body { background: var(--au-fundo); color: var(--au-tinta); } /* A CASA ANTIGA SAI DA FRENTE, INTEIRA. Escondi-a peça por peça à primeira e ficou tudo a sangrar por trás — o reator ao meio, os chips do topo, o painel de contextos, o «Toca para falar». Vi-o na fotografia. Agora esconde-se a moldura toda de uma vez (#app e #os) e trazem-se para dentro as peças que a casa nova REUSA (a caixa de escrever e o reator), em vez de as desenhar outra vez. Nada é apagado: tira-se o data-shell e a casa antiga está lá intacta. */ :root[data-shell="aurora"] #app, :root[data-shell="aurora"] #os, :root[data-shell="aurora"] .hud-flank { display: none !important; } /* ...mas a caixa de escrever REAL, quando é movida para cá, tem de aparecer. */ :root[data-shell="aurora"] :root[data-shell="aurora"] .au-escrever #textBar { display: flex !important; } /* ===== 2b · AS PEÇAS REAIS, VESTIDAS DE NOVO =============================== O #textBar é o de sempre — anexar, escrever, micro, enviar, tudo a funcionar. Só muda de sítio e de roupa: perde o vidro escuro e a posição fixa e passa a ser o interior da caixa da casa nova. */ :root[data-shell="aurora"] .au-escrever #textBar { position: static; inset: auto; width: 100%; max-width: none; margin: 0; padding: 0; background: none; border: none; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; z-index: auto; display: flex; align-items: center; gap: 10px; } /* A PÍLULA ESCURA ERA AQUI, e não no #textBar. O intent.css veste a `.text-bar-row` com fundo, aresta e sombra próprios — eu tinha reposto o pai e deixado o filho vestido, e o resultado era uma pastilha preta dentro de uma caixa clara. Duas fotografias a dizer-me o mesmo até eu ir ver de quem era o fundo. */ :root[data-shell="aurora"] .au-escrever #textBar .text-bar-row { flex: 1; display: flex; align-items: center; gap: 10px; background: none; border: none; border-radius: 0; box-shadow: none; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; } :root[data-shell="aurora"] .au-escrever #textBar textarea { flex: 1; min-height: var(--au-toque); max-height: 30vh; background: none; border: none; box-shadow: none; padding: 10px 4px; color: var(--au-tinta); font-family: var(--au-sans); font-size: 15px; } :root[data-shell="aurora"] .au-escrever #textBar textarea::placeholder { color: var(--au-tinta-3); } :root[data-shell="aurora"] .au-escrever #textBar textarea:focus { border: none; box-shadow: none; } :root[data-shell="aurora"] .au-escrever #textBar .bar-icon { width: 38px; height: 38px; border-radius: 11px; border: none; flex: none; background: none; color: var(--au-tinta-3); } :root[data-shell="aurora"] .au-escrever #textBar .bar-icon:hover { background: var(--au-vidro-fundo); color: var(--au-tinta); } :root[data-shell="aurora"] .au-escrever #textBar .bar-icon.send { background: var(--au-acento); color: var(--au-fundo); box-shadow: none; } :root[data-au="escuro"] .au-escrever #textBar .bar-icon.send { color: #08122a; } :root[data-shell="aurora"] .au-escrever #textBar .attach-tray { width: 100%; order: -1; } /* O REATOR mudado para a coluna de estado: é o mesmo orbe que já pulsa conforme ele está à escuta, a pensar ou a falar — desenhar um segundo era ter dois Jarvis, um vivo e um pintado. */ .au-orbe-g { transition: transform 0.4s ease, box-shadow 0.4s ease, filter 0.4s ease; } /* À escuta: respira devagar. A pensar: pulsa. A falar: mais viva e um pouco maior. Os nomes vêm do reactor.js, e é o aurora.js que os copia para cá. */ .au-orbe-g.au-escuta { animation: auRespira 3.4s ease-in-out infinite; } .au-orbe-g.au-pensa { animation: auRespira 1.1s ease-in-out infinite; filter: saturate(1.25); } .au-orbe-g.au-fala { transform: scale(1.06); filter: saturate(1.35) brightness(1.06); } @keyframes auRespira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } } @media (prefers-reduced-motion: reduce) { .au-orbe-g, .au-orbe-g.au-escuta, .au-orbe-g.au-pensa { animation: none; transform: none; } } .au { position: fixed; inset: 0; z-index: 12; display: none; gap: 14px; padding: 14px; font-family: var(--au-sans); color: var(--au-tinta); } :root[data-shell="aurora"] .au { display: flex; } .au *, .au *::before, .au *::after { box-sizing: border-box; } /* O véu que garante leitura por cima de qualquer papel de parede — inclusive de uma fotografia clara, que é onde o vidro costuma falhar. */ .au-veu { position: fixed; inset: 0; z-index: 11; pointer-events: none; background: var(--au-veu); } :root:not([data-shell="aurora"]) .au-veu { display: none; } /* A receita de vidro, UMA só. Tudo o que é superfície usa isto. */ .au-v { background: var(--au-vidro); border: 1px solid var(--au-aresta); border-radius: var(--au-r); box-shadow: var(--au-sombra); backdrop-filter: var(--au-desfoque); -webkit-backdrop-filter: var(--au-desfoque); } /* ===== 3 · COLUNA DAS ÁREAS (esquerda) ===================================== Aberta mostra nome; fechada fica só o ícone. Os dois estados são pedidos dele («os ecrãs nas várias fases do que é aberto e fechado»), e a largura é a única coisa que muda — nada salta de sítio. */ .au-lado { width: 216px; flex: none; display: flex; flex-direction: column; padding: 20px 14px; gap: 4px; transition: width 0.22s cubic-bezier(0.2, 0.9, 0.3, 1); } .au.enc .au-lado { width: 74px; padding: 20px 12px; } .au-eu { display: flex; align-items: center; gap: 11px; padding: 4px 6px 22px; } .au-cara { width: 40px; height: 40px; border-radius: 50%; flex: none; background: var(--au-orbe); box-shadow: var(--au-orbe-luz); border: 1px solid var(--au-aresta); cursor: pointer; } .au-eu b { font-size: 14px; font-weight: 600; display: block; line-height: 1.25; } .au-eu span { font-size: 11.5px; color: var(--au-tinta-3); } .au.enc .au-eu-txt { display: none; } .au-nav { display: flex; flex-direction: column; gap: 2px; } .au-nav button { display: flex; align-items: center; gap: 12px; min-height: var(--au-toque); padding: 0 12px; border-radius: 14px; border: 1px solid transparent; background: none; cursor: pointer; color: var(--au-tinta-2); font: inherit; font-size: 14px; text-align: left; position: relative; width: 100%; } .au-nav svg { width: 19px; height: 19px; flex: none; opacity: 0.75; } .au-nav button:hover { background: var(--au-vidro-fundo); color: var(--au-tinta); } .au-nav button.on { background: var(--au-vidro-forte); color: var(--au-tinta); font-weight: 550; box-shadow: 0 2px 10px rgba(35, 70, 95, 0.06); } :root[data-au="escuro"] .au-nav button.on { box-shadow: none; } .au-nav button.on svg { opacity: 1; color: var(--au-acento); } .au-nav .au-pt { position: absolute; right: 12px; width: 5px; height: 5px; border-radius: 50%; background: var(--au-acento); } .au.enc .au-nav span, .au.enc .au-nav .au-pt { display: none; } .au.enc .au-nav button { justify-content: center; padding: 0; } .au-esp { flex: 1; } .au-utils { display: flex; gap: 4px; padding: 0 2px 14px; flex-wrap: wrap; } .au-utils button { width: 38px; height: 38px; border: none; background: none; border-radius: 11px; color: var(--au-tinta-3); cursor: pointer; display: grid; place-items: center; } .au-utils button:hover { background: var(--au-vidro-fundo); color: var(--au-tinta); } .au-utils svg { width: 17px; height: 17px; } /* OS BOTÕES ADOPTADOS DO JARVIS OS (energia, teclado, sistema, atualização): entram nesta fila com a roupa da casa nova, não com a da barra antiga. O ⏻ é o único que ganha cor de aviso ao aproximar — desligar não deve parecer igual a mostrar o teclado. */ :root[data-shell="aurora"] .au-utils .round-btn, :root[data-shell="aurora"] .au-utils .jos-sysbtn { width: 38px; height: 38px; min-width: 0; min-height: 0; border-radius: 11px; border: 1px solid transparent; padding: 0; background: none; box-shadow: none; color: var(--au-tinta-3); font-size: 15px; display: grid; place-items: center; } :root[data-shell="aurora"] .au-utils .round-btn::after { display: none; } :root[data-shell="aurora"] .au-utils .round-btn:hover { background: var(--au-vidro-fundo); color: var(--au-tinta); } :root[data-shell="aurora"] .au-utils #josPower:hover { color: var(--au-mau); } :root[data-shell="aurora"] .au-utils #josUpdate { color: var(--au-lav); } /* A fila cresce para duas linhas em vez de empurrar o relógio para fora. */ .au-utils { row-gap: 4px; } .au.enc .au-utils { justify-content: center; } .au-hora { padding: 0 6px; } .au-hora b { display: block; font-size: 33px; font-weight: 300; letter-spacing: -1px; line-height: 1; font-variant-numeric: tabular-nums; } .au-hora span { font-size: 12px; color: var(--au-tinta-3); } .au.enc .au-hora b { font-size: 17px; letter-spacing: 0; } .au.enc .au-hora span { display: none; } /* ===== 4 · O MEIO ========================================================== */ .au-meio { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 18px; padding: 14px 8px 0; } .au-cmd { display: flex; justify-content: center; padding-top: 4px; flex: none; } .au-cmd button { width: min(620px, 100%); display: flex; align-items: center; gap: 11px; min-height: var(--au-toque); padding: 0 16px; border-radius: var(--au-r-m); background: var(--au-vidro-forte); border: 1px solid var(--au-aresta); box-shadow: var(--au-sombra); cursor: pointer; color: var(--au-tinta-3); font: inherit; font-size: 14px; text-align: left; backdrop-filter: var(--au-desfoque); -webkit-backdrop-filter: var(--au-desfoque); } .au-cmd svg { width: 17px; height: 17px; flex: none; } .au-cmd .au-ph { flex: 1; } .au-tecla { font-family: var(--au-mono); font-size: 11px; color: var(--au-tinta-3); border: 1px solid var(--au-linha); border-radius: 6px; padding: 2px 6px; } /* Os ecrãs vivem aqui; um de cada vez. */ .au-ecra { display: none; flex: 1; min-height: 0; flex-direction: column; } .au-ecra.on { display: flex; } /* --- o ecrã da CASA --- */ .au-centro { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 20px 0; overflow-y: auto; } /* Num ecrã alto o bloco fica centrado; num ecrã curto encosta ao topo e rola, em vez de cortar o herói ao meio. */ @media (max-height: 720px) { .au-centro { justify-content: flex-start; } } .au-ola { margin: 0; font-size: clamp(28px, 3.4vw, 46px); font-weight: 300; letter-spacing: -1.2px; line-height: 1.16; text-align: center; text-wrap: balance; } .au-ola .au-nome { color: var(--au-acento); } .au-ola .au-seg { display: block; color: var(--au-tinta-3); } .au-atalhos { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .au-at { width: 122px; padding: 16px 10px 14px; border-radius: 18px; text-align: center; background: var(--au-vidro); border: 1px solid var(--au-aresta); box-shadow: var(--au-sombra); cursor: pointer; color: inherit; font: inherit; backdrop-filter: var(--au-desfoque); -webkit-backdrop-filter: var(--au-desfoque); transition: transform 0.14s ease, box-shadow 0.14s ease; } .au-at:hover { transform: translateY(-2px); box-shadow: var(--au-sombra-alta); } .au-at:active { transform: translateY(0) scale(0.98); } .au-at .au-ic { width: 38px; height: 38px; margin: 0 auto 10px; border-radius: var(--au-r-s); display: grid; place-items: center; background: var(--au-vidro-forte); border: 1px solid var(--au-aresta); color: var(--au-acento); } .au-at .au-ic svg { width: 18px; height: 18px; } .au-at b { display: block; font-size: 13.5px; font-weight: 550; } .au-at span { font-size: 11px; color: var(--au-tinta-3); } .au-cartao { padding: 18px 20px; width: min(660px, 100%); } .au-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; } .au-cab b { font-size: 14.5px; font-weight: 600; } .au-cab .au-mais { border: none; background: none; color: var(--au-tinta-3); cursor: pointer; letter-spacing: 2px; font-size: 15px; padding: 4px 8px; border-radius: 8px; } .au-linha { display: flex; align-items: center; gap: 13px; padding: 12px 0; border-top: 1px solid var(--au-linha); text-align: left; width: 100%; background: none; border-left: none; border-right: none; border-bottom: none; color: inherit; font: inherit; cursor: pointer; } .au-linha:first-of-type { border-top: none; } .au-linha .au-ic { width: 34px; height: 34px; border-radius: 11px; flex: none; display: grid; place-items: center; background: var(--au-acento-veu); color: var(--au-acento-forte); } .au-linha .au-ic svg { width: 16px; height: 16px; } .au-linha .au-txt { flex: 1; min-width: 0; } .au-linha .au-txt b { display: block; font-size: 13.5px; font-weight: 550; } .au-linha .au-txt span { font-size: 12px; color: var(--au-tinta-3); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .au-pill { font-size: 10.5px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; background: var(--au-acento-veu); color: var(--au-acento-forte); } .au-pill.amb { background: var(--au-ambar-veu); color: var(--au-ambar); } .au-pill.lav { background: var(--au-lav-veu); color: var(--au-lav); } .au-quando { font-size: 12px; color: var(--au-tinta-3); font-variant-numeric: tabular-nums; } .au-vazio { color: var(--au-tinta-3); font-size: 13px; padding: 14px 0 4px; margin: 0; } /* --- a caixa de escrever e o dock, no fundo do meio --- */ .au-fundo-meio { flex: none; display: flex; flex-direction: column; gap: 10px; padding-bottom: 6px; } .au-escrever { display: flex; justify-content: center; } /* A ÚNICA CAIXA. Ganha presença por ser a única: mais larga, mais alta, e com a marca do atalho lá dentro — quem procura e quem fala usam a mesma porta. */ .au-escrever .au-cx { width: min(760px, 100%); display: flex; align-items: center; gap: 13px; padding: 10px 14px; border-radius: 22px; min-height: calc(var(--au-toque) + 18px); background: var(--au-vidro-forte); border: 1px solid var(--au-aresta); box-shadow: var(--au-sombra); backdrop-filter: var(--au-desfoque); -webkit-backdrop-filter: var(--au-desfoque); } .au-orbe-p { width: 34px; height: 34px; border-radius: 50%; flex: none; background: var(--au-orbe); box-shadow: 0 3px 10px rgba(111, 101, 196, 0.35); } .au-escrever .au-ph { flex: 1; font-size: 14.5px; color: var(--au-tinta-3); } .au-escrever button { border: none; background: none; color: var(--au-tinta-3); cursor: pointer; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; } .au-escrever button:hover { background: var(--au-vidro-fundo); color: var(--au-tinta); } .au-escrever svg { width: 18px; height: 18px; } /* A marca do atalho vive na caixa: diz que é aqui que se procura, sem precisar de uma segunda barra para o anunciar. */ .au-escrever .au-tecla { flex: none; opacity: 0.75; } .au-dock { display: flex; justify-content: center; } .au-dock .au-cx { display: flex; gap: 10px; padding: 10px 12px; border-radius: 20px; background: var(--au-vidro); border: 1px solid var(--au-aresta); box-shadow: var(--au-sombra); backdrop-filter: var(--au-desfoque); -webkit-backdrop-filter: var(--au-desfoque); } .au-dock .au-t { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--au-vidro-forte); border: 1px solid var(--au-aresta); color: var(--au-tinta-2); font-size: 19px; cursor: pointer; position: relative; transition: transform 0.14s ease; } .au-dock .au-t:hover { transform: translateY(-3px) scale(1.06); } .au-dock .au-t.viva { color: var(--au-acento); } .au-dock .au-t.viva::after { content: ""; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--au-acento); } /* ===== 5 · COLUNA DE ESTADO (direita) ====================================== Fechada, some — no telemóvel e no tablet em retrato não há sítio para ela, e forçá-la era o aperto de que ele se queixou. */ .au-dir { width: 258px; flex: none; display: flex; flex-direction: column; gap: 12px; padding-top: 8px; overflow-y: auto; } .au-c { padding: 16px 18px; } .au-tit { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .au-tit b { font-size: 13.5px; font-weight: 600; } .au-vivo { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--au-bom); } .au-vivo i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .au-vivo.off { color: var(--au-tinta-3); } .au-orbe-g { width: 88px; height: 88px; margin: 6px auto 14px; border-radius: 50%; background: var(--au-orbe); box-shadow: var(--au-orbe-luz); } .au-frase { text-align: center; font-size: 12.5px; color: var(--au-tinta-2); line-height: 1.5; margin: 0; } .au-med { display: flex; align-items: center; gap: 10px; padding: 7px 0; } .au-med .au-n { flex: 1; font-size: 12.5px; color: var(--au-tinta-2); } .au-med svg { width: 62px; height: 18px; flex: none; } .au-med svg polyline { stroke: var(--au-acento); fill: none; stroke-width: 1.5; stroke-linecap: round; } .au-med .au-val { font-size: 12.5px; font-variant-numeric: tabular-nums; width: 52px; text-align: right; } .au-mem { display: flex; align-items: center; gap: 14px; } .au-mem .au-t { flex: 1; } .au-mem .au-t b { display: block; font-size: 13.5px; font-weight: 600; } .au-mem .au-t span { font-size: 11.5px; color: var(--au-tinta-3); } .au-anel { width: 52px; height: 52px; flex: none; position: relative; } .au-anel svg { width: 52px; height: 52px; transform: rotate(-90deg); } .au-anel .au-fundo-anel { stroke: var(--au-linha); } .au-anel .au-arco { stroke: var(--au-acento); } .au-anel .au-mid { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; color: var(--au-acento-forte); font-variant-numeric: tabular-nums; } .au-tempo { display: flex; align-items: center; gap: 10px; padding: 14px 18px; } .au-tempo .au-g { font-size: 26px; } .au-tempo b { font-size: 21px; font-weight: 300; } .au-tempo span { display: block; font-size: 11.5px; color: var(--au-tinta-3); } /* ===== 6 · ESTADOS ESTREITOS =============================================== As «fases de aberto e fechado» que ele pediu, e por medida: abaixo de 1180 px a coluna de estado sai (não cabe sem apertar o meio); abaixo de 900 a coluna das áreas fica só ícones; abaixo de 700 vira gaveta, e o dock esconde-se. */ @media (max-width: 1180px) { .au-dir { display: none; } .au.mostra-estado .au-dir { display: flex; position: fixed; right: 14px; top: 14px; bottom: 14px; z-index: 20; width: 280px; padding: 8px; } } @media (max-width: 900px) { .au-lado { width: 74px; padding: 20px 12px; } .au-lado .au-eu-txt, .au-nav span, .au-nav .au-pt { display: none; } .au-nav button { justify-content: center; padding: 0; } .au-hora b { font-size: 17px; letter-spacing: 0; } .au-hora span { display: none; } } @media (max-width: 700px) { .au { padding: 8px; gap: 8px; } .au-lado { position: fixed; left: 8px; top: 8px; bottom: 8px; z-index: 22; width: 250px; padding: 20px 14px; transform: translateX(calc(-100% - 16px)); transition: transform 0.24s cubic-bezier(0.2, 0.9, 0.3, 1); } .au.gaveta .au-lado { transform: none; } .au.gaveta .au-lado .au-eu-txt, .au.gaveta .au-nav span { display: block; } .au.gaveta .au-nav button { justify-content: flex-start; padding: 0 12px; } .au.gaveta .au-hora b { font-size: 33px; } .au.gaveta .au-hora span { display: block; } .au-meio { padding: 4px 0 0; } .au-dock { display: none; } .au-atalhos .au-at { width: calc(50% - 6px); } .au-ola { font-size: 27px; } } /* O botão que abre a gaveta — só aparece onde a coluna se esconde. */ .au-menu-bt { display: none; } @media (max-width: 700px) { .au-menu-bt { display: grid; place-items: center; position: fixed; left: 12px; top: 12px; z-index: 23; width: var(--au-toque); height: var(--au-toque); border-radius: 14px; background: var(--au-vidro-forte); border: 1px solid var(--au-aresta); box-shadow: var(--au-sombra); color: var(--au-tinta); cursor: pointer; backdrop-filter: var(--au-desfoque); -webkit-backdrop-filter: var(--au-desfoque); } .au-menu-bt svg { width: 20px; height: 20px; } } /* ===== 7 · MOVIMENTO, com respeito por quem o dispensa =================== */ @media (prefers-reduced-motion: reduce) { .au-lado, .au-at, .au-dock .au-t { transition: none; } } .au :focus-visible { outline: 2px solid var(--au-acento); outline-offset: 2px; } /* ============================================================================ 11 · OS ECRÃS DA COLUNA — componentes ---------------------------------------------------------------------------- Ordem dele: «quero todas as paginas da coluna da esquerda bem implementadas e funcionais, nao quero nada assim sem nenhuma acao e funcionalidade». Estes são os tijolos que os ecrãs usam: cartão com corpo, botões de ação, campos, listas, azulejos, abas, calendário e a linha de resposta — que existe porque nada aqui diz «feito» sem mostrar o que aconteceu. ========================================================================== */ .au-rola { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 2px 8px; } .au-grelha { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); align-items: start; } .au-grelha-larga { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); } .au-bloco { padding: 18px 20px; } .au-bloco .au-tit { margin-bottom: 6px; } .au-conta { font-family: var(--au-mono); font-size: 10.5px; letter-spacing: 1px; color: var(--au-tinta-3); white-space: nowrap; } .au-sub { margin: 0 0 14px; font-size: 12.5px; color: var(--au-tinta-3); line-height: 1.5; } .au-corpo { display: flex; flex-direction: column; gap: 8px; } /* --- botões de ação: alvo cheio, e o que destrói veste-se de aviso --------- */ .au-bt { min-height: var(--au-toque); padding: 0 16px; border-radius: 13px; border: 1px solid var(--au-aresta); background: var(--au-vidro-fundo); color: var(--au-tinta); font: inherit; font-size: 13.5px; cursor: pointer; text-align: left; transition: transform 0.12s ease, border-color 0.12s ease; } .au-bt:hover { border-color: var(--au-acento); } .au-bt:active { transform: scale(0.985); } .au-bt[disabled] { opacity: 0.55; cursor: progress; } .au-bt-ok { border-color: var(--au-acento); color: var(--au-acento-forte); } .au-bt-perigo { border-color: rgba(180, 70, 70, 0.42); color: var(--au-mau); } .au-bt-perigo:hover { border-color: var(--au-mau); } .au-corpo > .au-bt { align-self: flex-start; } /* --- campos --------------------------------------------------------------- */ .au-campo { flex: 1; min-width: 0; min-height: var(--au-toque); padding: 0 14px; border-radius: 13px; border: 1px solid var(--au-aresta); background: var(--au-vidro-fundo); color: var(--au-tinta); font: inherit; font-size: 14px; } .au-campo::placeholder { color: var(--au-tinta-3); } .au-campo:focus { outline: none; border-color: var(--au-acento); } .au-campo-curto { flex: 0 0 160px; } /* OS CAMPOS NÃO SE ESMAGAM. Num cartão estreito o «nome da rede» e a «palavra-passe» ficavam cortados a meio da palavra (visto na fotografia) — o flex:1 encolhia-os até não se ler o que se pedia. Com um mínimo, eles passam para a linha de baixo em vez de encolher. */ .au-linha-campos { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .au-linha-campos .au-campo { min-width: 190px; } .au-linha-campos .au-campo-curto { min-width: 150px; flex: 0 1 160px; } .au-linha-campos .au-bt { flex: none; } /* --- a resposta do aparelho, sempre à vista -------------------------------- */ .au-resposta { margin: 4px 0 0; padding: 11px 14px; border-radius: 12px; background: var(--au-acento-veu); color: var(--au-tinta-2); font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; max-height: 220px; overflow-y: auto; } .au-resposta.mau { background: rgba(180, 70, 70, 0.12); color: var(--au-mau); } .au-conf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 11px 14px; border-radius: 12px; margin-top: 4px; background: rgba(180, 70, 70, 0.10); border: 1px solid rgba(180, 70, 70, 0.3); font-size: 12.5px; color: var(--au-tinta); } .au-conf .au-bt { min-height: 36px; padding: 0 14px; } /* --- listas e itens ------------------------------------------------------- */ .au-lista { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; } .au-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 0; border-top: 1px solid var(--au-linha); } .au-item:first-child { border-top: none; } .au-item-txt { flex: 1; min-width: 200px; } .au-item-txt b { display: block; font-size: 13.5px; font-weight: 550; line-height: 1.4; } .au-item-txt span { font-size: 11.5px; color: var(--au-tinta-3); } .au-item .au-bt { min-height: 36px; padding: 0 12px; font-size: 12.5px; } .au-item-bt { width: 100%; text-align: left; background: none; border: none; cursor: pointer; color: inherit; font: inherit; border-top: 1px solid var(--au-linha); } .au-item-bt:hover b { color: var(--au-acento-forte); } .au-pares { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; } .au-par { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--au-linha); font-size: 13px; } .au-par:first-child { border-top: none; } .au-par span { color: var(--au-tinta-3); } /* --- azulejos de app ------------------------------------------------------ */ .au-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; margin-top: 10px; } .au-tile { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 15px 8px; min-height: 108px; border-radius: 16px; border: 1px solid var(--au-aresta); background: var(--au-vidro-fundo); color: inherit; font: inherit; cursor: pointer; transition: transform 0.12s ease, border-color 0.12s ease; } .au-tile:hover { transform: translateY(-2px); border-color: var(--au-acento); } .au-tile-ini { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--au-acento-veu); color: var(--au-acento-forte); font-size: 21px; font-weight: 600; text-transform: uppercase; } .au-tile-n { font-size: 12px; text-align: center; line-height: 1.3; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* --- abas ---------------------------------------------------------------- */ .au-abas { display: flex; gap: 6px; margin: 10px 0 2px; flex-wrap: wrap; } .au-aba { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--au-aresta); background: none; color: var(--au-tinta-3); font: inherit; font-size: 12.5px; cursor: pointer; } .au-aba.on { background: var(--au-acento-veu); color: var(--au-acento-forte); border-color: transparent; } /* --- Flow: lista à esquerda, calendário e foco à direita ------------------ */ .au-duas-flow { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: start; } @media (min-width: 1120px) { .au-duas-flow { grid-template-columns: 1.55fr 0.85fr; } } .au-uma { display: grid; gap: 14px; max-width: 760px; } .au-flow-dir { display: flex; flex-direction: column; gap: 14px; } .au-cal-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .au-cal-cab b { font-size: 13.5px; text-transform: capitalize; } .au-cal-cab .au-bt { min-height: 32px; padding: 0 12px; } .au-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .au-cal-dia { text-align: center; font-size: 10px; color: var(--au-tinta-3); font-family: var(--au-mono); } .au-cal-vazio { height: 34px; } .au-cal-n { height: 34px; display: grid; place-items: center; border-radius: 10px; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--au-tinta-2); position: relative; } .au-cal-n.hoje { background: var(--au-vidro-forte); color: var(--au-tinta); font-weight: 600; } .au-cal-n.tem::after { content: ""; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--au-acento); } .au-relogio-foco { font-size: 40px; font-weight: 300; letter-spacing: -1px; align-self: center; font-variant-numeric: tabular-nums; padding: 4px 0 8px; } /* --- Assistente: a conversa real ao lado do que ele sabe fazer ------------ */ .au-duas { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: stretch; min-height: 0; } @media (min-width: 1120px) { .au-duas { grid-template-columns: 1.7fr 0.9fr; } } .au-conversa { padding: 8px; overflow: hidden; display: flex; min-height: 320px; } :root[data-shell="aurora"] .au-conversa .chat { display: block !important; position: static; flex: 1; margin: 0; padding: 10px 12px; max-height: none; height: auto; overflow-y: auto; background: none; border: none; } .au-chips { display: flex; flex-wrap: wrap; gap: 6px; } .au-chip { font-family: var(--au-mono); font-size: 11px; padding: 5px 10px; border-radius: 999px; background: var(--au-vidro-fundo); border: 1px solid var(--au-aresta); color: var(--au-tinta-2); } /* As capacidades são TOCÁVEIS: uma lista que não se pode usar é decoração. O alvo sobe para 32 px, que é o mínimo defensável para uma etiqueta desta densidade — e há sessenta delas. */ .au-chip-bt { cursor: pointer; min-height: 32px; padding: 6px 12px; } .au-chip-bt:hover { border-color: var(--au-acento); color: var(--au-acento-forte); } .au-chips { max-height: 260px; overflow-y: auto; } /* ============================================================================ 12 · ECRÃ DE BLOQUEIO na linguagem da casa nova ---------------------------------------------------------------------------- A marcação é a de sempre (relógio, data, saudação, as novidades REAIS, a biometria e o PIN) — só muda de roupa. O orbe entra como o herói, como na imagem que ele mandou, e as novidades continuam a ser as verdadeiras: o bloqueio nunca inventou três coisas, e não vai começar agora. ========================================================================== */ :root[data-shell="aurora"] .lock { background: var(--au-fundo); background-image: radial-gradient(120% 80% at 50% 8%, rgba(122, 166, 255, 0.10), transparent 60%); color: var(--au-tinta); } :root[data-shell="aurora"] .lock-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 520px; padding: 32px 28px; } /* O ORBE, antes do relógio: é ele que diz que há alguém à espera. */ :root[data-shell="aurora"] .lock-inner::before { content: ""; width: 108px; height: 108px; border-radius: 50%; background: var(--au-orbe); box-shadow: var(--au-orbe-luz); margin-bottom: 6px; animation: auRespira 4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { :root[data-shell="aurora"] .lock-inner::before { animation: none; } } :root[data-shell="aurora"] .lock-clock { font-size: clamp(46px, 8vw, 76px); font-weight: 200; letter-spacing: -2px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--au-tinta); } :root[data-shell="aurora"] .lock-date { font-size: 14px; color: var(--au-tinta-3); } :root[data-shell="aurora"] .lock-greet { font-size: clamp(20px, 3vw, 28px); font-weight: 300; margin-top: 10px; text-align: center; color: var(--au-tinta); } :root[data-shell="aurora"] .lock-sub { font-size: 13.5px; color: var(--au-tinta-3); text-align: center; } :root[data-shell="aurora"] .lock-list { width: 100%; display: flex; flex-direction: column; gap: 2px; margin-top: 8px; } :root[data-shell="aurora"] .lock-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--au-vidro); border: 1px solid var(--au-aresta); font-size: 13px; color: var(--au-tinta-2); backdrop-filter: var(--au-desfoque); -webkit-backdrop-filter: var(--au-desfoque); } :root[data-shell="aurora"] .lock-row .ico { flex: none; font-size: 15px; opacity: 0.8; } :root[data-shell="aurora"] .lock-row .txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :root[data-shell="aurora"] .lock-row time { font-size: 11.5px; color: var(--au-tinta-3); } :root[data-shell="aurora"] .lock-acoes { display: flex; gap: 10px; margin-top: 18px; } :root[data-shell="aurora"] .lock-enter { min-height: var(--au-toque); padding: 0 26px; border-radius: 999px; border: 1px solid var(--au-aresta); background: var(--au-vidro-forte); color: var(--au-tinta); font: inherit; font-size: 14.5px; cursor: pointer; backdrop-filter: var(--au-desfoque); -webkit-backdrop-filter: var(--au-desfoque); } :root[data-shell="aurora"] .lock-enter:hover { border-color: var(--au-acento); } :root[data-shell="aurora"] #lockBio { background: var(--au-acento); border-color: transparent; color: var(--au-fundo); font-weight: 550; } :root[data-au="escuro"] .lock-enter#lockBio { color: #08122a; } :root[data-shell="aurora"] .lock-pin { display: flex; gap: 10px; margin-top: 14px; } :root[data-shell="aurora"] .lock-pin.hidden { display: none; } :root[data-shell="aurora"] #lockPin { min-height: var(--au-toque); padding: 0 18px; border-radius: 14px; border: 1px solid var(--au-aresta); background: var(--au-vidro-fundo); color: var(--au-tinta); font: inherit; font-size: 18px; letter-spacing: 6px; text-align: center; width: 190px; } :root[data-shell="aurora"] #lockPin:focus { outline: none; border-color: var(--au-acento); } :root[data-shell="aurora"] #lockErro { color: var(--au-mau); font-size: 12.5px; margin-top: 10px; } :root[data-shell="aurora"] #lockAlt { background: none; border: none; color: var(--au-tinta-3); font-size: 12.5px; text-decoration: underline; cursor: pointer; margin-top: 12px; min-height: 36px; } /* ============================================================================ 13 · O TRABALHO À VISTA ------------------------------------------------------------------------- Ele escreveu um pedido e o ecrã não mudou: nem a pergunta ficou escrita, nem havia sinal de que alguém estava a trabalhar. O #chat e o #statusText vivem dentro do #app, que esta casa esconde de propósito. Estas duas peças põem à vista o que o motor já dizia: a BARRA DO TRABALHO, colada à caixa de escrever (logo visível em qualquer ecrã), e o FIO, a conversa a tomar o meio da casa. ========================================================================= */ /* --- a barra do trabalho -------------------------------------------------- */ .au-emcurso { display: none; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px; border-radius: var(--au-r-m); background: var(--au-vidro-forte); border: 1px solid var(--au-aresta); box-shadow: var(--au-sombra); backdrop-filter: var(--au-desfoque); -webkit-backdrop-filter: var(--au-desfoque); font-size: 13px; color: var(--au-tinta-2); overflow: hidden; } .au-emcurso.on { display: flex; } /* O ponto é o único enfeite, e ganha-o por dizer algo: está a trabalhar. */ .au-emcurso-pt { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--au-acento); box-shadow: 0 0 0 0 var(--au-acento-veu); animation: auPulsa 1.5s ease-out infinite; } .au-emcurso-fase { color: var(--au-tinta); font-weight: 550; white-space: nowrap; } /* O relógio da espera em números tabulares: a largura não pode saltar a cada segundo, senão a linha inteira tremia. */ .au-emcurso-crono { font-family: var(--au-mono); font-size: 12px; color: var(--au-tinta-3); font-variant-numeric: tabular-nums; flex: none; min-width: 34px; } .au-emcurso-agora { font-family: var(--au-mono); font-size: 11.5px; color: var(--au-acento-forte); background: var(--au-acento-veu); border-radius: 999px; padding: 3px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34ch; } .au-emcurso-agora:empty { display: none; } .au-emcurso-provas { flex: 1; min-width: 0; font-size: 11.5px; color: var(--au-tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .au-emcurso-dir { margin-left: auto; display: flex; align-items: center; flex: none; } /* O PARAR é o botão REAL, movido para cá; aqui só muda de roupa. O !important é para vencer o .hidden que o app.js lhe põe quando não está a pensar — mas o estado continua a ser dele: quando está escondido, está escondido. */ :root[data-shell="aurora"] .au-emcurso-dir #stopBtn { position: static; margin: 0; min-height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12px; background: var(--au-vidro-fundo); border: 1px solid var(--au-linha); color: var(--au-tinta-2); cursor: pointer; } :root[data-shell="aurora"] .au-emcurso-dir #stopBtn:hover { border-color: var(--au-mau); color: var(--au-mau); } :root[data-shell="aurora"] .au-emcurso-dir #stopBtn.hidden { display: none; } @keyframes auPulsa { 0% { box-shadow: 0 0 0 0 rgba(14, 127, 174, 0.34); } 100% { box-shadow: 0 0 0 9px rgba(14, 127, 174, 0); } } @media (prefers-reduced-motion: reduce) { .au-emcurso-pt { animation: none; } } /* Num ecrã estreito as provas saem primeiro: a fase e o tempo é que respondem à pergunta dele. */ @media (max-width: 760px) { .au-emcurso-provas { display: none; } .au-emcurso-agora { max-width: 16ch; } } /* --- o fio: a conversa dentro da casa ------------------------------------- */ .au-fio { /* CRESCE COM A CONVERSA, e não à força até ao fundo do ecrã: com três linhas o painel ficava com oitocentos pixéis de vazio por cima, e um painel vazio parece avariado. Quando a conversa passa da altura disponível, para de crescer e rola por dentro. */ display: none; flex-direction: column; width: min(880px, 100%); flex: 0 1 auto; min-height: 0; max-height: 100%; border-radius: var(--au-r); background: var(--au-vidro); border: 1px solid var(--au-aresta); box-shadow: var(--au-sombra); backdrop-filter: var(--au-desfoque); -webkit-backdrop-filter: var(--au-desfoque); overflow: hidden; } .au-fio.on { display: flex; } /* Quando o fio está aberto, a saudação, os atalhos e o Hoje SAEM DA FRENTE. Ele pediu que nada ficasse empilhado no Surface: o meio tem um dono de cada vez. */ .au-centro.au-em-fio { justify-content: center; gap: 0; padding: 12px 0; overflow: hidden; } .au-centro.au-em-fio > .au-ola, .au-centro.au-em-fio > .au-atalhos, .au-centro.au-em-fio > .au-cartao { display: none; } .au-fio-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--au-linha); flex: none; } .au-fio-cab b { font-size: 13px; font-weight: 600; color: var(--au-tinta); } .au-fio-sair { min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--au-vidro-fundo); border: 1px solid var(--au-aresta); color: var(--au-tinta-2); font: inherit; font-size: 12.5px; cursor: pointer; } .au-fio-sair:hover { border-color: var(--au-acento); color: var(--au-acento-forte); } .au-fio-corpo { flex: 1; min-height: 0; display: flex; overflow: hidden; } /* O #chat é o nó REAL, movido para cá. Vem com a roupa da casa antiga vestida e com regras !important; daí a insistência. */ :root[data-shell="aurora"] .au-fio-corpo .chat { display: block !important; position: static; flex: 1; margin: 0; padding: 14px 18px; max-height: none; height: auto; overflow-y: auto; background: none; border: none; } /* --- as bolhas, vestidas para esta casa ----------------------------------- O #chat é o nó REAL, movido para cá, e vinha com a roupa da casa antiga: caixas azuis-escuras com texto branco por cima do vidro claro, e a bolha DELE em lavanda sobre lavanda — quase ilegível. É o mesmo defeito da pílula escura que ele já me tinha apontado na caixa de escrever: quem move um nó herda-lhe o CSS. Aqui a conversa passa a ser texto e uma pílula: o que ele diz destaca-se, o que o Jarvis responde lê-se como uma resposta e não como um cartão. Serve os dois temas porque só usa fichas. Vale para o fio da casa E para o Assistente. */ :root[data-shell="aurora"] .au-fio-corpo .chat, :root[data-shell="aurora"] .au-conversa .chat { display: flex !important; flex-direction: column; gap: 14px; } :root[data-shell="aurora"] .au-fio-corpo .msg, :root[data-shell="aurora"] .au-conversa .msg { max-width: 100%; align-self: stretch; padding: 0; margin: 0; background: none !important; border: none !important; box-shadow: none !important; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--au-tinta); font-size: 15px; line-height: 1.6; border-radius: 0; clip-path: none; } :root[data-shell="aurora"] .au-fio-corpo .msg::before, :root[data-shell="aurora"] .au-fio-corpo .msg::after, :root[data-shell="aurora"] .au-conversa .msg::before, :root[data-shell="aurora"] .au-conversa .msg::after { display: none; } /* O QUE ELE DIZ ganha a pílula: é o que ele procura com os olhos quando quer confirmar «foi isto que eu pedi?» — a queixa que deu origem a tudo isto. */ :root[data-shell="aurora"] .au-fio-corpo .msg.user, :root[data-shell="aurora"] .au-conversa .msg.user { align-self: flex-end; max-width: 82%; padding: 11px 16px !important; border-radius: 18px 18px 6px 18px !important; background: var(--au-acento) !important; color: #fff !important; box-shadow: 0 8px 22px rgba(14, 127, 174, 0.22) !important; } :root[data-au="escuro"] .au-fio-corpo .msg.user, :root[data-au="escuro"] .au-conversa .msg.user { color: #06121f !important; font-weight: 500; } :root[data-shell="aurora"] .au-fio-corpo .msg.user .who, :root[data-shell="aurora"] .au-conversa .msg.user .who { display: none; } /* A RESPOSTA lê-se como texto, com o nome dele por cima em letra pequena. */ :root[data-shell="aurora"] .au-fio-corpo .msg.jarvis, :root[data-shell="aurora"] .au-conversa .msg.jarvis { align-self: flex-start; max-width: 92%; } :root[data-shell="aurora"] .au-fio-corpo .msg .who, :root[data-shell="aurora"] .au-conversa .msg .who { display: block !important; font-size: 10px; letter-spacing: 1.4px; font-weight: 600; text-transform: uppercase; color: var(--au-tinta-3) !important; margin-bottom: 5px; background: none; border: none; padding: 0; opacity: 1; } :root[data-shell="aurora"] .au-fio-corpo .msg .who::before, :root[data-shell="aurora"] .au-fio-corpo .msg .who::after, :root[data-shell="aurora"] .au-conversa .msg .who::before, :root[data-shell="aurora"] .au-conversa .msg .who::after { display: none; } /* AS PROVAS (⚙) ficam discretas mas legíveis: são a diferença entre «já está» e «está, e foi assim». Nunca em cinzento sobre cinzento. */ :root[data-shell="aurora"] .au-fio-corpo .msg.trace, :root[data-shell="aurora"] .au-conversa .msg.trace { align-self: flex-start; font-family: var(--au-mono); font-size: 11.5px; color: var(--au-tinta-2) !important; padding: 6px 11px !important; background: var(--au-vidro-fundo) !important; border-radius: 10px !important; border: 1px solid var(--au-linha) !important; } :root[data-shell="aurora"] .au-fio-corpo .copy-btn, :root[data-shell="aurora"] .au-conversa .copy-btn { background: none !important; border: none !important; color: var(--au-tinta-3) !important; position: absolute; top: 0; right: 0; opacity: 0; transition: opacity 0.15s; } :root[data-shell="aurora"] .au-fio-corpo .msg:hover .copy-btn, :root[data-shell="aurora"] .au-conversa .msg:hover .copy-btn { opacity: 0.8; } :root[data-shell="aurora"] .au-fio-corpo .msg.user .copy-btn, :root[data-shell="aurora"] .au-conversa .msg.user .copy-btn { color: #fff !important; } /* A conversa encosta ao FUNDO: a última mensagem é a que interessa, e um painel alto com três linhas no topo parecia vazio e avariado. */ :root[data-shell="aurora"] .au-fio-corpo .chat { justify-content: flex-end; } /* ============================================================================ 14 · A ESPINHA DA COLUNA, e a bateria no topo direito ------------------------------------------------------------------------- Ele apontou que os quatro ícones do fundo pareciam desalinhados com a coluna. Estava certo, e era medível: a coluna tinha QUATRO âncoras diferentes — o avatar com o centro em 55 px, os ícones do menu em 52, os quatro do fundo em 50, e o relógio a começar em 35. Além disso a fila de quatro ocupava 164 px dos 186 disponíveis, e por isso ficava encostada à esquerda, sem relação com os botões de largura inteira acima. A correcção é uma espinha só: as utilidades passam a uma grelha de quatro colunas que ocupa a linha inteira — e a primeira coluna cai exactamente sobre os ícones do menu, sem números mágicos, porque 186/4 = 46,5 e o centro da primeira célula é 29 + 23,25 ≈ 52. O avatar e o relógio vão ao mesmo sítio. Ganho de lado: com os botões que o Jarvis OS injecta (energia, teclado, sistema, actualização) a fila deixa de quebrar em duas linhas rotas — passa a segunda linha da MESMA grelha, alinhada com a primeira. ========================================================================= */ .au-utils { display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; gap: 4px; padding: 0 0 14px; width: 100%; } .au-utils button, :root[data-shell="aurora"] .au-utils .round-btn, :root[data-shell="aurora"] .au-utils .jos-sysbtn { justify-self: center; } /* Encolhida (74 px) a coluna tem 50 px de conteúdo: uma coluna só, ao centro. */ .au.enc .au-utils { grid-template-columns: 1fr; } /* O avatar ao mesmo centro que os ícones: 29 + 3 + 20 = 52. */ .au-eu { padding: 4px 3px 22px; } .au.enc .au-eu { padding-left: 0; padding-right: 0; justify-content: center; } /* E o relógio encostado à mesma linha vertical dos ícones (42 px), em vez de flutuar 7 px à esquerda de tudo o resto. */ .au-hora { padding: 0 0 0 13px; } .au.enc .au-hora { padding: 0; text-align: center; } .au.enc .au-hora b { font-size: 19px; } .au.enc .au-hora span { display: none; } /* --- a bateria, no topo direito ------------------------------------------ */ /* Vive no CANTO do sistema, não dentro da coluna da direita: abaixo de 1180 px a coluna faz display:none e levava a bateria com ela — e a pergunta «às quantas ando?» não deixa de existir num ecrã pequeno. Em troca, reserva-se-lhe o sítio em cima (regras a seguir) para não tapar nada. */ .au-bat { position: fixed; top: 15px; right: 17px; z-index: 21; display: flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; background: var(--au-vidro-forte); border: 1px solid var(--au-aresta); box-shadow: var(--au-sombra); backdrop-filter: var(--au-desfoque); -webkit-backdrop-filter: var(--au-desfoque); color: var(--au-tinta); cursor: default; } .au-bat svg { width: 26px; height: 14px; flex: none; } .au-bat .au-bat-caixa { fill: none; stroke: var(--au-tinta-3); stroke-width: 1.2; } .au-bat .au-bat-tampa { fill: var(--au-tinta-3); } .au-bat .au-bat-carga { fill: var(--au-bom); transition: width 0.4s ease; } .au-bat b { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; } .au-bat span { font-size: 11.5px; color: var(--au-tinta-3); } .au-bat span:empty { display: none; } /* Os estados dizem-se pela cor E pelo texto — a cor sozinha não serve a quem não a distingue, e o tempo que resta é a resposta à pergunta dele. */ .au-bat.carrega .au-bat-carga { fill: var(--au-acento); } .au-bat.baixa .au-bat-carga { fill: var(--au-ambar); } .au-bat.baixa b { color: var(--au-ambar); } .au-bat.critica .au-bat-carga { fill: var(--au-mau); } .au-bat.critica b { color: var(--au-mau); } .au-bat.critica { border-color: var(--au-mau); } .au-bat.sem b { color: var(--au-tinta-3); font-weight: 500; } /* A coluna da direita desaparece nos ecrãs estreitos (secção 6) e a bateria vai com ela; nesse caso volta ao topo, sobre o conteúdo, porque a pergunta «às quantas ando?» não deixa de existir num ecrã pequeno. */ /* O SÍTIO RESERVADO. Nada por baixo da bateria: a coluna da direita começa abaixo dela, e o painel de estado (que nos ecrãs estreitos ocupa este canto) também. Sem isto a bateria ficava por cima do cartão do Jarvis. */ .au-dir { padding-top: 48px; } .au.mostra-estado .au-dir { padding-top: 52px; } /* Num ecrã estreito fica só o número: o tempo que resta é a primeira coisa a sacrificar, o nível é a que ele quer sempre. */ @media (max-width: 1180px) { .au-bat { top: 12px; right: 14px; padding: 6px 11px; } .au-bat span { display: none; } } /* No telefone o canto de cima à esquerda é do botão da gaveta; este é o direito, e não se cruzam. */ @media (max-width: 700px) { .au-bat { top: 10px; right: 10px; } } /* ============================================================================ 15 · O PÉ DA COLUNA, o raio e as horas ------------------------------------------------------------------------- Ele disse DUAS vezes que os quatro ícones «parecem desalinhados e nem parecem fazer parte de nada». Da primeira medi e aliniei — e estavam mal alinhados, de facto —, mas isso resolveu metade: continuavam a flutuar soltos entre a lista das áreas e o relógio, quatro ícones nus no fundo de uma coluna. A resposta é pertencerem a algo: um bloco, com moldura e a data lá dentro, na linguagem dos cartões da coluna da direita. E os ícones alinhados como já estavam. ========================================================================= */ .au-pe { display: flex; flex-direction: column; gap: 2px; /* A MOLDURA CRESCE PARA FORA, não para dentro. Com padding normal o bloco encurtava a grelha e empurrava os ícones 6 px para a direita — medido: 57,5 contra os 51,5 dos ícones do menu, ou seja, desalinhava-os outra vez, que é precisamente a queixa dele. Com a margem negativa a grelha mantém o vão (29→215) e o bloco respira por fora. */ margin: 0 -8px; padding: 8px 8px 4px; border-radius: var(--au-r-m); background: var(--au-vidro-fundo); border: 1px solid var(--au-linha); } /* Os ícones mantêm a espinha: a grelha continua a ocupar a linha inteira e o padding do bloco é o MESMO dos dois lados, logo o centro da primeira célula não se mexe em relação aos ícones do menu. */ .au-pe .au-utils { padding: 0 0 4px; } .au-pe .au-hora { padding: 0; border-top: 1px solid var(--au-linha); } .au-pe .au-hora span { display: block; padding: 8px 6px 4px; font-size: 12px; text-align: center; } .au.enc .au-pe { padding: 6px 4px; } .au.enc .au-pe .au-hora { display: none; } /* --- as horas ao pé da bateria (pedido dele) ------------------------------ */ .au-canto { position: fixed; top: 15px; right: 17px; z-index: 21; display: flex; align-items: center; gap: 8px; } /* A pílula da bateria já não se posiciona sozinha: as duas vivem no canto juntas. */ .au-canto .au-bat { position: static; top: auto; right: auto; z-index: auto; } .au-relogio { padding: 7px 14px; border-radius: 999px; background: var(--au-vidro-forte); border: 1px solid var(--au-aresta); box-shadow: var(--au-sombra); backdrop-filter: var(--au-desfoque); -webkit-backdrop-filter: var(--au-desfoque); color: var(--au-tinta); font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.2px; } @media (max-width: 1180px) { .au-canto { top: 12px; right: 14px; gap: 6px; } .au-relogio { padding: 6px 11px; font-size: 13px; } } @media (max-width: 700px) { .au-canto { top: 10px; right: 10px; } } /* --- o raio: só quando está a carregar ------------------------------------ */ /* Ao lado do número, não por dentro da bateria: por dentro ficava metade sobre a carga e metade sobre o vazio, e a 41% não se lia. */ .au-bat-raio { display: none; width: 8px; height: 13px; flex: none; } .au-bat-raio path { fill: var(--au-acento); } .au-bat.carrega .au-bat-raio { display: block; } .au-bat.carrega b { color: var(--au-acento-forte); } :root[data-au="escuro"] .au-bat.carrega b { color: var(--au-acento); } @media (prefers-reduced-motion: no-preference) { .au-bat.carrega .au-bat-carga { animation: auCarrega 2.4s ease-in-out infinite; } } @keyframes auCarrega { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } /* Abaixo de 900 px a coluna fica só ícones (secção 6) sem ganhar a classe .enc: a data não cabe em 74 px e sai, tal como saía antes. Com a gaveta aberta cabe. */ @media (max-width: 900px) { .au-pe .au-hora { display: none; } .au-pe { padding: 6px 4px; } } @media (max-width: 700px) { .au.gaveta .au-pe { padding: 8px 8px 4px; } .au.gaveta .au-pe .au-hora { display: block; } }