/* -- The icon rail down the side of the file panel. Shared by the Editor (four tabs:
      files, version history, comments, tasks) and the Viewer (files alone) so one icon
      strip looks and behaves the same on both. -- */
/* Icon-only tab rail (files / version history / comments / tasks). Icons rather
   than labels because the whole strip is 38px wide — the accessible name lives in
   each button's title/aria-label. The active tab is marked by an accent bar on the
   panel-facing edge, the same visual language VS Code's activity bar uses; on
   mobile the rail turns into a horizontal row (see media query). */
.panel-rail {
    width: 38px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center;
    gap: 2px; padding-top: 6px;
    border-right: 1px solid var(--border); background: transparent;
}
.panel-rail-btn {
    position: relative; width: 34px; height: 34px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; padding: 0; border-radius: 7px;
    color: var(--text-dim); cursor: pointer; transition: color .15s, background .15s;
}
.panel-rail-btn:hover { color: var(--text); background: var(--panel-alt); }
.panel-rail-btn.active { color: var(--accent); }
.panel-rail-btn.active::before {
    content: ''; position: absolute; right: -2px; top: 6px; bottom: 6px;
    width: 2px; border-radius: 2px; background: var(--accent);
}
.panel-rail-btn[hidden] { display: none; }
/* Unread-style count for comments/tasks — deliberately just a number of *open*
   items, so a document with everything resolved shows nothing at all. */
.panel-rail-badge {
    position: absolute; top: 2px; right: 1px; min-width: 14px; height: 14px; padding: 0 3px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 7px; background: var(--accent); color: var(--bg);
    font-family: var(--mono); font-size: 9px; font-weight: 700; line-height: 1;
}
.panel-rail-badge[hidden] { display: none; }

@media (max-width: 768px) {
/* The file panel's tab rail stays put in the column-reverse stack (so it
       keeps landing near the bottom, right above the format toolbar — simplest
       to reach with a thumb); the body, once expanded, becomes a left-edge
       overlay instead of pushing the editor/preview out of the way. top/bottom
       are set via JS (fitAppHeight) to match the same header/footer band as
       everything else. The rail itself switches from a tall vertical column
       (fine on desktop, where it just needs to fit the header/footer band) to a
       short horizontal bar — otherwise it eats into the limited vertical space
       of the stacked mobile layout, and its active-tab marker moves from the
       right edge to the top edge along with it. */
    .files-panel { border-right: none; border-top: 1px solid var(--border); }
    .panel-rail {
        flex-direction: row; width: 100%; height: 40px;
        padding: 0 8px; gap: 4px; justify-content: flex-start; align-items: center;
        border-right: none;
    }
    .panel-rail-btn.active::before {
        top: -1px; bottom: auto; left: 6px; right: 6px;
        width: auto; height: 2px;
    }
}