/**
 * TEXTAREA HEIGHT TOGGLE - CSS
 * Add this to omnipostr-optimization.css or as separate file
 */

/* ============================================
   Textarea Toggle Button (Matches Tool Buttons)
   ============================================ */

.textarea-height-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #D1D5DB; /* Same as tool buttons */
  background: #FFFFFF;
  color: #374151;
  padding: 6px 10px; /* Same as tool buttons */
  border-radius: 10px; /* Same as tool buttons */
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 120ms ease; /* Same timing */
  white-space: nowrap;
  flex-shrink: 0;
}

.textarea-height-toggle:hover {
  background: #F3F4F6; /* Same hover background */
  border-color: #9CA3AF; /* Same hover border */
  transform: translateY(-1px); /* Same lift effect */
  box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Same shadow */
}

.textarea-height-toggle.expanded {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

.textarea-height-toggle.expanded:hover {
  background: #2563eb;
  border-color: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.15);
}

.textarea-height-toggle svg {
  display: block;
}

/* ============================================
   Expanded Textarea State
   ============================================ */

/* Normal state - already defined in optimization */
.output-card.is-zoomed .edit-textarea {
  min-height: 220px !important;
  max-height: none !important;
  height: auto !important;
  overflow-y: hidden !important;
  overflow-x: hidden !important;
}

/* Expanded state - much taller */
.output-card.is-zoomed .edit-textarea.textarea-expanded {
  min-height: 420px !important;
  max-height: none !important;
  height: auto !important;
  overflow-y: hidden !important;
  overflow-x: hidden !important;
}

/* Non-zoomed cards */
.edit-textarea.textarea-expanded {
  min-height: 500px !important;
}