/* ANCHOR: contact_input_component */
/* REUSED: Contact input field with Figma specs */
/* SCALED FOR: Fixed bottom positioning, always visible */
/* UPDATED COMMENTS: Message input field for direct contact */

/* ANCHOR: contact_input_container */
/* CRITICAL: Fixed positioning at bottom center of viewport */
/* SCALED FOR: Always above fullscreen modals with z-contact-input */
.contact-input-wrapper {
  /* UPDATED COMMENTS: Fixed position, always visible above widgets and fullscreen modals */
  position: fixed;
  left: 0;
  right: 0;
  /* CRITICAL: Safe-area padding for iOS home indicator */
  /* UPDATED COMMENTS: Adds padding-bottom for home indicator area */
  bottom: 0;
  padding: 0 20px 20px;
  z-index: var(--z-contact-input, 1000);
  display: flex;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  
  /* SCALED FOR: Hidden by default, shown after body.loaded */
  opacity: 0;
  visibility: hidden;
  transform: translateY(0);
  transition: opacity 0.5s ease-in, visibility 0.5s ease-in, transform 0.28s ease;
  will-change: opacity, transform;
}

/* SCALED FOR: Show contact input after loading is complete */
body.loaded .contact-input-wrapper,
.contact-input-wrapper--visible {
  opacity: 1;
  visibility: visible;
}

.contact-input-wrapper--collapsed {
  opacity: 0;
  transform: translateY(calc(100% + 24px));
  pointer-events: none;
}

/* ANCHOR: contact_input_field */
/* REUSED: Exact Figma auto-layout specs */
.contact-input {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 16px 22px;
  gap: 8px;
  
  width: 440px;
  max-width: 100%;
  min-height: 64px;
  
  /* UPDATED COMMENTS: Semi-transparent background with blur - EXACT FIGMA SPECS */
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(2px);
  border-radius: 30px;
  
  /* REUSED: Hardware acceleration */
  will-change: opacity, background, width;
  cursor: text;
  
  /* SCALED FOR: Smooth width and height transitions */
  transition: width 0.2s ease, min-height 0.2s ease;
}

.contact-input:hover {
  opacity: 0.9;
  background: rgba(0, 0, 0, 0.6);
}

/* ANCHOR: comment_icon */
/* UPDATED COMMENTS: Comment icon on the left - becomes white when has value */
.contact-input__icon {
  width: 20px;
  height: 20px;
  opacity: 0.5;
  
  flex: none;
  order: 0;
  flex-grow: 0;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* REUSED: Smooth opacity change */
  transition: opacity 0.2s ease;
}

.contact-input__icon svg {
  width: 100%;
  height: 100%;
  stroke: #FFFFFF;
  stroke-width: 2px;
  fill: none;
}

/* UPDATED COMMENTS: Icon becomes fully white when input has value */
.contact-input--has-value .contact-input__icon {
  opacity: 1;
}

/* ANCHOR: text_input */
/* REUSED: Geist Mono font from design system */
.contact-input__field {
  width: 100%;
  min-height: 22px;
  max-height: 260px;
  
  font-family: 'Geist Mono', var(--font-family-mono);
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  color: #FFFFFF;
  opacity: 0.8;
  
  /* CRITICAL: Remove default textarea styles */
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  overflow-y: auto;
  overflow-x: hidden;
  word-wrap: break-word;
  white-space: pre-wrap;
  
  flex: 1 1 auto;
  order: 1;
  
  /* SCALED FOR: Smooth height transitions */
  transition: height 0.2s ease;
  
  /* SCALED FOR: Smooth scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.contact-input__field::-webkit-scrollbar {
  width: 4px;
}

.contact-input__field::-webkit-scrollbar-track {
  background: transparent;
}

.contact-input__field::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

.contact-input__field::placeholder {
  color: #FFFFFF;
  opacity: 0.8;
}

.contact-input__field:focus {
  opacity: 1;
}

/* ANCHOR: send_icon */
/* UPDATED COMMENTS: Send icon appears when text entered */
.contact-input__send {
  width: 20px;
  height: 20px;
  opacity: 0;
  
  flex: none;
  order: 2;
  flex-grow: 0;
  
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  
  /* CRITICAL: Disable pointer events when hidden to prevent blocking */
  pointer-events: none;
  
  /* SCALED FOR: Smooth appearance */
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.contact-input__send svg {
  width: 100%;
  height: 100%;
  stroke: #FFFFFF;
  stroke-width: 2px;
  fill: none;
}

/* UPDATED COMMENTS: Show send icon when input has value */
.contact-input--has-value .contact-input__send {
  opacity: 1;
  /* CRITICAL: Enable pointer events when visible */
  pointer-events: auto;
}

.contact-input__send:hover {
  opacity: 1 !important;
  transform: scale(1.1);
}

.contact-input__send:active {
  transform: scale(0.95);
}

/* ANCHOR: responsive_design */
/* SCALED FOR: Mobile and tablet breakpoints */
@media (max-width: 768px) {
  .contact-input-wrapper {
    /* Bottom safe-area is non-zero on iPhone; offset must include it */
    padding: 0 16px 16px;
  }
  
  .contact-input {
    width: 100%;
    /* CRITICAL: Keep compact desktop sizing overridden for mobile width only */
  }
  
  .contact-input__field {
    width: auto;
    /* CRITICAL: Keep desktop text sizing on mobile */
  }
}

@media (max-width: 480px) {
  .contact-input {
    /* CRITICAL: Keep compact desktop sizing on mobile */
  }
  
  .contact-input__icon,
  .contact-input__send {
    /* CRITICAL: Keep compact icon sizing on mobile */
  }
  
  .contact-input__field {
    /* CRITICAL: Keep compact desktop text sizing on mobile */
  }
}