/* ============================================================================
   Alerts popover (2026-08-20)
   ----------------------------------------------------------------------------
   Adir, with a screenshot: "I clicked on the message tab... it says a lot,
   one open, and then the next line I cannot even read it, it just goes out
   of the box."

   .cxp-alert-item and .cxp-alert-item-body had NO rule at all - the class
   names were in the markup and nothing styled them - so a long alert title
   in a 15rem menu simply ran past the card and painted over the page behind
   it. This gives the popover a real width, wraps the text, clamps it to two
   lines, and makes the whole row a target that opens the alert.

   Layout only - it uses the portal surface, border, text and muted tokens.
   ============================================================================ */

body.fi-panel-portal .cxp-alerts-menu {
  width: 23rem;
  max-width: calc(100vw - 1.5rem);
  padding: .35rem;
}

body.fi-panel-portal .cxp-alerts-head {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  text-decoration: none;
  border-radius: .45rem;
}

body.fi-panel-portal .cxp-alerts-head:hover,
body.fi-panel-portal .cxp-alerts-head:focus-visible {
  background: var(--portal-primary-soft);
  outline: none;
}

/* The row is a COLUMN: the alert text gets the full width, and the action
   sits under it on its own line. Side by side, a long title and a labelled
   button fight for the same 23rem and the button loses its last character. */
body.fi-panel-portal .cxp-alert-item {
  display: flex;
  flex-direction: column;
  white-space: normal;
  align-items: stretch;
  gap: .4rem;
  min-width: 0;
  padding: .55rem .7rem;
  border-radius: .45rem;
}

body.fi-panel-portal .cxp-alert-item form {
  display: flex;
  justify-content: flex-end;
}

body.fi-panel-portal .cxp-alert-item + .cxp-alert-item {
  border-top: 1px solid var(--portal-border);
}

body.fi-panel-portal .cxp-alert-item:hover {
  background: var(--portal-primary-soft);
}

body.fi-panel-portal .cxp-alert-item-body {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: .15rem;
  text-decoration: none;
  color: inherit;
}

/* Two lines each, then an ellipsis. The full text is on the title
   attribute and on the page the row links to - never truncated away. */
body.fi-panel-portal .cxp-alert-item-body strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-width: 0;
  overflow-wrap: anywhere;
  /* The popover lives inside the taskbar, which sets nowrap on its own rows -
     a -webkit-box can only clamp text that is allowed to wrap in the first
     place, so this has to be stated here rather than inherited. */
  white-space: normal;
  color: var(--portal-heading);
  font-size: 13px;
  line-height: 1.35;
}

body.fi-panel-portal .cxp-alert-item-body span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
  color: var(--portal-muted);
  font-size: 12px;
  line-height: 1.4;
}

/* cxp.css still carries the original icon-button rule for this class
   (width: 1.5rem, display: grid) from when the control was a bare x. The
   label now reads "Dismiss", so the fixed width has to be undone explicitly -
   otherwise the word renders 24px wide and spills out of its own border. */
body.fi-panel-portal .cxp-alert-item-dismiss {
  display: inline-flex;
  align-items: center;
  width: auto;
  height: auto;
  min-width: 0;
  margin-left: 0;
  padding: .2rem .5rem;
  border: 1px solid var(--portal-border);
  border-radius: 999px;
  background: transparent;
  color: var(--portal-muted);
  font: inherit;
  font-size: 11px;
  line-height: 1.6;
  cursor: pointer;
  white-space: nowrap;
}

body.fi-panel-portal .cxp-alert-item-dismiss:hover,
body.fi-panel-portal .cxp-alert-item-dismiss:focus-visible {
  color: var(--portal-heading);
  border-color: var(--portal-muted);
  outline: none;
}

body.fi-panel-portal .cxp-alerts-foot {
  display: block;
  padding: .5rem .7rem;
  border-top: 1px solid var(--portal-border);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

body.fi-panel-portal .cxp-alert-empty {
  padding: .8rem .7rem;
  color: var(--portal-muted);
  font-size: 12px;
}