/* ==========================================================
   AYW DESIGN SYSTEM
   PAGES / SOCIAL / COMMENTS

   Responsabilidades:
   - área de comentários;
   - comentários e subrespostas;
   - menus;
   - ações;
   - formulários;
   - edição;
   - estados;
   - responsividade.

   Aparência compartilhada vem de:
   - components/avatars.css
   - components/buttons.css
   - components/forms.css
   - components/empty-states.css

   Não utiliza Bootstrap.
   ========================================================== */


/* ==========================================================
   ÁREA DE COMENTÁRIOS
   ========================================================== */

   .ayw-comments {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  
    margin-top: var(--ayw-space-2);
    padding-top: var(--ayw-space-2);
  
    border-top: 1px solid var(--ayw-border);
  }
  
  .ayw-comments[hidden] {
    display: none;
  }
  
  
  /* ==========================================================
     CABEÇALHO
     ========================================================== */
  
  .ayw-comments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  
    width: 100%;
    min-width: 0;
  
    gap: var(--ayw-space-2);
  
    margin-bottom: var(--ayw-space-2);
  }
  
  .ayw-comments-title {
    min-width: 0;
  
    margin: 0;
  
    overflow: hidden;
  
    color: var(--ayw-text);
  
    font-size: var(--ayw-font-size-md);
    font-weight: var(--ayw-font-weight-semibold);
    line-height: var(--ayw-line-height-tight);
  
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .ayw-comments-count {
    flex: 0 0 auto;
  
    color: var(--ayw-text-muted);
  
    font-size: var(--ayw-font-size-sm);
    line-height: 1;
  
    white-space: nowrap;
  }
  
  
  /* ==========================================================
     LISTA
     ========================================================== */
  
  .ayw-comments-list {
    display: flex;
    flex-direction: column;
  
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  
  .ayw-comments-list[data-scroll="true"] {
    max-height: 24rem;
  
    padding-right: var(--ayw-space-1);
  
    overflow-x: hidden;
    overflow-y: auto;
  
    overscroll-behavior: contain;
  
    scrollbar-width: thin;
    scrollbar-color:
      var(--ayw-border-strong)
      transparent;
  }
  
  .ayw-comments-list[data-scroll="true"]::-webkit-scrollbar {
    width: 0.375rem;
  }
  
  .ayw-comments-list[data-scroll="true"]::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .ayw-comments-list[data-scroll="true"]::-webkit-scrollbar-thumb {
    border-radius: var(--ayw-radius-full);
  
    background: var(--ayw-border-strong);
  }
  
  
  /* ==========================================================
     COMENTÁRIO
     ========================================================== */
  
  .ayw-comment {
    display: grid;
  
    grid-template-columns:
      auto
      minmax(0, 1fr);
  
    width: 100%;
    min-width: 0;
  
    align-items: flex-start;

    gap: var(--ayw-space-3);
  
    padding-block: var(--ayw-space-3);
  
    border-bottom: 1px solid var(--ayw-border);
  }
  
  .ayw-comment:last-child {
    border-bottom: 0;
  }
  
  .ayw-comment[aria-busy="true"] {
    cursor: progress;
  }
  
  .ayw-comment.is-removing {
    pointer-events: none;
  
    opacity: 0.55;
  }
  
  .ayw-comment-avatar {
    flex: 0 0 auto;
  }
  
  .ayw-comment-main {
    width: 100%;
    min-width: 0;

    padding-top: 0.125rem;
  }
  
  
  /* ==========================================================
     CABEÇALHO DO COMENTÁRIO
     ========================================================== */
  
  .ayw-comment-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  
    width: 100%;
    min-width: 0;
  
    gap: var(--ayw-space-2);
  }
  
  .ayw-comment-author {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: baseline;
  
    min-width: 0;
  
    gap:
      var(--ayw-space-1)
      var(--ayw-space-2);
  }
  
  .ayw-comment-author-name {
    display: inline-block;
  
    min-width: 0;
    max-width: 100%;
  
    overflow: hidden;
  
    color: var(--ayw-text);
  
    font-size: var(--ayw-font-size-sm);
    font-weight: var(--ayw-font-weight-semibold);
    line-height: var(--ayw-line-height-tight);
  
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  a.ayw-comment-author-name:hover {
    color: var(--ayw-primary);
  
    text-decoration: none;
  }
  
  a.ayw-comment-author-name:focus-visible {
    outline: 3px solid var(--ayw-focus-ring);
    outline-offset: 2px;
  
    border-radius: var(--ayw-radius-xs);
  }
  
  .ayw-comment-time {
    flex: 0 0 auto;
  
    color: var(--ayw-text-muted);
  
    font-size: var(--ayw-font-size-sm);
    line-height: var(--ayw-line-height-tight);
  
    white-space: nowrap;
  }
  
  
  /* ==========================================================
     CONTEÚDO
     ========================================================== */
  
  .ayw-comment-content {
    width: 100%;
    min-width: 0;
  
    margin-top: var(--ayw-space-2);
  
    color: var(--ayw-text-soft);
  
    font-size: var(--ayw-font-size-sm);
    line-height: var(--ayw-line-height-relaxed);
  
    overflow-wrap: anywhere;
  }
  
  .ayw-comment-content > :first-child {
    margin-top: 0;
  }
  
  .ayw-comment-content > :last-child {
    margin-bottom: 0;
  }
  
  .ayw-comment-content p {
    margin:
      0
      0
      var(--ayw-space-1);
  }
  
  .ayw-comment-content a {
    color: var(--ayw-primary);
  
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  
  .ayw-comment-content a:hover {
    color: var(--ayw-primary-hover);
  }
  
  .ayw-comment-content a:focus-visible {
    outline: 3px solid var(--ayw-focus-ring);
    outline-offset: 2px;
  
    border-radius: var(--ayw-radius-xs);
  }
  
  
  /* ==========================================================
     MENU
     ========================================================== */
  
  .ayw-comment-menu {
    position: relative;
  
    flex: 0 0 auto;
  }
  
  .ayw-comment-menu > summary {
    cursor: pointer;
  
    list-style: none;
  
    -webkit-tap-highlight-color: transparent;
  }
  
  .ayw-comment-menu > summary::-webkit-details-marker {
    display: none;
  }
  
  .ayw-comment-menu > summary::marker {
    content: "";
  }
  
  .ayw-comment-menu-panel {
    position: absolute;
  
    top:
      calc(
        100% +
        var(--ayw-space-1)
      );
  
    right: 0;
  
    z-index: var(--ayw-z-dropdown);
  
    display: flex;
    flex-direction: column;
  
    min-width: 9rem;
  
    gap: var(--ayw-space-1);
  
    padding: var(--ayw-space-2);
  
    border: 1px solid var(--ayw-border);
    border-radius: var(--ayw-radius-md);
  
    background: var(--ayw-surface);
  
    box-shadow: var(--ayw-shadow-lg);
  }
  
  .ayw-comment-menu-panel form {
    width: 100%;
  
    margin: 0;
  }
  
  .ayw-comment-menu-action {
    justify-content: flex-start;
  
    width: 100%;
  }
  
  
  /* ==========================================================
     AÇÕES
     ========================================================== */
  
  .ayw-comment-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  
    width: 100%;
    min-width: 0;
  
    gap: var(--ayw-space-2);
  
    margin-top: var(--ayw-space-2);
  }
  
  .ayw-comment-actions form {
    margin: 0;
  }
  
  .ayw-comment-action {
    padding-inline: 0;
  }
  
  
  /* ==========================================================
     SUBRESPOSTAS
     ========================================================== */
  
  .ayw-subreplies {
    display: flex;
    flex-direction: column;
  
    width: 100%;
    min-width: 0;
  
    margin-top: var(--ayw-space-2);
    padding-left: var(--ayw-space-4);
  
    border-left: 2px solid var(--ayw-border);
  }
  
  .ayw-comment-subreply {
    gap: var(--ayw-space-3);
  
    padding-block: var(--ayw-space-2);
  }
  
  .ayw-comment-subreply:last-child {
    padding-bottom: 0;
  
    border-bottom: 0;
  }
  
  
  /* ==========================================================
     FORMULÁRIO DE NOVO COMENTÁRIO
     ========================================================== */
  
  .ayw-comment-form {
    display: grid;
  
    grid-template-columns:
      auto
      minmax(0, 1fr);
  
    align-items: flex-start;
  
    width: 100%;
    min-width: 0;
  
    gap: var(--ayw-space-2);
  
    margin-top: var(--ayw-space-2);
  }
  
  .ayw-comment-form-avatar {
    flex: 0 0 auto;
  
    margin-top: var(--ayw-space-1);
  }
  
  .ayw-comment-form-main {
    width: 100%;
    min-width: 0;
  }
  
  .ayw-comment-input {
    display: block;
  
    width: 100%;
    min-width: 0;
    min-height: 3.25rem;
    max-height: 10rem;
  
    line-height: var(--ayw-line-height-normal);
  
    resize: vertical;
  }
  
  .ayw-comment-form-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  
    width: 100%;
    min-width: 0;
  
    gap: var(--ayw-space-2);
  
    margin-top: var(--ayw-space-2);
  }
  
  .ayw-comment-counter {
    flex: 0 0 auto;
  
    color: var(--ayw-text-muted);
  
    font-size: var(--ayw-font-size-xs);
    line-height: 1;
  
    white-space: nowrap;
  }
  
  .ayw-comment-counter.is-warning {
    color: var(--ayw-warning);
  }
  
  .ayw-comment-counter.is-danger {
    color: var(--ayw-danger);
  }
  
  .ayw-comment-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  
    gap: var(--ayw-space-2);
  }
  
  
  /* ==========================================================
     FORMULÁRIO DE SUBRESPOSTA
     ========================================================== */
  
  .ayw-subreply-form-panel {
    width: 100%;
    min-width: 0;
  
    margin-top: var(--ayw-space-2);
    padding: var(--ayw-space-2);
  
    border: 1px solid var(--ayw-border);
    border-radius: var(--ayw-radius-md);
  
    background: var(--ayw-bg-soft);
  }
  
  .ayw-subreply-form-panel[hidden] {
    display: none;
  }
  
  .ayw-subreply-form {
    width: 100%;
    min-width: 0;
  }
  
  .ayw-subreply-input {
    display: block;
  
    width: 100%;
    min-width: 0;
    min-height: 3.25rem;
    max-height: 10rem;
  
    line-height: var(--ayw-line-height-normal);
  
    resize: vertical;
  }
  
  .ayw-subreply-form-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  
    width: 100%;
    min-width: 0;
  
    gap: var(--ayw-space-2);
  
    margin-top: var(--ayw-space-2);
  }
  
  .ayw-subreply-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  
    gap: var(--ayw-space-2);
  }
  
  
  /* ==========================================================
     EDIÇÃO
     ========================================================== */
  
  .ayw-comment-editor {
    width: 100%;
    min-width: 0;
  
    margin-top: var(--ayw-space-2);
    padding: var(--ayw-space-2);
  
    border: 1px solid var(--ayw-border);
    border-radius: var(--ayw-radius-md);
  
    background: var(--ayw-bg-soft);
  }
  
  .ayw-comment-editor[hidden] {
    display: none;
  }
  
  .ayw-comment-editor-input {
    display: block;
  
    width: 100%;
    min-width: 0;
    min-height: 4rem;
    max-height: 12rem;
  
    line-height: var(--ayw-line-height-normal);
  
    resize: vertical;
  }
  
  .ayw-comment-editor-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  
    width: 100%;
    min-width: 0;
  
    gap: var(--ayw-space-2);
  
    margin-top: var(--ayw-space-2);
  }
  
  .ayw-comment-editor-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  
    gap: var(--ayw-space-2);
  }
  
  
  /* ==========================================================
     ESTADOS DE ENVIO
     ========================================================== */
  
  .ayw-comment-form[aria-busy="true"],
  .ayw-subreply-form[aria-busy="true"],
  .ayw-comment-editor[aria-busy="true"] {
    cursor: progress;
  }
  
  .ayw-comment-form[aria-busy="true"]
  .ayw-comment-form-main,
  .ayw-subreply-form[aria-busy="true"],
  .ayw-comment-editor[aria-busy="true"] {
    pointer-events: none;
  
    opacity: 0.65;
  }
  
  
  /* ==========================================================
     ESTADO VAZIO
     ========================================================== */
  
  .ayw-comments-empty {
    min-height: 5rem;
  }
  
  
  /* ==========================================================
     CELULAR
     ========================================================== */
  
  @media (max-width: 35.999rem) {
    .ayw-comments-list[data-scroll="true"] {
      max-height: none;
  
      padding-right: 0;
  
      overflow: visible;
    }
  
    .ayw-comment-header {
      gap: var(--ayw-space-1);
    }
  
    .ayw-comment-author {
      gap: var(--ayw-space-1);
    }
  
    .ayw-subreplies {
      padding-left: var(--ayw-space-2);
    }
  
    .ayw-comment-menu-panel {
      min-width: 8.5rem;
    }
  }
  
  
  /* ==========================================================
     CELULAR COMPACTO
     ========================================================== */
  
  @media (max-width: 23.4375rem) {
    .ayw-comment,
    .ayw-comment-form {
      gap: var(--ayw-space-2);
    }
  
    .ayw-comment-author {
      align-items: flex-start;
      flex-direction: column;
    }
  
    .ayw-comment-time {
      white-space: normal;
    }
  
    .ayw-comment-form {
      grid-template-columns:
        minmax(0, 1fr);
    }
  
    .ayw-comment-form-avatar {
      display: none;
    }
  
    .ayw-comment-form-footer,
    .ayw-subreply-form-footer,
    .ayw-comment-editor-footer {
      align-items: stretch;
      flex-direction: column;
    }
  
    .ayw-comment-form-actions,
    .ayw-subreply-form-actions,
    .ayw-comment-editor-actions {
      width: 100%;
    }
  
    .ayw-comment-form-actions .ayw-btn,
    .ayw-subreply-form-actions .ayw-btn,
    .ayw-comment-editor-actions .ayw-btn {
      flex: 1 1 auto;
    }
  }
  
  
  /* ==========================================================
     MOVIMENTO REDUZIDO
     ========================================================== */
  
  @media (prefers-reduced-motion: reduce) {
    .ayw-comments-list {
      scroll-behavior: auto;
    }
  }