:root { color-scheme: light dark; /* Fallbacks until ThemeProvider sets the resolved tokens on . */ --color-background: #ffffff; --color-surface: #f4f5f7; --color-text: #0b0c0f; --color-textMuted: #5b6472; --color-accent: #2f6fed; --color-border: #e2e5ea; } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, sans-serif; background: var(--color-background); color: var(--color-text); transition: background 0.2s ease, color 0.2s ease; } .app { max-width: 640px; margin: 0 auto; padding: 3rem 1.5rem; } .app h1 { color: var(--color-accent); margin-bottom: 0.25rem; } .app dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1rem; padding: 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; } .app dt { color: var(--color-textMuted); } .app dd { margin: 0; font-family: ui-monospace, monospace; } .theme-switch { display: flex; gap: 0.5rem; margin-top: 1.5rem; } .theme-switch button { padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); cursor: pointer; } .theme-switch button[aria-pressed='true'] { border-color: var(--color-accent); color: var(--color-accent); } .auth-form, .echo-form { display: flex; flex-direction: column; gap: 0.5rem; max-width: 320px; margin: 1rem 0; } .echo-form { flex-direction: row; } .auth-form input, .echo-form input { padding: 0.5rem; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); } .auth-form button, .echo-form button, .actions button { padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid var(--color-accent); background: var(--color-accent); color: #fff; cursor: pointer; } .auth-form button:disabled, .echo-form button:disabled { opacity: 0.5; cursor: not-allowed; } .auth-toggle { background: none; border: none; color: var(--color-accent); cursor: pointer; padding: 0; } .auth-error { color: #e5484d; } .realtime dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; } .event-log { font-family: ui-monospace, monospace; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; padding: 0.75rem 1.25rem; max-height: 240px; overflow-y: auto; } .actions { margin: 1rem 0; } /* Chat layout */ .layout { display: flex; flex-direction: column; height: 100vh; } .topbar { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border); background: var(--color-surface); } .topbar-actions { display: flex; align-items: center; gap: 0.75rem; } .workspace { display: flex; flex: 1; min-height: 0; } .sidebar { width: 260px; border-right: 1px solid var(--color-border); padding: 1rem; overflow-y: auto; } .sidebar-form { display: flex; gap: 0.5rem; margin-bottom: 1rem; } .sidebar-form input { flex: 1; min-width: 0; padding: 0.4rem; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-background); color: var(--color-text); } .room-list { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.25rem; } .room-list button { width: 100%; text-align: left; padding: 0.5rem 0.75rem; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--color-text); cursor: pointer; } .room-list button[aria-pressed='true'] { background: var(--color-surface); border-color: var(--color-accent); color: var(--color-accent); } .chat { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 1rem; } .chat-empty { align-items: center; justify-content: center; color: var(--color-textMuted); } .message-list { list-style: none; margin: 0; padding: 0; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.4rem; } .message-list li { padding: 0.4rem 0.6rem; border-radius: 8px; background: var(--color-surface); } .message-list li.mine { align-self: flex-end; background: var(--color-accent); color: #fff; } .msg-author { font-weight: 600; margin-right: 0.5rem; } .composer { display: flex; gap: 0.5rem; margin-top: 0.75rem; } .composer input { flex: 1; padding: 0.6rem; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); }