/* 提示词输入框自动伸缩样式 */
#prompt-input,
#img2img-prompt-input {
    /* 允许手动调整大小 */
    resize: vertical;
    
    /* 自动调整高度的基础样式 */
    overflow: hidden;
    min-height: 60px;
    max-height: 400px;
    
    /* 确保平滑过渡 */
    transition: height 0.2s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    
    /* 基础样式 */
    background-color: var(--input-bg, #ffffff);
    border: 2px solid var(--border-color, #e5e7eb);
    color: var(--text-color, #111827);
    border-radius: var(--radius, 8px);
    font-size: 16px;
    padding: 12px 16px;
    width: 100%;
    font-family: inherit;
    line-height: 1.5;
    box-sizing: border-box;
}

#prompt-input:focus,
#img2img-prompt-input:focus {
    border-color: var(--primary-color, #8b5cf6);
    outline: none;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

/* 占位符样式 */
#prompt-input::placeholder,
#img2img-prompt-input::placeholder {
    color: var(--light-text, #6b7280);
    font-style: italic;
    opacity: 0.8;
}

/* 移动端优化 */
@media (max-width: 768px) {
    #prompt-input,
    #img2img-prompt-input {
        font-size: 16px; /* 防止iOS缩放 */
        min-height: 50px;
        max-height: 300px;
        padding: 10px 14px;
    }
}

/* 聚焦时的增强效果 */
#prompt-input:focus,
#img2img-prompt-input:focus {
    background-color: #ffffff;
    border-color: var(--primary-color, #8b5cf6);
    box-shadow: 
        0 0 0 3px rgba(139, 92, 246, 0.1),
        0 4px 12px rgba(0, 0, 0, 0.05);
}

/* 拖拽调整大小的样式优化 */
#prompt-input::-webkit-resizer,
#img2img-prompt-input::-webkit-resizer {
    background: linear-gradient(-45deg, transparent 40%, rgba(139, 92, 246, 0.3) 50%, transparent 60%);
    border-radius: 0 0 8px 0;
}

/* 文字计数器样式 */
.prompt-container {
    position: relative;
}

.char-counter {
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: 12px;
    color: var(--light-text, #6b7280);
    background: rgba(255, 255, 255, 0.9);
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 10;
    font-family: monospace;
}

.char-counter.warning {
    color: #f59e0b;
}

.char-counter.error {
    color: #ef4444;
}
