/* ==========================================================================
   Chat Page — Landing / Chat-specific styles
   ========================================================================== */

/* --- Page Layout (flex column, centered) --- */
.chat-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100vh - 48px);
  background: var(--neutral-100);
}

/* --- Header --- */
.chat-header {
  width: 100%;
  max-width: 960px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-6) var(--space-4) var(--space-3);
}

.header-title h1 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-1);
  color: var(--neutral-900);
}
.header-title p {
  font-size: var(--text-md);
  color: var(--neutral-600);
}

/* --- Auth Buttons (pre-login) --- */
.header-auth {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.auth-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--transition-base);
  font-family: var(--font-family);
  font-weight: var(--font-medium);
}
.auth-btn:hover { background: var(--primary-hover); }

.user-menu {
  display: none;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
}
.user-menu.visible { display: flex; }
.user-email { color: var(--neutral-600); }

.logout-btn {
  background: none;
  color: var(--neutral-700);
  border: 1px solid var(--neutral-400);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  cursor: pointer;
  font-family: var(--font-family);
}
.logout-btn:hover { background: var(--neutral-200); }

/* --- Chat Container --- */
.chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

/* --- Messages --- */
.messages-wrapper {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.messages {
  flex: 1;
  overflow-y: auto;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  min-height: 300px;
  max-height: 60vh;
  box-shadow: var(--shadow-sm);
}

/* --- Chat Bubbles --- */
.msg {
  margin-bottom: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  max-width: 85%;
  line-height: var(--leading-relaxed);
  word-wrap: break-word;
}

.msg.user {
  background: var(--primary);
  color: #fff;
  margin-left: auto;
  border-bottom-right-radius: 2px;
}

.msg.system {
  background: var(--neutral-100);
  color: var(--neutral-800);
  margin-right: auto;
  border-bottom-left-radius: 2px;
}

.msg.error {
  background: var(--error-light);
  border: 1px solid var(--error);
  color: var(--error);
  margin-right: auto;
  border-bottom-left-radius: 2px;
}
.msg.error code {
  background: #FDE8E8;
  padding: 0.1rem 0.3rem;
  border-radius: var(--radius-sm);
  font-size: 0.9em;
  user-select: all;
}

.msg.status {
  background: var(--neutral-50);
  color: var(--neutral-500);
  font-style: italic;
  text-align: center;
  max-width: 100%;
  font-size: var(--text-sm);
}

.msg.analysis {
  background: var(--primary-bg);
  border-left: 4px solid var(--primary);
  max-width: 100%;
}

.msg.registration {
  background: var(--primary-bg);
  border: 1px solid var(--primary-light);
  max-width: 100%;
  text-align: center;
}
.msg.registration .reg-action-btn {
  display: inline-block;
  margin-top: var(--space-2);
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  cursor: pointer;
  font-family: var(--font-family);
}
.msg.registration .reg-action-btn:hover { background: var(--primary-hover); }

/* --- Pathway Selection Buttons --- */
.pathway-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--primary-bg);
  border: 1px solid var(--primary-light);
  border-radius: var(--radius-md);
}
.pathway-actions p {
  margin: 0 0 var(--space-1) 0;
  font-size: var(--text-sm);
  color: var(--neutral-600);
}
.pathway-select-btn {
  display: block;
  width: 100%;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  cursor: pointer;
  font-family: var(--font-family);
  text-align: left;
}
.pathway-select-btn:hover { background: var(--primary-hover); }
.pathway-select-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.pathway-select-btn.selected {
  background: var(--success, #16a34a);
  opacity: 1;
  cursor: default;
  pointer-events: none;
}
.pathway-select-btn.selected::before {
  content: '\2713\00a0';
}
.pathway-select-btn.disabled-greyed {
  background: var(--neutral-400, #9ca3af);
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Analyze Button --- */
.analyze-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-md);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: background var(--transition-base);
  margin-top: var(--space-2);
  font-family: var(--font-family);
}
.analyze-btn:hover:not(:disabled) { background: var(--primary-hover); }
.analyze-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* --- Typing Indicator --- */
.typing-indicator {
  display: none;
  padding: var(--space-2) var(--space-4);
  color: var(--neutral-500);
  font-style: italic;
  font-size: var(--text-sm);
}
.typing-indicator.visible { display: block; }

/* --- Input Area --- */
.input-area {
  display: flex;
  gap: var(--space-2);
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
}

.input-area textarea {
  flex: 1;
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-size: var(--text-md);
  font-family: var(--font-family);
  resize: none;
  min-height: 60px;
  max-height: 120px;
  outline: none;
}
.input-area textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-bg); }

.input-area button {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-md);
  cursor: pointer;
  align-self: flex-end;
  transition: background var(--transition-base);
  font-family: var(--font-family);
}
.input-area button:hover:not(:disabled) { background: var(--primary-hover); }
.input-area button:disabled { opacity: 0.55; cursor: not-allowed; }

/* Upload button variant */
.upload-btn {
  background: var(--neutral-700);
  padding: var(--space-3) var(--space-4);
  font-size: 1.2rem;
  line-height: 1;
  align-self: flex-end;
}
.upload-btn:hover:not(:disabled) { background: var(--neutral-800); }

#file-input { display: none; }

/* --- Markdown inside chat bubbles --- */
.msg > :first-child { margin-top: 0; }
.msg > :last-child  { margin-bottom: 0; }

.msg h1, .msg h2, .msg h3, .msg h4 {
  margin: 0.5em 0 0.3em;
  line-height: var(--leading-tight);
}
.msg h1:first-child, .msg h2:first-child, .msg h3:first-child { margin-top: 0; }
.msg h1 { font-size: 1.2em; }
.msg h2 {
  font-size: 1.1em;
  color: var(--neutral-700);
  border-bottom: 1px solid var(--neutral-300);
  padding-bottom: 0.2em;
  margin-top: 0.8em;
}
.msg h3 { font-size: 1em; font-weight: var(--font-semibold); color: var(--neutral-700); }
.msg h4 { font-size: 0.9em; color: var(--neutral-600); }
.msg p   { margin: 0.3em 0; }
.msg ul, .msg ol { margin: 0.3em 0; padding-left: 1.5em; }
.msg li { margin-bottom: 0.2em; }
.msg strong { font-weight: var(--font-semibold); }
.msg em { font-style: italic; }
.msg code {
  background: var(--neutral-200);
  padding: 0.1em 0.3em;
  border-radius: var(--radius-sm);
  font-size: 0.9em;
  font-family: var(--font-mono);
}
.msg pre {
  background: var(--neutral-200);
  padding: 0.5em 0.8em;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  max-width: 100%;
  margin: 0.4em 0;
}
.msg pre code { background: none; padding: 0; }
.msg hr {
  border: none;
  border-top: 1px solid var(--neutral-300);
  margin: 0.5em 0;
}
.msg table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.3em 0;
  font-size: 0.9em;
  display: block;
  overflow-x: auto;
}
.msg th, .msg td {
  border: 1px solid var(--neutral-300);
  padding: 0.3em 0.5em;
  text-align: left;
}
.msg th { background: var(--neutral-100); font-weight: var(--font-semibold); }
.msg blockquote {
  border-left: 3px solid var(--primary);
  margin: 0.3em 0;
  padding-left: 0.8em;
  color: var(--neutral-600);
}
.msg a { color: var(--primary); text-decoration: underline; }
.msg a:hover { color: var(--primary-hover); }

/* User messages: links and code override for white text */
.msg.user a { color: #fff; }
.msg.user code { background: rgba(255,255,255,0.2); color: #fff; }

/* --- Connection Status Bar --- */
.connection-status {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-align: center;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform: translateY(0);
  opacity: 1;
}
.connection-status.hidden {
  transform: translateY(-100%);
  opacity: 0;
  display: none;
}
.connection-status.reconnecting {
  background: var(--warning-light);
  color: #795548;
  border-bottom: 1px solid var(--warning);
  animation: pulse 2s ease-in-out infinite;
}
.connection-status.offline {
  background: var(--error-light);
  color: var(--error);
  border-bottom: 1px solid var(--error);
}
.connection-status.failed {
  background: var(--error-light);
  color: var(--error);
  border-bottom: 1px solid var(--error);
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* --- Responsive --- */
@media (max-width: 700px) {
  .chat-header { flex-direction: column; text-align: center; gap: var(--space-2); }
  .msg { max-width: 95%; }
  .msg h1 { font-size: 1.1em; }
  .msg h2 { font-size: 1em; }
  .msg h3 { font-size: 0.95em; }
  .msg pre { font-size: 0.85em; }
}