/* ============================================================
   SigeonOS · shell CLÁSSICO  (estilo padrão)

   Linguagem visual da geração anterior de sistemas de janelas:
   cantos retos, superfícies opacas, barra alinhada à esquerda,
   menu em duas colunas com blocos, animações curtas e diretas.

   Tudo aqui é prefixado com [data-shell="classic"], então o shell
   "glass" (arredondado e translúcido) continua intacto — a troca
   acontece em Settings › Personalization › Estilo do sistema.
   ============================================================ */

[data-shell="classic"] {
  /* ---- cantos retos ---- */
  --r-xs: 0px; --r-sm: 0px; --r-md: 0px; --r-lg: 0px; --r-xl: 0px; --r-pill: 0px;

  /* ---- nada de desfoque ---- */
  --blur: 0px;

  /* ---- animações mais curtas e lineares ---- */
  --t1: 80ms; --t2: 120ms; --t3: 170ms; --t4: 240ms; --t5: 520ms;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.2, 0.9, 0.3, 1);
  --spring: cubic-bezier(0.2, 0.8, 0.3, 1);

  --taskbar-h: 2.75rem;
}

/* ------------------------- superfícies opacas ------------------------- */
[data-shell="classic"][data-theme="dark"] {
  --bg: #0a0a0c;
  --text: #ffffff;
  --text-dim: #c9c9cf;
  --text-mute: #8b8b93;

  --glass: #191919;
  --glass-strong: #262626;
  --solid: #1f1f1f;
  --solid-2: #2b2b2b;
  --raise: rgba(255, 255, 255, 0.045);
  --raise-2: rgba(255, 255, 255, 0.08);
  --hover: rgba(255, 255, 255, 0.08);
  --active: rgba(255, 255, 255, 0.14);
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.22);
  --field: rgba(255, 255, 255, 0.06);

  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.55);
  --shadow-3: 0 10px 28px rgba(0, 0, 0, 0.62);
  --win-border: #3a3a3a;

  --tb-bg: #141414;
  --menu-bg: #262626;
  --tile-bg: rgba(255, 255, 255, 0.07);
}

[data-shell="classic"][data-theme="light"] {
  --bg: #e9ebf0;
  --text: #101014;
  --text-dim: #43464f;
  --text-mute: #74777f;

  --glass: #f5f5f5;
  --glass-strong: #ffffff;
  --solid: #ffffff;
  --solid-2: #f2f2f2;
  --raise: rgba(0, 0, 0, 0.035);
  --raise-2: rgba(0, 0, 0, 0.06);
  --hover: rgba(0, 0, 0, 0.06);
  --active: rgba(0, 0, 0, 0.1);
  --line: rgba(0, 0, 0, 0.14);
  --line-strong: rgba(0, 0, 0, 0.24);
  --field: #ffffff;

  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.16);
  --shadow-3: 0 10px 28px rgba(0, 0, 0, 0.2);
  --win-border: #c4c4c4;

  --tb-bg: #f3f3f3;
  --menu-bg: #f5f5f5;
  --tile-bg: rgba(0, 0, 0, 0.05);
}

/* ------------------------------------------------------------
   TASKBAR — sólida, alinhada à esquerda, indicador em linha
   ------------------------------------------------------------ */
[data-shell="classic"] #taskbar {
  background: var(--tb-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: 1px solid var(--line);
  box-shadow: none;
  padding: 0;
  gap: 0;
}
[data-shell="classic"] .tb-center { gap: 0; }

[data-shell="classic"] .tb-btn {
  height: 100%;
  min-width: 2.9rem;
  border-radius: 0;
  padding: 0 0.5rem;
}
[data-shell="classic"] .tb-btn:hover { background: var(--hover); }
[data-shell="classic"] .tb-btn:active { transform: none; background: var(--active); }
[data-shell="classic"] .tb-btn:hover .tb-ico { transform: none; }

/* botão do sistema: quadrado, colado na borda */
[data-shell="classic"] .tb-start { min-width: 3rem; padding: 0; }
[data-shell="classic"] .tb-start:hover { background: var(--accent-soft); }
[data-shell="classic"] .tb-start.on { background: var(--accent); }

/* caixa de pesquisa retangular */
[data-shell="classic"] .tb-search {
  height: 2rem;
  margin: 0 0.35rem;
  padding: 0 0.7rem;
  min-width: 11rem;
  border-radius: 0;
  background: var(--field);
  border: 1px solid var(--line-strong);
}
[data-shell="classic"] .tb-search:hover { transform: none; background: var(--field); border-color: var(--accent); }

/* indicador: linha fina embaixo, largura total do botão */
[data-shell="classic"] .tb-app::after {
  left: 0.25rem; right: 0.25rem; bottom: 0;
  width: auto; height: 2px;
  border-radius: 0;
  transform: none;
  background: var(--text-mute);
}
[data-shell="classic"] .tb-app.running::after { transform: none; opacity: 0.8; }
[data-shell="classic"] .tb-app.active::after { width: auto; opacity: 1; background: var(--accent); height: 2px; }
[data-shell="classic"] .tb-app.active { background: var(--raise-2); }

[data-shell="classic"] .tray,
[data-shell="classic"] .tb-clock { height: 100%; border-radius: 0; }
[data-shell="classic"] .tb-peek {
  width: 0.65rem; height: 100%; margin: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
}
[data-shell="classic"] .tb-peek:hover { background: var(--accent-soft); }

/* ------------------------------------------------------------
   MENU PRINCIPAL — canto inferior esquerdo, duas colunas
   ------------------------------------------------------------ */
[data-shell="classic"] #startmenu {
  left: 0;
  bottom: var(--taskbar-h);
  transform: none;
  width: min(34rem, 100vw);
  max-height: min(38rem, calc(100vh - var(--taskbar-h)));
  border-radius: 0;
  border: 1px solid var(--line);
  border-left: 0; border-bottom: 0;
  background: var(--menu-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--shadow-3);
  flex-direction: row;
  transform-origin: bottom left;
}
[data-shell="classic"] #startmenu.show { animation: classicStartIn var(--t3) var(--ease-out); }
[data-shell="classic"] #startmenu.hiding { animation: classicStartOut var(--t2) var(--ease) forwards; }
@keyframes classicStartIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes classicStartOut {
  to { opacity: 0; transform: translateY(10px); }
}

/* trilho estreito da esquerda */
.sm-rail {
  display: flex; flex-direction: column; align-items: center;
  width: 3rem; flex: none;
  padding: 0.4rem 0;
  background: var(--raise);
  border-right: 1px solid var(--line);
}
.sm-rail .grow { flex: 1; }
.sm-rail button {
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  color: var(--text-dim);
  transition: background var(--t1) var(--ease), color var(--t1) var(--ease);
}
.sm-rail button:hover { background: var(--hover); color: var(--text); }
.sm-rail button svg { width: 1.05rem; height: 1.05rem; }
.sm-rail .av {
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--accent-grad); color: #fff;
  display: grid; place-items: center;
}
.sm-rail .av svg { width: 1rem; height: 1rem; }

/* coluna da lista de apps */
.sm-apps {
  width: 13rem; flex: none;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--line);
  overflow: hidden;
}
.sm-apps-list { flex: 1; overflow-y: auto; padding: 0 0.25rem 0.5rem; }
.sm-applet {
  display: flex; align-items: center; gap: 0.6rem;
  width: 100%; padding: 0.4rem 0.5rem;
  text-align: left;
  transition: background var(--t1) var(--ease);
}
.sm-applet:hover { background: var(--hover); }
.sm-applet .ico { width: 1.5rem; height: 1.5rem; flex: none; }
.sm-applet .nm { font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* coluna dos blocos */
.sm-tilecol { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.sm-tilecol .sm-head { padding: 0 0 0.5rem; margin: 0.9rem 1rem 0; }
.sm-tilegrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.7rem, 1fr));
  gap: 0.3rem;
  padding: 0 1rem 1rem;
  overflow-y: auto;
  align-content: start;
}
.sm-tileitem {
  aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  padding: 0.5rem;
  background: var(--tile-bg);
  border: 1px solid transparent;
  transition: background var(--t1) var(--ease), border-color var(--t1) var(--ease);
  animation: popIn var(--t2) var(--ease-out) backwards;
}
.sm-tileitem:hover { background: var(--hover); border-color: var(--accent); }
.sm-tileitem:active { background: var(--active); }
.sm-tileitem .ico { width: 1.85rem; height: 1.85rem; margin: auto auto 0.35rem; }
.sm-tileitem .label {
  font-size: 0.66rem; line-height: 1.2; color: var(--text);
  width: 100%; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* modo de busca ocupa as duas colunas */
.sm-searchmode { flex: 1; min-width: 0; display: flex; flex-direction: column; }

[data-shell="classic"] .sm-search {
  margin: 0.75rem 1rem 0.5rem;
  border-radius: 0;
  border: 1px solid var(--line-strong);
  background: var(--field);
}
[data-shell="classic"] .sm-tile { border-radius: 0; }
[data-shell="classic"] .sm-row { border-radius: 0; }
[data-shell="classic"] .sm-foot { border-radius: 0; }

/* ------------------------------------------------------------
   CENTRAL DE NOTIFICAÇÕES — painel encostado na borda direita
   ------------------------------------------------------------ */
[data-shell="classic"] #notifcenter {
  right: 0;
  bottom: var(--taskbar-h);
  top: 0;
  width: min(22rem, 100vw);
  max-height: none;
  border-radius: 0;
  border: 0;
  border-left: 1px solid var(--line);
  background: var(--menu-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--shadow-3);
}
[data-shell="classic"] #notifcenter.show { animation: classicNcIn var(--t3) var(--ease-out); }
[data-shell="classic"] #notifcenter.hiding { animation: classicNcOut var(--t2) var(--ease) forwards; }
@keyframes classicNcIn { from { transform: translateX(100%); } to { transform: none; } }
@keyframes classicNcOut { to { transform: translateX(100%); } }

[data-shell="classic"] .nc-note { border-radius: 0; background: var(--raise-2); }
[data-shell="classic"] .nc-tiles { gap: 1px; background: var(--line); border: 1px solid var(--line); }
[data-shell="classic"] .qt {
  border-radius: 0; border: 0;
  background: var(--raise-2);
  height: 4rem;
}
[data-shell="classic"] .qt:hover { transform: none; background: var(--hover); }
[data-shell="classic"] .qt:active { transform: none; }
[data-shell="classic"] .qt:hover svg { transform: none; }
[data-shell="classic"] .qt.on { background: var(--accent); box-shadow: none; }

/* ------------------------------------------------------------
   JANELAS — chrome plano e reto
   ------------------------------------------------------------ */
[data-shell="classic"] .win {
  border-radius: 0;
  background: var(--solid);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--win-border);
  box-shadow: var(--shadow-2);
}
[data-shell="classic"] .win.focused {
  border-color: var(--accent);
  box-shadow: var(--shadow-3);
}
[data-shell="classic"] .win.maximized { border-color: transparent; }
[data-shell="classic"] .win-body { background: var(--solid); }
[data-shell="classic"] .win-bar {
  height: 2rem;
  background: var(--solid);
  border-bottom: 1px solid var(--line);
}
[data-shell="classic"] .win-bar .w-title { font-size: 0.75rem; font-weight: 400; }
[data-shell="classic"] .wc { width: 2.9rem; border-radius: 0; }
[data-shell="classic"] .wc:hover { background: var(--hover); }
[data-shell="classic"] .wc.close:hover { background: #e81123; color: #fff; }

/* O movimento das janelas (abrir, fechar, voar até a barra) é o mesmo
   nos dois estilos — só o visual muda aqui. */

[data-shell="classic"] .snap-preview {
  border-radius: 0;
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  border-width: 1px;
  backdrop-filter: none;
}

/* ------------------------------------------------------------
   COMPONENTES — quadrados e planos
   ------------------------------------------------------------ */
[data-shell="classic"] .btn {
  border-radius: 0;
  background: var(--raise-2);
  border: 1px solid var(--line-strong);
}
[data-shell="classic"] .btn:hover { background: var(--hover); }
[data-shell="classic"] .btn:active { transform: none; }
[data-shell="classic"] .btn.primary { background: var(--accent); border-color: var(--accent); box-shadow: none; }
[data-shell="classic"] .btn.primary:hover { filter: brightness(1.12); }
[data-shell="classic"] .ibtn { border-radius: 0; }
[data-shell="classic"] .ibtn:active { transform: none; }
[data-shell="classic"] .field { border-radius: 0; border-color: var(--line-strong); }
[data-shell="classic"] .field:focus { box-shadow: none; border-color: var(--accent); border-width: 2px; }
[data-shell="classic"] .card { border-radius: 0; }
[data-shell="classic"] .switch { border-radius: 0; }
[data-shell="classic"] .switch::after { border-radius: 0; }
[data-shell="classic"] .slider::-webkit-slider-thumb { border-radius: 0; }
[data-shell="classic"] .slider::-moz-range-thumb { border-radius: 0; }

[data-shell="classic"] #contextmenu,
[data-shell="classic"] .power-menu {
  border-radius: 0;
  padding: 0.15rem;
  background: var(--menu-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--line);
}
[data-shell="classic"] .ctx-item { border-radius: 0; }
[data-shell="classic"] #contextmenu.show { animation: fadeIn 110ms var(--ease); }

[data-shell="classic"] .toast {
  border-radius: 0;
  background: var(--menu-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-left: 3px solid var(--accent);
}

/* ícones do desktop: seleção retangular */
[data-shell="classic"] .dicon { border-radius: 0; }
[data-shell="classic"] .dicon:active { transform: none; }
[data-shell="classic"] .dicon.selected {
  background: color-mix(in srgb, var(--accent) 40%, transparent);
  border: 1px dotted rgba(255, 255, 255, 0.6);
}

/* barras de rolagem com trilho visível */
[data-shell="classic"] ::-webkit-scrollbar { width: 14px; height: 14px; }
[data-shell="classic"] ::-webkit-scrollbar-track { background: var(--raise); }
[data-shell="classic"] ::-webkit-scrollbar-thumb {
  border-radius: 0;
  border: 4px solid transparent;
  background: var(--text-mute);
  background-clip: padding-box;
}

/* apps: cartões e listas sem raio */
[data-shell="classic"] .st-item,
[data-shell="classic"] .store-card,
[data-shell="classic"] .store-hero,
[data-shell="classic"] .about-hero,
[data-shell="classic"] .wall-opt,
[data-shell="classic"] .lang-opt,
[data-shell="classic"] .news-card,
[data-shell="classic"] .fx-item,
[data-shell="classic"] .photo-cell,
[data-shell="classic"] .mp-art,
[data-shell="classic"] .mp-thumb,
[data-shell="classic"] .ck,
[data-shell="classic"] .calc-disp,
[data-shell="classic"] .paint-canvas,
[data-shell="classic"] .clock-zone { border-radius: 0; }
[data-shell="classic"] .store-card:hover,
[data-shell="classic"] .lang-opt:hover,
[data-shell="classic"] .photo-cell:hover,
[data-shell="classic"] .wall-opt:hover { transform: none; }
[data-shell="classic"] .accent-dot { border-radius: 0; }
[data-shell="classic"] .mp-play { border-radius: 0; }
[data-shell="classic"] .ph-nav { border-radius: 0; }
[data-shell="classic"] .paint-swatch { border-radius: 0; }
[data-shell="classic"] .st-seg { border-radius: 0; }
[data-shell="classic"] .st-seg button { border-radius: 0; }
[data-shell="classic"] .st-avatar,
[data-shell="classic"] .st-profile .av,
[data-shell="classic"] .login-avatar { border-radius: 50%; } /* avatares seguem redondos */

/* login: cartão reto */
[data-shell="classic"] .login-input { border-radius: 0; }
[data-shell="classic"] .login-alt { border-radius: 0; }
[data-shell="classic"] .login-go { border-radius: 0; }

@media (max-width: 760px) {
  [data-shell="classic"] #startmenu { width: 100vw; }
  [data-shell="classic"] .sm-apps { width: 10rem; }
  [data-shell="classic"] #notifcenter { width: 100vw; }
}
@media (max-width: 520px) {
  [data-shell="classic"] .sm-apps { display: none; }
}