<commit_before>.app-chat {
  .flexy(column);
  width: 20vw;
  min-width: @tile_chat;
  box-shadow: -1px 0 @gray_dark;
  overflow: hidden;
  transition: @speed @bezier_transform;
  // transition-timing-function: @bezier_bounce;
  .mq_640({
    .flex-direction(row);
    position: relative;
    padding-top: @tile;
  });
  &.closed {
    width: 0;
    min-width: 0;
    transition-timing-function: @bezier_transform;
    .icon-user {
      margin: 0 .5em;
      transition-delay: @speed_slow;
    }
    .chat-log {
      textarea {
        padding-left: 0;
        opacity: 0;
        transition-delay: @speed_slow;
      }
    }
  }
  &.show-chat-on-mobile {
    .mq_640({
      .chat-people {
        margin-left: -100%;
      }
    });
  }
  section {
    .flex(1 1 auto);
    .flexy(column);
    width: 20vw;
    min-width: 16rem;
    min-height: @tile_chat;
    .mq_640({
      .flex(0 0 100%);
      transition: @speed;
    });
  }
}
.chat-switcher {
  display: none;
  position: absolute;
  color: @white;
  top: 0;
  left: 0;
  width: @tile_chat;
  .mq_640({
    .flexy();
  });
}
.chat-switcher-option {
  .flex(0 0 50%);
  .flexy(center, center);
  height: @tile;
  &:not(.toggled) {
    color: @gray;
    background: fade(@black, 13);
  }
}
.chat-people {
  .scrollbar_hide(); // we should calculate to get this effect in the dom
  overflow-y: auto;
  a {
    &[role="button"] {
      .flex(0 0 @tile);
      .flexy(center);
      .button_icon_cascade(32);
      .icon_stroke(@gray_lighter);
      min-height: (@tile / 2);
      color: @gray_light;
      &:hover,
      &:active {
        .icon_stroke(@gray_lightest);
        cursor: pointer;
        color: @gray_lighter;
        background: @gray_dark;
      }
      &.people-you {
        cursor: text;
      }
    }
  }
  .icon-user {
    .flex(0 0 auto);
    margin: 0 1em;
    transition: margin @speed @bezier_transform 0ms;
  }
  input {
    height: @tile;
    max-height: (@tile * 2);
    background: none;
    border: none;
    outline: 0;
    color: @white;
  }
}
.chat-log {
  .justify-content(flex-end);
  form {
    .flex(0 0 auto);
    .flexy();
    margin: 0;
    box-shadow: 0 1px @gray_dark inset;
  }
  textarea {
    .flex(1);
    .placeholder_style(color; @gray_dark);
    height: @tile;
    max-height: (@tile * 2);
    background: none;
    padding: 1.25em 1.25em 0;
    border: none;
    outline: 0;
    resize: none;
    transition+: padding @speed @bezier_transform 0ms;
    transition+: opacity @speed @bezier_fadein    0ms;
    &:focus {
      .placeholder_style(color; fade(@gray_dark, 0));
    }
  }
}
.chat-messages {
  .scrollbar_hide(); // TODO we should calculate to get this effect in the dom
  padding: 1em 0;
  overflow-y: auto;
  .mq_640({
    width: @tile_chat;
  });
  span {
    word-break: break-word;
  }
}
.chat-message {
  padding: 0 1em;
}
.message-head {
  .flexy();
}
.message-time {
  color: @gray_dark;
  font-size: 0.75rem;
  line-height: ~"@{line_height}rem";
  text-transform: lowercase;
  word-spacing: -.5ex;
  margin-left: auto;
}
.message-body {
  padding-bottom: .5em;
}
.chat-button {
  .icon_stroke(@gray);
  .flexy(center, center);
  position: absolute;
  font-size: 1.5em;
  bottom: 0;
  right: 0;
  width: @tile;
  height: @tile;
  &:hover {
    .icon_stroke(@white);
    .unseen-eids {
      background: lighten(#c0392b, 10);
      color: @white;
      border-color: lighten(#c0392b, 10);
      height: 1.8em;
      min-width: 1.8em;
      padding: 2px 4px;
      bottom: 3.1em;
      right: 3.1em;
    }
  }
}<commit_msg>add styles for chat date group divider<commit_after>.app-chat {
  .flexy(column);
  width: 20vw;
  min-width: @tile_chat;
  box-shadow: -1px 0 @gray_dark;
  overflow: hidden;
  transition: @speed @bezier_transform;
  // transition-timing-function: @bezier_bounce;
  .mq_640({
    .flex-direction(row);
    position: relative;
    padding-top: @tile;
  });
  &.closed {
    width: 0;
    min-width: 0;
    transition-timing-function: @bezier_transform;
    .icon-user {
      margin: 0 .5em;
      transition-delay: @speed_slow;
    }
    .chat-log {
      textarea {
        padding-left: 0;
        opacity: 0;
        transition-delay: @speed_slow;
      }
    }
  }
  &.show-chat-on-mobile {
    .mq_640({
      .chat-people {
        margin-left: -100%;
      }
    });
  }
  section {
    .flex(1 1 auto);
    .flexy(column);
    width: 20vw;
    min-width: 16rem;
    min-height: @tile_chat;
    .mq_640({
      .flex(0 0 100%);
      transition: @speed;
    });
  }
}
.chat-switcher {
  display: none;
  position: absolute;
  color: @white;
  top: 0;
  left: 0;
  width: @tile_chat;
  .mq_640({
    .flexy();
  });
}
.chat-switcher-option {
  .flex(0 0 50%);
  .flexy(center, center);
  height: @tile;
  &:not(.toggled) {
    color: @gray;
    background: fade(@black, 13);
  }
}
.chat-people {
  .scrollbar_hide(); // we should calculate to get this effect in the dom
  overflow-y: auto;
  a {
    &[role="button"] {
      .flex(0 0 @tile);
      .flexy(center);
      .button_icon_cascade(32);
      .icon_stroke(@gray_lighter);
      min-height: (@tile / 2);
      color: @gray_light;
      &:hover,
      &:active {
        .icon_stroke(@gray_lightest);
        cursor: pointer;
        color: @gray_lighter;
        background: @gray_dark;
      }
      &.people-you {
        cursor: text;
      }
    }
  }
  .icon-user {
    .flex(0 0 auto);
    margin: 0 1em;
    transition: margin @speed @bezier_transform 0ms;
  }
  input {
    height: @tile;
    max-height: (@tile * 2);
    background: none;
    border: none;
    outline: 0;
    color: @white;
  }
}
.chat-log {
  .justify-content(flex-end);
  form {
    .flex(0 0 auto);
    .flexy();
    margin: 0;
    box-shadow: 0 1px @gray_dark inset;
  }
  textarea {
    .flex(1);
    .placeholder_style(color; @gray_dark);
    height: @tile;
    max-height: (@tile * 2);
    background: none;
    padding: 1.25em 1.25em 0;
    border: none;
    outline: 0;
    resize: none;
    transition+: padding @speed @bezier_transform 0ms;
    transition+: opacity @speed @bezier_fadein    0ms;
    &:focus {
      .placeholder_style(color; fade(@gray_dark, 0));
    }
  }
}
.chat-messages {
  .scrollbar_hide(); // TODO we should calculate to get this effect in the dom
  padding: 1em 0;
  overflow-y: auto;
  .mq_640({
    width: @tile_chat;
  });
  span {
    word-break: break-word;
  }
}
.chat-date {
  .flexy(center, center);
  color: @gray_dark;
  &:before,
  &:after {
    .flex(1);
    content: "";
    margin: 0 .25rem;
    border-bottom: 1px solid; // calling w/o color forces inheritance
  }
}
.chat-message {
  padding: 0 .125rem 0 1rem;
  a {
    transition: @speed_fast @bezier_fadein;
    &:not(:hover) {
      color: inherit;
      // TODO make a function for this thing (also used in blog.less)
      box-shadow+:   0  -1px @gray_darker inset;
      box-shadow+:   0  -2px @gray_light  inset;
      text-shadow+:  1px 0   @gray_darker;
      text-shadow+:  2px 0   @gray_darker;
      text-shadow+:  3px 0   @gray_darker;
      text-shadow+: -1px 0   @gray_darker;
      text-shadow+: -2px 0   @gray_darker;
      text-shadow+: -3px 0   @gray_darker;
    }
  }
}
.message-head {
  .flexy();
}
.message-time {
  color: @gray_dark;
  font-size: 0.75rem;
  line-height: ~"@{line_height}rem";
  text-transform: lowercase;
  word-spacing: -.1875rem;
  margin-left: .5rem;
}
.chat-button {
  .icon_stroke(@gray);
  .flexy(center, center);
  position: absolute;
  font-size: 1.5em;
  bottom: 0;
  right: 0;
  width: @tile;
  height: @tile;
  &:hover {
    .icon_stroke(@white);
    .unseen-eids {
      background: lighten(#c0392b, 10);
      color: @white;
      border-color: lighten(#c0392b, 10);
      height: 1.8em;
      min-width: 1.8em;
      padding: 2px 4px;
      bottom: 3.1em;
      right: 3.1em;
    }
  }
}
{'fraction_non_alphanumeric': 0.15564351378958122, 'fraction_numerical': 0.032175689479060264, 'mean_word_length': 2.250207468879668, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6189830', 'n_tokens_mistral': 3204, 'n_tokens_neox': 3002, 'n_words': 663}