/**
 * Chatbot Styles - Production Build
 * Version: 1.0.0
 * 
 * Implements all acceptance criteria:
 * AC-1: Fixed positioning at bottom-right
 * AC-2: Smooth animations, launcher transforms to X
 * AC-3: Tooltips on hover states
 */

/* Launcher Button (AC-1) */
.chatbot-launcher{position:fixed;bottom:20px;right:20px;background-color:#000;color:#fff;border-radius:50px;padding:12px 20px;cursor:pointer;z-index:900;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.3);transition:all .3s cubic-bezier(.4,0,.2,1);user-select:none}
.chatbot-launcher.hidden{opacity:0;visibility:hidden;pointer-events:none;transform:scale(0.8)}
.chatbot-launcher.chat-open{opacity:0;visibility:hidden;pointer-events:none}
.chatbot-launcher:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.4);background-color:#1a1a1a}
.chatbot-launcher:active{transform:translateY(0);box-shadow:0 4px 12px rgba(0,0,0,.3)}
.chatbot-launcher-content{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:16px;transition:all .3s ease}
.chatbot-icon{flex-shrink:0;transition:opacity .3s ease,transform .3s ease;width:28px;height:28px}
.chatbot-launcher-text{white-space:nowrap;transition:opacity .3s ease}

/* Tooltip (AC-3) */
.chatbot-tooltip{position:absolute;bottom:calc(100% + 10px);right:0;background-color:#333;color:#fff;padding:8px 12px;border-radius:6px;font-size:12px;white-space:nowrap;opacity:0;visibility:hidden;transform:translateY(5px);transition:all .2s ease;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.chatbot-tooltip::after{content:'';position:absolute;top:100%;right:20px;border:6px solid transparent;border-top-color:#333}
.chatbot-tooltip.visible{opacity:1;visibility:visible;transform:translateY(0)}

/* Chat Window (AC-2) */
.chatbot-window{position:fixed;bottom:20px;right:20px;width:360px;height:500px;background-color:#fff;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.3);z-index:899;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(20px) scale(.95);transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden}
.chatbot-window.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}

/* Header with Controls */
.chatbot-header{display:flex;justify-content:space-between;align-items:center;background-color:#f6f0e2;color:#000;padding:8px 12px;border-bottom:1px solid #ddd;flex-shrink:0}
.chatbot-header-title{display:flex;align-items:center;gap:8px;font-weight:600;font-size:16px}
.chatbot-header-icon{flex-shrink:0}
.chatbot-controls{display:flex;align-items:center;gap:0px}
.chatbot-control-btn{background:transparent;border:none;cursor:pointer;padding:0 2px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease;color:#000;width:30px;height:30px}
.chatbot-control-btn:hover{background-color:rgba(0,0,0,.1)}
.chatbot-control-btn:active{background-color:rgba(0,0,0,.15)}
.chatbot-control-btn svg{width:20px!important;height:20px!important;stroke-width:1.1}

/* Messages */
.chatbot-messages{flex:1;padding:16px;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:12px;background-color:#fff}
.chatbot-messages::-webkit-scrollbar{width:6px}
.chatbot-messages::-webkit-scrollbar-track{background:#f1f1f1}
.chatbot-messages::-webkit-scrollbar-thumb{background:#888;border-radius:3px}
.chatbot-messages::-webkit-scrollbar-thumb:hover{background:#555}

/* Message Bubbles */
.chatbot-message{max-width:90%;display:flex;flex-direction:column;gap:6px;animation:messageSlideIn .3s ease}
@keyframes messageSlideIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.chatbot-message-wrapper{display:flex;flex-direction:column;width:100%;padding:6px;border-radius:10px;box-sizing:border-box}
.chatbot-message-content{word-wrap:break-word;overflow-wrap:break-word;word-break:break-word;line-height:1.4;font-size:14px;flex:1}
.user-message{align-self:flex-end}
.user-message .chatbot-message-wrapper{background-color:#F6F0E2;color:#000;text-align:right;border-top-right-radius:0;box-shadow:2px 2px lightgrey}
.bot-message{align-self:flex-start}
.bot-message .chatbot-message-wrapper{background-color:rgba(211,211,211,0.418);color:#000;text-align:left;border-top-left-radius:0;box-shadow:2px 2px lightgray}
.chatbot-message-content a{color:#0066cc;text-decoration:underline}
.chatbot-message-content a:hover{color:#0052a3}

/* Copy Section inside Message */
.chatbot-message-copy-section{display:flex;justify-content:space-between;align-items:center;margin-top:4px;padding-top:4px;border-top:1px solid #cacaca;gap:12px}

/* Copy Button */
.chatbot-copy-btn{background:transparent;border:1px solid #cacaca;cursor:pointer;font-size:10px;color:#666;padding:4px 8px;border-radius:12px;transition:all .2s ease;display:flex;align-items:center;gap:4px;min-height:20px;opacity:.8;margin-left:auto}
.chatbot-copy-btn:hover{background-color:#f8f9fa;border-color:#d0d7de;color:#24292f;opacity:1;transform:translateY(-1px);box-shadow:0 2px 4px rgba(0,0,0,.1)}
.chatbot-copy-btn:active{background-color:#e9ecef;transform:translateY(0);box-shadow:0 1px 2px rgba(0,0,0,.1)}
.chatbot-copy-btn.copied{background-color:#d4edda;border-color:#c3e6cb;color:#155724}
.chatbot-copy-btn svg{flex-shrink:0;width:12px;height:12px}
.chatbot-copy-btn span{font-size:9px;font-weight:500;letter-spacing:0.3px}

/* Topic Buttons */
.chatbot-topics{display:flex;flex-direction:column;gap:8px;padding:8px 0}
.chatbot-topic-btn{background-color:#fff;border:1px solid #000;color:#000;padding:10px 16px;border-radius:8px;cursor:pointer;font-size:14px;font-family:inherit;text-align:left;transition:all .2s ease;font-weight:500}
.chatbot-topic-btn:hover{background-color:#f6f0e2;transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,.15)}
.chatbot-topic-btn:active{transform:translateY(0);box-shadow:0 1px 3px rgba(0,0,0,.1)}

/* Typing Indicator */
.typing-indicator .chatbot-message-wrapper{padding:16px 20px}
.typing-dots{display:flex;align-items:center;gap:4px}
.typing-dots span{width:8px;height:8px;border-radius:50%;background-color:#000;animation:typingAnimation 1.4s infinite}
.typing-dots span:nth-child(2){animation-delay:.2s}
.typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes typingAnimation{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-6px)}}

/* Improved Input Area - Match partner portal exactly */
.chatbot-input-wrapper{padding:0;background-color:#fff;flex-shrink:0}
.chatbot-input-container{display:flex;align-items:center;justify-content:space-between;margin:10px;background-color:#F6F0E2;border:0.5px solid black;border-radius:10px;height:auto;box-sizing:border-box;transition:height .2s ease}
.chatbot-input{flex:1;resize:none;border:none!important;font-size:14px;outline:none!important;background-color:#F6F0E2!important;min-height:40px;max-height:120px;margin:0 10px;transition:height .2s ease;overflow-y:hidden;overflow-x:hidden;line-height:1.4;box-sizing:border-box;font-family:inherit;padding:10px 0;vertical-align:middle;box-shadow:none!important}
.chatbot-input::placeholder{color:#999}
.chatbot-input::-webkit-scrollbar{width:4px}
.chatbot-input::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px}
.chatbot-send-btn{background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:8px;border-radius:4px;transition:background-color .2s ease;flex-shrink:0;color:#808080;margin-right:5px}
.chatbot-send-btn:hover:not(:disabled){background-color:rgba(0,0,0,.1)}
.chatbot-send-btn:active:not(:disabled){background-color:rgba(0,0,0,.15)}
.chatbot-send-btn:disabled{cursor:not-allowed;opacity:.5}
.chatbot-send-btn svg{width:20px;height:20px;fill:currentColor}

/* Responsive */
@media screen and (max-width:768px){
.chatbot-window{width:calc(100vw - 40px);max-width:400px}
}
@media screen and (max-width:480px){
.chatbot-window{width:calc(100vw - 20px);height:calc(100vh - 140px);right:10px;bottom:80px}
.chatbot-launcher{bottom:10px;right:10px;padding:10px 16px}
.chatbot-launcher-text{font-size:13px}
}

/* Accessibility */
.chatbot-launcher:focus-visible,.chatbot-send-btn:focus-visible,.chatbot-copy-btn:focus-visible,.chatbot-control-btn:focus-visible{outline:2px solid #0066cc;outline-offset:2px}

/* Reduced Motion */
@media (prefers-reduced-motion:reduce){
.chatbot-launcher,.chatbot-window,.chatbot-tooltip,.chatbot-message,.chatbot-copy-btn{animation:none;transition:none}
}