/* Templates of a Meta inbox and the quick replies panel, in the v5. */

/* Templates list: the sync line under the explanation, the table on a sheet of its own width. */
:where(html[data-visual="v5"]) .cs-settings__lead .cs-tmpl-sync { display: block; margin-block-start: var(--ds-space-1); font-size: var(--ds-font-size-xs); color: var(--ds-text-muted); }
:where(html[data-visual="v5"]) .cs-settings__lead .cs-tmpl-sync--stale { color: var(--ds-warning); }
:where(html[data-visual="v5"]) .cs-panel.cs-tmpl-table { padding: var(--ds-space-2) var(--ds-space-3); }
:where(html[data-visual="v5"]) .cs-tmpl-table .cs-table__rowlink { color: inherit; }
:where(html[data-visual="v5"]) .cs-tmpl-table .cs-table td strong { font-weight: var(--ds-weight-medium); }
:where(html[data-visual="v5"]) .cs-tmpl-table :is(.cs-tmpl-component--muted, .cs-tmpl-quality--muted) { color: var(--ds-text-muted); }
:where(html[data-visual="v5"]) .cs-tmpl-row__error { color: var(--ds-negative); font-size: var(--ds-font-size-xs); }
:where(html[data-visual="v5"]) .cs-tmpl-row__error-row td { background: none; }

/* The table's header names its columns in the info title, plain case. */
:where(html[data-visual="v5"]) .cs-tmpl-table .cs-table th {
  font-size: var(--ds-info-title);
  font-weight: var(--ds-weight-regular);
  line-height: var(--ds-info-leading);
  letter-spacing: normal;
  text-transform: none;
}

/* The search sits over the sheet; the pager under it in quiet pills, the current page in the soft tint. */
:where(html[data-visual="v5"]) .cs-tmpl-search { margin-block-end: var(--ds-space-3); }
:where(html[data-visual="v5"]) .cs-tmpl-pager { margin-block-start: var(--ds-space-3); padding-inline: var(--ds-space-1); }
:where(html[data-visual="v5"]) .cs-tmpl-pager .cs-pager__total { font-size: var(--ds-info-label); color: var(--ds-text-muted); }
:where(html[data-visual="v5"]) .cs-tmpl-pager :is(.cs-pager__page, .cs-pager__gap) {
  min-inline-size: 30px;
  block-size: 30px;
  border-radius: var(--ds-radius-full);
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-weight-medium);
  color: var(--ds-text-secondary);
}
:where(html[data-visual="v5"]) .cs-tmpl-pager .cs-pager__page:hover { background: var(--ds-fill-hover); color: var(--ds-text); }
:where(html[data-visual="v5"]) .cs-tmpl-pager .cs-pager__page--current { background: var(--ds-cta-soft); color: var(--ds-on-cta-soft); }

/* Below the computer the table is a list: name and status on the first line, category and language under it, the
   rest on the template's own page. */
@media (width < 100ch) {
  :where(html[data-visual="v5"]) .cs-tmpl-table :is(.cs-table, .cs-table tbody) { display: block; }
  :where(html[data-visual="v5"]) .cs-tmpl-table .cs-table thead { display: none; }
  :where(html[data-visual="v5"]) .cs-tmpl-table .cs-table tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--ds-space-1);
    row-gap: 2px;
    padding: var(--ds-space-3) var(--ds-space-2);
    border-block-end: 1px solid var(--ds-border);
  }
  :where(html[data-visual="v5"]) .cs-tmpl-table .cs-table tbody tr:last-child { border-block-end: 0; }
  :where(html[data-visual="v5"]) .cs-tmpl-table .cs-table td { padding: 0; border: 0; }
  :where(html[data-visual="v5"]) .cs-tmpl-table .cs-table td > .cs-table__rowlink { display: inline; padding: 0; }
  :where(html[data-visual="v5"]) .cs-tmpl-table .cs-table td:nth-child(1) { grid-area: 1 / 1 / 2 / 3; min-inline-size: 0; overflow-wrap: anywhere; }
  :where(html[data-visual="v5"]) .cs-tmpl-table .cs-table td:nth-child(2) { grid-area: 1 / 3 / 3 / 4; }
  :where(html[data-visual="v5"]) .cs-tmpl-table .cs-table :is(td:nth-child(3), td:nth-child(4)) { font-size: var(--ds-info-label); color: var(--ds-text-muted); }
  :where(html[data-visual="v5"]) .cs-tmpl-table .cs-table td:nth-child(3) { grid-area: 2 / 1; }
  :where(html[data-visual="v5"]) .cs-tmpl-table .cs-table td:nth-child(4) { grid-area: 2 / 2; }
  :where(html[data-visual="v5"]) .cs-tmpl-table .cs-table td:nth-child(4)::before { content: "· "; }
  :where(html[data-visual="v5"]) .cs-tmpl-table .cs-table td:nth-child(n + 5) { display: none; }
  :where(html[data-visual="v5"]) .cs-tmpl-table .cs-table td[colspan] { display: block; grid-column: 1 / -1; }
}

/* A template and the builder: the sheet on the left, what the customer receives on the right. */
:where(html[data-visual="v5"]) .cs-tmpl-builder { gap: var(--ds-space-6); }
:where(html[data-visual="v5"]) .cs-tmpl-builder .input--box { --input-border-radius: var(--ds-radius-xl); }
:where(html[data-visual="v5"]) .cs-tmpl-meta__id { font-family: var(--ds-font-mono); font-size: var(--ds-font-size-xs); font-weight: var(--ds-weight-regular); color: var(--ds-text-muted); }
:where(html[data-visual="v5"]) .cs-tmpl-component {
  padding: var(--ds-space-3) var(--ds-space-4);
  border: 0;
  border-radius: var(--ds-radius-xl);
  background: var(--ds-fill);
  font-size: var(--ds-font-size-sm);
  color: var(--ds-text);
}
:where(html[data-visual="v5"]) .cs-tmpl-component--muted { color: var(--ds-text-muted); }
:where(html[data-visual="v5"]) .cs-tmpl-component-buttons li {
  border: 0;
  border-radius: var(--ds-radius-full);
  background: var(--ds-fill);
  padding: var(--ds-space-2) var(--ds-space-4);
  font-size: var(--ds-font-size-sm);
  color: var(--ds-text);
}

/* The builder's form sits on the drawn ground, like every settings form; its editor is a box field. */
:where(html[data-visual="v5"]) .cs-panel.cs-tmpl-form { padding: 0; border-radius: 0; background: none; }
:where(html[data-visual="v5"]) .cs-tmpl-editor { border-color: var(--ds-border-strong); border-radius: var(--ds-radius-xl); background: var(--ds-bg-pure); }
:where(html[data-visual="v5"]) .cs-tmpl-editor__toolbar { border-block-end-color: var(--ds-border); }
:where(html[data-visual="v5"]) .cs-tmpl-editor__textarea { font-size: var(--ds-font-size-sm); color: var(--ds-text); }
:where(html[data-visual="v5"]) .cs-tmpl-editor__count { color: var(--ds-text-muted); }
:where(html[data-visual="v5"]) .cs-tmpl-editor__count[data-state="over"] { color: var(--ds-negative); }

/* The preview is the received bubble of the conversation, loose on the ground: no frame, no shadow, no checks.
   One column as wide as the wider of bubble and buttons, so the buttons hang under the bubble at its width. */
:where(html[data-visual="v5"]) .cs-tmpl-preview__chat {
  display: grid;
  grid-template-columns: minmax(0, max-content);
  justify-content: start;
  align-content: start;
  gap: 0;
  padding: var(--ds-space-4) 0;
  border: 0;
  background: none;
}
:where(html[data-visual="v5"]) .cs-tmpl-preview__empty { align-self: flex-start; font-size: var(--ds-font-size-xs); color: var(--ds-text-muted); }
:where(html[data-visual="v5"]) .cs-tmpl-preview .cs-tmpl-preview__chat .cs-msg.cs-msg--me { justify-content: flex-start; }
:where(html[data-visual="v5"]) .cs-tmpl-preview .cs-tmpl-preview__chat .cs-msg.cs-msg--me:not(.cs-msg--note) .cs-msg__bubble {
  flex: 1;
  margin-inline-end: 0;
  border-radius: var(--bubble-radius);
  border-start-start-radius: var(--ds-radius-bubble-tail);
  background: var(--ds-msg-in);
  --cs-bubble-bg: var(--ds-msg-in);
  color: var(--ds-msg-in-text);
}
:where(html[data-visual="v5"]) .cs-tmpl-preview .cs-tmpl-preview__chat .cs-msg__check { display: none; }
:where(html[data-visual="v5"]) .cs-tmpl-preview .cs-tmpl-preview__chat .cs-msg.cs-msg--me ~ .cs-tmpl-preview__buttons {
  inline-size: auto;
  min-inline-size: 0;
  margin-inline: 0;
  border-radius: var(--bubble-radius);
  background: var(--ds-msg-in);
}
:where(html[data-visual="v5"]) .cs-tmpl-preview__btn { color: var(--ds-link); font-size: var(--ds-font-size-sm); }
:where(html[data-visual="v5"]) .cs-tmpl-preview__btn + .cs-tmpl-preview__btn { border-block-start-color: var(--ds-border); }
:where(html[data-visual="v5"]) .cs-tmpl-preview__media { border-radius: var(--ds-radius-md); background: var(--ds-fill); color: var(--ds-text-muted); }

@media (min-width: 901px) {
  :where(html[data-visual="v5"]) .cs-tmpl-preview { inset-block-start: var(--ds-space-6); }
}

/* Quick replies panel: the topbar sits flush on the modal's sheet, and the screens breathe under it. */
:where(html[data-visual="v5"]) .cs-quick-reply-modal__body { padding: 0; }
:where(html[data-visual="v5"]) .cs-quick-reply-picker { padding-block-end: var(--ds-space-4); }
:where(html[data-visual="v5"]) .cs-quick-reply-picker > .ds-panel-header {
  min-block-size: 56px;
  margin-block-end: var(--ds-space-3);
  padding: var(--ds-space-2) var(--ds-space-3) var(--ds-space-2) var(--ds-space-4);
  border-block-end-color: var(--ds-divider);
  background: none;
}
:where(html[data-visual="v5"]) .cs-quick-reply-picker > .ds-panel-header .ds-panel-header__lead { display: inline-grid; margin-inline-start: calc(-1 * var(--ds-space-2)); }
:where(html[data-visual="v5"]) .cs-quick-reply-picker > .ds-panel-header .ds-panel-header__name { font-size: var(--ds-font-size-base); }
:where(html[data-visual="v5"]) .cs-quick-reply-picker > :not(.ds-panel-header, .cs-quick-reply-picker__split, .cs-quick-reply-picker__form) { margin-inline: var(--ds-space-4); }
:where(html[data-visual="v5"]) .cs-quick-reply-picker__split { padding-inline: var(--ds-space-4); }
:where(html[data-visual="v5"]) .cs-quick-reply-picker__form { padding-inline: 0; }
:where(html[data-visual="v5"]) .cs-quick-reply-picker > .cs-quick-reply-picker__form { inline-size: auto; margin-inline: var(--ds-space-4); }

:where(html[data-visual="v5"]) .cs-quick-reply-picker__notice {
  padding: var(--ds-space-3) var(--ds-space-4);
  border-radius: var(--ds-radius-xl);
  background: var(--ds-fill);
  font-size: var(--ds-font-size-compact);
  color: var(--ds-text-secondary);
}
:where(html[data-visual="v5"]) .cs-qr-examples__link { color: var(--ds-link); font-size: var(--ds-font-size-xs); }

/* The rows are the "/" list's: the menu's hover pill, the shortcut in the account's text green. */
:where(html[data-visual="v5"]) .cs-quick-reply-picker .cs-quick-reply-list { gap: 0; margin-inline: calc(-1 * var(--ds-space-3)); }
:where(html[data-visual="v5"]) .cs-quick-reply-picker .cs-quick-reply-item__send {
  padding: var(--ds-space-2) var(--ds-space-3);
  border-radius: var(--ds-menu-item-radius);
  background: transparent;
}
:where(html[data-visual="v5"]) .cs-quick-reply-item__shortcut { color: var(--ds-on-cta-soft); font-size: var(--ds-font-size-xs); }
:where(html[data-visual="v5"]) .cs-quick-reply-item__preview { color: var(--ds-text-muted); font-size: var(--ds-font-size-compact); }
:where(html[data-visual="v5"]) .cs-quick-reply-item__send.is-active { background: var(--ds-menu-hover); }
:where(html[data-visual="v5"]) .cs-quick-reply-item :is(.cs-quick-reply-item__edit, .cs-quick-reply-item__delete) {
  inline-size: 28px;
  block-size: 28px;
  border-radius: var(--ds-radius-full);
  color: var(--ds-text-secondary);
}
:where(html[data-visual="v5"]) .cs-quick-reply-item__confirm-yes,
:where(html[data-visual="v5"]) .cs-quick-reply-item__confirm-no { border: 0; border-radius: var(--ds-radius-full); background: var(--ds-fill); color: var(--ds-text); }
:where(html[data-visual="v5"]) .cs-quick-reply-item__confirm-yes { color: var(--ds-negative); }

@media (any-hover: hover) {
  :where(html[data-visual="v5"]) .cs-quick-reply-picker .cs-quick-reply-item__send:hover { background: var(--ds-menu-hover); }
  :where(html[data-visual="v5"]) .cs-quick-reply-item :is(.cs-quick-reply-item__edit, .cs-quick-reply-item__delete):hover { background: var(--ds-fill-hover); color: var(--ds-text); }
  :where(html[data-visual="v5"]) .cs-quick-reply-item__confirm-no:hover { background: var(--ds-fill-hover); }
  :where(html[data-visual="v5"]) .cs-quick-reply-item__confirm-yes:hover { background: var(--ds-fill-hover); }
}

/* The form's options read as rows, not section labels; a list section is a quiet fill inside the sheet. */
:where(html[data-visual="v5"]) .cs-qr-options { display: flex; flex-direction: column; border: 0; border-radius: var(--ds-radius-xl); background: var(--ds-fill); overflow: hidden; }
:where(html[data-visual="v5"]) .cs-qr-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-4);
  padding: var(--ds-space-3) var(--ds-space-4);
  cursor: pointer;
}
:where(html[data-visual="v5"]) .cs-qr-option + .cs-qr-option { border-block-start: 1px solid var(--ds-border); }
:where(html[data-visual="v5"]) .cs-qr-option__text { display: flex; flex-direction: column; gap: var(--ds-space-1); min-inline-size: 0; }
:where(html[data-visual="v5"]) .cs-qr-option__text .cs-panel__title {
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-weight-medium);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ds-text);
}
:where(html[data-visual="v5"]) .cs-quick-reply-picker .cs-panel.cs-qr-section { padding: var(--ds-space-3); border-radius: var(--ds-radius-xl); background: var(--ds-fill); }
:where(html[data-visual="v5"]) .cs-qr-options__note { padding: var(--ds-space-3) var(--ds-space-4); border-block-start: 1px solid var(--ds-border); color: var(--ds-text-muted); font-size: var(--ds-font-size-xs); }
:where(html[data-visual="v5"]) .cs-qr-var { border-color: var(--ds-border); border-radius: var(--ds-radius-md); }
:where(html[data-visual="v5"]) .cs-qr-var__name { color: var(--ds-on-cta-soft); }
:where(html[data-visual="v5"]) .cs-qr-var__becomes { color: var(--ds-text-muted); }
:where(html[data-visual="v5"]) .cs-qr-clip { color: var(--ds-text-secondary); font-size: var(--ds-font-size-xs); }

@media (any-hover: hover) {
  :where(html[data-visual="v5"]) .cs-qr-option:not(.cs-qr-option--off):hover { background: var(--ds-fill-hover); }
  :where(html[data-visual="v5"]) .cs-qr-var:hover { border-color: var(--ds-border); background: var(--ds-fill-hover); }
}

/* "How it arrives on the phone": the section label over the conversation's ground, the bubble with no frame. */
:where(html[data-visual="v5"]) .cs-qr-preview__label {
  font-size: var(--ds-font-size-2xs);
  font-weight: var(--ds-weight-bold);
  letter-spacing: 0.06em;
  color: var(--ds-text-muted);
}
:where(html[data-visual="v5"]) .cs-qr-preview__phone { border: 0; border-radius: var(--ds-radius-2xl); background: var(--ds-bg-chat); }
:where(html[data-visual="v5"]) :is(.cs-qr-preview__empty, .cs-qr-preview__note) { color: var(--ds-text-muted); font-size: var(--ds-font-size-xs); }

/* The examples: each one a quiet fill, the shortcut in the text green. */
:where(html[data-visual="v5"]) .cs-qr-example { border: 0; border-radius: var(--ds-radius-xl); background: var(--ds-fill); }
:where(html[data-visual="v5"]) .cs-qr-example__shortcut { color: var(--ds-on-cta-soft); }
:where(html[data-visual="v5"]) :is(.cs-qr-examples__intro, .cs-qr-examples__note, .cs-qr-example__label, .cs-qr-example__written) { color: var(--ds-text-muted); }