/* Copy that gets the answer, ported from the phase 2 use case concept (uc-copy): the play's templates and the Flow, as
   Meta would hold them. Each card: the template's name, category and language, when it sends, the message itself, and
   what it is for. A switch shows the template with its variables, or a preview filled from the sample lead's record.
   Both versions share one cell, so a card never changes height when the switch moves. The chat bubble (.bubble) and
   the Flow sheet (.wa-flow) are shared components in styles/components.css. Logical properties, so Arabic mirrors. */

/* Monospace names inside running text (template names, properties, events), as in each use case section */
.uc-code { padding: 1px 6px; border-radius: 6px; background: var(--crm-bg); color: var(--crm-ink); font: 600 0.8em/1.35 var(--mono); overflow-wrap: anywhere; }
/* A template as WhatsApp draws it: a bold header line, the body, a quiet footer and its buttons (as in the
   step-through demo) */
.uc-copy .uc-run-tpl-h { display: block; margin-bottom: 4px; font-weight: 800; }
.uc-copy .uc-run-tpl-f { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-soft); }
.uc-copy .uc-run-tpl .bubble-cta + .bubble-cta { margin-top: 0; }
.uc-copy .uc-run-tpl .bubble-cta:has(+ .bubble-cta) { margin-bottom: 0; }

.uc-copy-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px 48px; }
.uc-copy-head > div { display: grid; gap: 18px; max-width: 780px; }
.uc-copy-switch { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 5px; border: 0; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-sm); min-width: 0; }
.uc-copy-switch legend { padding: 0; }
.uc-copy-switch label {
  position: relative; display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  color: var(--ink-soft); font: 700 15px/1.2 var(--text); cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.uc-copy-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.uc-copy-switch label:has(input:checked) { background: var(--field-sky); color: var(--ink); transition: none; }
.uc-copy-switch label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .uc-copy-switch label:not(:has(input:checked)):hover { color: var(--ink); }
}
.uc-copy-field { margin-top: clamp(36px, 4.5vw, 60px); padding: clamp(16px, 2.6vw, 36px); border-radius: var(--r-xl); background: var(--field-mint); }
.uc-copy-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
/* Each card spans three rows of the list (about, message, why), so the parts line up across a row */
.uc-copy-card {
  min-width: 0;
  display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 14px;
  padding: 18px 18px 16px; border-radius: 26px;
  background: var(--sheet-bg); color: var(--ink); box-shadow: var(--shadow-sm);
}
@supports not (grid-template-rows: subgrid) {
  .uc-copy-card { display: flex; flex-direction: column; }
  .uc-copy-why { margin-top: auto; }
}
.uc-copy-about { display: grid; gap: 8px; align-content: start; }
.uc-copy-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.uc-copy-name code { padding: 3px 8px; border-radius: 8px; background: var(--crm-bg); color: var(--crm-ink); font: 700 13px/1.35 var(--mono); overflow-wrap: anywhere; }
.uc-copy-name .tag { min-height: 26px; padding: 2px 10px; background: var(--surface-2); font-size: 12px; }
.uc-copy-name .tag-sample { margin-inline-start: auto; background: var(--ink); color: var(--ground); }
.uc-copy-when { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; line-height: 1.4; color: var(--ink-soft); }
.uc-copy-when .i { flex: none; width: 16px; height: 16px; margin-top: 2px; }
/* The message on chat paper; the template and the preview share one cell */
.uc-copy-msg { display: grid; align-content: start; padding: 14px; border-radius: 18px; background: var(--chat-bg); overflow-anchor: none; }
.uc-copy-msg > * { grid-area: 1 / 1; }
.uc-copy[data-view="tpl"] [data-view="pre"], .uc-copy[data-view="pre"] [data-view="tpl"] { visibility: hidden; }
.uc-copy-msg .bubble { max-width: 100%; justify-self: start; align-self: start; }
.uc-var { padding: 0 5px; border-radius: 6px; background: color-mix(in srgb, var(--sky) 26%, transparent); color: var(--ink); font: 600 0.88em/1.4 var(--mono); white-space: nowrap; }
.uc-fill { padding: 0 3px; border-radius: 4px; background: color-mix(in srgb, var(--sky) 18%, transparent); }
/* The Flow, drawn as a static sheet */
.uc-copy-flow { width: 100%; box-shadow: var(--shadow-sm); }
.uc-copy-flow .wa-flow-body { gap: 12px; padding: 14px; }
.uc-copy-flow .wa-flow-title { font-size: 17px; }
.uc-copy-flow .wa-flow-hi, .uc-copy-flow .wa-flow-label { font-size: 14px; }
.uc-copy-flow .wa-flow-opt { min-height: 40px; padding: 6px 12px; font-size: 14px; cursor: default; }
.uc-copy-flow .wa-flow-chip { min-height: 36px; padding: 0 12px; font-size: 13px; cursor: default; }
.uc-copy-flow .wa-flow-fake { min-height: 40px; font-size: 14px; font-weight: 600; color: var(--ph); }
.uc-copy-flow .wa-flow-foot { padding: 10px 14px 12px; }
.uc-copy-flow .wa-flow-btn { min-height: 42px; font-size: 15px; }
.uc-copy-why { display: flex; align-items: flex-start; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.45; color: var(--ink-soft); text-wrap: pretty; }
.uc-copy-why .i { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--green); }
.uc-copy-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 18px; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.uc-copy-note .i { flex: none; width: 16px; height: 16px; margin-top: 2px; }
@media (max-width: 959px) {
  .uc-copy-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 479px) {
  .uc-copy-card { padding: 16px 14px 14px; }
  .uc-copy-msg { padding: 10px; }
  .uc-copy-switch label { padding: 0 14px; font-size: 14px; }
}