:root {
    --text-color: #3d3a35;
    --muted-text-color: #595651;
    --bg-color: #f7f5f0;
    --card-bg-color: #fffdf8;
    --accent-color: #335a3d;
    --accent-dark-color: #284630;
    --info-color: #2c4760;
    --info-dark-color: #22374b;
    --danger-color: #8f331f;
    --danger-dark-color: #702818;
    --qr-width: 400px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 800px;
    margin: 0 auto;
    padding: 1rem;
    background: var(--bg-color);
    color: var(--text-color);
    font-family: "Courier New", Courier, monospace;
}

main {
    flex: 1;
}

h1 {
    font-size: 3rem;
    letter-spacing: 0.05em;
    margin: 0 0 1rem;
    font-weight: bolder;
}

header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.logo {
    font-size: 3rem;
    letter-spacing: 0.05em;
    font-weight: bolder;
}

.page-title {
    font-size: 1.5em;
    letter-spacing: normal;
    margin: 0.83em 0;
}

header a {
    color: inherit;
    text-decoration: none;
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.nav-links a {
    text-decoration: underline;
}

.nav-links a[aria-current] {
    text-decoration-thickness: 2px;
    text-decoration-skip-ink: none;
    text-underline-offset: 3px;
}

.nav-links a:hover {
    color: var(--danger-color);
}

.subtitle {
    margin: 0;
    font-size: 1.5rem;
    font-weight: bold;
    flex-basis: 100%;
}

p {
    font-size: 1rem;
    letter-spacing: 0.05em;
    margin: 0.5rem 0;
}

.dumb-joke {
    font-size: 0.875rem;
}

.dumb-joke a,
.dumb-joke a:visited {
    color: var(--text-color);
    text-decoration: none;
    cursor: pointer;
    font-style: italic;
}

.error {
    color: var(--danger-color);
    font-weight: bolder;
}

#qr {
    padding-top: 1rem;
    max-width: var(--qr-width);
    aspect-ratio: 1 / 1;
}

#pairUrl {
    overflow-wrap: anywhere;
    user-select: all;
    color: color-mix(in srgb, var(--text-color) 65%, transparent);
}

#qr svg {
    width: 100%;
    height: auto;
    max-width: var(--qr-width);
}

#sessionName {
    display: block;
    width: 100%;
    max-width: var(--qr-width);
    margin: 0.5rem 0;
    font-weight: bolder;
    text-align: justify;
    text-align-last: justify;
}

.pair-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin: 0.5rem 0;
}

.pair-status {
    flex: 1 1 12rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

body.wide {
    max-width: 1600px;
}

.layout {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    flex: 1;
}

.layout .sidebar {
    flex: 0 1 auto;
    max-width: 30%;
    min-width: 0;
}

.layout main {
    flex: 1;
    min-width: 0;
}

footer {
    margin-top: 2rem;
    padding-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.footer-links {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-color);
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--danger-color);
}

.footer-links svg {
    width: 1.1em;
    height: 1.1em;
}

@media (max-width: 800px) {
    .layout {
        flex-direction: column-reverse;
    }

    .layout .sidebar {
        flex-basis: auto;
        width: 100%;
    }

    .messages-layout {
        flex-direction: column;
    }

    .thread-column {
        flex-basis: auto;
        max-height: 30vh;
        border-right: none;
        padding-right: 0;
        padding-bottom: 1rem;
        border-bottom: 1px solid color-mix(in srgb, var(--text-color) 15%, transparent);
    }
}

.card {
    border: 2px solid var(--text-color);
    border-radius: 4px;
    padding: 1rem 1.25rem;
    margin: 1rem 0;
    background: var(--card-bg-color);
}

.btn {
    display: block;
    padding: 0.6rem 1.2rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: bolder;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bg-color);
    background: var(--text-color);
    cursor: pointer;
    border: 2px solid var(--text-color);
    border-radius: 4px;
}

.btn:hover {
    background: color-mix(in srgb, var(--text-color) 85%, var(--bg-color));
}

.btn:active {
    transform: translateY(1px);
}

.thread-name,
.thread-preview,
.file-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.messages-layout {
    display: flex;
    gap: 1.25rem;
}

.thread-column {
    flex: 0 0 220px;
    min-width: 0;
    max-height: calc(100vh - 21rem);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.thread-list {
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    border-right: 1px solid color-mix(in srgb, var(--text-color) 15%, transparent);
}

.message-column {
    flex: 1;
    min-width: 0;
    max-height: calc(100vh - 21rem);
    display: flex;
    flex-direction: column;
}

#messageList {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.thread-row {
    display: block;
    width: 100%;
    appearance: none;
    font: inherit;
    color: inherit;
    text-align: left;
    background: none;
    cursor: pointer;
    padding: 0.5rem;
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--text-color) 15%, transparent);
}

.thread-list li:last-child .thread-row {
    border-bottom: none;
}

.thread-row[aria-current] {
    background: color-mix(in srgb, var(--text-color) 8%, transparent);
}

.thread-name {
    font-weight: bolder;
}

.thread-preview {
    font-size: 0.85rem;
    color: var(--muted-text-color);
}

.message-row {
    max-width: 75%;
    margin: 0.5rem 0;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    background: color-mix(in srgb, var(--text-color) 6%, transparent);
    overflow-wrap: anywhere;
}

.message-body {
    white-space: pre-wrap;
}

.message-row.out {
    margin-left: auto;
    background: color-mix(in srgb, var(--text-color) 14%, transparent);
}

.message-row.sending {
    opacity: 0.6;
}

.message-row.failed {
    background: color-mix(in srgb, var(--danger-color) 25%, transparent);
}

.message-row.failed .message-meta {
    color: var(--danger-dark-color);
}

.sendUI {
    position: relative;
    margin-bottom: 0;
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
}

#smsBody {
    flex: 1;
    min-width: 0;
    field-sizing: content;
    min-height: 2.25rem;
    max-height: 8rem;
    padding: 0.4rem 0;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--text-color) 30%, transparent);
    background: transparent;
    appearance: none;
    font-family: inherit;
    font-size: 1rem;
    color: var(--text-color);
    resize: none;
    overflow-y: auto;
    outline: none;
}

#smsBody:focus {
    border-bottom-color: var(--text-color);
}

.emoji-palette {
    position: absolute;
    left: 0;
    bottom: calc(100% + 0.5rem);
    max-width: 100%;
    margin: 0;
    padding: 0.25rem;
    list-style: none;
}

.emoji-palette li {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0.25rem 0.5rem;
    border-radius: 2px;
    font-size: 0.9rem;
    cursor: pointer;
}

.emoji-palette li[aria-selected="true"] {
    color: var(--bg-color);
    background: var(--text-color);
}

.visually-hidden:where(:not(:focus-within, :active)) {
    position: absolute;
    clip-path: inset(50%);
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    white-space: nowrap;
}

#clipboardText {
    width: 100%;
    min-height: 4rem;
    resize: vertical;
    padding: 0.4rem;
    border: 1px solid color-mix(in srgb, var(--text-color) 30%, transparent);
    border-radius: 4px;
    background: transparent;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--text-color);
}

#clipboardImageBox {
    position: relative;
    width: fit-content;
    max-width: 100%;
}

#clipboardImage {
    display: block;
    max-width: 100%;
    max-height: 8rem;
    border: 1px solid color-mix(in srgb, var(--text-color) 30%, transparent);
    border-radius: 4px;
}

.clipboard-clear {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    font-family: inherit;
    font-size: 0.8rem;
    line-height: 1;
    color: var(--bg-color);
    background: var(--text-color);
    border: 1px solid var(--bg-color);
    border-radius: 50%;
    cursor: pointer;
}

.clipboard-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.drop-zone {
    position: relative;
    display: block;
    padding: 1rem;
    text-align: center;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
    border: 2px dashed color-mix(in srgb, var(--text-color) 30%, transparent);
    border-radius: 4px;
    cursor: pointer;
}

.drop-zone.dragging,
.drop-zone:has(input:focus-visible) {
    border-color: var(--accent-color);
}

.drop-zone input {
    position: absolute;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
}

.file-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.file-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.file-name {
    flex: 1;
    min-width: 0;
}

.file-row .btn {
    text-decoration: none;
}

.message-meta {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--muted-text-color);
}

.toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

#clearBtn {
    margin-top: 1.5rem;
    background: var(--danger-color);
}

#clearBtn::before {
    content: "⚠ ";
}

#clearBtn:hover {
    background: var(--danger-dark-color);
}

dialog {
    max-width: 32rem;
    padding: 1.5rem;
    border: 1px solid var(--text-color);
    border-radius: 4px;
    background: var(--bg-color);
}

dialog h2 {
    margin-top: 0;
}

.card-title {
    font-size: 1rem;
    font-weight: bolder;
    margin: 0 0 0.5rem;
}

.card-title svg {
    vertical-align: -0.15em;
    margin-left: 0.35rem;
}

dialog label,
dialog input {
    display: block;
}

dialog input {
    margin: 0.25rem 0 1rem;
}

dialog::backdrop {
    background: color-mix(in srgb, var(--text-color) 45%, transparent);
}

.dialog-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.dialog-actions #clearBtn {
    margin-top: 0;
}

.btn-accent {
    background: var(--accent-color);
}

.btn-accent:hover {
    background: var(--accent-dark-color);
}

.btn-info {
    background: var(--info-color);
}

.btn-info:hover {
    background: var(--info-dark-color);
}

.btn-danger {
    background: var(--danger-color);
}

.btn-danger:hover {
    background: var(--danger-dark-color);
}

/* LOADER */
.loader {
    --size: 1.7px;

    width: calc(8 * var(--size));
    height: calc(48 * var(--size));
    display: block;
    margin: 1rem auto;
    border-radius: calc(4 * var(--size));
    color: var(--text-color);
    animation: animloader 1.5s linear infinite;
    transform: translateX(calc(-40 * var(--size)));
}

@keyframes animloader {
    0% {
        box-shadow:
            calc(20 * var(--size)) calc(-10 * var(--size)),
            calc(40 * var(--size)) calc(10 * var(--size)),
            calc(60 * var(--size)) 0;
    }

    25% {
        box-shadow:
            calc(20 * var(--size)) 0,
            calc(40 * var(--size)) 0,
            calc(60 * var(--size)) calc(10 * var(--size));
    }

    50% {
        box-shadow:
            calc(20 * var(--size)) calc(10 * var(--size)),
            calc(40 * var(--size)) calc(-10 * var(--size)),
            calc(60 * var(--size)) 0;
    }

    75% {
        box-shadow:
            calc(20 * var(--size)) 0,
            calc(40 * var(--size)) 0,
            calc(60 * var(--size)) calc(-10 * var(--size));
    }

    100% {
        box-shadow:
            calc(20 * var(--size)) calc(-10 * var(--size)),
            calc(40 * var(--size)) calc(10 * var(--size)),
            calc(60 * var(--size)) 0;
    }
}

/* END LOADER */
.dots::after {
    content: '';
    animation: dots 1.5s steps(1) infinite;
}

@keyframes dots {
    0% {
        content: '';
    }

    25% {
        content: '.';
    }

    50% {
        content: '..';
    }

    75% {
        content: '...';
    }
}

summary {
    cursor: pointer;
}