* {
    margin: 0;
    padding: 0;
}

textarea {
    min-height: 200px;
    max-width: 100%;
}

.center {
    text-align: center;
}

hr {
    margin: 10px 0;
}

#compose-view {
    padding: 0 5%;

    input,
    textarea {
        width: 100%;
    }
}

#email-view {
    margin: 10px;
    padding: 10px;

    button.reply {
        margin-top: 10px;
    }

    .timestamp {
        font-size: 71%;
        font-family: monospace;
    }

    .mailbody {
        background-color: #eef;
        font-family: 'Times New Roman', Times, serif, cursive, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }

    p::before {
        content: attr(class);
        font-weight: 1000;
        min-width: 100px;
        display: inline-block;
    }
}

div.mailbox {
    --pad: 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: #8881;
    position: relative;
    padding: var(--pad);
    padding-bottom: 0;


    /*     display: inline-block;
    width: fit-content;
    width: clamp(50%,fit-content,100%);*/
    &:last-child {
        padding-bottom: var(--pad);
    }

    .mail {
        padding: var(--pad);
        border-radius: 3px;
        border: #999 1px solid;
        box-shadow: 2px 2px 0 0;
        margin: 2px;


        .from,
        .to {
            font-size: 1em;
        }

        .subject,
        .sub {
            font-size: 0.9em;
            display: inline-block;
            width: fit-content;
            white-space: nowrap;
            text-overflow: ellipsis;
            max-width: 100%;
            overflow: hidden;

            &::before {
                content: "Subject : ";
                font-weight: bolder;
                margin-right: 5px;


            }
        }

        .time {
            font-size: 0.6em;
        }

        &.read {
            background-color: #ddd;
        }

        &.unread {
            background-color: #fff;

            &::after {
                /* blue dot for unread mail */
                content: "";
                display: inline-block;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: #20f;
                margin-left: 5px;
                margin-right: 5px;
                vertical-align: middle;
                top: 10px;
                right: 5px;
                position: absolute;
                border: 0px solid red;
                transition: all 300ms;
                animation: notiDotBlink 3500ms infinite;
                animation-delay: 1s;
                animation-timing-function: cubic-bezier(0, 0.5, 1, 0.5);
            }
        }
    }
}


*+:has(>button.archive) {
    margin-right: 10px;
}

button {
    display: inline-block;
    background: #0044;
    border-radius: 5px;
    padding: 0 5px;
    transition: all 300ms;

    &:hover {
        background-color: #0048;
    }

}


/* animation */
@keyframes notiDotBlink {

    0%,
    100% {
        opacity: 1;
    }

    25%,
    75% {
        border-width: 0;
        opacity: 0;
    }

    50% {
        opacity: 1;
        border-width: 5px;
    }

}