/* ====================================================================
   SCREEN 50 — MESSAGES (slice M50a, 2026-10-10). The thread module's
   styles (js/<hub>/thread.js, .vm-th-*), the Message door on 06 and 14
   (.vm-msg-door), and the customer page's phone layer (messages.html,
   .vm-ms-*). Contract: docs/design/pharmacy/briefs/
   2026-10-10_screen-50-contract.md; sheet: docs/design/pharmacy/screens/
   50/FACTS.md (50a-50g; 50-d-states for the dialogs).

   BYTE-IDENTICAL in css/pharmacy/50-messages.css and css/exams/
   50-messages.css (the map-pin precedent): each half links only its own
   copy, after its app.css and before desktop/shared.css. Not under
   desktop/: the thread runs at every width (a page, the phone's sheet,
   the 440 panel); its few desktop rules (the 32 "more" button on pointer
   or focus, the Report sheet as a 480 dialog, the photo as a 720 dialog)
   sit in its own min-width blocks at the foot. The customer page's
   desktop layout (the band, the 764 card fixed to the window, the 340
   case card) is css/pharmacy/desktop/50-messages.css.

   Literal values only (no hub tokens: the two app.css files differ);
   Inter and Space Grotesk; teal #0f6d5c, mint #e3f4f0; red #b42318 for
   a failure only; never a blue, a yellow or an orange. Every target 44.

   Sections:
     1. Helpers
     2. The door (50a)
     3. The thread: frame, scroller, day separators, groups, bubbles
     4. The photo in a bubble; sending; failed
     5. Loading, empty, the failed read
     6. The foot: thanks, the composer, the notes, the count
     7. Closed and delisted (50f)
     8. The sheet's and the panel's head (50d)
     9. The menu, the Report sheet, the photo full screen
    10. The customer page, phone (50b)
    11. From 901: the "more" button, the dialogs
   ==================================================================== */


/* ====================================================================
   1. HELPERS
   ==================================================================== */

.vm-th-vh,
.vm-th-radioinput {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

html.vm-th-lock,
html.vm-th-lock body { overflow: hidden; }


/* ====================================================================
   2. THE DOOR (50a, on 06 and 14): its own bordered row, first in the
   doors group, above the Call / WhatsApp card. Unread in words (teal
   700), never a dot or a badge (C3).
   ==================================================================== */

.vm-msg-door {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 62px;
    padding: 12px 14px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    color: #0f172a;
    font-family: 'Inter', -apple-system, sans-serif;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.vm-msg-door:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }
.vm-msg-door-tile {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #e3f4f0;
    color: #0f6d5c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.vm-msg-door-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.vm-msg-door-t {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: #0f172a;
    overflow-wrap: anywhere;
}
.vm-msg-door-s {
    font-size: 11.5px;
    line-height: 1.35;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}
.vm-msg-door-sep { color: #cbd5e1; }
.vm-msg-door.is-new .vm-msg-door-s { font-weight: 700; color: #0f6d5c; }
.vm-msg-door-chev { flex-shrink: 0; font-size: 13px; color: #64748b; }
.vm-msg-door.is-new .vm-msg-door-chev { color: #0f6d5c; }
@media (hover: hover) {
    .vm-msg-door:hover { background: #f8fafc; color: #0f172a; }
}


/* ====================================================================
   3. THE THREAD
   ==================================================================== */

.vm-th {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-family: 'Inter', -apple-system, sans-serif;
    color: #0f172a;
}
.vm-th-scroll {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 16px 14px;
}
/* The sheet and the panel fill their host; their messages scroll inside. */
.vm-th--sheet,
.vm-th--panel {
    height: 100%;
    background: #f8fafc;
}
.vm-th--sheet .vm-th-scroll,
.vm-th--panel .vm-th-scroll {
    overflow-y: auto;
    overscroll-behavior: contain;
}
.vm-th--panel .vm-th-scroll { padding: 18px; }

.vm-th-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Day separators: "Today", "Sun 27 Sep". */
.vm-th-day {
    display: flex;
    align-items: center;
    gap: 10px;
}
.vm-th-dayrule { flex: 1; height: 1px; background: #e2e8f0; }
.vm-th-daytext {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    font-variant-numeric: tabular-nums;
}

/* A group: one side, one clock. */
.vm-th-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.vm-th-group--mine { align-items: flex-end; }
.vm-th-group--theirs { align-items: flex-start; }
.vm-th-who {
    margin: 0;
    padding: 0 4px;
    font-size: 11.5px;
    font-weight: 700;
    color: #475569;
}
.vm-th-msg {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 82%;
    min-width: 0;
}
.vm-th-group--mine .vm-th-msg {
    flex-direction: column;
    align-items: flex-end;
}
.vm-th-bubbles {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
}
.vm-th-group--mine .vm-th-bubbles { align-items: flex-end; }
.vm-th-group--theirs .vm-th-bubbles { align-items: flex-start; }
.vm-th-bubble {
    margin: 0;
    max-width: 100%;
    padding: 10px 13px;
    font-size: 14.5px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}
.vm-th-group--mine .vm-th-bubble {
    background: #0f6d5c;
    color: #fff;
    border-radius: 18px 18px 6px 18px;
}
.vm-th-group--theirs .vm-th-bubble {
    background: #fff;
    color: #0f172a;
    border: 1px solid #e2e8f0;
    border-radius: 18px 18px 18px 6px;
    -webkit-touch-callout: none;
}
.vm-th-meta {
    margin: 0;
    padding: 2px 4px 0;
    font-size: 11.5px;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}
.vm-th-sep { color: #cbd5e1; }
.vm-th-read { color: #0f6d5c; font-weight: 700; }


/* ====================================================================
   4. THE PHOTO IN A BUBBLE (50c); SENDING; FAILED (50g)
   ==================================================================== */

.vm-th-bubble.vm-th-bubble--photo {
    display: block;
    width: 220px;
    max-width: 100%;
    padding: 4px;
    border: 0;
    font: inherit;
    cursor: pointer;
}
.vm-th-group--theirs .vm-th-bubble--photo { border: 1px solid #e2e8f0; }
.vm-th-img {
    display: block;
    width: 100%;
    height: 150px;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
}
.vm-th-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.vm-th-img img:not([src]) { visibility: hidden; }
button.vm-th-bubble--photo:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }

.vm-th-msg.is-sending .vm-th-bubble--photo .vm-th-img img,
.vm-th-msg.is-queued .vm-th-bubble--photo .vm-th-img img { opacity: .55; }
.vm-th-sending {
    padding: 0 4px;
    font-size: 11.5px;
    color: #64748b;
}

/* Not sent: the bubble keeps its colour, ringed; the way to try again
   under it. */
.vm-th-msg.is-failed .vm-th-bubble { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #b42318; }
.vm-th-retry {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    margin: 0;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: #b42318;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    text-align: right;
    cursor: pointer;
    position: relative;
}
.vm-th-retry::after {
    content: '';
    position: absolute;
    inset: -6px -4px;
}
.vm-th-retry i { font-size: 12px; }
.vm-th-retrygo { color: #0f6d5c; }
.vm-th-retry--photo { font-size: 12.5px; font-weight: 600; line-height: 1.4; text-align: left; }
.vm-th-retry:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; border-radius: 8px; }


/* ====================================================================
   5. LOADING, EMPTY, THE FAILED READ
   ==================================================================== */

.vm-th-loading {
    margin: 0;
    padding: 6px 0;
    font-size: 13px;
    color: #64748b;
}
.vm-th-empty {
    margin: auto 0;
    padding: 0 28px;
    font-size: 14.5px;
    line-height: 1.5;
    color: #475569;
    text-align: center;
    text-wrap: balance;
}
.vm-th-fail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
}
.vm-th-fail[hidden] { display: none; }
.vm-th-fail-t {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: #0f172a;
}
.vm-th-fail-go {
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: #e3f4f0;
    color: #0f6d5c;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}
.vm-th-fail-go:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }
@media (hover: hover) {
    .vm-th-fail-go:hover { background: #d3ede6; }
}


/* ====================================================================
   6. THE FOOT: thanks, the composer, the notes, the count
   ==================================================================== */

.vm-th-foot {
    flex-shrink: 0;
    background: #fff;
    border-top: 1px solid #e2e8f0;
}
.vm-th-foot[hidden] { display: none; }
.vm-th-thanks {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 12px 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: #e3f4f0;
    color: #0f172a;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
}
.vm-th-thanks[hidden] { display: none; }
.vm-th-thanks i { color: #0f6d5c; font-size: 13px; }

.vm-th-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 10px 12px 22px;
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
}
.vm-th-form[hidden] { display: none; }
.vm-th-as {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0 4px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    color: #334155;
}
.vm-th-as[hidden] { display: none; }
.vm-th-as i { font-size: 12px; color: #475569; }

/* The preview (50c): 72 on the placeholder, a 44 remove target. */
.vm-th-pick {
    display: flex;
    align-items: center;
    gap: 12px;
}
.vm-th-pick[hidden] { display: none; }
.vm-th-pickthumb {
    position: relative;
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 12px;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
}
.vm-th-pickimg {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: cover;
}
.vm-th-pickimg:not([src]) { visibility: hidden; }
.vm-th-unpick {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.vm-th-unpick > span {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #0f172a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}
.vm-th-unpick:focus-visible { outline: 2px solid #0f6d5c; outline-offset: -6px; border-radius: 999px; }
.vm-th-picknote {
    font-size: 12.5px;
    line-height: 1.4;
    color: #475569;
}

.vm-th-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}
.vm-th-photo {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #e3f4f0;
    color: #0f6d5c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
}
.vm-th-photo:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }
.vm-th-field {
    flex: 1;
    min-width: 0;
    display: flex;
    min-height: 44px;
    border-radius: 22px;
    background: #f1f5f9;
}
.vm-th-field:focus-within { box-shadow: 0 0 0 2px #0f6d5c; }
.vm-th-text {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 11px 16px;
    box-sizing: border-box;
    border: 0;
    border-radius: 22px;
    background: transparent;
    color: #0f172a;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.45;
    resize: none;
    overflow-y: hidden;
    outline: none;
}
.vm-th-text::placeholder { color: #64748b; opacity: 1; }
.vm-th-send {
    flex-shrink: 0;
    height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: #e2e8f0;
    color: #64748b;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
}
.vm-th-send.is-on {
    background: #0f6d5c;
    color: #fff;
    box-shadow: 0 6px 16px rgba(15, 109, 92, .24);
}
.vm-th-send:disabled { cursor: default; }
.vm-th-send:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }
@media (hover: hover) {
    .vm-th-photo:hover { background: #d3ede6; }
    .vm-th-send.is-on:hover { background: #0c5b4c; }
}

.vm-th-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 0 4px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    color: #b42318;
}
.vm-th-note[hidden] { display: none; }
.vm-th-note i { margin-top: 2px; font-size: 12px; }
.vm-th-note--offline { color: #334155; }
.vm-th-count {
    margin: 0;
    padding: 0 4px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.vm-th-count[hidden] { display: none; }


/* ====================================================================
   7. CLOSED AND DELISTED (50f): the composer gives way.
   ==================================================================== */

.vm-th-closed {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 14px 22px;
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
}
.vm-th-closed[hidden] { display: none; }
.vm-th-lock {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #f1f5f9;
}
.vm-th-lock i { margin-top: 3px; font-size: 12px; color: #475569; }
.vm-th-lock p {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}
.vm-th-calls {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .07);
    overflow: hidden;
}
.vm-th-call {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 62px;
    padding: 10px 14px;
    color: #0f172a;
    text-decoration: none;
}
.vm-th-call + .vm-th-call { border-top: 1px solid #f1f5f9; }
.vm-th-call:focus-visible { outline: 2px solid #0f6d5c; outline-offset: -2px; }
.vm-th-calltile {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #e3f4f0;
    color: #0f6d5c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.vm-th-callmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vm-th-calltitle { font-size: 13px; font-weight: 700; line-height: 1.3; }
.vm-th-callsub { font-size: 11.5px; color: #64748b; font-variant-numeric: tabular-nums; }
.vm-th-call > .fa-angle-right { font-size: 13px; color: #64748b; }
@media (hover: hover) {
    .vm-th-call:hover { background: #f8fafc; color: #0f172a; }
}


/* ====================================================================
   8. THE SHEET'S AND THE PANEL'S HEAD (50d-2, 50-d-counter)
   ==================================================================== */

.vm-th-head {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 10px 12px 18px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
}
.vm-th--sheet .vm-th-head {
    padding-top: 18px;
    border-radius: 22px 22px 0 0;
}
.vm-th-grip {
    position: absolute;
    top: 7px;
    left: 50%;
    width: 40px;
    height: 5px;
    margin-left: -20px;
    border-radius: 999px;
    background: #cbd5e1;
}
.vm-th-headtext { flex: 1; min-width: 0; }
.vm-th-name {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.3px;
    line-height: 1.2;
    color: #0f172a;
    overflow-wrap: anywhere;
}
.vm-th-line {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: #475569;
    font-variant-numeric: tabular-nums;
}
.vm-th-line[hidden] { display: none; }
.vm-th-close {
    flex-shrink: 0;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #0f6d5c;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.vm-th-close:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }
@media (hover: hover) {
    .vm-th-close:hover { background: #e3f4f0; }
}
.vm-th--panel .vm-th-head { padding: 16px 14px 14px 22px; }
.vm-th--panel .vm-th-name { font-size: 20px; letter-spacing: -.4px; }
.vm-th--panel .vm-th-line { font-size: 13px; }
.vm-th--panel .vm-th-close {
    padding: 0 16px;
    background: #f1f5f9;
    color: #0f172a;
    font-size: 13.5px;
}
.vm-th--panel .vm-th-msg { max-width: 320px; }
.vm-th--panel .vm-th-form { padding: 14px 20px 16px; }
@media (hover: hover) {
    .vm-th--panel .vm-th-close:hover { background: #e2e8f0; }
}


/* ====================================================================
   9. THE MENU, THE REPORT SHEET, THE PHOTO FULL SCREEN (50g, 50c-2)
   ==================================================================== */

.vm-th-menu {
    position: fixed;
    z-index: 1300;
    min-width: 150px;
    padding: 4px 0;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(2, 12, 27, .18);
}
.vm-th-menu[hidden] { display: none; }
.vm-th-menuitem {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    background: transparent;
    color: #b42318;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}
.vm-th-menuitem i { font-size: 12px; }
.vm-th-menuitem:focus-visible { outline: 2px solid #0f6d5c; outline-offset: -2px; border-radius: 10px; }
@media (hover: hover) {
    .vm-th-menuitem:hover { background: #f8fafc; }
}

.vm-th-dim,
.vm-th-vdim {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(15, 23, 42, .5);
}
.vm-th-dim[hidden],
.vm-th-vdim[hidden] { display: none; }

/* Report: the phone's bottom sheet. */
.vm-th-report {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1301;
    max-width: 480px;
    margin: 0 auto;
    padding: 18px 18px 22px;
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 10px 30px rgba(2, 26, 21, .18);
    font-family: 'Inter', -apple-system, sans-serif;
    color: #0f172a;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
}
.vm-th-report[hidden] { display: none; }
.vm-th-report > .vm-th-grip { top: 7px; }
.vm-th-rhead {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.vm-th-rheadtext { flex: 1; min-width: 0; }
.vm-th-rh {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.3px;
    line-height: 1.2;
}
.vm-th-rs {
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: #475569;
}
.vm-th-rcancel {
    flex-shrink: 0;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #0f6d5c;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.vm-th-rcancel:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }
.vm-th-rcancel--foot { display: none; }
.vm-th-reasons {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
}
.vm-th-reason {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 10px 14px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    cursor: pointer;
}
.vm-th-reason + .vm-th-reason { border-top: 1px solid #e2e8f0; }
.vm-th-radio {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    box-sizing: border-box;
    border-radius: 999px;
    border: 2px solid #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vm-th-radioinput:checked + .vm-th-radio { border-color: #0f6d5c; }
.vm-th-radioinput:checked + .vm-th-radio::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #0f6d5c;
}
.vm-th-radioinput:focus-visible + .vm-th-radio { outline: 2px solid #0f6d5c; outline-offset: 3px; }
.vm-th-rfail {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    color: #b42318;
}
.vm-th-rfail[hidden] { display: none; }
.vm-th-rfoot { display: flex; }
.vm-th-rsend {
    flex: 1;
    min-height: 52px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: #0f6d5c;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(15, 109, 92, .24);
    cursor: pointer;
}
.vm-th-rsend:disabled {
    background: #e2e8f0;
    color: #64748b;
    box-shadow: none;
    cursor: default;
}
.vm-th-rsend:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }

/* The photo, full screen (50c-2): a signed address, 300 s. */
.vm-th-vdim { background: #020617; }
.vm-th-viewer {
    position: fixed;
    inset: 0;
    z-index: 1301;
    display: flex;
    flex-direction: column;
    background: #020617;
    font-family: 'Inter', -apple-system, sans-serif;
}
.vm-th-viewer[hidden] { display: none; }
.vm-th-vtop {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 0;
}
.vm-th-vclose {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.vm-th-vclose:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.vm-th-vcap {
    margin: 0;
    font-size: 13px;
    color: #e2e8f0;
    font-variant-numeric: tabular-nums;
}
.vm-th-vsep { color: #64748b; }
.vm-th-vimg {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    padding: 16px 0;
}
.vm-th-vimg img {
    display: block;
    width: 100%;
    height: 300px;
    object-fit: contain;
    background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
}


/* The "more" button (Report) beside each of THEIR messages: on the phone
   the long press is the way, so the button is drawn only while a
   keyboard is on it; from 901, on pointer or focus (section 11). The 32
   circle reaches 44 with its hit area. */
.vm-th-more {
    position: relative;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #fff;
    box-shadow: inset 0 0 0 1px #e2e8f0;
    color: #475569;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.vm-th-more::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 999px;
}
.vm-th-more:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }
.vm-th-more:not(:focus-visible):not([aria-expanded="true"]) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}


/* ====================================================================
   10. THE CUSTOMER PAGE, PHONE (messages.html, 50b / 50f / 50g)
   The page draws its own head (the module's 'page' layout has none): the
   back named for where it was opened, the counter's name, the case line,
   and the fixed `tel:` line. The composer stays at the window's foot.
   ==================================================================== */

#vm-ms {
    display: flex;
    flex-direction: column;
    background: #f8fafc;
}
.vm-ms-top {
    position: sticky;
    top: 0;
    z-index: 20;
}
.vm-ms-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 14px 12px;
    background: #fff;
    border-bottom: 1px solid #f1f5f9;
}
.vm-ms-id { min-width: 0; }
.vm-ms-title {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.4px;
    line-height: 1.15;
    color: #0f172a;
    overflow-wrap: anywhere;
}
.vm-ms-title[hidden],
.vm-ms-line[hidden],
.vm-ms-urgent[hidden] { display: none; }
.vm-ms-line {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: #475569;
    font-variant-numeric: tabular-nums;
}
.vm-ms-sep { color: #cbd5e1; }
.vm-ms-urgent {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 8px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    color: #334155;
    font-size: 12.5px;
    line-height: 1.4;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.vm-ms-urgent i { font-size: 11px; color: #0f6d5c; }
.vm-ms-urgent strong { font-weight: 700; color: #0f6d5c; white-space: nowrap; }
.vm-ms-urgentsep { color: #cbd5e1; }
.vm-ms-urgent:focus-visible { outline: 2px solid #0f6d5c; outline-offset: -2px; }

.vm-ms-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.vm-ms-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.vm-ms-thread {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.vm-ms-thread[hidden] { display: none; }
.vm-ms-thread > .vm-th { flex: 1 1 auto; }
.vm-ms-thread .vm-th--page .vm-th-foot {
    position: sticky;
    bottom: 0;
    z-index: 10;
}
/* The case card is the desktop's (css/pharmacy/desktop/50-messages.css). */
.vm-ms-case { display: none; }

.vm-ms-loading {
    margin: 0;
    padding: 22px 14px;
    font-size: 13px;
    color: #64748b;
}
.vm-ms-loading[hidden] { display: none; }

/* Signed out (50g): the card, and its one way in. A failed open: the same
   card's failed-read form. */
.vm-ms-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin: 16px 14px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
}
.vm-ms-card[hidden] { display: none; }
.vm-ms-card-t {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: #0f172a;
}
.vm-ms-card-s {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: #475569;
    font-variant-numeric: tabular-nums;
}
.vm-ms-card-go {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 6px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: #e3f4f0;
    color: #0f6d5c;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.vm-ms-card-go:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }
@media (hover: hover) {
    .vm-ms-card-go:hover { background: #d3ede6; color: #0f6d5c; }
}


/* ====================================================================
   11. FROM 901
   ==================================================================== */

@media (min-width: 901px) {
    /* The "more" button: beside each of their messages, drawn on pointer
       or focus (50-d). */
    .vm-th-more:not(:focus-visible):not([aria-expanded="true"]) {
        position: relative;
        width: 32px;
        height: 32px;
        overflow: visible;
        clip-path: none;
        opacity: 0;
    }
    .vm-th-msg:hover .vm-th-more,
    .vm-th-msg:focus-within .vm-th-more { opacity: 1; }

    .vm-th-menu { border-radius: 12px; }

    /* Report: the 480 dialog (50-d-states). */
    .vm-th-report {
        top: 50%;
        bottom: auto;
        left: 50%;
        right: auto;
        width: 480px;
        max-width: calc(100vw - 48px);
        margin: 0;
        padding: 0;
        gap: 0;
        transform: translate(-50%, -50%);
        border-radius: 20px;
        box-shadow: 0 24px 64px rgba(2, 12, 27, .35);
        max-height: calc(100vh - 48px);
    }
    .vm-th-report > .vm-th-grip { display: none; }
    .vm-th-rhead { padding: 20px 14px 14px 24px; }
    .vm-th-rh { font-size: 20px; letter-spacing: -.4px; }
    .vm-th-rs { font-size: 13px; }
    .vm-th-rcancel--head { display: none; }
    .vm-th-reasons { margin: 0 24px 18px; }
    .vm-th-rfail { padding: 0 24px 12px; }
    .vm-th-rfoot {
        justify-content: flex-end;
        gap: 10px;
        padding: 14px 24px 20px;
        border-top: 1px solid #f1f5f9;
    }
    .vm-th-rcancel--foot {
        display: inline-flex;
        align-items: center;
        min-height: 48px;
        padding: 0 20px;
        background: #f1f5f9;
        color: #0f172a;
        font-size: 14.5px;
    }
    .vm-th-rsend {
        flex: 0 0 auto;
        min-height: 48px;
        font-size: 14.5px;
    }

    /* The photo: a 720 dialog on the dim; Close at its top right. */
    .vm-th-vdim { background: rgba(2, 6, 23, .72); }
    .vm-th-viewer {
        inset: auto;
        top: 50%;
        left: 50%;
        width: 720px;
        max-width: calc(100vw - 48px);
        padding: 12px 12px 20px;
        transform: translate(-50%, -50%);
        border-radius: 20px;
        background: #020617;
        box-shadow: 0 24px 64px rgba(2, 12, 27, .35);
    }
    .vm-th-vtop { justify-content: space-between; padding: 0 0 0 12px; }
    .vm-th-vclose { order: 2; }
    .vm-th-vimg { padding: 12px 0 0; }
    .vm-th-vimg img { height: 260px; border-radius: 10px; }

    @media (hover: hover) {
        .vm-th-rcancel--foot:hover { background: #e2e8f0; }
        .vm-th-rsend:not(:disabled):hover { background: #0c5b4c; }
        .vm-th-more:hover { background: #f8fafc; }
    }
}

@media (prefers-reduced-motion: reduce) {
    .vm-th *,
    .vm-th-report,
    .vm-th-viewer { transition: none; animation: none; }
}