:root {
  /* original color vars */
  --clr-1: #f7941d;
  --clr-2: #f15a29;
  --clr-3: #ef4136;
  --clr-4: #ec008c;
  --clr-5: #c220ac;
  --clr-bg: #00001b;
  --clr-dk1: #00001b;
  --clr-dk2: #17172b;
  --clr-dk3: #222236;
  --clr-dk4: #333346;
  --clr-dk5: #444457;
  --clr-dk6: #55556a;

  --leak-overlay-opacity: .4;
  --leak-blur-amount: 120px;
  --leak-slow: 24s;
  --leak-med: 18s;
  --leak-fast: 15s;
  --leak-glow-intensity: 1.1;
  --drift-start-opacity: .5;
  --drift-peak-opacity: .8;

  /* NEW: animation controls */
  --raceglow-final-speed: 8s;
  --raceglow-initial-speed: 1.5s;
  --raceglow-cooldown-time: 4s;
  --raceglow-current-speed: var(--raceglow-final-speed);
  --footer-bottom-target: 1rem;
}

/*~*~*~ aethetics ~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~**/
.chat-inputs-controls {
  position:relative;
  bottom:7px;
  width:100%;
  display:grid;
  grid-template-columns: 1fr 1fr;
  box-shadow: 0px -15px 11px -5px var(--clr-bg);
  -webkit-box-shadow: 0px -15px 11px -5px var(--clr-bg);
  -moz-box-shadow: 0px -15px 11px -5px var(--clr-bg);
}
.chat-inputs-controls .chat-input-send-button
,.chat-inputs-controls .chat-input-file-button{
  background:transparent; 
  border:none;
  transition:all .3s ease-in-out;
  max-width:2rem;
}
.chat-input-file-button
,.chat-input-file-button[disabled]
,.chat-input-file-button:disabled{
  color:var( --clr-dk5);
  margin-left:.5rem;
}
.chat-input-file-button:hover{
  color:var(--clr-4);
}
.chat-input-send-button{
  color:var(--clr-4);
  justify-self: end;
  margin-right:1rem;
}
.chat-input-send-button[disabled]{
  color:var( --clr-dk4);
}
.chat-files{
  margin: 0rem .8rem 0 .8rem;
  max-height: 200px;
  overflow: scroll;
  color: var(--clr-5);
}
.chat-file {
  display: grid;
  grid-template-columns: 1.5rem 1fr 1.2rem;
  margin: .5rem 0;
  padding: .3rem;
  border-radius: 0.4rem;
  align-items: center;
}
.chat-message-file .chat-file {
  grid-template-columns: 1.1rem 1fr 1.2rem;
}
.chat-file:nth-of-type(odd) {
  background: rgba(255, 255, 255, 0.1);
}
.chat-file svg
,.chat-file p{
  cursor:pointer;
}
.chat-file-name{
  margin:0;
  font-family: 'DM Sans', sans-serif;
  font-size: .6rem!important;
  font-weight: 300;
  color: var(--clr-5);
}
.chat-file-delete{
  justify-self:right;
  zoom: 0.7;
}
.chat-message-files{
  padding:1rem 0 .5rem 0;
  color: rgba(255, 255, 255, 0.4);
}
.chat-message-file svg {
  zoom: 0.7;
}
svg.chat-file-preview {
  justify-self: end;
}
.chat-body {
/*  transition:all 1s ease-in-out;*/
}
.chat-message{
  font-family: 'DM Sans', sans-serif;
  font-size:21px;
  font-weight:300;
  letter-spacing:.03 Iem;
  padding:.5em 1em;
  border-radius:20px;
  margin-top:1em;
  margin-bottom:1em;
  color:rgba(255, 255, 255, 0.7);
  position:relative;
}
.chat-message-actions {
  position: absolute;
  top: -1rem;
  left: 1rem;
  display: flex;
  column-gap: 0.6rem;
  transition:all .3s ease-in-out;
  opacity: 0;
  transform: translateY(-10px);
}
.chat-message.chat-message-from-bot:hover .chat-message-actions{
  opacity: 1;
  transform: translateY(0px);
}
.chat-message-actions .copy-btn {
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.chat-message-actions .copy-btn:hover {
  opacity: 1;
}
.chat-message.chat-message-from-user .chat-message-actions {
    display: none;
}
.chat-message.chat-message-from-user{
  background-color: #333348;
  margin-left:50%;
  display:inline-block;
  float:right;
  clear:both;
}
.chat-message.chat-message-from-user::after{
  content:'';
  border-color: transparent;
  border-style: solid;
  border-width: 10px 10px;
  border-rightt:10px solid #333348;
  border-bottom:10px solid #333348;
  position:absolute;
  bottom:0px;
  right:0px;
}
.chat-message.chat-message-from-bot::before {
    content: ''; 
    display: inline-block; 
    width: 30px;
    height: 30px;
    background-image: url('https://241973156.fs1.hubspotusercontent-na2.net/hubfs/241973156/cesium-ai-automation-logo-_-full-color-light.svg');
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center; 
    vertical-align: middle;
    position:absolute;
    left:-15px;
}
.chat-message.chat-message-from-bot{
  text-align:left;
  margin-right:20%;
  clear:both;
  position: relative;
}
.chat-message-from-bot .chat-message-markdown {
  opacity: 0;
  transform: translateY(0.25em);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.chat-message-from-bot .chat-message-markdown.revealed {
  opacity: 1;
  transform: translateY(0);
}
.chat-message p{
  font-size: 0.9rem;
  margin:0;
  display: inline-block;
}
.chat-powered-by{display:none;}


/*~*~*~ layout base ~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~**/
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: var(--clr-bg); }
header.czm-header.czm-nonav { background: transparent; }
.chat-active .czm-header {
    transform: translateY(-100%);
    opacity:0;
    filter: blur(50px);
    transition: opacity .6s ease, filter .6s ease, transform 3s ease-in;
}

.chat-container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 700ms ease;
  z-index: 100;
}
.chat-container.is-visible { opacity: 1; }

.chat-wrapper {
  width: 100%;
  max-width: 768px;
  display: flex;
  flex-direction: column;
  height: 100dvh;
}
.chat-container:has(.chat-messages-list:empty) .chat-wrapper {
  justify-content: center;
  align-items: center;
  height: auto;
  gap: 1rem;
}
.chat-container:has(.chat-messages-list:not(:empty)) .chat-wrapper {
  height: 100%;
}

/*~*~*~ header ~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~**/
.chat-header {
  text-align: center;
  margin-top: 0;
  opacity: 1;
  transition: all 3s ease;
}
.chat-heading h1{
  transform: translateY(10px);
}
.chat-heading h1,
.chat-header p {
  opacity: 0;
  transition: all 600ms ease;
}
.chat-header.is-ready .chat-heading h1,
.chat-header.is-ready p {
  opacity: 1;
  transform: translateY(0);
}
.chat-header.header-fade {
  opacity: 0;
  filter: blur(50px);
}
.chat-header.header-hidden {
  display:none;
}
.chat-container:has(.chat-messages-list:not(:empty)) .chat-header {
  opacity: 0;
  /*  transform: translateY(-30vh);*/
}
.chat-header p {
  letter-spacing: .02em;
  font-weight: 600;
  line-height: 0.8em;
  margin: -0.4em 0 0.7em;
  color: var(--clr-5) !important;
  font-family: Quicksand, sans-serif;
}
.chat-header p:not(.chat-file-name){
  font-size: .9em;
}

/*~*~*~ messages area ~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~**/
.chat-body {
  min-height: 7%;
  transition: max-height 900ms ease-in-out;
}
.chat-body:has(.chat-messages-list:empty) {
  max-height: 0;
  overflow-y: hidden;
}
.chat-container:has(.chat-messages-list:not(:empty)) .chat-body {
  flex-grow: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.chat-messages-list {
  min-height: 0;
  padding: 0 2em 0 1em;
  transition: max-height 600ms ease;
  overflow: auto;
}
.chat-message pre {
    margin: .5em 0;
    border-radius: 0.7em;
    padding: 1em;
    font-size: 0.7em;
    background: rgba(85, 85, 85, 0.2);
}
.chat-message code {
    background: transparent;
    color: #ccccd9;
}
.chat-message ul {
    margin: 1em 0;
    font-size: 0.8em;
    background: rgba(85, 85, 85, 0.2);
    border-radius: 0.7em;
    padding: 1em 1em 1em 2em;
}
.chat-message li {
    margin: .25em;
}
.chat-message ul li::marker {
    content: "▶ ";
    color: #b23c96;
    font-size: 0.5em;
}

/*~*~*~ footer & input ~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~**/
.chat-footer,
.chat-input,
.chat-inputs,
textarea {
  width: 100%;
  max-width: 768px;
}
.chat-inputs {
  border-radius: 15px;
  background-color: var(--clr-bg);
  border: 1px solid var(--clr-dk2);
  position: relative;
  padding: 2px;
}
.chat-inputs textarea {
  background-color: transparent;
  padding: 1rem 1rem 2.5rem 1rem;
  color: white;
  min-height: 150px;
  resize: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 21px;
  font-weight: 300;
  letter-spacing: .02em;
  border: none;
  outline: none;
}
.chat-footer {
  flex-shrink: 0;
  opacity: 0;
  filter: blur(30px);
  transition: opacity 0.3s ease, filter 0.6s ease; 
}

/*~*~*~ raceglow ~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~**/
@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.chat-inputs::before {
  content: "";
  position: absolute;
  inset: -1.4px;
  z-index: -1;
  border-radius: inherit;
  opacity: 0.5;
  background: conic-gradient(
    from var(--gradient-angle),
    var(--clr-5),
    var(--clr-4),
    var(--clr-3),
    var(--clr-2),
    var(--clr-1),
    var(--clr-bg),
    var(--clr-bg),
    var(--clr-bg)
  );
  filter: blur(10px);
  will-change: transform, opacity;
  animation: raceglow var(--raceglow-current-speed) linear infinite;*/
}
.chat-inputs:focus-within::before,
.chat-container:has(.chat-messages-list:not(:empty)) .chat-inputs::before {
  opacity: 0;
}
@keyframes raceglow {
  from { --gradient-angle: 0deg; }
  to { --gradient-angle: -360deg; }
}

/*~*~*~ lightleaks  ~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~**/
.stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; isolation: isolate; }
.content { position: relative; z-index: 30; text-align: center; padding: 3rem; pointer-events: none; }
.title { font-size: clamp(22px, 3.5vw, 44px); letter-spacing: 0.02em; font-weight: 600; color: rgba(255,255,255,0.92); text-shadow: 0 6px 30px rgba(0,0,0,0.6); }
.subtitle { margin-top: .6rem; color: rgba(255,255,255,0.65); font-size: clamp(12px, 1.6vw, 16px); }
.leak-overlay { position: absolute; inset: 0; z-index: 30; background: var(--clr-bg); opacity: var(--leak-overlay-opacity); }
.leaks { position: absolute; inset: 0; z-index: 20; mix-blend-mode: screen; }
.leak { position: absolute; width: 80vmax; height: 80vmax; border-radius: 50%; opacity: var(--leak-glow-intensity); filter: blur(var(--leak-blur-amount)); background-repeat: no-repeat; background-size: cover; }
.leak.l1 { left: -20%; top: 0%; background: radial-gradient(30% 40% at 30% 40%, #b23c96, transparent 60%), radial-gradient(20% 30% at 70% 60%, var(--clr-4), transparent 70%); animation: drift1 var(--leak-slow) linear infinite alternate; }
.leak.l2 { right: -25%; bottom: -10%; background: radial-gradient(28% 36% at 70% 30%, var(--clr-3), transparent 65%), radial-gradient(18% 20% at 20% 80%, var(--clr-2), transparent 75%); animation: drift2 var(--leak-med) ease-in-out infinite alternate; }
.leak.l3 { left: 25%; top: 35%; background: radial-gradient(35% 40% at 50% 50%, var(--clr-1), transparent 60%); animation: drift3 var(--leak-fast) cubic-bezier(.2,.8,.3,.9) infinite alternate; }
@keyframes drift1 { 0% { transform: translate3d(-15%, -5%, 0) scale(1) rotate(0deg); opacity: var(--drift-start-opacity);} 50% { transform: translate3d(25%, -25%, 0) scale(2) rotate(180deg); opacity: var(--drift-peak-opacity);} 100% { transform: translate3d(-10%, -35%, 0) scale(1.02) rotate(360deg); opacity: var(--drift-start-opacity);} }
@keyframes drift2 { 0% { transform: translate3d(10%, 15%, 0) scale(1); opacity: var(--drift-start-opacity);} 50% { transform: translate3d(-20%, -15%, 0) scale(1.26); opacity: var(--drift-peak-opacity);} 100% { transform: translate3d(30%, 10%, 0) scale(1.02); opacity: var(--drift-start-opacity);} }
@keyframes drift3 { 0% { transform: translate3d(-10%, -15%, 0) scale(2) rotate(0deg); opacity: var(--drift-start-opacity);} 50% { transform: translate3d(-10%, 25%, 0) scale(2.24) rotate(180deg); opacity: var(--drift-peak-opacity);} 100% { transform: translate3d(-10%, 10%, 0) scale(2.01) rotate(360deg); opacity: var(--drift-start-opacity);} }

.chat-layout:has(.chat-messages-list:empty) {
    transform: translateY(-20%);
}

@media (max-width: 873px){
  .chat-wrapper {
    max-width: 90vw;
  }
  .chat-header hi
  ,.chat-header .hi{
    font-size: 12vw;
  }
  .chat-header p{
    font-size: 6vw;
  }
  .chat-footer
  , .chat-input
  , .chat-inputs
  , textarea {
    width: 90vw;
    max-width: 768px;
  }
  .chat-message p{
    font-size:.8rem;
  }
  .chat-messages-list {
    padding: 0 1.9vw 0 1.3em;
  }
  .chat-message.chat-message-from-user {
    margin-left: 30%;
  }
  .chat-message.chat-message-from-bot {
    margin-right: 0%;
  }
  .chat-body:has(.chat-messages-list:not(:empty)) {
    max-height: 95vh;
  }
  .chat-file-name {
    font-size: 2.2vw !important;
  }
}
@media (pointer: coarse), (hover: none) {
  .chat-message.chat-message-from-bot .chat-message-actions{ 

  }
}

/*~*~*~ placeholder  ~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~**/
.chat-message-typing-body span {
  display: block;
  width: 100%;
  height: 2em;
  margin: 0 0 .5em 0;
  border-radius: 0.3em;
  animation-name: placeholderShimmer;
  animation-duration: 1.5s;
  animation-direction: reverse;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  background: linear-gradient(-45deg, #333348 9%, #444457 9.1%, #333348 50%);
  background-size: 200% 100%;
  opacity:.2;
  position: relative;
}
/* stagger */
.chat-message-typing-body span:nth-child(1) {
  animation-delay: 0s;
}
.chat-message-typing-body span:nth-child(2) {
  animation-delay: .375s;
}
.chat-message-typing-body span:nth-child(3) {
  animation-delay: .75s;
}
@keyframes placeholderShimmer {
  from { background-position: -100% 0; }
  to { background-position: 100% 0; }
}