/* ZeroVibe web-home matching theme — cyan / blue / violet glass UI */
/* Hard fallback so the side panel never renders on a white Chrome canvas */
html,
body,
html.zv-sidepanel,
html.zv-sidepanel body,
body.zv-sidepanel,
body.zv-sidepanel.sp-light {
  --ql-bg: #070b16 !important;
  --ql-bg-elevated: rgba(15, 23, 42, 0.94) !important;
  --ql-bg-surface: rgba(30, 41, 59, 0.48) !important;
  --ql-bg-hover: rgba(103, 232, 249, 0.10) !important;
  --ql-border: rgba(103, 232, 249, 0.24) !important;
  --ql-border-hover: rgba(103, 232, 249, 0.48) !important;
  --ql-text-primary: #f8fafc !important;
  --ql-text-secondary: #cbd5e1 !important;
  --ql-text-muted: #94a3b8 !important;
  --ql-accent: #67e8f9 !important;
  --ql-accent-hover: #5b8def !important;
  --ql-accent-glow: rgba(103, 232, 249, 0.24) !important;
  --ql-accent-subtle: rgba(103, 232, 249, 0.12) !important;
  background-color: #070b16 !important;
  color: #f8fafc !important;
  color-scheme: dark !important;
}
:root {
  --zv-bg: #0f172a;
  --zv-bg-deep: #070b16;
  --zv-panel: rgba(10, 15, 26, 0.86);
  --zv-panel-strong: rgba(15, 23, 42, 0.94);
  --zv-glass: rgba(30, 41, 59, 0.48);
  --zv-glass-border: rgba(103, 232, 249, 0.24);
  --zv-cyan: #67e8f9;
  --zv-blue: #5b8def;
  --zv-violet: #8b6cf3;
  --zv-text: #f8fafc;
  --zv-muted: #94a3b8;
  --zv-gradient: linear-gradient(135deg, var(--zv-cyan), var(--zv-blue) 52%, var(--zv-violet));
  --zv-soft-gradient: linear-gradient(135deg, rgba(103, 232, 249, 0.16), rgba(91, 141, 239, 0.10) 48%, rgba(139, 108, 243, 0.14));
  --zv-cyan-glow: 0 0 28px rgba(103, 232, 249, 0.22), 0 18px 50px rgba(91, 141, 239, 0.20);

  --ql-bg: var(--zv-bg-deep) !important;
  --ql-bg-elevated: var(--zv-panel-strong) !important;
  --ql-bg-surface: var(--zv-glass) !important;
  --ql-bg-hover: rgba(103, 232, 249, 0.10) !important;
  --ql-border: var(--zv-glass-border) !important;
  --ql-border-hover: rgba(103, 232, 249, 0.48) !important;
  --ql-text-primary: var(--zv-text) !important;
  --ql-text-secondary: #cbd5e1 !important;
  --ql-text-muted: var(--zv-muted) !important;
  --ql-accent: var(--zv-cyan) !important;
  --ql-accent-hover: var(--zv-blue) !important;
  --ql-accent-glow: rgba(103, 232, 249, 0.24) !important;
  --ql-accent-subtle: rgba(103, 232, 249, 0.12) !important;
  --ql-radius: 14px !important;
  --ql-radius-sm: 10px !important;
  --ql-radius-xs: 8px !important;
}

body.zv-sidepanel,
#ql-floating {
  font-family: "Space Grotesk", "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: var(--zv-text) !important;
}

body.zv-sidepanel {
  min-width: 320px !important;
  background:
    radial-gradient(circle at 8% -10%, rgba(103, 232, 249, 0.26), transparent 34%),
    radial-gradient(circle at 94% 4%, rgba(91, 141, 239, 0.24), transparent 32%),
    radial-gradient(circle at 18% 104%, rgba(139, 108, 243, 0.18), transparent 38%),
    linear-gradient(145deg, #070b16, #0f172a 52%, #07101f) !important;
}

body.zv-sidepanel .sp-body {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  padding: 12px !important;
}

body.zv-sidepanel .zv-safe-main {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  flex-direction: column !important;
}

body.zv-sidepanel .sp-prompt-block {
  position: relative !important;
  flex: 0 0 auto !important;
}

body.zv-sidepanel.sp-light {
  background:
    radial-gradient(circle at 8% -10%, rgba(103, 232, 249, 0.26), transparent 34%),
    radial-gradient(circle at 94% 4%, rgba(91, 141, 239, 0.24), transparent 32%),
    radial-gradient(circle at 18% 104%, rgba(139, 108, 243, 0.18), transparent 38%),
    linear-gradient(145deg, #070b16, #0f172a 52%, #07101f) !important;
}

body.zv-sidepanel.sp-light .sp-header,
body.zv-sidepanel.sp-light .sp-footer,
body.zv-sidepanel.sp-light .sp-profile-card,
body.zv-sidepanel.sp-light .sp-license-gate,
body.zv-sidepanel.sp-light .sp-shortcuts-grid button,
body.zv-sidepanel.sp-light .sp-textarea,
body.zv-sidepanel.sp-light .sp-input,
body.zv-sidepanel.sp-light .sp-notif-panel,
body.zv-sidepanel.sp-light .sp-attach-item,
body.zv-sidepanel.sp-light .sp-tool-btn,
body.zv-sidepanel.sp-light .sp-attach-btn {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.54), rgba(10, 15, 26, 0.66)) !important;
  border-color: rgba(103, 232, 249, 0.24) !important;
  color: #f8fafc !important;
}

body.zv-sidepanel.sp-light .sp-brand-text,
body.zv-sidepanel.sp-light .sp-profile-name,
body.zv-sidepanel.sp-light .sp-gate-title,
body.zv-sidepanel.sp-light .sp-textarea,
body.zv-sidepanel.sp-light .sp-input {
  color: #f8fafc !important;
}

/* No visible version badges anywhere in the extension UI. */
.sp-brand .sp-badge,
.ql-footer-version {
  display: none !important;
}

body.zv-sidepanel::after,
#ql-floating:not(.ql-minimized)::after { content: none !important; }


#ql-floating {
  background:
    radial-gradient(circle at 12% -12%, rgba(103, 232, 249, 0.26), transparent 34%),
    radial-gradient(circle at 92% 6%, rgba(91, 141, 239, 0.24), transparent 32%),
    radial-gradient(circle at 18% 108%, rgba(139, 108, 243, 0.17), transparent 38%),
    linear-gradient(145deg, rgba(7, 11, 22, 0.98), rgba(15, 23, 42, 0.96)) !important;
  border: 1px solid var(--zv-glass-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.62), var(--zv-cyan-glow), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#ql-floating:not(.ql-minimized) {
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100vh - 24px) !important;
}

#ql-body {
  flex: 0 0 auto !important;
  padding: 14px 14px 10px !important;
}

#ql-floating::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  z-index: 0;
  background-image:
    linear-gradient(rgba(103, 232, 249, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 232, 249, 0.12) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(circle at center, black, transparent 78%);
}
body.zv-sidepanel::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  z-index: 0;
  background-image:
    linear-gradient(rgba(103, 232, 249, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 232, 249, 0.12) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(circle at center, black, transparent 78%);
}

#ql-floating > *,
body.zv-sidepanel > * {
  position: relative;
  z-index: 1;
}

#ql-header,
.sp-header {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.82), rgba(10, 15, 26, 0.72)) !important;
  border-bottom: 1px solid rgba(103, 232, 249, 0.22) !important;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(22px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(140%) !important;
}

.ql-title,
.ql-brand span,
.sp-brand-text {
  background: var(--zv-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.ql-title-logo,
.ql-brand-logo,
.sp-brand-logo {
  border: 1px solid rgba(103, 232, 249, 0.38) !important;
  box-shadow: 0 0 0 4px rgba(103, 232, 249, 0.08), 0 0 24px rgba(103, 232, 249, 0.36) !important;
}

.ql-badge,
.ql-badge-pro-header,
.sp-badge,
.sp-status-badge,
.ql-tab-badge,
.sp-tab-badge {
  background: var(--zv-gradient) !important;
  color: #07101f !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  box-shadow: 0 8px 24px rgba(103, 232, 249, 0.18) !important;
}

.ql-license-gate,
.ql-profile-card,
.ql-template-card,
.ql-notif-panel,
.ql-history-panel,
.sp-license-gate,
.sp-profile-card,
.sp-notif-panel,
.sp-tabs,
.sp-shortcuts-grid button,
.sp-textarea,
.sp-input,
#ql-floating input,
#ql-msg {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.54), rgba(10, 15, 26, 0.66)) !important;
  border: 1px solid var(--zv-glass-border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 44px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: blur(20px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(135%) !important;
}

.ql-license-gate,
.sp-license-gate {
  padding: 28px 18px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

.ql-license-gate::before,
.sp-license-gate::before,
.ql-profile-card::before,
.sp-profile-card::before {
  content: "";
  display: block;
  height: 3px;
  width: 100%;
  margin: -18px 0 18px;
  border-radius: 999px;
  background: var(--zv-gradient);
  box-shadow: var(--zv-cyan-glow);
}

#ql-floating input:focus,
#ql-msg:focus,
.sp-input:focus,
.sp-textarea:focus {
  border-color: rgba(103, 232, 249, 0.72) !important;
  box-shadow: 0 0 0 3px rgba(103, 232, 249, 0.13), 0 0 28px rgba(103, 232, 249, 0.22) !important;
}

#ql-validate-btn,
#ql-send,
#ql-send-btn,
.ql-send-btn,
.ql-watermark-btn,
.ql-shield-btn,
.ql-native-chat-btn,
.sp-btn-primary,
.sp-send-btn,
.sp-watermark-btn,
.sp-shield-btn,
.sp-modal-btn {
  background: var(--zv-gradient) !important;
  color: #07101f !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  box-shadow: 0 16px 42px rgba(91, 141, 239, 0.26), 0 0 28px rgba(103, 232, 249, 0.18) !important;
}

#ql-validate-btn:hover,
#ql-send:hover,
.ql-send-btn:hover,
.sp-btn-primary:hover,
.sp-send-btn:hover {
  transform: translateY(-2px) !important;
  filter: saturate(1.12) brightness(1.06) !important;
}

.ql-icon-btn,
.ql-minimize-btn,
.sp-icon-btn,
.sp-tool-btn,
.sp-attach-btn,
.ql-tool-btn,
.ql-attach-btn {
  background: rgba(103, 232, 249, 0.07) !important;
  border: 1px solid rgba(103, 232, 249, 0.16) !important;
  color: var(--zv-cyan) !important;
}

.ql-icon-btn:hover,
.ql-minimize-btn:hover,
.sp-icon-btn:hover,
.sp-tool-btn:hover,
.sp-attach-btn:hover,
.ql-tool-btn:hover,
.ql-attach-btn:hover {
  background: rgba(103, 232, 249, 0.14) !important;
  border-color: rgba(103, 232, 249, 0.42) !important;
  box-shadow: 0 0 22px rgba(103, 232, 249, 0.18) !important;
}

.sp-header-popup-btn,
.nirman-popup-btn {
  width: auto !important;
  min-width: 74px !important;
  padding: 0 10px !important;
  gap: 6px !important;
  color: #f8fafc !important;
  background: linear-gradient(135deg, rgba(103, 232, 249, 0.22), rgba(91, 141, 239, 0.18)) !important;
  border-color: rgba(103, 232, 249, 0.42) !important;
  box-shadow: 0 0 18px rgba(103, 232, 249, 0.16) !important;
}

.sp-header-popup-btn span,
.nirman-popup-btn span {
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.ql-tabs,
.sp-tabs {
  border-radius: 999px !important;
  padding: 4px !important;
}

.ql-tab,
.sp-tab {
  border-radius: 999px !important;
}

.ql-tab-active,
.sp-tab.sp-tab-active {
  background: var(--zv-soft-gradient) !important;
  color: var(--zv-cyan) !important;
  box-shadow: inset 0 0 0 1px rgba(103, 232, 249, 0.18) !important;
}

.ql-chip,
.sp-chip {
  background: rgba(15, 23, 42, 0.58) !important;
  border-color: rgba(103, 232, 249, 0.18) !important;
  color: #dbeafe !important;
}

.ql-chip:hover,
.sp-chip:hover {
  color: var(--zv-cyan) !important;
  border-color: rgba(103, 232, 249, 0.46) !important;
  box-shadow: 0 10px 24px rgba(103, 232, 249, 0.12) !important;
}

/* === Single-line compact footer (transparent, no box) === */
.sp-footer,
.ql-footer {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 6px 12px !important;
  min-height: 32px !important;
  background: transparent !important;
  border-top: 1px solid rgba(103,232,249,0.18) !important;
  backdrop-filter: none !important;
  font-family: "Inter", "Space Grotesk", system-ui, sans-serif !important;
  overflow: visible !important;
  box-shadow: none !important;
}
.sp-footer::before,
.ql-footer::before { content: none !important; }
.sp-footer > *,
.ql-footer > * { position: relative; z-index: 1; background: transparent !important; }

.sp-back-to-popup { display: none !important; }

/* Support: inline link, no card */
.sp-support-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  font-family: inherit !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  flex: 0 0 auto;
}
.sp-support-link::before,
.sp-support-link::after { content: none !important; }
.sp-support-link:hover { filter: brightness(1.15); }
.sp-support-link svg {
  width: 14px !important;
  height: 14px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  stroke: #67e8f9 !important;
  filter: drop-shadow(0 0 4px rgba(103,232,249,0.55));
}
.sp-support-link span[data-i18n="footer.support"] {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #e2e8f0 !important;
  line-height: 1 !important;
}
.sp-support-link span[data-i18n="footer.support"]::after { content: none !important; }

/* Center: developed by — inline, single-line, fully visible */
.sp-footer-badge,
.ql-badge-mz {
  position: relative !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 6px !important;
  min-height: 14px;
  background: transparent !important;
  border: 0 !important;
  font-family: "Inter", system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: rgba(224,242,254,0.82) !important;
  white-space: nowrap !important;
  text-shadow: 0 0 8px rgba(103,232,249,0.35);
  overflow: visible !important;
  text-overflow: clip !important;
}
.sp-footer-badge::before,
.sp-footer-badge::after,
.ql-badge-mz::before,
.ql-badge-mz::after { content: none !important; }

/* Hide minimize button everywhere */
.ql-minimize-btn,
.ql-min-btn,
#ql-minimize-btn,
[data-action="minimize"] { display: none !important; }

/* Close (X) button in floating header */
.nirman-close-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  margin-left: 6px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  background: rgba(244, 63, 94, 0.10) !important;
  border: 1px solid rgba(244, 63, 94, 0.35) !important;
  color: #fb7185 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 10 !important;
  position: relative !important;
  transition: background .15s ease, transform .15s ease, border-color .15s ease !important;
}
.nirman-close-btn:hover {
  background: rgba(244, 63, 94, 0.22) !important;
  border-color: rgba(244, 63, 94, 0.65) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}
.nirman-close-btn svg { display: block !important; }

/* Side-panel open button in floating header */
.nirman-sidepanel-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  margin-left: 6px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  background: rgba(103, 232, 249, 0.10) !important;
  border: 1px solid rgba(103, 232, 249, 0.35) !important;
  color: #67e8f9 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 10 !important;
  transition: background .15s ease, transform .15s ease, border-color .15s ease, box-shadow .15s ease !important;
}
.nirman-sidepanel-btn:hover {
  background: rgba(103, 232, 249, 0.22) !important;
  border-color: rgba(103, 232, 249, 0.7) !important;
  box-shadow: 0 0 18px rgba(103, 232, 249, 0.35) !important;
  transform: translateY(-1px) !important;
}
.nirman-sidepanel-btn svg { display: block !important; }

/* Force the popup header side-panel button to stay visible. */
#ql-floating #ql-header button.nirman-sidepanel-btn,
#ql-floating #ql-header button.nirman-sidepanel-btn[title="Open side panel"],
#ql-floating #ql-header button[data-nirman-visible="sidepanel"] {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}






html, body { scrollbar-width: thin; scrollbar-color: rgba(103,232,249,0.35) rgba(7,11,22,0.6); }
*::-webkit-scrollbar { width: 8px; height: 8px; background: rgba(7,11,22,0.6); }
*::-webkit-scrollbar-track { background: rgba(7,11,22,0.6); }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(103, 232, 249, 0.42), rgba(139, 108, 243, 0.42));
  border: 2px solid rgba(7,11,22,0.6);
  border-radius: 999px;
}
*::-webkit-scrollbar-corner { background: rgba(7,11,22,0.6); }
/* Disable any textarea resize handle */
textarea, .sp-textarea, #ql-msg { resize: none !important; }

@keyframes zv-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 4px rgba(103, 232, 249, 0.08), 0 0 20px rgba(103, 232, 249, 0.32); }
  50% { box-shadow: 0 0 0 6px rgba(103, 232, 249, 0.12), 0 0 34px rgba(139, 108, 243, 0.34); }
}

.ql-title-logo,
.ql-brand-logo,
.sp-brand-logo {
  animation: zv-pulse-glow 2.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
/* ============================================================
   Side Panel action buttons — match home page Enroll button
   ============================================================ */
.zv-sidepanel .sp-watermark-btn,
.zv-sidepanel .sp-shield-btn,
.zv-sidepanel .sp-native-chat-btn,
.zv-sidepanel #sp-download-project,
.zv-sidepanel .sp-btn-primary,
.zv-sidepanel .sp-send-btn {
  background: linear-gradient(135deg, oklch(0.82 0.16 200), oklch(0.55 0.18 250)) !important;
  color: oklch(0.12 0.02 240) !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
  box-shadow: 0 8px 24px -8px oklch(0.55 0.18 250 / 0.6),
              0 0 18px -6px oklch(0.82 0.16 200 / 0.55) !important;
  transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.2s ease !important;
}
.zv-sidepanel .sp-watermark-btn:hover,
.zv-sidepanel .sp-shield-btn:hover,
.zv-sidepanel .sp-native-chat-btn:hover,
.zv-sidepanel #sp-download-project:hover,
.zv-sidepanel .sp-btn-primary:hover,
.zv-sidepanel .sp-send-btn:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.05) !important;
  box-shadow: 0 12px 32px -8px oklch(0.55 0.18 250 / 0.75),
              0 0 26px -6px oklch(0.82 0.16 200 / 0.7) !important;
}
.zv-sidepanel .sp-shield-btn.sp-shield-active {
  background: linear-gradient(135deg, #34d399, oklch(0.55 0.18 250)) !important;
  color: #0a1f1a !important;
}

/* === Hide Quick Shortcuts, Plan Mode toggle, and feature buttons in side panel === */
.zv-sidepanel .sp-shortcuts-title,
.zv-sidepanel .sp-shortcuts-grid,
.zv-sidepanel .sp-shortcuts-section,
.zv-sidepanel .sp-action-left,
.zv-sidepanel .sp-watermark-btn,
.zv-sidepanel .sp-shield-btn,
.zv-sidepanel .sp-native-chat-btn,
.zv-sidepanel #sp-download-project,
.zv-sidepanel .sp-pkg-features { display: none !important; }

/* === Header always stays full; only the minimize button is removed === */
.sp-header,
.sp-header.zv-collapsed {
  justify-content: space-between !important;
}
.sp-header.zv-collapsed .sp-header-actions,
.sp-header.zv-collapsed .sp-badge {
  display: flex !important;
}
.sp-brand { cursor: default !important; }

/* === Remove header notification + night/theme controls === */
.ql-notif-btn,
.sp-notif-btn,
button[data-i18n-title="header.notifications"],
button[data-i18n-title="header.theme"] {
  display: none !important;
}

.sp-header-popup-btn,
.nirman-popup-btn {
  display: inline-flex !important;
}

/* === ZeroVibe composer — Lovable hero bevel style === */

/* Make any parent that contains the textarea a positioning context */
:has(> .sp-textarea),
:has(> #ql-msg) { position: relative; }

/* Textarea: dark glass, room at the bottom for floating actions */
#ql-msg,
.sp-textarea {
  padding: 14px 14px 56px !important;
  resize: none !important;
  margin-bottom: 0 !important;
  border-radius: 18px !important;
  border: 1px solid rgba(103,232,249,0.22) !important;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(103,232,249,0.08), transparent 60%),
    radial-gradient(120% 80% at 100% 100%, rgba(124,58,237,0.08), transparent 60%),
    rgba(7,16,31,0.78) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 8px 28px rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(14px) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}
#ql-msg { min-height: 112px !important; }
.sp-textarea:focus {
  border-color: rgba(103,232,249,0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 0 3px rgba(103,232,249,0.14),
    0 0 36px rgba(103,232,249,0.22) !important;
}

/* Attachment preview — clean bottom shelf inside the prompt box */
.sp-attach-preview,
.ql-attach-preview {
  position: relative !important;
  margin: 0 12px 8px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  z-index: 6 !important;
  max-height: 46px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
}
.sp-attach-preview:not(:empty),
.ql-attach-preview:not(:empty) {
  display: flex !important;
  margin-top: -92px !important;
}
.sp-attach-preview:empty,
.ql-attach-preview:empty { display: none !important; margin: 0 !important; height: 0 !important; }

.sp-attach-preview::-webkit-scrollbar,
.ql-attach-preview::-webkit-scrollbar { height: 0 !important; }
.sp-attach-item,
.ql-attach-item {
  height: 38px !important;
  max-width: min(190px, calc(100% - 6px)) !important;
  flex: 0 0 auto !important;
  padding: 5px 8px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(6,14,30,0.96), rgba(15,30,58,0.9)) !important;
  border: 1px solid rgba(103,232,249,0.32) !important;
  color: #eaf8ff !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05) inset, 0 8px 20px rgba(0,0,0,0.24) !important;
  overflow: hidden !important;
}
.sp-attach-thumb,
.ql-attach-thumb,
.sp-attach-icon,
.ql-attach-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
}
.sp-attach-info,
.ql-attach-info { min-width: 0 !important; }
.sp-attach-name,
.ql-attach-name {
  max-width: 116px !important;
  font-size: 10px !important;
  color: #f8fafc !important;
}
.sp-attach-size,
.ql-attach-size { font-size: 8px !important; color: rgba(203,213,225,0.78) !important; }

/* When a preview chip exists, grow the exact textarea that owns it so chips never cover buttons/text */
.sp-prompt-block:has(.sp-attach-preview:not(:empty)) .sp-textarea,
.ql-prompt-block:has(.ql-attach-preview:not(:empty)) #ql-msg,
#ql-tab-content:has(> .ql-attach-preview:not(:empty)) > #ql-msg {
  padding-bottom: 124px !important;
  min-height: 170px !important;
}


/* Action bar — visually overlaps the bottom of the textarea (no second box) */
.ql-action-bar,
.sp-action-bar {
  position: relative !important;
  margin: -50px 10px 6px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  z-index: 5;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  pointer-events: none;
}
.sp-prompt-block:has(.sp-attach-preview:not(:empty)) .sp-action-bar,
.ql-prompt-block:has(.ql-attach-preview:not(:empty)) .ql-action-bar,
#ql-tab-content:has(> .ql-attach-preview:not(:empty)) > .ql-action-bar {
  margin-top: 0 !important;
}
.ql-action-bar > *,
.sp-action-bar > * { pointer-events: auto; }
.ql-action-bar::before,
.ql-action-bar::after,
.sp-action-bar::before,
.sp-action-bar::after { content: none !important; background: none !important; border: none !important; }
.ql-action-bar .ql-action-center,
.sp-action-bar .sp-action-center { gap: 6px !important; display: flex !important; align-items: center !important; }

/* ---- Hero bevel: outer (gradient frame) ---- */
.ql-action-bar .ql-tool-btn,
.ql-action-bar .ql-attach-btn,
.ql-action-bar .nirman-attach-btn,
.sp-action-bar .sp-tool-btn,
.sp-action-bar .sp-attach-btn,
.sp-action-bar .nirman-attach-btn,
.ql-send-btn,
.sp-send-btn {
  position: relative !important;
  padding: 1.5px !important;
  border: none !important;
  background: linear-gradient(135deg,
    rgba(103,232,249,0.55), rgba(255,255,255,0.10), rgba(124,58,237,0.55)) !important;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px) !important;
  transition: transform .2s ease, filter .2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}
.ql-action-bar .ql-tool-btn:hover,
.ql-action-bar .ql-attach-btn:hover,
.ql-action-bar .nirman-attach-btn:hover,
.sp-action-bar .sp-tool-btn:hover,
.sp-action-bar .sp-attach-btn:hover,
.sp-action-bar .nirman-attach-btn:hover,
.ql-send-btn:hover,
.sp-send-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08) saturate(1.1);
}

/* ---- Hero bevel: inner surface ---- */
/* Ghost (attach / tool) buttons */
.ql-action-bar .ql-tool-btn,
.ql-action-bar .ql-attach-btn,
.ql-action-bar .nirman-attach-btn,
.sp-action-bar .sp-tool-btn,
.sp-action-bar .sp-attach-btn,
.sp-action-bar .nirman-attach-btn {
  width: 36px !important;
  height: 36px !important;
}
.ql-action-bar .ql-tool-btn svg,
.ql-action-bar .ql-attach-btn svg,
.ql-action-bar .nirman-attach-btn svg,
.sp-action-bar .sp-tool-btn svg,
.sp-action-bar .sp-attach-btn svg,
.sp-action-bar .nirman-attach-btn svg {
  position: relative;
  z-index: 2;
  width: 18px !important;
  height: 18px !important;
  stroke: #ffffff !important;
  color: #ffffff !important;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.55));
}
.ql-action-bar .ql-tool-btn svg *,
.ql-action-bar .ql-attach-btn svg *,
.ql-action-bar .nirman-attach-btn svg *,
.sp-action-bar .sp-tool-btn svg *,
.sp-action-bar .sp-attach-btn svg *,
.sp-action-bar .nirman-attach-btn svg * {
  stroke: #ffffff !important;
  color: #ffffff !important;
}
.ql-action-bar .ql-tool-btn svg [fill]:not([fill="none"]),
.ql-action-bar .ql-attach-btn svg [fill]:not([fill="none"]),
.ql-action-bar .nirman-attach-btn svg [fill]:not([fill="none"]),
.sp-action-bar .sp-tool-btn svg [fill]:not([fill="none"]),
.sp-action-bar .sp-attach-btn svg [fill]:not([fill="none"]),
.sp-action-bar .nirman-attach-btn svg [fill]:not([fill="none"]) {
  fill: #ffffff !important;
}
.ql-action-bar .ql-attach-btn,
.ql-action-bar .nirman-attach-btn,
.sp-action-bar .sp-attach-btn,
.sp-action-bar .nirman-attach-btn {
  font-size: 0 !important;
  color: transparent !important;
}
.ql-action-bar .ql-attach-btn::after,
.ql-action-bar .nirman-attach-btn::after,
.sp-action-bar .sp-attach-btn::after,
.sp-action-bar .nirman-attach-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  background: #ffffff;
  filter: drop-shadow(0 0 7px rgba(255,255,255,0.72));
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/></svg>") center/contain no-repeat;
}
.ql-action-bar .ql-tool-btn > *,
.ql-action-bar .ql-attach-btn > *,
.ql-action-bar .nirman-attach-btn > *,
.sp-action-bar .sp-tool-btn > *,
.sp-action-bar .sp-attach-btn > *,
.sp-action-bar .nirman-attach-btn > * { position: relative; z-index: 2; color: #ffffff; }

.ql-action-bar .ql-tool-btn::before,
.ql-action-bar .ql-attach-btn::before,
.ql-action-bar .nirman-attach-btn::before,
.sp-action-bar .sp-tool-btn::before,
.sp-action-bar .sp-attach-btn::before,
.sp-action-bar .nirman-attach-btn::before {
  content: "";
  position: absolute;
  inset: 1.5px;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  background: rgba(7,16,31,0.92);
  backdrop-filter: blur(14px);
}

/* Send button — compact pill, paper-plane + SEND centered together */
.ql-send-btn,
.sp-send-btn {
  height: 34px !important;
  min-width: 96px !important;
  padding: 2px !important;
  font-size: 0 !important;
  border-radius: 999px !important;
  clip-path: none !important;
  background: linear-gradient(135deg, #67e8f9 0%, #5b8def 45%, #8b6cf3 100%) !important;
  box-shadow:
    0 8px 22px rgba(91,141,239,0.42),
    0 0 22px rgba(139,108,243,0.36),
    inset 0 1px 0 rgba(255,255,255,0.32) !important;
}
.ql-send-btn::before,
.sp-send-btn::before {
  content: "SEND";
  position: absolute;
  inset: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 18px;
  clip-path: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #1a2960 0%, #3b3a8a 55%, #6d4ec9 100%);
  color: #ffffff;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(167,139,250,0.55);
  box-shadow: inset 0 0 18px rgba(103,232,249,0.16);
}
.ql-send-btn::after,
.sp-send-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(calc(-50% - 24px), -50%);
  width: 12px;
  height: 12px;
  z-index: 2;
  background: #ffffff;
  filter: drop-shadow(0 0 5px rgba(167,221,255,0.8));
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='22' y1='2' x2='11' y2='13'/><polygon points='22 2 15 22 11 13 2 9 22 2'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='22' y1='2' x2='11' y2='13'/><polygon points='22 2 15 22 11 13 2 9 22 2'/></svg>") center/contain no-repeat;
}
.ql-send-btn:hover,
.sp-send-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08) saturate(1.12);
  box-shadow:
    0 12px 30px rgba(91,141,239,0.5),
    0 0 30px rgba(139,108,243,0.5),
    inset 0 1px 0 rgba(255,255,255,0.38) !important;
}
.ql-send-btn:disabled,
.sp-send-btn:disabled { opacity: 0.5; pointer-events: none; }

/* Hide voice / mic button (sidebar + floating) */
#sp-speech, #ql-speech-btn,
.sp-speech-btn, .ql-speech-btn,
button[data-i18n-title="btn.speech"],
button[title="Voice"], button[title="Voice to text"],
button[aria-label*="Voice" i], button[aria-label*="Speech" i],
button[title*="Speech" i] { display: none !important; }



/* ============================================================
   v0.2 — Activate License screen polish
   ============================================================ */
.ql-license-gate,
.sp-license-gate {
  padding: 22px 18px 20px !important;
  text-align: center !important;
}
.ql-gate-title,
.sp-gate-title {
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  background: var(--zv-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  margin-bottom: 4px !important;
}

/* Premium Validate License button — unique pill with shimmer */
#ql-validate-btn,
.sp-btn-primary[data-i18n="gate.validate"],
button[data-i18n="gate.validate"] {
  position: relative !important;
  width: 100% !important;
  padding: 14px 22px !important;
  margin-top: 14px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(135deg, #67e8f9 0%, #5b8def 48%, #8b6cf3 100%) !important;
  color: #06121f !important;
  font-family: "Space Grotesk","Inter",system-ui,sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  overflow: hidden !important;
  isolation: isolate;
  box-shadow:
    0 14px 38px -10px rgba(91,141,239,0.75),
    0 0 0 1px rgba(103,232,249,0.35) inset,
    0 1px 0 rgba(255,255,255,0.45) inset,
    0 0 28px rgba(103,232,249,0.30) !important;
  transition: transform .2s ease, box-shadow .25s ease, filter .2s ease !important;
}
#ql-validate-btn::before,
button[data-i18n="gate.validate"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    transparent 30%,
    rgba(255,255,255,0.55) 50%,
    transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.9s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
  z-index: 0;
}
#ql-validate-btn:hover::before,
button[data-i18n="gate.validate"]:hover::before {
  transform: translateX(120%);
}
#ql-validate-btn:hover,
button[data-i18n="gate.validate"]:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.06) saturate(1.1) !important;
  box-shadow:
    0 18px 46px -10px rgba(91,141,239,0.85),
    0 0 0 1px rgba(103,232,249,0.55) inset,
    0 1px 0 rgba(255,255,255,0.55) inset,
    0 0 36px rgba(139,108,243,0.40) !important;
}
#ql-validate-btn:active,
button[data-i18n="gate.validate"]:active { transform: scale(0.985) !important; }

/* Minimized pill: hint that it's draggable */
#ql-floating.ql-minimized {
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 12px 0 7px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  border-radius: 13px !important;
  cursor: grab !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, rgba(5,10,22,0.96), rgba(9,20,42,0.92) 48%, rgba(16,31,70,0.92)) !important;
  border: 1px solid rgba(103,232,249,0.34) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 0 24px rgba(103,232,249,0.30), 0 12px 28px rgba(0,0,0,0.45) !important;
}
#ql-floating.ql-minimized > * { display: none !important; }
#ql-floating.ql-minimized::before {
  content: "" !important;
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  display: block !important;
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  border-radius: 50% !important;
  opacity: 1 !important;
  background: var(--nirman-ext-icon, none) center/cover no-repeat, radial-gradient(circle at 35% 25%, rgba(103,232,249,0.75), rgba(91,141,239,0.42) 42%, rgba(7,16,31,0.96) 76%) !important;
  border: 1px solid rgba(103,232,249,0.55) !important;
  box-shadow: 0 0 15px rgba(103,232,249,0.55), 0 0 26px rgba(91,141,239,0.32) !important;
  mask-image: none !important;
}
#ql-floating.ql-minimized::after {
  content: "ZeroVibe" !important;
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  flex: 1 1 auto !important;
  display: block !important;
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 46%, #20c8ff 47%, #20c8ff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-align: left !important;
  filter: drop-shadow(0 0 7px rgba(103,232,249,0.36)) !important;
}
#ql-floating.ql-minimized.ql-dragging { cursor: grabbing !important; transition: none !important; }

/* Minimize is disabled: if old storage adds ql-minimized, keep the full UI open. */
#ql-floating.ql-minimized {
  width: 400px !important;
  min-width: 0 !important;
  max-width: calc(100vw - 24px) !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  border-radius: 18px !important;
  cursor: default !important;
}
#ql-floating.ql-minimized::before,
#ql-floating.ql-minimized::after { content: none !important; }
#ql-floating.ql-minimized > * { display: revert !important; }
#ql-floating.ql-minimized #ql-header { display: flex !important; }
#ql-floating.ql-minimized #ql-body { display: block !important; }
#ql-floating.ql-minimized #ql-footer { display: flex !important; }
#ql-floating.ql-minimized #ql-resize-handle { display: block !important; }


/* ---- Nirman conversation view (chat bubbles above prompt) ---- */
.nirman-conv {
  flex: 1 1 auto;
  min-height: 120px;
  max-height: 100%;
  margin: 0 0 10px 0;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(15,23,42,0.55), rgba(7,11,22,0.65));
  border: 1px solid rgba(103,232,249,0.16);
  box-shadow: inset 0 0 24px rgba(91,141,239,0.06);
  overflow: hidden;
}
.nirman-conv-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(103,232,249,0.35) transparent;
}
.nirman-conv-scroll::-webkit-scrollbar { width: 6px; }
.nirman-conv-scroll::-webkit-scrollbar-thumb {
  background: rgba(103,232,249,0.30);
  border-radius: 4px;
}
.nirman-bubble {
  max-width: 88%;
  padding: 8px 11px 9px;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--zv-text);
  word-wrap: break-word;
  white-space: pre-wrap;
  position: relative;
  border: 1px solid transparent;
  animation: nirmanBubbleIn 0.18s ease-out;
}
@keyframes nirmanBubbleIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.nirman-bubble-role {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 3px;
}
.nirman-bubble-user {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(91,141,239,0.32), rgba(139,108,243,0.28));
  border-color: rgba(103,232,249,0.30);
  box-shadow: 0 4px 14px rgba(91,141,239,0.18);
}
.nirman-bubble-user .nirman-bubble-role { color: var(--zv-cyan); }
.nirman-bubble-ai {
  align-self: flex-start;
  background: rgba(15,23,42,0.78);
  border-color: rgba(148,163,184,0.20);
}
.nirman-bubble-ai .nirman-bubble-role { color: #cbd5e1; }
.nirman-conv-empty {
  margin: auto;
  text-align: center;
  padding: 20px;
  color: var(--zv-muted);
}
.nirman-conv-empty-icon { font-size: 26px; margin-bottom: 8px; }
.nirman-conv-empty-title {
  font-size: 13px; font-weight: 700; color: var(--zv-text); margin-bottom: 3px;
}
.nirman-conv-empty-sub { font-size: 11px; opacity: 0.75; }

/* Make sure the popup body flexes so conv fills space above prompt */
#ql-floating #ql-body,
#ql-floating #ql-tab-content {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

.sp-sound-btn { display: none !important; }


/* === Hide version badge in popup header === */
#ql-floating .ql-badge,
.ql-header .ql-badge,
.ql-header-right .ql-badge { display: none !important; }

/* === Hero-style beveled primary button (Activate / Validate License) === */
#ql-validate-btn,
#sp-validate-btn,
.sp-btn-primary,
#sp-license-btn,
.ql-btn-primary,
#ql-license-btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 48px !important;
  padding: 0 24px !important;
  border: none !important;
  border-radius: 0 !important;
  background: linear-gradient(135deg, oklch(0.82 0.16 200) 0%, oklch(0.68 0.18 230) 50%, oklch(0.55 0.18 250) 100%) !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,0.18) inset,
    0 0 22px oklch(0.82 0.16 200 / 0.38),
    0 8px 24px rgba(8,15,30,0.55) !important;
  clip-path: polygon(
    12px 0, calc(100% - 12px) 0, 100% 12px,
    100% calc(100% - 12px), calc(100% - 12px) 100%,
    12px 100%, 0 calc(100% - 12px), 0 12px
  ) !important;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease !important;
  overflow: hidden !important;
}
#ql-validate-btn::before,
#sp-validate-btn::before,
.sp-btn-primary::before,
#sp-license-btn::before,
.ql-btn-primary::before,
#ql-license-btn::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent);
  opacity: 0.7; pointer-events: none;
}
#ql-validate-btn::after,
#sp-validate-btn::after,
.sp-btn-primary::after,
#sp-license-btn::after,
.ql-btn-primary::after,
#ql-license-btn::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  pointer-events: none;
}
#ql-validate-btn:hover,
#sp-validate-btn:hover,
.sp-btn-primary:hover,
#sp-license-btn:hover,
.ql-btn-primary:hover,
#ql-license-btn:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.08) !important;
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,0.28) inset,
    0 0 34px oklch(0.82 0.16 200 / 0.55),
    0 12px 30px rgba(8,15,30,0.65) !important;
}
.sp-btn-primary:disabled,
#ql-validate-btn:disabled,
#sp-validate-btn:disabled,
#sp-license-btn:disabled { opacity: 0.55 !important; cursor: not-allowed !important; transform: none !important; }
