/*
================================================================================
  ◎ CHROMATIC DESIGN SYSTEM v1.7 — GLASS OAK AMBER HYBRID EDITION
  Fichier : /opt/cortex/app/css/components/terminal.css
  Sémantique : Boîtier de terminal de logs d'activité tactique
  Architecture : Sceau de transparence translucide, grille asymétrique spectrale
================================================================================
*/

:root {
  /* Nuancier Chêne Ambre & Micro-Texture */
  --amber-frame-bg: oklch(0.14 0.03 45 / 0.85); /* Cadre d'ébénisterie dense, lourd et protecteur */
  --amber-body-bg: oklch(0.06 0.015 45 / 0.20); /* Fond de plaque de verre hautement translucide */
  --amber-glow: oklch(0.76 0.14 62);
  --amber-border: oklch(0.24 0.04 45 / 0.55);   /* Bordure solide physique */
  --amber-text: oklch(0.92 0.02 65);
  --amber-text-muted: oklch(0.68 0.05 60 / 0.70);

  /* Texture micro-granulaire physique (Bruit fractal SVG compressé) */
  --grain-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.045'/%3E%3C/svg%3E");
}

.terminal-frame {
  /* Ébénisterie de support périphérique dense et protectrice */
  background-color: var(--amber-frame-bg);
  background-image: var(--grain-texture);
  background-blend-mode: normal;
  
  /* Réfraction de flou de profondeur sur le boîtier externe */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--amber-border);
  border-radius: 14px;
  overflow: hidden;
  font-family: 'Roboto Mono', monospace;
  
  /* Épaisseur physique et ombrage d'ancrage tridimensionnel */
  box-shadow: 
    inset 0 1px 1px oklch(1 0 0 / 0.08),
    0 10px 30px oklch(0 0 0 / 0.4),
    4px 4px 0px oklch(0.08 0.02 45 / 0.2);
  
  transform: translate(0px, 0px);
  transition: 
    transform var(--duration-z5) cubic-bezier(0.16, 1, 0.3, 1), 
    box-shadow var(--duration-z5) cubic-bezier(0.16, 1, 0.3, 1), 
    border-color var(--duration-z5) cubic-bezier(0.16, 1, 0.3, 1),
    background-color var(--duration-z5) ease,
    width var(--duration-z5) cubic-bezier(0.16, 1, 0.3, 1),
    height var(--duration-z5) cubic-bezier(0.16, 1, 0.3, 1);
  
  /* ── CONSERVATION DU COMPORTEMENT MOBILE D'ORIGINE (CORTEX INVARIANT) ── */
  width: 100%;
  height: clamp(400px, 55svh, 480px);
  display: flex;
  flex-direction: column;
}

/* ── COMPORTEMENT DESKTOP SÉCURISÉ ET ÉTIRÉ SANS ACCIDENT DE GRILLE ── */
@media (min-width: 1024px) {
  .terminal-frame {
    /* 
       Le terminal n'utilise plus d'unités vw pour sa largeur, évitant de casser la grille.
       Il remplit intelligemment 100% de la largeur de sa colonne dédiée.
    */
    width: 100%;
    max-width: 820px;
    height: clamp(340px, 45svh, 410px);
    
    /* Alignement asymétrique à droite parfaitement calé */
    margin-left: auto;
    margin-right: 0;
    align-self: center;
  }
}

.terminal-frame:hover {
  transform: translate(1px, 1px);
  box-shadow: 
    inset 0 1px 2px oklch(1 0 0 / 0.12),
    0 15px 40px oklch(0 0 0 / 0.5),
    2px 2px 0px oklch(0.08 0.02 45 / 0.1);
  border-color: var(--amber-glow);
  background-color: oklch(0.16 0.03 45 / 0.90);
}

.terminal-header {
  background-color: oklch(0.06 0.01 45 / 0.45);
  background-image: var(--grain-texture);
  border-bottom: 1px solid var(--amber-border);
  padding: 0.85rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.terminal-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: inset 0 1px 1px oklch(0 0 0 / 0.3);
}

.terminal-dot.r { background-color: var(--copper); }
.terminal-dot.y { background-color: var(--amber-glow); }
.terminal-dot.g { background-color: var(--forge-green); }

.terminal-title {
  color: var(--amber-text-muted);
  font-size: 0.74rem;
  margin-left: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-shadow: 0 1px 2px oklch(0 0 0 / 0.4);
}

.terminal-body {
  /* Translucidité fluide élégante de la plaque de verre interne */
  background-color: var(--amber-body-bg);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  padding: 1.4rem;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--amber-text);
  text-align: left;
  white-space: pre-wrap;
  overflow-y: scroll;
  flex-grow: 1;
  scroll-behavior: smooth;
  
  /* Ombre d'encastrement interne de la plaque de verre */
  box-shadow: inset 0 10px 20px oklch(0 0 0 / 0.45);
}

/* Masquage des barres de défilement pour préserver l'aspect d'ébénisterie d'art */
.terminal-body::-webkit-scrollbar {
  display: none;
}
.terminal-body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Coloration syntaxique et mise en valeur des flux de logs sous l'ambre */
.log-cmd { 
  color: var(--amber-glow); 
  font-weight: 700; 
  text-shadow: 0 0 8px oklch(0.76 0.14 62 / 0.25);
}

.log-success { 
  color: var(--terminal-success); 
  font-weight: 700; 
  text-shadow: 0 0 8px oklch(0.62 0.17 145 / 0.2);
}

.log-process { 
  color: var(--amber-text); 
  opacity: 0.9;
}

.log-meta { 
  color: var(--amber-text-muted); 
  font-family: 'Roboto Mono', monospace; 
  font-size: 0.74rem; 
}

/* Animation d'affichage gravitaire */
.terminal-fade-in {
  opacity: 0;
  transform: translateY(6px);
  animation: logSlideIn var(--duration-z3) forwards cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes logSlideIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}