/* The icon contract the bootstrap-icons font used to provide, now that the icons come out of
   a sprite instead: an icon is 1em of the text it sits in and takes its colour from it, so the
   call sites keep the `text-*` utilities they already carried. */
.bi {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    fill: currentColor;
    vertical-align: -0.125em;
}

.me-involved {
    font-weight: bold;
    color: var(--yamsa-brand-text);
}

.room-entry {
    /* Queried below: how much of the row fits depends on the menu panel, not on the viewport -
       the panel is 75% of a phone screen and 30% of a desktop one. */
    container-type: inline-size;
    display: flex;
    align-items: center;
    border-radius: 1rem;
    background-color: transparent;
    padding: 0.5rem 0.75rem;
    gap: 0.75rem;
    box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 0.075);
    cursor: pointer;
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.room-entry:hover {
    background-color: rgb(var(--yamsa-ink-rgb) / 0.08);
}

.room-entry[data-active] {
    background-color: rgb(var(--yamsa-brand-rgb) / 0.15);
}

.room-entry-ghost {
    opacity: 0.85;
    font-style: italic;
}

.room-entry-callout {
    border: 1px dashed rgb(var(--yamsa-brand-rgb) / 0.35);
}

.room-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* min-width is what lets the ellipsis below take effect at all: a flex item never shrinks below
   its longest word, so without this a room name pushes the row wider than the menu. */
.room-entry-text {
    min-width: 0;
}

.room-entry .room-name,
.room-entry .room-description {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.room-entry .room-name {
    font-size: 0.95rem;
}

.room-entry .room-description {
    font-size: 0.75rem;
    color: rgb(var(--yamsa-ink-rgb) / 0.65);
    display: block;
}

/* Never shrinks and never wraps: a status label has no shorter form, only a hidden one. */
.room-status-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Below this the badge costs more than it says: it takes a third of the row, while the group
   heading above it already names the status. The name is what a row is picked by, so it wins. */
@container (max-width: 18rem) {
    .room-status-badge {
        display: none;
    }
}

.room-group-label {
    letter-spacing: 0.08em;
}

/* Written out rather than left to the base stylesheet's `hr`: Reboot dimmed every rule to
   opacity .25, which took this one down to a fortieth of the alpha it asks for. */
.room-list-divider hr {
    border: 0;
    border-top: 1px solid rgb(var(--yamsa-ink-rgb) / 0.15);
    opacity: 1;
}

.room-circle {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    border: none;
    background: rgb(var(--yamsa-ink-rgb) / 0.1);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    text-transform: uppercase;
    flex: 0 0 auto;
    min-width: 3.25rem;
    min-height: 3.25rem;
}

.room-circle[data-selected] {
    background: linear-gradient(145deg, var(--yamsa-brand-hover), var(--yamsa-brand));
    color: var(--yamsa-on-brand);
    box-shadow: 0 12px 28px rgb(var(--yamsa-brand-rgb), 0.35);
}

.room-circle[data-closed] {
    background: var(--yamsa-danger-soft);
    color: var(--yamsa-danger-text);
}

.room-circle[data-closed][data-selected] {
    background: linear-gradient(145deg, #c84757, #a1293d);
    color: #fff;
    box-shadow: 0 12px 28px rgba(199, 55, 74, 0.35);
}

.room-card {
    border-radius: 1.25rem;
}

.profile-avatar {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--yamsa-brand-soft);
}

.profile-avatar img {
    object-fit: cover;
}

/* The avatar of a user, wherever their name shows up. The size lives on the wrapper so the
   initial fallback occupies the same box as a picture and a mixed list keeps its rhythm. */
.avatar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: rgb(var(--yamsa-brand-rgb), 0.1);
    color: var(--yamsa-brand-text);
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-sm {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.75rem;
}

.avatar-lg {
    width: 3rem;
    height: 3rem;
    font-size: 1.3rem;
}

.avatar-square {
    border-radius: 0.85rem;
}

/* Debitor and creditor of one debt, read left to right. The ring separates the two where they
   overlap, whatever the row underneath them is filled with. */
.avatar-pair {
    display: inline-flex;
    align-items: center;
}

.avatar-pair > .avatar + .avatar {
    margin-left: -0.6rem;
    box-shadow: 0 0 0 2px var(--yamsa-surface);
}

.debug-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3.2em;
    background-color: rgba(139, 0, 0, 0.8);
    color: #fff;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Loading Indicators (Issue #144) */
.loading-indicator-overlay {
    /* Fixed, not absolute: the only instance is #body-loading-spinner, a direct child of <body>,
       and body is not positioned - an absolute overlay would anchor to the initial containing
       block and scroll off the screen instead of covering the viewport. */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--yamsa-scrim);
    z-index: 50;
    display: none;
}

.loading-indicator-overlay.htmx-request {
    display: flex;
    color: var(--yamsa-on-scrim);
    align-items: center;
    justify-content: center;
    cursor: progress;
    /* The reveal is what the delay is for: most requests here answer well inside 250ms, and a
       full-screen scrim that flashes for 80ms reads as a glitch - worse now that it also
       swallows the clicks made during it. `both` holds the keyframe's from-state through the
       delay, so the overlay is transparent and click-through until the request has earned it.
       display cannot be transitioned, which is why this is an animation and not the transition
       htmxIndicatorRequest.css declares. */
    animation: loading-overlay-reveal 150ms ease-in 250ms both;
}

@keyframes loading-overlay-reveal {
    from {
        opacity: 0;
        /* Swallows clicks for the duration of the request: the dimmed page still resolved every
           click underneath, so a second click on the same link or submit button sent a second
           request. htmx drops .htmx-request on load, error, abort and timeout alike, so the
           block cannot outlive the request. Keyboard activation is not covered - the overlay is
           a scrim, not a modal. */
        pointer-events: none;
    }

    to {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Skeleton Screen (placeholder animation) */
.skeleton-item {
    background: linear-gradient(90deg,
        rgb(var(--yamsa-ink-rgb) / 0.05),
        rgb(var(--yamsa-ink-rgb) / 0.12),
        rgb(var(--yamsa-ink-rgb) / 0.05));
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 0.5rem;
    height: 3rem;
    margin-bottom: 1rem;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Loading Overlay Message Container */
.loading-overlay-message {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--yamsa-scrim);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    pointer-events: none;
}

.loading-overlay-message-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: var(--yamsa-on-scrim);
    text-align: center;
}

/* Skeleton container for list loader */
.skeleton-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}