/* Floating Chat Button */
.chat-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center; }

.chat-button:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4); }

.chat-button svg {
  width: 28px;
  height: 28px;
  fill: white; }

/* Chat Container */
.chat-container {
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 380px;
  height: 500px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Chat Header */
  /* Chat Messages */
  /* Loading Indicator */
  /* Message Styles */
  /* Chat Input */
  /* Responsive */ }
  .chat-container.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); }
  .chat-container .chat-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between; }
  .chat-container .chat-header h3 {
    font-size: 16px;
    font-weight: 600; }
  .chat-container .chat-header .close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: background 0.3s ease; }
  .chat-container .chat-header .close-btn:hover {
    background: rgba(255, 255, 255, 0.2); }
  .chat-container textarea#messageInput {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 25px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s ease; }
  .chat-container .chat-messages {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
    background: #f8f9fa;
    position: relative; }
  .chat-container .chat-messages::-webkit-scrollbar {
    width: 6px; }
  .chat-container .chat-messages::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px; }
  .chat-container .chat-messages::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px; }
  .chat-container .chat-messages::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8; }
  .chat-container .loading-indicator {
    text-align: center;
    padding: 15px;
    color: #666;
    font-size: 14px;
    display: none; }
  .chat-container .loading-indicator.show {
    display: block; }
  .chat-container .loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 10px; }
@keyframes spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
  .chat-container .message {
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    opacity: 0;
    animation: fadeInMessage 0.5s ease forwards; }
@keyframes fadeInMessage {
  from {
    opacity: 0;
    transform: translateY(20px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
  .chat-container .message.user {
    flex-direction: row-reverse; }
  .chat-container .message-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin: 0 5px;
    flex-shrink: 0;
    text-align: center;
    vertical-align: middle;
    padding: 3px 0px; }
  .chat-container .message.user .message-avatar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
  .chat-container .message.ai .message-avatar {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
  .chat-container .message-content {
    max-width: 90%;
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.4;
    word-wrap: break-word; }
  .chat-container .message.user .message-content {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-bottom-right-radius: 6px; }
  .chat-container .message.ai .message-content {
    background: white;
    color: #333;
    border: 1px solid #e0e0e0;
    border-bottom-left-radius: 6px; }
  .chat-container .message-time {
    font-size: 11px;
    color: #999;
    margin-top: 5px;
    text-align: left; }
  .chat-container .message.user .message-time {
    text-align: right; }
  .chat-container .message.user .message-content {
    margin-left: auto; }
  .chat-container .chat-input {
    padding: 20px;
    background: white;
    border-top: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    gap: 10px; }
  .chat-container .chat-input input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 25px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s ease; }
  .chat-container .chat-input input:focus {
    border-color: #667eea; }
  .chat-container .send-btn {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease; }
  .chat-container .send-btn:hover {
    transform: scale(1.05); }
  .chat-container .send-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none; }
  .chat-container .send-btn svg {
    width: 20px;
    height: 20px;
    fill: white; }
  @media (max-width: 480px) {
    .chat-container {
      width: calc(100vw - 40px);
      height: 70vh;
      bottom: 90px;
      right: 20px;
      left: 20px; } }

/*# sourceMappingURL=chat-ia.css.map */