diff --git a/frontend/css/style.css b/frontend/css/style.css
index eacda03..1d79a23 100644
--- a/frontend/css/style.css
+++ b/frontend/css/style.css
@@ -519,6 +519,7 @@ textarea {
.chat-input-bar {
display: flex;
+ align-items: center;
gap: 10px;
padding: 16px 24px;
background: var(--glass-bg);
@@ -530,29 +531,99 @@ textarea {
flex: 1;
}
-.voice-btn {
- width: 46px;
- height: 46px;
- border-radius: 50%;
+/* ── Voice Toggle Switch ──────────────────────────────────────────── */
+.voice-toggle {
+ position: relative;
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+ flex-shrink: 0;
+}
+
+.voice-toggle input {
+ position: absolute;
+ opacity: 0;
+ width: 0;
+ height: 0;
+}
+
+.voice-toggle-slider {
+ width: 40px;
+ height: 22px;
background: var(--bg-input);
border: 1px solid var(--glass-border);
+ border-radius: var(--radius-full);
+ transition: all var(--transition);
+ position: relative;
+ flex-shrink: 0;
+}
+
+.voice-toggle-slider::before {
+ content: '';
+ position: absolute;
+ top: 2px;
+ left: 2px;
+ width: 16px;
+ height: 16px;
+ border-radius: 50%;
+ background: var(--text-muted);
+ transition: all var(--transition);
+}
+
+.voice-toggle input:checked+.voice-toggle-slider {
+ background: var(--gradient-btn);
+ border-color: transparent;
+ box-shadow: 0 0 12px var(--accent-glow);
+}
+
+.voice-toggle input:checked+.voice-toggle-slider::before {
+ transform: translateX(18px);
+ background: #fff;
+}
+
+.voice-toggle-icon {
+ width: 16px;
+ height: 16px;
+ margin-left: 4px;
+ color: var(--text-muted);
+ transition: color var(--transition);
+ flex-shrink: 0;
+}
+
+.voice-toggle input:checked~.voice-toggle-icon {
+ color: var(--accent);
+}
+
+/* ── Mic Button (modern, subtle) ─────────────────────────────────── */
+.mic-btn {
+ width: 42px;
+ height: 42px;
+ border-radius: 50%;
+ background: transparent;
+ border: 1px solid var(--glass-border);
color: var(--text-secondary);
- font-size: 1.2rem;
cursor: pointer;
transition: all var(--transition);
display: flex;
align-items: center;
justify-content: center;
- position: relative;
+ flex-shrink: 0;
+ padding: 0;
}
-.voice-btn:hover {
+.mic-btn svg {
+ width: 18px;
+ height: 18px;
+}
+
+.mic-btn:hover {
background: var(--bg-hover);
- color: var(--text-primary);
+ color: var(--accent);
+ border-color: var(--border-focus);
transform: scale(1.05);
}
-.voice-btn.recording {
+.mic-btn.recording {
background: linear-gradient(135deg, #fb7185, #e11d48);
color: #fff;
border-color: transparent;
@@ -560,6 +631,15 @@ textarea {
animation: recordPulse 1.8s infinite;
}
+.mic-btn.hidden {
+ display: none;
+}
+
+/* ── Utility ──────────────────────────────────────────────────────── */
+.hidden {
+ display: none !important;
+}
+
/* ── Tables ───────────────────────────────────────────────────────── */
.table-wrapper {
overflow-x: auto;
@@ -783,15 +863,14 @@ tr:hover td {
animation: avatarSpin 6s linear infinite;
}
-.avatar-placeholder {
+.avatar-img {
position: absolute;
inset: 4px;
+ width: calc(100% - 8px);
+ height: calc(100% - 8px);
border-radius: 50%;
+ object-fit: cover;
background: var(--glass-bg);
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 1.8rem;
animation: avatarBreathe 3s ease-in-out infinite;
box-shadow: inset 0 0 20px rgba(124, 108, 240, 0.08);
}
@@ -1109,4 +1188,15 @@ tr:hover td {
::selection {
background: rgba(124, 108, 240, 0.35);
color: #fff;
+}
+
+/* ── Version label ───────────────────────────────────────────────── */
+.version-label {
+ display: block;
+ text-align: center;
+ margin-top: 16px;
+ font-size: 0.7rem;
+ color: var(--text-muted);
+ letter-spacing: 0.06em;
+ opacity: 0.5;
}
\ No newline at end of file
diff --git a/frontend/index.html b/frontend/index.html
index 08bd679..93b12c2 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,5 +1,6 @@
+
@@ -28,9 +30,11 @@
+
v0.1