/**
 * Chatbot Widget Styles
 * AI Assistant floating chat interface
 */

.chat-container{
 position:fixed !important;
 top:550px !important;
 right:clamp(12px,3vw,28px) !important;
 bottom:auto !important;
 left:auto !important;
 transform:none !important;
 z-index:1000;
 font-family:var(--font-family);
}

/* Chat Button */
.chat-button{
 width:clamp(60px,9vw,84px);
 height:clamp(60px,9vw,84px);
 background:linear-gradient(135deg,#F28C00,#D67700);
 border:none;
 border-radius:50%;
 color:white;
 font-size:clamp(22px,4vw,30px);
 cursor:pointer;
 display:flex;
 justify-content:center;
 align-items:center;
 box-shadow:0 4px 15px rgba(242,140,0,0.4);
 transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
 animation:pulse 2s infinite;
}

.chat-button:hover{
 transform:scale(1.1);
 box-shadow:0 6px 20px rgba(242,140,0,0.6);
}

.chat-button.active{
 transform:rotate(45deg);
 background:#666;
}

@keyframes pulse{
 0%,100%{
 box-shadow:0 4px 15px rgba(242,140,0,0.4);
}
 50%{
 box-shadow:0 4px 15px rgba(242,140,0,0.8),0 0 0 10px rgba(242,140,0,0.1);
}
}

/* Chat Interface */
.chat-interface{
 display:none;
 position:absolute;
 bottom:80px;
 right:0;
 width:350px;
 height:500px;
 background:white;
 border-radius:12px;
 box-shadow:0 8px 30px rgba(0,0,0,0.15);
 overflow:hidden;
 opacity:0;
 transform:translateY(20px) scale(0.9);
 transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
}

.chat-interface.open{
 display:flex;
 flex-direction:column;
 opacity:1;
 transform:translateY(0) scale(1);
}

/* Chat Header */
.chat-header{
 background:linear-gradient(135deg,#F28C00,#D67700);
 color:white;
 padding:16px 20px;
 display:flex;
 justify-content:space-between;
 align-items:center;
 border-bottom:1px solid rgba(255,255,255,0.1);
}

.chat-title-area{
 flex:1;
}

.chat-title{
 font-size:16px;
 font-weight:600;
 margin:0;
}

.chat-subtitle{
 font-size:12px;
 opacity:0.8;
 margin:2px 0 0;
}

.chat-close{
 background:none;
 border:none;
 color:white;
 font-size:18px;
 cursor:pointer;
 padding:4px 8px;
 border-radius:4px;
 transition:background 0.2s;
}

.chat-close:hover{
 background:rgba(255,255,255,0.2);
}

/* Chat Messages */
.chat-messages{
 flex:1;
 overflow-y:auto;
 padding:16px;
 background:#f8f9fa;
 scrollbar-width:thin;
 scrollbar-color:#ddd transparent;
}

.chat-messages::-webkit-scrollbar{
 width:4px;
}

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

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

/* Welcome Message */
.welcome-message{
 text-align:center;
 color:#666;
 padding:30px 20px;
 font-size:14px;
 line-height:1.6;
}

/* Messages */
.message{
 margin-bottom:12px;
 display:flex;
 gap:8px;
 align-items:flex-end;
}

.message.user{
 flex-direction:row-reverse;
}

.message-bubble{
 max-width:75%;
 padding:10px 14px;
 border-radius:18px;
 font-size:14px;
 line-height:1.4;
 word-wrap:break-word;
}

.message.assistant .message-bubble{
 background:white;
 color:#333;
 border-bottom-left-radius:4px;
 box-shadow:0 2px 8px rgba(0,0,0,0.1);
}

.message.user .message-bubble{
 background:linear-gradient(135deg,#F28C00,#D67700);
 color:white;
 border-bottom-right-radius:4px;
}

.message-avatar{
 width:28px;
 height:28px;
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:14px;
 flex-shrink:0;
}

.message.assistant .message-avatar{
 background:#F28C00;
 color:white;
}

.message.user .message-avatar{
 background:#666;
 color:white;
}

/* Thinking Indicator */
.thinking-indicator{
 display:none;
 flex-direction:column;
 gap:4px;
 padding:12px 16px;
 font-size:14px;
}

.thinking-header{
 display:flex;
 align-items:center;
 gap:8px;
 color:#666;
}

.thinking-spinner{
 font-family:monospace;
 min-width:20px;
 text-align:center;
 color:#E07A00;
}

.thinking-word{
 color:#E07A00;
 font-style:italic;
 position:relative;
 overflow:hidden;
 display:inline-block;
}

.thinking-word::before{
 content:'';
 position:absolute;
 top:-20%;
 left:-150%;
 width:30px;
 height:140%;
 background:linear-gradient(45deg,transparent,rgba(255,255,255,0.6),transparent);
 transform:skew(-20deg);
 animation:slantedShine 4s ease-in-out infinite;
 z-index:1;
}

.thinking-word::after{
 content:'';
 position:absolute;
 top:0;
 left:-100%;
 width:100%;
 height:100%;
 background:linear-gradient(90deg,transparent,rgba(224,122,0,0.4),transparent);
 animation:shine 3s ease-in-out infinite;
 z-index:0;
}

@keyframes slantedShine{
 0%{left:-150%;}
 50%{left:120%;}
 100%{left:-150%;}
}

@keyframes shine{
 0%{left:-100%;}
 50%{left:100%;}
 100%{left:-100%;}
}

.thinking-dots{
 font-family:monospace;
 color:#E07A00;
 min-width:40px;
}

.thinking-thought{
 color:#999;
 font-size:12px;
 margin-left:28px;
 font-style:italic;
 opacity:0;
 animation:fadeIn 0.5s forwards;
}

@keyframes fadeIn{
 to{opacity:1;}
}

/* Chat Input */
.chat-input-container{
 padding:12px 16px;
 background:white;
 border-top:1px solid #eee;
 display:flex;
 gap:8px;
 align-items:flex-end;
}

.chat-input{
 flex:1;
 padding:8px 12px;
 border:2px solid #eee;
 border-radius:20px;
 font-size:14px;
 outline:none;
 resize:none;
 max-height:80px;
 transition:border-color 0.2s;
}

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

.chat-send{
 background:#F28C00;
 color:white;
 border:none;
 width:36px;
 height:36px;
 border-radius:50%;
 cursor:pointer;
 display:flex;
 align-items:center;
 justify-content:center;
 transition:all 0.2s;
 font-size:16px;
}

.chat-send:hover:not(:disabled){
 background:#D67700;
 transform:scale(1.1);
}

.chat-send:disabled{
 background:#ccc;
 cursor:not-allowed;
 transform:none;
}

/* Mobile Responsive */
@media (max-width:1024px){
 .chat-container{
 top:525px !important;
}
}

@media (max-width:600px){
 .chat-container{
 top:500px !important;
}

 .chat-interface{
 height:400px !important;
}
}

@media (max-width:480px){
 .chat-interface{
 width:calc(100vw - 40px);
 height:calc(100vh - 120px);
 bottom:80px;
 right:-10px;
}

 .chat-container{
 bottom:20px;
 right:20px;
}
}