/* ---------------------------------------------------------------------------
NarneTech WaaS design system.
Bootstrap 5 does the layout, grid, components and utilities (CLAUDE.md §2).
This file only does what Bootstrap cannot express on its own: the brand
token set, the type scale, the focus treatment, and the application shell
(fixed sidebar + top bar) that no Bootstrap component covers.
Everything is a custom property so a later phase can reskin without hunting
through selectors, and so Bootstrap's own --bs-* variables can be pointed at
the same values rather than duplicated.
--------------------------------------------------------------------------- */
:root {
/* Brand. WhatsApp-adjacent green, darkened for contrast: --nt-brand on
white is ~5.9:1, so brand-coloured text and outline buttons stay AA. The
bright WhatsApp green is kept for accents only, never for text. */
--nt-brand-050: #eaf7f2;
--nt-brand-100: #cdeade;
--nt-brand-200: #97d7bd;
--nt-brand-400: #25d366;
--nt-brand: #0b7a5c;
--nt-brand-600: #096a50;
--nt-brand-700: #075440;
--nt-brand-contrast: #ffffff;
/* Surfaces */
--nt-canvas: #f4f6f7;
--nt-surface: #ffffff;
--nt-surface-2: #f8fafa;
--nt-sidebar: #0d2b25;
--nt-sidebar-2: #123a31;
--nt-sidebar-text: #cfe3dc;
--nt-sidebar-text-strong: #ffffff;
/* Text — --nt-text on --nt-surface is 15.9:1, --nt-text-muted is 5.4:1.
--nt-text-faint is measured against the DARKEST surface it is ever set on, not white. It
colours .nt-bubble-kind, which sits on an outbound bubble (--nt-brand-050, #eaf7f2) and on a
failed one (--nt-danger-tint, #fbeceb). The old #66746f came to 4.45:1 and 4.26:1 there and
missed AA on both. #616f6a is 4.78:1, 4.59:1, and 5.26:1 on white. */
--nt-text: #14201d;
--nt-text-muted: #5c6b66;
--nt-text-faint: #616f6a;
/* Lines */
--nt-border: #dde5e2;
--nt-border-strong: #c3d0cb;
/* Status. Each has a tint for backgrounds and a darker ink for text on it. */
--nt-success: #0b7a5c;
--nt-success-tint: #e7f5ef;
--nt-warning: #8a5300;
--nt-warning-tint: #fdf3e2;
--nt-danger: #a3231f;
--nt-danger-tint: #fbeceb;
--nt-info: #1d5c8f;
--nt-info-tint: #e9f2f9;
/* Spacing scale (4px base) */
--nt-space-1: 0.25rem;
--nt-space-2: 0.5rem;
--nt-space-3: 0.75rem;
--nt-space-4: 1rem;
--nt-space-5: 1.5rem;
--nt-space-6: 2rem;
--nt-space-7: 3rem;
/* Radius */
--nt-radius-sm: 6px;
--nt-radius: 10px;
--nt-radius-lg: 16px;
--nt-radius-pill: 999px;
/* Shadows — low, wide and cool, so cards lift off the canvas without glare. */
--nt-shadow-sm: 0 1px 2px rgba(16, 34, 29, 0.06), 0 1px 3px rgba(16, 34, 29, 0.04);
--nt-shadow: 0 2px 4px rgba(16, 34, 29, 0.05), 0 6px 16px rgba(16, 34, 29, 0.07);
--nt-shadow-lg: 0 8px 24px rgba(16, 34, 29, 0.12);
/* Type scale — 1.2 minor third off a 1rem base. */
--nt-font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
--nt-font-mono: "Cascadia Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
--nt-text-xs: 0.75rem;
--nt-text-sm: 0.8125rem;
--nt-text-base: 0.9375rem;
--nt-text-md: 1.0625rem;
--nt-text-lg: 1.25rem;
--nt-text-xl: 1.5rem;
--nt-text-2xl: 1.875rem;
--nt-text-3xl: 2.25rem;
/* rem, not px, so the laptop density scale below shrinks the shell along with the content.
15.5rem/3.75rem == the original 248px/60px at the default 16px root. */
--nt-sidebar-width: 15.5rem;
--nt-topbar-height: 3.75rem;
/* Aliases. Rules further down ask for these names; without them the declaration is invalid at
computed-value time and silently drops (an un-rounded corner, a slate panel on a green site). */
--nt-radius-md: var(--nt-radius);
--nt-surface-muted: var(--nt-surface-2);
--nt-shadow-md: var(--nt-shadow);
--nt-focus: var(--nt-brand-400);
/* Point Bootstrap's own tokens at the brand so .btn-primary, .text-primary,
.form-control:focus and friends inherit it instead of Bootstrap blue. */
--bs-primary: var(--nt-brand);
--bs-primary-rgb: 11, 122, 92;
--bs-link-color: var(--nt-brand-600);
--bs-link-color-rgb: 9, 106, 80;
--bs-link-hover-color: var(--nt-brand-700);
--bs-body-color: var(--nt-text);
--bs-body-bg: var(--nt-canvas);
--bs-border-color: var(--nt-border);
--bs-border-radius: var(--nt-radius);
--bs-font-sans-serif: var(--nt-font);
/* The rest of Bootstrap's primary family. --bs-primary alone does not cover these: the subtle
trio is what .alert-primary, .bg-primary-subtle, .text-primary-emphasis and the open
.accordion-button are actually built from, and each is a separate literal in the stylesheet. */
--bs-primary-text-emphasis: var(--nt-brand-700);
--bs-primary-bg-subtle: var(--nt-brand-050);
--bs-primary-border-subtle: var(--nt-brand-200);
--bs-focus-ring-color: rgba(11, 122, 92, 0.25);
/* Native controls the framework never touches — ,
and the browser's own selected-option highlight — paint from the UA accent, which is blue on
every platform. One property retints all of them. */
accent-color: var(--nt-brand);
}
/* Bootstrap's stock outline-button ink fails AA on this product's page background. Bootstrap picks
its greys and reds against pure white; every screen here sits on --nt-canvas (#f4f6f7) or a card
tint, which costs about 0.35 of a ratio point and drops both below 4.5:1 — #6c757d came to 4.33:1
("Tags", "Segments", "Sync from Meta") and #dc3545 to 4.18:1 ("Cancel", "Delete"). These are
button labels, not decoration, so they are darkened here rather than left to the framework.
Only the resting ink moves: the hover state fills the button and prints white, which already
passes, so the buttons still read as the same grey and the same red. */
.btn-outline-secondary {
--bs-btn-color: #5c636a;
--bs-btn-disabled-color: #5c636a;
}
.btn-outline-danger {
--bs-btn-color: #c22c3b;
--bs-btn-disabled-color: #c22c3b;
}
/* ------------------------------------------------------- the rest of the blue
Bootstrap compiles its components from the Sass variable $primary, and bakes the result in as a
literal — #0d6efd, or a shade of it — rather than reading --bs-primary at runtime. Retargeting
--bs-primary above therefore fixes the utilities (.text-primary, .bg-primary, .badge) and nothing
else: every component below still carried a hard-coded blue on a green product. They are gathered
here rather than scattered through the file so the next Bootstrap upgrade has one place to check.
The list came from auditing the compiled stylesheet for the primary family — #0d6efd, #0a58ca,
#86b7fe, #052c65, #cfe2ff, #9ec5fe and rgba(13,110,253,…) — and covers every one that survived. */
/* Checkboxes, radios and switches. The biggest offender by reach: ~24 views use .form-check-input,
and every ticked box, selected radio and "on" switch in the product printed Bootstrap blue.
:focus is listed as well as the :focus-visible ring further down, because :focus also fires on a
plain mouse click — that is the blue halo you get just from clicking a checkbox. */
.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
background-color: var(--nt-brand);
border-color: var(--nt-brand);
}
.form-check-input:focus {
border-color: var(--nt-brand-200);
box-shadow: 0 0 0 3px var(--nt-brand-100);
}
/* The switch knob is a background SVG with the fill baked into the data URI, so it cannot be
themed with a custom property — the whole URL has to be restated with a brand fill. */
.form-switch .form-check-input:focus {
--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2397d7bd'/%3e%3c/svg%3e");
}
/* Focus glow behind a pressed button. Bootstrap ships a blue rgb triplet per variant, so a green
.btn-primary bloomed blue the moment it took focus. */
.btn-primary,
.btn-link {
--bs-btn-focus-shadow-rgb: 11, 122, 92;
}
.btn-check:focus-visible + .btn {
box-shadow: 0 0 0 4px var(--nt-brand-100);
}
/* Selection and navigation surfaces. */
.list-group {
--bs-list-group-active-bg: var(--nt-brand);
--bs-list-group-active-border-color: var(--nt-brand);
}
.dropdown-menu {
--bs-dropdown-link-active-bg: var(--nt-brand);
--bs-dropdown-link-active-color: var(--nt-brand-contrast);
}
.pagination {
--bs-pagination-active-bg: var(--nt-brand);
--bs-pagination-active-border-color: var(--nt-brand);
--bs-pagination-focus-box-shadow: 0 0 0 3px var(--nt-brand-100);
}
.nav-link:focus-visible {
box-shadow: 0 0 0 3px var(--nt-brand-100);
}
.btn-close {
--bs-btn-close-focus-shadow: 0 0 0 3px var(--nt-brand-100);
}
/* Progress bars — campaign dispatch and knowledge-base ingestion both render one. */
.progress,
.progress-stacked {
--bs-progress-bar-bg: var(--nt-brand);
}
/* Accordion. The open state paints from the subtle trio (fixed at :root) but the chevron is another
data URI with the stroke baked in, so it needs restating too. */
.accordion {
--bs-accordion-btn-focus-box-shadow: 0 0 0 3px var(--nt-brand-100);
--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23075440' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}
/* Table row tint and the primary link utility. .link-primary in particular hard-codes its hover
colour as a literal rgb() rather than reading a token, so it goes blue only under the cursor. */
.table-primary {
--bs-table-bg: var(--nt-brand-050);
--bs-table-border-color: var(--nt-brand-200);
--bs-table-color: var(--nt-text);
}
.link-primary:hover,
.link-primary:focus {
color: var(--nt-brand-700) !important;
text-decoration-color: var(--nt-brand-700) !important;
}
/* Range slider. accent-color at :root cannot reach these — Bootstrap sets the thumb's
background-color explicitly, and an explicit paint always beats the UA accent. */
.form-range::-webkit-slider-thumb { background-color: var(--nt-brand); }
.form-range::-moz-range-thumb { background-color: var(--nt-brand); }
.form-range::-webkit-slider-thumb:active { background-color: var(--nt-brand-200); }
.form-range::-moz-range-thumb:active { background-color: var(--nt-brand-200); }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--nt-brand-100); }
.form-range:focus::-moz-range-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--nt-brand-100); }
/* --------------------------------------------------------------- base type */
html {
font-size: 16px;
}
/* ------------------------------------------------------ laptop density scale
The product is designed against a ~1920px desktop. On a small laptop (1366 or
1536 CSS px — i.e. a 1920 panel at 125% Windows scaling) the same layout
overflows: dashboard cards spill and the inbox's fixed-width columns crush
the thread. Zooming the browser to 80% fixed it, which is the tell that the
layout is right and only the density is wrong.
Everything in this system — spacing scale, type scale, card padding, the
inbox columns, the shell tokens (--nt-sidebar-width, --nt-topbar-height),
and Bootstrap's own components — is sized in rem, so stepping the ROOT
font-size down on laptop-width viewports reproduces that zoom exactly: each
tier keeps the effective design width (viewport ÷ scale) at roughly the
1920px the product was designed for.
992–1439 @ 12px root (75%) → effective 1323–1920
1440–1699 @ 13px root (81.25%) → effective 1772–2091
1700–1919 @ 14px root (87.5%) → effective 1943–2193
≥1920 @ 16px root (100%) → the designed-for desktop
Media queries, not vw, on purpose: a vw-based root font cancels the user's
own browser zoom (zooming in shrinks the CSS viewport, which shrinks the
font right back). Tiers respond to zoom the way the rest of the layout does.
Below 992px the sidebar collapses into the offcanvas drawer and the
phone/tablet layouts take over at full size, so no scaling there.
These must stay AFTER the base html rule above — same specificity, so the
cascade order is what lets the tiers win. */
@media (min-width: 992px) and (max-width: 1439.98px) {
html { font-size: 12px; }
}
@media (min-width: 1440px) and (max-width: 1699.98px) {
html { font-size: 13px; }
}
@media (min-width: 1700px) and (max-width: 1919.98px) {
html { font-size: 14px; }
}
body {
background-color: var(--nt-canvas);
color: var(--nt-text);
font-family: var(--nt-font);
font-size: var(--nt-text-base);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
h1, .h1 { font-size: var(--nt-text-2xl); }
h2, .h2 { font-size: var(--nt-text-xl); }
h3, .h3 { font-size: var(--nt-text-lg); }
h4, .h4 { font-size: var(--nt-text-md); }
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-weight: 650;
letter-spacing: -0.012em;
color: var(--nt-text);
}
/* overflow-wrap:anywhere because a page title can be tenant-supplied — a campaign name is 120 free
characters and need not contain a space. Without it one pasted URL scrolls the whole page. */
.nt-page-title {
font-size: var(--nt-text-xl);
margin-bottom: var(--nt-space-1);
min-width: 0;
overflow-wrap: anywhere;
}
.nt-page-lede {
color: var(--nt-text-muted);
font-size: var(--nt-text-base);
margin-bottom: 0;
max-width: 62ch;
}
.nt-eyebrow {
font-size: var(--nt-text-xs);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--nt-text-faint);
}
.nt-muted { color: var(--nt-text-muted); }
.nt-mono { font-family: var(--nt-font-mono); }
/* ---------------------------------------------------------------- focus ring
One visible ring everywhere, keyboard-only, and never removed. Two layers so
it reads on both light surfaces and the dark sidebar. */
:focus-visible {
outline: 2px solid var(--nt-brand-400);
outline-offset: 2px;
border-radius: var(--nt-radius-sm);
}
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
outline: 2px solid var(--nt-brand-400);
outline-offset: 2px;
box-shadow: 0 0 0 4px var(--nt-brand-100);
}
.form-control:focus,
.form-select:focus {
border-color: var(--nt-brand-200);
box-shadow: 0 0 0 3px var(--nt-brand-100);
}
/* Skip link — first thing in the tab order, invisible until focused. */
.nt-skip-link {
position: absolute;
left: var(--nt-space-3);
top: -4rem;
z-index: 1080;
background: var(--nt-surface);
color: var(--nt-brand-700);
padding: var(--nt-space-2) var(--nt-space-4);
border-radius: var(--nt-radius);
box-shadow: var(--nt-shadow-lg);
font-weight: 600;
transition: top 120ms ease-out;
}
.nt-skip-link:focus {
top: var(--nt-space-3);
}
/* ------------------------------------------------------------------ controls */
.btn {
--bs-btn-font-weight: 600;
--bs-btn-border-radius: var(--nt-radius-sm);
font-size: var(--nt-text-base);
}
.btn-primary {
--bs-btn-bg: var(--nt-brand);
--bs-btn-border-color: var(--nt-brand);
--bs-btn-hover-bg: var(--nt-brand-600);
--bs-btn-hover-border-color: var(--nt-brand-600);
--bs-btn-active-bg: var(--nt-brand-700);
--bs-btn-active-border-color: var(--nt-brand-700);
--bs-btn-disabled-bg: var(--nt-brand-200);
--bs-btn-disabled-border-color: var(--nt-brand-200);
--bs-btn-color: var(--nt-brand-contrast);
--bs-btn-hover-color: var(--nt-brand-contrast);
--bs-btn-active-color: var(--nt-brand-contrast);
}
.btn-outline-primary {
/* Declared here rather than beside .btn-primary above so this class is styled in exactly one
place: two blocks for one selector means the later one silently wins for anything they share. */
--bs-btn-focus-shadow-rgb: 11, 122, 92;
--bs-btn-color: var(--nt-brand-600);
--bs-btn-border-color: var(--nt-border-strong);
--bs-btn-hover-bg: var(--nt-brand-050);
--bs-btn-hover-border-color: var(--nt-brand);
--bs-btn-hover-color: var(--nt-brand-700);
--bs-btn-active-bg: var(--nt-brand-100);
--bs-btn-active-border-color: var(--nt-brand);
--bs-btn-active-color: var(--nt-brand-700);
}
/* Bootstrap compiles the active-pill background from its own $primary (#0d6efd), a literal it does
NOT read from --bs-primary — so an un-themed .nav-pills renders a blue pill on a green site. Point
the pill tokens at the brand, and give the segmented control a pill-shaped rail. */
.nav-pills {
--bs-nav-pills-link-active-bg: var(--nt-brand);
--bs-nav-pills-link-active-color: var(--nt-brand-contrast);
--bs-nav-pills-border-radius: var(--nt-radius-pill);
gap: var(--nt-space-1);
}
.nav-pills .nav-link {
color: var(--nt-text-muted);
font-weight: 600;
font-size: var(--nt-text-sm);
padding: var(--nt-space-2) var(--nt-space-4);
transition: background 0.18s ease, color 0.18s ease;
}
.nav-pills .nav-link:hover:not(.active) {
background: var(--nt-brand-050);
color: var(--nt-brand-700);
}
.nav-pills .nav-link.active { box-shadow: var(--nt-shadow-sm); }
.form-label {
font-size: var(--nt-text-sm);
font-weight: 600;
color: var(--nt-text);
margin-bottom: var(--nt-space-1);
}
.form-control, .form-select {
border-color: var(--nt-border-strong);
border-radius: var(--nt-radius-sm);
font-size: var(--nt-text-base);
padding: 0.5rem 0.75rem;
}
.form-text, .nt-hint {
color: var(--nt-text-muted);
font-size: var(--nt-text-sm);
}
/* A hint that is a caution, not a note. Weight and wording carry it as well as hue. */
.nt-hint-warning {
color: var(--nt-warning);
font-weight: 600;
}
/* ------------------------------------------------------------------- cards */
.nt-card {
background: var(--nt-surface);
border: 1px solid var(--nt-border);
border-radius: var(--nt-radius-lg);
box-shadow: var(--nt-shadow-sm);
/* Hover life works with or without the entrance animation; it yields to reduced-motion where the
transition is zeroed further down. Declared here rather than in a second .nt-card rule so the
class is defined once (see StylesheetCollisionTests). */
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.nt-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--nt-space-3);
padding: var(--nt-space-4) var(--nt-space-5);
border-bottom: 1px solid var(--nt-border);
}
.nt-card-title {
font-size: var(--nt-text-md);
font-weight: 650;
margin: 0;
}
.nt-card-body {
padding: var(--nt-space-5);
}
/* Bootstrap cards used elsewhere in the app inherit the same shape. */
.card {
border-color: var(--nt-border);
border-radius: var(--nt-radius-lg);
box-shadow: var(--nt-shadow-sm);
}
.card-header {
background: var(--nt-surface);
border-bottom-color: var(--nt-border);
font-weight: 600;
}
/* --------------------------------------------------------------- stat tiles */
.nt-stat {
display: flex;
flex-direction: column;
gap: var(--nt-space-1);
height: 100%;
padding: var(--nt-space-5);
}
.nt-stat-label {
font-size: var(--nt-text-xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--nt-text-faint);
}
.nt-stat-value {
font-size: var(--nt-text-2xl);
font-weight: 680;
letter-spacing: -0.02em;
line-height: 1.15;
}
.nt-stat-note {
font-size: var(--nt-text-sm);
color: var(--nt-text-muted);
}
/* AI conversation summary in the inbox details panel: a readable, wrapping note
that preserves the model's line breaks without letting a long run overflow. */
.nt-ai-summary {
font-size: var(--nt-text-sm);
line-height: 1.5;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
/* -------------------------------------------------------------- status pills
Never colour alone: every pill carries its own words, and the icon is
aria-hidden so a screen reader hears the label, not the glyph. */
.nt-pill {
display: inline-flex;
align-items: center;
gap: var(--nt-space-1);
padding: 0.15rem 0.6rem;
border-radius: var(--nt-radius-pill);
font-size: var(--nt-text-xs);
font-weight: 650;
line-height: 1.6;
border: 1px solid transparent;
white-space: nowrap;
}
.nt-pill-success { background: var(--nt-success-tint); color: var(--nt-success); border-color: #bfe3d5; }
.nt-pill-warning { background: var(--nt-warning-tint); color: var(--nt-warning); border-color: #f0dcb6; }
.nt-pill-danger { background: var(--nt-danger-tint); color: var(--nt-danger); border-color: #f0c7c5; }
.nt-pill-info { background: var(--nt-info-tint); color: var(--nt-info); border-color: #c7ddee; }
.nt-pill-neutral { background: var(--nt-surface-2); color: var(--nt-text-muted); border-color: var(--nt-border); }
/* -------------------------------------------------------------- empty state */
.nt-empty {
text-align: center;
padding: var(--nt-space-7) var(--nt-space-5);
max-width: 46rem;
margin-inline: auto;
}
.nt-empty-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.5rem;
height: 3.5rem;
border-radius: var(--nt-radius-pill);
background: var(--nt-brand-050);
color: var(--nt-brand);
font-size: var(--nt-text-xl);
margin-bottom: var(--nt-space-4);
}
.nt-empty-title {
font-size: var(--nt-text-lg);
margin-bottom: var(--nt-space-2);
}
.nt-empty-body {
color: var(--nt-text-muted);
margin-inline: auto;
max-width: 44ch;
margin-bottom: var(--nt-space-5);
}
/* ------------------------------------------------------------ notice / alert */
.alert {
border-radius: var(--nt-radius);
border-width: 1px;
font-size: var(--nt-text-base);
}
.nt-notice {
display: flex;
gap: var(--nt-space-3);
align-items: flex-start;
padding: var(--nt-space-4);
border-radius: var(--nt-radius);
border: 1px solid var(--nt-border);
background: var(--nt-surface);
}
.nt-notice-warning { background: var(--nt-warning-tint); border-color: #f0dcb6; color: var(--nt-warning); }
.nt-notice-danger { background: var(--nt-danger-tint); border-color: #f0c7c5; color: var(--nt-danger); }
.nt-notice-success { background: var(--nt-success-tint); border-color: #bfe3d5; color: var(--nt-success); }
.nt-notice-info { background: var(--nt-info-tint); border-color: #c7ddee; color: var(--nt-info); }
/* =========================================================== application shell */
.nt-shell {
min-height: 100vh;
}
/* ---- sidebar ---- */
.nt-sidebar {
background: var(--nt-sidebar);
color: var(--nt-sidebar-text);
width: var(--nt-sidebar-width);
display: flex;
flex-direction: column;
}
/* Desktop: the sidebar is a fixed rail and the content is inset by its width. */
@media (min-width: 992px) {
.nt-sidebar {
position: fixed;
inset-block: 0;
inset-inline-start: 0;
z-index: 1030;
}
/* Only when a sidebar is actually rendered — the signed-out shell has none. */
.nt-main.has-sidebar {
margin-inline-start: var(--nt-sidebar-width);
}
}
/* Below lg the same markup is reused inside a Bootstrap offcanvas drawer. */
.offcanvas .nt-sidebar {
width: 100%;
height: 100%;
}
.offcanvas.nt-drawer {
width: min(84vw, var(--nt-sidebar-width));
background: var(--nt-sidebar);
}
.nt-brand {
display: flex;
align-items: center;
gap: var(--nt-space-3);
padding: var(--nt-space-4) var(--nt-space-4);
color: var(--nt-sidebar-text-strong);
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nt-brand:hover, .nt-brand:focus { color: var(--nt-sidebar-text-strong); }
.nt-brand-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
flex: 0 0 auto;
border-radius: var(--nt-radius-sm);
background: var(--nt-brand-400);
color: #06251c;
font-size: 1.05rem;
}
.nt-brand-name {
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.15;
}
.nt-brand-sub {
display: block;
font-size: var(--nt-text-xs);
font-weight: 500;
color: var(--nt-sidebar-text);
opacity: 0.75;
}
/* Nav + footer scroll together as one region, instead of the nav owning its own scrollbar and the
footer sitting pinned outside it. min-height:0 is required for a flex child to shrink below its
content size and actually hand scrolling to overflow-y rather than stretching the sidebar. */
.nt-sidebar-scroll {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
/* A slim, translucent thumb instead of the OS's default grey/arrowed scrollbar, which reads as
a stray light rectangle against the dark rail. */
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.nt-sidebar-scroll::-webkit-scrollbar { width: 6px; }
.nt-sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.nt-sidebar-scroll::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.22);
border-radius: var(--nt-radius-pill);
}
.nt-sidebar-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.34); }
.nt-nav {
padding: var(--nt-space-3) var(--nt-space-3);
}
.nt-nav-section {
padding: var(--nt-space-4) var(--nt-space-3) var(--nt-space-1);
font-size: var(--nt-text-xs);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
}
.nt-nav-link {
display: flex;
align-items: center;
gap: var(--nt-space-3);
padding: 0.5rem var(--nt-space-3);
margin-bottom: 2px;
border-radius: var(--nt-radius-sm);
color: var(--nt-sidebar-text);
text-decoration: none;
font-weight: 550;
font-size: var(--nt-text-base);
}
/* Group header: a collapse toggle, not a link. It is a full-width button, so it is reset to look
like a nav row and its chevron is pushed to the end. */
.nt-nav-toggle {
width: 100%;
background: none;
border: 0;
text-align: start;
cursor: pointer;
font-family: inherit;
}
.nt-nav-chevron {
margin-inline-start: auto;
font-size: 0.8rem;
opacity: 0.7;
transition: transform 0.15s ease;
}
/* Rotated when the group is open. Server-rendered .is-open covers the pre-Alpine paint; Alpine's
:class then keeps it in step with the toggle. */
.nt-nav-toggle.is-open .nt-nav-chevron,
.nt-nav-chevron.is-open {
transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
.nt-nav-chevron { transition: none; }
}
/* Children of an open group: indented under their header and set slightly quieter, so the hierarchy
reads at a glance without a second colour. */
.nt-nav-sub {
margin: 0 0 2px;
padding-inline-start: calc(var(--nt-space-3) + var(--nt-space-2));
}
.nt-nav-sub .nt-nav-link {
/* Tighter than a top-level row: the body's 1.55 line-height was inflating each entry to 42px,
so a 7-item group like Billing ran to nearly 300px of mostly empty rows. */
padding-block: 0.3rem;
line-height: 1.25;
font-weight: 500;
font-size: var(--nt-text-sm);
}
.nt-nav-link .bi {
font-size: 1.05rem;
opacity: 0.85;
flex: 0 0 auto;
}
.nt-nav-link:hover {
background: var(--nt-sidebar-2);
color: var(--nt-sidebar-text-strong);
}
.nt-nav-link:focus-visible {
outline: 2px solid var(--nt-brand-400);
outline-offset: -2px;
}
/* Active section: a tinted row plus a left marker, so it is not colour alone —
the link also carries aria-current="page". */
.nt-nav-link.is-active {
background: var(--nt-brand-600);
color: #fff;
box-shadow: inset 3px 0 0 var(--nt-brand-400);
}
.nt-nav-link.is-active .bi { opacity: 1; }
.nt-nav-link.is-pending {
opacity: 0.6;
cursor: default;
}
/* Behind the subscription paywall right now. Dimmed less than .is-pending — the row is still a live
link to the checkout, not a dead one — and the padlock says so without relying on the dimming,
which alone would read as "disabled" to some and as nothing at all to others. */
.nt-nav-link.is-locked {
opacity: 0.72;
}
.nt-nav-link.is-locked:hover,
.nt-nav-link.is-locked:focus-visible {
opacity: 1;
}
.nt-nav-lock {
margin-inline-start: auto;
font-size: 0.7rem;
line-height: 1;
opacity: 0.75;
}
.nt-nav-lock .bi { font-size: 0.7rem; }
.nt-nav-badge {
margin-inline-start: auto;
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.05rem 0.4rem;
border-radius: var(--nt-radius-pill);
background: rgba(255, 255, 255, 0.14);
color: rgba(255, 255, 255, 0.9);
}
/* Live count of conversations awaiting a reply. Sits at the end of the Inbox row; a solid,
high-contrast pill so it reads as an alert, not as the muted "Soon" badge beside it. */
.nt-nav-count {
margin-inline-start: auto;
min-width: 1.25rem;
text-align: center;
font-size: 0.6875rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1.1;
padding: 0.1rem 0.4rem;
border-radius: var(--nt-radius-pill);
background: var(--nt-brand-400);
color: #06281c;
}
/* On the active (brand-filled) Inbox row the pill inverts, so it stays legible against the row. */
.nt-nav-link.is-active .nt-nav-count {
background: #fff;
color: var(--nt-brand-700);
}
.nt-sidebar-foot {
/* Stays pinned to the bottom of .nt-sidebar-scroll while the nav is short; once the nav grows
past the viewport this margin collapses to 0 and the footer scrolls with it instead of
staying fixed in place. */
margin-top: auto;
padding: var(--nt-space-4);
border-top: 1px solid rgba(255, 255, 255, 0.08);
font-size: var(--nt-text-xs);
color: rgba(255, 255, 255, 0.6);
}
/* ---- top bar ---- */
.nt-topbar {
position: sticky;
top: 0;
z-index: 1020;
display: flex;
align-items: center;
gap: var(--nt-space-3);
min-height: var(--nt-topbar-height);
padding: var(--nt-space-2) var(--nt-space-4);
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--nt-border);
/* The shadow appears only once content actually slides beneath the bar (site.js toggles
.is-scrolled); the transition lives here so gaining and losing it is equally soft. */
transition: box-shadow 0.25s ease;
}
.nt-topbar.is-scrolled {
box-shadow: 0 0.375rem 1rem rgba(13, 43, 37, 0.08);
}
.nt-tenant {
min-width: 0;
}
.nt-tenant-name {
font-weight: 650;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nt-tenant-sub {
font-size: var(--nt-text-xs);
color: var(--nt-text-muted);
line-height: 1.2;
}
.nt-chip {
display: inline-flex;
align-items: center;
gap: var(--nt-space-2);
padding: 0.3rem 0.7rem;
border-radius: var(--nt-radius-pill);
border: 1px solid var(--nt-border-strong);
background: var(--nt-surface);
font-size: var(--nt-text-sm);
font-weight: 600;
color: var(--nt-text);
text-decoration: none;
white-space: nowrap;
}
.nt-chip:hover { border-color: var(--nt-brand); color: var(--nt-brand-700); }
.nt-chip-low {
background: var(--nt-warning-tint);
border-color: #e6cb96;
color: var(--nt-warning);
}
.nt-chip-unknown { color: var(--nt-text-muted); }
/* The chip stops claiming to be current when its live connection has gone. The dashed border is a
hint; the words beside the amount are the message, so nothing here depends on seeing a colour. */
.nt-chip-stale-mark { display: none; }
.nt-chip-stale {
border-style: dashed;
border-color: var(--nt-border-strong);
}
.nt-chip-stale .nt-chip-stale-mark {
display: inline;
font-weight: 500;
color: var(--nt-text-muted);
}
.nt-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
flex: 0 0 auto;
border-radius: var(--nt-radius-pill);
background: var(--nt-brand-100);
color: var(--nt-brand-700);
font-weight: 700;
font-size: var(--nt-text-sm);
}
.nt-content {
padding: var(--nt-space-5) var(--nt-space-4) var(--nt-space-7);
}
@media (min-width: 768px) {
.nt-content { padding: var(--nt-space-6) var(--nt-space-6) var(--nt-space-7); }
}
/* Fluid by default so data-heavy screens — dashboards, tenant tables, campaign and inbox reports —
fill the whole window rather than sitting in a 1240px column. Individual narrow forms keep their own
max-width on the elements inside, so they do not stretch awkwardly. A very wide cap keeps text-only
pages from running edge-to-edge on ultra-wide monitors. */
.nt-content-inner {
max-width: 2200px;
margin-inline: auto;
}
.nt-page-head {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: var(--nt-space-3);
margin-bottom: var(--nt-space-5);
}
/* Impersonation is a dangerous mode; it gets a permanent, unmissable banner. */
.nt-impersonation-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--nt-space-3);
padding: var(--nt-space-2) var(--nt-space-4);
background: var(--nt-warning-tint);
border-bottom: 1px solid #e6cb96;
color: var(--nt-warning);
font-size: var(--nt-text-sm);
font-weight: 600;
}
/* ---- platform realm: same shell, different skin, so you always know where you are ----
The skin used to swap the accent ramp for a blue one, which broke in two ways. --nt-brand-600 is
what .btn-primary uses for :hover, and --nt-brand is NOT part of the override — so every primary
button in the admin console sat green at rest and turned blue under the cursor. --nt-brand-400 is
the global focus ring, so keyboard focus went blue too, on a product that is green everywhere
else. The realm cue now lives entirely in the shell chrome: a near-black forest sidebar, darker
than the tenant's, so you still know which console you are in. The accent ramp is left alone,
which means buttons, rings and links behave identically in both realms. */
.nt-shell-platform {
--nt-sidebar: #071c17;
--nt-sidebar-2: #0e2f27;
}
/* ============================================================== auth screens */
.nt-auth {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--nt-space-5) var(--nt-space-4);
background:
radial-gradient(1100px 520px at 50% -10%, var(--nt-brand-050), transparent 70%),
var(--nt-canvas);
}
.nt-auth-card {
width: 100%;
max-width: 26rem;
background: var(--nt-surface);
border: 1px solid var(--nt-border);
border-radius: var(--nt-radius-lg);
box-shadow: var(--nt-shadow);
padding: var(--nt-space-6);
}
.nt-auth-brand {
display: flex;
align-items: center;
justify-content: center;
gap: var(--nt-space-3);
margin-bottom: var(--nt-space-5);
color: var(--nt-text);
text-decoration: none;
}
.nt-auth-brand .nt-brand-mark {
background: var(--nt-brand);
color: #fff;
}
.nt-auth-realm {
display: inline-flex;
align-items: center;
gap: var(--nt-space-2);
padding: 0.2rem 0.7rem;
border-radius: var(--nt-radius-pill);
background: var(--nt-brand-050);
color: var(--nt-brand-700);
border: 1px solid var(--nt-brand-100);
font-size: var(--nt-text-xs);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.nt-auth-title {
font-size: var(--nt-text-lg);
margin: var(--nt-space-3) 0 var(--nt-space-1);
}
.nt-auth-sub {
color: var(--nt-text-muted);
font-size: var(--nt-text-sm);
margin-bottom: var(--nt-space-5);
}
.nt-auth-switch {
margin-top: var(--nt-space-5);
padding-top: var(--nt-space-4);
border-top: 1px solid var(--nt-border);
font-size: var(--nt-text-sm);
color: var(--nt-text-muted);
}
.nt-auth-foot {
margin-top: var(--nt-space-5);
font-size: var(--nt-text-xs);
color: var(--nt-text-faint);
text-align: center;
}
/* The card brand now carries the real mark image, so it drops the coloured tile the icon needed. */
.nt-auth-brand-mark {
width: 2.75rem;
height: 2.75rem;
object-fit: contain;
display: block;
}
/* Public sign-in (business/agent) sits inside the marketing navbar + footer, so it must not claim the
whole viewport the way the standalone auth screen does — it fills the space between the two instead. */
.nt-auth-public {
min-height: auto;
padding-block: clamp(2.5rem, 7vw, 5rem);
}
/* The business ⇄ agent segmented control. One clear choice up front, so a visitor does not fail
against a store that never held their account. */
.nt-auth-toggle {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.25rem;
padding: 0.25rem;
margin-bottom: var(--nt-space-4);
background: var(--nt-canvas);
border: 1px solid var(--nt-border);
border-radius: var(--nt-radius-pill);
}
.nt-auth-toggle-opt {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 0.45rem 0.75rem;
border-radius: var(--nt-radius-pill);
font-size: var(--nt-text-sm);
font-weight: 600;
color: var(--nt-text-muted);
text-decoration: none;
transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.nt-auth-toggle-opt:hover { color: var(--nt-text); }
.nt-auth-toggle-opt.is-active {
background: var(--nt-surface);
color: var(--nt-brand-700);
box-shadow: var(--nt-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.08));
}
.nt-auth-toggle-opt.is-active i { color: var(--nt-brand); }
/* Brand tile carrying the real mark image (shell sidebar + top bar) — no coloured square behind it. */
.nt-brand-mark-img {
background: transparent;
padding: 0;
overflow: hidden;
}
.nt-brand-mark-img img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* The platform tenant "danger zone" — a destructive-action card set off by a red edge. */
.nt-danger-zone {
border-color: var(--nt-danger);
box-shadow: inset 3px 0 0 var(--nt-danger);
}
/* -------------------------------------------------------------- modals
Every app modal gets a scale-and-rise entrance for a bit of delight, replacing Bootstrap's plain
slide. The shared confirmation modal (site.js) adds a popping icon badge. Reduced-motion users get
the modal with no transform. */
.modal.fade .modal-dialog {
transform: scale(0.94) translateY(16px);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease;
}
.modal.show .modal-dialog { transform: none; }
.modal-content {
border: 0;
border-radius: var(--nt-radius-lg);
box-shadow: var(--nt-shadow-lg);
}
.modal-backdrop.show { opacity: 0.55; }
.nt-confirm-modal .modal-header {
align-items: center;
gap: var(--nt-space-3);
border-bottom: 0;
padding-bottom: 0;
}
.nt-confirm-modal .modal-title { margin: 0 auto 0 0; }
.nt-confirm-modal .modal-body {
padding-top: var(--nt-space-3);
color: var(--nt-text-muted);
line-height: 1.6;
}
.nt-confirm-modal .modal-footer { border-top: 0; padding-top: var(--nt-space-2); }
.nt-confirm-icon {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--nt-danger-tint);
color: var(--nt-danger);
font-size: 1.15rem;
}
@media (prefers-reduced-motion: no-preference) {
.nt-confirm-modal.show .nt-confirm-icon {
animation: ntConfirmIconPop 0.45s 0.08s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes ntConfirmIconPop {
from { transform: scale(0); }
to { transform: scale(1); }
}
}
@media (prefers-reduced-motion: reduce) {
.modal.fade .modal-dialog { transition: none; transform: none; }
}
/* -------------------------------------------------------------- toasts
A clean surface toast with a coloured left accent and matching icon per kind (success / info /
danger). Success and info slide in from the right and auto-dismiss (see site.js). */
@keyframes ntToastIn {
from { opacity: 0; transform: translateX(24px) scale(0.98); }
to { opacity: 1; transform: none; }
}
@keyframes ntNoticeIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
.nt-toast-container .toast {
position: relative;
overflow: hidden;
background: var(--nt-surface);
color: var(--nt-text);
border: 1px solid var(--nt-border);
border-left-width: 3px;
border-radius: var(--nt-radius);
box-shadow: var(--nt-shadow);
}
.nt-toast-container .toast.nt-toast-success { border-left-color: var(--nt-success); }
.nt-toast-container .toast.nt-toast-danger { border-left-color: var(--nt-danger); }
.nt-toast-container .toast.nt-toast-info { border-left-color: var(--nt-info); }
.nt-toast-icon { font-size: 1.05rem; padding: 0.8rem 0 0 0.85rem; }
.nt-toast-success .nt-toast-icon { color: var(--nt-success); }
.nt-toast-danger .nt-toast-icon { color: var(--nt-danger); }
.nt-toast-info .nt-toast-icon { color: var(--nt-info); }
/* The countdown bar: a full-width sliver pinned to the toast's bottom edge that drains to nothing
over exactly the autohide delay (duration is set inline in JS to match). Tinted to the toast kind.
scaleX from a left origin so it shrinks toward the close, and it inherits the toast's rounded
corners because the toast clips its overflow. */
.nt-toast-progress {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 3px;
transform-origin: left center;
background: var(--nt-info);
animation-name: ntToastProgress;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
.nt-toast-success .nt-toast-progress { background: var(--nt-success); }
.nt-toast-danger .nt-toast-progress { background: var(--nt-danger); }
.nt-toast-info .nt-toast-progress { background: var(--nt-info); }
@keyframes ntToastProgress {
from { transform: scaleX(1); }
to { transform: scaleX(0); }
}
@media (prefers-reduced-motion: no-preference) {
.nt-toast-container .toast { animation: ntToastIn 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
/* Success/notice banners rendered after an action pop gently into view. */
.nt-notice { animation: ntNoticeIn 0.35s ease both; }
}
/* ------------------------------------------------------------- motion / panels
Entrance cascade and hover life for every panel, gated behind prefers-reduced-motion so it never
fights a visitor who has asked the OS for less animation. Purely presentational — no layout shift
once settled, since the cards animate from their final position. */
@media (prefers-reduced-motion: no-preference) {
@keyframes ntFadeInUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes ntFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes ntPop {
0% { opacity: 0; transform: scale(0.96); }
60% { opacity: 1; transform: scale(1.015); }
100% { opacity: 1; transform: scale(1); }
}
.nt-page-head { animation: ntFadeIn 0.4s ease both; }
/* Every card fades up into place on load. */
.nt-card { animation: ntFadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
/* KPI tiles get a little pop instead, and their number counts in. */
.nt-card.nt-stat { animation: ntPop 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.nt-stat-value { animation: ntFadeInUp 0.6s 0.15s cubic-bezier(0.16, 1, 0.3, 1) both; }
/* Staggered cascade — cards deal out left-to-right across a row, and top-to-bottom down the page. */
.row > [class*="col"]:nth-child(1) .nt-card,
.nt-content-inner > .nt-card:nth-of-type(1) { animation-delay: 0.03s; }
.row > [class*="col"]:nth-child(2) .nt-card,
.nt-content-inner > .nt-card:nth-of-type(2) { animation-delay: 0.08s; }
.row > [class*="col"]:nth-child(3) .nt-card,
.nt-content-inner > .nt-card:nth-of-type(3) { animation-delay: 0.13s; }
.row > [class*="col"]:nth-child(4) .nt-card,
.nt-content-inner > .nt-card:nth-of-type(4) { animation-delay: 0.18s; }
.row > [class*="col"]:nth-child(5) .nt-card,
.nt-content-inner > .nt-card:nth-of-type(5) { animation-delay: 0.23s; }
.row > [class*="col"]:nth-child(6) .nt-card,
.nt-content-inner > .nt-card:nth-of-type(6) { animation-delay: 0.28s; }
.row > [class*="col"]:nth-child(7) .nt-card { animation-delay: 0.33s; }
.row > [class*="col"]:nth-child(8) .nt-card { animation-delay: 0.38s; }
/* Rows of table data ripple in. Capped so a 1,000-row table doesn't animate forever. */
.nt-table tbody tr { animation: ntFadeIn 0.4s ease both; }
.nt-table tbody tr:nth-child(1) { animation-delay: 0.04s; }
.nt-table tbody tr:nth-child(2) { animation-delay: 0.08s; }
.nt-table tbody tr:nth-child(3) { animation-delay: 0.12s; }
.nt-table tbody tr:nth-child(4) { animation-delay: 0.16s; }
.nt-table tbody tr:nth-child(5) { animation-delay: 0.20s; }
.nt-table tbody tr:nth-child(6) { animation-delay: 0.24s; }
.nt-table tbody tr:nth-child(n+7) { animation-delay: 0.28s; }
}
/* The .nt-card entrance transition is declared once on the base rule above; the hover lift and its
reduced-motion opt-out live here. */
.nt-card.nt-stat:hover {
transform: translateY(-3px);
box-shadow: var(--nt-shadow);
}
/* Larger content cards deepen their shadow rather than lift, so a full-width table doesn't jump. */
.nt-card:not(.nt-stat):hover { box-shadow: var(--nt-shadow); }
@media (prefers-reduced-motion: reduce) {
.nt-card { transition: none; }
.nt-card.nt-stat:hover { transform: none; }
}
/* "or sign up with email" rule between the social/OTP options and the password form. */
.nt-auth-divider {
display: flex;
align-items: center;
gap: var(--nt-space-3);
margin: var(--nt-space-4) 0;
color: var(--nt-text-faint);
font-size: var(--nt-text-xs);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.nt-auth-divider::before,
.nt-auth-divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--nt-border);
}
/* The bad-credentials block: visible, announced (role="alert" in the markup),
and not signalled by colour alone — it leads with an icon and a heading. */
.nt-auth-error {
display: flex;
gap: var(--nt-space-3);
align-items: flex-start;
padding: var(--nt-space-3) var(--nt-space-4);
margin-bottom: var(--nt-space-4);
border-radius: var(--nt-radius);
background: var(--nt-danger-tint);
border: 1px solid #f0c7c5;
color: var(--nt-danger);
font-size: var(--nt-text-sm);
}
.nt-auth-error ul { margin: 0; padding-inline-start: 1.1rem; }
/* ------------------------------------------------------------------- tables */
.nt-table {
--bs-table-bg: transparent;
margin-bottom: 0;
}
.nt-table > thead > tr > th {
font-size: var(--nt-text-xs);
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--nt-text-faint);
border-bottom-color: var(--nt-border);
padding: var(--nt-space-3) var(--nt-space-4);
background: var(--nt-surface-2);
}
.nt-table > tbody > tr > td {
padding: var(--nt-space-3) var(--nt-space-4);
border-bottom-color: var(--nt-border);
vertical-align: middle;
}
/* ------------------------------------------------------------------ loading */
.nt-skeleton {
background: linear-gradient(90deg, var(--nt-surface-2) 25%, #eef2f1 37%, var(--nt-surface-2) 63%);
background-size: 400% 100%;
border-radius: var(--nt-radius-sm);
animation: nt-shimmer 1.3s ease-in-out infinite;
}
@keyframes nt-shimmer {
0% { background-position: 100% 50%; }
100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
.nt-skeleton { animation: none; }
}
/* Alpine sets x-cloak until it boots, so nothing flashes unstyled. */
[x-cloak] { display: none !important; }
/* ================================================================= team inbox
The one screen in the product that is an application pane rather than a
document (CLAUDE.md §13): it owns the full height below the top bar, scrolls
internally, and collapses from two panes to one on a phone. The visual
language here is deliberately WhatsApp's own — the beige chat wallpaper, the
white inbound and green outbound bubbles with their little tails, the day
pills, the grey/blue delivery ticks — so an agent feels at home instantly.
Those WhatsApp-specific colours are scoped to .nt-inbox and do not leak into
the rest of the design system. */
/* The inbox opts out of the centred, padded content column. */
.nt-content-flush { padding: 0; }
.nt-content-inner-flush { max-width: none; }
.nt-inbox {
/* WhatsApp palette, local to this pane — these tokens never leak into the rest of the app. */
--wa-panel: #f0f2f5; /* header / list chrome */
--wa-panel-line: #d1d7db; /* hairline between chrome + body */
--wa-wallpaper: #efeae2; /* the chat background beige */
--wa-in-bubble: #ffffff; /* received message */
--wa-out-bubble: #d9fdd3; /* sent message */
--wa-bubble-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
--wa-tick-read: #53bdeb; /* the famous blue double-tick */
--wa-tick-plain: #667781; /* grey single / double tick */
--wa-meta: #667781; /* time + faint text on bubbles */
--wa-accent: #00a884; /* send button / active accents */
--wa-accent-strong: #008069;
/* One height for the thread and details column headers so their bottom hairlines line up. */
--nt-inbox-head-height: max(52px, 3.75rem);
/* The inbox is read and typed in all day, so its text never shrinks with the laptop density tier
(12px root at 992-1439px: an iPad in landscape, a 14-inch laptop). The type scale is re-pinned
here with pixel floors; every inbox element already reads these tokens, and on a wide screen,
where the rem value is larger, nothing changes. */
--nt-text-xs: max(11.5px, 0.75rem);
--nt-text-sm: max(13px, 0.8125rem);
--nt-text-base: max(14.5px, 0.9375rem);
--nt-text-md: max(16px, 1.0625rem);
position: relative;
display: grid;
grid-template-columns: 1fr;
height: calc(100vh - var(--nt-topbar-height));
/* dvh so a mobile browser's collapsing address bar does not push the composer below the fold.
The vh line above stays as the fallback for anything that does not know dvh. */
height: calc(100dvh - var(--nt-topbar-height));
min-height: 32rem;
background: var(--wa-panel);
}
/* ---- fit-to-screen: the inbox is a full-height application pane, not a document ----
A flush page (only the inbox sets ContentVariant=flush) pins to the viewport and never scrolls the
page — the conversation list, the message history and the details panel each own their own scroll.
Doing this as a flex column from the body down means the message area fills whatever height is left
after the top bar, whatever the top bar's real height turns out to be, rather than the old
calc(100dvh - guessed-topbar) that broke the moment the bar wrapped a pixel taller. */
.nt-shell-flush {
height: 100vh;
/* svh = the SMALL viewport height (browser toolbars shown), which excludes the space behind a
browser's own top/bottom chrome. */
height: 100svh;
/* The robust height: the SMALLER of the JS measure and svh.
- --app-height (site.js, from visualViewport/innerHeight) is the real visible height and shrinks
for the on-screen keyboard, so it wins when the keyboard is up.
- but some mobile / in-app browsers OVER-report that height (counting the area behind their own
bottom toolbar), which pushed the composer behind the toolbar and the Android nav bar. Capping
at 100svh — which never counts chrome — keeps the composer on-screen in exactly that case.
min() gives the best of both: keyboard-aware when the measure is smaller, chrome-safe when it is
larger. */
height: min(var(--app-height, 100svh), 100svh);
overflow: hidden;
}
.nt-shell-flush .nt-main {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
.nt-shell-flush .nt-topbar { flex: 0 0 auto; }
.nt-shell-flush .nt-content-flush {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
.nt-shell-flush .nt-content-inner-flush {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
/* Fill the space the flex parent hands down rather than measuring the viewport ourselves. */
.nt-shell-flush .nt-inbox {
height: auto;
min-height: 0;
flex: 1 1 auto;
}
.nt-inbox-alert { margin: var(--nt-space-3) var(--nt-space-3) 0; }
/* Phone: exactly one pane at a time. 375px cannot hold a list and a thread, and
a squeezed thread is unusable. */
@media (max-width: 991.98px) {
.nt-inbox[data-pane="thread"] .nt-inbox-list { display: none; }
.nt-inbox[data-pane="list"] .nt-inbox-thread { display: none; }
/* One pane at a time, so make the inbox a plain flex column here instead of a grid: the single
visible pane then flex-fills the exact height its parent hands down, which passes cleanly to the
thread and its composer. The grid's align-content stretch did the same on desktop but is handled
inconsistently by some mobile / in-app webviews — enough to leave the thread taller than the
viewport and drop the composer off the bottom. Flex-fill is universally reliable. */
.nt-inbox {
display: flex;
flex-direction: column;
}
.nt-inbox-list,
.nt-inbox-thread {
flex: 1 1 auto;
min-height: 0;
}
}
/* The list takes a share of the width (clamped), not a fixed 26rem: at 992-1439px the root font is
12px (the laptop density tier) and a sidebar is docked too, so a fixed list left an iPad in
landscape a 526px chat. minmax(0, 1fr) keeps a long unbroken message from widening the thread. */
@media (min-width: 992px) {
.nt-inbox { grid-template-columns: clamp(16rem, 27vw, 26rem) minmax(0, 1fr); }
}
.nt-inbox-list,
.nt-inbox-thread {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
}
.nt-inbox-list {
border-right: 1px solid var(--wa-panel-line);
background: var(--nt-surface);
overflow-y: auto;
}
.nt-inbox-thread {
background: var(--wa-wallpaper);
}
/* ---- the "this is not live" banner ---- */
.nt-live-banner {
position: absolute;
inset-inline: 0;
top: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
gap: var(--nt-space-2);
padding: var(--nt-space-2) var(--nt-space-4);
background: var(--nt-warning-tint);
border-bottom: 1px solid #e6cb96;
color: var(--nt-warning);
font-size: var(--nt-text-sm);
font-weight: 600;
}
.nt-live-banner[hidden] { display: none; }
/* ---- conversation list ---- */
.nt-conv-head {
position: sticky;
top: 0;
z-index: 2;
background: var(--wa-panel);
border-bottom: 1px solid var(--wa-panel-line);
padding: var(--nt-space-3) var(--nt-space-4);
}
.nt-conv-search {
display: flex;
gap: var(--nt-space-2);
align-items: center;
}
/* Shared by the inbox conversation search and the contacts/templates filter toolbars. Declared once,
here, because the toolbar section further down used to redeclare the whole block with logical
properties instead of physical ones — two rules for one component, where whichever came last
silently decided the padding. */
.nt-search-field {
position: relative;
flex: 1 1 auto;
min-width: 0;
}
.nt-search-field .bi {
position: absolute;
inset-inline-start: 0.7rem;
top: 50%;
transform: translateY(-50%);
color: var(--nt-text-faint);
pointer-events: none;
}
.nt-search-field .form-control { padding-inline-start: 2.1rem; }
/* WhatsApp's rounded, chrome-coloured search field. */
.nt-conv-search .form-control {
border-radius: var(--nt-radius-pill);
background: var(--nt-surface);
border-color: transparent;
}
.nt-conv-filters {
display: flex;
flex-wrap: wrap;
gap: var(--nt-space-1);
margin-top: var(--nt-space-3);
}
.nt-conv-filter {
padding: 0.15rem 0.7rem;
border-radius: var(--nt-radius-pill);
border: 1px solid transparent;
background: var(--nt-surface);
color: var(--nt-text-muted);
font-size: var(--nt-text-sm);
font-weight: 600;
text-decoration: none;
}
.nt-conv-filter:hover { color: var(--wa-accent-strong); }
.nt-conv-filter.is-active {
background: #d9f2ea;
color: var(--wa-accent-strong);
}
.nt-conv-list {
list-style: none;
margin: 0;
padding: 0;
}
.nt-conv-item {
display: flex;
gap: var(--nt-space-3);
padding: var(--nt-space-3) var(--nt-space-4);
border-bottom: 1px solid #f0f0f0;
text-decoration: none;
color: inherit;
transition: background-color 0.12s ease;
}
.nt-conv-item:hover { background: var(--nt-surface-2); }
.nt-conv-item.is-selected { background: #f0f2f5; }
/* "Awaiting reply" emphasis: weight plus a labelled pill, never colour alone. */
.nt-conv-item.is-awaiting .nt-conv-name,
.nt-conv-item.is-awaiting .nt-conv-preview { font-weight: 650; color: var(--nt-text); }
/* Unread (a genuinely new message not yet opened): the strongest emphasis — fully bold name and
preview, darkened — that drops back to normal the moment the thread is read (§13). */
.nt-conv-item.is-unread .nt-conv-name,
.nt-conv-item.is-unread .nt-conv-preview {
font-weight: 700;
color: var(--nt-text);
}
.nt-conv-item.is-unread .nt-conv-time { color: var(--wa-accent-strong); font-weight: 700; }
/* The small "New" capsule, WhatsApp's green. Sits among the row's meta pills but reads louder. */
.nt-conv-new {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
padding: 0.05rem 0.45rem;
border-radius: var(--nt-radius-pill);
background: var(--wa-accent, #00a884);
color: #ffffff;
font-size: var(--nt-text-xs);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.02em;
}
.nt-conv-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 2.9rem;
height: 2.9rem;
border-radius: var(--nt-radius-pill);
/* The positioning context for the channel mark and the profile image that
sit over this disc (see .nt-chan / .nt-conv-avatar-img). */
position: relative;
/* WhatsApp's placeholder avatar is a soft grey disc with a lighter glyph. */
background: #dfe5e7;
color: #8696a0;
font-weight: 700;
font-size: var(--nt-text-base);
}
.nt-conv-avatar-lg { width: 2.6rem; height: 2.6rem; }
.nt-conv-body {
display: block;
min-width: 0;
flex: 1 1 auto;
align-self: center;
}
.nt-conv-top {
display: flex;
align-items: baseline;
gap: var(--nt-space-2);
}
.nt-conv-name {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--nt-text-base);
font-weight: 600;
color: #111b21;
}
.nt-conv-time {
flex: 0 0 auto;
font-size: var(--nt-text-xs);
color: var(--nt-text-muted);
}
.nt-conv-item.is-awaiting .nt-conv-time { color: var(--wa-accent-strong); font-weight: 600; }
.nt-conv-preview {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--nt-text-muted);
font-size: var(--nt-text-sm);
margin-top: 0.1rem;
}
/* The row's status pills. Kept to a single, non-wrapping line and shrunk hard so more conversations
fit on screen — the pills are a glance, not the content. Anything that overflows is clipped rather
than pushing the row taller. */
.nt-conv-meta {
display: flex;
flex-wrap: nowrap;
gap: 0.25rem;
margin-top: 0.35rem;
overflow: hidden;
}
.nt-conv-meta .nt-pill {
flex: 0 1 auto;
min-width: 0;
padding: 0.02rem 0.4rem;
font-size: 0.6875rem;
font-weight: 600;
line-height: 1.45;
gap: 0.15rem;
overflow: hidden;
text-overflow: ellipsis;
}
.nt-conv-meta .nt-pill .bi { font-size: 0.7rem; flex: 0 0 auto; }
/* The assigned-agent pill can carry a long name; it may ellipsize while the fixed-width status pills
(window, awaiting) stay whole. */
.nt-conv-meta .nt-pill-neutral { min-width: 0; }
.nt-conv-meta .nt-pill-success,
.nt-conv-meta .nt-pill-warning,
.nt-conv-meta .nt-pill-info { flex: 0 0 auto; }
/* A team row somebody is waiting on. A tint rather than a colour on the text, so the row still reads
normally and the emphasis survives both themes. */
.nt-dash-team-attention {
background: color-mix(in srgb, var(--wa-accent-strong) 7%, transparent);
}
/* The admin's assignee selector, sharing the search row. Allowed to shrink so a long member name
never pushes the Search button off the pane. The number selector shares the same shape. */
.nt-conv-assignee,
.nt-conv-number {
flex: 1 1 8rem;
min-width: 0;
max-width: 12rem;
}
/* The number pill carries a full display number; like the assigned-agent pill it may ellipsize
rather than push the fixed-width status pills around. */
.nt-conv-meta .nt-conv-number-pill { min-width: 0; }
/* The thread header's "via " note — quieter than the contact's own number so the
two numbers on one line cannot be mistaken for each other. */
.nt-thread-via {
color: var(--nt-text-muted);
font-size: var(--nt-text-xs);
}
/* Phones. Search box, member picker and button on one row is a desktop shape: at 375px it leaves the
search field 162px (the placeholder truncates mid-word) and the picker 101px (a member's name
clips mid-word), and the row reads as three mismatched controls because a default-size input is
41px tall next to a 33px small button. So the search box takes a row of its own and the picker and
button share the next, stretched to one height.
The filter chips become a scrolling strip rather than wrapping: with "Mine" there are five of them,
which fit at 375px and wrap onto a second row just below it — pushing the conversation list down by
a whole row on the narrowest phones. The strip bleeds to the panel edges so a half-scrolled chip is
cut at the screen edge rather than floating inside the padding, and the taps grow to a size a thumb
can actually hit. */
@media (max-width: 575.98px) {
.nt-conv-search {
flex-wrap: wrap;
align-items: stretch;
}
.nt-search-field { flex: 1 0 100%; }
/* Basis 0, not auto: wrapping is decided on base sizes, and a picker whose base is the width of
its longest member name pushes the button onto a third row. From zero it simply takes whatever
the button leaves. */
.nt-conv-assignee,
.nt-conv-number {
flex: 1 1 0;
max-width: none;
}
.nt-conv-search .btn { flex: 0 0 auto; }
.nt-conv-filters {
flex-wrap: nowrap;
overflow-x: auto;
margin-inline: calc(var(--nt-space-4) * -1);
padding-inline: var(--nt-space-4);
/* The strip is scrolled by thumb, and a scrollbar over 27px-tall chips only eats them. */
scrollbar-width: none;
}
.nt-conv-filters::-webkit-scrollbar { display: none; }
.nt-conv-filter {
flex: 0 0 auto;
padding: 0.35rem 0.85rem;
}
}
/* ---- search results: "Chats" / "Messages" ----------------------------------------------------
Only rendered while a term is being searched. Sticky so the heading stays overhead as the agent
scrolls a long result set and never has to guess which half they are looking at. */
.nt-conv-section {
position: sticky;
top: 0;
z-index: 2;
display: flex;
align-items: center;
gap: 0.4rem;
margin: 0;
padding: var(--nt-space-2) var(--nt-space-4);
background: var(--nt-surface-2, var(--nt-surface));
border-bottom: 1px solid var(--nt-border);
font-size: var(--nt-text-xs);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--nt-text-muted);
}
.nt-conv-section-count {
font-weight: 600;
letter-spacing: 0;
color: var(--nt-text-muted);
opacity: 0.75;
}
/* A message hit is about the words, not the thread's state — no pills, and the snippet is allowed
the room the status row would otherwise take. */
.nt-conv-hit .nt-conv-preview { white-space: nowrap; }
.nt-conv-hit-who {
font-weight: 600;
color: var(--nt-text-muted);
margin-right: 0.2rem;
}
/* The matched run. 's default is a flat yellow that fights every surface it lands on and is
unreadable in dark mode; this tints the accent instead and keeps the text colour inherited. */
.nt-conv-hit-mark {
background: color-mix(in srgb, var(--wa-accent-strong) 22%, transparent);
color: inherit;
padding: 0 0.1em;
border-radius: 0.15rem;
font-weight: 650;
}
.nt-conv-state {
text-align: center;
padding: var(--nt-space-6) var(--nt-space-4);
}
.nt-conv-more {
padding: var(--nt-space-3) var(--nt-space-4);
font-size: var(--nt-text-sm);
color: var(--nt-text-muted);
margin: 0;
}
/* The infinite-scroll sentinel row: invisible until its spinner shows during a page fetch. */
.nt-conv-loadmore {
display: flex;
justify-content: center;
padding: 0.5rem 0;
min-height: 0.25rem;
color: var(--nt-text-muted);
}
/* ---- list loading skeleton (shown by inbox.js while a pane is fetched) ---- */
.nt-skeleton-list { list-style: none; margin: 0; padding: 0; }
.nt-skel-row {
display: flex;
gap: var(--nt-space-3);
align-items: center;
padding: var(--nt-space-3) var(--nt-space-4);
border-bottom: 1px solid #f0f0f0;
}
.nt-skel-avatar {
flex: 0 0 auto;
width: 2.9rem;
height: 2.9rem;
border-radius: var(--nt-radius-pill);
}
.nt-skel-lines { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.5rem; }
.nt-skel-line { height: 0.7rem; border-radius: var(--nt-radius-pill); }
.nt-skel-line.is-short { width: 40%; }
.nt-skel-line.is-mid { width: 75%; }
/* The shimmer itself. One keyframe, reused by every skeleton shape in the inbox. Named apart from
the generic nt-shimmer above: @keyframes share one global namespace, and a second definition
under the same name silently replaces the first for EVERY user of it — the same last-one-wins
trap StylesheetCollisionTests guards against for classes. */
.nt-skel {
background: linear-gradient(100deg, #ececec 30%, #f5f5f5 50%, #ececec 70%);
background-size: 200% 100%;
animation: nt-skel-shimmer 1.3s ease-in-out infinite;
}
@keyframes nt-skel-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.nt-skel { animation: none; }
}
/* ---- thread ---- */
.nt-thread {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
.nt-thread-placeholder {
margin: auto;
max-width: 26rem;
text-align: center;
padding: var(--nt-space-6);
}
.nt-thread-head {
display: flex;
align-items: center;
/* nowrap, never wrap: the name truncates (min-width:0 + ellipsis below) long before it would push
the window pill, the Details pill or the menu onto a second row. A wrapped header grew a row
taller than the details column's header beside it, so their hairlines no longer lined up — that
was the "not aligned" the screenshot shows. One row keeps the three column headers on one band. */
flex-wrap: nowrap;
/* Shared height with the details column header (.nt-controls-head) so the two right-hand columns'
bottom hairlines sit on exactly the same line. */
min-height: var(--nt-inbox-head-height);
gap: var(--nt-space-3);
padding: var(--nt-space-2) var(--nt-space-4);
background: var(--wa-panel);
border-bottom: 1px solid var(--wa-panel-line);
}
.nt-thread-back {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: var(--nt-radius-pill);
color: var(--nt-text-muted);
text-decoration: none;
font-size: 1.2rem;
}
.nt-thread-back:hover { background: rgba(0, 0, 0, 0.05); color: var(--nt-text); }
/* Takes the slack and gives it back first: everything else in the header holds its natural size, so
the name is what truncates when the row runs short — not the window pill or the Details pill. */
.nt-thread-who { flex: 1 1 auto; min-width: 0; margin-right: auto; }
/* Avatar, window pill, Details pill and the menu never shrink — they keep their shape on a phone. */
.nt-thread-head > .nt-conv-avatar,
.nt-thread-head > [data-nt-window],
.nt-thread-head > .nt-controls-toggle,
.nt-thread-head > .nt-thread-menu,
.nt-thread-head > .nt-thread-back { flex: 0 0 auto; }
.nt-thread-name {
font-size: var(--nt-text-md);
font-weight: 650;
margin: 0;
color: #111b21;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nt-thread-sub {
margin: 0;
font-size: var(--nt-text-xs);
color: var(--nt-text-muted);
/* One line: on a phone the number and the "via" line wrapped to three and spilled out of the
header. The full text stays available to screen readers and on the details panel. */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* The assign control is a disclosure so it costs one line, not three. On a 375px phone the select
and its button used to wrap onto rows of their own and the header ate a third of the pane. */
.nt-thread-assign { position: relative; }
.nt-thread-assign-check {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.nt-thread-assign-check:focus-visible + .nt-thread-assign-toggle {
outline: 2px solid var(--nt-brand);
outline-offset: 2px;
}
.nt-thread-assign-toggle {
display: inline-flex;
align-items: center;
gap: var(--nt-space-2);
max-width: 11rem;
padding: 0.3rem 0.6rem;
border: 1px solid var(--nt-border);
border-radius: var(--nt-radius-sm);
background: var(--nt-surface);
font-size: var(--nt-text-xs);
white-space: nowrap;
overflow: hidden;
cursor: pointer;
list-style: none;
}
.nt-thread-assign-toggle::-webkit-details-marker { display: none; }
.nt-thread-assign-toggle span {
overflow: hidden;
text-overflow: ellipsis;
}
.nt-thread-assign-form {
display: none;
position: absolute;
right: 0;
z-index: 6;
gap: var(--nt-space-2);
align-items: center;
margin-top: var(--nt-space-2);
padding: var(--nt-space-3);
background: var(--nt-surface);
border: 1px solid var(--nt-border);
border-radius: var(--nt-radius-sm);
box-shadow: var(--nt-shadow-md, 0 8px 24px rgb(0 0 0 / 12%));
}
.nt-thread-assign-check:checked ~ .nt-thread-assign-form { display: flex; }
.nt-thread-assign-form .form-select { min-width: 9rem; }
/* Desktop has the room: no disclosure, the control simply sits in the header. */
@media (min-width: 992px) {
.nt-thread-assign-toggle { display: none; }
.nt-thread-assign-form {
display: flex;
position: static;
margin-top: 0;
padding: 0;
border: 0;
box-shadow: none;
background: transparent;
}
}
.nt-thread-alert { margin: var(--nt-space-3) var(--nt-space-4) 0; }
/* Phone: the header is one line. It used to wrap the name, the window pill, the select and the
Assign button onto rows of their own and take a third of the pane, leaving barely three bubbles
of conversation on a 375x750 screen. */
@media (max-width: 991.98px) {
.nt-thread-head {
flex-wrap: nowrap;
gap: var(--nt-space-2);
padding: var(--nt-space-2) var(--nt-space-3);
}
.nt-thread-head .nt-pill {
flex: 0 0 auto;
max-width: 8rem;
overflow: hidden;
white-space: nowrap;
}
/* Outside the window the composer carries an explanation, a template picker, a price and a
balance. On a phone that stack can grow taller than the conversation it sits under, so it is
capped and scrolls within itself — the messages keep the larger half of the screen.
flex-shrink: 0 matters as much as the cap: overflow-y: auto strips flexbox's automatic
minimum-size protection, so on any thread tall enough to overflow the screen, the shrink
algorithm would otherwise compress this flex item (and the send button inside it) right along
with the scrolling message list — down past its own content size, clipping the button off the
bottom instead of just capping the composer's growth. */
.nt-composer {
max-height: 45%;
overflow-y: auto;
flex-shrink: 0;
}
/* The empty locked box is decorative: the notice above it already says why writing is closed.
The readonly one carrying a returned draft is not, and stays. */
.nt-composer-locked:disabled { display: none; }
}
/* A narrow phone: the contact's name is what the header is for. The avatar goes (the back arrow and
the name carry the identity) and the window pill is capped, so the name is not squeezed to a
stub between them. */
@media (max-width: 480px) {
.nt-thread-head > .nt-conv-avatar { display: none; }
.nt-thread-head .nt-pill { max-width: 6.25rem; padding-inline: 0.45rem; text-overflow: ellipsis; }
}
/* The chat wallpaper: WhatsApp's beige with a faint doodle texture, inlined as a data URI so it
needs no extra request and no external host. */
.nt-thread-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: var(--nt-space-4);
display: flex;
flex-direction: column;
background-color: var(--wa-wallpaper);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%23000000' fill-opacity='0.03'%3E%3Cpath d='M14 16c0-2 2-4 4-4s4 2 4 4-2 4-4 4-4-2-4-4zm40 30c3 0 5 2 5 5s-2 5-5 5-5-2-5-5 2-5 5-5zM30 52c0-1 1-2 2-2s2 1 2 2-1 2-2 2-2-1-2-2zM62 14c0-1 1-2 2-2s2 1 2 2-1 2-2 2-2-1-2-2z'/%3E%3C/g%3E%3C/svg%3E");
}
.nt-bubbles {
list-style: none;
margin: auto auto 0;
padding: 0;
width: 100%;
max-width: 60rem;
}
.nt-day-sep {
display: flex;
align-items: center;
justify-content: center;
margin: var(--nt-space-4) 0 var(--nt-space-3);
}
/* WhatsApp's centred date chip: a soft off-white pill with a small shadow. */
.nt-day-sep span {
background: #ffffff;
border-radius: var(--nt-radius-sm);
padding: 0.25rem 0.8rem;
font-size: var(--nt-text-xs);
font-weight: 500;
color: #54656f;
box-shadow: var(--wa-bubble-shadow);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.nt-bubble-row {
display: flex;
margin-bottom: 0.35rem;
padding: 0 0.25rem;
}
.nt-bubble-row.is-out { justify-content: flex-end; }
.nt-bubble-row.is-in { justify-content: flex-start; }
/* The bubble body, plus the little tail via a positioned pseudo-element — the detail that makes it
read as WhatsApp rather than "a chat app". */
.nt-bubble {
position: relative;
max-width: min(80%, 32rem);
background: var(--wa-in-bubble);
border-radius: 0.5rem;
border-top-left-radius: 0;
padding: 0.375rem 0.5rem 0.5rem 0.6rem;
box-shadow: var(--wa-bubble-shadow);
font-size: var(--nt-text-base);
color: #111b21;
}
.nt-bubble::before {
content: "";
position: absolute;
top: 0;
width: 0.6rem;
height: 0.6rem;
background: inherit;
}
/* Inbound tail on the top-left. */
.nt-bubble-row.is-in .nt-bubble::before {
left: -0.55rem;
border-radius: 0 0 0 0;
clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.nt-bubble-row.is-out .nt-bubble {
background: var(--wa-out-bubble);
border-radius: 0.5rem;
border-top-right-radius: 0;
}
/* Outbound tail on the top-right. */
.nt-bubble-row.is-out .nt-bubble::before {
right: -0.55rem;
clip-path: polygon(0 0, 100% 0, 0 100%);
}
.nt-bubble.is-failed {
background: var(--nt-danger-tint);
}
.nt-bubble.is-failed::before { background: var(--nt-danger-tint); }
.nt-bubble-kind {
display: flex;
align-items: center;
gap: var(--nt-space-1);
margin: 0 0 var(--nt-space-1);
font-size: var(--nt-text-xs);
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--wa-accent-strong);
}
/* Sender line breaks are preserved by CSS, not by turning text into markup. The inline emphasis
marks (*bold*, _italic_, ~strike~, ```mono```) become real /// via
WhatsAppText, which encodes first — so this styling never colours a sender-authored tag. */
.nt-bubble-text {
margin: 0;
white-space: pre-wrap;
overflow-wrap: anywhere;
line-height: 1.35;
}
.nt-bubble-text strong { font-weight: 700; }
.nt-bubble-text em { font-style: italic; }
.nt-bubble-text del { text-decoration: line-through; }
.nt-bubble-text code {
font-family: var(--nt-font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace);
font-size: 0.9em;
background: rgba(0, 0, 0, 0.05);
padding: 0.05rem 0.25rem;
border-radius: 4px;
}
/* ---- quoted reply: the message a reply points at, shown above it (WhatsApp-style) ---- */
.nt-quote {
display: flex;
flex-direction: column;
width: 100%;
text-align: left;
margin: 0 0 0.3rem;
padding: 0.25rem 0.45rem;
border: 0;
border-radius: 0.35rem;
background: rgba(0, 0, 0, 0.05);
box-shadow: inset 3px 0 0 var(--wa-accent-strong);
cursor: pointer;
overflow: hidden;
}
.nt-bubble-row.is-out .nt-quote { background: rgba(0, 0, 0, 0.06); }
.nt-quote:hover { background: rgba(0, 0, 0, 0.09); }
.nt-quote-author {
font-size: var(--nt-text-xs);
font-weight: 700;
color: var(--wa-accent-strong);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nt-quote-text {
font-size: 0.82rem;
color: var(--nt-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ---- per-bubble reply affordance, revealed on hover/focus, sitting just toward the centre ---- */
.nt-bubble-reply {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 1.6rem;
height: 1.6rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: var(--nt-surface);
color: var(--nt-text-muted);
box-shadow: var(--wa-bubble-shadow);
font-size: 0.8rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.12s ease;
z-index: 2;
}
.nt-bubble-row.is-in .nt-bubble-reply { right: -2.1rem; }
.nt-bubble-row.is-out .nt-bubble-reply { left: -2.1rem; }
/* Triggered on the whole row, not just the bubble: the button sits in the gap beside the bubble, so
keying off .nt-bubble:hover left a dead strip between them where the cursor was over neither element
and the button vanished mid-reach. The row spans that gap, so the affordance stays put all the way
to the click. */
.nt-bubble-row:hover .nt-bubble-reply,
.nt-bubble-row:focus-within .nt-bubble-reply,
.nt-bubble-reply:focus-visible {
opacity: 1;
pointer-events: auto;
}
.nt-bubble-reply:hover { color: var(--wa-accent-strong); }
/* No hover on touch: keep the affordance faintly visible so it is still reachable. */
@media (hover: none) {
.nt-bubble-reply { opacity: 0.5; pointer-events: auto; }
}
/* Flash the original when a quoted block is tapped, so the jump is legible. */
.nt-bubble-row.is-quote-jumped .nt-bubble { animation: nt-quote-flash 1.4s ease-out; }
@keyframes nt-quote-flash {
0%, 100% { box-shadow: var(--wa-bubble-shadow); }
18% { box-shadow: 0 0 0 3px var(--wa-accent-strong); }
}
@media (prefers-reduced-motion: reduce) {
.nt-bubble-row.is-quote-jumped .nt-bubble { animation: none; }
}
/* ---- composer reply-target strip ---- */
.nt-reply-strip {
display: flex;
align-items: stretch;
gap: 0.5rem;
margin-bottom: 6px;
padding: 6px 8px;
background: var(--nt-surface);
border-radius: 12px;
box-shadow: 0 1px 1px rgba(11, 20, 26, 0.06);
font-size: max(13px, var(--nt-text-sm));
animation: nt-composer-rise 0.2s ease-out;
}
.nt-reply-strip-bar {
flex: 0 0 3px;
border-radius: 3px;
background: var(--wa-accent-strong);
}
.nt-reply-strip-body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.nt-reply-strip-author {
font-size: var(--nt-text-xs);
font-weight: 700;
color: var(--wa-accent-strong);
}
.nt-reply-strip-text {
font-size: 0.82rem;
color: var(--nt-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nt-reply-strip-close {
flex: 0 0 auto;
border: 0;
background: transparent;
color: var(--nt-text-muted);
cursor: pointer;
padding: 0 0.25rem;
}
.nt-reply-strip-close:hover { color: var(--nt-danger); }
/* ---- media tile: an attachment WhatsApp would show inline; here, a labelled stand-in ---- */
.nt-media-tile {
display: flex;
align-items: center;
gap: var(--nt-space-3);
padding: var(--nt-space-2) var(--nt-space-3);
margin-bottom: var(--nt-space-1);
background: rgba(0, 0, 0, 0.04);
border-radius: var(--nt-radius-sm);
}
.nt-media-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 2.5rem;
height: 2.5rem;
border-radius: var(--nt-radius-sm);
background: var(--wa-accent);
color: #ffffff;
font-size: 1.2rem;
}
.nt-bubble-row.is-in .nt-media-icon { background: #8696a0; }
.nt-media-meta { display: flex; flex-direction: column; min-width: 0; }
.nt-media-kind {
font-size: var(--nt-text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--nt-text-muted);
}
.nt-media-name {
font-size: var(--nt-text-sm);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 16rem;
}
/* ---- openable / downloadable media: real bytes proxied from Meta on demand (§6.6) ---- */
/* Image and video share a figure so the download button can float over the top-right corner. */
.nt-media-figure {
position: relative;
margin: 0 0 var(--nt-space-1);
max-width: 17rem;
}
.nt-media-open { display: block; line-height: 0; }
.nt-media-img,
.nt-media-video {
display: block;
width: 100%;
max-width: 17rem;
max-height: 20rem;
border-radius: var(--nt-radius-sm);
object-fit: cover;
background: rgba(0, 0, 0, 0.04);
}
.nt-media-video { object-fit: contain; }
.nt-media-img { cursor: zoom-in; }
/* The little round download button that overlays image/video, and sits inline for audio. */
.nt-media-dl {
position: absolute;
top: 0.35rem;
right: 0.35rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.9rem;
height: 1.9rem;
border-radius: 50%;
background: rgba(0, 0, 0, 0.55);
color: #ffffff;
font-size: 0.95rem;
text-decoration: none;
transition: background-color 0.12s ease;
}
.nt-media-dl:hover,
.nt-media-dl:focus-visible {
background: rgba(0, 0, 0, 0.75);
color: #ffffff;
}
/* Voice notes: the native audio control with the download button tucked alongside it. */
.nt-media-audio {
display: flex;
align-items: center;
gap: var(--nt-space-2);
margin-bottom: var(--nt-space-1);
}
.nt-media-audio-el {
height: 2.25rem;
max-width: 15rem;
}
.nt-media-audio .nt-media-dl {
position: static;
flex: 0 0 auto;
background: var(--wa-accent);
}
.nt-bubble-row.is-in .nt-media-audio .nt-media-dl { background: #8696a0; }
/* A document tile is itself the download link: clickable, with a trailing download glyph. */
a.nt-media-file {
text-decoration: none;
color: inherit;
cursor: pointer;
transition: background-color 0.12s ease;
}
a.nt-media-file:hover,
a.nt-media-file:focus-visible { background: rgba(0, 0, 0, 0.08); }
.nt-media-file .nt-media-name { color: inherit; }
.nt-media-dl-inline {
display: inline-flex;
align-items: center;
margin-left: auto;
padding-left: var(--nt-space-2);
color: var(--nt-text-muted);
font-size: 1.1rem;
}
/* Time + tick, tucked to the bottom-right of the bubble the way WhatsApp does it. */
.nt-bubble-foot {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.25rem;
margin-top: 0.1rem;
float: right;
margin-left: var(--nt-space-3);
font-size: 0.6875rem;
color: var(--wa-meta);
line-height: 1;
}
.nt-bubble-foot time { white-space: nowrap; }
.nt-bubble-error {
clear: both;
margin: var(--nt-space-2) 0 0;
font-size: var(--nt-text-sm);
color: var(--nt-danger);
}
/* Delivery ticks. The word is always present in the accessible name; colour is the redundant signal.
The tick label text itself is visually hidden on the bubble (WhatsApp shows only the glyph), but
it stays in the DOM as the accessible name a screen reader announces. */
.nt-tick {
display: inline-flex;
align-items: center;
}
/* The tick is a button (it opens the delivery-timeline popup), so strip the native chrome back to
the plain glyph it used to be and make it clearly tappable. */
button.nt-tick {
padding: 0;
border: 0;
background: none;
font: inherit;
line-height: 1;
cursor: pointer;
border-radius: 0.25rem;
}
button.nt-tick:hover { opacity: 0.75; }
button.nt-tick:focus-visible {
outline: 2px solid var(--nt-focus, currentColor);
outline-offset: 2px;
}
.nt-tick .bi { font-size: 0.95rem; }
.nt-tick-label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.nt-tick-plain { color: var(--wa-tick-plain); }
.nt-tick-read { color: var(--wa-tick-read); }
.nt-tick-failed { color: var(--nt-danger); }
/* ---- delivery-timeline popup: opened by clicking a message's tick (§13) ---- */
.nt-tick-modal {
position: fixed;
inset: 0;
z-index: 1090;
display: flex;
align-items: center;
justify-content: center;
padding: var(--nt-space-4);
}
.nt-tick-modal[hidden] { display: none; }
.nt-tick-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.35);
}
.nt-tick-modal-panel {
position: relative;
width: min(22rem, 100%);
background: var(--nt-surface);
color: var(--nt-text);
border: 1px solid var(--nt-border);
border-radius: var(--nt-radius-lg);
box-shadow: var(--nt-shadow-lg);
padding: var(--nt-space-4);
}
.nt-tick-modal-title {
margin: 0 0 var(--nt-space-3);
font-size: var(--nt-text-md);
}
.nt-tick-timeline {
list-style: none;
margin: 0;
padding: 0;
}
.nt-tick-step {
display: flex;
align-items: center;
gap: var(--nt-space-3);
padding: var(--nt-space-2) 0;
}
.nt-tick-step + .nt-tick-step { border-top: 1px solid var(--nt-border); }
.nt-tick-step-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
flex: 0 0 auto;
border-radius: var(--nt-radius-pill);
background: var(--nt-surface-2);
color: var(--nt-text-muted);
}
/* A step that has actually happened reads in the "read" tone, so the timeline shows progress at a glance. */
.nt-tick-step.is-done .nt-tick-step-icon {
background: color-mix(in srgb, var(--wa-tick-read) 16%, transparent);
color: var(--wa-tick-read);
}
.nt-tick-step-body {
display: flex;
flex-direction: column;
line-height: 1.3;
}
.nt-tick-step-name { font-weight: 600; }
.nt-tick-step-time {
font-size: var(--nt-text-sm);
color: var(--nt-text-muted);
}
.nt-tick-modal-foot {
margin-top: var(--nt-space-4);
display: flex;
justify-content: flex-end;
}
/* ---- edit-contact modal: opened from the pencil in the details panel (§9) ---- */
.nt-contact-edit-btn { margin-top: var(--nt-space-2); }
.nt-contact-modal {
position: fixed;
inset: 0;
z-index: 1090;
display: flex;
align-items: center;
justify-content: center;
padding: var(--nt-space-4);
}
.nt-contact-modal[hidden] { display: none; }
.nt-contact-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.35);
}
.nt-contact-modal-panel {
position: relative;
width: min(26rem, 100%);
max-height: min(90vh, 44rem);
display: flex;
flex-direction: column;
background: var(--nt-surface);
color: var(--nt-text);
border: 1px solid var(--nt-border);
border-radius: var(--nt-radius-lg);
box-shadow: var(--nt-shadow-lg);
overflow: hidden;
}
.nt-contact-modal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--nt-space-2);
padding: var(--nt-space-3) var(--nt-space-4);
border-bottom: 1px solid var(--nt-border);
}
.nt-contact-modal-title { margin: 0; font-size: var(--nt-text-md); }
/* The one scrolling region, so a long tag/field list never pushes the footer off-screen. */
.nt-contact-modal-body {
padding: var(--nt-space-4);
overflow-y: auto;
}
.nt-contact-modal-section {
margin-top: var(--nt-space-4);
padding-top: var(--nt-space-4);
border-top: 1px solid var(--nt-border);
}
.nt-contact-form .nt-field + .nt-field { margin-top: var(--nt-space-3); }
.nt-contact-form-actions { margin-top: var(--nt-space-4); }
.nt-contact-attrs { margin: 0; }
.nt-contact-attr {
display: flex;
justify-content: space-between;
gap: var(--nt-space-3);
padding: var(--nt-space-1) 0;
}
.nt-contact-attr dt { font-weight: 600; color: var(--nt-text-muted); margin: 0; }
.nt-contact-attr dd { margin: 0; text-align: right; word-break: break-word; }
.nt-contact-modal-foot {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: var(--nt-space-2);
padding: var(--nt-space-3) var(--nt-space-4);
border-top: 1px solid var(--nt-border);
}
/* ---- Contacts-page CRUD modals (view/edit/delete/create + tag manager, §9) ---- */
/* Lock the page behind an open modal so a phone doesn't scroll the list under it. */
html.nt-modal-open,
html.nt-modal-open body { overflow: hidden; }
/* Centred spinner while a modal body is fetched. */
.nt-modal-loading {
display: flex;
align-items: center;
justify-content: center;
min-height: 8rem;
color: var(--nt-text-muted);
}
/* Modal head: avatar + name + phone. */
.nt-contact-modal-who {
display: flex;
align-items: center;
gap: var(--nt-space-3);
min-width: 0;
}
.nt-contact-modal-sub {
font-size: var(--nt-text-sm);
color: var(--nt-text-muted);
overflow-wrap: anywhere;
}
/* A compact key/value grid for the at-a-glance facts at the top of the card. */
.nt-kv-tight {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--nt-space-1) var(--nt-space-3);
margin: 0;
}
.nt-kv-tight > div {
display: contents;
}
.nt-kv-tight dt {
font-weight: 600;
color: var(--nt-text-muted);
margin: 0;
}
.nt-kv-tight dd {
margin: 0;
text-align: right;
overflow-wrap: anywhere;
}
/* The small "×" that removes a custom field, sitting after its value. */
.nt-contact-attr dd {
display: inline-flex;
align-items: center;
gap: var(--nt-space-2);
}
.nt-attr-remove {
border: 0;
background: none;
padding: 0;
line-height: 1;
color: var(--nt-text-muted);
cursor: pointer;
}
.nt-attr-remove:hover { color: var(--nt-danger); }
/* Conversation links inside the card. */
.nt-simple-list {
list-style: none;
margin: 0;
padding: 0;
}
.nt-simple-list li + li { margin-top: var(--nt-space-1); }
/* Footer: a flexible spacer pushes the "Open full page" link away from the actions. */
.nt-spacer { flex: 1 1 auto; }
/* ---- tag manager ---- */
.nt-tag-create {
display: flex;
gap: var(--nt-space-2);
align-items: center;
}
.nt-tag-create input:not([type=color]) { flex: 1 1 auto; min-width: 0; }
.nt-tag-manage-list {
list-style: none;
margin: 0;
padding: 0;
}
.nt-tag-manage-row {
display: flex;
align-items: center;
gap: var(--nt-space-2);
padding: var(--nt-space-2) 0;
flex-wrap: wrap;
}
.nt-tag-manage-row + .nt-tag-manage-row { border-top: 1px solid var(--nt-border); }
.nt-tag-manage-edit {
display: flex;
align-items: center;
gap: var(--nt-space-2);
flex: 1 1 12rem;
min-width: 0;
}
.nt-tag-manage-edit input:not([type=color]) { flex: 1 1 auto; min-width: 0; }
.nt-tag-manage-count {
font-size: var(--nt-text-sm);
margin-inline-start: auto;
white-space: nowrap;
}
/* Bootstrap's color input is oversized by default; keep it a neat swatch beside the text field. */
.form-control-color { max-width: 2.75rem; padding: 0.15rem; }
/* The shared confirm dialog (used by a delete inside a modal) must sit ABOVE these CRUD modals
(z-index 1090), or a "Delete this contact?" prompt would open behind the very modal that raised it. */
.nt-confirm-modal.modal { z-index: 1130; }
/* ---- typing indicator: WhatsApp's three bouncing dots in a small inbound bubble ---- */
.nt-typing {
display: flex;
align-items: center;
margin: 0;
padding: 0 var(--nt-space-4) var(--nt-space-2);
}
.nt-typing[hidden] { display: none; }
.nt-typing-bubble {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.6rem 0.75rem;
background: var(--wa-in-bubble);
border-radius: 0.6rem;
border-top-left-radius: 0;
box-shadow: var(--wa-bubble-shadow);
}
.nt-typing-dot {
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: #9aa6ac;
animation: nt-typing-bounce 1.2s infinite ease-in-out;
}
.nt-typing-dot:nth-child(2) { animation-delay: 0.18s; }
.nt-typing-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes nt-typing-bounce {
0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
30% { transform: translateY(-0.35rem); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.nt-typing-dot { animation: none; opacity: 0.7; }
}
/* A freshly arrived / just-sent bubble eases in, so live updates feel alive rather than jumping. */
@keyframes nt-bubble-in {
from { opacity: 0; transform: translateY(0.5rem); }
to { opacity: 1; transform: translateY(0); }
}
.nt-bubble-row.is-fresh .nt-bubble { animation: nt-bubble-in 0.22s ease-out; }
@media (prefers-reduced-motion: reduce) {
.nt-bubble-row.is-fresh .nt-bubble { animation: none; }
}
/* ---- thread loading skeleton (injected by inbox.js during a navigation) ---- */
.nt-thread-skeleton {
flex: 1 1 auto;
min-height: 0;
padding: var(--nt-space-5) var(--nt-space-4);
background-color: var(--wa-wallpaper);
display: flex;
flex-direction: column;
gap: var(--nt-space-3);
}
.nt-skel-bubble {
height: 2.4rem;
max-width: 60%;
border-radius: 0.5rem;
align-self: flex-start;
background: #ffffff;
box-shadow: var(--wa-bubble-shadow);
opacity: 0.7;
}
.nt-skel-bubble.is-out { align-self: flex-end; background: var(--wa-out-bubble); }
.nt-skel-bubble.is-wide { max-width: 72%; height: 3.4rem; }
.nt-skel-bubble.is-narrow { max-width: 35%; }
/* ---- composer ---- */
.nt-composer {
display: flex;
flex-direction: column;
flex-shrink: 0;
background: var(--wa-panel);
border-top: 1px solid var(--wa-panel-line);
/* Pixel floors: the laptop density tier (12px root at 992-1439px) must never shrink the box you
type into below readable and tappable. */
padding: max(8px, var(--nt-space-2)) max(10px, var(--nt-space-3));
/* On a notched iPhone or gesture-nav Android, the composer sat flush against the strip the OS
reserves for its own home/back swipe — a tap on the send button landed on the system gesture
instead of the page. viewport-fit=cover (site layout) lets env() resolve to the real inset;
elsewhere it is 0 and this is a no-op. */
padding-bottom: calc(max(8px, var(--nt-space-2)) + env(safe-area-inset-bottom, 0px));
}
.nt-composer-form { position: relative; }
/* The composer is a flex bar: a pill-shaped input that grows, and a round send button beside it. */
.nt-composer-bar {
display: flex;
align-items: flex-end;
gap: max(6px, var(--nt-space-2));
}
.nt-composer-field {
position: relative;
flex: 1 1 auto;
min-width: 0;
}
.nt-composer-field .form-control {
display: block;
min-height: 44px;
max-height: 160px;
border-radius: 22px;
border: 1px solid transparent;
background: var(--nt-surface);
resize: none;
overflow-y: auto;
padding: 11px 16px;
font-size: max(15px, var(--nt-text-base));
line-height: 1.4;
box-shadow: 0 1px 1px rgba(11, 20, 26, 0.06);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.nt-composer-field .form-control::placeholder {
color: var(--wa-meta);
/* One line: a wrapped placeholder peeked into the one-line box on a narrow phone. */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nt-composer-field .form-control:focus {
border-color: var(--wa-accent);
box-shadow: 0 0 0 3px rgba(0, 168, 132, 0.16);
}
/* The round green send button, with a spinner state for while a post is in flight. */
.nt-send-btn {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
background: var(--wa-accent);
color: #ffffff;
font-size: 18px;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0, 128, 105, 0.3);
transition: background-color 0.15s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 0.2s ease, box-shadow 0.2s ease;
}
.nt-send-btn:hover { background: var(--wa-accent-strong); box-shadow: 0 4px 12px rgba(0, 128, 105, 0.35); }
.nt-send-btn:active { transform: scale(0.9); }
/* Resting while the box is empty; springs up the moment there is something to send. */
.nt-composer-bar:not(.has-text) .nt-send-btn { opacity: 0.55; transform: scale(0.9); box-shadow: none; }
.nt-composer-bar.has-text .nt-send-icon { animation: nt-send-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes nt-send-pop {
0% { transform: translateX(-4px) rotate(-12deg) scale(0.7); opacity: 0; }
100% { transform: none; opacity: 1; }
}
.nt-send-btn:focus-visible {
outline: 2px solid var(--wa-accent-strong);
outline-offset: 2px;
}
.nt-send-icon { display: inline-block; }
.nt-send-spinner {
display: none;
width: 1.15rem;
height: 1.15rem;
border: 2px solid rgba(255, 255, 255, 0.5);
border-top-color: #ffffff;
border-radius: 50%;
animation: nt-spin 0.7s linear infinite;
}
/* While sending: swap the paper-plane for the spinner and lock the button. */
.nt-send-btn.is-sending { pointer-events: none; }
.nt-send-btn.is-sending .nt-send-icon { display: none; }
.nt-send-btn.is-sending .nt-send-spinner { display: inline-block; }
/* ---- media send: the paperclip attach button and the pending-file preview (§6.5) ---- */
/* A round, muted twin of the send button. It is a , so reset its label defaults. */
.nt-attach-btn {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin: 0;
border-radius: 50%;
background: var(--nt-surface);
color: var(--nt-text-muted);
font-size: 19px;
cursor: pointer;
box-shadow: 0 1px 1px rgba(11, 20, 26, 0.06);
transition: background-color 0.15s ease, color 0.15s ease;
}
.nt-attach-btn .bi { transition: transform 0.2s ease; }
.nt-attach-btn:hover .bi { transform: rotate(-20deg); }
.nt-attach-btn:hover,
.nt-attach-btn:focus-within {
background: var(--nt-surface-2, rgba(0, 0, 0, 0.06));
color: var(--nt-text);
}
/* The media form sits first in the composer and holds only a hidden file input until a file is
staged, so it takes no space until its preview card appears (which then replaces the text bar). */
.nt-media-form { margin: 0; }
.nt-media-pending {
display: flex;
flex-direction: column;
gap: max(8px, var(--nt-space-2));
padding: max(10px, var(--nt-space-3));
background: var(--nt-surface);
border-radius: 14px;
box-shadow: 0 2px 10px rgba(11, 20, 26, 0.08);
animation: nt-composer-rise 0.22s ease-out;
}
@keyframes nt-composer-rise {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
.nt-media-pending-info {
display: flex;
align-items: center;
gap: var(--nt-space-3);
min-width: 0;
}
.nt-media-pending-thumb {
flex: 0 0 auto;
width: 3rem;
height: 3rem;
object-fit: cover;
border-radius: var(--nt-radius-sm);
}
.nt-media-pending-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 3rem;
height: 3rem;
border-radius: var(--nt-radius-sm);
background: var(--wa-accent);
color: #ffffff;
font-size: 1.3rem;
}
.nt-media-pending-text {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1 1 auto;
}
.nt-media-pending-name {
font-size: var(--nt-text-sm);
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nt-media-pending-size { font-size: var(--nt-text-xs); }
.nt-media-pending-remove {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--nt-text-muted);
cursor: pointer;
}
.nt-media-pending-remove:hover { background: rgba(0, 0, 0, 0.08); color: var(--nt-text); }
.nt-media-pending-send {
display: flex;
align-items: center;
gap: var(--nt-space-2);
}
.nt-media-pending-send .form-control { flex: 1 1 auto; min-width: 0; }
/* The single Send: shows label normally, a spinner while the POST is in flight, and locks (disabled)
so a second click cannot fire a duplicate send before the page redirects. */
.nt-media-pending-btn { flex: 0 0 auto; min-width: 5.25rem; }
.nt-media-pending-btn:disabled { opacity: 0.75; cursor: default; }
.nt-media-send-face { display: inline-flex; align-items: center; }
.nt-media-send-spinner {
display: inline-block;
width: 1rem;
height: 1rem;
border: 2px solid rgba(255, 255, 255, 0.5);
border-top-color: #ffffff;
border-radius: 50%;
animation: nt-spin 0.7s linear infinite;
}
.nt-media-pending-error {
margin: 0;
color: var(--nt-danger, #dc3545);
font-size: var(--nt-text-sm);
}
@keyframes nt-spin { to { transform: rotate(360deg); } }
/* Touch screens (iPad, phones, touch laptops): Safari zooms the whole page when a field under 16px is
focused, which is what threw the composer off-screen on an iPad in landscape, where the density
tier had the box at 11px. 16px stops it, and the header controls grow to finger size. */
@media (pointer: coarse) {
.nt-composer-field .form-control,
.nt-media-pending-send .form-control,
.nt-template-row .form-select { font-size: 16px; }
.nt-controls-toggle,
.nt-thread-menu-btn,
.nt-thread-back { min-width: 40px; min-height: 40px; }
.nt-media-pending-remove { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
.nt-send-btn,
.nt-attach-btn .bi { transition: none; }
.nt-composer-bar.has-text .nt-send-icon,
.nt-media-pending,
.nt-reply-strip,
.nt-qr-list { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
.nt-send-spinner { animation-duration: 1.4s; }
}
.nt-composer-locked {
background: var(--nt-surface);
margin-top: var(--nt-space-3);
border-radius: var(--nt-radius);
}
.nt-composer-warn {
display: flex;
align-items: flex-start;
gap: var(--nt-space-2);
margin: var(--nt-space-2) 0 0;
font-size: var(--nt-text-sm);
color: var(--nt-warning);
}
.nt-qr-list {
position: absolute;
bottom: calc(100% + 0.35rem);
transform-origin: bottom center;
animation: nt-composer-rise 0.16s ease-out;
font-size: max(14px, var(--nt-text-base));
left: 0;
right: 0;
z-index: 10;
max-height: 14rem;
overflow-y: auto;
list-style: none;
margin: 0;
padding: var(--nt-space-1);
background: var(--nt-surface);
border: 1px solid var(--nt-border-strong);
border-radius: var(--nt-radius);
box-shadow: var(--nt-shadow-lg);
}
.nt-qr-list li {
display: flex;
gap: var(--nt-space-3);
align-items: baseline;
padding: var(--nt-space-2) var(--nt-space-3);
border-radius: var(--nt-radius-sm);
cursor: pointer;
}
.nt-qr-list li.is-active,
.nt-qr-list li:hover { background: var(--nt-brand-050); }
.nt-qr-shortcut { font-weight: 650; color: var(--nt-brand-700); }
.nt-qr-title { color: var(--nt-text-muted); font-size: var(--nt-text-sm); }
.nt-template-picker {
margin-top: var(--nt-space-3);
background: var(--nt-surface);
padding: var(--nt-space-3);
border-radius: var(--nt-radius);
}
.nt-template-row {
display: flex;
flex-wrap: wrap;
gap: var(--nt-space-2);
}
.nt-template-row .form-select { flex: 1 1 14rem; min-width: 0; }
/* ---- quick-controls panel: the third pane (contact, automation, flow, drip, agent) ----
Kept INSIDE the thread so a live re-render replaces it with everything else, and so a phone can
slide it in over the conversation. On a wide screen it is a static right-hand column that steals
width from the message area; below that it is an off-canvas drawer toggled from the header. */
.nt-thread-main {
display: flex;
flex: 1 1 auto;
min-height: 0;
position: relative;
}
.nt-thread-convo {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-width: 0;
min-height: 0;
}
/* The header control that opens the details panel. On phone/tablet it is the single door to
everything the details column holds, so it reads as a labelled "Details" pill sitting beside the
number — not a bare icon a first-time agent has to guess at. Hidden on wide screens (≥1200px) where
the panel is a permanent column and needs no opener. */
.nt-controls-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--nt-space-1);
height: 2rem;
padding: 0 0.7rem;
border-radius: var(--nt-radius-pill);
border: 1px solid var(--wa-panel-line);
background: var(--nt-surface);
color: var(--nt-text-muted);
font-size: var(--nt-text-xs);
font-weight: 600;
line-height: 1;
cursor: pointer;
flex: 0 0 auto;
}
.nt-controls-toggle .bi { font-size: 1rem; }
.nt-controls-toggle:hover {
background: var(--wa-panel);
border-color: var(--nt-text-faint);
color: var(--nt-text);
}
.nt-controls-toggle[aria-expanded="true"] {
background: var(--wa-panel);
color: var(--nt-text);
}
/* On the narrowest phones the label would crowd a long name; drop to the icon-only circle there and
let the number keep the width. The pill returns as soon as there is room. */
@media (max-width: 400px) {
.nt-controls-toggle { width: 2rem; padding: 0; }
.nt-controls-toggle-label { display: none; }
}
/* The three-dot actions menu (block, clear media, clear chat) in the thread header. Styled like the
controls toggle, but shown at every width — the destructive actions stay reachable on desktop too. */
.nt-thread-menu { flex: 0 0 auto; }
.nt-thread-menu-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: var(--nt-radius-pill);
border: 0;
background: transparent;
color: var(--nt-text-muted);
font-size: 1.15rem;
cursor: pointer;
}
.nt-thread-menu-btn:hover,
.nt-thread-menu-btn.show { background: rgba(0, 0, 0, 0.05); color: var(--nt-text); }
/* Off-canvas by default: fixed to the right edge, slid out of view until the toggle checkbox is on. */
.nt-controls {
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 40;
width: min(22rem, 88vw);
background: var(--nt-surface);
border-left: 1px solid var(--wa-panel-line);
overflow-y: auto;
transform: translateX(100%);
transition: transform 0.22s ease;
-webkit-overflow-scrolling: touch;
}
.nt-controls-backdrop {
position: fixed;
inset: 0;
z-index: 39;
background: rgba(0, 0, 0, 0.35);
opacity: 0;
visibility: hidden;
transition: opacity 0.22s ease, visibility 0.22s ease;
}
/* Open state is a class on the persistent shell root (.nt-inbox), toggled by inbox.js, so the panel
stays open across a live thread re-render (the panel element is replaced, the root is not). */
.nt-inbox.nt-controls-open .nt-controls { transform: none; }
.nt-inbox.nt-controls-open .nt-controls-backdrop { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) {
.nt-controls, .nt-controls-backdrop { transition: none; }
}
/* Wide screens: the panel is a permanent right-hand column that narrows the message area, and the
toggle/backdrop disappear. This is the "reduce the messaging col, add a controls col" layout.
From 1400px, not 1200: between the two, a docked panel left the chat under 500px on a 14-inch
laptop, so there it stays a drawer behind the Details button instead. */
@media (min-width: 1400px) {
.nt-controls {
position: static;
transform: none;
z-index: auto;
flex: 0 0 20rem;
width: 20rem;
}
.nt-controls-backdrop { display: none; }
.nt-controls-toggle { display: none; }
}
/* The panel's own furniture: a header, grouped sections, and a close button (drawer mode only). */
.nt-controls-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--nt-space-2);
/* Matches the thread header's height so the two right-hand columns share one hairline. */
min-height: var(--nt-inbox-head-height);
padding: var(--nt-space-2) var(--nt-space-4);
border-bottom: 1px solid var(--wa-panel-line);
background: var(--wa-panel);
position: sticky;
top: 0;
z-index: 1;
}
.nt-controls-head h2 { margin: 0; font-size: var(--nt-text-md); font-weight: 650; }
.nt-controls-close {
border: 0;
background: transparent;
color: var(--nt-text-muted);
font-size: 1.25rem;
line-height: 1;
cursor: pointer;
padding: 0.15rem 0.4rem;
border-radius: var(--nt-radius-sm);
}
.nt-controls-close:hover { background: rgba(0, 0, 0, 0.06); color: var(--nt-text); }
@media (min-width: 1400px) { .nt-controls-close { display: none; } }
.nt-controls-section {
padding: var(--nt-space-4);
border-bottom: 1px solid var(--nt-border);
}
.nt-controls-section:last-child { border-bottom: 0; }
.nt-controls-title {
display: flex;
align-items: center;
gap: var(--nt-space-2);
margin: 0 0 var(--nt-space-3);
font-size: var(--nt-text-xs);
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--nt-text-faint);
}
/* The contact identity block at the top of the panel. */
.nt-controls-identity { text-align: center; padding-top: var(--nt-space-2); }
.nt-controls-identity .nt-conv-avatar {
width: 4.5rem;
height: 4.5rem;
font-size: var(--nt-text-xl);
margin: 0 auto var(--nt-space-2);
}
.nt-controls-name { font-size: var(--nt-text-md); font-weight: 650; margin: 0; word-break: break-word; }
.nt-controls-phone { font-size: var(--nt-text-sm); color: var(--nt-text-muted); margin: 0; }
/* A label/value line for contact facts. */
.nt-fact {
display: flex;
justify-content: space-between;
gap: var(--nt-space-3);
padding: 0.35rem 0;
font-size: var(--nt-text-sm);
}
.nt-fact + .nt-fact { border-top: 1px dashed var(--nt-border); }
.nt-fact-key { color: var(--nt-text-muted); flex: 0 0 auto; }
.nt-fact-val { text-align: right; min-width: 0; overflow-wrap: anywhere; }
/* A control row: a label with a description, and an action (toggle/select/button) beneath it. */
.nt-control-row + .nt-control-row { margin-top: var(--nt-space-3); }
.nt-control-row .form-select { margin-top: var(--nt-space-2); }
.nt-control-row .btn { margin-top: var(--nt-space-2); }
/* The auto-reply switch. A plain submit button (works with scripting off — it posts and redirects),
styled as a WhatsApp-style toggle whose "on" state is a class, not a checkbox. */
.nt-switch-btn {
display: inline-flex;
align-items: center;
gap: var(--nt-space-2);
padding: 0;
border: 0;
background: transparent;
color: var(--nt-text);
font: inherit;
cursor: pointer;
width: 100%;
justify-content: space-between;
}
.nt-switch-track {
position: relative;
width: 2.4rem;
height: 1.35rem;
border-radius: var(--nt-radius-pill);
background: var(--nt-border-strong);
transition: background-color 0.15s ease;
flex: 0 0 auto;
}
.nt-switch-track::after {
content: "";
position: absolute;
top: 0.15rem;
left: 0.15rem;
width: 1.05rem;
height: 1.05rem;
border-radius: 50%;
background: #fff;
box-shadow: var(--nt-shadow-sm);
transition: transform 0.15s ease;
}
.nt-switch-track.is-on { background: var(--wa-accent); }
.nt-switch-track.is-on::after { transform: translateX(1.05rem); }
.nt-switch-btn:focus-visible .nt-switch-track {
outline: 2px solid var(--wa-accent-strong);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.nt-switch-track, .nt-switch-track::after { transition: none; }
}
/* ---- quick replies management screen ---- */
.nt-key-list {
margin: 0;
padding-left: 1.1rem;
font-size: var(--nt-text-sm);
color: var(--nt-text-muted);
}
.nt-key-list li { margin-bottom: 0.25rem; }
/* The saved-reply body, clamped to two lines in the list so a long canned message does not stretch
the row. The sender's line breaks are kept for the part that shows. */
.nt-qr-body-preview {
color: var(--nt-text-muted);
font-size: var(--nt-text-sm);
white-space: pre-wrap;
overflow-wrap: anywhere;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
max-width: 30rem;
}
/* ====================================================== contacts & templates
Document screens, so they reuse the card/pill/empty vocabulary above. What is
new here is a filter toolbar, a row list that collapses on a phone, a wizard
step marker, a rule editor, and the WhatsApp-shaped bubble the template
preview needs. Nothing introduces a second colour system. */
/* --------------------------------------------------------- filter toolbar */
.nt-toolbar {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--nt-space-3);
padding: var(--nt-space-4);
margin-bottom: var(--nt-space-5);
background: var(--nt-surface);
border: 1px solid var(--nt-border);
border-radius: var(--nt-radius);
box-shadow: var(--nt-shadow-sm);
}
.nt-toolbar-field { flex: 0 1 12rem; min-width: 0; }
.nt-toolbar-grow { flex: 1 1 16rem; }
.nt-toolbar-field .form-label { margin-bottom: var(--nt-space-1); }
.nt-toolbar-check { flex: 0 0 auto; padding-bottom: var(--nt-space-2); }
.nt-toolbar-actions {
display: flex;
gap: var(--nt-space-2);
align-items: center;
margin-inline-start: auto;
}
/* .nt-search-field lives with the inbox section above — the toolbars here reuse it as-is. */
/* ------------------------------------------------------------- row lists */
.nt-rows {
list-style: none;
margin: 0;
padding: 0;
}
.nt-rows > li + li { border-top: 1px solid var(--nt-border); }
.nt-row {
display: flex;
align-items: center;
gap: var(--nt-space-3);
padding: var(--nt-space-3) var(--nt-space-4);
color: inherit;
text-decoration: none;
}
a.nt-row:hover { background: var(--nt-surface-2); }
a.nt-row:focus-visible {
outline: 2px solid var(--nt-brand);
outline-offset: -2px;
}
.nt-row-static { cursor: default; }
.nt-row-avatar {
flex: 0 0 auto;
width: 2.25rem;
height: 2.25rem;
border-radius: var(--nt-radius-pill);
background: var(--nt-brand-050);
color: var(--nt-brand-700);
display: grid;
place-items: center;
font-size: var(--nt-text-sm);
font-weight: 700;
}
.nt-row-main { flex: 1 1 auto; min-width: 0; }
/* overflow-wrap:anywhere because these carry imported data. A CSV name column can hold a pasted
company name, an email address, or a mis-mapped field with no space in 60 characters, and without
this the whole page gains a horizontal scrollbar at 375px — on the very screen the import wizard
sends the owner to. min-width:0 so the row's flex parent is allowed to shrink them. */
.nt-row-title {
display: block;
font-weight: 650;
min-width: 0;
overflow-wrap: anywhere;
}
.nt-row-sub {
display: block;
min-width: 0;
overflow-wrap: anywhere;
font-size: var(--nt-text-sm);
color: var(--nt-text-muted);
}
.nt-row-tags {
display: flex;
flex-wrap: wrap;
gap: var(--nt-space-1);
margin-top: var(--nt-space-1);
}
.nt-row-meta {
flex: 0 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: var(--nt-space-2);
}
.nt-row-time {
font-size: var(--nt-text-sm);
color: var(--nt-text-faint);
min-width: 3rem;
text-align: end;
}
/* A phone cannot hold a row and its badges side by side; stack instead of squeeze. */
@media (max-width: 47.99em) {
.nt-row { flex-wrap: wrap; }
.nt-row-meta { width: 100%; justify-content: flex-start; padding-inline-start: 3rem; }
}
/* ------------------------------------------------------- contacts data table
The contact book reads as a real data table — a column header that stays put
while the body scrolls — yet every row is still a lifted card. Header and rows
share one grid template (--nt-dt-cols) so the columns line up, and the accent
stripe is an inset shadow rather than a left border, so it can never nudge the
columns out of alignment. Rows cycle a muted six-colour accent set; each
tint/ink pair keeps the avatar initials at AA on its tint. */
.nt-dtable {
--nt-dt-cols: minmax(0, 2.6fr) minmax(0, 1.6fr) 8rem 9rem 5.5rem;
overflow: hidden;
}
.nt-dtable-scroll {
max-height: min(64vh, 42rem);
overflow-y: auto;
overscroll-behavior: contain;
}
.nt-dtable-head {
position: sticky;
top: 0;
z-index: 2;
display: grid;
grid-template-columns: var(--nt-dt-cols);
gap: var(--nt-space-3);
align-items: center;
/* Left/right pad = body inset (space-5) + a row's own inset (space-4), so a
header label sits directly over its column's cell content. */
padding: var(--nt-space-3) calc(var(--nt-space-5) + var(--nt-space-4));
background: var(--nt-surface-2);
border-bottom: 1px solid var(--nt-border);
font-size: var(--nt-text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--nt-text-muted);
}
.nt-dtable-body {
display: flex;
flex-direction: column;
gap: var(--nt-space-2);
padding: var(--nt-space-4) var(--nt-space-5);
}
.nt-dtable-row {
display: grid;
grid-template-columns: var(--nt-dt-cols);
gap: var(--nt-space-3);
align-items: center;
padding: var(--nt-space-3) var(--nt-space-4);
color: inherit;
text-decoration: none;
background: var(--nt-surface);
border: 1px solid var(--nt-border);
border-radius: var(--nt-radius);
box-shadow: inset 4px 0 0 var(--nt-dt-accent, var(--nt-brand)), var(--nt-shadow-sm);
transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.nt-dtable-row:hover {
border-color: var(--nt-border-strong);
box-shadow: inset 4px 0 0 var(--nt-dt-accent, var(--nt-brand)), var(--nt-shadow);
transform: translateY(-1px);
}
.nt-dtable-row:focus-visible {
outline: 2px solid var(--nt-brand);
outline-offset: -2px;
}
/* Six-colour accent cycle. Each pair is muted; the ink clears AA on its tint. */
.nt-dtable-row:nth-child(6n+1) { --nt-dt-accent: #0b7a5c; --nt-dt-tint: #eaf7f2; --nt-dt-ink: #075440; }
.nt-dtable-row:nth-child(6n+2) { --nt-dt-accent: #1d5c8f; --nt-dt-tint: #e9f2f9; --nt-dt-ink: #164a73; }
.nt-dtable-row:nth-child(6n+3) { --nt-dt-accent: #b7791f; --nt-dt-tint: #fdf3e2; --nt-dt-ink: #8a5300; }
.nt-dtable-row:nth-child(6n+4) { --nt-dt-accent: #6b46c1; --nt-dt-tint: #f1ecfb; --nt-dt-ink: #54369c; }
.nt-dtable-row:nth-child(6n+5) { --nt-dt-accent: #0f7d82; --nt-dt-tint: #e4f5f5; --nt-dt-ink: #0c5a5e; }
.nt-dtable-row:nth-child(6n+6) { --nt-dt-accent: #c0395f; --nt-dt-tint: #fdecef; --nt-dt-ink: #9a2b4a; }
.nt-dt-contact {
display: flex;
align-items: center;
gap: var(--nt-space-3);
min-width: 0;
}
.nt-dt-avatar {
flex: 0 0 auto;
width: 2.25rem;
height: 2.25rem;
border-radius: var(--nt-radius-pill);
background: var(--nt-dt-tint, var(--nt-brand-050));
color: var(--nt-dt-ink, var(--nt-brand-700));
display: grid;
place-items: center;
font-size: var(--nt-text-sm);
font-weight: 700;
}
.nt-dt-id { min-width: 0; }
.nt-dt-tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--nt-space-1);
min-width: 0;
}
.nt-dt-time {
font-size: var(--nt-text-sm);
color: var(--nt-text-faint);
}
/* Phone: the column header cannot help, so drop it and let each row stack its
cells into a self-labelling card. Page scrolls naturally — no inner scroll. */
@media (max-width: 47.99em) {
.nt-dtable { --nt-dt-cols: 1fr; }
.nt-dtable-head { display: none; }
.nt-dtable-scroll { max-height: none; overflow: visible; }
.nt-dtable-body { padding: var(--nt-space-3); }
.nt-dtable-row { gap: var(--nt-space-2); }
.nt-dt-empty { display: none; }
}
.nt-pager {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--nt-space-3);
margin-top: var(--nt-space-4);
}
/* ------------------------------------------------------------------ tags */
.nt-tag-chip {
display: inline-flex;
align-items: center;
gap: var(--nt-space-1);
padding: 0.1rem 0.5rem;
border-radius: var(--nt-radius-pill);
font-size: var(--nt-text-xs);
font-weight: 600;
background: var(--nt-surface-2);
color: var(--nt-text-muted);
/* The tenant's colour, only ever a validated hex value (TagChipView.SafeColor). */
border: 1px solid var(--nt-tag, var(--nt-border));
box-shadow: inset 3px 0 0 var(--nt-tag, transparent);
}
.nt-tag-list { display: flex; flex-wrap: wrap; gap: var(--nt-space-2); }
.nt-tag-chip form { display: inline; }
.nt-tag-remove {
border: 0;
background: none;
padding: 0;
line-height: 1;
color: var(--nt-text-faint);
}
.nt-tag-remove:hover { color: var(--nt-danger); }
/* --------------------------------------------------------- detail layout */
/* minmax(0, 1fr) on the base, not only inside the media query: a grid item's implicit min-width is
auto, so a wide table inside .nt-split-main would size the column to the table and push the whole
page sideways at 375px instead of scrolling inside its own .nt-table-wrap. */
.nt-split {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--nt-space-4);
align-items: start;
}
.nt-split-main,
.nt-split-side { min-width: 0; }
@media (min-width: 62em) {
.nt-split { grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); }
}
/* An even split for composer screens where the preview deserves as much room as the form. */
@media (min-width: 62em) {
.nt-split-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.nt-split-main > .nt-card + .nt-card,
.nt-split-side > .nt-card + .nt-card { margin-top: var(--nt-space-4); }
/* A card's short fields on one line: four equal columns on desktop, two on tablet, a stack on
phones. Tighter than .nt-map-grid on purpose — these are dropdowns, not content. */
.nt-field-row {
display: grid;
gap: var(--nt-space-3);
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 36em) {
.nt-field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62em) {
.nt-field-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.nt-kv {
display: grid;
grid-template-columns: minmax(8rem, auto) 1fr;
gap: var(--nt-space-2) var(--nt-space-4);
margin: 0;
}
.nt-kv dt { font-size: var(--nt-text-sm); color: var(--nt-text-muted); font-weight: 600; }
.nt-kv dd { margin: 0; }
.nt-bullets { margin: 0; padding-inline-start: 1.1rem; color: var(--nt-text-muted); }
.nt-bullets li + li { margin-top: var(--nt-space-2); }
.nt-empty-inline { padding: var(--nt-space-5) var(--nt-space-3); }
.nt-inline-form {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--nt-space-2);
}
.nt-form-actions {
display: flex;
flex-wrap: wrap;
gap: var(--nt-space-2);
align-items: center;
margin-top: var(--nt-space-4);
}
.nt-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--nt-space-3);
padding: var(--nt-space-3) var(--nt-space-4);
border-top: 1px solid var(--nt-border);
background: var(--nt-surface-2);
}
.nt-req { color: var(--nt-danger); }
.nt-stat-row {
display: grid;
gap: var(--nt-space-3);
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
/* position: relative is load-bearing, not decoration. Bootstrap's .visually-hidden is
position: absolute, so a "Actions