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

  a, a:active {
    color: #000;
    text-decoration: none;
    padding: 10px 4px;
    display: block;
    float: left;
  }

  a.conversation { color: #666; }
  a.conversations.toggler { display: none; }
  a.sidebar.toggler { display: none; }

  .right {
    background: #fafafa;
    position: absolute;
    right: $bodyGutter;
    a, a:active { font-size: 1.2em; width: 2em; text-align: center; }
    a.notifications.toggler { position: relative; }
    a.notifications.toggler b { position: absolute; bottom: -3px; right: 2px; color: #bbb; font-size: 0.9em; font-weight: normal; }
    a.notifications.toggler.alert b { color: #b22; }
    a.hidden { display: none; }
  }

  a.active, a:hover, a:active { background-color: darken(#fff, 15%); color: #000; }
  ul.conversations li.unread a { color: $unreadColor };
}

div.notification.question {
  padding-left: $bodyGutter;
  width: 100%;
  z-index: $navBarZindex - 1;
  position: fixed;
  top: 40px;
  display: none;
  button, .button { font-size: 0.9em; }
}

div.add-conversation.container,
div.conversations.container,
div.notifications.container,
div.sidebar.container {
  background: darken(#fdfdfd, 2%);
  position: fixed;
  top: 39px;
  width: 300px;
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: $navBarZindex + 1;
  display: none;
  border: 1px solid darken(#fff, 15%);
  border-top-width: 6px;

  h3, a { color: #000; text-decoration: none; padding: 4px; display: block; }
  h3 { font-size: 1em; margin: 0; };
  button.inactive, a.inactive { color: lighten(#000, 60%); }

  ul ul li {
    a, button {
      background-image: url(../image/fa-caret-right.png);
      background-position: 9px 50%;
      background-repeat: no-repeat;
      font-size: 0.9em;
      height: 2em;
      padding: 2px 2px 2px 20px;
      border: 0;
    }
  }

  a:hover, a:active, a:focus {
    background-color: darken(#eee, 5%);
    color: #000;
    outline: 0;
  }
  a:focus, button:focus { background-color: darken(#fff, 8%); }
}

div.sidebar.container {
  button {
    background: transparent;
    width: 100%;
    text-align: left;
    display: block;
    overflow: visible; /* shrinkwrap the text in <IE7 */
    cursor: pointer;
    -moz-user-select: text;
  }

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

div.add-conversation.container {
  padding-left: 3px;
  padding-bottom: 6px;
  height: auto;
}

div.conversations.container {
  li.unread a { color: $unreadColor };
}

div.notifications.container {
  li.unread { border-right: 2px solid #f66; }
  span.message { color: #666; font-size: 0.9em; line-height: 1em; @include ellipsis(); }
}

@media (min-width: $responsiveWidth) {
  div.sidebar.container {
    background: #f3f3f3;
    border: 0;
    border-left: 1px solid #ddd;
    width: $nickListWidth;
    position: fixed;
    display: block;
    top: 42px;
    bottom: -1px;
    right: 0;
    z-index: 2;

    h3, a { text-decoration: none; display: block; padding: 4px 8px; }
  }
}

div.messages {
  padding-top: 45px;

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

    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 {
      max-height: 220px;
      img { max-height: 220px; border: 2px solid #bbb; @include border-radius(20px); margin: 8px 0; }
    }
    span.timestamp {
      position: absolute;
      top: 2px;
      right: 2px;
      color: #999;
      font-size: .85em;
    }
    span.actions {
      float: right;
      padding-right: 2px;
    }
  }

  li.same-nick { padding-top: 0; }
  li.action.message div.content { padding-top: 20px; }
  li.action.message.same-nick div.content { padding-top: 0; }
  li.action.message div.content a { font-weight: normal; text-decoration: none; }
  li.message-pending div.content { color: #999; }
  li.message-pending h3 { color: #ccc; }
  li.message-error { font-style: italic; }
  li.message-error h3 { color: #333; font-style: italic; }
  li.message-error, li.network-message.error { background: lighten($errorColor, 40%); }
  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; }
  }
}

body.chat {
  footer form { display: block; }
  ul.conversations li.first a {
    background-color: darken(#fff, 5%);
    font-weight: bold;
    color: #000;
  }
}

body.convos {
  a.convos { background-color: darken(#fff, 5%); }
  footer form { display: block; }
}

body.without-sidebar {
  div.sidebar.container {
    display: none;
  }
}

body.with-sidebar {
  footer form { margin-right: $nickListWidth; }
  div.messages {
    margin-right: $nickListWidth;
    li.highlight { background: #fee; }
  }
}

body.historic {
  div.sidebar.container { display: none; }
  footer { display: none; }
  div.clear { height: 20px; }
}

div.goto-bottom a {
  display: none;
  background: #fafafa;
  color: #333;
  position: fixed;
  right: 6px;
  bottom: 42px;
  padding: 5px;
  z-index: $navBarZindex;
  border: 1px solid #ccc;
  @include border-radius(4px);
  @include opacity(.8);
}

@media (max-width: $responsiveWidth) {
  footer, nav.bar, .row { padding: 0; }
  nav.bar .right { right: 0; }
  div.messages { margin-right: 0; }

  body.with-sidebar {
    nav.bar a.sidebar.toggler { display: block; }
    div.messages, footer form { margin-right: 0; }
    div.sidebar.container { display: none; }
  }

  body.with-sidebar,
  body.without-sidebar {
    div.wrapper {
      margin-bottom: -42px;
      div.clear { height: 42px; }
    }
  }
}
