Update app.py

app.py

@@ -393,20 +393,414 @@ def load_paper_topic() -> str:
 
 BASE_CSS = r"""
 :root {
-  --bg:#ffffff; --panel:#ffffff; --line:rgba(0,0,0,.12); --text:#111111;
-  --muted:#5b5b5b; --soft:rgba(0,0,0,.62); --gold:#ff6600; --teal:#17b8a6;
-  --blue:#628dff; --chosen:#ff7a1a; --idle:#b8d8ff; --idle-stroke:#5e8fe6;
-  --query-node:#ffd8b3; --paper-node:#d7f6f2; --upload-node:#e7defe;
-  --shadow:0 16px 40px rgba(0,0,0,.12);
-}
-html,body,.gradio-container{background:#ffffff !important;font-family:Inter,ui-sans-serif,system-ui,sans-serif;}
-.gradio-container{max-width:1640px !important;padding:20px !important;}
-#dvnc-shell{border:1px solid var(--line);border-radius:28px;overflow:hidden;background:#ffffff;box-shadow:var(--shadow);padding:20px 22px 22px;}
-.hero-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:12px;border-bottom:1px solid rgba(0,0,0,.06);margin-bottom:16px;}
-.brand{display:flex;align-items:center;gap:14px;}
-.logo{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:var(--gold);background:linear-gradient(135deg,rgba(255,122,26,.12),rgba(23,184,166,.10));border:1px solid rgba(0,0,0,.08);}
-.brand h1{font-size:1.05rem;margin:0;font-weight:700;letter-spacing:.12em;text-transform:uppercase;}
-.brand p{margin:3px 0 0;color:var(--muted);font-size:.84rem;}
-.status{display:flex;gap:10px;align-items:center;color:var(--soft);font-size:.85rem;}
-.status-dot{width:10px;height:10px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 6px rgba(23,184,166,.10),0 0 14px rgba(23,184,166,.25);}
-.panel{background:#ffffff;border:1px solid var(--line);border-radius:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.
+  --bg: #ffffff;
+  --panel: #ffffff;
+  --line: rgba(0,0,0,.12);
+  --text: #111111;
+  --muted: #5b5b5b;
+  --soft: rgba(0,0,0,.62);
+  --gold: #ff6600;
+  --teal: #17b8a6;
+  --blue: #628dff;
+  --chosen: #ff7a1a;
+  --idle: #b8d8ff;
+  --idle-stroke: #5e8fe6;
+  --query-node: #ffd8b3;
+  --paper-node: #d7f6f2;
+  --upload-node: #e7defe;
+  --shadow: 0 16px 40px rgba(0,0,0,.12);
+}
+
+html, body, .gradio-container {
+  background: #ffffff !important;
+  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+}
+
+.gradio-container {
+  max-width: 1640px !important;
+  padding: 20px !important;
+}
+
+#dvnc-shell {
+  border: 1px solid var(--line);
+  border-radius: 28px;
+  overflow: hidden;
+  background: #ffffff;
+  box-shadow: var(--shadow);
+  padding: 20px 22px 22px;
+}
+
+.hero-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(0,0,0,.06);
+  margin-bottom: 16px;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.logo {
+  width: 42px;
+  height: 42px;
+  border-radius: 14px;
+  display: grid;
+  place-items: center;
+  color: var(--gold);
+  background: linear-gradient(135deg, rgba(255,122,26,.12), rgba(23,184,166,.10));
+  border: 1px solid rgba(0,0,0,.08);
+}
+
+.logo svg {
+  width: 24px;
+  height: 24px;
+}
+
+.brand h1 {
+  font-size: 1.05rem;
+  margin: 0;
+  font-weight: 700;
+  letter-spacing: .12em;
+  text-transform: uppercase;
+}
+
+.brand p {
+  margin: 3px 0 0;
+  color: var(--muted);
+  font-size: .84rem;
+}
+
+.status {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  color: var(--soft);
+  font-size: .85rem;
+}
+
+.status-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--teal);
+  box-shadow: 0 0 0 6px rgba(23,184,166,.10), 0 0 14px rgba(23,184,166,.25);
+}
+
+.panel {
+  background: #ffffff;
+  border: 1px solid var(--line);
+  border-radius: 22px;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
+}
+
+.querybox textarea,
+.querybox input {
+  background: transparent !important;
+  color: var(--text) !important;
+}
+
+.querybox,
+.querybox > div {
+  background: #ffffff !important;
+  border-radius: 18px !important;
+  border-color: var(--line) !important;
+}
+
+.chat-panel {
+  padding: 18px;
+  min-height: 280px;
+}
+
+.chat-thread {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.bubble {
+  max-width: 88%;
+  padding: 16px 18px;
+  border-radius: 22px;
+  border: 1px solid var(--line);
+}
+
+.bubble p {
+  margin: 8px 0 0;
+  line-height: 1.6;
+  font-size: .96rem;
+  color: var(--text);
+}
+
+.bubble .role {
+  font-size: .72rem;
+  letter-spacing: .12em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.bubble-user {
+  align-self: flex-end;
+  background: linear-gradient(135deg, rgba(98,141,255,.16), rgba(98,141,255,.08));
+}
+
+.bubble-ai {
+  align-self: flex-start;
+  background: #ffffff;
+}
+
+.bubble-system {
+  align-self: flex-start;
+  background: linear-gradient(135deg, rgba(255,122,26,.10), rgba(255,122,26,.04));
+}
+
+.model-switcher {
+  display: grid;
+  grid-template-columns: repeat(3,1fr);
+  gap: 12px;
+}
+
+.model-pill {
+  padding: 14px;
+  border: 1px solid var(--line);
+  border-radius: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-height: 98px;
+  background: #ffffff;
+}
+
+.model-pill.active {
+  border-color: rgba(255,122,26,.40);
+  background: linear-gradient(135deg, rgba(255,122,26,.10), rgba(255,255,255,.96));
+}
+
+.model-name {
+  font-weight: 650;
+  color: var(--text);
+}
+
+.model-tag {
+  font-size: .76rem;
+  text-transform: uppercase;
+  letter-spacing: .12em;
+  color: var(--gold);
+}
+
+.model-pill small {
+  color: var(--muted);
+  line-height: 1.45;
+}
+
+.brain-shell {
+  padding: 18px;
+}
+
+.brain-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: 16px;
+  margin-bottom: 10px;
+}
+
+.eyebrow {
+  font-size: .72rem;
+  letter-spacing: .16em;
+  text-transform: uppercase;
+  color: var(--gold);
+  margin: 0 0 4px;
+}
+
+.brain-header h3 {
+  margin: 0;
+  font-size: 1.12rem;
+  color: var(--text);
+}
+
+.brain-legend {
+  display: flex;
+  gap: 14px;
+  color: var(--muted);
+  font-size: .8rem;
+  flex-wrap: wrap;
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  display: inline-block;
+  border-radius: 50%;
+  margin-right: 6px;
+}
+
+.dot-live {
+  background: var(--chosen);
+  box-shadow: 0 0 10px rgba(255,122,26,.35);
+}
+
+.dot-chosen {
+  background: var(--chosen);
+}
+
+.dot-idle {
+  background: var(--idle);
+  border: 1px solid var(--idle-stroke);
+}
+
+.dot-query {
+  background: var(--query-node);
+  border: 1px solid #de9e58;
+}
+
+.dot-paper {
+  background: var(--paper-node);
+  border: 1px solid #4fb3a5;
+}
+
+.dot-upload {
+  background: var(--upload-node);
+  border: 1px solid #8f73d9;
+}
+
+.timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.agent-step {
+  border: 1px solid var(--line);
+  border-radius: 18px;
+  background: #ffffff;
+  overflow: hidden;
+}
+
+.agent-summary {
+  list-style: none;
+  display: grid;
+  grid-template-columns: 42px 1fr;
+  gap: 12px;
+  align-items: center;
+  padding: 12px;
+  cursor: pointer;
+}
+
+.agent-summary::-webkit-details-marker {
+  display: none;
+}
+
+.agent-index {
+  width: 42px;
+  height: 42px;
+  border-radius: 14px;
+  display: grid;
+  place-items: center;
+  font-weight: 700;
+  color: var(--gold);
+  background: rgba(255,122,26,.08);
+  border: 1px solid rgba(255,122,26,.18);
+}
+
+.agent-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: center;
+}
+
+.agent-head h4 {
+  margin: 0;
+  font-size: .98rem;
+  color: var(--text);
+}
+
+.agent-head span {
+  font-size: .72rem;
+  letter-spacing: .12em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.agent-copy {
+  padding: 0 14px 16px 66px;
+}
+
+.agent-copy p {
+  margin: 0;
+  color: #2d2d2d;
+  font-size: .93rem;
+  line-height: 1.6;
+}
+
+.candidate-grid {
+  display: grid;
+  grid-template-columns: repeat(3,minmax(0,1fr));
+  gap: 18px;
+}
+
+.candidate-card {
+  background: none;
+  perspective: 1400px;
+  min-height: 330px;
+}
+
+.candidate-card-inner {
+  position: relative;
+  width: 100%;
+  min-height: 330px;
+  transition: transform .8s cubic-bezier(.2,.7,.1,1);
+  transform-style: preserve-3d;
+}
+
+.candidate-card:hover .candidate-card-inner,
+.candidate-card:focus .candidate-card-inner,
+.candidate-card:focus-within .candidate-card-inner {
+  transform: rotateY(180deg);
+}
+
+.candidate-face {
+  position: absolute;
+  inset: 0;
+  padding: 20px;
+  border-radius: 22px;
+  border: 1px solid var(--line);
+  background: #ffffff;
+  color: var(--text);
+  backface-visibility: hidden;
+  box-shadow: 0 12px 24px rgba(0,0,0,.06);
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.candidate-back {
+  transform: rotateY(180deg);
+}
+
+.paper-card,
+.parse-card,
+.journal-card {
+  border: 1px solid var(--line);
+  border-radius: 18px;
+  background: #ffffff;
+}
+
+footer {
+  display: none !important;
+}
+
+@media (max-width: 1180px) {
+  .model-switcher,
+  .candidate-grid {
+    grid-template-columns: 1fr;
+  }
+}
+"""
+CSS = BASE_CSS + "\n" + getdvnclayoutcss() + "\n" + getdiscoverycss()