:root { color-scheme: light dark; --blue: #1a73e8; --danger: #d93025; --success: #1e8e3e; --warn: #f9a825; /* Norm's internal pages (base.html-derived — Chat/New Ride Request/ INQ/Jobs/Tasks) vs. the public /request page kept looking identical enough to cause real mix-ups switching between tabs, 2026-08-19 — this landmark color is the fix. Fallback default when a client has no stripe_color of its own (see --client-stripe below) — not retuned per client here anymore, see plans/client-stripe-color-and-request-link.md. */ --norm-bg: #1ac6ff; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #fff; color: #1a1a1a; } @media (prefers-color-scheme: dark) { body { background: #111; color: #eee; } } /* Landmark to tell Norm's internal pages (base.html-derived — Chat/New Ride Request/INQ/Jobs/Tasks) apart from the public /request page at a glance, added 2026-08-19 after real mix-ups switching between tabs. Applied via a class (templates/base.html only) so it never touches request.html or the static verification pages (which don't use this stylesheet at all). Started as a full-page body background tint, but that was too much screen real estate on a phone — narrowed same day to this thin fixed stripe down the left edge instead. pointer-events: none so it can never sit on top of and block a real button; fixed (not part of layout) so it costs zero content width. Always-on regardless of system dark/light mode, by design — a consistent landmark, not a themed detail. --norm-bg (top of this file) is the single place to retune the color. */ body.norm-page::before { content: ""; position: fixed; top: 0; left: 0; bottom: 0; width: 6px; /* --client-stripe is set inline on by templates/base.html, from this client's own config.json (stripe_color, see ride_agent.py's load_config()) — falls back to --norm-bg above if unset. One rule for every client, no per-client CSS block to add. See plans/client-stripe-color-and-request-link.md. */ background: var(--client-stripe, var(--norm-bg)); pointer-events: none; z-index: 1000; } .topbar { padding: 1rem; border-bottom: 1px solid rgba(128, 128, 128, 0.3); } .topbar h1 { margin: 0 0 0.25rem; font-size: 1.25rem; } .subtitle { margin: 0 0 0.75rem; font-size: 0.85rem; opacity: 0.7; } nav a { display: inline-block; padding: 0.5rem 1rem; margin-right: 0.5rem; border-radius: 8px; text-decoration: none; color: inherit; background: rgba(128, 128, 128, 0.12); } nav a.has-open-tasks { background: var(--warn); color: #1a1a1a; } nav a.active { background: var(--blue); color: white; } main { padding: 1rem; max-width: 640px; margin: 0 auto; } #chat-log { display: flex; flex-direction: column; gap: 0.5rem; min-height: 40vh; margin-bottom: 1rem; } .bubble { padding: 0.6rem 0.9rem; border-radius: 10px; max-width: 85%; white-space: pre-wrap; } .bubble.user { align-self: flex-end; background: var(--blue); color: white; } .bubble.assistant { align-self: flex-start; background: rgba(128, 128, 128, 0.15); } .bubble.error { background: var(--danger); color: white; } .bubble.pending { display: flex; gap: 4px; align-items: center; } .bubble.pending .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.3; animation: pending-blink 1.2s infinite ease-in-out; } .bubble.pending .dot:nth-child(2) { animation-delay: 0.2s; } .bubble.pending .dot:nth-child(3) { animation-delay: 0.4s; } @keyframes pending-blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } } #chat-form { display: flex; gap: 0.5rem; } #chat-input { flex: 1; padding: 0.75rem; font-size: 1rem; border-radius: 8px; border: 1px solid rgba(128, 128, 128, 0.4); background: transparent; color: inherit; } #chat-input:disabled, #chat-form button:disabled { opacity: 0.5; } #chat-form button, .gcal-button, #intake-page button { padding: 0.75rem 1.25rem; border: none; border-radius: 8px; background: var(--blue); color: white; font-size: 1rem; cursor: pointer; } .gcal-button { display: block; text-align: center; text-decoration: none; margin-top: 0.5rem; } #intake-page form { display: flex; flex-direction: column; gap: 0.75rem; } #intake-page label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; } #intake-page input, #intake-page select, #intake-page textarea { padding: 0.6rem; font-size: 1rem; font-family: inherit; border-radius: 8px; border: 1px solid rgba(128, 128, 128, 0.4); background: transparent; color: inherit; } /* Checkbox labels (request.html's "one-way trip" toggle) need the opposite layout from the flex-column text-inputs above — checkbox beside its text, not stacked. */ #intake-page label.checkbox-label { flex-direction: row; align-items: center; gap: 0.5rem; } #intake-page label.checkbox-label input[type="checkbox"] { width: auto; } .banner { padding: 0.75rem 1rem; border-radius: 8px; } .banner.error { background: var(--danger); color: white; } .banner.success { background: var(--success); color: white; } .hint { font-size: 0.85rem; opacity: 0.7; } .inq-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .inq-table th, .inq-table td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid rgba(128, 128, 128, 0.25); } .inq-table .badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px; white-space: nowrap; } .task-add-form { display: flex; gap: 0.5rem; margin-bottom: 1rem; align-items: flex-end; } .task-add-form textarea { flex: 1; padding: 0.75rem; font-size: 1rem; font-family: inherit; border-radius: 8px; border: 1px solid rgba(128, 128, 128, 0.4); background: transparent; color: inherit; resize: vertical; } .task-add-form button { padding: 0.75rem 1.25rem; border: none; border-radius: 8px; background: var(--blue); color: white; font-size: 1rem; cursor: pointer; } .task-list { list-style: none; padding: 0; margin: 0; } .task-list li { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid rgba(128, 128, 128, 0.2); } .task-done-form { margin: 0; } .task-done-btn { width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid rgba(128, 128, 128, 0.4); background: transparent; color: inherit; font-size: 1rem; cursor: pointer; flex-shrink: 0; } .task-done-btn:hover { background: var(--success); color: white; border-color: var(--success); } .task-text { flex: 1; } .job-item { align-items: flex-start; } .job-details { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; } .job-meta { font-size: 0.85rem; opacity: 0.7; } .job-notes { white-space: pre-wrap; font-family: inherit; font-size: 0.9rem; margin: 0.25rem 0; } .job-conflict { color: var(--danger); font-weight: 600; font-size: 0.9rem; margin: 0.25rem 0; } /* Honeypot field (templates/request.html) — hidden from sighted users via off-screen positioning rather than display:none/visibility:hidden, since simple bots often skip filling in fields that are display:none. */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }