body.loading {
  div.messages { @include opacity(0.4); }
}

body.ios-input-focus {
  nav.bar { display: none; }
  div.messages { padding-bottom: 5px; }
  form.input { position: static; }
}

nav.bar {
  background: #fafafa;
  position: fixed;
  padding: 0 $bodyGutter;
  top: 0;
  left: 0;
  right: 0;
  height: $navHeight;
  z-index: $navBarZindex;
  overflow: hidden;
  @include box-shadow(0 4px 4px -2px rgba(180,180,180,.5));

  img { vertical-align: middle; }

  a, a:active {
    color: #000;
    text-decoration: none;
    padding: 0 4px;
    height: $navHeight;
    line-height: $navHeight - 2;
    display: block;
    float: left;
    position: relative;
  }

  a b { bottom: 1px; }

  a.conversation { color: #666; }
  a.conversations.overlapping { @include box-shadow(-2px 0px 4px 0px rgba(110, 110, 110, 0.28)); }
  ul.conversations { height: $navHeight; }

  .right {
    background: #fafafa;
    position: absolute;
    top: 0;
    right: $bodyGutter;
    a, a:active { font-size: 1.2em; width: 2em; text-align: center; }
  }

  a:hover, a:active { background-color: darken(#fff, 15%); color: #000; }

  @media (max-width: $responsiveWidth) {
    padding: 0;
    .right { right: 0; }
  }
}

form.input {
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: $nickListWidth;
  padding-bottom: 2px;

  input { background: #fafafa; width: 100%; padding: 8px; font-size: $fontSize + 1; }
  input.disabled, input[disabled] { background-color: #eee; }

  @media (max-width: $responsiveWidth) {
    & { right: 0; }
    input {
      border: 0;
      border-top: 2px solid darken(#fff, 40%);
      @include border-radius(0);
    }
  }
}

// unread messages count
nav.bar a b, form.conversations b {
  background: #d53;
  color: #fff;
  font-size: 12px;
  line-height: 14px;
  font-weight: normal;
  padding: 0 3px;
  position: absolute;
  right: 2px;
  @include border-radius(3px);
}

div.messages {
  padding-top: $navHeight + 4;
  padding-bottom: $navHeight + 8;
  margin-right: 180px;

  li {
    display: block;
    position: relative;
    padding: 3px 0;
    overflow: hidden;

    &.hidden { display: none !important; }

    div.question { padding-left: 50px; }
    button, .button { font-size: 0.9em; }
    img.avatar { float: left; max-width: 40px; }
    h3 { font-size: 1em; color: #467; line-height: 1.2em; margin: 0; }
    h3, div.content, div.embed { margin-left: 50px; }
    div.content { max-width: 40em; line-height:1.4em; }
    div.whitespace {  white-space: pre-wrap; }
    div.embed {
      img { max-height: 220px; border: 2px solid #bbb; @include border-radius(20px); margin: 8px 0; }
    }
    div.timestamp {
      float: right;
      height: 16px;
      overflow: visible;
      color: #999;
      font-size: .85em;
    }
    span.actions {
      float: right;
      padding-right: 2px;
    }
  }

  li.help {
    dt { font-style: italic; float: left; width: auto; padding-right: 5px; }
    dd { color: #666; margin: 0; }
    dd:before { content: '- '; }
    h3, div.content, div.embed { margin-left: 3px; }
  }

  li.history-starting-point {
    border-top: 2px solid darken(#fee, 20%);
  }

  li.same-nick {
    padding-top: 0;
    h3, .avatar { display: none; }
  }

  li.message.channel.highlight { background: #fee; }
  li.message.action div.content { padding-top: 20px; }
  li.message.action.same-nick div.content { padding-top: 0; }
  li.message.action div.content a { font-weight: normal; text-decoration: none; }
  li.message.pending div.content { color: #888; }
  li.message.pending h3 { color: #ccc; }
  li.message.error {
    background: lighten($errorColor, 40%);
    div.timestamp { color: #fee; }
    h3 { color: #333; }
  }
  li.nick-change, li.nick-joined, li.nick-parted, li.nick-quit, li.notice, li.topic, li.whois {
    background-color: #f9f7fa;
    color: #888;
  }
  li.nick-change, li.nick-parted, li.nick-quit {
    .content b { font-weight: normal; }
  }

  @media (max-width: $responsiveWidth) {
    margin-right: 0;
    li.with-padding { margin-left: 5px; }
  }
}

form.sidebar-right,
div.sidebar-right {
  background: $sidebarBackground;
  color: #333333;
  display: none;
  position: fixed;
  top: $navHeight;
  right: 0;
  bottom: -3px;
  overflow: auto;
  width: $nickListWidth;
  padding-bottom: 20px;
  z-index: 2;
  @include box-shadow(-2px 0 4px rgba(180,180,180,.5));

  -webkit-overflow-scrolling: touch;

  button.link {
    background: transparent;
    border: 0;
    width: 100%;
    padding: 6px 8px;
    text-align: left;
    display: block;
    overflow: visible; /* shrinkwrap the text in <IE7 */
    cursor: pointer;
    -moz-user-select: text;
  }

  select, input, .selectize-input { width: 100%; }
  hr { margin: $selectizeOptionPadding; padding: 0; }

  a:hover, a:focus, button.link:hover, button.link:focus {
    background-color: darken(#eee, 5%);
    color: #000;
  }

  h3 { font-size: 1em; margin: 0; };
  h3, a, div.form-group {
    text-decoration: none;
    display: block;
    padding: $selectizeOptionPadding;
  }

  ul ul li {
    a, button.link {
      background-image: url(../image/fa-caret-right.png);
      background-position: 9px 50%;
      background-repeat: no-repeat;
      padding-left: 20px;
    }
  }
}

div.notification-list {
  width: 270px;

  a { padding: 2px 8px; color: #666; }
  a span.message { font-size: 0.9em; padding: 0; @include ellipsis(); }
  li.unread a { background-color: rgba(204, 100, 40, 0.18); color: #000; };
}

form.conversations {
  width: $nickListWidth + 60;
  a { position: relative; }
  a b { top: 9px; }
  .create { display: none; }
  .howto { padding: 1em 0; color: #666; font-size: 0.9em; }
}

@media (min-width: $responsiveWidth) {
  form.sidebar {
    background: #f8f8f8;
    display: block !important;
    right: 0 !important;
    @include box-shadow(inset 2px -2px 2px rgba(180,180,180,.5));
  }
}

@media print {
  nav, .sidebar-right, form.input {
    display: none;
    overflow: hidden;
    left: -1000px;
    width: 1px;
  }
}
