/* TASK_028 Slice 1a — history (kai-memory) browser.
 *
 * Two pages:
 *   - /history/             (index.html)     conversation list
 *   - /history/view.html    (?id=<uuid>)     detail view
 *
 * Reuses .chat-msg / .chat-thinking from /css/pages/chat.css. We override the
 * .chat-stream behaviour because history is a page-scrolling layout, not the
 * nested-scrolling chat full-viewport layout.
 */

/* ── Shared list intro ───────────────────────────────────────────────── */

.hist-page {
  max-width: var(--container-max);
  width: 100%;
  margin: 0 auto;
  padding: var(--space-5);
}

.hist-intro {
  margin: 0 0 var(--space-5);
}

.hist-intro__title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 var(--space-2);
  color: var(--color-primary);
}

.hist-intro__sub {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.95rem;
}

/* ── List grid ────────────────────────────────────────────────────────── */

.hist-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}

.hist-card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-decoration: none;
  color: var(--color-text);
  transition:
    transform var(--duration-fast) var(--ease-soft),
    border-color var(--duration-fast) var(--ease-soft),
    box-shadow var(--duration-fast) var(--ease-soft);
}

.hist-card:hover,
.hist-card:focus-visible {
  border-color: var(--color-primary-soft);
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(30, 58, 95, 0.08);
  text-decoration: none;
}

.hist-card__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.hist-card__day {
  display: inline-block;
  background: var(--color-bg-soft);
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  letter-spacing: 0.02em;
}

.hist-card__date {
  font-size: 0.85rem;
  color: var(--color-muted);
}

.hist-card__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
  /* clamp to 3 lines so cards stay roughly equal-height in the grid */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hist-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: 0.85rem;
  color: var(--color-muted);
}

.hist-card__starred {
  margin-left: auto;
  color: var(--color-primary);
  font-weight: 500;
}

/* ── Detail view ──────────────────────────────────────────────────────── */

.hist-view {
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
  padding: var(--space-5);
}

.hist-view__back {
  display: inline-block;
  font-size: 0.9rem;
  color: var(--color-muted);
  text-decoration: none;
  margin-bottom: var(--space-3);
}

.hist-view__back:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.hist-view__head {
  margin: 0 0 var(--space-5);
}

.hist-view__title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 var(--space-2);
  line-height: 1.2;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.hist-view__meta {
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-muted);
}

.hist-view__loadolder {
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}
/* Honor the [hidden] HTML attribute — without :not([hidden]) the class's
 * display value (flex) would override the UA [hidden] { display: none }
 * rule, making the button visible even before JS runs. */
.hist-view__loadolder:not([hidden]) {
  display: flex;
}

.hist-view__loadolder-hint {
  font-size: 0.85rem;
  color: var(--color-muted);
}

/* ── Stream override (page-scroll, not nested-scroll) ─────────────────── */

.hist-view__stream {
  /* unset chat.css's full-height/overflow setup */
  flex: initial;
  overflow: visible;
  padding: 0;
  gap: var(--space-3);
  min-height: 0;
}

/* History messages render markdown, so disable parent pre-wrap which would
 * leak the trailing block whitespace. Keep word-break for safety. */
.hist-view__stream .chat-msg {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  max-width: 88%;
}

/* Markdown-rendered <p>, <ul>, etc. already provide block spacing; reset
 * default browser margins to feel chat-bubble-like. */
.hist-view__stream .chat-msg__text > :first-child { margin-top: 0; }
.hist-view__stream .chat-msg__text > :last-child  { margin-bottom: 0; }
.hist-view__stream .chat-msg__text p {
  margin: 0 0 var(--space-2);
}
.hist-view__stream .chat-msg__text p:last-child {
  margin-bottom: 0;
}
.hist-view__stream .chat-msg__text ul,
.hist-view__stream .chat-msg__text ol {
  margin: 0 0 var(--space-2);
  padding-left: var(--space-5);
}
.hist-view__stream .chat-msg__text pre {
  background: rgba(0, 0, 0, 0.06);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-size: 0.85rem;
}
.hist-view__stream .chat-msg--user .chat-msg__text pre {
  background: rgba(255, 255, 255, 0.18);
}
.hist-view__stream .chat-msg__text code {
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.88em;
}
.hist-view__stream .chat-msg__text pre code {
  background: transparent;
  padding: 0;
}
.hist-view__stream .chat-msg__text blockquote {
  border-left: 3px solid var(--color-border);
  padding-left: var(--space-3);
  margin: 0 0 var(--space-2);
  color: var(--color-muted);
}
.hist-view__stream .chat-msg__text table {
  border-collapse: collapse;
  margin: 0 0 var(--space-3);
}
.hist-view__stream .chat-msg__text th,
.hist-view__stream .chat-msg__text td {
  border: 1px solid var(--color-border);
  padding: 4px 8px;
  font-size: 0.9rem;
}

/* ── Block-internal extras ───────────────────────────────────────────── */

.cb-time {
  font-size: 0.72rem;
  color: var(--color-muted);
  margin-bottom: var(--space-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  opacity: 0.75;
}

.chat-msg--user .cb-time {
  color: rgba(255, 255, 255, 0.75);
}

.cb-day-divider {
  align-self: center;
  background: var(--color-bg-soft);
  color: var(--color-muted);
  font-size: 0.78rem;
  padding: 2px var(--space-3);
  border-radius: 999px;
  margin: var(--space-2) auto;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}

.cb-tool {
  display: inline-block;
  background: rgba(149, 117, 205, 0.12);
  color: #6a4caf;
  border: 1px dashed rgba(149, 117, 205, 0.4);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-style: italic;
  margin: var(--space-1) 0;
}

.cb-empty {
  color: var(--color-muted);
  font-style: italic;
  font-size: 0.85rem;
  opacity: 0.7;
}

/* History error banner shape matches chat.css for consistency. */
.hist-error {
  background: rgba(181, 75, 75, 0.08);
  border: 1px solid var(--color-error);
  color: var(--color-error);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  margin-top: var(--space-3);
}

/* ── Mobile (basic responsive — polish in 1b) ─────────────────────────── */

@media (max-width: 720px) {
  .hist-page,
  .hist-view {
    padding: var(--space-3);
  }
  .hist-intro__title {
    font-size: 1.55rem;
  }
  .hist-view__title {
    font-size: 1.35rem;
  }
  .hist-view__stream .chat-msg {
    max-width: 92%;
  }
}