/* memory.css — page layer for /memory, the You tab (owner: S3).
   Loaded after studio.css by base.html.  Tokens only: no colour or length
   literals outside design-tokens.css.

   The page's shape: a toolbar (search + type pills), a quiet second row of
   date/confidence filters, then a feed of read-only glass cards.  Each card
   carries one control — the ⋯ menu — and its editor does not exist in the DOM
   until that menu's Edit is chosen. */

/* ── The two view tabs (Memories | Journal) ───────────────────────────────── */

.mem-viewtabs {
  flex-wrap: nowrap;
  margin-block: 0 var(--space-md);
  inline-size: fit-content;
  max-inline-size: 100%;
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */

.mem-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-block-end: var(--space-sm);
}

.mem-search {
  position: relative;
  display: flex;
  align-items: center;
}

.mem-search-icon {
  position: absolute;
  inset-inline-start: var(--space-sm);
  color: var(--color-text-muted);
  pointer-events: none;
}

.mem-search-input.ui-input {
  padding-inline: calc(var(--space-sm) * 2 + var(--space-md)) var(--tap-min);
  border-radius: var(--radius-full);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

/* A search field's native clear affordance is too small to hit; this one is a
   full thumb. */
.mem-search-input::-webkit-search-cancel-button {
  display: none;
}

.mem-search-clear {
  position: absolute;
  inset-inline-end: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--tap-min);
  block-size: var(--tap-min);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}

.mem-search-clear:hover {
  background: var(--surface-tint);
  color: var(--color-text);
}

.mem-search-clear[hidden] {
  display: none;
}

/* ── Filter pills ────────────────────────────────────────────────────────── */

/* One track, pills inside it: the .segmented vocabulary from studio.css, not a
   row of boxy buttons.  It scrolls sideways rather than wrapping, so the row's
   height is stable while a filter is being chosen. */
.mem-pills {
  max-inline-size: 100%;
}

.mem-pills .period-btn {
  flex: 0 0 auto;
}

.mem-pills--quiet .period-btn {
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

.mem-pills--quiet .period-btn.active {
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-semibold);
}

.mem-pill-count {
  margin-inline-start: var(--space-2xs);
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

.mem-pill-retired.active {
  background: var(--color-danger-dim);
  color: var(--color-danger);
  box-shadow: none;
}

/* Glass pills: the same segmented track, but each pill carries the card's own
   material, and the active one is lit rather than merely bold — a filter you
   cannot see is a filter you forget is on. */
.mem-pills .period-btn {
  background: var(--glass-bg);
  border: var(--hairline) solid var(--glass-border);
  border-radius: var(--radius-full);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  transition:
    background var(--transition),
    border-color var(--transition),
    color var(--transition),
    transform var(--transition);
}

.mem-pills .period-btn:hover {
  background: var(--surface-tint);
}

.mem-pills .period-btn.active {
  background: var(--color-accent-dim);
  border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
  color: var(--color-accent);
  transform: translateY(calc(var(--space-3xs) * -1));
}

.mem-pills--quiet .period-btn {
  background: transparent;
  border-color: transparent;
}

.mem-pills--quiet .period-btn.active {
  color: var(--color-accent);
}

.mem-filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-block-end: var(--space-sm);
}

.mem-filter {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-inline-size: 0;
}

.mem-filter .segmented-label {
  flex: 0 0 auto;
  inline-size: calc(var(--space-2xl) + var(--space-md));
}

/* The track scrolls inside its lane instead of widening it: studio.css pins
   `.segmented` to `flex-shrink: 0`, which would push the page sideways. */
.mem-filter .segmented {
  flex: 1 1 auto;
  min-inline-size: 0;
}

/* ── The list's heading line ─────────────────────────────────────────────── */

.mem-listhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
  margin-block-end: var(--space-xs);
}

.mem-count {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.mem-filter-note {
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
  text-align: end;
}

/* ── The feed ────────────────────────────────────────────────────────────── */

.mem-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* ── A memory card: read-only by default ─────────────────────────────────── */

.mem-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  background: var(--glass-bg);
  border: var(--hairline) solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  transition: border-color var(--transition), background var(--transition);
}

.mem-card:hover {
  border-color: color-mix(in srgb, var(--color-accent) 22%, var(--glass-border));
}

.mem-card.is-open {
  border-color: color-mix(in srgb, var(--color-accent) 30%, var(--glass-border));
  background: var(--glass-bg-strong);
}

/* A card on its way out shrinks before it goes, so a delete does not make the
   next card jump into place unannounced. */
.mem-card.is-removing {
  opacity: 0;
  transform: scale(0.98);
  transition:
    opacity var(--transition-slow) var(--transition-ease-out),
    transform var(--transition-slow) var(--transition-ease-out);
}

.mem-card.is-editing {
  border-color: color-mix(in srgb, var(--color-accent) 38%, var(--glass-border));
  background: var(--glass-bg-strong);
}

/* A retired memory stays on the page so it can be restored — dimmed, and the
   badge beside the text says what "dimmed" means. */
.mem-card.is-retired {
  opacity: 0.66;
}

.mem-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

.mem-badge {
  letter-spacing: 0.02em;
}

.mem-badge--behavioral-pattern {
  background: color-mix(in srgb, var(--color-purple) 24%, transparent);
  border-color: color-mix(in srgb, var(--color-purple) 44%, transparent);
  color: var(--color-purple);
}

.mem-badge--observation {
  background: color-mix(in srgb, var(--color-info) 16%, transparent);
  border-color: color-mix(in srgb, var(--color-info) 32%, transparent);
  color: var(--color-info);
}

.mem-badge--preference {
  background: var(--color-accent-dim);
  border-color: color-mix(in srgb, var(--color-accent) 28%, transparent);
  color: var(--color-accent);
}

.mem-badge--neutral {
  color: var(--color-text-secondary);
}

.mem-badge-retired {
  background: var(--color-danger-dim);
  border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
  color: var(--color-danger);
}

.mem-mood {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

.mem-text {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  overflow-wrap: anywhere;
}

/* A card whose stored text is empty says so, rather than rendering a gap the
   reader would read as a clipping bug. */
.mem-text.is-empty {
  color: var(--color-text-muted);
  font-style: italic;
}

/* Two lines is the scanning state; "Show more" is the way to the rest. */
.mem-text.is-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.mem-expand {
  align-self: flex-start;
  min-block-size: var(--tap-min);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: var(--space-3xs);
}

.mem-expand:hover {
  color: var(--color-text);
}

/* ── Two rings: confidence (full circle) and sentiment (half circle) ───────
   One mechanic, two readings.  The geometry is fixed — r=28 in a 64-unit
   viewBox — so the arc's length is a constant the script writes as a custom
   property, and the stylesheet only animates it.  A percentage label sits in
   the middle of the confidence ring, which is why there is no separate number
   beside it to disagree with. */

.mem-rings {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-inline-start: auto;
}

.mem-ring {
  inline-size: var(--tap-min);
  block-size: var(--tap-min);
  flex: 0 0 auto;
  overflow: visible;
}

.mem-ring-track,
.mem-sentiment-track {
  fill: none;
  stroke: var(--meter-track);
}

.mem-ring-arc,
.mem-sentiment-arc {
  fill: none;
  stroke: var(--color-accent);
  stroke-dasharray: var(--dash-shell, 0);
  stroke-dashoffset: var(--dash-offset, 0);
  /* 600ms: long enough to read as a draw, short enough to finish before the
     reader has looked away.  (A calc() duration is dropped by Chromium inside
     the animation shorthand, which silently disabled this rule.) */
  animation: mem-ring-draw 600ms var(--transition-ease-out) both;
}

.mem-sentiment {
  inline-size: var(--tap-min);
  block-size: calc(var(--tap-min) / 2);
  flex: 0 0 auto;
  overflow: visible;
}

.mem-sentiment-arc {
  stroke: var(--color-text-secondary);
}

.mem-sentiment.is-high .mem-sentiment-arc {
  stroke: var(--color-success);
}

.mem-sentiment.is-low .mem-sentiment-arc {
  stroke: var(--color-danger);
}

.mem-ring-label {
  fill: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.mem-ring.is-unknown .mem-ring-label {
  fill: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* The draw-in: the arc starts at its full length and closes to the value.  The
   keyframes read the same custom property the element carries, so one rule
   animates every card's ring without the script knowing about motion. */
@keyframes mem-ring-draw {
  from {
    stroke-dashoffset: var(--dash-shell, 0);
  }

  to {
    stroke-dashoffset: var(--dash-offset, 0);
  }
}

/* ── The meta line: two stamps, a separator, a confidence ────────────────── */

.mem-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

/* A timestamp badge: the compact relative reading ("2 d ago") in the badge
   itself, the absolute stamp on its title, so hover and long-press both answer
   "when exactly" without a second line of text. */
.mem-ago {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-2xs);
  border: var(--hairline) solid var(--glass-border);
  border-radius: var(--radius-full);
  background: var(--glass-bg);
  color: var(--color-text-secondary);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mem-sep {
  color: var(--color-text-muted);
  opacity: 0.7;
}

.mem-conf {
  color: var(--color-text-muted);
}

.mem-prov {
  margin: 0;
  font-size: var(--font-size-2xs);
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}

/* ── The inline drawer: one sheet that slides up inside its own card ──────
   Opening it never leaves the card, so the control that opened it is still on
   screen when the action finishes, and only one card is open at a time.
   ``grid-template-rows`` animates to the content's real height without the
   magic max-height a sheet usually needs. */

.mem-drawer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows var(--transition-slow) var(--transition-ease-out),
    opacity var(--transition) var(--transition-ease-out);
}

.mem-drawer[hidden] {
  display: none;
}

.mem-drawer.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.mem-drawer-inner {
  display: grid;
  gap: var(--space-xs);
  min-block-size: 0;
  overflow: hidden;
}

.mem-drawer.is-open .mem-drawer-inner {
  padding-block-start: var(--space-2xs);
}

.mem-drawer-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2xs);
}

.mem-drawer-actions .mem-menu-item {
  justify-content: center;
  inline-size: 100%;
  border: var(--hairline) solid var(--glass-border);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
}

.mem-drawer-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0 var(--space-2xs);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.mem-drawer-status {
  margin: 0;
  min-block-size: var(--space-md);
  font-size: var(--font-size-2xs);
  color: var(--color-text-secondary);
}

.mem-drawer-status[hidden] {
  display: none;
}

.mem-drawer-status[data-tone="error"] {
  color: var(--color-danger);
}

.mem-drawer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  inline-size: var(--tap-min);
  block-size: var(--tap-min);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition:
    background var(--transition),
    color var(--transition);
}

.mem-drawer-btn:hover,
.mem-drawer-btn:focus-visible,
.mem-drawer-btn[aria-expanded="true"] {
  background: var(--surface-tint);
  color: var(--color-text);
}

.mem-drawer-btn svg {
  transition: transform var(--transition);
}

.mem-drawer-btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* ── The ⋯ menu ──────────────────────────────────────────────────────────── */

.mem-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--tap-min);
  block-size: var(--tap-min);
  margin-inline-start: auto;
  padding: 0;
  border: var(--hairline) solid transparent;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.mem-menu-btn:hover,
.mem-menu-btn[aria-expanded="true"] {
  background: var(--surface-tint);
  border-color: var(--glass-border);
  color: var(--color-text);
}

/* A card's glass surface is its own stacking context, so a neighbour card
   painted later would haze over whatever hangs past this card's edge — which a
   dropdown does.  Lifting the card with the open menu above its siblings is the
   order the reader's eye already assumed. */
.mem-card:has(.mem-menu.is-open),
.mem-card.has-open-menu {
  z-index: 40;
}

.mem-menu {
  position: absolute;
  inset-block-start: calc(var(--space-md) + var(--tap-min));
  inset-inline-end: var(--space-md);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  min-inline-size: calc(var(--space-3xl) * 2);
  padding: var(--space-2xs);
  /* Opaque, not glass: a menu is text over the card behind it, and a
     translucent surface costs contrast on both themes. */
  background: var(--color-surface-raised);
  border: var(--hairline) solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.mem-menu.is-open-up {
  /* Hangs above its trigger instead of below it, for cards at the foot of the
     viewport where the menu would otherwise run past the tab bar. */
  inset-block-start: auto;
  inset-block-end: calc(var(--space-md) + var(--tap-min));
}

.mem-menu[hidden] {
  display: none;
}

.mem-menu-note {
  margin: 0;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.mem-menu-item {
  display: flex;
  align-items: center;
  min-block-size: var(--tap-min);
  padding: 0 var(--space-sm);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--font-size-sm);
  text-align: start;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.mem-menu-item:hover,
.mem-menu-item:focus-visible {
  background: var(--surface-tint-strong);
}

.mem-menu-item-danger {
  color: var(--color-danger);
}

.mem-menu-item-danger:hover {
  background: var(--color-danger-dim);
}

/* ── The editor, only ever built for one card on demand ──────────────────── */

.mem-editor-slot:empty {
  display: none;
}

.mem-editor {
  margin-block-start: var(--space-xs);
  padding: var(--space-sm);
  background: var(--surface-tint);
  border: var(--hairline) solid var(--glass-border);
  border-radius: var(--radius-lg);
}

.mem-editor-label {
  display: block;
  margin-block-end: var(--space-2xs);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.mem-editor-error {
  margin: var(--space-xs) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-danger);
}

/* ── Loading, empty, error ───────────────────────────────────────────────── */

.mem-card--skeleton {
  gap: var(--space-xs);
}

.mem-sk {
  block-size: var(--space-sm);
  border-radius: var(--radius-full);
}

.mem-sk--badges {
  inline-size: 45%;
}

.mem-sk--line {
  inline-size: 100%;
}

.mem-sk--line-short {
  inline-size: 72%;
}

.mem-sk--meta {
  inline-size: 60%;
  block-size: var(--space-xs);
}

.mem-empty {
  padding-block: var(--space-2xl);
}

.mem-empty p {
  max-inline-size: calc(var(--space-3xl) * 6);
}

.mem-empty-cta {
  margin-block-start: var(--space-xs);
  text-decoration: none;
}

.mem-retry {
  margin-block-start: var(--space-xs);
}

.mem-loading {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.mem-toast {
  position: fixed;
  inset-inline: 0;
  inset-block-end: calc(var(--tabbar-height, var(--space-3xl)) + var(--space-3xl));
  z-index: 60;
  margin-inline: auto;
  inline-size: fit-content;
  max-inline-size: calc(100% - var(--space-lg));
  padding: var(--space-xs) var(--space-md);
  background: var(--glass-bg-strong);
  border: var(--hairline) solid var(--glass-border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  font-size: var(--font-size-xs);
  color: var(--color-text);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  animation: mem-toast-in var(--transition-slow) both;
}

.mem-toast[hidden] {
  display: none;
}

@keyframes mem-toast-in {
  from {
    opacity: 0;
    transform: translateY(var(--space-xs));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Pager ───────────────────────────────────────────────────────────────── */

.mem-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-block: var(--space-lg) var(--space-md);
}

.mem-pager[hidden] {
  display: none;
}

.mem-pager-btn {
  min-inline-size: calc(var(--tap-min) * 2);
  gap: var(--space-2xs);
}

.mem-page-label {
  min-inline-size: calc(var(--space-3xl) * 1.6);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ── Motion: cards rise in, staggered by their index ─────────────────────── */

@keyframes mem-card-rise {
  from {
    opacity: 0;
    transform: translateY(var(--space-xs));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Every rebuild of the feed — a filter, a search, a page — fades and slides in
   as one, so a filtered list reads as a new list rather than a jump cut. */
@keyframes mem-feed-in {
  from {
    opacity: 0;
    transform: translateY(var(--space-2xs));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mem-feed.is-swapping {
  animation: mem-feed-in var(--transition-slow) var(--transition-ease-out) both;
}

.mem-feed > .mem-card {
  animation: mem-card-rise var(--transition-slow) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}

/* ── The journal, in the same card language ──────────────────────────────── */

.ui-journal-days {
  inline-size: fit-content;
  max-inline-size: 100%;
  margin-block-end: var(--space-xs);
}

.ui-journal-entry {
  padding: var(--space-md);
  background: var(--surface-tint);
  border: var(--hairline) solid var(--glass-border);
  border-radius: var(--radius-lg);
}

.ui-journal-entry[aria-current="true"] {
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--glass-border));
  background: color-mix(in srgb, var(--color-accent-dim) 40%, transparent);
}

.ui-journal-day {
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.ui-journal-narrative {
  margin-block: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
}

.ui-journal-figures {
  gap: var(--space-2xs);
}

.ui-journal-figures li {
  padding: var(--space-3xs) var(--space-xs);
  background: var(--surface-tint);
  border: var(--hairline) solid var(--glass-border);
  border-radius: var(--radius-full);
  font-variant-numeric: tabular-nums;
}

.ui-journal-source {
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
}

/* ── Wider viewports: two columns of cards, filters on one line ──────────── */

@media (min-width: 720px) {
  .mem-toolbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .mem-search {
    flex: 1 1 40%;
    max-inline-size: calc(var(--space-3xl) * 8);
  }

  .mem-filters {
    flex-direction: row;
    gap: var(--space-lg);
  }
}

@media (min-width: 1024px) {
  .mem-feed {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--space-sm);
  }

  .mem-feed > .mem-empty {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mem-feed > .mem-card,
  .mem-feed.is-swapping,
  .mem-toast,
  .mem-ring-arc,
  .mem-sentiment-arc {
    animation: none;
  }

  .mem-drawer,
  .mem-drawer-btn svg,
  .mem-card.is-removing,
  .mem-pills .period-btn {
    transition: none;
  }
}


/* ── The Hindsight pill under a chat reply (S4-B) ─────────────────────────
   memory.css is linked by base.html on every page, so the pill's material lives
   here with the cards' — one glass language, one file.  The popover is
   position: fixed because it is appended to the body (a chat bubble scrolls and
   clips), and it is placed above its pill when there is room. */

.hindsight-pill-wrap {
  display: flex;
  margin-block-start: var(--space-2xs);
}

.hindsight-pill {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--space-xl);
  padding: 0 var(--space-sm);
  border: var(--hairline) solid var(--glass-border);
  border-radius: var(--radius-full);
  background: var(--glass-bg);
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.01em;
  cursor: pointer;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  transition:
    background var(--transition),
    border-color var(--transition),
    color var(--transition);
}

.hindsight-pill:hover,
.hindsight-pill:focus-visible,
.hindsight-pill[aria-expanded="true"] {
  background: var(--color-accent-dim);
  border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
  color: var(--color-accent);
}

.hindsight-popover {
  position: fixed;
  z-index: var(--z-overlay);
  display: grid;
  gap: var(--space-xs);
  inline-size: min(20rem, calc(100vw - var(--space-md)));
  max-block-size: min(60vh, 24rem);
  overflow-y: auto;
  padding: var(--space-sm);
  border: var(--hairline) solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-bg-strong);
  box-shadow: var(--shadow-float);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  animation: hindsight-pop var(--transition) var(--transition-ease-out) both;
}

.hindsight-popover[hidden] {
  display: none;
}

@keyframes hindsight-pop {
  from {
    opacity: 0;
    transform: translateY(var(--space-2xs));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hindsight-popover-head {
  margin: 0;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.hindsight-list {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hindsight-item {
  display: grid;
  gap: var(--space-3xs);
  padding-block-end: var(--space-xs);
  border-block-end: var(--hairline) solid var(--border-subtle);
}

.hindsight-item:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.hindsight-text {
  margin: 0;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.hindsight-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  margin: 0;
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.hindsight-chip {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-2xs);
  border: var(--hairline) solid var(--glass-border);
  border-radius: var(--radius-full);
  background: var(--surface-tint);
  color: var(--color-text-secondary);
  font-size: var(--font-size-2xs);
}

.hindsight-all {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent);
  text-decoration: none;
}

.hindsight-all:hover {
  text-decoration: underline;
  text-underline-offset: var(--space-3xs);
}

@media (prefers-reduced-motion: reduce) {
  .hindsight-popover {
    animation: none;
  }
}

/* ── Mobile Bottom-Sheet Editor Modal (#memory-editor-sheet) ─────────────── */

.mem-editor-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition, 0.25s ease);
}

.mem-editor-sheet-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mem-editor-sheet {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  max-block-size: 85dvh;
  background: var(--color-surface, #181818);
  border-block-start: var(--hairline, 1px) solid var(--glass-border, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.6);
  z-index: 999;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
  padding: var(--space-sm) var(--space-md) calc(var(--space-md) + env(safe-area-inset-bottom));
}

@media (min-width: 768px) {
  .mem-editor-sheet {
    max-inline-size: 580px;
    inset-inline-start: 50%;
    inset-inline-end: auto;
    transform: translate(-50%, 100%);
    border-inline: var(--hairline, 1px) solid var(--glass-border, rgba(255, 255, 255, 0.1));
  }
  .mem-editor-sheet.is-open {
    transform: translate(-50%, 0);
  }
}

.mem-editor-sheet.is-open {
  transform: translateY(0);
}

@media (min-width: 768px) {
  .mem-editor-sheet.is-open {
    transform: translate(-50%, 0);
  }
}

.mem-sheet-handle-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  block-size: var(--space-sm);
  margin-block-end: var(--space-xs);
  cursor: grab;
}

.mem-sheet-handle {
  inline-size: 36px;
  block-size: 4px;
  border-radius: var(--radius-full);
  background: var(--color-border, #444);
}

.mem-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--space-sm);
}

.mem-sheet-title {
  margin: 0;
  font-size: var(--font-size-md, 18px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text, #fff);
}

.mem-sheet-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--tap-min, 44px);
  block-size: var(--tap-min, 44px);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-full);
}

.mem-sheet-close:hover {
  color: var(--color-text);
  background: var(--surface-tint);
}

.mem-sheet-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.mem-sheet-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.mem-sheet-textarea {
  min-block-size: 80px;
  resize: vertical;
  font-size: max(16px, var(--font-size-sm));
}

.mem-sheet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--space-sm);
}

.mem-sheet-grid .ui-input,
.mem-sheet-grid .ui-select {
  font-size: max(16px, var(--font-size-sm));
  min-block-size: var(--tap-min, 44px);
}

.mem-sheet-error {
  margin: 0;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  background: rgba(220, 38, 38, 0.15);
  color: var(--color-danger, #ef4444);
  font-size: var(--font-size-xs);
}

.mem-sheet-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-block-start: var(--space-xs);
}

.mem-sheet-actions .ui-btn {
  min-block-size: var(--tap-min, 44px);
  font-size: max(16px, var(--font-size-sm));
}

/* ── Hindsight Insights View ─────────────────────────────────────────────── */

.mem-insights-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-md);
  margin-block-start: var(--space-md);
}

.mem-insight-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
}

.mem-topic-badge {
  font-size: var(--font-size-2xs);
  letter-spacing: 0.02em;
}

.insight-sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  margin-block: var(--space-2xs);
}

.insight-sources-label {
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
}

.insight-chip,
.source-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-xs);
  border-radius: var(--radius-full);
  background: var(--surface-tint);
  border: var(--hairline) solid var(--glass-border);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent);
}

.insights-status {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--surface-tint);
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

/* ── Unified Timeline View ───────────────────────────────────────────────── */

.ui-timeline-entry {
  position: relative;
  margin-block-end: var(--space-lg);
}

.ui-timeline-memories {
  margin-block-start: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--surface-tint);
  border-inline-start: 3px solid var(--color-accent);
}

.ui-timeline-memories-tag {
  display: block;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin-block-end: var(--space-2xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ui-timeline-memory-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.ui-timeline-memory-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--color-text);
}

.ui-timeline-memory-text {
  flex: 1 1 auto;
}

/* ── Badge & Timestamp Spacing Fix ───────────────────────────────────────── */

.mem-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-xs);
  margin-block-start: var(--space-xs);
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.mem-sep {
  display: inline-block;
  margin-inline: var(--space-3xs);
  color: var(--color-border);
  opacity: 0.6;
}

.mem-sentiment-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--space-2xs);
  border-radius: var(--radius-full);
  background: var(--surface-tint);
  font-size: var(--font-size-2xs);
  color: var(--color-text-secondary);
}