/*
 * GentleSource Disposable E-mail - default design
 */

.tempmail {
    --tm-text: #1d2433;
    --tm-muted: #667085;
    --tm-accent: #0e7490;
    --tm-accent-hover: #155e75;
    --tm-accent-soft: #ecfeff;
    --tm-border: #d0d5dd;
    --tm-surface: #ffffff;
    --tm-background: #f2f4f7;
    --tm-unread: #f0f9ff;
    --tm-error: #b42318;
    --tm-error-background: #fef3f2;
    --tm-radius: .75rem;
    margin: 0;
    color: var(--tm-text);
    background: var(--tm-background);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.55;
}

.tempmail a {
    color: var(--tm-accent);
}

.tempmail_page {
    max-width: 52rem;
    margin: 0 auto;
    padding: 0 1rem;
}

.tempmail_header {
    padding: 2rem 0 1rem;
}

.tempmail_header p {
    margin: .25rem 0 0;
    color: var(--tm-muted);
}

.tempmail_brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--tm-text) !important;
    text-decoration: none;
}

.tempmail_logo {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    color: #fff;
    background: var(--tm-accent);
    border-radius: .625rem;
}

.tempmail_address,
.tempmail_inbox,
.tempmail_mail {
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius);
}

/* The box with the button grows into the box with the new address (inbox.js) */
.tempmail_address {
    view-transition-name: tempmail-address;
}

.tempmail_label {
    margin: 0 0 .5rem;
    color: var(--tm-muted);
    font-size: .875rem;
}

.tempmail_address_row {
    display: flex;
    gap: .5rem;
}

.tempmail_address_field {
    flex: 1;
    min-width: 0;
    padding: .75rem 1rem;
    font: inherit;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--tm-text);
    background: var(--tm-accent-soft);
    border: 1px solid var(--tm-border);
    border-radius: .5rem;
}

.tempmail_expiry {
    margin: .75rem 0 0;
    color: var(--tm-muted);
}

.tempmail_actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}

.tempmail_actions form {
    margin: 0;
}

.tempmail button,
.tempmail .tempmail_button,
.tempmail .tempmail_button_secondary {
    display: inline-block;
    padding: .625rem 1.125rem;
    font: inherit;
    font-weight: 600;
    border-radius: .5rem;
    cursor: pointer;
    text-decoration: none;
}

.tempmail .tempmail_button {
    color: #fff;
    background: var(--tm-accent);
    border: 1px solid var(--tm-accent);
}

.tempmail .tempmail_button:hover {
    background: var(--tm-accent-hover);
}

.tempmail .tempmail_button_secondary {
    color: var(--tm-text);
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
}

.tempmail .tempmail_button_secondary:hover {
    background: var(--tm-background);
}

.tempmail_copied {
    display: none;
}

.tempmail_is_copied .tempmail_copied {
    display: inline;
}

.tempmail_custom {
    margin-top: 1rem;
}

.tempmail_custom summary {
    color: var(--tm-muted);
    cursor: pointer;
}

.tempmail_custom_form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .75rem;
}

.tempmail_custom_form input,
.tempmail_custom_form select {
    padding: .5rem .75rem;
    font: inherit;
    border: 1px solid var(--tm-border);
    border-radius: .5rem;
}

.gs_name_row {
    display: none;
}

.tempmail_inbox_header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
}

.tempmail_inbox_header h2 {
    margin: 0 0 .75rem;
    font-size: 1.25rem;
}

.tempmail_refresh_note {
    color: var(--tm-muted);
    font-size: .8125rem;
}

.tempmail_list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--tm-border);
}

.tempmail_list li {
    border-bottom: 1px solid var(--tm-border);
}

.tempmail_list a {
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) auto;
    grid-template-areas: "from subject time" "from excerpt time";
    gap: 0 1rem;
    padding: .75rem .5rem;
    color: var(--tm-text);
    text-decoration: none;
}

.tempmail_list a:hover {
    background: var(--tm-background);
}

.tempmail_unread a {
    background: var(--tm-unread);
    font-weight: 600;
}

.tempmail_from {
    grid-area: from;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tempmail_subject {
    grid-area: subject;
}

.tempmail_excerpt {
    grid-area: excerpt;
    overflow: hidden;
    color: var(--tm-muted);
    font-weight: 400;
    font-size: .875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tempmail_time {
    grid-area: time;
    color: var(--tm-muted);
    font-size: .875rem;
}

.tempmail_empty {
    padding: 2rem .5rem;
    color: var(--tm-muted);
    text-align: center;
}

.tempmail_error {
    padding: .75rem 1rem;
    color: var(--tm-error);
    background: var(--tm-error-background);
    border-radius: .5rem;
}

.tempmail_mail_header h1 {
    margin: 0 0 1rem;
    font-size: 1.5rem;
    overflow-wrap: anywhere;
}

.tempmail_mail_header dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .25rem 1rem;
    margin: 0 0 1.5rem;
    font-size: .9375rem;
}

.tempmail_mail_header dt {
    color: var(--tm-muted);
}

.tempmail_mail_header dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.tempmail_view_switch {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* With an HTML part the formatted version is shown, the text version on request */
.tempmail_has_html .tempmail_text,
.tempmail_has_html:has(#tempmail_text:target) .tempmail_html {
    display: none;
}

.tempmail_has_html:has(#tempmail_text:target) .tempmail_text {
    display: block;
}

.tempmail_has_html .tempmail_view_switch a[href="#tempmail_html"],
.tempmail_has_html:has(#tempmail_text:target) .tempmail_view_switch a[href="#tempmail_text"] {
    font-weight: 600;
    text-decoration: none;
}

.tempmail_has_html:has(#tempmail_text:target) .tempmail_view_switch a[href="#tempmail_html"] {
    font-weight: normal;
    text-decoration: underline;
}

.tempmail_text {
    margin: 0 0 1.5rem;
    padding: 1rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: inherit;
    background: var(--tm-background);
    border-radius: .5rem;
}

.tempmail_html iframe {
    width: 100%;
    height: 32rem;
    border: 1px solid var(--tm-border);
    border-radius: .5rem;
    background: #fff;
}

.tempmail_html_note {
    color: var(--tm-muted);
    font-size: .875rem;
}

.tempmail_attachments h2 {
    font-size: 1rem;
}

.tempmail_mail_actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.5rem;
}

.tempmail_mail_actions form {
    margin: 0;
}

.tempmail_notice {
    padding: .75rem 1rem;
    color: var(--tm-accent-hover);
    background: var(--tm-accent-soft);
    border-radius: .5rem;
}

.tempmail_reply {
    margin-top: 1.5rem;
}

.tempmail_reply_form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    margin-top: .75rem;
}

.tempmail_reply_to {
    margin: 0;
    color: var(--tm-muted);
    overflow-wrap: anywhere;
}

.tempmail_reply_form textarea {
    box-sizing: border-box;
    width: 100%;
    padding: .5rem .75rem;
    color: var(--tm-text);
    font: inherit;
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: .5rem;
}

/* Modal window for questions (inbox.js) */
.tempmail_dialog {
    width: 26rem;
    max-width: calc(100vw - 2rem);
    padding: 0;
    color: var(--tm-text);
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius);
    box-shadow: 0 1rem 3rem rgba(16, 24, 40, .2);
}

.tempmail_dialog::backdrop {
    background: rgba(16, 24, 40, .5);
}

.tempmail_dialog form {
    padding: 1.5rem;
}

.tempmail_dialog_text {
    margin: 0 0 1.25rem;
    font-weight: 600;
}

.tempmail_dialog_buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
}

.tempmail_footer {
    padding: 2rem 0;
    color: var(--tm-muted);
    font-size: .875rem;
    text-align: center;
}

@media (max-width: 640px) {
    .tempmail_address_row {
        flex-direction: column;
    }

    .tempmail_list a {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "from time" "subject subject" "excerpt excerpt";
    }
}