:root {
--console-spacer-height: 150px;
}



body {
  font-size: 1rem;
  background-color: white;
  color: black;
}




/* Base styling for skeleton placeholders */
.skeleton {
  background: #e2e8f0;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

/* Shimmer animation overlay */
.skeleton::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
  90deg,
  rgba(255, 255, 255, 0) 0%,
  rgba(255, 255, 255, 0.4) 20%,
  rgba(255, 255, 255, 0.6) 60%,
  rgba(255, 255, 255, 0) 100%
  );
  animation: shimmer 1.5s infinite;
  content: '';
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* Shape dimensions matching your actual website elements */
.skeleton-card {
  display: flex;
  gap: 16px;
  padding: 20px;
}

/* Container that stacks the skeleton text lines vertically */
.skeleton-text-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  /* Fills up the remaining space inside a card */
  gap: 10px;
  /* Creates a consistent gap between text lines */
}

/* Base style for all skeleton lines */
.skeleton-line {
  background: #e2e8f0;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

/* Specific size for the Title Line placeholder */
.skeleton-title-line {
  width: 40%;
  /* Shorter than body text, just like a real headline */
  height: 20px;
  /* Thicker height to mimic a bold heading */
}

/* Specific size for the Body Text lines placeholder */
.skeleton-body-line {
  width: 90%;
  /* Longer lines for content text description */
  height: 14px;
  /* Thinner height matching standard paragraph fonts */
}

/* Optional: Shorter last line to make the layout paragraph look natural */
.skeleton-body-line.short {
  width: 65%;
}


.skeleton-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  /* Makes it a circle sketch */
  background-color: red;
}


.skeleton-title-line {
  width: 150px;
  height: 24px;
  margin-bottom: 8px;
}

.skeleton-body-line {
  width: 250px;
  height: 14px;
}


.skeleton-tag-line {
  width: 350px;
  height: 14px;
}



/* Styling for the skeleton placeholder */
.api-skeleton-box {
  width: 200px;
  height: 20px;
  background-color: #e2e8f0;
  margin-bottom: 10px;
}


/*
*
* style for the "real" content
*
*/


/* Base styling for content */
.content {
  background: #e2e8f0;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}



.title-line {
  width: 150px;
  height: 24px;
  margin-bottom: 8px;
}

.body-line {
  width: 250px;
  height: 14px;
}


.tag-line {
  width: 350px;
  height: 14px;
}

.avatar {
  background: #e2e8f0;
  border-radius: 4px;
  /* position: relative;
  overflow: hidden; */
}

.avatar-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  /* Makes it a circle sketch */
  background-color: red;
}



.container {
  border: red dotted 4px;
}


.dynamic-text {
  font-size: 24px;
  color: red;
}



/* Shape dimensions matching your actual website elements */
.card {
  display: flex;
  gap: 16px;
  padding: 20px;
}

/* Container that stacks the skeleton text lines vertically */
.text-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  /* Fills up the remaining space inside a card */
  gap: 10px;
  /* Creates a consistent gap between text lines */
}




.outlet {
  opacity: 1;
  transition: opacity 2s ease;
}

/* This class is added by JavaScript */
.outlet.hidden {
  opacity: 0;
  /* transition: opacity 2s ease; */
  /* Stop interaction while fading */
  pointer-events: none;
}


.outlet {
  background: blue;
  border-radius: 40 px;
}


.slide-collapse-div {
  /* Set an explicit or safe max-height that accommodates your content */
  max-height: 200px; 
  opacity: 1;
  transform: translateX(0);
  
  /* Ensure padding and margins are configured here to animate them later */
  padding: 20px;
  margin-bottom: 20px;
  background-color: #f4f4f4;
  border-radius: 8px;
  box-sizing: border-box;
  /* Crucial: hides text as the box height collapses */
  overflow: hidden;

  /* Timing: 
    Slide/fade happens instantly,
    height collapse waits 0.2s */
  transition: 
    transform 4s ease-out, 
    opacity 4s ease-out, 
    max-height 4s ease-out 2s, 
    padding 4s ease-out 2s, 
    margin-bottom 4s ease-out 2s;
}




/* The trigger state */
.slide-collapse-div.hidden {
  opacity: 0;
  /* Slides completely out of bounds to the right */
  transform: translateX(120%);
  
  /* Collapses the physical space down to zero */
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  /* Prevents phantom borders from showing up */
  border: none;
}




.slide-open-div {
  /* Set an explicit or safe max-height that accommodates your content */
  max-height: 0px;
  opacity: 0;
  transform: translateX(-120%);
  
  /* Ensure padding and margins are configured here to animate them later */
  padding: 0px;
  margin-bottom: 0px;
  background-color: #f4f4f4;
  border-radius: 8px;
  box-sizing: border-box;
  /* Crucial: hides text as the box height collapses */
  overflow: hidden;

  /*
  * Timing: 
  * Slide/fade happens instantly,
  * height collapse waits 0.2s
  */
  transition: 
    transform 4s ease-in, 
    opacity 4s ease-in, 
    max-height 4s ease-in 2s, 
    padding 4s ease-in 2s, 
    margin-bottom 4s ease-in 2s;
}



/* The trigger state */
.slide-open-div.show {
  opacity: 1;
  /* Slides completely in to the right */
  transform: translateX(0);
  
  /* Open the physical space from zero */
  max-height: 200px;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  /* Prevents phantom borders from showing up */
  /* border: none; */
  border: solid 4px brown;
}




/* Optional styling for the trailing content */
.following-content {
  padding: 20px;
  background-color: #e0f7fa;
}





/*
*
* console
*
*/

/* Styling for our custom mobile console output box */
#console-box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  background: #1e1e1e;
  color: #00ff00;
  font-family: monospace;
  /* font-size: 12px; */
  font-size: 18px;
  padding: 10px;
  box-sizing: border-box;
  overflow-y: scroll;
  border-top: 2px solid #444;
  z-index: 9999;
}

.console-spacer {
  /*height: 150px;*/
  height: var(--console-spacer-height);
}