/* Overview, rebuilt (overview.js v27+). Every class here is .ovx-*, so nothing
   in overview.css reaches it except the tokens and the header, which are kept.
   Colours come from the page's --ov-* tokens, which overview.css already
   redefines under .dark, plus the few below that are specific to this page.

   FEW COLOURS (owner, 2026-09-29, after respond.io): grey and black carry the
   page, lime marks the one thing that is ours or chosen, and red is kept for
   a number that is bad - as text, never as a frame or a wash. Icon tiles are
   one quiet grey, links are ink, the replies line is grey beside the lime. */

.ovx {
  --x-fill: #f5f7fa;
  --x-soft: #f9fafb;
  --x-in: #b5cc00;          /* customers' messages: the brand lime, a shade darker to read on white */
  --x-in-fill: rgba(212, 251, 8, .28);
  --x-rep: #8a94a3;         /* our replies: grey beside the customers' lime */
  --x-camp: #c7cdd6;
  --x-good: #12a150;
  --x-bad: #e5484d;
  --x-warn: #626f7f;        /* "late" is said in words, not in amber */
  --x-heat0: #f2f4f7;
  --x-heat: 181, 204, 0;
  --x-label: #475467;
}
.dark .ovx {
  --x-fill: #262a30;
  --x-soft: #20242a;
  --x-in: #d4fb08;
  --x-in-fill: rgba(212, 251, 8, .16);
  --x-rep: #9aa3af;
  --x-camp: #4a515b;
  --x-good: #3ecf7a;
  --x-bad: #ff6b6f;
  --x-warn: #9aa3af;
  --x-heat0: #22262c;
  --x-heat: 212, 251, 8;
  --x-label: #b3bac4;
}

.ovx { overflow: visible !important; }
.ovx [hidden] { display: none !important; }

/* ---------- header (the old one, kept; a touch of RTL) ---------- */
.ovx-ar .ov-date span:last-child { margin-left: 0; margin-right: auto; }
.ovx-ar .ov-date-menu { right: auto; left: 0; }
.ovx-ar .ov-date-menu button { text-align: right; }
.ovx-ar .ov-bell span { right: auto; left: -4px; }
.ovx-busy .ovx-kpis, .ovx-busy .ovx-row { opacity: .55; transition: opacity .15s; pointer-events: none; }

/* ---------- KPI cards ---------- */
.ovx-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0 20px;
}
.ovx-kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 126px;
  padding: 16px 16px 14px;
  border: 1px solid var(--ov-line);
  border-radius: var(--ov-radius);
  background: var(--ov-card);
  box-shadow: var(--ov-shadow);
  color: var(--ov-ink);
  text-decoration: none;
}
.ovx-kpi-link { cursor: pointer; transition: border-color .15s cubic-bezier(.4, 0, .2, 1); }
.ovx-kpi-link:hover { border-color: var(--ov-accent-strong); }
.ovx-kpi.is-hot { border-color: var(--ov-line); }   /* the red is in the words under the number */
.ovx-kpi-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.ovx-kpi-label { flex: 1; min-width: 0; color: var(--x-label); font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.ovx-kpi strong { display: flex; align-items: baseline; gap: 4px; font-size: 26px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ovx-kpi strong span { font-size: 15px; font-weight: 600; color: var(--ov-muted); }
.ovx-kpi strong em { margin-inline-start: auto; font-style: normal; font-size: 13px; font-weight: 700; color: var(--ov-muted); }
.ovx-kpi small { display: block; margin-top: auto; padding-top: 8px; color: var(--ov-muted); font-size: 11.5px; line-height: 1.35; }
.ovx-kpi small.is-up { color: var(--x-good); }
.ovx-kpi small.is-down { color: var(--x-bad); }
.ovx-ic {
  flex: none;
  width: 38px; height: 38px;
  display: grid !important; place-items: center;
  border-radius: 8px;
  font-size: 17px; line-height: 1;
}
.ovx-ic::before { display: block; line-height: 1; }
.ovx-ic { background: #f2f2f3; color: #55606c; }
.dark .ovx-ic { background: rgba(255, 255, 255, .06); color: #b3bac4; }
.ovx-meter { height: 5px; margin-top: 10px; border-radius: 5px; background: var(--x-fill); overflow: hidden; }
.ovx-meter i { display: block; height: 100%; width: 0; border-radius: 5px; background: var(--x-good); transition: width .4s ease; }
.ovx-meter i.mid { background: var(--x-warn); }
.ovx-meter i.low { background: var(--x-bad); }
.ovx-kpi .crm-tip { vertical-align: -2px; }

/* ---------- cards ---------- */
.ovx-row { display: grid; gap: 20px; margin-top: 20px; }
.ovx-row-a { grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); margin-top: 0; }
.ovx-row-b { grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); align-items: start; }
.ovx-col { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
/* The list is as tall as the chart beside it and scrolls, instead of pushing
   the row down and leaving the chart card half empty. */
.ovx-row-a > .ovx-attn-card { contain: size; }
.ovx-attn { overflow-y: auto; scrollbar-width: thin; }
.ovx-card {
  min-width: 0;
  display: flex; flex-direction: column;
  border: 1px solid var(--ov-line);
  border-radius: var(--ov-radius);
  background: var(--ov-card);
  box-shadow: var(--ov-shadow);
  color: var(--ov-ink);
}
.ovx-head { min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 18px; }
.ovx-head h2 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.ovx-head > a { margin-inline-start: auto; color: var(--ov-ink); font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ovx-head > a:hover { text-decoration: underline; }
.ovx-head-note { margin-inline-start: auto; color: var(--ov-muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.ovx-count { font-style: normal; min-width: 22px; height: 22px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: 8px; background: var(--x-fill); color: var(--ov-ink); font-size: 12px; font-weight: 700; }
.ovx-count:empty { display: none; }

.ovx-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 140px; padding: 18px; text-align: center; color: var(--ov-muted); font-size: 12.5px; }
.ovx-empty i { font-size: 22px; color: var(--x-good); line-height: 1; }
.ovx-empty b { color: var(--ov-ink); font-size: 13px; }
.ovx-skel { height: 200px; margin: 0 18px 18px; border-radius: 8px; }
.ovx-skel-list { display: grid; gap: 14px; padding: 4px 18px 18px; }
.ovx-skel-row { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.ovx-skel-row > div { flex: 1; display: grid; gap: 7px; min-width: 0; }
@keyframes ovx-shimmer { to { background-position: -200% 0; } }

/* ---------- chart ---------- */
.ovx-legend { margin-inline-start: auto; display: flex; gap: 14px; flex-wrap: wrap; }
.ovx-lg { display: inline-flex; align-items: center; gap: 6px; color: var(--x-label); font-size: 12px; font-weight: 600; }
.ovx-lg::before { content: ""; width: 14px; height: 3px; border-radius: 2px; }
.ovx-lg-in::before { background: var(--x-in); }
.ovx-lg-rep::before { background: var(--x-rep); }
.ovx-chart { position: relative; padding: 0 8px 0 4px; direction: ltr; min-height: 230px; }
.ovx-chart svg { display: block; max-width: 100%; overflow: visible; }
.ovx-chart .grid line { stroke: var(--ov-line); stroke-width: 1; stroke-dasharray: 3 4; }
.ovx-chart text { fill: var(--ov-muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.ovx-chart .area { fill: url(#ovx-fill); }
.ovx-chart .s1 { stop-color: var(--x-in); stop-opacity: .28; }
.ovx-chart .s2 { stop-color: var(--x-in); stop-opacity: 0; }
.ovx-chart .l-in, .ovx-chart .l-rep { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ovx-chart .l-in { stroke: var(--x-in); }
.ovx-chart .l-rep { stroke: var(--x-rep); stroke-dasharray: 0; }
.ovx-chart .cursor { stroke: var(--ov-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.ovx-chart .dot-in { fill: var(--ov-card); stroke: var(--x-in); stroke-width: 2.5; }
.ovx-chart .dot-rep { fill: var(--ov-card); stroke: var(--x-rep); stroke-width: 2.5; }
.ovx-chart .hit { fill: transparent; cursor: crosshair; }
.ovx-chart-empty { position: absolute; inset: 40% 0 auto; margin: 0; text-align: center; color: var(--ov-muted); font-size: 12.5px; pointer-events: none; }

.ovx-camp-strip { margin: 4px 18px 16px; padding: 10px 12px 10px; border-radius: 8px; background: var(--x-soft); border: 1px solid var(--ov-line); }
.ovx-camp-strip-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--x-label); font-weight: 600; }
.ovx-camp-strip-head b { color: var(--ov-ink); font-size: 13px; font-variant-numeric: tabular-nums; }
.ovx-camp-strip-head small { color: var(--ov-muted); font-weight: 500; font-size: 11px; }
.ovx-camp-bars { direction: ltr; height: 34px; margin-top: 8px; display: flex; align-items: flex-end; gap: 2px; }
.ovx-camp-bars span { flex: 1; min-width: 1px; height: var(--h); border-radius: 3px 3px 1px 1px; background: var(--x-camp); transition: background .12s; }
.ovx-camp-bars span:hover { background: var(--ov-muted); }
.ovx-camp-bars p { margin: 0; align-self: center; width: 100%; text-align: center; color: var(--ov-muted); font-size: 11.5px; }

/* ---------- tooltip ---------- */
.ovx-tip { position: fixed; z-index: 90; min-width: 170px; padding: 9px 11px; border-radius: 8px; background: #101828; color: #fff; font-size: 12px; line-height: 1.5; box-shadow: 0 10px 24px rgba(0, 0, 0, .22); pointer-events: none; }
.dark .ovx-tip { background: #f2f4f7; color: #101828; }
.ovx-tip b { display: block; margin-bottom: 4px; font-size: 12px; }
.ovx-tip span { display: flex; align-items: center; gap: 7px; }
.ovx-tip em { margin-inline-start: auto; padding-inline-start: 14px; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.ovx-tip i { width: 8px; height: 8px; border-radius: 50%; }
/* The comments mark on a waiting row. Violet #8b5cf6 is not a new colour: it
   is what the conversation list's Comment chip and the channel bar's comments
   tab are already drawn in, so the three agree. Held at a tint with the violet
   as text rather than filled, because it sits inside the small grey line and a
   solid block there would outweigh the customer's name above it. */
.ovx-tagc {
  display: inline-block;
  margin: 0 2px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(139, 92, 246, .12);
  color: #6d3ee0;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
  vertical-align: baseline;
}

.dark .ovx-tagc {
  background: rgba(139, 92, 246, .20);
  color: #c4b1ff;
}

.ovx-tip i.in { background: #d4fb08; }
.ovx-tip i.rep { background: #8a94a3; }
.ovx-tip i.camp { background: #98a2b3; }
.dark .ovx-tip i.in { background: #9fb800; }
.dark .ovx-tip i.rep { background: #9aa3af; }
.ovx-tip hr { margin: 7px 0 6px; border: 0; border-top: 1px solid rgba(255, 255, 255, .16); }
.dark .ovx-tip hr { border-top-color: rgba(16, 24, 40, .14); }
.ovx-tip em.ovx-tip-bad { color: #ff8a8d; }
.ovx-tip em.ovx-tip-ok { color: #6ee7a0; }
.dark .ovx-tip em.ovx-tip-bad { color: #d92d20; }
.dark .ovx-tip em.ovx-tip-ok { color: #12a150; }
.ovx-tip .ovx-tip-muted { opacity: .7; }
.ovx-tip .ovx-tip-h { display: block; margin: 2px 0 2px; opacity: .6; font-size: 10.5px; font-weight: 700; }
.ovx-ar .ovx-tip .ovx-tip-h { text-transform: none; letter-spacing: 0; }
.ovx-tip .ovx-tip-pct { font-size: 11px; font-weight: 600; opacity: .85; }

/* ---------- needs a reply ---------- */
.ovx-attn { flex: 1; display: flex; flex-direction: column; padding: 0 10px 10px; min-height: 0; }
.ovx-attn-item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 9px 8px; border-radius: 8px; color: inherit; text-decoration: none; }
.ovx-attn-item + .ovx-attn-item { border-top: 1px solid var(--ov-line); border-radius: 0 0 10px 10px; }
.ovx-attn-item:hover { background: var(--x-fill); border-radius: 8px; }
.ovx-attn-copy { min-width: 0; }
.ovx-attn-copy strong, .ovx-attn-copy > span, .ovx-attn-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ovx-attn-copy strong { font-size: 13px; }
.ovx-attn-copy > span { margin-top: 2px; color: var(--x-label); font-size: 12px; }
.ovx-attn-copy small { margin-top: 3px; color: var(--ov-muted); font-size: 11px; }
.ovx-who.is-none { color: var(--x-warn); font-weight: 600; }
.ovx-wait { padding: 3px 8px; border-radius: 8px; background: var(--x-fill); color: var(--x-label); font-size: 11.5px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ovx-wait.warm { background: var(--x-fill); color: var(--ov-ink); }
.ovx-wait.hot { background: var(--x-fill); color: var(--x-bad); }
.ovx-more { margin-top: auto; padding: 10px 8px 4px; color: var(--ov-ink); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.dark .ovx-more { color: var(--ov-accent); }
.ovx-av { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--x-fill); color: var(--x-label); font-size: 12px; font-weight: 700; overflow: hidden; }
.ovx-av img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- campaigns ---------- */
.ovx-camps { padding: 0 18px 16px; }
.ovx-camp-cols, .ovx-camp { display: grid; grid-template-columns: minmax(0, 1fr) repeat(5, 70px); column-gap: 8px; align-items: center; }
.ovx-camp-cols { padding-bottom: 6px; color: var(--ov-muted); font-size: 11px; font-weight: 600; }
.ovx-camp-cols span:not(:first-child), .ovx-camp .n { text-align: end; }
.ovx-camp { padding: 11px 0 10px; border-top: 1px solid var(--ov-line); row-gap: 8px; }
.ovx-camp-name { min-width: 0; }
.ovx-camp-name strong { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ovx-camp-name small { display: block; margin-top: 3px; color: var(--ov-muted); font-size: 11px; }
.ovx-camp .n { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ovx-camp .n small { display: block; margin-top: 1px; color: var(--ov-muted); font-size: 10.5px; font-weight: 500; }
.ovx-camp .n.rep { color: var(--x-rep); }
.ovx-camp .n.bad { color: var(--x-bad); }
.ovx-state { font-style: normal; font-weight: 700; }
.ovx-state.done { color: var(--x-good); }
.ovx-state.paused { color: var(--x-warn); }
.ovx-state.live { color: var(--x-rep); }
.ovx-state.err { color: var(--x-bad); }
.ovx-state.sched { color: var(--x-label); }
.ovx-stack { grid-column: 1 / -1; display: flex; gap: 2px; height: 6px; border-radius: 4px; overflow: hidden; background: var(--x-fill); }
.ovx-stack i, .ovx-camp-key i { display: block; min-width: 0; }
.ovx-stack i[style="flex:0"] { display: none; }
.ovx-stack .deliv, .ovx-camp-key .deliv { background: var(--x-in); }
.ovx-stack .pend, .ovx-camp-key .pend { background: var(--x-camp); }
.ovx-stack .fail, .ovx-camp-key .fail { background: var(--x-bad); }
.ovx-stack .read, .ovx-camp-key .read { background: var(--x-good); }
.ovx-camp-key { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-top: 10px; border-top: 1px solid var(--ov-line); color: var(--ov-muted); font-size: 11px; }
.ovx-camp-key span { display: inline-flex; align-items: center; gap: 5px; }
.ovx-camp-key i { width: 9px; height: 9px; border-radius: 3px; }
.ovx-camp-note { margin-inline-start: auto; }

/* ---------- team ---------- */
.ovx-team { padding: 0 18px 14px; }
.ovx-team-cols, .ovx-mate { display: grid; grid-template-columns: minmax(0, 1fr) 64px 64px 74px; column-gap: 8px; align-items: center; }
.ovx-team-cols { padding-bottom: 6px; color: var(--ov-muted); font-size: 11px; font-weight: 600; }
.ovx-team-cols span:not(:first-child), .ovx-mate .n { text-align: end; }
.ovx-mate { padding: 9px 0; border-top: 1px solid var(--ov-line); }
.ovx-mate-who { min-width: 0; display: flex; align-items: center; gap: 10px; }
.ovx-mate-who > span:last-child { min-width: 0; }
.ovx-mate-who strong, .ovx-mate-who small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ovx-mate-who strong { font-size: 13px; }
.ovx-mate-who small { margin-top: 2px; color: var(--ov-muted); font-size: 11px; }
.ovx-mate .ovx-av { width: 32px; height: 32px; font-size: 11px; }
/* The dot sits on the avatar's bottom corner, anchored to the avatar itself
   rather than to the row, where it floated beside the initials. */
.ovx-av-wrap { position: relative; flex: none; display: inline-flex; }
.ovx-dot { position: absolute; bottom: -1px; inset-inline-end: -1px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--ov-card); background: #98a2b3; box-sizing: border-box; }
.ovx-dot.online { background: var(--x-good); }
.ovx-dot.busy { background: var(--x-warn); }
.ovx-mate .n { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ovx-mate .n small { display: block; margin-top: 1px; color: var(--ov-muted); font-size: 10.5px; font-weight: 500; }
.ovx-mate .n small.bad { color: var(--x-bad); font-weight: 600; }
.ovx-team-more { margin: 8px 0 0; color: var(--ov-muted); font-size: 11.5px; }

/* ---------- busiest hours ---------- */
.ovx-hours { padding: 0 18px 16px; }
.ovx-hgrid { display: grid; gap: 3px; }
.ovx-hrow { display: grid; grid-template-columns: 44px repeat(24, minmax(0, 1fr)); gap: 3px; align-items: center; }
.ovx-hhead span { color: var(--ov-muted); font-size: 10px; white-space: nowrap; overflow: visible; unicode-bidi: isolate; }
.ovx-ar .ovx-hhead span { direction: rtl; text-align: left; }
.ovx-hday { color: var(--x-label); font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ovx-hrow i, .ovx-hkey i { display: block; height: 20px; border-radius: 4px; background: var(--x-heat0); }
.ovx-hrow i:hover { outline: 2px solid var(--ov-ink); outline-offset: -1px; }
.ovx-hrow i.l1, .ovx-hkey i.l1 { background: rgba(var(--x-heat), .2); }
.ovx-hrow i.l2, .ovx-hkey i.l2 { background: rgba(var(--x-heat), .38); }
.ovx-hrow i.l3, .ovx-hkey i.l3 { background: rgba(var(--x-heat), .58); }
.ovx-hrow i.l4, .ovx-hkey i.l4 { background: rgba(var(--x-heat), .8); }
.ovx-hrow i.l5, .ovx-hkey i.l5 { background: rgb(var(--x-heat)); }
.ovx-hkey { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 10px; color: var(--ov-muted); font-size: 10.5px; }
.ovx-hkey i { width: 14px; height: 10px; border-radius: 3px; }
.ovx-hkey span { margin: 0 4px; }
.ovx-gap { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 9px 11px; border-radius: 8px; background: var(--x-fill); color: var(--ov-ink); font-size: 12px; line-height: 1.5; }
.ovx-gap i { color: var(--x-warn); line-height: 1; margin-top: 3px; }
.ovx-gap b { font-variant-numeric: tabular-nums; }

/* ---------- channels ---------- */
.ovx-chs { display: grid; gap: 8px; padding: 0 14px 14px; }
.ovx-ch { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "ic copy n" "ic pill pill"; align-items: center; gap: 4px 11px; padding: 11px 12px; border: 1px solid var(--ov-line); border-radius: 8px; color: inherit; text-decoration: none; transition: border-color .15s; }
.ovx-ch:hover { border-color: var(--ov-accent-strong); }
.ovx-ch-ic { grid-area: ic; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; background: var(--x-fill); font-size: 17px; color: var(--x-label); }
.ovx-ch-ic img { width: 30px; height: 30px; object-fit: contain; }
.ovx-ch-ic i { line-height: 1; }
.ovx-ch-copy { grid-area: copy; min-width: 0; }
.ovx-ch-copy strong, .ovx-ch-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ovx-ch-copy strong { font-size: 13px; }
.ovx-ch-copy small { margin-top: 2px; color: var(--ov-muted); font-size: 11px; }
.ovx-ch-n { grid-area: n; text-align: end; }
.ovx-ch-n b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.ovx-ch-n small { color: var(--ov-muted); font-size: 10.5px; }
.ovx-pill { grid-area: pill; justify-self: start; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 20px; background: var(--x-fill); color: var(--x-label); font-size: 11px; font-weight: 700; font-style: normal; }
.ovx-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ovx-pill.ok { background: var(--x-fill); color: var(--x-good); }
.ovx-pill.warn { background: var(--x-fill); color: var(--ov-ink); }
.ovx-pill.bad { background: var(--x-fill); color: var(--x-bad); }

/* ---------- widths ---------- */
@media (max-width: 1400px) {
  .ovx-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .ovx-row-a, .ovx-row-b { grid-template-columns: minmax(0, 1fr); }
  .ovx-row-a > .ovx-attn-card { contain: none; }
  .ovx-attn { max-height: 520px; }
}
@media (max-width: 820px) {
  .ovx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ovx-camp-cols, .ovx-camp { grid-template-columns: minmax(0, 1fr) repeat(5, 54px); column-gap: 4px; }
  .ovx-hrow { grid-template-columns: 34px repeat(24, minmax(0, 1fr)); gap: 2px; }
  .ovx-hhead span { font-size: 8.5px; }
  .ovx-hrow i { height: 16px; border-radius: 3px; }
}
@media (max-width: 560px) {
  .ovx-kpis { grid-template-columns: minmax(0, 1fr); }
  .ovx-kpi { min-height: 108px; }
  .ovx-head { padding: 0 14px; }
  .ovx-legend { gap: 8px; }
  .ovx-camps, .ovx-team, .ovx-hours { padding-inline: 14px; }
  .ovx-camp-cols, .ovx-camp { grid-template-columns: minmax(0, 1fr) repeat(5, 44px); }
  .ovx-camp .n { font-size: 12px; }
  .ovx-team-cols, .ovx-mate { grid-template-columns: minmax(0, 1fr) 52px 52px 60px; }
  .ovx-hhead span { visibility: hidden; }
  .ovx-hhead span:nth-child(7n+2) { visibility: visible; }
}

/* ---------- channels: one line each (2026-09-19) ----------
   Twelve boxes made this column twice the height of the page beside it. A row
   is icon · name and kind · messages · status; the quiet ones fold away. */
.ovx-chs { gap: 0; padding: 0 14px 12px; }
.ovx-chr-head, .ovx-chr { display: grid; grid-template-columns: minmax(0, 1fr) 64px 104px; align-items: center; column-gap: 10px; }
.ovx-chr-head { padding: 0 6px 6px; color: var(--ov-muted); font-size: 11px; font-weight: 600; }
.ovx-chr-head span:nth-child(2) { text-align: end; }
.ovx-chr { grid-template-columns: 34px minmax(0, 1fr) 64px 104px; padding: 8px 6px; border-top: 1px solid var(--ov-line); color: inherit; text-decoration: none; border-radius: 8px; }
.ovx-chr-head { grid-template-columns: minmax(0, 1fr) 64px 104px; padding-inline-start: 50px; }
.ovx-chr:hover { background: var(--x-fill); }
.ovx-chr-ic { position: relative; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: var(--x-fill); font-size: 16px; line-height: 1; color: var(--x-label); }
.ovx-chr-ic i { display: inline-flex; line-height: 1; }
.ovx-chr-ic svg { width: 15px; height: 15px; }
.ovx-chr-ic.is-whatsapp { background: var(--x-fill); color: #1fa855; }
.ovx-chr-ic.is-messenger { background: var(--x-fill); color: #0a7cff; }
.ovx-chr-ic.is-facebook { background: var(--x-fill); color: #1877f2; }
.ovx-chr-ic.is-instagram { background: var(--x-fill); color: #d62976; }
.ovx-chr-ic.is-youtube { background: var(--x-fill); color: #e62117; }
.ovx-chr-ic.is-tiktok { background: var(--x-fill); color: #111; }
.ovx-chr-ic.is-email { background: var(--x-fill); color: #475467; }
.dark .ovx-chr-ic.is-whatsapp { background: var(--x-fill); color: #4ade80; }
.dark .ovx-chr-ic.is-messenger { background: var(--x-fill); color: #60a5fa; }
.dark .ovx-chr-ic.is-facebook { background: var(--x-fill); color: #6ea8fe; }
.dark .ovx-chr-ic.is-instagram { background: var(--x-fill); color: #f472b6; }
.dark .ovx-chr-ic.is-youtube { background: var(--x-fill); color: #f87171; }
.dark .ovx-chr-ic.is-tiktok { background: var(--x-fill); color: #f1f5f9; }
.dark .ovx-chr-ic.is-email { background: var(--x-fill); color: #cbd5e1; }
.ovx-chr-badge { position: absolute; bottom: -3px; inset-inline-end: -3px; width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; background: var(--ov-card); color: var(--x-label); font-size: 8px; box-shadow: 0 0 0 1.5px var(--ov-card); border: 1px solid var(--ov-line); }
.ovx-chr-copy { min-width: 0; }
.ovx-chr-copy strong, .ovx-chr-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ovx-chr-copy strong { font-size: 13px; }
.ovx-chr-copy small { margin-top: 1px; color: var(--ov-muted); font-size: 11px; }
.ovx-chr-n { text-align: end; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ovx-chr-n.is-zero { color: var(--ov-muted); font-weight: 500; }
.ovx-chr-st { justify-self: end; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 20px; background: var(--x-fill); color: var(--x-label); font-size: 11px; font-weight: 700; white-space: nowrap; }
.ovx-chr-st i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ovx-chr-st.ok { background: var(--x-fill); color: var(--x-good); }
.ovx-chr-st.warn { background: var(--x-fill); color: var(--ov-ink); }
.ovx-chr-st.bad { background: var(--x-fill); color: var(--x-bad); }
.ovx .ovx-chr-more { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 4px; padding: 9px; border: 1px dashed var(--ov-line); border-radius: 8px; background: none; color: var(--ov-muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.ovx .ovx-chr-more:hover { color: var(--ov-ink); border-color: var(--ov-muted); }
.ovx-count.is-neutral { background: var(--x-fill); color: var(--x-label); }

/* ---------- header icons (font icons, so both hosts draw them) ---------- */
.ovx .ov-search i, .ovx .ov-date i, .ovx .ov-bell i { display: inline-flex; line-height: 1; color: #667085; }
.ovx .ov-search i { font-size: 15px; }
.ovx .ov-bell { text-decoration: none; }
.ovx .ov-bell i { font-size: 17px; }
.ovx .ov-date i { font-size: 15px; }

/* ---------- built in: mounted inside the platform by home-screen.js ----------
   An overlay on the dashboard app's own <main>, the way the other built-in
   screens sit (ads report, missed): the frame it replaces is blanked and
   hidden underneath. overview.css reserves 258px for a sidebar that only the
   standalone page has; here the platform's own sidebar is outside <main>. */
[data-crm-home-host] { position: relative; }
.ovx-spa { position: absolute; inset: 0; z-index: 60; overflow: auto; background: var(--ov-bg); color: var(--ov-ink); font-family: inherit; font-size: 14px; }
.ovx-spa .ov-main { margin: 0 !important; width: auto !important; min-height: 0; padding: 22px 26px 36px; overflow: visible; }
.ovx-spa .ov-header { min-height: 0; }
.ovx-spa input[type="search"] { height: auto; margin: 0; padding: 0; border: 0; box-shadow: none; background: transparent; font-size: 13px; }
.ovx-spa .ov-date, .ovx-spa .ov-date-menu button { font-size: 13px; }
.ovx-spa .ov-date-menu button { width: 100%; }

/* The channel list scrolls inside its card: about five rows show, the rest
   are a scroll away, busy channels first. */
.ovx-chr-list { max-height: 308px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; margin-inline-end: -6px; padding-inline-end: 6px; }
.ovx-chr-list .ovx-chr:first-child { border-top: 1px solid var(--ov-line); }