/* css/timeline.css — chat-like event timeline */

.timeline {
  display: flex; flex-direction: column; gap: .55em;
  padding: .6em 1em calc(6em + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
}

.date-sep {
  text-align: center; color: var(--muted-2); font-size: .78em;
  margin: .8em 0 .2em;
}

.history-row {
  text-align: center; color: var(--muted); font-size: .82em;
  padding: .2em 1em; max-width: 90%; align-self: center;
}

.card {
  display: flex; align-items: flex-end; gap: .5em;
  max-width: 84%;
}
.card.align-left { align-self: flex-start; }
.card.align-right { align-self: flex-end; flex-direction: row-reverse; }

.card-icon { width: 16px; height: 16px; opacity: .6; margin-bottom: .4em; }

.card-body {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .6em .8em;
  min-width: 0;
}

.card-top { display: flex; align-items: center; gap: .3em; flex-wrap: wrap; margin-bottom: .3em; }
.arrow { color: var(--muted-2); }
.more-count { color: var(--muted); font-size: .8em; }

.card-tap {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .8em; width: 100%; text-align: left;
  padding: .1em 0;
}
.card-what { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-amt { font-weight: 600; color: var(--text); white-space: nowrap; }

.card-meta { color: var(--muted-2); font-size: .75em; margin-top: .3em; }
.edited-tag { color: var(--orange); }

.payment-card .card-body { display: flex; flex-direction: column; }

.tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  font-size: .65em; margin-left: 2px;
}
.tick-grey { color: var(--grey-tick); border: 1.3px solid var(--grey-tick); }
.tick-blue { color: var(--blue-tick); border: 1.3px solid var(--blue-tick); background: rgba(89,169,248,.12); }