/* ===== Header layout addition (groups the logs button + LIVE badge to the right) ===== */
.header-right { display: flex; align-items: center; gap: 10px; }

/* ===== Logs button in header ===== */
.logs-btn {
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.25);
    color: var(--cyan);
    border-radius: 8px;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}
.logs-btn:hover { background: rgba(0, 212, 255, 0.2); transform: translateY(-1px); }
.logs-btn:active { transform: scale(0.92); }
.logs-btn.has-error::after {
    content: ''; position: absolute; top: 4px; right: 4px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--red); box-shadow: 0 0 6px var(--red);
}

/* ===== Bottom-sheet log panel ===== */
.log-panel {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 0;
    background: rgba(8, 8, 14, 0.97);
    border-top: 1px solid var(--gray2);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex; flex-direction: column;
    z-index: 1280;
    transition: height 0.22s ease-out;
    overflow: hidden;
    overscroll-behavior: contain;
}
.log-panel.open {
    height: min(560px, 60dvh);
}

.log-panel-header {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--gray2);
    flex-shrink: 0;
}
.log-panel-title {
    font-size: 11px; font-weight: 900; letter-spacing: 2px; color: var(--cyan);
    display: flex; align-items: center; gap: 6px;
}
.log-panel-spacer { flex: 1; }
.log-panel-pill {
    background: var(--gray2); color: var(--gray);
    border: none; border-radius: 6px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
    padding: 4px 8px;
    cursor: pointer; transition: all 0.15s;
}
.log-panel-pill:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.log-panel-pill.active { background: rgba(0, 212, 255, 0.2); color: var(--cyan); }
.log-panel-close {
    width: 24px; height: 24px; border-radius: 6px;
    background: var(--gray2); border: none; color: var(--gray);
    font-size: 16px; cursor: pointer;
}
.log-panel-close:hover { background: rgba(255, 56, 101, 0.2); color: var(--red); }

/* Filter chip row */
.log-panel-chips {
    display: flex; gap: 6px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--gray2);
    overflow-x: auto;
    flex-shrink: 0;
}
.log-chip {
    background: var(--gray2); color: var(--gray);
    border: 1px solid transparent; border-radius: 999px;
    font-size: 10px; font-weight: 800; letter-spacing: 1px;
    padding: 4px 10px;
    cursor: pointer; transition: all 0.15s;
    white-space: nowrap;
}
.log-chip:hover { color: #fff; }
.log-chip.active             { color: #fff; background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.2); }
.log-chip.lvl-debug.active   { background: rgba(160, 160, 160, 0.15); color: #a0a0a0; border-color: rgba(160,160,160,0.3); }
.log-chip.lvl-info.active    { background: rgba(0, 212, 255, 0.15); color: var(--cyan); border-color: rgba(0,212,255,0.3); }
.log-chip.lvl-warn.active    { background: rgba(255, 209, 102, 0.15); color: var(--gold); border-color: rgba(255,209,102,0.3); }
.log-chip.lvl-error.active   { background: rgba(255, 56, 101, 0.15); color: var(--red); border-color: rgba(255,56,101,0.3); }
.log-chip-count {
    margin-left: 4px;
    font-size: 9px; opacity: 0.7;
    padding: 0 4px; border-radius: 4px;
    background: rgba(255,255,255,0.05);
}

/* Body — monospaced log lines */
.log-panel-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 0;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    line-height: 1.5;
}
.log-panel-body::-webkit-scrollbar { width: 6px; }
.log-panel-body::-webkit-scrollbar-track { background: transparent; }
.log-panel-body::-webkit-scrollbar-thumb { background: var(--gray2); border-radius: 3px; }

.log-empty {
    text-align: center; padding: 40px 20px; color: var(--gray); font-size: 12px;
}

.log-line {
    padding: 1px 14px;
    display: grid;
    grid-template-columns: 70px 50px 110px 1fr;
    column-gap: 10px;
    align-items: baseline;
}
.log-line:hover { background: rgba(255,255,255,0.02); }
.log-line.lvl-error { background: rgba(255, 56, 101, 0.05); }
.log-line.lvl-warn  { background: rgba(255, 209, 102, 0.04); }

.log-line .ts  { color: var(--gray); white-space: nowrap; }
.log-line .lvl { font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; font-size: 9px; }
.log-line .mod { color: var(--gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
.log-line .msg { color: rgba(255,255,255,0.88); word-break: break-word; }

.log-line.lvl-debug .lvl { color: #a0a0a0; }
.log-line.lvl-info  .lvl { color: var(--cyan); }
.log-line.lvl-warn  .lvl { color: var(--gold); }
.log-line.lvl-error .lvl { color: var(--red); }

.log-line.lvl-debug .msg { color: rgba(255,255,255,0.55); }
.log-line.lvl-error .msg { color: var(--red); }
.log-line.lvl-warn  .msg { color: rgba(255, 209, 102, 0.95); }

/* Mobile: compress columns */
@media (max-width: 600px) {
    .log-line {
        grid-template-columns: 60px 1fr;
        grid-template-areas: "ts mod" "lvl msg";
        row-gap: 1px;
    }
    .log-line .ts  { grid-area: ts; }
    .log-line .lvl { grid-area: lvl; }
    .log-line .mod { grid-area: mod; text-align: right; }
    .log-line .msg { grid-area: msg; }
}

/* Pause / Autoscroll indicator */
.log-panel-pill.paused { background: rgba(255, 209, 102, 0.18); color: var(--gold); }