/* Haven EthosOS - Preferences (background customization)
   Styles for the custom background layer, the floating 🎨 button, and
   the slide-out settings panel. All markup is created/verified by
   preferences-fab.js (self-injecting), so this file + that script are
   the complete feature. Loaded after global.css in launcher.php. */

/* ============================================================
   CUSTOM BACKGROUND LAYER
   First child of #launcherScreen - sits behind the orbs/topbar/content/
   dock purely by DOM order, no z-index needed. Empty by default so
   #launcherScreen's own inline gradient (global.css) shows through.
   ============================================================ */
.ls-bg-custom{
  position:absolute; inset:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  transition:background-color .4s ease;
}
.ls-bg-custom video{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* ============================================================
   FLOATING ACTION BUTTON
   Always-visible entry point on the launcher (the topbar gear is
   re-wired to the same panel by preferences-fab.js). Bottom-right so it
   doesn't collide with the centered dock.
   ============================================================ */
.bg-fab{
  position:absolute; right:1.4rem; bottom:5.6rem; /* clear of the dock */
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(20,10,40,0.7); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.16);
  font-size:1.25rem; cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,0.45);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, border-color .2s;
  z-index:15; /* above .ls-content, below topbar dropdowns */
}
.bg-fab:hover{
  transform:scale(1.1);
  border-color:#E8A020;
  box-shadow:0 14px 32px rgba(0,0,0,0.55), 0 0 0 2px rgba(232,160,32,0.25);
}

/* ============================================================
   BACKGROUND SETTINGS PANEL
   Same right slide-out treatment as the notifications sidebar for
   visual consistency.
   ============================================================ */
.bg-panel-overlay{
  position:fixed; inset:0; background:rgba(8,4,16,0.4);
  z-index:2999; opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.bg-panel-overlay.open{ opacity:1; pointer-events:auto; }

.bg-panel{
  position:fixed; top:0; right:0; bottom:0;
  width:360px; max-width:100vw;
  background:rgba(20,10,40,0.6); backdrop-filter:blur(24px);
  border-left:1px solid rgba(255,255,255,0.12);
  box-shadow:-24px 0 56px rgba(0,0,0,0.5);
  z-index:3000;
  display:flex; flex-direction:column; overflow:hidden;
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.4,0,.2,1);
}
.bg-panel.open{ transform:translateX(0); }

.bg-panel-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 1.3rem; font-size:.95rem; font-weight:600;
  color:#F8D878; border-bottom:1px solid rgba(255,255,255,0.08);
  flex-shrink:0;
}
.bg-panel-body{ flex:1; overflow-y:auto; padding:1.2rem 1.3rem; }

.bg-panel-tabs{ display:flex; gap:.5rem; margin-bottom:1.2rem; }
.bg-tab{
  flex:1; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  border-radius:8px; padding:.55rem .4rem; color:rgba(255,233,168,0.7);
  font-size:.78rem; font-weight:600; cursor:pointer; transition:all .2s;
}
.bg-tab:hover{ color:#FFE9A8; }
.bg-tab.active{ background:rgba(232,160,32,0.18); border-color:#E8A020; color:#FFE9A8; }

.bg-tab-panel{ display:none; }
.bg-tab-panel.active{ display:block; }

.bg-swatch-grid{
  display:grid; grid-template-columns:repeat(6,1fr); gap:.6rem;
  margin-bottom:1.2rem;
}
.bg-swatch{
  width:100%; aspect-ratio:1; border-radius:50%; cursor:pointer;
  border:2px solid rgba(255,255,255,0.2); transition:border-color .2s, transform .2s;
}
.bg-swatch:hover{ transform:scale(1.08); }
.bg-swatch.selected{ border-color:#E8A020; }

.bg-field-label{ display:block; font-size:.78rem; color:rgba(255,233,168,0.75); margin-bottom:.5rem; }
#bgColorInput{
  width:100%; height:44px; border:1px solid rgba(255,255,255,0.14); border-radius:8px;
  background:transparent; cursor:pointer; padding:2px;
}
.bg-text-input{
  width:100%; background:rgba(255,255,255,0.06);
  border:1.5px solid rgba(255,255,255,0.14); border-radius:8px;
  padding:.65rem .9rem; color:#FFE9A8; font-family:'DM Sans',sans-serif;
  font-size:.85rem; outline:none; transition:border-color .2s;
}
.bg-text-input:focus{ border-color:#E8A020; }
.bg-text-input::placeholder{ color:rgba(255,233,168,0.4); }

.bg-panel-note{
  min-height:1.2rem; font-size:.75rem; color:rgba(255,233,168,0.65); margin-top:1rem;
}

.bg-panel-actions{
  display:flex; gap:.7rem; padding:1rem 1.3rem;
  border-top:1px solid rgba(255,255,255,0.08); flex-shrink:0;
}
.bg-panel-actions .btn-secondary,
.bg-panel-actions .btn-primary{ flex:1; justify-content:center; }

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .bg-panel{ background:rgba(24,12,46,0.96); }
  .bg-fab{ background:rgba(24,12,46,0.92); }
}

@media(max-width:768px){
  .bg-fab{ right:1rem; bottom:6rem; width:44px; height:44px; font-size:1.1rem; }
  .bg-panel{
    width:100vw; border-left:none;
    box-shadow:0 -10px 40px rgba(0,0,0,0.4);
  }
  .bg-panel-header{
    padding:calc(1rem + env(safe-area-inset-top,0px)) 1.1rem .9rem;
  }
  .bg-panel-body{ padding:1rem; }
  .bg-swatch-grid{ grid-template-columns:repeat(5,1fr); gap:.7rem; }
  .bg-panel-actions{
    padding:.9rem 1rem calc(.9rem + env(safe-area-inset-bottom,0px));
    flex-direction:column-reverse; gap:.6rem;
  }
}

@media(max-width:380px){
  .bg-swatch-grid{ grid-template-columns:repeat(4,1fr); }
}