/* ── sw-debug.css ────────────────────────────
   Debug modal styles — extracted from modals.css (v0.37.18).
   Preact component tree: engine, console, network, state, REPL, badge.
   ──────────────────────────────────────────── */

/* ── Debug Modal layout ──────────────────── */

.debug-modal { max-width: 900px; height: 100%; overflow: hidden; }
.debug-tab {
    padding: 8px 12px; background: none; border: none; color: var(--text-3);
    cursor: pointer; font-size: 12px; border-bottom: 2px solid transparent;
    white-space: nowrap; flex-shrink: 0; font-family: var(--font);
    transition: color var(--transition);
}
.debug-tab:hover { color: var(--text-2); }
.debug-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.debug-tab--hidden { display: none; }
.debug-modal-body {
    flex: 1; overflow: hidden; padding: 0 !important;
    display: flex; flex-direction: column; min-height: 0;
}
.debug-tab-content { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* ── Shared ──────────────────────────────── */

.debug-toolbar {
    display: flex; align-items: center; gap: 1rem;
    padding: 6px 12px; border-bottom: 1px solid var(--border);
    font-size: 11px; flex-shrink: 0;
}
.debug-check { display: flex; align-items: center; gap: 4px; color: var(--text-3); cursor: pointer; }
.debug-badge {
    font-size: 10px; background: var(--bg-raised); border: 1px solid var(--border);
    border-radius: 10px; padding: 1px 6px; color: var(--text-3); margin-left: auto;
}
.debug-content {
    flex: 1; overflow-y: auto; padding: 6px;
    font-family: var(--mono); font-size: 11px; line-height: 1.5; min-height: 0;
}
.debug-empty { color: var(--text-3); text-align: center; padding: 2rem; }
.debug-time { color: var(--text-3); opacity: 0.6; font-size: 10px; }
.debug-pre {
    white-space: pre-wrap; word-break: break-all;
    max-height: 200px; overflow: auto; padding: 6px;
    background: rgba(0,0,0,0.2); border-radius: 4px; margin: 4px 0;
}

/* ── Console Tab ─────────────────────────── */

.debug-console-tab { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.debug-entry {
    padding: 1px 6px; border-bottom: 1px solid rgba(128,128,128,0.06);
    white-space: pre-wrap; word-break: break-all;
}
.debug-msg { color: var(--text); }

/* ── Network Tab ─────────────────────────── */

.debug-network-tab { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.debug-net-entry { border-bottom: 1px solid var(--border); }
.debug-net-summary { padding: 6px; cursor: pointer; font-size: 11px; display: flex; align-items: baseline; gap: 4px; }
.debug-net-arrow { font-size: 10px; color: var(--text-3); width: 10px; text-align: center; flex-shrink: 0; }
.debug-net-method { font-weight: bold; color: var(--accent); }
.debug-net-url { color: var(--text); word-break: break-all; flex: 1; }
.debug-net-detail { padding: 6px 12px 6px 20px; font-size: 11px; }

/* ── State Tab ───────────────────────────── */

.debug-state-tab { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.debug-state-pre { max-height: none; margin: 0; }

/* ── REPL Tab ────────────────────────────── */

.debug-repl-tab { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.debug-repl-output {
    flex: 1; overflow-y: auto; padding: 8px;
    font-family: var(--mono); font-size: 12px; min-height: 0;
}
.debug-repl-input {
    border-top: 1px solid var(--border); padding: 8px; flex-shrink: 0;
}
.debug-repl-input input {
    width: 100%; font-family: var(--mono); font-size: 12px;
    background: var(--bg); border: 1px solid var(--border); color: var(--text);
    padding: 6px 8px; border-radius: var(--radius); outline: none;
}
.debug-repl-input input:focus { border-color: var(--accent); }

.repl-entry { padding: 2px 0; }
.repl-entry pre { margin: 0; white-space: pre-wrap; word-break: break-all; }
.repl-entry-input pre { color: var(--accent); }
.repl-entry-result pre { color: var(--text); }
.repl-entry-info { color: var(--text-3); font-size: 11px; }
.repl-entry-error pre { color: var(--danger); }
.repl-entry-stack pre { color: var(--text-3); font-size: 10px; padding-left: 1rem; }

/* ── Footer ──────────────────────────────── */

.debug-modal-footer {
    display: flex; justify-content: space-between; align-items: center;
}
.debug-footer-left, .debug-footer-right { display: flex; gap: 8px; }

/* ── Badge (sidebar bug icon) ────────────── */

.avatar-bug.has-errors {
    animation: debug-pulse 2s infinite;
}
@keyframes debug-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}