/* ========== Sekcja komentarzy ========== */
.comments-section {
  max-width: var(--post-width);
  margin: 3em auto 2em;
  padding: 0 10px;
}

.comment-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.chat-bubble {
  background: #f5f5f5;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 15px;
  position: relative;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

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

.chat-bubble .avatar img {
  border-radius: 50%;
  width: 48px;
  height: 48px;
}

.chat-bubble .meta {
  margin-left: 10px;
  line-height: 1.2;
}

.chat-bubble .author {
  font-weight: bold;
  color: var(--accent-color);
}

.chat-bubble .date {
  font-size: 0.85em;
  color: #777;
}

.chat-bubble .comment-text {
  font-size: 1em;
  color: var(--text-color);
  margin-bottom: 10px;
}

.chat-bubble .reply {
  margin-top: 10px;
}

.chat-bubble .reply a {
  font-size: 0.9em;
  background: var(--accent-color);
  color: #fff;
  padding: 5px 12px;
  border-radius: 20px;
  text-decoration: none;
}

.chat-bubble .children {
  margin-top: 10px;
  padding-left: 20px;
  border-left: 2px solid #ddd;
}

.chat-bubble .children .chat-bubble {
  background: #fafafa;
}

.comment-replies {
  margin-top: 15px;
  margin-left: 10px;
  border-left: 2px solid #ddd;
  padding-left: 15px;
}

.comment-replies .chat-bubble {
  background: #fcfcfc;
  border: 1px solid #e0e0e0;
  font-size: 0.95em;
  padding: 12px;
  margin-bottom: 10px;
  box-shadow: none;
}

.comment-replies .chat-bubble .reply {
  display: none;
}

/* ========== Formularz komentarza (dwukolumnowy układ: 3/5 + 2/5) ========== */
.comment-respond {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 40px;
  background: #f9f9f9;
  padding: 20px;
  border-radius: 25px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  gap: 20px;
}

.comment-respond .form-left {
  flex: 0 1 60%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 300px;
}

.comment-respond .form-left h3 {
  margin: 0;
  font-size: 1.2em;
  font-weight: bold;
  color: var(--text-color);
}

.comment-respond textarea {
  resize: none;
  height: 150px;
  width: 100%;
  padding: 10px;
  border-radius: 15px;
  border: 1px solid #ccc;
  font-family: 'Montserrat', sans-serif;
  font-size: 1em;
  box-sizing: border-box;
}

.comment-respond .form-right {
  flex: 0 1 35%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 200px;
}

.comment-respond .form-right input {
  width: 100%;
  padding: 10px;
  border-radius: 15px;
  border: 1px solid #ccc;
  font-family: 'Montserrat', sans-serif;
  font-size: 1em;
  box-sizing: border-box;
}

.comment-respond .form-submit input[type="submit"] {
  background: var(--accent-color);
  color: #fff;
  border: none;
  padding: 12px 20px;
  font-size: 1em;
  font-weight: bold;
  border-radius: 25px;
  cursor: pointer;
  width: 100%;
}

.comment-respond .form-submit input[type="submit"]:hover {
  background: #ff6500;
}

.comment-respond .logged-in-as {
  font-size: 0.95em;
  color: #555;
}

.comment-respond .logged-in-as strong {
  font-weight: bold;
  color: var(--text-color);
}

.cancel-reply-link {
  font-size: 0.95em;
  margin-left: 0.5em;
  color: var(--accent-color);
  text-decoration: none;
  cursor: pointer;
}

@media (max-width: 768px) {
  .comment-respond {
    flex-direction: column;
  }

  .comment-respond .form-left,
  .comment-respond .form-right {
    flex: 1 1 100%;
  }
}

/* Stylizacja nagłówka odpowiedzi */
.comment-respond .form-left h3 {
  margin: 0;
  font-size: 1.2em;
  font-weight: bold;
  color: var(--text-color);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

#cancel-comment-reply-link {
  font-weight: normal;
  font-size: inherit;
  color: var(--accent-color);
  text-decoration: none;
  cursor: pointer;
  margin-left: 0.3em;
}

/* wymuszenie zawijania długich ciągów w dymku komentarza */
.chat-bubble .comment-text {
  /* zalecane łamanie słów jeżeli wychodzą poza kontener */
  overflow-wrap: break-word;
  /* dla lepszej kompatybilności ze starymi przeglądarkami */
  word-wrap: break-word;
  /* najbardziej „radykalne” łamanie – w dowolnym miejscu ciągu */
  word-break: break-all;
  /* upewnia się, że białe znaki (spacje, nowe linie) traktowane są normalnie */
  white-space: normal;
}



/* ===== Cognimat: unified buttons styling (comments) ===== */
.cognimat-load-more,
.chat-bubble .reply a,
.comment-respond .form-submit input[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.45rem 0.9rem;
  font-size: 0.95rem;
  line-height: 1;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: var(--accent-color, #ff8a00);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  transition: filter .2s ease, transform .02s ease-in;
  text-decoration: none; /* for <a> Reply */
  font-family: inherit;
}

/* Weights: only SEND bold */
.cognimat-load-more,
.chat-bubble .reply a { font-weight: 400; }
.comment-respond .form-submit input[type="submit"] { font-weight: 600; }

/* Hover/active/focus consistent */
.cognimat-load-more:hover,
.chat-bubble .reply a:hover,
.comment-respond .form-submit input[type="submit"]:hover {
  filter: brightness(0.92);
}

.cognimat-load-more:active,
.chat-bubble .reply a:active,
.comment-respond .form-submit input[type="submit"]:active {
  transform: translateY(1px);
}

.cognimat-load-more:focus,
.chat-bubble .reply a:focus,
.comment-respond .form-submit input[type="submit"]:focus {
  outline: 2px solid rgba(0,0,0,.15);
  outline-offset: 2px;
}

/* spacing tuning when control precedes a bubble */
.cognimat-load-more-wrap { display:block; margin:1rem 0 1.25rem; list-style:none; }
.cognimat-load-more-wrap + .chat-bubble { margin-top: 0.5rem; }



/* ===== Cognimat: unify hover color and adjust SEND sizing ===== */
/* Force same background on hover/active to avoid theme/browser overrides */
.cognimat-load-more:hover,
.cognimat-load-more:active,
.chat-bubble .reply a:hover,
.chat-bubble .reply a:active,
.comment-respond .form-submit input[type="submit"]:hover,
.comment-respond .form-submit input[type="submit"]:active {
  background: var(--accent-color, #ff8a00);
}

/* Send bigger text and height (only this one is bold) */
.comment-respond .form-submit input[type="submit"] {
  font-size: 1.05rem;   /* a bit larger */
  padding: 0.6rem 1.1rem; /* taller button */
}