/* Core layout */
.ffccp-wrap{max-width:100%;margin:30px 0;padding:20px;border:1px solid #EDEDED;border-radius:12px;background:#FFFFFF}
.ffccp-head{margin-bottom:12px}
.ffccp-title{margin:0 0 6px 0;font-weight:800;font-size:22px;line-height:1.2;color:#000}
.ffccp-intro{margin:0;color:#1F1F1F;font-size:15px}
.ffccp-list{display:flex;flex-direction:column;gap:12px;min-height:0;overflow:visible;padding-right:4px;margin-bottom:12px}
.ffccp-bubble{position:relative;max-width:820px;padding:12px 14px;border-radius:14px;background:#FAFAFA;border:1px solid #EEE;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.ffccp-bubble.reply{margin-left:24px;border-left:3px solid #000}
.ffccp-bubble.accepted{background:#E9F9EE;border-color:#66C48B}
.ffccp-meta{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;color:#000;margin-bottom:6px;text-transform:uppercase;letter-spacing:.02em}
.ffccp-left{display:flex;gap:8px;align-items:center}
.ffccp-badge{background:#EAF5FF;color:#0C4A6E;border:1px solid #B6D9FF;border-radius:999px;padding:2px 8px;font-size:10px}
.ffccp-actions{display:flex;gap:8px;align-items:center}
.ffccp-action{background:#fff;color:#000;border:1px solid #000;border-radius:999px;padding:6px 10px;font-weight:800;font-size:11px;text-transform:uppercase;cursor:pointer;transition:all .15s ease}
.ffccp-action:hover{background:#000;color:#fff}
.ffccp-date{font-weight:600;color:#666}
.ffccp-body{font-size:15px;line-height:1.55;color:#1F1F1F;white-space:pre-wrap}
.ffccp-replyto{font-size:12px;color:#444;margin-bottom:6px}
.ffccp-form{display:flex;flex-direction:column;gap:10px}
.ffccp-row{display:flex;gap:10px;align-items:flex-end}
.ffccp-inputs{flex:1;display:flex;flex-direction:column;gap:8px}
.ffccp-inputs textarea{width:100%;resize:vertical;border:1px solid #E5E5E5;border-radius:12px;padding:12px 14px;font-size:16px;line-height:1.5}
.ffccp-mini{display:flex;gap:8px}
.ffccp-mini input{flex:1;border:1px solid #E5E5E5;border-radius:10px;padding:10px 12px;font-size:15px}
.ffccp-consent{display:flex;gap:8px;align-items:center;font-size:13px;color:#333}
.ffccp-btn.elementor-button.elementor-button--outline.elementor-button--brand-outline{background:#fff;color:#000;border:2px solid #000;border-radius:12px;padding:12px 18px;font-weight:800;font-size:14px;text-transform:uppercase;transition:all .2s}
.ffccp-btn.elementor-button.elementor-button--brand-outline:hover{background:#000;color:#fff}
.ffccp-login-needed{padding:12px 14px;border-radius:12px;background:#FFF7E8;border:1px solid #CCA3523D;color:#1F1F1F}
.ffccp-hp{position:absolute!important;left:-9999px!important;top:auto!important;width:1px;height:1px;overflow:hidden}
.ffccp-fade{animation:ffccpfade .15s ease forwards}
@keyframes ffccpfade{to{opacity:0;transform:translateY(-4px)}}
@media(max-width:768px){.ffccp-row{flex-direction:column;align-items:stretch}.ffccp-btn{width:100%}}

/* 1.16.5 — Mobile actions & author colors */
@media (max-width: 480px){
  .ffccp-bubble .ffccp-actions{ display:flex; flex-wrap: wrap; gap: .25rem; }
  .ffccp-bubble .ffccp-action{ padding: .25rem .45rem; font-size:.85rem; line-height:1.2; }
}
.ffccp-bubble{ border:1px solid hsl(var(--ffccp-h,210) 60% 85% / .9); border-radius:10px; }
.ffccp-bubble .ffccp-meta{ background: hsl(var(--ffccp-h,210) 60% 96% / .75); padding:.25rem .5rem; border-top-left-radius:10px; border-top-right-radius:10px; }
.ffccp-bubble .ffccp-body{ padding:.5rem .75rem; }


/* 1.16.7 — Mobile readability improvements */
@media (max-width: 480px){
  .ffccp-bubble{ padding: .35rem; border-radius:12px; }
  .ffccp-meta{ font-size: .92rem; }
  .ffccp-bubble .ffccp-action{ font-weight:600; border-width:2px; }
  .ffccp-bubble .ffccp-actions{ margin-top:.25rem; }
  .ffccp-bubble .ffccp-body{ font-size: 1.02rem; line-height:1.5; }
}
/* Buttons default contrast/shape */
.ffccp-action{ border:1px solid #111; border-radius:999px; padding:.35rem .7rem; }
.ffccp-action:hover{ transform:translateY(-1px); }


/* 1.16.8 — desktop author colors always on */
.ffccp-bubble{ border:1px solid hsl(var(--ffccp-h,210) 55% 82% / .9); border-left-width:4px; border-radius:12px; background: hsl(var(--ffccp-h,210) 60% 99% / .6); }
.ffccp-meta{ background: hsl(var(--ffccp-h,210) 60% 96% / .55); padding:.35rem .6rem; border-top-left-radius:12px; border-top-right-radius:12px; }
.ffccp-meta .ffccp-author{ font-weight:700; }


/* 1.16.9 — desktop colors, overflow-safe actions */
.ffccp-wrap .ffccp-bubble{ 
  border:1px solid hsl(var(--ffccp-h,210) 55% 80% / .95) !important; 
  border-left:5px solid hsl(var(--ffccp-h,210) 60% 55% / .95) !important; 
  background: hsl(var(--ffccp-h,210) 70% 98% / .7) !important; 
  border-radius:14px; overflow:visible;
}
.ffccp-wrap .ffccp-meta{ 
  background: hsl(var(--ffccp-h,210) 60% 96% / .6) !important; 
  padding:.45rem .7rem;
}
.ffccp-wrap .ffccp-actions{ display:flex; flex-wrap:wrap; gap:.35rem; justify-content:flex-start; max-width:100%; }
.ffccp-wrap .ffccp-action{ flex:0 1 auto; padding:.35rem .7rem; border-width:2px; }
@media (max-width: 480px){
  .ffccp-wrap .ffccp-action{ padding:.3rem .55rem; font-size:.9rem; }
}


/* 1.17.0 — stronger desktop colors + bulletproof mobile buttons */
.ffccp-wrap .ffccp-bubble{ 
  box-sizing:border-box;
  border:1px solid hsl(var(--ffccp-h,210) 55% 82% / .95) !important; 
  border-left:6px solid hsl(var(--ffccp-h,210) 60% 52% / .98) !important; 
  background: hsl(var(--ffccp-h,210) 70% 98% / .7) !important; 
  border-radius:14px; overflow:visible;
}
.ffccp-wrap .ffccp-meta{ 
  background: hsl(var(--ffccp-h,210) 60% 96% / .6) !important; 
  padding:.45rem .8rem; display:flex; flex-wrap:wrap; gap:.35rem; align-items:center;
}
.ffccp-wrap .ffccp-actions{ display:flex; flex-wrap:wrap; gap:.35rem; max-width:100%; }
.ffccp-wrap .ffccp-action{ flex:0 1 auto; padding:.35rem .7rem; border-width:2px; max-width:100%; }
@media (max-width: 480px){
  .ffccp-wrap .ffccp-action{ padding:.3rem .55rem; font-size:.9rem; }
  .ffccp-wrap .ffccp-meta{ gap:.25rem; }
}


/* 1.17.1 — forced specificity to beat theme overrides */
body .ffccp-wrap .ffccp-bubble{
  border:1px solid hsl(var(--ffccp-h,210) 55% 82% / .95) !important;
  border-left:6px solid hsl(var(--ffccp-h,210) 60% 52% / .98) !important;
  background: hsl(var(--ffccp-h,210) 70% 98% / .72) !important;
  border-radius:14px; overflow:visible;
}
body .ffccp-wrap .ffccp-meta{
  background: hsl(var(--ffccp-h,210) 60% 96% / .6) !important;
  padding:.45rem .8rem; display:flex; flex-wrap:wrap; gap:.35rem; align-items:center;
}
body .ffccp-wrap .ffccp-actions{ display:flex; flex-wrap:wrap; gap:.35rem; max-width:100%; }
body .ffccp-wrap .ffccp-action{ flex:0 1 auto; padding:.35rem .7rem; border-width:2px; max-width:100%; }
@media (max-width: 480px){
  body .ffccp-wrap .ffccp-action{ padding:.3rem .55rem; font-size:.9rem; }
  body .ffccp-wrap .ffccp-meta{ gap:.25rem; }
}


/* 1.17.2 — desktop colors & id badge */
body .ffccp-wrap .ffccp-bubble{
  border:1px solid hsl(var(--ffccp-h,210) 55% 80% / .95) !important;
  border-left:6px solid hsl(var(--ffccp-h,210) 60% 52% / .98) !important;
  background: hsl(var(--ffccp-h,210) 70% 98% / .75) !important;
  border-radius:14px; overflow:visible;
}
body .ffccp-wrap .ffccp-meta{ background: hsl(var(--ffccp-h,210) 60% 96% / .62) !important; }
.ffccp-idbadge{
  display:inline-block; margin-left:.5rem; padding:.05rem .4rem; border-radius:.4rem;
  font-size:.75rem; line-height:1; border:1px solid rgba(0,0,0,.25); background:#fff; color:#111;
}


/* 1.17.3 — per-author pastel background (desktop too) + top-right ID badge + mobile buttons */
body .ffccp-wrap .ffccp-bubble{
  position:relative;
  background: hsl(var(--ffccp-h,210) 80% 98% / .75) !important;
  border:1px solid hsl(var(--ffccp-h,210) 55% 82% / .95) !important;
  border-left:6px solid hsl(var(--ffccp-h,210) 60% 52% / .98) !important;
  border-radius:14px; overflow:visible;
}
body .ffccp-wrap .ffccp-meta{
  background: hsl(var(--ffccp-h,210) 60% 96% / .62) !important;
  padding:.45rem .8rem; display:flex; flex-wrap:wrap; gap:.35rem; align-items:center;
}
.ffccp-idbadge{
  position:absolute; top:.35rem; right:.5rem;
  display:inline-block; padding:.08rem .40rem; border-radius:.45rem;
  font-size:.72rem; line-height:1; border:1px solid rgba(0,0,0,.22); background:#fff; color:#6b7280;
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
@media (max-width: 480px){
  .ffccp-wrap .ffccp-actions{ display:flex; flex-wrap:wrap; gap:.3rem; max-width:100%; }
  .ffccp-wrap .ffccp-action{ padding:.28rem .5rem; font-size:.88rem; line-height:1.1; flex:0 1 auto; }
  .ffccp-wrap .ffccp-action svg{ width:1em; height:1em; }
}


/* 1.17.4 — ensure ID badge visible and banner no-duplicate */
body .ffccp-wrap .ffccp-bubble{ position:relative; }
.ffccp-idbadge{ z-index:2; pointer-events:none; }


/* 1.17.5 — ensure badge visibility */
.ffccp-idbadge{ z-index:5; pointer-events:none; opacity:.95; }


/* 1.17.6 — Visible ID badge via ::after + prominent reply banner */
body .ffccp-wrap .ffccp-bubble{
  position:relative;
}
body .ffccp-wrap .ffccp-bubble::after{
  content: attr(data-id) attr(data-id, '') != '' ? ' #' attr(data-id) : '';
  /* Fallback for some browsers without conditional attr(): we'll set content via simpler form below */
}
/* Fallback, broadly supported: */
body .ffccp-wrap .ffccp-bubble[data-id]::after{
  content: '#' attr(data-id);
  position:absolute; top:.35rem; right:.5rem;
  display:inline-block; padding:.08rem .40rem; border-radius:.45rem;
  font-size:.72rem; line-height:1; border:1px solid rgba(0,0,0,.22); background:#fff; color:#6b7280;
  box-shadow:0 1px 0 rgba(0,0,0,.06); z-index:5; pointer-events:none;
}

/* Reply banner prominence */
.ffccp-reply, .ffccp-reply-banner{
  background: linear-gradient(90deg, rgba(59,130,246,.12), rgba(59,130,246,.04));
  border:1px solid rgba(59,130,246,.35);
  padding:.5rem .75rem; border-radius:.6rem; margin:.5rem 0;
  font-weight:600; color:#1f2937;
}
.ffccp-reply .ffccp-replyto-name, .ffccp-reply-banner .ffccp-replyto-name{
  color:#111827; font-weight:700;
}


/* 1.18.0 — guaranteed ID badge and stronger banner */
body .ffccp-wrap .ffccp-bubble{ position:relative; }
body .ffccp-wrap .ffccp-bubble[data-id]::after{
  content: "#" attr(data-id);
  position:absolute; top:.35rem; right:.5rem;
  display:inline-block; padding:.08rem .40rem; border-radius:.45rem;
  font-size:.72rem; line-height:1; border:1px solid rgba(0,0,0,.25); background:#fff; color:#374151;
  box-shadow:0 1px 2px rgba(0,0,0,.15); z-index:6; pointer-events:none;
}
/* Prominent reply banner */
.ffccp-reply, .ffccp-reply-banner{
  background: linear-gradient(90deg, rgba(37,99,235,.14), rgba(37,99,235,.06));
  border:1px solid rgba(37,99,235,.45);
  padding:.6rem .8rem; border-radius:.65rem; margin:.6rem 0;
  font-weight:700; color:#111827;
}
.ffccp-reply .ffccp-replyto-name, .ffccp-reply-banner .ffccp-replyto-name{
  color:#0f172a; text-decoration:none;
}


/* === FFCCP Patch 2025-08-23: Visible comment ID + stronger reply cues === */
body .ffccp-wrap .ffccp-bubble{ position:relative; }
body .ffccp-wrap .ffccp-bubble[data-id]::after{
  content: "#" attr(data-id);
  position:absolute; top:.35rem; right:.5rem;
  display:inline-block; padding:.08rem .40rem; border-radius:.45rem;
  font-size:.72rem; line-height:1; border:1px solid rgba(0,0,0,.25); background:#fff; color:#374151;
  box-shadow:0 1px 2px rgba(0,0,0,.15); z-index:6; pointer-events:none;
}
/* Prominent reply banner */
.ffccp-reply-banner{
  background: linear-gradient(90deg, rgba(37,99,235,.14), rgba(37,99,235,.06));
  border:1px solid rgba(37,99,235,.45);
  padding:.6rem .8rem; border-radius:.65rem; margin:.6rem 0;
  font-weight:700; color:#111827;
}
.ffccp-reply-banner .ffccp-replyto-name{ color:#0b1b34; font-weight:800; }
.ffccp-bubble.ffccp-highlight{ outline:2px solid rgba(37,99,235,.6); outline-offset:2px; transition:outline-color .2s ease; }


/* === FFCCP Patch 2025-08-24 FINAL: inline ID badge next to date === */
.ffccp-id-inline{
  margin-left:8px;
  padding:0 .35rem;
  border:1px solid rgba(0,0,0,.2);
  border-radius:.4rem;
  font-size:.75rem;
  line-height:1.2;
  color:#374151;
  background:#fff;
  vertical-align:baseline;
}

.ffccp-body{overflow-wrap:anywhere;word-break:break-word;}

/* 1.18.1 — stronger reply banner visibility */
.ffccp-reply, .ffccp-reply-banner{
  background: linear-gradient(90deg, rgba(37,99,235,.18), rgba(37,99,235,.07));
  border:1px solid rgba(37,99,235,.55);
  padding:.65rem .85rem;
  border-radius:.7rem;
  margin:.7rem 0;
  font-weight:800;
  color:#0f172a;
}
.ffccp-reply::before, .ffccp-reply-banner::before{
  content:"\21AA"; /* ↪ */
  display:inline-block;
  margin-right:.5rem;
  opacity:.85;
}


/* 1.18.2 — defensive visibility for comment text across browsers */
.ffccp-bubble, .ffccp-body, .ffccp-text{ box-sizing:border-box; }
.ffccp-body{ display:block !important; min-height:0; overflow:visible; }
.ffccp-text{ display:block !important; visibility:visible !important; color:#0f172a; white-space:normal; }
.ffccp-bubble *{ max-width:100%; }

/* FFCCP 1.18.15 highlight */
.ffccp-highlight{ outline:2px solid rgba(37,99,235,.9); box-shadow:0 0 0 3px rgba(37,99,235,.25) inset; background:rgba(59,130,246,.08); transition:background .2s; }
.ffccp-reply-controls{ display:none !important }