/* post-sidebar.css — thread/message sidebar, tags, votes. */
.page-hk_thread [role="main"] {
  .replies .email .subject {
    grid-area: subject;
    min-width: 0;
    margin: var(--space-s) 0 0;
    padding: 0 0 0 var(--space-default);
    border: 0;
    border-left: 1px solid var(--color-stroke-mid);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: var(--font-weight-regular);
    font-style: normal;
    line-height: 1.35;
    text-align: left;
    color: var(--color-text-secondary);
    overflow-wrap: anywhere;
  }
  .sort-mode {
    float: none;
    display: block;
    width: 100%;
    text-align: left;
    margin: 0 0 var(--space-large);
  }

  /* Stats + actions + counts + favourite live in .boost-thread-card
     (one wrapper; stock's export <a.btn> cannot share a sibling-frame).
     Admin / tags / participants are their own cards. */
  #thread-overview-info {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-large);
  }

  .boost-thread-card {
    padding: var(--space-card);
    display: flex;
    flex-direction: column;
    gap: var(--space-default);
  }

  .boost-thread-card > p,
  .boost-thread-card > a.btn,
  .boost-thread-card > form.favorite,
  .boost-thread-card form.favorite > p {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-default);
    margin: 0;
    width: 100%;
  }

  .boost-thread-card .btn,
  .boost-thread-card .btn.btn-sm,
  .boost-thread-card form.favorite a {
    flex: 1 0 0;
    box-sizing: border-box;
    width: 100%;
    padding: var(--space-default) var(--space-medium);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-relaxed);
    text-align: center;
    color: var(--color-text-primary);
    background: var(--color-surface-weak);
    border: 1px solid var(--color-stroke-strong, var(--color-stroke-mid));
    border-radius: var(--border-radius-l);
    text-decoration: none;
  }

  /* Icons inherit so fa-inbox is not blue at rest.
     #thread-overview-info is required to beat HyperKitty's ID-scoped .fa color. */
  #thread-overview-info .boost-thread-card .btn .fa,
  #thread-overview-info .boost-thread-card .btn i,
  #thread-overview-info .boost-thread-card form.favorite a .fa,
  #thread-overview-info .boost-thread-card form.favorite a i {
    color: inherit;
  }

  .boost-thread-card .btn:hover,
  .boost-thread-card form.favorite a:hover {
    color: var(--color-text-link-accent);
    border-color: var(--color-stroke-link-accent);
    text-decoration: none;
  }

  #thread-overview-info > .card,
  #thread-overview-info > .card.border-danger,
  #participants,
  #tags,
  #add-tag {
    padding: var(--space-card);
    margin-top: 0;
  }

  #thread-overview-info > .card.border-danger {
    align-items: flex-start;
    gap: var(--space-large);
  }

  #thread-overview-info > .card.border-danger > .card-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-default);
  }

  #thread-overview-info > .card.border-danger > .card-body > div {
    display: flex;
    align-items: center;
    gap: var(--space-s);
  }

  #participants_title,
  #tag-title {
    margin: 0 calc(-1 * var(--space-card)) var(--space-medium);
    padding: 0 var(--space-card) var(--space-medium);
    border-bottom: 1px solid var(--color-stroke-weak);
  }

  #tags:not(:has(ul)) {
    display: none;
  }

  #tags ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #tags li > span {
    display: none;
  }

  #tags li a,
  #tags .rmtag a {
    display: inline-flex;
    align-items: center;
    visibility: visible;
    font-family: var(--font-sans);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    background: var(--color-surface-mid);
    border: 1px solid var(--color-stroke-weak);
    border-radius: var(--border-radius-s);
    padding: var(--space-s) var(--space-default);
    text-decoration: none;
  }

  /* Do not set display on these <a>s: HyperKitty hides .saved / .notsaved
     with #thread-overview-info a.saved { display:none } until JS. */
  .boost-thread-card form.favorite a {
    align-items: center;
    justify-content: center;
  }

  #thread-overview-info a[href*="/delete"] {
    color: var(--color-text-error);
  }

  #participants .participant-gravatar img,
  #participants .participant-gravatar .gravatar {
    width: 48px;
    height: 48px;
  }

  .reply-level-1 { --boost-reply-level: 1; }
  .reply-level-2 { --boost-reply-level: 2; }
  .reply-level-3 { --boost-reply-level: 3; }
  .reply-level-4 { --boost-reply-level: 4; }
  .reply-level-5 { --boost-reply-level: 5; }
  .reply-level-6 { --boost-reply-level: 6; }

  .reply-level-1,
  .reply-level-2,
  .reply-level-3,
  .reply-level-4,
  .reply-level-5,
  .reply-level-6 {
    box-sizing: border-box;
    min-width: 0;
    padding-left: 12px;
    border-left: 1px solid var(--color-stroke-mid);
    margin-left: calc(var(--boost-reply-level) * 28px);
  }

  .boost-thread-card form.favorite a:focus-visible:not(:hover) {
    color: var(--color-text-primary);
    text-decoration: none;
  }
}

/* Bootstrap .border-danger is border-color: #dc3545 !important. */
@layer boost-important {
  .page-hk_thread [role="main"] {
    #thread-overview-info > .card,
    #thread-overview-info > .card.border-danger,
    #participants,
    #tags,
    #add-tag {
      border-color: var(--color-stroke-weak) !important;
    }
  }
}

.page-hk_message_index [role="main"] {
  #message-overview-info,
  #message-overview-info > .card,
  #message-overview-info > .card.border-danger {
    padding: var(--space-card);
    margin-top: 0;
  }

  #message-overview-info > .card.border-danger {
    align-items: flex-start;
    gap: var(--space-large);
  }

  #message-overview-info > .card.border-danger > .card-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-default);
  }

  #message-overview-info > .card.border-danger > .card-body > div {
    display: flex;
    align-items: center;
    gap: var(--space-s);
  }

  #message-overview-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-default);
    margin-top: 0;
  }

  #message-overview-info > p {
    display: flex;
    margin: 0;
  }

  #message-overview-info > p > a {
    flex: 1 0 0;
    padding: var(--space-default) var(--space-medium);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    text-align: center;
    color: var(--color-text-primary);
    background: var(--color-surface-weak);
    border: 1px solid var(--color-stroke-strong, var(--color-stroke-mid));
    border-radius: var(--border-radius-xl);
    text-decoration: none;
  }

  #message-overview-info > p > a .fa,
  #message-overview-info > p > a i {
    color: inherit;
  }

  #message-overview-info > p > a:hover,
  #message-overview-info > p > a:focus-visible {
    color: var(--color-text-link-accent);
    border-color: var(--color-stroke-link-accent);
  }

  #message-overview-info a[href*="/delete"] {
    color: var(--color-text-error);
  }
}

/* Bootstrap .border-danger is border-color: #dc3545 !important. */
@layer boost-important {
  .page-hk_message_index [role="main"] {
    #message-overview-info,
    #message-overview-info > .card,
    #message-overview-info > .card.border-danger {
      border-color: var(--color-stroke-weak) !important;
    }
  }
}

@media (max-width: 767px) {
  .page-hk_thread [role="main"] {
    .reply-level-1,
    .reply-level-2,
    .reply-level-3,
    .reply-level-4,
    .reply-level-5,
    .reply-level-6 {
      margin-left: calc(min(var(--boost-reply-level), 3) * 12px);
    }
  }
}

.email-info .likeform-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.email-info .messagelink,
.email-info form.likeform {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  float: none;
  margin: 0;
}
.email-info form.likeform a.vote,
.email-info .messagelink > a,
.email-info form.likeform > i.fa.disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
  gap: var(--space-s);
  padding: var(--space-s) var(--space-medium);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  line-height: 22px;
  letter-spacing: -0.12px;
  background-color: var(--color-surface-weak);
  border: 1px solid var(--color-stroke-strong);
  border-radius: var(--border-radius-l);
  vertical-align: middle;
}
.email-info form.likeform a.vote {
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, transform 160ms var(--boost-ease-out);
}

.email-info form.likeform > i.fa.disabled::before { font-family: FontAwesome; }
.email-info form.likeform a.vote.selected,
.email-info form.likeform a.vote:has(.selected),
.email-info form.likeform a.vote:has(.selected) .fa,
.email-info form.likeform a.vote[data-vote="0"],
.email-info form.likeform a.vote[data-vote="0"] .fa {
  background-color: var(--color-surface-mid);
  border-color: var(--color-stroke-link-accent);
  color: var(--color-text-primary);
}
.email-info form.likeform a.vote:active:not(.disabled),
.email-info .messagelink > a:active {
  background-color: var(--color-surface-mid);
  border-color: var(--color-stroke-link-accent);
  transform: scale(0.97);
}
.email-info form.likeform a.vote:focus-visible,
.email-info .messagelink > a:focus-visible {
  outline: 2px solid var(--color-stroke-link-accent);
  outline-offset: 0;
  box-shadow: none;
}
.email-info form.likeform a.vote:is(:hover, :focus-visible, :active),
.email-info .messagelink > a:is(:hover, :focus-visible, :active) {
  text-decoration: none;
}
.email-info form.likeform a.vote:focus-visible:not(:hover),
.email-info .messagelink > a:focus-visible:not(:hover),
.email-info form.likeform a.vote.disabled:is(:hover, :focus-visible, :active) {
  color: var(--color-text-primary);
}

@media (hover: hover) and (pointer: fine) {
  .email-info form.likeform a.vote:not(.disabled):hover,
  .email-info .messagelink > a:hover {
    background-color: var(--color-surface-weak);
    border-color: var(--color-stroke-link-accent);
    color: var(--color-text-link-accent);
    text-decoration: none;
  }
  .email-info form.likeform a.vote.selected:hover,
  .email-info form.likeform a.vote:has(.selected):hover,
  .email-info form.likeform a.vote:has(.selected):hover .fa {
    background-color: var(--color-surface-mid);
    border-color: var(--color-stroke-link-accent);
    color: var(--color-text-primary);
    text-decoration: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .email-info form.likeform a.vote:active:not(.disabled),
  .email-info .messagelink > a:active { transform: none; }
}

.email-info form.likeform a.vote.disabled {
  opacity: 0.5;
  cursor: default;
}

.email-info form.likeform a.vote.disabled .fa,
.email-info form.likeform > i.fa.disabled {
  opacity: 0.5;
  color: var(--color-text-secondary);
  cursor: default;
}

.email-info form.likeform a.vote .fa,
.email-info .messagelink > a .fa {
  color: inherit;
  line-height: inherit;
}

/* myvote == 1: dislike count is a bare text node after <i.disabled>.
   ::after is abspos so it does not occupy a cell (grid vs a spanning item). */
.email-info form.likeform:has(> a.vote + i.fa.disabled) {
  display: inline-grid;
  grid-auto-flow: row;
  grid-template-columns: auto auto auto 12px;
  grid-template-rows: auto;
  align-items: center;
  column-gap: 0;
  position: relative;
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 22px;
  color: var(--color-text-secondary);
}

.email-info form.likeform:has(> a.vote + i.fa.disabled) > input {
  display: none;
}

.email-info form.likeform:has(> a.vote + i.fa.disabled) > a.vote {
  grid-column: 1;
  grid-row: 1;
  margin-right: 6px;
  color: var(--color-text-primary);
}

.email-info form.likeform:has(> a.vote + i.fa.disabled) > a.vote:has(.selected),
.email-info form.likeform:has(> a.vote + i.fa.disabled) > a.vote:has(.selected) .fa {
  color: var(--color-text-primary);
}

.email-info form.likeform:has(> a.vote + i.fa.disabled) > i.fa.disabled {
  grid-column: 2;
  grid-row: 1;
  padding: 0 var(--space-s) 0 var(--space-medium);
  border: 0;
  background: transparent;
  min-height: 0;
  opacity: 0.5;
}

.email-info form.likeform:has(> a.vote + i.fa.disabled)::after {
  content: "";
  position: absolute;
  grid-column: 2 / 5;
  grid-row: 1;
  inset: 0;
  box-sizing: border-box;
  border: 1px solid var(--color-stroke-strong);
  border-radius: var(--border-radius-l);
  pointer-events: none;
  opacity: 0.5;
}

@media (max-width: 767px) {
  .email-info form.likeform a.vote,
  .email-info .messagelink > a,
  .email-info form.likeform > i.fa.disabled,
  .email-info form.likeform:has(> a.vote + i.fa.disabled) { line-height: 16px; }
}