.support-chat-widget {
     position: fixed;
     bottom: 20px;
     right: 20px;
     width: 350px;
     height: 500px;
     background: #fff;
     border-radius: 12px;
     box-shadow: 0 5px 20px rgba(0,0,0,0.15);
     display: flex;
     flex-direction: column;
     z-index: 9999;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     opacity: 0;
     transform: translateY(20px) scale(0.95);
     visibility: hidden;
     overflow: hidden;
 }
 
 .support-chat-widget.active {
     opacity: 1;
     transform: translateY(0) scale(1);
     visibility: visible;
 }
 
 .support-chat-widget.hidden {
     display: none;
 }
 
 .support-chat-header {
     background: #2563eb;
     color: white;
     padding: 15px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-bottom: 1px solid #1d4ed8;
 }
 
 .support-chat-title {
     display: flex;
     align-items: center;
     gap: 8px;
     font-weight: 600;
 }
 
 .support-chat-close {
     background: none;
     border: none;
     color: white;
     cursor: pointer;
     padding: 4px;
     border-radius: 4px;
 }
 .support-chat-close:hover {
     background: rgba(255,255,255,0.2);
 }
 
 .support-chat-body {
     flex: 1;
     padding: 15px;
     overflow-y: auto;
     background: #f8fafc;
     display: flex;
     flex-direction: column;
     gap: 10px;
 }
 
 .support-message {
     display: flex;
     margin-bottom: 8px;
 }
 
 .support-message.bot {
     justify-content: flex-start;
 }
 
 .support-message.user {
     justify-content: flex-end;
 }
 
 .support-message .message-content {
     max-width: 80%;
     padding: 10px 14px;
     border-radius: 12px;
     font-size: 14px;
     line-height: 1.4;
 }
 
 .support-message.bot .message-content {
     background: white;
     border: 1px solid #e2e8f0;
     color: #334155;
     border-bottom-left-radius: 2px;
 }
 
 .support-message.user .message-content {
     background: #2563eb;
     color: white;
     border-bottom-right-radius: 2px;
 }
 
 .support-options {
     display: flex;
     flex-direction: column;
     gap: 8px;
     margin-top: 10px;
 }
 
 .support-options button {
     background: white;
     border: 1px solid #cbd5e1;
     padding: 8px 12px;
     border-radius: 20px;
     color: #475569;
     font-size: 13px;
     cursor: pointer;
     transition: all 0.2s;
     text-align: left;
 }
 
 .support-options button:hover {
     background: #f1f5f9;
     border-color: #94a3b8;
     color: #0f172a;
 }
 
 .support-chat-footer {
     padding: 10px;
     background: white;
     border-top: 1px solid #e2e8f0;
     display: flex;
     gap: 10px;
 }
 
 .support-chat-footer input {
     flex: 1;
     border: 1px solid #e2e8f0;
     border-radius: 20px;
     padding: 8px 16px;
     font-size: 14px;
     outline: none;
 }
 
 .support-chat-footer input:focus {
     border-color: #2563eb;
 }
 
 .support-chat-footer button {
     background: #2563eb;
     color: white;
     border: none;
     width: 36px;
     height: 36px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
 }
 .support-chat-footer button:hover {
     background: #1d4ed8;
 }
 
 /* Typing Animation */
 .typing .dot {
     display: inline-block;
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: #94a3b8;
     margin-right: 3px;
     animation: typing 1.4s infinite ease-in-out both;
 }
 
 .typing .dot:nth-child(1) { animation-delay: -0.32s; }
 .typing .dot:nth-child(2) { animation-delay: -0.16s; }
 
 @keyframes typing {
     0%, 80%, 100% { transform: scale(0); }
     40% { transform: scale(1); }
 }