/* ============================================================ style_rag.css — NMMI.AI RAG Interface RAG-specific layout and component rules only. Load order (all RAG pages): 1. nmmi_theme_system.css ← authoritative token source 2. style_base.css 3. style_rag.css DO NOT redefine theme tokens here. All surfaces, colours, and accent values come from nmmi_theme_system.css via the data-theme attribute on . [2026-06-03] Stage A: removed local :root token island and stale light-mode override blocks. ============================================================ */ :root { /* RAG geometry — these are layout-only, not theme tokens */ --header-h: 2.8rem; --footer-h: 1.4rem; --main-pad: 1rem; --box-pad: 15px; } * { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--bg-surface); font-size: 1rem; color: var(--input-text); display: flex; flex-direction: column; width: 100vw; height: 100vh; overflow: hidden; } /* ── HEADER ──────────────────────────────────────── */ header { height: var(--header-h); max-height: clamp(1rem, calc(var(--header-h) * 0.8), 3rem); flex-shrink: 0; background: rgba(0, 0, 0, 0.1); text-align: center; padding: 0.5rem; letter-spacing: 3px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; } header h1 { margin: 0; font-weight: 500; font-size: clamp(1rem, calc(var(--header-h) * 0.7), 2.8rem); color: rgba(var(--header-text), 0.1); text-shadow: 0 0 6px rgba(var(--header-text-shadow), 0.3); transition: color 0.3s, text-shadow 0.35s; } header h1:hover { color: rgba(var(--header-text), 0.3); text-shadow: 0 0 7px rgba(var(--header-text-shadow), 0.95); } /* ── MAIN ────────────────────────────────────────── */ main { flex: 1 1 0; min-height: 0; display: flex; flex-direction: row; align-items: stretch; padding: var(--main-pad); gap: var(--main-pad); overflow: hidden; position: relative; } /* Watermark background logo */ main::before { content: ""; position: absolute; inset: 0; background-image: url('../NMMI.AI Logo.svg'); background-size: 55vmin; background-position: center; background-repeat: no-repeat; opacity: 0.06; z-index: 0; pointer-events: none; } /* ── PANE WRAPPERS ───────────────────────────────── */ main > textarea { display: none; } .pane { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; min-height: 0; z-index: 1; overflow: hidden; } .pane-input { flex: 3; } .pane-output { flex: 7; } /* ── SHARED TEXTAREA BASE ────────────────────────── */ textarea { flex: 1; min-height: 0; width: 100%; padding: var(--box-pad); font-family: inherit; font-size: 1rem; line-height: 1.5; resize: none; outline: none; overflow-y: auto; border-radius: 4px; border: 1px solid var(--accent-border); background: rgba(0, 0, 0, 0.35); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); transition: background 0.15s, border-color 0.15s, color 0.15s; scrollbar-color: rgba(var(--muted-rgb), 0.10) transparent; box-sizing: border-box; z-index: 1; } /* ── INPUT TEXTAREA ──────────────────────────────── */ textarea.input-box { color: var(--input-text); } textarea.input-box:focus { border-color: var(--accent-soft); background: rgba(0, 0, 0, 0.30); box-shadow: 0 0 0 3px var(--accent-glow); } textarea.input-box::placeholder { color: rgba(var(--muted-rgb), 0.34); font-style: italic; } /* ── OUTPUT TEXTAREA ─────────────────────────────── */ textarea.output-box { color: var(--output-text); background-color: transparent; border: 1px solid var(--accent-border); cursor: default; } textarea.output-box:focus { border-color: var(--accent-glow); background: rgba(0, 0, 0, 0.30); } textarea.output-box::placeholder { color: rgba(var(--muted-rgb), 0.34); font-style: italic; } textarea.flash-highlight { box-shadow: 0 0 3px rgba(var(--accent-rgb), 0.40) !important; transition: box-shadow 0.1s; } /* ── PANE CONTROL BARS ───────────────────────────── */ .pane-controls { flex-shrink: 0; display: flex; align-items: center; gap: 0.6rem; } .pane-controls--input { justify-content: flex-end; } .pane-controls--output { justify-content: flex-start; } /* ── HINT TEXT ───────────────────────────────────── */ .hint-text { font-size: 0.72rem; color: rgba(var(--muted-rgb), 0.35); font-style: italic; user-select: none; } /* ════════════════════════════════════════════════════════════ ACTION BUTTONS (Send / Clear / Apply) ════════════════════════════════════════════════════════════ */ .action-btn { flex-shrink: 0; padding: 0.35rem 1.1rem; border: 1px solid rgba(var(--accent-rgb), 0.28); border-radius: 4px; background: rgba(0, 0, 0, 0.28); color: rgba(var(--accent-rgb), 0.70); font-family: inherit; font-size: 0.8rem; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.2s; user-select: none; } .action-btn:hover:not(:disabled) { background: rgba(var(--accent-rgb), 0.07); border-color: var(--accent-soft); color: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.12); } .action-btn:active:not(:disabled) { transform: scale(0.97); box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.18); } .action-btn:disabled { opacity: 0.27; cursor: not-allowed; } /* Clear button — subtler tone */ .clear-btn { border-color: rgba(var(--accent-rgb), 0.14); color: rgba(var(--accent-rgb), 0.40); } .clear-btn:hover { border-color: var(--accent-soft); color: var(--accent); } /* ════════════════════════════════════════════════════════════ STATUS COLOURS ════════════════════════════════════════════════════════════ */ .status-ok { color: rgba(var(--accent-rgb), 0.68); } .status-error { color: rgba(255, 75, 75, 0.90); } .status-warn { color: rgba(255, 195, 50, 0.76); } .status-info { color: rgba(var(--muted-rgb), 0.38); } .status-listening { color: var(--accent); font-style: italic; } /* ════════════════════════════════════════════════════════════ PORTRAIT / NARROW VIEWPORT ════════════════════════════════════════════════════════════ */ @media (orientation: portrait) { main { flex-direction: column; } .pane-input { flex: 3; } .pane-output { flex: 7; } } /* ── FOOTER ──────────────────────────────────────── */ footer { height: var(--footer-h); max-height: clamp(0.6rem, calc(var(--header-h) * 1.0), 2.5rem); flex-shrink: 0; background: rgba(0, 0, 0, 0.1); color: var(--footer-text-c); text-align: center; letter-spacing: 1px; border: 1px solid var(--accent-border); box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.15); display: flex; align-items: center; justify-content: center; } .footer-text { margin: 0; font-size: clamp(0.2rem, calc(var(--header-h) * 0.35), 0.75rem); }