/* ══════════════════════════════════════════════════════════════════
   erebus.css  —  Private AI Cofounder, Atlas Academy
   Theme: Void black / deep indigo / violet  (opposite of Pip)
   Author: Generated for Atlas Academy
   ══════════════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties ─────────────────────────────────────── */
:root {
  --e-void:       #050508;
  --e-bg:         #08070f;
  --e-bg2:        #0d0b1a;
  --e-bg3:        #120f22;
  --e-indigo:     #1a0a3e;
  --e-royal:      #2a0a5e;
  --e-violet:     #5a1a8e;
  --e-bright:     #7a2aae;
  --e-glow:       rgba(90, 26, 142, 0.18);
  --e-glow-str:   rgba(90, 26, 142, 0.50);
  --e-border:     rgba(90, 26, 142, 0.22);
  --e-border-str: rgba(90, 26, 142, 0.45);
  --e-text:       #c8b8e8;
  --e-muted:      rgba(180, 160, 220, 0.45);
  --e-user-bg:    rgba(26, 10, 62, 0.80);
  --e-msg-bg:     rgba(8, 7, 15, 0.85);
  --e-radius:     10px;
  --e-font-mono:  'Share Tech Mono', monospace;
  --e-font-body:  'Rajdhani', sans-serif;
  --e-font-head:  'Bebas Neue', sans-serif;
  --e-transition: 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Erebus Container ───────────────────────────────────────────── */
#erebus-wrap {
  transition: opacity 0.4s ease;
}

#erebus-container {
  position: relative;
  display: block;
}

#erebus-container.idle {
  filter:
    drop-shadow(0 0 5px  rgba(90, 26, 142, 0.28))
    drop-shadow(0 0 14px rgba(26, 10, 62,  0.38))
    drop-shadow(0 0 2px  rgba(26, 138, 158, 0.07));
  transition: filter 0.7s ease;
}

#erebus-container.attentive {
  filter:
    drop-shadow(0 0 9px  rgba(90, 26, 142, 0.58))
    drop-shadow(0 0 22px rgba(26, 10, 62,  0.65))
    drop-shadow(0 0 5px  rgba(26, 138, 158, 0.20));
}

/* ── HUD Panel ──────────────────────────────────────────────────── */
#erebus-hud {
  position:      fixed;
  bottom:        108px;           /* sits above the 76px sphere + 12px gap + 20px bottom offset */
  left:          20px;
  width:         320px;
  height:        420px;
  z-index:       99989;
  display:       none;            /* toggled via JS */
  flex-direction: column;
  background:    var(--e-void);
  border:        1px solid var(--e-border-str);
  border-radius: var(--e-radius);
  overflow:      hidden;
  box-shadow:
    0 0 0 1px rgba(90, 26, 142, 0.10),
    0 8px 32px rgba(0, 0, 0, 0.72),
    0 0 40px var(--e-glow),
    inset 0 1px 0 rgba(90, 26, 142, 0.12);
  opacity:       0;
  transform:     translateY(6px);
  animation:     none;
  pointer-events: all;
}

#erebus-hud.open {
  display:   flex;
  animation: erebusFadeIn 0.24s var(--e-transition) forwards;
}

@keyframes erebusFadeIn {
  from {
    opacity:   0;
    transform: translateY(6px);
  }
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

/* Closing state — JS adds .closing, then removes #erebus-hud.open */
#erebus-hud.closing {
  animation: erebusFadeOut 0.18s var(--e-transition) forwards;
}

@keyframes erebusFadeOut {
  from {
    opacity:   1;
    transform: translateY(0);
  }
  to {
    opacity:   0;
    transform: translateY(6px);
  }
}

/* Subtle corner accent lines — top edge only, no bounce */
#erebus-hud::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       0;
  right:      0;
  height:     1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--e-violet) 30%,
    var(--e-bright) 50%,
    var(--e-violet) 70%,
    transparent 100%
  );
  opacity: 0.55;
  z-index: 1;
}

/* ── HUD Header ─────────────────────────────────────────────────── */
#erebus-hud-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         12px 14px 11px;
  border-bottom:   1px solid var(--e-border);
  background:      var(--e-bg);
  flex-shrink:     0;
  gap:             10px;
}

#erebus-hud-title {
  font-family:    var(--e-font-mono);
  font-size:      11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color:          var(--e-text);
  flex:           1;
  display:        flex;
  align-items:    center;
  gap:            8px;
}

/* Pulsing status dot */
#erebus-hud-title::before {
  content:       '';
  display:       inline-block;
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--e-violet);
  box-shadow:    0 0 6px var(--e-glow-str);
  animation:     erebusPulse 2.4s ease-in-out infinite;
  flex-shrink:   0;
}

@keyframes erebusPulse {
  0%, 100% { opacity: 1;    box-shadow: 0 0 6px  var(--e-glow-str); }
  50%       { opacity: 0.45; box-shadow: 0 0 12px var(--e-glow-str); }
}

#erebus-hud-close {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           26px;
  height:          26px;
  background:      none;
  border:          1px solid var(--e-border);
  border-radius:   4px;
  color:           var(--e-muted);
  font-family:     var(--e-font-mono);
  font-size:       14px;
  line-height:     1;
  cursor:          pointer;
  transition:      border-color var(--e-transition), color var(--e-transition), background var(--e-transition);
  padding:         0;
  flex-shrink:     0;
}

#erebus-hud-close:hover {
  border-color: var(--e-violet);
  color:        var(--e-text);
  background:   var(--e-glow);
}

/* ── Message Area ───────────────────────────────────────────────── */
#erebus-hud-messages {
  flex:           1;
  overflow-y:     auto;
  overflow-x:     hidden;
  padding:        14px 12px;
  display:        flex;
  flex-direction: column;
  gap:            8px;
  scrollbar-width:      thin;
  scrollbar-color:      rgba(90, 26, 142, 0.35) transparent;
}

#erebus-hud-messages::-webkit-scrollbar        { width: 3px; }
#erebus-hud-messages::-webkit-scrollbar-track  { background: transparent; }
#erebus-hud-messages::-webkit-scrollbar-thumb  {
  background:    rgba(90, 26, 142, 0.40);
  border-radius: 2px;
}

/* ── Message Bubbles ────────────────────────────────────────────── */
.erebus-message {
  display:        flex;
  flex-direction: column;
  max-width:      84%;
  animation:      erebusMsgIn 0.18s ease;
}

@keyframes erebusMsgIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

.erebus-message.user {
  align-self:     flex-end;
  align-items:    flex-end;
}

.erebus-message.erebus {
  align-self:     flex-start;
  align-items:    flex-start;
}

/* Role label */
.erebus-msg-role {
  font-family:    var(--e-font-mono);
  font-size:      8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--e-muted);
  margin-bottom:  3px;
}

.erebus-message.user .erebus-msg-role {
  color: rgba(122, 42, 174, 0.70);
}

/* Bubble */
.erebus-msg-bubble {
  padding:       9px 12px;
  border-radius: 8px;
  font-family:   var(--e-font-body);
  font-size:     13px;
  line-height:   1.55;
  word-break:    break-word;
}

.erebus-message.erebus .erebus-msg-bubble {
  background:   var(--e-bg2);
  border:       1px solid var(--e-border);
  color:        var(--e-text);
  border-radius: 3px 8px 8px 8px;
}

.erebus-message.user .erebus-msg-bubble {
  background:   var(--e-user-bg);
  border:       1px solid var(--e-border-str);
  color:        #ddd0f8;
  border-radius: 8px 3px 8px 8px;
}

/* ── Typing Indicator ───────────────────────────────────────────── */
#erebus-typing {
  display:   none;
  align-self: flex-start;
  padding:   10px 14px;
  background: var(--e-bg2);
  border:    1px solid var(--e-border);
  border-radius: 3px 8px 8px 8px;
  gap:       4px;
}

#erebus-typing.visible {
  display: flex;
}

#erebus-typing span {
  width:         5px;
  height:        5px;
  border-radius: 50%;
  background:    var(--e-violet);
  animation:     erebusDot 1.2s ease-in-out infinite;
}

#erebus-typing span:nth-child(2) { animation-delay: 0.15s; }
#erebus-typing span:nth-child(3) { animation-delay: 0.30s; }

@keyframes erebusDot {
  0%, 80%, 100% { opacity: 0.20; transform: scale(0.85); }
  40%            { opacity: 1;    transform: scale(1.10); }
}

/* ── Input Area ─────────────────────────────────────────────────── */
#erebus-hud-input-area {
  display:      flex;
  align-items:  flex-end;
  gap:          8px;
  padding:      10px 12px 12px;
  border-top:   1px solid var(--e-border);
  background:   var(--e-bg);
  flex-shrink:  0;
}

#erebus-hud-input {
  flex:           1;
  min-height:     36px;
  max-height:     90px;
  padding:        8px 12px;
  background:     var(--e-bg2);
  border:         1px solid var(--e-border);
  border-radius:  6px;
  color:          var(--e-text);
  font-family:    var(--e-font-mono);
  font-size:      11px;
  letter-spacing: 0.5px;
  line-height:    1.5;
  outline:        none;
  resize:         none;
  transition:     border-color var(--e-transition), box-shadow var(--e-transition);
  scrollbar-width: none;
  overflow-y:     auto;
}

#erebus-hud-input::-webkit-scrollbar { display: none; }

#erebus-hud-input::placeholder {
  color: var(--e-muted);
}

#erebus-hud-input:focus {
  border-color: var(--e-border-str);
  box-shadow:   0 0 0 2px var(--e-glow);
}

#erebus-hud-send {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  background:      var(--e-indigo);
  border:          1px solid var(--e-border-str);
  border-radius:   6px;
  color:           var(--e-text);
  cursor:          pointer;
  flex-shrink:     0;
  transition:      background var(--e-transition), border-color var(--e-transition), box-shadow var(--e-transition);
}

#erebus-hud-send:hover {
  background:   var(--e-royal);
  border-color: var(--e-violet);
  box-shadow:   0 0 10px var(--e-glow);
}

#erebus-hud-send:active {
  transform: scale(0.95);
}

/* Send icon SVG */
#erebus-hud-send svg {
  width:  14px;
  height: 14px;
  fill:   none;
  stroke: var(--e-text);
  stroke-width: 1.8;
  stroke-linecap:  round;
  stroke-linejoin: round;
}

/* ── Mobile Adjustments ─────────────────────────────────────────── */
@media (max-width: 768px) {
  #erebus-wrap    { bottom: 56px !important; left: 6px !important; width: 52px !important; height: 52px !important; }
  #erebus-container { width: 52px !important; height: 52px !important; }

  #erebus-hud {
    bottom:  116px;
    left:    6px;
    width:   calc(100vw - 12px);
    max-width: 320px;
    height:  380px;
  }
}

@media (max-width: 400px) {
  #erebus-hud {
    width: calc(100vw - 12px);
    max-width: none;
  }
}