neuroalpha 0.3.16 → 0.5.1

package/public/styles.css

@@ -13,6 +13,8 @@
   --best-bg: #13241a;
   --flash-bg: #2a1f45;
   --chat-w: 38%;
+  --accent-bg: rgba(79, 140, 255, 0.14);
+  --hover-bg: rgba(255, 255, 255, 0.05);
 }
 body.light {
   --bg: #f6f8fa;
@@ -27,6 +29,8 @@ body.light {
   --violet: #8250df;
   --best-bg: #dcfce7;
   --flash-bg: #ede9fe;
+  --accent-bg: rgba(36, 87, 214, 0.09);
+  --hover-bg: #f0f3f6;
 }
 * { box-sizing: border-box; }
 html, body { height: 100%; }
@@ -38,10 +42,10 @@ body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 syst
 .neg { color: var(--red); }
 h4 { margin: 18px 0 6px; font-size: 13px; color: var(--muted); font-weight: 500; }
 
-header { height: 46px; display: flex; justify-content: space-between; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--line); }
-.brand { display: flex; gap: 8px; align-items: baseline; }
+header { height: 48px; display: flex; justify-content: space-between; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--panel); }
+.brand { display: flex; gap: 8px; align-items: center; }
 .logo { color: var(--accent); font-size: 18px; }
-.hright { display: flex; gap: 10px; align-items: center; }
+.hright { display: flex; gap: 8px; align-items: center; }
 .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); display: inline-block; cursor: help; }
 .dot.ok { background: var(--green); }
 .dot.warn { background: var(--yellow); }
@@ -49,17 +53,37 @@ header { height: 46px; display: flex; justify-content: space-between; align-item
 
 input, select, textarea { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font: inherit; }
 textarea { resize: none; width: 100%; }
-button { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 6px 12px; cursor: pointer; font: inherit; font-weight: 500; }
-button:hover { border-color: var(--accent); }
+button, a.hdr-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  background: var(--panel);
+  color: var(--text);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  padding: 5px 12px;
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.35;
+  text-decoration: none;
+  transition: background .15s, border-color .15s, color .15s;
+}
+button:hover:not(:disabled), a.hdr-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--hover-bg); }
 button:disabled { opacity: .55; cursor: default; }
-button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
-button.icon { padding: 2px 8px; color: var(--text); background: transparent; }
+button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
+button.primary:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff; filter: brightness(1.08); }
+button.icon { padding: 4px 9px; color: var(--text); background: var(--panel); border: 1px solid var(--line); }
 button.icon-lg { width: 40px; height: 40px; padding: 0; font-size: 15px; flex: none; }
+.hdr-btn { padding: 4px 10px; font-size: 12.5px; }
+.hdr-btn.icon-only { width: 30px; height: 30px; padding: 0; }
 
-main { display: grid; grid-template-columns: var(--chat-w) 5px 1fr; height: calc(100vh - 46px); }
+main { display: grid; grid-template-columns: var(--chat-w) 5px 1fr; height: calc(100vh - 48px); }
 body.chat-closed main { grid-template-columns: 1fr; }
 body.chat-closed .chat, body.chat-closed #splitter { display: none; }
-#btn-chat-toggle.active { border-color: var(--accent); color: var(--accent); background: rgba(79, 140, 255, 0.1); }
+#btn-chat-toggle.active { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); font-weight: 600; }
 #splitter { cursor: col-resize; background: var(--line); transition: background .15s; }
 #splitter:hover, #splitter.drag { background: var(--accent); }
 body.dragging { cursor: col-resize; user-select: none; }
@@ -210,15 +234,16 @@ body.light .tbadge.run { background: #dbeafe; border-color: #93c5fd; }
 .ld-sym { font-size: 11px; padding: 2px 7px; border-radius: 5px; background: var(--bg); border: 1px solid var(--line); color: var(--text); }
 .ld-sym.ok { border-color: rgba(63, 185, 80, 0.5); color: var(--green); }
 .verdict { margin: 10px 0; font-size: 13.5px; line-height: 1.45; }
-.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
-@media (max-width: 1180px) { .kpis { grid-template-columns: repeat(3, 1fr); } }
-.kpi { background: var(--bg); padding: 10px 14px; cursor: help; }
-.kpi .v { font-size: 21px; font-weight: 600; line-height: 1.2; }
-.kpi .l { font-size: 12px; color: var(--muted); margin-top: 2px; }
-.kpi .sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.3; }
-.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin: 14px 0 6px; }
-.seg button { border: 0; border-radius: 0; padding: 3px 10px; font-size: 12px; color: var(--muted); }
-.seg button.active { background: var(--panel); color: var(--text); }
+.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
+.kpi { background: var(--bg); padding: 10px 14px; cursor: help; min-width: 0; }
+.kpi .v { font-size: 19px; font-weight: 600; line-height: 1.25; word-break: break-word; }
+.kpi .l { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.35; word-break: break-word; }
+.kpi .sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.3; word-break: break-word; }
+.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin: 14px 0 6px; background: var(--panel); }
+.seg button { border: 0; border-right: 1px solid var(--line); border-radius: 0; padding: 4px 11px; font-size: 12.5px; color: var(--muted); background: transparent; }
+.seg button:last-child { border-right: 0; }
+.seg button:hover { color: var(--accent); background: var(--hover-bg); }
+.seg button.active { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
 .chart { height: 260px; }
 .chart.small { height: 160px; }
 .legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 4px; }
@@ -279,8 +304,6 @@ body.light .msg.user { background: #dbe8ff; color: #1f2328; }
 body.light details.think summary { color: var(--violet); }
 body.light .think-body { color: #4b5563; }
 body.light .scard { background: var(--panel); }
-body.light .snav button.active { background: #eaeef2; color: var(--text); }
-body.light .snav button:hover { background: #f0f3f6; }
 body.light .progress .bar { background: linear-gradient(90deg, #b6d0ff 0%, #60a5fa 50%, #b6d0ff 100%); background-size: 200% 100%; }
 body.light .feed-down, body.light #toast div { box-shadow: 0 6px 20px rgba(15, 23, 42, 0.14); }
 body.light ::-webkit-scrollbar-thumb { background: #c1c8d1; border-color: var(--bg); }
@@ -288,25 +311,25 @@ body.light ::-webkit-scrollbar-thumb:hover { background: #9aa4b2; }
 body.light .feed, body.light .tab, body.light .think-body, body.light .modal .md { scrollbar-color: #c1c8d1 transparent; }
 body.light input[type=checkbox].switch { background: #d0d7de; border-color: #afb8c1; }
 body.light input[type=checkbox].switch::after { background: #fff; }
-body.light input[type=checkbox].switch:checked { background: #1a7f37; border-color: #1a7f37; }
+body.light input[type=checkbox].switch:checked { background: var(--accent); border-color: var(--accent); }
 .headbar { display: grid; grid-template-columns: 1fr 140px 56px; gap: 8px; align-items: center; font-size: 12.5px; padding: 1px 0; }
 .headbar .b { height: 6px; background: var(--panel); border-radius: 3px; position: relative; }
 .headbar .b div { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
 
 .settings-wrap { display: grid; grid-template-columns: 205px minmax(0, 1fr); gap: 24px; align-items: start; min-width: 0; }
 @media (max-width: 1100px) { .settings-wrap { grid-template-columns: 180px minmax(0, 1fr); gap: 16px; } }
-.snav { display: flex; flex-direction: column; gap: 3px; position: sticky; top: 0; min-width: 0; }
+.snav { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; min-width: 0; }
 .snav #s-search { width: 100%; margin-bottom: 10px; background: transparent; border-color: var(--line); padding: 6px 10px; font-size: 13px; }
-.snav button { text-align: left; border: 0; padding: 7px 12px; border-radius: 6px; color: var(--muted); font-size: 13.5px; }
-.snav button:hover { background: #ffffff08; color: var(--text); }
-.snav button.active { background: #262b36; color: var(--text); font-weight: 500; }
+.snav button { justify-content: flex-start; text-align: left; border: 1px solid transparent; background: transparent; padding: 7px 12px; border-radius: 6px; color: var(--muted); font-size: 13.5px; font-weight: 500; }
+.snav button:hover { background: var(--hover-bg); border-color: var(--line); color: var(--text); }
+.snav button.active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); font-weight: 600; }
 .snav .ssep { height: 1px; background: var(--line); margin: 8px 4px; }
 .snav .sreset { color: var(--muted); font-size: 12.5px; }
 .spane { min-width: 0; overflow: hidden; }
 .ssec { margin-bottom: 24px; min-width: 0; }
 .stitle { font-size: 14px; font-weight: 600; margin: 2px 0 12px; color: var(--text); }
 .stitle.bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
-.scard { background: #141820; border: 1px solid var(--line); border-radius: 10px; padding: 0 20px; min-width: 0; overflow: hidden; }
+.scard { background: #141820; border: 1px solid var(--line); border-radius: 10px; padding: 0 20px; min-width: 0; overflow-x: auto; overflow-y: visible; }
 .scard.spadded { padding: 16px 20px; }
 .srow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); }
 .srow.sblock { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 0; }
@@ -320,7 +343,7 @@ body.light input[type=checkbox].switch:checked { background: #1a7f37; border-col
 .srow input[type=number].sctrl { width: 110px; text-align: right; background: var(--bg); }
 input[type=checkbox].switch { appearance: none; width: 38px; height: 22px; background: #2b313d; border: 1px solid #3a4252; border-radius: 999px; position: relative; cursor: pointer; transition: background .15s, border-color .15s; flex: none; padding: 0; }
 input[type=checkbox].switch::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #d0d7de; top: 2px; left: 2px; transition: transform .15s, background .15s; }
-input[type=checkbox].switch:checked { background: #3fb9a0; border-color: #3fb9a0; }
+input[type=checkbox].switch:checked { background: var(--accent); border-color: var(--accent); }
 input[type=checkbox].switch:checked::after { transform: translateX(16px); background: #fff; }
 .chat-head #chat-model { max-width: 190px; min-width: 0; text-overflow: ellipsis; }
 #llm-box details { margin-top: 12px; }
@@ -372,9 +395,10 @@ table.cmp { font-size: 12.5px; }
 table.cmp th { padding: 4px 8px; font-size: 12px; }
 table.cmp td { padding: 3px 8px; }
 .secret-input { -webkit-text-security: disc; text-security: disc; font-family: monospace; }
-.brk-subtabs { display: flex; gap: 6px; margin: 10px 0 8px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
-.brk-subtabs button { background: transparent; border: 1px solid transparent; padding: 5px 12px; border-radius: 6px; font-weight: 500; color: var(--muted); }
-.brk-subtabs button.active { background: var(--bg); border-color: var(--line); color: var(--text); font-weight: 600; }
+.brk-subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 10px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
+.brk-subtabs button { background: var(--panel); border: 1px solid var(--line); padding: 5px 12px; border-radius: 6px; font-weight: 500; font-size: 13px; color: var(--muted); }
+.brk-subtabs button:hover { border-color: var(--accent); color: var(--accent); background: var(--hover-bg); }
+.brk-subtabs button.active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); font-weight: 600; }
 .brk-alloc-wrap { margin: 6px 0 12px; padding: 8px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
 .brk-alloc-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; margin-bottom: 7px; background: var(--line); }
 .brk-alloc-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); }
@@ -384,9 +408,11 @@ table.cmp td { padding: 3px 8px; }
 .brk-specs .k { color: var(--muted); }
 .brk-specs .v { color: var(--text); }
 .brk-toolbar { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; padding: 8px 0 10px; margin-bottom: 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow-x: auto; }
-.brk-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 6px; font-size: 13px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); transition: .15s; }
-.brk-toggle.on { border-color: rgba(22, 163, 74, 0.55); background: rgba(22, 163, 74, 0.14); color: #4ade80; font-weight: 600; }
-.brk-icon-btn { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 15px; flex: none; }
+.brk-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 6px; font-size: 13px; font-weight: 500; border: 1px solid var(--line); background: var(--panel); color: var(--muted); transition: .15s; }
+.brk-toggle:hover { border-color: var(--accent); color: var(--accent); background: var(--hover-bg); }
+.brk-toggle.on { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); font-weight: 600; }
+.brk-icon-btn { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 15px; flex: none; background: var(--panel); border: 1px solid var(--line); color: var(--muted); }
+.brk-icon-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--hover-bg); }
 tr.day-group-row td { background: var(--panel); color: var(--text); font-weight: 600; font-size: 12.5px; padding: 7px 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
 details.hist-year-box { margin-top: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); overflow: hidden; }
 details.hist-year-box > summary { padding: 10px 14px; cursor: pointer; font-weight: 600; font-size: 13.5px; background: var(--panel); display: flex; justify-content: space-between; align-items: center; gap: 10px; user-select: none; }
@@ -394,11 +420,101 @@ details.hist-year-box > summary:hover { border-color: var(--accent); color: var(
 details.hist-year-box[open] > summary { border-bottom: 1px solid var(--line); }
 @media (max-width: 700px) { .brk-specs { grid-template-columns: 1fr; } }
 
-@media (max-width: 900px) {
+@media (max-width: 960px) {
   body { overflow: auto; }
+  header { height: auto; min-height: 46px; padding: 6px 10px; flex-wrap: wrap; gap: 6px; }
   main { grid-template-columns: 1fr; height: auto; }
   #splitter { display: none; }
-  .chat { height: 70vh; border-bottom: 1px solid var(--line); }
-  .kpis { grid-template-columns: repeat(2, 1fr); }
+  .chat { height: 62vh; border-bottom: 1px solid var(--line); }
+  .tab { padding: 10px 12px 24px; overflow: visible; }
+  .settings-wrap { grid-template-columns: 1fr; gap: 12px; }
+  .snav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; position: static; gap: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
+  .snav button { white-space: nowrap; flex: none; padding: 6px 10px; font-size: 13px; border: 1px solid var(--line); }
+  .snav .ssep { display: none; }
+  .scard, .scard.spadded { padding: 12px 12px; }
+  .live-card, .live-card.collapsed { padding: 12px 12px; }
+  form#llm-add label, form#broker-form label { grid-template-columns: 1fr; gap: 4px; }
+  .modal { padding: 8px; }
+  .modal-box { max-height: calc(100vh - 16px); width: 100%; }
+  .kpis { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); }
   .cmp-grid { grid-template-columns: 1fr; }
 }
+
+/* Модальное окно досье акции — гарантированный вертикальный скролл без сжатия блоков */
+.stock-modal-box {
+  max-width: 1000px;
+  width: min(1000px, 96vw);
+  max-height: calc(100vh - 36px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.stock-modal-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 16px 18px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.stock-modal-body > * {
+  flex-shrink: 0;
+}
+#stock-chart-box {
+  width: 100%;
+  height: 260px;
+  min-height: 260px;
+  position: relative;
+}
+
+/* Кликабельные метки акций (досье инструмента) */
+.sym-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  color: inherit;
+  border-radius: 5px;
+  padding: 1px 5px;
+  margin: -1px -5px;
+  transition: background 0.14s, color 0.14s;
+  text-decoration: none;
+}
+.sym-link:hover {
+  background: rgba(59, 130, 246, 0.14);
+  color: var(--accent);
+}
+.sym-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  cursor: pointer;
+  padding: 1px 6px;
+  border-radius: 5px;
+  border: 1px solid var(--line);
+  background: var(--bg);
+  font-weight: 600;
+  font-size: 12px;
+  color: var(--text);
+  transition: border-color 0.14s, background 0.14s, color 0.14s;
+}
+.sym-pill:hover {
+  border-color: var(--accent);
+  background: rgba(59, 130, 246, 0.12);
+  color: var(--accent);
+}
+.stock-trait-bar {
+  height: 6px;
+  border-radius: 4px;
+  background: var(--line);
+  overflow: hidden;
+  width: 90px;
+  flex: none;
+}
+.stock-trait-bar > div {
+  height: 100%;
+  background: var(--accent);
+  border-radius: 4px;
+}