.cmp-scope {
    --cmp-bg: rgb(var(--color-gray-50, 249 250 251));
    --cmp-bg-subtle: rgb(var(--color-gray-100, 244 244 245));
    --cmp-border: rgb(var(--color-gray-200, 228 228 231));
    --cmp-text: rgb(var(--color-gray-800, 39 39 42));
    --cmp-text-muted: rgb(var(--color-gray-600, 82 82 91));
    --cmp-text-faint: rgb(var(--color-gray-400, 161 161 170));
    --cmp-shadow: 0 1px 2px 0 rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.04);
    --cmp-primary: rgb(var(--color-primary-500, 99 102 241));
    --cmp-primary-hover: rgb(var(--color-primary-600, 79 70 229));
    --cmp-danger: rgb(var(--color-danger-500, 239 68 68));
}
.dark .cmp-scope {
    --cmp-bg: rgb(var(--color-gray-800, 39 39 42));
    --cmp-bg-subtle: rgb(var(--color-gray-900, 24 24 27));
    --cmp-border: rgb(var(--color-gray-700, 63 63 70));
    --cmp-text: rgb(var(--color-gray-100, 244 244 245));
    --cmp-text-muted: rgb(var(--color-gray-400, 161 161 170));
    --cmp-text-faint: rgb(var(--color-gray-500, 113 113 122));
    --cmp-shadow: 0 1px 3px 0 rgba(0,0,0,.4);
}

/* ── Layout ── */
.cmp-scope {
    font-size: .875rem;
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 8rem);
    min-height: 0;
    overflow: hidden;
}

/* ── Scrollable list ── */
.cmp-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: .5rem 0 .25rem;
    min-height: 0;
    scroll-behavior: smooth;
}
.cmp-scroll::-webkit-scrollbar { width: 4px; }
.cmp-scroll::-webkit-scrollbar-track { background: transparent; }
.cmp-scroll::-webkit-scrollbar-thumb { background: var(--cmp-border); border-radius: 9999px; }

/* ── Comment cards ── */
.cmp-card {
    background: var(--cmp-bg);
    border: 1px solid var(--cmp-border);
    border-radius: .5rem;
    box-shadow: var(--cmp-shadow);
    margin-bottom: .5rem;
    transition: box-shadow .15s;
}
.cmp-card:hover {
    box-shadow: 0 2px 6px 0 rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.05);
}
.cmp-card--deleted {
    opacity: .65;
    border-style: dashed;
}

/* ── Card header (avatar + meta) ── */
.cmp-head {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .65rem .35rem;
}
.cmp-avatar {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .62rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: .02em;
    text-shadow: 0 1px 1px rgba(0,0,0,.15);
    user-select: none;
}
.cmp-meta-col {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    flex: 1;
    min-width: 0;
}
.cmp-name {
    font-size: .75rem;
    font-weight: 600;
    color: var(--cmp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cmp-date {
    font-size: .65rem;
    color: var(--cmp-text-faint);
    white-space: nowrap;
    cursor: default;
}
.cmp-date::before { content: '·'; margin-right: .35rem; }

/* ── Card body ── */
.cmp-body { padding: 0 .65rem .5rem .65rem; }
.cmp-body-text { font-size: .8rem; line-height: 1.65; color: var(--cmp-text); word-break: break-word; }
.cmp-body-text p { margin: 0 0 .3rem; }
.cmp-body-text p:last-child { margin-bottom: 0; }

/* ── Inline action links ── */
.cmp-acts {
    display: flex;
    align-items: center;
    gap: .15rem;
    margin-top: .3rem;
}
.cmp-act {
    font-size: .68rem;
    font-weight: 500;
    color: var(--cmp-text-faint);
    background: transparent;
    border: none;
    padding: .1rem .25rem;
    cursor: pointer;
    border-radius: .2rem;
    transition: color .12s, background .12s;
    line-height: 1.4;
}
.cmp-act:hover { color: var(--cmp-primary); background: rgba(99 102 241 / .07); }
.cmp-act--primary { color: var(--cmp-primary); }
.cmp-act--primary:hover { background: rgba(99 102 241 / .12); color: var(--cmp-primary-hover); }
.cmp-act--restore { color: #10b981; }
.cmp-act--restore:hover { color: #059669 !important; background: rgba(16 185 129 / .08) !important; }
.cmp-act--danger:hover { color: var(--cmp-danger) !important; background: rgba(239 68 68 / .07) !important; }
.cmp-act-sep { font-size: .6rem; color: var(--cmp-text-faint); opacity: .5; pointer-events: none; }

/* ── Deleted comment text ── */
.cmp-body-text--deleted { text-decoration: line-through; color: var(--cmp-text-faint); }

/* ── Deleted badge in header ── */
.cmp-deleted-badge {
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cmp-danger);
    background: rgba(239 68 68 / .1);
    border: 1px solid rgba(239 68 68 / .2);
    border-radius: .25rem;
    padding: .05rem .3rem;
    line-height: 1.4;
}

/* ── Nested replies ── */
.cmp-replies {
    margin-top: .5rem;
    padding-left: .6rem;
    border-left: 2px solid var(--cmp-border);
}

/* ── Sticky footer (add comment) ── */
.cmp-footer {
    border-top: 1px solid var(--cmp-border);
    padding: .55rem 0 .65rem;
    background: var(--cmp-bg-subtle);
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    z-index: 10;
}
.cmp-reply-banner { display: flex; align-items: center; gap: .35rem; margin-bottom: .35rem; font-size: .7rem; color: var(--cmp-text-muted); }
.cmp-reply-banner svg { width: .65rem; height: .65rem; flex-shrink: 0; }
.cmp-textarea {
    width: 100%;
    min-height: 4rem;
    max-height: 12rem;
    border: 1px solid var(--cmp-border);
    border-radius: .4rem;
    background: var(--cmp-bg);
    color: var(--cmp-text);
    padding: .45rem .6rem;
    font-size: .8rem;
    font-family: inherit;
    resize: none;
    overflow-y: auto;
    transition: border-color .15s;
    display: block;
}
.cmp-textarea:focus { outline: none; border-color: var(--cmp-primary); box-shadow: 0 0 0 2px rgba(99 102 241 / .15); }
.cmp-form-row { display: flex; align-items: center; justify-content: space-between; margin-top: .35rem; gap: .5rem; }
.cmp-char-hint { font-size: .65rem; color: var(--cmp-text-faint); }
.cmp-submit-btn { font-size: .78rem; font-weight: 600; color: #fff; background: var(--cmp-primary); border: none; border-radius: .4rem; padding: .38rem 1rem; cursor: pointer; transition: background .15s; white-space: nowrap; }
.cmp-submit-btn:hover { background: var(--cmp-primary-hover); }
.cmp-submit-btn:disabled { opacity: .5; cursor: default; }
.cmp-error { color: var(--cmp-danger); font-size: .68rem; margin-top: .15rem; }

/* ── Empty state ── */
.cmp-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--cmp-text-faint);
}
.cmp-empty svg { width: 2rem; height: 2rem; margin-bottom: .4rem; }
.cmp-empty-title { font-size: .8rem; font-weight: 600; color: var(--cmp-text-muted); margin: 0 0 .15rem; }
.cmp-empty-sub { font-size: .7rem; color: var(--cmp-text-faint); margin: 0; }

/* ── Counter + Load more ── */
.cmp-meta { display: flex; align-items: center; justify-content: space-between; padding: .1rem 0 .35rem; }
.cmp-counter { font-size: .68rem; color: var(--cmp-text-faint); }
.cmp-load-more { display: flex; justify-content: center; padding: .3rem 0 .1rem; }
.cmp-load-more button { font-size: .7rem; font-weight: 600; color: var(--cmp-text-muted); background: var(--cmp-bg-subtle); border: 1px solid var(--cmp-border); border-radius: .3rem; padding: .22rem .75rem; cursor: pointer; transition: background .15s; }
.cmp-load-more button:hover:not([disabled]) { background: var(--cmp-border); }
.cmp-load-more button[disabled] { opacity: .5; cursor: default; }