/*
 * bulletin.css: the company bulletin strip and the "Send to company" header button.
 *
 * The strip is fixed to the top of the screen (above the nav at 1000, below modal
 * backdrops at 8500). Its height follows its content; bulletin.js measures it and
 * writes --bulletin-h, which animations.css adds to --announce-h to make --banner-h, the offset the
 * nav, side nav, toasts and body already use. The strip sits under the announcement bar.
 * Never give it a fixed height: a long message or a long name must wrap, not clip.
 *
 * Contrast: white on blue 6.7:1, dark on yellow 12:1, white on red 6.5:1 (4.8:1 at
 * the peak of the pulse). Light theme is html[data-theme="light"].
 */

:root {
  --bln-normal-bg:    #1d4ed8;
  --bln-normal-fg:    #ffffff;
  --bln-important-bg: #facc15;
  --bln-important-fg: #1c1500;
  --bln-urgent-bg:    #b91c1c;
  --bln-urgent-pulse: #dc2626;
  --bln-urgent-fg:    #ffffff;
}
html[data-theme="light"] {
  --bln-normal-bg:    #1e40af;
  --bln-important-bg: #fde047;
  --bln-important-fg: #1c1500;
  --bln-urgent-bg:    #b91c1c;
  --bln-urgent-pulse: #dc2626;
}

/* ── Strip ────────────────────────────────────────────────────────────── */
.bulletin-banner {
  position: fixed;
  top: var(--announce-h, 0px); left: 0; right: 0;
  z-index: 1001;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 6px 16px;
  font-family: var(--font-body, 'Inter', sans-serif);
  background: var(--bln-bg);
  color: var(--bln-fg);
  --bln-btn-bg: rgba(255, 255, 255, 0.18);
  --bln-btn-bg-hover: rgba(255, 255, 255, 0.30);
}
.bulletin-banner--normal    { --bln-bg: var(--bln-normal-bg);    --bln-fg: var(--bln-normal-fg); }
.bulletin-banner--important {
  --bln-bg: var(--bln-important-bg); --bln-fg: var(--bln-important-fg);
  --bln-btn-bg: rgba(0, 0, 0, 0.10); --bln-btn-bg-hover: rgba(0, 0, 0, 0.20);
}
.bulletin-banner--urgent    { --bln-bg: var(--bln-urgent-bg);    --bln-fg: var(--bln-urgent-fg); }

/* The pulse animates the opacity of a lighter red layer only (compositor-friendly). */
.bulletin-banner--urgent::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bln-urgent-pulse);
  opacity: 0;
  pointer-events: none;
  animation: bulletin-pulse 1.6s ease-in-out infinite;
}
@keyframes bulletin-pulse {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

/* Preview inside the compose dialog: same markup, not pinned. */
.bulletin-banner--preview {
  position: relative;
  top: auto; left: auto; right: auto;
  z-index: auto;
  border-radius: var(--r-sm, 8px);
  overflow: hidden;
}
/* The dialog is about 520px wide at every viewport, so a long preview wraps like
   the phone strip: a floated icon stays on the first line (the phone rules below
   explain why). Left-aligned, because a centred line cannot share a row with a float.
   The margin centres the 16px icon on the first line box (1lh); browsers without lh keep 1px. */
.bulletin-banner--preview .bulletin-main { display: flow-root; text-align: start; text-wrap: pretty; }
.bulletin-banner--preview .bulletin-main > .bulletin-icon { float: left; margin: 1px 6px 0 0; margin-top: calc((1lh - 16px) / 2); }
.bulletin-banner--preview .bulletin-sender { display: inline-block; max-width: 100%; white-space: normal; }

.bulletin-main {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 8px;
  row-gap: 2px;
}
/* The live strip wraps the message and More so the live region holds the message alone.
   The dialog preview has no wrapper. */
.bulletin-body { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; display: flex; }
.bulletin-icon { flex: none; display: inline-flex; }
.bulletin-icon svg { display: block; }
.bulletin-text {
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.bulletin-sender {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0.92;
}
/* "More" belongs to the phone layout below; desktop never clamps the text. */
.bulletin-more { display: none; }
/* At the pulse peak the 0.92 sender line measured 4.27:1 on red; full white is 4.8:1. */
.bulletin-banner--urgent .bulletin-sender { opacity: 1; }
.bulletin-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.bulletin-ctrls {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
.bulletin-count {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bulletin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--r-sm, 8px);
  background: transparent;
  color: inherit;
  font: 600 12px/1 var(--font-body, 'Inter', sans-serif);
  cursor: pointer;
  transition: background var(--t-fast, 0.15s) ease;
}
.bulletin-btn:hover { background: var(--bln-btn-bg); }
.bulletin-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.bulletin-btn[aria-disabled="true"] { opacity: 0.6; cursor: default; }
.bulletin-btn--gotit { background: var(--bln-btn-bg); padding: 0 14px; }
.bulletin-btn--gotit:hover:not([aria-disabled="true"]) { background: var(--bln-btn-bg-hover); }
.bulletin-btn svg { display: block; }

@media (max-width: 768px) {
  .bulletin-banner { gap: 8px; padding: 6px 12px; }
  /* The live strip is a grid, not a float or flex: the icon owns a 16px column, so a
     message that opens with one long word or a link can never push it onto a row of
     its own. Row 1 holds the text, clamped to two lines; row 2 holds the sender and
     the More button. A long name ellipsizes and the time never gets cut. The dialog
     preview keeps its float rules above because the sender should see the whole message.
     The message is a subgrid over the body's tracks, so More (a body item in column 3,
     row 2) lines up with the sender row while staying outside the live region. */
  .bulletin-body {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 6px; row-gap: 2px;
    align-items: start;
  }
  .bulletin-body > .bulletin-main {
    grid-column: 1 / -1; grid-row: 1 / -1;
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto;   /* browsers without subgrid */
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    column-gap: 6px; row-gap: 2px;
    justify-content: stretch; align-items: start;
    text-align: start; text-wrap: pretty;
    position: static; z-index: auto;   /* More's ::after must lie over the message to take the tap */
  }
  .bulletin-banner:not(.bulletin-banner--preview) .bulletin-icon {
    grid-column: 1; grid-row: 1; align-self: start;
    height: calc(13px * 1.4); align-items: center;   /* one line of .bulletin-text */
  }
  .bulletin-banner:not(.bulletin-banner--preview) .bulletin-text {
    grid-column: 2 / 4; grid-row: 1;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .bulletin-banner.is-expanded .bulletin-text { display: block; overflow: visible; -webkit-line-clamp: unset; }
  .bulletin-banner:not(.bulletin-banner--preview) .bulletin-sender {
    grid-column: 2; grid-row: 2;
    display: flex; min-width: 0; max-width: 100%; white-space: nowrap;
  }
  .bulletin-sender-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .bulletin-sender-time { flex: none; }
  .bulletin-more:not([hidden]) { display: inline-block; }
  .bulletin-more {
    grid-column: 3; grid-row: 2; align-self: center;
    padding: 0 2px; border: 0; background: transparent; color: inherit;
    font: 600 12px/1.4 var(--font-body, 'Inter', sans-serif);
    text-decoration: underline; cursor: pointer;
    /* mobile-native.css floors every button at 44px with !important on coarse pointers.
       The 44px target is the ::after over the whole message block, not the button. */
    min-height: 0 !important; min-width: 0 !important;
  }
  .bulletin-more::after { content: ''; position: absolute; inset: 0; }
  .bulletin-more:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
}
/* At 320px the controls left the sender column about 20px, so the time ran under More.
   The arrows still say there is more than one message, so the "1 of 3" text leaves the
   screen but stays for screen readers. */
@media (max-width: 340px) {
  .bulletin-count {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .bulletin-btn--gotit { padding: 0 10px; }
}
@media (pointer: coarse) {
  .bulletin-btn { min-width: 44px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .bulletin-banner--urgent::before { animation: none; opacity: 0; }
  .bulletin-btn { transition: none; }
}

/* ── Header button ("Send to company") ───────────────────────────────────
   Same shape as .nav-bug-btn (nav.css) with a blue tint. */
.nav-bulletin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--accent-cyan, #4f9fda) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-cyan, #4f9fda) 24%, transparent);
  border-radius: var(--r-sm);
  color: var(--accent-cyan, #4f9fda);
  cursor: pointer;
  outline: none;
  transition: background var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.nav-bulletin-btn:hover,
.nav-bulletin-btn.active {
  background: color-mix(in srgb, var(--accent-cyan, #4f9fda) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent-cyan, #4f9fda) 50%, transparent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}
.nav-bulletin-btn:focus-visible { outline: 2px solid var(--accent-cyan, #4f9fda); outline-offset: 2px; }
html[data-theme="light"] .nav-bulletin-btn:hover,
html[data-theme="light"] .nav-bulletin-btn.active { box-shadow: none; }

/* mobile.css's 641-1194 touch band draws .nav-bug-btn at 38px; this matches it. */
@media (max-width: 1194px) {
  .nav-bulletin-btn { width: 38px; height: 38px; }
}
/* Keep the 38px look; grow only the hit box to 44px (same trick as mobile-native.css). */
@media (pointer: coarse) {
  .nav-bulletin-btn { position: relative; }
  .nav-bulletin-btn::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: max(100%, 44px); height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
}