/* styles.css */

 :root {
    --primary-color: #2B2B3C;
    --gpt-button-color: black;
    --collapsed-sb-color: color-mix(in lab, var(--primary-color) 98%, black);
    --primary-lighter: color-mix(in lab, var(--primary-color) 95%, white);
    --sidebar-color: color-mix(in lab, var(--primary-color) 90%, black);
    --bubble-color: #3C405C;
    --text-color: #FFF7DE; 
    --font-stack: "Roboto", sans-serif;
    --sidebar-offset: 53px;
  }
 
 /* Basic reset */
  * { box-sizing: border-box; margin: 0; padding: 0; }

 html, body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  height: 100%; /* ensure body fills viewport */
  overflow: hidden;
}

code, pre {
  font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", Consolas, 
               "Courier New", monospace;
}

/* fix the annoying click and drag when clicking on imgs attached to buttons  */
button img {
  -webkit-user-drag: none; /* Safari/Chrome */
  user-select: none;
  pointer-events: none; /* optional: disables direct interaction */
}

 .app {
    display: grid;
    grid-template-columns: 53px 1fr; /* collapsed sidebar + main by default */
    height: 100vh;
    transition: grid-template-columns 0.3s;
    overflow: hidden;
  }


.white-box {
  background: transparent;
  border: 0.5px solid rgb(41, 41, 41);
  /* padding: 1px;             */
  border-radius: 4px;     
  display: inline-block;   /* shrink to fit content */
  /* box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); */
  opacity: 0.4;
}



.preview-row {
  display: flex;
  align-items: center;
  gap: 10px;
}


  /* small screens: stack */
  @media (max-width:900px) {
    .app { grid-template-columns: 1fr; padding:12px; gap:12px; }
    .sidebar { order:2; min-height:120px; }
    .chat { order:1; height: calc(100vh - 200px); }
  }


  /* button #save{
    background-color: transparent;
    color: transparent;
  } */
  /* scrollbar tiny polish */
  /* .chat-window::-webkit-scrollbar, .conversations::-webkit-scrollbar { width:8px; }
  .chat-window::-webkit-scrollbar-thumb { background: rgba(12,20,30,0.07); border-radius:6px; } */

/* ANIMATED CIRCLE WHILE WAITING FOR RESPONSE */
.thinking-loader {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 12px;
  /* background: var(--bubble-color, #2a2a2a); */
  width: fit-content;
  margin-left: 0;
}

.thinking-loader span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-color, #fff);
  opacity: 0.5;
  animation: thinkingPulse 1.4s infinite ease-in-out;
}

.thinking-loader span:nth-child(1) { animation-delay: 0s; }
.thinking-loader span:nth-child(2) { animation-delay: 0.2s; }
.thinking-loader span:nth-child(3) { animation-delay: 0.4s; }

@keyframes thinkingPulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}
  /* ANIMATED CIRCLE WHILE WAITING FOR RESPONSE */