/* Light theme colors */
:root {
  --main-gradient: linear-gradient(to right, #114455, #005454);
  --green: #005454;
  --yellow: #FFD166; 
  --bg: #181818;
  --bg-light: #2C2C2C;
  --btn-ovl: #484848;
  --bg-hover: #606060;
  --text-light: #E0E0E0;
  --text: #F5F5F5;
  --gradient: linear-gradient(to right, #facb53, #ffbc11);
  --red-error: #e39d9d;
  --stroke-gradient: linear-gradient(to right, #ECECEC, rgba(255, 255, 255, 0));
  --gradient-review: linear-gradient(to right, #FBFBFB, rgba(255, 255, 255, 0));
}

.light-mode {
  --bg: #f9f9f9;
  --bg-light: #ffffff;
  --btn-ovl: #d4d4d4;
  --bg-hover: #a9a9a9;
  --text-light: #6d6d6d;
  --text: #212121;
  --main-gradient: linear-gradient(to right, #114455, #005454);
  --green: #005454;
  --yellow: #FFD166; 
  --gradient: linear-gradient(to right, #facb53, #ffbc11);
  --red-error: #e39d9d;
  --stroke-gradient: linear-gradient(to right, #ECECEC, rgba(255, 255, 255, 0));
  --gradient-review: linear-gradient(to right, #FBFBFB, rgba(255, 255, 255, 0));
}

.light-blue-mode {
  --main-gradient: linear-gradient(to right, #05668D, #00A896); /* deep blue to teal */
  --green: #20b8aa;
  --yellow: #FFD166; /* yellow */
  --bg: #FDFDFD; /* off-white */
  --bg-light: #FFFDFA; /* off-white */
  --btn-ovl: #E1F5F2; /* very light teal */
  --bg-hover: #83C5BE; /* teal */
  --text-light: #05668D; /* navy blue */
  --text: #00263B; /* very dark blue */
  --gradient: linear-gradient(to right, #FFD166, #EF476F); /* yellow to red */
  --red-error: #EF476F; /* red */
  --stroke-gradient: linear-gradient(to right, #CBF3F0, rgba(255, 253, 250, 0)); /* light teal to transparent */
  --gradient-review: linear-gradient(to right, #E1F5F2, rgba(255, 253, 250, 0)); /* light teal to transparent */
}

.warm-mode {
  --main-gradient: linear-gradient(to right, #A98467, #E9C46A); /* sandy brown to mustard */
  --green: #A98467; /* sandy brown */
  --yellow: #F4A261; /* sandy orange */
  --bg: #FDF6F0; /* warm off-white */
  --bg-light: #FFF8EE; /* light cream */
  --btn-ovl: #FAD2AE; /* soft peach */
  --bg-hover: #A98467; /* sandy brown */
  --text-light: #774936; /* deep terracotta */
  --text: #2C2927; /* very dark brown */
  --gradient: linear-gradient(to right, #F4A261, #E76F51); /* sandy orange to burnt orange */
  --red-error: #E76F51; /* burnt orange */
  --stroke-gradient: linear-gradient(to right, #FAD2AE, rgba(253, 246, 240, 0)); /* soft peach to transparent */
  --gradient-review: linear-gradient(to right, #FFF8EE, rgba(253, 246, 240, 0)); /* light cream to transparent */
}

.cool-mode {
  --main-gradient: linear-gradient(to right, #1B263B, #457B9D); /* dark blue to medium blue */
  --green: #2A9D8F; /* teal */
  --yellow: #A8DADC; /* light teal */
  --bg: #F1F7FA; /* cool off-white */
  --bg-light: #DCEEFB; /* very light blue */
  --btn-ovl: #A8DADC; /* light teal */
  --bg-hover: #457B9D; /* medium blue */
  --text-light: #1B263B; /* navy blue */
  --text: #14213D; /* deep blue */
  --gradient: linear-gradient(to right, #A8DADC, #457B9D); /* light teal to medium blue */
  --red-error: #E63946; /* red */
  --stroke-gradient: linear-gradient(to right, #89C2D9, rgba(241, 247, 250, 0)); /* soft blue to transparent */
  --gradient-review: linear-gradient(to right, #DCEEFB, rgba(241, 247, 250, 0)); /* very light blue to transparent */
}

.gradient-text {
  background-image: linear-gradient(to right, #145B5E, #20B8AA);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-bg {
  background: linear-gradient(to right, #145B5E, #20B8AA);
}

.hv-gradient-bg {
  color: black;
}

.hv-gradient-bg:hover {
  background: linear-gradient(to right, #145B5E, #20B8AA);
  color: white;
}

.gradient-border {
  border: solid 1px transparent;
  background-image: linear-gradient(var(--color-bg), var(--color-bg)), radial-gradient(circle at top left, #145B5E, #20B8AA);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.gradient-border-left {
  border: solid 2px transparent;
  border-left: solid 2px transparent;
  background-image: linear-gradient(var(--color-bg), var(--color-bg)), linear-gradient(to bottom, #145B5E, #20B8AA);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: 100% 100%, 2px 100%;
  background-repeat: no-repeat;
  background-position: right, left;
}

.gradient-border:hover {
  background-image: linear-gradient(var(--color-bg-light), var(--color-bg-light)), radial-gradient(circle at top left, #145B5E, #20B8AA);
}

.selected {
  background: linear-gradient(to right, #145B5E, #20B8AA);
  color: white;
  border: none;
}

textarea::-webkit-scrollbar,
#command-list::-webkit-scrollbar,
#chat-content-list::-webkit-scrollbar,
#chat-list::-webkit-scrollbar,
#scrollable::-webkit-scrollbar {
  width: 0.20rem;
}

textarea::-webkit-scrollbar-track,
#command-list::-webkit-scrollbar-track,
#chat-content-list::-webkit-scrollbar-track,
#chat-list::-webkit-scrollbar-track,
#scrollable::-webkit-scrollbar-track {
  background: var(--bg);
  border-radius: 0.20rem;
}

textarea::-webkit-scrollbar-thumb,
#command-list::-webkit-scrollbar-thumb,
#chat-content-list::-webkit-scrollbar-thumb,
#chat-list::-webkit-scrollbar-thumb,
#scrollable::-webkit-scrollbar-thumb {
  background: var(--bg-hover);
  border-radius: 0.20rem;
}

.blur-edge::before {
  content: '';
  position: absolute;
  width: 1rem;
  right:0;
  top: 0;
  bottom: 0;
  backdrop-filter: blur(8px);

  background: linear-gradient(to left, black, rgba(0, 0, 0, 0.5));
  z-index: 1;
}

.plan-checked {
  border-color: var(--green) !important;
}

.plan-bg {
  background-image: url(https://storage.googleapis.com/chatapp-website-assets/settings_manage_subs_bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right bottom;
}

.overflow-message {
  word-wrap: break-word;
  word-break: break-all;
}

.user-message {
  white-space: pre-wrap;
}