/*
 * Feedback conversation roles — distinct colour per speaker.
 *
 * Before: `mine` was cyan at 12%, `original-poster` cyan at 15% and `staff` purple at
 * 16%, all mixed into the same surface. Three tints within four percentage points of
 * each other, two of them the same hue — which is why the original post and the admin
 * reply read as one flat blue block.
 *
 * Now each role gets its own hue, its own accent bar weight and its own labelled
 * chip. Per DESIGN.md, role is never signalled by colour alone: every bubble carries
 * a text label, so the thread still parses in greyscale or with colour-vision
 * deficiency.
 *
 * Roles come from feedback-thread-ui.js, which already emits:
 *   .staff .mine .original-poster .suggestion   (community = none of these)
 *
 * Anchored on .feedback-feed / .feedback-thread so these outrank workspace-ux-v1.css
 * (0,1,0) without !important, and apply identically on the player page and in the
 * Admin inbox.
 */

.feedback-feed,
.feedback-thread,
#adminFeedbackInbox{
  /* One hue per speaker. Tuned so adjacent bubbles differ by more than lightness. */
  --role-op:#e0a63c;        /* original poster — warm amber, the thread anchor */
  --role-staff:#a479ff;     /* Sprite Tracker team — violet */
  --role-mine:#3fd0e8;      /* you — cyan */
  --role-community:#8ea3bd; /* other players — neutral slate */
}

/* ---- top-level ticket roles ----------------------------------------- */
/* The feed cards use .feedback-original / .feedback-reply before the
   conversation is opened. Keep these as distinct as the thread bubbles. */

.feedback-feed .feedback-original,
#adminFeedbackInbox .feedback-original,
.feedback-feed .feedback-reply,
#adminFeedbackInbox .feedback-reply{
  --role:var(--role-community);
  position:relative;
  border:1px solid color-mix(in srgb,var(--role) 38%,var(--ct-border,rgba(255,255,255,.12)));
  background:color-mix(in srgb,var(--role) 12%,var(--st-surface-2,#141f33));
  box-shadow:inset 5px 0 0 var(--role);
}

.feedback-feed .feedback-original,
#adminFeedbackInbox .feedback-original{--role:var(--role-op)}

.feedback-feed .feedback-reply,
#adminFeedbackInbox .feedback-reply{--role:var(--role-staff)}

.feedback-feed .feedback-original > span,
#adminFeedbackInbox .feedback-original > span,
.feedback-feed .feedback-reply > span,
#adminFeedbackInbox .feedback-reply > span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:max-content;
  padding:3px 9px;
  border:1px solid color-mix(in srgb,var(--role) 48%,transparent);
  border-radius:var(--radius-pill,999px);
  background:color-mix(in srgb,var(--role) 18%,transparent);
  color:color-mix(in srgb,var(--role) 80%,var(--ct-text,#f2f6fb));
}

.feedback-feed .feedback-original > span::before,
#adminFeedbackInbox .feedback-original > span::before{content:"★"}

.feedback-feed .feedback-reply > span::before,
#adminFeedbackInbox .feedback-reply > span::before{content:"◆"}

.feedback-feed .feedback-reply > strong,
#adminFeedbackInbox .feedback-reply > strong{
  color:color-mix(in srgb,var(--role-staff) 76%,var(--ct-text,#f2f6fb));
}

/* ---- base bubble ----------------------------------------------------- */

.feedback-feed .feedback-message-bubble,
.feedback-thread .feedback-message-bubble{
  --role:var(--role-community);
  position:relative;
  border:1px solid color-mix(in srgb,var(--role) 34%,var(--ct-border,rgba(255,255,255,.12)));
  border-radius:14px 14px 14px 4px;
  background:color-mix(in srgb,var(--role) 9%,var(--st-surface,#0d1726));
  box-shadow:inset 4px 0 0 color-mix(in srgb,var(--role) 62%,transparent);
  padding:14px 16px;
  line-height:var(--line-body,1.55);
}

/* ---- role assignment ------------------------------------------------- */

.feedback-feed .feedback-message-bubble.original-poster,
.feedback-thread .feedback-message-bubble.original-poster{
  --role:var(--role-op);
  background:color-mix(in srgb,var(--role) 14%,var(--st-surface,#0d1726));
  box-shadow:inset 5px 0 0 var(--role);
}

.feedback-feed .feedback-message-bubble.staff,
.feedback-thread .feedback-message-bubble.staff{
  --role:var(--role-staff);
  background:color-mix(in srgb,var(--role) 15%,var(--st-surface,#0d1726));
  box-shadow:inset 5px 0 0 var(--role);
}

.feedback-feed .feedback-message-bubble.mine,
.feedback-thread .feedback-message-bubble.mine{
  --role:var(--role-mine);
  justify-self:end;
  border-radius:14px 14px 4px 14px;
  box-shadow:inset -4px 0 0 color-mix(in srgb,var(--role) 62%,transparent);
}

/* "You, and you are the original poster" keeps the amber identity but the
   right-hand alignment, so it stays recognisable as both. */
.feedback-feed .feedback-message-bubble.mine.original-poster,
.feedback-thread .feedback-message-bubble.mine.original-poster{
  --role:var(--role-op);
  box-shadow:inset -5px 0 0 var(--role);
}

/* Staff always wins the accent — an admin reply must never be mistaken for a
   player's, even when a staff member is also the author. */
.feedback-feed .feedback-message-bubble.staff.mine,
.feedback-thread .feedback-message-bubble.staff.mine{
  --role:var(--role-staff);
  box-shadow:inset -5px 0 0 var(--role);
}

/* ---- labelled chip --------------------------------------------------- */

.feedback-feed .feedback-message-bubble header,
.feedback-thread .feedback-message-bubble header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}

.feedback-feed .feedback-message-bubble header span:first-child,
.feedback-thread .feedback-message-bubble header span:first-child{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 9px;
  border:1px solid color-mix(in srgb,var(--role) 45%,transparent);
  border-radius:var(--radius-pill,999px);
  background:color-mix(in srgb,var(--role) 18%,transparent);
  color:color-mix(in srgb,var(--role) 78%,var(--ct-text,#f2f6fb)) !important;
  font-size:var(--type-3xs,.6rem);
  font-weight:950;
  letter-spacing:.09em;
  text-transform:uppercase;
  white-space:nowrap;
}

/* A shape cue in front of the label, so the roles remain separable without hue. */
.feedback-feed .feedback-message-bubble header span:first-child::before,
.feedback-thread .feedback-message-bubble header span:first-child::before{
  content:"●";
  font-size:.7em;
  line-height:1;
}
.feedback-feed .feedback-message-bubble.staff header span:first-child::before,
.feedback-thread .feedback-message-bubble.staff header span:first-child::before{content:"◆"}
.feedback-feed .feedback-message-bubble.original-poster header span:first-child::before,
.feedback-thread .feedback-message-bubble.original-poster header span:first-child::before{content:"★"}
.feedback-feed .feedback-message-bubble.mine header span:first-child::before,
.feedback-thread .feedback-message-bubble.mine header span:first-child::before{content:"▶"}

.feedback-feed .feedback-message-bubble header time,
.feedback-feed .feedback-message-bubble header small,
.feedback-thread .feedback-message-bubble header time,
.feedback-thread .feedback-message-bubble header small{
  color:var(--ct-muted,#8ea3bd);
  font-size:var(--type-3xs,.62rem);
  white-space:nowrap;
}

/* Suggestion marker rides on top of the role accent instead of replacing it. */
.feedback-feed .feedback-message-bubble.suggestion,
.feedback-thread .feedback-message-bubble.suggestion{
  border-top:2px solid color-mix(in srgb,var(--st-gold,#e0a63c) 55%,transparent);
}

/* ---- light theme ----------------------------------------------------- */

html[data-theme="light"] .feedback-feed,
html[data-theme="light"] .feedback-thread,
html[data-theme="light"] #adminFeedbackInbox{
  --role-op:#9a6a12;
  --role-staff:#6b4fd0;
  --role-mine:#12708a;
  --role-community:#5b6b7f;
}
html[data-theme="light"] .feedback-feed .feedback-original,
html[data-theme="light"] #adminFeedbackInbox .feedback-original,
html[data-theme="light"] .feedback-feed .feedback-reply,
html[data-theme="light"] #adminFeedbackInbox .feedback-reply{
  background:color-mix(in srgb,var(--role) 10%,#ffffff);
  border-color:color-mix(in srgb,var(--role) 34%,rgba(50,92,133,.22));
}
html[data-theme="light"] .feedback-feed .feedback-message-bubble,
html[data-theme="light"] .feedback-thread .feedback-message-bubble{
  background:color-mix(in srgb,var(--role) 8%,#ffffff);
  border-color:color-mix(in srgb,var(--role) 30%,rgba(50,92,133,.22));
}
html[data-theme="light"] .feedback-feed .feedback-message-bubble.original-poster,
html[data-theme="light"] .feedback-feed .feedback-message-bubble.staff,
html[data-theme="light"] .feedback-thread .feedback-message-bubble.original-poster,
html[data-theme="light"] .feedback-thread .feedback-message-bubble.staff{
  background:color-mix(in srgb,var(--role) 13%,#ffffff);
}
html[data-theme="light"] .feedback-feed .feedback-message-bubble header span:first-child,
html[data-theme="light"] .feedback-thread .feedback-message-bubble header span:first-child{
  color:color-mix(in srgb,var(--role) 82%,#1a2230) !important;
}

/* ---- status pills on the suggestion cards ---------------------------- */
/* SUGGESTION / REVIEWING / PLANNED / RESOLVED were all one neutral grey. */

.feedback-status[data-status],
.feedback-badge[data-status]{
  --pill:var(--role-community,#8ea3bd);
  border:1px solid color-mix(in srgb,var(--pill) 48%,transparent);
  background:color-mix(in srgb,var(--pill) 16%,transparent);
  color:color-mix(in srgb,var(--pill) 76%,var(--ct-text,#f2f6fb));
}
.feedback-status[data-status="new"],.feedback-badge[data-status="new"]{--pill:#3fd0e8}
.feedback-status[data-status="reviewing"],.feedback-badge[data-status="reviewing"]{--pill:#e0a63c}
.feedback-status[data-status="planned"],.feedback-badge[data-status="planned"]{--pill:#a479ff}
.feedback-status[data-status="resolved"],.feedback-badge[data-status="resolved"]{--pill:#5fe0ad}
.feedback-status[data-status="declined"],.feedback-badge[data-status="declined"]{--pill:#e8798f}

.feedback-badge[data-kind]{--pill:var(--role-community,#8ea3bd)}
.feedback-badge[data-kind="suggestion"]{--pill:#3fd0e8}
.feedback-badge[data-kind="bug"]{--pill:#e8798f}
.feedback-badge[data-kind="question"]{--pill:#a479ff}
.feedback-badge[data-kind="other"]{--pill:#8ea3bd}

@media(prefers-contrast:more){
  .feedback-feed .feedback-message-bubble,
  .feedback-thread .feedback-message-bubble{
    border-width:2px;
    border-color:color-mix(in srgb,var(--role) 70%,transparent);
  }
}