/* The customer ticket portal — hand-written, dependency-free.
 *
 * Deliberately NOT the sage-operator palette. This page is the MSP's face to THEIR customer, who
 * has never heard of Juvaro.
 *
 * ONE FIXED PALETTE, and that is a platform decision rather than a shortcut. Per-tenant accents were
 * removed platform-wide on 2026-07-30; the `accent` column on shared.tenant_branding still exists and
 * is deliberately dormant, and SFS's customer page records the same choice. Branding here is the
 * MSP's LOGO and nothing else — wiring an accent would quietly reverse that decision for one page.
 */

:root {
  --brand: #3f4c38;
  --brand-soft: #eef1ea;
  --ink: #1b1f18;
  --ink-2: #555c50;
  --line: #e2e2dc;
  --surface: #ffffff;
  --bg: #f6f6f3;
  --danger: #b5564b;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.wrap { max-width: 720px; margin: 0 auto; padding: 24px 16px 64px; }

.loading, .dead { color: var(--ink-2); padding: 48px 0; text-align: center; }
.dead h1 { font-size: 18px; color: var(--ink); margin: 0 0 8px; }

/* ── passcode gate ──────────────────────────────────────────────────────────────────────── */
.gate { max-width: 380px; margin: 48px auto; text-align: center; }
.gate h1 { font-size: 18px; margin: 0 0 8px; }
.gate p { color: var(--ink-2); font-size: 14px; margin: 0 0 18px; }
.gate input {
  width: 100%; padding: 12px; font: 20px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .3em; text-align: center;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: inherit;
}
.gate input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.gate .reply-actions { justify-content: center; margin-top: 14px; }

.brand { margin-bottom: 14px; }
.brand img { max-height: 40px; max-width: 200px; display: block; }

/* ── header ─────────────────────────────────────────────────────────────────────────────── */
.hd { margin-bottom: 20px; }
.ref { font: 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-2); letter-spacing: .04em; }
.hd h1 { font-size: 22px; margin: 6px 0 12px; line-height: 1.3; }

.meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip {
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand); border: 1px solid transparent;
}
.chip.closed { background: var(--surface); color: var(--ink-2); border-color: var(--line); }
.muted { color: var(--ink-2); font-size: 13px; }

/* The original request. Newest-first puts it at the BOTTOM — it is the oldest thing on the page —
   so it is labelled and visually quieter than a message rather than leading the page. */
.orig { margin-top: 28px; }
.orig h2 { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 0 0 8px; }
.desc {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; white-space: pre-wrap;
}

/* ── conversation ───────────────────────────────────────────────────────────────────────── */
.msgs { display: flex; flex-direction: column; gap: 12px; }
.msg {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px;
}
/* The customer's own words sit visually apart from the desk's, so a long thread stays readable
   at a glance rather than needing the name read every time. */
.msg.customer { background: var(--brand-soft); border-color: transparent; }
.msg-hd { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.msg-who { font-size: 13px; font-weight: 600; }
.msg-at { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.msg-body { white-space: pre-wrap; overflow-wrap: anywhere; }

.files { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.file {
  font-size: 13px; background: none; border: none; padding: 0; cursor: pointer;
  color: var(--brand); text-align: left; text-decoration: underline;
}
.file:disabled { color: var(--ink-2); cursor: default; text-decoration: none; }
.file-size { color: var(--ink-2); text-decoration: none; }

/* ── reply ──────────────────────────────────────────────────────────────────────────────── */
/* Above the thread now, so the gap that used to separate it from the last message becomes the gap
   that separates it from the header. */
.reply { margin: 20px 0 24px; }
.reply h2 { font-size: 15px; margin: 0 0 8px; }
.reply textarea {
  width: 100%; min-height: 110px; padding: 12px; font: inherit; resize: vertical;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: inherit;
}
.reply textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.reply-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; }

.btn {
  font: inherit; padding: 9px 18px; border-radius: var(--radius); cursor: pointer;
  background: var(--brand); color: #fff; border: 1px solid var(--brand);
}
.btn:disabled { opacity: .5; cursor: default; }
/* Attach is secondary to Send — one primary action per row, or neither reads as the one to press. */
.btn-quiet { background: var(--surface); color: var(--ink); border-color: var(--line); }

/* ── staged attachments ─────────────────────────────────────────────────────────────────── */
.staged { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.staged-file { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.staged-x {
  font: inherit; line-height: 1; background: none; border: none; cursor: pointer;
  color: var(--ink-2); padding: 0 4px;
}
.staged-x:hover { color: var(--danger); }

.note { font-size: 13px; }
.note.err { color: var(--danger); }
.note.ok { color: var(--brand); }

.foot { margin-top: 40px; font-size: 12px; color: var(--ink-2); text-align: center; }