/* ─── Page détail V2 (handoff : screens/detail.html, reply-loading.html) ─── */

.comment-vote-btn { transition: color 0.15s; }
.comment-vote-btn:hover { color: var(--color-accent); }
.comment-vote-btn.active { color: var(--color-accent); }
.reply-toggle:hover { color: var(--color-accent); }

.post-detail-v2 {
  margin: 0 auto;
  max-width: var(--layout-reading-max);
  padding: 0 0 calc(96px + env(safe-area-inset-bottom)); /* place pour la barre de réponse */
}

.post-detail-v2__article {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-4) 18px;
}

.post-detail-v2__title {
  color: var(--color-text);
  font-size: 1.4375rem;
  font-weight: 760;
  line-height: 1.18;
  margin: 14px 0 0;
}

.post-detail-v2__body {
  margin-top: var(--space-4);
}

/* Actions : Vòt · Repons · Pataje · … (pas de pilules, icônes encre) */
.post-detail-v2__actions {
  margin-top: 18px;
}

.post-detail-v2__actions .post-actions {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 15px;
}

.post-detail-v2__actions .post-action {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--color-text-muted);
  display: inline-flex;
  font: inherit;
  font-size: 0.84375rem;
  gap: 5px;
  line-height: 1;
  min-height: 44px;
  padding: 0;
  text-decoration: none;
  white-space: nowrap;
}

.post-detail-v2__actions .post-action__icon {
  color: var(--color-accent);
  font-size: 19px;
  line-height: 1;
}

.post-detail-v2__actions .post-action:hover,
.post-detail-v2__actions .vote-btn.active.post-action {
  color: var(--color-accent);
}

.post-detail-v2__actions .vote-btn.active.post-action {
  font-weight: 650;
}

.post-body {
  display: grid;
  gap: var(--space-4);
}

/* Image pleine largeur (bord à bord), 16:10 */
.post-detail-v2 .post-body__media {
  margin: 0 calc(var(--space-4) * -1);
}

.post-body__media {
  margin: 0;
}

.post-body__image {
  aspect-ratio: 16 / 10;
  background: var(--color-surface-soft);
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.post-body__content {
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.post-body__content p {
  margin: 0 0 14px;
}

.post-body__content p:last-child {
  margin-bottom: 0;
}

/* ─── Repons : ouvertes, sans cadre ni filet, rythme régulier de 22px ─── */

.comment-thread {
  margin-bottom: 4px;
  padding: 18px var(--space-4) 0;
}

.comment-thread__title {
  color: var(--color-text);
  font-size: 0.9375rem;
  font-weight: 680;
  margin: 0;
}

.comment-thread__list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-top: var(--space-4);
}

/* Un seul niveau : retrait de 14px, sans barre verticale */
.comment-thread__replies {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 22px 0 0 14px;
}

.comment-thread__replies:empty {
  display: none;
}

.comment-item {
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  transition: background 0.4s;
}

.comment-item__top {
  align-items: center;
  display: flex;
  gap: 9px;
}

.comment-item__avatar {
  align-items: center;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 650;
  height: 28px;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
  width: 28px;
}

.comment-item__avatar img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.comment-item__line {
  align-items: center;
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 5px;
  line-height: 1.3;
  min-width: 0;
}

.comment-item__author {
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 650;
  text-decoration: none;
}

.comment-item__dot,
.comment-item__time {
  color: var(--color-text-subtle);
  font-size: 0.78125rem;
}

.comment-item__body {
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin: 8px 0 0;
  overflow-wrap: anywhere;
}

/* Repons efase gardée pour ses réponses (TECH_DEBT §2) */
.comment-item__body--deleted {
  color: var(--color-text-muted);
  font-style: italic;
  margin: 0;
}


.comment-item__mention {
  color: var(--color-accent);
  font-weight: 600;
}

.comment-item__actions {
  display: flex;
  gap: 20px;
  margin-top: 4px;
}

.comment-item__action {
  align-items: center;
  background: none;
  border: 0;
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.8125rem;
  gap: 5px;
  min-height: 44px;
  padding: 0;
  text-decoration: none;
  white-space: nowrap;
}

.comment-item__action .material-icons {
  color: var(--color-accent);
  font-size: 16px;
}

.comment-item__action.active {
  color: var(--color-accent);
  font-weight: 650;
}

/* Repons visée par « Reponn » */
.comment-item.is-reply-target {
  background: var(--color-accent-soft);
  margin: -8px -10px;
  padding: 8px 10px;
}

/* Repons tout juste publiée : bref fondu accent-soft */
.comment-item.is-fresh {
  animation: comment-fresh 1.6s ease;
}

@keyframes comment-fresh {
  0% { background: var(--color-accent-soft); }
  100% { background: transparent; }
}

.comment-edit-form {
  display: grid;
  gap: var(--space-2);
  margin-top: 8px;
}

.comment-edit-input {
  width: 100%;
  font-family: inherit;
  box-sizing: border-box;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-base);
  line-height: 1.5;
  min-height: 88px;
  padding: var(--space-3);
  resize: vertical;
}

.comment-edit-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
  outline: none;
}

.comment-edit-actions {
  margin-top: 6px;
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

/* ─── Barre de réponse : toujours visible, collée en bas ─── */

.reply-bar {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  bottom: 0;
  left: 0;
  padding-bottom: env(safe-area-inset-bottom);
  position: fixed;
  right: 0;
  z-index: 100;
}

.reply-bar__context {
  align-items: center;
  color: var(--color-text-muted);
  display: flex;
  font-size: 0.8125rem;
  gap: var(--space-2);
  margin: 0 auto;
  max-width: var(--layout-reading-max);
  padding: 9px 14px 0;
}

.reply-bar__context[hidden] {
  display: none;
}

.reply-bar__context .material-icons {
  color: var(--color-accent);
  font-size: 16px;
}

.reply-bar__context b {
  color: var(--color-text);
  font-weight: 650;
}

.reply-bar__cancel {
  align-items: center;
  background: none;
  border: 0;
  color: var(--color-text-subtle);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  margin-left: auto;
  min-height: 32px;
  min-width: 32px;
}

.reply-bar__row {
  align-items: flex-end;
  display: flex;
  gap: 10px;
  margin: 0 auto;
  max-width: var(--layout-reading-max);
  padding: 10px 14px;
}

.reply-bar__avatar {
  align-items: center;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 650;
  height: 28px;
  justify-content: center;
  margin-bottom: 7px;
  overflow: hidden;
  width: 28px;
}

.reply-bar__avatar img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.reply-bar__input {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: 21px;
  color: var(--color-text);
  flex: 1;
  font: inherit;
  font-size: var(--text-base); /* ≥ 16px : pas de zoom iOS */
  line-height: 1.4;
  max-height: 120px;
  min-height: 42px;
  padding: 10px 16px;
  resize: none;
}

.reply-bar__input::placeholder {
  color: var(--color-text-subtle);
}

.reply-bar__input:focus {
  background: var(--color-surface);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
  outline: none;
}

.reply-bar__send {
  align-items: center;
  background: var(--color-accent);
  border: 0;
  border-radius: var(--radius-full);
  color: var(--color-on-accent);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.reply-bar__send:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.reply-bar__send-icon {
  font-size: 20px;
}

/* Envoi en cours : spinner dans le bouton, jamais d'écran bloqué */
.reply-bar__spinner {
  animation: reply-spin 0.8s linear infinite;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-full);
  border-top-color: var(--color-on-accent);
  display: none;
  height: 18px;
  width: 18px;
}

.reply-bar__row.htmx-request .reply-bar__send-icon {
  display: none;
}

.reply-bar__row.htmx-request .reply-bar__spinner {
  display: block;
}

.reply-bar__row.htmx-request .reply-bar__send:disabled {
  opacity: 1;
}

@keyframes reply-spin {
  to { transform: rotate(360deg); }
}

.reply-bar__login {
  align-items: center;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: 21px;
  color: var(--color-accent);
  display: flex;
  flex: 1;
  font-weight: 600;
  justify-content: center;
  min-height: 44px;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .comment-item,
  .comment-item.is-fresh,
  .reply-bar__spinner {
    animation: none;
    transition: none;
  }
}

/* Desktop : la barre reste collée en bas de la colonne de lecture (R9) */
@media (min-width: 1024px) {
  .reply-bar {
    border: 1px solid var(--color-border);
    border-bottom: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    left: 50%;
    max-width: var(--layout-reading-max);
    transform: translateX(-50%);
    width: 100%;
  }
}