ux: LBC Styling, feat: thinking, feat: more tools:

web/app.js

@@ -27,6 +27,7 @@ function setMessageMarkdown(node, text) {
 function setMessageActivity(node, text, active = false) {
   const activity = node.querySelector(".message-activity");
   if (!activity) return;
+  if (text) appendThinkingStep(node, reasoningSummaryForStatus(text), { fallback: true });
   const phase = activity.querySelector(".message-phase");
   phase.innerHTML = "";
   if (text) {
@@ -48,6 +49,122 @@ function setMessageMetrics(node, metrics) {
   metricsEl.textContent = metrics || "";
 }
 
+function appendThinkingStep(node, text, options = {}) {
+  const steps = node.querySelector(".thinking-steps");
+  if (!steps || !text) return;
+  const previous = steps.lastElementChild?.textContent;
+  if (previous === text) return;
+  const item = document.createElement("li");
+  if (options.fallback) item.dataset.fallback = "true";
+  item.textContent = text;
+  steps.appendChild(item);
+}
+
+function appendThinkingText(node, text) {
+  const steps = node.querySelector(".thinking-steps");
+  if (!steps || !text) return;
+  node.querySelectorAll(".thinking-steps [data-fallback='true']").forEach((item) => item.remove());
+  node.dataset.hasModelThinking = "true";
+  let item = steps.querySelector(".thinking-raw-step");
+  if (!item) {
+    item = document.createElement("li");
+    item.className = "thinking-raw-step";
+    steps.appendChild(item);
+  }
+  item.textContent += text;
+}
+
+function createThinkTagParser(node) {
+  let buffer = "";
+  let inThinking = false;
+
+  const partialTagLength = (text) => {
+    const lower = text.toLowerCase();
+    const tags = ["<think>", "</think>"];
+    for (const tag of tags) {
+      for (let length = tag.length - 1; length > 0; length -= 1) {
+        if (lower.endsWith(tag.slice(0, length))) return length;
+      }
+    }
+    return 0;
+  };
+
+  const consume = (content, flush = false) => {
+    buffer += content;
+    let visible = "";
+
+    while (buffer) {
+      const lower = buffer.toLowerCase();
+      if (inThinking) {
+        const closeIndex = lower.indexOf("</think>");
+        if (closeIndex === -1) {
+          if (flush) {
+            appendThinkingText(node, buffer);
+            buffer = "";
+          } else {
+            const keep = partialTagLength(buffer);
+            appendThinkingText(node, buffer.slice(0, buffer.length - keep));
+            buffer = buffer.slice(buffer.length - keep);
+          }
+          break;
+        }
+        appendThinkingText(node, buffer.slice(0, closeIndex));
+        buffer = buffer.slice(closeIndex + "</think>".length);
+        inThinking = false;
+        continue;
+      }
+
+      const openIndex = lower.indexOf("<think>");
+      if (openIndex === -1) {
+        const keep = flush ? 0 : partialTagLength(buffer);
+        visible += buffer.slice(0, buffer.length - keep);
+        buffer = buffer.slice(buffer.length - keep);
+        break;
+      }
+
+      visible += buffer.slice(0, openIndex);
+      buffer = buffer.slice(openIndex + "<think>".length);
+      inThinking = true;
+    }
+
+    return visible;
+  };
+
+  return {
+    consume,
+    flush: () => consume("", true),
+  };
+}
+
+function reasoningSummaryForStatus(text) {
+  const summaries = {
+    Thinking: "Reading your request and deciding whether I need current UEX data, memory, or a draft action before answering.",
+    "Searching UEX listings": "Checking current UEX marketplace listings so the answer is grounded in live item data instead of stale memory.",
+    "Fetching listing details": "Opening the specific listing details to avoid guessing about price, seller, quantity, or status.",
+    "Checking negotiations": "Looking through active negotiations because replies and offers can change what the next move should be.",
+    "Reading negotiation messages": "Reading the negotiation thread so any drafted reply matches the actual conversation.",
+    "Drafting message for approval": "Preparing the exact message as a pending action because marketplace writes need your approval first.",
+    "Drafting listing for approval": "Preparing the listing payload as a pending action so you can review it before anything is posted.",
+    "Checking UEX notifications": "Checking notifications for fresh replies or alerts that could change the recommendation.",
+    "Writing response": "Turning the gathered context into a concise response with the relevant details and next action.",
+  };
+  if (summaries[text]) return summaries[text];
+  if (text.startsWith("Running ")) {
+    return `Using ${text.replace(/^Running\s+/, "")} to gather the missing context before answering.`;
+  }
+  return text;
+}
+
+function finishThinking(node) {
+  const thinking = node.querySelector(".thinking-log");
+  const label = node.querySelector(".thinking-summary-label");
+  if (!thinking || !label) return;
+  const startedAt = Number(thinking.dataset.startedAt || Date.now());
+  const elapsedSeconds = Math.max(1, Math.round((Date.now() - startedAt) / 1000));
+  label.textContent = `Thought for ${elapsedSeconds}s`;
+  thinking.classList.remove("thinking-active");
+}
+
 function ensureStreamingChrome(node) {
   if (node.querySelector(".message-activity")) return;
   node.innerHTML = "";
@@ -57,10 +174,22 @@ function ensureStreamingChrome(node) {
   phase.className = "message-phase";
   const metrics = document.createElement("span");
   metrics.className = "message-metrics";
+  const thinking = document.createElement("details");
+  thinking.className = "thinking-log";
+  thinking.classList.add("thinking-active");
+  thinking.dataset.startedAt = String(Date.now());
+  const thinkingSummary = document.createElement("summary");
+  const thinkingLabel = document.createElement("span");
+  thinkingLabel.className = "thinking-summary-label";
+  thinkingLabel.textContent = "Thinking...";
+  const thinkingSteps = document.createElement("ol");
+  thinkingSteps.className = "thinking-steps";
   const body = document.createElement("div");
   body.className = "message-body";
   activity.append(phase, metrics);
-  node.append(activity, body);
+  thinkingSummary.appendChild(thinkingLabel);
+  thinking.append(thinkingSummary, thinkingSteps);
+  node.append(activity, thinking, body);
 }
 
 function renderMarkdown(text) {
@@ -464,6 +593,7 @@ async function sendMessage() {
   const assistantNode = addMessage("assistant streaming", "");
   ensureStreamingChrome(assistantNode);
   let assistantText = "";
+  const thinkParser = createThinkTagParser(assistantNode);
   statusEl.textContent = "Working";
   setMessageActivity(assistantNode, "Thinking", true);
   setMessageMetrics(assistantNode, "");
@@ -498,10 +628,18 @@ async function sendMessage() {
           assistantText += event.message;
           setMessageMarkdown(assistantNode, assistantText);
         } else if (event.type === "token") {
-          assistantText += event.content;
-          setMessageMarkdown(assistantNode, assistantText);
+          const visibleContent = thinkParser.consume(event.content);
+          if (visibleContent) {
+            assistantText += visibleContent;
+            setMessageMarkdown(assistantNode, assistantText);
+          }
           messages.scrollTop = messages.scrollHeight;
         } else if (event.type === "done") {
+          const visibleContent = thinkParser.flush();
+          if (visibleContent) {
+            assistantText += visibleContent;
+            setMessageMarkdown(assistantNode, assistantText);
+          }
           renderPending(event.pending_actions || []);
         }
       }
@@ -517,6 +655,7 @@ async function sendMessage() {
     input.disabled = false;
     input.focus();
     statusEl.textContent = "Ready";
+    finishThinking(assistantNode);
     setMessageActivity(assistantNode, "");
   }
 }

web/index.html

@@ -10,9 +10,15 @@
     <main class="shell">
       <section class="workspace">
         <header class="topbar">
-          <div>
-            <h1>TraderAI</h1>
-            <p>Local Ollama chat for UEX marketplace work</p>
+          <div class="brand-block">
+            <div class="logo-wrap" aria-hidden="true">
+              <img src="/static/art/LBC_Logo.png" alt="">
+            </div>
+            <div class="brand-copy">
+              <p class="eyebrow">Lambda Banking Conglomerate</p>
+              <h1>TraderAI</h1>
+              <p>Institutional marketplace intelligence for UEX operations</p>
+            </div>
           </div>
           <div class="status" id="status">Ready</div>
         </header>

web/styles.css

@@ -1,54 +1,132 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700;800&display=swap");
+
 :root {
-  color-scheme: dark;
-  --bg: #111316;
-  --panel: #191d22;
-  --panel-2: #20262d;
-  --text: #edf1f5;
-  --muted: #97a1ad;
-  --accent: #44c2a5;
-  --accent-2: #e6b94d;
-  --border: #303842;
-  --danger: #e66b6b;
+  color-scheme: light;
+  --cream: #f7f1dc;
+  --ivory: #fffaf0;
+  --ivory-2: #fbf4df;
+  --forest: #263a1b;
+  --forest-2: #345326;
+  --forest-3: #14210f;
+  --brown: #2e1c18;
+  --muted: #6f5b50;
+  --gold: #d4af37;
+  --gold-2: #f0d681;
+  --line: #ddceb0;
+  --line-strong: #c4aa73;
+  --danger: #9f3c32;
+  --shadow: 0 24px 70px rgba(11, 19, 8, 0.34);
 }
 
 * {
   box-sizing: border-box;
 }
 
+html,
+body {
+  height: 100%;
+}
+
 body {
   margin: 0;
-  min-height: 100vh;
-  background: var(--bg);
-  color: var(--text);
-  font-family: Inter, Segoe UI, Arial, sans-serif;
+  height: 100vh;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 18% 10%, rgba(240, 214, 129, 0.24), transparent 30%),
+    radial-gradient(circle at 85% 16%, rgba(255, 250, 240, 0.12), transparent 28%),
+    linear-gradient(135deg, #14210f 0%, #263a1b 42%, #345326 100%);
+  color: var(--brown);
+  font-family: Inter, "Segoe UI", Arial, sans-serif;
+  text-rendering: geometricPrecision;
+}
+
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(115deg, rgba(255, 255, 255, 0.05), transparent 38%, rgba(0, 0, 0, 0.08));
 }
 
 .shell {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 360px;
-  gap: 1px;
-  min-height: 100vh;
-  background: var(--border);
+  grid-template-columns: minmax(0, 1fr) 380px;
+  gap: 24px;
+  height: 100vh;
+  min-height: 0;
+  overflow: hidden;
+  padding: 24px;
 }
 
 .workspace,
 .actions {
-  background: var(--panel);
+  position: relative;
+  overflow: hidden;
+  border: 1px solid rgba(240, 214, 129, 0.34);
+  border-radius: 28px;
+  background: linear-gradient(180deg, var(--ivory) 0%, var(--cream) 100%);
+  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.76);
 }
 
 .workspace {
   display: grid;
-  grid-template-rows: auto 1fr auto;
+  grid-template-rows: auto auto 1fr auto;
   min-width: 0;
+  min-height: 0;
+}
+
+.actions {
+  padding: 28px;
+  overflow: auto;
+  min-height: 0;
 }
 
 .topbar {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 20px;
+  padding: 26px 28px;
+  border-bottom: 1px solid rgba(240, 214, 129, 0.28);
+  background:
+    linear-gradient(90deg, rgba(20, 33, 15, 0.96), rgba(38, 58, 27, 0.94)),
+    radial-gradient(circle at 18% 0%, rgba(212, 175, 55, 0.24), transparent 34%);
+}
+
+.brand-block {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 18px 22px;
-  border-bottom: 1px solid var(--border);
+  gap: 18px;
+  min-width: 0;
+}
+
+.brand-copy {
+  display: grid;
+  align-items: center;
+  gap: 5px;
+  min-width: 0;
+}
+
+.logo-wrap {
+  position: relative;
+  display: grid;
+  width: 72px;
+  height: 72px;
+  flex: 0 0 72px;
+  place-items: center;
+  border: 1px solid rgba(240, 214, 129, 0.46);
+  border-radius: 22px;
+  background:
+    radial-gradient(circle at 35% 25%, rgba(240, 214, 129, 0.34), transparent 44%),
+    linear-gradient(145deg, rgba(255, 250, 240, 0.12), rgba(0, 0, 0, 0.14));
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 14px 32px rgba(0, 0, 0, 0.2);
+}
+
+.logo-wrap img {
+  width: 56px;
+  height: 56px;
+  object-fit: contain;
+  filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.28));
 }
 
 h1,
@@ -57,52 +135,91 @@ p {
   margin: 0;
 }
 
+h1,
+h2,
+.eyebrow,
+button,
+.status {
+  font-family: "Playfair Display", Georgia, serif;
+}
+
 h1 {
-  font-size: 22px;
-  font-weight: 700;
+  color: var(--ivory);
+  font-size: 36px;
+  font-weight: 800;
+  line-height: 1.02;
+  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.38);
 }
 
 h2 {
-  font-size: 16px;
   margin-bottom: 14px;
+  color: var(--brown);
+  font-size: 24px;
+  font-weight: 800;
+  line-height: 1.15;
+}
+
+.eyebrow {
+  color: var(--gold-2);
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.topbar p {
+  max-width: 580px;
+  color: rgba(255, 250, 240, 0.82);
+  font-size: 14px;
+  font-weight: 500;
 }
 
-.topbar p,
 .muted {
   color: var(--muted);
-  font-size: 13px;
+  font-size: 14px;
 }
 
 .status {
-  min-width: 76px;
-  padding: 7px 10px;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  color: var(--muted);
-  font-size: 13px;
+  min-width: 92px;
+  padding: 10px 14px;
+  border: 1px solid rgba(240, 214, 129, 0.42);
+  border-radius: 999px;
+  background: rgba(255, 250, 240, 0.1);
+  color: var(--gold-2);
+  font-size: 14px;
+  font-weight: 800;
   text-align: center;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
 }
 
 .warning {
-  padding: 10px 22px;
-  border-bottom: 1px solid rgba(230, 185, 77, 0.32);
-  background: rgba(230, 185, 77, 0.11);
-  color: #f0d28a;
-  font-size: 13px;
+  padding: 12px 28px;
+  border-bottom: 1px solid rgba(196, 170, 115, 0.38);
+  background: #f2e7bd;
+  color: #553906;
+  font-size: 14px;
+  font-weight: 600;
 }
 
 .messages {
   overflow: auto;
-  padding: 22px;
+  min-height: 0;
+  padding: 28px;
+  background:
+    radial-gradient(circle at 50% 12%, rgba(212, 175, 55, 0.1), transparent 34%),
+    linear-gradient(180deg, rgba(247, 241, 220, 0.58), rgba(255, 250, 240, 0.64));
 }
 
 .message {
-  max-width: 900px;
-  margin-bottom: 14px;
-  padding: 13px 14px;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  line-height: 1.45;
+  max-width: 920px;
+  margin-bottom: 16px;
+  padding: 17px 18px;
+  border: 1px solid rgba(221, 206, 176, 0.9);
+  border-radius: 18px;
+  color: var(--brown);
+  line-height: 1.55;
+  box-shadow: 0 16px 38px rgba(38, 58, 27, 0.11);
 }
 
 .message p {
@@ -120,52 +237,57 @@ h2 {
 
 .message ul,
 .message ol {
-  margin: 0 0 10px 20px;
+  margin: 0 0 10px 22px;
   padding: 0;
 }
 
 .message li {
-  margin: 3px 0;
+  margin: 4px 0;
 }
 
 .message li.nested {
   margin-left: 20px;
-  color: #d7dde4;
+  color: var(--muted);
 }
 
 .message strong {
-  color: #ffffff;
+  color: var(--forest);
+  font-weight: 800;
 }
 
 .message h3 {
-  margin: 12px 0 8px;
-  font-size: 15px;
-  line-height: 1.3;
+  margin: 14px 0 8px;
+  color: var(--forest);
+  font-family: "Playfair Display", Georgia, serif;
+  font-size: 19px;
+  line-height: 1.25;
 }
 
 .message h4,
 .message h5,
 .message h6 {
-  margin: 10px 0 7px;
-  font-size: 14px;
+  margin: 11px 0 7px;
+  color: var(--forest);
+  font-family: "Playfair Display", Georgia, serif;
+  font-size: 16px;
   line-height: 1.3;
 }
 
 .message hr {
   height: 1px;
-  margin: 12px 0;
+  margin: 14px 0;
   border: 0;
-  background: var(--border);
+  background: linear-gradient(90deg, transparent, rgba(196, 170, 115, 0.72), transparent);
 }
 
 .message code {
-  padding: 1px 5px;
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  background: #0e1114;
-  color: #dfe5eb;
+  padding: 2px 6px;
+  border: 1px solid rgba(38, 58, 27, 0.15);
+  border-radius: 7px;
+  background: rgba(38, 58, 27, 0.08);
+  color: var(--forest);
   font-family: Consolas, Monaco, monospace;
-  font-size: 0.92em;
+  font-size: 0.9em;
 }
 
 .message pre {
@@ -179,18 +301,21 @@ h2 {
   padding: 0;
   border: 0;
   background: transparent;
+  color: inherit;
 }
 
 .message blockquote {
   margin: 0 0 10px;
-  padding: 8px 10px;
-  border-left: 3px solid var(--accent);
-  background: rgba(68, 194, 165, 0.08);
-  color: #d7dde4;
+  padding: 11px 13px;
+  border-left: 4px solid var(--gold);
+  border-radius: 0 12px 12px 0;
+  background: rgba(212, 175, 55, 0.13);
+  color: #4b352c;
 }
 
 .message a {
-  color: #69d7bd;
+  color: var(--forest-2);
+  font-weight: 700;
 }
 
 .table-wrap {
@@ -203,63 +328,147 @@ h2 {
   width: 100%;
   min-width: 420px;
   border-collapse: collapse;
-  font-size: 13px;
+  font-size: 14px;
 }
 
 .message th,
 .message td {
-  padding: 8px 9px;
-  border: 1px solid var(--border);
+  padding: 9px 10px;
+  border: 1px solid var(--line);
   vertical-align: top;
 }
 
 .message th {
-  background: #20262d;
-  color: #ffffff;
-  font-weight: 700;
+  background: rgba(38, 58, 27, 0.11);
+  color: var(--forest);
+  font-weight: 800;
 }
 
 .message.user {
   margin-left: auto;
-  background: var(--panel-2);
+  border-color: rgba(52, 83, 38, 0.28);
+  background: linear-gradient(180deg, #edf3df, #e5efd4);
 }
 
 .message.assistant {
-  background: #15191e;
+  background: rgba(255, 250, 240, 0.96);
 }
 
 .message.warning-message {
-  border-color: rgba(230, 185, 77, 0.42);
-  background: rgba(230, 185, 77, 0.1);
+  border-color: rgba(212, 175, 55, 0.6);
+  background: #f5eac4;
 }
 
 .composer-wrap {
-  border-top: 1px solid var(--border);
+  border-top: 1px solid var(--line);
+  background: rgba(255, 250, 240, 0.88);
 }
 
 .message-activity {
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(90px, 1fr) auto minmax(90px, 1fr);
   align-items: center;
-  justify-content: space-between;
   gap: 12px;
-  min-height: 20px;
-  margin-bottom: 6px;
-  color: rgba(151, 161, 173, 0.82);
+  min-height: 32px;
+  margin: -4px 0 9px;
+  padding: 5px 8px;
+  border: 1px solid rgba(221, 206, 176, 0.68);
+  border-radius: 12px;
+  background: rgba(247, 241, 220, 0.52);
+  color: var(--muted);
   font-size: 12px;
+  font-weight: 600;
 }
 
 .message-phase {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
+  grid-column: 2;
   min-width: 0;
+  line-height: 1;
+  text-align: center;
 }
 
 .message-metrics {
-  color: rgba(151, 161, 173, 0.56);
+  grid-column: 3;
+  justify-self: end;
+  color: #8b7769;
   text-align: right;
   white-space: nowrap;
 }
 
+.thinking-log {
+  margin: 0 0 10px;
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.thinking-log summary {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  min-height: 28px;
+  padding: 3px 2px;
+  color: #7b6b60;
+  cursor: pointer;
+  font-weight: 700;
+  list-style: none;
+}
+
+.thinking-log summary::-webkit-details-marker {
+  display: none;
+}
+
+.thinking-log summary::before {
+  content: "";
+  width: 7px;
+  height: 7px;
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  transform: rotate(-45deg);
+  transition: transform 160ms ease;
+}
+
+.thinking-log[open] summary::before {
+  transform: rotate(45deg) translateY(-1px);
+}
+
+.thinking-log.thinking-active summary {
+  color: var(--forest);
+}
+
+.thinking-steps {
+  max-width: 720px;
+  margin: 3px 0 2px 16px;
+  padding: 2px 0 2px 16px;
+  border-left: 2px solid rgba(111, 91, 80, 0.2);
+  color: #7b6b60;
+  list-style: none;
+}
+
+.thinking-steps li {
+  position: relative;
+  margin: 6px 0;
+  line-height: 1.45;
+}
+
+.thinking-raw-step {
+  white-space: pre-wrap;
+}
+
+.thinking-steps li::before {
+  content: "";
+  position: absolute;
+  top: 0.72em;
+  left: -21px;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: rgba(111, 91, 80, 0.42);
+  transform: translateY(-50%);
+}
+
 .working-dots {
   display: inline-flex;
   align-items: center;
@@ -269,10 +478,10 @@ h2 {
 }
 
 .working-dots i {
-  width: 4px;
-  height: 4px;
+  width: 5px;
+  height: 5px;
   border-radius: 50%;
-  background: rgba(151, 161, 173, 0.8);
+  background: var(--gold);
   animation: pulse-dot 1.2s infinite ease-in-out;
 }
 
@@ -288,7 +497,7 @@ h2 {
   0%,
   80%,
   100% {
-    opacity: 0.3;
+    opacity: 0.35;
     transform: translateY(0);
   }
   40% {
@@ -300,69 +509,100 @@ h2 {
 .composer {
   display: grid;
   grid-template-columns: 1fr auto;
-  gap: 12px;
-  padding: 16px;
+  gap: 14px;
+  padding: 20px;
 }
 
 textarea {
   width: 100%;
-  resize: vertical;
-  min-height: 48px;
+  min-height: 58px;
   max-height: 180px;
-  padding: 12px;
-  border: 1px solid var(--border);
-  border-radius: 8px;
+  padding: 16px 17px;
+  resize: vertical;
+  border: 1px solid var(--line-strong);
+  border-radius: 18px;
   outline: none;
-  background: #101316;
-  color: var(--text);
+  background: #fffdf7;
+  color: var(--brown);
   font: inherit;
+  font-size: 15px;
+  line-height: 1.45;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 28px rgba(38, 58, 27, 0.08);
+}
+
+textarea::placeholder {
+  color: #88776c;
+}
+
+textarea:focus {
+  border-color: var(--gold);
+  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.22), 0 10px 28px rgba(38, 58, 27, 0.09);
 }
 
 textarea:disabled {
-  opacity: 0.62;
+  opacity: 0.66;
 }
 
 button {
-  min-width: 92px;
+  min-width: 104px;
   border: 0;
-  border-radius: 8px;
-  background: var(--accent);
-  color: #07110f;
-  font-weight: 700;
+  border-radius: 18px;
+  background: linear-gradient(180deg, #345326, #1f3416);
+  color: var(--ivory);
+  font-weight: 800;
   cursor: pointer;
+  box-shadow: 0 16px 28px rgba(31, 52, 22, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.14);
+  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
+}
+
+button:hover {
+  background: linear-gradient(180deg, #3d612c, #263e1b);
+  box-shadow: 0 18px 34px rgba(31, 52, 22, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.16);
+  transform: translateY(-1px);
+}
+
+button:active {
+  transform: translateY(0);
 }
 
 button.secondary {
   min-width: 0;
-  padding: 9px 12px;
-  border: 1px solid var(--border);
-  background: transparent;
-  color: var(--text);
+  padding: 10px 14px;
+  border: 1px solid var(--line-strong);
+  background: #fff9e9;
+  color: var(--forest);
+  box-shadow: 0 10px 22px rgba(38, 58, 27, 0.08);
 }
 
 .small-button {
   min-width: 0;
-  padding: 6px 9px;
-  font-size: 12px;
+  padding: 8px 12px;
+  font-size: 13px;
 }
 
 .danger-button {
   width: 100%;
   min-width: 0;
-  padding: 9px 10px;
-  margin: 10px 0;
-  border: 1px solid rgba(230, 107, 107, 0.45);
-  background: rgba(230, 107, 107, 0.14);
-  color: #f0b1b1;
+  padding: 12px 14px;
+  margin: 14px 0;
+  border: 1px solid rgba(159, 60, 50, 0.28);
+  background: linear-gradient(180deg, #fff5e9, #f5e6d4);
+  color: var(--danger);
+  box-shadow: 0 12px 25px rgba(88, 43, 33, 0.1);
 }
 
-.actions {
-  padding: 18px;
-  overflow: auto;
+.danger-button:hover {
+  background: linear-gradient(180deg, #fff2e5, #edd8c6);
+  color: #7f2d25;
 }
 
 .side-section {
-  margin-bottom: 22px;
+  margin-bottom: 28px;
+}
+
+.side-section + .side-section {
+  padding-top: 24px;
+  border-top: 1px solid var(--line);
 }
 
 .section-title-row {
@@ -375,116 +615,190 @@ button.secondary {
 .memory-controls {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 6px 10px;
+  gap: 11px 14px;
   color: var(--muted);
-  font-size: 12px;
+  font-size: 14px;
+  font-weight: 600;
 }
 
 .memory-controls label {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
+}
+
+input[type="checkbox"] {
+  width: 15px;
+  height: 15px;
+  accent-color: var(--forest);
 }
 
 .memory-inspector {
-  font-size: 12px;
+  font-size: 13px;
+  line-height: 1.35;
 }
 
 .memory-counts {
-  color: var(--text);
-  margin-bottom: 6px;
+  margin-bottom: 7px;
+  color: var(--brown);
+  font-weight: 800;
 }
 
 .memory-path {
+  margin-bottom: 12px;
   overflow-wrap: anywhere;
   color: var(--muted);
-  margin-bottom: 10px;
 }
 
 .memory-group {
-  margin-bottom: 8px;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  background: #15191e;
+  margin-bottom: 10px;
+  border: 1px solid var(--line);
+  border-radius: 16px;
+  background: rgba(255, 250, 240, 0.76);
 }
 
 .memory-group summary {
+  padding: 11px 13px;
+  color: var(--forest);
   cursor: pointer;
-  padding: 9px 10px;
-  color: var(--text);
+  font-weight: 800;
 }
 
 .memory-group pre {
-  margin: 0 10px 10px;
+  margin: 0 12px 12px;
   white-space: pre-wrap;
 }
 
 .pending-empty {
   color: var(--muted);
-  font-size: 13px;
+  font-size: 15px;
+  font-weight: 500;
 }
 
 .pending-card {
-  padding: 12px;
-  margin-bottom: 12px;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  background: #15191e;
+  padding: 15px;
+  margin-bottom: 14px;
+  border: 1px solid var(--line);
+  border-radius: 18px;
+  background: rgba(255, 250, 240, 0.82);
+  box-shadow: 0 14px 32px rgba(38, 58, 27, 0.1);
 }
 
 .pending-card strong {
   display: block;
   margin-bottom: 8px;
+  color: var(--forest);
+  font-family: "Playfair Display", Georgia, serif;
+  font-size: 17px;
 }
 
 pre {
-  overflow: auto;
   max-height: 240px;
-  padding: 10px;
-  border-radius: 6px;
-  background: #0e1114;
-  color: #dfe5eb;
+  padding: 12px;
+  overflow: auto;
+  border: 1px solid rgba(38, 58, 27, 0.14);
+  border-radius: 14px;
+  background: #efe6ce;
+  color: #3c2923;
   font-size: 12px;
 }
 
 .pending-controls {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 8px;
+  gap: 10px;
 }
 
 .pending-card button {
   width: 100%;
-  padding: 10px;
+  padding: 11px;
 }
 
 .decline-button {
-  border: 1px solid var(--border);
-  background: transparent;
+  border: 1px solid var(--line-strong);
+  background: #fff9e9;
   color: var(--muted);
+  box-shadow: none;
 }
 
-@media (max-width: 860px) {
+.decline-button:hover {
+  background: #f5ead4;
+  color: var(--brown);
+}
+
+@media (max-width: 960px) {
   .shell {
     grid-template-columns: 1fr;
-  }
-
-  .actions {
-    border-top: 1px solid var(--border);
+    grid-template-rows: minmax(0, 1fr) minmax(220px, 34vh);
   }
 }
 
-@media (max-width: 560px) {
+@media (max-width: 620px) {
+  .shell {
+    gap: 14px;
+    padding: 10px;
+  }
+
+  .workspace,
+  .actions {
+    border-radius: 22px;
+  }
+
+  .topbar {
+    align-items: flex-start;
+    grid-template-columns: 1fr;
+    padding: 22px;
+  }
+
+  .brand-block {
+    align-items: flex-start;
+  }
+
+  .logo-wrap {
+    width: 58px;
+    height: 58px;
+    flex-basis: 58px;
+    border-radius: 18px;
+  }
+
+  .logo-wrap img {
+    width: 45px;
+    height: 45px;
+  }
+
+  h1 {
+    font-size: 31px;
+  }
+
+  .eyebrow {
+    font-size: 10px;
+    letter-spacing: 0.08em;
+  }
+
+  .messages,
+  .actions {
+    padding: 22px;
+  }
+
   .composer {
     grid-template-columns: 1fr;
+    padding: 18px;
   }
 
   .composer button {
     width: 100%;
-    min-height: 42px;
+    min-height: 48px;
   }
 
   .message-metrics {
     display: none;
   }
+
+  .message-activity {
+    grid-template-columns: 1fr;
+  }
+
+  .message-phase {
+    grid-column: 1;
+  }
 }