/* SoulChat AI Premium Styles */
:root {
  --bg-primary: #0a0a12;
  --bg-secondary: #12121f;
  --bg-card: rgba(255,255,255,0.04);
  --bg-card-hover: rgba(255,255,255,0.08);
  --bg-glass: rgba(18,18,31,0.75);
  --border-color: rgba(255,255,255,0.08);
  --border-hover: rgba(255,255,255,0.15);
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --accent: #8b5cf6;
  --accent-light: #a78bfa;
  --accent-gradient: linear-gradient(135deg,#8b5cf6 0%,#ec4899 100%);
  --accent-glow: 0 0 30px rgba(139,92,246,0.35);
  --radius-md: 12px;
  --radius-lg: 20px;
  --nav-height: 70px;
  --bottom-nav-height: 64px;
  --transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  --shadow-md: 0 8px 30px rgba(0,0,0,0.4);
}
[data-theme="light"] {
  --bg-primary: #f8fafc;
  --bg-secondary: #fff;
  --bg-card: rgba(0,0,0,0.03);
  --bg-card-hover: rgba(0,0,0,0.06);
  --bg-glass: rgba(255,255,255,0.85);
  --border-color: rgba(0,0,0,0.08);
  --border-hover: rgba(0,0,0,0.15);
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --shadow-md: 0 8px 30px rgba(0,0,0,0.1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg-primary);
  color:var(--text-primary);
  line-height:1.6;
  min-height:100vh;
  overflow-x:hidden;
  padding-top:var(--nav-height);
  padding-bottom:var(--bottom-nav-height);
  transition:background .3s,color .3s;
}
@media(min-width:992px){body{padding-bottom:0}}
h1,h2,h3,h4,h5,h6{font-family:'Poppins',sans-serif;font-weight:600;color:var(--text-primary)}
a{color:var(--accent-light);text-decoration:none;transition:var(--transition)}
a:hover{color:var(--accent)}
img{max-width:100%;height:auto}

/* Preloader */
#preloader{position:fixed;inset:0;background:var(--bg-primary);z-index:9999;display:flex;align-items:center;justify-content:center;transition:opacity .4s,visibility .4s}
#preloader.hidden{opacity:0;visibility:hidden}
.loader-pulse{position:relative;width:80px;height:80px}
.pulse-ring{position:absolute;inset:0;border:3px solid var(--accent);border-radius:50%;animation:pulse-ring 1.5s ease-out infinite}
.pulse-core{position:absolute;inset:18px;background:var(--accent-gradient);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.4rem;box-shadow:var(--accent-glow)}
@keyframes pulse-ring{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.4);opacity:0}}

/* Navbar */
.glass-nav{background:var(--bg-glass)!important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border-color);height:var(--nav-height);transition:var(--transition);padding:0}
.glass-nav.scrolled{box-shadow:0 2px 8px rgba(0,0,0,.3)}
.brand-icon{width:38px;height:38px;background:var(--accent-gradient);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1rem;box-shadow:var(--accent-glow)}
.brand-text{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.25rem;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav-link{color:var(--text-secondary)!important;font-weight:500;font-size:.95rem;padding:.5rem 1rem!important;border-radius:8px;transition:var(--transition)}
.nav-link:hover,.nav-link.active{color:var(--text-primary)!important;background:var(--bg-card)}

/* Buttons */
.btn{font-weight:500;border-radius:var(--radius-md);padding:.6rem 1.4rem;transition:var(--transition);border:none}
.btn-primary{background:var(--accent-gradient);color:#fff;box-shadow:0 4px 15px rgba(139,92,246,.4)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 25px rgba(139,92,246,.5);color:#fff}
.btn-ghost{background:transparent;color:var(--text-secondary);border:1px solid var(--border-color)}
.btn-ghost:hover{background:var(--bg-card);color:var(--text-primary);border-color:var(--border-hover)}
.btn-icon{width:40px;height:40px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--bg-card);color:var(--text-secondary);border:1px solid var(--border-color)}
.btn-icon:hover{background:var(--bg-card-hover);color:var(--accent-light)}
.btn-sm{padding:.4rem 1rem;font-size:.875rem}
.btn-lg{padding:.85rem 2rem;font-size:1.05rem}

/* Cards */
.glass-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);backdrop-filter:blur(12px);transition:var(--transition)}
.glass-card:hover{background:var(--bg-card-hover);border-color:var(--border-hover);transform:translateY(-4px);box-shadow:var(--shadow-md)}

.ai-card{position:relative;overflow:hidden;border-radius:var(--radius-lg);background:var(--bg-card);border:1px solid var(--border-color);transition:var(--transition);height:100%}
.ai-card:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:var(--accent-glow)}
.ai-card .card-img-wrap{position:relative;aspect-ratio:4/5;overflow:hidden}
.ai-card .card-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.ai-card:hover .card-img-wrap img{transform:scale(1.08)}
.ai-card .card-badge{position:absolute;top:12px;left:12px;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);color:#fff;font-size:.7rem;font-weight:600;padding:4px 10px;border-radius:20px;display:flex;align-items:center;gap:5px}
.ai-card .card-badge.online::before{content:'';width:7px;height:7px;background:#22c55e;border-radius:50%;box-shadow:0 0 6px #22c55e}
.ai-card .card-badge.ai-label{left:auto;right:12px;background:var(--accent-gradient)}
.ai-card .card-body{padding:1rem 1.1rem 1.2rem}
.ai-card .card-name{font-size:1.1rem;font-weight:600;margin-bottom:2px}
.ai-card .card-meta{font-size:.8rem;color:var(--text-muted);margin-bottom:.5rem}
.ai-card .card-bio{font-size:.85rem;color:var(--text-secondary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:.8rem}
.ai-card .card-footer{display:flex;align-items:center;justify-content:space-between}
.ai-card .btn-open{background:var(--bg-card-hover);color:var(--text-primary);border:1px solid var(--border-hover);border-radius:50px;padding:.4rem 1.15rem;font-size:.8rem;font-weight:600;transition:var(--transition)}
.ai-card .btn-open:hover{background:var(--accent-gradient);color:#fff;border-color:transparent;transform:scale(1.05)}
.ai-card a.card-link{color:inherit;text-decoration:none;display:block;height:100%}
.ai-card a.card-link:hover{color:inherit}

/* Hero */
.hero{position:relative;padding:4rem 0 5rem;overflow:hidden}
.hero::before{content:'';position:absolute;top:-20%;right:-10%;width:600px;height:600px;background:radial-gradient(circle,rgba(139,92,246,.15) 0%,transparent 70%);pointer-events:none}
.hero::after{content:'';position:absolute;bottom:-10%;left:-5%;width:400px;height:400px;background:radial-gradient(circle,rgba(236,72,153,.1) 0%,transparent 70%);pointer-events:none}
.hero-title{font-size:clamp(2.2rem,5vw,3.5rem);font-weight:700;line-height:1.15;margin-bottom:1.2rem}
.hero-title .gradient-text{background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-subtitle{font-size:1.15rem;color:var(--text-secondary);max-width:540px;margin-bottom:2rem}
.hero-stats{display:flex;gap:2rem;flex-wrap:wrap;margin-top:2.5rem}
.hero-stat-value{font-size:1.6rem;font-weight:700}
.hero-stat-label{font-size:.85rem;color:var(--text-muted)}

.section{padding:4rem 0}
.section-title{font-size:1.75rem;font-weight:700;margin-bottom:.5rem}
.section-subtitle{color:var(--text-secondary);margin-bottom:2rem}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}

.category-pill{display:inline-flex;align-items:center;gap:8px;padding:.5rem 1.2rem;background:var(--bg-card);border:1px solid var(--border-color);border-radius:50px;color:var(--text-secondary);font-size:.9rem;font-weight:500;transition:var(--transition);white-space:nowrap}
.category-pill:hover,.category-pill.active{background:var(--accent-gradient);color:#fff;border-color:transparent;box-shadow:var(--accent-glow)}

.avatar-xs{width:28px;height:28px;object-fit:cover}
.avatar-sm{width:40px;height:40px;object-fit:cover}
.avatar-md{width:56px;height:56px;object-fit:cover}
.avatar-lg{width:80px;height:80px;object-fit:cover}
.avatar-xl{width:120px;height:120px;object-fit:cover}
.status-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.status-dot.online{background:#22c55e;box-shadow:0 0 8px #22c55e}
.status-dot.offline{background:#64748b}

.site-footer{background:var(--bg-secondary);border-top:1px solid var(--border-color);margin-top:3rem}
.footer-title{font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:1rem}
.footer-links{list-style:none;padding:0;margin:0}
.footer-links li{margin-bottom:.5rem}
.footer-links a{color:var(--text-muted);font-size:.9rem}
.footer-links a:hover{color:var(--accent-light)}
.social-btn{width:38px;height:38px;border-radius:50%;background:var(--bg-card);border:1px solid var(--border-color);display:flex;align-items:center;justify-content:center;color:var(--text-secondary)}
.social-btn:hover{background:var(--accent);color:#fff;border-color:transparent}

.mobile-bottom-nav{position:fixed;bottom:0;left:0;right:0;height:var(--bottom-nav-height);background:var(--bg-glass);backdrop-filter:blur(20px);border-top:1px solid var(--border-color);display:flex;z-index:1000;padding-bottom:env(safe-area-inset-bottom)}
.mobile-bottom-nav .nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--text-muted);font-size:.7rem;transition:var(--transition)}
.mobile-bottom-nav .nav-item i{font-size:1.2rem}
.mobile-bottom-nav .nav-item.active,.mobile-bottom-nav .nav-item:hover{color:var(--accent-light)}

.fab-chat{position:fixed;bottom:calc(var(--bottom-nav-height) + 16px);right:16px;width:56px;height:56px;background:var(--accent-gradient);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.4rem;box-shadow:var(--accent-glow);z-index:999;transition:var(--transition)}
.fab-chat:hover{transform:scale(1.1);color:#fff}

.form-control,.form-select{background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-primary);border-radius:var(--radius-md);padding:.75rem 1rem}
.form-control:focus,.form-select:focus{background:var(--bg-card);border-color:var(--accent);color:var(--text-primary);box-shadow:0 0 0 3px rgba(139,92,246,.2)}
.form-control::placeholder{color:var(--text-muted)}
.form-label{font-weight:500;color:var(--text-secondary);margin-bottom:.4rem;font-size:.9rem}

.chat-container{display:flex;flex-direction:column;height:calc(100vh - var(--nav-height));max-width:900px;margin:0 auto}
.chat-header{padding:1rem 1.25rem;background:var(--bg-glass);backdrop-filter:blur(16px);border-bottom:1px solid var(--border-color);display:flex;align-items:center;gap:1rem}
.chat-messages{flex:1;overflow-y:auto;padding:1.5rem 1.25rem;display:flex;flex-direction:column;gap:1rem}
.message{max-width:80%;padding:.85rem 1.15rem;border-radius:18px;font-size:.95rem;line-height:1.5}
.message.user{align-self:flex-end;background:var(--accent-gradient);color:#fff;border-bottom-right-radius:6px}
.message.ai{align-self:flex-start;background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-primary);border-bottom-left-radius:6px}
.message .msg-time{font-size:.7rem;opacity:.7;margin-top:4px}
.chat-input-area{padding:1rem 1.25rem;background:var(--bg-glass);backdrop-filter:blur(16px);border-top:1px solid var(--border-color)}
.chat-input-wrap{display:flex;gap:.75rem;align-items:flex-end}
.chat-input{flex:1;background:var(--bg-card);border:1px solid var(--border-color);border-radius:24px;padding:.75rem 1.25rem;color:var(--text-primary);resize:none;max-height:120px;font-size:.95rem}
.chat-input:focus{outline:none;border-color:var(--accent)}
.btn-send{width:48px;height:48px;border-radius:50%;background:var(--accent-gradient);color:#fff;border:none;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.btn-send:hover{transform:scale(1.08);color:#fff}
.btn-send:disabled{opacity:.5;transform:none}

.typing-indicator{display:flex;gap:5px;padding:.85rem 1.15rem;background:var(--bg-card);border:1px solid var(--border-color);border-radius:18px;border-bottom-left-radius:6px;width:fit-content}
.typing-indicator span{width:8px;height:8px;background:var(--text-muted);border-radius:50%;animation:typing-bounce 1.4s infinite ease-in-out}
.typing-indicator span:nth-child(2){animation-delay:.2s}
.typing-indicator span:nth-child(3){animation-delay:.4s}
@keyframes typing-bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}

.ai-badge{display:inline-flex;align-items:center;gap:5px;background:var(--accent-gradient);color:#fff;font-size:.7rem;font-weight:600;padding:3px 10px;border-radius:20px}
.page-content{padding:2rem 0 4rem}
.page-content h2{margin-bottom:1.5rem}
.page-content p{color:var(--text-secondary);margin-bottom:1rem}
.text-gradient{background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.glass-dropdown{background:var(--bg-glass)!important;backdrop-filter:blur(20px);border:1px solid var(--border-color)!important;border-radius:var(--radius-md)!important}
.glass-dropdown .dropdown-item{color:var(--text-secondary);font-size:.9rem}
.glass-dropdown .dropdown-item:hover{background:var(--bg-card);color:var(--text-primary)}
@media(max-width:767.98px){
  .hero{padding:2.5rem 0 3rem}
  .section{padding:2.5rem 0}
  .ai-card .card-img-wrap{aspect-ratio:4/5}
  .message{max-width:90%}
  /* Solid mobile menu background fix */
  .navbar-collapse{
    background:var(--bg-secondary)!important;
    border:1px solid var(--border-color);
    border-radius:16px;
    margin-top:12px;
    padding:16px;
    box-shadow:0 20px 40px rgba(0,0,0,.5);
  }
  .navbar-collapse .nav-link{padding:.7rem 1rem!important}
}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-hover);border-radius:3px}

/* Legal menu dropdown */
.navbar-nav .dropdown-menu.glass-dropdown{
  max-height: 70vh;
  overflow-y: auto;
  min-width: 220px;
}
.navbar-nav .dropdown-menu.glass-dropdown .dropdown-item{
  white-space: normal;
  line-height: 1.35;
  padding: .55rem 1rem;
}


/* Ad slots from Admin Ads Manager */
.ad-slot {
  width: 100%;
  overflow: hidden;
  text-align: center;
  line-height: 1.4;
}
.ad-slot img {
  max-width: 100%;
  height: auto;
}
.ad-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
.ad-slot ins,
.ad-slot iframe {
  max-width: 100% !important;
}
@media (max-width: 576px) {
  .ad-slot {
    font-size: 0.9rem;
  }
}