/* =============== BASE PAGE =============== */
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #f9fafb;
  font-family: system-ui, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* =============== MAIN CHAT CONTAINER =============== */
#chat-container {
  display: flex;
  flex-direction: column;
  height: 700px;
  max-height: 100vh;
  width: 100%;
  max-width: 1200px;
  background: #f9fafb;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  position: relative;
  transition: all 0.3s ease-in-out;
}

/* =============== HEADER =============== */
.chat-header {
  background: #E7FBBC;
  color: #111;
  font-weight: 700;
  padding: 18px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  text-align: center;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* =============== CHAT AREA =============== */
#chatbox {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px;
  overflow-y: auto;
  background: #f9fafb;
  box-sizing: border-box;
}

/* =============== INPUT AREA =============== */
#inputContainer {
  display: flex;
  width: 100%;
  background: #f3f4f6;
  border-top: 1px solid #d1d5db;
  padding: 16px;
  box-sizing: border-box;
  flex-shrink: 0;
}

#message {
  flex: 1;
  font-size: 16px;
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px 0 0 8px;
  outline: none;
  background: #fff;
}

#sendBtn {
  padding: 12px 20px;
  background: black;
  color: white;
  border: none;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  transition: background 0.2s ease;
}

#sendBtn:hover {
  background: #2563EB;
}

/* 🔹 Disabled state */
#sendBtn:disabled {
  background: #9CA3AF;      /* neutral grey tone */
  color: #f9fafb;           /* light greyish-white text */
  cursor: not-allowed;      /* disabled pointer */
  opacity: 0.8;             /* slight fade for visual cue */
}
/* =============== MESSAGES =============== */
.message {
  margin: 6px 0;
  padding: 8px 12px;
  border-radius: 12px;
  max-width: 80%;
  line-height: 1.5;
  animation: fadeIn 0.3s ease-in;
}

.message.user {
  background: #BFC6F4;
  color: black;
  align-self: flex-end;
}

.message.assistant {
  background: #E7FBBC;
  color: black;
  align-self: flex-start;
  position: relative;
}

/* =============== ANIMATIONS =============== */
@keyframes blink {
  50% { opacity: 0.3; }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =============== WIDGET MODE (smaller screens) =============== */
@media (max-width: 700px) {
  html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    background: #f9fafb;
  }

  #chat-container {
    height: 100%;              /* fill iframe height */
    width: 100%;               /* fill iframe width */
    max-width: none;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
    position: absolute;        /* avoids misalignment */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  #chatbox {
    padding: 12px;             /* restore inner spacing for messages */
  }

  .chat-header {
    border-radius: 12px 12px 0 0;
  }
}

/* =============== CONTACT FORM STYLING =============== */
.contact-form {
  background: #E7FBBC;
  padding: 10px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-form label {
  font-size: 14px;
  color: #111;
  margin-top: 6px;
}

.contact-form input,
.contact-form textarea {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 8px;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
}

#contactSubmit {
  margin-top: 10px;
  background: black;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s ease;
}

#contactSubmit:hover {
  background: #2563eb;
}

#contactSubmit:disabled {
  cursor: not-allowed;
  background: #9ca3af; /* subtle gray */
  transition: none;
}