/**
 * Chatbot Footer Styles
 * Two-section layout: footer-controls (clear) + footer-inner (form)
 */

.mr-chatbot-footer {
  width: 100%;
  opacity: 1;
  display: flex;
  flex-direction: column;
  transition: var(--mr-chatbot-transition);
  background-color: var(--mr-chatbot-color-white);
  border-bottom-left-radius: var(--mr-chatbot-box-border-radius);
  border-bottom-right-radius: var(--mr-chatbot-box-border-radius);
}

/* Footer visibility states */
.mr-chatbot-container.minimized .mr-chatbot-footer {
  display: none;
}

.mr-chatbot-container.opening .mr-chatbot-footer,
.mr-chatbot-container.closing .mr-chatbot-footer {
  display: flex;
  opacity: 0;
}

/* -----------------------------------------------------------------------
 * Footer controls — clear history button
 * Auto-hides when the info panel is open (info-actions becomes visible)
 * ----------------------------------------------------------------------- */

.mr-chatbot-footer-controls {
  padding: var(--mr-chatbot-spacing);
  padding-top: 1rem;
  padding-bottom: 0;
  margin-bottom: 1rem;
  border-top: 1px solid var(--mr-chatbot-color-blush);
  transition: opacity 275ms ease;
}

/* Hide controls when info panel is visible */
.mr-chatbot-footer:has(.mr-chatbot-info-actions:not(.hidden)) .mr-chatbot-footer-controls {
  opacity: 0;
  height: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
  border-top-width: 0;
  transition: opacity 275ms ease, height 0ms 275ms, overflow 0ms 275ms, padding 0ms 275ms, margin 0ms 275ms;
}

/* Clear button (full-width, bordered) */
#mr-chatbot-clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 0;
  background-color: var(--mr-chatbot-color-light-gray);
  border: 1px solid var(--mr-chatbot-color-primary);
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  color: var(--mr-chatbot-color-primary);
  font-family: 'Lexend', sans-serif;
}

#mr-chatbot-clear-btn:hover {
  background-color: var(--mr-chatbot-color-primary);
}

#mr-chatbot-clear-btn:hover i,
#mr-chatbot-clear-btn:hover span {
  color: white;
}

#mr-chatbot-clear-btn i {
  font-size: var(--mr-chatbot-font-button);
  margin-right: 12px;
  color: var(--mr-chatbot-color-primary);
}

#mr-chatbot-clear-btn span {
  text-transform: uppercase;
  font-size: var(--mr-chatbot-font-caption);
  font-weight: var(--mr-chatbot-weight-normal);
  color: var(--mr-chatbot-color-primary);
}

/* -----------------------------------------------------------------------
 * Footer inner — form + info-actions
 * ----------------------------------------------------------------------- */

.mr-chatbot-footer-inner {
  padding: var(--mr-chatbot-spacing);
  padding-top: 0;
}

/* Form container */
.mr-chatbot-form {
  display: flex;
  width: 100%;
  position: relative;
  opacity: 1;
  overflow: unset;
  transition: opacity 275ms ease;
}

.mr-chatbot-form.hidden {
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 275ms ease, height 0ms 275ms, overflow 0ms 275ms;
}

/* Textarea input */
.mr-chatbot-input {
  width: 100%;
  height: var(--mr-chatbot-input-height);
  box-shadow: none !important;
  padding: var(--mr-chatbot-bubble-padding-h);
  padding-right: calc(40px + var(--mr-chatbot-bubble-padding-h));
  border-radius: var(--mr-chatbot-bubble-radius);
  border: 1px solid var(--mr-chatbot-color-blush);
  font-size: var(--mr-chatbot-font-content);
  font-weight: var(--mr-chatbot-weight-light);
  line-height: var(--mr-chatbot-line-height);
  color: var(--mr-chatbot-color-dark-gray);
  font-family: 'Lexend', sans-serif;
  resize: none;
  transition: border-color 0.3s ease;
}

.mr-chatbot-input:focus {
  border-color: var(--mr-chatbot-color-dark-gray);
  outline: none;
  box-shadow: none !important;
}

.mr-chatbot-input::placeholder {
  color: var(--mr-chatbot-color-dark-gray);
}

.mr-chatbot-input:disabled {
  opacity: 0.6;
}

/* Submit button — absolute positioned circle inside the textarea */
.mr-chatbot-submit {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--mr-chatbot-color-light-gray);
  color: var(--mr-chatbot-color-dark-gray);
  border: 1px solid var(--mr-chatbot-color-blush);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  padding: 0;
  font-size: 16px;
}

.mr-chatbot-submit:hover {
  background-color: var(--mr-chatbot-color-dark-gray);
  color: white;
  border-color: var(--mr-chatbot-color-dark-gray);
}

.mr-chatbot-submit i {
  color: var(--mr-chatbot-color-dark-gray);
}

.mr-chatbot-submit:hover i {
  color: white;
}

/* Honeypot field (anti-spam) */
.mr-chatbot-honeypot {
  position: absolute;
  margin: 0 0 0 3000px;
  width: var(--mr-chatbot-spacing) !important;
}

/* Info panel actions */
.mr-chatbot-info-actions {
  display: flex;
  width: 100%;
  opacity: 1;
  overflow: unset;
  transition: opacity 275ms ease;
}

.mr-chatbot-info-actions.hidden {
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 275ms ease, height 0ms 275ms, overflow 0ms 275ms;
}

.mr-chatbot-info-actions > button {
  width: 100%;
  padding: 10px 0;
  text-transform: uppercase;
  font-size: var(--mr-chatbot-font-button);
  font-weight: var(--mr-chatbot-weight-medium);
  cursor: pointer;
  border-radius: calc(var(--mr-chatbot-box-border-radius) / 2);
  border: 1px solid var(--mr-chatbot-color-primary);
  background-color: transparent;
  color: var(--mr-chatbot-color-primary);
  font-family: 'Lexend', sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.mr-chatbot-info-actions > button:hover {
  background-color: var(--mr-chatbot-color-primary);
  color: white;
}

/* Prevent auto-zoom on iOS */
/*
.mr-chatbot-footer textarea {
  font-size: 16px;
}
*/

/* Mobile adjustments */
@media (max-width: 576px) {
  .mr-chatbot-footer-controls,
  .mr-chatbot-footer-inner {
    padding: calc(var(--mr-chatbot-spacing) / 2);
  }

  .mr-chatbot-footer-controls {
    padding-bottom: 0;
    margin-bottom: calc(var(--mr-chatbot-spacing) / 2);
  }
}