/* Comments & Likes widget — com login Google opcional */
#comentarios, .cs-mount {
  --cs-bg: #ffffff;
  --cs-fg: #1f2937;
  --cs-muted: #6b7280;
  --cs-border: #e5e7eb;
  --cs-primary: #2563eb;
  --cs-primary-fg: #ffffff;
  --cs-danger: #b91c1c;
  --cs-success: #16a34a;
  --cs-radius: 10px;
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--cs-fg);
  background: var(--cs-bg);
  /*max-width: 720px;*/
  margin: 24px auto;
  padding: 16px;
  border-radius: var(--cs-radius);
}
.cs-header { display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap }
.cs-title  { margin:0; font-size:1.2rem; flex:1 }
.cs-count  { color: var(--cs-muted); font-size:.9rem }
.cs-like-page {
  border:1px solid var(--cs-border); background:#fff; border-radius:999px;
  padding:6px 12px; cursor:pointer; font-size:.85rem;
  display:inline-flex; gap:6px; align-items:center;
}
.cs-like-page.is-liked { background:#fee2e2; border-color:#fecaca; color:#dc2626 }
.cs-userbar { display:inline-flex; align-items:center; gap:8px; margin-left:auto }
.cs-userme  { display:inline-flex; align-items:center; gap:6px; color:var(--cs-muted); font-size:.85rem }
.cs-me-avatar { width:24px; height:24px; border-radius:50%; }
.cs-logout {
  border:none; background:transparent; color:var(--cs-muted);
  font-size:.8rem; cursor:pointer; padding:2px 6px; border-radius:6px;
}
.cs-logout:hover { background:#f3f4f6 }

.cs-list .cs-empty { color: var(--cs-muted); font-style:italic }
.cs-item { border:1px solid var(--cs-border); border-radius:var(--cs-radius); padding:12px; margin:10px 0; background:#fff }
.cs-item-head { display:flex; align-items:center; gap:8px; margin-bottom:6px; color:var(--cs-muted); font-size:.85rem }
.cs-avatar { width:28px; height:28px; border-radius:50%; background:#f3f4f6; object-fit:cover }
.cs-item-head strong { color:var(--cs-fg); font-weight:600 }
.cs-item-user .cs-item-head strong::after { content:" \u2605"; color:#f59e0b; margin-left:2px }
.cs-body { white-space:pre-wrap; word-wrap:break-word }
.cs-foot { display:flex; gap:6px; margin-top:8px }
.cs-foot button {
  border:none; background:transparent; cursor:pointer;
  color:var(--cs-muted); font-size:.85rem; padding:4px 6px; border-radius:6px;
}
.cs-foot button:hover { background:#f3f4f6 }
.cs-like.is-liked { color:#dc2626 }

.cs-form { display:flex; flex-direction:column; gap:8px; margin-top:16px; padding:12px; border:1px dashed var(--cs-border); border-radius:var(--cs-radius) }
.cs-form-as { display:flex; gap:8px }
.cs-form-as input { flex:1 }
.cs-form input, .cs-form textarea {
  font:inherit; padding:8px 10px; border:1px solid var(--cs-border); border-radius:8px; background:#fff; color:var(--cs-fg)
}
.cs-form input:focus, .cs-form textarea:focus { outline:2px solid #93c5fd; border-color:var(--cs-primary) }
.cs-form input[readonly] { background:#f9fafb; color:var(--cs-muted) }
.cs-hp { position:absolute !important; left:-9999px; top:-9999px; width:1px; height:1px; opacity:0 }
.cs-actions { display:flex; align-items:center; gap:10px }
.cs-status { flex:1; color:var(--cs-muted); font-size:.85rem }
.cs-status.is-error { color:var(--cs-danger) }
.cs-submit { background:var(--cs-primary); color:var(--cs-primary-fg); border:none; border-radius:8px; padding:8px 14px; cursor:pointer; font-weight:600 }
.cs-submit:disabled { opacity:.6; cursor:not-allowed }
.cs-reply-form { margin-top:8px; padding:10px; background:#f9fafb }
.cs-replies { margin-left:24px; margin-top:8px; border-left:2px solid var(--cs-border); padding-left:12px }

/* Contêiner onde o botão do Google será injetado */
.cs-gsi-host { margin-top:12px; display:flex; justify-content:flex-end }

@media (prefers-color-scheme: dark) {
  #comentarios, .cs-mount {
    --cs-bg:#eaeaea; --cs-fg:#33373c; --cs-muted:#94a3b8;
    --cs-border:#1e293b; --cs-primary:#3b82f6; --cs-primary-fg:#fff;
  }
  .cs-item, .cs-reply-form { background:#ffffff }
  .cs-reply-form { background:#1e293b }
  .cs-form input, .cs-form textarea { background:#ffffff; color:#33373c }
  .cs-form input[readonly] { background:#eaeaea }
  .cs-foot button:hover, .cs-logout:hover { background:#1e293b }
}