.textarea-input-wrapper {
  position: relative;
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;

  .textarea-container {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  textarea {
    width: 100%;
    min-height: 96px; // 4 linhas * 24px
    padding: 12px 40px 12px 14px; // Espaço para botão clear
    border: 2px solid var(--divider, #e0e0e0);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-primary, #333);
    background-color: var(--surface, #ffffff);
    transition: all 0.2s ease;
    box-sizing: border-box;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical; // Permitir redimensionamento vertical por padrão

    &.resizable {
      resize: both; // Permitir redimensionamento em ambas direções
    }

    &:not(.resizable) {
      resize: none; // Desabilitar redimensionamento
    }

    &:focus {
      outline: none;
      border-color: var(--primary, #007bff);
      box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
    }

    &:hover:not(:disabled):not(:readonly) {
      border-color: var(--primary-light, #66b3ff);
    }

    &::placeholder {
      color: var(--text-secondary, #9ca3af);
      opacity: 0.7;
    }

    // Estados especiais
    &:disabled {
      background-color: var(--surface-disabled, #f5f5f5);
      color: var(--text-disabled, #999);
      cursor: not-allowed;
      border-color: var(--divider, #e0e0e0);
      resize: none;
    }

    &.readonly-textarea {
      background-color: var(--surface-disabled, #f8f9fa) !important;
      color: var(--text-secondary, #666) !important;
      cursor: not-allowed !important;
      border-color: var(--divider, #e0e0e0) !important;
      resize: none;

      &:focus {
        box-shadow: none !important;
        border-color: var(--divider, #e0e0e0) !important;
      }
    }

    // Estilo para texto selecionado
    &::selection {
      background-color: rgba(0, 123, 255, 0.2);
    }

    // Scrollbar personalizada (webkit)
    &::-webkit-scrollbar {
      width: 8px;
    }

    &::-webkit-scrollbar-track {
      background: var(--surface-variant, #f1f3f4);
      border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background: var(--text-secondary, #9ca3af);
      border-radius: 4px;
      
      &:hover {
        background: var(--text-primary, #6b7280);
      }
    }
  }

  label {
    position: absolute;
    left: 14px;
    top: 12px;
    background-color: var(--surface, #ffffff);
    color: var(--text-secondary, #666);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    pointer-events: none;
    padding: 0 4px;
    white-space: nowrap;
    z-index: 2;
    line-height: 1;

    &.active {
      top: -6px;
      font-size: 12px;
      font-weight: 600;
      color: var(--primary, #007bff);
    }
  }

  // Botão de limpeza
  .clear-button {
    position: absolute;
    right: 8px;
    top: 12px;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-secondary, #666);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;

    &:hover {
      background-color: var(--surface-variant, #f1f3f4);
      color: var(--text-primary, #333);
    }

    &:active {
      transform: scale(0.95);
    }

    i {
      font-size: 10px;
    }
  }

  // Estados de foco
  &.focused {
    textarea {
      border-color: var(--primary, #007bff);
      box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
    }

    label {
      color: var(--primary, #007bff);
    }

    .clear-button {
      opacity: 1;
    }
  }

  // Estados para readonly
  &.readonly {
    label {
      color: var(--text-secondary, #666) !important;

      &.active {
        color: var(--text-secondary, #666) !important;
      }
    }

    .clear-button {
      display: none;
    }
  }

  // Estados de validação
  &.near-limit {
    .char-counter .counter-text {
      color: var(--warning, #f59e0b);
      font-weight: 600;
    }
  }

  &.over-limit {
    textarea {
      border-color: var(--danger, #dc3545);
      
      &:focus {
        box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
      }
    }

    label.active {
      color: var(--danger, #dc3545);
    }

    .char-counter .counter-text {
      color: var(--danger, #dc3545);
      font-weight: 700;
    }
  }
}

// Informações do textarea
.textarea-info {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

// Contador de caracteres
.char-counter {
  display: flex;
  align-items: center;
  gap: 8px;
  
  .counter-text {
    font-size: 12px;
    color: var(--text-secondary, #666);
    font-weight: 500;
    
    .max-length {
      opacity: 0.7;
    }
    
    &.warning {
      color: var(--warning, #f59e0b);
    }
    
    &.error {
      color: var(--danger, #dc3545);
    }
  }
  
  .progress-bar {
    flex: 1;
    height: 3px;
    background-color: var(--surface-variant, #e5e7eb);
    border-radius: 2px;
    overflow: hidden;
    
    .progress-fill {
      height: 100%;
      background-color: var(--primary, #007bff);
      transition: all 0.3s ease;
      border-radius: 2px;
      
      &.warning {
        background-color: var(--warning, #f59e0b);
      }
      
      &.error {
        background-color: var(--danger, #dc3545);
      }
    }
  }
}

// Mensagem de erro
.error-message {
  color: var(--danger, #dc3545);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;

  i {
    font-size: 11px;
  }
}

// Indicadores de estado
.state-indicators {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
  pointer-events: none;

  .readonly-indicator {
    color: var(--text-secondary, #666);
    font-size: 12px;
    opacity: 0.7;

    i {
      font-size: 11px;
    }
  }
}

// Dicas úteis
.textarea-hints {
  margin-top: 8px;
  padding: 8px 12px;
  background-color: var(--surface-variant, #f8f9fa);
  border-radius: 6px;
  border: 1px solid var(--divider, #e5e7eb);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  animation: fadeIn 0.2s ease;

  .hint-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-secondary, #666);

    i {
      font-size: 10px;
      opacity: 0.7;
    }

    span {
      font-weight: 500;
    }
  }
}

// Indicador obrigatório
.required-indicator {
  color: var(--danger, #dc3545);
  margin-left: 4px;
  font-weight: 700;
  font-size: 14px;
}

// Responsividade
@media (max-width: 768px) {
  .textarea-input-wrapper {
    textarea {
      font-size: 16px; // Evita zoom no iOS
      padding: 14px 40px 14px 16px;
    }

    label {
      left: 16px;
      
      &.active {
        font-size: 11px;
      }
    }

    .clear-button {
      right: 10px;
    }
  }

  .textarea-hints {
    .hint-item {
      font-size: 10px;
    }
  }
}

// Animações
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// Transições suaves
textarea, label, .clear-button, .progress-fill {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

// Modo escuro (se aplicável)
:host-context(.dark-theme) {
  .textarea-input-wrapper {
    textarea {
      background-color: var(--surface-dark, #1f2937);
      color: var(--text-primary-dark, #f9fafb);
      border-color: var(--divider-dark, #374151);

      &::placeholder {
        color: var(--text-secondary-dark, #9ca3af);
      }
    }

    label {
      background-color: var(--surface-dark, #1f2937);
      color: var(--text-secondary-dark, #9ca3af);
    }
  }

  .textarea-hints {
    background-color: var(--surface-variant-dark, #374151);
    border-color: var(--divider-dark, #4b5563);
  }
} 