:root {
     --bg-color: #ffae3d;
     --text-main: #111827;
     --glass-bg: rgba(15, 23, 42, 0.8);
     --glass-border: rgba(255, 255, 255, 0.1);
 }



 .red-hat-display {
     font-family: "Red Hat Display", sans-serif;
     font-optical-sizing: auto;

 }

 .dark {
     --bg-color: #0f172a;
     --text-main: #f8fafc;
     --glass-bg: rgba(15, 23, 42, 0.3);
     --glass-border: rgba(255, 255, 255, 0.1);
 }

 .glass-card {
     background: var(--glass-bg);
     backdrop-filter: blur(12px);
     border: 1px solid var(--glass-border);
 }



 body {
     min-height: 100vh;
     background-color: #134d95;
     background-image:
         radial-gradient(circle at 0% 0%, #120195 0%, transparent 60%),
         radial-gradient(circle at 100% 0%, #eb00ef 0%, transparent 60%),
         radial-gradient(circle at 0% 100%, #3589ff 0%, transparent 60%),
         radial-gradient(circle at 100% 100%, #ffe70e 0%, transparent 50%);
     background-size: cover;
     background-attachment: fixed;
     background-repeat: no-repeat;
 }

 body.dark {
     min-height: 100vh;
     /* Deep midnight base */
     background-color: #020617;

     /* Overlapping atmospheric gradients for depth */
     background-image:
         /* Top Left: Deep Indigo */
         radial-gradient(circle at 10% 10%, rgba(49, 46, 129, 0.4) 0%, transparent 60%),
         /* Top Right: Rich Purple */
         radial-gradient(circle at 90% 10%, rgba(81, 0, 151, 0.659) 0%, transparent 60%),
         /* Bottom Left: Dark Slate */
         radial-gradient(circle at 10% 90%, rgb(24, 95, 129) 0%, transparent 60%),
         /* Bottom Right: Muted Violet */
         radial-gradient(circle at 90% 90%, rgba(76, 29, 149, 0.3) 0%, transparent 60%);

     background-size: cover;
     background-attachment: fixed;
     background-repeat: no-repeat;

     /* Ensure text is always legible */
     color: #f8fafc;
 }



 .typed-cursor {
     color: #fff;
     font-size: 3rem;
 }

 @media (min-width: 768px) {
     .typed-cursor {
         font-size: 5rem;
     }
 }

 #theme-toggle {
     cursor: pointer;
     transition: transform 0.3s ease;
 }

 #theme-toggle:active {
     transform: scale(0.9);
 }

 /* Base glassy window with improved contrast */
 #ai-window {
     /* Use a dark gray tint instead of pure white */
     background: rgba(30, 30, 35, 0.85);
     /* Slightly less blur helps text pop */
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     /* Add a subtle border to define the edge */
     border: 1px solid rgba(255, 255, 255, 0.1);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
 }

 /* Chat bubble styling: Use Pastel accents */
 .ai-message-ai {
     background: rgba(192, 132, 252, 0.2);
     /* Soft Pastel Purple */
     border-left: 3px solid #c084fc;
     /* Stronger contrast border */
     color: #f3e8ff;
     /* Off-white text */
 }

 .ai-message-user {
     background: rgba(75, 85, 99, 0.4);
     /* Dark Gray/Slate */
     color: #ffffff;
 }

 .glass-card {
     background: var(--glass-bg);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border: 1px solid var(--glass-border);
     box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.16);
     transition: all 0.3s ease;
 }

 .glass-card:hover {
     background: rgba(6, 45, 96, 0.691);
     border-color: rgba(255, 255, 255, 0.2);
     box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
 }