@import "defs.less";
@import "base.less";
@import "forms.less";


@base-font-size: 15px;

body {
  overflow-y: hidden;  // prevent mobile Chrome pull to refresh
  font-size: @base-font-size;

  &.ready > #container {
    display: block;
  }

  &.ready.visible > #container {
    transition: opacity .1s ease-out;
    opacity: 1;
  }

  input, textarea, button {
    font-family: Open Sans, Droid Sans, sans-serif;
    margin: 0;
  }
}

html, body, #container, #ui, #ui-panes {
  height: 100%;
}

a {
  unicode-bidi: embed;
}

.hatch-shade {
  background: fade(black, 50%) data-uri('../res/hatching.svg') repeat;
  opacity: .1;
  z-index: 100;
}

.dim-shade {
  background: rgba(70, 70, 70, .5);
  z-index: 100;
}

iframe.js {
  display: none;
}

#container {
  overflow-x: hidden;
}

@info-pane-width: 240px;
@sidebar-pane-width: 150px;

#ui-panes {
  // stacking context so z-index: -1 works
  position: relative;
  display: flex;
  align-items: stretch;
  background: #ccc;
  z-index: 0;

  &.disconnected {
    .info-pane, .main-pane .chat-pane, .sidebar-pane, .thread-panes {
      transition: opacity .2s ease;
      opacity: .8;
    }
  }

  &.info-pane-hidden {
    margin-left: -@info-pane-width;

    .chat-pane-container {
      transition: opacity .1s ease;
    }

    &.info-pane-focused {
      .chat-pane-container, .sidebar-pane {
        opacity: .25;
      }
    }
  }

  &.sidebar-pane-hidden {
    margin-right: -@sidebar-pane-width;
  }
}

.info-pane, .sidebar-pane {
  margin-top: 20px;
  z-index: -1;
}

.info-pane, .sidebar-pane, .chat-pane-container {
  box-shadow: 0 0 12px fade(black, 20%);
}

.thread-panes {
  display: flex;
  min-width: 0;
}

.info-pane, .sidebar-pane {
  display: flex;
  flex-direction: column;
  padding: 8px 10px;
  box-sizing: border-box;
  background: @pane-bg-color;

  & > * {
    flex-shrink: 0;
  }

  h1, h2, .notification-settings .notification-toggle .inner, .toolbox-button .inner, .account-button .inner {
    font-size: .92rem;
    font-weight: bold;
    color: #777;
  }

  h1, h2 {
    margin: 0;
  }
}

.info-pane {
  width: @info-pane-width;

  .notification-list, .thread-list-container, .toolbox-button, .account-area {
    margin-top: 4px;
    margin-left: -10px;
    margin-right: -10px;
  }

  .toolbox-button, .thread-list-container, .account-area {
    border-bottom: 1px solid #ccc;
    margin-bottom: 8px;
  }

  .notification-settings {
    display: flex;
    font-size: .8em;
    user-select: none;

    .notification-toggle {
      flex: 1;
      padding: 1px;
      padding-left: 0;
      border-radius: 2px;

      .inner {
        justify-content: flex-end;
        flex-direction: row-reverse;

        &:before {
          margin-left: 6px;
          margin-right: 0;
        }
      }
    }

    &.disabled .notification-toggle {
      background: @welcome-color;
      .touchable-bg(@welcome-color);
      .button-icon('../res/notifications-disabled.svg', 15px);
    }

    &.enabled .notification-toggle {
      .touchable-bg(#fff);
      .button-icon('../res/notifications-pause.svg', 15px);
    }

    &.snoozed .notification-toggle {
      color: #a76d2f;
      .touchable-bg(#fff);
      .button-icon('../res/notifications-pause-snoozed.svg', 15px);
    }

    &.paused .notification-toggle {
      color: #930000;
      .touchable-bg(#fff);
      .button-icon('../res/notifications-pause-active.svg', 15px);
    }

    .mode-selector {
      display: flex;
      padding: 2px 1px;
      margin-left: 6px;
      background: #dadada;
      border-radius: 2px;
      opacity: .5;
      transition: opacity .15s ease;

      .mode {
        padding: 0 3px;
        margin: 0 1px;
        border-radius: 2px;
        font-size: 0;

        &.selected {
          background: #fafafa;
        }
      }

      .none {
        .touchable-bg(#fff);
        .button-icon('../res/notifications-none.svg', 14px, @spacing: 0);
      }

      .mention {
        .touchable-bg(#fff);
        .button-icon('../res/notifications-mention.svg', 14px, @spacing: 0);
      }

      .reply {
        .touchable-bg(#fff);
        .button-icon('../res/notifications-reply.svg', 14px, @spacing: 0);
      }

      .message {
        .touchable-bg(#fff);
        .button-icon('../res/notifications-message.svg', 14px, @spacing: 0);
      }
    }

    &.enabled .mode-selector {
      opacity: 1;

      .none.selected {
        .button-icon('../res/notifications-none-active.svg', 14px, @spacing: 0);
      }

      .mention.selected {
        .button-icon('../res/notifications-mention-active.svg', 14px, @spacing: 0);
      }

      .reply.selected {
        .button-icon('../res/notifications-reply-active.svg', 14px, @spacing: 0);
      }

      .message.selected {
        .button-icon('../res/notifications-message-active.svg', 14px, @spacing: 0);
      }
    }
  }

  .notification-list, .thread-list-container {
    -webkit-overflow-scrolling: touch;

    .notification, .thread .info {
      font-size: .8em;
      cursor: default;
      overflow: hidden;
      user-select: none;

      .inner {
        display: flex;
        align-items: flex-start;
        padding: 7px 10px;

        .title {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: normal;
        }

        .ago {
          min-width: 2em;
          font-size: .8rem;
          text-align: right;
        }
      }

      .touchable-custom({
        background: fade(white, 75%);
      });

      body:not(.touch) &:hover {
        background: fade(white, 75%);
      }

      &.selected {
        position: relative;
        background: white;
        box-shadow: 0 1px 5px fade(black, 25%);
        opacity: .8;
        transition-duration: .1s;
        z-index: 10;
      }
    }
  }

  .thread-list-container {
    position: relative;
    display: flex;
    flex: 1;
    overflow: hidden;

    &:after {
      @size: 12px;
      content: '';
      .fill;
      pointer-events: none;
      box-shadow:
        0 -(@size + 3) @size -@size @pane-bg-color inset,
        0 (@size + 3) @size -@size @pane-bg-color inset;
    }

    .thread-list {
      position: relative;  // required to position webkit touch scrollbar properly
      flex: 1;
      overflow-y: auto;
    }

    .thread {
      .info {
        opacity: .55;
        transition: opacity .25s ease-out;

        &.active {
          opacity: 1;
        }

        .title {
          &, a {
            color: @topic-color;
          }

          a {
            pointer-events: none;
          }
        }
      }

      .children {
        margin-left: 10px;
        border-left: 1px solid @topic-color;
        margin-bottom: 10px;

        .thread .info {
          font-size: .75em;

          .inner {
            padding-top: 5px;
            padding-bottom: 5px;
          }
        }
      }
    }
  }

  .toolbox-button {
    margin-top: -8px;
    padding: 10px;
    text-align: left;
    background: fade(@manager-color, 45%);
    .touchable-custom({
      background: @manager-color;
    });

    &.selected {
      background: fade(@manager-color, 75%);
    }

    .inner {
      color: fade(darken(desaturate(@manager-color, 15%), 50%), 70%);
    }

    .count {
      display: inline-block;
      background: @manager-dark-color;
      color: white;
      padding: 0 6px;
      border-radius: 2px;
      float: right;
    }

    &.empty .count {
      background: fade(@manager-dark-color, 50%);
    }
  }

  .notification-list {
    margin-bottom: -4px;
    max-height: 50vh;
    overflow-y: auto;

    .notification {
      .inner {
        align-items: flex-start !important;
      }

      .inner:before {
        // attempt to center vertically with first line of caption
        height: 1rem !important;
      }

      .title {
        a {
          pointer-events: none;
        }
      }
    }

    .notification.new-mention {
      .button-icon('../res/notifications-mention-active.svg', 14px, 7px, .65);
      background: hsl(46, 65%, 90%);

      &:hover {
        background: lighten(hsl(46, 65%, 90%), 5%);
      }
    }

    .notification.new-reply {
      .button-icon('../res/notifications-reply-active.svg', 14px, 7px, .65);
      background: hsl(240, 28%, 90%);

      &.seen {
        .button-icon('../res/notifications-reply.svg', 14px, 7px, .65);
        background: inherit;

        // a transition would fade the hover coloring, making it inconsistent
        // with the other list items.
        animation: fade-new-reply .5s ease;
        @keyframes fade-new-reply {
          from {
            background: hsl(240, 28%, 90%);
          }
          to {
            background: inherit;
          }
        }
      }

      &:hover {
        background: lighten(hsl(240, 28%, 90%), 5%);
      }
    }

    .notification.new-message {
      .button-icon('../res/notifications-message-active.svg', 14px, 7px, .65);
      background: hsl(81, 28%, 90%);

      &.seen {
        .button-icon('../res/notifications-message.svg', 14px, 7px, .65);
        background: inherit;

        animation: fade-new-message .5s ease;
        @keyframes fade-new-message {
          from {
            background: hsl(81, 28%, 90%);
          }
          to {
            background: inherit;
          }
        }
      }

      &:hover {
        background: lighten(hsl(81, 28%, 90%), 5%);
      }
    }
  }

  .account-area {
    display: flex;
    margin-top: -8px;

    .account-button {
      flex: 1;
      padding: 10px;
      background: fade(@account-color, 7%);
      .touchable-custom({
        background: fade(@account-color, 18%);
      });
      overflow: hidden;

      &.signed-in {
        .button-icon('../res/cog.svg', 20px, 5px, .25);
      }

      .inner {
        flex-direction: row-reverse;
        color: @account-color;
        font-size: .95rem;
        text-align: left;
      }

      .account-info {
        flex: 1;
        overflow: hidden;
      }

      .status {
        font-size: .8rem;
        opacity: .65;
      }

      .name {
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}

.sidebar-pane {
  width: @sidebar-pane-width;
  display: flex;
  flex-direction: column;

  .user-list {
    flex: 1;
    margin: 0 -8px;
    margin-top: 4px;
    padding: 0 8px;
    overflow-y: auto;
    overflow-x: hidden;
    transition: opacity .25s ease;
    -webkit-overflow-scrolling: touch;

    h1 {
      margin-bottom: 4px;
    }

    .list {
      margin-bottom: 10px;
      overflow: hidden;
    }

    .nick {
      display: block;
      float: left;
      clear: both;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: @sidebar-pane-width - 16px;
      box-sizing: border-box;
      margin: 2px 0;
      white-space: nowrap;

      .emoji {
        pointer-events: none;
      }
    }
  }
}

@time-margin: 70px;
@messages-padding: 10px;
@nick-spacing: 6px;
@nick-height: 22px;
@entry-height: 35px;
@vertical-spacing: 4px;
@thread-indent: 22px;

.nick, .text-rect {
  background: @neutral-color;
  padding: 0 4px;
  font-size: .92em;
  border-radius: 2px;
}

.nick, .text-rect, .messages-container .line {
  unicode-bidi: embed;
}

.nick {
  padding-top: 1px;
  padding-bottom: 1px;
  .emoji {
    height: 100%;
  }
}

.chat-pane-container {
  background: white;
  display: flex;
  position: relative;
  flex-direction: column;
  flex: 1;
  min-width: 0;

  &.main-pane {
    flex: 1.5;
    box-shadow: 0 0 12px fade(black, 40%);

    .main-pane-stack {
      flex: 1;
      position: relative;

      & > .chat-pane, .main-pane-cover {
        .fill;
      }
    }

    .main-pane-cover {
      display: flex;
      background: white;
      transition: all .2s ease-in;
      z-index: 10;

      &.slide-leave {
        transform: none;

        &.slide-leave-active {
          transform: translateX(-1000px);
        }
      }
    }

    .main-pane-thread {
      flex-direction: column;

      .top-bar {
        background: #f2f2ff;
        box-shadow: 0 -4px 4px -4px #d2d2e7 inset;
      }
    }
  }

  .chat-pane {
    position: relative;
    flex: 1;

    .messages-container {
      .fill;
    }

    .messages-content {
      box-shadow: 0 0 10px fade(black, 50%);
    }

    .messages {
      padding: @messages-padding;
    }
  }

  .notice-stack {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 11;
  }

  .notice {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    color: white;
    font-weight: bold;
    font-size: .9em;
    box-shadow: 0 0 8px fade(black, 25%);
    user-select: none;
    overflow: hidden;

    &.notifications {
      background: @brand-color;
    }

    .content {
      flex: 1;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin-top: -4px;

      .title, .actions {
        margin-top: 4px;
      }

      .title {
        flex-shrink: 0;
        margin-right: 1.25em;
      }

      .actions {
        flex-shrink: 0;

        button {
          .raised-filled-button(white);
          color: darken(@brand-color, 25%);
          margin: 0 .75em;
          flex-shrink: 0;

          &:first-child {
            margin-left: 0;
          }

          &:last-child {
            margin-right: 0;
          }
        }
      }
    }

    .close {
      position: relative;
      padding: 6px;
      border-radius: 3px;
      .touchable-bg(white);
      .larger-touch-target(10px, 10px);
    }

    &.dark .close {
      .button-icon('../res/close-notification.svg', 11px, 0, 1);
    }

    &.light .close {
      .button-icon('../res/close-notification-black.svg', 11px, 0, 1);
    }
  }
}

.chat-pane {
  position: relative;
  flex-direction: column;
  overflow: hidden;

  &.timestamps-visible {
    background: gray;

    .messages-container {
      padding-left: @time-margin;
    }
  }

  .messages-container {
    position: relative;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;

    .messages-content {
      // maintains size when not enough content to fill page
      display: flex;
      flex-direction: column-reverse;
      background: white;
      min-height: 100%;
      box-sizing: border-box;
    }

    .entry-box {
      position: relative;
      margin: -10px;
      margin-top: 10px;
      padding: 10px;
      z-index: 101;

      // work around webkit laggy scrolling of focused entry
      -webkit-transform: translate3d(0, 0, 0);

      .message {
        margin: -10px;
        padding: 10px;
      }

      h1 {
        font-size: 1.5em;
        font-weight: normal;
        margin: 0;

        strong {
          margin-right: .15em;
        }
      }

      p {
        margin: .25em 0;
        color: fade(black, 65%);

        &:last-child {
          margin-bottom: 0;
        }
      }

      .no-break {
        white-space: nowrap;
      }

      label {
        color: black;

        input {
          margin-right: .35em;
        }
      }
    }

    .entry-box.welcome {
      background: @welcome-color;

      .message {
        border-top: 1px solid darken(@welcome-color, 30%);
        border-bottom: 1px solid darken(@welcome-color, 30%);
      }
    }

    .entry-box.passcode {
      background: @passcode-color;

      .message {
        border-top: 1px solid darken(@passcode-color, 30%);
        border-bottom: 1px solid darken(@passcode-color, 30%);

        .icon('../res/lock.svg', 18px, 10px);
        &:before {
          vertical-align: top;
        }
      }

      .entry {
        border-color: darken(@passcode-color, 30%);

        label {
          color: darken(desaturate(@passcode-color, 25%), 50%);
        }
      }
    }
  }
}

.top-bar {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  position: relative;
  padding: 6px 10px;
  min-height: 20px;
  background: white;
  box-shadow: 0 0 8px fade(black, 25%);
  white-space: nowrap;
  z-index: 12;
  user-select: none;

  .update-available, .user-count {
    height: 20px;
  }

  .title {
    flex: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    color: @topic-color;
    font-weight: bold;
    font-size: .8em;
  }

  .close {
    position: relative;
    padding: 3px;
    border-radius: 3px;
    .touchable-bg(white);
    .button-icon('../res/close-pane.svg', 14px, 0, 1);
    .larger-touch-target(10px, 10px);
  }
}

.main-pane .top-bar {
  .right {
    display: flex;
    align-items: center;
    align-self: flex-end;
    margin-left: auto;
  }

  .user-count {
    position: relative;
    .nick;
    line-height: normal;
    margin-left: 10px;
    .button-icon('../res/euphorian.svg', 14px);
    .touchable-bg(@neutral-color);
    .larger-touch-target(20px, 10px);
  }

  .update-available {
    position: relative;
    background: @welcome-color;
    border-radius: 3px;
    padding: 3px 6px;
    margin-left: 10px;
    z-index: 3;
    .button-icon('../res/update.svg', 14px, 0);
    .touchable-bg(@welcome-color);
    .larger-touch-target(5px, 10px);
  }

  #ui.disconnected & {
    background: lighten(@disconnected-color, 23%);
    transition: background .2s ease-out;
  }

  .collapse-info-pane, .expand-info-pane {
    padding: 9px;
    margin: -9px;
    padding-left: 0;
    padding-right: 2px;
    margin-left: -10px;
    margin-right: 5px;
    .touchable-bg(white);
    opacity: .35;

    &.collapse-info-pane {
      .button-icon('../res/collapse-sidebar.svg', 14px, 0, 1);
    }

    &.expand-info-pane {
      .button-icon('../res/expand-sidebar.svg', 14px, 0, 1);
    }
  }

  .room-container {
    display: inherit;
  }

  .room {
    display: inline-flex;
    align-items: center;
    margin-right: 10px;

    .name {
      color: fade(darkblue, 75%);
      text-decoration: none;
      font-weight: bold;
      border-radius: 4px;
      cursor: default;
    }

    .state {
      position: relative;
      padding: 2px 6px;
      font-size: .8em;
      margin-left: 7px;
      border-radius: 2px;
      .larger-touch-target(10px, 10px);

      &.public {
        background: @public-color;
        .touchable-bg(@public-color);
      }

      &.private {
        background: @passcode-color;
        color: darken(@passcode-color, 60%);
        .touchable-bg(@passcode-color);
        .button-icon('../res/lock.svg', 10px);
      }

      &.pm {
        background: @pm-color;
        color: darken(@pm-color, 80%);
        .touchable-bg(@pm-color);
        .button-icon('../res/lock.svg', 10px);
      }

      &.reconnecting {
        background: desaturate(darken(@disconnected-color, 15%), 40%);
        color: white;
        font-weight: bold;
        .touchable-custom({
          filter: brightness(65%);
        });
        animation: pulse 2s ease infinite;
        @keyframes pulse {
          75% {
            background: darken(desaturate(@disconnected-color, 60%), 8%);
          }
        }
      }
    }
  }

  .manager-toggle {
    .bgcolor(@color) {
      background: @color;
      .hex {
        fill: @color;
      }
    }

    position: relative;
    font-size: .8em;
    padding: 2px 4px;
    margin-left: 2px;
    .bgcolor(@manager-color);
    .larger-touch-target(10px, 10px);
    .touchable-custom({
      .bgcolor(@manager-dark-color);
      .hex {
        transition: all 0s ease;
      }
    });

    .hex {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 7px;
      transition: all .25s ease;

      &.left {
        left: -6px;
      }

      &.right {
        right: -6px;
      }
    }

    &.on {
      color: white;
      font-weight: bold;
      .bgcolor(@manager-dark-color);
      .touchable-custom({
        .bgcolor(darken(desaturate(@manager-dark-color, 35%), 15%));
      });
    }
  }
}

.messages {
  // extended drag handle touch area can extend below bottom
  overflow: hidden;

  @message-spacing: 2.5px;
  @thread-spacing: 8px;
  @seen-fade: cubic-bezier(0, 1, .4, .2);

  .message-list > .message-node {
    padding-bottom: @thread-spacing;
  }

  .message-node {
    padding: @message-spacing 0;

    & > .line {
      @width: 3px;
      @inset: 5px;
      border-left: @width solid transparent;
      margin-left: -@messages-padding + @inset;
      padding-left: @messages-padding - @width - @inset;
    }

    &.unseen {
      & > .line {
        border-left-color: fade(@focus-green, 75%);
      }

      & > .timestamp {
        color: #aaf1aa;
      }
    }

    &.mention {
      & > .line .message {
        padding: 0 3px;
        border-radius: 2px;
        background: hsl(50, 85%, 95%);
        box-shadow: 0 0 1px hsla(50, 51%, 40%, 0.6) inset;
      }

      & > .line-emote .message {
        padding-left: 0;
      }

      & > .timestamp {
        color: hsl(56, 60%, 78%) !important;
      }
    }
  }

  .replies.collapsed, .expand-rest, .replies.in-pane {
    display: inline-flex;
    box-sizing: border-box;
    color: @topic-color;
    font-size: .92em;
    font-weight: bold;
    line-height: normal;
    cursor: pointer;
    border-radius: 2px;

    &:before {
      vertical-align: -2px;
    }

    &.focus-target {
      display: flex;
      height: @entry-height - 3px;
      padding: 0 6px;
      margin-left: -5px;
      margin-right: 5px;
      border-radius: 4px;
      z-index: 100;
    }

    &, &.focus-target {
      .touchable-custom({
        background: fade(@topic-color, 15%);
      });
    }

    .inner {
      width: 100%;
    }

    .inner:before, .inner * {
      flex-shrink: 0;
    }

    .message-preview {
      flex-shrink: 1;
      font-weight: normal;
      color: black;
      margin-left: 8px;
      padding-left: 8px;
      border-left: 1px solid gray;
      max-width: 20em;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      opacity: .5;
      pointer-events: none;

      a {
        color: black;
      }

      .emoji {
        filter: grayscale(100%);
      }
    }

    .spacer {
      display: flex;
      flex: 1;
      flex-basis: auto;
      margin-left: 5px;
      justify-content: flex-end;
    }

    .drag-handle-container {
      margin-right: 2px;
    }
  }

  .replies.collapsed {
    height: 17px;
    .button-icon('../res/reply.svg', 12px, 3px, 1);
  }

  .replies.collapsed, .replies.in-pane {
    &.focus-target {
      margin-top: 5px;
      margin-bottom: 27px;
    }
  }

  .expand-rest {
    height: 20px;
    padding-bottom: 4px;
    margin-top: 1px;
    .button-icon('../res/expand-rest.svg', 14px, 3px, 1, @alignment: baseline);
    .inner:before {
      width: 8px;
    }

    &.focus-target {
      margin-top: 10px;
      margin-bottom: 24px;
      margin-left: -5px;
    }
  }

  // kooky hax: use a gradient to draw the reply lines, so we can offset the
  // top of the line, avoiding drawing on top of the rounded corners of the
  // expando icons.
  @line-bg: linear-gradient(to right, #d2d2d2 0px, #d2d2d2 2px, transparent 2px);
  @blue-line-bg: linear-gradient(to right, @faded-topic-color 0px, @faded-topic-color 2px, transparent 2px);

  .replies.inline, .replies.expanded {
    display: flex;
    margin-top: @message-spacing;

    & > .indent-line {
      flex-shrink: 0;
      width: @thread-indent;
      margin-top: @message-spacing;
      background-image: @line-bg;
      cursor: default;
    }

    &.focused > .indent-line {
      background-image: @blue-line-bg;
    }

    & > .content {
      flex: 1;
      min-width: 0;
    }
  }

  .replies.collapsible {
    & > .indent-line {
      position: relative;
      cursor: pointer;
      margin-top: @message-spacing;
      background-image: @line-bg, data-uri('../res/expand.svg');
      background-position: left 12px, left top;
      background-repeat: no-repeat;

      .touchable-custom({
        filter: brightness(65%);
      });
      .larger-touch-target(10px, 10px);

      transition: border-color 0s;
    }

    &.expanded > .indent-line {
      background-image: @line-bg, data-uri('../res/collapse.svg');
    }

    &.focused > .indent-line {
      background-image: @blue-line-bg, data-uri('../res/expand-focused.svg');
    }

    &.expanded.focused > .indent-line {
      background-image: @blue-line-bg, data-uri('../res/collapse-focused.svg');
    }
  }

  .replies.expanded.empty {
    padding-bottom: 0;
  }

  .replies.inline.focused, .replies.expanded.focused {
    .entry:before {
      position: absolute;
      content: '';
      left: -17px;
      top: 9px;
      width: 14px;
      height: 100%;
      background: white data-uri('../res/reply-continue-entry.svg') no-repeat 1px top;
    }

    &.empty .entry:before {
      background-image: data-uri('../res/reply-entry.svg');
    }
  }

  .replies.empty.focused {
    .entry {
      margin-top: 5px - @message-spacing;
    }
  }

  .replies.in-pane {
    display: flex;
    .button-icon('../res/reply.svg', 14px, 5px);

    .inner {
      white-space: nowrap;
      filter: grayscale(100%);
    }

    .pane-icon {
      display: flex;
      margin-left: 4px;
      margin-top: -1px;
      .icon('../res/to-pane.svg', 14px);
    }
  }

  .line-emote .message-emote {
    .text-rect;
     vertical-align: bottom;
  }

  .line {
    display: flex;
    align-items: flex-start;
    word-wrap: break-word;

    * {
      // mitigates extra spacing around lines due to alignment inconsistency
      vertical-align: top;
    }

    &.marker {
      padding: .5em 0;

      .label {
        color: darken(fade(@focus-green, 100%), 10%);
        font-size: .75em;
        margin: 0 .5em;
      }

      hr {
        flex: 1;
        align-self: center;
        border: none;
        border-bottom: 1px solid @focus-green;
        margin: 0;
      }
    }

    .nick {
      flex-shrink: 0;
      margin-right: @nick-spacing;
    }

    .content {
      display: block;
      align-self: stretch;
      flex: 1;
      min-width: 0;
    }

    .message {
      display: inline-block;
      max-width: 100%;
      min-height: @nick-height;
      white-space: pre-wrap;
    }

    .message {
      .emoji {
        height: 19px;
        width: 19px;
      }

      .ago {
        transition: opacity 1s ease;
        vertical-align: baseline;
        line-height: 0;
      }

      .ago.now {
        opacity: 0;
        margin-left: 0;
      }
    }

    .message-tall {
      .message.expando {
        position: relative;
        display: block;
        width: 100%;
        max-height: 160px;
        overflow-y: hidden;
        padding: 5px;
        box-sizing: border-box;
        cursor: pointer;
        z-index: 0;
        .box-outline;

        // prevent Mobile Safari from making this scrolly
        -webkit-overflow-scrolling: auto;

        &:before, &:after {
          pointer-events: none;
        }

        &:after {
          content: '';
          .fill;
          background: linear-gradient(to top, fade(white, 65%), fade(white, 0%) 100px);
        }

        & > .expand {
          position: absolute;
          bottom: 0;
          right: 0;
          .text-rect;
          z-index: 20;
          color: white;
          box-shadow: 0 0 3px fade(black, 25%);
          background: #999;
          user-select: none;
          .touchable-bg(#999);
        }

        &.touching  > .expand, body:not(.touch) &:active > .expand {
          background: darken(desaturate(#999, 15%), 25%);
        }
      }

      .ago {
        margin-left: 0;
      }
    }

    &.has-embed .message-tall {
      .expando {
        max-height: 80px;
      }
    }

    &.expanded .message-tall {
      .expando {
        max-height: none;

        &:after {
          display: none;
        }
      }
    }

    .embeds {
      display: block;
      padding-bottom: 2 * @message-spacing;

      a {
        position: relative;
        display: inline-block;
        margin-left: 4px;
        border-radius: 3px;
        line-height: 0;
        font-size: 0;
        .box-outline;

        &:first-child {
          margin-left: 0;
        }
      }

      iframe {
        width: 0;
        max-width: 272px;
        height: 153px;
        border: none;
        border-radius: 3px;

        // iframes with canvases seem to result in really long webkit
        // paints without this
        -webkit-transform: translate3d(0, 0, 0);
      }

      .ago {
        vertical-align: bottom;
      }
    }

    .message + .embeds {
      margin-top: 4px;
    }

    &.line-emote {
      .nick {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        margin-right: 0;
      }

      .message {
        vertical-align: bottom;
      }

      .message-emote {
        display: inline-block;
        padding-left: 3px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }

      .ago {
        flex-shrink: 0;
        align-self: flex-end;
      }
    }
  }

  .timestamp {
    position: absolute;
    left: 0;
    font-size: .92em;
    color: #aaa;
    width: @time-margin;
    padding-right: 9px;
    padding-top: 0.08em;
    box-sizing: border-box;
    text-align: right;
    white-space: nowrap;
  }

  .entry {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    border: none;
    margin: -10px;
    margin-top: 10px;
    transition:
      box-shadow .15s ease,
      border .15s ease,
      background .15s ease;
    user-select: none;

    // work around weird webkit trailing text render glitch.
    -webkit-transform: translate3d(0, 0, 0);

    .nick-box, .entry-text, .measure, label {
      font-size: @base-font-size;
      line-height: 1.2;
      height: @entry-height;
      padding: 8px 10px;
      box-sizing: border-box;
    }

    input, textarea {
      flex: 1;
      border: none;
      color: black;
      resize: none;
    }

    .entry-text, .measure {
      background: none;
      margin-top: 1px;
      padding-left: 0;
      overflow-y: hidden;
    }

    label {
      color: gray;
      transition: color .15s ease;
    }

    .auto-size-container {
      display: flex;
      position: relative;

      .nick {
        box-sizing: border-box;
      }

      input.nick {
        display: block;
        position: absolute;
        width: 100%;
        box-shadow: 0 0 1px fade(black, 50%);

        &:focus {
          background: white;
        }
      }

      span {
        white-space: pre;
      }
    }

    .measure {
      position: absolute;
      left: -9999px;
    }

    .nick-box {
      padding-right: @nick-spacing;
    }

    .drag-handle-container {
      align-self: flex-start;
      margin-right: 8px;
      margin-top: 7px;
    }

    &:not(.empty) .drag-handle {
      .larger-touch-target(10px, 10px);
    }
  }

  .replies .entry {
    margin: 5px;
    margin-left: -6px;
    margin-bottom: 4px;

    .nick-box {
      padding-left: 6px;
      padding-right: @nick-spacing;
    }

    .nick-box, .entry-text, .measure {
      height: 33px;
      padding-top: 7px;
      padding-bottom: 7px;
    }

    .drag-handle-container {
      margin-top: 6px;
    }
  }

  .replies.expanded.empty .entry {
    margin-top: 0;
    margin-bottom: 0;
  }

  .message-list:last-child {
    // spacing tweak so messages don't shift down when switching from bottom
    // top level entry box to replying to latest message.
    margin-bottom: -7px;
  }

  .entry, .focus-target {
    background: @neutral-color;
    border-bottom: 3px solid fade(black, 15%);
    box-shadow: 0 0 10px fade(black, 10%) inset;
  }

  &.entry-focus .entry, &.entry-focus .focus-target {
    background: white;
    box-shadow: 0 0 5px fade(black, 25%);
    border-bottom: 3px solid @focus-green;

    input.nick {
      box-shadow: none;
    }
  }

  .drag-handle-container {
    position: relative;

    .drag-handle {
      width: 15px;
      height: 15px;
      padding: 3px;
      box-sizing: content-box;
      .icon('../res/move-entry.svg', 15px, 0, .6);
      .touchable-bg(#fff);
      .larger-touch-target(15px, 30px);
      box-shadow: 0 0 2px fade(black, 50%);
      cursor: move;
    }

    .jump-to-bottom {
      position: absolute;
      top: (19px - 42px) / 2;
      left: -55px;
      width: 36px;
      height: 36px;
      padding: 3px;
      background: white;
      border-radius: 100%;
      box-sizing: content-box;
      .icon('../res/jump-to-bottom.svg', 20px, 0, .3);
      .touchable-custom({
        background: lighten(@topic-color, 47%);
        box-shadow: 0 0 4px 3px fade(@topic-color, 50%);
        &:before {
          opacity: 1;
        }
      });
      .larger-touch-target(15px, 30px);
      box-shadow: 0 0 4px 1px fade(black, 50%);
      cursor: move;

      body.touch & {
        left: -100px;
      }
    }
  }
}

.manager-mode {
  .message-node {
    cursor: pointer;
    user-select: none;

    a {
      pointer-events: none;
    }
  }

  .message-node.selected > .line {
    // !important to override fading green background
    background: fade(@manager-color, 75%) !important;
    border-radius: 4px;
  }

  .user-list .nick {
    cursor: pointer;
    user-select: none;

    &.selected {
      background: fade(@manager-color, 75%) !important;
      font-weight: bold;
    }
  }
}

.replies.collapsed, .expand-rest, .message-node .content, .thread-list, .notification-list {
  .ago {
    font-weight: normal;
    white-space: nowrap;
    color: gray;
    font-size: .92rem;

    &.now {
      color: green;
    }
  }

  .new-count {
    background: green;
    color: white;
    font-size: .75rem;
    font-weight: bold;
    padding: 0 7px;
    border-radius: 2px;
    text-align: center;

    &.new-mention {
      background: hsl(48, 98%, 40%);
    }
  }

  .new-count, .ago {
    margin-left: 8px;
  }
}

.bubble {
  position: absolute;
  display: inline-block;
  background: white;
  color: black;
  padding: 4px 8px;
  border-radius: 3px;
  box-shadow: 0 0 8px fade(black, 25%);
}

.slide-down-enter-active, .slide-down-leave-active,
.slide-right-enter-active, .slide-right-leave-active {
  transition: .15s ease;
  transition-property: transform, opacity;
}

.slide-right-enter {
  opacity: 0;
  transform: translateX(-10px);

  &.slide-right-enter-active {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-right-leave {
  opacity: 1;
  transform: translateX(0);

  &.slide-right-leave-active {
    opacity: 0;
    transform: translateX(-10px);
  }
}

.slide-down-enter {
  opacity: 0;
  transform: translateY(-10px);

  &.slide-down-enter-active {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-down-leave {
  opacity: 1;
  transform: translateY(0);

  &.slide-down-leave-active {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.bubble.privacy-info {
  position: absolute;
  top: 36px;
  left: 8px;
}

.update-button {
  margin: 10px;
  float: right;
  background: @welcome-color;
  border: 1px solid darken(@welcome-color, 30%);
  border-radius: 3px;
  padding: 6px 8px;
  font-size: .8em;
  .button-icon('../res/update.svg', 24px, 8px);
  .touchable-bg(@welcome-color);
  box-shadow: 0 0 8px fade(black, 25%);

  p {
    text-align: left;
    margin: 0;

    em {
      display: block;
      font-size: .8em;
      margin-top: 1px;
      opacity: .65;
      font-style: normal;
    }
  }
}

.bubble.small-text {
  font-size: .8em;
  line-height: normal;
  background: fade(#333, 90%);
  color: white;
}

.thread-popup {
  @top-line-height: 26px;
  left: -9999px;
  width: 40vw;
  min-width: 400px;
  padding: 0;
  z-index: 1000;
  box-shadow: 0 3px 24px fade(black, 25%);

  .top-line {
    display: flex;
    height: @top-line-height;
    line-height: @top-line-height;
    padding-left: 10px;
    font-size: .8em;
    background: @pane-bg-color;

    button {
      padding: 6px;
      color: @topic-color;
      .touchable-bg(white);
    }

    .to-pane {
      .button-icon('../res/to-pane.svg', 14px, 5px);
    }

    .scroll-to {
      .button-icon('../res/scroll-to.svg', 14px, 5px);
    }
  }

  .chat-pane {
    box-shadow: 0 0 8px fade(black, 8%);
  }

  .messages-container {
    max-height: 80vh;
    padding: 10px;
    padding-left: 14px;
  }
}

.dialog-cover {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog {
  display: flex;
  flex-direction: column;
  width: 415px;
  padding: @dialog-padding;
  margin: 5px;
  .dialog-shape();
  background: white;
  overflow: hidden;
  user-select: none;

  .spacer {
    flex: 1;
  }

  .top-line {
    @top-separator-bleed: 2px;
    display: flex;
    align-items: center;
    margin: -@top-separator-bleed 0;
    cursor: default;

    .logo {
      display: flex;
      align-items: center;
      margin-right: 20px;
      border-right: 1px solid fade(black, 35%);
      padding-top: @top-separator-bleed;
      padding-bottom: @top-separator-bleed;
      padding-right: 20px;

      .emoji-euphoria {
        width: 26px;
        height: 26px;
        margin-right: 10px;
      }
    }

    .spinner {
      margin-left: 10px;
    }

    .close {
      position: relative;
      padding: 6px;
      border-radius: 3px;
      .touchable-bg(white);
      .button-icon('../res/close-dialog.svg', 14px, 0, .5);
      .larger-touch-target(10px, 10px);
    }
  }

  .content {
    margin-top: 15px;

    .notice {
      text-align: center;
    }

    .bottom {
      padding: @dialog-padding;
      margin: -@dialog-padding;
      margin-top: 15px;

      &.green-bg {
        background: fade(@account-color, 7%);
        margin-top: 34px;
        border-top: 1px solid fade(@account-color, 10%);
      }
    }

    .action-line {
      display: flex;
      align-items: center;

      &.centered {
        justify-content: center;
      }

      &:not(.centered) {
        button.major-action, button.major-secondary-action {
          &:last-child {
            margin-left: 22px;
          }
        }
      }
    }
  }
}

.account-auth-dialog, .account-settings-dialog {
  .email-icon {
    background: data-uri('../res/email.svg') no-repeat center center;
    background-size: contain;
    width: 300px;
    height: 200px;
    margin: 20px auto 30px;
  }
}

.account-auth-dialog .content {
  .register-fine-print {
    font-size: .92rem;
    margin-bottom: 20px;
  }
}

.account-settings-dialog .content {
  .account-state, .not-verified {
    margin: 15px 0;

    .sign-out, .resend-verify {
      margin-left: .5em;
    }
  }

  .not-verified {
    color: @error-color;
  }

  .field-label-container {
    margin-top: 20px;
  }

  .big-nick {
    margin: -3px;
    padding: 3px 6px;
    border-radius: 3px;
  }

  .nick-preview {
    overflow: hidden;

    .big-nick {
      transition: background-color .25s ease;
    }

    .placeholder {
      opacity: .25;
    }
  }

  .password-changed {
    margin-left: 1em;
    color: green;
    font-weight: bold;
  }
}

.manager-toolbox-popup {
  z-index: 1001;
  border-bottom: 5px solid @manager-dark-color;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding: 0;

  .manager-toolbox {
    .items {
      min-width: 380px;
      width: 40vw;
      min-height: 150px;
    }
  }
}

.manager-toolbox {
  display: flex;
  flex: 1;
  flex-direction: column;
  user-select: none;

  .items, .action {
    padding: 8px;
  }

  .items {
    flex: 1;

    &.empty {
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: .5;
    }

    .item {
      display: inline-flex;
      align-items: center;
      padding: 1px 4px;
      margin-right: 3px;
      margin-bottom: 3px;
      height: 19px;
      border-radius: 2px;
      background: @neutral-color;
      opacity: .5;
      transition: all .15s ease;
      user-select: text;

      &.active {
        opacity: 1;
      }

      &.removed {
        background: mix(#f44, @neutral-color, 25%);
      }

      &.message {
        .icon('../res/message.svg', 12px, 4px, .5);
      }

      &.user {
        .icon('../res/euphorian.svg', 12px, 4px, .5);
      }

      .id, .addr {
        margin-left: 4px;
        font-size: .75em;
        font-family: monospace;
      }

      .id {
        color: fade(black, 50%);
      }

      .addr {
        color: darkred;
      }
    }
  }

  .action {
    display: flex;
    align-items: center;
    background: fade(@manager-color, 25%);

    &, select {
      font-size: 1em;
    }

    select, button {
      background: white;
      border: none;
      padding: 2px;
      box-shadow: 0 0 2px black;
      box-sizing: border-box;
      height: 22px;
    }

    .preview, .toggle-global {
      margin: 0 10px;
    }

    .preview {
      color: @manager-dark-color;
      font-size: 1.05em;
    }

    .spacer {
      flex: 1;
    }

    .apply {
      display: flex;
      padding: 0 6px;
      .touchable-bg(white);

      .inner {
        display: flex;
      }

      .emoji {
        margin-right: 3px;
      }
    }
  }
}

.spinner {
  transition: all .1s ease;
  opacity: .35;

  &, &:before {
    width: 17px;
    height: 17px;
  }

  &:before {
    content: '';
    display: block;
    background: data-uri('../res/spinner.svg') no-repeat center center;
    background-size: contain;
    animation: spin .85s linear infinite;

    @keyframes spin {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
  }

  &.spinner-enter {
    opacity: 0;
    transform: scale(.85);

    &.spinner-enter-active {
      opacity: .35;
      transform: scale(1);
    }
  }

  &.spinner-leave {
    opacity: .35;
    transform: scale(1);

    &.spinner-leave-active {
      opacity: 0;
      transform: scale(.85);
    }
  }
}

#noscript-notice {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
  font-size: 26px;
  margin: 80px 50px;

  img {
    opacity: .35;
  }
}

@media (max-width: @mobile-breakpoint) {
  .info-pane, .sidebar-pane, .thread-panes {
    margin-top: 0;
  }

  .notice .long {
    display: none;
  }

  body.touch .info-pane {
    .thread-list-container {
      border-bottom: none;
      margin-bottom: 0;
    }

    .notification-list {
      margin-top: 0;
      margin-bottom: -8px;
      border-top: 1px solid #ccc;
    }
  }

  .chat-pane .messages-container {
    -webkit-transform: translate3d(0, 0, 0);
    padding-left: 0;

    .message-node > .line {
      display: block;
      white-space: nowrap;
      margin-right: 5px;

      &.has-embed {
        display: flex;
      }

      .content, .content > .message {
        display: inline;
      }

      .content {
        position: relative;
        left: .5em;

        .message, .embeds {
          margin-left: -.5em;
        }
      }

      &.mention .message {
        line-height: 20px;
      }

      .nick {
        display: inline-block;

        // show on top of message expandos
        position: relative;
        z-index: 10;
      }

      // if there's text, push embeds to the next line
      .message + .embeds {
        display: block;
      }

      .expando {
        margin-top: -6px;
      }
    }

    .replies.collapsible > .indent-line {
      margin-top: 2px;
    }

    .welcome > .message {
      font-size: .8em;
    }
  }

  .dialog {
    padding: floor(@dialog-padding * .75);

    .top-line {
      .logo {
        font-size: 0;

        .emoji-euphoria {
          margin-right: 0;
        }
      }
    }

    .long {
      display: none;
    }
  }
}

.sponsorctl > .line > .content {
  & > .message > span,
  & > .message-tall > .message > span {
    font-family: monospace;
  }
}

.sponsored > .line > .content {
  & > .message > span,
  & > .message-tall > .message > span {
    background: #ffcccc;
    font-weight: bold;
  }
}
