/* Palette and foundations. The inbox owns its tokens in both ERP themes. */
:root { --wa-global-accent: #00a884; --wa-global-on-accent: #fff; --wa-global-toast: #176b58; --wa-global-shadow: #0003; }
#tab-whatsapp {
    --wa-bg: #f0f2f5; --wa-surface: #fff; --wa-chat: #efeae2; --wa-out: #d9fdd3;
    --wa-text: #111b21; --wa-muted: #667781; --wa-subtle: #8696a0; --wa-border: #e9edef;
    --wa-accent: #00a884; --wa-on-accent: #fff; --wa-active: #e9edef; --wa-read: #53bdeb;
    --wa-icon: #667781; --wa-bar: #fff; --wa-pattern: #66778108; --wa-shadow: #0003;
    --wa-error: #c34848; --wa-error-bg: #fff1f0; --wa-success: #287963; --wa-success-bg: #e7f3ed;
    --wa-warning: #947647; --wa-avatar-fill: hsl(var(--wa-avatar-hue,160) 28% 90%); --wa-avatar-ink: hsl(var(--wa-avatar-hue,160) 30% 35%);
    --wa-quote: #111b2109; --wa-overlay: #0b141af5; --wa-viewer-text: #e9edef; --wa-viewer-muted: #aebac1; --wa-viewer-control: #202c33; --wa-viewer-hover: #374248;
    --wa-pdf: #d35d62; --wa-word: #5088ba; --wa-excel: #40896a; --wa-file: #8696a0;
    color: var(--wa-text); font-size: 14px; line-height: 1.45; min-width: 0; width: 100%; position: relative; overflow-x: clip;
}
html.dark #tab-whatsapp {
    --wa-bg: #111b21; --wa-surface: #202c33; --wa-chat: #0b141a; --wa-out: #005c4b;
    --wa-text: #e9edef; --wa-muted: #8696a0; --wa-subtle: #a0adb5; --wa-border: #222d34;
    --wa-active: #2a3942; --wa-icon: #aebac1; --wa-bar: #2a3942; --wa-pattern: #8696a007;
    --wa-error: #e89090; --wa-error-bg: #38282c; --wa-success: #87b9a6; --wa-success-bg: #203b33;
    --wa-warning: #d3bc8e; --wa-avatar-fill: hsl(var(--wa-avatar-hue,160) 18% 24%); --wa-avatar-ink: hsl(var(--wa-avatar-hue,160) 25% 76%);
    --wa-quote: #0b141a33; color-scheme: dark;
}
#tab-whatsapp *, #tab-whatsapp *::before, #tab-whatsapp *::after { box-sizing: border-box; min-width: 0; }
#tab-whatsapp [hidden] { display: none !important; }
#tab-whatsapp :is(p,h2,h3,h4) { margin: 0; }
#tab-whatsapp h3 { font-size: 14px; font-weight: 600; margin-block: 12px 8px; }
#tab-whatsapp :is(button,input,textarea,select,a):focus-visible { outline: 2px solid var(--wa-accent); outline-offset: 2px; }
#tab-whatsapp input:not([type=file]), #tab-whatsapp textarea, #tab-whatsapp select { width: 100%; border: 1px solid var(--wa-border); border-radius: 8px; padding: 12px; background: var(--wa-bg); color: var(--wa-text); font: inherit; }
#tab-whatsapp input::placeholder, #tab-whatsapp textarea::placeholder { color: var(--wa-muted); opacity: 1; }
#tab-whatsapp input[type=checkbox] { width: auto; padding: 0; accent-color: var(--wa-accent); }
#tab-whatsapp textarea { resize: vertical; min-height: 64px; max-height: 160px; }
#tab-whatsapp input[type=file] { max-width: 100%; color: var(--wa-text); }
#tab-whatsapp .wa-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--wa-border); border-radius: 8px; background: var(--wa-surface); color: var(--wa-text); font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; overflow-wrap: anywhere; }
#tab-whatsapp .wa-button:hover { background: var(--wa-active); }
#tab-whatsapp .wa-button:disabled { opacity: .45; cursor: not-allowed; }
#tab-whatsapp .wa-primary { background: var(--wa-accent); color: var(--wa-on-accent); border-color: var(--wa-accent); }
#tab-whatsapp .wa-primary:hover { background: var(--wa-accent); filter: brightness(.95); }
#tab-whatsapp .wa-chip-button { padding: 4px 12px; border-radius: 24px; font-size: 12px; }
#tab-whatsapp .wa-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 auto; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--wa-icon); }
#tab-whatsapp .wa-icon-button:hover { background: var(--wa-active); color: var(--wa-text); }
#tab-whatsapp .wa-icon-button svg { width: 20px; height: 20px; }

/* Layout and navigation. */
#tab-whatsapp .wa-grid { display: grid; grid-template-columns: minmax(280px,32%) minmax(0,1fr); height: var(--wa-fit,calc(100dvh - 150px)); min-height: 380px; border: 1px solid var(--wa-border); border-radius: 8px; overflow: hidden; background: var(--wa-surface); }
#tab-whatsapp .wa-list, #tab-whatsapp .wa-chat, #tab-whatsapp .wa-customer { min-height: 0; background: var(--wa-surface); }
#tab-whatsapp .wa-list { display: flex; flex-direction: column; overflow: hidden; border-inline-end: 1px solid var(--wa-border); }
#tab-whatsapp .wa-list-main { display: flex; flex-direction: column; gap: 8px; height: 100%; overflow: hidden; }
#tab-whatsapp .wa-list-head, #tab-whatsapp .wa-chat-head { display: flex; align-items: center; gap: 8px; height: 60px; min-height: 60px; padding: 8px 12px; background: var(--wa-bg); flex-shrink: 0; }
#tab-whatsapp .wa-header-extras { display: flex; flex: 1; justify-content: flex-end; }
#tab-whatsapp .wa-chat { position: relative; display: flex; flex-direction: column; }
#tab-whatsapp .wa-chat-head { border-bottom: 1px solid var(--wa-border); }
#tab-whatsapp .wa-chat-identity { flex: 1; overflow: hidden; }
#tab-whatsapp .wa-chat-name { display: block; border: 0; background: transparent; padding: 0; max-width: 100%; text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; }
#tab-whatsapp .wa-chat-subtitle { display: block; color: var(--wa-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tab-whatsapp .wa-mobile, #tab-whatsapp .wa-customer-shade { display: none; }
#tab-whatsapp .wa-avatar { width: 49px; height: 49px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--wa-avatar-ink); background: var(--wa-avatar-fill); font-size: 20px; position: relative; }
#tab-whatsapp .wa-chat-avatar { width: 40px; height: 40px; border: 0; padding: 0; }
#tab-whatsapp .wa-avatar.wa-has-photo { padding: 0; overflow: hidden; background: transparent; }
#tab-whatsapp .wa-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
#tab-whatsapp .wa-available::after { content: ''; position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; background: var(--wa-accent); border: 2px solid var(--wa-surface); border-radius: 50%; }
#tab-whatsapp .wa-search { width: calc(100% - 24px) !important; margin-inline: 12px; padding-block: 8px; border: 0 !important; }
#tab-whatsapp .wa-slices { display: flex; flex-shrink: 0; gap: 8px; overflow-x: auto; padding: 0 12px 8px; scrollbar-width: none; }
#tab-whatsapp .wa-slices::-webkit-scrollbar { display: none; }
#tab-whatsapp .wa-slice { white-space: nowrap; flex-shrink: 0; border: 0; border-radius: 24px; padding: 4px 12px; background: var(--wa-bg); color: var(--wa-muted); font-weight: 400; }
#tab-whatsapp .wa-slice[aria-pressed=true] { color: var(--wa-success); background: var(--wa-success-bg); }
#tab-whatsapp .wa-rows { overflow: auto; overflow-x: hidden; flex: 1; }
#tab-whatsapp .wa-conversation { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 72px; height: auto; padding: 12px; margin: 0; border: 0; border-bottom: 1px solid var(--wa-border); border-radius: 0; text-align: start; cursor: pointer; }
#tab-whatsapp .wa-conversation:hover { background: var(--wa-bg); }
#tab-whatsapp .wa-selected { background: var(--wa-active); }
#tab-whatsapp .wa-row-content { flex: 1; overflow: hidden; position: relative; }
#tab-whatsapp .wa-row-head, #tab-whatsapp .wa-name-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#tab-whatsapp .wa-row-head strong, #tab-whatsapp .wa-name-line strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
#tab-whatsapp .wa-preview { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wa-muted); font-size: 13px; font-weight: 400; margin-top: 4px; }
#tab-whatsapp .wa-row-meta { justify-content: flex-start; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; }
#tab-whatsapp .wa-row-meta > .wa-overdue { flex: 0 0 auto; font-size: 11px; white-space: nowrap; }
#tab-whatsapp .wa-row-tags { display: flex; max-width: 100%; overflow: hidden; }
#tab-whatsapp .wa-row-tags:empty { display: none; }
#tab-whatsapp .wa-row-tags .wa-chip { white-space: nowrap; margin: 0; padding: 0 4px; font-size: 10px; border-width: 1px; }
#tab-whatsapp .wa-row-tags .wa-chip:nth-child(n+2) { display: none; }
#tab-whatsapp .wa-badge { border-radius: 24px; background: var(--wa-accent); color: var(--wa-on-accent); padding: 4px 8px; font-size: 11px; flex-shrink: 0; }
#tab-whatsapp .wa-badge-dot { width: 8px; height: 8px; padding: 0; }
#tab-whatsapp time { font-size: 11px; color: var(--wa-muted); flex-shrink: 0; }
#tab-whatsapp .wa-row-more, #tab-whatsapp .wa-bubble-more { width: 24px; height: 24px; opacity: 0; }
#tab-whatsapp .wa-conversation:hover .wa-row-more, #tab-whatsapp .wa-conversation:focus-within .wa-row-more, #tab-whatsapp .wa-message:hover .wa-bubble-more, #tab-whatsapp .wa-message:focus-within .wa-bubble-more { opacity: 1; }

/* Message groups, bubbles and quoted replies. */
#tab-whatsapp .wa-messages { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0; padding: 16px 24px; background: var(--wa-chat); background-image: radial-gradient(var(--wa-pattern) 1px,transparent 1px); background-size: 24px 24px; overscroll-behavior: contain; }
#tab-whatsapp .wa-message { position: relative; flex-shrink: 0; max-width: 65%; margin-top: 2px; padding: 8px 12px; border: 0; border-radius: 8px; background: var(--wa-surface); overflow-wrap: anywhere; }
#tab-whatsapp .wa-group-start { margin-top: 12px; }
#tab-whatsapp .wa-in { align-self: flex-start; }
#tab-whatsapp .wa-out { align-self: flex-end; background: var(--wa-out); }
#tab-whatsapp .wa-group-start::after { content: ''; position: absolute; top: 0; border: 4px solid transparent; }
#tab-whatsapp .wa-in.wa-group-start::after { inset-inline-start: -4px; border-top-color: var(--wa-surface); }
#tab-whatsapp .wa-out.wa-group-start::after { inset-inline-end: -4px; border-top-color: var(--wa-out); }
#tab-whatsapp .wa-body { white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; font-size: 14.2px; line-height: 1.45; }
#tab-whatsapp .wa-message-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 8px; margin-top: 4px; color: var(--wa-muted); font-size: 11px; }
#tab-whatsapp .wa-sender-label { font-size: 11px; opacity: .76; }
#tab-whatsapp .wa-ticks { display: inline-flex; align-items: center; gap: 4px; color: var(--wa-muted); }
#tab-whatsapp .wa-ticks svg { width: 16px; height: 16px; }
#tab-whatsapp .wa-read { color: var(--wa-read); }
#tab-whatsapp .wa-source { display: inline-block; font-size: 11px; color: var(--wa-muted); margin-bottom: 4px; }
#tab-whatsapp .wa-bubble-more { position: absolute; top: 4px; inset-inline-end: 4px; z-index: 2; }
#tab-whatsapp .wa-bubble-actions { position: absolute; top: 4px; inset-inline-end: calc(100% + 8px); display: flex; gap: 4px; opacity: 0; transition: opacity .12s; }
#tab-whatsapp .wa-in .wa-bubble-actions { inset-inline-end: auto; inset-inline-start: calc(100% + 8px); }
#tab-whatsapp .wa-bubble-actions .wa-icon-button { width: 32px; height: 32px; background: var(--wa-bg); }
#tab-whatsapp .wa-message:hover .wa-bubble-actions, #tab-whatsapp .wa-message:focus-within .wa-bubble-actions { opacity: 1; }
#tab-whatsapp .wa-reactions { display: flex; gap: 4px; align-self: flex-end; padding: 4px 8px; margin-top: 4px; border: 1px solid var(--wa-border); border-radius: 24px; background: var(--wa-surface); font-size: 12px; }
#tab-whatsapp .wa-reply-quote { display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 4px; border: 0; border-inline-start: 4px solid var(--wa-accent); padding: 8px; border-radius: 4px; background: var(--wa-quote); color: var(--wa-text); text-align: start; }
#tab-whatsapp .wa-quote-text { flex: 1; overflow: hidden; }
#tab-whatsapp .wa-reply-quote strong { color: var(--wa-success); font-size: 12px; font-weight: 500; }
#tab-whatsapp .wa-reply-quote span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tab-whatsapp .wa-quote-thumb { width: 40px; height: 40px; border-radius: 4px; object-fit: cover; }
#tab-whatsapp .wa-date-separator { align-self: center; background: var(--wa-bg); color: var(--wa-muted); border-radius: 8px; padding: 4px 12px; margin: 8px 0; font-size: 11px; }
#tab-whatsapp .wa-highlight { outline: 2px solid var(--wa-accent); }

/* Media and document cards. */
#tab-whatsapp .wa-media-bubble { padding: 0; }
#tab-whatsapp .wa-media-bubble .wa-media { margin: 0; }
#tab-whatsapp .wa-media-bubble .wa-body { padding: 8px 12px 0; }
#tab-whatsapp .wa-media-bubble .wa-message-footer { padding: 4px 8px; }
#tab-whatsapp .wa-media-bubble .wa-reply-quote { margin: 4px; width: calc(100% - 8px); }
#tab-whatsapp .wa-media-only .wa-message-footer { position: absolute; bottom: 4px; inset-inline-end: 4px; margin: 0; border-radius: 4px; background: var(--wa-overlay); color: var(--wa-viewer-text); }
#tab-whatsapp .wa-media-only .wa-message-footer time, #tab-whatsapp .wa-media-only .wa-ticks { color: inherit; }
#tab-whatsapp .wa-media-only .wa-ticks.wa-read { color: var(--wa-read); }

#tab-whatsapp .wa-image-warning { display: block; width: 100%; max-width: 100%; padding: 8px 12px 0; font-size: 12px; line-height: 1.45; white-space: normal; overflow-wrap: anywhere; color: var(--wa-muted); }
#tab-whatsapp .wa-request-document { display: block; max-width: calc(100% - 24px); margin: 4px 12px 8px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--wa-success); font-size: 12px; text-align: start; white-space: normal; }
#tab-whatsapp .wa-request-document:hover { background: transparent; text-decoration: underline; }
#tab-whatsapp .wa-media-pending { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 330px; max-width: 100%; aspect-ratio: 4/3; padding: 16px; border: 0; border-radius: 8px; background: linear-gradient(135deg,var(--wa-active),var(--wa-bg)); color: var(--wa-muted); cursor: pointer; }
#tab-whatsapp .wa-media-pending:hover { background: var(--wa-active); }
#tab-whatsapp .wa-media-pending:disabled { opacity: 1; cursor: progress; }
#tab-whatsapp .wa-pending-download { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--wa-surface); color: var(--wa-icon); }
#tab-whatsapp .wa-pending-download svg { width: 24px; height: 24px; }
#tab-whatsapp .wa-pending-size { font-size: 12px; }
#tab-whatsapp .wa-media-missing { display: flex; flex-direction: column; gap: 8px; width: 330px; max-width: 100%; min-height: 128px; padding: 16px; border: 0; background: var(--wa-bg); color: var(--wa-muted); border-radius: 8px; font-size: 12px; white-space: normal; }
#tab-whatsapp .wa-missing-icon svg { width: 24px; height: 24px; }
#tab-whatsapp .wa-media-error { display: block; padding: 4px 8px; font-size: 12px; color: var(--wa-muted); }
#tab-whatsapp .wa-media { max-width: 330px; margin: 0 -4px 4px; }
#tab-whatsapp .wa-media img, #tab-whatsapp .wa-media video { display: block; max-width: 100%; width: 330px; max-height: 300px; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; }
#tab-whatsapp .wa-media .wa-thumbnail { cursor: zoom-in; }
#tab-whatsapp .wa-media .wa-sticker { width: 128px; height: 128px; aspect-ratio: 1; object-fit: contain; }
#tab-whatsapp .wa-media audio { max-width: 100%; width: 300px; }
#tab-whatsapp .wa-video-wrap { position: relative; }
#tab-whatsapp .wa-video-open { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; }
#tab-whatsapp .wa-video-open svg { width: 40px; height: 40px; padding: 8px; border-radius: 50%; background: var(--wa-overlay); color: var(--wa-viewer-text); }
#tab-whatsapp .wa-download { color: var(--wa-success); display: block; text-decoration: none; margin-top: 4px; overflow-wrap: anywhere; }
#tab-whatsapp .wa-media[data-wa-image=true] > .wa-download { display: none; }
#tab-whatsapp .wa-document { display: flex; align-items: center; gap: 12px; width: 320px; max-width: 100%; min-height: 80px; padding: 12px; border: 0; border-radius: 8px; background: var(--wa-quote); text-align: start; cursor: pointer; }
#tab-whatsapp .wa-document-badge { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 48px; flex: 0 0 40px; border-radius: 4px; background: var(--wa-file); color: var(--wa-on-accent); font-size: 10px; font-weight: 600; }
#tab-whatsapp .wa-document-badge[data-type=pdf] { background: var(--wa-pdf); }
#tab-whatsapp .wa-document-badge[data-type=word] { background: var(--wa-word); }
#tab-whatsapp .wa-document-badge[data-type=excel] { background: var(--wa-excel); }
#tab-whatsapp .wa-document-main { display: flex; align-items: center; gap: 12px; width: 100%; }
#tab-whatsapp .wa-document-with-preview { display: block; padding: 0; overflow: hidden; }
#tab-whatsapp .wa-document-with-preview .wa-document-main { padding: 12px; }
#tab-whatsapp .wa-document-info { flex: 1; overflow: hidden; }
#tab-whatsapp .wa-document-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 500; }
#tab-whatsapp .wa-document-meta { display: block; margin-top: 4px; color: var(--wa-muted); font-size: 11px; }
#tab-whatsapp .wa-document-preview { display: block; width: 100%; height: 96px; object-fit: cover; object-position: top; border-radius: 8px 8px 0 0; }

/* Composer, suggestions and notices. */
#tab-whatsapp .wa-composer { position: relative; flex-shrink: 0; min-height: 62px; padding: 8px 12px; background: var(--wa-bg); }
#tab-whatsapp .wa-compose-bar { display: flex; align-items: flex-end; gap: 4px; min-height: 46px; padding: 0 4px; border-radius: 24px; background: var(--wa-bar); }
#tab-whatsapp .wa-compose-bar textarea { flex: 1; min-height: 38px; max-height: 150px; resize: none; overflow-y: auto; border: 0; border-radius: 0; background: transparent; padding: 8px; line-height: 1.45; font-size: 14.2px; }
#tab-whatsapp .wa-compose-bar textarea:focus-visible { outline: none; }
#tab-whatsapp .wa-compose-bar .wa-icon-button svg { width: 24px; height: 24px; }
#tab-whatsapp .wa-send[aria-label="إرسال"], #tab-whatsapp .wa-send[data-sending] { background: var(--wa-accent); color: var(--wa-on-accent); }
#tab-whatsapp .wa-send[data-sending=true] { opacity: .6; }
#tab-whatsapp .wa-send.wa-recording { color: var(--wa-error); }
#tab-whatsapp .wa-attachment, #tab-whatsapp .wa-voice-preview, #tab-whatsapp .wa-ai-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#tab-whatsapp .wa-attachment:not(:empty), #tab-whatsapp .wa-voice-preview:not(:empty) { padding: 8px 4px; }
#tab-whatsapp .wa-emoji-panel { position: absolute; bottom: calc(100% - 4px); inset-inline-start: 12px; width: min(300px,calc(100% - 24px)); display: grid; grid-template-columns: repeat(6,1fr); gap: 4px; padding: 8px; border: 1px solid var(--wa-border); border-radius: 12px; background: var(--wa-surface); box-shadow: 0 8px 24px var(--wa-shadow); z-index: 6; }
#tab-whatsapp .wa-emoji { border: 0; background: transparent; font-size: 22px; padding: 4px; line-height: 1.2; }
#tab-whatsapp .wa-quick { position: absolute; bottom: calc(100% - 4px); inset-inline: 12px; max-height: 230px; overflow: auto; padding: 8px; border: 1px solid var(--wa-border); border-radius: 12px; background: var(--wa-surface); box-shadow: 0 8px 24px var(--wa-shadow); z-index: 5; }
#tab-whatsapp .wa-quick .wa-button { display: block; width: 100%; text-align: start; margin-bottom: 4px; }
#tab-whatsapp .wa-closed-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px; border-radius: 8px; background: var(--wa-surface); }
#tab-whatsapp .wa-window { flex: 1; color: var(--wa-muted); font-size: 11px; }
#tab-whatsapp .wa-price-card { padding: 12px; margin-bottom: 8px; border: 1px solid var(--wa-border); border-radius: 8px; background: var(--wa-surface); }
#tab-whatsapp .wa-price-item { display: block; margin-block: 4px; }
#tab-whatsapp .wa-price-card button { margin: 8px 0 0 8px; }
#tab-whatsapp .wa-ai-hint { display: block; padding-block: 4px; color: var(--wa-warning); }
#tab-whatsapp .wa-ai-badge { color: var(--wa-success); font-size: 11px; white-space: nowrap; }
#tab-whatsapp .wa-notice { overflow-wrap: anywhere; }
#tab-whatsapp .wa-notice:not(:empty) { padding: 8px 12px; margin-block: 4px; border: 1px solid var(--wa-border); background: var(--wa-surface); border-radius: 8px; }
#tab-whatsapp > .wa-inbox-notice:not(:empty) { position: absolute; bottom: 12px; inset-inline: 12px; z-index: 40; box-shadow: 0 4px 20px var(--wa-shadow); }
#tab-whatsapp .wa-chat-notice-slot { flex: 0 0 auto; min-height: 0; text-align: center; }
#tab-whatsapp .wa-chat-notice-slot > .wa-inbox-notice:not(:empty) { position: relative; bottom: auto; inset-inline: auto; width: fit-content; max-width: min(90%, 480px); max-height: 18vh; overflow-y: auto; margin: 4px auto; z-index: 40; cursor: pointer; }

/* Customer panel and ERP extensions. */
#tab-whatsapp .wa-customer { display: none; border-inline-start: 1px solid var(--wa-border); overflow-y: auto; }
#tab-whatsapp.wa-customer-open .wa-grid { grid-template-columns: minmax(250px,28%) minmax(0,1fr) minmax(260px,27%); }
#tab-whatsapp.wa-customer-open .wa-customer { display: block; }
#tab-whatsapp .wa-customer-body { padding: 16px; overflow-wrap: anywhere; }
#tab-whatsapp .wa-customer-photo { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-block: 16px; text-align: center; }
#tab-whatsapp .wa-customer-photo .wa-avatar-lg { width: 112px; height: 112px; font-size: 40px; }
#tab-whatsapp .wa-customer-identity { text-align: center; }
#tab-whatsapp .wa-customer-identity h3 { font-size: 20px; margin-block: 8px; }
#tab-whatsapp .wa-customer-actions { display: flex; justify-content: center; gap: 12px; padding-block: 12px; }
#tab-whatsapp .wa-panel-section { padding-block: 16px; border-top: 1px solid var(--wa-border); }
#tab-whatsapp .wa-panel-section h3 { margin: 0 0 12px; color: var(--wa-muted); font-weight: 500; }
#tab-whatsapp .wa-panel-media { display: flex; gap: 8px; overflow-x: auto; }
#tab-whatsapp .wa-panel-media .wa-button { flex: 0 0 64px; width: 64px; height: 64px; padding: 0; border: 0; overflow: hidden; background: var(--wa-bg); }
#tab-whatsapp .wa-panel-media img { width: 100%; height: 100%; object-fit: cover; }
#tab-whatsapp .wa-phone { direction: ltr; display: block; color: var(--wa-muted); font-size: 13px; overflow-wrap: anywhere; }
#tab-whatsapp .wa-customer-card { padding: 12px; margin-block: 8px; background: var(--wa-bg); border-radius: 8px; }
#tab-whatsapp .wa-customer-card time { display: block; }
#tab-whatsapp .wa-customer-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-block: 12px; border-bottom: 1px solid var(--wa-border); }
#tab-whatsapp .wa-balance { flex-shrink: 0; font-size: 12px; padding: 4px 8px; border-radius: 24px; white-space: nowrap; }
#tab-whatsapp .wa-balance-owes { color: var(--wa-error); background: var(--wa-error-bg); }
#tab-whatsapp .wa-balance-credit { color: var(--wa-success); background: var(--wa-success-bg); }
#tab-whatsapp .wa-invoices { margin-block: 16px; padding-block: 16px; border-top: 1px solid var(--wa-border); }
#tab-whatsapp .wa-invoices > summary { cursor: pointer; color: var(--wa-muted); }
#tab-whatsapp .wa-switch { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
#tab-whatsapp .wa-switch input { appearance: none; width: 36px; height: 20px; flex: 0 0 36px; border: 0; border-radius: 24px; padding: 0; background: var(--wa-muted); position: relative; cursor: pointer; }
#tab-whatsapp .wa-switch input::after { content: ''; position: absolute; width: 16px; height: 16px; top: 2px; left: 2px; border-radius: 50%; background: var(--wa-on-accent); transition: transform .15s; }
#tab-whatsapp .wa-switch input:checked { background: var(--wa-accent); }
#tab-whatsapp .wa-switch input:checked::after { transform: translateX(16px); }
#tab-whatsapp .wa-switch input:disabled { opacity: .45; cursor: not-allowed; }
#tab-whatsapp .wa-workflow { padding: 16px; border-top: 1px solid var(--wa-border); display: grid; gap: 8px; }
#tab-whatsapp .wa-workflow:empty { display: none; }
#tab-whatsapp .wa-note { white-space: pre-wrap; overflow-wrap: anywhere; border-inline-start: 4px solid var(--wa-border); padding-inline: 8px; }
#tab-whatsapp .wa-tags, #tab-whatsapp .wa-proof-actions { display: flex; flex-wrap: wrap; gap: 4px; }
#tab-whatsapp .wa-chip { display: inline-flex; gap: 4px; border: 1px solid var(--wa-border); border-radius: 12px; padding: 4px 8px; margin: 4px; font-size: 11px; overflow-wrap: anywhere; }
#tab-whatsapp .wa-dot { display: inline-block; width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--wa-muted); margin-inline-end: 8px; }
#tab-whatsapp .wa-proof-label { display: block; padding-block: 4px; color: var(--wa-muted); font-size: 11px; }
#tab-whatsapp .wa-customer-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
#tab-whatsapp .wa-customer-tabs .wa-button { flex: 1; border: 0; border-bottom: 2px solid transparent; border-radius: 0; font-size: 12px; }
#tab-whatsapp .wa-customer-tabs [aria-pressed=true] { color: var(--wa-success); border-bottom-color: var(--wa-accent); }

/* Menus, settings, search and selection. */
#tab-whatsapp .wa-context-menu { position:fixed; z-index:1000; width:min(280px,calc(100vw - 16px)); max-height:calc(100dvh - 16px); overflow:auto; background:var(--wa-surface); color:var(--wa-text); border-radius:12px; padding:8px; box-shadow:0 8px 32px var(--wa-shadow); }
#tab-whatsapp .wa-context-menu .wa-menu-row, #tab-whatsapp .wa-settings > .wa-menu-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 8px 12px; text-align: start; border: 0; border-radius: 8px; background: transparent; font-weight: 400; }
#tab-whatsapp .wa-menu-row:hover { background: var(--wa-active); }
#tab-whatsapp .wa-menu-icon { display: inline-flex; width:20px; height:20px; flex: 0 0 20px; color: var(--wa-icon); }
#tab-whatsapp .wa-menu-icon svg { width:20px; height:20px; }
#tab-whatsapp .wa-menu-label { flex: 1; overflow-wrap: anywhere; }
#tab-whatsapp .wa-menu-chevron { color: var(--wa-muted); font-size: 20px; margin-inline-start: auto; }
#tab-whatsapp .wa-destructive, #tab-whatsapp .wa-destructive .wa-menu-icon { color: var(--wa-error); }
#tab-whatsapp .wa-context-menu hr { border: 0; border-top: 1px solid var(--wa-border); margin-block: 8px; }
#tab-whatsapp .wa-reaction-choices { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 8px; border-bottom: 1px solid var(--wa-border); }
#tab-whatsapp .wa-settings { height: 100%; padding: 0; overflow-y: auto; }
#tab-whatsapp .wa-settings-title { position: sticky; top: 0; display: flex; align-items: center; gap: 12px; height: 60px; padding: 12px; background: var(--wa-bg); z-index: 1; }
#tab-whatsapp .wa-settings-title h3 { font-size: 20px; margin: 0; font-weight: 500; }
#tab-whatsapp .wa-assignment { display: none; }
#tab-whatsapp .wa-viewers { padding: 4px 12px; color: var(--wa-success); background: var(--wa-active); font-size: 12px; }
#tab-whatsapp .wa-viewers:empty { display: none; }
#tab-whatsapp .wa-chat-search { padding: 8px; background: var(--wa-bg); max-height: 40%; overflow: auto; }
#tab-whatsapp .wa-search-results { max-height: 200px; overflow: auto; flex-shrink: 0; }
#tab-whatsapp .wa-search-results:empty { display: none; }
#tab-whatsapp .wa-search-results .wa-button { display: block; width: 100%; text-align: start; font-weight: 400; }
#tab-whatsapp .wa-selection-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 12px; min-height: 60px; flex-shrink: 0; border-bottom: 1px solid var(--wa-border); background: var(--wa-bg); }
#tab-whatsapp .wa-selection-bar span { flex: 1; white-space: nowrap; }
#tab-whatsapp .wa-message-select { margin-inline-end: 8px; accent-color: var(--wa-accent); }
#tab-whatsapp .wa-message-selected { outline: 2px solid var(--wa-accent); }
#tab-whatsapp .wa-message:has(.wa-message-select:not([hidden])) { cursor: pointer; }

/* Dialogs and operational screens. */
#tab-whatsapp .wa-simulator { position: fixed; inset: 0 auto 0 0; width: min(480px,100%); max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border: 1px solid var(--wa-border); padding: 16px; background: var(--wa-surface); color: var(--wa-text); overflow-y: auto; overscroll-behavior: contain; }
#tab-whatsapp .wa-template-dialog { width: min(540px,calc(100% - 24px)); max-height: 85dvh; padding: 16px; border: 1px solid var(--wa-border); border-radius: 12px; background: var(--wa-surface); color: var(--wa-text); overflow: auto; }
#tab-whatsapp :is(.wa-simulator,.wa-template-dialog)::backdrop { background: var(--wa-shadow); }
#tab-whatsapp .wa-template-dialog .wa-body { padding: 12px; background: var(--wa-bg); border-radius: 8px; }
#tab-whatsapp .wa-field { display: flex; flex-direction: column; gap: 8px; margin-block: 12px; }
#tab-whatsapp .wa-field.wa-switch { flex-direction: row; }
#tab-whatsapp .wa-sim-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-block: 12px; }
#tab-whatsapp .wa-outbox { max-height: 460px; overflow: auto; }
#tab-whatsapp .wa-task-files { max-height: 220px; overflow: auto; }
#tab-whatsapp .wa-transfer-item { display: flex; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--wa-border); overflow-wrap: anywhere; }
#tab-whatsapp .wa-taxonomy-group { margin-block: 12px; padding-block: 8px; border-top: 1px solid var(--wa-border); }
#tab-whatsapp .wa-ai-days { display: flex; flex-wrap: wrap; gap: 12px; }
#tab-whatsapp .wa-ai-days .wa-field { flex-direction: row; align-items: center; }
#tab-whatsapp .wa-ai-examples textarea { min-height: 48px; }
#tab-whatsapp .wa-privacy-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; }
#tab-whatsapp .wa-privacy-settings h4 { width: 100%; }
#tab-whatsapp .wa-privacy-settings small { direction: ltr; overflow-wrap: anywhere; }
#tab-whatsapp .wa-broadcast-dialog progress { width: 100%; height: 16px; }
#tab-whatsapp .wa-broadcast-items { max-height: 50vh; overflow: auto; }
#tab-whatsapp .wa-report { overflow-x: auto; font-variant-numeric: tabular-nums; }
#tab-whatsapp .wa-report-table { width: 100%; border-collapse: collapse; white-space: nowrap; }
#tab-whatsapp .wa-report-table th, #tab-whatsapp .wa-report-table td { padding: 12px; border-bottom: 1px solid var(--wa-border); text-align: start; }
#tab-whatsapp .wa-disconnected { background: var(--wa-error-bg); color: var(--wa-error); border: 1px solid var(--wa-border); padding: 12px; border-radius: 8px; }
#tab-whatsapp .wa-integration { display: grid; gap: 12px; overflow-wrap: anywhere; }
#tab-whatsapp .wa-board { display:flex; flex:1; min-height:0; min-width:0; max-width:100%; overflow:auto; gap:12px; padding:12px; overscroll-behavior:contain; align-items:stretch; }
#tab-whatsapp .wa-board-column { flex:0 0 270px; min-width:0; overflow-y:auto; background:var(--wa-bg); border:1px solid var(--wa-border); border-radius:8px; }
#tab-whatsapp .wa-board-title { position: sticky; top: 0; display: flex; align-items: center; padding: 12px; background: var(--wa-bg); z-index: 1; }
#tab-whatsapp .wa-board-column .wa-conversation { width: calc(100% - 16px); background: var(--wa-surface); margin: 8px; padding: 8px; border-radius: 8px; }
#tab-whatsapp .wa-board-column .wa-avatar { width: 32px; height: 32px; font-size: 16px; }
#tab-whatsapp .wa-board-column .wa-conversation[draggable=true] { cursor: grab; }
#tab-whatsapp .wa-board-column > .wa-button { margin: 8px; }

/* Fullscreen image/video viewer. Kept within the inbox theme boundary. */
#tab-whatsapp .wa-image-viewer { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: var(--wa-overlay); color: var(--wa-viewer-text); overflow: hidden; }
#tab-whatsapp .wa-image-viewer::backdrop { background: var(--wa-overlay); }
#tab-whatsapp .wa-viewer-head { height: 72px; display: flex; align-items: center; gap: 12px; padding: 12px 24px; border-bottom: 1px solid var(--wa-border); }
#tab-whatsapp .wa-viewer-identity { flex: 1; }
#tab-whatsapp .wa-viewer-identity small { display: block; color: var(--wa-viewer-muted); }
#tab-whatsapp .wa-image-viewer .wa-icon-button { color: var(--wa-viewer-text); }
#tab-whatsapp .wa-viewer-stage { height: calc(100% - 72px); display: flex; align-items: center; justify-content: center; position: relative; padding: 24px 64px; touch-action: pan-y; }
#tab-whatsapp .wa-viewer-content { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
#tab-whatsapp .wa-viewer-stage :is(img,video) { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
#tab-whatsapp .wa-viewer-prev, #tab-whatsapp .wa-viewer-next { position: absolute; top: 50%; z-index: 1; background: var(--wa-viewer-control); color: var(--wa-viewer-text); }
#tab-whatsapp .wa-image-viewer .wa-icon-button:hover { background: var(--wa-viewer-hover); color: var(--wa-viewer-text); }
#tab-whatsapp .wa-viewer-prev svg, #tab-whatsapp .wa-viewer-next svg { width: 24px; height: 24px; fill: none; }
#tab-whatsapp .wa-viewer-prev { right: 12px; }
#tab-whatsapp .wa-viewer-next { left: 12px; }

/* Utilities, global inbox entry badges, and responsive layout. */
#tab-whatsapp .wa-empty { padding: 24px 8px; text-align: center; color: var(--wa-muted); }
#tab-whatsapp .wa-muted { color: var(--wa-muted); }
#tab-whatsapp .wa-error, #tab-whatsapp .wa-overdue { color: var(--wa-error); }
#tab-whatsapp .wa-intro { padding: 12px; margin: 8px; border-radius: 8px; background: var(--wa-bg); color: var(--wa-muted); font-size: 12px; }
#tab-whatsapp .wa-location, #tab-whatsapp .wa-contact-card { padding: 8px; overflow-wrap: anywhere; }
.wa-global-badge { display: inline-block; background: var(--wa-global-accent); color: var(--wa-global-on-accent); border-radius: 24px; padding: 4px 8px; font-size: 11px; margin-inline-start: 4px; }
.wa-global-badge[hidden], [data-wa-template-entry][hidden] { display: none !important; }
#sidebar #btn-whatsapp { position: relative; }
#sidebar #btn-whatsapp > .wa-global-badge:not(:empty):not([hidden]) { display: inline-block !important; position: absolute; top: 4px; inset-inline-start: 4px; margin: 0; }
.wa-send-toast { position: fixed; inset: auto 16px 24px auto; z-index: 100000; max-width: min(480px,calc(100% - 32px)); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px; border-radius: 12px; background: var(--wa-global-toast); color: var(--wa-global-on-accent); box-shadow: 0 1px 4px var(--wa-global-shadow); }
.wa-send-toast button { padding: 4px 8px; border: 1px solid currentColor; border-radius: 8px; color: inherit; background: transparent; font: inherit; }
@media (min-width:900px) {
    #tab-whatsapp.wa-board-mode .wa-grid { grid-template-columns: minmax(0,1fr); }
    #tab-whatsapp.wa-board-mode:not(.wa-chat-open) .wa-chat { display: none; }
    #tab-whatsapp.wa-board-mode.wa-chat-open .wa-grid { grid-template-columns: minmax(0,55%) minmax(0,45%); }
    #tab-whatsapp.wa-board-mode.wa-customer-open .wa-grid { grid-template-columns: minmax(0,35%) minmax(0,40%) minmax(0,25%); }
}
@media (max-width:899px) {
    #tab-whatsapp .wa-grid, #tab-whatsapp.wa-customer-open .wa-grid { display: block; height: var(--wa-fit,calc(100dvh - 150px)); position: relative; }
    #tab-whatsapp .wa-list { height: 100%; border: 0; }
    #tab-whatsapp .wa-chat { display: none; height: 100%; }
    #tab-whatsapp.wa-chat-open .wa-list { display: none; }
    #tab-whatsapp.wa-chat-open .wa-chat { display: flex; }
    #tab-whatsapp .wa-mobile { display: inline-flex; }
    #tab-whatsapp.wa-customer-open .wa-customer { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 12; }
    #tab-whatsapp.wa-customer-open .wa-chat { display: none; }
    #tab-whatsapp .wa-message { max-width: 84%; }
    #tab-whatsapp .wa-messages { padding: 12px 16px; }
    #tab-whatsapp .wa-chat-head { gap: 4px; padding-inline: 8px; }
    #tab-whatsapp .wa-chat-head .wa-icon-button { width: 32px; }
    #tab-whatsapp .wa-bubble-actions { display: none; }
    #tab-whatsapp .wa-row-more, #tab-whatsapp .wa-bubble-more { opacity: 1; }
    #tab-whatsapp .wa-viewer-head { padding: 8px; gap: 4px; }
    #tab-whatsapp .wa-viewer-stage { padding: 16px 40px; }
    #tab-whatsapp .wa-viewer-prev { right: 4px; }
    #tab-whatsapp .wa-viewer-next { left: 4px; }
}
@media (prefers-reduced-motion:reduce) { #tab-whatsapp *, #tab-whatsapp *::before, #tab-whatsapp *::after { transition: none !important; } }