/* ==========================================================================
   css/components/tray-modes.css
   The tray area's four modes - Members, Profile, Notifications, Messages - the switcher in
   the tray panel, and the narrow (icon-rail) tray.

   The rv- class names are NOT a leftover to tidy: rvRenderProfileArea and rvRenderNotifs in
   js/dm/dm-popout.js emit them, and the mobile shell renders the same two bodies into its own
   tabs. These styles came back from _revamped-backup-2026-10-20/css-revamped/area-panel.css,
   which was deleted with that layout while the renderers that need it stayed - so both had
   been rendering unstyled since. Renaming is a job for all three call sites at once.
   ========================================================================== */

/* -- WHICH PARTS OF THE TRAY ARE VISIBLE -------------------------------------------------
   Driven off body[data-tray-mode] rather than style.display, because renderMembers makes the
   member list and the counts visible on every render of its own - a presence change would
   have put them back on top of whatever mode was open. */
body[data-tray-mode="members"] #trayModeBody { display: none; }
body:not([data-tray-mode="members"]) #membersList,
body:not([data-tray-mode="members"]) #membersStats { display: none !important; }
#trayModeBody { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.rv-area-scroll { flex: 1; overflow-y: auto; min-height: 0; }

/* -- NOTIFICATIONS ------------------------------------------------------------------------ */
.rv-notif-item { display: flex; align-items: center; gap: 11px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border); }
.rv-notif-item:hover { background: var(--bg-hover); }
.rv-notif-item.has-mention { background: color-mix(in srgb, var(--red, #ed4245) 7%, transparent); }
.rv-notif-ic { width: 34px; height: 34px; border-radius: 9px; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.rv-notif-ic img, .rv-notif-ic span { width: 100%; height: 100%; object-fit: cover; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 13px; }
.rv-notif-meta { flex: 1; min-width: 0; }
.rv-notif-ch { font-size: 13.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-notif-srv { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-notif-badge { background: var(--red); color: #fff; font-size: 11px; font-weight: 700; border-radius: 10px; padding: 2px 7px; flex-shrink: 0; }
.rv-notif-badge.mention { background: var(--accent); }

/* -- PROFILE ------------------------------------------------------------------------------ */
.rv-prof-banner { height: 100px; background-size: cover; background-position: center; flex-shrink: 0; }
.rv-prof-top { padding: 0 16px; margin-top: -34px; }
.rv-prof-av { width: 74px; height: 74px; border-radius: 50%; border: 5px solid var(--bg-chat, var(--bg-base)); position: relative; background: var(--bg-elevated); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 24px; }
.rv-prof-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.rv-prof-av-dot { position: absolute; bottom: 2px; right: 2px; width: var(--status-dot-lg); height: var(--status-dot-lg); border-radius: 50%; border: var(--status-ring-w-lg) solid var(--bg-chat, var(--bg-base)); }
.rv-prof-body { padding: 10px 16px 16px; }
.rv-prof-name { font-size: 19px; font-weight: 800; color: var(--text-primary); font-family: var(--font-display, 'Space Grotesk', sans-serif); }
.rv-prof-user { font-size: 13px; color: var(--text-muted); margin-top: 1px; }
.rv-prof-bio { font-size: 13px; color: var(--text-secondary); margin-top: 10px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.rv-prof-actions { display: flex; gap: 8px; margin-top: 14px; }
.rv-prof-btn { flex: 1; padding: 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-primary); font-size: 13px; font-weight: 600; cursor: pointer; }
.rv-prof-btn:hover { background: var(--bg-active); }
.rv-prof-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.rv-prof-btn.primary:hover { filter: brightness(1.08); }
.rv-prof-status-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 18px 0 8px; }
.rv-prof-status { display: flex; flex-direction: column; gap: 3px; }
.rv-prof-status-btn { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; border: none; background: transparent; color: var(--text-secondary); font-size: 13px; font-weight: 500; cursor: pointer; text-align: left; }
.rv-prof-status-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.rv-prof-status-btn.active { background: var(--bg-active); color: var(--text-primary); }
.rvps-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* -- THE SWITCHER, in the tray panel ------------------------------------------------------ */
.tray-mode-btn {
  width: 30px; height: 30px; border-radius: var(--radius-sm, 6px);
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  transition: background .1s, color .1s;
  position: relative;
}
.tray-mode-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.tray-mode-btn.active { background: var(--bg-active); color: var(--accent); }
/* The press-in is on the GLYPH, not the button. A transform on the button would make it the
   containing block for its tooltip's `background-attachment: fixed`, which squeezes the whole
   wallpaper into the bubble instead of showing the one colour where it sits. */
.tray-mode-btn svg { transition: transform .1s var(--ease-out, ease); }
.tray-mode-btn:active svg { transform: scale(0.9); }
/* Unread total on the Notifications button, so the mode is worth switching to without
   having to switch to it first. */
.tray-mode-dot {
  position: absolute; top: 3px; right: 3px;
  min-width: 8px; height: 8px; border-radius: 5px;
  background: var(--red, #ed4245);
  border: 2px solid var(--bg-elevated);
  display: none;
}
body.has-tray-unread .tray-mode-btn[data-mode="notifs"] .tray-mode-dot { display: block; }

/* -- THE NARROW TRAY ---------------------------------------------------------------------
   The arrow in the tray header squeezes the tray to an icon rail instead of taking it away.
   In Members that leaves the avatars, which is what it is for; the other three modes keep
   their own leading icon and drop the text beside it. */
.tray-collapse-btn {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  transition: background .1s, color .1s;
}
.tray-collapse-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
/* Same reason: rotating the BUTTON rotated the ::after tooltip with it, so "Expand" came out
   upside down. Rotate the chevron instead - the button stays untransformed and keeps its
   tooltip upright and correctly painted. */
.tray-collapse-btn svg { transition: transform .18s var(--ease-out, ease); }
body.tray-narrow .tray-collapse-btn svg { transform: rotate(180deg); }
/* The title and the arrow share the top line; the counts sit under them as before. */
.tray-header-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

body.tray-narrow .tray-area { width: 68px; }
body.tray-narrow .tray-header { padding: 8px 0; align-items: center; }
body.tray-narrow .tray-header-title,
body.tray-narrow #membersStats { display: none !important; }
body.tray-narrow .tray-header-top { justify-content: center; }

/* Members: avatar only, centred. */
body.tray-narrow .member-item { justify-content: center; padding: 0; margin: 0 4px; gap: 0; }
body.tray-narrow .member-info,
body.tray-narrow .member-device-right,
body.tray-narrow .member-owner-crown { display: none !important; }
body.tray-narrow .member-category { text-align: center; padding: 12px 4px 4px; font-size: 9px; letter-spacing: .5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Notifications and Messages: the leading icon stays, the text goes, the count rides on it. */
body.tray-narrow .rv-notif-item { justify-content: center; padding: 8px 4px; gap: 0; position: relative; }
body.tray-narrow .rv-notif-meta { display: none; }
body.tray-narrow .rv-notif-badge { position: absolute; top: 4px; right: 8px; padding: 1px 5px; font-size: 10px; }
body.tray-narrow .dmp-li { justify-content: center; padding: 6px 4px; gap: 0; position: relative; }
body.tray-narrow .dmp-li-name { display: none; }
body.tray-narrow .dmp-li-badge { position: absolute; top: 2px; right: 6px; }

/* Profile: the card has nothing to say at 68px, so it keeps the avatar and the status dots. */
body.tray-narrow .rv-prof-banner { height: 52px; }
body.tray-narrow .rv-prof-top { padding: 0; display: flex; justify-content: center; margin-top: -24px; }
body.tray-narrow .rv-prof-av { width: 48px; height: 48px; font-size: 16px; border-width: 3px; }
body.tray-narrow .rv-prof-body { padding: 8px 6px; text-align: center; }
body.tray-narrow .rv-prof-name { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.tray-narrow .rv-prof-user,
body.tray-narrow .rv-prof-bio,
body.tray-narrow .rv-prof-status-label,
body.tray-narrow .rv-prof-actions { display: none; }
body.tray-narrow .rv-prof-status-btn { justify-content: center; padding: 7px 0; font-size: 0; gap: 0; }

/* The panel cannot hold six buttons in a row at 68px, so the switcher becomes a 2x2 and the
   two actions step aside - both are a click away in the user panel and in Settings. */
/* Four 26px buttons will not sit in a row at 68px, so they go 2x2. */
body.tray-narrow .tray-panel {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  padding: 3px; height: 58px; place-items: center;
}
body.tray-narrow .tray-mode-btn { width: 26px; height: 26px; }

/* Narrow is a desktop idea; under 1080px the tray is hidden outright. */
@media (max-width: 1080px) { body.tray-narrow .tray-area { width: 256px; } }

/* -- THE TRAY'S OWN TOOLTIPS --------------------------------------------------------------
   The shared [data-tip] bubble points RIGHT (`left: calc(100% + 10px)`), which is right for
   the server rail it was written for and wrong for everything in the tray: the tray is against
   the right edge of the window, so the label ran off it AND into .tray-area's clip. "Messages"
   arrived as "Messa".
   These point away from the edge instead - up from the panel, down from the header's arrow -
   and anchor with `right: 0` so they grow leftwards into the app rather than off it.
   NO transform, deliberately: the themed background below uses `background-attachment: fixed`,
   and a live transform re-anchors that to the element (the same caveat as the menu-open flash).
   The shared rule centres itself with a permanent translateY(-50%), which would have made that
   permanent rather than momentary. Positioning instead of translating avoids it entirely.
   No box-shadow either - at this size it is a smudge under the bubble, not depth. */
#trayPanel [data-tip]::after,
.tray-collapse-btn[data-tip]::after {
  left: auto;
  right: 0;
  top: auto;
  transform: none;
  box-shadow: none;
}
#trayPanel [data-tip]:hover::after,
.tray-collapse-btn[data-tip]:hover::after { transform: none; }
#trayPanel [data-tip]::after { bottom: calc(100% + 8px); }
.tray-collapse-btn[data-tip]::after { top: calc(100% + 8px); bottom: auto; }

/* -- THE CHANNEL HEADER STOPS DOING THE TRAY'S JOB ----------------------------------------
   All three of these predate the tray's mode switcher and now fight it:
     - Messages opened a floating popout duplicating the tray's Messages mode;
     - Members toggled the tray CLOSED, which is what the tray's own collapse arrow is for,
       and left the switcher stranded with nothing to switch;
     - Events opened a 400px slide-over with a backdrop - a tray by another name.
   They stay on phones, where there is no tray at all and these are the only way in. */
@media (min-width: 769px) {
  #membersToggleBtn,
  #dmPopBtn,
  #eventsToggleBtn { display: none !important; }
}

/* Five buttons will not sit in a 2x2, so the narrow grid grows a row rather than hiding one. */
body.tray-narrow .tray-panel { height: auto; min-height: 58px; padding: 4px; }
body.tray-narrow .tray-mode-btn { width: 24px; height: 24px; }

/* The events panel keeps its own close button for the slide-over it still is on a phone. In
   the tray that button closes nothing - the mode switcher is how you leave - so it goes. */
body[data-tray-mode="events"] #trayArea .evt-close-btn { display: none; }

/* -- THE EVENTS PANEL IN THE TRAY ---------------------------------------------------------
   Its surfaces paint --bg-surface / --bg-elevated. The painter DOES tint those, but they are
   OPAQUE - measured rgb(68,58,80) on the calendar - and the tray they now sit in is a
   translucent scrim over the wallpaper. So the calendar read as a slab stuck onto the theme,
   the same way the link embeds did.
   A translucent lift mixed from the text colour instead: it works in any theme, and it stacks
   with whatever the tray is painting rather than covering it. Scoped to the tray, so the
   phone's slide-over keeps its solid surfaces. */
body.custom-paint #trayArea #evtPanel .evt-cal,
body.custom-paint #trayArea #evtPanel .evt-card,
body.custom-paint #trayArea #evtPanel .evt-item,
body.custom-paint #trayArea #evtPanel .evt-day {
  background: color-mix(in srgb, var(--text-primary) 7%, transparent) !important;
  border-color: var(--border-strong);
}
body.custom-paint #trayArea #evtPanel .evt-cal-day:hover {
  background: color-mix(in srgb, var(--text-primary) 12%, transparent) !important;
}

/* -- A DM OPENS INSIDE THE TRAY -----------------------------------------------------------
   Clicking a conversation here used to jump the MAIN view to it, which defeats the point of
   having Messages in a side panel at all. It opens in place now. */
.tray-dm-back {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; background: none; border: none; cursor: pointer;
  color: var(--text-secondary); font-size: 12.5px; font-weight: 600;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.tray-dm-back:hover { color: var(--text-primary); background: var(--bg-hover); }
#trayArea #dmpConv { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#trayArea #dmpConv .dmp-conv-head { display: none; }   /* the back bar already names it */
#trayArea #dmpConv .dmp-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 10px; }
#trayArea #dmpConv .dmp-input-bar { flex-shrink: 0; padding: 6px 8px; }
#trayArea #dmpConv .dmp-input-bar textarea { font-size: 13px; }