/* The ticket modal (customer_support/conversations/_ticket_facts): the clock, the facts, the people and the queue. */
.cs-ticket-modal__clock {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.9rem 0;
  margin-block: 0.9rem 1rem;
  border-block: 1px solid var(--border);
}
.cs-ticket-modal__clock-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--txt-muted);
}
.cs-ticket-modal__clock-value {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.cs-ticket-modal__facts { display: flex; flex-direction: column; margin: 0 0 1.2rem; text-align: start; }
.cs-ticket-modal__facts:not(.ds-facts) > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-block-end: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
}
.cs-ticket-modal__facts:not(.ds-facts) > div:last-child { border-block-end: 0; }
.cs-ticket-modal__facts:not(.ds-facts) dt {
  font-size: 0.78rem;
  color: var(--txt-muted);
  white-space: nowrap;
}
.cs-ticket-modal__facts:not(.ds-facts) dd { margin: 0; font-size: 0.85rem; color: var(--txt); text-align: end; }
.cs-ticket-modal__by { color: var(--txt-muted); }
.cs-ticket-modal__follow-up-edit { margin-inline-start: 0.5rem; }
.cs-ticket-modal__canais { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; }
.cs-ticket-modal__canal { display: inline-flex; align-items: center; gap: 0.35rem; }
.cs-ticket-modal__canal-count { color: var(--txt-muted); }
.cs-ticket-modal__pending { color: var(--txt-muted); font-style: italic; }
.cs-ticket-modal__fact--alert dd { color: var(--color-negative, oklch(0.6 0.2 25)); font-weight: 600; }

.cs-ticket-modal__section {
  margin: 0 0 0.5rem;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--txt-muted);
  text-align: start;
}
.cs-ticket-modal__crew { margin-block-end: 1.2rem; }
.cs-ticket-modal__member { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0; }
.cs-ticket-modal__member-name { flex: 1; font-size: 0.85rem; color: var(--txt); text-align: start; }
.cs-ticket-modal__role { font-size: 0.72rem; color: var(--txt-muted); }

.cs-assign__list {
  min-block-size: 0;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  background: var(--bg-pure);
  overscroll-behavior: contain;
}
.cs-assign__form { display: contents; }
.cs-assign__row { padding: 0.4rem 0.7rem; gap: 0.6rem; }
.cs-assign__row .cs-picker-row__name { font-size: 0.85rem; }
.cs-assign__list > .cs-assign__form:last-of-type .cs-assign__row { border-block-end: 0; }

.cs-assign-popover {
  position: fixed;
  inset: auto;
  margin: 0;
  inline-size: min(21rem, calc(100vw - 2rem));
  max-block-size: min(24rem, 62vh);
  padding: 0.6rem;
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: 0.9rem;
  box-shadow: 0 16px 40px oklch(0 0 0 / 0.28);
  overflow: hidden;
}
.cs-assign-popover:popover-open { display: flex; flex-direction: column; gap: 0.6rem; }
.cs-assign-popover::backdrop { background: transparent; }
.cs-assign-popover .cs-assign__list { max-block-size: min(18rem, 42vh); }

.cs-crew__add {
  --hover-size: 0;
  display: inline-grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  border: 1px dashed var(--border-strong);
  border-radius: 999px;
  color: var(--txt-muted);
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
}
.cs-crew__add:hover { color: var(--accent-strong); border-color: var(--accent); background: var(--accent-soft); }
.cs-ticket-modal__crew .cs-ticket-modal__section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.cs-ticket-modal__none { margin: 0; font-size: 0.8rem; color: var(--txt-muted); }
.cs-ticket-modal__crew:has(.cs-ticket-modal__member--assignee) .cs-ticket-modal__none { display: none; }
.cs-ticket-modal__member-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-assign__empty { margin: 0; padding: 0.8rem; font-size: 0.8rem; color: var(--txt-muted); text-align: center; }

/* v5: the ticket reads like the contact panel. The clock is one quiet line under the title, the facts are the panel's
   fact rows with icons (ds_facts.css) in the info line's type (ds_info_line.css): the value in the body size on top, its
   name under it, smaller and muted, everything flush left; the section names are the panel's. */
:where(html[data-visual="v5"]) .cs-ticket-modal__clock {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--ds-space-2);
  margin-block: var(--ds-space-3) var(--ds-space-2);
  padding: 0 0 var(--ds-space-3);
  border-block-start: 0;
}
:where(html[data-visual="v5"]) .cs-ticket-modal__clock-label {
  font-size: var(--ds-info-title);
  font-weight: var(--ds-weight-regular);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ds-text-muted);
}
:where(html[data-visual="v5"]) .cs-ticket-modal__clock-value {
  font-size: var(--ds-font-size-xl);
  font-weight: var(--ds-weight-semibold);
  line-height: 1.2;
  color: var(--ds-text);
}

:where(html[data-visual="v5"]) .cs-ticket-modal__facts.ds-facts { margin-block-end: var(--ds-space-6); }
:where(html[data-visual="v5"]) .cs-ticket-modal__pending { font-style: normal; }
/* The wait keeps its alarm in colour only: the body's size, as every other value. */
:where(html[data-visual="v5"]) .cs-ticket-modal__facts .cs-ticket-modal__fact--alert :is(dd, .ds-facts__icon) { color: var(--ds-negative); }
:where(html[data-visual="v5"]) .cs-ticket-modal__facts .cs-ticket-modal__fact--alert dd { font-weight: var(--ds-weight-medium); }

/* A channel per line, as a compact list in one grid, so the kind starts at the same x on every line: the badge, the name,
   the kind small and muted, the count. Content columns are sized before the fr one, so the name gives way first (ellipsis),
   the kind only once the name is down to 12ch, enough to tell two canais apart, and the count never. */
:where(html[data-visual="v5"]) .cs-ticket-modal__canais {
  display: grid;
  grid-template-columns: auto minmax(min(12ch, 100%), 1fr) minmax(0, auto) auto;
  align-items: baseline;
  gap: var(--ds-space-1) var(--ds-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
:where(html[data-visual="v5"]) .cs-ticket-modal__canal { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; min-inline-size: 0; }
:where(html[data-visual="v5"]) :is(.cs-ticket-modal__canal-name, .cs-ticket-modal__canal-meta) { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(html[data-visual="v5"]) :is(.cs-ticket-modal__canal-meta, .cs-ticket-modal__canal-count) { font-size: var(--ds-info-label); color: var(--ds-text-muted); }
:where(html[data-visual="v5"]) .cs-ticket-modal__canal-count { grid-column: 4; white-space: nowrap; }

:where(html[data-visual="v5"]) .cs-ticket-modal__section {
  font-size: var(--ds-info-title);
  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-ticket-modal__none { font-size: var(--ds-info-value); text-align: start; }

/* The ticket's queue is a section like the people above it: its name, and under it, flush left, the chip of the queue the
   conversation is in, which opens the queue menu in the menu shell (ds_menu.css), one compact row per queue with its
   dotted chip and the check on the chosen. The menu is a popover, so the modal's own scroll never clips it. */
.cs-ticket-modal__queue {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-space-2);
  margin-block-end: var(--ds-space-4);

  > .cs-ticket-modal__section { margin: 0; }
}

.cs-ticket-queue__trigger {
  --hover-size: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  min-inline-size: 0;
  max-inline-size: 100%;
  margin-inline-start: -2px;
  padding: 2px var(--ds-space-2) 2px 2px;
  border: 0;
  border-radius: var(--ds-radius-full);
  background: transparent;
  color: var(--ds-text-muted);
  cursor: pointer;

  > .ds-chip { min-inline-size: 0; }
  &:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }
  &:has(+ .cs-ticket-queue__menu:popover-open) { background: var(--ds-hover); color: var(--ds-text); }
  &:has(+ .cs-ticket-queue__menu:popover-open) .cs-ticket-queue__caret { rotate: 180deg; }
}

@media (any-hover: hover) {
  .cs-ticket-queue__trigger:hover { background: var(--ds-hover); color: var(--ds-text); }
}

.cs-ticket-queue__caret { flex-shrink: 0; transition: rotate 0.15s ease; }

.cs-ticket-queue__menu {
  position: fixed;
  inset: auto;
  margin: 0;
  translate: none;
  inline-size: max-content;
  max-inline-size: min(20rem, calc(100vw - 16px));
  max-block-size: min(22rem, 60vh);
}
.cs-ticket-queue__menu:not(:popover-open) { display: none; }
.cs-ticket-queue__menu::backdrop { background: transparent; }

.cs-ticket-queue__form { display: contents; }

.ds-menu .cs-ticket-queue__item {
  min-block-size: var(--ds-menu-choice-height);

  > .ds-chip { flex: 0 1 auto; min-inline-size: 0; }
  &:disabled { cursor: default; filter: none; }
}

@media (pointer: coarse) {
  .ds-menu .cs-ticket-queue__item { min-block-size: var(--ds-menu-item-height); }
}

/* Turbo marks the form while the change is on its way: the ring turns inside the clicked row, where the check will land. */
.cs-ticket-queue__spinner { display: none; margin-inline-start: auto; }
.cs-ticket-queue__form[aria-busy="true"] .cs-ticket-queue__spinner { display: block; }
.cs-ticket-queue__menu:has(.cs-ticket-queue__form[aria-busy="true"]) .cs-ticket-queue__item { pointer-events: none; }

.cs-ticket-queue__note { font-size: var(--ds-font-size-xs); font-weight: var(--ds-weight-regular); color: var(--ds-text-muted); }

.cs-ticket-queue__error {
  margin: 0;
  font-size: var(--ds-info-label);
  line-height: var(--ds-info-leading);
  color: var(--ds-negative);
  text-align: start;
}