/* =========================================================
   ThinkerStreet — Reasoning Organism
   Clean interactive version
   ========================================================= */

.ts-reasoning-organism {
  --organism-accent:
    var(--response-color, #70caff);

  position: relative;

  width: 100%;
  max-width: none;

  height:
    clamp(
      250px,
      30vh,
      420px
    );

  min-height: 250px;

  margin: 0;
  padding: 0;

  overflow: hidden;

  box-sizing: border-box;

  background:
    radial-gradient(
      circle at 50% 46%,
      color-mix(
        in srgb,
        var(--organism-accent) 4%,
        transparent
      ),
      transparent 62%
    );

  pointer-events: auto;

  /*
   * Horizontal gesture belongs to the organism.
   * Vertical page scrolling remains available outside it.
   */
  touch-action: none;

  user-select: none;

  cursor: grab;

  opacity: 1;

  transition:
    opacity .32s ease;
}


.ts-reasoning-organism.is-complete {
  opacity: 0;
}


.ts-reasoning-organism.is-gesture-active {
  cursor: grabbing;
}


.ts-reasoning-organism svg {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;
}


/* =========================================================
   Relationships
   ========================================================= */

.organism-link {
  stroke:
    var(--organism-accent);

  stroke-width: 1.35;

  stroke-opacity: .38;

  stroke-linecap: round;

  filter:
    drop-shadow(
      0 0 3px
      color-mix(
        in srgb,
        var(--organism-accent) 12%,
        transparent
      )
    );
}


.organism-link.is-secondary {
  stroke-dasharray: 4 7;

  stroke-opacity: .16;
}


.organism-link.is-ghost {
  stroke-opacity: .026;
}


.organism-link.is-focus {
  stroke-opacity: .55;

  stroke-width: 1.25;
}


/*
 * Moving light beam:
 * active semantic path from current focus.
 */

.organism-beam {
  stroke:
    var(--organism-accent);

  stroke-width: 5.2;

  stroke-linecap: round;

  stroke-opacity: 0;

  filter:
    blur(4px)
    drop-shadow(
      0 0 10px
      color-mix(
        in srgb,
        var(--organism-accent) 34%,
        transparent
      )
    );
}


.organism-beam.is-active {
  stroke-opacity: .12;

  stroke-dasharray: 16 34;

  animation:
    organism-beam-flow
    2.8s
    linear
    infinite;
}


.organism-beam.is-secondary {
  stroke-dasharray: 8 28;
}


@keyframes organism-beam-flow {
  to {
    stroke-dashoffset: -50;
  }
}


/* =========================================================
   Nodes
   ========================================================= */

.organism-node {
  cursor: pointer;

  pointer-events: bounding-box;

  transition:
    opacity .42s ease,
    filter .42s ease;
}


.organism-haze {
  opacity: .52;

  filter:
    blur(15px)
    saturate(1.13);
}


.organism-haze-hot {
  opacity: .28;

  filter:
    blur(18px)
    saturate(1.16);
}


.organism-core,
.organism-inner,
.organism-haze,
.organism-haze-hot {
  stroke: none !important;
  outline: none !important;
}


.organism-core {
  filter:
    blur(1px)
    drop-shadow(
      0 0 8px
      color-mix(
        in srgb,
        var(--organism-accent) 18%,
        transparent
      )
    );

  mix-blend-mode: screen;
}


.organism-inner {
  filter: blur(2px);

  mix-blend-mode: screen;
}


.organism-node.is-focus {
  opacity: 1 !important;

  filter:
    drop-shadow(
      0 0 18px
      color-mix(
        in srgb,
        var(--organism-accent) 26%,
        transparent
      )
    ) !important;
}


.organism-node.is-neighbor-focus {
  opacity: .58 !important;

  filter:
    blur(.15px)
    saturate(1.02) !important;
}


.organism-node.is-ghost {
  opacity: .055;

  filter:
    blur(1.05px)
    saturate(.62)
    brightness(.72);
}


/* =========================================================
   Birth / reinforcement flash
   ========================================================= */

.organism-flare {
  pointer-events: none;

  mix-blend-mode: screen;
}


.organism-flare-line {
  stroke:
    var(--organism-accent);

  stroke-width: 1;

  stroke-linecap: round;

  opacity: .66;
}


.organism-flare-hot {
  fill:
    var(--organism-accent);

  stroke: none;

  opacity: .64;
}


/* =========================================================
   Labels
   ========================================================= */

.organism-label {
  fill:
    rgba(
      245,
      249,
      255,
      .96
    );

  font:
    700 15px/1.12
    system-ui,
    sans-serif;

  paint-order: stroke;

  stroke:
    rgba(
      4,
      7,
      12,
      .92
    );

  stroke-width: 3.4px;

  stroke-linejoin: round;

  pointer-events: none;

  transition:
    opacity .22s ease,
    font-size .22s ease;
}


.organism-node.is-focus
.organism-label {
  font-weight: 760;
}


/* =========================================================
   Dust
   ========================================================= */

.organism-dust {
  fill:
    var(--organism-accent);

  fill-opacity: .30;

  stroke: none;
}


.organism-spark {
  fill:
    var(--organism-accent);

  fill-opacity: .60;

  stroke: none;

  animation:
    organism-spark
    4.8s
    ease-in-out
    infinite;
}


.organism-particle {
  fill:
    var(--organism-accent);

  fill-opacity: .58;

  stroke: none;
}


.organism-particle.is-ghost,
.organism-dust.is-ghost,
.organism-spark.is-ghost {
  opacity: .04;
}


@keyframes organism-spark {
  0%,
  100% {
    fill-opacity: .16;
  }

  45% {
    fill-opacity: .62;
  }
}


/* =========================================================
   Interaction hint
   ========================================================= */

.ts-reasoning-organism::after {
  content:
    "drag to explore · wheel to zoom · tap a node for detail";

  position: absolute;

  right: 10px;
  bottom: 7px;

  z-index: 5;

  color:
    rgba(
      225,
      235,
      246,
      .16
    );

  font:
    500 8px/1.2
    system-ui,
    sans-serif;

  letter-spacing: .05em;

  text-transform: uppercase;

  pointer-events: none;
}


/* =========================================================
   Larger screens
   ========================================================= */

@media (min-width: 1200px) {

  .ts-reasoning-organism {
    height:
      clamp(
        300px,
        34vh,
        470px
      );

    min-height: 300px;
  }
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 640px) {

  .ts-reasoning-organism {
    height:
      clamp(
        230px,
        28vh,
        300px
      );

    min-height: 230px;
  }


  .organism-core,
  .organism-inner {
    filter: none !important;
  }


  .organism-label {
    font-size: 13px;

    font-weight: 700;

    stroke-width: 3px;
  }


  .ts-reasoning-organism::after {
    content:
      "swipe to explore · tap for detail";

    right: 8px;
    bottom: 6px;

    font-size: 7px;
  }
}


/* =========================================================
   Reduced motion
   ========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {

  .organism-spark,
  .organism-beam {
    animation: none !important;
  }


  .ts-reasoning-organism,
  .organism-node {
    transition: none;
  }
}


/* =========================================================
   Original thinking / reasoning block — preserved unchanged
   ========================================================= */

.response-reasoning.is-thinking>summary { height:112px;box-sizing:border-box;overflow:hidden; }
.response-reasoning.is-thinking .reasoning-preview { min-height:52px;max-height:52px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3; }

/* Reasoning panel and progress notes. */
.response-boosted { --boost-glow: color-mix(in srgb, var(--response-color) 22%, transparent); }
.response-thinking-brief { margin:0 0 14px;padding:0;border:0;background:none;box-shadow:none;color:var(--ink);font:400 17px/1.7 system-ui,sans-serif; }
.response-thinking-brief::before { content:'? Exploring the question';display:block;margin-bottom:8px;color:var(--response-color);font:600 10px/1.3 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase; }
.thinking-progress-note { margin:0 0 12px;animation:thinking-brief-in .4s ease both; }
@keyframes thinking-brief-in { from { opacity:0;transform:translateY(5px); } to { opacity:1;transform:none; } }
@media(prefers-reduced-motion:reduce) { .response-thinking-brief { animation:none; } }
.response-reasoning {
  margin: 0 0 18px;
  padding: 10px 14px;
  border-left: 2px solid color-mix(in srgb, var(--response-color) 65%, transparent);
  background: color-mix(in srgb, var(--response-color) 4%, transparent);
  border-radius: 0 10px 10px 0;
  color: #d3dbe7;
}
.response-reasoning summary {
  cursor: pointer;
  color: var(--response-color);
  font: 600 12px/1.5 system-ui, sans-serif;
}
.reasoning-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.reasoning-title { display:block; letter-spacing:.02em; }
.reasoning-answer-now { flex:0 0 auto; padding:5px 9px; border:1px solid color-mix(in srgb,var(--response-color) 55%,transparent); border-radius:999px; color:#f3f8ff; background:color-mix(in srgb,var(--response-color) 15%,#101b28); box-shadow:0 0 13px color-mix(in srgb,var(--response-color) 18%,transparent); font:600 10px/1.3 system-ui,sans-serif; cursor:pointer; transition:background 180ms ease,box-shadow 180ms ease,transform 180ms ease; }
.reasoning-answer-now:hover,.reasoning-answer-now:focus-visible { background:color-mix(in srgb,var(--response-color) 28%,#101b28); box-shadow:0 0 21px color-mix(in srgb,var(--response-color) 35%,transparent); transform:translateY(-1px); }
.reasoning-answer-now[hidden] { display:none; }
.reasoning-preview { display:block; margin-top:5px; color:#d3dbe7; font:italic 13px/1.6 ui-serif,Georgia,serif; font-weight:400; }
.response-reasoning[open] .reasoning-preview,
.response-reasoning.is-complete .reasoning-preview,
.response-reasoning.is-answering-now .reasoning-preview { display:none; }
.response-reasoning.is-thinking .reasoning-title { background:linear-gradient(105deg,var(--response-color) 30%,#f3f7ff 50%,var(--response-color) 70%); background-size:250% 100%; background-clip:text; -webkit-background-clip:text; color:transparent; animation:reasoning-shimmer 3s ease-in-out infinite; }
@keyframes reasoning-shimmer { from { background-position:150% 0; } to { background-position:-100% 0; } }
@media(prefers-reduced-motion:reduce) { .response-reasoning.is-thinking .reasoning-title { animation:none; background:none; color:var(--response-color); } }
.reasoning-text {
  margin-top: 8px;
  max-height: 160px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: italic 15px/1.75 ui-serif, Georgia, serif;
}


/* =========================================================
   Open reasoning stream — remove collapsed-summary spacer
   ========================================================= */

.response-reasoning.is-thinking[open] > summary {
  height: auto;
  min-height: 0;
  overflow: visible;
}

.response-reasoning[open] .reasoning-text {
  margin-top: 2px;
}

.response-reasoning[open] .reasoning-header {
  margin-bottom: 0;
}


/* =========================================================
   Focused concept card
   ========================================================= */

.organism-focus-card {
  position: absolute;
  z-index: 8;

  left: 50%;
  top: 66%;

  width:
    min(
      360px,
      calc(100% - 28px)
    );

  max-height: 112px;

  transform:
    translate(
      -50%,
      0
    );

  padding:
    9px 11px 10px;

  overflow-y: auto;
  overscroll-behavior: contain;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--organism-accent) 22%,
      transparent
    );

  border-radius: 12px;

  background:
    color-mix(
      in srgb,
      #0a0f18 91%,
      var(--organism-accent) 9%
    );

  box-shadow:
    0 10px 28px
    rgba(0,0,0,.24),
    inset 0 1px 0
    rgba(255,255,255,.035);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);

  color:
    rgba(
      238,
      244,
      252,
      .94
    );

  font:
    500 12.5px/1.45
    system-ui,
    sans-serif;

  opacity: 0;

  filter:
    blur(5px);

  pointer-events: none;

  transform:
    translate(
      -50%,
      10px
    )
    scale(.985);

  transition:
    opacity .17s cubic-bezier(.16,1,.3,1),
    transform .22s cubic-bezier(.16,1,.3,1),
    filter .18s cubic-bezier(.16,1,.3,1);
}


.organism-focus-card.is-visible {
  opacity: 1;

  filter:
    blur(0);

  pointer-events: auto;

  transform:
    translate(
      -50%,
      0
    )
    scale(1);
}


.organism-focus-card-title {
  display: block;

  margin: 0 0 4px;

  color:
    var(--organism-accent);

  font:
    720 12.5px/1.25
    system-ui,
    sans-serif;

  letter-spacing: .01em;
}


.organism-focus-card-text {
  margin: 0;

  color:
    rgba(
      229,
      237,
      247,
      .86
    );
}


.organism-focus-card::-webkit-scrollbar {
  width: 5px;
}


.organism-focus-card::-webkit-scrollbar-thumb {
  border-radius: 99px;

  background:
    color-mix(
      in srgb,
      var(--organism-accent) 34%,
      transparent
    );
}


@media (max-width: 640px) {

  .organism-focus-card {
    top: 64%;

    width:
      calc(
        100% - 22px
      );

    max-height: 98px;

    padding:
      8px 10px 9px;

    font-size: 11.5px;
  }
}


.organism-focus-card.is-leaving {
  opacity: 0;

  filter:
    blur(3px);

  transform:
    translate(
      -50%,
      -3px
    )
    scale(.992);

  pointer-events: none;

  transition:
    opacity .16s cubic-bezier(.4,0,1,1),
    transform .18s cubic-bezier(.4,0,1,1),
    filter .16s cubic-bezier(.4,0,1,1);
}


@media (hover: hover) and (pointer: fine) {

  .ts-reasoning-organism {
    cursor: grab;
  }


  .ts-reasoning-organism.is-gesture-active {
    cursor: grabbing;
  }


  .organism-node {
    cursor: pointer;
  }


  .organism-node:hover {
    filter:
      drop-shadow(
        0 0 15px
        color-mix(
          in srgb,
          var(--organism-accent) 22%,
          transparent
        )
      );
  }
}


.organism-focus-card-title,
.organism-focus-card-text {
  opacity: 0;

  transform:
    translateY(3px);

  transition:
    opacity .14s ease,
    transform .18s cubic-bezier(.16,1,.3,1);
}


.organism-focus-card.is-visible
.organism-focus-card-title {
  opacity: 1;

  transform:
    translateY(0);

  transition-delay: .025s;
}


.organism-focus-card.is-visible
.organism-focus-card-text {
  opacity: 1;

  transform:
    translateY(0);

  transition-delay: .055s;
}


.organism-focus-card.is-leaving
.organism-focus-card-title,
.organism-focus-card.is-leaving
.organism-focus-card-text {
  opacity: 0;

  transform:
    translateY(-2px);

  transition-delay: 0s;
}


/* =========================================================
   Central question / subject node
   ========================================================= */

.organism-node.is-question-center {
  opacity: 1 !important;

  filter:
    drop-shadow(
      0 0 24px
      color-mix(
        in srgb,
        var(--organism-accent) 30%,
        transparent
      )
    );
}


.organism-node.is-question-center .organism-label {
  font-weight: 780;

  letter-spacing: .01em;
}


.organism-question-subtitle {
  fill:
    color-mix(
      in srgb,
      var(--organism-accent) 76%,
      #f5f8ff
    );

  font:
    650 8px/1
    system-ui,
    sans-serif;

  letter-spacing: .10em;

  text-transform: uppercase;

  pointer-events: none;

  paint-order: stroke;

  stroke:
    rgba(
      4,
      7,
      12,
      .90
    );

  stroke-width: 2.6px;
}


/* =========================================================
   Central exploring node
   ========================================================= */

.organism-node.is-question-center {
  opacity: 1 !important;

  filter:
    drop-shadow(
      0 0 16px
      color-mix(
        in srgb,
        var(--organism-accent) 24%,
        transparent
      )
    ) !important;
}


.organism-node.is-question-center .organism-label {
  fill:
    rgba(
      245,
      249,
      255,
      .97
    );

  font-weight: 760;
}


.organism-node.is-question-center .organism-haze,
.organism-node.is-question-center .organism-haze-hot,
.organism-node.is-question-center .organism-core,
.organism-node.is-question-center .organism-inner {
  /* Keep the same gaseous accent treatment as ordinary nodes. */
}


.organism-node.is-question-center .organism-question-subtitle {
  display: none;
}