/* =====================================================
   TheImlers Threads — tit-comments.css  v1.0.0
   ===================================================== */

/* ── Variables ── */
:root {
  --tit-radius:       10px;
  --tit-radius-sm:    6px;
  --tit-gap:          16px;
  --tit-font:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Light mode */
  --tit-bg:           #ffffff;
  --tit-surface:      #f7f7f8;
  --tit-surface-2:    #efefef;
  --tit-border:       #e1e4e8;
  --tit-text:         #1a1a1a;
  --tit-text-muted:   #6b7280;
  --tit-accent:       #4f46e5;
  --tit-accent-hover: #4338ca;
  --tit-google:       #4285F4;
  --tit-mention:      #6366f1;
  --tit-shadow:       0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --tit-shadow-md:    0 4px 12px rgba(0,0,0,.10);
}

@media (prefers-color-scheme: dark) {
  :root {
    --tit-bg:           #1c1c1e;
    --tit-surface:      #2c2c2e;
    --tit-surface-2:    #3a3a3c;
    --tit-border:       #3a3a3c;
    --tit-text:         #f2f2f7;
    --tit-text-muted:   #8e8e93;
    --tit-accent:       #7c7af9;
    --tit-accent-hover: #9591f9;
    --tit-google:       #8ab4f8;
    --tit-mention:      #a5b4fc;
    --tit-shadow:       0 1px 3px rgba(0,0,0,.3);
    --tit-shadow-md:    0 4px 12px rgba(0,0,0,.4);
  }
}

/* ── Section wrapper ── */
.tit-comments-section {
  font-family: var(--tit-font);
  color: var(--tit-text);
  max-width: 740px;
  margin: 40px auto 0;
  padding: 0 0 40px;
}

/* ── Header ── */
.tit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--tit-border);
}

.tit-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tit-icon { font-size: 1.2rem; }

.tit-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tit-accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  min-width: 24px;
}

/* ── Sort buttons ── */
.tit-sort-group {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--tit-surface);
  border: 1px solid var(--tit-border);
  border-radius: var(--tit-radius-sm);
  padding: 4px;
}

.tit-sort-label {
  font-size: 0.78rem;
  color: var(--tit-text-muted);
  padding: 0 4px;
}

.tit-sort-btn {
  background: transparent;
  border: none;
  border-radius: calc(var(--tit-radius-sm) - 2px);
  padding: 5px 12px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--tit-text-muted);
  cursor: pointer;
  transition: background .15s, color .15s;
  font-family: var(--tit-font);
}
.tit-sort-btn:hover { background: var(--tit-surface-2); color: var(--tit-text); }
.tit-sort-active   { background: var(--tit-bg) !important; color: var(--tit-accent) !important; box-shadow: var(--tit-shadow); }

/* ── Notices ── */
.tit-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: var(--tit-radius);
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 20px;
}
.tit-notice--disabled { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.tit-notice--locked   { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }

@media (prefers-color-scheme: dark) {
  .tit-notice--disabled { background: #2d1515; color: #fca5a5; border-color: #7f1d1d; }
  .tit-notice--locked   { background: #2d2510; color: #fcd34d; border-color: #78350f; }
}

/* ── Auth box ── */
.tit-auth-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: var(--tit-surface);
  border: 1px dashed var(--tit-border);
  border-radius: var(--tit-radius);
  padding: 28px 24px;
  text-align: center;
  margin-bottom: 24px;
}

.tit-auth-box p {
  margin: 0;
  color: var(--tit-text-muted);
  font-size: 0.9rem;
}

.tit-btn-google {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--tit-google);
  color: #fff;
  border: none;
  border-radius: var(--tit-radius-sm);
  padding: 10px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, transform .1s;
  font-family: var(--tit-font);
}
.tit-btn-google:hover { background: #3367d6; transform: translateY(-1px); color: #fff; text-decoration: none; }

.tit-google-logo {
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #4285F4;
  flex-shrink: 0;
}

/* ── Compose box ── */
.tit-compose {
  background: var(--tit-bg);
  border: 1px solid var(--tit-border);
  border-radius: var(--tit-radius);
  padding: 16px;
  margin-bottom: 24px;
  box-shadow: var(--tit-shadow);
}

.tit-compose-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.tit-compose-user-name { font-weight: 600; font-size: 0.9rem; }
.tit-compose-user-sub  { font-size: 0.78rem; color: var(--tit-text-muted); }

.tit-compose-logout {
  margin-left: auto;
  background: none;
  border: 1px solid var(--tit-border);
  border-radius: var(--tit-radius-sm);
  padding: 4px 10px;
  font-size: 0.75rem;
  color: var(--tit-text-muted);
  cursor: pointer;
  transition: border-color .15s, color .15s;
  font-family: var(--tit-font);
}
.tit-compose-logout:hover { border-color: #f87171; color: #ef4444; }

.tit-textarea {
  width: 100%;
  min-height: 90px;
  border: 1px solid var(--tit-border);
  border-radius: var(--tit-radius-sm);
  padding: 10px 12px;
  font-family: var(--tit-font);
  font-size: 0.9rem;
  color: var(--tit-text);
  background: var(--tit-surface);
  resize: vertical;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.tit-textarea:focus {
  outline: none;
  border-color: var(--tit-accent);
  box-shadow: 0 0 0 3px rgba(79,70,229,.12);
  background: var(--tit-bg);
}
.tit-textarea::placeholder { color: var(--tit-text-muted); }

.tit-compose-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  gap: 8px;
  flex-wrap: wrap;
}

.tit-char-count { font-size: 0.75rem; color: var(--tit-text-muted); }
.tit-char-count.tit-over { color: #ef4444; }

/* ── Buttons ── */
.tit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--tit-radius-sm);
  padding: 8px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background .15s, transform .1s, opacity .15s;
  font-family: var(--tit-font);
}
.tit-btn:disabled { opacity: .5; cursor: not-allowed; }
.tit-btn:not(:disabled):hover { transform: translateY(-1px); }

.tit-btn--primary   { background: var(--tit-accent); color: #fff; }
.tit-btn--primary:not(:disabled):hover { background: var(--tit-accent-hover); }

.tit-btn--ghost {
  background: transparent;
  border: 1px solid var(--tit-border);
  color: var(--tit-text-muted);
}
.tit-btn--ghost:hover { border-color: var(--tit-accent); color: var(--tit-accent); background: transparent; }

.tit-btn--sm { padding: 5px 12px; font-size: 0.78rem; }

/* ── Avatar ── */
.tit-avatar, .tit-avatar img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--tit-surface-2);
}
.tit-avatar--sm, .tit-avatar--sm img {
  width: 28px;
  height: 28px;
}

/* ── Comment list ── */
.tit-comment-list { display: flex; flex-direction: column; gap: 4px; }

/* ── Single comment ── */
.tit-comment {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--tit-border);
  animation: tit-fadeIn .25s ease;
}
.tit-comment:last-child { border-bottom: none; }

@keyframes tit-fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tit-comment--reply {
  padding-left: 16px;
  border-left: 2px solid var(--tit-border);
  margin-left: 4px;
}

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

.tit-comment-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}

.tit-comment-author { font-weight: 700; font-size: 0.88rem; }
.tit-comment-date   { font-size: 0.75rem; color: var(--tit-text-muted); }

.tit-comment-content {
  font-size: 0.9rem;
  line-height: 1.65;
  word-break: break-word;
  color: var(--tit-text);
  margin-bottom: 8px;
}

.tit-mention {
  color: var(--tit-mention);
  font-weight: 600;
  cursor: pointer;
}
.tit-mention:hover { text-decoration: underline; }

/* ── Comment actions ── */
.tit-comment-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.tit-action-btn {
  background: none;
  border: none;
  padding: 4px 8px;
  border-radius: var(--tit-radius-sm);
  font-size: 0.78rem;
  color: var(--tit-text-muted);
  cursor: pointer;
  font-family: var(--tit-font);
  transition: background .12s, color .12s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tit-action-btn:hover { background: var(--tit-surface-2); color: var(--tit-text); }

/* ── Reaction bar ── */
.tit-reactions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.tit-reaction {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--tit-surface);
  border: 1px solid var(--tit-border);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .1s;
  font-family: var(--tit-font);
  color: var(--tit-text);
}
.tit-reaction:hover  { background: var(--tit-surface-2); transform: scale(1.08); }
.tit-reaction--mine  { background: #eef2ff; border-color: var(--tit-accent); color: var(--tit-accent); }

@media (prefers-color-scheme: dark) {
  .tit-reaction--mine { background: #1e1b4b; border-color: var(--tit-accent); color: var(--tit-accent); }
}

.tit-reaction-add {
  background: none;
  border: 1px dashed var(--tit-border);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--tit-text-muted);
  transition: border-color .12s, color .12s;
  font-family: var(--tit-font);
}
.tit-reaction-add:hover { border-color: var(--tit-accent); color: var(--tit-accent); }

/* ── Emoji picker ── */
.tit-emoji-picker {
  position: relative;
  display: inline-block;
}

.tit-emoji-panel {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  background: var(--tit-bg);
  border: 1px solid var(--tit-border);
  border-radius: var(--tit-radius);
  padding: 8px;
  display: flex;
  gap: 4px;
  box-shadow: var(--tit-shadow-md);
  z-index: 100;
  white-space: nowrap;
}

.tit-emoji-btn {
  background: none;
  border: none;
  padding: 4px 6px;
  font-size: 1.1rem;
  border-radius: var(--tit-radius-sm);
  cursor: pointer;
  transition: background .1s, transform .1s;
}
.tit-emoji-btn:hover { background: var(--tit-surface-2); transform: scale(1.25); }

/* ── Replies ── */
.tit-replies {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tit-toggle-replies {
  background: none;
  border: none;
  color: var(--tit-accent);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  font-family: var(--tit-font);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tit-toggle-replies:hover { text-decoration: underline; }

/* ── Inline reply form ── */
.tit-reply-form {
  margin-top: 10px;
  background: var(--tit-surface);
  border: 1px solid var(--tit-border);
  border-radius: var(--tit-radius);
  padding: 12px;
  animation: tit-fadeIn .2s ease;
}

.tit-reply-form .tit-textarea { min-height: 70px; }

.tit-reply-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  justify-content: flex-end;
}

/* ── Loading & Spinner ── */
.tit-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px;
  color: var(--tit-text-muted);
  font-size: 0.88rem;
}

.tit-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--tit-border);
  border-top-color: var(--tit-accent);
  border-radius: 50%;
  animation: tit-spin .6s linear infinite;
}
@keyframes tit-spin { to { transform: rotate(360deg); } }

/* ── Empty state ── */
.tit-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--tit-text-muted);
}
.tit-empty-icon { font-size: 2rem; margin-bottom: 8px; }
.tit-empty p   { margin: 0; font-size: 0.9rem; }

/* ── Load more ── */
#tit-load-more-wrap {
  text-align: center;
  margin-top: 20px;
}

/* ── Toast ── */
.tit-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--tit-text);
  color: var(--tit-bg);
  padding: 12px 20px;
  border-radius: var(--tit-radius);
  font-size: 0.85rem;
  font-weight: 500;
  box-shadow: var(--tit-shadow-md);
  z-index: 9999;
  animation: tit-slideUp .25s ease;
  font-family: var(--tit-font);
}
.tit-toast--success { background: #065f46; color: #d1fae5; }
.tit-toast--error   { background: #7f1d1d; color: #fee2e2; }

@keyframes tit-slideUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Branding ── */
.tit-branding {
  text-align: center;
  margin-top: 32px;
  font-size: 0.72rem;
  color: var(--tit-text-muted);
  opacity: .6;
}

/* ── Not configured warning ── */
.tit-not-configured {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--tit-radius);
  padding: 16px 20px;
  font-size: 0.88rem;
  color: #92400e;
  margin-bottom: 20px;
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .tit-header { flex-direction: column; align-items: flex-start; }
  .tit-compose { padding: 12px; }
  .tit-comment { gap: 8px; }
  .tit-toast   { left: 16px; right: 16px; bottom: 16px; }
}