/* NanoChat polish layer (v14). Loaded after the main stylesheet. Light: no new libraries.
   Everything that moves is switched off under prefers-reduced-motion at the bottom. */

/* ---------- Generating shimmer (image jobs, placeholders, loading blocks) ---------- */
@keyframes ncSweep { from { transform: translateX(-120%) skewX(-12deg); } to { transform: translateX(220%) skewX(-12deg); } }
@keyframes ncAura { 0% { transform: rotate(0deg) scale(1.25); } 100% { transform: rotate(360deg) scale(1.25); } }
@keyframes ncBreath { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes ncTextShine { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.slot-pending, .nc-gen {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--fill3);
  animation: none;
}
.slot-pending::before, .nc-gen::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -1;
  background: conic-gradient(from 0deg,
    color-mix(in srgb, var(--brand) 22%, transparent),
    transparent 25%,
    color-mix(in srgb, #7b6cff 18%, transparent) 50%,
    transparent 75%,
    color-mix(in srgb, var(--brand) 22%, transparent));
  filter: blur(28px);
  animation: ncAura 6s linear infinite, ncBreath 2.8s ease-in-out infinite;
  pointer-events: none;
}
.slot-pending::after, .nc-gen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent);
  animation: ncSweep 1.8s cubic-bezier(.45, 0, .25, 1) infinite;
  pointer-events: none;
}
.dark .slot-pending::after, .dark .nc-gen::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent); }
.nc-gen-soft::before { opacity: .45; animation-duration: 9s, 3.6s; }
/* "Generating..." label: soft moving shine instead of static queue text */
[data-gal-progress], .slot-pending span {
  background: linear-gradient(90deg, var(--sub) 0%, var(--sub) 40%, var(--ink) 50%, var(--sub) 60%, var(--sub) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ncTextShine 2.4s linear infinite;
}
.slot-pending span svg, .slot-pending span * { -webkit-text-fill-color: initial; }

/* ---------- Toasts ---------- */
.nc-toast { box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .25); }
.nc-toast-btn {
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--ink);
  color: var(--bg);
  -webkit-text-fill-color: var(--bg);
  transition: transform .18s var(--spring), opacity .18s ease;
}
.nc-toast-btn:hover { transform: scale(1.04); }
.nc-toast-btn:active { transform: scale(.97); }

/* ---------- Model picker ---------- */
.nc-model-row { transition: background-color .15s ease, transform .2s var(--spring); }
.nc-model-row:active:not(:disabled) { transform: scale(.985); }
.nc-model-row[data-model-locked] .truncate { opacity: .8; }
.nc-upgrade-btn {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  height: 24px; padding: 0 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 650; letter-spacing: .01em;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 55%, #7b6cff));
  box-shadow: 0 4px 12px -6px var(--brand);
  transition: transform .2s var(--spring), box-shadow .2s ease;
}
.nc-model-row:hover .nc-upgrade-btn { transform: translateY(-1px) scale(1.04); box-shadow: 0 8px 16px -8px var(--brand); }
.nc-soon-pill {
  flex-shrink: 0; height: 20px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600; color: var(--sub); background: var(--fill3); border: var(--hair) solid var(--line);
}
.nc-model-row[data-model-soon] { cursor: default; }
.nc-byok-tag {
  flex-shrink: 0; font-size: 10.5px; font-weight: 600; line-height: 16px; padding: 0 6px; border-radius: 6px;
  color: var(--brand-ink); background: var(--brand-soft);
}
.nc-pick-head {
  margin: 8px 10px 2px; padding-top: 8px; border-top: var(--hair) solid var(--line);
  font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--sub3);
}
.nc-pick-add {
  margin: 6px 4px 2px; padding: 9px 10px; border-radius: 11px; text-align: left;
  font-size: 12.5px; font-weight: 500; color: var(--sub);
  border: 1px dashed var(--line);
  transition: background-color .15s ease, color .15s ease;
}
.nc-pick-add:hover { background: var(--hover); color: var(--ink); }

/* ---------- Settings: API keys ---------- */
.nc-key-chip {
  font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  color: #1f7a3a; background: rgba(48, 209, 88, .14);
}
.dark .nc-key-chip { color: #6fe08f; }
.nc-key-models li { transition: background-color .15s ease; }
.nc-key-models li:hover { background: var(--hover); }

/* ---------- Info (i) popover ---------- */
.nc-info-pop {
  border-radius: 16px !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 18px 48px -18px rgba(0, 0, 0, .45), 0 2px 6px -2px rgba(0, 0, 0, .12) !important;
  transform-origin: bottom left;
}
.nc-info-pop > div > div + div { padding-top: 10px; border-top: var(--hair) solid var(--line2); }
.nc-info-pop .grid { row-gap: 6px; }
.nc-info-pop .grid > span { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }

/* ---------- Custom tooltips (replace native title boxes) ---------- */
.nc-tip {
  position: fixed; z-index: 120; left: 0; top: 0; pointer-events: none;
  max-width: min(280px, calc(100vw - 16px));
  padding: 6px 10px; border-radius: 9px;
  font-size: 12px; line-height: 1.35; font-weight: 500;
  color: var(--bg); background: color-mix(in srgb, var(--ink) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .5);
  opacity: 0; transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(.94);
  transition: opacity .14s ease, transform .2s var(--spring);
  white-space: pre-line; word-wrap: break-word;
}
.nc-tip.is-on { opacity: 1; transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(1); }

/* ---------- Sidebar collapse / expand (desktop): glass while it moves ---------- */
.nc-side-anim { overflow: hidden; will-change: width, transform, opacity, filter; }
.nc-side-anim::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 60%, rgba(255, 255, 255, .08));
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .slot-pending::before, .nc-gen::before, .slot-pending::after, .nc-gen::after,
  [data-gal-progress], .slot-pending span { animation: none !important; }
  .nc-tip, .nc-toast-btn, .nc-model-row, .nc-upgrade-btn { transition: none !important; }
}

/* ======================= v2 (2026-11-04) ======================= */
/* image caption: "Normal quality · generated with FLUX.1 Schnell" */
.nc-cap {
  max-width: 420px; margin: 2px 2px 8px; display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; line-height: 1.3; color: var(--sub3); letter-spacing: .01em;
}
.nc-cap::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: var(--brand); opacity: .65; flex-shrink: 0; }

/* Settings > API keys: show-in-picker switch */
.nc-keys-hint { margin: -2px 2px 8px; font-size: 12.5px; color: var(--sub); }
.nc-keys-hint b { color: var(--ink); font-weight: 600; }
.nc-img-tag { color: #8a4b12; background: rgba(240, 160, 70, .18); }
.dark .nc-img-tag { color: #f7c08a; }
.nc-switch {
  position: relative; width: 34px; height: 20px; border-radius: 99px; flex-shrink: 0;
  background: var(--fill3); border: var(--hair) solid var(--line); transition: background-color .2s ease;
}
.nc-switch span {
  position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 99px; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .28s var(--spring, cubic-bezier(.3,1.4,.5,1));
}
.nc-switch.on { background: var(--brand); border-color: transparent; }
.nc-switch.on span { transform: translateX(14px); }
.nc-switch:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Turnstile: only visible when Cloudflare asks for an interaction */
.nc-ts {
  position: fixed; inset: auto 0 24px 0; z-index: 200; display: flex; justify-content: center; pointer-events: none;
  opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .2s ease, transform .35s var(--spring, ease);
}
.nc-ts.on { opacity: 1; transform: none; pointer-events: auto; }
.nc-ts:not(.on) .nc-ts-card { visibility: hidden; }
.nc-ts-card {
  padding: 14px 16px 10px; border-radius: 18px; background: var(--panel); border: var(--hair) solid var(--line);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .5);
}
.nc-ts-title { font-weight: 650; font-size: 14px; color: var(--ink); }
.nc-ts-sub { font-size: 12.5px; color: var(--sub); margin: 2px 0 8px; }

/* Waitlist screen */
.nc-wl-screen {
  position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: 20px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  opacity: 0; transition: opacity .35s ease; overflow: hidden;
}
.nc-wl-screen.in { opacity: 1; }
.nc-wl-screen.out { opacity: 0; }
.nc-wl-glow i {
  position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(60px); opacity: .35;
  background: radial-gradient(circle, var(--brand) 0%, transparent 65%); animation: ncWlFloat 14s ease-in-out infinite;
}
.nc-wl-glow i:nth-child(1) { left: -12vmax; top: -14vmax; }
.nc-wl-glow i:nth-child(2) { right: -16vmax; bottom: -18vmax; animation-delay: -5s; background: radial-gradient(circle, #7aa7ff 0%, transparent 65%); }
.nc-wl-glow i:nth-child(3) { left: 30%; bottom: -30vmax; animation-delay: -9s; opacity: .22; }
@keyframes ncWlFloat { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(3vmax, -2vmax, 0) scale(1.08); } }
.nc-wl-card {
  position: relative; width: min(440px, 100%); text-align: center; padding: 34px 28px 24px; border-radius: 28px;
  background: color-mix(in srgb, var(--panel) 92%, transparent); border: var(--hair) solid var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 40px 90px -40px rgba(0, 0, 0, .55);
  transform: translateY(18px) scale(.96); transition: transform .6s var(--spring, cubic-bezier(.3,1.4,.5,1));
}
.nc-wl-screen.in .nc-wl-card { transform: none; }
.nc-wl-orb { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 22px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--brand), color-mix(in srgb, var(--brand) 40%, #7aa7ff)); box-shadow: 0 14px 30px -12px var(--brand); }
.nc-wl-orb span { width: 22px; height: 22px; border-radius: 99px; border: 3px solid rgba(255, 255, 255, .9); border-top-color: transparent; animation: ncWlSpin 1.6s linear infinite; }
@keyframes ncWlSpin { to { transform: rotate(360deg); } }
.nc-wl-kicker { font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-ink, var(--brand)); }
.nc-wl-card h1 { margin: 6px 0 4px; font-size: 26px; font-weight: 650; letter-spacing: -.02em; color: var(--ink); }
.nc-wl-num { font-size: 56px; font-weight: 700; letter-spacing: -.04em; line-height: 1; margin-top: 12px; color: var(--ink); font-variant-numeric: tabular-nums; }
.nc-wl-num span { font-size: 28px; color: var(--sub3); margin-right: 2px; vertical-align: 18px; }
.nc-wl-cap2 { font-size: 12.5px; color: var(--sub); margin-bottom: 6px; }
.nc-wl-p { margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: var(--sub); }
.nc-wl-p b { color: var(--ink); font-weight: 600; word-break: break-all; }
.nc-wl-steps { display: flex; gap: 8px; justify-content: center; margin: 18px 0 4px; padding: 0; list-style: none; flex-wrap: wrap; }
.nc-wl-steps li { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sub); padding: 6px 10px 6px 6px; border-radius: 99px; background: var(--fill3); }
.nc-wl-steps b { width: 18px; height: 18px; border-radius: 99px; display: grid; place-items: center; font-size: 11px; color: var(--bg); background: var(--ink); }
.nc-wl-back { margin-top: 20px; height: 42px; padding: 0 22px; border-radius: 99px; font-size: 14px; font-weight: 600; color: var(--bg); background: var(--ink); transition: transform .2s var(--spring, ease); }
.nc-wl-back:hover { transform: translateY(-1px); }
.nc-wl-back:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* Admin > Waitlist */
.nc-wl { display: flex; flex-direction: column; gap: 14px; }
.nc-wl-stats { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.nc-wl-stat { min-width: 120px; padding: 12px 14px; border-radius: 14px; background: var(--fill3); display: flex; flex-direction: column; }
.nc-wl-stat b { font-size: 22px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.nc-wl-stat span { font-size: 12px; color: var(--sub); }
.nc-wl-cap { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; border: var(--hair) solid var(--line); font-size: 13px; color: var(--sub); }
.nc-wl-cap input { width: 80px; height: 32px; border-radius: 9px; padding: 0 8px; background: transparent; border: var(--hair) solid var(--line); color: var(--ink); }
.nc-wl-cap button, .nc-wl-next, .nc-wl-ok { height: 30px; padding: 0 12px; border-radius: 99px; font-size: 12.5px; font-weight: 600; color: var(--bg); background: var(--ink); }
.nc-wl-no { height: 30px; padding: 0 12px; border-radius: 99px; font-size: 12.5px; color: var(--sub); border: var(--hair) solid var(--line); }
.nc-wl-no:hover { color: var(--ink); background: var(--hover); }
.nc-wl-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.nc-wl-warn { font-size: 12.5px; color: #b45309; }
.nc-wl-list { list-style: none; margin: 0; padding: 0; border-radius: 14px; border: var(--hair) solid var(--line); overflow: hidden; }
.nc-wl-list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13px; }
.nc-wl-list li + li { border-top: var(--hair) solid var(--line2, var(--line)); }
.nc-wl-pos { width: 34px; color: var(--sub3); font-variant-numeric: tabular-nums; }
.nc-wl-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nc-wl-who b { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-wl-who small { color: var(--sub3); font-size: 11.5px; }
.nc-wl-st { font-size: 11px; font-weight: 650; padding: 2px 8px; border-radius: 99px; background: var(--fill3); color: var(--sub); text-transform: capitalize; }
.nc-wl-st.approved { color: #1f7a3a; background: rgba(48, 209, 88, .14); }
.nc-wl-st.rejected { color: #b42318; background: rgba(240, 68, 56, .12); }
.nc-wl-empty { padding: 26px; text-align: center; color: var(--sub); border-radius: 14px; background: var(--fill3); font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
  .nc-wl-glow i, .nc-wl-orb span { animation: none !important; }
  .nc-wl-card, .nc-ts, .nc-switch span { transition: none !important; }
}

/* ---------- v3: sign-up / log-in modal over the app (guests) ---------- */
@keyframes ncAuthIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ncAuthCardIn { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
.nc-auth-ov {
  position: fixed; inset: 0; z-index: 190; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  animation: ncAuthIn .22s ease both; transition: opacity .19s ease;
}
.nc-auth-ov.out { opacity: 0; }
.nc-auth-ov.out .nc-auth-card { transform: translateY(10px) scale(.97); opacity: 0; }
.nc-auth-card.nc-auth-card {
  max-height: calc(100% - 8px); overflow-y: auto; border-radius: 28px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 40px 90px -40px rgba(0, 0, 0, .55);
  animation: ncAuthCardIn .5s var(--spring, cubic-bezier(.3, 1.4, .5, 1)) both;
  transition: transform .19s ease, opacity .19s ease;
}
.nc-auth-x {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 99px; display: grid; place-items: center;
  color: var(--sub); transition: background-color .15s ease, color .15s ease, transform .2s var(--spring, ease);
}
.nc-auth-x:hover { background: var(--hover); color: var(--ink); transform: rotate(90deg); }
.nc-auth-x:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.nc-auth-why {
  margin: 6px 26px 14px; padding: 8px 12px; border-radius: 14px; text-align: center;
  font-size: 12.5px; line-height: 1.45; color: var(--brand-ink, var(--ink)); background: var(--brand-soft, var(--fill3));
}
.nc-otp-status.is-sending::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: ncBreath 1s ease-in-out infinite; }
.nc-otp-status.is-sending::after { content: "\2026"; }

/* guest calls to action */
.nc-guest-cta { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 14px; background: var(--fill3); }
.nc-guest-cta-t { font-size: 12.5px; line-height: 1.4; color: var(--sub); }
.nc-guest-cta-b { display: flex; gap: 6px; }
.nc-guest-signup, .nc-guest-login { height: 34px; padding: 0 12px; border-radius: 99px; font-size: 13px; font-weight: 600; transition: transform .2s var(--spring, ease), opacity .15s ease; }
.nc-guest-signup { flex: 1; color: var(--bg); background: var(--ink); }
.nc-guest-login { color: var(--ink); border: var(--hair) solid var(--line); background: var(--panel); }
.nc-guest-signup:hover, .nc-guest-login:hover { transform: translateY(-1px); }
.nc-guest-cta-c { color: var(--sub); }
.nc-guest-cta-c:hover { color: var(--ink); }
.nc-guest-pill {
  height: 36px; padding: 0 14px; border-radius: 99px; font-size: 13px; font-weight: 600; white-space: nowrap;
  color: var(--bg); background: var(--ink); transition: transform .2s var(--spring, ease), opacity .15s ease;
}
.nc-guest-pill.ghost { color: var(--ink); background: var(--panel); border: var(--hair) solid var(--line); }
.nc-guest-pill:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .nc-auth-ov, .nc-auth-card.nc-auth-card { animation: none !important; transition: none !important; }
}

/* ============================================================== v5: glass, buttons, motion (2026-11-04)
   Everything animates transform / opacity only (plus one grid-row collapse for the Turnstile row) and respects
   prefers-reduced-motion and prefers-reduced-transparency. */
:root {
  --nc-spring: linear(0, 0.058, 0.185, 0.341, 0.499, 0.644, 0.767, 0.865, 0.937, 0.987, 1.019, 1.037, 1.044, 1.044, 1.04, 1.033, 1.026, 1.019, 1.013, 1.008, 1.005, 1.002, 1.0, 0.999, 0.998, 0.998, 0.998, 0.998, 0.999, 0.999, 1);
  --nc-out: cubic-bezier(.2, .8, .2, 1);
  --v5-glass: rgba(255, 255, 255, .62);
  --v5-glass-strong: rgba(255, 255, 255, .74);
  --v5-line: rgba(40, 34, 26, .11);
  --v5-hi: rgba(255, 255, 255, .85);
  --v5-blur: blur(20px) saturate(160%);
  --v5-shadow: 0 1px 1px rgba(30, 25, 20, .04), 0 8px 20px -10px rgba(30, 25, 20, .16), 0 28px 60px -24px rgba(30, 25, 20, .30);
  --v5-solid: #fbfaf8;
  --v5-danger: #d4483b;
  --v5-ok: #1f9d55;
}
.dark {
  --v5-glass: rgba(42, 42, 40, .58);
  --v5-glass-strong: rgba(38, 38, 36, .72);
  --v5-line: rgba(255, 250, 240, .11);
  --v5-hi: rgba(255, 255, 255, .09);
  --v5-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 10px 24px -12px rgba(0, 0, 0, .55), 0 32px 70px -28px rgba(0, 0, 0, .8);
  --v5-solid: #2a2a28;
  --v5-danger: #ff6b5e;
  --v5-ok: #4fd68a;
}
@supports not (animation-timing-function: linear(0, 1)) { :root { --nc-spring: cubic-bezier(.3, 1.25, .5, 1); } }

/* ---- real glass on every floating surface: popups, menus, popovers, toasts, dialogs, auth modal, tooltips */
.nc-glass, .liquid, .glass, .nc-info-pop, .nc-tip, .nc-auth-card.nc-auth-card, [role="menu"], [role="listbox"].liquid {
  background: linear-gradient(180deg, var(--v5-hi) -60%, transparent 40%), var(--v5-glass);
  -webkit-backdrop-filter: var(--v5-blur);
  backdrop-filter: var(--v5-blur);
  border: 1px solid var(--v5-line);
  box-shadow: inset 0 1px 0 var(--v5-hi), inset 0 0 0 .5px color-mix(in srgb, var(--v5-hi) 40%, transparent), var(--v5-shadow);
}
.liquid, .nc-auth-card.nc-auth-card { background: linear-gradient(180deg, var(--v5-hi) -60%, transparent 40%), var(--v5-glass-strong); }
.dark .nc-glass, .dark .liquid, .dark .nc-auth-card.nc-auth-card { background-blend-mode: normal; }
.pane-btn { -webkit-backdrop-filter: var(--v5-blur); backdrop-filter: var(--v5-blur); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nc-glass, .liquid, .glass, .nc-info-pop, .nc-tip, .nc-auth-card.nc-auth-card, [role="menu"] { background: var(--v5-solid) !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .nc-glass, .liquid, .glass, .nc-info-pop, .nc-tip, .nc-auth-card.nc-auth-card, [role="menu"], .pane-btn, .nc-seg {
    background: var(--v5-solid) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
}

/* ---- buttons: one system derived from the top-bar pill buttons */
.nc-btn {
  --b-bg: var(--g-bg); --b-fg: var(--ink); --b-line: var(--g-line);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px; border-radius: 999px; white-space: nowrap;
  font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; color: var(--b-fg);
  background: var(--b-bg); border: 1px solid var(--b-line);
  -webkit-backdrop-filter: var(--v5-blur); backdrop-filter: var(--v5-blur);
  box-shadow: inset 0 .5px 0 var(--g-hi), 0 1px 2px rgba(0, 0, 0, .05);
  transition: transform .45s var(--nc-spring), box-shadow .25s ease, background-color .2s ease, opacity .2s ease, color .2s ease;
  -webkit-tap-highlight-color: transparent; cursor: pointer; user-select: none;
}
.nc-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: inset 0 .5px 0 var(--g-hi), 0 6px 16px -8px rgba(0, 0, 0, .28); }
.nc-btn:active:not(:disabled) { transform: scale(.965); transition-duration: .09s; }
.nc-btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand) 70%, transparent); outline-offset: 2px; }
.nc-btn:disabled { opacity: .5; cursor: default; }
.nc-btn-secondary:hover:not(:disabled) { --b-bg: var(--g-bg-strong); }
.nc-btn-primary { --b-bg: var(--ink); --b-fg: var(--bg); --b-line: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(0, 0, 0, .12); }
.nc-btn-primary:hover:not(:disabled) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 10px 22px -10px rgba(0, 0, 0, .5); }
.dark .nc-btn-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 2px rgba(0, 0, 0, .3); }
.nc-btn-danger { --b-bg: linear-gradient(180deg, #e0564a, #c93d31); --b-fg: #fff; --b-line: transparent; background: var(--b-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(150, 30, 20, .25); }
.nc-btn-danger:hover:not(:disabled) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 24px -10px rgba(201, 61, 49, .7); }
.nc-btn-ghost { --b-bg: transparent; --b-line: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--sub); }
.nc-btn-ghost:hover:not(:disabled) { --b-bg: var(--hover); color: var(--ink); box-shadow: none; }
.nc-btn-sm { height: 30px; padding: 0 12px; font-size: 12.5px; }
.nc-btn-block { width: 100%; height: 44px; font-size: 14px; }
/* existing buttons pick up the same feel */
.pane-btn { transition: transform .45s var(--nc-spring), background-color .2s ease, box-shadow .25s ease, color .2s ease; }
.pane-btn:hover { transform: translateY(-1px); box-shadow: inset 0 .5px 0 var(--g-hi), 0 6px 14px -8px rgba(0, 0, 0, .25); }
.pane-btn:active { transform: scale(.92); transition-duration: .09s; }
button.bg-ink:not(.nc-btn), .nc-guest-pill, .nc-guest-signup, .nc-wl-back, .nc-wl-ok, .nc-wl-next, .nc-wl-cap button {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(0, 0, 0, .12);
  transition: transform .45s var(--nc-spring), box-shadow .25s ease, opacity .2s ease;
}
button.bg-ink:not(.nc-btn):hover:not(:disabled), .nc-guest-pill:hover, .nc-guest-signup:hover, .nc-wl-back:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 10px 22px -10px rgba(0, 0, 0, .45); }
button.hairline.rounded-full, .nc-guest-pill.ghost, .nc-guest-login, .nc-wl-no {
  background: var(--g-bg); border: 1px solid var(--g-line) !important; box-shadow: inset 0 .5px 0 var(--g-hi), 0 1px 2px rgba(0, 0, 0, .05);
  transition: transform .45s var(--nc-spring), background-color .2s ease, box-shadow .25s ease;
}
button.hairline.rounded-full:hover:not(:disabled), .nc-guest-pill.ghost:hover, .nc-guest-login:hover { background: var(--g-bg-strong); transform: translateY(-1px); }
button.rounded-full:not(:disabled):active, button.rounded-xl:not(:disabled):active, .nc-guest-pill:active, .nc-guest-signup:active, .nc-guest-login:active, .nc-wl-back:active { transform: scale(.965); transition-duration: .09s; }

/* ---- toasts */
.nc-toast {
  display: flex; align-items: center; gap: 10px; min-height: 44px; max-width: min(520px, 100%);
  padding: 7px 14px 7px 8px; border-radius: 18px; font-size: 13.5px; line-height: 1.35; font-weight: 520; color: var(--ink);
  cursor: default; will-change: transform, opacity;
}
.nc-toast:has(.nc-btn) { padding-right: 7px; }
.nc-toast-ico { flex-shrink: 0; width: 28px; height: 28px; border-radius: 10px; display: grid; place-items: center; color: var(--brand-ink); background: var(--brand-soft); }
.nc-toast[data-tone="ok"] .nc-toast-ico { color: var(--v5-ok); background: color-mix(in srgb, var(--v5-ok) 14%, transparent); }
.nc-toast[data-tone="err"] .nc-toast-ico { color: var(--v5-danger); background: color-mix(in srgb, var(--v5-danger) 13%, transparent); }
.nc-toast-txt { min-width: 0; flex: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ---- confirm dialog */
.nc-dlg-wrap { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; padding: 20px; }
.nc-dlg-scrim { position: absolute; inset: 0; background: rgba(24, 20, 16, .26); }
.dark .nc-dlg-scrim { background: rgba(0, 0, 0, .45); }
.nc-dlg { position: relative; width: min(392px, 100%); padding: 26px 22px 20px; border-radius: 28px; text-align: center; will-change: transform, opacity; }
.nc-dlg-ico { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 18px; display: grid; place-items: center; color: var(--ink); background: var(--fill3); box-shadow: inset 0 1px 0 var(--v5-hi); }
.nc-dlg.is-danger .nc-dlg-ico { color: var(--v5-danger); background: color-mix(in srgb, var(--v5-danger) 12%, transparent); }
.nc-dlg-title { font-size: 17.5px; font-weight: 650; letter-spacing: -.015em; line-height: 1.3; color: var(--ink); }
.nc-dlg-body { margin: 6px auto 0; max-width: 300px; font-size: 13.5px; line-height: 1.5; color: var(--sub); }
.nc-dlg-subject { margin-top: 16px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; text-align: left;
  background: color-mix(in srgb, var(--ink) 4.5%, transparent); border: 1px solid var(--v5-line); }
.nc-dlg-subject img { width: 44px; height: 44px; flex-shrink: 0; border-radius: 11px; object-fit: cover; }
.nc-dlg-subject span { min-width: 0; font-size: 13px; line-height: 1.4; color: var(--ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nc-dlg-actions { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nc-dlg-actions .nc-btn { height: 44px; font-size: 14px; }
.nc-input { width: 100%; border-radius: 12px; border: 1px solid var(--line); background: transparent; padding: 9px 12px; font-size: 14px; outline: none; }
.nc-input:focus { border-color: color-mix(in srgb, var(--ink) 30%, transparent); }

/* ---- Turnstile: our own row inside the sign-in card */
.nc-ts-slot:empty { display: none; }
.nc-ts-slot { margin: 0 0 12px; }
.nc-ts-host { position: fixed; left: -10000px; top: 0; width: 320px; }
.nc-ts-row { border-radius: 12px; border: 1px solid var(--line); background: transparent; overflow: hidden; cursor: default;
  transition: border-color .3s ease, background-color .3s ease; }
.nc-ts-status { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 13px; font-size: 13px; color: var(--sub); transition: height .4s var(--nc-spring); }
.nc-ts-mark { position: relative; width: 18px; height: 18px; flex-shrink: 0; border-radius: 99px; }
.nc-ts-mark i { position: absolute; inset: 0; border-radius: 99px; border: 2px solid color-mix(in srgb, var(--ink) 18%, transparent); border-top-color: var(--ink); animation: ncTsSpin .8s linear infinite; }
@keyframes ncTsSpin { to { transform: rotate(360deg); } }
.nc-ts-row[data-state="ok"] { border-color: color-mix(in srgb, var(--v5-ok) 32%, transparent); background: color-mix(in srgb, var(--v5-ok) 7%, transparent); }
.nc-ts-row[data-state="ok"] .nc-ts-status { height: 34px; color: color-mix(in srgb, var(--v5-ok) 80%, var(--ink)); font-weight: 560; }
.nc-ts-row[data-state="ok"] .nc-ts-mark { background: var(--v5-ok); animation: ncTsPop .5s var(--nc-spring) both; }
.nc-ts-row[data-state="ok"] .nc-ts-mark i { animation: none; border: 0; inset: 5px 4px 6px 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; border-radius: 0; transform: rotate(-45deg) translate(1px, -1px); }
@keyframes ncTsPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.nc-ts-row[data-state="challenge"] { border-color: color-mix(in srgb, var(--brand) 40%, transparent); }
.nc-ts-row[data-state="challenge"] .nc-ts-mark i { animation: none; border-color: var(--brand); background: var(--brand-soft); }
.nc-ts-row[data-state="error"] { border-color: color-mix(in srgb, var(--v5-danger) 40%, transparent); cursor: pointer; }
.nc-ts-row[data-state="error"] .nc-ts-status { color: var(--v5-danger); }
.nc-ts-row[data-state="error"] .nc-ts-mark i { animation: none; border-color: var(--v5-danger); }
.nc-ts-w { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--nc-spring); }
.nc-ts-in { min-height: 0; overflow: hidden; padding: 0 8px; }
.nc-ts-row[data-state="challenge"] .nc-ts-w { grid-template-rows: 1fr; }
.nc-ts-row[data-state="challenge"] .nc-ts-in { padding-bottom: 8px; }
.nc-ts-in iframe { display: block; max-width: 100%; }
.nc-ts { display: none !important; } /* v2-v4 floating box: retired */

/* ---- auth card: same glass, input row look */
.nc-auth-ov { background: color-mix(in srgb, var(--bg) 42%, transparent); }
.nc-auth-card.nc-auth-card input { background: color-mix(in srgb, var(--panel) 55%, transparent); }

/* ---- top bar: title (one line, ellipsis, marquee on hover / tap) + Chat | Images switcher */
.nc-topbar { height: 38px; padding: 0 0 0 18px; }
.nc-topbar-l { max-width: calc(50% - 128px); }
.nc-topbar-c { position: absolute; left: 50%; transform: translateX(-50%); }
.nc-title { position: relative; display: flex; align-items: center; height: 36px; min-width: 0; max-width: 100%; overflow: hidden; cursor: default;
  font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
[data-mobile-title] .nc-title { justify-content: center; margin: 0 auto; }
[data-mobile-title] .nc-title.is-long { justify-content: flex-start; }
.nc-title-in { display: block; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; will-change: transform, opacity; }
.nc-title.is-long { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); }
.nc-title.is-long:hover .nc-title-in, .nc-title.is-run .nc-title-in { overflow: visible; text-overflow: clip; max-width: none; animation: ncMarq var(--nc-dur, 4s) ease-in-out .35s infinite alternate; }
.nc-title.is-long:hover, .nc-title.is-run { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); }
@keyframes ncMarq { 0%, 10% { translate: 0 0; } 90%, 100% { translate: var(--nc-shift, 0) 0; } }
.nc-temp-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; margin-right: 8px; border-radius: 99px; vertical-align: 1px;
  font-size: 11px; font-weight: 650; letter-spacing: .01em; color: var(--brand-ink); background: var(--brand-soft); }
.nc-seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 176px; height: 36px; padding: 3px; border-radius: 999px; }
.nc-seg button { position: relative; z-index: 1; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--sub); transition: color .25s ease, transform .4s var(--nc-spring); }
.nc-seg button:hover { color: var(--ink); }
.nc-seg button:active { transform: scale(.95); transition-duration: .09s; }
.nc-seg button[aria-selected="true"] { color: var(--ink); }
.nc-seg button:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand) 70%, transparent); outline-offset: -2px; }
.nc-seg-ind { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--panel);
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .8), 0 1px 2px rgba(0, 0, 0, .08), 0 6px 14px -6px rgba(0, 0, 0, .22);
  transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .55s var(--nc-spring); will-change: transform; }
.dark .nc-seg-ind { background: #3b3b38; box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .12), 0 6px 14px -6px rgba(0, 0, 0, .6); }
@media (max-width: 767px) { .nc-seg { width: 150px; height: 34px; } .nc-seg button { font-size: 12.5px; } }

/* ---- skeletons for lazy views */
.nc-skel-view { width: 100%; max-width: 1000px; margin: 0 auto; padding: 72px 24px 24px; animation: ncFadeIn .3s ease both; }
@keyframes ncFadeIn { from { opacity: 0; } to { opacity: 1; } }
.nc-sk { position: relative; overflow: hidden; border-radius: 14px; background: var(--fill3); }
.nc-sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--panel) 70%, transparent), transparent); animation: ncSkel 1.4s ease-in-out infinite; }
.dark .nc-sk::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent); }
@keyframes ncSkel { to { transform: translateX(100%); } }
.nc-sk-h { height: 28px; width: 38%; }
.nc-sk-s { height: 14px; width: 58%; margin-top: 12px; }
.nc-sk-grid { margin-top: 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.nc-sk-grid .nc-sk { aspect-ratio: 1; }
.nc-sk-list { margin-top: 28px; display: grid; gap: 10px; }
.nc-sk-list .nc-sk { height: 64px; }
@media (max-width: 767px) { .nc-sk-grid { grid-template-columns: repeat(2, 1fr); } .nc-skel-view { padding: 64px 16px 16px; } }

/* ---- in-app loaders: streaming dots and image generation get a calmer, modern rhythm */
.typing i { animation-timing-function: cubic-bezier(.45, 0, .55, 1) !important; }

/* ---- scroll containment: the shell never scrolls, each pane scrolls on its own, no chaining */
html, body { overflow: hidden; overscroll-behavior: none; }

#root { overflow: hidden; }
.overflow-y-auto, .overflow-auto, .nc-scroll, [data-side-scroll], [data-scroll-pane] { overscroll-behavior: contain; }
.nc-sticky-head { position: sticky; top: 0; z-index: 6; margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; padding-bottom: 12px;
  background: linear-gradient(var(--bg) 70%, color-mix(in srgb, var(--bg) 0%, transparent)); }
@media (min-width: 768px) { .nc-sticky-head { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; } }
html.nc-locked [data-side-scroll], html.nc-locked [data-scroll-pane] { overflow: hidden !important; }

@media (prefers-reduced-motion: reduce) {
  .nc-btn, .pane-btn, .nc-seg-ind, .nc-seg button, .nc-ts-w, .nc-ts-status, .nc-sk::after, .nc-title-in, .nc-skel-view { transition: none !important; animation: none !important; }
  .nc-btn:hover, .pane-btn:hover, .nc-btn:active, .pane-btn:active { transform: none !important; }
}
.nc-topbar { height: 64px; padding: 0 0 4px 18px; background: linear-gradient(var(--bg) 58%, color-mix(in srgb, var(--bg) 0%, transparent)); }
.nc-topbar { left: 0 !important; right: 0 !important; top: 0; }
.nc-topbar-r { z-index: 22 !important; }
@media (max-width: 767px) { .nc-toast-wrap { top: calc(env(safe-area-inset-top) + 10px) !important; } }
/* large modals (Settings, image preview sheets): stronger glass so dense content stays readable */
.modal-float, .modal-float.bg-panel {
  background: linear-gradient(180deg, var(--v5-hi) -80%, transparent 30%), color-mix(in srgb, var(--panel) 80%, transparent) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--v5-line); box-shadow: inset 0 1px 0 var(--v5-hi), var(--v5-shadow) !important;
}
@media (prefers-reduced-transparency: reduce) { .modal-float { background: var(--v5-solid) !important; -webkit-backdrop-filter: none; backdrop-filter: none; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .modal-float { background: var(--panel) !important; } }
.nc-sticky-head { background: var(--bg); box-shadow: 0 14px 14px -14px rgba(0, 0, 0, .12); }

/* ---- v5.2: activity panel, image failure card, mobile sheet, admin, plans */
.nc-act{margin:2px 0 8px;max-width:520px;border:1px solid rgba(40,34,26,.09);border-radius:14px;background:rgba(255,255,255,.55);overflow:hidden;transition:border-color .2s}
.dark .nc-act{border-color:rgba(255,250,240,.08);background:rgba(255,255,255,.03)}
.nc-act.is-done{background:transparent;border-color:transparent}
.nc-act-head{display:flex;width:100%;align-items:center;gap:8px;padding:8px 12px;font-size:13px;text-align:left;color:inherit}
.nc-act.is-done .nc-act-head{padding:2px 0;color:var(--sub,#8a857d);width:auto}
.nc-act.is-done .nc-act-head:hover{color:inherit}
.nc-act-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nc-act.is-done .nc-act-title{flex:0 1 auto}
.nc-act-time{font-variant-numeric:tabular-nums;font-size:12px;opacity:.6}
.nc-act-ok{color:#3f9b6b}
.nc-act-chev{transition:transform .2s;opacity:.7}
.nc-act-spin{width:13px;height:13px;border-radius:50%;border:2px solid rgba(223,138,92,.25);border-top-color:#df8a5c;animation:ncActSpin .8s linear infinite;flex-shrink:0}
@keyframes ncActSpin{to{transform:rotate(360deg)}}
.nc-act-steps{list-style:none;margin:0;padding:2px 12px 10px 12px;display:flex;flex-direction:column;gap:7px}
.nc-act.is-done .nc-act-steps{padding:4px 0 6px 4px}
.nc-act-step{display:flex;gap:9px;font-size:12.5px;line-height:1.45}
.nc-act-dot{width:7px;height:7px;border-radius:50%;margin-top:6px;flex-shrink:0;background:#3f9b6b}
.nc-act-step.on .nc-act-dot{background:#df8a5c;box-shadow:0 0 0 4px rgba(223,138,92,.16);animation:ncActPulse 1.4s ease-in-out infinite}
@keyframes ncActPulse{50%{box-shadow:0 0 0 7px rgba(223,138,92,.05)}}
.nc-act-step.ok .nc-act-lbl{opacity:.72}
.nc-act-det{font-size:12px;opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nc-act-prompt{margin-top:4px;padding:6px 9px;border-radius:9px;background:rgba(60,50,40,.05);font-size:12px;line-height:1.45;max-height:7.5em;overflow:auto;white-space:pre-wrap;word-break:break-word}
.dark .nc-act-prompt{background:rgba(255,250,240,.05)}
@media (prefers-reduced-motion:reduce){.nc-act-spin,.nc-act-step.on .nc-act-dot{animation:none}}
.nc-imgfail{max-width:420px;border-radius:14px;background:rgba(212,72,59,.06);border:1px solid rgba(212,72,59,.16);padding:10px 12px}
.nc-imgfail-msg{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.45}
.nc-imgfail-msg svg{flex-shrink:0;margin-top:2px;color:#d4483b}
.nc-imgfail-act{display:flex;gap:8px;margin-top:9px}
.nc-imgfail-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;font-size:12.5px;font-weight:500;background:rgba(255,255,255,.8);border:1px solid rgba(40,34,26,.12)}
.dark .nc-imgfail-btn{background:rgba(255,255,255,.06);border-color:rgba(255,250,240,.1)}
.nc-imgfail-btn:disabled{opacity:.5}
.nc-imgfail-btn.danger{color:#d4483b}
.nc-sheet-bg{position:fixed;inset:0;z-index:87;background:rgba(10,8,6,.28);animation:ncFadeIn .18s ease-out}
@keyframes ncFadeIn{from{opacity:0}}
.nc-sheet{padding:8px 10px calc(10px + env(safe-area-inset-bottom));max-height:80vh;overflow:auto;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.nc-sheet .liquid{max-width:520px;margin-left:auto;margin-right:auto}
.nc-sheet .menu-item{padding-top:12px;padding-bottom:12px;font-size:15px}
.nc-on-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#df8a5c}
.nc-back-chat{display:inline-flex;align-items:center;gap:4px;margin-bottom:6px;padding:4px 10px 4px 8px;border-radius:999px;font-size:12.5px;color:var(--sub,#8a857d);border:1px solid rgba(40,34,26,.1)}
.nc-back-chat:hover{color:inherit}
.dark .nc-back-chat{border-color:rgba(255,250,240,.1)}
.nc-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:14px 0 6px}
.nc-plan{border:1px solid rgba(40,34,26,.1);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:6px}
.dark .nc-plan{border-color:rgba(255,250,240,.08)}
.nc-plan.is-cur{border-color:rgba(223,138,92,.55)}
.nc-plan-top{display:flex;align-items:center;gap:8px}
.nc-plan-name{font-weight:600;font-size:15px}
.nc-badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px}
.nc-badge.cur{background:rgba(223,138,92,.14);color:#c06a3d}
.nc-badge.soon{background:rgba(60,50,40,.08);color:inherit;opacity:.85}
.dark .nc-badge.soon{background:rgba(255,250,240,.08)}
.nc-plan-intro{font-size:12.5px;opacity:.7}
.nc-plan-perks{margin:0;padding-left:16px;font-size:12.5px;line-height:1.55;list-style:disc;flex:1}
.nc-plan-btn{margin-top:6px;height:34px;border-radius:999px;font-size:13px;font-weight:500;background:#1d1c1a;color:#faf9f7}
.dark .nc-plan-btn{background:#f2f1ee;color:#1b1b1a}
.nc-plan-btn:disabled{opacity:.45;cursor:not-allowed}

/* ======================= v5.3 (2026-11-04): one glass system on every surface ======================= */
:root {
  --v53-amb1: rgba(223, 138, 92, .15); --v53-amb2: rgba(123, 108, 255, .09); --v53-amb3: rgba(60, 160, 190, .07);
  --v53-pane: color-mix(in srgb, var(--bg) 82%, transparent);
  --v53-side: color-mix(in srgb, var(--shell) 52%, transparent);
  --v53-card: color-mix(in srgb, var(--panel) 66%, transparent);
  --v53-blur-lg: blur(28px) saturate(150%);
}
.dark { --v53-amb1: rgba(223, 138, 92, .09); --v53-amb2: rgba(123, 108, 255, .07); --v53-amb3: rgba(60, 160, 190, .05);
  --v53-pane: color-mix(in srgb, var(--bg) 84%, transparent); --v53-card: color-mix(in srgb, var(--panel) 62%, transparent); }
/* ambient light behind the panes so the glass has something to refract (static gradients: no per-frame cost) */
@media (min-width: 768px) {
  #root .md\:bg-shell {
    background: radial-gradient(60vmax 46vmax at 6% -6%, var(--v53-amb1), transparent 62%),
      radial-gradient(52vmax 44vmax at 104% 108%, var(--v53-amb2), transparent 60%),
      radial-gradient(40vmax 36vmax at 58% 38%, var(--v53-amb3), transparent 70%), var(--shell) !important;
  }
  /* sidebar + main pane */
  [data-sidebar].panel { background: var(--v53-side); -webkit-backdrop-filter: var(--v5-blur); backdrop-filter: var(--v5-blur); }
  .panel-main { background: linear-gradient(180deg, var(--v5-hi) -40%, transparent 12%), var(--v53-pane); -webkit-backdrop-filter: var(--v53-blur-lg); backdrop-filter: var(--v53-blur-lg);
    border: 1px solid var(--v5-line); box-shadow: inset 0 1px 0 var(--v5-hi), var(--pane-shadow, 0 10px 30px -18px rgba(0,0,0,.25)); }
}
/* mobile drawer: glass over the chat */
@media (max-width: 767px) {
  [data-sidebar].panel { background: linear-gradient(180deg, var(--v5-hi) -60%, transparent 30%), color-mix(in srgb, var(--panel) 86%, transparent) !important;
    -webkit-backdrop-filter: var(--v53-blur-lg); backdrop-filter: var(--v53-blur-lg); border-right: 1px solid var(--v5-line); }
}
/* top bar: glass strip that fades out (the blur lives on a masked layer so the buttons stay crisp) */
.nc-topbar { background: none !important; isolation: isolate; }
.nc-topbar::before { content: ""; position: absolute; inset: 0 0 -6px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(color-mix(in srgb, var(--bg) 72%, transparent), color-mix(in srgb, var(--bg) 0%, transparent));
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
/* composer */
.composer { background: linear-gradient(180deg, var(--v5-hi) -60%, transparent 40%), var(--v5-glass-strong);
  -webkit-backdrop-filter: var(--v5-blur); backdrop-filter: var(--v5-blur); border: 1px solid var(--v5-line);
  box-shadow: inset 0 1px 0 var(--v5-hi), 0 1px 1px rgba(30, 25, 20, .03), 0 10px 28px -16px rgba(30, 25, 20, .22); }
.dark .composer { box-shadow: inset 0 1px 0 var(--v5-hi), 0 12px 30px -16px rgba(0, 0, 0, .6); }
/* floating surfaces in dark mode were solid (.dark .liquid in the base sheet): same glass as light */
.dark .liquid, .dark .glass, .dark [role="menu"] { background: linear-gradient(180deg, var(--v5-hi) -60%, transparent 40%), var(--v5-glass-strong);
  -webkit-backdrop-filter: var(--v5-blur); backdrop-filter: var(--v5-blur); border: 1px solid var(--v5-line); }
.glass-sheet { -webkit-backdrop-filter: var(--v53-blur-lg); backdrop-filter: var(--v53-blur-lg); }
.nc-dlg-scrim, .nc-sheet-bg, [data-sidebar-scrim] { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
/* cards inside panes and modals (settings, billing, account, admin, image studio, images grid) */
.panel-main .bg-panel.border, .panel-main .bg-panel.hairline, .modal-float .bg-panel.border, .modal-float .bg-panel.hairline,
.nc-plan, .nc-act:not(.is-done), .nc-imgfail, .nc-dlg-subject {
  background: linear-gradient(180deg, var(--v5-hi) -80%, transparent 35%), var(--v53-card) !important;
  border-color: var(--v5-line) !important; box-shadow: inset 0 1px 0 var(--v5-hi);
}
.panel-main .bg-panel.border, .panel-main .bg-panel.hairline { -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); }
.nc-wl-screen, .nc-auth-ov { -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%); }
/* fallbacks: no backdrop-filter support, reduced transparency, or the low-end flag -> solid surfaces */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-sidebar].panel { background: var(--side, var(--shell)) !important; }
  .panel-main { background: var(--bg) !important; }
  .composer, .dark .liquid, .dark .glass, .dark [role="menu"], .glass-sheet { background: var(--v5-solid) !important; }
  .nc-topbar::before { background: linear-gradient(var(--bg) 58%, transparent); }
  .panel-main .bg-panel.border, .panel-main .bg-panel.hairline, .modal-float .bg-panel.border, .modal-float .bg-panel.hairline, .nc-plan { background: var(--panel) !important; }
}
@media (prefers-reduced-transparency: reduce) {
  [data-sidebar].panel { background: var(--side, var(--shell)) !important; }
  .panel-main { background: var(--bg) !important; }
  .composer, .dark .liquid, .dark .glass, .dark [role="menu"], .glass-sheet { background: var(--v5-solid) !important; }
  [data-sidebar].panel, .panel-main, .composer, .dark .liquid, .dark .glass, .dark [role="menu"], .glass-sheet, .nc-topbar::before,
  .panel-main .bg-panel.border, .panel-main .bg-panel.hairline, .nc-dlg-scrim, .nc-sheet-bg, [data-sidebar-scrim], .nc-wl-screen, .nc-auth-ov {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .nc-topbar::before { background: linear-gradient(var(--bg) 58%, transparent); }
  .panel-main .bg-panel.border, .panel-main .bg-panel.hairline, .modal-float .bg-panel.border, .modal-float .bg-panel.hairline, .nc-plan { background: var(--panel) !important; }
}
html.nc-lowend [data-sidebar].panel, html.nc-lowend .panel-main, html.nc-lowend .composer, html.nc-lowend .nc-topbar::before,
html.nc-lowend .panel-main .bg-panel.border, html.nc-lowend .panel-main .bg-panel.hairline { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.nc-lowend .panel-main { background: var(--bg); }
html.nc-lowend .composer { background: var(--v5-solid); }

/* ---- v5.3 sidebar: plain slide, no glass sheen / blur while it moves */
.nc-side-anim { will-change: width; }
.nc-side-anim::after { display: none !important; }
@media (max-width: 767px) {
  [data-sidebar] { transition-duration: 220ms; transition-timing-function: cubic-bezier(.2, .8, .2, 1); }
  [data-sidebar-scrim] { transition-duration: 220ms; transition-timing-function: ease-out; }
}
@media (prefers-reduced-motion: reduce) { [data-sidebar], [data-sidebar-scrim] { transition: none !important; } }

/* ---- v5.3 prompt optimizer button */
.nc-enh { color: var(--sub); transition: color .18s ease, background-color .18s ease, transform .45s var(--nc-spring); }
.nc-enh:hover:not(:disabled) { color: var(--brand-ink); background: var(--brand-soft); }
.nc-enh:active:not(:disabled) { transform: scale(.92); transition-duration: .09s; }
.nc-enh.is-busy { color: var(--brand-ink); cursor: progress; }
.nc-enh.is-busy svg { animation: ncEnhWiggle .9s ease-in-out infinite; }
.nc-enh.is-busy .nc-enh-s1, .nc-enh.is-busy .nc-enh-s2, .nc-enh.is-busy .nc-enh-s3 { animation: ncEnhTw 1s ease-in-out infinite; }
.nc-enh.is-busy .nc-enh-s2 { animation-delay: .25s; } .nc-enh.is-busy .nc-enh-s3 { animation-delay: .5s; }
@keyframes ncEnhWiggle { 50% { transform: rotate(-12deg); } }
@keyframes ncEnhTw { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .nc-enh.is-busy svg, .nc-enh.is-busy path { animation: none !important; } }

/* ---- v5.3 image viewer: full-resolution source, crisp scaling, no blur/filters */
[data-preview] img, .nc-lightbox img, [role="dialog"] img.object-contain { filter: none !important; image-rendering: auto; }