/* ===== ANNOUNCEMENT ISLAND (53-announcements.js) =====
   This styling was missing entirely from the codebase — #announcementIsland only ever had
   inline `display:none/block` toggled by JS (showAnnouncementIsland/hideAnnouncementIsland in
   53-announcements.js), so it rendered as an unstyled, unpositioned block instead of the
   floating "island" pill the feature is meant to look like. This file supplies that styling
   without touching any existing stylesheet or JS/HTML logic. */

.announcement-island{
  position:fixed;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  z-index:1300; /* above topbar/sidebar (up to ~201), below the app boot loader (9999) */
  max-width:min(420px,92vw);
  width:max-content;
  cursor:pointer;
  animation:annIslandDropIn .35s cubic-bezier(.2,.8,.2,1);
}

.announcement-island-inner{
  display:flex;
  align-items:center;
  gap:10px;
  background:linear-gradient(165deg,var(--navy-mid) 0%,#10152B 100%);
  border:1px solid rgba(124,92,252,.35);
  border-radius:999px;
  padding:10px 14px 10px 12px;
  box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.03) inset;
  transition:padding .3s cubic-bezier(.4,0,.2,1),gap .3s cubic-bezier(.4,0,.2,1);
}

.announcement-island-icon{
  font-size:18px;
  flex-shrink:0;
  line-height:1;
}

.announcement-island-text{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
  transition:max-width .3s cubic-bezier(.4,0,.2,1),opacity .25s ease;
  max-width:260px;
  overflow:hidden;
}

.announcement-island-title{
  font-family:'Poppins',sans-serif;
  font-size:12.5px;
  font-weight:600;
  color:var(--white);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.announcement-island-sub{
  font-size:10px;
  color:var(--muted);
  white-space:nowrap;
}

.announcement-island-close{
  flex-shrink:0;
  width:22px;
  height:22px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.08);
  color:var(--off-white);
  font-size:11px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s,opacity .25s ease,transform .25s ease;
}
.announcement-island-close:hover{ background:rgba(255,255,255,.18); }

/* Collapsed "pill" state — shrinks to just the icon, hiding title/sub/close so it stays
   pinned as a small tappable dot instead of a full banner (see the 2s setTimeout in
   showAnnouncementIsland()). */
.announcement-island.collapsed .announcement-island-inner{
  padding:9px;
  gap:0;
}
.announcement-island.collapsed .announcement-island-text,
.announcement-island.collapsed .announcement-island-close{
  max-width:0;
  width:0;
  opacity:0;
  pointer-events:none;
  margin:0;
}

@keyframes annIslandDropIn{
  from{ opacity:0; transform:translate(-50%,-16px); }
  to{ opacity:1; transform:translate(-50%,0); }
}

/* Fullscreen view (openAnnouncementFullscreen) — image/video and message inside the shared
   .modal-content, matching the app's existing modal styling. */
.announcement-media{
  display:block;
  width:100%;
  max-height:60vh;
  object-fit:contain;
  border-radius:12px;
  background:#000;
  margin-bottom:14px;
}

.announcement-fullscreen-text{
  white-space:pre-wrap;
}

@media (max-width:480px){
  .announcement-island{ top:10px; max-width:94vw; }
  .announcement-island-text{ max-width:170px; }
}