/* ============================================================
 * Comments Section Styles
 * ============================================================ */

.comments-section {
  margin-top: 60px;
  padding: 32px;
  background: var(--color-white, #ffffff);
  border-radius: var(--radius-lg, 14px);
  border: 1px solid var(--color-gray-200, #e5e7eb);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
}

.comments-title {
  margin: 0 0 24px 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-navy-800, #0A2540);
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-gold-500, #E8A838);
  display: inline-block;
}

/* Loading */
.comments-loading {
  padding: 32px;
  text-align: center;
  color: var(--color-gray-500, #6b7280);
  font-size: 14px;
}

.comments-loading.is-error {
  color: var(--color-red-500, #dc2626);
}

/* Diagnose button in error state */
.comments-diagnose-btn {
  margin-left: 12px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-red-500, #dc2626);
  background: transparent;
  border: 1px solid var(--color-red-300, #fca5a5);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.comments-diagnose-btn:hover {
  background: var(--color-red-50, #fef2f2);
  border-color: var(--color-red-500, #dc2626);
}

/* Diagnostics report */
.comments-loading.is-diagnostics {
  color: inherit;
  text-align: left;
  padding: 0;
}

.comments-diagnostics {
  background: var(--color-gray-50, #f9fafb);
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: var(--radius-md, 10px);
  padding: 20px;
}

.comments-diagnostics-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-navy-800, #0A2540);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-gold-500, #E8A838);
  display: inline-block;
}

.comments-diagnostics-meta {
  background: #fff;
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--color-gray-600, #4b5563);
}

.comments-diagnostics-meta div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.comments-diagnostics-meta span {
  flex-shrink: 0;
  min-width: 150px;
  font-weight: 500;
  color: var(--color-gray-500, #6b7280);
}

.comments-diagnostics-meta code {
  font-family: 'SF Mono', Consolas, Monaco, monospace;
  font-size: 12px;
  background: var(--color-gray-100, #f3f4f6);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--color-blue-700, #1D6FB8);
  word-break: break-all;
}

.comments-diagnostics-tests {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.comments-diagnostics-test {
  background: #fff;
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
}

.comments-diagnostics-test.is-fail {
  border-left: 3px solid var(--color-red-500, #dc2626);
}

.comments-diagnostics-test.is-pass {
  border-left: 3px solid var(--color-green-500, #10b981);
}

.comments-diagnostics-test-name {
  font-weight: 600;
  color: var(--color-navy-800, #0A2540);
  margin-bottom: 4px;
}

.comments-diagnostics-test-detail {
  color: var(--color-gray-600, #4b5563);
  font-size: 12px;
  margin-bottom: 4px;
}

.comments-diagnostics-test-cause {
  color: var(--color-amber-700, #b45309);
  font-size: 12px;
  background: #fffbeb;
  padding: 6px 10px;
  border-radius: 6px;
  margin-top: 6px;
}

.comments-diagnostics-footer {
  font-size: 12px;
  color: var(--color-gray-500, #6b7280);
  line-height: 1.8;
  padding-top: 12px;
  border-top: 1px dashed var(--color-gray-200, #e5e7eb);
}

.comments-diagnostics-footer p {
  margin: 0 0 4px 0;
}

.comments-diagnostics-footer code {
  font-family: 'SF Mono', Consolas, Monaco, monospace;
  font-size: 11px;
  background: var(--color-gray-100, #f3f4f6);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--color-blue-700, #1D6FB8);
}

/* Comments List */
.comments-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 32px;
}

.comment-item {
  display: flex;
  gap: 14px;
  padding: 16px;
  background: var(--color-gray-50, #f9fafb);
  border-radius: var(--radius-md, 10px);
  transition: background 0.2s;
}

.comment-item:hover {
  background: var(--color-gray-100, #f3f4f6);
}

.comment-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-blue-600, #1D6FB8), var(--color-navy-800, #0A2540));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
}

.comment-body {
  flex: 1;
  min-width: 0;
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.comment-name {
  font-weight: 600;
  color: var(--color-navy-800, #0A2540);
  font-size: 14px;
}

 .comment-time {
   font-size: 12px;
   color: var(--color-gray-400, #9ca3af);
 }

 .comment-content {
   font-size: 14px;
   line-height: 1.7;
   color: var(--color-gray-700, #374151);
   word-break: break-word;
   white-space: pre-wrap;
 }

 /* Comment Footer Actions */
 .comment-footer {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-top: 10px;
   padding-top: 8px;
   border-top: 1px solid var(--color-gray-200, #e5e7eb);
 }

  .comment-like-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: transparent;
    border: 1px solid var(--color-gray-300, #d1d5db);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-gray-500, #6b7280);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    line-height: 1;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  .comment-like-btn svg {
    display: block;
    flex-shrink: 0;
  }

 .comment-like-btn:hover:not(:disabled) {
   border-color: var(--color-blue-400, #60a5fa);
   color: var(--color-blue-600, #1D6FB8);
   background: var(--color-blue-50, #eff6ff);
 }

 .comment-like-btn:active:not(:disabled) {
   transform: scale(0.95);
 }

 .comment-like-btn.is-liked {
   border-color: var(--color-blue-500, #3b82f6);
   color: var(--color-blue-600, #1D6FB8);
   background: var(--color-blue-50, #eff6ff);
 }

 .comment-like-btn.is-liked svg {
   fill: var(--color-blue-600, #1D6FB8);
 }

 .comment-like-btn.is-animating {
   animation: likeBounce 0.3s ease;
 }

 @keyframes likeBounce {
   0% { transform: scale(1); }
   50% { transform: scale(1.2); }
   100% { transform: scale(1); }
 }

  .comment-like-count {
    font-variant-numeric: tabular-nums;
    min-width: 16px;
    text-align: center;
    display: inline-block;
  }

 /* Privacy notice for comment form */
 .comments-privacy-notice {
   margin-top: 10px;
   padding: 8px 12px;
   background: var(--color-gray-50, #f9fafb);
   border-radius: 8px;
   font-size: 12px;
   color: var(--color-gray-500, #6b7280);
   line-height: 1.6;
   border: 1px solid var(--color-gray-100, #f3f4f6);
 }

 .comments-privacy-notice a {
   color: var(--color-blue-600, #1D6FB8);
   text-decoration: none;
   border-bottom: 1px dashed rgba(29, 111, 184, 0.4);
 }

 .comments-privacy-notice a:hover {
   border-bottom-style: solid;
 }

/* Empty state */
.comments-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--color-gray-500, #6b7280);
  margin-bottom: 32px;
}

.comments-empty-icon {
  font-size: 40px;
  margin-bottom: 12px;
  opacity: 0.6;
}

.comments-empty p {
  margin: 0;
  font-size: 14px;
}

/* Comment Form */
.comments-form {
  border-top: 1px solid var(--color-gray-200, #e5e7eb);
  padding-top: 24px;
}

.comments-form-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-navy-800, #0A2540);
  margin-bottom: 16px;
}

 .comments-form-row {
   margin-bottom: 14px;
   position: relative;
 }

 .comments-input-wrapper {
   position: relative;
 }

.comments-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--color-gray-300, #d1d5db);
  border-radius: var(--radius-md, 10px);
  font-size: 14px;
  font-family: inherit;
  color: var(--color-gray-800, #1f2937);
  background: var(--color-white, #fff);
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.comments-input:focus {
  outline: none;
  border-color: var(--color-blue-600, #1D6FB8);
  box-shadow: 0 0 0 3px rgba(29, 111, 184, 0.12);
}

.comments-input::placeholder {
  color: var(--color-gray-400, #9ca3af);
}

textarea.comments-input {
  resize: vertical;
  min-height: 90px;
  line-height: 1.6;
}

.comments-form-error {
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-red-500, #dc2626);
}

/* Honeypot - invisible to humans */
.comments-hp-wrap {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.comments-hp {
  opacity: 0;
  pointer-events: none;
}

/* Form footer */
.comments-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.comments-form-msg {
  font-size: 13px;
  flex: 1;
}

.comments-form-msg.is-success {
  color: var(--color-green-600, #059669);
}

.comments-form-msg.is-error {
  color: var(--color-red-500, #dc2626);
}

.comments-submit-btn {
  flex-shrink: 0;
  padding: 10px 24px;
  background: var(--color-navy-800, #0A2540);
  color: #fff;
  border: none;
  border-radius: var(--radius-md, 10px);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  font-family: inherit;
}

.comments-submit-btn:hover:not(:disabled) {
  background: var(--color-blue-600, #1D6FB8);
}

.comments-submit-btn:active:not(:disabled) {
  transform: translateY(1px);
}

 .comments-submit-btn:disabled {
   opacity: 0.6;
   cursor: not-allowed;
 }

 /* Comment form toolbar */
 .comments-form-toolbar {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-top: 8px;
   position: relative;
 }

 .comments-toolbar-spacer {
   flex: 1;
 }

 /* Emoji Button */
 .comments-emoji-btn {
   display: inline-flex !important;
   align-items: center;
   gap: 6px;
   height: 32px;
   padding: 0 10px;
   background: var(--color-gray-50, #f9fafb);
   border: 1px solid var(--color-gray-200, #e5e7eb);
   border-radius: 8px;
   color: var(--color-gray-500, #6b7280);
   cursor: pointer;
   transition: all 0.2s;
   font-family: inherit;
   font-size: 13px;
   font-weight: 500;
   z-index: 10;
   visibility: visible;
   opacity: 1;
   white-space: nowrap;
 }

 .comments-emoji-btn:hover {
   color: var(--color-gold-600, #ca8a04);
   background: var(--color-gold-50, #fffbeb);
   border-color: var(--color-gold-300, #F5D28A);
 }

 .comments-emoji-btn:active {
   transform: scale(0.95);
 }

 .comments-emoji-btn svg {
   display: block;
   width: 16px;
   height: 16px;
   flex-shrink: 0;
 }

 .comments-emoji-btn-text {
   display: inline;
 }

 .comments-emoji-btn:hover {
   color: var(--color-gold-600, #ca8a04);
   background: var(--color-gold-50, #fffbeb);
 }

 .comments-emoji-btn:active {
   transform: scale(0.9);
 }

 /* Emoji Picker */
 .comments-emoji-picker {
   position: absolute;
   left: 0;
   top: calc(100% + 6px);
   width: 280px;
   background: var(--color-white, #fff);
   border: 1px solid var(--color-gray-300, #d1d5db);
   border-radius: var(--radius-md, 12px);
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
   z-index: 9999;
   overflow: hidden;
   animation: emojiPickerIn 0.15s ease-out;
 }

 @keyframes emojiPickerIn {
   from {
     opacity: 0;
     transform: translateY(4px) scale(0.98);
   }
   to {
     opacity: 1;
     transform: translateY(0) scale(1);
   }
 }

 .comments-emoji-picker-header {
   padding: 10px 14px;
   font-size: 13px;
   font-weight: 600;
   color: var(--color-navy-800, #0A2540);
   border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
   background: var(--color-gray-50, #f9fafb);
 }

 .comments-emoji-tabs {
   display: flex;
   gap: 2px;
   padding: 6px 8px;
   border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
   background: var(--color-gray-50, #f9fafb);
 }

 .comments-emoji-tab {
   flex: 1;
   padding: 6px;
   background: transparent;
   border: none;
   border-radius: 6px;
   font-size: 16px;
   cursor: pointer;
   transition: all 0.15s;
   font-family: inherit;
   line-height: 1;
 }

 .comments-emoji-tab:hover {
   background: var(--color-gray-200, #e5e7eb);
 }

 .comments-emoji-tab.is-active {
   background: var(--color-white, #fff);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }

 .comments-emoji-grid {
   display: grid;
   grid-template-columns: repeat(8, 1fr);
   gap: 2px;
   padding: 8px;
   max-height: 200px;
   overflow-y: auto;
 }

 .comments-emoji-item {
   aspect-ratio: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   background: transparent;
   border: none;
   border-radius: 6px;
   cursor: pointer;
   transition: all 0.1s;
   padding: 0;
   font-family: inherit;
   line-height: 1;
 }

 .comments-emoji-item:hover {
   background: var(--color-blue-50, #eff6ff);
   transform: scale(1.15);
 }

 .comments-emoji-item:active {
   transform: scale(0.95);
 }

 /* Scrollbar for emoji grid */
 .comments-emoji-grid::-webkit-scrollbar {
   width: 6px;
 }
 .comments-emoji-grid::-webkit-scrollbar-track {
   background: transparent;
 }
 .comments-emoji-grid::-webkit-scrollbar-thumb {
   background: var(--color-gray-300, #d1d5db);
   border-radius: 3px;
 }
 .comments-emoji-grid::-webkit-scrollbar-thumb:hover {
   background: var(--color-gray-400, #9ca3af);
 }

 /* Responsive */
 @media (max-width: 768px) {
   .comments-section {
     margin-top: 40px;
     padding: 20px;
   }

   .comments-title {
     font-size: 18px;
   }

   .comments-form-footer {
     flex-direction: column;
     align-items: stretch;
   }

   .comments-submit-btn {
     width: 100%;
   }

   .comments-emoji-picker {
     width: calc(100vw - 48px);
     max-width: 280px;
     left: 0;
     right: auto;
   }

   .comments-emoji-grid {
     grid-template-columns: repeat(8, 1fr);
     max-height: 240px;
   }

   .comments-emoji-item {
     font-size: 22px;
   }

   .comments-emoji-btn {
     bottom: 42px;
   }

   .comment-item {
     padding: 12px;
     gap: 10px;
   }

   .comment-avatar {
     width: 34px;
     height: 34px;
     font-size: 13px;
   }
 }

 @media (max-width: 480px) {
   .comments-emoji-picker {
     width: calc(100vw - 40px);
     left: 0;
     right: auto;
   }

   .comments-emoji-grid {
     grid-template-columns: repeat(7, 1fr);
   }

   .comments-emoji-btn-text {
     display: none;
   }
 }