/* Compressed Entries
 * -------------------------------------------------------------------------- */

.entry__toggle {
  display: none;
}

.compressed-entries {
  position: relative;
  @media (min-width: 40em) { margin-top: var(--base-space); }

  /* Render all but unread entries as compact rows
   * If none are unread, expand the most recent entry */
  .entry {
    @media screen {
      position: relative;
      width: 100%;
      padding-top: 0;
      padding-bottom: 3.75em;
      margin-bottom: -3em;
      border: 1px solid var(--color-bg--main);

      .entry-menu,
      .entry__purpose,
      .entry-actions,
      .entry__sender-email,
      .entry__recipients { display: none; }

      .entry__excerpt { display: block; }

      .entry__permalink { /* Make entire collapsed row a link */
        display: inherit;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        text-indent: -999em;
      }

      .entry__participants {
        @media (max-width: 39.95em) { margin-top: 0; }
      }

      .entry__sender {
        pointer-events: none; /* Disable clicking on sender when closed */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
      }
    }

    &:nth-last-child(-n+1) {
      margin-bottom: 0;
      padding-bottom: var(--base-space);
      min-height: 0;
    }

    &:last-child .entry__toggle{
      cursor: default;
    }

    &.entry--internal:not(.entry--autoresponse) {
      .entry__wrapper.entry__wrapper--expanded, &.entry--unread {
        .entry__participants {
          @media (max-width: 39.95em) { margin-top: var(--half-space); }
        }
      }
    }
  }

  /* When expanded, show recipients and hide the excerpt */
  .entry__wrapper {
    &.entry__wrapper--comment {
      min-height: 70px;
    }

    .entry__body {
      display: none;
    }

    &.entry__wrapper--collapsed {
      .entry__body {
        display: none !important;
      }
    }
  }

  .entry--unread,
  .entry__wrapper--expanded {
    position: relative;

    .entry__body {
      display: block;
    }

    .entry-menu,
    .entry__recipients {
      display: block !important;
    }

    .entry__sender-email {
      display: inline !important;
    }

    .entry__sender {
      pointer-events: all; /* Sender should be clickable when open */
    }

    .entry__excerpt {
      display: none;
    }
  }

  .entry__toggle {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;

    &:not(.entry--unread &) {
      @media (min-width: 40em) { border-radius: 1.5em; }
    }
  }
}

/* Entries, except for expander */
.entry:not(.compressed-entries__expander) {
  /* Default to hiding all but the first 4 read entries (collapsed + expanded) */
  .compressed-entries &:not(:nth-last-child(-n+4)) { display: none; }

  /* Never compress unread entries */
  .compressed-entries &.entry--unread { display: block; }

  /* Always show entries when everything's been revealed */
  .compressed-entries--revealed & { display: block !important; }

  /* The expand button takes same space as 5th entry would, so just show it */
  .compressed-entries.compressed-entries--count-5 & { display: block; }
}

.compressed-entries__expander {
  padding-top: 1em !important;

  /* Never show the expander when everything has been revealed or expanded */
  .compressed-entries--expanded &,
  .compressed-entries--revealed & {
    display: none !important;
  }

  /* Hide expander until there are at least 6 entries, iOS needs it there for > 3 */
  .compressed-entries--count-4 &,
  .compressed-entries--count-5 & {
    display: none;
  }
}

.compressed-entries__extra-expander {
  /* Hide the extra expander when things are compresed */
  .compressed-entries & {
    padding-top: 1em;
    display: none;
  }

  /* Show the extra expander if things have been revealed (even if compressed still) */
  .compressed-entries--revealed & { display: block; }
}

.compressed-entries__expander,
.compressed-entries__extra-expander {
  width: 100%;

  @media (max-width: 39.95em) {
    padding: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
  }
}

.compressed-entries__expander-label {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.4em 0;
  background: transparent;
  font-size: var(--font-size-small);
  color: var(--color-tertiary);
  text-decoration: none;

  @media (max-width: 39.95em) { padding: 1em 0; }

  &:hover { cursor: pointer; }

  .spinner { margin: 0 auto; }
}

.compressed-entries__toggle-all {
  width: 100%;
  position: relative;
  right: var(--entry-padding);
  z-index: 3;

  @media (max-width: 39.95em) {
    border-bottom: 1px solid var(--color-border);
  }

  button {
    position: absolute;
    top: -1em;
    right: var(--page-padding);
    background: var(--color-bg--main);

    .compressed-entries--exploded & {
      &::before { background-image: url("/assets/icons/toggle-collapse-ea2addff.svg"); }
    }
  }
}

/* Entries
 * -------------------------------------------------------------------------- */

.entries {
  display: flex;
  flex-wrap: wrap;
  margin: 0 var(--negative-page-padding) 0;

  @media (min-width: 40em) { margin: var(--base-space) 0 0 !important; }

  .topic:not(.topic--snippet) &,
  .collection & {
    @media (max-width: 39.95em) {
      background: var(--color-bg--thread);
    }
  }

  .compressed-entries & { background: transparent !important; }

  &:has(.entry:nth-of-type(-n+2):last-child) .compressed-entries__toggle-all {
    display: none;
  }
}

.entry {
  --entry-padding: 1.6rem;
  width: 100%;
  padding: var(--entry-padding);
  position: relative;
  text-align: left;

  @media (min-width: 40em) { padding: var(--entry-padding) 0; }

  /* Solo, expanded entries should have a min-height that fills in the viewport a bit
   * This ensures bottom toolbar menus don't expand off the top of the screen */
  &:not(.entry--internal):not(.compressed-entries__expander):not(.compressed-entries__extra-expander):last-of-type:first-of-type:has(.entry__wrapper--expanded) {
    min-height: 35rem;
  }

  &.entry--unread {
    border: 1px solid var(--color-unread);
  }

  &:last-child {
    .entry__header {
      cursor: default;
    }
  }
}

.entry--sheet {
  width: 100%;
  margin: 0 0 0.75em;
  padding: var(--entry-padding);
  background: var(--color-bg--entry-sheet);
  box-shadow: 0 0 5px var(--color-shadow--dark);

  @media (min-width: 40em) {
    --entry-padding: 2rem;
    box-shadow: 0 0 3rem var(--color-shadow);
  }

  @media (min-width: 60em) {
    --entry-padding: 5rem;
  }

  &:last-child {
    @media (max-width: 39.95em) { margin-bottom: 0; }
  }

  .entries > &:last-child {
    @media (max-width: 39.95em) {
      box-shadow: 0 -3px 5px var(--color-shadow--light);
    }
  }

  .entries--public > &:last-child {
    @media (max-width: 39.95em) {
      box-shadow: 0 0 5px var(--color-shadow--dark);
      margin-bottom: 0.75em;
    }
  }

  .entries > &:last-child {
    @media (max-width: 39.95em) {
      &.entry--internal { margin-bottom: -2rem; } /* Don't let background show under rounded corner */
    }
  }

  .sheet:not(.collection) & {
    padding: 0 1.6rem;
    box-shadow: none;

    @media (min-width: 40em) { padding: 0; }
  }
}

.entry__permalink { display: none; } /* Only used for compressed entries */

.entry__anchor {
  position: relative;
  display: block;
  width: 0;
  height: 0;
  left: 0;
  top: -6.5em;
  outline: none;
}

.entry__collection-topic {
  display: none;

  .collection-entries & {
    display: flex;
    flex-basis: 100%;
    font-weight: 600;
    line-height: 1.2;
    outline: none;
  }
}

.entry__header {
  display: flex;

  &.entry__header--expandable {
    cursor: pointer;

    &:focus-visible { outline: none; }
  }
}

.entry__purpose {
  filter: var(--colorize-border);
  position: absolute;
  top: 1em;
  left: -0.75em;
}

.entry__avatar {
  position: relative;

  .avatar {
    width: 2.5em;
    height: 2.5em;
    margin-right: 0.5em;
  }

  .entry:focus-within & .avatar {
    box-shadow: 0 0 0 2px var(--color-focus-ring);
  }
}

.entry__meta {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: left;
  width: calc(100% - 3em);

  .entry--internal & {
    display: initial;
  }

  .entry__header--no-summary & {
    margin: 0.6em 0 0.85em;
  }
}

.entry__participants {
  flex: 1 1;
  min-width: 0;
  word-wrap: break-word;
  line-height: 1.3;

  @media (min-width: 40em) { padding-bottom: 1em; }
}

.entry__excerpt {
  width: 100%;
  margin: 0 6em 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-txt--subtle);
  font-size: var(--font-size-small);
  display: none;

  @media (min-width: 40em) {
    margin-top: -1.2em;

    .entry--involvement & { margin-top: 0; }
  }
}

.entry__sender {
  display: block;
  font-weight: 600;

  @media (min-width: 40em) { display: inline; }
}

.entry__sender-email {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  @media (min-width: 40em) { display: inline; }
}

.entry__recipients {
  font-size: var(--font-size-small);
}

.entry__full-recipients {
  display: none;
}

.entry__mini-recipients {
  cursor: pointer;
}

.entry__recipients-expander:checked { /* Tap to expand mini recipients into full */
  ~ .entry__mini-recipients { display: none; }
  ~ .entry__full-recipients { display: inline; }
}

.entry__recipients--reply-later {
  .entry__mini-recipients {
    @media (min-width: 60em) { display: inline; }
  }

  .entry__full-recipients {
    display: none;
    @media (min-width: 60em) { display: none; }
  }
}

.entry__time {
  float: right;
  margin-left: 0.5em;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  color: var(--color-txt--subtle);
  font-size: var(--font-size-small);
  user-select: none;

  @media (min-width: 40em) {
    flex-direction: row-reverse;
    align-items: flex-start;
    margin-top: 2px;
  }

  time { white-space: nowrap; }
}

.entry-menu {
  @media (max-width: 39.95em) { margin-right: -0.8rem; }

  .topic--spam & { display: none; }
}

.entry-menu__btn {
  width: 3.6rem;
  height: 3.2rem;

  @media (min-width: 40em) { margin-top: -0.7rem; }
  @media (min-width: 60em) { margin-top: -0.5rem; }

  &::before { background-size: 1.2em; }
}

.entry__body {
  margin-top: 0.33em;

  @media (min-width: 40em) { margin: -0.5em 4em 0 3em; }
}

.entry__body--empty {
  @media (min-width: 40em) {
    margin-top: 0;
    margin-bottom: 0;

    .entries--collection & {
      margin: -1em 0 -0.5em 3em;
    }
  }
}

.entry__public {
  width: 100%;
  margin: 0;
}

/* Internal Entries
 * -------------------------------------------------------------------------- */

.entry--internal {
  padding: 1.6rem;
  background: linear-gradient(135deg, var(--color-bg--secondary-opaque) 0%, var(--color-bg--secondary-glint-opaque) 100%) var(--color-bg--main) !important;
  box-shadow: none !important;
  border: 1px solid var(--color-bg--thread);
  border-width: 1px 1px 0 1px;
  border-radius: 3rem 3rem 0 3rem;

  @media (min-width: 40em) {
    border-color: var(--color-bg--main);
  }

  @media (min-width: 60em) {
    margin-left: 3rem !important;
    margin-right: 3rem !important;
    padding: 2rem;
    width: auto !important; /* Allow comments to be less than full-width */
    min-width: 51%; /* But make sure they get their own line */
    max-width: calc(100% - 6rem) !important;
  }

  .entry__sender {
    margin-right: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }

  .entry__body { margin-top: 0; }

  &.entry--comment .entry__body {
    @media (min-width: 40em) {
      margin-top: -1.2em;

      .collection-entries & { margin-top: 0; }
    }
  }

  pre {
    background: linear-gradient(135deg, var(--color-bg--main-thin) 0%, var(--color-bg--main-thick) 100%) !important;
  }
}

.entry--autoresponse {
  width: 100% !important;
  background: linear-gradient(135deg, var(--color-bg--warning) 0%, var(--color-bg--warning-glint) 100%) !important;

  &.topic--snippet {
    background: linear-gradient(90deg, var(--color-bg--warning-opaque) 0%, var(--color-bg--warning-glint-opaque) 100%) !important;

    .entry-expander__button,
    .entry-expander::after {
      background: linear-gradient(90deg, var(--color-bg--warning-opaque) 0%, var(--color-bg--warning-glint-opaque) 100%) !important;
    }

    .entry__autoresponse-notice {
      top: 2rem;
    }
  }
}

.entry__autoresponse-notice {
  position: absolute;
  top: -1rem;
  left: 50%;
  width: 28ch;
  margin-left: -14ch;
  padding: 0.25em 0.66em;
  background: var(--color-coral);
  color: var(--color-txt--reversed);
  border-radius: 1em;
  white-space: nowrap;

  .entry__unreads-notice ~ .entry__wrapper & { display: none; }

  .entry__wrapper--expanded & {
    top: -2.8rem;

    @media (min-width: 40em) {
      top: -3rem;
    }
  }
}

.entry__unreads-notice {
  position: absolute;
  top: -0.5em;
  right: 0;
  left: 0;
}

.entry__unreads-notice-content {
  background: var(--color-unread);
  border-color: var(--color-unread);
  color: var(--color-txt--reversed);
}

.entry__unreads-notice-icon {
  transform: rotate(-90deg);
}

/* Shadowed Entry
 * -------------------------------------------------------------------------- */

.entry--shadowed {
  background: linear-gradient(135deg, var(--color-bg--collection-opaque) 0%, var(--color-bg--collection-glint-opaque) 100%) !important;

  @media (min-width: 40em) {
    .entry__body { margin-top: 0 !important; }
  }
}

/* Typing Indicator
 * -------------------------------------------------------------------------- */

.entry__typing-notice {
  animation-name: fade-in-out, hide;
  animation-duration: 1.5s, 0s;
  animation-delay: 0s, 5s;
  animation-fill-mode: both, forwards;
  animation-iteration-count: infinite, 1;
  overflow: hidden;
}

/* Handoffs + Involvements
 * -------------------------------------------------------------------------- */

.entry__contact {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}

.entry__contact-name {
  max-width: 100%;
  overflow: hidden;
  word-wrap: break-word;
}

.entry__type-icon {
  width: 1em;
  height: 1em;
  position: absolute;
  top: -0.25em;
  left: -0.25em;
  background: center / 100% no-repeat;
  z-index: 2;
}

.entry__summary {
  flex: 1 1;
  min-width: 0;
  word-wrap: break-word;
  line-height: 1.3;
  font-weight: 600;
}

.entry__body--involvement {
  margin-top: 0.33em !important;

  @media (min-width: 40em) { margin: 0 4em 0 3em !important; }
}

.entry__type-icon--announcement { background-image: url("/assets/icons/bugs/announcement-bug-2fe58e78.svg"); }
.entry__type-icon--file { background-image: url("/assets/icons/bugs/file-bug-09940fc0.svg"); }
.entry__type-icon--involvement { background-image: url("/assets/icons/bugs/involvement-bug-6624053b.svg"); }
.entry__type-icon--request { background-image: url("/assets/icons/bugs/request-bug-0838f2e5.svg"); }
.entry__type-icon--cancelled { background-image: url("/assets/icons/bugs/cancelled-bug-c6a3ff3b.svg"); }
.entry__type-icon--spam { background-image: url("/assets/icons/bugs/spam-bug-6b2aeb41.svg"); }
.entry__type-icon--blocked-tracker { background-image: url("/assets/icons/bugs/spy-bug-4baa84ea.svg"); }