feat: Added Tailwind PostCSS to the projetct

Author: gbdiniz

.gitignore

@@ -1,4 +1,3 @@
-<<<<<<< HEAD
 .env
 
 .pytest_cache/
@@ -16,25 +15,8 @@ content/
 dist/
 build/
 *.egg-info/
-scripts/
-=======
-.env
-
-.pytest_cache/
-
-**/__pycache__/
-*.py[cod]
-*$py.class
-*.so
-
-content/
-.venv/
-.venv_readme_check/
-.ruff_cache/
-.mypy_cache/
-dist/
-build/
-*.egg-info/
-scripts/
-
->>>>>>> 124ae17972dd35902cec901ff1819bd5be55891f
+scripts/
+CLAUDE.md
+
+node_modules/
+frontend/assets/css/output.css

frontend/assets/css/tailwind.css

@@ -0,0 +1 @@
+@import "tailwindcss";

frontend/assets/css/theme.css

@@ -22,7 +22,7 @@
 *::after {
     box-sizing: border-box;
     margin: 0;
-    padding: 0;
+    /* padding: 0; */
 }
 
 html,
@@ -244,13 +244,13 @@ body {
 /* ===== Input Area ===== */
 .input-area {
     padding: 16px 24px 20px;
-    border-top: 1px solid var(--border);
+    /* border-top: 1px solid var(--border); */
     background: var(--surface);
     transition: box-shadow 0.2s ease;
 }
 
 .input-area.input-area--silo {
-    box-shadow: inset 0 2px 0 0 var(--accent);
+    /* box-shadow: inset 0 2px 0 0 var(--accent); */
 }
 
 .silo-pill {
@@ -321,28 +321,28 @@ body {
 .input-row {
     display: flex;
     gap: 10px;
-    align-items: flex-end;
+    align-items: center;
 }
 
 #message-input {
     flex: 1;
-    background: var(--surface-2);
-    border: 1px solid var(--border);
+    /* background: var(--surface-2); */
+    /* border: 1px solid var(--border); */
     color: var(--text);
     font-family: 'Inter', sans-serif;
-    font-size: 14.5px;
+    font-size: 1.1rem;
     padding: 11px 14px;
     resize: none;
     outline: none;
     min-height: 44px;
     max-height: 140px;
     line-height: 1.5;
-    border-radius: var(--radius);
+    /* border-radius: var(--radius); */
 }
 
-#message-input:focus {
+/* #message-input:focus {
     border-color: var(--accent);
-}
+} */
 
 #send-button {
     flex-shrink: 0;
@@ -356,7 +356,7 @@ body {
     justify-content: center;
     color: #fff;
     font-size: 18px;
-    border-radius: var(--radius);
+    /* border-radius: var(--radius); */
 }
 
 #send-button:hover:not(:disabled) {
@@ -418,6 +418,71 @@ body {
     color: var(--accent);
 }
 
+/* ===== Scope Selector ===== */
+#scope-btn {
+    background: var(--surface-2);
+    border: 1px solid var(--border);
+    color: var(--text-muted);
+    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+}
+
+#scope-btn:hover {
+    background: var(--surface-2);
+    border-color: var(--accent);
+    color: var(--text);
+}
+
+#scope-btn[aria-expanded="true"] {
+    border-color: var(--accent);
+    color: var(--accent);
+}
+
+#scope-menu {
+    bottom: calc(100% + 10px);
+    min-width: 252px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transform: translateY(6px);
+    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
+}
+
+#scope-menu.open {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+    transform: translateY(0);
+}
+
+.scope-menu-label {
+    font-family: 'Inter', sans-serif;
+    color: var(--text-muted);
+    letter-spacing: 0.06em;
+}
+
+.scope-option {
+    background: transparent;
+    border: none;
+    font-family: 'Inter', sans-serif;
+    transition: background 0.1s ease;
+}
+
+.scope-option:hover {
+    background: var(--surface-2);
+}
+
+.scope-option-cmd {
+    color: var(--accent);
+    font-family: var(--font-mono);
+}
+
+.scope-option-desc {
+    color: var(--text-muted);
+}
+
 /* ===== Responsividade ===== */
 @media (max-width: 600px) {
     .app {
@@ -429,7 +494,7 @@ body {
     }
 
     .input-area {
-        padding: 12px 16px 16px;
+        padding: 12px 16px 12px 16px;
     }
 
     .message {