/*
 * Page-level styles for /chat/. Converse.js styles itself (dist/converse.min.css,
 * theme "dracula"); this file covers what is visible before Converse has
 * started, so the page is dark from the very first frame instead of flashing
 * white, plus a few fixes on top of Converse's styles: fonts, the login form
 * and "Недавние чаты" on phones, and at the end the chat layout on phones
 * (input bar above the keyboard, conversation from the bottom, one-line chat
 * header, emoji picker above the keyboard).
 * Colours are the dracula theme's background/foreground
 * (src/shared/styles/themes/dracula.scss in Converse 14.0.0).
 */
html,
body {
    margin: 0;
    height: 100%;
    background: #282a36;
    color: #f8f8f2;
}

#boot,
#noscript {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
    font: 1.1rem/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

#boot[hidden] {
    display: none;
}

/* Error text (set by init.js) is easier to notice in the theme's red. */
#boot.error {
    color: #ff5555;
}

/*
 * Converse's heading font is "'Muli', normal". Muli has no Cyrillic letters and
 * "normal" is not a font family, so Russian headings ("КОНТАКТЫ", group names)
 * fell back to a serif font. Give it a proper sans-serif fallback. The id makes
 * this rule win over Converse's ".conversejs" rule.
 */
#conversejs.conversejs {
    --heading-font: 'Muli', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/*
 * On phones Converse makes the login form only two thirds of the screen wide,
 * which leaves the name field too narrow next to "@myvpnpers.win". Use the
 * full width with a normal 16px margin instead. (Two ids: wins over
 * Converse's ".conversejs converse-chats.converse-fullscreen #controlbox ...".)
 */
@media (max-width: 575.98px) {
    #conversejs converse-chats.converse-fullscreen #controlbox converse-login-form {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Heading above the login form (replaces the Converse logo, see init.js). */
.chat-heading {
    margin: 2.5rem 0 1.5rem;
    text-align: center;
}

.chat-heading h1 {
    margin: 0;
    color: #f8f8f2;
    font: 600 2.4rem/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.chat-heading p {
    margin: 0.25rem 0 0;
    color: #8be9fd;
    font: 1rem/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/*
 * "Недавние чаты" at the top of the contact panel (init.js, setupRecentChats).
 * It reuses Converse's list classes; this only puts the time on the right and
 * keeps long names on one line.
 */
.myvpnpers-recent {
    margin-bottom: 0.5em;
}

#conversejs .myvpnpers-recent .list-item-link.myvpnpers-recent-item {
    display: flex;
    align-items: baseline;
    gap: 0.75em;
    margin: 0;
    padding: 0.65em 0; /* a finger-sized row on phones, like the contact rows */
}

.myvpnpers-recent-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.myvpnpers-recent-time {
    flex: 0 0 auto;
    opacity: 0.7;
    font-size: 0.85em;
}

/* "← На сайт" in the controlbox footer (login screen and contact list). */
#conversejs .myvpnpers-site-link {
    color: inherit;
    opacity: 0.8;
    text-decoration: none;
    font-size: 0.95em;
}
#conversejs .myvpnpers-site-link:hover,
#conversejs .myvpnpers-site-link:focus {
    opacity: 1;
    text-decoration: underline;
}

/*
 * ---------------------------------------------------------------------------
 * Chat layout on phones: the input bar stays at the bottom of the screen,
 * right above the on-screen keyboard, and the conversation starts at the
 * bottom, like in other messengers. Checked by tools/test_layout.cjs.
 * Element and class names are from Converse 14.0.0:
 * src/plugins/rootview/templates/root.js, src/plugins/chatview/templates/chat.js,
 * src/shared/chat/chat-content.js and the .scss files next to them.
 * ---------------------------------------------------------------------------
 */

/*
 * 1. The page itself never scrolls: Converse's boxes are position: fixed, and
 *    only the message list and the contact list scroll inside them. No
 *    pull-to-refresh or rubber band on the page either: pull-to-refresh
 *    would reload the chat, and the password is not stored.
 */
html,
body {
    overflow: hidden;
    overscroll-behavior: none;
}

/*
 * 2. Every screen (login, contact list, chat) is a ".box-flyout" at the bottom
 *    of <converse-chats> (position: fixed; in Converse bottom 0 and no height),
 *    with height var(--fullpage-chat-height) = 100 * --vh, which Converse sets
 *    from window.innerHeight on "resize" (src/plugins/chatboxviews/utils.js).
 *    On phones the keyboard by default does not make the page smaller (Android
 *    Chrome since version 108, iOS Safari always): it covers the bottom of the
 *    page, where the input bar is, and the browser pushes the whole page up to
 *    show the text field, so the header leaves the screen and the page moves.
 *    Now <converse-chats> covers the viewport (fixed, top 0, bottom 0) and
 *    each box is 100 % of it. With interactive-widget=resizes-content
 *    (viewport tag in index.html) Android Chrome and Firefox make that
 *    viewport smaller when the keyboard opens, so the input bar sits right
 *    above the keyboard and the header stays at the top, with CSS alone.
 *    iOS Safari ignores interactive-widget. There layout.js measures the part
 *    of the page that is visible (window.visualViewport) and, while the
 *    keyboard covers the page, sets class "myvpnpers-vv" on <html> and the two
 *    variables used below: <converse-chats> then fills exactly that part.
 */
#conversejs.conversejs.converse-fullscreen {
    --fullpage-chat-height: 100%;
}

#conversejs.converse-fullscreen converse-chats.converse-fullscreen.converse-chatboxes {
    top: 0;
    bottom: 0;
    height: auto;
}

html.myvpnpers-vv #conversejs.converse-fullscreen converse-chats.converse-fullscreen.converse-chatboxes {
    top: var(--myvpnpers-vv-top, 0px);
    bottom: auto;
    height: var(--myvpnpers-vv-height, 100%);
}

/*
 * 3. Inside a chat: header at the top, the message list takes the rest and
 *    scrolls, the input bar keeps its full height at the bottom. (.chat-body
 *    is the column of a 1:1 chat, .chat-area the one of a group chat.)
 */
#conversejs .chatbox .chat-body > .chat-content,
#conversejs .chatbox .chat-area > .chat-content {
    flex: 1 1 0%;
    min-height: 0;
}

#conversejs .chatbox .chat-head,
#conversejs .chatbox .chat-body > .bottom-panel {
    flex: none;
}

/*
 *    The contact-request notice above the messages is an empty element in
 *    almost every chat, but its margin still took 14 px under the header.
 */
#conversejs .chatbox .chat-body > converse-contact-approval-alert:empty {
    margin: 0;
}

/*
 * 4. Newest messages at the bottom, right above the input bar.
 *    .chat-content__messages is a flex column-reverse scroll box (Converse
 *    relies on that: scrollTop 0 = scrolled to the bottom). Its children are
 *    the "is typing" line and then <converse-message-history>. Converse's
 *    justify-content: space-between put a short history at the TOP, with
 *    empty space below it. flex-start (in column-reverse: the bottom) packs
 *    it at the bottom. A long history overflows, and then space-between
 *    already behaves like flex-start, so scrolling, loading older messages,
 *    the date lines and "Новые сообщения" work exactly as before.
 */
#conversejs .chatbox .chat-content .chat-content__messages {
    justify-content: flex-start;
    overscroll-behavior: contain;
}

/*
 * 5. The text field grows with the text, but at most to 30 % of the visible
 *    height (and never beyond Converse's own 15em), then scrolls inside, so
 *    the input bar never leaves the screen. display: block removes the gap
 *    under an inline textarea that Converse hid with margin-bottom: -4px
 *    (which let the field stick out a pixel below the screen). The font size
 *    stays Converse's 16px: smaller text would make iOS zoom in on focus.
 *    No var() in the first two max-height lines on purpose: a browser that
 *    does not know dvh then keeps the vh line instead of dropping both.
 */
#conversejs converse-chats.converse-fullscreen .chat-textarea {
    display: block;
    margin-bottom: 0;
    overflow-y: auto;
    max-height: min(15em, 30vh);
    max-height: min(15em, 30dvh);
}

html.myvpnpers-vv #conversejs converse-chats.converse-fullscreen .chat-textarea {
    max-height: min(15em, calc(var(--myvpnpers-vv-height, 100vh) * 0.3));
}

/*
 * 6. The header of a chat with one person stays one line high: a long name or
 *    status text ends with "…" instead of wrapping over several lines
 *    (src/plugins/chatview/templates/chat-head.js). Converse already sets
 *    overflow: hidden and text-overflow: ellipsis on both, only
 *    white-space: nowrap was missing. A header of five lines left almost no
 *    room for the conversation with the keyboard open, and on a phone turned
 *    sideways with the keyboard open it pushed the input bar off the screen.
 *    The name's box also gets the name's colour: Converse gives it the header
 *    background colour, which would make the "…" invisible. (Group chat
 *    headers already keep their name on one line; their topic is untouched.)
 */
#conversejs .chatbox .chat-head-chatbox .chatbox-title__text,
#conversejs .chatbox .chat-head-chatbox .chat-head__desc {
    white-space: nowrap;
}

#conversejs .chatbox .chat-head-chatbox .chatbox-title__text {
    color: var(--chat-header-fg-color);
}

/*
 * 7. The emoji picker (smiley button above the text field). Converse opens it
 *    above the button if it fits between the header and the button, and
 *    otherwise BELOW the button, which is off the screen (Popper "flip",
 *    src/shared/components/dropdownbase.js). Opening it focuses its search
 *    field (src/shared/chat/emoji-dropdown.js), so on a phone the keyboard
 *    comes up and leaves only about 310 px above the button, less than the
 *    picker's 340 px: the picker vanished under the keyboard. Its emoji list
 *    (12em in Converse) now gets shorter on low screens so that the whole
 *    picker fits above the button. 22rem = the picker's search field,
 *    category row and skin-tone row, the chat header and the input bar, plus
 *    about 40 px to spare (e.g. for a status line under the name).
 */
#conversejs converse-chats.converse-fullscreen .chatbox converse-emoji-dropdown converse-emoji-picker .emoji-picker__lists {
    height: clamp(3em, calc(100vh - 22rem), 12em);
    height: clamp(3em, calc(100dvh - 22rem), 12em);
}

html.myvpnpers-vv #conversejs converse-chats.converse-fullscreen .chatbox converse-emoji-dropdown converse-emoji-picker .emoji-picker__lists {
    height: clamp(3em, calc(var(--myvpnpers-vv-height, 100vh) - 22rem), 12em);
}

/*
 *    While the picker is open, a text field with many lines shrinks back to
 *    its normal height (the text scrolls inside it), so that the picker also
 *    fits above it then. Browsers without :has() skip this rule.
 */
#conversejs converse-chats.converse-fullscreen .chat-message-form:has(converse-emoji-dropdown .dropdown-menu.show) .chat-textarea {
    max-height: var(--chat-textarea-height, 60px);
}