.msgs { border-top: 1px solid var(--line); }

.m {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    border-bottom: 1px solid var(--line);
}

.m.reply {
    margin-left: calc(16px + var(--d, 0) * var(--r-step));
    border-left: 1px solid var(--line2);
}

.m-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 6px;
    background: var(--panel);
    border-right: 1px solid var(--line);
    text-align: center;
}

.m-user .ava { width: 44px; height: 44px; font-size: 18px; }

.m-stat { font: 11px var(--mono); color: var(--dim); }

.m-main { min-width: 0; padding: 7px 10px 8px; }

.m-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    font: 11px var(--mono);
    color: var(--dim);
}

.hash { color: var(--dim); }

.m-acts { display: inline-flex; align-items: baseline; gap: 8px; margin-left: auto; opacity: 0; transition: opacity 0.1s; }
.m-acts form { margin: 0; }
.m:hover .m-acts { opacity: 1; }

.nick {
    font: 700 14px var(--ui);
    color: var(--text);
}

.nick:hover { color: var(--accent); text-decoration: none; }

.m-nick {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.flag {
    display: inline-block;
    flex: none;
    width: 18px;
    height: 12px;
    border: 1px solid var(--line2);
    vertical-align: -2px;
}

.flag.ru { background: linear-gradient(#d9d6cd 0 33.4%, #2f5f9e 33.4% 66.7%, #a63b30 66.7% 100%); }
.flag.ua { background: linear-gradient(#3a6fa8 0 50%, #c8a83c 50% 100%); }
.flag.by {
    background:
        linear-gradient(#d9d6cd, #d9d6cd) 0 0 / 22% 100% no-repeat,
        linear-gradient(#bf3542 0 66.7%, #4c9e56 66.7% 100%);
}
.flag.jp {
    background:
        radial-gradient(circle at 50% 50%, #cf3549 0 30%, transparent 31%),
        #d9d6cd;
}
.flag.cn {
    background-color: #c23b4d;
    background-image: var(--flag-cn);
    background-size: 100% 100%;
}
.flag.de { background: linear-gradient(#3f3f47 0 33.4%, #c23b4d 33.4% 66.7%, #e8c15a 66.7% 100%); }
.flag.us {
    background:
        linear-gradient(#454a7a, #454a7a) 0 0 / 45% 55% no-repeat,
        linear-gradient(#b8455a 0 14.3%, #d9d6cd 14.3% 28.6%, #b8455a 28.6% 42.9%, #d9d6cd 42.9% 57.2%, #b8455a 57.2% 71.5%, #d9d6cd 71.5% 85.8%, #b8455a 85.8% 100%);
}
.flag.mlm {
    background: linear-gradient(#2f9e8f 0 16.7%, #56c1a8 16.7% 33.3%, #a5dbc8 33.3% 50%, #d9d6cd 50% 66.7%, #7fa9d9 66.7% 83.3%, #4f6fc2 83.3% 100%);
}

.tag {
    font: 10px var(--mono);
    color: var(--accent);
    background: rgba(200, 118, 42, 0.08);
    border: 1px solid rgba(200, 118, 42, 0.35);
    padding: 0 3px;
}

.to { color: var(--dim); white-space: nowrap; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0 3px;
    font: 10px var(--mono);
    color: var(--ring, var(--dim));
    border: 1px solid color-mix(in srgb, var(--ring, var(--line2)) 45%, transparent);
    background: color-mix(in srgb, var(--ring, var(--line2)) 10%, transparent);
}

.badge .bi { opacity: 0.75; }
.badge.more { color: var(--dim); border-color: var(--line2); background: none; }
.badge.off { --ring: var(--dim); opacity: 0.4; border-style: dashed; }

.m-badges { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; }
.p-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }

.m-body {
    margin-top: 3px;
    max-width: 68ch;
    font: 16px/1.68 var(--serif);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.m-body .txt, .m-body .quote { white-space: pre-wrap; }

.quote {
    margin: 3px 0;
    padding-left: 7px;
    border-left: 2px solid var(--line2);
    color: var(--dim);
    font-style: italic;
}

.mention { color: var(--accent); }
.mention:hover { color: var(--accent); text-decoration: underline; }

.ext {
    color: var(--link);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}

.ext:hover { color: var(--accent); text-decoration-style: solid; }

.m-imgs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.m-img { display: block; line-height: 0; }

.m-img img {
    display: block;
    width: auto;
    height: auto;
    max-width: 240px;
    max-height: 240px;
    border: 1px solid var(--line2);
    background: var(--panel2);
}

.m-img:hover img { border-color: var(--accent); }

.m-sign {
    margin-top: 6px;
    padding-top: 4px;
    max-width: 68ch;
    border-top: 1px dashed var(--line);
    color: var(--dim);
    font: italic 13px/1.6 var(--serif);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.m-meta { margin-left: auto; }

.m-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 7px;
}

.m-react { display: flex; flex-wrap: wrap; gap: 8px; }

@media (min-width: 1000px) and (hover: hover) {
    .m-react { visibility: hidden; }
    .m:hover .m-react, .m-react:has(.n) { visibility: visible; }
}

.m-react .react {
    padding: 1px 4px;
    border: 0;
    background: none;
}

.m-react .react:hover,
.m-react .react.on {
    color: var(--accent);
    border: 0;
    background: none;
}

.react {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--dim);
    font: 11px var(--mono);
    cursor: pointer;
}

.react:hover { color: var(--accent); border-color: var(--line2); filter: none; }

.react.on { color: var(--accent); border-color: var(--accent-dark); background: var(--panel2); }

.react .n { color: var(--accent); }

.ava.anon { color: var(--dim); }

.nick.anon { color: var(--dim); font-weight: 400; }

.reply-to {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    font: 11px var(--mono);
    color: var(--dim);
}

.reply-to:hover { color: var(--accent); text-decoration: none; }

.replies {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 4px;
    min-height: 20px;
    padding: 0 6px;
    font: 11px var(--mono);
    color: var(--dim);
    background: var(--panel);
    border: 1px solid var(--line);
}

.replies:hover { color: var(--accent); border-color: var(--line2); text-decoration: none; }
.replies .rc { color: var(--accent); font-weight: 600; }
.replies:has(.rc) { border-color: var(--accent-dark); background: var(--panel2); }

.day {
    padding: 3px 8px;
    background: var(--panel2);
    border-bottom: 1px solid var(--line);
    font: 11px var(--mono);
    color: var(--dim);
}

.more {
    padding: 7px 8px;
    text-align: center;
    border-bottom: 1px solid var(--line);
}

.more button { min-height: 24px; }

.tag.edited { display: none; }

.m-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }

a.tag { text-decoration: none; }

a.tag:hover { color: var(--accent); border-color: var(--accent-dark); background: var(--panel2); }

.m-edit-tags {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--line2);
    background: var(--panel);
    color: var(--text);
    font: 12px var(--mono);
}

.m-edit-tags:focus { outline: none; border-color: var(--accent); }

.ad {
    margin: 8px 0;
    padding: 6px 8px;
    border: 1px solid var(--line);
    background: var(--panel);
    text-align: center;
    overflow: hidden;
}

.ad-label {
    display: block;
    margin-bottom: 4px;
    font: 10px var(--mono);
    color: var(--dim);
    text-align: left;
}

.ad-side { position: sticky; top: 8px; }

.ad-mobile { display: none; }

@media (max-width: 999px) {
    .ad-mobile { display: block; }
}

.m-edit { margin-top: 4px; display: grid; gap: 6px; }

.m-edit textarea {
    width: 100%;
    min-height: 64px;
    padding: 6px 8px;
    border: 1px solid var(--line2);
    background: var(--panel);
    color: var(--text);
    font: 16px/1.65 var(--serif);
    resize: vertical;
}

.m-edit textarea:focus { outline: none; border-color: var(--accent); }

.m-edit-btns { display: flex; align-items: center; gap: 8px; }

.m-edit-err { font: 11px var(--mono); color: var(--danger); }