/* public/css/blog-comments.css — article page layout with the comments column on the right
   (public/js/blog-comments.js, API /api/blog/.../comments). Loaded only on /blog/<slug>, after blog.css.
   Wide screens: article | sticky comments panel with its own scroll. Below 1200px: comments under the article. */

.a-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(360px, 27vw, 580px); gap: clamp(32px, 3.4vw, 72px); align-items: start; margin-inline: auto; }
.a-main { min-width: 0; }
.a-main .a-cover { max-width: 100%; }
.a-comments { scroll-margin-top: 96px; position: sticky; top: 98px; margin-top: 56px; margin-bottom: 40px; height: calc(100vh - 118px); min-height: 460px; }

.a-to-comments { display: none; align-items: center; gap: 7px; margin-left: auto; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--lp-border); color: var(--lp-blue-deep); font-weight: 800; font-size: 13px; text-decoration: none; background: var(--lp-white); }
.a-to-comments b:empty { display: none; }
.a-to-comments b { background: var(--lp-orange); color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 12px; }

/* large screens: the article column grows with the screen (text stays a readable width, a bit larger),
   the cover uses the whole column, comments get a wider panel */
@media (min-width: 1600px) {
  .a-head, .a-body, .a-footer, .a-extra, .a-media { max-width: 940px; }
  .a-body { font-size: 19px; }
}
@media (min-width: 2200px) {
  .a-head, .a-body, .a-footer, .a-extra, .a-media { max-width: 1060px; }
  .a-body { font-size: 20px; }
}

/* ---------- panel */
.bc { --bc-line: #dceaf3; height: 100%; display: flex; flex-direction: column; background: var(--lp-white); border: 1px solid var(--lp-border); border-radius: 22px; box-shadow: 0 18px 50px rgba(7, 59, 102, .08); overflow: hidden; font-family: 'Manrope', 'Segoe UI', sans-serif; color: var(--lp-ink); }
.bc-head { display: flex; align-items: center; gap: 10px; padding: 18px 20px 12px; border-bottom: 1px solid var(--bc-line); flex-wrap: wrap; }
.bc-head h2 { margin: 0; font-family: 'Sora', 'Segoe UI', sans-serif; font-size: 19px; display: flex; align-items: center; gap: 9px; color: var(--lp-ink); }
.bc-head h2 i { color: var(--lp-blue); }
.bc-total { min-width: 26px; height: 24px; padding: 0 8px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--lp-blue-pale); color: var(--lp-blue-deep); font-size: 13px; font-weight: 800; }
.bc-sort { margin-left: auto; display: flex; gap: 2px; padding: 3px; border-radius: 11px; background: #f1f6fa; }
.bc-sort button { border: 0; background: transparent; padding: 5px 10px; border-radius: 8px; font: 800 12px 'Manrope', 'Segoe UI', sans-serif; color: var(--lp-ink-soft); cursor: pointer; }
.bc-sort button.on { background: var(--lp-white); color: var(--lp-blue-deep); box-shadow: 0 1px 4px rgba(7, 59, 102, .12); }
.bc-loading { padding: 40px; text-align: center; color: var(--lp-blue); font-size: 22px; }
.bc-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c7dbe9 transparent; }
.bc-list { padding: 6px 18px 26px; }
.bc-empty { text-align: center; color: var(--lp-ink-soft); padding: 34px 18px; line-height: 1.6; }
.bc-empty i { display: block; font-size: 30px; color: var(--lp-blue); opacity: .5; margin-bottom: 10px; }
.bc-new { position: sticky; top: 8px; z-index: 2; display: block; margin: 8px auto 0; border: 0; border-radius: 999px; padding: 7px 14px; background: var(--lp-blue); color: #fff; font: 800 12px 'Manrope', 'Segoe UI', sans-serif; cursor: pointer; box-shadow: 0 6px 18px rgba(15, 114, 180, .35); }
.bc-new[hidden] { display: none; }

/* ---------- composer */
.bc-form { padding: 14px 18px 16px; border-bottom: 1px solid var(--bc-line); background: #fbfdfe; }
.bc-form.is-reply { margin: 10px 0 4px; padding: 12px; border: 1px solid var(--bc-line); border-radius: 14px; background: #f7fbfe; }
.bc-form-row { display: flex; gap: 10px; align-items: flex-start; }
.bc-form-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.bc-input, .bc-text { width: 100%; border: 1px solid var(--lp-border); border-radius: 12px; background: #fff; padding: 9px 12px; font: 500 14px/1.5 'Manrope', 'Segoe UI', sans-serif; color: var(--lp-ink); outline: none; transition: border-color .15s, box-shadow .15s; }
.bc-input:focus, .bc-text:focus { border-color: var(--lp-blue); box-shadow: 0 0 0 3px rgba(15, 114, 180, .12); }
.bc-text { resize: none; min-height: 44px; max-height: 260px; overflow-y: auto; }
.bc-form.is-collapsed .bc-input, .bc-form.is-collapsed .bc-form-foot { display: none; }
.bc-hp { position: absolute !important; left: -5000px !important; width: 1px; height: 1px; opacity: 0; }
.bc-form-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bc-shield { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--lp-ink-soft); }
.bc-shield i { color: #9fb3c4; }
.bc-shield.ok i { color: #1e8e3e; }
.bc-count { margin-left: auto; font-size: 11.5px; color: var(--lp-ink-soft); font-variant-numeric: tabular-nums; }
.bc-count.over { color: #c62828; font-weight: 800; }
.bc-btn { border: 1px solid transparent; border-radius: 11px; padding: 8px 14px; font: 800 13px 'Manrope', 'Segoe UI', sans-serif; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: background .15s, opacity .15s; }
.bc-btn.primary { background: var(--lp-blue); color: #fff; }
.bc-btn.primary:hover { background: var(--lp-blue-deep); }
.bc-btn.primary:disabled { opacity: .5; cursor: not-allowed; }
.bc-btn.ghost { background: transparent; color: var(--lp-ink-soft); }
.bc-btn.ghost:hover { background: #eef4f9; }
.bc-err { width: 100%; font-size: 12.5px; color: #c62828; font-weight: 700; }
.bc-err:empty { display: none; }
.bc-replying { font-size: 12.5px; color: var(--lp-ink-soft); display: flex; align-items: center; gap: 6px; }
.bc-replying b { color: var(--lp-blue-deep); }
.bc-rules { font-size: 11.5px; color: var(--lp-ink-soft); line-height: 1.5; }

/* ---------- avatar */
.bc-ava { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 800 14px 'Sora', 'Segoe UI', sans-serif; text-transform: uppercase; user-select: none; }
.bc-ava.team { background: linear-gradient(135deg, var(--lp-blue), var(--lp-blue-deep)) !important; font-size: 13px; box-shadow: 0 0 0 2px var(--lp-orange); }
.bc-ava.me { background: var(--lp-blue-pale) !important; color: var(--lp-blue); }
.bc-ava.gone { background: #e3eaf0 !important; color: #9fb3c4; }

/* ---------- comment */
.bc-item { position: relative; padding-top: 14px; }
.bc-item.flash > .bc-row .bc-bubble { animation: bcFlash 2.4s ease; }
@keyframes bcFlash { 0%, 30% { background: #fff4e0; } 100% { background: transparent; } }
.bc-row { display: flex; gap: 10px; align-items: flex-start; }
.bc-main { flex: 1; min-width: 0; }
.bc-bubble { border-radius: 12px; margin: -4px -8px 0; padding: 4px 8px; }
.bc-meta { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--lp-ink-soft); }
.bc-name { font-weight: 800; font-size: 13.5px; color: var(--lp-ink); overflow-wrap: anywhere; }
.bc-badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; }
.bc-badge.team { background: var(--lp-blue); color: #fff; }
.bc-badge.you { background: var(--lp-orange-pale, #fff1ea); color: var(--lp-orange-dark, #e85420); }
.bc-time { color: #7b93a8; text-decoration: none; }
.bc-time:hover { text-decoration: underline; }
.bc-body { margin-top: 3px; font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; color: #1f3347; }
.bc-body a { color: var(--lp-blue); }
.bc-body .bc-at { color: var(--lp-blue-deep); font-weight: 700; }
.bc-body.is-long { max-height: 9.6em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.bc-more-text { border: 0; background: none; padding: 0; color: var(--lp-blue); font: 800 12.5px 'Manrope', 'Segoe UI', sans-serif; cursor: pointer; margin-top: 2px; }
.bc-gone { font-style: italic; color: #8aa0b3; font-size: 13.5px; padding: 6px 0; }
.bc-actions { display: flex; align-items: center; gap: 2px; margin: 4px 0 0 -8px; flex-wrap: wrap; }
.bc-act { border: 0; background: transparent; color: #6b8297; padding: 5px 8px; border-radius: 8px; font: 700 12.5px 'Manrope', 'Segoe UI', sans-serif; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.bc-act:hover { background: #eef4f9; color: var(--lp-blue-deep); }
.bc-act.liked { color: #e0245e; }
.bc-act.liked i { animation: bcPop .35s ease; }
@keyframes bcPop { 50% { transform: scale(1.35); } }
.bc-menu-wrap { position: relative; margin-left: auto; }
.bc-menu { position: absolute; right: 0; top: 100%; z-index: 5; min-width: 170px; background: #fff; border: 1px solid var(--lp-border); border-radius: 12px; box-shadow: 0 14px 34px rgba(7, 59, 102, .16); padding: 5px; }
.bc-menu[hidden] { display: none; }
.bc-menu button { width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; font: 700 13px 'Manrope', 'Segoe UI', sans-serif; color: var(--lp-ink); cursor: pointer; display: flex; gap: 9px; align-items: center; }
.bc-menu button:hover { background: #f1f6fa; }
.bc-menu button.danger { color: #c62828; }
.bc-menu button i { width: 16px; text-align: center; color: #7b93a8; }
.bc-menu button.danger i { color: #c62828; }

/* thread: replies indented with a line you can click to collapse */
.bc-children { position: relative; margin-left: 16px; padding-left: 14px; }
.bc-children > .bc-thread-line { position: absolute; left: 0; top: 2px; bottom: 6px; width: 14px; border: 0; background: none; cursor: pointer; padding: 0; }
.bc-children > .bc-thread-line::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: var(--bc-line); transition: background .15s; }
.bc-children > .bc-thread-line:hover::before { background: var(--lp-blue); }
.bc-children .bc-ava { flex-basis: 28px; width: 28px; height: 28px; font-size: 12px; }
.bc-toggle { border: 0; background: none; margin: 6px 0 0 44px; padding: 3px 0; color: var(--lp-blue); font: 800 12.5px 'Manrope', 'Segoe UI', sans-serif; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.bc-children .bc-toggle { margin-left: 38px; }
.bc-item.collapsed > .bc-children { display: none; }

/* ---------- mobile floating button + toast */
.bc-fab { display: none; position: fixed; right: 16px; bottom: 18px; z-index: 900; border: 0; border-radius: 999px; padding: 12px 16px; background: var(--lp-blue); color: #fff; font: 800 14px 'Manrope', 'Segoe UI', sans-serif; box-shadow: 0 10px 26px rgba(15, 114, 180, .4); cursor: pointer; align-items: center; gap: 8px; }
.bc-fab.show { display: inline-flex; }
.bc-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2000; background: #102a43; color: #fff; padding: 10px 16px; border-radius: 12px; font: 700 13px 'Manrope', 'Segoe UI', sans-serif; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }

@media (max-width: 1199px) {
  .a-layout { display: block; max-width: none; }
  .a-comments { position: static; height: auto; min-height: 0; max-width: 800px; margin: 0 auto 80px; }
  .a-comments .bc-scroll { overflow: visible; }
  .a-to-comments { display: inline-flex; }
  .a-footer { padding-bottom: 40px; }
}
@media (max-width: 680px) {
  .bc { border-radius: 18px; }
  .bc-head { padding: 16px 14px 10px; }
  .bc-form { padding: 12px 14px; }
  .bc-list { padding: 4px 12px 20px; }
  .bc-children { margin-left: 8px; padding-left: 10px; }
  .bc-children > .bc-thread-line { width: 10px; }
  .bc-toggle { margin-left: 40px; }
  .bc-sort { margin-left: 0; width: 100%; }
  .bc-sort button { flex: 1; }
}