/*
Theme Name: CYBE AI Theme
Theme URI: https://example.com/cybe-ai-theme
Author: CYBE AI
Description: Neumorphism dark/light theme built for the CYBE AI chatbot plugin. Brand color #0000ff.
Version: 1.0.0
Text Domain: cybe-ai-theme
Requires PHP: 7.4
*/

:root{
  --brand:#0000ff;
  --brand-glow:rgba(0,0,255,.45);
}

/* Dark (default) */
body{
  --bg:#1e1e2e; --s1:#14141f; --s2:#28283d; --txt:#e7e7f3; --txt-dim:#9494ab;
  background:var(--bg); color:var(--txt);
  font-family:'Inter','Nunito',-apple-system,sans-serif;
  margin:0; transition:background .3s ease,color .3s ease;
}
body.cybe-light{
  --bg:#e0e5ec; --s1:#b8bec7; --s2:#ffffff; --txt:#2a2a3a; --txt-dim:#6b6b7d;
}

*{box-sizing:border-box;}
a{color:var(--brand); text-decoration:none;}

.cybe-neu{
  background:var(--bg);
  box-shadow:6px 6px 12px var(--s1), -6px -6px 12px var(--s2);
  border-radius:20px; border:none;
}
.cybe-neu-in{
  background:var(--bg);
  box-shadow:inset 4px 4px 8px var(--s1), inset -4px -4px 8px var(--s2);
  border-radius:20px;
}

/* Site header */
.cybe-site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 5%;
}
.cybe-logo{font-weight:800; font-size:20px; color:var(--txt); letter-spacing:.3px;}
.cybe-logo span{color:var(--brand);}
.cybe-nav a{margin-left:22px; color:var(--txt-dim); font-size:14px; transition:color .2s;}
.cybe-nav a:hover{color:var(--brand);}
.cybe-theme-switch{
  width:38px;height:38px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer; color:var(--txt-dim);
}
.cybe-theme-switch:active{
  box-shadow:inset 3px 3px 6px var(--s1), inset -3px -3px 6px var(--s2);
}

/* Hero */
.cybe-hero{
  display:flex; flex-wrap:wrap; align-items:center; gap:40px;
  padding:70px 5% 90px; max-width:1200px; margin:0 auto;
}
.cybe-hero-text{flex:1 1 420px;}
.cybe-hero-text h1{font-size:44px; line-height:1.15; margin:0 0 18px;}
.cybe-hero-text h1 span{color:var(--brand);}
.cybe-hero-text p{color:var(--txt-dim); font-size:17px; max-width:480px; margin-bottom:28px;}
.cybe-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px; border-radius:16px; font-weight:600; font-size:15px;
  background:var(--brand); color:#fff; cursor:pointer;
  box-shadow:6px 6px 16px var(--brand-glow);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1);
  border:none;
}
.cybe-btn:hover{transform:translateY(-3px);}
.cybe-btn:active{transform:scale(.95);}
.cybe-btn-outline{
  background:var(--bg); color:var(--txt);
  box-shadow:6px 6px 14px var(--s1), -6px -6px 14px var(--s2);
  margin-left:12px;
}

.cybe-hero-demo{
  flex:1 1 360px; min-height:420px; border-radius:28px;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.cybe-hero-demo::before{
  content:""; position:absolute; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle,var(--brand-glow),transparent 70%);
  filter:blur(10px); animation:cybeGlow 4s ease-in-out infinite;
}
@keyframes cybeGlow{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.cybe-hero-demo img,.cybe-hero-demo svg{position:relative; z-index:1;}

/* Features */
.cybe-features{
  max-width:1200px; margin:0 auto; padding:0 5% 90px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:24px;
}
.cybe-feature-card{
  padding:28px 22px; border-radius:22px;
  transition:transform .25s ease;
}
.cybe-feature-card:hover{transform:translateY(-6px);}
.cybe-feature-card .icon{
  width:50px;height:50px;border-radius:14px; margin-bottom:16px;
  display:flex;align-items:center;justify-content:center; color:var(--brand);
  box-shadow:inset 3px 3px 6px var(--s1), inset -3px -3px 6px var(--s2);
}
.cybe-feature-card h3{margin:0 0 8px; font-size:17px;}
.cybe-feature-card p{margin:0; color:var(--txt-dim); font-size:14px; line-height:1.5;}

/* Full-page chat template */
.cybe-chat-page{
  max-width:900px; margin:40px auto; padding:0 20px 60px;
  min-height:80vh; display:flex; flex-direction:column;
}
.cybe-chat-page-frame{
  flex:1; border-radius:26px; padding:0; overflow:hidden;
  display:flex; flex-direction:column; min-height:70vh;
}

footer.cybe-footer{
  text-align:center; padding:30px 5%; color:var(--txt-dim); font-size:13px;
}

@media(max-width:640px){
  .cybe-hero{padding:40px 5% 60px;}
  .cybe-hero-text h1{font-size:32px;}
  .cybe-nav{display:none;}
}

/* ── Home full-page chat ─────────────────────────────────────────────── */
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
.cybe-home-chat {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Homepage: chat only, zero chrome ───────────────────────────────── */
body.cybe-home-chat {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
}

/* Make the widget fill the full viewport */
body.cybe-home-chat .cybe-ai-widget {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 9999 !important;
}

/* Make the panel fill the widget */
body.cybe-home-chat .cybe-panel {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

/* Messages area fills remaining space */
body.cybe-home-chat .cybe-messages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
}

/* Hide the FAB toggle and minimize button — not needed fullscreen */
body.cybe-home-chat .cybe-fab,
body.cybe-home-chat #cybe-ai-toggle,
body.cybe-home-chat #cybe-minimize {
  display: none !important;
}