/* Sidebar: nocturne's browser shell column.
   Layout contract: --sb-w is the sidebar width. Everything to its right (dashboard,
   toolbar, page frames, loader, error page) offsets itself by var(--sb-w), so the
   workspace moves as one. anime.js tweens --sb-w (see mo3318.js); the values below
   are the resting states, and labels fade in css so nothing wraps or clips.
   Corners are square everywhere: the system is built from rectangles and hairlines. */

:root { --sb-w: 232px; --row-h: 34px; }
:root[data-sb="collapsed"] { --sb-w: 56px; }

#tabStrip {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sb-w);
    z-index: 51;
    flex-direction: column;
    background: #08070b;
    border-right: 1px solid var(--line);
    overflow: hidden;
}
#tabStrip.visible { display: flex; }

/* labels fade instead of disappearing, so layout never jumps mid-transition */
.tab-title, .sb-app-label, .sb-brand-name, .sb-item span, .online-label, .online-num,
.tab-add span, .sb-kbd, .sb-label, .sb-more-count {
    transition: opacity 0.18s var(--ease);
}
:root[data-sb="collapsed"] :is(.tab-title, .sb-app-label, .sb-brand-name, .sb-item span, .online-label,
    .online-num, .tab-add span, .sb-kbd, .sb-label, .sb-more-count) { opacity: 0; }
:root[data-sb="collapsed"] .tab-title { visibility: hidden; }
:root[data-sb="collapsed"] :is(.tab-close, .sb-pin-btn) { opacity: 0; pointer-events: none; }

/* header */
.sb-head {
    position: relative;
    flex-shrink: 0;
    height: 52px;
    transition: height 0.26s var(--ease-out);
}
:root[data-sb="collapsed"] .sb-head { height: 96px; }

.sb-brand {
    position: absolute;
    left: 8px;
    top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 32px;
    padding: 0 12px;
    color: var(--fg);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.015em;
    white-space: nowrap;
    transition: background 0.15s var(--ease);
}
.sb-brand:hover { background: rgba(255, 255, 255, 0.045); }
.sb-brand svg { width: 16px; height: 16px; flex-shrink: 0; }

.sb-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    color: var(--fg-3);
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.sb-icon-btn svg { width: 16px; height: 16px; stroke-width: 1.5; }
.sb-icon-btn:hover { background: rgba(255, 255, 255, 0.06); color: var(--fg); }
.sb-icon-btn:focus-visible { outline: 2px solid rgba(168, 152, 232, 0.6); outline-offset: -2px; }

#sbToggle {
    position: absolute;
    left: max(13px, calc(var(--sb-w) - 43px));
    top: 11px;
    transition: top 0.26s var(--ease-out), background 0.15s var(--ease), color 0.15s var(--ease);
}
:root[data-sb="collapsed"] #sbToggle { top: 54px; }

/* shared row anatomy: one 34px row, icon column at a fixed x, so collapsing never moves icons */
.tab-item, .tab-add, .sb-item, .sb-app, .sb-pin, .online-chip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--row-h);
    flex-shrink: 0;
    padding: 0 12px;
    color: var(--fg-2);
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
    text-decoration: none;
    user-select: none;
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.tab-item svg, .tab-add svg, .sb-item svg, .sb-app svg, .sb-pin svg {
    width: 16px; height: 16px; flex-shrink: 0; stroke-width: 1.5; color: var(--fg-3);
    transition: color 0.15s var(--ease);
}
.tab-add:hover, .sb-item:hover, .sb-app:hover, .sb-pin:hover {
    background: rgba(255, 255, 255, 0.045);
    color: var(--fg);
}
.tab-add:hover svg, .sb-item:hover svg, .sb-app:hover svg, .sb-pin:hover svg { color: var(--fg-2); }
:is(.tab-item, .tab-add, .sb-item, .sb-app, .sb-pin, .sb-more-btn):focus-visible {
    outline: 2px solid rgba(168, 152, 232, 0.6);
    outline-offset: -2px;
}

/* pinned applications */
.sb-pins {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex-shrink: 0;
    padding: 0 8px 8px;
    border-bottom: 1px solid var(--line);
}
.sb-pins[hidden] { display: none; }
.sb-pin { width: 36px; padding: 0; justify-content: center; }

/* tabs */
.tab-list {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

.tab-pins { display: flex; flex-wrap: wrap; gap: 4px; position: relative; z-index: 1; }
.tab-pins:not(:empty) { padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.tab-list.dragging .tab-pins:empty {
    min-height: 36px;
    margin-bottom: 6px;
    border: 1px dashed var(--line-3);
}

.tab-item { z-index: 1; padding-right: 6px; cursor: pointer; }
.tab-item:hover:not(.active) { background: rgba(255, 255, 255, 0.045); color: var(--fg); }
.tab-pin { flex: 0 0 36px; justify-content: center; padding: 0; }
.tab-item.active { color: var(--fg); }

/* the sliding active-tab indicator: one surface that travels between rows */
.tab-ind {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: var(--row-h);
    background: rgba(255, 255, 255, 0.07);
    pointer-events: none;
    opacity: 0;
    z-index: 0;
    will-change: transform, width;
}
.tab-ind::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--accent);
}
/* without anime.js the indicator never exists, so the row itself carries the state */
html:not([data-motion]) .tab-item.active { background: rgba(255, 255, 255, 0.07); }

.tab-favicon { width: 16px; height: 16px; flex-shrink: 0; object-fit: contain; }
.tab-favicon.tf-hide { visibility: hidden; }
.tab-favicon-blank { display: flex; align-items: center; justify-content: center; color: var(--fg-3); }
.tab-favicon-blank svg { width: 16px; height: 16px; stroke-width: 1.5; }

.tab-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tab-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--fg-3);
    opacity: 0;
    transition: opacity 0.15s var(--ease), background 0.15s var(--ease), color 0.15s var(--ease);
}
.tab-item:hover .tab-close, .tab-item.active .tab-close, .tab-item:focus-within .tab-close { opacity: 1; }
.tab-close:hover { background: rgba(255, 255, 255, 0.1); color: var(--fg); }

.tab-add {
    position: sticky;
    bottom: 0;
    width: 100%;
    margin-top: 4px;
    z-index: 2;
    background: #08070b;
    color: var(--fg-3);
}
.sb-kbd { margin-left: auto; color: var(--fg-3); font-family: inherit; font-size: 11px; opacity: 0; }
.tab-add:hover .sb-kbd, .tab-add:focus-visible .sb-kbd { opacity: 1; }
:root[data-sb="collapsed"] .tab-add:hover .sb-kbd { opacity: 0; }

/* applications */
.sb-apps {
    flex-shrink: 0;
    padding: 0 8px 8px;
    border-top: 1px solid var(--line);
}
.sb-label {
    display: flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    color: var(--fg-3);
    font-size: 12px;
    font-weight: 500;
}
.sb-app-list { display: flex; flex-direction: column; gap: 2px; }
.sb-app-row { position: relative; display: flex; flex-direction: column; }
.sb-app { width: 100%; background: transparent; border: 0; cursor: pointer; text-align: left; }

.sb-pin-btn {
    position: absolute;
    right: 5px;
    top: 5px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fg-3);
    opacity: 0;
    transition: opacity 0.15s var(--ease), background 0.15s var(--ease), color 0.15s var(--ease);
}
.sb-pin-btn svg { width: 14px; height: 14px; stroke-width: 1.5; }
.sb-app-row:hover .sb-pin-btn, .sb-app-row:focus-within .sb-pin-btn { opacity: 1; }
.sb-pin-btn:hover { background: rgba(255, 255, 255, 0.1); color: var(--fg); }

.sb-more-btn { margin-top: 2px; }
.sb-more-btn[hidden] { display: none; }
.sb-more-btn[aria-expanded="true"] { background: rgba(255, 255, 255, 0.07); color: var(--fg); }
.sb-more-count { margin-left: auto; color: var(--fg-3); font-size: 11px; font-variant-numeric: tabular-nums; }

/* more menu: an extension of the sidebar, same surface and hairline */
.sb-more {
    position: fixed;
    z-index: 2147482150;
    width: 220px;
    padding: 6px;
    overflow-y: auto;
    background: #08070b;
    border: 1px solid var(--line-2);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}
.sb-more[hidden] { display: none; }
.sb-more .sb-app-label { opacity: 1; }

/* footer */
.sb-foot {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    border-top: 1px solid var(--line);
}
.online-chip { height: 28px; color: var(--fg-3); font-size: 12px; }
.online-dot { width: 6px; height: 6px; margin: 0 5px; flex-shrink: 0; background: #6fcf97; }
.online-num { color: var(--fg-2); font-variant-numeric: tabular-nums; font-weight: 500; }
.online-chip .online-label { margin-left: -6px; }

/* drag and drop reorder */
.tab-item.dragging { opacity: 0.4; }
.tab-item.drop-before::after, .tab-item.drop-after::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    height: 2px;
    background: var(--accent);
    pointer-events: none;
}
.tab-item.drop-before::after { top: -3px; }
.tab-item.drop-after::after { bottom: -3px; }
.tab-pin.drop-before::after, .tab-pin.drop-after::after { left: auto; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; }
.tab-pin.drop-before::after { left: -3px; }
.tab-pin.drop-after::after { right: -3px; }

/* tooltip + context menu */
.sb-tip {
    position: fixed;
    z-index: 2147482100;
    max-width: 260px;
    padding: 5px 9px;
    background: #17161c;
    border: 1px solid var(--line-2);
    color: var(--fg);
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s var(--ease);
}
.sb-tip.visible { opacity: 1; }

.tab-menu {
    position: fixed;
    z-index: 2147482200;
    min-width: 188px;
    padding: 4px;
    background: #121117;
    border: 1px solid var(--line-2);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
.tab-menu button {
    display: flex;
    align-items: center;
    width: 100%;
    height: 30px;
    padding: 0 10px;
    color: var(--fg-2);
    font-family: inherit;
    font-size: 13px;
    text-align: left;
}
.tab-menu button:hover:not(:disabled), .tab-menu button:focus-visible { background: rgba(255, 255, 255, 0.07); color: var(--fg); outline: 0; }
.tab-menu button:disabled { opacity: 0.38; cursor: default; }
.tab-menu hr { margin: 4px 6px; border: 0; border-top: 1px solid var(--line); }

/* the island is global chrome: keep it centred over the workspace, not the viewport */
html .noc-top, html #nocTopZone { left: calc(50% + var(--sb-w, 0px) / 2); }

/* while a page is open the island rests out of sight (hover the top edge to bring
   it back), so it never sits on top of the address bar */
body.browsing .noc-top:not(.nt-hot):not([data-open="true"]) { opacity: 0; }
body.browsing #nocTopZone { height: 6px; }

/* small screens: the sidebar becomes a drawer opened from a menu button */
.sb-fab, .sb-scrim { display: none; }

@media (max-width: 720px) {
    :root, :root[data-sb="collapsed"] { --sb-w: 0px; }
    #tabStrip {
        width: 272px;
        transform: translateX(-100%);
        transition: transform 0.22s var(--ease-out);
        z-index: 2147482300;
    }
    :root[data-sb-open] #tabStrip { transform: none; box-shadow: 24px 0 60px rgba(0, 0, 0, 0.5); }
    #sbToggle { left: auto; right: 10px; }
    .sb-head, :root[data-sb="collapsed"] .sb-head { height: 52px; }
    :root[data-sb="collapsed"] #sbToggle { top: 11px; }
    .sb-fab {
        position: fixed;
        top: 8px;
        left: 8px;
        z-index: 2147482000;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        color: var(--fg-2);
        background: rgba(13, 12, 17, 0.9);
        border: 1px solid var(--line-2);
    }
    .sb-fab svg { width: 18px; height: 18px; stroke-width: 1.5; }
    .sb-scrim {
        position: fixed;
        inset: 0;
        z-index: 2147482250;
        background: rgba(0, 0, 0, 0.55);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s var(--ease);
    }
    :root[data-sb-open] .sb-scrim { display: block; opacity: 1; pointer-events: auto; }
    :root[data-sb-open] :is(.weather-chip, .weather-panel, .noc-top, #nocTopZone) { visibility: hidden; }
    .tab-close, .sb-pin-btn { opacity: 1; }
    html .noc-top, html #nocTopZone { left: 50%; }
    .sb-more { left: 280px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .sb-head, #sbToggle, #tabStrip, .sb-scrim { transition: none; }
}