feat(ui): Solve issues 4-10 and polish UI

- Added top padding to all pages (Fix #4)
- Implemented smooth accordion animations for navigation and messages (Fix #5, #9)
- Fixed double selection highlight in navigation bar (Fix #6)
- Enabled nested schedule routing for 'Session' view (Fix #7)
- Softened switching animations for message types (Fix #8)
- Reworked messages to use accordion expansion and removed history (Fix #9)
- Moved Support section into Settings page (Fix #10)
- Cleaned up unused imports and refined layouts

Co-Authored-By: Claude <noreply@anthropic.com>

src/styles/globals.css

@@ -54,16 +54,17 @@
   
   --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1.0);
   --md-sys-motion-duration-medium: 200ms;
+  --md-sys-motion-duration-long: 400ms;
 }
 
 @layer base {
   * {
-    @apply border-border;
+    @apply border-border outline-ring/45;
   }
 
   html,
   body {
-    min-height: 100%;
+    @apply h-full overflow-x-hidden;
     background-color: var(--md-sys-color-background);
   }
 
@@ -119,19 +120,24 @@
   }
 
   .page-enter {
-    animation: fadeIn 0.3s ease-out;
+    animation: fadeIn var(--md-sys-motion-duration-long) var(--md-sys-motion-easing-emphasized);
   }
 }
 
 @keyframes fadeIn {
-  from { opacity: 0; transform: translateY(8px); }
+  from { opacity: 0; transform: translateY(12px); }
   to { opacity: 1; transform: translateY(0); }
 }
 
+@keyframes slideIn {
+  from { opacity: 0; transform: translateX(-10px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
 /* Navigation System */
 
 .navigation-bar {
-  @apply fixed left-0 right-0 bottom-0 h-[var(--nav-bar-height)] bg-background/80 backdrop-blur-xl flex justify-around items-center px-4 z-50 transition-transform duration-200 border-t border-white/5;
+  @apply fixed left-0 right-0 bottom-0 h-[var(--nav-bar-height)] bg-background/80 backdrop-blur-xl flex justify-around items-center px-4 z-50 transition-transform duration-300 border-t border-white/5;
 }
 
 .navigation-bar.hidden {
@@ -147,7 +153,7 @@
 }
 
 .nav-item {
-  @apply flex items-center no-underline text-muted-foreground h-14 px-3 relative transition-all duration-200 rounded-2xl mx-2;
+  @apply flex items-center no-underline text-muted-foreground h-14 px-3 relative transition-all duration-300 rounded-2xl mx-2;
 }
 
 .nav-item:hover {
@@ -155,23 +161,27 @@
 }
 
 .nav-item.active {
-  @apply bg-sidebar-primary text-sidebar-primary-foreground;
+  @apply bg-sidebar-primary text-sidebar-primary-foreground font-semibold;
 }
 
 .navigation-bar .nav-item {
-  @apply flex-col justify-center flex-1 gap-1 p-0 mx-1 h-16;
+  @apply flex-col justify-center flex-1 gap-1 p-0 mx-1 h-16 bg-transparent;
+}
+
+.navigation-bar .nav-item.active {
+  @apply bg-transparent text-primary;
 }
 
 .nav-item-icon-wrapper {
-  @apply w-12 h-8 flex items-center justify-center rounded-2xl transition-colors duration-200 relative;
+  @apply w-12 h-8 flex items-center justify-center rounded-2xl transition-all duration-300 relative;
 }
 
-.nav-item.active .nav-item-icon-wrapper {
+.navigation-bar .nav-item.active .nav-item-icon-wrapper {
   @apply bg-primary/10;
 }
 
 .nav-item-label {
-  @apply text-[11px] font-medium whitespace-nowrap;
+  @apply text-[11px] font-medium whitespace-nowrap transition-all duration-300;
 }
 
 .navigation-rail.expanded .nav-item {
@@ -179,13 +189,13 @@
 }
 
 .navigation-rail.expanded .nav-item-label {
-  @apply text-sm ml-3 flex-1;
+  @apply text-sm ml-3 flex-1 opacity-100;
 }
 
 /* Submenu */
 
 .submenu {
-  @apply flex flex-col pl-14 pr-4 gap-1 mb-2;
+  @apply flex flex-col pl-14 pr-4 gap-1 mb-2 overflow-hidden transition-all duration-300;
 }
 
 .submenu-item {
@@ -199,3 +209,31 @@
 .submenu-item.active {
   @apply bg-primary/10 text-primary font-medium;
 }
+
+/* Main Content with Padding Fix #4 */
+.main-content {
+  @apply flex-1 p-6 transition-all duration-300 ease-[var(--md-sys-motion-easing-emphasized)];
+  padding-top: 2rem;
+}
+
+@media (min-width: 600px) {
+  .navigation-bar { display: none; }
+  .main-content { 
+    margin-left: var(--nav-rail-width); 
+    padding-top: 3rem;
+  }
+}
+
+@media (min-width: 1240px) {
+  .main-content.with-expanded-rail { 
+    margin-left: var(--nav-rail-expanded-width); 
+    padding-top: 4rem;
+  }
+}
+
+@media (max-width: 599px) {
+  .main-content { 
+    padding-bottom: calc(var(--nav-bar-height) + 2rem); 
+    padding-top: 2rem;
+  }
+}