/* public/styles.css
  Base font-size is 24px instead of the usual 16px browser default —
  that's the "150% bigger" request: since every other measurement in
  this file uses rem units, the whole UI scales together from that
  one number. Two themes via CSS variables, default = dark, toggled
  via the button in the top-right corner (persisted in localStorage). */

:root {
 font-size: 24px; /* 150% of the standard 16px base */
}

/* Dark theme (default) — brighter/softer than pure black */
:root, [data-theme="dark"] {
 --bg: #1e2128;
 --card-bg: #2a2e37;
 --text: #f0f0f2;
 --text-muted: #a0a4ae;
 --input-bg: #383c46;
 --input-border: #4a4f5a;
 --accent: #4f8cff;
 --accent-hover: #3a75e6;
 --error-bg: #4a2020;
 --error-text: #ff8080;
}

[data-theme="light"] {
 --bg: #f5f5f7;
 --card-bg: #ffffff;
 --text: #1a1a1a;
 --text-muted: #666666;
 --input-bg: #ffffff;
 --input-border: #dddddd;
 --accent: #2563eb;
 --accent-hover: #1d4ed8;
 --error-bg: #fee2e2;
 --error-text: #991b1b;
}

/* Visual distinction between login and signup forms */
:root, [data-theme="dark"] {
 --accent-signup: #3ecf6b;
 --accent-signup-hover: #2fb559;
}
[data-theme="light"] {
 --accent-signup: #16a34a;
 --accent-signup-hover: #15803d;
}

form[data-form="login"] h2::before {
 content: "🔑 ";
}
form[data-form="signup"] h2::before {
 content: "✨ ";
}

form[data-form="signup"] button[type="submit"] {
 background: var(--accent-signup);
}
form[data-form="signup"] button[type="submit"]:hover {
 background: var(--accent-signup-hover);
}

form[data-form="signup"] {
 border-left: 0.1875rem solid var(--accent-signup);
 padding-left: 0.75rem;
}
* { box-sizing: border-box; }

body {
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 background: var(--bg);
 color: var(--text);
 margin: 0;
 min-height: 100vh;
 transition: background 0.2s, color 0.2s;
}

.hidden { display: none !important; }

.theme-toggle {
 position: fixed;
 top: 1rem;
 right: 1rem;
 background: var(--card-bg);
 border: 1px solid var(--input-border);
 border-radius: 0.5rem;
 width: 2.5rem;
 height: 2.5rem;
 font-size: 1.1rem;
 cursor: pointer;
 z-index: 10;
}

.screen {
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
 padding: 1.25rem;
}

.auth-card {
 background: var(--card-bg);
 border-radius: 0.75rem;
 padding: 2rem;
 max-width: 22rem;
 width: 100%;
 box-shadow: 0 0.125rem 0.75rem rgba(0,0,0,0.25);
}

.auth-card h1 {
 font-size: 1.25rem;
 margin-bottom: 1.5rem;
 text-align: center;
 color: var(--text);
}

.auth-card h2 {
 font-size: 1rem;
 color: var(--text-muted);
 margin-bottom: 1rem;
}

input {
 width: 100%;
 padding: 0.625rem 0.75rem;
 margin-bottom: 0.75rem;
 border: 1px solid var(--input-border);
 border-radius: 0.5rem;
 font-size: 0.875rem;
 background: var(--input-bg);
 color: var(--text);
}

input::placeholder { color: var(--text-muted); }

button[type="submit"] {
 width: 100%;
 padding: 0.625rem;
 background: var(--accent);
 color: white;
 border: none;
 border-radius: 0.5rem;
 font-size: 0.875rem;
 cursor: pointer;
}

button[type="submit"]:hover { background: var(--accent-hover); }

.switch-text {
 text-align: center;
 font-size: 0.8125rem;
 color: var(--text-muted);
 margin-top: 0.75rem;
}

.switch-text a { color: var(--accent); }

.error-message {
 background: var(--error-bg);
 color: var(--error-text);
 padding: 0.625rem;
 border-radius: 0.5rem;
 font-size: 0.8125rem;
 margin-bottom: 1rem;
}

#chat-screen {
 flex-direction: column;
 align-items: flex-start;
 max-width: 44rem;
 margin: 0 auto;
 color: var(--text);
}

#chat-screen a { color: var(--accent); }
/* Chat screen */

.screen:has(#chat-screen:not(.hidden)) {
 align-items: stretch;
}

.chat-container {
 display: flex;
 flex-direction: column;
 width: 100%;
 max-width: 44rem;
 margin: 0 auto;
 height: 100vh;
 padding: 1rem;
}

.chat-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding-bottom: 0.75rem;
 border-bottom: 1px solid var(--input-border);
 margin-bottom: 0.75rem;
 font-size: 0.875rem;
 flex-wrap: wrap;
 gap: 0.5rem;
}

.chat-header-right {
 display: flex;
 align-items: center;
 gap: 0.75rem;
}

.chat-header-right a { color: var(--accent); text-decoration: none; }
.chat-header-right a:hover { text-decoration: underline; }

#agent-select {
 padding: 0.375rem 0.5rem;
 border-radius: 0.375rem;
 border: 1px solid var(--input-border);
 background: var(--input-bg);
 color: var(--text);
 font-size: 0.8125rem;
}

.messages {
 flex: 1;
 overflow-y: auto;
 display: flex;
 flex-direction: column;
 gap: 0.75rem;
 padding: 0.5rem 0;
}

.message {
 max-width: 80%;
 padding: 0.625rem 0.875rem;
 border-radius: 0.75rem;
 font-size: 0.875rem;
 line-height: 1.4;
 word-wrap: break-word;
 white-space: pre-wrap;
}

.message.user {
 align-self: flex-end;
 background: var(--accent);
 color: white;
 border-bottom-right-radius: 0.125rem;
}

.message.assistant {
 align-self: flex-start;
 background: var(--card-bg);
 border: 1px solid var(--input-border);
 border-bottom-left-radius: 0.125rem;
}

.message.assistant .agent-tag {
 display: block;
 font-size: 0.6875rem;
 color: var(--text-muted);
 margin-bottom: 0.25rem;
 text-transform: uppercase;
 letter-spacing: 0.03em;
}

.message-form {
 display: flex;
 gap: 0.5rem;
 padding-top: 0.75rem;
 border-top: 1px solid var(--input-border);
}

.message-form input {
 flex: 1;
 margin-bottom: 0;
}

.message-form button {
 width: auto;
 padding: 0 1.25rem;
 background: var(--accent);
 color: white;
 border: none;
 border-radius: 0.5rem;
 cursor: pointer;
 font-size: 0.875rem;
}

.message-form button:hover { background: var(--accent-hover); }
.message-form button:disabled { opacity: 0.6; cursor: not-allowed; }

/* Settings modal */

.modal-overlay {
 position: fixed;
 inset: 0;
 background: rgba(0, 0, 0, 0.5);
 display: flex;
 align-items: center;
 justify-content: center;
 z-index: 20;
}

.modal-card {
 background: var(--card-bg);
 border-radius: 0.75rem;
 padding: 1.5rem;
 max-width: 30rem;
 width: 90%;
 max-height: 85vh;
 overflow-y: auto;
}

.modal-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 0.5rem;
}

.modal-header h2 {
 font-size: 1.1rem;
 margin: 0;
}

.modal-close {
 background: none;
 border: none;
 color: var(--text-muted);
 font-size: 1.5rem;
 cursor: pointer;
 line-height: 1;
 width: auto;
 padding: 0;
}

.modal-subtitle {
 font-size: 0.8125rem;
 color: var(--text-muted);
 margin-bottom: 1.25rem;
}

.key-row {
 padding: 0.875rem 0;
 border-bottom: 1px solid var(--input-border);
}

.key-row:last-child { border-bottom: none; }

.key-row-label {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 0.5rem;
 font-size: 0.875rem;
}

.key-status {
 font-size: 0.75rem;
 padding: 0.125rem 0.5rem;
 border-radius: 999px;
 background: var(--input-bg);
 color: var(--text-muted);
}

.key-status[data-connected="true"] {
 background: #1f4a2e;
 color: #6fdc8c;
}

.key-row-input {
 display: flex;
 gap: 0.5rem;
}

.key-row-input input {
 flex: 1;
 margin-bottom: 0;
}

.key-row-input button {
 width: auto;
 padding: 0 0.75rem;
 background: var(--accent);
 color: white;
 border: none;
 border-radius: 0.5rem;
 font-size: 0.8125rem;
 cursor: pointer;
}

.key-row-input button.danger {
 background: transparent;
 color: #ff8080;
 border: 1px solid #ff8080;
}
.key-row-connected {
 display: flex;
 gap: 0.5rem;
}

.key-row-connected button {
 width: auto;
 padding: 0 0.75rem;
 background: var(--input-bg);
 color: var(--text);
 border: 1px solid var(--input-border);
 border-radius: 0.5rem;
 font-size: 0.8125rem;
 cursor: pointer;
}

.key-row-connected button.danger {
 background: transparent;
 color: #ff8080;
 border: 1px solid #ff8080;
}
.key-row-input button:hover { opacity: 0.85; }

/* Conversation sidebar */

.screen:has(#chat-screen:not(.hidden)) {
 max-width: none;
}

#chat-screen {
 display: flex;
 flex-direction: row;
 max-width: 64rem;
 width: 100%;
 gap: 0;
 padding: 0;
}

.conversation-sidebar {
 width: 15rem;
 flex-shrink: 0;
 border-right: 1px solid var(--input-border);
 height: 100vh;
 display: flex;
 flex-direction: column;
 padding: 1rem 0.75rem;
}

.sidebar-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 font-size: 0.8125rem;
 color: var(--text-muted);
 margin-bottom: 0.75rem;
 padding: 0 0.25rem;
}

.sidebar-header a {
 color: var(--accent);
 text-decoration: none;
 font-size: 0.8125rem;
}

.conversation-list {
 flex: 1;
 overflow-y: auto;
 display: flex;
 flex-direction: column;
 gap: 0.25rem;
}

.conversation-item {
 padding: 0.5rem 0.625rem;
 border-radius: 0.5rem;
 font-size: 0.8125rem;
 cursor: pointer;
 color: var(--text);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.conversation-item:hover {
 background: var(--input-bg);
}

.conversation-item.active {
 background: var(--accent);
 color: white;
}

.conversation-item.empty-title {
 color: var(--text-muted);
 font-style: italic;
}

.chat-container {
 flex: 1;
 min-width: 0;
}