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

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;