.img-gen {
    width: 100%;
    /*max-height:1024px;*/
}

#avatar {
    background-repeat: no-repeat; 
    width:208px;
    height:208px;
    position:fixed;
    top:84px;
    right:24px;
    border-radius:50%;
    overflow:hidden;
    z-index:1;
}
#emojis {
    font-size:18px;
    text-align:center;
    width:208px;
    height:34px;
    position:fixed;
    top:298px;
    /*border:1px solid #777;border-radius:8px;*/
    right:24px;
    overflow:hidden;
    z-index:2;
}
#emojis_select {
    /*font-size:20px;*/
    cursor:pointer;
    text-align:center;
    width:208px;
    height:84px;
    position:fixed;
    top:328px;
    /*border:1px solid #777;border-radius:8px;*/
    right:24px;
    overflow:auto;
    z-index:2;
    opacity:.2;
}
#emojis_select:hover {
    opacity:1;
}
#emojis_selector {
    font-size:20px;
    /*cursor:pointer;*/
    text-align:center;
    width:144px;
    height:90px;
    margin-right:-42px;
    overflow:auto;
    opacity:.5;
}
#emojis_selector:hover {
    opacity:1;
}
#toolkit {
    font-size:16px;
    width:24px;
    margin-left:-40px;
    cursor:pointer;
    height:90px;
}

#input-area > #emojis_selector,
#input-area > #toolkit {
    height:90px;
}
#input-area.med > #emojis_selector,
#input-area.med > #toolkit {
    height:144px;
}
#input-area.lrg > #emojis_selector,
#input-area.lrg > #toolkit {
    height:200px;
}

#chat-widget-container {
    margin: 20px auto;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    min-height: 55vh;
    font-weight:400;
}

.chat-history {
    flex-grow: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-right:17%;
}

.message {
    padding: 10px 15px;
    border-radius: 18px;
    max-width: 95%;
    line-height: 1.4;
    word-wrap: break-word;
}

.system-message {
    max-width:100%;
    text-align:center;
}
.system-message > hr {
    margin:3px;
    border: 0;
    background-color: rgba(255, 0, 221, 0.7) !important;
    background: rgba(255, 0, 221, 0.7) !important;
    height: 1px;
}
.system-message > hr:hover {
    background: rgba(255, 0, 221, 0.7) !important;
}

.user-message {
    background-color: light-dark(rgba(195, 213, 255, 0.7), rgba(0, 64, 255, 0.7));
    align-self: flex-end;
    border-bottom-right-radius: 5px;
}

.ai-message {
    background-color: light-dark(rgba(225,195,255,.7), rgba(140, 0, 203, 0.7));
    align-self: flex-start;
    border-bottom-left-radius: 5px;
    color: light-dark(#000,#EEE);
    display:inline-block;
}

/* --- Input Area --- */
#input-area {
    display: flex;
    margin-top: 1px;
    padding: 15px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    gap: 10px;
    background-color: var(--body-bg);;
}
#input-progress {
    height: 3px;
    background-color: var(--body-bg);
    border-radius:3px;
}

#input-progress.active {

    background: linear-gradient(to right, #8800ff, #f700ff, #ff0000, #ffd500, #00ff44, #00ffff, #000dff, #8800ff, #f700ff, #ff0000, #ffd500, #00ff44);
/*    background: linear-gradient(to right, #b300ff, var(--body-bg), #b300ff, var(--body-bg));*/
    background-size: 300% 100%;
    animation: shiftColor 3s linear infinite;
}
.ai-message.active {
    display:none;
}
.user-message.active {
    background: linear-gradient(to right, #b300ff, light-dark(rgba(195, 213, 255, 0.7), rgba(0, 64, 255, 0.7)), #b300ff, light-dark(rgba(195, 213, 255, 0.7), rgba(0, 64, 255, 0.7)));
    background-size: 300% 100%;
    animation: shiftColor 3s linear infinite;
}
@keyframes shiftColor {
  0% {
    background-position: 100% 0%;
  }
  100% {
    background-position: 0% 0%;
  }
}
#user-input {
    flex-grow: 1;
    padding: 10px;
    /*border: 1px solid #ccc;*/
    border-radius: 20px;
    resize: none; /* Prevent manual resizing */
    box-sizing: border-box;
    font-size: 1em;
    outline: none;
    border: none;
    height: 92px;
    height: 144px;
    height: 200px;
}
#input-area > #user-input {
    height:92px;
}
#input-area.med > #user-input {
    height:144px;
}
#input-area.lrg > #user-input {
    height:200px;
}

#send-button,
#image-button {
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s;
}

#send-button:hover:not(:disabled),
#image-button:hover:not(:disabled) {
    background-color: #0056b3;
}

#send-button:disabled,
#image-button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}
pre {
    background: var(--body-back-bg)
}

#session-container {
  position: absolute;
  height:104px;
  bottom: 34px;
  border: 1px solid rgba(186, 68, 255, 0.7);
  padding: 4px 8px 12px 8px;
  padding-top: 4px;
  right: 4%;
  left: 4%;
  border-radius: 14px;
  display:none;
  overflow:auto;
}
.session {
  /*max-width: 64px;
  max-height: 64px;
  border-radius: 8px;
  margin-top: 10px;
  display = 'block';
  float: left;
  margin-right: 10px;*/
  padding:2px;
  cursor: pointer;
  border-radius:5px;
}
.session:hover {
  color:light-dark(rgb(0, 0, 0), rgb(255,255,255));
  background: rgba(255, 68, 211, 0.3);
}
.session.current {
  cursor: unset;
  color:light-dark(rgb(0, 0, 0), rgb(255,255,255));
  background: rgba(255, 68, 211, 0.2);
  border-top: 1px solid rgba(255, 68, 211, 0.3);
  border-bottom: 1px solid rgba(255, 68, 211, 0.5);
}