/* =========================================================
   CSBC26 — Agenda Page Stylesheet
   Extends index.css (shared design tokens & components)
   ========================================================= */

/* ---------------------------------------------------------
   AGENDA PAGE — BODY OVERRIDES
   --------------------------------------------------------- */

/* Agenda allows vertical scroll (content-heavy page) */
.agenda-page {
  overflow-y: auto;
  overflow-x: hidden;
}

/* On desktop the landing page locks scroll; agenda shouldn't */
@media (min-width: 900px) {

  .agenda-page,
  .agenda-page html {
    height: auto;
    overflow: auto;
  }
}

/* ---------------------------------------------------------
   HEADER OVERRIDES FOR AGENDA
   --------------------------------------------------------- */
.header-inner--wide {
  max-width: 1280px;
  padding: 0 var(--sp-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg);
}

.header-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  border: 1px solid transparent;
  transition:
    color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.nav-link svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.nav-link:hover {
  color: var(--text-primary);
  background: var(--glass-highlight);
  border-color: var(--glass-border);
}

.nav-link--active {
  color: var(--verde);
  background: rgba(69, 214, 121, 0.1);
  border-color: rgba(69, 214, 121, 0.3);
}

.nav-link--active:hover {
  color: var(--verde);
  background: rgba(69, 214, 121, 0.15);
  border-color: rgba(69, 214, 121, 0.5);
}

/* ---------------------------------------------------------
   AGENDA SHELL — Main layout container
   --------------------------------------------------------- */
.agenda-shell {
  position: relative;
  z-index: 2;
  flex: 1;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: var(--sp-xl) var(--sp-lg) var(--sp-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
}

/* ---------------------------------------------------------
   AGENDA HEADING
   --------------------------------------------------------- */
.agenda-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-md);
  flex-wrap: wrap;
}

.agenda-title {
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  line-height: 1;
}

.agenda-subtitle {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 6px;
}

.agenda-clock {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  background: var(--glass-highlight);
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  backdrop-filter: blur(16px);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.agenda-clock svg {
  width: 15px;
  height: 15px;
  color: var(--azul-claro);
  flex-shrink: 0;
}

/* ---------------------------------------------------------
   DAY TABS
   --------------------------------------------------------- */
.day-tabs-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg);
  flex-wrap: wrap;
}

.day-tabs-wrapper .logo-link {
  flex-shrink: 0;
}

.day-tabs {
  display: flex;
  flex-direction: row;
  gap: var(--sp-sm);
  position: relative;     /* anchor for the sliding indicator blob */
  flex-wrap: wrap;
}

/* The GSAP-animated background blob that slides under the active tab */
.day-tabs__indicator {
  position: absolute;
  border-radius: var(--radius-md);
  background: rgba(59, 78, 226, 0.28);
  border: 1px solid rgba(59, 78, 226, 0.6);
  box-shadow: 0 4px 20px rgba(59, 78, 226, 0.25),
              inset 0 1px 0 rgba(255,255,255,0.08);
  pointer-events: none;
  z-index: 0;
  /* GSAP will set top/left/width/height */
}

.day-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 20px 20px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: var(--glass-highlight);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition:
    color var(--duration-base) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
  color: var(--text-muted);
  flex-shrink: 0;
  position: relative;
  z-index: 1;  /* sit above the blob */
  -webkit-tap-highlight-color: transparent;
}

.day-tab:hover {
  color: var(--text-secondary);
  transform: translateY(-2px);
}

.day-tab[aria-selected="true"] {
  color: var(--text-primary);
  border-color: transparent; /* border handled by the blob */
}

.day-tab__num {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
}

.day-tab__name {
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Today dot */
.day-tab--today {
  position: relative;
}

.day-tab--today::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 6px var(--verde);
}

/* Past days — grayed out */
.day-tab--past {
  opacity: 0.4;
  filter: grayscale(0.6);
  pointer-events: auto;
}

.day-tab--past .day-tab__num,
.day-tab--past .day-tab__name {
  color: var(--text-muted);
}

.day-tab--past:hover {
  opacity: 0.65;
  filter: grayscale(0.3);
}

/* When a past tab is selected, restore readability */
.day-tab--past[aria-selected="true"] {
  opacity: 0.7;
  filter: grayscale(0.2);
}

.day-tab--past[aria-selected="true"] .day-tab__num {
  color: var(--text-secondary);
}

/* Mobile: stack logo above tabs e transforma as abas de dia num CARROSSEL
   horizontal, no mesmo estilo das sugestões do chat (rolagem lateral com
   fade na borda direita, barra de rolagem oculta e abas de largura natural
   em vez de esticadas). Vale sempre que a largura fica pequena. */
@media (max-width: 560px) {
  .day-tabs-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }
  .day-tabs {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
    /* Fade na borda direita indicando que há mais para rolar (como no chat) */
    -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%);
    mask-image: linear-gradient(to right, black 88%, transparent 100%);
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* IE/Edge */
  }
  .day-tabs::-webkit-scrollbar { display: none; }
  .day-tab {
    padding: 12px 18px;
    flex: 0 0 auto;             /* largura natural → habilita a rolagem lateral */
    scroll-snap-align: start;
  }
}

/* ---------------------------------------------------------
   TRACK FILTER PILLS
   --------------------------------------------------------- */
.track-filters {
  display: flex;
  gap: var(--sp-sm);
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
  flex-wrap: nowrap;
  /* Fade na borda direita (estilo carrossel do chat) — as pílulas já rolam
     lateralmente; o fade só reforça que há mais conteúdo. */
  -webkit-mask-image: linear-gradient(to right, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, black 92%, transparent 100%);
}

.track-filters::-webkit-scrollbar {
  display: none;
}

.track-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid var(--glass-border);
  background: var(--bg-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.track-pill:hover {
  background: var(--bg-surface-2);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--text-secondary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.track-pill.is-active {
  background: rgba(59, 78, 226, 0.2);
  border-color: rgba(59, 78, 226, 0.45);
  color: var(--text-primary);
  box-shadow: 0 4px 20px rgba(59, 78, 226, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.track-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Row wrapping the filter dropdowns (grupo, evento, sala) + the "Agora"
   jump button. Os dropdowns dividem o espaço e o "Agora" fica à direita. */
.track-filters-row {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  flex-wrap: wrap;
}

.track-filters-row .glass-dropdown {
  flex: 1 1 auto;
  min-width: 0;
}

.track-filters-row .glass-dropdown__btn {
  width: 100%;
  max-width: none;
}

.track-filters-row .jump-now-btn {
  margin-left: auto;
}

/* Mobile: os três dropdowns + "Agora" quebram em linhas conforme o espaço,
   cada um ocupando ao menos ~45% da largura, sem estourar o viewport. */
@media (max-width: 560px) {
  .track-filters-row .glass-dropdown {
    flex: 1 1 45%;
  }
}

/* ─────────────────────────────────────────────────────────
   GLASS DROPDOWN (room filter)
   Full design-system identity shared with the main-page hamburger
   menu: glassmorphism trigger (.menu-btn), glass popup panel
   (.glass-menu), accent-on-hover items (.glass-menu__link) and the
   brand palette. Open/close is GSAP-animated in agenda.js
   (back.out on open, power2.in on close), mirroring initMenu().
   ───────────────────────────────────────────────────────── */
.glass-dropdown {
  position: relative;
  flex-shrink: 0;
  z-index: 60;
}

/* Trigger — mirrors .menu-btn glass identity. */
.glass-dropdown__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 260px;
  padding: 8px 14px;
  cursor: pointer;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.glass-dropdown__btn:hover,
.glass-dropdown__btn:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
  outline: none;
}

.glass-dropdown__icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--azul-claro);
}

.glass-dropdown__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.glass-dropdown__caret {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-secondary);
  transition: transform var(--duration-base, 320ms) var(--ease-out);
}

/* Caret flips when open (aria-expanded toggled by JS). */
.glass-dropdown__btn[aria-expanded="true"] .glass-dropdown__caret {
  transform: rotate(180deg);
}

/* Popup panel — mirrors .glass-menu. GSAP controls visibility; the
   initial hidden state lives here so there's no flash before JS boots. */
.glass-dropdown__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 240px;

  background: rgba(8, 12, 46, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  padding: 6px 0;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.3),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;

  z-index: 200;
  /* GSAP controls visibility from here (autoAlpha). */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.97);
  transform-origin: top right;
}

/* Inner scroll area — the native scrollbar is fully hidden and replaced
   by the custom glass thumb below (mirrors the chat's .chat-scrollbar). */
.glass-dropdown__scroll {
  max-height: 328px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE/Edge */
}

.glass-dropdown__scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Custom glass scrollbar track — thin, translucent, faded until scroll/hover
   (opacity driven by GSAP in agenda.js). */
.glass-dropdown__scrollbar {
  position: absolute;
  top: 8px;
  bottom: 8px;
  right: 5px;
  width: 6px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: background var(--duration-fast) var(--ease-out);
}

.glass-dropdown__scrollbar.is-dragging {
  background: rgba(255, 255, 255, 0.09);
}

/* Thumb — brand gradient (azul → verde) + subtle glow, like .chat-scrollbar__thumb. */
.glass-dropdown__scrollbar-thumb {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 30px;
  border-radius: 100px;
  background: linear-gradient(180deg,
      rgba(59, 78, 226, 0.75) 0%,
      rgba(69, 214, 121, 0.55) 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 0 10px rgba(59, 78, 226, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  cursor: grab;
  pointer-events: auto;
  will-change: transform, height;
}

.glass-dropdown__scrollbar-thumb:active {
  cursor: grabbing;
}

.glass-dropdown__scrollbar.is-dragging .glass-dropdown__scrollbar-thumb {
  box-shadow:
    0 0 16px rgba(59, 78, 226, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.glass-dropdown__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Items — mirror .glass-menu__link (accent border + slide on hover/active). */
.glass-dropdown__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 450;
  letter-spacing: 0.01em;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition:
    color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    padding-left var(--duration-fast) var(--ease-out);
}

.glass-dropdown__option:hover,
.glass-dropdown__option:focus-visible {
  color: var(--text-primary);
  background: var(--glass-highlight);
  border-left-color: var(--azul-claro);
  padding-left: 24px;
  outline: none;
}

.glass-dropdown__option[aria-selected="true"] {
  color: var(--text-primary);
  border-left-color: var(--azul-claro);
  background: rgba(59, 78, 226, 0.16);
}

/* Primary text inside an option — inline-flex so the group color dot
   (.track-dot) aligns nicely before the label. */
.glass-dropdown__option-nome {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Secondary text (the floor / "piso") inside an option. */
.glass-dropdown__option-piso {
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

.glass-dropdown__option[aria-selected="true"] .glass-dropdown__option-piso,
.glass-dropdown__option:hover .glass-dropdown__option-piso {
  color: var(--azul-claro);
}

/* Deep-link context header: "Programação — Sala Bromélia · Pavilhão".
   Blue-glass surface borrowed from the chatbot-temporário suggestion
   cards (.suggestion-chip): brand-blue translucent fill + border + blur,
   with white text for legibility on the dark agenda background. */
.agenda-room-context {
  margin: var(--sp-sm) 0 0;
  padding: 10px 18px;
  border-radius: 100px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--branco, #fff);
  background: rgba(59, 78, 226, 0.18);
  border: 1px solid rgba(59, 78, 226, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.agenda-room-context[hidden] {
  display: none;
}

.jump-now-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  color: var(--text-primary);
  border: 1px solid rgba(69, 214, 121, 0.45);
  background: rgba(69, 214, 121, 0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.jump-now-btn:hover {
  background: rgba(69, 214, 121, 0.26);
  border-color: rgba(69, 214, 121, 0.65);
  box-shadow: 0 4px 18px rgba(69, 214, 121, 0.22);
}

.jump-now-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #45d679;
  box-shadow: 0 0 0 0 rgba(69, 214, 121, 0.6);
  animation: jump-now-pulse 1.6s var(--ease-out) infinite;
}

@keyframes jump-now-pulse {
  0% { box-shadow: 0 0 0 0 rgba(69, 214, 121, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(69, 214, 121, 0); }
  100% { box-shadow: 0 0 0 0 rgba(69, 214, 121, 0); }
}

/* ---------------------------------------------------------
   NOW BANNER — "Acontecendo agora"
   --------------------------------------------------------- */
.now-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(69, 214, 121, 0.15) 0%, rgba(59, 78, 226, 0.15) 100%);
  border: 1px solid rgba(69, 214, 121, 0.35);
  backdrop-filter: blur(16px);
  animation: slide-in-banner 0.5s var(--ease-out) both;
}

@keyframes slide-in-banner {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.now-banner__pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--verde);
  flex-shrink: 0;
  box-shadow: 0 0 8px var(--verde);
  animation: pulse-dot 2s ease-in-out infinite;
}

.now-banner__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.now-banner__label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--verde);
}

.now-banner__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.now-banner__room {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.now-banner__time {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--verde);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---------------------------------------------------------
   SCHEDULE PANEL (TIME SLOTS & GRID)
   --------------------------------------------------------- */
.schedule-panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xl);
  position: relative;
  /* anchor for the absolute time-line */
}

/* ---------------------------------------------------------
   TIME LINE (current time indicator)
   --------------------------------------------------------- */
.time-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--verde) 0%, rgba(69, 214, 121, 0.3) 100%);
  box-shadow: 0 0 10px rgba(69, 214, 121, 0.7), 0 0 28px rgba(69, 214, 121, 0.25);
  z-index: 20;
  pointer-events: none;
  animation: time-line-fade-in 0.2s ease-out both;
}

@keyframes time-line-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.time-line__dot {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 12px var(--verde), 0 0 24px rgba(69, 214, 121, 0.5);
  animation: tl-pulse 2s ease-in-out infinite;
}

@keyframes tl-pulse {

  0%,
  100% {
    box-shadow: 0 0 10px var(--verde), 0 0 24px rgba(69, 214, 121, 0.4);
  }

  50% {
    box-shadow: 0 0 18px var(--verde), 0 0 40px rgba(69, 214, 121, 0.7);
  }
}

@media (min-width: 768px) {
  .time-line {
    left: calc(80px + var(--sp-lg, 24px));
  }
  .time-line__dot {
    left: -7px;
  }
}

.time-slot-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

@media (min-width: 768px) {
  .time-slot-group {
    flex-direction: row;
    gap: var(--sp-lg);
  }
}

.time-slot-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 80px;
  flex-shrink: 0;
  gap: 2px;
}

.time-slot-label__start {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.time-slot-label__end {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.time-slot-label__live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--verde);
  letter-spacing: 0.05em;
}

.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--verde);
  animation: pulse-dot 2s ease-in-out infinite;
}

.time-slot-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-md);
}

@media (min-width: 900px) {
  .time-slot-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}

/* ---------------------------------------------------------
   EVENT CARD
   --------------------------------------------------------- */
.event-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--sp-md) var(--sp-lg);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--track-color, var(--azul-claro));
  backdrop-filter: blur(16px);
  transition:
    transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
  overflow: hidden;
}

.event-card:hover {
  transform: translateX(3px) translateY(-2px) scale(1.01);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.32);
}

/* Active cards get the same lift + track-color glow */
.event-card--active:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.3),
    0 0 0 1px color-mix(in srgb, var(--track-color, var(--azul-claro)) 45%, transparent),
    0 0 28px color-mix(in srgb, var(--track-color, var(--azul-claro)) 16%, transparent);
}

/* Radial glow overlay (visible on hover like index cards) */
.event-card__glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    ellipse at 50% 0%,
    color-mix(in srgb, var(--track-color, var(--azul-claro)) 18%, transparent) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out);
  pointer-events: none;
}

.event-card--active:hover .event-card__glow,
.event-card--now:hover .event-card__glow {
  opacity: 1;
}

/* ACTIVE (under the time-line): uses the event's own track color as gradient accent */
.event-card--active {
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--track-color, var(--azul-claro)) 22%, rgba(14, 18, 80, 0.6)) 0%,
      rgba(14, 18, 80, 0.65) 100%);
  border-color: color-mix(in srgb, var(--track-color, var(--azul-claro)) 55%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--track-color, var(--azul-claro)) 20%, transparent),
    0 6px 28px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* NOW slot (active AND in current time slot) — stronger glow */
.event-card--active.event-card--now {
  animation: event-pulse-active 2.8s ease-in-out infinite;
}

@keyframes event-pulse-active {

  0%,
  100% {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--track-color) 20%, transparent), 0 6px 28px rgba(0, 0, 0, 0.28);
  }

  50% {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--track-color) 45%, transparent), 0 10px 40px rgba(0, 0, 0, 0.18), 0 0 24px color-mix(in srgb, var(--track-color) 12%, transparent);
  }
}

@keyframes event-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(69, 214, 121, 0.15), 0 8px 32px rgba(0, 0, 0, 0.2);
  }

  50% {
    box-shadow: 0 0 0 1px rgba(69, 214, 121, 0.35), 0 12px 40px rgba(69, 214, 121, 0.1);
  }
}

/* PAST — dimmed & grayed */
.event-card--past {
  opacity: 0.45;
  filter: grayscale(0.5);
  pointer-events: none;
}

/* Gray out the time-slot label when the slot is past */
.time-slot-group--past .time-slot-label {
  opacity: 0.45;
  filter: grayscale(0.5);
}

/* Glow streak (decorative) */
.event-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 100%;
  background: radial-gradient(ellipse at right, var(--track-color, var(--azul-claro)) 0%, transparent 70%);
  opacity: 0.06;
  pointer-events: none;
}

.event-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  flex-wrap: wrap;
}

.event-card__track {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--track-color, var(--azul-claro));
  padding: 2px 8px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--track-color, var(--azul-claro)) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--track-color, var(--azul-claro)) 35%, transparent);
}

.event-card__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  margin-top: 4px;
}

.event-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 8px;
}

.event-card__room {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.event-card__room svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.event-card__speaker {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.event-card__speaker svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ---------------------------------------------------------
   EMPTY STATE
   --------------------------------------------------------- */
.schedule-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-md);
  padding: var(--sp-2xl) var(--sp-lg);
  text-align: center;
  color: var(--text-muted);
}

.schedule-empty svg {
  width: 48px;
  height: 48px;
  opacity: 0.35;
}

.schedule-empty p {
  font-size: 0.9rem;
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */
@media (min-width: 600px) {
  .agenda-shell {
    padding-top: var(--sp-2xl);
  }

  .time-block__label {
    width: 68px;
  }

  .time-block__time {
    font-size: 0.85rem;
  }

  .event-card__title {
    font-size: 1rem;
  }
}

@media (min-width: 900px) {

  /* Override the landing page desktop overflow:hidden for the agenda page */
  .agenda-page {
    overflow-y: auto !important;
    height: auto !important;
  }

  .agenda-shell {
    max-width: 920px;
  }

  .header-inner--wide {
    padding: 0 var(--sp-xl);
  }

  .agenda-title {
    font-size: 2.8rem;
  }

  .event-card {
    padding: var(--sp-lg) var(--sp-xl);
  }

  .event-card__title {
    font-size: 1.05rem;
  }

  .time-block__label {
    width: 80px;
  }
}


.back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  padding: 8px 16px;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}

.back-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
}

.back-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ---------------------------------------------------------
   CHAT NUDGE TOAST — "dica do chat"
   Aparece ao usar um filtro (1x por sessão). O contêiner é uma
   camada fixa full-width que CENTRALIZA o card na base da tela via
   flexbox — a centralização não depende de translateX, então a
   animação de entrada (só y + autoAlpha via GSAP) nunca a desalinha.
   O card reaproveita a identidade do banner "Prévia Beta" do chat
   (.beta-banner), com LARANJA como cor principal (bom contraste no
   fundo azul escuro).
   --------------------------------------------------------- */
.chat-nudge {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
  z-index: 400;
  display: flex;
  justify-content: center;
  padding: 0 16px;
  pointer-events: none; /* só o card recebe interação */
}

/* Card — mesmo visual do .beta-banner (gradiente translúcido + blur +
   borda), com azul claro no lugar do laranja. GSAP controla a visibilidade
   (autoAlpha) e o slide-up (y) a partir do estado inicial oculto aqui. */
.chat-nudge__card {
  position: relative;
  overflow: hidden; /* recorta o reflexo (.chat-nudge__shine) que varre o card */
  pointer-events: auto;
  width: min(440px, 100%);
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 10px 42px 10px var(--sp-md);
  border-radius: var(--radius-md);
  border: 1px solid rgba(251, 126, 77, 0.40);
  background: linear-gradient(135deg,
      rgba(251, 126, 77, 0.18) 0%,
      rgba(59, 78, 226, 0.12) 100%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.32),
    0 2px 14px rgba(251, 126, 77, 0.16);

  /* Estado inicial oculto (sem flash antes do JS); GSAP usa autoAlpha. */
  opacity: 0;
  visibility: hidden;
}

/* Faixa de reflexo diagonal — varre o card da esquerda para a direita em
   loop (posição via GSAP). Transparente nas bordas para o brilho "entrar e
   sair" suave, com um leve tom quente para casar com o laranja. */
.chat-nudge__shine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 90px;
  pointer-events: none;
  transform: skewX(-18deg);
  background: linear-gradient(100deg,
      transparent 0%,
      rgba(255, 255, 255, 0.04) 28%,
      rgba(255, 224, 206, 0.34) 50%,
      rgba(255, 255, 255, 0.04) 72%,
      transparent 100%);
  filter: blur(2px);
  opacity: 0; /* GSAP revela e anima; escondido por padrão */
}

/* Área clicável (leva ao chat) — ícone + texto, alinhados à esquerda como
   no banner beta. Ocupa todo o card. */
.chat-nudge__link {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  text-decoration: none;
  color: var(--text-secondary);
}

/* Ícone circular — mesmo tratamento do .beta-banner__icon, em laranja. */
.chat-nudge__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--laranja);
  background: rgba(251, 126, 77, 0.18);
  border: 1px solid rgba(251, 126, 77, 0.4);
}

.chat-nudge__icon svg {
  width: 15px;
  height: 15px;
}

.chat-nudge__text {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.chat-nudge__text strong {
  color: var(--laranja);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Botão de fechar — discreto, no canto superior direito. */
.chat-nudge__close {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  cursor: pointer;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: 50%;
  transition:
    color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out);
}

.chat-nudge__close:hover,
.chat-nudge__close:focus-visible {
  color: var(--laranja);
  background: rgba(251, 126, 77, 0.16);
  outline: none;
}

.chat-nudge__close svg {
  width: 14px;
  height: 14px;
}

/* Mobile: um respiro menor da base; o card já se adapta à largura via
   width:min(440px,100%) + o padding lateral do contêiner. */
@media (max-width: 560px) {
  .chat-nudge {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
    padding: 0 12px;
  }

  .chat-nudge__text {
    font-size: 0.76rem;
  }
}