header {
  position: sticky; 
  top: 0px; 
  margin-bottom:0px; 
  z-index:1000;
  }
/* nav a:js-active {
  color: #212427;
  } */
/* li {list-style: none;} */
a {text-decoration: none;}
/* a:link { color:#212427; text-decoration: none; }
a:visited { color:#212427; text-decoration: none; }
a:hover { color:#BF3143; } */


/* Localization secion START*/
/* .localization {background-color: #ffffff;
top: 0;
left: 0;
text-align: right;
padding: 0rem;
font-size: .9rem;
color: #333333;
} */

.localization {display: none;   /* language switcher hidden — English only */
background-color: #ffffff;
top: 0;
left: 0;
text-align: right;
padding: .1rem 0 0 0;  font-size: .9rem;
color: #333333;
border:0px solid purple;
}



.account-info-bar {display: flow-root; border-bottom: 1px solid lightgray;}
.account-info-bar .float-right {display: flex; align-items: center;  font-size: 14px; background-color: white; border:0px solid purple; display:flex; align-items: center; justify-content: flex-end; padding: .1rem 0.5rem 0 0; height:22px;}





.statusicon {display: flex; align-items: center;}
.account-data {margin-right:.2rem;margin-left:.2rem;}
.top-username {color:#BF3143;
display: inline-block;
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 
border:0px solid blue;
margin-right: .2rem; margin-left: .2rem;
}

.top-username a {color:#BF3143; cursor: pointer; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.account-info-bar a {color:#BF3143; font-weight: 500; text-decoration: none;
}
.account-info-bar a:hover {color:#992635;}
.account-info-bar a:visited {color:#BF3143;}


.account-data {margin-right:.2rem;margin-left:.2rem;}
.clickable {cursor:pointer; text-align: center;}
.clickable-color {color:#BF3143;cursor:pointer; text-align: center;}
.account-logout-button {}
/* Account secion END*/

/* Nav secion START*/
.horizontal-line {border-bottom:1px solid lightgray; border-top:0; padding-top: .5rem; padding-bottom: .5rem; background-color: #fff;}
.navbar {
display:flex;
justify-content: space-between;
align-items: center;
padding-right: 1.75rem;
}
.header-logo {margin-left: 1rem;}
/* The app stylesheet makes every img display:block; the info-page stylesheet does not, so on
   Home/Plans the logo sat inline on the text baseline and the nav bar was 6px taller than on
   Write. Own it here so the header is the same height on every page. */
.header-logo img {display: block;}
.nav-menu {
display: flex;
align-items: center;
gap: 14px;
list-style: none;
padding-left: 0;
margin: 0;
}

.nav-item {margin: 0; line-height: 1.2;}

/* the markup is a.nav-link > span.nav-link ; the outer <a> is just a transparent wrapper,
   the inner <span> is the clickable "pill". */
.nav-link {display: flex; align-items: center;}
a.nav-link {padding: 0;}
.nav-menu span.nav-link {
  font-size: .95rem; font-weight: 500; color: #736769; gap: 6px;
  padding: 8px 13px; border-radius: 10px; cursor: pointer; white-space: nowrap; line-height: 1.15;
  transition: color .16s, background .16s;
}
.nav-menu span.nav-link:hover {color: #BF3143;}
.nav-menu span.nav-link.js-active {color: #BF3143; font-weight: 650; pointer-events: none;}
/* guest "Try for Free" stays a solid CTA — brand red to match the modal system */
.nav-menu span.nav-link.tryforfree {color: #fff; background: #212427; font-weight: 650; box-shadow: 0 6px 16px -8px rgba(33,36,39,.5);}
.nav-menu span.nav-link.tryforfree:hover {color: #fff; background: #33373a;}
.hamburger {display: none;}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: #798897;
}

.in-progress-menu { color: #2f7d5c; background:#dcefe4; border:0; font-weight: 700; font-size: .58rem; letter-spacing:.02em; padding:2px 6px; border-radius: 6px; margin-left: 5px; text-transform:uppercase; }

.beta-menu { font-weight: 600; padding:0.1rem .2rem; border-radius: 4px; font-size: .6rem; border:1.5px solid #BF3143; margin-left: -2px; background-color: #BF3143; color: white;}


/* added for new home May 21 */



.chatMenuItem.tryforfree {border-radius: 6px; color: white; text-align: center;  cursor: pointer; outline: none; width: auto; padding:.5rem .8rem; background-color: #212427; } 

/* .chatMenuItem.tryforfree.nav-link:hover {background-color: #404040; }  */

.trybutton:hover {background-color: #404040;}


/* Nav secion END*/

.chatsRemaining {border: 0px solid red; padding: 0 .2rem;}
.topRemMessage {border: 0px solid red; padding: 0 .2rem;}
.subsMessage {border: 0px solid red; padding: 0 .2rem;}

.maxwidth1 {border: 0px solid red;}

.maxwidth3 {border: 0px solid green;}

.top-username {color:#BF3143;
display: inline-block;
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 
border:0px solid blue;
margin-right: .2rem; margin-left: .2rem;
}

.maxwidth2 {border: 0px solid red; display: inline-block; margin-right: .2rem;}



@media only screen and (max-width: 850px) {

.nav-menu {width: 9rem; padding-bottom: .3rem; padding-top: .3rem;}

  .nav-menu.js-active {right: 0;}
  .nav-item {margin: .2rem .65rem;}
  .hamburger {display: block;cursor: pointer; margin-right:.5rem;}
  .hamburger.js-active .bar:nth-child(2) {opacity: 0;}
  .hamburger.js-active .bar:nth-child(1) {transform: translateY(8px) rotate(45deg);}
  .hamburger.js-active .bar:nth-child(3) {transform: translateY(-8px) rotate(-45deg);}
  .nav-menu {
  position: fixed;
  right: -100%;
  top: 55px;
  margin-right: .6rem;
  margin-left: .2rem;
  padding-left:0px;
  flex-direction: column;
  background-color: #fff;
  width: 30%;
  border-radius: 2px;
  transition: 0.3s;
  border:1px solid lightgray;
  box-shadow: 0 2px 2px #808080;
  z-index: 2;
  }
.sticky-message-box {width: auto;}
.navbar {padding-right: .8rem;}
.nav-menu.js-active {right: 0;}
.nav-item {margin: .2rem .65rem; border:0px solid red;}
.hamburger {display: block;cursor: pointer;}
.hamburger.js-active .bar:nth-child(2) {opacity: 0;}
.hamburger.js-active .bar:nth-child(1) {transform: translateY(8px) rotate(45deg);}
.hamburger.js-active .bar:nth-child(3) {transform: translateY(-8px) rotate(-45deg);}
.nav-menu {width: 9rem; padding-bottom: .5rem;}

}


@media only screen and (max-width: 530px) {
.account-info-bar .float-right {padding: 0 0.2rem 0 0; height:22px;} 

.top-username {
  max-width: 100px; }
.top-username.plus {max-width: 215px;}

}

@media only screen and (max-width: 430px) {
.hamburger {border:0px solid red;margin-right:0; }
.account-info-bar .float-right {padding: 0 0.2rem 0 0; height:22px;} 

.top-username {
  max-width: 70px; }
.top-username.plus {max-width: 215px;}  

.maxwidth2 {border: 0px solid red; display: inline-block;
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis;
margin-right: .2rem; margin-left: .2rem;
max-width: 50px;
}  

.maxwidth3 {border: 0px solid orange; display: inline-block;
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis;
margin-right: .2rem; margin-left: .2rem;
max-width: 80px;
}   

}


@media only screen and (max-width: 350px) {

.top-username {
  max-width: 40px; }


}