:root { --header-h: 56px; /* Zeecred palette (my picks) */ --accent: #5A2BE6; /* roxo Zeecred */ --accent-700: #4A22C5; --accent-50: #F2ECFF; --primary: #B7E51E; /* lima Zeecred */ --primary-700: #7FA010; --primary-50: #F7FCEB; --bg: #FAFAFF; /* leve violeta neutro */ --text: #101114; /* quase preto */ --muted: #6B6F7A; --card-bg: #FFFFFF; --card-border: #E7E8EF; --badge-bg: var(--accent-50); --badge-text: #5A7A0A; } /* ===== topo ===== */ body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, system-ui, -apple-system, sans-serif } header { height: var(--header-h); display: flex; align-items: center; background: #fff; border-bottom: 1px solid var(--card-border); padding: 0 24px; position: sticky; top: 0; z-index: 1000; } header a { color: var(--accent); text-decoration: none; font-weight: 500; margin-right: 16px } .tldr { border-left: 4px solid var(--accent) } .tldr h2 { margin-top: 8px } .tldr h3 { font-size: 16px; color: var(--primary-700); border-bottom: 1px solid var(--card-border); padding-bottom: 4px; margin-bottom: 8px; } /* ===== duas colunas ===== */ .layout { display: flex; min-height: calc(100vh - var(--header-h)); } .mark { color: var(--primary); font-weight: 600; } #searchForm { display: flex; align-items: center; } #searchForm input { flex: 1; } #searchForm button { margin-left: 8px; background-color: transparent; border: none; padding-left: 8; margin-left: 0px; margin-top: -5px; } #sidebar { width: 480px; border-right: 1px solid #ddd; background: #fff; /* top: var(--header-h); */ /* height: calc(100vh - var(--header-h) + 32px); */ height: 100vh; overflow: auto; position: fixed; border-top-right-radius: 12px; } #searchBox { display: block; position: fixed; top: 10px; right: 18px; z-index: 1; height: 32px; font-size: .9em; } #searchBoxLogo { display: block; margin: auto; height: 32px; } #mynetwork { width: 100%; height: 100%; } #content { padding: 24px 500px 32px !important; /* <- define o espaçamento que você quer (1ª imagem) */ box-sizing: border-box; width: calc(100vw - 235px); } /* Se o HTML carregado vier com /, “achata” e zera margens nativas */ #content :is(html, body) { display: contents !important; margin: 0 !important; padding: 0 !important; } /* Se vier
, centraliza e NÃO adiciona padding-top extra */ #content main { min-width: calc(100vw - 740px); max-width: 95vw; margin: 0 auto; padding: 0 !important; } /* Garante que o primeiro elemento não empurre o topo */ #content>*:first-child, #content main>*:first-child { margin-top: 0 !important; padding-top: 0 !important; } /* Evita variação quando o primeiro elemento é um H1 */ #content h1, #content .title { margin-top: 0 !important; } /* ===== conteúdo ===== */ h1 { font-size: 28px; font-weight: 600; margin: 0 0 4px } .badge { display: inline-block; background: var(--badge-bg); color: var(--badge-text); border: 1px solid #bae6fd; border-radius: 6px; padding: 2px 8px; font-size: 13px; margin-left: 8px } p.desc { color: var(--muted); margin-bottom: 24px; max-width: 800px } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px } .card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 20px; box-shadow: 0 1px 4px rgba(0, 0, 0, .05) } h2 { font-size: 18px; font-weight: 600; margin: 0 0 10px; color: var(--accent) } ul { margin: 0; padding-left: 18px } li { margin-bottom: 6px } /* ===== chat (ia.py) ===== */ .page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 28px; box-sizing: border-box; } .page header { width: 100%; max-width: 960px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; height: auto; background: transparent; border-bottom: none; padding: 0; position: static; } .page .title { display: flex; align-items: center; gap: 12px; } .page .logo { height: 28px; width: auto; } .chat { width: 100%; max-width: 960px; background: #fff; border: 1px solid var(--card-border); border-radius: 14px; padding: 16px; display: grid; gap: 14px; } .messages { min-height: 280px; border: 1px dashed #e3e3e3; border-radius: 12px; padding: 12px; display: grid; gap: 10px; background: #fbfbff; } .bubble { padding: 10px 12px; border-radius: 10px; max-width: 80%; line-height: 1.4; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; } .bubble.user { margin-left: auto; background: var(--accent-50); color: var(--accent-700); border: 1px solid #e5ddff; } .bubble.assistant { background: #f7f7fb; color: #1f1f1f; border: 1px solid #e5e5ef; } .bubble.assistant h1, .bubble.assistant h2, .bubble.assistant h3, .bubble.assistant h4, .bubble.assistant h5, .bubble.assistant h6 { margin: 0.2em 0 0.4em; line-height: 1.2; } .bubble.assistant pre { margin: 0.5em 0; padding: 10px 12px; background: #0f172a; color: #e2e8f0; border-radius: 8px; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; max-width: 100%; font-size: 13px; } .bubble.assistant code { background: rgba(15, 23, 42, 0.08); padding: 2px 4px; border-radius: 4px; font-family: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; font-size: 13px; } .bubble.assistant pre code { background: transparent; padding: 0; color: inherit; white-space: pre-wrap; overflow-wrap: anywhere; } .bubble.assistant ul, .bubble.assistant ol { margin: 0.4em 0 0.4em 1.2em; padding: 0; } .bubble.assistant li { margin: 0.2em 0; } .bubble.assistant a { color: #4f46e5; text-decoration: underline; } .bubble.assistant table { width: 100%; border-collapse: collapse; margin: 0.4em 0; font-size: 13px; } .bubble.assistant thead th { text-align: left; font-weight: 600; color: #2b2b2b; border-bottom: 1px solid #d9d9e3; padding: 6px 8px; } .bubble.assistant thead th:nth-child(2), .bubble.assistant thead th:nth-child(3), .bubble.assistant tbody td:nth-child(2), .bubble.assistant tbody td:nth-child(3) { text-align: right; } .bubble.assistant tbody td { padding: 6px 8px; border-bottom: 1px solid #e6e6ef; vertical-align: top; } .bubble.assistant tbody tr:nth-child(even) { background: #f2f3fb; } .bubble.assistant tr.endpoint-highlight td { background: #eef2ff; } .bubble.assistant tr.endpoint-questions ul li { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .bubble.assistant .question-delete { border: 1px solid #e2e2ef; background: #fff; color: #c02626; font-size: 12px; border-radius: 6px; padding: 2px 8px; cursor: pointer; } .bubble.assistant .question-delete:disabled { opacity: 0.6; cursor: not-allowed; } .bubble.assistant .endpoint-toggle { background: transparent; border: none; color: var(--accent); font-weight: 600; cursor: pointer; padding: 0; text-decoration: none; } .bubble.assistant .endpoint-toggle:hover { text-decoration: underline; } .bubble.assistant .answer-preview { max-height: 140px; overflow: auto; white-space: normal; } .bubble.assistant tr.endpoint-questions td { background: #ffffff; padding: 10px 12px; border-bottom: 1px solid #e6e6ef; } .bubble.assistant tr.endpoint-questions ul { margin: 0; padding-left: 18px; } .chat form { display: flex; gap: 10px; } .chat textarea { flex: 1; min-height: 64px; border: 1px solid #e3e3e3; border-radius: 10px; padding: 10px 12px; font-size: 14px; resize: vertical; outline: none; } .chat button { border: none; border-radius: 10px; background: var(--accent); color: #fff; padding: 12px 16px; font-weight: 600; cursor: pointer; min-width: 120px; } .chat button:hover { background: var(--accent-700); } pre { background: #0f172a; color: #e2e8f0; padding: 16px; border-radius: 8px; font-size: 14px; overflow: auto }