/* Chat layout sizing overrides.
   Keep these rules separate from the general application stylesheet so the
   full-viewport behavior is isolated to the chat route. */

.main-layout-content:has(.chat-page) {
    display: flex;
    width: 100%;
    max-width: none !important;
    height: calc(100dvh - var(--wf-mui-appbar-height) - 1rem);
    min-height: 0;
    margin: 0;
    padding: 0;
    flex-direction: column;
    overflow: hidden;
}

.main-layout-content:has(.chat-page) > .chat-page {
    flex: 1 1 auto;
}

.chat-page {
    display: flex;
    width: calc(100% - 2rem);
    max-width: none;
    height: 100%;
    min-height: 0;
    margin: 0 auto;
    padding: 0;
    flex-direction: column;
}

.chat-page .chat-workspace {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-height: 0;
}

/* On wide layouts, let long messages use roughly two thirds of the thread.
   The base app stylesheet has an absolute 48rem cap, which makes bubbles look
   unnecessarily narrow once the chat itself is allowed to fill the viewport. */
.chat-page .message-bubble {
    max-width: 65%;
}

.chat-page .chat-mention {
    display: inline;
    padding: 0 0.2rem;
    border-radius: 0.25rem;
    background: color-mix(in srgb, currentColor 12%, transparent);
    color: inherit;
    font-weight: 650;
}

.chat-page .chat-mention-self {
    outline: 1px solid currentColor;
    outline-offset: 1px;
}

.chat-page .chat-mention-suggestions {
    display: flex;
    max-height: 12rem;
    margin-top: 0.25rem;
    padding: 0.25rem;
    gap: 0.25rem;
    flex-direction: column;
    overflow-y: auto;
    border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
    border-radius: 0.375rem;
}

.chat-page .chat-mention-option {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: 0.25rem;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.chat-page .chat-mention-option:hover,
.chat-page .chat-mention-option:focus-visible {
    background: color-mix(in srgb, currentColor 10%, transparent);
}

.chat-page .chat-mention-option:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

@media (max-width: 800px) {
    .chat-page {
        width: calc(100% - 1rem);
    }

    .chat-page .chat-workspace {
        height: auto;
        min-height: 0;
    }

    .chat-page .message-bubble {
        max-width: 78%;
    }
}

@media (max-width: 520px) {
    .chat-page {
        width: 100%;
        padding-inline: 0;
    }

    .chat-page .message-bubble {
        max-width: 88%;
    }
}