@pheem49/mint 1.5.5 → 1.6.1

package/src/{UI → renderer/src-web/css}/styles.css

@@ -12,8 +12,8 @@
   --text-muted: #8f8f94;
   --text-soft: #d1d1d4;
   --placeholder: #818187;
-  --accent: #8f6cf5;
-  --accent-hover: #a98cff;
+  --accent: #10b981;
+  --accent-hover: #34d399;
   --border: rgba(255, 255, 255, 0.075);
   --border-light: rgba(255, 255, 255, 0.11);
   --shadow: none;
@@ -258,7 +258,7 @@ h1 {
 
 .startup-loading {
   position: absolute;
-  inset: 34px 0 0;
+  inset: 0;
   z-index: 100;
   display: grid;
   place-items: center;
@@ -324,14 +324,14 @@ h1 {
 }
 
 .toggle-model-btn:hover {
-  background: rgba(139, 92, 246, 0.15);
-  border-color: rgba(139, 92, 246, 0.2);
+  background: color-mix(in srgb, var(--accent) 15%, transparent);
+  border-color: color-mix(in srgb, var(--accent) 20%, transparent);
   color: var(--accent);
 }
 
 .toggle-model-btn.active {
-  background: rgba(139, 92, 246, 0.26);
-  border-color: rgba(139, 92, 246, 0.42);
+  background: color-mix(in srgb, var(--accent) 26%, transparent);
+  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
   color: white;
 }
 
@@ -343,9 +343,9 @@ h1 {
 
 .accessory-cycle-btn:hover,
 .accessory-cycle-btn.active {
-  background: rgba(168, 85, 247, 0.14);
-  border-color: rgba(168, 85, 247, 0.24);
-  color: #c4b5fd;
+  background: rgba(16, 185, 129, 0.14);
+  border-color: rgba(16, 185, 129, 0.24);
+  color: #a7f3d0;
 }
 
 .toggle-interaction-btn:hover,
@@ -397,8 +397,8 @@ h1 {
 }
 
 .settings-btn:hover {
-  background: rgba(139, 92, 246, 0.15);
-  border-color: rgba(139, 92, 246, 0.2);
+  background: color-mix(in srgb, var(--accent) 15%, transparent);
+  border-color: color-mix(in srgb, var(--accent) 20%, transparent);
   color: var(--accent);
 }
 
@@ -459,7 +459,7 @@ h1 {
   width: 85%;
   aspect-ratio: 1;
   border-radius: 50%;
-  background: radial-gradient(circle, rgba(139, 92, 246, 0.12), rgba(139, 92, 246, 0.02) 48%, transparent 72%);
+  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent) 2%, transparent) 48%, transparent 72%);
   filter: blur(20px);
   transform: translateY(2%);
 }
@@ -520,8 +520,14 @@ h1 {
   opacity: 1;
 }
 
+.model-shell.interaction-enabled .interaction-zone {
+  pointer-events: auto;
+}
+
 .interaction-zone {
   position: absolute;
+  pointer-events: none;
+  cursor: pointer;
   border: 1px solid rgba(103, 232, 249, 0.46);
   background: rgba(14, 165, 233, 0.08);
   box-shadow: 0 0 18px rgba(34, 211, 238, 0.12), inset 0 0 18px rgba(255, 255, 255, 0.04);
@@ -740,11 +746,6 @@ h1 {
   color: var(--text-main);
 }
 
-.model-shell.is-live2d-ready .model-placeholder {
-  opacity: 0 !important;
-  pointer-events: none;
-}
-
 .model-status {
   position: absolute;
   left: 50%;
@@ -793,10 +794,6 @@ h1 {
   40% { transform: scale(1.0); opacity: 1; }
 }
 
-.model-shell.is-live2d-ready .model-status {
-  display: none;
-}
-
 .model-shadow {
   position: absolute;
   bottom: 12%;
@@ -927,6 +924,13 @@ h1 {
   text-underline-offset: 2px;
 }
 
+.provider-fallback-notice {
+  max-width: min(520px, 82vw);
+  color: var(--warning, #fbbf24);
+  font-weight: 500;
+  line-height: 1.35;
+}
+
 .provider-popover {
   position: absolute;
   left: 6px;
@@ -1039,10 +1043,10 @@ h1 {
 }
 
 .user-message .message-bubble {
-  background: linear-gradient(135deg, var(--accent) 0%, #6d28d9 100%);
+  background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 70%, #000000) 100%);
   color: white;
   border-bottom-right-radius: 4px;
-  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.25), inset 1px 1px 0 rgba(255, 255, 255, 0.2);
+  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 25%, transparent), inset 1px 1px 0 rgba(255, 255, 255, 0.2);
 }
 
 .ai-message {
@@ -1058,9 +1062,19 @@ h1 {
   border-left: 1px solid var(--border-light);
   border-bottom-left-radius: 4px;
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
-  color: #f8fafc; /* Stable text color for AI messages */
+  color: var(--text-main);
+}
+
+.message.ai-message.thinking-message .message-bubble {
+  background: color-mix(in srgb, var(--panel-bg) 75%, #000000) !important;
+  border-color: color-mix(in srgb, var(--accent) 30%, var(--border-light)) !important;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
+  color: var(--text-muted) !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
 }
 
+
 /* Typing Indicator */
 .typing-indicator {
   display: flex;
@@ -1107,7 +1121,7 @@ h1 {
 /* Input Area */
 .input-area {
   padding: 16px 20px;
-  background: rgba(15, 23, 42, 0.5);
+  background: color-mix(in srgb, var(--panel-bg) 60%, transparent);
   backdrop-filter: var(--glass-blur);
   -webkit-backdrop-filter: var(--glass-blur);
   border-top: 1px solid var(--border);
@@ -1127,9 +1141,10 @@ h1 {
 }
 
 #chat-form:focus-within {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.1);
-  transform: translateY(-1px);
+  border-color: transparent;
+  outline: none;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+  transform: none;
 }
 
 #chat-input {
@@ -1143,6 +1158,14 @@ h1 {
   font-size: 0.95rem;
 }
 
+#chat-input:focus,
+#chat-input:focus-visible,
+#chat-input:-moz-focusring {
+  border: 0 !important;
+  outline: none !important;
+  box-shadow: none !important;
+}
+
 #chat-input::placeholder {
   color: var(--text-main);
   opacity: 0.6;
@@ -1150,7 +1173,8 @@ h1 {
 
 #send-btn,
 #mic-btn,
-#vision-btn {
+#chat-tool-btn,
+#screen-capture-btn {
   background: var(--accent);
   color: white;
   border: none;
@@ -1167,14 +1191,16 @@ h1 {
 
 #send-btn:hover,
 #mic-btn:hover,
-#vision-btn:hover {
+#chat-tool-btn:hover,
+#screen-capture-btn:hover {
   background: var(--accent-hover);
   transform: scale(1.05);
 }
 
 #send-btn:active,
 #mic-btn:active,
-#vision-btn:active {
+#chat-tool-btn:active,
+#screen-capture-btn:active {
   transform: scale(0.95);
 }
 
@@ -1184,16 +1210,18 @@ h1 {
   animation: pulse-mic 1.5s infinite;
 }
 
-#vision-btn {
+#chat-tool-btn,
+#screen-capture-btn {
   background: transparent;
   color: var(--text-muted);
   border: 1px solid var(--border);
 }
 
-#vision-btn:hover {
-  background: rgba(139, 92, 246, 0.15);
+#chat-tool-btn:hover,
+#screen-capture-btn:hover {
+  background: color-mix(in srgb, var(--accent) 15%, transparent);
   color: var(--accent);
-  border-color: rgba(139, 92, 246, 0.4);
+  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
 }
 
 @keyframes pulse-mic {
@@ -1216,8 +1244,8 @@ h1 {
 .action-card {
   margin-top: 8px;
   padding: 10px;
-  background: rgba(139, 92, 246, 0.1);
-  border: 1px solid rgba(139, 92, 246, 0.3);
+  background: color-mix(in srgb, var(--accent) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
   border-radius: 8px;
   font-size: 0.85rem;
   display: flex;
@@ -1317,92 +1345,349 @@ h1 {
   background: rgba(255, 255, 255, 0.08);
 }
 
+@keyframes agent-activity-slide-up-fade {
+  from {
+    opacity: 0;
+    transform: translateY(10px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes pulse-ring {
+  0% {
+    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.6);
+  }
+  70% {
+    box-shadow: 0 0 0 8px rgba(99, 102, 241, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
+  }
+}
+
+@keyframes pulse-ring-amber {
+  0% {
+    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6);
+  }
+  70% {
+    box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
+  }
+}
+
 .agent-activity-message {
   margin-top: -2px;
 }
 
+.agent-activity-history {
+  display: grid;
+  gap: 8px;
+  margin-bottom: 8px;
+  margin-top: 0;
+  max-width: min(680px, 100%);
+}
+
+.agent-activity-toggle {
+  align-items: center;
+  align-self: start;
+  background: transparent;
+  border: 0;
+  color: var(--text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  font-size: 0.8rem;
+  gap: 8px;
+  justify-content: flex-start;
+  line-height: 1.2;
+  padding: 2px 0;
+  text-align: left;
+  width: fit-content;
+}
+
+.agent-activity-toggle:hover {
+  color: var(--text-soft);
+}
+
+.agent-activity-toggle:focus-visible {
+  outline: 1px solid var(--border-light);
+  outline-offset: 3px;
+}
+
 .agent-activity-card {
-  background: rgba(15, 23, 42, 0.46);
-  border: 1px solid rgba(148, 163, 184, 0.18);
-  border-radius: 8px;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
   color: var(--text-main);
-  max-width: min(520px, 100%);
-  padding: 10px 12px;
+  width: min(680px, 100%);
+  max-width: 100%;
+  padding: 4px 0;
+  box-shadow: none;
+  animation: agent-activity-slide-up-fade 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.agent-activity-card-history {
+  padding-top: 0;
 }
 
 .agent-activity-header {
   align-items: center;
   display: flex;
-  font-size: 0.78rem;
-  font-weight: 700;
+  gap: 12px;
+  font-size: 0.8rem;
+  font-weight: 650;
   justify-content: space-between;
   margin-bottom: 8px;
+  letter-spacing: 0;
+  color: var(--text-muted);
+  opacity: 0.9;
 }
 
 .agent-activity-status {
-  border: 1px solid rgba(139, 92, 246, 0.28);
+  border: 1px solid var(--border);
   border-radius: 999px;
-  color: var(--accent);
-  font-size: 0.68rem;
-  padding: 2px 7px;
+  color: var(--text-muted);
+  font-size: 0.7rem;
+  font-weight: 600;
+  padding: 2px 9px;
+  background: transparent;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.agent-activity-status::before {
+  content: "";
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--text-muted);
+  box-shadow: none;
+}
+
+.agent-activity-status[data-state="active"] {
+  border-color: var(--border);
+  color: var(--text-soft);
+  background: transparent;
+}
+
+.agent-activity-status[data-state="active"]::before {
+  background: var(--accent);
+  animation: pulse-ring 1.8s infinite;
 }
 
 .agent-activity-status[data-state="done"] {
-  border-color: rgba(16, 185, 129, 0.3);
+  border-color: rgba(16, 185, 129, 0.35);
   color: #34d399;
+  background: rgba(16, 185, 129, 0.08);
+}
+
+.agent-activity-status[data-state="done"]::before {
+  background: #34d399;
+  box-shadow: 0 0 6px #34d399;
 }
 
 .agent-activity-status[data-state="error"] {
-  border-color: rgba(239, 68, 68, 0.34);
+  border-color: rgba(239, 68, 68, 0.35);
   color: #f87171;
+  background: rgba(239, 68, 68, 0.08);
+}
+
+.agent-activity-status[data-state="error"]::before {
+  background: #f87171;
+  box-shadow: 0 0 6px #f87171;
 }
 
 .agent-activity-status[data-state="cancelled"] {
   border-color: rgba(148, 163, 184, 0.28);
   color: var(--text-muted);
+  background: rgba(148, 163, 184, 0.05);
+}
+
+.agent-activity-status[data-state="cancelled"]::before {
+  background: var(--text-muted);
+}
+
+.agent-activity-status[data-state="approval"] {
+  border-color: rgba(245, 158, 11, 0.4);
+  color: #fbbf24;
+  background: rgba(245, 158, 11, 0.12);
+}
+
+.agent-activity-status[data-state="approval"]::before {
+  background: #fbbf24;
+  animation: pulse-ring-amber 1.8s infinite;
 }
 
 .agent-activity-list {
   display: grid;
-  gap: 6px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  gap: 0;
+  overflow: hidden;
+}
+
+.agent-activity-table-head {
+  align-items: center;
+  background: color-mix(in srgb, var(--panel-soft) 62%, transparent);
+  border-bottom: 1px solid var(--border);
+  color: var(--text-muted);
+  display: grid;
+  font-size: 0.68rem;
+  font-weight: 650;
+  gap: 10px;
+  grid-template-columns: minmax(132px, 160px) 16px minmax(0, 1fr) 14px;
+  min-height: 28px;
+  padding: 5px 12px;
+  text-transform: uppercase;
 }
 
 .agent-activity-item {
-  align-items: start;
+  align-items: center;
+  border-bottom: 1px solid var(--border);
   color: var(--text-soft);
   display: grid;
-  font-size: 0.76rem;
-  gap: 8px;
-  grid-template-columns: 9px minmax(0, 1fr);
+  font-size: 0.86rem;
+  gap: 10px;
+  grid-template-columns: minmax(132px, 160px) 16px minmax(0, 1fr) 14px;
+  min-height: 34px;
+  padding: 7px 12px;
+  transition: background 0.2s ease, color 0.2s ease;
 }
 
-.agent-activity-dot {
-  background: var(--accent);
+.agent-activity-item:last-child {
+  border-bottom: 0;
+}
+
+.agent-activity-item:hover {
+  background: var(--panel-soft);
+  color: var(--text-main);
+}
+
+.agent-activity-label {
+  color: var(--text-muted);
+  font-size: 0.8rem;
+  line-height: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agent-activity-icon {
+  display: inline-block;
+  height: 14px;
+  position: relative;
+  width: 15px;
+}
+
+.agent-activity-icon::before,
+.agent-activity-icon::after {
+  content: "";
+  position: absolute;
+}
+
+.agent-activity-item[data-kind="folder"] .agent-activity-icon::before {
+  background: var(--text-muted);
+  border-radius: 2px 2px 1px 1px;
+  height: 4px;
+  left: 1px;
+  top: 1px;
+  width: 7px;
+}
+
+.agent-activity-item[data-kind="folder"] .agent-activity-icon::after {
+  background: color-mix(in srgb, var(--text-muted) 34%, transparent);
+  border: 1px solid var(--text-muted);
+  border-radius: 2px;
+  height: 8px;
+  left: 0;
+  top: 4px;
+  width: 13px;
+}
+
+.agent-activity-item[data-kind="file"] .agent-activity-icon::before,
+.agent-activity-item[data-kind="tool"] .agent-activity-icon::before {
+  border: 1.5px solid var(--text-muted);
+  border-radius: 2px;
+  height: 11px;
+  left: 2px;
+  top: 0;
+  width: 9px;
+}
+
+.agent-activity-item[data-kind="file"] .agent-activity-icon::after,
+.agent-activity-item[data-kind="tool"] .agent-activity-icon::after {
+  border-right: 1.5px solid var(--text-muted);
+  border-top: 1.5px solid var(--text-muted);
+  height: 4px;
+  right: 1px;
+  top: 0;
+  width: 4px;
+}
+
+.agent-activity-item[data-kind="search"] .agent-activity-icon::before {
+  border: 1.7px solid var(--text-muted);
   border-radius: 50%;
   height: 7px;
-  margin-top: 5px;
+  left: 1px;
+  top: 1px;
   width: 7px;
 }
 
-.agent-activity-item[data-state="done"] .agent-activity-dot {
-  background: #34d399;
+.agent-activity-item[data-kind="search"] .agent-activity-icon::after {
+  background: var(--text-muted);
+  border-radius: 1px;
+  height: 6px;
+  left: 9px;
+  top: 8px;
+  transform: rotate(-45deg);
+  width: 2px;
 }
 
-.agent-activity-item[data-state="error"] .agent-activity-dot {
-  background: #f87171;
+.agent-activity-item[data-kind="terminal"] .agent-activity-icon::before {
+  border: 1.5px solid var(--text-muted);
+  border-radius: 3px;
+  height: 10px;
+  left: 0;
+  top: 1px;
+  width: 13px;
 }
 
-.agent-activity-item[data-state="skipped"] .agent-activity-dot,
-.agent-activity-item[data-state="cancelled"] .agent-activity-dot {
-  background: rgba(148, 163, 184, 0.8);
+.agent-activity-item[data-kind="terminal"] .agent-activity-icon::after {
+  background: var(--text-muted);
+  box-shadow: 4px 0 0 var(--text-muted);
+  height: 1.5px;
+  left: 4px;
+  top: 7px;
+  width: 3px;
+}
+
+.agent-activity-item[data-state="active"] .agent-activity-label {
+  color: var(--text-soft);
 }
 
-.agent-activity-item[data-state="approval"] .agent-activity-dot {
-  background: #f59e0b;
+.agent-activity-item[data-state="error"] .agent-activity-label {
+  color: #f87171;
 }
 
 .agent-activity-text {
-  overflow-wrap: anywhere;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.35;
+}
+
+.agent-activity-chevron {
+  color: var(--text-muted);
+  font-size: 1rem;
+  line-height: 1;
 }
 
 /* Smart Context Toggle */
@@ -1486,11 +1771,11 @@ input:checked + .slider:before {
 
 .proactive-bar {
   animation: proactiveSlideDown 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
-  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(109, 40, 217, 0.05));
+  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent), color-mix(in srgb, var(--accent) 5%, transparent));
   backdrop-filter: var(--glass-blur);
   -webkit-backdrop-filter: var(--glass-blur);
-  border-bottom: 1px solid rgba(139, 92, 246, 0.3);
-  border-top: 1px solid rgba(139, 92, 246, 0.2);
+  border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
+  border-top: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
   padding: 12px 16px 14px;
   position: relative;
   z-index: 5;
@@ -1503,7 +1788,7 @@ input:checked + .slider:before {
   inset: 0;
   border-left: 3px solid var(--accent);
   pointer-events: none;
-  box-shadow: 3px 0 12px rgba(139, 92, 246, 0.25) inset;
+  box-shadow: 3px 0 12px color-mix(in srgb, var(--accent) 25%, transparent) inset;
 }
 
 @keyframes proactiveSlideDown {
@@ -1526,8 +1811,8 @@ input:checked + .slider:before {
 }
 
 @keyframes proactiveGlow {
-  from { filter: drop-shadow(0 0 3px rgba(139, 92, 246, 0.5)); }
-  to   { filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.9)); }
+  from { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 50%, transparent)); }
+  to   { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent-hover, var(--accent)) 90%, transparent)); }
 }
 
 .proactive-message {
@@ -1565,8 +1850,8 @@ input:checked + .slider:before {
 
 .suggestion-chip {
   -webkit-app-region: no-drag;
-  background: rgba(139, 92, 246, 0.15);
-  border: 1px solid rgba(139, 92, 246, 0.4);
+  background: color-mix(in srgb, var(--accent) 15%, transparent);
+  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
   border-radius: 20px;
   color: var(--text-main);
   cursor: pointer;
@@ -1586,10 +1871,10 @@ input:checked + .slider:before {
 }
 
 .suggestion-chip:hover {
-  background: linear-gradient(135deg, var(--accent), #6d28d9);
+  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000000));
   border-color: rgba(255, 255, 255, 0.3);
   color: white;
-  box-shadow: 0 6px 15px rgba(139, 92, 246, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.2);
+  box-shadow: 0 6px 15px color-mix(in srgb, var(--accent) 40%, transparent), inset 0 1px 1px rgba(255, 255, 255, 0.2);
   transform: translateY(-3px) scale(1.05);
 }
 
@@ -1611,36 +1896,7 @@ input:checked + .slider:before {
 }
 
 .sidebar-toggle {
-  position: absolute;
-  top: 10px;
-  left: 214px;
-  z-index: 12;
-  width: 40px;
-  height: 34px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid var(--border-light);
-  border-radius: 6px;
-  background: var(--panel-raised);
-  color: var(--text-soft);
-  cursor: pointer;
-  -webkit-app-region: no-drag;
-  transition: left 0.22s ease, background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
-}
-
-.sidebar-toggle:hover {
-  background: var(--surface-strong);
-  color: var(--text-main);
-  border-color: rgba(255, 255, 255, 0.16);
-}
-
-.app-body.sidebar-collapsed .sidebar-toggle {
-  left: 8px;
-}
-
-.app-body.sidebar-collapsed .sidebar-toggle-icon {
-  transform: rotate(180deg);
+  display: none !important;
 }
 
 .workspace-sidebar {
@@ -1651,7 +1907,7 @@ input:checked + .slider:before {
   display: flex;
   flex-direction: column;
   min-width: 0;
-  padding: 52px 10px 12px 14px;
+  padding: 20px 10px 12px 14px;
   background: var(--chrome-bg);
   backdrop-filter: var(--glass-blur);
   -webkit-backdrop-filter: var(--glass-blur);
@@ -1661,27 +1917,88 @@ input:checked + .slider:before {
   transition: width 0.22s ease, padding 0.22s ease, opacity 0.18s ease, transform 0.22s ease;
 }
 
-.app-body.sidebar-collapsed .workspace-sidebar {
-  width: 56px;
-  padding: 52px 8px 12px;
-  opacity: 1;
-  pointer-events: auto;
-  transform: translateX(0);
+.sidebar-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 8px 16px 2px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  margin-bottom: 14px;
+  overflow: hidden;
+  transition: all 0.22s ease;
 }
 
-.workspace-sidebar button {
-  font: inherit;
+.sidebar-brand.clickable {
+  cursor: pointer;
+  user-select: none;
   -webkit-app-region: no-drag;
+  outline: none;
 }
 
-.sidebar-new-chat,
-.sidebar-top-action,
-.sidebar-settings,
-.sidebar-bottom-actions .clear-btn,
-.sidebar-bottom-actions .settings-btn {
-  width: 100%;
-  min-width: 0;
-  max-width: none;
+.sidebar-brand.clickable:hover .sidebar-brand-name {
+  color: var(--accent-hover);
+}
+
+.sidebar-brand.clickable:hover .sidebar-logo {
+  filter: brightness(1.15);
+  transform: scale(1.05);
+}
+
+.sidebar-logo {
+  width: 32px;
+  height: 32px;
+  object-fit: contain;
+  flex-shrink: 0;
+  border-radius: 6px;
+  transition: transform 0.2s ease, filter 0.2s ease;
+}
+
+.sidebar-brand-name {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--text-main);
+  white-space: nowrap;
+  opacity: 1;
+  transition: opacity 0.15s ease;
+}
+
+/* Collapsed state styling */
+.app-body.sidebar-collapsed .sidebar-brand {
+  padding: 0 0 12px 0;
+  justify-content: center;
+  gap: 0;
+  border-bottom-color: transparent;
+}
+
+.app-body.sidebar-collapsed .sidebar-brand-name {
+  opacity: 0;
+  width: 0;
+  pointer-events: none;
+  display: none;
+}
+
+.app-body.sidebar-collapsed .workspace-sidebar {
+  width: 56px;
+  padding: 20px 8px 12px;
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateX(0);
+}
+
+.workspace-sidebar button {
+  font: inherit;
+  font-size: 0.9rem;
+  -webkit-app-region: no-drag;
+}
+
+.sidebar-new-chat,
+.sidebar-top-action,
+.sidebar-settings,
+.sidebar-bottom-actions .clear-btn,
+.sidebar-bottom-actions .settings-btn {
+  width: 100%;
+  min-width: 0;
+  max-width: none;
   height: 32px;
   display: flex;
   align-items: center;
@@ -1749,7 +2066,6 @@ input:checked + .slider:before {
   justify-content: flex-start;
   padding: 0 10px;
   color: var(--text-soft);
-  font-size: 1rem;
   font-weight: 400;
   gap: 9px;
 }
@@ -1777,20 +2093,34 @@ input:checked + .slider:before {
 }
 
 .sidebar-section-title {
-  padding: 0 8px 12px;
+  padding: 0 10px 12px;
   color: var(--text-muted);
-  font-size: 0.72rem;
+  font-size: 0.9rem;
+}
+
+.sidebar-subsection-title {
+  padding-top: 14px;
+  padding-bottom: 8px;
+}
+
+.sidebar-section-title.clickable {
+  cursor: pointer;
+  user-select: none;
+  transition: color 0.16s ease;
+}
+
+.sidebar-section-title.clickable:hover {
+  color: var(--text-main);
 }
 
 .sidebar-project {
   height: 32px;
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 0 8px;
+  gap: 9px;
+  padding: 0 10px;
   color: var(--text-muted);
   border-radius: 6px;
-  font-size: 0.84rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1801,6 +2131,97 @@ input:checked + .slider:before {
   text-align: left;
 }
 
+.sidebar-chat-list {
+  display: grid;
+  gap: 2px;
+  max-height: min(360px, 42vh);
+  overflow-y: auto;
+  padding-right: 2px;
+}
+
+.sidebar-chat-item {
+  cursor: pointer;
+}
+
+.sidebar-chat-item:hover {
+  background: var(--surface-strong);
+  color: var(--text-main);
+}
+
+.sidebar-chat-title {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sidebar-chat-delete {
+  width: 24px;
+  height: 24px;
+  margin-left: 2px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 5px;
+  color: var(--text-muted);
+  opacity: 0;
+  flex: 0 0 auto;
+}
+
+.sidebar-chat-edit {
+  width: 24px;
+  height: 24px;
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 5px;
+  color: var(--text-muted);
+  opacity: 0;
+  flex: 0 0 auto;
+}
+
+.sidebar-chat-item:hover .sidebar-chat-delete,
+.sidebar-chat-delete:focus-visible,
+.sidebar-chat-item:hover .sidebar-chat-edit,
+.sidebar-chat-edit:focus-visible {
+  opacity: 1;
+}
+
+.sidebar-chat-delete:hover {
+  color: #fca5a5;
+  background: rgba(248, 113, 113, 0.12);
+}
+
+.sidebar-chat-edit:hover {
+  color: #c7d2fe;
+  background: rgba(99, 102, 241, 0.12);
+}
+
+.sidebar-chat-rename-input {
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  border-radius: 4px;
+  color: var(--text-main);
+  font-family: inherit;
+  font-size: 0.82rem;
+  padding: 2px 6px;
+  width: 100%;
+  box-sizing: border-box;
+  outline: none;
+  margin-right: 4px;
+}
+
+.sidebar-chat-rename-input:focus {
+  border-color: var(--accent);
+  background: rgba(255, 255, 255, 0.12);
+}
+
+.sidebar-chat-item.active:hover .mint-status-pill {
+  display: none;
+}
+
 .app-body.sidebar-collapsed .sidebar-new-chat,
 .app-body.sidebar-collapsed .sidebar-top-action,
 .app-body.sidebar-collapsed .sidebar-settings,
@@ -1879,7 +2300,7 @@ input:checked + .slider:before {
 
 .mint-status-pill[data-state="thinking"],
 .model-activity-badge[data-state="thinking"] {
-  color: #c4b5fd;
+  color: #a7f3d0;
 }
 
 .mint-status-pill[data-state="thinking"] .mint-status-dot,
@@ -1969,10 +2390,15 @@ input:checked + .slider:before {
               transform 0.22s ease;
 }
 
-.assistant-workspace.layout-chat {
+.assistant-workspace.layout-chat-wide {
   grid-template-columns: minmax(280px, 0.72fr) minmax(460px, 1.18fr);
 }
 
+.assistant-workspace.layout-model-wide {
+  grid-template-columns: minmax(420px, 1.18fr) minmax(360px, 0.72fr);
+}
+
+
 .app-body.sidebar-collapsed .assistant-workspace {
   margin-left: calc(var(--sidebar-collapsed-width) + var(--sidebar-content-gap));
 }
@@ -2036,6 +2462,12 @@ input:checked + .slider:before {
   font-weight: 600;
 }
 
+.pictures-header-actions {
+  display: grid;
+  gap: 8px;
+  width: 130px;
+}
+
 .pictures-close-btn {
   height: 34px;
   padding: 0 14px;
@@ -2059,6 +2491,7 @@ input:checked + .slider:before {
   position: relative;
   min-width: 0;
   overflow: hidden;
+  color: inherit;
   border: 1px solid var(--border);
   border-radius: 10px;
   background: var(--surface-bg);
@@ -2086,11 +2519,36 @@ input:checked + .slider:before {
   color: var(--text-soft);
   font-size: 0.76rem;
   line-height: 1.35;
+}
+
+.picture-card-meta span {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+.picture-folder-btn {
+  width: 100%;
+  height: 34px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--panel-soft);
+  color: var(--text);
+  font-size: 0.75rem;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.picture-folder-btn:hover {
+  border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
+  background: color-mix(in srgb, var(--accent) 12%, var(--panel-soft));
+}
+
+.picture-folder-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
 .pictures-empty {
   max-width: 360px;
   margin: 18vh auto 0;
@@ -2355,6 +2813,39 @@ input:checked + .slider:before {
   width: 100%;
 }
 
+.conversation-panel.is-empty {
+  justify-content: center;
+}
+
+.assistant-workspace.model-hidden .conversation-panel.is-empty {
+  grid-template-rows: auto minmax(0, 1fr);
+  align-content: center;
+  justify-content: stretch;
+  width: min(840px, calc(100% - 64px));
+  margin: 0 auto;
+  padding-top: 56px;
+  padding-bottom: 0;
+}
+
+.conversation-panel.is-empty .chat-container {
+  display: none;
+}
+
+.conversation-panel.is-empty .input-area {
+  width: 100%;
+  margin: auto 0;
+  transform: translateY(-7vh);
+}
+
+.empty-chat-prompt {
+  margin: 0 0 28px;
+  color: var(--text-main);
+  font-size: clamp(2rem, 4vw, 3.15rem);
+  font-weight: 500;
+  line-height: 1.18;
+  text-align: center;
+}
+
 .chat-container {
   flex: 1;
   min-height: 0;
@@ -2456,13 +2947,13 @@ input:checked + .slider:before {
 }
 
 #chat-form {
-  min-height: 76px;
+  min-height: 88px;
   display: grid;
-  grid-template-columns: 36px minmax(0, 1fr) 36px 36px;
-  grid-template-rows: minmax(28px, auto) 36px;
+  grid-template-columns: 32px 32px minmax(0, 1fr) 32px 32px;
+  grid-template-rows: auto minmax(48px, auto) 32px;
   align-items: end;
-  gap: 8px;
-  padding: 12px;
+  gap: 6px;
+  padding: 8px;
   background: var(--input-bg);
   border: 1px solid var(--border);
   border-radius: 14px;
@@ -2477,18 +2968,104 @@ input:checked + .slider:before {
 }
 
 #chat-form:focus-within {
-  border-color: rgba(255, 255, 255, 0.16);
+  border-color: transparent;
+  outline: none;
   box-shadow: none;
   transform: none;
 }
 
-#chat-input {
+.mint-attachment {
   grid-column: 1 / -1;
   grid-row: 1;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  flex-wrap: wrap;
+  min-height: 0;
+  max-height: 220px;
+  margin-bottom: 6px;
+  overflow: auto;
+  scrollbar-width: thin;
+}
+
+.mint-image-attachment {
+  position: relative;
+  display: inline-flex;
+  width: auto;
+  height: auto;
+  max-width: min(360px, 72vw);
+  max-height: 196px;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--surface-strong) 78%, rgba(0, 0, 0, 0.22));
+}
+
+.mint-image-preview {
+  width: auto;
+  height: auto;
+  max-width: min(360px, 72vw);
+  max-height: 196px;
+  display: block;
+}
+
+.mint-attachment-remove {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 50%;
+  background: #ef4444;
+  color: #ffffff;
+  font-size: 0.95rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
+#chat-form:not(:has(.mint-attachment)) {
+  grid-template-rows: minmax(48px, auto) 32px;
+}
+
+#chat-form:not(:has(.mint-attachment)) #chat-input {
+  grid-row: 1;
+}
+
+#chat-form:not(:has(.mint-attachment)) .chat-tool-menu-wrap,
+#chat-form:not(:has(.mint-attachment)) #screen-capture-btn,
+#chat-form:not(:has(.mint-attachment)) .chat-provider-select,
+#chat-form:not(:has(.mint-attachment)) #mic-btn,
+#chat-form:not(:has(.mint-attachment)) #send-btn {
+  grid-row: 2;
+}
+
+#chat-input {
+  grid-column: 1 / -1;
+  grid-row: 2;
   align-self: start;
-  padding: 8px 0;
+  min-height: 48px;
+  max-height: 120px;
+  padding: 12px 0;
   color: var(--text-main);
-  font-size: 0.88rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  resize: none;
+  overflow-y: auto;
+  border: 0;
+  outline: none;
+  background: transparent;
+}
+
+#chat-input:focus,
+#chat-input:focus-visible,
+#chat-input:-moz-focusring {
+  border: 0 !important;
+  outline: none !important;
+  box-shadow: none !important;
 }
 
 #chat-input::placeholder {
@@ -2498,26 +3075,118 @@ input:checked + .slider:before {
 
 #send-btn,
 #mic-btn,
-#vision-btn {
-  width: 36px;
-  height: 36px;
-  border-radius: 18px;
+#chat-tool-btn,
+#screen-capture-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: 16px;
   background: var(--surface-strong);
   color: var(--text-soft);
 }
 
-#vision-btn {
+.chat-tool-menu-wrap {
   grid-column: 1;
-  grid-row: 2;
+  grid-row: 3;
+  position: relative;
+  width: 32px;
+  height: 32px;
 }
 
-.chat-provider-select {
+#chat-tool-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  font-size: 1.35rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
+#screen-capture-btn {
   grid-column: 2;
-  grid-row: 2;
+  grid-row: 3;
+  border: 0;
+  cursor: pointer;
+}
+
+.screen-capture-eye {
+  position: relative;
+  width: 18px;
+  height: 11px;
+  border: 1.6px solid currentColor;
+  border-radius: 50% / 58%;
+  background: transparent;
+}
+
+.screen-capture-eye::after {
+  content: '';
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  left: 50%;
+  top: 50%;
+  border: 1.6px solid currentColor;
+  border-radius: 50%;
+  background: transparent;
+  transform: translate(-50%, -50%);
+}
+
+#chat-tool-btn[aria-expanded='true'] {
+  background: var(--panel-raised);
+  color: var(--text-main);
+}
+
+.chat-tool-menu {
+  position: absolute;
+  left: 0;
+  bottom: calc(100% + 10px);
+  z-index: 20;
+  width: min(260px, calc(100vw - 40px));
+  padding: 8px;
+  background: color-mix(in srgb, var(--panel-raised) 92%, #000 8%);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+}
+
+.chat-tool-menu button {
+  width: 100%;
+  min-height: 42px;
+  display: grid;
+  grid-template-columns: 28px minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+  padding: 0 10px;
+  border: 0;
+  border-radius: 10px;
+  background: transparent;
+  color: var(--text-main);
+  font: inherit;
+  font-size: 0.92rem;
+  text-align: left;
+  cursor: pointer;
+}
+
+.chat-tool-menu button:hover {
+  background: var(--surface-strong);
+}
+
+.chat-tool-menu button span:first-child {
+  display: flex;
+  justify-content: center;
+  color: var(--text-soft);
+  font-size: 1rem;
+}
+
+.chat-provider-select {
+  grid-column: 3;
+  grid-row: 3;
   min-width: 0;
   width: fit-content;
   max-width: 100%;
-  height: 36px;
+  height: 32px;
   padding: 0 24px 0 6px;
   background: transparent;
   border: 0;
@@ -2544,14 +3213,65 @@ input:checked + .slider:before {
   opacity: 0.65;
 }
 
+.chat-provider-select option {
+  background: var(--input-bg, #1a1a1a);
+  color: var(--text-main);
+}
+
+.chat-provider-select option:checked {
+  background: linear-gradient(var(--accent), var(--accent));
+  color: #ffffff;
+}
+
+.voice-mode-bar {
+  min-height: 30px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 12px;
+  background: color-mix(in srgb, var(--accent) 10%, var(--input-bg));
+  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
+  border-bottom: 0;
+  color: var(--text-main);
+  font-size: 0.75rem;
+}
+
+.voice-mode-dot {
+  width: 8px;
+  height: 8px;
+  flex: 0 0 auto;
+  border-radius: 999px;
+  background: var(--accent);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
+}
+
+.voice-mode-bar[data-state="listening"] .voice-mode-dot,
+.voice-mode-bar[data-state="speaking"] .voice-mode-dot {
+  animation: pulse-mic 1.2s infinite;
+}
+
+.voice-mode-transcript {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--text-muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 #mic-btn {
-  grid-column: 3;
-  grid-row: 2;
+  grid-column: 4;
+  grid-row: 3;
+}
+
+#mic-btn.voice-mode-active {
+  background: color-mix(in srgb, var(--accent) 18%, var(--surface-strong));
+  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
+  color: var(--accent-hover);
 }
 
 #send-btn {
-  grid-column: 4;
-  grid-row: 2;
+  grid-column: 5;
+  grid-row: 3;
 }
 
 #send-btn {
@@ -2562,7 +3282,8 @@ input:checked + .slider:before {
 
 #send-btn:hover,
 #mic-btn:hover,
-#vision-btn:hover {
+#chat-tool-btn:hover,
+#screen-capture-btn:hover {
   background: var(--panel-raised);
   transform: none;
 }
@@ -2571,7 +3292,7 @@ input:checked + .slider:before {
   background: var(--accent-hover);
 }
 
-#vision-btn {
+#chat-tool-btn {
   border: 1px solid rgba(255, 255, 255, 0.08);
 }
 
@@ -2602,6 +3323,22 @@ input:checked + .slider:before {
   color: #ff8a8a;
 }
 
+.assistant-workspace.layout-horizontal {
+  grid-template-columns: 1fr;
+  grid-template-rows: minmax(0, 1.1fr) minmax(0, 0.9fr);
+  gap: 12px;
+}
+
+.assistant-workspace.layout-horizontal .model-stage {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.assistant-workspace.layout-horizontal .conversation-panel {
+  min-width: 0;
+  max-width: 100%;
+}
+
 @media (max-width: 760px) {
   .drag-region {
     grid-template-columns: auto 1fr auto;
@@ -2659,7 +3396,37 @@ input:checked + .slider:before {
   }
 
   .workspace-sidebar {
-    display: none;
+    display: flex;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 260px !important;
+    height: 100%;
+    z-index: 9999;
+    transform: translateX(-100%);
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    background: var(--chrome-bg);
+    padding: 20px 10px 12px 14px !important;
+  }
+  .app-body.mobile-sidebar-open .workspace-sidebar {
+    transform: translateX(0) !important;
+    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.6) !important;
+  }
+  .app-body.sidebar-collapsed .workspace-sidebar {
+    width: 260px !important;
+    padding: 20px 10px 12px 14px !important;
+  }
+  .app-body.sidebar-collapsed .workspace-sidebar button > span:not([aria-hidden="true"]) {
+    display: inline !important;
+    opacity: 1 !important;
+  }
+  .app-body.sidebar-collapsed .workspace-sidebar .sidebar-brand-name {
+    display: inline !important;
+    opacity: 1 !important;
+  }
+  .app-body.sidebar-collapsed .workspace-sidebar .lan-info-box {
+    display: block !important;
   }
 
   .model-stage {
@@ -2679,3 +3446,132 @@ input:checked + .slider:before {
     max-height: none;
   }
 }
+
+/* Chat Bold Highlight styling */
+.chat-bold-highlight {
+  color: #38bdf8; /* Soft blue (sky-400) for default/dark theme */
+  font-weight: 600;
+}
+
+[data-theme="light"] .chat-bold-highlight {
+  color: #0284c7; /* Sky-600 for light theme */
+}
+
+[data-theme="midnight"] .chat-bold-highlight {
+  color: #38bdf8; /* Sky-400 for midnight theme */
+}
+
+/* Web-Native Chat Header */
+.chat-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 18px;
+  background: var(--chrome-bg);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  border-bottom: 1px solid var(--border);
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  height: 52px;
+  flex-shrink: 0;
+}
+
+.mobile-menu-btn {
+  display: none; /* Hidden on desktop */
+  background: transparent;
+  border: none;
+  color: var(--text-main);
+  font-size: 1.35rem;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 6px;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.2s;
+}
+
+.mobile-menu-btn:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.chat-header-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+  color: var(--text-main);
+  font-size: 0.92rem;
+}
+
+.chat-header-logo {
+  width: 20px;
+  height: 20px;
+  object-fit: contain;
+}
+
+.chat-header-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.74rem;
+  color: var(--text-muted);
+}
+
+.chat-header-status .status-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  box-shadow: 0 0 8px currentColor;
+}
+
+/* Animations and Recording States */
+#mic-btn.is-recording {
+  color: #ef4444 !important;
+  background: rgba(239, 68, 68, 0.15) !important;
+  box-shadow: 0 0 12px rgba(239, 68, 68, 0.4) !important;
+  animation: pulseRed 1.2s infinite alternate ease-in-out;
+}
+
+@keyframes pulseRed {
+  from {
+    transform: scale(1);
+    box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
+  }
+  to {
+    transform: scale(1.1);
+    box-shadow: 0 0 16px rgba(239, 68, 68, 0.6);
+  }
+}
+
+@keyframes pulseGlow {
+  0% {
+    box-shadow: 0 0 10px rgba(143, 108, 245, 0.2), inset 0 0 10px rgba(143, 108, 245, 0.1);
+    border-color: rgba(143, 108, 245, 0.4);
+  }
+  100% {
+    box-shadow: 0 0 25px rgba(143, 108, 245, 0.6), inset 0 0 20px rgba(143, 108, 245, 0.3);
+    border-color: rgba(143, 108, 245, 0.9);
+  }
+}
+
+.drag-drop-overlay {
+  animation: pulseGlow 1.2s infinite alternate ease-in-out;
+}
+
+/* TTS Speaking Badge animation */
+.tts-btn {
+  border-radius: 4px;
+}
+.tts-btn:hover {
+  background: rgba(255, 255, 255, 0.08);
+  opacity: 1 !important;
+}
+
+/* Mobile Media Query Enhancements */
+@media (max-width: 760px) {
+  .mobile-menu-btn {
+    display: flex;
+  }
+}