` without that class, so this file * touches nothing outside the chat panel. */ body.chat-dev { color-scheme: dark; margin: 0; min-height: 100vh; background: #0a0a0a; color: #e8e8e8; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding: 1rem; } body.chat-dev > h1 { font-weight: 400; font-size: 1.1rem; letter-spacing: 0.05em; margin: 0; opacity: 0.95; } /* * Live-gate: when /status-json.xsl reports no source, the landing page sets * data-live="false" on #chat and the whole panel disappears. Display:none * (not visibility:hidden) so it doesn't reserve layout space when offline. */ #chat[data-live="false"] { display: none; } #chat { width: min(92vw, 720px); border: 1px solid #1f1f1f; border-radius: 6px; background: #0d0d0d; display: flex; flex-direction: column; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace; font-size: 0.9rem; color: #e8e8e8; } #chat .chat-header { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.75rem; border-bottom: 1px solid #1f1f1f; font-size: 0.8rem; opacity: 0.7; } #chat .chat-header .chat-nick { font-weight: 600; opacity: 0.9; } #chat .chat-header button { background: transparent; color: inherit; border: 1px solid #2a2a2a; border-radius: 4px; padding: 0.15rem 0.5rem; font: inherit; font-size: 0.75rem; cursor: pointer; opacity: 0.7; } #chat .chat-header button:hover { opacity: 1; } #chat .chat-messages { height: 50vh; max-height: 480px; min-height: 200px; overflow-y: auto; padding: 0.5rem 0.75rem; display: flex; flex-direction: column; gap: 0.25rem; } #chat .chat-msg { line-height: 1.4; word-wrap: break-word; overflow-wrap: anywhere; white-space: pre-wrap; } #chat .chat-msg .chat-msg-ts { font-size: 0.75rem; opacity: 0.35; margin-right: 0.5rem; white-space: nowrap; } #chat .chat-msg .chat-msg-nick { color: #9ad; margin-right: 0.4rem; } #chat .chat-msg .chat-msg-nick::after { content: ":"; } #chat .chat-msg.chat-msg-mine .chat-msg-nick { color: #cea; } #chat .chat-form { display: flex; gap: 0.5rem; padding: 0.5rem 0.75rem; border-top: 1px solid #1f1f1f; } #chat .chat-form input[type="text"] { flex: 1; background: #050505; color: inherit; border: 1px solid #2a2a2a; border-radius: 4px; padding: 0.4rem 0.55rem; font: inherit; font-size: max(1rem, 16px); /* prevent iOS auto-zoom on focus */ } #chat .chat-form input[type="text"]:focus { outline: none; border-color: #3a5a8a; } #chat .chat-form button { background: #1a1a1a; color: inherit; border: 1px solid #2a2a2a; border-radius: 4px; padding: 0.4rem 0.9rem; font: inherit; cursor: pointer; } #chat .chat-form button:hover { background: #232323; } #chat .chat-form button:disabled { opacity: 0.4; cursor: not-allowed; } #chat .chat-hint { padding: 0 0.75rem 0.5rem; font-size: 0.75rem; color: #d88; min-height: 1em; } #chat .chat-hint:empty { display: none; } /* * Nickname picker — replaces the chat body until a nick is chosen. */ #chat .chat-picker { padding: 1.25rem 1rem; display: flex; flex-direction: column; gap: 0.6rem; align-items: stretch; } #chat .chat-picker label { font-size: 0.8rem; opacity: 0.7; } #chat .chat-picker form { display: flex; gap: 0.5rem; } #chat .chat-picker input[type="text"] { flex: 1; background: #050505; color: inherit; border: 1px solid #2a2a2a; border-radius: 4px; padding: 0.4rem 0.55rem; font: inherit; font-size: max(1rem, 16px); /* prevent iOS auto-zoom on focus */ } #chat .chat-picker input[type="text"]:focus { outline: none; border-color: #3a5a8a; } #chat .chat-picker button { background: #1a1a1a; color: inherit; border: 1px solid #2a2a2a; border-radius: 4px; padding: 0.4rem 0.9rem; font: inherit; cursor: pointer; } #chat .chat-picker button:hover { background: #232323; } #chat .chat-picker .chat-hint { padding: 0; }