better calendar styling

bar/styles/calendar.css

@@ -13,7 +13,20 @@
 #calendar-popup {
     background-color: var(--background-alt);
     border: solid 2px var(--surface);
-    border-radius: 8px;
+    border-radius: 12px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    animation: slide-down 200ms ease-out;
+}
+
+@keyframes slide-down {
+    from {
+        opacity: 0;
+        margin-top: -20px;
+    }
+    to {
+        opacity: 1;
+        margin-top: 10px;
+    }
 }
 
 #calendar-title {
@@ -27,7 +40,7 @@
     background-color: var(--background-alt);
     border: solid 1px var(--surface);
     border-radius: 8px;
-    padding: 12px;
+    padding: 16px;
 }
 
 #no-events {
@@ -38,9 +51,14 @@
 
 /* Calendar event items */
 .event-item {
-    border-radius: 4px;
-    padding: 6px;
-    margin: 2px 0px;
+    border-radius: 6px;
+    padding: 8px 12px;
+    margin: 4px 0px;
+    transition: background-color 0.15s ease;
+}
+
+#event-content {
+    margin-left: 8px;
 }
 
 .event-item.upcoming {