/* =============================================================================
   ATRIUM · 06 · MESSENGER
   =============================================================================
   Direct Messages. One surface, three postures:

     Floor plan (>=64em)   list │ thread │ details
     Adjoining (48–64em)   list │ thread
     Enfilade  (<48em)     one pane; the thread slides over the list

   The conversation is a ROOM, not a dialog: it fills the height it is given
   and only its message column scrolls. Nothing here invents a value — every
   colour, radius, clock and course comes from tokens.
   ========================================================================== */

/* The shell's bottom clearance would double-count inside a surface that
   measures its own height. */
body:has(.v-dm) .v-tabbar-spacer { display: none; }

/* On a phone, an open conversation owns the whole screen — the tab bar steps
   aside the way it does in every native messenger. */
@media (max-width: 47.98em) {
    body:has(.v-dm[data-dm-state="thread"]) .v-tabbar { display: none; }
}

.v-dm {
    --dm-top: calc(var(--at-topbar-h) + env(safe-area-inset-top, 0px));
    --dm-bottom: 0px;
    --dm-list-w: 21rem;
    --dm-details-w: 18rem;

    display: grid;
    grid-template-columns: var(--dm-list-w) minmax(0, 1fr);
    /* --app-vvh (viewport-lock.js) tracks the visual viewport, so the on-screen
       keyboard shrinks the room and the composer rides above it; falls back to
       100dvh when no keyboard / no JS. */
    height: calc(var(--app-vvh, 100dvh) - var(--dm-top) - var(--dm-bottom));
    min-height: 0;
    background: var(--at-bg);
    overflow: hidden;
}

/* The details column only exists when it has something to say. */
.v-dm.is-details-open { grid-template-columns: var(--dm-list-w) minmax(0, 1fr) var(--dm-details-w); }

/* =============================================================================
   1 · THE CONVERSATION LIST
   ========================================================================== */
.v-dm__list {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-inline-end: 1px solid var(--at-hairline);
    background: var(--at-surface);
}

.v-dm-list__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--at-s3);
    padding: var(--at-s5) var(--at-s4) var(--at-s3);
}

/* The one identity moment on this surface. */
.v-dm-list__title {
    margin: 0;
    font-family: var(--at-font-inscription);
    font-size: var(--at-text-2xl);
    font-weight: var(--at-weight-display);
    letter-spacing: var(--at-tracking-display);
    line-height: var(--at-leading-tight);
    color: var(--at-ink);
}

.v-dm-list__tools {
    display: flex;
    flex-direction: column;
    gap: var(--at-s3);
    padding: 0 var(--at-s4) var(--at-s3);
}

.v-dm-search { position: relative; display: flex; align-items: center; }

.v-dm-search > i {
    position: absolute;
    inset-inline-start: var(--at-s3);
    font-size: var(--at-icon-sm);
    color: var(--at-ink-muted);
    pointer-events: none;
    line-height: 1;
}

.v-dm-search__input {
    width: 100%;
    min-height: var(--at-control-h);
    padding: var(--at-s2) var(--at-s3) var(--at-s2) calc(var(--at-s5) + var(--at-s5));
    border: 0;
    border-radius: var(--at-r-pill);
    background: var(--at-surface-sunken);
    color: var(--at-ink);
    font-family: inherit;
    font-size: var(--at-text-md);
    letter-spacing: var(--at-tracking-body);
    transition: background-color var(--at-t-fast) var(--at-ease-out),
                box-shadow var(--at-t-fast) var(--at-ease-out);
}

.v-dm-search__input::placeholder { color: var(--at-ink-muted); }
.v-dm-search__input:focus {
    outline: none;
    background: var(--at-surface-raised);
    box-shadow: 0 0 0 3px var(--at-focus-ring);
}
.v-dm-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.v-dm-filters { display: flex; gap: var(--at-s2); }

.v-dm-chip {
    min-height: var(--at-control-h-sm);
    padding: 0 var(--at-s4);
    border: 0;
    border-radius: var(--at-r-pill);
    background: var(--at-surface-sunken);
    color: var(--at-ink-secondary);
    font: inherit;
    font-size: var(--at-text-sm);
    font-weight: var(--at-weight-medium);
    cursor: pointer;
    transition: background-color var(--at-t-fast) var(--at-ease-out),
                color var(--at-t-fast) var(--at-ease-out);
}

.v-dm-chip:hover { background: var(--at-surface-hover); color: var(--at-ink); }
.v-dm-chip.is-active { background: var(--at-accent); color: var(--at-accent-contrast); }

.v-dm-list__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding: 0 var(--at-s2) var(--at-s4);
}

/* --- a conversation row ---------------------------------------------------- */
.v-dm-row {
    display: flex;
    align-items: center;
    gap: var(--at-s3);
    width: 100%;
    padding: var(--at-s2) var(--at-s2);
    border: 0;
    border-radius: var(--at-r-md);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--at-t-fast) var(--at-ease-out);
}

.v-dm-row:hover { background: var(--at-surface-hover); }
.v-dm-row:focus-visible { outline: 2px solid var(--at-accent); outline-offset: -2px; }

/* The open conversation is stated, not implied. */
.v-dm-row.is-active { background: var(--at-accent-soft); }
.v-dm-row.is-active .v-dm-row__name { color: var(--at-accent-ink); }

.v-dm-row__avatar {
    position: relative;
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border-radius: var(--at-r-pill);
    overflow: visible;
}

.v-dm-row__avatar > img,
.v-dm-row__avatar > .v-skeleton {
    width: 3rem;
    height: 3rem;
    border-radius: var(--at-r-pill);
    object-fit: cover;
    display: block;
    background: var(--at-surface-sunken);
}

/* Presence sits on the avatar's edge with a cut of the panel behind it, so it
   reads as a lamp in a window rather than a sticker. */
.v-dm-row__presence {
    position: absolute;
    inset-block-end: 1px;
    inset-inline-end: 1px;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: var(--at-r-pill);
    background: var(--at-success);
    box-shadow: 0 0 0 2px var(--at-surface);
}

.v-dm-row__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }

.v-dm-row__head,
.v-dm-row__foot {
    display: flex;
    align-items: center;
    gap: var(--at-s2);
    min-width: 0;
}

.v-dm-row__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--at-text-md);
    font-weight: var(--at-weight-medium);
    color: var(--at-ink);
}

.v-dm-row__time {
    flex: 0 0 auto;
    font-size: var(--at-text-xs);
    letter-spacing: var(--at-tracking-meta);
    color: var(--at-ink-muted);
    font-variant-numeric: tabular-nums;
}

.v-dm-row__preview {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--at-text-sm);
    color: var(--at-ink-muted);
}

.v-dm-row__you { color: var(--at-ink-faint); }

.v-dm-receipt { margin-inline-end: var(--at-s1); font-size: var(--at-text-xs); color: var(--at-ink-faint); }
.v-dm-receipt.is-read { color: var(--at-info); }

/* An unread conversation earns weight and ink, not a colour wash. */
.v-dm-row.is-unread .v-dm-row__name { font-weight: var(--at-weight-semibold); }
.v-dm-row.is-unread .v-dm-row__preview { color: var(--at-ink-secondary); font-weight: var(--at-weight-medium); }
.v-dm-row.is-unread .v-dm-row__time { color: var(--at-accent-ink); }

.v-dm-row__badge {
    flex: 0 0 auto;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 var(--at-s1);
    border-radius: var(--at-r-pill);
    background: var(--at-accent);
    color: var(--at-accent-contrast);
    font-size: var(--at-text-xs);
    font-weight: var(--at-weight-semibold);
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- skeleton + states ----------------------------------------------------- */
.v-dm-row--skeleton { pointer-events: none; }
.v-dm-row--skeleton .v-skeleton { height: 0.7rem; border-radius: var(--at-r-xs); }
.v-dm-row--skeleton .v-dm-row__head,
.v-dm-row--skeleton .v-dm-row__foot { width: 100%; }

.v-dm-list__state {
    padding: var(--at-s8) var(--at-s5);
    text-align: center;
}

.v-dm-list__stateicon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: var(--at-s3);
    border-radius: var(--at-r-pill);
    background: var(--at-surface-sunken);
    color: var(--at-ink-muted);
    font-size: var(--at-icon-md);
}

.v-dm-list__statetitle {
    margin: 0 0 var(--at-s1);
    font-size: var(--at-text-md);
    font-weight: var(--at-weight-semibold);
    color: var(--at-ink);
}

.v-dm-list__statetext {
    margin: 0;
    font-size: var(--at-text-sm);
    line-height: var(--at-leading-relaxed);
    color: var(--at-ink-muted);
}

/* =============================================================================
   2 · THE THREAD
   ========================================================================== */
.v-dm__thread {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--at-bg-subtle);
}

/* Nothing selected — the desktop resting state. */
.v-dm-blank {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--at-s2);
    padding: var(--at-s7);
    text-align: center;
}

.v-dm-blank__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: var(--at-s2);
    border-radius: var(--at-r-pill);
    background: var(--at-surface);
    box-shadow: var(--at-edge), var(--at-shadow-sm);
    color: var(--at-accent);
    font-size: var(--at-icon-lg);
}

.v-dm-blank__title {
    margin: 0;
    font-family: var(--at-font-inscription);
    font-size: var(--at-text-xl);
    font-weight: var(--at-weight-display);
    letter-spacing: var(--at-tracking-display);
    color: var(--at-ink);
}

.v-dm-blank__text {
    margin: 0;
    max-width: 26ch;
    font-size: var(--at-text-sm);
    line-height: var(--at-leading-relaxed);
    color: var(--at-ink-muted);
}

.v-dm-thread {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* --- header ---------------------------------------------------------------- */
.v-dm-thread__head {
    display: flex;
    align-items: center;
    gap: var(--at-s2);
    flex: 0 0 auto;
    padding: var(--at-s2) var(--at-s3);
    border-bottom: 1px solid var(--at-hairline);
    background: var(--at-surface);
}

.v-dm-back {
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--at-hit);
    height: var(--at-hit);
    flex: 0 0 auto;
    border: 0;
    border-radius: var(--at-r-pill);
    background: transparent;
    color: var(--at-ink);
    font-size: var(--at-icon-md);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.v-dm-back:hover { background: var(--at-surface-hover); }

.v-dm-peer {
    display: flex;
    align-items: center;
    gap: var(--at-s3);
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--at-s1);
    border-radius: var(--at-r-md);
    color: inherit;
    text-decoration: none;
    transition: background-color var(--at-t-fast) var(--at-ease-out);
}

.v-dm-peer:hover { background: var(--at-surface-hover); color: inherit; }

.v-dm-peer__avatar { position: relative; flex: 0 0 auto; }

.v-dm-peer__avatar > img {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--at-r-pill);
    object-fit: cover;
    display: block;
    background: var(--at-surface-sunken);
}

.v-dm-peer__presence {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    width: 0.6875rem;
    height: 0.6875rem;
    border-radius: var(--at-r-pill);
    background: var(--at-success);
    box-shadow: 0 0 0 2px var(--at-surface);
}

.v-dm-peer__body { display: flex; flex-direction: column; min-width: 0; }

.v-dm-peer__name {
    font-size: var(--at-text-md);
    font-weight: var(--at-weight-semibold);
    letter-spacing: var(--at-tracking-title);
    color: var(--at-ink);
}

.v-dm-peer__sub {
    font-size: var(--at-text-xs);
    letter-spacing: var(--at-tracking-meta);
    color: var(--at-ink-muted);
}

.v-dm-peer__sub.is-online { color: var(--at-success); }

.v-dm-thread__actions { display: flex; align-items: center; gap: var(--at-s1); flex: 0 0 auto; }

.v-dm-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--at-hit);
    height: var(--at-hit);
    border: 0;
    border-radius: var(--at-r-pill);
    background: transparent;
    color: var(--at-ink-secondary);
    font-size: var(--at-icon-sm);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--at-t-fast) var(--at-ease-out),
                color var(--at-t-fast) var(--at-ease-out);
}

.v-dm-iconbtn:hover:not(:disabled) { background: var(--at-surface-hover); color: var(--at-ink); }
.v-dm-iconbtn:disabled { opacity: 0.38; cursor: not-allowed; }
.v-dm-iconbtn.is-active { background: var(--at-accent-soft); color: var(--at-accent-ink); }

/* --- the message column ---------------------------------------------------- */
.v-dm-thread__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--at-s4) var(--at-s4) var(--at-s2);
}

.v-dm-thread__hello {
    margin: auto;
    padding: var(--at-s7) var(--at-s4);
    text-align: center;
    font-size: var(--at-text-sm);
    color: var(--at-ink-muted);
}

/* --- day separator & unread divider ---------------------------------------- */
.v-dm-daysep {
    align-self: center;
    margin: var(--at-s4) 0 var(--at-s3);
    padding: var(--at-s1) var(--at-s3);
    border-radius: var(--at-r-pill);
    background: var(--at-surface-sunken);
    color: var(--at-ink-muted);
    font-size: var(--at-text-xs);
    font-weight: var(--at-weight-medium);
    letter-spacing: var(--at-tracking-meta);
}

/* The line you look for when you come back to a thread. */
.v-dm-unread {
    display: flex;
    align-items: center;
    gap: var(--at-s3);
    margin: var(--at-s4) 0 var(--at-s2);
    color: var(--at-accent-ink);
    font-size: var(--at-text-xs);
    font-weight: var(--at-weight-semibold);
    letter-spacing: var(--at-tracking-caps);
    text-transform: uppercase;
}

.v-dm-unread::before,
.v-dm-unread::after {
    content: "";
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: 0.35;
}

/* --- bubbles --------------------------------------------------------------- */
.v-dm-msg {
    display: flex;
    max-width: min(72%, 34rem);
    -webkit-tap-highlight-color: transparent;
}

.v-dm-msg.is-in  { align-self: flex-start; }
.v-dm-msg.is-out { align-self: flex-end; }

/* A run of messages from one person tightens into a single utterance; the gap
   opens again when the speaker changes. */
.v-dm-msg.bubble-top,
.v-dm-msg.bubble-middle { margin-bottom: 0; }
.v-dm-msg.bubble-bottom,
.v-dm-msg.bubble-single { margin-bottom: var(--at-s3); }

.v-dm-msg__bubble {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: var(--at-s3);
    min-width: 0;
    padding: var(--at-s2) var(--at-s3);
    border-radius: var(--at-r-lg);
    box-shadow: var(--at-edge), var(--at-shadow-xs);
}

.v-dm-msg.is-in .v-dm-msg__bubble {
    background: var(--at-surface-raised);
    color: var(--at-ink);
}

/* Yours carries the one living hue. */
.v-dm-msg.is-out .v-dm-msg__bubble {
    background: var(--at-accent);
    color: var(--at-accent-contrast);
}

/* CONCENTRIC CORNERS: the edge facing the run stays tight so consecutive
   bubbles read as one column of speech. */
.v-dm-msg.is-in.bubble-top    .v-dm-msg__bubble { border-end-start-radius: var(--at-r-xs); }
.v-dm-msg.is-in.bubble-middle .v-dm-msg__bubble { border-start-start-radius: var(--at-r-xs); border-end-start-radius: var(--at-r-xs); }
.v-dm-msg.is-in.bubble-bottom .v-dm-msg__bubble { border-start-start-radius: var(--at-r-xs); }

.v-dm-msg.is-out.bubble-top    .v-dm-msg__bubble { border-end-end-radius: var(--at-r-xs); }
.v-dm-msg.is-out.bubble-middle .v-dm-msg__bubble { border-start-end-radius: var(--at-r-xs); border-end-end-radius: var(--at-r-xs); }
.v-dm-msg.is-out.bubble-bottom .v-dm-msg__bubble { border-start-end-radius: var(--at-r-xs); }

.v-dm-msg__text {
    min-width: 0;
    font-size: var(--at-text-md);
    line-height: var(--at-leading-normal);
    /* A pasted URL or an unbroken string must never widen the column. */
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: pre-wrap;
}

.v-dm-msg__text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Emoji-only messages drop the bubble and speak at their own size. */
.v-dm-msg.only-emoji .v-dm-msg__bubble {
    background: transparent;
    box-shadow: none;
    padding-inline: 0;
}
.v-dm-msg.only-emoji .v-dm-msg__text { font-size: var(--at-text-3xl); line-height: 1.2; }
.v-dm-msg.only-emoji .v-dm-msg__text img,
.v-dm-msg.only-emoji .v-dm-msg__text picture img { width: 2.5rem !important; height: 2.5rem !important; }

/* Inline animated emoji ride the text baseline. */
.v-dm-msg__text picture img { vertical-align: -0.2em; }

.v-dm-msg__meta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--at-s1);
    /* Nudged to the bubble's floor so the time sits on the last line. */
    margin-block-end: 1px;
}

.v-dm-msg__time {
    font-size: 0.6875rem;
    letter-spacing: var(--at-tracking-meta);
    font-variant-numeric: tabular-nums;
    opacity: 0.72;
}

.v-dm-msg__receipt { font-size: 0.55rem; opacity: 0.72; }
.v-dm-msg.is-out .v-dm-msg__receipt.is-read { opacity: 1; color: var(--at-accent-contrast); }

/* --- jump to latest --------------------------------------------------------- */
.v-dm-jump {
    position: absolute;
    inset-inline-end: var(--at-s5);
    inset-block-end: 6.5rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: var(--at-s2);
    min-height: var(--at-control-h-sm);
    padding: 0 var(--at-s4);
    border: 0;
    border-radius: var(--at-r-pill);
    background: var(--at-surface-raised);
    box-shadow: var(--at-edge), var(--at-shadow-md);
    color: var(--at-ink);
    font: inherit;
    font-size: var(--at-text-sm);
    font-weight: var(--at-weight-medium);
    cursor: pointer;
    animation: v-rise var(--at-t-base) var(--at-ease-out);
}

.v-dm-jump:hover { background: var(--at-surface-hover); }

.v-dm-blocked {
    display: flex;
    align-items: center;
    gap: var(--at-s2);
    margin: 0 var(--at-s4) var(--at-s3);
    padding: var(--at-s3) var(--at-s4);
    border-radius: var(--at-r-md);
    background: var(--at-danger-soft);
    color: var(--at-danger);
    font-size: var(--at-text-sm);
}

/* =============================================================================
   3 · THE COMPOSER
   ========================================================================== */
.v-dm-composer {
    flex: 0 0 auto;
    padding: var(--at-s3) var(--at-s4) calc(var(--at-s3) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--at-hairline);
    background: var(--at-surface);
}

.v-dm-composer__row { display: flex; align-items: flex-end; gap: var(--at-s2); }

.v-dm-composer__field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    border-radius: var(--at-r-xl);
    background: var(--at-surface-sunken);
    transition: box-shadow var(--at-t-fast) var(--at-ease-out),
                background-color var(--at-t-fast) var(--at-ease-out);
}

.v-dm-composer__field:focus-within {
    background: var(--at-surface-raised);
    box-shadow: 0 0 0 3px var(--at-focus-ring);
}

.v-dm-composer__input {
    flex: 1 1 auto;
    min-width: 0;
    max-height: 8.75rem;
    padding: var(--at-s3) 0 var(--at-s3) var(--at-s4);
    border: 0;
    background: transparent;
    color: var(--at-ink);
    font-family: inherit;
    /* 16px floor: anything smaller and iOS zooms the page on focus. */
    font-size: var(--at-text-md);
    line-height: var(--at-leading-normal);
    letter-spacing: var(--at-tracking-body);
    resize: none;
    overflow-y: auto;
}

.v-dm-composer__input:focus { outline: none; }
.v-dm-composer__input::placeholder { color: var(--at-ink-muted); }

.v-dm-composer__emoji {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-inline-end: var(--at-s1);
    border: 0;
    border-radius: var(--at-r-pill);
    background: transparent;
    color: var(--at-ink-muted);
    font-size: var(--at-icon-sm);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--at-t-fast) var(--at-ease-out);
}

.v-dm-composer__emoji:hover,
.v-dm-composer__emoji[aria-expanded="true"] { color: var(--at-accent); }

.v-dm-composer__send {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--at-hit);
    height: var(--at-hit);
    border: 0;
    border-radius: var(--at-r-pill);
    background: var(--at-accent);
    color: var(--at-accent-contrast);
    font-size: var(--at-icon-sm);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--at-t-fast) var(--at-ease-out),
                opacity var(--at-t-fast) var(--at-ease-out),
                transform var(--at-t-instant) var(--at-ease-out);
}

.v-dm-composer__send:hover:not(:disabled) { background: var(--at-accent-hover); }
.v-dm-composer__send:active:not(:disabled) { transform: scale(0.94); }

/* Disabled is quiet, not broken: the button stays in place and dims. */
.v-dm-composer__send:disabled {
    background: var(--at-surface-sunken);
    color: var(--at-ink-faint);
    cursor: default;
}

.v-dm-composer__send.is-sending { pointer-events: none; opacity: 0.7; }

.v-dm-composer__picker {
    max-height: 16rem;
    margin-bottom: var(--at-s3);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: var(--at-r-lg);
    background: var(--at-surface-sunken);
    animation: v-rise var(--at-t-base) var(--at-ease-out);
}

/* The mirror only exists to measure the textarea; it must never be seen. */
.input-mirror-wrapper {
    position: absolute;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

/* =============================================================================
   4 · THE DETAILS COLUMN
   ========================================================================== */
.v-dm__details {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-inline-start: 1px solid var(--at-hairline);
    background: var(--at-surface);
}

.v-dm-details__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--at-s2);
    padding: var(--at-s3) var(--at-s3) var(--at-s3) var(--at-s4);
    border-bottom: 1px solid var(--at-hairline);
}

.v-dm-details__title {
    margin: 0;
    font-size: var(--at-text-lg);
    font-weight: var(--at-weight-semibold);
    letter-spacing: var(--at-tracking-title);
}

.v-dm-details__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--at-s6) var(--at-s4);
    text-align: center;
}

.v-dm-details__avatar { display: block; margin: 0 auto var(--at-s3); }

.v-dm-details__avatar > img {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: var(--at-r-pill);
    object-fit: cover;
    background: var(--at-surface-sunken);
}

.v-dm-details__name {
    margin: 0;
    font-family: var(--at-font-inscription);
    font-size: var(--at-text-xl);
    font-weight: var(--at-weight-display);
    letter-spacing: var(--at-tracking-display);
    color: var(--at-ink);
}

.v-dm-details__sub { margin: 0; font-size: var(--at-text-sm); color: var(--at-ink-muted); }

.v-dm-details__presence {
    margin: var(--at-s1) 0 var(--at-s5);
    font-size: var(--at-text-xs);
    color: var(--at-ink-muted);
}

/* =============================================================================
   5 · MOTION
   -----------------------------------------------------------------------------
   Transform and opacity only. A message arrives by rising a few pixels into
   place; nothing here can leave content invisible if it never runs.
   ========================================================================== */
/* A held message (long-press / double-click context menu) lifts while every
   other bubble steps back. footer.php toggles these two classes. */
.chat-bubble.hold-anim .v-dm-msg__bubble { box-shadow: var(--at-edge), var(--at-shadow-md); }
.chat-bubble.hold-anim { z-index: 1; }
.chat-bubble.dimmed { opacity: 0.45; }
.chat-bubble { transition: opacity var(--at-t-fast) var(--at-ease-out); }

.v-dm-msg.receive-anim,
.v-dm-msg.sent-anim { animation: v-bubble-in var(--at-t-slow) var(--at-ease-out); }
.v-dm-msg.is-out.sent-anim { transform-origin: bottom right; }
.v-dm-msg.is-in.receive-anim { transform-origin: bottom left; }

@media (prefers-reduced-motion: reduce) {
    .v-dm-msg.receive-anim,
    .v-dm-msg.sent-anim,
    .v-dm-jump,
    .v-dm-composer__picker { animation: none; }
}

/* =============================================================================
   6 · POSTURES
   ========================================================================== */

/* --- Adjoining: the details column folds away ------------------------------ */
@media (max-width: 63.98em) {
    .v-dm,
    .v-dm.is-details-open { grid-template-columns: var(--dm-list-w) minmax(0, 1fr); }

    /* Details becomes an overlay sheet on the thread rather than a column. */
    .v-dm.is-details-open .v-dm__details {
        position: absolute;
        inset-block: 0;
        inset-inline-end: 0;
        width: min(20rem, 86vw);
        z-index: 5;
        box-shadow: var(--at-shadow-lg);
        animation: v-slide-in-end var(--at-t-base) var(--at-ease-out);
    }

    .v-dm { position: relative; }
}

@keyframes v-slide-in-end {
    from { transform: translateX(100%); }
    to   { transform: none; }
}

/* --- Enfilade: one pane at a time ------------------------------------------ */
@media (max-width: 47.98em) {
    .v-dm {
        --dm-bottom: calc(var(--at-tabbar-h) + env(safe-area-inset-bottom, 0px));
        grid-template-columns: 100%;
        position: relative;
    }

    /* An open conversation takes the tab bar's space back. */
    .v-dm[data-dm-state="thread"] { --dm-bottom: 0px; }

    .v-dm__list { border-inline-end: 0; }

    /* The thread rides over the list and slides in from the inline end — the
       same gesture direction as a native push navigation. */
    .v-dm__thread {
        position: absolute;
        inset: 0;
        z-index: 3;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform var(--at-t-slower) var(--at-ease-inout),
                    visibility 0s linear var(--at-t-slower);
    }

    .v-dm[data-dm-state="thread"] .v-dm__thread {
        transform: none;
        visibility: visible;
        transition: transform var(--at-t-slower) var(--at-ease-inout);
    }

    /* On a phone there is no "nothing selected" state — the list is that state. */
    .v-dm-blank { display: none; }

    .v-dm-back { display: inline-flex; }

    .v-dm-thread__scroll { padding-inline: var(--at-s3); }

    .v-dm-msg { max-width: 82%; }

    .v-dm-list__head { padding: var(--at-s4) var(--at-s4) var(--at-s2); }

    .v-dm-jump { inset-block-end: 5.5rem; inset-inline-end: var(--at-s4); }
}

@media (prefers-reduced-motion: reduce) {
    .v-dm__thread { transition: none; }
    .v-dm.is-details-open .v-dm__details { animation: none; }
}

/* --- Large tablet / laptop: a wider list ----------------------------------- */
@media (min-width: 80em) {
    .v-dm { --dm-list-w: 23rem; --dm-details-w: 20rem; }
    .v-dm-thread__scroll { padding-inline: var(--at-s6); }
}

/* --- Ultrawide: the conversation keeps a reading measure -------------------- */
@media (min-width: 100em) {
    .v-dm { --dm-list-w: 24rem; }
    /* Messages stop stretching; a 2000px-wide bubble is unreadable. */
    .v-dm-thread__scroll > * { width: 100%; max-width: none; }
    .v-dm-thread__scroll {
        padding-inline: max(var(--at-s6), calc((100% - 68rem) / 2));
    }
}

/* Coarse pointers: every control clears the 44px floor. */
@media (pointer: coarse) {
    .v-dm-row { padding-block: var(--at-s3); }
    .v-dm-chip { min-height: var(--at-hit); }
}