.chat-container {
            /*max-width: 800px;*/
            margin: 0 auto;
            border: 1px solid #e1e1e1;
            border-radius: 8px;
            overflow: hidden;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        .chat-header {
            background-color: #002240 /*#10a37f*/;
            color: white;
            padding: 15px;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: wheat;
        }
        
        .chat-messages {
            min-height: 450px;
            max-height: 600px;
            overflow-y: auto;
            padding: 20px;
            background-color: #f9f9f9;
        }
        
        .message {
            margin-bottom: 15px;
            /*max-width: 80%;*/
            padding: 10px 15px;
            border-radius: 18px;
            line-height: 1.4;
             position: relative;
        }
        
        .user-message {
            background-color: #595656;
            margin-left: auto;
            border-bottom-right-radius: 5px;
            color: white;
            max-width: 80%;
        }
        
        .ai-message {
            background-color: white;
            border: 1px solid #e1e1e1;
            margin-right: auto;
            border-bottom-left-radius: 5px;
        }
        
        .chat-input {
            display: flex;
            padding: 15px;
            background-color: white;
            border-top: 1px solid #e1e1e1;
        }
        
        #user-input {
            flex-grow: 1;
            padding: 12px;
            border: 1px solid #e1e1e1;
            border-radius: 4px;
            outline: none;
        }
        
        #send_button {
            background-color: #10a37f;
            color: white;
            border: none;
            padding: 12px 20px;
            margin-left: 10px;
            border-radius: 4px;
            cursor: pointer;
        }
        
        #send_button:hover {
            background-color: #0d8a6a;
        }
        
        .typing-indicator {
            display: none;
            padding: 10px 15px;
            background-color: white;
            border: 1px solid #e1e1e1;
            border-radius: 18px;
            margin-bottom: 15px;
            width: fit-content;
            border-bottom-left-radius: 5px;
        }
        
        .typing-dot {
            height: 8px;
            width: 8px;
            background-color: #bbb;
            border-radius: 50%;
            display: inline-block;
            margin: 0 2px;
            animation: typing-animation 1.4s infinite ease-in-out;
        }
        
        .typing-dot:nth-child(1) {
            animation-delay: 0s;
        }
        
        .typing-dot:nth-child(2) {
            animation-delay: 0.2s;
        }
        
        .typing-dot:nth-child(3) {
            animation-delay: 0.4s;
        }
        
        @keyframes typing-animation {
            0%, 60%, 100% { transform: translateY(0); }
            30% { transform: translateY(-5px); }
        }
        
        /* Copy buttons */
        .user-message .copy-btn {
            position: absolute;
            right: 10px;
            top: 10px;
            background: rgba(255, 255, 255, 0.3);
            border: none;
            border-radius: 4px;
            width: 24px;
            height: 24px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.2s;
        }
        
        .ai-message .copy-btn {
            position: absolute;
            right: 10px;
            top: 10px;
            background: rgba(87, 85, 85, 0.3);
            border: none;
            border-radius: 4px;
            width: 24px;
            height: 24px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.2s;
        }
        
        .user-message:hover .copy-btn{
            opacity: 1;
        }
        
        .ai-message:hover .copy-btn {
            opacity: 1;
        }
        .copy-icon {
            width: 16px;
            height: 16px;
        }
        
        .tooltip {
            position: absolute;
            right: 30px;
            top: 5px;
            background: #333;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            opacity: 0;
            transition: opacity 0.2s;
            pointer-events: none;
        }
        
        .copy-btn:hover .tooltip {
            opacity: 1;
        }
        
        .user-message .copied, .ai-message .copied {
            background-color: #4CAF50;
        }
        
        .copied .tooltip {
            content: "Copied!";
            background-color: #4CAF50;
        }
        
        /* Phones styles */
        @media screen and (max-width: 768px) {
          .chat-messages {
            padding: 8px;
          }
        }