Refactor TTS architecture

internal/service/static/main.css

@@ -144,6 +144,13 @@ body {
   padding: var(--s-2) var(--s-1);
 }
 
+.collapsible__summary::before {
+  content: "▶";
+  font-size: 0.625em;
+  color: var(--color-text-muted);
+  transition: transform 0.15s ease;
+}
+
 .collapsible[open] .collapsible__summary::before {
   transform: rotate(90deg);
 }
@@ -204,13 +211,6 @@ body {
   display: none;
 }
 
-.collapsible__summary::before {
-  content: "▶";
-  font-size: 0.625em;
-  color: var(--color-text-muted);
-  transition: transform 0.15s ease;
-}
-
 .collapsible__summary .icon {
   width: var(--icon-size);
   height: var(--icon-size);
@@ -530,10 +530,24 @@ body {
   flex-direction: column;
 }
 
+.message__icon {
+  width: var(--action-icon-size);
+  height: var(--action-icon-size);
+  flex-shrink: 0;
+  color: var(--color-text-muted);
+}
+
 .message--assistant .message__icon {
   color: var(--color-primary);
 }
 
+.message__debug {
+  display: none;
+  padding: var(--s-2) var(--s-1);
+  border-top: 1px dotted var(--color-border-light);
+  background: var(--color-surface);
+}
+
 .message--debug-open .message__debug {
   display: block;
 }
@@ -579,6 +593,10 @@ body {
   color: var(--color-primary);
 }
 
+.message__action-btn--play.playing {
+  color: var(--color-red);
+}
+
 @media (hover: hover) {
   .message__action-btn--delete:hover {
     color: var(--color-red);
@@ -637,13 +655,6 @@ body {
   border-radius: var(--radius);
 }
 
-.message__debug {
-  display: none;
-  padding: var(--s-2) var(--s-1);
-  border-top: 1px dotted var(--color-border-light);
-  background: var(--color-surface);
-}
-
 .message__debug-list {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -663,13 +674,6 @@ body {
   white-space: nowrap;
 }
 
-.message__icon {
-  width: var(--action-icon-size);
-  height: var(--action-icon-size);
-  flex-shrink: 0;
-  color: var(--color-text-muted);
-}
-
 /* ==================== */
 /* Settings Modal       */
 /* ==================== */