:root {
  /* Background / superfici */
  --bot-background: rgba(255, 255, 255, 1);                  /* sistema principale */
  --bot-secondary-background: rgba(242, 242, 247, 1);        /* sfondo secondario */
  --bot-tertiary-background: rgba(255, 255, 255, 0.8);       /* livello translucido */
  --bot-grouped-background: rgba(242, 242, 247, 1);
  --bot-secondary-grouped-background: rgba(242, 242, 247, 1);
  --bot-tertiary-grouped-background: rgba(242, 242, 247, 1);
  
  /* Label / testo (layer tipografici) */
  --bot-label-primary: rgba(0, 0, 0, 0.85);
  --bot-label-secondary: rgba(0, 0, 0, 0.60);
  --bot-label-tertiary: rgba(0, 0, 0, 0.30);
  --bot-label-quaternary: rgba(0, 0, 0, 0.18);
  
  /* Fill / controlli / materiali */
  --bot-fill: rgba(118, 118, 128, 0.30);
  --bot-secondary-fill: rgba(118, 118, 128, 0.25);
  --bot-tertiary-fill: rgba(118, 118, 128, 0.20);
  --bot-quaternary-fill: rgba(118, 118, 128, 0.15);
  
  /* Separatori / linee divisorie */
  --bot-separator: rgba(60, 60, 67, 0.29);  /* linea semitrasparente */
  --bot-opaque-separator: rgba(60, 60, 67, 1);
  
  /* Colorazioni accent / tint / semantiche */
  --bot-blue: rgba(0, 122, 255, 1);
  --bot-green: rgba(52, 199, 89, 1);
  --bot-indigo: rgba(88, 86, 214, 1);
  --bot-orange: rgba(255, 149, 0, 1);
  --bot-pink: rgba(255, 45, 85, 1);
  --bot-purple: rgba(175, 82, 222, 1);
  --bot-red: rgba(255, 59, 48, 1);
  --bot-teal: rgba(90, 200, 250, 1);
  --bot-yellow: rgba(255, 204, 0, 1);
  
  /* Placeholder text */
  --bot-placeholder-text: rgba(142, 142, 147, 1);

  --bot-system-gray: rgba(142, 142, 147, 1);
}

#header {
  backdrop-filter: blur(20px);
}

#footer {
  backdrop-filter: blur(20px);
}

body.is-pwa #footer {
  padding-bottom: calc(env(safe-area-inset-bottom) + 25px);
  padding-right: calc(env(safe-area-inset-right) + 0px);
  padding-left: calc(env(safe-area-inset-left) + 0px);
}

.text-truncate-multiline {
  /* Layout base */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  
  /* Numero massimo di righe */
  -webkit-line-clamp: 2; /* Chrome, Safari, Edge */
  
  /* Fallback per Firefox */
  display: block;
  max-height: calc(1.5em * 2); /* 3 righe con line-height 1.5 */
  line-height: 1.5em;
  position: relative;
}

.text-truncate {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.no-link {
  cursor: default !important;
}

.no-link:hover {
  color: var(--bs-body) !important;
}

.bot-bg-orange, .bot-bg-orange:hover {
  background: var(--bot-orange);
}
.bot-bg-yellow, .bot-yellow-green:hover {
  background: var(--bot-yellow);
}
.bot-bg-red, .bot-bg-red:hover {
  background: var(--bot-red);
}
.bot-bg-green, .bot-bg-green:hover {
  background: var(--bot-green);
}
.bot-bg-blue, .bot-bg-blue:hover {
  background: var(--bot-blue);
}

.bot-bg-system-gray, .bot-bg-systemgray:hover {
  background: var(--bot-system-gray);
}

.bot-nav {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.bot-btn {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.bot-btn:hover {
  color: var(--bs-link-hover-color);
  background: var(--bs-secondary-bg-rgb, 0.70) !important;
}

.bot-btn:active {
  background: var(--bs-secondary-bg-rgb, 0.90) !important;
}

.bot-btn-primary {
  color: #fff;
  background: rgba(var(--bs-primary-rgb), 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.bot-btn-primary:hover {
  color: #fff;
  background: rgba(var(--bs-primary-rgb), 0.95) !important;
}

.bot-btn-primary:active {
  color: #fff !important;
  background: rgba(var(--bs-primary-rgb), 1) !important;
}

.bot-btn-text {
  font-size: 14px;
}

@media (min-width: 768px) {
  .bot-btn-text {
    font-size: 18px;
  }
}
@media (prefers-color-scheme: light) {
  .bot-bg {
    background: #f2f1f6;
  }
  
  .bot-bg-field, .bot-bg-field:focus {
    background: var(--bot-background);
  }

  .bot-image-list-icon {
    background: var(--bot-system-gray);
    color: white;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Background / superfici in dark */
    --bot-background: rgba(0, 0, 0, 1);
    --bot-secondary-background: rgba(28, 28, 30, 1);
    --bot-tertiary-background: rgba(44, 44, 46, 0.9);
    --bot-grouped-background: rgba(28, 28, 30, 1);
    --bot-secondary-grouped-background: rgba(28, 28, 30, 1);
    --bot-tertiary-grouped-background: rgba(28, 28, 30, 1);
    
    /* Label / testo in dark (bianco con opacità) */
    --bot-label-primary: rgba(255, 255, 255, 1);
    --bot-label-secondary: rgba(255, 255, 255, 0.75);
    --bot-label-tertiary: rgba(255, 255, 255, 0.60);
    --bot-label-quaternary: rgba(255, 255, 255, 0.45);
    
    /* Fill / controlli / materiali in dark */
    --bot-fill: rgba(118, 118, 128, 0.36);
    --bot-secondary-fill: rgba(118, 118, 128, 0.30);
    --bot-tertiary-fill: rgba(118, 118, 128, 0.25);
    --bot-quaternary-fill: rgba(118, 118, 128, 0.20);
    
    /* Separatori / linee */
    --bot-separator: rgba(84, 84, 88, 0.65);
    --bot-opaque-separator: rgba(84, 84, 88, 1);
    
    /* Accent / tinta: spesso gli stessi valori (o variante leggermente più chiara) */
    --bot-blue: rgba(10, 132, 255, 1);
    --bot-green: rgba(48, 209, 88, 1);
    --bot-indigo: rgba(94, 92, 230, 1);
    --bot-orange: rgba(255, 159, 10, 1);
    --bot-pink: rgba(255, 55, 95, 1);
    --bot-purple: rgba(191, 90, 242, 1);
    --bot-red: rgba(255, 69, 58, 1);
    --bot-teal: rgba(100, 210, 255, 1);
    --bot-yellow: rgba(255, 214, 10, 1);
    
    /* Placeholder in dark */
    --bot-placeholder-text: rgba(142, 142, 147, 0.75);
  }
  
  .bot-bg {
    background: var(--bot-background);
  }
  
  .bot-bg-field, .bot-bg-field:focus { 
    background: #212529;
  }

  .bot-image-list-icon {
    background: black;
    color: var(bs-body-color);
  }
}