/* Reachly UI system — the app shell's TOP BAR (owner, 2026-09-20: "plan
   header too"). Same parts in the same places — Ask Reachly, credits,
   notifications, help, account — drawn with the system's tokens (the static
   "AI online" chip went on 2026-09-24: it said online whatever the AI did):
   hairlines, soft layered shadows, one coral accent, line icons. The sidebar
   and the logo are untouched.

   The old sheet styles these same class names, several with !important, so
   the contested properties answer in kind. When the old sheet goes (plan step
   13) these rules become the only ones and the !importants go with it. */
.topbar{
  --rl-line:#e6e8ef;--rl-ink:#0f1218;--rl-ink2:#475067;--rl-ink3:#8a92a6;--rl-acc:#f15b41;--rl-acc2:#e04a30;--rl-ok:#0e9f6e;
  background:rgba(255,255,255,.9)!important;backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--rl-line)!important;box-shadow:0 1px 0 rgba(16,24,40,.02),0 10px 24px -22px rgba(16,24,40,.45)!important;gap:12px}

/* Ask Reachly */
.topbar .topbar-ask{flex:0 1 440px;min-width:0}
.topbar .topbar-ask-glow{inset:-3px;border-radius:15px;background:radial-gradient(60% 120% at 100% 50%,rgba(241,91,65,.55),transparent 70%);filter:blur(9px);animation:none}
.topbar .topbar-ask:hover .topbar-ask-glow,.topbar .topbar-ask:focus-visible .topbar-ask-glow{opacity:.5}
.topbar .topbar-ask-inner{height:42px;gap:10px;padding:0 6px 0 14px;border-radius:12px;background:#fff;border:1px solid var(--rl-line);box-shadow:0 1px 2px rgba(16,24,40,.05);transition:border-color .15s,box-shadow .15s}
.topbar .topbar-ask:hover .topbar-ask-inner{border-color:#d5d9e3;box-shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08)}
.topbar .topbar-ask:focus-visible{outline:0}
.topbar .topbar-ask:focus-visible .topbar-ask-inner{border-color:var(--rl-acc);box-shadow:0 0 0 4px rgba(241,91,65,.2)}
.topbar .topbar-ask .mag{color:var(--rl-ink3)}
.topbar .topbar-ask-text{font-size:13.5px;color:var(--rl-ink3);font-weight:500}
.topbar .topbar-ask-text b{color:var(--rl-ink);font-weight:700}
.topbar .topbar-ask-kbd{font-family:inherit;font-size:10.5px;font-weight:700;color:var(--rl-ink3);background:#f4f5f8;border:1px solid var(--rl-line);border-bottom-width:2px;border-radius:6px;padding:1px 6px}
.topbar .topbar-ask-spark{width:30px;height:30px;border-radius:9px;color:#fff;background:linear-gradient(180deg,#f56a51,#ec4f33);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(224,74,48,.45),0 4px 12px -4px rgba(241,91,65,.5);animation:none;font-size:0}
.topbar .topbar-ask-spark svg{display:block}

/* the cluster on the right */
.topbar .topbar-right{gap:8px;margin-left:auto}
.topbar .thx-chip{height:36px;gap:7px;padding:0 12px;border-radius:10px;background:#fff;border:1px solid var(--rl-line);box-shadow:0 1px 2px rgba(16,24,40,.05);font-size:12.5px;font-weight:600;color:var(--rl-ink2);white-space:nowrap;transition:border-color .15s,box-shadow .15s}
.topbar .thx-chip b{color:var(--rl-ink);font-weight:800;font-variant-numeric:tabular-nums}
.topbar .thx-chip.thx-credits{background:linear-gradient(180deg,#fff,#fff6f3);border-color:rgba(241,91,65,.28);color:var(--rl-acc2)}
.topbar .thx-chip.thx-credits:hover{border-color:rgba(241,91,65,.5);box-shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08)}
.topbar .thx-chip.thx-credits svg{display:block;flex:none}
.topbar .thx-ico{width:36px;height:36px;border-radius:10px;background:#fff;border:1px solid var(--rl-line);box-shadow:0 1px 2px rgba(16,24,40,.05);color:var(--rl-ink2);font-size:0;transition:background .15s,border-color .15s,box-shadow .15s,color .15s}
.topbar .thx-ico:hover{background:#fafbfc;border-color:#d5d9e3;color:var(--rl-ink);box-shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08)}
.topbar .thx-ico:focus-visible,.topbar .thx-av:focus-visible{outline:0;box-shadow:0 0 0 4px rgba(241,91,65,.2)}
.topbar .thx-ico svg{display:block}
/* the bell (owner, 2026-09-24: "Let's make bell real"): a count of what is
   new, coral, and pressed while its panel is open. Drawn by /ui/rl-bell.js;
   the dot that was always on is gone. */
.topbar .thx-ico{position:relative}
.topbar .thx-bcount{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;box-sizing:border-box;padding:0 5px;border-radius:99px;background:var(--rl-acc2);border:2px solid #fff;color:#fff;font-size:10.5px;font-weight:800;line-height:14px;text-align:center;font-variant-numeric:tabular-nums;pointer-events:none}
.topbar .thx-bcount[hidden]{display:none}
.topbar .thx-ico[aria-expanded="true"]{background:#f6f7fa;border-color:#cdd2dc;color:var(--rl-ink);box-shadow:0 0 0 4px rgba(16,24,40,.06)}
.topbar .thx-av{width:36px;height:36px;border-radius:10px;background:linear-gradient(180deg,#262b38,#11141b);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(16,24,40,.4);font-size:13.5px;font-weight:800;letter-spacing:.01em;transition:transform .1s,box-shadow .15s}
.topbar .thx-av:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 4px 12px -2px rgba(16,24,40,.45)}
.topbar .thx-av:active{transform:translateY(.5px)}
.topbar .thx-av[aria-expanded="true"]{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 4px rgba(16,24,40,.12)}
/* your photo, when you have set one (Settings, Your profile) */
.topbar .thx-av.has-photo{padding:0;overflow:hidden;background:#e6e8ef}
.topbar .thx-av>img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* The client you are in (owner, 2026-09-24: "Let's move this to header").
   Before Ask Reachly: the client's tile in its own colour, a dot for its
   WhatsApp number (filled = it can send, a ring = not connected yet), an
   agency's name above the client's. Drawn by /ui/rl-account.js; its menus
   are in rl-account.css. */
.topbar .tb-ws{display:flex;align-items:center;gap:10px;flex:0 0 auto;justify-self:start;min-width:0;max-width:260px;height:42px;margin:0;padding:0 10px 0 6px;border-radius:12px;background:#fff;border:1px solid var(--rl-line);box-shadow:0 1px 2px rgba(16,24,40,.05);font:inherit;color:var(--rl-ink);text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
.topbar .tb-ws[hidden]{display:none}
.topbar .tb-ws:hover{border-color:#d5d9e3;box-shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08)}
.topbar .tb-ws[aria-expanded="true"]{background:#f6f7fa;border-color:#cdd2dc;box-shadow:0 0 0 4px rgba(16,24,40,.06)}
.topbar .tb-ws:focus-visible{outline:0;border-color:var(--rl-acc);box-shadow:0 0 0 4px rgba(241,91,65,.2)}
.topbar .tb-ws.is-busy{cursor:progress}
.topbar .tb-ws-tile{position:relative;flex:none;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--c,#475067);color:#fff;font-size:13px;font-weight:800;line-height:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.12)}
.topbar .tb-ws-dot{position:absolute;right:-3px;bottom:-3px;width:10px;height:10px;box-sizing:border-box;border-radius:50%;background:var(--rl-ok);box-shadow:0 0 0 2px #fff}
.topbar .tb-ws-dot.is-off{background:#fff;border:2.5px solid #d97706}
.topbar .tb-ws[aria-expanded="true"] .tb-ws-dot{box-shadow:0 0 0 2px #f6f7fa}
.topbar .tb-ws-spin{width:14px;height:14px;box-sizing:border-box;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:tb-ws-spin .8s linear infinite}
@keyframes tb-ws-spin{to{transform:rotate(360deg)}}
.topbar .tb-ws-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.topbar .tb-ws-t small{font-size:11px;font-weight:600;line-height:1.25;color:#646c7f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .tb-ws-t small.is-warn{font-weight:700;color:#a15c07}
.topbar .tb-ws-t b{font-size:13.5px;font-weight:800;line-height:1.25;letter-spacing:-.005em;color:var(--rl-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .tb-ws>.rl-ic{flex:none;display:block;color:var(--rl-ink3)}
.topbar .tb-ws[aria-expanded="true"]>.rl-ic{color:var(--rl-ink)}
/* ONE ROW, AT EVERY WIDTH.
   The old sheet turns this bar into a COLUMN below 1180px — a rule written
   for the bar it used to be (a page title on the left, actions on the right),
   which on the rebuilt bar stacked Ask Reachly above the controls and left a
   500px-tall header on every laptop window (owner, 2026-09-20). The ask box
   shrinks instead; the controls keep their size. */
@media (max-width:1180px){
  .topbar{flex-direction:row!important;align-items:center!important;flex-wrap:nowrap!important;min-height:66px!important;height:auto!important;padding:10px 20px!important}
  .topbar .topbar-ask{flex:0 1 380px;min-width:0;width:auto!important;max-width:none!important}
  .topbar .topbar-ask-inner{width:100%}
  .topbar .topbar-right{margin-left:auto;flex:0 0 auto;width:auto!important}
}
@media (max-width:980px){.topbar .topbar-ask{flex:0 1 300px}.topbar{padding:10px 16px!important}}
@media (max-width:820px){.topbar .topbar-ask{flex:0 1 240px}}
/* The client chip gives up room before the controls do: the agency line
   first, then the name (it stays in the chip's tooltip). The dot stays. */
@media (max-width:1180px){.topbar .tb-ws-t small{display:none}.topbar .tb-ws{max-width:200px}}
@media (max-width:980px){.topbar .tb-ws-t{display:none}.topbar .tb-ws{padding:0 8px 0 6px}}
/* THREE COLUMNS, Ask Reachly in the middle (owner, 2026-09-24: "Ask Reachly
   center it"). The client chip holds the left, the cluster the right, and the
   bar sits at the true centre of the header whatever either side carries.
   A side column never shrinks below what it holds, so a narrow window moves
   the bar off centre rather than under a control. A phone keeps its own
   two-column bar (the old sheet's), so this stops at 761px. */
@media (min-width:761px){
  .topbar{display:grid!important;grid-template-columns:1fr auto 1fr!important;align-items:center!important;column-gap:16px}
  .topbar .tb-ws{grid-column:1;justify-self:start}
  .topbar .topbar-ask{grid-column:2;flex:none;width:clamp(260px,34vw,480px)!important;max-width:none!important}
  .topbar .topbar-ask-inner{width:100%}
  .topbar .topbar-right{grid-column:3;justify-self:end}
}
/* A phone keeps the app's own slimmer bar and its safe-area padding. The
   client chip takes the title's place there: the tab bar already says which
   page this is, and the page says it again under the bar. */
@media (max-width:760px){.topbar{min-height:58px!important;padding:calc(8px + env(safe-area-inset-top)) 12px 8px!important}.topbar .topbar-ask{flex:1 1 auto}
  .topbar.has-ws #pageTitle{display:none!important}
  .topbar .tb-ws{height:44px;max-width:100%;padding:0 10px 0 6px;border-color:transparent;background:transparent;box-shadow:none}
  .topbar .tb-ws[aria-expanded="true"]{border-color:#cdd2dc;background:#f6f7fa}
  .topbar .tb-ws-t{display:flex}
  .topbar .tb-ws-t small{display:none}
  .topbar .tb-ws-t b{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.topbar .tb-ws-spin{animation:none}}