/* T1 — Identity Hub (Scheda cliente) — condiviso Studio + Palco
   Estratto da style_4.css (Fase 2.3+) · Palco override backdrop in coda. */

/* ────────────────────────────────────────────────────────────────────────
   IDENTITY HUB — "Dossier Soggetto" centrale (Fase 2.3)
     Glass card sospesa al centro del cockpit. Coerente con il Linguaggio del
     Vetro: anteprima/lettura. Apre con dimmer DEEP ("The Void"): blur 10 +
     brightness 0.7 sul resto.
     Layout: foto sx (180px) | griglia 2 colonne dati a dx, footer con CTA.
   ──────────────────────────────────────────────────────────────────────── */
.identity-hub-overlay.is-open {
  z-index: 12100;
}

/* L'Hub NON ha bisogno di un backdrop proprio: il vero oscuramento lo fa
   #cockpit-deep-dim (z-index 75, livello document). Senza questa override,
   il backdrop hub (78% nero opaco) coprirebbe il deep-dim e il "Void" non
   opererebbe mai visivamente. Il div resta cliccabile per chiudere l'Hub. */
.identity-hub-overlay .t1-sidebar-overlay__backdrop {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.identity-hub-overlay .identity-hub-shell,
.identity-hub-shell {
  width: min(640px, 96vw);
  max-height: min(85vh, 720px);
  height: fit-content;
  /* Override del look pannello-solido: l'Hub e VETRO (lettura) */
  background:
    linear-gradient(160deg,
      rgba(232, 240, 250, 0.05) 0%,
      rgba(10, 14, 22, 0.7) 45%,
      rgba(6, 8, 14, 0.78) 100%);
  border: 1px solid color-mix(in srgb, var(--t1-pearl) 18%, rgba(255, 255, 255, 0.06));
  backdrop-filter: blur(22px) saturate(1.12);
  -webkit-backdrop-filter: blur(22px) saturate(1.12);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.6),
    0 0 calc(48px * var(--neon-glow-intensity)) color-mix(in srgb, var(--t1-pearl) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Microaccent perla sul glyph dell'header per dire "identita" senza scrivere */
.identity-hub-head .t1-sidebar-overlay__glyph {
  color: var(--t1-pearl);
  background: color-mix(in srgb, var(--t1-pearl) 12%, rgba(255, 255, 255, 0.02));
  border-color: color-mix(in srgb, var(--t1-pearl) 28%, rgba(255, 255, 255, 0.08));
}

/* Con overflow: visible sul shell, il background del head puo sbordare oltre
   il border-radius arrotondato. Proteggo il top con un radius esplicito che
   matcha il shell (16px). Stessa cosa al footer per il bottom. */
.identity-hub-head {
  border-radius: 16px 16px 0 0;
}

.identity-hub-foot {
  border-radius: 0 0 16px 16px;
}

.identity-hub-hint {
  margin: 0 24px 14px;
  font-family: 'Inter', var(--t1-font-ui, system-ui, sans-serif);
  font-size: 0.67rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--t1-helm-frost-muted);
}

.identity-hub-body {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  padding: 6px 24px 18px;
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  max-height: min(calc(85vh - 132px), 580px);
  scrollbar-width: thin;
  scrollbar-color:
    color-mix(in srgb, var(--t1-pearl) 28%, rgba(255, 255, 255, 0.12))
    color-mix(in srgb, var(--t1-pearl) 6%, rgba(4, 8, 14, 0.45));
}

.identity-hub-body::-webkit-scrollbar {
  width: 8px;
}

.identity-hub-body::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--t1-pearl) 5%, rgba(4, 8, 14, 0.5));
  border-radius: 8px;
  margin: 4px 2px;
}

.identity-hub-body::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--t1-pearl) 22%, rgba(255, 255, 255, 0.08)) 0%,
    color-mix(in srgb, var(--t1-pearl) 10%, rgba(8, 12, 20, 0.75)) 100%
  );
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--t1-pearl) 14%, rgba(255, 255, 255, 0.06));
}

.identity-hub-body::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--t1-pearl) 32%, rgba(255, 255, 255, 0.12));
}

/* Foto soggetto · placeholder iniziali + silhouette stilizzata */
.identity-hub-photo {
  position: relative;
  margin: 0;
  width: 180px;
  height: 200px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 38%,
      color-mix(in srgb, var(--t1-pearl) 22%, transparent) 0%,
      rgba(8, 12, 20, 0.7) 60%,
      rgba(4, 6, 12, 0.85) 100%);
  border: 1px solid color-mix(in srgb, var(--t1-pearl) 20%, rgba(255, 255, 255, 0.06));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 28px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.identity-hub-photo__placeholder {
  position: absolute;
  bottom: 18px;
  color: color-mix(in srgb, var(--t1-pearl) 28%, transparent);
  pointer-events: none;
}

.identity-hub-photo__initials {
  font-family: 'Inter', var(--t1-font-ui, system-ui, sans-serif);
  font-size: 3.2rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--t1-pearl);
  text-shadow:
    0 0 calc(20px * var(--neon-glow-intensity)) color-mix(in srgb, var(--t1-pearl) 35%, transparent);
  z-index: 1;
}

.identity-hub-data {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  min-width: 0;
}

.identity-hub-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.identity-hub-col__title {
  margin: 0;
  font-family: var(--font-tech, var(--font-mono, monospace));
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t1-helm-frost-muted);
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--t1-pearl) 12%, rgba(255, 255, 255, 0.05));
}

.identity-hub-rows {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.identity-hub-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.identity-hub-row dt {
  font-family: var(--font-tech, var(--font-mono, monospace));
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t1-helm-frost-muted);
}

.identity-hub-row dd {
  margin: 0;
  font-family: 'Inter', var(--t1-font-ui, system-ui, sans-serif);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.35;
  color: var(--t1-helm-frost);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Campi con hint P4: ellipsis sul valore interno, dd non clip hint */
.identity-hub-row dd.identity-hub-dd--hintable {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.identity-hub-value-hint-host {
  display: block;
  min-width: 0;
}

.identity-hub-value-hint-host > .identity-hub-value {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.identity-hub-value-hint-host > .identity-hub-value .identity-hub-link {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.identity-hub-row:has(.identity-hub-value-hint-host[data-t1-hint]:hover),
.identity-hub-row:has(.identity-hub-value-hint-host[data-t1-hint]:focus-within) {
  position: relative;
  z-index: 3;
}

/* Descrizione dossier — testo intero a capo (no troncamento a una riga) */
.identity-hub-dd--prose,
#identity-hub-obiettivo.identity-hub-dd--prose {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  word-break: break-word;
  line-height: 1.45;
}

/* Date e metriche corte: niente clip discendenti (g/y/p). Ellipsis resta su email/descrizione. */
#identity-hub-last,
#identity-hub-count,
#identity-hub-notes,
#identity-hub-snapshots {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

/* Fase 3.1 — Evoluzione video (details Zen: chiuso di default) */
.identity-hub-evolution {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--t1-pearl) 10%, rgba(255, 255, 255, 0.04));
}

.identity-hub-evolution__summary {
  cursor: pointer;
  font-family: var(--font-tech, var(--font-mono, monospace));
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t1-helm-frost-muted);
  list-style: none;
}

.identity-hub-evolution__summary::-webkit-details-marker {
  display: none;
}

.identity-hub-evolution__hint {
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  opacity: 0.65;
}

.identity-hub-evolution__body {
  margin-top: 10px;
}

.identity-hub-video-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.identity-hub-video-compare__label {
  display: block;
  font-size: 0.52rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t1-helm-frost-muted);
  margin-bottom: 4px;
}

.identity-hub-video-compare__value {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--t1-helm-frost);
  word-break: break-word;
  white-space: normal;
}

.identity-hub-evolution-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
}

.identity-hub-evolution-list__item {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.72rem;
  color: var(--t1-helm-frost);
}

.identity-hub-evolution-list__type {
  font-weight: 600;
}

.identity-hub-evolution-list__desc {
  margin-top: 4px;
  opacity: 0.85;
  font-size: 0.68rem;
}

.identity-hub-evolution-list__url {
  margin-top: 4px;
  font-family: var(--font-tech, var(--font-mono, monospace));
  font-size: 0.62rem;
  opacity: 0.75;
  word-break: break-all;
}

.identity-hub-evolution-list__empty {
  padding: 8px;
  font-size: 0.72rem;
  color: var(--t1-helm-frost-muted);
}

.identity-hub-evolution-list__project-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 4px;
  color: rgba(180, 210, 235, 0.92);
  background: rgba(120, 170, 210, 0.14);
  border: 1px solid rgba(180, 210, 235, 0.18);
  vertical-align: middle;
}

.rail-project-space-cta {
  display: block;
  margin-top: 6px;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(180, 210, 235, 0.85);
  text-decoration: none;
  padding: 4px 2px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.rail-project-space-cta:hover {
  color: rgba(220, 240, 255, 0.95);
  border-color: rgba(94, 231, 223, 0.35);
}

/* Tag profilo · Identity Hub sola lettura (Fase 3.0.2) */
.identity-hub-tags-wrap {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--t1-pearl) 10%, rgba(255, 255, 255, 0.04));
}

.identity-hub-tags-label {
  margin: 0 0 8px;
  font-family: var(--font-tech, var(--font-mono, monospace));
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t1-helm-frost-muted);
}

.identity-hub-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.identity-hub-tag-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--t1-hub-tag-accent, var(--cyan-accent)) 45%, var(--btn-border));
  background: color-mix(in srgb, var(--t1-hub-tag-accent, var(--cyan-accent)) 12%, rgba(8, 14, 22, 0.5));
  color: var(--t1-hub-tag-accent, var(--cyan-accent));
  font-family: var(--font-tech, var(--font-mono, monospace));
  font-size: var(--t1-hub-tag-pill-font-size, 0.58rem);
  font-weight: 500;
  letter-spacing: var(--t1-tag-chip-letter-spacing, 0.03em);
  text-transform: none;
  max-width: 100%;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}

.identity-hub-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: 14px 24px 18px;
  border-top: 1px solid color-mix(in srgb, var(--t1-pearl) 10%, rgba(255, 255, 255, 0.04));
}

.identity-hub-foot[data-casting-preview='true'] {
  justify-content: flex-end;
}

.identity-hub-foot__legend {
  margin: 0;
  font-family: var(--font-tech, var(--font-mono, monospace));
  font-size: 0.54rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t1-helm-frost-muted);
  opacity: 0.7;
}

/* Matita compile — icona discreta + tooltip vetro (allineata a Galleria showcase). */
.identity-hub-edit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--t1-cyan) 16%, rgba(255, 255, 255, 0.06));
  background: color-mix(in srgb, var(--t1-cyan) 4%, rgba(255, 255, 255, 0.03));
  color: color-mix(in srgb, var(--t1-cyan) 72%, var(--t1-helm-frost));
  cursor: pointer;
  opacity: 0.48;
  box-shadow: none;
  transition:
    opacity 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.identity-hub-edit:hover,
.identity-hub-edit:focus-visible {
  opacity: 1;
  transform: scale(1.12);
  border-color: color-mix(in srgb, var(--t1-cyan) 42%, rgba(255, 255, 255, 0.1));
  background: color-mix(in srgb, var(--t1-cyan) 12%, rgba(0, 0, 0, 0.28));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--t1-cyan) 12%, transparent);
}

.identity-hub-edit:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--t1-cyan) 38%, transparent),
    0 4px 14px color-mix(in srgb, var(--t1-cyan) 12%, transparent);
}

.identity-hub-edit__hint {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  left: auto;
  transform: translateY(5px);
  white-space: nowrap;
  font-family: 'Inter', var(--t1-font-ui, system-ui, sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(248, 252, 255, 0.95);
  background: color-mix(in srgb, rgba(0, 0, 0, 0.72) 100%, transparent);
  border: 1px solid color-mix(in srgb, var(--t1-cyan) 18%, rgba(255, 255, 255, 0.06));
  border-radius: 6px;
  padding: 0.24rem 0.6rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 2;
}

.identity-hub-edit:hover .identity-hub-edit__hint,
.identity-hub-edit:focus-visible .identity-hub-edit__hint {
  opacity: 1;
  transform: translateY(0);
}

.identity-hub-edit__icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* CTA Galleria Casting → cockpit operativo (solo con Hub in anteprima) */
.identity-hub-work-profile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: 'Inter', var(--t1-font-ui, system-ui, sans-serif);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(12, 10, 6, 0.92);
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--rating-yellow-solid, #ffc233) 88%, rgba(255, 255, 255, 0.35)) 0%,
    color-mix(in srgb, var(--rating-yellow-solid, #ffc233) 55%, rgba(40, 28, 8, 0.25)) 100%
  );
  border: 1px solid color-mix(in srgb, var(--rating-yellow-solid, #ffc233) 42%, rgba(0, 0, 0, 0.35));
  border-radius: 10px;
  cursor: pointer;
  transition:
    background var(--cockpit-focus-ease),
    border-color var(--cockpit-focus-ease),
    box-shadow var(--cockpit-focus-ease),
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.identity-hub-work-profile:hover {
  box-shadow:
    0 0 calc(18px * var(--neon-glow-intensity, 1)) color-mix(in srgb, var(--rating-yellow-solid, #ffc233) 35%, transparent);
}

.identity-hub-work-profile:active {
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
  .identity-hub-edit,
  .identity-hub-edit__hint {
    transition-duration: 0.01ms !important;
  }
}

/* Dopo tutte le regole `display: inline-flex` sui bottoni Hub: altrimenti [hidden] non nasconde. */
.identity-hub-video-compare[hidden],
.identity-hub-edit[hidden],
.identity-hub-work-profile[hidden],
.identity-hub-watch-casting[hidden],
.identity-hub-foot__legend[hidden] {
  display: none !important;
}

.identity-hub-foot[data-casting-preview='true'] .identity-hub-edit {
  display: none !important;
}

/* ────────────────────────────────────────────────────────────────────────
   COCKPIT DIMMER — "Velo Cinematografico" (Fase 2 + 2.2)
     Quando un pannello sidebar è aperto, workspace e notes-panel "recedono":
     blur + dimming + leggera desaturazione, come depth-of-field in un film.
     Due intensità coordinate:
       • STRONG (data-sidebar-state="open")  → click su tool, drawer o overlay aperti
       • SOFT   (data-glass-state="hover")   → solo hover su Glass card peek
     Esclusioni:
       • body in Zen mode (focus immersivo gestisce già il proprio scuro)
       • papiro clinico aperto (sipario centrale ha il suo velo)
     z-index: 200 — necessario per coprire le note (`.notes-feed-item`) che
     hanno `isolation: isolate` e creerebbero stacking context locali.
   ──────────────────────────────────────────────────────────────────────── */
.workspace::before,
.notes-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  background: rgba(2, 4, 8, 0.18);
  backdrop-filter:
    blur(var(--cockpit-focus-blur))
    brightness(var(--cockpit-focus-brightness))
    saturate(var(--cockpit-focus-saturate));
  -webkit-backdrop-filter:
    blur(var(--cockpit-focus-blur))
    brightness(var(--cockpit-focus-brightness))
    saturate(var(--cockpit-focus-saturate));
  transition: opacity var(--cockpit-focus-ease);
}

/* STRONG — drawer/overlay aperti (azione esplicita) */
body[data-sidebar-state='open']:not(.is-zen) .workspace::before,
body[data-sidebar-state='open']:not(.is-zen) .notes-panel::before {
  opacity: 1;
}

/* Drawer coprente: sipario zen — sfocatura sotto il cristallo (come settings/search). */
body:has(#sidebar.is-open):not(.is-zen) .workspace::before {
  background: rgba(2, 4, 8, 0.32);
  backdrop-filter:
    blur(8px)
    brightness(0.62)
    saturate(0.84);
  -webkit-backdrop-filter:
    blur(8px)
    brightness(0.62)
    saturate(0.84);
}

/* SOFT — solo hover Glass card, nessun overlay strong attivo.
   Stesso pseudo-elemento, intensità ridotta sui filtri: l'utente percepisce
   "il cockpit si fa più discreto" senza venire schiacciato come per un click. */
body[data-glass-state='hover']:not([data-sidebar-state='open']):not(.is-zen) .workspace::before,
body[data-glass-state='hover']:not([data-sidebar-state='open']):not(.is-zen) .notes-panel::before {
  opacity: 1;
  backdrop-filter:
    blur(var(--cockpit-focus-blur-soft))
    brightness(var(--cockpit-focus-brightness-soft))
    saturate(var(--cockpit-focus-saturate-soft));
  -webkit-backdrop-filter:
    blur(var(--cockpit-focus-blur-soft))
    brightness(var(--cockpit-focus-brightness-soft))
    saturate(var(--cockpit-focus-saturate-soft));
}

/* DEEP / "The Void" — vedi #cockpit-deep-dim per la versione promossa a
   overlay reale a livello document. I pseudo locali NON vanno usati per il
   deep: il .notes-panel ha un proprio backdrop-filter che crea uno stacking
   context isolato, impedendo al velo di oscurare davvero le note. */

/* Soppressione se il papiro clinico è aperto: il sipario ha già il suo velo. */
body:has(#holographic-overlay-root.is-clinical-lock) .workspace::before,
body:has(#holographic-overlay-root.is-clinical-lock) .notes-panel::before {
  opacity: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .workspace::before,
  .notes-panel::before {
    transition: none !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   DRAWER BACKDROP — sicurezza operativa per drawer Engine/Lab/Vault.
   Invisibile ma cliccabile: replica per il drawer cio che il backdrop modale
   fa gia per AI/Settings/Hub. Click → chiude il drawer.

   Z-index stack (cockpit base):
     • notes-panel "elevato" (drawer aperto): 120
     • DRAWER BACKDROP: 130          ← intercetta click su workspace+note
     • sidebar-drawer.is-open: 140    ← drawer sopra al backdrop, cliccabile
     • COCKPIT DEEP DIM: 75           ← Void layer (sotto t1-sidebar-overlay)
     • t1-sidebar-overlay (AI/Settings): 80
     • identity-hub-overlay: 90
   ──────────────────────────────────────────────────────────────────────── */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 130;
  background: transparent;
  pointer-events: none;
  /* Quando attivo, click intercettato e propagato a SidebarManager.close. */
}

/* Attivo solo quando il drawer e aperto E non c'e un overlay system in primo
   piano (Hub/AI/Settings hanno gia il loro backdrop). La doppia condizione
   con :has evita un'imposizione superflua sul drawer-backdrop quando un
   overlay piu alto e gia in coabitazione (raro, ma possibile in transizioni). */
body:has(#sidebar.is-open):not(:has(.t1-sidebar-overlay.is-open)) .drawer-backdrop {
  pointer-events: auto;
  background: var(--t1-drawer-backdrop, rgba(2, 4, 8, 0.34));
  backdrop-filter: blur(8px) saturate(0.9);
  -webkit-backdrop-filter: blur(8px) saturate(0.9);
  transition: background var(--cockpit-focus-ease), backdrop-filter var(--cockpit-focus-ease);
}

/* Sidebar drawer aperto: z-index esplicito per restare sopra al backdrop. */
.sidebar-drawer.is-open {
  z-index: 140;
}

/* ────────────────────────────────────────────────────────────────────────
   COCKPIT DEEP DIM — "The Void" (Fase 2.3.3 · refinement chirurgico)

   Architettura del Void su due strati che si sommano:

   STRATO 1 · filter diretto sui pannelli (workspace + notes-panel)
     Usato per blur+brightness+saturate. Identico al pattern del Context
     Gateway (vedi righe 417-423 .context-gateway-scroll-lock). NON usiamo
     backdrop-filter sul deep-dim perche, con `body { isolation: isolate }`
     + .notes-panel { backdrop-filter } sibling, due backdrop-filter non si
     compongono come ci si aspetta (no-op silenzioso).
     `filter` agisce sull'elemento stesso prima del compositing: sempre
     visibile, indipendente da stacking context.

   STRATO 2 · #cockpit-deep-dim come velo nero piatto
     Solo background semitrasparente, niente backdrop-filter. Aggiunge la
     tinta di "vacuum" sopra al blur. Z-index 75 per coabitare con la rail
     (200) e stare sotto AI/Settings (80) / Hub (90).
   ──────────────────────────────────────────────────────────────────────── */

/* STRATO 1 · filter diretto sui pannelli (l'effettivo blur+dimming).
   Soppressione automatica in Zen (l'utente vuole il video pulito). */
body[data-glass-state='deep']:not(.is-zen) .workspace,
body[data-glass-state='deep']:not(.is-zen) .notes-panel {
  filter:
    blur(var(--cockpit-focus-blur-deep))
    brightness(var(--cockpit-focus-brightness-deep))
    saturate(var(--cockpit-focus-saturate-deep));
  transition: filter var(--cockpit-focus-ease);
}

/* Filter resettato in chiusura → smooth fade. La stessa transition viene
   ereditata anche quando data-glass-state viene rimosso. */
.workspace,
.notes-panel {
  transition: filter var(--cockpit-focus-ease);
}

/* STRATO 2 · velo "grading temporale" cinematografico (Fase 2.3.4).
   Non un nero piatto: una vignetta radiale al centro + tinta blu-notte ai bordi
   che simula il color-grading "cool" tipico del cinema (Blade Runner 2049,
   thriller psicologici). Il centro mantiene un'apertura piu chiara perche il
   soggetto e li, i bordi vanno in profondita di campo blu/nero. */
.cockpit-deep-dim {
  position: fixed;
  inset: 0;
  z-index: 75;
  pointer-events: none;
  opacity: 0;
  background:
    /* Vignetta radiale: piu morbida al centro (dove c'e l'Hub), piu pesante ai bordi */
    radial-gradient(
      140% 100% at 50% 50%,
      rgba(2, 4, 12, 0.5) 0%,
      rgba(1, 3, 10, 0.78) 100%
    ),
    /* Tinta cinema: sfumatura blu-notte top→bottom, pochissima saturazione */
    linear-gradient(
      180deg,
      rgba(6, 12, 24, 0.18) 0%,
      transparent 35%,
      rgba(2, 6, 16, 0.22) 100%
    );
  transition: opacity var(--cockpit-focus-ease);
}

/* Attivo solo quando l'Identity Hub e aperto. */
body[data-glass-state='deep'] .cockpit-deep-dim {
  opacity: 1;
}

/* Soppressione sipario clinico (coerente con i pseudo locali). */
body:has(#holographic-overlay-root.is-clinical-lock) .cockpit-deep-dim {
  opacity: 0 !important;
}
body:has(#holographic-overlay-root.is-clinical-lock) .workspace,
body:has(#holographic-overlay-root.is-clinical-lock) .notes-panel {
  filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .cockpit-deep-dim,
  .workspace,
  .notes-panel {
    transition-duration: 0.01ms !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   IDENTITY HUB — Glass refinement (Fase 2.3.2 · refinement chirurgico)

   Bug fix applicati rispetto a 2.3.1:
     • overflow: visible       → la linea zenitale non viene piu tagliata
                                  dai 16px di border-radius del shell padre
     • niente border-image     → border-image ignora border-radius (bordo
                                  rettangolare dentro card arrotondata).
                                  Sostituito con inset box-shadow stratificate
                                  che FOLLOW il border-radius naturalmente.
     • niente mix-blend-mode   → screen su fondo nero ≈ no-op. Sostituito
                                  con normal compositing a opacita visibile.
   ──────────────────────────────────────────────────────────────────────── */
.identity-hub-shell {
  /* Override del overflow: hidden ereditato da .t1-sidebar-overlay__shell.
     Necessario affinche il ::before (linea zenitale top:-0.5px) sia visibile.
     I children non sbordano: hanno solo padding + separator linee, niente
     fill esteso fino agli angoli. */
  overflow: visible;
  /* Mantengo affumicato (privacy soggetto) ma alzo leggermente la rifrazione. */
  backdrop-filter: blur(26px) saturate(1.22);
  -webkit-backdrop-filter: blur(26px) saturate(1.22);
  /* Border base sottilissimo perla (segue il radius perche e un border vero). */
  border: 1px solid color-mix(in srgb, var(--t1-pearl) 22%, rgba(255, 255, 255, 0.08));
  /* Box-shadow stratificate che simulano insieme:
       1. drop shadow esterna (separazione dal fondo)
       2. neon glow esterno (alone perla)
       3. lama di luce zenitale interna (gradient bordo top)
       4. inset glow caldo (profondita pareti)
       5. base interna leggera (peso visivo verso il basso)
     Tutte le inset SEGUONO il border-radius del shell — bordo "vivo" curvo. */
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.62),
    0 0 calc(56px * var(--neon-glow-intensity)) color-mix(in srgb, var(--t1-pearl) 22%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 36px color-mix(in srgb, var(--t1-pearl) 12%, transparent),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

/* Edge highlight zenitale · linea di luce 1px sul bordo superiore.
   Posizionata a top: -0.5px per sedersi proprio sull'edge esterno della card,
   visibile grazie a overflow: visible. Lunga (margini 6%) e leggermente
   sfumata: simula la luce zenitale che taglia il cristallo. */
.identity-hub-shell::before {
  content: '';
  position: absolute;
  top: -0.5px;
  left: 6%;
  right: 6%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--t1-pearl) 75%, rgba(255, 255, 255, 0.55)) 50%,
    transparent 100%
  );
  border-radius: 1px;
  filter: blur(0.4px);
  pointer-events: none;
  z-index: 2;
}

/* Specular highlight diffuso in alto a sinistra · effetto "riflesso ambientale".
   Senza mix-blend-mode (era no-op su fondo nero). Opacita perla alzata a 14%
   per essere visibile in normal compositing. */
.identity-hub-shell::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    120% 70% at 22% 0%,
    color-mix(in srgb, var(--t1-pearl) 14%, transparent) 0%,
    transparent 55%
  );
  pointer-events: none;
  z-index: 1;
}

/* Children dell'hub sopra il ::after specular (z-index 1) e ::before zenith (2) */
.identity-hub-shell > * {
  position: relative;
  z-index: 3;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Fase 3.0.2 — Tag profilo / sessione (picker + popover)
   Coerenza visiva con .enhancer-chip (Video Enhancer 3.0.1)
   ═══════════════════════════════════════════════════════════════════════════ */
.t1-tag-section {
  margin: 10px 0 14px;
  padding: 10px 12px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--gateway-card-border);
  background: color-mix(in srgb, var(--panel-bg) 88%, transparent);
}

.t1-tag-section > .field-label {
  margin-bottom: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.62rem;
  color: var(--t1-helm-frost-muted, var(--text-dim));
}

.t1-tag-picker-label {
  margin: 8px 0 4px;
  font-family: var(--font-tech, var(--font-mono, monospace));
  font-size: 0.52rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t1-helm-frost-muted);
}

.t1-tag-section-hint {
  margin: 10px 0 0;
  font-size: 0.56rem;
  line-height: 1.35;
  color: var(--t1-helm-frost-muted);
}

.t1-tag-picker {
  margin-bottom: 10px;
}

.t1-tag-picker:last-child {
  margin-bottom: 0;
}

.t1-tag-picker-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.t1-tag-picker-empty {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  font-family: 'Inter', var(--t1-font-ui, system-ui, sans-serif);
  font-size: 0.58rem;
  line-height: 1.4;
  color: var(--t1-helm-frost-muted);
}

.t1-tag-chip {
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--btn-border);
  background: var(--panel-bg);
  color: var(--text-dim);
  font-family: var(--font-tech);
  font-size: var(--t1-tag-chip-font-size, 0.6rem);
  letter-spacing: var(--t1-tag-chip-letter-spacing, 0.03em);
  text-transform: none;
  line-height: 1.25;
  white-space: normal;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}

.t1-tag-chip:hover {
  border-color: var(--t1-tag-chip-accent, var(--cyan-accent));
  color: var(--t1-tag-chip-accent, var(--cyan-accent));
  background: rgba(0, 229, 255, 0.06);
}

.t1-tag-chip.is-active {
  border-color: var(--t1-tag-chip-accent, var(--cyan-accent));
  color: var(--t1-tag-chip-accent, var(--cyan-accent));
  background: rgba(0, 229, 255, 0.1);
}

.t1-session-tag-popover {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 12000;
  min-width: min(360px, calc(100vw - 32px));
  padding: 16px 18px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gateway-card-border);
  background: color-mix(in srgb, var(--panel-bg) 94%, rgba(0, 0, 0, 0.35));
  box-shadow: var(--geo-plate-drop);
  backdrop-filter: blur(var(--geo-panel-blur));
}

.t1-session-tag-popover[hidden] {
  display: none !important;
}

.t1-popover-title {
  margin: 0 0 10px;
  font-family: var(--font-tech);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t1-helm-frost-muted, var(--text-dim));
}

.t1-popover-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.t1-btn-ghost,
.t1-btn-primary {
  font-family: var(--font-tech);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid var(--btn-border);
  background: transparent;
  color: var(--text-dim);
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}

.t1-btn-ghost:hover {
  border-color: var(--cyan-accent);
  color: var(--cyan-accent);
}

.t1-btn-primary {
  border-color: color-mix(in srgb, var(--cyan-accent) 55%, transparent);
  background: rgba(0, 229, 255, 0.12);
  color: var(--cyan-accent);
}

.t1-btn-primary:hover {
  background: rgba(0, 229, 255, 0.2);
}

/* ────────────────────────────────────────────────────────────────────────
   LUCE TRANSPORT BTN + POPUP (Fase 3.1.8)
   Icona nel chrome nero che apre un mini-pannello con gli slider.
   z-index: 25 → sopra drawing canvas (~18), sotto overlay sistema (150+).
   ──────────────────────────────────────────────────────────────────────── */
.cockpit-luce-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--t1-helm-frost-muted);
  cursor: pointer;
  transition:
    color 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
  flex-shrink: 0;
}

.cockpit-luce-btn:hover,
.cockpit-luce-btn.is-active {
  color: var(--t1-pearl);
  border-color: color-mix(in srgb, var(--t1-pearl) 24%, rgba(255,255,255,0.08));
  background: color-mix(in srgb, var(--t1-pearl) 8%, rgba(8,12,20,0.5));
}

.cockpit-luce-btn.is-active {
  color: var(--cyan-accent);
  border-color: color-mix(in srgb, var(--cyan-accent) 30%, rgba(255,255,255,0.08));
  background: color-mix(in srgb, var(--cyan-accent) 10%, rgba(8,14,22,0.6));
}

body.is-zen .cockpit-luce-btn { display: none !important; }

/* Popup galleggiante — inside cockpit-zone--system (position:relative) */
.cockpit-zone--system {
  position: relative;
}

.luce-popup {
  position: absolute;
  bottom: calc(100% + 8px); /* sopra il transport chrome */
  right: 0;                 /* allineato al bordo destro della system-zone */
  width: 240px;
  z-index: 25;
  background:
    linear-gradient(160deg,
      rgba(6, 8, 16, 0.97) 0%,
      rgba(2, 4, 10, 0.99) 100%);
  border: 1px solid color-mix(in srgb, var(--t1-pearl) 32%, rgba(255,255,255,0.14));
  border-radius: 12px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.72),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 1px 0 rgba(255, 255, 255, 0.08) inset;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  isolation: isolate;
}

.luce-popup[hidden] { display: none !important; }

.luce-popup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.luce-popup__title {
  font-family: var(--font-tech, var(--font-mono, monospace));
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t1-helm-frost, rgba(232, 238, 248, 0.92));
}

.luce-popup__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: color-mix(in srgb, var(--t1-helm-frost, #e8eef8) 72%, transparent);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: color 140ms ease;
}

.luce-popup__close:hover { color: var(--t1-helm-frost, #f4f7fc); }

/* Presets inline compatti */
.luce-popup__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.luce-popup .enhancer-chip {
  padding: 3px 8px;
  font-size: 0.55rem;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--t1-pearl) 28%, rgba(255,255,255,0.12));
  background: rgba(255,255,255,0.08);
  color: color-mix(in srgb, var(--t1-helm-frost, #e8eef8) 78%, transparent);
  cursor: pointer;
  transition: border-color 140ms, color 140ms, background 140ms;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-tech, var(--font-mono, monospace));
}

.luce-popup .enhancer-chip:hover,
.luce-popup .enhancer-chip.is-active {
  border-color: color-mix(in srgb, var(--cyan-accent) 40%, transparent);
  color: var(--cyan-accent);
  background: color-mix(in srgb, var(--cyan-accent) 8%, rgba(8,14,22,0.5));
}

.luce-popup .enhancer-slider-row {
  display: grid;
  grid-template-columns: 72px 1fr 36px;
  align-items: center;
  gap: 8px;
}

.luce-popup .enhancer-label {
  font-family: var(--font-tech, var(--font-mono, monospace));
  font-size: 0.54rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--t1-helm-frost, #e8eef8) 82%, transparent);
}

.luce-popup .enhancer-value {
  font-family: var(--font-tech, var(--font-mono, monospace));
  font-size: 0.54rem;
  color: color-mix(in srgb, var(--t1-helm-frost, #e8eef8) 88%, transparent);
  text-align: right;
}

.luce-popup .enhancer-slider {
  width: 100%;
  accent-color: var(--cyan-accent);
  cursor: pointer;
}

.luce-popup .enhancer-yt-guard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 8px 0;
  color: color-mix(in srgb, var(--t1-helm-frost, #e8eef8) 75%, transparent);
}

.luce-popup .enhancer-yt-guard__msg {
  margin: 0;
  font-size: 0.62rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--t1-helm-frost, #e8eef8) 80%, transparent);
}

/* ────────────────────────────────────────────────────────────────────────
   IDENTITY HUB — TAG SOTTO FOTO (Fase 3.1.8)
   ──────────────────────────────────────────────────────────────────────── */
.identity-hub-photo-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 180px;
  align-self: start;
}

/* Tag nella colonna foto: più piccoli e desaturati rispetto al drawer */
.identity-hub-tags-wrap--under-photo {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.identity-hub-tags-wrap--under-photo .identity-hub-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.identity-hub-tags-wrap--under-photo .identity-hub-tag-pill {
  font-size: var(--t1-hub-tag-pill-font-size-compact, 0.54rem);
  padding: 3px 7px;
  opacity: 0.72;
  color: color-mix(in srgb, var(--t1-hub-tag-accent, var(--cyan-accent)) 55%, var(--t1-helm-frost-muted));
  border-color: color-mix(in srgb, var(--t1-hub-tag-accent, var(--cyan-accent)) 22%, rgba(255,255,255,0.06));
  background: color-mix(in srgb, var(--t1-hub-tag-accent, var(--cyan-accent)) 5%, rgba(8,14,22,0.35));
}

/* Footer: spinge il pulsante Modifica verso il basso */
.identity-hub-foot {
  margin-top: auto;
}

/* Palco / Gateway: niente #cockpit-deep-dim — backdrop leggibile (Studio resta transparent in style_4) */
body.gateway-app .identity-hub-overlay .t1-sidebar-overlay__backdrop {
  background:
    radial-gradient(120% 90% at 18% 50%, color-mix(in srgb, var(--t1-cyan, var(--gw-cyan, #00e5ff)) 6%, transparent), transparent 60%),
    rgba(2, 4, 8, 0.78);
  backdrop-filter: blur(12px) saturate(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
}