.lio-sender-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  isolation: isolate;
}

.lio-sender-card {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-2xl);
  overflow: visible;
  font-family: var(--font-geist);
  letter-spacing: 0;
}

.lio-sender-card__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  padding: var(--space-base);
  background: var(--surface);
  border-start-start-radius: calc(var(--radius-2xl) - var(--border-w));
  border-start-end-radius: calc(var(--radius-2xl) - var(--border-w));
}

.lio-sender-card[data-state="collapsed"] .lio-sender-card__row {
  border-end-start-radius: calc(var(--radius-2xl) - var(--border-w));
  border-end-end-radius: calc(var(--radius-2xl) - var(--border-w));
}

.lio-sender-card__main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-sm);
  min-inline-size: var(--space-zero);
}

.lio-sender-card__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.lio-sender-card__icon {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--size-xl);
  block-size: var(--size-xl);
}

.lio-sender-card__icon img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.lio-sender-card__name {
  margin: var(--space-zero);
  min-inline-size: var(--space-zero);
  overflow: hidden;
  color: var(--text-brand-secondary);
  font: 500 16px/24px var(--font-geist);
  letter-spacing: 0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lio-sender-card__from {
  margin: var(--space-zero);
  color: var(--text-tertiary);
  font: 400 14px/22px var(--font-geist);
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}

.lio-sender-card__divider {
  block-size: var(--border-w);
  background: var(--border);
}

.lio-sender-card__flags {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.lio-sender-card__timestamp {
  color: var(--text-tertiary);
  font: 400 14px/22px var(--font-geist);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.lio-sender-card__dot {
  inline-size: var(--size-xs);
  block-size: var(--size-xs);
  flex: none;
  border-radius: var(--radius-full);
  background: var(--border-secondary);
}

.lio-sender-card__actions {
  display: flex;
  flex: none;
  align-self: stretch;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-base);
}

.lio-sender-card__button.lio-btn {
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  inline-size: var(--control-h-sm);
  min-inline-size: var(--control-h-sm);
  block-size: var(--control-h-sm);
  min-block-size: var(--control-h-sm);
  padding: var(--space-zero);
  gap: var(--space-zero);
  flex: none;
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
  line-height: 0;
}

.lio-sender-card__button.lio-btn .lio-btn__label:empty {
  display: none;
}

.lio-sender-card__button.lio-btn .lio-btn__icon {
  display: grid;
  place-items: center;
  inline-size: var(--size-lg);
  block-size: var(--size-lg);
  margin: var(--space-zero);
}

.lio-sender-card__button-icon,
.lio-sender-card__chevron-icon {
  display: grid;
  place-items: center;
  inline-size: var(--size-lg);
  block-size: var(--size-lg);
  line-height: 0;
}

.lio-sender-card__button-icon img,
.lio-sender-card__chevron-icon img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.lio-sender-card__chevron-icon {
  transition: transform 150ms ease;
}

.lio-sender-card[data-state="collapsed"] .lio-sender-card__toggle .lio-sender-card__chevron-icon {
  transform: rotate(-90deg);
}

.lio-sender-card__metrics {
  display: flex;
  align-items: stretch;
  gap: var(--space-lg);
  padding: var(--space-base);
  border-top: var(--border-w) solid var(--border);
  overflow-x: auto;
}

.lio-sender-card[data-state="collapsed"] .lio-sender-card__metrics {
  display: none;
}

.lio-sender-card__metric {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--space-xs);
  min-inline-size: max-content;
}

.lio-sender-card__metric-label {
  margin: var(--space-zero);
  color: var(--text-tertiary);
  font: 400 14px/22px var(--font-geist);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.lio-sender-card__metric-value {
  margin: var(--space-zero);
  color: var(--text);
  font: 600 14px/normal var(--font-geist);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lio-sender-card__metrics-divider {
  flex: none;
  align-self: stretch;
  inline-size: var(--border-w);
  background: var(--border);
}

.lio-sender-card__menu-item.lio-btn {
  justify-content: flex-start;
  inline-size: 100%;
}

.lio-sender-card__menu-content.lio-popover__content {
  min-inline-size: 220px;
  max-inline-size: min(280px, calc(100vw - (var(--space-base) * 2)));
  gap: var(--space-xs);
  padding: var(--space-sm);
}

.lio-sender-card__menu-content .lio-popover__body {
  display: grid;
  gap: var(--space-xs2);
}

@media (max-width: 640px) {
  .lio-sender-card__row {
    flex-direction: column;
  }

  .lio-sender-card__actions {
    width: 100%;
    align-self: stretch;
    flex-direction: row;
    justify-content: flex-end;
  }
}