:root {
    color-scheme: light dark;
    --gap: 1rem;
    --width: 1100px;

    /* WhatsApp light theme */
    --bar: #008069; /* top bar / sidebar header */
    --bar-text: #ffffff;
    --wallpaper: #efeae2; /* chat background */
    --footer: #f0f2f5; /* composer bar */
    --panel: #ffffff; /* chat-list background */
    --bubble-in: #ffffff; /* incoming (partner) */
    --bubble-out: #d9fdd3; /* outgoing (you) */
    --bubble-correct: #fff5d4; /* the correction sub-bubble */
    --text: #111b21;
    --text-soft: #667781;
    --tick: #53bdeb; /* blue "read" tick */
    --check: #1a9e54; /* green "no mistakes" check (an Dialingo feature) */
    --input-bg: #ffffff;
    --send: #00a884;
    --send-hover: #008069;
    --divider: rgba(17, 27, 33, 0.08);
    --hover: rgba(17, 27, 33, 0.04);
    --active-row: #f0f2f5;
    --diff-add: #067a3f;
    --diff-del: #c0392b;
    --notice: #c0392b;
    --shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);

    /* Faint WhatsApp-style doodle wallpaper (subtle, theme-neutral grey). */
    --pattern: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220' fill='none' stroke='gray' stroke-opacity='0.18' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='45' cy='50' r='15'/><circle cx='39' cy='46' r='1.6' fill='gray' fill-opacity='0.18' stroke='none'/><circle cx='51' cy='46' r='1.6' fill='gray' fill-opacity='0.18' stroke='none'/><path d='M38 55 q7 7 14 0'/><path d='M160 38 c-5 -9 -18 -4 -18 5 c0 8 18 18 18 18 c0 0 18 -10 18 -18 c0 -9 -13 -14 -18 -5z'/><path d='M95 120 h40 a7 7 0 0 1 7 7 v16 a7 7 0 0 1 -7 7 h-24 l-11 9 v-9 h-5 a7 7 0 0 1 -7 -7 v-16 a7 7 0 0 1 7 -7z'/><circle cx='55' cy='165' r='10'/><path d='M55 148 v-7 M55 182 v7 M38 165 h-7 M72 165 h7 M43 153 l-5 -5 M67 177 l5 5 M43 177 l-5 5 M67 153 l5 -5'/><path d='M175 150 v26 M175 150 l16 -5 v26'/><circle cx='171' cy='176' r='4'/><circle cx='187' cy='171' r='4'/></svg>");
}

@media (prefers-color-scheme: dark) {
    :root {
        --bar: #202c33;
        --bar-text: #e9edef;
        --wallpaper: #0b141a;
        --footer: #202c33;
        --panel: #111b21;
        --bubble-in: #202c33;
        --bubble-out: #005c4b;
        --bubble-correct: #2a3942;
        --text: #e9edef;
        --text-soft: #8696a0;
        --tick: #53bdeb;
        --check: #25d366;
        --input-bg: #2a3942;
        --send: #00a884;
        --send-hover: #06cf9c;
        --divider: rgba(233, 237, 239, 0.1);
        --hover: rgba(233, 237, 239, 0.04);
        --active-row: #2a3942;
        --diff-add: #7ee0a0;
        --diff-del: #f4a39b;
        --notice: #f4a39b;
        --shadow: 0 1px 0.5px rgba(0, 0, 0, 0.25);
    }
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
}

/* Desktop-WhatsApp density: normal ~16px base. The layout is rem-based, so this
   sets every text size, padding, gap and radius proportionally. */
html {
    font-size: 100%;
}

body {
    font-family: "Helvetica Neue", system-ui, -apple-system, "Segoe UI", Roboto,
        sans-serif;
    background: var(--wallpaper);
    color: var(--text);
    overflow: hidden; /* the page never scrolls; only inner panes do */
}

/* Two panes: chat list on the left, the open conversation on the right. */
.app {
    display: flex;
    height: 100%;
    min-height: 0;
}

/* --- sidebar (chat list / contacts) ---------------------------------------- */

.sidebar {
    flex: 0 0 30rem; /* width is overridden inline once dragged */
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--panel);
}

/* Draggable divider between the panes: a thin line with a wider grab zone. */
.resizer {
    flex: none;
    position: relative;
    width: 1px;
    background: var(--divider);
    cursor: col-resize;
    z-index: 3;
    touch-action: none;
}

.resizer::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -3px;
    right: -3px;
}

.resizer:hover,
.resizer.dragging {
    background: var(--send);
}

.sidebar__head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    background: var(--bar);
    color: var(--bar-text);
}

.sidebar__title {
    font-weight: 600;
    font-size: 1.05rem;
}

.iconbtn {
    flex: none;
    width: 2.2rem;
    height: 2.2rem;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: currentColor;
    cursor: pointer;
}

.iconbtn:hover {
    background: rgba(255, 255, 255, 0.28);
}

.iconbtn svg {
    width: 1.3rem;
    height: 1.3rem;
}

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

.contact {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    cursor: pointer;
    border-bottom: 1px solid var(--divider);
}

.contact:hover {
    background: var(--hover);
}

.contact--active {
    background: var(--active-row);
}

.contact__avatar {
    flex: none;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 50%;
    object-fit: cover;
}

.contact__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.contact__name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact__preview {
    font-size: 0.85em;
    color: var(--text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact__meta {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
}

.contact__time {
    font-size: 0.72em;
    color: var(--text-soft);
    white-space: nowrap;
}

.contact__close {
    border: none;
    background: none;
    color: var(--text-soft);
    font-size: 1.1em;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
}

.contact:hover .contact__close,
.contact--active .contact__close {
    opacity: 0.55;
}

.contact__close:hover {
    opacity: 1;
}

/* --- conversation pane ----------------------------------------------------- */

.chat {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* top bar (the chat header, WhatsApp green) */
.topbar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.9rem;
    background: var(--bar);
    color: var(--bar-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    z-index: 2;
}

/* Back-to-list arrow, shown only on the single-pane mobile layout. */
.topbar__back {
    display: none;
    flex: none;
    width: 2.2rem;
    height: 2.2rem;
    margin-left: -0.4rem;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: none;
    color: currentColor;
    cursor: pointer;
}

.topbar__back svg {
    width: 1.5rem;
    height: 1.5rem;
}

.topbar__avatar {
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.22);
}

.topbar__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.topbar__meta {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.topbar__name {
    font-weight: 600;
    font-size: 1rem;
}

.topbar__status {
    font-size: 0.72em;
    opacity: 0.85;
}

/* --- message list / wallpaper ---------------------------------------------- */

/* The only scrollable area in the pane. Fills between the bar and composer. */
.messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    padding: var(--gap) 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background-color: var(--wallpaper);
    background-image: var(--pattern);
    background-repeat: repeat;
    background-size: 18rem;
}

/* Each turn is a centered, width-capped row; bubbles align to its edges. */
.message {
    width: 100%;
    max-width: var(--width);
    margin-inline: auto;
    padding-inline: var(--gap);
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    line-height: 1.4;
}

/* You (user) on the right — original bubble plus its correction stacked under. */
.message--user {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
}

/* Partner (assistant) replies on the left. */
.message--assistant {
    justify-content: flex-start;
}

/* A mistake-free turn: lay the row out so the green check sits to the LEFT of
   the (single) bubble. This is an Dialingo feature, not part of WhatsApp. */
.message--user.message--correct {
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 0.45rem;
}

.message__original,
.message__corrected,
.message__reply {
    position: relative;
    max-width: min(65%, 26rem);
    padding: 0.4rem 0.65rem 0.45rem;
    border-radius: 0.55rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    box-shadow: var(--shadow);
}

/* Outgoing bubble: green, with a little tail folded out at the top-right. */
.message__original {
    background: var(--bubble-out);
    border-top-right-radius: 0;
}

.message__original::after {
    content: "";
    position: absolute;
    top: 0;
    right: -0.45rem;
    border: 0.45rem solid transparent;
    border-top-color: var(--bubble-out);
    border-left-color: var(--bubble-out);
}

/* The correction, shown as a secondary bubble tucked under the original. */
.message__corrected {
    background: var(--bubble-correct);
    border-top-right-radius: 0;
    font-size: 0.95em;
}

.message__corrected::before {
    content: "corrected";
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.68em;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-soft);
}

/* Inline change highlighting within the corrected text. */
.diff-add {
    color: var(--diff-add);
    font-weight: 600;
}

.diff-del {
    color: var(--diff-del);
    text-decoration: line-through;
}

/* Incoming bubble: white, with a tail folded out at the top-left. */
.message__reply {
    background: var(--bubble-in);
    border-top-left-radius: 0;
}

.message__reply::after {
    content: "";
    position: absolute;
    top: 0;
    left: -0.45rem;
    border: 0.45rem solid transparent;
    border-top-color: var(--bubble-in);
    border-right-color: var(--bubble-in);
}

/* Green check shown to the left of a message that had no mistakes. */
.message__check {
    flex: none;
    align-self: center;
    color: var(--check);
    font-weight: 700;
    line-height: 1;
}

/* "Partner is typing" indicator: three pulsing dots inside an incoming bubble. */
.message__typing {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--text-soft);
}

.message__dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.35;
    animation: typing-bounce 1.2s infinite ease-in-out;
}

.message__dot:nth-child(2) {
    animation-delay: 0.2s;
}

.message__dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing-bounce {
    0%,
    60%,
    100% {
        opacity: 0.3;
        transform: translateY(0);
    }
    30% {
        opacity: 1;
        transform: translateY(-0.2rem);
    }
}

/* Respect users who prefer no motion: keep the dots, drop the bounce. */
@media (prefers-reduced-motion: reduce) {
    .message__dot {
        animation: none;
    }
}

/* Inline notice under a message: a failed turn or one that wasn't saved. */
.message__notice {
    align-self: flex-end;
    margin-top: 0.1rem;
    padding: 0.15rem 0.5rem;
    border-radius: 0.5rem;
    background: var(--hover);
    font-size: 0.72em;
    color: var(--notice);
}

/* --- composer (footer bar) ------------------------------------------------- */

.composer {
    position: relative; /* anchor for the emoji picker popover */
    flex: none;
    background: var(--footer);
    padding: 0.5rem 0;
}

/* Emoji picker popover, floating just above the input. */
.emoji-picker {
    position: absolute;
    left: var(--gap);
    bottom: calc(100% + 0.3rem);
    width: min(22rem, calc(100% - 2 * var(--gap)));
    max-height: 14rem;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.1rem;
    padding: 0.5rem;
    background: var(--panel);
    border: 1px solid var(--divider);
    border-radius: 0.75rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
    z-index: 5;
}

.emoji-picker[hidden] {
    display: none;
}

.emoji-picker__item {
    display: grid;
    place-items: center;
    border: none;
    background: none;
    padding: 0.2rem;
    border-radius: 0.4rem;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.emoji-picker__item:hover {
    background: var(--hover);
}

/* Apple emoji artwork rendered inline, sized to sit with the surrounding text. */
.emoji {
    height: 1.25em;
    width: 1.25em;
    margin: 0 0.02em;
    vertical-align: -0.25em;
    object-fit: contain;
}

/* The input row: white pill (emoji + textarea) and a round send button. */
.inputrow {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    width: 100%;
    max-width: var(--width);
    margin: 0 auto;
    padding: 0 var(--gap);
}

.inputbox {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    gap: 0.3rem;
    background: var(--input-bg);
    border-radius: 1.3rem;
    padding: 0.3rem 0.55rem 0.3rem 0.6rem;
    box-shadow: var(--shadow);
}

.inputbox__emoji {
    flex: none;
    align-self: center;
    display: grid;
    place-items: center;
    border: none;
    background: none;
    padding: 0;
    color: var(--text-soft);
    cursor: pointer;
}

.inputbox__emoji:hover {
    color: var(--text);
}

.inputbox__emoji svg {
    width: 1.5rem;
    height: 1.5rem;
}

.autogrow {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.35rem 0.2rem;
    font: inherit;
    line-height: 1.4;
    color: var(--text);
    background: transparent;
    border: none;
    resize: none;
    max-height: 40vh;
    overflow-y: auto;
}

.autogrow:focus {
    outline: none;
}

.autogrow::placeholder {
    color: var(--text-soft);
}

.send {
    flex: none;
    width: 2.8rem;
    height: 2.8rem;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: var(--send);
    color: #fff;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: background 0.15s ease, opacity 0.15s ease;
}

.send:hover {
    background: var(--send-hover);
}

.send__icon {
    width: 1.5rem;
    height: 1.5rem;
    margin-left: 0.1rem; /* optically center the asymmetric glyph */
}

/* Dim the send button while the input is empty (nothing to send). */
.inputrow:has(#input:placeholder-shown) .send {
    opacity: 0.5;
    pointer-events: none;
}

/* --- mobile: one pane at a time (list, then the open chat) ------------------ */

@media (max-width: 768px) {
    .sidebar {
        flex-basis: 100% !important; /* override any dragged width on mobile */
        max-width: none;
        border-right: none;
    }

    .resizer {
        display: none;
    }

    .chat {
        display: none;
    }

    .app--chat .sidebar {
        display: none;
    }

    .app--chat .chat {
        display: flex;
    }

    .topbar__back {
        display: grid;
    }
}