/* Plain, fast, and legible on a phone in a mechanical room: high contrast, no framework, no web fonts, and nothing that moves while an answer is arriving. */ :root { --bg: #f7f8fa; --panel: #ffffff; --ink: #16191d; --muted: #5b6672; --line: #dfe3e8; --accent: #14549b; --accent-soft: #e8f0f9; --warn: #8a5a00; --warn-soft: #fdf3e0; --alarm: #a5121b; --alarm-soft: #fdeceb; --ok: #1d6b45; --radius: 10px; } @media (prefers-color-scheme: dark) { :root { --bg: #14171b; --panel: #1c2026; --ink: #eceff3; --muted: #9aa5b1; --line: #2c333c; --accent: #6fa8e6; --accent-soft: #1b2b3d; --warn: #e0b055; --warn-soft: #2e2617; --alarm: #ff8e88; --alarm-soft: #34191a; --ok: #5cc48d; } } * { box-sizing: border-box; } /* .gate and .app both set display, which beats the hidden attribute's own display:none, so hiding either one has to say so explicitly. */ [hidden] { display: none !important; } /* One page serves staging and production. The server marks production on , and whatever only makes sense on one of them is hidden on the other: production must not say "staging" or "the access code Muneeb sent you". */ html:not([data-env="production"]) .production-only, html[data-env="production"] .staging-only { display: none !important; } html, body { height: 100%; margin: 0; } body { background: var(--bg); color: var(--ink); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-text-size-adjust: 100%; } button { font: inherit; cursor: pointer; } .muted { color: var(--muted); } .error { color: var(--alarm); } /* access gate */ .gate { min-height: 100%; display: grid; place-items: center; padding: 24px; } .gate-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; max-width: 380px; width: 100%; } .gate-card h1 { font-size: 19px; margin: 0 0 6px; } .gate-card p { margin: 0 0 16px; font-size: 14px; } #gate-form { display: flex; gap: 8px; } #passcode { flex: 1; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); } #gate-form button { padding: 10px 16px; border: 0; border-radius: 8px; background: var(--accent); color: #fff; } /* frame */ .app { display: flex; flex-direction: column; height: 100%; } /* The name on its own line and the chips under it, so a phone shows the whole name instead of "Pro-Tech technical assis...". On the right, the close control sits in the corner with "New question" under it. */ .bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 14px; background: var(--panel); border-bottom: 1px solid var(--line); } .title { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 4px; } .title strong { font-size: 15px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chips { display: flex; flex-wrap: wrap; gap: 6px; } .actions { display: flex; flex-direction: column; align-items: flex-end; flex: none; } .actions .link { font-size: 14px; padding: 2px 6px; } .close-x { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); } .close-x:hover, .close-x:focus-visible { background: var(--accent-soft); color: var(--ink); } .close-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .close-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; } .gate { position: relative; } .gate-close { position: absolute; top: 8px; right: 8px; } .chip { font-size: 11px; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; } .chip.staging { background: var(--warn-soft); color: var(--warn); border-color: transparent; } .chip.site { background: var(--accent-soft); color: var(--accent); border-color: transparent; } /* flex: none and nowrap together, or the header's own button is the thing that breaks the header: at phone width "New question" wrapped onto two lines and pushed the title into an ellipsis with room to spare. */ .link { background: none; border: 0; color: var(--accent); padding: 6px; white-space: nowrap; flex: none; } /* thread */ .thread { flex: 1; overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 16px; } .intro p { margin: 0 0 12px; color: var(--muted); font-size: 14px; } .examples { display: flex; flex-wrap: wrap; gap: 8px; } .example { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; font-size: 13px; color: var(--ink); text-align: left; } .turn { display: flex; flex-direction: column; gap: 8px; } .q { align-self: flex-end; max-width: 85%; background: var(--accent-soft); color: var(--ink); padding: 9px 12px; border-radius: var(--radius); font-size: 15px; } .a { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 14px; } .a p { margin: 0 0 10px; } .a p:last-child { margin-bottom: 0; } .a li { margin: 0 0 6px; } .a ul, .a ol { margin: 0 0 10px; padding-left: 22px; } .a.emergency { border-color: var(--alarm); background: var(--alarm-soft); } .a.emergency a[href^="tel:"] { color: var(--alarm); font-weight: 600; font-size: 17px; } .a.routed { border-left: 3px solid var(--warn); } .cite { display: inline-block; min-width: 18px; text-align: center; font-size: 11px; line-height: 16px; padding: 0 4px; margin: 0 1px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); border: 0; vertical-align: text-top; } .thinking { color: var(--muted); font-size: 14px; } .dot { animation: blink 1.2s infinite; } @keyframes blink { 0%, 60% { opacity: 1; } 80%, 100% { opacity: 0.25; } } /* sources */ .sources { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; } .sources summary { cursor: pointer; font-size: 13px; color: var(--muted); } .source { border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; margin-top: 8px; background: var(--bg); } .source h4 { margin: 0 0 4px; font-size: 13px; } .source pre { margin: 6px 0 0; white-space: pre-wrap; font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--muted); max-height: 260px; overflow: auto; } .badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .badge { font-size: 11px; padding: 1px 7px; border-radius: 999px; } .badge.withheld { background: var(--warn-soft); color: var(--warn); } .badge.whole { background: var(--alarm-soft); color: var(--alarm); } .badge.plan { background: var(--accent-soft); color: var(--accent); } .badge.ref { background: var(--warn-soft); color: var(--warn); } .badge.corrected { background: var(--accent-soft); color: var(--accent); } .guards { margin-top: 8px; font-size: 12.5px; color: var(--muted); } .feedback { display: flex; gap: 8px; align-items: center; margin-top: 10px; font-size: 13px; color: var(--muted); } .feedback button { background: none; border: 1px solid var(--line); border-radius: 8px; padding: 3px 9px; color: var(--muted); } .feedback button.picked { border-color: var(--accent); color: var(--accent); } /* composer */ .composer { border-top: 1px solid var(--line); background: var(--panel); padding: 8px 14px 12px; } .notice { margin: 0 0 8px; font-size: 12px; color: var(--muted); } #ask-form { display: flex; gap: 8px; align-items: flex-end; } #question { flex: 1; resize: none; max-height: 140px; padding: 10px 12px; font: inherit; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); } #send { padding: 10px 18px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; } #send[disabled] { opacity: 0.5; cursor: default; }