// Annotation Popup - CSS-only version (no framer-motion)
// Uses CSS animations for all transitions

// Protect stroke-based icons from host page `svg { fill: currentColor }` rules.
// Scoped to prototype comment system's own containers to avoid breaking host SVGs that use
// fill="none" with CSS-based fills (e.g. Tailwind's fill-current).
// See: https://github.com/prototype-comments/issues/58
.popup {
  svg[fill="none"] {
    fill: none !important;
  }

  svg[fill="none"] :not([fill]) {
    fill: none !important;
  }
}

// =============================================================================
// Animation Keyframes
// =============================================================================

@keyframes popupEnter {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes popupExit {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(4px);
  }
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(-50%) scale(1) translateY(0) translateX(0);
  }
  20% {
    transform: translateX(-50%) scale(1) translateY(0) translateX(-3px);
  }
  40% {
    transform: translateX(-50%) scale(1) translateY(0) translateX(3px);
  }
  60% {
    transform: translateX(-50%) scale(1) translateY(0) translateX(-2px);
  }
  80% {
    transform: translateX(-50%) scale(1) translateY(0) translateX(2px);
  }
}

// =============================================================================
// Popup Container
// =============================================================================

.popup {
  position: fixed;
  transform: translateX(-50%);
  width: 280px;
  padding: 0.75rem 1rem 14px;
  background: #1e1e1e;
  border-radius: 16px;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.35),
    0 8px 32px rgba(0, 0, 0, 0.18),
    0 0 0 1px #333333;
  z-index: 100001;
  font-family:
    var(--tool-font-body, "DM Sans", ui-sans-serif, system-ui, sans-serif);
  will-change: transform, opacity;

  // Initial state (before animation)
  opacity: 0;

  &.enter {
    animation: popupEnter 0.15s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
  }

  // After enter animation completes, set stable state
  &.entered {
    opacity: 1;
    transform: translateX(-50%) scale(1) translateY(0);
  }

  &.exit {
    animation: popupExit 0.15s ease-in forwards;
  }

  // Shake needs entered state to be stable first
  &.entered.shake {
    animation: shake 0.25s ease-out;
  }
}

// =============================================================================
// Header
// =============================================================================

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5625rem;
}

.element {
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.headerToggle {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex: 1;
  min-width: 0;
  text-align: left;

  .element {
    flex: 1;
  }
}

// Chevron icon that rotates when computed styles are expanded
.chevron {
  color: rgba(255, 255, 255, 0.5);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); // Matches FAQ accordion easing
  flex-shrink: 0;

  &.expanded {
    transform: rotate(90deg);
  }
}

// =============================================================================
// Computed Styles Block
// =============================================================================

// Accordion animation using grid-template-rows technique for smooth height transitions
// See: https://css-tricks.com/css-grid-can-do-auto-height-transitions/
.stylesWrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.16, 1, 0.3, 1); // Matches FAQ accordion easing

  &.expanded {
    grid-template-rows: 1fr;
  }
}

// Inner container with overflow:hidden is required for the grid animation to work
.stylesInner {
  overflow: hidden;
}

// Code-block styling for computed CSS properties display
.stylesBlock {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.375rem;
  padding: 0.5rem 0.625rem;
  margin-bottom: 0.5rem;
  font-family:
    var(--tool-font-body, "DM Sans", ui-sans-serif, system-ui, sans-serif);
  font-size: 0.6875rem;
  line-height: 1.5;
}

.styleLine {
  color: rgba(255, 255, 255, 0.85);
  word-break: break-word;
}

// Syntax highlighting colors (purple for properties, light for values)
.styleProperty {
  color: #c792ea;
}

.styleValue {
  color: rgba(255, 255, 255, 0.85);
}

.timestamp {
  font-size: 0.625rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.35);
  font-variant-numeric: tabular-nums;
  margin-left: 0.5rem;
  flex-shrink: 0;
}

// =============================================================================
// Quote
// =============================================================================

.quote {
  font-size: 12px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.5rem;
  padding: 0.4rem 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.25rem;
  line-height: 1.45;
}

// =============================================================================
// Read-only comment text
// =============================================================================

.commentText {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  white-space: pre-wrap;
  word-break: break-word;
}

// =============================================================================
// Textarea
// =============================================================================

.textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 0.5rem 0.625rem;
  font-size: 0.8125rem;
  font-family: inherit;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  resize: none;
  outline: none;
  transition: border-color 0.15s ease;

  &:focus {
    border-color: var(--prototype-comment-color-blue);
  }

  &.green:focus {
    border-color: var(--prototype-comment-color-green);
  }

  &.readOnly {
    cursor: default;
    resize: none;
  }

  &::placeholder {
    color: rgba(255, 255, 255, 0.35);
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
  }
}

// =============================================================================
// Actions
// =============================================================================

.actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

.cancel,
.submit {
  padding: 0.4rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 1rem;
  border: none;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    opacity 0.15s ease;
}

.cancel {
  background: transparent;
  color: rgba(255, 255, 255, 0.5);

  &:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
  }
}

.submit {
  color: white;

  &:hover:not(:disabled) {
    filter: brightness(0.9);
  }

  &:disabled {
    cursor: not-allowed;
  }
}

// Delete button wrapper
.deleteWrapper {
  margin-right: auto;
}

.deleteButton {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    transform 0.1s ease;

  &:hover {
    background-color: color-mix(
      in srgb,
      var(--prototype-comment-color-red) 25%,
      transparent
    );
    color: var(--prototype-comment-color-red);
  }

  &:active {
    transform: scale(0.92);
  }
}

// =============================================================================
// Light Mode
// =============================================================================

.light {
  &.popup {
    background: #fff;
    box-shadow:
      0 4px 24px rgba(0, 0, 0, 0.12),
      0 0 0 1px rgba(0, 0, 0, 0.06);
  }

  .element {
    color: rgba(0, 0, 0, 0.6);
  }

  .timestamp {
    color: rgba(0, 0, 0, 0.4);
  }

  .chevron {
    color: rgba(0, 0, 0, 0.4);
  }

  .stylesBlock {
    background: rgba(0, 0, 0, 0.03);
  }

  .styleLine {
    color: rgba(0, 0, 0, 0.75);
  }

  .styleProperty {
    color: #7c3aed;
  }

  .styleValue {
    color: rgba(0, 0, 0, 0.75);
  }

  .quote {
    color: rgba(0, 0, 0, 0.55);
    background: rgba(0, 0, 0, 0.04);
  }

  .commentText {
    color: rgba(0, 0, 0, 0.85);
  }

  .textarea {
    background: rgba(0, 0, 0, 0.03);
    color: #121212;
    border-color: rgba(0, 0, 0, 0.12);

    &::placeholder {
      color: rgba(0, 0, 0, 0.4);
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.15);
    }
  }

  .cancel {
    color: rgba(0, 0, 0, 0.5);

    &:hover {
      background: rgba(0, 0, 0, 0.06);
      color: rgba(0, 0, 0, 0.75);
    }
  }

  .submit {
    background: transparent;
    color: rgba(0, 0, 0, 0.5);

    &:hover:not(:disabled) {
      background: rgba(0, 0, 0, 0.06);
      filter: none;
    }

    &:disabled {
      color: rgba(0, 0, 0, 0.3);
    }
  }

  .deleteButton {
    color: rgba(0, 0, 0, 0.4);

    &:hover {
      background-color: color-mix(
        in srgb,
        var(--prototype-comment-color-red) 25%,
        transparent
      );
      color: var(--prototype-comment-color-red);
    }
  }
}