Enhance panel header styling and add hover effect

src/app/app.css

@@ -182,15 +182,45 @@ button:disabled {
 }
 
 .panel__header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
   padding: 14px 16px;
-  border-bottom: 1px solid var(--color-border);
   color: #e4d8ca;
+  text-align: left;
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid var(--color-border);
   font-size: 0.76rem;
   font-weight: 700;
   letter-spacing: 0.14em;
   text-transform: uppercase;
 }
 
+.panel__header:hover:not(:disabled) {
+  transform: none;
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.panel--collapsed .panel__header {
+  border-bottom: 0;
+}
+
+.panel__chevron {
+  width: 9px;
+  height: 9px;
+  flex: 0 0 auto;
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  transform: rotate(-45deg);
+  transition: transform 120ms ease;
+}
+
+.panel__chevron--expanded {
+  transform: rotate(45deg);
+}
+
 .panel__body {
   display: flex;
   flex-direction: column;