/*
 * Bulma has no chat/messaging component, so the two-pane layout, bubbles and
 * composer are hand-rolled here (character borrowed from chatcn's "Messaging"
 * layout / "Lunar" theme - indigo accent, ~14px bubble radius, subtle
 * shadows - mapped onto this project's own color tokens, no new hex values).
 * Everything reusable (button, textarea/field, menu) stays in Bulma classes
 * in the templates/TSX - this file only covers the chat-specific primitives.
 */

.chat-page-section {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.chat-island-mount {
    display: flex;
    flex: 1;
    min-height: 0;
}

.chat-layout {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    background-color: var(--white);
    border: 1px solid var(--surface-muted);
    border-radius: 14px;
    /* Tailwind's shadow-lg value, reproduced by hand (this project has no Tailwind). */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.chat-list-pane {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--grey2);
    overflow-y: auto;
}

.chat-thread-pane {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

.chat-list-search {
    flex-shrink: 0;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--surface-muted);
}

/*
 * A <button> doesn't inherit font-size, so it falls back to ~13px and Bulma's
 * width:2.5em then computes narrower than the left search icon. font-size:inherit
 * restores the matching width (same inset from the edge as the left icon), while
 * height:100% pins the button to the input's exact height in any context (the
 * thread input is 35px, the header input 40px) so the x is always dead-centre.
 */
.control.has-icons-right .chat-search-clear.icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    box-shadow: none;
    color: var(--muted-text);
    font-size: inherit;
    cursor: pointer;
    pointer-events: auto;
}

.chat-list-empty {
    padding: 1.5rem;
}

.chat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.chat-list-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.85rem 1rem;
    background: none;
    border: none;
    border-bottom: 1px solid var(--surface-muted);
    cursor: pointer;
    text-align: left;
}

.chat-list-item:hover,
.chat-list-item--active {
    background-color: var(--surface-active);
}

.chat-list-item--unread .chat-list-item__name {
    font-weight: 700;
}

.chat-list-item__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.chat-list-item__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.chat-list-item__name {
    font-family: var(--body-font);
    color: var(--blue2);
}

.chat-list-item__time {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--muted-text);
}

.chat-list-item__preview {
    overflow: hidden;
    color: var(--muted-text);
    font-size: 0.85rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-unread-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    background-color: var(--blue1);
    border-radius: 50%;
}

.chat-avatar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--green);
    color: var(--white);
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 50%;
}

.chat-avatar--small {
    width: 28px;
    height: 28px;
    font-size: 0.7rem;
}

.chat-avatar--spacer {
    background-color: transparent;
}

.chat-thread {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.chat-thread--empty {
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

.chat-thread__header {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.75rem;
    min-height: 4.5rem;
    padding: 1rem;
    border-bottom: 1px solid var(--surface-muted);
    /*
     * The search field expands from width:0, and at the start of that animation
     * its intrinsic content briefly overflows its zero-width box. Since the
     * field is position:absolute anchored in this header, that transient spill
     * would enlarge the header's scroll area and shove the whole message column
     * sideways mid-animation. Clipping it here keeps the column perfectly still;
     * the settled 220px field sits well inside the header, so its focus ring is
     * never clipped.
     */
    overflow: hidden;
}

.chat-thread__name {
    font-family: var(--body-font);
    font-weight: 700;
    color: var(--blue2);
}

/*
 * The header controls are Bulma .button elements, and this project's custom
 * Bulma build inflates every .button with 1.5rem of vertical padding. Left
 * as-is, the search toggle would be taller (~49px) than the avatar (40px) and
 * drive the header height in the closed state; opening the search removes it
 * (the field is position:absolute, out of flow), so the header would snap
 * shorter and the messages would jump. Pinning both controls to the avatar's
 * 2.5rem square keeps the header height identical whether the search is open
 * or closed, so nothing shifts during the expand animation.
 */
.chat-thread__back,
.chat-thread__search {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}

.chat-thread__back:focus,
.chat-thread__back:focus:not(:active),
.chat-thread__back:active {
    border-color: transparent;
    box-shadow: none;
    color: inherit;
}

.chat-thread__search {
    margin-left: auto;
    color: var(--muted-text);
}

.chat-thread__search:focus,
.chat-thread__search:focus:not(:active),
.chat-thread__search:active {
    border-color: transparent;
    box-shadow: none;
    color: var(--muted-text);
}

/*
 * This field sits at the top-right of the header, over the search icon slot.
 * It unrolls from that icon via clip-path on open, and rolls back into it on
 * close (chat-thread__search-field--closing, kept mounted for the reverse
 * animation's duration - see isSearchClosing). clip-path reveals/hides
 * without distorting the content, without affecting layout, and without any
 * overflow - so nothing shifts either way.
 */
.chat-thread__search-field {
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 220px;
    max-width: calc(100% - 2rem);
    margin: 0;
    transform: translateY(-50%);
    animation: chat-search-expand 0.15s ease-out;
}

.chat-thread__search-field--closing {
    animation: chat-search-collapse 0.15s ease-in;
}

@keyframes chat-search-expand {
    from {
        opacity: 0;
        clip-path: inset(0 0 0 100%);
    }

    to {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}

@keyframes chat-search-collapse {
    from {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }

    to {
        opacity: 0;
        clip-path: inset(0 0 0 100%);
    }
}

.chat-thread__messages {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
}

.chat-thread__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.chat-thread__loading .loader {
    width: 2rem;
    height: 2rem;
    border-width: 3px;
}

.chat-date-separator {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1rem;
}

.chat-date-separator > span:first-child {
    margin-bottom: 0.75rem;
    padding: 0.2rem 0.75rem;
    background-color: var(--surface-active);
    color: var(--muted-text);
    font-size: 0.75rem;
    border-radius: 999px;
}

.chat-bubble-row {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 0.4rem;
}

.chat-bubble-row--mine {
    justify-content: flex-end;
}

.chat-bubble-row--theirs {
    justify-content: flex-start;
}

.chat-bubble {
    max-width: 75%;
    padding: 0.6rem 0.9rem;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    font-size: 0.9rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-bubble--mine {
    background-color: var(--blue1);
    color: var(--white);
    border-bottom-right-radius: 4px;
}

.chat-bubble--theirs {
    background-color: var(--grey2);
    color: var(--blue2);
    border-bottom-left-radius: 4px;
}

.chat-bubble__time {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.65rem;
    opacity: 0.7;
}

.chat-composer {
    flex-shrink: 0;
    padding: 1rem;
    border-top: 1px solid var(--surface-muted);
}

.chat-composer__field {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.35rem 0.35rem 0.35rem 1rem;
    background-color: var(--grey2);
    border-radius: 999px;
}

.chat-composer__input {
    flex: 1;
    min-width: 0;
    padding: 0.4rem 0;
    background: none;
    border: none;
    outline: none;
    box-shadow: none;
    resize: none;
    font-family: var(--body-font);
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--blue2);
}

.chat-composer__input::placeholder {
    color: var(--muted-text);
}

.chat-composer__send {
    position: relative;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    background-color: var(--blue1);
    color: var(--white);
    border: none;
    border-radius: 50%;
}

.chat-composer__send:hover {
    background-color: var(--blue1);
    color: var(--white);
}

.chat-composer__send:disabled {
    background-color: transparent;
    color: var(--muted-text);
}

.chat-composer__send.is-loading {
    cursor: not-allowed;
    background-color: var(--blue1);
    color: var(--white);
}

.chat-composer__send.is-loading .icon {
    visibility: hidden;
}

.chat-composer__send.is-loading::after {
    content: "";
    position: absolute;
    top: calc(50% - 0.5em);
    left: calc(50% - 0.5em);
    width: 1em;
    height: 1em;
    border: 2px solid var(--white);
    border-color: transparent transparent var(--white) var(--white);
    border-radius: 50%;
    animation: chat-composer-spin 0.5s infinite linear;
}

@keyframes chat-composer-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@media (min-width: 768px) {
    .chat-layout {
        flex-direction: row;
    }

    .chat-list-pane {
        width: 320px;
        flex-shrink: 0;
        border-right: 1px solid var(--surface-muted);
    }
}