/* ═══════════════════════════════════════════════════
   XERI HERO WIDGET — Full CSS with Mobile Fix v2
   Add this to /var/www/cyberacademy/css/xeri-hero.css
   (replace entire file)
═══════════════════════════════════════════════════ */

/* ── Widget container ──────────────────────────────── */
.xeri-hero-widget {
  width: 420px;
  max-height: 480px;
  background: #080c16;
  border: 1px solid rgba(0,212,170,.2);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0,212,170,.06),
    0 24px 64px rgba(0,0,0,.7),
    0 0 80px rgba(0,212,170,.06);
  position: relative;
  flex-shrink: 0;
  z-index: 2;
}
.xeri-hero-widget::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,212,170,.5), transparent);
}

/* ── Header ────────────────────────────────────────── */
.xeri-hero-header {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .75rem 1rem;
  background: linear-gradient(90deg, rgba(0,212,170,.08), transparent);
  border-bottom: 1px solid rgba(255,255,255,.05);
  flex-shrink: 0;
}
.xeri-hero-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00d4aa, #00a896);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  font-weight: 800;
  color: #0d1117;
  font-family: monospace;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(0,212,170,.4);
}
.xeri-hero-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.xeri-hero-name {
  font-family: monospace;
  font-size: .78rem;
  font-weight: 700;
  color: #00d4aa;
  letter-spacing: .04em;
}
.xeri-hero-status {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-family: monospace;
  font-size: .6rem;
  color: #8b949e;
  margin-top: .1rem;
}
.xeri-hero-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #00d4aa;
  display: inline-block;
  animation: xhDot 2s infinite;
}
@keyframes xhDot {
  0%,100% { opacity:1; } 50% { opacity:.3; }
}
.xeri-hero-badge-live {
  font-family: monospace;
  font-size: .55rem;
  font-weight: 800;
  color: #0d1117;
  background: #00d4aa;
  padding: .15rem .45rem;
  border-radius: 4px;
  letter-spacing: .08em;
  animation: xhLive 2s infinite;
}
@keyframes xhLive {
  0%,100% { opacity:1; } 50% { opacity:.6; }
}

/* ── Messages ──────────────────────────────────────── */
.xeri-hero-messages {
  flex: 1;
  overflow-y: auto;
  padding: .85rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  min-height: 180px;
  max-height: 240px;
}
.xeri-hero-messages::-webkit-scrollbar { width: 3px; }
.xeri-hero-messages::-webkit-scrollbar-thumb {
  background: rgba(0,212,170,.2);
  border-radius: 2px;
}
.xh-msg {
  display: flex;
  flex-direction: column;
  max-width: 90%;
  animation: xhMsgIn .25s ease both;
}
@keyframes xhMsgIn {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}
.xh-msg.xh-bot  { align-self: flex-start; }
.xh-msg.xh-user { align-self: flex-end; }

.xh-bubble {
  padding: .5rem .75rem;
  border-radius: 10px;
  font-size: .75rem;
  line-height: 1.6;
  word-break: break-word;
}
.xh-bot .xh-bubble {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  color: #c9d1d9;
  border-bottom-left-radius: 3px;
}
.xh-bot .xh-bubble strong { color: #00d4aa; }
.xh-bot .xh-bubble a { color: #00d4aa; text-decoration: none; }
.xh-bot .xh-bubble a:hover { text-decoration: underline; }
.xh-user .xh-bubble {
  background: rgba(0,212,170,.1);
  border: 1px solid rgba(0,212,170,.2);
  color: #e6edf3;
  border-bottom-right-radius: 3px;
}

/* ── Typing indicator ──────────────────────────────── */
.xh-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: .45rem .75rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  border-bottom-left-radius: 3px;
  width: fit-content;
}
.xh-typing span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #00d4aa;
  animation: xhType 1.2s infinite;
}
.xh-typing span:nth-child(2) { animation-delay: .2s; }
.xh-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes xhType {
  0%,60%,100% { opacity:.2; transform:translateY(0); }
  30%          { opacity:1;  transform:translateY(-3px); }
}

/* ── Suggestions ───────────────────────────────────── */
.xeri-hero-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding: 0 .85rem .5rem;
  flex-shrink: 0;
}
.xh-suggestion {
  font-family: monospace;
  font-size: .62rem;
  color: #00d4aa;
  background: rgba(0,212,170,.06);
  border: 1px solid rgba(0,212,170,.2);
  border-radius: 999px;
  padding: .2rem .65rem;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.xh-suggestion:hover {
  background: rgba(0,212,170,.15);
  border-color: rgba(0,212,170,.4);
}

/* ── Input ─────────────────────────────────────────── */
.xeri-hero-input-wrap {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .75rem;
  border-top: 1px solid rgba(255,255,255,.05);
  background: rgba(255,255,255,.02);
  flex-shrink: 0;
}
#xeriHeroInput {
  flex: 1;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  color: #e6edf3;
  font-size: .75rem;
  font-family: inherit;
  padding: .4rem .65rem;
  outline: none;
  transition: border-color .2s;
  min-width: 0;
}
#xeriHeroInput:focus { border-color: rgba(0,212,170,.4); }
#xeriHeroInput::placeholder { color: #555; }

#xeriHeroSend {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #00d4aa, #00a896);
  border: none;
  cursor: pointer;
  color: #0d1117;
  font-size: .9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .15s, background .2s;
  box-shadow: 0 2px 8px rgba(0,212,170,.3);
}
#xeriHeroSend:hover   { transform: scale(1.05); background: #00b894; }
#xeriHeroSend:disabled { background: #1e2d2a; color: #555; cursor: not-allowed; transform: none; }

/* ── Footer ────────────────────────────────────────── */
.xeri-hero-footer {
  text-align: center;
  font-family: monospace;
  font-size: .62rem;
  color: #555;
  padding: .35rem .75rem .55rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
}
#xhVisitorCount {
  color: #8b949e;
  font-family: monospace;
  font-size: .6rem;
}

/* ══════════════════════════════════════════════════
   DESKTOP: widget sits beside hero content (current)
══════════════════════════════════════════════════ */
@media (min-width: 769px) {
  .xeri-hero-widget {
    position: absolute;
    right: max(40px, calc(50% - 600px + 40px));
    top: 50%;
    transform: translateY(-50%);
    width: 420px;
  }
}

/* ══════════════════════════════════════════════════
   MOBILE FIX: stack below hero content, full width
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .xeri-hero-widget {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: calc(100% - 2rem) !important;
    max-width: 100% !important;
    margin: 1.5rem auto 0 !important;
    max-height: 420px;
  }
  .xeri-hero-messages {
    min-height: 150px;
    max-height: 200px;
  }
  .xh-suggestion { font-size: .58rem; }
}

@media (max-width: 480px) {
  .xeri-hero-widget {
    width: 100% !important;
    margin: 1rem 0 0 !important;
    border-radius: 12px;
  }
  .xeri-hero-messages { max-height: 180px; }
}

/* ── Widget inside .container — desktop absolute, mobile flow ── */
@media (min-width: 769px) {
  .hero .container {
    position: relative;
  }
  .xeri-hero-widget {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 400px !important;
    margin: 0 !important;
  }
  .hero-content {
    max-width: 55% !important;
  }
}

@media (max-width: 768px) {
  .xeri-hero-widget {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 1.5rem 0 0 !important;
  }
  .hero-content {
    max-width: 100% !important;
  }
}