/* ============ Help Centre (.pg-help) ============ */

/* ---- FAQs ---- */
.pg-help .help-toolbar { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.pg-help .help-search { position: relative; max-width: 480px; }
.pg-help .help-search > svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--muted); pointer-events: none;
}
.pg-help .help-search .input { padding-left: 40px; }

.pg-help .faq-group { padding: 16px 20px 6px; }
.pg-help .faq-group + .faq-group { margin-top: 14px; }
.pg-help .faq-cat {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: 0 0 4px;
}
.pg-help .faq-item { border-top: 1px solid var(--line); }
.pg-help .faq-item:first-of-type { border-top: 0; }
.pg-help .faq-q {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 2px; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.45;
}
.pg-help .faq-q:hover { color: var(--indigo-3); }
.pg-help .faq-q svg { width: 16px; height: 16px; flex: none; color: var(--muted); transition: transform .2s ease; }
.pg-help .faq-item.open .faq-q svg { transform: rotate(90deg); color: var(--gold-dark); }
.pg-help .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .24s ease; }
.pg-help .faq-item.open .faq-a { grid-template-rows: 1fr; }
.pg-help .faq-a-clip { overflow: hidden; min-height: 0; }
.pg-help .faq-a-text { padding: 0 26px 15px 2px; font-size: 13px; color: var(--muted); line-height: 1.65; }

/* ---- ticket list ---- */
.pg-help .hc-list { padding: 6px 18px; }
.pg-help .hc-ticket {
  display: flex; width: 100%; gap: 12px; align-items: center; padding: 13px 4px;
  background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer;
  text-align: left; font-family: inherit; color: var(--text); font-size: inherit;
}
.pg-help .hc-ticket:last-child { border-bottom: 0; }
.pg-help .hc-ticket:hover .list-title { color: var(--indigo-3); }
.pg-help .hc-ticket .badge { flex: none; }
.pg-help .hc-ticket .avatar { width: 34px; height: 34px; font-size: 12px; }
.pg-help .hc-chev { color: var(--muted); display: grid; place-items: center; flex: none; }

/* ---- ticket thread ---- */
.pg-help .hc-back { margin-bottom: 14px; }
.pg-help .hc-subject { font-size: 17px; margin-bottom: 3px; }
.pg-help .hc-head-main { min-width: 0; }
.pg-help .hc-status-row { margin-top: 14px; padding-top: 13px; border-top: 1px dashed var(--line); align-items: center; }
.pg-help .hc-status-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); margin-right: 2px;
}
.pg-help .hc-msgs { display: flex; flex-direction: column; gap: 16px; }
.pg-help .hc-msg { display: flex; gap: 10px; max-width: min(560px, 84%); }
.pg-help .hc-msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.pg-help .hc-msg .avatar { width: 32px; height: 32px; font-size: 11.5px; margin-top: 18px; }
.pg-help .hc-msg-col { min-width: 0; }
.pg-help .hc-msg-meta { margin-bottom: 3px; font-size: 11.5px; }
.pg-help .hc-msg.mine .hc-msg-meta,
.pg-help .hc-msg.mine .hc-msg-time { text-align: right; }
.pg-help .hc-bubble {
  background: var(--fill); border: 1px solid var(--line);
  border-radius: 4px 14px 14px 14px; padding: 10px 14px;
  font-size: 13.5px; overflow-wrap: anywhere;
}
.pg-help .hc-msg.mine .hc-bubble {
  background: var(--accent-tint); border-color: var(--brand-200); border-radius: 14px 4px 14px 14px;
}
.pg-help .hc-msg-time { margin-top: 3px; font-size: 11px; }
.pg-help .hc-resolved-note { margin-top: 14px; }
.pg-help .hc-composer {
  display: flex; gap: 10px; align-items: flex-end;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
}
.pg-help .hc-composer textarea { flex: 1; min-height: 46px; resize: vertical; }

/* ---- small screens ---- */
@media (max-width: 560px) {
  .pg-help .hc-cat-badge, .pg-help .hc-chev { display: none; }
  .pg-help .hc-msg { max-width: 94%; }
  .pg-help .hc-ticket .avatar { display: none; }
}