/* AI Chat, on the shared design system.
   The old file redefined --bg / --surface / --accent locally and forced a
   black body, so this page looked nothing like the rest of the site. It now
   uses ui.css's tokens and reads as one product with Chat, Home and the rest.
   Class names are unchanged — js/page-studying.2.js drives these nodes. */

/* Full-height column. Keeps the rail offset from .ol-stage but drops the
   stage's padding; the header and composer own the edges. Two classes so it
   outranks .ol-stage regardless of load order. */
.chat-container.ol-stage {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 0;
}
@media (max-width: 820px) {
  .chat-container.ol-stage { height: calc(100vh - 62px); }
}

/* ── Header ───────────────────────────────────────────────── */
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px clamp(16px, 3vw, 28px);
  border-bottom: 1px solid var(--line);
  background: rgba(8, 11, 18, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.chat-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
/* Live dot in the brand's teal, not a second accent colour. */
.chat-title::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 10px var(--teal);
  animation: ai-pulse 2s infinite;
}
@keyframes ai-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.model-select {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-dim);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.model-select:hover { background: var(--surface-hover); border-color: var(--line-strong); }
.model-select:focus { border-color: rgba(125, 211, 252, 0.5); }
.model-select option { background: #0b0f17; color: var(--text); }

/* ── Messages ─────────────────────────────────────────────── */
.chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 24px clamp(16px, 3vw, 28px);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.chat-messages::-webkit-scrollbar { width: 8px; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.chat-messages::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }

.message {
  max-width: 78%;
  padding: 12px 16px;
  border-radius: var(--radius);
  line-height: 1.6;
  font-size: 15px;
  animation: ai-fade 0.25s ease;
}
@keyframes ai-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.message.user {
  align-self: flex-end;
  background: var(--accent);
  color: #061019;
  font-weight: 500;
  border-bottom-right-radius: 6px;
}
.message.assistant {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  border-bottom-left-radius: 6px;
  box-shadow: var(--shadow);
}
.message.error {
  align-self: flex-start;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.3);
  color: var(--danger);
  border-bottom-left-radius: 6px;
}

.ai-text-block { margin-bottom: 8px; }
.ai-text-block:last-child { margin-bottom: 0; }

.ai-code-block {
  margin: 12px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
}
.ai-code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-raised);
}
.ai-code-lang { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.ai-code-actions { display: flex; gap: 6px; }
.ai-code-btn {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.ai-code-btn:hover { background: var(--surface-hover); color: var(--text); }
.ai-code-block pre { margin: 0; padding: 14px; overflow-x: auto; }
.ai-code-block code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 13px;
  color: #a5d6ff;
}

/* ── Typing indicator ─────────────────────────────────────── */
.typing-indicator {
  align-self: flex-start;
  display: flex;
  gap: 5px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.typing-indicator span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sky);
  animation: ai-bounce 1.4s infinite ease-in-out;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ai-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-7px); opacity: 1; }
}

/* ── Welcome / empty state ────────────────────────────────── */
.welcome-message {
  margin: auto;
  text-align: center;
  padding: 40px 20px;
  max-width: 420px;
}
.welcome-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-raised);
  color: var(--sky);
}
.welcome-icon svg { width: 32px; height: 32px; }
.welcome-message h2 { font-size: 20px; letter-spacing: -0.01em; margin-bottom: 8px; }
.welcome-message p { color: var(--text-dim); font-size: 14px; line-height: 1.6; }

/* ── Composer ─────────────────────────────────────────────── */
.chat-input-area {
  padding: 16px clamp(16px, 3vw, 28px) 22px;
}
.chat-input-wrapper {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}
.composer-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(8, 12, 20, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  transition: border-color 0.16s ease;
}
.composer-row:focus-within { border-color: rgba(125, 211, 252, 0.45); }

.chat-input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  max-height: 160px;
  padding: 9px 6px;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: none;
  outline: none;
}
.chat-input::placeholder { color: var(--text-faint); }

.attach-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.attach-btn:hover { background: var(--surface-hover); color: var(--text); border-color: var(--line-strong); }
.attach-btn svg { width: 18px; height: 18px; }

.send-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #061019;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.14s ease, transform 0.14s ease, opacity 0.14s ease;
}
.send-btn svg { width: 17px; height: 17px; }
.send-btn:hover { filter: brightness(1.08); }
.send-btn:active { transform: translateY(1px); }
.send-btn:disabled { opacity: 0.5; cursor: not-allowed; filter: none; transform: none; }

/* ── Image attachment preview ─────────────────────────────── */
.image-preview {
  position: relative;
  display: inline-block;
  margin: 0 auto 10px;
}
.image-preview img {
  max-width: 180px;
  max-height: 140px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  display: block;
}
.remove-img {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 600px) {
  .message { max-width: 88%; }
  .send-btn span { display: none; }
  .send-btn { padding: 0; width: 40px; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .message, .typing-indicator span, .chat-title::before { animation: none; }
}