/* ========================================================================= WhatsApp Dock — floating, persistent chat windows (LinkedIn-style). The dock mounts on , outside the SPA view root, so it survives navigation. Each window wears .wa-panel, which carries every --wa-* token (and its dark-theme overrides) from app.css — the thread, bubbles, day separators, states and skeletons inside are the SAME classes the user-tab conversation uses. This file styles only what is new: the shell, the header chrome, the minimized pills, and the compact composer. Everything composes existing tokens. No one-off hex, no new colors. ========================================================================= */ .wa-dock { position: fixed; right: var(--space-5); bottom: 0; display: flex; flex-direction: row-reverse; /* newest chat lands nearest the corner */ align-items: flex-end; gap: var(--space-3); /* Above sticky chrome, below modals — a chat must never cover a dialog. */ z-index: 300; pointer-events: none; /* the gaps must not eat clicks */ } .wa-dock-slot { pointer-events: auto; } /* ---------------------------------------------------------------- window */ .wa-dock-win { display: flex; flex-direction: column; width: 360px; height: min(70vh, 520px); background: var(--wa-surface); border: 1px solid var(--wa-line); border-bottom: none; border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.18)); overflow: hidden; } /* ---------------------------------------------------------------- header */ .wa-dock-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--wa-line); background: var(--wa-surface); flex-shrink: 0; } .wa-dock-id { flex: 1; min-width: 0; } .wa-dock-name { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--wa-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* The 24h-window state, worn as a dot beside the name. Meaning lives in the tooltip and aria — the color is reinforcement, never the only signal. */ .wa-dock-dot { width: 8px; height: 8px; border-radius: var(--radius-full); flex-shrink: 0; background: var(--color-gray-400); } .wa-dock-dot[data-state="open"] { background: var(--color-success); } .wa-dock-dot[data-state="closing"] { background: var(--color-warning); } .wa-dock-sub { display: flex; align-items: center; gap: var(--space-1); margin-top: 1px; font-size: var(--font-size-xs); color: var(--wa-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wa-dock-sub svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--wa-accent); } .wa-dock-numsel { border: none; background: transparent; font-family: inherit; font-size: var(--font-size-xs); color: var(--wa-ink-2); padding: 0; max-width: 200px; cursor: pointer; } .wa-dock-numsel:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; } /* Ownership + auto-reply state line under the number */ .wa-dock-agentline { position: relative; display: flex; align-items: center; gap: var(--space-2); margin-top: 2px; font-size: 11px; color: var(--wa-ink-2); white-space: nowrap; } .wa-dock-agentline .is-unassigned { color: var(--wa-ink-3); } /* Resolution tag — who resolved it (our record) + upstream sync differentiation */ .wa-dock-resolvetag { color: var(--color-success); font-weight: 600; } .wa-dock-syncpill { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 999px; font-size: 10px; font-weight: 600; line-height: 1.4; letter-spacing: 0.01em; } .wa-dock-syncpill.is-synced { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 12%, transparent); } .wa-dock-syncpill.is-unsynced { color: var(--color-warning, #b45309); background: color-mix(in srgb, var(--color-warning, #b45309) 14%, transparent); } /* The owner text is the assignment menu's trigger */ .wa-dock-ownerbtn { display: inline-flex; align-items: center; gap: 2px; border: none; background: transparent; padding: 0; font: inherit; color: inherit; cursor: pointer; max-width: 220px; overflow: hidden; text-overflow: ellipsis; } .wa-dock-ownerbtn:hover { color: var(--wa-ink); text-decoration: underline; } .wa-dock-ownerbtn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; } .wa-dock-ownerbtn svg { width: 10px; height: 10px; flex-shrink: 0; opacity: 0.7; } .wa-assign-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 10; min-width: 190px; max-height: 240px; overflow-y: auto; padding: var(--space-1); background: var(--color-bg-primary); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.16)); white-space: normal; } .wa-assign-item { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-2) var(--space-3); border: none; border-radius: var(--radius-sm); background: transparent; font-family: inherit; font-size: var(--font-size-xs); color: var(--color-text-primary); text-align: left; cursor: pointer; } /* Profile cards inside the menu — same avatar every other surface uses */ .wa-assign-ava { width: 26px; height: 26px; flex-shrink: 0; border-radius: var(--radius-full); object-fit: cover; } .wa-assign-item .wa-pill-avatar { width: 26px; height: 26px; } .wa-assign-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; } .wa-assign-name { font-weight: var(--font-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wa-assign-email { font-size: 10px; color: var(--color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wa-assign-item:hover:not(:disabled) { background: var(--color-bg-secondary); } .wa-assign-item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; } .wa-assign-item:disabled { color: var(--color-text-tertiary); cursor: default; } .wa-assign-item.is-me { font-weight: var(--font-weight-semibold); } .wa-assign-item.is-current { color: var(--color-text-tertiary); } .wa-assign-sep { height: 1px; margin: var(--space-1) 0; background: var(--color-border); } .wa-dock-replystate { flex-shrink: 0; padding: 0 var(--space-1); border: 1px solid var(--wa-line); border-radius: var(--radius-sm); color: var(--wa-ink-3); } .wa-dock-replystate[data-on="true"] { border-color: var(--wa-open-line); color: var(--wa-accent-deep); } .wa-dock-actions { display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0; } .wa-dock-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; border-radius: var(--radius-md); background: transparent; color: var(--wa-ink-3); cursor: pointer; } .wa-dock-iconbtn:hover { background: var(--wa-canvas); color: var(--wa-ink); } .wa-dock-resolvebtn.is-resolved { color: var(--color-success); } .wa-dock-resolvebtn.is-resolved:hover { background: var(--wa-canvas); } .wa-dock-iconbtn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; } .wa-dock-iconbtn svg { width: 16px; height: 16px; } /* ------------------------------------------------------------------ body */ .wa-dock-body { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--wa-canvas); } /* The shared thread styles cap height for the tab layout; in the dock the window itself is the cap, so the thread just fills it. */ .wa-dock-body .wa-thread { flex: 1; max-height: none; padding: var(--space-4) var(--space-4) var(--space-3); } /* Bubbles may take nearly the full (narrow) window width. */ .wa-dock-win { --wa-bubble-max: 88%; } /* The "slightly bigger" mode — comfortable reading without leaving the dock */ .wa-dock-win.is-large { width: min(520px, calc(100vw - var(--space-8))); height: min(85vh, 720px); --wa-bubble-max: 78%; } .wa-dock-body .wa-state { margin: auto; padding: var(--space-6) var(--space-5); text-align: center; } .wa-dock-body .wa-skeleton { padding: var(--space-5); } /* -------------------------------------------------------------- composer */ .wa-dock-reply { flex-shrink: 0; border-top: 1px solid var(--wa-line); background: var(--wa-surface); padding: var(--space-2) var(--space-3); } .wa-dock-replyrow { display: flex; align-items: flex-end; gap: var(--space-2); } .wa-dock-input { flex: 1; min-width: 0; resize: none; border: 1px solid var(--wa-line); border-radius: var(--radius-lg); background: var(--wa-canvas); padding: var(--space-2) var(--space-3); font-family: inherit; font-size: var(--font-size-sm); line-height: 1.4; color: var(--wa-ink); max-height: 96px; } .wa-dock-input::placeholder { color: var(--wa-ink-3); } .wa-dock-input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -1px; } .wa-dock-send { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border: none; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-text-inverse, #fff); cursor: pointer; } .wa-dock-send:hover:not(:disabled) { background: var(--color-primary-dark); } .wa-dock-send:disabled { opacity: 0.45; cursor: default; } .wa-dock-send:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .wa-dock-send svg { width: 15px; height: 15px; } .wa-dock-attachbtn { align-self: flex-end; margin-bottom: 2px; } .wa-dock-attachbtn svg { width: 15px; height: 15px; } /* Staged attachment chip */ .wa-dock-attachment { padding: 0 0 var(--space-2); } .wa-dock-attachchip { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; padding: var(--space-1) var(--space-2); border: 1px solid var(--wa-line); border-radius: var(--radius-md); background: var(--wa-canvas); font-size: var(--font-size-xs); color: var(--wa-ink-2); } .wa-dock-attachchip svg { width: 12px; height: 12px; flex-shrink: 0; } .wa-dock-attachname { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wa-ink); } .wa-dock-attachsize { flex-shrink: 0; } .wa-dock-attachchip button { display: inline-flex; border: none; background: transparent; color: var(--wa-ink-3); cursor: pointer; padding: 2px; border-radius: var(--radius-sm); } .wa-dock-attachchip button:hover { color: var(--color-danger); } .wa-dock-attachchip button svg { width: 12px; height: 12px; } /* Blocked composer: 24h window closed, or no send permission. One quiet bar. */ .wa-dock-blocked { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--wa-line); background: var(--wa-surface); font-size: var(--font-size-xs); color: var(--wa-ink-2); } .wa-dock-blocked svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--wa-ink-3); } .wa-dock-blocked span { flex: 1; min-width: 0; } .wa-dock-blocked a { display: inline-flex; align-items: center; gap: var(--space-1); flex-shrink: 0; font-weight: var(--font-weight-semibold); color: var(--color-primary); text-decoration: none; white-space: nowrap; } .wa-dock-blocked a:hover { text-decoration: underline; } .wa-dock-blocked a svg { width: 12px; height: 12px; color: currentColor; } /* ------------------------------------------------------------------ pill */ .wa-pill { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-bg-primary); box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.12)); font-family: inherit; cursor: pointer; } .wa-pill:hover { border-color: var(--color-primary); } .wa-pill:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .wa-pill-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: var(--radius-full); background: var(--color-primary-light); color: var(--color-primary-dark); font-size: 11px; font-weight: var(--font-weight-semibold); letter-spacing: 0.02em; overflow: hidden; } /* Gravatar layered over the initials; d=blank = transparent when none exists */ .wa-ava-grav { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .wa-pill-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-primary); } .wa-pill-unread { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full); background: var(--color-danger); color: #fff; font-size: 11px; font-weight: var(--font-weight-semibold); } .wa-pill-close { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--radius-full); color: var(--color-text-tertiary); } .wa-pill-close:hover { background: var(--color-bg-secondary); color: var(--color-text-primary); } .wa-pill-close svg { width: 12px; height: 12px; } /* ------------------------------------------------------------------ tray */ .wa-tray-pill { margin-bottom: var(--space-3); } .wa-tray-pill svg { width: 16px; height: 16px; color: var(--color-primary); } .wa-tray-panel { display: flex; flex-direction: column; width: 300px; max-height: min(60vh, 440px); background: var(--color-bg-primary); border: 1px solid var(--color-border); border-bottom: none; border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.18)); overflow: hidden; } /* Mine / All segmented scope switch in the tray header */ .wa-tray-scope { display: inline-flex; flex-shrink: 0; padding: 2px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-secondary); } .wa-tray-scopebtn { padding: 2px var(--space-2); border: none; border-radius: var(--radius-sm); background: transparent; font-family: inherit; font-size: 11px; font-weight: var(--font-weight-medium); color: var(--color-text-tertiary); cursor: pointer; } .wa-tray-scopebtn.is-on { background: var(--color-bg-primary); color: var(--color-text-primary); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.08)); } .wa-tray-scopebtn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; } .wa-tray-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-1) 0; } /* Cold first load of a tab: row-shaped placeholders hold the panel's height so switching scopes never collapses and re-grows the window. */ .wa-tray-skel { padding: var(--space-1) 0; } .wa-tray-skelrow { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); } .wa-tray-skelava { /* Same 26px as .wa-pill-avatar — real rows land at the same height. */ width: 26px; height: 26px; flex-shrink: 0; border-radius: var(--radius-full); background: var(--color-bg-secondary); animation: wa-tpl-pulse 1.2s ease-in-out infinite; } .wa-tray-skellines { flex: 1; display: flex; flex-direction: column; gap: 5px; } .wa-tray-skellines span { height: 9px; border-radius: var(--radius-sm); background: var(--color-bg-secondary); animation: wa-tpl-pulse 1.2s ease-in-out infinite; } .wa-tray-skellines span:first-child { width: 55%; } .wa-tray-skellines span:last-child { width: 85%; } @media (prefers-reduced-motion: reduce) { .wa-tray-skelava, .wa-tray-skellines span { animation: none; } } .wa-tray-row { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-2) var(--space-4); border: none; background: transparent; font-family: inherit; text-align: left; cursor: pointer; } .wa-tray-row:hover { background: var(--color-bg-secondary); } .wa-tray-row:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; } .wa-tray-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .wa-tray-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wa-tray-row.has-unread .wa-tray-name { font-weight: var(--font-weight-semibold); } .wa-tray-ownertag { display: inline-block; padding: 0 var(--space-1); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 10px; font-weight: var(--font-weight-medium); color: var(--color-text-tertiary); vertical-align: 1px; } .wa-tray-snippet { font-size: var(--font-size-xs); color: var(--color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wa-tray-row.has-unread .wa-tray-snippet { color: var(--color-text-secondary); } .wa-tray-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; } .wa-tray-when { font-size: 11px; color: var(--color-text-tertiary); white-space: nowrap; } .wa-tray-empty { padding: var(--space-6) var(--space-4); text-align: center; font-size: var(--font-size-sm); color: var(--color-text-tertiary); } /* -------------------------------------------------- reachability states */ /* No number anywhere in our data: the action is a long shot — say so quietly */ .reach-dim { opacity: 0.35; } /* A number IS on file: the action will connect — both triggers show it */ [data-call].reach-ok, [data-wa].reach-ok { color: var(--color-success); } /* An ACTIVE chat exists in our mirror: the strongest invitation to click */ [data-wa].reach-chat { position: relative; } [data-wa].reach-chat::after { content: ''; position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-success); border: 1.5px solid var(--color-bg-primary); } [data-wa].reach-chat { color: var(--color-success); } /* ------------------------------------------- trigger buttons in tables */ /* CRM phone cell: number + compact chat trigger, one quiet row */ .crm-phone-cell { display: inline-flex; align-items: center; gap: var(--space-2); } .crm-phone-cell .wa-chat-btn { width: 24px; height: 24px; padding: 0; } .crm-phone-cell .wa-chat-btn svg { width: 14px; height: 14px; } /* ------------------------------------------------------------ responsive */ @media (max-width: 640px) { .wa-dock { right: var(--space-2); left: var(--space-2); } .wa-dock-win { width: calc(100vw - var(--space-2) * 2); } } /* ========================================================================= Template composer — the way back in once the 24h window has closed. Takes over the window body (pick → fill → send); every rule composes the --wa-* tokens, so it inherits dark theme for free. No one-off hex. ========================================================================= */ /* The opener, worn by the blocked bar where the external link used to be */ .wa-dock-tplopen { display: inline-flex; align-items: center; gap: var(--space-1); flex-shrink: 0; border: none; background: transparent; padding: 0; font: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-primary); cursor: pointer; white-space: nowrap; } .wa-dock-tplopen:hover { text-decoration: underline; } .wa-dock-tplopen:focus-visible { outline: 2px solid var(--wa-accent); outline-offset: 2px; border-radius: var(--radius-sm); } .wa-dock-tplopen svg { width: 12px; height: 12px; } /* ------------------------------------------------------------ panel shell */ .wa-tpl { display: flex; flex-direction: column; min-height: 0; flex: 1; background: var(--wa-surface); position: relative; /* anchor for the searchable flow-picker overlay */ } .wa-tpl-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--wa-line); flex-shrink: 0; } .wa-tpl-title { flex: 1; min-width: 0; } .wa-tpl-titletext { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--wa-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wa-tpl-sub { display: block; font-size: 11px; color: var(--wa-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ------------------------------------------------------------ pick step */ .wa-tpl-search { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) var(--space-3) var(--space-2); padding: 0 var(--space-2); border: 1px solid var(--wa-line); border-radius: var(--radius-md); background: var(--wa-canvas); flex-shrink: 0; } .wa-tpl-search:focus-within { border-color: var(--wa-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wa-accent) 15%, transparent); } .wa-tpl-search svg { width: 14px; height: 14px; color: var(--wa-ink-3); flex-shrink: 0; } .wa-tpl-search input { flex: 1; min-width: 0; border: none; background: transparent; padding: var(--space-2) 0; font: inherit; font-size: var(--font-size-sm); color: var(--wa-ink); outline: none; } .wa-tpl-search input::placeholder { color: var(--wa-ink-3); } .wa-tpl-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--space-3) var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); } .wa-tpl-card { text-align: left; border: 1px solid var(--wa-line); border-radius: var(--radius-lg); background: var(--wa-surface); padding: var(--space-3); font: inherit; color: inherit; cursor: pointer; flex-shrink: 0; transition: border-color 0.12s ease, background-color 0.12s ease; } .wa-tpl-card:hover { border-color: color-mix(in srgb, var(--wa-accent) 45%, var(--wa-line)); background: color-mix(in srgb, var(--wa-accent) 4%, var(--wa-surface)); } .wa-tpl-card:focus-visible { outline: 2px solid var(--wa-accent); outline-offset: 2px; } .wa-tpl-cardtop { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .wa-tpl-cardname { min-width: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--wa-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wa-tpl-cat { flex-shrink: 0; padding: 1px 6px; border-radius: var(--radius-full); font-size: 10px; font-weight: 600; letter-spacing: 0.01em; color: var(--wa-ink-2); background: color-mix(in srgb, var(--wa-ink-3) 14%, transparent); } .wa-tpl-cardbody { margin: var(--space-1) 0 0; font-size: var(--font-size-xs); line-height: 1.45; color: var(--wa-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .wa-tpl-cardmeta { margin-top: var(--space-2); font-size: 11px; color: var(--wa-ink-3); } .wa-tpl-nomatch { padding: var(--space-5) var(--space-3); text-align: center; font-size: var(--font-size-xs); color: var(--wa-ink-3); } .wa-tpl-skel { flex: 1; padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); } .wa-tpl-skel > div { height: 72px; flex-shrink: 0; border-radius: var(--radius-lg); background: var(--wa-canvas); animation: wa-tpl-pulse 1.2s ease-in-out infinite; } @keyframes wa-tpl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } /* ------------------------------------------------------------ fill step */ .wa-tpl-form { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-4); background: var(--wa-surface); } /* The preview sits on the thread canvas so the bubble reads as a real message */ .wa-tpl-preview { background: var(--wa-canvas); border: 1px solid var(--wa-line); border-radius: var(--radius-lg); padding: var(--space-3); flex-shrink: 0; } .wa-tpl-bubble { margin-left: auto; width: fit-content; max-width: 95%; background: var(--wa-ours-bg); border: 1px solid var(--wa-ours-line); border-radius: var(--wa-radius); border-bottom-right-radius: var(--wa-tuck); padding: var(--space-2) var(--space-3); font-size: var(--font-size-sm); line-height: 1.45; color: var(--wa-ink); } .wa-tpl-prevhead { font-weight: var(--font-weight-semibold); margin-bottom: var(--space-1); } .wa-tpl-prevbody { white-space: pre-wrap; word-break: break-word; } .wa-tpl-prevfoot { margin-top: var(--space-1); font-size: 11px; color: var(--wa-ink-3); } .wa-tpl-prevmedia { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); margin-bottom: var(--space-2); border-radius: var(--radius-md); background: color-mix(in srgb, var(--wa-ink-3) 10%, transparent); font-size: var(--font-size-xs); color: var(--wa-ink-2); } .wa-tpl-prevmedia svg { width: 16px; height: 16px; flex-shrink: 0; } .wa-tpl-previmg { display: block; width: 100%; max-height: 140px; object-fit: cover; border-radius: var(--radius-md); margin-bottom: var(--space-2); } /* A variable inside the preview: quiet chip while empty, plain text once typed */ .wa-tpl-var { padding: 0 4px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--wa-accent) 14%, transparent); color: var(--wa-accent-deep); font-weight: var(--font-weight-medium); } .wa-tpl-var.is-filled { padding: 0; background: transparent; color: inherit; font-weight: inherit; } /* Auto-filled from what we already know — dashed until a human confirms, the same "provisional, click/edit to decide" language the flow badges use. */ .wa-tpl-var.is-auto { padding: 0 2px; background: color-mix(in srgb, var(--wa-accent) 6%, transparent); color: inherit; font-weight: inherit; border-bottom: 1px dashed color-mix(in srgb, var(--wa-accent) 60%, transparent); border-radius: 2px; cursor: help; } /* Preview buttons: the light rows WhatsApp itself draws under a template. Quick-reply rows double as the flow picker (a transparent native select covers the row) — the mapping is changeable where it is visible, never in a section below the fold. */ .wa-tpl-prevbtns { margin: 6px 0 0 auto; max-width: 95%; display: flex; flex-direction: column; gap: 4px; } .wa-tpl-prevbtn { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--wa-surface); border: 1px solid var(--wa-line); color: var(--wa-read-ink); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } .wa-tpl-prevbtn.is-config { position: relative; cursor: pointer; transition: border-color 0.12s ease, box-shadow 0.12s ease; } .wa-tpl-prevbtn.is-config:hover, .wa-tpl-prevbtn.is-config:has(.wa-tpl-prevbtn-select:focus-visible) { border-color: color-mix(in srgb, var(--wa-accent) 55%, var(--wa-line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wa-accent) 12%, transparent); } .wa-tpl-prevbtn-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The mapping badge: what tapping this button will do. Neutral while empty, accent once linked; DASHED while it is only our auto-suggestion — the shape says "provisional, click to decide", not just the color. */ .wa-tpl-prevbtn-map { display: inline-flex; align-items: center; gap: 3px; min-width: 0; max-width: 55%; padding: 1px 7px; border: 1px solid transparent; border-radius: var(--radius-full); font-size: 10px; font-weight: 600; line-height: 1.6; color: var(--wa-ink-3); background: color-mix(in srgb, var(--wa-ink-3) 8%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wa-tpl-prevbtn-map svg { width: 10px; height: 10px; flex-shrink: 0; } .wa-tpl-prevbtn.is-linked .wa-tpl-prevbtn-map { color: var(--wa-accent-deep); background: color-mix(in srgb, var(--wa-accent) 12%, transparent); } .wa-tpl-prevbtn.is-auto .wa-tpl-prevbtn-map { border: 1px dashed color-mix(in srgb, var(--wa-accent) 55%, transparent); background: color-mix(in srgb, var(--wa-accent) 6%, transparent); } .wa-tpl-prevbtn-chev { display: inline-flex; flex-shrink: 0; color: var(--wa-ink-3); } .wa-tpl-prevbtn-chev svg { width: 12px; height: 12px; } .wa-tpl-prevbtn.is-config:hover .wa-tpl-prevbtn-chev { color: var(--wa-accent-deep); } .wa-tpl-prevbtn.is-config:focus-visible { outline: none; border-color: color-mix(in srgb, var(--wa-accent) 55%, var(--wa-line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wa-accent) 12%, transparent); } .wa-tpl-prevbtn.is-open { border-color: var(--wa-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wa-accent) 15%, transparent); } /* ---------------------------------------------- searchable flow picker panel */ /* Fills the dock body so a long flow list gets a real search box + scroll, with no clipping inside the small window. */ .wa-flowpick-panel { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; min-height: 0; background: var(--wa-surface); animation: waFlowpickIn 0.12s ease; } @keyframes waFlowpickIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .wa-flowpick-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--wa-line); flex-shrink: 0; } .wa-flowpick-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-2) var(--space-2) var(--space-3); display: flex; flex-direction: column; gap: 2px; } .wa-flowpick-opt { display: flex; align-items: center; gap: var(--space-2); width: 100%; text-align: left; padding: var(--space-2) var(--space-3); border: none; border-radius: var(--radius-md); background: transparent; color: var(--wa-ink); font: inherit; font-size: var(--font-size-sm); cursor: pointer; } .wa-flowpick-opt svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--wa-accent); } .wa-flowpick-optname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wa-flowpick-opt:hover { background: var(--wa-canvas); } .wa-flowpick-opt:focus-visible { outline: none; background: var(--wa-canvas); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--wa-accent) 40%, transparent); } .wa-flowpick-opt.is-sel { background: color-mix(in srgb, var(--wa-accent) 10%, transparent); font-weight: var(--font-weight-medium); } .wa-flowpick-check { display: inline-flex; align-items: center; color: var(--wa-accent-deep); flex-shrink: 0; } .wa-flowpick-check svg { width: 13px; height: 13px; color: var(--wa-accent-deep); } .wa-flowpick-none { color: var(--wa-ink-2); } .wa-flowpick-none svg { display: none; } .wa-flowpick-empty { padding: var(--space-4) var(--space-3); text-align: center; font-size: var(--font-size-sm); color: var(--wa-ink-3); } /* ------------------------------------------------------------ form fields */ .wa-tpl-fields { display: flex; flex-direction: column; gap: var(--space-2); } .wa-tpl-sectionlabel { font-size: 11px; font-weight: var(--font-weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--wa-ink-3); } .wa-tpl-field { display: flex; flex-direction: column; gap: 4px; } .wa-tpl-fieldrow { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .wa-tpl-fieldname { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--wa-ink-2); } /* Provenance chip: says where an auto-filled value came from. Dashed, accent — matches the flow-button "auto-matched" badge; disappears once the field is edited (the human has confirmed it). */ .wa-tpl-fieldauto { display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; font-size: 10px; font-weight: 600; line-height: 1.7; color: var(--wa-accent-deep); background: color-mix(in srgb, var(--wa-accent) 6%, transparent); border: 1px dashed color-mix(in srgb, var(--wa-accent) 55%, transparent); border-radius: var(--radius-full); white-space: nowrap; } .wa-tpl-fieldauto svg { width: 9px; height: 9px; flex-shrink: 0; } .wa-tpl-fieldhint { font-size: 11px; color: var(--wa-ink-3); } .wa-tpl-field input, .wa-tpl-field select { width: 100%; border: 1px solid var(--wa-line); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font: inherit; font-size: var(--font-size-sm); background: var(--wa-surface); color: var(--wa-ink); } .wa-tpl-field input:focus-visible, .wa-tpl-field select:focus-visible { outline: none; border-color: var(--wa-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wa-accent) 15%, transparent); } /* ------------------------------------------------------------ send footer */ .wa-tpl-foot { flex-shrink: 0; padding: var(--space-3); border-top: 1px solid var(--wa-line); background: var(--wa-surface); display: flex; flex-direction: column; gap: var(--space-2); } .wa-tpl-send { display: flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; padding: var(--space-2) var(--space-3); border: none; border-radius: var(--radius-md); background: var(--wa-accent); color: var(--color-text-inverse); font: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); cursor: pointer; } .wa-tpl-send:hover:not(:disabled) { background: var(--wa-accent-deep); } .wa-tpl-send:focus-visible { outline: 2px solid var(--wa-accent-deep); outline-offset: 2px; } .wa-tpl-send:disabled { opacity: 0.55; cursor: default; } .wa-tpl-send svg { width: 14px; height: 14px; } .wa-tpl-foothint { font-size: 11px; color: var(--wa-ink-3); text-align: center; } .wa-tpl-error { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-danger) 8%, transparent); font-size: var(--font-size-xs); color: var(--wa-fail-ink); } .wa-tpl-error svg { width: 14px; height: 14px; flex-shrink: 0; } @media (prefers-reduced-motion: reduce) { .wa-tpl-card { transition: none; } .wa-tpl-prevbtn.is-config { transition: none; } .wa-tpl-skel > div { animation: none; } }