

html.es-chat
  #theChatVspace
    flex: 1;

  #dwPosts
    flex: none;

  &:not(.dw-react-started) #dwPosts
    visibility: hidden; // avoids flash of not-yet-scrolled-to-bottom message list

  .esPage > .container
    margin-left: 0;
    // try to remove !important: need to change #dwPosts to class in page.styl.
    @media (min-width: $narrowLimit + 1)
      padding-left: 35px !important;


.esChatChnl_about
  margin: 10px 0 30px;
  padding-left: 3px; // aligns vertically — posts & stuff have padding-left: 3px

  .dw-p-bd
    padding: 0;

  .esAvtrName_username,
  .esAvtrName_fullName
    vertical-align: baseline;
    font-weight: bold;

  .esAvtrName:hover
    text-decoration: underline;
    cursor: pointer;

.esChat_scrollUpTips
  text-align: center;
  margin-bottom: 35px;
  font-size: 15px;
  font-style: italic;


.esChatPage .s_T_YourPrvw
  color: hsl(0, 0%, 8%);
  margin: 28px 0 17px;


.esC_M
  margin-bottom: 15px;

  // This is a simple & good way to prevent large images from almost going full screen
  // and steal all attention. One can click it to view it full screen.
  // UX COULD add click-to-view tips?
  img
    max-height: 400px;

  .dw-p-hd .dw-p-by
    color: #444;
    text-shadow: 1px 0 0 #444; // makes it even bolder
    letter-spacing: 0.7px; // or text-shadow --> the letters get too close to each other

  .dw-p-bd
    padding-top: 4px;
    p
      margin-bottom: 0.6em;
      &:last-child
        margin-bottom: 0;

  .dw-p-hd,
  .dw-p-bd
    margin-left: 51px; // leaves space for the avatar

  .esAvtr-ltr,
  .edAvtr img
    width: 40px;
    height: 40px;
  .esAvtr-ltr
    line-height: 40px;
    font-size: 22px;

.esPage-Compact .esC_M
  // Place the post header in the middle of the avatar ...
  .dw-p-hd
    margin: 0 0 0 50px;
    top: 9px;
    padding: 0;
  // ... and let the text start on the next line, so no need to indent it (screen to small).
  // Add some vertical space too so easier to see to which avatar the text belowngs.
  .dw-p-bd
    margin: 25px 0 20px !important;


.esFixAtBottom
  position: relative;
  z-index: 1111;

.s_C_M_B
  padding: 3px 6px 3px 3px;
  margin: -3px 0;
  color: hsl($uiHue, 70%, 48%);
  &.s_My
    font-weight: bold;
  &.icon-edit:not(.s_My)::before
    opacity: 0.76;
  font-size: 108%;
  background: none;
  border: none;
  position: relative;
  left: -5px;
  &:hover
    background: hsl($uiHue, 100%, 97%);
    outline: 1px solid hsl($uiHue, 100%, 93%);

.esP_H_At + .s_C_M_B
  margin-left: 7px;  // or too close


.esC_Edtr_Bs
  text-align: right;
  .btn
    padding: 5px 11px;

.esJoinChat,
.esC_Edtr
  width: calc(100% + 10px);
  position: relative;
  left: -5px;


.esJoinChat
  background: hsl(0,0%,97%);
  padding: 20px 0;
  text-align: center;
  z-index: 3;

.esJoinChat_btn
  padding: 7px 18px;
  font-weight: bold;
  background: hsl(207, 82%, 52%);
  border-radius: 2px;


.esC_Edtr
  margin-top: 15px;
  overflow: hidden; // the username autocomplete might overflow [J7UKFBW]
  padding: 9px 10px 10px;
  border-top: 1px solid hsl(0deg 0% 86%);
  background: hsl(0deg 0% 93.7%);

.esC_Edtr_textarea
  width: 100%;
  min-height: 60px;
  padding: 2px 2px 0px 3px;
  margin: 0px;
  border-color: hsl(0 0% 73%);

.esC_Edtr_Bs
  display: flex;
  justify-content: flex-end;

.esC_Edtr .s_DfSts
  color: #616161;
  // The Post button has this padding. (Where is that defined?)
  vertical-align: middle;
  padding-top: 5px;


// Meta posts
.esChatPage .s_MP
  .esAvtr
    position: relative;
    top: -3px;
    //width: 51px; — no. It's a tiny avatar
    //margin: 0; — why? no
    //left: 6px;
    margin-left: 9px;

  // Place 14px from any comment just below, but close to any subsecuent meta message just below.
  margin: 0 0 14px;
  + .s_MP
    margin-top: -14px;

