hr{
    border: none;
    height: 1.5px;
    background-color: #726a6a; /* Orange color (use hex, RGB, or color names) */
    width: 95%;
    display: flex;
    align-self: center;
  }
  
  .ff2_res43{
    
    margin: 1em 0 0 0;
    display: flex;
    justify-content: center;
    align-self: center;
    width: 110%;
  
  }



  hr { 
    margin: 1.5em 0 1em 0;
  }
  
  
  
  ol.numbering-list + br + .span-group {
    margin: 0 0 0 3em;
  }
  
  
  
  /* When the element is scrolled into view, we expand the background */
  .text-highlight.active {
    background-size: 100% 100%;
  }
  
  .text-highlight {
    --line-size: 0.5em;
    color: #fff;
    background-image: linear-gradient(transparent calc(100% - 0.5em), rgba(0, 255, 0, 0.4)   0.5em);
  }
  
  
  .span-group{
    margin: 1em 0;
  }
  
  .thinking-data .span-group{
    margin: 0;
  }
  
  .span-group + ul {
    margin-top: 0em;
  }
  
  ul + ol {
    margin-top: 2em;
  }
  
  
  .math-inline{
    margin: auto;
    margin-top: 1em;
    margin-bottom: 1em;
  }
  
  
  .span-group:has(.span-bold) {
    margin: 0.5em 0 0 0;
  }
  
  .span-group:has(.span-bold)+.span-group{
    margin:1em 1em 0 0;
  }
  
  #debug-pre{
    all: unset;
    margin: 0;
    padding: 0;
    color: black;
  }
  
  .numbering-list + br + .numbering-list {
    margin: 0 0 0 2.5em;
  }
  .span-group + ul .bullet-item {
    margin-top: 1.2em;
  }
  

/* CODEEE */

.code-container{
    position: relative;
    background: #282c34;
    border-radius: 1em;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-self: center;
    justify-content: center;
    margin-bottom: 1em;
  }
  
  .code-container .code-lang{
    background: #282c34;
    padding: 0 1em;
    padding-top: 0.5em;
    margin: 0 0 0.5em 0;
    border-top-left-radius: 1em ;
    border-top-right-radius: 1em ;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
  }
  
  .code-block{
    /* font-family:; */
    scrollbar-width: none;
    padding: 1.2em;
    border-radius: 1em;
  }
  
  .lang-name{
    background: rgba(0, 0, 0, .3);
    padding: 0.1em 0.6em;
    border-radius: 0.4em;
    font-weight: 300;
  }
  
  .tick{
    opacity: 0;
  }
  
  .copy-btn{
    all: unset;
    /* background: #000; */
    cursor: pointer;
  }
  
  .copied .copy-svg-ico{
    display: none;
  
  }
  
  .copied .tick{
    opacity: 1;  
  }
  
  .copy-btn:hover{
    color: lightslategrey;
    transition: color .15s ease;
  }
  
  .copy-btn svg{
      height: 1em;
      
  }
  .copy-btn .copy-text{
      text-transform: capitalize;
  
  }
  
  
  *{
    scrollbar-width:thin;
    scroll-behavior:smooth;
  }
  
  .span-group{
    line-height: 1.5em;
  }
  
  .bullet-item{
    margin: 0.5em 0 0 3em;
  }
  
  body{
    overflow: hidden;
  }
  
  
  
  .code-block{
    /* background: #ff0000; */
    color: #fff;
    overflow-x: auto;
    max-width: 100%;
  } 
  
  .error-occured{
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
  }
  
  *{
    overflow-wrap: break-word;
    word-break:keep-all;
  }
  
  /* CHAT ORGANIZER */
  
  .span-bold {
    font-weight: bold;
  }
  .span-h1 {
    font-size: 1.5em;
    font-weight: bold;
    /* additional styling as needed */
  }
  .span-h1 .span-highlight{
    background-color: transparent;
    padding: 0 0.2em;
    border-radius: 0;
    color: #84a37a  ;
    border: none;
    margin: 0 ;
    text-decoration: dotted;
  }
  
  .numbering-list{
  
    margin: 1em 0 0 2.5em;
  }
  .numbering-list .span-bold{
    padding-right: 0.5em;
    font-size: 1.1em;
  }
  
  .span-h2{
    font-size: 1.2em;
      font-weight: 500;
      margin: 0 0 0 1em;
  }
  
  .span-highlight{
    background-color: #282c34;
    padding: 0.01em 0.4em;
    border-radius: 0.4em;
    color: rgb(178 212 183);
    border: 0.3px #605e5e solid;
    cursor: pointer;
    margin: 0 0.15em;
  }
  
  .chatdata {
    grid-area: chatdata;
    background: transparent;
    overflow-y: auto;
  }
  
  .chat-container {
    position: relative;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 0 10vw;
  }
  
  .message {
    display: flex;
    margin-bottom: 0.75rem;
    transition: all 2s ease;
    align-items: center;
  
  }
  .message .assistant{
    min-width: 100%;
  }
  
  
  .message.user{
    display: flex;
    justify-content: flex-end;
    align-content: flex-end ;
    align-items: flex-end;
  }
  
  .user .content {
    position: relative;
    padding: 0.5rem;
    border-radius: 0.5rem;
    color: #fff;
    background: #333;
  
  }
  
  .message.assistant{
    margin-top: 4vh;
    margin-bottom: 5vh;
    justify-content: center;
  }
  
  .content{
    position: relative;
    overflow: hidden;
    overflow-wrap: break-word;
    word-break:keep-all;
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
    /* background: #000; */
  
  }
  
  .assistant .content{
    width: 100vw;
  }
  
  span{
    word-break:keep-all;
    line-break: normal;
  }
  
  
  .answer{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
  }
  
  
  .user .content,
  .user .avatar,
  .user .edit-btn{
    /* display: flex; */
    justify-content: center;
    align-items: center;
  }
  
  .user .content{order: 2; white-space: pre-wrap; max-width: 60%;}
  .user .avatar{order: 3;}
  
  .edit-btn{
    all: unset;
    align-self: baseline;
    cursor: pointer;
    border-radius: 0.5em;
    margin: 0 1em;
  
    margin-top: 1.4%;
  
  }
  
  .edit-btn svg{
    height: 1.2em;
  }
  
  .edit-input{
    all: unset;
    padding: 1em;
    min-height: 1em;
    max-height: 300px;
    box-sizing: border-box;
    overflow-y: hidden;
    width: 200px;
    transition: width 0.003s ease; /* Smooth animation for height */
    scrollbar-width: thin;
    scroll-behavior: smooth;
  
  }
  
  .edit-btn-div{
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
  }
  
  .edit-btn-div .edit-cancel,
  .edit-btn-div .edit-send{
    cursor: pointer;
    font-size: 0.9em;
    padding: 0.5em;
    border-radius: 2em;
  }
  
  .edit-cancel{
    all: unset  ;
    background-color: #ffffff;
    color: #000000;
    font-weight: 600;
  
  }
  .edit-send{
    all: unset;
    background-color: #000000;
    color: #fff;
    font-weight: 500;
  }
  
  
  .extra-info{
    font-family: 'poppins', sans-serif;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1em;
    text-transform: uppercase;
    font-weight:bold ;
    font-size: 1em;
  }
  
  .extra-info div span{
    font-weight: 500;
    font-size: 0.9em;
    opacity: 0.7;
  }
  
  .extra-info .items-ffg{
    display: flex;
    justify-content: center;
    
  }
  .extra-info .items-ffg button{
    all: unset;
    cursor: pointer;
    margin:  3px 0 0 1em;
  }
  .extra-info .items-ffg button svg{height: 1.1em;}
  
  
  pre
  .assistant .content {
    width: 100%;
  }
  
  .error-occured{
    animation: error 2s infinite ease;
  }
  @keyframes round {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
  }
  @keyframes error {
    0%{
      opacity: 1;
    }
    10%{
      opacity: 0.8;
    }
    20%{
      opacity: 0.6;
    }
    30%{
      opacity: 0.4;
    }
    40%{
      opacity: 0.2;
    }
    50%{
      opacity: 0;
    }
    60%{
      opacity: 0.2;
    }
    70%{
      opacity: 0.4;
    }
    80%{
      opacity: 0.6;
    }
    90%{
      opacity: 0.8;
    }
    100%{
      opacity: 1;
    }
  }
  
  
  
  .thinking{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  
  .thinking-data{
    height: 0;
    transition: height 0.4s ease-in-out;
    width: 90%;
    font-size: 0.8em;
    margin-top: 1em;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-items: center;
  }
  
  .thinking button{
    width: 95%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2.8em;
    border-radius: 0.5em;
    justify-content: space-between;
    background: rgba(38, 38, 38, 0.8);
    cursor: pointer;
    color: #dcdcdc;
  }
  
  .thinking button:hover{
    background: rgba(34, 34, 34, 0.9);
    transition: background 0.5s ease;
  }
  .thinking button svg,
  .thinking button div{
    font-weight: 400;
    font-size: 0.9em;
    margin: 0 1.4em;
    font-family: 'poppins', 'Segoe UI', Tahoma, Geneva, Verdana sans-serif;
  }
  
  
  .thinking button div{
    text-shadow: 
      0 0 5px rgba(255, 255, 255, 0.5),
      0 0 10px rgba(255, 255, 255, 0.2),
      0 0 15px rgba(255, 255, 255, 0.1);
  }
  
  
  .bhai-bhen{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  
  
  .span-bold {
    font-weight: bold;
  }
  
  
  
  .span-group .base{
    font-size: 1.5em;
  }
  
  
  .pending-group .base{
    font-size: 1em;
    margin: 0;
  }
  
.message.assistant + .message.assistant{
  margin-top: 0;
}

.span-h3{
  
    font-size: 1.2em;
    font-weight: 500;
}



/* TABLE */


.table-data {
    max-width: 100%;
    margin: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; 
    border-radius: 8px;
    margin-bottom: 1.7em;
  }
  

  .table-data::-webkit-scrollbar {
    height: 0px;
  }
  .table-data::-webkit-scrollbar-track {
    background: #2e2e2e;
  }
  .table-data::-webkit-scrollbar-thumb {
    background: #555;
    /* border-radius: 4px; */
  }
  .table-data::-webkit-scrollbar-thumb:hover {
    background: #777;
  }
  
  .table-data table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden; 
  }

  .table-data thead tr {
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px #ff0000 solid ;
  }
 
  .table-data th {
    font-size: 0.9em;
    padding: 0 1em 0.5em 0;
    padding: 15px 20px;

    border-bottom: 2px solid #666;
    white-space: nowrap;  
    text-align: left;
  }
  
  .table-data thead th span.span-bold {
    color: #dd5; 
  }
  
  .table-data tbody tr {
    /* background-color: #333; */
    /* transition: background-color 0.3s ease; */
  }
  
  .table-data tbody tr:nth-child(even) {
    /* background-color: #3a3a3a; */
  }
  

  
  .table-data td {
    padding: 12px 20px;
    border-bottom: 1px solid #444;
  }
  

  .Alert.greetingg+.message.user{
    margin: 10em 0 0 0 ;
  }