*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0a0a0a;
  --bg-card:#111114;
  --bg-card-hover:#18181d;
  --purple:#7B2FBE;
  --purple-light:#a855f7;
  --purple-bright:#c084fc;
  --purple-dim:#5b1d99;
  --purple-glow:rgba(123,47,190,0.5);
  --text:#E8E8E8;
  --text-dim:#777;
  --text-bright:#fff;
  --radius:10px;
  --radius-sm:6px;
}

html{font-size:16px;scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

.app{min-height:100vh}

/* ═══════════════════════════════════════
   HERO — FREEZA CENTER STAGE
   ═══════════════════════════════════════ */
.hero{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:80vh;
  overflow:hidden;
  padding:40px 16px 20px;
  gap:0;
  flex-direction:column;
}

.hero-bg{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at center top,rgba(123,47,190,0.08) 0%,transparent 60%);
  pointer-events:none;
}

/* ─── AMBIENT PARTICLES (always on) ─── */
.ambient-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ambient-particles i{
  position:absolute;display:block;
  width:2px;height:2px;border-radius:50%;
  background:var(--purple-light);
  animation:ambientFloat 6s ease-in-out infinite;
}
.ambient-particles i:nth-child(1){left:5%;top:80%;animation-delay:0s}
.ambient-particles i:nth-child(2){left:12%;top:70%;animation-delay:.5s;width:3px;height:3px}
.ambient-particles i:nth-child(3){left:20%;top:85%;animation-delay:1s}
.ambient-particles i:nth-child(4){left:30%;top:75%;animation-delay:1.5s;width:4px;height:4px}
.ambient-particles i:nth-child(5){left:38%;top:90%;animation-delay:2s}
.ambient-particles i:nth-child(6){left:48%;top:80%;animation-delay:2.5s;width:3px;height:3px}
.ambient-particles i:nth-child(7){left:55%;top:70%;animation-delay:3s}
.ambient-particles i:nth-child(8){left:65%;top:85%;animation-delay:3.5s;width:4px;height:4px}
.ambient-particles i:nth-child(9){left:72%;top:75%;animation-delay:4s}
.ambient-particles i:nth-child(10){left:80%;top:90%;animation-delay:4.5s;width:3px;height:3px}
.ambient-particles i:nth-child(11){left:88%;top:80%;animation-delay:5s}
.ambient-particles i:nth-child(12){left:95%;top:70%;animation-delay:5.5s;width:2px;height:2px}
.ambient-particles i:nth-child(13){left:8%;top:60%;animation-delay:.3s;width:3px;height:3px}
.ambient-particles i:nth-child(14){left:25%;top:65%;animation-delay:.8s}
.ambient-particles i:nth-child(15){left:42%;top:60%;animation-delay:1.3s;width:4px;height:4px}
.ambient-particles i:nth-child(16){left:58%;top:65%;animation-delay:1.8s}
.ambient-particles i:nth-child(17){left:75%;top:60%;animation-delay:2.3s;width:3px;height:3px}
.ambient-particles i:nth-child(18){left:90%;top:65%;animation-delay:2.8s}
.ambient-particles i:nth-child(19){left:15%;top:50%;animation-delay:3.3s;width:2px;height:2px}
.ambient-particles i:nth-child(20){left:35%;top:55%;animation-delay:3.8s}
.ambient-particles i:nth-child(21){left:52%;top:50%;animation-delay:4.3s;width:3px;height:3px}
.ambient-particles i:nth-child(22){left:68%;top:55%;animation-delay:4.8s}
.ambient-particles i:nth-child(23){left:82%;top:50%;animation-delay:5.3s;width:4px;height:4px}
.ambient-particles i:nth-child(24){left:3%;top:45%;animation-delay:.2s}
.ambient-particles i:nth-child(25){left:45%;top:40%;animation-delay:1.2s;width:3px;height:3px}
.ambient-particles i:nth-child(26){left:62%;top:45%;animation-delay:2.2s}
.ambient-particles i:nth-child(27){left:78%;top:40%;animation-delay:3.2s;width:2px;height:2px}
.ambient-particles i:nth-child(28){left:18%;top:35%;animation-delay:4.2s}
.ambient-particles i:nth-child(29){left:50%;top:30%;animation-delay:5.2s;width:3px;height:3px}
.ambient-particles i:nth-child(30){left:85%;top:35%;animation-delay:0.7s}

@keyframes ambientFloat{
  0%{opacity:0;transform:translateY(0) scale(.5)}
  15%{opacity:.5}
  50%{opacity:.7}
  85%{opacity:.3}
  100%{opacity:0;transform:translateY(-120px) scale(0)}
}

/* ─── FREEZA CONTAINER ─── */
.freeza-container{
  position:relative;
  width:320px;
  max-width:80vw;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* ─── AURA (always on, intensifies when speaking) ─── */
.aura{
  position:absolute;
  top:-30px;left:-40px;right:-40px;bottom:-20px;
  border-radius:50%;
  background:radial-gradient(ellipse at center 40%,rgba(123,47,190,0.12) 0%,rgba(123,47,190,0.04) 50%,transparent 70%);
  animation:auraIdle 4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes auraIdle{
  0%,100%{transform:scale(1);opacity:.6}
  50%{transform:scale(1.03);opacity:.9}
}
.speaking .aura{
  animation:auraSpeaking 1.2s ease-in-out infinite;
  background:radial-gradient(ellipse at center 40%,rgba(123,47,190,0.25) 0%,rgba(168,85,247,0.1) 50%,transparent 70%);
}
@keyframes auraSpeaking{
  0%,100%{transform:scale(1);opacity:.7}
  50%{transform:scale(1.08);opacity:1}
}

/* ─── FREEZA BODY ─── */
.freeza-body{
  position:relative;
  animation:idleBob 4s ease-in-out infinite;
}
@keyframes idleBob{
  0%,100%{transform:translateY(0) scale(1)}
  25%{transform:translateY(-4px) scale(1.003)}
  50%{transform:translateY(-8px) scale(1.006)}
  75%{transform:translateY(-4px) scale(1.003)}
}
.speaking .freeza-body{
  animation:speakingBob 1.8s ease-in-out infinite;
}
@keyframes speakingBob{
  0%,100%{transform:translateY(0) scale(1)}
  30%{transform:translateY(-12px) scale(1.01)}
  60%{transform:translateY(-6px) scale(1.005)}
}

.freeza-img{
  width:100%;
  display:block;
  border-radius:12px;
  filter:brightness(0.9) saturate(1.1) drop-shadow(0 0 30px rgba(123,47,190,0.3));
  transition:filter .4s ease;
}
.speaking .freeza-img{
  filter:brightness(1.05) saturate(1.3) drop-shadow(0 0 50px rgba(123,47,190,0.6));
}

/* ─── ENERGY BAR ─── */
.energy-bar-track{
  width:70%;
  height:3px;
  background:rgba(123,47,190,0.12);
  border-radius:2px;
  margin-top:12px;
  overflow:hidden;
}
.energy-bar{
  height:100%;
  width:30%;
  background:linear-gradient(90deg,var(--purple),var(--purple-light));
  border-radius:2px;
  box-shadow:0 0 8px var(--purple-glow);
  animation:energyIdle 3s ease-in-out infinite;
}
@keyframes energyIdle{
  0%,100%{width:20%;opacity:.5}
  50%{width:40%;opacity:.8}
}
.speaking .energy-bar{
  animation:energySpeaking .5s ease-in-out infinite alternate;
}
@keyframes energySpeaking{
  0%{width:25%;box-shadow:0 0 6px var(--purple-glow)}
  100%{width:95%;box-shadow:0 0 20px rgba(168,85,247,0.8)}
}

/* ═══════════════════════════════════════
   CHAT
   ═══════════════════════════════════════ */
.chat-area{
  position:relative;
  z-index:3;
  width:100%;
  max-width:560px;
  margin-top:20px;
}

.chat-messages{
  max-height:200px;
  overflow-y:auto;
  padding:8px 4px;
  display:flex;
  flex-direction:column;
  gap:8px;
  scrollbar-width:thin;
  scrollbar-color:rgba(123,47,190,0.3) transparent;
}

.chat-msg{
  padding:8px 14px;
  border-radius:var(--radius);
  font-size:.85rem;
  line-height:1.4;
  max-width:85%;
  animation:msgIn .3s ease;
}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.chat-msg.freeza{
  background:rgba(123,47,190,0.15);
  border:1px solid rgba(123,47,190,0.2);
  color:var(--purple-bright);
  align-self:flex-start;
}
.chat-msg.user{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  color:var(--text);
  align-self:flex-end;
}

.chat-input-row{
  display:flex;
  gap:8px;
  margin-top:8px;
}
.chat-input-row input{
  flex:1;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(123,47,190,0.2);
  color:var(--text);
  padding:10px 14px;
  border-radius:var(--radius);
  font-size:.85rem;
  outline:none;
  transition:border-color .2s;
}
.chat-input-row input:focus{border-color:var(--purple)}
.chat-input-row input::placeholder{color:var(--text-dim)}
.btn-send{
  background:var(--purple);
  color:#fff;
  border:none;
  width:42px;
  border-radius:var(--radius);
  font-size:1rem;
  cursor:pointer;
  transition:all .2s;
}
.btn-send:hover{background:var(--purple-light);box-shadow:0 0 16px var(--purple-glow)}

/* ═══════════════════════════════════════
   NAV
   ═══════════════════════════════════════ */
.main-nav{
  display:flex;
  align-items:center;
  gap:16px;
  padding:12px 24px;
  border-top:1px solid rgba(123,47,190,0.08);
  border-bottom:1px solid rgba(123,47,190,0.08);
  background:rgba(10,10,10,0.95);
  position:sticky;
  top:0;
  z-index:50;
}
.nav-brand{
  font-size:.9rem;
  font-weight:900;
  letter-spacing:5px;
  background:linear-gradient(135deg,#fff,var(--purple-bright));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.nav-tabs{display:flex;gap:4px;margin-left:16px}
.nav-tab{
  padding:6px 14px;border-radius:var(--radius-sm);
  color:var(--text-dim);text-decoration:none;
  font-size:.8rem;font-weight:600;letter-spacing:.5px;
  transition:all .2s;
}
.nav-tab:hover{color:var(--text)}
.nav-tab.active{color:var(--text-bright);background:rgba(123,47,190,0.12)}
.nav-status{margin-left:auto;font-size:.7rem;color:var(--purple-light)}

/* ═══════════════════════════════════════
   CONTENT
   ═══════════════════════════════════════ */
.content{padding:20px 24px 40px}

.content-header{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:12px;margin-bottom:16px;
}
.content-header h2{font-size:1.2rem;font-weight:700;color:var(--text-bright)}
.project-count{
  font-size:.75rem;color:var(--text-dim);
  background:rgba(123,47,190,0.1);padding:2px 8px;border-radius:20px;
}
.search-bar input{
  background:var(--bg-card);border:1px solid rgba(123,47,190,0.12);
  color:var(--text);padding:8px 12px;border-radius:var(--radius);
  font-size:.8rem;width:220px;outline:none;
  transition:border-color .2s;
}
.search-bar input:focus{border-color:var(--purple)}
.search-bar input::placeholder{color:var(--text-dim)}

.section-subtitle{
  font-size:.75rem;color:var(--text-dim);margin:20px 0 10px;
  font-weight:700;letter-spacing:2px;text-transform:uppercase;
}

/* ─── PROJECT CARDS ─── */
.projects-highlighted,.projects-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:10px;
}
.projects-highlighted{margin-bottom:4px}

.project-card{
  background:var(--bg-card);
  border:1px solid rgba(123,47,190,0.06);
  border-radius:var(--radius);
  padding:14px;
  cursor:default;
  position:relative;
  overflow:hidden;
  transition:all .2s;
}
.project-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--purple-dim),transparent);
  opacity:0;transition:opacity .2s;
}
.project-card:hover{
  border-color:rgba(123,47,190,0.2);
  background:var(--bg-card-hover);
  transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(123,47,190,0.05);
}
.project-card:hover::before{opacity:1}

.project-card.highlighted{
  border-color:rgba(123,47,190,0.25);
  background:linear-gradient(135deg,var(--bg-card),rgba(123,47,190,0.03));
}
.project-card.highlighted::before{
  opacity:1;
  background:linear-gradient(90deg,var(--purple),var(--purple-light),var(--purple));
}

.card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.card-name{font-size:.85rem;font-weight:600;color:var(--text-bright)}
.card-badge{
  font-size:.5rem;text-transform:uppercase;letter-spacing:1.5px;font-weight:700;
  background:rgba(123,47,190,0.2);color:var(--purple-light);
  padding:2px 6px;border-radius:3px;
}
.card-desc{
  font-size:.72rem;color:var(--text-dim);line-height:1.4;margin-bottom:10px;
  max-height:36px;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.card-actions{display:flex;gap:6px}
.btn{
  font-size:.68rem;padding:4px 8px;border-radius:var(--radius-sm);
  border:none;cursor:pointer;font-weight:600;transition:all .2s;
}
.btn-primary{background:var(--purple-dim);color:var(--text-bright)}
.btn-primary:hover{background:var(--purple)}
.btn-secondary{background:rgba(123,47,190,0.08);color:var(--purple-light);border:1px solid rgba(123,47,190,0.12)}
.btn-secondary:hover{background:rgba(123,47,190,0.15)}

.note-indicator{
  position:absolute;top:8px;right:8px;
  width:5px;height:5px;border-radius:50%;
  background:var(--purple-light);
  box-shadow:0 0 4px var(--purple-light);
}

/* ─── VIBE VOX ─── */
.vibevox-container{max-width:500px}
.vibevox-header{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.vibevox-header h2{font-size:1.2rem;color:var(--text-bright);font-weight:700}
.vibevox-status{font-size:.7rem;padding:3px 10px;border-radius:20px;font-weight:600}
.vibevox-status.online{background:rgba(34,197,94,0.12);color:#4ade80}
.vibevox-status.offline{background:rgba(239,68,68,0.12);color:#f87171}
.vibevox-status.checking{background:rgba(123,47,190,0.12);color:var(--purple-light)}
.vibevox-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.info-card{
  background:var(--bg-card);border:1px solid rgba(123,47,190,0.06);
  border-radius:var(--radius-sm);padding:12px;
}
.info-label{display:block;font-size:.6rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:2px}
.info-value{font-size:.8rem;color:var(--text-bright);font-weight:600}

/* ─── MODAL ─── */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.8);
  display:flex;justify-content:center;align-items:center;
  z-index:500;backdrop-filter:blur(4px);
}
.modal{
  background:var(--bg-card);border:1px solid rgba(123,47,190,0.15);
  border-radius:var(--radius);padding:20px;
  width:90%;max-width:460px;
}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.modal-header h3{color:var(--text-bright);font-size:.95rem;font-weight:600}
.modal-close{background:none;border:none;color:var(--text-dim);font-size:1rem;cursor:pointer}
.modal-close:hover{color:var(--text-bright)}
#notesTextarea{
  width:100%;height:120px;resize:vertical;
  background:var(--bg);border:1px solid rgba(123,47,190,0.12);
  color:var(--text);padding:10px;border-radius:var(--radius-sm);
  font-family:inherit;font-size:.8rem;outline:none;margin-bottom:10px;
}
#notesTextarea:focus{border-color:var(--purple)}
.btn-save{
  background:var(--purple);color:#fff;border:none;
  padding:8px 18px;border-radius:var(--radius-sm);
  font-size:.8rem;font-weight:700;cursor:pointer;
}
.btn-save:hover{background:var(--purple-light)}

.hidden{display:none!important}

/* ─── TOAST ─── */
.toast{
  position:fixed;bottom:16px;right:16px;
  background:var(--bg-card);border:1px solid var(--purple-dim);
  color:var(--text-bright);padding:10px 16px;
  border-radius:var(--radius-sm);font-size:.8rem;
  box-shadow:0 4px 20px rgba(0,0,0,0.5);
  z-index:600;animation:slideIn .3s ease;
}
@keyframes slideIn{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media(max-width:600px){
  .hero{min-height:70vh;padding:24px 16px 16px}
  .freeza-container{width:260px}
  .chat-area{max-width:100%}
  .content{padding:16px}
  .content-header{flex-direction:column;align-items:flex-start}
  .search-bar input{width:100%}
  .projects-highlighted,.projects-grid{grid-template-columns:1fr}
  .main-nav{padding:10px 16px;gap:8px}
  .nav-brand{font-size:.75rem;letter-spacing:3px}
  .nav-tab{font-size:.72rem;padding:5px 10px}
  .vibevox-info{grid-template-columns:1fr}
}