/* ══════════════════════════════════════════════════════════════
   ANNOUNCEMENT PILL — the floating glass banner.

   ONE file, loaded by templates/index.html (where it renders for real)
   and templates/admin/_layout.html (where the admin previews it before
   publishing). Two copies would drift, and the preview's whole job is
   to be what the user will see.

   Token references carry fallbacks because the two hosts name their
   text tokens differently (--text2 vs --text-2) and admin.css defines
   neither --font-ui nor --text3.
   ══════════════════════════════════════════════════════════════ */

/* ══ SITE BANNER — floating glass announcement pill ════════
   [emoji + label chip]  message  [CTA →]  [×]
   Server-resolved: /api/banner already applied the per-type emoji and
   label defaults, so there is no second opinion here.               */

/* Modern color emoji. The banner used to draw ◆ ⚠ ✓ (U+25C6 / U+26A0 /
   U+2713) — those are SYMBOLS, not emoji, so the OS picks a monochrome
   symbol font and they render flat and dated. Real emoji codepoints plus
   an explicit color-emoji stack is the entire fix. */
.ann-emoji {
  font-family: 'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',
               'Twemoji Mozilla','EmojiOne Color', sans-serif;
  font-variant-emoji: emoji;
  font-weight: 400; line-height: 1; letter-spacing: 0;
}

.ann-dock {
  position: fixed; left: 0; right: 0; top: 20px; z-index: 9000;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 0 16px;
  pointer-events: none;      /* the dock itself never eats a click */
}
/* The pill FLOATS: it is a fixed overlay, lifted off the page by the glass
   and a soft 28px shadow, and it drifts down into place on arrival.

   What it does NOT do is bob forever. A permanently animating element is a
   moving click target, and it never satisfies a "stable" check - the x was
   literally unreachable to Playwright, and to anything else driving the
   page, for as long as the pill was on screen. The float belongs in the
   arrival, not in a loop. */
.ann-float { pointer-events: auto; }

.ann {
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 10px;
  min-height: 40px; padding: 5px 6px 5px 5px;
  /* The dock centres shrink-to-fit children, so the pill already hugs its
     text. This is the only width rule it needs — the cap is what makes a
     long message wrap instead of running off-screen. */
  max-width: min(760px, calc(100vw - 32px));
  border-radius: 999px;
  font-family: var(--font-ui, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  background: rgba(255, 255, 255, 0.58);
  -webkit-backdrop-filter: blur(22px) saturate(190%);
          backdrop-filter: blur(22px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(16, 24, 40, 0.035),
    0 1px 2px rgba(16, 24, 40, 0.05),
    0 10px 28px -8px rgba(16, 24, 40, 0.20),
    0 0 0 1px rgba(16, 24, 40, 0.045);
  animation: annIn 0.62s cubic-bezier(.22, 1, .28, 1) both;
  transition: background 0.22s ease, box-shadow 0.22s ease;
}
/* Colored tint sits UNDER the content but OVER the blur */
.ann::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: var(--ann-tint, transparent); }
@keyframes annIn {
  0%   { opacity: 0; transform: translateY(-18px) scale(.94); filter: blur(7px); }
  62%  { opacity: 1; transform: translateY(2px)   scale(1.008); filter: blur(0); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
.ann:hover {
  background: rgba(255, 255, 255, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(16, 24, 40, 0.035),
    0 2px 4px rgba(16, 24, 40, 0.06),
    0 16px 38px -10px rgba(16, 24, 40, 0.26),
    0 0 0 1px rgba(16, 24, 40, 0.05);
}

.ann-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  height: 30px; padding: 0 11px 0 9px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 0 0 1px rgba(16, 24, 40, 0.035);
  font-size: 0.78rem; font-weight: 600; letter-spacing: -0.005em;
  color: var(--ann-accent, var(--text, #191C1E)); white-space: nowrap;
}
.ann-chip .ann-emoji { font-size: 14px; transform: translateY(-0.5px); }

.ann-msg {
  flex: 1 1 auto; min-width: 0; padding-right: 2px;
  font-size: 0.84rem; font-weight: 500; line-height: 1.35; color: var(--text, #191C1E);
}

.ann-cta {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 4px 0 8px; border-radius: 999px;
  font-size: 0.82rem; font-weight: 600; color: var(--ann-accent, var(--text2, var(--text-2, #505F76)));
  text-decoration: none; white-space: nowrap; transition: background 0.18s ease;
}
.ann-cta:hover { background: rgba(255, 255, 255, 0.7); }
.ann-cta .ann-arrow { display: inline-block; font-size: 14px; line-height: 1; transition: transform 0.22s cubic-bezier(.16, 1, .3, 1); }
.ann:hover .ann-cta .ann-arrow { transform: translateX(3px); }

.ann-close {
  flex: 0 0 auto; width: 26px; height: 26px; margin-right: 2px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  color: var(--text3, var(--text-3, #717783)); font-size: 1rem; line-height: 1;
  transition: background 0.16s ease, color 0.16s ease;
}
.ann-close:hover { background: rgba(16, 24, 40, 0.07); color: var(--text, #191C1E); }
.ann-close:focus-visible, .ann-cta:focus-visible { outline: 2px solid var(--brand-primary, #0051D5); outline-offset: 2px; }

/* Types. The tint is deliberately weak — the glass carries the look, the
   color only names the kind. A strong fill kills the blur underneath. */
.ann[data-type="new"]          { --ann-tint: linear-gradient(180deg, rgba(0,81,213,.10), rgba(0,81,213,.05));   --ann-accent: #0051D5; }
.ann[data-type="announcement"] { --ann-tint: linear-gradient(180deg, rgba(91,52,196,.11), rgba(91,52,196,.05)); --ann-accent: #5B34C4; }
.ann[data-type="info"]         { --ann-tint: linear-gradient(180deg, rgba(0,81,213,.08), rgba(0,81,213,.04));   --ann-accent: #0051D5; }
.ann[data-type="success"]      { --ann-tint: linear-gradient(180deg, rgba(26,127,90,.11), rgba(26,127,90,.05)); --ann-accent: #137250; }
.ann[data-type="warning"]      { --ann-tint: linear-gradient(180deg, rgba(160,94,0,.12), rgba(160,94,0,.05));   --ann-accent: #8A5100; }

.ann.hiding { animation: annOut 0.2s ease forwards; pointer-events: none; }
@keyframes annOut { to { opacity: 0; transform: translateY(-12px) scale(.96); filter: blur(5px); } }

/* No backdrop-filter (older Firefox): an OPAQUE pill, not an unreadable
   transparent one. Fails closed. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ann { background: rgba(255, 255, 255, 0.96); }
}

@media (prefers-reduced-motion: reduce) {
  .ann { animation: none; }
  .ann-cta .ann-arrow { transition: none; }
}

@media (max-width: 640px) {
  /* padding-right RESERVES the close button's corner. Without it the CTA
     arrow slides under the absolutely-positioned × and neither is tappable. */
  .ann { flex-wrap: wrap; border-radius: 20px; padding: 8px 38px 8px 7px; row-gap: 2px; }
  .ann-msg   { flex: 1 1 100%; order: 3; padding: 0 4px 2px 6px; }
  .ann-cta   { order: 2; margin-left: auto; padding-right: 2px; }
  .ann-close { order: 4; position: absolute; top: 7px; right: 7px; }
}

/* ══════════════════════════════════════════════════════════════
   ADMIN PREVIEW ONLY — the stage and the emoji picker.
   The pill inside the stage uses the exact classes above; only its
   surroundings differ, so what the admin approves is what ships.
   ══════════════════════════════════════════════════════════════ */

.ann-preview-stage {
  position: relative; overflow: hidden;
  display: flex; justify-content: center; align-items: center;
  min-height: 82px; padding: 16px;
  margin: 0 0 14px; border-radius: 12px;
  /* Glass needs texture behind it. Over a flat fill a translucent pill is
     just a pale box, and the preview would flatter the design. */
  background:
    radial-gradient(420px 180px at 18% 0%,   rgba(0, 81, 213, 0.16), transparent 70%),
    radial-gradient(380px 200px at 88% 100%, rgba(26, 127, 90, 0.14), transparent 70%),
    repeating-linear-gradient(135deg, rgba(16, 24, 40, 0.035) 0 12px, transparent 12px 24px),
    #F2F4F6;
  border: 1px solid var(--line, rgba(193, 199, 211, 0.6));
}
.ann-preview-stage .ann {
  animation: none;
  /* The shared cap is min(760px, 100vw - 32px) and 100vw is the VIEWPORT,
     not this column - so inside a half-width admin card the pill could
     overflow its own stage. */
  max-width: 100%;
}
.ann-preview-stage .ann-close { cursor: default; }
.ann-preview-stage .ann-close:hover { background: transparent; }
.ann-preview-stage .hidden { display: none !important; }

.ann-emoji-picker { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 12px; }
.ann-emoji-picker button {
  width: 32px; height: 32px; padding: 0;
  display: grid; place-items: center;
  font-size: 16px; line-height: 1; cursor: pointer;
  background: #FFFFFF; border: 1px solid var(--line, rgba(193, 199, 211, 0.6));
  border-radius: 8px;
  font-family: 'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',
               'Twemoji Mozilla','EmojiOne Color', sans-serif;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}
.ann-emoji-picker button:hover { transform: translateY(-1px); border-color: var(--line-strong, #D4D9E0); }
.ann-emoji-picker button[aria-pressed="true"] {
  border-color: var(--brand-primary, #0051D5);
  box-shadow: 0 0 0 2px rgba(0, 81, 213, 0.16);
}