/*
 * Cockpit bar cell — shared chrome for workspace bars.
 * Applied to `.bar-btn` AND the original consumers so the
 * visual contract cannot fall off if the extra class is missing.
 *
 * These are bezel cells, not nested cards. The bar owns the
 * outer hairline (top seam, row divider, panel edge). Each
 * control fills the row and keeps only the shared vertical
 * rules between siblings. Radius / inset highlight / hover
 * lift / outward glow were painting a second frame inside
 * the bar and leaving a dark moat at every edge.
 *
 * Layout stays on the consumer: both bars use the shared
 * `--bar-modules` lattice (see panel-bar.css). Cells fill their
 * track; they are not content-sized.
 *
 * Native <button> paints a white UA face. The gradient is a
 * transparent tint — without appearance:none + an opaque base,
 * that white face shows through (white rectangles, navy text).
 */

.bar-btn,
.chat-bar__button,
.m-panel-bar__switcher-tab,
.m-panel-bar__sub-tab {
    appearance: none;
    -webkit-appearance: none;
    height: 100%;
    min-height: var(--bar-button-size);
    padding: 0 var(--spacing-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    background-color: var(--card-bg);
    background-image: linear-gradient(
        180deg,
        color-mix(in srgb, var(--primary-blue) 14%, transparent) 0%,
        color-mix(in srgb, var(--primary-blue) 6%, transparent) 100%
    );
    background-clip: padding-box;
    border: 1px solid var(--primary-blue);
    border-radius: 0;
    color: var(--text-accent);
    font-family: 'Orbitron', monospace;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: none;
    outline: none;
    transition:
        background-color var(--duration-fast),
        background-image var(--duration-fast),
        color var(--duration-fast),
        border-color var(--duration-fast);
}

.bar-btn:hover:not(:disabled):not(.active),
.chat-bar__button:hover:not(:disabled):not(.active),
.m-panel-bar__switcher-tab:hover:not(:disabled):not(.active),
.m-panel-bar__sub-tab:hover:not(:disabled):not(.active) {
    background-color: var(--card-bg);
    background-image: linear-gradient(
        180deg,
        color-mix(in srgb, var(--primary-blue) 22%, transparent) 0%,
        color-mix(in srgb, var(--primary-blue) 12%, transparent) 100%
    );
    color: var(--text-primary);
}

.bar-btn:focus-visible,
.chat-bar__button:focus-visible,
.m-panel-bar__switcher-tab:focus-visible,
.m-panel-bar__sub-tab:focus-visible {
    outline: none;
    border-color: var(--text-accent);
}

.bar-btn:disabled,
.chat-bar__button:disabled,
.m-panel-bar__switcher-tab:disabled,
.m-panel-bar__sub-tab:disabled {
    background-color: transparent;
    background-image: none;
    border-style: dashed;
    border-color: color-mix(in srgb, var(--text-muted) 50%, transparent);
    color: var(--text-muted);
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.65;
}

.bar-btn:disabled:hover,
.chat-bar__button:disabled:hover,
.m-panel-bar__switcher-tab:disabled:hover,
.m-panel-bar__sub-tab:disabled:hover {
    background-color: transparent;
    background-image: none;
    color: var(--text-muted);
}

.bar-btn.active,
.chat-bar__button.active,
.m-panel-bar__switcher-tab.active,
.m-panel-bar__sub-tab.active {
    background-color: var(--accent-gold);
    background-image: linear-gradient(
        180deg,
        color-mix(in srgb, var(--accent-gold) 92%, var(--text-primary)) 0%,
        var(--accent-gold) 100%
    );
    border-color: var(--accent-gold);
    color: var(--dark-bg);
    box-shadow: none;
}

/* Bezel sharing — must follow the `border:` shorthand above.
   Top/bottom drop so the bar seam and row divider are the
   one horizontal stroke. Outer sides drop so the panel edge
   is the one vertical stroke. Adjacent cells collapse. */
.chat-bar .chat-bar__button,
.m-panel-bar__row--top .m-panel-bar__switcher-tab,
.m-panel-bar__row--top .m-panel-bar__sub-tab,
.m-panel-bar__row--bottom .m-panel-bar__stable,
.m-panel-bar__row--bottom .m-panel-bar__chip,
.m-panel-bar__row--bottom .m-panel-bar__search {
    border-top: none;
    border-bottom: none;
    border-radius: 0;
}

.chat-bar__leading .chat-bar__button:first-child,
.m-panel-bar__row--top .m-panel-bar__switcher-tab:first-child,
.m-panel-bar__row--top .m-panel-bar__sub-tab:first-child,
.m-panel-bar__leading .m-panel-bar__stable:first-child {
    border-left: none;
}

.chat-bar__trailing .chat-bar__button:last-child,
.m-panel-bar__row--top .m-panel-bar__switcher-tab:last-child,
.m-panel-bar__row--top .m-panel-bar__sub-tab:last-child,
.m-panel-bar__trailing .m-panel-bar__stable:last-child {
    border-right: none;
}

.chat-bar__trailing .chat-bar__button + .chat-bar__button,
.m-panel-bar__row--top .m-panel-bar__switcher-tab + .m-panel-bar__switcher-tab,
.m-panel-bar__row--top .m-panel-bar__sub-tab + .m-panel-bar__sub-tab,
.m-panel-bar__leading .m-panel-bar__stable + .m-panel-bar__stable,
.m-panel-bar__chip + .m-panel-bar__chip,
.m-panel-bar__row--bottom > * + * {
    margin-left: -1px;
}