/* ==========================================
   连接诊断面板
   ========================================== */

.diag-toggle-btn {
    width: 100%;
    padding: 6px var(--space-sm);
    background: transparent;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    border-top: 1px solid rgba(255,255,255,0.05);
    transition: color var(--transition-fast);
}
.diag-toggle-btn:hover {
    color: var(--text-normal);
    background: var(--bg-hover);
}

.connection-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: rgba(0,0,0,0.15);
    border-top: 1px solid rgba(255,255,255,0.05);
    font-size: var(--font-size-sm);
}
.connection-panel.open {
    max-height: 500px;
    overflow-y: auto;
}

.connection-panel-inner {
    padding: var(--space-sm) var(--space-md);
}

/* 本机网络 */
.local-net-info {
    margin-bottom: var(--space-sm);
}
.diag-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    padding: 2px 0;
    color: var(--text-muted);
    font-size: 0.72rem;
}
.diag-label {
    width: 40px;
    flex-shrink: 0;
    font-weight: 600;
    color: var(--text-muted);
}
.diag-value {
    color: var(--text-normal);
    font-family: 'Consolas', monospace;
}

/* 摘要行 */
.diag-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: var(--space-xs) 0 var(--space-sm) 0;
    font-size: 0.72rem;
    color: var(--text-muted);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    margin-bottom: var(--space-xs);
}
.diag-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.diag-dot.p2p    { background: var(--success); }
.diag-dot.relay  { background: var(--warning); }
.diag-dot.unknown { background: var(--text-muted); }

.diag-empty {
    padding: var(--space-sm) 0;
    color: var(--text-muted);
    font-size: 0.72rem;
    text-align: center;
}

/* 每对端条目 */
.diag-peer {
    padding: var(--space-xs) 0;
    border-bottom: 1px solid rgba(255,255,255,0.02);
}
.diag-peer:last-child {
    border-bottom: none;
}

.diag-peer-top {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.75rem;
}

.diag-peer-status {
    font-size: 0.6rem;
    flex-shrink: 0;
}
.diag-peer-status.connected    { color: var(--success); }
.diag-peer-status.checking     { color: var(--warning); }
.diag-peer-status.new          { color: var(--text-muted); }
.diag-peer-status.disconnected { color: var(--danger); }
.diag-peer-status.failed       { color: var(--danger); }

.diag-peer-name {
    color: var(--text-normal);
    font-weight: 600;
}

.diag-rtt {
    font-size: 0.65rem;
    padding: 0 4px;
    border-radius: 2px;
    font-family: 'Consolas', monospace;
}
.diag-rtt.good { color: var(--success); }
.diag-rtt.ok   { color: var(--warning); }
.diag-rtt.poor { color: var(--danger); }

.diag-conn-type {
    font-size: 0.65rem;
    padding: 1px 5px;
    border-radius: 2px;
    white-space: nowrap;
}
.diag-conn-type.p2p  { background: rgba(35,165,89,0.15);  color: var(--success); }
.diag-conn-type.relay { background: rgba(240,178,50,0.15); color: var(--warning); }
.diag-conn-type.unknown { color: var(--text-muted); }

/* 对端 IP 信息 */
.diag-peer-info {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
    margin-left: 18px;
    font-size: 0.65rem;
}
.diag-ip {
    color: var(--text-muted);
    font-family: 'Consolas', monospace;
}
.diag-value.dim,
.diag-ip.dim { opacity: 0.5; }