body {
      font-family: Arial, sans-serif;
      background-image: url("imges/صورة\ واتساب\ بتاريخ\ 1447-04-28\ في\ 21.39.18_e0c0bc59.jpg");
      background-repeat:no-repeat ;
      margin: 0;
      padding: 0;
   
    }
    .chat-container {
      max-width: 400px;
      margin: 50px auto;
      background: #ffffff;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 0 10px #a0cf1d;
    }
    .chat-box {
      height:421px;
      overflow-y: auto;
      padding: 15px;
      background-position-y:-294px ;
      background-position-x:-102px ;
      background-image: url("imges/صورة\ واتساب\ بتاريخ\ 1447-04-28\ في\ 22.02.01_4f1855f8.jpg");
    }
    .message {
      margin-bottom: 10px;
      display: flex;
      align-items: flex-end;
    }
    .message.user {
      justify-content: flex-end;
    }
    .message.bot {
      justify-content: flex-start;
    }
    .bubble {
      padding: 10px 15px;
      border-radius: 15px;
      max-width: 70%;
    }
    .user .bubble {
      font-size: 20px;  
      background: #47e0c7e3;
      color: #ffffff;
    }
    .bot .bubble {
      background: #00ceff4f;
      backdrop-filter: blur(10px);
      color: #ffffff;
      font-size: 16px;
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    .avatar {
      width: 30px;
      height: 30px;
      margin: 0 5px;
      border-radius: 50%;
      display: flex;
      border-top: 1px solid #7de7f5;
    }
    input[type="text"] {
      flex: 3;
      padding: 10px;
      border: none;
      font-size: 16px;
    }
    button {
      color: white;
      border: none;
      padding: 10px 15px;
      cursor: pointer;
      position: absolute;
      top: 13px;
      right: 270px;
    }
    .as{
      position: absolute;
      top:504px ;
      left:268px;
    }
    button:hover {
      background: #0b5ed7;
    }
    a{
      position: absolute;
      top: 488px;
      left: 732px;
    }
    .qw{
      background:linear-gradient(#0b5ed7,#7de7f5);
      font-size: 16px;
      border-radius:0 0 8px 0;
    }
    h1{
      position: absolute;
      color: #ffffff;
    }
    .qa{
      right: 234px;
      position: absolute;
      top: 0;
      color: #0099ff;
    }
    .dr{
      top: 0px;
      left: 186px;
    }
    h3{
      right: 78px;
      position: absolute;
    }