/* =========================
   Base + Variáveis
   ========================= */
:root{
  --topbar-h: 44px;
  --bottombar-h: 40px;
  
  /* Otimizações de performance */
  --mobile-breakpoint: 720px;
  --mobile-reduced-animations: true;

  /* Modern (default) */
  --modern-bg: #0b0e12;
  --modern-panel: #12161d;
  --modern-panel-2: #0f1318;
  --modern-accent: #ff6a00;
  --modern-accent-2: #ff9a3c;
  --modern-text: #ffffff;
  --modern-muted: #a6b0bf;
  --modern-border: #1f2630;

  /* Win98/ME */
  --win-bg: #008080;          /* teal */
  --win-panel: #c0c0c0;
  --win-panel-2: #d4d0c8;
  --win-border-dark: #404040;
  --win-border-mid: #808080;
  --win-border-light: #ffffff;
  --win-text: #000000;
  --win-link: #0000ee;

  /* Shared */
  --shadow-strong: 0 10px 24px rgba(0,0,0,.35);
  --shadow-soft: 0 6px 16px rgba(0,0,0,.18);
  --radius: 10px;
  --gap: 12px;
  --button-px: 12px;
  --icon-size: 18px; /* tamanho uniforme dos ícones dos botões */
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--modern-bg);
  color: var(--modern-text);
  /* Otimizações de performance */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Wallpaper (atrás de tudo) + scrim */
.wallpaper{
  position:fixed; inset:0;
  background:
    radial-gradient(1200px 1200px at 70% 20%, rgba(255,106,0,.18), transparent 60%),
    radial-gradient(1200px 1200px at 20% 80%, rgba(0,194,255,.14), transparent 60%),
    var(--modern-bg);
  z-index:-2;
  
  /* Otimizações de performance */
  will-change: transform;
  transform: translateZ(0);
}
.scrim{ position:fixed; inset:0; pointer-events:none; z-index:-1; }

/* Waves (inserido por waves.js) */
.waves{
  position:fixed; inset:0; z-index:0;
}
.waves-canvas{ width:100%; height:100%; display:block; }

/* Desktop e camadas */
.desktop{ position:relative; z-index:10; }

/* =========================
   Loader — minimalista
   ========================= */
#preloader{
  position:fixed; inset:0;
  display:none; /* Oculto por padrão */
  place-items:center;
  background:rgba(0,0,0,.7);
  z-index:9999;
  transition:opacity .25s ease;
  opacity: 0; /* Começar transparente */
  
  /* Otimizações para mobile */
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  will-change: opacity;
}

#preloader.show{
  display: grid; /* Mostrar quando necessário */
  opacity: 1; /* Fade in */
}
.preloader-inner{ display:grid; gap:16px; place-items:center; }
.spinner{
  width:36px; height:36px; border-radius:50%;
  border:3px solid rgba(255,255,255,.25);
  border-top-color:#fff; animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.lang-chooser{
  background:var(--modern-panel); color:var(--modern-text);
  padding:16px 18px; border-radius:10px;
  border:1px solid var(--modern-border);
  box-shadow:var(--shadow-soft);
  min-width: 320px;
  text-align: center;
}
.lang-title{ font-weight:600; margin-bottom:8px; }
.lang-subtitle{ 
  font-size:14px; 
  opacity:0.8; 
  margin-bottom:16px; 
  text-align:center;
  line-height:1.4;
}
.lang-buttons{ display:flex; gap:10px; justify-content:center; }
.btn-rect{
  appearance:none; border:1px solid var(--modern-border); cursor:pointer;
  padding:10px 14px; border-radius:8px;
  background: var(--modern-panel-2);
  color: var(--modern-text);
  font-weight:600;
}
.btn-rect:hover{ background:#121821; }
.btn-rect:active{ transform:translateY(1px); }

/* =========================
   Taskbars
   ========================= */
.taskbar{
  position:fixed; left:0; right:0;
  display:flex; align-items:center; gap:8px;
  padding:6px 8px;
  z-index:50;
  flex-wrap: nowrap;
  
  /* Otimizações para mobile */
  will-change: transform;
  transform: translateZ(0);
}
.taskbar-top{
  top:0; height:var(--topbar-h);
  background:rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.taskbar-bottom{
  bottom:0; height:var(--bottombar-h);
  background:rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  border-top:1px solid rgba(255,255,255,.08);
}
.tabs{ display:flex; gap:6px; align-items:center; overflow:auto hidden; }
.task-button{
  appearance:none; border:none; cursor:pointer;
  padding:8px 12px; border-radius:8px;
  background:var(--modern-panel);
  border:1px solid var(--modern-border);
  color:var(--modern-text);
  
  /* Otimizações para touch */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease;
}

.task-button:hover{
  background: rgba(255,255,255,0.05);
}
.task-button:active{ transform:translateY(1px); }
.mobile-only{ display:none; }

/* Now Playing (top) */
.now-playing{
  margin-left:auto; display:flex; align-items:center; gap:8px;
  font-size:14px;
  color:var(--modern-text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:min(48vw, 560px);
  cursor:pointer;
}
.np-label{ opacity:.7; }

/* Menu colapsado (hambúrguer) */
.mobile-menu{
  position:fixed; top:var(--topbar-h); left:8px; right:8px;
  display:flex; flex-direction:column; gap:6px;
  padding:8px; background:var(--modern-panel);
  border:1px solid var(--modern-border); border-radius:8px;
  box-shadow:var(--shadow-soft);
  z-index:60;
  
  /* Otimizações para mobile */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  will-change: transform, opacity;
}
.mobile-menu[aria-hidden="true"]{ display:none; }
.menu-item{
  appearance:none; border:none; cursor:pointer;
  padding:10px 12px; border-radius:8px;
  background:var(--modern-panel-2);
  border:1px solid var(--modern-border);
  color:var(--modern-text);
  text-align:left;
  
  /* Otimizações para touch */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease;
}

.menu-item:hover,
.menu-item:active{
  background: rgba(255,255,255,0.05);
}

/* =========================
   Janelas
   ========================= */
.win{
  position:absolute;
  width:min(760px, 94vw);
  background:var(--modern-panel);
  border:1px solid var(--modern-border);
  border-radius:12px;
  box-shadow:var(--shadow-strong);
  overflow:hidden;
  color:var(--modern-text);

  /* novo: estrutura flex para conteúdo rolar sempre */
  display:flex;
  flex-direction:column;
  
  /* Otimizações de performance */
  will-change: transform;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.win.hidden{ display:none; }
.win.active{ outline:1px solid rgba(255,255,255,.16); }

.titlebar{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:10px 10px;
  background:var(--modern-panel-2);
  border-bottom:1px solid var(--modern-border);
  user-select:none; cursor:move;
}
.title{ font-weight:600; }
.window-controls{ display:flex; gap:6px; }
.ctl{
  width:28px; height:28px; display:grid; place-items:center;
  border-radius:6px; border:1px solid var(--modern-border);
  background:var(--modern-panel);
  color:var(--modern-text); cursor:pointer;
}
.ctl:active{ transform:translateY(1px); }

/* Conteúdo da janela: agora rola sempre dentro do flex */
.content{
  padding:14px;
  overflow:auto;
  flex:1;
  min-height:0; /* necessário para overflow funcionar dentro de flex */
}

/* About layout */
.about-layout{
  display:grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap:18px; align-items:start;
}
.about-photo{
  width:100%; height:auto; aspect-ratio: 3 / 4;
  object-fit: cover; border-radius:12px;
  border:1px solid var(--modern-border);
  box-shadow: var(--shadow-soft);
}
.about-copy{ min-width: 0; }
.about-copy p{ margin:0 0 12px; line-height:1.6; }

/* Resize handle apenas no canto inferior direito */
.resize-handle.br{
  position:absolute; width:14px; height:14px; right:3px; bottom:3px;
  cursor:nwse-resize; opacity:.6;
  background:conic-gradient(from 45deg, transparent 0 75%, rgba(255,255,255,.35) 75% 100%);
  border-radius:2px;
}
body.is-dragging, body.is-resizing{ cursor:grabbing; }
body.is-resizing *{ user-select:none !important; }

/* =========================
   Player (fixo e compacto)
   ========================= */
#win-player{
  width: 520px !important;
  height: 300px !important;
  
  /* Otimizações para mobile */
  touch-action: manipulation;
}
.player{ display:flex; flex-direction:column; gap:10px; }

.row.seek{ padding-top:4px; }
.seekbar{
  width:100%;
  accent-color: var(--modern-accent);
  background:transparent;
  
  /* Otimizações para mobile */
  touch-action: manipulation;
  -webkit-appearance: none;
  height: 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.1);
}

.seekbar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--modern-accent);
  cursor: pointer;
  border: none;
}

.seekbar::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--modern-accent);
  cursor: pointer;
  border: none;
}

.time-line{
  display:flex; align-items:center; gap:8px; margin-top:-4px;
  font-variant-numeric: tabular-nums;
  color:var(--modern-text);
}
.time-line .spacer{ flex:1; }
.time{ opacity:.9; font-weight:600; }

.np-line{
  display:flex; align-items:center; gap:10px; flex-wrap:nowrap;
  min-height:28px;
}
.np-line .np-label{ opacity:.8; }
.np-line .track{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  flex:1;
}
.speaker{ min-width:36px; }

.controls{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-top:2px;
}
.ctrls{ display:flex; align-items:center; gap:8px; }
.btn-rect.icon{
  appearance:none; border:none; cursor:pointer;
  display:grid; place-items:center;
  width:40px; height:40px; border-radius:10px;
  background:var(--modern-panel-2);
  border:1px solid var(--modern-border);
  color:var(--modern-text);
  font-size: var(--icon-size);
  line-height:1;
  
  /* Otimizações para touch */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s ease;
}
.btn-rect.icon:active{ transform:translateY(1px); }

/* ícones específicos */
#btnStop{ font-size: var(--icon-size); }
#btnPlay,#btnPause,#btnPrev,#btnNext{ font-size: var(--icon-size); }
#btnMute{ font-size: 16px; }
.speaker-on{ color: var(--modern-text); }
.speaker-off{ color: #b0b0b0; }

/* VU */
.vu{ display:flex; align-items:flex-end; gap:4px; height:40px; }
.vu .bar{
  width:6px; height:8px; border-radius:2px;
  background: linear-gradient(180deg, var(--modern-accent-2), var(--modern-accent));
  transform-origin: bottom;
  scale: 1 calc(var(--l, .15));
}

/* =========================
   Listas de conteúdo
   ========================= */
.list{ display:grid; gap:10px; }
.item{ background:rgba(255,255,255,.03); border:1px solid var(--modern-border); padding:10px 12px; border-radius:10px; }
.item .muted{ color:var(--modern-muted); }

/* =========================
   Barra inferior — controlos, idioma/tema, relógio, atalhos
   ========================= */
.taskbar-bottom{ display:flex; align-items:center; }
.spacer{ flex:1; }
.task-controls{
  margin-left:auto;
  display:flex; align-items:center; gap:8px;
  white-space:nowrap;
}
.theme-select, .lang-select{
  height:30px; border-radius:8px; padding:0 10px;
  background:var(--modern-panel); color:var(--modern-text);
  border:1px solid var(--modern-border);
}

.reset-lang-btn{
  width:30px; height:30px; border-radius:8px; padding:0;
  background:var(--modern-panel); color:var(--modern-text);
  border:1px solid var(--modern-border);
  cursor:pointer; font-size:14px; display:grid; place-items:center;
  transition: background-color 0.15s ease;
}

.reset-lang-btn:hover{
  background: rgba(255,255,255,0.05);
}

.reset-lang-btn:active{
  transform: translateY(1px);
}
.task-clock{ color:var(--modern-text); opacity:.8; min-width:54px; text-align:right; }

.kbd-hints{
  color:var(--modern-text);
  opacity:.8;
  font-size:12px;
  background:transparent;
  padding:0 6px;
  border-radius:6px;
  white-space:nowrap;
  max-width:60vw; overflow:hidden; text-overflow:ellipsis;
}

/* =========================
   Tema WIN98/ME
   ========================= */
body:not(.theme-modern){
  background: var(--win-bg);
  color: var(--win-text);
}
body:not(.theme-modern) .wallpaper{
  background: var(--win-bg);
}
body:not(.theme-modern) .taskbar-top,
body:not(.theme-modern) .taskbar-bottom{
  background: #c0c0c0;
  border-color: var(--win-border-mid);
  box-shadow: inset 0 1px 0 var(--win-border-light),
              inset 0 -1px 0 var(--win-border-dark);
  backdrop-filter:none;
}
body:not(.theme-modern) .tabs .task-button,
body:not(.theme-modern) .menu-item,
body:not(.theme-modern) .task-button,
body:not(.theme-modern) .theme-select,
body:not(.theme-modern) .lang-select,
body:not(.theme-modern) .reset-lang-btn{
  background: var(--win-panel);
  color: var(--win-text);
  border:1px solid var(--win-border-mid);
  box-shadow: inset 1px 1px 0 var(--win-border-light),
              inset -1px -1px 0 var(--win-border-dark);
  border-radius:3px;
}
body:not(.theme-modern) .mobile-menu{
  background: var(--win-panel);
  border:1px solid var(--win-border-mid);
  box-shadow: 4px 4px 0 rgba(0,0,0,.15);
  border-radius:4px;
}

/* Janelas estilo Win98 */
body:not(.theme-modern) .win{
  background: var(--win-panel-2);
  color: var(--win-text);
  border:1px solid var(--win-border-mid);
  border-radius:4px;
  box-shadow: 4px 4px 0 rgba(0,0,0,.25);
}
body:not(.theme-modern) .titlebar{
  background: linear-gradient(#000080, #0000aa);
  color:#fff; border-bottom:1px solid #000053;
  cursor:move;
}
body:not(.theme-modern) .title{ font-weight:700; }
body:not(.theme-modern) .ctl{
  background: var(--win-panel);
  color: #000;
  border:1px solid var(--win-border-mid);
  box-shadow: inset 1px 1px 0 var(--win-border-light),
              inset -1px -1px 0 var(--win-border-dark);
  border-radius:3px;
}

/* Player em Win98 */
body:not(.theme-modern) #win-player{
  width: 520px !important;
  height: 300px !important;
}
body:not(.theme-modern) .player .btn-rect.icon{
  background: var(--win-panel);
  color: var(--win-text);
  border:1px solid var(--win-border-mid);
  box-shadow: inset 1px 1px 0 var(--win-border-light),
              inset -1px -1px 0 var(--win-border-dark);
  border-radius:3px;
  font-size: var(--icon-size);
}
body:not(.theme-modern) .seekbar{ accent-color:#0000aa; }
body:not(.theme-modern) .np-line .np-label{ color:#000; opacity:1; }
body:not(.theme-modern) .vu .bar{
  background: linear-gradient(180deg, #06d6a0, #118ab2);
}

/* Now Playing (top) no Win98 */
body:not(.theme-modern) .now-playing{
  color:#000; background:transparent;
}

/* KBD hints estilo por tema */
body:not(.theme-modern) .kbd-hints{
  color:#000;
  opacity:1;
}

/* Otimizações para mobile no tema Win98 */
@media (max-width: 720px){
  body:not(.theme-modern) .win{
    box-shadow: 2px 2px 0 rgba(0,0,0,.2);
  }
  
  body:not(.theme-modern) .taskbar{
    backdrop-filter: none;
    box-shadow: inset 0 1px 0 var(--win-border-light),
                inset 0 -1px 0 var(--win-border-dark);
  }
  
  /* Reduzir complexidade visual em mobile */
  body:not(.theme-modern) .wallpaper{
    background: var(--win-bg);
  }
  
  body:not(.theme-modern) .scrim{
    display: none;
  }
}

/* =========================
   Responsivo
   ========================= */
@media (max-width: 860px){
  .about-layout{ grid-template-columns: 1fr; }
  .about-photo{ width:100%; height:auto; aspect-ratio:auto; }
}

@media (max-width: 720px){
  .mobile-only{ display:inline-grid; }
  .tabs{ display:none; }
  
  /* Otimizações para mobile */
  .win{ width: min(94vw, 600px); }
  .content{ padding: 12px; }
  .titlebar{ padding: 8px 10px; }
  .ctl{ width: 26px; height: 26px; }
}

@media (max-width: 560px){
  #win-player{
    width: 92vw !important;
    height: 260px !important;
  }
  
  .player{ gap: 8px; }
  .controls{ gap: 8px; }
  .ctrls{ gap: 6px; }
  .btn-rect.icon{ width: 36px; height: 36px; font-size: 16px; }
  
  .now-playing{ max-width: 40vw; font-size: 13px; }
  .kbd-hints{ max-width: 50vw; font-size: 11px; }
  
  .taskbar{ padding: 4px 6px; }
  .task-button{ padding: 6px 10px; font-size: 14px; }
}

@media (max-width: 480px){
  .win{ width: 96vw; }
  .content{ padding: 10px; }
  .titlebar{ padding: 6px 8px; }
  
  .about-layout{ gap: 14px; }
  .about-photo{ border-radius: 8px; }
  
  .list{ gap: 8px; }
  .item{ padding: 8px 10px; border-radius: 8px; }
  
  .task-controls{ gap: 6px; }
  .theme-select, .lang-select{ height: 28px; padding: 0 8px; font-size: 14px; }
  .reset-lang-btn{ width: 28px; height: 28px; font-size: 12px; }
}

/* Otimizações de performance para mobile */
@media (max-width: 720px){
  .wallpaper{ 
    background: 
      radial-gradient(800px 800px at 70% 20%, rgba(255,106,0,.15), transparent 60%),
      radial-gradient(800px 800px at 20% 80%, rgba(0,194,255,.12), transparent 60%),
      var(--modern-bg);
  }
  
  .win{ 
    will-change: transform;
    transform: translateZ(0); /* Force hardware acceleration */
  }
  
  .taskbar{ 
    backdrop-filter: blur(4px);
    will-change: backdrop-filter;
  }
  
  /* Reduzir sombras em mobile para melhor performance */
  .win{ box-shadow: 0 4px 12px rgba(0,0,0,.25); }
  .mobile-menu{ box-shadow: 0 2px 8px rgba(0,0,0,.2); }
  
  /* Otimizar transições */
  .win, .taskbar, .mobile-menu{ transition: none; }
  
  /* Reduzir complexidade do wallpaper em mobile */
  .scrim{ 
    background: linear-gradient(180deg, 
      rgba(0,0,0,.1) 0%, 
      transparent 20%, 
      transparent 80%, 
      rgba(0,0,0,.1) 100%
    );
  }
}