/* Agent-style theme for Zisanda-hub app cards and hero */
:root{ /* keep defaults if themes.css not loaded */
  /* black background with blue accents */
  --agent-accent: #0066cc;
  --agent-accent-2: #3399ff;
  --agent-glow: rgba(0,102,204,0.18);
  --bg: #000000;
  --panel: #111111;
  --muted: #bbbbbb;
  --text: #ffffff;
  --card-bg: rgba(17,17,17,0.85);
  --card-border: var(--agent-accent);
  --card-shadow: 0 6px 30px rgba(0,0,0,0.5);
  --card-shadow-hover: 0 18px 40px rgba(0,0,0,0.6);
  --avatar-border: rgba(255,255,255,0.2);
  --badge-gradient: linear-gradient(90deg,var(--agent-accent),var(--agent-accent-2));
  --fab-shadow: 0 12px 30px rgba(0,102,204,0.3);
  --hero-bg: radial-gradient(closest-side at 10% 20%, rgba(0,102,204,0.15), transparent), radial-gradient(closest-side at 90% 80%, rgba(0,102,204,0.08), transparent);
}

body{
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}

/* focus outlines for keyboard users */
:focus {
  outline: 2px solid var(--agent-accent);
  outline-offset: 2px;
}

.hero-container{
  background: var(--hero-bg); /* only background is theme-specific, padding & color from base */
}

.site-title{
  font-weight:800;
  font-size:48px;
  letter-spacing:-0.02em;
  margin-bottom: 8px;
}

.card-grid{
  display:flex;
  gap:28px;
  justify-content:center;
  margin-top:42px;
}

.agent-card .label{
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin-bottom:6px;
}

.agent-card .icon{
  font-size:34px;
  margin-bottom:12px;
}

.agent-card .title{
  font-size:18px;
  font-weight:700;
  color:var(--text);
}

/* Agent avatar inside card */
.agent-avatar{
  width:64px;
  height:64px;
  border-radius:12px;
  box-shadow: 0 8px 18px rgba(7,18,51,0.08);
  margin-bottom:10px;
  transform-origin: center;
  transition: transform 280ms cubic-bezier(.2,.9,.2,1), box-shadow 200ms;
  -webkit-transition: transform 280ms cubic-bezier(.2,.9,.2,1), box-shadow 200ms;
  border: 2px solid var(--avatar-border);
}

.agent-card:hover .agent-avatar{
  transform: translateY(-6px) scale(1.06) rotate(-3deg);
  box-shadow: 0 20px 40px rgba(6,182,212,0.12);
}

/* subtle pulse behind avatar */
.agent-avatar::after{
  content: '';
  display:block;position:absolute;width:80px;height:80px;border-radius:14px;
}

/* small floating animation for avatars */
@keyframes floaty {
  0% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}
.agent-avatar{ animation: floaty 4s ease-in-out infinite; }

/* Agent badge */
.agent-badge{
  position:absolute;
  top:12px;
  left:12px;
  background: var(--badge-gradient);
  color:white;
  font-weight:700;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  box-shadow: 0 6px 18px rgba(6,182,212,0.08), 0 2px 6px rgba(6,182,212,0.06) inset;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.agent-badge:after{
  content:'';
  width:8px;height:8px;border-radius:50%;
  background:white;opacity:0.18;margin-left:6px;box-shadow:0 0 12px var(--agent-glow);
}

/* Pulsing avatar effect on cards */
.agent-card::before{
  content:'';
  position:absolute;
  right:14px;
  bottom:16px;
  width:42px;height:42px;border-radius:50%;
  background: conic-gradient(from 90deg, rgba(6,182,212,0.18), rgba(34,197,94,0.14));
  filter: blur(6px);
  opacity:0.9;
  transition: opacity .3s;
}

.agent-card:hover::before{
  transform: scale(1.12);
  opacity:1;
}

/* Floating Agent FAB style adjustments */
#agent-fab{
  background: var(--badge-gradient);
  border: none; color: white;
  width:56px;height:56px;display:flex;align-items:center;justify-content:center;
  box-shadow: var(--fab-shadow);
}

/* Make layout responsive */
@media (max-width:900px){
  .card-grid{flex-direction:column;align-items:center}
  .glass-card{width:86%;max-width:360px}
  .site-title{font-size:36px}
}

/* extra small screens tweaks */
@media (max-width:600px){
  .hero-container{padding:48px 24px;}
  .site-title{font-size:32px;}
}