/* ═══════════════════════════════════════════════════
   ConnectBot - Announcement Detail Modal CSS
   ═══════════════════════════════════════════════════ */

@keyframes ann-marquee {
  0% { transform: translateY(100%); }
  100% { transform: translateY(-100%); }
}

.ann-scroll-text {
  animation: ann-marquee 15s linear infinite;
  white-space: pre-line;
}

.ann-scroll-container:hover .ann-scroll-text {
  animation-play-state: paused;
}

.ann-modal-container {
  display: flex;
  flex-direction: column;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
  overflow: hidden;
  animation: ann-slideUp 0.4s ease-out;
}

.ann-content-panel {
  width: 0;
  opacity: 0;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: opacity 0.3s ease, width 0.3s ease;
}

.ann-expanded .ann-content-panel {
  width: 450px;
  min-width: 450px;
  opacity: 1;
  flex-grow: 0;
  overflow-y: auto;
}

.ann-content-panel::-webkit-scrollbar { width: 8px; }
.ann-content-panel::-webkit-scrollbar-track { background: #f3f4f6; }
.ann-content-panel::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
.ann-content-panel::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
.ann-content-panel { scrollbar-width: thin; scrollbar-color: #d1d5db #f3f4f6; }

.ann-invisible-scrollbar::-webkit-scrollbar { width: 8px; }
.ann-invisible-scrollbar::-webkit-scrollbar-track { background: transparent; }
.ann-invisible-scrollbar::-webkit-scrollbar-thumb { background: rgba(59, 130, 246, 0.3); border-radius: 4px; }
.ann-invisible-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(59, 130, 246, 0.7); }
.ann-invisible-scrollbar { scrollbar-width: thin; scrollbar-color: rgba(59, 130, 246, 0.3) transparent; }

@keyframes ann-slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .ann-modal-container { max-width: 95vw; }
  .ann-modal-container .flex.flex-row { flex-direction: column; }
  .ann-expanded .ann-content-panel {
    width: 100%;
    border-left: none;
    border-top: 1px solid #e5e7eb;
    max-height: 400px;
  }
}