first commit

public/assets/styles/base.css

@@ -0,0 +1,236 @@
+:root {
+    --bg: #0f172a;
+    --panel: #020617;
+    --border: #334155;
+    --text: #d3d6dc;
+    --muted: #94a3b8;
+    --accent: #2563eb;
+    --user: #1e40af;
+    --assistant: #020617;
+    --danger: #dc2626;
+}
+
+body {
+    font-family: system-ui, sans-serif;
+    background: var(--bg);
+    color: var(--text);
+    margin: 0;
+    padding: 2rem;
+    font-size: 0.85rem;
+}
+
+h1 {
+    font-size: 1.49rem;
+}
+
+h2 {
+    font-size: 1.31rem;
+}
+
+h3 {
+    font-size: 1.13rem;
+}
+
+h4, h5, h6 {
+    font-size: 0.95rem;
+}
+
+form, input, button, textarea {
+    font-size: 0.85rem !important;
+}
+
+.container {
+    max-width: 900px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - 4rem);
+}
+
+.header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+}
+
+.header .spacer {
+    flex: 1;
+}
+
+.chat {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1rem;
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+}
+
+.message {
+    margin-bottom: 1.2rem;
+}
+
+.message.user {
+    text-align: right;
+}
+
+.message.user .bubble {
+    background: var(--user);
+    margin-left: auto;
+}
+
+.message.assistant .bubble {
+    background: var(--assistant);
+    border: 1px solid var(--border);
+}
+
+.bubble {
+    max-width: 80%;
+    padding: 0.75rem 1rem;
+    border-radius: 6px;
+    line-height: 1.5;
+}
+
+.bubble.loader {
+    font-style: italic;
+    color: var(--muted);
+}
+
+/* Markdown styling */
+.bubble p {
+    margin: 0.4rem 0;
+}
+
+.bubble ul {
+    padding-left: 1.2rem;
+}
+
+.bubble code {
+    background: rgba(148, 163, 184, 0.15);
+    padding: 0.15rem 0.35rem;
+    border-radius: 4px;
+    font-family: ui-monospace, monospace;
+}
+
+.bubble pre {
+    background: #020617;
+    border: 1px solid #334155;
+    border-radius: 6px;
+    padding: 0.75rem;
+    overflow-x: auto;
+}
+
+.bubble h1,
+.bubble h2,
+.bubble h3,
+.bubble h4,
+.bubble h5,
+.bubble h6{
+    margin-top: .5rem;
+    margin-bottom: 1rem;
+}
+.bubble table {
+  width: 99%
+}
+.bubble td {
+    border-top: 1px dotted;
+    padding: .5rem .5rem .5rem .0rem;
+    border-color: #6c757d;
+}
+
+.input-area {
+    margin-top: 1rem;
+    display: flex;
+    gap: 0.75rem;
+}
+
+textarea{
+    color: var(--muted) !important;
+}
+
+textarea:focus {
+    outline: none;
+    border-color: var(--muted);
+    color: #fff !important;
+}
+
+textarea::placeholder {
+    color: var(--muted) !important;
+    opacity: 1;
+}
+
+textarea::-webkit-input-placeholder {
+    color: var(--muted) !important;
+}
+
+textarea::-moz-placeholder {
+    color: var(--muted) !important;
+}
+
+textarea:-ms-input-placeholder {
+    color: var(--muted) !important;
+}
+
+textarea:-moz-placeholder {
+    color: var(--muted) !important;
+}
+
+button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.bg-dark {
+    background-color: var(--assistant) !important;
+    color: #fff;
+    border: 1px solid var(--border);
+}
+
+.btn-trans {
+    color: var(--muted);
+    border: 1px solid var(--border);
+}
+
+.btn-trans:disabled {
+    color: var(--muted);
+    border: 1px solid var(--border);
+    opacity: .4 !important;
+}
+
+.ai-cloud {
+    position: absolute;
+    bottom: 2rem;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 200px;
+    height: 200px;
+    border-radius: 50%;
+    background: radial-gradient(circle at 30% 30%, rgba(37, 99, 235, 0.4), transparent 70%),
+    radial-gradient(circle at 70% 70%, rgba(148, 163, 184, 0.3), transparent 80%),
+    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1), transparent 100%);
+    z-index: 10;
+    pointer-events: none;
+    filter: blur(30px);
+    animation: cloud-move 2s ease-in-out infinite;
+}
+
+@keyframes cloud-move {
+    0%, 100% {
+        transform: translateX(-50%) scale(.5);
+    }
+    50% {
+        transform: translateX(-50%) scale(1);
+    }
+}
+
+.chat {
+    position: relative;
+    /* ... vorhandene Styles ... */
+}
+
+#ai-cloud{
+    width: 100px;
+    height: 100px;
+    position: absolute;
+}