/* ===========================================================================
   THE ARTIST INBOX AS A LIST OF RECORDS (2026-09-09) — foundry/app/#view-artist-inbox,
   the overlay card and the bottom player. Same design as the label inbox on
   platform.nine71.ai: black on white, one row per track, round icon acts,
   no glow, no gradients, no decoration. Markup: js/inbox-markup.js.

   Theme-aware: every color is one of the app's tokens.
   =========================================================================== */
/* THEME-AWARE (2026-09-10, Nikhil: "in dark mode the white wouldn't work
   right and why is there a border around it?"). The view uses the app's own
   tokens, whatever the shell's theme is: no scoped light palette, no white
   sheet, no border. */
/* The sheet: bleeds across main's own gutter (the same --main-pad the home
   CTA reads) so the white runs edge to edge of the content column. */
#view-artist-inbox { padding-bottom: 48px; }
#view-artist-inbox .intro h1, #view-artist-inbox .lede { color: inherit; }
#view-artist-inbox .lede { color: var(--muted); }
#view-artist-inbox input, #view-artist-inbox select, #view-artist-inbox textarea {
  background: var(--surface); color: var(--text); border-color: var(--border);
}
#view-artist-inbox .btn { color: var(--text); border-color: var(--border-2); background: none; }
#view-artist-inbox .btn.ghost { color: var(--muted); }
#view-artist-inbox .btn.ghost:hover { color: var(--text); border-color: var(--text); }
#view-artist-inbox .btn.primary { background: var(--invert-bg); color: var(--invert-fg); border-color: var(--invert-bg); }
#view-artist-inbox .chip { border-color: var(--border-2); color: var(--muted); background: none; }
#view-artist-inbox .chip.good { color: var(--ok); border-color: var(--ok); }
#view-artist-inbox .t-chip { color: var(--muted); border-color: var(--border); background: none; }
#view-artist-inbox .t-chip.on { color: var(--text); border-color: var(--border-2); background: var(--surface-2); }
/* THE FOUR FOLDS (unranked / sent / liked / passed). The same .t-chip grammar the
   Inbox/Waitlisted tabs already use, because it is the same kind of control:
   a second vocabulary for "which part of this list" would be one more thing to
   learn on a screen that already has tabs, and the chips already carry their
   own radius, hover and count styling. It sits INSIDE the list column so the
   filter rail stays beside the rows rather than beside the bar. */
/* It WRAPS: the fourth chip (Sent) pushed the row past a narrow phone, and a
   fold nobody can reach is a fold nobody uses. */
#view-artist-inbox .ib-folds { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
/* THE SENT FOLD'S RAIL is one sentence where the groups would be, so it needs
   the same gutter the group rows have and nothing else. No new token, no new
   box: the rail is already a column of quiet text. */
#view-artist-inbox #ai-filters > p.muted { margin: 10px 2px 0; line-height: 1.5; }
/* A send row carries no acts, so the span that holds them collapses rather than
   reserving the icon gutter beside the date. */
#view-artist-inbox .ib-acts:empty { padding: 0; }

/* The quiet token on the workspace's own upload. Same --r-chip as every other
   chip in the app, no border: the facts line already sits inside a bordered
   row, and a third bordered thing on it ate the line on the platform screen. */
#view-artist-inbox .ib-src {
  font-size: 11.5px; letter-spacing: 0; color: var(--text-3);
  background: var(--surface-2); border: none; border-radius: var(--r-chip);
  padding: 1px 7px; white-space: nowrap;
}

/* THE TASTE PANEL. A .card by construction — same --surface, --border and --r
   the rest of the app's cards use, so it reads as one of them rather than as a
   new kind of box. It is a readout and it is deliberately quiet: nothing here
   draws a shape, a wheel or a percentage, because there is nothing fitted to
   draw and an empty chart would assert a measurement nobody made. */
#view-artist-inbox .ai-taste {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 16px 18px; margin: 0 0 14px;
  display: flex; flex-direction: column; gap: 6px;
}
#view-artist-inbox .ai-taste p { margin: 0; }
#view-artist-inbox .ai-taste-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
#view-artist-inbox .ai-taste-head .k {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text);
}
#view-artist-inbox .ai-taste-rows { display: flex; flex-direction: column; gap: 10px; }
#view-artist-inbox .ai-taste-row {
  display: flex; flex-direction: column; gap: 2px;
  border-top: 1px solid var(--border); padding-top: 8px;
}
#view-artist-inbox .ai-taste-name { color: var(--text); }
#view-artist-inbox .stat { border-color: var(--border); background: none; }
#view-artist-inbox .stat-n { color: var(--text); }
#view-artist-inbox .info-dot { color: var(--muted); border-color: var(--border-2); }
#view-artist-inbox .side-clear { color: var(--text); text-decoration: underline; }
#view-artist-inbox .side-clear:hover { color: var(--muted); }
#view-artist-inbox .frow[aria-pressed="true"] .fbox { background: var(--invert-bg); border-color: var(--invert-bg); }
#view-artist-inbox .frow.f-unknown[aria-pressed="true"] .fbox { background: var(--text-3); border-color: var(--text-3); }
#view-artist-inbox .linkish { color: var(--text); }
#view-artist-inbox .empty-state { border-color: var(--border-2); }
#view-artist-inbox .is-error { color: var(--danger); }

.ai-count { font-variant-numeric: tabular-nums; }
.ai-head { align-items: center; }

/* ---------- the list ---------- */
.ib-list-col { display: flex; flex-direction: column; min-width: 0; }
.ib-row { border-top: 1px solid var(--border-soft); }
.ib-row:first-child { border-top: none; }
.ib-row.open { background: var(--row-open, var(--surface-2)); }
.ib-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.ib-main {
  width: 100%; display: grid; align-items: center; text-align: left;
  grid-template-columns: 44px minmax(0, 1.4fr) minmax(140px, 0.9fr) 64px;
  gap: 14px; padding: 10px 8px; min-width: 0;
  background: none; border: none; color: inherit; font-family: inherit; cursor: pointer;
}
.has-match .ib-main { grid-template-columns: 44px minmax(0, 1.4fr) minmax(140px, 0.9fr) 112px 64px; }
.ib-row.no-wave .ib-main { grid-template-columns: 44px minmax(0, 1fr) 64px; }
.has-match .ib-row.no-wave .ib-main { grid-template-columns: 44px minmax(0, 1fr) 112px 64px; }
.ib-row.no-wave .ib-wave { display: none; }
.ib-main:hover { background: var(--surface-2); }
.ib-main:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.ib-art { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); flex: none; }
.ib-art-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ib-art .ib-ava { width: 44px; height: 44px; border-radius: 8px; font-size: 13px; }
#view-artist-inbox .ib-ava, #player-bar .ib-ava {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text-2);
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em; position: relative;
}
.ib-ava.ava-none { border-style: dashed; }
.ib-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ib-title { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-row.unread .ib-title { color: var(--text); }
.ib-meta { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ib-sep { margin: 0 6px; color: var(--text-3); }
/* Unread = still 'new'. The dot rides the art's corner. */
.ib-row.unread .ib-art { position: relative; overflow: visible; }
.ib-row.unread .ib-art::after {
  content: ""; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--text); border: 2px solid var(--surface);
}
.ib-wave { display: flex; align-items: center; gap: 1.5px; height: 34px; min-width: 0; }
.ib-wave i { flex: 1 1 0; min-width: 1px; background: var(--text-3); opacity: 0.55; border-radius: 1px; }
.ib-row.open .ib-wave i, .ib-row:hover .ib-wave i { opacity: 0.85; }
.ib-row.passed .ib-wave i { opacity: 0.25; }
.ib-row.passed .ib-title, .ib-row.passed .ib-meta { opacity: 0.6; }
.ib-match { display: flex; flex-direction: column; min-width: 0; }
.ib-band { font-size: 13px; font-weight: 600; line-height: 1.25; }
.ib-band.b-high { color: var(--text); }
.ib-band.b-mid { color: var(--text-2); }
.ib-band.b-low { color: var(--muted); }
.ib-status { font-size: 12px; color: var(--muted); text-transform: lowercase; white-space: nowrap; }
.ib-status.s-waiting { color: var(--amber); }
.ib-when { font-size: 12px; color: var(--muted); white-space: nowrap; text-align: right; }
.sb-ai {
  font-size: 10.5px; color: var(--danger); border: 1px solid var(--danger);
  border-radius: 6px; padding: 1px 5px; font-weight: 600; vertical-align: 1px;
}
.ib-pro {
  font-size: 10px; letter-spacing: 0.06em; font-weight: 600; color: var(--text);
  border: 1px solid var(--border-2); border-radius: 6px; padding: 1px 5px; vertical-align: 1px;
}

/* The acts: quiet round icons, 34px, at least 10px apart, and never closer
   than 8px to the text on their left. Play is the one filled control. */
.ib-acts { display: inline-flex; align-items: center; gap: 10px; padding: 0 12px 0 8px; }
.ib-ico {
  width: 34px; height: 34px; border-radius: 50%; border: none; background: none;
  color: var(--text-2); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; flex: none;
}
.ib-ico:hover { background: var(--surface-2); color: var(--text); }
.ib-ico.on { color: var(--surface); background: var(--text); }
.ib-ico.on-heart { color: #e0245e; }
.ib-ico.on-heart:hover { color: #e0245e; }
.ib-ico:disabled { opacity: 0.5; cursor: default; }
.ib-ico.ib-play { background: var(--text); color: var(--surface); }
.ib-ico.ib-play:hover { opacity: 0.85; color: var(--surface); }
.ib-ico:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* ---------- the filter rail ---------- */
#view-artist-inbox .inbox-layout { gap: 4px 28px; }
#view-artist-inbox .inbox-layout.filters-hidden { grid-template-columns: minmax(0, 1fr); }
#view-artist-inbox .inbox-layout.filters-hidden .inbox-side { display: none; }
.f-exact-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 6px 2px; font-size: 13px; color: var(--text-2); }
.f-exact { width: auto; max-width: 150px; padding: 6px 8px; border: 1px solid var(--border-2); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }

/* ---------- the opened track: a card over the list ---------- */
.ib-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px; }
.ib-overlay-backdrop { position: absolute; inset: 0; background: rgba(10, 10, 14, 0.42); }
.ib-overlay-card {
  position: relative; width: min(1040px, 96vw); max-height: 92vh; overflow: auto;
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35); padding: 6px 28px 28px;
}
body.ib-overlay-open { overflow: hidden; }
.ib-pane-head {
  position: sticky; top: 0; z-index: 1; background: var(--surface);
  display: flex; align-items: center; gap: 12px; padding: 18px 0 12px;
  border-bottom: 1px solid var(--border);
}
.ib-pane-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ib-pane-title { font-size: 17px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-pane-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-pane-close {
  width: 34px; height: 34px; border-radius: 50%; border: none; background: none; cursor: pointer;
  color: var(--muted); font-family: inherit; font-size: 22px; line-height: 1; padding: 0; flex: none;
}
.ib-pane-close:hover { background: var(--surface-2); color: var(--text); }
.ib-detail { padding: 14px 0 6px; display: flex; flex-direction: column; gap: 16px; font-size: 14.5px; }
.ib-detail p, .ib-detail .muted { max-width: 72ch; }
.ib-detail .k { color: var(--muted); font-size: 12.5px; }
.ib-detail-top { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.ib-art-big { flex: 0 0 auto; width: 148px; height: 148px; border-radius: 10px; overflow: hidden; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; text-align: center; padding: 8px; }
.ib-art-big .ib-art-img { width: 148px; height: 148px; border-radius: 10px; border: 1px solid var(--border); }
.ib-sender { flex: 1 1 260px; min-width: 0; display: flex; gap: 12px; align-items: flex-start; }
.ib-sender .ib-ava-lg { width: 46px; height: 46px; border-radius: 50%; font-size: 15px; }
.ib-sender-id { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ib-sender-name { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.ib-sender-where { font-size: 12.5px; color: var(--muted); }
.ib-sender-genres { display: flex; gap: 6px; flex-wrap: wrap; }
.ib-sender-bio { margin: 2px 0 0; font-size: 13.5px; color: var(--text-2); line-height: 1.5; max-width: 560px; }
.ib-sender-links { display: flex; gap: 12px; flex-wrap: wrap; }
.pd-link { color: var(--text); font-size: 12.5px; text-decoration: none; border-bottom: 1px solid var(--border-2); }
.pd-link:hover { border-bottom-color: currentColor; }
.ib-rights { margin: 0; font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.ib-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 24px; }
.ib-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border-soft); min-width: 0; }
.ib-facts .k { white-space: nowrap; }
.ib-facts .v { font-size: 13px; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-facts .v-ai { color: var(--danger); }
.ib-fine { margin: 0; line-height: 1.5; }
.ib-audio { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
.ib-msgs { display: grid; gap: 8px; padding: 14px 0 2px; border-top: 1px solid var(--border); }
.msg-list { display: grid; gap: 8px; max-width: 44rem; }
.msg { display: grid; gap: 2px; padding-left: 10px; border-left: 2px solid var(--border); }
.msg-you { border-left-color: var(--text); }
.msg-who { color: var(--text-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.msg-body { color: var(--text-2); font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-empty { margin: 0; }
.msg-compose { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; max-width: 44rem; }
.msg-box { resize: vertical; font-family: inherit; flex: 1 1 260px; }
.ib-triage { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--border); }
#view-artist-inbox .seg { background: var(--surface-2); border-color: var(--border); }
#view-artist-inbox .seg-btn { color: var(--muted); }
#view-artist-inbox .seg-btn.active { background: var(--invert-bg); color: var(--invert-fg); }
.ib-note { flex: 1 1 220px; min-width: 160px; padding: 8px 10px; font-size: 13px; }
.ib-saved { font-size: 12px; color: var(--muted); min-width: 44px; }

/* ---------- the bottom player ---------- */
body.has-player .foundry-consumer .work main { padding-bottom: 104px; }
.player-bar {
  position: fixed; left: var(--rail, 250px); right: 0; bottom: 0; z-index: 55; height: 72px;
  display: grid; grid-template-columns: 52px minmax(160px, 320px) 44px minmax(0, 1fr) 96px 36px;
  align-items: center; gap: 14px; padding: 0 20px;
  background: var(--surface); border-top: 1px solid var(--border);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.08);
}
.pb-art { width: 52px; height: 52px; border-radius: 8px; overflow: hidden; background: var(--surface-2); border: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pb-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-art .ib-ava { width: 52px; height: 52px; border-radius: 8px; }
.pb-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pb-title { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-toggle { width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--text); color: var(--surface); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.pb-track { height: 6px; border-radius: 3px; background: var(--surface-2); cursor: pointer; position: relative; }
.pb-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: var(--text); }
.pb-time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.pb-close { width: 36px; height: 36px; border-radius: 50%; border: none; background: none; color: var(--muted); font-size: 22px; cursor: pointer; }
.pb-close:hover { background: var(--surface-2); color: var(--text); }

@media (max-width: 900px) {
  .player-bar { left: 0; }
  .ib-main { grid-template-columns: 44px minmax(0, 1fr); }
  .has-match .ib-main { grid-template-columns: 44px minmax(0, 1fr) 96px; }
  .ib-wave, .ib-when { display: none; }
  .ib-acts { gap: 10px; padding: 0 4px 0 8px; }
  .ib-acts [data-comment-for], .ib-acts [data-dl-for] { display: none; }
  .ib-overlay { padding: 2vh 8px; }
  .ib-overlay-card { padding: 4px 16px 20px; }
}
@media (max-width: 760px) {
  .player-bar { grid-template-columns: 44px minmax(0, 1fr) 40px 36px; height: 64px; }
  .pb-track, .pb-time { display: none; }
}

/* No inbox yet: no filter rail beside an empty state. */
#view-artist-inbox .inbox-layout:has(.empty-state) { grid-template-columns: minmax(0, 1fr); }
#view-artist-inbox .inbox-layout:has(.empty-state) .inbox-side { display: none; }