From 8b1794d11e3c9a49f92c0f5830f6cad69f8b6724 Mon Sep 17 00:00:00 2001
From: Meleki <meleki@gott.local>
Date: Thu, 12 Mar 2026 22:30:17 +0100
Subject: [PATCH] style(chat): Usage-Badge Overlay und Key-Switch-Modal
 CSS-Anpassungen

- Overlay: full-width mit zentriertem Inhalt, semi-transparenter Hintergrund
- Check-Button Styling in Usage-Badge integriert
- Key-Switch-Rows: Hover-Effekt, Usage-Badge max-width
- Padding und Border-Farben harmonisiert
---
 restart.sh           |  2 ++
 wwwroot/css/chat.css | 50 +++++++++++++++++++++++++-------------------
 2 files changed, 30 insertions(+), 22 deletions(-)
 create mode 100644 restart.sh

diff --git a/restart.sh b/restart.sh
new file mode 100644
index 0000000..1656951
--- /dev/null
+++ b/restart.sh
@@ -0,0 +1,2 @@
+#!/bin/bash
+systemctl restart gott
diff --git a/wwwroot/css/chat.css b/wwwroot/css/chat.css
index ff563e4..f4e31ab 100644
--- a/wwwroot/css/chat.css
+++ b/wwwroot/css/chat.css
@@ -7,16 +7,19 @@
 
 .chat-usage-overlay {
   position: absolute;
-  top: var(--page-spacing);
-  left: 50%;
-  transform: translateX(-50%);
+  top: 0;
+  left: 0;
+  right: 0;
   z-index: 50;
   display: flex;
   align-items: center;
-  gap: calc(var(--badge-spacing) / 2);
+  gap: var(--badge-spacing);
   opacity: 1;
   transition: opacity var(--transition-duration), transform var(--transition-duration);
-  cursor: pointer;
+  padding: var(--page-padding);
+  background: rgb(from var(--f1-bg) r g b / var(--semi-transparent));
+  border-radius: 0 0 var(--border-radius) var(--border-radius);
+  justify-content: center;
 }
 
 .chat-usage-overlay[hidden] {
@@ -25,28 +28,21 @@
 
 .chat-usage-overlay.hidden {
   opacity: 0;
-  transform: translateX(-50%) translateY(-1em);
+  transform: translateY(-1em);
   pointer-events: none;
 }
 
 .chat-usage-overlay .usage-badge {
   margin-top: 0;
-  background: var(--chat-bg);
-  border-color: var(--f3-border);
-}
-
-.chat-usage-overlay .chat-usage-check {
-  background: var(--chat-bg);
-  border: var(--border-width) solid var(--f3-border);
-  border-radius: var(--border-radius);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.chat-usage-overlay .chat-usage-check:hover {
   background: var(--f2-bg);
+  border-color: var(--f2-border);
+  padding: var(--badge-padding);
+  cursor: pointer;
+}
+
+.chat-usage-overlay .usage-badge:hover {
+  background: var(--f3-bg);
+  border-color: var(--f3-border);
 }
 
 #chat {
@@ -1388,17 +1384,27 @@
   display: flex;
   align-items: center;
   gap: var(--badge-spacing);
-  padding: var(--badge-padding);
+  padding: var(--box-padding);
   border: var(--border-width) solid var(--f3-border);
   border-radius: var(--border-radius);
   background: var(--f3-bg);
 }
 
+.key-switch-row:hover {
+  border-color: rgb(from var(--primary) r g b / .5);
+  background: rgb(from var(--primary) r g b / .1);
+}
+
 .key-switch-row.active {
   border-color: var(--primary);
   background: rgb(from var(--primary) r g b / .2);
 }
 
+.key-switch-row .usage-badge {
+  margin-top: 0;
+  max-width: 40vw;
+}
+
 .key-switch-info {
   flex: 1;
   min-width: 0;