/*
===============================================================================
  GENESIS AI v2.0 - TEMA CLARO FUTURISTA (cinza prateado)
===============================================================================
  Visual: aço/platina escovado com acentos ciano elétrico, glassmorphism
  avançado, sombras multicamada para profundidade, bordas simétricas.
  Ativado em: body.light-theme
*/

/* ==========================================================================
   PALETA DE TOKENS (variáveis do tema claro)
   ========================================================================== */
body.light-theme{
  /* Fundos em gradação prateada */
  --lt-bg-abyss:   #4a5462;   /* profundidade (fundo do canvas) */
  --lt-bg-shadow:  #5c6874;   /* prateado escuro médio */
  --lt-bg-deep:    #aeb8c4;   /* base mais escura (bordas/sombras) */
  --lt-bg-main:    #c8d1da;   /* superfície padrão prateada */
  --lt-bg-surf:    #dde4eb;   /* painel */
  --lt-bg-elev:    #eef2f6;   /* elevação - cards */
  --lt-bg-card:    #ffffff;   /* carta / mensagens */

  /* Acentos ciano futurista */
  --lt-accent:     #0088c8;   /* primário */
  --lt-accent-2:   #00a8de;   /* secundário */
  --lt-accent-3:   #004870;   /* acento escuro (textos em ciano) */

  /* Texto */
  --lt-text:       #18222f;   /* principal (quase preto azulado) */
  --lt-text-dim:   #4a5664;   /* secundário */
  --lt-text-low:   #758595;   /* terciário (labels, placeholders) */

  /* Borda prateada consistente */
  --lt-border:     rgba(70, 95, 120, .22);
  --lt-border-hi:  rgba(0, 136, 200, .5);

  /* Sombras simétricas */
  --lt-shadow-sm:  0 1px 2px rgba(30, 45, 65, .08),
                   0 2px 6px rgba(30, 45, 65, .06);
  --lt-shadow-md:  0 2px 6px rgba(30, 45, 65, .1),
                   0 6px 16px rgba(30, 45, 65, .08);
  --lt-shadow-hi:  0 4px 12px rgba(30, 45, 65, .14),
                   0 12px 32px rgba(30, 45, 65, .1);
  --lt-inset:      inset 0 1px 0 rgba(255, 255, 255, .6),
                   inset 0 -1px 0 rgba(30, 45, 65, .05);
  --lt-glow:       0 0 0 1px rgba(0, 168, 222, .25),
                   0 0 14px rgba(0, 168, 222, .25);
}


/* ==========================================================================
   TOGGLE DOS ÍCONES (sol/lua)
   ========================================================================== */
.theme-icon-light{ display: none !important; }
body.light-theme .theme-icon-dark{ display: none !important; }
body.light-theme .theme-icon-light{ display: block !important; }


/* ==========================================================================
   BASE - Fundo prateado uniforme no mesmo tom dos menus
   O tree.js (canvas transparente) mostra exatamente a mesma cor dos painéis
   ========================================================================== */
body.light-theme{
  background: linear-gradient(
    180deg,
    #eef2f6 0%,      /* mesmo tom do topo dos menus */
    #dde4eb 100%     /* mesmo tom do fundo dos menus */
  );
  color: var(--lt-text);
}
/* Reflexos radiais ciano sutis + highlight prateado no centro (luz do canvas) */
body.light-theme::before{
  background:
    radial-gradient(circle at 15% 10%, rgba(0, 168, 222, .1), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(0, 136, 200, .08), transparent 50%),
    radial-gradient(ellipse 60% 55% at center, rgba(200, 215, 230, .18), transparent 70%);
}
/* Scanlines muito sutis - sensação de tela high-tech */
body.light-theme::after{
  background: repeating-linear-gradient(
    0deg,
    rgba(30, 45, 65, .015) 0,
    rgba(30, 45, 65, .015) 1px,
    transparent 1px, transparent 4px
  );
}
/* Grid hexagonal-tecnológico em tom prateado escuro */
body.light-theme .grid-bg{
  background-image:
    linear-gradient(rgba(70, 95, 120, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 95, 120, .06) 1px, transparent 1px);
  opacity: 0.6;
}


/* ==========================================================================
   HUDs - painéis com "vidro espelhado" + glassmorphism
   Todos com mesma receita visual (simetria)
   ========================================================================== */
body.light-theme .hud-top,
body.light-theme .hud-left,
body.light-theme .hud-right,
body.light-theme .hud-bottom,
body.light-theme .mobile-header{
  background: linear-gradient(
    180deg,
    rgba(238, 242, 246, .92) 0%,
    rgba(221, 228, 235, .88) 100%
  );
  border-color: var(--lt-border);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  box-shadow: var(--lt-shadow-md), var(--lt-inset);
}
/* Gradiente lateral específico para painéis laterais */
body.light-theme .hud-left{
  background: linear-gradient(
    90deg,
    rgba(238, 242, 246, .94) 0%,
    rgba(221, 228, 235, .85) 100%
  );
}
body.light-theme .hud-right{
  background: linear-gradient(
    -90deg,
    rgba(238, 242, 246, .94) 0%,
    rgba(221, 228, 235, .85) 100%
  );
}


/* ==========================================================================
   TEXTO - hierarquia consistente
   ========================================================================== */
/* No tema claro a logo "Genesis" fica em PRETO sobre o fundo cinza-prateado,
   sem placa, sem moldura, sem brilho - estilo equivalente ao tema escuro,
   apenas com a inversão de cor de texto. */
body.light-theme .logo,
body.light-theme .m-logo,
body.light-theme .drawer-head .logo{
  background: transparent;
  padding: 0;
  border: none;
  box-shadow: none;
  color: #000;
}
body.light-theme .logo .logo-text,
body.light-theme .m-logo .logo-text,
body.light-theme .drawer-head .logo .logo-text{
  color: #000;
}
body.light-theme .logo span,
body.light-theme .m-logo span{
  color: #000;
}

/* Ícone IA no tema claro - borda preta para casar com o texto Genesis preto */
body.light-theme .logo-icon{
  border-color: #000;
  background: #fff;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
}

body.light-theme .hud-title{
  color: var(--lt-accent-3);
  border-bottom-color: var(--lt-border);
  letter-spacing: 3px;
}

body.light-theme .clock{
  color: var(--lt-accent-3);
  text-shadow: 0 0 4px rgba(0, 168, 222, .35);
}
body.light-theme .date-info{
  color: var(--lt-text-dim);
}

body.light-theme .badge span,
body.light-theme .m-status{
  color: var(--lt-text);
}

body.light-theme .ai-status-text{
  color: var(--lt-accent-3);
  text-shadow: 0 0 4px rgba(0, 168, 222, .25);
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(238,242,246,.75));
  border-color: var(--lt-border-hi);
  backdrop-filter: blur(10px);
  box-shadow: var(--lt-shadow-sm);
}


/* ==========================================================================
   MÓDULOS E BOTÕES DE MENU (simétricos entre si)
   ========================================================================== */
body.light-theme .module-btn{
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(240,244,248,.75));
  border-color: var(--lt-border);
  color: var(--lt-text);
  box-shadow: var(--lt-shadow-sm);
  transition: all .22s ease;
}
body.light-theme .module-btn:hover{
  background: linear-gradient(180deg, rgba(0,168,222,.12), rgba(0,136,200,.08));
  border-color: var(--lt-border-hi);
  box-shadow: var(--lt-shadow-md), 0 0 12px rgba(0, 168, 222, .18);
  transform: translateX(4px);
}
body.light-theme .module-btn.active{
  background: linear-gradient(180deg, rgba(0,168,222,.2), rgba(0,136,200,.14));
  border-color: var(--lt-accent);
  box-shadow: var(--lt-glow);
}

body.light-theme .mod-icon{
  stroke: var(--lt-accent);
  filter: drop-shadow(0 0 2px rgba(0, 168, 222, .4));
}
body.light-theme .module-btn:hover .mod-icon{
  stroke: var(--lt-accent-2);
  filter: drop-shadow(0 0 6px rgba(0, 168, 222, .8));
}
body.light-theme .section-icon{
  stroke: var(--lt-accent);
  filter: drop-shadow(0 0 2px rgba(0, 168, 222, .35));
}


/* ==========================================================================
   CHAT - mensagens em fundo branco metálico
   ========================================================================== */
body.light-theme .msg{
  backdrop-filter: blur(6px);
  box-shadow: var(--lt-shadow-sm);
}
body.light-theme .msg.user{
  background: linear-gradient(180deg, #ffffff, #f4f7fa);
  border-color: var(--lt-border-hi);
  color: var(--lt-text);
  box-shadow: var(--lt-shadow-md), 0 0 0 1px rgba(0, 168, 222, .08);
}
body.light-theme .msg.ai{
  background: linear-gradient(180deg, #eaf4fb, #dfedf6);
  border-color: var(--lt-border-hi);
  color: var(--lt-text);
  box-shadow: var(--lt-shadow-md), 0 0 0 1px rgba(0, 168, 222, .15);
}
body.light-theme .msg.system{
  background: linear-gradient(180deg, rgba(255, 210, 130, .22), rgba(255, 190, 80, .15));
  border-color: rgba(200, 130, 0, .4);
  color: #6b4200;
  box-shadow: var(--lt-shadow-sm);
}


/* ==========================================================================
   INPUT + BOTÕES DE CONTROLE (microfone, anexar, enviar, stop)
   ========================================================================== */
body.light-theme #cmdInput{
  background: linear-gradient(180deg, #ffffff, #f4f7fa);
  color: var(--lt-text);
  border-color: var(--lt-border-hi);
  box-shadow: var(--lt-shadow-sm), var(--lt-inset);
}
body.light-theme #cmdInput:focus{
  border-color: var(--lt-accent);
  box-shadow: var(--lt-shadow-md), 0 0 14px rgba(0, 168, 222, .35);
}
body.light-theme #cmdInput::placeholder{
  color: var(--lt-text-low);
}

body.light-theme .btn-ctrl{
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(228,236,243,.7));
  border-color: var(--lt-border-hi);
  color: var(--lt-accent-3);
  box-shadow: var(--lt-shadow-sm), var(--lt-inset);
}
body.light-theme .btn-ctrl:hover{
  background: linear-gradient(180deg, rgba(0,168,222,.2), rgba(0,136,200,.1));
  box-shadow: var(--lt-shadow-md), 0 0 14px rgba(0, 168, 222, .45);
  color: var(--lt-accent-3);
}
body.light-theme .btn-send{
  background: linear-gradient(180deg, rgba(0, 168, 222, .3), rgba(0, 136, 200, .18));
  color: var(--lt-accent-3);
  border-color: var(--lt-accent);
  box-shadow: var(--lt-shadow-md), inset 0 1px 0 rgba(255,255,255,.5);
}
body.light-theme .btn-send:hover{
  background: linear-gradient(180deg, rgba(0, 168, 222, .45), rgba(0, 136, 200, .3));
}
body.light-theme .hud-icon{
  stroke: var(--lt-accent);
  filter: drop-shadow(0 0 3px rgba(0, 168, 222, .55));
}
body.light-theme .btn-ctrl:hover .hud-icon{
  stroke: var(--lt-accent-2);
  filter: drop-shadow(0 0 6px rgba(0, 168, 222, .9));
}

body.light-theme .m-fullscreen-btn,
body.light-theme .hud-collapse-btn{
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(228,236,243,.7));
  border-color: var(--lt-border-hi);
  color: var(--lt-accent-3);
  box-shadow: var(--lt-shadow-sm), var(--lt-inset);
}
body.light-theme .m-fullscreen-btn:hover,
body.light-theme .hud-collapse-btn:hover{
  background: linear-gradient(180deg, rgba(0,168,222,.2), rgba(0,136,200,.1));
  box-shadow: var(--lt-shadow-md), 0 0 10px rgba(0, 168, 222, .4);
}


/* ==========================================================================
   MÉTRICAS, ALERTAS, LOG, HISTÓRICO (simetria entre blocos)
   ========================================================================== */
body.light-theme .metric-lbl{
  color: var(--lt-text-dim);
}
body.light-theme .metric-bar{
  background: linear-gradient(180deg, rgba(70,95,120,.08), rgba(70,95,120,.04));
  border-color: var(--lt-border);
  box-shadow: var(--lt-inset);
}
body.light-theme .metric-fill{
  background: linear-gradient(90deg, var(--lt-accent), var(--lt-accent-2));
  box-shadow: 0 0 6px rgba(0, 168, 222, .5);
}

body.light-theme .alert-item{
  background: linear-gradient(180deg, rgba(0,168,222,.08), rgba(0,136,200,.04));
  border-left-color: var(--lt-accent);
  color: var(--lt-text);
  box-shadow: var(--lt-shadow-sm);
}
body.light-theme .alert-item.warning{
  background: linear-gradient(180deg, rgba(255,180,0,.15), rgba(255,140,0,.08));
  border-left-color: #c87a00;
  color: #7a4a00;
}
body.light-theme .alert-item.danger{
  background: linear-gradient(180deg, rgba(255,0,85,.1), rgba(200,0,60,.05));
  border-left-color: #c00040;
  color: #a00033;
}

body.light-theme .log-box{
  background: linear-gradient(180deg, #ffffff, #f4f7fa);
  color: var(--lt-text);
  border-color: var(--lt-border);
  box-shadow: var(--lt-shadow-sm), var(--lt-inset);
}

body.light-theme .hist-search{
  background: linear-gradient(180deg, #ffffff, #f4f7fa);
  color: var(--lt-text);
  border-color: var(--lt-border-hi);
  box-shadow: var(--lt-shadow-sm), var(--lt-inset);
}
body.light-theme .hist-search::placeholder{
  color: var(--lt-text-low);
}
body.light-theme .hist-new-btn{
  color: var(--lt-accent);
  border-color: var(--lt-border-hi);
  background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(240,244,248,.7));
}
body.light-theme .hist-list{
  background: linear-gradient(180deg, rgba(240,244,248,.7), rgba(228,236,243,.55));
  border-color: var(--lt-border);
  box-shadow: var(--lt-inset);
}
body.light-theme .hist-item{
  background: linear-gradient(180deg, #ffffff, #f4f7fa);
  border-color: var(--lt-border);
  box-shadow: var(--lt-shadow-sm);
}
body.light-theme .hist-item:hover{
  background: linear-gradient(180deg, rgba(0,168,222,.1), rgba(0,136,200,.05));
  border-color: var(--lt-border-hi);
  box-shadow: var(--lt-shadow-md), 0 0 8px rgba(0, 168, 222, .2);
}
body.light-theme .hist-title{ color: var(--lt-text); }
body.light-theme .hist-date,
body.light-theme .hist-count{ color: var(--lt-accent-3); }
body.light-theme .hist-empty{
  color: var(--lt-text-low);
  border-color: var(--lt-border);
}


/* ==========================================================================
   DRAWER (menu sanduíche mobile + modos widget/iframe)
   ========================================================================== */
body.light-theme .drawer{
  background: linear-gradient(
    180deg,
    rgba(238, 242, 246, .97) 0%,
    rgba(221, 228, 235, .94) 100%
  );
  border-right-color: var(--lt-border);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: 4px 0 40px rgba(30, 45, 65, .18);
}
body.light-theme .drawer-head .logo,
body.light-theme .drawer-section-title{
  color: var(--lt-accent-3);
}
body.light-theme .drawer-close{
  color: var(--lt-accent-3);
  border-color: var(--lt-border-hi);
  background: rgba(255,255,255,.6);
}
body.light-theme .drawer-profile{
  background: linear-gradient(135deg, rgba(0, 168, 222, .1), rgba(0, 136, 200, .05));
  border-color: var(--lt-border-hi);
  box-shadow: var(--lt-shadow-sm);
}
body.light-theme .drawer-profile .name{ color: var(--lt-text); }
body.light-theme .drawer-profile .tier{ color: var(--lt-accent-3); }
body.light-theme .drawer-item{
  color: var(--lt-text);
}
body.light-theme .drawer-item:active,
body.light-theme .drawer-item:hover{
  background: rgba(0, 168, 222, .1);
  border-color: var(--lt-border-hi);
}
body.light-theme .drawer-item .d-icon{
  background: linear-gradient(180deg, rgba(0,168,222,.08), rgba(0,136,200,.04));
  box-shadow: var(--lt-inset);
}
body.light-theme .drawer-sub-item{
  color: var(--lt-text-dim);
}
body.light-theme .drawer-sub-item:hover,
body.light-theme .drawer-sub-item:active{
  background: rgba(0, 168, 222, .08);
  color: var(--lt-text);
}
/* Drawer footer no tema claro - sem placa escura, mantém só o divisor superior */
body.light-theme .drawer-foot{
  color: var(--lt-text-low);
  border-top-color: var(--lt-border);
  background: transparent;
  padding: 14px 12px;
  border-radius: 0;
  margin: 0;
  box-shadow: none;
  border: none;
  border-top: 1px solid var(--lt-border);
}
body.light-theme .drawer-foot-logo,
body.light-theme .drawer-foot-logo.logo-text{
  filter: none;
  opacity: 1;
  color: #000;
}
body.light-theme .drawer-foot-version{
  color: rgba(0, 80, 120, 0.7);
  text-shadow: none;
}


/* ==========================================================================
   MODAL DE CONFIGURAÇÕES
   ========================================================================== */
body.light-theme .modal{
  background: rgba(200, 209, 218, .75);
  backdrop-filter: blur(10px);
}
body.light-theme .modal-box{
  background: linear-gradient(180deg, #ffffff, #eef2f6);
  border-color: var(--lt-accent);
  box-shadow: var(--lt-shadow-hi), 0 0 0 1px rgba(0, 168, 222, .15);
}
body.light-theme .modal-title{
  color: var(--lt-accent-3);
  border-bottom-color: var(--lt-border);
}
body.light-theme .modal-row label{
  color: var(--lt-text);
}
body.light-theme .modal-row input[type=text],
body.light-theme .modal-row input[type=file]{
  background: linear-gradient(180deg, #ffffff, #f4f7fa);
  color: var(--lt-text);
  border-color: var(--lt-border-hi);
  box-shadow: var(--lt-inset);
}
body.light-theme .modal-btn{
  background: linear-gradient(180deg, rgba(0,168,222,.12), rgba(0,136,200,.06));
  color: var(--lt-accent-3);
  border-color: var(--lt-accent);
  box-shadow: var(--lt-shadow-sm);
}
body.light-theme .modal-btn.ok{
  background: linear-gradient(180deg, var(--lt-accent-2), var(--lt-accent));
  color: #ffffff;
  box-shadow: var(--lt-shadow-md), inset 0 1px 0 rgba(255,255,255,.3);
}
body.light-theme .modal-btn:hover{
  box-shadow: var(--lt-shadow-md), 0 0 12px rgba(0, 168, 222, .35);
}
body.light-theme .modal-foot{
  border-top-color: var(--lt-border);
}


/* ==========================================================================
   NOTIFICAÇÕES
   ========================================================================== */
body.light-theme .notif{
  background: linear-gradient(180deg, #ffffff, #eef2f6);
  border-color: var(--lt-border-hi);
  color: var(--lt-text);
  box-shadow: var(--lt-shadow-hi), 0 0 0 1px rgba(0, 168, 222, .15);
}


/* ==========================================================================
   SHARE SCREEN (janela de compartilhamento)
   ========================================================================== */
body.light-theme .share-screen{
  border-color: var(--lt-accent);
  box-shadow: var(--lt-shadow-hi), 0 0 20px rgba(0, 168, 222, .3);
}
body.light-theme .share-header{
  background: linear-gradient(180deg, rgba(0,168,222,.15), rgba(0,136,200,.08));
  border-bottom-color: var(--lt-border-hi);
}
body.light-theme .share-title{
  color: var(--lt-accent-3);
}
body.light-theme .share-btn{
  background: rgba(255,255,255,.5);
  border-color: var(--lt-border-hi);
  color: var(--lt-accent-3);
}


/* ==========================================================================
   THREE.JS / ESFERA - Sombra prateada suave para destaque
   ========================================================================== */
body.light-theme #three-canvas{
  filter: drop-shadow(0 8px 24px rgba(30, 45, 65, 0.2))
          drop-shadow(0 2px 6px rgba(30, 45, 65, 0.12));
}


/* ==========================================================================
   SCROLLBARS - tom prateado
   ========================================================================== */
body.light-theme ::-webkit-scrollbar-track{
  background: rgba(70, 95, 120, .05);
}
body.light-theme ::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(70,95,120,.35), rgba(70,95,120,.2));
  border-radius: 3px;
}
body.light-theme ::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(0,136,200,.5), rgba(0,136,200,.3));
}


/* ==========================================================================
   BOTTOM NAV (mobile)
   ========================================================================== */
body.light-theme .bottom-nav{
  background: linear-gradient(
    0deg,
    rgba(238, 242, 246, .97) 0%,
    rgba(221, 228, 235, .88) 100%
  );
  border-top-color: var(--lt-border);
  backdrop-filter: blur(20px);
}
body.light-theme .bottom-nav-item{
  color: var(--lt-text-dim);
}
body.light-theme .bottom-nav-item.active{
  color: var(--lt-accent);
}
body.light-theme .bottom-nav-item.primary .bn-icon{
  background: linear-gradient(135deg, var(--lt-accent-2), var(--lt-accent));
  color: #ffffff;
  box-shadow: var(--lt-shadow-md), 0 4px 12px rgba(0, 168, 222, .4);
}


/* ==========================================================================
   INSTALL BANNER + iOS SHEET
   ========================================================================== */
body.light-theme .install-banner,
body.light-theme .ios-sheet{
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(238,242,246,.92));
  border-color: var(--lt-border-hi);
  box-shadow: var(--lt-shadow-hi);
}
body.light-theme .install-banner .ib-title,
body.light-theme .ios-sheet h3{
  color: var(--lt-accent-3);
}
body.light-theme .install-banner .ib-desc,
body.light-theme .ios-sheet .sub{
  color: var(--lt-text-dim);
}
body.light-theme .ios-step{
  background: rgba(0, 168, 222, .06);
  border-color: var(--lt-border);
}
body.light-theme .ios-step-text strong{ color: var(--lt-text); }
body.light-theme .ios-step-text span{ color: var(--lt-text-dim); }