/* ==========================================================
   People.com-style Comments — FINAL CSS
   ========================================================== */

/* Tokens + layout variables */
.people-comments{
  --pc-surface: var(--surface, #fff);
  --pc-border:  var(--color-border, #eee);
  --pc-text:    var(--color-text, rgba(0,0,0,.95));
  --pc-hover:   var(--surface-hover, #f5f5f5);
  --pc-brand:   var(--brand, #1bb1e7);
  --pc-muted:   #666;

  /* Composer + replies geometry */
  --pc-avatar-size: 32px;                   /* compact */
  --pc-reply-indent: calc(var(--pc-avatar-size) + .6rem);
  --pc-line-nudge: 0px;                     /* tweak ±1px if needed */
  --pc-line-axis: calc((var(--pc-avatar-size) * 0.5) + var(--pc-line-nudge));
  --pc-reply-line: #cfcfd3;

  /* Textarea autosize limits */
  --pc-ta-min: 40px;     /* initial compact height */
  --pc-ta-max: 220px;    /* cap before scrolling */

  /* Inputs (light) */
  --pc-input-bg: #f7f8f9;
  --pc-input-border: #e5e7eb;
  --pc-focus-ring: rgba(24,179,232,.12);
}
body.dark-mode .people-comments{
  --pc-surface:#111;
  --pc-border:rgba(255,255,255,.14);
  --pc-text:#f5f5f5;
  --pc-hover:rgba(255,255,255,.08);
  --pc-muted:rgba(255,255,255,.65);
  --pc-input-bg:#191b1f;
  --pc-input-border:rgba(255,255,255,.14);
  --pc-focus-ring: rgba(24,179,232,.2);
}

/* Container */
.people-comments{
  margin-top:2rem; border-top:1px solid var(--pc-border); padding-top:1.25rem; color:var(--pc-text);
}

/* Header */
.pc-head{margin-bottom:.75rem;}

/* Bigger, bolder title like People.com */
.pc-title{
  display:flex; align-items:center; gap:.4rem;
  font-size:1.6rem; font-weight:800; letter-spacing:.01em;
  margin:0 0 .25rem;
}

/* Replace the tiny square with a rounded “bubble” badge */
.pc-title::before{
  content:"";
  width:26px; height:20px; flex:0 0 26px;
  display:inline-block;
  margin-right:.35rem;
  background-repeat:no-repeat;
  background-size:contain;
  /* Inline SVG chat bubble (tail at bottom-left) */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='20' viewBox='0 0 26 20' shape-rendering='geometricPrecision'%3E%3Cpath fill='%231bb1e7' d='M4 1h18a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H10.2L6 19.6c-.9.8-2.3.1-2.3-1.1V15H4a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3Z'/%3E%3C/svg%3E");
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.05));
  border-radius:0; /* override old rounded-square style */
}

/* Put the light blue diagonal stripe between title and note */
.pc-note{
  position:relative;
  padding-top:10px;                   /* room for the stripe */
  margin-top:0;
  color:var(--pc-muted);
  font-size:.9rem;
  line-height:1.4;
}
.pc-note::before{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height:6px;
  border-top:1px solid rgba(27,177,231,.55);
  background:
    repeating-linear-gradient(-45deg,
      rgba(27,177,231,.25) 0 6px,
      transparent 6px 12px);
  border-radius:2px;
}

/* Link styling inside the note (Community Guidelines) */
.pc-note a{
  color:inherit;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:2px;
}
.pc-note a:hover{ color:#007fa6; }

/* Composer (compact + inner input shell) */
.pc-composer{
  display:flex; gap:.6rem; align-items:flex-start; margin:1rem 0 1.25rem;
  background:var(--pc-surface); border:1px solid #e6e6e6; border-radius:10px; padding:.6rem;
  position:relative; box-shadow:0 1px 0 rgba(0,0,0,.04);
  padding-bottom:2.6rem; /* room for actions row */
}
.pc-composer:focus-within::before{
  content:""; position:absolute; left:0; right:0; top:-8px; height:3px;
  background:linear-gradient(90deg,var(--pc-brand),var(--pc-brand)); border-radius:2px;
}
.pc-composer .pc-avatar,
.pc-item .pc-avatar{
  flex:0 0 var(--pc-avatar-size); width:var(--pc-avatar-size); height:var(--pc-avatar-size);
  border-radius:999px; background:#e6f7fd; color:#007fa6; display:grid; place-items:center;
  font-weight:700; font-size:.85rem;
}
.pc-composer .pc-composer-main{ width:100%; }
.pc-composer textarea{
  width:100%;
  min-height: var(--pc-ta-min);
  max-height: none;                 /* JS caps at --pc-ta-max */
  resize:none;                      /* autosize handled in JS */
  font:inherit; color:var(--pc-text);
  background:var(--pc-input-bg); border:1px solid var(--pc-input-border); border-radius:10px;
  padding:.5rem .65rem; outline:none; line-height:1.35; font-size:.95rem;
  overflow:hidden;                  /* JS toggles to auto if needed */
  transition:border-color .15s, box-shadow .15s, background-color .15s;
}
.pc-composer textarea::placeholder{ color:#9aa0a6; }
.pc-composer textarea:focus{
  background:var(--pc-surface);
  border-color:var(--pc-brand);
  box-shadow:0 0 0 3px var(--pc-focus-ring);
}

/* Composer actions (Cancel + Post inside the box) */
.pc-compose-actions{
  position:absolute; right:.6rem; bottom:.6rem; display:flex; align-items:center; gap:.5rem; z-index:2;
}
.pc-submit{
  margin:0; position:static; background:var(--pc-brand); color:#fff; border:none;
  padding:.5rem .8rem; border-radius:6px; cursor:pointer; font-weight:600; font-size:.92rem;
  opacity:0; pointer-events:none; transform:translateY(-2px); transition:.15s;
}
.pc-submit:hover{ filter:brightness(.95); }
.pc-submit.is-visible{ opacity:1; pointer-events:auto; transform:none; }
.pc-cancel{
  background:transparent; border:0; padding:.2rem .35rem; color:var(--pc-muted);
  font-weight:600; cursor:pointer; border-radius:6px; font-size:.92rem;
}
.pc-cancel:hover{ background:var(--pc-hover); }

/* ----------------------------------------------------------
   Reveal logic (IMPORTANT): keep fields/actions hidden until open
   ---------------------------------------------------------- */
.comment-respond .form-submit{ display:none; } /* WP wrapper is unused after JS moves the button */
.comment-respond:not(.is-open) .pc-compose-actions{ display:none; }
.comment-respond:not(.is-open) .pc-errors{ display:none; }
.comment-respond:not(.is-open) .pc-guest-extra{ display:none; }            /* Name / Email rows */
.comment-respond:not(.is-open) .comment-form-cookies-consent{ display:none; }
.pc-errors:empty{ display:none; }
.comment-respond:not(.is-open) .pc-composer{ padding-bottom:.6rem; }        /* remove reserved space */

/* When opened, show a disabled-looking Post; JS enables with .is-visible on input */
.comment-respond.is-open .pc-submit{ opacity:.5; pointer-events:none; }
/* >>> Ensure Post becomes active once JS adds .is-visible (overrides the rule above) */
.comment-respond.is-open .pc-submit.is-visible{ opacity:1; pointer-events:auto; }

/* Inline errors */
.pc-errors{ margin-top:.5rem; color:#c62828; font-weight:600; font-size:.9rem; }
.input-error,
.input-error:focus{ border-color:#e57373 !important; box-shadow:0 0 0 3px rgba(229,115,115,.15); }

/* Hide default WP notes */
.comment-notes,.logged-in-as{ display:none; }

/* Bar: count + sort */
.pc-bar{
  display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--pc-border); padding:.5rem 0; margin-bottom:.5rem;
}
.pc-tab{
  font-size:1rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  position:relative; padding-bottom:.55rem;
}
.pc-tab .pc-count{ color:var(--pc-muted); font-weight:400; margin-left:.2rem; }
.pc-bar .pc-tab::after{ content:""; position:absolute; left:0; bottom:0; width:140px; height:2px; background:#000; opacity:.85; }
.pc-sort{ display:flex; gap:.5rem; align-items:center; color:var(--pc-muted); font-size:.9rem; } /* ← fixed var() */

/* Sort popover */
.pc-sort-select a{ display:none; }
.pc-sort-select a.is-active{
  display:inline-flex; align-items:center; gap:.25rem; font-weight:600;
  color:var(--pc-text); background:var(--pc-hover); padding:.2rem .45rem; border-radius:6px;
}
.pc-sort-select a.is-active::after{ content:"▾"; font-size:.8em; }
.people-comments .pc-sort-select{ position:relative; z-index:3; }
.people-comments .pc-sort-select.menu-open{
  background:var(--pc-surface); border:1px solid var(--pc-border); border-radius:8px;
  padding:.25rem; box-shadow:0 6px 14px rgba(0,0,0,.08);
}
.people-comments .pc-sort-select.menu-open a{
  display:block; background:transparent; color:var(--pc-text);
  padding:.35rem .5rem; border-radius:6px;
}
.people-comments .pc-sort-select.menu-open a + a{ margin-top:.25rem; }
.people-comments .pc-sort-select.menu-open a:hover{ background:var(--pc-hover); }
.people-comments .pc-sort-select.menu-open a.is-active{ font-weight:700; }

/* List + items */
.pc-list{ list-style:none; margin:0; padding:0; }
.pc-item{ margin:0; padding:0; position:relative; }
.pc-item + .pc-item{ border-top:1px solid var(--pc-border); }

/* Card */
.pc-card{ display:flex; gap:.75rem; padding:1.05rem 0; position:relative; }
.pc-body{ flex:1; }
.pc-meta{ display:flex; align-items:center; gap:.35rem; font-size:.93rem; }
.pc-author{ font-weight:700; }
.pc-dot{ color:var(--pc-muted); opacity:.55; }
.pc-time{ color:var(--pc-muted); }
.pc-text{ margin:.35rem 0 .5rem; line-height:1.55; }

/* Actions */
.pc-actions{ display:flex; gap:.75rem; align-items:center; }
.pc-reply{ font-weight:600; text-decoration:none; color:#d12b2f; font-size:.93rem; }
.pc-reply:hover{ text-decoration:underline; }
.pc-vote{
  display:inline-flex; align-items:center; gap:.25rem; border:none; background:transparent;
  color:var(--pc-muted); cursor:pointer; padding:.2rem .35rem; border-radius:6px; font-size:.9rem;
}
.pc-vote:hover{ background:#f6f6f6; color:var(--pc-text); } /* ← fixed var() */
.pc-vcount{ min-width:1ch; text-align:right; }

/* ---------- Replies: collapsed by default with ONE straight line ---------- */

.people-comments .pc-children{
  list-style:none; margin:.6rem 0 0 var(--pc-reply-indent); padding-left:1rem;
  position:relative; display:none;
}
.people-comments .pc-children::before{
  content:""; position:absolute;
  left: calc(var(--pc-line-axis) - var(--pc-reply-indent));
  top:.25rem; bottom:.25rem; width:2px; background:var(--pc-reply-line); border-radius:1px;
}
.people-comments .pc-item.has-children:not(.open)::before{
  content:""; position:absolute; left:var(--pc-line-axis);
  top: calc(var(--pc-avatar-size) + 6px); bottom:34px;
  width:2px; background:var(--pc-reply-line); border-radius:1px; pointer-events:none;
}
.pc-replies-toggle{
  position:relative; display:flex; align-items:center; gap:.5rem;
  margin:.4rem 0 .2rem var(--pc-reply-indent);
  padding:.15rem .2rem .3rem 1.75rem;
  background:transparent; border:0; color:#006d8f; font-weight:600; cursor:pointer; border-radius:6px;
}
.pc-replies-toggle:hover{ background:var(--pc-hover); }
.pc-replies-toggle .pc-replies-text::after{ content:" ▾"; font-size:.8em; }
.pc-replies-toggle.is-open .pc-replies-text::after{ content:" ▴"; }
.pc-replies-toggle .pc-replies-count{
  position:absolute; left: calc(var(--pc-line-axis) - var(--pc-reply-indent));
  bottom:-2px; transform:translateX(-50%);
  width:22px; height:22px; display:grid; place-items:center;
  background:#e6f7fd; color:#007fa6; border-radius:4px; font-weight:700; font-size:.78rem;
}
.people-comments .pc-children .pc-children{ margin-left:var(--pc-reply-indent); }
.people-comments .pc-children .pc-item + .pc-item{ border-top:1px solid var(--pc-reply-line); margin-top:.75rem; padding-top:.75rem; }

/* Load more + Hide comments */
.pc-load-more{ padding:1rem 0; margin: 0; }
.pc-load-more .pc-button{
  display:block;
  width: 100%;
  max-width: 100%;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;

  background: #fff;
  color: #111;
  border: 1px solid #dde1e6;
  border-radius: 6px;
  padding: .85rem 1rem;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.65),
    0 1px 0 rgba(0,0,0,.03);
  transition: background-color .15s, border-color .15s;
}
.pc-load-more .pc-button:hover{ background:#fafafa; border-color: #cfd6dd; }
.pc-load-more .pc-button[disabled],
.pc-load-more .pc-button.is-busy{
  opacity: .65;
  cursor: default;
}
.pc-load-more .pc-hide-button{ background:#fafafa; border:1px solid #dde1e6; }
.pc-load-more .pc-hide-button:hover{ background:#fafafa; border-color:#cfd6dd; }

/* dark mode */
body.dark-mode .people-comments .pc-load-more .pc-button,
body.dark-mode .people-comments .pc-load-more .pc-hide-button{
  background:#141618;
  color:#f5f5f5;
  border:1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
body.dark-mode .people-comments .pc-load-more .pc-button:hover,
body.dark-mode .people-comments .pc-load-more .pc-hide-button:hover{
  background:#171a1d;
  border-color:rgba(255,255,255,.22);
}

/* Guest fields tidy */
.comment-respond .comment-form-author,
.comment-respond .comment-form-email{ margin-top:.35rem; }
.comment-respond .comment-form-author input,
.comment-respond .comment-form-email input{
  width:100%; padding:.6rem .7rem; border:1px solid var(--pc-border); border-radius:6px;
  background:var(--pc-surface); color:var(--pc-text);
}
/* If some plugin injects Website anyway, hide it */
.comment-respond .comment-form-url{ display:none !important; }

/* Focus styles (keyboard users) */
.user-tabbed .people-comments a:focus,
.user-tabbed .people-comments button:focus{ outline:2px solid #7bcfff; outline-offset:2px; border-radius:4px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .pc-submit,.pc-replies-toggle,.pc-card{ transition:none }
}

/* Small screens */
@media (max-width:520px){
  .pc-bar{ flex-direction:column; align-items:flex-start; gap:.5rem; }
  .pc-card{ padding:.9rem 0; }
  .pc-composer{ padding-bottom:3.1rem; }
  .pc-replies-toggle{ margin-left: calc(32px + .6rem); }
  .people-comments .pc-children{ margin-left: calc(32px + .6rem); padding-left:.85rem; }
  .people-comments .pc-children::before{ left:.3rem; }
}