.header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #333;
      color: #000;
      padding: 15px 20px;
      box-sizing: border-box;
      z-index: 1000;
    }
    .footer{
        position:fixed;
        bottom:0;
        width:100%;
    }
    .chat-container {
      flex: 1;
      overflow-y: auto;
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .message {
      max-width: 100%;
      padding: 12px 16px;
      border-radius: 12px;
      line-height: 1.5;
      position: relative;
      animation: fadeIn 0.3s ease;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .user-message {
      align-self: flex-end;
      background-color: #0d9488;
      color: white;
      border-bottom-right-radius: 4px;
    }
    .ai-message {
      align-self: flex-start;
      background-color: white;
      color: #333;
      border: 1px solid #e5e5e5;
      border-bottom-left-radius: 4px;
    }
    .input-area {
      display: flex;
      padding: 16px;
      background-color: white;
      border-top: 1px solid #e5e5e5;
    }
    .input-area input {
      flex: 1;
      padding: 12px 16px;
      border: 1px solid #ccc;
      border-radius: 10px;
      outline: none;
      font-size: 16px;
    }
    .input-area input:focus {
      border-color: #0d9488;
    }
    .input-area button {
      margin-left: 12px;
      padding: 12px 20px;
      background-color: #0d9488;
      color: white;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      font-weight: bold;
    }
    .input-area button:hover {
      background-color: #0b7a75;
    }
    .ai-message h1, .ai-message h2, .ai-message h3, .ai-message h4, .ai-message h5 {
        color: #333;
        font-size:1rem
    }
    .ai-message code {
        background-color: #f4f4f4;
        padding: 2px 4px;
        font-family: monospace;
        font-size:0.8rem
    }
    .ai-message pre {
        background-color: #f0f0f0;
        padding: 10px;
        overflow-x: auto;
        font-size:0.8rem
    }
    #preview-box {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 10px;
    }
    .delete-btn {
        position: absolute;
        top: 2px;
        right: 2px;
        background: red;
        color: white;
        padding: 2px 6px;
        cursor: pointer;
        font-size: 14px;
        border-radius: 50%;
        z-index: 10;
    }
    .loading-dots {
        font-size: 1.5rem;
        font-weight: bold;
        color: #007bff;
    }
    .loading-dots::after {
        content: '';
        animation: typing 1.5s steps(3, end) infinite;
    }
    @keyframes typing {
        0%, 100% { content: ''; }
        10% { content: '.'; }
        25% { content: '..'; }
        35% { content: '...'; }
        45% { content: '....'; }
        55% { content: '.....'; }
        75% { content: '......'; }
    }