/*
 * Virii8 Workspace Shell CSS module: v8-gui-detail-customization-v8
 * Extracted from shell-core.css during v1.6.122 modular shell refactor.
 * Load order is controlled by V8E_Module_WorkspaceShell::enqueue_embedded_shell_assets().
 */
/* ---- v8-gui-detail-customization-v8 ---- */
/* v8 GUI detail patch: Windows button order, wallpapers, screensavers, and extra per-OS customization. */

  #v8-os-container.v8-platform-win .v8-controls,
  #v8-os-container.v8-platform-android .v8-controls {
    flex-direction: row;
  }

  #v8-os-container.v8-platform-win .v8-controls .v8-btn-min,
  #v8-os-container.v8-platform-android .v8-controls .v8-btn-min { order: 1; }

  #v8-os-container.v8-platform-win .v8-controls .v8-btn-max,
  #v8-os-container.v8-platform-android .v8-controls .v8-btn-max { order: 2; }

  #v8-os-container.v8-platform-win .v8-controls .v8-btn-close,
  #v8-os-container.v8-platform-android .v8-controls .v8-btn-close { order: 3; }

  #v8-os-container.v8-platform-win .v8-window.maximized .v8-btn-max .v8-win-svg rect,
  #v8-os-container.v8-platform-android .v8-window.maximized .v8-btn-max .v8-win-svg rect {
    transform: translate(-1px, 1px);
  }

  #v8-os-container.v8-custom-wallpaper-active {
    background-image: var(--v8-custom-wallpaper-image) !important;
  }

  #v8-os-container.v8-wallpaper-soft-vignette::before {
    background:
      radial-gradient(circle at top right, rgba(255,255,255,0.18), transparent 28%),
      radial-gradient(circle at bottom left, rgba(56,189,248,0.16), transparent 26%),
      linear-gradient(180deg, rgba(0,0,0,var(--v8-custom-wallpaper-dim, 0.18)), rgba(0,0,0,calc(var(--v8-custom-wallpaper-dim, 0.18) + 0.16)));
  }

  #v8-os-container.v8-pref-mac-dock-glow.v8-platform-mac .v8-taskbar,
  #v8-os-container.v8-pref-mac-dock-glow.v8-platform-ios .v8-taskbar {
    box-shadow:
      0 22px 56px rgba(0,0,0,0.34),
      inset 0 1px 0 rgba(255,255,255,0.24),
      0 0 28px rgba(255,255,255,0.08);
  }

  #v8-os-container.v8-pref-mac-desktop-tint.v8-platform-mac::before,
  #v8-os-container.v8-pref-mac-desktop-tint.v8-platform-ios::before {
    background:
      radial-gradient(circle at 78% 12%, rgba(255,255,255,0.22), transparent 25%),
      radial-gradient(circle at 12% 82%, rgba(147,197,253,0.17), transparent 24%),
      linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.24));
  }

  #v8-os-container.v8-pref-win-taskbar-compact.v8-platform-win .v8-taskbar,
  #v8-os-container.v8-pref-win-taskbar-compact.v8-platform-android .v8-taskbar {
    height: 46px;
  }

  #v8-os-container.v8-pref-win-taskbar-compact.v8-platform-win .v8-taskbar-icon,
  #v8-os-container.v8-pref-win-taskbar-compact.v8-platform-android .v8-taskbar-icon,
  #v8-os-container.v8-pref-win-taskbar-compact.v8-platform-win .v8-start-btn,
  #v8-os-container.v8-pref-win-taskbar-compact.v8-platform-android .v8-start-btn {
    width: 34px;
    height: 34px;
    font-size: 1.32rem;
  }

  #v8-os-container.v8-pref-win-acrylic-heavy.v8-platform-win .v8-taskbar,
  #v8-os-container.v8-pref-win-acrylic-heavy.v8-platform-android .v8-taskbar,
  #v8-os-container.v8-pref-win-acrylic-heavy .v8-start-menu {
    background: rgba(20, 28, 44, 0.72);
    -webkit-backdrop-filter: blur(38px) saturate(190%);
    backdrop-filter: blur(38px) saturate(190%);
  }

  .v8-wallpaper-select-preview {
    height: 74px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.1);
    background-image: var(--v8-custom-wallpaper-image, linear-gradient(135deg, #1e293b, #0f172a));
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
  }

  .v8-customize-control input[type="color"] {
    width: 52px;
    height: 32px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 10px;
    background: transparent;
    padding: 2px;
    cursor: pointer;
  }

  .v8-screensaver-overlay {
    position: absolute;
    inset: 0;
    z-index: 100002;
    display: none;
    overflow: hidden;
    color: #fff;
    background: #020617;
    cursor: none;
    isolation: isolate;
  }

  .v8-screensaver-overlay.active {
    display: block;
    animation: v8-screensaver-fade 0.35s ease both;
  }

  .v8-screensaver-overlay::after {
    content: "Move mouse, tap, or press any key to return";
    position: absolute;
    left: 50%;
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    padding: 7px 12px;
    border-radius: 999px;
    color: rgba(255,255,255,0.78);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    font-size: 0.76rem;
    opacity: 0.72;
  }

  @keyframes v8-screensaver-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .v8-ss-clock {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
    background:
      radial-gradient(circle at 25% 20%, rgba(56,189,248,0.22), transparent 28%),
      radial-gradient(circle at 80% 72%, rgba(168,85,247,0.20), transparent 30%),
      #020617;
  }

  .v8-ss-clock-time {
    font-size: clamp(3.2rem, 12vw, 9rem);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 0.92;
  }

  .v8-ss-clock-date {
    margin-top: 1rem;
    color: rgba(255,255,255,0.72);
    font-size: clamp(1rem, 2vw, 1.35rem);
  }

  .v8-ss-bubbles {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at center, rgba(15,23,42,0), rgba(2,6,23,0.88)),
      linear-gradient(135deg, #0f172a, #020617);
  }

  .v8-ss-bubbles span {
    position: absolute;
    width: var(--size);
    height: var(--size);
    left: var(--left);
    bottom: -18%;
    border-radius: 50%;
    background:
      radial-gradient(circle at 30% 24%, rgba(255,255,255,0.92), rgba(255,255,255,0.12) 18%, rgba(56,189,248,0.18) 42%, rgba(56,189,248,0.02) 68%);
    border: 1px solid rgba(255,255,255,0.24);
    animation: v8-ss-rise var(--duration) linear infinite;
    animation-delay: var(--delay);
    filter: blur(var(--blur));
  }

  @keyframes v8-ss-rise {
    from { transform: translate3d(0, 0, 0) scale(0.86); opacity: 0; }
    10% { opacity: 0.9; }
    to { transform: translate3d(var(--drift), -128vh, 0) scale(1.12); opacity: 0; }
  }

  .v8-ss-aurora {
    position: absolute;
    inset: -12%;
    background:
      radial-gradient(ellipse at 20% 70%, rgba(34,197,94,0.42), transparent 38%),
      radial-gradient(ellipse at 70% 30%, rgba(56,189,248,0.38), transparent 40%),
      radial-gradient(ellipse at 45% 45%, rgba(168,85,247,0.34), transparent 42%),
      #020617;
    filter: blur(20px) saturate(140%);
    animation: v8-ss-aurora 13s ease-in-out infinite alternate;
  }

  @keyframes v8-ss-aurora {
    from { transform: rotate(-4deg) scale(1.08) translate3d(-2%, 1%, 0); }
    to { transform: rotate(5deg) scale(1.18) translate3d(3%, -2%, 0); }
  }

  .v8-ss-ribbons {
    position: absolute;
    inset: 0;
    background: #020617;
  }

  .v8-ss-ribbons span {
    position: absolute;
    width: 46vw;
    height: 4px;
    left: -18vw;
    top: var(--top);
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(56,189,248,0.9), rgba(255,255,255,0.82), transparent);
    transform-origin: center;
    animation: v8-ss-ribbon var(--duration) ease-in-out infinite alternate;
    animation-delay: var(--delay);
    filter: blur(0.5px);
  }

  @keyframes v8-ss-ribbon {
    from { transform: translateX(-4vw) rotate(var(--angle)); opacity: 0.28; }
    to { transform: translateX(84vw) rotate(calc(var(--angle) * -1)); opacity: 0.9; }
  }

  @media (prefers-reduced-motion: reduce) {
    .v8-screensaver-overlay *,
    .v8-screensaver-overlay *::before,
    .v8-screensaver-overlay *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }