overrides the inline strokeWidth="1.8"
attribute from icons.tsx. (Hakim 2026-06-22.) */
.inbox-head-action-btn .ui-icon,
.inbox-tag-trigger .ui-icon {
width: 24px;
height: 24px;
}
.inbox-head-action-btn .ui-icon path,
.inbox-tag-trigger .ui-icon path {
stroke-width: 2;
}
/* Open state for the "…" thread-actions trigger (Item 4). */
.inbox-head-action-btn.is-on {
color: var(--text-primary);
background: color-mix(in srgb, var(--accent) 14%, transparent);
}
/* ── Wave 6 — team-collaboration cluster (assign / snooze / resolve / presence) ──
Lives in .inbox-chat-head-actions; the buttons reuse .inbox-head-action-btn. */
.inbox-collab {
display: inline-flex;
align-items: center;
gap: 2px;
margin-right: 0.25rem;
flex-wrap: wrap;
}
.inbox-agent-head-presence {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
margin-right: 0.2rem;
border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border-subtle));
border-radius: 50%;
background: color-mix(in srgb, var(--accent) 10%, var(--bg-elevated));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 7%, transparent);
}
.inbox-collab-anchor {
position: relative;
display: inline-flex;
align-items: center;
}
/* Snooze popover reuses .inbox-head-menu (absolute, right-aligned). */
.inbox-collab-menu {
min-width: 168px;
max-width: 240px;
}
.inbox-collab-menu-head {
margin: 0.1rem 0.35rem 0.25rem;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--text-muted);
}
/* Snooze date+time picker (Hakim 2026-06-23 — the 3-preset menu was useless;
pick any moment). color-scheme themes the native picker for dark mode. */
.inbox-snooze-menu {
min-width: 232px;
padding: 0.5rem;
}
.inbox-snooze-input {
width: 100%;
padding: 0.4rem 0.5rem;
margin-bottom: 0.4rem;
border: 1px solid var(--border-subtle);
border-radius: 7px;
background: var(--bg-input);
color: var(--text-primary);
font-family: inherit;
font-size: 0.82rem;
font-weight: 500;
color-scheme: light dark;
}
.inbox-snooze-input:focus {
outline: none;
border-color: color-mix(in srgb, var(--accent) 55%, var(--border-subtle));
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}
.inbox-snooze-confirm {
width: 100%;
padding: 0.4rem 0.6rem;
border: 0;
border-radius: 7px;
background: var(--accent);
color: #fff;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
transition: background 100ms ease;
}
.inbox-snooze-confirm:hover:not(:disabled) {
background: color-mix(in srgb, var(--accent) 88%, #000);
}
.inbox-snooze-confirm:disabled {
opacity: 0.45;
cursor: default;
}
/* Presence — overlapping avatar stack of OTHER current viewers (collision warning). */
.inbox-collab-presence {
display: inline-flex;
align-items: center;
margin-right: 0.15rem;
}
.inbox-collab-viewer {
width: 22px;
height: 22px;
border-radius: 50%;
margin-left: -6px;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-size: 10px;
font-weight: 600;
color: #fff;
background: color-mix(in srgb, var(--accent) 65%, var(--text-primary));
border: 2px solid var(--bg-elevated);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
.inbox-collab-viewer:first-child {
margin-left: 0;
}
.inbox-collab-viewer img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 768px) {
.inbox-collab {
gap: 0;
margin-right: 0.1rem;
}
.inbox-collab-menu {
max-width: calc(100vw - 1rem);
}
}
/* ── Wave 7 — Portal rail de-noise (Hakim 2026-06-22): the rail keeps only a
glanceable booking header + MyStay + the contact-type control; the full guest
& booking record, reservation context and stay history live in the Details
tab. Token-based → light/dark parity; min-width:0 + wrap → small-screen safe. */
.inbox-portal-glance {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 0.55rem;
min-width: 0;
}
.inbox-portal-listing {
font-weight: 600;
color: var(--text-primary);
min-width: 0;
overflow-wrap: anywhere;
}
.inbox-portal-dates {
font-size: 0.8125rem;
color: var(--text-soft);
}
.inbox-portal-status {
font-size: 0.75rem;
font-weight: 600;
text-transform: capitalize;
padding: 0.1rem 0.45rem;
border-radius: 999px;
color: var(--text-soft);
background: color-mix(in srgb, var(--text-soft) 12%, var(--bg-elevated));
border: 1px solid var(--border-subtle);
white-space: nowrap;
}
.inbox-portal-status.is-cancelled {
color: color-mix(in srgb, var(--state-warning) 78%, var(--text-primary));
background: color-mix(in srgb, var(--state-warning) 16%, var(--bg-elevated));
border-color: color-mix(in srgb, var(--state-warning) 38%, var(--border-subtle));
}
.inbox-portal-hint {
margin-top: 0.5rem;
font-size: 0.8125rem;
line-height: 1.4;
}
.inbox-resqv-availability-action {
margin-top: 0.6rem;
font-size: 0.78rem;
text-decoration: none;
}
/* Multi-reservation invoice rail — a merged thread can link several bookings, so
each reservation gets its OWN "Copy invoice link" row (the single-booking case
still renders one bare button above, unchanged). Token-based → light + dark
parity is automatic. See the invoice section in InboxClient.tsx. */
.inbox-invoice-list {
list-style: none;
margin: 0.5rem 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.inbox-invoice-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
flex-wrap: wrap;
padding: 0.5rem 0.55rem;
border: 1px solid var(--border-subtle);
border-radius: 8px;
background: color-mix(in srgb, var(--bg-input) 45%, transparent);
}
.inbox-invoice-item-meta {
display: flex;
flex-direction: column;
gap: 0.1rem;
min-width: 0;
}
.inbox-invoice-item-title {
font-size: 0.8125rem;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.inbox-invoice-item-dates {
font-size: 0.75rem;
color: var(--text-soft);
}
.inbox-portal-detail-link {
display: inline;
padding: 0;
border: 0;
background: none;
font: inherit;
font-weight: 600;
color: var(--accent);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
.inbox-portal-detail-link:hover {
text-decoration-thickness: 2px;
}
@media (max-width: 768px) {
.inbox-portal-glance {
gap: 0.3rem 0.4rem;
}
}
/* Positioned wrapper so the absolute tag menu anchors to the trigger (not a
distant ancestor — which used to fling it off-screen, the "tag button does
nothing" bug). */
.inbox-tag-anchor {
position: relative;
display: inline-flex;
align-items: center;
}
.inbox-tag-menu {
position: absolute;
top: calc(100% + 0.25rem);
left: 0;
z-index: 40;
min-width: 280px;
max-width: 320px;
padding: 0.5rem;
border: 1px solid var(--border-subtle);
border-radius: 9px;
background: var(--bg-elevated);
box-shadow: var(--shadow-soft);
}
.inbox-tag-menu-scope-head {
display: grid;
gap: 0.12rem;
padding: 0.05rem 0.1rem 0.45rem;
}
.inbox-tag-menu-scope-head strong {
color: var(--text-primary);
font-size: 0.78rem;
font-weight: 700;
}
.inbox-tag-menu-scope-head span {
color: var(--text-soft);
font-size: 0.68rem;
line-height: 1.35;
}
.inbox-tag-menu-contact-scope {
display: grid;
gap: 0.35rem;
margin-top: 0.55rem;
padding-top: 0.55rem;
border-top: 1px solid var(--border-subtle);
}
.inbox-tag-menu-contact-scope .inbox-tag-menu-scope-head {
padding-bottom: 0.1rem;
}
.inbox-tag-menu-contact-list {
display: grid;
gap: 0.3rem;
max-height: 8.5rem;
overflow-y: auto;
}
.inbox-tag-contact-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.65rem;
width: 100%;
min-width: 0;
padding: 0.45rem 0.55rem;
border: 1px solid var(--border-subtle);
border-radius: 8px;
background: var(--bg-surface);
color: var(--text-primary);
cursor: pointer;
text-align: left;
}
.inbox-tag-contact-link:hover,
.inbox-tag-contact-link:focus-visible {
border-color: color-mix(in srgb, var(--accent) 42%, var(--border-subtle));
background: color-mix(in srgb, var(--accent) 8%, var(--bg-surface));
}
.inbox-tag-contact-link > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.76rem;
font-weight: 650;
}
.inbox-tag-contact-link > small {
flex: none;
color: var(--accent);
font-size: 0.68rem;
font-weight: 650;
}
.inbox-tag-menu-list {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
margin: 0.45rem 0 0.4rem;
}
.inbox-tag-create-row {
display: flex;
gap: 0.35rem;
align-items: center;
}
.inbox-tag-create-row input[type="color"] {
width: 34px;
height: 34px;
border: 1px solid var(--border-subtle);
border-radius: 8px;
padding: 0;
}
/* Item 4 — thread-title "…" header menu (Rename thread / Auto-name AI). Anchored
to its trigger and RIGHT-aligned so it opens toward the pane interior and never
clips off the right pane edge — the tooltips/menus-escape-overflow rule. The
header is not an overflow scroller, so absolute positioning escapes cleanly.
Token-styled; identical in light + dark. */
.inbox-head-menu-anchor {
position: relative;
display: inline-flex;
align-items: center;
}
.inbox-head-menu {
position: absolute;
top: calc(100% + 0.3rem);
right: 0;
z-index: 60;
min-width: max-content;
display: flex;
flex-direction: column;
gap: 2px;
padding: 0.3rem;
border: 1px solid var(--border-subtle);
border-radius: 9px;
background: var(--bg-elevated);
box-shadow: var(--shadow-soft);
}
.inbox-head-menu-item {
display: inline-flex;
align-items: center;
gap: 0.5rem;
width: 100%;
padding: 0.4rem 0.6rem 0.4rem 0.45rem;
border: 0;
border-radius: 7px;
background: transparent;
color: var(--text-primary);
font-size: 0.82rem;
font-weight: 600;
text-align: left;
white-space: nowrap;
cursor: pointer;
}
.inbox-head-menu-item .ui-icon {
width: 16px;
height: 16px;
flex: 0 0 auto;
color: var(--text-soft);
}
.inbox-head-menu-item:hover:not(:disabled),
.inbox-head-menu-item:focus-visible {
background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.inbox-head-menu-item:hover:not(:disabled) .ui-icon {
color: var(--accent);
}
.inbox-head-menu-item:disabled {
opacity: 0.45;
cursor: default;
}
/* On narrow screens keep the menu fully on-screen: clamp its left edge to the
viewport via a max-width and let it sit flush to the trigger's right edge. */
@media (max-width: 768px) {
.inbox-head-menu {
max-width: calc(100vw - 1rem);
}
}
.inbox-tag-search {
display: flex;
align-items: center;
gap: 0.3rem;
border: 1px solid var(--border-strong);
border-radius: 8px;
padding: 0.08rem 0.32rem;
background: var(--bg-input);
min-height: 28px;
}
.inbox-tag-search .ui-icon {
width: 12px;
height: 12px;
color: var(--text-soft);
}
.inbox-tag-search input {
border: 0;
outline: none;
background: transparent;
color: var(--text-primary);
width: 100%;
font: inherit;
font-size: 0.78rem;
line-height: 1.2;
}
.inbox-bubbles {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
/* Tight WITHIN a short same-sender turn; a new turn adds its own margin.
Was 0.5rem flat, which made grouped runs look ungrouped. */
gap: 0.16rem;
overflow-y: auto;
overflow-x: hidden;
padding: 0.65rem 0.85rem;
}
.inbox-history-sentinel {
align-self: stretch;
flex: 0 0 auto;
min-height: 1px;
display: flex;
justify-content: center;
pointer-events: none;
}
.inbox-history-loader {
display: block;
flex: 0 0 auto;
width: 14px;
height: 14px;
margin: 0.15rem 0 0.55rem;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
color: var(--text-muted);
animation: inbox-history-spin 0.75s linear infinite;
}
@keyframes inbox-history-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.inbox-history-loader { animation: none; }
}
/* Wave 2 — "N new messages" pill. Sticky to the bottom of the scroll viewport so it
floats over the latest messages while you read history; clicking it jumps down.
--accent (indigo) + white reads correctly in both light and dark. */
.inbox-new-pill {
position: sticky;
bottom: 10px;
align-self: center;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-top: 0.3rem;
padding: 0.32rem 0.75rem;
border: none;
border-radius: 999px;
background: var(--accent);
color: #fff;
font-size: 12px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
transition: filter 0.12s ease, transform 0.12s ease;
}
.inbox-new-pill:hover {
filter: brightness(1.06);
}
.inbox-new-pill:active {
transform: translateY(1px);
}
/* A new turn (sender/channel change or a five-minute pause) gets breathing room
above it. New-DAY turns are separated by the day divider instead, so they
don't also get this margin. */
.inbox-msg.is-turn-start {
margin-top: 0.6rem;
}
/* Outgoing: right-align the body's contents so the (now per-turn) channel chip
sits above the right-aligned bubble, not stranded on the opposite side. */
.inbox-msg.out .inbox-msg-body {
align-items: flex-end;
}
/* Each calendar day is its own group so the divider can STICK while that day is
in view (Hakim 2026-06-14, restoring the sticky he liked). The group bounds the
sticky, so exactly ONE label is ever pinned — the next day pushes the last one
out instead of stacking (the 2026-06-10 pile-up of layered pills is gone).
Mirror .inbox-bubbles' flex column + within-turn gap so message left/right
alignment and turn spacing are identical to an unwrapped list. */
.inbox-day-group {
display: flex;
flex-direction: column;
gap: 0.16rem;
min-width: 0;
}
/* Day divider — a centred uppercase pill (Figma's "TODAY") that pins to the top
of the thread while scrolling its day. Pill background + hairline keep it
legible floating over the bubbles. */
.inbox-day-sep {
position: sticky;
top: 4px;
z-index: 3;
display: flex;
justify-content: center;
margin: 0.55rem 0 0.35rem;
pointer-events: none;
}
.inbox-day-sep span {
font-size: 0.64rem;
font-weight: 650;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-soft);
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: 999px;
padding: 0.18rem 0.66rem;
box-shadow: var(--shadow-soft, 0 1px 2px rgba(0, 0, 0, 0.06));
transition: opacity 0.3s ease;
}
/* WhatsApp behaviour for the STUCK pill: while it floats over bubbles it shows only
during active scrolling, then fades out — at rest it was reading as content of
whatever card it happened to cover ("CALL SUMMARY YESTERDAY", iPad 2026-07-20),
and it duplicated the turn footer's own "yesterday" right beneath it. Inline
(non-stuck) pills between day groups stay visible; InboxClient stamps is-stuck /
is-scrolling from the bubbles scroller. */
.inbox-day-sep.is-stuck span { opacity: 0; }
.inbox-bubbles.is-scrolling .inbox-day-sep.is-stuck span { opacity: 1; }
.inbox-toolbar {
display: flex;
align-items: center;
gap: 0.35rem;
margin-bottom: -8px;
}
/* New compact context bar that replaces the format-button toolbar
per the user's reference screenshot. Holds a small sparkle icon,
the prefix ("{guest} is"), and the sentiment dropdown chip. The
row is borderless on top of the composer surface and a hairline
divider below separates it from the message textarea. */
.inbox-context-bar {
/* No divider (Hakim ×2, 2026-06-10) — the sentiment row stays borderless on the
composer surface like the Figma toolbar row. But a few px of breathing room
below so the chip isn't sitting literally on the textarea's top edge
(Hakim 2026-06-23 "sentiment dropdown is touching the type bar"). */
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0 0.6rem;
margin: 0 0 0.4rem;
font-size: 0.78rem;
color: var(--text-muted);
}
/* Collapse toggle for the (chonky) insight strip — pinned to the right of the
sentiment row; a pulsing dot signals there's a read to expand. */
.inbox-insight-toggle {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 4px;
position: relative;
padding: 2px 7px;
border: 1px solid var(--border-subtle);
border-radius: 999px;
background: transparent;
color: var(--text-soft);
font-size: 0.7rem;
font-weight: 600;
cursor: pointer;
transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.inbox-insight-toggle:hover {
background: color-mix(in srgb, var(--accent) 8%, transparent);
color: var(--text-primary);
border-color: color-mix(in srgb, var(--accent) 30%, var(--border-subtle));
}
.inbox-insight-toggle-spark {
display: inline-flex;
color: var(--accent);
}
.inbox-insight-toggle-label {
letter-spacing: 0.01em;
}
.inbox-insight-toggle-chev {
transition: transform 0.15s ease;
}
.inbox-insight-toggle.is-open .inbox-insight-toggle-chev {
transform: rotate(180deg);
}
.inbox-insight-dot {
position: absolute;
top: -2px;
right: -2px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 2px var(--bg-elevated);
animation: inbox-insight-dot-pulse 2s ease-in-out infinite;
}
@keyframes inbox-insight-dot-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(0.82); }
}
.inbox-insight-toggle.is-loading .inbox-insight-toggle-spark {
animation: inbox-insight-spark-pulse 1.1s ease-in-out infinite;
}
@keyframes inbox-insight-spark-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
@media (max-width: 520px) {
.inbox-insight-toggle-label { display: none; }
}
.inbox-context-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
color: var(--text-soft);
flex: 0 0 auto;
}
.inbox-sentiment-row {
display: inline-flex;
align-items: center;
gap: 0.4rem;
flex: 1 1 auto;
min-width: 0;
}
.inbox-sentiment-prefix {
color: var(--text-muted);
font-size: 0.78rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 220px;
}
.inbox-sentiment-chip {
display: inline-flex;
align-items: center;
gap: 0.32rem;
padding: 0.18rem 0.55rem 0.18rem 0.42rem;
border-radius: 999px;
border: 1px solid var(--border-subtle);
background: var(--bg-input);
color: var(--text-primary);
font-size: 0.76rem;
font-weight: 600;
cursor: pointer;
flex: 0 0 auto;
max-width: 220px;
/* Tone-driven tinting comes from data-tone attributes below so
the chip mirrors the dropdown's coloured swatches without any
extra inline styles. */
}
.inbox-sentiment-chip:hover {
filter: brightness(1.06);
}
/* Tone TEXT mixes toward --text-primary so it tracks the theme: near-black in
light (≈ the old fixed hexes), near-white in dark — the flat literals were
light-tuned and went muddy/low-contrast on the dark tinted background. */
.inbox-sentiment-chip[data-tone="good"] {
background: color-mix(in srgb, #22c55e 18%, var(--bg-input));
border-color: color-mix(in srgb, #22c55e 45%, var(--border-subtle));
color: color-mix(in srgb, #16a34a 62%, var(--text-primary));
}
.inbox-sentiment-chip[data-tone="warm"] {
background: color-mix(in srgb, #84cc16 18%, var(--bg-input));
border-color: color-mix(in srgb, #84cc16 45%, var(--border-subtle));
color: color-mix(in srgb, #65a30d 62%, var(--text-primary));
}
.inbox-sentiment-chip[data-tone="neutral"] {
background: color-mix(in srgb, #94a3b8 18%, var(--bg-input));
border-color: color-mix(in srgb, #94a3b8 45%, var(--border-subtle));
color: var(--text-primary);
}
.inbox-sentiment-chip[data-tone="warn"] {
background: color-mix(in srgb, #f59e0b 18%, var(--bg-input));
border-color: color-mix(in srgb, #f59e0b 45%, var(--border-subtle));
color: color-mix(in srgb, #d97706 62%, var(--text-primary));
}
.inbox-sentiment-chip[data-tone="bad"] {
background: color-mix(in srgb, #ef4444 18%, var(--bg-input));
border-color: color-mix(in srgb, #ef4444 45%, var(--border-subtle));
color: color-mix(in srgb, #dc2626 62%, var(--text-primary));
}
.inbox-sentiment-emoji {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
flex: 0 0 auto;
/* Avatar-style: a Lucide mood glyph in a mid-tone colour on a subtle same-tone
disc. currentColor-based disc adapts to both themes; the mid-tones below all
clear the 3:1 non-text contrast bar on light and dark surfaces. */
background: color-mix(in srgb, currentColor 14%, transparent);
}
.inbox-sentiment-emoji[data-tone="good"] { color: #16a34a; }
.inbox-sentiment-emoji[data-tone="warm"] { color: #65a30d; }
.inbox-sentiment-emoji[data-tone="neutral"] { color: #64748b; }
.inbox-sentiment-emoji[data-tone="warn"] { color: #d97706; }
.inbox-sentiment-emoji[data-tone="bad"] { color: #dc2626; }
.inbox-sentiment-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 160px;
}
.inbox-sentiment-menu .inbox-sentiment-item {
display: flex;
align-items: center;
gap: 0.45rem;
padding: 6px 10px;
}
.inbox-sentiment-item[data-tone="good"]:hover { background: color-mix(in srgb, #22c55e 14%, transparent); }
.inbox-sentiment-item[data-tone="warm"]:hover { background: color-mix(in srgb, #84cc16 14%, transparent); }
.inbox-sentiment-item[data-tone="neutral"]:hover { background: color-mix(in srgb, #94a3b8 14%, transparent); }
.inbox-sentiment-item[data-tone="warn"]:hover { background: color-mix(in srgb, #f59e0b 14%, transparent); }
.inbox-sentiment-item[data-tone="bad"]:hover { background: color-mix(in srgb, #ef4444 14%, transparent); }
.inbox-sentiment-item.is-active { background: color-mix(in srgb, var(--ring) 14%, transparent); }
/* Template picker — the toolbar "templates" button's popover (portal to body). */
.inbox-template-menu {
display: flex;
flex-direction: column;
gap: 2px;
padding: 6px;
border-radius: 10px;
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
z-index: 1200;
max-height: 300px;
overflow-y: auto;
}
.inbox-template-item {
display: flex;
flex-direction: column;
gap: 1px;
align-items: flex-start;
text-align: left;
width: 100%;
padding: 7px 9px;
border: none;
border-radius: 7px;
background: transparent;
cursor: pointer;
}
.inbox-template-item:hover {
background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.inbox-template-label {
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-primary);
}
.inbox-template-hint {
font-size: 0.75rem;
color: var(--text-soft);
}
/* "+ New template" quick-add row pinned to the top of the picker. */
.inbox-template-item--manage {
border-bottom: 1px solid var(--border-subtle);
border-radius: 7px 7px 0 0;
margin-bottom: 2px;
}
.inbox-template-item--manage .inbox-template-label {
color: var(--accent);
}
.inbox-template-empty {
margin: 0;
padding: 8px 9px;
font-size: 0.75rem;
color: var(--text-muted);
}
/* Staged outbound attachments — removable chips above the composer toolbar. */
/* Inline staged-attachment chip — the `attachment` TipTap node. It flows WITH the
composer text (replacing the old detached chip stack) and reads as a small file
pill sitting on the text baseline, mirroring the mention-chip aesthetic. */
.inbox-inline-attach {
display: inline-flex;
align-items: center;
gap: 5px;
max-width: 220px;
margin: 0 2px;
padding: 1px 4px 1px 6px;
vertical-align: -3px;
border-radius: 7px;
border: 1px solid var(--border-subtle);
background: var(--bg-elevated);
font-size: 0.82em;
line-height: 1.5;
color: var(--text-primary);
white-space: nowrap;
user-select: none;
}
.inbox-inline-attach.is-ready {
border-color: color-mix(in srgb, var(--accent) 42%, var(--border-subtle));
}
.inbox-inline-attach.is-error {
border-color: color-mix(in srgb, var(--state-error) 55%, var(--border-subtle));
background: color-mix(in srgb, var(--state-error) 8%, var(--bg-elevated));
}
/* PM selects the atom (click / shift-arrow) before a backspace deletes it. */
.inbox-inline-attach.ProseMirror-selectednode {
outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
outline-offset: 1px;
}
/* Full inline image — the actual picture sits in the text flow (ClickUp-style):
caret lands before/after, text wraps around it, ✕ appears on hover. */
.inbox-inline-attach.is-img {
position: relative;
display: inline-block;
max-width: min(340px, 100%);
padding: 0;
margin: 3px 2px;
border: 1px solid var(--border-subtle);
border-radius: 10px;
overflow: hidden;
vertical-align: bottom;
white-space: normal;
line-height: 0;
}
.inbox-inline-attach-img {
display: block;
max-width: 100%;
max-height: 240px;
object-fit: contain;
}
.inbox-inline-attach.is-img .inbox-inline-attach-x {
position: absolute;
top: 5px;
right: 5px;
width: 22px;
height: 22px;
border-radius: 7px;
background: rgb(15 15 18 / 0.62);
color: #fff;
opacity: 0;
transition: opacity 0.12s ease;
}
.inbox-inline-attach.is-img:hover .inbox-inline-attach-x,
.inbox-inline-attach.is-img.ProseMirror-selectednode .inbox-inline-attach-x {
opacity: 1;
}
.inbox-inline-attach.is-img .inbox-inline-attach-x:hover {
background: rgb(15 15 18 / 0.82);
color: #fff;
}
/* Upload-in-flight veil over the live preview. */
.inbox-inline-attach-veil {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
background: color-mix(in srgb, var(--bg-elevated) 55%, transparent);
}
.inbox-inline-attach-media {
display: inline-flex;
align-items: center;
color: var(--text-soft);
flex: none;
}
.inbox-inline-attach.is-ready .inbox-inline-attach-media {
color: var(--accent);
}
.inbox-inline-attach-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.inbox-inline-attach-progress {
flex: none;
color: var(--text-soft);
font-size: 0.68rem;
font-variant-numeric: tabular-nums;
font-weight: 700;
}
.inbox-inline-attach-veil .inbox-inline-attach-progress {
padding: 2px 6px;
border-radius: 999px;
color: #fff;
background: rgb(15 15 18 / 0.72);
}
.inbox-inline-attach-err {
color: var(--state-error);
font-weight: 600;
flex: none;
}
.inbox-inline-attach-x {
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--text-muted);
cursor: pointer;
font-size: 1.05em;
line-height: 1;
padding: 0 1px;
flex: none;
border-radius: 4px;
}
.inbox-inline-attach-x:hover {
color: var(--text-primary);
background: color-mix(in srgb, var(--text-muted) 18%, transparent);
}
.inbox-attach-spinner {
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
border-top-color: var(--accent);
animation: inbox-attach-spin 0.7s linear infinite;
display: inline-block;
}
@keyframes inbox-attach-spin {
to {
transform: rotate(360deg);
}
}
/* Templates management modal (portal). Mirrors the app's modal pattern. */
.inbox-tmpl-overlay {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
}
.inbox-tmpl-modal {
width: 100%;
max-width: 560px;
max-height: 86vh;
display: flex;
flex-direction: column;
background: var(--bg-elevated);
border: 1px solid var(--border-strong);
border-radius: 14px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
overflow: hidden;
}
.inbox-tmpl-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.9rem 1rem;
border-bottom: 1px solid var(--border-subtle);
}
.inbox-tmpl-title {
margin: 0;
font-size: 0.95rem;
font-weight: 700;
color: var(--text-primary);
}
.inbox-tmpl-close {
border: none;
background: transparent;
cursor: pointer;
font-size: 1.3rem;
line-height: 1;
color: var(--text-muted);
padding: 0 4px;
}
.inbox-tmpl-close:hover {
color: var(--text-primary);
}
.inbox-tmpl-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.7rem 1rem;
}
.inbox-tmpl-count {
font-size: 0.75rem;
color: var(--text-muted);
}
.inbox-tmpl-list {
display: flex;
flex-direction: column;
gap: 0.6rem;
padding: 0 1rem 1rem;
overflow-y: auto;
}
.inbox-tmpl-empty {
margin: 0.5rem 0;
font-size: 0.8125rem;
color: var(--text-muted);
}
.inbox-tmpl-card {
display: flex;
flex-direction: column;
gap: 0.45rem;
padding: 0.7rem;
border: 1px solid var(--border-subtle);
border-radius: 10px;
background: var(--bg-input);
}
.inbox-tmpl-card-row {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.inbox-tmpl-input,
.inbox-tmpl-body {
font: inherit;
font-size: 0.8125rem;
color: var(--text-primary);
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: 8px;
padding: 0.45rem 0.55rem;
min-width: 0;
}
.inbox-tmpl-input {
flex: 1 1 160px;
}
.inbox-tmpl-input--hint {
flex: 1 1 140px;
}
.inbox-tmpl-body {
width: 100%;
resize: vertical;
line-height: 1.4;
}
.inbox-tmpl-input:focus,
.inbox-tmpl-body:focus {
outline: none;
border-color: var(--accent);
}
.inbox-tmpl-error {
margin: 0;
font-size: 0.75rem;
color: var(--state-error);
}
.inbox-tmpl-card-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.inbox-tmpl-del {
border: none;
background: transparent;
cursor: pointer;
font-size: 0.78rem;
color: var(--state-error);
padding: 0.3rem 0.2rem;
}
.inbox-tmpl-del:hover {
text-decoration: underline;
}
.inbox-tmpl-del:disabled {
opacity: 0.5;
cursor: default;
}
.inbox-tmpl-save,
.inbox-tmpl-add {
font-size: 0.8125rem;
}
@media (max-width: 768px) {
.inbox-tmpl-modal {
max-width: 100%;
max-height: 92vh;
}
}
/* Call-confirm bar (Hakim 2026-06-22): selecting "Call" arms this instead of
auto-dialing; explicit Call / Cancel. Token-based, wraps on small screens. */
.inbox-call-confirm {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
min-width: 0;
margin: 0.35rem 0;
padding: 0.4rem 0.6rem;
border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border-subtle));
border-radius: 10px;
background: color-mix(in srgb, var(--accent) 8%, var(--bg-elevated));
}
.inbox-call-confirm-label {
flex: 1 1 auto;
min-width: 0;
font-size: 0.8125rem;
color: var(--text-soft);
overflow-wrap: anywhere;
}
.inbox-call-confirm-go {
white-space: nowrap;
}
/* "Call via" FROM-number chooser inside the call panel. */
.inbox-call-via {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.8125rem;
color: var(--text-soft);
white-space: nowrap;
}
.inbox-call-via-label {
color: var(--text-muted);
}
.inbox-call-via-select {
max-width: 11rem;
padding: 0.25rem 0.4rem;
border: 1px solid var(--border-subtle);
border-radius: 8px;
background: var(--bg-input, var(--bg-elevated));
color: var(--text-primary);
font-size: 0.8125rem;
font-family: inherit;
}
.inbox-call-via-single {
font-size: 0.8125rem;
color: var(--text-muted);
white-space: nowrap;
}
.inbox-call-confirm-note {
display: inline-block;
margin: 0.35rem 0;
padding: 0.3rem 0.55rem;
border-radius: 8px;
background: var(--surface-muted);
color: var(--text-muted);
font-size: 0.78rem;
}
.inbox-bubble {
/* Figma bubbles: flat fills, no border, 12px radius, roomier padding. */
max-width: 85%;
padding: 0.65rem 0.85rem;
border-radius: 12px;
border: none;
font-size: 0.875rem;
line-height: 1.5;
}
/* Email bubbles render a whole email (its own white card / sandboxed iframe), so
let them use the FULL conversation width instead of the 85% chat-bubble cap, and
drop the bubble padding/fill so the email card stands on its own — otherwise the
email is clipped into a ~400px box (Hakim 2026-06-23). */
.inbox-bubble.is-email {
max-width: 100%;
width: 100%;
padding: 0;
background: transparent;
}
/* An email bubble must NOT carry the .in/.out chat-bubble fill — those rules live
later in the file and outrank the plain .is-email selector, which left a tinted
frame behind the now-borderless card + meta strip. Force transparent (higher
specificity) so ONLY the .inbox-emailcard-doc box reads as a container (Hakim
2026-06-25). */
.inbox-bubble.in.is-email,
.inbox-bubble.out.is-email {
background: transparent;
padding: 0;
}
/* Email cards are documents, not chat balloons. Keep the sender avatar on the
appropriate side, but let the document itself use the conversation's full
available width — feedback #5681 showed that the old 88% body cap still made
ordinary email needlessly cramped. :has() targets it without a JSX change. */
.inbox-msg:has(> .inbox-msg-body > .inbox-bubble.is-email) > .inbox-msg-body {
width: 100%;
max-width: 100%;
}
/* Beats `.inbox-msg > .inbox-msg-body > .inbox-bubble { width: fit-content }` (same
chain + .is-email = higher specificity), so the email card fills its row. */
.inbox-msg > .inbox-msg-body > .inbox-bubble.is-email {
width: 100%;
max-width: 100%;
}
.inbox-bubble p {
margin: 0;
white-space: pre-wrap;
word-break: break-word;
}
/* Clickable URLs inside chat bubbles + internal notes (linkify()). color:inherit so
the link stays legible on BOTH the light incoming bubble and the accent outgoing
bubble, in either theme — the underline is what signals it's a link. */
.inbox-inline-link {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
word-break: break-word;
}
.inbox-inline-link:hover {
opacity: 0.82;
}
/* WhatsApp reply-quote chip inside a bubble — the message being replied to, shown
as an accent-bordered inset above the reply text (mirrors the native client).
Both in/out bubbles use dark-on-light fills, so one token set reads in either. */
.inbox-quote {
display: flex;
flex-direction: column;
gap: 1px;
margin: 0 0 0.4rem;
padding: 0.25rem 0.5rem;
border-left: 3px solid var(--accent);
border-radius: 6px;
background: color-mix(in srgb, var(--accent) 9%, var(--bg-elevated));
max-width: 100%;
}
.inbox-quote-label {
font-size: 0.6875rem;
font-weight: 600;
color: var(--accent);
line-height: 1.3;
}
.inbox-quote-text {
font-size: 0.75rem;
color: var(--text-muted);
line-height: 1.35;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* #5 (Hakim 2026-06-30) — "N replies" pill under a parent UOS note. Replies collapse
OUT of the canvas; this is the single entry point into the pane-4 Replies view. */
.inbox-replies-chip {
display: inline-flex;
align-items: center;
gap: 5px;
align-self: flex-start;
margin: 1px 0 0.35rem;
padding: 2px 9px 2px 7px;
border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border-subtle));
border-radius: 999px;
background: color-mix(in srgb, var(--accent) 8%, var(--bg-elevated));
color: var(--accent);
font-size: 0.75rem;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
transition: background 0.12s ease;
}
.inbox-replies-chip:hover {
background: color-mix(in srgb, var(--accent) 16%, var(--bg-elevated));
}
.inbox-replies-chip svg {
flex-shrink: 0;
}
/* Match the bubble's side — internal notes are outbound, so the pill sits on the right. */
.inbox-replies-chip.out {
align-self: flex-end;
margin-left: auto;
}
.inbox-replies-chip.in {
align-self: flex-start;
margin-right: auto;
}
/* Internal (UOS) notes are outbound → the chip sits on the RIGHT, matching the bubble.
(Root cause of the "bottom-left" bug: side==="internal" had no align rule and fell to
the base flex-start while the bubble was flex-end.) Hakim 2026-07-01. */
.inbox-replies-chip.internal {
align-self: flex-end;
margin-left: auto;
}
/* Facepile of who replied — up to 3 overlapping avatars ahead of the count. */
.inbox-replies-avatars {
display: inline-flex;
align-items: center;
}
.inbox-replies-avatar {
width: 18px;
height: 18px;
border-radius: 50%;
overflow: hidden;
margin-left: -6px;
border: 1.5px solid var(--bg-elevated);
background: color-mix(in srgb, var(--accent) 22%, var(--bg-elevated));
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
}
.inbox-replies-avatar:first-child {
margin-left: 0;
}
.inbox-replies-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* (No `.inbox-replies-avatar-fallback` any more — the reply faces render the
canonical ContactAvatar, which brings its own seeded disc. 2026-07-26.) */
.inbox-replies-count {
white-space: nowrap;
}
/* Per-message metadata tooltip — a styled, INSTANT hover bubble showing
channel · number · time · delivery for each message. Replaces the slow, hidden
native title (Hakim wanted per-message source actually visible). */
.inbox-bubble[data-meta] {
position: relative;
}
.inbox-bubble[data-meta]:hover::after {
content: attr(data-meta);
position: absolute;
bottom: calc(100% + 6px);
left: 0;
z-index: 70;
white-space: nowrap;
padding: 0.3rem 0.55rem;
border-radius: 8px;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.01em;
color: var(--text-primary);
background: var(--bg-elevated);
border: 1px solid var(--border-strong);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
pointer-events: none;
}
/* Right-aligned (outbound) bubbles anchor the tooltip to their right edge. */
.inbox-bubble.out[data-meta]:hover::after {
left: auto;
right: 0;
}
/* Internal-note composer state — make it UNMISTAKABLE you're writing a private note
(Hakim: "not obvious enough that im in internal messaging mode"). */
.inbox-compose.is-note {
background: color-mix(in srgb, var(--state-warning) 9%, var(--bg-elevated));
}
/* WhatsApp 24h session-window countdown — the live "free replies for Xh Ym"
pill above the composer (components/inbox/WhatsAppWindowStatus.tsx). Open =
success; final hour = warning; lapsed = error; never-opened = muted. */
.inbox-wa-window {
display: flex;
align-items: center;
gap: 0.45rem;
padding: 0.4rem 0.6rem;
margin-bottom: 0.45rem;
font-size: 0.75rem;
border-radius: 8px;
border: 1px solid var(--border-subtle);
}
.inbox-wa-window-text strong {
font-weight: 700;
}
.inbox-wa-window-dot {
flex: 0 0 auto;
width: 8px;
height: 8px;
border-radius: 50%;
}
.inbox-wa-window--open {
color: color-mix(in srgb, var(--state-success) 80%, var(--text-primary));
background: color-mix(in srgb, var(--state-success) 12%, var(--bg-elevated));
border-color: color-mix(in srgb, var(--state-success) 35%, var(--border-subtle));
}
.inbox-wa-window--open .inbox-wa-window-dot {
background: var(--state-success);
}
.inbox-wa-window--open.is-soon {
color: color-mix(in srgb, var(--state-warning) 85%, var(--text-primary));
background: color-mix(in srgb, var(--state-warning) 14%, var(--bg-elevated));
border-color: color-mix(in srgb, var(--state-warning) 45%, var(--border-subtle));
}
.inbox-wa-window--open.is-soon .inbox-wa-window-dot {
background: var(--state-warning);
}
.inbox-wa-window--closed {
color: color-mix(in srgb, var(--state-error) 82%, var(--text-primary));
background: color-mix(in srgb, var(--state-error) 12%, var(--bg-elevated));
border-color: color-mix(in srgb, var(--state-error) 38%, var(--border-subtle));
}
.inbox-wa-window--closed .inbox-wa-window-dot {
background: var(--state-error);
}
.inbox-wa-window--none {
color: var(--text-soft, var(--text-soft));
background: var(--bg-elevated);
border-style: dashed;
}
.inbox-wa-window--none .inbox-wa-window-dot {
background: var(--text-soft, var(--text-soft));
}
/* --- Thread Insight strip (pane 3) ---------------------------------------
Sits flush under the sentiment chip. Calm by default: renders nothing on a
quiet thread, lights up on an active one. Aligns with the context bar's
0.6rem inset so the fairness pill lines up under the chip. */
.inbox-insight {
display: flex;
flex-direction: column;
gap: 0.4rem;
padding: 0.35rem 0.6rem 0.1rem;
min-width: 0;
font-size: 0.8125rem; /* 13px — readable; never below the 12px body floor */
}
.inbox-insight--loading {
flex-direction: row;
align-items: center;
gap: 0.4rem;
color: var(--text-soft);
font-size: 0.8125rem;
}
.inbox-insight-spark {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
animation: inbox-insight-pulse 1.2s ease-in-out infinite;
}
@keyframes inbox-insight-pulse {
0%, 100% { opacity: 0.35; }
50% { opacity: 1; }
}
.inbox-insight-read {
display: flex;
flex-wrap: wrap;
/* flex-start (not baseline) + line-heights matched to the pill keeps the
fairness chip aligned with the first line of the summary, not floating. */
align-items: flex-start;
gap: 0.35rem 0.45rem;
min-width: 0;
}
.inbox-insight-prose {
display: flex;
flex-direction: column;
gap: 0.2rem;
flex: 1 1 auto;
min-width: 0;
}
.inbox-insight-summary {
color: var(--text-soft);
line-height: 1.45;
overflow-wrap: anywhere;
}
.inbox-insight-fairness-note {
color: var(--text-soft);
font-size: 0.8125rem;
line-height: 1.45;
overflow-wrap: anywhere;
}
/* Fairness pill — three calm, distinct hues so a glance reads how warranted the
grievance is: amber = justified (act), grey = part-fair, indigo = overstated
(stay measured). NOT the red/green sentiment palette — that's the chip's job. */
.inbox-insight-fairness {
display: inline-flex;
align-items: center;
gap: 0.25rem;
flex: 0 0 auto;
padding: 0.08rem 0.4rem;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.45;
border: 1px solid var(--border-subtle);
white-space: nowrap;
}
.inbox-insight-fairness[data-fairness="justified"] {
color: color-mix(in srgb, var(--state-warning) 85%, var(--text-primary));
background: color-mix(in srgb, var(--state-warning) 13%, var(--bg-elevated));
border-color: color-mix(in srgb, var(--state-warning) 42%, var(--border-subtle));
}
.inbox-insight-fairness[data-fairness="mixed"] {
color: var(--text-soft);
background: var(--bg-elevated);
border-color: var(--border-subtle);
}
.inbox-insight-fairness[data-fairness="overstated"] {
color: color-mix(in srgb, var(--accent) 78%, var(--text-primary));
background: color-mix(in srgb, var(--accent) 9%, var(--bg-elevated));
border-color: color-mix(in srgb, var(--accent) 32%, var(--border-subtle));
}
/* Suggested next step — a gentle indigo action card. Display-only guidance; the
hand-off to the Pane-5 assistant is roadmapped (its receiver lives there). */
.inbox-insight-next {
display: flex;
align-items: flex-start;
gap: 0.45rem;
padding: 0.4rem 0.55rem;
border-radius: 8px;
background: color-mix(in srgb, var(--accent) 6%, var(--bg-elevated));
border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border-subtle));
min-width: 0;
}
.inbox-insight-next-arrow {
display: inline-flex;
margin-top: 1px;
color: var(--accent);
flex: 0 0 auto;
}
.inbox-insight-next-body {
display: flex;
flex-direction: column;
gap: 0.1rem;
min-width: 0;
}
.inbox-insight-next-label {
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 700;
color: var(--accent);
}
.inbox-insight-next-text {
color: var(--text-primary);
font-weight: 500;
line-height: 1.4;
overflow-wrap: anywhere;
}
.inbox-insight-next-why {
color: var(--text-soft);
font-size: 0.8125rem;
line-height: 1.45;
overflow-wrap: anywhere;
}
/* Media message (e.g. WhatsApp photo) — a thumbnail in the bubble that opens the
full image in a new tab on click. Keeps a small gap before a caption/footer. */
.inbox-bubble-media {
display: block;
margin-bottom: 0.3rem;
border-radius: 8px;
overflow: hidden;
width: min(240px, 100%);
max-width: 240px;
aspect-ratio: 4 / 3;
border: 1px solid var(--border-subtle);
background: var(--surface-muted);
cursor: zoom-in;
position: relative; /* anchors the per-attachment comment chip overlay */
}
.inbox-bubble-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* A WhatsApp provider can emit one multi-photo selection as several message
rows. The read-side album deliberately has a stable card width, so they become a
compact 2×2 mosaic instead of inheriting the single-photo bubble's intrinsic
width. The normal tokenised in/out bubble still supplies both themes. */
.inbox-msg > .inbox-msg-body > .inbox-bubble.is-photo-album {
width: min(100%, 420px);
padding: 4px;
}
/* #32 — 3+ photos on ONE message render as a compact mosaic, not a stack (a
140-photo email used to render 140 full-size blocks under each other). Square
aspect-ratio tiles = zero post-load layout shift, so the thread's scroll
anchor holds without the re-anchor dance the full-size media path needs.
Rest state caps at 8 tiles; the last tile wears the "+N" scrim (its own photo
counts as hidden too). Tokens only → light/dark parity; the scrim is fixed
white-on-dark, readable on any photo. */
.inbox-photo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
gap: 4px;
width: min(100%, 480px);
margin-bottom: 0.3rem;
}
.inbox-photo-grid.is-whatsapp-album {
grid-template-columns: repeat(2, minmax(0, 1fr));
width: min(100%, 412px);
margin-bottom: 0;
}
.inbox-photo-tile {
position: relative;
display: block;
aspect-ratio: 1;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--border-subtle);
background: var(--surface-muted);
cursor: zoom-in;
}
.inbox-photo-tile img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.inbox-photo-more-scrim {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(15, 18, 34, 0.58);
color: #fff;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.02em;
}
.inbox-photo-grid-less {
align-self: flex-start;
margin: 0 0 0.3rem;
padding: 0;
border: none;
background: none;
color: var(--accent);
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
}
.inbox-photo-grid-less:hover { text-decoration: underline; }
/* #29 — read-only preview of the WhatsApp quick-reply buttons we offered the guest,
beneath our own sent bubble's text. They look like the tappable buttons the guest
sees but are inert for staff; their own elevated fill keeps them legible on the
lavender .inbox-bubble.out. Token-based → light/dark + small-screen parity. */
.inbox-qr-buttons {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.inbox-qr-caption {
flex-basis: 100%;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
}
.inbox-qr-button {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 5px 12px;
border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border-subtle));
border-radius: 999px;
background: var(--bg-elevated);
color: var(--accent);
font-size: 12px;
font-weight: 600;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: default;
}
/* #24 — INBOUND interactive reply on the guest bubble. A quick-reply/list tap shows
a small tag (the answer itself is the bubble body); a shared location shows a
tappable card. Tokens give light/dark for free; both wrap on small screens. */
.inbox-interactive-tag {
display: inline-flex;
align-items: center;
gap: 4px;
width: max-content;
max-width: 100%;
margin-top: 6px;
padding: 2px 9px;
border: 1px solid var(--border-subtle);
border-radius: 999px;
background: var(--bg-elevated);
color: var(--text-muted);
font-size: 12px;
font-weight: 600;
line-height: 1.4;
}
.inbox-interactive-tag svg {
flex: none;
opacity: 0.8;
}
.inbox-loc-card {
display: flex;
align-items: flex-start;
gap: 10px;
min-width: 0;
max-width: 320px;
margin-top: 6px;
padding: 10px 12px;
border: 1px solid var(--border-subtle);
border-radius: 12px;
background: var(--bg-elevated);
color: var(--text-primary);
text-decoration: none;
transition: border-color 0.15s ease;
}
.inbox-loc-card:hover {
border-color: color-mix(in srgb, var(--accent) 40%, var(--border-subtle));
}
.inbox-loc-pin {
display: inline-flex;
flex: none;
margin-top: 1px;
color: var(--accent);
}
.inbox-loc-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.inbox-loc-title {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
overflow-wrap: anywhere;
}
.inbox-loc-addr {
font-size: 12px;
color: var(--text-muted);
overflow-wrap: anywhere;
}
.inbox-loc-link {
margin-top: 2px;
font-size: 12px;
font-weight: 600;
color: var(--accent);
}
.inbox-bubble.in {
/* Figma inbound: soft neutral gray (#F1F1F2 on white). Token mix gives the
dark-mode equivalent (slightly lifted surface) for free. */
align-self: flex-start;
background: color-mix(in srgb, var(--text-primary) 6%, var(--bg-elevated));
}
.inbox-bubble.out {
/* Figma outbound: soft lavender fill with normal (dark-in-light) text. */
align-self: flex-end;
background: color-mix(in srgb, var(--accent) 14%, var(--bg-elevated));
}
.inbox-bubble.out.is-automated {
/* Dashed amber border re-declared in full — the base bubble is borderless. */
border: 1px dashed color-mix(in srgb, #f59e0b 45%, var(--border-subtle));
background: color-mix(in srgb, #f59e0b 12%, var(--bg-elevated));
}
.inbox-bubble.in.is-internal {
/* OTHER people's UOS / internal posts render FLAT like ClickUp/Slack, not as a
chat bubble: transparent surface, no border (higher specificity beats the
.inbox-bubble.in gray fill). Identity comes from the avatar + name + time
header above (.inbox-msg-head); the whole-row hover wash frames it.
Scoped to .in ONLY — YOUR OWN posts are side "out" and keep the standard
lavender sent-bubble like every other message you send (Hakim 2026-07-02:
"uos text is still on left side … when im the sender"). */
background: transparent;
border: none;
/* Flat rows carry no bubble chrome, so drop the bubble padding too — the text
sits flush on the content column, exactly under the sender name. */
padding: 0.05rem 0;
}
/* Per-message row = avatar + (channel chip + bubble). M4: sender/recipient
profile + transport shown ON each message (mirrors the calendar reservation
thread). The ROW owns left/right alignment, so the bubble no longer self-aligns. */
.inbox-msg {
/* Card = one turn: avatar+name+meta header (top), bubble(s), reactions (bottom).
A COLUMN — the avatar/name/meta live in the header now (Hakim 2026-06-12 avatar
then name; 2026-07-23 time+tick joined the name line). The ROW spans the FULL
pane width so the hover wash frames the WHOLE row, not just a 75% card (Hakim
2026-07-23: "highlight the whole row … hover anywhere on that row"). */
display: flex;
flex-direction: column;
width: 100%;
max-width: 100%;
}
/* The 75% content cap lives on the BODY now (was on .inbox-msg): an inbound (left)
and outbound (right) bubble must leave clear whitespace on the OPPOSITE side or the
chat loses its left/right sidedness (Hakim 2026-06-17). align-items sides the body
within the full-width row; align-self is gone (the row no longer self-sizes). */
.inbox-msg.in {
align-items: flex-start;
}
.inbox-msg.out {
align-items: flex-end;
}
/* Whole-message hover affordance — EVERY message (guest or internal, any transport)
gets a clear hover state, not just internal bubbles (Hakim 2026-06-30: "an effect on
the whole row when you hover, regardless of transport"). A subtle indigo wash frames
the card; the bubble + meta sit on top. */
.inbox-msg {
border-radius: 14px;
padding: 2px 8px;
transition: background 0.12s ease;
}
.inbox-msg:hover {
background: color-mix(in srgb, var(--accent) 8%, transparent);
}
/* Internal UOS posts use one ClickUp-style anatomy for every author. They are
not inbound/outbound speech bubbles: the avatar is always in a left rail and
the message content stays in one readable column. Guest transports retain
the sided chat treatment below. */
.inbox-msg.is-uos-feed {
align-items: stretch;
}
.inbox-msg.is-uos-feed .inbox-msg-body,
.inbox-msg.is-uos-feed.out .inbox-msg-body {
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
column-gap: 10px;
row-gap: 3px;
align-items: start;
width: 100%;
max-width: 100%;
}
.inbox-msg.is-uos-feed .inbox-msg-body > * {
grid-column: 2;
justify-self: start;
}
.inbox-msg.is-uos-feed .inbox-msg-head {
display: contents;
}
.inbox-msg.is-uos-feed .inbox-msg-avatar {
grid-column: 1;
grid-row: 1;
width: 32px;
height: 32px;
}
.inbox-msg.is-uos-feed .inbox-msg-headline {
grid-column: 2;
grid-row: 1;
align-self: center;
min-height: 32px;
}
.inbox-msg.is-uos-feed .inbox-msg-sender {
color: var(--text-primary);
font-size: 0.8rem;
font-weight: 650;
}
.inbox-msg.is-uos-feed .inbox-bubble.is-internal,
.inbox-msg.is-uos-feed .inbox-bubble.in.is-internal {
width: 100%;
max-width: none;
padding: 0.05rem 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
/* ClickUp-parity flatten (approved 2026-07-26): a mention-of-you row keeps the
SAME silhouette as every other message — a thin accent edge + the @pill carry
the highlight. The old full-card 9% wash broke the feed into mixed species. */
.inbox-msg.is-uos-feed.is-mention-for-me {
box-shadow: inset 3px 0 0 var(--accent);
}
/* (Removed the old .inbox-msg.internal right-align override. UOS messages now
align by SENDER via .inbox-msg.in / .inbox-msg.out — the viewer's own posts
right, everyone else's left, like a real team chat. sideOf() drives it.) */
.inbox-msg-body {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
/* Content cap moved here from .inbox-msg so the ROW can be full-width for the
whole-row hover while the bubble still leaves whitespace on the opposite side. */
max-width: 75%;
}
.inbox-msg.out .inbox-msg-body {
align-items: flex-end;
}
/* Flat-feed anatomy for the LEFT side (guest inbound, email, UOS): a ClickUp-style
avatar rail + one aligned content column. The body becomes a grid — avatar in the
rail, everything else (name, body, replies, meta) starts on the SAME vertical
line, instead of the old ragged stack where the text hugged the pane edge under
the avatar (Hakim 2026-07-02: "all text is on the left side of the screen. just
make it consistent"). Outbound keeps the right-bubble chat anatomy. */
.inbox-msg.in .inbox-msg-body {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
column-gap: 10px;
row-gap: 3px;
}
.inbox-msg.in .inbox-msg-body > * {
grid-column: 2;
}
.inbox-msg.in .inbox-msg-head {
display: contents;
}
.inbox-msg.in .inbox-msg-avatar {
grid-column: 1;
grid-row: 1;
align-self: start;
width: 30px;
height: 30px;
}
/* The whole headline (name + meta) rides the content column, aligned with the bubble
below; the avatar stays in the rail. (Was the bare sender at col2 — the meta line
joined it 2026-07-23.) */
.inbox-msg.in .inbox-msg-headline {
grid-column: 2;
grid-row: 1;
align-self: center;
}
.inbox-msg.in .inbox-msg-sender {
font-size: 0.8rem;
color: var(--text-primary);
}
.inbox-msg > .inbox-msg-body > .inbox-bubble {
align-self: auto;
max-width: 100%;
width: fit-content;
}
/* Card header — avatar + a headline (sender name · meta) at the TOP, on the sender's
side. Outbound puts the avatar on the RIGHT of the headline (top-right corner). */
.inbox-msg-head {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin: 0 0.15rem 0.28rem;
}
.inbox-msg.out .inbox-msg-head {
flex-direction: row-reverse;
}
/* Name + meta on ONE line (Hakim 2026-07-23: "tick and time next to the sender name").
Wraps only when the row is genuinely too narrow. */
.inbox-msg-headline {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 0.1rem 0.5rem;
min-width: 0;
}
.inbox-msg-sender {
font-size: 0.74rem;
font-weight: 600;
color: var(--text-soft);
}
/* Meta cluster, moved up from the old turn-end footer: channel logo · time · route
disclosure. Delivery state is per-bubble below; a turn header may own several
bubbles and therefore cannot truthfully own one delivery result. */
.inbox-msg-meta {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.7rem;
color: var(--text-muted);
}
.inbox-msg-meta .workspace-platform-logo-mini { flex: 0 0 auto; }
.inbox-msg-meta .inbox-bubble-time { white-space: nowrap; }
.inbox-msg-avatar {
flex: 0 0 auto;
width: 26px;
height: 26px;
border-radius: 50%;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border-subtle);
}
.inbox-msg-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* (No `.inbox-msg-avatar-fallback` any more — BOTH sides of the thread render the
canonical ContactAvatar, which brings its own seeded disc. 2026-07-26.) */
/* ContactAvatar silhouette placeholder filling the 26px message-bubble avatar. */
.inbox-msg-avatar-ph {
width: 100%;
height: 100%;
}
/* Lives OUTSIDE the bubble (a sibling under .inbox-msg-body) — bubbles carry
content only; metadata sits beneath, auto-aligned per side by the body flex. */
.inbox-bubble-foot {
margin-top: 0.2rem;
padding: 0 0.25rem;
font-size: 0.7rem;
color: var(--text-muted);
display: flex;
width: 100%;
align-items: center;
gap: 0.5rem;
}
.inbox-bubble-meta {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.inbox-bubble-meta .workspace-platform-logo-mini {
flex: 0 0 auto;
}
/* Per-message delivery state -------------------------------------------------
A Slack-style turn head can group several consecutive messages. Delivery is
message-specific, so the receipt lives INSIDE the exact outbound bubble it
describes. Failed sends spell out the state as well as showing the icon; that
removes any "which message does the exclamation belong to?" ambiguity. */
.inbox-bubble-delivery {
display: flex;
justify-content: flex-end;
align-items: center;
width: 100%;
margin-top: 0.35rem;
font-size: 0.68rem;
line-height: 1;
}
.inbox-bubble-delivery .inbox-foot-tick {
gap: 0.25rem;
}
.inbox-bubble-delivery .inbox-foot-tick--fail {
padding: 0.2rem 0.4rem;
border-radius: 999px;
background: var(--bg-elevated);
color: var(--state-error);
font-weight: 600;
}
.inbox-bubble-delivery .inbox-foot-tick--web-chat {
color: var(--text-muted);
font-weight: 500;
}
.inbox-foot-tick-label {
white-space: nowrap;
}
.ph-message-delivery {
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 0.25rem;
font-size: 0.68rem;
}
.ph-message-delivery .inbox-foot-tick {
gap: 0.25rem;
}
/* Unconfirmed group-chat messages -------------------------------------------
A message between Users is painted the instant Enter is pressed and confirmed
a moment later (lib/inbox/optimistic-uos.ts). While it is in flight it reads
slightly back, so the difference between "on screen" and "everyone has it" is
visible without being loud. A send that fails keeps its bubble and offers the
way out, because text that silently reappears in the composer is exactly what
made this feel unreliable. */
.inbox-bubble.is-sending {
opacity: 0.62;
}
.inbox-bubble.is-unsent {
/* color-mix keeps this honest in both themes — no hardcoded red. */
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--state-error) 45%, transparent);
}
.inbox-bubble.out.is-widget-pending {
border: 1px dashed color-mix(in srgb, var(--accent) 48%, var(--border-subtle));
background: color-mix(in srgb, var(--accent) 8%, var(--bg-elevated));
box-shadow: none;
}
.inbox-widget-pending {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 0.45rem 0.65rem;
margin-top: 0.38rem;
max-width: 100%;
color: var(--text-soft);
font-size: 0.75rem;
}
.inbox-widget-pending-status,
.inbox-widget-pending-actions {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.inbox-widget-pending-status {
font-weight: 600;
color: var(--text-primary);
}
.inbox-widget-pending-actions button,
.inbox-widget-control-actions button {
border: 1px solid var(--border-subtle);
border-radius: 8px;
background: var(--bg-elevated);
color: var(--text-primary);
padding: 0.32rem 0.55rem;
font: inherit;
font-weight: 600;
cursor: pointer;
}
.inbox-widget-pending-actions button:hover:not(:disabled),
.inbox-widget-control-actions button:hover:not(:disabled) {
border-color: color-mix(in srgb, var(--accent) 55%, var(--border-strong));
color: var(--accent);
}
.inbox-widget-pending-actions button:disabled,
.inbox-widget-control-actions button:disabled {
cursor: wait;
opacity: 0.62;
}
.inbox-widget-pending-error {
flex-basis: 100%;
color: var(--state-error);
text-align: right;
}
.inbox-bubble-unsent {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: color-mix(in srgb, var(--state-error) 78%, var(--text-primary));
font-weight: 500;
}
.inbox-bubble-retry {
background: none;
border: 0;
padding: 0;
font: inherit;
color: var(--accent);
font-weight: 600;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
/* Comfortable to hit on a phone without changing the footer's height. */
min-height: 24px;
}
.inbox-bubble-retry:hover,
.inbox-bubble-retry:focus-visible {
color: color-mix(in srgb, var(--accent) 80%, var(--text-primary));
}
/* Guest sends (TestFlight #39) add two things to that footer: WHY it failed, in
plain words, and a way to drop the message instead of resending it. Discard is
deliberately the quiet one — Retry is what we expect the operator to want. */
.inbox-bubble-unsent-reason {
display: block;
color: var(--text-muted);
max-width: 34rem;
}
.inbox-bubble-discard {
background: none;
border: 0;
padding: 0;
font: inherit;
color: var(--text-muted);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
min-height: 24px;
}
.inbox-bubble-discard:hover,
.inbox-bubble-discard:focus-visible {
color: var(--text-primary);
}
.inbox-bubble-reactions {
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
/* The only footer left is the pending "Sending… / Not sent + Retry" line (confirmed
meta moved up to the head 2026-07-23). On an outbound self-send it hugs the right,
the sender's corner. */
.inbox-msg.out .inbox-bubble-meta {
margin-left: auto;
}
/* Reactions now sit on the LEFT, directly under the message (Hakim 2026-07-23) — no
longer shoved to the opposite corner. The inbound left-align (justify-self:start in
the grid) lives with .inbox-bubble-reactions.in below. */
.inbox-compose {
flex: 0 0 auto;
margin-top: auto;
position: sticky;
bottom: 0;
/* 0.7rem top (was 0.25rem): the sentiment row sits EQUALLY between the top
border and the resizer pill — ~11px air each side, like the Figma composer
toolbar band (Hakim, 2026-06-11: "isn't sitting equally in the middle").
Paired with the -18px resizer pull below so the pill/editor don't move. */
padding: 0.7rem 0.85rem 0.85rem;
border-top: 1px solid var(--border-subtle);
background: color-mix(in srgb, var(--bg-deep) 55%, var(--bg-elevated));
}
.inbox-channel {
display: flex;
flex-direction: column;
gap: 0.25rem;
font-size: 0.82rem;
margin-bottom: 0.45rem;
color: var(--text-muted);
}
.inbox-channel .selectmenu-trigger,
.inbox-detail .selectmenu-trigger {
padding: 0.35rem 0.45rem;
border-radius: var(--radius-sm);
border: 1px solid var(--border-strong);
background: var(--bg-input);
color: var(--text-primary);
font: inherit;
}
.inbox-textarea {
width: 100%;
resize: vertical;
min-height: 4rem;
padding: 0.5rem 0.55rem;
border-radius: var(--radius-sm);
border: 1px solid var(--border-strong);
background: var(--bg-input);
color: var(--text-primary);
font: inherit;
}
/* Long-message mode hint — appears inside the enter-sends composer the moment a
draft goes multi-line (Enter now adds lines; send = button / ⌘Enter). Muted and
tiny so it informs without shouting; theme tokens keep light/dark parity. */
.inbox-editor-enter-hint {
padding: 0.15rem 0.1rem 0;
font-size: 0.68rem;
color: var(--text-tertiary, var(--text-muted));
user-select: none;
}
.inbox-rich-editor {
width: 100%;
min-height: var(--inbox-editor-min-h, 2.8rem);
/* Compact by default so a long draft can't swallow the thread; the compose
bar's expand toggle relaxes this (.is-expanded), then it scrolls. */
max-height: min(9.5rem, 30vh);
overflow-y: auto;
padding: 0.5rem 0.55rem;
border-radius: var(--radius-sm);
border: 1px solid var(--border-strong);
background: var(--bg-input);
color: var(--text-primary);
font: inherit;
cursor: text;
display: flex;
flex-direction: column;
}
.inbox-rich-editor:focus-within {
border-color: color-mix(in srgb, var(--accent, #6366f1) 70%, var(--border-strong));
}
/* Email mode — a roomy, document-style editor (not a chat sliver). Same theme
tokens (light/dark parity), just generous height, padding + line-height so
composing an email reads like writing a letter rather than a text. */
.inbox-rich-editor.is-email {
/* COMPACT until you actually write — a permanent 12rem empty editor left the
email itself ~100px of reading room (Hakim 2026-07-02, the Perk thread).
Focus opens the roomy document-style writing area; a blurred draft keeps
its height naturally (content sizes it). */
min-height: 3.4rem;
max-height: 60vh;
padding: 0.85rem 0.95rem;
line-height: 1.55;
transition: min-height 160ms ease;
}
.inbox-rich-editor.is-email:focus-within {
min-height: 12rem;
}
.inbox-rich-editor.is-email:focus-within .ProseMirror {
min-height: 11rem;
}
/* Expanded — the compose bar's expand toggle opens a taller writing area (chat +
email both), still capped so it never fully hides the conversation. */
.inbox-rich-editor.is-expanded {
max-height: min(22rem, 55vh);
}
.inbox-rich-editor.is-email.is-expanded {
max-height: 78vh;
}
.inbox-rich-editor .ProseMirror {
flex: 1 1 auto;
outline: none;
white-space: pre-wrap;
word-break: break-word;
min-height: calc(var(--inbox-editor-min-h, 2.8rem) - 1rem);
}
.inbox-editor-content-shell {
position: relative;
display: flex;
flex: 1 1 auto;
min-width: 0;
}
.inbox-editor-content-shell > div:first-child {
flex: 1 1 auto;
min-width: 0;
}
.inbox-rich-editor.has-predictive-reply {
min-height: 5.15rem;
}
.inbox-rich-editor.has-predictive-reply .ProseMirror p.is-editor-empty:first-child::before {
content: "";
}
.inbox-predictive-ghost {
position: absolute;
inset: 0;
z-index: 1;
min-width: 0;
color: color-mix(in srgb, var(--text-primary) 42%, transparent);
}
.inbox-predictive-ghost.is-desktop {
pointer-events: none;
padding: 0 5.8rem 1.45rem 0;
}
.inbox-predictive-ghost.is-desktop .inbox-predictive-ghost-text {
-webkit-line-clamp: 2;
line-clamp: 2;
}
.inbox-predictive-ghost-text {
display: -webkit-box;
overflow: hidden;
white-space: pre-wrap;
word-break: break-word;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
}
.inbox-predictive-ghost-use {
pointer-events: auto;
position: absolute;
right: 0;
bottom: 0;
display: inline-flex;
align-items: center;
gap: 0.32rem;
border: 0;
border-radius: 999px;
padding: 0.2rem 0.42rem;
background: color-mix(in srgb, var(--accent) 9%, var(--bg-elevated));
color: var(--text-muted);
font: inherit;
font-size: 0.68rem;
cursor: pointer;
}
.inbox-predictive-ghost-use:hover {
background: color-mix(in srgb, var(--accent) 15%, var(--bg-elevated));
color: var(--text-primary);
}
.inbox-predictive-ghost-use kbd {
min-width: 1.75rem;
border: 1px solid var(--border-strong);
border-radius: 0.3rem;
padding: 0.04rem 0.24rem;
background: var(--bg-input);
color: var(--text-soft);
font-family: inherit;
font-size: inherit;
text-align: center;
box-shadow: 0 1px 0 var(--border-subtle);
}
.inbox-rich-editor.has-agent-intervention {
min-height: 7rem;
border-color: color-mix(in srgb, var(--accent) 46%, var(--border-subtle));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
}
.inbox-rich-editor.has-agent-active-draft {
border-color: color-mix(in srgb, var(--accent) 38%, var(--border-subtle));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 6%, transparent);
}
.inbox-agent-intervention-ghost.is-desktop {
padding: 0 0 2.15rem;
pointer-events: none;
}
.inbox-agent-working-ghost.is-desktop {
padding-top: 0.15rem;
}
.inbox-agent-intervention-ghost.is-compact {
position: sticky;
inset: auto;
bottom: -0.5rem;
z-index: 2;
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 0.5rem;
min-height: 0;
margin: 0.4rem -0.55rem -0.5rem;
padding: 0.4rem 0.55rem 0.5rem;
border-top: 1px solid var(--border-subtle);
background: color-mix(in srgb, var(--bg-input) 94%, var(--accent) 6%);
pointer-events: auto;
}
.inbox-agent-intervention-ghost.is-compact .inbox-agent-working-copy {
flex: 1 1 auto;
}
.inbox-agent-intervention-ghost.is-compact .inbox-agent-intervention-actions {
position: static;
flex: 0 0 auto;
width: auto;
}
.inbox-agent-working-copy {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-width: 0;
color: var(--text-soft);
font-size: 0.78rem;
font-weight: 680;
}
.inbox-agent-working-copy > span:not(.inbox-agent-working-dots) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.inbox-agent-working-dots {
display: inline-flex;
align-items: center;
gap: 2px;
}
.inbox-agent-working-dots i {
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--accent);
animation: inbox-agent-working-dot 900ms ease-in-out infinite;
}
.inbox-agent-working-dots i:nth-child(2) { animation-delay: 120ms; }
.inbox-agent-working-dots i:nth-child(3) { animation-delay: 240ms; }
@keyframes inbox-agent-working-dot {
0%, 65%, 100% { transform: translateY(0); opacity: 0.35; }
32% { transform: translateY(-3px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.inbox-agent-working-dots i {
animation: none !important;
}
}
.inbox-agent-intervention-actions {
pointer-events: auto;
position: absolute;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
gap: 0.35rem;
min-width: 0;
}
.inbox-agent-intervention-state {
display: inline-flex;
align-items: center;
gap: 0.35rem;
min-width: 0;
margin-right: auto;
color: var(--text-muted);
font-size: 0.68rem;
}
.inbox-agent-intervention-state > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.inbox-agent-intervention-state strong { color: var(--accent); font-weight: 750; }
.inbox-agent-intervention-actions button,
.inbox-agent-handoff-notice button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.3rem;
min-height: 26px;
border: 1px solid var(--border-subtle);
border-radius: 999px;
padding: 0.18rem 0.55rem;
background: var(--bg-elevated);
color: var(--text-soft);
font: inherit;
font-size: 0.68rem;
font-weight: 680;
cursor: pointer;
white-space: nowrap;
}
.inbox-agent-intervention-actions button.is-send {
border-color: color-mix(in srgb, var(--accent) 44%, var(--border-subtle));
background: color-mix(in srgb, var(--accent) 15%, var(--bg-elevated));
color: var(--text-primary);
}
.inbox-agent-intervention-actions button:hover:not(:disabled),
.inbox-agent-handoff-notice button:hover:not(:disabled) {
border-color: var(--accent);
color: var(--text-primary);
}
.inbox-agent-intervention-actions button:disabled,
.inbox-agent-handoff-notice button:disabled { opacity: 0.55; cursor: default; }
.inbox-agent-typing-caret {
display: inline-block;
width: 1px;
height: 1em;
margin-left: 2px;
vertical-align: -0.12em;
background: var(--accent);
animation: inbox-agent-caret 720ms steps(1, end) infinite;
}
@keyframes inbox-agent-caret { 50% { opacity: 0; } }
.inbox-agent-handoff-notice {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
width: 100%;
padding-top: 0.42rem;
border-top: 1px solid var(--border-subtle);
color: var(--text-muted);
font-size: 0.7rem;
}
.inbox-agent-handoff-notice > span { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; }
.inbox-rich-editor.has-agent-review {
min-height: 0;
max-height: min(28rem, 62vh);
overflow-y: auto;
padding: 0;
border-color: color-mix(in srgb, var(--accent) 48%, var(--border-subtle));
background: var(--bg-elevated);
cursor: default;
}
.inbox-rich-editor.is-email.has-agent-review:focus-within {
min-height: 0;
}
.inbox-rich-editor.has-agent-review > .inbox-editor-content-shell {
min-height: var(--inbox-editor-min-h, 2.8rem);
padding: 0.5rem 0.55rem;
background: var(--bg-input);
}
.inbox-agent-review-panel {
display: grid;
width: 100%;
min-width: 0;
gap: 0;
color: var(--text-primary);
background: var(--bg-elevated);
}
.inbox-agent-review-panel > header,
.inbox-agent-review-panel > footer {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 0.65rem;
}
.inbox-agent-review-panel > header {
border-bottom: 1px solid var(--border-subtle);
background: color-mix(in srgb, var(--accent) 7%, var(--bg-elevated));
}
.inbox-agent-review-panel > header > .inbox-agent-intervention-actions {
position: static;
flex: 0 1 auto;
width: auto;
}
.inbox-agent-review-panel > footer {
justify-content: flex-end;
border-top: 1px solid var(--border-subtle);
}
.inbox-agent-review-heading {
display: flex;
flex: 1 1 auto;
min-width: 0;
align-items: center;
gap: 0.45rem;
color: var(--accent);
}
.inbox-agent-review-heading > span {
display: grid;
min-width: 0;
gap: 0.08rem;
}
.inbox-agent-review-heading strong {
overflow: hidden;
color: var(--text-primary);
font-size: 0.76rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.inbox-agent-review-heading small,
.inbox-agent-review-panel > footer > small {
overflow: hidden;
color: var(--text-muted);
font-size: 0.66rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.inbox-agent-review-preview {
overflow: hidden;
margin: 0;
padding: 0.65rem;
color: var(--text-soft);
font-size: 0.76rem;
line-height: 1.45;
}
.inbox-agent-review-preview > strong {
display: block;
margin-bottom: 0.25rem;
color: var(--text-muted);
font-size: 0.66rem;
font-weight: 750;
}
.inbox-agent-review-preview > p {
display: -webkit-box;
overflow: hidden;
margin: 0;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
white-space: pre-wrap;
}
.inbox-agent-review-editor {
display: grid;
gap: 0.35rem;
padding: 0.65rem;
}
.inbox-agent-review-editor > span,
.inbox-agent-review-reason strong {
color: var(--text-soft);
font-size: 0.68rem;
font-weight: 750;
}
.inbox-agent-review-editor > p {
margin: 0;
padding: 0.65rem;
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
background: var(--bg-input);
color: var(--text-primary);
font: inherit;
font-size: 0.78rem;
line-height: 1.5;
white-space: pre-wrap;
}
.inbox-agent-review-reason {
margin: 0;
padding: 0 0.65rem 0.65rem;
color: var(--text-muted);
font-size: 0.68rem;
line-height: 1.45;
}
.inbox-agent-review-panel button {
display: inline-flex;
min-height: 30px;
align-items: center;
justify-content: center;
gap: 0.3rem;
border: 1px solid var(--border-subtle);
border-radius: 999px;
padding: 0.26rem 0.65rem;
background: var(--bg-elevated);
color: var(--text-soft);
font: inherit;
font-size: 0.7rem;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
}
.inbox-agent-review-panel button:hover:not(:disabled) {
border-color: var(--accent);
color: var(--text-primary);
}
.inbox-agent-review-panel button.is-review,
.inbox-agent-review-panel button.is-approve {
border-color: var(--accent);
background: var(--accent);
color: var(--accent-contrast, #fff);
}
.inbox-agent-review-panel button.is-reject { color: var(--text-muted); }
.inbox-agent-review-panel button:disabled { opacity: 0.55; cursor: default; }
.agent-review-translation {
min-width: 0;
margin: 0 0.65rem 0.65rem;
padding: 0.55rem 0.6rem;
border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border-subtle));
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--accent) 6%, var(--surface-muted));
color: var(--text-soft);
font-size: 0.7rem;
line-height: 1.45;
}
.agent-review-translation.is-loading,
.agent-review-translation.is-unavailable {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 0.45rem;
}
.agent-review-translation.is-loading { color: var(--text-muted); }
.agent-review-translation.is-unavailable {
border-color: color-mix(in srgb, var(--state-warning, #d97706) 42%, var(--border-subtle));
background: color-mix(in srgb, var(--state-warning, #d97706) 8%, var(--surface-muted));
color: var(--state-warning, #b45309);
}
.agent-review-translation.is-unavailable > span { display: grid; gap: 0.08rem; }
.agent-review-translation.is-unavailable strong { color: var(--text-primary); }
.agent-review-translation.is-unavailable small { color: var(--text-muted); font-size: 0.64rem; }
.agent-review-translation.is-unavailable button {
display: inline-flex;
min-height: 28px;
align-items: center;
justify-content: center;
gap: 0.25rem;
border: 1px solid var(--border-subtle);
border-radius: 999px;
padding: 0.2rem 0.5rem;
background: var(--bg-elevated);
color: var(--text-soft);
font: inherit;
font-weight: 700;
cursor: pointer;
}
.agent-review-translation.is-translated { display: grid; gap: 0.35rem; }
.agent-review-translation.is-translated > header {
display: flex;
min-width: 0;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.agent-review-translation.is-translated > header > span {
display: inline-flex;
align-items: center;
gap: 0.3rem;
color: var(--accent);
}
.agent-review-translation.is-translated > header strong { color: var(--text-primary); }
.agent-review-translation.is-translated > header small {
overflow: hidden;
color: var(--text-muted);
font-size: 0.62rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.agent-review-translation.is-translated > p {
margin: 0;
color: var(--text-primary);
white-space: pre-wrap;
}
.agent-review-translation.is-compact.is-translated > p {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
line-clamp: 4;
}
.inbox-agent-intervention-error {
width: 100%;
margin: 0.3rem 0 0;
color: var(--state-error);
font-size: 0.68rem;
line-height: 1.35;
}
@media (prefers-reduced-motion: reduce) {
.inbox-agent-typing-caret { animation: none; }
}
.inbox-rich-editor .ProseMirror > p { margin: 0 0 0.35rem; }
.inbox-rich-editor .ProseMirror > p:last-child { margin-bottom: 0; }
.inbox-rich-editor .ProseMirror ul,
.inbox-rich-editor .ProseMirror ol { margin: 0.2rem 0; padding-left: 1.2rem; }
.inbox-rich-editor .ProseMirror blockquote {
margin: 0.2rem 0;
padding-left: 0.6rem;
border-left: 2px solid var(--border-strong);
color: var(--text-soft);
}
.inbox-rich-editor .ProseMirror code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.85em;
background: var(--bg-elevated);
padding: 0.05rem 0.25rem;
border-radius: 4px;
}
/* Block-level rich items — only reachable on the email composer (see `emailOnly`
in InboxComposerEditor). Tokens resolve per-theme, so this is light/dark-safe. */
.inbox-rich-editor .ProseMirror h1,
.inbox-rich-editor .ProseMirror h2,
.inbox-rich-editor .ProseMirror h3 {
font-weight: 700;
line-height: 1.25;
margin: 0.5rem 0 0.3rem;
color: var(--text-primary);
}
.inbox-rich-editor .ProseMirror h1 { font-size: 1.3rem; }
.inbox-rich-editor .ProseMirror h2 { font-size: 1.1rem; }
.inbox-rich-editor .ProseMirror h3 { font-size: 0.95rem; }
.inbox-rich-editor .ProseMirror h1:first-child,
.inbox-rich-editor .ProseMirror h2:first-child,
.inbox-rich-editor .ProseMirror h3:first-child { margin-top: 0; }
.inbox-rich-editor .ProseMirror ul[data-type="taskList"] {
list-style: none;
margin: 0.25rem 0;
padding-left: 0.1rem;
}
.inbox-rich-editor .ProseMirror ul[data-type="taskList"] li {
display: flex;
align-items: flex-start;
gap: 0.4rem;
margin: 0.15rem 0;
}
.inbox-rich-editor .ProseMirror ul[data-type="taskList"] li > label {
display: inline-flex;
align-items: center;
margin-top: 0.12rem;
user-select: none;
}
.inbox-rich-editor .ProseMirror ul[data-type="taskList"] li > label input[type="checkbox"] {
width: 0.95rem;
height: 0.95rem;
accent-color: #4f46e5;
cursor: pointer;
}
.inbox-rich-editor .ProseMirror ul[data-type="taskList"] li > div { flex: 1 1 auto; min-width: 0; }
.inbox-rich-editor .ProseMirror ul[data-type="taskList"] li[data-checked="true"] > div {
color: var(--text-muted);
text-decoration: line-through;
}
.inbox-rich-editor .ProseMirror pre {
margin: 0.3rem 0;
background: var(--bg-input);
border: 1px solid var(--border-subtle);
border-radius: 6px;
padding: 0.45rem 0.55rem;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.85em;
line-height: 1.45;
overflow-x: auto;
}
.inbox-rich-editor .ProseMirror pre code {
background: none;
padding: 0;
font-size: inherit;
}
.inbox-rich-editor .ProseMirror hr {
border: 0;
border-top: 1px solid var(--border-strong);
margin: 0.6rem 0;
}
.inbox-rich-editor .ProseMirror hr.ProseMirror-selectednode { border-top-color: #4f46e5; }
/* TipTap placeholder (the old :empty::before can't work on a wrapper). */
.inbox-rich-editor .ProseMirror p.is-editor-empty:first-child::before {
content: attr(data-placeholder);
color: var(--text-muted);
float: left;
height: 0;
pointer-events: none;
}
/* Slash-menu rows: label left, channel hint right. */
.message-composer-slash-item .inbox-slash-item-hint {
margin-left: auto;
padding-left: 1rem;
color: var(--text-muted);
font-size: 0.7rem;
}
.inbox-compose-resizer {
/* display:flex (NOT the button-default inline-block): the old inline-block
sat in a phantom ~19px line box that swallowed margin tuning — block-level
flex makes the geometry deterministic. height 12px = the grab target; the
visible 3px pill centers inside it. */
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
width: 100%;
height: 12px;
border: 0;
border-radius: 999px;
background: transparent;
cursor: ns-resize;
position: relative;
}
.inbox-compose-resizer.top {
/* 7px + the pill centered in 12px ≈ 11.5px visual air below the sentiment
row — matching the ~11px above it (compose padding-top), so the row sits
EQUALLY between the top border and the pill (Figma composer band). */
margin: 7px 0 0;
}
.inbox-compose-resizer::before {
content: "";
display: block;
width: 56px;
height: 3px;
border-radius: 999px;
background: var(--border-strong);
}
.inbox-compose-actions {
margin-top: 0.45rem;
display: flex;
align-items: center;
gap: 0.5rem;
justify-content: space-between;
flex-wrap: wrap;
}
.inbox-compose-actions-right {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
}
.inbox-signature-panel {
margin-top: 0.45rem;
padding: 0.55rem;
border: 1px solid var(--border-subtle);
border-radius: 10px;
background: color-mix(in srgb, var(--bg-input) 40%, transparent);
display: grid;
gap: 0.5rem;
min-width: 0;
}
.inbox-signature-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
}
.inbox-signature-mode {
display: grid;
gap: 0.2rem;
font-size: 0.72rem;
color: var(--text-muted);
}
.inbox-signature-mode .selectmenu-trigger {
font-size: 0.8rem;
}
.inbox-signature-toolbar {
display: flex;
gap: 0.25rem;
}
.inbox-signature-toolbar button {
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border-subtle);
border-radius: 6px;
background: var(--bg-input);
color: var(--text-primary);
cursor: pointer;
}
.inbox-signature-toolbar button:hover {
border-color: var(--border-strong);
}
.inbox-signature-toolbar .ui-icon {
width: 15px;
height: 15px;
}
.inbox-signature-panel textarea,
.inbox-signature-textarea {
width: 100%;
resize: vertical;
min-height: 84px;
font-size: 0.82rem;
}
.inbox-signature-fields {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.3rem;
}
.inbox-signature-fields-label {
font-size: 0.72rem;
color: var(--text-muted);
}
.inbox-signature-chip {
font-size: 0.72rem;
padding: 2px 8px;
border-radius: 999px;
border: 1px solid var(--border-subtle);
background: color-mix(in srgb, var(--accent) 8%, transparent);
color: var(--accent);
cursor: pointer;
}
.inbox-signature-chip:hover {
border-color: var(--accent);
}
.inbox-signature-preview {
display: grid;
gap: 0.25rem;
}
.inbox-signature-preview-label {
font-size: 0.72rem;
color: var(--text-muted);
}
.inbox-signature-preview-empty {
margin: 0;
font-size: 0.8rem;
color: var(--text-muted);
font-style: italic;
}
.inbox-signature-actions {
display: flex;
justify-content: flex-end;
gap: 0.35rem;
}
/* Email message rendering — faithful (Gmail-like) HTML in a sandboxed iframe, or a
whitespace-preserving plain-text fallback for messages stored before HTML capture. */
.inbox-email-frame {
width: 100%;
max-width: 100%;
border: 1px solid var(--border-subtle);
border-radius: 10px;
background: #ffffff;
display: block;
overflow: hidden;
}
.inbox-email-plain {
margin: 0;
white-space: pre-wrap;
overflow-wrap: anywhere;
word-break: break-word;
/* Give a text-only email (no captured body_html) the same card shell as the HTML
frame so it reads as an email rather than a naked wall of text/links. */
border: 1px solid var(--border-subtle);
border-radius: 10px;
padding: 0.85rem 1rem;
font-size: 0.875rem;
line-height: 1.55;
}
.inbox-email-plain a {
color: var(--accent);
text-decoration: underline;
}
/* Airbnb / OTA bodies that arrive as raw HTML (e.g. "Guest alteration accepted"
tables). Rendered structurally via StructuredHtmlBody; styled here so they
inherit the app theme in BOTH light and dark — the sender's inline colours are
stripped by the sanitizer, so these rules are the whole look. */
.inbox-html-body {
margin: 0;
font-size: 0.875rem;
line-height: 1.55;
overflow-wrap: anywhere;
word-break: break-word;
}
.inbox-html-body table {
border-collapse: collapse;
width: 100%;
max-width: 100%;
margin: 0.25rem 0;
font-size: 0.8125rem;
}
.inbox-html-body th,
.inbox-html-body td {
border: 1px solid var(--border-subtle);
padding: 6px 10px;
text-align: left;
vertical-align: top;
}
.inbox-html-body th {
font-weight: 600;
background: var(--surface-muted);
color: var(--text-soft);
}
/* Airbnb tags the comparison columns with .text-center — honour it. */
.inbox-html-body .text-center {
text-align: center;
}
.inbox-html-body small {
color: var(--text-muted);
}
.inbox-html-body a {
color: var(--accent);
text-decoration: underline;
}
.inbox-html-body p {
margin: 0 0 0.4rem;
}
.inbox-html-body p:last-child {
margin-bottom: 0;
}
/* UOS internal messages render their saved composer HTML (body_html) so @-mention /
task-reference chips + inline formatting survive the send (§3). Inherits .inbox-html-body
for paragraphs / links; this tightens lists, blockquote and inline code so they sit calmly
inside the internal bubble. Tokens only ⇒ light/dark by construction; chips are styled by
the shared .mention-chip rules (per-kind colour). */
.inbox-uos-body {
line-height: 1.5;
}
.inbox-uos-body ul,
.inbox-uos-body ol {
margin: 0.25rem 0;
padding-left: 1.25rem;
}
.inbox-uos-body li {
margin: 0.05rem 0;
}
.inbox-uos-body blockquote {
margin: 0.25rem 0;
padding-left: 0.6rem;
border-left: 2px solid var(--border-strong);
color: var(--text-muted);
}
.inbox-uos-body code {
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
font-size: 0.9em;
background: color-mix(in srgb, var(--text-primary) 8%, transparent);
padding: 1px 4px;
border-radius: 4px;
}
.inbox-uos-body pre {
margin: 0.25rem 0;
padding: 0.5rem 0.6rem;
background: var(--bg-input);
border: 1px solid var(--border-subtle);
border-radius: 6px;
overflow-x: auto;
}
.inbox-uos-body pre code {
background: none;
padding: 0;
}
/* Document blocks — a UOS message renders like a ClickUp doc: headings, dividers,
checklists and blank lines survive the send exactly as composed ("i should be
able to write a whole formatted article", Hakim 2026-07-02). Mirrors the
.inbox-rich-editor block styles so composed ≈ saved, tokens only. */
.inbox-uos-body h1,
.inbox-uos-body h2,
.inbox-uos-body h3 {
font-weight: 700;
line-height: 1.25;
margin: 0.5rem 0 0.3rem;
color: inherit;
}
.inbox-uos-body h1 { font-size: 1.3rem; }
.inbox-uos-body h2 { font-size: 1.1rem; }
.inbox-uos-body h3 { font-size: 0.95rem; }
.inbox-uos-body h1:first-child,
.inbox-uos-body h2:first-child,
.inbox-uos-body h3:first-child { margin-top: 0; }
.inbox-uos-body hr {
border: none;
border-top: 1px solid var(--border-strong);
margin: 0.6rem 0;
}
/* An intentionally blank line (empty ) keeps its height instead of collapsing —
part of "render exactly like how it was written". */
.inbox-uos-body p:empty::before {
content: "\00a0";
}
.inbox-uos-body ul[data-type="taskList"] {
list-style: none;
padding-left: 0.1rem;
}
.inbox-uos-body ul[data-type="taskList"] li {
display: flex;
align-items: flex-start;
gap: 0.4rem;
margin: 0.15rem 0;
}
.inbox-uos-body ul[data-type="taskList"] li > label {
display: inline-flex;
align-items: center;
margin-top: 0.12rem;
}
.inbox-uos-body ul[data-type="taskList"] li > label input[type="checkbox"] {
width: 0.95rem;
height: 0.95rem;
accent-color: #4f46e5;
/* Render-only — the sanitizer disables it; make sure it doesn't LOOK dimmed-broken. */
opacity: 1;
pointer-events: none;
}
.inbox-uos-body ul[data-type="taskList"] li > div { flex: 1 1 auto; min-width: 0; }
.inbox-uos-body ul[data-type="taskList"] li[data-checked="true"] > div {
color: var(--text-muted);
text-decoration: line-through;
}
/* Wide tables scroll horizontally on small screens instead of overflowing pane 3. */
@media (max-width: 768px) {
.inbox-html-body {
overflow-x: auto;
}
}
/* Dropdown variant — replaces the inline chip row to keep the
composer toolbar compact. Native