/* begin license *
 *
 * "Enigma" is a chat site with rooms and private messages
 *
 * All rights reserved.
 *
 * Copyright (C) 2026 Seecr (Seek You Too B.V.) https://seecr.nl
 *
 * This file is part of "Enigma"
 *
 * end license */

/*
 * Layout: a full-height app. Wide screens: list | chat. Phones (< 768px): the list, or the
 * chat when #enigma has .show-chat (then without the top bar, the chat has a back button).
 */

html, body.enigma-body { height: 100%; }
body.enigma-body { overflow: hidden; }

.enigma {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}

.enigma-navbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem 1rem;
    padding-top: max(.5rem, env(safe-area-inset-top));
    background: var(--bs-body-bg);
}

.enigma-brand {
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--bs-body-color);
    text-decoration: none;
}
.enigma-brand .bi { color: var(--bs-primary); }

.enigma-main {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}

.enigma-sidebar {
    flex: 0 0 20rem;
    width: 20rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-right: var(--bs-border-width) solid var(--bs-border-color);
    --enigma-list-bg: var(--bs-tertiary-bg);
    background: var(--enigma-list-bg);
    padding-bottom: env(safe-area-inset-bottom);
}

.enigma-panel {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.enigma-back { display: none; }

@media (max-width: 767.98px) {
    .enigma-sidebar {
        flex: 1 1 auto;
        width: 100%;
        border-right: 0;
        --enigma-list-bg: var(--bs-body-bg);
        background: var(--enigma-list-bg);
    }
    .enigma:not(.show-chat) .enigma-panel { display: none; }
    .enigma.show-chat .enigma-sidebar,
    .enigma.show-chat .enigma-navbar { display: none; }
    .enigma-back {
        display: inline-flex;
        align-items: center;
        font-size: 1.4rem;
        margin-left: -.5rem;
        padding: .25rem;
    }
    .enigma-panel-header { padding-top: max(.5rem, env(safe-area-inset-top)); }
}

/* the number of unread messages elsewhere, next to the back arrow (phones) */
.enigma-back-unread:empty { display: none; }
.enigma-back-unread .badge {
    font-size: .7rem;
    min-width: 1.25rem;
}

/* buttons without button looks */
.enigma-plain {
    border: 0;
    background: none;
    padding: 0;
    color: inherit;
    font: inherit;
    text-align: inherit;
}
.enigma-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    color: var(--bs-secondary-color);
}
.enigma-icon-button:hover { background: var(--bs-secondary-bg); color: var(--bs-body-color); }

.enigma-account {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* avatars */
.enigma-avatar {
    --hue: 210;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
    font-weight: 600;
    color: #fff;
    background: hsl(var(--hue) 50% 45%);
    user-select: none;
}
.enigma-avatar-sm { width: 2rem; height: 2rem; font-size: .75rem; }
.enigma-avatar-md { width: 2.5rem; height: 2.5rem; font-size: .9rem; }
.enigma-avatar-lg { width: 6rem; height: 6rem; font-size: 2rem; }

/* online (green) or offline (red): a dot at the bottom left of an avatar */
.enigma-presence {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}
.enigma-presence::after {
    content: "";
    position: absolute;
    left: -1px;
    bottom: -1px;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    border: 2px solid var(--enigma-list-bg, var(--bs-body-bg));
    background: var(--bs-danger);
}
.enigma-presence.online::after { background: var(--bs-success); }

/* the list */
.enigma-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem .5rem .25rem 1rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}
.enigma-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.enigma-list-empty {
    padding: .5rem 1rem;
    font-size: .875rem;
    color: var(--bs-secondary-color);
}
.enigma-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    min-height: 3.5rem;
    padding: .5rem 1rem;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
}
.enigma-item:hover { background: var(--bs-secondary-bg); }
.enigma-item.active { background: var(--bs-primary-bg-subtle); }
.enigma-item.unread .enigma-item-title { font-weight: 600; }
.enigma-item-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}
.enigma-item-title,
.enigma-item-sub {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.enigma-item-sub {
    font-size: .8rem;
    color: var(--bs-secondary-color);
}
.enigma-room-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .75rem;
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    font-size: 1.1rem;
}
.enigma-picker { max-height: 60vh; overflow-y: auto; }
.enigma-picker .enigma-item { padding-left: .25rem; padding-right: .25rem; }

/* the chat */
.enigma-panel-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem 1rem;
    background: var(--bs-body-bg);
}
.enigma-panel-title {
    flex: 1 1 auto;
    min-width: 0;
}

/* newest at the bottom, and the scroll position stays there on reload */
.enigma-messages {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column-reverse;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .5rem 1rem 1rem;
}

.enigma-day {
    margin: 1rem 0 .25rem;
    text-align: center;
    font-size: .75rem;
    color: var(--bs-secondary-color);
}
.enigma-day span {
    display: inline-block;
    padding: .15rem .6rem;
    border-radius: 1rem;
    background: var(--bs-secondary-bg);
}

.enigma-msg {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    margin-top: .5rem;
}
.enigma-msg.grouped { margin-top: .15rem; }
.enigma-msg.mine { justify-content: flex-end; }
.enigma-msg-avatar {
    flex: 0 0 2rem;
    width: 2rem;
}
.enigma-bubble {
    max-width: min(80%, 42rem);
    padding: .4rem .75rem .3rem;
    border-radius: 1.1rem;
    background: var(--bs-secondary-bg);
    overflow-wrap: anywhere;
}
.enigma-msg:not(.mine) .enigma-bubble { border-bottom-left-radius: .35rem; }
.enigma-msg.mine .enigma-bubble {
    border-bottom-right-radius: .35rem;
    background: var(--bs-primary);
    color: #fff;
}
.enigma-msg-author {
    --hue: 210;
    font-size: .8rem;
    font-weight: 600;
    color: hsl(var(--hue) 55% 42%);
}
[data-bs-theme="dark"] .enigma-msg-author { color: hsl(var(--hue) 65% 70%); }
.enigma-msg-time {
    margin-top: .05rem;
    text-align: right;
    font-size: .68rem;
    opacity: .7;
}
.enigma-empty-chat {
    margin: auto;
    padding: 2rem 0;
    text-align: center;
    color: var(--bs-secondary-color);
}

.enigma-composer {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    padding: .5rem .75rem;
    padding-bottom: max(.5rem, env(safe-area-inset-bottom));
    background: var(--bs-body-bg);
}
.enigma-composer textarea {
    resize: none;
    max-height: 10rem;
    border-radius: 1.25rem;
    font-size: 1rem; /* 16px: iOS does not zoom in */
}
.enigma-send {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.4rem;
    border-radius: 1.25rem;
}

.enigma-empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color);
}

/* profile */
.enigma-description { white-space: normal; }
.enigma-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .25rem 1rem;
}
.enigma-facts dt { font-weight: 500; color: var(--bs-secondary-color); }
.enigma-facts dd { margin: 0; }
.enigma-new-user summary { list-style: none; }
.enigma-new-user summary::-webkit-details-marker { display: none; }

/* login */
.enigma-login {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--bs-tertiary-bg);
}
.enigma-login .card { width: 100%; max-width: 22rem; }

/* emoticons */
.enigma-emoticon {
    height: 1.6em;
    width: auto;
    max-width: 4em;
    vertical-align: -.45em;
    object-fit: contain;
}
.enigma-msg.jumbo .enigma-emoticon {
    height: 3rem;
    max-width: 6rem;
    vertical-align: middle;
}
.enigma-msg.jumbo .enigma-bubble {
    padding-left: 0;
    padding-right: 0;
    background: transparent;
}
.enigma-msg.mine.jumbo .enigma-bubble { color: var(--bs-body-color); }

.enigma-composer { position: relative; }
.enigma-emoticon-button {
    flex: 0 0 auto;
    height: 2.4rem;
    font-size: 1.25rem;
}
.enigma-suggest {
    position: absolute;
    bottom: 100%;
    left: .75rem;
    right: .75rem;
    max-width: 22rem;
    max-height: 18rem;
    overflow-y: auto;
    margin-bottom: .25rem;
}
.enigma-suggest .dropdown-item {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.enigma-suggest img { width: 1.75rem; height: 1.75rem; object-fit: contain; }

.enigma-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
    gap: .25rem;
    margin-bottom: .75rem;
}
.enigma-picker-grid button {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border-radius: .5rem;
}
.enigma-picker-grid button:hover,
.enigma-picker-grid button:focus-visible { background: var(--bs-secondary-bg); }
.enigma-picker-grid img { width: 2.25rem; height: 2.25rem; object-fit: contain; }

.enigma-emoticon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.enigma-emoticon-grid li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: .5rem .25rem;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: .5rem;
}
.enigma-emoticon-grid img { width: 2.5rem; height: 2.5rem; object-fit: contain; }
.enigma-emoticon-grid code {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .75rem;
}
.enigma-emoticon-delete {
    position: absolute;
    top: .15rem;
    right: .3rem;
    color: var(--bs-secondary-color);
}
.enigma-emoticon-delete:hover { color: var(--bs-danger); }