/* Stili per l'animazione di caricamento AI */
.ai-loading-container {
  width: 200px;
  height: 200px;
}
/* Nascondi il pannello chat durante ricerca/caricamento per evitare lampeggio */
.search-active #chat-right-panel,
.loading #chat-right-panel {
  display: none !important;
}
.search-active [aria-controls="chat-right-panel"],
.loading [aria-controls="chat-right-panel"] {
  display: none !important;
}

.ai-gradient-ring {
  background: conic-gradient(from 0deg, #0c7ff2, #69a9f5, #8b5cf6, #06b6d4, #0c7ff2);
  animation: ai-spin 2s linear infinite;
}

.ai-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: linear-gradient(45deg, #0c7ff2, #8b5cf6);
  border-radius: 50%;
  opacity: 0.7;
}

body.results-mode #iubenda-cs-container,
body.results-mode #iubenda-cs-embedded,
body.results-mode .iubenda-cs-badge,
body.results-mode .iubenda-iframe,
body.results-mode iframe[src*="iubenda"],
body.results-mode [class*="iubenda"],
body.results-mode [id*="iubenda"],
body.results-mode a[href*="iubenda"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}






.ai-particle-1 {
  top: 20%;
  left: 10%;
  animation: ai-float-1 3s ease-in-out infinite;
}

.ai-particle-2 {
  top: 30%;
  right: 15%;
  animation: ai-float-2 2.5s ease-in-out infinite 0.5s;
}

.ai-particle-3 {
  bottom: 25%;
  left: 20%;
  animation: ai-float-3 3.5s ease-in-out infinite 1s;
}

.ai-particle-4 {
  bottom: 35%;
  right: 10%;
  animation: ai-float-4 2.8s ease-in-out infinite 1.5s;
}

.ai-particle-5 {
  top: 50%;
  left: 5%;
  animation: ai-float-5 3.2s ease-in-out infinite 0.8s;
}

.ai-particle-6 {
  top: 60%;
  right: 5%;
  animation: ai-float-6 2.7s ease-in-out infinite 2s;
}

.ai-wave {
  position: absolute;
  border: 2px solid;
  border-radius: 50%;
  opacity: 0;
}

.ai-wave-1 {
  width: 120px;
  height: 120px;
  border-color: rgba(12, 127, 242, 0.3);
  animation: ai-wave-pulse 2s ease-out infinite;
}

.ai-wave-2 {
  width: 160px;
  height: 160px;
  border-color: rgba(139, 92, 246, 0.2);
  animation: ai-wave-pulse 2s ease-out infinite 0.7s;
}

.ai-wave-3 {
  width: 200px;
  height: 200px;
  border-color: rgba(6, 182, 212, 0.1);
  animation: ai-wave-pulse 2s ease-out infinite 1.4s;
}

.ai-typing-text {
  animation: ai-typing 2s steps(20) infinite;
}

.ai-progress-fill {
  width: 0;
  animation: ai-progress 3s ease-in-out infinite;
}

/* Keyframes per le animazioni */
@keyframes ai-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes ai-float-1 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
  50% { transform: translate(10px, -15px) scale(1.2); opacity: 1; }
}

@keyframes ai-float-2 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
  50% { transform: translate(-8px, -12px) scale(1.1); opacity: 1; }
}

@keyframes ai-float-3 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
  50% { transform: translate(12px, 10px) scale(1.3); opacity: 1; }
}

@keyframes ai-float-4 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
  50% { transform: translate(-10px, 8px) scale(1.15); opacity: 1; }
}

@keyframes ai-float-5 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
  50% { transform: translate(15px, -8px) scale(1.25); opacity: 1; }
}

@keyframes ai-float-6 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
  50% { transform: translate(-12px, -10px) scale(1.1); opacity: 1; }
}

@keyframes ai-wave-pulse {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

@keyframes ai-typing {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.3; }
}

@keyframes ai-progress {
  0% { width: 0%; }
  50% { width: 70%; }
  100% { width: 100%; }
}


.route-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.route-timeline {
  position: relative;
  width: 16px;
  display: flex;
  justify-content: center;
}

.route-dot {
  width: 10px;
  height: 10px;
  /* nascosto per rimuovere i pallini gialli dai riquadri */
  display: none !important;
  background: transparent;
  border-radius: 50%;
  z-index: 2;
  margin-top: 6px;
}

.route-line {
  position: absolute;
  top: 20px;
  width: 2px;
  height: calc(100% - 20px);
  background: #b7f056;
}

.route-item:last-child .route-line {
  display: none;
}

* {
  box-sizing: border-box;
  font-family: Inter, sans-serif;
}

body {
  margin: 0;
  background: #eafaf1;
}

.app-layout {
  display: flex;
  height: 100vh;
}

/* SIDEBAR */
.sidebar {
  width: 72px;
  background: #143d3b; /* verde scuro */
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.sidebar-top {
  padding: 16px 0;
}

.menu-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.nav-icon {
  font-size: 20px;
  cursor: pointer;
  opacity: 0.8;
}

.nav-icon:hover {
  opacity: 1;
}

.sidebar-bottom {
  padding: 16px 0;
}

.profile-img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

/* MAIN */
.main-content {
  flex: 1;
  padding: 32px 48px;
}

.top-header {
  margin-bottom: 32px;
}

.logo {
  height: 28px;
}

/* INTRO */
.intro h1 {
  margin: 0 0 8px;
}

.intro p {
  max-width: 600px;
  color: #333;
}

/* LISTA VIAGGI */
.travel-list {
  margin-top: 40px;
}

.travel-list h2 {
  margin-bottom: 16px;
}

.travel-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.travel-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}

.travel-card h3 {
  margin: 0 0 6px;
}

.travel-card p {
  margin: 0;
  color: #666;
}


.icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Tooltip nascosto */
.icon-label {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease;
  
  position: absolute;
  left: 120%;
  top: 50%;
  transform: translateY(-50%);

  padding: 5px 8px;
  background: rgb(79, 221, 91);
  color: rgb(0, 0, 0);
  border-radius: 6px;
  white-space: nowrap;
  z-index: 10000;
}

/* Mostra tooltip quando si passa sul bottone */
.icon-btn:hover .icon-label {
  visibility: visible;
  opacity: 1;
}

#results-icons button[data-page="selection"] img.icon-default {
  filter: brightness(1.15) saturate(1.05) contrast(1.05);
  opacity: 1;
}

.icona-brillante {
  opacity: 1;
  filter: brightness(1.8);
}