:root{--color-primary: #360185;--color-secondary: #8F0177;--color-accent: #DE1A58;--color-highlight: #F4B342;--gradient-primary: linear-gradient(135deg, #360185 0%, #8F0177 100%);--gradient-accent: linear-gradient(135deg, #8F0177 0%, #DE1A58 100%);--gradient-warm: linear-gradient(135deg, #DE1A58 0%, #F4B342 100%);--color-white: #FFFFFF;--color-light: #F8F9FA;--color-gray: #6C757D;--color-dark: #1A1A2E;--color-black: #0D0D1A;--shadow-sm: 0 2px 8px rgba(54, 1, 133, .1);--shadow-md: 0 4px 20px rgba(54, 1, 133, .15);--shadow-lg: 0 8px 40px rgba(54, 1, 133, .2);--shadow-glow: 0 0 30px rgba(143, 1, 119, .3);--transition-fast: .2s ease;--transition-normal: .3s ease;--transition-slow: .5s ease;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 20px;--radius-full: 50px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--color-light);color:var(--color-dark);line-height:1.6;overflow-x:hidden}.demo-portal{min-height:100vh}.hero{background:var(--gradient-primary);color:var(--color-white);padding:80px 20px 120px;text-align:center;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(143,1,119,.3) 0%,transparent 50%);animation:pulse 15s infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:.5}50%{transform:scale(1.1);opacity:.8}}.hero-content{position:relative;z-index:1;max-width:900px;margin:0 auto}.hero-logo{font-size:1.2rem;font-weight:600;margin-bottom:40px;display:flex;align-items:center;justify-content:center;gap:10px}.hero-logo span{background:var(--gradient-warm);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero h1{font-size:clamp(2.5rem,6vw,4rem);font-weight:800;margin-bottom:20px;line-height:1.1}.hero h1 .highlight{background:var(--gradient-warm);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero p{font-size:1.25rem;opacity:.9;max-width:600px;margin:0 auto 40px}.hero-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}.btn{padding:14px 32px;border-radius:var(--radius-full);font-size:1rem;font-weight:600;cursor:pointer;transition:all var(--transition-normal);border:none;text-decoration:none;display:inline-flex;align-items:center;gap:8px}.btn-primary{background:var(--gradient-warm);color:var(--color-white);box-shadow:var(--shadow-md)}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-secondary{background:#ffffff1a;color:var(--color-white);border:2px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.btn-secondary:hover{background:#fff3;border-color:#ffffff80}.features{padding:80px 20px;max-width:1200px;margin:0 auto}.section-title{text-align:center;margin-bottom:60px}.section-title h2{font-size:2.5rem;color:var(--color-primary);margin-bottom:16px}.section-title p{color:var(--color-gray);font-size:1.1rem;max-width:600px;margin:0 auto}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px}.feature-card{background:var(--color-white);padding:40px 30px;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:all var(--transition-normal);text-align:center}.feature-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}.feature-icon{width:70px;height:70px;background:var(--gradient-primary);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto 20px}.feature-card h3{color:var(--color-primary);margin-bottom:12px;font-size:1.3rem}.feature-card p{color:var(--color-gray);font-size:.95rem}.stats{background:var(--gradient-accent);padding:60px 20px;color:var(--color-white)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px;max-width:1000px;margin:0 auto;text-align:center}.stat-item h3{font-size:3rem;font-weight:800;color:var(--color-highlight)}.stat-item p{font-size:1.1rem;opacity:.9}.footer{background:var(--color-dark);color:var(--color-white);padding:40px 20px;text-align:center}.footer p{opacity:.7;font-size:.9rem}.chat-widget{position:fixed;bottom:24px;right:24px;z-index:1000}.chat-widget-button{width:60px;height:60px;border-radius:50%;background:var(--gradient-warm);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:var(--color-white);box-shadow:var(--shadow-lg),var(--shadow-glow);transition:all var(--transition-normal)}.chat-widget-button:hover{transform:scale(1.1)}.chat-widget-button.active{transform:rotate(90deg)}.chat-widget-expanded{position:absolute;bottom:80px;right:0;width:380px;max-height:500px;background:var(--color-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;transform-origin:bottom right;animation:slideUp .3s ease forwards}@keyframes slideUp{0%{opacity:0;transform:scale(.8) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.chat-widget-header{background:var(--gradient-primary);color:var(--color-white);padding:20px;text-align:center}.chat-widget-header h3{font-size:1.2rem;margin-bottom:4px}.chat-widget-header p{opacity:.8;font-size:.9rem}.chat-widget-body{padding:30px 25px}.widget-login-form{display:flex;flex-direction:column;gap:16px}.widget-input{padding:14px 16px;border:2px solid #E5E7EB;border-radius:var(--radius-sm);font-size:1rem;transition:border-color var(--transition-fast)}.widget-input:focus{outline:none;border-color:var(--color-secondary)}.widget-input::placeholder{color:#9ca3af}.widget-login-btn{padding:14px;background:var(--gradient-warm);color:var(--color-white);border:none;border-radius:var(--radius-sm);font-size:1rem;font-weight:600;cursor:pointer;transition:all var(--transition-normal)}.widget-login-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-md)}.widget-login-btn:disabled{opacity:.6;cursor:not-allowed}.widget-error{color:var(--color-accent);font-size:.9rem;text-align:center;padding:8px;background:#de1a581a;border-radius:var(--radius-sm)}.widget-demo-accounts{margin-top:20px;padding-top:20px;border-top:1px solid #E5E7EB}.widget-demo-accounts p{font-size:.85rem;color:var(--color-gray);text-align:center;margin-bottom:12px}.demo-account-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.demo-chip{padding:6px 14px;background:var(--color-light);border:1px solid #E5E7EB;border-radius:var(--radius-full);font-size:.8rem;color:var(--color-primary);cursor:pointer;transition:all var(--transition-fast)}.demo-chip:hover{background:var(--color-primary);color:var(--color-white);border-color:var(--color-primary)}.chat-page{height:100vh;background:var(--gradient-primary);display:flex;flex-direction:column;overflow:hidden}.chat-page-header{background:#0000004d;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;color:var(--color-white);flex-shrink:0;position:sticky;top:0;z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.chat-page-header h1{font-size:1.3rem;display:flex;align-items:center;gap:10px}.user-info{display:flex;align-items:center;gap:12px}.user-avatar{width:40px;height:40px;background:var(--gradient-warm);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600}.user-details{text-align:right}.user-name{font-weight:600}.user-role{font-size:.85rem;opacity:.8;text-transform:capitalize}.logout-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:var(--color-white);padding:8px 16px;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast)}.logout-btn:hover{background:#fff3}.chat-main-container{flex:1;display:flex;overflow:hidden;min-height:0}.suggestions-sidebar{width:280px;background:#00000026;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.1);flex-shrink:0;overflow-y:auto}.sidebar-header{padding:20px;border-bottom:1px solid rgba(255,255,255,.1);position:sticky;top:0;background:#0003;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:10}.sidebar-header h3{color:var(--color-white);font-size:1rem;font-weight:600}.category-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.1);position:sticky;top:60px;background:#00000026;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:9}.category-tab{padding:6px 12px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-full);color:#ffffffb3;font-size:.75rem;cursor:pointer;transition:all var(--transition-fast)}.category-tab:hover{background:#ffffff26;color:var(--color-white)}.category-tab.active{background:var(--color-highlight);border-color:var(--color-highlight);color:var(--color-white)}.suggestions-list{flex:1;padding:12px;display:flex;flex-direction:column;gap:8px}.suggestion-item{padding:12px 16px;background:#ffffff14;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-sm);color:var(--color-white);font-size:.85rem;text-align:left;cursor:pointer;transition:all var(--transition-fast)}.suggestion-item:hover:not(:disabled){background:#ffffff26;border-color:var(--color-highlight);transform:translate(4px)}.suggestion-item:disabled{opacity:.5;cursor:not-allowed}.chat-page-content{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}.messages-container{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px}.message{display:flex;gap:12px;max-width:85%;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message.user{align-self:flex-end;flex-direction:row-reverse}.message-avatar{width:36px;height:36px;border-radius:50%;background:#fff3;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}.message.user .message-avatar{background:var(--color-highlight)}.message-bubble{background:#fffffff2;padding:14px 18px;border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}.message.user .message-bubble{background:var(--gradient-warm);color:var(--color-white)}.message-content{font-size:.95rem;line-height:1.5}.message-content p{margin-bottom:8px}.message-content p:last-child{margin-bottom:0}.message-content strong{font-weight:600}.message-content li{margin-left:20px;margin-bottom:4px}.message-time{font-size:.75rem;opacity:.6;margin-top:8px}.typing-indicator{display:flex;gap:4px;padding:8px 0}.typing-indicator span{width:8px;height:8px;background:var(--color-secondary);border-radius:50%;animation:bounce 1.4s infinite ease-in-out}.typing-indicator span:nth-child(1){animation-delay:0s}.typing-indicator span:nth-child(2){animation-delay:.2s}.typing-indicator span:nth-child(3){animation-delay:.4s}@keyframes bounce{0%,80%,to{transform:scale(.8);opacity:.5}40%{transform:scale(1.2);opacity:1}}.suggestions{display:flex;flex-wrap:wrap;gap:10px;padding:16px 20px;justify-content:center}.suggestion-chip{padding:10px 18px;background:#ffffff26;border:1px solid rgba(255,255,255,.3);border-radius:var(--radius-full);color:var(--color-white);font-size:.9rem;cursor:pointer;transition:all var(--transition-fast)}.suggestion-chip:hover:not(:disabled){background:#ffffff40;transform:translateY(-2px)}.suggestion-chip:disabled{opacity:.5;cursor:not-allowed}.chat-input-container{padding:20px;background:#0000001a}.chat-input-wrapper{display:flex;gap:12px;max-width:900px;margin:0 auto}.chat-input{flex:1;padding:16px 20px;border:none;border-radius:var(--radius-full);font-size:1rem;resize:none;font-family:inherit;background:var(--color-white);box-shadow:var(--shadow-sm)}.chat-input:focus{outline:none;box-shadow:var(--shadow-md)}.send-btn{width:54px;height:54px;border-radius:50%;background:var(--gradient-warm);border:none;color:var(--color-white);font-size:1.3rem;cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-md)}.send-btn:hover:not(:disabled){transform:scale(1.05)}.send-btn:disabled{opacity:.5;cursor:not-allowed}@media(max-width:1024px){.suggestions-sidebar{width:240px}}@media(max-width:768px){.hero{padding:60px 20px 80px}.hero h1{font-size:2rem}.hero p{font-size:1rem}.features{padding:60px 20px}.section-title h2{font-size:2rem}.chat-widget-expanded{width:calc(100vw - 48px);right:-12px}.message{max-width:95%}.chat-main-container{flex-direction:column-reverse}.suggestions-sidebar{width:100%;height:auto;max-height:200px;border-right:none;border-top:1px solid rgba(255,255,255,.1)}.sidebar-header{display:none}.category-tabs{padding:10px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}.category-tab{white-space:nowrap;flex-shrink:0}.suggestions-list{flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:10px;gap:10px;-webkit-overflow-scrolling:touch}.suggestion-item{white-space:nowrap;flex-shrink:0;padding:10px 14px}.suggestion-item:hover:not(:disabled){transform:translateY(-2px)}.chat-page-content{flex:1;min-height:0}.messages-container,.chat-input-container{padding:12px}.chat-input-wrapper{gap:8px}.chat-input{padding:12px 16px}.send-btn{width:48px;height:48px;font-size:1.1rem}}
