diff --git a/web/styles.css b/web/styles.css index 23f3156..64fdc3a 100644 --- a/web/styles.css +++ b/web/styles.css @@ -1,3 +1,81 @@ +body.dark { + background: #121212; + color: #eee; +} + +.top-bar { + display: flex; + justify-content: space-between; + align-items: center; +} + +.tabs button { + margin: 5px; + padding: 8px 12px; + background: #1f1f1f; + color: #eee; + border: none; + border-radius: 4px; + cursor: pointer; +} + +.chat-container { + margin-top: 20px; + max-height: 60vh; + overflow-y: auto; + border: 1px solid #333; + border-radius: 8px; + padding: 10px; +} + +.msg { + display: flex; + margin: 10px 0; +} + +.avatar { + margin-right: 10px; + font-size: 24px; +} + +.bubble { + padding: 10px; + border-radius: 8px; + max-width: 70%; +} + +.msg.user .bubble { + background: #2962ff; + color: #fff; + margin-left: auto; +} + +.msg.assistant .bubble { + background: #1e1e1e; + color: #eee; +} + +.input-bar { + margin-top: 20px; + display: flex; + gap: 10px; +} + + +.cursor { + display: inline-block; + margin-left: 4px; + animation: blink 1s infinite; +} + +@keyframes blink { + 0% { opacity: 1; } + 50% { opacity: 0; } + 100% { opacity: 1; } +} + + + body { font-family: Arial, sans-serif; background: #f5f5f5; @@ -19,6 +97,7 @@ textarea { margin-top: 10px; } + select, button { padding: 10px; margin-top: 10px;