/*
 * Default styling for the d1-comments-worker widget. Everything is scoped to
 * a handful of --d1c-* custom properties with sensible defaults (light, with
 * a prefers-color-scheme dark override) so this file works as a drop-in on
 * any page — a host site wanting a closer match to its own theme should
 * override the --d1c-* variables (e.g. to its own theme's color tokens)
 * rather than editing the rules below. See client/demo.html for the minimal
 * usage and the homelab blog's site/assets/css/extended/comments.css for an
 * example of mapping these onto a real theme's (PaperMod's) own variables.
 */

:root {
  --d1c-bg: #ffffff;
  --d1c-surface: #f5f5f5;
  --d1c-text: #1f1f1f;
  --d1c-muted: #6c6c6c;
  --d1c-border: #e2e2e2;
  --d1c-accent: #1e6fd9;
  --d1c-radius: 6px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --d1c-bg: #1d1e20;
    --d1c-surface: #2b2c2f;
    --d1c-text: #e4e4e5;
    --d1c-muted: #9b9c9d;
    --d1c-border: #3a3b3d;
    --d1c-accent: #6ea8fe;
  }
}

.d1c-comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.d1c-comment {
  border-top: 1px solid var(--d1c-border);
  padding: 0.9rem 0;
}

.d1c-comment:first-child {
  border-top: none;
}

.d1c-nested {
  margin: 0.6rem 0 0 1.4rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--d1c-border);
}

.d1c-nested .d1c-comment {
  border-top: none;
  padding: 0.6rem 0;
}

.d1c-deleted {
  opacity: 0.6;
}

.d1c-empty {
  color: var(--d1c-muted);
}

.d1c-date {
  color: var(--d1c-muted);
  font-size: 0.85em;
  margin-left: 0.35rem;
}

.d1c-body {
  color: var(--d1c-text);
  margin: 0.35rem 0;
  line-height: 1.5;
  word-wrap: break-word;
}

.d1c-body a {
  color: var(--d1c-accent);
}

.d1c-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.3rem;
}

.d1c-actions button {
  background: var(--d1c-surface);
  color: var(--d1c-text);
  border: 1px solid var(--d1c-border);
  border-radius: var(--d1c-radius);
  padding: 0.2rem 0.6rem;
  font-size: 0.85em;
  cursor: pointer;
}

.d1c-actions button:hover {
  border-color: var(--d1c-accent);
}

.d1c-toggle-form-btn {
  background: var(--d1c-accent);
  color: #fff;
  border: none;
  border-radius: var(--d1c-radius);
  padding: 0.55rem 1.1rem;
  font-size: 0.95em;
  cursor: pointer;
}

.d1c-toggle-form-btn:hover {
  opacity: 0.9;
}

.d1c-form-slot {
  margin-top: 0.75rem;
}

.d1c-form textarea,
.d1c-form input {
  display: block;
  width: 100%;
  margin: 0.4rem 0;
  padding: 0.5rem;
  box-sizing: border-box;
  background: var(--d1c-bg);
  color: var(--d1c-text);
  border: 1px solid var(--d1c-border);
  border-radius: var(--d1c-radius);
  font: inherit;
}

.d1c-form textarea:focus,
.d1c-form input:focus {
  outline: 2px solid var(--d1c-accent);
  outline-offset: 1px;
}

.d1c-form button[type="submit"] {
  background: var(--d1c-accent);
  color: #fff;
  border: none;
  border-radius: var(--d1c-radius);
  padding: 0.55rem 1.2rem;
  cursor: pointer;
}

.d1c-form button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: default;
}

.d1c-status {
  font-style: italic;
  color: var(--d1c-muted);
}

.d1c-error {
  color: #c0392b;
}

.d1c-reply-banner {
  font-style: italic;
  background: var(--d1c-surface);
  color: var(--d1c-text);
  padding: 0.4rem 0.6rem;
  border-radius: var(--d1c-radius);
}

.d1c-edit-wrap textarea {
  width: 100%;
  box-sizing: border-box;
}