/* ----- БЛОК ЛОГОВ (СКРОЛЛИРУЕМЫЙ) ----- */
.logs {
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    max-height: 130px;
    overflow-y: auto;
    padding: 12px 16px;
    margin: 10px 0 20px;
    scroll-behavior: smooth;
}

/* Стилизация скроллбара */
.logs::-webkit-scrollbar {
    width: 6px;
}
.logs::-webkit-scrollbar-track {
    background: #1c262f;
    border-radius: 4px;
}
.logs::-webkit-scrollbar-thumb {
    border-radius: 4px;
}

.logs .log-line {
    font-size: 13px;
    color: #6b7a8a;
    padding: 2px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    display: flex;
    gap: 12px;
    opacity: 0;
    animation: fadeInLog 0.4s forwards;
}

.logs .log-line .time {
    color: #5a6a7a;
    min-width: 70px;
    flex-shrink: 0;
}
.logs .log-line .msg {
    color: #c8d0d9;
}
.logs .log-line .msg .hl-rose {
    color: var(--color-rose);
}
.logs .log-line .msg .hl-red {
    color: var(--color-red);
}
.logs .log-line .msg .hl-orange {
    color: var(--color-orange);
}
.logs .log-line .msg .hl-yellow-2 {
    color: var(--color-yellow-2);
}
.logs .log-line .msg .hl-yellow {
    color: var(--color-yellow);
}
.logs .log-line .msg .hl-green {
    color: var(--color-green);
}
.logs .log-line .msg .hl-teal {
    color: var(--color-teal);
}
.logs .log-line .msg .hl-cyan {
    color: var(--color-cyan);
}
.logs .log-line .msg .hl-purple {
    color: var(--color-purple);
}
.logs .log-line .msg .hl-pink {
    color: var(--color-pink);
}

@keyframes fadeInLog {
    to { opacity: 1; }
}

/* ----- АДАПТИВНОСТЬ ----- */
@media (max-width: 768px) {
    .logs-wrapper {
        max-height: 120px;
    }
    .logs {
        max-height: 120px;
        padding: 10px 12px;
    }
    .logs .log-line {
        font-size: 12px;
        flex-wrap: wrap;
        gap: 6px;
    }
    .logs .log-line .time {
        min-width: 60px;
        font-size: 11px;
    }
}
@media (max-width: 480px) {
    .logs-wrapper {
        max-height: 100px;
    }
    .logs .log-line {
        font-size: 11px;
    }
    .logs .log-line .time {
        min-width: 50px;
        font-size: 10px;
    }
}