:root {
  /* Environment Colors */
  --bg-deep-abyss: #010712; 
  --bg-water-core: #041630; 

  /* Scintillation Star Colors */
  --star-blue: #CCEEFF;
  --star-orange: #FFE6CC;
  --star-green: #DDFFCC;
  --star-purple: #E6CCFF;
  --star-red: #FFCCCC;
  
  /* --- NEW: Trail Color --- */
  --trail-color: rgba(255, 255, 255, 0.7); /* Static, slightly transparent light blue */
  
  --main-color-one: #ff0066;
  --main-color-two: #000;
  --black-trans: rgba(0, 0, 0, 0.5);
  
  /*Rojo tomate:    #fb4B0e*/
  /*Verde fosforo:  #dcfa14*/
  /*Azure:          #008cff*/
  /*Devilish red:   #ff0066*/
  /*Lunar lilac:    #ebc4ff*/
  /*Thermal orange: #ff9900*/
  /*Goldilocks:     #ffd400*/
  /*Off white:      #fff3d6*/
  /*Purpur:         #ad48ab*/
  /*Cherry blossom  #ff9bdc*/
  }
  
  
  
@font-face {
  font-family: 'Saiba-45'; 
  src: url('/fonts/SAIBA-45.woff') format('woff');
  }
@font-face {
  font-family: 'Jersey'; 
  src: url('/fonts/Jersey10-Regular.ttf') format('truetype');
  }
@font-face {
  font-family: 'Cascadia'; 
  src: url('/fonts/CascadiaCode-VariableFont_wght.ttf') format('truetype');
  }
@font-face {
  font-family: 'Barcode'; 
  src: url('/fonts/LibreBarcode128-Regular.ttf') format('truetype');
  }
@font-face {
  font-family: 'Unsteady'; 
  src: url('/fonts/Unsteady Oversteer.otf') format('opentype');
  }
@font-face {
  font-family: 'Bitcount'; 
  src: url('/fonts/BitcountSingle.ttf') format('truetype');
  }
@font-face {
  font-family: 'DotGothic'; 
  src: url('/fonts/DotGothic16-Regular.ttf') format('truetype');
  }


  
  


body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(circle at center, var(--bg-water-core) 0%, var(--bg-deep-abyss) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* =========================================
   2. MARINE SNOW FLAKES & TRAILS
   ========================================= */
#deepblue{
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
}

/* 
  The main wrapper for the flake. 
  It is NO LONGER rotated. It just handles the X/Y movement.
*/
.flake {
  position: absolute;
  top: 0; left: 0;
  will-change: transform;
}

/* 
  --- NEW: The Flake Body ---
  We use ::before to create the rotated diamond shape 
  so it doesn't mess up the angle of the trail.
*/
.flake::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  
  /* Make it a diamond */
  transform: rotate(45deg); 
  
  /* Inherit animated color */
  background-color: currentColor; 
  
  /* The color cycling animation */
  animation: scintillate 0.3s infinite step-end;
  
  /* We use a custom CSS variable passed from JS for the random offset! */
  animation-delay: var(--anim-delay); 
}

/* 
  --- NEW: The Trail ---
  We use ::after to create a vertical gradient fading upwards.
*/
.flake::after {
  content: "";
  position: absolute;
  
  /* Start exactly in the center of the diamond and go straight UP */
  bottom: 50%;
  left: 50%;
  transform: translateX(-50%);
  
  /* JS will dynamically set these based on the depth (z) */
  height: var(--trail-height);
  width: var(--trail-width);
  
  /* Pointy gradient fading to transparent at the very top */
  background: linear-gradient(to top, var(--trail-color) 0%, transparent 100%);
  
  /* Put it slightly behind the diamond */
  z-index: -1; 
}

/* Cycles smoothly between the CSS variables */
@keyframes scintillate {
  0%, 100% { color: var(--star-blue); }
  20%      { color: var(--star-orange); }
  40%      { color: var(--star-green); }
  60%      { color: var(--star-purple); }
  80%      { color: var(--star-red); }
}









.col{
  display: flex;
  flex-direction: column;
  width: fit-content;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1;
  padding: 2dvw 0dvw;
  gap: 2dvw;
}

.col::-webkit-scrollbar{
  width: 1dvw; 
}

.col::-webkit-scrollbar-track{
  background: transparent;
}

/* El width final del thumb es =border-width */
.col::-webkit-scrollbar-thumb{
  background-color: var(--main-color-one);
  border-left: 0.7dvw solid transparent;
  border-top: 2dvw solid transparent;
  border-bottom: 2dvw solid transparent;
  background-clip: padding-box;
}


.mailbox{
  height: 30dvw;
  width: 70dvw;
  border: 0.1dvw solid var(--main-color-one);
  background-color: var(--black-trans);
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  font-family: "Cascadia";
  }

.contactbox{
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 20%;
  background-color: var(--black-trans);
  border-right: 0.1dvw solid var(--main-color-one);
  }
  
.chatbox{
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 80%;
  background-color: transparent;
  }
  
.emailheader{
  width: 100%;
  height: 3dvw;
  border-bottom: 0.1dvw solid var(--main-color-one);
  display: flex;
  flex-direction: row;
  align-items: center;
  }

.emailheader p{
  font-family: "Saiba-45";
  font-size: 2.5dvw;
  color: var(--main-color-one);
  padding-left: 0.9dvw;
  }












/* =========================================
   CONTACT CARDS
   ========================================= */
.contact-card {
  display: flex;
  align-items: center;
  border-bottom: 0.1dvw solid var(--main-color-one);
  cursor: pointer;
  color: var(--main-color-one);
  width: 100%;
  height: 4dvw;
}

.contact-card:hover{
  background-color: rgba(40, 40, 50, 0.5);
}

/* The active state inverts the colors! */
.contact-card.active {
  background-color: var(--main-color-one);
  color: var(--main-color-two);
}

.contact-pfp {
  width: 4dvw;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  image-rendering: pixelated;
}

.contact-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden; /* Prevents long text from breaking the layout */
  margin-left: 0.5dvw;
}

.contact-name{
  font-weight: bold; 
  font-size: 1dvw;
  }

.contact-preview {
  font-size: 0.8dvw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* Adds '...' if text is too long */
}

/* Hidden by default, visible when active */
.contact-indicator {
  font-weight: bold;
  opacity: 0;
  font-size: 1.7dvw;
}
.contact-card.active .contact-indicator {
  opacity: 1;
}

/* =========================================
   CHAT THREADS & MESSAGES
   ========================================= */
.chat-thread {
  display: none; /* Hide all threads by default */
  flex-direction: column;
  height: 100%;
  padding: 1.5dvw;
  overflow-y: auto;
  gap: 2dvw;
  }

.chat-thread::-webkit-scrollbar{ 
  width: 1dvw;
  }

.chat-thread::-webkit-scrollbar-track{
  background: transparent;
  }

.chat-thread::-webkit-scrollbar-thumb{
  background-color: var(--main-color-one);
  border: 0.5dvw solid transparent;
  background-clip: padding-box;
  }

/* Show the thread that has the .active class */
.chat-thread.active {
  display: flex;
  }

.msg{
  display: flex;
  flex-direction: column;
  max-width: 85%;
  gap: 0.5dvw;
  color: var(--main-color-one);
  }

/* Align Received to left, Sent to right */
.msg.received{
  align-self: flex-start;
  }

.msg.sent{ 
  align-self: flex-end; 
  align-items: flex-end; 
  }

/* Message Headers */
.msg-header{
  display: flex;
  align-items: center;
  gap: 0.8dvw;
  }

.msg.sent .msg-header{
  flex-direction: row-reverse; 
  } /* Swaps PFP side for sent msgs */

.msg-pfp{
  width: 3dvw;
  aspect-ratio: 1 / 1;
  border: 0.1dvw solid var(--main-color-one);
  image-rendering: pixelated;
  }

.msg-sender-info{ 
  display: flex; flex-direction: column; 
  }

.msg.sent .msg-sender-info { 
  align-items: flex-end; 
  }
  
.msg-name{ 
  font-weight: bold; font-size: 1dvw; 
  }
  
.msg-email{ 
  font-size: 0.9dvw; opacity: 0.7; 
  }

/* Message Body */
.msg-body{
  padding: 1dvw;
  border: 0.1dvw solid var(--main-color-one);
  display: flex;
  flex-direction: column;
  gap: 1dvw;
  font-size: 1dvw;
  line-height: 1.2;
  /* Optional: gives the message a slight background tint */
  background-color: rgba(40, 40, 50, 0.5); 
  }

.type-text{
  margin: 0;
  min-height: 1.4em; /* Prevents the box from collapsing before text appears */
  }

/* =========================================
   ATTACHMENTS
   ========================================= */
.attachment{
  display: flex;
  align-items: center;
  gap: 1dvw;
  padding: 0.8dvw;
  border: 0.1dvw dashed var(--main-color-one);
  cursor: pointer;
  text-decoration: none;
  color: var(--main-color-one);
  transition: all 0.1s ease;
  font-size: 0.8dvw;
  }

.attachment:hover{
  background-color: var(--main-color-one);
  color: var(--main-color-two);
  }

.attachment-size{
  margin-left: auto; opacity: 0.7;
  }







  
.BB{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2dvw;
  width: 70dvw;
  height: 100dvw;
  border: 0.1dvw solid var(--main-color-one);
  background-color: var(--black-trans);
  }
  
.BBheader{
  width: 100%;
  height: 3dvw;
  border-bottom: 0.1dvw solid var(--main-color-one);
  display: flex;
  flex-direction: row;
  align-items: center;
  }
  
.BBheader p{
  font-family: "Saiba-45";
  font-size: 2.5dvw;
  color: var(--main-color-one);
  padding-left: 0.9dvw;
  padding-right: 0.5dvw;
  width: 43%;
  }
  
.bulletin{
  height: 20dvw;
  width: 90%;
  border: 0.1dvw solid var(--main-color-one);
  background-color: var(--black-trans);
  display: flex;
  flex-direction: row;
  align-items: center;
  }

.bulletinbody{
  height: fit-content;
  width: 75%;
  }

.bulletintitle{
  font-family: "Cascadia";
  font-weight: 500;
  height: 2dvw;
  width: 100%;
  color: var(--main-color-two);
  background-color: var(--main-color-one);
  }
  
.bulletintext{
  
  }  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
.ticker-wrapper{
  width: 57%;
  height: 3dvw;
  overflow: hidden;
  background: var(--main-color-one);
  padding: 0dvw 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.ticker-track{
  display: flex;
  white-space: nowrap;
  width: max-content;
  /* Adjust '20s' to make the conveyor belt faster or slower */
  animation: scroll-left 30s linear infinite;
}

.ticker-item{
  font-family: "Bitcount";
  font-weight: 400;
  font-variation-settings: "slnt" 0, "CRSV" 0, "ELSH" 0, "ELXP" 0;
  font-size: 1.7dvw;
  margin-bottom: -0.2dvw;
  color: var(--main-color-two);
  white-space: pre;
  padding-left: 0dvw; 
}

@keyframes scroll-left{
  0%{
    transform: translateX(0);
  }
  100%{
    /* Shifts track by -50%, which equals the exact length of Set A */
    transform: translateX(-50%);
  }
}