/* =============================================================================
   FLOWORK OS — SOVEREIGN LAUNCHER STYLESHEET
   Co-authored-by: Flowork OS <agent@floworkos.com>
   ============================================================================= */

* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
    }

    html, body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-color: #04060a;
      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);
      background-size: 100% 100%, 100% 100%, 64px 64px, 64px 64px;
      color: #f1f5f9;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'JetBrains Mono', monospace;
    }

    /* Ambient Holographic Scanline Overlay */
    .scanline {
      position: fixed;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.2) 51%);
      background-size: 100% 4px;
      opacity: 0.35;
      z-index: 10;
    }

    /* Subtle Corner HUD Reticles */
    .hud-corner {
      position: fixed;
      width: 28px;
      height: 28px;
      pointer-events: none;
      z-index: 15;
      border: 1.5px solid rgba(0, 229, 255, 0.3);
    }
    .hud-corner.corner-tl { top: 16px; left: 16px; border-right: none; border-bottom: none; }
    .hud-corner.corner-tr { top: 16px; right: 16px; border-left: none; border-bottom: none; }
    .hud-corner.corner-bl { bottom: 16px; left: 16px; border-right: none; border-top: none; }
    .hud-corner.corner-br { bottom: 16px; right: 16px; border-left: none; border-top: none; }

    /* Top Subtle Telemetry Pill */
    .top-telemetry-pill {
      position: fixed;
      top: 22px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(0, 229, 255, 0.85);
      background: transparent;
      padding: 6px 24px;
      border-bottom: 1px solid rgba(0, 229, 255, 0.25);
      z-index: 20;
      pointer-events: none;
      text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
    }
    .pill-pulse {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #00e5ff;
      box-shadow: 0 0 10px #00e5ff;
      animation: pulseGlow 1.6s infinite alternate;
    }
    @keyframes pulseGlow {
      0% { opacity: 0.4; transform: scale(0.9); }
      100% { opacity: 1; transform: scale(1.2); box-shadow: 0 0 14px #00e5ff; }
    }

    /* =========================================================================
       TACTICAL HOLOGRAPHIC HUD WINGS (FRAMELESS, TRANSPARENT, ENLARGED 380px)
       ========================================================================= */
    .hud-wing-left,
    .hud-wing-right {
      position: fixed;
      top: 50%;
      transform: translateY(-50%);
      width: 380px;
      display: flex;
      flex-direction: column;
      gap: 32px;
      z-index: 15;
      pointer-events: none;
    }
    .hud-wing-left { left: 48px; }
    .hud-wing-right { right: 48px; }

    /* TACTICAL Frameless Hologram Container (ZERO BOX, ZERO BORDER) */
    .TACTICAL-widget {
      width: 380px;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      position: relative;
      display: flex;
      flex-direction: column;
    }

    /* Razor-sharp Holographic Header Line */
    .TACTICAL-header {
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(0, 229, 255, 0.25);
      padding-bottom: 4px;
      margin-bottom: 8px;
    }
    .TACTICAL-title {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.18em;
      color: #00e5ff;
      font-family: 'JetBrains Mono', monospace;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 8px;
      text-shadow: 0 0 12px rgba(0, 229, 255, 0.6);
    }
    .TACTICAL-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: 0.14em;
      font-family: 'JetBrains Mono', monospace;
      text-transform: uppercase;
    }
    .badge-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
    }
    .status-cyan { color: #00e5ff; text-shadow: 0 0 8px rgba(0, 229, 255, 0.8); }
    .status-cyan .badge-dot { background: #00e5ff; box-shadow: 0 0 8px #00e5ff; }
    .status-green { color: #34d399; text-shadow: 0 0 8px rgba(52, 211, 153, 0.8); }
    .status-green .badge-dot { background: #34d399; box-shadow: 0 0 8px #34d399; }
    .status-purple { color: #c084fc; text-shadow: 0 0 8px rgba(192, 132, 252, 0.8); }
    .status-purple .badge-dot { background: #c084fc; box-shadow: 0 0 8px #c084fc; }

    /* Holographic Sub-Footer Line */
    .TACTICAL-footer {
      width: 100%;
      height: 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid rgba(0, 229, 255, 0.18);
      margin-top: 8px;
      padding-top: 4px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.08em;
      color: rgba(148, 163, 184, 0.85);
      white-space: nowrap;
    }
    .TACTICAL-footer-3col {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      text-align: center;
    }
    .TACTICAL-footer-3col span:first-child { text-align: left; }
    .TACTICAL-footer-3col span:last-child { text-align: right; }

    .text-cyan { color: #00e5ff; text-shadow: 0 0 8px rgba(0, 229, 255, 0.5); }
    .text-green { color: #34d399; text-shadow: 0 0 8px rgba(52, 211, 153, 0.5); }
    .text-purple { color: #c084fc; text-shadow: 0 0 8px rgba(192, 132, 252, 0.5); }
    .text-amber { color: #fbbf24; text-shadow: 0 0 8px rgba(251, 191, 36, 0.5); }

    /* -------------------------------------------------------------------------
       WIDGET 1: LARGE TACTICAL TACTICAL RADAR (380px × 220px)
       ------------------------------------------------------------------------- */
    .radar-canvas-wrap {
      width: 380px;
      height: 220px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .radar-canvas {
      width: 380px;
      height: 220px;
      display: block;
    }

    /* -------------------------------------------------------------------------
       WIDGET 2: LARGE TACTICAL TELEMETRY FEED (380px × 210px)
       ------------------------------------------------------------------------- */
    .matrix-log-feed {
      width: 380px;
      height: 200px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-family: 'JetBrains Mono', monospace;
      overflow: hidden;
    }
    .matrix-log-line {
      height: 27px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 10.5px;
      letter-spacing: 0.05em;
      white-space: nowrap;
      overflow: hidden;
      border-bottom: 1px dotted rgba(0, 229, 255, 0.08);
    }
    .log-time {
      color: #64748b;
      font-size: 9.5px;
      flex-shrink: 0;
      width: 66px;
    }
    .log-tag {
      font-size: 9px;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: 3px;
      flex-shrink: 0;
      text-align: center;
      min-width: 34px;
      letter-spacing: 0.06em;
    }
    .log-tag.tag-sys { background: rgba(0, 229, 255, 0.12); color: #00e5ff; border: 1px solid rgba(0, 229, 255, 0.35); text-shadow: 0 0 6px #00e5ff; }
    .log-tag.tag-net { background: rgba(52, 211, 153, 0.12); color: #34d399; border: 1px solid rgba(52, 211, 153, 0.35); text-shadow: 0 0 6px #34d399; }
    .log-tag.tag-sec { background: rgba(192, 132, 252, 0.12); color: #c084fc; border: 1px solid rgba(192, 132, 252, 0.35); text-shadow: 0 0 6px #c084fc; }
    .log-tag.tag-eng { background: rgba(251, 191, 36, 0.12); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.35); text-shadow: 0 0 6px #fbbf24; }
    .log-tag.tag-rad { background: rgba(56, 189, 248, 0.12); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.35); text-shadow: 0 0 6px #38bdf8; }
    .log-tag.tag-ai  { background: rgba(244, 63, 94, 0.12); color: #f43f5e; border: 1px solid rgba(244, 63, 94, 0.35); text-shadow: 0 0 6px #f43f5e; }
    .log-msg {
      color: rgba(241, 245, 249, 0.9);
      text-overflow: ellipsis;
      overflow: hidden;
      flex: 1;
    }

    /* -------------------------------------------------------------------------
       WIDGET 3: LARGE TACTICAL QUANTUM TELEMETRY (380px)
       ------------------------------------------------------------------------- */
    .metrics-top-row {
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 4px 0 10px 0;
      border-bottom: 1px solid rgba(0, 229, 255, 0.1);
    }
    .arc-gauge-svg {
      transform: rotate(-90deg);
      flex-shrink: 0;
    }
    .gauge-track {
      fill: none;
      stroke: rgba(0, 229, 255, 0.12);
      stroke-width: 6;
    }
    .gauge-fill {
      fill: none;
      stroke: #00e5ff;
      stroke-width: 6;
      stroke-dasharray: 264;
      stroke-dashoffset: 26;
      filter: drop-shadow(0 0 8px #00e5ff);
      transition: stroke-dashoffset 0.6s ease;
    }
    .metrics-top-info {
      display: flex;
      flex-direction: column;
      gap: 4px;
      flex: 1;
    }
    .metrics-main-val {
      font-size: 24px;
      font-weight: 800;
      color: #00e5ff;
      letter-spacing: 0.06em;
      font-family: 'JetBrains Mono', monospace;
      line-height: 1.1;
      text-shadow: 0 0 14px rgba(0, 229, 255, 0.7);
    }
    .metrics-main-lbl {
      font-size: 9.5px;
      letter-spacing: 0.16em;
      color: rgba(148, 163, 184, 0.8);
      text-transform: uppercase;
      font-family: 'JetBrains Mono', monospace;
    }
    .metrics-bar-wrap {
      width: 100%;
      height: 4px;
      background: rgba(0, 229, 255, 0.15);
      border-radius: 2px;
      margin-top: 4px;
      overflow: hidden;
    }
    .metrics-bar-fill {
      height: 100%;
      width: 98.4%;
      background: linear-gradient(90deg, #00e5ff, #38bdf8);
      box-shadow: 0 0 8px #00e5ff;
    }

    .telemetry-kv-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 10px 0;
    }
    .telemetry-kv-row {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      font-family: 'JetBrains Mono', monospace;
      color: rgba(148, 163, 184, 0.85);
      letter-spacing: 0.05em;
      line-height: 18px;
      border-bottom: 1px dotted rgba(0, 229, 255, 0.06);
      padding-bottom: 2px;
    }
    .telemetry-kv-val {
      font-weight: 700;
      letter-spacing: 0.05em;
    }

    /* -------------------------------------------------------------------------
       WIDGET 4: LARGE TACTICAL ATTITUDE GYRO VECTOR (380px × 200px)
       ------------------------------------------------------------------------- */
    .vector-canvas-wrap {
      width: 380px;
      height: 190px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .vector-canvas {
      width: 380px;
      height: 190px;
      display: block;
    }

    /* =========================================================================
       BOUNDLESS & FRAMELESS FULL-STAGE VIEWPORT
       ========================================================================= */
    .stage-wrapper {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: 10;
    }

    /* Phase 1: Speaking 3D Stage (Entire Viewport) */
    #speaking-stage {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    #speaking-stage.fade-out {
      opacity: 0;
      transform: scale(0.98);
      pointer-events: none;
    }

    /* Boundless 3D Canvas Container */
    .mascot-3d-wrap {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      pointer-events: auto;
    }
    .mascot-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      outline: none;
      cursor: grab;
      background: transparent;
    }
    .mascot-canvas:active {
      cursor: grabbing;
    }

    /* Floating Vocal Dock at Bottom Center */
    .bottom-vocal-dock {
      position: absolute;
      bottom: 34px;
      left: 50%;
      transform: translateX(-50%);
      width: 90%;
      max-width: 820px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      z-index: 25;
      pointer-events: none;
    }

    /* Oscilloscope Voice Waveform */
    .waveform-container {
      width: 100%;
      max-width: 620px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .waveform-canvas {
      width: 100%;
      height: 100%;
      display: block;
    }

    /* Voice Subtitle / Transcript Box */
    .transcript-container {
      width: 100%;
      text-align: center;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 16px;
    }
    .transcript-text {
      font-size: 16px;
      line-height: 1.5;
      font-weight: 500;
      letter-spacing: 0.04em;
      color: #f1f5f9;
      text-shadow: 0 0 18px rgba(0, 229, 255, 0.65);
      font-style: italic;
      transition: opacity 0.3s ease;
    }

    /* Autoplay Click Prompt Overlay (subtle fail-safe) */
    .audio-gesture-prompt {
      position: fixed;
      bottom: 38px;
      left: 50%;
      transform: translateX(-50%);
      display: none;
      align-items: center;
      gap: 10px;
      font-size: 12px;
      letter-spacing: 0.15em;
      color: #00e5ff;
      background: transparent;
      border-bottom: 1px solid rgba(0, 229, 255, 0.5);
      padding: 8px 24px;
      cursor: pointer;
      z-index: 40;
      text-shadow: 0 0 12px #00e5ff;
      animation: pulseBtn 1.5s infinite alternate;
    }
    @keyframes pulseBtn {
      0% { opacity: 0.7; transform: translateX(-50%) scale(0.98); }
      100% { opacity: 1; transform: translateX(-50%) scale(1.02); text-shadow: 0 0 20px #00e5ff; }
    }

    /* =========================================================================
       Phase 2: Post-Speech TACTICAL Pure Transparent SSO Login Stage
       (ZERO BOX, ZERO BORDER, ZERO SHADOW - PURE HOLOGRAPHIC PROJECTION)
       ========================================================================= */
    #login-stage {
      display: none;
      opacity: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.95);
      width: 90%;
      max-width: 580px;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 30px 24px;
      background: transparent !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      border: none !important;
      box-shadow: none !important;
      transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
      z-index: 30;
      pointer-events: auto;
    }
    #login-stage.show {
      display: flex;
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }

    .login-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: #00e5ff;
      background: transparent;
      border-bottom: 1px solid rgba(0, 229, 255, 0.35);
      padding: 4px 16px;
      margin-bottom: 22px;
      text-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
    }

    .login-title {
      font-size: 28px;
      font-weight: 800;
      letter-spacing: 0.08em;
      color: #ffffff;
      margin-bottom: 14px;
      text-shadow: 0 0 24px rgba(0, 229, 255, 0.55), 0 0 60px rgba(0, 229, 255, 0.25);
    }

    .login-description {
      font-size: 14px;
      line-height: 1.65;
      color: rgba(203, 213, 225, 0.9);
      max-width: 480px;
      margin-bottom: 36px;
      text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
    }

    /* High-Voltage Holographic SSO Pill Button */
    .gate-btn-sso {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      max-width: 420px;
      padding: 18px 32px;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #030712;
      background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
      border: none;
      border-radius: 999px;
      cursor: pointer;
      box-shadow: 
        0 0 35px rgba(0, 242, 254, 0.65),
        0 0 70px rgba(0, 242, 254, 0.3),
        0 4px 16px rgba(0, 0, 0, 0.5);
      transition: all 0.25s ease;
      text-decoration: none;
    }
    .gate-btn-sso:hover {
      transform: translateY(-2px) scale(1.02);
      box-shadow: 
        0 0 50px rgba(0, 242, 254, 0.9),
        0 0 90px rgba(0, 242, 254, 0.45);
      filter: brightness(1.1);
    }
    .gate-btn-sso:active {
      transform: translateY(1px);
      box-shadow: 0 0 25px rgba(0, 242, 254, 0.4);
    }

    .login-status-line {
      margin-top: 26px;
      font-size: 11.5px;
      letter-spacing: 0.1em;
      color: rgba(148, 163, 184, 0.85);
      font-family: 'JetBrains Mono', monospace;
      min-height: 22px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .login-status-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #38bdf8;
      box-shadow: 0 0 10px #38bdf8;
    }

    .login-footer-note {
      margin-top: 36px;
      font-size: 10.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(148, 163, 184, 0.5);
      border-top: 1px solid rgba(0, 229, 255, 0.15);
      padding-top: 16px;
      width: 100%;
    }

    /* TACTICAL Skip Button */
    .btn-skip-monologue {
      position: fixed;
      top: 18px;
      right: 48px;
      z-index: 50;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 18px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(0, 229, 255, 0.9);
      background: rgba(0, 229, 255, 0.06);
      border: 1px solid rgba(0, 229, 255, 0.35);
      border-radius: 4px;
      cursor: pointer;
      backdrop-filter: blur(8px);
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
      box-shadow: 0 0 15px rgba(0, 229, 255, 0.1);
    }
    .btn-skip-monologue:hover {
      color: #ffffff;
      background: rgba(0, 229, 255, 0.22);
      border-color: #00e5ff;
      box-shadow: 0 0 25px rgba(0, 229, 255, 0.6);
      transform: translateY(-1px);
    }
    .btn-skip-monologue:active {
      transform: translateY(1px);
    }

    @media (max-width: 1200px) {
      .hud-wing-left, .hud-wing-right {
        display: none;
      }
    }