/* guideai.min.css */

 :root {--purple:#6f42c1;--purple-dark:#5a31a3;--purple-light:#9775d6;--purple-accent:#8e63d2;--purple-lightest:#f8f6fb;--purple-lighter:#ede7f6;--purple-darker:#4a28a0;--purple-darkest:#3d1f8a;--gradient-primary:linear-gradient(135deg,#6f42c1 0%,#8e63d2 100%);--gradient-subtle:linear-gradient(135deg,#f8f6fb 0%,#ede7f6 100%);--gradient-chat-user:linear-gradient(135deg,#e1bee7 0%,#d4a5d9 100%);--light-bg:#ffffff;--mid-bg:#f4f4f8;--input-bg:#ffffff;--text-dark:#1e1e1e;--text-muted:#6c757d;--text-purple-muted:rgba(159,117,214,0.6);--border-light:rgba(255,255,255,0.25);--border-purple-light:rgba(111,66,193,0.2);--shadow-purple-glow:0 0 20px rgba(111,66,193,0.1);--shadow-purple-focus:0 0 0 3px rgba(111,66,193,0.2);--purple-dark-mode:#8e63d2;--background-dark:#1a1625;--surface-dark:#2d2438;--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-xxl:3rem;--font-family-base:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--font-family-heading:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--font-size-base:1rem;--font-size-sm:0.875rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--line-height-base:1.5;--line-height-tight:1.25;--line-height-relaxed:1.6;--focus-ring:0 0 0 0.2rem rgba(111,66,193,0.25);--focus-ring-visible:0 0 0 2px rgba(111,66,193,0.5);--hover-transform:translateY(-2px);--active-scale:scale(0.95);--transition-base:all 0.3s ease;--transition-fast:all 0.15s ease;--transition-smooth:all 0.4s cubic-bezier(0.4,0,0.2,1);--transition-bounce:all 0.3s cubic-bezier(0.68,-0.55,0.265,1.55);--glass-bg:rgba(255,255,255,0.1);--glass-border:rgba(255,255,255,0.2);--glass-blur:blur(10px);--chat-bubble-radius:1.2rem;--chat-input-radius:12px;--chat-container-padding:1rem;--message-max-width:85%} @media (prefers-reduced-motion:reduce) {:root {--transition-base:none;--transition-fast:none;--transition-smooth:none;--transition-bounce:none} *,*::before,*::after {animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important} } body {font-family:var(--font-family-base);background-color:var(--light-bg);color:var(--text-dark);line-height:var(--line-height-base)} .btn {display:inline-flex;align-items:center;justify-content:center;padding:0.75rem 1.5rem;font-size:1rem;font-weight:600;text-decoration:none;border:none;border-radius:8px;cursor:pointer;transition:var(--transition-base);box-shadow:0 2px 4px rgba(0,0,0,0.1)} .btn:hover {transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,0.15)} .btn-purple {background:var(--gradient-primary);color:white;position:relative;overflow:hidden} .btn-purple::before {content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:left 0.5s} .btn-purple:hover::before {left:100%} .btn-purple:hover {background:linear-gradient(135deg,var(--purple-dark) 0%,var(--purple-darkest) 100%);color:white;transform:var(--hover-transform) scale(1.05);box-shadow:0 6px 20px rgba(111,66,193,0.3)} .btn-purple:active {transform:var(--active-scale);transition:var(--transition-fast)} .btn-circle {width:48px;height:48px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;padding:0;min-width:44px;position:relative;overflow:hidden} .btn-circle.btn-purple {background:var(--gradient-primary);border:2px solid transparent;background-clip:padding-box} .btn-circle.btn-purple:hover {animation:purplePulse 1s infinite;transform:scale(1.1)} .btn-circle:disabled {opacity:0.5;cursor:not-allowed;transform:none !important;animation:none !important} .btn-outline-purple {background:transparent;color:var(--purple);border:2px solid var(--purple)} .btn-outline-purple:hover {background:var(--purple);color:white} .form-control {width:100%;padding:0.75rem 1rem;font-size:1rem;border:2px solid #dee2e6;border-radius:8px;transition:var(--transition-base);background:white} .form-control:focus {outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(111,66,193,0.1)} .nav-guideai {background-color:var(--purple)} .nav-guideai .navbar-brand {color:var(--light-bg);font-weight:bold} .nav-guideai .nav-link {color:rgba(255,255,255,0.8) !important;transition:var(--transition-base)} .nav-guideai .nav-link:hover {color:white !important} .text-purple {color:var(--purple) !important} .bg-purple {background-color:var(--purple) !important} .hero-section {position:relative;background:linear-gradient(135deg,#6f42c1 0%,#4a28a0 50%,#3d1f8a 100%);min-height:100vh;display:flex;align-items:center;overflow:hidden;padding:2rem 0} .hero-background {position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 80%,rgba(255,255,255,0.1) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(255,255,255,0.05) 0%,transparent 50%),radial-gradient(circle at 40% 40%,rgba(255,255,255,0.08) 0%,transparent 50%);animation:heroFloat 20s ease-in-out infinite} @keyframes heroFloat {0%,100% {transform:translateY(0px) rotate(0deg)} 33% {transform:translateY(-20px) rotate(1deg)} 66% {transform:translateY(10px) rotate(-1deg)} } .hero-content {position:relative;z-index:2} .logo-container {position:relative;display:inline-block;margin-bottom:2rem} .hero-logo {max-width:320px;height:auto;filter:drop-shadow(0 10px 30px rgba(0,0,0,0.3));transition:all 0.5s ease;animation:logoGlow 3s ease-in-out infinite alternate} @keyframes logoGlow {0% {filter:drop-shadow(0 10px 30px rgba(0,0,0,0.3)) drop-shadow(0 0 20px rgba(255,255,255,0.1))} 100% {filter:drop-shadow(0 15px 40px rgba(0,0,0,0.4)) drop-shadow(0 0 30px rgba(255,255,255,0.2))} } .hero-logo:hover {transform:scale(1.05) translateY(-5px);filter:drop-shadow(0 20px 50px rgba(0,0,0,0.4)) drop-shadow(0 0 40px rgba(255,255,255,0.3))} .logo-fallback {display:flex;align-items:center;justify-content:center;width:320px;height:240px;background:linear-gradient(135deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.05) 100%);border-radius:20px;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.2);margin:0 auto} .logo-placeholder {text-align:center} .logo-placeholder span {background:linear-gradient(135deg,#ffffff 0%,#f8f9fa 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:3rem;font-weight:800;text-shadow:0 4px 8px rgba(0,0,0,0.3)} .hero-title {font-size:2.5rem !important;font-weight:800 !important;background:linear-gradient(135deg,#ffffff 0%,#f8f9fa 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 4px 8px rgba(0,0,0,0.3);margin-bottom:2rem !important;line-height:1.2;position:relative} .hero-title::after {content:'';position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:100px;height:4px;background:linear-gradient(90deg,transparent 0%,#ffffff 50%,transparent 100%);border-radius:2px} .hero-cta {margin-top:3rem} .hero-cta .btn {background:linear-gradient(135deg,#ffffff 0%,#f8f9fa 100%);color:var(--purple);border:none;padding:1rem 2rem;font-size:1.1rem;font-weight:700;border-radius:50px;box-shadow:0 10px 30px rgba(0,0,0,0.2);transition:all 0.3s ease;text-transform:uppercase;letter-spacing:1px} .hero-cta .btn:hover {transform:translateY(-3px);box-shadow:0 15px 40px rgba(0,0,0,0.3);background:linear-gradient(135deg,#f8f9fa 0%,#ffffff 100%);color:var(--purple-dark)} .hero-cta .btn i {transition:transform 0.3s ease} .hero-cta .btn:hover i {transform:translateY(2px)} @media (max-width:768px) {.hero-section {min-height:80vh;padding:1rem 0} .hero-logo {max-width:250px} .logo-fallback {width:250px;height:180px} .logo-placeholder span {font-size:2.5rem} .hero-title {font-size:2rem !important} .hero-cta .btn {padding:0.8rem 1.5rem;font-size:1rem} } @media (max-width:576px) {.hero-section {min-height:70vh} .hero-logo {max-width:200px} .logo-fallback {width:200px;height:150px} .logo-placeholder span {font-size:2rem} .hero-title {font-size:1.5rem !important} } .input-wrapper {position:relative;margin-bottom:1rem} .message-input {border:2px solid #e9ecef;border-radius:15px;padding:1rem 1.5rem;font-size:1rem;line-height:1.5;transition:all 0.3s ease;background:#ffffff;box-shadow:0 2px 8px rgba(0,0,0,0.05);resize:vertical;min-height:60px} .message-input:focus {border-color:var(--purple);box-shadow:0 0 0 3px rgba(111,66,193,0.1),0 4px 12px rgba(0,0,0,0.1);outline:none;transform:translateY(-1px)} .action-buttons {display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:0.75rem;background:rgba(255,255,255,0.7);border-radius:12px;border:1px solid rgba(111,66,193,0.15);margin-top:0.75rem;backdrop-filter:blur(10px)} .input-btn {display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid rgba(111,66,193,0.2);border-radius:8px;font-size:0.95rem;font-weight:500;cursor:pointer;transition:all 0.2s ease;position:relative;background:#ffffff;color:#6c757d;box-shadow:0 1px 3px rgba(0,0,0,0.1)} .input-btn:hover {transform:translateY(-1px);box-shadow:0 2px 8px rgba(111,66,193,0.15);border-color:rgba(111,66,193,0.4)} .input-btn:active {transform:translateY(0);box-shadow:0 1px 3px rgba(0,0,0,0.2)} .input-btn:focus {outline:none;box-shadow:0 0 0 2px rgba(111,66,193,0.3);border-color:var(--purple)} .input-btn.send-btn {background:linear-gradient(135deg,var(--purple) 0%,var(--purple-dark) 100%);color:#ffffff;border-color:var(--purple);box-shadow:0 2px 8px rgba(111,66,193,0.2)} .input-btn.send-btn:hover {background:linear-gradient(135deg,var(--purple-dark) 0%,#4a28a0 100%);transform:translateY(-2px);box-shadow:0 4px 12px rgba(111,66,193,0.3);border-color:var(--purple-dark)} .input-btn.send-btn:disabled {background:linear-gradient(135deg,#6c757d 0%,#5a6268 100%);cursor:not-allowed;transform:none;opacity:0.6} .input-btn.voice-btn {background:linear-gradient(135deg,#e3f2fd 0%,#f3e5f5 100%);color:var(--purple);border-color:rgba(111,66,193,0.3)} .input-btn.voice-btn:hover {background:linear-gradient(135deg,#d1e7dd 0%,#e2e3ff 100%);color:var(--purple-dark);border-color:var(--purple)} .input-btn.voice-btn.listening {background:linear-gradient(135deg,#e74c3c 0%,#c0392b 100%);animation:voicePulse 1.5s ease-in-out infinite;transform:scale(1.1)} @keyframes voicePulse {0%,100% {transform:scale(1.1);box-shadow:0 0 0 0 rgba(231,76,60,0.7)} 50% {transform:scale(1.15);box-shadow:0 0 0 10px rgba(231,76,60,0)} } .input-btn.clear-btn {background:#f8f9fa;color:#6c757d;border-color:#dee2e6} .input-btn.clear-btn:hover {background:#e9ecef;color:#495057;border-color:#adb5bd} .input-btn.print-btn {background:#f8f9fa;color:#6c757d;border-color:#dee2e6} .input-btn.print-btn:hover {background:#e9ecef;color:#495057;border-color:#adb5bd} .input-btn i {font-size:1.2rem;transition:transform 0.3s ease;z-index:1;position:relative} .input-btn:hover i {transform:scale(1.1)} .input-btn.voice-btn.listening i {animation:iconPulse 1.5s ease-in-out infinite} @keyframes iconPulse {0%,100% {transform:scale(1)} 50% {transform:scale(1.2)} } .input-footer {display:flex;justify-content:flex-end;align-items:center;margin-top:0.5rem;padding:0.5rem 0} .char-counter {font-size:0.875rem;font-weight:500;color:#6c757d;transition:all 0.3s ease;padding:0.25rem 0.75rem;border-radius:20px;background:rgba(108,117,125,0.1)} .char-counter.text-warning {color:#f39c12;background:rgba(243,156,18,0.1);font-weight:600} .char-counter.text-danger {color:#e74c3c;background:rgba(231,76,60,0.1);font-weight:700} .d-flex.gap-2 {gap:0.75rem !important} @media (max-width:768px) {.action-buttons {flex-direction:column;gap:0.5rem} .action-buttons > div {display:flex;gap:0.5rem;width:100%;justify-content:center} .input-btn {width:38px;height:38px;font-size:0.9rem} .message-input {padding:0.75rem 1rem;font-size:0.95rem} } @media (max-width:576px) {.input-btn {width:36px;height:36px;font-size:0.85rem} .message-input {padding:0.5rem 0.75rem;font-size:0.9rem;min-height:50px} .char-counter {font-size:0.875rem;padding:0.2rem 0.5rem} } .chat-message.bot.enhanced {padding:0 !important;background:transparent !important;border:none !important;margin:8px 0 !important} .chat-message.bot.enhanced .content {padding:0 !important;background:transparent !important} @keyframes shimmer {0% {background-position:-200% 0} 100% {background-position:200% 0} } .shimmer {animation:shimmer 3s ease-in-out infinite} .enhanced-bold {background:linear-gradient(135deg,#6f42c1 0%,#4a28a0 100%);color:white;padding:4px 8px;border-radius:6px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,0.3);display:inline-block;margin:1px} .chat-response hr {border:none;height:2px;background:linear-gradient(135deg,#6f42c1 0%,#4a28a0 100%);margin:1.5rem 0;border-radius:1px} .chat-response ul,.chat-response ol {margin:1rem 0;padding-left:1.5rem} .chat-response li {margin:0.5rem 0;line-height:1.6} .chat-response li.checkmark {list-style:none;margin-left:-1.5rem;padding-left:1.5rem} .chat-response h1,.chat-response h2,.chat-response h3 {margin:1.5rem 0 1rem 0;color:#333} .chat-response h2 {border-bottom:2px solid #6f42c1;padding-bottom:0.5rem} .enhanced-italic {background:linear-gradient(135deg,#17a2b8 0%,#138496 100%);color:white;padding:3px 6px;border-radius:4px;font-style:italic;font-weight:500;display:inline-block;margin:1px} .enhanced-link {background:linear-gradient(135deg,#007bff 0%,#0056b3 100%);color:white;padding:8px 16px;border-radius:20px;text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:6px;margin:2px;box-shadow:0 3px 6px rgba(0,123,255,0.3);transition:transform 0.2s ease} .enhanced-link:hover {transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,123,255,0.4)} .term-badge {color:white;padding:4px 8px;border-radius:12px;font-weight:600;display:inline-block;margin:1px} .term-badge.iep {background:#3f51b5;border:2px solid #3f51b5cc;box-shadow:0 2px 4px #3f51b533} .term-badge.idea {background:#e91e63;border:2px solid #e91e63cc;box-shadow:0 2px 4px #e91e6333} .term-badge.fape {background:#9c27b0;border:2px solid #9c27b0cc;box-shadow:0 2px 4px #9c27b033} .phone-badge {background:linear-gradient(135deg,#2e7d32 0%,#4caf50 100%);color:white;padding:6px 10px;border-radius:16px;font-weight:600;border:2px solid #4caf50;display:inline-flex;align-items:center;gap:6px;margin:2px;box-shadow:0 2px 4px rgba(76,175,80,0.2)} .list-card {padding:12px 16px;margin:8px 0;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,0.1);display:flex;align-items:flex-start;gap:12px} .list-card.primary {background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);border-left:4px solid #28a745} .list-card.secondary {background:linear-gradient(135deg,#fff8e1 0%,#ffecb3 100%);border-left:4px solid #ff9800} .premium-header {background:linear-gradient(135deg,#6f42c1 0%,#4a28a0 100%);color:white;padding:16px 20px;border-radius:12px;margin:24px 0 16px 0;box-shadow:0 4px 12px rgba(111,66,193,0.2);border-left:5px solid #4a28a0} .premium-subheader {background:linear-gradient(135deg,#28a745 0%,#20c997 100%);color:white;padding:12px 16px;border-radius:10px;margin:16px 0 12px 0;box-shadow:0 3px 8px rgba(40,167,69,0.2)} .premium-container {background:linear-gradient(135deg,#f8f9fa 0%,#ffffff 100%);border:2px solid transparent;background-clip:padding-box;border-radius:16px;padding:24px;margin:12px 0;box-shadow:0 8px 32px rgba(0,0,0,0.12);position:relative;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;line-height:1.6} .premium-container::before {content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#6f42c1,#28a745,#17a2b8,#ffc107,#dc3545);animation:shimmer 3s ease-in-out infinite} /*-------------------------------------------------------------- GuideAI Bilingual CSS - Streamlined Design System Supports both English (en) and Spanish (es) interfaces --------------------------------------------------------------*/ /*-------------------------------------------------------------- Language-Specific Variables --------------------------------------------------------------*/ :root {--purple:#6f42c1;--purple-light:#8e63d2;--purple-dark:#5a32a3;--light-bg:#ffffff;--mid-bg:#f4f4f8;--input-bg:#ffffff;--text-dark:#1e1e1e;--text-muted:#6c757d;--border-light:rgba(255,255,255,0.25);--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--font-family-base:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--font-family-heading:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--font-size-base:1rem;--font-size-sm:0.875rem;--font-size-lg:1.125rem;--line-height-base:1.5;--focus-ring:0 0 0 0.2rem rgba(111,66,193,0.25);--transition-base:all 0.3s ease} /*-------------------------------------------------------------- Language Detection and Switching --------------------------------------------------------------*/ [lang="es"] {--font-size-base:1.05rem;--line-height-base:1.6} [lang="en"] {--font-size-base:1rem;--line-height-base:1.5} /*-------------------------------------------------------------- Language Switcher Styles --------------------------------------------------------------*/ .language-switcher {position:relative} .language-switcher .dropdown-toggle {display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border:1px solid rgba(255,255,255,0.2);border-radius:0.375rem;background:rgba(255,255,255,0.1);color:white;text-decoration:none;transition:var(--transition-base)} .language-switcher .dropdown-toggle:hover {background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.3)} .language-switcher .dropdown-menu {min-width:200px;padding:var(--spacing-sm);border:none;border-radius:0.5rem;box-shadow:0 10px 25px rgba(0,0,0,0.15);background:var(--light-bg)} .language-switcher .dropdown-item {display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);border-radius:0.375rem;color:var(--text-dark);text-decoration:none;transition:var(--transition-base)} .language-switcher .dropdown-item:hover {background:var(--mid-bg);color:var(--purple)} .language-switcher .dropdown-item.active {background:var(--purple);color:white} .flag-icon {width:20px;height:15px;border-radius:2px;display:inline-block} .flag-icon-us {background:linear-gradient(to bottom,#fff 0%,#fff 50%,#bf0a30 50%,#bf0a30 100%);position:relative} .flag-icon-us::before {content:'';position:absolute;top:0;left:0;width:40%;height:54%;background:#002868} .flag-icon-us::after {content:'★';position:absolute;top:1px;left:2px;color:white;font-size:14px} .flag-icon-es {background:linear-gradient(to bottom,#c60b1e 0%,#c60b1e 50%,#ffc400 50%,#ffc400 100%);position:relative} .flag-icon-es::before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,#c60b1e 0%,#c60b1e 25%,#ffc400 25%,#ffc400 75%,#c60b1e 75%,#c60b1e 100%)} /*-------------------------------------------------------------- Bilingual Typography --------------------------------------------------------------*/ body {font-family:var(--font-family-base);font-size:var(--font-size-base);line-height:var(--line-height-base);color:var(--text-dark);background-color:var(--light-bg)} [lang="es"] h1,[lang="es"] h2,[lang="es"] h3,[lang="es"] h4,[lang="es"] h5,[lang="es"] h6 {font-family:var(--font-family-heading);font-weight:600;line-height:1.3} [lang="en"] h1,[lang="en"] h2,[lang="en"] h3,[lang="en"] h4,[lang="en"] h5,[lang="en"] h6 {font-family:var(--font-family-heading);font-weight:500;line-height:1.2} /*-------------------------------------------------------------- Bilingual Form Elements --------------------------------------------------------------*/ .form-control {font-family:var(--font-family-base);font-size:var(--font-size-base);line-height:var(--line-height-base);padding:var(--spacing-md);border:1px solid #dee2e6;border-radius:0.5rem;background-color:var(--input-bg);transition:var(--transition-base)} .form-control:focus {border-color:var(--purple);box-shadow:var(--focus-ring);outline:none} [lang="es"] .form-control::placeholder {color:var(--text-muted);font-style:italic} [lang="en"] .form-control::placeholder {color:var(--text-muted)} /*-------------------------------------------------------------- Bilingual Button Styles --------------------------------------------------------------*/ .btn {font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:500;padding:var(--spacing-md) var(--spacing-lg);border-radius:0.5rem;border:none;transition:var(--transition-base);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm)} .btn-purple {background-color:var(--purple);color:white} .btn-purple:hover {background-color:var(--purple-dark);color:white;transform:translateY(-1px);box-shadow:0 4px 12px rgba(111,66,193,0.3)} .btn-outline-purple {background-color:transparent;color:var(--purple);border:2px solid var(--purple)} .btn-outline-purple:hover {background-color:var(--purple);color:white} .card-header {} .card.shadow-sm {} /*-------------------------------------------------------------- LEGACY Chat Container - OVERRIDDEN BY OPEN LAYOUT --------------------------------------------------------------*/ .chat-container::-webkit-scrollbar {width:8px} .chat-container::-webkit-scrollbar-track {background:transparent} .chat-container::-webkit-scrollbar-thumb {background-color:rgba(111,66,193,0.3);border-radius:4px} .chat-container::-webkit-scrollbar-thumb:hover {background-color:rgba(111,66,193,0.5)} .chat-message {margin-bottom:var(--spacing-lg);padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--chat-bubble-radius);max-width:var(--message-max-width);width:fit-content;font-size:var(--font-size-base);line-height:var(--line-height-base);position:relative;display:block;box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word;flex-shrink:0;transition:var(--transition-smooth);animation:slideInFromTop 0.4s cubic-bezier(0.68,-0.55,0.265,1.55);opacity:1;animation-fill-mode:forwards;cursor:pointer} .chat-message:hover {transform:var(--hover-transform);box-shadow:0 8px 25px rgba(111,66,193,0.15)} .chat-message:first-child {animation:none !important;opacity:1 !important} @keyframes slideInFromTop {from {opacity:0;transform:translateY(-15px) scale(0.98)} to {opacity:1;transform:translateY(0) scale(1)} } .chat-message.user {background:var(--gradient-chat-user);color:var(--text-dark);align-self:flex-end;margin-left:auto;border:1px solid var(--border-purple-light);border-right:4px solid var(--purple-accent);box-shadow:0 4px 12px rgba(111,66,193,0.2);backdrop-filter:blur(5px)} .chat-message.user:hover {background:linear-gradient(135deg,#d4a5d9 0%,#c794ce 100%);box-shadow:0 6px 20px rgba(111,66,193,0.25)} .chat-message.bot {background:var(--light-bg);color:var(--text-dark);align-self:flex-start;border:1px solid var(--border-purple-light);border-left:4px solid var(--purple);box-shadow:0 4px 12px rgba(111,66,193,0.1);backdrop-filter:blur(5px)} .chat-message.bot:hover {background:rgba(255,255,255,0.95);box-shadow:0 6px 20px rgba(111,66,193,0.2);border-left-color:var(--purple-accent)} .chat-message.bot h1,.chat-message.bot h2,.chat-message.bot h3,.chat-message.bot h4,.chat-message.bot h5,.chat-message.bot h6 {background:var(--gradient-primary);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:var(--purple);font-weight:600} .chat-message.bot a {color:var(--purple);text-decoration:none;border-bottom:1px solid transparent;transition:var(--transition-base)} .chat-message.bot a:hover {color:var(--purple-dark);border-bottom-color:var(--purple-accent);text-decoration:none} .chat-message.bot pre,.chat-message.bot code {background-color:var(--purple-lightest);border:1px solid var(--border-purple-light);border-radius:6px} /*-------------------------------------------------------------- CLEAN SIDEBAR IMPLEMENTATION --------------------------------------------------------------*/ .prompt-sidebar {position:static !important;height:auto !important;width:100% !important;max-width:none !important;border:1px solid rgba(111,66,193,0.2);border-radius:0.75rem;box-shadow:0 4px 12px rgba(111,66,193,0.1);margin:0 !important} .prompt-sidebar .card-header {background:linear-gradient(135deg,var(--purple) 0%,var(--purple-dark) 100%) !important;border-bottom:3px solid var(--purple-light) !important;color:white !important;border-radius:0.75rem 0.75rem 0 0 !important} .prompt-sidebar .card-header h3 {color:white !important} .prompt-sidebar .card-header .text-purple {color:white !important} .prompt-sidebar .list-group-item {border:none;padding:1rem 1.25rem;transition:all 0.3s ease;cursor:pointer;border-left:4px solid transparent} .prompt-sidebar .list-group-item:hover {background:linear-gradient(90deg,#f8f4ff 0%,#f0ebff 100%) !important;transform:translateX(4px);border-left:4px solid var(--purple) !important;box-shadow:0 2px 8px rgba(111,66,193,0.15)} .prompt-sidebar .list-group-item:focus {background:linear-gradient(90deg,#f8f4ff 0%,#f0ebff 100%) !important;border-left:4px solid var(--purple) !important;outline:2px solid var(--purple);outline-offset:-2px} .prompt-sidebar .list-group-item:active {transform:translateX(2px);box-shadow:0 1px 4px rgba(111,66,193,0.2)} aside[role="complementary"] {position:static !important} [lang="es"] .chat-message {font-size:1.05rem;line-height:1.6} [lang="en"] .chat-message {font-size:1rem;line-height:1.5} /*-------------------------------------------------------------- Bilingual Prompt Sidebar --------------------------------------------------------------*/ .prompt-sidebar {background:var(--light-bg);border-radius:0.5rem;box-shadow:0 2px 8px rgba(0,0,0,0.1);overflow:visible;position:static !important;height:fit-content !important} .col-lg-4[role="complementary"],aside[role="complementary"] {position:static !important;height:auto !important;flex:0 0 33.333333% !important;max-width:33.333333% !important} .col-lg-8 {position:static !important;flex:0 0 66.666667% !important;max-width:66.666667% !important} main#main-content .row {position:static !important;height:auto !important;overflow:visible !important} main#main-content .container {position:static !important;overflow:visible !important} .col-lg-4[role="complementary"] > .prompt-sidebar,aside[role="complementary"] > .prompt-sidebar {position:static !important} @media (max-width:991.98px) {.prompt-sidebar {position:static !important;width:100% !important;margin-top:2rem !important} .col-lg-4[role="complementary"],aside[role="complementary"] {position:static !important;height:auto !important;flex:0 0 100% !important;max-width:100% !important} .col-lg-8 {flex:0 0 100% !important;max-width:100% !important} } .prompt-sidebar .card-header {background:linear-gradient(135deg,var(--purple) 0%,var(--purple-dark) 100%);color:white;padding:var(--spacing-lg);border-bottom:3px solid var(--purple-light)} .prompt-sidebar .card-header h3 {font-weight:600;margin-bottom:0.5rem} .prompt-sidebar .card-header p {opacity:0.9;font-size:0.875rem} .prompt-sidebar .list-group-item {border:none;border-bottom:1px solid #e8e8e8;padding:1rem 1.25rem;transition:all 0.3s ease;cursor:pointer;position:relative;background:white} .prompt-sidebar .list-group-item:hover {background:linear-gradient(90deg,#f8f4ff 0%,#f0ebff 100%);color:var(--purple-dark);transform:translateX(4px);border-left:4px solid var(--purple);box-shadow:0 2px 8px rgba(111,66,193,0.15)} .prompt-sidebar .list-group-item:active {transform:translateX(2px);background:linear-gradient(90deg,#f0ebff 0%,#e8ddff 100%)} .prompt-sidebar .list-group-item:last-child {border-bottom:none;border-radius:0 0 0.5rem 0.5rem} .prompt-sidebar .list-group-item:first-child {border-radius:0} .prompt-sidebar .list-group-item i {margin-right:0.75rem;width:16px;text-align:center;transition:transform 0.3s ease} .prompt-sidebar .list-group-item:hover i {transform:scale(1.1)} .prompt-sidebar .list-group-item span {font-weight:500;line-height:1.4} .prompt-sidebar .list-group-item:focus {outline:2px solid var(--purple);outline-offset:-2px;background:linear-gradient(90deg,#f8f4ff 0%,#f0ebff 100%)} [lang="es"] .prompt-sidebar .list-group-item {font-size:1.05rem;line-height:1.6} [lang="en"] .prompt-sidebar .list-group-item {font-size:1rem;line-height:1.5} .response-source {margin-top:8px;padding-top:8px;border-top:1px solid #f0f0f0;text-align:right} .response-source small {color:#6c757d !important;font-size:0.875rem} .response-source i {color:var(--purple-light)} /*-------------------------------------------------------------- Bilingual Accessibility Features --------------------------------------------------------------*/ .high-contrast {--text-dark:#000000;--light-bg:#ffffff;--mid-bg:#f0f0f0;--purple:#000080;--purple-light:#0000a0;--purple-dark:#000060} .high-contrast .chat-message.user {background-color:#ffffff;color:#000000;border:2px solid #000000;border-right:4px solid #000080} .high-contrast .chat-message.bot {background-color:#ffffff;color:#000000;border:2px solid #000000;border-left:4px solid #000080} .large-fonts {--font-size-base:1.25rem;--font-size-sm:1.125rem;--font-size-lg:1.375rem} .dyslexia-font {--font-family-base:'OpenDyslexic','Comic Sans MS','Arial',sans-serif;--font-family-heading:'OpenDyslexic','Comic Sans MS','Arial',sans-serif;letter-spacing:0.05em;word-spacing:0.1em} /*-------------------------------------------------------------- Bilingual Responsive Design --------------------------------------------------------------*/ @media (max-width:768px) {:root {--spacing-md:0.75rem;--spacing-lg:1rem;--spacing-xl:1.5rem} .chat-container {min-height:300px;height:auto} .language-switcher .dropdown-menu {min-width:180px} [lang="es"] {--font-size-base:1rem} [lang="en"] {--font-size-base:0.95rem} } @media (max-width:576px) {.chat-message {max-width:95%;font-size:var(--font-size-sm)} .btn {padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-sm)} } /*-------------------------------------------------------------- Bilingual Print Styles --------------------------------------------------------------*/ @media print {.language-switcher,.btn,.form-control {display:none !important} .chat-container {border:none;box-shadow:none;height:auto} .chat-message {break-inside:avoid;page-break-inside:avoid} [lang="es"] .chat-message.user::before {content:"Tú:";font-weight:bold} [lang="es"] .chat-message.bot::before {content:"GuideAI:";font-weight:bold} [lang="en"] .chat-message.user::before {content:"You:";font-weight:bold} } /*-------------------------------------------------------------- Bilingual Animation and Transitions --------------------------------------------------------------*/ @keyframes fadeIn {from {opacity:0;transform:translateY(10px)} to {opacity:1;transform:translateY(0)} } .chat-message {animation:fadeIn 0.3s ease-out} .language-switch-animation {transition:var(--transition-base)} /*-------------------------------------------------------------- Bilingual Focus Management --------------------------------------------------------------*/ .btn:focus,.form-control:focus,.prompt-sidebar .list-group-item:focus {outline:2px solid var(--purple);outline-offset:2px} .skip-link {position:absolute;top:-40px;left:6px;background:var(--purple);color:white;padding:8px;text-decoration:none;border-radius:4px;z-index:1000} .skip-link:focus {top:6px} /*-------------------------------------------------------------- Bilingual Loading States --------------------------------------------------------------*/ .loading-spinner {display:inline-block;width:20px;height:20px;border:3px solid rgba(111,66,193,0.3);border-radius:50%;border-top-color:var(--purple);animation:spin 1s ease-in-out infinite} @keyframes spin {to {transform:rotate(360deg)} } [lang="es"] .loading-message {font-style:italic;color:var(--text-muted)} [lang="en"] .loading-message {font-style:italic;color:var(--text-muted)} /*-------------------------------------------------------------- Bilingual Error States --------------------------------------------------------------*/ .error-message {background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb;border-radius:0.5rem;padding:var(--spacing-md);margin:var(--spacing-md) 0} [lang="es"] .error-message {font-size:1.05rem;line-height:1.6} [lang="en"] .error-message {font-size:1rem;line-height:1.5} /*-------------------------------------------------------------- Bilingual Success States --------------------------------------------------------------*/ .success-message {background-color:#d4edda;color:#155724;border:1px solid #c3e6cb;border-radius:0.5rem;padding:var(--spacing-md);margin:var(--spacing-md) 0} /*-------------------------------------------------------------- Bilingual Voice Input Styles --------------------------------------------------------------*/ .voice-input-btn {position:relative;transition:var(--transition-base)} .voice-input-btn.listening {background-color:#dc3545;animation:pulse 1.5s infinite} @keyframes pulse {0% {transform:scale(1)} 50% {transform:scale(1.05)} 100% {transform:scale(1)} } .voice-input-btn.listening::after {content:'';position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;border:2px solid #dc3545;border-radius:50%;animation:ripple 1.5s infinite} @keyframes ripple {0% {transform:scale(1);opacity:1} 100% {transform:scale(1.5);opacity:0} } /*-------------------------------------------------------------- Accessibility Button - Always Visible --------------------------------------------------------------*/ #accessibilityToggle,.accessibility-float-btn {position:fixed !important;z-index:9999 !important;opacity:1 !important;visibility:visible !important;display:flex !important;pointer-events:auto !important;background:#007bff !important;color:white !important;border:none !important;border-radius:50% !important;box-shadow:0 4px 12px rgba(0,123,255,0.3) !important;text-decoration:none !important;outline:none !important;align-items:center !important;justify-content:center !important;cursor:pointer !important;transition:all 0.3s ease !important} #accessibilityToggle,.accessibility-float-btn {top:80px !important;left:20px !important;width:50px !important;height:50px !important;font-size:1.2rem !important} @media (max-width:768px) {#accessibilityToggle,.accessibility-float-btn {top:auto !important;bottom:20px !important;left:15px !important;width:56px !important;height:56px !important;font-size:1.3rem !important} } @media (max-width:480px) {#accessibilityToggle,.accessibility-float-btn {bottom:15px !important;left:10px !important;width:52px !important;height:52px !important;font-size:1.2rem !important} } #accessibilityToggle:hover,.accessibility-float-btn:hover {background:#0056b3 !important;transform:scale(1.05) !important;box-shadow:0 6px 16px rgba(0,123,255,0.4) !important} #accessibilityToggle:focus,.accessibility-float-btn:focus {background:#0056b3 !important;box-shadow:0 0 0 3px rgba(0,123,255,0.3) !important} #accessibilityToggle.d-none,.accessibility-float-btn.d-none,#accessibilityToggle.hidden,.accessibility-float-btn.hidden {display:flex !important;opacity:1 !important;visibility:visible !important} /* * GuideAI Accessibility Styles * Focused on families with disabled children */ .skip-to-main {position:absolute;top:-40px;left:6px;background:#6f42c1;color:white;padding:8px 16px;text-decoration:none;border-radius:4px;z-index:9999;font-weight:bold;transition:top 0.3s} .skip-to-main:focus {top:6px;color:white;text-decoration:none;outline:3px solid #ffffff} .accessibility-float-btn,#accessibilityToggle {position:fixed !important;top:80px;left:20px;width:50px;height:50px;border-radius:50%;background:#007bff !important;color:white !important;border:none !important;box-shadow:0 4px 12px rgba(0,123,255,0.3) !important;z-index:9999 !important;transition:all 0.3s ease;display:flex !important;align-items:center;justify-content:center;font-size:1.2rem;cursor:pointer;outline:none !important;text-decoration:none !important;opacity:1 !important;visibility:visible !important;pointer-events:auto !important} .accessibility-float-btn:hover,#accessibilityToggle:hover {background:#0056b3 !important;transform:scale(1.05);box-shadow:0 6px 16px rgba(0,123,255,0.4);color:white !important;text-decoration:none !important} .accessibility-float-btn:focus,#accessibilityToggle:focus {background:#0056b3 !important;box-shadow:0 0 0 3px rgba(0,123,255,0.3);color:white !important;text-decoration:none !important} .accessibility-float-btn:active,#accessibilityToggle:active {background:#0056b3 !important;transform:scale(0.95);text-decoration:none !important} .accessibility-float-btn.active,#accessibilityToggle.active {background:#0056b3 !important;transform:scale(1.05);box-shadow:0 6px 16px rgba(0,123,255,0.4);text-decoration:none !important} #accessibilityDrawer,.accessibility-drawer,#accessibilityDrawer *,.accessibility-drawer * {text-decoration:none !important} #accessibilityDrawer .btn,.accessibility-drawer .btn,#accessibilityDrawer .btn:hover,.accessibility-drawer .btn:hover,#accessibilityDrawer .btn:focus,.accessibility-drawer .btn:focus,#accessibilityDrawer .btn:active,.accessibility-drawer .btn:active {text-decoration:none !important} .emergency-float-btn,#emergencyContactToggle {position:fixed !important;top:80px;right:20px;width:50px;height:50px;border-radius:50%;background:#dc3545 !important;color:white !important;border:none !important;box-shadow:0 4px 12px rgba(220,53,69,0.3) !important;z-index:9999 !important;transition:all 0.3s ease;display:flex !important;align-items:center;justify-content:center;font-size:1.2rem;cursor:pointer;outline:none !important;text-decoration:none !important;opacity:1 !important;visibility:visible !important;pointer-events:auto !important} .emergency-float-btn:hover,#emergencyContactToggle:hover {background:#b02a37 !important;transform:scale(1.05);box-shadow:0 6px 16px rgba(220,53,69,0.4);color:white !important;text-decoration:none !important} .emergency-float-btn:focus,#emergencyContactToggle:focus {background:#b02a37 !important;box-shadow:0 0 0 3px rgba(220,53,69,0.3);color:white !important;text-decoration:none !important} .emergency-float-btn:active,#emergencyContactToggle:active {background:#b02a37 !important;transform:scale(0.95);text-decoration:none !important} .emergency-float-btn.active,#emergencyContactToggle.active {background:#b02a37 !important;transform:scale(1.05);box-shadow:0 6px 16px rgba(220,53,69,0.4);text-decoration:none !important} #accessibilityDrawer .form-check-label,.accessibility-drawer .form-check-label,#accessibilityDrawer .form-check-label:hover,.accessibility-drawer .form-check-label:hover,#accessibilityDrawer .form-check-label:focus,.accessibility-drawer .form-check-label:focus {text-decoration:none !important} #accessibilityDrawer span,.accessibility-drawer span,#accessibilityDrawer h2,.accessibility-drawer h2,#accessibilityDrawer h3,.accessibility-drawer h3 {text-decoration:none !important} .high-contrast {--purple:#000080;--text-dark:#000000;--light-bg:#ffffff;--border-light:rgba(0,0,0,0.5)} .high-contrast * {border-color:#000000 !important} .high-contrast .chat-message.user {background:#ffffff !important;color:#000000 !important;border:2px solid #000000 !important;border-right:4px solid #000080 !important} .high-contrast .btn-purple {background:#000080 !important;border-color:#000080 !important;color:#ffffff !important} .high-contrast .btn-purple:hover,.high-contrast .btn-purple:focus {background:#000060 !important;border-color:#000060 !important;color:#ffffff !important} .high-contrast .text-purple {color:#000080 !important} .high-contrast .card {border:2px solid #000000 !important;background:#ffffff !important} .high-contrast .card-header {background:#000080 !important;color:#ffffff !important;border-bottom:2px solid #000000 !important} .high-contrast .form-control {border:2px solid #000000 !important;background:#ffffff !important;color:#000000 !important} .high-contrast .form-control:focus {border-color:#000080 !important;box-shadow:0 0 0 0.2rem rgba(0,0,128,0.25) !important} .high-contrast .btn {border:2px solid #000000 !important} .high-contrast .btn-secondary {background:#666666 !important;color:#ffffff !important} .high-contrast .btn-outline-secondary {background:transparent !important;color:#000000 !important;border:2px solid #000000 !important} .high-contrast .btn-outline-secondary:hover {background:#000000 !important;color:#ffffff !important} .high-contrast .alert {border:2px solid #000000 !important} .high-contrast .alert-primary {background:#000080 !important;color:#ffffff !important} .high-contrast .alert-danger {background:#800000 !important;color:#ffffff !important} .high-contrast .alert-warning {background:#808000 !important;color:#000000 !important} .high-contrast .alert-success {background:#008000 !important;color:#ffffff !important} .high-contrast .navbar {background:#000080 !important;border-bottom:2px solid #000000 !important} .high-contrast .nav-link {color:#ffffff !important;border:1px solid transparent !important} .high-contrast .nav-link:hover,.high-contrast .nav-link:focus {background:#000060 !important;border-color:#ffffff !important} .high-contrast .modal-content {border:3px solid #000000 !important} .high-contrast .modal-header {background:#000080 !important;color:#ffffff !important;border-bottom:2px solid #000000 !important} .high-contrast .modal-footer {border-top:2px solid #000000 !important} .high-contrast .list-group-item {border:1px solid #000000 !important;background:#ffffff !important;color:#000000 !important} .high-contrast .list-group-item:hover,.high-contrast .list-group-item:focus {background:#000080 !important;color:#ffffff !important} .high-contrast .text-muted {color:#666666 !important} .high-contrast .text-success {color:#008000 !important} .high-contrast .text-danger {color:#800000 !important} .high-contrast .text-warning {color:#808000 !important} .large-fonts {font-size:18px} .large-fonts .chat-message {font-size:20px;line-height:1.8;padding:1.5rem} .large-fonts .btn {font-size:18px;padding:0.75rem 1.5rem;min-height:48px} .large-fonts h1 {font-size:3.5rem} .large-fonts h2 {font-size:2.8rem} .large-fonts h3 {font-size:2.2rem} .large-fonts h4 {font-size:1.8rem} .large-fonts h5 {font-size:1.5rem} .large-fonts .form-control {font-size:18px;padding:0.75rem 1rem;min-height:48px} .large-fonts .list-group-item {font-size:18px;padding:1rem 1.5rem} body.dyslexia-friendly {font-family:'Comic Sans MS','Arial Rounded MT Bold','Arial',sans-serif !important;letter-spacing:0.1em !important;line-height:1.8 !important;word-spacing:0.3em !important;font-size:16px !important} body.dyslexia-friendly * {font-family:inherit !important;letter-spacing:inherit !important;line-height:inherit !important} body.dyslexia-friendly .chat-message {line-height:2 !important;letter-spacing:0.05em !important;font-size:16px !important;font-family:'Comic Sans MS','Arial Rounded MT Bold','Arial',sans-serif !important} body.dyslexia-friendly h1,body.dyslexia-friendly h2,body.dyslexia-friendly h3,body.dyslexia-friendly h4,body.dyslexia-friendly h5,body.dyslexia-friendly h6 {font-weight:bold !important;letter-spacing:0.05em !important;font-family:'Comic Sans MS','Arial Rounded MT Bold','Arial',sans-serif !important} body.dyslexia-friendly .btn {font-weight:bold !important;letter-spacing:0.05em !important;font-family:'Comic Sans MS','Arial Rounded MT Bold','Arial',sans-serif !important} body.dyslexia-friendly .form-control {font-size:16px !important;letter-spacing:0.05em !important;font-family:'Comic Sans MS','Arial Rounded MT Bold','Arial',sans-serif !important} .adhd-friendly {--space-md:2rem;--border-radius-md:12px} .adhd-friendly .chat-message {box-shadow:0 6px 12px rgba(0,0,0,0.15);margin-bottom:2rem;background-color:#ffffff;border:1px solid #e0e0e0} .adhd-friendly .chat-message.user {border-right:4px solid #e1bee7} .adhd-friendly .chat-message.bot {border-left:4px solid var(--purple)} .adhd-friendly *:focus {outline:4px solid #ff6b35 !important;outline-offset:4px !important;background-color:#fff3e0 !important;border-radius:8px !important;animation:focus-pulse 0.3s ease-in-out} @keyframes focus-pulse {0% {transform:scale(1)} 50% {transform:scale(1.02)} 100% {transform:scale(1)} } @media (prefers-reduced-motion:reduce) {*,*::before,*::after {animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important} .animate__animated {animation:none !important} .fa-spin {animation:none !important} } .sr-only {position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important} *:focus {outline:3px solid var(--purple);outline-offset:2px;border-radius:4px} *:focus-visible {outline:var(--focus-ring-visible);outline-offset:2px;border-radius:6px} .chat-message:focus-visible,.message-input:focus-visible,.btn:focus-visible {outline:3px solid var(--purple);outline-offset:3px;box-shadow:0 0 0 6px rgba(111,66,193,0.2)} .skip-link {position:absolute;top:-40px;left:6px;background:var(--purple);color:white;padding:8px;text-decoration:none;border-radius:4px;z-index:1000;font-weight:600;transition:top 0.3s} .skip-link:focus {top:6px} .sr-only {position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important} .aria-live-region {position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden} .text-muted {color:#5a5a5a !important} .chat-message.bot a {color:var(--purple-dark)} .chat-message.bot a:hover {color:var(--purple-darkest)} @media (prefers-color-scheme:dark) {:root {--light-bg:var(--background-dark);--mid-bg:var(--surface-dark);--text-dark:#e0e0e0;--text-muted:#b0b0b0;--purple:var(--purple-dark-mode);--purple-light:#b19cd9;--border-purple-light:rgba(142,99,210,0.3);--shadow-purple-glow:0 0 20px rgba(142,99,210,0.2);--gradient-subtle:linear-gradient(135deg,#2d2438 0%,#1a1625 100%);--gradient-chat-user:linear-gradient(135deg,#4a3b5c 0%,#3d2f4d 100%)} .chat-container {background:var(--gradient-subtle);border-color:var(--border-purple-light)} .chat-message.user {background:var(--gradient-chat-user);color:#e0e0e0;border-color:var(--border-purple-light)} .chat-message.user:hover {background:linear-gradient(135deg,#5a4b6c 0%,#4d3f5d 100%)} .chat-message.bot {background:rgba(45,36,56,0.8);color:#e0e0e0;border-color:var(--border-purple-light);border-left-color:var(--purple-dark-mode)} .chat-message.bot:hover {background:rgba(45,36,56,0.95)} .message-input {background:var(--surface-dark);color:#e0e0e0;border-color:var(--border-purple-light)} .message-input:focus {background:rgba(45,36,56,0.9);color:#f0f0f0} .message-input::placeholder {color:rgba(176,176,176,0.8)} } [data-theme="dark"] {--light-bg:var(--background-dark);--mid-bg:var(--surface-dark);--text-dark:#e0e0e0;--text-muted:#b0b0b0;--purple:var(--purple-dark-mode);--purple-light:#b19cd9;--border-purple-light:rgba(142,99,210,0.3);--shadow-purple-glow:0 0 20px rgba(142,99,210,0.2);--gradient-subtle:linear-gradient(135deg,#2d2438 0%,#1a1625 100%);--gradient-chat-user:linear-gradient(135deg,#4a3b5c 0%,#3d2f4d 100%)} [data-theme="dark"] .chat-container {background:var(--gradient-subtle);border-color:var(--border-purple-light)} [data-theme="dark"] .chat-message.user {background:var(--gradient-chat-user);color:#e0e0e0;border-color:var(--border-purple-light)} [data-theme="dark"] .chat-message.bot {background:rgba(45,36,56,0.8);color:#e0e0e0;border-color:var(--border-purple-light);border-left-color:var(--purple-dark-mode)} [data-theme="dark"] .message-input {background:var(--surface-dark);color:#e0e0e0;border-color:var(--border-purple-light)} [data-theme="dark"] .message-input::placeholder {color:rgba(176,176,176,0.8)} .chat-container {contain:layout style paint} .chat-message {contain:layout style} .chat-message,.btn,.message-input {will-change:transform} .chat-message:hover {will-change:transform,box-shadow} .chat-message,.btn-circle,.typing-indicator {transform:translateZ(0);backface-visibility:hidden} .chat-container::-webkit-scrollbar {width:8px} .chat-container::-webkit-scrollbar-track {background:transparent} .chat-container::-webkit-scrollbar-thumb {background-color:var(--purple-accent);border-radius:4px;transition:background-color 0.3s ease} .chat-container::-webkit-scrollbar-thumb:hover {background-color:var(--purple)} .btn-purple,.chat-message.user {background-attachment:fixed} @media print {.chat-container {background:white !important;box-shadow:none !important;border:1px solid #ccc !important} .chat-message {background:white !important;color:black !important;box-shadow:none !important;border:1px solid #ddd !important;page-break-inside:avoid} .chat-message.user {background:#f5f5f5 !important} .btn-circle,.input-section {display:none !important} .chat-message::before,.typing-indicator::before {display:none !important} } @supports (backdrop-filter:blur(10px)) {.chat-container,.chat-message {backdrop-filter:blur(5px)} } @supports not (backdrop-filter:blur(10px)) {.chat-container {background:rgba(244,244,248,0.95)} .chat-message.bot {background:rgba(255,255,255,0.95)} } .chat-message {margin-inline-end:auto;border-inline-start:4px solid transparent} .chat-message.user {margin-inline-start:auto;margin-inline-end:0;border-inline-end:4px solid var(--purple-accent);border-inline-start:none} .chat-message.bot {margin-inline-start:0;border-inline-start:4px solid var(--purple)} .list-group-item[tabindex]:focus {background-color:#6f42c1;color:white;z-index:1;transform:translateX(4px);box-shadow:0 4px 8px rgba(0,0,0,0.15);transition:all 0.2s ease} .phone-number {font-weight:bold;color:inherit;text-decoration:none;display:inline-block;padding:4px 8px;border-radius:4px;transition:all 0.2s ease} .phone-number:hover,.phone-number:focus {text-decoration:underline;color:inherit;background-color:rgba(255,255,255,0.2);transform:scale(1.05)} .emergency-contact-item {padding:1rem;border-radius:8px;background:rgba(255,255,255,0.1);transition:all 0.3s ease;border:1px solid transparent} .emergency-contact-item:hover,.emergency-contact-item:focus-within {background:rgba(255,255,255,0.2);transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,0.1);border-color:rgba(255,255,255,0.3)} .loading-text {position:relative} .loading-text::after {content:'';animation:loading-dots 1.5s infinite} @keyframes loading-dots {0%,20% {content:''} 40% {content:'.'} 60% {content:'..'} 80%,100% {content:'...'} } #accessibility-toolbar {background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);border-bottom:1px solid #dee2e6;position:sticky;top:0;z-index:1020} #accessibility-toolbar .btn {border-radius:20px;transition:all 0.2s ease} #accessibility-toolbar .btn:hover {transform:translateY(-1px);box-shadow:0 2px 4px rgba(0,0,0,0.1)} #accessibility-toolbar .btn.active {background-color:#6f42c1;border-color:#6f42c1;color:white} @media (max-width:768px) {.btn,.form-control,.list-group-item,button,input[type="button"],input[type="submit"] {min-height:44px;min-width:44px} .list-group-item {padding:1rem;font-size:16px} .chat-message {margin-bottom:1.5rem;max-width:95%} #accessibility-toolbar .btn {padding:0.5rem} #accessibility-toolbar .d-none.d-md-inline {display:none !important} .accessibility-float-btn,#accessibilityToggle {top:auto !important;bottom:20px !important;left:15px !important;width:56px !important;height:56px !important;font-size:1.3rem !important;box-shadow:0 4px 12px rgba(0,123,255,0.4) !important;border-radius:50% !important;touch-action:manipulation !important;-webkit-tap-highlight-color:transparent !important;-webkit-touch-callout:none !important;-webkit-user-select:none !important;user-select:none !important;opacity:1 !important;visibility:visible !important;pointer-events:auto !important;display:flex !important;z-index:1040 !important} .accessibility-float-btn:hover,#accessibilityToggle:hover {transform:scale(1.1) !important} .accessibility-float-btn:active,#accessibilityToggle:active {transform:scale(0.95) !important;background:#0056b3 !important} } @media (prefers-contrast:high) {:root {--text-dark:#000000;--border-light:rgba(0,0,0,0.5)} .chat-message {border:2px solid currentColor} .btn {border-width:2px} } @media print {.emergency-contacts {page-break-inside:avoid} .phone-number::after {content:" (Call:" attr(href) ")";font-size:0.9em;color:#666} .emergency-contact-item {border:1px solid #ddd;margin-bottom:1rem;page-break-inside:avoid;background:white !important} .print-only {display:block !important} .screen-only {display:none !important} } .screen-only {display:block} .print-only {display:none} .text-success {font-weight:600} .text-danger {font-weight:600} .text-warning {font-weight:600;color:#b8860b !important} .btn {position:relative;overflow:hidden} .btn:focus {box-shadow:0 0 0 3px rgba(111,66,193,0.3)} .btn:active {transform:translateY(1px)} #voiceBtn.listening {background-color:#dc3545;border-color:#dc3545;color:white;animation:pulse-voice 1.5s infinite} @keyframes pulse-voice {0%,100% {transform:scale(1);box-shadow:0 0 0 0 rgba(220,53,69,0.7)} 50% {transform:scale(1.05);box-shadow:0 0 0 10px rgba(220,53,69,0)} } .form-control:focus {border-color:#6f42c1;box-shadow:0 0 0 0.2rem rgba(111,66,193,0.25)} .form-control:invalid {border-color:#dc3545;box-shadow:0 0 0 0.2rem rgba(220,53,69,0.25)} #charCount {font-weight:500;transition:color 0.3s ease} #charCount.text-warning {color:#f39c12 !important} #charCount.text-danger {color:#e74c3c !important;font-weight:bold} .modal-content {border:3px solid transparent} .modal-content:focus-within {border-color:#6f42c1} .modal-header {position:relative} .modal-title {display:flex;align-items:center;gap:8px} [role="button"],[tabindex="0"] {cursor:pointer} [role="button"]:focus,[tabindex="0"]:focus {outline:3px solid #6f42c1;outline-offset:2px} #sr-live-region {position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden} .keyboard-navigation *:focus {outline:3px solid #ff6b35 !important;outline-offset:2px !important;border-radius:4px !important} .keyboard-navigation .btn:focus {box-shadow:0 0 0 0.2rem rgba(255,107,53,0.25) !important} .keyboard-navigation .form-control:focus {box-shadow:0 0 0 0.2rem rgba(255,107,53,0.25) !important} .accessibility-float-btn.active {background:#0056b3 !important;transform:scale(1.05) !important;box-shadow:0 6px 16px rgba(0,123,255,0.4) !important} .accessibility-drawer .btn.active {background:#007bff !important;color:white !important;border-color:#007bff !important} .accessibility-drawer .btn.active:hover {background:#0056b3 !important;border-color:#0056b3 !important} .accessibility-drawer .form-check-input:checked {background-color:#007bff !important;border-color:#007bff !important} .accessibility-drawer .form-check-input:focus {box-shadow:0 0 0 0.2rem rgba(0,123,255,0.25) !important} .language-loading {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.9);display:none;align-items:center;justify-content:center;z-index:9999;backdrop-filter:blur(2px)} .language-loading.active {display:flex} .language-loading .spinner-border {width:3rem;height:3rem} #sr-live-region {position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important} #voiceBtn.listening {background:#dc3545 !important;color:white !important;animation:pulse-voice 1.5s infinite} @keyframes pulse-voice {0%,100% {transform:scale(1);box-shadow:0 0 0 0 rgba(220,53,69,0.7)} 50% {transform:scale(1.05);box-shadow:0 0 0 10px rgba(220,53,69,0)} } .accessibility-float-btn {position:fixed;top:80px;left:20px;width:50px;height:50px;border-radius:50%;background:#007bff;color:white;border:none;box-shadow:0 4px 12px rgba(0,123,255,0.3);z-index:1040;transition:all 0.3s ease;display:flex;align-items:center;justify-content:center;font-size:1.2rem;cursor:pointer;outline:none;text-decoration:none !important} .accessibility-float-btn:hover {background:#0056b3;transform:scale(1.05);box-shadow:0 6px 16px rgba(0,123,255,0.4);color:white;text-decoration:none !important} .accessibility-float-btn:focus {background:#0056b3;box-shadow:0 0 0 3px rgba(0,123,255,0.3);color:white;text-decoration:none !important} .accessibility-float-btn:active {background:#0056b3;transform:scale(0.95);text-decoration:none !important} .accessibility-float-btn.active {background:#0056b3;transform:scale(1.05);box-shadow:0 6px 16px rgba(0,123,255,0.4);text-decoration:none !important} .accessibility-drawer {position:fixed;top:80px;left:-350px;width:320px;min-width:300px;max-width:min(400px,calc(100vw - 150px));height:auto;min-height:fit-content;max-height:calc(100vh - 120px);background:white;border:1px solid #ddd;border-radius:0 8px 8px 0;box-shadow:2px 0 12px rgba(0,0,0,0.15);z-index:1030;transition:left 0.3s ease,width 0.2s ease;overflow-y:auto;border-left:4px solid #007bff} .accessibility-drawer.open {left:70px} .drawer-content {height:100%;display:flex;flex-direction:column;overflow:visible} .drawer-header {padding:1rem;border-bottom:1px solid #eee;background:#007bff;color:white;display:flex;justify-content:space-between;align-items:center;flex-shrink:0} .drawer-header .btn-close {background:none;border:none;color:white;font-size:1.2rem;opacity:0.8;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center} .drawer-header .btn-close:hover,.drawer-header .btn-close:focus {opacity:1;background:rgba(255,255,255,0.1);border-radius:4px} .drawer-body {padding:1rem;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:1.5rem;overflow-y:visible} .accessibility-section {margin-bottom:0;padding:0;border-bottom:none;flex:0 0 auto;display:flex;flex-direction:column;justify-content:flex-start;min-height:fit-content} .accessibility-section:first-child {flex:0 0 auto} .accessibility-section:last-child {flex:0 0 auto;margin-top:auto} .accessibility-section h3 {color:#007bff;font-size:1rem;font-weight:600;margin-bottom:0.75rem} .accessibility-section .d-grid {gap:0.75rem !important} .accessibility-section .btn {min-height:40px !important;display:flex !important;align-items:center !important;justify-content:flex-start !important;white-space:nowrap !important;overflow:visible !important;flex:0 0 auto !important;width:100% !important} #toggleHighContrast,#toggleLargeFonts,#toggleDyslexiaFont {display:flex !important;visibility:visible !important;opacity:1 !important;height:auto !important} @media (max-width:768px) {.accessibility-float-btn,#accessibilityToggle {top:auto !important;bottom:20px !important;left:15px !important;width:56px !important;height:56px !important;font-size:1.3rem !important;box-shadow:0 4px 12px rgba(0,123,255,0.4) !important;border-radius:50% !important;touch-action:manipulation !important;-webkit-tap-highlight-color:transparent !important;-webkit-touch-callout:none !important;-webkit-user-select:none !important;user-select:none !important;opacity:1 !important;visibility:visible !important;pointer-events:auto !important;display:flex !important;z-index:1050 !important} .accessibility-float-btn:hover,#accessibilityToggle:hover {transform:scale(1.05) !important} .accessibility-float-btn:active,#accessibilityToggle:active {transform:scale(0.95) !important;background:#0056b3 !important} .accessibility-drawer {position:fixed !important;width:100vw !important;max-width:100vw !important;left:-100vw !important;top:0 !important;bottom:0 !important;height:100vh !important;height:calc(var(--vh,1vh) * 100) !important;min-height:100vh !important;min-height:calc(var(--vh,1vh) * 100) !important;max-height:100vh !important;max-height:calc(var(--vh,1vh) * 100) !important;border-radius:0 !important;border-left:none !important;border-top:4px solid #007bff !important;border-bottom:none !important;border-right:none !important;touch-action:pan-y !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch !important;z-index:1060 !important;transition:left 0.3s ease !important;overscroll-behavior:contain !important} .accessibility-drawer.open {left:0 !important} .drawer-header {padding:1rem !important;position:sticky !important;top:0 !important;z-index:1070 !important;background:#007bff !important;border-bottom:1px solid rgba(255,255,255,0.1) !important} .drawer-header h2 {font-size:1.1rem !important;margin:0 !important} .drawer-body {padding:1rem !important;padding-bottom:3rem !important;-webkit-overflow-scrolling:touch !important;overflow-y:visible !important} .accessibility-section {margin-bottom:1.5rem !important;padding-bottom:1rem !important;border-bottom:1px solid #e9ecef !important} .accessibility-section:last-child {border-bottom:none !important;margin-bottom:0 !important} .accessibility-section h3 {font-size:1rem !important;margin-bottom:0.75rem !important;color:#007bff !important;font-weight:600 !important} .btn-group {flex-direction:column !important;gap:0.5rem !important} .btn-group .btn {margin-bottom:0 !important;border-radius:0.5rem !important;min-height:48px !important;touch-action:manipulation !important;font-size:0.95rem !important;padding:0.75rem 1rem !important;-webkit-tap-highlight-color:transparent !important} .btn {min-height:48px !important;touch-action:manipulation !important;-webkit-tap-highlight-color:transparent !important;font-size:0.95rem !important;padding:0.75rem 1rem !important} .form-select {min-height:48px !important;font-size:0.95rem !important;touch-action:manipulation !important} .form-range {height:2rem !important;-webkit-appearance:none !important;touch-action:manipulation !important} .form-range::-webkit-slider-thumb {width:20px !important;height:20px !important;-webkit-appearance:none !important} } @media (max-width:480px) {.accessibility-float-btn,#accessibilityToggle {bottom:15px !important;left:10px !important;width:52px !important;height:52px !important;font-size:1.2rem !important;touch-action:manipulation !important;-webkit-tap-highlight-color:transparent !important;opacity:1 !important;visibility:visible !important;pointer-events:auto !important;display:flex !important;z-index:1050 !important} .accessibility-float-btn:active,#accessibilityToggle:active {transform:scale(0.9) !important} .accessibility-drawer {width:100vw !important;left:-100vw !important;touch-action:pan-y !important;padding:0 !important} .drawer-header {padding:1rem 0.75rem !important;min-height:60px !important} .drawer-header h2 {font-size:1rem !important;line-height:1.2 !important} .drawer-header .btn-close {width:28px !important;height:28px !important;font-size:1.1rem !important} .drawer-body {padding:0.75rem !important;padding-bottom:2rem !important;-webkit-overflow-scrolling:touch !important} .accessibility-section {margin-bottom:1.25rem !important;padding-bottom:0.75rem !important} .accessibility-section h3 {font-size:0.95rem !important;margin-bottom:0.75rem !important} .btn {font-size:0.9rem !important;padding:0.75rem 1rem !important;min-height:48px !important;touch-action:manipulation !important;border-radius:0.5rem !important} .form-check-label {font-size:0.9rem !important;line-height:1.3 !important} .form-check-input {width:1.25rem !important;height:1.25rem !important;margin-top:0.125rem !important} .form-select {min-height:48px !important;font-size:0.9rem !important} .form-range {height:2.5rem !important} .form-range::-webkit-slider-thumb {width:22px !important;height:22px !important} } #accessibilityToggle *,.accessibility-float-btn * {text-decoration:none !important;color:inherit !important} #accessibilityToggle.d-none,.accessibility-float-btn.d-none,#accessibilityToggle.hidden,.accessibility-float-btn.hidden {display:flex !important;opacity:1 !important;visibility:visible !important} #accessibilityToggle,.accessibility-float-btn {position:fixed !important;z-index:9999 !important;opacity:1 !important;visibility:visible !important;display:flex !important;pointer-events:auto !important;background:#007bff !important;color:white !important;border:none !important;box-shadow:0 4px 12px rgba(0,123,255,0.3) !important;text-decoration:none !important;outline:none !important} #accessibilityToggle *,.accessibility-float-btn * {text-decoration:none !important;color:inherit !important} #accessibilityToggle.d-none,.accessibility-float-btn.d-none,#accessibilityToggle.hidden,.accessibility-float-btn.hidden {display:flex !important;opacity:1 !important;visibility:visible !important} /* * COMPREHENSIVE AI RESPONSE STYLING SECTION * All AI response-related styles consolidated in one place for easy modification * * This section includes:* - Bot message containers and layouts * - Response headers,paragraphs,and text formatting * - List styling and nested items * - Special terms and phone numbers * - Error states and loading indicators * - Responsive design and accessibility * - Dark mode support */ .chat-message.bot {background-color:#ffffff;color:#212121;align-self:flex-start;margin-bottom:var(--spacing-lg);padding:var(--spacing-md) var(--spacing-lg);border-radius:1.2rem;max-width:85%;font-size:var(--font-size-base);line-height:var(--line-height-base);position:relative;animation:fadeIn 0.3s ease-out;border:1px solid #e0e0e0;border-left:4px solid #6f42c1;box-shadow:0 2px 8px rgba(0,0,0,0.1)} .bot-message {background:linear-gradient(135deg,#ffffff 0%,#f8f9fa 100%);border:1px solid rgba(111,66,193,0.15);border-radius:18px;padding:1.75rem;margin:8px 0;box-shadow:0 6px 20px rgba(111,66,193,0.1);position:relative;transition:all 0.3s ease;animation:slideInFromTop 0.4s ease-out;backdrop-filter:blur(5px);border-left:4px solid #6f42c1} .bot-message::before {content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#6f42c1 0%,#8e63d2 50%,#6f42c1 100%);border-radius:18px 18px 0 0} .bot-message:hover {box-shadow:0 8px 25px rgba(111,66,193,0.15);transform:translateY(-1px);border-left-color:#5a32a3} .bot-message .message-body {font-size:1.05rem;line-height:1.7;color:#2d3748} .bot-message .message-body h1,.bot-message .message-body h2,.bot-message .message-body h3,.bot-message .message-body h4 {color:#6f42c1;font-weight:600;margin-top:2rem;margin-bottom:1.2rem;clear:both} .bot-message .message-body h1:first-child,.bot-message .message-body h2:first-child,.bot-message .message-body h3:first-child,.bot-message .message-body h4:first-child {margin-top:0} .bot-message .message-body h1 {font-size:1.4rem} .bot-message .message-body h2 {font-size:1.3rem} .bot-message .message-body h3 {font-size:1.2rem} .bot-message .message-body h4 {font-size:1.1rem} .bot-message .message-body p {margin-bottom:1.2rem;text-align:left;line-height:1.7} .bot-message .message-body hr {margin:2rem 0;border:none;border-top:2px solid #e2e8f0;opacity:0.7} .bot-message .message-body ul,.bot-message .message-body ol {margin:1.5rem 0;padding-left:1.8rem} .bot-message .message-body li {margin-bottom:0.8rem;line-height:1.6} .bot-message .message-body ul ul,.bot-message .message-body ol ol,.bot-message .message-body ul ol,.bot-message .message-body ol ul {margin:0.5rem 0;padding-left:1.5rem} .bot-message .message-body li li {margin-bottom:0.4rem} .bot-message .message-body strong {color:#5a32a3;font-weight:600} .bot-message .message-body em {color:#6f42c1;font-style:italic} .message-header {margin-bottom:8px;display:flex;justify-content:space-between;align-items:center} .assistant-label {color:#6f42c1;font-weight:600;font-size:0.875rem;display:flex;align-items:center;gap:0.5rem} .assistant-label::before {content:'\f0da';font-family:'Font Awesome 6 Free';font-weight:900;color:#6f42c1} .ai-indicator {display:flex;align-items:center;gap:0.5rem;color:#6f42c1;font-size:0.875rem;font-weight:600} .ai-indicator i {animation:pulse 2s infinite} .message-time {color:#6c757d;font-size:0.875rem;margin-top:8px} .message-body {color:#2c3e50;line-height:1.6;font-size:0.95rem} .message-content {color:#2c3e50;line-height:1.6;font-size:0.95rem;margin:0} .welcome-section {background:linear-gradient(135deg,#e3f2fd 0%,#f3e5f5 100%);border:1px solid #e1e8ed;border-radius:8px;padding:16px;margin:16px 0;position:relative} .welcome-section .response-header {color:#2c3e50;margin-top:0;border-bottom:1px solid #e1e8ed} .response-header {color:#2c3e50;font-size:1.4rem;font-weight:700;margin:24px 0 16px 0;padding:12px 0 12px 2rem;border-bottom:2px solid #6f42c1;position:relative;animation:slideInFromLeft 0.4s ease-out} .response-header::before {content:'📋';position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:1.2rem;opacity:0.8} .response-main-header {color:#2c3e50;font-size:1.6rem;font-weight:700;margin:24px 0 16px 0;padding-bottom:8px;border-bottom:3px solid var(--purple);line-height:1.2;animation:slideInFromLeft 0.4s ease-out} .response-subheader {color:#495057;font-size:1.2rem;font-weight:600;margin:20px 0 12px 0;padding:8px 0 8px 2rem} .response-list-item.numbered {position:relative;padding-left:2.5rem;counter-increment:step-counter} .response-list-item.numbered::before {content:counter(step-counter);position:absolute;left:0;top:50%;transform:translateY(-50%);width:1.8rem;height:1.8rem;background:var(--purple);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:0.875rem} .response-list:has(.numbered) {counter-reset:step-counter} .fade-in-sequence {animation:fadeInUp 0.6s ease-out} .fade-in-sequence li {opacity:0;animation:fadeInSequential 0.8s ease-out forwards} .fade-in-sequence li:nth-child(1) {animation-delay:0.1s} .fade-in-sequence li:nth-child(2) {animation-delay:0.2s} .fade-in-sequence li:nth-child(3) {animation-delay:0.3s} .fade-in-sequence li:nth-child(4) {animation-delay:0.4s} .fade-in-sequence li:nth-child(5) {animation-delay:0.5s} .fade-in-sequence li:nth-child(n+6) {animation-delay:0.6s} @keyframes fadeInSequential {from {opacity:0;transform:translateY(20px)} to {opacity:1;transform:translateY(0)} } [data-animation="slide-in-left"] {animation:slideInFromLeft 0.7s ease-out} @keyframes slideInFromLeft {from {opacity:0;transform:translateX(-30px)} to {opacity:1;transform:translateX(0)} } .code-block {margin:1.5rem 0;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,0.1);background:#f8f9fa} .code-header {background:linear-gradient(135deg,#6f42c1 0%,#5a32a3 100%);color:white;padding:0.75rem 1rem;display:flex;justify-content:space-between;align-items:center;font-size:0.875rem;font-weight:600} .code-language {text-transform:uppercase;letter-spacing:0.5px} .copy-code-btn {background:rgba(255,255,255,0.2);border:none;color:white;padding:0.25rem 0.5rem;border-radius:4px;cursor:pointer;transition:background 0.3s ease;font-size:0.875rem} .copy-code-btn:hover {background:rgba(255,255,255,0.3)} .code-block pre {margin:0;padding:1.25rem;background:#2d3748;color:#e2e8f0;overflow-x:auto;font-family:'Consolas','Monaco','Courier New',monospace;font-size:0.9rem;line-height:1.5} .code-block code {background:none;color:inherit;padding:0} .keyword {color:#ff7979;font-weight:600} .string {color:#00b894} .selector {color:#74b9ff} .property {color:#fdcb6e} .response-list-item {position:relative;transition:all 0.3s ease;border-radius:8px;margin-bottom:0.75rem} .response-list-item:hover {transform:translateX(5px);box-shadow:0 4px 12px rgba(111,66,193,0.15)} .response-list-item .list-icon {margin-right:0.75rem;width:1.2rem;text-align:center;color:var(--purple)} .response-list-item .list-content {flex:1} .category-rights {border-left:4px solid #e74c3c;background:linear-gradient(135deg,rgba(231,76,60,0.05) 0%,transparent 100%)} .category-rights .list-icon {color:#e74c3c} .category-education {border-left:4px solid #3498db;background:linear-gradient(135deg,rgba(52,152,219,0.05) 0%,transparent 100%)} .category-education .list-icon {color:#3498db} .category-medical {border-left:4px solid #e67e22;background:linear-gradient(135deg,rgba(230,126,34,0.05) 0%,transparent 100%)} .category-medical .list-icon {color:#e67e22} .category-support {border-left:4px solid #2ecc71;background:linear-gradient(135deg,rgba(46,204,113,0.05) 0%,transparent 100%)} .category-support .list-icon {color:#2ecc71} .category-contact {border-left:4px solid #9b59b6;background:linear-gradient(135deg,rgba(155,89,182,0.05) 0%,transparent 100%)} .category-contact .list-icon {color:#9b59b6} .category-timeline {border-left:4px solid #f39c12;background:linear-gradient(135deg,rgba(243,156,18,0.05) 0%,transparent 100%)} .category-timeline .list-icon {color:#f39c12} .response-list-item.numbered {display:flex;align-items:flex-start;padding:1rem;background:linear-gradient(135deg,rgba(111,66,193,0.03) 0%,transparent 100%)} .step-number {background:var(--purple);color:white;width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:0.9rem;margin-right:1rem;flex-shrink:0} .step-content {flex:1;padding-top:0.25rem} .phone-number,.email-address,.website-link {display:inline-flex;align-items:center;gap:0.5rem;padding:0.25rem 0.5rem;background:rgba(111,66,193,0.1);border-radius:6px;text-decoration:none;color:var(--purple);font-weight:500;transition:all 0.3s ease;margin:0.25rem 0} .phone-number:hover,.email-address:hover,.website-link:hover {background:rgba(111,66,193,0.2);transform:translateY(-1px);box-shadow:0 2px 8px rgba(111,66,193,0.2)} .response-table {width:100%;border-collapse:collapse;margin:1.5rem 0;background:white;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,0.1)} .response-table th {background:linear-gradient(135deg,var(--purple) 0%,var(--purple-dark) 100%);color:white;padding:1rem;text-align:left;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;font-size:0.875rem} .response-table td {padding:0.75rem 1rem;border-bottom:1px solid #e9ecef;transition:background 0.3s ease} .response-table tr:hover td {background:rgba(111,66,193,0.05)} .response-table tr:last-child td {border-bottom:none} .response-code.inline {background:#f1f3f4;color:#d73a49;padding:0.2rem 0.4rem;border-radius:4px;font-family:'Consolas','Monaco','Courier New',monospace;font-size:0.9em;font-weight:500} .response-link {color:var(--purple);text-decoration:none;font-weight:500;display:inline-flex;align-items:center;gap:0.25rem;transition:all 0.3s ease} .response-link:hover {color:var(--purple-dark);text-decoration:underline} .response-link i {font-size:0.875em;opacity:0.7} .response-strikethrough {text-decoration:line-through;color:#6c757d;opacity:0.7} .bot-message hr {border:none;height:2px;background:linear-gradient(90deg,var(--purple-light) 0%,transparent 100%);margin:var(--spacing-lg) 0;border-radius:1px} .bot-message h2 {color:var(--purple);font-weight:700;font-size:1.3rem;margin:var(--spacing-lg) 0 var(--spacing-md) 0;display:flex;align-items:center;gap:var(--spacing-sm)} .bot-message h3 {color:var(--purple-dark);font-weight:600;font-size:1.1rem;margin:var(--spacing-md) 0 var(--spacing-sm) 0;display:flex;align-items:center;gap:var(--spacing-xs)} .bot-message h4 {color:var(--purple);font-weight:600;font-size:1.05rem;margin:var(--spacing-md) 0 var(--spacing-sm) 0;position:relative;animation:slideInFromLeft 0.4s ease-out} .response-subheader::before {content:'ℹ️';position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:1rem;opacity:0.7} .response-paragraph {margin:12px 0;line-height:1.6;color:#2c3e50;animation:fadeInUp 0.4s ease-out} .response-bold {color:#2c3e50;font-weight:700} .response-italic {color:#6c757d;font-style:italic} .response-code {background:#f8f9fa;color:#2c3e50;padding:2px 6px;border-radius:4px;font-family:'Courier New',monospace;font-size:0.9em;border:1px solid #e1e8ed} .response-list {margin:12px 0;padding-left:0;list-style:none;border:none;animation:fadeInUp 0.4s ease-out} .response-list-item {margin:6px 0;padding:0;background:#f8f9fa;border-radius:6px;position:relative;font-size:0.95rem;line-height:1.5} .response-list-item > * {padding:8px 12px 8px 16px;margin:0} .response-list-item::before {display:none} .response-list-item::marker {display:none;content:none} .response-list-item {list-style:none;list-style-type:none} .response-list.ordered-list {counter-reset:step-counter;margin:12px 0;padding-left:0;list-style:none} .response-list.ordered-list .response-list-item {counter-increment:step-counter;position:relative;padding-left:2.5rem} .response-list.ordered-list .response-list-item::before {content:counter(step-counter);position:absolute;left:0;top:50%;transform:translateY(-50%);background:#6f42c1;color:white;width:1.5rem;height:1.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.875rem;font-weight:600;font-family:'Arial',sans-serif} .response-list-item.step::before {display:none} .resource-section {margin-top:2rem;padding:1.5rem;background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);border-radius:16px;border:1px solid rgba(111,66,193,0.1);box-shadow:0 4px 16px rgba(111,66,193,0.1);position:relative;overflow:hidden} .ai-resource-section {margin-top:2rem;padding:1.5rem;background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);border-radius:16px;border:1px solid rgba(111,66,193,0.1);box-shadow:0 4px 16px rgba(111,66,193,0.1);position:relative;overflow:hidden} .location-context-header {display:flex;align-items:center;gap:0.5rem;margin-bottom:1rem;padding:0.75rem 1rem;background:rgba(111,66,193,0.05);border-radius:8px;border-left:3px solid #6f42c1;font-size:0.9rem;color:#495057} .location-context-header .location-icon {color:#6f42c1;font-size:1rem} .location-context-text {flex:1;font-weight:500} .resource-proximity {display:inline-flex;align-items:center;gap:0.25rem;margin-left:0.5rem;padding:0.125rem 0.5rem;border-radius:12px;font-size:0.875rem;font-weight:600;text-transform:uppercase;letter-spacing:0.5px} .proximity-local {background:rgba(40,167,69,0.1);color:#28a745;border:1px solid rgba(40,167,69,0.2)} .proximity-local::before {content:'📍';margin-right:0.25rem} .proximity-regional {background:rgba(255,193,7,0.1);color:#ffc107;border:1px solid rgba(255,193,7,0.2)} .proximity-regional::before {content:'🗺️';margin-right:0.25rem} .proximity-state {background:rgba(23,162,184,0.1);color:#17a2b8;border:1px solid rgba(23,162,184,0.2)} .proximity-state::before {content:'🏛️';margin-right:0.25rem} .proximity-national {background:rgba(108,117,125,0.1);color:#6c757d;border:1px solid rgba(108,117,125,0.2)} .proximity-national::before {content:'🇺🇸';margin-right:0.25rem} .resource-category-crisis {border-left:4px solid #dc3545;background:linear-gradient(135deg,rgba(220,53,69,0.05) 0%,rgba(220,53,69,0.02) 100%)} .resource-category-crisis .resource-header::before {content:'🚨'} .resource-category-medical {border-left:4px solid #fd7e14;background:linear-gradient(135deg,rgba(253,126,20,0.05) 0%,rgba(253,126,20,0.02) 100%)} .resource-category-medical .resource-header::before {content:'🏥'} .resource-category-educational {border-left:4px solid #6f42c1;background:linear-gradient(135deg,rgba(111,66,193,0.05) 0%,rgba(111,66,193,0.02) 100%)} .resource-category-educational .resource-header::before {content:'🎓'} .resource-category-social {border-left:4px solid #20c997;background:linear-gradient(135deg,rgba(32,201,151,0.05) 0%,rgba(32,201,151,0.02) 100%)} .resource-category-social .resource-header::before {content:'👥'} .resource-category-legal {border-left:4px solid #495057;background:linear-gradient(135deg,rgba(73,80,87,0.05) 0%,rgba(73,80,87,0.02) 100%)} .resource-category-legal .resource-header::before {content:'⚖️'} .resource-category-financial {border-left:4px solid #28a745;background:linear-gradient(135deg,rgba(40,167,69,0.05) 0%,rgba(40,167,69,0.02) 100%)} .resource-category-financial .resource-header::before {content:'💰'} .resource-category-transportation {border-left:4px solid #17a2b8;background:linear-gradient(135deg,rgba(23,162,184,0.05) 0%,rgba(23,162,184,0.02) 100%)} .resource-category-transportation .resource-header::before {content:'🚌'} .service-indicator {display:inline-flex;align-items:center;gap:0.25rem;margin-left:0.5rem;font-size:0.875rem;color:#6c757d} .service-telehealth::before {content:'💻';margin-right:0.125rem} .service-24-7::before {content:'🕒';margin-right:0.125rem} .service-crisis::before {content:'🚨';margin-right:0.125rem;color:#dc3545} .service-multilingual::before {content:'🌐';margin-right:0.125rem} .resource-distance {font-size:0.875rem;color:#6c757d;margin-left:auto;display:flex;align-items:center;gap:0.25rem} .resource-distance::before {content:'📏'} .resource-item.location-aware {position:relative;transition:all 0.3s ease} .resource-item.location-aware:hover {transform:translateX(4px) scale(1.01);box-shadow:0 8px 24px rgba(111,66,193,0.2)} .resource-item.priority-high {border-left:4px solid #28a745;background:linear-gradient(135deg,rgba(40,167,69,0.02) 0%,rgba(255,255,255,1) 100%)} .resource-item.priority-medium {border-left:4px solid #ffc107;background:linear-gradient(135deg,rgba(255,193,7,0.02) 0%,rgba(255,255,255,1) 100%)} .resource-item.priority-low {border-left:4px solid #6c757d} .resource-section::before {content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#6f42c1 0%,#17a2b8 100%)} .resource-header {margin:0 0 1rem 0;font-size:1.2rem;font-weight:700;color:#2c3e50;display:flex;align-items:center;gap:0.75rem;padding-bottom:0.5rem;border-bottom:1px solid rgba(111,66,193,0.1);text-shadow:0 1px 2px rgba(0,0,0,0.1)} .resource-header::before {content:'🤝';font-size:1.3rem;opacity:0.9;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.1))} .resource-intro {color:#495057;font-size:1rem;line-height:1.6;margin:0 0 1rem 0;font-style:italic;padding:0 0.25rem} .resource-list {margin:0;padding:0;list-style:none} .resource-item {display:flex;align-items:center;gap:0.75rem;padding:1rem;margin-bottom:0.75rem;background:white;border-radius:12px;border:1px solid rgba(111,66,193,0.1);transition:all 0.3s ease;box-shadow:0 2px 8px rgba(0,0,0,0.05)} .resource-item:hover {transform:translateX(4px);box-shadow:0 6px 20px rgba(111,66,193,0.15);border-color:#6f42c1;background:rgba(255,255,255,0.98)} .resource-item:last-child {margin-bottom:0} .resource-icon {font-size:1.3rem;min-width:1.75rem;text-align:center;opacity:0.9;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.1))} .resource-text {color:#2c3e50;font-size:1rem;line-height:1.5;font-weight:500} .resource-text strong {color:#6f42c1;font-weight:600} .resource-contact {display:block;margin-top:0.5rem;font-size:0.9rem;color:#6c757d} .resource-link {color:#6f42c1;text-decoration:none;font-weight:500;transition:all 0.2s ease;border-bottom:1px solid transparent} .resource-link:hover {color:#5a32a3;border-bottom-color:#5a32a3;text-decoration:none} .resource-encouragement {color:#495057;font-size:0.95rem;line-height:1.6;margin:1rem 0 0 0;padding:1rem;background:rgba(111,66,193,0.05);border-radius:8px;border-left:3px solid #6f42c1;font-style:italic;text-align:center} .response-list-item.icon-rights::before {display:none} .response-list-item.icon-accommodation::before {display:none} .response-list-item.icon-resource::before {display:none} .response-list-item.icon-contact::before {display:none} .response-list-item.icon-location::before {display:none} .response-list-item.icon-support::before {display:none} .response-list-item.icon-education::before {display:none} .response-list-item.icon-legal::before {display:none} .response-list-item.icon-health::before {display:none} .response-list-item.icon-transportation::before {display:none} .response-list-item.icon-technology::before {display:none} .response-list-item.icon-behavior::before {display:none} .response-list-item.icon-assessment::before {display:none} .response-list-item.icon-goal::before {display:none} .response-list-item.icon-progress::before {display:none} .response-list-item.icon-meeting::before {display:none} .response-list-item.icon-document::before {display:none} .response-list-item.icon-calendar::before {display:none} .response-list-item.nested {margin-left:16px;background:#ffffff;font-size:0.9rem;padding:0;line-height:1.4} .response-list-item.nested > * {padding:6px 10px 6px 16px;margin:0} .response-list-item.nested::before {display:none} .special-term {color:#3f51b5;font-weight:600;background:rgba(63,81,181,0.1);padding:2px 6px;border-radius:4px;display:inline-block} .phone-number {color:#2e7d32;font-weight:600;text-decoration:none} .phone-number:hover {text-decoration:underline} .response-list-item strong {color:#6f42c1;font-weight:600} .response-list-item em {color:#495057;font-style:italic} .response-list-item code {background:#f8f9fa;color:#e83e8c;padding:2px 4px;border-radius:3px;font-family:'Courier New',monospace;font-size:0.9em} .bot-message.error {background:#f8d7da;border-color:#f5c6cb;color:#721c24} .chat-message.bot.error .alert {background:#f8d7da;border-color:#f5c6cb;color:#721c24;margin:0;padding:0.75rem;border-radius:0.375rem} .chat-message.bot.error .alert i {color:#721c24;margin-right:0.5rem} .chat-message.loading {font-style:italic;color:#6c757d;background-color:#f5f5f5} .chat-message.loading .message-content {opacity:0.7} .typing-animation {display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:20px;background:linear-gradient(45deg,#f8f9fa,#e9ecef);border:1px solid rgba(111,66,193,0.1)} .typing-animation span {width:10px;height:10px;border-radius:50%;animation:colorful-typing 1.6s infinite ease-in-out;box-shadow:0 2px 4px rgba(111,66,193,0.2)} .typing-animation span:nth-child(1) {animation-delay:0s;background:linear-gradient(45deg,#6f42c1,#8e63d2)} .typing-animation span:nth-child(2) {animation-delay:0.2s;background:linear-gradient(45deg,#20c997,#4dd4ac)} .typing-animation span:nth-child(3) {animation-delay:0.4s;background:linear-gradient(45deg,#fd7e14,#ffab6b)} .thinking-dots {display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:20px;background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);border:1px solid rgba(111,66,193,0.15);box-shadow:0 2px 8px rgba(0,0,0,0.08);animation:thinking-container-pulse 2s ease-in-out infinite} .thinking-dots span {display:block;width:12px;height:12px;background:linear-gradient(135deg,#4f8cff 0%,#6c5ce7 100%);border-radius:50%;box-shadow:0 0 8px rgba(79,140,255,0.4);animation:thinking-bounce-enhanced 1.4s ease-in-out infinite alternate;position:relative} .thinking-dots span::before {content:'';position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(135deg,rgba(79,140,255,0.3) 0%,rgba(108,92,231,0.3) 100%);border-radius:50%;animation:thinking-glow 1.4s ease-in-out infinite alternate;z-index:-1} .thinking-dots span:nth-child(2) {animation-delay:0.3s} .thinking-dots span:nth-child(2)::before {animation-delay:0.3s} .thinking-dots span:nth-child(3) {animation-delay:0.6s} .thinking-dots span:nth-child(3)::before {animation-delay:0.6s} .enhanced-typing-animation {display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:20px;background:#f8f9fa;border:1px solid rgba(111,66,193,0.1)} .enhanced-typing-animation .typing-dot {display:block;width:12px;height:12px;background:#4f8cff;border-radius:50%;animation:thinking-bounce 1s infinite alternate} .enhanced-typing-animation .typing-dot:nth-child(1) {animation-delay:0s} .enhanced-typing-animation .typing-dot:nth-child(2) {animation-delay:0.2s} .enhanced-typing-animation .typing-dot:nth-child(3) {animation-delay:0.4s} .wave-loading {display:inline-flex;align-items:center;gap:4px;padding:10px 14px;border-radius:20px;background:linear-gradient(45deg,#ffffff,#f8f9fa);border:1px solid rgba(111,66,193,0.1)} .wave-loading .wave-bar {width:4px;height:20px;border-radius:2px;animation:wave-bounce 1.2s infinite ease-in-out} .wave-loading .wave-bar:nth-child(1) {background:linear-gradient(to top,#6f42c1,#8e63d2);animation-delay:0s} .wave-loading .wave-bar:nth-child(2) {background:linear-gradient(to top,#3b82f6,#60a5fa);animation-delay:0.1s} .wave-loading .wave-bar:nth-child(3) {background:linear-gradient(to top,#10b981,#34d399);animation-delay:0.2s} .wave-loading .wave-bar:nth-child(4) {background:linear-gradient(to top,#f59e0b,#fbbf24);animation-delay:0.3s} .wave-loading .wave-bar:nth-child(5) {background:linear-gradient(to top,#ef4444,#f87171);animation-delay:0.4s} .typing-dots {display:inline-block} .typing-dots span {display:inline-block;width:4px;height:4px;border-radius:50%;background:#6c757d;margin:0 2px;animation:typing 1.4s infinite ease-in-out} .typing-dots span:nth-child(1) {animation-delay:-0.32s} .typing-dots span:nth-child(2) {animation-delay:-0.16s} @keyframes typing {0%,80%,100% {transform:scale(0.8);opacity:0.5} 40% {transform:scale(1);opacity:1} } @keyframes colorful-typing {0%,80%,100% {transform:scale(0.7) translateY(0px);opacity:0.6;filter:brightness(0.8)} 40% {transform:scale(1.1) translateY(-2px);opacity:1;filter:brightness(1.2)} } @keyframes thinking-bounce {to {transform:translateY(-12px);opacity:0.5} } @keyframes thinking-bounce-enhanced {0% {transform:translateY(0);opacity:0.7;filter:brightness(1)} 50% {transform:translateY(-8px);opacity:1;filter:brightness(1.2)} 100% {transform:translateY(-16px);opacity:0.6;filter:brightness(0.9)} } @keyframes thinking-glow {0% {opacity:0.3;transform:scale(1)} 50% {opacity:0.6;transform:scale(1.1)} 100% {opacity:0.2;transform:scale(1.3)} } @keyframes thinking-container-pulse {0% {box-shadow:0 2px 8px rgba(0,0,0,0.08);border-color:rgba(111,66,193,0.15)} 50% {box-shadow:0 4px 16px rgba(79,140,255,0.15);border-color:rgba(111,66,193,0.25)} 100% {box-shadow:0 2px 8px rgba(0,0,0,0.08);border-color:rgba(111,66,193,0.15)} } @keyframes loading-slide {0% {left:-40px} 100% {left:200px} } @keyframes loading-pulse {0% {opacity:0.3;transform:scale(1)} 50% {opacity:1;transform:scale(1.2)} 100% {opacity:0.3;transform:scale(1)} } @keyframes fadeInOut {0% {opacity:1} 50% {opacity:0.7} 100% {opacity:1} } .enhanced-waiting .waiting-subtext {animation:fadeInOut 4s ease-in-out infinite;animation-delay:1s} .loading-animation {display:flex;flex-direction:column;align-items:center;gap:8px} .loading-bar {width:200px;height:4px;background:#e9ecef;border-radius:2px;overflow:hidden;position:relative} .loading-progress {width:40px;height:100%;background:linear-gradient(90deg,transparent,#4f8cff,transparent);border-radius:2px;animation:loading-slide 2s ease-in-out infinite;position:absolute;top:0;left:-40px} .loading-dots {display:flex;justify-content:center;gap:4px;margin-top:8px} .loading-dot {width:6px;height:6px;background:#4f8cff;border-radius:50%;animation:loading-pulse 1.5s ease-in-out infinite;opacity:0.3} .loading-dot:nth-child(1) {animation-delay:0s} .loading-dot:nth-child(2) {animation-delay:0.1s} .loading-dot:nth-child(3) {animation-delay:0.2s} .loading-dot:nth-child(4) {animation-delay:0.3s} .loading-dot:nth-child(5) {animation-delay:0.4s} @keyframes wave-bounce {0%,80%,100% {transform:scaleY(0.6);opacity:0.7} 20% {transform:scaleY(0.8);opacity:0.85} 40% {transform:scaleY(1.2);opacity:1} 60% {transform:scaleY(0.9);opacity:0.9} } @keyframes fadeIn {from {opacity:0;transform:translateY(10px)} to {opacity:1;transform:translateY(0)} } @keyframes slideInFromLeft {from {opacity:0;transform:translateX(-20px)} to {opacity:1;transform:translateX(0)} } @keyframes fadeInUp {from {opacity:0;transform:translateY(20px)} to {opacity:1;transform:translateY(0)} } @keyframes pulse {0%,100% {opacity:1} 50% {opacity:0.5} } @media (max-width:768px) {.bot-message {padding:12px;margin:6px 0} .welcome-section {padding:12px;margin:12px 0} .response-header {font-size:1.1rem;margin:16px 0 10px 0} .response-subheader {font-size:1rem;margin:12px 0 6px 0} .response-list-item {padding:0.25rem 0;margin:0.25rem 0} .response-list-item.nested {margin-left:0.75rem} .chat-message.bot.enhanced {margin:6px 0} .message-header {margin-bottom:6px} .message-content {font-size:0.9rem} .message-actions {gap:0.5rem} } @media (max-width:576px) {.bot-message {padding:10px;border-radius:6px} .welcome-section {padding:10px;margin:10px 0} .response-header {font-size:1rem;margin:12px 0 8px 0} .response-subheader {font-size:0.95rem;margin:10px 0 4px 0} .special-term,.phone-number {padding:1px 4px;font-size:inherit} .response-list-item.nested {margin-left:0.5rem} .chat-message.bot.enhanced {margin:4px 0} .message-header {margin-bottom:4px} .message-content {font-size:0.875rem} .message-actions {gap:0.25rem} .response-header {font-size:0.95rem} .response-subheader {font-size:0.9rem} } @media (prefers-color-scheme:dark) {.bot-message {background:transparent;border-color:transparent;color:inherit} .welcome-section {background:linear-gradient(135deg,#e3f2fd 0%,#f3e5f5 100%);border-color:transparent} .message-body {color:inherit} .response-header {color:inherit;border-bottom-color:transparent} .response-subheader {color:inherit;border-left-color:transparent} .response-paragraph {color:inherit} .response-bold {color:inherit} .response-italic {color:inherit} .response-code {background:rgba(255,255,255,0.1);color:inherit} .response-list-item {background:transparent;border-left-color:rgba(111,66,193,0.3)} .response-list-item.nested {background:transparent;border-left-color:rgba(142,99,210,0.3)} .response-list-item strong {color:#b8a9e8} .response-list-item em {color:#adb5bd} .response-list-item code {background:rgba(255,255,255,0.1);color:#f8bbd9} .response-list.ordered-list .response-list-item::before {background:#8e63d2;color:#ffffff} .resource-section {background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.1)} .resource-header {color:#e9ecef} .resource-item {border-bottom-color:rgba(255,255,255,0.1)} .resource-text {color:#adb5bd} .special-term {color:inherit} .phone-number {background:transparent;color:inherit;border-color:transparent} } .high-contrast .chat-message.bot.enhanced {background:#ffffff !important;color:#000000 !important;border:2px solid #000080 !important} .high-contrast .message-header {color:#000000 !important} .high-contrast .message-content {color:#000000 !important} .high-contrast .message-actions {border-color:#000000 !important} .large-fonts .response-header {font-size:1.5rem} .large-fonts .response-subheader {font-size:1.3rem} .dyslexia-font .chat-message {line-height:2;letter-spacing:0.05em;font-size:16px} @media (prefers-reduced-motion:reduce) {.chat-message.enhanced {animation:none} .typing-animation span {animation:none} .enhanced-typing-animation .typing-dot {animation:none} .wave-loading .wave-bar {animation:none} .ai-indicator i {animation:none} .toast {animation:none} .resource-item:hover {transition:none} .message-actions .btn:hover {transition:none} } .chat-message:focus {outline:2px solid #6f42c1;outline-offset:2px} .message-actions .btn:focus {outline:2px solid #6f42c1;outline-offset:2px} @media print {.message-actions,.typing-indicator,.ai-indicator {display:none !important} .chat-message.bot.enhanced {background:#ffffff !important;border:1px solid #000000 !important;color:#000000 !important} .message-header {border-bottom:1px solid #000000 !important} .message-content {color:#000000 !important} } body.high-contrast {background-color:#000000 !important;color:#ffffff !important} body.high-contrast * {background-color:inherit !important;color:inherit !important} body.high-contrast .chat-message.user {background:#ffffff !important;color:#000000 !important;border:2px solid #000000 !important;border-right:4px solid #000080 !important} body.high-contrast .chat-message.bot {background:#ffffff !important;color:#000000 !important;border:2px solid #000000 !important;border-left:4px solid #000080 !important} body.high-contrast .btn-purple {background-color:#ffffff !important;color:#000000 !important;border:2px solid #ffffff !important} body.high-contrast .btn-purple:hover,body.high-contrast .btn-purple:focus {background-color:#cccccc !important;color:#000000 !important} body.high-contrast .text-purple {color:#ffffff !important} body.high-contrast .card {background-color:#333333 !important;border:2px solid #ffffff !important} body.high-contrast .card-header {background-color:#000080 !important;border-bottom:2px solid #ffffff !important} body.high-contrast .form-control {background-color:#333333 !important;color:#ffffff !important;border:2px solid #ffffff !important} body.high-contrast .form-control:focus {background-color:#000080 !important;box-shadow:0 0 0 3px #ffffff !important} body.high-contrast .btn {border:2px solid #ffffff !important} body.high-contrast .btn-secondary {background-color:#666666 !important;color:#ffffff !important} body.high-contrast .btn-outline-secondary {background-color:transparent !important;color:#ffffff !important;border:2px solid #ffffff !important} body.high-contrast .btn-outline-secondary:hover {background-color:#ffffff !important;color:#000000 !important} body.high-contrast .alert {border:2px solid #ffffff !important} body.high-contrast .alert-primary {background-color:#000080 !important;color:#ffffff !important} body.high-contrast .alert-danger {background-color:#800000 !important;color:#ffffff !important} body.high-contrast .alert-warning {background-color:#808000 !important;color:#000000 !important} body.high-contrast .alert-success {background-color:#008000 !important;color:#ffffff !important} body.high-contrast .navbar {background-color:#000080 !important;border-bottom:2px solid #ffffff !important} body.high-contrast .nav-link {color:#ffffff !important} body.high-contrast .nav-link:hover,body.high-contrast .nav-link:focus {background-color:#333333 !important;color:#ffffff !important} body.high-contrast .modal-content {background-color:#000000 !important;border:2px solid #ffffff !important} body.high-contrast .modal-header {background-color:#000080 !important;border-bottom:2px solid #ffffff !important} body.high-contrast .modal-footer {border-top:2px solid #ffffff !important} body.high-contrast .list-group-item {background-color:#333333 !important;color:#ffffff !important;border:1px solid #ffffff !important} body.high-contrast .list-group-item:hover,body.high-contrast .list-group-item:focus {background-color:#000080 !important;color:#ffffff !important} body.high-contrast .text-muted {color:#666666 !important} body.high-contrast .text-success {color:#00ff00 !important} body.high-contrast .text-danger {color:#ff0000 !important} body.high-contrast .text-warning {color:#ffff00 !important} body.large-fonts {font-size:18px !important} body.large-fonts .chat-message {font-size:20px !important;line-height:1.6 !important;padding:1.5rem !important} body.large-fonts .btn {font-size:16px !important;padding:0.75rem 1.5rem !important} body.large-fonts h1 {font-size:3.5rem !important} body.large-fonts h2 {font-size:2.8rem !important} body.large-fonts h3 {font-size:2.2rem !important} body.large-fonts h4 {font-size:1.8rem !important} body.large-fonts h5 {font-size:1.5rem !important} body.large-fonts .form-control {font-size:18px !important;padding:1rem !important} body.large-fonts .list-group-item {font-size:18px !important;padding:1rem 1.5rem !important} /*-------------------------------------------------------------- OPEN LAYOUT DESIGN - Full Width,Minimal Constraints --------------------------------------------------------------*/ #main-content {padding:1rem 2rem;max-width:none;width:100%} .open-layout {display:block;width:100%;max-width:none} @media (max-width:992px) {#main-content {padding:var(--spacing-md)} .chat-container {padding:var(--spacing-md);gap:var(--spacing-md);border-radius:var(--spacing-sm)} .chat-message {max-width:90%;padding:var(--spacing-md);font-size:var(--font-size-base)} .message-input {font-size:16px;padding:var(--spacing-md)} } @media (max-width:768px) {:root {--message-max-width:95%;--chat-container-padding:0.75rem;--chat-bubble-radius:1rem} .chat-container {min-height:50vh;margin:0 -0.5rem} .chat-message {padding:var(--spacing-sm) var(--spacing-md);margin-bottom:var(--spacing-md)} .chat-message.user,.chat-message.bot {max-width:var(--message-max-width)} .btn-circle {width:56px;height:56px;min-width:56px;font-size:1.2rem} .message-input {min-height:48px;font-size:16px;padding:var(--spacing-md) var(--spacing-lg)} .input-section {padding:var(--spacing-lg) var(--spacing-md)} .action-group-left,.action-group-right {gap:var(--spacing-md)} } @media (max-width:480px) {.chat-message {font-size:0.95rem;line-height:var(--line-height-relaxed)} .chat-message.bot h1,.chat-message.bot h2,.chat-message.bot h3 {font-size:1.1rem} .btn-circle {width:52px;height:52px} } .chat-column {width:100%;min-height:0} .chat-interface {background:var(--light-bg);border-radius:12px;box-shadow:0 4px 20px rgba(111,66,193,0.08);overflow:hidden;border:1px solid rgba(111,66,193,0.1)} .input-section {background:white;border-bottom:1px solid rgba(111,66,193,0.2);padding:1rem} .input-area {margin-bottom:2rem} .message-input {width:100%;padding:var(--spacing-lg);font-size:var(--font-size-lg);border:2px solid var(--border-purple-light);border-radius:var(--chat-input-radius);transition:var(--transition-smooth);background:var(--light-bg);resize:vertical;min-height:60px;font-family:var(--font-family-base);position:relative} .message-input::placeholder {color:var(--text-purple-muted);font-style:italic} .message-input:focus {outline:none;border-color:var(--purple);box-shadow:var(--shadow-purple-focus);transform:translateY(-2px);background:rgba(255,255,255,0.98)} .message-input:focus::placeholder {opacity:0.7;transform:translateY(-2px);transition:var(--transition-base)} .input-section {background:var(--light-bg);border-bottom:1px solid var(--border-purple-light);padding:var(--spacing-lg);border-radius:var(--chat-input-radius) var(--chat-input-radius) 0 0;position:relative} .input-section::before {content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--gradient-primary);opacity:0;transition:var(--transition-base)} .input-section:focus-within::before {opacity:1} .action-group-left,.action-group-right {display:flex;gap:0.5rem} .input-footer {display:flex;justify-content:flex-end} .char-counter {font-size:0.875rem;color:#6c757d} .chat-container {background:var(--gradient-subtle);padding:var(--chat-container-padding);min-height:60vh;height:auto;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;scroll-behavior:smooth;gap:var(--spacing-lg);border-radius:var(--chat-input-radius);position:relative;box-shadow:var(--shadow-purple-glow);border:1px solid var(--border-purple-light);scrollbar-width:thin;scrollbar-color:var(--purple-accent) transparent;backdrop-filter:var(--glass-blur);contain:layout style;will-change:scroll-position} .chat-container::-webkit-scrollbar {width:8px} .chat-container::-webkit-scrollbar-track {background:transparent} .chat-container::-webkit-scrollbar-thumb {background-color:rgba(111,66,193,0.3);border-radius:4px;transition:background-color 0.3s ease} .chat-container::-webkit-scrollbar-thumb:hover {background-color:rgba(111,66,193,0.5)} .chat-message {animation:slideInFromTop 0.4s ease-out;opacity:1;animation-fill-mode:forwards} @keyframes slideInFromTop {0% {opacity:0;transform:translateY(-20px) scale(0.95)} 60% {opacity:0.8;transform:translateY(2px) scale(1.02)} 100% {opacity:1;transform:translateY(0) scale(1)} } @keyframes purplePulse {0% {box-shadow:0 0 0 0 rgba(111,66,193,0.4)} 70% {box-shadow:0 0 0 10px rgba(111,66,193,0)} 100% {box-shadow:0 0 0 0 rgba(111,66,193,0)} } .sidebar-column {width:100%} .welcome-message {background:linear-gradient(135deg,#e3f2fd 0%,#f3e5f5 100%);border-radius:16px;padding:2rem;border:none;box-shadow:0 4px 16px rgba(111,66,193,0.1)} .welcome-title {color:var(--purple-dark);font-size:1.5rem;font-weight:600;margin-bottom:1rem} .welcome-text {color:#333;font-size:1.1rem;line-height:1.6;margin-bottom:1.5rem} .feature-highlights {display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin-bottom:1.5rem} .feature-item {padding:1rem;background:rgba(255,255,255,0.6);border-radius:8px;border-left:4px solid var(--purple)} .feature-item strong {color:var(--purple-dark);font-size:1rem} .feature-item small {color:#666;font-size:0.9rem;line-height:1.4} .getting-started {margin:0;color:#333;font-size:1rem} .getting-started strong {color:var(--purple-dark)} /*-------------------------------------------------------------- CONSOLIDATED Chat Interface - Single Clean Definition --------------------------------------------------------------*/ .input-btn.prompts-btn {background:linear-gradient(135deg,#fff3e0 0%,#ffe0b2 100%);color:#ff9800;border-color:rgba(255,152,0,0.3)} .input-btn.prompts-btn:hover {background:linear-gradient(135deg,#ffe0b2 0%,#ffcc02 100%);color:#f57c00;border-color:#ff9800} .input-btn.prompts-btn.active {background:linear-gradient(135deg,#ff9800 0%,#f57c00 100%);color:white;border-color:#f57c00;box-shadow:0 2px 8px rgba(255,152,0,0.3)} .prompt-drawer {background:white;border-top:1px solid rgba(111,66,193,0.2);border-radius:0 0 12px 12px;height:0;overflow:hidden;transition:all 0.3s ease;opacity:0} .prompt-drawer.open {height:auto;opacity:1;border-top:1px solid rgba(111,66,193,0.3);box-shadow:inset 0 3px 6px rgba(111,66,193,0.05)} .drawer-header {padding:1rem 1.5rem 0.5rem;border-bottom:1px solid rgba(111,66,193,0.1)} .drawer-title {color:var(--purple-dark);font-size:1.2rem;font-weight:600;margin:0 0 0.5rem 0} .drawer-subtitle {color:#6c757d;font-size:0.9rem;margin:0} .drawer-content {padding:0.5rem 0;height:auto;overflow-y:auto} .prompt-list {list-style:none;margin:0;padding:0} .prompt-item {display:flex;align-items:center;padding:0.75rem 1.5rem;cursor:pointer;transition:all 0.3s ease;border-left:4px solid transparent;font-size:0.95rem} .prompt-item:hover {background:linear-gradient(90deg,#f8f4ff 0%,#f0ebff 100%);border-left:4px solid var(--purple);transform:translateX(4px);box-shadow:0 2px 8px rgba(111,66,193,0.1)} .prompt-item:focus {background:linear-gradient(90deg,#f8f4ff 0%,#f0ebff 100%);border-left:4px solid var(--purple);outline:2px solid var(--purple);outline-offset:-2px} .prompt-item:active {transform:translateX(2px);box-shadow:0 1px 4px rgba(111,66,193,0.2)} .prompt-item i {flex-shrink:0;margin-right:0.75rem} .prompt-item span {flex:1;line-height:1.4} .drawer-emergency {margin-top:1rem;padding:1rem 1.5rem;background:linear-gradient(135deg,#fff5f5 0%,#fef5e7 100%);border-top:1px solid rgba(220,53,69,0.1)} .emergency-title {color:#dc3545;font-size:1rem;font-weight:600;margin:0 0 0.75rem 0} .emergency-desc {font-size:0.875rem;color:#6c757d;margin:0.5rem 0 0 0;line-height:1.4} @media (max-width:768px) {.prompt-drawer.open {height:auto} .prompt-item {padding:0.75rem 1rem;font-size:0.9rem} .drawer-header {padding:1rem} } .input-section.scrolling-focus {box-shadow:0 0 20px rgba(111,66,193,0.3);transform:scale(1.01);transition:all 0.4s ease} .input-section {transition:all 0.4s ease} @keyframes focusPulse {0% {box-shadow:0 0 0 rgba(111,66,193,0.4)} 50% {box-shadow:0 0 15px rgba(111,66,193,0.6)} 100% {box-shadow:0 0 0 rgba(111,66,193,0.4)} } .input-section.auto-focused {animation:focusPulse 1.5s ease-in-out} /* ======================================== QUICK QUESTIONS SECTION ======================================== */ .quick-questions-section {margin:1.5rem 0;padding:1.25rem;background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px} .question-prompt {font-size:0.9rem;color:#6c757d;margin-bottom:1rem} .question-prompt i {color:#ffc107} .question-buttons {display:flex;flex-wrap:wrap;gap:0.75rem} .quick-question-btn {background:#ffffff;border:1px solid #dee2e6;border-radius:20px;color:#495057;cursor:pointer;font-size:0.875rem;padding:0.5rem 1rem;transition:all 0.2s ease;white-space:nowrap} .quick-question-btn:hover {background:#e7f3ff;border-color:#007bff;color:#007bff;transform:translateY(-1px)} .quick-question-btn:active {transform:translateY(0)} .quick-question-btn:focus {outline:none;box-shadow:0 0 0 2px rgba(0,123,255,0.25)} @media (max-width:768px) {.question-buttons {gap:0.5rem} .quick-question-btn {font-size:0.875rem;padding:0.4rem 0.8rem} } .chat-started .quick-questions-section {display:none} .blockpuzzle-modal {border:none;border-radius:20px;max-width:min(480px,95vw);height:auto;padding:0;margin:auto;background:linear-gradient(145deg,#ffffff 0%,#f8f9fa 100%);border:4px solid var(--purple);box-shadow:0 20px 40px rgba(111,66,193,0.3),0 8px 16px rgba(0,0,0,0.1);overflow:hidden} .blockpuzzle-modal::backdrop {background:rgba(0,0,0,0.6);backdrop-filter:blur(4px)} .blockpuzzle-container {position:relative;padding:1rem;width:100%;height:100%;display:flex;flex-direction:column;overflow-y:auto;height:auto} .blockpuzzle-close {position:absolute;top:0.75rem;right:0.75rem;width:36px;height:36px;border:none;border-radius:50%;background:rgba(255,255,255,0.9);color:var(--purple);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:1000;transition:all 0.2s ease;box-shadow:0 2px 8px rgba(0,0,0,0.1)} .blockpuzzle-close:hover,.blockpuzzle-close:focus {background:var(--purple);color:white;transform:scale(1.1);outline:2px solid var(--purple-light);outline-offset:2px} .blockpuzzle-ai-status {display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;padding:1rem 1.5rem;background:linear-gradient(135deg,var(--purple) 0%,var(--purple-dark) 100%);border-radius:16px;color:white;box-shadow:0 4px 12px rgba(111,66,193,0.25)} .ai-spinner {display:flex;align-items:center;justify-content:center} .spinner-dots {display:flex;gap:6px} .spinner-dots .dot {width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,0.8);animation:dotPulse 1.5s ease-in-out infinite;animation-delay:var(--delay)} @keyframes dotPulse {0%,80%,100% {transform:scale(0.6);opacity:0.6} 40% {transform:scale(1.2);opacity:1} } .ai-status-text h3 {margin:0 0 0.25rem 0;font-size:1.125rem;font-weight:600} .ai-status-text p {margin:0;font-size:0.875rem;opacity:0.9} .blockpuzzle-header {text-align:center;margin-bottom:1.5rem} .game-title {margin:0 0 0.5rem 0;font-size:1.25rem;font-weight:700;color:var(--purple);display:flex;align-items:center;justify-content:center;gap:0.5rem} .game-instructions {margin:0;font-size:0.875rem;color:var(--text-muted)} .desktop-only {display:block} .mobile-only {display:none} .blockpuzzle-game-layout {display:grid;grid-template-columns:1fr auto 80px;grid-template-rows:auto 1fr;grid-template-areas:"stats stats stats" "board board next";gap:1rem;flex:1;min-height:0} .game-stats {grid-area:stats;display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:0.75rem} .stat-item {background:white;border:2px solid var(--purple-light);border-radius:12px;padding:0.75rem 0.5rem;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,0.05)} .stat-item label {display:block;font-size:0.75rem;font-weight:600;color:var(--purple);margin-bottom:0.25rem;text-transform:uppercase;letter-spacing:0.5px} .stat-item span {display:block;font-size:1.25rem;font-weight:700;color:var(--text-dark)} .high-score-item {background:linear-gradient(135deg,var(--purple-light) 0%,var(--purple) 100%);color:white} .high-score-item label,.high-score-item span {color:white} .game-board-container {grid-area:board;position:relative;display:flex;justify-content:center;align-items:flex-start;background:#1a1a1a;border:3px solid var(--purple);border-radius:12px;padding:0.5rem;box-shadow:inset 0 0 20px rgba(0,0,0,0.3),0 4px 12px rgba(111,66,193,0.2)} .game-canvas {display:block;background:#000;border-radius:8px;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;max-width:100%;height:auto} .game-overlay {position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;border-radius:12px;z-index:10} .overlay-content {background:white;padding:2rem;border-radius:16px;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,0.3);border:2px solid var(--purple)} .overlay-content h5 {margin:0 0 1rem 0;color:var(--purple);font-size:1.5rem;font-weight:700} .overlay-content p {margin:0 0 1.5rem 0;color:var(--text-dark)} .btn-reset {background:linear-gradient(135deg,var(--purple) 0%,var(--purple-dark) 100%);color:white;border:none;padding:0.75rem 1.5rem;border-radius:8px;font-weight:600;cursor:pointer;transition:all 0.2s ease} .btn-reset:hover {transform:translateY(-2px);box-shadow:0 4px 12px rgba(111,66,193,0.3)} .next-piece-container {grid-area:next;background:white;border:2px solid var(--purple-light);border-radius:12px;padding:0.75rem;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,0.05);height:fit-content} .next-piece-container h6 {margin:0 0 0.5rem 0;font-size:0.875rem;font-weight:600;color:var(--purple);text-transform:uppercase;letter-spacing:0.5px} .next-canvas {display:block;background:#f8f9fa;border:1px solid #dee2e6;border-radius:6px;width:100%;height:auto;image-rendering:pixelated} .touch-controls {display:none;flex-direction:column;gap:0.75rem;margin-top:1.5rem} .control-row {display:flex;justify-content:center;gap:0.75rem} .control-btn {min-width:60px;min-height:60px;border:2px solid var(--purple-light);border-radius:12px;background:linear-gradient(135deg,white 0%,#f8f9fa 100%);color:var(--purple);font-size:1.25rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.15s ease;box-shadow:0 2px 8px rgba(0,0,0,0.1);user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent} .control-btn:active {transform:scale(0.95);background:linear-gradient(135deg,var(--purple) 0%,var(--purple-dark) 100%);color:white;box-shadow:0 1px 4px rgba(0,0,0,0.2)} .control-btn:hover:not(:active) {border-color:var(--purple);box-shadow:0 4px 12px rgba(111,66,193,0.2)} .game-controls {display:flex;justify-content:flex-end;gap:1rem;margin-top:1.5rem;padding-top:1rem;border-top:1px solid #dee2e6} .game-control-btn {display:flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;border:1px solid var(--purple-light);border-radius:8px;background:white;color:var(--purple);cursor:pointer;font-size:0.875rem;font-weight:500;transition:all 0.2s ease} .game-control-btn:hover {background:var(--purple-light);color:white;transform:translateY(-1px)} @media (max-width:768px) {.blockpuzzle-modal {max-width:95vw;height:auto;border-radius:16px} .blockpuzzle-container {padding:0.75rem} .blockpuzzle-game-layout {grid-template-columns:1fr 60px;grid-template-areas:"stats stats" "board next";gap:0.75rem} .game-stats {grid-template-columns:repeat(4,1fr);gap:0.5rem} .stat-item {padding:0.5rem 0.25rem} .stat-item label {font-size:0.625rem} .stat-item span {font-size:1rem} .next-piece-container {padding:0.5rem} .next-canvas {width:60px;height:60px} .touch-controls {display:flex} .desktop-only {display:none} .mobile-only {display:block} } @media (max-width:480px) {.blockpuzzle-modal {max-width:98vw;height:auto;border-radius:12px;border-width:2px} .blockpuzzle-container {padding:0.5rem} .blockpuzzle-ai-status {padding:0.75rem 1rem;margin-bottom:1rem;border-radius:12px;flex-direction:column;gap:0.75rem;text-align:center} .ai-status-text h3 {font-size:1rem} .ai-status-text p {font-size:0.8125rem} .blockpuzzle-game-layout {grid-template-columns:1fr;grid-template-areas:"stats" "board" "next";gap:1rem} .game-stats {grid-template-columns:repeat(4,1fr);gap:0.5rem} .next-piece-container {align-self:center;justify-self:center;width:fit-content} .control-btn {min-width:55px;min-height:55px;font-size:1.125rem} .game-controls {flex-wrap:wrap;gap:0.75rem} .game-control-btn {flex:1;justify-content:center;min-width:0} } @media (orientation:landscape) and (max-height:600px) {.blockpuzzle-modal {height:auto} .blockpuzzle-container {height:auto} .blockpuzzle-game-layout {grid-template-columns:auto 1fr 80px;grid-template-areas:"stats stats next" "board board next"} .blockpuzzle-ai-status {flex-direction:row;margin-bottom:0.75rem} .touch-controls {margin-top:1rem} .game-controls {margin-top:1rem;padding-top:0.75rem} } @media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi) {.game-canvas,.next-canvas {image-rendering:-webkit-optimize-contrast;image-rendering:pixelated} } .blockpuzzle-modal button:focus,.control-btn:focus {outline:3px solid var(--purple);outline-offset:2px} @media (prefers-reduced-motion:reduce) {.spinner-dots .dot {animation:none} .control-btn:active,.btn-reset:hover,.game-control-btn:hover {transform:none} .blockpuzzle-close:hover {transform:none} } @media (prefers-contrast:high) {.blockpuzzle-modal {border-width:4px} .game-board-container {border-width:4px} .control-btn,.stat-item {border-width:3px} } @media (prefers-color-scheme:dark) {.blockpuzzle-modal {background:linear-gradient(145deg,#2d2d2d 0%,#1a1a1a 100%)} .stat-item {background:#333;border-color:var(--purple-light);color:white} .next-piece-container {background:#333;color:white} .overlay-content {background:#2d2d2d;color:white} } .control-btn.haptic-feedback {animation:hapticPulse 0.1s ease-out} @keyframes hapticPulse {0% {transform:scale(0.95)} 50% {transform:scale(1.05)} 100% {transform:scale(1)} } .game-canvas,.next-canvas {max-width:100%;height:auto;display:block} body.blockpuzzle-active {overflow:hidden;position:fixed;width:100%}  .loading-text::after{content:\"\";animation:none!important} @keyframes loading-dots{0%,100%{content:\"\"}} html body .chat-message.bot.typing-indicator .thinking-dots span:nth-child(9){animation-delay:0.8s!important}


/* wcag-accessibility.css */

/* ========================================
   WCAG 2.1 AA Compliance CSS Enhancements
   For GuideAI Special Education Support System
   ======================================== */

/* CSS Variables for Accessibility */
:root {
  /* WCAG AA Color Contrast Ratios */
  --wcag-text-primary: #212529;        /* 4.5:1 on white */
  --wcag-text-secondary: #495057;      /* 4.5:1 on white */
  --wcag-text-muted: #5a5a5a;         /* 4.5:1 on white */
  --wcag-bg-primary: #ffffff;
  --wcag-bg-secondary: #f8f9fa;
  
  /* Focus Colors */
  --wcag-focus-color: #005fcc;
  --wcag-focus-shadow: rgba(0, 95, 204, 0.3);
  --wcag-focus-width: 3px;
  
  /* Error/Success Colors */
  --wcag-error: #d32f2f;              /* 4.5:1 on white */
  --wcag-success: #2e7d32;            /* 4.5:1 on white */
  --wcag-warning: #f57c00;            /* 4.5:1 on white */
  
  /* High Contrast Colors */
  --hc-bg: #ffffff;
  --hc-text: #000000;
  --hc-link: #0000ee;
  --hc-visited: #551a8b;
  --hc-border: #000000;
  
  /* Font Sizes for Scaling */
  --font-size-sm: clamp(0.875rem, 2vw, 1rem);
  --font-size-base: clamp(1rem, 2.5vw, 1.125rem);
  --font-size-lg: clamp(1.125rem, 3vw, 1.25rem);
  --font-size-xl: clamp(1.25rem, 3.5vw, 1.5rem);
  
  /* Touch Target Sizes */
  --touch-target-min: 44px;
  --focus-offset: 2px;
}

/* ========================================
   WCAG 1.4.3 - Color Contrast (AA)
   Minimum 4.5:1 for normal text
   ======================================== */

/* Override Bootstrap's potentially low-contrast colors */
.text-muted {
  color: var(--wcag-text-muted) !important;
}

.text-secondary {
  color: var(--wcag-text-secondary) !important;
}

/* Ensure links are distinguishable from surrounding text */
a:not(.btn):not(.navbar-brand):not(.nav-link):not(.text-white) {
  color: #0066cc !important; /* 4.59:1 contrast on white */
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 2px !important;
}

/* Preserve navigation and footer link colors */
.navbar-brand,
.nav-link,
.text-white,
footer a,
.nav-guideai a,
.bg-purple a {
  color: white !important;
}

a:not(.btn):not(.navbar-brand):not(.nav-link):not(.text-white):hover,
a:not(.btn):not(.navbar-brand):not(.nav-link):not(.text-white):focus {
  color: #004499 !important; /* Higher contrast on hover/focus */
  text-decoration-thickness: 3px !important;
  background-color: rgba(0, 102, 204, 0.1) !important;
  padding: 2px 4px !important;
  border-radius: 4px !important;
}

/* Preserve navigation and footer link hover states */
.navbar-brand:hover,
.nav-link:hover,
.text-white:hover,
footer a:hover,
.nav-guideai a:hover,
.bg-purple a:hover {
  color: rgba(255, 255, 255, 0.8) !important;
  text-decoration: none !important;
}

a:visited:not(.btn):not(.navbar-brand):not(.nav-link):not(.text-white) {
  color: #663399 !important; /* 4.5:1 contrast for visited links */
}

/* Preserve navigation and footer visited link states */
.navbar-brand:visited,
.nav-link:visited,
.text-white:visited,
footer a:visited,
.nav-guideai a:visited,
.bg-purple a:visited {
  color: white !important;
}

/* ========================================
   WCAG 2.4.7 - Focus Visible (AA)
   Visible focus indicators for all elements
   ======================================== */

/* Remove default browser focus, add custom accessible focus */
*:focus {
  outline: none !important;
}

/* Enhanced focus indicators for better visibility */
button:focus,
.btn:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="reset"]:focus {
  outline: var(--wcag-focus-width) solid var(--wcag-focus-color) !important;
  outline-offset: var(--focus-offset) !important;
  box-shadow: 0 0 0 5px var(--wcag-focus-shadow) !important;
  transform: scale(1.02) !important;
  transition: all 0.2s ease !important;
}

/* Form controls focus */
input:focus,
textarea:focus,
select:focus {
  outline: var(--wcag-focus-width) solid var(--wcag-focus-color) !important;
  outline-offset: 1px !important;
  box-shadow: 0 0 0 3px var(--wcag-focus-shadow) !important;
  border-color: var(--wcag-focus-color) !important;
  transition: all 0.2s ease !important;
}

/* Link focus indicators */
a:focus {
  outline: var(--wcag-focus-width) solid var(--wcag-focus-color) !important;
  outline-offset: var(--focus-offset) !important;
  background-color: rgba(0, 95, 204, 0.1) !important;
  text-decoration: none !important;
  border-radius: 4px !important;
  padding: 2px 4px !important;
  transition: all 0.2s ease !important;
}

/* Interactive elements focus */
[role="button"]:focus,
[tabindex]:focus {
  outline: var(--wcag-focus-width) solid var(--wcag-focus-color) !important;
  outline-offset: var(--focus-offset) !important;
  box-shadow: 0 0 0 5px var(--wcag-focus-shadow) !important;
}

/* ========================================
   WCAG 1.4.4 - Resize Text (AA)
   Text must be resizable up to 200%
   ======================================== */

html {
  font-size: 16px; /* Base font size */
}

/* Scalable text sizes */
body {
  font-size: var(--font-size-base);
  line-height: 1.5 !important; /* WCAG recommendation */
}

.h1, h1 { font-size: calc(var(--font-size-base) * 2.5); }
.h2, h2 { font-size: calc(var(--font-size-base) * 2); }
.h3, h3 { font-size: calc(var(--font-size-base) * 1.75); }
.h4, h4 { font-size: calc(var(--font-size-base) * 1.5); }
.h5, h5 { font-size: calc(var(--font-size-base) * 1.25); }
.h6, h6 { font-size: calc(var(--font-size-base) * 1.1); }

/* Small text should still be readable */
small, .small {
  font-size: max(var(--font-size-sm), 14px);
}

/* ========================================
   WCAG 2.5.5 - Target Size (AA)
   Touch targets minimum 44x44 pixels
   ======================================== */

button,
.btn,
a,
input,
select,
textarea,
[role="button"],
[tabindex]:not([tabindex="-1"]) {
  min-height: var(--touch-target-min) !important;
  min-width: var(--touch-target-min) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 8px 16px !important;
  touch-action: manipulation !important;
}

/* Exception for inline text links */
a:not(.btn):not([role="button"]) {
  min-height: auto !important;
  min-width: auto !important;
  display: inline !important;
  padding: 2px 4px !important;
}

/* Small buttons get extra padding to meet size requirements */
.btn-sm {
  padding: 12px 20px !important;
}

/* ========================================
   WCAG 1.4.10 - Reflow (AA)
   Content reflows without horizontal scrolling
   ======================================== */

/* Prevent horizontal scrolling */
body {
  overflow-x: hidden !important;
}

* {
  box-sizing: border-box !important;
}

/* Responsive images and media */
img,
video,
iframe,
embed,
object {
  max-width: 100% !important;
  height: auto !important;
}

/* Responsive tables */
table {
  width: 100% !important;
  table-layout: auto !important;
}

@media (max-width: 576px) {
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block !important;
  }
  
  th,
  td {
    border: none !important;
    border-bottom: 1px solid #ddd !important;
    padding: 8px !important;
  }
  
  th {
    background-color: #f8f9fa !important;
    font-weight: bold !important;
  }
}

/* Code blocks wrap */
pre,
code {
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* ========================================
   WCAG 1.4.12 - Text Spacing (AA)
   Text spacing requirements
   ======================================== */

/* Paragraph spacing */
p {
  margin-bottom: 1em !important;
  line-height: 1.5 !important;
}

/* Letter spacing for readability */
body {
  letter-spacing: 0.05em !important;
}

/* Word spacing */
body {
  word-spacing: 0.1em !important;
}

/* Heading spacing */
h1, h2, h3, h4, h5, h6 {
  margin-top: 1.5em !important;
  margin-bottom: 0.75em !important;
  line-height: 1.3 !important;
}

/* ========================================
   WCAG 2.4.1 - Bypass Blocks (AA)
   Skip navigation links
   ======================================== */

.skip-link {
  position: absolute !important;
  top: -40px !important;
  left: 6px !important;
  z-index: 99999 !important;
  color: white !important;
  background: #000 !important;
  padding: 12px 16px !important;
  text-decoration: none !important;
  border-radius: 0 0 4px 4px !important;
  font-weight: bold !important;
  font-size: 1rem !important;
  transition: top 0.3s ease !important;
  min-height: var(--touch-target-min) !important;
}

.skip-link:focus {
  top: 0 !important;
  color: white !important;
  text-decoration: none !important;
  outline: 3px solid #ffff00 !important;
  outline-offset: 2px !important;
}

/* ========================================
   WCAG 1.3.1 - Screen Reader Support
   Hidden content for screen readers only
   ======================================== */

.sr-only,
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Focusable sr-only elements */
.sr-only:focus,
.visually-hidden:focus {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: inherit !important;
  margin: inherit !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

/* ========================================
   WCAG 3.3.1 - Error Identification (AA)
   Error messages and validation
   ======================================== */

.invalid-feedback,
.error-message,
.form-error {
  color: var(--wcag-error) !important;
  font-size: 0.875rem !important;
  margin-top: 0.25rem !important;
  display: block !important;
  font-weight: 500 !important;
}

.is-invalid,
.form-control.error,
input:invalid {
  border-color: var(--wcag-error) !important;
  box-shadow: 0 0 0 0.2rem rgba(211, 47, 47, 0.25) !important;
}

.valid-feedback,
.success-message {
  color: var(--wcag-success) !important;
  font-size: 0.875rem !important;
  margin-top: 0.25rem !important;
  display: block !important;
  font-weight: 500 !important;
}

/* Required field indicators */
.required::after,
[required] + label::after {
  content: " *" !important;
  color: var(--wcag-error) !important;
  font-weight: bold !important;
}

/* ========================================
   High Contrast Mode Support
   ======================================== */

/* Windows High Contrast Mode */
@media (prefers-contrast: high) {
  * {
    background-color: var(--hc-bg) !important;
    color: var(--hc-text) !important;
    border-color: var(--hc-border) !important;
  }
  
  a:not(.btn) {
    color: var(--hc-link) !important;
  }
  
  a:visited:not(.btn) {
    color: var(--hc-visited) !important;
  }
  
  button,
  .btn,
  input,
  select,
  textarea {
    border: 2px solid var(--hc-border) !important;
    background-color: var(--hc-bg) !important;
    color: var(--hc-text) !important;
  }
  
  /* Ensure focus is visible in high contrast */
  *:focus {
    outline: 3px solid var(--hc-text) !important;
    outline-offset: 2px !important;
  }
}

/* Forced Colors Mode (Windows) */
@media (forced-colors: active) {
  * {
    forced-color-adjust: auto !important;
  }
  
  /* Maintain custom focus indicators */
  *:focus {
    outline: 3px solid Highlight !important;
    outline-offset: 2px !important;
  }
}

/* ========================================
   Reduced Motion Support (WCAG 2.3.3)
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  /* Remove parallax and auto-playing animations */
  .parallax,
  [data-parallax] {
    transform: none !important;
  }
  
  .autoplay {
    animation-play-state: paused !important;
  }
}

/* ========================================
   Large Fonts Accessibility Feature
   ======================================== */

body.large-fonts {
  font-size: 1.25rem !important;
}

body.large-fonts .h1, 
body.large-fonts h1 { font-size: 3.125rem !important; }
body.large-fonts .h2, 
body.large-fonts h2 { font-size: 2.5rem !important; }
body.large-fonts .h3, 
body.large-fonts h3 { font-size: 2.1875rem !important; }
body.large-fonts .h4, 
body.large-fonts h4 { font-size: 1.875rem !important; }
body.large-fonts .h5, 
body.large-fonts h5 { font-size: 1.5625rem !important; }
body.large-fonts .h6, 
body.large-fonts h6 { font-size: 1.375rem !important; }

body.large-fonts small,
body.large-fonts .small {
  font-size: 1.125rem !important;
}

body.large-fonts button,
body.large-fonts .btn,
body.large-fonts input,
body.large-fonts select,
body.large-fonts textarea {
  font-size: 1.25rem !important;
  padding: 12px 20px !important;
}

/* ========================================
   High Contrast Accessibility Feature
   ======================================== */

body.high-contrast {
  background-color: #000000 !important;
  color: #ffffff !important;
}

body.high-contrast * {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

body.high-contrast .bg-primary,
body.high-contrast .btn-primary {
  background-color: #0000ff !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

body.high-contrast .bg-secondary,
body.high-contrast .btn-secondary {
  background-color: #666666 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

body.high-contrast a:not(.btn) {
  color: #00ff00 !important;
  text-decoration: underline !important;
}

body.high-contrast a:visited:not(.btn) {
  color: #ff00ff !important;
}

body.high-contrast input,
body.high-contrast textarea,
body.high-contrast select {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #ffffff !important;
}

body.high-contrast button,
body.high-contrast .btn {
  border: 2px solid #ffffff !important;
}

body.high-contrast .card,
body.high-contrast .modal,
body.high-contrast .drawer {
  border: 2px solid #ffffff !important;
}

/* ========================================
   Dyslexia-Friendly Font Feature
   ======================================== */

body.dyslexia-friendly,
body.dyslexia-friendly * {
  font-family: "Comic Sans MS", "OpenDyslexic", "Arial", sans-serif !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.1em !important;
  word-spacing: 0.2em !important;
}

body.dyslexia-friendly p,
body.dyslexia-friendly li {
  margin-bottom: 1.2em !important;
}

/* ========================================
   Print Styles for Accessibility
   ======================================== */

@media print {
  /* Ensure good contrast for printing */
  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  /* Show URL after links */
  a[href]:after {
    content: " (" attr(href) ")" !important;
  }
  
  /* Don't show URLs for fragment identifiers or javascript */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "" !important;
  }
  
  /* Avoid page breaks inside important elements */
  blockquote,
  pre,
  img,
  .chat-message {
    page-break-inside: avoid !important;
  }
  
  /* Ensure adequate margins */
  @page {
    margin: 1in !important;
  }
  
  /* Hide interactive elements that don't make sense when printed */
  button,
  .btn,
  .accessibility-drawer,
  .skip-link,
  nav {
    display: none !important;
  }
}

/* ========================================
   Mobile Accessibility Improvements
   ======================================== */

@media (max-width: 768px) {
  /* Larger touch targets on mobile */
  button,
  .btn,
  a[role="button"],
  input[type="button"],
  input[type="submit"] {
    min-height: 48px !important;
    min-width: 48px !important;
    padding: 12px 16px !important;
  }
  
  /* Better spacing for mobile */
  .form-group,
  .mb-3 {
    margin-bottom: 1.5rem !important;
  }
  
  /* Ensure text is readable on mobile */
  body {
    font-size: max(16px, var(--font-size-base)) !important;
  }
  
  /* Prevent zoom on form inputs */
  input,
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ========================================
   Keyboard Navigation Enhancements
   ======================================== */

/* Improve table keyboard navigation */
table {
  border-collapse: collapse !important;
}

th[tabindex],
td[tabindex] {
  position: relative !important;
}

th[tabindex]:focus,
td[tabindex]:focus {
  outline: var(--wcag-focus-width) solid var(--wcag-focus-color) !important;
  outline-offset: -2px !important;
  background-color: rgba(0, 95, 204, 0.1) !important;
}

/* Modal and drawer keyboard trap support */
.modal[aria-hidden="false"],
.drawer[aria-hidden="false"],
.accessibility-drawer.open {
  /* Focus should be trapped - handled by JavaScript */
}

/* ========================================
   Loading and Animation Accessibility
   ======================================== */

/* Accessible loading indicators */
.loading-spinner,
.spinner-border {
  width: 2rem !important;
  height: 2rem !important;
  border-width: 0.25em !important;
}

/* Reduce motion for loading animations when requested */
@media (prefers-reduced-motion: reduce) {
  .loading-spinner,
  .spinner-border,
  .fa-spin {
    animation: none !important;
  }
  
  .loading-spinner::after {
    content: "Loading..." !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 0.875rem !important;
    color: currentColor !important;
  }
}

/* ========================================
   Accessibility Utilities
   ======================================== */

/* Focus within - keep focus visible when child elements are focused */
.focus-within:focus-within {
  outline: var(--wcag-focus-width) solid var(--wcag-focus-color) !important;
  outline-offset: var(--focus-offset) !important;
}

/* Accessible hiding (can still be focused) */
.accessible-hide {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.accessible-hide:focus {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
}

/* High visibility focus for critical elements */
.focus-high-visibility:focus {
  outline: 5px solid #ffff00 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 8px rgba(255, 255, 0, 0.5) !important;
  background-color: #ffff00 !important;
  color: #000000 !important;
  z-index: 9999 !important;
  position: relative !important;
}

/* Accessible disabled state */
[disabled],
[aria-disabled="true"] {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ========================================
   Emergency Accessibility Reset
   Use this class to quickly reset all custom styles
   ======================================== */

.accessibility-reset * {
  all: revert !important;
  font-family: system-ui, -apple-system, sans-serif !important;
  line-height: 1.5 !important;
  color: #000000 !important;
  background-color: #ffffff !important;
}

.accessibility-reset button,
.accessibility-reset .btn,
.accessibility-reset input,
.accessibility-reset textarea,
.accessibility-reset select {
  padding: 8px 16px !important;
  border: 2px solid #000000 !important;
  background-color: #ffffff !important;
  color: #000000 !important;
  font-size: 1rem !important;
}

.accessibility-reset a {
  color: #0000ee !important;
  text-decoration: underline !important;
}

.accessibility-reset a:visited {
  color: #551a8b !important;
}

.accessibility-reset *:focus {
  outline: 3px solid #000000 !important;
  outline-offset: 2px !important;
}