/* E4-17/E4-18: comentários e curtida (usa só tokens do design system). */
.ix-comments { margin-top: 24px; color: var(--foreground); }
.ix-title { font-size: var(--text-lg); font-weight: 600; margin: 0 0 12px; }
.ix-invite { padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--muted); }
.ix-invite p { margin: 0 0 10px; color: var(--muted-foreground); }
.ix-form textarea, .ix-reply-form textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--input); border-radius: 6px; background: var(--background); color: var(--foreground); font: inherit; resize: vertical; }
.ix-form textarea:focus-visible, .ix-reply-form textarea:focus-visible, .ix-btn:focus-visible, .ix-like-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.ix-form-row { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.ix-counter { font-size: var(--text-xs); color: var(--muted-foreground); }
.ix-hp { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.ix-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ix-error { color: var(--destructive); font-size: var(--text-sm); margin: 6px 0 0; }
.ix-status { color: var(--muted-foreground); }
.ix-list, .ix-replies { list-style: none; margin: 0; padding: 0; }
.ix-item { padding: 12px 0; border-bottom: 1px solid var(--border); }
.ix-replies { margin-left: 24px; }
.ix-reply { border-bottom: 0; padding: 8px 0 0; }
.ix-head { display: flex; gap: 8px; align-items: baseline; font-size: var(--text-sm); }
.ix-time { color: var(--muted-foreground); font-size: var(--text-xs); }
.ix-pin { font-size: var(--text-xs); color: var(--brand-text); }
.ix-body { margin: 4px 0; word-break: break-word; }
.ix-body.is-removed { color: var(--muted-foreground); font-style: italic; }
.ix-body a { color: var(--brand-text); text-decoration: underline; }
.ix-bar { display: flex; gap: 12px; flex-wrap: wrap; }
.ix-btn { background: none; border: 0; padding: 4px 0; color: var(--muted-foreground); font-size: var(--text-sm); cursor: pointer; min-height: 24px; }
.ix-btn:hover, .ix-btn.is-liked { color: var(--foreground); }
.ix-more { margin-top: 12px; }
.ix-like-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--secondary); color: var(--secondary-foreground); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.ix-like-btn.is-liked { background: var(--brand-subtle); color: var(--brand-text); }
.ix-like-btn:disabled { cursor: not-allowed; opacity: .7; }
@media (max-width: 480px) { .ix-replies { margin-left: 12px; } }