/* ===== Hidden Investigations Chatbot – Styles (Updated for list numbering alignment) ===== */
:root {
  --bg-dark:#000;
  --panel-bg:rgba(0,0,0,0.9);
  --accent-yellow:#FFD700;
  --accent-gray:#333;
  --text-primary:#fff;
  --text-secondary:#aaa;
  --header-font:'Orbitron',sans-serif;
  --body-font:'Fira Code',monospace;
  --base-radius:1rem;
}

/* Reset & base */
*{box-sizing:border-box;margin:0;padding:0;}
html,body{
  height:100%;width:100%;
  font-family:var(--body-font);
  background:var(--bg-dark);
  color:var(--text-primary);
  display:flex;justify-content:center;align-items:center;
  padding:env(safe-area-inset);
  overflow:hidden; /* page itself never scrolls */
}

/* Visually hidden (a11y utilities) */
.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.visually-hidden.focusable:focus,
.visually-hidden.focusable:active{
  clip:auto;width:auto;height:auto;margin:0;overflow:visible;white-space:normal;
  z-index:1000;background:var(--accent-yellow);color:var(--bg-dark);
  padding:.5rem;text-decoration:none;
}

/* Layout */
.chat-container{
  width:100%;max-width:600px;height:100%;
  background:var(--panel-bg);
  border:2px solid var(--accent-yellow);
  border-radius:var(--base-radius);
  display:flex;flex-direction:column;
  overflow:hidden;
}

/* Header */
.chat-header{
  padding:.75rem;
  background:var(--accent-gray);
  text-align:center;
  border-bottom:2px solid var(--accent-yellow);
}
.chat-header h1{
  font-family:var(--header-font);
  font-size:1.25rem;
  color:var(--accent-yellow);
}
.chat-header p{
  margin-top:.25rem;
  font-size:.85rem;
  color:var(--text-secondary);
}

/* Chat messages area */
#chatbox{
  flex:1;min-height:0;
  padding:.75rem;
  display:flex;flex-direction:column;
  gap:.5rem;
  overflow-y:auto; /* own scrolling */
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
}
#chatbox::-webkit-scrollbar{width:6px;}
#chatbox::-webkit-scrollbar-thumb{
  background:var(--accent-yellow);
  border-radius:3px;
}
.message{max-width:80%;}
.message-content{
  padding:.5rem .75rem;
  border-radius:var(--base-radius);
  font-size:.9rem;
  line-height:1.3;
  word-break:break-word;
}
/* Ensure list numbers stay inside bubble */
.message-content ol,
.message-content ul{
  list-style-position:inside;
  padding-left:1.25em; /* space for numbers/bullets */
  margin:0;
}
.message-content li{margin:.25em 0;}

/* User vs Bot bubble colours */
.user-message{align-self:flex-end;}
.user-message .message-content{
  background:var(--accent-yellow);
  color:var(--bg-dark);
  border-bottom-right-radius:.4rem;
}
.bot-message{align-self:flex-start;}
.bot-message .message-content{
  background:var(--accent-gray);
  color:var(--text-primary);
  border:1px solid var(--accent-yellow);
  border-bottom-left-radius:.4rem;
}
.bot-message pre{
  background:#111;
  padding:.5rem;
  border-radius:var(--base-radius);
  font-size:.85rem;
  overflow-x:auto;
  border:1px solid var(--accent-gray);
}
.bot-message code{color:var(--accent-yellow);} 
.bot-message a{color:var(--accent-yellow);text-decoration:underline;}

/* Input area */
.input-area{
  display:flex;
  padding:.5rem;
  background:var(--accent-gray);
  border-top:2px solid var(--accent-yellow);
}
#userInput{
  flex:1;
  padding:.5rem .75rem;
  border:1px solid var(--accent-yellow);
  border-radius:var(--base-radius);
  background:#111;
  color:var(--text-primary);
  font-size:.9rem;
  outline:none;
}
#userInput::placeholder{color:var(--text-secondary);}
#userInput:focus{box-shadow:0 0 6px var(--accent-yellow);} 
#sendButton{
  margin-left:.5rem;
  width:2.5rem;height:2.5rem;
  border:none;border-radius:50%;
  background:var(--accent-yellow);
  color:var(--bg-dark);
  font-size:1rem;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s;
}
#sendButton:hover:not(:disabled){transform:scale(1.1);} 
#sendButton:disabled{background:#555;cursor:not-allowed;}

/* Footer */
.chat-footer{
  padding:.5rem;
  background:var(--bg-dark);
  text-align:center;
  font-size:.7rem;
  color:var(--text-secondary);
}
.social-links{
  display:flex;
  justify-content:center;
  gap:.75rem;
  overflow-x:auto;
}
.social-links a{
  color:var(--accent-yellow);
  text-decoration:none;
  font-size:.8rem;
  white-space:nowrap;
}
.social-links a:hover{text-decoration:underline;}

/* Mobile optimisation */
@media(max-width:480px){
  .chat-container{height:100dvh;}
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce){
  #sendButton{transition:none;}
  #chatbox{scroll-behavior:auto;}
}