Update style.css

style.css

@@ -1,28 +1,95 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+:root{
+  --bg-dark: #071029;
+  --panel-dark: #0b1220;
+  --glass: rgba(255,255,255,0.04);
+  --muted: #9aa6b2;
+  --accent: #7c3aed;
+  --accent-2:#5b21b6;
+  --success: #22c55e;
+  --danger: #ef4444;
+  --text: #e6eef8;
+  --glass-border: rgba(255,255,255,0.06);
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
+/* Reset */
+*{box-sizing:border-box}
+html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;}
+body{background:linear-gradient(180deg,#071029 0%, #081226 100%);color:var(--text);-webkit-font-smoothing:antialiased}
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
+/* Theme wrapper */
+#root{max-width:1200px;margin:18px auto;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;min-height:calc(100vh - 36px);}
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* glass base */
+.glass{
+  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
+  border: 1px solid var(--glass-border);
+  backdrop-filter: blur(8px) saturate(120%);
+  border-radius:12px;
+  box-shadow: 0 8px 28px rgba(2,6,23,0.6);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
-}
+/* Topbar */
+.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px}
+.brand{display:flex;gap:12px;align-items:center}
+.logo{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700}
+.titles .title{font-weight:700;font-size:16px}
+.titles .subtitle{font-size:12px;color:var(--muted)}
+.actions{display:flex;gap:12px;align-items:center}
+.status{padding:8px 10px;border-radius:10px;font-weight:700}
+.status.connected{background:rgba(34,197,94,0.08);color:var(--success)}
+.status.disconnected{background:rgba(239,68,68,0.06);color:var(--danger)}
+
+/* Layout */
+.main{display:flex;gap:16px;padding:18px;flex:1;min-height:0}
+.side{width:300px;padding:14px;display:flex;flex-direction:column;gap:12px}
+.chat{flex:1;display:flex;flex-direction:column;padding:14px;min-width:0}
+
+/* panels */
+.panel{padding:12px;border-radius:12px}
+.panel-head{display:flex;justify-content:space-between;gap:12px}
+.panel-body{margin-top:12px}
+.quick-title{font-weight:700;margin-bottom:6px}
+.rows{display:flex;flex-direction:column;gap:8px;margin-top:8px}
+.controls-vertical{display:flex;flex-direction:column;gap:8px;margin-top:12px}
+
+/* messages */
+.messages{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:10px;background-image: linear-gradient(180deg, rgba(255,255,255,0.007) 1px, transparent 1px);background-size: 100% 56px}
+.msg{max-width:78%;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,0.02);font-size:14px;line-height:1.35;word-break:break-word}
+.msg.system{color:var(--muted);font-weight:600;background:transparent}
+.msg.me{margin-left:auto;background:linear-gradient(90deg, rgba(124,58,237,0.12), rgba(59,130,246,0.06));border:1px solid rgba(124,58,237,0.06)}
+.meta{font-size:12px;color:var(--muted);margin-bottom:8px}
+.msg .img-wrap{display:block;border-radius:8px;overflow:hidden;max-width:360px}
+.msg img{display:block;max-width:100%;height:auto;border-radius:8px}
+
+/* composer */
+.composer{display:flex;gap:8px;align-items:center;padding-top:12px}
+.input{flex:1;padding:12px;border-radius:12px;border:0;background:rgba(255,255,255,0.02);color:var(--text);font-size:15px}
+.btn{padding:10px 14px;border-radius:12px;border:0;cursor:pointer;font-weight:700;background:rgba(255,255,255,0.03);color:var(--text)}
+.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 8px 20px rgba(124,58,237,0.12)}
+.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.03)}
+.icon-btn{padding:10px;border-radius:10px;background:rgba(255,255,255,0.02);border:0;cursor:pointer;font-size:18px}
+
+/* footer */
+.footer{padding:12px;text-align:center;font-size:13px}
+
+/* login overlay */
+.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(3,6,12,0.45), rgba(3,6,12,0.55));z-index:60}
+.login-card{width:92%;max-width:420px;padding:18px;border-radius:14px}
+.login-header{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:10px}
+.login-logo{width:64px;height:64px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:28px;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
+.login-form .field{display:flex;flex-direction:column;margin:8px 0}
+.login-form input{padding:12px;border-radius:10px;border:0;background:rgba(255,255,255,0.02);color:var(--text)}
+.login-row{display:flex;gap:8px;justify-content:space-between;margin-top:10px}
+.login-foot{margin-top:12px;text-align:center}
+
+/* small */
+.small{font-size:13px}
+.muted{color:var(--muted)}
+.mono{font-family:ui-monospace,monospace;background:rgba(255,255,255,0.02);padding:6px;border-radius:8px;display:inline-block}
+
+/* responsive */
+@media (max-width:900px){
+  .side{display:none}
+  .login-card{max-width:92%}
+  .msg{max-width:92%}
+}