@visns-studio/visns-components 6.6.3 → 6.15.0

package/src/components/styles/Sms.module.scss

@@ -0,0 +1,2382 @@
+// ---------------------------------------------------------------------------
+// Messaging (components/sms/*)
+// ---------------------------------------------------------------------------
+// The SMS inbox: a popover in the navigation's action pill (SmsInboxBadge),
+// the two-pane page behind it (SmsInbox), the conversation pane on its own
+// (SmsThreadPanel), the compose modal, and the settings screen.
+//
+// Every brand value is a CSS custom property with a neutral fallback, exactly
+// as in Vault.module.scss, so the library carries no palette of its own.
+//
+// IMPORTANT — why every control below restates its colour, background,
+// border, font-size AND box size:
+//
+// The popover mounts INSIDE `.hactions > ul`, whose chip rules reach every
+// descendant `a` and `button` and hand it white text, a fixed 36px box and a
+// pill radius. On a white panel that renders as blank boxes. Navigation.module
+// .scss excludes `[data-nav-overlay] *` from those rules, which is the real
+// fix, but a component that survives only because its host is well behaved is
+// a component that breaks the next time it is mounted somewhere new. So
+// nothing here inherits anything it actually needs, and no `!important` was
+// required to do it.
+// ---------------------------------------------------------------------------
+
+$sms-mono: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
+
+@mixin sms-tokens {
+    --s-primary: var(--primary-color, #00386c);
+    --s-secondary: var(--secondary-color, #404040);
+    --s-paragraph: var(--paragraph-color, #2b2b2b);
+    --s-background: var(--background-color, #fff);
+    --s-br: var(--br, 6px);
+    --s-btn-br: var(--btn-br, 6px);
+
+    --s-line: color-mix(in srgb, var(--s-paragraph) 18%, transparent);
+    // 76% of the body colour over white lands around #5b5b5b — roughly 6:1,
+    // comfortably past 4.5:1 on the small type this file is full of.
+    --s-muted: color-mix(in srgb, var(--s-paragraph) 76%, transparent);
+    --s-surface: color-mix(in srgb, var(--s-paragraph) 4%, var(--s-background));
+    --s-hover: color-mix(in srgb, var(--s-primary) 9%, var(--s-background));
+    --s-tint: color-mix(in srgb, var(--s-primary) 12%, var(--s-background));
+    --s-ok: rgb(31, 122, 71);
+    --s-warn: rgb(163, 106, 20);
+    --s-bad: rgb(190, 62, 62);
+    // A selected row. Deliberately fainter than `--s-tint`: on a list where
+    // one row is always selected, a strong fill reads as an alert.
+    --s-select: color-mix(in srgb, var(--s-primary) 8%, var(--s-background));
+    // One height for every control that sits beside another control.
+    --s-control: 34px;
+
+    // The two bubble skins. Incoming is a neutral card; outgoing is the brand
+    // colour, which is the only place in the module white text is correct.
+    --s-in-bg: color-mix(in srgb, var(--s-paragraph) 7%, var(--s-background));
+    --s-in-fg: var(--s-paragraph);
+    --s-out-bg: var(--s-primary);
+    --s-out-fg: #fff;
+}
+
+// Undo anything a host may have imposed on a generic element. Applied to every
+// interactive element in the module — see the note at the top of the file.
+@mixin sms-reset {
+    box-sizing: border-box;
+    width: auto;
+    height: auto;
+    min-width: 0;
+    min-height: 0;
+    max-width: none;
+    margin: 0;
+    font-family: inherit;
+    font-weight: 400;
+    line-height: 1.3;
+    letter-spacing: normal;
+    text-transform: none;
+    text-decoration: none;
+    text-align: left;
+    appearance: none;
+    outline: none;
+    transform: none;
+    box-shadow: none;
+    // The host's chip rules transition `all`, which makes a control visibly
+    // resize on hover once its box is no longer fixed.
+    transition: background-color 0.15s ease, color 0.15s ease,
+        border-color 0.15s ease;
+}
+
+@mixin sms-focus {
+    &:focus-visible {
+        outline: 2px solid var(--s-primary);
+        outline-offset: 2px;
+    }
+}
+
+// A checkbox or a radio, and nothing else.
+//
+// The host CRM styles bare `input` — padding, a min-width, a text-field
+// height, a pill radius — none of it typed, so it lands on `input[type=radio]`
+// too and renders a choice as a pair of wide ovals with a dot floating in
+// them. `sms-reset` cannot help: it deliberately unsets `appearance`, which
+// for these two is what draws the control at all. So this is the inverse of
+// the reset — the native box restated, and the native painting asked for back.
+@mixin sms-check {
+    @include sms-focus;
+
+    flex: 0 0 auto;
+    box-sizing: border-box;
+    width: 16px;
+    height: 16px;
+    min-width: 16px;
+    min-height: 16px;
+    max-width: 16px;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    box-shadow: none;
+    appearance: auto;
+    -webkit-appearance: auto;
+    accent-color: var(--s-primary);
+    cursor: pointer;
+    vertical-align: middle;
+}
+
+@keyframes smsSpin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes smsPopIn {
+    from {
+        opacity: 0;
+        transform: translateY(-4px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.spin {
+    animation: smsSpin 1s linear infinite;
+    flex-shrink: 0;
+}
+
+.muted {
+    color: var(--s-muted);
+}
+
+.visuallyHidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+// ---------------------------------------------------------------------------
+// Shared controls
+// ---------------------------------------------------------------------------
+
+.primaryButton {
+    @include sms-reset;
+    @include sms-focus;
+
+    display: inline-flex;
+    flex-shrink: 0;
+    gap: 0.4rem;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem 0.85rem;
+    border: 1px solid var(--s-primary);
+    border-radius: var(--s-btn-br);
+    background: var(--s-primary);
+    color: #fff;
+    font-size: 0.82rem;
+    font-weight: 600;
+    white-space: nowrap;
+    cursor: pointer;
+
+    svg {
+        flex-shrink: 0;
+        color: currentColor;
+    }
+
+    &:hover:not(:disabled) {
+        border-color: color-mix(in srgb, var(--s-primary) 85%, #000);
+        background: color-mix(in srgb, var(--s-primary) 85%, #000);
+        color: #fff;
+    }
+
+    &:disabled {
+        opacity: 0.55;
+        cursor: default;
+    }
+}
+
+.ghostButton {
+    @include sms-reset;
+    @include sms-focus;
+
+    display: inline-flex;
+    flex-shrink: 0;
+    gap: 0.4rem;
+    align-items: center;
+    justify-content: center;
+    padding: 0.45rem 0.75rem;
+    border: 1px solid var(--s-line);
+    border-radius: var(--s-btn-br);
+    background: var(--s-background);
+    color: var(--s-paragraph);
+    font-size: 0.8rem;
+    font-weight: 500;
+    white-space: nowrap;
+    cursor: pointer;
+
+    svg {
+        flex-shrink: 0;
+        color: currentColor;
+    }
+
+    &:hover:not(:disabled) {
+        border-color: var(--s-primary);
+        background: var(--s-hover);
+        color: var(--s-primary);
+    }
+
+    &:disabled {
+        opacity: 0.5;
+        cursor: default;
+    }
+}
+
+.iconButton {
+    @include sms-reset;
+    @include sms-focus;
+
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    min-width: 30px;
+    padding: 0;
+    border: 1px solid var(--s-line);
+    border-radius: var(--s-btn-br);
+    background: var(--s-background);
+    color: var(--s-secondary);
+    cursor: pointer;
+
+    svg {
+        flex-shrink: 0;
+        color: currentColor;
+    }
+
+    &:hover:not(:disabled) {
+        border-color: var(--s-primary);
+        background: var(--s-tint);
+        color: var(--s-primary);
+    }
+
+    &:disabled {
+        opacity: 0.55;
+        cursor: default;
+    }
+}
+
+.linkButton {
+    @include sms-reset;
+    @include sms-focus;
+
+    display: inline-flex;
+    gap: 0.3rem;
+    align-items: center;
+    padding: 0;
+    border: none;
+    background: none;
+    color: var(--s-primary);
+    font-size: 0.8rem;
+    font-weight: 600;
+    cursor: pointer;
+
+    svg {
+        flex-shrink: 0;
+        color: currentColor;
+    }
+
+    &:hover:not(:disabled) {
+        color: var(--s-primary);
+        text-decoration: underline;
+    }
+
+    &:disabled {
+        opacity: 0.5;
+        cursor: default;
+    }
+}
+
+.dangerLink {
+    @extend .linkButton;
+
+    color: var(--s-bad);
+
+    &:hover:not(:disabled) {
+        color: var(--s-bad);
+    }
+}
+
+.input,
+.textarea,
+.select {
+    @include sms-reset;
+    @include sms-focus;
+
+    width: 100%;
+    padding: 0.5rem 0.6rem;
+    border: 1px solid var(--s-line);
+    border-radius: var(--s-btn-br);
+    background: var(--s-background);
+    color: var(--s-paragraph);
+    font-size: 0.87rem;
+
+    &::placeholder {
+        color: var(--s-muted);
+        opacity: 1;
+    }
+
+    &:focus {
+        border-color: var(--s-primary);
+    }
+
+    &:disabled {
+        background: var(--s-surface);
+        opacity: 0.7;
+    }
+}
+
+.textarea {
+    line-height: 1.5;
+    resize: vertical;
+}
+
+.select {
+    height: var(--s-control);
+    min-height: var(--s-control);
+    padding: 0 1.8rem 0 0.6rem;
+    // The native arrow goes with `appearance: none` in the reset, so it is
+    // drawn back on rather than left missing.
+    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
+        linear-gradient(135deg, currentColor 50%, transparent 50%);
+    background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
+    background-size: 5px 5px, 5px 5px;
+    background-repeat: no-repeat;
+    cursor: pointer;
+}
+
+.field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+}
+
+.label {
+    color: var(--s-muted);
+    font-size: 0.74rem;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+
+.help {
+    margin: 0;
+    color: var(--s-muted);
+    font-size: 0.75rem;
+    line-height: 1.5;
+}
+
+.fieldError {
+    display: flex;
+    gap: 0.3rem;
+    align-items: center;
+    margin: 0;
+    color: var(--s-bad);
+    font-size: 0.76rem;
+    font-weight: 500;
+}
+
+.checkRow {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+
+    label {
+        display: inline-flex;
+        gap: 0.5rem;
+        align-items: center;
+        color: var(--s-paragraph);
+        font-size: 0.84rem;
+        line-height: 1.2;
+        cursor: pointer;
+    }
+
+    input[type='radio'],
+    input[type='checkbox'] {
+        @include sms-check;
+    }
+
+    // Square for a checkbox, round for a radio — restated because the reset
+    // above zeroes the radius, and a radio with a 6px radius is an oval.
+    input[type='radio'] {
+        border-radius: 50%;
+    }
+}
+
+.inlineCheck {
+    display: inline-flex;
+    gap: 0.45rem;
+    align-items: center;
+    color: var(--s-paragraph);
+    font-size: 0.82rem;
+    line-height: 1.2;
+    cursor: pointer;
+
+    input[type='checkbox'],
+    input[type='radio'] {
+        @include sms-check;
+    }
+
+    input[type='radio'] {
+        border-radius: 50%;
+    }
+}
+
+// ONE field with the icon inside it — not a bordered strip wrapped around a
+// bordered input. The input below carries no border of its own, and the height
+// is the same `--s-control` every select and button beside it uses, so a row
+// of controls lines up on both edges.
+.searchBar {
+    @include sms-reset;
+
+    display: flex;
+    gap: 0.45rem;
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    height: var(--s-control);
+    min-height: var(--s-control);
+    padding: 0 0.55rem;
+    border: 1px solid var(--s-line);
+    border-radius: var(--s-btn-br);
+    background: var(--s-background);
+    color: var(--s-muted);
+
+    &:focus-within {
+        border-color: var(--s-primary);
+    }
+
+    svg {
+        flex-shrink: 0;
+        color: var(--s-muted);
+    }
+}
+
+.searchInput {
+    @include sms-reset;
+
+    flex: 1;
+    // The host styles bare `input` with a border, a padding and a height of
+    // its own; every one of those is restated away here, which is what keeps
+    // this a field rather than a field inside a field.
+    height: 100%;
+    min-width: 0;
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    color: var(--s-paragraph);
+    font-size: 0.86rem;
+
+    &::placeholder {
+        color: var(--s-muted);
+        opacity: 1;
+    }
+}
+
+.pill {
+    display: inline-flex;
+    gap: 0.25rem;
+    align-items: center;
+    padding: 0.12rem 0.5rem;
+    border-radius: 999px;
+    font-size: 0.72rem;
+    font-weight: 700;
+    white-space: nowrap;
+}
+
+.pillOk {
+    background: color-mix(in srgb, var(--s-ok) 15%, var(--s-background));
+    color: var(--s-ok);
+}
+
+.pillWarn {
+    background: color-mix(in srgb, var(--s-warn) 16%, var(--s-background));
+    color: var(--s-warn);
+}
+
+.pillBad {
+    background: color-mix(in srgb, var(--s-bad) 15%, var(--s-background));
+    color: var(--s-bad);
+}
+
+.pillMuted {
+    background: color-mix(in srgb, var(--s-paragraph) 12%, var(--s-background));
+    color: var(--s-muted);
+}
+
+// A person, or a number, as at most two letters in a circle.
+//
+// One fixed size wherever it appears: the avatar is the left edge of every
+// list in this module, and a circle that resizes with its contents is what
+// makes a column of rows zig-zag.
+.avatar {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 32px;
+    height: 32px;
+    min-width: 32px;
+    max-width: 32px;
+    border-radius: 50%;
+    background: var(--s-tint);
+    color: var(--s-primary);
+    font-size: 0.72rem;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    // Two digits and two letters must occupy the same width, or a list of
+    // mixed rows looks ragged.
+    font-variant-numeric: tabular-nums;
+    text-transform: uppercase;
+    // A helper that ever returned three characters must not widen the circle:
+    // the layout is the contract, not the string.
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.avatarLg {
+    width: 36px;
+    height: 36px;
+    font-size: 0.8rem;
+}
+
+// ---------------------------------------------------------------------------
+// Status notes and banners
+// ---------------------------------------------------------------------------
+
+// One line, and it stays one line.
+//
+// This was a two-line block with a heading and a paragraph, and on a page
+// whose whole job is a list of conversations it dominated the screen — a
+// standing notice about a connection nobody can do anything about from here.
+// Icon, the fact, a short note that ellipses. Nothing wraps.
+.banner {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0.4rem 0.7rem;
+    border: 1px solid var(--s-line);
+    border-radius: var(--s-br);
+    background: var(--s-surface);
+    color: var(--s-paragraph);
+    font-size: 0.78rem;
+    line-height: 1.4;
+
+    svg {
+        flex-shrink: 0;
+    }
+
+    strong {
+        flex-shrink: 0;
+        color: inherit;
+        font-weight: 700;
+    }
+}
+
+.bannerNote {
+    min-width: 0;
+    overflow: hidden;
+    color: color-mix(in srgb, currentColor 72%, transparent);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.bannerWarn {
+    border-color: color-mix(in srgb, var(--s-warn) 45%, transparent);
+    background: color-mix(in srgb, var(--s-warn) 10%, var(--s-background));
+    color: color-mix(in srgb, var(--s-warn) 80%, var(--s-paragraph));
+
+    svg {
+        color: var(--s-warn);
+    }
+}
+
+.bannerBad {
+    border-color: color-mix(in srgb, var(--s-bad) 45%, transparent);
+    background: color-mix(in srgb, var(--s-bad) 9%, var(--s-background));
+    color: color-mix(in srgb, var(--s-bad) 80%, var(--s-paragraph));
+
+    svg {
+        color: var(--s-bad);
+    }
+}
+
+.bannerOk {
+    border-color: color-mix(in srgb, var(--s-ok) 40%, transparent);
+    background: color-mix(in srgb, var(--s-ok) 9%, var(--s-background));
+    color: color-mix(in srgb, var(--s-ok) 80%, var(--s-paragraph));
+
+    svg {
+        color: var(--s-ok);
+    }
+}
+
+// The one-line version, for the popover.
+.statusNote {
+    display: flex;
+    gap: 0.4rem;
+    align-items: center;
+    padding: 0.45rem 0.85rem;
+    border-top: 1px solid var(--s-line);
+    background: color-mix(in srgb, var(--s-warn) 8%, var(--s-background));
+    color: color-mix(in srgb, var(--s-warn) 85%, var(--s-paragraph));
+    font-size: 0.75rem;
+    line-height: 1.4;
+
+    svg {
+        flex-shrink: 0;
+        color: var(--s-warn);
+    }
+}
+
+// ---------------------------------------------------------------------------
+// SmsInboxBadge — the header trigger and its popover
+// ---------------------------------------------------------------------------
+
+.quickSms {
+    @include sms-tokens;
+
+    position: relative;
+    align-items: center;
+}
+
+// Deliberately the same shape as Notification's and the vault's triggers:
+// these sit side by side in the action pill and must read as one row of chips,
+// not three designs. This one DOES inherit the header's colour, which is
+// correct — it is a chip.
+.trigger {
+    @include sms-focus;
+
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    padding: 8px;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--paragraph-color, #333);
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+        background-color: rgba(var(--primary-color-rgb, 0, 86, 179), 0.1);
+        color: var(--primary-color, #0056b3);
+        transform: scale(1.05);
+    }
+
+    &:active {
+        transform: scale(0.95);
+    }
+}
+
+// Matches Notification's badge, down to the offsets: two unread counts side by
+// side in the header have to sit on the same line as each other.
+.badge {
+    position: absolute;
+    top: -2px;
+    right: -2px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    min-width: 16px;
+    height: 16px;
+    padding: 0 4px;
+    border-radius: 8px;
+    background-color: var(--secondary-color, #c1272d);
+    color: #fff;
+    font-size: 10px;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+}
+
+.popoverWrapper {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    z-index: 1100;
+    margin-top: 10px;
+    // The host's chip `li` is a centring flex container. The popover is
+    // absolutely positioned so it escapes the flexbox, but `text-align` is
+    // inherited and would centre every line of prose inside it.
+    text-align: left;
+}
+
+.popover {
+    @include sms-tokens;
+
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    width: 420px;
+    max-width: calc(100vw - 2rem);
+    border: 1px solid var(--s-line);
+    border-radius: 10px;
+    // Opaque, and stated: the header behind this is a dark brand bar, and a
+    // panel that inherits any of it is unreadable.
+    background: var(--s-background);
+    color: var(--s-paragraph);
+    font-size: 0.85rem;
+    text-align: left;
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.12);
+    overflow: hidden;
+    animation: smsPopIn 0.18s ease-out;
+}
+
+.popoverHead {
+    display: flex;
+    gap: 0.75rem;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.7rem 0.85rem;
+    border-bottom: 1px solid var(--s-line);
+    background: var(--s-surface);
+}
+
+.popoverTitle {
+    display: inline-flex;
+    gap: 0.4rem;
+    align-items: center;
+    color: var(--s-paragraph);
+    font-size: 0.95rem;
+    font-weight: 700;
+
+    svg {
+        color: var(--s-primary);
+    }
+}
+
+.rows {
+    max-height: 360px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    overflow-y: auto;
+
+    // Two hosts reach in here with bare element selectors: Navigation's
+    // `.hactions > ul li` (now scoped to `> li`, but this file does not get
+    // to assume its host has been fixed) and the CRM's own
+    // `ul { padding-left: … }` in main.scss. Restated so the list is a list
+    // wherever it is mounted.
+    > li {
+        min-width: 0;
+        min-height: 0;
+        margin: 0;
+        padding: 0;
+        position: static;
+        list-style: none;
+    }
+}
+
+// Specificity, deliberately.
+//
+// `.hactions > ul li` was 0,1,2 — two element selectors and a class — and no
+// single class can outrank it. Everything below is the row's BOX, restated at
+// 0,2,0 and 0,3,0 where it wins outright: the grid that a stray `display:
+// flex` was flattening, and the text cell whose `display: block` is what makes
+// the ellipsis engage. Paint stays in `.row` below; only geometry is repeated.
+.rows > .row {
+    display: grid;
+    grid-template-columns: 3px 32px minmax(0, 1fr) auto;
+    column-gap: 0.6rem;
+    align-items: center;
+    justify-content: normal;
+    box-sizing: border-box;
+    min-width: 0;
+    min-height: 0;
+    margin: 0;
+    padding: 0.5rem 0.85rem 0.5rem 0;
+    position: static;
+}
+
+.rows > .row > .rowMain {
+    display: block;
+}
+
+// One thread, one line: accent, avatar, name + preview, time.
+//
+// FOUR columns, and the first one is the whole point. The unread marker used
+// to be a `border-left`, and a border is layout: an unread row was three
+// pixels narrower than a read one and its avatar sat three pixels further
+// right, so a list of mixed rows zig-zagged down the left edge. The accent is
+// now a fixed 3px track that is simply transparent when there is nothing to
+// say, so every row in the list is measured identically whatever its state.
+//
+// The avatar track is fixed too, for the same reason. Only the text column
+// gives way — it is the only part of the row that can be any length.
+.row {
+    display: grid;
+    grid-template-columns: 3px 32px minmax(0, 1fr) auto;
+    column-gap: 0.6rem;
+    align-items: center;
+    // No left padding: the accent sits flush against the edge of the panel,
+    // and the gap after it lands the avatar on the same 13px the popover
+    // header's title starts at.
+    padding: 0.5rem 0.85rem 0.5rem 0;
+    border: none;
+    border-bottom: 1px solid color-mix(in srgb, var(--s-line) 55%, transparent);
+    background: var(--s-background);
+    cursor: pointer;
+
+    &:last-child {
+        border-bottom: none;
+    }
+}
+
+// The 3px track. Always present, coloured only when the row is unread.
+.rowAccent {
+    align-self: stretch;
+    width: 3px;
+    border-radius: 0 2px 2px 0;
+    background: transparent;
+}
+
+.rowUnread .rowAccent {
+    background: var(--s-primary);
+}
+
+// Highlight is a background and nothing else — anything that touches the box
+// model here is what the four-column grid above exists to prevent.
+.rowActive {
+    background: var(--s-hover);
+}
+
+.rowMain {
+    // `min-width: 0` is the load-bearing declaration: without it a grid item
+    // refuses to shrink below its content and the ellipsis never engages.
+    min-width: 0;
+    // `stretch`, not `start`: the content is `nowrap`, so under `start` the
+    // cell would size to its content, overflow its track and slide under the
+    // time instead of ellipsing.
+    justify-self: stretch;
+    overflow: hidden;
+    color: var(--s-paragraph);
+    font-size: 0.85rem;
+    line-height: 1.35;
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+// The dot between the name and the preview.
+//
+// Its own element with its own margins, because a literal " · " in JSX is at
+// the mercy of whitespace trimming — which is how "(Mrs)· Who" reached a
+// screenshot.
+.rowSep {
+    margin: 0 0.35rem;
+    color: var(--s-muted);
+}
+
+.rowName {
+    color: var(--s-paragraph);
+    font-size: 0.87rem;
+    font-weight: 600;
+}
+
+.rowPreview {
+    color: var(--s-muted);
+    font-size: 0.82rem;
+}
+
+.rowUnread {
+    .rowName {
+        font-weight: 800;
+    }
+
+    .rowPreview {
+        color: var(--s-paragraph);
+        font-weight: 600;
+    }
+}
+
+.rowTime {
+    justify-self: end;
+    display: inline-flex;
+    gap: 0.35rem;
+    align-items: center;
+    color: var(--s-muted);
+    font-size: 0.74rem;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+}
+
+.unreadDot {
+    display: inline-block;
+    flex: 0 0 auto;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--s-primary);
+}
+
+.empty {
+    padding: 1.75rem 1rem;
+    text-align: center;
+
+    p {
+        margin: 0 0 0.85rem;
+        color: var(--s-muted);
+        font-size: 0.85rem;
+        line-height: 1.5;
+    }
+}
+
+.footer {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    justify-content: center;
+    padding: 0.55rem 0.85rem;
+    border-top: 1px solid var(--s-line);
+    background: var(--s-surface);
+}
+
+.footerHint {
+    color: var(--s-muted);
+    font-size: 0.75rem; // 12px at a 16px root
+}
+
+// ---------------------------------------------------------------------------
+// SmsInbox — the page
+// ---------------------------------------------------------------------------
+
+.inbox {
+    @include sms-tokens;
+
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    box-sizing: border-box;
+    padding: 1rem 1.25rem 1.25rem;
+    color: var(--s-paragraph);
+    font-size: 0.85rem;
+}
+
+.inboxHead {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem 1rem;
+    align-items: flex-start;
+    justify-content: space-between;
+}
+
+.inboxHeading {
+    min-width: 0;
+}
+
+.pageTitle {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    margin: 0;
+    color: var(--s-paragraph);
+    font-size: 1.5rem;
+    font-weight: 700;
+    line-height: 1.2;
+
+    svg {
+        color: var(--s-primary);
+    }
+}
+
+.headActions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    align-items: center;
+}
+
+// Two panes, ONE card.
+//
+// They were two bordered cards with a gap between them, which reads as two
+// unrelated tables that happen to sit side by side. A list and the thing the
+// list opens are one object; the divider between them is a hairline, not a
+// margin.
+//
+// The height is pinned so the panes scroll inside the card rather than the
+// page scrolling underneath them — a timeline that scrolls the document takes
+// the composer off the bottom of an iPad with it. `--s-inbox-offset` is what
+// a host subtracts for its own chrome: this module cannot know how tall the
+// CRM's header is.
+.panes {
+    display: grid;
+    grid-template-columns: 340px minmax(0, 1fr);
+    box-sizing: border-box;
+    height: calc(100vh - var(--s-inbox-offset, 230px));
+    min-height: 420px;
+    border: 1px solid var(--s-line);
+    border-radius: var(--s-br);
+    background: var(--s-background);
+    overflow: hidden;
+}
+
+.listPane {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    min-height: 0;
+    border: 1px solid var(--s-line);
+    border-radius: var(--s-br);
+    background: var(--s-background);
+    overflow: hidden;
+}
+
+// Inside the card the panes lose their own frames and share one divider. Kept
+// as a descendant rule so a pane mounted on its own — the empty state, an
+// embedded conversation — still comes with a border of its own.
+.panes .listPane {
+    border: none;
+    border-right: 1px solid var(--s-line);
+    border-radius: 0;
+}
+
+.panes .convPane {
+    border: none;
+    border-radius: 0;
+}
+
+.listHead {
+    display: flex;
+    flex-direction: column;
+    gap: 0.45rem;
+    padding: 0.6rem;
+    border-bottom: 1px solid var(--s-line);
+    // Flat. A filled strip wrapped around a bordered field is the "double
+    // frame" from the review: a box inside a box, neither of which is the
+    // control.
+    background: var(--s-background);
+
+    // The select's label wrapper adds nothing here — the option text carries
+    // the meaning.
+    .field {
+        gap: 0;
+    }
+}
+
+.chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.35rem;
+}
+
+.chip {
+    @include sms-reset;
+    @include sms-focus;
+
+    display: inline-flex;
+    gap: 0.3rem;
+    align-items: center;
+    padding: 0.25rem 0.6rem;
+    border: 1px solid var(--s-line);
+    border-radius: 999px;
+    background: var(--s-background);
+    color: var(--s-muted);
+    font-size: 0.75rem;
+    font-weight: 600;
+    cursor: pointer;
+
+    &:hover:not(:disabled) {
+        border-color: var(--s-primary);
+        color: var(--s-primary);
+    }
+}
+
+.chipActive {
+    border-color: var(--s-primary);
+    background: var(--s-primary);
+    color: #fff;
+
+    &:hover:not(:disabled) {
+        border-color: color-mix(in srgb, var(--s-primary) 85%, #000);
+        background: color-mix(in srgb, var(--s-primary) 85%, #000);
+        color: #fff;
+    }
+}
+
+.chipCount {
+    font-variant-numeric: tabular-nums;
+}
+
+.threadList {
+    flex: 1;
+    // `min-height: 0` is what lets this scroll instead of growing the flex
+    // column past the bottom of the card.
+    min-height: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    overflow-y: auto;
+
+    // The same host-proofing as `.rows` — the CRM styles bare `ul` and `li`.
+    > li {
+        min-width: 0;
+        min-height: 0;
+        margin: 0;
+        padding: 0;
+        position: static;
+        list-style: none;
+    }
+}
+
+// Two lines: name + time, then the preview. Wider than the popover row, so it
+// can afford the second line the popover cannot.
+//
+// Same three-column contract as `.row`, and for the same reason: the accent is
+// a fixed track rather than a border, so an unread row and a read row are
+// measured identically and the avatars line up.
+.threadRow {
+    @include sms-reset;
+    @include sms-focus;
+
+    display: grid;
+    grid-template-columns: 3px 32px minmax(0, 1fr);
+    column-gap: 0.6rem;
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0.55rem 0.7rem 0.55rem 0;
+    border: none;
+    border-bottom: 1px solid color-mix(in srgb, var(--s-line) 55%, transparent);
+    border-radius: 0;
+    background: var(--s-background);
+    color: var(--s-paragraph);
+    font-size: 0.85rem;
+    cursor: pointer;
+
+    &:hover {
+        background: var(--s-hover);
+    }
+}
+
+.threadAccent {
+    align-self: stretch;
+    width: 3px;
+    border-radius: 0 2px 2px 0;
+    background: transparent;
+}
+
+.threadUnread .threadAccent {
+    background: var(--s-primary);
+}
+
+// Selection is a background, never a border — and a faint one: exactly one
+// row in this list is always selected, so a strong fill reads as an alert.
+.threadRowActive {
+    background: var(--s-select);
+
+    &:hover {
+        background: var(--s-select);
+    }
+
+    .threadAccent {
+        background: var(--s-primary);
+    }
+}
+
+.threadBody {
+    min-width: 0;
+    overflow: hidden;
+}
+
+.threadTop {
+    display: flex;
+    gap: 0.5rem;
+    align-items: baseline;
+    justify-content: space-between;
+    min-width: 0;
+}
+
+// Regular by default. Bold is information here — it means unread — so a list
+// where every name is bold says nothing at all.
+.threadName {
+    overflow: hidden;
+    color: var(--s-paragraph);
+    font-size: 0.87rem;
+    font-weight: 500;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.threadTime {
+    flex: 0 0 auto;
+    color: var(--s-muted);
+    font-size: 0.72rem;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+}
+
+.threadPreview {
+    display: flex;
+    gap: 0.4rem;
+    align-items: center;
+    min-width: 0;
+    margin-top: 0.15rem;
+    color: var(--s-muted);
+    font-size: 0.79rem;
+
+    span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+
+.threadUnread {
+    .threadName {
+        font-weight: 700;
+    }
+
+    .threadPreview {
+        color: var(--s-paragraph);
+        font-weight: 600;
+    }
+}
+
+.threadCount {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 5px;
+    border-radius: 9px;
+    background: var(--s-primary);
+    color: #fff;
+    font-size: 0.66rem;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+}
+
+.listFoot {
+    display: flex;
+    justify-content: center;
+    padding: 0.5rem;
+    border-top: 1px solid var(--s-line);
+    background: var(--s-surface);
+}
+
+// ---------------------------------------------------------------------------
+// SmsThreadPanel — the conversation
+// ---------------------------------------------------------------------------
+
+.convPane {
+    @include sms-tokens;
+
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    min-width: 0;
+    min-height: 0;
+    border: 1px solid var(--s-line);
+    border-radius: var(--s-br);
+    background: var(--s-background);
+    color: var(--s-paragraph);
+    overflow: hidden;
+}
+
+.convHead {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    align-items: center;
+    padding: 0.5rem 0.7rem;
+    border-bottom: 1px solid var(--s-line);
+    background: var(--s-surface);
+
+    // Every action in this row is the same height, whatever kind of control
+    // it is. A chip, a worded button and an icon button at three heights is
+    // what made the header look unfinished.
+    .ghostButton,
+    .iconButton,
+    .clientChip {
+        box-sizing: border-box;
+        height: 30px;
+        min-height: 30px;
+    }
+}
+
+.convIdentity {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    min-width: 0;
+    // Takes the slack, so the actions sit hard right.
+    margin-right: auto;
+}
+
+.convName {
+    display: block;
+    overflow: hidden;
+    color: var(--s-paragraph);
+    font-size: 0.95rem;
+    font-weight: 700;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.convNumber {
+    display: block;
+    color: var(--s-muted);
+    font-size: 0.76rem;
+    font-variant-numeric: tabular-nums;
+}
+
+.convActions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.35rem;
+    align-items: center;
+    // Hard right, as one group.
+    justify-content: flex-end;
+    margin-left: auto;
+}
+
+.clientChip {
+    display: inline-flex;
+    gap: 0.3rem;
+    align-items: center;
+    padding: 0 0.6rem;
+    border: 1px solid color-mix(in srgb, var(--s-primary) 35%, transparent);
+    border-radius: 999px;
+    background: var(--s-tint);
+    color: var(--s-primary);
+    font-size: 0.74rem;
+    font-weight: 700;
+    text-decoration: none;
+
+    &:hover {
+        border-color: var(--s-primary);
+        color: var(--s-primary);
+        text-decoration: underline;
+    }
+
+    svg {
+        flex-shrink: 0;
+        color: currentColor;
+    }
+}
+
+.timeline {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 0.15rem;
+    box-sizing: border-box;
+    min-height: 0;
+    padding: 0.85rem 0.9rem;
+    background: var(--s-background);
+    overflow-y: auto;
+}
+
+.dayHeading {
+    display: flex;
+    gap: 0.6rem;
+    align-items: center;
+    margin: 0.7rem 0 0.5rem;
+    color: var(--s-muted);
+    font-size: 0.72rem;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+
+    &::before,
+    &::after {
+        flex: 1;
+        height: 1px;
+        background: color-mix(in srgb, var(--s-line) 70%, transparent);
+        content: '';
+    }
+
+    &:first-child {
+        margin-top: 0;
+    }
+}
+
+// One message. Consecutive messages from the same side sit 4px apart and read
+// as one utterance; a change of side opens the gap up. The timestamp is drawn
+// only under the last of a run, because six identical times stacked down the
+// margin is noise, not information.
+.bubbleRow {
+    display: flex;
+    flex-direction: column;
+    max-width: 100%;
+    margin-bottom: 4px;
+}
+
+.bubbleRunEnd {
+    margin-bottom: 0.7rem;
+}
+
+.bubbleIn {
+    align-items: flex-start;
+}
+
+.bubbleOut {
+    align-items: flex-end;
+}
+
+.bubble {
+    box-sizing: border-box;
+    // 64% — wide enough for a paragraph, narrow enough that the two sides of
+    // the conversation stay visibly two sides.
+    max-width: min(60ch, 64%);
+    padding: 0.5rem 0.7rem;
+    border: 1px solid transparent;
+    border-radius: 12px;
+    font-size: 0.875rem; // 14px at a 16px root
+    line-height: 1.5;
+    // A pasted account number has no spaces in it and must not push the pane
+    // wider than the pane.
+    overflow-wrap: anywhere;
+    white-space: pre-wrap;
+}
+
+.bubbleBodyIn {
+    border-color: color-mix(in srgb, var(--s-paragraph) 12%, transparent);
+    border-bottom-left-radius: 4px;
+    background: var(--s-in-bg);
+    color: var(--s-in-fg);
+}
+
+.bubbleBodyOut {
+    border-color: var(--s-out-bg);
+    border-bottom-right-radius: 4px;
+    background: var(--s-out-bg);
+    color: var(--s-out-fg);
+}
+
+// A message that is queued behind a transport that cannot send it yet. Not an
+// error skin: dashed and pale, because the message is genuinely saved.
+.bubbleHeld {
+    border-style: dashed;
+    border-color: color-mix(in srgb, var(--s-warn) 60%, transparent);
+    background: color-mix(in srgb, var(--s-warn) 12%, var(--s-background));
+    color: var(--s-paragraph);
+}
+
+.bubbleFailed {
+    border-color: color-mix(in srgb, var(--s-bad) 60%, transparent);
+    background: color-mix(in srgb, var(--s-bad) 10%, var(--s-background));
+    color: var(--s-paragraph);
+}
+
+.bubblePending {
+    opacity: 0.72;
+}
+
+// Time, status and sender on ONE small muted line, under the bubble and on
+// the same side as it.
+.bubbleMeta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.3rem;
+    align-items: center;
+    margin-top: 0.2rem;
+    padding: 0 0.25rem;
+    color: var(--s-muted);
+    font-size: 0.7rem;
+    font-variant-numeric: tabular-nums;
+
+    svg {
+        flex-shrink: 0;
+    }
+}
+
+.bubbleOut .bubbleMeta {
+    justify-content: flex-end;
+    text-align: right;
+}
+
+.metaFailed {
+    color: var(--s-bad);
+    font-weight: 600;
+}
+
+.metaHeld {
+    color: var(--s-warn);
+    font-weight: 600;
+}
+
+.retryButton {
+    @include sms-reset;
+    @include sms-focus;
+
+    padding: 0;
+    border: none;
+    background: none;
+    color: var(--s-bad);
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.attachments {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.3rem;
+    margin-top: 0.35rem;
+}
+
+.attachment {
+    display: inline-flex;
+    gap: 0.3rem;
+    align-items: center;
+    max-width: 100%;
+    padding: 0.15rem 0.5rem;
+    border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
+    border-radius: 999px;
+    color: inherit;
+    font-size: 0.72rem;
+    font-weight: 600;
+    text-decoration: none;
+
+    &:hover {
+        color: inherit;
+        text-decoration: underline;
+    }
+
+    svg {
+        flex-shrink: 0;
+    }
+
+    span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+
+.timelineTop {
+    display: flex;
+    justify-content: center;
+    padding-bottom: 0.5rem;
+}
+
+.timelineEmpty {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 0.4rem;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem 1rem;
+    color: var(--s-muted);
+    font-size: 0.85rem;
+    text-align: center;
+}
+
+// ------------------------------------------------------------- the composer
+
+.composer {
+    box-sizing: border-box;
+    padding: 0.6rem 0.7rem 0.7rem;
+    border-top: 1px solid var(--s-line);
+    background: var(--s-surface);
+}
+
+// One card: the text on top, every control in a bar along its bottom edge.
+// Buttons beside a textarea line up with nothing once the box grows; a bar
+// inside the same border always reads as part of the message being written.
+.composerBox {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    border: 1px solid var(--s-line);
+    border-radius: calc(var(--s-btn-br) + 4px);
+    background: var(--s-background);
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+    &:focus-within {
+        border-color: var(--s-primary);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--s-primary) 14%, transparent);
+    }
+}
+
+.composerInput {
+    @include sms-reset;
+
+    flex: 1;
+    box-sizing: border-box;
+    min-width: 0;
+    max-height: 180px;
+    padding: 0.7rem 0.85rem 0.4rem;
+    border: 0;
+    border-radius: inherit;
+    background: transparent;
+    color: var(--s-paragraph);
+    font-size: 0.9rem;
+    line-height: 1.5;
+    // Auto-grow is driven from JS; this stops the manual handle fighting it.
+    resize: none;
+    overflow-y: auto;
+    outline: none;
+
+    &::placeholder {
+        color: var(--s-muted);
+        opacity: 1;
+    }
+
+    &:disabled {
+        opacity: 0.7;
+    }
+}
+
+.composerBar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem 0.75rem;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.4rem 0.5rem 0.5rem 0.6rem;
+}
+
+.composerTools,
+.composerActions {
+    display: inline-flex;
+    gap: 0.6rem;
+    align-items: center;
+    min-width: 0;
+}
+
+// The templates button sits at the LEFT of the bar, so its menu opens to the
+// right of it: a right-anchored menu would spill past the pane's left edge
+// and be clipped by .convPane's overflow.
+.composerTools .menu {
+    right: auto;
+    left: 0;
+}
+
+.composerTools .ghostButton {
+    padding: 0.3rem 0.6rem;
+    border-color: transparent;
+    background: transparent;
+    color: var(--s-secondary);
+    font-weight: 500;
+
+    &:hover:not(:disabled) {
+        border-color: transparent;
+        background: var(--s-hover);
+        color: var(--s-primary);
+    }
+}
+
+// Send is the one filled control in the bar, and a pill so it reads as the
+// action rather than as another field.
+.sendButton {
+    @include sms-reset;
+    @include sms-focus;
+
+    display: inline-flex;
+    flex-shrink: 0;
+    gap: 0.45rem;
+    align-items: center;
+    justify-content: center;
+    padding: 0.45rem 1rem 0.45rem 0.85rem;
+    border: 1px solid var(--s-primary);
+    border-radius: 999px;
+    background: var(--s-primary);
+    color: #fff;
+    font-size: 0.82rem;
+    font-weight: 600;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: background-color 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
+
+    svg {
+        flex-shrink: 0;
+        color: currentColor;
+    }
+
+    &:hover:not(:disabled) {
+        border-color: color-mix(in srgb, var(--s-primary) 85%, #000);
+        background: color-mix(in srgb, var(--s-primary) 85%, #000);
+    }
+
+    &:active:not(:disabled) {
+        transform: translateY(1px);
+    }
+
+    &:disabled {
+        border-color: transparent;
+        background: color-mix(in srgb, var(--s-paragraph) 18%, transparent);
+        color: var(--s-background);
+        cursor: default;
+    }
+}
+
+.counter {
+    display: inline-flex;
+    gap: 0.4rem;
+    align-items: center;
+    color: var(--s-muted);
+    font-size: 0.72rem;
+    // The whole point of a counter is that it does not jitter as it counts.
+    font-variant-numeric: tabular-nums;
+}
+
+.counterOver {
+    color: var(--s-bad);
+    font-weight: 700;
+}
+
+// A small switch, not a checkbox with a sentence beside it.
+//
+// It is a preference about one key, read at a glance and flipped rarely; a
+// labelled checkbox plus an explanation of what the other state does took
+// more room than the counter it sits beside.
+.toggle {
+    @include sms-reset;
+    @include sms-focus;
+
+    display: inline-flex;
+    flex-shrink: 0;
+    gap: 0.4rem;
+    align-items: center;
+    padding: 0.15rem 0.45rem 0.15rem 0.3rem;
+    border: 1px solid var(--s-line);
+    border-radius: 999px;
+    background: var(--s-background);
+    color: var(--s-muted);
+    font-size: 0.7rem;
+    font-weight: 600;
+    white-space: nowrap;
+    cursor: pointer;
+
+    &:hover {
+        border-color: var(--s-primary);
+        color: var(--s-primary);
+    }
+}
+
+.toggleTrack {
+    position: relative;
+    display: inline-block;
+    flex: 0 0 auto;
+    width: 22px;
+    height: 12px;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--s-paragraph) 28%, transparent);
+    transition: background-color 0.15s ease;
+}
+
+.toggleKnob {
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: #fff;
+    transition: transform 0.15s ease;
+}
+
+.toggleOn {
+    border-color: var(--s-primary);
+    color: var(--s-primary);
+
+    .toggleTrack {
+        background: var(--s-primary);
+    }
+
+    .toggleKnob {
+        transform: translateX(10px);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .toggleTrack,
+    .toggleKnob {
+        transition: none;
+    }
+}
+
+// The templates menu, anchored to its button.
+.menuWrap {
+    position: relative;
+    display: inline-flex;
+}
+
+.menu {
+    position: absolute;
+    right: 0;
+    bottom: calc(100% + 6px);
+    z-index: 40;
+    box-sizing: border-box;
+    width: 300px;
+    max-width: calc(100vw - 2rem);
+    max-height: 260px;
+    padding: 0.25rem;
+    border: 1px solid var(--s-line);
+    border-radius: var(--s-br);
+    background: var(--s-background);
+    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
+    overflow-y: auto;
+    animation: smsPopIn 0.14s ease-out;
+}
+
+.menuItem {
+    @include sms-reset;
+    @include sms-focus;
+
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0.4rem 0.5rem;
+    border: none;
+    border-radius: var(--s-btn-br);
+    background: transparent;
+    color: var(--s-paragraph);
+    font-size: 0.82rem;
+    cursor: pointer;
+
+    strong {
+        display: block;
+        color: var(--s-paragraph);
+        font-size: 0.82rem;
+        font-weight: 700;
+    }
+
+    small {
+        display: block;
+        overflow: hidden;
+        color: var(--s-muted);
+        font-size: 0.74rem;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &:hover {
+        background: var(--s-hover);
+    }
+}
+
+.menuEmpty {
+    padding: 0.6rem 0.5rem;
+    color: var(--s-muted);
+    font-size: 0.78rem;
+    text-align: center;
+}
+
+// ---------------------------------------------------------------------------
+// Compose modal and the client typeahead
+// ---------------------------------------------------------------------------
+
+.modalForm {
+    @include sms-tokens;
+
+    display: flex;
+    flex-direction: column;
+    gap: 0.85rem;
+    box-sizing: border-box;
+    padding: 1rem;
+    color: var(--s-paragraph);
+    font-size: 0.85rem;
+    text-align: left;
+}
+
+.modalHead {
+    display: flex;
+    gap: 0.6rem;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.modalTitle {
+    display: flex;
+    gap: 0.45rem;
+    align-items: center;
+    margin: 0;
+    color: var(--s-paragraph);
+    font-size: 1.05rem;
+    font-weight: 700;
+
+    svg {
+        color: var(--s-primary);
+    }
+}
+
+.modalActions {
+    display: flex;
+    gap: 0.6rem;
+    align-items: center;
+    justify-content: flex-end;
+    padding-top: 0.6rem;
+    border-top: 1px solid var(--s-line);
+}
+
+.typeahead {
+    position: relative;
+}
+
+.typeaheadList {
+    position: absolute;
+    top: calc(100% + 4px);
+    right: 0;
+    left: 0;
+    z-index: 30;
+    box-sizing: border-box;
+    max-height: 240px;
+    margin: 0;
+    padding: 0.2rem;
+    border: 1px solid var(--s-line);
+    border-radius: var(--s-br);
+    background: var(--s-background);
+    list-style: none;
+    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
+    overflow-y: auto;
+}
+
+.typeaheadRow {
+    @include sms-reset;
+    @include sms-focus;
+
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0.4rem 0.5rem;
+    border: none;
+    border-radius: var(--s-btn-br);
+    background: transparent;
+    color: var(--s-paragraph);
+    font-size: 0.83rem;
+    cursor: pointer;
+
+    &:hover {
+        background: var(--s-hover);
+    }
+
+    strong {
+        color: var(--s-paragraph);
+        font-weight: 700;
+    }
+
+    small {
+        color: var(--s-muted);
+        font-size: 0.75rem;
+        font-variant-numeric: tabular-nums;
+    }
+}
+
+.typeaheadActive {
+    background: var(--s-tint);
+}
+
+.numberChoices {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.35rem;
+    margin-top: 0.3rem;
+}
+
+// ---------------------------------------------------------------------------
+// SmsLineSettings
+// ---------------------------------------------------------------------------
+
+.settings {
+    @include sms-tokens;
+
+    box-sizing: border-box;
+    padding: 1.25rem 1.5rem 2rem;
+    color: var(--s-paragraph);
+    font-size: 0.85rem;
+}
+
+.settingsHead {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    align-items: flex-start;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+}
+
+.pageIntro {
+    max-width: 62ch;
+    margin: 0.35rem 0 0;
+    color: var(--s-muted);
+    font-size: 0.83rem;
+    line-height: 1.5;
+}
+
+/* The practice's texting numbers, always in view: a client asking "what number
+   do I text?" is answered from the page header, not from Settings. */
+.lineNumbers {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem 0.6rem;
+    margin: 0.55rem 0 0;
+    padding: 0;
+    list-style: none;
+}
+
+.lineNumber {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 0.4rem;
+    padding: 0.22rem 0.6rem;
+    border: 1px solid var(--s-line);
+    border-radius: 999px;
+    background: var(--s-surface);
+    font-size: 0.8rem;
+    line-height: 1.3;
+}
+
+.lineNumberLabel {
+    color: var(--s-muted);
+}
+
+.lineNumberValue {
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0.02em;
+    color: var(--s-paragraph);
+    user-select: all;
+}
+
+.statusCard {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem 1.5rem;
+    box-sizing: border-box;
+    margin-bottom: 1.25rem;
+    padding: 0.85rem 1rem;
+    border: 1px solid var(--s-line);
+    border-radius: var(--s-br);
+    background: var(--s-surface);
+}
+
+.statusItem {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+    min-width: 140px;
+}
+
+.statusLabel {
+    color: var(--s-muted);
+    font-size: 0.72rem;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+
+.statusValue {
+    margin: 0;
+    color: var(--s-paragraph);
+    font-size: 0.88rem;
+    font-weight: 600;
+}
+
+.statusMeaning {
+    flex: 1 1 260px;
+    min-width: 220px;
+    color: var(--s-muted);
+    font-size: 0.8rem;
+    line-height: 1.5;
+}
+
+.section {
+    margin-bottom: 1.75rem;
+}
+
+.sectionHead {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.6rem;
+}
+
+.sectionTitle {
+    margin: 0;
+    color: var(--s-paragraph);
+    font-size: 1.05rem;
+    font-weight: 700;
+}
+
+.tableWrap {
+    overflow-x: auto;
+    border: 1px solid var(--s-line);
+    border-radius: var(--s-br);
+    background: var(--s-background);
+}
+
+.table {
+    width: 100%;
+    border-collapse: collapse;
+    color: var(--s-paragraph);
+    font-size: 0.84rem;
+    text-align: left;
+
+    th,
+    td {
+        padding: 0.6rem 0.7rem;
+        text-align: left;
+        vertical-align: middle;
+    }
+
+    thead th {
+        border-bottom: 1px solid var(--s-line);
+        background: var(--s-surface);
+        color: var(--s-muted);
+        font-size: 0.72rem;
+        font-weight: 700;
+        letter-spacing: 0.05em;
+        text-transform: uppercase;
+        white-space: nowrap;
+    }
+
+    tbody tr {
+        border-bottom: 1px solid color-mix(in srgb, var(--s-line) 55%, transparent);
+
+        &:last-child {
+            border-bottom: none;
+        }
+
+        &:hover {
+            background: var(--s-hover);
+        }
+    }
+
+    tbody td strong {
+        color: var(--s-paragraph);
+        font-size: 0.88rem;
+        font-weight: 700;
+    }
+}
+
+.numberCell {
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+}
+
+.actionsHead,
+.actionsCell {
+    text-align: right;
+    white-space: nowrap;
+}
+
+.actionsCell > * {
+    margin-left: 0.5rem;
+}
+
+.chipRow {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+}
+
+.staffChip {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.1rem 0.45rem;
+    border-radius: 999px;
+    background: var(--s-tint);
+    color: var(--s-primary);
+    font-size: 0.7rem;
+    font-weight: 700;
+}
+
+.tableEmpty {
+    padding: 2.25rem 1rem;
+    color: var(--s-muted);
+    text-align: center;
+
+    p {
+        margin: 0 0 0.9rem;
+        color: var(--s-muted);
+        font-size: 0.88rem;
+    }
+}
+
+.staffPicker {
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+    box-sizing: border-box;
+    max-height: 190px;
+    padding: 0.5rem 0.6rem;
+    border: 1px solid var(--s-line);
+    border-radius: var(--s-btn-br);
+    background: var(--s-background);
+    overflow-y: auto;
+}
+
+.deletedRow {
+    opacity: 0.65;
+
+    strong {
+        text-decoration: line-through;
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Narrow screens
+// ---------------------------------------------------------------------------
+
+// An iPad in landscape is 1024px and the CRM's chrome takes some of that: the
+// list pane loses 60px rather than the conversation losing its bubbles.
+@media (max-width: 1180px) {
+    .panes {
+        grid-template-columns: 280px minmax(0, 1fr);
+    }
+}
+
+// Below 900 the two panes stop being two panes: one is on screen at a time,
+// and the conversation carries a back button. Which one shows is a class the
+// component sets, not a media query guess.
+@media (max-width: 900px) {
+    .inbox {
+        padding: 0.85rem 0.85rem 1rem;
+    }
+
+    .panes {
+        grid-template-columns: minmax(0, 1fr);
+        height: calc(100vh - 170px);
+    }
+
+    .paneHiddenNarrow {
+        display: none;
+    }
+
+    .bubble {
+        max-width: 88%;
+    }
+
+    .settings {
+        padding: 1rem 0.85rem 2rem;
+    }
+
+    .actionsCell {
+        text-align: left;
+
+        > * {
+            margin: 0.15rem 0.5rem 0.15rem 0;
+        }
+    }
+}
+
+// The back button only exists in the collapsed layout.
+.backButton {
+    display: none;
+}
+
+@media (max-width: 900px) {
+    .backButton {
+        display: inline-flex;
+    }
+}
+
+// ---------------------------------------------------------------------------
+// The compose modal's header row
+// ---------------------------------------------------------------------------
+
+// From and To on one line. Two full-width blocks stacked above the message
+// pushed the thing anyone actually came here to write below the fold, and
+// "From" is not a decision on a one-line system - it is a fact.
+.composeRow {
+    display: grid;
+    gap: 0.5rem 0.75rem;
+    grid-template-columns: minmax(0, 220px) 1fr;
+    align-items: start;
+}
+
+.composeField {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+    min-width: 0;
+}
+
+// Quieter and smaller than .label: at this density the labels are wayfinding,
+// not headings.
+.labelSmall {
+    color: var(--s-muted);
+    font-size: 0.68rem;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+}
+
+// The single-line case: a select with one option is a question with one
+// answer, so the line is stated rather than asked.
+.fromChip {
+    display: flex;
+    gap: 0.4rem;
+    align-items: baseline;
+    box-sizing: border-box;
+    min-height: var(--s-control);
+    padding: 0.35rem 0.6rem;
+    border: 1px solid var(--s-line);
+    border-radius: var(--s-btn-br);
+    background: var(--s-surface);
+    color: var(--s-paragraph);
+    font-size: 0.83rem;
+    line-height: 1.3;
+
+    strong {
+        overflow: hidden;
+        font-weight: 700;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    small {
+        color: var(--s-muted);
+        font-size: 0.75rem;
+        font-variant-numeric: tabular-nums;
+        white-space: nowrap;
+    }
+}
+
+// The modal's own copy of the thread composer's card, which wants a little
+// more room to write in than the bar at the bottom of a conversation.
+.composeBody {
+    min-height: 92px;
+    max-height: 220px;
+    padding-bottom: 0.5rem;
+    resize: vertical;
+}
+
+.composeForm {
+    gap: 0.7rem;
+}
+
+// The counter sits beside Templates in the bar rather than under the box, so
+// it needs to stop looking like a field label and start looking like a note.
+.composeBar {
+    justify-content: flex-start;
+}
+
+@media (max-width: 639px) {
+    .composeRow {
+        grid-template-columns: 1fr;
+    }
+}