Spaces:
Paused
Paused
| /* Planificador VFR — self-contained styles (no CDN, no webfonts). | |
| Light and dark are both first-class: a Space inherits whatever the visitor's | |
| OS is set to, and a briefing screen that is unreadable in one of them is | |
| unreadable half the time. */ | |
| :root { | |
| color-scheme: light dark; | |
| --bg: #f6f7f9; | |
| --surface: #ffffff; | |
| --surface-2: #f0f2f5; | |
| --border: #d9dee5; | |
| --text: #16191d; | |
| --text-dim: #5b636e; | |
| --accent: #1d63b8; | |
| --accent-text: #ffffff; | |
| --ok: #1a7f52; | |
| --warn: #9a6413; | |
| --err: #b3261e; | |
| --tool: #6b3fa0; | |
| --radius: 10px; | |
| --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; | |
| --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| :root { | |
| --bg: #14161a; | |
| --surface: #1c1f24; | |
| --surface-2: #23272e; | |
| --border: #333941; | |
| --text: #e8eaed; | |
| --text-dim: #9aa3ae; | |
| --accent: #5b9dff; | |
| --accent-text: #0b1220; | |
| --ok: #56c78d; | |
| --warn: #e0aa4a; | |
| --err: #ff8a80; | |
| --tool: #bda0f0; | |
| } | |
| } | |
| * { box-sizing: border-box; } | |
| body { | |
| margin: 0; | |
| font-family: var(--sans); | |
| background: var(--bg); | |
| color: var(--text); | |
| display: flex; | |
| flex-direction: column; | |
| height: 100vh; | |
| font-size: 13px; | |
| line-height: 1.45; | |
| } | |
| /* ---------- Top bar ---------- */ | |
| .topbar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| padding: 10px 18px; | |
| background: var(--surface); | |
| border-bottom: 1px solid var(--border); | |
| flex-wrap: wrap; | |
| } | |
| .brand { display: flex; align-items: center; gap: 12px; } | |
| .brand-mark { | |
| font-size: 22px; | |
| background: var(--accent); | |
| color: var(--accent-text); | |
| width: 38px; height: 38px; | |
| border-radius: 9px; | |
| display: grid; place-items: center; | |
| } | |
| .brand h1 { font-size: 16px; margin: 0; font-weight: 650; } | |
| .brand-sub { margin: 0; font-size: 12px; color: var(--text-dim); } | |
| .brand-sub code { font-family: var(--mono); font-size: 11px; } | |
| .topbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } | |
| .pill { | |
| display: inline-flex; align-items: center; gap: 7px; | |
| padding: 5px 11px; | |
| border-radius: 999px; | |
| border: 1px solid var(--border); | |
| background: var(--surface-2); | |
| color: var(--text-dim); | |
| font-size: 12px; | |
| font-family: var(--sans); | |
| cursor: pointer; | |
| } | |
| .pill .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; } | |
| .pill-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); } | |
| .pill-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); } | |
| .pill-err { color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, var(--border)); } | |
| .pill-muted { color: var(--text-dim); } | |
| .btn { | |
| font-family: var(--sans); | |
| font-size: 13px; | |
| padding: 7px 14px; | |
| border-radius: 8px; | |
| border: 1px solid var(--border); | |
| background: var(--surface-2); | |
| color: var(--text); | |
| cursor: pointer; | |
| } | |
| .btn:hover { border-color: var(--accent); } | |
| .btn:disabled { opacity: .55; cursor: not-allowed; } | |
| .btn-primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; } | |
| .btn-ghost { background: transparent; } | |
| .btn-send { min-width: 140px; } | |
| /* ---------- Two-column layout: chat on the left, form + progress on the right ---------- */ | |
| .app-body { | |
| flex: 1; | |
| display: flex; | |
| min-height: 0; | |
| } | |
| .chat-col { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| min-width: 0; | |
| } | |
| /* ---------- Transcript ---------- */ | |
| .transcript { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 18px 18px 8px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .welcome { | |
| max-width: 640px; margin: 6vh auto 0; text-align: center; color: var(--text-dim); | |
| } | |
| .welcome h2 { color: var(--text); font-size: 17px; margin: 0 0 8px; } | |
| .welcome p { margin: 6px 0; } | |
| .welcome-warn { | |
| margin-top: 16px; font-size: 12px; | |
| border: 1px solid var(--border); border-left: 3px solid var(--warn); | |
| background: var(--surface); border-radius: var(--radius); | |
| padding: 9px 12px; text-align: left; | |
| } | |
| .msg { max-width: 780px; width: 100%; margin: 0 auto; } | |
| .msg-user .bubble { | |
| background: var(--accent); color: var(--accent-text); | |
| border-radius: var(--radius) var(--radius) 2px var(--radius); | |
| padding: 9px 13px; | |
| margin-left: auto; | |
| max-width: 78%; | |
| white-space: pre-wrap; | |
| } | |
| .msg-user { display: flex; } | |
| .msg-agent .bubble { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 12px 15px; | |
| } | |
| /* Activity trace: reasoning + tool calls, collapsed by default so the answer | |
| stays the thing you read first. */ | |
| .trace { | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| background: var(--surface); | |
| overflow: hidden; | |
| margin-bottom: 10px; | |
| } | |
| .trace-head { | |
| display: flex; align-items: center; gap: 10px; | |
| padding: 9px 14px; | |
| background: var(--surface-2); | |
| font-size: 13px; color: var(--text-dim); | |
| border-bottom: 1px solid transparent; | |
| } | |
| .trace[open] .trace-head { border-bottom-color: var(--border); } | |
| .trace-head::-webkit-details-marker { display: none; } | |
| .trace-head { cursor: pointer; list-style: none; } | |
| .trace-head .spinner { | |
| width: 12px; height: 12px; border-radius: 50%; | |
| border: 2px solid var(--border); border-top-color: var(--accent); | |
| animation: spin .8s linear infinite; flex: none; | |
| } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| .trace-body { padding: 6px 14px 12px; display: flex; flex-direction: column; gap: 8px; } | |
| .step { | |
| border-left: 2px solid var(--border); | |
| padding: 4px 0 4px 12px; | |
| font-size: 13px; | |
| } | |
| .step-label { | |
| font-size: 11px; text-transform: uppercase; letter-spacing: .06em; | |
| color: var(--text-dim); margin-bottom: 3px; display: flex; gap: 8px; align-items: center; | |
| } | |
| .step-reasoning { border-left-color: var(--accent); } | |
| .step-reasoning .step-body { color: var(--text-dim); font-style: italic; white-space: pre-wrap; } | |
| .step-thinking { border-left-color: var(--accent); } | |
| .step-thinking .step-body { white-space: pre-wrap; } | |
| .step-tool { border-left-color: var(--tool); } | |
| .step-tool .tool-name { font-family: var(--mono); color: var(--tool); font-weight: 600; font-size: 12px; } | |
| .step-status { border-left-color: var(--border); color: var(--text-dim); } | |
| .step-err { border-left-color: var(--err); } | |
| .step-err .step-body { color: var(--err); white-space: pre-wrap; } | |
| pre.code { | |
| font-family: var(--mono); font-size: 12px; | |
| background: var(--surface-2); | |
| border: 1px solid var(--border); | |
| border-radius: 7px; | |
| padding: 9px 11px; | |
| overflow-x: auto; | |
| margin: 5px 0 0; | |
| max-height: 320px; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| } | |
| .error-box { | |
| border: 1px solid color-mix(in srgb, var(--err) 45%, var(--border)); | |
| border-left: 3px solid var(--err); | |
| background: var(--surface); | |
| border-radius: var(--radius); | |
| padding: 12px 15px; | |
| color: var(--err); | |
| white-space: pre-wrap; | |
| font-size: 14px; | |
| } | |
| /* Rendered answer */ | |
| .bubble h2, .bubble h3 { font-size: 15px; margin: 14px 0 6px; } | |
| .bubble p { margin: 8px 0; } | |
| .bubble ul, .bubble ol { margin: 8px 0; padding-left: 22px; } | |
| .bubble li { margin: 3px 0; } | |
| .bubble code { font-family: var(--mono); font-size: 13px; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; } | |
| .bubble table { border-collapse: collapse; margin: 10px 0; font-size: 13px; width: 100%; } | |
| .bubble th, .bubble td { border: 1px solid var(--border); padding: 5px 9px; text-align: left; } | |
| .bubble th { background: var(--surface-2); } | |
| /* ---------- Composer (free text — always visible, bottom of the chat column) ---------- */ | |
| .composer { | |
| border-top: 1px solid var(--border); | |
| background: var(--surface); | |
| padding: 8px 14px 8px; | |
| } | |
| .free-form { display: flex; align-items: flex-end; gap: 8px; } | |
| .free-form .btn-send { min-width: auto; padding: 7px 16px; } | |
| .field { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--text-dim); } | |
| .field em { color: var(--err); font-style: normal; } | |
| .field em.hint { color: var(--text-dim); font-weight: 400; } | |
| .field input, .field textarea, #free-text { | |
| font-family: var(--sans); font-size: 13px; | |
| padding: 6px 9px; | |
| border: 1px solid var(--border); | |
| border-radius: 7px; | |
| background: var(--bg); | |
| color: var(--text); | |
| width: 100%; | |
| } | |
| .field input:focus, #free-text:focus { outline: 2px solid var(--accent); outline-offset: -1px; } | |
| #free-text { | |
| font-family: var(--sans); resize: none; min-height: 36px; flex: 1; | |
| } | |
| .composer-hint { margin: 4px 0 0; font-size: 11px; color: var(--text-dim); } | |
| /* ---------- Sidebar: flight-data form + live progress ---------- */ | |
| .sidebar { | |
| width: 300px; | |
| flex: none; | |
| border-left: 1px solid var(--border); | |
| background: var(--surface); | |
| overflow-y: auto; | |
| padding: 14px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 18px; | |
| } | |
| .sidebar-section h3 { | |
| margin: 0 0 9px; font-size: 11px; font-weight: 650; | |
| text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); | |
| } | |
| .flight-form { display: flex; flex-direction: column; gap: 8px; } | |
| .flight-form .composer-hint { margin: 2px 0 4px; } | |
| .flight-form .btn-send { width: 100%; margin-top: 2px; } | |
| .progress-panel { font-size: 12px; } | |
| .progress-empty { margin: 0; color: var(--text-dim); } | |
| .checklist { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 5px; } | |
| .checklist li { display: flex; align-items: center; gap: 7px; color: var(--text-dim); } | |
| .checklist li.done { color: var(--text); } | |
| .checklist .check { | |
| width: 15px; height: 15px; border-radius: 50%; flex: none; | |
| display: grid; place-items: center; font-size: 10px; line-height: 1; | |
| border: 1px solid var(--border); color: var(--text-dim); | |
| } | |
| .checklist li.done .check { background: var(--ok); border-color: var(--ok); color: var(--accent-text); } | |
| .progress-live { | |
| margin: 0; padding: 8px 10px; border-radius: 7px; | |
| background: var(--surface-2); border: 1px solid var(--border); | |
| color: var(--text-dim); display: flex; align-items: center; gap: 8px; | |
| } | |
| .progress-live.busy::before { | |
| content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none; | |
| border: 2px solid var(--border); border-top-color: var(--accent); | |
| animation: spin .8s linear infinite; | |
| } | |
| .progress-live.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); } | |
| .progress-live.err { color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, var(--border)); } | |
| /* ---------- Settings dialog ---------- */ | |
| .dialog { | |
| border: 1px solid var(--border); | |
| border-radius: 14px; | |
| padding: 0; | |
| background: var(--surface); | |
| color: var(--text); | |
| max-width: 620px; | |
| width: calc(100% - 32px); | |
| } | |
| .dialog::backdrop { background: rgba(0,0,0,.5); } | |
| .dialog-inner { padding: 22px 24px 20px; display: flex; flex-direction: column; gap: 12px; } | |
| .dialog-inner h2 { margin: 0; font-size: 17px; } | |
| .dialog-inner h3 { margin: 0; font-size: 14px; } | |
| .dialog-inner hr { border: none; border-top: 1px solid var(--border); margin: 4px 0; width: 100%; } | |
| .dialog-note { margin: 0; font-size: 12px; color: var(--text-dim); } | |
| .dialog-note code { font-family: var(--mono); font-size: 11px; } | |
| .dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 6px; } | |
| .dialog-actions-inline { justify-content: space-between; align-items: center; margin-top: 0; } | |
| .settings-msg { font-size: 12px; color: var(--text-dim); text-align: right; } | |
| .settings-msg.ok { color: var(--ok); } | |
| .settings-msg.err { color: var(--err); } | |
| /* Used only inside the settings dialog now (endpoint name / namespace) — | |
| the flight form is a single column in the sidebar. */ | |
| .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } | |
| .grid-2 { grid-template-columns: repeat(2, 1fr); } | |
| @media (max-width: 860px) { | |
| .app-body { flex-direction: column; } | |
| .sidebar { | |
| width: auto; border-left: none; border-top: 1px solid var(--border); | |
| flex-direction: row; flex-wrap: wrap; max-height: 40vh; | |
| } | |
| .sidebar-section { flex: 1 1 220px; } | |
| .brand-sub { display: none; } | |
| .transcript { padding: 14px 12px 4px; } | |
| .composer { padding: 8px 12px 8px; } | |
| } | |