Update static/style.css

static/style.css

@@ -1,162 +1,15 @@
-:root {
-    --primary-color: #2c3e50;
-    --secondary-color: #3498db;
-    --background-color: #f9f9f9;
-    --text-color: #333;
-    --light-gray: #f1f1f1;
-    --border-color: #ddd;
-    --shadow: 0 2px 5px rgba(0,0,0,0.1);
-}
-
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-body {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    background-color: var(--background-color);
-    color: var(--text-color);
-    line-height: 1.6;
-}
-
-.container {
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 20px;
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-}
-
-header {
-    text-align: center;
-    margin-bottom: 30px;
-    padding: 20px 0;
-    border-bottom: 1px solid var(--border-color);
-}
-
-header h1 {
-    color: var(--primary-color);
-    font-size: 2.5rem;
-    margin-bottom: 10px;
-}
-
-header p {
-    color: var(--secondary-color);
-    font-size: 1.2rem;
-}
-
-main {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-}
-
-.chat-container {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    background-color: white;
-    border-radius: 10px;
-    box-shadow: var(--shadow);
-    overflow: hidden;
-}
-
-.messages {
-    flex: 1;
-    padding: 20px;
-    overflow-y: auto;
-    max-height: 60vh;
-}
-
-.message {
-    margin-bottom: 15px;
-    display: flex;
-    flex-direction: column;
-}
-
-.message.user {
-    align-items: flex-end;
-}
-
-.message.samuel {
-    align-items: flex-start;
-}
-
-.message p {
-    padding: 12px 18px;
-    border-radius: 18px;
-    max-width: 70%;
-    word-wrap: break-word;
-}
-
-.message.user p {
-    background-color: var(--secondary-color);
-    color: white;
-    border-bottom-right-radius: 5px;
-}
-
-.message.samuel p {
-    background-color: var(--light-gray);
-    color: var(--text-color);
-    border-bottom-left-radius: 5px;
-}
-
-.input-container {
-    display: flex;
-    padding: 15px;
-    border-top: 1px solid var(--border-color);
-}
-
-#message-input {
-    flex: 1;
-    padding: 12px 15px;
-    border: 1px solid var(--border-color);
-    border-radius: 20px;
-    font-size: 16px;
-    outline: none;
-}
-
-#message-input:focus {
-    border-color: var(--secondary-color);
-}
-
-#send-button {
-    margin-left: 10px;
-    padding: 10px 20px;
-    background-color: var(--secondary-color);
-    color: white;
-    border: none;
-    border-radius: 20px;
-    font-size: 16px;
-    cursor: pointer;
-}
-
-#send-button:hover {
-    background-color: #2980b9;
-}
-
-footer {
-    text-align: center;
-    margin-top: 30px;
-    padding: 20px 0;
-    border-top: 1px solid var(--border-color);
-    color: #777;
-    font-size: 0.9rem;
-}
-
-@media (max-width: 600px) {
-    .container {
-        padding: 10px;
-    }
-    
-    header h1 {
-        font-size: 2rem;
-    }
-    
-    .message p {
-        max-width: 85%;
-    }
-}
+/* static/style.css */
+:root{--bg:#0b0b0d;--card:#0f0f13;--accent:#5ae4ff;--muted:#9aa0a6}
+*{box-sizing:border-box}
+body{margin:0;font-family:Inter,system-ui,Arial;background:var(--bg);color:#e6eef6}
+.app{display:flex;height:100vh}
+.sidebar{width:220px;background:#070708;padding:20px;border-right:1px solid #111}
+.sidebar h2{margin:0 0 12px}
+.main{flex:1;padding:24px}
+#messages{height:70vh;overflow:auto;padding:12px;background:linear-gradient(180deg,#071018,transparent);border-radius:12px}
+.msg{padding:8px 12px;border-radius:10px;margin-bottom:8px}
+.msg.me{background:#0b2b1a;align-self:flex-end}
+.msg.sam{background:linear-gradient(90deg,#05182b00,#0b2b36);}
+form{display:flex;margin-top:12px}
+input{flex:1;padding:10px;border-radius:8px;border:1px solid #272b30;background:#071017;color:#dfe7ee}
+button{margin-left:8px;padding:8px 12px;border-radius:8px;background:var(--accent);border:none}