Improve microphone permission UX: add Dev Log, re-request flow, active Voice Input highlighting, and Puppeteer permission-check script

styles.css

@@ -50,12 +50,89 @@ button:disabled {
   opacity: 0.6;
   cursor: not-allowed;
 }
+.swap-btn,
+#copyBtn {
+  align-self: flex-end;
+  padding: 10px 16px;
+  background: #0ea5e9;
+  border-color: transparent;
+  color: #fff;
+}
+#copyBtn {
+  font-size: 0.95rem;
+}
+button {
+  cursor: pointer;
+  background: #2563eb;
+  color: white;
+  border: 1px solid transparent;
+  transition: background 0.2s ease, transform 0.2s ease;
+}
+button:hover:not(:disabled) {
+  background: #1d4ed8;
+  transform: translateY(-1px);
+}
+
+#voiceBtn.active {
+  background: linear-gradient(180deg,#34d399,#10b981);
+  border-color: transparent;
+  box-shadow: 0 10px 30px rgba(16,185,129,0.35);
+  color: #071025;
+}
+
+#voiceBtn.active:hover:not(:disabled) {
+  background: linear-gradient(180deg,#6ee7b7,#34d399);
+}
+
+#voiceBtn.listening {
+  background: linear-gradient(180deg,#f59e0b,#d97706);
+}
+
 .panel {
   background: #1f2937;
   border-radius: 12px;
   padding: 16px;
   margin-top: 16px;
 }
+.panel-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  font-size: 0.95rem;
+  color: #cbd5e1;
+  margin-top: 6px;
+}
+.microphone-hint {
+  margin-top: 10px;
+  color: #cbd5e1;
+  font-size: 0.9rem;
+  font-style: italic;
+}
+.tts-notice {
+  margin-top: 6px;
+  color: #f8fafc;
+  font-size: 0.95rem;
+  padding: 10px 12px;
+  background: #0f172a;
+  border: 1px solid #334155;
+  border-radius: 10px;
+}
+.voice-status {
+  color: #a5b4fc;
+}
+.output-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+.copy-feedback {
+  margin-top: 10px;
+  color: #4ade80;
+  min-height: 1.2rem;
+}
 .output #translatedText {
   min-height: 80px;
   padding: 12px;
@@ -67,3 +144,38 @@ button:disabled {
   font-size: 0.95rem;
   color: #93c5fd;
 }
+
+.dev-log {
+  margin-top: 12px;
+  background: #0b1220;
+  border: 1px solid #273449;
+  border-radius: 8px;
+  color: #cbd5e1;
+  font-size: 0.85rem;
+  max-height: 160px;
+  overflow: hidden;
+}
+.dev-log-header {
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 10px;
+  border-bottom: 1px solid #172033;
+  background: #071025;
+}
+.dev-log-body {
+  padding: 8px 10px;
+  overflow-y: auto;
+  max-height: 120px;
+}
+.dev-log-entry {
+  padding: 4px 0;
+  border-bottom: 1px dashed rgba(255,255,255,0.03);
+}
+.clear-log {
+  background: transparent;
+  border: 1px solid #334155;
+  color: #cbd5e1;
+  padding: 4px 8px;
+  border-radius: 6px;
+  font-size: 0.8rem;
+}