.textarea-wrapper {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    margin-top: 20px;
}

#improvement-feedback {
    width: 100%;
    padding: 12px;
    border: 1px solid #d1d9e0;
    border-radius: 8px;
    font-size: 14px;
    background: #fafafa;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03);
    resize: none;
    position: relative;
    z-index: 1;
    /* Ensure textarea is below the placeholder in stacking order */
}

#improvement-feedback:focus {
    border-color: #1a2d5a;
    box-shadow: 0 0 0 3px rgba(26, 45, 90, 0.1);
    outline: none;
}

.textarea-placeholder {
    position: absolute;
    top: 12px;
    left: 12px;
    color: #9ca3af;

    font-style: normal;
    pointer-events: none;
    z-index: 2;
    opacity: 1;
}

/* Hide placeholder when textarea has content or is focused */
#improvement-feedback:not(:placeholder-shown)+.textarea-placeholder,
#improvement-feedback:focus+.textarea-placeholder {
    opacity: 0;
}

@media (max-width: 768px) {
    .textarea-wrapper {
        max-width: 100%;
    }
}