Update style.css

style.css

@@ -1,76 +1,49 @@
-* {
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-    font-family: sans-serif;
+:root{
+--bg:#0f1720; /* dark background */
+--panel:#0b1116;
+--muted:#9aa4ad;
+--accent:#10a37f;
+--bubble:#111827;
 }
 
-html,
-body {
-    height: 100%;
-}
 
-body {
-    padding: 32px;
-}
+*{box-sizing:border-box}
+html,body{height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto, "Helvetica Neue",Arial}
+body{background:linear-gradient(180deg,#071018 0%, #0b1520 100%);color:#e6eef3}
+.app{max-width:900px;margin:28px auto;padding:20px}
+.app-header h1{margin:0 0 12px;font-size:20px}
+.chat-area{display:grid;grid-template-columns:320px 1fr;gap:18px}
 
-body,
-#container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
 
-#container {
-    position: relative;
-    gap: 0.4rem;
-
-    width: 640px;
-    height: 640px;
-    max-width: 100%;
-    max-height: 100%;
-
-    border: 2px dashed #D1D5DB;
-    border-radius: 0.75rem;
-    overflow: hidden;
-    cursor: pointer;
-    margin: 1rem;
-
-    background-size: 100% 100%;
-    background-position: center;
-    background-repeat: no-repeat;
-    font-size: 18px;
-}
+.controls{background:var(--panel);padding:14px;border-radius:12px;display:flex;flex-direction:column;gap:8px}
+.label{font-size:12px;color:var(--muted)}
+.single-line{background:#07121a;border:1px solid rgba(255,255,255,0.03);color:#e6eef3;padding:10px;border-radius:8px;font-size:14px;outline:none}
+.single-line::placeholder{color:rgba(230,238,243,0.5)}
+.single-line{white-space:nowrap;overflow:auto}
 
-#upload {
-    display: none;
-}
 
-svg {
-    pointer-events: none;
-}
+.send-btn{margin-top:6px;padding:10px;border-radius:10px;border:none;background:var(--accent);color:white;font-weight:600;cursor:pointer}
+.send-btn:disabled{opacity:0.6;cursor:not-allowed}
 
-#example {
-    font-size: 14px;
-    text-decoration: underline;
-    cursor: pointer;
-}
 
-#example:hover {
-    color: #2563EB;
-}
+.chat-display{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:16px;border-radius:12px;min-height:520px;overflow:auto}
+
+
+.message{display:flex;gap:12px;margin-bottom:12px}
+.msg-meta{font-size:12px;color:var(--muted);margin-bottom:6px}
+.bubble{padding:12px;border-radius:12px;max-width:78%;line-height:1.4}
+.user .bubble{background:#0b2a2a;border:1px solid rgba(255,255,255,0.02);margin-left:auto}
+.assistant .bubble{background:#0f1720;border:1px solid rgba(255,255,255,0.03)}
+
+
+.app-footer{margin-top:16px;color:var(--muted);font-size:13px}
+
+
+/* make the chat display look like stacked messages */
+.message.user{justify-content:flex-end}
+.message.assistant{justify-content:flex-start}
 
-.bounding-box {
-    position: absolute;
-    box-sizing: border-box;
-    border: solid 2px;
-}
 
-.bounding-box-label {
-    color: white;
-    position: absolute;
-    font-size: 12px;
-    margin: -16px 0 0 -2px;
-    padding: 1px;
+@media (max-width:780px){
+.chat-area{grid-template-columns:1fr;}
 }