/* =============================================================================
   FLOWORK OS — NANO-MODULAR COMPONENT: CORE_CANVAS.CSS
   Author: Flowork OS Sovereign Architect & Awenk Audico
   Co-authored-by: Flowork OS <agent@floworkos.com>
   ============================================================================= */

/* Sovereign Zero-Lag Shield: Neutralize infinite loop repaints on software compositors */
.pulse-beacon,
.telemetry-dot,
.hud-core-pulse,
.hud-rot-clockwise,
.hud-rot-counter,
.flw-shooting-star,
.flw-starfield-canvas,
.flw-speech-pulse {
  animation: none !important;
}

/* Zero GPU Off-Screen Copy Pass: Eliminate full-screen scanlines & expensive backdrop blits */
.scanline {
  display: none !important;
}

:is(.chat-thinking-card, .chat-composer-box, .chat-tools-area, .topbar, .tactical-hud, .modal-dialog, .toast, [class*="fl-live-"], [class*="-pod"], .fl-toolstream-wrap, .flw-card, .rightbar-header, .sidebar-header) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-color: rgba(6, 11, 20, 0.94) !important;
}

:root {
  /* ==========================================================================
     STARK HUD // MR. FLOW CYBERNETIC OBSIDIAN & ELECTRIC CYAN MATRIX
     - Pure Obsidian black base (#030712) with deep tactical navy (#07172c)
     - Electric Cyan (#00e5ff) & Sky Blue (#38bdf8) holographic accents
     - ZERO-BLUR anti-glare high contrast crisp rendering
     ========================================================================== */
  --bg-deep: transparent;
  --bg-core: transparent;
  --bg-surface: rgba(0, 229, 255, 0.03);
  --bg-pod: rgba(0, 229, 255, 0.02);
  --bg-pod-hover: rgba(0, 229, 255, 0.07);
  --bg-input: rgba(0, 229, 255, 0.03);

  /* Crisp Tactical HUD Borders & Glow Shadows */
  --border-organic: rgba(0, 229, 255, 0.2);
  --border-organic-hover: rgba(0, 229, 255, 0.55);
  --pod-glow: 0 0 0 1px rgba(0, 229, 255, 0.15), 0 0 15px rgba(0, 229, 255, 0.05);
  --pod-glow-hover: 0 0 0 1px rgba(0, 229, 255, 0.4), 0 0 24px rgba(0, 229, 255, 0.2);

  /* High-Contrast Soothing Typography (Anti-Glare) */
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-dim: #64748b;

  /* Electric Cyan Stark Matrix Accents */
  --neon-cyan: #00e5ff;
  --neon-cyan-glow: rgba(0, 229, 255, 0.45);
  --neon-sky: #38bdf8;
  --neon-blue: #0284c7;

  /* Aliased accents to maintain full backward compatibility */
  --bubble-pink: #00e5ff;
  --bubble-pink-glow: rgba(0, 229, 255, 0.45);
  --bubble-hot-pink: #38bdf8;
  --bubble-cyan: #00e5ff;
  --bubble-cyan-glow: rgba(0, 229, 255, 0.45);
  --bubble-grape: #38bdf8;
  --bubble-grape-glow: rgba(56, 189, 248, 0.35);
  --bubble-mint: #00f5a0;
  --bubble-yellow: #facc15;
  --bubble-danger: #ef4444;

  /* Legacy aliases for backward compatibility */
  --accent-cyan: var(--neon-cyan);
  --accent-amber: var(--neon-sky);
  --accent-emerald: var(--bubble-mint);
  --accent-danger: var(--bubble-danger);

  /* Layout Panel Resizing Variables */
  --sidebar-width: 268px;
  --sidebar-min-width: 180px;
  --sidebar-max-width: 650px;
  --rightbar-width: 360px;
  --rightbar-min-width: 280px;
  --rightbar-max-width: 950px;

  --font-stack: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 229, 255, 0.28) transparent;
}

/* Zero-Lag SwiftShader Guard: Neutralize Gaussian blur convolution globally */
*, *::before, *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ==========================================================================
   FUTURISTIC HUD ULTRA-SLIM SCROLLBAR (Zero White GTK Box / Anti-Jadul)
   ========================================================================== */
::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
  background: transparent !important;
}

::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
  background: transparent !important;
  margin: 4px !important;
}

::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
  background: rgba(0, 229, 255, 0.22) !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(0, 229, 255, 0.15) !important;
  transition: background 0.2s ease !important;
}

::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 229, 255, 0.65) !important;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.5) !important;
}

::-webkit-scrollbar-corner,
*::-webkit-scrollbar-corner {
  background: transparent !important;
}

::-webkit-scrollbar-button,
*::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* HOLOGRAPHIC TRANSLUCENT GLASS MATRIX */

body {
  background-color: #04060a !important;
  background-image: 
    radial-gradient(circle at 50% 50%, rgba(0, 229, 255, 0.09) 0%, transparent 68%),
    radial-gradient(circle at 80% 20%, rgba(127, 0, 255, 0.07) 0%, transparent 55%),
    linear-gradient(rgba(0, 229, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.02) 1px, transparent 1px) !important;
  background-size: 100% 100%, 100% 100%, 64px 64px, 64px 64px !important;
  color: var(--text-main);
  font-family: var(--font-stack);
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  user-select: none;
}

/* ==========================================================================
   CANVAS CORE LAYOUT SCAFFOLDING
   ========================================================================== */
.canvas-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: transparent !important;
  position: relative;
  z-index: 2;
}

.canvas-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
  padding: 12px 20px 16px 20px;
  gap: 16px;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  transition: all 0.3s ease;
}