/* =========================================================================
   chat.css — floating "ask about me" widget
   Styled as a small terminal window to match the prompt-nav / gutter
   language used everywhere else on the site, rather than a generic
   rounded chat bubble.
   ========================================================================= */

.chat-toggle {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  background: var(--panel);
  color: var(--accent-gold);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 14px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
.chat-toggle:hover { border-color: var(--accent-gold); }
.chat-toggle::before { content: "> "; color: var(--text-faint); }

.chat-panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 50;
  width: min(360px, calc(100vw - 40px));
  height: min(480px, calc(100vh - 100px));
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.chat-panel.chat-panel--open { display: flex; }

.chat-panel__titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-faint);
}
.chat-panel__dots { display: flex; gap: 5px; }
.chat-panel__dots span {
  width: 9px; height: 9px; border-radius: 50%;
  display: inline-block;
  background: var(--line);
}
.chat-panel__dots span:nth-child(1) { background: var(--accent-rose); }
.chat-panel__dots span:nth-child(2) { background: var(--accent-gold); }
.chat-panel__dots span:nth-child(3) { background: var(--accent-teal); }
.chat-panel__title { flex: 1; text-align: center; }
.chat-panel__close {
  background: none; border: none; color: var(--text-faint);
  cursor: pointer; font-family: var(--font-mono); font-size: 0.9rem;
  padding: 0 4px;
}
.chat-panel__close:hover { color: var(--text); }

.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.88rem;
}

.chat-msg { max-width: 100%; }
.chat-msg__prefix {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  margin-right: 4px;
}
.chat-msg--user .chat-msg__prefix { color: var(--accent-gold); }
.chat-msg--assistant .chat-msg__prefix { color: var(--accent-teal); }
.chat-msg--error .chat-msg__prefix { color: var(--accent-rose); }
.chat-msg__text { color: var(--text-dim); display: inline; }
.chat-msg--user .chat-msg__text { color: var(--text); }

.chat-msg__sources {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-faint);
}

.chat-empty {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.6;
}

.chat-form {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.chat-form input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 8px 10px;
}
.chat-form input:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 1px; }
.chat-form button {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  background: var(--panel-alt);
  border: 1px solid var(--line);
  color: var(--accent-gold);
  border-radius: var(--radius);
  padding: 8px 14px;
  cursor: pointer;
}
.chat-form button:hover { border-color: var(--accent-gold); }
.chat-form button:disabled { opacity: 0.5; cursor: default; }

/* three-dot "thinking" animation, reusing the shelf's ambient-loop feel */
.chat-thinking { display: inline-flex; gap: 3px; }
.chat-thinking span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-teal);
  animation: chat-dot 1.1s ease-in-out infinite;
}
.chat-thinking span:nth-child(2) { animation-delay: 0.15s; }
.chat-thinking span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-dot {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

@media (max-width: 480px) {
  .chat-panel { right: 10px; left: 10px; width: auto; bottom: 10px; }
  .chat-toggle { right: 10px; bottom: 10px; }
}