/* Tokens, reset, shell, topbar, rail e chrome do painel lateral vêm do shell.css. */

.main__inner{ max-width:860px; margin:0 auto; padding:var(--sp-xl) var(--sp-xl) 100px; }
@media (max-width:560px){ .main__inner{ padding:var(--sp-md) var(--sp-sm) 80px; } }

.page-head{ margin-bottom:var(--sp-lg); }
.page-head__title{ font-family:var(--f-display); font-weight:800; font-size:24px; letter-spacing:-.3px; color:var(--ink); display:flex; align-items:center; gap:10px; }
.page-head__desc{ color:var(--text-soft); font-size:13.5px; margin-top:4px; }

/* ---------- Composer ---------- */
.composer{ background:var(--cream-0); border:1px solid var(--hairline); border-radius:var(--r-lg); box-shadow:var(--shadow-card); margin-bottom:var(--sp-lg); overflow:hidden; }
.composer__bar{ display:flex; align-items:center; gap:12px; padding:12px 14px; cursor:pointer; }
.composer__avatar{ width:38px;height:38px;min-width:38px;min-height:38px;border-radius:50%; object-fit:cover; background:var(--secondary); flex-shrink:0; display:grid; place-items:center; color:#fff; font-weight:800; font-size:13px; }
.composer__fake{ flex:1; background:var(--cream-2); border:1px solid var(--hairline); border-radius:var(--r-pill); padding:10px 16px; color:var(--text-faint-2); font-size:13.5px; }
.composer__form{ display:none; padding:0 14px 14px; }
.composer.is-open .composer__form{ display:block; }
.composer.is-open .composer__bar{ cursor:default; padding-bottom:6px; }
.composer__title{ width:100%; background:transparent; border:none; outline:none; font-family:var(--f-display); font-weight:700; font-size:16px; color:var(--ink); padding:6px 0; }
.composer__title::placeholder{ color:var(--text-faint-2); }
.composer__text{ width:100%; min-height:70px; resize:vertical; background:var(--cream-1); border:1px solid var(--hairline); border-radius:var(--r-md); padding:10px 12px; font:inherit; font-size:14px; color:var(--ink); outline:none; }
.composer__text:focus{ border-color:var(--secondary); }
.composer__preview{ margin-top:12px; position:relative; display:none; }
.composer__preview.is-shown{ display:block; }
.composer__preview img{ max-width:100%; max-height:320px; border-radius:var(--r-md); display:block; border:1px solid var(--hairline); }
.composer__preview-x{ position:absolute; top:8px; right:8px; width:30px;height:30px; border-radius:50%; background:rgba(20,17,12,.72); color:#fff; display:grid; place-items:center; cursor:pointer; }
.composer__row{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.composer__tool{ display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border-radius:var(--r-sm); background:var(--cream-2); border:1px solid var(--hairline); color:var(--text-soft); font-size:13px; font-weight:600; cursor:pointer; }
.composer__tool:hover{ background:var(--amber-soft); color:var(--ink); }
.composer__tool svg{ width:17px;height:17px; }
.composer__spacer{ flex:1; }
.composer__cancel{ padding:9px 16px; border-radius:var(--r-sm); color:var(--text-soft); font-size:13.5px; font-weight:600; cursor:pointer; }
.composer__cancel:hover{ background:var(--cream-2); }
.composer__submit{ padding:9px 20px; border-radius:var(--r-sm); background:var(--secondary); color:var(--on-secondary); font-size:13.5px; font-weight:700; cursor:pointer; border:none; }
.composer__submit:disabled{ opacity:.5; cursor:not-allowed; }
.composer__hint{ font-size:12px; color:var(--text-faint-2); margin-top:8px; }
.composer__locked{ text-align:center; color:var(--text-soft); font-size:13.5px; padding:2px 0; }
.composer__locked b{ color:var(--secondary); cursor:pointer; }

/* ---------- Post card ---------- */
.feed-list{ display:flex; flex-direction:column; gap:16px; container-type: inline-size; }
.post{ background:var(--cream-0); border:1px solid var(--hairline); border-radius:var(--r-lg); box-shadow:var(--shadow-card); display:flex; overflow:hidden; }
.post__vote{ width:44px; flex-shrink:0; background:var(--cream-2); display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 0; }
.vote-btn{ width:30px;height:30px; display:grid; place-items:center; border-radius:var(--r-xs); color:var(--text-faint-2); cursor:pointer; transition:color .12s, background .12s, transform .1s; }
.vote-btn svg{ width:20px;height:20px; }
.vote-btn:hover{ background:var(--cream-3); }
.vote-btn:active{ transform:scale(.85); }
.vote-btn.up.is-on{ color:var(--secondary); }
.vote-btn.down.is-on{ color:#3b6fd4; }
.post__score{ font-size:13px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; padding:1px 0; }
.post__score.pos{ color:var(--secondary); }
.post__score.neg{ color:#3b6fd4; }
.post__main{ flex:1; min-width:0; display:flex; flex-direction:column; padding-top:10px; }
.post__avatar{ width:30px;height:30px;min-width:30px;min-height:30px;border-radius:50%; object-fit:cover; flex-shrink:0; display:grid; place-items:center; color:#fff; font-size:11px; font-weight:800; }
.post__byline{ min-width:0; display:flex; align-items:center; gap:7px; font-size:12.5px; margin-bottom:4px; }
.post__byline .post__more{ margin-left:auto; }
.post__user{ font-weight:700; color:var(--ink); white-space:nowrap; min-width: 0; overflow: hidden; text-overflow:ellipsis; max-width:180px; }
.post__plat{ font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; padding:2px 7px; border-radius:var(--r-full); }
.post__dot{ color:var(--text-faint-2); }
.post__time{ color:var(--text-faint-2); }
.post__src{ color:var(--text-faint-2); }
.post__more{ margin-left:auto; position:relative; flex-shrink:0; }
.post__more-btn{ width:30px;height:30px;border-radius:var(--r-xs); display:grid; place-items:center; color:var(--text-faint-2); cursor:pointer; }
.post__more-btn:hover{ background:var(--cream-2); color:var(--ink); }
.menu{ position:absolute; top:34px; right:0; background:var(--cream-0); border:1px solid var(--hairline-2); border-radius:var(--r-md); box-shadow:0 8px 30px rgba(70,45,10,.16); min-width:170px; z-index:30; overflow:hidden; display:none; }
.menu.is-open{ display:block; }
.menu button{ width:100%; text-align:left; display:flex; align-items:center; gap:10px; padding:11px 14px; font-size:13px; font-weight:600; color:var(--ink); cursor:pointer; background:none; border:none; }
.menu button svg{ width:16px;height:16px; color:var(--text-soft); }
.menu button:hover{ background:var(--cream-2); }
.menu button.danger{ color:var(--accent); }
.menu button.danger svg{ color:var(--accent); }

.post__title{ font-family:var(--f-display); font-weight:700; font-size:16.5px; line-height:1.3; color:var(--ink); padding:0 14px 4px; }

/* 4chan-style: miniatura à esquerda, texto à direita. Clique amplia no lugar. */
.post__content{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start; padding:2px 14px 10px; }
.post__body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.post__thumb{ flex-shrink:0; display:block; line-height:0; border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--hairline); background:#14110c; cursor:zoom-in; transition:flex-basis .1s; }
.post__thumb img{ display:block; max-width:190px; max-height:210px; width:auto; height:auto; object-fit:cover; }
.post__thumb:hover{ border-color:var(--secondary); }
.post__thumb.is-expanded{ flex:1 0 100%; cursor:zoom-out; }
.post__thumb.is-expanded img{ max-width:100%; max-height:85vh; object-fit:contain; }
@media (max-width:560px){ .post__thumb img{ max-width:120px; max-height:150px; } }
.post__text{ flex:1; min-width:0; font-size:14px; color:var(--ink); line-height:1.5; word-break:break-word; white-space:pre-wrap; }
.greentext .quote{ color:#789922; }
.greentext .ref{ color:#3b6fd4; font-weight:700; }

.post__actions{ display:flex; align-items:center; gap:6px; padding:6px 0 2px; }
.post__act{ display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border-radius:var(--r-sm); color:var(--text-soft); font-size:12.5px; font-weight:600; cursor:pointer; }
.post__act svg{ width:17px;height:17px; }
.post__act:hover{ background:var(--cream-2); color:var(--ink); }

/* ---------- Comentários (thread) ---------- */
.post__comments{ display:none; border-top:1px solid var(--hairline); background:var(--cream-1); padding:12px 14px 14px; }
.post__comments.is-open{ display:block; }
.cmt-form{ display:flex; gap:8px; margin-bottom:14px; }
.cmt-form textarea{ flex:1; min-height:38px; max-height:160px; resize:vertical; background:var(--cream-0); border:1px solid var(--hairline); border-radius:var(--r-md); padding:9px 12px; font:inherit; font-size:13.5px; color:var(--ink); outline:none; }
.cmt-form textarea:focus{ border-color:var(--secondary); }
.cmt-form button{ align-self:flex-end; padding:9px 16px; border-radius:var(--r-sm); background:var(--secondary); color:var(--on-secondary); font-size:13px; font-weight:700; border:none; cursor:pointer; flex-shrink:0; }
.cmt-form button:disabled{ opacity:.5; cursor:not-allowed; }
.cmt-locked{ font-size:13px; color:var(--text-soft); margin-bottom:12px; }
.cmt-locked b{ color:var(--secondary); cursor:pointer; }

.cmt{ position:relative; padding:2px 0 2px 0; }
.cmt__wrap{ border-left:2px solid var(--hairline-2); padding-left:12px; margin-left:2px; }
.cmt__head{ display:flex; align-items:center; gap:7px; font-size:12px; margin-bottom:2px; flex-wrap:wrap; }
.cmt__id{ color:var(--text-faint-2); font-variant-numeric:tabular-nums; font-weight:700; }
.cmt__author{ font-weight:700; color:var(--secondary); }
.cmt__author.op{ color:var(--accent); }
.cmt__plat{ font-size:8.5px; font-weight:800; text-transform:uppercase; padding:1px 6px; border-radius:var(--r-full); }
.cmt__time{ color:var(--text-faint-2); }
.cmt__ref{ color:#3b6fd4; font-weight:700; cursor:pointer; }
.cmt__body{ font-size:13.5px; color:var(--ink); line-height:1.5; word-break:break-word; white-space:pre-wrap; padding-bottom:5px; }
.cmt__body .quote{ color:#789922; }
.cmt__actions{ display:flex; align-items:center; gap:12px; font-size:11.5px; margin-bottom:6px; }
.cmt__actions span{ color:var(--text-faint-2); font-weight:700; cursor:pointer; }
.cmt__actions span:hover{ color:var(--ink); }
.cmt__actions span.del:hover{ color:var(--accent); }
.cmt__reply{ display:none; margin:4px 0 10px; }
.cmt__reply.is-open{ display:flex; gap:8px; }
.cmt__reply textarea{ flex:1; min-height:34px; resize:vertical; background:var(--cream-0); border:1px solid var(--hairline); border-radius:var(--r-sm); padding:7px 10px; font:inherit; font-size:13px; color:var(--ink); outline:none; }
.cmt__reply button{ align-self:flex-end; padding:7px 13px; border-radius:var(--r-sm); background:var(--secondary); color:var(--on-secondary); font-size:12.5px; font-weight:700; border:none; cursor:pointer; }
.cmt__empty{ font-size:13px; color:var(--text-faint-2); padding:4px 0; }
.cmt__deleted{ font-style:italic; color:var(--text-faint-2); }
.cmt__thumb{ display:inline-block; margin:4px 0 6px; line-height:0; border-radius:var(--r-xs); overflow:hidden; border:1px solid var(--hairline); cursor:zoom-in; }
.cmt__thumb img{ display:block; max-width:150px; max-height:150px; }
.cmt__thumb.is-expanded{ cursor:zoom-out; }
.cmt__thumb.is-expanded img{ max-width:100%; max-height:80vh; }

/* ---------- Prévia de respostas (inline, estilo 4chan) ---------- */
.post__replies{ padding:8px 0 2px; display:flex; flex-direction:column; gap:8px; }
.post__replies:empty{ display:none; }
.post__replies.is-hidden{ display:none; }
.reply{ border-left:2px solid var(--hairline-2); padding:3px 0 3px 10px; }
.reply__head{ display:flex; align-items:center; gap:6px; font-size:11.5px; margin-bottom:2px; flex-wrap:wrap; }
.reply__author{ font-weight:700; color:var(--secondary); }
.reply__author.op{ color:var(--accent); }
.reply__time{ color:var(--text-faint-2); }
.reply__body{ font-size:13px; color:var(--ink); line-height:1.45; white-space:pre-wrap; word-break:break-word; }
.reply__thumb{ display:inline-block; margin-top:5px; line-height:0; border-radius:var(--r-xs); overflow:hidden; border:1px solid var(--hairline); cursor:zoom-in; }
.reply__thumb img{ display:block; max-width:120px; max-height:120px; }
.reply__thumb.is-expanded{ cursor:zoom-out; }
.reply__thumb.is-expanded img{ max-width:100%; max-height:80vh; }
.post__morereplies{ align-self:flex-start; font-size:12.5px; font-weight:700; color:var(--secondary); cursor:pointer; padding:2px 0; }
.post__morereplies:hover{ text-decoration:underline; }

/* ---------- Botão Responder + formulário sob o post ---------- */
.post__reply-btn{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:var(--r-pill); background:var(--cream-2); border:1px solid var(--hairline); color:var(--text-soft); font-size:11.5px; font-weight:700; cursor:pointer; line-height:1; flex-shrink:0; }
.post__reply-btn svg{ width:13px;height:13px; }
.post__reply-btn:hover{ background:var(--amber-soft); color:var(--ink); }
.post__replyform{ display:none; gap:8px; padding:8px 0 4px; }
.post__replyform.is-open{ display:flex; }
.post__replyform textarea{ flex:1; min-height:38px; max-height:160px; resize:vertical; background:var(--cream-0); border:1px solid var(--hairline); border-radius:var(--r-md); padding:9px 12px; font:inherit; font-size:13.5px; color:var(--ink); outline:none; }
.post__replyform textarea:focus{ border-color:var(--secondary); }
.post__replyform button{ align-self:flex-end; padding:9px 16px; border-radius:var(--r-sm); background:var(--secondary); color:var(--on-secondary); font-size:13px; font-weight:700; border:none; cursor:pointer; flex-shrink:0; }
.post__replyform button:disabled{ opacity:.5; cursor:not-allowed; }

/* ---------- Dica de formatação no composer ---------- */
.composer__fmt{ font-size:12px; color:var(--text-faint-2); margin-top:8px; }
.composer__fmt .quote{ color:#789922; font-weight:600; }

/* ---------- Estados ---------- */
.state-msg{ padding:44px 0; text-align:center; color:var(--text-faint-2); font-size:14px; }
.spin{ display:inline-block; width:16px;height:16px; border:2px solid var(--cream-4); border-top-color:var(--secondary); border-radius:50%; animation:sp .7s linear infinite; vertical-align:-3px; margin-right:8px; }
@keyframes sp{ to{ transform:rotate(360deg); } }
.load-more{ display:block; width:100%; margin-top:18px; padding:13px; border-radius:var(--r-md); background:var(--cream-0); border:1px solid var(--hairline); color:var(--text-soft); font-size:13.5px; font-weight:700; cursor:pointer; box-shadow:var(--shadow-card); }
.load-more:hover{ background:var(--amber-soft); color:var(--ink); }
.load-more:disabled{ opacity:.5; cursor:default; }

/* ---------- Painel Mod ---------- */
.report-card{ background:var(--cream-0); border:1px solid var(--hairline); border-radius:var(--r-lg); box-shadow:var(--shadow-card); padding:14px; margin-bottom:14px; }
.report-card__meta{ font-size:12px; color:var(--text-faint-2); margin-bottom:8px; display:flex; gap:8px; flex-wrap:wrap; }
.report-card__reason{ background:var(--accent-soft); color:#7a1414; border-radius:var(--r-sm); padding:8px 11px; font-size:13px; margin-bottom:10px; }
.report-card__preview{ display:flex; gap:12px; align-items:flex-start; background:var(--cream-1); border:1px solid var(--hairline); border-radius:var(--r-md); padding:10px; margin-bottom:12px; }
.report-card__preview img{ width:72px;height:72px; object-fit:cover; border-radius:var(--r-sm); flex-shrink:0; }
.report-card__preview-body{ min-width:0; font-size:13px; color:var(--ink); }
.report-card__preview-user{ font-weight:700; margin-bottom:3px; }
.report-card__preview-text{ color:var(--text-soft); word-break:break-word; }
.report-card__actions{ display:flex; gap:10px; }
.report-card__btn{ padding:9px 16px; border-radius:var(--r-sm); font-size:13px; font-weight:700; cursor:pointer; border:none; }
.report-card__btn.del{ background:var(--accent); color:#fff; }
.report-card__btn.keep{ background:var(--cream-2); color:var(--text-soft); }
.report-card__gone{ font-size:11px; color:var(--text-faint-2); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }

/* ---------- Filtros (chlist) count badge ---------- */
.ch-item .kz-new-dot{ width:7px;height:7px;border-radius:50%;background:var(--accent);margin-left:auto;display:none; }

/* ---------- Modal (denúncia) ---------- */
.kz-modal{ position:fixed; inset:0; background:rgba(20,17,12,.5); z-index:200; display:none; align-items:center; justify-content:center; padding:20px; }
.kz-modal.is-open{ display:flex; }
.kz-modal__card{ background:var(--cream-0); border-radius:var(--r-lg); box-shadow:0 20px 60px rgba(0,0,0,.3); width:100%; max-width:400px; padding:22px; }
.kz-modal__title{ font-family:var(--f-display); font-weight:800; font-size:18px; color:var(--ink); margin-bottom:6px; }
.kz-modal__desc{ font-size:13px; color:var(--text-soft); margin-bottom:14px; }
.kz-modal__card textarea{ width:100%; min-height:80px; resize:vertical; background:var(--cream-1); border:1px solid var(--hairline); border-radius:var(--r-md); padding:10px 12px; font:inherit; font-size:13.5px; color:var(--ink); outline:none; margin-bottom:14px; }
.kz-modal__row{ display:flex; justify-content:flex-end; gap:10px; }
.kz-modal__btn{ padding:9px 18px; border-radius:var(--r-sm); font-size:13.5px; font-weight:700; cursor:pointer; border:none; }
.kz-modal__btn.ghost{ background:var(--cream-2); color:var(--text-soft); }
.kz-modal__btn.go{ background:var(--accent); color:#fff; }

/* ---------- Toast ---------- */
.kz-toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:var(--cream-0); padding:12px 20px; border-radius:var(--r-pill); font-size:13.5px; font-weight:600; box-shadow:0 8px 30px rgba(0,0,0,.25); z-index:300; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; }
.kz-toast.is-shown{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---- TEMA ESCURO: texto do motivo da denúncia legível sobre o fundo escuro ---- */
:root[data-theme="dark"] .report-card__reason{ color:#F0B4AE; }
/* Responsive Feed Adjustments */
@container (max-width: 768px) {
  .post__byline {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 2px 8px;
    align-items: center;
  }
  .post__user { grid-column: 1 / 2; grid-row: 1; }
  .post__more { grid-column: 3 / 4; grid-row: 1; margin-left: auto; }
  .post__dot { display: none; }
  .post__time { grid-column: 1 / 4; grid-row: 2; font-size: 11.5px; margin-bottom: 2px; }
  .post__reply-btn { grid-column: 1 / 4; grid-row: 3; justify-self: flex-start; margin-bottom: 4px; }
}

@container (max-width: 480px) {
  .post__content {
    flex-direction: column;
  }
  .post__thumb {
    width: 100%;
  }
  .post__thumb img {
    max-width: 100%;
    width: 100%;
    max-height: 300px;
    border-radius: var(--r-md);
  }
  .post__body {
    width: 100%;
  }
}