/**
 * 会议列表页 - 进行中会议卡片
 * 包含: 活动卡片、实时指标、操作按钮
 */

/* ========== 进行中会议卡片 ========== */
.active-meeting-card {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    box-shadow: var(--shadow-md), var(--shadow-glow);
    border: 1px solid var(--brand-primary-border);
    position: relative;
    min-width: 0;
}

.active-meeting-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--color-success);
    border-radius: 3px 0 0 3px;
}

.active-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.active-card-info {
    flex: 1;
    min-width: 0;
}

.active-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-900);
    margin-bottom: var(--space-1);
}

.active-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-size: 13px;
    color: var(--neutral-500);
}

.active-card-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ========== 实时指标 ========== */
.live-metrics {
    display: flex;
    gap: var(--space-6);
    padding: var(--space-4);
    background: var(--neutral-50);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.metric-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.metric-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.metric-icon.time { background: var(--color-warning-soft); color: var(--color-warning); }
.metric-icon.words { background: var(--color-success-soft); color: var(--color-success); }
.metric-icon.accuracy { background: var(--brand-primary-soft); color: var(--brand-primary); }

.metric-data {
    display: flex;
    flex-direction: column;
}

.metric-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--neutral-800);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.metric-label {
    font-size: 11px;
    color: var(--neutral-500);
}

.active-card-actions {
    display: flex;
    gap: var(--space-2);
}

.btn-enter {
    flex: 1;
    background: var(--color-success);
    color: white;
}

.btn-enter:hover {
    background: #047857;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
}

/* ========== 响应式 ========== */
@media (max-width: 768px) {
    .live-metrics {
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    .metric-item {
        min-width: calc(50% - var(--space-2));
    }
}

@media (max-width: 480px) {
    .active-card-actions {
        flex-direction: column;
    }

    .active-card-actions .btn {
        width: 100%;
    }
}

/* ========== 多会议 Grid 布局 ========== */
.active-meeting-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: var(--space-4);
}

@media (max-width: 768px) {
    .active-meeting-grid {
        grid-template-columns: 1fr;
    }
}

/* ========== Section Header ========== */
.active-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.active-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.active-section-title h2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-800);
    margin: 0;
}

.active-section-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.session-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    background: var(--neutral-100);
    color: var(--neutral-500);
}

.session-count-badge.at-limit {
    background: var(--color-limit-soft);
    color: var(--color-warning-dark);
}

@media (max-width: 480px) {
    .active-section-header {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .active-section-actions {
        width: 100%;
    }
}

/* ========== 资格徽章 ========== */
.eligibility-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
}

.eligibility-badge.mine {
    background: var(--color-mine-soft);
    color: var(--brand-primary);
}

.eligibility-badge.joinable {
    background: var(--color-joinable-soft);
    color: var(--color-success-dark);
}

.eligibility-badge.invite-only {
    background: var(--color-invite-only-soft);
    color: var(--color-warning-dark);
}

.eligibility-badge.unavailable {
    background: var(--color-unavailable-soft);
    color: var(--neutral-500);
}

/* ========== Owner 头像 ========== */
.owner-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ai-gradient);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

.owner-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--neutral-500);
}

/* ========== 联系主办方行（展开式） ========== */
.contact-host-row {
    max-height: 0;
    overflow: hidden;
    transition: max-height 200ms ease-out, padding 200ms ease-out;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 13px;
    color: var(--neutral-600);
    border-top: 1px solid transparent;
    padding: 0 var(--space-5);
}

.contact-host-row.expanded {
    max-height: 60px;
    padding: var(--space-3) var(--space-5);
    border-top-color: var(--neutral-100);
}

.contact-host-row a {
    color: var(--brand-primary);
    text-decoration: none;
}

.contact-host-row a:hover {
    text-decoration: underline;
}

/* ========== 卡片弱化态（不可加入） ========== */
.active-meeting-card.dimmed::before {
    background: var(--neutral-300);
}

.active-meeting-card.dimmed {
    box-shadow: var(--shadow-xs);
    border-color: var(--neutral-200);
}

.active-meeting-card.dimmed .live-metrics {
    opacity: 0.5;
}

/* ========== 卡片状态竖条变体 ========== */
.active-meeting-card.status-paused::before {
    background: var(--color-warning);
}

.active-meeting-card.status-error::before {
    background: var(--color-danger);
}

/* ========== 入场/退场动画 ========== */
@keyframes card-enter {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.active-meeting-grid .active-meeting-card {
    animation: card-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.active-meeting-grid .active-meeting-card:nth-child(2) { animation-delay: 80ms; }
.active-meeting-grid .active-meeting-card:nth-child(3) { animation-delay: 160ms; }

@keyframes card-exit {
    to { opacity: 0; transform: translateY(-8px) scale(0.97); }
}

.active-meeting-card.exiting {
    animation: card-exit 250ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    pointer-events: none;
}

/* ========== 指标更新闪烁 ========== */
@keyframes value-flash {
    0%   { color: var(--brand-primary); }
    100% { color: var(--neutral-800); }
}

.metric-value.updated {
    animation: value-flash 400ms ease;
}

/* ========== Title Row 对齐（标题 + 徽章） ========== */
.active-meeting-card .title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-width: 0;
}

.active-meeting-card .meeting-name-container {
    flex: 1 1 180px;
    min-width: 0;
}

.active-meeting-card .meeting-name-text {
    min-width: 0;
    overflow-wrap: anywhere;
}