/* Responsibility: styling for Orynium Chat. Two themes, self-hosted (Build Rules §5). data-theme is set on by assets/js/theme.js before first paint. */ /* Responsibility: styling for the support replies page. Self-hosted, no CDN (§5). Two themes. data-theme is set on by assets/js/theme.js before paint. */ :root, [data-theme="dark"] { --bg: #0f1115; --panel: #171a21; --sunken: #12151b; --line: #262b35; --text: #e6e8ec; --muted: #8b93a1; --faint: #5f6773; --accent: #6ea8fe; --btn: #222733; --btn-hover: #2b313f; --ok-bg: #16301f; --ok-line: #2b5a3c; --ok-text: #bfe6cd; --err-bg: #2a1618; --err-line: #5a2b2f; --err-text: #f2c2c5; --danger: #e06c75; --shadow: none; } [data-theme="light"] { --bg: #f6f7f9; --panel: #ffffff; --sunken: #f2f4f7; --line: #dde1e7; --text: #1b1f27; --muted: #5c6470; --faint: #8b93a1; --accent: #1f5fd0; --btn: #eef0f4; --btn-hover: #e2e6ec; --ok-bg: #e8f6ed; --ok-line: #a8d6ba; --ok-text: #1d5333; --err-bg: #fdecec; --err-line: #e6b3b6; --err-text: #8a2b31; --danger: #c0392f; --shadow: 0 1px 2px rgba(16, 24, 40, 0.06); } :root { --radius: 8px; color-scheme: dark; } [data-theme="light"] { color-scheme: light; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } .wrap { max-width: 760px; margin: 0 auto; padding: 20px 14px 40px; min-height: 100vh; display: flex; flex-direction: column; } .head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .head h1 { margin: 0 0 2px; font-size: 20px; letter-spacing: -0.01em; } .sub { margin: 0 0 16px; color: var(--muted); font-size: 13px; } #theme-toggle { flex: 0 0 auto; padding: 6px 12px; font-size: 13px; } .status { min-height: 20px; margin: 0 0 12px; font-size: 14px; color: var(--muted); } .status.error { color: var(--danger); } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 0 0 16px; box-shadow: var(--shadow); } .panel h2 { margin: 0 0 10px; font-size: 16px; } label { display: block; margin: 12px 0 4px; font-size: 13px; color: var(--muted); } label.check { display: flex; gap: 8px; align-items: center; color: var(--text); } label.check input { margin: 0; width: auto; } input[type="text"], input[type="password"], select, textarea { width: 100%; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--sunken); color: var(--text); font-family: inherit; font-size: 14px; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; } textarea { resize: vertical; } button { margin-top: 12px; padding: 10px 16px; border-radius: var(--radius); cursor: pointer; border: 1px solid var(--line); background: var(--btn); color: var(--text); font-size: 14px; font-family: inherit; } button:hover { background: var(--btn-hover); } button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } button.danger { border-color: var(--err-line); color: var(--danger); background: transparent; } .fineprint { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 12px 0 0; } .muted { color: var(--muted); font-size: 13px; } .code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.14em; font-size: 16px; } .roombar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin: 0 0 12px; } .roombar button { margin: 0; padding: 6px 12px; font-size: 13px; margin-left: auto; } .messages { flex: 1 1 auto; min-height: 300px; max-height: 60vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin: 0 0 12px; } .msg { border-bottom: 1px solid var(--line); padding: 10px 0; } .msg:last-child { border-bottom: 0; } .msg.gone { color: var(--muted); font-style: italic; } .msg-body { white-space: pre-wrap; word-wrap: break-word; } .msg-body.no-copy { user-select: none; -webkit-user-select: none; } .msg-meta { color: var(--muted); font-size: 11px; margin-top: 6px; } .attachment { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--sunken); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; margin-bottom: 6px; } .attachment-name { flex: 1 1 auto; word-break: break-all; font-size: 13px; } .attachment button { margin: 0; padding: 4px 12px; font-size: 12px; } .filebtn { display: inline-block; margin: 0; padding: 10px 16px; cursor: pointer; border: 1px solid var(--line); border-radius: var(--radius); background: var(--btn); color: var(--text); font-size: 14px; } .filebtn:hover { background: var(--btn-hover); } .msg-actions { display: flex; gap: 8px; margin-top: 6px; } .msg-actions button { margin: 0; padding: 3px 10px; font-size: 12px; } .composer { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; } .composer-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; } .composer-row select { width: auto; } .composer-row button { margin: 0; margin-left: auto; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (max-width: 520px) { .composer-row button { margin-left: 0; width: 100%; } } /* The hidden attribute must beat any display rule below it. Without this a section with `hidden` still renders, or a shown section stays collapsed, because a class-based display value outranks the browser default. */ [hidden] { display: none !important; }