/* AI Chatbot Styles */
.ai-chatbot-container {
     position: fixed;
     bottom: 2rem;
     right: 2rem;
     z-index: 1000;
     pointer-events: none;
}

.ai-chatbot-fab {
     pointer-events: auto;
     width: 60px;
     height: 60px;
     border-radius: 50%;
     background: linear-gradient(135deg, #3b82f6, #6366f1);
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     box-shadow: 0 10px 25px rgba(59, 130, 246, 0.5);
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     position: relative;
     overflow: hidden;
}

.ai-chatbot-fab:hover {
     transform: scale(1.1) rotate(5deg);
     box-shadow: 0 15px 35px rgba(59, 130, 246, 0.7);
}

.ai-chatbot-fab i,
.ai-chatbot-fab svg {
     width: 30px;
     height: 30px;
}

.ai-chatbot-fab::after {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
     opacity: 0;
     transition: opacity 0.3s;
}

.ai-chatbot-fab:hover::after {
     opacity: 1;
     animation: fab-blink 1.5s infinite;
}

@keyframes fab-blink {
     0% {
          transform: scale(0.5);
          opacity: 0;
     }

     50% {
          opacity: 1;
     }

     100% {
          transform: scale(1.5);
          opacity: 0;
     }
}

.ai-chat-window {
     pointer-events: auto;
     position: absolute;
     bottom: 80px;
     right: 0;
     width: 380px;
     height: 550px;
     background: rgba(255, 255, 255, 0.9);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.3);
     border-radius: 24px;
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
     display: flex;
     flex-direction: column;
     overflow: hidden;
     transform-origin: bottom right;
     transform: scale(0) translateY(20px);
     opacity: 0;
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ai-chat-window.active {
     transform: scale(1) translateY(0);
     opacity: 1;
}

.ai-chat-header {
     padding: 1.5rem;
     background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(99, 102, 241, 0.1));
     border-bottom: 1px solid rgba(0, 0, 0, 0.05);
     display: flex;
     align-items: center;
     justify-content: space-between;
}

.ai-brand {
     display: flex;
     align-items: center;
     gap: 0.75rem;
}

.ai-avatar {
     width: 80px;
     height: 80px;
     background: transparent;
     display: flex;
     align-items: center;
     justify-content: center;
     perspective: 1000px;
     margin-top: 10px;
     /* Shift down to fit legs */
}

/* 3D Robot Container */
.robot-3d-container {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     transform-style: preserve-3d;
}

/* Full Robot Wrapper */
.robot-wrapper {
     position: relative;
     width: 60px;
     height: 80px;
     display: flex;
     flex-direction: column;
     align-items: center;
     transform-style: preserve-3d;
     animation: robot-float 6s ease-in-out infinite;
     transform-origin: bottom center;
}

@keyframes robot-float {

     0%,
     100% {
          transform: translateY(0) rotateX(0) rotateY(0);
     }

     25% {
          transform: translateY(-4px) rotateX(5deg) rotateY(3deg);
     }

     50% {
          transform: translateY(0) rotateX(0) rotateY(0);
     }

     75% {
          transform: translateY(-4px) rotateX(5deg) rotateY(-3deg);
     }
}

/* 3D Robot Head */
.robot-head {
     width: 50px;
     height: 42px;
     background: #ffffff;
     border-radius: 16px;
     position: relative;
     box-shadow:
          inset -2px -2px 6px rgba(0, 0, 0, 0.1),
          inset 2px 2px 6px rgba(255, 255, 255, 0.8),
          0 6px 10px rgba(0, 0, 0, 0.15);
     transform-style: preserve-3d;
     z-index: 10;
     display: flex;
     justify-content: center;
     align-items: center;
     transition: transform 0.2s ease-out;
     /* For cursor tracking */
     border: 1px solid rgba(255, 255, 255, 0.6);
}

/* Headphones */
.robot-headphone {
     position: absolute;
     top: -6px;
     width: 100%;
     height: 100%;
     pointer-events: none;
     z-index: 11;
     transform-style: preserve-3d;
}

.headphone-band {
     position: absolute;
     top: 0;
     left: -4px;
     right: -4px;
     height: 25px;
     border: 4px solid #38bdf8;
     border-bottom: none;
     border-radius: 20px 20px 0 0;
     z-index: -1;
     box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.5);
}

.headphone-cup {
     position: absolute;
     top: 15px;
     width: 12px;
     height: 24px;
     background: #38bdf8;
     border-radius: 6px;
     box-shadow: inset -2px -2px 4px rgba(0, 0, 0, 0.2), inset 2px 2px 4px rgba(255, 255, 255, 0.4);
}

.headphone-cup.left {
     left: -8px;
     border-radius: 8px 4px 4px 8px;
}

.headphone-cup.right {
     right: -8px;
     border-radius: 4px 8px 8px 4px;
}

/* Face Screen */
.robot-face-screen {
     position: absolute;
     width: 38px;
     height: 26px;
     background: #0f172a;
     border-radius: 10px;
     box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.3);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.2);
     transform: translateZ(5px);
     gap: 2px;
}

/* Eyes */
.robot-eyes {
     display: flex;
     gap: 8px;
     margin-top: 2px;
}

.eye {
     width: 6px;
     height: 6px;
     background: #a5f3fc;
     border-radius: 50%;
     box-shadow: 0 0 6px #a5f3fc;
     animation: eye-blink 4s infinite;
     transition: transform 0.1s ease-out;
     /* Cursor tracking */
}

@keyframes eye-blink {

     0%,
     48%,
     52%,
     100% {
          transform: scaleY(1);
     }

     50% {
          transform: scaleY(0.1);
     }
}

/* Mouth */
.robot-mouth {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 6px;
     width: 20px;
     margin-top: 2px;
}

.smile {
     width: 12px;
     height: 6px;
     border-bottom: 3px solid #a5f3fc;
     border-radius: 0 0 12px 12px;
     box-shadow: 0 2px 4px #a5f3fc;
     transition: all 0.3s ease;
}

/* Torso */
.robot-torso {
     width: 34px;
     height: 22px;
     background: #ffffff;
     border-radius: 12px;
     margin-top: -6px;
     z-index: 5;
     box-shadow:
          inset -2px -2px 6px rgba(0, 0, 0, 0.1),
          inset 2px 2px 6px rgba(255, 255, 255, 0.8),
          0 4px 6px rgba(0, 0, 0, 0.1);
     border-top: 6px solid #38bdf8;
     position: relative;
}

/* Arms & Hands */
.robot-arms {
     position: absolute;
     top: 40px;
     width: 100%;
     display: flex;
     justify-content: space-between;
     z-index: 6;
     pointer-events: none;
}

.arm {
     width: 14px;
     height: 20px;
     position: relative;
}

.arm.left {
     left: -6px;
     transform-origin: top right;
     animation: arm-swing-left 3s ease-in-out infinite alternate;
}

.arm.right {
     right: -6px;
     transform-origin: top left;
     animation: arm-swing-right 3s ease-in-out infinite alternate;
     animation-delay: -1.5s;
}

.arm::before {
     content: '';
     position: absolute;
     top: 0;
     left: 4px;
     width: 6px;
     height: 12px;
     background: #1e293b;
     /* Dark joints */
     border-radius: 3px;
}

.claw {
     position: absolute;
     bottom: -2px;
     left: 0;
     width: 14px;
     height: 14px;
     background: #38bdf8;
     border-radius: 50% 50% 4px 4px;
     box-shadow: inset -1px -1px 3px rgba(0, 0, 0, 0.2);
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     padding: 0 2px;
}

.finger {
     width: 3px;
     height: 4px;
     background: #ffffff;
     border-radius: 2px;
     margin-bottom: -2px;
}

@keyframes arm-swing-left {
     0% {
          transform: rotate(15deg) translateY(0);
     }

     100% {
          transform: rotate(-10deg) translateY(-2px);
     }
}

@keyframes arm-swing-right {
     0% {
          transform: rotate(-15deg) translateY(0);
     }

     100% {
          transform: rotate(10deg) translateY(-2px);
     }
}

/* Legs */
.robot-legs {
     position: absolute;
     bottom: 0px;
     width: 24px;
     display: flex;
     justify-content: space-between;
     z-index: 4;
}

.leg {
     width: 8px;
     height: 12px;
     background: #1e293b;
     border-radius: 4px;
     position: relative;
}

.leg::after {
     content: '';
     position: absolute;
     bottom: -4px;
     left: -2px;
     width: 12px;
     height: 6px;
     background: #38bdf8;
     border-radius: 4px 4px 2px 2px;
}

.leg.left {
     animation: leg-hover-left 3s ease-in-out infinite alternate;
}

.leg.right {
     animation: leg-hover-right 3s ease-in-out infinite alternate;
     animation-delay: -1.5s;
}

@keyframes leg-hover-left {
     0% {
          transform: translateY(0);
     }

     100% {
          transform: translateY(3px);
     }
}

@keyframes leg-hover-right {
     0% {
          transform: translateY(3px);
     }

     100% {
          transform: translateY(0);
     }
}

/* Speaking State (triggered by JS) */
.ai-avatar.speaking .robot-face-screen {
     box-shadow: inset 0 0 12px rgba(56, 189, 248, 0.4), 0 0 4px rgba(56, 189, 248, 0.5);
     border-color: #7dd3fc;
}

.ai-avatar.speaking .eye {
     background: #7dd3fc;
     box-shadow: 0 0 8px #7dd3fc;
}

.ai-avatar.speaking .smile {
     /* Animate mouth when speaking */
     animation: mouth-speak 0.3s infinite alternate;
     border-bottom-width: 4px;
     box-shadow: 0 4px 6px #a5f3fc;
}

@keyframes mouth-speak {
     0% {
          transform: scaleX(1) scaleY(1);
     }

     100% {
          transform: scaleX(1.2) scaleY(1.5);
     }
}

/* Remove old glow animation if not needed, or keep for other elements */
@keyframes glow {
     from {
          box-shadow: 0 0 5px #60a5fa;
     }

     to {
          box-shadow: 0 0 15px #60a5fa, 0 0 5px white;
     }
}

.ai-info h4 {
     margin: 0;
     font-size: 1rem;
     font-weight: 700;
     color: #1e293b;
}

.ai-status {
     font-size: 0.75rem;
     color: #10b981;
     display: flex;
     align-items: center;
     gap: 0.25rem;
}

.ai-status::before {
     content: '';
     width: 8px;
     height: 8px;
     background: #10b981;
     border-radius: 50%;
     animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.close-chat {
     cursor: pointer;
     color: #64748b;
     transition: color 0.2s;
}

.close-chat:hover {
     color: #ef4444;
}

.mute-chat {
     cursor: pointer;
     color: #64748b;
     transition: color 0.2s;
     margin-right: 8px;
     /* Spacing between buttons */
}

.mute-chat:hover {
     color: #3b82f6;
}

.ai-chat-messages {
     flex: 1;
     padding: 1.5rem;
     overflow-y: auto;
     display: flex;
     flex-direction: column;
     gap: 1rem;
     scroll-behavior: smooth;
}

.message {
     max-width: 85%;
     padding: 0.75rem 1rem;
     border-radius: 16px;
     font-size: 0.95rem;
     line-height: 1.5;
}

.message.ai {
     background: #f1f5f9;
     color: #1e293b;
     align-self: flex-start;
     border-bottom-left-radius: 4px;
}

.message.user {
     background: #3b82f6;
     color: white;
     align-self: flex-end;
     border-bottom-right-radius: 4px;
}

.ai-chat-footer {
     padding: 1.25rem;
     border-top: 1px solid rgba(0, 0, 0, 0.05);
     background: white;
}

.quick-queries {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
     margin-bottom: 1rem;
}

.query-chip {
     padding: 0.4rem 0.8rem;
     background: #f1f5f9;
     border: 1px solid #e2e8f0;
     border-radius: 20px;
     font-size: 0.85rem;
     color: #475569;
     cursor: pointer;
     transition: all 0.2s;
}

.query-chip:hover {
     background: #3b82f6;
     color: white;
     border-color: #3b82f6;
}

.chat-input-wrapper {
     display: flex;
     align-items: center;
     gap: 0.75rem;
}

.chat-input {
     flex: 1;
     padding: 0.75rem 1rem;
     background: #f8fafc;
     border: 1px solid #e2e8f0;
     border-radius: 12px;
     font-size: 0.95rem;
     outline: none;
     transition: border-color 0.2s;
}

.chat-input:focus {
     border-color: #3b82f6;
}

.send-btn {
     width: 45px;
     height: 45px;
     border-radius: 12px;
     background: #3b82f6;
     color: white;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: background 0.2s;
}

.send-btn:hover {
     background: #2563eb;
}

@keyframes ping {

     75%,
     100% {
          transform: scale(2);
          opacity: 0;
     }
}

/* Scrollbar styling */
.ai-chat-messages::-webkit-scrollbar {
     width: 4px;
}

.ai-chat-messages::-webkit-scrollbar-track {
     background: transparent;
}

.ai-chat-messages::-webkit-scrollbar-thumb {
     background: #cbd5e1;
     border-radius: 2px;
}

@keyframes fade-in {
     from {
          opacity: 0;
          transform: translateY(10px);
     }

     to {
          opacity: 1;
          transform: translateY(0);
     }
}

.animate-fade-in {
     animation: fade-in 0.3s ease forwards;
}

/* Link styling */
.message.ai a {
     color: #3b82f6;
     text-decoration: underline;
     font-weight: 500;
}

.message.ai a:hover {
     color: #2563eb;
}

/* Weather Report Card */
.weather-report {
     background: rgba(255, 255, 255, 0.5);
     border-radius: 12px;
     padding: 10px;
     margin-top: 5px;
     border: 1px solid rgba(59, 130, 246, 0.1);
}

.weather-report p {
     margin: 4px 0;
}

.weather-report strong {
     color: #2563eb;
}

.text-xs {
     font-size: 0.75rem;
}

.text-secondary {
     color: #64748b;
}

.mt-2 {
     margin-top: 0.5rem;
}

/* Voice Button Styling */
.voice-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     width: 40px;
     height: 40px;
     transition: all 0.3s ease;
}

.voice-btn.listening {
     background: rgba(239, 68, 68, 0.1) !important;
     animation: pulse-red 1.5s infinite;
}

@keyframes pulse-red {
     0% {
          box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
     }

     70% {
          box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
     }

     100% {
          box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
     }
}

/* Glass Card Styles */
.glass-card {
     position: relative;
     background: rgba(255, 255, 255, 0.2);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.3);
     border-radius: 24px;
     padding: 20px;
     margin: 10px 0;
     overflow: hidden;
     box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
     color: #1a1a1a;
}

.glass-card-blob {
     position: absolute;
     width: 100px;
     height: 100px;
     background: #6366f1;
     border-radius: 50%;
     top: -20px;
     left: -20px;
     filter: blur(40px);
     opacity: 0.6;
     z-index: -1;
     animation: blob-bounce 6s infinite ease-in-out;
}

.glass-card-title {
     font-size: 1.25rem;
     font-weight: 700;
     color: #1a1a1a;
     margin-bottom: 8px;
     position: relative;
     z-index: 1;
}

.glass-card-content {
     font-size: 0.9rem;
     color: #4b5563;
     line-height: 1.5;
     position: relative;
     z-index: 1;
}

@keyframes blob-bounce {

     0%,
     100% {
          transform: translate(0, 0) scale(1);
     }

     50% {
          transform: translate(10px, 10px) scale(1.1);
     }
}