@import url('site.css');


.phone-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 45/41;
    max-width: 720px;
    overflow: hidden;
    border: 0px solid #ccc;
    /* Fade out at the bottom of the screen */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 93%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 93%, rgba(0,0,0,0) 100%);
    mask-size: cover;
    mask-repeat: no-repeat;
}

.phone-bg {
    position: absolute;
    inset: 0;
    background: url('/images/PhoneBackgroundGraphicTransparant.png') no-repeat center/100% 100%;
    z-index: -1;
}

.phone-inner {
    position: relative;
    width: 100%;
    height: 75%;
    z-index: 0;
}









/* Container holds the sizer and textarea */
.preview-container {
    position: absolute;
    top: 55%;
    left: 28%;
    width: 66.1%;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    align-items: flex-end;
}

/* 
 * The sizer: Must perfectly mirror textarea's text-related styles.
 * It's hidden and used only for measurement.
*/
.textarea-sizer {
    position: absolute;
    visibility: hidden;
    top: -9999px;
    left: -9999px;
    /* --- MIRRORED STYLES (CRITICAL) --- */
    white-space: pre-wrap;
    word-break: break-word;
    padding: 0.55rem 0.9rem;
    box-sizing: border-box;
    font-size: 1.45rem !important;
    font-family: CleanText;
    line-height: 1.25;
}

/* 
 * The Textarea: All sizing is now handled by JS.
 * CSS only defines its appearance and resets.
*/
.message-textarea {
    /* Basic Resets */
    border: none;
    outline: none;
    resize: none;
    overflow: hidden; /* Start with scrollbar hidden. JS will manage it. */
    background-color: transparent;
    /* --- Your Visual Styling (No size properties!) --- */
    position: relative;
    white-space: pre-wrap;
    word-break: break-word;
    text-align: left;
    background-image: linear-gradient( to top right, var(--accent-color), color-mix(in srgb, var(--accent-color) 85%, white) );
    color: #fff;
    border-radius: 0.75rem;
    padding: 0.55rem 0.9rem;
    box-sizing: border-box;
    z-index: 1;
    font-size: 1.45rem !important;
    font-family: CleanText;
    line-height: 1.25;
}

    /* Placeholder and Sheen effect CSS remain the same */
    .message-textarea::placeholder {
        color: #D3D3D3;
        opacity: 1;
    }

    .message-textarea:placeholder-shown::after {
        content: "";
        position: absolute;
        top: 0;
        left: -150%;
        width: 50%;
        height: 100%;
        background: linear-gradient( 120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100% );
        transform: skewX(-20deg);
        animation: sheen-animation 4.5s infinite;
        pointer-events: none;
        z-index: 2;
        border-radius: 0.75rem;
    }

@keyframes sheen-animation { 
    0% {
        left: -150%;
    }

    30% {
        left: 110%;
    }

    100% {
        left: 110%;
    }
}









#wordCount {
    position: absolute;
    right: 0;
    bottom: -1.5em;
    font-size: 1em;
    color: #666;
    padding-left: 0;
    padding-right: 0.5rem;
    text-align: right;
    transition: color 0.3s ease; /* Smooth color change */
}
    /* A warning state for when the user is getting close */
    #wordCount.warning {
        color: #f0ad4e; /* A nice warning orange */
        font-weight: bold;
    }

    /* A limit state for when the user hits the max */
    #wordCount.limit-reached {
        color: #d9534f; /* A clear danger red */
        font-weight: bold;
    }

.receiver-box {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    color: #2e2e2e !important;
}

/* Receiver input cleanup */
#receiver {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: #2e2e2e !important;
    text-align: center;
    font-size: 1.2em !important;
}


@media screen and (max-width: 767px) {

    /* Make the container wider and center it reliably */
    .preview-container {
        /* Keep vertical position if you like it */
        top: 55%;
        /* This is a robust way to center an absolutely positioned element */
        left: 50%;
        transform: translateX(-50%);
        width: 90%; /* Use more of the screen width */
    }

    /* Adjust font size for the visible textarea on mobile */
    .message-textarea {
        font-size: 1.1rem !important;
    }

    /* 
     * CRITICAL: The sizer must EXACTLY match the textarea's font-size
     * on mobile for the calculations to be correct.
    */
    .textarea-sizer {
        font-size: 1.1rem !important;
    }

    /* This correctly targets the sheen effect on the textarea */
    .message-textarea:placeholder-shown::after {
        animation-duration: 3s;
    }

    .receiver-box {
        position: absolute;
        top: 33%;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
    }

    #receiver {
        font-size: 0.95em !important;
    }

    #previewMessage:empty::after {
        animation-duration: 3s;
    }

    #wordCount {
        position: absolute;
        right: 0;
        bottom: -1.5em;
        font-size: 0.8em;
        color: #666;
        padding-left: 0;
        padding-right: 0.5rem;
        text-align: right;
    }
}

@media screen and (max-width: 510px) {
    /* Make the container wider and center it reliably */
    .preview-container {
        /* Keep vertical position if you like it */
        top: 55%;
        /* This is a robust way to center an absolutely positioned element */
        left: 50%;
        transform: translateX(-50%);
        width: 90%; /* Use more of the screen width */
    }

    /* Adjust font size for the visible textarea on mobile */
    .message-textarea {
        font-size: 1.1rem !important;
    }

    /* 
     * CRITICAL: The sizer must EXACTLY match the textarea's font-size
     * on mobile for the calculations to be correct.
    */
    .textarea-sizer {
        font-size: 1.1rem !important;
    }

    /* This correctly targets the sheen effect on the textarea */
    .message-textarea:placeholder-shown::after {
        animation-duration: 3s;
    }

    .receiver-box {
        position: absolute;
        top: 30.8%;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
    }

    #receiver {
        font-size: 0.95em !important;
    }

    #previewMessage:empty::after {
        animation-duration: 3s;
    }

    #wordCount {
        position: absolute;
        right: 0;
        bottom: -1.5em;
        font-size: 0.8em;
        color: #666;
        padding-left: 0;
        padding-right: 0.5rem;
        text-align: right;
    }
}

@media screen and (max-width: 440px) {
    /* Make the container wider and center it reliably */
    .preview-container {
        /* Keep vertical position if you like it */
        top: 55%;
        /* This is a robust way to center an absolutely positioned element */
        left: 50%;
        transform: translateX(-50%);
        width: 90%; /* Use more of the screen width */
    }

    /* Adjust font size for the visible textarea on mobile */
    .message-textarea {
        font-size: 1.1rem !important;
    }

    /* 
     * CRITICAL: The sizer must EXACTLY match the textarea's font-size
     * on mobile for the calculations to be correct.
    */
    .textarea-sizer {
        font-size: 1.1rem !important;
    }

    /* This correctly targets the sheen effect on the textarea */
    .message-textarea:placeholder-shown::after {
        animation-duration: 3s;
    }

    .receiver-box {
        position: absolute;
        top: 29.5%;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
    }

    #receiver {
        font-size: 0.95em !important;
    }

    #previewMessage:empty::after {
        animation-duration: 3s;
    }

    #wordCount {
        position: absolute;
        right: 0;
        bottom: -1.5em;
        font-size: 0.8em;
        color: #666;
        padding-left: 0;
        padding-right: 0.5rem;
        text-align: right;
    }
}

@media screen and (max-width: 420px) {
    /* Make the container wider and center it reliably */
    .preview-container {
        /* Keep vertical position if you like it */
        top: 55%;
        /* This is a robust way to center an absolutely positioned element */
        left: 50%;
        transform: translateX(-50%);
        width: 90%; /* Use more of the screen width */
    }

    /* Adjust font size for the visible textarea on mobile */
    .message-textarea {
        font-size: 1.1rem !important;
    }

    /* 
     * CRITICAL: The sizer must EXACTLY match the textarea's font-size
     * on mobile for the calculations to be correct.
    */
    .textarea-sizer {
        font-size: 1.1rem !important;
    }

    /* This correctly targets the sheen effect on the textarea */
    .message-textarea:placeholder-shown::after {
        animation-duration: 3s;
    }

    .receiver-box {
        position: absolute;
        top: 29%;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
    }

    #receiver {
        font-size: 0.9em !important;
    }

    #previewMessage:empty::after {
        animation-duration: 3s;
    }

    #wordCount {
        position: absolute;
        right: 0;
        bottom: -1.5em;
        font-size: 0.8em;
        color: #666;
        padding-left: 0;
        padding-right: 0.5rem;
        text-align: right;
    }
}

@media screen and (max-width: 380px) {
    /* Make the container wider and center it reliably */
    .preview-container {
        /* Keep vertical position if you like it */
        top: 55%;
        /* This is a robust way to center an absolutely positioned element */
        left: 50%;
        transform: translateX(-50%);
        width: 90%; /* Use more of the screen width */
    }

    /* Adjust font size for the visible textarea on mobile */
    .message-textarea {
        font-size: 1.1rem !important;
    }

    /* 
     * CRITICAL: The sizer must EXACTLY match the textarea's font-size
     * on mobile for the calculations to be correct.
    */
    .textarea-sizer {
        font-size: 1.1rem !important;
    }

    /* This correctly targets the sheen effect on the textarea */
    .message-textarea:placeholder-shown::after {
        animation-duration: 3s;
    }

    .receiver-box {
        position: absolute;
        top: 27%;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
    }

    #receiver {
        font-size: 0.9em !important;
    }

    #previewMessage:empty::after {
        animation-duration: 3s;
    }

    #wordCount {
        position: absolute;
        right: 0;
        bottom: -1.5em;
        font-size: 0.8em;
        color: #666;
        padding-left: 0;
        padding-right: 0.5rem;
        text-align: right;
    }
}

@media screen and (max-width: 360px) {
    /* Make the container wider and center it reliably */
    .preview-container {
        /* Keep vertical position if you like it */
        top: 55%;
        /* This is a robust way to center an absolutely positioned element */
        left: 50%;
        transform: translateX(-50%);
        width: 90%; /* Use more of the screen width */
    }

    /* Adjust font size for the visible textarea on mobile */
    .message-textarea {
        font-size: 1.1rem !important;
    }

    /* 
     * CRITICAL: The sizer must EXACTLY match the textarea's font-size
     * on mobile for the calculations to be correct.
    */
    .textarea-sizer {
        font-size: 1.1rem !important;
    }

    /* This correctly targets the sheen effect on the textarea */
    .message-textarea:placeholder-shown::after {
        animation-duration: 3s;
    }

    .receiver-box {
        position: absolute;
        top: 25%;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
    }

    #receiver {
        font-size: 0.85em !important;
    }

    #previewMessage:empty::after {
        animation-duration: 3s;
    }

    #wordCount {
        position: absolute;
        right: 0;
        bottom: -1.5em;
        font-size: 0.8em;
        color: #666;
        padding-left: 0;
        padding-right: 0.5rem;
        text-align: right;
    }
}

@media screen and (max-width: 350px) {
    /* Make the container wider and center it reliably */
    .preview-container {
        /* Keep vertical position if you like it */
        top: 55%;
        /* This is a robust way to center an absolutely positioned element */
        left: 50%;
        transform: translateX(-50%);
        width: 90%; /* Use more of the screen width */
    }

    /* Adjust font size for the visible textarea on mobile */
    .message-textarea {
        font-size: 1.1rem !important;
    }

    /* 
     * CRITICAL: The sizer must EXACTLY match the textarea's font-size
     * on mobile for the calculations to be correct.
    */
    .textarea-sizer {
        font-size: 1.1rem !important;
    }

    /* This correctly targets the sheen effect on the textarea */
    .message-textarea:placeholder-shown::after {
        animation-duration: 3s;
    }

    .receiver-box {
        position: absolute;
        top: 25%;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
    }

    #receiver {
        font-size: 0.85em !important;
    }

    #previewMessage:empty::after {
        animation-duration: 3s;
    }

    #wordCount {
        position: absolute;
        right: 0;
        bottom: -1.5em;
        font-size: 0.8em;
        color: #666;
        padding-left: 0;
        padding-right: 0.5rem;
        text-align: right;
    }
}

@media screen and (max-width: 330px) {
    /* Make the container wider and center it reliably */
    .preview-container {
        /* Keep vertical position if you like it */
        top: 55%;
        /* This is a robust way to center an absolutely positioned element */
        left: 50%;
        transform: translateX(-50%);
        width: 90%; /* Use more of the screen width */
    }

    /* Adjust font size for the visible textarea on mobile */
    .message-textarea {
        font-size: 1.1rem !important;
    }

    /* 
     * CRITICAL: The sizer must EXACTLY match the textarea's font-size
     * on mobile for the calculations to be correct.
    */
    .textarea-sizer {
        font-size: 1.1rem !important;
    }

    /* This correctly targets the sheen effect on the textarea */
    .message-textarea:placeholder-shown::after {
        animation-duration: 3s;
    }

    .receiver-box {
        position: absolute;
        top: 23%;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
    }

    #receiver {
        font-size: 0.73em !important;
    }

    #previewMessage:empty::after {
        animation-duration: 3s;
    }

    #wordCount {
        position: absolute;
        right: 0;
        bottom: -1.5em;
        font-size: 0.7em;
        color: #666;
        padding-left: 0;
        padding-right: 0.5rem;
        text-align: right;
    }
}

@media screen and (max-width: 315px) {
    /* Make the container wider and center it reliably */
    .preview-container {
        /* Keep vertical position if you like it */
        top: 55%;
        /* This is a robust way to center an absolutely positioned element */
        left: 50%;
        transform: translateX(-50%);
        width: 90%; /* Use more of the screen width */
    }

    /* Adjust font size for the visible textarea on mobile */
    .message-textarea {
        font-size: 1.1rem !important;
    }

    /* 
     * CRITICAL: The sizer must EXACTLY match the textarea's font-size
     * on mobile for the calculations to be correct.
    */
    .textarea-sizer {
        font-size: 1.1rem !important;
    }

    /* This correctly targets the sheen effect on the textarea */
    .message-textarea:placeholder-shown::after {
        animation-duration: 3s;
    }

    .receiver-box {
        position: absolute;
        top: 24%;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
    }

    #receiver {
        font-size: 0.7em !important;
    }

    #previewMessage:empty::after {
        animation-duration: 3s;
    }

    #wordCount {
        position: absolute;
        right: 0;
        bottom: -1.5em;
        font-size: 0.7em;
        color: #666;
        padding-left: 0;
        padding-right: 0.5rem;
        text-align: right;
    }
}

@media screen and (max-width: 250px) {
    /* Make the container wider and center it reliably */
    .preview-container {
        /* Keep vertical position if you like it */
        top: 55%;
        /* This is a robust way to center an absolutely positioned element */
        left: 50%;
        transform: translateX(-50%);
        width: 90%; /* Use more of the screen width */
    }

    /* Adjust font size for the visible textarea on mobile */
    .message-textarea {
        font-size: 1.1rem !important;
    }

    /* 
     * CRITICAL: The sizer must EXACTLY match the textarea's font-size
     * on mobile for the calculations to be correct.
    */
    .textarea-sizer {
        font-size: 1.1rem !important;
    }

    /* This correctly targets the sheen effect on the textarea */
    .message-textarea:placeholder-shown::after {
        animation-duration: 3s;
    }

    .receiver-box {
        position: absolute;
        top: 16%;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
    }

    #receiver {
        font-size: 0.5em !important;
    }

    #previewMessage:empty::after {
        animation-duration: 3s;
    }

    #wordCount {
        position: absolute;
        right: 0;
        bottom: -1.5em;
        font-size: 0.5em;
        color: #666;
        padding-left: 0;
        padding-right: 0.5rem;
        text-align: right;
    }
}