/* Il contenitore scorrevole del terminale */
:root{
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --bottom-gap: calc(var(--safe-bottom) + 88px); /* base + safe area */
}

body.term-page {
  margin: 0;
  padding: 0;
}

body.term-page * {
  box-sizing: border-box;
}

#terminal-body {
  /* Fallback + iOS moderno: evita il taglio sotto la barra */
  min-height: 100vh;
  height: 100dvh; /* iOS 16+ */
  overflow: auto;
  -webkit-overflow-scrolling: touch;

  /* Lascia spazio di respiro in fondo (verrà aggiornato anche via JS) */
  padding-bottom: var(--bottom-gap);
  scroll-padding-bottom: var(--bottom-gap);
  margin-top: 30px;
  /* Optional: niente “rimbalzo” oltre il fondo */
  overscroll-behavior: contain;
}
/* Mobile generico */
@media (max-width: 767px) {
  #terminal-body {
    margin-top: 70px;
  }
}

/* Safari mobile */
@media (max-width: 767px) and (pointer: coarse) and (hover: none) {
  @supports (-webkit-touch-callout: none) {
    #terminal-body {
      margin-top: 30px;
    }
  }
}



/* Sentinel: usa l’ID giusto e sistema il typo del border */
#terminal-end {
  height: 1px; /* invisibile ma “agganciabile” */
  margin: 0;
  border: 0; /* o, per debug: border: 2px solid yellow; */
}

/* Un pizzico di detection per Safari iOS (non infallibile, ma utile) */
@supports (-webkit-touch-callout: none) and (not (hover: hover)) {
  #terminal-body {
    /* Se vuoi solo su iPhone, puoi spingere di più il padding */
    padding-bottom: max(84px, calc(env(safe-area-inset-bottom) + 84px));
    scroll-padding-bottom: max(84px, calc(env(safe-area-inset-bottom) + 84px));
  }
}

/* cursore stile terminale retro */

/* === Cursor "anni '80" (solo su prompt vuoto) === */
.terminal-cursor {
  display: inline-block;
  width: 0.65em;
  height: 1.2em;
  background: #00ff00;
  margin-right: 2px; /* <-- prima era margin-left */
  vertical-align: -0.15em;
  animation: blink 1s step-start infinite;
}

/* Lampeggio */
@keyframes blink { 50% { opacity: 0; } }

/* Rispetta preferenze utente */
@media (prefers-reduced-motion: reduce) {
  .terminal-cursor { animation: none; }
}

/* Di base, nascondi il cursore: lo mostriamo solo quando l'input è "vuoto" */
.prompt-form .terminal-cursor { display: none; }

/* Mostra il cursore quando l'input è vuoto (placeholder-shown) */
.prompt-form:has(.terminal-input:placeholder-shown) .terminal-cursor {
  display: inline-block;
}

/* Se l'input è disabilitato o in stato "busy", niente cursore */
.prompt-form:has(.terminal-input:disabled),
.prompt-form[aria-busy="true"] .terminal-cursor {
  display: none;
}

/* Fallback senza :has() → useremo una classe JS (.is-empty) */
.prompt-form.is-empty .terminal-cursor {
  display: inline-block;
}
.prompt-form.is-typing .terminal-cursor {
  display: none;
}



.terminal {
  background: #0d1117;
  color: #e6edf3;
  border-radius: 12px;
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.terminal-header { background: #0b0f14; color: #c9d1d9; }
.term-dot { display:inline-block; width:12px; height:12px; border-radius:50%; }

/* ===== Layout anti-iPhone barra ===== */

:root { --safe-bottom: env(safe-area-inset-bottom); }

.terminal-wrapper {
   display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden; /* evita lo sforamento */
}

/* area che deve scrollare */
.terminal-body {
   flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* tiene libere le ultime righe dalla barra iOS */
  padding-bottom: max(72px, calc(var(--safe-bottom) + 72px));

  line-height: 1.45;
  font-size: 0.95rem;
}

/* Scrollbar */
.terminal-body::-webkit-scrollbar { width: 10px; }
.terminal-body::-webkit-scrollbar-track { background: #0d1117; }
.terminal-body::-webkit-scrollbar-thumb { background: #3aa3ff; border-radius: 8px; }
.terminal-body::-webkit-scrollbar-thumb:hover { background: #1f8bff; }
.terminal-body { scrollbar-width: thin; scrollbar-color: #3aa3ff #0d1117; }

/* Firefox testo righe */
.term-line { white-space: normal; word-break: break-word; margin-bottom: .4rem; }
/* normale sulle azioni */  /* <-- usa commenti CSS, NON // */
.term-line.term-actions { white-space: normal; }

/* Le copertine nei contenuti del terminale devono partire a sinistra, non centrate */
.term-line picture.d-block.mx-auto,
.term-line img.d-block.mx-auto {
  margin-left: 0 !important;
  margin-right: auto !important;
}

.term-line picture.d-block.mx-auto img,
.term-line picture.d-block.mx-auto source + img {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* prompt */

.prompt-sign { margin-right: .35rem; }

.prompt-line { display:flex; align-items:baseline; gap:.5rem; }
.prompt-form { margin:0; }

.terminal-input {
  background: transparent;
  border: none;
  outline: none;
  color: #e6edf3;
  width: min(70vw, 760px);
  font: inherit;
  line-height: 1.45;
  padding: 0;
}
.terminal-input::placeholder { color: #8b949e; opacity: .7; }

/* Target iPhone & iPad in modalità touch */
@supports (-webkit-touch-callout: none) and (not (hover: hover)) {
  /* Solo su iPhone / iOS Safari */
  .iphone-padding {
    display: block;
    height: 50px;
    flex-shrink: 0;
  }
 .terminal-wrapper {
   .iphone-padding{ height: var(--bottom-gap); }
  }
  #term-bar-title {
    display: none;
  }
}

.term-loading {
  display: inline-flex; align-items: center; gap:.5rem;
}
.term-loading .spinner {
  width: 1rem; height:1rem; border:2px solid #8b949e; border-top-color: transparent;
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Effetto “apparizione” delle righe progressive */
.term-chunk { opacity: 0; transform: translateY(4px); transition: opacity .25s ease, transform .25s ease; }
.term-chunk.show { opacity: 1; transform: translateY(0); }

.term-line .btn {
  font-family: inherit;
  text-align: left;
}
.term-line .btn i {
  margin-right: .4rem;
}

/* Link-bottoni stile terminale: [ Etichetta ] */
/* Desktop: un po’ di indent */
/* ===== Bottoni stile terminale ===== */

/* Contenitore dei bottoni */
.term-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  padding-left: 1rem; /* indent desktop */
}

/* Mobile: niente indent */
@media (max-width: 768px) {
  .term-actions {
    padding-left: 0;
  }
}

/* Layout a colonne come il list */
.term-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18ch, auto));
  gap: .2rem 2rem; /* spazio verticale / orizzontale */
  align-items: start;
}


/* Stile dei bottoni */
/* colore base (verde chiaro) */
.term-linkbtn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font: inherit;
  color: #90ee90; /* verde chiaro */
  text-decoration: none;
  border: 1px solid rgba(58,163,255,.35);
  border-radius: 4px;
  background: rgba(58,163,255,.08);
  padding: 0 .35rem;
  line-height: 1.6;
  white-space: nowrap;
}

.term-linkbtn::before { content: "[ "; }
.term-linkbtn::after  { content: " ]"; }
.term-linkbtn i { margin-right: .2rem; }

.term-link,
.term-link:hover,
.term-link:focus,
.term-link:visited,
.term-link:active {
  color: #32cd32; /* limegreen fisso */
  background: rgba(50,205,50,.15);
  outline: none;
  text-decoration: none; /* opzionale */
}




/* Suggerimenti multi-match stile terminale */
.term-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
}
.term-suggestions code {
  display: inline-block;
  padding: 0 .35rem;
  border: 1px solid rgba(58,163,255,.35);
  border-radius: 4px;
  background: rgba(58,163,255,.08);
}

.term-columns code {
  display: inline-block;
  padding: 0 .35rem;
  border: 1px solid rgba(58,163,255,.35);
  border-radius: 4px;
  background: rgba(58,163,255,.08);
}
/* titolo grigio sopra le colonne */
.term-caption { color:#8b949e; margin-bottom:.25rem; }

/* ===== Lightbox ===== */
/* Barra azioni in alto a destra, sotto/accanto alla X di Glightbox */
.glightbox-container .gslide .nj-toolbar {
  position: absolute;
  top: 12px;
  right: 56px; /* lascia spazio alla X */
  display: flex;
  gap: 8px;
  z-index: 10010;
}

.glightbox-container .gslide .nj-btn {
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: rgba(0,0,0,.6);
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.glightbox-container .gslide .nj-btn:hover { background: rgba(0,0,0,.8); }

/* Toast minimale (opzionale) */
.nj-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: rgba(0,0,0,.8);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 10050;
}
.nj-toast.show { opacity: 1; }





/* Prompt su una sola riga */
.prompt-line {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: nowrap;         /* << NON andare a capo */
}

/* Il segnaprompt non si spezza mai */
.prompt-sign {
  flex: 0 0 auto;
  white-space: nowrap;       /* << non andare a capo */
}

/* L’input prende tutto lo spazio restante e non forza wrap strani */
.prompt-form {
  display: inline-flex;
  align-items: baseline;
  min-width: 0;              /* << importante per iOS */
  flex: 1 1 auto;
}

.terminal-input {
  flex: 1 1 auto;
  min-width: 2ch;            /* evita collassi */
  white-space: nowrap;
  word-break: keep-all;
}


/* Durante la transizione iOS blocchiamo rimbalzi extra */
.terminal-body.scroll-lock {
  overscroll-behavior: contain;
}


/* iOS touch only */
@supports (-webkit-touch-callout: none) and (not (hover: hover)) {
  /* evita l'auto-zoom sugli input del terminale */
  .terminal-input {
    font-size: 16px !important;   /* >=16px = niente zoom */
    line-height: 1.45;
  }

  /* se vuoi uniformare tutta la riga del prompt */
  .prompt-line { font-size: 16px; }

  /* consigliato per evitare reimpaginazioni di iOS */
  html, body { -webkit-text-size-adjust: 100%; }
}


/* glightbox */

.glightbox-testo {
	color: black;
}

/* forza dimensioni decenti all’interno della lightbox */
.glightbox-container .gslide,
.glightbox-container .gslide-inner,
.glightbox-container .gslide-media,
.glightbox-container .gslide-inline {
  width: 90vw !important;
  height: 90vh !important;
  max-width: 90vw !important;
  max-height: 90vh !important;
}

.glightbox-container .gslide-iframe,
.glightbox-container .gslide-video {
  width: 100% !important;
  height: 100% !important;
}

/* Lightbox di solo testo: più respiro verticale */
.glightbox-container .gslide-inline {
  display: flex !important;
  align-items: center;         /* centra verticalmente */
  justify-content: center;
  padding: 2rem 1rem;          /* margini extra sopra/sotto */
  max-height: 95vh !important; /* un filo più alto */
  overflow-y: auto;            /* scroll se il testo è lungo */
  box-sizing: border-box;
}

/* Il contenuto testuale dentro */
.glightbox-container .gslide-inline .ginner-content {
  max-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}


/* Sposta la X di chiusura leggermente più in basso */
.glightbox-container .gclose {
  top: calc(env(safe-area-inset-top, 0px) + 35px) !important;
  right: calc(env(safe-area-inset-right, 0px) + 10px) !important;
  z-index: 9999; /* sopra tutto */
}
@media (max-width: 768px) {
  .glightbox-container .gclose {
    top: calc(env(safe-area-inset-top, 0px) + 15px) !important;
  }
}


/* Header del terminale sticky sotto la menù bar */
.terminal {
  position: relative;
}

/* altezza della navbar, adattala se diversa */
:root {
  --nj-navbar-height: 72px;
}

.terminal-header {
  position: sticky;
  top: var(--nj-navbar-height);
  z-index: 1050;
  background: #050608;            /* stesso colore del terminale */
  border-bottom: 1px solid #222;  /* leggero distacco dal corpo */
}

/* il contenitore sotto continua a sembrare parte della stessa card */

body {
  overscroll-behavior-y: none;
}

/* il contenitore che deve scrollare */
.terminal-wrapper {
  max-height: 100vh;              /* non supera l altezza finestra */
  overflow-y: auto;               /* attiva scroll verticale */
  -webkit-overflow-scrolling: touch; /* scroll fluido su iOS */
  overscroll-behavior: contain;   /* blocca il rimbalzo verso il body */
  background: #050608;
}


/* altezza della navbar, se serve */
:root{
  --nj-navbar-height: 60px;
  --nj-term-offset: 25px; /* default (Chrome ecc.) */
}

/* barra fissa */
#nj-term-bar{
  position: fixed;
  top: calc(var(--nj-navbar-height) + var(--nj-term-offset));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  max-width: 1140px;
  width: calc(100% - 2rem);
  background: #050608;
  border-radius: 0.5rem;
}

/* Safari only */
@supports (-webkit-touch-callout: none) {
  :root{ --nj-term-offset: 15px; }
}

#nj-term-bar {
  pointer-events: none;
}

#nj-term-bar button,
#nj-term-bar a,
#nj-term-bar .btn {
  pointer-events: auto;
}

/* la card del terminale scende un po per non finire sotto la barra */
.container-main {
  padding-top: 160px; /* regola in base all altezza reale della barra */
}

/* Desktop: posiziona la card subito sotto la barra fissa */
@media (min-width: 1025px) and (pointer: fine) {
  .container-main {
    padding-top: var(--nj-desktop-term-top, 118px);
  }

  .container-main .terminal {
    margin-top: 0 !important;
  }
}

/* per continuità visiva */
.terminal {
  background: #050608;
}

.term-cta {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* Sticky bar base */
.sticky-header {
    position: fixed;
    top: 100px;
    left: 0;
    right: 0;
    z-index: 999;
}

/* Gruppo pulsanti colorati */
.sticky-header .color-buttons {
    display: flex;
    gap: 8px;
}

/* Versione mobile senza pulsanti */
@media screen and (max-width: 768px) {
    .sticky-header .color-buttons {
        display: none;
    }
}

#mainNav {
  z-index: 3000 !important;
}

/* Lock viewport scroll only on mobile/touch for terminal page */
@media (max-width: 1024px) and (pointer: coarse) {
  html.term-mobile-lock,
  body.term-mobile-lock {
    height: 100%;
    overflow: hidden;
  }

  .terminal-wrapper {
    overflow: hidden;
  }

  #terminal-body,
  .terminal-body {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  html.term-kb-open #terminal-body,
  body.term-kb-open #terminal-body,
  html.term-kb-open .terminal-body,
  body.term-kb-open .terminal-body {
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    scroll-padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  }
}