/* Sistema de design do dashboard do agente-ze — 3 temas via data-theme. Nenhuma cor fora dos tokens. Trocado por [data-theme] no ; o servidor injeta o atributo a partir do cookie (sem flash). Mobile: nav horizontal vira BOTTOM NAV; tabelas viram cards. */ /* ---------------------------------------------------------------- fontes */ @font-face { font-family: "Geist web"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/static/fonts/Geist-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Geist web"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/static/fonts/Geist-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter var"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/fonts/InterVariable.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono web"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/static/fonts/JetBrainsMono.woff2") format("woff2"); } /* ------------------------------------------------------------ escala/base */ :root { --font-ui: "Geist web", Geist, "Inter var", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono web", "JetBrains Mono", "Cascadia Code", "SF Mono", Consolas, ui-monospace, monospace; --text-xs: 0.75rem; /* meta/label 11-12px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.84375rem; /* corpo 13.5px (handoff: 13.5-15px) */ --text-md: 0.9375rem; /* 15px */ --text-lg: 1.125rem; --text-xl: 1.25rem; /* título de tela 20px/600 */ --radius: 0.875rem; /* card 14px */ --radius-md: 0.75rem; /* campo/botão 12px */ --radius-sm: 0.5rem; /* chip/tile 8px */ --radius-lg: 1rem; /* card grande 16px */ --radius-pill: 999px; --bottomnav-h: 3.5rem; --tracking-tight: -0.02em; } /* --------------- semânticos: mesma identidade de matiz, L por tema (AA) --- */ /* tokens NOVOS do design premium com default derivado dos existentes — temas legados e temas custom (builder) funcionam sem redeclarar nada; os 3 temas base sobrescrevem com os valores exatos do handoff. */ :root { --line: color-mix(in srgb, var(--text) 8%, transparent); --header: var(--bg); --danger-ic: var(--danger); --warning-ic: var(--warning); --danger-bd: color-mix(in srgb, var(--danger) 32%, transparent); --warning-bd: color-mix(in srgb, var(--warning) 32%, transparent); --success-bd: color-mix(in srgb, var(--success) 35%, transparent); --info-bd: color-mix(in srgb, var(--info) 35%, transparent); --redacted-bd: color-mix(in srgb, var(--redacted) 40%, transparent); --secret-bd: color-mix(in srgb, var(--secret) 35%, transparent); /* chip de PII DENTRO da bolha do dono (fundo acento) */ --upii-tx: var(--redacted); --upii-bg: var(--redacted-bg); --upii-bd: var(--redacted-bd); } /* AMOLED — base preta do design premium (handoff): acento menta #35d6a8 (substitui o AMOLED monocromático anterior). */ [data-theme="amoled"] { --bg: #000000; --surface-1: #121815; --surface-2: #1a221e; --surface-3: #223029; --border: #1c2420; --border-strong: #2c3a33; --line: rgba(255,255,255,.07); --text: #f4f6f5; --text-muted: #8b938f; --text-faint: #5a635f; --accent: #35d6a8; --accent-hover: #2ba888; --on-accent: #06231b; --chat-bg: #000000; --header: #000000; --bubble-in: #121815; --on-bubble-in: #f4f6f5; --bubble-in-meta: #5a635f; --bubble-out: #12503f; --on-bubble-out: #e6faf2; --bubble-out-meta: #7fc9b3; --danger: #ff8478; --danger-ic: #ff6b5e; --danger-bg: rgba(255,107,94,.09); --danger-bd: rgba(255,107,94,.30); --warning: #f3ddb0; --warning-ic: #e6a94a; --warning-bg: rgba(230,169,74,.10); --warning-bd: #4a3d17; --success: #3ecf8e; --success-bg: rgba(62,207,142,.10); --success-bd: rgba(62,207,142,.35); --info: #5b9dff; --info-bg: rgba(91,157,255,.10); --info-bd: rgba(91,157,255,.35); --redacted: #cabffb; --redacted-bg: rgba(157,140,245,.16); --redacted-bd: rgba(157,140,245,.40); --secret: #d977c8; --secret-bg: rgba(217,119,200,.12); --secret-bd: rgba(217,119,200,.35); --upii-tx: #cabffb; --upii-bg: rgba(157,140,245,.20); --upii-bd: rgba(157,140,245,.45); --appr-once: #3ecf8e; --appr-once-bg: rgba(62,207,142,.10); --appr-session: #5b9dff; --appr-session-bg: rgba(91,157,255,.10); --appr-always: #f4f6f5; --appr-always-bg: transparent; --appr-deny: #ff8478; --appr-deny-bg: rgba(255,107,94,.09); --diff-add-fg: #3ecf8e; --diff-add-bg: rgba(62,207,142,.10); --diff-del-fg: #ff8478; --diff-del-bg: rgba(255,107,94,.09); } /* Grafite: grafite quente + acento jade-fósforo (tensão quente/frio). */ [data-theme="dark"] { --bg: #131412; --surface-1: #1b1c19; --surface-2: #232521; --surface-3: #2c2e29; --border: #33352f; --border-strong: #454840; --text: #eae9e2; --text-muted: #a6a89b; --text-faint: #6f7167; --accent: #45c7a9; --accent-hover: #66d9be; --on-accent: #06231c; --chat-bg: #141513; --bubble-in: #232521; --on-bubble-in: #eae9e2; --bubble-in-meta: #8a8c81; --bubble-out: #2f8a74; --on-bubble-out: #eafdf7; --bubble-out-meta: #bfe9dd; --danger: #f5726f; --danger-bg: #3a1e1d; --warning: #e8b84b; --warning-bg: #332810; --success: #59c98a; --success-bg: #16321f; --info: #549fe0; --info-bg: #132c40; --redacted: #b98fe0; --redacted-bg: #291d3d; --secret: #ab9c80; --secret-bg: #282213; --appr-once: #59c98a; --appr-once-bg: #16321f; --appr-session: #549fe0; --appr-session-bg: #132c40; --appr-always: #8393f0; --appr-always-bg: #1e2140; --appr-deny: #f5726f; --appr-deny-bg: #3a1e1d; --diff-add-fg: #84d8a6; --diff-add-bg: #16321f; --diff-del-fg: #e89b98; --diff-del-bg: #3a1e1d; } /* Claro — base clara do design premium (acento verde escurecido p/ AA em botões preenchidos; NUNCA usar o menta #35d6a8 como fundo de botão aqui). */ [data-theme="light"] { --bg: #f4f6f5; --surface-1: #ffffff; --surface-2: #eef1f0; --surface-3: #e4e9e6; --border: #e4e9e6; --border-strong: #c9d2ce; --line: #eef1f0; --text: #14201c; --text-muted: #5c6b64; --text-faint: #9aa8a2; --accent: #0f9d78; --accent-hover: #0c8163; --on-accent: #ffffff; --chat-bg: #f4f6f5; --header: #ffffff; --bubble-in: #ffffff; --on-bubble-in: #14201c; --bubble-in-meta: #9aa8a2; --bubble-out: #0f9d78; --on-bubble-out: #ffffff; --bubble-out-meta: #d6f5ea; --danger: #a5291a; --danger-ic: #d23f2d; --danger-bg: #fdeeec; --danger-bd: #f3ccc6; --warning: #8a5c08; --warning-ic: #b0740f; --warning-bg: #fdf4e3; --warning-bd: #f0dcae; --success: #0f8f56; --success-bg: #e9f8f0; --success-bd: #bfe8d3; --info: #2d6fe0; --info-bg: #eaf1fe; --info-bd: #c6dafa; --redacted: #6d54d6; --redacted-bg: #f0edfd; --redacted-bd: #d6cdf8; --secret: #b23a9e; --secret-bg: #faeaf6; --secret-bd: #eccbe3; /* na bolha do dono (fundo acento cheio) o chip de PII vira branco */ --upii-tx: #ffffff; --upii-bg: rgba(255,255,255,.22); --upii-bd: rgba(255,255,255,.50); --appr-once: #0f8f56; --appr-once-bg: #e9f8f0; --appr-session: #2d6fe0; --appr-session-bg: #eaf1fe; --appr-always: #14201c; --appr-always-bg: transparent; --appr-deny: #a5291a; --appr-deny-bg: #fdeeec; --diff-add-fg: #0f8f56; --diff-add-bg: #e9f8f0; --diff-del-fg: #a5291a; --diff-del-bg: #fdeeec; } /* Petróleo — dark de assinatura do design premium (verde-petróleo profundo). */ [data-theme="petroleo"] { --bg: #0b1210; --surface-1: #16211d; --surface-2: #223029; --surface-3: #2a3b33; --border: #223029; --border-strong: #35493f; --line: rgba(255,255,255,.06); --text: #eaf1ee; --text-muted: #86988f; --text-faint: #69827a; --accent: #3ddcae; --accent-hover: #2ba888; --on-accent: #06231b; --chat-bg: #0b1210; --header: #0b1210; --bubble-in: #16211d; --on-bubble-in: #eaf1ee; --bubble-in-meta: #69827a; --bubble-out: #1c5a48; --on-bubble-out: #e8faf3; --bubble-out-meta: #8fd3bf; --danger: #ff8478; --danger-ic: #ff6b5e; --danger-bg: rgba(255,107,94,.09); --danger-bd: rgba(255,107,94,.30); --warning: #f3ddb0; --warning-ic: #e6a94a; --warning-bg: rgba(230,169,74,.10); --warning-bd: #4a3d17; --success: #3ecf8e; --success-bg: rgba(62,207,142,.10); --success-bd: rgba(62,207,142,.35); --info: #5b9dff; --info-bg: rgba(91,157,255,.10); --info-bd: rgba(91,157,255,.35); --redacted: #cabffb; --redacted-bg: rgba(157,140,245,.16); --redacted-bd: rgba(157,140,245,.40); --secret: #d977c8; --secret-bg: rgba(217,119,200,.12); --secret-bd: rgba(217,119,200,.35); --upii-tx: #cabffb; --upii-bg: rgba(157,140,245,.20); --upii-bd: rgba(157,140,245,.45); --appr-once: #3ecf8e; --appr-once-bg: rgba(62,207,142,.10); --appr-session: #5b9dff; --appr-session-bg: rgba(91,157,255,.10); --appr-always: #eaf1ee; --appr-always-bg: transparent; --appr-deny: #ff8478; --appr-deny-bg: rgba(255,107,94,.09); --diff-add-fg: #3ecf8e; --diff-add-bg: rgba(62,207,142,.10); --diff-del-fg: #ff8478; --diff-del-bg: rgba(255,107,94,.09); } /* Black Pitch: preto puro como o AMOLED, mas com acento fosco (baixo brilho) e contraste mais suave — pediram um preto "menos claro" no acento. */ [data-theme="black-pitch"] { --bg: #000000; --surface-1: #0b0b0d; --surface-2: #141417; --surface-3: #1c1c20; --border: #232327; --border-strong: #313138; --text: #d7d7db; --text-muted: #8f8f98; --text-faint: #5c5c64; /* acento cinza escuro neutro (era teal "azul pastel"); texto claro nele */ --accent: #575759; --accent-hover: #6f6f72; --on-accent: #f3f3f4; --chat-bg: #000000; --bubble-in: #141417; --on-bubble-in: #d7d7db; --bubble-in-meta: #7c7c84; --bubble-out: #34343a; --on-bubble-out: #ededf0; --bubble-out-meta: #9a9aa2; --danger: #e06b6b; --danger-bg: #331414; --warning: #d8b45a; --warning-bg: #322a10; --success: #59c088; --success-bg: #102b1d; --info: #5a9fd4; --info-bg: #0d2334; --redacted: #b28fd6; --redacted-bg: #241733; --secret: #ab9c80; --secret-bg: #242012; --appr-once: #59c088; --appr-once-bg: #102b1d; --appr-session: #5a9fd4; --appr-session-bg: #0d2334; --appr-always: #8090e0; --appr-always-bg: #191c33; --appr-deny: #e06b6b; --appr-deny-bg: #331414; --diff-add-fg: #84d0a6; --diff-add-bg: #102b1d; --diff-del-fg: #e09a9a; --diff-del-bg: #331414; } /* Nord: polar night azul-acinzentado + acento frost. */ [data-theme="nord"] { --bg: #2e3440; --surface-1: #333b49; --surface-2: #3b4252; --surface-3: #434c5e; --border: #4c566a; --border-strong: #5b6678; --text: #e5e9f0; --text-muted: #b4bcca; --text-faint: #808a9d; --accent: #88c0d0; --accent-hover: #a3d0dd; --on-accent: #12202a; --chat-bg: #2b303b; --bubble-in: #3b4252; --on-bubble-in: #e5e9f0; --bubble-in-meta: #8b93a3; --bubble-out: #4c6a8a; --on-bubble-out: #eaf0f7; --bubble-out-meta: #b8c6d8; --danger: #bf616a; --danger-bg: #3a2b2e; --warning: #ebcb8b; --warning-bg: #3a3323; --success: #a3be8c; --success-bg: #2b3527; --info: #81a1c1; --info-bg: #29333f; --redacted: #b48ead; --redacted-bg: #342b33; --secret: #c8a27f; --secret-bg: #332b22; --appr-once: #a3be8c; --appr-once-bg: #2b3527; --appr-session: #81a1c1; --appr-session-bg: #29333f; --appr-always: #5e81ac; --appr-always-bg: #26303f; --appr-deny: #bf616a; --appr-deny-bg: #3a2b2e; --diff-add-fg: #a3be8c; --diff-add-bg: #2b3527; --diff-del-fg: #bf616a; --diff-del-bg: #3a2b2e; } /* Gruvbox: retrô quente e terroso + acento verde-limão. */ [data-theme="gruvbox"] { --bg: #282828; --surface-1: #32302f; --surface-2: #3c3836; --surface-3: #504945; --border: #4c4642; --border-strong: #665c54; --text: #ebdbb2; --text-muted: #bdae93; --text-faint: #928374; --accent: #b8bb26; --accent-hover: #cdd23a; --on-accent: #23260a; --chat-bg: #242020; --bubble-in: #3c3836; --on-bubble-in: #ebdbb2; --bubble-in-meta: #a89984; --bubble-out: #5a6a2a; --on-bubble-out: #f4f0d8; --bubble-out-meta: #c2c79a; --danger: #fb4934; --danger-bg: #3c2523; --warning: #fabd2f; --warning-bg: #3a2f12; --success: #8ec07c; --success-bg: #253026; --info: #83a598; --info-bg: #24302e; --redacted: #d3869b; --redacted-bg: #3a2830; --secret: #c9b58c; --secret-bg: #332c1c; --appr-once: #8ec07c; --appr-once-bg: #253026; --appr-session: #83a598; --appr-session-bg: #24302e; --appr-always: #8f9fd0; --appr-always-bg: #26293a; --appr-deny: #fb4934; --appr-deny-bg: #3c2523; --diff-add-fg: #b8bb26; --diff-add-bg: #2f3117; --diff-del-fg: #fb4934; --diff-del-bg: #3c2523; } /* Solar: um CLARO alternativo, sépia quente (Solarized Light) — foregrounds escurecidos onde preciso para manter WCAG AA sobre o creme. */ [data-theme="solar"] { --bg: #fdf6e3; --surface-1: #fffdf6; --surface-2: #eee8d5; --surface-3: #e3ddc9; --border: #ddd6c1; --border-strong: #c7bfa6; --text: #073642; --text-muted: #586e75; --text-faint: #93a1a1; --accent: #1e78ba; --accent-hover: #175a8d; --on-accent: #ffffff; --chat-bg: #efe9d6; --bubble-in: #fffdf6; --on-bubble-in: #073642; --bubble-in-meta: #93a1a1; --bubble-out: #cfe6e2; --on-bubble-out: #0a4a44; --bubble-out-meta: #5a8078; --danger: #c8322f; --danger-bg: #fbe3e0; --warning: #97710a; --warning-bg: #f5ecc9; --success: #5f7000; --success-bg: #eef0d4; --info: #197d75; --info-bg: #d5efec; --redacted: #5b5fc0; --redacted-bg: #e6e6f5; --secret: #7a6a1f; --secret-bg: #efe9cf; --appr-once: #5f7000; --appr-once-bg: #eef0d4; --appr-session: #197d75; --appr-session-bg: #d5efec; --appr-always: #5b5fc0; --appr-always-bg: #e6e6f5; --appr-deny: #c8322f; --appr-deny-bg: #fbe3e0; --diff-add-fg: #4f6000; --diff-add-bg: #eef0d4; --diff-del-fg: #a82a26; --diff-del-bg: #fbe3e0; } /* Oceano: azul-petróleo profundo + acento ciano (preset novo estilo Telegram). Semânticos herdam do Grafite (mesma matiz/AA sobre escuro). */ [data-theme="ocean"] { --bg: #0e1b24; --surface-1: #13232f; --surface-2: #162a37; --surface-3: #1d3543; --border: #244050; --border-strong: #345365; --text: #dcecf3; --text-muted: #93aab7; --text-faint: #62808e; --accent: #4bc0e0; --accent-hover: #6fd2ec; --on-accent: #062430; --chat-bg: #0e1b24; --bubble-in: #162a37; --on-bubble-in: #dcecf3; --bubble-in-meta: #849aa7; --bubble-out: #2c6f8f; --on-bubble-out: #eafaff; --bubble-out-meta: #bfe0ec; --danger: #f5726f; --danger-bg: #3a1e1d; --warning: #e8b84b; --warning-bg: #332810; --success: #59c98a; --success-bg: #16321f; --info: #549fe0; --info-bg: #132c40; --redacted: #b98fe0; --redacted-bg: #291d3d; --secret: #ab9c80; --secret-bg: #282213; --appr-once: #59c98a; --appr-once-bg: #16321f; --appr-session: #549fe0; --appr-session-bg: #132c40; --appr-always: #8393f0; --appr-always-bg: #1e2140; --appr-deny: #f5726f; --appr-deny-bg: #3a1e1d; --diff-add-fg: #84d8a6; --diff-add-bg: #16321f; --diff-del-fg: #e89b98; --diff-del-bg: #3a1e1d; } /* Ameixa: roxo-uva noturno + acento lavanda (preset novo). */ [data-theme="plum"] { --bg: #15121c; --surface-1: #1d1928; --surface-2: #221c2e; --surface-3: #2b2439; --border: #352c46; --border-strong: #493d5f; --text: #e9e2f2; --text-muted: #a99cbf; --text-faint: #7c7090; --accent: #b98cff; --accent-hover: #cba8ff; --on-accent: #1e1030; --chat-bg: #15121c; --bubble-in: #221c2e; --on-bubble-in: #e9e2f2; --bubble-in-meta: #948aa8; --bubble-out: #6b3f9e; --on-bubble-out: #f5eefe; --bubble-out-meta: #d3c2ea; --danger: #f5726f; --danger-bg: #3a1e1d; --warning: #e8b84b; --warning-bg: #332810; --success: #59c98a; --success-bg: #16321f; --info: #549fe0; --info-bg: #132c40; --redacted: #b98fe0; --redacted-bg: #291d3d; --secret: #ab9c80; --secret-bg: #282213; --appr-once: #59c98a; --appr-once-bg: #16321f; --appr-session: #549fe0; --appr-session-bg: #132c40; --appr-always: #8393f0; --appr-always-bg: #1e2140; --appr-deny: #f5726f; --appr-deny-bg: #3a1e1d; --diff-add-fg: #84d8a6; --diff-add-bg: #16321f; --diff-del-fg: #e89b98; --diff-del-bg: #3a1e1d; } /* Floresta: verde-musgo escuro + acento menta (preset novo). */ [data-theme="forest"] { --bg: #0f1913; --surface-1: #14211a; --surface-2: #182620; --surface-3: #1f3329; --border: #26402f; --border-strong: #35543f; --text: #dceee3; --text-muted: #93b09c; --text-faint: #5f7f6b; --accent: #5fd39a; --accent-hover: #7fe0b0; --on-accent: #06231a; --chat-bg: #0f1913; --bubble-in: #182620; --on-bubble-in: #dceee3; --bubble-in-meta: #82a48c; --bubble-out: #2f7d54; --on-bubble-out: #eafcf1; --bubble-out-meta: #bfe6cf; --danger: #f5726f; --danger-bg: #3a1e1d; --warning: #e8b84b; --warning-bg: #332810; --success: #59c98a; --success-bg: #16321f; --info: #549fe0; --info-bg: #132c40; --redacted: #b98fe0; --redacted-bg: #291d3d; --secret: #ab9c80; --secret-bg: #282213; --appr-once: #59c98a; --appr-once-bg: #16321f; --appr-session: #549fe0; --appr-session-bg: #132c40; --appr-always: #8393f0; --appr-always-bg: #1e2140; --appr-deny: #f5726f; --appr-deny-bg: #3a1e1d; --diff-add-fg: #84d8a6; --diff-add-bg: #16321f; --diff-del-fg: #e89b98; --diff-del-bg: #3a1e1d; } /* ------------------------------------------------------------ elementos */ * { box-sizing: border-box; } html { color-scheme: dark; } [data-theme="light"], [data-theme="solar"] { color-scheme: light; } /* o atributo `hidden` sempre esconde — senão um `display:` de classe (ex: .notif-banner{display:flex}) sobrepõe o [hidden] da UA e o elemento não some */ [hidden] { display: none !important; } /* densidade: escala a fonte-raiz — como tudo é rem, encolhe/cresce junto (cabe mais na tela do celular). Inputs no mobile ficam em 16px fixo p/ não dar zoom no iOS, independente disto. */ html[data-density="compact"] { font-size: 87.5%; } html[data-density="large"] { font-size: 112.5%; } /* tipo de fonte da interface (troca --font-ui; --font-mono segue no código) */ html[data-font="system"] { --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } html[data-font="serif"] { --font-ui: Georgia, "Noto Serif", "Times New Roman", serif; } html[data-font="mono"] { --font-ui: var(--font-mono); } body { font-family: var(--font-ui); font-size: var(--text-base); line-height: 1.5; margin: 0; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); text-decoration: underline; } /* ---- a11y: skip-link (aparece só com foco de teclado) ---- */ .skip-link { position: absolute; left: -9999px; z-index: 100; background: var(--accent); color: var(--on-accent); padding: .5rem 1rem; border-radius: var(--radius-sm); } .skip-link:focus { left: .5rem; top: .5rem; } /* mobile não tem header: a bottom nav (slot do meio = página atual) já diz onde você está, liberando o topo da tela. Desktop usa a sidebar. */ .brand { font-weight: 650; color: var(--text); letter-spacing: .01em; } main { max-width: 74rem; margin: 1.5rem auto; padding: 0 1rem; min-width: 0; } /* ---- sidebar (desktop) — mobile usa bottom nav ---- */ .sidebar { display: none; } @media (min-width: 641px) { .shell { display: grid; grid-template-columns: 14rem minmax(0, 1fr); } .sidebar { display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--surface-1); border-right: 1px solid var(--border); padding: 1rem 0 .8rem; } .sidebar .brand { display: block; padding: 0 1rem .8rem; font-size: var(--text-lg); } .sidebar nav { display: flex; flex-direction: column; flex: 1; } .sidebar nav h3 { margin: .9rem 1rem .25rem; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); } .sidebar nav a { display: block; padding: .38rem 1rem; color: var(--text-muted); font-size: var(--text-sm); border-left: 2px solid transparent; } .sidebar nav a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; } .sidebar nav a[aria-current="page"] { color: var(--accent); font-weight: 600; background: var(--surface-2); border-left-color: var(--accent); } .sidebar-foot { padding: .8rem 1rem 0; border-top: 1px solid var(--border); margin-top: .8rem; } .settings-link { display: flex; align-items: center; gap: .5rem; color: var(--text-muted); font-size: var(--text-sm); padding: .3rem 0; } .settings-link:hover { color: var(--accent); text-decoration: none; } .settings-link[aria-current="page"] { color: var(--accent); font-weight: 600; } .settings-link svg { width: 18px; height: 18px; } } /* ---- bottom nav + sheet (mobile; escondidos no desktop) ---- */ .bottomnav, .navsheet, .navsheet-toggle, .navsheet-backdrop { display: none; } /* ---- theme toggle ---- */ .theme-toggle { display: flex; flex-wrap: wrap; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 2px; } .theme-toggle a { font-size: var(--text-xs); padding: 3px 9px; border-radius: var(--radius-pill); color: var(--text-muted); line-height: 1.4; } .theme-toggle a:hover { color: var(--text); text-decoration: none; } .theme-toggle a[aria-current="true"] { background: var(--accent); color: var(--on-accent); } .density-toggle a { min-width: 1.7rem; text-align: center; font-weight: 600; } /* dropdown de tema (7 paletas + Sistema): select nativo estilizado pra casar com o design — sem aparência de widget do SO. Caret próprio no wrapper (o ` sem type. Regras do chat vencem por classe. */ button, .btn { min-height: 2.75rem; } input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=hidden]), select, textarea { min-height: 2.75rem; font-size: max(16px, 1rem); } /* formulários inline soltos (ex.: /models "modelo fixo") empilham e enchem a linha — nada de select/botão espremidos lado a lado */ form.inline { display: flex; flex-wrap: wrap; gap: .5rem; align-items: stretch; } form.inline > select, form.inline > input[type=text], form.inline > input[type=number] { flex: 1 1 100%; } form.inline > button, form.inline > .btn { flex: 1 1 100%; } /* avatar (/settings): input de arquivo nativo é largo e estourava a borda; empilha e enche a linha, com os botões abaixo em largura total */ .avatar-row { flex-direction: column; align-items: stretch; } .avatar-row input, .avatar-row button, .avatar-emoji-in { width: 100%; } .avatar-quick-b { min-height: 2.6rem; min-width: 2.9rem; font-size: 1.35rem; } } /* input de arquivo nativo nunca estoura o container (qualquer viewport) */ input[type=file] { max-width: 100%; box-sizing: border-box; } /* desktop: garante que bottom nav/sheet fiquem escondidos */ @media (min-width: 641px) { .bottomnav, .navsheet, .navsheet-backdrop { display: none !important; } } /* alvos de toque ≥44px e fonte ≥16px nos campos (evita zoom iOS) */ @media (pointer: coarse) { button, .btn { min-height: 2.75rem; padding: .55rem 1rem; } input[type=text], input[type=password], input[type=number], select, textarea { font-size: max(16px, 1rem); min-height: 2.75rem; /* nunca <16px: sem zoom iOS */ } .theme-toggle a { padding: 7px 11px; } } /* ============ PWA / chat Fase B ============ */ /* aviso de sem-conexão (some sozinho ao reconectar) */ .offline-bar { background: var(--warning-bg); border: 1px solid var(--warning); color: var(--text); border-radius: var(--radius-sm); padding: .4rem .7rem; margin: .4rem .6rem 0; font-size: var(--text-xs); } /* busca DENTRO da conversa (barra sob o header) */ .chat-search { margin: 0; padding: .5rem .6rem; background: var(--surface-1); border-bottom: 1px solid var(--border); } .chat-search-form { display: flex; gap: .4rem; align-items: center; } .chat-search-form input { flex: 1; min-width: 0; font-family: var(--font-ui); font-size: max(16px, 1rem); padding: .5rem .7rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); } .chat-search-form .chat-btn { width: 2.4rem; height: 2.4rem; } .chat-search-results { margin-top: .5rem; max-height: 42vh; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .2rem .6rem; background: var(--surface-1); } .chat-search-results[hidden] { display: none; } /* cada resultado é um botão que ocupa a linha toda, alinhado à esquerda */ .chat-search-results .search-hit { display: block; width: 100%; text-align: left; background: transparent; color: var(--text); border-radius: 0; font-size: var(--text-sm); cursor: pointer; } .chat-search-results .search-hit:hover { background: var(--surface-2); } .chat-search-results .search-when { display: block; margin-top: .2rem; color: var(--text-faint); font-size: 10px; } .muted { color: var(--text-faint); font-size: var(--text-sm); } /* janela de contexto do resultado ('pular pra') — overlay igual ao command palette */ .ctx-overlay { position: fixed; inset: 0; z-index: 70; display: flex; justify-content: center; align-items: center; padding: 1rem; background: rgba(0,0,0,.5); } .ctx-box { position: relative; width: min(40rem, 94vw); max-height: 80vh; overflow-y: auto; display: flex; flex-direction: column; gap: .45rem; background: var(--surface-1); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: 0 8px 30px rgba(0,0,0,.4); padding: .8rem; } .ctx-head { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); } .ctx-close { background: transparent; color: var(--text-muted); border: 0; font-size: 1.1rem; padding: 0 .3rem; } .ctx-close:hover { background: transparent; color: var(--text); } .ctx-hit { outline: 2px solid var(--accent); } /* ===================================================== TEMAS (Fase 2) ==== */ /* galeria de temas + construtor de tema custom (/themes) */ /* galeria de temas (design premium): card com mini-preview do chat */ .theme-gallery { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); } .tcard { background: var(--surface-1); border: 1px solid var(--border); border-radius: .875rem; padding: 0; position: relative; overflow: hidden; text-decoration: none; color: var(--text); display: block; } .tcard:hover { border-color: var(--border-strong); } .tcard.active { border: 1.5px solid var(--accent); box-shadow: 0 0 0 3px var(--success-bg); } .tcard .tick { position: absolute; top: 8px; right: 8px; z-index: 2; color: var(--accent); display: none; } .tcard .tick svg { width: 18px; height: 18px; } .tcard.active .tick { display: inline-flex; } .tprev { padding: 12px; overflow: hidden; } .tprev .b { display: inline-block; max-width: 86%; padding: 5px 9px; border-radius: 11px 11px 11px 4px; font-size: 10.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tprev .me-row { text-align: right; margin-top: 6px; } .tprev .b.me { border-radius: 11px 11px 4px 11px; } .tfoot { display: flex; align-items: center; gap: 7px; padding: 9px 11px; background: var(--surface-1); } .tfoot .sw { width: 9px; height: 9px; border-radius: 50%; flex: none; } .tfoot .nm { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; } .tfoot .tag { font-size: 10px; padding: 2px 6px; border-radius: 5px; background: var(--surface-2); color: var(--text-muted); flex: none; } .tfoot .tag.novo { color: var(--accent); background: var(--success-bg); border: 1px solid var(--success-bd); padding: 1px 6px; } .tcard .tdel { position: absolute; top: 6px; left: 6px; z-index: 2; width: 1.3rem; height: 1.3rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--surface-3); color: var(--text-muted); font-size: .8rem; line-height: 1; display: none; align-items: center; justify-content: center; } .tcard:hover .tdel, .tcard.active .tdel { display: flex; } .tcard .tdel:hover { background: var(--danger); color: #fff; } .tcard.add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1.5px dashed var(--border); min-height: 132px; color: var(--text-muted); font-weight: 500; font-size: 12px; } .tcard.add .plus { font-size: 24px; line-height: 1; color: var(--text-muted); } /* bloco de tokens do tema ativo + campos do design (lbl/fld) */ .tok-block { font-family: var(--font-mono); font-size: 11px; line-height: 1.65; background: var(--surface-1); border: 1px solid var(--border); border-radius: .75rem; padding: 12px; color: var(--text-muted); overflow-wrap: anywhere; } .tok-block .tk { color: var(--info); } .tok-block .tv-accent { color: var(--accent); } .tok-block .faint { color: var(--text-faint); margin-top: 4px; } /* fase 4: rótulo uppercase com tracking (padrão de TODA tela de config) */ .lbl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 5px; display: block; } /* par rótulo/valor em pilha (regras, intervenções, checkpoints…) */ .kv { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); } .kv-v { font-size: .875rem; margin: 2px 0 12px; overflow-wrap: anywhere; } .kv-v.mono { font-family: var(--font-mono); } /* sub-card (bloco surf2 dentro de card) */ .subcard { background: var(--surface-2); border: 1px solid var(--border); border-radius: .75rem; padding: 14px; } /* checkbox nativo na cor do design */ input[type=checkbox], input[type=radio] { accent-color: var(--info); } /* botões de ação de tarefa (ZeAgente): outline 40px, ícone colorido */ .tb { min-height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: 10px; background: transparent; color: var(--text); font-weight: 500; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; width: auto; } .tb:hover { background: var(--surface-2); } .tb .tb-ic { display: inline-flex; } .tb .tb-ic svg { width: 14px; height: 14px; } .tb.tb-ok { border-color: var(--success-bd); background: var(--success-bg); color: var(--success); } .tb.tb-ok:hover { background: var(--success-bd); } .tb.tb-danger { border-color: var(--danger-bd); background: var(--danger-bg); color: var(--danger); } .tb.tb-danger:hover { background: var(--danger-bd); } .task-actions { margin-top: 12px; } /* chips de filtro com tinta semântica (tarefas) */ .fchip.t-info { color: var(--info); background: var(--info-bg); border-color: var(--info-bd); } .fchip.t-warn { color: var(--warning); background: var(--warning-bg); border-color: var(--warning-bd); } .fchip.t-ok { color: var(--success); background: var(--success-bg); border-color: var(--success-bd); } .fchip.t-danger { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-bd); } .task-card { margin: 0; } .task-card a:hover { text-decoration: none; color: var(--accent); } /* pills de status com ícone (home) */ .stat-pill { font-family: var(--font-mono); font-size: 11.5px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 5px 11px; } .stat-pill svg { width: 13px; height: 13px; } .stat-pill.ok { color: var(--success); background: var(--success-bg); border: 1px solid var(--success-bd); } .stat-pill.info { color: var(--info); background: var(--info-bg); border: 1px solid var(--info-bd); } .stat-pill.warn { color: var(--warning); background: var(--warning-bg); border: 1px solid var(--warning-bd); } .fld { background: var(--surface-2); border: 1px solid var(--border); border-radius: .7rem; padding: 0 13px; min-height: 46px; display: flex; align-items: center; font-size: .875rem; gap: .5rem; } .fld input, .fld select { border: 0; background: transparent; padding: 0; min-height: 44px; width: 100%; font-size: .875rem; } .fld input:focus, .fld select:focus { outline: none; } .fld.mono input { font-family: var(--font-mono); font-size: 12.5px; } /* construtor */ .builder { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; } @media (max-width: 640px) { .builder { grid-template-columns: 1fr; } } .bfield { margin-bottom: .85rem; } .bfield:last-of-type { margin-bottom: 0; } .blabel { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-sm); font-weight: 550; margin-bottom: .35rem; } .blabel .h { font-weight: 400; color: var(--text-faint); font-size: var(--text-xs); } .brow { display: flex; align-items: center; gap: .6rem; } .brow input[type=color] { -webkit-appearance: none; appearance: none; width: 2.8rem; height: 2.1rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: none; padding: 0; cursor: pointer; flex: none; min-height: auto; } .brow input[type=color]::-webkit-color-swatch-wrapper { padding: 3px; } .brow input[type=color]::-webkit-color-swatch { border: none; border-radius: 4px; } .brow .hx { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .3rem .55rem; width: 6rem; text-align: center; } .bseg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px; gap: 2px; } .bseg button { border: 0; background: none; color: var(--text-muted); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 550; padding: .3rem .8rem; border-radius: var(--radius-sm); cursor: pointer; min-height: auto; } .bseg button.on { background: var(--surface-1); color: var(--text); } .bname { width: 100%; margin-top: .3rem; font-family: var(--font-ui); font-size: var(--text-base); color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .5rem .65rem; } .bname:focus { outline: none; border-color: var(--accent); } .bsave { width: 100%; margin-top: .8rem; } .bsave:disabled { opacity: .45; cursor: not-allowed; } /* preview ao vivo */ .blive { border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; } .blive-bar { display: flex; align-items: center; gap: .55rem; padding: .55rem .75rem; font-size: var(--text-sm); } .blive-av { width: 1.7rem; height: 1.7rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .85rem; flex: none; } .blive-chat { padding: .8rem; display: flex; flex-direction: column; gap: .4rem; min-height: 11rem; } .blive .b { max-width: 82%; padding: .35rem .6rem; border-radius: .8rem; font-size: var(--text-sm); line-height: 1.35; } .blive .b.ze { align-self: flex-start; border-bottom-left-radius: .2rem; } .blive .b.me { align-self: flex-end; border-bottom-right-radius: .2rem; } .blive-comp { display: flex; align-items: center; gap: .5rem; padding: .5rem .65rem; border-top: 1px solid rgba(128,128,128,.18); } .blive-in { flex: 1; font-size: var(--text-xs); padding: .35rem .7rem; border-radius: var(--radius-pill); } .blive-send { width: 1.9rem; height: 1.9rem; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: .85rem; } /* leitura AA */ .baa { margin-top: .8rem; display: flex; flex-direction: column; gap: .4rem; } .baa-row { display: flex; align-items: center; gap: .5rem; font-size: var(--text-sm); } .baa-row .nm { color: var(--text-muted); flex: 1; } .baa-row .rt { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint); min-width: 3.2rem; text-align: right; } .baa-chip { font-size: 10px; font-weight: 600; padding: 1px .5rem; border-radius: var(--radius-pill); min-width: 4rem; text-align: center; } .baa-chip.ok { background: var(--success-bg); color: var(--success); } .baa-chip.bad { background: var(--danger-bg); color: var(--danger); } .bwarn { margin-top: .7rem; font-size: var(--text-sm); color: var(--danger); background: var(--danger-bg); border: 1px solid var(--danger); border-radius: var(--radius-sm); padding: .5rem .65rem; display: none; } .bwarn.show { display: block; } .bderived { margin-top: .7rem; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .55rem .65rem; line-height: 1.7; word-break: break-all; } .bderived b { color: var(--text-muted); font-weight: 600; }