/* ============================================================================
 * CommentThread — CSS Module
 *
 * The panel and what sits between its header and composer; those two style
 * themselves in their own modules.
 * ============================================================================ */

.panel {
  position: absolute;
  /* Nudged by however much keeps the whole panel inside the canvas viewport. */
  top: var(--p1-thread-shift, 0px);
  /* Opens beside the trigger rather than over the content being discussed. */
  right: calc(100% + 0.75rem);
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 23.25rem;
  background: var(--pds-color-surface-default, oklch(1 0 0));
  border: 1px solid var(--pds-color-border-default, oklch(0.925 0 0));
  border-radius: 1rem;
  box-shadow:
    0 12px 40px rgb(20 20 40 / 20%),
    0 2px 8px rgb(0 0 0 / 8%);
  font-family: var(--pds-typography-ff-default, 'Inter', sans-serif);
  font-size: var(--pds-typography-size-xs, 0.75rem);
  color: var(--pds-color-foreground-default, oklch(0.2178 0 0));
  text-align: left;
  cursor: auto;
}

/* Points back at the trigger the thread was opened from. A square turned on its
 * corner, showing the two sides that continue the panel's border. */
.caret {
  position: absolute;
  /* Stays level with the trigger however far the panel itself has moved. */
  top: clamp(0.75rem, calc(1.3125rem - var(--p1-thread-shift, 0px)), calc(100% - 1.75rem));
  right: -0.4375rem;
  width: 0.75rem;
  height: 0.75rem;
  background: inherit;
  border-top: 1px solid var(--pds-color-border-default, oklch(0.925 0 0));
  border-right: 1px solid var(--pds-color-border-default, oklch(0.925 0 0));
  transform: rotate(45deg);
}

.empty {
  margin: 0;
  padding: 0.875rem 1rem;
  color: var(--pds-color-foreground-default-secondary, oklch(0.5103 0 0));
  font-size: 0.75rem;
}

.skeletons {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
}

.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  color: var(--pds-color-foreground-default-secondary, oklch(0.5103 0 0));
}