/* ===================================================================
   Chatbot Messages — message bubbles, quick replies, typing,
                      input area, powered-by line
   =================================================================== */

/* --- Messages area -------------------------------------------------- */

.chatbot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg, #f8fafd);
}

.chatbot-messages::-webkit-scrollbar {
  width: 5px;
}

.chatbot-messages::-webkit-scrollbar-thumb {
  background: var(--line, #e0e3e7);
  border-radius: 10px;
}

/* --- Message wrap (bubble + timestamp) ------------------------------ */

.chatbot-msg-wrap {
  display: flex;
  flex-direction: column;
  max-width: 85%;
  animation: chatbot-fadeIn 0.25s ease;
}

.chatbot-msg-wrap:has(.chatbot-msg.user) {
  align-self: flex-end;
}

.chatbot-msg-wrap:has(.chatbot-msg.bot) {
  align-self: flex-start;
}

/* --- Message bubbles ------------------------------------------------ */

.chatbot-msg {
  padding: 10px 14px;
  border-radius: 14px;
  word-wrap: break-word;
}

.chatbot-msg.bot {
  background: var(--surface, #ffffff);
  color: var(--text, #202124);
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.06);
}

.chatbot-msg.user {
  background: var(--accent, #1a73e8);
  color: #fff;
  border-bottom-right-radius: 4px;
}

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

/* --- Timestamps ----------------------------------------------------- */

.chatbot-time {
  font-size: 10.5px;
  color: var(--muted, #5f6368);
  margin-top: 3px;
  padding: 0 4px;
  opacity: 0.7;
}

.chatbot-time.user {
  text-align: right;
}

.chatbot-time.bot {
  text-align: left;
}

/* --- Link suggestions in bot messages ------------------------------- */

.chatbot-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 5px 12px;
  background: var(--accent-soft, #e8f0fe);
  color: var(--accent, #1a73e8);
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 16px;
  text-decoration: none;
  transition: background 0.15s;
}

.chatbot-link:hover {
  background: #d4e4fc;
  text-decoration: none;
}

.chatbot-link .material-symbols-outlined {
  font-size: 15px;
}

/* --- Quick reply buttons -------------------------------------------- */

.chatbot-quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0;
  align-self: flex-start;
  animation: chatbot-fadeIn 0.3s ease;
}

.chatbot-quick-btn {
  background: var(--surface, #ffffff);
  color: var(--accent, #1a73e8);
  border: 1px solid var(--accent, #1a73e8);
  border-radius: 16px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.chatbot-quick-btn:hover {
  background: var(--accent, #1a73e8);
  color: #fff;
}

/* --- Typing indicator ----------------------------------------------- */

.chatbot-typing {
  display: flex;
  gap: 4px;
  padding: 12px 16px;
  align-self: flex-start;
  background: var(--surface, #ffffff);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.06);
}

.chatbot-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted, #5f6368);
  animation: chatbot-bounce 1.2s infinite ease-in-out;
}

.chatbot-typing span:nth-child(2) { animation-delay: 0.15s; }
.chatbot-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes chatbot-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-5px); opacity: 1; }
}

/* --- Input area ----------------------------------------------------- */

.chatbot-input-area {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--line, #e0e3e7);
  background: var(--surface, #ffffff);
  flex-shrink: 0;
}

.chatbot-input-area input {
  flex: 1;
  border: 1px solid var(--line, #e0e3e7);
  border-radius: 20px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text, #202124);
  background: var(--bg, #f8fafd);
  outline: none;
  transition: border-color 0.15s;
}

.chatbot-input-area input::placeholder {
  color: var(--muted, #5f6368);
}

.chatbot-input-area input:focus {
  border-color: var(--accent, #1a73e8);
}

.chatbot-input-area button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--accent, #1a73e8);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}

.chatbot-input-area button:hover {
  background: var(--accent-strong, #1558b0);
}

.chatbot-input-area button:disabled {
  opacity: 0.5;
  cursor: default;
}

.chatbot-input-area button .material-symbols-outlined {
  font-size: 20px;
}

/* --- Powered by line ------------------------------------------------ */

.chatbot-powered {
  text-align: center;
  font-size: 10.5px;
  color: var(--muted, #5f6368);
  padding: 4px 0 8px;
  background: var(--surface, #ffffff);
}