/* ==========================================================
   GLOBAL THEME — CRT + Colors
   ========================================================== */
:root {
  --bg: #0a120c;
  --crt: #0f1c12;
  --scanline: rgba(0,0,0,.18);

  --text: #baf2c9;
  --text-dim: #8ac2a1;
  --glow: #3bff76;
  --accent: #4aff87;

  --wire: #20472f;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  color: var(--text);
  font-family: "Share Tech Mono", ui-monospace, monospace;
  letter-spacing: .25px;
  background: radial-gradient(120% 100% at 50% 50%, #0b140e, var(--crt) 60%, #0a120c);
}

/* ==========================================================
   CRT FRAME + EFFECTS
   ========================================================== */
.crt-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2vh 2vw;
}

.crt {
  position: relative;
  width: min(900px, 98vw);
  min-height: 40vh;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px #0d2015,
    0 18px 80px rgba(0, 0, 0, .45);
}

/* scanlines */
.crt::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.08)),
    repeating-linear-gradient(180deg, var(--scanline) 0 1.6px, transparent 1.6px 3.2px);
  opacity: .9;
}

@keyframes flicker {
  0%, 19%, 21%, 23%, 100% { opacity: 1; }
  20%, 22% { opacity: .98; }
}

.crt--flicker {
  animation: flicker 3.6s steps(2,end) infinite;
}

/* Shutdown animation */
.crt-off {
  animation: crt-shutdown .8s forwards;
}

@keyframes crt-shutdown {
  0% { opacity: 1; transform: scaleY(1); }
  60% { opacity: .2; transform: scaleY(.1); }
  80% { opacity: .1; transform: scaleY(.02); }
  100% { opacity: 0; transform: scaleY(0); }
}

#shutdown-hint {
  position: fixed;
  bottom: 14px;
  right: 20px;
  color: #4aff87;
  font-size: 13px;
  font-family: "Share Tech Mono";
  opacity: 0;             /* invisible au départ */
  pointer-events: none;
  text-shadow: 0 0 6px #4aff87;
  transition: opacity .4s ease-out;
}

.folder-title {
    margin-top: 4px;
    margin-bottom: 8px;
    display: block;
}

.pw-title {
    margin-top: 4px;
    margin-bottom: 8px;
    display: block;
}

.reauth-title {
    margin-top: 4px;
    margin-bottom: 8px;
    display: block;
}

.progress-title {
    margin-top: 8px;
    margin-bottom: 8px;
    display: block;
}

/* ==========================================================
   HEADER
   ========================================================== */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: linear-gradient(180deg, #0c1912, #0a140e);
  border-bottom: 1px solid #123a25;
  font-family: "Orbitron";
  text-transform: uppercase;
  letter-spacing: 1.05px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.brand .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

.meta span {
  margin-left: 14px;
  position: relative;
  font-size: 12px;
  color: var(--text-dim);
}

.meta span::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  width: 4px;
  height: 4px;
  transform: translateY(-50%);
  background: var(--wire);
}

/* ==========================================================
   PANELS (Search / Mail / News)
   ========================================================== */
.panel {
  border: 1px solid #103b24;
  background: #0f1b14;
  border-radius: 12px;
  padding: 14px;
  margin: 14px;
}

.panel h2 {
  margin: 0 0 10px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--glow);
  text-transform: uppercase;
  letter-spacing: .7px;
  border-bottom: 1px solid #143a25;
  padding-bottom: 6px;
}

.hidden { display: none !important; }

/* ==========================================================
   TAB BAR
   ========================================================== */
.tab-bar {
  display: flex;
  background: #0d1812;
  border-bottom: 1px solid #143a25;
}

.tab {
  padding: 10px 18px;
  cursor: pointer;
  font-family: "Orbitron";
  letter-spacing: 1px;
  color: var(--text-dim);
  border-right: 1px solid #123a25;
  user-select: none;
}

.tab:hover { background: #122017; }
.tab.active {
  background: #0f1b14;
  color: var(--accent);
  font-weight: bold;
}

/* Unread dot */
.tab-unread-dot {
  display: inline-block;
  margin-left: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  animation: pulse-dot 1.5s infinite ease-in-out;
}

@keyframes pulse-dot {
  0%   { opacity: .25; transform: scale(.9); }
  50%  { opacity: 1;   transform: scale(1.25); }
  100% { opacity: .25; transform: scale(.9); }
}

/* ==========================================================
   SEARCH ENGINE
   ========================================================== */
.gic-search-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.gic-search-bar input {
  flex: 1;
  padding: 6px 8px;
  background: #0d1a12;
  border: 1px solid #1a5b3b;
  border-radius: 6px;
  color: var(--text);
}

.gic-search-bar button {
  padding: 6px 12px;
  background: #0d1a12;
  border: 1px solid #2cdf75;
  color: var(--accent);
  font-weight: bold;
  letter-spacing: .8px;
  border-radius: 6px;
  cursor: pointer;
}

.gic-search-result {
  margin: 8px 0;
  font-size: 12px;
  color: var(--text-dim);
}

.gic-closed-folder {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #2cdf75;
  background: #0d1a12;
  border-radius: 10px;
}

.folder-closed-text {
  color: var(--text-dim);
  font-size: 12px;
  margin-top: 6px;
  line-height: 1.25;
}


/* Locked folder */
.gic-locked-folder {
  margin-top: 10px;
  padding: 10px;
  background: #0d1a12;
  border-radius: 10px;
  border: 1px solid #2cdf75;
}

.folder-button {
  width: 90px;
  padding: 5px;
  text-align: center;
  background: #0d1a12;
  border: 1px solid #2cdf75;
  border-radius: 6px;
  cursor: pointer;
}

/* Character panel */
.gic-character-box {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #2cdf75;
  background: #0d1a12;
  border-radius: 10px;
  color: var(--text);
}

.character-wrapper {
  display: flex;
  gap: 14px;
}

.character-photo {
  width: 160px;
  height: 160px;
  border-radius: 6px;
  object-fit: cover;
  border: 0px solid #2cdf75;
}

.character-info {
  flex: 1;
}

.character-name {
  font-size: 15px;
  font-weight: bold;
  color: var(--accent);
  margin-bottom: 6px;
}

.character-field {
  font-size: 12px;
  margin-bottom: 3px;
}

.field-label {
  color: var(--glow);
  margin-right: 4px;
}

.character-note {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-dim);
  white-space: pre-line;
}



/* Password panel */
.password-panel {
  margin-top: 12px;
  padding: 12px;
  background: #0c1a12;
  border: 1px solid #1a5b3b;
  border-radius: 10px;
}

.password-panel input {
  width: 160px;
  margin-right: 8px;
  padding: 6px;
  background: #08120c;
  border: 1px solid #1a5b3b;
  border-radius: 6px;
  color: var(--text);
}

.password-panel button {
  padding: 6px 10px;
  border: 1px solid #2cdf75;
  background: #0d1a12;
  color: var(--accent);
  border-radius: 6px;
  cursor: pointer;
}

.pw-error {
  margin-top: 6px;
  color: #f55;
  font-size: 12px;
}

/* ==========================================================
   SECURITY FLOW (Reauth / Check / Recovery)
   ========================================================== */
.sec-btn {
  padding: 6px 12px;
  border: 1px solid #2cdf75;
  background: #0d1a12;
  border-radius: 6px;
  color: var(--accent);
  font-weight: bold;
  cursor: pointer;
  margin-top: 6px;
}

/* Step 1 */
.security-lock {
  margin-top: 14px;
  padding: 12px;
  background: #0c1a12;
  border: 1px solid #1a5b3b;
  border-radius: 10px;
}

.alert-title {
  color: #ff6;
  font-size: 13px;
  margin-bottom: 6px;
}

.alert-text {
  font-size: 12px;
  color: var(--text-dim);
}

/* Step 2 */
.reauth-panel {
  margin-top: 14px;
  padding: 12px;
  background: #0c1a12;
  border: 1px solid #1a5b3b;
  border-radius: 10px;
  box-sizing: border-box;
}


.reauth-input {
  width: 100%;
  padding: 6px;
  margin-bottom: 8px;
  background: #08120c;
  border: 1px solid #1a5b3b;
  border-radius: 6px;
  color: var(--text);
  box-sizing: border-box;
}

.reauth-msg {
  font-size: 12px;
  color: #f66;
  margin-top: 6px;
}

/* Step 3 */
.security-check {
  margin-top: 14px;
  padding: 12px;
  background: #0c1a12;
  border: 1px solid #1a5b3b;
  border-radius: 10px;
}

.check-title {
  color: var(--glow);
  text-transform: uppercase;
  font-size: 12.5px;
}

.check-status {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.progress-bar {
  width: 100%;
  height: 12px;
  border: 1px solid #2cdf75;
  border-radius: 8px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width .2s linear;
}

/* Step 4 */
.recovery-panel {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #1a5b3b;
  background: #0c1a12;
  border-radius: 10px;
}

.recovery-terminal {
  height: 160px;
  padding: 10px;
  overflow: auto;
  background: #081009;
  font-size: 11px;
  white-space: pre-line;
  color: var(--accent);
  font-family: monospace;
  border: 1px solid #193a23;
}

/* ==========================================================
   OVERRIDE TOOLS
   ========================================================== */
.override-section {
  margin-top: 12px;
  text-align: left;
}

.override-section button {
  margin-top: 8px;
}

.integrity-terminal,
.log-terminal {
  background: #081009;
  padding: 10px;
  border-radius: 6px;
  height: 90px;
  overflow: auto;
  font-family: monospace;
  white-space: pre-line;
  font-size: 11px;
}

.integrity-terminal {
  border: 1px solid #193a23;
  box-shadow: 0 0 6px rgba(0,255,120,.2);
}

.log-terminal {
  border: 1px solid #193a23;
  box-shadow: 0 0 6px rgba(100,200,255,.2);
}

.bruteforce-terminal {
  height: 200px;
  padding: 10px;
  font-size: 11px;
  overflow: auto;
  white-space: pre-line;
  background: #060a06;
  border: 1px solid #264d32;
  box-shadow: 0 0 6px rgba(0,255,100,.25);
}

.download-stats {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 6px;
}

/* ==========================================================
   UNLOCKED FILES
   ========================================================== */
.unlocked-files {
  margin-top: 12px;
  padding: 10px;
  background: #0c1a12;
  border-radius: 10px;
  border: 1px solid #2cdf75;
}

.file-item {
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  margin: 6px 0;
}

.file-item:hover { color: var(--accent); }

/* ==========================================================
   BOTTOM ACTION BAR
   ========================================================== */
.bottom-bar {
  margin-top: 12px;
  padding: 12px 10px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;

  border-top: 1px solid #143a25;
  background: linear-gradient(180deg, #0f1b14aa, #0a140eaa);
  border-radius: 0 0 12px 12px;
}

.bottom-action {
  padding: 8px 18px;
  border-radius: 6px;
  border: 1px solid #2cdf75;
  background: #0d1a12;
  color: var(--accent);
  font-weight: bold;
  cursor: pointer;
}

.bottom-action.danger {
  border-color: #ff4444;
  color: #ff7777;
}

.disabled-btn {
  opacity: .35;
  cursor: not-allowed !important;
}

/* ==========================================================
   MAIL PANEL
   ========================================================== */
.mail-wrapper {
  display: grid;
  grid-template-columns: 32% 68%;
  height: 640px;
  gap: 12px;
  margin: 14px;
}

/* Inbox list */
.mail-inbox {
  overflow-y: auto;
  background: #081009;
  border: 1px solid #193a23;
  padding: 8px;
  font-size: 12px;
}

.mail-item {
  padding: 6px;
  cursor: pointer;
  border-bottom: 1px solid #123a25;
}

.mail-item:hover { background: #0e1b13; }
.mail-item.active {
  background: #132819;
  border-left: 3px solid var(--accent);
  padding-left: 3px;
}

.mail-line {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mail-subject {
  font-size: 13px;
  color: var(--text);
}

/* unread mail */
.mail-item.unread .mail-subject {
  font-weight: bold;
  color: var(--glow);
  font-size: 14px;
}

.mail-unread-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  animation: unreadPulse 1.5s infinite;
}

@keyframes unreadPulse {
  0% { opacity: .4; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.15); }
  100% { opacity: .4; transform: scale(.9); }
}

.mail-from {
  font-size: 12px;
  color: var(--text-dim);
  margin-left: 14px;
}

/* Reader */
.mail-reader {
  display: flex;
  flex-direction: column;
  background: #0b160f;
  padding: 10px;
  border: 1px solid #193a23;
}

.mail-view {
  flex: 1;
  overflow-y: auto;
  font-size: 12px; 
  white-space: pre-line;
  color: var(--text);
}

/* Reply */
.mail-reply-box textarea {
  box-sizing: border-box;   
  width: 100%;
  height: 80px;
  resize: none;
  background: #08120c;
  border: 1px solid #143a25;
  color: var(--text);
  padding: 6px;
}

.mail-reply-box {
  margin-top: 12px;      /* ← marge au-dessus de la zone Reply */
}

/* ============================================
   LINKS inside MAIL VIEW
   ============================================ */
.gic-link {
  color: #6ec8ff;                  /* Choisis la couleur que tu veux */
  text-decoration: none;
  font-weight: bold;               /* optionnel */
}

.gic-link:hover {
  text-decoration: underline;
  color: #9bddff;                  /* couleur hover */
}

/* ==========================================================
   NEWS PANEL
   ========================================================== */
.news-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 12px;
}

.news-item {
  padding: 10px 12px;
  background: #0c1a12;
  border: 1px solid #1a5b3b;
  border-radius: 8px;
  color: var(--text);
}

.news-title {
  font-weight: bold;
  color: var(--glow);
  margin-bottom: 4px;
}

.news-date {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.news-body {
  font-size: 12px;
  line-height: 1.25;
  white-space: pre-line;
}

/* ==========================================================
   POPUP DOCUMENT WINDOW
   ========================================================== */
#gic-window-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
}

#gic-window-overlay.hidden { display: none; }

.gic-window {
  width: 860px;
  height: 600px;
  background: #0c1811;
  border: 1px solid #2cdf75;
  border-radius: 12px;
  box-shadow: 0 0 35px rgba(0,255,140,.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.gic-window-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #0f1c14;
  border-bottom: 1px solid #2cdf75;
  color: var(--accent);
  font-family: "Orbitron";
  letter-spacing: 1px;
  font-size: 12px;
  text-transform: uppercase;
}

.gic-window-buttons button {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 11px;
  cursor: pointer;
  padding: 2px 8px;
}

#gic-window-iframe {
  flex: 1;
  width: 100%;
  background: #000;
}

/* ==========================================================
   SIGNATURE WARNING POPUP
   ========================================================== */
#sig-popup {
  position: fixed;
  top: 20px;
  right: 20px;
  pointer-events: none;
  z-index: 99999;
}

.sig-box {
  background: #140f0f;
  color: #ff6565;
  padding: 12px 16px;
  border: 1px solid #ff3232;
  font-family: "Share Tech Mono";
  font-size: 12px;
  text-align: center;
  opacity: 0;
  transform: scale(.8);
  transition: opacity .25s, transform .25s;
  box-shadow: 0 0 12px rgba(255,0,0,.4);
}

.sig-popup-show .sig-box {
  opacity: 1;
  transform: scale(1);
  animation: sig-glitch .3s steps(2,end) 0s 3;
}


@keyframes sig-glitch {
  0% { transform: translate(0,0); opacity:1; }
  20% { transform: translate(-2px,1px) skewX(2deg); opacity:.9; }
  40% { transform: translate(2px,-1px) skewX(-2deg); opacity:.75; }
  60% { transform: translate(-1px,0); opacity:.9; }
  80% { transform: translate(1px,0); opacity:.85; }
  100% { transform: translate(0,0); opacity:1; }
}

.glitch {
  animation: crt-glitch 0.15s linear 0s 1;
}

@keyframes crt-glitch {
  0%   { transform: translate(0,0); filter:none; opacity:1; }
  20%  { transform: translate(-3px,2px) skewX(2deg); filter: hue-rotate(20deg) brightness(140%); opacity:0.85; }
  40%  { transform: translate(3px,-2px) skewX(-2deg); filter: hue-rotate(-20deg) brightness(120%); opacity:0.75; }
  60%  { transform: translate(-2px,1px); filter: contrast(160%); opacity:0.9; }
  80%  { transform: translate(2px,-1px) skewX(1deg); filter: hue-rotate(40deg) brightness(150%); opacity:0.8; }
  100% { transform: translate(0,0); filter:none; opacity:1; }
}

.glitch-strong {
  animation: glitchStrongAnim 0.25s linear;
}

@keyframes glitchStrongAnim {
  0%   { transform: skewX(0deg) translate(0,0); filter:none; opacity:1; }
  20%  { transform: skewX(4deg) translate(-3px,0); filter:hue-rotate(20deg) brightness(140%); opacity:0.8; }
  40%  { transform: skewX(-4deg) translate(3px,0); filter:hue-rotate(-20deg) brightness(160%); opacity:0.7; }
  60%  { transform: skewX(2deg); opacity:0.9; }
  80%  { transform: skewX(-1deg); opacity:0.8; }
  100% { transform:none; opacity:1; }
}

.scan-flash::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:9999;
  pointer-events:none;
  background:linear-gradient(
     transparent 0%,
     rgba(255,255,255,0.18) 50%,
     transparent 100%
  );
  animation: scanFlash 0.25s linear;
}

@keyframes scanFlash {
  0% { opacity:0; }
  50% { opacity:1; }
  100% { opacity:0; }
}