/* Shared product rail: keep every workspace aligned with Zhiya's compact shell. */
.module-leaving :is(.app-shell, .minutes-space-shell, .saoya-shell, .assistant-shell, .zy-shell, .settings-shell) > :not(.laiya-product-rail) {
    opacity: .78;
    transition: opacity 160ms ease-out;
}

.module-arriving :is(.app-shell, .minutes-space-shell, .saoya-shell, .assistant-shell, .zy-shell, .settings-shell) > :not(.laiya-product-rail) {
    opacity: 0;
}

:is(.app-shell, .minutes-space-shell, .saoya-shell, .assistant-shell, .zy-shell, .settings-shell) > :not(.laiya-product-rail) {
    transition: opacity 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.laiya-product-rail :is(.rail-link, .rail-btn).active::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 50%;
    width: 2px;
    height: 18px;
    transform: translateY(-50%);
    border-radius: 0;
    background: var(--zy-border-strong, #c9d0ce);
    pointer-events: none;
}

@media (max-width: 760px) {
    :is(.app-shell, .settings-shell, .zy-shell) .laiya-product-rail :is(.rail-link, .rail-btn).active::before {
        top: auto;
        right: auto;
        bottom: -6px;
        left: 50%;
        width: 18px;
        height: 2px;
        transform: translateX(-50%);
        border-radius: 5px 5px 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .module-leaving :is(.app-shell, .minutes-space-shell, .saoya-shell, .assistant-shell, .zy-shell, .settings-shell) > :not(.laiya-product-rail),
    .module-arriving :is(.app-shell, .minutes-space-shell, .saoya-shell, .assistant-shell, .zy-shell, .settings-shell) > :not(.laiya-product-rail),
    :is(.app-shell, .minutes-space-shell, .saoya-shell, .assistant-shell, .zy-shell, .settings-shell) > :not(.laiya-product-rail) {
        opacity: 1;
        transition: none;
    }
}

@media (min-width: 761px) {
    .app-shell {
        grid-template-columns: 52px var(--sidebar-width) minmax(0, 1fr);
    }

    .minutes-space-shell {
        grid-template-columns: 52px 272px minmax(0, 1fr);
    }

    .saoya-shell,
    .settings-shell {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .assistant-shell {
        grid-template-columns: 52px 258px minmax(0, 1fr);
    }

    .assistant-shell.sidebar-collapsed {
        grid-template-columns: 52px 0 minmax(0, 1fr);
    }

    .laiya-product-rail {
        position: relative;
        z-index: 40;
        display: flex;
        width: 52px;
        min-width: 52px;
        height: 100vh;
        min-height: 0;
        flex: 0 0 52px;
        box-sizing: border-box;
        align-items: center;
        gap: 4px;
        padding: 8px;
        overflow: visible;
        color: var(--muted, var(--zy-muted, #66706e));
        border-right: 1px solid var(--line, var(--zy-border, #e1e5e4));
        background: var(--surface, var(--zy-surface, #fff));
        box-shadow: none;
    }

    .laiya-product-rail .brand-mark {
        display: grid;
        width: 36px;
        height: 36px;
        margin-bottom: 10px;
        place-items: center;
        box-sizing: border-box;
        overflow: hidden;
        border-radius: 6px;
        background: transparent;
        box-shadow: none;
    }

    .laiya-product-rail .brand-mark img {
        width: 34px;
        height: 34px;
        object-fit: contain;
    }

    .laiya-product-rail :is(.rail-link, .rail-btn) {
        position: relative;
        display: grid;
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        box-sizing: border-box;
        place-items: center;
        border-radius: 6px;
        color: var(--zy-text-soft, #4f5755);
        background: transparent;
    }

    .laiya-product-rail :is(.rail-link, .rail-btn):hover,
    .laiya-product-rail :is(.rail-link, .rail-btn):focus-visible {
        color: var(--zy-text, #151719);
        background: var(--zy-surface-soft, #f3f5f4);
    }

    .laiya-product-rail :is(.rail-link, .rail-btn).active {
        color: var(--zy-text, #151719);
        background: var(--zy-surface-soft, #f3f5f4);
    }

    .laiya-product-rail :is(.rail-link, .rail-btn) svg {
        width: 17px;
        height: 17px;
    }

    .laiya-product-rail .rail-link span,
    .laiya-product-rail .rail-tooltip {
        left: calc(100% + 10px);
        padding: 6px 8px;
        border-radius: 5px;
        font-size: 11px;
    }

    .laiya-product-rail .account-anchor {
        position: relative;
        margin-top: auto;
    }

    .laiya-product-rail :is(.account-button, .avatar-button) {
        display: grid;
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        box-sizing: border-box;
        place-items: center;
        padding: 0;
        font-size: 11px;
    }

    .laiya-product-rail :is(.account-button, .avatar-button) > span {
        display: grid;
        width: 100%;
        height: 100%;
        place-items: center;
        overflow: hidden;
        border-radius: inherit;
        line-height: 1;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .laiya-product-rail .account-popover {
        position: absolute;
        left: calc(100% + 8px);
        right: auto;
        bottom: 0;
        z-index: 120;
        width: min(286px, calc(100vw - 68px));
        max-width: calc(100vw - 68px);
        max-height: calc(100vh - 24px);
        min-width: 0;
        box-sizing: border-box;
        overflow: auto;
        padding: 10px;
        color: var(--ink, var(--zy-text, #151719));
        border: 1px solid var(--line, var(--zy-border, #e1e5e4));
        border-radius: 8px;
        background: var(--surface, var(--zy-surface, #fff));
        box-shadow: var(--shadow, var(--zy-shadow-lg, none));
    }

    .laiya-product-rail .account-popover::before {
        content: "";
        position: absolute;
        left: -7px;
        right: auto;
        bottom: 18px;
        width: 12px;
        height: 12px;
        box-sizing: border-box;
        transform: rotate(45deg);
        border-left: 1px solid var(--line, var(--zy-border, #e1e5e4));
        border-bottom: 1px solid var(--line, var(--zy-border, #e1e5e4));
        background: var(--surface, var(--zy-surface, #fff));
    }

    .laiya-product-rail .account-popover::after {
        display: none;
    }

    .laiya-product-rail .account-summary {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        min-width: 0;
        padding: 8px;
    }

    .laiya-product-rail .account-summary > div:last-child {
        min-width: 0;
    }

    .laiya-product-rail .account-summary strong,
    .laiya-product-rail .account-summary span {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .laiya-product-rail .account-summary span {
        margin-top: 3px;
        color: var(--muted, var(--zy-muted, #66706e));
        font-size: 11px;
    }

    .laiya-product-rail .account-avatar-large {
        display: grid;
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        place-items: center;
        box-sizing: border-box;
        overflow: hidden;
        border-radius: 6px;
        background: var(--soft, var(--zy-primary-soft, #eaf4f3));
        background-position: center;
        background-size: cover;
    }

    .laiya-product-rail .popover-action {
        display: flex;
        width: 100%;
        min-height: 34px;
        align-items: center;
        gap: 8px;
        margin-top: 4px;
        padding: 0 8px;
        box-sizing: border-box;
        border: 0;
        border-radius: 5px;
        background: transparent;
        color: inherit;
        font-size: 11px;
        text-align: left;
    }

    .laiya-product-rail .popover-action:hover {
        background: var(--soft, var(--zy-surface-soft, #f3f5f4));
    }
}