/* answers.css — карточки предложек, claim/release, модалка анклейма. */

  /* answer cards */
  .answer-card{
    border-radius:var(--radius-md);
    padding:20px 22px;
    margin-bottom:14px;
    position:relative;
    transition:transform 0.25s cubic-bezier(0.4,0,0.2,1), box-shadow 0.25s ease;
  }
  .answer-card:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(0,0,0,0.28);
  }
  .answer-card.completed{
    box-shadow:inset 0 0 0 1px var(--ok-c);
  }

  .answer-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
    padding-bottom:12px;
    border-bottom:1px solid var(--glass-border);
    gap:10px;
    flex-wrap:wrap;
  }
  .answer-right{
    display:flex;
    align-items:center;
    gap:8px;
  }

  .answer-date{
    font-family:var(--font-mono);
    font-size:11px;
    color:var(--muted-2);
  }
  .answer-command{
    font-family:var(--font-body);
    font-size:15px;
    font-weight:600;
    color:var(--text);
    margin-bottom:14px;
  }
  .answer-card.completed .answer-command{color:var(--ok-c);}

  .answer-user{
    font-family:var(--font-body);
    font-size:13px;
    font-weight:600;
    color:var(--text);
  }
  .answer-card.completed .answer-user{color:var(--ok-c);}

  /* платформенный бейдж (twitch/youtube) — единый акцентный вид, различие
     только в иконке/тексте (см. .platform-badge в base.css); .platform-icon
     оставлен как обёртка, которую генерирует answers.js, но больше не красится
     по платформе */
  .platform-icon{
    display:flex;
    align-items:center;
    flex-shrink:0;
    color:var(--accent);
  }
  .answer-card.completed .platform-icon{color:var(--ok-c);}
  .answer-card.completed .platform-badge{color:var(--ok-c); border-color:var(--ok-c); background:var(--ok-dim);}
  .platform-icon svg{
    width:16px;
    height:16px;
    display:block;
  }

  .answer-checkbox{
    display:flex;
    align-items:center;
    gap:6px;
  }
  .answer-checkbox label{
    font-family:var(--font-body);
    font-size:11px;
    font-weight:600;
    letter-spacing:0.02em;
    color:var(--muted);
    cursor:pointer;
    text-transform:uppercase;
    transition:color 0.3s ease;
  }
  .answer-card.completed .answer-checkbox label{color:var(--ok-c);}
  .answer-checkbox input{
    appearance:none;
    -webkit-appearance:none;
    width:17px;
    height:17px;
    border:2px solid var(--muted-2);
    border-radius:6px;
    cursor:pointer;
    background:transparent;
    position:relative;
    transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink:0;
  }
  .answer-checkbox input:hover{
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-dim);
  }
  .answer-checkbox input:checked{
    background:var(--ok-c);
    border-color:var(--ok-c);
    animation:checkBounce 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23100e17' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 10px 10px;
    background-position: center;
    background-repeat: no-repeat;
  }
  .answer-checkbox input:checked:hover{
    border-color:var(--ok-c);
    box-shadow:0 0 0 3px var(--ok-dim);
  }
  @keyframes checkBounce{
    0%{ transform:scale(1); }
    30%{ transform:scale(1.2); }
    60%{ transform:scale(0.95); }
    100%{ transform:scale(1); }
  }

  .answer-delete{
    display:flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    padding:0;
    border:1px solid var(--glass-border);
    border-radius:var(--radius-sm);
    background:rgba(255,255,255,0.04);
    color:var(--muted-2);
    cursor:pointer;
    flex-shrink:0;
    transition:color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.15s cubic-bezier(0.4,0,0.2,1);
  }
  .answer-delete svg{width:14px; height:14px;}
  .answer-delete:hover{
    color:var(--ban-c);
    border-color:rgba(239,123,143,0.4);
    background:var(--ban-dim);
  }
  .answer-delete:active{transform:scale(0.9);}

  .answer-comment-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    padding:0;
    border:1px solid var(--glass-border);
    border-radius:var(--radius-sm);
    background:rgba(255,255,255,0.04);
    color:var(--muted-2);
    cursor:pointer;
    flex-shrink:0;
    transition:color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.15s cubic-bezier(0.4,0,0.2,1);
  }
  .answer-comment-btn svg{width:14px; height:14px;}
  .answer-comment-btn:hover{
    color:var(--ok-c);
    border-color:rgba(127,224,184,0.4);
    background:var(--ok-dim);
  }
  .answer-comment-btn:active{transform:scale(0.9);}

  .answer-field{
    font-size:14px;
    margin-bottom:10px;
    line-height:1.5;
  }
  .answer-field:last-child{margin-bottom:0;}
  .answer-label{
    font-family:var(--font-body);
    font-size:11px;
    font-weight:600;
    letter-spacing:0.03em;
    color:var(--muted-2);
    text-transform:uppercase;
    margin-bottom:4px;
  }
  .answer-value{color:var(--text);}

  .answer-comment{
    margin-top:12px;
    padding:10px 12px;
    background:var(--ok-dim);
    border:1px solid rgba(127, 224, 184, 0.3);
    border-radius:var(--radius-sm);
  }
  .answer-comment .answer-label{margin-bottom:6px;}
  .answer-comment-author{
    font-weight:400;
    color:var(--muted);
    font-size:11px;
  }
  .answer-comment-text{
    font-size:13.5px;
    color:var(--text);
    line-height:1.5;
    word-break:break-word;
  }

  /* claim / release — footer of the card */
  .answer-claim-row{
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid var(--glass-border);
    animation:fade 0.25s ease;
  }
  .answer-claim-btn{
    font-family:var(--font-body);
    font-size:13px;
    font-weight:700;
    letter-spacing:0.02em;
    padding:10px 16px;
    border-radius:var(--radius-sm);
    border:1px solid rgba(242,193,105,0.4);
    color:var(--mute-c);
    background:var(--mute-dim);
    cursor:pointer;
    width:100%;
    transition:all 0.2s ease;
  }
  .answer-claim-btn:hover{
    background:var(--mute-c);
    color:#241c0a;
  }
  .answer-claim-btn:active{transform:scale(0.97);}

  .answer-claimed-note{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    font-family:var(--font-body);
    font-size:13px;
    font-weight:500;
    color:var(--mute-c);
    background:var(--mute-dim);
    border:1px solid rgba(242,193,105,0.4);
    border-radius:var(--radius-sm);
    padding:9px 14px;
  }
  .answer-release-btn{
    font-family:var(--font-body);
    font-size:12px;
    font-weight:600;
    background:transparent;
    border:1px solid var(--mute-c);
    color:var(--mute-c);
    border-radius:var(--radius-sm);
    padding:6px 13px;
    cursor:pointer;
    transition:all 0.2s ease;
  }
  .answer-release-btn:hover{
    background:var(--mute-c);
    color:#241c0a;
  }
  .answer-release-btn:active{transform:scale(0.96);}

  .answers-container{animation:fade 0.25s ease;}

  /* Мягкая вспышка на карточке, которую только что обновил ДРУГОЙ модератор через поллинг */
  @keyframes liveUpdate{
    0%{ box-shadow:0 0 0 2px var(--accent); }
    100%{ box-shadow:0 0 0 0 transparent; }
  }

  /* unclaim-notification modal — stack of released items */
  .unclaim-list{
    text-align:left;
    max-height:220px;
    overflow-y:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
    margin-bottom:18px;
    border:1px solid var(--glass-border);
    border-radius:var(--radius-md);
  }
  .unclaim-list::-webkit-scrollbar{display:none;}
  .unclaim-list-item{
    padding:10px 12px;
    font-family:var(--font-body);
    font-size:12.5px;
  }
  .unclaim-list-item + .unclaim-list-item{border-top:1px solid var(--glass-border);}
  .unclaim-list-item .u-user{color:var(--accent); font-weight:700;}
  .unclaim-list-item .u-command{color:var(--muted);}

  /* ---- Модалка комментария ---- */
  #comment-modal-overlay textarea{
    width:100%;
    font-family:var(--font-body);
    font-size:13.5px;
    padding:12px 14px;
    border:1px solid var(--glass-border);
    border-radius:var(--radius-sm);
    background:rgba(255,255,255,0.04);
    color:var(--text);
    resize:vertical;
    outline:none;
    transition:border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing:border-box;
    margin-bottom:16px;
  }
  #comment-modal-overlay textarea:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-dim);
  }
  /* На мобильных устройствах убираем resize (не работает на touch) и фиксируем высоту */
  @media (max-width: 768px){
    #comment-modal-overlay textarea{
      resize:none;
      min-height:120px;
    }
  }
  .modal-actions{
    display:flex;
    gap:10px;
    justify-content:flex-end;
  }
  .modal-cancel{
    font-family:var(--font-body);
    font-size:12px;
    font-weight:700;
    letter-spacing:0.02em;
    padding:9px 16px;
    border-radius:var(--radius-sm);
    border:1px solid var(--glass-border);
    color:var(--muted);
    background:transparent;
    cursor:pointer;
    transition:opacity 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .modal-cancel:hover{
    color:var(--text);
    border-color:var(--muted);
  }
  .modal-cancel:active{opacity:0.7;}