/* nurr-panels.css — tabbed panel, library, studio module CSS.
   Load AFTER base.css. */

/* ── Panel max-height ──────────────────────────────────────────────────────── */
.panel { max-height: calc(100vh - 100px) !important; }

/* ── Tab row ───────────────────────────────────────────────────────────────── */


.tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--ink-2); color: var(--panel);
  border-radius: 8px; font-size: 9px; font-weight: 700; letter-spacing: 0; line-height: 1;
}

/* ── Panel body ────────────────────────────────────────────────────────────── */
.panel-body {
  overflow-y: auto; overflow-x: hidden; padding: 14px 22px 20px; flex: 1;
}
.panel-body::-webkit-scrollbar { width: 3px; }
.panel-body::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 2px; }
.panel-body-lib { padding: 0; }

/* ── Create tab download rows ─────────────────────────────────────────────── */
.create-dl-row { display: flex; gap: 6px; margin-top: 14px; }


.create-secondary-row { display: flex; gap: 6px; margin-top: 8px; }


/* ── Video recorder ───────────────────────────────────────────────────────── */


/* ── Library tab ──────────────────────────────────────────────────────────── */


.library-tab { padding: 0 0 12px; }


/* ── Studio module controls ───────────────────────────────────────────────── */


/* ── Preview lightbox ─────────────────────────────────────────────────────── */
.preview-backdrop { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,0.72); display: flex; align-items: center; justify-content: center; cursor: zoom-out; animation: fadeIn 140ms ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.preview-window { position: relative; max-width: min(1200px, 92vw); max-height: 90vh; border-radius: 10px; overflow: hidden; cursor: default; box-shadow: 0 40px 120px rgba(0,0,0,0.6); animation: panelEnter 200ms var(--ease-out) both; }
.preview-window img { display: block; max-width: 100%; max-height: 90vh; object-fit: contain; }


/* ── Toast ────────────────────────────────────────────────────────────────── */


/* ── Suppress old floating panels ────────────────────────────────────────── */
/* If base.css defines these they are now superseded by the new system */

.me-overlay        { display: none !important; }

/* ── Mobile ───────────────────────────────────────────────────────────────── */


/* ── NURR panel sizing v05 ────────────────────────────────────────────────
   Taller safe right-side panel. The previous patch protected the footer too
   aggressively, so the drawer felt cut in half. This version fills the usable
   vertical space while still leaving a clean gap above the support strip. */
.panel:not(.collapsed) {
  width: min(292px, calc(100vw - 56px)) !important;
  height: min(760px, calc(100svh - var(--header-h, 64px) - var(--nurr-support-height, 34px) - 26px)) !important;
  max-height: min(760px, calc(100svh - var(--header-h, 64px) - var(--nurr-support-height, 34px) - 26px)) !important;
  min-height: min(640px, calc(100svh - var(--header-h, 64px) - var(--nurr-support-height, 34px) - 26px)) !important;
  display: flex !important;
  flex-direction: column !important;
}
.panel:not(.collapsed):not([style]) {
  top: calc(var(--header-h, 64px) + 14px) !important;
  right: 24px !important;
  left: auto !important;
}

.panel:not(.collapsed) .panel-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 18px !important;
}

@media (max-height: 760px) {
  .panel:not(.collapsed) {
    height: calc(100svh - var(--header-h, 64px) - var(--nurr-support-height, 34px) - 22px) !important;
    max-height: calc(100svh - var(--header-h, 64px) - var(--nurr-support-height, 34px) - 22px) !important;
    min-height: min(500px, calc(100svh - var(--header-h, 64px) - var(--nurr-support-height, 34px) - 22px)) !important;
  }
}

/* ── NURR UI polish v06: readable liquid panel, consistent buttons, taller panel ── */
.panel:not(.collapsed) {
  width: min(304px, calc(100vw - 50px)) !important;
  top: calc(var(--header-h, 64px) + 8px) !important;
  right: 20px !important;
  height: calc(100svh - var(--header-h, 64px) - var(--nurr-support-height, 34px) - 12px) !important;
  max-height: calc(100svh - var(--header-h, 64px) - var(--nurr-support-height, 34px) - 12px) !important;
  min-height: min(680px, calc(100svh - var(--header-h, 64px) - var(--nurr-support-height, 34px) - 12px)) !important;
  color: rgba(12, 10, 30, 0.94) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.44), rgba(255,255,255,0.26) 42%, rgba(255,255,255,0.18)),
    linear-gradient(180deg, rgba(18,14,34,0.10), rgba(18,14,34,0.03)) !important;
  backdrop-filter: blur(30px) saturate(1.35) brightness(1.10) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.35) brightness(1.10) !important;
  border: 1px solid rgba(255,255,255,0.48) !important;
  box-shadow: 0 18px 54px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.46) !important;
  text-shadow: 0 1px 1px rgba(255,255,255,0.34) !important;
}
.panel:not(.collapsed)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle at 24% 0%, rgba(255,255,255,0.23), transparent 40%),
    linear-gradient(90deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
}
.panel:not(.collapsed) > * { position: relative; z-index: 1; }

.panel-body { padding-bottom: 22px !important; }


@media (max-height: 760px) {
  .panel:not(.collapsed) {
    top: calc(var(--header-h, 64px) + 6px) !important;
    height: calc(100svh - var(--header-h, 64px) - var(--nurr-support-height, 34px) - 8px) !important;
    max-height: calc(100svh - var(--header-h, 64px) - var(--nurr-support-height, 34px) - 8px) !important;
    min-height: min(560px, calc(100svh - var(--header-h, 64px) - var(--nurr-support-height, 34px) - 8px)) !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   NURR cleanup v07 — single-source panel + readable liquid glass + no button shadows
   This block intentionally sits last and overrides the accumulated patch rules above.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  --nurr-panel-w: 304px;
  --nurr-panel-top-safe: calc(var(--header-h, 64px) + 14px);
  --nurr-panel-bottom-safe: 58px;
  --nurr-panel-ink: rgba(12, 10, 30, 0.92);
  --nurr-panel-ink-soft: rgba(12, 10, 30, 0.66);
  --nurr-panel-ink-faint: rgba(12, 10, 30, 0.48);
}

.panel:not(.collapsed) {
  width: min(var(--nurr-panel-w), calc(100vw - 48px)) !important;
  top: var(--nurr-panel-top-safe) !important;
  right: 22px !important;
  height: min(704px, calc(100svh - var(--header-h, 64px) - var(--nurr-support-height, 34px) - var(--nurr-panel-bottom-safe))) !important;
  min-height: min(560px, calc(100svh - var(--header-h, 64px) - var(--nurr-support-height, 34px) - var(--nurr-panel-bottom-safe))) !important;
  max-height: min(704px, calc(100svh - var(--header-h, 64px) - var(--nurr-support-height, 34px) - var(--nurr-panel-bottom-safe))) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  color: var(--nurr-panel-ink) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.66), rgba(246,246,251,0.50) 44%, rgba(236,236,246,0.42)),
    linear-gradient(140deg, rgba(255,255,255,0.34), rgba(255,255,255,0.12)) !important;
  -webkit-backdrop-filter: blur(36px) saturate(1.16) brightness(1.08) !important;
  backdrop-filter: blur(36px) saturate(1.16) brightness(1.08) !important;
  border: 1px solid rgba(255,255,255,0.58) !important;
  box-shadow: 0 18px 48px rgba(5, 4, 20, 0.16), inset 0 1px 0 rgba(255,255,255,0.58) !important;
  text-shadow: none !important;
}

.panel:not(.collapsed)::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.05)),
    radial-gradient(circle at 20% -12%, rgba(255,255,255,0.28), transparent 38%) !important;
}

.panel:not(.collapsed)::after {
  content: "" !important;
  position: absolute !important;
  inset: 62px 0 0 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: rgba(255,255,255,0.18) !important;
  border-top: 1px solid rgba(255,255,255,0.20) !important;
}

.panel:not(.collapsed) > * { position: relative !important; z-index: 1 !important; }
.panel-header { flex: 0 0 auto !important; color: var(--nurr-panel-ink) !important; }
.panel-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 20px !important;
  color: var(--nurr-panel-ink) !important;
}


.panel .panel-title {
  color: rgba(16, 14, 34, 0.78) !important;
  font-weight: 400 !important;
}


.panel .slider { opacity: 0.86 !important; }
.panel .slider::-webkit-slider-thumb { box-shadow: none !important; }
.panel .slider::-moz-range-thumb { box-shadow: none !important; }

@media (max-height: 760px) {
  .panel:not(.collapsed) {
    top: calc(var(--header-h, 64px) + 10px) !important;
    height: calc(100svh - var(--header-h, 64px) - var(--nurr-support-height, 34px) - 62px) !important;
    max-height: calc(100svh - var(--header-h, 64px) - var(--nurr-support-height, 34px) - 62px) !important;
    min-height: min(500px, calc(100svh - var(--header-h, 64px) - var(--nurr-support-height, 34px) - 62px)) !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   NURR v08 — liquid glass + safe panel sizing cleanup
   This block intentionally comes last: it overrides the older patch stack.
────────────────────────────────────────────────────────────── */
:root{
  --nurr-panel-ink: rgba(17,14,32,0.94);
  --nurr-panel-ink-soft: rgba(17,14,32,0.64);
  --nurr-panel-glass-a: rgba(255,255,255,0.42);
  --nurr-panel-glass-b: rgba(255,255,255,0.20);
  --nurr-panel-edge: rgba(255,255,255,0.55);
}
.panel:not(.collapsed){
  width: min(352px, calc(100vw - 48px)) !important;
  top: clamp(118px, 15vh, 174px) !important;
  right: 28px !important;
  height: calc(100svh - clamp(118px, 15vh, 174px) - var(--nurr-support-height, 34px) - 58px) !important;
  max-height: calc(100svh - clamp(118px, 15vh, 174px) - var(--nurr-support-height, 34px) - 58px) !important;
  min-height: min(650px, calc(100svh - clamp(118px, 15vh, 174px) - var(--nurr-support-height, 34px) - 58px)) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  border: 1px solid var(--nurr-panel-edge) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,0.70), rgba(255,255,255,0.18) 38%, rgba(255,255,255,0.08) 74%),
    linear-gradient(145deg, var(--nurr-panel-glass-a), var(--nurr-panel-glass-b) 54%, rgba(255,255,255,0.14)) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.85) contrast(1.03) !important;
  backdrop-filter: blur(30px) saturate(1.85) contrast(1.03) !important;
  box-shadow:
    0 28px 72px rgba(7, 6, 20, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.72),
    inset 0 -1px 0 rgba(255,255,255,0.20) !important;
  color: var(--nurr-panel-ink) !important;
}
.panel:not(.collapsed)::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  z-index:0 !important;
  border-radius: inherit !important;
  background:
    linear-gradient(115deg, rgba(255,255,255,0.48), rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.24) 100%),
    linear-gradient(rgba(255,255,255,0.12), rgba(255,255,255,0.03)) !important;
  mix-blend-mode: screen !important;
  opacity: .62 !important;
}
.panel:not(.collapsed)::after{
  content:"" !important;
  position:absolute !important;
  inset:62px 0 0 0 !important;
  pointer-events:none !important;
  z-index:0 !important;
  border-top:1px solid rgba(255,255,255,0.22) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04)) !important;
}
.panel:not(.collapsed) > *{ position:relative !important; z-index:1 !important; }

.panel-body{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-bottom:26px !important;
  color:var(--nurr-panel-ink) !important;
}


.panel .panel-title{ color:rgba(17,14,32,0.82) !important; font-weight:400 !important; }


@media (max-height:760px){
  .panel:not(.collapsed){
    top: calc(var(--header-h, 64px) + 12px) !important;
    height: calc(100svh - var(--header-h, 64px) - var(--nurr-support-height, 34px) - 64px) !important;
    max-height: calc(100svh - var(--header-h, 64px) - var(--nurr-support-height, 34px) - 64px) !important;
    min-height: min(520px, calc(100svh - var(--header-h, 64px) - var(--nurr-support-height, 34px) - 64px)) !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   NURR v09 — larger liquid glass panel + gradient tool cleanup
   Single final override block to avoid fighting older patch layers.
────────────────────────────────────────────────────────────── */
.panel:not(.collapsed) {
  height: clamp(650px, calc(100vh - 205px), 790px) !important;
  max-height: clamp(650px, calc(100vh - 205px), 790px) !important;
  min-height: 650px !important;
  width: min(352px, calc(100vw - 56px)) !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(255,255,255,0.54), rgba(255,255,255,0.18) 38%, rgba(255,255,255,0.10) 70%),
    linear-gradient(145deg, rgba(255,255,255,0.34), rgba(255,255,255,0.16) 48%, rgba(255,255,255,0.10)) !important;
  -webkit-backdrop-filter: blur(34px) saturate(1.9) contrast(1.08) !important;
  backdrop-filter: blur(34px) saturate(1.9) contrast(1.08) !important;
  border: 1px solid rgba(255,255,255,0.48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.62),
    inset 0 -1px 0 rgba(255,255,255,0.18),
    0 28px 90px rgba(0,0,0,0.18) !important;
}
.panel:not(.collapsed)::before {
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  border-radius:inherit !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.05) 36%, rgba(255,255,255,0.12)),
    radial-gradient(circle at 100% 10%, rgba(255,255,255,0.26), transparent 36%) !important;
  mix-blend-mode: screen !important;
  opacity:.72 !important;
  z-index:0 !important;
}
.panel:not(.collapsed) > * { position: relative !important; z-index: 1 !important; }
.panel:not(.collapsed) .panel-body {
  height: calc(100% - 132px) !important;
  max-height: calc(100% - 132px) !important;
  overflow-y: auto !important;
  padding-bottom: 26px !important;
}


.panel .panel-title,
.panel .panel-eyebrow { color: rgba(13,12,28,0.78) !important; }


@media (max-height: 760px) {
  .panel:not(.collapsed) {
    height: calc(100vh - 172px) !important;
    max-height: calc(100vh - 172px) !important;
    min-height: 520px !important;
  }
  .panel:not(.collapsed) .panel-body {
    height: calc(100% - 118px) !important;
    max-height: calc(100% - 118px) !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   NURR v10 — repair after v09: no neon UI, readable liquid glass,
   stable panel height, clean layout spacing.
────────────────────────────────────────────────────────────── */
:root{
  --nurr-panel-ink: rgba(12, 10, 28, 0.92);
  --nurr-panel-ink-soft: rgba(12, 10, 28, 0.68);
  --nurr-panel-rule: rgba(255,255,255,0.34);
}
.panel:not(.collapsed){
  width:min(348px, calc(100vw - 54px)) !important;
  top:calc(var(--header-h, 64px) + 16px) !important;
  right:22px !important;
  height:min(700px, calc(100svh - var(--header-h,64px) - var(--nurr-support-height,34px) - 70px)) !important;
  min-height:min(600px, calc(100svh - var(--header-h,64px) - var(--nurr-support-height,34px) - 70px)) !important;
  max-height:min(700px, calc(100svh - var(--header-h,64px) - var(--nurr-support-height,34px) - 70px)) !important;
  overflow:hidden !important;
  border-radius:22px !important;
  color:var(--nurr-panel-ink) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.32), rgba(255,255,255,0.13) 46%, rgba(255,255,255,0.08)),
    radial-gradient(circle at 16% 0%, rgba(255,255,255,0.40), rgba(255,255,255,0.10) 46%, rgba(255,255,255,0.04) 72%) !important;
  -webkit-backdrop-filter: blur(36px) saturate(1.9) contrast(1.06) !important;
  backdrop-filter: blur(36px) saturate(1.9) contrast(1.06) !important;
  border:1px solid rgba(255,255,255,0.48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.62),
    inset 0 -1px 0 rgba(255,255,255,0.16),
    0 30px 95px rgba(0,0,0,0.20) !important;
}
.panel:not(.collapsed)::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  border-radius:inherit !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.30), transparent 34%, rgba(255,255,255,0.10)),
    radial-gradient(circle at 100% 6%, rgba(255,255,255,0.26), transparent 38%) !important;
  mix-blend-mode:screen !important;
  opacity:.72 !important;
  z-index:0 !important;
}
.panel:not(.collapsed) > *{ position:relative !important; z-index:1 !important; }
.panel:not(.collapsed) .panel-header{ height:104px !important; padding:22px 22px 14px !important; }

.panel:not(.collapsed) .panel-body{
  height:calc(100% - 140px) !important;
  max-height:calc(100% - 140px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:16px 22px 34px !important;
}
.panel .section{ padding:14px 0 !important; margin:0 !important; border-color:rgba(10,8,24,0.11) !important; }


.panel .panel-title{ font-size:20px !important; line-height:1.06 !important; color:rgba(12,10,28,0.84) !important; }
.panel .panel-eyebrow{ color:rgba(12,10,28,0.76) !important; }


.panel .slider{ height:22px !important; }
.panel .slider::-webkit-slider-thumb{ box-shadow:0 1px 8px rgba(0,0,0,.18) !important; }
@media (max-height:760px){
  .panel:not(.collapsed){
    height:calc(100svh - var(--header-h,64px) - var(--nurr-support-height,34px) - 70px) !important;
    min-height:520px !important;
    max-height:calc(100svh - var(--header-h,64px) - var(--nurr-support-height,34px) - 70px) !important;
  }
  .panel:not(.collapsed) .panel-header{ height:96px !important; padding-top:18px !important; }
  .panel:not(.collapsed) .panel-body{ height:calc(100% - 132px) !important; max-height:calc(100% - 132px) !important; }
}