/* ============================================================
   PRIMUS AI — Premium Gold/Dark Theme
   Global layout, navigation, cards, animations, responsive
   ============================================================ */

/* --- Custom Properties & CSS Houdini --- */
@property --angle { syntax:'<angle>'; initial-value:130deg; inherits:false; }

:root {
  --bg:#06070b; --bg-card:rgba(10,11,16,0.88);
  --g1:#d4952a; --g2:#f0c96a; --g3:#fde8a0; --g4:#c07a18;
  --gold-grad:linear-gradient(110deg,#f0c96a,#fde8a0,#d4952a,#f5d87a,#c07a18);
  --neon:conic-gradient(from var(--angle),transparent 0%,transparent 70%,rgba(240,201,106,.35) 76%,rgba(253,232,160,.5) 80%,rgba(212,149,42,.35) 84%,transparent 90%,transparent 100%);
  --t1:#f0ece2; --t2:#9a9589; --t3:#5a564e;
  --fd:'Playfair Display',serif; --fb:'Cormorant Garamond',serif; --fs:system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.18,.9,.2,1);
}

/* --- Global Keyframes --- */
@keyframes spin{to{--angle:490deg}}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes sheen{0%{left:-100%}100%{left:200%}}
@keyframes orb{0%,100%{transform:translate(0,0) scale(1);opacity:.15}50%{transform:translate(10px,-10px) scale(1.1);opacity:.25}}
@keyframes spinTravel{to{transform:rotate(360deg)}}
@keyframes arrowPulse{0%,100%{opacity:.5;filter:drop-shadow(0 0 4px rgba(240,201,106,.3));transform:translateX(0)}50%{opacity:1;filter:drop-shadow(0 0 18px rgba(240,201,106,.8)) drop-shadow(0 0 35px rgba(212,149,42,.4));transform:translateX(3px)}}

/* --- Reset --- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* --- Body & Background --- */
body{font-family:var(--fs);background:var(--bg);color:var(--t1);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;position:relative}
body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(rgba(212,149,42,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(212,149,42,.03) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,black 20%,transparent 70%);pointer-events:none;z-index:0}

/* --- Orb Decorations --- */
.orb{position:fixed;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0}
.o1{width:300px;height:300px;background:rgba(240,201,106,.06);top:-100px;right:-100px;animation:orb 8s ease-in-out infinite}
.o2{width:250px;height:250px;background:rgba(212,149,42,.05);bottom:-80px;left:-80px;animation:orb 10s ease-in-out infinite 2s}
.o3{width:200px;height:200px;background:rgba(192,122,24,.04);top:50%;left:50%;transform:translate(-50%,-50%);animation:orb 12s ease-in-out infinite 4s}

/* --- Hero Section --- */
.hero{position:relative;min-height:42vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 20px 30px;z-index:1}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(212,149,42,.07) 0%,transparent 70%);pointer-events:none}
.hero::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 10%,#f0c96a 50%,transparent 90%);opacity:.5}
.hero-logo{width:70px;height:70px;margin-bottom:16px;opacity:0;animation:fadeUp .8s .2s var(--ease) forwards}
.hero-logo svg{width:100%;height:100%}
.hero h1{font-family:var(--fd);font-size:clamp(2rem,5vw,3.2rem);font-weight:400;letter-spacing:.3em;color:var(--t1);opacity:0;animation:fadeUp .8s .4s var(--ease) forwards}
.hero h1 span{display:block;font-family:var(--fb);font-size:.45em;letter-spacing:.5em;background:var(--gold-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-style:italic;margin-top:6px}
.hero-sub{font-family:var(--fb);font-size:1.05rem;color:var(--t2);max-width:500px;line-height:1.7;margin-top:14px;opacity:0;animation:fadeUp .8s .6s var(--ease) forwards}
.hero-sub strong{background:var(--gold-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:600}

/* --- Card System (nc = card wrapper, ni = inner, etc.) --- */
.nc{position:relative;border-radius:28px;padding:1px;background:rgba(212,149,42,.22);cursor:pointer;transition:transform .4s var(--ease),box-shadow .4s;transform-style:preserve-3d;perspective:1800px;overflow:hidden}
.nc::before{content:'';position:absolute;inset:-50%;width:200%;height:200%;background:conic-gradient(from 0deg at 50% 50%,transparent 0%,transparent 78%,rgba(240,201,106,.45) 84%,rgba(253,232,160,.6) 86%,rgba(212,149,42,.45) 88%,transparent 92%,transparent 100%);animation:spinTravel 4s linear infinite;z-index:0}
.nc::after{content:'';position:absolute;inset:-50%;width:200%;height:200%;background:conic-gradient(from 0deg at 50% 50%,transparent 0%,transparent 78%,rgba(240,201,106,.12) 84%,rgba(253,232,160,.18) 86%,rgba(212,149,42,.12) 88%,transparent 92%,transparent 100%);animation:spinTravel 4s linear infinite;filter:blur(18px);z-index:0}
.nc:hover{box-shadow:0 8px 40px rgba(212,149,42,.12)}
.ni{background:radial-gradient(130% 200% at 18% 0%,rgba(230,183,112,0.14),transparent 45%),linear-gradient(rgba(16,16,18,0.94),rgba(5,5,7,0.94));backdrop-filter:blur(18px);border-radius:26px;padding:26px;display:flex;align-items:center;justify-content:space-between;position:relative;overflow:hidden;transition:background .3s;z-index:1;gap:18px}
.ni::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(240,201,106,.06),transparent);pointer-events:none}
.nc:hover .ni::after{animation:sheen .8s ease forwards}
.gd{width:6px;height:6px;background:var(--g2);border-radius:50%;animation:pulse 2s ease-in-out infinite;flex-shrink:0;margin-right:14px}
@keyframes pulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}

/* --- Category Grid --- */
.cats{max-width:980px;margin:0 auto;padding:10px 20px 40px;z-index:1;position:relative}
.cats-label{font-family:var(--fb);font-size:.95rem;color:var(--t3);text-align:center;letter-spacing:.05em;margin-bottom:24px;opacity:0;animation:fadeUp .8s .7s var(--ease) forwards}
.ci{margin-bottom:18px;opacity:0;animation:fadeUp .8s var(--ease) forwards;text-decoration:none;color:inherit;display:block}
.ci:nth-child(2){animation-delay:.8s}.ci:nth-child(3){animation-delay:.85s}.ci:nth-child(4){animation-delay:.9s}.ci:nth-child(5){animation-delay:.95s}.ci:nth-child(6){animation-delay:1s}
.cf{display:flex;align-items:center;flex:1}
.ct h3{font-family:var(--fd);font-size:34px;font-weight:850;background:var(--gold-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:0.2px;margin-bottom:5px;line-height:1.12}
.ct p{font-family:var(--fs);font-size:16px;color:rgba(237,237,237,0.62);font-weight:400;line-height:1.35}
.ca{font-size:34px;background:var(--gold-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;flex-shrink:0;margin-left:12px;transition:transform .3s var(--ease);animation:arrowPulse 1.5s ease-in-out infinite;filter:drop-shadow(0 0 6px rgba(240,201,106,.5))}
.nc:hover .ca{transform:translateX(8px);animation:none;opacity:1;filter:drop-shadow(0 0 20px rgba(240,201,106,.9)) drop-shadow(0 0 40px rgba(212,149,42,.5))}

/* --- Chat Section Wrapper --- */
.cs{max-width:980px;margin:0 auto;padding:0 20px 40px;z-index:1;position:relative;opacity:0;animation:fadeUp .8s 1.1s var(--ease) forwards}
.cw{position:relative;border-radius:16px;padding:1px;background:rgba(212,149,42,.22);overflow:hidden}
.cw::before{content:'';position:absolute;inset:-50%;width:200%;height:200%;background:conic-gradient(from 0deg at 50% 50%,transparent 0%,transparent 78%,rgba(240,201,106,.35) 84%,rgba(253,232,160,.5) 86%,rgba(212,149,42,.35) 88%,transparent 92%,transparent 100%);animation:spinTravel 4s linear infinite;z-index:0}
.cw::after{content:'';position:absolute;inset:-50%;width:200%;height:200%;background:conic-gradient(from 0deg at 50% 50%,transparent 0%,transparent 78%,rgba(240,201,106,.08) 84%,rgba(253,232,160,.12) 86%,rgba(212,149,42,.08) 88%,transparent 92%,transparent 100%);animation:spinTravel 4s linear infinite;filter:blur(18px);z-index:0}
.cc{background:var(--bg-card);backdrop-filter:blur(18px);border-radius:15px;overflow:hidden;position:relative;z-index:1}

/* --- Chat Input Area (shared by main + tool panels) --- */
.cia{display:flex;align-items:center;padding:14px 18px;border-top:1px solid rgba(212,149,42,.08);gap:10px}
.cin{flex:1;background:rgba(6,7,11,.6);border:1px solid rgba(212,149,42,.1);border-radius:10px;padding:13px 16px;font-family:var(--fs);font-size:.86rem;color:var(--t1);outline:none;transition:border-color .3s}
.cin::placeholder{color:var(--t3)}.cin:focus{border-color:rgba(212,149,42,.35)}

/* --- Gold Buttons --- */
.bg{position:relative;border:none;background:linear-gradient(90deg,#f0c96a,#d4952a);color:#06070b;cursor:pointer;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s}
.bg::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(253,232,160,.4),transparent);pointer-events:none}
.bg:hover{transform:translateY(-2px) rotateX(6deg);box-shadow:0 6px 25px rgba(212,149,42,.3)}
.bg:hover::after{animation:sheen .6s ease forwards}
.sb{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:700}
.sb:disabled{opacity:.3;cursor:not-allowed;transform:none!important}
.sb svg{width:17px;height:17px}

/* --- Main Chat Send Button --- */
.chat-send-btn{height:54px;padding:0 28px;font-size:16px;font-weight:700;font-family:var(--fs);color:#06070b;background:var(--gold-grad);background-size:200% 100%;border:1px solid rgba(240,201,106,0.5);border-radius:18px;cursor:pointer;flex-shrink:0;transition:transform .3s var(--ease),box-shadow .3s,background-position .4s;position:relative;overflow:hidden}
.chat-send-btn::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);pointer-events:none}
.chat-send-btn:hover{transform:translateY(-2px) rotateX(6deg);box-shadow:0 6px 25px rgba(212,149,42,.4);background-position:100% 0}
.chat-send-btn:hover::after{animation:sheen .6s ease forwards}

/* --- Disclaimer & Chat Area --- */
.cd2{text-align:center;font-size:13.5px;color:rgba(210,210,210,0.78);padding:0 20px 20px;font-family:var(--fs);line-height:1.55;max-width:980px;margin:0 auto}
.cd2 strong{color:var(--t1);font-weight:700}
.cd3{text-align:center;font-size:12px;color:rgba(237,237,237,0.45);padding:8px 20px 12px;font-family:var(--fs)}
.chat-area{max-width:980px;margin:0 auto;padding:0 20px 16px;display:flex;flex-direction:column;gap:6px}

/* --- View Panels --- */
.vp{display:none;max-width:980px;margin:0 auto;padding:20px;z-index:1;position:relative}
.vp.active{display:block;animation:fadeUp .5s var(--ease)}
.vh{display:flex;align-items:center;gap:12px;margin-bottom:28px;padding-bottom:18px;border-bottom:1px solid rgba(212,149,42,.1)}
.bb{background:none;border:1px solid rgba(212,149,42,.15);color:var(--t2);padding:8px 16px;border-radius:8px;cursor:pointer;font-family:var(--fs);font-size:.78rem;transition:all .3s}
.bb:hover{border-color:var(--g1);color:var(--g2)}
.vh h2{font-family:var(--fd);font-size:1.1rem;background:var(--gold-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:.04em}

/* --- Language Toggle --- */
.lt{position:fixed;bottom:20px;left:20px;display:flex;gap:5px;z-index:100}
.lb2{padding:5px 11px;border-radius:6px;border:1px solid rgba(212,149,42,.12);background:var(--bg-card);backdrop-filter:blur(10px);color:var(--t3);font-size:.7rem;cursor:pointer;transition:all .3s;font-family:var(--fs)}
.lb2.on{border-color:var(--g1);color:var(--g2);background:rgba(212,149,42,.08)}

/* --- Footer --- */
.ft{text-align:center;padding:40px 20px;border-top:1px solid rgba(212,149,42,.06);margin-top:30px;z-index:1;position:relative}
.ft p{font-size:.72rem;color:var(--t3);line-height:1.8;font-family:var(--fb)}
.ft a{background:var(--gold-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-decoration:none}

/* --- Tool Container (for dynamically loaded tools) --- */
.tool-container{animation:fadeUp .5s var(--ease)}
.tool-back-bar{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid rgba(212,149,42,.1)}
.tool-back-btn{background:none;border:1px solid rgba(212,149,42,.15);color:var(--t2);padding:8px 16px;border-radius:8px;cursor:pointer;font-family:var(--fs);font-size:.78rem;transition:all .3s}
.tool-back-btn:hover{border-color:var(--g1);color:var(--g2)}

/* --- Responsive --- */
@media(max-width:600px){
  .hero{padding:40px 16px 20px;min-height:32vh}
  .hero h1{letter-spacing:.18em}
  .ni{padding:18px 20px}
  .ct h3{font-size:.95rem}
}