/* 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-input button.secondary {
     background: var(--input-bg);
     color: var(--text);
     border: 1px solid var(--input-border);
   }
.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 {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 0.5rem;
 padding: 0.5rem 0.625rem;
 border-radius: 0.5rem;
 font-size: 0.8125rem;
 color: var(--text);
}

.conversation-item-title {
 flex: 1;
 cursor: pointer;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.conversation-item-delete {
 opacity: 0;
 color: var(--text-muted);
 font-size: 0.75rem;
 cursor: pointer;
 flex-shrink: 0;
}

.conversation-item:hover .conversation-item-delete { opacity: 1; }
.conversation-item-delete:hover { color: #ff8080; }

.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;
}
/* Toast notifications */

/* Toast notifications */

/* Toast notifications - top-right stack, high-contrast accent-colored
card so it reads as "system is telling you something" rather than
blending into the page. Slides in from the right + fades. */

.toast-container {
position: fixed;
top: 1.25rem;
right: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
z-index: 50;
pointer-events: none;
max-width: 18rem;
}

.toast {
background: var(--accent);
color: white;
border-radius: 0.625rem;
padding: 0.625rem 1rem;
font-size: 0.8125rem;
font-weight: 500;
box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.35);
opacity: 0;
transform: translateX(1.5rem);
transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast.visible {
opacity: 1;
transform: translateX(0);
}

/* Copy button under each message */
/* Copy button under each message. User bubbles are solid accent-colored
  with white text, so the button there needs a light/translucent style
  to stay readable - a dark-on-dark or muted-on-accent combo (the
  previous version) was too low-contrast to read. Assistant bubbles use
  the regular muted style since their background is neutral. */

.message-actions {
 margin-top: 0.375rem;
}

.copy-button {
 width: auto;
 padding: 0.1875rem 0.5625rem;
 font-size: 0.6875rem;
 border-radius: 0.375rem;
 cursor: pointer;
}

.message.assistant .copy-button {
 background: transparent;
 border: 1px solid var(--input-border);
 color: var(--text-muted);
}

.message.assistant .copy-button:hover {
 color: var(--text);
 border-color: var(--text-muted);
}

.message.user .copy-button {
 background: rgba(255, 255, 255, 0.18);
 border: 1px solid rgba(255, 255, 255, 0.4);
 color: white;
}

.message.user .copy-button:hover {
 background: rgba(255, 255, 255, 0.3);
}

/* Markdown rendering inside assistant messages */

.message.assistant .message-body p { margin: 0 0 0.5rem 0; }
.message.assistant .message-body p:last-child { margin-bottom: 0; }
.message.assistant .message-body ul,
.message.assistant .message-body ol { margin: 0.25rem 0 0.5rem 1.25rem; padding: 0; }
.message.assistant .message-body code {
 background: var(--input-bg);
 padding: 0.1rem 0.3rem;
 border-radius: 0.25rem;
 font-size: 0.85em;
}
.message.assistant .message-body pre {
 background: var(--input-bg);
 padding: 0.625rem;
 border-radius: 0.5rem;
 overflow-x: auto;
}
.message.assistant .message-body pre code {
 background: none;
 padding: 0;
}
.message.assistant .message-body a { color: var(--accent); }

/* Forward-to-another-agent picker */

.message-actions {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 flex-wrap: wrap;
}

.forward-menu {
 display: flex;
 gap: 0.375rem;
}

.forward-menu button {
 width: auto;
 padding: 0.1875rem 0.5625rem;
 font-size: 0.6875rem;
 border-radius: 0.375rem;
 cursor: pointer;
 background: var(--accent);
 color: white;
 border: none;
}

.forward-menu button:hover {
 background: var(--accent-hover);
}
/* Forward menu: agent list -> conversation sub-list */

.forward-submenu {
 display: flex;
 flex-direction: column;
 gap: 0.25rem;
 background: var(--card-bg);
 border: 1px solid var(--input-border);
 border-radius: 0.5rem;
 padding: 0.375rem;
 max-height: 12rem;
 overflow-y: auto;
 min-width: 10rem;
}

.forward-submenu button {
 width: 100%;
 text-align: left;
 padding: 0.3rem 0.5rem;
 font-size: 0.6875rem;
 border-radius: 0.375rem;
 cursor: pointer;
 background: transparent;
 border: none;
 color: var(--text);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.forward-submenu button:hover {
 background: var(--input-bg);
}

.forward-submenu button.new-conversation-option {
 color: var(--accent);
 font-weight: 500;
 border-bottom: 1px solid var(--input-border);
 border-radius: 0;
 margin-bottom: 0.125rem;
 padding-bottom: 0.4rem;
}

.forward-submenu .loading-text {
 font-size: 0.6875rem;
 color: var(--text-muted);
 padding: 0.3rem 0.5rem;
}
/* Thinking indicator + disabled input while a reply is in flight */

.message.thinking .message-body {
 display: flex;
 gap: 0.25rem;
 align-items: center;
 padding: 0.25rem 0;
}

.thinking-dot {
 width: 0.4rem;
 height: 0.4rem;
 border-radius: 50%;
 background: var(--text-muted);
 animation: thinking-bounce 1.2s infinite ease-in-out;
}

.thinking-dot:nth-child(2) { animation-delay: 0.15s; }
.thinking-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes thinking-bounce {
 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
 30% { transform: translateY(-0.25rem); opacity: 1; }
}

.message-form input:disabled,
.message-form button:disabled {
 opacity: 0.5;
 cursor: not-allowed;
}