Portal AI

1 files changed, 240 insertions, 0 deletions

diff --git a/Software/Visual_Studio_22/Tango.Portal.Chat.Web/wwwroot/site.css b/Software/Visual_Studio_22/Tango.Portal.Chat.Web/wwwroot/site.css
new file mode 100644
index 000000000..8830753d5
--- /dev/null
+++ b/Software/Visual_Studio_22/Tango.Portal.Chat.Web/wwwroot/site.css
@@ -0,0 +1,240 @@
+/* --- Base layout --- */
+:root {
+    --bg: #0b0f14;
+    --panel: #0e1621;
+    --panel-2: #0b1220;
+    --border: #1f2a37;
+    --border-2: #2b3b4f;
+    --text: #e6edf3;
+    --muted: #a7b0c0;
+    --accent: #6ea8fe;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+    background: var(--bg);
+    color: var(--text);
+}
+
+/* Container helpers */
+.container {
+    max-width: 920px;
+    margin: 3rem auto;
+    padding: 0 1rem;
+}
+
+.card {
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 1rem 1.25rem;
+    box-shadow: 0 10px 20px rgba(0,0,0,.25);
+}
+
+.row {
+    display: flex;
+    gap: .5rem;
+    margin-top: .5rem;
+}
+
+/* Inputs */
+input, textarea {
+    flex: 1;
+    padding: .6rem .8rem;
+    border-radius: 10px;
+    border: 1px solid var(--border-2);
+    background: var(--panel-2);
+    color: var(--text);
+    outline: none;
+}
+
+textarea {
+    resize: none;
+    min-height: 44px;
+    max-height: 140px;
+}
+
+    textarea::placeholder {
+        color: #7d8aa5;
+    }
+
+button {
+    padding: .65rem .95rem;
+    border-radius: 10px;
+    border: 1px solid var(--border-2);
+    background: #162334;
+    color: var(--text);
+    cursor: pointer;
+    font-weight: 600;
+}
+
+    button:hover {
+        background: #1b2a40;
+    }
+
+    button[disabled] {
+        opacity: .6;
+        cursor: not-allowed;
+    }
+
+/* Code-ish blocks */
+pre {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    background: var(--panel-2);
+    border: 1px solid var(--border-2);
+    padding: .75rem;
+    border-radius: 8px;
+    overflow: auto; /* allow horizontal scroll for long code/KQL */
+}
+
+details {
+    margin-top: .75rem;
+}
+
+summary {
+    cursor: pointer;
+}
+
+code {
+    background: var(--panel-2);
+    padding: .1rem .35rem;
+    border-radius: 6px;
+}
+
+/* --- Chat UI --- */
+.chat {
+    display: flex;
+    flex-direction: column;
+    gap: .65rem;
+    /* REMOVED max-height/overflow so the page grows instead of inner scrolling */
+    padding: .5rem .25rem .75rem;
+}
+
+.msg {
+    display: flex;
+    gap: .5rem;
+}
+
+    .msg.user {
+        flex-direction: row-reverse;
+    }
+
+.avatar {
+    flex: 0 0 28px;
+    height: 28px;
+    border-radius: 50%;
+    background: #162334;
+    border: 1px solid var(--border-2);
+    color: var(--text);
+    display: grid;
+    place-items: center;
+    font-size: 12px;
+    font-weight: 600;
+}
+
+    .avatar.user {
+        background: #1a2b44;
+    }
+
+/* Assistant bubbles render Markdown: let block elements flow normally */
+.bubble {
+    background: var(--panel-2);
+    border: 1px solid var(--border-2);
+    border-radius: 10px;
+    padding: .55rem .7rem;
+    word-wrap: break-word;
+    max-width: 760px;
+    white-space: normal; /* no pre-wrap here */
+}
+/* Keep pre-wrap for user's plain text so their newlines are respected */
+.msg.user .bubble {
+    white-space: pre-wrap;
+}
+
+.meta {
+    color: var(--muted);
+    font-size: 12px;
+    margin-top: .2rem;
+}
+
+.err {
+    color: #ff6b6b;
+    background: #2a1216;
+    border: 1px solid #5d1a22;
+    padding: 8px 10px;
+    border-radius: 10px;
+    margin: 8px 0 0;
+    display: none;
+}
+
+/* Thinking indicator */
+.thinking {
+    opacity: .9;
+    display: inline-flex;
+    align-items: center;
+    gap: .35rem;
+}
+
+.dots {
+    display: inline-grid;
+    grid-auto-flow: column;
+    gap: 4px;
+}
+
+    .dots span {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: var(--accent);
+        opacity: .8;
+        animation: jump 1.1s infinite ease-in-out;
+    }
+
+        .dots span:nth-child(2) {
+            animation-delay: .15s
+        }
+
+        .dots span:nth-child(3) {
+            animation-delay: .3s
+        }
+
+@keyframes jump {
+    0%,80%,100% {
+        transform: translateY(0)
+    }
+
+    40% {
+        transform: translateY(-4px)
+    }
+}
+
+/* Markdown tweaks inside assistant bubbles */
+.bubble .md ol,
+.bubble .md ul {
+    margin: .4rem 0 .6rem 1.25rem;
+}
+
+.bubble .md li {
+    margin: .15rem 0;
+}
+
+.bubble .md h1, .bubble .md h2, .bubble .md h3,
+.bubble .md h4, .bubble .md h5, .bubble .md h6 {
+    margin: .4rem 0 .35rem;
+    line-height: 1.25;
+}
+
+.bubble .md p {
+    margin: .35rem 0;
+}
+
+/* Footer composer */
+.composer {
+    margin-top: .75rem;
+}