/* rockbot.css - Liam's Lab matching */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@700&display=swap');
:root{
  --bg: #141414;
  --panel: #222426;
  --card: #2b2b2b;
  --muted: #bfbfbf;
  --accent: #ffc933;
  --accent-dark: #c9911a;
  --glass: rgba(255,255,255,0.03);
  --radius: 12px;
  --shadow: 0 14px 40px rgba(0,0,0,0.6);
}
/* Keyframes for the glowing animation */
@keyframes glow {
  0%, 100% {
    box-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 0 10px var(--accent-dark);
  }
  50% {
    box-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 0 25px var(--accent);
  }
}

#rockbot-wrapper { position: fixed; right: 22px; bottom: 22px; z-index: 999999; font-family: "Helvetica Neue", Arial, sans-serif; }
#rockbot-button { 
  position: relative; /* Added for pseudo-element positioning */
  width:90px; 
  height:90px; 
  border-radius:50%; 
  background: linear-gradient(180deg,#3a3a3a,#1f1f1f); 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  cursor:pointer; 
  box-shadow: 0 10px 30px rgba(0,0,0,0.6); 
  border: 2px solid rgba(255,255,255,0.03); 
  transition: transform .3s ease, box-shadow .3s ease; 
  animation: glow 2s ease-in-out infinite; /* Apply the glow animation */
}
/* Pop-up text on hover */
#rockbot-button::after {
  content: "Ask The Rockbot!";
  position: absolute;
  top: 50%;
  right: 105%; /* Position to the left of the button, slightly adjusted for size */
  transform: translate(-15px, -50%); /* Adjust position and center vertically */
  padding: 8px 12px;
  background: var(--panel);
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  border-radius: var(--radius);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s;
}
#rockbot-button:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-20px, -50%); /* Move a bit further on hover */
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
}
#rockbot-button:hover { 
  transform: scale(1.08); 
  box-shadow: 0 0 20px rgba(255, 201, 51, 0.8), 0 10px 30px rgba(0,0,0,0.6); 
}
#rockbot-button img { width:80px; height:80px; display:block; transition: transform .3s ease; }
#rockbot-button.open img { transform: rotate(180deg); }
#rockbot-panel { width: 380px; max-width: calc(100vw - 44px); height: 520px; background: linear-gradient(180deg,var(--panel), #141414); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; transform: translateY(14px) scale(.98); opacity: 0; pointer-events: none; transition: all .2s ease; position: fixed; right: 110px; bottom: 22px; display:flex; flex-direction:column; }
#rockbot-panel.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
#rockbot-header { background: linear-gradient(90deg, rgba(0,0,0,0.05), rgba(0,0,0,0.05)); padding: 18px 16px; display:flex; gap:12px; align-items:center; border-bottom: 1px solid rgba(255,255,255,0.03); }
.rb-header-left { display:flex; gap:12px; align-items:center; }
.bot-icon { width:64px; height:64px; border-radius:8px; box-shadow: 0 6px 18px rgba(0,0,0,0.6); border:1px solid rgba(255,255,255,0.03); }
.rb-title { font-family: 'Roboto Mono', sans-serif; color: var(--accent); font-weight: 700; letter-spacing: 0.5px; font-size: 24px; text-shadow: 0 2px 10px rgba(246,201,62,0.08); }
.rb-sub { color: var(--muted); font-size:12px; margin-top:2px; }
#rockbot-messages { flex:1; padding: 14px; overflow-y:auto; background-image: url('assets/stone-texture.png'); background-size: cover; background-position: center; background-blend-mode: overlay; }
.rb-message { margin-bottom:10px; max-width:85%; padding:10px 12px; border-radius:10px; line-height:1.35; box-shadow: 0 6px 18px rgba(0,0,0,0.45); }
.rb-message.bot { background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); color: #f3f3f3; font-family: "Helvetica Neue", Arial, sans-serif; }
.rb-message.user { margin-left: auto; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border: 1px solid rgba(255,255,255,0.02); color: #fff; text-align:right; }
#rockbot-compose { display:flex; gap:8px; padding:12px; border-top: 1px solid rgba(255,255,255,0.02); background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.03)); }
#rockbot-input { flex:1; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.03); background: rgba(255,255,255,0.01); color: #eee; outline: none; font-size: 14px; }
#rockbot-send { background: linear-gradient(180deg,var(--accent), var(--accent-dark)); border: none; color: #111; padding: 10px 14px; border-radius: 10px; font-weight:700; cursor: pointer; box-shadow: 0 8px 26px rgba(201,145,26,0.12); }
#rockbot-close { background: transparent; border: 0; color: #ddd; font-size:20px; cursor:pointer; }
.typing { display:inline-block; width:48px; text-align:left; }
.typing span { display:inline-block; width:8px; height:8px; margin-right:6px; background:#fff; border-radius:50%; opacity:.35; animation: blink 1s infinite; }
.typing span:nth-child(2){ animation-delay:.15s }
.typing span:nth-child(3){ animation-delay:.3s }
@keyframes blink { 0%{opacity:.25} 50%{opacity:1} 100%{opacity:.25} }
@media (max-width:700px){ #rockbot-panel { right: 10px; left: 10px; bottom: 86px; width:auto; height: 60vh; } #rockbot-button { right: 12px; bottom: 12px; } }