.fn-resp-call-summary {
    background: var(--fn-card-bg);
    border: 1px solid var(--fn-card-border);
    border-radius: .7rem;
    padding: .65rem .85rem;
    margin-bottom: .75rem;
    display: flex;
    align-items: center;
    gap: .55rem;
}
.fn-resp-call-summary .icon {
    width: 2rem; height: 2rem;
    border-radius: .45rem;
    background: var(--fn-accent-soft);
    color: var(--fn-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.fn-resp-call-summary .icon .mdi { font-size: 1.15rem; }
.fn-resp-call-summary .info { min-width: 0; flex: 1; }
.fn-resp-call-summary .type {
    font-weight: 800;
    font-size: 1rem;
    color: var(--fn-text);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fn-resp-call-summary .addr {
    font-size: .8rem;
    color: var(--fn-text-muted);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: .15rem;
}

.fn-resp-group {
    background: var(--fn-card-bg);
    border: 1px solid var(--fn-card-border);
    border-radius: .7rem;
    overflow: hidden;
    margin-bottom: .65rem;
}
.fn-resp-group-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .85rem;
    background: var(--fn-tertiary-bg);
    border-bottom: 1px solid var(--fn-card-border);
}
.fn-resp-group-pill {
    width: 1.7rem; height: 1.7rem;
    border-radius: .45rem;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.fn-resp-group-pill .mdi { font-size: 1rem; }
.fn-resp-group-pill.success { background: #198754; }
.fn-resp-group-pill.danger  { background: var(--fn-accent); }
.fn-resp-group-pill.warning { background: #d97706; }
.fn-resp-group-pill.info    { background: #0d6efd; }
.fn-resp-group-pill.purple  { background: #7c3aed; }
.fn-resp-group-pill.teal    { background: #0d9488; }
.fn-resp-group-pill.pink    { background: #db2777; }
.fn-resp-group-pill.dark    { background: #1f2937; }
.fn-resp-group-pill.gray    { background: #6b7280; }
.fn-resp-group-label {
    font-weight: 800;
    font-size: .85rem;
    color: var(--fn-text);
    text-transform: uppercase;
    letter-spacing: .03em;
    flex: 1;
    min-width: 0;
}
.fn-resp-group-count {
    font-weight: 800;
    font-size: .8rem;
    color: var(--fn-text-muted);
    background: var(--fn-card-bg);
    padding: .2rem .5rem;
    border-radius: 999px;
    border: 1px solid var(--fn-card-border);
    flex-shrink: 0;
}

.fn-resp-row {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .85rem;
    border-bottom: 1px solid var(--fn-card-border);
}
.fn-resp-row:last-child { border-bottom: 0; }
.fn-resp-row.is-mine { background: rgba(13,110,253,.06); }

.fn-resp-name {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.fn-resp-name .name {
    font-weight: 700;
    font-size: .95rem;
    color: var(--fn-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fn-resp-name .ff {
    font-size: .72rem;
    color: var(--fn-text-muted);
    font-weight: 600;
}
.fn-resp-name .ff.you {
    color: #0d6efd;
    font-weight: 800;
}

/* ETA pill — Bootstrap-style subtle success green.
   Pale tinted background, dark green text, soft border.
   Reads as "informational success" without being loud. */
.fn-resp-eta {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    background: #d1e7dd;          /* Bootstrap success-subtle bg */
    color: #0a3622;               /* Bootstrap success-emphasis text */
    border: 1px solid #a3cfbb;    /* Bootstrap success-border-subtle */
    padding: .28rem .5rem;
    border-radius: .4rem;
    font-size: .8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: .01em;
}
.fn-resp-eta .mdi {
    font-size: .9rem;
    opacity: .85;
}
[data-bs-theme="dark"] .fn-resp-eta {
    background: rgba(25, 135, 84, .18);
    color: #75d8a6;
    border-color: rgba(25, 135, 84, .35);
}

.fn-resp-time {
    font-size: .72rem;
    color: var(--fn-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}

.fn-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1.5rem 2rem;
    color: var(--fn-text-muted);
}
.fn-empty-icon {
    font-size: 4rem;
    line-height: 1;
    opacity: .35;
    color: var(--fn-text);
    margin-bottom: .25rem;
}
.fn-empty-title {
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--fn-text);
    margin: .5rem 0 .35rem;
}
.fn-empty-sub {
    font-size: .9rem;
    color: var(--fn-text-muted);
    line-height: 1.45;
    max-width: 22rem;
}