:root {
  --bubble-shape: 54% 46% 61% 39% / 57% 49% 51% 43%;
  --bubble-shift: 10deg;
  --bubble-size-one: 14cqi;
  --bubble-size-two: 16cqi;
  --bubble-size-three: 18cqi;
  --bubble-size-four: 20cqi;
  --bubble-size-five: 22cqi;
}

.bubbles {
  --column-gap: 2cqi;
  --row-gap: 1cqi;

  margin-block: clamp(var(--block-space), 3%, calc(var(--block-space) * 2));

  > * {
    flex-shrink: 1;
  }
}

.bubble {
  --bubble-background: radial-gradient(circle at center, color(from var(--bubble-color) srgb r g b / 0.25), color(from var(--bubble-color) srgb r g b / 0.05));
  --bubble-border-width: 0.2rem;
  --hover-size: 0;

  aspect-ratio: 1;
  block-size: var(--bubble-size);
  color: var(--bubble-color, currentColor);
  container-type: inline-size;
  display: grid;
  place-items: center;
  position: relative;
  transition: 0.2s ease;

  .bubbles & {
    &:nth-child(1)  { order: 5; }
    &:nth-child(2)  { order: 3; }
    &:nth-child(3)  { order: 3; }
    &:nth-child(4)  { order: 7; }
    &:nth-child(5)  { order: 9; }
    &:nth-child(6)  { order: 5; }
    &:nth-child(7)  { order: 4; }
    &:nth-child(8)  { order: 9; }
    &:nth-child(9)  { order: 3; }
    &:nth-child(10) { order: 7; }
    &:nth-of-type(n+6) {
      align-self: start;
    }
  }

  [data-turbo-preview] & { animation: none; }

  > * {
    grid-area: 1/1;
  }

  .bubble__perma & {
    --bubble-border-width: 0.3rem;
    --bubble-size: 40dvh !important;

    z-index: 1;
  }
}
.bubble__detail {
  --bubble-border-color: color-mix(in srgb, var(--bubble-color) 30%, var(--color-bg));
  --bubble-border-width: 0.15em;

  aspect-ratio: 1;
  background: var(--color-bg);
  block-size: auto;
  border: var(--bubble-border-width) solid var(--bubble-border-color);
  border-radius: var(--bubble-shape);
  display: flex;
  font-size: 5cqi;
  font-weight: 800;
  line-height: 1;
  max-inline-size: 18ch;
  padding: 1em;
  place-content: center;
  place-items: center;
  position: absolute;
  scale: 1;
  text-overflow: ellipsis;
  transform: none;
  transition: transform 200ms ease-out;
  white-space: nowrap;
  z-index: 1;

  a {
    color: var(--bubble-color);
  }

  &.bubble__assignee {
    font-size: 4.5cqi;
    inset: 8em auto auto -1.7em;
    padding: 0.2em;

    + & {
      inset: 4em auto auto -1em;

      + & {
        inset: 1em auto auto 2em;
      }
    }

    .avatar {
      border-radius: var(--bubble-shape);
    }

    @media (hover: hover) {
      .bubbles .bubble:not(.popped):hover & {
        transform: translate(0, -1rem);
      }

      .bubbles .bubble:not(.popped):hover & + & {
        transform: translate(1rem, -1rem);
      }

      .bubbles .bubble:not(.popped):hover & + & + & {
        transform: translate(1.5rem, -0.5rem);;
      }
    }

    .assignee__name {
      display: none;

      .bubble__perma & {
        color: var(--bubble-color);
        display: inline-block;
        font-size: 0.9em;
        font-weight: normal;
        inline-size: 15ch;
        inset: 0.3em 3.6em auto auto;
        position: absolute;
        text-align: end;
        white-space: normal;
      }
    }
  }

  &.bubble__comments {
    --arrow-size: 1.5em;
    --border-size: var(--bubble-border-width);

    aspect-ratio: 9/6;
    inset: auto auto 2em -1em;

    &::before {
      aspect-ratio: 2;
      background: var(--bubble-border-color);
      clip-path: polygon(50% 100%, 100% 0, 0 0);
      inline-size: var(--arrow-size);
      content: "";
      display: block;
      inset-block-end: auto;
      inset-block-start: 94%;
      inset-inline-start: 66%;
      position: absolute;
      transform: translateX(-50%) rotate(-20deg);
    }
  
    &::after {
      aspect-ratio: 2;
      background: var(--color-bg);
      clip-path: polygon(50% 100%, 100% 0, 0 0);
      inline-size: var(--arrow-size);
      content: "";
      display: block;
      inset-block-end: auto;
      inset-block-start: calc(94% - var(--border-size) * 1.5);
      inset-inline-start: 64%;
      position: absolute;
      transform: translateX(-50%) rotate(-20deg);
    }

    @media (hover: hover) {
      .bubbles .bubble:not(.popped):hover & {
        transform: translate(-0.5rem, -2rem);
      }
    }
  }

  &.bubble__date {
    --rotation: -45deg;

    aspect-ratio: 5/7;
    cursor: pointer;
    inset: 1cqb 1cqi auto auto;
    transform: rotate(var(--rotation));

    .bubble__date-text {
      transform: rotate(calc(var(--rotation) * -1));
    }

    @media (hover: hover) {
      .bubbles .bubble:not(.popped):hover & {
        transform: rotate(calc(var(--rotation) + var(--bubble-shift) * 1)) translate(0rem, 0.5rem);
      }
    }
  }

  @media (hover: hover) {
    .bubbles .bubble:not(.popped):hover & {
      transform: translate(1rem, 1rem);
    }

    .bubbles .bubble:not(.popped):hover & + & {
      transform: translate(0, -1rem);
    }

    .bubbles .bubble:not(.popped):hover & + & + & {
      transform: translate(-1rem, -1rem);
    }
  }
}

.bubble__image {
  border: none;
  border-radius: var(--bubble-shape);
  block-size: 100cqi;
  inline-size: 100cqi;
  overflow: hidden;
  pointer-events: none;
  transform: rotate(var(--bubble-rotate)) scale(0.92);
  transition: 0.2s ease;

  @media (hover: hover) {
    .bubbles .bubble:not(.popped):hover & {
      transform: rotate(calc(var(--bubble-rotate) + var(--bubble-shift))) scale(0.9);
    }
  }

  img {
    block-size: 100cqi;
    inline-size: 100cqi;
    max-inline-size: none;
    object-fit: cover;
    transform: rotate(calc(var(--bubble-rotate) * -1)) scale(1.1);

    &:is([src=""]) {
      display: none;
    }
  }

  :is(.bubbles, .bubbles-list) .bubble--wobble & {
    animation: wobble-img 1200ms normal forwards ease-out;
  }
}

.bubble__link {
  content: "";
  inset: 0;
  position: absolute;
  z-index: -1;

  .bubbles & {
    z-index: 1;
  }
}

.bubbles-list {
  --bubble-border-width: 0.15rem;
  --bubble-shift: 15deg;
  --bubble-size: 1.8em;
  --divider-offset: 1.2em;
  --hover-size: 0;

  container-type: inline-size;
  font-size: 1.4cqi;
  inline-size: min(90ch, 100dvw);
  max-inline-size: 100dvw;

  @media (max-width: 70ch) {
    inline-size: 100%;
  }

  .bubble {
    order: 0;
  }

  .bubble__title-link {
    color: var(--color-txt);
    text-decoration: none;
  }

  ul {
    margin-inline: var(--divider-offset);

    li {
      border-radius: 0;
      list-style: none;
      padding: 0.5em var(--inline-space);
      position: relative;
      transition: background-color 200ms ease-out;
    }

    &:not(.dragging) {
      li {
        @media (hover: hover) {
          &:hover {
            background-color: color(from var(--bubble-color) srgb r g b / 0.15);
            border: 0;
          }
        }
      }
    }
  }

  .avatar {
    --avatar-size: 1.1em;

    > * {
      font-size: 0.5em;
    }
  }
}

.bubbles-list__divider {
  --border-color: var(--divider-color);
  --border-size: 2px;
  --divider-color: var(--color-subtle-dark);

  block-size: calc(100% + 12ch);
  font-size: 1rem;
  cursor: grab;
  margin-inline: calc(var(--divider-offset) * -1);
  visibility: hidden;
}

.bubbles-list__divider--installed {
  visibility: visible;
}

.divider-drag-image {
  background-color: var(--color-link);
  border-radius: 1rem;
  color: var(--color-ink-reversed);
  inset: auto 100% 100% auto;
  line-height: 2rem;
  padding: 0 1rem;
  position: fixed;
  text-wrap: nowrap;
}

.btn--reversed.bubbles-list__handle {
  --btn-background: var(--divider-color);

  font-size: 0.9rem;
}

.bubbles-list__count {
  --btn-background: var(--divider-color);
  --btn-color: var(--color-ink-reversed);
  --btn-gap: 0.5ch;
  --btn-icon-size: 1em;
  --btn-padding: 0.1em 1em 0.1em 0.7em;
}

.bubble__title-text {
  font-weight: 700;
  flex-grow: 1;
  letter-spacing: -0.015em;
  white-space: nowrap;

  .drafted & {
    color: color(from var(--color-ink) srgb r g b / 0.5);
  }

  &::after {
    border-block-end: 1px dotted var(--color-subtle-dark);
    content: "";
    flex-grow: 1;
    margin-block-end: 0.25em;
  }
}

.bubble__tags {
  --row-gap: 0;

  font-size: var(--text-small);
  margin-block-start: 0.3cqb;
  max-block-size: 4lh;
  max-inline-size: 75cqi;
  overflow: hidden;
  text-overflow: ellipsis;

  .bubble__perma & {
    font-size: var(--text-medium);
  }
}

.bubble__tag {
  max-inline-size: 75cqi;
}

.bubble__title {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto;
  max-block-size: 90cqi;
  max-inline-size: 70cqi;
  
  .bubbles & {
    pointer-events: none;
  }

  a {
    color: var(--splat-color);

    &.bubble__title-rendered {
      -webkit-line-clamp: var(--lines, 4);
      -webkit-box-orient: vertical;
      display: -webkit-box;
      font-size: 9cqi;
      font-weight: 800;
      line-height: 1.2;
      overflow: hidden;
      text-overflow: clip;
      white-space: normal;
    }
  }

  textarea {
    --input-color: var(--bubble-color);
    --input-border-radius: 0;

    font-size: 9cqi;
    font-weight: 800;
    line-height: 1.2;

    &::selection {
      background-color: var(--bubble-color);
      color: var(--color-ink-reversed);
    }
  }

  @media (hover: hover) {
    .bubble:has(.bubble__image img:not([src=""])):hover & {
      color: var(--color-ink-reversed);
      text-shadow: 0 0 0.2em var(--bubble-color), 0 0 0.2em var(--bubble-color), 0 0 0.2em var(--bubble-color);
      position: relative;
      z-index: 1;
    }
  }
}

.bubble__shape {
  background: var(--bubble-background);
  block-size: var(--bubble-size, 1.2em);
  border-color: var(--bubble-border-color, color-mix(in srgb, var(--bubble-color) 15%, var(--color-bg)));
  border-radius: var(--bubble-shape);
  border-style: var(--bubble-border-style, solid);
  border-width: 1px;
  inline-size: var(--bubble-size, 1.2em);
  pointer-events: none;
  position: relative;
  transform: rotate(var(--bubble-rotate));
  transition: 200ms ease-out;
  z-index: 0;

  @media (prefers-color-scheme: dark) {
    --bubble-background: radial-gradient(circle at center, color(from var(--bubble-color) srgb r g b / 0.45), color(from var(--bubble-color) srgb r g b / 0.15));
    --bubble-border-color: color-mix(in srgb, var(--bubble-color) 30%, var(--color-bg));
  }

  .bubble & {
    --bubble-size: 100%;
  }

  .drafted & {
    --bubble-border-style: dashed;
  }
  
  :is(.bubbles, .bubbles-list) .bubble--wobble & {
    animation: wobble 1200ms normal forwards ease-out;
  }

  .bubble--wobble:nth-child(even) & {
    animation-name: wobble-alt;
    animation-duration: 900ms;
  }

  .popped & {
    display: none;
  }

  .event &,
  .bucket &,
  .bubbles-list & {
    --bubble-background: color-mix(in srgb, var(--bubble-color) 30%, var(--color-bg));
    --bubble-border-color: color-mix(in srgb, var(--bubble-color) 40%, var(--color-bg))
  }
}

.bubble__actions-container {
  background-color: color-mix(in srgb, var(--bubble-color) 20%, var(--color-bg));
  margin-block-start: -0.7em;
  position: relative;
  z-index: 1;

  .btn--plain {
    --btn-color: var(--bubble-color);

    text-decoration: underline;
  }

  .bubble__pop-message {
    color: var(--bubble-color);
  }
}

.bubble__splat {
  display: none;
  pointer-events: none;
  transform: rotate(var(--bubble-rotate));

  .popped & {
    display: block;
    fill: color-mix(in srgb, var(--bubble-color) 20%, var(--color-bg));
    position: absolute;
    scale: 130%;
    z-index: -1;
  }

  .bubbles-list & {
    block-size: var(--bubble-size);
    fill: color-mix(in srgb, var(--bubble-color) 35%, var(--color-bg));
    inline-size: var(--bubble-size);
    position: relative;
    scale: 1;
    z-index: 0;
  }
}