/* Bron voor de Tailwind-build. Bouwen met: npm run build:css
Uitvoer: public/assets/app.css — dat bestand laadt index.html.
VOLGORDE IS DRAGEND, en tegen de intuïtie in staat Tailwind ACHTERAAN.
Het CDN-script (cdn.tailwindcss.com) voegde zijn \3c style> pas ná het parsen
toe aan de , dus ná het handgeschreven CSS-blok. Daardoor wint een
Tailwind-utility van een eigen regel met dezelfde specificiteit — en daar
leunt de app op: de modals hebben `class="wa-modal hidden"`, waarbij
.wa-modal { display: flex } en .hidden { display: none } even zwaar zijn.
Zet je Tailwind vooraan, dan staan alle modals open.
Binnen de eigen bestanden geldt dezelfde volgorde als de -tags die ze
vervingen; 08-responsive.css blijft als laatste van dat blok staan, want
media-queries winnen op documentvolgorde en niet op specificiteit. */
/* Thema en basistokens
Uitgesneden uit public/index.html (\3c style>-blok), regels 1-18 van dat blok.
Mechanisch verplaatst: geen enkele regel is aangepast. */
:root {
color-scheme: light;
}
html, body {
background: #F7F8FB;
}
body {
font-family: 'Lato', system-ui, sans-serif;
color: #1A2540;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.font-display {
font-family: 'Cinzel', Georgia, serif;
letter-spacing: 0.04em;
}
.display-tight {
letter-spacing: 0.06em;
text-transform: uppercase;
}
.display-soft {
letter-spacing: 0.04em;
}
/* Subtle paper texture overlay */
.grain {
background-image: url("data:image/svg+xml;utf8,");
background-size: 240px 240px;
}
/* Basiscomponenten: velden, knoppen, kaarten, telefoonmockup, badges, toasts, log, combobox
Uitgesneden uit public/index.html (\3c style>-blok), regels 19-579 van dat blok.
Mechanisch verplaatst: geen enkele regel is aangepast. */
/* Inputs */
.field {
width: 100%;
background: #FFFFFF;
border: 1px solid #E1E6EF;
border-radius: 6px;
padding: 10px 14px;
/* 16px on mobile to prevent iOS Safari zoom-on-focus */
font: 400 16px/1.4 'Lato', sans-serif;
color: #1A2540;
transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
@media (min-width: 640px) {
.field {
font-size: 14px;
}
}
.field::-moz-placeholder {
color: #C8D1E0;
font-weight: 400;
}
.field::placeholder {
color: #C8D1E0;
font-weight: 400;
}
.field:hover {
border-color: #C8D1E0;
}
.field:focus {
outline: none;
border-color: #0C4CA2;
box-shadow: 0 0 0 3px rgba(12,76,162,0.12);
}
.field:disabled {
background: #EEF1F6;
color: #6B7280;
cursor: not-allowed;
}
textarea.field {
resize: vertical;
min-height: 80px;
line-height: 1.55;
}
.label {
display: flex;
align-items: baseline;
justify-content: space-between;
font: 700 11px/1 'Lato', sans-serif;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #3F4A66;
margin-bottom: 8px;
}
.label .hint {
font-weight: 400;
letter-spacing: 0;
text-transform: none;
color: #6B7280;
font-size: 12px;
}
/* Inline button */
.btn-link {
font: 700 12px/1 'Lato', sans-serif;
color: #0C4CA2;
background: none;
border: 0;
padding: 0;
cursor: pointer;
letter-spacing: 0.02em;
transition: color 120ms ease;
}
.btn-link:hover {
color: #0A3C82;
}
.btn-link:focus {
outline: 2px solid rgba(12,76,162,0.3);
outline-offset: 3px;
border-radius: 2px;
}
.btn-x {
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: transparent;
color: #6B7280;
border: 0;
cursor: pointer;
transition: all 120ms ease;
}
.btn-x:hover {
background: #EEF1F6;
color: #0C4CA2;
}
.btn-x:focus {
outline: 2px solid rgba(12,76,162,0.25);
outline-offset: 2px;
}
/* Primary action — Arslan brand blue */
.btn-primary {
background: #0C4CA2;
color: #FFFFFF;
border: 0;
border-radius: 6px;
padding: 14px 24px;
font: 700 13px/1 'Lato', sans-serif;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: transform 120ms ease, background 120ms ease, box-shadow 200ms ease;
box-shadow: 0 1px 2px rgba(12,76,162,0.15), 0 8px 20px -8px rgba(12,76,162,0.45);
display: inline-flex;
align-items: center;
gap: 10px;
justify-content: center;
}
.btn-primary:hover {
background: #0A3C82;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(12,76,162,0.18), 0 12px 24px -8px rgba(12,76,162,0.5);
}
.btn-primary:active {
transform: translateY(0);
}
.btn-primary:disabled {
background: #C8D1E0;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.btn-primary:focus {
outline: none;
box-shadow: 0 0 0 4px rgba(12,76,162,0.2), 0 6px 16px -6px rgba(12,76,162,0.4);
}
.btn-secondary {
background: #FFFFFF;
color: #1A2540;
border: 1px solid #E1E6EF;
border-radius: 6px;
padding: 8px 14px;
font: 700 12px/1 'Lato', sans-serif;
letter-spacing: 0.04em;
cursor: pointer;
transition: all 120ms ease;
}
.btn-secondary:hover {
border-color: #0C4CA2;
color: #0C4CA2;
}
/* Card */
.card {
background: #FFFFFF;
border: 1px solid #E1E6EF;
border-radius: 8px;
box-shadow: 0 1px 0 rgba(26,37,64,0.03);
}
/* Phone mockup */
.phone-frame {
width: 100%;
max-width: 300px;
background: linear-gradient(180deg, #1a2540 0%, #0a1326 100%);
padding: 12px;
border-radius: 44px;
box-shadow:
0 4px 12px rgba(26,37,64,0.12),
0 32px 64px -24px rgba(26,37,64,0.35),
inset 0 0 0 1px rgba(255,255,255,0.08);
position: relative;
}
.phone-frame::before {
/* side button hint */
content: '';
position: absolute;
top: 38%;
left: -2px;
width: 3px;
height: 60px;
background: #1a2540;
border-radius: 2px;
}
.phone-screen {
background: #F7F8FB;
border-radius: 34px;
overflow: hidden;
min-height: 540px;
display: flex;
flex-direction: column;
}
.phone-statusbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 28px 8px;
font: 600 14px/1 'Lato', sans-serif;
color: #1A2540;
}
.phone-header {
display: flex;
flex-direction: column;
align-items: center;
padding: 8px 16px 14px;
border-bottom: 0.5px solid rgba(26,37,64,0.08);
}
.phone-avatar {
width: 44px;
height: 44px;
border-radius: 999px;
background: linear-gradient(135deg, #0C4CA2, #072859);
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
font: 700 13px/1 'Cinzel', serif;
letter-spacing: 0.06em;
margin-bottom: 4px;
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15), 0 2px 4px rgba(12,76,162,0.2);
}
.phone-sender {
font: 400 13px/1.2 'Lato', sans-serif;
color: #1A2540;
}
.phone-sender-sub {
font: 400 10px/1 'Lato', sans-serif;
color: #6B7280;
margin-top: 2px;
}
.phone-thread {
flex: 1;
padding: 16px 14px 24px;
display: flex;
flex-direction: column;
gap: 4px;
overflow-y: auto;
}
.phone-thread-date {
text-align: center;
font: 600 10px/1 'Lato', sans-serif;
color: #6B7280;
margin: 8px 0 12px;
letter-spacing: 0.04em;
}
.phone-bubble {
max-width: 85%;
align-self: flex-start;
background: #EEF1F6;
color: #1A2540;
padding: 10px 14px;
border-radius: 18px;
border-bottom-left-radius: 4px;
font: 400 13px/1.45 'Lato', sans-serif;
white-space: pre-wrap;
word-break: break-word;
animation: bubble-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes bubble-in {
from {
opacity: 0;
transform: translateY(4px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.phone-empty {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
color: #C8D1E0;
font: 400 12px/1.4 'Lato', sans-serif;
text-align: center;
padding: 0 30px;
}
.bubble-placeholder {
display: inline-block;
background: rgba(209,164,43,0.20);
color: #8A6A18;
padding: 0 4px;
border-radius: 3px;
font: 600 12px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
border: 1px dashed rgba(209,164,43,0.55);
}
.bubble-missing {
margin-top: 10px;
align-self: flex-start;
background: rgba(209,164,43,0.10);
color: #8A6A18;
padding: 6px 10px;
border-radius: 6px;
font: 600 10px/1.3 'Lato', sans-serif;
text-transform: uppercase;
letter-spacing: 0.06em;
border-left: 2px solid #D1A42B;
}
/* Inline expanding section */
details.inline-add {
border-top: 1px dashed #E1E6EF;
margin-top: 6px;
padding-top: 8px;
}
details.inline-add[open] summary .chevron {
transform: rotate(45deg);
}
details.inline-add summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
font: 700 12px/1 'Lato', sans-serif;
color: #0C4CA2;
padding: 4px 0;
letter-spacing: 0.04em;
}
details.inline-add summary::-webkit-details-marker {
display: none;
}
details.inline-add summary .chevron {
display: inline-block;
width: 14px;
height: 14px;
transition: transform 200ms ease;
}
/* Pill / badge */
.badge {
display: inline-flex;
align-items: center;
gap: 5px;
font: 700 10px/1 'Lato', sans-serif;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 8px;
border-radius: 4px;
}
.badge.sent {
background: rgba(94, 110, 84, 0.14);
color: #485840;
}
.badge.delivered {
background: rgba(94, 110, 84, 0.18);
color: #3C4B33;
}
.badge.pending {
background: rgba(201, 146, 58, 0.14);
color: #7A5618;
}
.badge.error {
background: rgba(183, 71, 42, 0.12);
color: #9A3D24;
}
/* Template card row */
.tpl-row {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border: 1px solid #E1E6EF;
border-radius: 6px;
background: #FFFFFF;
cursor: pointer;
transition: all 120ms ease;
}
.tpl-row:hover {
border-color: #C8D1E0;
}
.tpl-row.active {
border-color: #0C4CA2;
background: linear-gradient(180deg, #FFFFFF, #F7F8FB);
box-shadow: 0 0 0 1px #0C4CA2 inset, 0 2px 6px -2px rgba(12,76,162,0.15);
}
.tpl-row .tpl-name {
font: 700 13px/1.2 'Lato', sans-serif;
}
.tpl-row .tpl-body {
font: 400 12px/1.4 'Lato', sans-serif;
color: #6B7280;
}
/* Toast */
#toast-container {
position: fixed;
top: 16px;
right: 16px;
left: 16px;
display: flex;
flex-direction: column;
gap: 10px;
z-index: 100;
pointer-events: none;
align-items: flex-end;
}
@media (min-width: 640px) {
#toast-container {
top: 24px;
right: 24px;
left: auto;
}
}
.toast {
pointer-events: auto;
background: #1A2540;
color: #FFFFFF;
border-radius: 6px;
padding: 14px 18px;
font: 400 13px/1.4 'Lato', sans-serif;
box-shadow: 0 12px 28px -8px rgba(26,37,64,0.4);
width: 100%;
max-width: 380px;
animation: toast-in 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
display: flex;
align-items: flex-start;
gap: 10px;
border-left: 3px solid #D1A42B;
}
.toast.success {
background: #0C4CA2;
border-left-color: #D1A42B;
}
.toast.error {
background: #9A3D24;
border-left-color: #FFD7A8;
}
.toast .toast-icon {
flex-shrink: 0;
margin-top: 1px;
}
@keyframes toast-in {
from {
opacity: 0;
transform: translateY(-8px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.toast.dismissing {
animation: toast-out 220ms ease forwards;
}
@keyframes toast-out {
to {
opacity: 0;
transform: translateY(-6px);
}
}
/* page fade-in */
.reveal {
animation: reveal 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.reveal-delay-1 {
animation-delay: 60ms;
}
.reveal-delay-2 {
animation-delay: 140ms;
}
.reveal-delay-3 {
animation-delay: 220ms;
}
@keyframes reveal {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Date/time native input styling tweak */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
opacity: 0.5;
cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
opacity: 1;
}
/* Log row */
.log-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 12px;
align-items: center;
padding: 10px 0;
border-top: 1px solid #E1E6EF;
cursor: pointer;
transition: background 120ms ease;
}
.log-row:first-child {
border-top: 0;
}
.log-row:hover {
background: rgba(238,241,246,0.55);
margin: 0 -10px;
padding: 10px;
border-radius: 4px;
}
.log-row.expanded {
background: rgba(238,241,246,0.8);
margin: 0 -10px;
padding: 10px 10px 4px;
border-radius: 4px;
}
.log-row .lr-when {
font: 400 11px/1 'Lato', sans-serif;
color: #6B7280;
}
.log-row .lr-recipient {
font: 700 13px/1.2 'Lato', sans-serif;
color: #1A2540;
}
.log-row .lr-meta {
font: 400 11px/1.3 'Lato', sans-serif;
color: #6B7280;
}
.log-detail {
grid-column: 1 / -1;
margin-top: 8px;
padding: 10px 12px;
background: #FFFFFF;
border: 1px solid #E1E6EF;
border-radius: 4px;
font: 400 12px/1.5 'Lato', sans-serif;
color: #3F4A66;
white-space: pre-wrap;
word-break: break-word;
}
.log-detail-error {
margin-top: 6px;
padding: 8px 10px;
background: rgba(183,71,42,0.08);
border: 1px solid rgba(183,71,42,0.25);
border-radius: 4px;
font: 700 11px/1.4 'Lato', sans-serif;
color: #9A3D24;
}
.log-detail-meta {
margin-top: 6px;
font: 700 10px/1.4 'Lato', sans-serif;
color: #6B7280;
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* Hide native arrows on select to match field style */
select.field {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
}
/* Combobox (autocomplete) */
.combobox {
position: relative;
}
.combobox .field {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
}
.combo-list {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: #FFFFFF;
border: 1px solid #E1E6EF;
border-radius: 6px;
box-shadow: 0 8px 24px -8px rgba(26,37,64,0.18);
max-height: 240px;
overflow-y: auto;
z-index: 20;
padding: 4px;
list-style: none;
margin: 0;
animation: combo-in 140ms ease;
}
@keyframes combo-in {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.combo-item {
padding: 9px 12px;
border-radius: 4px;
font: 400 13px/1.3 'Lato', sans-serif;
color: #1A2540;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.combo-item:hover, .combo-item.active {
background: #EEF1F6;
}
.combo-item.selected {
background: #0C4CA2;
color: #FFFFFF;
}
.combo-item.selected.active {
background: #0A3C82;
}
.combo-item .combo-hl {
color: #0C4CA2;
font-weight: 700;
}
.combo-item.selected .combo-hl {
color: #D1A42B;
}
.combo-empty {
padding: 10px 12px;
font: 400 12px/1.4 'Lato', sans-serif;
color: #6B7280;
text-align: center;
}
/* Char-count progress */
.seg-bar {
height: 3px;
background: #E1E6EF;
border-radius: 2px;
overflow: hidden;
}
.seg-fill {
height: 100%;
background: #0C4CA2;
transition: width 200ms ease, background 200ms ease;
}
.seg-fill.multi {
background: #D1A42B;
}
.seg-fill.over {
background: #B7472A;
}
/* Section title with ornament line */
.section-title {
display: flex;
align-items: center;
gap: 14px;
}
.section-title::after {
content: '';
flex: 1;
height: 1px;
background: #E1E6EF;
}
.section-title .font-display {
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #1A2540;
}
/* Login ornament — gold accent */
.ornament-line {
height: 1px;
background: linear-gradient(90deg, transparent, #D1A42B, transparent);
}
.ornament-dot {
width: 6px;
height: 6px;
background: #D1A42B;
transform: rotate(45deg);
margin: 0 auto;
}
/* Header credit pill */
.credits-pill {
display: inline-flex;
align-items: center;
gap: 6px;
background: #FFFFFF;
border: 1px solid #E1E6EF;
border-radius: 999px;
padding: 6px 14px 6px 10px;
font: 700 11px/1 'Lato', sans-serif;
color: #3F4A66;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.credits-pill .credits-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: #D1A42B;
box-shadow: 0 0 0 2px rgba(209,164,43,0.18);
}
/* Subtle hr */
hr.divider {
border: 0;
height: 1px;
background: #E1E6EF;
}
/* Logo wordmark in header */
.header-logo {
height: 24px;
width: auto;
display: block;
max-width: 60vw;
}
@media (min-width: 640px) {
.header-logo {
height: 32px;
}
}
/* Placeholder chips */
.placeholder-row {
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
margin-bottom: 8px;
}
.placeholder-row-label {
font: 700 10px/1 'Lato', sans-serif;
color: #6B7280;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-right: 4px;
}
.placeholder-chip {
display: inline-block;
padding: 3px 8px;
background: #EEF1F6;
border: 1px solid #E1E6EF;
border-radius: 4px;
font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
color: #0C4CA2;
cursor: pointer;
transition: all 120ms ease;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.placeholder-chip:hover {
background: #DCE5F0;
border-color: #0C4CA2;
}
.placeholder-chip:active {
transform: scale(0.96);
}
.placeholder-chip.copied {
background: rgba(94,110,84,0.18);
border-color: rgba(94,110,84,0.5);
color: #485840;
}
.placeholder-chip.copied::before {
content: '✓ ';
}
/* Loading dots */
.dots::after {
content: '';
display: inline-block;
animation: dots 1200ms steps(4, end) infinite;
}
@keyframes dots {
0% {
content: '';
}
25% {
content: '.';
}
50% {
content: '..';
}
75% {
content: '...';
}
100% {
content: '';
}
}
/* Hide spinners on number-ish inputs */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
/* Kanaaltabs in de header
Uitgesneden uit public/index.html (\3c style>-blok), regels 580-625 van dat blok.
Mechanisch verplaatst: geen enkele regel is aangepast. */
/* =========================================================
Channel tabs (header)
========================================================= */
.tab-nav {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px;
background: #F1ECE3;
border-radius: 12px;
}
.tab-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 14px;
border: 0;
background: transparent;
color: #7A7570;
font: 600 13px/1 'Manrope', sans-serif;
letter-spacing: 0.01em;
border-radius: 9px;
cursor: pointer;
transition: all 140ms ease;
position: relative;
}
.tab-btn:hover {
color: #3A3633;
}
.tab-btn.active {
background: #FFFFFF;
color: #161514;
box-shadow: 0 1px 2px rgba(22,21,20,0.06), 0 0 0 1px rgba(22,21,20,0.04);
}
.tab-btn svg {
opacity: 0.85;
}
.tab-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: #B7472A;
color: #FFFFFF;
font: 700 10px/1 'Manrope', sans-serif;
letter-spacing: 0;
}
/* Op het WhatsApp-tabblad is de voettekst puur verlies: hij kost ~50px van een
scherm waar de gesprekkenlijst juist zo lang mogelijk moet zijn. Op het
SMS-tabblad, dat wel als pagina leest, blijft hij gewoon staan. */
body.wa-actief #pagina-footer {
display: none;
}
/* WhatsApp-scherm: shell, kolommen, berichten en chat-extras
Uitgesneden uit public/index.html (\3c style>-blok), regels 626-1579 van dat blok.
Mechanisch verplaatst: geen enkele regel is aangepast. */
/* =========================================================
WhatsApp view — shell + columns
========================================================= */
/* =========================================================
Fluïde schaal voor het WhatsApp-scherm
---------------------------------------------------------
Alle maten komen uit deze variabelen, zodat één aanpassing
doorwerkt op telefoon, tablet, desktop en vouwbaar scherm.
Geen vaste pixelmaten meer in de layout zelf.
========================================================= */
:root {
/* Kop plus marge. Was 140px toen de voettekst hier nog onder stond; die is
op dit tabblad weg, dus die ~50px gaat naar de gesprekkenlijst. */
--wa-chrome: 96px;
/* Op 1440px werd dit 360px en kapten namen met een label erachter af,
terwijl de gesprekskolom ruim 1000px hield. Nu 374px op 1440 en 420px op
1920; de bubbels zijn toch al begrensd op 75% resp. 560px, dus de
gesprekkolom verliest er niets door. */
--wa-list-w: clamp(240px, 26vw, 420px);
--wa-avatar: clamp(30px, 8vw, 38px);
--wa-knop: clamp(32px, 9vw, 36px);
--wa-radius: clamp(10px, 2.5vw, 16px);
--wa-gap: clamp(6px, 1.8vw, 12px);
--wa-pad-x: clamp(10px, 3vw, 18px);
--wa-tekst: clamp(13px, 3.6vw, 15px);
--wa-tekst-klein: clamp(11px, 3vw, 13px);
--wa-bubbel-max: min(86%, 560px);
}
/* De chat stond in een kader van 1280px, gecentreerd, met 24-32px marge rondom.
Op een breed scherm gaf dat stroken leegte links en rechts terwijl de
gesprekkenlijst en het gesprek juist ruimte kunnen gebruiken — en boven en
onder ging hoogte verloren die de berichtenlijst goed kan hebben.
Niet helemaal tot de rand: een paar pixels lucht houdt de kaartranden
zichtbaar. De bovengrens van 2000px voorkomt dat op een zeer breed scherm
de gesprekskolom zo breed wordt dat regels onleesbaar lang worden; de
bubbels hebben daarnaast hun eigen max-width. */
#wa-main {
max-width: min(2000px, 100%);
padding-left: clamp(6px, 0.9vw, 18px);
padding-right: clamp(6px, 0.9vw, 18px);
padding-top: clamp(6px, 0.7vw, 12px);
padding-bottom: clamp(6px, 0.7vw, 12px);
}
.wa-shell-grid {
display: grid;
/* minmax(0, 1fr) in plaats van 1fr: een gewone 1fr-kolom weigert kleiner
te worden dan zijn inhoud, waardoor de brede gesprekskop de hele pagina
breder maakte dan het scherm en je horizontaal moest scrollen. */
grid-template-columns: var(--wa-list-w) minmax(0, 1fr);
gap: 0;
background: #FFFFFF;
border: 1px solid #E5DFD2;
border-radius: var(--wa-radius);
box-shadow: 0 1px 0 rgba(22,21,20,0.03), 0 12px 32px -16px rgba(22,21,20,0.08);
overflow: hidden;
/* dvh volgt de echte zichtbare hoogte, ook als de URL-balk van een
telefoon in- of uitschuift. vh blijft als terugval voor oude browsers. */
height: calc(100vh - var(--wa-chrome));
height: calc(100dvh - var(--wa-chrome));
/* Geen min-height: op een liggend of gevouwen scherm is er soms maar
300px hoogte, en dan moet dit meekrimpen in plaats van overlopen. */
min-height: 0;
}
.wa-list-col {
border-right: 1px solid #E5DFD2;
background: linear-gradient(180deg, #FFFFFF 0%, #FAF7F2 100%);
display: flex;
flex-direction: column;
min-height: 0;
position: relative;
/* anchor voor wa-filter-popover */
}
/* De kop kostte 111px voor een woord, een telling en een zoekveld. Dat is
bijna twee gespreksrijen, elke keer dat je kijkt. */
.wa-list-header {
padding: 8px 10px 6px;
border-bottom: 1px solid #E5DFD2;
}
/* Het zoekveld in de kop is geen formulierveld waar je lang in typt maar een
filter waar je een paar letters in gooit; die mag krapper dan de standaard. */
/* Links extra ruimte houden: daar staat het vergrootglas absoluut
gepositioneerd, en met een gelijke padding rondom loopt de tekst eroverheen. */
.wa-list-header .field {
padding: 6px 30px 6px 32px;
font-size: 13px;
}
.wa-list {
flex: 1;
overflow-y: auto;
padding: 4px;
list-style: none;
margin: 0;
}
.wa-list-empty {
padding: 32px 24px;
text-align: center;
color: #7A7570;
}
/* Dichtheid: dit is een werkbak waar het secretariaat de hele dag in zit, en
bij dertig lopende gesprekken is scrollen de duurste handeling. De rij ging
van 62px naar ~47px, waarmee er ruim een derde meer gesprekken in beeld
passen. Verder omlaag kan niet zonder de tweede regel (het laatste bericht)
op te offeren, en juist die regel bepaalt of je een gesprek herkent zonder
het te openen. */
.wa-row {
display: grid;
grid-template-columns: 30px 1fr auto;
gap: 8px;
padding: 5px 10px;
border-radius: 10px;
cursor: pointer;
transition: background 120ms ease;
align-items: center;
}
.wa-row:hover {
background: rgba(22,21,20,0.03);
}
.wa-row.active {
background: #FFFFFF;
box-shadow: 0 0 0 1px #161514 inset, 0 2px 6px -2px rgba(22,21,20,0.1);
}
.wa-row-avatar {
width: 30px;
height: 30px;
border-radius: 999px;
background: linear-gradient(135deg, #C9923A 0%, #B7472A 80%);
color: #FAF7F2;
display: flex;
align-items: center;
justify-content: center;
font: 700 11px/1 'Manrope', sans-serif;
letter-spacing: -0.02em;
}
/* Avatarkleuren: tien varianten binnen dezelfde warm-donkere familie, zodat
gesprekken uit elkaar te houden zijn zonder dat de lijst onrustig wordt.
Allemaal donker genoeg voor witte initialen. Toegekend op telefoonnummer,
dus de kleur van een contact verandert nooit. */
.wa-av-0 {
background: linear-gradient(135deg, #2F4E8F 0%, #1B2E5C 80%);
}
.wa-av-1 {
background: linear-gradient(135deg, #C9923A 0%, #9A6B1E 80%);
}
.wa-av-2 {
background: linear-gradient(135deg, #9C3B4A 0%, #6E2230 80%);
}
.wa-av-3 {
background: linear-gradient(135deg, #3E7A5E 0%, #235741 80%);
}
.wa-av-4 {
background: linear-gradient(135deg, #5A6472 0%, #39414C 80%);
}
.wa-av-5 {
background: linear-gradient(135deg, #7A4A8C 0%, #55306A 80%);
}
.wa-av-6 {
background: linear-gradient(135deg, #2E7D86 0%, #1B565E 80%);
}
.wa-av-7 {
background: linear-gradient(135deg, #B0703C 0%, #8A4F24 80%);
}
.wa-av-8 {
background: linear-gradient(135deg, #4A4FA0 0%, #2F3273 80%);
}
.wa-av-9 {
background: linear-gradient(135deg, #A65A46 0%, #7C3B2C 80%);
}
.wa-row-body {
min-width: 0;
}
.wa-row-name {
font: 600 13px/1.25 'Manrope', sans-serif;
color: #161514;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wa-row-preview {
font: 400 12px/1.3 'Manrope', sans-serif;
color: #7A7570;
margin-top: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wa-row-preview .me {
color: #B7472A;
font-weight: 600;
}
.wa-row-time {
font: 500 11px/1 'Manrope', sans-serif;
color: #7A7570;
align-self: flex-start;
padding-top: 2px;
}
.wa-row-unread {
margin-top: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: #5E6E54;
color: #FAF7F2;
font: 700 10px/1 'Manrope', sans-serif;
}
/* Chat column */
.wa-chat-col {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
background:
linear-gradient(180deg, rgba(250,247,242,0.4) 0%, rgba(241,236,227,0.55) 100%),
url("data:image/svg+xml;utf8,");
background-size: auto, 280px 280px;
}
.wa-empty {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #7A7570;
}
.wa-thread {
display: flex;
flex-direction: column;
min-height: 0;
flex: 1;
}
/* De naam van het contact heeft voorrang op de knoppen. Zonder deze regels
verdrongen de pillen en de acht actie-iconen de naam volledig zodra het
venster smaller werd dan ongeveer 900px — dan zag je niet meer met wie je
in gesprek was. De actiestrook schuift nu in plaats van te duwen, op elke
breedte, zonder dat daar een breekpunt voor nodig is. */
.wa-thread-header {
min-width: 0;
max-width: 100%;
}
.wa-thread-header > .flex:first-child {
flex: 1 1 auto;
min-width: 0;
}
/* De naam mag afkappen, maar niet tot een paar letters. Deze ondergrens
schaalt mee met het scherm en duwt de iconenstrook eerder aan het
schuiven — beter een halve naam en schuivende knoppen dan "FATMA ...". */
/* Twee klassen, want de Tailwind-klasse min-w-0 op hetzelfde element wint
anders met gelijke specificiteit en zet de ondergrens terug op nul. */
.wa-thread-header .wa-thread-header-naam {
min-width: min(46vw, 220px);
}
.wa-thread-header-acties {
flex: 0 1 auto;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}
.wa-thread-header-acties::-webkit-scrollbar {
display: none;
}
.wa-thread-header-acties > * {
flex-shrink: 0;
}
.wa-thread-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
border-bottom: 1px solid #E5DFD2;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
position: relative;
}
.wa-thread-header::before {
/* Subtiel gold-accent lijntje aan de bovenkant voor Arslan-branding */
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, #D1A42B 30%, #D1A42B 70%, transparent);
opacity: 0.4;
}
.wa-avatar {
width: 34px;
height: 34px;
border-radius: 999px;
background: linear-gradient(135deg, #C9923A 0%, #B7472A 80%);
color: #FAF7F2;
display: flex;
align-items: center;
justify-content: center;
font: 700 12px/1 'Manrope', sans-serif;
letter-spacing: -0.02em;
flex-shrink: 0;
box-shadow: 0 1px 2px rgba(22,21,20,0.1), 0 0 0 2px #FFFFFF;
}
.wa-window-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px 5px 8px;
border-radius: 999px;
background: rgba(94,110,84,0.12);
color: #485840;
font: 600 10px/1 'Manrope', sans-serif;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.wa-window-pill.closed {
background: rgba(183,71,42,0.10);
color: #9A3D24;
}
.wa-window-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: currentColor;
}
/* Messages area */
.wa-messages {
flex: 1;
overflow-y: auto;
padding: 8px 14px 6px;
display: flex;
flex-direction: column;
gap: 2px;
scroll-behavior: smooth;
}
.wa-date-sep {
align-self: center;
margin: 8px 0 6px;
padding: 3px 10px;
background: rgba(255,255,255,0.85);
border: 1px solid #E5DFD2;
border-radius: 999px;
font: 600 9px/1 'Manrope', sans-serif;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #7A7570;
}
.wa-bubble {
max-width: 75%;
width: auto;
min-width: 0;
height: auto;
min-height: 0;
flex: 0 0 auto;
align-self: flex-start;
padding: 6px 10px 5px;
border-radius: 12px;
font: 400 13px/1.4 'Manrope', sans-serif;
color: #161514;
word-wrap: break-word;
overflow-wrap: anywhere;
/* GEEN white-space: pre-wrap op de bubble zelf — whitespace tussen
templated elementen zou anders als letterlijke regels renderen.
Pre-wrap zit op .wa-bubble-body (zie hieronder) waar de echte tekst staat. */
white-space: normal;
position: relative;
animation: wa-bubble-in 220ms cubic-bezier(0.2,0.8,0.2,1);
box-shadow: 0 1px 2px rgba(22,21,20,0.05);
display: flex;
flex-direction: column;
gap: 0;
}
.wa-bubble > * {
margin: 0;
}
.wa-bubble-body {
white-space: pre-wrap;
word-break: break-word;
}
@keyframes wa-bubble-in {
from {
opacity: 0;
transform: translateY(3px) scale(0.99);
}
to {
opacity: 1;
transform: none;
}
}
.wa-bubble.in {
align-self: flex-start;
background: #FFFFFF;
border-bottom-left-radius: 4px;
border: 1px solid #EDE6D9;
}
.wa-bubble.out {
align-self: flex-end;
background: linear-gradient(165deg, #F4E7D1 0%, #ECDABC 100%);
border-bottom-right-radius: 4px;
color: #2A1F0F;
}
.wa-bubble.template {
border-left: 3px solid #B7472A;
}
.wa-bubble-meta {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 3px;
margin-top: 2px;
font: 500 9px/1 'Manrope', sans-serif;
color: #7A7570;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.wa-bubble.out .wa-bubble-meta {
color: #6B5530;
}
.wa-ticks {
display: inline-flex;
align-items: center;
}
.wa-ticks svg {
display: block;
}
.wa-ticks.sent {
color: #C9C2B6;
}
.wa-ticks.delivered {
color: #7A7570;
}
.wa-ticks.read {
color: #486F9E;
}
.wa-ticks.failed {
color: #B7472A;
}
/* Media inside bubbles */
.wa-bubble-media {
position: relative;
margin: -2px -4px 4px;
border-radius: 10px;
overflow: hidden;
background: #F1ECE3;
}
.wa-bubble-media img,
.wa-bubble-media video {
display: block;
max-width: 280px;
max-height: 320px;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
cursor: zoom-in;
}
.wa-media-download {
position: absolute;
top: 6px;
right: 6px;
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(22,21,20,0.55);
color: #FFFFFF;
border: 0;
border-radius: 999px;
cursor: pointer;
opacity: 0;
transform: translateY(-2px);
transition: opacity 140ms ease, transform 140ms ease, background 120ms ease;
text-decoration: none;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.wa-bubble-media:hover .wa-media-download {
opacity: 1;
transform: none;
}
.wa-media-download:hover {
background: rgba(22,21,20,0.85);
}
.wa-media-download:focus {
opacity: 1;
transform: none;
outline: 2px solid rgba(255,255,255,0.5);
outline-offset: 1px;
}
.wa-bubble-audio {
margin: 4px 0;
}
.wa-bubble-audio audio {
width: 240px;
height: 36px;
}
.wa-bubble-doc {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: rgba(22,21,20,0.05);
border-radius: 10px;
margin: -1px -2px 6px;
text-decoration: none;
color: inherit;
transition: background 120ms ease;
}
.wa-bubble-doc:hover {
background: rgba(22,21,20,0.09);
}
.wa-bubble-doc-icon {
width: 32px;
height: 32px;
background: #FFFFFF;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: #B7472A;
flex-shrink: 0;
}
.wa-bubble-doc-meta {
font: 500 12px/1.3 'Manrope', sans-serif;
min-width: 0;
}
.wa-bubble-doc-name {
font-weight: 600;
color: inherit;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 200px;
}
.wa-bubble-doc-size {
color: #7A7570;
font-size: 11px;
margin-top: 1px;
}
/* Compose */
.wa-compose {
padding: 8px 12px 10px;
border-top: 1px solid #E5DFD2;
background: rgba(255,255,255,0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
position: relative;
}
.wa-compose::before {
/* Identiek subtiel gold-lijntje als header — verbindt visueel */
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, #D1A42B 30%, #D1A42B 70%, transparent);
opacity: 0.3;
}
.wa-compose-text {
display: flex;
align-items: flex-end;
gap: 8px;
}
.wa-icon-btn {
width: 36px;
height: 36px;
border-radius: 999px;
border: 1px solid transparent;
background: transparent;
color: #7A7570;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 120ms ease;
flex-shrink: 0;
}
.wa-icon-btn:hover {
background: #F1ECE3;
color: #161514;
}
.wa-icon-btn:focus {
outline: 2px solid rgba(22,21,20,0.12);
outline-offset: 2px;
}
.wa-input {
flex: 1;
background: #FFFFFF;
border: 1px solid #E5DFD2;
border-radius: 18px;
padding: 8px 14px;
font: 400 13.5px/1.4 'Manrope', sans-serif;
color: #161514;
resize: none;
min-height: 36px;
max-height: 160px;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.wa-input:focus {
outline: none;
border-color: #161514;
box-shadow: 0 0 0 4px rgba(22,21,20,0.06);
}
.wa-send-btn {
width: 36px;
height: 36px;
border-radius: 999px;
background: #161514;
color: #FAF7F2;
border: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 120ms ease, background 120ms ease;
flex-shrink: 0;
}
.wa-send-btn:hover {
background: #3A3633;
}
.wa-send-btn:active {
transform: scale(0.95);
}
.wa-send-btn:disabled {
background: #C9C2B6;
cursor: not-allowed;
}
.wa-venster-waarschuwing {
display: flex;
align-items: center;
gap: 8px;
padding: 6px var(--wa-pad-x, 14px);
background: #FBF3E4;
border-top: 1px solid #EFE2CE;
font: 400 11px/1.4 'Manrope', sans-serif;
color: #7A5A1E;
}
.wa-venster-waarschuwing.hidden {
display: none;
}
.wa-venster-waarschuwing strong {
font-weight: 700;
}
.wa-venster-knop {
margin-left: auto;
flex-shrink: 0;
border: 1px solid #D8C39A;
background: #fff;
border-radius: 6px;
padding: 3px 9px;
font: 600 11px/1.4 'Manrope', sans-serif;
color: #7A5A1E;
cursor: pointer;
white-space: nowrap;
}
.wa-venster-knop:hover {
background: #FFF9EF;
}
.wa-compose-template {
padding: 4px 0;
}
/* Drag-drop overlay over messages area */
.wa-thread {
position: relative;
}
.wa-drop-overlay {
position: absolute;
inset: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
background: rgba(250,247,242,0.92);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 2px dashed #B7472A;
border-radius: 14px;
margin: 8px;
pointer-events: none;
animation: wa-fade-in 140ms ease;
}
.wa-drop-content {
text-align: center;
color: #B7472A;
}
/* Upload-in-progress bubble */
.wa-bubble.uploading {
opacity: 0.7;
}
.wa-upload-progress {
margin-top: 4px;
height: 3px;
background: rgba(22,21,20,0.1);
border-radius: 999px;
overflow: hidden;
}
.wa-upload-progress-fill {
height: 100%;
background: #161514;
width: 30%;
animation: wa-upload-anim 1200ms ease-in-out infinite;
}
@keyframes wa-upload-anim {
0% {
transform: translateX(-100%);
}
50% {
transform: translateX(50%);
}
100% {
transform: translateX(300%);
}
}
/* Modal */
.wa-modal {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 80;
padding: 20px;
}
.wa-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(22,21,20,0.4);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
animation: wa-fade-in 180ms ease;
}
.wa-modal-card {
position: relative;
background: #FFFFFF;
border-radius: 18px;
box-shadow: 0 24px 60px -10px rgba(22,21,20,0.3);
width: 100%;
max-width: 500px;
max-height: 90vh;
display: flex;
flex-direction: column;
animation: wa-modal-in 220ms cubic-bezier(0.2,0.8,0.2,1);
}
@keyframes wa-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes wa-modal-in {
from {
opacity: 0;
transform: translateY(8px) scale(0.98);
}
to {
opacity: 1;
transform: none;
}
}
.wa-modal-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 22px 12px;
border-bottom: 1px solid #E5DFD2;
}
.wa-modal-body {
padding: 18px 22px;
overflow-y: auto;
}
.wa-modal-foot {
display: flex;
gap: 10px;
justify-content: flex-end;
padding: 14px 22px 18px;
border-top: 1px solid #E5DFD2;
}
.wa-template-preview {
background: #F4E7D1;
border: 1px solid #ECDABC;
border-radius: 12px;
padding: 12px 14px;
font: 400 14px/1.45 'Manrope', sans-serif;
white-space: pre-wrap;
word-wrap: break-word;
color: #2A1F0F;
min-height: 70px;
}
/* =========================================================
Chat extras: emoji, reply, edit, context-menu, reactions,
selection mode, search bars, global hits
========================================================= */
/* Small icon buttons in thread header */
.wa-icon-btn-sm {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: transparent;
border: 0;
color: #7A7570;
cursor: pointer;
transition: all 120ms ease;
}
.wa-icon-btn-sm:hover {
background: #F1ECE3;
color: #161514;
}
.wa-icon-btn-sm:focus {
outline: 2px solid rgba(22,21,20,0.12);
outline-offset: 2px;
}
.wa-icon-btn-sm.active {
background: #161514;
color: #FAF7F2;
}
/* In-chat search bar */
.wa-search-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-bottom: 1px solid #E5DFD2;
background: rgba(255,255,255,0.8);
}
.wa-search-bar .field {
padding: 6px 12px;
font-size: 13px;
}
.wa-search-controls {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
/* Selection toolbar */
.wa-selection-bar {
display: flex;
align-items: center;
padding: 8px 16px;
border-bottom: 1px solid #E5DFD2;
background: #1A1715;
color: #FAF7F2;
}
.wa-selection-bar .btn-secondary {
background: rgba(255,255,255,0.12);
color: #FAF7F2;
border-color: rgba(255,255,255,0.2);
}
.wa-selection-bar .btn-secondary:hover {
background: rgba(255,255,255,0.2);
}
/* Global search hits in left column */
.wa-global-hits {
border-bottom: 1px solid #E5DFD2;
padding: 8px 14px 12px;
background: rgba(241,236,227,0.5);
}
.wa-global-hits-title {
font: 600 10px/1 'Manrope', sans-serif;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #7A7570;
margin-bottom: 6px;
}
.wa-global-hits-list {
list-style: none;
padding: 0;
margin: 0;
max-height: 200px;
overflow-y: auto;
}
.wa-global-hit {
padding: 6px 8px;
border-radius: 6px;
cursor: pointer;
font: 400 12px/1.4 'Manrope', sans-serif;
color: #3A3633;
transition: background 120ms ease;
}
.wa-global-hit:hover {
background: rgba(22,21,20,0.05);
}
.wa-global-hit .hit-author {
font-weight: 600;
color: #161514;
}
.wa-global-hit .hit-snippet mark {
background: rgba(201,146,58,0.3);
padding: 0 1px;
border-radius: 2px;
}
/* Reply / Edit preview above input */
.wa-reply-preview {
display: flex;
align-items: stretch;
gap: 10px;
padding: 8px 10px;
background: #F4E7D1;
border-radius: 8px;
margin-bottom: 8px;
animation: wa-bubble-in 180ms ease;
}
.wa-reply-preview .wa-reply-bar {
width: 3px;
background: #B7472A;
border-radius: 2px;
flex-shrink: 0;
}
.wa-edit-preview .wa-reply-bar {
background: #5E6E54;
}
.wa-reply-body {
flex: 1;
min-width: 0;
}
.wa-reply-author {
font: 600 11px/1.2 'Manrope', sans-serif;
color: #B7472A;
}
.wa-edit-preview .wa-reply-author {
color: #485840;
}
.wa-reply-text {
font: 400 12px/1.3 'Manrope', sans-serif;
color: #3A3633;
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.wa-reply-preview .btn-x {
align-self: center;
flex-shrink: 0;
}
/* Inline quoted context inside an actual bubble */
.wa-bubble-quoted {
display: flex;
gap: 6px;
margin-bottom: 5px;
padding: 4px 8px;
border-radius: 6px;
background: rgba(22,21,20,0.06);
border-left: 2.5px solid #B7472A;
}
.wa-bubble.out .wa-bubble-quoted {
background: rgba(22,21,20,0.08);
border-left-color: #5E6E54;
}
.wa-bubble-quoted-body {
flex: 1;
min-width: 0;
font: 400 11px/1.3 'Manrope', sans-serif;
color: #3A3633;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.wa-bubble-quoted-author {
font-weight: 600;
font-size: 10px;
color: #7A7570;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* Compose wrapper holding emoji-picker positioning */
#wa-compose-wrapper {
position: relative;
}
/* Emoji picker popup */
.wa-emoji-picker {
position: absolute;
bottom: 100%;
left: 12px;
margin-bottom: 8px;
background: #FFFFFF;
border: 1px solid #E5DFD2;
border-radius: 12px;
box-shadow: 0 12px 32px -8px rgba(22,21,20,0.18);
width: 320px;
max-height: 320px;
overflow: hidden;
display: flex;
flex-direction: column;
z-index: 20;
animation: wa-modal-in 180ms cubic-bezier(0.2,0.8,0.2,1);
}
.wa-emoji-cats {
display: flex;
border-bottom: 1px solid #E5DFD2;
padding: 4px 6px;
gap: 2px;
overflow-x: auto;
}
.wa-emoji-cat-btn {
flex: 1;
min-width: 32px;
padding: 6px 4px;
border: 0;
background: transparent;
cursor: pointer;
font-size: 16px;
border-radius: 6px;
transition: background 120ms ease;
}
.wa-emoji-cat-btn:hover {
background: #F1ECE3;
}
.wa-emoji-cat-btn.active {
background: #161514;
}
.wa-emoji-grid {
flex: 1;
overflow-y: auto;
padding: 8px;
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 2px;
}
.wa-emoji-cell {
background: transparent;
border: 0;
cursor: pointer;
padding: 6px;
border-radius: 6px;
font-size: 18px;
transition: background 120ms ease;
}
.wa-emoji-cell:hover {
background: #F1ECE3;
}
/* Bubble context menu */
.wa-bubble-menu {
position: fixed;
z-index: 60;
min-width: 180px;
background: #FFFFFF;
border: 1px solid #E5DFD2;
border-radius: 10px;
box-shadow: 0 16px 36px -8px rgba(22,21,20,0.25);
padding: 4px;
animation: wa-modal-in 140ms cubic-bezier(0.2,0.8,0.2,1);
}
.wa-bubble-menu-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 12px;
border: 0;
background: transparent;
color: #3A3633;
font: 500 13px/1 'Manrope', sans-serif;
text-align: left;
border-radius: 6px;
cursor: pointer;
transition: background 120ms ease;
}
.wa-bubble-menu-item:hover {
background: #FAF7F2;
}
.wa-bubble-menu-item svg {
color: #7A7570;
}
.wa-bubble-menu-item.danger {
color: #9A3D24;
}
.wa-bubble-menu-item.danger svg {
color: #9A3D24;
}
.wa-bubble-menu-item.danger:hover {
background: rgba(183,71,42,0.08);
}
.wa-bubble-menu-sep {
height: 1px;
background: #E5DFD2;
margin: 4px 6px;
}
/* Reaction bar (quick-emoji hover) */
.wa-reaction-bar {
position: fixed;
z-index: 61;
display: flex;
gap: 2px;
background: #FFFFFF;
border: 1px solid #E5DFD2;
border-radius: 999px;
padding: 3px 6px;
box-shadow: 0 10px 24px -8px rgba(22,21,20,0.2);
animation: wa-modal-in 140ms cubic-bezier(0.2,0.8,0.2,1);
}
.wa-reaction-emoji {
background: transparent;
border: 0;
cursor: pointer;
font-size: 20px;
padding: 4px 6px;
border-radius: 999px;
transition: transform 120ms ease, background 120ms ease;
}
.wa-reaction-emoji:hover {
background: #F1ECE3;
transform: scale(1.15);
}
.wa-reaction-emoji:last-child {
font-size: 13px;
color: #B7472A;
}
/* Reactions tag below a bubble */
.wa-bubble-reactions {
position: absolute;
bottom: -10px;
right: 8px;
display: flex;
gap: 2px;
background: #FFFFFF;
border: 1px solid #E5DFD2;
border-radius: 999px;
padding: 2px 6px;
font-size: 12px;
box-shadow: 0 2px 4px rgba(22,21,20,0.06);
}
.wa-bubble.out .wa-bubble-reactions {
left: 8px;
right: auto;
}
/* Edited marker */
.wa-bubble-edited {
font-style: italic;
margin-right: 4px;
color: #7A7570;
}
/* Deleted state */
.wa-bubble.deleted {
background: #F1ECE3 !important;
color: #7A7570;
font-style: italic;
}
/* Selected state */
.wa-bubble.selected {
outline: 2px solid #B7472A;
outline-offset: 2px;
}
.wa-bubble.selectable {
cursor: pointer;
}
.wa-bubble.selectable::before {
content: '';
position: absolute;
top: 4px;
right: -22px;
width: 16px;
height: 16px;
border-radius: 999px;
border: 1.5px solid #C9C2B6;
background: #FFFFFF;
}
.wa-bubble.out.selectable::before {
left: -22px;
right: auto;
}
.wa-bubble.selected::after {
content: '';
position: absolute;
top: 4px;
right: -22px;
width: 16px;
height: 16px;
border-radius: 999px;
background: #B7472A;
box-shadow: inset 0 0 0 3px #FFFFFF, inset 0 0 0 4px #B7472A;
}
.wa-bubble.out.selected::after {
left: -22px;
right: auto;
}
/* Search match highlight inside thread */
.wa-bubble.search-match {
box-shadow: 0 0 0 2px rgba(201,146,58,0.5);
}
.wa-bubble mark.wa-hit {
background: rgba(201,146,58,0.4);
padding: 0 2px;
border-radius: 2px;
}
.wa-bubble.search-current {
box-shadow: 0 0 0 2px #B7472A;
}
/* Wie stuurde dit uitgaande bericht — alleen voor kantoor zichtbaar, nooit voor
de klant. Klein en terughoudend: het hoort bij de tijd en de vinkjes, niet bij
de inhoud. Drie soorten, omdat "een collega antwoordde" iets anders betekent
dan "de balie antwoordde namens ons". */
.wa-afzender {
font-size: 10px;
line-height: 1;
padding: 1px 5px;
border-radius: 999px;
margin-right: 4px;
white-space: nowrap;
max-width: 14ch;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
.wa-afzender-mens {
background: rgba(12, 76, 162, 0.10);
color: #0A3C82;
}
.wa-afzender-balie {
background: rgba(209, 164, 43, 0.18);
color: #7A5E12;
}
.wa-afzender-systeem{
background: rgba(107, 114, 128, 0.14);
color: #4B5563;
}
/* ---------------------------------------------------------- werkvoorraad ---
Vult het rechterpaneel wanneer er geen gesprek open is. Bewust een tabel-
achtige opzet met vaste kolommen: hier is ruimte zat, dus niets hoeft af te
kappen — precies het tegenovergestelde van de smalle lijst links. */
.wa-voorraad {
width: 100%;
max-width: 860px;
padding: 20px 24px;
align-self: flex-start;
}
.wa-voorraad-kop {
display: flex;
align-items: baseline;
justify-content: space-between;
padding-bottom: 8px;
margin-bottom: 4px;
border-bottom: 1px solid #E5DFD2;
}
.wa-voorraad-telling {
font: 500 12px/1 'Manrope', sans-serif;
color: #7A7570;
}
.wa-voorraad-lijst {
display: flex;
flex-direction: column;
}
.wa-voorraad-rij {
display: grid;
grid-template-columns: minmax(140px, 1.4fr) minmax(0, 1.2fr) minmax(90px, 0.8fr) auto;
gap: 12px;
align-items: center;
width: 100%;
padding: 7px 8px;
border: 0;
border-bottom: 1px solid #F0EBE1;
background: transparent;
text-align: left;
cursor: pointer;
font: inherit;
}
.wa-voorraad-rij:hover {
background: rgba(22,21,20,0.035);
}
.wa-voorraad-naam {
font: 600 13px/1.3 'Manrope', sans-serif;
color: #161514;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wa-voorraad-labels {
display: flex;
gap: 4px;
flex-wrap: nowrap;
overflow: hidden;
}
.wa-voorraad-label {
font: 600 10px/1 'Manrope', sans-serif;
padding: 3px 7px;
border-radius: 999px;
white-space: nowrap;
}
.wa-voorraad-wie {
font: 400 12px/1 'Manrope', sans-serif;
color: #5A5550;
}
.wa-voorraad-niemand {
color: #A39C93;
font-style: italic;
}
.wa-voorraad-wacht {
font: 600 12px/1 'Manrope', sans-serif;
color: #5A5550;
justify-self: end;
white-space: nowrap;
}
/* Wachttijd is de enige waarde met een termijn eraan; die krijgt kleur zodra
hij begint te knellen, en pas rood als het echt te lang duurt. */
.wa-voorraad-rij.lang .wa-voorraad-wacht {
color: #8A5A12;
}
.wa-voorraad-rij.te-lang .wa-voorraad-wacht {
color: #B7472A;
font-weight: 700;
}
.wa-voorraad-rij.te-lang .wa-voorraad-naam {
color: #8E2F1B;
}
/* "Ik pak dit op" — tijdelijk de balie stilzetten. Bewust rustiger dan de
balie-schakelaar ernaast: dat is een permanente stand, deze loopt vanzelf af
en hoort dus niet als alarm te lezen. Actief wordt hij goud, in dezelfde
familie als de rest van de accenten. */
.wa-balie-pauze {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
border: 1px solid #E1E6EF;
border-radius: 999px;
background: #FFFFFF;
color: #5A5550;
font: 600 11px/1.4 'Manrope', sans-serif;
white-space: nowrap;
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.wa-balie-pauze:hover:not(:disabled) {
background: #F7F4EE;
border-color: #D8CFBE;
}
.wa-balie-pauze.actief {
background: rgba(209, 164, 43, 0.16);
border-color: rgba(209, 164, 43, 0.45);
color: #7A5E12;
}
/* Staat de balie permanent uit, dan valt er niets te pauzeren. Zichtbaar laten
maar duidelijk buiten werking, zodat de knop niet lijkt te ontbreken. */
.wa-balie-pauze:disabled {
opacity: 0.4;
cursor: default;
}
/* Vertaling: pills en original-reveal
Uitgesneden uit public/index.html (\3c style>-blok), regels 1580-1687 van dat blok.
Mechanisch verplaatst: geen enkele regel is aangepast. */
/* =========================================================
Translation pills + original-reveal
========================================================= */
.wa-translation-pill {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 4px;
padding: 2px 8px;
background: rgba(94,110,84,0.12);
color: #485840;
border: 0;
border-radius: 999px;
font: 600 9px/1 'Manrope', sans-serif;
letter-spacing: 0.04em;
cursor: pointer;
transition: background 120ms ease;
}
.wa-translation-pill:hover {
background: rgba(94,110,84,0.22);
}
.wa-translation-pill svg {
color: #485840;
}
.wa-bubble.out .wa-translation-pill {
background: rgba(201,146,58,0.18);
color: #7A5618;
}
.wa-bubble.out .wa-translation-pill svg {
color: #7A5618;
}
.wa-bubble-original {
margin-top: 6px;
padding: 6px 10px;
background: rgba(22,21,20,0.04);
border-left: 2px solid rgba(22,21,20,0.15);
border-radius: 0 6px 6px 0;
animation: wa-bubble-in 180ms ease;
}
.wa-original-label {
font: 600 9px/1 'Manrope', sans-serif;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #7A7570;
margin-bottom: 4px;
}
.wa-original-text {
font: 400 12px/1.4 'Manrope', sans-serif;
color: #3A3633;
white-space: pre-wrap;
word-break: break-word;
}
/* Compose translate-bar */
.wa-translate-bar {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 8px;
background: rgba(201,146,58,0.08);
border: 1px solid rgba(201,146,58,0.25);
border-radius: 8px;
margin-bottom: 8px;
}
.wa-translate-toggle {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font: 600 12px/1 'Manrope', sans-serif;
color: #3A3633;
}
.wa-translate-toggle input {
display: none;
}
.wa-translate-toggle-slider {
width: 30px;
height: 16px;
background: #C9C2B6;
border-radius: 999px;
position: relative;
transition: background 160ms ease;
flex-shrink: 0;
}
.wa-translate-toggle-slider::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 12px;
height: 12px;
border-radius: 999px;
background: #FFFFFF;
transition: transform 160ms ease;
box-shadow: 0 1px 2px rgba(22,21,20,0.2);
}
.wa-translate-toggle input:checked + .wa-translate-toggle-slider {
background: #5E6E54;
}
.wa-translate-toggle input:checked + .wa-translate-toggle-slider::after {
transform: translateX(14px);
}
.wa-translate-lang {
background: #FFFFFF;
border: 1px solid #E5DFD2;
border-radius: 6px;
padding: 4px 8px;
font: 500 12px/1 'Manrope', sans-serif;
color: #161514;
cursor: pointer;
}
.wa-translate-preview {
width: 100%;
margin-top: 6px;
padding: 6px 10px;
background: #FFFFFF;
border: 1px dashed rgba(201,146,58,0.4);
border-radius: 6px;
font: 400 12px/1.4 'Manrope', sans-serif;
color: #3A3633;
flex-basis: 100%;
white-space: pre-wrap;
word-break: break-word;
max-height: 80px;
overflow-y: auto;
}
/* Features: filter, pins/mute, contactpaneel, media, escalaties, lightbox, quick replies
Uitgesneden uit public/index.html (\3c style>-blok), regels 1889-2481 van dat blok.
Mechanisch verplaatst: geen enkele regel is aangepast. */
/* =========================================================
Filter button + popover
========================================================= */
.wa-search-row {
position: relative;
}
.wa-filter-btn {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: 26px;
height: 26px;
border-radius: 6px;
background: transparent;
border: 0;
color: #7A7570;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 120ms ease;
}
.wa-filter-btn:hover {
background: #F1ECE3;
color: #161514;
}
.wa-filter-btn.active {
background: #B7472A;
color: #FAF7F2;
}
.wa-filter-count {
position: absolute;
top: -3px;
right: -3px;
min-width: 14px;
height: 14px;
padding: 0 3px;
background: #B7472A;
color: #FFFFFF;
border-radius: 999px;
font: 700 9px/14px 'Manrope', sans-serif;
text-align: center;
}
.wa-filter-pills {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 8px;
}
.wa-filter-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px 3px 10px;
background: #161514;
color: #FAF7F2;
border-radius: 999px;
font: 600 10px/1 'Manrope', sans-serif;
letter-spacing: 0.02em;
}
.wa-filter-pill button {
background: transparent;
border: 0;
color: rgba(250,247,242,0.6);
cursor: pointer;
padding: 0 0 0 2px;
display: inline-flex;
border-radius: 999px;
}
.wa-filter-pill button:hover {
color: #FAF7F2;
}
.wa-filter-popover {
position: absolute;
top: 72px;
left: 18px;
right: 18px;
z-index: 30;
background: #FFFFFF;
border: 1px solid #E5DFD2;
border-radius: 12px;
box-shadow: 0 16px 36px -10px rgba(22,21,20,0.22);
overflow: hidden;
animation: wa-modal-in 180ms cubic-bezier(0.2,0.8,0.2,1);
}
.wa-fp-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid #E5DFD2;
}
.wa-fp-body {
padding: 14px 16px;
max-height: 60vh;
overflow-y: auto;
}
.wa-fp-group {
margin-bottom: 14px;
}
.wa-fp-group:last-child {
margin-bottom: 0;
}
.wa-fp-group-label {
font: 700 9px/1 'Manrope', sans-serif;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #7A7570;
margin-bottom: 8px;
}
.wa-fp-chips {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.wa-fp-chip {
padding: 6px 12px;
border: 1px solid #E5DFD2;
border-radius: 999px;
background: #FFFFFF;
font: 500 12px/1 'Manrope', sans-serif;
color: #3A3633;
cursor: pointer;
transition: all 120ms ease;
}
.wa-fp-chip:hover {
border-color: #161514;
}
.wa-fp-chip.active {
background: #161514;
color: #FAF7F2;
border-color: #161514;
}
.wa-fp-quick {
display: flex;
gap: 8px;
margin-top: 6px;
}
.wa-fp-footer {
padding: 10px 16px 14px;
border-top: 1px solid #E5DFD2;
}
/* =========================================================
Pin / mute markers + SSE banner
========================================================= */
.wa-row-pin {
width: 12px;
height: 12px;
color: #B7472A;
margin-right: 4px;
flex-shrink: 0;
}
.wa-row-mute {
width: 12px;
height: 12px;
color: #7A7570;
margin-right: 4px;
opacity: 0.8;
flex-shrink: 0;
}
.wa-sse-banner {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: rgba(183,71,42,0.10);
color: #9A3D24;
font: 500 11px/1.2 'Manrope', sans-serif;
border-bottom: 1px solid rgba(183,71,42,0.2);
animation: wa-bubble-in 200ms ease;
}
/* =========================================================
Contact info side panel
========================================================= */
.wa-contact-panel {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 360px;
max-width: 90vw;
background: #FFFFFF;
border-left: 1px solid #E5DFD2;
box-shadow: -16px 0 32px -16px rgba(22,21,20,0.18);
z-index: 50;
display: flex;
flex-direction: column;
animation: wa-cp-slide-in 220ms cubic-bezier(0.2,0.8,0.2,1);
}
@keyframes wa-cp-slide-in {
from {
transform: translateX(100%);
opacity: 0.5;
}
to {
transform: none;
opacity: 1;
}
}
.wa-cp-overlay {
position: fixed;
inset: 0;
background: rgba(22,21,20,0.32);
z-index: 49;
animation: wa-fade-in 220ms ease;
}
.wa-cp-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 22px 14px;
border-bottom: 1px solid #E5DFD2;
}
/* min-height: 0 is hier dragend. Een flex-kind krimpt standaard niet onder de
hoogte van zijn eigen inhoud, dus zonder deze regel werd dit blok net zo
hoog als alles wat erin staat: overflow-y kreeg nooit iets te doen, het
paneel scrollde niet, en de onderste knoppen (archiveren, blokkeren)
verdwenen achter de vaste voetbalk. Op een telefoon, waar het paneel het
hele scherm vult, waren die daarmee onbereikbaar. */
.wa-cp-body {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 18px 22px;
}
.wa-cp-section {
margin-bottom: 6px;
}
.wa-cp-footer {
padding: 14px 22px 18px;
border-top: 1px solid #E5DFD2;
}
.wa-cp-toggles {
display: flex;
flex-direction: column;
gap: 12px;
}
.wa-cp-toggle {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
font: 500 13px/1.2 'Manrope', sans-serif;
color: #3A3633;
}
.wa-cp-toggle input {
display: none;
}
.wa-cp-toggle .wa-translate-toggle-slider {
width: 36px;
height: 20px;
flex-shrink: 0;
}
.wa-cp-toggle .wa-translate-toggle-slider::after {
width: 16px;
height: 16px;
}
.wa-cp-toggle input:checked + .wa-translate-toggle-slider::after {
transform: translateX(16px);
}
.wa-cp-summary {
margin-top: 12px;
padding: 12px 14px;
background: #FAF7F2;
border: 1px solid #E5DFD2;
border-radius: 8px;
font: 400 13px/1.55 'Manrope', sans-serif;
color: #3A3633;
white-space: pre-wrap;
}
@media (max-width: 820px) {
.wa-contact-panel {
width: 100vw;
width: 100dvw;
max-width: none;
}
}
/* AI summary modal */
.wa-summary-content {
font: 400 14px/1.55 'Manrope', sans-serif;
color: #161514;
white-space: pre-wrap;
max-height: 60vh;
overflow-y: auto;
}
/* Globale noodrem in het accountvenster. Bewust zwaarder aangezet dan de
pil per gesprek: dit raakt alle klanten tegelijk. */
.balie-globaal {
border: 1px solid #DCC7C7;
border-radius: 12px;
padding: 14px 16px;
background: #FCF9F9;
}
.balie-globaal.actief {
border-color: #C08A8A;
background: #F7EDED;
}
.balie-globaal-kop {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.balie-globaal-status {
font: 700 12px/1 'Manrope', sans-serif;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #226041;
}
.balie-globaal.actief .balie-globaal-status {
color: #8A3A3A;
}
.balie-globaal-uitleg {
font-size: 12px;
line-height: 1.5;
color: #6B6560;
margin-top: 8px;
}
/* =========================================================
Media en documenten van een gesprek
---------------------------------------------------------
Zoals het media-tabblad in een chat-app: een contract of foto
terugvinden zonder maanden terug te scrollen. Het raster vult
zich naar beschikbare breedte, dus geen vaste kolomaantallen.
========================================================= */
.wa-media-tabs {
display: flex;
gap: 4px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.wa-media-tab {
border: 1px solid #E5DFD2;
background: #fff;
border-radius: 999px;
padding: 4px 10px;
font: 600 11px/1.4 'Manrope', sans-serif;
color: #6B6058;
cursor: pointer;
white-space: nowrap;
}
.wa-media-tab:hover {
background: #FAF7F2;
}
.wa-media-tab.actief {
background: #161514;
border-color: #161514;
color: #fff;
}
.wa-media-tab:focus-visible {
outline: 2px solid #1F3A6E;
outline-offset: 1px;
}
.wa-media-raster {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(clamp(64px, 22%, 96px), 1fr));
gap: 4px;
}
.wa-media-tegel {
position: relative;
aspect-ratio: 1;
border-radius: 8px;
overflow: hidden;
background: #F1ECE3;
border: 0;
padding: 0;
cursor: zoom-in;
}
.wa-media-tegel img, .wa-media-tegel video {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
display: block;
}
.wa-media-tegel:focus-visible {
outline: 2px solid #1F3A6E;
outline-offset: 2px;
}
.wa-media-video-merk {
position: absolute;
right: 4px;
bottom: 4px;
background: rgba(22,21,20,0.72);
color: #fff;
border-radius: 4px;
padding: 1px 4px;
font-size: 9px;
line-height: 1.5;
}
.wa-media-uit {
position: absolute;
left: 4px;
top: 4px;
font-size: 10px;
opacity: 0.9;
}
.wa-media-lijst {
display: flex;
flex-direction: column;
gap: 4px;
}
.wa-media-rij {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
border: 1px solid #EFE7DA;
border-radius: 8px;
padding: 7px 9px;
background: #fff;
}
.wa-media-rij:hover {
background: #FAF7F2;
}
.wa-media-rij-naam {
font: 600 12px/1.3 'Manrope', sans-serif;
color: #161514;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wa-media-rij-meta {
font: 400 11px/1.3 'Manrope', sans-serif;
color: #8A8079;
}
.wa-media-leeg {
font: 400 12px/1.5 'Manrope', sans-serif;
color: #8A8079;
padding: 8px 0;
}
/* =========================================================
Openstaande escalaties — wat er op een mens wacht
---------------------------------------------------------
Staat boven de gesprekslijst, want dit is het enige in dit
scherm waar een termijn aan hangt. Verdwijnt volledig als
er niets openstaat; een leeg kadertje is ruis.
========================================================= */
.wa-openstaand {
border-bottom: 1px solid #E5DFD2;
background: linear-gradient(180deg, #FFF9F0 0%, #FDF4E8 100%);
}
.wa-openstaand[hidden] {
display: none;
}
.wa-open-kop {
display: flex;
align-items: center;
gap: 8px;
padding: 10px var(--wa-pad-x, 14px) 8px;
font: 700 11px/1 'Manrope', sans-serif;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #8A5A18;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.wa-open-kop:focus-visible {
outline: 2px solid #8A5A18;
outline-offset: -2px;
}
.wa-open-telling {
background: #B7472A;
color: #fff;
border-radius: 999px;
min-width: 18px;
height: 18px;
padding: 0 5px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-variant-numeric: tabular-nums;
}
.wa-open-chevron {
margin-left: auto;
transition: transform 160ms ease;
}
.wa-openstaand.dicht .wa-open-chevron {
transform: rotate(-90deg);
}
.wa-openstaand.dicht .wa-open-lijst {
display: none;
}
/* De lijst mag de gesprekken nooit wegdrukken. Drie regels zijn genoeg om te
zien dát er iets ligt; de rest scrolt. Geen vaste pixelhoogte, want deze
app draait ook op flip- en foldablephones. */
.wa-open-lijst {
padding: 0 8px 8px;
display: flex;
flex-direction: column;
gap: 4px;
max-height: clamp(96px, 26vh, 240px);
overflow-y: auto;
overscroll-behavior: contain;
}
.wa-open-item {
background: #fff;
border: 1px solid #EFE2CE;
border-radius: 8px;
padding: 5px 8px;
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
/* Eén melding per gesprek. Meerdere meldingen voor dezelfde klant zijn geen
losse taken maar één zaak die nog ligt — die telt het bolletje. */
.wa-open-aantal {
background: #EFE2CE;
color: #7A5A1E;
border-radius: 999px;
padding: 0 6px;
height: 16px;
display: inline-flex;
align-items: center;
font: 700 10px/1 'Manrope', sans-serif;
flex-shrink: 0;
}
.wa-open-item.spoed {
border-color: #E0B4A6;
background: #FFF6F3;
}
/* Antwoord wél getypt, nooit verstuurd: WhatsApp sloot het 24-uursvenster.
Vraagt een andere actie dan de rest — bellen in plaats van typen. */
.wa-open-item.verlopen {
border-color: #C9BCA5;
background: #FBF8F2;
}
.wa-open-bellen {
display: inline-flex;
align-items: center;
gap: 4px;
background: #F1E4CE;
color: #7A5A1E;
border-radius: 5px;
padding: 1px 6px;
font: 700 10px/1.5 'Manrope', sans-serif;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.wa-open-body {
min-width: 0;
flex: 1 1 auto;
display: flex;
align-items: baseline;
gap: 6px;
overflow: hidden;
}
.wa-open-naam {
font: 600 12px/1.4 'Manrope', sans-serif;
color: #161514;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 1;
}
.wa-open-meta {
font: 400 11px/1.4 'Manrope', sans-serif;
color: #7A6F63;
display: flex;
gap: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 10;
}
.wa-open-wacht {
font-variant-numeric: tabular-nums;
}
.wa-open-wacht.lang {
color: #B7472A;
font-weight: 600;
}
/* De vraag stond hier als twee regels tekst per melding. Dat kostte de meeste
ruimte en voegde weinig toe: je leest hem toch in het gesprek zelf. Nu
alleen als tooltip. */
.wa-open-acties {
display: flex;
flex-direction: row;
gap: 4px;
flex-shrink: 0;
}
.wa-open-knop {
border: 1px solid #DDD3C2;
background: #fff;
border-radius: 6px;
padding: 2px 7px;
font: 600 11px/1.6 'Manrope', sans-serif;
color: #4A443C;
cursor: pointer;
white-space: nowrap;
}
.wa-open-knop:hover {
background: #F7F2E9;
border-color: #C9BCA5;
}
.wa-open-knop:focus-visible {
outline: 2px solid #1F3A6E;
outline-offset: 1px;
}
@media (prefers-reduced-motion: reduce) {
.wa-open-chevron {
transition: none;
}
}
/* Noodrem: balie aan/uit per gesprek. Groen = de assistent antwoordt mee,
grijs-rood = alleen mensen. Bewust naast het venster-pilletje, want het
zijn allebei dingen die bepalen of er iets uit kan gaan. */
.wa-balie-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid transparent;
font: 600 11px/1 'Manrope', sans-serif;
letter-spacing: 0.02em;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.wa-balie-pill:focus-visible {
outline: 2px solid #1F3A6E;
outline-offset: 2px;
}
.wa-balie-pill .wa-balie-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.wa-balie-pill.aan {
background: #E8F3EC;
border-color: #BBD9C6;
color: #226041;
}
.wa-balie-pill.aan:hover {
background: #DAEBE1;
border-color: #9CC6AD;
}
.wa-balie-pill.uit {
background: #F4EDED;
border-color: #DCC7C7;
color: #8A3A3A;
}
.wa-balie-pill.uit:hover {
background: #ECDFDF;
border-color: #C9ACAC;
}
.wa-balie-pill[disabled] {
opacity: 0.45;
cursor: default;
}
@media (max-width: 640px) {
.wa-balie-pill {
padding: 4px 8px;
font-size: 10px;
}
.wa-balie-pill .wa-balie-label {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.wa-balie-pill {
transition: none;
}
}
/* =========================================================
Media-lightbox: vergroten + door de thread bladeren
========================================================= */
.wa-lb {
position: fixed;
inset: 0;
z-index: 3000;
display: flex;
align-items: center;
justify-content: center;
background: rgba(12, 11, 10, 0.92);
padding: 56px 16px 72px;
}
.wa-lb[hidden] {
display: none;
}
.wa-lb-stage {
position: relative;
max-width: min(1100px, 100%);
max-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.wa-lb-stage img, .wa-lb-stage video {
max-width: 100%;
max-height: calc(100vh - 128px);
display: block;
border-radius: 6px;
background: #000;
}
.wa-lb-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 46px;
height: 46px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.22);
background: rgba(24,22,20,0.72);
color: #fff;
display: grid;
place-items: center;
cursor: pointer;
transition: background 140ms ease, border-color 140ms ease;
}
.wa-lb-btn:hover {
background: rgba(48,44,40,0.92);
border-color: rgba(255,255,255,0.4);
}
.wa-lb-btn:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
.wa-lb-btn[disabled] {
opacity: 0.25;
cursor: default;
}
.wa-lb-prev {
left: 14px;
}
.wa-lb-next {
right: 14px;
}
/* Vult het scherm, maar met dvh zodat de adresbalk op mobiel niets afsnijdt. */
.wa-doc {
position: fixed;
inset: 0;
z-index: 90;
background: #24211E;
display: flex;
flex-direction: column;
}
.wa-doc[hidden] {
display: none;
}
.wa-doc-kop {
display: flex;
align-items: center;
gap: 8px;
padding: 8px clamp(8px, 2vw, 16px);
background: #181614;
color: #F3EEE6;
flex-shrink: 0;
}
.wa-doc-naam {
font: 600 13px/1.4 'Manrope', sans-serif;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1 1 auto;
}
.wa-doc-knop {
flex-shrink: 0;
border: 1px solid rgba(243,238,230,0.35);
background: transparent;
color: #F3EEE6;
border-radius: 6px;
padding: 4px 10px;
font: 600 12px/1.4 'Manrope', sans-serif;
cursor: pointer;
text-decoration: none;
}
.wa-doc-knop:hover {
border-color: #fff;
background: rgba(255,255,255,0.08);
}
.wa-doc-vlak {
flex: 1 1 auto;
min-height: 0;
background: #33302C;
}
.wa-doc-vlak iframe, .wa-doc-vlak embed {
width: 100%;
height: 100%;
border: 0;
display: block;
}
.wa-doc-vlak img {
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
.wa-doc-tekst {
height: 100%;
overflow: auto;
margin: 0;
padding: clamp(10px, 3vw, 24px);
background: #FBF8F2;
color: #1B1917;
font: 400 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
white-space: pre-wrap;
word-break: break-word;
}
.wa-doc-geen {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 24px;
text-align: center;
color: #E6DFD4;
font: 400 13px/1.6 'Manrope', sans-serif;
}
.wa-lb-close {
position: absolute;
top: 14px;
right: 16px;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.22);
background: rgba(24,22,20,0.72);
color: #fff;
display: grid;
place-items: center;
cursor: pointer;
}
.wa-lb-close:hover {
background: rgba(48,44,40,0.92);
}
.wa-lb-bar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
padding: 14px 18px;
color: rgba(255,255,255,0.82);
font: 400 13px/1.4 'Manrope', sans-serif;
}
.wa-lb-count {
font-variant-numeric: tabular-nums;
}
.wa-lb-caption {
max-width: 52ch;
text-align: center;
color: rgba(255,255,255,0.68);
}
.wa-lb-dl {
color: rgba(255,255,255,0.82);
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,0.3);
}
.wa-lb-dl:hover {
color: #fff;
border-color: #fff;
}
@media (max-width: 640px) {
.wa-lb {
padding: 48px 6px 64px;
}
.wa-lb-btn {
width: 38px;
height: 38px;
}
.wa-lb-prev {
left: 4px;
}
.wa-lb-next {
right: 4px;
}
.wa-lb-caption {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.wa-lb-btn {
transition: none;
}
}
/* =========================================================
Quick replies popover
========================================================= */
.wa-quick-replies {
position: absolute;
bottom: 100%;
left: 12px;
margin-bottom: 8px;
width: 360px;
max-width: calc(100vw - 24px);
background: #FFFFFF;
border: 1px solid #E5DFD2;
border-radius: 12px;
box-shadow: 0 12px 32px -8px rgba(22,21,20,0.18);
z-index: 25;
max-height: 380px;
display: flex;
flex-direction: column;
animation: wa-modal-in 180ms cubic-bezier(0.2,0.8,0.2,1);
}
.wa-qr-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-bottom: 1px solid #E5DFD2;
}
.wa-qr-list {
list-style: none;
margin: 0;
padding: 4px;
overflow-y: auto;
flex: 1;
}
.wa-qr-item {
padding: 8px 12px;
border-radius: 8px;
cursor: pointer;
transition: background 120ms ease;
display: grid;
grid-template-columns: 1fr auto;
gap: 6px;
align-items: center;
}
.wa-qr-item:hover {
background: #FAF7F2;
}
.wa-qr-shortcut {
font: 700 10px/1 'Manrope', sans-serif;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #B7472A;
margin-bottom: 3px;
}
.wa-qr-text {
font: 400 12px/1.4 'Manrope', sans-serif;
color: #3A3633;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.wa-qr-del {
width: 22px;
height: 22px;
color: #7A7570;
background: transparent;
border: 0;
cursor: pointer;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 120ms ease, background 120ms ease;
}
.wa-qr-item:hover .wa-qr-del {
opacity: 1;
}
.wa-qr-del:hover {
background: rgba(183,71,42,0.1);
color: #B7472A;
}
.wa-qr-form {
padding: 12px 14px;
border-top: 1px solid #E5DFD2;
background: #FAF7F2;
}
.wa-qr-form .field {
margin-bottom: 8px;
}
/* Back-to-list button for mobile */
.wa-back-to-list {
display: none;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 8px;
background: transparent;
border: 0;
color: #161514;
cursor: pointer;
flex-shrink: 0;
margin-right: 4px;
}
.wa-back-to-list:hover {
background: #F1ECE3;
}
/* Gelijk aan de een-kolom-grens: anders kan iemand tussen 768 en 820 pixels
wel een gesprek openen maar niet terug naar de lijst. */
@media (max-width: 820px) {
.wa-back-to-list {
display: inline-flex;
}
}
/* Account: gebruikersmenu in de header en gebruikersbeheer
Uitgesneden uit public/index.html (\3c style>-blok), regels 2482-2653 van dat blok.
Mechanisch verplaatst: geen enkele regel is aangepast. */
/* =========================================================
User menu in header
========================================================= */
.user-menu {
position: relative;
}
.user-menu-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 8px 5px 5px;
background: #FFFFFF;
border: 1px solid #E5DFD2;
border-radius: 999px;
cursor: pointer;
color: #3A3633;
font: 600 12px/1 'Manrope', sans-serif;
transition: border-color 120ms ease, background 120ms ease;
}
.user-menu-btn:hover {
border-color: #C9C2B6;
}
.user-menu-btn[aria-expanded="true"] {
border-color: #161514;
background: #FAF7F2;
}
.user-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 999px;
background: linear-gradient(135deg, #161514 0%, #3A3633 100%);
color: #FAF7F2;
font: 700 12px/1 'Manrope', sans-serif;
letter-spacing: -0.01em;
flex-shrink: 0;
}
.avatar-lg {
width: 48px;
height: 48px;
font-size: 18px;
}
.user-meta {
flex-direction: column;
align-items: flex-start;
gap: 2px;
min-width: 0;
}
.user-name {
font: 600 13px/1.1 'Manrope', sans-serif;
color: #161514;
max-width: 140px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-role {
font: 600 9px/1 'Manrope', sans-serif;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #7A7570;
}
.user-menu-dropdown {
position: absolute;
right: 0;
top: calc(100% + 6px);
min-width: 220px;
background: #FFFFFF;
border: 1px solid #E5DFD2;
border-radius: 12px;
box-shadow: 0 12px 32px -8px rgba(22,21,20,0.18);
padding: 6px;
z-index: 40;
animation: wa-modal-in 160ms cubic-bezier(0.2,0.8,0.2,1);
}
.user-menu-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 9px 12px;
border: 0;
background: transparent;
border-radius: 8px;
cursor: pointer;
color: #3A3633;
font: 500 13px/1 'Manrope', sans-serif;
text-align: left;
transition: background 120ms ease;
}
.user-menu-item:hover {
background: #FAF7F2;
color: #161514;
}
.user-menu-item svg {
color: #7A7570;
}
.user-menu-item:hover svg {
color: #B7472A;
}
.user-menu-sep {
height: 1px;
background: #E5DFD2;
margin: 4px 6px;
}
/* Account modal summary */
.account-summary {
display: flex;
align-items: center;
gap: 14px;
}
/* Users add-block */
.users-add-block {
border: 1px dashed #E5DFD2;
border-radius: 12px;
padding: 14px 16px;
background: #FAF7F2;
}
.users-add-block[open] {
background: #FFFFFF;
border-style: solid;
}
.users-add-summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
font: 600 13px/1 'Manrope', sans-serif;
color: #B7472A;
}
.users-add-summary::-webkit-details-marker {
display: none;
}
.users-add-block[open] .users-add-summary svg {
transform: rotate(45deg);
}
.users-add-summary svg {
transition: transform 200ms ease;
}
/* Users list */
.users-list {
border: 1px solid #E5DFD2;
border-radius: 12px;
overflow: hidden;
}
.user-row {
display: grid;
grid-template-columns: 36px 1fr auto auto;
gap: 12px;
align-items: center;
padding: 12px 14px;
border-bottom: 1px solid #E5DFD2;
background: #FFFFFF;
}
.user-row:last-child {
border-bottom: 0;
}
.user-row.inactive {
background: #FAF7F2;
opacity: 0.65;
}
.user-row-meta {
min-width: 0;
}
.user-row-name {
font: 600 14px/1.2 'Manrope', sans-serif;
color: #161514;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-row-email {
font: 400 12px/1.3 'Manrope', sans-serif;
color: #7A7570;
font-family: 'IBM Plex Mono', ui-monospace, monospace;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-row-badge {
display: inline-flex;
align-items: center;
padding: 3px 8px;
border-radius: 999px;
font: 700 9px/1 'Manrope', sans-serif;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.user-row-badge.admin {
background: rgba(22,21,20,0.08);
color: #161514;
}
.user-row-badge.user {
background: rgba(94,110,84,0.12);
color: #485840;
}
.user-row-badge.you {
background: rgba(183,71,42,0.12);
color: #9A3D24;
}
.user-row-actions {
display: flex;
gap: 4px;
}
.user-row-actions button {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: transparent;
border: 1px solid transparent;
color: #7A7570;
cursor: pointer;
transition: all 120ms ease;
}
.user-row-actions button:hover {
background: #FAF7F2;
border-color: #E5DFD2;
color: #161514;
}
.user-row-actions button.danger:hover {
color: #9A3D24;
border-color: rgba(183,71,42,0.3);
}
/* Labels, toewijzing en bulk-selectie in de gesprekkenlijst.
Kleuren van de labels komen uit de database en staan dus als inline-style op
het chipje zelf; hier staat alleen de vorm. Huisstijl (blauw/goud, serif)
blijft ongemoeid. */
.wa-label-chip {
display: inline-flex;
align-items: center;
padding: 1px 7px;
border-radius: 999px;
font-size: 11px;
line-height: 16px;
font-weight: 600;
white-space: nowrap;
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
}
.wa-label-chip.klein {
font-size: 10px;
padding: 0 6px;
line-height: 15px;
max-width: 96px;
}
.wa-row-labels {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
margin-top: 3px;
}
.wa-row-behandelaar {
display: inline-flex;
align-items: center;
padding: 0 6px;
border-radius: 999px;
font-size: 10px;
line-height: 15px;
font-weight: 600;
color: var(--ink, #1c1917);
background: rgba(0, 0, 0, .06);
border: 1px solid rgba(0, 0, 0, .08);
}
/* Kop van het gesprek */
.wa-thread-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
margin-top: 3px;
}
.wa-behandelaar-pill {
font-size: 10px;
line-height: 15px;
padding: 0 7px;
border-radius: 999px;
background: rgba(0, 0, 0, .06);
border: 1px solid rgba(0, 0, 0, .08);
white-space: nowrap;
}
.wa-behandelaar-pill.leeg {
opacity: .6;
}
/* Filterchips met een kleurstip */
.wa-fp-labelchip {
display: inline-flex;
align-items: center;
gap: 5px;
}
.wa-label-stip {
width: 8px;
height: 8px;
border-radius: 999px;
display: inline-block;
}
/* Bulk-selectie */
.wa-bulk-bar {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 8px;
padding: 6px 8px;
border-radius: 8px;
background: rgba(0, 0, 0, .04);
border: 1px solid rgba(0, 0, 0, .08);
}
.wa-bulk-alles {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.wa-bulk-acties {
display: flex;
gap: 6px;
margin-left: auto;
}
.wa-bulk-acties .btn-secondary {
padding: 4px 10px;
font-size: 12px;
}
.wa-bulk-acties .btn-secondary:disabled {
opacity: .45;
cursor: not-allowed;
}
/* .wa-row is een raster van drie kolommen (avatar, tekst, tijd). Een vinkje
ervoor zetten schuift die kolommen op en de rij valt uit elkaar; in
selectiemodus krijgt de rij daarom een eigen vierde kolom. */
.wa-row.bulk {
grid-template-columns: 18px 38px 1fr auto;
gap: 8px;
padding-left: 8px;
}
.wa-row-vinkje {
flex: 0 0 auto;
margin-right: 2px;
width: 15px;
height: 15px;
cursor: pointer;
}
.wa-row.geselecteerd {
background: rgba(0, 0, 0, .05);
}
/* Labels toekennen */
.wa-label-kieslijst {
display: flex;
flex-direction: column;
gap: 6px;
max-height: 320px;
overflow-y: auto;
}
.wa-label-keuze {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 3px 2px;
}
/* Labelbeheer */
.wa-label-nieuw {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.wa-label-nieuw .field {
flex: 1;
}
.wa-label-kleurkiezer {
flex: 0 0 auto;
width: 34px;
height: 34px;
padding: 2px;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 8px;
background: none;
cursor: pointer;
}
.wa-label-beheerlijst {
display: flex;
flex-direction: column;
gap: 8px;
max-height: 340px;
overflow-y: auto;
}
.wa-label-regel {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.wa-label-regel .field {
flex: 1 1 140px;
min-width: 120px;
}
.wa-label-regel .btn-secondary {
padding: 5px 10px;
font-size: 12px;
}
.wa-label-gebruik {
font-size: 11px;
opacity: .65;
white-space: nowrap;
}
@media (max-width: 640px) {
/* Op een telefoon is de knoppenrij breder dan de kolom; laat hem dan onder de
telling vallen in plaats van de lijst horizontaal te laten schuiven. */
.wa-bulk-acties {
margin-left: 0;
width: 100%;
}
.wa-bulk-acties .btn-secondary {
flex: 1;
}
}
/* Preview en labels op EEN regel. Als eigen regel kostte de labelstrook 15px
per rij, en dat gold voor de helft van de lijst — precies de winst die het
verdichten had opgeleverd. De preview krimpt en kapt af; dat is hier de minst
waardevolle tekst, want naam, tijd en label zeggen samen al genoeg. */
.wa-row-onderregel {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.wa-row-onderregel .wa-row-preview {
flex: 1 1 auto;
min-width: 0;
margin-top: 0;
}
.wa-row-onderregel .wa-row-labels {
flex: 0 0 auto;
margin-top: 0;
flex-wrap: nowrap;
max-width: 55%;
overflow: hidden;
}
/* Archiveren en blokkeren: bulkbalk, selectievinkjes, merktekens en audit.
Huisstijl ongewijzigd — dezelfde tinten en maten als de filterpills. */
.wa-bulk-balk {
display: flex;
align-items: center;
gap: 10px;
margin-top: 8px;
padding: 6px 10px;
background: #161514;
border-radius: 8px;
flex-wrap: wrap;
}
.wa-bulk-balk .btn-link {
color: #E8C87E;
font-size: 11px;
}
.wa-bulk-balk .btn-link:hover {
color: #FAF7F2;
}
.wa-bulk-telling {
color: #FAF7F2;
font: 600 11px/1 'Manrope', sans-serif;
margin-right: auto;
}
.wa-row.met-vink {
grid-template-columns: 18px 38px 1fr auto;
}
.wa-row-vink {
flex: 0 0 auto;
width: 15px;
height: 15px;
margin-right: 2px;
accent-color: #161514;
cursor: pointer;
}
.wa-row.selectie {
background: #F3EFE6;
}
/* Merkteken vóór de naam. Klein en rustig: het moet opvallen in het archief,
maar niet met de ongelezen-badge concurreren. */
.wa-row-merk {
display: inline-block;
margin-right: 5px;
padding: 1px 5px;
border-radius: 4px;
background: #E5DFD2;
color: #6B6357;
font: 700 9px/1.4 'Manrope', sans-serif;
text-transform: uppercase;
letter-spacing: 0.04em;
vertical-align: 1px;
}
.wa-row-merk.blok {
background: #F1D9D4;
color: #8A3B2C;
}
.wa-archief-info {
margin-top: 8px;
padding: 8px 10px;
background: #F7F4EE;
border: 1px solid #E5DFD2;
border-radius: 8px;
font: 500 11px/1.5 'Manrope', sans-serif;
color: #6B6357;
}
.wa-archief-reden {
color: #161514;
font-style: italic;
}
/* Responsive — MOET ALS LAATSTE GELADEN WORDEN.
Media-queries hebben geen extra specificiteit: bij gelijke specificiteit wint
wat het laatst in het document staat. Staat dit bestand niet achteraan, dan
overschrijven de basisregels van de andere bestanden de mobiele varianten.
Uitgesneden uit public/index.html (\3c style>-blok), regels 1688-1888 van dat blok.
Eén verschil met het origineel, bewust: in het origineel stond dit blok VOOR
de blokken features/account, waardoor `.user-menu-btn { padding: 4px; }`
binnen @media (max-width: 820px) werd overschreven door de latere basisregel
in 07-account.css en dus nooit iets deed. Door de verplaatsing naar achteren
zou die regel ineens WEL gaan gelden — een zichtbare wijziging. De dode
declaratie is daarom hier verwijderd; het renderresultaat blijft identiek. */
/* =========================================================
Mobile responsive (≤640px)
========================================================= */
/* =========================================================
ÉÉN KOLOM — zodra er geen ruimte is voor lijst naast gesprek.
Grens op 820px in plaats van 768: een opengevouwen telefoon of
kleine tablet krijgt dan nog wel twee kolommen.
========================================================= */
@media (max-width: 820px) {
:root {
--wa-chrome: 104px;
}
.wa-shell-grid {
grid-template-columns: 1fr;
border-radius: var(--wa-radius);
position: relative;
overflow: hidden;
}
/* Beide kolommen blijven gerenderd; we schuiven met transform. */
.wa-shell-grid .wa-list-col,
.wa-shell-grid .wa-chat-col {
display: flex;
position: absolute;
inset: 0;
width: 100%;
transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
will-change: transform;
}
.wa-shell-grid .wa-list-col {
transform: translateX(0);
z-index: 2;
}
.wa-shell-grid .wa-chat-col {
transform: translateX(100%);
z-index: 1;
}
.wa-shell-grid.has-thread .wa-list-col {
transform: translateX(-22%);
z-index: 1;
}
.wa-shell-grid.has-thread .wa-chat-col {
transform: translateX(0);
z-index: 2;
box-shadow: -8px 0 24px -8px rgba(22,21,20,0.18);
}
/* De gesprekskolom heeft een half-doorzichtige achtergrond (papierruis).
Op desktop valt die over het witte paneel, maar in de mobiele overlay
schuift de gesprekslijst eronder door en las je namen dwars door de
berichten heen. Een dekkende onderlaag lost dat op zonder de textuur
te verliezen. */
.wa-shell-grid .wa-chat-col {
background-color: #FAF7F2;
}
.wa-shell-grid .wa-list-col {
background-color: #FFFFFF;
}
/* Acht actieknoppen naast een naam passen niet op een telefoon: de naam
werd tot nul samengedrukt en je zag niet meer met wie je praatte.
Daarom twee rijen — naam boven, acties eronder in een strook die kan
schuiven. Zo blijft élke knop bereikbaar, op welke breedte dan ook. */
.wa-thread-header {
padding: var(--wa-gap) var(--wa-pad-x);
gap: 4px;
flex-wrap: wrap;
align-items: center;
}
.wa-thread-header > .flex:first-child {
flex: 1 1 100%;
min-width: 0;
}
.wa-thread-header-naam {
flex: 1 1 auto;
min-width: 0;
}
.wa-thread-header-acties {
flex: 1 1 100%;
justify-content: flex-start;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
padding-bottom: 2px;
}
.wa-thread-header-acties::-webkit-scrollbar {
display: none;
}
.wa-thread-header-acties > * {
flex-shrink: 0;
}
/* Niet .avatar-lg meeschalen: die staat op de contactkaart en het
accountscherm en was ook op mobiel 48px. In de oude index.html stond
.avatar-lg NA dit blok en won hij op documentvolgorde; nu staat
responsive achteraan, dus moet de uitzondering hier expliciet. */
.wa-avatar:not(.avatar-lg) {
width: var(--wa-avatar);
height: var(--wa-avatar);
font-size: var(--wa-tekst-klein);
}
.wa-window-pill {
display: none;
}
/* de titel-tooltip vervangt hem */
.wa-thread-header .min-w-0 > div {
font-size: var(--wa-tekst);
}
.wa-messages {
padding: var(--wa-gap) var(--wa-pad-x);
}
.wa-bubble {
max-width: var(--wa-bubbel-max);
padding: 5px 9px 4px;
font-size: var(--wa-tekst);
}
.wa-bubble-media img,
.wa-bubble-media video {
max-width: 100%;
max-height: min(45vh, 320px);
}
.wa-bubble-audio audio {
width: 100%;
max-width: 100%;
}
.wa-compose {
padding: var(--wa-gap) var(--wa-gap) calc(var(--wa-gap) + 4px);
padding-bottom: max(calc(var(--wa-gap) + 4px), env(safe-area-inset-bottom));
padding-left: max(var(--wa-gap), env(safe-area-inset-left));
padding-right: max(var(--wa-gap), env(safe-area-inset-right));
}
.wa-compose-text {
gap: 6px;
}
.wa-icon-btn, .wa-send-btn {
width: var(--wa-knop);
height: var(--wa-knop);
}
.wa-input {
padding: 7px 12px;
font-size: max(16px, var(--wa-tekst));
}
/* Kop van de pagina compacter */
header .max-w-\[1280px\] {
padding: var(--wa-gap) var(--wa-pad-x);
gap: 6px;
}
.header-logo {
height: clamp(20px, 5.5vw, 26px);
}
.tab-btn span {
display: none;
}
.tab-btn {
padding: 7px 9px;
}
.credits-pill {
display: none;
}
.user-meta {
display: none !important;
}
.wa-search-bar {
padding: 6px var(--wa-gap);
}
.wa-selection-bar {
padding: 6px var(--wa-pad-x);
font-size: var(--wa-tekst);
}
.wa-selection-bar .btn-secondary {
padding: 5px 10px;
font-size: var(--wa-tekst-klein);
}
.wa-emoji-picker {
width: min(100vw - 24px, 420px);
left: 0;
right: 0;
margin: 0 auto 8px;
}
.wa-modal {
padding: var(--wa-gap);
}
.wa-modal-card {
max-width: 100%;
}
/* Op een telefoon zie je minder gesprekken tegelijk terwijl je er net zo
vaak doorheen scrollt; dichtheid telt hier dus zwaarder, niet lichter.
De klikhoogte blijft met ~47px ruim boven de grens waarop mikken lastig
wordt. */
.wa-row {
padding: 5px var(--wa-pad-x);
gap: 8px;
grid-template-columns: 30px 1fr auto;
}
.wa-row-avatar {
width: 30px;
height: 30px;
font-size: 11px;
}
/* Het invoerveld mag krimpen maar moet de meeste ruimte krijgen; anders
kapt de tekst "Typ een bericht" af op een smal scherm. */
.wa-compose-text {
min-width: 0;
}
.wa-input {
min-width: 0;
flex: 1 1 auto;
}
/* De paginafooter kost 64px chatruimte op een telefoon en voegt daar niets
toe. Expliciet op id, want de invoerbalk van de chat is ook een footer. */
#pagina-footer {
display: none;
}
}
/* =========================================================
SMALLE SCHERMEN — buitenscherm van een flipphone, kleine
telefoons, of een venster dat iemand smal heeft gesleept.
Vanaf hier telt elke pixel breedte.
========================================================= */
@media (max-width: 400px) {
:root {
--wa-pad-x: 8px;
--wa-gap: 6px;
--wa-bubbel-max: 92%;
}
.wa-thread-phone {
display: none;
}
/* naam is genoeg */
.wa-row-preview {
-webkit-line-clamp: 1;
}
.wa-balie-pill .wa-balie-label {
display: none;
}
.wa-thread-header .wa-icon-btn-sm {
width: 28px;
height: 28px;
}
.wa-modal-card {
border-radius: 12px;
}
}
/* Extreem smal: flipphone-buitenscherm (~240-300px) */
@media (max-width: 320px) {
:root {
--wa-pad-x: 6px;
--wa-avatar: 28px;
}
.wa-row-time {
display: none;
}
/* Knoppen worden hier NIET verborgen: de actiestrook schuift, dus ook op
een flipphone-buitenscherm blijft elke functie bereikbaar. */
}
/* =========================================================
LAGE SCHERMEN — liggende telefoon, cover-display, of een
opgeklapte laptop met weinig hoogte. Hoogte is hier de
schaarse maat, niet breedte.
========================================================= */
@media (max-height: 560px) {
.wa-shell-grid {
min-height: 0;
}
/* Bij weinig hoogte telt elke pixel voor het gesprek zelf. De footer en
de ruime paginamarges kunnen weg; die kosten hier de helft van het
zichtbare gesprek. Geldt ook op een breed maar laag scherm, zoals een
telefoon in liggende stand. */
#pagina-footer {
display: none;
}
main#wa-main {
padding-top: 8px;
padding-bottom: 8px;
}
.wa-messages {
padding-top: 4px;
padding-bottom: 4px;
}
.wa-bubble-media img,
.wa-bubble-media video {
max-height: 40vh;
}
.wa-date-sep {
margin: 6px 0;
}
}
@media (max-height: 420px) {
.wa-search-bar, .wa-quick-bar {
display: none;
}
.wa-thread-header {
padding-top: 4px;
padding-bottom: 4px;
}
}
/* =========================================================
VOUWBARE TOESTELLEN — als het venster over twee schermdelen
loopt, leggen we de lijst in het linkerdeel en het gesprek
in het rechterdeel, zodat de vouw tussen de kolommen valt
in plaats van dwars door een bericht.
========================================================= */
@media (horizontal-viewport-segments: 2) {
.wa-shell-grid {
grid-template-columns: env(viewport-segment-width 0 0) minmax(0, 1fr);
border-radius: 0;
}
.wa-shell-grid .wa-list-col,
.wa-shell-grid .wa-chat-col {
position: static;
transform: none !important;
width: auto;
}
.wa-shell-grid .wa-chat-col {
box-shadow: none;
}
}
/* Opengevouwen boekmodel met de vouw horizontaal: gesprek onderin,
lijst bovenin, zodat het toetsenbord het onderste deel vult. */
@media (vertical-viewport-segments: 2) {
.wa-shell-grid {
grid-template-columns: 1fr;
grid-template-rows: env(viewport-segment-height 0 0) minmax(0, 1fr);
}
.wa-shell-grid .wa-list-col,
.wa-shell-grid .wa-chat-col {
position: static;
transform: none !important;
width: auto;
}
}
/* De @import-vorm van de drie @tailwind-lagen. Nodig omdat @import na een
gewone regel ongeldig is: postcss-import gooit de imports er dan stilzwijgend
uit en er blijft alleen Tailwind over. Zo staan alle imports vooraan. */
*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
box-sizing: border-box;
/* 1 */
border-width: 0;
/* 2 */
border-style: solid;
/* 2 */
border-color: #e5e7eb;
/* 2 */
}
::before,
::after {
--tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
line-height: 1.5;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
-moz-tab-size: 4;
/* 3 */
-o-tab-size: 4;
tab-size: 4;
/* 3 */
font-family: Lato, ui-sans-serif, system-ui, sans-serif;
/* 4 */
font-feature-settings: normal;
/* 5 */
font-variation-settings: normal;
/* 6 */
-webkit-tap-highlight-color: transparent;
/* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
margin: 0;
/* 1 */
line-height: inherit;
/* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
height: 0;
/* 1 */
color: inherit;
/* 2 */
border-top-width: 1px;
/* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
color: inherit;
text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
/* 1 */
font-feature-settings: normal;
/* 2 */
font-variation-settings: normal;
/* 3 */
font-size: 1em;
/* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
text-indent: 0;
/* 1 */
border-color: inherit;
/* 2 */
border-collapse: collapse;
/* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
/* 1 */
font-feature-settings: inherit;
/* 1 */
font-variation-settings: inherit;
/* 1 */
font-size: 100%;
/* 1 */
font-weight: inherit;
/* 1 */
line-height: inherit;
/* 1 */
letter-spacing: inherit;
/* 1 */
color: inherit;
/* 1 */
margin: 0;
/* 2 */
padding: 0;
/* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
-webkit-appearance: button;
/* 1 */
background-color: transparent;
/* 2 */
background-image: none;
/* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1;
/* 1 */
color: #9ca3af;
/* 2 */
}
input::placeholder,
textarea::placeholder {
opacity: 1;
/* 1 */
color: #9ca3af;
/* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
/* 1 */
vertical-align: middle;
/* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
max-width: 100%;
height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
display: none;
}
.container {
width: 100%;
}
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}
@media (min-width: 1536px) {
.container {
max-width: 1536px;
}
}
.pointer-events-none {
pointer-events: none;
}
.visible {
visibility: visible;
}
.fixed {
position: fixed;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.sticky {
position: sticky;
}
.inset-0 {
inset: 0px;
}
.left-3 {
left: 0.75rem;
}
.top-0 {
top: 0px;
}
.top-1\/2 {
top: 50%;
}
.z-30 {
z-index: 30;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.mb-1 {
margin-bottom: 0.25rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mb-3 {
margin-bottom: 0.75rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mb-5 {
margin-bottom: 1.25rem;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.mb-8 {
margin-bottom: 2rem;
}
.ml-auto {
margin-left: auto;
}
.mt-0\.5 {
margin-top: 0.125rem;
}
.mt-1 {
margin-top: 0.25rem;
}
.mt-1\.5 {
margin-top: 0.375rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-3 {
margin-top: 0.75rem;
}
.mt-4 {
margin-top: 1rem;
}
.mt-5 {
margin-top: 1.25rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.block {
display: block;
}
.inline {
display: inline;
}
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.\!grid {
display: grid !important;
}
.grid {
display: grid;
}
.hidden {
display: none;
}
.min-h-screen {
min-height: 100vh;
}
.w-16 {
width: 4rem;
}
.w-full {
width: 100%;
}
.min-w-0 {
min-width: 0px;
}
.max-w-\[1280px\] {
max-width: 1280px;
}
.max-w-md {
max-width: 28rem;
}
.max-w-xs {
max-width: 20rem;
}
.flex-1 {
flex: 1 1 0%;
}
.shrink-0 {
flex-shrink: 0;
}
.-translate-y-1\/2 {
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.resize {
resize: both;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flex-col {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.items-center {
align-items: center;
}
.items-baseline {
align-items: baseline;
}
.justify-end {
justify-content: flex-end;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.gap-1\.5 {
gap: 0.375rem;
}
.gap-2 {
gap: 0.5rem;
}
.gap-3 {
gap: 0.75rem;
}
.gap-4 {
gap: 1rem;
}
.gap-6 {
gap: 1.5rem;
}
.gap-8 {
gap: 2rem;
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-7 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.75rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rounded-lg {
border-radius: 0.5rem;
}
.rounded-xl {
border-radius: 0.75rem;
}
.border {
border-width: 1px;
}
.border-b {
border-bottom-width: 1px;
}
.border-line {
--tw-border-opacity: 1;
border-color: rgb(225 230 239 / var(--tw-border-opacity, 1));
}
.bg-bone\/40 {
background-color: rgb(238 241 246 / 0.4);
}
.bg-ivory {
--tw-bg-opacity: 1;
background-color: rgb(247 248 251 / var(--tw-bg-opacity, 1));
}
.bg-paper\/80 {
background-color: rgb(255 255 255 / 0.8);
}
.p-3 {
padding: 0.75rem;
}
.p-4 {
padding: 1rem;
}
.p-7 {
padding: 1.75rem;
}
.p-8 {
padding: 2rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.pb-8 {
padding-bottom: 2rem;
}
.pl-9 {
padding-left: 2.25rem;
}
.pr-9 {
padding-right: 2.25rem;
}
.pt-1 {
padding-top: 0.25rem;
}
.pt-4 {
padding-top: 1rem;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.font-display {
font-family: Cinzel, Cormorant Garamond, Georgia, serif;
}
.font-mono {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.font-sans {
font-family: Lato, ui-sans-serif, system-ui, sans-serif;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.text-\[10px\] {
font-size: 10px;
}
.text-base {
font-size: 1rem;
line-height: 1.5rem;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.text-xs {
font-size: 0.75rem;
line-height: 1rem;
}
.font-bold {
font-weight: 700;
}
.font-medium {
font-weight: 500;
}
.font-semibold {
font-weight: 600;
}
.uppercase {
text-transform: uppercase;
}
.leading-relaxed {
line-height: 1.625;
}
.leading-tight {
line-height: 1.25;
}
.tracking-widest {
letter-spacing: 0.1em;
}
.text-fog {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gold {
--tw-text-opacity: 1;
color: rgb(209 164 43 / var(--tw-text-opacity, 1));
}
.text-graphite {
--tw-text-opacity: 1;
color: rgb(63 74 102 / var(--tw-text-opacity, 1));
}
.text-ink {
--tw-text-opacity: 1;
color: rgb(26 37 64 / var(--tw-text-opacity, 1));
}
.text-mist {
--tw-text-opacity: 1;
color: rgb(200 209 224 / var(--tw-text-opacity, 1));
}
.text-rust-dim {
--tw-text-opacity: 1;
color: rgb(154 61 36 / var(--tw-text-opacity, 1));
}
.opacity-40 {
opacity: 0.4;
}
.blur {
--tw-blur: blur(8px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.\!filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
}
.filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur-sm {
--tw-backdrop-blur: blur(4px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
@media (min-width: 640px) {
.sm\:inline {
display: inline;
}
.sm\:flex {
display: flex;
}
.sm\:w-auto {
width: auto;
}
.sm\:flex-row {
flex-direction: row;
}
.sm\:items-center {
align-items: center;
}
.sm\:justify-between {
justify-content: space-between;
}
.sm\:gap-3 {
gap: 0.75rem;
}
.sm\:px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.sm\:py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
}
@media (min-width: 1024px) {
.lg\:sticky {
position: sticky;
}
.lg\:top-24 {
top: 6rem;
}
.lg\:col-span-5 {
grid-column: span 5 / span 5;
}
.lg\:col-span-7 {
grid-column: span 7 / span 7;
}
.lg\:grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.lg\:gap-10 {
gap: 2.5rem;
}
.lg\:py-10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.lg\:py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}
}