body {
  font-family: "Inter", sans-serif;
  /* Move the Aurora Animation here so it persists on the board view */
  background:
    radial-gradient(at 0% 0%, hsla(253, 16%, 7%, 1) 0, transparent 50%),
    radial-gradient(at 50% 0%, hsla(225, 39%, 30%, 1) 0, transparent 50%),
    radial-gradient(at 100% 0%, hsla(339, 49%, 30%, 1) 0, transparent 50%);
  background-color: #f3f4f6;
  background-image:
    radial-gradient(
      at 40% 20%,
      hsla(266, 100%, 94%, 1) 0px,
      transparent 50%
    ),
    radial-gradient(
      at 80% 0%,
      hsla(289, 100%, 96%, 1) 0px,
      transparent 50%
    ),
    radial-gradient(
      at 0% 50%,
      hsla(340, 100%, 96%, 1) 0px,
      transparent 50%
    ),
    radial-gradient(
      at 80% 50%,
      hsla(266, 100%, 96%, 1) 0px,
      transparent 50%
    ),
    radial-gradient(
      at 0% 100%,
      hsla(289, 100%, 96%, 1) 0px,
      transparent 50%
    ),
    radial-gradient(
      at 80% 100%,
      hsla(340, 100%, 96%, 1) 0px,
      transparent 50%
    ),
    radial-gradient(
      at 0% 0%,
      hsla(340, 100%, 96%, 1) 0px,
      transparent 50%
    );
  background-size: 200% 200%;
  background-attachment: fixed; /* Keeps bg still while scrolling */
  animation: aurora 15s ease infinite;

  color: #374151;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding: 2rem;
  box-sizing: border-box;
}

@keyframes aurora {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

:root {
  --highlight-color: #fffbeb;
  --highlight-border-color: #f59e0b;
  /* REMOVED: --highlight-name-color */
}

/* The Main Board Container */
.board-container {
  width: 100%;
  max-width: 1200px;
  /* High opacity white with blur for readability */
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);

  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 24px; /* Softer corners */
  box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.1);

  padding: 2.5rem 3rem;
  box-sizing: border-box;
  transform: translateY(20px);
  opacity: 0;
  animation: slideIn 0.6s ease-out forwards;
}

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

/* Header Section */
header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.logo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 2px solid #a855f7; /* Purple-500 */
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.2);
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.main-heading {
  font-size: 1.65rem;
  font-weight: 600;
  letter-spacing: -0.03em;

  /* Gradient Text */
  /* UPDATE THIS LINE: Change the end color from #db2777 to #d946ef */
  background: linear-gradient(135deg, #7c3aed 0%, #d946ef 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  text-align: center;
  margin-bottom: 0.5rem;
  margin-top: 0;
}

.heading-divider {
  border: 0;
  border-top: 1px solid #d8b4fe; /* Purple-300 */
  margin-bottom: 1rem;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

.sub-heading {
  font-size: 1.17rem;
  font-weight: 600;
  color: #6b46c1;
  text-align: center;
  margin-top: 0;
  margin-bottom: 1rem;
}

#session-display {
  color: #a855f7; /* Purple-500 */
  font-weight: 600;
  margin-left: 0.5rem;
}

/* --- NEW: Style for the Session Link --- */
#session-display a {
  color: inherit; /* Keep the purple color */
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color 0.2s ease-in-out;
}

#session-display a:hover {
  color: #9333ea; /* Darker Purple on hover */
}

header .subtitle {
  font-size: 1.1rem;
  color: #4b5563; /* Gray-600 */
  line-height: 1.6;
  margin-top: 0.5rem;
}

/* --- Action Bar (How-to | Share) --- */
.action-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  color: #9ca3af; /* Gray-400 for separator */
}

.action-link {
  background: none;
  border: none;
  color: #6b46c1; /* Purple */
  cursor: pointer;
  font-family: "Inter", sans-serif; /* Ensure font matches */
  font-weight: 500;
  font-size: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  padding: 0;
  transition: color 0.2s ease-in-out;
}

/* --- NEW: Move icons up slightly without moving text --- */
.action-link i {
  position: relative;
  top: -1px;
}

.action-link:hover {
  color: #9333ea; /* Darker Purple */
  text-decoration: underline;
}

/* Footer Section */
footer {
  text-align: center;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 2px solid #e5e7eb; /* Gray-200 */
}

/* CTA Button */
.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background-color: #a855f7; /* Purple-500 */
  color: white;
  padding: 1rem 2.5rem;
  border-radius: 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.cta-button:hover,
.cta-button:focus {
  background-color: #9333ea; /* Purple-600 */
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.cta-button.disabled {
  background-color: #9ca3af; /* gray-400 */
  color: #e5e7eb; /* gray-200 */
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

.cta-button.disabled:hover,
.cta-button.disabled:focus {
  background-color: #9ca3af;
  transform: none;
  box-shadow: none;
}

/* Facilitator Toggle Styles */
.facilitator-toggle-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.facilitator-toggle-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #4b5563; /* gray-600 */
  cursor: pointer;
  user-select: none;
}

/* Bottom Tip Pill */
.bottom-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #4b5563; /* gray-600 */
  background: #f3f4f6; /* gray-100 */
  border: 1px dashed #d1d5db; /* gray-300 */
  border-radius: 9999px;
  padding: 0.5rem 0.875rem;
  font-size: 0.9rem;
  margin: 1.5rem auto;
  user-select: none;
  max-width: fit-content;
}

/* QR Code Link */
.qr-code-link {
  font-size: 0.875rem;
  color: #6b46c1;
  text-decoration: none;
  transition:
    color 0.2s ease-in-out,
    text-decoration 0.2s ease-in-out;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  margin-top: -0.5rem;
  margin-bottom: 2rem;
}

.qr-code-link:hover {
  color: #805ad5;
  text-decoration: underline;
}

/* --- Control Pills Styles --- */
.control-pills-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 2rem;
}

/* Base style */
.control-pill {
  background-color: #ffffff;
  border: 1px solid #e2e8f0; /* slate-200 */
  color: #4a5568; /* slate-600 */
  padding: 0.5rem 1.1rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  text-decoration: none;
  font-family: "Inter", sans-serif;
}

/* --- Separator for Pill Groups --- */
.pill-separator {
  width: 1px;
  height: 24px;
  background-color: #cbd5e1; /* slate-300 */
  margin: 0 0.25rem;
  align-self: center;
}

/* --- Facilitator Pill (Restricted Look) --- */
.control-pill.facilitator-pill {
  border: 1px dashed #94a3b8; /* slate-400 dashed border */
  color: #64748b; /* slate-500 text */
  background-color: transparent;
}

.control-pill.facilitator-pill:hover {
  border-color: #a855f7; /* Purple on hover */
  color: #6b46c1;
  background-color: #faf5ff;
  border-style: solid; /* Solid on hover to show interaction */
}

/* Active state for Facilitator Pill (When unlocked/pressed) */
.control-pill.facilitator-pill.active {
  background-color: #4b5563;
  color: #ffffff;
  border-style: solid;
  border-color: #4b5563;
}

/* Hover state for standard pills */
.control-pill:not(.disabled):hover {
  border-color: #b794f4;
  color: #6b46c1;
  background-color: #faf5ff;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.control-pill:active {
  transform: translateY(0);
}

/* --- PRIMARY PILL (Write Button) --- */
.control-pill.primary-pill {
  background-color: #a855f7; /* Purple-500 background */
  border: 1px solid #a855f7;
  color: #ffffff; /* White text */
  box-shadow: 0 4px 6px rgba(168, 85, 247, 0.25);
  /* Inherits standard pill padding/radius/font from .control-pill base class */
}

.control-pill.primary-pill:hover {
  background-color: #9333ea; /* Purple-600 */
  border-color: #9333ea;
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 8px rgba(168, 85, 247, 0.35);
}

/* --- ACTIVE STATE (Voting Tools) --- */
.control-pill.active {
  background-color: #4b5563; /* Gray-600 (Darker to show it's 'pressed') */
  color: #ffffff;
  border-color: #4b5563;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* --- DISABLED STATE (Logic from boards.js) --- */
.control-pill.disabled {
  background-color: #f3f4f6 !important; /* Gray-100 */
  color: #9ca3af !important; /* Gray-400 */
  border-color: #e5e7eb !important; /* Gray-200 */
  cursor: not-allowed !important;
  pointer-events: none !important; /* Prevent clicks */
  box-shadow: none !important;
  transform: none !important;
}

/* Write button specific tweaks (since it's an anchor tag) */
a.control-pill {
  line-height: normal;
}

/* Search Bar & Sort Wrapper */
#search-bar-wrapper {
  width: 100%;
  margin-bottom: 2rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

#search-bar {
  flex-grow: 1; /* Takes up remaining space */
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-family: "Inter", sans-serif;
  border: 2px solid #e5e7eb;
  border-radius: 0.5rem;
  box-sizing: border-box;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

#search-bar:focus {
  outline: none;
  border-color: #a855f7;
  box-shadow: 0 0 0 3px #ede9fe;
}
#search-bar::-webkit-search-cancel-button {
  display: none;
}

/* NEW: Sort Dropdown Styles */
#sort-select {
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  font-family: "Inter", sans-serif;
  border: 2px solid #e5e7eb;
  border-radius: 0.5rem;
  background-color: white;
  color: #4b5563;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: all 0.2s;
  min-width: 160px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

#sort-select:focus,
#sort-select:hover {
  border-color: #a855f7;
  color: #6b46c1;
}

@media (max-width: 480px) {
  #search-bar-wrapper {
    flex-direction: column;
  }
  #sort-select {
    width: 100%;
  }
}

/* --- NEW ARRIVAL BADGE --- */
.new-arrival-badge {
  display: none; /* Hidden by default */
  align-items: center;
  gap: 4px;
  background: linear-gradient(
    135deg,
    #f59e0b 0%,
    #fbbf24 100%
  ); /* Amber gradient */
  color: white;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 9999px;
  margin-bottom: 0.5rem;
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
  width: fit-content;
  animation:
    pop-in-badge 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
    pulse-new-badge 2s infinite 0.3s;
}

.question-card.is-new-arrival .new-arrival-badge {
  display: inline-flex;
}

@keyframes pop-in-badge {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes pulse-new-badge {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
  }
  70% {
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
  }
}

/* The Grid for Questions */
#question-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* Helper to hide facilitator questions when toggle is off */
body.hide-preselected .question-card.is-facilitator-question {
  display: none !important;
}

/* --- SHUFFLE & NUMBERING STYLES --- */

/* 1. DEFAULT BADGE (On Page Load): Neutral Gray */
#question-grid .question-card:not(.is-facilitator-question)::before {
  content: attr(data-rank);

  position: absolute;
  top: -20px;
  left: -20px;

  width: 32px;
  height: 32px;

  /* DEFAULT COLOR: Slate Gray */
  background-color: #64748b;

  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  z-index: 10;
  border: 2px solid white;
  transition:
    background-color 0.5s ease,
    transform 0.3s ease; /* Smooth transition */
}

/* 2. Hide the badge entirely if there is no rank assigned */
#question-grid .question-card[data-rank=""]::before,
#question-grid .question-card:not([data-rank])::before {
  display: none !important;
}

/* 3. SHUFFLED BADGE: Brand Purple + Pop Effect */
#question-grid.shuffled-mode .question-card::before {
  background-color: #a855f7;
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 4px 10px rgba(168, 85, 247, 0.4);
}

/* 4. Explicitly ensure facilitator questions have NO badge content by default */
#question-grid .question-card.is-facilitator-question::before {
  content: none !important;
  display: none !important;
}

/* --- LIST VIEW MODE --- */
#question-grid.list-mode {
  gap: 0.5rem;
  grid-template-columns: 1fr;
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
}

/* Apply horizontal layout to any card that IS NOT currently selected */
#question-grid.list-mode .question-card:not(.card-selected) {
  min-height: auto;
  flex-direction: row;
  align-items: center;
  padding: 0.6rem 1rem 0.6rem 1.5rem;
}

#question-grid.list-mode
  .question-card:not(.card-selected)
  .card-content {
  padding: 0;
  flex: 1;
  min-width: 0;
  margin-right: 1.5rem;
}

/* Allow text to wrap naturally in list mode */
#question-grid.list-mode .question-card:not(.card-selected) p {
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.4;
}

/* Hide all secondary clutter */
#question-grid.list-mode
  .question-card:not(.card-selected)
  .preset-prompt,
#question-grid.list-mode
  .question-card:not(.card-selected)
  .in-card-broadcast-btn,
#question-grid.list-mode
  .question-card:not(.card-selected)
  .star-card-btn,
#question-grid.list-mode
  .question-card:not(.card-selected)
  .hide-card-btn,
#question-grid.list-mode
  .question-card:not(.card-selected)
  .discuss-card-btn,
#question-grid.list-mode
  .question-card:not(.card-selected)
  .focus-card-btn {
  display: none !important;
}



/* Blend vote controls into the horizontal line */
#question-grid.list-mode
  .question-card:not(.card-selected)
  .vote-controls {
  padding: 0;
  border: none;
  background: transparent;
  margin-left: 0.5rem;
  flex-shrink: 0;
}

/* Adjust Live Badge size and position for the smaller card */
#question-grid.list-mode
  .question-card:not(.card-selected)
  .live-broadcast-badge {
  top: -10px;
  font-size: 0.65rem;
  padding: 2px 10px;
}

/* Shrink the Question Number counters slightly */
#question-grid.list-mode
  .question-card:not(.card-selected):not(
    .is-facilitator-question
  )::before,
#question-grid.list-mode.shuffled-mode
  .question-card.is-facilitator-question:not(.card-selected)::before {
  top: -10px;
  left: -10px;
  width: 24px;
  height: 24px;
  font-size: 0.8rem;
}

/* --- IN-CARD BROADCAST BUTTON --- */
.in-card-broadcast-btn {
  display: none; /* Hidden by default */
  width: calc(100% - 5rem);
  margin: 0 auto 1rem auto;
  padding: 0.6rem;
  background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 6px rgba(147, 51, 234, 0.2);
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.in-card-broadcast-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(147, 51, 234, 0.3);
  filter: brightness(1.1);
}

/* --- CLEAR BOARD BUTTON VISIBILITY --- */
#clear-board-btn {
  display: none;
}

.board-container.is-local-session #clear-board-btn {
  display: inline-flex;
}

#clear-board-btn:hover {
  background-color: #fee2e2 !important;
  color: #dc2626 !important;
  border-color: #dc2626 !important;
}

#export-board-btn:hover {
  background-color: #d1fae5 !important;
  color: #059669 !important;
  border-color: #059669 !important;
}

/* --- PREVIEW BUTTON VISIBILITY --- */
#preview-mode-toggle {
  display: none;
}

/* Show when tools are unlocked OR when actively previewing */
.board-container.facilitator-tools-active #preview-mode-toggle,
.board-container.preview-mode-active #preview-mode-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- EXPORT BUTTON VISIBILITY --- */
#export-board-btn {
  display: none; /* Hidden for participants */
}

.board-container.facilitator-tools-active #export-board-btn,
.board-container.is-local-session #export-board-btn {
  display: inline-flex;
}

/* --- END SESSION BUTTON VISIBILITY --- */
#board-end-session-btn {
  display: none; /* Hidden for participants */
}

.board-container.facilitator-tools-active #board-end-session-btn {
  display: inline-flex;
}

/* Explicitly hide for personal/local boards */
.board-container.is-local-session #board-end-session-btn {
  display: none !important;
}

/* --- TV MODE BUTTON VISIBILITY --- */
#tv-mode-btn,
#tv-mode-setup-btn {
  display: none; /* Hidden for participants */
}

.board-container.facilitator-tools-active #tv-mode-btn,
.board-container.facilitator-tools-active #tv-mode-setup-btn {
  display: inline-flex;
}

/* Explicitly hide for personal/local boards, even if unlocked */
.board-container.is-local-session #tv-mode-btn,
.board-container.is-local-session #tv-mode-setup-btn {
  display: none !important;
}

/* ONLY show it when the board is unlocked OR it is a local session, AND the specific card is selected */
.board-container.facilitator-tools-active
  .question-card.card-selected
  .in-card-broadcast-btn,
.board-container.is-local-session
  .question-card.card-selected
  .in-card-broadcast-btn {
  display: flex;
}

/* Hide it if the card is CURRENTLY being broadcasted (we'll show a "Stop" button instead) */
.board-container.facilitator-tools-active
  .question-card.card-selected.is-broadcasting
  .in-card-broadcast-btn {
  display: none;
}

/* --- LIVE BROADCAST BADGE STYLES (UPDATED) --- */
.live-broadcast-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 4px 12px;
  border-radius: 9999px;
  box-shadow: 0 4px 6px rgba(239, 68, 68, 0.3);
  display: none;
  align-items: center;
  gap: 6px;
  z-index: 15;
  animation: pulse-live 2s infinite;
  white-space: nowrap;

  /* NEW: Button interactive styles */
  cursor: pointer;
  border: none;
  transition: all 0.2s ease-in-out;
}

.live-broadcast-badge:hover {
  transform: translateX(-50%) scale(1.05);
  box-shadow: 0 6px 12px rgba(239, 68, 68, 0.5);
  animation: none; /* Pause pulsing on hover for better UX */
}

.live-broadcast-badge:active {
  transform: translateX(-50%) scale(0.95);
}

/* (Keep the .is-broadcasting styles from before) */
.question-card.is-broadcasting {
  border-color: #ef4444;
  box-shadow:
    0 0 0 2px rgba(239, 68, 68, 0.15),
    0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.question-card.is-broadcasting .live-broadcast-badge {
  display: flex !important; /* Added !important to force visibility */
}

/* Hide if this specific card is already the active broadcast */
.question-card.is-broadcasting .in-card-broadcast-btn {
  display: none !important;
}

/* Ensure card handles absolute positioning of the badge */
.question-card {
  position: relative;
  background: #ffffff; /* Pure white to pop against glassy board */
  border: 1px solid #f3f4f6; /* Subtle border */
  border-left: 5px solid #a855f7; /* Keep the accent */
  border-radius: 16px; /* Modern rounding */
  padding: 0;

  /* Soft shadow */
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.05),
    0 2px 4px -1px rgba(0, 0, 0, 0.03);

  opacity: 0;
  transform: translateY(20px);
  animation: fadeInCard 0.5s ease forwards;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  /* Smooth transition for hover effects */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

/* Lift effect on hover */
.question-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 15px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.05);
}

/* --- NEW: Styles for Facilitator/Pre-selected Questions --- */
.question-card.is-facilitator-question {
  background-color: #ffffff; /* Pure white */
  border-left: 5px solid #cbd5e1; /* Gray-300 (Neutral/De-emphasized) */
  border-top: 1px dashed #e5e7eb;
  border-right: 1px dashed #e5e7eb;
  border-bottom: 1px dashed #e5e7eb;
}

.question-card.is-facilitator-question .preset-prompt {
  color: #9ca3af; /* Gray-400 */
  font-weight: 500;
  font-style: italic;
  font-size: 0.8rem;
}

/* --- Disable Voting on Preset Prompts --- */
.question-card.is-facilitator-question .vote-btn {
  opacity: 0.4;
  pointer-events: none;
  filter: grayscale(100%);
  cursor: not-allowed;
}

/* --- Hide Button (Default: Hidden) --- */
.hide-card-btn {
  display: none; /* Hidden for public users */

  /* Keep your existing styling here (positioning, etc.) */
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #fee2e2;
  color: #ef4444;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s;
}

.hide-card-btn:hover {
  background-color: #ef4444;
  color: white;
  transform: scale(1.1);
}

/* --- Facilitator Active: Show Hide Button --- */
/* This reveals the button ONLY when tools are unlocked */
.board-container.facilitator-tools-active .hide-card-btn,
.board-container.is-local-session .hide-card-btn {
  display: flex;
}

/* For mobile touch targets */
.hide-card-btn:active {
  transform: scale(0.95);
}

/* If hidden by filter, counters should theoretically skip it in modern browsers,
     but if not, the CSS counter respects DOM order. 
     (Note: display:none elements are ignored by counters) */

.loading {
  font-size: 1.2rem;
  color: #6b7280; /* Gray-500 */
  text-align: center;
  grid-column: 1 / -1;
  padding: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}

.loading i {
  color: #a855f7; /* Purple-500 */
}

/* Selected Card State */
.question-card.card-selected {
  background-color: #faf5ff; /* Very light purple tint */
  border-color: #d8b4fe;
  transform: scale(1.02);
  /* A purple glow ring around the card */
  box-shadow:
    0 0 0 4px rgba(168, 85, 247, 0.25),
    0 10px 15px -3px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

/* HIDE the X button when selected */
.question-card.card-selected .hide-card-btn {
  display: none;
}

.question-card.card-selected p {
  font-size: 1.2rem;
  color: #1f2937;
}

.question-card.card-selected .preset-prompt {
  font-size: 1rem;
  color: var(--highlight-name-color);
}

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

.card-content {
  padding: 1.5rem;
}

.question-card p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #1f2937; /* Gray-800 */
  font-weight: 500;
  margin: 0 0 1rem 0;
  transition:
    font-size 0.2s ease-in-out,
    font-weight 0.2s ease-in-out;
}

.preset-prompt {
  font-weight: 600;
  font-size: 0.9rem;
  color: #6b46c1; /* Purple */
  display: block;
  text-align: right;
  margin-top: 0.5rem;
  transition:
    font-size 0.2s ease-in-out,
    color 0.2s ease-in-out;
}

/* Vote controls */
.vote-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  border-top: 1px solid #e5e7eb;
  background: #ffffff;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.board-container:not(.local-voting-mode):not(.no-voting-mode)
  .vote-controls {
  display: flex !important;
}
.board-container.local-voting-mode .vote-controls {
  display: flex !important;
}
.board-container.no-voting-mode .vote-controls {
  display: none !important;
}

.vote-count {
  font-size: 0.9rem;
  font-weight: 600;
  color: #374151;
  min-width: 50px;
  text-align: center;
}

.vote-btn {
  background: #ede9fe;
  color: #6b46c1;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
}

.vote-btn:hover {
  background: #c4b5fd;
  transform: scale(1.1);
}

.vote-btn:active {
  transform: scale(0.95);
}

.vote-btn.plus {
  background: #a855f7;
  color: #ffffff;
}

.vote-btn.plus:hover {
  background: #9333ea;
}

/* --- Upvote-Only Mode Styles --- */
.vote-controls.upvote-only-mode {
  justify-content: space-between; /* Puts the count on the left, button on the right */
}

.vote-controls.upvote-only-mode .vote-btn.plus {
  width: auto; /* Override the 32px fixed width */
  padding: 0 1.25rem; /* Add horizontal padding */
  border-radius: 9999px; /* Make it a pill shape */
  gap: 0.4rem; /* Space between icon and text */
}

/* Add the word "Upvote" next to the icon */
.vote-controls.upvote-only-mode .vote-btn.plus::after {
  content: "Upvote";
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
}

/* --- Session Overlay Styles --- */
#session-overlay {
  background: transparent;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;

  /* --- CHANGED: Remove rigid centering properties --- */
  /* justify-content: center;  <-- Remove this */
  /* align-items: center;      <-- Remove this */

  /* --- NEW: Allow scrolling and safe alignment --- */
  overflow-y: auto; /* Enables vertical scrolling */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */

  z-index: 1000;
  padding: 1rem;
  box-sizing: border-box;
}

.session-box {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 24px;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.05),
    0 20px 25px -5px rgba(124, 58, 237, 0.15);
  padding: 3rem 2.5rem;
  width: 100%;
  max-width: 420px;
  text-align: center;
  transform: translateY(0);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;

  /* --- NEW: This centers the box vertically & horizontally safely --- */
  margin: auto;
  /* --- NEW: Ensure a little breathing room at top/bottom when scrolling --- */
  margin-top: auto;
  margin-bottom: auto;

  position: relative;
}

.session-box:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.05),
    0 25px 30px -5px rgba(124, 58, 237, 0.2);
}

.session-box .logo {
  width: 72px;
  height: 72px;
  border: 3px solid #ffffff; /* White border to separate from bg */
  box-shadow: 0 4px 10px rgba(168, 85, 247, 0.3);
  margin-bottom: 1.25rem;
}

.session-box h2 {
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  font-weight: 600;
  background: linear-gradient(135deg, #7c3aed 0%, #d946ef 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 0.5rem 0;
}

.session-box .subtitle {
  font-size: 1rem;
  color: #4b5563;
  line-height: 1.6;
  margin-bottom: 0.5rem;
}

/* Session Pill List View */
#session-pill-container {
  display: flex;
  flex-direction: column; /* Vertical stack */
  gap: 0.5rem;
  justify-content: flex-start;
  margin-bottom: 0.75rem;
  max-height: 220px; /* Taller scroll area */
  overflow-y: auto;
  padding: 0.25rem;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.session-pill {
  background-color: #ffffff;
  color: #4b5563;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 0.65rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);

  /* UPDATE: Changed from 'auto 1fr' to 'auto minmax(0, 1fr) auto' */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  text-align: left;
  width: 100%;
}

/* The Session Number Badge */
.session-pill .pill-number {
  background-color: #f3f4f6;
  color: #6b46c1;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  font-size: 0.85rem;
  min-width: 45px;
  text-align: center;
}

/* Text Container */
.session-pill .pill-details {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0; /* CRITICAL: Allows the text truncation to work inside the new grid */
}

/* Pill Details (Text Container) --- */
.session-pill .pill-details {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0; /* CRITICAL: Allows the text truncation to work inside the new grid */
}

/* Star Button Styling --- */
.pill-star-btn {
  background: none;
  border: none;
  color: #cbd5e1; /* slate-300 */
  font-size: 1.15rem;
  cursor: pointer;
  padding: 0.25rem;
  margin-right: -0.25rem; /* Pulls it slightly closer to the right edge */
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pill-star-btn:hover,
.pill-star-btn:focus {
  transform: scale(1.15);
  color: #fbbf24; /* amber-400 */
  outline: none;
}

.pill-star-btn.is-starred {
  color: #fbbf24; /* amber-400 */
  text-shadow: 0 0 5px rgba(251, 191, 36, 0.3); /* Soft glow to make it pop */
}

.session-pill .pill-title {
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.95rem;
}

.session-pill .pill-meta {
  font-size: 0.75rem;
  color: #9ca3af;
  display: flex;
  align-items: center;
  gap: 4px;
}

.session-pill:hover,
.session-pill:focus {
  background-color: #faf5ff;
  border-color: #a855f7;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  outline: none;
}

.session-pill:hover .pill-number {
  background-color: #e9d5ff;
  color: #581c87;
}

.session-pill.inactive {
  background-color: #f9fafb;
  opacity: 0.9;
}

.session-pill.inactive:hover,
.session-pill.inactive:focus {
  background-color: #f3f4f6;
  color: #6b7280; /* gray-500 */
  border-color: #e5e7eb; /* gray-200 */
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Wrapper for the input field */
.session-input-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: 0.5rem;
}

#session-input {
  width: 100%;
  padding: 1rem 1.25rem;
  padding-right: 3rem;
  font-size: 1.05rem;
  font-family: "Inter", sans-serif;
  background-color: #f9fafb;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  box-sizing: border-box;
  transition: all 0.2s ease;
  color: #1f2937;
}

#session-input:focus {
  outline: none;
  background-color: #ffffff;
  border-color: #a855f7;
  box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.15);
}

/* Clear Button Styles */
#session-clear-btn {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.17rem;
  color: #9ca3af;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  transition: color 0.2s;
}

#session-clear-btn:hover {
  color: #374151;
}

/* --- UPDATED: Session Box Footer Styles --- */

.session-footer-divider {
  margin: 1.5rem 0;
  border: 0;
  border-top: 1px solid #f3f4f6; /* Very light gray */
}

/* Improved Toggle Container */
.show-inactive-container {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Pushes text left, toggle right */
  background-color: #f9fafb; /* Gray-50 */
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb; /* Gray-200 */
  margin-bottom: 1.25rem;
  transition: background-color 0.2s;
}

.show-inactive-container:hover {
  background-color: #f3f4f6; /* Gray-100 */
}

.show-inactive-label {
  font-size: 0.9rem;
  color: #374151; /* Gray-700 */
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  display: flex;
  flex-direction: column; /* Stack title and subtitle */
  text-align: left;
}

.show-inactive-sublabel {
  font-size: 0.75rem;
  color: #9ca3af; /* Gray-400 */
  font-weight: 400;
}

/* Toggle Switch Track */
.toggle-label {
  display: inline-block;
  position: relative;
  width: 40px; /* Slightly more compact */
  height: 22px;
  background-color: #cbd5e1; /* gray-300 */
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
  flex-shrink: 0; /* Prevent squishing */
}

/* Toggle Switch Thumb */
.toggle-label::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: white;
  top: 2px;
  left: 2px;
  transition: transform 0.2s ease-in-out;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-input:checked + .toggle-label {
  background-color: #a855f7; /* Theme purple */
}

.toggle-input:checked + .toggle-label::after {
  transform: translateX(18px);
}

/* Focus styles for accessibility */
.toggle-input:focus-visible + .toggle-label {
  outline: 2px solid #a855f7;
  outline-offset: 3px;
}

/* Improved Facilitator Link & Mobile Alignment */
.request-session-text {
  font-size: 0.85rem;
  color: #6b7280; /* gray-500 */
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap; /* Allows text to wrap safely on tiny screens */
  text-align: center;
}

.request-session-text a {
  color: #6b46c1;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap; /* Keeps the link text together when wrapping */
}

.request-session-text a:hover {
  color: #9333ea;
  text-decoration: underline;
}

/* Micro-adjustment to perfectly center the new badge with the text baseline */
#proxy-lock-indicator-lobby {
  position: relative;
  top: -1px;
}

/* Improved "Home" Tip Pill */
.session-home-tip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: #854d0e; /* amber-800 */
  background: #fef3c7; /* amber-100 */
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  user-select: none;
}

#session-submit {
  width: 100%;
  background: linear-gradient(135deg, #9333ea 0%, #db2777 100%);
  color: white;
  padding: 1rem;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(147, 51, 234, 0.25);
  margin-top: 0.5rem;
  position: relative;
  overflow: hidden;
  justify-content: center;
}

#session-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 12px rgba(147, 51, 234, 0.35);
  filter: brightness(1.1);
}

#session-submit:active {
  transform: translateY(0);
}

#session-error {
  color: #ef4444; /* Red-500 */
  font-size: 0.9rem;
  margin-top: 1rem;
  display: none; /* Hidden by default */
}

/* --- QR Code Modal Styles (AND General Modal Styles) --- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease-in-out,
    visibility 0.3s ease-in-out;
}

.modal-content {
  background-color: white;
  padding: 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
  text-align: center;
  max-width: 350px;
  width: 90%;
  position: relative;
  transform: translateY(-20px);
  transition: transform 0.3s ease-in-out;
}

.modal-overlay.show {
  display: flex;
  opacity: 1;
  visibility: visible;
}

.modal-overlay.show .modal-content {
  transform: translateY(0);
}

.modal-buttons {
  display: flex;
  justify-content: space-around;
  margin-top: 1.5rem;
}

.modal-button {
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.modal-button.cancel {
  background-color: #e2e8f0; /* Gray-200 */
  color: #4a5568; /* Gray-700 */
}
.modal-button.cancel:hover {
  background-color: #cbd5e0; /* Gray-300 */
}

.qr-modal-close-button {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #4a5568;
  line-height: 1;
  padding: 0.25rem;
  border-radius: 50%;
  transition:
    background-color 0.2s,
    color 0.2s;
}

.qr-modal-close-button:hover {
  background-color: #e2e8f0;
  color: #2d3748;
}

/* --- UPDATED: QR Code Container Styles --- */
#qr-code-container {
  width: 250px;
  height: 250px;
  margin: 0.5rem auto 1rem auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

#qr-code-container img,
#qr-code-container canvas {
  border-radius: 0.5rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-width: 100%;
  height: auto;
}

#qr-modal-content {
  padding: 1.5rem;
  max-width: 350px;
}

.qr-modal-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.5rem;
}

.qr-modal-subtitle {
  font-size: 0.875rem;
  color: #4b5563;
  margin-bottom: 1rem;
}

.qr-modal-link-container {
  font-size: 0.875rem;
  color: #374151;
  margin-top: 0.5rem;
}

.qr-modal-link-container i.fa-link {
  margin-right: 0.25rem;
}

.page-direct-link {
  color: #4f46e5;
  word-break: break-all;
}
.page-direct-link:hover {
  text-decoration: underline;
}

.modal-text-button {
  background: none;
  border: none;
  color: #4f46e5;
  font-size: 0.875rem;
  margin-top: 1rem;
  cursor: pointer;
  font-family: "Inter", sans-serif;
}

.modal-text-button:hover {
  text-decoration: underline;
}

.modal-text-separator {
  color: #9ca3af;
  user-select: none;
}

.qr-modal-footer-text {
  font-size: 0.875rem;
  color: #6b7280;
  margin-top: 1rem;
}

/* Search Engine & Translate Buttons */
#search-google-choice-btn {
  background-color: #4285f4; /* Google Blue */
  color: white;
  font-weight: bold;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  border-radius: 9999px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}
#search-google-choice-btn:hover {
  background-color: #357ae8;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}
#search-google-choice-btn i {
  margin-right: 0.5rem;
}

#search-bing-choice-btn {
  background-color: #008ad6; /* Bing Blue */
  color: white;
  font-weight: bold;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  border-radius: 9999px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}
#search-bing-choice-btn:hover {
  background-color: #006fb7;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}
#search-bing-choice-btn i {
  margin-right: 0.5rem;
}

#search-duckduckgo-choice-btn {
  background-color: #e3722a; /* DuckDuckGo Orange-Yellow */
  color: white;
  font-weight: bold;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  border-radius: 9999px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}
#search-duckduckgo-choice-btn:hover {
  background-color: #c96024;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}
#search-duckduckgo-choice-btn i {
  margin-right: 0.5rem;
}

#search-brave-choice-btn {
  background-color: #fb542b; /* Brave Orange */
  color: white;
  font-weight: bold;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  border-radius: 9999px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}
#search-brave-choice-btn:hover {
  background-color: #d14424;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}
#search-brave-choice-btn i {
  margin-right: 0.5rem;
}

#search-qwant-choice-btn {
  background-color: #000000; /* Qwant Black */
  color: white;
  font-weight: bold;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  border-radius: 9999px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}
#search-qwant-choice-btn:hover {
  background-color: #333333;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}
#search-qwant-choice-btn i {
  margin-right: 0.5rem;
}

#translate-google-choice-btn {
  background-color: #60a5fa; /* Blue-400 */
  color: white;
  font-weight: bold;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  border-radius: 9999px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}
#translate-google-choice-btn:hover {
  background-color: #3b82f6;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}
#translate-google-choice-btn i {
  margin-right: 0.5rem;
}

#translate-bing-choice-btn {
  background-color: #008ad6; /* Bing Blue */
  color: white;
  font-weight: bold;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  border-radius: 9999px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}
#translate-bing-choice-btn:hover {
  background-color: #006fb7;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}
#translate-bing-choice-btn i {
  margin-right: 0.5rem;
}

#translate-deepl-choice-btn {
  background-color: #0f2b46; /* DeepL Blue */
  color: white;
  font-weight: bold;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  border-radius: 9999px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}
#translate-deepl-choice-btn:hover {
  background-color: #0a1e31;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}
#translate-deepl-choice-btn i {
  margin-right: 0.5rem;
}

/* Modal Headings */
.modal-subheading {
  font-size: 0.9rem;
  font-weight: 600;
  color: #4b5563;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
  text-align: center;
  border-bottom: none;
  padding-bottom: 0;
}

/* Styles for copy notification modal */
#copy-notification-modal .modal-buttons {
  flex-direction: column;
  gap: 0.75rem;
}
#share-from-copy-modal-btn {
  background: linear-gradient(
    135deg,
    #a855f7,
    #ec4899
  ); /* purple to pink */
  color: white;
}
#share-from-copy-modal-btn:hover {
  background-color: #9333ea;
}

/* NEW: Feedback Button Style */
#feedback-from-copy-modal-btn {
  background-color: #64748b; /* Slate-500 */
  color: white;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
#feedback-from-copy-modal-btn:hover {
  background-color: #475569; /* Slate-600 */
}

#join-session-from-copy-modal-btn {
  background: linear-gradient(to right, #10b981, #06b6d4);
  color: white;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
#join-session-from-copy-modal-btn:hover {
  background-color: #2563eb;
}

/* --- Floating Back Button Styles --- */
.floating-back-btn {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 3000;
  background-color: #43c6a6;
  color: white;
  border: none;
  padding: 0.65rem 0.9rem;
  border-radius: 9999px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease,
    opacity 0.2s ease;
  opacity: 0.95;
  --pulse-from: #43c6a6;
  --pulse-to: #6b7280;
  --glow-color: rgba(99, 102, 241, 0.55);
}
.floating-back-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.2);
  background-color: #374151;
  opacity: 1;
}
.floating-back-btn:active {
  transform: translateY(0);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

@keyframes backBtnPulse {
  0% {
    transform: translateY(0) scale(1);
    background-color: var(--pulse-from);
    box-shadow:
      0 0 0 rgba(0, 0, 0, 0),
      0 8px 16px rgba(0, 0, 0, 0.15);
  }
  50% {
    transform: translateY(-1px) scale(1.06);
    background-color: var(--pulse-to);
    box-shadow:
      0 0 18px var(--glow-color),
      0 12px 22px rgba(0, 0, 0, 0.2);
  }
  100% {
    transform: translateY(0) scale(1);
    background-color: var(--pulse-from);
    box-shadow:
      0 0 0 rgba(0, 0, 0, 0),
      0 8px 16px rgba(0, 0, 0, 0.15);
  }
}
.floating-back-btn.attention {
  animation: backBtnPulse 900ms ease-in-out 0s 3;
}
@media (prefers-reduced-motion: reduce) {
  .floating-back-btn.attention {
    animation: none;
    outline: 2px solid #a855f7;
    outline-offset: 2px;
  }
}

/* --- NEW FLOATING BUTTON STYLES --- */

#back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px; /* Match the right alignment of the other buttons */
  width: 56px; /* Match the dice size */
  height: 56px; /* Match the dice size */
  background-color: #6b46c1; /* Purple-500 */
  color: white;
  font-size: 1.25rem;
  border: none;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  display: none; /* Toggled by JS */
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  transition: all 0.3s ease-in-out;
  z-index: 1000;
}

#back-to-top:hover {
  background-color: #805ad5;
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
  opacity: 1;
}

/* Floating Dice Button */
#floating-dice {
  position: fixed;
  bottom: 88px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: linear-gradient(
    135deg,
    #10b981,
    #06b6d4
  ); /* teal to cyan */
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  z-index: 1100;
  transition:
    transform 0.15s ease-in-out,
    box-shadow 0.2s ease-in-out,
    filter 0.2s;
}
#floating-dice:hover,
#floating-dice:focus {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.2);
  outline: none;
  filter: brightness(1.05);
}
#floating-dice:active {
  transform: translateY(0) scale(0.98);
}
#floating-dice .fa-dice {
  font-size: 1.4rem;
}

/* Floating Look Up / Translate Button */
#floating-lookup {
  position: fixed;
  bottom: 88px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #3b82f6, #10b981);
  color: #ffffff;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  z-index: 1150;
  transition:
    transform 0.15s ease-in-out,
    box-shadow 0.2s ease-in-out,
    filter 0.2s,
    bottom 0.2s ease-in-out;
  cursor: pointer;
}
#floating-lookup i {
  font-size: 1.17rem;
}
#floating-lookup:hover,
#floating-lookup:focus {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.2);
  outline: none;
  filter: brightness(1.05);
}
#floating-lookup:active {
  transform: translateY(0) scale(0.98);
}

/* Floating Copy Button */
#floating-copy {
  position: fixed;
  bottom: 156px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #a855f7, #ec4899);
  color: #ffffff;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  z-index: 1140;
  transition:
    transform 0.15s ease-in-out,
    box-shadow 0.2s ease-in-out,
    filter 0.2s,
    bottom 0.2s ease-in-out;
  cursor: pointer;
}
#floating-copy i {
  font-size: 1.15rem;
}
#floating-copy:hover,
#floating-copy:focus {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.2);
  outline: none;
  filter: brightness(1.05);
}
#floating-copy:active {
  transform: translateY(0) scale(0.98);
}

/* Responsive Design */
@media (max-width: 768px) {
  body {
    padding: 1rem;
  }

  .board-container {
    padding: 1.5rem;
  }

  .main-heading {
    font-size: 1.65rem;
  }

  #question-grid {
    grid-template-columns: 1fr;
  }
}

/* MOBILE FLOATING BUTTON STYLES */
@media (max-width: 480px) {
  #floating-dice {
    width: 52px;
    height: 52px;
    bottom: 80px;
    right: 16px;
  }
  #floating-dice .fa-dice {
    font-size: 1.17rem;
  }
  #back-to-top {
    bottom: 16px;
    right: 16px; /* Match the mobile right alignment */
    width: 52px; /* Match the mobile dice size */
    height: 52px; /* Match the mobile dice size */
    font-size: 1.15rem; /* Slightly larger icon for the bigger button */
  }
  #floating-lookup {
    width: 52px;
    height: 52px;
    right: 16px;
    bottom: 80px;
  }
  #floating-lookup i {
    font-size: 1.15rem;
  }
  #floating-copy {
    width: 52px;
    height: 52px;
    right: 16px;
    bottom: 144px;
  }
  #floating-copy i {
    font-size: 1.05rem;
  }
}

/* Hide the pill separator on mobile to prevent awkward wrapping */
@media (max-width: 640px) {
  .pill-separator {
    display: none;
  }
}

/* --- NEW: Shuffle Animation Effects --- */
@keyframes shuffle-rumble {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-2px, 2px) rotate(-1deg);
  }
  50% {
    transform: translate(2px, -1px) rotate(1deg);
  }
  75% {
    transform: translate(-1px, -2px) rotate(0deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

/* --- DYNAMIC STATS POP ANIMATION --- */
@keyframes stat-pop {
  0% {
    transform: scale(1);
    color: inherit;
  }
  50% {
    transform: scale(1.15);
    color: #7c3aed; /* Darker Purple */
  }
  100% {
    transform: scale(1);
    color: inherit;
  }
}

.stat-pop-animate {
  animation: stat-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: inline-block; /* Transform requires block or inline-block */
}

.is-shuffling {
  /* Visual chaos */
  animation: shuffle-rumble 0.1s infinite linear;
  filter: blur(1px); /* Motion blur effect */
  pointer-events: none; /* Prevent clicking while shuffling */
  opacity: 0.8;
}

/* --- NEW: Focus Mode & Pick-a-Question Styles --- */

/* 1. Mindful Highlight Animation (The "Pick-a-Question" Effect) */
/* Aligned with clarity.html for consistency */
.mindful-highlight {
  border-color: #a855f7 !important; /* Purple-500 */
  background-color: #f3e8ff !important; /* Purple-100 */
  transform: scale(1.02);
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.3); /* Soft glow */
  transition: all 0.2s ease-in-out;
  position: relative;
  z-index: 50; /* Bring to front */
}

/* 2. Focus Button on Card (Top Right, next to Hide button) */
.focus-card-btn {
  position: absolute;
  top: 8px;
  right: 8px; /* Positioned exactly where Hide (X) button is */
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid #e5e7eb;
  color: #6b7280;
  cursor: pointer;
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
  z-index: 20;
  animation: fadeInCard 0.2s ease-in-out;
}

.focus-card-btn:hover {
  background-color: #f3e8ff; /* Purple-100 */
  color: #7c3aed; /* Purple-600 */
  border-color: #d8b4fe;
  transform: scale(1.1);
}

/* Toggle visibility: Hide X button, Show Focus button when selected */
.question-card.card-selected .hide-card-btn {
  display: none;
}

.question-card.card-selected .focus-card-btn {
  display: flex;
}

/* 3. "Help me pick" Button Container */
#random-pick-container {
  text-align: center;
  margin-bottom: 1.5rem;
  margin-top: -1rem; /* Pull closer to search bar */
}

/* 4. Focus Mode Modal (Tailwind-based styling support) */
#focus-mode-modal {
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

/* --- NEW: Star Icon Styling for Cards --- */
.star-card-btn {
  position: absolute;
  top: 5px;
  left: 5px; /* Top Left positioning */
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: transparent; /* Transparent by default */
  border: none;
  color: #d1d5db; /* Gray-300 (Unsaved) */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
  z-index: 20;
  font-size: 1.1rem;
}

.star-card-btn:hover {
  transform: scale(1.15);
  color: #fbbf24; /* Amber-400 */
}

/* Saved State */
.question-card.is-saved .star-card-btn {
  color: #fbbf24; /* Amber-400 (Gold) */
  text-shadow: 0 0 2px rgba(245, 158, 11, 0.5);
}

/* Adjust Card Content to not overlap star */
.card-content {
  padding: 1.5rem;
  padding-top: 2rem; /* Add space at top for star/buttons */
}

/* ... existing styles ... */

/* --- UPDATED: Saved Item Action Buttons --- */
.saved-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.chosen-item-text {
  color: #1f2937;
  font-size: 1.1rem;
  font-weight: 500;
  /* Removed padding-right: 2rem; as we are using flexbox now */
  word-break: break-word;
}

.saved-item-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.75rem;
  flex-shrink: 0; /* Prevent buttons from squishing */
}

.saved-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
  font-size: 1rem;
}

.saved-btn:hover {
  background-color: #f3f4f6; /* Gray-100 */
  transform: scale(1.1);
}

/* Specific button colors */
.saved-focus-btn {
  color: #9ca3af; /* Gray-400 */
}
.saved-focus-btn:hover {
  color: #a855f7; /* Purple */
  background-color: #f3e8ff; /* Purple-100 */
}

.saved-star-btn {
  color: #fbbf24; /* Amber-400 (Gold) */
}
.saved-star-btn:hover {
  color: #f59e0b; /* Amber-500 */
  text-shadow: 0 0 5px rgba(251, 191, 36, 0.4);
}

/* ... existing styles ... */

/* --- NEW: Saved Items Section Styles --- */
#saved-questions-container {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 2px dashed #e5e7eb;
}

.saved-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.saved-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #6b46c1; /* Purple */
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* --- UPDATED: Saved Items Styles --- */
.chosen-item {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  /* Add top padding to clear space for the absolute buttons */
  padding: 1rem;
  padding-top: 2.5rem;
  margin-bottom: 0.75rem;
  position: relative; /* Essential for absolute positioning of children */
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.chosen-item:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.chosen-item.selected-chosen-item {
  background-color: #f3e8ff; /* Purple-100 */
  border-color: #a855f7;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.15);
}

/* --- The Text Content --- */
.chosen-item-text {
  color: #1f2937;
  font-size: 1rem;
  font-weight: 500;
  word-break: break-word;
  transition:
    font-size 0.2s ease,
    line-height 0.2s ease;
}

/* --- ZOOMED STATE (New Requirement) --- */
.chosen-item.zoomed-in .chosen-item-text {
  font-size: 1.3rem; /* Significantly larger */
  line-height: 1.5;
  color: #374151; /* Slightly darker for readability */
  font-weight: 500;
}

/* --- BUTTONS: Absolute Positioning --- */
.saved-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
  font-size: 1.1rem;
  position: absolute; /* Key change */
  top: 8px;
  z-index: 10;
}

.saved-btn:hover {
  background-color: rgba(255, 255, 255, 0.8);
  transform: scale(1.15);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Star: Top Left */
.saved-star-btn {
  left: 8px;
  color: #fbbf24; /* Amber-400 */
}
.saved-star-btn:hover {
  color: #f59e0b;
}

/* Focus: Top Right */
.saved-focus-btn {
  right: 8px;
  color: #9ca3af; /* Gray-400 */
  display: none; /* <--- CHANGED: Hidden by default */
}

/* Only show Focus button when the item is tapped (zoomed-in) */
.chosen-item.zoomed-in .saved-focus-btn {
  display: flex;
  animation: fadeInCard 0.2s ease-in-out;
}

.saved-focus-btn:hover {
  color: #a855f7; /* Purple */
  background-color: #f3e8ff; /* Purple-100 */
}

/* Notes Area */
.note-container {
  margin-top: 0.75rem;
  display: none;
}
.chosen-item .note-textarea {
  width: 100%;
  font-size: 0.95rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 0.5rem;
  min-height: 38px;
  resize: vertical;
  background: #ffffff;
}
#chosen-questions-display.notes-visible .note-container {
  display: block;
}
/* Toggle Switch Styling (Reused from existing CSS if available, ensuring here) */
.switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  margin-right: 0.5rem;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 22px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}
input:checked + .slider {
  background-color: #a855f7;
}
input:checked + .slider:before {
  transform: translateX(16px);
}

/* Manage/Clear Buttons */
.saved-actions-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.btn-secondary-action {
  flex: 1;
  background-color: #e5e7eb;
  color: #374151;
  padding: 0.75rem;
  border-radius: 0.5rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  font-size: 0.9rem;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-secondary-action:hover {
  background-color: #d1d5db;
}

.btn-manage-link {
  flex: 1;
  background-color: #c084fc; /* Light Purple */
  color: white;
  padding: 0.75rem;
  border-radius: 0.5rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: background 0.2s;
}
.btn-manage-link:hover {
  background-color: #a855f7;
}

/* Highlight Animation for "Jump to Saved" */
@keyframes saved-flash {
  0% {
    background-color: rgba(168, 85, 247, 0.2);
  }
  100% {
    background-color: transparent;
  }
}
.highlight-saved-section {
  animation: saved-flash 1.5s ease-out;
  border-radius: 8px;
}
/* --- Facilitator Auth Modal Styles --- */
.auth-input-wrapper {
  position: relative;
  width: 100%;
  margin: 1.5rem 0;
}

.auth-input {
  width: 100%;
  padding: 0.75rem 2.5rem 0.75rem 1rem; /* Space for eye icon */
  font-size: 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 0.75rem;
  outline: none;
  transition: all 0.2s;
  background: #f9fafb;
}

.auth-input:focus {
  border-color: #a855f7;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
}

.toggle-password-btn {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0.25rem;
  transition: color 0.2s;
}

.toggle-password-btn:hover {
  color: #6b46c1;
}

.auth-error-msg {
  color: #ef4444;
  font-size: 0.85rem;
  margin-top: -1rem;
  margin-bottom: 1rem;
  min-height: 1.25rem;
  opacity: 0;
  transition: opacity 0.2s;
}

.auth-error-msg.visible {
  opacity: 1;
}

/* Shake Animation for wrong password */
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-4px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(4px);
  }
}

.shake-animation {
  animation: shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  border-color: #ef4444 !important;
}
#facilitator-logout-btn:hover {
  background-color: #fef2f2; /* Light red background */
  color: #dc2626; /* Darker red text */
  border-color: #dc2626;
}

/* --- Badge for Facilitator (Added based on request) --- */
.badge-facilitator-hero {
  font-size: 0.4em; /* Relative to H1 */
  padding: 4px 10px;
  border-radius: 8px;
  vertical-align: middle;
  background-color: #ffffff;
  color: #a855f7; /* Theme purple */
  border: 2px solid #a855f7;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  position: relative;
  top: -6px;
  box-shadow: 0 4px 6px -1px rgba(107, 70, 193, 0.1);
  margin-left: 10px;
}
@media (max-width: 768px) {
  .badge-facilitator-hero {
    display: block;
    width: fit-content;
    margin: 5px auto;
    font-size: 0.5em;
  }
}
/* --- PRO & FACILITATOR LOCK STYLES --- */
.locked-feature {
  opacity: 0.5;
  pointer-events: none; /* Crucial to prevent bypass clicks */
  filter: grayscale(1);
  cursor: not-allowed;
}
.lock-wrapper {
  display: inline-flex;
  position: relative;
  cursor: pointer;
}
.lock-wrapper::after {
  content: "\f023";
  font-family:
    "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
  font-weight: 900;
  position: absolute;
  top: -10px; /* Changed from -6px */
  right: -14px; /* Changed from -6px */
  background: #fbbf24;
  color: white;
  width: 20px;
  height: 20px;
  font-size: 10px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 50;
}
.lock-wrapper:hover::after {
  transform: scale(1.1);
}

/* --- UNDO TOAST NOTIFICATION --- */
#csc-undo-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background-color: #1f2937; /* Gray-800 */
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#csc-undo-toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

#csc-undo-btn {
  background: rgba(168, 85, 247, 0.2);
  border: 1px solid #a855f7;
  color: #d8b4fe;
  font-weight: bold;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 4px 12px;
  border-radius: 9999px;
  transition: all 0.2s;
}

#csc-undo-btn:hover {
  background: #a855f7;
  color: white;
}

/* --- MARK AS DISCUSSED STATE --- */
.question-card.is-discussed {
  opacity: 0.5;
  filter: grayscale(0.8);
  transform: scale(0.95);
  order: 999; /* Magically pushes this card to the bottom of the CSS Grid! */
  box-shadow: none;
  border-color: #e5e7eb;
}

.question-card.is-discussed:hover {
  opacity: 0.8;
  transform: scale(0.98);
}

/* --- DISCUSS BUTTON --- */
.discuss-card-btn {
  display: none; /* Hidden for participants */
  position: absolute;
  top: 0.5rem;
  right: 2.75rem; /* Sits right next to the Hide/X button */
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #dcfce7;
  color: #10b981; /* Emerald green */
  border-radius: 50%;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s;
}

.discuss-card-btn:hover {
  background-color: #10b981;
  color: white;
  transform: scale(1.1);
}

.board-container.facilitator-tools-active .discuss-card-btn,
.board-container.is-local-session .discuss-card-btn {
  display: flex;
}

/* Hide the button if the card is actively selected to prevent clutter */
.question-card.card-selected .discuss-card-btn {
  display: none;
}

/* --- TEMP HIDE BUTTON --- */
.temp-hide-card-btn {
  display: none; /* Hidden for participants */
  position: absolute;
  top: 0.5rem;
  right: 5.0rem; /* Positioned to the left of the discuss button (2.75rem + 2.25rem) */
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #e2e8f0; /* Slate-200 */
  color: #64748b; /* Slate-500 */
  border-radius: 50%;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s;
}

.temp-hide-card-btn:hover {
  background-color: #64748b;
  color: white;
  transform: scale(1.1);
}

.board-container.facilitator-tools-active .temp-hide-card-btn,
.board-container.is-local-session .temp-hide-card-btn {
  display: flex;
}

/* Hide the button if the card is actively selected */
.question-card.card-selected .temp-hide-card-btn {
  display: none;
}

/* --- STATE: TEMPORARILY HIDDEN --- */
.question-card.is-temp-hidden {
  display: none !important;
}

/* --- FOCUS MODE TIMER STYLES --- */
.focus-timer-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  z-index: 100;
  animation: fadeInCard 0.3s ease-in-out;
}

.focus-timer-display {
  font-size: 3.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums; /* Prevents text shifting */
  color: #4b5563; /* Gray-600 */
  transition: color 0.3s ease;
  line-height: 1;
  letter-spacing: 0.05em;
}

.focus-timer-display.time-up {
  color: #ef4444; /* Red-500 */
  animation: timer-pulse 1s infinite;
}

@keyframes timer-pulse {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.focus-timer-controls {
  display: flex;
  gap: 0.5rem;
}

.timer-btn {
  background: #f3f4f6; /* Gray-100 */
  border: 1px solid #e5e7eb;
  color: #4b5563;
  padding: 0.4rem 0.8rem;
  border-radius: 9999px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
}

.timer-btn:hover {
  background: #e5e7eb; /* Gray-200 */
  transform: translateY(-1px);
}

.timer-btn.active-play {
  background: #10b981; /* Emerald-500 */
  color: white;
  border-color: #10b981;
}

/* --- DEDICATED TV / PRESENTER MODE STYLES --- */
#tv-mode-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  /* Reusing the Aurora background */
  background:
    radial-gradient(at 0% 0%, hsla(253, 16%, 7%, 1) 0, transparent 50%),
    radial-gradient(at 50% 0%, hsla(225, 39%, 30%, 1) 0, transparent 50%),
    radial-gradient(at 100% 0%, hsla(339, 49%, 30%, 1) 0, transparent 50%);
  background-color: #f3f4f6;
  background-image:
    radial-gradient(
      at 40% 20%,
      hsla(266, 100%, 94%, 1) 0px,
      transparent 50%
    ),
    radial-gradient(
      at 80% 0%,
      hsla(289, 100%, 96%, 1) 0px,
      transparent 50%
    ),
    radial-gradient(
      at 0% 50%,
      hsla(340, 100%, 96%, 1) 0px,
      transparent 50%
    ),
    radial-gradient(
      at 80% 50%,
      hsla(266, 100%, 96%, 1) 0px,
      transparent 50%
    ),
    radial-gradient(
      at 0% 100%,
      hsla(289, 100%, 96%, 1) 0px,
      transparent 50%
    ),
    radial-gradient(
      at 80% 100%,
      hsla(340, 100%, 96%, 1) 0px,
      transparent 50%
    ),
    radial-gradient(
      at 0% 0%,
      hsla(340, 100%, 96%, 1) 0px,
      transparent 50%
    );
  background-size: 200% 200%;
  animation: aurora 15s ease infinite;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* --- TV MODE CONTROLS --- */
.tv-controls-wrapper {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  display: flex;
  gap: 0.75rem;
  z-index: 100000;
}

.tv-control-btn {
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #4b5563; /* Gray-600 */
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  transition: all 0.2s ease;
  font-family: "Inter", sans-serif;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.tv-control-btn:hover {
  background: rgba(255, 255, 255, 0.9);
  color: #7c3aed; /* Purple-600 */
  border-color: #d8b4fe;
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.tv-control-btn.exit-btn:hover {
  color: #ef4444; /* Red-500 */
  border-color: #fca5a5;
}

/* --- Make the view full screen so absolute elements push to the corners --- */
.tv-view {
  position: absolute;
  width: 100vw;       /* Changed from 90% */
  height: 100vh;      /* Added to force full screen */
  max-width: none;    /* Removed max-width constraint */
  box-sizing: border-box;
  padding: 4rem;      /* Safe area padding */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.95);
  transition:
    opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- NEW: Add extra horizontal padding to Active View to dodge the QR code --- */
#tv-active-view {
  padding: 6rem 12vw; 
}

.tv-view.active {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

/* Idle View Elements */
.tv-logo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
  border: 4px solid white;
}
.tv-idle-heading {
  font-size: 4rem;
  font-weight: 800;
  color: #1f2937;
  margin: 0 0 1rem 0;
  letter-spacing: -0.03em;
}
.tv-join-info {
  display: flex;
  align-items: center;
  gap: 0; /* CHANGED: Removed the 1rem gap so the text sits flush */
  font-size: 3rem;
  font-weight: 700;
  background: white;
  padding: 1rem 3rem;
  border-radius: 9999px;
  box-shadow: 0 10px 30px rgba(168, 85, 247, 0.15);
  margin-bottom: 3rem;
  border: 2px solid #e9d5ff;
}
.tv-url {
  color: #4b5563;
}
.tv-hash {
  color: #d8b4fe;
  /* CHANGED: Removed the negative margin-right since the gap is gone */
}
.tv-code {
  color: #7c3aed;
  background: linear-gradient(135deg, #7c3aed 0%, #d946ef 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tv-qr-wrapper {
  background: white;
  padding: 2rem;
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
}
.tv-instruction {
  font-size: 1.5rem;
  color: #6b7280;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Active View Elements */
.tv-label {
  font-size: 1.5rem;
  font-weight: 800;
  color: #9333ea;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 2rem;
}
.tv-question-text {
  font-size: 5rem;
  font-weight: 800;
  color: #111827;
  text-align: center;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.05));
}
/* --- TV Mode New Topic Badge --- */
.tv-new-badge {
  position: absolute;
  top: 3rem; 
  left: 50%; /* Force horizontal centering */
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  color: white;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 8px 20px;
  border-radius: 9999px;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
  font-size: 1.2rem;
  z-index: 100; /* Ensure it stays above text */

  /* Hidden state */
  opacity: 0;
  /* Updated to translate X and Y to perfectly center */
  transform: translate(-50%, -20px) scale(0.9);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); 
  pointer-events: none;
}

.tv-new-badge.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1); /* Updated transform */
}

/* Subtle pop animation for the giant text */
@keyframes tv-text-pop {
  0% {
    transform: scale(0.97);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.tv-text-update-anim {
  animation: tv-text-pop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275)
    forwards;
}
/* --- PRO & FACILITATOR LOCK STYLES --- */
.locked-feature {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(1);
  position: relative;
  cursor: not-allowed;
}

.lock-wrapper {
  display: inline-block;
  position: relative;
  cursor: pointer;
  width: 100%;
}

.lock-wrapper::after {
  content: "\f023";
  font-family:
    "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
  font-weight: 900;
  position: absolute;
  top: -10px; /* Changed from -6px */
  right: -14px; /* Changed from -6px */
  background: #fbbf24;
  color: white;
  width: 21px;
  height: 21px;
  font-size: 10px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 50;
  transition: transform 0.2s;
}

.lock-wrapper:hover::after {
  transform: scale(1.1);
}

/* --- HIDE UNLOCK TOOLS FOR LOCAL SESSIONS --- */
.board-container.is-local-session #facilitator-tools-btn {
  display: none !important;
}

/* --- TABS NAVIGATION --- */
.tabs-container {
  display: flex;
  background-color: #f3f4f6; /* Gray-100 */
  padding: 0.35rem;
  border-radius: 12px;
  margin-bottom: 1.5rem;
  gap: 0.25rem;
}

.tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: #6b7280; /* Gray-500 */
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.tab-btn:hover {
  color: #374151; /* Gray-700 */
}

.tab-btn.active {
  background-color: #ffffff;
  color: #7c3aed; /* Purple-600 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tab-pane {
  display: none;
  animation: fadeInPane 0.3s ease forwards;
}

.tab-pane.active {
  display: block;
}

@keyframes fadeInPane {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Ensure the button fills the lock wrapper inside the Local tab */
.lock-wrapper {
  display: flex !important;
  width: 100%;
}

.lock-wrapper > button,
.lock-wrapper > label {
  width: 100%;
  flex: 1;
}

/* --- NEW LEAVE BOARD BUTTON STYLES --- */
.leave-board-btn {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #e5e7eb;
  color: #6b7280;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.8rem;
  border-radius: 9999px;
  transition: all 0.2s ease;
  font-family: "Inter", sans-serif;
  z-index: 50;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.leave-board-btn:hover {
  background: #ffffff;
  color: #7c3aed; /* Purple-600 */
  border-color: #d8b4fe; /* Purple-300 */
  transform: translateX(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
  .leave-board-btn {
    top: 1rem;
    left: 1rem;
    padding: 0.4rem 0.7rem;
    font-size: 0.85rem;
  }
}

/* --- iOS iFrame Scrolling Fix --- */
.iframe-scroll-wrapper {
  position: relative;
  flex-grow: 1;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 0.5rem;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
}

.iframe-scroll-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- NEW RETURN TO BOARD BUTTON STYLES --- */
.return-to-board-btn {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #e5e7eb;
  color: #7c3aed; /* Purple-600 */
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.8rem;
  border-radius: 9999px;
  transition: all 0.2s ease;
  font-family: "Inter", sans-serif;
  z-index: 50;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.return-to-board-btn:hover {
  background: #ffffff;
  border-color: #d8b4fe; /* Purple-300 */
  transform: translateX(
    2px
  ); /* Slides slightly right to indicate forward movement */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
  .return-to-board-btn {
    top: 1rem;
    right: 1rem;
    padding: 0.4rem 0.7rem;
    font-size: 0.85rem;
  }
}
/* --- OPTIMISTIC TOP PIN --- */
.optimistic-top-pin {
  order: -1 !important;
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.4) !important;
  border-color: #a855f7 !important;
  transition: all 0.3s ease;
}
/* --- SHUFFLE & PRESET BUTTON VISIBILITY --- */
#shuffle-btn,
#add-preset-topic-btn {
  display: none; /* Hidden for participants */
}

/* Show when host tools are active OR when it's a personal/local board */
.board-container.facilitator-tools-active #shuffle-btn,
.board-container.is-local-session #shuffle-btn,
.board-container.facilitator-tools-active #add-preset-topic-btn,
.board-container.is-local-session #add-preset-topic-btn {
  display: inline-flex;
}

/* Ensure the TV settings modal appears ON TOP of the TV Mode container */
#tv-settings-modal {
  z-index: 100005 !important;
}

/* --- READ-ONLY / INACTIVE SESSION OVERRIDES --- */
/* Hide specific admin tools when a session is archived/inactive, even if unlocked */
.board-container.session-inactive #tv-mode-btn,
.board-container.session-inactive #tv-mode-setup-btn,
.board-container.session-inactive #board-end-session-btn,
.board-container.session-inactive #global-stop-broadcast-btn,
.board-container.session-inactive .question-card .in-card-broadcast-btn,
.board-container.session-inactive .hide-card-btn {
  display: none !important;
}

/* --- Onboarding Spotlight Overlay --- */
#spotlight-tour-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 4000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  cursor: pointer;
}

#spotlight-tour-overlay.show {
  opacity: 1;
  visibility: visible;
}

#tour-close-hint {
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.tour-highlight {
  position: relative !important;
  z-index: 4001 !important;
  background-color: white; 
  box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.4), 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
  border-radius: 0.5rem;
  transition: box-shadow 0.3s ease;
}

/* --- Fix for stacking context trapping the tour highlight --- */
.board-container.tour-active-container {
  transform: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: none !important; /* Stops the slideIn animation from fighting the transform */
  opacity: 1 !important;
}

/* --- WIZARD & PADLOCK STYLES --- */
.wizard-step {
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.wizard-step.hidden {
  display: none;
}
.wizard-step.active {
  display: block;
  animation: fadeInCard 0.4s ease forwards;
}

#reauth-padlock {
  transition: all 0.2s ease-in-out;
}
#reauth-padlock:hover {
  transform: scale(1.05);
  background-color: #f3f4f6;
}

/* --- HOST DROPDOWN MENU & BUTTON OVERRIDES --- */

/* Show the dropdown container only when tools are active */
#host-dropdown-container {
  display: none;
}

.board-container.facilitator-tools-active #host-dropdown-container,
.board-container.is-local-session #host-dropdown-container {
  display: inline-block;
}

/* Style the links inside the dropdown */
.host-dropdown-item {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #4b5563;
  border-radius: 0.5rem;
  cursor: pointer;
  display: flex !important; /* Forces visibility inside the menu */
  align-items: center;
  gap: 0.75rem;
  transition: background-color 0.2s, color 0.2s;
  font-family: "Inter", sans-serif;
}

.host-dropdown-item:hover {
  background: #f3f4f6;
  color: #1f2937;
}

.host-dropdown-item i {
  width: 16px;
  text-align: center;
}

/* Dangerous Item Hover States */
.host-dropdown-item.text-red-600:hover,
.host-dropdown-item.text-red-500:hover {
  background: #fef2f2;
  color: #dc2626;
}

/* --- ENVIRONMENT-SPECIFIC HIDING --- */
/* Hide tools that don't belong in Local or Cloud contexts */
.board-container:not(.is-local-session) #clear-board-btn { display: none !important; }
.board-container.is-local-session #board-end-session-btn { display: none !important; }
.board-container.is-local-session #tv-mode-setup-btn { display: none !important; }