From 8e7f720141461b69fcbd81123a5ee1d842a2d4ad Mon Sep 17 00:00:00 2001
From: Nick Beckley <nickbeckley5@gmail.com>
Date: Wed, 29 Jul 2026 19:57:01 +0000
Subject: [PATCH] Simplify Story Intelligence character area border

---
 ...tory-intelligence-experience-prototype.css | 20 ++---------
 ...story-intelligence-experience-prototype.js | 35 +++++--------------
 2 files changed, 11 insertions(+), 44 deletions(-)

diff --git a/PlotLine/wwwroot/css/story-intelligence-experience-prototype.css b/PlotLine/wwwroot/css/story-intelligence-experience-prototype.css
index f62e7ff..59df34c 100644
--- a/PlotLine/wwwroot/css/story-intelligence-experience-prototype.css
+++ b/PlotLine/wwwroot/css/story-intelligence-experience-prototype.css
@@ -799,30 +799,16 @@ input:focus-visible {
   z-index: 34;
   width: var(--presence-width, 520px);
   height: var(--presence-height, 320px);
-  border: 1px solid rgba(125, 193, 255, 0.2);
-  border-radius: 36px;
+  border: 1px solid rgba(125, 193, 255, 0.22);
+  border-radius: 28px;
   background:
-    radial-gradient(circle at 65% 45%, rgba(87, 149, 205, 0.18), transparent 52%),
+    radial-gradient(circle at 62% 45%, rgba(87, 149, 205, 0.14), transparent 58%),
     linear-gradient(135deg, rgba(17, 41, 70, 0.22), rgba(4, 10, 20, 0.06));
   box-shadow: inset 0 0 44px rgba(125, 193, 255, 0.08), 0 22px 80px rgba(0, 0, 0, 0.16);
   pointer-events: none;
   transition: left 850ms cubic-bezier(.16, .84, .28, 1), top 850ms cubic-bezier(.16, .84, .28, 1), width 850ms cubic-bezier(.16, .84, .28, 1), height 850ms cubic-bezier(.16, .84, .28, 1);
 }
 
-.story-exp-presence-callout::after {
-  position: absolute;
-  right: -34px;
-  top: 48%;
-  width: 70px;
-  height: 44px;
-  border-top: 1px solid rgba(125, 193, 255, 0.2);
-  border-right: 1px solid rgba(125, 193, 255, 0.2);
-  border-radius: 0 28px 0 0;
-  background: linear-gradient(90deg, rgba(87, 149, 205, 0.14), transparent);
-  content: "";
-  transform: skewX(-18deg);
-}
-
 .story-character {
   position: absolute;
   display: block;
diff --git a/PlotLine/wwwroot/js/story-intelligence-experience-prototype.js b/PlotLine/wwwroot/js/story-intelligence-experience-prototype.js
index 29ceba9..3104749 100644
--- a/PlotLine/wwwroot/js/story-intelligence-experience-prototype.js
+++ b/PlotLine/wwwroot/js/story-intelligence-experience-prototype.js
@@ -713,33 +713,14 @@
       dom.visualStage.append(callout);
     }
 
-    const rects = characterNodes
-      .flatMap((node) => [
-        node.getBoundingClientRect(),
-        ...[...node.querySelectorAll(".story-character__image, .story-character__text")]
-          .map((part) => part.getBoundingClientRect())
-      ])
-      .filter((rect) => rect.width > 0 && rect.height > 0);
-    if (!rects.length) {
-      callout.remove();
-      return;
-    }
-
-    const contentLeft = Math.min(...rects.map((rect) => rect.left)) - stageRect.left;
-    const contentTop = Math.min(...rects.map((rect) => rect.top)) - stageRect.top;
-    const contentRight = Math.max(...rects.map((rect) => rect.right)) - stageRect.left;
-    const contentBottom = Math.max(...rects.map((rect) => rect.bottom)) - stageRect.top;
-    const paddingX = Math.max(46, Math.min(78, stageRect.width * 0.055));
-    const paddingY = Math.max(38, Math.min(70, stageRect.height * 0.085));
-    const maxRight = stageRect.width - 18;
-    const left = Math.max(12, contentLeft - paddingX);
-    const top = Math.max(38, contentTop - paddingY);
-    const right = Math.min(maxRight, Math.max(contentRight + paddingX, left + 320));
-    const bottom = Math.min(stageRect.height - 28, Math.max(contentBottom + paddingY, top + 230));
-    callout.style.setProperty("--presence-left", `${left}px`);
-    callout.style.setProperty("--presence-top", `${top}px`);
-    callout.style.setProperty("--presence-width", `${Math.max(300, right - left)}px`);
-    callout.style.setProperty("--presence-height", `${Math.max(210, bottom - top)}px`);
+    const left = Math.max(14, stageRect.width * 0.018);
+    const top = Math.max(38, stageRect.height * 0.062);
+    const right = Math.min(stageRect.width * 0.71, stageRect.width - 330);
+    const bottom = Math.min(stageRect.height - 62, stageRect.height * 0.78);
+    callout.style.setProperty("--presence-left", `${Math.round(left)}px`);
+    callout.style.setProperty("--presence-top", `${Math.round(top)}px`);
+    callout.style.setProperty("--presence-width", `${Math.round(Math.max(520, right - left))}px`);
+    callout.style.setProperty("--presence-height", `${Math.round(Math.max(300, bottom - top))}px`);
   }
 
   function drawConnection(id, start, end, tone, weight, label, index, obstacles, occupiedRects) {