/* A circle's group: what was said, oldest at the top, and a line to write in. */

/* Laid bottom up, so the box opens at the newest message and stays there as more are said. */
.messages {
    display: flex;
    flex-direction: column-reverse;
    max-height: calc(34 * var(--h));
    overflow-y: auto;
    padding-right: calc(1 * var(--h));
}

.messages .run {
    display: grid;
    gap: calc(1 * var(--h));
}

.page.friends .messages { max-height: calc(52 * var(--h)); }

.messages .run > div {
    justify-self: start;
    max-width: 78%;
    padding: calc(0.8 * var(--h)) calc(1.8 * var(--h));
    border-radius: calc(1.6 * var(--h));
    background: #fffaf0;
    border: calc(0.2 * var(--h)) solid var(--gold);
}

.messages .run > div.mine {
    justify-self: end;
    background: var(--navy);
    border-color: var(--navy);
    color: var(--cream);
}

.messages small { color: var(--ink-soft); font-size: calc(2 * var(--h)); }
.messages .mine small { color: rgba(246, 230, 192, 0.7); }
.messages p { white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.messages .note { justify-self: center; color: var(--ink-soft); font-size: calc(2.1 * var(--h)); }

.messages div button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--cobalt);
    font: inherit;
    font-size: calc(1.9 * var(--h));
    text-decoration: underline;
    cursor: pointer;
}

.page .write { display: flex; gap: calc(1 * var(--h)); }

.page .write input {
    flex: 1;
    min-width: 0;
    padding: calc(1 * var(--h)) calc(1.6 * var(--h));
    border: calc(0.3 * var(--h)) solid var(--gold);
    border-radius: calc(1.2 * var(--h));
    background: #fffaf0;
    color: var(--ink);
    font: inherit;
    user-select: text;
    -webkit-user-select: text;
}

.page .write button {
    padding: calc(0.8 * var(--h)) calc(2.4 * var(--h));
    border: 0;
    border-radius: calc(3 * var(--h));
    background: var(--navy);
    color: var(--cream);
    font: inherit;
    cursor: pointer;
}

.page .write button:disabled { opacity: 0.45; cursor: default; }

/* Friends, beside the circles: the way in on the shelf, and the list with where each one is. */

.shelf .circle.mates { position: relative; }

.shelf .circle.mates .face {
    grid-row: span 2;
    width: calc(7 * var(--h));
    height: calc(7 * var(--h));
    border-radius: 50%;
    background: var(--navy);
    box-shadow: inset 0 0 0 calc(0.5 * var(--h)) var(--gold);
}

.shelf .circle.mates b,
.mates .who b {
    min-width: calc(3.4 * var(--h));
    padding: 0 calc(0.8 * var(--h));
    border-radius: calc(2 * var(--h));
    background: var(--red);
    color: #fff;
    font-size: calc(2.1 * var(--h));
    line-height: calc(3.4 * var(--h));
    text-align: center;
}

.shelf .circle.mates b { position: absolute; top: calc(1 * var(--h)); inset-inline-end: calc(1 * var(--h)); }

.page.friends .head b { color: var(--navy); font-size: calc(3 * var(--h)); letter-spacing: 0.12em; }

.people.mates { grid-template-columns: 1fr; }
.people.mates li { align-items: center; }

.mates .who {
    flex: 1;
    display: flex;
    align-items: center;
    gap: calc(1.4 * var(--h));
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.mates .who i {
    width: calc(1.6 * var(--h));
    height: calc(1.6 * var(--h));
    border-radius: 50%;
    background: #3f9a52;
}

.mates .away .who i { background: #c9bfa6; }
.mates .who strong { font-size: calc(2.8 * var(--h)); color: var(--navy); }
.mates li > span { display: flex; gap: calc(1 * var(--h)); }

.page.friends .hide { display: flex; align-items: center; gap: calc(1 * var(--h)); color: var(--ink-soft); }
.page.friends .messages small { display: block; }

.page.friends .head { display: flex; justify-content: space-between; align-items: center; gap: calc(2 * var(--h)); }