/*
 * The chat page (chat.js: /chat and /chat/<topic>, its topics, messages
 * and threads) and the header's Chat link, the profile dialog (profile.js)
 * and display names on address links (names.js). On the page's theme
 * tokens (app.css), so light and dark come for free.
 */

/* ------------------------------------------------------- display names */

/* A name in place of an address: the page's text face, not the mono one. */
a.has-display-name {
    font-family: var(--font);
    font-weight: 600;
}

.addr-head h2.addr-display-name {
    overflow-wrap: anywhere;
}

.addr-edit-profile {
    margin-left: 8px;
}

/* ------------------------------------------------------- the nav link */

/* The header's Chat link (index.html): a dot on its top right while a
   topic has unread messages. The padding is there either way, so the dot
   never moves the links after it. */
.nav-link--dot {
    padding-right: 16px;
}

.nav-link--dot .nav-dot {
    position: absolute;
    top: 9px;
    right: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--series-2);
    box-shadow: 0 0 0 2px var(--surface);
}

/* ------------------------------------------------------------- the page */

/* The chat pane alone, whatever the width (as the sat pane). */
.panes.is-chat {
    display: flex;
}

.panes.is-chat > .pane:not(.pane--chat),
.panes:not(.is-chat) > .pane--chat {
    display: none;
}

.pane--chat {
    overflow: hidden;
}

/*
 * Three columns: the topics, the topic's messages, the thread open.
 *
 *   >= 1200  topics · messages · thread (when one is open)
 *   >= 720   topics · messages, or topics · thread (Back to the messages)
 *   <  720   one at a time: /chat the topics, /chat/<topic> the messages
 *            (‹ Topics), a thread over them (‹ Back)
 *
 * One room (.is-single: one live topic, just General for now): no topics
 * column; General's messages full width, a thread beside them at 1200 and
 * up, else in their place (‹ Back).
 */
.chat-page {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
}

.chat-topics,
.chat-main,
.chat-thread {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.chat-page.is-single {
    grid-template-columns: minmax(0, 1fr);
}

.chat-page.is-single > .chat-topics,
.chat-page.is-single .chat-back {
    display: none;
}

@media (min-width: 1200px) {
    .chat-page.has-thread {
        grid-template-columns: 232px minmax(0, 1fr) minmax(340px, 30%);
    }

    .chat-page.is-single.has-thread {
        grid-template-columns: minmax(0, 1fr) minmax(340px, 30%);
    }

    .chat-thread {
        border-left: 1px solid var(--border);
    }

    .chat-thread-back {
        display: none;
    }
}

@media (max-width: 1199.98px) {
    .chat-page.has-thread .chat-main {
        display: none;
    }

    .chat-thread-close {
        display: none;
    }
}

/* ------------------------------------------------------------ topics */

.chat-topics {
    overflow-y: auto;
    overscroll-behavior: contain;
    border-right: 1px solid var(--border);
    background: var(--sunken);
}

.chat-topics-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 12px 14px 8px;
}

.chat-topics-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.chat-topics-lede {
    color: var(--muted);
    font-size: 12px;
}

.chat-topic-list {
    margin: 0;
    padding: 0 6px 8px;
    list-style: none;
}

.chat-topic {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 8px 6px 10px;
    border-radius: 6px;
    color: var(--ink-2);
    text-decoration: none;
}

.chat-topic:hover {
    background: var(--hover);
    color: var(--ink);
}

.chat-topic[aria-current="page"] {
    background: var(--chip);
    color: var(--ink);
}

.chat-topic[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: 2px;
    background: var(--ink);
}

.chat-topic:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
}

.chat-topic-line {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.chat-topic-name {
    min-width: 0;
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-topic.is-unread .chat-topic-name {
    color: var(--ink);
}

.chat-dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--series-2);
}

.chat-topic-time {
    flex: none;
    margin-left: auto;
    color: var(--muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.chat-topic-desc {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-admin {
    margin: 4px 12px 8px;
    font-size: 13px;
}

.chat-admin summary {
    color: var(--ink-2);
    cursor: pointer;
}

.chat-admin-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0 16px;
    padding: 0 16px 6px;
}

.chat-admin-tools .chat-admin {
    margin: 0;
}

.chat-admin-body,
.chat-bans-body {
    padding-top: 6px;
}

.chat-topic-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chat-topic-form label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--ink-2);
    font-size: 12px;
}

.chat-field {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid var(--control-border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink);
    font: 13px var(--font);
}

.chat-topic-form .btn {
    align-self: flex-start;
}

/* ---------------------------------------------------------- messages */

.chat-main-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
}

.chat-heading {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.chat-title {
    flex: none;
    max-width: 100%;
    overflow: hidden;
    font-size: 16px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-desc {
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-back {
    display: none;
    flex: none;
    align-items: center;
    gap: 3px;
    color: var(--ink-2);
    font-weight: 600;
    text-decoration: none;
}

.chat-archive {
    flex: none;
}

.chat-log-wrap {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.chat-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-anchor: none;
    overscroll-behavior: contain;
    padding: 6px 0;
}

/* A topic's few messages sit at the bottom, by the composer, as a chat's do. */
.chat-scroll--bottom {
    display: flex;
    flex-direction: column;
}

.chat-scroll--bottom::before {
    content: "";
    margin-top: auto;
}

.chat-scroll:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
}

.chat-earlier-wrap {
    display: flex;
    justify-content: center;
    padding: 4px 0 8px;
}

.chat-earlier-wrap:has(> [hidden]) {
    display: none;
}

.chat-empty {
    padding: 24px 16px;
    color: var(--muted);
    text-align: center;
}

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

.chat-msg {
    padding: 4px 16px;
}

.chat-msg:hover {
    background: var(--hover);
}

.chat-msg.is-own {
    background: var(--wash);
}

/* A linked message (?m=): marked until another is. */
.chat-msg.is-target {
    background: var(--flash);
    box-shadow: inset 3px 0 0 var(--series-1);
}

@media (prefers-reduced-motion: no-preference) {
    .chat-msg.is-target {
        animation: chat-target 2.4s ease-out forwards;
    }

    @keyframes chat-target {
        to {
            background: var(--wash);
        }
    }
}

.chat-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    min-height: 22px;
    font-size: 12px;
}

.chat-author {
    color: var(--ink);
    font-weight: 600;
}

.chat-time {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}

.chat-time:hover {
    color: var(--ink-2);
    text-decoration: underline;
}

.chat-tools {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-left: auto;
}

/* Reply and the admins' tools show on hover and focus where there is a
   pointer (they keep their place, so nothing moves); always on touch. */
@media (hover: hover) {
    .chat-msg .chat-tools {
        opacity: 0;
    }

    .chat-msg:hover .chat-tools,
    .chat-msg:focus-within .chat-tools,
    .chat-msg.is-target .chat-tools {
        opacity: 1;
    }
}

.chat-badge {
    padding: 0 5px;
    border-radius: 4px;
    background: var(--series-1);
    color: #ffffff;
    font: 700 10px/16px var(--font);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.chat-text {
    font-size: 14px;
    line-height: 1.45;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.chat-link {
    color: var(--series-1);
    text-decoration: underline;
    text-decoration-color: var(--underline);
}

.chat-sat {
    color: inherit;
    font-size: 0.95em;
    text-decoration: underline dotted;
    text-decoration-color: var(--muted);
    text-underline-offset: 2px;
}

.chat-sat:hover {
    color: var(--series-1);
}

.chat-jump {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    box-shadow: var(--shadow);
}

.chat-signout,
.chat-mod-btn {
    padding: 1px 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--ink-2);
    font: 12px/1.4 var(--font);
    cursor: pointer;
}

.chat-signout:hover,
.chat-mod-btn:hover {
    background: var(--hover);
    color: var(--ink);
}

.chat-mod-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

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

.chat-ban-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    padding: 3px 0;
}

.chat-ban-list .chat-mod-btn {
    margin-left: auto;
}

.chat-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
}

.chat-actions:empty {
    display: none;
}

.chat-act {
    min-height: 22px;
    padding: 0 2px;
    border: 0;
    background: transparent;
    color: var(--ink-2);
    font: 600 12px/22px var(--font);
    cursor: pointer;
}

.chat-act:hover {
    color: var(--ink);
    text-decoration: underline;
}

.chat-act:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 1px;
    border-radius: 4px;
}

.chat-thread-link {
    color: var(--series-1);
}

.chat-thread-last {
    color: var(--muted);
    font-weight: 400;
}

/* ---------------------------------------------------------- composer */

.chat-compose {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 16px 4px;
    border-top: 1px solid var(--border);
}

.chat-compose:empty {
    display: none;
}

.chat-note {
    color: var(--ink-2);
    font-size: 13px;
}

.chat-note.is-error {
    color: var(--critical);
}

.chat-identity-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-2);
    font-size: 13px;
}

.chat-identity {
    flex: 1;
    min-width: 0;
    padding: 4px 6px;
    border: 1px solid var(--control-border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink);
    font: 13px var(--font);
}

.chat-signin {
    align-self: flex-start;
}

.chat-form {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-form-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.chat-input {
    flex: 1;
    min-width: 0;
    min-height: 40px;
    max-height: 160px;
    resize: vertical;
    padding: 8px 10px;
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    background: var(--page);
    color: var(--ink);
    font: 14px/1.4 var(--font);
}

.chat-input:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 0;
}

.chat-send {
    flex: none;
    height: 40px;
}

.chat-form-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--muted);
    font-size: 12px;
}

.chat-count {
    font-variant-numeric: tabular-nums;
}

.chat-count.is-over {
    color: var(--critical);
    font-weight: 600;
}

.chat-status {
    padding: 0 16px;
    color: var(--ink-2);
    font-size: 12px;
}

.chat-status:not(:empty) {
    padding-top: 6px;
}

.chat-status.is-error {
    color: var(--critical);
}

.chat-who {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 2px 16px 8px;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}

.chat-who:empty {
    padding-bottom: 6px;
}

.chat-who .chat-me {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------------------------------------------------- thread */

.chat-thread {
    background: var(--surface);
}

.chat-thread-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 45px;
    padding: 6px 10px 6px 12px;
    border-bottom: 1px solid var(--border);
}

.chat-thread-title {
    flex: 1;
    font-size: 14px;
    font-weight: 700;
}

.chat-thread-root {
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
}

.chat-msg.is-root {
    background: var(--sunken);
}

.chat-replies .chat-msg {
    padding-left: 28px;
}

.chat-quote {
    display: flex;
    gap: 6px;
    min-width: 0;
    margin: 2px 0;
    padding: 1px 8px;
    border-left: 3px solid var(--axis);
    color: var(--ink-2);
    font-size: 12px;
    line-height: 1.4;
}

.chat-quote-author {
    flex: none;
    color: var(--ink-2);
    font-weight: 600;
}

.chat-quote-text,
.chat-target-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-target {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 4px 4px 4px 8px;
    border-left: 3px solid var(--series-1);
    border-radius: 0 6px 6px 0;
    background: var(--wash);
    color: var(--ink-2);
    font-size: 12px;
}

.chat-target-label {
    flex: none;
    font-weight: 600;
}

.chat-target-text {
    flex: 1;
}

.chat-target-cancel {
    flex: none;
    min-width: 24px;
    font-size: 16px;
    line-height: 20px;
}

/* ------------------------------------------------------------- phones */

@media (max-width: 719.98px) {
    .chat-page {
        grid-template-columns: minmax(0, 1fr);
    }

    /* /chat: the topics; a topic: its messages; a thread: over them.
       One room: /chat is its messages. */
    .chat-page.is-index:not(.is-single) > .chat-main,
    .chat-page:not(.is-index) > .chat-topics,
    .chat-page.has-thread > .chat-main,
    .chat-page.has-thread > .chat-topics {
        display: none;
    }

    .chat-page.is-index.has-thread > .chat-thread {
        display: flex;
    }

    .chat-topics {
        border-right: 0;
        background: var(--surface);
    }

    .chat-topic {
        padding: 10px 10px 10px 12px;
    }

    .chat-topic-desc {
        white-space: normal;
    }

    .chat-back {
        display: inline-flex;
    }

    .chat-main-head {
        padding: 8px 12px;
    }

    .chat-desc {
        display: none;
    }

    .chat-page.is-single .chat-desc {
        display: block;
        font-size: 12px;
    }

    .chat-admin-tools {
        padding: 0 12px 6px;
    }

    .chat-msg {
        padding: 5px 12px;
    }

    .chat-compose,
    .chat-status,
    .chat-who {
        padding-left: 12px;
        padding-right: 12px;
    }

    .chat-compose {
        padding-bottom: calc(4px + env(safe-area-inset-bottom));
    }

    .chat-input {
        font-size: 16px; /* no zoom on focus in iOS Safari */
    }

    .chat-hint {
        display: none;
    }

    .chat-form-foot {
        justify-content: flex-end;
    }

    /* Bigger touch targets. */
    .chat-act {
        min-height: 32px;
        line-height: 32px;
        padding: 0 4px;
    }

    .chat-replies .chat-msg {
        padding-left: 20px;
    }
}

@media (forced-colors: active) {
    .chat-dot,
    .nav-link--dot .nav-dot {
        background: Highlight;
    }

    .chat-msg.is-target {
        outline: 2px solid Highlight;
    }
}

/* --------------------------------------------------------- profile dialog */

.profile-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 20px 18px;
}

.profile-form .wallet-dialog-status {
    margin: 0;
}

.profile-picker {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
}

.profile-picker legend {
    padding: 0 4px;
    color: var(--ink-2);
}

.profile-current {
    color: var(--ink-2);
    font-size: 13px;
}

.profile-label {
    font-weight: 600;
}

.profile-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    background: var(--page);
    color: var(--ink);
    font: 15px var(--font);
}

.profile-input[aria-invalid="true"] {
    border-color: var(--critical);
}

.profile-hint {
    min-height: 18px;
    color: var(--critical);
    font-size: 12px;
}

.profile-rules {
    margin: 0;
    padding-left: 18px;
    color: var(--ink-2);
    font-size: 12px;
}

.profile-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

.profile-actions .btn--quiet {
    margin-right: auto;
}

/* A listing card's seller (trade.js): "by <name or address>". */
.lcard-seller {
    color: var(--ink-2);
    font-size: 12px;
}