/* v5 of the Atendimento settings screens that are not the queues: lists, closing statuses, Pix keys. */

/* A switched-off status, and Fechado while a status is required, go muted on the sheet: by color, not opacity. */
:where(html[data-visual="v5"]) .cs-closing-statuses .cs-picker-row[data-active="false"] :is(.cs-picker-row__name, .cs-picker-row__subtitle, .cs-closing-status__lock) {
  color: var(--ds-text-muted);
}

/* The forms sit on the drawn ground at the container's width, as the queue form does. */
:where(html[data-visual="v5"]) .cs-closing-status-form { max-inline-size: none; gap: var(--ds-space-6); }

/* The category names are a section of the page, not a block under a rule. */
:where(html[data-visual="v5"]) .cs-closing-outcome-names { padding-block-start: 0; border-block-start: 0; }
:where(html[data-visual="v5"]) .cs-closing-outcome-names__header { gap: var(--ds-space-1); }

/* A settings form (queue, list, Pix key): fields a step apart, the buttons one step under the last field, as in the
   contact panel's step. */
:where(html[data-visual="v5"]) .cs-settings-form { gap: var(--ds-space-4); }

/* The members picker sits a step under its label. */
:where(html[data-visual="v5"]) .cs-settings-form .cs-picker { gap: var(--ds-space-2); }

/* Quick replies' panel. The search over the list, as in every menu; "Ver mais" under the last row. */
:where(html[data-visual="v5"]) .cs-quick-reply-modal .cs-quick-reply-picker__find { margin-block: var(--ds-space-3) 0; }
:where(html[data-visual="v5"]) .cs-quick-reply-modal .cs-quick-reply-picker__more { display: flex; margin: var(--ds-space-2) auto 0; }
:where(html[data-visual="v5"]) .cs-quick-reply-modal .cs-quick-reply-picker__form { gap: var(--ds-space-4); }

/* "Prévia" and the examples' sides are named as the panel names a section: plain case, the info title and label. */
:where(html[data-visual="v5"]) .cs-quick-reply-modal :is(.cs-qr-preview__label, .cs-qr-example__label) {
  font-weight: var(--ds-weight-regular);
  line-height: var(--ds-info-leading);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ds-text-muted);
}
:where(html[data-visual="v5"]) .cs-quick-reply-modal .cs-qr-preview__label { font-size: var(--ds-info-title); }
:where(html[data-visual="v5"]) .cs-quick-reply-modal .cs-qr-example__label { font-size: var(--ds-info-label); }

/* Deleting a reply that came from the phone: the small danger pill on its own, not a bar across the panel. */
:where(html[data-visual="v5"]) .cs-quick-reply-modal .cs-quick-reply-picker__delete { align-self: flex-start; }

/* A Pix key's line under its name: the key and the receiver, each whole; on a phone each takes a line of its own,
   so the dot between them never hangs at the end of one. */
@media (max-width: 40rem) {
  :where(html[data-visual="v5"]) .cs-settings__sheet .cs-pix-key__part { display: block; }
  :where(html[data-visual="v5"]) .cs-settings__sheet .cs-pix-key__sep { display: none; }
}

/* The status bars: the name takes at most a third of the line, so on the phone the bar keeps its length (it was 54 px
   beside a 192 px name column). */
:where(html[data-visual="v5"]) .cs-results__bar { grid-template-columns: minmax(5rem, min(12rem, 33%)) 1fr auto; }

/* A protocol and a count are links on the line, in the body's medium like a list name, not bold. */
:where(html[data-visual="v5"]) :is(.cs-result-episodes__link, .cs-results__cell-link) { font-weight: var(--ds-weight-medium); }