/* ── Hide native scrollbars completely ──────────────────────────── */
html, body { overflow-x: hidden; }
html        { scrollbar-width: none; }
::-webkit-scrollbar { display: none; }

/* The Start / Resume button is wrapped in `.mm-start-actions`
   (see `central-screen.css`). The wrapper docks bottom-left and stacks
   the privacy balloon above the button. No positioning override here. */

/* ── Left chrome wrapper ─────────────────────────────────────────── *
   Single position:fixed column; CSS flex + gap guarantees equal
   spacing between favicon, progress track, and nav.
   top / opacity set by JS.                                           */
#az-chrome {
    position:       fixed;
    left:           7px;
    bottom:         7px;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            0;
    z-index:        1500;
    pointer-events: none;
}

/* ── Favicon button ──────────────────────────────────────────────── */
#az-favicon {
    flex-shrink:     0;
    width:           44px;
    height:          44px;
    padding:         0;
    background:      #fff;
    border:          1px solid #dedede;
    border-radius:   10px;
    box-shadow:      0 1px 4px rgba(0, 0, 0, 0.08);
    cursor:          pointer;
    overflow:        hidden;
    pointer-events:  auto;
}
#az-favicon img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}
#az-favicon:hover img { transform: scale(1.12); }

/* ── Progress track ──────────────────────────────────────────────── */
#az-progress {
    /* `flex: 1` fills whatever vertical space the chrome's top/bottom
       anchoring leaves between #az-favicon and .krskrt-mm-nav. This stays
       correct at every aspect ratio — even at squarer ones where body's
       autozoom2 ratio drops below 1, which (Chromium quirk) visually
       scales fixed-positioned children too. A previous attempt using
       `height: calc(100vh - 153px)` evaluated vh in body's pre-zoom
       CSS pixels and undershot the actually-rendered chrome height at
       zoom < 1. flex sidesteps that entirely by referencing the parent's
       used height directly. */
    flex:           1;
    width:          44px;
    min-height:     24px;
    margin-bottom:  7px;
    position:       relative;
    pointer-events: none;
}
#az-progress-thumb {
    position:        absolute;
    left:            50%;
    transform:       translateX(-50%);
    width:           22px;
    height:          80px;
    background:      rgba(0, 55, 74, 0.40);
    border-radius:   5px;
    transition:      top 0.1s linear;
    pointer-events:  auto;
    cursor:          grab;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             5px;
    overflow:        hidden;
}
#az-progress-thumb:active { cursor: grabbing; }
#az-progress-thumb .ph {
    font-size:      13px;
    color:          #00374a;
    pointer-events: none;
    line-height:    1;
    display:        block;
}

/* ── .krskrt-mm-nav inside #az-chrome ───────────────────────────── */
/* Pinned to 88 px (the natural 2-button stack height) so the chrome
   above — #az-progress and its ::after end-cap — never shifts when
   the nav collapses to a single button (.is-solo). All buttons dock
   to the bottom by default (justify-content: flex-end); the LAST
   button is then pulled up to the top via `margin-bottom: auto` (see
   the :last-child rule below).

   The wrapper itself has no background or shadow — those live on the
   buttons (see .krskrt-mm-nav-btn below) so empty space inside the
   88 px box never gets a phantom shadowed outline. */
#az-chrome > .krskrt-mm-nav {
    flex-shrink:     0;
    display:         flex;
    flex-direction:  column;
    justify-content: flex-end;
    height:          88px;
    width:           44px;
    pointer-events:  auto;
}
#az-chrome > .krskrt-mm-nav .krskrt-mm-nav-btn {
    width:            44px;
    height:           44px;
    padding:          0;
    background:       #fff;
    color:            #00374a;
    border:           1px solid #dedede;
    box-shadow:       0 1px 4px rgba(0, 0, 0, 0.08);
    cursor:           pointer;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    transition:       background 0.15s, color 0.15s;
}
#az-chrome > .krskrt-mm-nav .krskrt-mm-nav-btn:hover { background: #00a9bb; }
#az-chrome > .krskrt-mm-nav .krskrt-mm-nav-btn svg   { display: block; flex-shrink: 0; }
#az-chrome > .krskrt-mm-nav .krskrt-mm-nav-btn--up {
    /* Up/prev always docks at the TOP of the 88 px box. Auto bottom
       margin absorbs free space and floats the button toward the top
       (flex-start). When both buttons are visible (44+44=88, no free
       space) the auto margin collapses to 0 and the natural order
       wins — up on top, down underneath. */
    margin-bottom: auto;
    border-radius: 10px 10px 0 0;
    border-bottom: none;
}
#az-chrome > .krskrt-mm-nav .krskrt-mm-nav-btn--down {
    /* Down/next always docks at the BOTTOM. Mirror of --up: auto top
       margin pushes the button toward flex-end. With the .is-solo
       case (only one of the two visible) the surviving button keeps
       its semantic position regardless of which DOM child it is. */
    margin-top: auto;
    border-radius: 0 0 10px 10px;
}
#az-chrome > .krskrt-mm-nav.is-solo .krskrt-mm-nav-btn {
    height:        44px;
    border:        1px solid #dedede;
    border-radius: 10px;
}

/* ── Part-dot indicators ─────────────────────────────────────────── */
/* Thumb renders above dots */
#az-progress-thumb { z-index: 1; }

.az-part-dot {
    position:       absolute;
    left:           50%;
    transform:      translateX(-50%) translateY(-50%) scale(1);
    width:          18px;
    height:         18px;
    border-radius:  50%;
    background:     rgba(0, 55, 74, 0.15);
    border:         none;
    box-sizing:     border-box;
    pointer-events: auto;
    cursor:         pointer;
    transition:     background 0.15s, transform 0.18s ease;
    z-index:        1;
}
.az-part-dot:hover {
    background:  rgba(0, 55, 74, 0.30);
    transform:   translateX(-50%) translateY(-50%) scale(1.35);
}
.az-part-dot.is-active {
    background: rgba(0, 55, 74, 0.50);
}

/* Boundary-crossing pulse — fired by central-screen.js::pulseAzDot() each
   time the active section changes via scroll. Scale 1 → 1.6 → 1 over 400 ms
   while preserving the translate(-50%) centring transform. */
@keyframes mm-dot-pulse {
    0%   { transform: translateX(-50%) translateY(-50%) scale(1);   }
    40%  { transform: translateX(-50%) translateY(-50%) scale(1.6); }
    100% { transform: translateX(-50%) translateY(-50%) scale(1);   }
}
.az-part-dot--pulse { animation: mm-dot-pulse 0.4s ease-out; }

/* ── Horizontal end-cap at bottom of #az-progress ───────────────── */
#az-progress::after {
    content:       '';
    position:      absolute;
    bottom:        0;
    left:          50%;
    transform:     translateX(-50%);
    width:         18px;
    height:        2px;
    background:    rgba(0, 55, 74, 0.12);
    border-radius: 1px;
}

/* ── Segment lines between dots ─────────────────────────────────── */
.az-part-line {
    position:       absolute;
    left:           50%;
    transform:      translateX(-50%);
    width:          2px;
    background:     rgba(0, 55, 74, 0.12);
    pointer-events: none;
    z-index:        0;
}

/* Tooltip — slides in to the right of the track (#az-chrome is at left:7px) */
.az-part-dot-tip {
    position:       absolute;
    left:           calc(100% + 10px);
    top:            50%;
    transform:      translateY(-50%) translateX(-4px);
    background:     rgba(0, 55, 74, 0.90);
    color:          #fff;
    font-size:      12px;
    line-height:    1.3;
    white-space:    nowrap;
    max-width:      180px;
    overflow:       hidden;
    text-overflow:  ellipsis;
    padding:        5px 9px;
    border-radius:  5px;
    pointer-events: none;
    opacity:        0;
    transition:     opacity 0.18s ease, transform 0.18s ease;
    z-index:        10;
}
.az-part-dot:hover .az-part-dot-tip {
    opacity:   1;
    transform: translateY(-50%) translateX(0);
}