/**
 * Chatbot Input - Placeholder Animation
 * 
 * Rotating Placeholder mit smooth fade transition.
 * 
 * @package SMG_Mall
 * @since 2.1.0
 */

/* ========================================
   Placeholder Element
   ======================================== */

.chatbot-input__placeholder {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #9ca3af;
    font-size: 16px;
    line-height: 1.5;
    transition: all 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 140px); /* Platz für Buttons */
}

/* Focus State - Hellere Farbe */
.chatbot-input:focus ~ .chatbot-input__placeholder {
    color: #d1d5db;
}

/* ========================================
   Animation State
   ======================================== */

.chatbot-input__placeholder--animating {
    opacity: 0;
    transform: translateY(-50%) translateY(8px);
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 640px) {
    .chatbot-input__placeholder {
        left: 16px;
        font-size: 15px;
        max-width: calc(100% - 120px);
    }
}

@media (max-width: 375px) {
    .chatbot-input__placeholder {
        left: 14px;
        font-size: 14px;
        max-width: calc(100% - 100px);
    }
}