:root {
      --bg: #FFFFFF;
      --bg-secondary: #F7F7F5;
      --user-bubble: #C8E6C9;
      --ai-bubble: #DAEEF5;
      --ai-bubble-border: #B8DDE8;
      --accent: #7C6AF7;
      --accent-hover: #6558e0;
      --text: #1A1A1A;
      --text-muted: #6B7280;
      --border: #E5E7EB;
      --shadow: 0 4px 24px rgba(0,0,0,0.07);
      --shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
    }

body, html{
  position: absolute;
	height: 100%;
	margin: 0;
	width:100%;
	display: flex;
	flex-direction: column;
	justify-content: center; /* Center the full-height-div vertically */
	align-items: center;
	background-color:#f4f4f9;
}
button {
    padding: 10px;
    border-radius: 12px;
    border: none;
    background: transparent;
    color: #4b4a4a;
    font-size: large;
    border-radius:25px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

button:hover {
  background-color: transparent;
	color:#818cf8;
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgba(124, 58, 237, 0.4);
}
.container::-webkit-scrollbar {
  display: none;
  /* for Chrome, Safari, and Opera */
}
@media only screen and (max-width:600px){
.container{
    /*position: absolute;*/
    z-index: 0;
    overflow-y:scroll;
    flex: 1;
    width: 90vw; /* Set the desired width */
    margin: 0 auto;
    padding: 2.5vw;
    background-color:white;
    box-shadow:0 5px 15px rgba(0,0,0,0.1);
	
}
.opener{
}
}
@media only screen and (min-width:600px){
	.container{
		/*position: absolute;*/
		z-index: 0;
		overflow-y:scroll;
		flex: 1;
		width: 50vw; /* Set the desired width */
		margin: 0 auto;
		padding: 5vw;
		background-color:white;
		box-shadow:0 5px 15px rgba(0,0,0,0.1);
		transition: 0.8s;
		
	}
	.opener{
	  margin-top:25vh;
	  margin-bottom:25vh;
	  min-height:200px;
	  border-radius:20px;
	}
	
}
#message-input{
	display: flex;
  z-index: 0;
  position: relative;
  min-height: 44px;
  background: #fff;
  border: 1px solid #dfe1e5;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border-radius: 24px;
  margin: 0 auto;
  width: 70%;
  outline:none;
  max-width: 584px;
  
 }

#message-form{
  margin: 0 auto 200px auto ;
  width: auto;
  
  padding-top: 6px;
  position: relative;
}
.waviy {
  text-align: center;
  position: relative;
}
.waviy span {
  position: relative;
  display: inline-block;
  font-size: 40px;
  color: black;
  text-transform: uppercase;
  animation: flip 2s 4s;
  animation-delay: calc(.2s * var(--i))
}
@keyframes flip {
  0%,80% {
    transform: rotateY(360deg) 
  }
}
#button_options{
  display: flex;
  z-index: 0;
  position: relative;
  min-height: 44px;
  background: #fff;
  
  box-shadow: none;
  align-items: center;  
  margin: 0 auto;
  width: 70%;
  
  max-width: 584px;
}
.controller_popup_buttons{
  position: absolute;
  bottom: 0;
  right: 0;
}
.message-container{
  overflow: scroll;
}
#thoughts-bubble{
	background-color:#b388ff;
	color:rgb(230,225,225);
	border-radius:10px;
	padding:10px;
}
.dropdown {
position: relative;
}


.dropdown-menu {
display: none;
position: absolute;
top: 46px;
right: 0;
min-width: 160px;
background: white;
border-radius: 10px;
box-shadow: 0 6px 18px rgba(0,0,0,0.12);
overflow: hidden;
z-index: 20;
}


.dropdown:focus-within .dropdown-menu {
display: block;
}


.dropdown-menu button {
width: 100%;
padding: 12px 16px;
border: none;
text-align: left;
background: white;
cursor: pointer;
font-size: 14px;
}
.dropdown-menu button:hover {
background: #f6f5ff;
}
.lifr-actions {
	display: flex;
	gap: 10px;
	margin-top: 20px;
	align-items:center;
	justify-content:center;	
}
footer {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 1rem;
      background: rgba(10, 10, 20, 0.85);
      backdrop-filter: blur(10px);
      border-top: 1px solid rgba(99, 102, 241, 0.15);
      text-align: center;
      color: #dddddd;
      font-size: 0.9rem;
      z-index: 90;
      box-shadow: 0 -7px 7px rgba(10,10,20,0.1);
    }
input::placeholder{
	transition: opacity 0.4s ease;
	opacity:1;
	color:rgb(80,80,80);
}
input.placeholder-fade::placeholder {
opacity:0;
}

#thoughts-bubble:empty {
  display: none;
}


.generate {
    padding: 7px 16px;
      border-radius: 99px;
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--text-muted);
      font-family: 'DM Mono', monospace;
      font-size: 0.75rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.18s;   
} 
.generate:hover {
      background: var(--bg-secondary);
      color: var(--text);
      border-color: var(--text-muted);
    }
.ai-avatar {
      width: 36px;
      height: 36px;
      min-width: 36px;
      border-radius: 10px;
      background: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 0.85rem;
      font-family: 'DM Mono', monospace;
      font-weight: 500;
      box-shadow: 0 2px 8px rgba(124,106,247,0.3);
    }
.other-message
{
      flex: 1;
      background: var(--ai-bubble);
      border: 1px solid var(--ai-bubble-border);
      border-radius: 4px 20px 20px 20px;
      padding: 20px 24px;
      font-family: 'DM Mono', monospace;
      font-size: 0.9rem;
      line-height: 1.75;
      color: var(--text);
      box-shadow: var(--shadow);
    }
    
.user-row {
    display: flex;
    justify-content: flex-end;
}
.ai-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.user-message {
      background: var(--user-bubble);
      color: var(--text);
      font-family: 'DM Sans', sans-serif;
      font-size: 1rem;
      font-weight: 500;
      padding: 12px 20px;
      border-radius: 20px 20px 4px 20px;
      max-width: 60%;
      box-shadow: var(--shadow);
    }
.action-row {
	display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding-left: 50px;
}