/* === ТЕМЫ === */
:root {
  --bg-main: #1e1e1ecc;
  --bg-gradient: linear-gradient(135deg, #23272e 0%, #1a1d23 100%);
  --window-shadow: 0 8px 32px 0 rgba(0,0,0,0.35), 0 1.5px 0 0 #00b7ff inset;
  --titlebar-bg: #23272e;
  --tab-bg: #23272e;
  --tab-bg-active: #1e1e1e;
  --tab-bg-hover: #232c3a;
  --tab-color: #eaeaea;
  --tab-color-active: #00b7ff;
  --tab-shadow: 0 2px 8px 0 #0001;
  --tab-shadow-active: 0 4px 16px 0 #00b7ff22;
  --tab-shadow-hover: 0 2px 12px 0 #00b7ff11;
  --window-border: #2d2d2d;
  --terminal-bg: #1e1e1e;
  --terminal-color: #eaeaea;
  --input-bg: #23272e;
  --input-bg-focus: #232c3a;
  --input-shadow-focus: 0 0 0 2px #00b7ff44;
  --prompt-color: #00b7ff;
  --caret-color: #00b7ff;
  --scrollbar-thumb: #2d2d2d;
  --scrollbar-track: #23272e;
  --close-btn: #f55353;
  --min-btn: #f5e253;
  --max-btn: #53f57c;
  --window-title: #eaeaea;
  --selection-bg: #00b7ff;
  --selection-color: #fff;
  --glass-blur: blur(2px);
}
body.light {
  --bg-main: #f7f7f7cc;
  --bg-gradient: linear-gradient(135deg, #e6eaf2 0%, #f7f7f7 100%);
  --window-shadow: 0 8px 32px 0 rgba(0,0,0,0.10), 0 1.5px 0 0 #00b7ff22 inset;
  --titlebar-bg: #e6eaf2;
  --tab-bg: #e6eaf2;
  --tab-bg-active: #fff;
  --tab-bg-hover: #e0eaff;
  --tab-color: #222;
  --tab-color-active: #0078d4;
  --tab-shadow: 0 2px 8px 0 #0078d411;
  --tab-shadow-active: 0 4px 16px 0 #0078d422;
  --tab-shadow-hover: 0 2px 12px 0 #0078d411;
  --window-border: #b6c2d9;
  --terminal-bg: #fff;
  --terminal-color: #222;
  --input-bg: #e6eaf2;
  --input-bg-focus: #e0eaff;
  --input-shadow-focus: 0 0 0 2px #0078d444;
  --prompt-color: #0078d4;
  --caret-color: #0078d4;
  --scrollbar-thumb: #b6c2d9;
  --scrollbar-track: #e6eaf2;
  --close-btn: #f55353;
  --min-btn: #f5e253;
  --max-btn: #53f57c;
  --window-title: #222;
  --selection-bg: #0078d4;
  --selection-color: #fff;
  --glass-blur: blur(1.5px);
}
body.wallpaper-blur {
  /* Фильтр только для фонового изображения */
}
body.wallpaper-blur {
  /* Применяем фильтр только к background-image */
  /* Для этого используем псевдоэлемент */
}
body.wallpaper-blur::before {
  content: '';
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  z-index: 0;
  pointer-events: none;
  background: inherit;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(8px);
  opacity: 1;
}

body {
  background: var(--bg-gradient);
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cascadia Mono', 'Consolas', 'Fira Mono', monospace;
  backdrop-filter: var(--glass-blur);
  transition: background 0.5s, color 0.5s;
}
body::before {
  content: '';
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.18;
  background: repeating-linear-gradient(120deg, #00b7ff22 0 2px, transparent 2px 40px),
              repeating-linear-gradient(60deg, #0078d422 0 2px, transparent 2px 40px);
  animation: bg-waves 12s linear infinite;
}
@keyframes bg-waves {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 120px 60px, 60px 120px; }
}

.window {
  background: var(--bg-main);
  border-radius: 12px;
  box-shadow: var(--window-shadow);
  width: 700px;
  max-width: 98vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1.5px solid var(--window-border);
  animation: windowFadeIn 0.7s cubic-bezier(.4,1.6,.6,1) both;
  transition: background 0.5s, box-shadow 0.5s, border 0.5s;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  position: relative;
}
.window::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 12px;
  opacity: 0.18;
  background: url('data:image/svg+xml;utf8,<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="60" height="60" fill="white" fill-opacity="0.1"/><g opacity="0.2"><circle cx="30" cy="30" r="1.5" fill="white"/><circle cx="10" cy="10" r="1" fill="white"/><circle cx="50" cy="50" r="1" fill="white"/></g></svg>');
  z-index: 2;
}
@keyframes windowFadeIn {
  from { opacity: 0; transform: scale(0.97) translateY(30px); }
  to { opacity: 1; transform: none; }
}
.window-closing {
  animation: windowFadeOut 0.5s cubic-bezier(.4,1.6,.6,1) both;
}
@keyframes windowFadeOut {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: scale(0.97) translateY(30px); }
}
/* Удалён bounce-эффект окна */

.window-titlebar {
  background: var(--titlebar-bg);
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid var(--window-border);
  position: relative;
  user-select: none;
  transition: background 0.5s, border 0.5s;
}
.window-btn {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  transition: box-shadow 0.2s, transform 0.15s;
  box-shadow: 0 1px 4px 0 #0002;
}
.window-btn:hover {
  box-shadow: 0 0 0 2px #fff3, 0 1px 4px 0 #0002;
  transform: scale(1.15);
}
.window-btn:active {
  filter: brightness(0.8);
  transform: scale(0.95);
}
.window-btn.close { background: var(--close-btn); }
.window-btn.min { background: var(--min-btn); }
.window-btn.max { background: var(--max-btn); }
.window-title {
  color: var(--window-title);
  font-size: 15px;
  margin-left: 16px;
  font-family: inherit;
  letter-spacing: 0.5px;
  transition: color 0.5s;
}

#terminal {
  flex: 1;
  padding: 24px 20px 8px 20px;
  background: var(--terminal-bg);
  color: var(--terminal-color);
  font-size: 16px;
  overflow-y: auto;
  white-space: pre-wrap;
  min-height: 320px;
  max-height: 400px;
  transition: box-shadow 0.3s, background 0.5s, color 0.5s;
  box-shadow: 0 2px 12px 0 var(--prompt-color)11 inset;
}

#input-line {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  background: var(--input-bg);
  border-top: 1px solid var(--window-border);
  transition: box-shadow 0.2s, background 0.5s, border 0.5s;
}
#input-line:focus-within {
  box-shadow: var(--input-shadow-focus);
  background: var(--input-bg-focus);
}
#prompt {
  color: var(--prompt-color);
  font-weight: bold;
  margin-right: 8px;
  font-family: inherit;
  transition: color 0.5s;
}
#cmd-input {
  background: transparent;
  border: none;
  color: var(--terminal-color);
  font-family: inherit;
  font-size: 16px;
  outline: none;
  flex: 1;
  caret-color: transparent;
  animation: inputFadeIn 0.7s cubic-bezier(.4,1.6,.6,1);
  transition: color 0.5s;
  position: relative;
  z-index: 1;
}
#cmd-input.custom-cursor {
  position: relative;
}
#cmd-input.custom-cursor::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 2px;
  background: var(--prompt-color);
  position: absolute;
  left: calc(0.5ch + 1px + var(--cursor-x, 0px));
  bottom: 3px;
  border-radius: 1px;
  animation: blink-cursor 1s steps(1) infinite;
  pointer-events: none;
}
@keyframes blink-cursor {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0; }
}
@keyframes inputFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
::selection {
  background: var(--selection-bg);
  color: var(--selection-color);
}

/* Анимация появления текста в терминале */
#terminal span.animated {
  opacity: 0;
  animation: textFadeIn 0.7s cubic-bezier(.4,1.6,.6,1) forwards;
}
@keyframes textFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Скроллбар под Windows 11 */
#terminal::-webkit-scrollbar {
  width: 8px;
}
#terminal::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}
#terminal::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

.tabs {
  display: flex;
  align-items: flex-end;
  background: var(--titlebar-bg);
  border-bottom: 1.5px solid var(--window-border);
  padding-left: 8px;
  height: 38px;
  user-select: none;
  overflow-x: auto;
  scrollbar-width: thin;
  transition: background 0.5s, border 0.5s;
}
.tab {
  background: var(--tab-bg);
  color: var(--tab-color);
  border-radius: 8px 8px 0 0;
  margin-right: 4px;
  padding: 7px 22px 7px 16px;
  font-size: 15px;
  position: relative;
  cursor: pointer;
  border: 1.5px solid transparent;
  border-bottom: none;
  transition: background 0.25s, color 0.2s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  box-shadow: var(--tab-shadow);
  opacity: 0;
  animation: tabFadeIn 0.5s cubic-bezier(.4,1.6,.6,1) forwards;
}
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
.tab.active {
  background: var(--tab-bg-active);
  color: var(--tab-color-active);
  border-color: var(--window-border) var(--window-border) var(--tab-bg-active) var(--window-border);
  z-index: 2;
  box-shadow: var(--tab-shadow-active);
}
.tab:hover {
  background: var(--tab-bg-hover);
  color: var(--tab-color-active);
  box-shadow: var(--tab-shadow-hover);
}
.tab .close-tab {
  margin-left: 10px;
  color: #888;
  font-size: 13px;
  cursor: pointer;
  border: none;
  background: none;
  outline: none;
  transition: color 0.15s, transform 0.15s;
}
.tab .close-tab:hover {
  color: var(--close-btn);
  transform: scale(1.2);
}
.tab.dragging {
  opacity: 0.5;
  box-shadow: 0 0 0 2px var(--prompt-color)77, 0 2px 12px 0 var(--prompt-color)33;
  z-index: 10;
}
.tab.drag-over {
  background: #1e2a3a;
  box-shadow: 0 0 0 2px var(--prompt-color)cc, 0 2px 12px 0 var(--prompt-color)33;
}

/* Стили окна друзей удалены */ 

/* === YANDEX MUSIC PLAYER (MINI-PLAYER ONLY) === */
#mini-player-modal {
  /* Уже имеет класс .window, так что основные стили применятся */
  /* background, color, border-radius, box-shadow, border, font-family - всё наследуется */
  display: flex;
  flex-direction: column;
  position: fixed;
  z-index: 3000;
  width: 380px; /* Ширина мини-плеера */
  min-width: auto; /* Сбрасываем min-width */
  animation: windowFadeIn 0.5s;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Удаляем, т.к. стили теперь от .window-titlebar */
#mini-player-titlebar, #mini-player-titlebar .window-btn, #mini-player-titlebar .title {
  /* display: none; - не нужно, т.к. мы его переделали */
}


#mini-player-body {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--terminal-bg); /* Фон как у терминала */
  transition: padding 0.4s cubic-bezier(0.4, 0, 0.2, 1), gap 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s, transform 0.4s;
  overflow: hidden;
  height: 80px; /* Фиксированная высота для анимации */
  opacity: 1;
  transform: translateY(0);
}

#mini-player-modal.collapsed #mini-player-body {
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  transform: translateY(-10px);
}

#mini-player-modal .yamusic-cover {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  background: #222;
  box-shadow: 0 2px 8px #00000033;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
#mini-player-modal .info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#mini-player-modal .title {
  font-weight: bold;
  color: var(--prompt-color);
  font-size: 1.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: font-size 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
#mini-player-modal .artist {
  color: var(--terminal-color);
  font-size: 0.95em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: font-size 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
#mini-player-bar {
  margin-top: 4px;
  height: 5px;
  width: 100%;
  background: var(--input-bg);
  border-radius: 2.5px;
  overflow: hidden;
  position: relative;
}
#mini-player-progress {
  height: 100%;
  background: var(--prompt-color);
  width: 0%;
  transition: width 0.2s;
  border-radius: 2.5px;
}

#mini-player-body .controls {
    display: flex;
    gap: 5px;
}

#mini-player-modal.maximized #mini-player-body {
  gap: 20px;
  padding: 20px;
}
#mini-player-modal.maximized .yamusic-cover {
  width: 80px;
  height: 80px;
}
#mini-player-modal.maximized .info .title {
  font-size: 1.2em;
}
#mini-player-modal.maximized .info .artist {
  font-size: 1.1em;
}
#mini-player-modal.maximized .controls {
  display: none;
}

#mini-player-modal .mini-btn {
  background: var(--tab-bg);
  color: var(--prompt-color);
  border: none;
  border-radius: 50%; /* Делаем кнопки круглыми */
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
#mini-player-modal .mini-btn:hover {
  background: var(--prompt-color);
  color: #fff;
  transform: scale(1.1);
}
#mini-player-modal .mini-btn:active {
  transform: scale(0.95);
}
/* Конец */ 

.tab-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 15px;
  font-weight: bold;
  margin-right: 7px;
  background: #00b7ff22;
  color: #00b7ff;
  box-shadow: 0 1px 4px 0 #00b7ff11;
  transition: background 0.3s, color 0.3s;
}
.tab-avatar.group {
  background: #0078d422;
  color: #0078d4;
}
.tab-avatar svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: currentColor;
}
.tab-title {
  vertical-align: middle;
}
.tab-notify {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #ff3b3b;
  border-radius: 50%;
  margin-left: 7px;
  box-shadow: 0 0 6px 1px #ff3b3b55;
  vertical-align: middle;
  animation: notify-bounce 0.5s cubic-bezier(.4,1.6,.6,1);
}
@keyframes notify-bounce {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); }
} 

/* Скрыть горизонтальный скроллбар у вкладок */
#tabs, .tabs {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE и Edge */
}
#tabs::-webkit-scrollbar, .tabs::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
} 

/* === LOCK SCREEN === */
/* Удалено всё, что связано с #lock-screen и его элементами */ 

#spheres-bg {
  position: fixed;
  left: 0; top: 0; width: 100vw; height: 100vh;
  z-index: 0;
  pointer-events: none;
  display: block;
}