/**
 * Isso comment embed — light base from official CSS, wirres overrides
 */
@import url('https://comments.wirres.net/css/isso.css');

.isso-wrap {
  clear: both;
}

.isso-comments-host * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.isso-comments-host {
  font-family: 'brevia', 'Brevia Fallback', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

hr.isso-form-rule {
  border: 0;
  border-top: 1px solid var(--color-border, #ccc);
  margin: 1.5em 0;
}

hr.isso-form-rule--top {
  margin-top: 0.25rem;
}

hr.isso-form-rule--bottom {
  margin-bottom: 0.5rem;
}

#isso-thread {
  display: flex;
  flex-direction: column;
}

#isso-thread h4.isso-thread-heading {
  display: none;
}

#isso-thread #isso-root {
  order: 2;
  margin-bottom: 2rem;
}

#isso-thread > .isso-postbox {
  order: 3;
  margin: 0;
}

#isso-thread .isso-textarea,
#isso-thread .isso-input-wrapper input,
#isso-thread .isso-post-action > input {
  font-family: 'brevia', 'Brevia Fallback', sans-serif !important;
  font-size: 1rem;
  padding: 0.65em 0.85em;
  border-radius: 0.5rem;
}

#isso-thread .isso-input-wrapper {
  margin: 0 1.5% 0.85rem 0;
}

@media screen and (min-width: 601px) {
  #isso-thread .isso-auth-section {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
  }

  /* Zeilenumbruch vor den Buttons */
  #isso-thread .isso-auth-section::after {
    content: '';
    flex-basis: 100%;
    width: 0;
    order: 1;
  }

  #isso-thread .isso-auth-section > .isso-input-wrapper {
    display: block;
    flex: 1 1 calc(33.333% - 0.75rem);
    min-width: 9rem;
    margin: 0;
    order: 0;
  }

  #isso-thread .isso-auth-section > .isso-input-wrapper input {
    width: 100%;
  }

  #isso-thread .isso-auth-section > .isso-post-action {
    float: none;
    margin: 0;
    order: 2;
    flex: 0 0 auto;
  }

  #isso-thread .isso-auth-section > .isso-post-action:first-of-type {
    margin-left: auto;
  }
}

#isso-thread .isso-input-wrapper label {
  margin-bottom: 0.4em;
  font-size: 0.9em;
}

#isso-thread .isso-textarea {
  margin-bottom: 1rem;
  min-height: 6em;
  max-height: 50vh;
  overflow-y: hidden;
  resize: none;
  box-sizing: border-box;
}

#isso-thread .isso-textarea-wrapper {
  display: block;
}

#isso-thread .isso-auth-section {
  margin-top: 0.25rem;
}

.isso-comments-host .isso-comment {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
}

.isso-comments-host .isso-comment:first-of-type {
  margin-top: 1rem;
}

#isso-thread > .isso-postbox {
  margin-top: 0.5rem;
}

#isso-thread .isso-post-action {
  margin-top: 1.25rem;
}

#isso-thread .isso-post-action > input {
  border-radius: 0.5rem;
}

.isso-comments-host .isso-avatar {
  flex: 0 0 48px;
  width: 48px;
  max-width: 48px;
}

.isso-comments-host .isso-avatar img {
  display: block;
  width: 48px;
  height: 48px;
  max-width: 48px;
  max-height: 48px;
  object-fit: cover;
  border-radius: 0.35rem;
  /* border: 1px solid rgba(0, 0, 0, 0.15); */
}

.isso-comments-host .isso-text p {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

/* Site-weit: index.css setzt li { list-style: none } — für Kommentar-Markdown zurücksetzen */
.isso-comments-host .isso-text ul,
.isso-comments-host .isso-text ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

.isso-comments-host .isso-text ul {
  list-style: disc;
}

.isso-comments-host .isso-text ol {
  list-style: decimal;
}

.isso-comments-host .isso-text li {
  list-style: inherit;
  margin: 0.25em 0;
}

.isso-comments-host .isso-text ul ul,
.isso-comments-host .isso-text ol ul {
  list-style-type: circle;
}

.isso-comments-host .isso-text ul ul ul,
.isso-comments-host .isso-text ol ul ul {
  list-style-type: square;
}

/* index.css: a { text-decoration: none } — wie Artikel-Links in .text */
.isso-comments-host .isso-text a {
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-color: #999;
  text-decoration-thickness: 1px;
  padding-bottom: 2px;
  padding-top: 2px;
}

@media (prefers-color-scheme: dark) {
  .isso-comments-host {
    --isso-primary-text-color: #fff;
    --isso-secondary-text-color: #b0b0b0;
    --isso-border: 1px solid #444;
    --isso-box-shadow-color: rgba(0, 0, 0, 0.4);
    --isso-hover-color: #d0d0d0;
    --isso-link-hover-color: #fff;
    --isso-link-text-shadow-color: #666;
    --isso-input-background-color: #1a1a1a;
    --isso-input-outline-color: #6ba3e8;
    --isso-button-background-color: #444;
    --isso-button-border: 1px solid #666;
    --isso-button-hover-background-color: #555;
    --isso-button-active-background-color: #606060;
    --isso-preview-border-color: #333;
    --isso-preview-box-shadow-color: #222;
    --isso-preview-background: repeating-linear-gradient(
      -45deg,
      #1a1a1a,
      #1a1a1a 10px,
      #222 10px,
      #222 20px
    );
    --isso-pre-color: #d0d0d0;
    --isso-pre-background-color: #252525;
    --isso-pre-border-color: #444;
    --isso-comment-divider-color: rgba(255, 255, 255, 0.1);
    --isso-page-author-suffix-color: #ccc;
    --isso-target-fade-background-color: #3a3520;
  }

  #isso-thread .isso-textarea,
  #isso-thread .isso-input-wrapper input {
    color: #f5f5f5 !important;
    -webkit-text-fill-color: #f5f5f5;
    caret-color: #f5f5f5;
  }

  /* Chrome-Autofill: sonst weißer Hintergrund + weiße Schrift */
  #isso-thread .isso-textarea:-webkit-autofill,
  #isso-thread .isso-textarea:-webkit-autofill:hover,
  #isso-thread .isso-textarea:-webkit-autofill:focus,
  #isso-thread .isso-input-wrapper input:-webkit-autofill,
  #isso-thread .isso-input-wrapper input:-webkit-autofill:hover,
  #isso-thread .isso-input-wrapper input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #1a1a1a inset !important;
    box-shadow: 0 0 0 1000px #1a1a1a inset !important;
    -webkit-text-fill-color: #f5f5f5 !important;
    caret-color: #f5f5f5;
    transition: background-color 99999s ease-out 0s;
  }

  #isso-thread .isso-post-action > input {
    color: #f5f5f5 !important;
  }

  .isso-comments-host .isso-comment > .isso-text-wrapper {
    background-color: transparent;
  }

  .isso-comments-host .isso-comment.isso-is-page-author > .isso-text-wrapper {
    background-color: #252525;
  }

  /* .isso-comments-host .isso-avatar img {
    border-color: #444;
  } */

  #isso-thread input::placeholder,
  #isso-thread textarea::placeholder {
    color: #888;
    opacity: 1;
  }

  .isso-comments-host .isso-text a {
    text-decoration-color: #888;
  }

  hr.isso-form-rule {
    border-top-color: var(--color-border, #444);
  }
}

/* Fediverse-Kommentare im Isso-Layout (ohne Votes/Antworten) */
.isso-federated-list {
  margin-bottom: 0;
}

.isso-federated .isso-comment-footer,
.isso-federated .isso-votes,
.isso-federated .isso-reply {
  display: none !important;
}

.isso-comments-host .isso-instagram-comments {
  margin: 0 0 1.25rem;
  font-size: 0.85em;
}

.isso-comments-host .isso-instagram-comments a {
  color: var(--isso-secondary-text-color);
  font-weight: normal;
  text-decoration: none;
}

.isso-comments-host .isso-instagram-comments a:hover {
  color: var(--isso-hover-color);
}

.isso-comments-host .isso-federated-platform {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-left: 0.25em;
  color: var(--isso-secondary-text-color);
  font-weight: normal;
}

.isso-comments-host .isso-federated-platform svg {
  display: block;
  width: 0.85em !important;
  height: 0.85em !important;
  margin-right: -0.14em;
}