Refactor frontend

internal/service/static/css/main.css

@@ -1218,6 +1218,54 @@ body {
   word-break: break-word;
 }
 
+/* Approve and deny buttons, shown while a tool call waits for a
+   user decision. */
+.message__approval {
+  display: flex;
+  gap: var(--s-2);
+  padding: 0 var(--s-1) var(--s-1);
+}
+
+.message__approval[hidden] {
+  display: none;
+}
+
+.message__approval-btn {
+  flex: 1;
+  padding: 0.25rem var(--s-1);
+  font-size: var(--s-1);
+  font-weight: 500;
+  color: var(--color-text);
+  background: var(--color-surface);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius);
+  cursor: pointer;
+}
+
+.message__approval-btn--approve {
+  color: white;
+  background: var(--color-green);
+  border-color: var(--color-green);
+}
+
+.message__approval-btn--deny {
+  color: var(--color-red);
+  border-color: var(--color-red);
+}
+
+@media (hover: hover) {
+  .message__approval-btn--approve:hover {
+    background: var(--color-green);
+    filter: brightness(1.1);
+  }
+
+  .message__approval-btn--deny:hover {
+    color: white;
+    background: var(--color-red);
+    border-color: var(--color-red);
+  }
+}
+
 .message--system .message__icon {
   color: var(--color-text-muted);
 }