/* ============================================================
   POLARIS — hero product window (Linear-style, flat matte)
   Scoped palette + base plane. Replaces the old glass mockup.
   ============================================================ */

.lin-stage {
  --l-bg: #121314;
  --l-frame: #111213;
  --l-surface: #141516;
  --l-surface-2: #1c1d1f;
  --l-elev: #1f2123;
  --l-text: #D0D6E0;
  --l-text-2: #D0D6E0;
  --l-text-3: #8A8F98;
  --l-text-4: #8A8F98;
  --l-line: rgba(255,255,255,0.07);
  --l-line-2: rgba(255,255,255,0.045);
  --l-indigo: #5E6AD2;
  --l-green: #4cb782;
  --l-amber: #d9a23a;

  position: relative;
  padding: 0 24px 96px;
  font-family: var(--font);
  isolation: isolate;
}
/* pre-baked contact shadow (window-shadow.png, alpha-only "bowtie").
   Linear geometry: the dense "waist" hides BEHIND the window (~75px above its
   bottom edge); only the fading tail (~120px) shows below it, and the wings
   show at the sides (image is ~290px wider than the window per side). */
.lin-stage::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; bottom: -25px; transform: translateX(-50%);
  /* fixed design width: the bowtie waist must stay hidden behind the 1338px window.
     viewport-relative width let the waist slip out as grey bands below ~1900px;
     .hero overflow-x:clip crops the wings on narrow screens instead. */
  width: 1920px;
  aspect-ratio: 7584 / 3520;
  background: url("assets/fx/window-shadow.png") center bottom / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
  animation: pol-fade-85 1.5s cubic-bezier(.455,.03,.515,.955) 1.3s both; /* enters with the floor/light */
}
@media (max-width: 1100px) { .lin-stage::after { display: none; } }

.lin-frame {
  position: relative; z-index: 1;
  /* Linear reference: 1320px inner body + 8px frame padding + 1px borders.
     Real pixel size (no transform/zoom) so every hairline stays crisp;
     breaks out of the 1320px page container, capped at 94vw. */
  width: min(1338px, 94vw);
  margin-left: calc(50% - min(1338px, 94vw) / 2);
}
.lin-app {
  position: relative; z-index: 1;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: #101112;
  overflow: hidden;
  /* Linear's frameBackground: the lit panel surface fades in at 1.3s. Before that
     the shell is transparent against the page, so only the shine beam reads early. */
  animation: app-skin 0.5s cubic-bezier(.455,.03,.515,.955) 1.3s both;
}
@keyframes app-skin {
  from { background-color: rgba(16,17,18,0); border-color: rgba(255,255,255,0); }
  to   { background-color: #101112; border-color: rgba(255,255,255,0.08); }
}
/* corner glow: 400px circle centered exactly on the top-left corner, clipped by overflow */
.lin-app::before {
  content: ""; position: absolute; z-index: 6; pointer-events: none;
  width: 400px; height: 400px; top: 0; left: 0; transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,0.04) 0, rgba(255,255,255,0) 90%);
  animation: pol-fade 1.5s cubic-bezier(.455,.03,.515,.955) 1.3s both; /* enters with the panel */
}
/* in-window film grain removed (2026-06-12): the overlay blend lifted every pixel
   +3..+5 per channel (#101112→#131415, #121314→#161718). Linear keeps grain on the
   background floor only (frame-background-grain) — ours lives in .hero::before. */
/* masked border shine: light hairline near the top-left corner.
   On load the beam sweeps along the frame edge (Linear 1:1): mask travels
   (0%,25%) → (3%,4%) → (8%,0%) over 0.5s while fading in. @property registration
   lets the percentages interpolate; without support it just lands on the end state. */
@property --shine-x { syntax: "<percentage>"; inherits: false; initial-value: 8%; }
@property --shine-y { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@keyframes shine-sweep {
  0%   { --shine-x: 0%; --shine-y: 25%; opacity: 0; }
  50%  { --shine-x: 3%; --shine-y: 4%;  opacity: 1; }
  100% { --shine-x: 8%; --shine-y: 0%;  opacity: 1; }
}
.lin-shine {
  position: absolute; inset: 0; z-index: 9; pointer-events: none;
  border: 1px solid #323334; border-radius: 12px;
  -webkit-mask-image: radial-gradient(ellipse 200px 200px at var(--shine-x) var(--shine-y), rgba(0,0,0,1) 0, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 70%);
  mask-image: radial-gradient(ellipse 200px 200px at var(--shine-x) var(--shine-y), rgba(0,0,0,1) 0, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 70%);
  animation: shine-sweep 0.5s cubic-bezier(.455,.03,.515,.955) 0.4s both;
}
.lin-body { position: relative; z-index: 1; }

/* wide-screen breakout: fixed 1320px design scaled with CSS zoom (layout-time
   scaling — 1px borders re-rasterize crisply instead of blurring like transform) */
.lin-zoom { display: flex; justify-content: center; }
.lin-zoom-in { flex: none; }

.lin-body { display: flex; height: 656px; padding: 8px; }

/* ---------------- sidebar ---------------- */
.lin-sb {
  width: 250px; flex: none; padding: 7px 9px 7px 7px;
  background: transparent;
  display: flex; flex-direction: column; gap: 1px;
  overflow: hidden;
}
.lin-sb-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 12px; }
.lin-ws { display: flex; align-items: center; gap: 7px; color: var(--l-text); }
.lin-ws .name { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.lin-ws svg { color: var(--l-text-3); }
.lin-sb-tools { display: flex; gap: 2px; }
.lin-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; border: 0; background: none; color: var(--l-text-3); cursor: default; }
.lin-iconbtn:hover { background: rgba(255,255,255,0.05); color: var(--l-text-2); }

.lin-nav { display: flex; flex-direction: column; gap: 1px; }
.lin-navitem {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px; border-radius: 6px; border: 0; background: none;
  font-family: var(--font); font-size: 13px; color: var(--l-text-3);
  width: 100%; text-align: left; line-height: 1.3;
}
.lin-navitem .ni-ico { display: inline-flex; color: var(--l-text-3); }
.lin-navitem .ni-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lin-navitem .ni-count { font-size: 11px; color: var(--l-text-4); font-variant-numeric: tabular-nums; }
.lin-navitem.clickable { cursor: pointer; transition: background .14s ease, color .14s ease; }
.lin-navitem.clickable:hover { background: rgba(255,255,255,0.045); color: var(--l-text-2); }
.lin-navitem.clickable:hover .ni-ico { color: var(--l-text-2); }
.lin-navitem.active { background: rgba(255,255,255,0.08); color: var(--l-text); }
.lin-navitem.active .ni-ico { color: var(--l-text); }
.lin-navitem .ni-fav { width: 7px; height: 7px; border-radius: 2px; background: var(--l-text-4); margin: 0 1px; flex: none; }

.lin-group { font-size: 11px; color: var(--l-text-4); padding: 14px 8px 5px; letter-spacing: 0.01em; }

/* ---------------- content ---------------- */
/* ---- inset 'view' panel (Linear-style): crisp 1px hairline, no glow ---- */
.lin-content {
  flex: 1; min-width: 0; display: flex; position: relative;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.08);
  background: #121314;
  overflow: hidden;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
}
.lin-content > * { position: relative; z-index: 1; }
/* inner-window corner glow: soft light on the top-left corner, like the outer frame */
.lin-content::before {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  width: 300px; height: 300px; top: 0; left: 0; transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,0.05) 0, rgba(255,255,255,0) 90%);
}
/* inner-window masked shine: overlay sibling so its 1px line lands exactly on the
   panel's border (not 1px inside it like a clipped ::after would) — keeps it crisp.
   Positioned over .lin-content: body padding 8px + sidebar width 250px = 258px left. */
.lin-vshine {
  position: absolute; z-index: 5; pointer-events: none;
  top: 8px; left: 258px; right: 8px; bottom: 8px;
  border: 1px solid #323334; border-radius: 7px;
  -webkit-mask-image: radial-gradient(ellipse 160px 160px at var(--shine-x) var(--shine-y), rgba(0,0,0,1) 0, rgba(0,0,0,0.55) 32%, rgba(0,0,0,0.18) 52%, rgba(0,0,0,0) 70%);
  mask-image: radial-gradient(ellipse 160px 160px at var(--shine-x) var(--shine-y), rgba(0,0,0,1) 0, rgba(0,0,0,0.55) 32%, rgba(0,0,0,0.18) 52%, rgba(0,0,0,0) 70%);
  animation: shine-sweep 0.5s cubic-bezier(.455,.03,.515,.955) 0.65s both; /* inner shine trails the outer by 0.25s (Linear) */
}
.lin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lin-main.full { border-right: 0; }

.lin-mhead {
  display: flex; align-items: center; justify-content: space-between;
  height: 46px; flex: none; padding: 0 18px; border-bottom: 1px solid var(--l-line);
}
.lin-mhead .mh-l { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500; color: var(--l-text); }
.lin-mhead .mh-l > svg { color: var(--l-text-3); }
.lin-mhead .mh-l > svg.mh-star { color: #f0bf00; }
.lin-mhead .mh-l > svg.mh-star path { fill: #f0bf00; stroke: none; }
.lin-mhead .mh-r { display: flex; align-items: center; gap: 10px; }
.lin-mhead .mh-pos { font-size: 11.5px; color: var(--l-text-3); font-variant-numeric: tabular-nums; }
.lin-mhead .mh-nav { display: flex; color: var(--l-text-4); }
.lin-mhead .mh-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; color: var(--l-text-3); cursor: default; transition: background .14s ease, color .14s ease; }
.lin-mhead .mh-iconbtn:hover { background: rgba(255,255,255,0.06); color: var(--l-text-2); }

.lin-mbody { flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 20px 22px; scrollbar-width: none; }
.lin-mbody::-webkit-scrollbar { width: 0; height: 0; display: none; }
.lin-mbody.nopad { padding: 0; }

/* ---- Campaigns ---- */
.cmp-title { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; color: var(--l-text); margin: 2px 0 0; }
.cmp-sectionlabel { font-size: 13px; font-weight: 600; color: var(--l-text-2); margin: 24px 0 6px; }
.cmp-feed { display: flex; flex-direction: column; }
.feed-item { display: grid; grid-template-columns: 22px 1fr; gap: 11px; padding: 10px 0; border-bottom: 0; position: relative; }
/* vertical connector line linking the activity icons */
.feed-item:not(:last-child)::before { content: ""; position: absolute; left: 10.5px; top: 34px; bottom: -12px; width: 1px; background: rgba(255,255,255,0.14); }
.cmp-feed .feed-av { position: relative; z-index: 1; background-color: #1a1b1e; }
.feed-item:last-child { border-bottom: 0; }
.feed-av { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 600; color: var(--l-text); margin-top: 1px; background: var(--l-elev); border: 1px solid var(--l-line); }
.feed-av.sys { color: var(--l-text-3); }
.feed-body { min-width: 0; }
.feed-line { font-size: 13.5px; color: var(--l-text-3); line-height: 1.5; }
.feed-line b { color: var(--l-text); font-weight: 550; }
.feed-time { font-size: 10.5px; color: var(--l-text-4); margin-left: 7px; font-variant-numeric: tabular-nums; }
.feed-quote { font-size: 13.5px; color: var(--l-text-2); line-height: 1.55; margin-top: 6px; padding-left: 11px; border-left: 2px solid var(--l-line); }
.lin-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--l-text-2); background: rgba(255,255,255,0.05); border: 1px solid var(--l-line); border-radius: 5px; padding: 2px 7px; margin: 0 2px; }
.lin-badge svg { color: var(--l-green); }

/* ---- detail pane ---- */
.lin-detail { width: 250px; flex: none; border-left: 1px solid var(--l-line); padding: 0; background: transparent; }
.dtl-id { display: flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 11px; color: var(--l-text-3); height: 46px; padding: 0 16px; border-bottom: 1px solid var(--l-line); }
.dtl-id svg { color: var(--l-text-4); }
.dtl-id .dtl-acts { margin-left: auto; display: flex; gap: 9px; color: var(--l-text-4); }
/* label column sizes itself to the longest label (i18n-safe), values align via subgrid */
.dtl-rows { display: grid; grid-template-columns: max-content 1fr; column-gap: 10px; align-content: start; padding: 8px 16px 14px; }
.dtl-row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center; padding: 8px 0; font-size: 13.5px; }
.dtl-k { color: var(--l-text-4); }
.dtl-v { color: var(--l-text-2); display: flex; align-items: center; gap: 7px; }
.dtl-v .ch-green { color: var(--l-green); }
.dtl-av { width: 18px; height: 18px; border-radius: 50%; font-size: 8px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; background: var(--l-elev); border: 1px solid var(--l-line); color: var(--l-text); }
.dtl-sep { height: 1px; background: var(--l-line-2); margin: 6px 0; grid-column: 1 / -1; }
.dtl-av.dtl-av-ico svg { color: var(--l-text-3); }

.st-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.st-dot.green { background: var(--l-green); }
.st-dot.amber { background: var(--l-amber); }
.st-dot.gray { background: var(--l-text-4); }

/* favorites get subtle Linear-style color markers (sidebar nav icons stay silver) */
.lin-navitem .ni-fav.green { background: var(--l-green); }
.lin-navitem .ni-fav.amber { background: var(--l-amber); }
.lin-navitem .ni-fav.indigo { background: var(--l-indigo); }
.lin-navitem .ni-fav.teal { background: #4bbfd0; }
/* uniform thin mono system badges in the activity feed */
.feed-av.sys { background: rgba(255,255,255,0.04); border: 1px solid var(--l-line); }
.feed-av.sys svg { color: var(--l-text-3); }
.feed-av-logo .brand { gap: 0; display: inline-flex; }
.feed-av-logo .brand .name { display: none; }
.feed-av-logo .brand svg { width: 14px; height: 14px; }

/* ---- Inbox ---- */
.ibx { display: flex; flex-direction: column; }
.ibx-row { display: grid; grid-template-columns: 8px 30px 1fr auto; align-items: start; gap: 11px; padding: 14px 22px; border-bottom: 1px solid var(--l-line-2); cursor: default; transition: background .12s ease; }
.ibx-row:hover { background: rgba(255,255,255,0.018); }
.ibx-dot { width: 6px; height: 6px; border-radius: 50%; background: transparent; margin-top: 6px; }
.ibx-row.unread .ibx-dot { background: var(--l-indigo); }
/* thread avatar — initials in the Why-Polaris small-circle style (matches .ibx2-ava) */
.ibx-ava { width: 30px; height: 30px; border-radius: 50%; flex: none; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; color: #cdd2da;
  background: radial-gradient(120% 120% at 32% 22%, #212223, #0c0d0e 82%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10); }
.ibx-main { min-width: 0; }
.ibx-top { display: flex; align-items: center; gap: 9px; }
.ibx-who { font-size: 14px; font-weight: 550; color: var(--l-text); }
.ibx-co { font-size: 11.5px; color: var(--l-text-4); }
.ibx-tag { font-size: 10px; padding: 2px 7px; border-radius: 5px; border: 1px solid var(--l-line); color: var(--l-text-3); }
.ibx-tag.wa { color: var(--l-green); border-color: color-mix(in oklab, var(--l-green) 26%, transparent); }
.ibx-msg { font-size: 13.5px; color: var(--l-text-2); margin-top: 4px; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ibx-row.unread .ibx-who { color: var(--l-text); }
.ibx-time { font-size: 11px; color: var(--l-text-4); white-space: nowrap; padding-top: 2px; font-variant-numeric: tabular-nums; }

/* ---- Contacts table ---- */
.tbl { display: flex; flex-direction: column; }
.tbl-head, .tbl-row { display: grid; grid-template-columns: 2fr 1.1fr 1fr 0.7fr 1.2fr 1fr; align-items: center; gap: 12px; padding: 0 22px; }
.tbl-head { height: 36px; border-bottom: 1px solid var(--l-line); font-size: 11px; color: var(--l-text-4); position: sticky; top: 0; background: var(--l-bg); }
.tbl-head .c-num, .tbl-row .c-num { text-align: right; }
.tbl-row { height: 46px; border-bottom: 1px solid var(--l-line-2); transition: background .12s ease; cursor: default; }
.tbl-row:hover { background: rgba(255,255,255,0.018); }
.t-co { font-size: 14px; color: var(--l-text); font-weight: 480; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-mut { font-size: 13.5px; color: var(--l-text-3); }
.t-status { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--l-text-2); }
.t-ch { font-size: 13.5px; color: var(--l-text-3); }

/* ---- shared list column (Campaigns + WhatsApp dashboards) ---- */
.lin-list {
  flex: none; display: flex; flex-direction: column;
  border-right: 1px solid var(--l-line);
  background: transparent;
  position: relative;
}
.lin-list-head { padding: 0 15px; }
.lin-list-body { flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.lin-list-body::-webkit-scrollbar { width: 0; height: 0; display: none; }
.lin-main { border-left: 0; }

.lin-list-head .mh-l { font-size: 12px; }

/* campaign + chat rows share the same shell */
.cl-list { width: 286px; }
.wa-list { width: 290px; }
.cl-camp, .wa-chat {
  width: 100%; text-align: left; border: 0; background: none;
  font-family: var(--font); cursor: default;
  border-bottom: 1px solid var(--l-line-2);
  position: relative; transition: background .12s ease;
}
.cl-camp.clickable, .wa-chat.clickable { cursor: pointer; }
.cl-camp.clickable:hover, .wa-chat.clickable:hover { background: rgba(255,255,255,0.025); }
/* active row: gradient wash + left accent bar */
.cl-camp.active, .wa-chat.active {
  background: linear-gradient(90deg, rgba(202,208,219,0.09), rgba(255,255,255,0.05) 60%);
}
.cl-camp.active::before, .wa-chat.active::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, #cad0db, rgba(202,208,219,0.5));
}

/* --- campaign rows --- */
.cl-camp { display: grid; grid-template-columns: 1fr auto; gap: 11px; align-items: center; padding: 14px 15px; }
.cl-ico { width: 28px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--l-text-3); }
.cl-ico.active, .cl-ico.scheduled, .cl-ico.completed, .cl-ico.pending { color: var(--l-text-3); background: none; }
.cl-mid { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cl-name { font-size: 12px; font-weight: 550; color: var(--l-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-meta { font-size: 11.5px; color: var(--l-text-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-status { font-size: 9.5px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; white-space: nowrap; flex: none; }
.cl-status.active { color: var(--l-green); background: color-mix(in oklab, var(--l-green) 12%, transparent); }
.cl-status.scheduled { color: #e0b301; background: color-mix(in oklab, #e0b301 12%, transparent); }
.cl-status.completed { color: #6c8cf5; background: color-mix(in oklab, #6c8cf5 12%, transparent); }
.cl-status.pending { color: var(--l-text-3); background: rgba(255,255,255,0.05); }

/* --- chat rows --- */
.wa-chat { display: grid; grid-template-columns: 36px 1fr auto; gap: 11px; align-items: start; padding: 13px 15px; }
.wa-chat-ava {
  position: relative; width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--l-text);
  background: linear-gradient(145deg, color-mix(in oklab, var(--l-green) 24%, var(--l-elev)), var(--l-elev));
  border: 1px solid color-mix(in oklab, var(--l-green) 24%, transparent);
}
.wa-chat-ch {
  position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--l-green); color: #0b140f; border: 2px solid #121314;
}
.wa-chat-mid { min-width: 0; display: flex; flex-direction: column; }
.wa-chat-name { font-size: 13.5px; font-weight: 550; color: var(--l-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-chat-co { font-size: 11px; color: var(--l-text-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.wa-chat-prev { font-size: 12.5px; color: var(--l-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 5px; }
.wa-chat.unread .wa-chat-prev { color: var(--l-text-2); }
.wa-chat-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding-top: 1px; }
.wa-chat-time { font-size: 10.5px; color: var(--l-text-4); font-variant-numeric: tabular-nums; }
.wa-chat-badge { min-width: 16px; height: 16px; padding: 0 5px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: #0b140f; background: var(--l-green); }

/* ---- WhatsApp ---- */
.wa-head .mh-l { align-items: center; }
.wa-ava { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: var(--l-text); background: color-mix(in oklab, var(--l-green) 18%, var(--l-elev)); border: 1px solid color-mix(in oklab, var(--l-green) 24%, transparent); }
.wa-id { display: flex; flex-direction: column; gap: 1px; }
.wa-name { font-size: 14px; font-weight: 600; color: var(--l-text); }
.wa-sub { font-size: 10.5px; color: var(--l-text-4); display: flex; align-items: center; gap: 5px; }
.wa-biz { display: inline-flex; align-items: center; gap: 4px; color: var(--l-green); }
.wa-opted { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--l-text-3); }
.wa-main { background: var(--l-bg); }
.wa-body { display: flex; flex-direction: column; gap: 9px; padding: 22px 22px; position: relative; }
.wa-daysep { text-align: center; margin-bottom: 6px; }
.wa-daysep span { font-size: 10px; color: var(--l-text-4); background: rgba(255,255,255,0.04); border-radius: 6px; padding: 3px 9px; }
.wa-bub { max-width: 74%; font-size: 13.5px; line-height: 1.5; padding: 9px 12px; border-radius: 12px; position: relative; }
.wa-bub.them { align-self: flex-start; color: var(--l-text); background: var(--l-surface-2); border: 1px solid var(--l-line); border-bottom-left-radius: 4px; }
.wa-bub.me { align-self: flex-end; color: var(--l-text); background: color-mix(in oklab, var(--l-green) 16%, var(--l-surface-2)); border: 1px solid color-mix(in oklab, var(--l-green) 22%, transparent); border-bottom-right-radius: 4px; }
.wa-tick { font-size: 9px; color: var(--l-green); margin-left: 7px; vertical-align: baseline; }
.wa-input { display: flex; align-items: center; gap: 10px; margin: 4px 16px 16px; padding: 10px 14px; border: 1px solid var(--l-line); border-radius: 10px; background: var(--l-surface); }
.wa-input-ph { flex: 1; font-size: 13.5px; color: var(--l-text-4); }
.wa-send { width: 28px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; color: var(--l-text); background: color-mix(in oklab, var(--l-green) 80%, black); }

/* ---- Analytics dashboard ---- */
.an-range { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--l-text-3); border: 1px solid var(--l-line); border-radius: 7px; padding: 4px 9px; }
.an-range svg { color: var(--l-text-4); }
.an-body { padding: 14px 18px 14px; display: flex; flex-direction: column; gap: 6px; }
/* empty "add a widget" tile — fills the leftover height, dashed, hover-only */
.an-add { flex: 1; min-height: 36px; display: flex; align-items: center; justify-content: center;
  border: 1px dashed rgba(255,255,255,0.10); border-radius: 10px;
  color: var(--l-text-4); font-size: 12.5px; cursor: default;
  transition: background .14s ease, color .14s ease, border-color .14s ease; }
.an-add:hover { background: rgba(255,255,255,0.03); color: var(--l-text-3); border-color: rgba(255,255,255,0.16); }

/* KPI cards */
.an-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.an-kpi { border: 1px solid var(--l-line); border-radius: 10px; padding: 10px 14px 10px; background: linear-gradient(180deg, rgba(255,255,255,0.022), transparent 70%); }
.an-kpi-top { display: flex; align-items: center; gap: 7px; }
.an-kpi-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--l-text-3); }
.an-kpi-ico svg { display: block; }
.an-kpi-label { font-size: 12.5px; color: var(--l-text-2); }
.an-kpi-val { font-size: 25px; font-weight: 600; letter-spacing: -0.02em; color: var(--l-text); margin: 5px 0 4px; font-variant-numeric: tabular-nums; }
.an-kpi-foot { display: flex; align-items: center; gap: 8px; }
.an-delta { display: inline-flex; align-items: center; gap: 1px; font-size: 11.5px; font-weight: 550; font-variant-numeric: tabular-nums; }
.an-delta svg { margin-right: 1px; }
.an-delta.up { color: var(--l-green); }
.an-delta.down { color: #e3674f; }
.an-kpi-sub { font-size: 11px; color: var(--l-text-4); }

/* generic card */
.an-card { border: 1px solid var(--l-line); border-radius: 10px; padding: 14px 18px; background: linear-gradient(180deg, rgba(255,255,255,0.018), transparent 60%); min-width: 0; }
.an-card-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.an-card-title { font-size: 13.5px; font-weight: 600; color: var(--l-text); }
.an-card-meta { font-size: 11px; color: var(--l-text-4); display: inline-flex; align-items: center; gap: 6px; }

.an-row { display: grid; gap: 12px; }
.an-row-charts { grid-template-columns: 1.7fr 1fr; }
.an-row-bottom { grid-template-columns: 1fr 1fr; }

/* area chart */
.an-chart { display: flex; flex-direction: column; }
/* height:0 + flex: the svg's intrinsic viewBox height must not size the grid row
   (the donut card stays the row driver); flex then stretches the chart to fill,
   so the axis hugs the card bottom with no dead gap */
.an-spark { width: 100%; height: 0; flex: 1 1 auto; min-height: 60px; display: block; }
.an-spark-line { stroke: var(--l-green); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.an-spark-dot { fill: var(--l-green); stroke: #121314; stroke-width: 2; }
.an-grid-line { stroke: var(--l-line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.an-axis { display: flex; justify-content: space-between; margin-top: 5px; }
.an-axis span { font-size: 10.5px; color: var(--l-text-4); font-variant-numeric: tabular-nums; }

/* donut */
.an-channel { display: flex; flex-direction: column; }
.an-donut-wrap { position: relative; width: 76px; height: 76px; margin: 0 auto 2px; }
.an-donut { width: 76px; height: 76px; transform: rotate(-90deg); }
.an-donut circle { fill: none; stroke-width: 12; }
.an-donut-track { stroke: rgba(255,255,255,0.06); }
.an-donut-wa { stroke: var(--l-green); stroke-linecap: round; }
.an-donut-mail { stroke: #4a5160; stroke-linecap: round; }
.an-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.an-donut-num { font-size: 16px; font-weight: 600; color: var(--l-text); font-variant-numeric: tabular-nums; }
.an-legend { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.an-legend-head { font-size: 11px; color: var(--l-text-4); margin-bottom: 2px; }
.an-legend-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.an-legend-dot { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.an-legend-dot.green { background: var(--l-green); }
.an-legend-dot.slate { background: #4a5160; }
.an-legend-name { color: var(--l-text-2); }
.an-legend-val { margin-left: auto; color: var(--l-text-4); font-variant-numeric: tabular-nums; }

/* funnel */
.an-funnel-list { display: flex; flex-direction: column; gap: 16px; }
.an-fstep-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 5px; }
.an-fstep-label { font-size: 13px; color: var(--l-text-2); }
.an-fstep-val { font-size: 13px; font-weight: 600; color: var(--l-text); font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; gap: 8px; }
.an-fstep-pct { font-size: 11px; font-weight: 500; color: var(--l-text-4); }
.an-fbar { height: 8px; border-radius: 5px; background: rgba(255,255,255,0.05); overflow: hidden; }
.an-fbar-fill { display: block; height: 100%; border-radius: 5px; }
.an-fbar-fill.indigo { background: linear-gradient(90deg, var(--l-indigo), #7b86e0); }
.an-fbar-fill.blue { background: linear-gradient(90deg, #5b7ce8, #6c8cf5); }
.an-fbar-fill.teal { background: linear-gradient(90deg, #3fa9bb, #4bbfd0); }
.an-fbar-fill.green { background: linear-gradient(90deg, #3d9d6f, var(--l-green)); }

/* leaderboard */
.an-board-list { display: flex; flex-direction: column; }
.an-brow { display: grid; grid-template-columns: 18px 1fr 70px 46px; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--l-line-2); }
.an-brow:last-child { border-bottom: 0; }
.an-brank { font-size: 11px; color: var(--l-text-4); text-align: center; font-variant-numeric: tabular-nums; }
.an-bmid { min-width: 0; }
.an-bname { font-size: 13px; color: var(--l-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-bsub { font-size: 11px; color: var(--l-text-4); margin-top: 2px; }
.an-bmeter { height: 6px; border-radius: 4px; background: rgba(255,255,255,0.05); overflow: hidden; }
.an-bmeter-fill { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, color-mix(in oklab, var(--l-green) 55%, transparent), var(--l-green)); }
.an-brate { font-size: 13px; font-weight: 600; color: var(--l-text); text-align: right; font-variant-numeric: tabular-nums; }

/* responsive: collapse side panes on small screens */
@media (max-width: 1180px) {
  /* drop the campaign recipient detail pane first so list + content stay roomy */
  .lin-detail { display: none; }
}
@media (max-width: 820px) {
  .lin-body { height: auto; }
  .lin-sb, .lin-detail, .lin-list { display: none; }
}