1 files changed, 75 insertions, 0 deletions
diff --git a/src/ollama_web/static/style.css b/src/ollama_web/static/style.css
index 8a21d84..007ea10 100644
--- a/src/ollama_web/static/style.css
+++ b/src/ollama_web/static/style.css
@@ -321,6 +321,50 @@ header h1 {
   min-width: 0;
 }
 
+.token-gauge {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 42px;
+  height: 42px;
+  flex-shrink: 0;
+  margin-right: 2px;
+}
+
+.token-gauge svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+}
+
+.token-gauge .gauge-bg,
+.token-gauge .gauge-fg {
+  fill: none;
+  stroke-width: 3.5;
+  stroke-linecap: round;
+}
+
+.token-gauge .gauge-bg {
+  stroke: var(--border);
+}
+
+.token-gauge .gauge-fg {
+  stroke: var(--accent);
+  stroke-dasharray: 0 100;
+  transition: stroke-dasharray 0.3s ease, stroke 0.3s ease;
+}
+
+.token-gauge .gauge-text {
+  position: relative;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--muted);
+  line-height: 1;
+}
+
 select#model-select {
   max-width: 220px;
   min-width: 0;
@@ -360,6 +404,7 @@ main#chat {
 }
 
 .message {
+  position: relative;
   max-width: 860px;
   width: 100%;
   margin: 0 auto;
@@ -369,6 +414,36 @@ main#chat {
   line-height: 1.6;
 }
 
+.copy-btn {
+  position: absolute;
+  right: 8px;
+  bottom: 6px;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  color: var(--muted);
+  cursor: pointer;
+  font-size: 14px;
+  padding: 2px 6px;
+  line-height: 1;
+  opacity: 0.55;
+  transition: opacity 0.15s ease, border-color 0.15s ease;
+}
+
+.copy-btn:hover,
+.message:hover .copy-btn {
+  opacity: 1;
+  border-color: var(--border);
+}
+
+@media (max-width: 768px) {
+  .copy-btn {
+    font-size: 13px;
+    right: 6px;
+    bottom: 4px;
+  }
+}
+
 .message.user { background: var(--user-bg); }
 .message.assistant { background: var(--assistant-bg); }
 .message .role { font-weight: 600; margin-bottom: 6px; color: var(--muted); }