/* Importing Google Fonts - Inter (kept), but chatbot inherits page font */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Overlay */
.tbp-chat-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 1000; display: none; }
body.show-chatbot .tbp-chat-overlay { display: block; }

/* Chatbot popup container - centered and enlarged */
.chatbot-popup { position: fixed; left: 50%; top: 50%; width: min(960px, 96vw); max-height: 84vh; overflow: hidden; background: #fff; border-radius: 16px; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.98); box-shadow: 0 25px 80px rgba(0,0,0,0.25); transition: all 0.16s ease; z-index: 1001; font-family: inherit; }
body.show-chatbot .chatbot-popup { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }

.chat-header { display: flex; align-items: center; padding: 15px 22px; background: #8B4513; justify-content: space-between; font-family: inherit; }
.chat-header .header-info { display: flex; gap: 10px; align-items: center; }
.header-info .chatbot-logo { width: 35px; height: 35px; padding: 6px; fill: #8B4513; flex-shrink: 0; background: #fff; border-radius: 50%; }
.header-info .logo-text { color: #fff; font-weight: 600; font-size: 1.31rem; letter-spacing: 0.02rem; font-family: inherit; }
.chat-header #close-chatbot { border: none; color: #fff; height: 40px; width: 40px; font-size: 1.9rem; margin-right: -10px; padding-top: 2px; cursor: pointer; border-radius: 50%; background: none; transition: 0.2s ease; }
.chat-header #close-chatbot:hover { background: #6b3410; }

.chat-body { padding: 25px 22px; gap: 20px; display: flex; height: 560px; overflow-y: auto; margin-bottom: 82px; flex-direction: column; scrollbar-width: thin; scrollbar-color: #e2d4c7 transparent; font-family: inherit; position: relative; }
.chat-body::before { content: ""; position: absolute; inset: 0; background: url('/assets/logo/thinkbigprep-icon.svg') center center / 280px 280px no-repeat; opacity: 0.15; pointer-events: none; will-change: transform; transform: translateY(calc(-1 * var(--tbp-chat-scroll, 0px))); }
.chat-body > * { position: relative; z-index: 1; }
.chat-body, .chat-form .message-input:hover { scrollbar-color: #e2d4c7 transparent; }
.chat-body .message { display: flex; gap: 11px; align-items: center; }
.chat-body .bot-message { align-items: flex-start; }
.chat-body .message .bot-avatar { width: 35px; height: 35px; padding: 6px; fill: #fff; flex-shrink: 0; margin-bottom: 0; margin-top: 2px; align-self: flex-start; border-radius: 50%; background: #6b3410; }
.chat-body .message .message-text { padding: 12px 16px; max-width: 75%; font-size: 0.95rem; }
.chat-body .bot-message.thinking .message-text { padding: 2px 16px; }
.chat-body .bot-message .message-text { background: #F4E6D8; border-radius: 13px 13px 13px 3px; }
.chat-body .user-message { flex-direction: column; align-items: flex-end; }
.chat-body .user-message .message-text { color: #fff; background: #8B4513; border-radius: 13px 13px 3px 13px; }
.chat-body .user-message .attachment { width: 50%; margin-top: -7px; border-radius: 13px 3px 13px 13px; }

.chat-body .bot-message .thinking-indicator { display: flex; gap: 4px; padding-block: 15px; }
.chat-body .bot-message .thinking-indicator .dot { height: 7px; width: 7px; opacity: 0.7; border-radius: 50%; background: #a57747; animation: dotPulse 1.8s ease-in-out infinite; }
.chat-body .bot-message .thinking-indicator .dot:nth-child(1) { animation-delay: 0.2s; }
.chat-body .bot-message .thinking-indicator .dot:nth-child(2) { animation-delay: 0.3s; }
.chat-body .bot-message .thinking-indicator .dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotPulse { 0%, 44% { transform: translateY(0); } 28% { opacity: 0.4; transform: translateY(-4px); } 44% { opacity: 0.2; } }

.chat-footer { position: absolute; bottom: 0; width: 100%; background: #fff; padding: 15px 22px 20px; font-family: inherit; }
.chat-footer .chat-form { display: flex; align-items: center; position: relative; background: #fff; border-radius: 32px; outline: 1px solid #CCCCE5; box-shadow: 0 0 8px rgba(0, 0, 0, 0.06); transition: 0s ease, border-radius 0s; }
.chat-form:focus-within { outline: 2px solid #8B4513; }
.chat-form .message-input { width: 100%; height: 47px; outline: none; resize: none; border: none; max-height: 180px; scrollbar-width: thin; border-radius: inherit; font-size: 0.95rem; padding: 14px 0 12px 18px; scrollbar-color: transparent transparent; }
.chat-form .chat-controls { gap: 3px; height: 47px; display: flex; padding-right: 6px; align-items: center; align-self: flex-end; }
.chat-form .chat-controls button { height: 35px; width: 35px; border: none; cursor: pointer; color: #7b5a3b; border-radius: 50%; font-size: 1.15rem; background: none; transition: 0.2s ease; }
.chat-form .chat-controls #send-message { color: #fff; display: none; background: #8B4513; }
.chat-form .chat-controls #send-message:hover { background: #6b3410; }
.chat-form .message-input:valid~.chat-controls #send-message { display: block; }

.chat-form .file-upload-wrapper { display: none !important; }

#emoji-picker, em-emoji-picker { display: none !important; }

/* Responsive media query for mobile screens */
@media (max-width: 520px) {
  .chatbot-popup { left: 50%; top: 50%; width: 100%; height: 100%; border-radius: 0; transform: translate(-50%, -50%) scale(1); }
  .chat-body::before { background-size: 160px 160px; }
  .chatbot-popup .chat-header { padding: 12px 15px; }
  .chat-body { height: calc(90% - 55px); padding: 25px 15px; }
  .chat-footer { padding: 10px 15px 15px; }
  .chat-form .file-upload-wrapper.file-uploaded #file-cancel { opacity: 0; }
}

/* Chat: compact Contact us button and spacing */
.chat-body .message .message-text .btn-chat {
  padding: 6px 12px !important;
  font-size: 0.85rem !important;
  line-height: 1 !important;
  border-radius: 9999px !important;
  margin-top: 8px !important; /* spacing from preceding text */
}