/* ==========================================================================
   Byb. Help & support (support requests). New parts only; everything else is the app's own styles.
   ========================================================================== */

/* status pills: colour and words together, never colour alone */
.pill.reply { background: rgba(232,104,31,.16); color: #a8470e; }
.pill.withus { background: rgba(43,79,138,.13); color: var(--blue); }
.pill.done { background: var(--pitch-soft); color: var(--pitch); }

/* the request id, e.g. BYB-1042 */
.ref { font: 700 12px var(--body); letter-spacing: .06em; color: var(--muted); font-variant-numeric: tabular-nums; }

/* a request in a list */
.req { display: flex; align-items: center; gap: 10px; padding: 12px; min-height: 64px; border: 0; border-top: 1px solid var(--line-soft); background: transparent; width: 100%; text-align: left; color: var(--ink); text-decoration: none; }
.req:first-child { border-top: 0; }
.req .t { font-weight: 600; }
.req .chev { color: var(--muted); flex: none; }

/* category picker: icon chips in a grid */
.cat { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--field-line); background: var(--paper); color: var(--ink); font: 600 14px var(--body); text-align: left; }
.cat svg { flex: none; color: var(--pitch); }
.cat.on { background: var(--pitch); border-color: var(--pitch); color: #fff; }
.cat.on svg { color: #fff; }
.glass .cat { border-color: var(--g-edge); box-shadow: var(--g-hi); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); }
.glass .cat.on { background: linear-gradient(180deg, color-mix(in srgb, var(--pitch) 86%, #fff), var(--pitch)); border-color: rgba(255,255,255,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 18px color-mix(in srgb, var(--pitch) 40%, transparent); }

/* attachment chips */
.attach { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 6px; border-radius: 10px; border: 1px solid var(--field-line); background: var(--paper); font: 600 13px var(--body); color: var(--ink); max-width: 100%; }
.attach .thumb { width: 30px; height: 30px; border-radius: 7px; flex: none; background: linear-gradient(160deg, #dfe8e1, #b9c9bd); display: grid; place-items: center; color: #3f5546; }
.attach .x { border: 0; background: none; color: var(--muted); padding: 2px 4px; font-size: 16px; line-height: 1; }
.glass .attach { border-color: var(--g-edge); box-shadow: var(--g-hi); }

/* the conversation */
.thread { display: flex; flex-direction: column; gap: 12px; }
.msg { display: flex; gap: 8px; align-items: flex-end; max-width: 100%; }
.msg .who { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 800 11px var(--display); color: #fff; }
.msg .bubble { border-radius: 16px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; min-width: 0; }
.msg .meta { font-size: 12px; color: var(--muted); }
.msg.them .bubble { background: var(--paper); border: 1px solid var(--line); border-bottom-left-radius: 6px; max-width: 86%; }
.msg.me { flex-direction: row-reverse; }
.msg.me .bubble { background: var(--pitch); color: #fff; border-bottom-right-radius: 6px; max-width: 82%; }
.msg.me .meta { color: rgba(255,255,255,.78); text-align: right; }
.msg.me .attach { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); color: #fff; }
.msg.me .attach .thumb { background: rgba(255,255,255,.22); color: #fff; }
.glass .msg.them .bubble { border-color: var(--g-edge); box-shadow: var(--g-hi), var(--g-shadow); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); }
.glass .msg.me .bubble { background: linear-gradient(160deg, color-mix(in srgb, var(--pitch) 88%, #fff), var(--pitch)); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 22px color-mix(in srgb, var(--pitch) 35%, transparent); }
.sysline { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.sysline::before, .sysline::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* reply box pinned under the conversation */
.composer { display: flex; flex-direction: column; gap: 8px; }
.composer textarea.input { min-height: 76px; resize: none; }
.iconbtn.round { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--field-line); background: var(--paper); }
.glass .iconbtn.round { border-color: var(--g-edge); box-shadow: var(--g-hi); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); }

/* the big tick on "Request sent" */
.done-mark { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--pitch); color: #fff; }
.glass .done-mark { box-shadow: 0 0 0 8px color-mix(in srgb, var(--pitch) 18%, transparent), 0 12px 30px color-mix(in srgb, var(--pitch) 45%, transparent); }

/* rating faces */
.rate { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rate button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 12px; border: 1px solid var(--field-line); background: var(--paper); color: var(--ink); font: 600 13px var(--body); }
.rate button svg { color: var(--muted); }
.rate button.on { border-color: var(--pitch); background: var(--pitch-soft); }
.rate button.on svg { color: var(--pitch); }
.glass .rate button { border-color: var(--g-edge); box-shadow: var(--g-hi); }

/* the search field with an icon */
.searchbox { position: relative; }
.searchbox svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.searchbox .input { padding-left: 40px; }
/* dark mode */
:root[data-theme="dark"] .pill.reply { background: rgba(232,104,31,.22); color: #f3b088; }
:root[data-theme="dark"] .pill.withus { background: rgba(111,149,214,.18); color: #b5cbef; }
:root[data-theme="dark"] .pill.done { color: var(--boost); }
:root[data-theme="dark"] .cat svg { color: var(--boost); }
:root[data-theme="dark"] .cat.on svg { color: #fff; }
:root[data-theme="dark"] .attach .thumb { background: linear-gradient(160deg, #2b3a30, #1d2821); color: #9fb09f; }
:root[data-theme="dark"] .rate button.on svg { color: var(--boost); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pill.reply { background: rgba(232,104,31,.22); color: #f3b088; }
  :root:not([data-theme="light"]) .pill.withus { background: rgba(111,149,214,.18); color: #b5cbef; }
  :root:not([data-theme="light"]) .pill.done { color: var(--boost); }
  :root:not([data-theme="light"]) .cat svg { color: var(--boost); }
  :root:not([data-theme="light"]) .cat.on svg { color: #fff; }
  :root:not([data-theme="light"]) .attach .thumb { background: linear-gradient(160deg, #2b3a30, #1d2821); color: #9fb09f; }
  :root:not([data-theme="light"]) .rate button.on svg { color: var(--boost); }
}