/*
 * Litverso UI Bridge
 * Small namespaced UI layer for V4/Litverso surfaces without Bootstrap.
 */
.lui-relations {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lui-relation-card {
    margin-bottom: 0;
    min-width: 0;
}

.lui-relation-card.is-open {
    grid-column: 1 / -1;
}

.lui-relation-card:only-child {
    grid-column: 1 / -1;
}

.lui-relation-toggle {
    align-items: center;
    appearance: none;
    background:
        linear-gradient(135deg,
            color-mix(in oklab, var(--lui-bg, #111827), var(--lui-accent, #facc15) 16%),
            var(--lui-surface, #0b1526) 52%,
            color-mix(in oklab, var(--lui-surface, #0b1526), var(--lui-cyan, #22d3ee) 16%));
    border: 1px solid color-mix(in oklab, var(--lui-accent, #facc15), var(--lui-cyan, #38bdf8) 28%);
    border-radius: 14px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 8px 20px rgba(2, 6, 23, .22);
    color: var(--lui-text, #f8fafc);
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: .5rem;
    justify-content: space-between;
    min-height: 54px;
    padding: .6rem .62rem;
    text-align: left;
    text-decoration: none;
    width: 100%;
}

.lui-relation-toggle:hover,
.lui-relation-toggle[aria-expanded="true"] {
    background:
        linear-gradient(135deg,
            color-mix(in oklab, var(--lui-bg, #111827), var(--lui-accent, #facc15) 24%),
            var(--lui-surface, #0b1526) 48%,
            color-mix(in oklab, var(--lui-surface, #0b1526), var(--lui-cyan, #22d3ee) 24%));
    border-color: var(--lui-accent, #facc15);
    color: var(--lui-text, #f8fafc);
}

.lui-relation-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.08;
    min-width: 0;
    overflow: hidden;
}

.lui-relation-title {
    color: var(--lui-title, #fff8d7);
    font-size: clamp(.6rem, 1.75vw, .74rem);
    font-weight: 800;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.lui-relation-count {
    color: var(--lui-muted, #94a3b8);
    font-size: clamp(.58rem, 1.8vw, .78rem);
    margin-top: .2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lui-relation-chevron {
    align-items: center;
    background: color-mix(in oklab, var(--lui-accent, #facc15), transparent 84%);
    border: 1px solid color-mix(in oklab, var(--lui-accent, #facc15), transparent 58%);
    border-radius: 999px;
    color: var(--lui-title, #fff8d7);
    display: inline-flex;
    flex: 0 0 auto;
    height: 26px;
    justify-content: center;
    width: 26px;
}

.lui-relation-section {
    background:
        linear-gradient(135deg,
            rgba(250, 204, 21, .08),
            rgba(15, 23, 42, .94));
    border: 1px solid color-mix(in oklab, rgba(148, 163, 184, .42), var(--lui-accent, #facc15) 18%);
    border-radius: 14px;
    color: #cbd5e1;
    font-size: .72rem;
    font-weight: 750;
    line-height: 1.4;
    margin-top: .5rem;
    padding: .65rem;
}

.lui-relation-item {
    align-items: center;
    border-radius: 12px;
    color: var(--lui-text, #f8fafc);
    display: flex;
    gap: .55rem;
    min-width: 0;
    padding: .45rem;
    text-decoration: none;
}

.lui-relation-item:hover {
    background: color-mix(in oklab, var(--lui-accent, #facc15), transparent 88%);
    color: var(--lui-text, #f8fafc);
}

.lui-relation-avatar {
    border: 1px solid rgba(148, 163, 184, .45);
    border-radius: 999px;
    flex: 0 0 auto;
    height: 30px;
    object-fit: cover;
    width: 30px;
}

.lui-relation-user-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.lui-relation-user-handle {
    color: var(--lui-title, #fff8d7);
    font-size: .78rem;
    font-weight: 850;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lui-relation-user-name,
.lui-relation-empty {
    color: var(--lui-muted, #94a3b8);
    font-size: .72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lui-hidden,
.lui-relation-section.lui-hidden {
    display: none !important;
}

.lui-modal {
    align-items: center;
    background: rgba(2, 6, 23, .72);
    display: none;
    inset: 0;
    justify-content: center;
    padding: 1rem;
    position: fixed;
    z-index: 80;
}

.lui-modal.is-open {
    display: flex;
}

.lui-modal-dialog {
    background: #0d1728;
    border: 1px solid rgba(56, 189, 248, .42);
    border-radius: 18px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .36);
    color: #f8fafc;
    max-width: 560px;
    width: min(100%, 560px);
}

.lui-modal-head {
    align-items: flex-start;
    border-bottom: 1px solid rgba(148, 163, 184, .2);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem 1rem .85rem;
}

.lui-modal-kicker {
    color: var(--lui-muted, #94a3b8);
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.lui-modal-title {
    color: var(--lui-title, #fff8d7);
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.12;
    margin: .18rem 0 0;
    text-transform: uppercase;
}

.lui-modal-body {
    max-height: min(68vh, 620px);
    overflow: auto;
    padding: .7rem;
}

.lui-modal-list {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.lui-modal-row {
    align-items: center;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 12px;
    color: var(--lui-text, #f8fafc);
    display: flex;
    gap: .65rem;
    min-width: 0;
    padding: .62rem .68rem;
    text-decoration: none;
}

.lui-modal-row:hover {
    background: color-mix(in oklab, var(--lui-accent, #facc15), transparent 89%);
    color: var(--lui-text, #f8fafc);
}

.lui-modal-row-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.lui-modal-row-title {
    color: var(--lui-title, #fff8d7);
    font-size: .82rem;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lui-modal-row-sub {
    color: var(--lui-muted, #94a3b8);
    font-size: .74rem;
    margin-top: .16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lui-modal-row-meta {
    color: var(--lui-muted, #94a3b8);
    flex: 0 0 auto;
    font-size: .68rem;
    font-weight: 800;
}

.lui-modal-empty {
    color: var(--lui-muted, #94a3b8);
    font-size: .82rem;
    font-weight: 800;
    padding: .8rem;
}

.lui-modal-close {
    appearance: none;
    align-items: center;
    background: rgba(250, 204, 21, .12);
    border: 1px solid rgba(250, 204, 21, .42);
    border-radius: 999px;
    color: var(--lui-title, #fff8d7);
    cursor: pointer;
    display: inline-flex;
    font-size: 1.15rem;
    font-weight: 900;
    height: 32px;
    justify-content: center;
    line-height: 1;
    width: 32px;
}

@media (max-width: 767px) {
    .lui-relations {
        grid-template-columns: 1fr;
    }
}