:root {
      --primary-color: #6bb42c;
      --primary-hover: #46771d;
      --secondary-color: #46771d;;
      --bg-color: #f4f4f4;
      --chat-bg: white;
      --input-bg: #eee;
      --text-main: #333;
      --text-muted: #666;
      --text-typing: #777;
    }

    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    #chatToggle {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: var(--primary-color) url('icon.png') center/contain no-repeat;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      cursor: pointer;
      z-index: 9999;
    }

    #chatPanel {
      position: fixed;
      bottom: 90px;
      right: 20px;
      max-width: 90vw;
      width: 360px;
      height: 85vh;
      max-height: 600px;
      background: var(--bg-color);
      border-radius: 12px;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
      display: none;
      flex-direction: column;
      overflow: hidden;
      z-index: 9998;
      border: 1px solid #ccc;
    }

    #nameInputSection {
      padding: 20px;
      text-align: center;
    }

    #nameInputSection input {
      width: 100%;
      padding: 10px;
      font-size: 14px;
      border-radius: 5px;
      border: 1px solid #ccc;
      box-sizing: border-box;
      margin-bottom: 10px;
      background: var(--input-bg);
    }

    #nameInputSection button {
      padding: 10px 15px;
      font-size: 14px;
      background: var(--primary-color);
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    #nameInputSection button:hover {
      background: var(--primary-hover);
    }

    #chatPanel header {
      background: var(--primary-color);
      color: white;
      padding: 12px;

      font-size: 18px;
      text-align: left;
      font-weight: bold;
    }

       #chatPanel header img {
     margin-right: 10px;
     width: 40px;
    }


    #chatBox {
      padding: 15px;
      flex: 1;
      padding-bottom: 90px;
      font-size: 14px;
      overflow-y: auto;
      background: var(--chat-bg);

    }

    .user {
      color: var(--text-main);
      margin: 10px 0;
    }

    .ai {
      color: var(--secondary-color);
      margin: 10px 0;
    }

    .typing {
      font-style: italic;
      color: var(--text-typing);
    }

    .tokens {
      font-size: 12px;
      color: var(--text-muted);
    }

#inputArea {
    display: flex;
    gap: 5px;
    font-size: 16px;
    padding: 10px;
    position: absolute;
    width: 100%;
    bottom: 0;
   
    background: var(--input-bg);
}

    #inputArea input {
        flex: 1;
        border-radius: 5px;
         border: 1px solid #ccc;
    }

    #sendBtn {
      padding: 10px 15px;
      font-size: 14px;
      background: var(--primary-color);
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    #chatContent {
      flex-direction: column;
    display: flex;
    padding-bottom: 60px;
    height: 100%;
    justify-content: space-between;
}
    

    #sendBtn:hover {
      background: var(--primary-hover);
    }

    .dots span {
      opacity: 0.1;
      animation: blink 1.2s infinite;
    }
    .dots span:nth-child(1) { animation-delay: 0s; }
    .dots span:nth-child(2) { animation-delay: 0.2s; }
    .dots span:nth-child(3) { animation-delay: 0.4s; }
    .dots span:nth-child(4) { animation-delay: 0.6s; }

    @keyframes blink {
      0%, 100% { opacity: 0.1; }
      50% { opacity: 1; }
    }