/* --- Base & Body --- */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    color: #1f2937; /* text-gray-800 */
    margin: 0;
    padding: 1rem; /* p-4 */
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* overflow: hidden; */
}

/* --- Background Animation --- */
.gradient-bg {
    position: fixed;
    inset: 0;
    z-index: -10;
    background: linear-gradient(-45deg, #e0c3fc, #fbc2eb, #8ec5fc, #a1c4fd);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- Main Card --- */
.main-card {
     /* Needed for positioning the pseudo-element */
    width: 100%;
    max-width: 44rem; 
    padding: 1.5rem; 
    background-color: rgba(255, 255, 255, 0.749); 
    -webkit-backdrop-filter: blur(16px); 
    backdrop-filter: blur(16px);
    border-radius: 1.5rem; 
    box-shadow: 0px 5px 25px -9px rgba(43, 128, 255, 0.39); 
    transition: all 0.4s ease-in-out;
    position: relative; 
    z-index: 1;
}

.main-card:hover{
    transform: scale(1.02) translateY(-8px);
    box-shadow:0px 5px 25px 0px rgba(43, 128, 255, 0.39);
}

/* Responsive padding for the card */
@media (min-width: 640px) {
    .main-card {
        padding: 2.5rem; 
    }
}

/* --- Header & Typography --- */
.header-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem; 
    margin-bottom: 1rem; 
}

.header-icon {
    height: 2rem; 
    width: 2rem;  
    color: #2563eb; 
    transition: all 0.4s ease-in-out;
    filter: drop-shadow(0px 0px 3px rgba(65, 160, 224, 0.292)); 
}
.header-icon:hover{
    transform: scale(1.1) translateY(-8px);
    filter: drop-shadow(0px 0px 3px rgba(46, 157, 231, 0.37)); 
}

.header-title{
    font-size: 1.875rem; 
    font-weight: 700; 
    text-align: center;
    color: #1f2937; 
    text-shadow: 0px 2px 3px rgba(51, 154, 222, 0.356); /* Added a more visible text shadow */
}

.header-title span {
    display: inline-block; /* Allows transform to work */
    transition: all 0.5s cubic-bezier(0.20, 0.8, 0.25, 1); /* Smoother transition */
}
.header-title span:hover {
    transform: scale(1.02) translateY(-8px);
}

/* Responsive title size */
@media (min-width: 640px) {
    .header-title {
        font-size: 2.25rem; /* sm:text-4xl */
    }
}

.subheader {
    text-align: center;
    color: #6b7280; 
    margin-top: -1rem; 
    margin-bottom: 3rem; 
}
.subheader span{
    display: inline-block; 
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smoother transition */
}

.subheader span:hover{
     transform: scale(1.02) translateY(-5px);
}

.footer {
    text-align: center;
    color: #9ca3af; 
    font-size: 0.875rem; 
    margin-top: 3rem; /* mt-8 */
    margin-bottom: 0rem;
    transition: all 0.4s ease-in-out;
}

.footer:hover{
    transform: scale(1.08)translateY(-5px);
}

label {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #374151; 
    margin-bottom: 0.5rem; 
}

/* --- Textareas & Inputs --- */
textarea {
    width: 100%;
    padding: 1rem; 
    border: 1.5px solid #d1d5db; 
    background-color: #fdfdfd84;
    border-radius: 0.5rem; 
    box-shadow: inset 0px 0px 5px 2px rgba(0,0,0,0.05); 
    resize: none;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease-in-out ;
}

textarea:focus {
    outline: none;
    border-color: #377ae6ce; /* focus:ring-blue-500 */
    box-shadow: inset 0px 0px 5px 0px #398bf767; /* focus:ring-2 */
}

#input-text {
    min-height: 268px; /* From rows=10 */
}

#input-display {
    width: 100%;
    height: 268px;
    padding: 1rem; /* p-4 */
    border: 1px solid #d1d5db; /* border border-gray-300 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.05); /* shadow-inner */
    background-color: #ffffff; /* bg-gray-50 */
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

#input-display mark {
    background-color: #fecdd3; /* pink-200 */
    border-radius: 3px;
    padding: 1px 3px;
    font-weight: 500;
}

#output-text {
    background-color: #ffffffdd; /* bg-gray-100 */
    border: 1px solid #d1d5db;
    min-height: 220px; /* From rows=8 */
    transition: all 0.3s ease-in-out;
    padding: 1rem;
}
/* NEW: Target the emoji in the label */
label[for="input-text"] span {
    display: inline-block;
    transition: all 0.5s ease-in-out;
}
label[for="input-text"] span:hover {
    transform: scale(1.5) translateY(-7px) rotate(360deg);
}
label[for="output-text"] span{
   display: inline-block;
   transition: all 0.5s ease-in-out;
}
label[for="output-text"] span:hover {
    animation: bounce 0.5s ease-in-out infinite alternate ; /* Apply the bounce animation */
}

#output-text:hover {
    outline: none;
    border-color: #12b34d; /* focus:ring-green-500 */
    box-shadow:inset 0px 0px 5px 0px #33ff7e9b; /* focus:ring-2 */
}

/* Keyframes for the bounce animation */
@keyframes bounce {
    from { transform:scale(1.5) translateY(2px);}
    to { transform:scale(1.5) translateY(-15px);} /* Adjust translateY for the bounce height */
}

/* --- Button Container --- */
.button-container {
    margin-top: 1rem; 
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem; 
}

/* --- Buttons (Base) --- */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; 
    padding: 0.75rem 1.5rem; 
    font-weight: 600; 
    border-radius: 0.5rem; 
    border: none;
    box-shadow: 0 4px 10px 0 rgba(9, 59, 167, 0.386); 
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    /* Responsive width */
    width: 100%; 
}

.button:hover{
    transform: scale(1.08) translateZ(-5px);
}

.button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.button:focus {
    border: 2px solid rgba(252, 252, 252, 0.87);
    outline: none;
}

/* Responsive button width */
@media (min-width: 640px) {
    .button {
        width: auto; 
    }
}

/* Correct Button */
#correct-btn {
    color: #ffffff;
    background: linear-gradient(-45deg, #d6b1fbf0,#3f92e4c7, #50bbf5c5);
    transition: all 0.4s ease-in-out;
}
   
#correct-btn:hover:not(:disabled) {
    background: linear-gradient(-45deg, #dab9f8d7, #fbc2ebd7, #83c1fe, #a1c4fdd0,#f89eded7, #c17eff8f);
    background-size: 400% 400%; 
    animation: gradient 3s ease infinite; 
    
}

#correct-btn .icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem; 
    height: 1.5rem; 
    border: 2px solid rgb(255, 255, 255); 
    border-radius: 0.25rem; 
    transition: all 0.4s ease-in-out;
}

#correct-btn:hover:not(:disabled) .icon-box {
   transform: scale(1.04) rotate(47deg);
}

#correct-btn .icon-box svg {
    height: 1rem; 
    width: 1rem; 
}


#loader {
    animation: spin-pulse 1.5s cubic-bezier(0.6, 0, 0.4, 1) infinite;
    height: 1.5rem;
    width: 1.5rem;
    border: 3.8px solid #ffffff; /* Light grey border */
    border-top-color: #cf32fef0; /* Blue color for the top part */
    border-radius: 50%;
}

@keyframes spin-pulse {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


#clear-btn {
    background-color: #4b5563; 
    color: white;
    transition: all 0.3s ease-in-out;
    border: none; 
    outline: 2px solid rgba(41, 18, 125, 0.493); 
    outline-offset: 3px; /* This creates the gap between the button and the outline frame */
}
#clear-btn:hover:not(:disabled) {
    background-color: #374151; /* hover:bg-gray-700 */
    box-shadow: 0px 0px 6px 0px #2c87f088;
    transform: scale(1.08) translateZ(25px);
}
#clear-btn svg {
    height: 1.25rem; 
    width: 1.25rem; 
    transition: transform 0.3s ease-in-out; /* Add transition for smooth animation */
}


#clear-btn:hover:not(:disabled) svg {
    transform: scale(1.04) rotate(47deg);
}

/* --- Output Section --- */
#output-container {
    margin-top: 1.5rem; 
}

.output-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem; 
}

/* Copy Button */
#copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem; 
    margin-bottom: 0.3rem;
    font-size: 0.875rem; 
    color: #22313bef; 
    font-weight: 500; 
    background: linear-gradient(-45deg, #cafef8e1,#a8e3ffcf, #ffbffcdc);
    box-shadow: 0px 2px 4px 0px rgba(36, 77, 139, 0.397);
    border: none;
    border-radius: 0.4rem; 
    padding: 0.375rem 0.75rem; 
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
#copy-btn:hover {
    transform: scale(1.05);
}
#copy-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#copy-btn .copy-icon {
    display: inline-block;
    font-size: 1.40rem;
    transition: all 0.45s ease-in-out;
}

#copy-btn:hover:not(:disabled) .copy-icon {
    transform: scale(1.2) rotate(360deg);
}
#error-message {
    background-color: #fee2e2; 
    border: 1px solid #f87171; 
    color: #b91c1c; 
    padding: 1rem; 
    border-radius: 0.5rem; 
    margin-bottom: 1rem;
    margin-top: -1rem;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0.3s, margin-bottom 0.3s ease-in-out, padding 0.3s ease-in-out;
    
    visibility: hidden;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}
#error-message.show {
     
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    padding: 1rem;
    margin-bottom: 1.5rem; 
}
#error-message strong {
    font-weight: 700; 
}

#copy-msg {
    color: #26b386; 
    font-size: 0.875rem; 
    margin-bottom: 0.5rem; 
    display: block; 
    text-align: center;
    opacity: 0; 
    transform: translateY(-5px); 
    transition: all 0.4s ease-in-out;
}

.hidden {
    
    display: none; 
}

.hidden:not(#error-message) {
    display: none !important;
}


#copy-msg:not(.hidden) {
    opacity: 1;
    transform: translateY(0);
}
/* --- Particle Animation --- */
#particles-container {
    position: fixed;
    inset: 0;
    z-index: -9; 
    overflow: hidden; 
    pointer-events: none; 
}

.particle {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.6); 
    border-radius: 50%;
    animation: float-and-fade var(--duration) linear infinite;
    opacity: 0; 
    animation-delay: var(--delay); 
}

@keyframes float-and-fade {
    0% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 0.6; 
    }
    50% {
        transform: translateY(calc(var(--float-distance) * -1)) translateX(calc(var(--float-distance) / 2)) scale(1.1);
        opacity: 1; 
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0;
    }
}

#tone-changer-container {
    margin-top: 1.5rem;
}

.tone-label {
    display: flex;
    align-items: center;
    gap: 0.5rem; 
    font-size: 1rem; 
    font-weight: 600; 
    color: #374151; 
    margin-bottom: 0.75rem;
    justify-content: center;
}

#tone-loader {
    animation: spin 1.2s cubic-bezier(0.6, 0, 0.4, 1) infinite;
    height: 1.5rem;
    width: 1.5rem;
    border: 3.5px solid #ffffff; 
    border-top-color: #25afff; /* Blue color for the top part */
    border-radius: 50%;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.tone-buttons {
    gap: 1rem; /* Smaller gap */
    justify-content: center; 
}

.button-secondary {
    background: linear-gradient(-45deg,#e9fcffbb,#e6eeffb3,#ecfff8b0);
    color: #22313bef;
    box-shadow: 0px 2px 4px 0px rgba(36, 77, 139, 0.397) ;
    font-size: 0.875rem; 
    padding: 0.5rem 1rem; 
    transition: all 0.3s ease-in-out;
}

.button-secondary:hover:not(:disabled){
    transform: scale(1.05) translateY(-5px);
}

.tone-icon {
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 
}


.button-secondary:hover:not(:disabled) .tone-icon {
    transform: scale(1.5) translateZ(200px);
}