/* Where a notice sits: in a centred modal it still reads from its icon; in a settings row and the contact panel it keeps to its column. */
.cs-modal .cs-notice { text-align: start; margin-block-start: 0.75rem; }
.cs-settings__sheet .cs-picker-row__body .cs-notice { align-self: flex-start; max-inline-size: 100%; margin-block-start: 0.25rem; white-space: normal; }
/* v5, on the phone: the channel card's session warning puts its label over its sentence, both beside the icon, instead
   of the sentence squeezed into a column of one or two words beside the label. */
@media (max-width: 40rem) {
  :where(html[data-visual="v5"]) .cs-conn-card__body > .cs-notice:has(> .cs-notice__label) {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 8px;
    row-gap: 2px;
  }
  :where(html[data-visual="v5"]) .cs-conn-card__body > .cs-notice > .cs-notice__text { grid-column: 2; }
}

/* One scale for every notice, in px so the computer's 19 px root does not swell it: 13 px text on an 18 px line,
   the 16 px icon centred on the first line and 8 px from the text; one line is 34 px tall. */
.cs-notice {
  padding: var(--ds-notice-padding-block) var(--ds-notice-padding-inline);
  border-radius: var(--ds-notice-radius);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  font-size: var(--ds-status-font);
  line-height: 18px;
  color: var(--ds-text-secondary);
}

.cs-notice--warning {
  border-color: color-mix(in oklch, var(--ds-negative) 28%, var(--ds-border));
  background: color-mix(in oklch, var(--ds-negative) 7%, var(--ds-surface));
}

.cs-notice--negative {
  border-color: color-mix(in oklch, var(--ds-negative) 45%, transparent);
  background: color-mix(in oklch, var(--ds-negative) 8%, transparent);
  color: var(--ds-negative);
}

.cs-notice--waiting {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.cs-notice--tip { background: var(--ds-cta-soft); }
.cs-notice--tip .cs-notice__label { color: var(--ds-on-cta-soft); }

/* Inside a line of other things, the notice drops its box and keeps only its tone: the thin line, 12 px on a 16 px line,
   for what is worth knowing and asks nothing (the group's single check). A long one wraps under its own text, the icon
   staying by the first line. */
.cs-notice--inline {
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
  min-inline-size: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--ds-status-font-sm);
  line-height: 16px;
}

.cs-notice:has(> .cs-notice__icon) {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.cs-notice--inline:has(> .cs-notice__icon) { display: inline-flex; gap: 4px; }
/* The icon is the line's height minus itself, halved, below the top: 16 on 18 and 14 on 16 are both 1 px. */
.cs-notice__icon { flex-shrink: 0; inline-size: 16px; block-size: 16px; margin-block-start: 1px; }
.cs-notice--inline .cs-notice__icon { inline-size: 14px; block-size: 14px; }

/* A face sits in the start padding, beside the first line however narrow the notice, bleeding 3 px so one line stays 34 px;
   the action drops below the sentence where both do not fit. */
.cs-notice:has(> .cs-notice__face) {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px 8px;
  padding-inline-start: calc(var(--ds-notice-padding-inline) + 32px);

  > .cs-notice__text { flex: 1 1 auto; min-inline-size: 0; }
  /* A long name ends in an ellipsis inside the notice; the button's accessible name keeps all of it. */
  > .cs-notice__action { min-inline-size: 0; max-inline-size: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  /* With its icon the action stays a row (an svg is a block), and the label is what gives way. */
  > .cs-notice__action > span { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
}
.cs-notice__face {
  position: absolute;
  inset-block-start: calc(var(--ds-notice-padding-block) - 3px);
  inset-inline-start: var(--ds-notice-padding-inline);
  display: flex;
  inline-size: 24px;
  block-size: 24px;
}

/* The same thin line folded into its icon, for a bar with no room: the sentence is the tooltip and the accessible name. */
.cs-notice.cs-notice--icon {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: var(--ds-status-height);
  block-size: var(--ds-status-height);
  padding: 0;
  border: 0;
  border-radius: var(--ds-radius-full);
  background: none;
  color: var(--ds-text-muted);
  cursor: help;

  > .cs-notice__icon { margin: 0; }
  &:hover { background: var(--ds-hover); color: var(--ds-text-secondary); }
  &:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }
}

.cs-notice__label {
  color: var(--ds-accent);
  flex-shrink: 0;
}

.cs-notice__action {
  --hover-size: 0;
  display: inline-flex;
  align-items: center;
  margin-inline-start: auto;
  margin-block: -3px;
  flex-shrink: 0;
  block-size: var(--ds-status-height);
  padding-inline: 10px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-full);
  background: var(--ds-bg-pure);
  font-size: var(--ds-status-font-sm);
  line-height: 1;
  cursor: pointer;
}

.cs-notice__action:hover { background: var(--ds-hover); }

.cs-notice--draft-elsewhere {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block-end: 8px;
  min-inline-size: 0;
}

.cs-notice--draft-elsewhere > svg { flex-shrink: 0; }

.cs-notice--draft-elsewhere .cs-notice__text {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A tone that lays the notice out in flex would otherwise show it while hidden. */
.cs-notice[hidden] { display: none; }

/* v5: no border in any tone, the surface's own colour sets the notice off; attention is amber instead of the error's red, and the label is the green text. */
html[data-visual="v5"] .cs-notice { border-color: transparent; }

html[data-visual="v5"] .cs-notice--warning { background: color-mix(in oklch, var(--ds-alert) 14%, transparent); }

html[data-visual="v5"] .cs-notice--negative {
  background: color-mix(in oklch, var(--ds-negative) 10%, transparent);
  color: var(--ds-negative);
}

html[data-visual="v5"] .cs-notice__label { color: var(--ds-on-cta-soft); }
/* An amber notice names itself in its own ink: the green label read as good news over "Sessão desconectada". */
html[data-visual="v5"] .cs-notice--warning .cs-notice__label { color: var(--ds-warning-text); }
html[data-visual="v5"] .cs-notice__action { border-color: transparent; font-weight: var(--ds-weight-semibold); }
html[data-visual="v5"] .cs-notice__action:hover { background: var(--ds-fill-hover); }

/* The sentence keeps its own width and the preview takes what is left; where the two do not fit, the preview and its
   action drop together to a second line instead of the sentence breaking in two beside a sliver of preview. */
.cs-notice--draft-elsewhere .cs-notice__text { flex: 1 1 6rem; }
html[data-visual="v5"] .cs-notice--draft-elsewhere { flex-wrap: wrap; column-gap: 8px; row-gap: 4px; }
html[data-visual="v5"] .cs-notice--draft-elsewhere .cs-notice__label { flex: 0 1 auto; min-inline-size: 0; }
html[data-visual="v5"] .cs-notice--draft-elsewhere .cs-notice__text { flex: 1 1 12rem; }

/* The waiting spinner draws its ring outside its box: 12 inside plus 2 a side is the 16 of the other icons. */
.cs-notice__icon.cs-spinner { inline-size: 12px; block-size: 12px; }

:where(html[data-visual="v5"]) .cs-contact-panel__content > .cs-notice { margin: var(--ds-space-3) var(--ds-space-3) 0; }