/* The bell's panel and the announcement banner, drawn by /ui/rl-bell.js
   (owner, 2026-09-24: "Let's make bell real"; approved canvas
   "Notifications bell"). RlUI's menu shape at 420px, a full-height sheet on
   a phone. The badge on the bell is in rl-shell.css, with the top bar. */
.rlx .rl-menu.is-bell{width:420px;max-height:calc(100vh - 88px);display:flex;flex-direction:column;overflow:hidden;padding:6px}

/* head: the title, Mark all read, and on a phone a close */
.rlx .blx-hd{display:flex;align-items:center;gap:8px;padding:6px 6px 10px 10px}
.rlx .blx-hd h2{margin:0;font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--rl-ink)}
.rlx .blx-hd .sp{flex:1}
.rlx .blx-all{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 9px;border-radius:8px;font-size:12.5px;font-weight:700;color:var(--rl-ink2);transition:background .12s}
.rlx .blx-all:hover:not(:disabled),.rlx .blx-all:focus-visible{background:var(--rl-surface2);outline:0}
.rlx .blx-all:disabled{opacity:.45;cursor:default}
.rlx .blx-x{display:none;flex:none;width:40px;height:40px;border-radius:12px;align-items:center;justify-content:center;color:var(--rl-ink2);background:var(--rl-surface2)}

/* the two tabs */
.rlx .blx-tabs{display:flex;gap:3px;padding:3px;margin:0 4px 6px;border-radius:12px;background:var(--rl-surface3)}
.rlx .blx-tab{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;border-radius:9px;font-size:13px;font-weight:600;color:var(--rl-ink2);transition:background .15s,color .15s,box-shadow .15s}
.rlx .blx-tab.is-on{background:#fff;color:var(--rl-ink);font-weight:800;box-shadow:0 1px 2px rgba(16,24,40,.12)}
.rlx .blx-tab:focus-visible{outline:2px solid var(--rl-acc);outline-offset:1px}
.rlx .blx-n{min-width:18px;height:18px;box-sizing:border-box;padding:0 5px;border-radius:99px;background:var(--rl-surface2);color:var(--rl-ink2);font-size:11px;font-weight:800;line-height:18px;text-align:center}
.rlx .blx-tab.is-on .blx-n{background:var(--rl-acc);color:#fff}

/* the list */
.rlx .blx-bd{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}
.rlx .blx-sec{padding:10px 12px 6px;font-family:"DM Mono",ui-monospace,monospace;font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#646c7f}
.rlx .blx-list{display:flex;flex-direction:column;gap:2px}
.rlx .blx-row{display:flex;align-items:flex-start;gap:12px;width:100%;padding:11px 12px;border-radius:12px;text-align:left;color:var(--rl-ink);transition:background .12s}
.rlx .blx-row:hover,.rlx .blx-row:focus-visible{background:var(--rl-surface2);outline:0}
.rlx .blx-row.is-new{background:#fffaf8}
.rlx .blx-row.is-new:hover,.rlx .blx-row.is-new:focus-visible{background:#fff3ef}
.rlx .blx-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.rlx .blx-t>b{font-size:13.5px;font-weight:600;line-height:1.35;color:var(--rl-ink2)}
.rlx .blx-row.is-new .blx-t>b,.rlx .blx-card .blx-t>b{font-weight:800;color:var(--rl-ink)}
.rlx .blx-t>span{font-size:12.5px;font-weight:500;line-height:1.45;color:#646c7f}
.rlx .blx-t>em{display:inline-flex;align-items:center;gap:5px;margin-top:4px;font-style:normal;font-size:12.5px;font-weight:800;color:var(--rl-ink2)}
.rlx .blx-row.is-new .blx-t>em{color:#b93520}
.rlx .blx-side{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:8px;padding-top:2px}
.rlx .blx-side time,.rlx .blx-meta time{font-size:11.5px;font-weight:600;color:#646c7f;white-space:nowrap}
.rlx .blx-dot{display:block;width:8px;height:8px;border-radius:50%;background:var(--rl-acc)}

/* a notice's tile: the thing's own icon, in its tone */
.rlx .blx-tile{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--rl-surface3);color:var(--rl-ink2)}
.rlx .blx-tile.is-lg{width:44px;height:44px;border-radius:14px}
.rlx .blx-tile.is-acc{background:#fff1ed;color:#b93520}
.rlx .blx-tile.is-danger{background:#fff0f3;color:#be123c}
.rlx .blx-tile.is-warn{background:#fff5e6;color:#a15c07}
.rlx .blx-tile.is-info{background:#eef3ff;color:#1d4ed8}
.rlx .blx-tile.is-ok{background:#e7f7f0;color:#067a55}
.rlx .blx-tile.is-purple{background:#f3efff;color:#6d3fd6}

/* From Reachly: cards */
.rlx .blx-cards{display:flex;flex-direction:column;gap:8px;padding:4px 4px 2px}
.rlx .blx-card{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--rl-line);cursor:pointer;transition:box-shadow .15s}
.rlx .blx-card:hover{box-shadow:inset 0 0 0 1px #d5d9e3,0 6px 16px -10px rgba(16,24,40,.25)}
.rlx .blx-card.is-new{background:#fffaf8;box-shadow:inset 0 0 0 1px #fbe3dc}
.rlx .blx-pic{display:block;width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:10px;background:var(--rl-surface3)}
.rlx .blx-card-b{display:flex;align-items:flex-start;gap:12px}
.rlx .blx-meta{display:flex;align-items:center;gap:8px;min-width:0}
.rlx .blx-meta>span:not(.blx-chip):not(.sp){font-size:11.5px;font-weight:700;color:#646c7f;white-space:nowrap}
.rlx .blx-meta .sp{flex:1}
.rlx .blx-chip{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;background:var(--rl-surface3);color:var(--rl-ink2);font-size:11px;font-weight:800;white-space:nowrap}
.rlx .blx-chip.is-acc{background:#fff1ed;color:#b93520}
.rlx .blx-chip.is-info{background:#eef3ff;color:#1d4ed8}
.rlx .blx-chip.is-warn{background:#fff5e6;color:#a15c07}
.rlx .blx-card .blx-t>b{font-size:14px;line-height:1.3}
.rlx .blx-card .blx-t>p{margin:0;font-size:12.5px;font-weight:500;line-height:1.5;color:var(--rl-ink2);white-space:pre-line}
.rlx .blx-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;margin-top:2px;font-size:12.5px;font-weight:800;color:#b93520}
.rlx .blx-cta:hover{text-decoration:underline;text-underline-offset:2px}
.rlx .blx-cta.is-dark{gap:6px;height:34px;margin-top:6px;padding:0 13px;border-radius:10px;background:#161a24;color:#fff;font-weight:700;text-decoration:none!important;transition:transform .15s,box-shadow .15s}
.rlx .blx-cta.is-dark:hover{transform:translateY(-1px);box-shadow:0 12px 24px -12px rgba(15,18,24,.7)}

/* nothing here */
.rlx .blx-empty{display:flex;flex-direction:column;align-items:center;gap:10px;margin:4px;padding:28px 18px;border-radius:14px;background:var(--rl-bg);text-align:center}
.rlx .blx-empty b{font-size:14px;font-weight:800;color:var(--rl-ink)}
.rlx .blx-empty p{margin:0;max-width:300px;font-size:12.5px;line-height:1.5;color:#646c7f}
.rlx .blx-skel{display:flex;flex-direction:column;gap:8px;padding:8px 6px}
.rlx .blx-skel span{display:block;height:58px;border-radius:12px;background:linear-gradient(90deg,#eef0f4 0%,#f7f8fa 50%,#eef0f4 100%);background-size:200% 100%;animation:rl-shimmer 1.2s infinite linear}

/* footers: an agency's other clients; the platform owner's line */
.rlx .blx-others{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 4px 0;padding:10px 12px;border-radius:12px;background:var(--rl-bg);box-shadow:inset 0 0 0 1px var(--rl-line);font-size:12px;font-weight:600;color:var(--rl-ink2)}
.rlx .blx-others .lbl,.rlx .blx-others .more{color:#646c7f}
.rlx .blx-others button{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--rl-ink)}
.rlx .blx-others button:hover{text-decoration:underline;text-underline-offset:2px}
.rlx .blx-others button b{color:#b93520}
.rlx .blx-others i{width:16px;height:16px;border-radius:5px;display:grid;place-items:center;background:var(--c,#475067);color:#fff;font-style:normal;font-size:9px;font-weight:800}
.rlx .blx-own{display:flex;align-items:center;gap:10px;margin:6px 4px 0;padding:10px 12px;border-radius:12px;background:#161a24;color:#fff}
.rlx .blx-own>.rl-ic{flex:none;color:#ff9a85}
.rlx .blx-own span{flex:1;min-width:0;font-size:12px;font-weight:600;color:#c9cfda}
.rlx .blx-own button{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:800;color:#fff}

/* a phone: the whole screen, every row a thumb's height */
@media (max-width:760px){
  .rlx .rl-menu.is-bell{left:0!important;right:0!important;top:0!important;bottom:0!important;width:auto;max-height:none;padding:calc(6px + env(safe-area-inset-top)) 8px calc(10px + env(safe-area-inset-bottom));border-radius:0;transform-origin:bottom;animation:rl-sheetin .32s var(--rl-ease)}
  .rlx .blx-hd{min-height:52px;padding:4px 4px 8px 10px}
  .rlx .blx-hd h2{font-size:18px}
  .rlx .blx-x{display:inline-flex}
  .rlx .blx-tab{height:40px;font-size:14px}
  .rlx .blx-row{padding:13px 12px}
  .rlx .blx-t>b{font-size:14.5px}
  .rlx .blx-t>span{font-size:13.5px}
}

/* THE BANNER: an announcement the platform owner flagged, under the header
   on every page until it ends or this person closes it. */
.rlx.rl-banner[hidden]{display:none!important}
/* A conversation on a phone is the whole screen — the header and the tab bar
   leave it — so the banner leaves with them instead of pushing the chat down. */
@media (max-width:760px){body.mobile-inbox-chat-open #rlBanner{display:none!important}}
.rlx.rl-banner{padding:8px 20px 0}
.rlx.rl-banner .rlb-in{display:flex;align-items:center;gap:12px;padding:9px 8px 9px 14px;border-radius:12px;background:#f4f5f8;box-shadow:inset 0 0 0 1px #e6e8ef;color:#475067;font-family:inherit}
.rlx.rl-banner .rlb-in>.rl-ic{flex:none}
.rlx.rl-banner .rlb-in.is-warn{background:#fff5e6;box-shadow:inset 0 0 0 1px #fbe0b8;color:#a15c07}
.rlx.rl-banner .rlb-in.is-acc{background:#fff1ed;box-shadow:inset 0 0 0 1px #ffd9cf;color:#b93520}
.rlx.rl-banner .rlb-in.is-info{background:#eef3ff;box-shadow:inset 0 0 0 1px #d6e2ff;color:#1d4ed8}
.rlx.rl-banner p{flex:1;min-width:0;margin:0;font-size:13px;line-height:1.45;font-weight:500;color:#0f1218;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rlx.rl-banner p b{font-weight:800}
.rlx.rl-banner p span{color:#475067}
.rlx.rl-banner .rlb-cta{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:800;color:inherit;white-space:nowrap}
.rlx.rl-banner .rlb-cta:hover{text-decoration:underline;text-underline-offset:2px}
.rlx.rl-banner .rlb-x{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:inherit;transition:background .12s}
.rlx.rl-banner .rlb-x:hover,.rlx.rl-banner .rlb-x:focus-visible{background:rgba(15,18,24,.06);outline:0}
@media (max-width:760px){
  .rlx.rl-banner{padding:8px 12px 0}
  .rlx.rl-banner p{white-space:normal}
}
@media (prefers-reduced-motion:reduce){.rlx .blx-skel span{animation:none}}