/* App container */

.app {
  display: none;
  width: 85vw;
  margin: auto;
  background: var(--app-bg);
  border-radius: 4px;
  border: 2px solid var(--app-bg);
  box-shadow: 0 0 10px 0 var(--shadow-md);
}

.app.visible { display: flex; flex-direction: column; align-items: center; }

/* Header */

header {
  width: 100%;
  padding: 6px 4px;
  background: linear-gradient(180deg, var(--xp-blue) 0%, color-mix(in srgb, var(--xp-blue), white 20%) 4%, var(--xp-blue) 6%, var(--xp-blue-mid) 50%, color-mix(in srgb, var(--xp-blue), black 30%) 95%, color-mix(in srgb, var(--xp-blue), black 30%) 100%);
  display: flex;
  align-items: center;
  gap: 8px;
}

header .header-icon {
  width: 24px;
  height: 24px;
}

header h1 { font-size: 18px; font-weight: 600; color: var(--text-white); text-shadow: 2px 2px var(--shadow-md); }

/* Shared header badge/button sizing */
header .badge,
header .header-error-badge,
header .refresh-btn {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
}

header .badge {
  background: var(--accent-blue);
  color: var(--text-white);
}

header .cache-badge {
  display: none;
  font-size: 11px;
  background: var(--slider-thumb-border);
  color: var(--accent-green);
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
}

header .cache-badge:hover { background: color-mix(in srgb, var(--surface-subtle), white 20%); }

header .refresh-btn {
  background: var(--surface-subtle);
  color: var(--text-muted);
  border: 1px solid color-mix(in srgb, var(--surface-subtle), white 20%);
  cursor: pointer;
}

header .refresh-btn:hover { background: color-mix(in srgb, var(--surface-subtle), white 20%); color: var(--text-white); }
header .refresh-btn.spinning { animation: spin 0.8s linear infinite; }

/* Error badge + popover */

.header-errors {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.header-error-badge {
  display: none;
  background: var(--warning-bg);
  color: var(--text-white);
  cursor: pointer;
  user-select: none;
  border: none;
}

.header-error-badge:hover { background: color-mix(in srgb, var(--warning-bg), white 25%); }

.header-error-popover {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: var(--surface-dark);
  border: 1px solid var(--controls-text);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  z-index: 100;
  min-width: 300px;
  max-width: 450px;
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--surface-subtle), white 20%) transparent;
}

.header-error-popover.visible { display: block; }

.header-error-popover-title {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: color-mix(in srgb, var(--warning-bg), white 25%);
  border-bottom: 1px solid var(--surface-dark);
}

.header-error-popover-item {
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--surface-dark);
}

.header-error-popover-item:last-child { border-bottom: none; }

/* XP window controls (minimize, maximize, close) */

.xp-window-controls {
  display: flex;
  gap: 2px;
  margin-left: auto;
}

.xp-wc {
  width: 21px;
  height: 21px;
  border: 1px solid var(--shadow-md);
  border-radius: 3px;
  cursor: default;
  position: relative;
  padding: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 1px 1px var(--shadow-sm);
}

.xp-wc-minimize,
.xp-wc-maximize {
  background: linear-gradient(180deg, color-mix(in srgb, var(--xp-blue), white 20%) 0%, color-mix(in srgb, var(--xp-blue), white 20%) 15%, color-mix(in srgb, var(--xp-blue), black 30%) 100%);
}

.xp-wc-minimize:hover,
.xp-wc-maximize:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--xp-blue), white 20%) 0%, color-mix(in srgb, var(--xp-blue), white 20%) 40%, color-mix(in srgb, var(--xp-blue), black 30%) 100%);
}

.xp-wc-close {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-red), white 50%) 0%, color-mix(in srgb, var(--accent-red), white 50%) 15%, var(--accent-red) 100%);
}

.xp-wc-close:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-red), white 50%) 0%, color-mix(in srgb, var(--accent-red), white 50%) 40%, var(--accent-red) 100%);
}

.xp-wc-minimize::before {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 2px;
  background: var(--text-white);
  box-shadow: 0 1px 0 var(--shadow-sm);
}

.xp-wc-maximize::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--text-white);
  border-top-width: 2.5px;
  box-shadow: 0 1px 0 var(--shadow-sm);
}

.xp-wc-close::before,
.xp-wc-close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  background: var(--text-white);
  box-shadow: 0 1px 0 var(--shadow-sm);
}

.xp-wc-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.xp-wc-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* Alert banner */

.alert-banner {
  width: 100%;
  padding: 10px 24px;
  background: var(--alert-bg);
  border-bottom: 1px solid var(--alert-bg);
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: color-mix(in srgb, var(--alert-bg), white 70%);
}

.alert-banner .alert-icon { font-size: 16px; }

.alert-banner .alert-dismiss {
  margin-left: auto;
  background: none;
  border: none;
  color: color-mix(in srgb, var(--alert-bg), white 70%);
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
}

/* Content layout */

.content {
  width: 100%;
  display: flex;
  flex: 1;
  min-height: 0;
  background: var(--surface-regular);
}

.player-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface-dark);
  border-right: 2px solid var(--border-medium);
}

.sidebar {
  width: 400px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
}

/* Responsive */

@media (max-width: 800px) {
  .content { flex-direction: column; }
  .media-card-cover { width: 80px; height: 113px; }
}

@media (min-width: 1880px) {
  .app { width: 1540px; }
}