/* Messages page. Filament's colour variables, because the panel's Tailwind
   build has no primary or danger palette of its own. */

/* List, thread and lead details: one column on a phone, list and thread
   from 1024px with the details under the thread, three columns from 1536px. */
.fi-messages-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 1.5rem;
}

.fi-messages-layout > * {
    min-width: 0;
}

@media (min-width: 1024px) {
    .fi-messages-layout {
        grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
    }

    .fi-messages-list {
        grid-row: span 2;
    }

    .fi-messages-lead {
        grid-column: 2;
    }
}

@media (min-width: 1536px) {
    .fi-messages-layout {
        grid-template-columns: minmax(20rem, 24rem) minmax(0, 1fr) 17rem;
        grid-template-rows: auto;
    }

    .fi-messages-list {
        grid-row: auto;
    }

    .fi-messages-lead {
        grid-column: 3;
    }
}

/* The thread scrolls on its own, so the reply box stays in view; it opens
   at the newest message. */
.fi-messages-scroll {
    max-height: max(16rem, calc(100vh - 24rem));
    overflow-y: auto;
    padding-inline-end: 0.25rem;
}

@media (min-width: 1024px) {
    .fi-messages-scroll {
        max-height: max(16rem, calc(100vh - 34rem));
    }
}

/* The thread's buttons on a row of their own under the subject, so a long
   subject or a narrow screen never squeezes the heading. */
.fi-messages-thread-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* The open conversation stands out in the list: a tint, and a bar on the
   left, so it does not rest on colour alone. */
.fi-ta-record.fi-messages-selected {
    background-color: var(--primary-50);
    box-shadow: inset 3px 0 0 var(--primary-600);
}

.dark .fi-ta-record.fi-messages-selected {
    background-color: color-mix(in oklab, var(--primary-500) 10%, transparent);
    box-shadow: inset 3px 0 0 var(--primary-400);
}

/* Unread: bold (set on the columns) and a dot before the name. */
.fi-messages-unread-row .fi-messages-lead-name::before {
    content: '';
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-inline-end: 0.375rem;
    border-radius: 9999px;
    background-color: var(--primary-600);
    vertical-align: middle;
}

.dark .fi-messages-unread-row .fi-messages-lead-name::before {
    background-color: var(--primary-400);
}

/* "Ulæst" for screen readers; the dot and the weight show it on screen. */
.fi-messages-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Long names, addresses and subjects stop at the edge with an ellipsis. */
.fi-messages-list .fi-ta-record-content-ctn > div {
    flex: 1 1 0%;
    min-width: 0;
}

.fi-messages-list .fi-ta-record,
.fi-messages-list .fi-ta-record-content,
.fi-messages-list .fi-grid-col,
.fi-messages-list .fi-ta-col {
    min-width: 0;
}

.fi-messages-truncate,
.fi-messages-lead-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Compact rows: the lines of a conversation sit close together, as in
   Intercom's list, instead of each carrying a table cell's padding. */
.fi-messages-list .fi-ta-record .fi-ta-text {
    padding-block: 0;
}

.fi-messages-list .fi-ta-record-content-ctn {
    padding-block: 0.75rem;
}

/* The search field fills the list's header instead of sitting to the right.
   The header's empty actions slot would otherwise add a gap on the left. */
.fi-messages-list .fi-ta-header-toolbar {
    column-gap: 0;
}

.fi-messages-list .fi-ta-header-toolbar > :nth-child(2) {
    flex: 1 1 auto;
    margin-inline-start: 0;
}

.fi-messages-list .fi-ta-header-toolbar .fi-ta-search-field {
    flex: 1 1 auto;
    width: 100%;
}

.fi-messages-tabs {
    overflow-x: auto;
}

.fi-messages-tabs .fi-tabs-item {
    padding-inline: 0.625rem;
}

.fi-messages-heading {
    overflow-wrap: anywhere;
}

.fi-messages-status {
    display: inline-flex;
    margin-inline-start: 0.5rem;
    vertical-align: middle;
}

/* Phone and small tablet: the list, or the open thread at full width with a
   way back, never both squeezed side by side. */
.fi-messages-back {
    display: none;
}

@media (max-width: 1023px) {
    .fi-messages-layout[data-open='true'] .fi-messages-list {
        display: none;
    }

    .fi-messages-layout[data-open='false'] .fi-messages-thread {
        display: none;
    }

    .fi-messages-back {
        display: block;
    }
}

.fi-messages-message {
    max-width: 85%;
}

.fi-messages-avatar {
    background-color: var(--primary-100);
    color: var(--primary-600);
}

.dark .fi-messages-avatar {
    background-color: color-mix(in oklab, var(--primary-900) 20%, transparent);
    color: var(--primary-400);
}

/* Ours: the primary tint, tail top right. The lead's: grey, tail top left. */
.fi-messages-bubble {
    border-radius: 1rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.fi-messages-bubble-outbound {
    background-color: var(--primary-50);
    border-top-right-radius: 0.25rem;
}

.dark .fi-messages-bubble-outbound {
    background-color: color-mix(in oklab, var(--primary-500) 10%, transparent);
}

.fi-messages-bubble-inbound {
    background-color: var(--gray-100);
    border-top-left-radius: 0.25rem;
}

.dark .fi-messages-bubble-inbound {
    background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
}

.fi-messages-link {
    color: var(--primary-600);
    text-decoration: underline;
}

.dark .fi-messages-link {
    color: var(--primary-400);
}

/* Under our bubble: signature note and status on one line, a longer note
   (why it failed, a delivery hint) on a line of its own below them. */
.fi-messages-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    column-gap: 0.5rem;
    row-gap: 0.25rem;
}

.fi-messages-meta > * {
    flex-shrink: 0;
}

.fi-messages-meta-label {
    white-space: nowrap;
}

.fi-messages-meta-note {
    flex-basis: 100%;
    flex-shrink: 1;
    justify-content: flex-end;
    text-align: right;
}

.fi-messages-failure {
    color: var(--danger-600);
}

.dark .fi-messages-failure {
    color: var(--danger-400);
}

/* Files on a message: one chip each, under the bubble, on the bubble's side. */
.fi-messages-files {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.fi-messages-files-outbound {
    justify-content: flex-end;
}

.fi-messages-file {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    max-width: 16rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--gray-200);
    border-radius: 9999px;
    background-color: var(--color-white);
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--gray-700);
}

.fi-messages-file:hover {
    border-color: var(--primary-500);
    color: var(--primary-600);
}

.dark .fi-messages-file {
    border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    color: var(--gray-200);
}

.dark .fi-messages-file:hover {
    border-color: var(--primary-400);
    color: var(--primary-400);
}

.fi-messages-file-icon {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}

.fi-messages-file-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fi-messages-file-size {
    flex-shrink: 0;
    color: var(--gray-500);
}

/* A file the upload field refused shows the short reason ("Ugyldig filtype",
   "Filen er for stor") and its name; the browser's list of technical types
   under it is left out, as the field's help text names what is allowed. */
.fi-messages-attachments [data-filepond-item-state='load-invalid'] .filepond--file-status-sub {
    display: none;
}

.fi-messages-attachments .filepond--file-status {
    min-width: 0;
    flex-shrink: 1;
}

/* The reply box: text, chosen files and the bar with the paperclip and Send
   in one rounded box, with the focus ring on the whole box, as an input. */
.fi-messages-composer {
    border-radius: 0.75rem;
    background-color: var(--color-white);
    box-shadow:
        0 1px 2px 0 rgb(0 0 0 / 0.05),
        0 0 0 1px color-mix(in oklab, var(--gray-950) 10%, transparent);
    transition: box-shadow 75ms;
}

.fi-messages-composer:focus-within {
    box-shadow: 0 0 0 2px var(--primary-600);
}

.fi-messages-composer:has(.fi-invalid) {
    box-shadow: 0 0 0 1px var(--danger-600);
}

.fi-messages-composer:has(.fi-invalid):focus-within {
    box-shadow: 0 0 0 2px var(--danger-600);
}

.dark .fi-messages-composer {
    background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-white) 20%, transparent);
}

.dark .fi-messages-composer:focus-within {
    box-shadow: 0 0 0 2px var(--primary-500);
}

.dark .fi-messages-composer:has(.fi-invalid) {
    box-shadow: 0 0 0 1px var(--danger-500);
}

.dark .fi-messages-composer:has(.fi-invalid):focus-within {
    box-shadow: 0 0 0 2px var(--danger-500);
}

.fi-messages-composer > .fi-sc {
    gap: 0;
}

/* The text field has no frame of its own inside the box. */
.fi-messages-composer .fi-input-wrp {
    background-color: transparent;
    box-shadow: none !important;
}

.fi-messages-composer .fi-fo-field-wrp-error-message {
    padding-inline: 0.75rem;
}

.fi-messages-composer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0 0.5rem 0.5rem;
}

/* The paperclip as square as the thread's grey buttons are tall. */
.fi-messages-composer-bar .fi-btn.fi-messages-attach {
    padding-inline: 0.375rem;
}

/* A file dragged over the box: the box lights up as on focus. */
.fi-messages-composer.fi-messages-composer-dragging {
    box-shadow: 0 0 0 2px var(--primary-600);
    background-color: var(--primary-50);
}

.dark .fi-messages-composer.fi-messages-composer-dragging {
    box-shadow: 0 0 0 2px var(--primary-500);
    background-color: color-mix(in oklab, var(--primary-500) 10%, var(--gray-900));
}

/* The upload field without its drop area: only the chosen files, as chips
   between the text and the bar. The paperclip and a drop on the box add to
   it. */
.fi-messages-composer .fi-messages-attachments {
    padding-inline: 0.5rem;
}

.fi-messages-composer .fi-messages-attachments .filepond--root {
    margin: 0;
    overflow: visible;
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
}

/* FilePond's height leaves out the chips' bottom margin, so they would be
   cut off at the bottom; the room is given below the field instead. */
.fi-messages-composer .filepond--list-scroller {
    overflow: visible;
}

.fi-messages-composer .fi-messages-attachments:has(.filepond--item) .filepond--root {
    margin-bottom: 0.25rem;
}

.fi-messages-composer .fi-fo-file-upload-error-message {
    padding-inline: 0.25rem;
}

.fi-messages-composer .filepond--drop-label {
    display: none;
}

.fi-messages-composer .filepond--item {
    width: min(18rem, calc(100% - 0.5rem));
    margin: 0.25rem;
}

/* One line per chip: the name gets the room, the second status line (a
   repeat of the limits shown under the files) is left out. */
.fi-messages-composer .filepond--file-status-sub {
    display: none;
}

/* Solid colours: FilePond draws a chip's background in three pieces, and a
   see-through colour shows stripes where they overlap. */
.fi-messages-composer .filepond--item-panel {
    border-radius: 0.5rem;
    background-color: var(--gray-100);
}

.dark .fi-messages-composer .filepond--item-panel {
    background-color: color-mix(in oklab, var(--color-white) 10%, var(--gray-900));
}

.fi-messages-composer .filepond--file {
    color: var(--gray-700);
}

.dark .fi-messages-composer .filepond--file {
    color: var(--gray-200);
}

.fi-messages-composer .filepond--file-action-button {
    background-color: color-mix(in oklab, var(--gray-950) 10%, transparent);
    color: inherit;
}

.fi-messages-composer .filepond--file-action-button:hover,
.fi-messages-composer .filepond--file-action-button:focus {
    box-shadow: none;
}

.fi-messages-composer .filepond--file-action-button:focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: 1px;
}

.dark .fi-messages-composer .filepond--file-action-button {
    background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
}

/* A sent-off file needs no "upload complete" on its chip; a refused one
   keeps its reason, in the danger colour. */
.fi-messages-composer [data-filepond-item-state='processing-complete'] .filepond--file-status {
    display: none;
}

.fi-messages-composer [data-filepond-item-state*='invalid'] .filepond--item-panel,
.fi-messages-composer [data-filepond-item-state*='error'] .filepond--item-panel {
    background-color: var(--danger-50);
}

.fi-messages-composer [data-filepond-item-state*='invalid'] .filepond--file,
.fi-messages-composer [data-filepond-item-state*='error'] .filepond--file {
    color: var(--danger-700);
}

.dark .fi-messages-composer [data-filepond-item-state*='invalid'] .filepond--item-panel,
.dark .fi-messages-composer [data-filepond-item-state*='error'] .filepond--item-panel {
    background-color: color-mix(in oklab, var(--danger-500) 15%, var(--gray-900));
}

.dark .fi-messages-composer [data-filepond-item-state*='invalid'] .filepond--file,
.dark .fi-messages-composer [data-filepond-item-state*='error'] .filepond--file {
    color: var(--danger-300);
}

/* The limits are on the paperclip; under the files they show only once a
   file is refused, so what is allowed is never out of reach. */
.fi-messages-composer .fi-messages-attachments-limits {
    display: none;
    padding: 0.25rem 0.75rem 0.5rem;
}

.fi-messages-composer .fi-fo-field:has([data-filepond-item-state*='invalid'], .fi-fo-field-wrp-error-message) .fi-messages-attachments-limits {
    display: block;
}

/* Under the box: where it is sent and the signature, small and quiet on one
   row, which wraps on a narrow screen. */
.fi-messages-composer-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.25rem;
    padding-inline: 0.25rem;
}

.fi-messages-composer-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
}

.fi-messages-composer-meta-icon {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    color: var(--gray-400);
}

.dark .fi-messages-composer-meta-icon {
    color: var(--gray-500);
}