/* Criar tarefa, a step of the conversation's "Mais opções" menu: the item becomes the step's header with a back caret,
   the other items leave, and the form takes the menu's own surface. Nothing floats over the menu. */
.cs-task-popover > summary { list-style: none; }
.cs-task-popover > summary::-webkit-details-marker { display: none; }

.cs-task-popover__back { display: none; }

.ds-menu:has(> .cs-task-popover[open]) {
  inline-size: min(22rem, calc(100vw - 16px));

  > :not(.cs-task-popover) { display: none; }
}

.cs-task-popover[open] > .cs-task-popover__summary {
  font-weight: var(--ds-weight-semibold);

  > .cs-task-popover__icon { display: none; }
  > .cs-task-popover__back { display: block; color: var(--ds-text-muted); }
}

.cs-task-popover__panel { padding: var(--ds-space-2); }

.cs-task-form {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  white-space: normal;
}


/* One line at every width: the board's name gives way, the assignee's name stops at 6rem, the due date never cuts. */
.cs-task-form__meta {
  display: flex;
  align-items: center;
  gap: var(--ds-space-1);
  min-inline-size: 0;

  > * { flex-shrink: 0; }
  > .task-destination { display: flex; flex-shrink: 1; min-inline-size: 60px; }
  > [popovertarget] { max-inline-size: 6rem; }
}

.cs-task-form__pick.ds-chip {
  max-inline-size: 100%;
  color: var(--ds-text);

  > svg { inline-size: 14px; block-size: 14px; color: var(--ds-text-muted); }
}

/* The board picker is the Tasks button, whose own rules (tasks.css loads later) would draw it outlined and small. */
.cs-task-form__meta .task-destination__button.ds-chip {
  min-inline-size: 0;
  max-inline-size: 100%;
  padding-inline: 10px;
  border: 0;
  background: light-dark(var(--ds-bg-subtle), var(--ds-surface));
  font-size: var(--ds-status-font);
  line-height: 1;
}

:where(html[data-visual="v5"]) .cs-task-form__meta .task-destination__button.ds-chip { background: var(--ds-surface); }
.cs-task-form__meta .task-destination__icon { color: var(--ds-text-muted); }
.cs-task-form__meta .task-destination__button > svg,
.cs-task-form__meta .task-destination__icon > svg { inline-size: 14px; block-size: 14px; }
.cs-task-form__meta .task-destination__button > svg { inline-size: 12px; block-size: 12px; margin-inline-start: -2px; color: var(--ds-text-muted); }
.cs-task-form__meta .task-destination__button.ds-chip:hover { background: light-dark(var(--ds-hover), var(--ds-border)); }

/* The hidden utility sits in a layer, and the chip's display (unlayered) would beat it: one due chip at a time. */
.cs-task-form__pick.hidden { display: none; }

.cs-task-form__pick--set.ds-chip {
  background: var(--ds-cta-soft);
  color: var(--ds-on-cta-soft);

  > svg { color: inherit; }
}

.cs-task-form__face { display: inline-flex; }
.cs-task-form__face > * { flex-shrink: 0; }

.cs-task-form__caret { margin-inline-start: -2px; }

.cs-task-form__clear {
  display: inline-flex;
  margin-inline-end: -4px;
  padding: 2px;
  border-radius: var(--ds-radius-full);
  cursor: pointer;
}

.cs-task-form__clear:hover { background: color-mix(in oklab, currentColor 16%, transparent); }

.cs-task-form__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-2);
  margin-block-start: var(--ds-space-1);
}

.cs-task-form__link {
  display: flex;
  align-items: center;
  gap: var(--ds-space-1);
  min-inline-size: 0;
  margin: 0;
  color: var(--ds-text-muted);
  font-size: var(--ds-status-font-sm);

  > svg { flex-shrink: 0; }
  > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  > span::first-letter { text-transform: uppercase; }
}

.cs-task-form__submit { flex-shrink: 0; }

/* An open task of this conversation, on top of the form. */
.cs-task-form__existing {
  display: flex;
  align-items: baseline;
  gap: var(--ds-space-1);
  margin: 0;
  padding: 0.35rem var(--ds-space-2);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-cta-soft);
  font-size: var(--ds-status-font-sm);
  color: var(--ds-text);

  > svg { flex: none; align-self: center; color: var(--ds-on-cta-soft); }
}

.cs-task-form__existing-text { flex: 1; min-inline-size: 0; }
.cs-task-form__existing-link { flex: none; font-weight: var(--ds-weight-semibold); color: var(--ds-on-cta-soft); }
.cs-task-form__existing-more { margin: 0; padding-inline: var(--ds-space-2); font-size: var(--ds-status-font-sm); color: var(--ds-text-muted); }

.cs-task-form__error {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-1);
  margin: 0;
  padding: 0.35rem var(--ds-space-2);
  border-radius: var(--ds-radius-lg);
  background: color-mix(in oklch, var(--ds-negative) 12%, transparent);
  font-size: var(--ds-status-font-sm);
  color: var(--ds-text);

  > svg { flex: none; margin-block-start: 0.1rem; color: var(--ds-negative); }
}

/* What the customer said, going in as a quote: read only, each line with its time. */
.cs-task-form__quote {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-1);
  max-block-size: 9rem;
  overflow-y: auto;
  padding: var(--ds-space-1) 0 var(--ds-space-1) var(--ds-space-2);
  border-inline-start: 3px solid var(--ds-border-strong);
  font-size: var(--ds-status-font-sm);
  color: var(--ds-text-muted);
}

.cs-task-form__quote-line { margin: 0; line-height: 1.35; }
.cs-task-form__quote-at { margin-inline-end: 0.35rem; font-variant-numeric: tabular-nums; font-weight: var(--ds-weight-semibold); }