/* css/messages.css
 *
 * Member-to-member messages.
 *
 * Small on purpose. The compose dialog is a .dialogReset panel like every other
 * one on the site, so it already has its frame, its title rule, its close
 * button and its field padding from css/modal.css -- this only styles what a
 * message has that an invitation does not.
 *
 * Everything is scoped to .msg- so the file is safe to load on every section of
 * the dashboard, which is how template.php loads it.
 */

/* ── THE COMPOSE DIALOG ────────────────────────────────────────────────────
 *
 * Wider than the idea-share panel's 680. This one holds a TinyMCE editor with a
 * toolbar on it, and at 680 the toolbar wraps to two rows on a laptop -- which
 * pushes the writing area down and makes the dialog look like a settings panel
 * rather than somewhere to write.
 *
 * min() so it is still 94vw on a phone. resizeModal() sizes the height; the
 * width is ours.
 */
.msg-dialog {
    width: min(760px, 94vw);
}

.msg-to {
    margin: 0 0 14px !important;
    font-size: 18px;
    color: var(--text-muted, #6b6664);
}

.msg-to b {
    color: var(--text-soft, #2c2724);
}

/* What is left of today's allowance, and only when it is nearly gone -- see
 * popup/messageNew.php. Styled as information rather than as a warning: the
 * member has not done anything wrong, and a red box over a message they are
 * part way through writing reads as though they had. */
.msg-cap-note {
    margin: 12px 0 0 !important;
    padding: 8px 12px;
    border-left: 3px solid var(--info, #0971fe);
    background: rgba(9, 113, 254, .06);
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--text-muted, #6b6664);
}

.msg-cap-note i {
    margin-right: 5px;
    color: var(--info, #0971fe);
}

/* The editor, once TinyMCE has replaced the textarea.
 *
 * The border comes from TinyMCE's own skin and sits a pixel out from where the
 * dialog's other fields sit, which shows as a step down the left edge of the
 * form. Matching it to .dialog-field's radius is the whole of the fix. */
.msg-dialog .tox-tinymce {
    border-radius: 4px;
}

/* ── WHAT A MESSAGE'S OWN HTML MAY DRAW ────────────────────────────────────
 *
 * Applied wherever a message body is rendered -- the thread view, and the
 * preview line on the Messages page.
 *
 * This is the other half of messageSanitize(). That function decides what tags
 * may exist; these rules decide how much room they may take. A member can send
 * an <h3> and a 900-pixel-wide uploaded image, both of which are legitimate,
 * and neither of which should be allowed to set the width of the page or shout
 * over the conversation around it.
 *
 * max-width:100% on the image is the load-bearing one: includes/uploadimage.php
 * caps uploads at 800x600, which is wider than a message column on a phone.
 */
.msg-body {
    font-size: 17px;
    line-height: 1.55;
    color: var(--text-soft, #2c2724);
    overflow-wrap: break-word;
}

.msg-body img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 6px 0;
}

.msg-body p {
    margin: 0 0 10px;
}

.msg-body p:last-child {
    margin-bottom: 0;
}

.msg-body h3,
.msg-body h4 {
    font-size: 19px;
    margin: 14px 0 6px;
}

.msg-body ul,
.msg-body ol {
    margin: 0 0 10px;
    padding-left: 24px;
}

.msg-body blockquote {
    margin: 10px 0;
    padding: 2px 0 2px 14px;
    border-left: 3px solid var(--border, #dbdfea);
    color: var(--text-muted, #6b6664);
}

.msg-body table {
    max-width: 100%;
    border-collapse: collapse;
}

.msg-body td,
.msg-body th {
    padding: 4px 8px;
    border: 1px solid var(--border, #dbdfea);
}

/* A message is somebody else's writing, and its links go off the site. They
 * should look like links and not like the page's own furniture. */
.msg-body a {
    color: var(--primary, #016ea9);
    text-decoration: underline;
}


/* ══ THE MESSAGES PAGE ══════════════════════════════════════════════════════
 *
 * Two things at two addresses, sharing one container: the list of conversations
 * (.mi-, for message index) and one conversation (.mt-, for message thread).
 *
 * The list is a stack of rows rather than the Requests page's cards, and that
 * is the one real layout decision here. A request is a decision -- it carries a
 * message, two buttons and a name worth a face, so it earns a card. A
 * conversation in a list is not a decision; it is a line you scan to find the
 * one you want. Rows scan, cards do not.
 */

.mi-empty,
.mi-note {
    margin: 24px 4px;
    font-size: 16px;
    color: var(--text-muted, #6b6664);
}

.mi-note {
    margin: 12px 4px 0;
    font-size: 14px;
}

/* How many are unread, beside the page heading. Only drawn when there are any:
   a zero in a badge is a thing to read for no reason. */
.mi-unread-count {
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
    padding: 2px 10px;
    border-radius: 11px;
    background: var(--primary, #016ea9);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    vertical-align: middle;
}

.mi-card {
    padding: 0;
    overflow: hidden;
}

/* ── ONE CONVERSATION IN THE LIST ─────────────────────────────────────────── */

.mi-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border, #dbdfea);

    /* Transparent, and load-bearing. The unread row below replaces this with a
       coloured bar of the same width -- so a read row and an unread one are
       laid out identically and the list does not shunt sideways by 4px as
       things are read. */
    border-left: 4px solid transparent;

    cursor: pointer;
    transition: background .12s;
}

.mi-row:last-child {
    border-bottom: 0;
}

.mi-row:hover {
    background: var(--bg-muted, #f7f8fa);
}

/* ── READ AND UNREAD, TOLD APART PROPERLY ──────────────────────────────────
 *
 * This was weight and a small dot and nothing else, on the reasoning that a
 * tinted row is the pattern for "selected" and a mailbox opening with five rows
 * apparently selected looks broken. That reasoning was right about tint alone
 * and wrong about the result: two levels of font-weight is not a difference
 * somebody notices while scanning, which is the only moment it matters.
 *
 * What separates "unread" from "selected" is the BAR. A selection highlights a
 * whole row; a marker down one edge is the convention for state, and every
 * mail client in the world uses some version of it. With the bar carrying the
 * signal, the tint underneath can stay faint enough not to shout.
 *
 * Four things move together, which is what makes it unmistakable at a glance:
 * the bar, a light wash, the name and subject going bold and dark, and the dot.
 */
.mi-row--unread {
    border-left-color: var(--primary, #016ea9);
    background: rgba(1, 110, 169, .045);
}

.mi-row--unread:hover {
    background: rgba(1, 110, 169, .08);
}

.mi-row--unread .mi-name,
.mi-row--unread .mi-preview {
    font-weight: 600;
    color: var(--text-dark, #1c1917);
}

/* The subject is bold on every row (see .mi-subject), so unread only darkens
   it -- a 600 here would make an unread subject LIGHTER than a read one. */
.mi-row--unread .mi-subject {
    color: var(--text-dark, #1c1917);
}

/* The one exception: the preview stays muted even when unread. It is a taste of
   the message, not the message -- making all three lines equally black leaves
   nothing for the eye to land on first. */
.mi-row--unread .mi-preview {
    color: var(--text-soft, #2c2724);
}

/* A read row's subject is NOT muted any more (Ben, 2026-10-04). It used to
   recede to --text-muted, which is the preview's colour, and the two lines ran
   together. The bar, the wash, the darker text and the dot still mark unread. */

.mi-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--primary, #016ea9);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

.mi-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* min-width:0 is doing real work: without it a flex child will not shrink below
   its content, so one long unbroken word in a preview widens the row past the
   card and the page grows a horizontal scrollbar. */
.mi-main {
    flex: 1 1 auto;
    min-width: 0;
}

.mi-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.mi-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary, #016ea9);
    cursor: pointer;
}

.mi-name:hover {
    text-decoration: underline;
}

.mi-when {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--text-muted, #6b6664);
}

/* Bold, and set off from the name above it, so it reads as a heading over the
   preview rather than as more of it (Ben, 2026-10-04). */
.mi-subject {
    margin-top: 5px;
    font-size: 15px;
    font-weight: bold;
    color: var(--text-soft, #2c2724);
}

/* One line, cut with an ellipsis. The preview is a hint about what is inside,
   not a summary -- letting it wrap to three lines would turn a list you scan
   into a page you read. */
.mi-subject,
.mi-preview {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mi-preview {
    margin-top: 2px;
    font-size: 14px;
    color: var(--text-muted, #6b6664);
}

.mi-you {
    color: var(--text-muted, #6b6664);
    font-weight: 600;
}

.mi-meta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
}

/* The dot. Bigger than it was, with a ring around it so it reads as a
   deliberate marker rather than a speck of dust on the screen. */
.mi-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--primary, #016ea9);
    box-shadow: 0 0 0 3px rgba(1, 110, 169, .15);
}

/* The "Unread first" switch, in the page heading beside the search.
 *
 * NO margin-left:auto: .mi-find claims that and pushes the pair right together.
 * Two items both claiming it would put a gap BETWEEN them and split the group
 * across the row. mk-switch carries its own look; this only places it. */
.mi-sort {
    flex: 0 0 auto;
    white-space: nowrap;
}

.mi-count {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--bg-muted, #f0f1f4);
    color: var(--text-muted, #6b6664);
    font-size: 12px;
    text-align: center;
}

/* ── THE SIDEBAR'S UNREAD PILL ─────────────────────────────────────────────
 *
 * margin-left:auto pushes it to the far edge of the menu item, past the label.
 * Hidden rather than absent at zero, so js/messages.js has something to write
 * into when the count changes without a page load. */
.msg-nav-count {
    margin-left: auto;
    min-width: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--primary, #016ea9);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    letter-spacing: 0;

    /* Never squeezed. The sidebar is a fixed 165px; with a label as long as
     * "Assignments" the row is full, and a flex item that can shrink is the
     * one that gets pushed past the highlighted background (Ben, 2026-10-05).
     * The label gives way instead -- see the rule below. */
    flex-shrink: 0;

    /* In from the edge, so the pill sits inside the selected item's rounded
     * background rather than against its edge. A margin moves the box itself,
     * so the gap stays honest.
     *
     * No vertical nudge any more. It was pushed down 2px to sit on the label's
     * baseline, but .menu-link already centres its row, and the nudge left the
     * pill visibly low (Ben, 2026-10-05). */
    margin-right: 4px;
}

/* The label beside a pill gives way before the pill does: it may shrink, and a
 * label that still does not fit is cut with an ellipsis rather than pushing the
 * pill out of the row. Label spans carry no class; the icon and the pill do.
 * Only on an item that HAS a pill -- every other label keeps its own wrapping. */
.menu-link:has(.msg-nav-count) > span:not([class]) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ══ ONE CONVERSATION ═══════════════════════════════════════════════════════ */

.mt-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.mt-with {
    margin: 2px 0 0 !important;
    font-size: 15px;
    color: var(--text-muted, #6b6664);
}

.mt-card {
    padding: 0;
}

.mt-msg {
    display: flex;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--border, #dbdfea);
}

.mt-msg:last-child {
    border-bottom: 0;
}

/* The member's own messages, marked but not moved.
 *
 * Deliberately NOT chat bubbles alternating down two sides. This is
 * correspondence, not chat: messages here are long, carry headings and
 * screenshots, and a 60%-width bubble is the wrong shape for any of that. A
 * tint and a rule down the edge say whose it is without taking the width away. */
.mt-msg--mine {
    background: var(--bg-muted, #f7f8fa);
    border-left: 3px solid var(--primary, #016ea9);
}

.mt-msg-main {
    flex: 1 1 auto;
    min-width: 0;
}

.mt-msg-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.mt-msg-who {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark, #1c1917);
}

/* ── THE REPLY BOX ───────────────────────────────────────────────────────── */

.mt-reply {
    margin-top: 16px;
    padding: 16px;
}

.mt-reply label {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark, #1c1917);
}

.mt-reply .tox-tinymce {
    border-radius: 4px;
}

/* The error, off the bottom edge of the editor.
 *
 * .form-message in css/global.css carries margin-bottom and no margin-top,
 * which is right everywhere it is used inside a .form-group -- that wrapper
 * supplies the gap above. The reply box has no wrapper: the textarea TinyMCE
 * replaces is followed directly by this, so without a top margin the red panel
 * appears welded to the foot of the editor and reads as part of it.
 *
 * Scoped to .mt-reply rather than fixed on .form-message, because the compose
 * dialog's copy sits under a .dialogReset .form-group and already has its 14px.
 * Widening the rule would double the gap there. */
.mt-reply .form-message {
    margin-top: 12px;
}

.mt-send {
    margin-top: 12px;
    float: right;
}

/* The line drawn in place of the reply box when the member cannot answer. */
.mt-noreply {
    margin-top: 16px;
    padding: 14px 16px;
    border-left: 3px solid var(--border, #dbdfea);
    background: var(--bg-muted, #f7f8fa);
}

/* ── NARROW SCREENS ───────────────────────────────────────────────────────
 *
 * The message count on a list row is the first thing to go: it is the least
 * useful number on the page and the unread dot beside it carries the only part
 * that matters. Date and name stack rather than sitting on one line, because at
 * 380px a name and a date on one line leaves room for neither. */
@media (max-width: 560px) {

    .mi-count {
        display: none;
    }

    .mi-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .mt-msg,
    .mi-row {
        padding: 12px;
    }

    .mt-head {
        flex-wrap: wrap;
    }
}


/* ══ WHO MAY WRITE TO ME, AND WHO IS BLOCKED ════════════════════════════════
 *
 * Both on the member's own profile card, under the Member Directory switch.
 * They are styled as part of that block rather than as a panel of their own --
 * three settings about how reachable somebody is should read as one group, not
 * as a settings page that has fallen into a profile.
 */

.msg-settings {
    margin-top: 14px;
}

.msg-policy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
}

.msg-policy-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--text-soft, #2c2724);
    cursor: pointer;
}

/* The native control, left alone apart from its size. A custom radio here would
   be a third switch style on one card -- the Directory toggle above is already
   borrowing the Library's. */
.msg-policy-opt input {
    width: 15px;
    height: 15px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--primary, #016ea9);
}

/* The specific groups, indented under "Only these members" so the nesting is
   visible without a box round it. Hidden by inline style until that radio is
   chosen -- js/messages.js owns that, because CSS cannot select on a sibling
   radio's state across a wrapper. */
.msg-policy-sub {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 2px 0 2px 24px;
    padding-left: 10px;
    border-left: 2px solid var(--border, #dbdfea);
}

.msg-policy-sub-opt {
    font-size: 14px;
    color: var(--text-muted, #6b6664);
}

.msg-policy-note {
    margin: 8px 0 0 !important;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--text-muted, #6b6664);
}

#msg-policy-error {
    margin-top: 8px !important;
}

/* ── THE BLOCKED LIST ────────────────────────────────────────────────────── */

.msg-blocked {
    margin-top: 16px;
}

.msg-blocked-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

.msg-blocked-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border, #dbdfea);
    border-radius: 6px;
    background: var(--bg-muted, #f7f8fa);
}

/* The avatar is the list's, not the mailbox's: smaller, because a blocked
   member is a row to recognise rather than somebody being read. */
.msg-blocked-row .mi-avatar {
    width: 28px;
    height: 28px;
    font-size: 13px;
}

/* Pushes the date and the button to the far end, and -- with min-width:0 --
   lets a long name shorten instead of widening the card. */
.msg-blocked-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark, #1c1917);
}

.msg-blocked-when {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--text-muted, #6b6664);
}

/* The Block button on somebody else's profile. Outlined like its neighbours
   until it is pressed -- it is not a destructive action in the way Delete
   Membership is, and colouring it red would put the loudest thing on the card
   next to the friendliest. */
.msg-block i,
.msg-unblock i {
    color: var(--text-muted, #6b6664);
}

.msg-unblock i {
    color: var(--success, #1ee0ac);
}

@media (max-width: 560px) {

    /* The date goes first: the name and the way to undo it are what the row is
       for, and at this width all three will not sit on one line. */
    .msg-blocked-when {
        display: none;
    }
}


/* ══ REPORTING, AND THE STAFF READ-ONLY VIEW ════════════════════════════════ */

/* The flag in a conversation's header. Outlined like Delete beside it -- this
   is a serious control but not a destructive one, and a red button would make
   it the loudest thing on a page somebody is only reading. */
.mt-report i {
    color: var(--text-muted, #6b6664);
}

.mt-report:hover i {
    color: var(--danger, #e85347);
}

/* What replaces it once a report is in. Not a button, because there is nothing
   left to press -- a second report on the same conversation is refused. */
.mt-reported {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    background: var(--bg-muted, #f7f8fa);
    color: var(--text-muted, #6b6664);
    font-size: 14px;
    font-weight: 600;
    cursor: default;
}

.mt-reported i {
    color: var(--danger, #e85347);
}

/* ── THE DIALOG ──────────────────────────────────────────────────────────── */

/* Narrower than the compose dialog. That one holds an editor with a toolbar;
   this is four radios and a small box, and at 760px it would be a wide panel
   with a column of short lines down the left of it. */
.msg-report-dialog {
    width: min(560px, 94vw);
}

.msg-report-note {
    margin: 0 0 16px !important;
    padding: 8px 12px;
    border-left: 3px solid var(--info, #0971fe);
    background: rgba(9, 113, 254, .06);
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--text-muted, #6b6664);
}

.msg-report-note i {
    margin-right: 5px;
    color: var(--info, #0971fe);
}

.msg-report-reasons {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Set apart from the radios above it: it is a different kind of question --
   what is wrong, and then what to do about it. */
.msg-report-block {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--border, #dbdfea);
}

/* ── STAFF READING SOMEBODY ELSE'S CONVERSATION ──────────────────────────── */

/* Warning-toned rather than red. Staff are allowed to be here; the point is
   that the page must not look exactly like their own mailbox, because this is
   two other people's correspondence and that is easy to forget once you are
   three screens into an investigation. */
.mt-staffview {
    margin: 0 0 14px !important;
    padding: 12px 14px;
    border-left: 3px solid var(--warning, #e19407);
    background: rgba(225, 148, 7, .07);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-soft, #2c2724);
}

.mt-staffview i {
    margin-right: 6px;
    color: var(--warning, #e19407);
}


/* ══ THE LIVE REFRESH BAR ═══════════════════════════════════════════════════
 *
 * Offered rather than applied, when a message arrives while the member is
 * looking at Messages -- see onNewMessagePush(). A row moving under a cursor is
 * how somebody opens the wrong conversation, and replacing a page somebody is
 * part-way through typing into is worse than that.
 *
 * Info-toned, not a warning: something good has happened. It sits above the
 * content rather than floating over it, so it moves the page down by its own
 * height once and then stays put -- a fixed overlay would cover the first row
 * of a list somebody is already reading.
 */
.mi-refresh {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 6px;
    border-left: 3px solid var(--primary, #016ea9);
    background: rgba(1, 110, 169, .07);
    font-size: 15px;
    color: var(--text-soft, #2c2724);
}

.mi-refresh i {
    color: var(--primary, #016ea9);
}

/* Pushed to the far edge, so the sentence reads as a sentence and the control
   is where a control goes rather than trailing the words. */
.mi-refresh button {
    margin-left: auto;
    flex: 0 0 auto;
}

/* The toast that says who wrote. The whole line is the target -- somebody told
   they have a message wants to read it, and making them find a small link
   inside the toast is a second decision they should not have to make. */
.msg-toast {
    display: inline-block;
}

.msg-toast:hover {
    text-decoration: underline;
}

@media (max-width: 560px) {

    /* The button drops under the sentence rather than squeezing it to two
       words at the width where both will not fit. */
    .mi-refresh {
        flex-wrap: wrap;
    }

    .mi-refresh button {
        margin-left: 0;
        width: 100%;
    }
}


/* ── FIND BY MEMBER NAME ────────────────────────────────────────────────────
 *
 * IN the heading row, beside the title and the sort switch. It sat on its own
 * line underneath first, and at full width it read as a page-wide filter rather
 * than as a small control -- far more weight than one text box deserves next to
 * a list of four conversations.
 *
 * margin-left:auto makes it the start of the right-hand group: title hard left,
 * search and switch hard right. Only ONE item in a flex row may claim that, so
 * .mi-sort does not -- it follows on the 12px gap .block-between already sets.
 *
 * flex: 0 1 240px -- a fixed idea of the right width that is allowed to shrink
 * when the row is tight, rather than a hard width that would force a wrap a few
 * pixels early. .block-between already wraps, so on a narrow screen this drops
 * to its own line by itself; the media query below then lets it fill that line,
 * which is the one place full width is right.
 *
 * .mk-search is the Library's and the Directory's input, borrowed whole -- the
 * same control doing the same job should not be three pixels different here.
 */
.mi-find {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 240px;
    min-width: 170px;
    margin-left: auto;
}

/* When the sort switch is absent -- a mailbox with one conversation in it --
   the search is the last thing in the row and there is nothing after it to
   space away from. */
.mi-find--last {
    margin-right: 0;
}

/* The magnifier sits inside the field, so the input needs room for it. Absolute
   rather than a flex sibling because it must overlap the box, not stand beside
   it and steal width from a field that is already narrow on a phone. */
.mi-find > i {
    position: absolute;
    left: 11px;
    font-size: 13px;
    color: var(--text-muted, #6b6664);
    pointer-events: none;
}

.mi-find .mk-search {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 32px;
}

/* type="search" draws its own little x in WebKit. It is tiny, it only appears
   once there is text, and it is easy to miss -- so there is a real button
   beside it as well. Hiding the native one avoids two clear affordances an inch
   apart doing the same thing. */
.mi-find .mk-search::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.mi-find-clear {
    flex: 0 0 auto;
    padding: 6px 12px;
    border: 1px solid var(--border, #dbdfea);
    border-radius: 6px;
    background: #fff;
    color: var(--text-muted, #6b6664);
    font-size: 14px;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.mi-find-clear:hover {
    background: var(--bg-muted, #f7f8fa);
    color: var(--text-dark, #1c1917);
}

/* Once the heading row has wrapped, the search has a line to itself and should
   use it -- a 240px box marooned at the left of an empty row looks like
   something that failed to load.
 *
 * margin-left:0 as well as the width: auto would otherwise shove it to the far
 * right of its own line, which is the opposite of where a wrapped control
 * belongs. */
@media (max-width: 720px) {

    .mi-find {
        flex: 1 1 100%;
        margin-left: 0;
    }
}


/* ── THE FIND DROPDOWN ──────────────────────────────────────────────────────
 *
 * Every name it can show is already in the page, so it opens instantly and
 * costs nothing to type into -- see messagePickerType().
 *
 * Absolutely positioned against .mi-find, which is position:relative, so it
 * hangs below the box without taking any space of its own. A dropdown in the
 * flow would push the whole conversation list down and back up again as it
 * opened and closed, which is exactly the jumping this replaced.
 */
.mi-picker {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 40;

    margin: 0;
    padding: 4px;
    list-style: none;

    max-height: 260px;
    overflow-y: auto;

    background: #fff;
    border: 1px solid var(--border, #dbdfea);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

/* [hidden] needs saying: the display:block a list gets by default beats the
   attribute's own user-agent rule in some browsers. */
.mi-picker[hidden] {
    display: none;
}

.mi-picker-opt {
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 15px;
    color: var(--text-soft, #2c2724);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hover and keyboard highlight are the same thing to look at, deliberately --
   two different "this one" styles in one list is one too many to learn. */
.mi-picker-opt:hover,
.mi-picker-opt.is-on {
    background: var(--bg-muted, #f0f1f4);
    color: var(--text-dark, #1c1917);
}

.mi-picker-none {
    padding: 8px 10px;
    font-size: 14px;
    color: var(--text-muted, #6b6664);
    cursor: default;
}