/* ============================================================================
   CHATLAMIX - LIGHT MONOCHROME THEME
   A professional black-and-white theme on a white page. No brand hue: the
   accent is BLACK, ink is black, surfaces are white/near-white, and hierarchy
   comes from lightness, weight and space instead of colour.

   The previous dark violet/cyan theme ("Aurora Glass") is archived in
   design-backup/2026-08-05-aurora-glass/ if it ever needs to come back.
   ============================================================================ */

/* ============================================================================
   1. CSS VARIABLES - LIGHT THEME
   ============================================================================ */
:root {
  /* ==========================================================================
     These are ALIASES. The values live in public/css/theme.css — that is the
     only file with colour literals in it. Re-theme the platform there, not
     here. Non-colour tokens (radii, spacing, motion, z-index) do still live
     below, because they are layout, not theme.
     ========================================================================== */

  /* === Background Colors === */
  --bg-primary: var(--surface-page);
  --bg-secondary: var(--surface-raised);
  --bg-tertiary: var(--surface-sunken);
  --bg-surface: var(--glass);
  --bg-surface-hover: var(--glass-strong);
  --bg-surface-active: var(--glass-strong);

  /* === Primary Brand Colors === */
  --primary-color: var(--brand-fill);
  --primary-light: var(--brand-fill);
  --primary-dark: var(--brand-fill-hover);
  --on-primary: var(--brand-ink);          /* label on top of a brand fill */
  --accent-cyan: var(--ink-soft);          /* legacy alias — no longer cyan */
  --accent-cyan-soft: var(--brand-fill-soft);
  --accent-violet-soft: var(--brand-fill-soft);
  --primary-gradient: var(--brand-gradient);
  --primary-gradient-hover: var(--brand-gradient-hover);
  --primary-gradient-vertical: var(--brand-gradient);
  --primary-gradient-50: linear-gradient(to bottom right, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.06));
  --cyber-gradient: linear-gradient(135deg, var(--glass-strong), var(--glass));
  --cyber-gradient-hover: linear-gradient(135deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.06));

  /* === Secondary / Functional Colors === */
  --secondary-color: var(--ink-soft);
  --secondary-dark: var(--ink);
  --success-color: var(--status-success);
  --success-light: var(--status-success);
  --danger-color: var(--status-danger);
  --danger-light: var(--status-danger);
  --danger-gradient: linear-gradient(90.9deg, var(--status-danger) 2.74%, var(--status-danger) 102.92%);
  --warning-color: var(--status-warning);
  --warning-light: var(--status-warning);
  --info-color: var(--status-info);
  --info-light: var(--ink-muted);

  /* === Text Colors === */
  --text-primary: var(--ink);
  --text-secondary: var(--ink-soft);
  --text-muted: var(--ink-muted);
  --text-disabled: var(--ink-disabled);

  /* === Borders === */
  --border-color: var(--line);
  --border-light: var(--line-soft);
  --border-focus: var(--line-strong);
  --border-primary: var(--line-strong);
  --cyber-border: var(--line-soft);
  --cyber-border-strong: var(--line-strong);

  /* === Glass / Surfaces === */
  --glass-bg: var(--glass);
  --glass-bg-strong: var(--glass-strong);
  --glass-border: var(--glass-line);
  --glass-blur: blur(12px);
  --glass-blur-strong: blur(20px);
  --cyber-surface: var(--glass);
  --cyber-surface-strong: var(--glass-strong);
  --cyber-panel-gradient: linear-gradient(135deg, var(--glass), var(--glass-strong));

  /* === Shadows === */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.14);
  --shadow-xl: 0 28px 70px rgba(0, 0, 0, 0.18);
  --shadow-primary: 0 8px 20px rgba(0, 0, 0, 0.14);
  --shadow-primary-lg: 0 15px 30px rgba(0, 0, 0, 0.16);
  --shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.18);
  --shadow-dropdown: 0 10px 30px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 20px rgba(0, 0, 0, 0.1);
  --cyber-shadow: 0 18px 52px rgba(0, 0, 0, 0.14);
  --cyber-shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.1);
  --cyber-glow: 0 0 0 1px var(--line), 0 0 24px rgba(0, 0, 0, 0.08);

  /* === Border Radius === */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 15px;
  --radius-lg: 20px;
  --radius-xl: 25px;
  --radius-pill: 50px;
  --radius-full: 50%;

  /* === Transitions === */
  --transition-fast: all 0.15s ease;
  --transition-smooth: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  --transition-ease: all 0.3s ease;
  --transition-bounce: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --transition-ripple: width 0.6s ease, height 0.6s ease;
  --transition-cyber: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);

  /* === Button Styles === */
  --btn-padding: 0.625rem 1.25rem;
  --btn-weight: 500;
  --btn-hover-transform: translateY(-2px);

  /* === Form Styles === */
  --form-padding: 0.75rem 1rem;
  --form-border-width: 1px;

  /* === Spacing === */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.25rem;
  --spacing-xl: 1.5rem;
  --spacing-2xl: 2rem;

  /* === Z-index === */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ============================================================================
   2. BASE STYLES & RESETS
   ============================================================================ */
* {
  box-sizing: border-box;
}

/* Chat History Modal Dark Theme Styles */
#chatHistoryModal .modal-content {
  backdrop-filter: blur(10px);
  background: var(--bg-secondary);
}

#chatHistoryModal .chat-history-item {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-sm) !important;
  margin-bottom: 8px;
  transition: var(--transition-ease);
}

#chatHistoryModal .chat-history-item:hover {
  background: var(--scrim-soft) !important;
  border-color: var(--line-strong) !important;
  transform: translateX(4px);
}

#chatHistoryModal .chat-history-item,
#chatHistoryModal .chat-history-item * {
  color: var(--text-primary) !important;
}

#chatHistoryModal .chat-history-item .text-muted {
  color: var(--text-secondary) !important;
}

#chatHistoryModal .chat-history-empty {
  color: var(--text-secondary) !important;
}

#chatHistoryModal .btn-outline-secondary {
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

#chatHistoryModal .btn-outline-secondary:hover {
  background: var(--glass-bg) !important;
  border-color: var(--border-light) !important;
}

#chatHistoryModal .dropdown-menu {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--glass-border) !important;
}

#chatHistoryModal .dropdown-item {
  color: var(--text-primary) !important;
}

#chatHistoryModal .dropdown-item:hover {
  background: var(--scrim-soft) !important;
}
/* ============================================================================
   3. TYPOGRAPHY & FONTS
   ============================================================================ */
/* Inter is served woff2-first (subset to latin / latin-ext / greek / cyrillic —
   ja / hi / ko were never covered by Inter and already fall back to the system
   font). The .ttf stays as a fallback for ancient browsers only.
   `font-display: swap` is REQUIRED: without it the default (`auto` -> block)
   hides ALL text for up to 3s while ~0.5MB of font downloads, which on Android
   mobile data showed up as blank/garbled menu labels. */
@font-face {
  font-family: 'Inter';
  src: url("/fonts/Inter-VariableFont_opsz,wght.woff2") format("woff2"),
       url("/fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url("/fonts/Inter-Italic-VariableFont_opsz,wght.woff2") format("woff2"),
       url("/fonts/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ============================================================================
   4. BASE BODY & LAYOUT
   ============================================================================ */
body {
  background: var(--bg-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 0;
  color: var(--text-primary);
  max-width: 100vw !important;
  overflow-x: hidden !important;
  min-height: 100vh;
  scrollbar-width: none;
  -ms-overflow-style: none;
  line-height: 1.6;
}

body::-webkit-scrollbar {
  display: none;
}

/* Dark mode background with subtle gradient */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* The page is white. Full stop — no wash, no tint. Depth comes from the
     card surfaces and hairlines above it, not from a gradient behind it. */
  background: var(--surface-page);
  z-index: -2;
  pointer-events: none;
}

/* The old theme layered a grid + gradient orbs here. The monochrome theme
   keeps the page plain, so this is intentionally empty — the element stays so
   any page that positions against it keeps its stacking context. */
body::after {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: none;
  z-index: -1;
  pointer-events: none;
}

  /* Hide chat-only elements by default to prevent flash on non-chat pages.
     When a chat is active, body gets .chat-active and onchat-on elements are shown via JS. */
  body:not(.chat-active) .onchat-on {
    display: none !important;
  }

  .isAdmin,.local-mode, .clerk-button {
    display:none
  }
  
  body.sfw-mode .nsfw-content {
    display: block ; /* Hide NSFW content */
  }
  body.nsfw-mode .nsfw-content {
    display: block ; /* Or any other appropriate display value */
  }

  .cursor-pointer {
  cursor:pointer
  }
  .fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-primary);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #adviceCarousel .carousel-inner .carousel-item .container {
  width:100%;
  height:100%;
  min-height:200px;
  object-fit:cover;
  align-items:center;
  display:flex;
  justify-content:center;
  flex-direction:column
  }
  
  .bg-gradient-danger {
  background: var(--danger-gradient);
  }
  
  /* ============================================================================
   5. TEXT & TYPOGRAPHY UTILITIES
   ============================================================================ */
  .text-muted {
    color: var(--text-secondary) !important;
    font-weight: 300;
  }

  .text-primary {
    color: var(--primary-color) !important;
  }

  .text-white {
    color: var(--text-primary) !important;
  }

  /* ============================================================================
   6. LINKS
   ============================================================================ */
  a {
    color: var(--primary-light);
    transition: var(--transition-fast);
      text-decoration-color: rgba(133, 133, 133, 0.28);
      text-underline-offset: 0.16em;
    }
  
    a:hover {
      color: var(--accent-cyan);
    }

  /* ============================================================================
   7. LABELS & FORM TEXT
   ============================================================================ */
  label {
    font-size: 12px;
    color: var(--text-muted);
  }

  /* ============================================================================
   8. MODAL BASE STYLES (Dark Theme)
   ============================================================================ */
  .modal-content {
    margin-left: auto;
    margin-right: auto;
    /* Opaque sheet — a glass modal let the whole page read through it. */
    background: var(--surface-overlay);
    border: 1px solid var(--cyber-border);
    color: var(--text-primary);
    box-shadow: var(--cyber-shadow);
  }
  
  .modal-header {
    border-bottom: 1px solid var(--cyber-border);
    background: linear-gradient(90deg, rgba(119, 119, 119, 0.14), rgba(133, 133, 133, 0.04));
  }
  
  .modal-footer {
    border-top: 1px solid var(--cyber-border);
    background: var(--veil);
  }
  
  .modal-title {
    /* Gradient TEXT, not a gradient fill — `color` is only the fallback for
       browsers without background-clip, so it must stay a normal ink. */
    color: var(--text-primary);
    background-image: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .modal-backdrop {
    background: var(--veil-strong);
    backdrop-filter: blur(7px);
  }
  
  .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.7;
    transition: var(--transition-fast);
  }
  
  .btn-close:hover {
    opacity: 1;
  }
  .payment-methods img {
  width:50px
  }
  
  #authTabContent input {
  background: var(--surface-sunken);
  color:#000000!important
  }
  
  #authTabContent label {
  position:absolute;
  top:10px;
  left:20px
  }
  
  .form-outline {
  position:relative
  }
  
  a.nav-link {
  color:#000000
  }
  
  .btn.ico-login-button {
  background-color: var(--brand-fill);
  display:flex;
  align-items:center;
  justify-content: center;
  }
  
  .btn.ico-login-button img {
  width:30px;
  margin-right:10px
  }
  
  #swiperModal .swiper-slide img {
  width:100%;
  height:80vh!important;
  object-fit:contain
  }
  
  
  .horizontal-image {
  width:100%;
  height:100%;
  object-fit:cover
  }
  #chat-wrapper {
    background-color: var(--surface-raised);
    background-size: contain !important;
    min-height: 100vh;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow-y: auto;
    z-index: 1010;
  }
  @media (max-width: 768px) {
    #chat-wrapper {
      background-size: cover !important;
    }
  }
  .chat-item {
  border-bottom: 1px solid var(--line-strong);
  padding-bottom:15px
  }
  
  .modal-content {
  border-radius:20px;
  width:70vw;
  height:90vh
  }
  
  .modal-dialog {
  min-width:100%
  }
  
  a {
  color:#727272
  }
  
  a:hover {
  color:#8d8d8d
  }
  
  label {
  font-size:12px;
  color:#737373
  }
  
  .avatar-xl img {
  width:110px
  }
  
  .rounded-circle {
  border-radius:50%!important
  }
  
  img {
  vertical-align:middle;
  border-style:none
  }
  
  .text-muted {
  color: var(--ink-soft) !important;
  font-weight:300
  }
  
  .style-option {
  width:75px;
  cursor:pointer
  }
  
  .style-option.selected,  #imageStyleTabs .nav-link.active{
  border: 4px solid var(--line) !important;
  }
  .image-fav-double-click{
    cursor: pointer;
  }
  .image-container {
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s, border-color 0.3s;
  }
  .image-container:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06), 0 1.5px 8px rgba(0, 0, 0, 0.08);
  }
  .animated.fadeInDown .swal2-image {
  margin:0
  }
  
  .animated.fadeInDown .swal2-close {
  border:0
  }
  
  .swal2-bottom-slide-in {
  animation:bottom-slide-in .5s
  }
  
  .swal2-bottom-slide-out {
  animation:bottom-slide-out .5s
  }
  
  @keyframes bottom-slide-in {
  0% {
  transform:translateY(100%);
  opacity:0
  }
  
  100% {
  transform:translateY(0);
  opacity:1
  }
  }
  
  @keyframes bottom-slide-out {
  0% {
  transform:translateY(0);
  opacity:1
  }
  
  100% {
  transform:translateY(100%);
  opacity:0
  }
  }

/* ─── Brand loader: animated logo, no spinning ring ─────────────── */
.loading-spinner-container {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: loaderFloat 5s ease-in-out infinite;
}

/* The old spinning ring is now a still, breathing aura + pulsing halo. */
.loading-circle {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: none !important;
  border-radius: 30px;
  animation: none;
}
/* soft breathing glow behind the logo */
.loading-circle::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 38px;
  background: radial-gradient(circle at 50% 50%,
    rgba(119, 119, 119, 0.6),
    rgba(133, 133, 133, 0.18) 48%,
    transparent 70%);
  filter: blur(16px);
  animation: loaderBreathe 3.4s ease-in-out infinite;
}
/* crisp gradient halo framing the rounded icon */
.loading-circle::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 27px;
  padding: 2px;
  background: conic-gradient(from 0deg, #232323, #858585, #777777, #232323);
  -webkit-mask: linear-gradient(#ffffff 0 0) content-box, linear-gradient(#ffffff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: loaderHalo 3.4s ease-in-out infinite;
}

.loading-center-content {
  position: relative;
  z-index: 2;
  width: 112px;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border-radius: 22px !important;
}

/* the logo itself — clean, no white frame */
.loading-logo,
.loading-center-content > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.16))
          drop-shadow(0 0 24px rgba(0, 0, 0, 0.06));
}
/* sheen sweep across the icon */
.loading-center-content::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(100deg, transparent 35%,
    rgba(0, 0, 0, 0.28) 50%, transparent 65%);
  background-size: 250% 100%;
  background-position: 150% 0;
  animation: loaderSheen 3.6s ease-in-out 1.2s infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* animated app-name wordmark shown beneath the loader.
   Sized for a name it does not know: this was written for the literal 5-letter
   "LAMIX" and now renders `{{brand.name}}`, so it must survive "My AI Model
   Manager" at 375px without touching the viewport edge. */
.brand-loader-name {
  margin-top: 30px;
  max-width: min(92vw, 560px);
  font-size: clamp(1.35rem, 6.5vw, 1.7rem);
  font-weight: 700;
  letter-spacing: 2px;
  text-align: center;
  /* The brand gradient token, not a literal: on the monochrome theme this is
     the same near-black ramp as before, and on a skinned brand (ChatLamix's
     dark page) it re-points with the theme — a hardcoded black ramp clipped
     into text is invisible there. */
  background: var(--brand-gradient);
  background-size: 220% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: loaderNameIn 0.8s ease 0.6s both,
             loaderNameShimmer 4s ease-in-out 1.4s infinite;
}
.brand-loader-tagline {
  margin-top: 8px;
  /* `{{brand.tagline}}` is a sentence, not a word — let it wrap tidily rather
     than run to the edges. */
  max-width: min(88vw, 460px);
  line-height: 1.7;
  font-size: 0.78rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
  animation: loaderNameIn 0.8s ease 1s both;
}

@keyframes loaderFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes loaderBreathe {
  0%, 100% { transform: scale(0.9); opacity: 0.55; }
  50%      { transform: scale(1.12); opacity: 1; }
}
@keyframes loaderHalo {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.85; }
}
@keyframes loaderSheen {
  0%       { background-position: 150% 0; }
  35%,100% { background-position: -150% 0; }
}
@keyframes loaderNameIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes loaderNameShimmer {
  0%, 100% { background-position: 0% 0; }
  50%      { background-position: 100% 0; }
}
.video-generation-loader {
width: 100%;
border-radius: 0.5em 0.5em 0 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.8;
}
  .custom-gradient-bg {
  background:var(--primary-gradient);
  color:var(--on-primary, #f6f6f6);
  border:none;
  border-radius:15px;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:color .3s ease-in-out
  }
  
  .custom-gradient-bg::before {
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:300%;
  height:300%;
  background:radial-gradient(circle,#ffffff80 0%,#fff0 80%);
  transform:translate(-50%,-50%) scale(0);
  transition:transform .5s ease-in-out;
  z-index:0
  }
  
  .custom-gradient-bg:hover::before {
  transform:translate(-50%,-50%) scale(1)
  }
  
  .custom-gradient-bg:hover {
  color: var(--brand-ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16);
  }
  
  #chatImage {
  width:100px;
  height:100px;
  object-fit:cover;
  object-position:top
  }
  
  #chatImage.on {
  width:auto!important;
  height:270px!important
  }
  
  .btn-gradient-radius {
  display:inline-block;
  padding:7px 20px;
  border-radius:25px;
  text-decoration:none;
  color: var(--ink);
  background-image:linear-gradient(45deg,#a27a00 0%,#d93c00 100%);
  transition:.4s;
  font-size:21px
  }
  
  label {
  font-size:14px;
  color:#555555
  }
  
  .button-group {
  top:0;
  right:15px
  }
  
  .scroll-container {
  display:flex;
  flex-wrap:nowrap;
  overflow-x:auto
  }
  
  .scroll-container > * {
  flex:0 0 auto;
  width:auto
  }
  
  .card-text.template {
  font-size:12px
  }
  
  label {
  font-size:12px;
  color:#737373
  }
  
  .avatar-xl img {
  width:110px
  }
  
  .rounded-circle {
  border-radius:50%
  }
  
  .rounded-circle.on {
  border-radius:15px!important
  }
  
  img {
  vertical-align:middle;
  border-style:none
  }
  
  /* ============================================================================
   9. FORM CONTROLS (Dark Theme)
   ============================================================================ */
  .form-control {
    display: block;
    width: 100%;
    min-height: 44px;
    height: auto;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-primary);
    /* Opaque — see overwrite-bootstrap.css: a glass field paints as a black box
       on top of a dark backdrop or a mobile browser's own field styling. */
    background: var(--surface-sunken);
    background-clip: padding-box;
    border: 1px solid var(--cyber-border);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06);
    transition: var(--transition-cyber);
  }
  
  .form-control:focus {
    color: var(--text-primary);
    background: var(--surface-raised);
    border-color: var(--cyber-border-strong);
    outline: 0;
    box-shadow: var(--cyber-glow), inset 0 1px 0 rgba(0, 0, 0, 0.06);
  }
  
  .form-control::placeholder {
    color: var(--text-muted);
  }
  
  .form-select {
    background-color: var(--surface-sunken);
    border: 1px solid var(--cyber-border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06);
    min-height: 44px;
  }
  
  .form-select:focus {
    border-color: var(--cyber-border-strong);
    box-shadow: var(--cyber-glow);
  }
  
  textarea.form-control {
    background-color: var(--surface-sunken);
    color: var(--text-primary);
    min-height: 120px;
    resize: vertical;
  }

  /* ============================================================================
   10. DROPDOWN MENUS (Dark Theme)
   ============================================================================ */
  .dropdown-menu {
    background: var(--cyber-panel-gradient);
    border: 1px solid var(--cyber-border);
    border-radius: var(--radius-md);
    box-shadow: var(--cyber-shadow-soft);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
  }
  
  .dropdown-item {
    color: var(--text-primary);
    padding: 0.5rem 1rem;
    transition: var(--transition-fast);
  }
  
  .dropdown-item:hover,
  .dropdown-item:focus {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
  }
  
  .dropdown-item:active,
  .dropdown-item.active {
    background: var(--scrim-soft);
    color: var(--primary-light);
  }
  
  .dropdown-divider {
    border-color: var(--border-color);
  }

  /* ============================================================================
   11. CARDS (Dark Theme)
   ============================================================================ */
  .card {
    background: var(--cyber-panel-gradient);
    border: 1px solid var(--cyber-border);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    transition: var(--transition-smooth);
    box-shadow: var(--cyber-shadow-soft);
  }
  
  .card:hover {
    border-color: var(--cyber-border-strong);
    box-shadow: var(--cyber-shadow);
  }
  
  .card-header {
    background: linear-gradient(90deg, rgba(119, 119, 119, 0.14), rgba(133, 133, 133, 0.04));
    border-bottom: 1px solid var(--cyber-border);
    color: var(--text-primary);
  }
  
  .card-footer {
    background: var(--veil);
    border-top: 1px solid var(--cyber-border);
  }
  
  .card-body {
    color: var(--text-primary);
  }
  
  .card-title {
    color: var(--text-primary);
  }
  
  .card-text {
    color: var(--text-secondary);
  }

  /* ============================================================================
   12. BUTTONS (Dark Theme with Gradients)
   ============================================================================ */
  .btn {
    border-radius: var(--radius-sm);
    font-weight: 650;
    letter-spacing: 0.01em;
    transition: var(--transition-cyber);
  }
  
  .btn-primary {
    background: var(--primary-gradient);
    border: none;
    color: var(--on-primary, #f6f6f6);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
  }
  
  .btn-primary:hover {
    background: var(--primary-gradient-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary), 0 0 22px rgba(0, 0, 0, 0.16);
  }
  
  .btn-outline-primary {
    background: transparent;
    border: 1px solid var(--cyber-border-strong);
    color: var(--primary-light);
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06), 0 0 14px rgba(0, 0, 0, 0.06);
  }
  
  .btn-outline-primary:hover {
    background: var(--primary-gradient);
    border-color: transparent;
    color: var(--on-primary, #f6f6f6);
  }
  
  .btn-secondary {
    background: var(--cyber-surface);
    border: 1px solid var(--cyber-border);
    color: var(--text-secondary);
  }
  
  .btn-secondary:hover {
    background: var(--cyber-gradient);
    border-color: var(--cyber-border-strong);
    color: var(--text-primary);
  }
  
  .btn-outline-secondary {
    background: transparent;
    border: 1px solid var(--cyber-border);
    color: var(--text-secondary);
  }
  
  .btn-outline-secondary:hover {
    background: var(--glass-bg);
    border-color: var(--cyber-border-strong);
    color: var(--text-primary);
  }
  
  .btn-danger {
    background: var(--danger-gradient);
    border: none;
    color: var(--status-ink);
  }
  
  .btn-success {
    background: linear-gradient(135deg, #20c997 0%, #28a745 100%);
    border: none;
    color: var(--text-primary);
  }

  /* ============================================================================
   12.5 SEGMENTED CONTROL (Native App-like Toggle Buttons)
   ============================================================================ */
  .segmented-control {
    display: flex;
    background: var(--glass-strong);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
  }

  .segmented-control .btn-check {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
  }

  .segmented-control .segment-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--ink-muted);
    font-size: 0.7rem;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    gap: 4px;
    min-height: 60px;
  }

  .segmented-control .segment-btn i {
    font-size: 1rem;
    opacity: 0.7;
    transition: all 0.2s ease;
  }

  .segmented-control .segment-btn:hover {
    background: var(--glass-strong);
    color: var(--ink-soft);
  }

  .segmented-control .segment-btn:hover i {
    opacity: 0.9;
  }

  .segmented-control .btn-check:checked + .segment-btn {
    background: var(--scrim-soft);
    color: var(--ink);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }

  .segmented-control .btn-check:checked + .segment-btn i {
    opacity: 1;
  }

  /* Compact variant for inline/header use */
  .segmented-control.segmented-control-sm {
    padding: 3px;
    gap: 3px;
  }

  .segmented-control.segmented-control-sm .segment-btn {
    flex-direction: row;
    padding: 6px 12px;
    min-height: auto;
    font-size: 0.75rem;
    gap: 6px;
  }

  .segmented-control.segmented-control-sm .segment-btn i {
    font-size: 0.875rem;
  }

  /* Horizontal variant (text beside icon) */
  .segmented-control.segmented-control-horizontal .segment-btn {
    flex-direction: row;
    gap: 6px;
  }

  /* Light theme variant */
  .segmented-control.segmented-control-light {
    background: var(--glass-strong);
  }

  .segmented-control.segmented-control-light .segment-btn {
    color: var(--ink);
  }

  .segmented-control.segmented-control-light .segment-btn:hover {
    background: var(--glass-strong);
    color: var(--ink);
  }

  .segmented-control.segmented-control-light .btn-check:checked + .segment-btn {
    background: var(--scrim-soft);
    color: var(--ink-disabled);
  }

  .segmented-control.segmented-control-light .btn-check:checked + .segment-btn i {
    color: var(--ink-muted);
  }

  /* ============================================================================
   13. TABLES (Dark Theme)
   ============================================================================ */
  .table {
    color: var(--text-primary);
    border-color: var(--border-color);
  }
  
  .table > thead > tr > th {
    border-color: var(--border-color);
    color: var(--text-secondary);
  }
  
  .table > tbody > tr > td {
    border-color: var(--border-color);
  }
  
  .table-striped > tbody > tr:nth-of-type(odd) {
    background: var(--glass-bg);
  }
  
  .table-hover > tbody > tr:hover {
    background: var(--bg-surface-hover);
  }

  /* ============================================================================
   14. ALERTS & BADGES (Dark Theme)
   ============================================================================ */
  .alert {
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
  }
  
  .alert-primary {
    background: var(--scrim-soft);
    border-color: var(--line-strong);
    color: var(--primary-light);
  }
  
  .alert-success {
    background: rgba(40, 167, 69, 0.15);
    border-color: rgba(40, 167, 69, 0.3);
    color: var(--success-light);
  }
  
  .alert-danger {
    background: rgba(198, 0, 0, 0.15);
    border-color: rgba(198, 0, 0, 0.3);
    color: var(--danger-light);
  }
  
  .alert-warning {
    background: rgba(162, 122, 0, 0.15);
    border-color: rgba(162, 122, 0, 0.3);
    color: var(--warning-color);
  }
  
  .badge {
    font-weight: 500;
  }
  
  .bg-primary {
    background: var(--primary-gradient) !important;
    color: var(--on-primary, #f6f6f6) !important;
  }

  /* ============================================================================
   15. NAV & TABS (Dark Theme)
   ============================================================================ */
  .nav-link {
    color: var(--text-secondary);
    transition: var(--transition-fast);
  }
  
  .nav-link:hover {
    color: var(--text-primary);
  }
  
  .nav-link.active {
    color: var(--primary-light);
  }
  
  .nav-tabs {
    border-bottom: 1px solid var(--border-color);
  }
  
  .nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
  }
  
  .nav-tabs .nav-link:hover {
    border-color: var(--border-color);
    color: var(--text-primary);
  }
  
  .nav-tabs .nav-link.active {
    background: transparent;
    border-color: var(--primary-color);
    color: var(--primary-light);
  }
  
  .nav-pills .nav-link {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
  }
  
  .nav-pills .nav-link:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
  }
  
  .nav-pills .nav-link.active {
    background: var(--primary-gradient);
    border-color: transparent;
    color: var(--on-primary, #f6f6f6);
  }

  /* ============================================================================
   16. LISTS (Dark Theme)
   ============================================================================ */
  .list-group-item {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
  }
  
  .list-group-item:hover {
    background: var(--bg-surface-hover);
  }
  
  .list-group-item.active {
    background: var(--scrim-soft);
    border-color: var(--primary-color);
    color: var(--primary-light);
  }

  /* ============================================================================
   17. PROGRESS BARS (Dark Theme)
   ============================================================================ */
  .progress {
    background: var(--bg-tertiary);
    border-radius: var(--radius-xs);
    overflow: hidden;
  }
  
  .progress-bar {
    background: var(--primary-gradient);
  }

  /* ============================================================================
   18. TOASTS & TOOLTIPS (Dark Theme)
   ============================================================================ */
  .toast {
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
  }
  
  .toast-header {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
  }
  
  .tooltip-inner {
    background: var(--bg-tertiary);
    color: var(--text-primary);
  }

  .popover {
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
  }
  
  .popover-header {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
  }
  
  .popover-body {
    color: var(--text-primary);
  }
  
  .p-fv-copy__middle {
  background:linear-gradient(90.9deg,#232323 2.74%,#777777 102.92%);
  background-clip:border-box;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-top:15px
  }
  
  .pricing-container {
  margin:0 auto;
  padding:40px 20px;
  text-align:center
  }
  
  .pricing-title {
  font-size:2em;
  margin-bottom:20px
  }
  
  .pricing-description {
  font-size:1em;
  margin-bottom:40px;
  color:#aaaaaa
  }
  
  .switch-button-container {
  margin-bottom:20px
  }
  
  .switch {
  position:relative;
  display:inline-block;
  width:120px;
  height:54px
  }
  
  .switch input {
  opacity:0;
  width:0;
  height:0
  }
  
  .slider {
  position:absolute;
  cursor:pointer;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color: var(--fill-mid-strong);
  -webkit-transition:.4s;
  transition:.4s
  }
  
  .slider:before {
  position:absolute;
  content:"";
  height:46px;
  width:60px;
  left:4px;
  bottom:4px;
  background-color: var(--brand-fill);
  -webkit-transition:.4s;
  transition:.4s
  }
  
  input:checked +.slider {
  background-color:#1b1b1b
  }
  
  input:focus +.slider {
  box-shadow:0 0 1px rgba(0, 0, 0, 0.06)
  }
  
  input:checked +.slider:before {
  -webkit-transform:translateX(50px);
  -ms-transform:translateX(50px);
  transform:translateX(50px)
  }
  
  .slider.round {
  border-radius:34px
  }
  
  .slider.round:before {
  border-radius:50px;
  background:linear-gradient(90.9deg,#232323 2.74%,#777777 102.92%)
  }
  
  .label {
  position:absolute;
  top:15px;
  font-size:16px;
  color: var(--ink-muted);
  font-weight:600
  }
  
  .label.monthly {
  left:16px
  }
  
  .label.yearly {
  right:16px
  }
  
  input:checked ~.label.yearly {
  color:#000000
  }
  
  input:checked ~.label.monthly {
  color:#999999
  }
  
  input:not(:checked) ~.label.yearly {
  color:#999999
  }
  
  input:not(:checked) ~.label.monthly {
  color:#000000
  }
  
  .card-header.plan-header {
  border: 1px solid var(--line);
  margin:10px;
  border-radius:5px;
  padding:5px 10px;
  color:#7e7e7e
  }
  
  .card-header.plan-header h2 {
  font-size:21px;
  line-height:initial;
  font-weight:700;
  margin:0
  }
  
  .plan-cards {
  display:flex;
  justify-content:space-around;
  flex-wrap:wrap;
  gap:20px
  }
  
  .plan-card.best {
  border:2px solid #666666
  }
  
  .plan-card {
  border: 1px solid var(--line-strong);
  border-radius:8px;
  box-shadow:0 2px 8px #0000001a;
  /* overflow:hidden; */ /* Modified to allow badges to overflow */
  transition:box-shadow .3s ease
  }
  
  .plan-card:hover {
  box-shadow:0 4px 16px #00000026
  }
  
  .plan-header {
  background-color: var(--brand-fill);
  padding:20px;
  font-size:1.5em;
  font-weight:700
  }
  
  .plan-price h3 {
  font-weight:700;
  font-size:1.8em;
  margin:20px 0
  }
  
  .plan-details {
  padding:20px;
  text-align:left;
  font-size:1.2em;
  line-height:1.1;
  font-weight:500
  }
  
  .plan-details ul {
  list-style:none;
  padding:0
  }
  
  .plan-details li {
  margin-bottom:10px
  }
  
  .plan-button.btn.btn-lamix {
  background:linear-gradient(90.9deg,#232323 2.74%,#777777 102.92%)
  }
  
  .plan-button {
  display:block;
  margin:20px auto;
  padding:10px 30px;
  color: var(--ink);
  text-decoration:none;
  border-radius:4px;
  transition:background-color .3s ease
  }
  
  .plan-button:hover {
  background-color:#b3b3b3
  }
  
  .contact-sns {
    padding: 20px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--glass-border);
  }
  
  .contact-title {
  font-size:1.5em;
  margin-bottom:20px
  }
  
  .contact-description {
  font-size:1em;
  margin-bottom:20px;
  color:#aaaaaa
  }
  
  .social-media {
  display:flex;
  justify-content:center;
  gap:20px
  }
  
  .social-media img {
  width:100px;
  height:100px;
  border-radius:8px;
  transition:transform .3s ease
  }
  
  .social-media img:hover {
  transform:scale(1.05)
  }
  
  @media (max-width: 600px) {
  .plan-details {
  font-size:.9em
  }
  }
  
  #markdownContainer {
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    background: var(--bg-secondary);
    color: var(--text-primary);
  }
  
  .auto-gen {
    font-size: 10px;
    border-radius: var(--radius-pill);
  }
  
  .tab-pane {
  padding-top:0px
  }
  
  .image-nsfw-toggle.nsfw {
  color:red
  }
  
  .assistant-image-box {
  position:relative
  }

  .video-icon-overlay {
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.video-icon-overlay:hover {
    transform: scale(1.2);
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.06));
}

.video-icon-overlay:active {
    transform: scale(1.1);
}
  .nsfw-badge-container {
  position:absolute;
  bottom:5px;
  right:5px;
  font-size:12px;
  opacity:.5;
  background:linear-gradient(to right,red,#ce0000,#fd0000)
  }
  
  .jp-date {
  display:none
  }
  
  .persona {
  display:none
  }
  
  .img-blur {
  filter:blur(5px);
  clip-path:inset(0)
  }
  
  img.select {
  border:2px solid
  }
  
  .style-option.is-premium {
  opacity:.5
  }
  
  .swal2-container {
  padding:0!important
  }
  
  .thumb-option {
  width:50px;
  height:50px;
  cursor:pointer;
  object-fit:cover;
  object-position:top
  }
  
  .overflow-visible {
  overflow:visible!important
  }
  
  #chat-users-gallery {
  scrollbar-width:thin
  }
  
  #chat-users-gallery::-webkit-scrollbar {
  height:8px
  }

  #chat-images-gallery .card {
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  overflow: hidden; /* Ensures content like scaled images respect card boundaries */
}

#chat-images-gallery .card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 1.5px 8px rgba(0, 0, 0, 0.08);
  z-index: 10; /* To bring the hovered card above others if they overlap */
}

#chat-images-gallery .card .card-img-top {
  transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), filter 0.3s;
  will-change: transform; /* Performance hint for browsers */
}

#chat-images-gallery .card:hover .card-img-top {
  filter: brightness(1.05) saturate(1.05);
}

.swal2-custom-popup {
  border-radius:50px
  }
  
  #chat-users-gallery::-webkit-scrollbar-thumb {
  background-color:#0003;
  border-radius:4px
  }
  
  #chat-users-gallery::-webkit-scrollbar-track {
  background-color:#0000000d
  }
  
  .rounded-circle {
  object-fit:cover;
  object-position:top
  }
  
  .rounded-avatar {
  border: 2px solid var(--line-strong);
  background-size:cover;
  background-repeat:no-repeat;
  background-position:top;
  border-radius:50px;
  background-color:#ffffff54;
  overflow: hidden;
  }
  
  img.style-option {
  width:100px;
  height:100px;
  object-fit:cover;
  object-position:top
  }
  
  iframe {
  width:100%;
  height:100%;
  border:none
  }
  
  #chat-container {
  background: transparent !important;
  }
  
  #chatContainer > div:nth-child(1) {
  padding-top:35px
  }
  
  .one-line {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100px;
  display:block
  }
  
  .swal2-custom-close-button {
  display:none
  }
  
  .swal2-top-left-close-button {
  position:absolute;
  top:10px;
  left:10px
  }
  
  #introChat-none {
    overflow-y: scroll;
    background: var(--veil-strong);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    bottom: 120px;
    right: 10px;
    left: 10px;
    border-radius: var(--radius-md);
    border: 1px solid var(--glass-border);
  }
  
  #imageStyleTabs .nav-item button {
  padding:10px
  }

  .audio-controller {
  align-items:center;
  color: var(--ink);
  border-radius:20px;
  width:auto;
  justify-content:center;
  position:absolute;
  top:-11px;
  left:60px;
  font-size:12px;
  z-index:10;
  }
  
  .audio-controller button {
  border:none;
  cursor:pointer;
  color: var(--ink);
  font-size:12px;
  width:50px
  }

  /* Lip-sync trigger sits next to the speaker voice player; narrower than the play
     pill and accented so it reads as a distinct action. */
  .audio-controller .lip-sync-btn {
  width:auto;
  padding:2px 8px;
  }
  .audio-controller .lip-sync-btn i {
  font-size:12px;
  }
  .audio-controller .lip-sync-btn.lip-sync-btn--active {
  opacity:0.6;
  pointer-events:none;
  animation:lipSyncPulse 1s ease-in-out infinite;
  }
  @keyframes lipSyncPulse {
  0%,100% { opacity:0.4; }
  50% { opacity:0.9; }
  }
  
  .h-100vh {
  height:100vh
  }
  
  .h-90vh {
  height:90vh
  }
  
  .h-80vh {
  height:80vh
  }
  
  .h-30vh {
  height:30vh
  }
  
  .gen-idea-container #swal2-html-container,.album-popup #swal2-html-container {
  border-radius:40px 40px 0 0;
  padding:0;
  width:100%
  }
  
  .gen-idea-container,.album-popup {
  border-radius:40px 40px 0 0
  }
  
  .gen-idea-container,.album-popup,.custom-prompt-container {
  width:100%;
  left:0;
  right:0;
  bottom:0
  }
  
  .album-popup {
  background:linear-gradient(135deg,#cfcfcf,#1e1928c2,#cecece)
  }
  
  .gen-idea-container {
  background:linear-gradient(135deg,#cfcfcf,#1e1928c2,#cecece)
  }
  
  .custom-prompt-container {
  max-height:50vh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch
  }
  
  .gen-idea-container .swal2-close,.custom-prompt-container .swal2-close {
  right:15px;
  border-radius:50%;
  font-size:31px;
  top:10px;
  background:#9796963d
  }
  
  .gen-idea-container .swal2-close {
  background:#9796963d
  }
  
  em {
  font-size:13px;
  color:#6a6a6a
  }
  
  .text-short {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  width:150px;
  display:inline-block
  }
  .truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px !important;
  display: -webkit-inline-box;  
}

  .assistant-image-box img, .assistant-video-box video {
  width:100%;
  border-radius:0.5em 0.5em 0 0;
  cursor:pointer
  }
  .image-tools,.video-tools, .title.assistant-chat-box, .assistant-image-box img, .assistant-video-box video {
    max-width: 270px !important;
  }
  .assistant-video-box.video-container video {
    width:100%;
    border-radius:0.5em 0.5em 0 0;
  }
  .isLoading .fa-image {
  display:none
  }
  
  .isLoading .fa-spin {
  display:inherit!important
  }
  
  .border-top-custom-gradient {
  position:relative;
  border-top:0 solid transparent
  }
  
  .new-chat {
  display:none
  }
  
  .hidden {
  opacity:0
  }
  
  .border-top-custom-gradient::before {
  border-radius:4px 4px 0 0;
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:10px;
  --tw-bg-opacity:1;
  background-color:rgb(168 85 247/var(--tw-bg-opacity));
  z-index:1
  }
  
  .custom-gradient-bg-no-animation {
  --tw-bg-opacity:1;
  background-color:rgb(168 85 247/var(--tw-bg-opacity))
  }
  
  .custom-gradient-bg {
  --tw-bg-opacity:1;
  background-color:rgb(168 85 247/var(--tw-bg-opacity));
  color: var(--ink);
  border:none;
  border-radius:5px;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:color .3s ease-in-out
  }
  
  .custom-gradient-bg::before {
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:300%;
  height:300%;
  background:radial-gradient(circle,#ffffff80 0%,#fff0 80%);
  transform:translate(-50%,-50%) scale(0);
  transition:transform .5s ease-in-out;
  z-index:0
  }
  
  .custom-gradient-bg.danger {
  background:linear-gradient(90.9deg,#232323 2.74%,#c60000 102.92%)!important
  }
  
  .custom-gradient-bg.danger:hover {
  background:linear-gradient(90.9deg,#232323 2.74%,#c60000 102.92%)!important
  }
  
  .custom-gradient-bg:hover::before {
  transform:translate(-50%,-50%) scale(1)
  }
  
  .custom-gradient-bg:hover {
  color: var(--ink);
  --tw-bg-opacity:1;
  background-color:rgb(168 85 247/var(--tw-bg-opacity))
  }
  
  .custom-gradient-bg-outline {
  --tw-bg-opacity:1;
  background-color:transparent;
  color:rgb(168 85 247/var(--tw-bg-opacity));
  border:2px solid rgb(168 85 247/var(--tw-bg-opacity));
  border-radius:5px;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:background-color .3s ease-in-out,color .3s ease-in-out
  }
  
  .custom-gradient-bg-outline:hover {
  background-color:rgb(168 85 247/var(--tw-bg-opacity));
  color:#000000
  }
  
  .chatbot-info-card {
  height:80vh;
  overflow-y:scroll
  }
  
  .chatbot-info-card .swal-image.analyze {
  margin-left:auto!important;
  margin-right:auto!important;
  margin-top:25px!important
  }
  
  .chatbot-image-chat {
  cursor:pointer
  }
  
  .chatbot-category-button img {
  object-fit:cover;
  width:70px!important;
  height:70px;
  border-radius:50%
  }

.assistant-chat-box {
  border-radius:0 15px 15px 15px;
  background-color:#151213b0;
  color: var(--brand-ink);
  font-size:14px;
  max-width: 81%;
  }

  /* User bubble: cap width and wrap long words so messages grow
     vertically instead of overflowing/cropping past the viewport.
     The cap also reserves room for the persona avatar (45px) + its
     me-3 gap (16px) so the bubble never pushes past the viewport when
     a persona is selected. */
  .user-message.p-3 {
  max-width: min(81%, calc(100% - 70px));
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
  }

  /* Persona avatar must keep its size and not be squeezed/overflow */
  .message-container .user-image-chat {
  flex-shrink: 0;
  }
  
  .narration-container {
  font-size:13px;
  color:#9f9f9f
  }
  
  .chat-option-menu .dropdown-item {
  padding:5px 15px
  }
  
  .chat-option-menu li {
  padding:3px 10px
  }
  
  #chat-discovery h4 {
  margin-bottom:0!important
  }
  
  .message-container p {
  margin-bottom:0
  }
  
  .btn.ico-login-button {
  background-color: var(--brand-fill);
  display:flex;
  align-items:center;
  justify-content:center
  }
  
  .btn.ico-login-button img {
  width:30px;
  margin-right:10px
  }
  
  .animated.fadeInDown .swal2-image {
  margin:0
  }
  
  .animated.fadeInDown .swal2-close {
  border:0
  }
  
  .spin {
    display: inline-block;
    animation:spin 1s linear infinite
  }
  
  @keyframes spin {
  from {
  transform:rotate(0deg)
  }
  
  to {
  transform:rotate(360deg)
  }
  }
  
  .swal2-bottom-slide-in {
  animation:bottom-slide-in .5s
  }
  
  .swal2-bottom-slide-out {
  animation:bottom-slide-out .5s
  }
  
  @keyframes bottom-slide-in {
  0% {
  transform:translateY(100%);
  opacity:0
  }
  
  100% {
  transform:translateY(0);
  opacity:1
  }
  }
  
  @keyframes bottom-slide-out {
  0% {
  transform:translateY(0);
  opacity:1
  }
  
  100% {
  transform:translateY(100%);
  opacity:0
  }
  }
  
  .text-muted {
  color: var(--ink-soft) !important;
  font-weight:300
  }
  
  .scroll-horizontal {
  flex-wrap:nowrap;
  width:100%;
  flex-direction:row;
  overflow-x:scroll;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  touch-action:pan-x
  }
  
  .modal-content {
  border-radius:5px
  }
  
  .modal-title {
  font-size:20px;
  font-weight:600;
  background-image:radial-gradient(circle at 0 0,#2f2f2f,#898989 50%,#898989);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text
  }
  
  .u-color-grad {
  background-image:radial-gradient(circle at 0 0,#2f2f2f,#898989 50%,#898989);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-right:6px;
  letter-spacing:0;
  font-size:54px;
  line-height:1
  }
  @media screen and (max-width: 600px) {
    .u-color-grad {
      font-size: 30px;
    }
    
  }
  .character-speech-bubble{
    border-radius: 0 16px 16px 16px;
  }
  #chat-page-list .gallery, #chat-page-list .message-count {
    display: none;
  }

  .chat-card-container .card-img-top {
    transition: transform 0.3s ease-in-out;
    transition: background-size 0.3s ease-in-out, background-position 0.3s ease-in-out;
    background-repeat: no-repeat;
    background-size: auto 120%;
  }

  .chat-card-container:hover .card-img-top {
    transition: background-size 0.3 ease-in-out, background-position 0.3s ease-in-out;
    background-size: auto 140% !important;
  }

  .card-img-top.girls_avatar {
  object-fit:cover;
  object-position:top;
  width:100%;
  margin:auto;
  border-radius:15px;
  height:280px;
  padding:0 5px;
  background-position:top;
  }  

  .loading-overlay.on{
    display: flex !important;
  }
    .avatar {
    object-fit:cover;
    object-position:top;
    width:35px
    }
  
    
  .scroll-container {
  display:flex;
  flex-wrap:nowrap;
  overflow-x:auto
  }
  
  .scroll-container > * {
  flex:0 0 auto;
  width:auto
  }
  
  .category-container {
  display:flex;
  overflow-x:auto;
  white-space:nowrap
  }
  
  .category-button {
  margin:5px
  }
  
  .card-round-design .col-12 {
  margin-top:50px
  }
  
  .card-round-design .col-12 .card .card-img-top {
  position:absolute;
  top:-50px;
  width:100px;
  height:100px;
  left:0;
  right:0;
  margin:auto;
  border-radius:150px;
  object-fit:cover;
  object-position:top
  }
  
  .card-round-design .col-12 .card .card-body {
  padding-top:100px
  }
  
  .card-round-design .col-10 .card .card-img-top {
  height:270px;
  margin:auto;
  object-fit:cover;
  object-position:top
  }
  
  .swal-image.analyze {
  object-fit:cover;
  object-position:top;
  width:auto!important;
  height:200px!important;
  border-radius:6px!important
  }
  
  .chat-container {
  display:flex;
  overflow-x:auto;
  padding-bottom:0;
  padding-top:0
  }
  
  .chat-card {
  flex:0 0 auto;
  width:30vw;
  margin-right:15px
  }
  
  .online-text {
  width:95%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
  }
  
  .character-short-description {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 13px;
    color: var(--text-secondary);
  }
  
  .character-title {
    font-weight: 600;
    font-size: 16px;
    color: var(--text-primary);
  }
  
  .chat-container .card:hover {
  background:none!important
  }
  
  @media (max-width: 600px) {
  #chat-container {
  background: transparent !important;
  }
  
  .noscroll {
  display:block;
  overflow:hidden
  }
  
  .top-img {
  width:70%
  }
  
  .card.chat-card {
  width:330px
  }
  }
  
  .intro-thumbnail {
  border-radius:150px;
  margin-bottom:10px;
  width:100px;
  object-fit:cover;
  height:100px;
  object-position:top
  }
  
  /* ============================================================================
   19. SIDEBAR (Dark Theme)
   ============================================================================ */
  .sidebar, .sidebar-history {
    height: 100vh;
    width: 260px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1034;
    background: var(--bg-secondary);
    border-right: 1px solid var(--glass-border);
    transition: transform 0.3s ease;
    transform: translateX(0);
    overflow-y: auto;
    overflow-x: hidden;
  }
  
  .sidebar.hidden, .sidebar-history.hidden {
    transform: translateX(-260px);
  }
  
  .sidebar-history.shadow {
    z-index: 1035;
    box-shadow: var(--shadow-lg);
  }
  
  .content {
  margin-left:260px;
  transition:margin-left .3s ease
  }
  
  .content.collapsed {
  margin-left:0
  }
  .sticky-bottom{
    position: absolute;
    z-index: 1020;
  }
  nav.navbar,.sticky-bottom {
  margin-left:0;
  transition:margin-left .3s ease
  }
  
  nav.navbar.move {
  margin-left:260px
  }
  
  .sticky-bottom.move {
  margin-left:260px
  }
  
  .choice-container {
  text-wrap:nowrap;
  overflow:auto;
  padding:15px 0
  }
  
  #startButton {
  border-radius:10px;
  font-weight:600;
  padding:15px 0
  }
  
  .fade-content {
  height:100%;
  mask-image:linear-gradient(to bottom,#0000,#000f 10%);
  -webkit-mask-image:linear-gradient(to bottom,#0000,#000f 10%)
  }
  
  #chat-container {
  flex-grow:1;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
  overflow-y: hidden;
  height: 100vh;
  }
  
  .card-header,.card-footer {
  flex-shrink:0
  }
  
  .card-body {
  flex-grow:1;
  overflow-y:auto;
  position:relative
  }
  
  .btn-flat-border {
  display:inline-block;
  padding:.3em 1em;
  text-decoration:none;
  color: var(--ink-muted);
  border:solid 2px #595959;
  border-radius:3px;
  transition:.4s;
  margin-right:5px;
  margin-left:5px;
  font-size:18px
  }
  
  .dropdown-toggle::after {
  display:none!important
  }
  
  .btn-flat-border:hover {
  background: var(--fill-mid);
  color:#000000
  }
  
  #messages {
  padding:10px;
  padding-bottom:100px;
  border-radius:5px;
  z-index:1
  }
  
 


  
  .user-chat {
    cursor: pointer;
  }
  
  .user-chat:hover {
    background-color: var(--bg-surface-hover);
  }
  .toolbar-title{
    display: none;
  }
  .prompt-card.selected {
  border: 2px solid var(--line);
  box-shadow:0 8px 16px #007bff4d;
  background-color: var(--brand-fill);
  transition:all .3s ease
  }
  
  .prompt-card.selected img {
  opacity:.9
  }
  
  .prompt-card.selected p {
  font-weight:700;
  color:var(--brand-ink);
  }
  
  .chat-list .thumb {
  margin-right:0
  }
  
  .chat-list .thumb img {
  width:40px;
  height:40px;
  -o-object-fit:cover;
  object-fit:cover;
  overflow:hidden;
  object-position:top;
  border-radius:13px
  }
  
  .chat-list.item:hover,.user-chat-history:hover {
  background-color:#c6c9cc99!important
  }
  
  .chat-list.item.active,.user-chat-history.active {
  background-color:#c6c9cc99!important
  }
  
  .chat-list .dropdown .dropdown-toggle,#chat-history .dropdown .dropdown-toggle {
  transform:rotate(90deg);
  opacity:1;
  pointer-events:none
  }
  
  .online-text {
  width:150px;
  white-space:nowrap;
  overflow:hidden
  }
  
  .lines-paragraph {
  display:-webkit-box;
  line-clamp:3;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden
  }
  
  .chat-contain .card-body {
  width:100%
  }
  
  .smaller-title .swal2-title {
  font-size:18px;
  font-weight:600
  }
  
  .swal-image {
  border-radius:50px;
  object-fit:cover
  }
  
  .img-gen-button {
  background-size:cover;
  border-radius:50%;
  padding:15px
  }
  
  .upload-area {
  border: 2px dashed var(--line-strong);
  padding:20px;
  text-align:center;
  cursor:pointer
  }
  
  .upload-area.dragover {
  border-color:#ffffff
  }
  
  .liked i {
  color:red
  }
  .cl-cardBox.cl-signIn-start {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    }
  /* Clerk dark + purple theme overrides */
  .cl-rootBox {
    --clerk-font-color: #000000;
  }
  .cl-card,
  .cl-modalCard {
    background: var(--veil-strong) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 15px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
  }
  .cl-headerTitle, .cl-headerSubtitle {
    color: var(--ink) !important;
  }
  .cl-formButtonPrimary {
    background: linear-gradient(90.9deg, #232323 2.74%, #777777 102.92%) !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
  }
  .cl-formButtonPrimary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
  }
  .cl-socialButtonsBlockButton {
    border-radius: 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    background: var(--glass) !important;
    color: var(--ink) !important;
  }
  .cl-socialButtonsBlockButtonText {
    color: var(--ink) !important;
  }
  .cl-formFieldInput {
    background: var(--glass) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 12px !important;
    color: var(--ink) !important;
  }
  .cl-formFieldInput:focus {
    border-color: var(--line) !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06) !important;
  }
  .cl-formFieldLabel {
    color: var(--ink-soft) !important;
  }
  .cl-footerActionLink {
    color: var(--ink-soft) !important;
  }
  .cl-footerActionText {
    color: var(--ink-soft) !important;
  }
  .cl-dividerLine {
    border-color: var(--line) !important;
  }
  .cl-dividerText {
    color: var(--ink-soft) !important;
  }
  .cl-userPreviewMainIdentifier {
    color: var(--ink) !important;
  }
  .cl-userPreviewSecondaryIdentifier {
    color: var(--ink-soft) !important;
  }
  .cl-profileSectionTitle {
    color: var(--ink) !important;
    border-color: var(--line) !important;
  }
  .cl-profileSectionTitleText {
    color: var(--ink) !important;
  }
  .cl-profileSectionContent {
    color: var(--ink-soft) !important;
  }
  .cl-profileSectionPrimaryButton {
    color: var(--ink-soft) !important;
  }
  .cl-navbarButton {
    color: var(--ink) !important;
  }
  .cl-navbarButtonIcon {
    color: var(--ink-soft) !important;
  }
  .cl-navbar {
    border-color: var(--line) !important;
  }
  .cl-pageScrollBox,
  .cl-page,
  .cl-scrollBox,
  .cl-profilePage {
    background: var(--veil-strong) !important;
  }
  .cl-cardBox {
    background: var(--veil-strong) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
  }
  .cl-modalBackdrop {
    background: var(--veil-strong) !important;
    backdrop-filter: blur(4px) !important;
  }
  .cl-badge {
    background: var(--scrim-soft) !important;
    color: var(--ink-soft) !important;
  }
  .cl-identityPreview {
    background: var(--glass) !important;
    border-color: var(--line) !important;
  }
  .cl-identityPreviewText {
    color: var(--ink) !important;
  }
  .cl-identityPreviewEditButton {
    color: var(--ink-soft) !important;
  }
  .cl-formResendCodeLink {
    color: var(--ink-soft) !important;
  }
  .cl-otpCodeFieldInput {
    background: var(--glass) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: var(--ink) !important;
  }
  .cl-alternativeMethodsBlockButton {
    color: var(--ink) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
  }
  .cl-userButtonPopoverCard {
    background: var(--surface-overlay) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(10px) !important;
  }
  .cl-userButtonPopoverActionButton,
  .cl-userButtonPopoverActionButtonText {
    color: var(--ink) !important;
  }
  .cl-userButtonPopoverActionButtonIcon {
    color: var(--ink-soft) !important;
  }
  .cl-userButtonPopoverFooter {
    border-color: var(--line) !important;
  }
  .cl-accordionTriggerButton {
    color: var(--ink) !important;
  }
  .cl-accordionContent {
    color: var(--ink-soft) !important;
  }
    
  @media (max-width: 600px) {

  .dropdown-menu {
  transform:translate3d(20px,36px,0px)!important
  }
  
  .avatar-menu.dropdown-menu {
  transform:translate3d(18px,46px,0px)!important
  }
  
  .modal-content {
  border-radius:20px;
  width:100%
  }
  
  #adviceCarousel .carousel-inner .carousel-item .container {
  min-height:200px
  }
  
  #adviceCarousel .carousel-inner .carousel-item .container h4 {
  font-size:100%
  }
  
  .chat-contain .card-body {
  width:100%
  }
  
  .content,nav.navbar.move {
  margin-left:0
  }
  
  #navbarNav .navbar-nav {
  padding-top:0!important
  }
  }

  /* Native App Style Navigation Icon Button */
  .nav-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 12px;
    background: var(--glass-strong);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.18);
    color: var(--ink);
    font-size: 1.15rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }

  .nav-icon-btn:hover {
    background: var(--scrim-soft);
    border-color: var(--line-strong);
    color: var(--ink);
    transform: scale(1.05);
  }

  .nav-icon-btn:active {
    transform: scale(0.95);
    background: var(--scrim-soft);
  }

  .nav-icon-btn i {
    line-height: 1;
  }

  /* Dark mode / light background variant */
  @media (prefers-color-scheme: light) {
    .nav-icon-btn {
      background: var(--glass-strong);
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: var(--ink);
    }

    .nav-icon-btn:hover {
      background: var(--glass-strong);
      border-color: var(--line);
      color: var(--ink);
    }

    .nav-icon-btn:active {
      background: var(--veil);
    }
  }

  .character-create-card {
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-md) !important;
    transition: var(--transition-bounce) !important;
    overflow: hidden;
    min-width: 30vw;
  }

  .character-create-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-primary-lg) !important;
    border-color: var(--border-primary);
    background: var(--bg-tertiary);
  }

.character-create-icon {
    background: var(--glass-strong) !important;
    transition: all 0.5s ease;
    position: relative;
}

.character-create-card:hover .character-create-icon {
    background: var(--scrim-soft) !important;
    transform: scale(1.12) rotate(5deg);
}

.character-create-card:hover .bi {
    animation: pulse 1.5s infinite;
}

.character-create-card h5 {
    font-weight: 600;
    transition: color 0.3s ease;
}

.character-create-card:hover h5 {
    color: var(--ink-muted);
}
.text-purple, .text-primary{
    color: var(--ink-muted) !important;
}
.bg-purple, .bg-primary {
    background-color: var(--fill-mid-soft) !important;
}
.character-card-menu {
    width: 100%;
    padding: 10px 0;
}

.card-menu-container {
    max-width: 100%;
    overflow: hidden;
    padding: 0 10px;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

  .profile-card {
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: var(--transition-smooth);
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-md);
    text-align: start;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
  }
  
  .profile-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: var(--shadow-primary-lg);
    border-color: var(--border-primary);
  }
  
  .profile-image-container {
    overflow: hidden;
    border-right: 1px solid rgba(138, 138, 138, 0.1);
  }
  
  .profile-image {
    transition: transform 0.5s ease;
  }
  
  .profile-card:hover .profile-image {
    transform: scale(1.07);
  }
  
  .profile-details li {
    border-bottom: 1px solid rgba(138, 138, 138, 0.1);
    padding: 6px 0;
    font-size: 0.92rem;
  }
  
  .profile-details .small {
    font-size: 0.8rem;
    opacity: 0.8;
  }
  
  .profile-card .card-title {
    background: linear-gradient(90deg, #8a8a8a 0%, #6b6b6b 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    font-size: 1.6rem;
    margin-bottom: 0.8rem;
  }
  
  .profile-card .card-body {
    padding: 1.2rem;
  }
  
  .profile-card .btn {
    transition: all 0.3s ease;
    transform-origin: center;
  }
  
  .profile-card .btn:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.16);
  }
  
  @media (max-width: 767px) {
    .profile-image-container {
      max-height: 400px;
      border-right: none;
      border-bottom: 1px solid rgba(138, 138, 138, 0.1);
    }
    
    .profile-card .card-body {
      padding: 1rem 0.8rem;
    }
    
    .profile-card .card-title {
      font-size: 1.4rem;
    }
    
    .profile-details li {
      padding: 5px 0;
    }
  }

  #swiperModal .swiper-slide img {
    width: 100%;
    height: 80vh !important;
    object-fit: contain;
  }
  .chat-images-horizontal {
    display: flex;
    overflow-x: auto;
  }
  .horizontal-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .chat-item {
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 15px;
  }
  .hero-section {
    padding: 60px 0;
    background: var(--bg-secondary);
  }
  .hero-section img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }
  .section-padding {
    padding: 40px 0;
  }
  .feature-icon {
    font-size: 2rem;
    color: var(--ink-muted);
  }
  .btn-lg-custom {
    padding: 0.75rem 1.5rem;
    font-size: 1.25rem;
  }
  .character-avatar-large {
    width: 150px;
    height: 150px;
    object-fit: cover;
    object-position: top;
    border: 3px solid var(--line);
  }
.tags-wrapper {
  width: 100%;
  overflow-x: hidden;
}
.tag-item {
  background: var(--glass-bg);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  transition: var(--transition-ease);
  border: 1px solid var(--glass-border);
  white-space: nowrap;
}
.tag-item:hover {
  background: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: var(--on-primary, #f6f6f6);
  transform: translateY(-2px);
  box-shadow: var(--shadow-primary);
}
.tags-cloud {
  margin: 0 auto;
}
@media (max-width: 768px) {
  .tag-item {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem !important;
  }
}

#notification-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#imagePreviewModal {
  z-index: 10000;
}

#imagePreviewModal .modal-content {
  background: var(--surface-page) !important;
}

/* Make image preview modal scrollable */
#imagePreviewModal .modal-body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-top: 0 !important;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  scroll-behavior: smooth;
}

#imagePreviewModal .image-preview-swiper {
  min-height: 100% !important;
  height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 100px !important;
}

#imagePreviewModal .modal-header {
  position: fixed !important;
  background: transparent !important;
  backdrop-filter: none !important;
  width: 100% !important;
  justify-content: flex-start !important;
  padding: 1rem !important;
  pointer-events: none;
}

#imagePreviewModal .modal-header .btn-close {
  pointer-events: auto;
  background-color: var(--veil);
  border-radius: 50%;
  padding: 12px;
  opacity: 0.9;
}

#imagePreviewModal .modal-header .btn-close:hover {
  opacity: 1;
  background-color: var(--veil-strong);
}

/* Adjust like button position for full-screen view */
#imagePreviewModal .image-like-overlay {
  top: 20px !important;
}

/* Gallery card styles moved to character-cards.css */
/* Tag hover effect for .gallery-tags */
.gallery-tags .badge {
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  cursor: pointer;
}

.gallery-tags .badge:hover,
.gallery-tags .badge:focus {
  background: var(--fill-mid) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.gif-message-image{
  width: 100%;
  border-radius: 15px;
  max-height: 60px;
  object-fit: contain;
  margin-left: auto;
  object-position: right;
  padding: 10px;
}

/* ============================================================================
   GIFT CARD — chat "I sent you a gift" receipt bubble (redesigned)
   Rendered right-aligned as a user action by renderGiftCardContent().
   Accent gradient + text colours are driven by CSS custom properties so each
   chat theme only needs to reassign the vars (see chat-themes.css).
   Base values below = cosmos.
   ============================================================================ */
.gift-card-bubble {
  /* The card is an ACCENT surface: a coloured gradient carrying light ink.
     Two rules make it legible on every theme, and both were broken:
       • --gift-on-accent is the ink that sits ON the gradient, so it must be
         the LIGHT one (it had drifted to --brand-fill, i.e. black on grey).
       • the CTA is a light chip with the accent as its label — painting it
         --glass-strong on top of the gradient, labelled --gift-grad-b, left
         "Request an image" as grey-on-grey and effectively invisible.
     The gradient stops themselves must stay dark enough to carry white text
     (≥4.5:1); each theme reassigns them in chat-themes.css. Mono repaints the
     card as a LIGHT surface and flips these vars to match. */
  --gift-grad-a: #46464b;
  --gift-grad-b: var(--fill-mid-strong);
  --gift-on-accent: var(--status-ink);
  --gift-soft: var(--scrim-soft);
  --gift-soft-border: var(--veil);
  --gift-btn-bg: var(--surface-overlay);
  --gift-btn-color: #46464b;

  display: inline-flex;
  flex-direction: column;
  gap: 12px;
  max-width: 300px;
  padding: 14px;
  border-radius: 20px 20px 6px 20px;
  background: linear-gradient(135deg, var(--gift-grad-a), var(--gift-grad-b));
  color: var(--gift-on-accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  text-align: left;
}

.gift-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gift-card-media {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 16px;
  background: var(--scrim-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.gift-card-media .gift-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gift-card-media > .bi {
  font-size: 1.7rem;
  color: var(--brand-ink);
}

.gift-card-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.gift-card-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.92;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.gift-card-title {
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.25;
  word-break: break-word;
}
.gift-card-cost {
  align-self: flex-start;
  margin-top: 3px;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--gift-soft);
  border: 1px solid var(--gift-soft-border);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.gift-card-cost .bi {
  color: #e0a400;
}

.gift-card-action {
  display: flex;
  flex-direction: column;
}
.gift-request-image-btn,
.shop-tryon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--gift-btn-bg);
  color: var(--gift-btn-color);
  border: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.gift-request-image-btn:hover:not(.disabled):not(:disabled),
.shop-tryon-btn:hover:not(.disabled):not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}
.gift-request-image-btn.disabled,
.gift-request-image-btn:disabled,
.shop-tryon-btn.disabled,
.shop-tryon-btn:disabled {
  cursor: default;
  /* Pending state: keep readable contrast on every theme instead of
     washing the whole button out with opacity (which faded the accent
     text into the card behind it). White text on the softened accent
     reads clearly on purple/green/blue/red gradients alike. */
  background: var(--gift-soft);
  color: var(--gift-on-accent);
  border: 1px solid var(--gift-soft-border);
}

.gift-card-done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--gift-soft);
  color: var(--gift-on-accent);
}
.gift-card-done .bi {
  color: #15cf65;
}

/* Shopping-assist "get the real one" CTA on a purchase/gift card. Only the
   label shows; the link goes through the tracked marketplace redirect. */
.shop-real-cta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--gift-soft-border);
}
.shop-real-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  opacity: 0.9;
}
.shop-real-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  background: var(--gift-soft);
  color: var(--gift-on-accent);
  border: 1px solid var(--gift-soft-border);
  transition: transform 0.15s ease, background 0.15s ease;
}
.shop-real-link:hover {
  transform: translateY(-1px);
  background: var(--gift-soft);
  color: var(--gift-on-accent);
}

/* An error line ON the accent card: a saturated red never clears 4.5:1 against
   the card's own fill, so the message becomes a danger pill with white ink and
   keeps both the colour cue and the contrast. */
.gift-image-error {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--status-danger);
  color: var(--status-ink);
  margin-top: 6px;
}
.prompt-card.inactive, .gift-card.inactive {
  opacity: 0.5;
}
.prompt-card.inactive .custom-badge, .gift-card.inactive .custom-badge {
  display: none;
}

.prompt-card.active {
  opacity: 1;
  pointer-events: auto;
}
/* New gradient styles for plan differentiation */
.premium-gradient {
  background: linear-gradient(90.9deg, #232323 2.74%, #777777 102.92%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  /* transform: scale(1.03); */ /* Handled by .plan-card.premium-gradient specific hover if needed */
  border: 2px solid var(--line);
  z-index: 10; /* To ensure it's above others if scaled */
}

.standard-gradient {
  background: linear-gradient(90.9deg, #232323 2.74%, #777777 102.92%);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.basic-gradient {
  background: linear-gradient(90.9deg, #11ffcd 2.74%, #7d7d7d 102.92%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.oneday-gradient {
  background: linear-gradient(90.9deg, #ff7611 2.74%, #c64f00 102.92%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

/* Feature comparison table styling */
.plan-comparison-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  margin: 30px 0;
}

.plan-comparison-table th {
  background-color: var(--brand-fill);
  padding: 15px;
  text-align: center;
  font-weight: 600;
}

.plan-comparison-table th:first-child {
  text-align: left;
}

.plan-comparison-table td {
  padding: 12px 15px;
  text-align: center;
  border-top: 1px solid var(--line-strong);
}

.plan-comparison-table td:first-child {
  text-align: left;
  font-weight: 500;
}

.plan-comparison-table tr:nth-child(odd) {
  background-color: var(--brand-fill);
}

.plan-comparison-table .highlight-row {
  background-color: var(--brand-fill) !important;
}

/* Badge styles */
.popular-badge {
  position: absolute;
  top: -15px; /* Adjusted for better visibility */
  right: 15px; /* Adjusted for better visibility */
  background: linear-gradient(45deg, #d8002b, #c64f00);
  color: var(--status-ink);
  padding: 6px 18px; /* Slightly larger padding */
  border-radius: 20px;
  font-weight: bold;
  font-size: 0.85rem; /* Slightly larger font */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transform: rotate(3deg); /* Slight rotation for emphasis */
  z-index: 12; /* Ensure it's above card content */
}

.guarantee-badge { /* Example, can be adapted */
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  background-color: var(--scrim-strong);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 11;
}

/* Enhanced plan cards */
.plan-card { /* Base .plan-card already exists, this enhances it */
  position: relative; /* Needed for absolute positioned badges */
  transition: all 0.3s ease-in-out;
  overflow: visible; /* Allow badges to be outside */
  display: flex; /* For better internal alignment */
  flex-direction: column; /* Stack content vertically */
  justify-content: space-between; /* Push button to bottom */
}

.plan-card.premium-gradient { /* Specific styling for premium card */
    transform: scale(1.03); /* Make premium slightly larger by default */
}

.plan-card:hover {
  transform: translateY(-8px) scale(1.05); /* Enhanced hover effect */
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}
.plan-card.premium-gradient:hover {
    transform: translateY(-10px) scale(1.08); /* More pronounced hover for premium */
}


.plan-features {
  margin-top: 15px;
  text-align: left;
  font-size: 0.9rem;
  padding-left: 0; /* Remove default ul padding */
  list-style-type: none; /* Remove default list bullets */
}

.plan-features li {
  margin-bottom: 8px; /* Increased spacing */
  display: flex;
  align-items: center;
  color: var(--ink); /* Ensure text is visible on dark gradients */
}

.plan-features i { /* For Bootstrap Icons */
  margin-right: 8px;
  color: var(--ink); /* Default icon color, can be overridden by specific gradients */
  font-size: 1.1em;
}

/* Specific icon colors for gradients if needed, or keep them white */
.premium-gradient .plan-features i { color: var(--brand-ink); }
.standard-gradient .plan-features i { color: var(--brand-ink); }
.basic-gradient .plan-features i { color: var(--ink); }
.oneday-gradient .plan-features i { color: #ff7e25; }


.testimonial-card {
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 25px;
  box-shadow: var(--shadow-md);
  margin: 15px 0;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  color: var(--text-primary);
}

.testimonial-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--line-strong); /* Subtle border */
}

.testimonial-quote { /* Using Bootstrap icon class */
  position: absolute;
  top: 15px;
  right: 20px;
  color: var(--ink-soft);
  font-size: 2.5rem; /* Larger quote icon */
}

.testimonial-card p {
    flex-grow: 1; /* Allow paragraph to take available space */
    margin-bottom: 1rem;
}
.testimonial-card .text-warning i { /* For Bootstrap star icons */
    font-size: 1rem;
}


.cta-button {
  display: inline-block;
  padding: 14px 35px; /* Larger padding */
  font-size: 1.15rem; /* Slightly larger font */
  font-weight: bold;
  text-align: center;
  border-radius: 30px;
  transition: all 0.3s ease;
  width: 100%;
  margin-top: 20px; /* More space above button */
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16); /* Stronger hover shadow */
}

.cta-button i { /* For Bootstrap Icons */
    font-size: 1em; /* Match button font size */
}

.cta-button.premium {
  background: linear-gradient(90.9deg, #232323 2.74%, #777777 102.92%);
  color: var(--brand-ink);
  border: 4px solid var(--line-strong);
}

.cta-button.standard {
  background: linear-gradient(90.9deg, #232323 2.74%, #777777 102.92%);
  color: var(--brand-ink);
  border: 4px solid var(--line-strong);
}
.cta-button.basic { /* Added for consistency */
  background: linear-gradient(90.9deg, #11ffcd 2.74%, #7d7d7d 102.92%);
  color: var(--ink);
  border: 4px solid var(--line-strong);
}

.cta-button.oneday {
  background: linear-gradient(90.9deg, #ff7611 2.74%, #c64f00 102.92%);
  color: var(--ink);
  border: 4px solid var(--line-strong);
}
.rounded-circle-button-size {
  width: 45px;
  height: 45px;
}
.album-link-styled .bi-images {
  font-size: 18px; 
}
@media (max-width: 600px) {
  .rounded-circle-button-size {
    width: 40px;
    height: 40px;
  }
  .album-link-styled .bi-images {
    font-size: 16px; 
  }
}

.album-link-styled {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
  border-radius: 50%;
  background: linear-gradient(to bottom right, rgba(33, 33, 33, 1), rgba(137, 137, 137, 1));
  text-decoration: none;
  position: relative;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
  border: none; /* Override potential Bootstrap button borders */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08); /* Base shadow similar to character-create-card */
}

.album-link-styled .bi-images {
  transition: transform 0.3s ease; 
  color: var(--brand-ink);
}

.album-link-styled:hover {
  transform: scale(1.12) rotate(5deg); /* Hover transform from character-create-icon */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); /* Hover shadow similar to character-create-card */
}

.album-link-styled:hover .bi-images {
  animation: pulse 1.5s infinite; /* Pulse animation on icon hover */
}

.album-link-styled .image-count-badge {
  font-size: 10px;
  position: absolute;
  top: -5px;
  right: -6px;
  font-weight: 600;
  background-color: var(--scrim-strong);
  color: var(--brand-ink);
  border-radius: 50px;
  padding: 4px 3px;
  border: 1px solid rgba(138, 138, 138, 0.3);
  line-height: 1;
  z-index: 1;
  pointer-events: none;
}

/* Reduce spacing between gallery icon and profile pictures */
#chat-thumbnail-gallery {
  gap: 4px;
}

/* The thumbnail cards carry the global `.card` dark `--cyber-panel-gradient`
   background. Bootstrap's `.bg-transparent` only clears `background-color`, not
   the gradient `background-image`, so a dark rounded square leaks behind each
   circular avatar. Strip all card chrome so the circles sit cleanly on the bar. */
#chat-thumbnail-gallery .assistant-image-box {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

#chat-thumbnail-gallery .characters {
  margin-left: 0;
}

#chat-thumbnail-gallery .album-link-styled {
  margin-right: 0;
}
.assistant-image-box{
  transition: all 0.3s ease;
  max-width: 100% !important;
}

.assistant-image-box:hover {
  transform: scale(1.12) rotate(5deg);
}
.transition-none:hover {
  transform: none !important;
}
.vertical-transition:hover {
  transform: translateY(-3%) !important;
}
.feature-icon-container {
  text-align: center;
  margin: 40px 0;
}

.feature-icon-item {
  padding: 20px; /* Increased padding */
}

.feature-icon-item i { /* For Bootstrap Icons */
  font-size: 2.5rem; /* Larger icons */
  margin-bottom: 15px;
  color: var(--ink-muted); /* Main accent color */
}
.feature-icon-item h4 {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* Limited time offer banner */
.limited-time-offer {
  background: linear-gradient(135deg, #d8002b, #c64f00);
  color: var(--status-ink);
  text-align: center;
  padding: 15px; /* Increased padding */
  border-radius: 8px; /* Softer radius */
  margin: 25px auto; /* Centered with auto margins */
  font-weight: bold;
  animation: pulseOffer 2s infinite;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
  max-width: 80%; /* Control width */
}
.limited-time-offer i { /* For Bootstrap Icons */
    font-size: 1.1em;
}

@keyframes pulseOffer { /* Renamed to avoid conflict if 'pulse' is used elsewhere */
  0% {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.06);
    transform: scale(1.02);
  }
  100% {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
    transform: scale(1);
  }
}

/* Safe test badge for one-day pass */
.safe-test-badge {
  background: var(--scrim-soft); /* Semi-transparent white */
  color: var(--ink); /* Ensure text is white and readable on orange gradient */
  border-radius: 50px;
  padding: 8px 15px; /* Increased padding */
  display: inline-flex;
  align-items: center;
  margin-top: 12px; /* More space */
  backdrop-filter: blur(5px);
  font-size: 0.85rem;
  font-weight: 500;
}

.safe-test-badge i { /* For Bootstrap Icons */
  margin-right: 6px;
  font-size: 1.1em;
}

/* Accordion styling for FAQ */
.accordion-button {
    font-weight: 500;
}
.accordion-button:not(.collapsed) {
    color: var(--brand-ink);
    background-color: var(--brand-fill);
}
.accordion-item {
    margin-bottom: 0.5rem;
    border-radius: 0.5rem !important; /* Ensure consistent border radius */
    border: 1px solid var(--line-strong);
}
.accordion-header {
    border-radius: 0.5rem 0.5rem 0 0; /* Match item radius */
}
.accordion-body {
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Compact chat list support for narrow sidebar */
.chat-list-container {
    padding: 0 4px; /* Reduced padding for narrow sidebar */
}

.chat-list-container .spinner-border {
    width: 1.5rem;
    height: 1.5rem;
}

/* Override existing chat list styles for compact design */
.chat-list .thumb img {
    width: 40px; /* Reduced from 40px to match new design */
    height: 40px;
    object-fit: cover;
    overflow: hidden;
    object-position: top;
    border-radius: 50%; /* Make fully circular */
}

.chat-list.item {
    margin-bottom: 4px; /* Reduced spacing */
    border-radius: 8px; /* Smaller radius */
}


.chat-list.item.active, .user-chat-history.active {
    background-color: var(--fill-mid-soft) !important; /* Purple active state */
}

/* Adjust dropdown for narrow sidebar */
.chat-option-menu .dropdown-item {
    padding: 4px 8px; /* Reduced padding */
    font-size: 0.8rem; /* Smaller font */
}

.chat-option-menu li {
    padding: 1px 4px; /* Reduced padding */
}

/* Make sure text doesn't overflow in narrow sidebar */
.online-text {
    width: 100px; /* Reduced from 150px */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Compact user chat count */
#user-chat-count {
    font-size: 0.75rem;
}

.video-chat-card .video-thumbnail-wrapper {
    overflow: hidden;
}

.video-chat-card .play-button-overlay {
    transition: opacity 0.3s ease;
}

.video-chat-card:hover .play-button-overlay {
    opacity: 0.7;
}

.video-chat-card .video-thumbnail {
    transition: transform 0.3s ease;
}

.video-chat-card:hover .video-thumbnail {
    transform: scale(1.05);
}

#latest-video-chats-gallery::-webkit-scrollbar {
    height: 8px;
}

#latest-video-chats-gallery::-webkit-scrollbar-track {
    background: var(--brand-fill);
    border-radius: 4px;
}

#latest-video-chats-gallery::-webkit-scrollbar-thumb {
    background: var(--fill-mid);
    border-radius: 4px;
}

#latest-video-chats-gallery::-webkit-scrollbar-thumb:hover {
    background: var(--fill-mid-soft);
}

.character-update-form textarea {
  width: 100%;
  min-height: 100px;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid var(--line-strong);
  resize: vertical;
}

.message-tools-controller {
  align-self: flex-start;
}

/* --- Message action buttons (like / dislike / scene / regenerate) ---------- */
.message-tool-group {
  gap: 6px;
}

.message-tools-controller .message-tool-btn {
  width: 30px;
  height: 30px;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  border-radius: 9px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  background: var(--glass-strong);
  color: var(--ink-soft);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.message-tools-controller .message-tool-btn:hover {
  background: var(--scrim-soft);
  border-color: var(--line-strong);
  color: var(--ink);
  transform: translateY(-1px);
}

.message-tools-controller .message-tool-btn:active {
  transform: translateY(0);
}

/* Active like / dislike state — accent fill */
.message-tools-controller .message-action-btn.is-active {
  background: var(--scrim-soft);
  border-color: var(--line-strong);
  color: var(--ink-soft);
}

.message-tools-controller .message-tool-btn.disabled,
.message-tools-controller .message-tool-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Settings Switch Styles */
.settings-switch {
    position: relative;
    display: inline-block;
    width: 65px;
    height: 30px;
}

.settings-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.settings-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--fill-mid-strong);
    transition: 0.4s;
    border-radius: 30px;
}

.settings-switch-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: var(--brand-fill);
    transition: 0.4s;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.settings-switch input:checked + .settings-switch-slider {
    background: linear-gradient(135deg, #8a8a8a 0%, #757575 100%);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.16);
}

.settings-switch input:focus + .settings-switch-slider {
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.16);
}

.settings-switch input:checked + .settings-switch-slider:before {
    transform: translateX(35px);
}
.settings-info-box {
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xs);
    padding: 12px 16px;
    font-size: 14px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
}

.settings-info-box i {
    color: var(--text-muted);
    font-size: 16px;
}
/* Enhanced Settings Modal Styles - Compact Native App Style */
#settingsModal .modal-dialog {
    max-width: 900px;
    margin: 1rem auto;
    height: calc(100% - 2rem);
}


#settingsModal .modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--cyber-border, rgba(0, 0, 0, 0.1));
    background:
        linear-gradient(90deg, rgba(119, 119, 119, 0.18), rgba(133, 133, 133, 0.055)),
        rgba(241, 241, 241, 0.62) !important;
    position: relative;
    border-radius: 24px 24px 0 0;
}

#settingsModal .modal-title {
    font-size: 18px;
    font-weight: 750;
    color: var(--ink);
    letter-spacing: 0.012em;
}

#settingsModal .modal-body {
    padding: 0;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

#settingsModal .btn-close {
    padding: 8px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
    filter: invert(1) brightness(1);
}

#settingsModal .btn-close:hover {
    opacity: 1;
    filter: invert(1) brightness(1.2);
}

/* Native App Style Tabs */
#settingsModal .nav-tabs {
    border-bottom: 1px solid var(--cyber-border, rgba(0, 0, 0, 0.1));
    padding: 0 16px;
    background: var(--veil);
    display: flex;
    gap: 8px;
}

#settingsModal .nav-tabs .nav-item {
    flex: 1;
}

#settingsModal .nav-tabs .nav-link {
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 10px 16px;
    margin: 8px 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft);
    background: transparent;
    transition: var(--transition-cyber);
    text-align: center;
}

#settingsModal .nav-tabs .nav-link:hover {
    background: var(--cyber-gradient);
    border-color: var(--cyber-border);
    color: var(--ink);
}

#settingsModal .nav-tabs .nav-link.active {
    background: var(--cyber-gradient-hover);
    color: var(--ink);
    font-weight: 600;
    border-color: var(--cyber-border-strong);
    box-shadow: var(--cyber-shadow-soft);
}

#settingsModal .modal-content {
    background: var(--cyber-panel-gradient, var(--bg-secondary, #d2d2d2));
    border: 1px solid var(--cyber-border, rgba(119, 119, 119, 0.2));
    border-radius: 24px;
    box-shadow: var(--cyber-shadow);
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#settingsModal #settings-container {
    padding: 0px;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    overflow: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(138, 138, 138, 0.3) transparent;
}

#settingsModal #settings-container::-webkit-scrollbar {
    width: 6px;
}

#settingsModal #settings-container::-webkit-scrollbar-track {
    background: transparent;
}

#settingsModal #settings-container::-webkit-scrollbar-thumb {
    background: var(--scrim-soft);
    border-radius: 3px;
}

#settingsModal #settings-container::-webkit-scrollbar-thumb:hover {
    background: var(--scrim);
}

#settingsModal .modal-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--cyber-border, rgba(0, 0, 0, 0.1));
    background: var(--veil) !important;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    border-radius: 0 0 24px 24px;
}

#settingsModal .modal-footer .btn {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 650;
    border-radius: 14px;
    transition: var(--transition-cyber);
}

#settingsModal .modal-footer .btn-lg {
    padding: 8px 20px;
    font-size: 14px;
}

#settingsModal .modal-footer .btn-primary {
    background: var(--primary-gradient);
    border-color: var(--line-strong);
}

#settingsModal .modal-footer .btn-primary:hover {
    background: var(--primary-gradient-hover);
    border-color: var(--cyber-border-strong);
    transform: translateY(-1px);
    box-shadow: var(--cyber-shadow-soft);
}

#settingsModal .modal-footer .btn-outline-secondary {
    border-color: var(--line-strong);
    color: var(--ink-soft);
}

#settingsModal .modal-footer .btn-outline-secondary:hover {
    background: var(--glass-strong);
    border-color: var(--line-strong);
    color: var(--ink);
}

.settings-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--veil-strong);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1060;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0px;
}

.settings-modal {
    background: var(--cyber-panel-gradient);
    border: 1px solid var(--cyber-border);
    border-radius: 24px;
    box-shadow: var(--cyber-shadow);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.settings-modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--cyber-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background:
        linear-gradient(90deg, rgba(119, 119, 119, 0.18), rgba(133, 133, 133, 0.055)),
        rgba(241, 241, 241, 0.62);
    position: sticky;
    top: 0;
    z-index: 10;
    border-radius: 24px 24px 0 0;
}

.settings-modal-title {
    font-size: 18px;
    font-weight: 750;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    letter-spacing: 0.012em;
}

.settings-modal-title i {
    color: var(--accent-cyan);
    font-size: 18px;
}

.settings-close-btn {
    background: var(--glass-strong);
    border: 1px solid var(--cyber-border);
    border-radius: 14px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-secondary);
    font-size: 18px;
    opacity: 0.6;
}

.settings-close-btn:hover {
    background: var(--cyber-gradient);
    border-color: var(--cyber-border-strong);
    opacity: 1;
}

.settings-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex-grow: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(119, 119, 119, 0.3) transparent;
}

.settings-modal-body::-webkit-scrollbar {
    width: 6px;
}

.settings-modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.settings-modal-body::-webkit-scrollbar-thumb {
    background: var(--scrim-soft);
    border-radius: 3px;
}

.settings-modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--scrim);
}

/* Section Styles - Compact Native App Style */

.settings-section {
    margin-bottom: 20px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    transition: none;
}

.settings-section:hover {
    border-color: transparent;
    box-shadow: none;
}

.settings-section-header {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: none;
    text-align: left;
}

.settings-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 4px;
    letter-spacing: -0.1px;
    text-align: left;
}

.settings-section-title i {
    color: var(--accent-cyan);
    font-size: 16px;
    margin-right: 8px;
}

.settings-subsection {
    margin-bottom: 16px;
    padding: 12px;
    background: var(--glass);
    border-radius: 16px;
    border: 1px solid var(--cyber-border);
}

.settings-subsection-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

/* Field Styles - Compact Native App Style */
.settings-field {
    margin-bottom: 16px;
}

.settings-field-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}

.settings-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 6px;
    display: block;
}

.settings-description {
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-secondary) !important;
    margin-top: 4px;
}

/* Form Controls */
.settings-range-container {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    background: var(--cyber-surface);
    border-radius: 16px;
    border: 1px solid var(--cyber-border);
}

.settings-range {
    flex-grow: 1;
    height: 6px;
    background: var(--glass-strong);
    border-radius: 3px;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.settings-range::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: var(--primary-gradient);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--cyber-shadow-soft);
    transition: all 0.3s ease;
}

.settings-range::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: var(--cyber-shadow);
}

.settings-range-value {
    min-width: 32px;
    text-align: center;
    padding: 6px 12px;
    background: var(--primary-gradient);
    color: var(--on-primary, #f6f6f6);
    border-radius: 8px;
    font-size: 0.9rem;
}

.settings-textarea {
    width: 100%;
    min-height: 100px;
    padding: 14px;
    border: 1px solid var(--cyber-border);
    border-radius: 16px;
    font-size: 0.95rem;
    line-height: 1.5;
    resize: vertical;
    transition: all 0.3s ease;
    background:
        linear-gradient(135deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02)),
        var(--cyber-surface);
    color: var(--text-primary);
    font-family: inherit;
}

.settings-textarea:focus {
    outline: none;
    border-color: var(--cyber-border-strong);
    box-shadow: var(--cyber-glow);
}

.settings-textarea:disabled {
    background: var(--glass);
    color: var(--text-disabled);
    cursor: not-allowed;
}

/* Switch Container */
.settings-switch-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-switch-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.settings-switch-label.premium-label {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Tone Grid */
.settings-tone-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.settings-tone-option {
    padding: 14px 18px;
    border: 1px solid var(--cyber-border);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(0, 0, 0, 0.055), rgba(0, 0, 0, 0.018)),
        var(--cyber-surface);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition-cyber);
    font-weight: 500;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.settings-tone-option:hover {
    border-color: var(--cyber-border-strong);
    background: var(--cyber-gradient);
    transform: translateY(-2px);
    box-shadow: var(--cyber-shadow-soft);
}

.settings-tone-option.selected {
    border-color: var(--cyber-border-strong);
    background: var(--cyber-gradient-hover);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: var(--cyber-glow);
}

.settings-tone-option.premium-relationship {
    border-color: #a27a00;
    background: rgba(162, 122, 0, 0.1);
}

.settings-tone-option.premium-relationship:hover {
    border-color: #ffb000;
    background: rgba(162, 122, 0, 0.2);
}

/* Voice Grid */
.settings-voice-grid {
    gap: 14px;
}

.settings-voice-option {
    padding: 16px;
    border: 1px solid var(--cyber-border);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(0, 0, 0, 0.055), rgba(0, 0, 0, 0.018)),
        var(--cyber-surface);
    cursor: pointer;
    transition: var(--transition-cyber);
}

.settings-voice-option:hover {
    border-color: var(--cyber-border-strong);
    background: var(--cyber-gradient);
    transform: translateY(-2px);
    box-shadow: var(--cyber-shadow-soft);
}

.settings-voice-option.selected {
    border-color: var(--cyber-border-strong);
    background: var(--cyber-gradient-hover);
    box-shadow: var(--cyber-glow);
}

.settings-voice-name {
    font-size: 1rem;
    margin-bottom: 4px;
}

.settings-voice-description {
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Premium Features */
.premium-feature-indicator {
    margin-top: 12px;
    padding: 12px;
    background: rgba(162, 122, 0, 0.1);
    border: 1px solid rgba(162, 122, 0, 0.3);
    border-radius: 8px;
}

.premium-icon {
    font-size: 0.9rem;
}

/* Footer */
.settings-footer {
    background: var(--veil);
    margin: -28px -28px 0 -28px;
    padding: 24px 28px;
}

.settings-save-btn {
    width: 100%;
    padding: 14px 28px;
    background: var(--primary-gradient);
    border: 1px solid rgba(35, 35, 35, 0.35);
    border-radius: 16px;
    color: var(--on-primary, #f6f6f6);
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    transition: var(--transition-cyber);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.settings-save-btn:hover {
    background: var(--primary-gradient-hover);
    transform: translateY(-2px);
    box-shadow: var(--cyber-shadow-soft);
}

.settings-save-btn:active {
    transform: translateY(0);
}

/* Loading State */
.voice-loading-spinner {
    color: var(--text-secondary);
}

/* Character Modal - Enhanced responsive design */
#characterModal .modal-dialog {
    max-width: 900px;
    width: 95%;
    margin: 1.5rem auto;
}

#characterModal .modal-content {
    background: var(--cyber-panel-gradient, var(--ig-bg, #ededed));
    border: 1px solid var(--cyber-border, rgba(0, 0, 0, 0.08));
    border-radius: 24px;
    box-shadow: var(--cyber-shadow);
    overflow: hidden;
}

#characterModal .modal-header {
    border-bottom: 1px solid var(--cyber-border, rgba(0, 0, 0, 0.08));
    padding: 16px 18px;
    background: linear-gradient(90deg, rgba(119, 119, 119, 0.18), rgba(133, 133, 133, 0.055));
}

#characterModal .modal-body {
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    /* Character Modal - Constrain to 80vh max on mobile with dynamic viewport height */
    #characterModal .modal-dialog {
        max-height: calc(var(--vh, 1vh) * 80);
        max-height: 80dvh; /* Modern browsers support dvh */
        margin: 1rem auto;
        width: 100%;
        max-width: 100%;
    }
    
    #characterModal .modal-content {
        max-height: calc(var(--vh, 1vh) * 80);
        max-height: 80dvh;
        display: flex;
        flex-direction: column;
        border-radius: 12px 12px 0 0;
    }
    
    #characterModal .modal-body {
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    #settingsModal .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
        max-height: calc(var(--vh, 1vh) * 95);
        max-height: 95dvh;
    }
    
    #settingsModal .modal-content {
        max-height: calc(var(--vh, 1vh) * 95);
        max-height: 95dvh;
        display: flex;
        flex-direction: column;
    }
    
    #settingsModal .modal-body {
        overflow-y: auto;
        overflow-x: hidden;
        flex: 1 1 auto;
    }
    
    #settingsModal .modal-footer {
        flex-shrink: 0;
    }
    
    #settingsModal .modal-header {
        padding: 14px 16px;
    }
    
    #settingsModal #settings-container {
        padding: 0px;
    }
    
    #settingsModal .nav-tabs {
        padding: 0 12px;
    }
    
    #settingsModal .nav-tabs .nav-link {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    .settings-modal {
        margin: 0.5rem;
        max-height: calc(var(--vh, 1vh) * 95);
        max-height: 95dvh;
        border-radius: 14px;
    }
    
    .settings-modal-header {
        padding: 14px 16px;
        border-radius: 15px 15px 0 0;
    }
    
    .settings-modal-body {
        padding: 16px;
    }
    
    .settings-section {
        margin-bottom: 20px;
        padding-bottom: 16px;
    }
    
    .settings-tone-grid {
        grid-template-columns: 1fr;
    }
    
    .settings-field-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .settings-switch-container {
        align-self: flex-end;
    }
}

@media (max-width: 480px) {
    #settingsModal .modal-title {
        font-size: 16px;
    }
    
    #settingsModal .nav-tabs .nav-link {
        padding: 8px 10px;
        font-size: 12px;
    }
    
    .settings-modal-title {
        font-size: 16px;
    }
    
    .settings-section-title {
        font-size: 14px;
    }
    
    .settings-modal-header {
        padding: 12px 14px;
        border-radius: 15px 15px 0 0;
    }
    
    .settings-close-btn {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }
}

  /* Query Tags Styles */
  .query-tags-scroll-container {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: #222222 transparent;
    padding: 0 20px;
    margin: 0 -20px;
    scroll-behavior: smooth;
  }
  
  .query-tags-scroll-container::-webkit-scrollbar {
    height: 6px;
  }
  
  .query-tags-scroll-container::-webkit-scrollbar-track {
    background: var(--brand-fill);
    border-radius: 3px;
  }
  
  .query-tags-scroll-container::-webkit-scrollbar-thumb {
    background: var(--fill-mid-strong);
    border-radius: 3px;
  }
  
  .query-tags-scroll-container::-webkit-scrollbar-thumb:hover {
    background: var(--fill-mid-strong);
  }
  
  .query-tags-list {
    padding: 10px 0;
    white-space: nowrap;
    gap: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  
  .query-tag {
    flex-shrink: 0;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: var(--transition-ease);
    cursor: pointer;
    user-select: none;
  }
  
  .query-tag:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }
  
  .query-tag.active {
    background: linear-gradient(90.9deg, #232323 2.74%, #777777 102.92%);
    color: var(--brand-ink);
    border-color: var(--line);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }
  
  .query-tag.active:hover {
    background: linear-gradient(90.9deg, #2c2c2c 2.74%, #858585 102.92%);
    transform: translateY(-1px);
  }
  
  .query-tag-all {
    background: var(--brand-fill);
    border: 2px solid var(--line);
    color: var(--brand-ink);
    font-weight: 600;
  }
  
  .query-tag-all.active {
    background: var(--fill-mid);
    color: var(--ink);
  }

/* Site Footer Styles
   Plain white with black type (was a grey gradient with grey-on-grey copy).
   The footer sits under every page — including the public store/product pages
   that carry the site's organic traffic — so it is deliberately monochrome:
   white ground, black text, one black hairline on top. No grey. */
.site-footer {
  background: #ffffff;
  color: #000000;
  border-top: 1px solid #000000;
  position: relative;
  overflow: hidden;
}

/* The markup carries Bootstrap's dark-theme utilities (`bg-dark`, `text-light`,
   `text-muted`, `text-white`) from when the footer was dark. Neutralise them
   here rather than editing every view that renders the partial. */
.site-footer,
.site-footer .bg-dark {
  background: #ffffff !important;
}
.site-footer,
.site-footer p,
.site-footer small,
.site-footer .text-white,
.site-footer .text-light,
.site-footer .text-muted,
.site-footer .copyright-text,
.site-footer .footer-heading,
.site-footer .footer-link {
  color: #000000 !important;
}
.site-footer .footer-bottom {
  border-color: #000000 !important;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><defs><pattern id="grain" width="100" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="0.5" fill="%23ffffff" opacity="0.03"/></pattern></defs><rect width="100" height="20" fill="url(%23grain)"/></svg>');
  pointer-events: none;
}

.footer-section {
  position: relative;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.45s ease;
}

.footer-heading {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  position: relative;
}

.footer-heading::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, #8a8a8a, #757575);
  border-radius: 1px;
}

.social-links {
  margin-top: 1rem;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  background: var(--glass);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  color: var(--ink);
  text-decoration: none;
  font-size: 1.2rem;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  backdrop-filter: blur(10px);
}

.social-link:hover {
  background: linear-gradient(135deg, #8a8a8a, #757575);
  border-color: var(--line);
  color: var(--ink);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.16);
}

.footer-nav {
  margin: 0;
  padding: 0;
}

.footer-link {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  padding: 0.4rem 0;
  transition: all 0.3s ease;
  border-radius: 6px;
  padding-left: 0.5rem;
  margin-left: -0.5rem;
}

.footer-link:hover {
  color: var(--ink);
  background: var(--glass-strong);
  transform: translateX(5px);
}

.footer-link i {
  color: var(--ink-muted);
  font-size: 0.9rem;
  width: 20px;
  text-align: center;
}

.footer-bottom {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.brand-hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.brand-hamburger:hover {
  background: var(--scrim-soft);
}

.brand-title {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  line-height: 1;
}

/* The wordmark. Both halves are theme-driven so the brand can never end up
   invisible against its own nav after a re-skin. */
.brand-title-ink {
  color: var(--ink);
}

.brand-title-soft,
.brand-title-purple {   /* legacy class name, kept for older templates */
  color: var(--ink-muted);
}

.brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  /* The logo art carries its own dark rounded tile, so no gradient plate
     behind it — that plate is only used when a glyph is rendered instead. */
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}

.brand-logo:has(i) {
  background: linear-gradient(135deg, #8a8a8a, #757575);
}

.brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.copyright-text {
  font-size: 0.9rem;
  color: var(--ink-muted);
}

.text-primary {
  color: var(--ink-muted) !important;
}
.keyword-tag.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--brand-fill) !important;
    color: var(--brand-ink) !important;
    border-color: var(--line-strong) !important;
    transform: none !important;
}

.keyword-tag.disabled:hover {
    background: var(--brand-fill) !important;
    color: var(--brand-ink) !important;
    border-color: var(--line-strong) !important;
    transform: none !important;
    box-shadow: none !important;
}

.keyword-tag.limit-reached {
    background: #901924 !important;
    border-color: #901924 !important;
    color: var(--status-ink) !important;
    transform: scale(1.05);
    animation: shake 0.3s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0) scale(1.05); }
    25% { transform: translateX(-2px) scale(1.05); }
    75% { transform: translateX(2px) scale(1.05); }
}

.keyword-counter {
    font-size: 0.75rem;
    font-weight: normal;
}

.selected-section {
    border-left: 3px solid var(--line);
    padding-left: 8px;
}

.section-label {
    text-transform: capitalize;
}

.keyword-limit-tooltip {
    pointer-events: none;
    animation: fadeInUp 0.2s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .keyword-counter {
        font-size: 0.7rem;
    }
    
    .selected-section {
        margin-bottom: 8px;
    }
}
/* Enhanced NSFW Toggle Styling */
.nsfw-toggle-container {
  position: relative;
  margin: 1rem 0;
  padding: 1.2rem;
  background: linear-gradient(135deg, #ff3737 0%, #f14343 100%);
  border: 2px solid #f83232;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.nsfw-toggle-container.nsfw-disabled {
  background: linear-gradient(135deg, #050505 0%, #0b0b0b 100%);
  border-color: var(--line-strong);
}

.nsfw-toggle-container:hover {
  border-color: #f70c0c;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}

.nsfw-toggle-container.nsfw-disabled:hover {
  border-color: var(--line-strong);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.nsfw-toggle-container.enabled {
  background: linear-gradient(135deg, #fbcf1e 0%, #eebf04 100%);
  border-color: #986206;
}

.nsfw-toggle-container.enabled:hover {
  border-color: #d97706;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}

/* Custom NSFW Switch */
.nsfw-switch {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 26px;
  margin-left: auto;
}

.nsfw-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.nsfw-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #0b0b0b 0%, #171717 100%);
  transition: 0.4s;
  border-radius: 36px;
  border: 2px solid var(--line-strong);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nsfw-switch-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background: linear-gradient(135deg, #000000 0%, #050505 100%);
  transition: 0.4s;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
}

.nsfw-switch input:checked + .nsfw-switch-slider {
  background: linear-gradient(135deg, #986206 0%, #d97706 100%);
  border-color: #92400e;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}

.nsfw-switch input:checked + .nsfw-switch-slider:before {
  transform: translateX(34px);
  background: linear-gradient(135deg, #000000 0%, #ffd631 100%);
}

.nsfw-switch input:disabled + .nsfw-switch-slider {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--brand-fill);
  border-color: var(--line-strong);
}

.nsfw-switch input:disabled + .nsfw-switch-slider:before {
  background: var(--brand-fill);
}

/* Make sure the slider is clickable when enabled */
.nsfw-switch input:not(:disabled) + .nsfw-switch-slider {
  cursor: pointer;
}

.nsfw-switch input:not(:disabled) + .nsfw-switch-slider:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

/* NSFW Label Styling */
.nsfw-label-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}

.nsfw-main-label {
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink-disabled);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nsfw-warning-icon {
  color: #af0f0f;
  font-size: 1.1rem;
  animation: pulse 2s infinite;
}

.nsfw-status-indicator {
  font-size: 0.85rem;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.nsfw-status-indicator.disabled {
  background: var(--brand-fill);
  color: var(--brand-ink);
  border: 1px solid var(--line-strong);
}

.nsfw-status-indicator.enabled {
  background: linear-gradient(135deg, #af7f03 0%, #986206 100%);
  color: var(--ink);
  border: 1px solid #d97706;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.nsfw-description {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--ink-muted);
  margin: 0.5rem 0;
}

.nsfw-premium-prompt {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, #ffa432 0%, #fc8c0b 100%);
  border: 1px solid #bd5704;
  border-radius: 8px;
  font-size: 0.9rem;
}

.nsfw-premium-prompt .bi-star {
  color: #986206;
  margin-right: 0.5rem;
}

.nsfw-premium-prompt .alert-link {
  color: #ea580c;
  font-weight: 600;
  text-decoration: none;
}

.nsfw-premium-prompt .alert-link:hover {
  color: #c2410c;
  text-decoration: underline;
}

/* Animation for warning icon */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .nsfw-label-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .nsfw-switch {
    align-self: flex-end;
  }
  
  .nsfw-toggle-container {
    padding: 1rem;
  }
}

@media (max-width: 767px) {
  
  .footer-section {
    margin-bottom: 2rem;
  }
  
  .social-links {
    justify-content: flex-start;
  }
  
  .footer-bottom .row > div:first-child {
    text-align: center;
    margin-bottom: 1rem;
  }
  
  .footer-bottom .row > div:last-child {
    text-align: center !important;
  }
}

@media (max-width: 576px) {
  /* Character Modal - Ensure 80vh max on very small screens with dynamic viewport height */
  #characterModal .modal-dialog {
    max-height: calc(var(--vh, 1vh) * 85);
    max-height: 85dvh;
    margin: 0.5rem auto;
    width: 100%;
    max-width: 100%;
  }
  
  #characterModal .modal-content {
    max-height: calc(var(--vh, 1vh) * 85);
    max-height: 85dvh;
    border-radius: 12px 12px 0 0;
  }
  
  #characterModal .modal-body {
    padding: 0;
  }
  
  /* Ensure all modals are properly constrained */
  .modal-dialog {
    max-height: calc(var(--vh, 1vh) * 90) !important;
    max-height: 90dvh !important;
  }
  
  .modal-content {
    max-height: calc(var(--vh, 1vh) * 90) !important;
    max-height: 90dvh !important;
  }
  
  .modal-body {
  }
  
  .social-link {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }
  
  .brand-hamburger {
    width: 38px;
    height: 38px;
  }

  .brand-title {
    font-size: 1.1rem;
  }
  
  .footer-heading {
    font-size: 1rem;
  }
  
  .footer-link {
    font-size: 0.9rem;
  }
}

#footer-toolbar {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  max-width: 500px;
  height: 65px;
  background: var(--glass-bg, rgba(220, 220, 220, 0.85)) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-pill);
  z-index: 1010;
  padding: 0 10px;
  border: 1px solid var(--glass-border, rgba(119, 119, 119, 0.3));
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.16);
}

#footer-toolbar a{
  text-decoration: none !important;
}

.toolbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-grow: 1;
  text-align: center;
  transition: var(--transition-fast);
}

.toolbar-item:hover {
  color: var(--primary-light);
}

.toolbar-side-items {
  display: flex;
  justify-content: space-around;
  flex-grow: 1;
}

.toolbar-label {
  font-size: 10px;
  margin-top: 2px;
  font-weight: 500;
}

.toolbar-create-btn {
  width: 60px;
  height: 60px;
  background: var(--primary-gradient);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-primary, #f6f6f6);
  font-size: 28px;
  transform: translateY(-1px);
  transition: var(--transition-bounce);
  border: 2px solid rgba(0, 0, 0, 0.2);
  box-shadow: var(--shadow-primary);
}

.toolbar-create-btn:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: var(--shadow-glow);
  color: var(--brand-ink);
}

.benefits-scroll-wrapper::-webkit-scrollbar {
    display: none;
}

.benefit-card .card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.benefit-card .card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

.benefit-icon {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.benefit-highlight .badge {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@media (max-width: 768px) {
    .benefit-card {
        min-width: 250px !important;
        max-width: 280px !important;
    }
}

/* Enhanced Swiper Styles */
.image-preview-swiper {
    --swiper-theme-color: #000000;
    --swiper-navigation-size: 24px;
}

.image-preview-swiper .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 40px; /* Add padding for bottom info */
}

.image-preview-swiper .swiper-zoom-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Navigation buttons */
.image-preview-swiper .swiper-button-next,
.image-preview-swiper .swiper-button-prev {
    width: 50px;
    height: 50px;
    background: var(--veil);
    border-radius: 50%;
    color: var(--ink) !important;
    transition: all 0.3s ease;
}

.image-preview-swiper .swiper-button-next:hover,
.image-preview-swiper .swiper-button-prev:hover {
    background: var(--veil-strong);
    transform: scale(1.1);
}

/* Pagination */
.image-preview-swiper .swiper-pagination-bullet {
    background: var(--scrim);
    opacity: 1;
    transition: all 0.3s ease;
}

.image-preview-swiper .swiper-pagination-bullet-active {
    background: var(--brand-fill);
    transform: scale(1.2);
}

.swiper-pagination {
    bottom: 10px !important;
}
/* Like button styles - TOP LEFT */
.image-like-overlay .image-like-btn {
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

.image-like-overlay .image-like-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.16);
}

/* Like button ripple effect */
.like-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(144, 25, 36, 0.3);
    transform: translate(-50%, -50%);
    animation: ripple 0.6s ease-out;
}

@keyframes ripple {
    to {
        width: 100px;
        height: 100px;
        opacity: 0;
    }
}

/* Info overlay styles - BOTTOM CENTER */
.image-info-overlay .image-info-container {
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
    background: var(--veil);
}

.image-prompt-container {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

.image-prompt-container::-webkit-scrollbar {
    width: 4px;
}

.image-prompt-container::-webkit-scrollbar-track {
    background: transparent;
}

.image-prompt-container::-webkit-scrollbar-thumb {
    background: var(--scrim-soft);
    border-radius: 2px;
}

.image-prompt-container::-webkit-scrollbar-thumb:hover {
    background: var(--scrim);
}

/* Floating heart animation */
.floating-heart {
    animation: floatUp 1.2s ease-out forwards;
}

@keyframes floatUp {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5) rotate(-30deg);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -70%) scale(1) rotate(30deg);
    }
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .image-preview-swiper .swiper-button-next,
    .image-preview-swiper .swiper-button-prev {
        width: 40px;
        height: 40px;
        margin-top: -20px;
    }
    
    .image-preview-swiper .swiper-button-next {
        right: 10px;
    }
    
    .image-preview-swiper .swiper-button-prev {
        left: 10px;
    }
    
    .image-like-overlay {
        top: 50px;
        left: 10px;
    }
    
    .image-like-overlay .image-like-btn {
        width: 45px;
        height: 45px;
    }
    
    .image-info-overlay .image-info-container {
        margin: 0 10px;
        padding: 12px;
        font-size: 14px;
    }
    
    .image-title {
        font-size: 16px !important;
    }
    
    .image-prompt {
        font-size: 13px !important;
    }
    
    .image-prompt-container {
        max-height: 50px !important;
    }
    
}

/* Touch feedback */
.swiper-slide img {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

/* Zoom cursor - only for pinch gestures */
.swiper-zoom-container {
    cursor: grab;
}

.swiper-zoom-container:active {
    cursor: grabbing;
}

.swiper-zoom-container.swiper-zoom-container-zoomed {
    cursor: move;
}

/* Disable text selection in modal */
#imagePreviewModal * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Enhanced heart beat animation */
@keyframes heartBeat {
    0% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.3);
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.3);
    }
    70% {
        transform: scale(1);
    }
}

.animate__heartBeat {
    animation: heartBeat 1s ease-in-out;
}

#goals-enable-toggle {
    transition: all 0.3s ease;
}

#goals-enable-toggle[data-enabled="true"] {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
    color: var(--ink);
}

#goals-enable-toggle[data-enabled="false"] {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    color: var(--ink);
}

#goals-enable-toggle[data-enabled="false"] .bi-toggle-on:before {
    content: "\f235"; /* toggle-off icon */
}
/* Hide NSFW prompts and gifts when SFW mode is enabled */
/*
#promptContainer.sfw .prompt-card.nsfw-true, #giftsList.sfw .gift-card.nsfw-true {
    display: none !important;
    visibility: hidden;
    opacity: 0;
}
*/

/* ============================================================================
   NATIVE SECTION & BENEFITS STYLES
   ============================================================================ */

.native-section {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--glass-border);
}

.native-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  padding-bottom: 12px;
}

.native-section-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.native-section-icon {
  font-size: 18px;
  color: var(--ink-muted);
}

.native-section-action {
  font-size: 13px;
  padding: 8px 12px;
  background: var(--glass-strong);
  color: var(--ink-muted);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.native-section-action:hover {
  background: var(--scrim-soft);
  transform: translateX(2px);
}

.native-section-content {
  padding: 0 16px 16px;
}

.native-benefits-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 0 16px 16px;
}

@media (min-width: 640px) {
  .native-benefits-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.native-benefit-card {
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-smooth);
  text-align: center;
}

.native-benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-primary);
  border-color: var(--border-primary);
}

.native-benefit-icon {
  font-size: 32px;
  margin-bottom: 12px;
  color: var(--ink-muted);
}

.native-benefit-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text-primary);
}

.native-benefit-description {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* Dark mode is now the default - no media query needed */

/* ============================================================================
   HERO SECTION STYLES
   ============================================================================ */

.hero-section {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero-bg-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.02em;
}

.hero-subtitle {
  font-size: 1.25rem;
  line-height: 1.6;
  margin: 1.5rem auto 2rem;
  max-width: 700px;
}

.hero-cta-buttons .btn {
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  font-weight: 700;
  border-radius: 12px;
  min-width: 180px;
}

.hero-cta-buttons .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
}

.hero-cta-buttons .btn:active {
  transform: translateY(-1px);
}

.hero-features {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(35, 35, 35, 0.1);
  flex-wrap: wrap;
}

.hero-features > div {
  text-align: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-section {
    padding: 40px 15px !important;
  }

  .hero-title {
    font-size: 2.2rem;
  }

  .hero-subtitle {
    font-size: 1rem;
    margin: 1rem auto 1.5rem;
  }

  .hero-cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .hero-cta-buttons .btn {
    width: 100%;
    max-width: 300px;
  }

  .hero-features {
    gap: 1.5rem;
    padding-top: 1.5rem;
    margin-top: 2rem;
  }

  .hero-features > div {
    flex: 0 0 calc(50% - 0.75rem);
  }
}

@media (max-width: 480px) {
  .hero-section {
    padding: 30px 12px !important;
  }

  .hero-title {
    font-size: 1.8rem;
  }

  .hero-subtitle {
    font-size: 0.95rem;
    margin: 0.8rem auto 1rem;
  }

  .hero-features {
    gap: 1rem;
    padding-top: 1rem;
    margin-top: 1.5rem;
  }

  .hero-features > div:nth-child(n+3) {
    display: none;
  }

  .hero-features > div {
    flex: 0 0 100%;
  }
}


/* === BROWSE SECTION === */
.browse-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    max-width: 1400px;
    margin: 40px auto 60px;
    padding: 0 20px;
}

.browse-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    border-radius: 28px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s ease;
    text-align: center;
    min-height: 50px;
}

.browse-link-primary {
    background: var(--primary-gradient);
    color: var(--on-primary, #f6f6f6);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.browse-link-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    color: var(--brand-ink);
}

.browse-link-secondary {
    background: var(--bg-primary);
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    box-shadow: var(--shadow-md);
}

.browse-link-secondary:hover {
    background: var(--primary-gradient-hover);
    color: var(--on-primary, #f6f6f6);
    border-color: transparent;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}


.level-badge {
    transform: translateX(-50%);
    background: var(--fill-mid);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
    bottom: -10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border: 2px solid var(--line-strong);
}
.level-badge.zero     { background: linear-gradient(135deg, #444444, #777777); }
.level-badge.bronze   { background: linear-gradient(135deg, #cd7f32, #a0522d); }
.level-badge.gold     { background: linear-gradient(135deg, #ffd700, #ffaa00); }
.level-badge.platinum { background: linear-gradient(135deg, #0f0f0f, #333333); }
.level-badge.purple   { background: linear-gradient(135deg, #686868, #8f8f8f); box-shadow: 0 0 12px rgba(0, 0, 0, 0.06); }
.level-badge.diamond  { background: linear-gradient(135deg, #6e6e6e, #232323); box-shadow: 0 0 20px rgba(0, 0, 0, 0.06); }

@keyframes breathe {
    0%,100% { box-shadow: 0 0 20px rgba(0, 0, 0, 0.06); }
    50%     { box-shadow: 0 0 35px rgba(0, 0, 0, 0.06); }
}
/* Heart badge styles */
.heart-badge {
    transform: translateX(-50%);
    pointer-events: none;
    top: 37px;
    width: 26px;
    height: 26px;

}
.heart-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Legendary purple glow for everyone – you wanted this as default */
    filter: brightness(1.4) drop-shadow(0 0 20px rgba(0, 0, 0, 0.06));
}
.heart-icon.legendary{
    /* Extra pulse only on the beating heart (level 21+) */
    animation: heartBeat 1.4s ease-in-out infinite;
}
.heart-number {
    position: absolute;
    font-size: 9px;
    font-weight: 900;
    text-shadow: 0 0 0px rgba(0, 0, 0, 0.16), 0 1px 1px rgba(0, 0, 0, 0.16);
    pointer-events: none;
}

/* Optional: even stronger glow on legendary tier */
@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
}
/* Chat Level Container Button Styles */
#chatLevelContainer .btn-primary {
    background: var(--scrim) !important; /* Semi-transparent blue */
}

#chatLevelContainer .btn-success {
    background: rgba(40, 167, 69, 0.5) !important; /* Semi-transparent green */
}

#chatLevelContainer .btn-warning {
    background: rgba(162, 122, 0, 0.5) !important; /* Semi-transparent yellow */
}

#chatLevelContainer .btn-danger {
    background: rgba(144, 25, 36, 0.5) !important; /* Semi-transparent red */
}

#chatLevelContainer .btn-info {
    background: var(--veil) !important; /* Semi-transparent cyan */
}

#chatLevelContainer .btn-dark {
    background: var(--veil) !important; /* Semi-transparent dark */
}
.btn.btn-outline-primary.edit-strength-btn.active {
background: var(--primary-gradient) !important;
color: var(--on-primary, #f6f6f6) !important;
}

/* Edit Image Modal - Edit Strength Buttons */
.edit-strength-btn {
    font-size: 0.875rem !important;
    padding: 0.5rem 1rem !important;
    font-weight: 500;
    min-width: 70px;
}

/* Edit Image Modal - Footer Buttons (target modals that contain edit-strength-btn) */
.modal:has(.edit-strength-btn) .modal-footer .btn-secondary,
.modal:has(.edit-strength-btn) .modal-footer .btn-primary {
    font-size: 0.875rem !important;
    padding: 0.625rem 1.25rem !important;
    font-weight: 500;
}

.modal:has(.edit-strength-btn) .modal-footer .btn-primary i {
    font-size: 0.875rem;
    margin-right: 0.375rem;
}

/* Fallback for browsers that don't support :has() */
[id^="editModal-"] .modal-footer .btn-secondary,
[id^="editModal-"] .modal-footer .btn-primary {
    font-size: 0.875rem !important;
    padding: 0.625rem 1.25rem !important;
    font-weight: 500;
}

[id^="editModal-"] .modal-footer .btn-primary i {
    font-size: 0.875rem;
    margin-right: 0.375rem;
}

/* Character Intro Modal - Start Chatting Buttons */
#characterIntroModal .btn-primary,
#characterIntroModal .btn-dark {
    font-size: 0.875rem !important;
    padding: 0.625rem 1.25rem !important;
    font-weight: 500;
}

#characterIntroModal .btn-sm {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
}

/* Character Intro Modal - Tag Badges */
#characterIntroModal .tags-container .badge {
    font-size: 0.75rem !important;
    padding: 0.375rem 0.75rem !important;
    font-weight: 500;
}

/* Character Intro Modal - Remove unnecessary space above footer */
#characterIntroModal .modal-body {
    padding-bottom: 0.5rem !important;
}

#characterIntroModal #character-intro-container {
    padding-bottom: 0 !important;
}

#characterIntroModal #character-intro-gallery {
    margin-bottom: 0 !important;
}

/* Character Info Modal - Native App Style */
/* `!important` on purpose: overwrite-bootstrap.css paints every .modal-content
   with an important background, and without matching it here this sheet was
   see-through — the chat behind it read straight through the detail cards. */
.character-info-native {
    background: var(--surface-overlay) !important;
    border: none;
    border-radius: 24px;
}

.character-info-native .modal-header {
    background: transparent;
}

.character-info-native .modal-body {
    padding: 0 24px 24px 24px;
}

/* No `filter: invert(1)` — Bootstrap's close glyph is already dark, and
   inverting it painted a white X onto a white sheet. */
.character-info-native .btn-close {
    opacity: 0.7;
}

.char-info-header {
    padding-top: 8px;
}

.char-info-avatar-wrapper {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--line);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.char-info-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.char-info-avatar-placeholder {
    width: 100%;
    height: 100%;
    background: var(--glass-strong);
    color: var(--ink-muted);
}

.char-info-name {
    color: var(--ink);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.char-info-stats {
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.char-info-stat {
    display: flex;
    align-items: center;
    gap: 6px;
}

.char-info-stat i {
    color: var(--ink-muted);
}

.char-info-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.char-info-detail-card {
    background: var(--glass);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 14px 16px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.char-info-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ink-muted);
    font-weight: 500;
}

.char-info-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
}

.char-info-edit-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--glass-strong);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.char-info-edit-btn:hover {
    background: var(--scrim-soft);
    color: var(--ink);
}

.char-info-edit-btn i {
    font-size: 0.75rem;
}

.char-info-purpose-section {
    background: var(--glass);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.char-info-purpose-text {
    font-size: 0.9rem;
    color: var(--ink-soft);
    margin: 8px 0 0 0;
    line-height: 1.5;
}

.char-info-actions .btn-outline-secondary {
    border-color: var(--line-strong);
    color: var(--ink-soft);
    border-radius: 12px;
    padding: 10px 20px;
}

.char-info-actions .btn-outline-secondary:hover {
    background: var(--glass-strong);
    border-color: var(--line-strong);
    color: var(--ink);
}

@media (max-width: 480px) {
    .char-info-details-grid {
        grid-template-columns: 1fr;
    }
    
    .character-info-native .modal-body {
        padding: 0 16px 16px 16px;
    }
}

/* Character Info Dropdown Styles */
.char-info-dropdown {
    width: 100%;
    background: var(--glass-strong);
    border: 1px solid rgba(111, 111, 111, 0.5);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    appearance: none;
    /* Dark chevron: a white one was invisible on this sheet. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23737373' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.char-info-dropdown:focus {
    border-color: var(--line);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06);
}

.char-info-dropdown option {
    background: var(--surface-sunken);
    color: var(--ink);
    padding: 8px;
}

/* Edit actions container */
.char-info-edit-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 6px;
}

.char-info-save-btn,
.char-info-cancel-btn {
    background: var(--glass-strong);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.char-info-save-btn {
    color: #10b981;
}

.char-info-save-btn:hover {
    background: rgba(16, 185, 129, 0.3);
    color: #10b981;
}

.char-info-cancel-btn {
    color: #af0f0f;
}

.char-info-cancel-btn:hover {
    background: rgba(175, 15, 15, 0.3);
    color: #af0f0f;
}

.char-info-save-btn i,
.char-info-cancel-btn i {
    font-size: 0.9rem;
}

/* Editing state */
.char-info-detail-card.editing {
    border-color: var(--line-strong);
    padding-top: 44px;
}

.char-info-detail-card.editing .char-info-edit-btn {
    display: none;
}

/* Custom instructions textarea */
.char-info-textarea {
    width: 100%;
    background: var(--glass-strong);
    border: 1px solid rgba(111, 111, 111, 0.5);
    border-radius: 8px;
    padding: 12px;
    color: var(--ink);
    font-size: 0.9rem;
    resize: vertical;
    min-height: 100px;
    outline: none;
}

.char-info-textarea:focus {
    border-color: var(--line);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06);
}

.char-info-textarea::placeholder {
    color: var(--ink-muted);
}

.char-info-custom-instructions-edit {
    width: 100%;
}

.char-info-custom-instructions-edit .char-counter {
    text-align: right;
    font-size: 0.75rem;
    color: var(--ink-muted);
    margin-top: 4px;
}

/* Purpose section with edit button */
.char-info-purpose-section {
    position: relative;
}

.char-info-purpose-section .char-info-edit-btn {
    top: 14px;
    right: 14px;
}

.char-info-purpose-section.editing {
    padding-top: 44px;
}

.char-info-purpose-section.editing .char-info-edit-btn {
    display: none;
}

.char-info-purpose-section .char-info-edit-actions {
    top: 12px;
    right: 12px;
}

/* Add custom instructions button */
.char-info-add-instructions .btn {
    border-color: var(--line-strong);
    color: var(--ink-muted);
    border-radius: 12px;
    padding: 10px 20px;
    font-size: 0.85rem;
}

.char-info-add-instructions .btn:hover {
    background: var(--glass-strong);
    border-color: var(--line);
    color: var(--ink-soft);
}

/* Reset button */
.char-info-reset .btn {
    border-color: rgba(234, 179, 8, 0.5);
    color: #eab308;
    border-radius: 12px;
    padding: 10px 20px;
    font-size: 0.85rem;
}

.char-info-reset .btn:hover {
    background: rgba(234, 179, 8, 0.1);
    border-color: #eab308;
    color: #a58404;
}

/* Custom indicator when field has been customized */
.char-info-detail-card.customized::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fill-mid);
}

/* ============================================================================
   USER FAVORITES GALLERY - CHARACTER FOOTER OVERLAY
   ============================================================================ */

/* Character footer overlay on favorite images */
.character-footer-overlay {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-card:hover .character-footer-overlay {
    opacity: 1;
}

/* Always show on touch devices */
@media (hover: none) {
    .character-footer-overlay {
        opacity: 1;
    }
}

/* Character info link hover effect */
.character-info-link {
    transition: transform 0.2s ease;
}

.character-info-link:hover {
    transform: translateX(4px);
}

.character-info-link img {
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.character-info-link:hover img {
    transform: scale(1.1);
    border-color: var(--line-strong) !important;
}

/* User favorite image container styles */
.user-favorite-image {
    cursor: pointer;
    position: relative;
}

.user-favorite-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--glass);
    transition: background 0.2s ease;
    pointer-events: none;
}

.user-favorite-image:hover::after {
    background: var(--glass-strong);
}

/* Preview modal character link styles */
.character-preview-link {
    transition: background 0.2s ease;
    padding: 8px 12px;
    border-radius: 8px;
    margin: -8px -12px;
}

.character-preview-link:hover {
    background: var(--glass-strong);
}

.character-preview-link img {
    transition: transform 0.2s ease;
}

.character-preview-link:hover img {
    transform: scale(1.1);
}

/* Ensure image cards have proper overflow for footer */
#user-images-gallery .image-card .card {
    overflow: hidden;
    border-radius: var(--radius-xs);
}

/* ============================================================================
   SEARCH GALLERY - CHARACTER FOOTER OVERLAY
   ============================================================================ */

/* Character footer overlay on search gallery images */
.search-character-footer {
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 0 0 0.375rem 0.375rem;
}

.gallery-grid-item:hover .search-character-footer,
.gallery-card:hover .search-character-footer {
    opacity: 1;
}

/* Always show on touch devices */
@media (hover: none) {
    .search-character-footer {
        opacity: 1;
    }
}

/* Search character link hover effect */
.search-character-link {
    transition: transform 0.2s ease;
}

.search-character-link:hover {
    transform: translateX(4px);
}

.search-character-link img {
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.search-character-link:hover img {
    transform: scale(1.1);
    border-color: var(--line-strong) !important;
}

/* Search image preview container */
.search-image-preview {
    cursor: pointer;
    position: relative;
}

.search-image-preview::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--glass);
    transition: background 0.2s ease;
    pointer-events: none;
}

.search-image-preview:hover::after {
    background: var(--glass-strong);
}

/* ============================================================================
   SNS PLATFORM BUTTONS - CHAT POST MODAL
   ============================================================================ */

/* Base SNS Platform Button */
.sns-platform-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--veil-strong);
    border: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    color: var(--ink-soft);
    outline: none;
}

.sns-platform-btn:hover {
    background: var(--veil-strong);
    border-color: var(--line-strong);
    color: var(--ink);
}

.sns-platform-btn.active {
    background: linear-gradient(135deg, rgba(141, 141, 141, 0.3) 0%, rgba(190, 190, 190, 0.3) 100%);
    border-color: var(--line);
    color: var(--ink);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.16), inset 0 0 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.sns-platform-btn.active:hover {
    background: linear-gradient(135deg, rgba(141, 141, 141, 0.4) 0%, rgba(190, 190, 190, 0.4) 100%);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.16), inset 0 0 25px rgba(0, 0, 0, 0.15);
}

.sns-platform-btn i {
    font-size: 16px;
}

/* My Profile Button - Special Blue Styling */
.sns-platform-btn[data-platform="profile"] {
    background: linear-gradient(135deg, rgba(125, 125, 125, 0.2) 0%, rgba(139, 139, 139, 0.2) 100%);
    border-color: var(--line-strong);
}

.sns-platform-btn[data-platform="profile"]:hover {
    background: linear-gradient(135deg, rgba(125, 125, 125, 0.3) 0%, rgba(139, 139, 139, 0.3) 100%);
    border-color: var(--line-strong);
}

.sns-platform-btn[data-platform="profile"].active {
    background: linear-gradient(135deg, rgba(125, 125, 125, 0.4) 0%, rgba(139, 139, 139, 0.4) 100%);
    border-color: var(--line);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.06), inset 0 0 20px rgba(0, 0, 0, 0.06);
}

.sns-platform-btn[data-platform="profile"].active:hover {
    background: linear-gradient(135deg, rgba(125, 125, 125, 0.5) 0%, rgba(139, 139, 139, 0.5) 100%);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.06), inset 0 0 25px rgba(0, 0, 0, 0.06);
}

.sns-platform-btn[data-platform="profile"] i {
    color: var(--ink-muted);
}

.sns-platform-btn[data-platform="profile"].active i {
    color: var(--ink);
}
/* ===================================
   Chat Image Slider Styles
   =================================== */
.chat-image-swiper {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
}

.chat-image-swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-image-swiper .swiper-slide img.slider-image {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    border-radius: 12px;
}

.chat-image-swiper .swiper-button-prev,
.chat-image-swiper .swiper-button-next {
    width: 30px;
    height: 30px;
    background: var(--veil);
    border-radius: 50%;
}

.chat-image-swiper .swiper-button-prev::after,
.chat-image-swiper .swiper-button-next::after {
    font-size: 14px;
}

.chat-image-swiper .swiper-pagination-bullet {
    background: var(--scrim);
    opacity: 1;
}

.chat-image-swiper .swiper-pagination-bullet-active {
    background: var(--fill-mid);
}

.image-slider-container {
    position: relative;
}

.image-slider-container .slider-counter {
    opacity: 0.7;
}

/* Ensure slider images don't have hover transform */
.chat-image-swiper .assistant-image-box:hover {
    transform: none !important;
}

/* Make image grabbable for carousel swiping */
.chat-image-swiper .assistant-image-box {
    cursor: grab !important;
}

.chat-image-swiper .assistant-image-box:active {
    cursor: grabbing !important;
}

/* Make image tools scrollable, not swipeable */
.chat-image-swiper .image-tools {
    cursor: default !important;
    touch-action: pan-x !important; /* Allow horizontal scrolling on touch devices */
    user-select: none;
}

.chat-image-swiper .image-tools .d-flex {
    touch-action: pan-x !important; /* Allow horizontal scrolling on touch devices */
}

/* Mobile responsive adjustments */
@media (max-width: 576px) {
    .chat-image-swiper .swiper-slide img.slider-image {
        max-height: 300px;
    }
    
    .image-slider-container {
        max-width: 250px !important;
    }
}
/* ============================================================================
   CUSTOM PROMPT MODAL - Enhanced Dark Theme Design
   ============================================================================ */
#customPromptModal .modal-dialog {
    max-width: 560px;
}

#customPromptModal .modal-content {
    border-radius: 24px;
    border: 1px solid var(--cyber-border, rgba(0, 0, 0, 0.1));
    box-shadow: var(--cyber-shadow);
    background: var(--cyber-panel-gradient, var(--bg-secondary, #d2d2d2));
    overflow: hidden;
}

/* Dark Header - Matching App Style */
#customPromptModal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background:
        linear-gradient(90deg, rgba(119, 119, 119, 0.18), rgba(133, 133, 133, 0.055)),
        rgba(241, 241, 241, 0.62);
    border-bottom: 1px solid var(--cyber-border, rgba(0, 0, 0, 0.1));
    border-radius: 24px 24px 0 0;
}

#customPromptModal .modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 750;
    font-size: 1rem;
    color: var(--text-primary, #000000);
    margin: 0;
    order: 1;
}

#customPromptModal .modal-title i {
    color: var(--accent-cyan, var(--primary-color, #777777));
    font-size: 1.1rem;
}

#customPromptModal .btn-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-strong) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M10.854 4.146a.5.5 0 0 1 0 .708L6.707 8l4.147 4.146a.5.5 0 0 1-.708.708l-4.5-4.5a.5.5 0 0 1 0-.708l4.5-4.5a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 0.75em !important;
    border: 1px solid var(--cyber-border, rgba(0, 0, 0, 0.12));
    border-radius: 14px !important;
    opacity: 1;
    padding: 0 !important;
    margin: 0 !important;
    order: 0;
    filter: none !important;
    transition: all 0.2s ease;
}

#customPromptModal .btn-close:hover {
    background: var(--cyber-gradient, rgba(0, 0, 0, 0.15)) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M10.854 4.146a.5.5 0 0 1 0 .708L6.707 8l4.147 4.146a.5.5 0 0 1-.708.708l-4.5-4.5a.5.5 0 0 1 0-.708l4.5-4.5a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 0.75em !important;
    transform: scale(1.05);
}

/* Modal Body */
#customPromptModal .modal-body {
    padding: 20px !important;
    background: transparent;
}

#customPromptModal .form-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary, #000000);
    margin-bottom: 6px;
}

#customPromptModal .form-text {
    font-size: 0.8rem;
    color: var(--text-muted, #737373);
    line-height: 1.4;
}

/* Textarea Styling */
#customPromptTextarea {
    background:
        linear-gradient(135deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02)),
        var(--cyber-surface, var(--bg-primary, #e5e5e5));
    border: 1px solid var(--cyber-border, rgba(0, 0, 0, 0.1));
    border-radius: 16px;
    padding: 14px 16px;
    padding-top: 50px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-primary, #000000);
    transition: var(--transition-cyber);
    resize: vertical;
    min-height: 120px;
}

#customPromptTextarea::placeholder {
    color: var(--text-muted, #737373);
    font-style: italic;
}

#customPromptTextarea:focus {
    border-color: var(--cyber-border-strong, var(--primary-color, #777777));
    box-shadow: var(--cyber-glow, 0 0 0 3px rgba(0, 0, 0, 0.06));
    outline: none;
}

/* Enhance Button - Inside Textarea */
#enhancePromptBtn {
    border-radius: 14px;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 8px 14px;
    transition: var(--transition-cyber);
    background: var(--primary-gradient, linear-gradient(90.9deg, #232323 2.74%, #777777 102.92%));
    border: 1px solid rgba(35, 35, 35, 0.35);
    color: var(--on-primary, #f6f6f6);
    top: 8px !important;
    box-shadow: var(--cyber-shadow-soft);
}

#enhancePromptBtn:hover {
    transform: translateY(-1px);
    box-shadow: var(--cyber-shadow);
    background: var(--primary-gradient-hover, linear-gradient(90.9deg, #1a1a1a 2.74%, #6c6c6c 102.92%));
}

#enhancePromptBtn:active {
    transform: translateY(0);
}
#clearPromptBtn {
  top: 8px !important;
}
/* Character Counter */
#customPromptModal .form-text.d-flex {
    padding: 8px 4px;
    font-size: 0.8rem;
    color: var(--text-muted, #737373);
}

#customCharCount {
    color: var(--primary-light, #232323);
    font-weight: 600;
}

#enhanceStatus {
    min-height: 18px;
    font-weight: 500;
    font-size: 0.8rem;
}

/* Style Tags Section */
#customPromptModal .mb-3:last-of-type .form-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary, #4e4e4e);
}

#customPromptModal .mb-3:last-of-type .form-label i {
    color: var(--primary-light, #232323);
    font-size: 0.9rem;
}

#styleTagsContainer {
    padding: 12px;
    background: var(--cyber-surface, var(--bg-primary, #e5e5e5));
    border-radius: 16px;
    border: 1px solid var(--cyber-border, rgba(0, 0, 0, 0.1));
}

#styleTagsContainer::-webkit-scrollbar {
    width: 6px;
}

#styleTagsContainer::-webkit-scrollbar-track {
    background: transparent;
}

#styleTagsContainer::-webkit-scrollbar-thumb {
    background: var(--border-color, rgba(0, 0, 0, 0.15));
    border-radius: 3px;
}

#styleTagsContainer::-webkit-scrollbar-thumb:hover {
    background: var(--scrim-soft);
}

/* Style Tag Buttons */
.style-tag-btn {
    border-radius: 14px;
    padding: 8px 14px;
    font-size: 0.8rem;
    font-weight: 500;
    transition: var(--transition-cyber);
    border: 1px solid var(--cyber-border, rgba(0, 0, 0, 0.1));
    background: var(--cyber-surface, var(--bg-secondary, #d2d2d2));
    color: var(--text-secondary, #4e4e4e);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.style-tag-btn i {
    font-size: 0.85rem;
    color: var(--primary-light, #232323);
    transition: color 0.2s ease;
}

.style-tag-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--cyber-shadow-soft);
    border-color: var(--cyber-border-strong, var(--primary-color, #777777));
    background: var(--cyber-gradient-hover, var(--primary-gradient, linear-gradient(90.9deg, #232323 2.74%, #777777 102.92%)));
    color: var(--on-primary, #f6f6f6);
}

.style-tag-btn:hover i {
    color: var(--brand-ink);
}

.style-tag-btn:active {
    transform: translateY(0);
}

/* Modal Footer */
#customPromptModal .modal-footer {
    border-top: 1px solid var(--cyber-border, rgba(0, 0, 0, 0.1));
    padding: 16px 20px;
    background: var(--veil);
    gap: 12px;
}

#customPromptModal .modal-footer .btn-secondary {
    background: var(--cyber-surface, transparent);
    border: 1px solid var(--cyber-border, rgba(0, 0, 0, 0.2));
    color: var(--text-secondary, #4e4e4e);
    border-radius: 14px;
    padding: 10px 20px;
    font-weight: 500;
    font-size: 0.9rem;
    transition: var(--transition-cyber);
}

#customPromptModal .modal-footer .btn-secondary:hover {
    background: var(--cyber-gradient, rgba(0, 0, 0, 0.08));
    color: var(--text-primary, #000000);
    border-color: var(--cyber-border-strong, rgba(0, 0, 0, 0.3));
}

#generateCustomPromptBtn {
    background: var(--primary-gradient, linear-gradient(90.9deg, #232323 2.74%, #777777 102.92%));
    border: 1px solid rgba(35, 35, 35, 0.35);
    border-radius: 14px;
    padding: 10px 24px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--on-primary, #f6f6f6);
    transition: var(--transition-cyber);
    box-shadow: var(--cyber-shadow-soft);
}

#generateCustomPromptBtn:hover {
    transform: translateY(-2px);
    box-shadow: var(--cyber-shadow);
    background: var(--primary-gradient-hover, linear-gradient(90.9deg, #1a1a1a 2.74%, #6c6c6c 102.92%));
}

#generateCustomPromptBtn:active {
    transform: translateY(0);
}

/* Mobile Responsive */
@media (max-width: 576px) {
    #customPromptModal .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }
    
    #customPromptModal .modal-content {
        border-radius: 16px;
    }
    
    #customPromptModal .modal-header {
        padding: 14px 16px;
        border-radius: 16px 16px 0 0;
    }
    
    #customPromptModal .modal-body {
        padding: 16px;
    }
    
    #customPromptModal .modal-footer {
        padding: 14px 16px;
        flex-direction: column;
    }
    
    #customPromptModal .modal-footer .btn {
        width: 100%;
    }
    
    .style-tag-btn {
        padding: 6px 12px;
        font-size: 0.75rem;
    }
    
    #enhancePromptBtn {
        font-size: 0.7rem;
        padding: 6px 10px;
    }
}

/* Animation for spinner */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

/* Edit Modal Custom Model Selector */
.edit-model-item {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent !important;
}

.edit-model-item:hover {
    background: var(--glass-strong) !important;
    transform: translateX(4px);
}

.edit-model-item.active {
    background: var(--scrim-soft) !important;
    border-color: var(--line-strong) !important;
}

.edit-model-item .bg-secondary {
    transition: all 0.2s ease;
}

.edit-model-item:hover .bg-secondary {
    background-color: var(--primary-color) !important;
    color: var(--on-primary, #f6f6f6) !important;
}

.edit-model-item i.bi-box {
    font-size: 14px;
}

#editPromptTextarea-preview:focus {
    background: var(--glass-strong) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.06);
}

.edit-strength-btn {
    border-radius: 10px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.edit-strength-btn.active {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--on-primary, #f6f6f6) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.edit-image-preview-container img {
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.edit-image-preview-container:hover img {
    transform: scale(1.02);
}

/* ─── Gallery Premium Lock Overlay (global — applies on chat, profile, everywhere) ─── */

/* Blur wrapper for gallery cards */
.gallery-card-blur-wrapper {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    width: 100%;
}

/* Stronger visual blur for gallery locked images */
.gallery-card-image img.img-blur {
    filter: blur(18px) brightness(0.7);
    transform: scale(1.1);
}

/* Full-cover lock overlay — purple premium */
.ig-lock-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse 80% 45% at 50% 14%, rgba(35, 35, 35, 0.22), transparent 62%),
        radial-gradient(circle at 50% 50%, rgba(174, 174, 174, 0.18), transparent 70%),
        linear-gradient(170deg, rgba(237, 237, 237, 0.58) 0%, rgba(240, 240, 240, 0.9) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: var(--ink);
    gap: 8px;
    z-index: 2;
    cursor: pointer;
    text-align: center;
    padding: 12px 10px;
}

.ig-lock-overlay > i.bi-lock-fill {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #5e5e5e 0%, #7a7a7a 100%);
    color: var(--brand-ink);
    font-size: 1.1rem;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
    margin-bottom: 2px;
}

.gallery-premium-unlock-text {
    color: var(--ink) !important;
    font-size: 0.65rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
    padding: 0 8px;
}

/* Purple premium CTA button */
.ig-lock-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: linear-gradient(135deg, #6c6c6c 0%, #7b7b7b 100%);
    color: var(--ink) !important;
    border: none;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 8px 16px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
    text-decoration: none;
    white-space: nowrap;
    margin-top: 4px;
}

.ig-lock-cta-btn:hover {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
    filter: brightness(1.06);
}

.ig-lock-cta-btn:active {
    transform: scale(0.97);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Subscription Cancellation Flow Modals ──────────────────────────────── */
.cancel-flow-modal {
    background: var(--surface-sunken);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    color: var(--ink);
    max-width: 520px;
}

.cancel-flow-modal .modal-header {
    padding: 1rem 1.25rem 0.25rem;
}

.cancel-flow-modal .modal-body {
    padding: 0.5rem 1.5rem 1rem;
}

.cancel-flow-modal .modal-footer {
    padding: 0.75rem 1.5rem 1.5rem;
}

.cancel-reason-select {
    background: var(--fill-mid-soft);
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: var(--ink);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    appearance: none;
}

.cancel-reason-select:focus {
    background: var(--fill-mid-soft);
    color: var(--ink);
    border-color: var(--line-strong);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.cancel-reason-select option {
    background: var(--fill-mid-soft);
    color: var(--ink);
}

.cancel-feedback-textarea {
    background: var(--fill-mid-soft);
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: var(--ink);
    border-radius: 8px;
    resize: none;
}

.cancel-feedback-textarea::placeholder {
    color: var(--ink-disabled);
}

.cancel-feedback-textarea:focus {
    background: var(--fill-mid-soft);
    color: var(--ink);
    border-color: var(--line-strong);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.retention-bonus-box {
    background: var(--fill-mid-soft);
    border-radius: 12px;
    padding: 1.25rem;
}

.retention-coin-amount {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.retention-coin-icon {
    font-size: 2rem;
}

.retention-coin-count {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--ink);
}

.retention-cta-box {
    background: var(--glass);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: var(--ink-muted);
}

.miss-you-modal {
    border: 1.5px solid rgba(105, 105, 105, 0.4);
}

.miss-you-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.miss-you-list li {
    padding: 0.3rem 0;
    position: relative;
    padding-left: 1.2rem;
    color: var(--ink-soft);
}

.miss-you-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--ink-muted);
}