/*
 * The customer-facing ticket centre: the thread, the tiles, the preview overlay.
 *
 * ★★ ONE STYLESHEET, TWO SHELLS. The guest centre at /support and the VIP centre at /vip/support
 *    are the same conversation doing the same job; what differs between them is the chrome around
 *    it, which is what a shell is for. This was inline in the guest shell until the VIP centre
 *    needed it, and copying it would have been the third copy of something in this feature.
 *
 * ★★ ct- FOR "customer ticket", NOT g- FOR "guest". The rules were named g- when only guests used
 *    them; a VIP page carrying classes named after guests is a name that lies to whoever reads it
 *    next. Renamed when the second user arrived, which is the moment it is cheapest.
 *
 * ★ THE ADVERTISER APP IS NOT ON THIS FILE. Its ticket pages live inside the account app and use
 *   its aa- design system, which is a genuinely different look on purpose (a dark phone app), not
 *   a copy that drifted. Only the overlay is shared in behaviour, and that is a script.
 *
 * Colours come from the page's own tokens where they exist; the fallbacks keep this readable if
 * it is ever loaded somewhere that has none.
 */
:root {
  --ct-line: rgba(255, 255, 255, 0.10);
  --ct-panel: #141419;
  --ct-muted: #a0a0b0;
  --ct-gold: var(--gold-ffd700, #ffd700);
}

.ct-wrap { max-width: 760px; margin-left: auto; margin-right: auto; }
.ct-wrap-narrow { max-width: 620px; }

.ct-card {
  background: var(--ct-panel);
  border: 1px solid var(--ct-line);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
.ct-card-link { display: block; text-decoration: none; color: inherit; }
.ct-card-link:hover { border-color: rgba(var(--gold-ffd700-rgb, 255, 215, 0), 0.45); }

.ct-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ct-muted { color: var(--ct-muted); }
.ct-small { font-size: 0.82rem; }
.ct-mt { margin-top: 16px; }
.ct-mb { margin-bottom: 16px; }

.ct-title { margin: 0; font-size: 1.35rem; line-height: 1.3; }
.ct-subject { margin: 8px 0 4px; font-size: 1.1rem; line-height: 1.35; }

.ct-badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--ct-line); font-size: 0.78rem; color: var(--ct-muted); white-space: nowrap;
}

/* The thread. Support on the left, the customer on the right - a label alone makes you read every
   message twice to work out who is talking. */
.ct-msg { display: flex; margin-bottom: 10px; }
.ct-msg-them { justify-content: flex-start; }
.ct-msg-me { justify-content: flex-end; }
.ct-bubble { max-width: min(80%, 560px); background: var(--ct-panel); border: 1px solid var(--ct-line); border-radius: 14px; padding: 12px 14px; }
.ct-msg-me .ct-bubble { border-color: rgba(var(--gold-ffd700-rgb, 255, 215, 0), 0.35); }
.ct-body { margin-top: 6px; overflow-wrap: anywhere; }
.ct-when { margin-top: 6px; font-size: 0.78rem; color: var(--ct-muted); }


/* This ticket is pinned, which is why it is at the top of the list. */
.ct-pin-mark { color: var(--ct-gold); font-size: 0.75rem; margin-right: 2px; }

/* No customer-side edit marker: the owner asked twice for edits to leave no trace on the
   customer pages (2026-09-22). The rule that styled it was removed with it. */

/* Attachments are shown, not listed: on a support ticket the screenshot is usually the message
   and the sentence above it is the caption. */
.ct-files { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.ct-file { display: block; border: 1px solid var(--ct-line); border-radius: 10px; overflow: hidden; background: #0f0f14; }
.ct-file-img { line-height: 0; cursor: zoom-in; }
.ct-file-img img { display: block; max-width: 220px; max-height: 220px; object-fit: cover; }
.ct-file-vid { max-width: 320px; }
.ct-file-pdf { width: 100%; max-width: 420px; }
.ct-file-pdf iframe { display: block; width: 100%; height: 260px; border: 0; background: #fff; }
.ct-file-bar { display: flex; align-items: center; gap: 10px; padding: 6px 10px; font-size: 0.8rem; border-top: 1px solid var(--ct-line); }
.ct-file-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ct-muted); }
.ct-file-bar a, .ct-file-doc { color: var(--ct-gold); font-size: 0.82rem; text-decoration: none; }
.ct-file-doc { padding: 8px 12px; }

.ct-pinform { margin: 0; }

/* ★★ THE SELECTOR AND THE !important ARE BOTH LOAD-BEARING. The site's theme styles submit buttons
   with an !important rule at specificity (0,1,1) - a gold gradient, no border, 10px 24px padding.
   A plain class loses to it, and so does the class with !important, because an !important
   declaration at higher specificity still wins. Measured on the deployed page: three attempts lost
   before button.ct-pinbtn[type="submit"] (0,2,1) took.
   Pin is a quiet control in the ticket header, sitting beside the status badge; as the theme's primary
   gold button it shouted louder than the thing it sits next to. */
button.ct-pinbtn[type="submit"] {
  background-image: none !important;
  background-color: transparent !important;
  color: var(--ct-muted) !important;
  border: 1px solid var(--ct-line) !important;
  border-radius: 999px !important;
  padding: 2px 10px !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  box-shadow: none !important;
  width: auto !important;
  min-width: 0 !important;
  cursor: pointer;
}
button.ct-pinbtn[type="submit"]:hover { color: var(--ct-gold) !important; border-color: rgba(var(--gold-ffd700-rgb, 255, 215, 0), 0.45) !important; }
button.ct-pinbtn.is-on[type="submit"] { color: var(--ct-gold) !important;
  border-color: rgba(var(--gold-ffd700-rgb, 255, 215, 0), 0.45) !important; background-color: rgba(var(--gold-ffd700-rgb, 255, 215, 0), 0.10) !important; }

/* Alerts carry their own look rather than borrowing the theme's, which turned out not to hold the
   padding these pages assumed. A message telling somebody their code was wrong is the last thing
   that should render as unstyled body text. */
.ct-alert { border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; font-size: 0.92rem; }
.ct-alert-error { background: rgba(220, 60, 60, 0.10); border: 1px solid rgba(220, 60, 60, 0.45); color: #ffb4b4; }
.ct-alert-ok { background: rgba(var(--gold-ffd700-rgb, 255, 215, 0), 0.08); border: 1px solid rgba(var(--gold-ffd700-rgb, 255, 215, 0), 0.40); color: #ffe27a; }

/* The preview overlay (ticket-preview.js). */
html.tkpv-open { overflow: hidden; }
.tkpv { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.92); display: flex; flex-direction: column; }
.tkpv[hidden] { display: none; }
.tkpv-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: #cfcfd6; }
.tkpv-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; }
.tkpv-close { background: transparent; border: 0; color: #cfcfd6; font-size: 28px; line-height: 1; cursor: pointer; padding: 0 8px; }
.tkpv-close:hover { color: #fff; }
.tkpv-stage { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 0 16px 16px; min-height: 0; }
.tkpv-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tkpv-pdf { width: 100%; height: 100%; border: 0; background: #fff; }

@media (max-width: 640px) {
  .ct-bubble { max-width: 92%; }
}