/**
 * mirc-window.css
 * La finestra mIRC non è un frame statico incollato sullo schermo: è un
 * oggetto che vive nello spazio 3D della scena, con la sua prospettiva
 * CSS, la sua luce di bordo, la sua ombra proiettata sul particellare
 * dietro. Chrome retro (Windows 95 vero: barra blu, bordi rilevati,
 * font bitmap-like) trattato con un editing cinematografico — non uno
 * screenshot, un ologramma di quell'epoca.
 */

#mirc-stage {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1400px;
  perspective-origin: 50% 42%;
  pointer-events: none;
}

#mirc-window {
  width: min(720px, 86vw);
  height: min(460px, 62vh);
  transform-style: preserve-3d;
  will-change: transform, opacity;
  opacity: 0;
  filter: drop-shadow(0 40px 70px rgba(0,0,0,0.65)) drop-shadow(0 0 60px rgba(41,199,246,0.10));
}

#mirc-chrome {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #C0C0C0;
  border: 2px solid #050608;
  border-radius: 3px;
  box-shadow:
    inset 1px 1px 0 #FFFFFF,
    inset -2px -2px 0 #4b4f57,
    0 0 0 1px rgba(41,199,246,0.18);
  font-family: 'Tahoma', 'MS Sans Serif', Arial, sans-serif;
  overflow: hidden;
}

#mirc-titlebar {
  flex: 0 0 auto;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 0 6px;
  background: linear-gradient(180deg, #1959c9 0%, #0f3f9e 45%, #0a2f7c 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}
#mirc-titlebar .mirc-title-name { display:flex; align-items:center; gap:6px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#mirc-titlebar .mirc-title-icon { width:14px; height:14px; flex:0 0 auto; filter: drop-shadow(0 0 3px rgba(41,199,246,0.8)); }
#mirc-titlebar .mirc-title-btns { display:flex; gap:3px; flex:0 0 auto; }
#mirc-titlebar .mirc-btn {
  width: 17px; height: 15px; background:#C0C0C0; border:1px solid #050608;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #6d7078;
  font-size: 9px; line-height: 13px; text-align:center; color:#000; font-weight:700;
}

#mirc-menubar {
  flex: 0 0 auto;
  height: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 8px;
  background: #C0C0C0;
  border-bottom: 1px solid #7c7f86;
  font-size: 11px;
  color: #1a1a1a;
}

#mirc-body {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  background: #050608;
}

#mirc-log {
  flex: 1 1 auto;
  min-width: 0;
  background: #050608;
  color: #C7CCD6;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 12.5px;
  line-height: 1.62;
  padding: 10px 12px;
  overflow: hidden;
  border-right: 1px solid #2a2d34;
  position: relative;
}
#mirc-log .mirc-line { opacity: 0; transform: translateY(3px); white-space: pre-wrap; word-break: break-word; }
#mirc-log .mirc-line.is-in { opacity: 1; transform: translateY(0); transition: opacity .22s ease, transform .22s ease; }
#mirc-log .mirc-nick { color: #29C7F6; font-weight: 700; }
#mirc-log .mirc-nick.is-khaled { color: #FF9142; }
#mirc-log .mirc-sys { color: #6E7686; font-style: italic; }
#mirc-log .mirc-emph { color: #F4F6FB; font-weight: 700; text-shadow: 0 0 10px rgba(41,199,246,0.5); }
#mirc-log .mirc-cursor { display:inline-block; width:7px; height:13px; background:#29C7F6; vertical-align:-2px; box-shadow:0 0 8px #29C7F6; animation: mirc-blink 1s steps(1) infinite; }
@keyframes mirc-blink { 50% { opacity: 0; } }

#mirc-names {
  width: 128px;
  flex: 0 0 auto;
  background: #0b0d12;
  color: #8890A0;
  font-family: 'Consolas', monospace;
  font-size: 11px;
  line-height: 1.9;
  padding: 8px 6px;
  overflow: hidden;
}
#mirc-names .n {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: mirc-flicker 7s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 1.1s);
}
#mirc-names .n.op::before { content: "@"; color: #FF9142; }
#mirc-names .n.active { color: #29C7F6; }
@keyframes mirc-flicker { 0%, 100% { opacity: 0.38; } 48% { opacity: 0.38; } 54% { opacity: 0.9; } 62% { opacity: 0.5; } }

#mirc-inputbar {
  flex: 0 0 auto;
  height: 24px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  background: #C0C0C0;
  border-top: 1px solid #7c7f86;
}
#mirc-inputbar .mirc-inputfield {
  flex: 1 1 auto; height: 17px; background: #fff; border: 1px solid #050608;
  box-shadow: inset 1px 1px 0 #6d7078;
}
#mirc-statusbar {
  flex: 0 0 auto; height: 16px; background:#C0C0C0; border-top:1px solid #fff;
  font-size: 10px; color:#333; padding: 0 6px; display:flex; align-items:center; gap:10px;
}

/* Scanline overlay: identità CRT senza travestire il chrome da monitor intero */
#mirc-scan {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: 0.5;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 1px, transparent 1px, transparent 3px);
}

/* Banner di join/disconnect a schermo intero — costruito da text-particles.js
 * su un canvas dedicato, questo è solo il layer che lo ospita. */
#mirc-banner-stage {
  position: fixed; inset: 0; z-index: 8; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
#mirc-banner-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* Reduced motion: niente prospettiva/rotazioni, finestra ferma e leggibile */
.reduced-motion #mirc-window { transform: none !important; opacity: 1 !important; }
.reduced-motion #mirc-log .mirc-line { opacity: 1 !important; transform: none !important; }

@media (max-width: 720px) {
  #mirc-names { display: none; }
  #mirc-window { width: 92vw; height: 58vh; }
  #mirc-stage { perspective: 900px; }
}