* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    :root {
        --background: 0 0% 100%;
        --foreground: 0 0% 13%;
        --surface: 0 0% 99%;
        --surface-secondary: 0 0% 97%;
        --border: 0 0% 90%;
        --border-subtle: 0 0% 95%;
        --input: 0 0% 97%;
        --input-border: 0 0% 88%;
        --text-primary: 0 0% 13%;
        --text-secondary: 0 0% 40%;
        --text-tertiary: 0 0% 60%;
        --text-disabled: 0 0% 75%;
        --accent: 212 100% 50%;
        --accent-hover: 212 100% 45%;
        --accent-foreground: 0 0% 100%;
        --record: 0 84% 60%;
        --record-hover: 0 84% 55%;
        --record-active: 0 84% 50%;
        --hover: 0 0% 96%;
        --active: 0 0% 94%;
        --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
        --radius: 12px;
        --radius-sm: 8px;
    }


    @font-face {
        font-family: 'Montserrat';
        src: url('../fonts/Montserrat/static/Montserrat-SemiBold.ttf') format('truetype');
        font-weight: 600;
        font-display: swap;
    }

    @font-face {
        font-family: 'DM Sans';
        src: url('../fonts/DM_Sans/static/DMSans-Bold.ttf') format('truetype');
        font-weight: 600;
        font-display: swap;
    }

    body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        background-color: hsl(var(--background));
        color: hsl(var(--foreground));
        line-height: 1.5;
        display: flex;
        flex-direction: column;
        height: 99.8vh;
    }

    .container {
        padding: 40px 20px;
        flex: 1;
    }


    .main-content {
        width: 100%;
        max-width: 42rem;
        margin: 0 auto;
    }

    .header {
        text-align: center;
        margin-bottom: 3rem;
    }

    .title {
        font-size: 3rem;
        font-weight: 600;
        color: hsl(var(--text-primary));
        margin-bottom: 1rem;
        letter-spacing: -0.025em;
    }

    .subtitle {
        color: hsl(var(--text-secondary));
        font-size: 1.25rem;
        font-weight: 400;
    }

    .interface {
        display: flex;
        flex-direction: column;
    }

    .textarea-container {
        position: relative;
    }

    .record-button {
        position: absolute;
        top: 1rem;
        right: 1rem;
        width: 2.5rem;
        height: 2.5rem;
        background: hsl(var(--record));
        border: none;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        cursor: pointer;
        transition: all 0.2s ease-out;
        box-shadow: var(--shadow-md);
        z-index: 10;
    }

    .record-button:hover {
        background: hsl(var(--record-hover));
        transform: translateY(-1px);
        box-shadow: var(--shadow-lg);
    }

    .record-button:active {
        background: hsl(var(--record-active));
        transform: scale(0.95);
    }

    .record-button svg {
        width: 16px;
        height: 16px;
    }

    .textarea {
        width: 100%;
        height: 12rem;
        padding: 1.5rem;
        padding-top: 3.5rem;
        background: hsl(var(--surface));
        border: 1px solid hsl(var(--input-border));
        border-radius: var(--radius);
        color: hsl(var(--text-primary));
        font-size: 1rem;
        line-height: 1.6;
        resize: none;
        transition: all 0.2s ease-out;
        box-shadow: var(--shadow-sm);
    }

    .textarea::placeholder {
        color: hsl(var(--text-tertiary));
    }

    .textarea:focus {
        outline: none;
        border-color: hsl(var(--accent));
        box-shadow: 0 0 0 3px hsl(var(--accent) / 0.1), var(--shadow-md);
    }

    .primary-button-container {
        display: flex;
        justify-content: center;
    }

    .primary-button {
       font-family: 'DM Sans', sans-serif;
        background: hsl(var(--accent));
        color: hsl(var(--accent-foreground));
        padding: 1rem 3rem;
        border: none;
        border-radius: var(--radius);
        font-weight: 600;
        font-size: 1.2rem;
        letter-spacing: -0.025rem;
        cursor: pointer;
        box-shadow: var(--shadow-md);
        transition: all 0.2s ease-out;
        margin-bottom: 30px;
    }
    .primary-button.failed {
        background: #ef4444;
        color: white;
    }

    .primary-button.loading {
        pointer-events: none;
    }

    .primary-button.loading::after {
        content: '';
        width: 16px;
        height: 16px;

        border: 2px solid transparent;
        border-top: 2px solid currentColor;
        border-radius: 50%;
        display: inline-block;
        animation: spin 1s linear infinite;
    }

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

    .primary-button:hover {
        background: hsl(var(--accent-hover));
        box-shadow: var(--shadow-lg);
    }

    .primary-button:focus {
        outline: none;
        box-shadow: 0 0 0 3px hsl(var(--accent) / 0.3), var(--shadow-lg);
    }

    .primary-button:active {
        transform: scale(0.95);
    }

    .primary-button:disabled {
        background: hsl(var(--text-disabled));
        cursor: not-allowed;
        transform: none;
    }

    .result-container {
        position: relative;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-20px);
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        margin-top: 0;
    }

    .result-container.show {
        max-height: 500px; /* Adjust based on your needs */
        opacity: 1;
        transform: translateY(0);
        margin-top: 2rem;
    }
        /* Character counter */
    .character-counter {
        position: absolute;
        bottom: 0.5rem;
        left: 0.5rem;
        font-size: 0.75rem;
        color: hsl(var(--text-tertiary));
        padding: 0.25rem 0.5rem;
        border-radius: var(--radius-sm);

    }

    .character-counter.warning {
        color: #dc2626;
        border-color: #dc2626;
        background: #fef2f2;
    }
    .result-actions {
        position: absolute;
        top: 9px;
        right: 9px;
        display: flex;
        gap: 0.5rem;
        z-index: 10;
        opacity: 0;
        transition: opacity 0.3s ease 0.2s; /* Delay the buttons appearance */
    }

    .result-container.show .result-actions {
        opacity: 1;
    }

    .icon-button {
        width: 2rem;
        height: 2rem;
        background: hsl(var(--surface));
        border: 1px solid hsl(var(--border-subtle));
        border-radius: var(--radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        color: hsl(var(--text-disabled));
        cursor: pointer;
        transition: all 0.2s ease-out;
        box-shadow: var(--shadow-sm);
    }

    .icon-button:hover {
        color: hsl(var(--text-tertiary));
        background: hsl(var(--surface-secondary));
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }

    .icon-button svg {
        width: 14px;
        height: 14px;
    }

.checkbox-container {
    margin: 0px 0 24px 0;
}

.modern-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}

.modern-checkbox input {
    display: none;
}

.modern-checkbox .checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.modern-checkbox input:checked + .checkmark {
    background-color: #10a37f;
    border-color: #10a37f;
}

.modern-checkbox input:checked + .checkmark::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.modern-checkbox .checkbox-label {
    color: #999;
    font-size: 14px;
}

.subject-area {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    resize: none;
    margin-bottom: 16px;
}

    @keyframes rotate {
        from { transform: rotate(0); }
        to { transform: rotate(360deg); }
    }

    @keyframes lds-loader {
        0% { top: 8px; height: 50px; }
        100%, 50% { top: 24px; height: 20px; }
    }

    @keyframes loadingbar {
        0% { background-position: -150% 0, -150% 0; }
        66% { background-position: 250% 0, -150% 0; }
        100% { background-position: 250% 0, 250% 0; }
    }

    @keyframes toggleOn {
        0% { transform: translateX(0); }
        50% { transform: translateX(14px); }
        100% { transform: translateX(12px); }
    }

    @keyframes toggleOff {
        0% { transform: translateX(12px); }
        50% { transform: translateX(-2px); }
        100% { transform: translateX(0); }
    }

    .email-body {
        width: 100%;
        line-height: 1.6;
        border: none;
    }

    @keyframes radarPulseWithPause {
        0% {
            box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
            transform: translateX(4px) scale(1);
        }
        25% {
            box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
            transform: translateX(4px) scale(1.1);
        }
        100%, 26% {
            box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
            transform: translateX(4px) scale(1);
        }
    }

    @-webkit-keyframes radarPulseWithPause {
        0% {
            box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
            -webkit-transform: translateX(4px) scale(1);
            transform: translateX(4px) scale(1);
        }
        25% {
            box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
            -webkit-transform: translateX(4px) scale(1.1);
            transform: translateX(4px) scale(1.1);
        }
        100%, 26% {
            box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
            -webkit-transform: translateX(4px) scale(1);
            transform: translateX(4px) scale(1);
        }
    }

    .body {
        font-size: 12px;
    }

    .voice-input-container {
        position: relative;
    }
/* Shared scrollbar styles for textareas */
.addnotes,
.result-area {
/* Firefox scrollbar */
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* Webkit scrollbar styles (Chrome, Safari, Edge) */
.addnotes::-webkit-scrollbar,
.result-area::-webkit-scrollbar {
width: 4px;
}

.addnotes::-webkit-scrollbar-track,
.result-area::-webkit-scrollbar-track {
background: transparent;
}

.addnotes::-webkit-scrollbar-thumb,
.result-area::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2);
border-radius: 2px;
}

.addnotes::-webkit-scrollbar-thumb:hover,
.result-area::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.3);
}

/* Individual textarea styles */
.addnotes {
background-color: #fff;
color: #666;
padding: 1em;
margin: 2px;
border-radius: 10px;
border: 1px solid hsl(var(--input-border));
    box-shadow: var(--shadow-sm);
font-weight: 500;
min-height: 200px;
font-size: 16px;
line-height: 1.4;
width: 100%;
box-sizing: border-box;
resize: none;
transition: height 0.2s;
}


    .addnotes:focus {
        cursor: text;
        color: #333;
        background-color: #fff;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        outline: 1px solid #eee;
    }

    .addnotes::placeholder {
        transform: translateY(20px);
        text-align: center;
        color: #999;
        font-style: italic;
        font-size: 16px;
    }

    .addnotes::placeholder {
        color: #8e8ea0;
    }

    .composer-btn {
        background: 0 0;
        border: none;
        color: #8e8ea0;
        cursor: pointer;
        padding: 8px;
        border-radius: 6px;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .composer-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #ececec;
    }

    .composer-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .voice-record-btn {
        position: absolute;
        bottom: 8px;
        right: 8px;
    }

    .voice-controls {
        position: absolute;
        bottom: 8px;
        right: 8px;
        display: none;
        align-items: center;
        gap: 6px;
    }
    .voice-controls.active {
        display: flex;
    }

    .voice-status {
        margin-bottom: 12px;
        font-size: 14px;
        color: #8e8ea0;
        text-align: center;
    }
    .error {
        color: #ff6b6b;
    }

    .voice-visualizer {
        width: 100%;
        height: 32px;
        background: #fff;
        border: 1px solid #eee;
        border-radius: 8px;
        margin: 16px 0;
        display: none;
    }
    .voice-visualizer.active {
        display: block;
    }


    @keyframes spin {
        from { transform: rotate(0); }
        to { transform: rotate(360deg); }
    }

    .result-area.subject-area {
        padding: 0 !important;
        text-align: center;
        display: flex;
        line-height: 47px;
        align-items: center;
        justify-content: center;
        resize: none;
    }

    .result-area {
        width: 100%;
        min-height: 16rem;
        padding: 1.5rem;
        background: hsl(var(--surface));
        border: 1px solid hsl(var(--input-border));
        border-radius: var(--radius);
        color: hsl(var(--text-primary));
        font-size: 1rem;
        line-height: 1.6;
        resize: none;
        box-shadow: var(--shadow-sm);
        transition: all 0.2s ease-out;
        transform: translateY(10px);
        opacity: 0.7;
    }

    .subject-section, .email-section {
        position: relative;
    }

    .result-container.show .result-area {
        transform: translateY(0);
        opacity: 1;
    }

    .result-area::placeholder {
        color: hsl(var(--text-tertiary));
    }

    .result-area:focus {
        outline: none;
        border-color: hsl(var(--accent));
        box-shadow: 0 0 0 3px hsl(var(--accent) / 0.1), var(--shadow-md);
    }

    .ai-footer {
        text-align: center;
        margin-top: 4rem;
        position: relative;
    }

    .ai-footer-text {
        color: hsl(var(--text-tertiary));
        font-size: 0.875rem;
    }

    .ai-footer-text::after {
        content: '';
        position: absolute;
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:v="https://vecta.io/nano" fill="%23000000" width="800" height="800" viewBox="0 0 24 24"><path d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.911 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.429a4.476 4.476 0 0 1-2.876-1.041l.142-.08 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zm-9.661-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.369v2.332a.08.08 0 0 1-.033.061L9.74 19.95a4.499 4.499 0 0 1-6.141-1.646zM2.341 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.786a4.504 4.504 0 0 1-1.646-6.141zm16.596 3.856l-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.677 8.104v-5.677a.79.79 0 0 0-.407-.667zm2.011-3.023l-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66zM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.454l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681zm1.098-2.365l2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5z"/></svg>');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 15px;
        width: 20px;
        height: 20px;
        opacity: 0.4;
        margin-left: 2px;
    }

    @media (max-width: 768px) {
        .title {
            font-size: 2.5rem;
        }

        .subtitle {
            font-size: 1.125rem;
        }

        .textarea {
            height: 10rem;
        }

        .result-area {
            min-height: 14rem;
        }

        .container {
            padding: 1rem 0.5rem;
        }
    }