/**
 * Fictioneer Paragraph Comments — Bubble Shape & Comment View Layout
 *
 * RULES (locked, do not violate):
 *   - No hardcoded color values (no hex, no raw rgb()) — every color
 *     MUST come from an existing var(--...) already defined by the
 *     parent theme (see css/application-properties.css).
 *   - Only shape, spacing, radius, and position may be defined here.
 *   - Never import/copy any rule from the parent theme's stylesheets.
 *
 * @since 1.0.0 (bubble rules), 2.0.0 (Comment View replaces Modal/Popup)
 */

.fpc-bubble {
  position: relative; /* anchor for the count badge */
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  white-space: nowrap;
  margin-left: 0.15em;
  padding: 0;
  line-height: 1;
  cursor: pointer;

  border: none;
  background: transparent;
  font: inherit;
  box-shadow: none;

  transition: opacity var(--transition-duration, 0.2s) ease;
}

.fpc-bubble:hover,
.fpc-bubble:focus-visible {
  opacity: 0.8;
}

.fpc-bubble__icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--fg-600);
  font-size: 1.15em;
  line-height: 1;
}

.fpc-bubble__icon svg {
  display: block;
}

.fpc-bubble__count {
  /* Sits on top of the icon's top-right corner, like a real
     notification badge. */
  position: absolute;
  top: -0.35em;
  right: -0.4em;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2em;
  height: 1.2em;
  padding: 0 0.22em;
  border-radius: 999px;
  font-size: 0.52em;
  font-weight: var(--font-weight-medium, 500);
  line-height: 1;

  /* Same color pair as the theme's own primary "Submit comment"
     button — the accent color already familiar throughout the UI. */
  background: var(--button-primary-background);
  color: var(--button-primary-color);

  /* Thin ring matching the page background, separating the badge
     visually from the icon behind it. */
  box-shadow: 0 0 0 2px var(--page-bg-color);
}

/**
 * COMMENT VIEW — a dedicated screen, not a floating popup.
 *
 * Deliberately NO position:fixed, NO fixed/max height, NO internal
 * overflow:auto scroll container. This element is a normal block in
 * the page's own document flow; the page's own window/body scroll
 * handles everything, including the mobile keyboard — which is
 * precisely why no visualViewport workaround is needed here: the
 * browser already knows how to scroll a focused input into view
 * correctly when the scroll context is the document itself.
 *
 * min-height only makes it FEEL like a dedicated full screen on
 * mobile; it never constrains/clips content — long comment threads
 * simply make the page taller, exactly like any normal page content.
 */
#fpc-comment-view {
  min-height: 100dvh;
  background: var(--page-bg-color);
  padding: 1rem;
  box-sizing: border-box;
}

#fpc-comment-view[hidden] {
  display: none;
}

/* Desktop/tablet: use a sensibly readable width instead of full-bleed
   edge-to-edge, without becoming a cramped small box. Mobile (no
   media query match) stays full width. */
@media ( min-width: 768px ) {
  #fpc-comment-view {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
  }
}

.fpc-comment-view__header {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-bottom: 1.25em;
  padding-bottom: 0.75em;
  border-bottom: 1px solid var(--border-color, var(--fg-100));
}

.fpc-comment-view__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25em;
  height: 2.25em;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--fg-600);
  font-size: 1.1em;
  cursor: pointer;
}

.fpc-comment-view__back:hover {
  background: var(--bg-100);
}

.fpc-comment-view__title {
  font-size: 1.1em;
  font-weight: var(--font-weight-medium, 500);
  color: var(--fg-700);
}

/* New Comment Composer sits directly under the header, above the
   comment list — enforced by DOM order in comment-view-v1.js, this
   just keeps normal document-flow spacing. */
.fpc-comment-view__body #respond {
  margin-bottom: 1.5em;
}

/**
 * Lightweight loading placeholder shown the instant Comment View
 * opens, before content has been fetched.
 */
.fpc-loading-placeholder {
  opacity: 0.6;
  text-align: center;
  padding: 1.5em 0;
}

/**
 * "N replies" toggle button.
 */
.fpc-replies-toggle {
  display: flex;
  align-items: center;
  gap: 0.35em;
  margin: 0.6em 0 0.9em 0;
  padding: 0.4em 0.7em;
  border: 1px solid var(--border-color, var(--fg-100));
  border-radius: 6px;
  background: var(--bg-100);
  font: inherit;
  font-size: 0.85em;
  font-weight: var(--font-weight-medium, 500);
  color: var(--inline-link-color);
  cursor: pointer;
}

.fpc-replies-toggle:hover {
  background: var(--bg-200);
  color: var(--inline-link-color-hover);
}

.fpc-replies-toggle::before {
  content: '\21B3';
  font-size: 0.9em;
  opacity: 0.7;
}

/**
 * Fully hides a deleted comment's own content (name, avatar, "deleted"
 * notice). Only the direct content wrapper is hidden — NOT the
 * surrounding <li> — because any replies nested under a deleted
 * comment live inside that same <li>. Hiding the <li> itself would
 * also hide those replies, which is not the intent.
 *
 * As of the cascade-delete backend change (hooks-cascade-delete.php),
 * comments in this module's scope are hard-deleted from the database
 * entirely rather than soft-deleted, so this rule mainly protects
 * comments outside this module's scope (the main comment section)
 * where the parent theme's normal soft-delete still applies.
 *
 * Applies site-wide (not scoped to Comment View only), per request.
 */
li._deleted > .fictioneer-comment__container {
  display: none;
}