/* concert-laila-v2.css · Sprint LAILA Evolution M1.6 · 30-apr-2026
 *
 * Audit Davide M1: stile distonico dal design system Nexus OS.
 * Rewrite usando design tokens reali da concert.css:
 *   - Font: var(--nx-font-display) · DM Sans · UI body
 *   - Font numerico: var(--nx-font-mono) · IBM Plex Mono
 *   - Font editorial: var(--nx-font-editorial) · Source Serif 4
 *   - Accent: var(--nx-cyan) · #00D4FF (NON blu hardcoded)
 *   - Background: var(--nx-bg-elevated) glass + var(--nx-glass-blur)
 *   - Border: var(--nx-glass-border) · 1px cyan 0.18
 *   - Text: var(--nx-text-primary) #E8F4FF + var(--nx-text-muted) 0.45
 *   - LAILA accent: var(--nx-laila-core) · #00E5FF + glow
 *   - Spacing tokens · var(--nx-s-N)
 */

/* M2.6 · card-oggetto overlay deve stare SOPRA pannello v2 ·
   audit Davide: card-oggetto si apriva sotto la chat. Concert original
   z-index nx-overlay-root=150 · v2=9000 → overlay coperto. Bump
   overlay a 9800 (sopra v2). Stesso fix per #nx-overlay-root (id) +
   .nx-overlay-root (class) + scrim. */
#nx-overlay-root,
.nx-overlay-root {
  z-index: 9800 !important;
}
.nx-overlay-scrim {
  z-index: 9799 !important;
}

/* ─── Container chat panel V2 · glass morphism Concert ─────────────── */
#nx-laila-v2-root {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 420px;
  max-width: 100vw;
  height: 70vh;
  max-height: 720px;
  display: flex;
  flex-direction: column;
  background: var(--nx-bg-elevated, rgba(15, 25, 45, 0.7));
  backdrop-filter: var(--nx-glass-blur, blur(24px) saturate(140%));
  -webkit-backdrop-filter: var(--nx-glass-blur, blur(24px) saturate(140%));
  border-left: var(--nx-glass-border, 1px solid rgba(0, 212, 255, 0.18));
  border-top: var(--nx-glass-border, 1px solid rgba(0, 212, 255, 0.18));
  border-top-left-radius: 16px;
  box-shadow:
    -4px -4px 32px rgba(0, 212, 255, 0.08),
    -8px -8px 60px rgba(5, 11, 26, 0.4);
  z-index: 9000;
  font-family: var(--nx-font-display, "DM Sans", system-ui, sans-serif);
  color: var(--nx-text-primary, #E8F4FF);
}
#nx-laila-v2-root[data-state="hidden"] { display: none; }
#nx-laila-v2-root[data-state="reduced"] { height: 60px; }

/* M2.0 · collapsed bar · 280×42 bottom-right · click to expand */
#nx-laila-v2-root[data-state="collapsed"] {
  width: 280px;
  height: 42px;
  max-height: 42px;
  cursor: pointer;
  transition: width 200ms ease, height 200ms ease, max-height 200ms ease;
}
#nx-laila-v2-root[data-state="collapsed"] .nx-laila-v2__history,
#nx-laila-v2-root[data-state="collapsed"] .nx-laila-v2__footer {
  display: none;
}
#nx-laila-v2-root[data-state="collapsed"] .nx-laila-v2__header {
  padding: 8px 14px;
  border-bottom: none;
}
#nx-laila-v2-root[data-state="collapsed"] .nx-laila-v2__avatar {
  width: 24px; height: 24px; font-size: 10px;
}
#nx-laila-v2-root[data-state="collapsed"] .nx-laila-v2__name {
  font-size: 13px;
}
#nx-laila-v2-root[data-state="collapsed"] .nx-laila-v2__clear,
#nx-laila-v2-root[data-state="collapsed"] .nx-laila-v2__close {
  display: none;
}
#nx-laila-v2-root[data-state="collapsed"] .nx-laila-v2__collapse {
  /* Trasforma in icona expand */
}
#nx-laila-v2-root[data-state="collapsed"] .nx-laila-v2__collapse::before {
  content: "↗";
}
#nx-laila-v2-root[data-state="collapsed"] .nx-laila-v2__collapse {
  font-size: 0;
}
#nx-laila-v2-root[data-state="collapsed"] .nx-laila-v2__collapse::before {
  font-size: 16px;
}
#nx-laila-v2-root[data-state="open"] {
  transition: width 200ms ease, height 200ms ease, max-height 200ms ease;
}

/* Unread badge · cyan dot */
.nx-laila-v2__unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--nx-cyan, #00D4FF);
  color: var(--nx-bg-deep, #050B1A);
  font-family: var(--nx-font-mono, "IBM Plex Mono", monospace);
  font-size: 10px;
  font-weight: 700;
  margin-left: 6px;
}
.nx-laila-v2__collapse {
  background: transparent;
  border: none;
  color: var(--nx-text-muted, rgba(232, 244, 255, 0.45));
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 120ms, color 120ms;
  font-weight: 700;
  line-height: 1;
}
.nx-laila-v2__collapse:hover {
  background: rgba(0, 212, 255, 0.10);
  color: var(--nx-cyan, #00D4FF);
}

/* ─── Header con avatar LAILA + name editorial italic ──────────────── */
.nx-laila-v2__header {
  display: flex;
  align-items: center;
  gap: var(--nx-s-3, 12px);
  padding: var(--nx-s-3, 12px) var(--nx-s-5, 20px);
  border-bottom: 1px solid rgba(0, 212, 255, 0.10);
  background: linear-gradient(180deg,
    rgba(0, 229, 255, 0.04),
    transparent);
  border-top-left-radius: 16px;
  flex-shrink: 0;
}
.nx-laila-v2__avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle,
    var(--nx-laila-core, #00E5FF) 0%,
    rgba(0, 212, 255, 0.4) 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--nx-font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--nx-bg-deep, #050B1A);
  box-shadow: var(--nx-laila-glow, 0 0 16px rgba(0, 229, 255, 0.4));
}
.nx-laila-v2__name {
  font-family: var(--nx-font-editorial, "Source Serif 4", Georgia, serif);
  font-style: italic;
  font-size: 16px;
  flex: 1;
  color: var(--nx-text-primary, #E8F4FF);
  letter-spacing: 0.02em;
}
.nx-laila-v2__close,
.nx-laila-v2__clear {
  background: transparent;
  border: none;
  color: var(--nx-text-muted, rgba(232, 244, 255, 0.45));
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 120ms, color 120ms;
}
.nx-laila-v2__close { font-size: 18px; }
.nx-laila-v2__close:hover,
.nx-laila-v2__clear:hover {
  background: rgba(0, 212, 255, 0.10);
  color: var(--nx-cyan, #00D4FF);
}

/* ─── Storia scrollabile · gap 16px ──────────────────────────────────── */
.nx-laila-v2__history {
  flex: 1;
  overflow-y: auto;
  padding: var(--nx-s-4, 16px) var(--nx-s-5, 20px);
  display: flex;
  flex-direction: column;
  gap: var(--nx-s-4, 16px);
  scroll-behavior: smooth;
}
.nx-laila-v2__history::-webkit-scrollbar { width: 4px; }
.nx-laila-v2__history::-webkit-scrollbar-thumb {
  background: rgba(0, 212, 255, 0.18);
  border-radius: 2px;
}

/* ─── Bubble user · destra · cyan accent semi-trasparente ──────────── */
.nx-laila-v2__bubble {
  max-width: 85%;
  padding: var(--nx-s-3, 12px) var(--nx-s-4, 16px);
  font-size: 13px;
  line-height: 1.5;
  word-wrap: break-word;
  font-family: var(--nx-font-display);
}
.nx-laila-v2__bubble--user {
  align-self: flex-end;
  background: linear-gradient(135deg,
    rgba(0, 212, 255, 0.18),
    rgba(0, 229, 255, 0.10));
  border: 1px solid rgba(0, 212, 255, 0.28);
  border-radius: 16px 16px 4px 16px;
  color: var(--nx-text-primary, #E8F4FF);
  box-shadow: 0 2px 8px rgba(0, 212, 255, 0.06);
}

/* ─── Bubble assistant · sinistra · glass card subtle ──────────────── */
.nx-laila-v2__bubble--assistant {
  align-self: flex-start;
  display: flex;
  gap: var(--nx-s-2, 8px);
  align-items: flex-start;
  max-width: 90%;
  background: transparent;
  padding: 0;
  border: none;
}
.nx-laila-v2__bubble--assistant .nx-laila-v2__avatar {
  width: 22px; height: 22px;
  font-size: 9px;
  flex-shrink: 0;
  margin-top: 2px;
}
.nx-laila-v2__bubble--assistant .nx-laila-v2__msg {
  background: var(--nx-bg-card, rgba(20, 32, 55, 0.6));
  border: 1px solid rgba(0, 212, 255, 0.12);
  border-radius: 4px 16px 16px 16px;
  padding: var(--nx-s-3, 12px) var(--nx-s-4, 16px);
  flex: 1;
  font-family: var(--nx-font-editorial, "Source Serif 4", Georgia, serif);
  font-style: italic;
  color: var(--nx-text-primary, #E8F4FF);
}

/* Timestamp · IBM Plex Mono coerente con concert */
.nx-laila-v2__ts {
  font-family: var(--nx-font-mono, "IBM Plex Mono", monospace);
  font-size: 9px;
  color: var(--nx-text-muted, rgba(232, 244, 255, 0.45));
  margin-top: var(--nx-s-1, 4px);
  letter-spacing: 0.04em;
}
.nx-laila-v2__bubble--user .nx-laila-v2__ts { text-align: right; }

/* ─── Thinking · pulsazione cyan ─────────────────────────────────── */
.nx-laila-v2__thinking {
  align-self: flex-start;
  display: flex;
  gap: var(--nx-s-2, 8px);
  align-items: center;
  padding: 0 0 0 30px;
  font-size: 11px;
  color: var(--nx-text-muted, rgba(232, 244, 255, 0.45));
  font-style: italic;
  font-family: var(--nx-font-editorial);
}
.nx-laila-v2__thinking__dots { display: inline-flex; gap: 4px; }
.nx-laila-v2__thinking__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--nx-laila-core, #00E5FF);
  box-shadow: 0 0 6px rgba(0, 229, 255, 0.6);
  animation: nx-laila-v2-pulse 1.2s ease-in-out infinite;
}
.nx-laila-v2__thinking__dot:nth-child(2) { animation-delay: 0.2s; }
.nx-laila-v2__thinking__dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes nx-laila-v2-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* ─── Footer fisso · input + microfono + chip ─────────────────────── */
.nx-laila-v2__footer {
  flex-shrink: 0;
  border-top: 1px solid rgba(0, 212, 255, 0.10);
  padding: var(--nx-s-3, 12px) var(--nx-s-4, 16px);
  background: linear-gradient(0deg, rgba(0, 229, 255, 0.02), transparent);
}
.nx-laila-v2__input-row {
  display: flex; gap: var(--nx-s-2, 8px); align-items: center;
}
.nx-laila-v2__input {
  flex: 1;
  background: rgba(8, 14, 28, 0.4);
  border: 1px solid rgba(0, 212, 255, 0.18);
  color: var(--nx-text-primary, #E8F4FF);
  padding: 10px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-family: var(--nx-font-display);
  outline: none;
  transition: border-color 120ms, background 120ms;
}
.nx-laila-v2__input::placeholder {
  color: var(--nx-text-muted, rgba(232, 244, 255, 0.45));
  font-style: italic;
}
.nx-laila-v2__input:focus {
  border-color: var(--nx-cyan, #00D4FF);
  background: rgba(0, 212, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.10);
}
.nx-laila-v2__mic {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(8, 14, 28, 0.4);
  border: 1px solid rgba(0, 212, 255, 0.18);
  color: var(--nx-text-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 120ms, color 120ms, border-color 120ms;
  font-size: 14px;
}
.nx-laila-v2__mic:hover {
  background: rgba(0, 212, 255, 0.10);
  color: var(--nx-cyan, #00D4FF);
  border-color: var(--nx-cyan, #00D4FF);
}
.nx-laila-v2__mic[data-listening="true"] {
  background: rgba(255, 61, 113, 0.20);
  color: var(--nx-danger, #FF3D71);
  border-color: var(--nx-danger);
  animation: nx-laila-v2-mic-pulse 1.2s ease-in-out infinite;
}
@keyframes nx-laila-v2-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 61, 113, 0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(255, 61, 113, 0); }
}

/* ─── Chip suggerimenti compatti · max 3 visibili · stile concert ──── */
.nx-laila-v2__chips {
  display: flex; gap: 6px;
  margin-top: var(--nx-s-2, 8px);
  flex-wrap: wrap;
}
.nx-laila-v2__chip {
  background: transparent;
  border: 1px solid rgba(0, 212, 255, 0.18);
  color: var(--nx-text-muted, rgba(232, 244, 255, 0.45));
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-family: var(--nx-font-display);
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
  white-space: nowrap;
}
.nx-laila-v2__chip:hover {
  background: rgba(0, 212, 255, 0.08);
  color: var(--nx-cyan, #00D4FF);
  border-color: var(--nx-cyan, #00D4FF);
}
.nx-laila-v2__chip:nth-child(n+4) { display: none; }

/* ─── M2.1 · Card pills entity 8 tipi ─────────────────────────────── */
.nx-laila-v2__cards-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: var(--nx-s-3, 12px);
  padding-top: var(--nx-s-2, 8px);
  border-top: 1px solid rgba(0, 212, 255, 0.10);
}
.nx-laila-v2__card-pill {
  --pill-accent: var(--nx-cyan, #00D4FF);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(8, 14, 28, 0.3);
  border: 1px solid color-mix(in oklab, var(--pill-accent) 35%, transparent);
  border-radius: 14px;
  color: var(--pill-accent);
  font-family: var(--nx-font-display);
  font-size: 11px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
  max-width: 240px;
}
.nx-laila-v2__card-pill:hover {
  background: color-mix(in oklab, var(--pill-accent) 12%, transparent);
  border-color: var(--pill-accent);
}
.nx-laila-v2__card-pill__icon { font-size: 12px; }
.nx-laila-v2__card-pill__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

/* ─── M2.2 · Tabella inline ────────────────────────────────────────── */
.nx-laila-v2__table-wrap {
  margin-top: var(--nx-s-3, 12px);
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid rgba(0, 212, 255, 0.12);
  border-radius: 8px;
  background: rgba(8, 14, 28, 0.4);
}
.nx-laila-v2__table__intro {
  padding: 8px 12px;
  font-family: var(--nx-font-display);
  font-size: 11px;
  color: var(--nx-text-muted);
  border-bottom: 1px solid rgba(0, 212, 255, 0.10);
}
.nx-laila-v2__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-family: var(--nx-font-display);
}
.nx-laila-v2__table thead th {
  position: sticky; top: 0;
  background: rgba(15, 25, 45, 0.85);
  backdrop-filter: blur(8px);
  text-align: left;
  padding: 8px 12px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--nx-text-muted, rgba(232, 244, 255, 0.45));
  font-weight: 500;
  border-bottom: 1px solid rgba(0, 212, 255, 0.16);
}
.nx-laila-v2__table tbody td {
  padding: 7px 12px;
  border-bottom: 1px solid rgba(0, 212, 255, 0.06);
  font-family: var(--nx-font-mono, monospace);
  color: var(--nx-text-primary, #E8F4FF);
}
.nx-laila-v2__table tbody tr:hover td {
  background: rgba(0, 212, 255, 0.05);
}

/* ─── M2.3 · Action buttons ────────────────────────────────────────── */
.nx-laila-v2__actions-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: var(--nx-s-3, 12px);
}
.nx-laila-v2__action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-family: var(--nx-font-display);
  font-size: 11px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, transform 80ms;
  border: 1px solid transparent;
}
.nx-laila-v2__action-btn:active { transform: translateY(1px); }
.nx-laila-v2__action-btn--primary {
  background: linear-gradient(135deg,
    rgba(0, 212, 255, 0.22),
    rgba(0, 229, 255, 0.14));
  border-color: var(--nx-cyan, #00D4FF);
  color: var(--nx-cyan-bright, #00E5FF);
}
.nx-laila-v2__action-btn--primary:hover {
  background: rgba(0, 212, 255, 0.28);
}
.nx-laila-v2__action-btn--secondary {
  background: transparent;
  border-color: rgba(0, 212, 255, 0.22);
  color: var(--nx-text-primary, #E8F4FF);
}
.nx-laila-v2__action-btn--secondary:hover {
  background: rgba(0, 212, 255, 0.08);
  border-color: var(--nx-cyan, #00D4FF);
}
.nx-laila-v2__action-btn--danger {
  background: rgba(255, 61, 113, 0.10);
  border-color: rgba(255, 61, 113, 0.4);
  color: var(--nx-danger, #FF3D71);
}
.nx-laila-v2__action-btn--danger:hover {
  background: rgba(255, 61, 113, 0.20);
}
.nx-laila-v2__action-btn__icon { font-size: 12px; }

/* ─── M3.2 · TTS toggle button ──────────────────────────────────── */
.nx-laila-v2__tts-toggle {
  background: transparent;
  border: none;
  color: var(--nx-text-muted, rgba(232, 244, 255, 0.45));
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 120ms, color 120ms;
}
.nx-laila-v2__tts-toggle:hover {
  background: rgba(0, 212, 255, 0.10);
  color: var(--nx-cyan, #00D4FF);
}
.nx-laila-v2__tts-toggle[data-tts-enabled="true"] {
  color: var(--nx-laila-core, #00E5FF);
}

/* ─── M3.3 · Chart.js wrap inline ─────────────────────────────────── */
.nx-laila-v2__chart-wrap {
  margin-top: var(--nx-s-3, 12px);
  padding: var(--nx-s-2, 8px);
  background: rgba(8, 14, 28, 0.4);
  border: 1px solid rgba(0, 212, 255, 0.12);
  border-radius: 8px;
  height: 200px;
  position: relative;
}
.nx-laila-v2__chart__title {
  font-family: var(--nx-font-display);
  font-size: 11px;
  color: var(--nx-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  text-align: center;
}

/* ─── M3.4 · Leaflet map wrap inline ──────────────────────────────── */
.nx-laila-v2__map-wrap {
  margin-top: var(--nx-s-3, 12px);
  border: 1px solid rgba(0, 212, 255, 0.12);
  border-radius: 8px;
  overflow: hidden;
}
.nx-laila-v2__map {
  width: 100%;
  height: 240px;
  background: rgba(8, 14, 28, 0.4);
}
.nx-laila-v2__map .leaflet-popup-content-wrapper,
.nx-laila-v2__map .leaflet-popup-tip {
  background: rgba(15, 25, 45, 0.95);
  color: var(--nx-text-primary, #E8F4FF);
}

/* ─── Empty state · hint utente ───────────────────────────────────── */
.nx-laila-v2__empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--nx-text-muted, rgba(232, 244, 255, 0.45));
  font-style: italic;
  font-size: 12px;
  font-family: var(--nx-font-editorial);
}