/* =============================================================================
   KAR — Research history
   The two-pane workspace behind history.html. Layered on /styles/chat.css
   (brand tokens, header, nav, footer) and /styles/tools.css (buttons, chips,
   badges, states) — nothing here redefines either.

   Desktop is a rail of conversations beside the one being read. On a phone the
   same markup is one pane at a time: [data-view] on the shell decides which,
   so there is no second template to keep in sync.
   ============================================================================= */

.hist-shell {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
/* The rail is a list of conversation titles, so it takes a fixed share of the
   extra width rather than half of it — the reading pane is what the page is
   for, and it is the pane that benefits from a wider workspace. */
@media (min-width: 1440px) {
  .hist-shell { grid-template-columns: 360px minmax(0, 1fr); gap: 24px; }
}

/* ── Left rail ─────────────────────────────────────────────────────────────── */
.hist-rail {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
}

.hist-rail-top {
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.hist-search {
  position: relative;
  display: flex;
  align-items: center;
}
.hist-search .hist-search-icon {
  position: absolute;
  left: 12px;
  color: var(--text-light);
  font-size: .82rem;
  pointer-events: none;
}
.hist-search .input {
  padding-left: 34px;
  padding-right: 34px;
  min-height: 42px;
}
/* type="search" gives WebKit its own clear cross, which would sit beside ours.
   The visible one is the button below, so the field keeps search semantics
   (Escape to clear, the right on-screen keyboard) without a second control. */
.hist-search .input::-webkit-search-cancel-button,
.hist-search .input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.hist-search-clear {
  position: absolute;
  right: 6px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-light);
  font-size: .9rem;
  padding: 6px 8px;
  line-height: 1;
  border-radius: 50%;
}
.hist-search-clear:hover { color: var(--text-main); background: var(--bg-light); }

/* Source filter. Only a handful of features write history, so the chips wrap
   onto a second line rather than scrolling sideways — a filter the user cannot
   see is a filter they will not use. */
.hist-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hist-filter {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  background: var(--bg-white);
  color: var(--text-muted);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--r-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.hist-filter:hover { background: var(--bg-light); color: var(--text-main); }
.hist-filter[aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.hist-rail-count {
  font-size: .74rem;
  color: var(--text-light);
  font-weight: 600;
  letter-spacing: .02em;
}

.hist-list {
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1;
  min-height: 120px;
  padding: 6px 8px 10px;
}

/* ── Date group ────────────────────────────────────────────────────────────── */
.hist-group-label {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-white);
  padding: 12px 8px 6px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-light);
}

/* ── Conversation row ──────────────────────────────────────────────────────── */
.hist-item {
  position: relative;
  width: 100%;
  display: block;
  text-align: left;
  border: 1px solid transparent;
  background: none;
  border-radius: var(--radius-sm);
  padding: 10px 34px 10px 11px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: background var(--transition), border-color var(--transition);
}
.hist-item + .hist-item { margin-top: 2px; }
.hist-item:hover { background: var(--bg-light); }
.hist-item[aria-current="true"] {
  background: var(--primary-ultra-light);
  border-color: rgba(59, 111, 160, .28);
}
/* The active conversation is marked by a spine rather than a heavy fill, so a
   long list still reads as one column. */
.hist-item[aria-current="true"]::before {
  content: '';
  position: absolute;
  left: 0; top: 9px; bottom: 9px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--primary);
}

.hist-item-title {
  font-size: .89rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.32;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.hist-item[aria-current="true"] .hist-item-title { color: var(--primary-dark); }

.hist-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: .72rem;
  color: var(--text-light);
  min-width: 0;
}
.hist-item-meta .hist-dot { opacity: .5; }
.hist-item-meta .hist-src {
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hist-item-meta .hist-time { white-space: nowrap; margin-left: auto; flex-shrink: 0; }

.hist-item-del {
  position: absolute;
  top: 7px;
  right: 5px;
  border: none;
  background: none;
  color: var(--text-light);
  cursor: pointer;
  font-size: .78rem;
  padding: 6px 7px;
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity var(--transition), color var(--transition), background var(--transition);
}
.hist-item:hover .hist-item-del,
.hist-item-del:focus-visible { opacity: 1; }
.hist-item-del:hover { color: var(--tool-bad); background: var(--tool-bad-bg); }

.hist-item.is-removing {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .2s ease, transform .2s ease;
}

/* Pointer devices only: on touch there is no hover, so delete must be visible
   or it cannot be reached at all. */
@media (hover: none) {
  .hist-item-del { opacity: 1; }
}

.hist-more {
  padding: 10px 8px 4px;
}

/* ── Right pane ────────────────────────────────────────────────────────────── */
/* The pane grows with the conversation and the page scrolls — an inner
   scroller inside a scrolling page is the thing that makes long transcripts
   feel like a database viewer. What stays put instead is the chrome: the title
   sticks to the top and the actions to the bottom while you read, so "which
   conversation is this" and "continue it" are never scrolled away.

   Nothing here may set `overflow` — an overflow container would make the pane
   the sticky viewport and the pinning would silently stop working. */
.hist-pane {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  min-height: 420px;
  display: flex;
  flex-direction: column;
}

.hist-pane-head {
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg-white);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.hist-back {
  display: none;
  margin-bottom: 10px;
}
.hist-pane-title {
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--text-main);
  margin: 0 0 8px;
  line-height: 1.28;
  overflow-wrap: anywhere;
}
.hist-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.hist-badges .badge-topic { background: var(--primary-ultra-light); border-color: rgba(59, 111, 160, .25); color: var(--primary-dark); }
.hist-badges .badge-linked { background: var(--tool-ok-bg); border-color: var(--tool-ok-border); color: var(--tool-ok); }

/* Cross-tool strip: the car this conversation is about, and what the rest of
   KAR can do with it. */
.hist-context {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 11px 22px;
  background: var(--bg-light);
  border-bottom: 1px solid var(--border-subtle);
  font-size: .84rem;
}
.hist-context .hist-context-car {
  font-weight: 800;
  color: var(--text-main);
}
.hist-context .hist-context-label { color: var(--text-muted); }
.hist-context .hist-context-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}

.hist-transcript {
  padding: 18px 22px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hist-msg {
  /* Percentage first so the bubbles keep their proportions in a narrow pane,
     then a hard ceiling so a 1500px workspace does not turn a two-line answer
     into a 950px banner. */
  max-width: min(82%, 46rem);
  padding: 11px 15px;
  border-radius: var(--radius-md);
  font-size: .9rem;
  line-height: 1.62;
  overflow-wrap: anywhere;
}
.hist-msg.user {
  align-self: flex-end;
  background: var(--c-sunken);
  color: var(--c-text);
}
.hist-msg.assistant {
  align-self: flex-start;
  background: transparent;
  border: 0;
  border-left: 2px solid var(--c-brand);
  border-radius: 0;
  color: var(--text-main);
}
.hist-msg.assistant a { color: var(--c-text); text-decoration: underline; text-decoration-color: var(--c-accent); text-underline-offset: 3px; }
.hist-msg :first-child { margin-top: 0; }
.hist-msg :last-child { margin-bottom: 0; }
.hist-msg table { display: block; overflow-x: auto; max-width: 100%; }

/* ── Attachments on a message ──────────────────────────────────────────────
   Images get a thumbnail; a video or a document gets a card. A reopened
   conversation must not pull a 90MB video down to show a corner of it. */
.hist-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.hist-attachment {
  display: flex; align-items: center; gap: 8px;
  max-width: 210px; min-width: 0;
  padding: 6px 10px 6px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-white);
  text-decoration: none;
  transition: border-color var(--transition);
}
.hist-attachment:hover { border-color: var(--primary); }
.hist-msg.user .hist-attachment {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .3);
}
/* The icon is the floor and the thumbnail sits on top of it. An attachment
   deleted since the conversation was saved simply fails to paint, revealing the
   icon underneath — no error handler, no broken-image glyph. */
.hist-attachment .hist-attachment-icon {
  position: relative;
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 5px; display: flex;
  align-items: center; justify-content: center;
  background: var(--mist); color: var(--primary-dark);
  overflow: hidden;
}
.hist-attachment .hist-attachment-icon img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: var(--mist);
}
.hist-msg.user .hist-attachment .hist-attachment-icon { background: rgba(255, 255, 255, .22); color: #fff; }
.hist-attachment-meta { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.hist-attachment-name {
  font-size: .78rem; font-weight: 700; color: var(--text-main);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hist-attachment-sub { font-size: .68rem; color: var(--text-muted); }
.hist-msg.user .hist-attachment-name { color: #fff; }
.hist-msg.user .hist-attachment-sub { color: rgba(255, 255, 255, .75); }

.hist-pane-foot {
  border-top: 1px solid var(--border-subtle);
  padding: 12px 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--bg-white);
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 3;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.hist-pane-foot .hist-foot-text {
  font-size: .82rem;
  color: var(--text-muted);
  flex: 1;
  min-width: 120px;
}

/* ── Skeletons ─────────────────────────────────────────────────────────────── */
.hist-skeleton-row { padding: 11px; }
.hist-skeleton-row .skeleton { height: 11px; border-radius: 4px; }
.hist-skeleton-row .skeleton + .skeleton { margin-top: 7px; }
.hist-skeleton-row .sk-title { width: 82%; }
.hist-skeleton-row .sk-meta { width: 46%; height: 9px; }

.hist-pane-skeleton { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.hist-pane-skeleton .skeleton { height: 13px; border-radius: 5px; }
.hist-pane-skeleton .sk-block { height: 64px; border-radius: var(--radius-md); }

/* ── Empty / error states inside the panes ─────────────────────────────────── */
.hist-rail-state {
  padding: 26px 18px;
  text-align: center;
  color: var(--text-muted);
  font-size: .85rem;
  line-height: 1.6;
}
.hist-rail-state .hist-rail-state-icon { font-size: 1.5rem; margin-bottom: 8px; }

.hist-pane-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 46px 26px;
  gap: 6px;
}
.hist-pane-state .hist-state-icon { font-size: 2.3rem; line-height: 1; margin-bottom: 6px; }
.hist-pane-state h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 0;
  color: var(--text-main);
}
.hist-pane-state p {
  color: var(--text-muted);
  font-size: .89rem;
  margin: 0 0 8px;
  max-width: 44ch;
  line-height: 1.6;
}
.hist-pane-state .hist-state-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6px;
}

/* Suggested openers on the empty pane — every one goes to a tool that exists. */
.hist-starters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 520px;
  margin-top: 14px;
  text-align: left;
}
.hist-starter {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-white);
  color: var(--text-main);
  text-decoration: none;
  font-size: .86rem;
  font-weight: 600;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.hist-starter:hover {
  border-color: var(--primary);
  background: var(--primary-ultra-light);
  transform: translateY(-1px);
}
.hist-starter .hist-starter-icon { font-size: 1.1rem; flex-shrink: 0; }

/* ── Delete confirmation ───────────────────────────────────────────────────── */
.hist-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: rgba(7, 13, 31, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: hist-fade .16s ease;
}
.hist-confirm {
  background: var(--bg-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg, 0 20px 50px rgba(0, 0, 0, .25));
  padding: 24px;
  width: 100%;
  max-width: 400px;
  text-align: center;
  animation: hist-pop .2s cubic-bezier(.34, 1.2, .64, 1);
}
.hist-confirm h3 { font-family: var(--font-display); font-size: 1.05rem; margin: 10px 0 6px; color: var(--text-main); }
.hist-confirm p { font-size: .88rem; color: var(--text-muted); margin: 0 0 18px; line-height: 1.6; overflow-wrap: anywhere; }
.hist-confirm-actions { display: flex; gap: 10px; justify-content: center; }
.hist-confirm-actions .btn { flex: 1; }

@keyframes hist-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes hist-pop { from { opacity: 0; transform: translateY(4px) scale(.995) } to { opacity: 1; transform: none } }

/* ── Tablet ────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hist-shell { grid-template-columns: 268px minmax(0, 1fr); gap: 14px; }
  .hist-msg { max-width: 90%; }
}

/* ── Phone: one pane at a time ─────────────────────────────────────────────── */
@media (max-width: 820px) {
  .hist-shell { grid-template-columns: 1fr; gap: 0; }

  .hist-rail {
    position: static;
    max-height: none;
  }
  .hist-list {
    overflow-y: visible;
    max-height: none;
  }

  /* The reading pane takes the screen when a conversation is open, and the
     rail comes back when it closes — one template, no drawer to fall out of
     sync with the list behind it. */
  .hist-shell[data-view="list"] .hist-pane { display: none; }
  .hist-shell[data-view="detail"] .hist-rail { display: none; }

  .hist-back { display: inline-flex; }
  .hist-pane { min-height: 60vh; }
  .hist-pane-head { padding: 14px 16px 12px; }
  .hist-context { padding: 10px 16px; }
  .hist-context .hist-context-actions { margin-left: 0; width: 100%; }
  .hist-transcript { padding: 14px 16px 18px; }
  .hist-msg { max-width: 94%; font-size: .88rem; }

  /* Continuing the conversation is the point of opening it — the action bar is
     sticky everywhere, and on a phone it also clears the home indicator. */
  .hist-pane-foot {
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 14px rgba(7, 13, 31, .06);
  }
  .hist-pane-foot .btn { flex: 1 1 auto; }
  .hist-pane-foot .hist-foot-text { display: none; }

  .hist-confirm-actions { flex-direction: column-reverse; }
}

@media (prefers-reduced-motion: reduce) {
  .hist-confirm-overlay, .hist-confirm { animation: none; }
  .hist-item, .hist-starter, .hist-item-del { transition: none; }
  .hist-starter:hover { transform: none; }
  .hist-item.is-removing { transition: none; }
}