/* SG Chat Web Client — Calls tab (call history) feature styles.
 * Self-contained per docs/wave4-6-web-client-architecture.md §1 pattern:
 * does not override or redefine any selector from style.css/call.css.
 * Backs the "Calls" tab per docs/phase-e-call-log-contract.md §4.1.
 */

#view-calls .panel {
  margin-bottom: var(--space-4);
}

.call-history-list { list-style: none; margin: 0; padding: 0; }
.call-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}
.call-history-row:last-child { border-bottom: none; }
.call-history-row:hover { background: var(--color-bg-alt); }

.call-history-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  flex: 1;
}

/* Direction arrow — outgoing (accent) vs incoming (mint), matches the
   contact-list badge palette so incoming/outgoing reads consistently with
   the rest of the app rather than inventing a new color meaning. */
.call-direction-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  background: var(--color-bg-alt);
}
.call-direction-icon.direction-outgoing {
  color: var(--color-accent);
  background: var(--color-accent-soft);
}
.call-direction-icon.direction-incoming {
  color: var(--color-success);
  background: var(--color-success-soft);
}
/* Missed/declined/failed calls get a warm-tinted icon regardless of
   direction, echoing the outcome badge below it. */
.call-direction-icon.outcome-attention {
  color: var(--color-warm);
  background: var(--color-warm-soft);
}

.call-history-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.call-history-peer {
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.call-history-sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.call-type-icon { font-size: var(--text-sm); }

.call-history-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.call-history-duration {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  min-width: 44px;
  text-align: right;
}
.call-history-redial {
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  cursor: pointer;
  color: var(--color-text-muted);
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.call-history-redial:hover {
  background: var(--color-bg-alt);
  color: var(--color-accent);
}

/* Outcome badge — reuses the existing badge/badge--* classes shipped in
   style.css (badge--success/--muted/--warm/--role); this file only adds
   layout, no new color classes needed since "Missed"/"Declined"/"Failed"
   all map onto badge--warm and "In progress" onto badge--role. */
.call-history-outcome { flex-shrink: 0; }

#calls-load-more {
  display: block;
  margin: var(--space-4) auto 0;
}