/* Reserve the permanent row once. Expanding the console still overlays the
   workspace without moving or resizing charts. */
#view-chart { --notification-console-height: 30px; }
#chart-workspace {
    box-sizing: border-box;
    min-height: 0;
    padding-bottom: var(--notification-console-height);
}
html[data-interface-style="desktop"] #chart-workspace {
    padding-bottom: calc(24px + var(--notification-console-height));
}

#notification-console {
    position: absolute;
    z-index: 220;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--notification-console-height);
    min-height: var(--notification-console-height);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #c8cbd3;
    background: #1c1d20;
    border: 1px solid #41444b;
    box-shadow: 0 -6px 22px rgb(0 0 0 / 24%);
    font: 11px/26px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.notification-console-resizer {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    cursor: ns-resize;
    touch-action: none;
}
.notification-console-resizer:hover,
.notification-console-resizer:focus-visible { background: #22aaa2; outline: none; }
.notification-console-header {
    display: flex;
    align-items: center;
    flex: 0 0 28px;
    height: 28px;
    gap: 10px;
    padding: 0 9px;
    border-bottom: 1px solid #35373e;
    box-sizing: border-box;
    background: #25262a;
    font-family: var(--macos-ui-font, sans-serif);
}
.notification-console-title { align-self: stretch; border-bottom: 2px solid #26a69a; padding: 0 8px; color: #eceef2; }
.notification-console-count { color: #8b909e; font-variant-numeric: tabular-nums; }
.notification-console-hint { flex: 1; color: #8b909e; white-space: nowrap; }
.notification-console-preview { display: none; min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, monospace; }
#notification-console[data-collapsed="true"] .notification-console-preview { display: block; }
#notification-console[data-collapsed="true"] .notification-console-hint { display: none; }
/* Filters take the preview's place when expanded: the rows are visible then, and
   the collapsed line has room for exactly one message. */
.notification-console-filters { display: flex; gap: 2px; min-width: 0; overflow: hidden; }
#notification-console[data-collapsed="true"] .notification-console-filters { display: none; }
#notification-console .notification-console-filter { color: #8b909e; }
#notification-console .notification-console-filter[aria-pressed="true"] { color: #eceef2; background: #33363d; box-shadow: inset 0 -2px 0 #26a69a; }
/* Stays on the collapsed line until dismissed, beside the latest message. */
#notification-console .notification-console-errors { color: #ffd6d3; background: #5a2a28; font-variant-numeric: tabular-nums; }
#notification-console .notification-console-errors:hover { background: #733633; color: #fff; }
#notification-console .notification-console-dismiss { color: #ef9e98; }
#notification-console button { flex: 0 0 auto; border: 0; border-radius: 3px; background: transparent; color: #bbc0cd; font: inherit; cursor: pointer; padding: 0 5px; height: 24px; }
#notification-console button:hover { background: #3b3e46; color: #fff; }
#notification-console button:focus-visible { outline: 1px solid #38bfb4; outline-offset: -1px; }
#notification-console button:disabled { opacity: 0.35; cursor: default; }
#notification-console [hidden] { display: none; }
#notification-console .notification-console-new { color: #5ac9bd; }
#notification-console .notification-console-toggle { font-size: 17px; width: 26px; }
.notification-console-viewport { min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; scrollbar-color: #4b4e58 #1c1d20; user-select: text; }
.notification-console-spacer { position: relative; }
.notification-console-rows { position: absolute; top: 0; left: 0; right: 0; }
.notification-console-row { height: 26px; box-sizing: border-box; display: flex; gap: 12px; padding: 0 15px; border-bottom: 1px solid #292b30; }
.notification-console-time { color: #838892; flex: 0 0 58px; font-variant-numeric: tabular-nums; }
.notification-console-message { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#notification-console [data-level="success"] { color: #9fc9b4; }
#notification-console [data-level="warn"] { color: #e7bb73; }
#notification-console [data-level="error"] { color: #ef9e98; }
.notification-console-empty { padding: 0 15px; color: #898e99; }
.notification-console-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
html[data-interface-style="desktop"] #notification-console { left: 24px; right: 24px; bottom: 12px; border-radius: 9px; }
@media (max-width: 900px) {
    /* The desktop workspace scrolls on narrow screens; keep the console pinned. */
    html[data-interface-style="desktop"] #notification-console { position: fixed; }
}
@media (max-width: 560px) {
    html[data-interface-style="desktop"] #chart-workspace {
        padding-bottom: calc(12px + var(--notification-console-height));
    }
    html[data-interface-style="desktop"] #notification-console { left: 12px; right: 12px; bottom: 6px; }
    .notification-console-header { gap: 5px; padding: 0 5px; }
    .notification-console-hint { display: none; }
}