/* Ask-me page styles (dark chat UI) */
.ask-me-section { position: relative; padding: 4rem 0 3rem; min-height: calc(100vh - 100px); overflow: hidden; background-color: #0f0a2e; }
.ask-me-bg-orb { position: absolute; width: 24rem; height: 24rem; border-radius: 50%; filter: blur(80px); opacity: 0.6; animation: floatOrb 20s ease-in-out infinite; z-index: 0; }
.ask-me-bg-orb-1 { top: 10%; right: 10%; background: #013366; animation-delay: 0s; }
.ask-me-bg-orb-2 { bottom: 10%; left: 10%; background: #28ab88; animation-delay: 7s; }
.ask-me-bg-orb-3 { top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(99, 102, 241, 0.3); width: 18rem; height: 18rem; animation-delay: 14s; }
@keyframes floatOrb { 0%,100%{ transform: translate(0,0) scale(1); } 33%{ transform: translate(30px,-30px) scale(1.1); } 66%{ transform: translate(-30px,30px) scale(0.9); } }
.ask-me-header { text-align: center; margin-bottom: 3rem; position: relative; z-index: 1; animation: fadeInUp 0.8s ease-out; }
.ask-me-icon-wrapper { margin-bottom: 1.5rem; }
.ask-me-icon { width: 120px; height: 120px; background: linear-gradient(135deg, #28ab88 0%, #013366 100%); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 20px 60px rgba(40,171,136,0.4); animation: float 3s ease-in-out infinite; position: relative; }
.ask-me-icon::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: linear-gradient(135deg, #28ab88, #013366); opacity: 0.3; filter: blur(20px); z-index: -1; animation: pulseGlow 2s ease-in-out infinite; }
.ask-me-icon i { font-size: 3rem; color: white; }
@keyframes float { 0%,100%{ transform: translateY(0) rotate(0deg); } 50%{ transform: translateY(-15px) rotate(5deg); } }
@keyframes pulseGlow { 0%,100%{ opacity:0.3; transform: scale(1); } 50%{ opacity:0.6; transform: scale(1.1); } }
.ask-me-title { font-size: 2.5rem; font-weight: bold; color: white; margin-bottom: 0.5rem; background: linear-gradient(to left, #28ab88, #013366); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.ask-me-subtitle { font-size: 1.125rem; color: #d1d5db; margin: 0; }
.ask-me-content { position: relative; z-index: 1; }
.chat-container { border-radius: 1.5rem; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3); background: rgba(255,255,255,0.05); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border:1px solid rgba(255,255,255,0.1); display:flex; flex-direction:column; height: calc(100vh - 280px); max-height: calc(100vh - 280px); animation: fadeInUp 0.8s ease-out 0.2s both; }
.chat-header { background: linear-gradient(135deg, rgba(40,171,136,0.2) 0%, rgba(1,51,102,0.2) 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding:1.25rem 1.5rem; color:white; flex-shrink:0; border-bottom:1px solid rgba(255,255,255,0.1); }
.chat-header-content { display:flex; align-items:center; justify-content:space-between; }
.chat-header-info { display:flex; align-items:center; gap:1rem; }
.chat-header-text { display:flex; flex-direction:column; }
.chat-header-title { margin:0; font-size:1.125rem; font-weight:700; color:white; }
.chat-header-status { color:#d1d5db; font-size:0.875rem; margin-top:0.25rem; }
.clear-history-btn { background: rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); color:white; padding:0.5rem 1rem; border-radius:0.5rem; transition:all 0.3s; font-size:0.875rem; cursor:pointer; display:flex; align-items:center; gap:0.5rem; }
.clear-history-btn:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.4); transform: translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.2); }
.clear-history-btn i { margin-left: 0.25rem; }
.clear-history-text { display:inline; }
@media (max-width:768px){ .clear-history-text { display:none; } }
.chat-avatar, .message-avatar { width:45px; height:45px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.bot-avatar { background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); border:1px solid rgba(255,255,255,0.2); }
.bot-avatar i { color:white; font-size:1.2rem; }
.user-avatar { background: linear-gradient(135deg, #28ab88 0%, #013366 100%); border:1px solid rgba(255,255,255,0.2); }
.user-avatar i { color:white; font-size:1.2rem; }
.status-dot { display:inline-block; width:8px; height:8px; background:#28ab88; border-radius:50%; margin-left:6px; animation:pulse 2s infinite; box-shadow:0 0 8px rgba(40,171,136,0.6); }
@keyframes pulse { 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:0.6; transform:scale(1.2); } }
.chat-messages { flex:1; overflow-y:auto; padding:1.5rem; background: rgba(15,10,46,0.3); min-height:0; }
.message { margin-bottom:1.5rem; animation: fadeInUp 0.4s ease; }
@keyframes fadeInUp { from{ opacity:0; transform: translateY(15px); } to{ opacity:1; transform: translateY(0); } }
.message-wrapper { display:flex; align-items:flex-start; gap:0.75rem; }
.bot-message .message-wrapper { flex-direction: row-reverse; }
.message-content { flex:1; max-width:75%; }
.message-bubble { padding:1rem 1.25rem; border-radius:1.25rem; position:relative; word-wrap:break-word; color:#1f2937; }
.message-bubble p { color: inherit; margin:0; }
.bot-bubble { background: rgba(255,255,255,0.08); backdrop-filter: blur(10px); border:1px solid rgba(255,255,255,0.1); border-top-left-radius:0.25rem; box-shadow:0 2px 8px rgba(0,0,0,0.2); color:#e5e7eb; }
.bot-bubble p { color:#e5e7eb; margin:0; }
.user-bubble { background: linear-gradient(135deg, #28ab88 0%, #013366 100%); color:white; border-top-right-radius:0.25rem; box-shadow:0 4px 12px rgba(40,171,136,0.4); border:1px solid rgba(255,255,255,0.1); }
.message-time { display:block; margin-top:0.5rem; font-size:0.75rem; color:#9ca3af; text-align:right; }
.bot-message .message-time { text-align:left; }
.blog-link-button-wrapper { display:flex; justify-content:flex-start; margin-top:1rem; padding-top:0.75rem; border-top:1px solid rgba(255,255,255,0.1); }
.bot-message .blog-link-button-wrapper { justify-content:flex-end; }
.blog-link-button { display:inline-flex; align-items:center; gap:0.75rem; padding:0.875rem 1.5rem; background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color:white !important; border-radius:1rem; text-decoration:none; font-size:0.95rem; font-weight:600; transition: all 0.3s ease; box-shadow:0 4px 12px rgba(99,102,241,0.3); border:none; cursor:pointer; }
.blog-link-button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(99,102,241,0.5); color:white !important; text-decoration:none; background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); }
.blog-link-button:active { transform: translateY(0); }
.blog-link-button i { font-size:1rem; }
.blog-link-button i.fa-arrow-left { margin-right: auto; font-size:0.875rem; }
.suggested-questions-wrapper { padding:1rem 1.5rem; background: rgba(255,255,255,0.03); backdrop-filter: blur(10px); border-top:1px solid rgba(255,255,255,0.1); flex-shrink:0; }
.suggested-questions { display:flex; gap:0.75rem; flex-wrap:wrap; justify-content:center; align-items:center; }
.suggested-question-btn { display:inline-flex; align-items:center; gap:0.5rem; padding:0.625rem 1rem; background: rgba(255,255,255,0.08); backdrop-filter: blur(10px); border:1px solid rgba(255,255,255,0.15); border-radius:0.75rem; color:#d1d5db; font-size:0.875rem; font-weight:500; cursor:pointer; transition: all 0.3s ease; white-space:nowrap; }
.suggested-question-btn:hover { background: linear-gradient(135deg, #28ab88 0%, #013366 100%); border-color: rgba(40,171,136,0.5); color:white; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(40,171,136,0.4); }
.suggested-question-btn i { font-size:0.875rem; color:inherit; }
.chat-input-wrapper { padding:1rem 1.5rem; background: rgba(255,255,255,0.05); backdrop-filter: blur(10px); border-top:1px solid rgba(255,255,255,0.1); flex-shrink:0; }
.chat-input-group { display:flex; gap:0.75rem; align-items:center; }
.chat-input { flex:1; border:2px solid rgba(255,255,255,0.1); border-radius:1rem; padding:0.875rem 1.25rem; font-size:0.95rem; transition: all 0.3s; height:44px; background: rgba(255,255,255,0.08); color:white; backdrop-filter: blur(10px); }
.chat-input::placeholder { color:#9ca3af; }
.chat-input:focus { border-color:#28ab88; box-shadow: 0 0 0 3px rgba(40,171,136,0.2); outline:none; background: rgba(255,255,255,0.12); }
.timer-display { display:flex; align-items:center; gap:0.5rem; padding:0.5rem 1rem; background: rgba(251,191,36,0.2); border:1px solid rgba(251,191,36,0.3); border-radius:0.75rem; color:#fbbf24; font-weight:600; font-size:0.875rem; min-width:100px; justify-content:center; backdrop-filter: blur(10px); }
.timer-hidden { display:none !important; }
.send-button { padding:0.875rem 1.75rem; border-radius:1rem; font-weight:600; background: linear-gradient(135deg, #28ab88 0%, #013366 100%); color:white; box-shadow:0 4px 12px rgba(40,171,136,0.4); transition: all 0.3s; border:none; display:flex; flex-direction:row-reverse; align-items:center; gap:0.5rem; cursor:pointer; }
.send-button-text { display:inline; }
.send-button i { transform: scaleX(-1); }
.send-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(40,171,136,0.6); background: linear-gradient(135deg, #2dd4bf 0%, #0284c7 100%); }
.send-button:disabled { opacity:0.5; cursor:not-allowed; box-shadow:none; background: rgba(255,255,255,0.1); }
#chat-messages::-webkit-scrollbar { width:8px; }
#chat-messages::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius:10px; }
#chat-messages::-webkit-scrollbar-thumb { background: linear-gradient(135deg, #28ab88 0%, #013366 100%); border-radius:10px; }
#chat-messages::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, #2dd4bf 0%, #0284c7 100%); }
.typing-indicator { display:flex; gap:4px; padding:8px 0; }
.typing-indicator span { width:8px; height:8px; border-radius:50%; background:#28ab88; animation: typing 1.4s infinite; box-shadow:0 0 8px rgba(40,171,136,0.6); }
.typing-indicator span:nth-child(2) { animation-delay:0.2s; }
.typing-indicator span:nth-child(3) { animation-delay:0.4s; }
@keyframes typing { 0%,60%,100%{ transform: translateY(0); opacity:0.7; } 30%{ transform: translateY(-10px); opacity:1; } }
.loading-message { opacity:0.8; }
@keyframes fadeInUp { from{ opacity:0; transform: translateY(30px); } to{ opacity:1; transform: translateY(0); } }
@media (max-width:768px){ .ask-me-section { padding:2rem 0 2rem; } .ask-me-icon { width:80px; height:80px; } .ask-me-icon i { font-size:2rem; } .ask-me-title { font-size:1.75rem; } .ask-me-subtitle { font-size:1rem; } .chat-container { height: calc(100vh - 200px); max-height: calc(100vh - 200px); border-radius: 1rem; } .chat-messages { padding:1rem; } .message-content { max-width:85%; } .send-button-text { display:none; } .ask-me-bg-orb { width:16rem; height:16rem; } .ask-me-bg-orb-3 { width:12rem; height:12rem; } }