/********** MAIN **********/
body {
  margin: 0;
  padding: 0
}

h1 {
  text-align: center;
}

#ChatArea {
  max-width: 1200px;
  margin: auto;
}

#MetaTable, #StatusBar{
  display: none;
}

.chat_user {
  border-left: 8px solid;
  padding-left: 0.8em;
  white-space: pre-wrap;
}

.chat_user::before {
  display: block;
  content: "User prompt";
  border-bottom: solid 1px;
  text-align: right;
  font-size: 80%;
}

.chat_gemini {
  border: 2px solid;
  padding: 1.1em;
  border-radius: 16px
}

.chat_gemini::before {
  display: block;
  content: "AI Response";
  border-bottom: solid 1px;
  text-align: right;
  font-size: 80%;
}

.chat {
  margin: 8px;
  margin-block-end: 1.6em;
}

/********** THEMES **********/
.chienomi_light {
  color: #3c2c28;
  background-color: #fff;

  .chat_user {
    border-left: #d44a13 6px solid;
    padding-left: 1.35em;
  }

  .chat_gemini {
    max-width: 100%;
    border-radius: 16px;
    background-color: #ffffff;
    color: #1f1f1f;
    border: 2px solid #c4c7c5;
  }
}

.chienomi_dark {
  background-color: #181818;
  color: #e8e8e8;

  .chat_user {
    border-left: #d44a13 6px solid;
    padding-left: 1.35em;
  }

  .chat_gemini {
    border: 2px solid #4992ea;
    max-width: 100%;
    background-color: #131314;
    color: #ffffff;
    border-radius: 16px
  }
}

.onelight {
  background-color: #fafafa;
  color: #383a42;

  .chat_user {
    border-left-color: #50A14F;
  }

  .chat_gemini {
    border-color: #4078F2;
  }
}

.onedark {
  background-color: #282c34;
  color: #abb2bf;

  .chat_user {
    border-left-color: #98c379;
  }

  .chat_gemini {
    border-color: #c678dd;
  }
}

.catppuccin_latte {
  background-color: #eff1f5;
  color: #4c4f69;

  .chat_user {
    border-left-color: #dd7878;
  }

  .chat_gemini {
    border-color: #1e66f5;
  }
}

.catppuccin_frappe {
  background-color: #303446;
  color: #c6d0f5;

  .chat_user {
    border-left-color: #eebebe;
  }

  .chat_gemini {
    border-color: #8caaee;
  }
}

.catppuccin_macchiato {
  background-color: #24273a;
  color: #cad3f5;

  .chat_user {
    border-left-color: #f0c6c6;
  }

  .chat_gemini {
    border-color: #8aadf4;
  }
}

.catppuccin_mocha {
  background-color: #1e1e2e;
  color: #cdd6f4;

  .chat_user {
    border-left-color: #f2cdcd;
  }

  .chat_gemini {
    border-color: #89b4fa;
  }
}

.nord_light {
  background-color:	#ECEFF4;
  color: #2E3440;

  .chat_user {
    border-left-color: #D8DEE9;
  }

  .chat_gemini {
    border-color: #88C0D0;
  }
}

.nord_dark {
  background-color:	#2E3440;
  color: #D8DEE9;

  .chat_user {
    border-left-color: #4C566A;
  }

  .chat_gemini {
    border-color: #81A1C1;
  }
}

.gruvbox_light {
  background-color:	#FBF1C7;
  color: #3C3836;

  .chat_user {
    border-left-color: #EBDBB2;
  }

  .chat_gemini {
    border-color: #8F3F71;
  }
}

.gruvbox_dark {
  background-color:	#282828;
  color: #D4BE98;

  .chat_user {
    border-left-color: #3C3836;
  }

  .chat_gemini {
    border-color: #A9B665;
  }
}

.github_light {
  background-color:	#FFFFFF;
  color: #1F2328;

  .chat_user {
    border-left-color: #D0D7DE;
  }

  .chat_gemini {
    border-color: #0969DA;
  }
}

.github_dark {
  background-color:	#0D1117;
  color: #E6EDF3;

  .chat_user {
    border-left-color: #30363D;
  }

  .chat_gemini {
    border-color: #2F81F7;
  }
}