/* HuntersFeeder chat widget styles — loaded on index.html and manual.html */

#hfChatWidget { position: fixed; bottom: 90px; right: 20px; z-index: 60; }

#hfChatToggle {
  width: 60px; height: 60px; border-radius: 50%;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #2a1a0d;
  background: rgba(191, 110, 48, 0.35);
  transition: background 0.4s ease;
  animation: hfGlow 3s ease-in-out infinite;
}
#hfChatToggle:hover { background: rgba(191, 110, 48, 0.55); }
#hfChatToggle.hfActive { background: #7a3f18; color: #fff; }

@keyframes hfGlow {
  0%, 100% {
    box-shadow: 0 0 6px rgba(191, 110, 48, 0.35), 0 0 12px rgba(191, 110, 48, 0.2);
    background: rgba(191, 110, 48, 0.3);
  }
  50% {
    box-shadow: 0 0 22px rgba(191, 110, 48, 0.85), 0 0 40px rgba(191, 110, 48, 0.5);
    background: #8a4a1e;
  }
}

#hfChatWindow {
  position: fixed; bottom: 160px; right: 20px;
  width: 320px; max-width: 90vw; height: 440px; max-height: 70vh;
  background: #111315; border: 1px solid #2A2E2A; border-radius: 16px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
#hfChatWindow.hidden { display: none; }

#hfChatHeader {
  background: #7a3f18; color: #fff; padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600;
}
#hfChatClose {
  background: none; border: none; color: #fff; font-size: 22px;
  line-height: 1; cursor: pointer; padding: 0 4px;
}

#hfChatMessages {
  flex: 1; overflow-y: auto; padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.hfMsg { max-width: 82%; padding: 8px 12px; border-radius: 12px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; }
.hfMsguser { align-self: flex-end; background: #EBC57E; color: #0B0D0E; }
.hfMsgbot  { align-self: flex-start; background: #1f2224; color: #e5e5e5; }
.hfMsgbot.hfTyping { opacity: 0.6; font-style: italic; }

#hfChatForm { display: flex; border-top: 1px solid #2A2E2A; }
#hfChatInput {
  flex: 1; background: #1A1D1E; border: none; color: #fff;
  padding: 10px 12px; font-size: 16px; outline: none;
  /* 16px, not 14px: iOS Safari auto-zooms the page to focus any input
     whose font-size is under 16px. The chat opens with input.focus()
     called right away, so at 14px every open of the widget forced a
     zoom-in on iPhone — this is what fixes that, not a viewport hack. */
}
#hfChatSend {
  background: #EBC57E; color: #0B0D0E; border: none;
  padding: 0 16px; font-weight: 600; cursor: pointer;
}
#hfChatSend:hover { background: #d6ad5c; }

@media (prefers-reduced-motion: reduce) {
  #hfChatToggle { animation: none; }
}

/* On a short phone viewport, height:440px + max-height:70vh together used
   to reach nearly to the top of the screen, covering the whole page behind
   it. Capping height at 60vh keeps the window's top edge lower, in the
   bottom portion of the screen, whatever the device's height — bottom stays
   at 160px (unchanged) so it still clears the toggle button underneath it. */
@media (max-width: 480px) {
  #hfChatWindow { height: 60vh; max-height: 60vh; }
}