/* ---- system-flow-a ---- */
/* system-flow-a: the hero "production line". A cobalt rail of six numbered stations; each = time chip, name, one line
of explanation and a mini mockup. The markup IS the finished frame (every mockup filled in, rail full, clock 07:00).
script.js only adds .is-live: rail fill + travelling lead ticket, active-station outline, clock, small pulses.
Layout by the root's content width: <620 vertical rail · 620+ 2 columns · 880+ 3 columns · 1120+ one row of six
(root ≈ 650 / 915 / 1155px wide). */
.m-system-flow-a{--sf-cg:20px;--sf-mint:#0A7558;position:relative;box-sizing:border-box;width:100%;container-type:inline-size;overflow:hidden;padding:18px 16px 20px;border:1px solid var(--x-line);border-radius:var(--x-radius);background:var(--x-paper);color:var(--x-text);font:14px/1.4 var(--x-font-body);text-align:left}
.m-system-flow-a *,.m-system-flow-a ::before,.m-system-flow-a ::after{box-sizing:border-box}
.m-system-flow-a i,.m-system-flow-a em{font-style:normal}
.m-system-flow-a b{font-weight:700}
/* header */
.m-system-flow-a__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-bottom:22px}
.m-system-flow-a__brand{display:flex;align-items:center;gap:10px;min-width:0}
.m-system-flow-a__emblem{flex:none;padding:4px 8px;border-radius:7px;background:var(--x-primary);color:#fff;font:700 11px/1.2 var(--x-font-ui)}
.m-system-flow-a__title{font:600 clamp(17px,1.2cqi + 11px,21px)/1.25 var(--x-font-display);color:var(--x-ink)}
.m-system-flow-a__clock{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:1px solid var(--x-line);border-radius:999px;background:#fff;font:700 13px var(--x-font-ui);color:var(--x-ink);white-space:nowrap}
.m-system-flow-a__clock svg{color:var(--x-primary)}
.m-system-flow-a__clock b{display:inline-block;font-variant-numeric:tabular-nums}
.m-system-flow-a__clock span,.m-system-flow-a__clock em{font-weight:400;color:var(--x-muted)}
.m-system-flow-a__clock em{padding-left:7px;border-left:1px solid var(--x-line)}
/* rail + stations: vertical by default */
.m-system-flow-a__line{position:relative;display:grid;gap:22px}
.m-system-flow-a__st{position:relative;display:flex;flex-direction:column;min-width:0;padding-left:40px}
.m-system-flow-a__st::before,.m-system-flow-a__st::after{content:"";position:absolute;z-index:0;left:12px;top:14px;bottom:-22px;width:4px;border-radius:2px;background:var(--x-cobalt);transform-origin:0 0;transition:transform .62s var(--x-ease)}
.m-system-flow-a__st::before{background:var(--x-cobalt-soft);transition:none}
.m-system-flow-a__st:nth-child(6)::before,.m-system-flow-a__st:nth-child(6)::after{display:none}
.m-system-flow-a__node{display:flex;align-items:center;gap:8px;min-height:28px;margin-bottom:8px}
.m-system-flow-a__dot{position:absolute;z-index:2;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--x-primary);color:#fff;font:700 13px/28px var(--x-font-ui);text-align:center;box-shadow:0 0 0 3px var(--x-paper)}
.m-system-flow-a__dot::after{content:"";position:absolute;inset:-5px;border:2px solid var(--x-cobalt);border-radius:50%;opacity:0}
.m-system-flow-a__time{position:relative;z-index:1;padding:2px 8px;border:1px solid var(--x-line);border-radius:999px;background:#fff;font:700 11px/16px var(--x-font-ui);color:var(--x-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.m-system-flow-a__name{margin-bottom:3px;font-size:15px;line-height:1.3;color:var(--x-ink)}
.m-system-flow-a__desc{margin:0 0 10px;font-size:13px;line-height:1.4;color:var(--x-muted)}
.m-system-flow-a__foot{margin:22px 0 0;padding-top:14px;border-top:1px solid var(--x-line);font-size:15px;line-height:1.5}
/* the lead ticket (only exists while .is-live) */
.m-system-flow-a__packet{position:absolute;z-index:3;left:0;top:0;display:none;align-items:center;gap:5px;border-radius:999px;background:#fff;box-shadow:0 0 0 2px var(--x-cobalt),var(--x-shadow);font:700 12px/24px var(--x-font-ui);color:var(--x-ink);white-space:nowrap;opacity:0;transition:transform .62s var(--x-ease),opacity .25s}
.m-system-flow-a__packet i{width:24px;height:24px;border-radius:50%;background:var(--x-primary);color:#fff;font-size:11px;text-align:center}
.m-system-flow-a__packet span{display:none}
.m-system-flow-a.is-live .m-system-flow-a__packet{display:flex}
.m-system-flow-a__packet.is-on{opacity:1}
.m-system-flow-a__packet.is-jump{transition:opacity .25s}
/* mockup shell (UI font, 11px minimum) */
.m-system-flow-a__mock{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;min-width:0;padding:9px;border:1px solid var(--x-line);border-radius:12px;background:#fff;box-shadow:var(--x-shadow-sm);font:11px/1.35 var(--x-font-ui);transition:transform .4s var(--x-ease)}
.m-system-flow-a__mock::after{content:"";position:absolute;inset:-4px;border:2px solid var(--x-cobalt);border-radius:15px;opacity:0;transition:opacity .3s;pointer-events:none}
.m-system-flow-a__mh{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;padding-bottom:7px;border-bottom:1px solid var(--x-line);color:var(--x-muted)}
.m-system-flow-a__mock b,.m-system-flow-a__mh b{color:var(--x-ink)}
.m-system-flow-a__mr{display:inline-flex;align-items:center;gap:5px;margin-left:auto}
.m-system-flow-a__chip{display:inline-block;margin-left:auto;padding:1px 7px;border-radius:999px;background:#F9EBEB;color:var(--x-primary);font-weight:700}
.m-system-flow-a__chip--warm{background:#FDECE8;color:#A8321F}
.m-system-flow-a__av{flex:none;width:26px;height:26px;border-radius:50%;background:#7B5A80;color:#fff;font:700 11px/26px var(--x-font-ui);text-align:center}
.m-system-flow-a__av--b{background:#4C687C}
.m-system-flow-a__zl{flex:none;width:16px;height:16px;border-radius:5px;background:var(--x-zalo);color:#fff;font:700 11px/16px var(--x-font-ui);text-align:center}
.m-system-flow-a__zl--b{background:#4C687C}
.m-system-flow-a__cap{color:var(--x-muted);text-align:center}
.m-system-flow-a__mock small{font-size:11px;color:var(--x-muted)}
/* 1 · ads */
.m-system-flow-a__ad{--sf-c:#B86E12;display:flex;flex-direction:column;gap:1px;padding:6px 8px;border:1px solid var(--x-line);border-radius:8px}
.m-system-flow-a__ad--f{--sf-c:#4C687C}
.m-system-flow-a__ad--z{--sf-c:var(--x-zalo)}
.m-system-flow-a__ad--on{border-color:var(--x-cobalt);background:var(--x-cobalt-soft)}
.m-system-flow-a__src{display:flex;flex-wrap:wrap;align-items:center;gap:3px 6px;color:var(--x-muted);font-weight:700}
.m-system-flow-a__src em::before{content:"";display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:var(--sf-c)}
.m-system-flow-a__click{display:inline-flex;align-items:center;gap:3px;margin-left:auto;padding:1px 6px;border-radius:999px;background:var(--x-cobalt);color:#fff}
/* 2 · landing form */
.m-system-flow-a__win{display:flex;align-items:center;gap:4px;margin:-9px -9px 2px;padding:6px 8px;border-bottom:1px solid var(--x-line);border-radius:11px 11px 0 0;background:var(--x-paper)}
.m-system-flow-a__win i{flex:none;width:7px;height:7px;border-radius:50%;background:#D8D0C6}
.m-system-flow-a__win span{flex:1;min-width:0;margin-left:2px;padding:1px 5px;border:1px solid var(--x-line);border-radius:5px;background:#fff;color:var(--x-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-system-flow-a__ft{font-size:12px}
.m-system-flow-a__fl{margin:2px 0 -4px;color:var(--x-muted)}
.m-system-flow-a__in{padding:4px 8px;border:1px solid var(--x-line);border-radius:7px;color:var(--x-ink)}
.m-system-flow-a__btn{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:3px;padding:6px;border-radius:8px;background:var(--sf-mint);color:#fff;font-weight:700}
/* 3 · CRM card */
.m-system-flow-a__who{display:flex;align-items:center;gap:7px;min-width:0}
.m-system-flow-a__who>span{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.m-system-flow-a__kv{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 8px;padding-top:5px;border-top:1px solid var(--x-paper-deep)}
.m-system-flow-a__kv span{color:var(--x-muted)}
.m-system-flow-a__kv b{margin-left:auto;text-align:right}
.m-system-flow-a .m-system-flow-a__amt{color:var(--x-primary)}
.m-system-flow-a__as{padding:5px 7px;border:1px solid var(--x-line);border-radius:8px;background:var(--x-paper)}
.m-system-flow-a__as small::before{content:"";display:inline-block;width:6px;height:6px;margin-right:4px;border-radius:50%;background:var(--x-mint)}
/* 4 · n8n */
.m-system-flow-a__tog{position:relative;width:24px;height:14px;border-radius:7px;background:var(--x-mint)}
.m-system-flow-a__tog::after{content:"";position:absolute;top:2px;right:2px;width:10px;height:10px;border-radius:50%;background:#fff}
.m-system-flow-a__nb{display:flex;flex-direction:column;gap:6px;padding-left:18px}
.m-system-flow-a__nn{position:relative;display:flex;align-items:center;gap:7px;padding:4px 8px;border:1px solid var(--x-line);border-radius:8px;background:#fff}
.m-system-flow-a__nn>span{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.m-system-flow-a__nd{flex:none;width:8px;height:8px;border-radius:50%;background:var(--x-mint);box-shadow:0 0 0 2px #CFEDE4}
.m-system-flow-a__nb .m-system-flow-a__nn::before,.m-system-flow-a__nb .m-system-flow-a__nn::after{content:"";position:absolute;left:-12px;background:var(--x-cobalt)}
.m-system-flow-a__nb .m-system-flow-a__nn::before{top:-8px;bottom:-1px;width:2px}
.m-system-flow-a__nb .m-system-flow-a__nn:last-child::before{bottom:50%}
.m-system-flow-a__nb .m-system-flow-a__nn::after{top:50%;width:12px;height:2px;margin-top:-1px}
/* 5 · sales rep's phone + AI chat */
.m-system-flow-a__duo{flex-direction:row;align-items:flex-start;gap:10px}
.m-system-flow-a__ph{flex:none;display:flex;flex-direction:column;gap:6px;width:116px}
.m-system-flow-a__phone{position:relative;aspect-ratio:9/19.5;padding:4px;border-radius:19px;background:#1C1A21}
.m-system-flow-a__island{position:absolute;top:8px;left:50%;width:28px;height:7px;margin-left:-14px;border-radius:4px;background:#1C1A21}
.m-system-flow-a__scr{display:flex;flex-direction:column;gap:5px;height:100%;padding:20px 5px 0;border-radius:15px;background:#EEE7DD;overflow:hidden}
.m-system-flow-a__lock{margin:2px 0 4px;font-size:22px;font-weight:700;line-height:1;text-align:center;color:var(--x-ink)}
.m-system-flow-a__notif{display:flex;flex-direction:column;padding:5px 6px;border-radius:9px;background:#fff;line-height:1.25}
.m-system-flow-a__nh{display:flex;align-items:center;gap:4px;margin-bottom:2px;color:var(--x-muted)}
.m-system-flow-a__nh b{flex:1}
.m-system-flow-a__nh .m-system-flow-a__zl{width:14px;height:14px;border-radius:4px;line-height:14px}
.m-system-flow-a__chat{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.m-system-flow-a__bub{align-self:flex-start;max-width:94%;padding:6px 9px;border-radius:4px 11px 11px;background:var(--x-paper-deep);color:var(--x-ink)}
.m-system-flow-a__bub time{display:block;margin-top:2px;color:var(--x-muted);text-align:right}
.m-system-flow-a__bub--ai{align-self:flex-end;border-radius:11px 4px 11px 11px;background:var(--x-zalo);color:#fff}
.m-system-flow-a .m-system-flow-a__bub--ai time{color:#fff}
.m-system-flow-a__ai{display:block;width:fit-content;margin-bottom:3px;padding:0 6px;border:1px solid #fff;border-radius:999px;font-weight:700}
/* 6 · morning report */
.m-system-flow-a__rp{display:flex;flex-direction:column;gap:4px;padding:8px 9px;border-radius:4px 11px 11px;background:var(--x-paper-deep)}
.m-system-flow-a__rt{font-size:12px}
.m-system-flow-a__rp .m-system-flow-a__kv{padding-top:0;border:0}
.m-system-flow-a__next{display:flex;align-items:center;gap:5px;margin-top:2px;padding:5px 7px;border-radius:7px;background:#fff;color:var(--x-primary);font-weight:700}
.m-system-flow-a__next svg{flex:none}
/* live states (script.js). Stations get is-todo / is-active / is-done; nothing is ever hidden. */
.m-system-flow-a.is-live .m-system-flow-a__st:not(.is-done)::after{transform:scale(1,0)}
.m-system-flow-a.is-reset .m-system-flow-a__st::after{transition:none}
.m-system-flow-a .is-todo .m-system-flow-a__dot{background:#fff;color:var(--x-primary);box-shadow:inset 0 0 0 2px var(--x-primary),0 0 0 3px var(--x-paper)}
.m-system-flow-a .is-active .m-system-flow-a__dot{background:var(--x-cobalt)}
.m-system-flow-a .is-active .m-system-flow-a__dot::after{animation:m-system-flow-a-pulse 1.4s ease-out infinite}
.m-system-flow-a .is-active .m-system-flow-a__time{border-color:var(--x-cobalt);color:var(--x-cobalt)}
.m-system-flow-a .is-active .m-system-flow-a__mock{transform:translateY(-3px)}
.m-system-flow-a .is-active .m-system-flow-a__mock::after{opacity:1}
.m-system-flow-a__hl{position:relative}
.m-system-flow-a__hl::after{content:"";position:absolute;inset:-3px;border:2px solid var(--x-cobalt);border-radius:inherit;opacity:0;pointer-events:none}
.m-system-flow-a .is-active .m-system-flow-a__hl{animation:m-system-flow-a-pop .5s var(--x-ease) .35s}
.m-system-flow-a .is-active .m-system-flow-a__hl::after{animation:m-system-flow-a-ring 1.1s ease-out .35s 2}
.m-system-flow-a .is-active .m-system-flow-a__nd{animation:m-system-flow-a-blip .6s ease-out .2s}
.m-system-flow-a .is-active .m-system-flow-a__nb .m-system-flow-a__nn:nth-child(1) .m-system-flow-a__nd{animation-delay:.5s}
.m-system-flow-a .is-active .m-system-flow-a__nb .m-system-flow-a__nn:nth-child(2) .m-system-flow-a__nd{animation-delay:.65s}
.m-system-flow-a .is-active .m-system-flow-a__nb .m-system-flow-a__nn:nth-child(3) .m-system-flow-a__nd{animation-delay:.8s}
.m-system-flow-a__clock .is-tick{animation:m-system-flow-a-tick .45s var(--x-ease)}
@keyframes m-system-flow-a-pulse{0%{opacity:.9;transform:scale(.75)}100%{opacity:0;transform:scale(1.4)}}
@keyframes m-system-flow-a-ring{0%{opacity:0;transform:scale(.97)}30%{opacity:1}100%{opacity:0;transform:scale(1.04)}}
@keyframes m-system-flow-a-pop{40%{transform:scale(1.04)}}
@keyframes m-system-flow-a-blip{40%{transform:scale(1.9)}}
@keyframes m-system-flow-a-tick{from{opacity:.2;transform:translateY(5px)}}
@container (max-width:319.9px){
.m-system-flow-a__st{padding-left:36px}
.m-system-flow-a__duo{flex-direction:column;align-items:center}
.m-system-flow-a__chat{align-self:stretch}
}
/* 620+: stations in a grid. Subgrid lines up time / name / text / mockup across each row; the rail runs along the
row of dots and stops at the end of each row. */
@container (min-width:620px){
.m-system-flow-a__line{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--sf-cg)}
.m-system-flow-a__st{display:grid;grid-row:span 4;grid-template-rows:subgrid;align-content:start;margin-bottom:26px;padding:0}
.m-system-flow-a__st::before,.m-system-flow-a__st::after{left:28px;right:calc(0px - var(--sf-cg));top:12px;bottom:auto;width:auto;height:4px}
.m-system-flow-a.is-live .m-system-flow-a__st:not(.is-done)::after{transform:scale(0,1)}
.m-system-flow-a__node{justify-content:space-between}
.m-system-flow-a__dot{position:relative}
.m-system-flow-a__packet{padding-right:9px}
.m-system-flow-a__packet span{display:inline}
.m-system-flow-a__foot{margin-top:0}
.m-system-flow-a__top,.m-system-flow-a__line,.m-system-flow-a__foot{margin-inline:8px}
}
@container (min-width:620px) and (max-width:879.9px){
.m-system-flow-a__st:nth-child(2n)::before,.m-system-flow-a__st:nth-child(2n)::after{display:none}
}
@container (min-width:880px) and (max-width:1119.9px){
.m-system-flow-a__line{grid-template-columns:repeat(3,minmax(0,1fr))}
.m-system-flow-a__st:nth-child(3n)::before,.m-system-flow-a__st:nth-child(3n)::after{display:none}
}
@container (min-width:1120px){
.m-system-flow-a{--sf-cg:14px}
.m-system-flow-a__line{grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.75fr) minmax(0,1fr)}
.m-system-flow-a__st{margin-bottom:0}
.m-system-flow-a__opt,.m-system-flow-a__packet span{display:none}
.m-system-flow-a__packet{padding-right:0}
.m-system-flow-a__foot{margin-top:22px}
}
@media (prefers-reduced-motion:reduce){
.m-system-flow-a *,.m-system-flow-a ::before,.m-system-flow-a ::after{animation:none!important;transition:none!important}
}
/* ---------- compact variant .m-system-flow-strip (strip.html): pain line + 5 numbered steps on the same cobalt rail.
5 in a row ≥820px · 3 + 2 rows 480–819px · vertical list <480px. Static, no script. */
.m-system-flow-strip{box-sizing:border-box;width:100%;container-type:inline-size;padding:18px 20px 22px;border:1px solid var(--x-line);border-radius:var(--x-radius-sm);background:#fff;color:var(--x-text);font:15px/1.45 var(--x-font-body);text-align:left}
.m-system-flow-strip *,.m-system-flow-strip ::before,.m-system-flow-strip ::after{box-sizing:border-box}
.m-system-flow-strip__pain{display:flex;align-items:flex-start;gap:10px;margin:0 0 20px;padding:10px 14px;border-left:3px solid var(--x-coral);border-radius:0 10px 10px 0;background:#FFF1EE;color:var(--x-ink)}
.m-system-flow-strip__pain svg{flex:none;margin-top:3px;color:#A8321F}
.m-system-flow-strip__steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px 0;margin:0;padding:0;list-style:none}
.m-system-flow-strip__step{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;margin:0;padding:0 18px 0 0}
.m-system-flow-strip__step::before,.m-system-flow-strip__step::after{content:"";position:absolute;color:var(--x-cobalt)}
.m-system-flow-strip__step::before{left:34px;right:8px;top:13px;height:2px;background:currentColor}
.m-system-flow-strip__step::after{right:8px;top:10px;width:8px;height:8px;border:solid;border-width:2px 2px 0 0;transform:rotate(45deg)}
.m-system-flow-strip__step:last-child::before,.m-system-flow-strip__step:last-child::after{display:none}
.m-system-flow-strip__num{flex:none;width:28px;height:28px;border-radius:50%;background:var(--x-primary);color:#fff;font:700 13px/28px var(--x-font-ui);text-align:center}
.m-system-flow-strip__label{font-weight:600;line-height:1.35;color:var(--x-ink)}
@container (min-width:480px) and (max-width:819.9px){
.m-system-flow-strip__steps{grid-template-columns:repeat(3,minmax(0,1fr))}
.m-system-flow-strip__step:nth-child(3)::before,.m-system-flow-strip__step:nth-child(3)::after{display:none}
}
@container (max-width:479.9px){
.m-system-flow-strip__steps{grid-template-columns:minmax(0,1fr);gap:24px}
.m-system-flow-strip__step{flex-direction:row;gap:12px;padding:0}
.m-system-flow-strip__label{padding-top:3px}
.m-system-flow-strip__step::before{left:13px;right:auto;top:32px;bottom:-17px;width:2px;height:auto}
.m-system-flow-strip__step::after{left:10px;right:auto;top:auto;bottom:-16px;transform:rotate(135deg)}
}
/* ---- crm-board ---- */
/* crm-board — Bitrix24-style CRM kanban inside a browser-window frame.
Uses tokens from ../_tokens.css. Every selector starts with .m-crm-board. */
.m-crm-board {
--cb-gap: 10px;
--cb-card-h: 110px; /* fixed card height keeps the board stable while cards move */
--cb-peek: 30px; /* how much of a 4th card shows at the bottom of a column */
--cb-pad: 14px;
--cb-col-min: 204px; /* below this, the board clips columns like a scrolling kanban */
--cb-av1-bg: #EBD9C9; --cb-av1-fg: #7C4A24;
--cb-av2-bg: #D5E3DA; --cb-av2-fg: #2C5C46;
--cb-av3-bg: #DED8EC; --cb-av3-fg: #4B3F7A;
position: relative;
container-type: inline-size;
width: 100%;
box-sizing: border-box;
margin: 0;
font-family: var(--x-font-ui);
font-size: 12px;
line-height: 1.3;
color: var(--x-text);
text-align: left;
background: #fff;
border: 1px solid var(--x-line);
border-radius: 14px;
box-shadow: var(--x-shadow);
overflow: hidden;
-webkit-font-smoothing: antialiased;
}
.m-crm-board *,
.m-crm-board *::before,
.m-crm-board *::after { box-sizing: border-box; }
.m-crm-board svg { display: block; flex: 0 0 auto; }
/* ---------- browser chrome ---------- */
.m-crm-board__chrome {
display: flex; align-items: center; gap: 12px;
height: 38px; padding: 0 14px;
background: var(--x-paper-deep);
border-bottom: 1px solid var(--x-line);
}
.m-crm-board__chrome::after { content: ""; flex: 0 0 42px; }
.m-crm-board__dots { display: flex; gap: 6px; flex: 0 0 auto; }
.m-crm-board__dots i { width: 10px; height: 10px; border-radius: 50%; background: #DCD4CA; }
.m-crm-board__dots i:nth-child(1) { background: #E7A79C; }
.m-crm-board__dots i:nth-child(2) { background: #E9C98A; }
.m-crm-board__dots i:nth-child(3) { background: #A9D1B3; }
.m-crm-board__url {
display: flex; align-items: center; gap: 6px;
flex: 1 1 auto; min-width: 0; max-width: 460px; height: 24px;
margin: 0 auto; padding: 0 10px;
background: #fff; border: 1px solid var(--x-line); border-radius: 7px;
color: var(--x-muted); font-size: 11.5px;
}
.m-crm-board__url span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ---------- app header ---------- */
.m-crm-board__head {
display: flex; align-items: center; gap: 12px;
padding: 10px 16px;
border-bottom: 1px solid var(--x-line);
}
.m-crm-board__title-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
.m-crm-board__title {
font-size: 14px; font-weight: 600; color: var(--x-ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-crm-board__tag {
flex: 0 0 auto; padding: 2px 8px; border-radius: 999px;
background: var(--x-paper-deep); color: var(--x-muted);
font-size: 11px; white-space: nowrap;
}
.m-crm-board__total {
flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end;
line-height: 1.2; white-space: nowrap;
}
.m-crm-board__total-label { font-size: 11px; color: var(--x-muted); }
.m-crm-board__total-value {
display: inline-block; font-size: 13.5px; font-weight: 600; color: var(--x-ink);
transform-origin: right center; transition: scale 0.2s ease;
}
.m-crm-board__user {
flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--x-primary); color: #fff;
font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
}
/* ---------- toolbar ---------- */
.m-crm-board__bar {
display: flex; align-items: center; gap: 10px;
height: 46px; padding: 0 16px;
border-bottom: 1px solid var(--x-line);
}
.m-crm-board__tabs { display: flex; align-self: stretch; gap: 2px; flex: 0 0 auto; }
.m-crm-board__tab {
position: relative; display: flex; align-items: center;
padding: 0 10px; font-size: 12px; color: var(--x-muted); white-space: nowrap;
}
.m-crm-board__tab.is-active { color: var(--x-ink); font-weight: 600; }
.m-crm-board__tab.is-active::after {
content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px;
height: 2px; border-radius: 2px; background: var(--x-primary);
}
.m-crm-board__search {
flex: 1 1 140px; min-width: 0; max-width: 320px; height: 30px;
display: flex; align-items: center; gap: 6px; padding: 0 10px;
border: 1px solid var(--x-line); border-radius: 8px;
color: var(--x-muted); font-size: 12px;
}
.m-crm-board__search span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-crm-board__btn {
flex: 0 0 auto; margin-left: auto; height: 30px;
display: flex; align-items: center; gap: 5px; padding: 0 12px 0 10px;
background: var(--x-primary); color: #fff; border-radius: 8px;
font-size: 12px; font-weight: 600; white-space: nowrap;
}
/* ---------- board ---------- */
.m-crm-board__board {
position: relative; display: flex; gap: var(--cb-gap);
padding: var(--cb-pad); overflow: hidden;
background: var(--x-paper);
}
.m-crm-board__col {
--cb-accent: #8A8495;
flex: 0 0 auto;
width: max(var(--cb-col-min), calc((100% - 3 * var(--cb-gap)) / 4));
padding: 8px; border-radius: 10px;
background: var(--x-paper-deep);
}
.m-crm-board__col[data-stage="talk"] { --cb-accent: var(--x-coral); }
.m-crm-board__col[data-stage="quote"] { --cb-accent: var(--x-primary); }
.m-crm-board__col[data-stage="won"] { --cb-accent: var(--x-mint); }
.m-crm-board__colhead {
display: grid; grid-template-columns: 1fr auto auto; column-gap: 6px; align-items: center;
grid-template-areas: "bar bar bar" "name count add" "sum sum sum";
padding: 2px 4px 8px;
}
.m-crm-board__colhead::before {
content: ""; grid-area: bar; height: 3px; margin-bottom: 8px;
border-radius: 2px; background: var(--cb-accent);
}
.m-crm-board__colname {
grid-area: name; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--x-ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-crm-board__count {
grid-area: count; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
background: #fff; border: 1px solid var(--x-line);
font-size: 11px; font-weight: 600; color: var(--x-text);
transition: scale 0.2s ease;
}
.m-crm-board__count.is-pop,
.m-crm-board__total-value.is-pop { scale: 1.18; }
.m-crm-board__coladd {
grid-area: add; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
color: var(--x-muted);
}
.m-crm-board__colsum {
grid-area: sum; margin-top: 3px; font-size: 11px; color: var(--x-muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-crm-board__cards {
display: flex; flex-direction: column; gap: var(--cb-gap);
height: calc(3 * var(--cb-card-h) + 3 * var(--cb-gap) + var(--cb-peek));
overflow: hidden;
}
/* ---------- card ---------- */
.m-crm-board__card {
position: relative; z-index: 0; flex: 0 0 auto;
height: var(--cb-card-h); padding: 10px 12px;
display: flex; flex-direction: column;
background: #fff; border: 1px solid var(--x-line); border-radius: 8px;
box-shadow: var(--x-shadow-sm); overflow: hidden;
transition: translate 0.5s var(--x-ease), opacity 0.4s ease;
}
.m-crm-board__card.is-enter { translate: 0 -14px; opacity: 0; }
.m-crm-board__card.is-ghosted { visibility: hidden; }
.m-crm-board__card.is-new::after {
content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
background: rgba(128, 0, 0, 0.07);
box-shadow: inset 0 0 0 1.5px rgba(128, 0, 0, 0.4);
animation: m-crm-board-glow 2.6s var(--x-ease) forwards;
}
@keyframes m-crm-board-glow { 0%, 55% { opacity: 1; } 100% { opacity: 0; } }
.m-crm-board__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.m-crm-board__foot { margin-top: auto; }
.m-crm-board__name {
flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; color: var(--x-ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-crm-board__co {
margin-top: 1px; font-size: 11.5px; color: var(--x-muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-crm-board__amt { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--x-ink); white-space: nowrap; }
.m-crm-board__chip {
flex: 0 0 auto; padding: 4px 7px; border-radius: 999px; line-height: 1;
background: var(--x-paper-deep); color: var(--x-text);
font-size: 11px; white-space: nowrap;
}
.m-crm-board__chip--zalo { background: #E6F0FF; color: var(--x-zalo); }
.m-crm-board__age {
min-width: 0; font-size: 11px; color: var(--x-muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-crm-board__av {
flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
background: var(--cb-av1-bg); color: var(--cb-av1-fg);
}
.m-crm-board__av--2 { background: var(--cb-av2-bg); color: var(--cb-av2-fg); }
.m-crm-board__av--3 { background: var(--cb-av3-bg); color: var(--cb-av3-fg); }
/* ---------- moving ghost (script.js) ---------- */
.m-crm-board__ghost {
position: absolute; z-index: 10; margin: 0; pointer-events: none; overflow: visible;
transition: translate 0.75s var(--x-ease), scale 0.25s ease, rotate 0.25s ease;
}
.m-crm-board__ghost::before {
content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
box-shadow: var(--x-shadow-lift); opacity: 0; transition: opacity 0.25s ease;
}
.m-crm-board__ghost.is-lift { scale: 1.04; rotate: -1.5deg; }
.m-crm-board__ghost.is-lift::before { opacity: 1; }
.m-crm-board__pool { display: none !important; }
/* ---------- responsive (container queries on the root) ---------- */
@container (max-width: 560px) {
.m-crm-board__search, .m-crm-board__tag { display: none; }
}
@container (max-width: 480px) {
.m-crm-board { --cb-pad: 10px; }
.m-crm-board__chrome { padding: 0 12px; }
.m-crm-board__head, .m-crm-board__bar { padding-left: 12px; padding-right: 12px; }
.m-crm-board__tab { padding: 0 8px; }
.m-crm-board__tab.is-active::after { left: 8px; right: 8px; }
}
@container (max-width: 352px) {
.m-crm-board__btn { padding: 0 9px; }
.m-crm-board__btn span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.m-crm-board__card, .m-crm-board__ghost, .m-crm-board__count, .m-crm-board__total-value { transition: none; }
.m-crm-board__card.is-new::after { animation: none; opacity: 0; }
}
/* ---- automation-canvas ---- */
/* automation-canvas — n8n-style workflow canvas mockup. All selectors start with .m-automation-canvas
Horizontal scene = 1280 × 300 scene units (positions below). script.js scales it to fit, or switches the
root to .is-vertical (vertical chain, positions set inline) when the fit would make text smaller than 10 px. */
.m-automation-canvas {
--ac-wire: #CBC4BA;
--ac-port: #B6AEA4;
--ac-sticky: #FFF6D2;
--ac-sticky-line: #EBDA92;
--ac-sep: #CFC8BF;
position: relative;
container-type: inline-size;
width: 100%;
min-width: 0;
box-sizing: border-box;
font-family: var(--x-font-ui);
font-size: 13px;
line-height: 1.3;
color: var(--x-text);
background: var(--x-paper);
border: 1px solid var(--x-line);
border-radius: var(--x-radius-sm);
box-shadow: var(--x-shadow);
overflow: hidden;
-webkit-font-smoothing: antialiased;
}
.m-automation-canvas *,
.m-automation-canvas *::before,
.m-automation-canvas *::after { box-sizing: border-box; }
.m-automation-canvas svg { display: block; flex: none; }
/* ---------- toolbar ---------- */
.m-automation-canvas__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
height: 46px;
padding: 0 12px 0 8px;
background: #fff;
border-bottom: 1px solid var(--x-line);
}
.m-automation-canvas__bar-left {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
flex: 1 1 auto;
}
.m-automation-canvas__back {
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
color: var(--x-muted);
flex: none;
}
.m-automation-canvas__crumb { color: var(--x-muted); flex: none; white-space: nowrap; }
.m-automation-canvas__crumb::after { content: "/"; margin-left: 7px; color: var(--ac-sep); }
.m-automation-canvas__title {
font-weight: 600;
color: var(--x-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.m-automation-canvas__bar-right { display: flex; align-items: center; gap: 10px; flex: none; }
.m-automation-canvas__tabs {
display: inline-flex;
padding: 2px;
background: var(--x-paper-deep);
border-radius: 8px;
}
.m-automation-canvas__tab {
padding: 4px 10px;
border-radius: 6px;
font-size: 12px;
line-height: 16px;
color: var(--x-muted);
white-space: nowrap;
}
.m-automation-canvas__tab.is-active {
background: #fff;
color: var(--x-ink);
font-weight: 600;
box-shadow: var(--x-shadow-sm);
}
.m-automation-canvas__switch { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--x-text); white-space: nowrap; }
.m-automation-canvas__switch-track { position: relative; width: 30px; height: 18px; border-radius: 999px; background: var(--x-mint); flex: none; }
.m-automation-canvas__switch-knob {
position: absolute;
top: 2px;
left: 14px;
width: 14px;
height: 14px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 2px rgba(21, 18, 27, 0.25);
}
.m-automation-canvas__btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 11px 6px 9px;
border-radius: 8px;
background: var(--x-primary);
color: #fff;
font-size: 12px;
line-height: 16px;
font-weight: 600;
white-space: nowrap;
}
/* ---------- viewport / scene ---------- */
.m-automation-canvas__viewport {
position: relative;
width: 100%;
height: var(--ach, 348px);
overflow: hidden;
background: var(--x-paper);
}
.m-automation-canvas__scene {
position: absolute;
left: 0;
top: 0;
width: 1280px;
height: 300px;
transform-origin: 0 0;
will-change: transform;
}
.m-automation-canvas__wires {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
/* wires */
.m-automation-canvas__wire-base { fill: none; stroke: var(--ac-wire); stroke-width: 2; stroke-linecap: round; }
.m-automation-canvas__wire-hot {
fill: none;
stroke: var(--x-cobalt);
stroke-width: 2.5;
stroke-linecap: round;
opacity: 0;
transition: opacity 0.22s var(--x-ease);
}
.m-automation-canvas__wire-arrow { fill: var(--ac-wire); }
.m-automation-canvas__wire.is-hot .m-automation-canvas__wire-hot { opacity: 1; }
.m-automation-canvas__wire.is-hot .m-automation-canvas__wire-arrow { fill: var(--x-cobalt); }
/* packet */
.m-automation-canvas__packet { opacity: 0; transition: opacity 0.15s linear; }
.m-automation-canvas__packet.is-on { opacity: 1; }
.m-automation-canvas__packet-ring { fill: #fff; stroke: var(--x-cobalt); stroke-width: 2; }
.m-automation-canvas__packet-dot { fill: var(--x-cobalt); }
/* ---------- nodes (scene text ≥ 12 px so a fit zoom of 0.834 still renders ≥ 10 px) ---------- */
.m-automation-canvas__node {
position: absolute;
width: 272px;
height: 84px;
padding: 10px 10px 0;
background: #fff;
border: 1px solid var(--x-line);
border-radius: 10px;
box-shadow: var(--x-shadow-sm);
}
.m-automation-canvas__node::after {
content: "";
position: absolute;
inset: -4px;
border: 2px solid var(--x-cobalt);
border-radius: 13px;
opacity: 0;
transition: opacity 0.2s var(--x-ease);
pointer-events: none;
}
.m-automation-canvas__node.is-running::after { opacity: 1; }
/* 4 columns × 2 rows: trigger → IF → CRM → Zalo; Sheets fans out from CRM, the "no" branch drops to row 2 */
.m-automation-canvas__node[data-node="1"] { left: 24px; top: 40px; }
.m-automation-canvas__node[data-node="2"] { left: 344px; top: 40px; }
.m-automation-canvas__node[data-node="3"] { left: 664px; top: 40px; }
.m-automation-canvas__node[data-node="4"] { left: 984px; top: 40px; }
.m-automation-canvas__node[data-node="5"] { left: 984px; top: 188px; }
.m-automation-canvas__node[data-node="6"] { left: 664px; top: 188px; }
.m-automation-canvas__head { display: flex; align-items: flex-start; gap: 8px; }
.m-automation-canvas__icon {
flex: none;
width: 26px;
height: 26px;
margin-top: 4px;
border-radius: 7px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--x-paper-deep);
color: var(--x-muted);
}
.m-automation-canvas__node--trigger .m-automation-canvas__icon { background: var(--x-cobalt-soft); color: var(--x-cobalt); }
.m-automation-canvas__node--if .m-automation-canvas__icon { background: #FFEBE6; color: #E0553F; }
.m-automation-canvas__node--crm .m-automation-canvas__icon { background: #F6E6E6; color: var(--x-primary); }
.m-automation-canvas__node--zalo .m-automation-canvas__icon { background: #E6F0FF; color: var(--x-zalo); }
.m-automation-canvas__node--sheet .m-automation-canvas__icon { background: #E2F4EC; color: var(--x-mint); }
.m-automation-canvas__text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.m-automation-canvas__name {
font-size: 14px;
line-height: 18px;
font-weight: 600;
color: var(--x-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.m-automation-canvas__sub {
font-size: 12px;
line-height: 16px;
color: var(--x-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.m-automation-canvas__state {
position: absolute;
top: -8px;
right: -8px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 2px var(--x-paper);
opacity: 0;
transition: opacity 0.2s var(--x-ease);
z-index: 1;
}
.m-automation-canvas__node.is-running .m-automation-canvas__state,
.m-automation-canvas__node.is-done .m-automation-canvas__state { opacity: 1; }
.m-automation-canvas__spin {
position: absolute;
inset: 1px;
border-radius: 50%;
border: 2px solid var(--x-cobalt-soft);
border-top-color: var(--x-cobalt);
opacity: 0;
}
.m-automation-canvas__node.is-running .m-automation-canvas__spin {
opacity: 1;
animation: m-automation-canvas-spin 0.8s linear infinite;
}
@keyframes m-automation-canvas-spin { to { transform: rotate(360deg); } }
.m-automation-canvas__check {
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--x-mint);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: scale(0.5);
transition: opacity 0.2s var(--x-ease), transform 0.28s var(--x-ease);
}
.m-automation-canvas__node.is-done .m-automation-canvas__check { opacity: 1; transform: scale(1); }
.m-automation-canvas__foot {
margin-top: 7px;
padding-top: 6px;
border-top: 1px solid var(--x-paper-deep);
font-size: 12px;
line-height: 16px;
color: var(--x-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-variant-numeric: tabular-nums;
}
.m-automation-canvas__count { font-weight: 600; color: var(--x-text); }
.m-automation-canvas__last::before { content: " · "; }
/* ports + branch labels */
.m-automation-canvas__port {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
border: 1.5px solid var(--ac-port);
}
.m-automation-canvas__port--in { left: -6px; top: calc(50% - 5px); }
.m-automation-canvas__port--out { right: -6px; top: calc(50% - 5px); }
.m-automation-canvas__port--yes { right: -6px; top: calc(50% - 18px); }
.m-automation-canvas__port--no { right: -6px; top: calc(50% + 8px); }
/* on the canvas Sheets fans out from node 3, so node 4's output is only used by the vertical chain */
.m-automation-canvas:not(.is-vertical) [data-node="4"] .m-automation-canvas__port--out { display: none; }
.m-automation-canvas__node.is-running .m-automation-canvas__port,
.m-automation-canvas__node.is-done .m-automation-canvas__port { background: var(--x-cobalt); border-color: var(--x-cobalt); }
.m-automation-canvas__plabel {
position: absolute;
padding: 0 4px;
border-radius: 4px;
background: var(--x-paper);
font-size: 12px;
line-height: 15px;
color: var(--x-muted);
white-space: nowrap;
transform: translateX(-50%);
}
.m-automation-canvas__plabel--yes { left: calc(100% + 20px); top: 9px; }
.m-automation-canvas__plabel--no { left: calc(100% + 24px); top: 115px; }
.m-automation-canvas__node.is-yes .m-automation-canvas__plabel--yes,
.m-automation-canvas__node.is-no .m-automation-canvas__plabel--no { color: var(--x-cobalt); font-weight: 600; }
/* sticky note */
.m-automation-canvas__note {
position: absolute;
left: 344px;
top: 188px;
width: 240px;
padding: 8px 12px 10px;
background: var(--ac-sticky);
border: 1px solid var(--ac-sticky-line);
border-radius: 8px;
font-size: 12.5px;
line-height: 1.45;
color: var(--x-text);
}
.m-automation-canvas__note-title { display: block; font-size: 12px; font-weight: 600; color: var(--x-ink); margin-bottom: 2px; }
.m-automation-canvas__note-body { display: block; }
/* lead chip that follows the packet (vertical chain: parked above the first node) */
.m-automation-canvas__lead {
position: absolute;
left: 0;
top: 0;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px 3px 3px;
background: #fff;
border: 1px solid var(--x-line);
border-radius: 999px;
font-size: 12px;
line-height: 18px;
font-weight: 500;
color: var(--x-ink);
white-space: nowrap;
box-shadow: var(--x-shadow-sm);
opacity: 0;
transform: translate(160px, 32px) translate(-50%, -100%);
transition: opacity 0.2s var(--x-ease);
pointer-events: none;
will-change: transform;
}
.m-automation-canvas__lead.is-on { opacity: 1; }
.m-automation-canvas__avatar {
width: 20px;
height: 20px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
color: #fff;
background: #4F7F8C;
flex: none;
}
.m-automation-canvas__lead--b .m-automation-canvas__avatar { background: #7D8A4A; }
/* ---------- vertical chain (narrow containers; node/note boxes are placed inline by script.js) ---------- */
.m-automation-canvas.is-vertical .m-automation-canvas__port--in { left: 18px; top: -6px; }
.m-automation-canvas.is-vertical .m-automation-canvas__port--out,
.m-automation-canvas.is-vertical .m-automation-canvas__port--yes { left: 18px; right: auto; top: auto; bottom: -6px; }
.m-automation-canvas.is-vertical .m-automation-canvas__port--no { left: 52px; right: auto; top: auto; bottom: -6px; }
.m-automation-canvas.is-vertical .m-automation-canvas__plabel { top: calc(100% + 9px); }
.m-automation-canvas.is-vertical .m-automation-canvas__plabel--yes { left: 40px; }
.m-automation-canvas.is-vertical .m-automation-canvas__plabel--no { left: 62px; transform: none; }
/* ---------- canvas chrome ---------- */
.m-automation-canvas__add {
position: absolute;
right: 10px;
top: 10px;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: #fff;
border: 1px solid var(--x-line);
box-shadow: var(--x-shadow-sm);
color: var(--x-ink);
}
.m-automation-canvas__zoom {
position: absolute;
left: 10px;
bottom: 10px;
display: inline-flex;
align-items: center;
gap: 2px;
padding: 2px;
background: #fff;
border: 1px solid var(--x-line);
border-radius: 8px;
box-shadow: var(--x-shadow-sm);
}
.m-automation-canvas__zbtn {
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
color: var(--x-muted);
}
.m-automation-canvas__zval {
min-width: 40px;
text-align: center;
font-size: 11px;
font-weight: 600;
color: var(--x-ink);
font-variant-numeric: tabular-nums;
}
.m-automation-canvas__zsep { width: 1px; height: 14px; margin: 0 2px; background: var(--x-line); }
.m-automation-canvas__saved {
position: absolute;
right: 12px;
bottom: 14px;
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
color: var(--x-muted);
white-space: nowrap;
}
.m-automation-canvas__saved svg { color: var(--x-mint); }
/* ---------- responsive chrome (the scene itself is fitted / re-laid out by script.js) ---------- */
@container (max-width: 700px) {
.m-automation-canvas__tabs,
.m-automation-canvas__crumb { display: none; }
}
@container (max-width: 440px) {
.m-automation-canvas__switch-label,
.m-automation-canvas__saved,
.m-automation-canvas__add,
.m-automation-canvas__zbtn,
.m-automation-canvas__zsep { display: none; }
.m-automation-canvas__bar { gap: 8px; }
.m-automation-canvas__zoom { padding: 3px 2px; }
.m-automation-canvas__zval { min-width: 36px; }
}
/* ---------- reduced motion: static final state ---------- */
@media (prefers-reduced-motion: reduce) {
.m-automation-canvas__node.is-running .m-automation-canvas__spin { animation: none; }
.m-automation-canvas__wire-hot,
.m-automation-canvas__packet,
.m-automation-canvas__node::after,
.m-automation-canvas__check,
.m-automation-canvas__lead { transition: none; }
}
/* ---- ai-chat ---- */
/* ai-chat — Zalo OA conversation with the CROSS AI assistant, inside a CSS phone frame.
Every selector starts with .m-ai-chat. Tokens come from ../_tokens.css (theme base.css). */
.m-ai-chat {
--m-ai-chat-w: 350px; /* phone width; override on the root to resize */
--m-ai-chat-bezel: #1c1a20;
--m-ai-chat-canvas: #edf0f4; /* Zalo chat canvas */
--m-ai-chat-me: color-mix(in srgb, var(--x-zalo) 13%, #fff);
--m-ai-chat-me-line: color-mix(in srgb, var(--x-zalo) 22%, #fff);
container-type: inline-size;
container-name: m-ai-chat;
display: grid;
grid-template-columns: minmax(0, var(--m-ai-chat-w)); /* phone track: up to --m-ai-chat-w, shrinks with the container */
justify-content: center;
width: 100%;
margin: 0;
padding: 0;
font-family: var(--x-font-ui);
font-size: 13px;
line-height: 1.35;
color: var(--x-ink);
-webkit-font-smoothing: antialiased;
}
.m-ai-chat *,
.m-ai-chat *::before,
.m-ai-chat *::after { box-sizing: border-box; }
.m-ai-chat svg { display: block; flex: none; }
/* ---------- Device frame ---------- */
.m-ai-chat__phone {
position: relative;
width: 100%;
aspect-ratio: 9 / 19.5;
padding: 10px;
border-radius: 44px;
background: var(--m-ai-chat-bezel);
box-shadow: var(--x-shadow-lift), inset 0 0 0 1.5px rgba(255, 255, 255, 0.09);
}
.m-ai-chat__screen {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
border-radius: 35px;
background: var(--m-ai-chat-canvas);
}
.m-ai-chat__island {
position: absolute;
top: 10px;
left: 50%;
z-index: 3;
width: 86px;
height: 25px;
margin-left: -43px;
border-radius: 13px;
background: var(--m-ai-chat-bezel);
}
/* ---------- Status bar + Zalo header ---------- */
.m-ai-chat__status {
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
height: 46px;
padding: 10px 24px 0 30px;
background: var(--x-zalo);
color: #fff;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.01em;
}
.m-ai-chat__status-icons { display: flex; align-items: center; gap: 5px; }
.m-ai-chat__header {
flex: none;
display: flex;
align-items: center;
gap: 6px;
padding: 3px 10px 9px 4px;
background: var(--x-zalo);
color: #fff;
}
.m-ai-chat__icon-btn {
flex: none;
display: grid;
place-items: center;
width: 26px;
height: 28px;
color: #fff;
}
.m-ai-chat__avatar {
flex: none;
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: #f3dee4;
color: #7a2e4a;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1;
}
.m-ai-chat__who {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
padding-left: 2px;
}
.m-ai-chat__name {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
font-size: 14px;
font-weight: 600;
line-height: 1.2;
}
.m-ai-chat__name-text {
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.m-ai-chat__badge {
flex: none;
padding: 3px 5px 2px;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 5px;
background: rgba(255, 255, 255, 0.18);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.06em;
line-height: 1;
}
.m-ai-chat__sub {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 11px;
line-height: 1.2;
opacity: 0.85;
}
.m-ai-chat__notice {
flex: none;
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px 6px 12px;
border-bottom: 1px solid var(--x-line);
background: #fff;
color: var(--x-muted);
font-size: 11px;
line-height: 1.2;
}
.m-ai-chat__notice > svg { color: var(--x-primary); }
.m-ai-chat__notice-text {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.m-ai-chat__handoff {
flex: none;
padding: 4px 9px;
border: 1px solid color-mix(in srgb, var(--x-zalo) 45%, #fff);
border-radius: 999px;
background: color-mix(in srgb, var(--x-zalo) 6%, #fff);
color: var(--x-zalo);
font-size: 11px;
font-weight: 600;
line-height: 1.1;
white-space: nowrap;
}
/* ---------- Thread ---------- */
.m-ai-chat__list {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
justify-content: flex-end; /* bottom-anchored like a real chat; older lines clip at the top */
overflow: hidden;
padding: 0 10px;
}
.m-ai-chat__thread {
flex: none;
display: flex;
flex-direction: column;
gap: 6px;
padding: 8px 0 6px;
transition: transform 0.45s var(--x-ease), opacity 0.35s ease;
will-change: transform;
}
.m-ai-chat__thread.is-fading { opacity: 0; }
.m-ai-chat__divider {
align-self: center;
padding: 3px 9px;
border-radius: 999px;
background: rgba(21, 18, 27, 0.07);
color: var(--x-muted);
font-size: 10.5px;
line-height: 1.2;
}
.m-ai-chat__msg {
display: flex;
align-items: flex-end;
gap: 6px;
max-width: 86%;
}
.m-ai-chat__msg--bot { max-width: 92%; }
.m-ai-chat__msg--me { align-self: flex-end; }
.m-ai-chat__msg--sys { align-self: center; max-width: 96%; }
.m-ai-chat__msg--bot .m-ai-chat__avatar {
width: 24px;
height: 24px;
font-size: 9px;
}
.m-ai-chat__bubble {
min-width: 0;
padding: 8px 10px 6px;
border: 1px solid var(--x-line);
border-radius: 12px;
background: #fff;
color: var(--x-ink);
font-size: 13px;
line-height: 1.42;
overflow-wrap: anywhere;
}
.m-ai-chat__msg--bot .m-ai-chat__bubble { border-bottom-left-radius: 4px; }
.m-ai-chat__msg--me .m-ai-chat__bubble {
border-color: var(--m-ai-chat-me-line);
border-bottom-right-radius: 4px;
background: var(--m-ai-chat-me);
}
.m-ai-chat__time {
display: block;
margin-top: 3px;
color: var(--x-muted);
font-size: 10px;
line-height: 1.2;
}
.m-ai-chat__source {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 6px;
padding: 3px 7px 3px 5px;
border-radius: 6px;
background: var(--x-paper-deep);
color: var(--x-muted);
font-size: 10.5px;
line-height: 1.2;
}
.m-ai-chat__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 7px;
}
.m-ai-chat__chip {
position: relative;
padding: 5px 14px;
border: 1px solid var(--x-zalo);
border-radius: 999px;
background: #fff;
color: var(--x-zalo);
font-size: 12.5px;
font-weight: 600;
line-height: 1.2;
transition: background 0.25s ease, color 0.25s ease, opacity 0.3s ease;
}
.m-ai-chat__chip::after {
content: "";
position: absolute;
inset: -5px;
border: 2px solid var(--x-zalo);
border-radius: 999px;
opacity: 0;
transform: scale(0.75);
pointer-events: none;
}
/* Final / static state: 20:30 was picked */
.m-ai-chat:not(.is-live) .m-ai-chat__chip--pick,
.m-ai-chat__chips.is-done .m-ai-chat__chip--pick {
background: var(--x-zalo);
color: #fff;
}
.m-ai-chat:not(.is-live) .m-ai-chat__chip:not(.m-ai-chat__chip--pick),
.m-ai-chat__chips.is-done .m-ai-chat__chip:not(.m-ai-chat__chip--pick) { opacity: 0.45; }
.m-ai-chat__chip.is-tap {
background: var(--x-zalo);
color: #fff;
animation: m-ai-chat-tap 0.5s var(--x-ease) both;
}
.m-ai-chat__chip.is-tap::after { animation: m-ai-chat-ring 0.6s ease-out both; }
.m-ai-chat__sys {
display: flex;
align-items: center;
gap: 5px;
padding: 4px 10px 4px 7px;
border: 1px solid color-mix(in srgb, var(--x-mint) 30%, #fff);
border-radius: 999px;
background: color-mix(in srgb, var(--x-mint) 10%, #fff);
color: color-mix(in srgb, var(--x-mint) 72%, var(--x-ink));
font-size: 10.5px;
line-height: 1.3;
}
.m-ai-chat__sys > svg { color: var(--x-mint); }
.m-ai-chat__sys > span { min-width: 0; text-wrap: balance; }
.m-ai-chat__typing {
display: flex;
align-items: center;
gap: 4px;
padding: 11px 12px;
border: 1px solid var(--x-line);
border-radius: 12px;
border-bottom-left-radius: 4px;
background: #fff;
}
.m-ai-chat__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--x-muted);
opacity: 0.5;
animation: m-ai-chat-dot 1.1s ease-in-out infinite;
}
.m-ai-chat__dot:nth-child(2) { animation-delay: 0.15s; }
.m-ai-chat__dot:nth-child(3) { animation-delay: 0.3s; }
/* ---------- Composer + home indicator ---------- */
.m-ai-chat__composer {
flex: none;
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px 6px;
border-top: 1px solid var(--x-line);
background: #fff;
color: var(--x-muted);
}
.m-ai-chat__input {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--x-muted);
font-size: 13px;
}
.m-ai-chat__home {
flex: none;
display: grid;
place-items: center;
height: 22px;
background: #fff;
}
.m-ai-chat__home::before {
content: "";
width: 110px;
height: 5px;
border-radius: 3px;
background: var(--x-ink);
opacity: 0.85;
}
/* ---------- Live (JS-driven) states. Without JS / under reduced motion the full conversation shows. ---------- */
.m-ai-chat__msg--typing { display: none; }
.m-ai-chat.is-live .m-ai-chat__divider:not(.is-in),
.m-ai-chat.is-live .m-ai-chat__msg:not(.is-in) { display: none; }
.m-ai-chat.is-live .m-ai-chat__msg--typing.is-in { display: flex; }
.m-ai-chat.is-live .m-ai-chat__divider.is-in,
.m-ai-chat.is-live .m-ai-chat__msg.is-in { animation: m-ai-chat-pop 0.4s var(--x-ease) both; }
@keyframes m-ai-chat-pop {
from { opacity: 0; transform: translateY(8px) scale(0.98); }
to { opacity: 1; transform: none; }
}
@keyframes m-ai-chat-dot {
0%, 60%, 100% { opacity: 0.45; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-4px); }
}
@keyframes m-ai-chat-tap {
0% { transform: scale(1); }
35% { transform: scale(0.9); }
100% { transform: scale(1); }
}
@keyframes m-ai-chat-ring {
0% { opacity: 0.7; transform: scale(0.75); }
100% { opacity: 0; transform: scale(1.25); }
}
/* ---------- Narrow containers (< 330px): the phone shrinks, so tighten the UI ---------- */
@container m-ai-chat (max-width: 329px) {
.m-ai-chat__phone { padding: 8px; border-radius: 38px; }
.m-ai-chat__screen { border-radius: 31px; }
.m-ai-chat__island { width: 76px; height: 22px; margin-left: -38px; top: 9px; }
.m-ai-chat__status { height: 42px; padding: 8px 20px 0 26px; font-size: 12px; }
.m-ai-chat__header { padding-bottom: 7px; }
.m-ai-chat__avatar { width: 30px; height: 30px; }
.m-ai-chat__name { font-size: 13px; }
.m-ai-chat__sub { font-size: 10.5px; }
.m-ai-chat__notice { padding: 5px 8px 5px 10px; }
.m-ai-chat__handoff { padding: 3px 7px; font-size: 10.5px; }
.m-ai-chat__list { padding: 0 8px; }
.m-ai-chat__thread { gap: 5px; padding: 6px 0 5px; }
.m-ai-chat__msg { max-width: 90%; }
.m-ai-chat__msg--bot { max-width: 95%; }
.m-ai-chat__msg--bot .m-ai-chat__avatar { width: 22px; height: 22px; }
.m-ai-chat__bubble { padding: 6px 8px 5px; font-size: 11.5px; line-height: 1.38; }
.m-ai-chat__time { font-size: 9.5px; margin-top: 2px; }
.m-ai-chat__source { font-size: 10px; margin-top: 5px; }
.m-ai-chat__chips { margin-top: 6px; }
.m-ai-chat__chip { padding: 4px 12px; font-size: 11.5px; }
.m-ai-chat__sys { font-size: 10px; }
.m-ai-chat__composer { gap: 10px; padding: 7px 12px 5px; }
.m-ai-chat__home { height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
.m-ai-chat__thread { transition: none; }
.m-ai-chat .m-ai-chat__dot,
.m-ai-chat .m-ai-chat__chip,
.m-ai-chat .m-ai-chat__chip::after,
.m-ai-chat .m-ai-chat__msg,
.m-ai-chat .m-ai-chat__divider { animation: none; transition: none; }
}
/* ---- ads-report ---- */
/* ads-report — Google Ads performance dashboard mockup (browser window + KPI tiles + two single-series charts).
All selectors start with .m-ads-report. Breakpoints are container queries on the root, so the
component adapts to the column it is placed in, not to the viewport. */
.m-ads-report {
container-type: inline-size;
width: 100%;
font-family: var(--x-font-ui);
font-size: 13px;
line-height: 1.3;
color: var(--x-text);
-webkit-font-smoothing: antialiased;
/* Component-scoped derived tones (hex fallback first, token-derived override second). */
--ar-surface: #ffffff;
--ar-good: #0A7356;
--ar-good: color-mix(in srgb, var(--x-mint) 72%, var(--x-ink));
--ar-good-bg: #E7F5F0;
--ar-good-bg: color-mix(in srgb, var(--x-mint) 12%, #ffffff);
--ar-dot: #D9D1C7;
--ar-dot: color-mix(in srgb, var(--x-line) 80%, var(--x-muted));
}
.m-ads-report *,
.m-ads-report *::before,
.m-ads-report *::after { box-sizing: border-box; }
/* ---------- browser window ---------- */
.m-ads-report__win {
background: var(--ar-surface);
border: 1px solid var(--x-line);
border-radius: 14px;
box-shadow: var(--x-shadow);
overflow: hidden;
}
.m-ads-report__bar {
display: flex;
align-items: center;
gap: 12px;
height: 38px;
padding: 0 14px;
background: var(--x-paper-deep);
border-bottom: 1px solid var(--x-line);
}
.m-ads-report__dots { display: flex; gap: 6px; flex: none; }
.m-ads-report__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ar-dot); }
.m-ads-report__url {
flex: 1 1 auto;
min-width: 0;
max-width: 420px;
display: flex;
align-items: center;
gap: 6px;
height: 24px;
padding: 0 10px;
background: var(--ar-surface);
border: 1px solid var(--x-line);
border-radius: 7px;
font-size: 12px;
color: var(--x-muted);
}
.m-ads-report__url-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* ---------- icons ---------- */
.m-ads-report__ico {
width: 14px;
height: 14px;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.m-ads-report__ico--chev { width: 12px; height: 12px; margin-left: 2px; }
.m-ads-report__arrow {
width: 10px;
height: 10px;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.m-ads-report__delta--down .m-ads-report__arrow { transform: rotate(180deg); }
/* ---------- body ---------- */
.m-ads-report__body {
display: flex;
flex-direction: column;
gap: 16px;
padding: 20px;
background: var(--x-paper);
}
/* header */
.m-ads-report__head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 12px 16px;
}
.m-ads-report__heading { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.m-ads-report__eyebrow { font-size: 12px; color: var(--x-muted); }
.m-ads-report__title {
font-size: 17px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--x-ink);
overflow-wrap: anywhere;
}
.m-ads-report__updated { font-size: 12px; color: var(--x-muted); }
.m-ads-report__controls { display: flex; flex-wrap: wrap; gap: 8px; }
.m-ads-report__range {
display: inline-flex;
align-items: center;
gap: 7px;
height: 34px;
padding: 0 11px 0 12px;
background: var(--ar-surface);
border: 1px solid var(--x-line);
border-radius: 9px;
font-size: 13px;
font-variant-numeric: tabular-nums;
color: var(--x-ink);
white-space: nowrap;
}
.m-ads-report__btn {
display: inline-flex;
align-items: center;
gap: 8px;
height: 34px;
padding: 0 14px;
background: var(--x-primary);
border-radius: 9px;
font-size: 13px;
font-weight: 600;
color: #ffffff;
white-space: nowrap;
box-shadow: var(--x-shadow-sm);
}
/* ---------- KPI tiles ---------- */
.m-ads-report__kpis {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.m-ads-report__kpi {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
padding: 14px 16px 13px;
background: var(--ar-surface);
border: 1px solid var(--x-line);
border-radius: 12px;
}
.m-ads-report__kpi-label { font-size: 12px; color: var(--x-muted); }
.m-ads-report__kpi-value {
font-size: clamp(20px, 2.3cqi, 26px);
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.015em;
font-variant-numeric: tabular-nums;
color: var(--x-ink);
white-space: nowrap;
}
.m-ads-report__kpi-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: 2px;
font-size: 12px;
}
.m-ads-report__delta {
display: inline-flex;
align-items: center;
gap: 3px;
height: 20px;
padding: 0 7px 0 6px;
border-radius: 6px;
background: var(--x-paper-deep);
font-size: 12px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--x-text);
}
.m-ads-report__delta--good { background: var(--ar-good-bg); color: var(--ar-good); }
.m-ads-report__vs { color: var(--x-muted); }
/* ---------- chart cards ---------- */
.m-ads-report__charts {
display: grid;
grid-template-columns: 5fr 6fr;
gap: 12px;
}
.m-ads-report__card {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
padding: 16px 18px 14px;
background: var(--ar-surface);
border: 1px solid var(--x-line);
border-radius: 12px;
}
.m-ads-report__card-head { display: flex; flex-direction: column; gap: 2px; }
.m-ads-report__card-title { font-size: 14px; font-weight: 600; color: var(--x-ink); }
.m-ads-report__card-sub { font-size: 12px; color: var(--x-muted); }
/* column chart: vertical geometry in px (fixed height), horizontal in % (fluid width) */
.m-ads-report__col { display: block; }
.m-ads-report__col-svg {
display: block;
width: 100%;
height: 158px;
overflow: visible;
font-family: inherit;
}
.m-ads-report__grid,
.m-ads-report__axis { stroke: var(--x-line); stroke-width: 1; }
.m-ads-report__tick {
font-size: 11px;
font-variant-numeric: tabular-nums;
fill: var(--x-muted);
}
.m-ads-report__col-bar { fill: var(--x-primary); }
.m-ads-report__band:hover .m-ads-report__col-bar { fill: var(--x-deep); }
.m-ads-report__val {
font-size: 12px;
font-weight: 600;
font-variant-numeric: tabular-nums;
fill: var(--x-ink);
paint-order: stroke;
stroke: var(--ar-surface);
stroke-width: 4px;
stroke-linejoin: round;
}
.m-ads-report__xlabels { display: flex; padding-left: 8%; margin-top: 6px; }
.m-ads-report__xlabels span {
flex: 1 1 0;
min-width: 0;
text-align: center;
font-size: 11px;
color: var(--x-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* horizontal bar list */
.m-ads-report__rows {
list-style: none;
margin: 0;
padding: 2px 0 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.m-ads-report__row {
display: grid;
grid-template-columns: minmax(84px, 112px) minmax(0, 1fr) 40px;
align-items: center;
gap: 12px;
font-size: 13px;
}
.m-ads-report__row-label {
color: var(--x-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.m-ads-report__hbar { display: block; width: 100%; height: 10px; overflow: hidden; }
.m-ads-report__hbar-fill { fill: var(--x-primary); }
.m-ads-report__row:hover .m-ads-report__hbar-fill { fill: var(--x-deep); }
.m-ads-report__row-value {
text-align: right;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--x-ink);
}
.m-ads-report__total {
display: flex;
justify-content: space-between;
gap: 12px;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--x-line);
font-size: 12px;
color: var(--x-muted);
}
.m-ads-report__total-value {
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--x-ink);
}
/* ---------- motion (script adds --armed before the element is visible, --in when it enters) ---------- */
.m-ads-report--armed .m-ads-report__col-bar {
transform: scaleY(0);
transform-box: fill-box;
transform-origin: center bottom;
transition: transform 0.75s var(--x-ease);
}
.m-ads-report--armed .m-ads-report__band:nth-of-type(2) .m-ads-report__col-bar { transition-delay: 0.07s; }
.m-ads-report--armed .m-ads-report__band:nth-of-type(3) .m-ads-report__col-bar { transition-delay: 0.14s; }
.m-ads-report--armed .m-ads-report__band:nth-of-type(4) .m-ads-report__col-bar { transition-delay: 0.21s; }
.m-ads-report--armed .m-ads-report__hbar-fill {
transform: scaleX(0);
transform-box: fill-box;
transform-origin: left center;
transition: transform 0.75s var(--x-ease);
}
.m-ads-report--armed .m-ads-report__row:nth-child(2) .m-ads-report__hbar-fill { transition-delay: 0.07s; }
.m-ads-report--armed .m-ads-report__row:nth-child(3) .m-ads-report__hbar-fill { transition-delay: 0.14s; }
.m-ads-report--armed .m-ads-report__row:nth-child(4) .m-ads-report__hbar-fill { transition-delay: 0.21s; }
.m-ads-report--armed .m-ads-report__val,
.m-ads-report--armed .m-ads-report__delta {
opacity: 0;
transition: opacity 0.3s ease 0.7s;
}
.m-ads-report--in .m-ads-report__col-bar { transform: scaleY(1); }
.m-ads-report--in .m-ads-report__hbar-fill { transform: scaleX(1); }
.m-ads-report--in .m-ads-report__val,
.m-ads-report--in .m-ads-report__delta { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.m-ads-report .m-ads-report__col-bar,
.m-ads-report .m-ads-report__hbar-fill,
.m-ads-report .m-ads-report__val,
.m-ads-report .m-ads-report__delta {
transition: none;
transform: none;
opacity: 1;
}
}
/* ---------- responsive (container queries on the root) ---------- */
@container (max-width: 899px) {
.m-ads-report__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.m-ads-report__kpi-value { font-size: clamp(18px, 5.2cqi, 26px); }
.m-ads-report__charts { grid-template-columns: 1fr 1fr; }
}
@container (max-width: 639px) {
.m-ads-report__charts { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 479px) {
.m-ads-report__bar { height: 34px; padding: 0 12px; }
.m-ads-report__body { gap: 12px; padding: 14px; }
.m-ads-report__kpis { gap: 10px; }
.m-ads-report__kpi { padding: 12px 13px 11px; }
.m-ads-report__card { padding: 14px 14px 12px; }
.m-ads-report__row { grid-template-columns: minmax(84px, 104px) minmax(0, 1fr) 36px; gap: 10px; }
}
@container (max-width: 359px) {
.m-ads-report__btn { padding: 0 12px; }
.m-ads-report__range { padding: 0 9px 0 10px; }
}
/* ---- web-preview ---- */
/* m-web-preview — browser + phone mock-up of a landing page, PageSpeed ring, animated quote form.
>= 560px container: browser fills the width, phone on its bottom-right corner, ring on its bottom-left.
Sizes are em of the stage; 1em = 1/55.6 of the width, capped at 15px (the mini page widens past ~834px).
< 560px: only the phone (max 320px) and the ring. Only transform/opacity are animated. */
.m-web-preview { --wp-score: 96; --wp-x1: 18%; --wp-y1: 34%; --wp-x2: 20%; --wp-y2: 52%; --wp-x3: 22%; --wp-y3: 70%; --wp-xb: 50%; --wp-yb: 86%; position: relative; width: 100%; container: wp / inline-size; font-family: var(--x-font-body); color: var(--x-text); line-height: 1.3; }
.m-web-preview *,
.m-web-preview *::before,
.m-web-preview *::after { box-sizing: border-box; }
.m-web-preview :where(p) { margin: 0; } /* low specificity: class margins win */
.m-web-preview svg { display: block; flex: none; }
/* ---- composition (wide) ---- */
.m-web-preview__stage {
--wp-ring: 6em;
position: relative;
font-size: clamp(8px, 1.1vw, 15px); /* fallback without container units */
font-size: min(1.798cqw, 15px); /* 55.6em = 3em ring overhang + 44em browser + 8.6em phone overhang */
padding-bottom: 4.8em;
}
.m-web-preview__desk { margin: 0 8.6em 0 3em; }
.m-web-preview__hand { position: absolute; right: 0; bottom: 0; z-index: 2; }
/* ---- browser window ---- */
.m-web-preview__browser { font-family: var(--x-font-ui); color: var(--x-ink); background: #fff; border: 1px solid var(--x-line); border-radius: 0.9em; box-shadow: var(--x-shadow); overflow: hidden; }
.m-web-preview__bar { display: flex; align-items: center; gap: 1em; height: 2.4em; padding: 0 1em; background: var(--x-paper-deep); border-bottom: 1px solid var(--x-line); }
.m-web-preview__dots { display: flex; gap: 0.45em; }
.m-web-preview__dots i { width: 0.7em; height: 0.7em; border-radius: 50%; background: #E9A59C; }
.m-web-preview__dots i:nth-child(2) { background: #EFCB8A; }
.m-web-preview__dots i:nth-child(3) { background: #A9D6A4; }
.m-web-preview__url {
flex: 0 1 26em;
display: flex;
align-items: center;
gap: 0.45em;
min-width: 0;
height: 1.65em;
margin: 0 auto;
padding: 0 0.8em;
border: 1px solid var(--x-line);
border-radius: 0.8em;
background: #fff;
font-size: 0.8em;
color: var(--x-muted);
white-space: nowrap;
overflow: hidden;
}
.m-web-preview__url svg { width: 0.95em; height: 0.95em; color: var(--x-mint); }
.m-web-preview__page { position: relative; overflow: hidden; }
.m-web-preview__nav { display: flex; align-items: center; gap: 1.6em; height: 3.2em; padding: 0 2.8em; border-bottom: 1px solid var(--x-paper-deep); }
.m-web-preview__brand { display: flex; align-items: center; gap: 0.5em; font-weight: 700; font-size: 0.95em; white-space: nowrap; }
.m-web-preview__mark { position: relative; width: 1.3em; height: 1.3em; border-radius: 0.35em; background: var(--x-primary); }
.m-web-preview__mark::after { content: ""; position: absolute; left: 30%; top: 30%; width: 40%; height: 40%; border-radius: 0.15em; background: #fff; }
/* links that do not fit wrap onto a hidden second line, so narrow pages just show fewer of them */
.m-web-preview__links { display: flex; flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; column-gap: 1.5em; min-width: 0; height: 1.3em; overflow: hidden; font-size: 0.82em; color: var(--x-text); white-space: nowrap; }
.m-web-preview__navcta { font-size: 0.78em; font-weight: 600; padding: 0.5em 1em; border: 1px solid var(--x-line); border-radius: 2em; white-space: nowrap; }
.m-web-preview__hero { display: flex; justify-content: space-between; gap: 2.2em; padding: 2.1em 2.8em 2em; background: var(--x-paper); }
.m-web-preview__copy { flex: 1 1 auto; min-width: 0; max-width: 32em; padding-top: 0.3em; }
.m-web-preview__pill { display: inline-block; font-size: 0.76em; padding: 0.3em 0.85em; border: 1px solid var(--x-line); border-radius: 2em; background: #fff; color: var(--x-muted); white-space: nowrap; }
.m-web-preview__h1 { margin: 0.6em 0 0.42em; font-size: 1.95em; line-height: 1.12; font-weight: 800; letter-spacing: -0.015em; color: var(--x-ink); }
.m-web-preview__sub { font-size: 0.9em; line-height: 1.45; color: var(--x-muted); max-width: 30em; }
.m-web-preview__ctas { display: flex; flex-wrap: wrap; gap: 0.6em; margin-top: 1.15em; }
.m-web-preview__btn { font-size: 0.84em; font-weight: 600; padding: 0.68em 1.2em; border-radius: 0.6em; white-space: nowrap; }
.m-web-preview__btn--primary { background: var(--x-primary); color: #fff; }
.m-web-preview__btn--ghost { background: #fff; color: var(--x-ink); border: 1px solid var(--x-line); }
.m-web-preview__trust { display: flex; align-items: center; gap: 0.45em; margin-top: 1.4em; font-size: 0.8em; color: var(--x-muted); }
.m-web-preview__trust svg { width: 1.1em; height: 1.1em; color: var(--x-mint); }
/* form card */
.m-web-preview__card { position: relative; flex: 0 0 18em; padding: 1.1em 1.2em 1.05em; background: #fff; border: 1px solid var(--x-line); border-radius: 0.85em; box-shadow: var(--x-shadow-sm); }
.m-web-preview__card-title { font-size: 1.1em; font-weight: 700; }
.m-web-preview__card-sub { margin: 0.15em 0 0.85em; font-size: 0.78em; color: var(--x-muted); }
.m-web-preview__field { margin-bottom: 0.6em; }
.m-web-preview__label { display: block; margin-bottom: 0.3em; font-size: 0.9em; font-weight: 500; color: var(--x-text); }
.m-web-preview__input { position: relative; display: flex; align-items: center; height: 2.35em; padding: 0 0.75em; border: 1px solid var(--x-line); border-radius: 0.5em; background: #fff; font-size: 0.88em; white-space: nowrap; overflow: hidden; }
.m-web-preview__input::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1.5px solid var(--x-primary); box-shadow: 0 0 0 3px rgba(128, 0, 0, 0.12); opacity: 0; pointer-events: none; }
.m-web-preview__ph { position: absolute; left: 0.75em; top: 50%; z-index: 2; transform: translateY(-50%); color: #A9A3B0; opacity: 0; }
.m-web-preview__type { position: relative; display: inline-block; }
.m-web-preview__val { color: var(--x-ink); }
.m-web-preview__mask { position: absolute; inset: -2px 0; background: #fff; opacity: 0; transform: translateX(100%); }
.m-web-preview__mask::before { content: ""; position: absolute; left: 0; top: 18%; width: 1.5px; height: 64%; background: var(--x-ink); opacity: 0; }
.m-web-preview__chev { width: 1.1em; height: 1.1em; margin-left: auto; color: var(--x-muted); }
.m-web-preview__val--pick { overflow: hidden; text-overflow: ellipsis; }
.m-web-preview__submit { position: relative; display: flex; align-items: center; justify-content: center; height: 2.45em; margin-top: 0.25em; border-radius: 0.55em; background: var(--x-primary); color: #fff; font-size: 0.9em; font-weight: 700; overflow: hidden; }
.m-web-preview__sent { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.45em; background: var(--x-mint); color: #fff; }
.m-web-preview__sent svg { width: 1.2em; height: 1.2em; }
.m-web-preview__note { display: flex; align-items: center; gap: 0.4em; margin-top: 0.7em; font-size: 0.72em; color: var(--x-muted); }
.m-web-preview__note svg { width: 1.1em; height: 1.1em; }
.m-web-preview__cursor { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; }
.m-web-preview__cursor svg { position: absolute; left: 0; top: 0; width: 1.35em; height: 1.62em; filter: drop-shadow(0 1px 2px rgba(21, 18, 27, 0.35)); }
/* benefit tiles: the browser window ends (the fold) just under their titles */
.m-web-preview__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; height: 6.75em; padding: 1.5em 2.8em 0; overflow: hidden; }
.m-web-preview__tile { display: flex; flex-direction: column; gap: 0.3em; padding: 1em 1.1em; border: 1px solid var(--x-line); border-radius: 0.8em; }
.m-web-preview__ico { display: grid; place-items: center; width: 2.1em; height: 2.1em; margin-bottom: 0.4em; border-radius: 0.6em; background: var(--x-paper-deep); color: var(--x-primary); }
.m-web-preview__ico svg { width: 1.2em; height: 1.2em; }
.m-web-preview__tile b { font-size: 0.9em; font-weight: 700; }
.m-web-preview__tile > span:last-child { font-size: 0.78em; line-height: 1.4; color: var(--x-muted); }
/* Zalo chat bubble (phone screen) */
.m-web-preview__zalo { position: absolute; right: 0.9em; bottom: 0.9em; display: grid; place-items: center; width: 3.1em; height: 3.1em; border-radius: 50%; background: var(--x-zalo); color: #fff; font-size: 0.72em; font-weight: 800; letter-spacing: -0.02em; box-shadow: 0 0.4em 1em rgba(0, 104, 255, 0.3); }
/* ---- score ring (the number is real text and never changes; only the arc is animated) ---- */
.m-web-preview__score { position: absolute; left: 0; bottom: 1.8em; z-index: 3; width: var(--wp-ring); height: var(--wp-ring); }
.m-web-preview__score > svg { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; background: #fff; box-shadow: var(--x-shadow-lift); }
.m-web-preview__track { fill: none; stroke: var(--x-paper-deep); stroke-width: 9; }
.m-web-preview__win--r { clip-path: inset(0 0 0 50%); }
.m-web-preview__win--l { clip-path: inset(0 50% 0 0); }
.m-web-preview__arc { transform-box: view-box; transform-origin: 50% 50%; }
.m-web-preview__arc circle { fill: none; stroke: var(--x-mint); stroke-width: 9; stroke-dasharray: 163.4 163.4; }
.m-web-preview__arc--r { transform: rotate(180deg); }
.m-web-preview__arc--l { transform: rotate(calc((var(--wp-score) * 3.6 - 180) * 1deg)); }
.m-web-preview__num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--x-font-ui); font-size: calc(var(--wp-ring) * 0.3); font-weight: 800; letter-spacing: -0.03em; color: var(--x-mint); }
.m-web-preview__score-label { position: absolute; top: calc(100% + 0.4em); left: 0; font-family: var(--x-font-body); font-size: clamp(12px, 0.95em, 14px); line-height: 1.3; color: var(--x-muted); white-space: nowrap; }
/* ---- phone (screen designed at 20em wide) ---- */
.m-web-preview__phone {
font-size: 0.54em; /* 20em phone = 10.8em of the stage */
position: relative;
width: 20em;
aspect-ratio: 9 / 19.5;
padding: 0.55em;
border-radius: min(44px, 2.9em);
background: var(--x-ink);
box-shadow: var(--x-shadow-lift);
}
.m-web-preview__screen { position: relative; height: 100%; overflow: hidden; border-radius: min(38px, 2.4em); background: #fff; font-family: var(--x-font-ui); color: var(--x-ink); }
.m-web-preview__island { position: absolute; top: 0.6em; left: 50%; z-index: 2; width: 5em; height: 1.45em; border-radius: 1em; background: var(--x-ink); transform: translateX(-50%); }
.m-web-preview__status { display: flex; align-items: center; justify-content: space-between; height: 4.2em; padding: 0.4em 2.2em 0; font-size: 0.68em; font-weight: 600; }
.m-web-preview__sig { display: flex; align-items: flex-end; gap: 0.2em; }
.m-web-preview__sig i { width: 0.3em; height: 0.5em; border-radius: 0.1em; background: var(--x-ink); }
.m-web-preview__sig i:nth-child(2) { height: 0.7em; }
.m-web-preview__sig i:nth-child(3) { height: 0.9em; }
.m-web-preview__sig i:nth-child(4) { height: 1.1em; }
.m-web-preview__bat { position: relative; width: 1.9em; height: 1em; margin-left: 0.45em; border: 1.5px solid var(--x-ink); border-radius: 0.3em; }
.m-web-preview__bat::after { content: ""; position: absolute; inset: 0.15em; width: 70%; border-radius: 0.12em; background: var(--x-ink); }
.m-web-preview__mnav { display: flex; align-items: center; justify-content: space-between; padding: 0.5em 1.1em 0.6em; border-bottom: 1px solid var(--x-paper-deep); }
.m-web-preview__mnav .m-web-preview__brand { font-size: 0.85em; }
.m-web-preview__mnav > svg { width: 1.3em; height: 1.3em; }
.m-web-preview__mhero { padding: 1.1em 1.1em 1.2em; background: var(--x-paper); }
.m-web-preview__mhero .m-web-preview__pill { font-size: 0.62em; }
.m-web-preview__mh1 { margin: 0.55em 0 0.45em; font-size: 1.45em; line-height: 1.15; font-weight: 800; letter-spacing: -0.015em; }
.m-web-preview__msub { margin-bottom: 0.9em; font-size: 0.74em; line-height: 1.4; color: var(--x-muted); }
.m-web-preview__mbtn { display: block; padding: 0.75em; border-radius: 0.6em; background: var(--x-primary); color: #fff; font-size: 0.8em; font-weight: 700; text-align: center; }
.m-web-preview__mcard { margin: 1em 1.1em 0; padding: 0.9em; border: 1px solid var(--x-line); border-radius: 0.8em; }
.m-web-preview__mcard > b { display: block; font-size: 0.9em; }
.m-web-preview__minput { display: flex; align-items: center; height: 2.1em; margin: 0.55em 0; padding: 0 0.6em; border: 1px solid var(--x-line); border-radius: 0.45em; font-size: 0.72em; color: #A9A3B0; white-space: nowrap; overflow: hidden; }
.m-web-preview__mtiles { display: grid; gap: 0.55em; padding: 1em 1.1em; }
.m-web-preview__mtile { display: flex; align-items: center; gap: 0.6em; padding: 0.55em 0.7em; border: 1px solid var(--x-line); border-radius: 0.6em; font-size: 0.78em; font-weight: 600; }
.m-web-preview__mtile .m-web-preview__ico { width: 2em; height: 2em; margin: 0; flex: none; }
/* ---- narrow containers: no shrunken browser, just the phone (max 320px) with the ring on its corner ---- */
@container wp (max-width: 559.98px) {
.m-web-preview__stage { --wp-ring: clamp(76px, 24cqw, 96px); font-size: 14px; padding-bottom: calc(var(--wp-ring) * 0.5 + 2em); }
.m-web-preview__desk { display: none; }
.m-web-preview__hand { position: relative; right: auto; bottom: auto; width: min(100%, 320px); margin: 0 auto; }
.m-web-preview__phone { font-size: min(5cqw, 16px); }
.m-web-preview__score { left: max(0px, calc(50% - min(50%, 160px) - var(--wp-ring) * 0.3)); bottom: 2em; }
}
/* ---- motion (12 s loop; percentages are seconds / 12). Base rules above are the static final state. ---- */
@keyframes m-web-preview-cursor {
0%, 5.83% { opacity: 0; transform: translate(-34%, 46%) scale(1); }
8.33% { opacity: 1; transform: translate(-34%, 46%) scale(1); }
15.83%, 17.08% { transform: translate(var(--wp-x1), var(--wp-y1)) scale(1); }
17.5% { transform: translate(var(--wp-x1), var(--wp-y1)) scale(0.82); }
18.33%, 25.83% { transform: translate(var(--wp-x1), var(--wp-y1)) scale(1); }
30%, 31.25% { transform: translate(var(--wp-x2), var(--wp-y2)) scale(1); }
31.67% { transform: translate(var(--wp-x2), var(--wp-y2)) scale(0.82); }
32.5%, 42.5% { transform: translate(var(--wp-x2), var(--wp-y2)) scale(1); }
46.67%, 47.92% { transform: translate(var(--wp-x3), var(--wp-y3)) scale(1); }
48.33% { transform: translate(var(--wp-x3), var(--wp-y3)) scale(0.82); }
49.17%, 53.33% { transform: translate(var(--wp-x3), var(--wp-y3)) scale(1); }
58.33%, 59.58% { transform: translate(var(--wp-xb), var(--wp-yb)) scale(1); }
60.17% { transform: translate(var(--wp-xb), var(--wp-yb)) scale(0.82); }
60.83%, 65.83% { opacity: 1; transform: translate(var(--wp-xb), var(--wp-yb)) scale(1); }
70.83% { opacity: 1; transform: translate(74%, 104%) scale(1); }
74.17% { opacity: 0; transform: translate(74%, 104%) scale(1); }
75%, 100% { opacity: 0; transform: translate(-34%, 46%) scale(1); }
}
@keyframes m-web-preview-focus-1 { 0%, 17.08% { opacity: 0; } 18.33%, 27.5% { opacity: 1; } 29.17%, 100% { opacity: 0; } }
@keyframes m-web-preview-focus-2 { 0%, 31.25% { opacity: 0; } 32.5%, 42.5% { opacity: 1; } 44.17%, 100% { opacity: 0; } }
@keyframes m-web-preview-focus-3 { 0%, 47.92% { opacity: 0; } 49.17%, 55% { opacity: 1; } 56.67%, 100% { opacity: 0; } }
@keyframes m-web-preview-ph-1 { 0%, 17.5% { opacity: 1; } 19.17%, 88.33% { opacity: 0; } 94.17%, 100% { opacity: 1; } }
@keyframes m-web-preview-ph-2 { 0%, 31.67% { opacity: 1; } 33.33%, 88.33% { opacity: 0; } 94.17%, 100% { opacity: 1; } }
@keyframes m-web-preview-ph-3 { 0%, 48.33% { opacity: 1; } 50%, 88.33% { opacity: 0; } 94.17%, 100% { opacity: 1; } }
@keyframes m-web-preview-mask-1 {
0%, 20% { opacity: 1; transform: translateX(0); animation-timing-function: steps(13, end); }
29.17%, 88.33% { opacity: 1; transform: translateX(100%); }
88.4% { opacity: 0; transform: translateX(0); }
94.17%, 100% { opacity: 1; transform: translateX(0); }
}
@keyframes m-web-preview-mask-2 {
0%, 34.17% { opacity: 1; transform: translateX(0); animation-timing-function: steps(12, end); }
43.33%, 88.33% { opacity: 1; transform: translateX(100%); }
88.4% { opacity: 0; transform: translateX(0); }
94.17%, 100% { opacity: 1; transform: translateX(0); }
}
@keyframes m-web-preview-caret-1 { 0%, 17.5% { opacity: 0; } 17.92%, 31.25% { opacity: 1; } 31.67%, 100% { opacity: 0; } }
@keyframes m-web-preview-caret-2 { 0%, 31.67% { opacity: 0; } 32.08%, 47.92% { opacity: 1; } 48.33%, 100% { opacity: 0; } }
@keyframes m-web-preview-pick { 0%, 49.58% { opacity: 0; } 51.25%, 88.33% { opacity: 1; } 94.17%, 100% { opacity: 0; } }
@keyframes m-web-preview-press { 0%, 59.58% { transform: scale(1); } 60.17% { transform: scale(0.96); } 61.67%, 100% { transform: scale(1); } }
@keyframes m-web-preview-sent { 0%, 61.25% { opacity: 0; } 63.33%, 88.33% { opacity: 1; } 92.5%, 100% { opacity: 0; } }
@keyframes m-web-preview-check { 0%, 61.25% { transform: scale(0.4); } 64.5%, 100% { transform: scale(1); } }
@keyframes m-web-preview-arc-r { from { transform: rotate(0deg); } to { transform: rotate(180deg); } }
@keyframes m-web-preview-arc-l { from { transform: rotate(0deg); opacity: 0; } 2% { opacity: 1; } to { transform: rotate(calc((var(--wp-score) * 3.6 - 180) * 1deg)); } }
/* script.js adds .is-ready (motion allowed) and toggles .is-playing while on screen */
.m-web-preview.is-ready [data-a],
.m-web-preview.is-ready [data-a]::before,
.m-web-preview.is-ready [data-a]::after { animation-duration: 12s; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: both; animation-play-state: paused; }
.m-web-preview.is-ready .m-web-preview__cursor { animation-name: m-web-preview-cursor; animation-timing-function: cubic-bezier(0.45, 0.05, 0.2, 1); }
.m-web-preview.is-ready [data-f="1"] .m-web-preview__input::after { animation-name: m-web-preview-focus-1; }
.m-web-preview.is-ready [data-f="2"] .m-web-preview__input::after { animation-name: m-web-preview-focus-2; }
.m-web-preview.is-ready [data-f="3"] .m-web-preview__input::after { animation-name: m-web-preview-focus-3; }
.m-web-preview.is-ready [data-f="1"] .m-web-preview__ph { animation-name: m-web-preview-ph-1; }
.m-web-preview.is-ready [data-f="2"] .m-web-preview__ph { animation-name: m-web-preview-ph-2; }
.m-web-preview.is-ready [data-f="3"] .m-web-preview__ph { animation-name: m-web-preview-ph-3; }
.m-web-preview.is-ready [data-f="1"] .m-web-preview__mask { animation-name: m-web-preview-mask-1; }
.m-web-preview.is-ready [data-f="2"] .m-web-preview__mask { animation-name: m-web-preview-mask-2; }
.m-web-preview.is-ready [data-f="1"] .m-web-preview__mask::before { animation-name: m-web-preview-caret-1; }
.m-web-preview.is-ready [data-f="2"] .m-web-preview__mask::before { animation-name: m-web-preview-caret-2; }
.m-web-preview.is-ready .m-web-preview__val--pick { animation-name: m-web-preview-pick; }
.m-web-preview.is-ready .m-web-preview__submit { animation-name: m-web-preview-press; }
.m-web-preview.is-ready .m-web-preview__sent { animation-name: m-web-preview-sent; }
.m-web-preview.is-ready .m-web-preview__sent svg { animation-name: m-web-preview-check; animation-timing-function: cubic-bezier(0.3, 1.4, 0.5, 1); }
.m-web-preview.is-playing [data-a],
.m-web-preview.is-playing [data-a]::before,
.m-web-preview.is-playing [data-a]::after { animation-play-state: running; }
/* ring: full by default; script adds .is-armed only while the ring is still below the fold (arc empties),
then .is-drawing once the ring itself is on screen (arc draws to the score, once) */
.m-web-preview.is-armed .m-web-preview__arc--r { animation: m-web-preview-arc-r 0.8s cubic-bezier(0.5, 0, 1, 1) 0.15s 1 both paused; }
.m-web-preview.is-armed .m-web-preview__arc--l { animation: m-web-preview-arc-l 0.75s cubic-bezier(0, 0, 0.3, 1) 0.95s 1 both paused; }
.m-web-preview.is-armed.is-drawing .m-web-preview__arc { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
.m-web-preview [data-a],
.m-web-preview [data-a]::before,
.m-web-preview [data-a]::after,
.m-web-preview .m-web-preview__arc { animation: none !important; }
}
/* ---- morning-report ---- */
/* morning-report — Zalo group chat on a CSS phone: the 07:00 automated report from CROSS Bot.
Every selector starts with .m-morning-report. Tokens come from ../_tokens.css (theme base.css).
Frame, header, bubbles and composer share dimensions with the ai-chat component so both phones match. */
.m-morning-report {
--m-morning-report-w: 350px; /* phone width; override on the root to resize (300–390px recommended) */
--m-morning-report-bezel: #1c1a20;
--m-morning-report-canvas: #edf0f4; /* Zalo chat canvas */
--m-morning-report-me: #e3edff;
--m-morning-report-me: color-mix(in srgb, var(--x-zalo) 13%, #fff);
--m-morning-report-me-line: #c9dbfa;
--m-morning-report-me-line: color-mix(in srgb, var(--x-zalo) 22%, #fff);
--m-morning-report-rule: #f1ede8; /* hairline between report rows */
container-type: inline-size;
container-name: m-morning-report;
display: grid;
grid-template-columns: min(100%, var(--m-morning-report-w)); /* explicit track: never sized by the chat's max-content */
justify-content: center;
width: 100%;
margin: 0;
padding: 0;
font-family: var(--x-font-ui);
font-size: 13px;
line-height: 1.35;
color: var(--x-ink);
-webkit-font-smoothing: antialiased;
}
.m-morning-report *,
.m-morning-report *::before,
.m-morning-report *::after { box-sizing: border-box; }
.m-morning-report svg { display: block; flex: none; }
/* ---------- Device frame ---------- */
.m-morning-report__phone {
position: relative;
width: 100%;
min-width: 0;
aspect-ratio: 9 / 19.5;
padding: 10px;
border-radius: 44px;
background: var(--m-morning-report-bezel);
box-shadow: var(--x-shadow-lift), inset 0 0 0 1.5px rgba(255, 255, 255, 0.09);
}
.m-morning-report__screen {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
border-radius: 35px;
background: var(--m-morning-report-canvas);
}
.m-morning-report__island {
position: absolute;
top: 10px;
left: 50%;
z-index: 3;
width: 86px;
height: 25px;
margin-left: -43px;
border-radius: 13px;
background: var(--m-morning-report-bezel);
}
/* ---------- Status bar + Zalo group header ---------- */
.m-morning-report__status {
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
height: 48px;
padding: 10px 24px 0 30px;
background: var(--x-zalo);
color: #fff;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.01em;
}
.m-morning-report__status-icons { display: flex; align-items: center; gap: 5px; }
.m-morning-report__header {
flex: none;
display: flex;
align-items: center;
gap: 4px;
padding: 4px 4px 10px 4px;
background: var(--x-zalo);
color: #fff;
}
.m-morning-report__icon-btn {
flex: none;
display: grid;
place-items: center;
width: 26px;
height: 30px;
color: #fff;
}
.m-morning-report__group-avatar {
flex: none;
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.22);
color: #fff;
}
.m-morning-report__who {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
padding-left: 4px;
}
.m-morning-report__name {
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 13px;
font-weight: 600;
line-height: 1.2;
}
.m-morning-report__sub {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 11px;
line-height: 1.2;
}
/* ---------- Thread ---------- */
.m-morning-report__list {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
justify-content: flex-end; /* bottom-anchored like a real chat; older lines clip at the top */
overflow: hidden;
padding: 0 10px;
}
.m-morning-report__thread {
flex: none;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
padding: 8px 0 12px;
transition: transform 0.3s var(--x-ease), opacity 0.35s ease;
will-change: transform;
}
.m-morning-report__thread.is-fading { opacity: 0; }
.m-morning-report__divider {
align-self: center;
padding: 3px 9px;
border-radius: 999px;
background: rgba(21, 18, 27, 0.07);
color: var(--x-muted);
font-size: 10.5px;
line-height: 1.2;
}
.m-morning-report__msg {
display: flex;
align-items: flex-end;
gap: 6px;
max-width: 86%;
}
.m-morning-report__msg--me { align-self: flex-end; }
.m-morning-report__msg--bot { width: 92%; max-width: 92%; }
.m-morning-report__avatar {
flex: none;
display: grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 50%;
font-size: 9.5px;
font-weight: 700;
line-height: 1;
}
.m-morning-report__avatar--sales { background: #dbe6f1; color: #2b5675; }
.m-morning-report__avatar--bot { background: var(--x-primary); color: #fff; }
.m-morning-report__col {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
}
.m-morning-report__msg--bot .m-morning-report__col { align-items: stretch; }
.m-morning-report__sender {
display: flex;
align-items: center;
gap: 5px;
padding-left: 2px;
color: var(--x-muted);
font-size: 11px;
line-height: 1.2;
}
.m-morning-report__badge {
padding: 2px 5px 1px;
border-radius: 4px;
background: var(--x-cobalt-soft);
color: var(--x-cobalt);
font-size: 9.5px;
font-weight: 700;
line-height: 1.1;
}
.m-morning-report__bubble {
position: relative;
min-width: 0;
max-width: 100%;
padding: 8px 10px 6px;
border: 1px solid var(--x-line);
border-radius: 12px;
background: #fff;
color: var(--x-ink);
font-size: 13px;
line-height: 1.42;
overflow-wrap: anywhere;
}
.m-morning-report__msg--in .m-morning-report__bubble { border-bottom-left-radius: 4px; }
.m-morning-report__msg--me .m-morning-report__bubble {
border-color: var(--m-morning-report-me-line);
border-bottom-right-radius: 4px;
background: var(--m-morning-report-me);
}
.m-morning-report__bubble--report { width: 100%; padding: 8px 11px 5px; }
.m-morning-report__text { margin: 0; }
.m-morning-report__time {
display: block;
margin-top: 4px;
color: var(--x-muted);
font-size: 10px;
line-height: 1.2;
}
/* ---------- The report itself ---------- */
.m-morning-report__title {
color: var(--x-primary);
font-size: 13.5px;
font-weight: 700;
line-height: 1.25;
}
.m-morning-report__subtitle {
margin: 2px 0 5px;
color: var(--x-muted);
font-size: 11px;
line-height: 1.3;
}
.m-morning-report__stat {
display: flex;
align-items: baseline;
gap: 8px;
padding: 4px 0;
box-shadow: 0 -1px 0 var(--m-morning-report-rule);
font-size: 12.5px;
line-height: 1.3;
}
.m-morning-report__stat-label { flex: 1 1 auto; min-width: 0; color: var(--x-text); }
.m-morning-report__stat-n {
flex: none;
min-width: 20px;
color: var(--x-ink);
font-size: 14px;
font-weight: 700;
font-variant-numeric: tabular-nums;
text-align: right;
}
.m-morning-report__stat-note {
flex: none;
min-width: 86px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--x-muted);
font-size: 10.5px;
font-variant-numeric: tabular-nums;
text-align: right;
}
.m-morning-report__stat-note--up { color: var(--x-mint); font-weight: 600; }
.m-morning-report__stat-note--money { color: var(--x-primary); font-size: 11.5px; font-weight: 700; }
.m-morning-report__section {
display: flex;
align-items: center;
gap: 6px;
margin-top: 4px;
padding-top: 6px;
border-top: 1px solid var(--x-line);
color: var(--x-ink);
font-size: 11.5px;
font-weight: 700;
line-height: 1.3;
}
.m-morning-report__flag {
flex: none;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--x-coral);
}
.m-morning-report__lead {
display: flex;
align-items: center;
gap: 6px;
padding: 3px 0 3px 13px;
font-size: 12px;
line-height: 1.3;
}
.m-morning-report__lead-name {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--x-text);
}
.m-morning-report__assignee {
flex: none;
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 6px 2px 5px;
border-radius: 5px;
background: var(--x-paper-deep);
color: var(--x-text);
font-size: 10.5px;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
}
.m-morning-report__assignee svg { color: var(--x-muted); }
.m-morning-report__channel {
display: flex;
align-items: baseline;
gap: 6px;
margin-top: 3px;
padding-top: 6px;
border-top: 1px solid var(--x-line);
font-size: 11.5px;
line-height: 1.3;
}
.m-morning-report__channel-label { flex: none; color: var(--x-muted); }
.m-morning-report__channel-value {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--x-ink);
font-weight: 700;
}
.m-morning-report__spark {
display: flex;
align-items: center;
gap: 8px;
margin-top: 4px;
padding-top: 6px;
border-top: 1px solid var(--x-line);
}
.m-morning-report__spark-label { flex: 1 1 auto; min-width: 0; color: var(--x-muted); font-size: 11px; line-height: 1.3; }
.m-morning-report__spark-svg { width: 100px; height: 30px; overflow: visible; }
.m-morning-report__spark-area { fill: var(--x-primary); opacity: 0.1; }
.m-morning-report__spark-line { fill: none; stroke: var(--x-primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.m-morning-report__spark-dot { fill: var(--x-primary); transform-box: fill-box; transform-origin: center; }
.m-morning-report__wipe {
fill: #fff;
transform-box: fill-box;
transform-origin: 100% 50%;
transform: scaleX(0); /* static state: chart fully visible */
}
.m-morning-report__spark-delta {
flex: none;
color: var(--x-mint);
font-size: 11.5px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
/* ---------- Reaction on the owner's reply ---------- */
.m-morning-report__react {
position: absolute;
right: 8px;
bottom: -9px;
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 6px 2px 5px;
border: 1px solid var(--x-line);
border-radius: 999px;
background: #fff;
box-shadow: var(--x-shadow-sm);
color: var(--x-coral);
line-height: 1;
transform-origin: 80% 100%;
}
.m-morning-report__react-n { color: var(--x-text); font-size: 10px; font-weight: 600; }
/* ---------- Composer + home indicator ---------- */
.m-morning-report__composer {
flex: none;
display: flex;
align-items: center;
gap: 12px;
padding: 9px 12px 7px;
border-top: 1px solid var(--x-line);
background: #fff;
color: var(--x-muted);
}
.m-morning-report__input {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
white-space: nowrap;
color: var(--x-muted);
font-size: 13px;
line-height: 22px;
}
.m-morning-report__typed { display: none; color: var(--x-ink); }
.m-morning-report__tools { display: flex; align-items: center; gap: 12px; }
.m-morning-report__send { display: none; color: var(--x-zalo); }
.m-morning-report__composer.is-typing .m-morning-report__placeholder { display: none; }
.m-morning-report__composer.is-typing .m-morning-report__typed { display: inline; }
.m-morning-report__composer.is-typing .m-morning-report__typed::after {
content: "";
display: inline-block;
width: 1.5px;
height: 14px;
margin-left: 1px;
vertical-align: -2px;
background: var(--x-zalo);
animation: m-morning-report-blink 1s steps(2, start) infinite;
}
.m-morning-report__composer.is-typing .m-morning-report__tools { display: none; }
.m-morning-report__composer.is-typing .m-morning-report__send { display: block; }
.m-morning-report__home {
flex: none;
display: grid;
place-items: center;
height: 22px;
background: #fff;
}
.m-morning-report__home::before {
content: "";
width: 110px;
height: 5px;
border-radius: 3px;
background: var(--x-ink);
opacity: 0.85;
}
/* ---------- Live (JS-driven) states. Without JS / under reduced motion the finished chat shows. ---------- */
.m-morning-report.is-live .m-morning-report__msg--bot:not(.is-in),
.m-morning-report.is-live .m-morning-report__msg--reply:not(.is-in),
.m-morning-report.is-live .m-morning-report__line:not(.is-in) { display: none; }
.m-morning-report.is-live .m-morning-report__msg.is-in { animation: m-morning-report-pop 0.4s var(--x-ease) both; }
.m-morning-report.is-live .m-morning-report__line.is-in { animation: m-morning-report-rise 0.32s var(--x-ease) both; }
.m-morning-report.is-live .m-morning-report__react:not(.is-in) { opacity: 0; transform: scale(0.4); }
.m-morning-report.is-live .m-morning-report__react.is-in { animation: m-morning-report-react 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
.m-morning-report.is-live .m-morning-report__wipe { transform: scaleX(1); }
.m-morning-report.is-live .m-morning-report__line.is-in .m-morning-report__wipe { animation: m-morning-report-wipe 1.1s 0.2s var(--x-ease) both; }
.m-morning-report.is-live .m-morning-report__line.is-in .m-morning-report__spark-dot { animation: m-morning-report-react 0.4s 1.15s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
@keyframes m-morning-report-pop {
from { opacity: 0; transform: translateY(8px) scale(0.98); }
to { opacity: 1; transform: none; }
}
@keyframes m-morning-report-rise {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: none; }
}
@keyframes m-morning-report-react {
from { opacity: 0; transform: scale(0.4); }
to { opacity: 1; transform: scale(1); }
}
@keyframes m-morning-report-wipe {
from { transform: scaleX(1); }
to { transform: scaleX(0); }
}
@keyframes m-morning-report-blink {
50% { opacity: 0; }
}
/* ---------- Narrow containers (< 330px): the phone shrinks, so tighten the UI ---------- */
@container m-morning-report (max-width: 329px) {
.m-morning-report__phone { padding: 8px; border-radius: 38px; }
.m-morning-report__screen { border-radius: 31px; }
.m-morning-report__island { width: 76px; height: 22px; margin-left: -38px; top: 9px; }
.m-morning-report__status { height: 44px; padding: 8px 20px 0 26px; font-size: 12px; }
.m-morning-report__header { padding: 2px 4px 8px 2px; }
.m-morning-report__name { font-size: 12px; }
.m-morning-report__sub { font-size: 10.5px; }
.m-morning-report__list { padding: 0 8px; }
.m-morning-report__thread { gap: 6px; padding: 8px 0 12px; }
.m-morning-report__msg { max-width: 90%; }
.m-morning-report__msg--bot { width: 94%; max-width: 94%; }
.m-morning-report__bubble { padding: 7px 9px 5px; font-size: 12px; }
.m-morning-report__bubble--report { padding: 8px 9px 5px; }
.m-morning-report__title { font-size: 12.5px; }
.m-morning-report__stat { gap: 6px; padding: 4px 0; font-size: 11.5px; }
.m-morning-report__stat-n { font-size: 13px; }
.m-morning-report__stat-note { min-width: 72px; font-size: 10px; }
.m-morning-report__stat-note--money { font-size: 10.5px; }
.m-morning-report__lead { padding: 2px 0 2px 11px; font-size: 11px; }
.m-morning-report__section,
.m-morning-report__channel { font-size: 11px; }
.m-morning-report__spark-svg { width: 84px; height: 25px; }
.m-morning-report__spark-label { font-size: 10.5px; }
.m-morning-report__composer { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.m-morning-report__thread { transition: none; }
.m-morning-report .m-morning-report__msg,
.m-morning-report .m-morning-report__line,
.m-morning-report .m-morning-report__react,
.m-morning-report .m-morning-report__wipe,
.m-morning-report .m-morning-report__spark-dot,
.m-morning-report .m-morning-report__typed::after { animation: none; transition: none; }
}
/* ---- night-inbox ---- */
/* night-inbox — a phone lock screen at 22:47 with unread notifications piling up,
and three "where the customer went" cards beside it.
Every selector starts with .m-night-inbox. Tokens come from ../_tokens.css (theme base.css). */
.m-night-inbox {
--m-ni-phone: 300px; /* phone width; override on the root to resize */
--m-ni-bezel: #1c1a20;
--m-ni-wall-top: #262930; /* plain dark wallpaper, no photo */
--m-ni-wall-bottom: #101216;
--m-ni-card: rgba(255, 255, 255, 0.12); /* notification card on the dark screen */
--m-ni-card-line: rgba(255, 255, 255, 0.07);
--m-ni-dim: rgba(255, 255, 255, 0.56);
--m-ni-page: #4f6ba3; /* generic "fanpage" app tile (no logo) */
--m-ni-form: #6b5aa8; /* generic "forms" app tile (no logo) */
--m-ni-warm: #c9503f;
--m-ni-warm: color-mix(in srgb, var(--x-coral) 72%, var(--x-ink));
--m-ni-warm-soft: #ffe6e1;
--m-ni-warm-soft: color-mix(in srgb, var(--x-coral) 14%, #fff);
container-type: inline-size;
container-name: m-night-inbox;
width: 100%;
margin: 0;
padding: 0;
font-family: var(--x-font-body);
font-size: 15px;
line-height: 1.4;
color: var(--x-text);
-webkit-font-smoothing: antialiased;
}
.m-night-inbox *,
.m-night-inbox *::before,
.m-night-inbox *::after { box-sizing: border-box; }
.m-night-inbox svg { display: block; flex: none; }
.m-night-inbox__layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
justify-items: stretch;
gap: 22px;
}
/* ---------- Device frame ---------- */
.m-night-inbox__phone {
position: relative;
z-index: 1;
width: 100%;
max-width: var(--m-ni-phone);
margin: 0 auto;
aspect-ratio: 9 / 19.5;
padding: 9px;
border-radius: 42px;
background: var(--m-ni-bezel);
box-shadow: var(--x-shadow-lift), inset 0 0 0 1.5px rgba(255, 255, 255, 0.09);
}
.m-night-inbox__screen {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
border-radius: 34px;
background: linear-gradient(180deg, var(--m-ni-wall-top) 0%, var(--m-ni-wall-bottom) 58%);
color: #fff;
font-family: var(--x-font-ui);
font-size: 12.5px;
line-height: 1.3;
}
.m-night-inbox__island {
position: absolute;
top: 10px;
left: 50%;
z-index: 3;
width: 84px;
height: 24px;
margin-left: -42px;
border-radius: 12px;
background: var(--m-ni-bezel);
}
/* ---------- Status bar, lock, clock ---------- */
.m-night-inbox__status {
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
justify-content: flex-end;
gap: 6px;
height: 44px;
padding: 10px 22px 0 26px;
opacity: 0.92;
}
.m-night-inbox__status-group { display: flex; align-items: center; gap: 5px; }
.m-night-inbox__lock {
flex: none;
display: flex;
justify-content: center;
margin-top: 4px;
opacity: 0.85;
}
.m-night-inbox__date {
flex: none;
margin-top: 6px;
text-align: center;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.01em;
opacity: 0.92;
}
.m-night-inbox__clock {
flex: none;
margin: 0 0 14px;
text-align: center;
font-size: 54px;
font-weight: 200;
line-height: 1.1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
/* ---------- Notification stack ---------- */
.m-night-inbox__stack {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
gap: 6px;
padding: 0 10px 80px;
overflow: hidden;
transition: opacity 0.45s ease;
}
.m-night-inbox__notif {
flex: none;
display: flex;
align-items: flex-start;
gap: 10px;
padding: 8px 10px 9px 9px;
border: 1px solid var(--m-ni-card-line);
border-radius: 12px;
background: var(--m-ni-card);
transition: transform 0.5s var(--x-ease);
}
.m-night-inbox__app {
flex: none;
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 8px;
color: #fff;
}
.m-night-inbox__app--page { background: var(--m-ni-page); }
.m-night-inbox__app--zalo { background: var(--x-zalo); }
.m-night-inbox__app--call { background: var(--x-mint); }
.m-night-inbox__app--form { background: var(--m-ni-form); }
.m-night-inbox__body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.m-night-inbox__row {
display: flex;
align-items: baseline;
gap: 6px;
min-width: 0;
}
.m-night-inbox__from {
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: 600;
}
.m-night-inbox__src {
flex: none;
font-size: 11px;
color: var(--m-ni-dim);
}
.m-night-inbox__time {
flex: none;
margin-left: auto;
font-size: 11px;
color: var(--m-ni-dim);
font-variant-numeric: tabular-nums;
}
.m-night-inbox__text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
color: rgba(255, 255, 255, 0.82);
overflow-wrap: anywhere;
}
/* "12 more notifications" — the collapsed stack at the bottom */
.m-night-inbox__more {
position: relative;
z-index: 0; /* own stacking context so the ::before/::after layers sit behind the card only */
flex: none;
display: flex;
align-items: center;
gap: 8px;
margin: 4px 0 8px;
padding: 8px 11px 8px 10px;
border: 1px solid var(--m-ni-card-line);
border-radius: 12px;
background: var(--m-ni-card);
font-size: 12px;
color: rgba(255, 255, 255, 0.82);
transition: transform 0.5s var(--x-ease);
}
.m-night-inbox__more::before,
.m-night-inbox__more::after {
content: "";
position: absolute;
left: 8px;
right: 8px;
bottom: -4px;
z-index: -1;
height: 10px;
border-radius: 0 0 10px 10px;
background: rgba(255, 255, 255, 0.075);
}
.m-night-inbox__more::after {
left: 16px;
right: 16px;
bottom: -8px;
background: rgba(255, 255, 255, 0.045);
}
.m-night-inbox__more-apps { display: flex; align-items: center; }
.m-night-inbox__mini {
width: 16px;
height: 16px;
border: 1.5px solid #1b1d22;
border-radius: 5px;
margin-right: -4px;
}
.m-night-inbox__mini:last-child { margin-right: 4px; }
.m-night-inbox__badge {
display: inline-grid;
place-items: center;
min-width: 19px;
height: 19px;
padding: 0 6px;
border-radius: 10px;
background: var(--x-crimson);
color: #fff;
font-size: 11px;
font-weight: 700;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.m-night-inbox__badge.is-bump { animation: m-night-inbox-bump 0.45s var(--x-ease); }
.m-night-inbox__more-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ---------- Lock-screen chrome: flashlight / camera, home bar ---------- */
.m-night-inbox__quick {
position: absolute;
right: 30px;
bottom: 30px;
left: 30px;
display: flex;
justify-content: space-between;
}
.m-night-inbox__quick-btn {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.13);
color: #fff;
}
.m-night-inbox__home {
position: absolute;
bottom: 9px;
left: 50%;
width: 108px;
height: 4px;
margin-left: -54px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.85);
}
/* ---------- "The next morning" cards ---------- */
.m-night-inbox__after {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
transition: opacity 0.45s ease;
}
.m-night-inbox__after-label {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--x-font-display);
font-size: 17px;
font-style: italic;
color: var(--x-muted);
transition: opacity 0.5s ease;
}
.m-night-inbox__after-label::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: var(--x-line);
}
.m-night-inbox__card {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
padding: 12px 14px;
border: 1px solid var(--x-line);
border-radius: 14px;
background: #fff;
box-shadow: var(--x-shadow);
transition: opacity 0.6s ease, transform 0.6s var(--x-ease);
}
.m-night-inbox__card-icon {
flex: none;
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--m-ni-warm-soft);
color: var(--m-ni-warm);
}
.m-night-inbox__card-body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.m-night-inbox__card-title {
font-size: clamp(14px, 2.6cqi + 9px, 15.5px);
font-weight: 600;
line-height: 1.3;
color: var(--x-ink);
overflow-wrap: anywhere;
}
.m-night-inbox__card-sub {
font-size: 12.5px;
line-height: 1.35;
color: var(--x-muted);
overflow-wrap: anywhere;
}
/* ---------- Layouts (container queries on the root) ---------- */
@container m-night-inbox (min-width: 560px) {
.m-night-inbox__after { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.m-night-inbox__after-label { grid-column: 1 / -1; }
.m-night-inbox__card { align-items: flex-start; flex-direction: column; gap: 10px; padding: 14px 14px 13px; }
}
@container m-night-inbox (min-width: 820px) {
.m-night-inbox__layout {
grid-template-columns: var(--m-ni-phone) minmax(260px, 330px);
align-items: center;
justify-content: center;
gap: 0;
}
.m-night-inbox__after {
position: relative;
z-index: 2;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
margin-left: -26px;
}
.m-night-inbox__after-label { grid-column: auto; margin-left: 38px; }
.m-night-inbox__card { align-items: center; flex-direction: row; gap: 12px; padding: 12px 14px; }
}
/* ---------- Motion states (script adds .is-live; CSS default = final static state) ---------- */
.m-night-inbox.is-live .m-night-inbox__stack > [data-k]:not(.is-in) { display: none; }
.m-night-inbox.is-live .m-night-inbox__stack > [data-k].is-in { animation: m-night-inbox-drop 0.55s var(--x-ease); }
.m-night-inbox.is-live.is-still .m-night-inbox__stack > [data-k].is-in { animation: none; }
.m-night-inbox.is-live .m-night-inbox__after [data-k]:not(.is-in) { opacity: 0; transform: translateY(10px); }
.m-night-inbox.is-fading .m-night-inbox__stack,
.m-night-inbox.is-fading .m-night-inbox__after { opacity: 0; }
@keyframes m-night-inbox-drop {
from { opacity: 0; transform: translateY(-18px) scale(0.96); }
to { opacity: 1; transform: none; }
}
@keyframes m-night-inbox-bump {
0% { transform: scale(1); }
40% { transform: scale(1.3); }
100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.m-night-inbox * { animation: none !important; transition: none !important; }
}
/* ---- before-after ---- */
/* before-after. >= 600 px container: two SVG illustrations; < 600 px: HTML phone layout. Motion needs .is-on (script.js). */
.m-before-after {
container-type: inline-size;
display: block;
width: 100%;
min-width: 0;
box-sizing: border-box;
font-family: var(--x-font-body);
color: var(--x-text);
line-height: 1.4;
}
.m-before-after *,
.m-before-after *::before,
.m-before-after *::after { box-sizing: border-box; }
.m-before-after__grid {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 28px;
padding: 16px;
padding: clamp(10px, 1.8cqi, 22px);
background: var(--x-paper-deep);
border-radius: var(--x-radius);
}
.m-before-after__panel {
display: flex;
flex-direction: column;
gap: 12px;
gap: clamp(10px, 1.6cqi, 16px);
min-width: 0;
padding: 16px;
padding: clamp(12px, 1.8cqi, 20px);
background: var(--x-paper);
border: 1px solid var(--x-line);
border-radius: 16px;
box-shadow: var(--x-shadow-sm);
}
.m-before-after__head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.m-before-after__tag {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 11px 5px 9px;
border-radius: 999px;
font: 600 13px/1.1 var(--x-font-body);
white-space: nowrap;
}
.m-before-after__tag::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; }
.m-before-after__tag--before { background: var(--x-paper-deep); color: var(--x-ink); }
.m-before-after__tag--before::before { background: var(--x-coral); }
.m-before-after__tag--after { background: var(--x-paper-deep); background: color-mix(in srgb, var(--x-mint) 12%, transparent); color: var(--x-mint); }
.m-before-after__tag--after::before { background: var(--x-mint); }
.m-before-after__title {
margin: 0;
font: 600 20px/1.25 var(--x-font-display);
font: 600 clamp(17px, 1.5cqi + 10px, 22px)/1.25 var(--x-font-display);
color: var(--x-ink);
letter-spacing: -0.01em;
text-wrap: balance;
overflow-wrap: anywhere;
}
.m-before-after__art { width: 100%; aspect-ratio: 520 / 380; margin-top: auto; }
.m-before-after__svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.m-before-after svg { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.m-before-after__svg { stroke-width: 1.5; }
.m-before-after__arrow {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--x-primary);
color: var(--x-paper);
border: 3px solid var(--x-paper-deep);
box-shadow: var(--x-shadow);
transform: translate(-50%, -50%);
}
.m-before-after__arrow svg { display: block; }
/* ---------- illustration primitives (user units) ---------- */
.m-before-after .ba-s { fill: var(--x-paper); stroke: var(--x-ink); }
.m-before-after .ba-o { stroke: var(--x-ink); }
.m-before-after .ba-f { fill: var(--x-paper); }
.m-before-after .ba-f2 { fill: var(--x-paper-deep); }
.m-before-after .ba-f2s { fill: var(--x-paper-deep); stroke: var(--x-ink); }
.m-before-after .ba-inkf { fill: var(--x-ink); }
.m-before-after .ba-ln { stroke: var(--x-muted); stroke-width: 1; opacity: .55; }
.m-before-after .ba-line { stroke: var(--x-line); stroke-width: 1; }
.m-before-after .ba-cell rect { fill: var(--x-ink); opacity: .35; }
.m-before-after .ba-ring circle { fill: var(--x-paper); stroke: var(--x-ink); }
.m-before-after .ba-coral { fill: var(--x-coral); fill-opacity: .16; stroke: var(--x-coral); }
.m-before-after .ba-coral-ln { stroke: var(--x-coral); stroke-width: 1; opacity: .6; }
.m-before-after .ba-zalo { fill: var(--x-zalo); }
.m-before-after .ba-notif rect { fill: var(--x-paper); stroke: var(--x-line); stroke-width: 1; }
.m-before-after .ba-notif .ba-nl { fill: var(--x-muted); stroke: none; opacity: .5; }
.m-before-after .ba-notif circle { fill: var(--x-crimson); }
.m-before-after .ba-face { stroke: var(--x-ink); }
.m-before-after .ba-clock { stroke: var(--x-ink); stroke-width: 1.2; }
.m-before-after .ba-pill { fill: var(--x-paper); stroke: var(--x-line); stroke-width: 1; }
.m-before-after .ba-badge { fill: var(--x-crimson); stroke: var(--x-paper); stroke-width: 2; }
.m-before-after .ba-badge-t { font: 700 10.5px var(--x-font-ui); fill: var(--x-paper); }
.m-before-after .ba-badge-t--xs { font-size: 9px; }
.m-before-after .ba-ok { fill: var(--x-mint); stroke: var(--x-paper); stroke-width: 2; }
.m-before-after .ba-ck-w { stroke: var(--x-paper); stroke-width: 1.8; }
.m-before-after .ba-lost path { stroke: var(--x-muted); stroke-dasharray: 5 5; opacity: .8; }
.m-before-after .ba-x path { stroke: var(--x-muted); }
.m-before-after .ba-end circle { fill: var(--x-paper); stroke: var(--x-muted); }
.m-before-after .ba-q { font: 700 20px var(--x-font-display); fill: var(--x-muted); text-anchor: middle; }
.m-before-after .ba-q--sm { font-size: 15px; }
.m-before-after .ba-t { font: 600 13px var(--x-font-body); fill: var(--x-ink); }
.m-before-after .ba-t--12 { font-size: 12px; }
.m-before-after .ba-t--sm { font-size: 10.5px; font-weight: 500; }
.m-before-after .ba-t--xs { font-size: 9.5px; font-weight: 500; }
.m-before-after .ba-t--muted { fill: var(--x-muted); }
.m-before-after .ba-t--w { fill: var(--x-paper); font-weight: 700; }
.m-before-after .ba-t--ui { font-family: var(--x-font-ui); }
.m-before-after .ba-t--b { font-weight: 700; font-size: 10.5px; }
.m-before-after .ba-t--p { fill: var(--x-deep); }
.m-before-after .ba-t--st { font-size: 10px; font-weight: 700; }
.m-before-after .ba-t--who { font: italic 500 11px var(--x-font-body); fill: var(--x-muted); }
/* right panel: wires, nodes, board */
.m-before-after .ba-wire path { stroke: var(--x-cobalt); stroke-dasharray: 4 3; opacity: .8; }
.m-before-after .ba-tip,
.m-before-after .ba-tip path { stroke: var(--x-cobalt); }
.m-before-after .ba-tip--muted { stroke: var(--x-muted); }
.m-before-after .ba-ic { stroke: var(--x-ink); }
.m-before-after .ba-ic--w { stroke: var(--x-paper); stroke-width: 1.4; }
.m-before-after .ba-ic--thick { stroke-width: 2.6; }
.m-before-after .ba-retired rect,
.m-before-after .ba-retired circle:not(.ba-ok) { fill: var(--x-paper); stroke: var(--x-muted); opacity: .55; }
.m-before-after .ba-retired path:not(.ba-ck-w) { stroke: var(--x-muted); stroke-width: 1; opacity: .55; }
.m-before-after .ba-bar--p { fill: var(--x-primary); }
.m-before-after .ba-bar--c { fill: var(--x-cobalt); }
.m-before-after .ba-bar--m { fill: var(--x-mint); }
.m-before-after .ba-bar--o { fill: var(--x-coral); }
.m-before-after .ba-card > rect:first-child { fill: var(--x-paper); stroke: var(--x-line); stroke-width: 1; }
.m-before-after .ba-l1 { fill: var(--x-ink); opacity: .6; }
.m-before-after .ba-l2 { fill: var(--x-muted); opacity: .5; }
.m-before-after .ba-av { fill: var(--x-paper-deep); stroke: var(--x-muted); stroke-width: .8; }
.m-before-after .ba-ck { stroke: var(--x-mint); }
.m-before-after .ba-hl { fill: var(--x-primary); fill-opacity: .07; stroke: var(--x-primary); }
.m-before-after .ba-node { fill: var(--x-cobalt-soft); stroke: var(--x-cobalt); }
.m-before-after .ba-gear,
.m-before-after .ba-pop { transform-box: fill-box; transform-origin: center; }
.m-before-after .ba-gear-c,
.m-before-after .ba-gear-t { stroke: var(--x-cobalt); stroke-width: 3; }
.m-before-after .ba-av-sale { fill: var(--x-paper-deep); stroke: var(--x-ink); }
.m-before-after .ba-av-owner { fill: var(--x-primary); fill-opacity: .12; stroke: var(--x-primary); }
.m-before-after .ba-chart rect { fill: var(--x-primary); }
.m-before-after .ba-dot { fill: var(--x-cobalt); opacity: 0; offset-rotate: 0deg; }
/* ---------- phone layout (< 600 px): HTML text, all >= 12 px ---------- */
.m-before-after__m { display: none; flex-direction: column; font: 600 13px/1.25 var(--x-font-body); color: var(--x-ink); }
.m-before-after__m b { display: block; font-weight: 600; }
.m-before-after__m small { display: block; font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--x-muted); }
.m-before-after__lb { min-width: 0; }
.m-before-after__m svg { display: block; stroke: currentColor; stroke-width: 1.8; }
.m-before-after__src,
.m-before-after__chip,
.m-before-after__crm,
.m-before-after__out { position: relative; background: var(--x-paper); border: 1.5px solid var(--x-ink); border-radius: 12px; }
.m-before-after__ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--x-paper-deep); }
.m-before-after__ic svg { width: 18px; height: 18px; }
.m-before-after__ic--zalo { background: var(--x-zalo); color: var(--x-paper); }
.m-before-after__ic--owner { color: var(--x-primary); }
.m-before-after__ic--owner svg { stroke-width: 3; }
.m-before-after__n,
.m-before-after__ok { position: absolute; top: -9px; right: -9px; min-width: 22px; height: 22px; padding: 0 5px; border: 2px solid var(--x-paper); border-radius: 11px; background: var(--x-crimson); color: var(--x-paper); font: 700 12px/18px var(--x-font-ui); text-align: center; }
.m-before-after__ok { display: grid; place-items: center; padding: 0; background: var(--x-mint); }
.m-before-after__ok svg { width: 12px; height: 12px; stroke-width: 3; }
/* before: scattered sources + the rep */
.m-before-after__m--before { gap: 16px; }
.m-before-after__mess { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 12px; padding: 10px 4px 0; }
.m-before-after__src { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 5px 12px 5px 5px; transform: rotate(-2.5deg); }
.m-before-after__src:nth-child(2n) { transform: rotate(2deg) translateY(4px); }
.m-before-after__src:nth-child(3n) { transform: rotate(-1deg); }
.m-before-after__src--zalo { background: var(--x-zalo); border-color: var(--x-zalo); color: var(--x-paper); }
.m-before-after__src--zalo .m-before-after__ic { background: var(--x-paper); color: var(--x-zalo); }
.m-before-after__src--note { background: color-mix(in srgb, var(--x-coral) 14%, var(--x-paper)); border-color: var(--x-coral); }
.m-before-after__src--note .m-before-after__ic { background: var(--x-paper); color: var(--x-coral); }
.m-before-after .m-before-after__file { font-family: var(--x-font-ui); overflow-wrap: anywhere; }
.m-before-after__who { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px dashed var(--x-muted); border-radius: 14px; }
.m-before-after__face svg { width: 46px; height: 46px; }
.m-before-after__face *,
.m-before-after__retired svg * { vector-effect: non-scaling-stroke; }
.m-before-after__who small { font-style: italic; }
.m-before-after__time { flex: none; display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 3px 8px; border: 1px solid var(--x-line); border-radius: 999px; font: 600 12px/1.2 var(--x-font-ui); color: var(--x-muted); }
.m-before-after__time svg { width: 12px; height: 12px; stroke-width: 2.4; }
/* after: channels > CRM > automation > Zalo alert + morning report, on a cobalt spine */
.m-before-after__chips { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.m-before-after__chip { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 8px 4px 4px; overflow-wrap: anywhere; }
.m-before-after__flow { position: relative; width: 0; height: 26px; margin-left: 19px; border-left: 1.5px dashed var(--x-cobalt); }
.m-before-after__flow::before,
.m-before-after__flow::after { content: ""; position: absolute; left: -4.75px; width: 7px; height: 7px; }
.m-before-after__flow::before { bottom: 1px; border: solid var(--x-cobalt); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.m-before-after__flow::after { top: -3px; border-radius: 50%; background: var(--x-cobalt); opacity: 0; }
.m-before-after__crm { padding: 8px 12px 6px; font: 500 12px/1.3 var(--x-font-ui); color: var(--x-muted); }
.m-before-after__crm-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; padding-bottom: 7px; margin-bottom: 3px; border-bottom: 1px solid var(--x-line); }
.m-before-after .m-before-after__crm-h b { font: 700 13px/1.2 var(--x-font-ui); color: var(--x-ink); }
.m-before-after__stage { --c: var(--x-primary); display: flex; align-items: center; gap: 8px; padding: 5px 0; color: var(--x-ink); }
.m-before-after__stage--c { --c: var(--x-cobalt); }
.m-before-after__stage--o { --c: var(--x-coral); }
.m-before-after__stage--m { --c: var(--x-mint); }
.m-before-after__sn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; font-weight: 600; }
.m-before-after__sn::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.m-before-after__cards { flex: none; display: flex; gap: 4px; width: 90px; }
.m-before-after__cards i { position: relative; width: 14px; height: 18px; background: var(--x-paper-deep); border: 1px solid var(--x-line); border-radius: 3px; box-shadow: inset 0 2px var(--c); }
.m-before-after__cards .is-new::after { content: ""; position: absolute; inset: -4px; border: 1.5px solid var(--x-primary); border-radius: 5px; }
.m-before-after .m-before-after__stage b { flex: none; width: 18px; font-weight: 700; text-align: right; }
.m-before-after__auto { display: flex; align-items: center; gap: 10px; }
.m-before-after__gear { flex: none; display: grid; place-items: center; width: 40px; height: 40px; background: var(--x-cobalt-soft); border: 1.5px solid var(--x-cobalt); border-radius: 50%; color: var(--x-cobalt); }
.m-before-after__gear svg { width: 20px; height: 20px; stroke-width: 2.4; }
.m-before-after__outs { position: relative; display: grid; gap: 12px; padding: 12px 0 0 40px; }
.m-before-after__outs::before { content: ""; position: absolute; left: 19px; top: 0; bottom: 27px; border-left: 1.5px dashed var(--x-cobalt); }
.m-before-after__out { display: flex; align-items: center; gap: 9px; padding: 8px 10px; }
.m-before-after__out::before { content: ""; position: absolute; left: -22.5px; top: 50%; width: 20px; border-top: 1.5px dashed var(--x-cobalt); }
.m-before-after__out .m-before-after__lb { flex: 1; font-family: var(--x-font-ui); }
.m-before-after .m-before-after__out b { font-weight: 700; }
.m-before-after__to { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; font: 500 12px/1.2 var(--x-font-body); color: var(--x-muted); }
.m-before-after__av { display: grid; place-items: center; width: 26px; height: 26px; background: var(--x-paper-deep); border: 1.5px solid var(--x-ink); border-radius: 50%; font: 700 12px/1 var(--x-font-ui); color: var(--x-ink); }
.m-before-after__av--owner { background: var(--x-paper); border-color: var(--x-primary); color: var(--x-deep); }
.m-before-after__retired { display: flex; align-items: center; gap: 10px; margin-top: 16px; font: 500 12px/1.3 var(--x-font-body); color: var(--x-muted); }
.m-before-after__retired svg { flex: none; width: 66px; height: 18px; }
/* ---------- motion: 12 s loop, transform/opacity (+ offset-distance for SVG dots) ---------- */
@supports (offset-path: path("M0 0h1")) {
.m-before-after .ba-dot--s1 { offset-path: path("M108 66H134"); }
.m-before-after .ba-dot--s2 { offset-path: path("M108 130H134"); }
.m-before-after .ba-dot--mid { offset-path: path("M256 162H273"); }
.m-before-after .ba-dot--sale { offset-path: path("M296 140V90a8 8 0 0 1 8-8h41"); }
.m-before-after .ba-dot--owner { offset-path: path("M296 184V234a8 8 0 0 0 8 8h41"); }
.m-before-after.is-on .ba-dot { animation: 12s linear infinite; }
.m-before-after.is-on .ba-dot--s1 { animation-name: ba-dot-s1; }
.m-before-after.is-on .ba-dot--s2 { animation-name: ba-dot-s2; }
.m-before-after.is-on .ba-dot--mid { animation-name: ba-dot-mid; }
.m-before-after.is-on .ba-dot--sale { animation-name: ba-dot-sale; }
.m-before-after.is-on .ba-dot--owner { animation-name: ba-dot-owner; }
}
.m-before-after.is-on .ba-gear,
.m-before-after.is-on .m-before-after__gear svg { animation: ba-spin 12s linear infinite; }
.m-before-after.is-on .ba-hl,
.m-before-after.is-on .is-new::after { animation: ba-hl 12s linear infinite; }
.m-before-after.is-on .ba-pop--sale,
.m-before-after.is-on .m-before-after__out--sale { animation: ba-pop-sale 12s linear infinite; }
.m-before-after.is-on .ba-pop--owner,
.m-before-after.is-on .m-before-after__out--owner { animation: ba-pop-owner 12s linear infinite; }
.m-before-after.is-on .ba-badge-g--sale,
.m-before-after.is-on .m-before-after__out--sale .m-before-after__n { animation: ba-badge-sale 12s linear infinite; }
.m-before-after.is-on .ba-badge-g--owner,
.m-before-after.is-on .m-before-after__out--owner .m-before-after__ok { animation: ba-badge-owner 12s linear infinite; }
.m-before-after.is-on .m-before-after__flow--a::after { animation: ba-mv-a 12s linear infinite; }
.m-before-after.is-on .m-before-after__flow--b::after { animation: ba-mv-a 12s 1.08s linear infinite; }
@keyframes ba-spin { to { transform: rotate(360deg); } }
@keyframes ba-dot-s1 { 0% { offset-distance: 0%; opacity: 0; } 1%, 7% { opacity: 1; } 8%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes ba-dot-s2 { 0%, 50% { offset-distance: 0%; opacity: 0; } 51%, 57% { opacity: 1; } 58%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes ba-dot-mid {
0%, 9% { offset-distance: 0%; opacity: 0; } 10%, 15% { opacity: 1; } 16% { offset-distance: 100%; opacity: 0; }
59% { offset-distance: 0%; opacity: 0; } 60%, 65% { opacity: 1; } 66%, 100% { offset-distance: 100%; opacity: 0; }
}
@keyframes ba-dot-sale {
0%, 17% { offset-distance: 0%; opacity: 0; } 18%, 26% { opacity: 1; } 27% { offset-distance: 100%; opacity: 0; }
67% { offset-distance: 0%; opacity: 0; } 68%, 76% { opacity: 1; } 77%, 100% { offset-distance: 100%; opacity: 0; }
}
@keyframes ba-dot-owner { 0%, 34% { offset-distance: 0%; opacity: 0; } 35%, 43% { opacity: 1; } 44%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes ba-mv-a { 0% { transform: none; opacity: 0; } 1%, 7% { opacity: 1; } 8%, 50% { transform: translateY(22px); opacity: 0; } 50.01% { transform: none; } 51%, 57% { opacity: 1; } 58%, 100% { transform: translateY(22px); opacity: 0; } }
@keyframes ba-hl { 0%, 7% { opacity: 0; } 9%, 20% { opacity: 1; } 26%, 57% { opacity: 0; } 59%, 70% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes ba-pop-sale { 0%, 26%, 31%, 76%, 81%, 100% { transform: none; } 28%, 78% { transform: scale(1.04); } }
@keyframes ba-pop-owner { 0%, 43%, 48%, 100% { transform: none; } 45% { transform: scale(1.04); } }
@keyframes ba-badge-sale { 0%, 26% { opacity: 0; } 28%, 100% { opacity: 1; } }
@keyframes ba-badge-owner { 0%, 43% { opacity: 0; } 45%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.m-before-after.is-on *,
.m-before-after.is-on *::after { animation: none !important; }
}
/* ---------- responsive (container width of the root) ---------- */
@container (max-width: 899px) {
.m-before-after__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.m-before-after__arrow { position: relative; left: auto; top: auto; justify-self: center; margin: -2px 0; transform: rotate(90deg); }
}
@container (max-width: 599px) {
.m-before-after__art { display: none; }
.m-before-after__m { display: flex; }
}
@container (max-width: 400px) {
.m-before-after__grid { padding: 10px; border-radius: 16px; }
.m-before-after__panel { padding: 10px 8px 8px; border-radius: 12px; }
.m-before-after__tag { font-size: 12px; }
.m-before-after__arrow { width: 38px; height: 38px; margin: -1px 0; }
}
/* no container queries: use the viewport */
@supports not (container-type: inline-size) {
@media (max-width: 899px) {
.m-before-after__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.m-before-after__arrow { position: relative; left: auto; top: auto; justify-self: center; margin: -2px 0; transform: rotate(90deg); }
}
@media (max-width: 599px) {
.m-before-after__art { display: none; }
.m-before-after__m { display: flex; }
}
}
/* ---- icons ---- */
/* CROSS duotone icon set — sizing helper.
Pair with sprite.svg:
Icons inherit `color`; one colour renders both layers (stroke + 18 % fill). */
.x-icon {
display: inline-block;
width: var(--x-icon-size, 24px);
height: var(--x-icon-size, 24px);
flex: 0 0 auto;
vertical-align: middle;
color: inherit;
pointer-events: none;
}
/* Sizes */
.x-icon--sm { --x-icon-size: 20px; }
.x-icon--md { --x-icon-size: 32px; }
.x-icon--lg { --x-icon-size: 48px; }
.x-icon--xl { --x-icon-size: 64px; }
/* Inline with running text or a button label: scales with the font, sits on the baseline. */
.x-icon--text {
--x-icon-size: 1.25em;
vertical-align: -0.3em;
}
/* 48px tinted tile for feature lists. Maroon by default; put a tint modifier ON THE TILE to recolour
both the icon and the 9 % background: */
.x-icon-tile {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 48px;
height: 48px;
border-radius: var(--x-radius-sm, 12px);
color: var(--x-primary);
background: rgba(128, 0, 0, 0.08);
background: color-mix(in srgb, currentColor 9%, transparent);
}
/* Tints (default is the surrounding text colour). Declared after .x-icon-tile so they also recolour a tile. */
.x-icon--primary { color: var(--x-primary); }
.x-icon--ink { color: var(--x-ink); }
.x-icon--muted { color: var(--x-muted); }
.x-icon--cobalt { color: var(--x-cobalt); }
.x-icon--zalo { color: var(--x-zalo); }
.x-icon--mint { color: var(--x-mint); }
.x-icon--coral { color: var(--x-coral); }
/* Sprite layers. The sprite also carries these as presentation attributes, so the icons render
without this file; the classes exist so a theme can retune the duotone balance in one place. */
.ic-a {
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
.ic-b {
fill: currentColor;
stroke: none;
opacity: 0.18;
}