/* ============================================================
   Chat agent — the Garden's guide.

   Built entirely on the site's existing tokens (--paper, --ink, --gold,
   --rule, --serif, --display) declared in index.html. Because those tokens
   already flip under :root[data-theme="light"], the night and day themes
   both work here with no separate override block — only the few places
   that need a genuinely different treatment are called out below.

   Layer: 9600. Above the nav (101) and theme toggle (9500) so an open
   drawer covers them, below the chart overlay (20000) and modals (30000)
   which own the whole viewport.
   ============================================================ */

/* ---------- Floating seal trigger ---------- */
#chat-trigger {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9600;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: radial-gradient(120% 120% at 30% 25%, var(--paper-2) 0%, var(--paper) 100%);
  color: var(--gold-dp);
  font-family: var(--display);
  font-size: var(--fs-orn-sm);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.38);
  transition: transform 0.35s ease, box-shadow 0.35s ease, opacity 0.5s ease;
}
:root[data-theme="light"] #chat-trigger {
  box-shadow: 0 6px 22px rgba(120, 95, 40, 0.28);
}
#chat-trigger:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 10px 28px rgba(198, 161, 91, 0.34);
}
/* Behind the cover gate the trigger must not exist for anyone — so [hidden]
   keeps its real display:none rather than being faded out. Overriding display
   here would leave an invisible but focusable button in the tab order before
   the reader has even entered the site. JS removes the attribute; the keyframe
   below covers the entrance so nothing pops. */
#chat-trigger:not([hidden]) {
  animation: chat-trigger-in 0.6s ease both;
}
@keyframes chat-trigger-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

/* Out of the way while the drawer itself is open. */
#chat-root.open #chat-trigger {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.9);
}

/* ---------- Drawer ---------- */
#chat-panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9600;
  width: min(400px, calc(100vw - 40px));
  height: min(600px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--gold);
  border-radius: 2px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
:root[data-theme="light"] #chat-panel {
  box-shadow: 0 18px 50px rgba(120, 95, 40, 0.26);
}
#chat-root.open #chat-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Manuscript corner marks, echoing the cover's frame. */
#chat-panel::before,
#chat-panel::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid var(--gold);
  pointer-events: none;
}
#chat-panel::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
#chat-panel::after  { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }

/* ---------- Header ---------- */
#chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--rule);
  flex: 0 0 auto;
}
#chat-header .chat-title {
  font-family: var(--display);
  font-size: var(--fs-500);
  font-weight: 600;
  color: var(--gold-dp);
  letter-spacing: 0.01em;
}
#chat-header .chat-sub {
  font-size: var(--fs-200);
  color: var(--muted);
  font-style: italic;
  margin-top: 1px;
}
#chat-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: -8px -10px -8px 0;
  background: none;
  border: 0;
  color: var(--ink-soft);
  font-size: var(--fs-orn-sm);
  line-height: 1;
  cursor: pointer;
  border-radius: 2px;
  transition: color 0.25s ease;
}
#chat-close:hover { color: var(--gold); }

/* ---------- Message log ---------- */
#chat-log {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--rule-st) transparent;
}
#chat-log::-webkit-scrollbar { width: 6px; }
#chat-log::-webkit-scrollbar-thumb { background: var(--rule-st); border-radius: 3px; }

.chat-msg {
  font-size: var(--fs-300);
  line-height: 1.65;
  max-width: 92%;
}
.chat-msg p { margin: 0 0 8px; }
.chat-msg p:last-child { margin-bottom: 0; }
.chat-msg strong { color: var(--gold-dp); font-weight: 600; }

.chat-msg--user {
  align-self: flex-end;
  background: var(--gn-surface);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 9px 13px;
  color: var(--ink);
}
.chat-msg--agent {
  align-self: flex-start;
  color: var(--ink);
  max-width: 100%;
}
/* A gold hairline instead of a bubble — the guide speaks on the page itself. */
.chat-msg--agent::before {
  content: "";
  display: block;
  width: 22px;
  height: 1px;
  background: var(--gold);
  opacity: 0.55;
  margin-bottom: 8px;
}
.chat-msg--error {
  align-self: flex-start;
  color: var(--muted);
  font-style: italic;
  font-size: var(--fs-300);
}

/* ---------- Action chips ---------- */
.chat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.chat-chip {
  font-family: var(--serif);
  font-size: var(--fs-300);
  color: var(--gold-dp);
  background: var(--gn-surface);
  border: 1px solid var(--rule-st);
  border-radius: 2px;
  padding: 8px 13px;
  min-height: 38px;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.chat-chip:hover {
  background: rgba(198, 161, 91, 0.13);
  border-color: var(--gold);
  transform: translateY(-1px);
}
:root[data-theme="light"] .chat-chip:hover { background: rgba(156, 124, 51, 0.12); }
.chat-chip[data-used="true"] {
  opacity: 0.5;
  cursor: default;
  transform: none;
}

/* ---------- Typing indicator ---------- */
#chat-typing {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 2px 0;
}
#chat-typing span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.4;
  animation: chat-pulse 1.3s ease-in-out infinite;
}
#chat-typing span:nth-child(2) { animation-delay: 0.18s; }
#chat-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes chat-pulse {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(-3px); }
}

/* ---------- Suggested prompts ---------- */
#chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 18px 12px;
  flex: 0 0 auto;
}

/* ---------- Composer ---------- */
#chat-form {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--rule);
}
#chat-input {
  flex: 1 1 auto;
  font-family: var(--serif);
  font-size: var(--fs-300);
  line-height: 1.5;
  color: var(--ink);
  background: transparent;
  border: 0;
  resize: none;
  max-height: 120px;
  padding: 10px 0;
}
#chat-input::placeholder { color: var(--muted); font-style: italic; }
#chat-input:focus { outline: none; }
#chat-form:focus-within { border-top-color: var(--gold); }

#chat-send {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--rule-st);
  background: transparent;
  color: var(--gold-dp);
  font-size: var(--fs-orn-sm);
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease;
}
#chat-send:hover:not(:disabled) {
  border-color: var(--gold);
  background: var(--gn-surface);
}
#chat-send:disabled { opacity: 0.35; cursor: default; }

/* ---------- Mobile ---------- */
@media (max-width: 560px) {
  #chat-panel {
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 88vh;
    height: 88dvh;
    border-radius: 2px 2px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
  #chat-panel::after { display: none; }
  #chat-trigger { right: 16px; bottom: 16px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #chat-trigger,
  #chat-panel,
  .chat-chip,
  #chat-send {
    transition: opacity 0.2s ease;
  }
  #chat-panel { transform: none; }
  #chat-root.open #chat-panel { transform: none; }
  #chat-trigger:hover { transform: none; }
  #chat-trigger:not([hidden]) { animation: none; }
  .chat-chip:hover { transform: none; }
  #chat-typing span { animation: none; opacity: 0.5; }
}