fix(hub): polish AI coach UI with PnL colors and chat roles

Equal-height summary/chat panels, colored closed/float PnL, owner/coach labels, and optimistic thinking state.

Co-authored-by: Cursor <cursoragent@cursor.com>

manual_trading_hub/static/app.css

@@ -3344,15 +3344,20 @@ html[data-theme="light"] button.danger {
 }
 
 /* --- Hub AI 教练 --- */
+#page-ai .page-head {
+  margin-bottom: 12px;
+}
 .ai-layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
-  align-items: start;
+  align-items: stretch;
+  min-height: calc(100vh - 168px);
 }
 @media (max-width: 960px) {
   .ai-layout {
     grid-template-columns: 1fr;
+    min-height: 0;
   }
 }
 .ai-panel {
@@ -3360,17 +3365,20 @@ html[data-theme="light"] button.danger {
   border: 1px solid var(--border-soft);
   border-radius: var(--radius);
   padding: 14px 16px;
-  min-height: 420px;
+  min-height: 0;
+  height: 100%;
   display: flex;
   flex-direction: column;
   gap: 12px;
+  overflow: hidden;
 }
 .ai-panel-head {
   display: flex;
   flex-wrap: wrap;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
   gap: 8px;
+  flex-shrink: 0;
 }
 .ai-panel-head h2 {
   margin: 0;
@@ -3382,7 +3390,22 @@ html[data-theme="light"] button.danger {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
+  justify-content: flex-end;
   gap: 8px;
+  max-width: 100%;
+}
+.ai-meta-line {
+  max-width: min(420px, 100%);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.72rem;
+}
+.ai-panel-scroll {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
 }
 .ai-stats-row {
   display: flex;
@@ -3390,6 +3413,7 @@ html[data-theme="light"] button.danger {
   gap: 8px 14px;
   font-size: 0.82rem;
   color: var(--muted);
+  flex-shrink: 0;
 }
 .ai-stat-chip {
   padding: 4px 8px;
@@ -3401,10 +3425,22 @@ html[data-theme="light"] button.danger {
   color: var(--text);
   margin-right: 4px;
 }
+.ai-stat-chip.pos,
+.ai-stat-val.pos {
+  color: var(--green);
+  border-color: color-mix(in srgb, var(--green) 35%, transparent);
+}
+.ai-stat-chip.neg,
+.ai-stat-val.neg {
+  color: var(--red);
+  border-color: color-mix(in srgb, var(--red) 35%, transparent);
+}
+.ai-stat-chip.pos strong,
+.ai-stat-chip.neg strong {
+  color: inherit;
+  opacity: 0.85;
+}
 .ai-md-body {
-  flex: 1;
-  overflow: auto;
-  max-height: min(62vh, 640px);
   padding: 12px;
   border-radius: 8px;
   background: var(--inset-surface);
@@ -3412,52 +3448,94 @@ html[data-theme="light"] button.danger {
   font-size: 0.86rem;
   line-height: 1.55;
   color: var(--text);
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 .ai-placeholder {
   color: var(--muted);
   margin: 0;
 }
-.ai-chat-panel {
-  min-height: 520px;
-}
 .ai-chat-messages {
-  flex: 1;
-  overflow: auto;
-  max-height: min(52vh, 520px);
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  padding: 8px 4px;
+  gap: 12px;
+  padding: 8px 4px 4px;
+}
+.ai-msg-row {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-width: 100%;
+}
+.ai-msg-row-user {
+  align-self: flex-end;
+  align-items: flex-end;
+  max-width: 88%;
+}
+.ai-msg-row-coach {
+  align-self: flex-start;
+  align-items: flex-start;
+  max-width: 92%;
+}
+.ai-msg-role {
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: var(--muted);
+  padding: 0 4px;
+}
+.ai-msg-row-user .ai-msg-role {
+  color: var(--accent);
+}
+.ai-msg-row-coach .ai-msg-role {
+  color: var(--accent-2);
 }
 .ai-bubble {
-  max-width: 92%;
+  width: 100%;
   padding: 10px 12px;
   border-radius: 10px;
   font-size: 0.88rem;
   line-height: 1.5;
   white-space: pre-wrap;
+  overflow-wrap: anywhere;
   word-break: break-word;
 }
 .ai-bubble-user {
-  align-self: flex-end;
   background: var(--accent-dim);
   border: 1px solid var(--border);
 }
 .ai-bubble-assistant {
-  align-self: flex-start;
   background: var(--inset-surface);
   border: 1px solid var(--border-soft);
 }
+.ai-bubble-thinking {
+  color: var(--muted);
+  font-style: italic;
+  animation: ai-think-pulse 1.2s ease-in-out infinite;
+}
+@keyframes ai-think-pulse {
+  0%,
+  100% {
+    opacity: 0.55;
+  }
+  50% {
+    opacity: 1;
+  }
+}
 .ai-chat-form {
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 8px;
   align-items: end;
+  flex-shrink: 0;
+  padding-top: 4px;
+  border-top: 1px solid var(--border-soft);
 }
 .ai-chat-form textarea {
   width: 100%;
   resize: vertical;
   min-height: 72px;
+  max-height: 160px;
   padding: 10px 12px;
   border-radius: 8px;
   border: 1px solid var(--border-soft);
@@ -3470,4 +3548,7 @@ html[data-theme="light"] button.danger {
   outline: none;
   border-color: var(--accent);
 }
+.ai-chat-form textarea:disabled {
+  opacity: 0.65;
+}