/* =============================================================================
   account pages (2026-11 redesign). Loaded site-wide after shell.css.
   Dashboard hub layout, dashboard, settings, watchlist, saved searches,
   subscriptions, notifications, blocked users, 2FA, account deletion,
   terms re-acceptance and messages. Tokens only; breakpoints 600/840/1200.
   ============================================================================= */

/* ---------- Dashboard hub layout (used by every dashboard page) ----------
   <div id="dashboard-page" class="dashboard-hub"> + sidebar include +
   <div class="dashboard-main">. Overrides the legacy style.css grid. */
.dashboard-hub {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    margin-top: 0;
}
.dashboard-hub > * { min-width: 0; }
.dashboard-main { min-width: 0; max-width: none; }
.dashboard-sidebar { display: none; }
@media (min-width: 840px) {
    .dashboard-hub { grid-template-columns: 240px minmax(0, 1fr); gap: 2.5rem; }
    .dashboard-sidebar {
        display: block;
        position: sticky;
        top: calc(var(--header-h) + 16px);
        align-self: start;
        max-height: calc(100vh - var(--header-h) - 32px);
        overflow-y: auto;
        padding: 0.25rem 0;
    }
}
html.compact-chrome .dashboard-hub { grid-template-columns: minmax(0, 1fr); gap: 0; }
html.compact-chrome .dashboard-sidebar { display: none; }

/* Shared bits */
.inline-form { display: inline; margin: 0; }
.back-link {
    display: inline-flex; align-items: center; gap: 0.25rem;
    min-height: var(--tap); margin: 0 0 0.5rem -0.25rem; padding: 0 0.25rem;
    color: var(--text-2); font-weight: 500; text-decoration: none;
}
.back-link:hover { color: var(--text); text-decoration: underline; }
.narrow-page { max-width: 600px; }
.narrow-page .page-lede, .settings-page .page-lede { max-width: var(--measure); }
address { font-style: normal; }

/* ---------- Dashboard ---------- */
.dash-stripe-banner:empty { display: none; }
.dash-stripe-banner { margin: 0 0 1.25rem; }

/* The one bold element: what needs you. */
.dash-queue {
    margin: 0 0 2rem;
    padding: 1.25rem 1.25rem 0.5rem;
    background: var(--surface);
    border: 2px solid var(--accent);
    border-radius: var(--radius-lg);
}
.dash-queue-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.dash-queue-head h2 { margin: 0; font-size: var(--fs-h3); font-weight: 700; }
.dash-queue .activity-list { border-top-color: var(--border); }
.dash-queue .activity-list li:last-child { border-bottom: 0; }
.dash-queue-empty { margin: 0 0 0.75rem; color: var(--text-2); }
.dash-queue-more { margin: 0.5rem 0 0.75rem; font-weight: 600; }

.dash-notice {
    margin: 0 0 2rem; padding: 1rem 1.25rem;
    background: var(--amber-soft); border-radius: var(--radius-lg);
}
.dash-notice h2 { margin: 0 0 0.375rem; font-size: var(--fs-body); }
.dash-notice p { margin: 0.25rem 0 0; color: var(--text); font-size: var(--fs-small); }

.dash-zone {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem;
    margin: 0 0 2rem; padding: 0.875rem 0;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.dash-zone p { margin: 0; }

.dash-section { margin: 0 0 2.25rem; }
.dash-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 1rem;
}
.metric-tile {
    display: flex; flex-direction: column; gap: 0.75rem;
    padding: 1rem 1.125rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: none;
}
.metric-tile h3 { margin: 0; font-size: var(--fs-body); }
.metric-list { margin: 0; display: grid; gap: 0; }
.metric-list > div {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    padding: 0.4375rem 0; border-bottom: 1px solid var(--border);
}
.metric-list > div:last-child { border-bottom: 0; }
.metric-list dt { color: var(--text-2); font-size: var(--fs-small); font-family: var(--font-sans); text-transform: none; letter-spacing: normal; }
.metric-list dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.metric-list dd .muted { font-weight: 400; font-size: var(--fs-small); }
.metric-list dd a:not(.tag) { font-weight: 600; }
.metric-list .tag { text-decoration: none; }
.metric-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: auto; }
.metric-empty, .metric-note { margin: 0; color: var(--text-2); font-size: var(--fs-small); }

/* Level ladder: numbered steps, a real sequence. */
.tier-progress .split { align-items: baseline; margin-bottom: 0.75rem; }
.tier-progress .section-title { margin: 0; }
.tier-current { margin: 0; }
.tier-track {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.25rem;
    position: relative;
}
.tier-track::before {
    content: ""; position: absolute; top: 17px; left: 8%; right: 8%;
    height: 2px; background: var(--border);
}
.tier-step {
    position: relative; max-width: none;
    display: flex; flex-direction: column; align-items: center; gap: 0.375rem; text-align: center;
}
.tier-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 18px;
    background: var(--surface); border: 2px solid var(--field-border);
    color: var(--text-2); font-weight: 700; font-variant-numeric: tabular-nums;
}
.tier-label { font-size: var(--fs-caption); color: var(--text-2); overflow-wrap: anywhere; }
.tier-step.is-done .tier-num { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep); }
[data-theme="dark"] .tier-step.is-done .tier-num { color: var(--accent-2); }
.tier-step.is-current .tier-num { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tier-step.is-current .tier-label { color: var(--text); font-weight: 700; }
.tier-help { margin: 0.875rem 0 0; font-size: var(--fs-small); }
.dash-credit {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem;
    margin-top: 1rem; padding: 0.75rem 1rem;
    background: var(--surface-hi); border-radius: var(--radius-md);
}
.dash-credit p { margin: 0; font-size: var(--fs-small); }
.dash-credit strong { font-size: var(--fs-large); margin-left: 0.375rem; }
@media (max-width: 599.98px) {
    .dash-queue { padding: 1rem 1rem 0.25rem; }
    .tier-num { width: 30px; height: 30px; font-size: var(--fs-small); }
    .tier-track::before { top: 14px; }
}

/* ---------- Settings pages ---------- */
.settings-page { max-width: 720px; }
.settings-section { margin: 0 0 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.page-head + .settings-section, .error-summary + .settings-section { border-top: 0; padding-top: 0; }
.settings-section > h2 { margin: 0 0 1rem; font-size: var(--fs-large); }
.settings-section > p { margin: 0 0 0.75rem; }
.settings-form { display: flex; flex-direction: column; gap: 1.25rem; margin: 0; max-width: 560px; }
.field { display: flex; flex-direction: column; gap: 0.375rem; margin: 0; border: 0; padding: 0; min-width: 0; }
.field > label, .field > legend { font-weight: 600; padding: 0; }
.field input[type="text"], .field input[type="email"], .field input[type="password"],
.field select, .field textarea { width: 100%; padding: 0.5rem 0.75rem; }
.field textarea { resize: vertical; }
.field .field-hint { margin: 0; }
.field-hint--warn { color: var(--amber-text); }
.field-hint svg, .errorlist svg { vertical-align: -0.15em; }
.field input.is-readonly { background: var(--surface-hi); color: var(--text-2); cursor: not-allowed; }
.settings-facts { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--border); }
.settings-facts > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1rem; padding: 0.625rem 0; border-bottom: 1px solid var(--border); }
.settings-facts dt { color: var(--text-2); font-family: var(--font-sans); font-size: var(--fs-small); text-transform: none; letter-spacing: normal; }
.settings-facts dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; overflow-wrap: anywhere; }
.settings-inline-link { font-weight: 600; }
.settings-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 0; }
.settings-row {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem;
    padding: 0.875rem 0; border-bottom: 1px solid var(--border);
}
.settings-row:first-of-type { padding-top: 0; }
.settings-row:last-child { border-bottom: 0; }
.settings-row > div:first-child { flex: 1 1 280px; min-width: 0; }
.settings-row h3 { margin: 0 0 0.25rem; font-size: var(--fs-body); }
.settings-row p, .settings-row address { margin: 0; font-size: var(--fs-small); }
.settings-row .field-hint { margin-top: 0.375rem; }
.danger-zone > h2 { color: var(--danger); }
.danger-zone { border-top-color: var(--danger); }
@media (max-width: 599.98px) {
    .settings-facts > div { grid-template-columns: minmax(0, 1fr); gap: 0.125rem; }
    .settings-row .btn, .settings-actions .btn { width: 100%; }
    .settings-row .cluster, .settings-row .inline-form { width: 100%; }
}

/* Notice boxes (status + text, never colour alone) */
.notice-box {
    margin: 0 0 1.5rem; padding: 1rem 1.25rem;
    background: var(--surface-hi); border-radius: var(--radius-lg);
    border-left: 4px solid var(--field-border);
}
.notice-box h2 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; font-size: var(--fs-body); }
.notice-box p { margin: 0.375rem 0 0; }
.notice-box p:first-child { margin-top: 0; }
.notice-box ul { margin: 0.25rem 0 0; padding-left: 1.25rem; }
.notice-box li { margin: 0.25rem 0; }
.notice-box--warn { background: var(--amber-soft); border-left-color: var(--amber-text); }
.notice-box--ok { background: var(--accent-soft); border-left-color: var(--accent); }
.notice-box--ok h2 svg { color: var(--accent-deep); }
[data-theme="dark"] .notice-box--ok h2 svg { color: var(--accent-2); }
.notice-link { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 600; min-height: var(--tap); }
.notice-box .blocker-list { list-style: none; padding: 0; }
.blocker-list li { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.blocker-list li:last-child { border-bottom: 0; }
.blocker-list a { font-weight: 600; }
.plain-list { margin: 0; padding-left: 1.25rem; }
.plain-list li { margin: 0 0 0.625rem; }

/* Checkbox and radio rows */
.check-list { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; }
.check-row { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.875rem 0; border-bottom: 1px solid var(--border); }
.check-row:first-of-type { border-top: 1px solid var(--border); }
.check-row input { flex: 0 0 auto; margin-top: 0.125rem; }
.check-row label { display: flex; flex-direction: column; gap: 0.125rem; cursor: pointer; }
.check-label { font-weight: 600; }
.radio-list { display: flex; flex-direction: column; }
.radio-row { display: flex; align-items: center; gap: 0.625rem; min-height: var(--tap); cursor: pointer; font-weight: 400; }

/* One-time codes: single field, paste allowed */
input.otp-input {
    max-width: 12rem; font-family: var(--font-mono); font-size: var(--fs-large);
    letter-spacing: 0.25em; text-align: center; font-variant-numeric: tabular-nums;
}

/* 2FA enrolment and codes */
.tfa-qr { margin: 0 0 1.5rem; padding: 1.25rem; text-align: center; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.tfa-qr-code { display: inline-block; padding: 0.75rem; border-radius: var(--radius-md); background: white; line-height: 0; }
.tfa-qr-code svg { max-width: 220px; height: auto; }
.tfa-qr .field-hint { margin: 1rem 0 0.25rem; }
.tfa-secret { margin: 0 auto; font-size: var(--fs-body); letter-spacing: 0.08em; overflow-wrap: anywhere; max-width: none; }
.tfa-codes {
    margin: 0 0 1.5rem; padding: 1.25rem; text-align: center;
    font-size: var(--fs-large); line-height: 1.8; letter-spacing: 0.12em;
    background: var(--surface); border: 1px solid var(--field-border); border-radius: var(--radius-lg);
    color: var(--text); white-space: pre; overflow-x: auto;
}
@media print {
    .site-header, .site-footer, .bottom-nav, .settings-actions, .back-link { display: none !important; }
}

/* Partner tag (legacy class kept for tests; restyled as a status tag) */
.tag.badge-partner {
    font-family: var(--font-sans); font-size: var(--fs-caption); text-transform: none; letter-spacing: normal;
    padding: 0.125rem 0.5rem; line-height: 1.5; border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface-hi); color: var(--text-2);
}

/* Public bio */
.profile-bio { white-space: pre-line; color: var(--text-2); margin: 0 0 1.5rem; max-width: var(--measure); }

/* ---------- Row lists (saved searches, subscriptions, blocked) ---------- */
.row-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.row-item {
    max-width: none;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem;
    padding: 1rem 0; border-bottom: 1px solid var(--border);
}
.row-main { flex: 1 1 260px; min-width: 0; }
.row-title { margin: 0 0 0.25rem; font-size: var(--fs-body); font-weight: 600; overflow-wrap: anywhere; }
.row-title a { color: var(--text); }
.row-detail { margin: 0.125rem 0 0; color: var(--text-2); font-size: var(--fs-small); }
.row-detail .tag { margin-right: 0.375rem; }
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0; }
.row-quiet { color: var(--text-2); }
.block-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; max-width: 560px; }
@media (min-width: 840px) { .block-form { grid-template-columns: 1fr 1fr; align-items: start; } .block-form .settings-actions { grid-column: 1 / -1; } }

/* ---------- Notifications history ---------- */
.notif-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.notif-item { max-width: none; display: flex; gap: 0.875rem; align-items: flex-start; padding: 0.875rem 0; border-bottom: 1px solid var(--border); }
.notif-icon {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 18px; background: var(--surface-hi); color: var(--text-2);
}
.notif-text { flex: 1; min-width: 0; }
.notif-title { font-weight: 600; color: var(--text); }
a.notif-title:hover { text-decoration: underline; }
.notif-body { margin: 0.125rem 0 0; color: var(--text-2); font-size: var(--fs-small); }
.notif-when { margin: 0.25rem 0 0; color: var(--text-2); font-size: var(--fs-caption); }

/* ---------- Watchlist: photo with text beneath, no card ---------- */
.watch-section { margin: 0 0 2.5rem; }
.watch-section .section-title .muted { font-weight: 400; font-size: var(--fs-body); }
.watch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
    gap: 2rem 1.5rem;
}
@media (max-width: 599.98px) { .watch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; } }
.watch-tile { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.watch-tile-link { color: var(--text); text-decoration: none; }
.watch-tile-link:hover { color: var(--text); }
.watch-tile-link:hover .watch-tile-title { text-decoration: underline; text-underline-offset: 3px; }
.watch-tile-photo {
    aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-md);
    background: var(--surface-hi);
    display: flex; align-items: center; justify-content: center; color: var(--text-3);
}
.watch-tile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(var(--photo-dim)); }
.watch-tile-title {
    margin: 0.5rem 0 0; font-size: var(--fs-body); line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.watch-tile-price { margin: 0.125rem 0 0; }
.watch-tile-price strong { font-size: var(--fs-large); }
.watch-tile-price .muted { font-size: var(--fs-small); }
.watch-tile-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; color: var(--text-2); font-size: var(--fs-small); }
.watch-tile-meta:empty { display: none; }
.watch-tile-meta > span:not(.tag) { display: inline-flex; align-items: center; gap: 0.25rem; }
.watch-tile-remove { margin: 0.125rem 0 0; }
.watch-tile-remove .btn-link { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0; border: 0; background: none; color: var(--text-2); font-weight: 500; font-size: var(--fs-small); cursor: pointer; }
.watch-tile-remove .btn-link:hover { color: var(--text); text-decoration: underline; }

/* ---------- Messages: inbox ---------- */
.inbox-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.inbox-list li { max-width: none; border-bottom: 1px solid var(--border); }
.inbox-row {
    display: flex; align-items: center; gap: 1rem;
    min-height: 64px; padding: 0.75rem 0.25rem;
    color: var(--text); text-decoration: none;
}
.inbox-row:hover { background: var(--surface-hi); color: var(--text); text-decoration: none; }
.inbox-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.inbox-who { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.inbox-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-role { color: var(--text-2); font-size: var(--fs-caption); }
.inbox-listing { color: var(--text-2); font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; }
.inbox-when { color: var(--text-2); font-size: var(--fs-caption); white-space: nowrap; }
.inbox-unread { font-size: var(--fs-caption); font-weight: 700; color: var(--accent-deep); }
[data-theme="dark"] .inbox-unread { color: var(--accent-2); }
.inbox-row.is-unread .inbox-name { font-weight: 700; }
.inbox-row.is-unread .inbox-listing { color: var(--text); font-weight: 600; }
.inbox-row.is-unread { box-shadow: inset 3px 0 0 var(--accent); padding-left: 0.75rem; }

/* ---------- Messages: thread ---------- */
.thread-page { max-width: 760px; }
.thread-head {
    display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1.5rem;
    padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border);
}
.thread-who { min-width: 0; }
.thread-who h1 { margin: 0 0 0.25rem; font-size: var(--fs-h3); }
.thread-listing { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; }
.thread-listing a { color: var(--text-2); font-size: var(--fs-body); }
.thread-actions { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.thread-action { padding: 0; border: 0; background: none; cursor: pointer; font-size: var(--fs-small); color: var(--text-2); font-weight: 500; min-height: 32px; }
.thread-action:hover { color: var(--text); text-decoration: underline; }
.thread-action--danger, .thread-action--danger:hover { color: var(--danger); }
.thread-note {
    display: flex; align-items: flex-start; gap: 0.5rem;
    margin: 0 0 1.5rem; padding: 0.625rem 0.875rem;
    background: var(--surface-hi); border-radius: var(--radius-md);
    color: var(--text-2); font-size: var(--fs-small); max-width: none;
}
.thread-note svg { flex: 0 0 auto; margin-top: 0.15em; }
.msg-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.msg { max-width: min(80%, 560px); display: flex; flex-direction: column; gap: 0.25rem; }
.msg--mine { align-self: flex-end; align-items: flex-end; }
.msg--theirs { align-self: flex-start; align-items: flex-start; }
.msg-meta { margin: 0; display: flex; gap: 0.5rem; align-items: baseline; color: var(--text-2); font-size: var(--fs-caption); }
.msg-sender { font-weight: 600; color: var(--text); }
.msg-bubble {
    padding: 0.625rem 0.875rem; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45;
    border-radius: 14px 14px 14px 4px; background: var(--surface-hi); color: var(--text);
}
.msg--mine .msg-bubble { border-radius: 14px 14px 4px 14px; background: var(--accent-soft); color: var(--text); border: 1px solid var(--accent); }
.msg-report { font-size: var(--fs-caption); color: var(--text-2); }
.msg-att { display: block; margin-top: 0.125rem; }
.msg-att img { display: block; max-width: min(280px, 100%); max-height: 280px; border-radius: var(--radius-md); }
.msg-att--pending {
    width: 160px; padding: 1.25rem 0.5rem; text-align: center;
    border: 1px dashed var(--field-border); border-radius: var(--radius-md);
    background: var(--surface-hi); color: var(--text-2); font-size: var(--fs-small);
}
.msg-att--missing { color: var(--text-2); font-size: var(--fs-small); }
.report-quote {
    margin: 0 0 1.5rem; padding: 0.875rem 1rem;
    border-left: 4px solid var(--field-border); background: var(--surface-hi); border-radius: var(--radius-md);
    white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-small);
}

/* Composer pinned to the end of the thread */
.composer {
    position: sticky; bottom: 0; z-index: 5;
    margin: 0; padding: 0.875rem 0 1rem;
    background: var(--bg); border-top: 1px solid var(--border);
}
html.compact-chrome .composer { bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)); }
.composer textarea { width: 100%; min-height: 5.5rem; padding: 0.625rem 0.75rem; resize: vertical; }
.composer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 0.625rem; }
.composer-attach { cursor: pointer; gap: 0.375rem; }
.composer-attach:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.composer-hint { flex: 1 1 200px; color: var(--text-2); font-size: var(--fs-caption); }
.composer-bar .btn:not(.composer-attach) { margin-left: auto; }
.attach-staging { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.attach-staging:empty { display: none; }
.attach-tile {
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 0.375rem 0.625rem; border-radius: var(--radius-md);
    background: var(--surface-hi); color: var(--text-2); font-size: var(--fs-caption);
}
.attach-tile.is-ready { background: var(--accent-soft); color: var(--accent-deep); }
[data-theme="dark"] .attach-tile.is-ready { color: var(--accent-2); }
.attach-tile.is-error { background: var(--red-soft); color: var(--danger); }
@media (max-width: 599.98px) {
    .msg { max-width: 90%; }
    .composer-bar .btn:not(.composer-attach) { width: 100%; margin-left: 0; }
}
@media (pointer: coarse) {
    .thread-action, .watch-tile-remove .btn-link, .msg-report { min-height: var(--tap); display: inline-flex; align-items: center; }
}

/* Me page level note (coordinator-added copy; keep the sentence exact) */
.me-level-note { margin: -0.75rem 0 1.25rem; font-size: var(--fs-small); max-width: var(--measure); }