:root {
      --etex-orange-primary: #f06d0c;
      --etex-orange-seconday: #ffe7d9;
      --bg-hover: #e4e4e4;
      --text-color: #1c1e21;
      --inverted-text-color: #ffffff;
      --border-color: #00000024;
      --icon-svg-filter: invert(1);
      --shade-1: #ffffff; 
      --shade-2: #f6f6f6; 
      --shade-3: #e4e4e4; 
      --shade-4: #b3b3b3; 
      --shade-5: #999999; 
      --shade-6: #808080; 
      --shade-7: #666666; 
      --shade-8: #4d4d4d;  
      --shade-9: #333333; 
      --shade-10: #000000;
      --bg-code: #f9f9f9;
      --chat-bg-shade-1: #ffffff; /* this will the background-color of the main working area */
      --chat-bg-shade-2: #eeeeee; /* this will the background-color of the sidebar */
      --chat-bg-shade-3: #ffffff; /* this will the background-color of the input area */
      --chat-bg-shade-4: #d9d9d9; /* this will the background-color of any buttons on the main working area, sidebar */
      --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
[data-theme="dark"] {
      --etex-orange-primary: #F06D0C;
      --etex-orange-seconday: #923b0f;
      --bg-hover: #424242;
      --text-color: #ffffff;
      --inverted-text-color: #000000;
      --border-color: #3d3d3d;
      --icon-svg-filter: invert(1);
      --shade-1: #000000;
      --shade-2: #212121;
      --shade-3: #4d4d4d;
      --shade-4: #666666;
      --shade-5: #808080;
      --shade-6: #999999;
      --shade-7: #b3b3b3;
      --shade-8: #cccccc;
      --shade-9: #f6f6f6;
      --shade-10: #ffffff;
      --bg-code: #161515;
      --chat-bg-shade-1: #212121; /* this will the background-color of the main working area */
      --chat-bg-shade-2: #181818; /* this will the background-color of the sidebar */
      --chat-bg-shade-3: #303030; /* this will the background-color of the input area */
      --chat-bg-shade-4: #404040; /* this will the background-color of any buttons on the main working area, sidebar */
      --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
:root {
    --like-bg: #d4f7dc;
    --like-icon-color: #1a4d1a;
    --dislike-bg: #f7d4d4;
    --dislike-icon-color: #a10b0b;
}

[data-theme="dark"] {
    --like-bg: #2e5e3d;       /* dark green background */
    --like-icon-color: #d4f7dc; /* light green icon */
    --dislike-bg: #5e2e2e;    /* dark red background */
    --dislike-icon-color: #f7d4d4; /* light red icon */
}
:root {
      --HLJS-comment: #a0a1a7;
      --HLJS-meta: #fff9;
      --HLJS-built_in: #c18401;
      --HLJS-class_title: #c18401;
      --HLJS-doctag: #a626a4;
      --HLJS-formula: #a626a4;
      --HLJS-keyword: #a626a4;
      --HLJS-literal: #0184bb;
      --HLJS-addition: #008635;
      --HLJS-attribute: #50a14f;
      --HLJS-meta_string: #50a14f;
      --HLJS-regexp: #50a14f;
      --HLJS-string: #50a14f;
      --HLJS-attr: #986801;
      --HLJS-number: #986801;
      --HLJS-selector_attr: #986801;
      --HLJS-selector_class: #986801;
      --HLJS-selector_pseudo: #986801;
      --HLJS-template_variable: #986801;
      --HLJS-type: #986801;
      --HLJS-variable: #986801;
      --HLJS-deletion: #e45649;
      --HLJS-name: #e45649;
      --HLJS-section: #e45649;
      --HLJS-selector_tag: #e45649;
      --HLJS-subst: #e45649;
      --HLJS-bullet: #6b3ab4;
      --HLJS-link: #4078f2;
      --HLJS-selector_id: #4078f2;
      --HLJS-symbol: #4078f2;
      --HLJS-title: #4078f2;
}

[data-theme="dark"] {
      --logo-icon-svg-filter: invert(1);
      --HLJS-comment: #a0a1a7;
      --HLJS-meta: #fff9;
      --HLJS-built_in: #e9950c;
      --HLJS-class_title: #c18401;
      --HLJS-doctag: #2e95d3;
      --HLJS-formula: #a626a4;
      --HLJS-keyword: #a626a4;
      --HLJS-literal: #0184bb;
      --HLJS-addition: #00a67d;
      --HLJS-attribute: #50a14f;
      --HLJS-meta_string: #50a14f;
      --HLJS-regexp: #50a14f;
      --HLJS-string: #50a14f;
      --HLJS-attr: #df3079;
      --HLJS-number: #986801;
      --HLJS-selector_attr: #986801;
      --HLJS-selector_class: #986801;
      --HLJS-selector_pseudo: #986801;
      --HLJS-template_variable: #986801;
      --HLJS-type: #986801;
      --HLJS-variable: #986801;
      --HLJS-deletion: #e45649;
      --HLJS-name: #e45649;
      --HLJS-section: #e45649;
      --HLJS-selector_tag: #e45649;
      --HLJS-subst: #e45649;
      --HLJS-bullet: #f22c3d;
      --HLJS-link: #4078f2;
      --HLJS-selector_id: #4078f2;
      --HLJS-symbol: #4078f2;
      --HLJS-title: #4078f2;
}


@font-face {
      font-family: "Sevillana-Regular";
      src: url("/static/fonts/Sevillana-Regular.ttf") format("truetype");
}

@font-face {
      font-family: "Montserrat-VariableFont_wght";
      src: url("/static/fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
}

@font-face {
      font-family: "Inconsolata";
      src: url("/static/fonts/Inconsolata-VariableFont_wdth,wght.ttf") format("truetype");
}

@font-face {
      font-family: "RobotoFlex-VariableFont";
      src: url("/static/fonts/Roboto-VariableFont_wdth,wght.ttf") format("truetype");
}
* {
      font-family: "system-ui", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.card {
      box-shadow: var(--glossy-button-box-shadow);
      border: var(--glossy-button-border);
      background-color: var(--chat-bg-shade-1);
      border-radius: 14px;
      transition: var(--box-shadow-transition);
}
.card-with-hover {
}
.card-with-hover:hover {
      transform: var(--box-transform);
      /* box-shadow: var(--box-shadow-hover); */
}
.icon-svg {
      filter: var(--icon-svg-filter);
      max-width: none;
      /* color: var(--shade-10); */
}
.inverted-icon-svg {
      filter: var(--icon-svg-inverted-filter);
}
.button-template {
      background-color: var(--etex-orange-primary);
      color: var(--inverted-text-color);
      border-radius: 2rem;
      padding: 8px 20px;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      width: min-content;
}
.body-bottom {
      width: 100%;
      height: 10px;
      display: flex;
      flex-grow: 1;
      overflow: hidden;
      background-color: var(--chat-bg-shade-2);
}

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
::selection {
      background: var(--etex-orange-seconday);
      color: var(--text-color);
}
html {
      background-color: #f9f9f9;
      height: 100%;
}

body {
      background-color: 100% 100%;
      height: max-content;
      min-height: 100%;
      display: flex;
      flex-direction: column;
      width: 100%;
      background-color: var(--chat-bg-shade-1);
      display: flex;
      flex-direction: row;
}

.body-top {
      width: 100%;
      position: fixed;
      z-index: 4000000;
}

@keyframes fadeInUp {
      from {
            opacity: 0;
            transform: translateY(10px);
      }
      to {
            opacity: 1;
            transform: translateY(0);
      }
}

.global-tooltip {
      position: fixed;
      background: #000000;
      color: #fff;
      padding: 2px 5px;
      border-radius: 4px;
      font-size: 12px;
      z-index: 9999;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
      animation: fadeIn 0.2s ease-in;
      margin-top: 9px;
}

.global-tooltip::after {
      content: "";
      position: absolute;
      bottom: -6px;
      left: 50%;
      margin-left: -5px;
      border-width: 6px;
      border-style: solid;
      border-color: #333 transparent transparent transparent;
      animation: fadeIn 0.2s ease-in;
      display: none;
}

.chat-agent-color {
      background-image: var(--chat-agent-color);
      border: 1px solid var(--chat-agent-ring);
      border-radius: 0.5rem;
}

.etex-search-agent-color {
      background-image: var(--etex-search-agent-color);
      border: 1px solid var(--etex-search-agent-ring);
      border-radius: 0.5rem;
}

.generate-image-agent-color {
      background-image: var(--generate-image-agent-color);
      border: 1px solid var(--generate-image-agent-ring);
      border-radius: 0.5rem;
}

.document-analyst-agent-color {
      background-image: var(--document-analyst-agent-color);
      border: 1px solid var(--document-analyst-agent-ring);
      border-radius: 0.5rem;
}

.document-builder-main-agent-color {
      background-image: var(--document-builder-main-agent-color);
      border: 1px solid var(--document-builder-main-agent-ring);
      border-radius: 0.5rem;
}

.writer-agent-color {
      background-image: var(--writer-agent-color);
      border: 1px solid var(--writer-agent-ring);
      border-radius: 0.5rem;
}

.coding-agent-color {
      background-image: var(--coding-agent-color);
      border: 1px solid var(--coding-agent-ring);
      border-radius: 0.5rem;
}
#SPLASHSCREEN_overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--chat-bg-shade-1);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 99999999;
}

#SPLASHSCREEN_logo {
      max-width: 100px;
      max-height: 100px;
      border: none;
      padding: 21px;
      filter: invert(1);
}
.splash-img-section {
      border-radius: 100%;
      box-shadow: var(--glossy-orange-button-box-shadow);
      background-color: var(--etex-orange-primary);
}

#SPLASHSCREEN_overlay.SPLASHSCREEN_fadeOut {
      opacity: 0;
      visibility: hidden;
      transition:
            opacity 0.6s ease,
            visibility 0.6s ease;
}

.splash-screen-loading {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      display: inline-block;
      border-top: 3px solid var(--etex-orange-primary);
      border-right: 3px solid transparent;
      box-sizing: border-box;
      animation: splash-rotation 1s linear infinite;
      position: absolute;
}

@keyframes splash-rotation {
      0% {
            transform: rotate(0deg);
      }
      100% {
            transform: rotate(360deg);
      }
}
.splash-text-section {
      font-size: 55px;
      margin-left: 20px;
      color: var(--etex-orange-primary);
      font-weight: 350;
}
.hidden {
      display: none;
}
.global-loading-spinner {
      aspect-ratio: 1;
      border-radius: 50%;
      background:
            radial-gradient(farthest-side, var(--etex-orange-primary) 94%, #0000) top/10px 0px no-repeat,
            conic-gradient(#0000 30%, var(--etex-orange-primary));
      -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
      animation: global-loading-spinner-l13 1s infinite linear;
}
@keyframes global-loading-spinner-l13 {
      100% {
            transform: rotate(1turn);
      }
}
.popup-header {
      display: flex;
      justify-content: space-between;
      padding: 10px;
      font-size: 19px;
      font-weight: bold;
}

.popup-header h2 {
      font-weight: 600;
}
.spin {
      animation: spin 1s infinite linear;
}
@keyframes spin {
      from {
            transform: rotate(0deg);
      }
      to {
            transform: rotate(360deg);
      }
}

.composer-container {
      display: grid;
      border-radius: 2rem;
      grid-template-columns: auto 1fr auto;
      grid-template-rows: auto auto auto;
      grid-template-areas:
            "previews previews previews"
            "leading primary trailing"
            "footer footer footer";
      column-gap: 0px;
      align-items: center;
      transition: padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.composer-container[data-expanded="true"] {
      grid-template-areas:
            "previews previews previews"
            "primary primary primary"
            "leading footer trailing";
}

.area-previews {
      grid-area: previews;
}
.area-leading {
      grid-area: leading;
}
.area-primary {
      grid-area: primary;
}
.area-trailing {
      grid-area: trailing;
}
.area-footer {
      grid-area: footer;
}
.user-input {
      transition: height 0.25s var(--ease);
}
[contenteditable]:empty:before {
      content: attr(data-placeholder);
      color: #9ca3af;
      cursor: text;
}
#userInput {
      scrollbar-width: thin;
      scrollbar-color: var(--chat-bg-shade-4) transparent;
}


@keyframes textShine {
      0% {
            background-position: 0% 50%;
      }
      100% {
            background-position: 100% 50%;
      }
}
.flowing-text {
      background: linear-gradient(to right, var(--etex-orange-primary) 20%, #ffffff 30%, var(--etex-orange-primary) 70%, var(--etex-orange-primary) 80%);
      background-clip: text;
      -webkit-text-fill-color: transparent;
      background-size: 500% auto;
      animation: textShine 5s ease-in-out infinite alternate;
      font-weight: 400;
      color: var(--etex-orange-primary);
      text-align: left;
}
@keyframes shake {
      0%,100% { transform: translateX(0); }
      20%      { transform: translateX(-6px); }
      40%      { transform: translateX(6px); }
      60%      { transform: translateX(-4px); }
      80%      { transform: translateX(4px); }
}
.line-clamp-2 {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
}


.thinScrollbar{
    scrollbar-width: thin;
    scrollbar-color: var(--bg-hover) #f9f9f900;
}

@keyframes shimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}
.shimmer-text {
    background: linear-gradient(
        90deg,
        var(--text-color) 25%,
        color-mix(in srgb, var(--text-color) 35%, transparent) 50%,
        var(--text-color) 75%
    );
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 2.5s linear infinite;
}