/*
 * THE ACCOUNT CHIP at the left of the drawer's bottom bar (Joe (ccsliinc),
 * 2026-09-30: "user circle with letter and name with the chevron which opens
 * up a menu with the help an layouts and settings. we can move the version to
 * the right."), drawn by web/src/lib/drawer/bar.ts. It opens the account menu
 * (web/src/lib/drawer-hud/AccountMenu.svelte, a CascadeMenu placed ABOVE it)
 * that holds settings, edit layout, help, master all and log out, the buttons
 * this bar used to carry.
 *
 * THE MILITARY TERMINAL LOOK, NOT CLAUDE'S. A quiet row at rest: the 22px
 * square hairline avatar (the member's identicon, or the lurker's anonymous silhouette), the
 * name in the secondary ink (the CATALOG account's handle, or "SysOp", never the provider
 * account and never an email; Adam (Adoom666), 2026-09-30), a small dim chevron. Hover takes the shared hover ground; open, the chevron turns and
 * the name brightens. Focus is the shared rule (web/src/opscenter/focus.css):
 * the chip's OWN 1px border, transparent at rest, goes a little brighter than
 * `--_bd`. Tokens only.
 *
 * THE CHIP GIVES WAY, THE VERSION NEVER DOES (it is the short form and holds its
 * width). The chip flexes and its name truncates; the chevron holds its width.
 *
 * ON THE RAIL (the closed drawer, web/src/lib/mini-rail/MiniRail.svelte,
 * which mirrors this bar's markup) the chip is the avatar alone; the name
 * and chevron are hidden there, and the button keeps its spoken name.
 */
@layer components {
/* A PLUGIN INDICATOR right of the master-all crown (#1792, `web/src/lib/drawer/bar.ts` pluginIndicatorsHtml): drawn only while
 * the mode it names is on, so it is always lit, in the danger token, because every indicator today names a mode that acts for you
 * while you are away (the beast mode plugin's armed bolt). The bar's button class carries its size and its hover accent. */
[data-bar-indicator] {
    color: var(--oc-coral);
}

/* The QUIET state (#1792 finding 2): the mode is not armed but still acts for you in part (a "beast off" box that auto-approves),
 * so the same coral bolt is drawn dimmed, not hidden: still the danger token, plainly not the armed one. */
[data-bar-indicator][data-bar-indicator-quiet] {
    opacity: 0.5;
}

.session-sidebar-bar__account {
    --_bd: var(--oc-line-panel);
    display: flex;
    align-items: center;
    gap: var(--oc-space-2);
    min-width: 0;
    max-width: 100%;
    /* SMALLER SINCE THE WIDGET AREA SPANS EVERY TAB (Joe (ccsliinc), 2026-10-01: "keep the icons at
     * the bottom of the drawer but smaller"); the phone rule below keeps its 40px touch target. */
    min-height: 22px;
    padding: 0 var(--oc-space-1);
    border: 1px solid transparent;
    border-radius: var(--oc-radius-sm);
    background: none;
    color: var(--oc-text-secondary);
    font: inherit;
    font-family: var(--font-mono);
    font-size: var(--oc-fs-body);
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
}

.session-sidebar-bar__account:hover,
.session-sidebar-bar__account[aria-expanded='true'] {
    background: var(--oc-ground-hover);
    color: var(--oc-text-primary);
}

/* THE AVATAR is a square with 2px corners and a 1px hairline on the raised ground, the
 * Military Terminal avatar (the frame of the community identicon in
 * web/src/lib/community/Identicon.svelte, square hairlines as in ledger-chrome.css). A member
 * wears their identicon, a lurker the anonymous silhouette; colour is tokens only. */
.session-sidebar-bar__avatar {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    overflow: hidden;
    border: 1px solid var(--oc-line-panel);
    border-radius: 2px;
    background: var(--oc-ground-raised);
    color: var(--oc-text-dim);
    line-height: 0;
}

.session-sidebar-bar__avatar > svg {
    width: 100%;
    height: 100%;
}

/* The identicon's tone colours are the shared global rules in web/src/lib/community/Identicon.svelte. */

/* THE SIGNED-OUT SPIRAL: one full turn every 6s, around the svg's centre, in 24 steps of 15deg; monochrome (currentColor).
 * It is STEPPED, not animated (Carnivore round 3, B12): a running infinite animation keeps the compositor producing frames at the
 * display rate, so client/js/ambient-ticker.js writes `--amb-step` (an integer, 4 Hz) on the svg and the svg sits at step x 15deg.
 * The one-millisecond `amb-join-avatar-spiral` animation (animation-pause.css) is only how the ticker finds it. A still spiral
 * (no ticker, the type switched off, Reduce Motion) rests at 0deg. The turn is on the <svg> element itself, never on a <g>
 * inside it: Chromium does not composite a transform on an SVG child. `overflow: visible` keeps the clip FIXED: the turning
 * square would otherwise carry its own clip edges round with it, and the fixed avatar box (overflow hidden above) clips the
 * arms exactly as the old fixed svg viewport did. */
.session-sidebar-bar__avatar .spiral-turn {
    overflow: visible;
    transform-origin: 50% 50%;
    transform: rotate(calc(var(--amb-step, 0) * 15deg));
    animation: amb-join-avatar-spiral 1ms;
}

@media (prefers-reduced-motion: reduce) {
    .session-sidebar-bar__avatar .spiral-turn { transform: none; }
}

.session-sidebar-bar__account:hover .session-sidebar-bar__avatar {
    border-color: var(--oc-text-secondary);
}

.session-sidebar-bar__account-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.session-sidebar-bar__account-chevron {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--oc-text-dim);
    transform: rotate(180deg);
    transition: transform var(--oc-motion-fast) ease;
}

/* Open, the chevron points up at the menu it opened. */
.session-sidebar-bar__account[aria-expanded='true'] .session-sidebar-bar__account-chevron {
    transform: none;
}

/* THE SIGN IN PILL (#1200, D12), a sibling beside the chip while nobody is signed in. Gold is the
 * locked-star accent (`--oc-yellow-bright`, the theme's warning colour): a 1px outline and gold
 * lowercase mono text on no fill, the quiet outline shape of `.pl-btn`. It never nests in the
 * chip, so the chip keeps opening the menu. On the 48px rail it is hidden and the avatar wears a
 * small gold dot instead (the rail mirrors this markup). */
.session-sidebar-bar__signin {
    /* THE BASE BUTTON (`data-btn`, web/src/lib/base/elements.css), sized for the bar and wearing the gold: only its
     * private variables are set here, so its hover, focus and disabled rules stay the base's. */
    --_bd: var(--oc-yellow-bright);
    --_btn-h: 22px;
    --_btn-pad: var(--oc-space-2);
    --_btn-fs: var(--oc-fs-label);
    --_btn-lh: 1;
    --_btn-radius: var(--oc-radius-sm);
    --_btn-edge: var(--oc-yellow-bright);
    --_btn-edge-hover: var(--oc-yellow-bright);
    --_btn-ink: var(--oc-yellow-bright);
    --_btn-ink-hover: var(--oc-yellow-bright);
    flex: 0 0 auto;
    font-family: var(--font-mono);
}

.session-sidebar-bar__avatar[data-kind='lurker'] {
    position: relative;
    overflow: visible;
    /* THE SPIRAL IS A ROUND MARK, SO IT WEARS NO SQUARE FRAME (#2685): the raised ground and hairline are the
     * member identicon's frame; behind the signed-out spiral they showed as a square (the corners at the 28px rail
     * and phone bar) wherever the spiral did not cover them. The hover rule below keeps its specificity out of this. */
    border-color: transparent;
    background: none;
}

.session-sidebar-bar__account:hover .session-sidebar-bar__avatar[data-kind='lurker'] {
    border-color: transparent;
}

.mr-footer .session-sidebar-bar__signin {
    display: none;
}

.mr-footer .session-sidebar-bar__avatar[data-kind='lurker']::after {
    content: '';
    position: absolute;
    top: -3px;
    right: -3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--oc-yellow-bright);
}

/* A FINGER NEEDS MORE THAN 22px, and this chip opens log out, the one action
 * here with a consequence. Same reasoning as the row menu's coarse-pointer
 * rule in client/css/session-row-menu.css. */
@media (pointer: coarse) {
    .session-sidebar-bar__account {
        min-height: 40px;
    }

    .session-sidebar-bar__signin {
        --_btn-h: 40px;
    }

    .session-sidebar-bar__avatar {
        width: 28px;
        height: 28px;
    }
}
}