/* ═══════════════════════════════════════════════════════════════════════════════
   MATCH DEAL PRO — HELP & SUPPORT

   The twelfth stylesheet, added for the AI Customer Support Center — which is what the
   manifest in `index.html` asks a new module to do rather than editing a shared blob.

   EVERY SELECTOR IN THIS FILE IS PREFIXED `.mdp-sup-`. Nothing here matches an element any
   earlier screen renders, so every screen that shipped before support paints identically
   with this file loaded or absent. That is the property `developer.css` established and
   every sheet since has kept: a new sheet may only add, and a sheet that reached
   `.mdp-badge` or `.mdp-card` would be a refactor of the component library wearing a
   stylesheet's clothes.

   WHAT THIS FILE IS NOT

   It is not a chat design. Requirement 28 rules out the cartoon help-desk look, and this is
   the vocabulary that keeps the support screen looking like the rest of the platform: a
   conversation drawn as a bordered transcript rather than as coloured speech bubbles with
   tails, an avatar-free author line, small chips, and no illustration anywhere. The two
   authors are distinguished by a 2px rail and a background one step off the surface —
   enough to scan, not enough to look like a messaging app.

   Everything else on the screen is an existing component: cards, tables, fields, badges,
   callouts, timelines, segmented controls and pagination. There is no second component
   library in here, and there should never be one.

   TOKENS ONLY, AND LOGICAL PROPERTIES ONLY

   Every value below is a token from `tokens.css`, so the customer's theme choice works
   without a second set of rules. Every inset, margin and border uses its logical form
   (`inline-start`, not `left`), so the whole screen mirrors in Arabic with no entry in
   `rtl.css` — which is a completed module.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── The transcript ──────────────────────────────────────────────────────────── */

.mdp-sup-convo {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-3);
}

/* An ordered list: the sequence of a support conversation IS its meaning, and a question
   read after its answer is a different conversation. `list-style: none` removes the marker
   without removing the semantics a screen reader announces. */
.mdp-sup-turns {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* One turn. The rail on the inline-start edge is the whole author signal — no bubble, no
   tail, no alternating alignment. Alternating sides doubles the reading width of a thread
   and is the first thing that makes an enterprise console look like a toy. */
.mdp-sup-turn {
  background: var(--mdp-surface-2);
  border: 1px solid var(--mdp-border-subtle);
  border-inline-start: 2px solid var(--mdp-border-strong);
  border-radius: var(--mdp-r-md);
  padding: var(--mdp-sp-3);
}

.mdp-sup-turn[data-author='assistant'] {
  background: var(--mdp-surface-3);
  border-inline-start-color: var(--mdp-brand);
}

/* The author line: who, and — on a ticket thread — when. Caps and faint, so the eye skips
   it on the way to the text and finds it when it is looking for it. */
.mdp-sup-turn-who {
  align-items: center;
  color: var(--mdp-text-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-semibold);
  gap: var(--mdp-sp-2);
  letter-spacing: var(--mdp-tracking-caps);
  margin: 0 0 var(--mdp-sp-2);
  text-transform: uppercase;
}

.mdp-sup-turn-at {
  color: var(--mdp-text-faint);
  font-weight: var(--mdp-fw-normal);
  letter-spacing: normal;
  margin-inline-start: auto;
  text-transform: none;
}

/* `pre-wrap` because the customer's own newlines are part of what they wrote: a pasted
   error, a numbered list of what they tried. Collapsing them loses the structure they
   used to make the problem legible. */
.mdp-sup-turn-body {
  color: var(--mdp-text);
  font-size: var(--mdp-fs-sm);
  line-height: var(--mdp-lh-normal);
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* The steps. A real `<ol>` with its numbers kept — these are instructions to perform in
   order, and a bulleted list of steps is a list of suggestions. */
.mdp-sup-steps {
  color: var(--mdp-text);
  display: flex;
  flex-direction: column;
  font-size: var(--mdp-fs-sm);
  gap: var(--mdp-sp-1);
  margin: var(--mdp-sp-3) 0 0;
  padding-inline-start: var(--mdp-sp-5);
}

/* The follow-up question, when the assistant needs one more fact. Set apart from the answer
   so it is not read as part of it. */
.mdp-sup-followup {
  border-top: 1px solid var(--mdp-border-subtle);
  color: var(--mdp-text-strong);
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-medium);
  margin: var(--mdp-sp-3) 0 0;
  padding-top: var(--mdp-sp-3);
}

/* "Open Deals" — the exact screen, as a real link. An answer that names a screen without
   offering it makes the customer navigate from memory. */
.mdp-sup-route {
  align-items: center;
  background: var(--mdp-brand-soft);
  border: 1px solid var(--mdp-brand-border);
  border-radius: var(--mdp-r-sm);
  color: var(--mdp-brand);
  display: inline-flex;
  font-size: var(--mdp-fs-xs);
  font-weight: var(--mdp-fw-semibold);
  margin-top: var(--mdp-sp-3);
  padding: var(--mdp-sp-1) var(--mdp-sp-3);
  text-decoration: none;
}

.mdp-sup-route:hover { background: var(--mdp-brand); color: var(--mdp-brand-contrast); }

/* The pending answer. A skeleton rather than a spinner, because it occupies the space the
   answer will occupy and the thread does not jump when it arrives. */
.mdp-sup-pending {
  border: 1px dashed var(--mdp-border);
  border-radius: var(--mdp-r-md);
  padding: var(--mdp-sp-3);
}

/* ── The opening ─────────────────────────────────────────────────────────────── */

.mdp-sup-opening {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-2);
}

/* "How can we help?" — the largest text on the screen, and the only large text on it.
   No illustration above it and no empty half-screen around it. */
.mdp-sup-greeting {
  color: var(--mdp-text-strong);
  font-size: var(--mdp-fs-xl);
  font-weight: var(--mdp-fw-bold);
  letter-spacing: -0.01em;
  margin: 0;
}

.mdp-sup-greeting-note {
  color: var(--mdp-text-muted);
  font-size: var(--mdp-fs-sm);
  margin: 0 0 var(--mdp-sp-2);
}

/* The eight example questions, as chips. They wrap and they are buttons, because pressing
   one asks it — an example the customer has to retype is decoration. */
.mdp-sup-examples {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdp-sp-2);
}

.mdp-sup-example {
  background: var(--mdp-surface-2);
  border: 1px solid var(--mdp-border);
  border-radius: var(--mdp-r-pill);
  color: var(--mdp-text);
  cursor: pointer;
  font: inherit;
  font-size: var(--mdp-fs-xs);
  padding: var(--mdp-sp-2) var(--mdp-sp-3);
  text-align: start;
  transition: background var(--mdp-dur-fast) var(--mdp-ease),
              border-color var(--mdp-dur-fast) var(--mdp-ease);
}

.mdp-sup-example:hover {
  background: var(--mdp-surface-3);
  border-color: var(--mdp-brand-border);
  color: var(--mdp-text-strong);
}

/* ── The composer ────────────────────────────────────────────────────────────── */

.mdp-sup-composer {
  border-top: 1px solid var(--mdp-border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-2);
  margin-top: var(--mdp-sp-4);
  padding-top: var(--mdp-sp-4);
}

.mdp-sup-composer-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdp-sp-3);
}

/* The one-line standing note under the send button: what the assistant is, and that a
   person is one press away. It is the honest framing requirement 28 asks for, and it costs
   one line rather than a banner. */
.mdp-sup-composer-note {
  color: var(--mdp-text-faint);
  font-size: var(--mdp-fs-2xs);
  margin: 0;
}

/* ── "Did this solve your issue?" ────────────────────────────────────────────── */

.mdp-sup-verdict {
  align-items: center;
  border-top: 1px solid var(--mdp-border-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdp-sp-3);
  margin-top: var(--mdp-sp-3);
  padding-top: var(--mdp-sp-3);
}

.mdp-sup-verdict-q {
  color: var(--mdp-text-strong);
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-semibold);
  margin: 0;
}

.mdp-sup-verdict-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdp-sp-2);
  margin-inline-start: auto;
}

/* ── The published boundary, and the troubleshooting already tried ───────────── */

.mdp-sup-boundary {
  color: var(--mdp-text-muted);
  display: flex;
  flex-direction: column;
  font-size: var(--mdp-fs-xs);
  gap: var(--mdp-sp-1);
  line-height: var(--mdp-lh-snug);
  margin: 0 0 var(--mdp-sp-3);
  padding-inline-start: var(--mdp-sp-5);
}

.mdp-sup-boundary:last-child { margin-bottom: 0; }

/* The "may not" list marked in the danger colour rather than with a different glyph: this
   is the list a customer scans to find out whether to expect the assistant to do a thing,
   and the two lists must not be mistakable for each other. */
.mdp-sup-boundary[data-kind='no'] { color: var(--mdp-text-faint); }
.mdp-sup-boundary[data-kind='no'] li::marker { color: var(--mdp-danger); }

.mdp-sup-boundary-head {
  color: var(--mdp-text-strong);
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-semibold);
  letter-spacing: var(--mdp-tracking-caps);
  margin: 0 0 var(--mdp-sp-2);
  text-transform: uppercase;
}

.mdp-sup-tried { margin-top: var(--mdp-sp-3); }

.mdp-sup-tried-head {
  color: var(--mdp-text-strong);
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-semibold);
  letter-spacing: var(--mdp-tracking-caps);
  margin: 0 0 var(--mdp-sp-2);
  text-transform: uppercase;
}

/* ── The ticket draft ────────────────────────────────────────────────────────── */

.mdp-sup-draft-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdp-sp-2);
}

/* ── My Tickets ──────────────────────────────────────────────────────────────── */

/* The status filter and the "ask the assistant" escape hatch on one line. The escape hatch
   is on the list for a reason: a customer who came here to file a ticket should still meet
   the assistant first, and this is the only place on this tab that offers it. */
.mdp-sup-filter {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdp-sp-3);
  justify-content: space-between;
}

/* ── One ticket ──────────────────────────────────────────────────────────────── */

.mdp-sup-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdp-sp-2);
}

/* The AI summary and the original request. Two labelled blocks rather than two cards: they
   are the same fact told twice — once compressed, once as the customer wrote it — and two
   cards would suggest two subjects. */
.mdp-sup-summary { margin-bottom: var(--mdp-sp-4); }
.mdp-sup-summary:last-child { margin-bottom: 0; }

.mdp-sup-summary-head {
  color: var(--mdp-text-muted);
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-semibold);
  letter-spacing: var(--mdp-tracking-caps);
  margin: 0 0 var(--mdp-sp-2);
  text-transform: uppercase;
}

.mdp-sup-summary-body {
  color: var(--mdp-text);
  font-size: var(--mdp-fs-sm);
  line-height: var(--mdp-lh-normal);
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.mdp-sup-reply {
  border-top: 1px solid var(--mdp-border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-2);
  margin-top: var(--mdp-sp-4);
  padding-top: var(--mdp-sp-4);
}

/* ── Narrow screens ──────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  /* The verdict actions drop under the question rather than being pushed off the edge by
     `margin-inline-start: auto`. Three buttons and a question do not fit on one phone line
     in either language, and in Arabic they fit even less well. */
  .mdp-sup-verdict-actions { margin-inline-start: 0; width: 100%; }
  .mdp-sup-filter { align-items: stretch; flex-direction: column; }
}