/* ---------- App chrome on desktop (owner 24 Oct) ----------
   · the bell is back next to the logo; its badge clears the moment you open it (seen ≠ read, like Instagram)
   · what's new stays highlighted in the list until you point at it
   · who you are sits top right: name + avatar — click = your profile, hover = every profile you can switch to
   · names and titles are links you can feel (hand cursor), never underlined */

/* Sidebar bell, beside the logo */
@media (min-width: 1024px) {
  .side-bell { cursor: pointer; border-radius: 50%; }
  .side-bell:hover { background: var(--nav-bg-hover); color: var(--nav-icon-hover); }
  .side-bell .side-bell__badge { top: 3px; right: 1px; box-shadow: 0 0 0 2px var(--color-surface); }
  .side-bell:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--nav-icon-active); }
}
@media (min-width: 1024px) and (max-width: 1279px) { .side-bell { margin: 0 auto; } }

/* What's new: a soft wash that fades away once you've looked at it */
.notif { transition: background-color .6s ease; }
.notif.is-unread { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.notif .notif__dot { transition: opacity .4s ease, transform .4s ease; }
.notif:not(.is-unread) .notif__dot { opacity: 0; transform: scale(.4); }
@media (hover: hover) and (pointer: fine) {
  .notif:hover { background: var(--color-hover); }
  .notif.is-unread:hover { background: color-mix(in srgb, var(--color-accent) 11%, transparent); }
}
.popover--notif .notif { border-radius: 14px; }

/* Who you are — top right */
.top-me { display: none; }
@media (min-width: 1024px) {
  .top-me {
    position: fixed; z-index: 17; top: 14px; right: 20px;   /* above screens (15), under every sheet and dialog */
    display: inline-flex; align-items: center; gap: 10px;
    height: 48px; max-width: 300px; padding: 4px 10px 4px 16px;
    border: 0; border-radius: 999px; cursor: pointer;
    background: color-mix(in srgb, var(--color-surface) 82%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: inset 0 0 0 var(--hairline) var(--color-line), 0 6px 22px rgba(0, 0, 0, .06);
    color: var(--color-ink); font: inherit; text-align: right;
    transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
  }
  .top-me__txt { min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
  .top-me__txt b { max-width: 180px; font-size: 14px; line-height: 18px; font-weight: 800; letter-spacing: -.005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .top-me__txt small { max-width: 180px; font-size: 12px; line-height: 15px; color: var(--color-ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .top-me__txt small[hidden] { display: none; }
  .top-me__img { flex: none; width: 38px; height: 38px; font-size: 13px; box-shadow: 0 0 0 2px var(--color-surface); transition: box-shadow .18s ease; }
  .top-me__chev { flex: none; width: 14px; height: 14px; margin-left: -2px; color: var(--color-ink-muted); transition: transform .2s ease; }
  .top-me:hover { background: var(--color-surface); box-shadow: inset 0 0 0 var(--hairline) var(--color-line-strong), 0 10px 28px rgba(0, 0, 0, .10); }
  .top-me[aria-expanded="true"] .top-me__chev { transform: rotate(180deg); }
  .top-me[aria-expanded="true"] .top-me__img,
  .top-me[aria-current="page"] .top-me__img { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3.5px var(--nav-icon-active); }
  .top-me:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--nav-icon-active); }
  .top-me:active { transform: scale(.98); }
  .popover--me { transform-origin: top right; }
  /* full-page screens (All settings) cover everything, the corner too */
  body.has-full-screen .top-me { display: none; }
}
/* narrower desktops: the avatar alone, so it never sits on top of a page's own corner buttons */
@media (min-width: 1024px) and (max-width: 1439px) {
  .top-me { padding: 4px; gap: 0; }
  .top-me__txt, .top-me__chev { display: none; }
}
@media (min-width: 1024px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .top-me { box-shadow: inset 0 0 0 var(--hairline) var(--color-line), 0 6px 22px rgba(0, 0, 0, .35); } }
:root[data-theme="dark"] .top-me { box-shadow: inset 0 0 0 var(--hairline) var(--color-line), 0 6px 22px rgba(0, 0, 0, .35); }

/* Names and titles: a hand, never an underline (owner 24 Oct) */
a[href], button:not(:disabled), [role="button"], [data-link], [data-profile], summary, label[for] { cursor: pointer; }
@media (hover: hover) {
  .mp-card:hover .mp-card__title, .mp-seller__row:hover b, .mk-card:hover b, .mk-fxcard:hover b, .mkp-fact b a:hover, .mk-facts a:hover,
  .tk-name:is(button):hover, .tk-member__who:hover b, .cm-row__name:hover, .shp-card:hover .shp-card__name,
  .fx-card__who:hover b, .fx-ev:hover .fx-ev__title, .fx-spot__who:hover b, .post__name:hover, .post__stat:hover,
  .sr-row__main:hover b, .sr-card:hover b, .sr-top__main:hover b, .sx-city:hover b, .evp__where a:hover,
  .pf-ev__title:hover, .gig__title button:hover, .gig__where button:hover, .rd-recent__row:hover b,
  .dx-row__who:hover .dx-row__txt b, .mp__who:hover .mp__title, .ob-thread__who:not(:disabled):hover b { text-decoration: none !important; }
}

/* Chat uses its own top-right corner: the pill is just the avatar there, and the conversation header leaves it room */
@media (min-width: 1024px) {
  body.me-compact .top-me { padding: 4px; gap: 0; }
  body.me-compact .top-me__txt, body.me-compact .top-me__chev { display: none; }
  .ch-thread__head { padding-right: 84px; }
}

/* ---------- Info on hover (infotip.js, owner 24 Oct): a quiet ⓘ, a calm bubble ---------- */
.ii { display: inline-grid; place-items: center; width: 18px; height: 18px; margin: -2px 0 0 5px; padding: 0; border: 0; border-radius: 50%; background: none;
  color: var(--color-ink-muted); opacity: .7; vertical-align: middle; cursor: pointer; transition: opacity .15s ease, color .15s ease, background-color .15s ease; }
.ii svg { width: 13px; height: 13px; }
.ii:hover, .ii:focus-visible, .ii[aria-describedby] { opacity: 1; color: var(--color-ink); background: var(--color-hover); outline: none; }
/* a bigger target for a finger, without a bigger icon */
@media (pointer: coarse) { .ii { position: relative; } .ii::after { content: ""; position: absolute; inset: -12px; } }
[data-ii-text] { cursor: help; }
a [data-ii-text], button [data-ii-text] { cursor: inherit; }
.ii-tip { position: fixed; z-index: 200; max-width: min(280px, calc(100vw - 24px)); padding: 9px 12px; border-radius: 12px;
  background: var(--color-ink); color: var(--color-surface); font-size: 13px; line-height: 18px; font-weight: 500; text-align: left; white-space: normal;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18); pointer-events: none; animation: ii-in .12s ease-out both; }
.ii-tip::after { content: ""; position: absolute; left: var(--ii-x, 50%); bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: inherit; border-radius: 2px; transform: rotate(45deg); }
.ii-tip.is-below::after { bottom: auto; top: -5px; }
.ii-tip[hidden] { display: none; }
@keyframes ii-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ii-tip { animation: none; } }
.rd__distlab > span { display: inline-flex; align-items: center; }

/* Marketplace and Opportunities lists on desktop: reached from the sidebar, so no Back */
@media (min-width: 1024px) { .screen.is-deskroot > .screen-bar .screen-bar__nav { visibility: hidden; pointer-events: none; } }