/* Presidential Archive — global styles, animations, hover states.
   Structural layout lives inline in the components (theme.py); this file
   carries everything CSS expresses better: fonts, the loading animation,
   markdown styling, hover feedback and visibility classes. */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: #f4efe4; }

/* App fills the viewport; #react-entry-point/_dash-app-content must stretch. */
#react-entry-point, #_dash-app-content { height: 100%; }

/* --- Composer textarea --- */
.composer-input::placeholder { color: #a99c84; }

/* --- Loading dots --- */
@keyframes archiveDots {
  0%, 80%, 100% { opacity: .25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-1px); }
}
.archive-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #7c3b34;
  animation: archiveDots 1.1s infinite ease-in-out;
}

/* --- Server status indicator --- */
.server-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.server-dot--warming {
  background: #c0892f; /* warm amber: work in progress */
  animation: serverPulse 1.2s infinite ease-in-out;
}
.server-dot--down { background: #b8958c; } /* muted: unavailable */
@keyframes serverPulse {
  0%, 100% { opacity: .3; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1); }
}

/* --- Answer markdown --- */
.answer-md {
  font-family: 'Spectral', Georgia, serif;
  font-size: 18px;
  line-height: 1.66;
  color: #2e251a;
}
.answer-md p { margin: 0 0 12px; }
.answer-md p:last-child { margin-bottom: 0; }
.answer-md strong { font-weight: 600; }
.answer-md em { font-style: italic; }
.answer-md ul, .answer-md ol { margin: 0 0 12px; padding-left: 22px; }
.answer-md li { margin: 2px 0; }
.answer-md a { color: #7c3b34; }

/* --- Visibility helpers --- */
.hidden { display: none !important; }

.src-panel {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.src-panel.collapsed { display: none; }

.caret {
  display: inline-block;
  transition: transform .15s ease;
  font-size: 20px;
}
.caret.open { transform: rotate(90deg); }

/* --- Hover feedback (mirrors the prototype's style-hover) --- */
.hover-ink { transition: color .12s ease; }
.hover-ink:hover { color: #5e5141; }

.hover-icon-fill { background: #8a7c66; transition: background-color .12s ease; } /* MUTED */
.hover-icon-fill:hover { background: #7c3b34; } /* ACCENT */

.hover-border { transition: border-color .12s ease; }
.hover-border:hover { border-color: #d2c3a2; }

.example-card { transition: border-color .12s ease; }
.example-card:hover { border-color: #c8a8a2; }

.menu-row:hover { background: #f0e7d6; }

/* Muted by default (composer empty = not valid to submit); the .active class
   is toggled on by a clientside callback as soon as there's input. */
.send-btn {
  background: #b8958c;
  cursor: default;
  transition: background .15s ease;
}
.send-btn.active { background: #7c3b34; cursor: pointer; }
.send-btn.active:hover { background: #6b332d; }

/* --- Scrollbar --- */
#chat-scroll::-webkit-scrollbar { width: 10px; }
#chat-scroll::-webkit-scrollbar-thumb {
  background: #ddd0b6;
  border-radius: 8px;
  border: 3px solid #f4efe4;
}
#chat-scroll::-webkit-scrollbar-thumb:hover { background: #cdbf9f; }