/* =========================================================================
   Blora Design 2.0 - Thread add-on (forum comment stream)

   The core Timeline owns ordering, connecting rail and event/comment nodes.
   Thread owns one forum-comment card pattern, long-content folding, reactions
   and the comment composer. Business text/avatars/badges/actions are authored
   by the consumer with existing Blora components.
   ========================================================================= */

.blora-thread {
  max-width: 48rem;
}

blora-thread-comment,
blora-thread-composer {
  display: block;
}

/* The element upgrade is deferred by BloraElement, so the raw light-DOM tree
   would paint for one frame before render() restructures it. Hide hosts until
   the first render stamps data-blora-ready. */
blora-thread-comment:not([data-blora-ready]),
blora-thread-composer:not([data-blora-ready]) {
  visibility: hidden;
}

/* Comment card follows the former forum-reply visual language. */
.blora-thread-comment__card {
  border: 1px solid var(--blora-color-border-subtle);
  border-radius: var(--blora-radius-lg);
  background: var(--blora-color-surface-default);
  box-shadow: var(--blora-shadow-1);
  overflow: hidden;
}

.blora-thread-comment__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--blora-space-3);
  padding: var(--blora-space-4) var(--blora-space-5) 0;
  font-size: var(--blora-text-sm);
}

.blora-thread-comment__head > [slot="head"],
.blora-thread-comment__react > [slot="reactions"],
.blora-thread-composer__toolbar > [slot="toolbar"],
.blora-thread-composer__footer > [slot="actions"] {
  display: contents;
}

.blora-thread-comment__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--blora-space-2);
  min-width: 0;
  flex: 1;
}

.blora-thread-comment__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--blora-space-2);
  flex-shrink: 0;
}

.blora-thread-comment__quote {
  position: relative;
  margin: var(--blora-space-4) var(--blora-space-5) 0;
  padding-inline-start: var(--blora-space-3);
  color: var(--blora-color-text-muted);
  font-size: var(--blora-text-sm);
}

.blora-thread-comment__quote::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: var(--blora-radius-full);
  background: var(--blora-color-action-primary-default);
}

.blora-thread-comment__body {
  position: relative;
  padding: var(--blora-space-2) var(--blora-space-5) var(--blora-space-4);
  font-size: var(--blora-text-sm);
  color: var(--blora-color-text-emphasis);
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.blora-thread-comment__body p {
  margin: 0 0 0.75em;
}

.blora-thread-comment__body p:last-child {
  margin-bottom: 0;
}

/* Long content is folded only after the controller has measured it. The
   content itself progressively fades at the lower edge, matching Sidebar and
   Time Picker edge fades — no opaque overlay strip or backdrop blur. */
.blora-thread-comment[data-collapsible] .blora-thread-comment__body {
  max-height: var(--blora-thread-content-height);
  overflow: hidden;
  transition: max-height var(--blora-duration-base) var(--blora-easing-standard);
}

.blora-thread-comment[data-collapsible][data-collapsed] .blora-thread-comment__body {
  max-height: var(--blora-thread-collapse-height);
  mask-image: linear-gradient(
    to bottom,
    rgb(0 0 0) 0%,
    rgb(0 0 0) calc(100% - var(--blora-space-7)),
    transparent 100%
  );
}

/* Generated fold affordance: a compact standard button floats over the faded
   content edge. The fold container itself is transparent. */
.blora-thread-comment__fold {
  position: relative;
  z-index: var(--blora-z-base);
  display: grid;
  place-items: center;
  height: var(--blora-space-7);
  margin-top: calc(-1 * var(--blora-space-7));
  padding-inline: var(--blora-space-5);
  pointer-events: none;
}

.blora-thread-comment:not([data-collapsed]) .blora-thread-comment__fold {
  height: auto;
  margin-top: 0;
  padding: 0 var(--blora-space-5) var(--blora-space-4);
}

.blora-thread-comment__fold .blora-button[data-variant="outline"] {
  pointer-events: auto;

  --blora-button-bg: var(--blora-color-surface-default);
  --blora-button-bd: var(--blora-color-border-subtle);
  --blora-button-fg: var(--blora-color-action-primary-default);
}

.blora-thread-comment__fold .blora-button[data-variant="outline"]:hover,
.blora-thread-comment__fold .blora-button[data-variant="outline"]:active {
  --blora-button-bg: color-mix(
    in srgb,
    var(--blora-color-action-primary-default) 8%,
    var(--blora-color-surface-default)
  );
}

.blora-thread-comment__react {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--blora-space-2);
  padding: 0 var(--blora-space-5) var(--blora-space-4);
}

.blora-thread-comment__react [data-blora-thread-react] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0 0.375rem;
  gap: 0.25rem;
  white-space: nowrap;
  border: 1px dashed var(--blora-color-border-subtle);
  border-radius: var(--blora-radius-full);
  background: transparent;
  color: var(--blora-color-text-muted);
  cursor: pointer;
  transition:
    border-color var(--blora-duration-fast) var(--blora-easing-standard),
    color var(--blora-duration-fast) var(--blora-easing-standard),
    background var(--blora-duration-fast) var(--blora-easing-standard);
}

.blora-thread-comment__react [data-blora-thread-react]:hover,
.blora-thread-comment__react [data-blora-thread-react][data-active] {
  border-color: var(--blora-color-action-primary-default);
  color: var(--blora-color-action-primary-default);
  background: var(--blora-color-action-primary-tint);
}

/* -- Composer -- */

.blora-thread-composer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--blora-space-3);
  margin-top: var(--blora-space-5);
}

.blora-thread-composer__tabs {
  order: 2;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 2.625rem;
  margin-inline-start: auto;
  gap: 0;
  padding: var(--blora-space-1);
  border-radius: var(--blora-radius-full);
  background: var(--blora-color-surface-sunken);
  position: relative;
}

.blora-thread-composer__tabs-indicator {
  position: absolute;
  top: var(--blora-space-1);
  bottom: var(--blora-space-1);
  background: var(--blora-color-surface-default);
  border-radius: calc(var(--blora-radius-full) - var(--blora-space-1));
  box-shadow: var(--blora-shadow-1);
  pointer-events: none;
  z-index: var(--blora-z-base);
  transition:
    left var(--blora-duration-base) var(--blora-easing-standard),
    width var(--blora-duration-base) var(--blora-easing-standard);
}

.blora-thread-composer__tabs [data-blora-thread-tab] {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  border: 0;
  border-radius: var(--blora-radius-full);
  background: transparent;
  color: var(--blora-color-text-emphasis);
  font-family: var(--blora-font-sans);
  font-size: var(--blora-text-sm);
  font-weight: 500;
  padding: 0.45em 1em;
  cursor: pointer;
  position: relative;
  z-index: var(--blora-z-sticky);
  transition: color var(--blora-duration-base) var(--blora-easing-standard);
}

.blora-thread-composer__tabs [data-blora-thread-tab]:hover {
  color: var(--blora-color-text-primary);
}

.blora-thread-composer__tabs [data-blora-thread-tab]:focus-visible,
.blora-thread-composer__toolbar :is(button, a):focus-visible {
  outline: var(--blora-focus-ring-width) solid var(--blora-color-action-primary-default);
  outline-offset: var(--blora-focus-ring-offset);
}

.blora-thread-composer__tabs [data-blora-thread-tab][data-active] {
  color: var(--blora-color-text-emphasis);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .blora-thread-composer__tabs-indicator {
    transition: none;
  }
}

.blora-thread-composer__toolbar {
  order: 1;
  display: inline-flex;
  flex: 0 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  box-sizing: border-box;
  max-width: calc(100% - 7.5rem - var(--blora-space-3));
  height: 2.625rem;
  gap: var(--blora-space-1);
  padding: var(--blora-space-1);
  overflow: auto hidden;
  overscroll-behavior-inline: contain;
  border: 1px solid var(--blora-color-border-subtle);
  border-radius: var(--blora-radius-full);
  background: var(--blora-color-surface-default);
  box-shadow: var(--blora-shadow-1);
  scrollbar-width: none;
}

.blora-thread-composer__toolbar::-webkit-scrollbar {
  display: none;
}

.blora-thread-composer__toolbar :is(button, a) {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  flex: none;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--blora-radius-full);
  background: transparent;
  color: var(--blora-color-text-secondary);
  cursor: pointer;
  transition:
    background var(--blora-duration-fast) var(--blora-easing-standard),
    color var(--blora-duration-fast) var(--blora-easing-standard),
    transform var(--blora-duration-fast) var(--blora-easing-standard);
}

.blora-thread-composer__toolbar :is(button, a):hover {
  background: var(--blora-color-action-primary-tint);
  color: var(--blora-color-action-primary-default);
}

.blora-thread-composer__toolbar :is(button, a):active {
  transform: scale(0.94);
}

.blora-thread-composer__toolbar svg {
  width: 1rem;
  height: 1rem;
}

.blora-thread-composer__input {
  order: 3;
  box-sizing: border-box;
  width: 100%;
  min-height: 7rem;
  resize: vertical;
  padding: var(--blora-space-3) var(--blora-space-4);
  border: 1px solid var(--blora-color-border-subtle);
  border-radius: var(--blora-radius-lg);
  background: var(--blora-color-surface-default);
  color: var(--blora-color-text-secondary);
  font-family: var(--blora-font-sans);
  font-size: var(--blora-text-sm);
  line-height: var(--blora-leading-normal);
  transition:
    border-color var(--blora-duration-fast) var(--blora-easing-standard),
    box-shadow var(--blora-duration-fast) var(--blora-easing-standard),
    background var(--blora-duration-fast) var(--blora-easing-standard);
}

.blora-thread-composer__input::placeholder {
  color: var(--blora-color-text-disabled);
}

.blora-thread-composer__input:hover {
  border-color: var(--blora-color-text-subtle);
}

.blora-thread-composer__input:focus {
  outline: none;
  border-color: var(--blora-color-action-primary-default);
  box-shadow: var(--blora-focus-ring-default);
}

.blora-thread-composer__footer {
  order: 4;
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--blora-space-3);
}

.blora-thread-composer__preview {
  order: 3;
  box-sizing: border-box;
  width: 100%;
  min-height: 7rem;
  padding: var(--blora-space-3) var(--blora-space-4);
  border: 1px solid var(--blora-color-border-subtle);
  border-radius: var(--blora-radius-lg);
  background: var(--blora-color-surface-default);
}

.blora-thread-composer[data-tab="preview"] .blora-thread-composer__toolbar,
.blora-thread-composer[data-tab="preview"] .blora-thread-composer__input {
  display: none;
}