.debugPanel {
    width: 100%;
    flex: 0 0 256px;
    min-height: 256px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--c-surface-glass);
    border: var(--border-2) solid var(--c-border);
    border-radius: var(--radius-1);
    box-shadow: var(--shadow-1);
}

.debugPanel[hidden] {
    display: none;
}

.debugPanel__header {
    flex: 0 0 auto;
    height: var(--header);
    min-height: 0;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 var(--pad-2);
    border-bottom: var(--border-1) solid var(--c-border);
    background: transparent;
}

.debugPanel__title {
    margin: 0;
    color: var(--c-font);
    font: var(--font-title);
    text-transform: uppercase;
    letter-spacing: var(--title-letter-spacing);
}

.debugPanel__copyButton,
.debugPanel__clearButton {
    min-height: var(--btn-slim-h);
    padding: 0 var(--pad-1);
    box-shadow: none;
}

.debugPanel__copyButton {
    margin-left: auto;
    border-radius: var(--radius-3) 0 0 var(--radius-3);
}

.debugPanel__clearButton {
    color: var(--c-danger);
    border-left-width: 0;
    border-radius: 0;
}

.debugPanel__clearButton:hover,
.debugPanel__clearButton:focus-visible {
    position: relative;
    z-index: 1;
    color: var(--c-danger);
    border-color: var(--c-danger);
    background: color-mix(in srgb, var(--c-danger) 12%, var(--c-surface-interactive));
}

.debugPanel__iconButton {
    width: var(--btn-slim-h);
    min-width: var(--btn-slim-h);
    min-height: var(--btn-slim-h);
    padding: 0;
    border-left-width: 0;
    border-radius: 0 var(--radius-3) var(--radius-3) 0;
    box-shadow: none;
}

.debugPanel__copyButton:hover,
.debugPanel__iconButton:hover {
    position: relative;
    z-index: 1;
}

.debugPanel__buttonIcon {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: block;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

.debugPanel__minimizeButton .debugPanel__buttonIcon {
    mask-image: url("../../../public/assets/icons/panels/minimize.svg");
    -webkit-mask-image: url("../../../public/assets/icons/panels/minimize.svg");
}

.appShell.is-debug-console-collapsed .debugPanel {
    flex-basis: calc(var(--header) + (var(--border-2) * 2));
    min-height: calc(var(--header) + (var(--border-2) * 2));
}

.appShell.is-debug-console-collapsed .debugPanel__header {
    border-bottom: 0;
}

.appShell.is-debug-console-collapsed .debugPanel__body {
    display: none;
}

.appShell.is-debug-console-collapsed .debugPanel__minimizeButton .debugPanel__buttonIcon {
    mask-image: url("../../../public/assets/icons/panels/maximize.svg");
    -webkit-mask-image: url("../../../public/assets/icons/panels/maximize.svg");
}

.debugPanel__body {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    padding: var(--pad-2);
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
    color: var(--c-font-muted);
    font: var(--font-console);
    display: block;
}

.debugConsole__empty {
    color: var(--c-font-muted);
    font: var(--font-console);
}

.debugConsole__entry {
    display: grid;
    grid-template-columns: auto var(--border-1) minmax(0, 1fr);
    align-items: start;
    background: var(--c-surface-glass);
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

.debugConsole__entry + .debugConsole__entry {
    margin-top: var(--gap-1);
}

.debugConsole__entry--error {
    border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-border));
}

.debugConsole__entry--warning {
    border-color: color-mix(in srgb, var(--c-accent) 28%, var(--c-border));
}

.debugConsole__time {
    color: var(--c-font-muted);
    font: var(--font-console);
    font-family: var(--font-numeric);
    white-space: nowrap;
    display: block;
}

.debugConsole__badge {
    display: block;
    color: var(--c-console-level-info);
    font: var(--font-console);
    font-family: var(--font-code);
    text-transform: uppercase;
    letter-spacing: var(--title-letter-spacing);
}

.debugConsole__metaSection {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: 1px;
    min-width: 72px;
    padding: var(--pad-1);
}

.debugConsole__divider {
    grid-column: 2;
    align-self: stretch;
    width: var(--border-1);
    background: var(--c-border);
}

.debugConsole__entry--action .debugConsole__badge {
    color: var(--c-console-level-action);
}

.debugConsole__entry--warning .debugConsole__badge {
    color: var(--c-console-level-warning);
}

.debugConsole__entry--error .debugConsole__badge {
    color: var(--c-console-level-error);
}

.debugConsole__entry--system .debugConsole__badge {
    color: var(--c-console-level-system);
}

.debugConsole__contentSection {
    grid-column: 3;
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 1px;
    padding: var(--pad-1);
}

.debugConsole__message {
    min-width: 0;
    color: var(--c-font);
    font: var(--font-console);
    word-break: break-word;
}

.debugConsole__meta {
    min-width: 0;
    color: var(--c-font-muted);
    font: var(--font-console);
    word-break: break-word;
}