/* 29-library-port.css — the library primitives, ported into the app.
 *
 * Each block here is a faithful port of the corresponding component in
 * `library/`, adapted only where the app's token names differ. The
 * point of the port is that the app and the library speak the same
 * visual language: square corners, hairline borders, inset bezel
 * shadows, copper as the only accent, mono type in wide tracking.
 *
 * Ported:
 *   .tip-btn      library/tooltip
 *   .icbtn        library/icon-button
 *   .sw           library/switch-spring
 *   .pm-*         library/popover-morph
 *   .sel / .sc-*  library/select (custom dropdown)
 *   .es-*         library/empty-state
 *   .snd          library/send-button
 *   .m-*          library/modal
 *   .av           library/avatar
 *   .av--*        library/avatars (status colours)
 *   .btnx         library/buttons
 *   .seg          library/segmented
 *   .tabs         library/tab
 *   .menu-list    library/menu-item
 *   .sn           library/snackbar
 *   .chip         library/chip
 *   .badge        library/badge
 *   .sdot         library/status-dot
 */

/* ═══════════════════════════════════════════════════════════
   Tooltip — .tip-btn
   ═══════════════════════════════════════════════════════════ */

.tip-btn {
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-2);
    color: var(--c-ink-dim);
    font: 600 16px var(--body);
    cursor: pointer;
    position: relative;
    transition: background 150ms, border-color 150ms, color 150ms, transform 220ms var(--ease);
    box-shadow: var(--shadow-inset-light);
}

.tip-btn::after {
    content: attr(data-tip);
    position: absolute;
    padding: 4px 8px;
    background: rgba(10, 10, 14, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-2);
    color: var(--c-ink);
    font: 700 10px var(--mono);
    letter-spacing: 0.10em;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms, transform 150ms var(--ease);
    z-index: 100;
}

.tip-btn[data-placement="top"]::after {
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%) translateY(4px);
}
.tip-btn[data-placement="bottom"]::after {
    left: 50%;
    top: calc(100% + 8px);
    transform: translateX(-50%) translateY(-4px);
}
.tip-btn[data-placement="left"]::after {
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(4px);
}
.tip-btn[data-placement="right"]::after {
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
}
.tip-btn:hover::after {
    opacity: 1;
}
.tip-btn[data-placement="top"]:hover::after {
    transform: translateX(-50%) translateY(0);
}
.tip-btn[data-placement="bottom"]:hover::after {
    transform: translateX(-50%) translateY(0);
}
.tip-btn[data-placement="left"]:hover::after {
    transform: translateY(-50%) translateX(0);
}
.tip-btn[data-placement="right"]:hover::after {
    transform: translateY(-50%) translateX(0);
}

.tip-btn:hover {
    color: var(--c-ink);
    border-color: var(--border-accent);
    background: rgba(255, 255, 255, 0.04);
}
.tip-btn:active {
    transform: translateY(1px);
}

.tip-btn .material-symbols-rounded {
    font-size: 18px;
}

/* Text variant — a button that keeps its label but still gets the
   tooltip treatment. */
.tip-btn--text {
    width: auto;
    padding: 0 12px;
}

/* ═══════════════════════════════════════════════════════════
   Icon button — .icbtn
   ═══════════════════════════════════════════════════════════ */

.icbtn {
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-2);
    color: var(--c-ink-dim);
    cursor: pointer;
    position: relative;
    transition: background 150ms, border-color 150ms, color 150ms, transform 220ms var(--ease);
    box-shadow: var(--shadow-inset-light);
}
.icbtn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, transparent 50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms;
}
.icbtn:hover {
    color: var(--c-ink);
    border-color: var(--border-accent);
    background: rgba(255, 255, 255, 0.04);
}
.icbtn:hover::before {
    opacity: 1;
}
.icbtn:active {
    transform: translateY(1px);
}
.icbtn .material-symbols-rounded {
    font-size: 18px;
    position: relative;
    z-index: 1;
}

.icbtn--sq.is-active {
    color: var(--c-accent);
    border-color: var(--c-accent);
    background: rgba(204, 144, 80, 0.10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px var(--c-accent);
}

.icbtn--filled {
    background: var(--c-ink);
    color: #000;
    border-color: var(--c-ink);
}
.icbtn--filled:hover {
    background: var(--c-accent-bright);
    color: #000;
    border-color: var(--c-accent-bright);
}

.icbtn--sm {
    width: 28px;
    height: 28px;
}
.icbtn--sm .material-symbols-rounded {
    font-size: 15px;
}

.icbtn--lg {
    width: 44px;
    height: 44px;
}
.icbtn--lg .material-symbols-rounded {
    font-size: 22px;
}

/* ═══════════════════════════════════════════════════════════
   Switch — .sw  (library/switch-spring)
   ═══════════════════════════════════════════════════════════ */

.sw {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    width: 56px;
    height: 28px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-2);
    cursor: pointer;
    touch-action: none;
    box-shadow: var(--shadow-inset-light);
    outline: none;
    flex-shrink: 0;
}
.sw::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 20px;
    height: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.04) 100%),
        rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.20);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40), 0 1px 2px rgba(0, 0, 0, 0.4);
    transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1), background 220ms, box-shadow 220ms;
}
.sw[aria-checked="true"] {
    background: rgba(204, 144, 80, 0.10);
    border-color: var(--border-accent);
}
.sw[aria-checked="true"]::after {
    transform: translateX(28px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.04) 100%),
        rgba(204, 144, 80, 0.20);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.50), inset 0 0 6px rgba(255, 255, 255, 0.7),
        0 0 8px rgba(255, 255, 255, 0.45);
}
.sw[aria-checked="true"]::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.7);
    transform: translate(10px, -50%);
    animation: swLed 1.6s ease-in-out infinite;
}
@keyframes swLed {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.sw--sm {
    width: 42px;
    height: 22px;
}
.sw--sm::after {
    left: 2px;
    top: 2px;
    width: 16px;
    height: 16px;
}
.sw--sm[aria-checked="true"]::after {
    transform: translateX(20px);
}
.sw--sm[aria-checked="true"]::before {
    transform: translate(7px, -50%);
}

/* ═══════════════════════════════════════════════════════════
   Popover morph — .pm-*  (library/popover-morph)
   ═══════════════════════════════════════════════════════════ */

.pm-btn {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-2);
    color: var(--c-ink-dim);
    cursor: pointer;
    position: relative;
    box-shadow: var(--shadow-inset-light);
    transition: background 150ms, border-color 150ms, color 150ms;
}
.pm-btn:hover {
    color: var(--c-ink);
    border-color: var(--border-accent);
}

.pm-pop {
    position: absolute;
    z-index: 60;
    min-width: 200px;
    background: rgba(14, 14, 18, 0.96);
    backdrop-filter: blur(24px);
    border: 1px solid var(--border-2);
    box-shadow: var(--shadow-inset-bezel), 0 18px 48px rgba(0, 0, 0, 0.6);
    padding: 4px;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.94);
    transform-origin: top right;
    transition: opacity 180ms var(--ease), transform 280ms var(--spring), visibility 0s linear 280ms;
}
.pm-pop.is-open {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition: opacity 180ms var(--ease), transform 280ms var(--spring), visibility 0s;
}
.pm-pop.is-open[data-pm-align="right"] {
    transform-origin: top right;
}

.pm-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    cursor: pointer;
    color: var(--c-ink-dim);
    border: 1px solid transparent;
    transition: background 150ms, color 150ms, border-color 150ms;
}
.pm-row:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--c-ink);
    border-color: var(--border-2);
}
.pm-icn {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    color: var(--c-accent);
    flex-shrink: 0;
}
.pm-icn .material-symbols-rounded {
    font-size: 17px;
}
.pm-lbl {
    font: 600 12px var(--body);
    color: inherit;
    white-space: nowrap;
}
.pm-name {
    font: 600 12px var(--body);
    color: var(--c-ink);
}
.pm-note {
    font: 500 10px var(--mono);
    letter-spacing: 0.08em;
    color: var(--c-ink-muted);
    margin-left: auto;
    padding-left: 10px;
}

/* ═══════════════════════════════════════════════════════════
   Custom dropdown — .sel / .sc-*  (library/select)
   ═══════════════════════════════════════════════════════════ */

.sel {
    position: relative;
    display: inline-block;
}
.sel-custom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 140px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-2);
    color: var(--c-ink);
    font: 600 12px var(--body);
    cursor: pointer;
    box-shadow: var(--shadow-inset-light);
    transition: border-color 150ms, background 150ms;
}
.sel-custom:hover,
.sel.is-open .sel-custom {
    border-color: var(--border-accent);
    background: rgba(255, 255, 255, 0.04);
}
.sc-val {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sc-arr {
    display: grid;
    place-items: center;
    color: var(--c-ink-dim);
    flex-shrink: 0;
    transition: transform 220ms var(--ease);
}
.sc-arr .material-symbols-rounded {
    font-size: 16px;
}
.sel.is-open .sc-arr {
    transform: rotate(180deg);
    color: var(--c-accent);
}
.sc-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 100%;
    max-height: 280px;
    overflow-y: auto;
    background: rgba(14, 14, 18, 0.97);
    backdrop-filter: blur(24px);
    border: 1px solid var(--border-2);
    box-shadow: var(--shadow-inset-bezel), 0 18px 48px rgba(0, 0, 0, 0.6);
    padding: 4px;
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top left;
    transition: opacity 160ms var(--ease), transform 240ms var(--spring), visibility 0s linear 240ms;
}
.sel.is-open .sc-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition: opacity 160ms var(--ease), transform 240ms var(--spring), visibility 0s;
}
.sel[data-align="right"] .sc-list {
    left: auto;
    right: 0;
    transform-origin: top right;
}
.sc-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font: 600 12px var(--body);
    color: var(--c-ink-dim);
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 150ms, color 150ms;
    white-space: nowrap;
}
.sc-opt:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--c-ink);
}
.sc-opt.is-on {
    color: var(--c-accent-bright);
    background: rgba(204, 144, 80, 0.08);
    border-color: var(--border-accent);
}
.sc-opt .material-symbols-rounded {
    font-size: 15px;
}

/* ═══════════════════════════════════════════════════════════
   Empty state — .es-*  (library/empty-state)
   ═══════════════════════════════════════════════════════════ */

.es {
    position: relative;
    width: 100%;
    min-height: 180px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-2);
    overflow: hidden;
    box-shadow: var(--shadow-inset-light);
}
.es-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.es-s {
    position: absolute;
    width: 24px;
    height: 24px;
    background: var(--c-accent);
    border: 1px solid var(--c-accent);
    box-shadow: 0 0 12px var(--c-accent-glow);
}
.es-s1 { top: 10%; left: 15%; animation: esDrift 12s ease-in-out infinite; }
.es-s2 { top: 30%; right: 12%; background: transparent; border-color: var(--c-accent-dim); animation: esDrift 14s ease-in-out infinite reverse; }
.es-s3 { bottom: 18%; left: 22%; width: 16px; height: 16px; animation: esDrift 10s ease-in-out infinite -2s; }
.es-s4 { bottom: 25%; right: 18%; width: 12px; height: 12px; background: transparent; border-color: var(--c-accent-dim); animation: esDrift 16s ease-in-out infinite -6s reverse; }
.es--files .es-s1 { width: 32px; height: 32px; top: 18%; left: 12%; }
.es--files .es-s2 { width: 18px; height: 18px; bottom: 22%; right: 15%; }
.es--chats .es-s1 { width: 28px; height: 28px; top: 22%; left: 18%; }
.es--chats .es-s2 { width: 20px; height: 20px; bottom: 26%; right: 20%; }
.es--chats .es-s3 { width: 12px; height: 12px; top: 40%; left: 30%; }
.es--chat .es-s1 { width: 30px; height: 30px; top: 16%; left: 22%; }
.es--chat .es-s2 { width: 18px; height: 18px; bottom: 24%; right: 24%; }
.es--chat .es-s3 { width: 14px; height: 14px; top: 34%; left: 34%; }

/* The suggestion chips in the empty chat state. */
.es-prompts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 10px;
    position: relative;
    z-index: 1;
}
.es-prompts .chip {
    cursor: pointer;
    transition: background 150ms, color 150ms, border-color 150ms, transform 220ms var(--ease);
}
.es-prompts .chip:hover {
    transform: translateY(-1px);
    border-color: var(--border-accent);
    color: var(--c-accent-bright);
}
@keyframes esDrift {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(20px, -15px) rotate(180deg); }
}
.es-title {
    font: 600 16px var(--body);
    color: var(--c-ink);
    margin: 8px 0 0;
    position: relative;
    z-index: 1;
}
.es-sub {
    font: 500 12px var(--body);
    color: var(--c-ink-dim);
    margin: 0 0 8px;
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 380px;
}
.es-cta {
    margin-top: 8px;
    background: var(--c-accent);
    color: #000;
    border: 1px solid var(--c-accent);
    font: 700 10px var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 8px 16px;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: background 150ms, transform 220ms var(--ease), box-shadow 150ms;
    box-shadow: var(--shadow-inset-light);
}
.es-cta:hover {
    background: var(--c-accent-bright);
    transform: translateY(-1px);
    box-shadow: 0 0 18px rgba(204, 144, 80, 0.3);
}
.es-cta:active {
    transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════
   Send button — .snd  (library/send-button)
   ═══════════════════════════════════════════════════════════ */

.snd {
    position: relative;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-2);
    color: var(--c-ink-dim);
    cursor: pointer;
    overflow: hidden;
    box-shadow: var(--shadow-inset-light);
    transition: color 220ms, border-color 220ms, background 220ms, transform 260ms var(--spring);
    flex-shrink: 0;
}
.snd:hover {
    color: var(--c-accent-bright);
    border-color: var(--border-accent);
}
.snd:active {
    transform: scale(0.94);
}
.snd-ic {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
}
.snd-plane {
    font-size: 19px;
    transition: transform 300ms var(--spring), opacity 200ms;
}
.snd-dot {
    position: absolute;
    width: 5px;
    height: 5px;
    background: var(--c-accent);
    opacity: 0;
    transform: scale(0);
    transition: opacity 200ms, transform 300ms var(--spring);
}
.snd-arc,
.snd-arc2 {
    position: absolute;
    inset: 0;
    border: 1px solid var(--c-accent);
    opacity: 0;
    transform: scale(0.6);
    pointer-events: none;
}
.snd-arc {
    transition: opacity 300ms, transform 420ms var(--spring);
}
.snd-arc2 {
    transition: opacity 300ms 60ms, transform 480ms var(--spring);
}
.snd-check {
    position: absolute;
    font-size: 19px;
    color: var(--c-good);
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 220ms, transform 380ms var(--spring);
}

.snd.is-sending {
    color: var(--c-accent-bright);
    border-color: var(--border-accent);
    background: rgba(204, 144, 80, 0.08);
}
.snd.is-sending .snd-plane {
    animation: sndLaunch 900ms var(--ease) infinite;
}
.snd.is-sending .snd-dot {
    opacity: 1;
    transform: scale(1);
}
.snd.is-sending .snd-arc {
    opacity: 0.5;
    animation: sndArc 1.6s var(--ease) infinite;
}
.snd.is-sending .snd-arc2 {
    opacity: 0.3;
    animation: sndArc 1.6s var(--ease) infinite 0.25s;
}
@keyframes sndLaunch {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-3px) rotate(-8deg); }
}
@keyframes sndArc {
    0% { opacity: 0.5; transform: scale(0.7); }
    100% { opacity: 0; transform: scale(1.35); }
}

.snd.is-sent {
    color: var(--c-good);
    border-color: rgba(92, 184, 122, 0.4);
    background: rgba(92, 184, 122, 0.08);
}
.snd.is-sent .snd-plane {
    opacity: 0;
    transform: scale(0.5);
}
.snd.is-sent .snd-check {
    opacity: 1;
    transform: scale(1);
}
.snd.is-sent .snd-arc {
    opacity: 0.5;
    transform: scale(1);
    transition: opacity 400ms, transform 400ms var(--ease);
}

/* The stop state — the same button, but it stops the generation
   instead of sending. The red is the app's error colour, not a
   gradient. */
.snd.is-stop {
    color: var(--c-bad);
    border-color: rgba(224, 82, 82, 0.42);
    background: rgba(224, 82, 82, 0.08);
}
.snd.is-stop:hover {
    color: var(--c-bad);
    border-color: rgba(224, 82, 82, 0.6);
    background: rgba(224, 82, 82, 0.14);
}
.snd.is-stop .snd-plane {
    animation: none;
}

/* The button sits in a chat bar, so it keeps the old size. */
.chat-input-bar .snd,
.home-quick-chat-wrap .snd {
    width: 36px;
    height: 36px;
}
.chat-input-bar .snd .snd-plane,
.home-quick-chat-wrap .snd .snd-plane {
    font-size: 18px;
}
.chat-input-bar .snd .snd-check,
.home-quick-chat-wrap .snd .snd-check {
    font-size: 18px;
}

/* ═══════════════════════════════════════════════════════════
   Modal — .m-*  (library/modal)
   ═══════════════════════════════════════════════════════════ */

.modal-back {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 9000;
    display: grid;
    place-items: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms var(--ease), visibility 0s linear 200ms;
}
.modal-back.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 200ms var(--ease), visibility 0s;
}
.modal--demo {
    position: relative;
    width: min(520px, 100%);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    background: var(--c-panel, #14141a);
    border: 1px solid var(--border-2);
    box-shadow: var(--shadow-inset-bezel), 0 30px 80px rgba(0, 0, 0, 0.7);
    transform: translateY(12px) scale(0.98);
    transition: transform 280ms var(--spring);
}
.modal-back.is-open .modal--demo {
    transform: translateY(0) scale(1);
}
.m-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-2);
}
.m-title {
    font: 700 12px var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-ink);
    flex: 1;
}
.m-body {
    padding: 16px;
    overflow-y: auto;
    font: 400 14px var(--body);
    color: var(--c-ink-dim);
    line-height: 1.6;
}
.m-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-2);
}

/* ═══════════════════════════════════════════════════════════
   Avatar — .av  (library/avatar + library/avatars)
   ═══════════════════════════════════════════════════════════ */

.av {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-2);
    color: var(--c-ink);
    font: 700 12px var(--body);
    overflow: visible;
    flex-shrink: 0;
    box-shadow: var(--shadow-inset-light);
}
.av--sm { width: 24px; height: 24px; font-size: 9px; }
.av--md { width: 36px; height: 36px; font-size: 12px; }
.av--lg { width: 48px; height: 48px; font-size: 15px; }
.av img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* Status ring — the coloured ring around the avatar. */
.av-ring {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid var(--c-ink-muted);
    pointer-events: none;
}
.av--good .av-ring { border-color: var(--c-good); }
.av--warn .av-ring { border-color: var(--c-accent); }
.av--bad  .av-ring { border-color: var(--c-bad); }
.av--idle .av-ring { border-color: var(--c-ink-muted); }

.av-stack {
    display: inline-flex;
    align-items: center;
}
.av-stack .av {
    margin-left: -10px;
    border: 2px solid var(--bg, #000);
}
.av-stack .av:first-child {
    margin-left: 0;
}
.av--more {
    background: var(--c-ink);
    color: #000;
    font: 700 10px var(--mono);
}

/* ═══════════════════════════════════════════════════════════
   Buttons — .btnx  (library/buttons)
   ═══════════════════════════════════════════════════════════ */

.btnx {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-2);
    color: var(--c-ink);
    font: 700 10px var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: var(--shadow-inset-light);
    transition: background 150ms, border-color 150ms, color 150ms, transform 220ms var(--ease);
    white-space: nowrap;
}
.btnx:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-accent);
    color: var(--c-ink);
}
.btnx:active {
    transform: translateY(1px);
}
.btnx .material-symbols-rounded {
    font-size: 16px;
}
.btnx--primary {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: #000;
}
.btnx--primary:hover {
    background: var(--c-accent-bright);
    border-color: var(--c-accent-bright);
}
.btnx--ghost {
    background: transparent;
    border-color: var(--border-2);
    color: var(--c-ink-dim);
}
.btnx--ghost:hover {
    color: var(--c-ink);
    border-color: var(--border-accent);
}
.btnx--danger {
    background: rgba(224, 82, 82, 0.1);
    border-color: rgba(224, 82, 82, 0.4);
    color: var(--c-bad);
}
.btnx--danger:hover {
    background: rgba(224, 82, 82, 0.18);
    border-color: var(--c-bad);
}
.btnx--icon {
    width: 36px;
    height: 36px;
    padding: 0;
}
.btnx--sm {
    padding: 6px 12px;
    font-size: 9px;
}
.btnx[disabled] {
    opacity: 0.4;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   Segmented / tabs / menu / snackbar / chip / badge / dot
   ═══════════════════════════════════════════════════════════ */

.seg {
    display: inline-flex;
    border: 1px solid var(--border-2);
    background: rgba(255, 255, 255, 0.02);
    box-shadow: var(--shadow-inset-light);
    overflow: hidden;
}
.seg button {
    padding: 7px 14px;
    background: transparent;
    border: none;
    border-right: 1px solid var(--border-2);
    color: var(--c-ink-dim);
    font: 700 10px var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 150ms, color 150ms;
}
.seg button:last-child {
    border-right: none;
}
.seg button:hover {
    color: var(--c-ink);
    background: rgba(255, 255, 255, 0.04);
}
.seg button.is-active {
    color: var(--c-accent-bright);
    background: rgba(204, 144, 80, 0.10);
}

.tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--border-2);
}
.tabs button {
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--c-ink-dim);
    font: 700 10px var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 150ms, border-color 150ms;
    margin-bottom: -1px;
}
.tabs button:hover {
    color: var(--c-ink);
}
.tabs button.is-active {
    color: var(--c-accent-bright);
    border-bottom-color: var(--c-accent);
}

.menu-list {
    display: flex;
    flex-direction: column;
    padding: 4px;
    background: rgba(14, 14, 18, 0.97);
    backdrop-filter: blur(24px);
    border: 1px solid var(--border-2);
    box-shadow: var(--shadow-inset-bezel), 0 18px 48px rgba(0, 0, 0, 0.6);
}
.m-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    font: 600 12px var(--body);
    color: var(--c-ink-dim);
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 150ms, color 150ms, border-color 150ms;
}
.m-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--c-ink);
    border-color: var(--border-2);
}
.m-item.is-active {
    color: var(--c-accent-bright);
    background: rgba(204, 144, 80, 0.08);
    border-color: var(--border-accent);
}
.m-item--danger {
    color: var(--c-bad);
}
.m-item--danger:hover {
    background: rgba(224, 82, 82, 0.1);
    border-color: rgba(224, 82, 82, 0.35);
    color: var(--c-bad);
}
.m-item kbd {
    margin-left: auto;
    font: 700 9px var(--mono);
    letter-spacing: 0.1em;
    color: var(--c-ink-muted);
    border: 1px solid var(--border-2);
    padding: 2px 5px;
}

.sn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(20, 20, 26, 0.97);
    backdrop-filter: blur(24px);
    border: 1px solid var(--border-2);
    box-shadow: var(--shadow-inset-bezel), 0 14px 40px rgba(0, 0, 0, 0.55);
    color: var(--c-ink);
    font: 600 12px var(--body);
    min-width: 260px;
}
.sn-icn {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    color: var(--c-accent);
    flex-shrink: 0;
}
.sn-icn .material-symbols-rounded { font-size: 18px; }
.sn-t { flex: 1; }
.sn-act {
    font: 700 10px var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-accent-bright);
    cursor: pointer;
    background: none;
    border: none;
}
.sn-x {
    cursor: pointer;
    color: var(--c-ink-muted);
    background: none;
    border: none;
    display: grid;
    place-items: center;
}
.sn-x .material-symbols-rounded { font-size: 16px; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    font: 700 9px var(--mono);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--c-ink-dim);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-2);
    white-space: nowrap;
}
.chip--brand {
    color: var(--c-accent-bright);
    border-color: var(--border-accent);
    background: rgba(204, 144, 80, 0.08);
}
.chip--neutral {
    color: var(--c-ink-dim);
}
.chip--status {
    color: var(--c-good);
    border-color: rgba(92, 184, 122, 0.35);
    background: rgba(92, 184, 122, 0.08);
}
.chip--rm {
    cursor: pointer;
    transition: background 150ms, color 150ms;
}
.chip--rm:hover {
    background: rgba(224, 82, 82, 0.12);
    color: var(--c-bad);
    border-color: rgba(224, 82, 82, 0.35);
}
.chip .x {
    display: grid;
    place-items: center;
    opacity: 0.6;
}
.chip .x .material-symbols-rounded { font-size: 13px; }

.badge {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font: 700 9px var(--mono);
    letter-spacing: 0.08em;
    color: var(--c-ink);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border-2);
}
.badge--accent {
    color: #000;
    background: var(--c-accent);
    border-color: var(--c-accent);
}
.badge--good {
    color: #000;
    background: var(--c-good);
    border-color: var(--c-good);
}
.badge--warn {
    color: #000;
    background: var(--c-accent);
    border-color: var(--c-accent);
}
.badge--bad {
    color: #000;
    background: var(--c-bad);
    border-color: var(--c-bad);
}

.sdot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c-ink-muted);
    flex-shrink: 0;
}
.sdot--good { background: var(--c-good); box-shadow: 0 0 6px rgba(92, 184, 122, 0.6); }
.sdot--warn { background: var(--c-accent); box-shadow: 0 0 6px rgba(204, 144, 80, 0.6); }
.sdot--bad  { background: var(--c-bad); box-shadow: 0 0 6px rgba(224, 82, 82, 0.6); }
.sdot--idle { background: var(--c-ink-muted); }

/* A pulsing dot for "live" state. */
.sdot--pulse {
    animation: sdotPulse 1.8s ease-in-out infinite;
}
@keyframes sdotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.82); }
}

/* ═══════════════════════════════════════════════════════════
   Viewer header — the resource preview action row
   ═══════════════════════════════════════════════════════════ */

.viewer-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    background: var(--surface, rgba(255, 255, 255, 0.02));
    border-bottom: 1px solid var(--border, var(--border-2));
    flex-shrink: 0;
}

.viewer-header-title {
    flex: 1;
    min-width: 0;
}

.viewer-header-title h2,
.viewer-header-title > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.viewer-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    /* The action row is always flush right. The `margin-left: auto`
       has to be declared here as well, because the old rule for
       `.viewer-header-actions` in index.html wins on specificity
       order and would otherwise leave the buttons mid-header. */
    margin-left: auto;
    flex-shrink: 0;
}

/* The buttons are icon-only squares in the library's language —
   the label lives in the tooltip, not on the face of the button. */
.viewer-header-btn {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-2);
    color: var(--c-ink-dim);
    cursor: pointer;
    position: relative;
    box-shadow: var(--shadow-inset-light);
    transition: background 150ms, border-color 150ms, color 150ms, transform 220ms var(--ease);
}
.viewer-header-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, transparent 50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms;
}
.viewer-header-btn:hover {
    color: var(--c-ink);
    border-color: var(--border-accent);
    background: rgba(255, 255, 255, 0.04);
}
.viewer-header-btn:hover::before {
    opacity: 1;
}
.viewer-header-btn:active {
    transform: translateY(1px);
}
.viewer-header-btn .material-symbols-rounded {
    font-size: 18px;
    position: relative;
    z-index: 1;
}
.viewer-header-btn.share-btn:hover {
    color: var(--c-accent-bright);
    border-color: var(--border-accent);
}
.viewer-header-btn[disabled] {
    opacity: 0.4;
    pointer-events: none;
}

/* The old text label is gone — the tooltip carries the name. */
.viewer-btn-label {
    display: none;
}

/* The tooltip. */
.viewer-header-btn::after {
    content: attr(data-tip);
    position: absolute;
    padding: 4px 8px;
    background: rgba(10, 10, 14, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-2);
    color: var(--c-ink);
    font: 700 10px var(--mono);
    letter-spacing: 0.10em;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms, transform 150ms var(--ease);
    z-index: 100;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
}
.viewer-header-btn:hover::after {
    opacity: 1;
}
.viewer-header-btn:hover::after {
    transform: translateX(-50%) translateY(0);
}

/* On a narrow screen the tooltip would run off the edge, so it
   anchors to the right instead. */
@media (max-width: 640px) {
    .viewer-header {
        padding: 10px 12px;
        gap: 10px;
    }
    .viewer-header-btn {
        width: 32px;
        height: 32px;
    }
    .viewer-header-btn .material-symbols-rounded {
        font-size: 17px;
    }
    .viewer-header-btn::after {
        left: auto;
        right: 0;
        transform: translateY(-4px);
    }
    .viewer-header-btn:hover::after {
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════
   Reduced motion
   ═══════════════════════════════════════════════════════════ */

body.reduced-ui .sw::after,
body.reduced-ui .snd-plane,
body.reduced-ui .snd-arc,
body.reduced-ui .snd-arc2,
body.reduced-ui .es-s,
body.reduced-ui .sw[aria-checked="true"]::before {
    animation: none !important;
    transition-duration: 1ms !important;
}