/**
 * Comentários de extensões — visual RPG / identidade do perfil gamificado
 */

@import url('https://fonts.googleapis.com/css2?family=Almendra:wght@400;700&family=Audiowide&family=Bangers&family=Black+Ops+One&family=Cinzel+Decorative:wght@700&family=Cinzel:wght@600;700&family=Cormorant+Garamond:wght@600;700&family=Creepster&family=EB+Garamond:wght@600;700&family=Exo+2:wght@600;700&family=Fredoka:wght@600;700&family=Great+Vibes&family=M+PLUS+Rounded+1c:wght@700&family=MedievalSharp&family=Orbitron:wght@600;700&family=Outfit:wght@400;500;600;700&family=Pacifico&family=Permanent+Marker&family=Press+Start+2P&family=Russo+One&family=Shippori+Mincho:wght@600;700&family=Uncial+Antiqua&family=UnifrakturMaguntia&family=VT323&family=Yuji+Syuku&family=Zen+Maru+Gothic:wght@500;700&display=swap');

#comentarios-modal.comments-modal,
#comentarios-escrever-modal.comments-modal {
  background: rgba(4, 4, 10, 0.82) !important;
  backdrop-filter: none !important;
}

#comentarios-modal .comments-modal-content,
#comentarios-escrever-modal .comments-modal-content {
  background:
    linear-gradient(180deg, #241e14 0%, #121218 45%, #101018 100%) !important;
  border: 1px solid rgba(201, 162, 39, 0.55) !important;
  border-radius: 18px !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.6) !important;
  color: #f2ead8;
  max-width: min(640px, 94vw);
  max-height: min(88vh, 820px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'Outfit', sans-serif;
}

#comentarios-modal .comments-modal-header,
#comentarios-escrever-modal .comments-modal-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(201, 162, 39, 0.28) !important;
  padding: 10px 14px !important;
  min-height: 0 !important;
}

#comentarios-modal .comments-modal-header h3,
#comentarios-escrever-modal .comments-modal-header h3 {
  font-family: 'Cinzel', Georgia, serif !important;
  color: #e8c547 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.04em;
  margin: 0 !important;
  line-height: 1.2 !important;
}

#comentarios-modal .comments-modal-close,
#comentarios-escrever-modal .comments-modal-close {
  background: rgba(244, 117, 106, 0.12) !important;
  border: 1px solid rgba(244, 117, 106, 0.4) !important;
  color: #f5a89f !important;
  border-radius: 8px !important;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  font-size: 0.9rem !important;
}

#comentarios-modal .comments-modal-section,
#comentarios-escrever-modal .comments-modal-section {
  padding: 12px 14px 14px !important;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 162, 39, 0.55) rgba(0, 0, 0, 0.25);
}

#comentarios-modal .comments-modal-section::-webkit-scrollbar,
#comentarios-escrever-modal .comments-modal-section::-webkit-scrollbar,
#lista-comentarios.comments-list::-webkit-scrollbar {
  width: 8px;
}

#comentarios-modal .comments-modal-section::-webkit-scrollbar-track,
#comentarios-escrever-modal .comments-modal-section::-webkit-scrollbar-track,
#lista-comentarios.comments-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}

#comentarios-modal .comments-modal-section::-webkit-scrollbar-thumb,
#comentarios-escrever-modal .comments-modal-section::-webkit-scrollbar-thumb,
#lista-comentarios.comments-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #e8c547, #8a6914);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.35);
}

.cm-rpg-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.cm-rpg-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid rgba(201, 162, 39, 0.5);
  background: linear-gradient(165deg, rgba(232, 197, 71, 0.28), rgba(154, 116, 24, 0.2));
  color: #f7efd8;
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  text-decoration: none;
}

.cm-rpg-btn:hover {
  border-color: rgba(232, 197, 71, 0.8);
}

.cm-rpg-btn--ghost {
  background: rgba(0, 0, 0, 0.32);
  border-color: rgba(201, 162, 39, 0.35);
}

.cm-rpg-btn--gold {
  background: linear-gradient(165deg, #e8c547, #c9a227 55%, #8a6914);
  color: #1a1408;
}

.cm-rpg-stats {
  margin: 0;
  font-size: 0.78rem;
  color: #9a8f7a;
}

/* Lista */
#lista-comentarios.comments-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cm-card.comment-item {
  position: relative;
  padding: 16px !important;
  padding-bottom: 16px !important;
  margin-bottom: 0 !important;
  border-left: 0 !important;
  border-radius: 14px;
  border: 1px solid rgba(201, 162, 39, 0.28);
  background: rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.cm-card.comment-item::after {
  content: '';
  display: table;
  clear: both;
}

/* Avatar grande flutuando — texto envolve a moldura */
.cm-card > .cm-avatar-stack {
  --cm-avatar-inset: 26.92%;
  float: left;
  position: relative;
  width: 112px;
  height: 112px;
  margin: 0 14px 6px 0;
  overflow: visible;
}

.cm-avatar-stack {
  --cm-avatar-inset: 26.92%;
  position: relative;
  width: 112px;
  height: 112px;
  overflow: visible;
}

.cm-avatar-stack .cm-avatar {
  position: absolute;
  top: var(--cm-avatar-inset);
  left: var(--cm-avatar-inset);
  width: calc(100% - 2 * var(--cm-avatar-inset));
  height: calc(100% - 2 * var(--cm-avatar-inset));
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  display: block;
  background: #1c1a24;
  z-index: 1;
}

.cm-avatar-stack .cm-avatar-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  z-index: 2;
}

.cm-card-row,
.cm-card-row.comment-header {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start !important;
  gap: 8px 12px;
  min-width: 0;
  margin: 0 0 6px !important;
  /* acompanha o float do avatar */
}

.cm-name-fx {
  display: inline-flex;
  align-items: center;
  max-width: min(100%, 200px);
  min-width: 0;
}

.cm-author-name {
  display: inline-block;
  font-weight: 700;
  line-height: 1.2;
  word-break: break-word;
  --pg-name-scale: 1;
  font-size: calc(1.05rem * var(--pg-name-scale));
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cm-author-name.is-gradient-name {
  background-size: 200% 100%;
}

.cm-card-date {
  margin: 0;
  font-size: 0.72rem;
  color: #9a8f7a;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.cm-card-rating {
  margin: 0;
  display: inline-flex;
  gap: 2px;
  color: rgba(154, 143, 120, 0.4);
  font-size: 0.8rem;
  flex-shrink: 0;
}

.cm-card-rating--empty {
  color: #6b6356;
  font-size: 0.8rem;
}

.cm-card-rating .is-on {
  color: #e8c547;
}

.cm-card-actions,
.cm-card .comment-actions {
  position: static !important;
  bottom: auto !important;
  right: auto !important;
  margin: 0 0 0 auto !important;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.cm-card-actions .like-btn,
.cm-like-btn,
.cm-card .like-btn {
  appearance: none;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 11px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(201, 162, 39, 0.4) !important;
  background: rgba(0, 0, 0, 0.35) !important;
  color: #d8d0c0 !important;
  cursor: pointer;
  font-size: 0.78rem !important;
  font-family: inherit;
  box-shadow: none !important;
  transform: none !important;
}

.cm-card-actions .like-btn.liked,
.cm-like-btn.liked,
.cm-card .like-btn.liked {
  border-color: rgba(244, 117, 106, 0.55) !important;
  color: #f5a89f !important;
  background: rgba(244, 117, 106, 0.12) !important;
}

.cm-card-actions .like-btn .like-count {
  font-variant-numeric: tabular-nums;
}

.cm-card-text {
  margin: 0;
  padding: 0;
  border: 0;
  color: #e8dfcc;
  font-size: 0.92rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  /* flui ao lado da moldura e depois ocupa a largura toda */
}

.cm-empty,
.cm-loading {
  text-align: center;
  color: #9a8f7a;
  padding: 28px 12px;
}

.cm-empty i,
.cm-loading i {
  display: block;
  margin-bottom: 8px;
  font-size: 1.4rem;
  color: #e8c547;
}

/* Form escrever */
.cm-compose-preview {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(201, 162, 39, 0.35);
  background:
    linear-gradient(165deg, rgba(42, 34, 22, 0.55), rgba(0, 0, 0, 0.35));
  margin-bottom: 12px;
  overflow: visible;
  min-height: 0;
}

.cm-compose-preview .cm-avatar-stack {
  width: 118px;
  height: 118px;
  flex: 0 0 118px;
  float: none;
  margin: 0;
}

.cm-compose-copy {
  min-width: 0;
  flex: 1;
}

.cm-compose-hint {
  margin: 4px 0 0;
  font-size: 0.76rem;
  color: #9a8f7a;
  line-height: 1.35;
}

.cm-compose-preview .cm-author-name {
  white-space: normal;
  max-width: 100%;
  font-size: calc(1.1rem * var(--pg-name-scale, 1));
  line-height: 1.2;
}

.cm-form-label {
  display: block;
  margin: 0 0 8px;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e8c547;
}

.cm-star-rating {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}

.cm-star-rating .estrela-avaliacao {
  font-size: 1.55rem;
  color: rgba(154, 143, 120, 0.35);
  cursor: pointer;
  transition: color 0.12s, transform 0.12s;
}

.cm-star-rating .estrela-avaliacao:hover,
.cm-star-rating .estrela-avaliacao.active,
.cm-star-rating .estrela-avaliacao.is-on {
  color: #e8c547;
  transform: translateY(-1px);
}

#texto-avaliacao {
  display: block;
  margin-bottom: 14px;
  font-size: 0.82rem;
  color: #9a8f7a;
}

#texto-comentario {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  border-radius: 12px;
  border: 1px solid rgba(201, 162, 39, 0.35);
  background: rgba(0, 0, 0, 0.35);
  color: #f2ead8;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 0.92rem;
  outline: none;
  box-sizing: border-box;
}

#texto-comentario:focus {
  border-color: rgba(232, 197, 71, 0.7);
  box-shadow: 0 0 0 2px rgba(232, 197, 71, 0.12);
}

.cm-draft-note {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(201, 162, 39, 0.28);
  background:
    linear-gradient(90deg, rgba(201, 162, 39, 0.1), rgba(0, 0, 0, 0.22));
  font-size: 0.75rem;
  color: #cbbfa8;
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cm-draft-note::before {
  content: '📜';
  font-style: normal;
  font-family: inherit;
}

.cm-draft-note.is-saved {
  color: #e8c547;
  border-color: rgba(232, 197, 71, 0.45);
  background:
    linear-gradient(90deg, rgba(232, 197, 71, 0.16), rgba(0, 0, 0, 0.28));
}

#form-comentario .form-actions,
.cm-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 14px;
}

#form-comentario .cancel-btn,
#form-comentario .submit-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
}

#form-comentario .cancel-btn {
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(201, 162, 39, 0.35);
  color: #e8dfcc;
}

#form-comentario .submit-btn {
  background: linear-gradient(165deg, #e8c547, #c9a227 55%, #8a6914);
  border: 1px solid rgba(255, 230, 150, 0.5);
  color: #1a1408;
}

/* Name FX (compacto, espelha perfil) */
.cm-name-fx.pg-fx-glow .cm-author-name {
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--pg-name-ink, #e8c547) 70%, transparent));
}
.cm-name-fx.pg-fx-neon .cm-author-name {
  text-shadow:
    0 0 8px var(--pg-name-ink, #22d3ee),
    0 0 18px var(--pg-name-ink, #22d3ee);
}
.cm-name-fx.pg-fx-shimmer .cm-author-name:not(.is-gradient-name) {
  background-image: linear-gradient(90deg, currentColor 0%, #fff 45%, currentColor 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: cmShimmer 2.4s linear infinite;
}
@keyframes cmShimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

@media (max-width: 520px) {
  .cm-rpg-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .cm-card > .cm-avatar-stack {
    width: 96px;
    height: 96px;
    margin-right: 12px;
  }

  .cm-card-row {
    gap: 6px 8px;
  }

  .cm-name-fx {
    max-width: 100%;
  }

  .cm-card-actions {
    margin-left: auto;
  }

  .cm-compose-preview {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .cm-compose-preview .cm-avatar-stack {
    width: 108px;
    height: 108px;
    flex-basis: 108px;
  }

  .cm-form-actions {
    flex-direction: column-reverse;
  }

  #form-comentario .cancel-btn,
  #form-comentario .submit-btn {
    width: 100%;
    justify-content: center;
  }
}