/* AI Chat Widget Styles */
#ai-chat-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  font-family: 'Exo 2', sans-serif;
}

#ai-chat-toggle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--accent-orange, #ff6b00);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255, 107, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background 0.3s;
}

#ai-chat-toggle:hover {
  transform: scale(1.1);
  background: #e65c00;
}

#ai-chat-toggle svg {
  width: 30px;
  height: 30px;
  fill: #fff;
}

#ai-chat-window {
  position: absolute;
  bottom: 80px;
  right: 0;
  width: 350px;
  height: 500px;
  background: #111;
  border: 1px solid #333;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.8);
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform-origin: bottom right;
}

#ai-chat-window.hidden {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}

.ai-chat-header {
  background: #1a1a1a;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #333;
}

.ai-chat-header span {
  color: #fff;
  font-weight: 600;
  font-size: 1.1rem;
}

#ai-chat-close {
  background: none;
  border: none;
  color: #888;
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
}

#ai-chat-close:hover {
  color: #fff;
}

.ai-chat-messages {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #0a0a0a;
}

.ai-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.4;
  word-wrap: break-word;
}

.ai-msg-bot {
  background: #222;
  color: #ddd;
  align-self: flex-start;
  border-bottom-left-radius: 2px;
}

.ai-msg-user {
  background: var(--accent-orange, #ff6b00);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 2px;
}

.ai-chat-input-area {
  display: flex;
  padding: 15px;
  background: #1a1a1a;
  border-top: 1px solid #333;
  gap: 10px;
}

#ai-chat-input {
  flex: 1;
  background: #0a0a0a;
  border: 1px solid #333;
  padding: 10px 15px;
  border-radius: 20px;
  color: #fff;
  font-family: 'Exo 2', sans-serif;
  outline: none;
}

#ai-chat-input:focus {
  border-color: var(--accent-orange, #ff6b00);
}

#ai-chat-send {
  background: var(--accent-orange, #ff6b00);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

#ai-chat-send svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}

/* Typing animation */
.ai-typing span {
  animation: ai-blink 1.4s infinite both;
  font-size: 1.2rem;
  line-height: 1;
}

.ai-typing span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes ai-blink {
  0% { opacity: 0.2; }
  20% { opacity: 1; }
  100% { opacity: 0.2; }
}

@media (max-width: 768px) {
  #ai-chat-window {
    width: calc(100vw - 40px);
    height: 60vh;
    bottom: 70px;
  }
}

/* Keep the assistant usable above the mobile contact bar and keyboard. */
#ai-chat-window[hidden], #ai-chat-window.hidden { display: none; }
#ai-chat-widget { --accent-orange: #0066ff; }
#ai-chat-toggle:hover { background: #0055d4; }
#ai-chat-window { max-height: calc(100dvh - 120px); }
.ai-chat-messages { min-height: 0; }
.ai-msg { white-space: pre-wrap; overflow-wrap: anywhere; }
#ai-chat-input { min-width: 0; width: 0; font-size: 16px; }
#ai-chat-send { flex-shrink: 0; }
#ai-chat-send:disabled { opacity: .45; cursor: wait; }
#ai-chat-close { min-width: 44px; min-height: 44px; }
#ai-chat-widget button:focus-visible { outline: 2px solid white; outline-offset: 3px; }
@media (max-width: 900px) {
  #ai-chat-widget { bottom: calc(88px + env(safe-area-inset-bottom)); right: 16px; }
  #ai-chat-toggle { width: 52px; height: 52px; }
  #ai-chat-window { position: fixed; right: 12px; bottom: calc(152px + env(safe-area-inset-bottom)); width: min(380px, calc(100vw - 24px)); height: 460px; max-height: calc(100dvh - 170px - env(safe-area-inset-bottom)); }
  .ai-chat-messages { padding: 12px; }
  .ai-chat-input-area { padding: 12px; }
}

.ai-chat-header { flex-shrink: 0; gap: 4px; padding: 10px 12px 10px 16px; }
.ai-chat-header > span { flex: 1; min-width: 0; font-size: 1rem; }
#ai-chat-expand { width: 44px; height: 44px; flex-shrink: 0; border: 0; background: transparent; color: #b7c7de; font-size: 26px; cursor: pointer; }
#ai-chat-expand:hover { color: white; background: #263044; border-radius: 8px; }
.ai-chat-suggestions { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; flex-shrink: 0; border-top: 1px solid #292e38; }
.ai-chat-suggestions button { border: 1px solid #34435c; border-radius: 16px; background: #131d2e; color: #c8ddff; padding: 8px 10px; min-height: 36px; font: inherit; font-size: 12px; cursor: pointer; }
.ai-chat-suggestions button:hover { background: #20365a; border-color: #0066ff; }
.ai-chat-suggestions button:disabled { opacity: .45; cursor: wait; }
.ai-chat-input-area { flex-shrink: 0; }
#ai-chat-window.is-expanded { position: fixed; width: min(760px, calc(100vw - 48px)); height: min(780px, calc(100dvh - 48px)); max-height: calc(100dvh - 48px); top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); box-shadow: 0 20px 80px #000c; }
@media (max-width: 900px) {
  #ai-chat-window.is-expanded { top: 12px; left: 12px; width: calc(100vw - 24px); height: calc(100dvh - 24px - env(safe-area-inset-bottom)); max-height: calc(100dvh - 24px - env(safe-area-inset-bottom)); transform: none; }
}