<commit_before>@-webkit-keyframes slideInInspect
  0%
    height: 0px
  100%
    height: 40px

@-moz-keyframes slideInInspect
  0%
    height: 0px
  100%
    height: 40px

@keyframes slideInInspect
  0%
    height: 0px
  100%
    height: 40px

.view-container.cloud-container
  @media (max-width: $phone)
    .fixed-container
      display: none
    .float-container
      display: block

.fixed-container
  .container-inner
    // background: transparent
    // left: 0%
    // right: 0%
    // @each $vendor in "", -webkit-, -o-, -moz-
    //   #{$vendor}transition-property: right, left
    //   #{$vendor}transition-duration: .4s, .4s
    
  .container-inner-secondary
    left: 100%
    right: -100%
    border-left: 1px solid rgba(50,50,50,.5)
    @each $vendor in "", -webkit-, -o-, -moz-
      #{$vendor}transition-property: right, left
      #{$vendor}transition-duration: .4s, .4s
    @each $vendor in "", -webkit-, -moz-
      #{$vendor}animation-name: slideInDialog
      #{$vendor}animation-duration: .4s
      // #{$vendor}animation-delay: .1
      #{$vendor}animation-fill-mode: backwards
      // #{$vendor}animation-timing-function: ease-in-out
      
.fixed-container.show-secondary
  // .container-inner
  //   left: -100%
  //   right: 100%
  .container-inner-secondary
    left: 0%
    right: 0%

.cloud-sidebar-inner
  border-bottom: 1px solid rgba(255,255,255,1)

.cloud-sidebar-top
  
  position: relative
  
  padding-top: 10px

  border-bottom: 1px solid rgba(0,0,0,.2)
  
  background: #f0f0f0 $bgNoise
  +box-shadow(0,1px,4px,rgba(0,0,0,.2))
  
  &:before
    content: ""
    position: absolute
    bottom: -1px
    left: 40px
    right: 40px
    height: 70px
    display: block
    z-index: -1
    
    +box-shadow(0,0,200px,rgba(0,0,0,.3))
    background: transparent
    
  a.close
    margin: 5px 10px 0 0
  ul.nav-tabs.nav-stacked
    padding-bottom: 1px
    border: 1px solid rgba(50, 50, 50, 0.5)
    background: #DDD
    +box-shadow-inset(1px,1px,5px,rgba(0,0,0,.3))
    +border-radius(3px)
    li > a
      font-weight: bold
      color: #333
      border: 0
      &:hover
        background: rgba(255,255,255,.3)
    li.active > a
      background: rgba(255,255,255,.8)
      
  
.cloud-sidebar-bottom
  overflow: auto
  
  .controls
    textarea, input[type=text], input[type=password]
      width: 100%
      +box-sizing(border-box)
      +box-shadow(0,0,0,rgba(0,0,0,0))
    input[type=text], input[type=password]
      height: 26px
      
  .tab-content
    margin: 10px
    overflow: visible

.cloud-sidebar-head
  margin: 0 10px 10px 10px
  h3
    margin-bottom: 15px
    padding-top: 3px
  
.cloud-ad
  position: relative
  width: 300px
  height: 269px
  background: #999
  margin: 0 10px 10px 10px
  border: 1px solid rgba(50, 50, 50, 0.5)
  background: #DDD
  +box-shadow-inset(1px,1px,5px,rgba(0,0,0,.3))
  +border-radius(3px)
  
  a
    position: absolute
    top: 0
    bottom: 0
    right: 0
    left: 0
    background: asset-data-url("logo/donate_button.png") center center no-repeat
    background-size: 100%
    margin: 20px

.cloud-actions
  margin: 10px
  a
    display: block
    border: 1px solid rgba(0,0,0,.3)
    margin-bottom: 5px
    +border-radius(2px)
    text-align: left
    font-weight: bold
    i
      float: right
      margin: 2px

.cloud-user-list-wrapper

.cloud-rules
  margin: 0 10px
  padding: 10px 0

ul.cloud-user-list
  padding: 0
  margin: 0
  list-style: none
  display: block
  &:after
    content: "."
    display: block
    clear: both
    visibility: hidden
    line-height: 0
    height: 0

li.cloud-user
  border-bottom: 1px solid rgba(50,50,50,.3)
  a
    border-bottom: 1px solid rgba(255,255,255,1)
    
  &:after
    content: "."
    display: block
    clear: both
    visibility: hidden
    line-height: 0
    height: 0
  a
    display: block
    line-height: 47px
    color: #333
    font-weight: bold
    
    &:after
      content: "."
      display: block
      clear: both
      visibility: hidden
      line-height: 0
      height: 0
    
    &:hover
      text-decoration: none
      img
        +opacity(1)
    
    img
      float: left
      +opacity(.7)
      margin: 10px
      border: 1px solid rgba(0,0,0,.3)
    span
      font-weight: bold
  

.cloud-head
  position: absolute
  top: 0
  left: 0
  right: 0
  z-index: 5
  
  border-bottom: 1px solid rgba(0,0,0,.2)
  
  @media (max-width: $phone)
    margin: 0
  @media (min-width: $ipad-min) and (max-width: $ipad-max)
    margin: 0 15px
  @media (min-width: $desktop-s-min)
    margin: 0 25px
  
  &:before
    content: ""
    position: absolute
    bottom: -1px
    left: 80px
    right: 80px
    height: 70px
    display: block
    z-index: 0
    
    +box-shadow(0,0,100px,rgba(0,0,0,.1))
    background: transparent
    

.cloud-head-inner
  
  position: relative

  height: 80px
  padding: 10px
  
  z-index: 6
  
  border-bottom: 1px solid white
  
  background: #F0F0F0 $bgNoise

  .float-left
    margin-bottom: 20px
    img
      height: 70px
      width: 70px
      +border-radius(10px)
  
  p, h2
    margin-left: 80px
    word-wrap: break-word
    
.cloud-head-actions
  text-align: left
  clear: both


.cloud-content
  margin: 169px 5px 0 5px
  display: inline-block
  position: absolute !important
  width: auto
  top: 0
  bottom: 0
  left: 0
  right: 0

.chat-container
  &.expanded-sidebar
    a.sidebar-toggle
      background-image: image-url("icons/glyphicons/black/step_forward.png")
      background-image: none, image-url("icons/glyphicons/black/step_forward.svg"), image-url("icons/glyphicons/black/step_forward.png")
    @media (min-width: $ipad-min) and (max-width: $ipad-max)
      .chat-wrapper
        display: none
      .chat-sidebar
        display: block
        float: none
        width: auto
        border-left: 0
        margin-left: 1px
        background: #F8F8F8
      .chat-sidebar-header
        span.chat-sidebar-online-count
          display: inline-block
      ul.chat-online-list
        overflow: auto
        li a
          padding: 3px
          span
            display: inline-block
            font-size: 15px
          img
            +border-radius(3px)
  
.chat-wrapper
  position: relative
  height: 100%
    
.chat-dialog
  position: absolute
  left: 0
  right: 0

  padding: 10px
  
  background: rgb(229,232,239)
  +linear-gradient(rgb(229,232,239),rgb(199,207,216))
  
  border-bottom: 1px solid $color-border-heavy
  
  z-index: 1
  
  background-size: 100% auto
  background-position: center center
  background-repeat: repeat-x
  
  @media (max-width: $ipad-max)
    img
      display: none
  @media (min-width: $desktop-s-min)
    img
      float: left
      border: 1px solid $color-border-dark
      margin-right: 10px
  
  h2
    text-shadow: 1px 1px 0 rgba(255,255,255,.7)
    
  h2, p
    color: #444
    span
      font-weight: bold

.chat-messages
  position: absolute
  top: 0
  bottom: 37px
  overflow: auto
  left: 0
  right: 0
  @media (max-width: $phone)
    padding: 102px 0 0 0
  @media (min-width: $ipad-min) and (max-width: $ipad-max)
    padding: 102px 15px 0 15px
  @media (min-width: $desktop-s-min)
    padding: 102px 25px 0 25px    
  
.chat-footer
  position: absolute
  z-index: 5
  bottom: 0
  height: auto
  left: 0
  right: 0
  border-top: rgba(0,0,0,.2) solid 1px
  +linear-gradient(#f8f8f8,#efefef)
    
  &:not(.with-access-to-settings)
    a.cloud-settings-toggle
      display: none
  form
    position: relative
    margin: 5px 30px 5px 5px
    float: none
    padding-bottom: 6px
    pre
      padding: 0px
      margin-bottom: 0
      min-height: 16px
      max-height: 88px
    textarea
      width: 100%
      padding: 3px 3px 0px 20px
      font-size: 12px
      resize: none
      min-height: 18px
      max-height: 90px
      color: #404040
      background: rgba(0, 0, 0, 0.05) asset-data-url("icons/tools/comment.png") 2px 4px no-repeat
      border: rgba(0, 0, 20, 0.2) solid 1px
      margin-bottom: 0
      +border-radius(3px)
      +box-shadow-inset(0px,0px,1px,rgba(255,255,255,1))
      height: auto
  
a.cloud-settings-toggle
  position: absolute
  right: -56px
  top: 0px
  height: 25px
  width: 25px
  background-image: asset-data-url("icons/glyphicons/gray/cogwheel.png")
  background-position: center center
  background-size: 100%
  +opacity(.4)
  &:hover
    +opacity(.7)
      
.chat-message
  border-top: rgba(255,255,255,.6) solid 1px
  border-bottom: rgba(0,0,0,.1) solid 1px
  padding: 10px
  p
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif !important
    
  &.self-reference
    .chat-message-meta
      text-align: center
      float: none
      margin: 0 0 5px 0
      span
        font-weight: normal
        
    .chat-message-content
      padding-left: 0
      p
        text-align: center
        color: #333
        
  &.chat-message-with-drops
    ul.chat-message-drops
      display: block
    .chat-message-content
      @media (max-width: $ipad-max)
        margin-right: 0
      @media (min-width: $desktop-s-min) and (max-width: $desktop-s-max)
        margin-right: 155px
      @media (min-width: $desktop-m-min)
        margin-right: 310px
      @media (min-width: $desktop-l-min)
        margin-right: 465px
      
      
  &:after
    content: "."
    display: block
    clear: both
    visibility: hidden
    line-height: 0
    height: 0
  &:first-child
    border-top: 0
  &:last-child
    border-bottom: 0
  &:hover
    .chat-message-meta
      +opacity(1)
      
.chat-message-avatar
  float: left
  margin-right: 10px
  img
    width: 50px
    height: 50px
    +border-radius(5px)
    +box-shadow(1px,1px,2px,rgba(0,0,0,.1))
    border: 1px solid #555
    
.chat-message-meta
  float: right
  margin-right: 7px
  font-size: 10px
  font-weight: bold
  +opacity(.5)
  +transition(opacity .08s ease-in)
  
.chat-message-head
  margin-bottom: 5px
  font-weight: bold
  a
    color: inherit
    &:after
      display: inline
      font-size: 10px
      margin-left: 5px
      
    &:hover
      text-decoration: none
      color: $color-blue
      &:after
        color: #666
        
.chat-message-content
  padding-left: 64px
  p
    color: #333333
    margin-bottom: 4px
    word-wrap: break-word
    
ul.chat-message-drops
  display: none
  margin: 0
  
  @media (max-width: $ipad-max)
    float: none
    padding-left: 64px
  @media (min-width: $desktop-s-min)
    float: right
  @media (min-width: $desktop-s-min) and (max-width: $desktop-s-max)
    width: 155px
  @media (min-width: $desktop-m-min) and (max-width: $desktop-m-max)
    width: 310px
  @media (min-width: $desktop-l-min)
    width: 465px
  &:after
    content: "."
    display: block
    clear: both
    visibility: hidden
    line-height: 0
    height: 0
  li
    display: block
    position: relative
    float: right
    
    @media (max-width: $ipad-max)
      float: left
      margin-bottom: 5px
      margin-right: 5px
    @media (min-width: $desktop-s-min)
      float: right
      margin-bottom: 5px
      margin-left: 5px
      
    &:after
      content: "."
      display: block
      clear: both
      visibility: hidden
      line-height: 0
      height: 0
    
    &:hover
      a.drop-title
        display: block
        span
        
li.drop
  display: block
  
  &:after
    content: "."
    display: block
    clear: both
    visibility: hidden
    line-height: 0
    height: 0

a.drop-preview

  @media (max-width: $ipad-max)
    height: 47px
    width: 62px
    padding: 3px
  @media (min-width: $desktop-s-min)
    height: 92px
    width: 122px
    padding: 5px
  
  float:  left
  border: 1px solid $color-border-light
  background: #fff
  
  +box-shadow(1px,1px,3px,rgba(0,0,0,.1))
  +border-radius(3px)
  
  &:hover
    border-color: #8AB8DC
    img
      border-color: #8AB8DC
  img
    @media (max-width: $ipad-max)
      height: 45px
      width: 60px
    @media (min-width: $desktop-s-min)
      height: 90px
      width: 120px
      
    border: 1px solid $color-border-light
    +box-shadow(1px,1px,2px,rgba(0,0,0,.1))
      
.chat-message
  
  &.role-mod
    $color-mod: #6666FF
    .chat-message-avatar > a > img
      border-color: $color-mod darken($color-mod,10%) darken($color-mod,10%) $color-mod
    .chat-message-head > a
      color: $color-mod
      &:hover
        color: darken($color-mod,10%)
  
  &.role-owner
    $color-owner: #8000FF
    .chat-message-avatar > a > img
      border-color: $color-owner darken($color-owner,10%) darken($color-owner,10%) $color-owner
    .chat-message-head > a
      color: $color-owner
      &:hover
        color: darken($color-owner,10%)
  
  &.role-moderator
    .chat-message-head > a:after
      content: "mod"
      color: #CC9900
  
  &.role-admin
    .chat-message-head > a:after
      content: "admin"
      color: #669966
  
  &.role-developer<commit_msg>Removed admin & mod tags.<commit_after>@-webkit-keyframes slideInInspect
  0%
    height: 0px
  100%
    height: 40px

@-moz-keyframes slideInInspect
  0%
    height: 0px
  100%
    height: 40px

@keyframes slideInInspect
  0%
    height: 0px
  100%
    height: 40px

.view-container.cloud-container
  @media (max-width: $phone)
    .fixed-container
      display: none
    .float-container
      display: block

.fixed-container
  .container-inner
    // background: transparent
    // left: 0%
    // right: 0%
    // @each $vendor in "", -webkit-, -o-, -moz-
    //   #{$vendor}transition-property: right, left
    //   #{$vendor}transition-duration: .4s, .4s
    
  .container-inner-secondary
    left: 100%
    right: -100%
    border-left: 1px solid rgba(50,50,50,.5)
    @each $vendor in "", -webkit-, -o-, -moz-
      #{$vendor}transition-property: right, left
      #{$vendor}transition-duration: .4s, .4s
    @each $vendor in "", -webkit-, -moz-
      #{$vendor}animation-name: slideInDialog
      #{$vendor}animation-duration: .4s
      // #{$vendor}animation-delay: .1
      #{$vendor}animation-fill-mode: backwards
      // #{$vendor}animation-timing-function: ease-in-out
      
.fixed-container.show-secondary
  // .container-inner
  //   left: -100%
  //   right: 100%
  .container-inner-secondary
    left: 0%
    right: 0%

.cloud-sidebar-inner
  border-bottom: 1px solid rgba(255,255,255,1)

.cloud-sidebar-top
  
  position: relative
  
  padding-top: 10px

  border-bottom: 1px solid rgba(0,0,0,.2)
  
  background: #f0f0f0 $bgNoise
  +box-shadow(0,1px,4px,rgba(0,0,0,.2))
  
  &:before
    content: ""
    position: absolute
    bottom: -1px
    left: 40px
    right: 40px
    height: 70px
    display: block
    z-index: -1
    
    +box-shadow(0,0,200px,rgba(0,0,0,.3))
    background: transparent
    
  a.close
    margin: 5px 10px 0 0
  ul.nav-tabs.nav-stacked
    padding-bottom: 1px
    border: 1px solid rgba(50, 50, 50, 0.5)
    background: #DDD
    +box-shadow-inset(1px,1px,5px,rgba(0,0,0,.3))
    +border-radius(3px)
    li > a
      font-weight: bold
      color: #333
      border: 0
      &:hover
        background: rgba(255,255,255,.3)
    li.active > a
      background: rgba(255,255,255,.8)
      
  
.cloud-sidebar-bottom
  overflow: auto
  
  .controls
    textarea, input[type=text], input[type=password]
      width: 100%
      +box-sizing(border-box)
      +box-shadow(0,0,0,rgba(0,0,0,0))
    input[type=text], input[type=password]
      height: 26px
      
  .tab-content
    margin: 10px
    overflow: visible

.cloud-sidebar-head
  margin: 0 10px 10px 10px
  h3
    margin-bottom: 15px
    padding-top: 3px
  
.cloud-ad
  position: relative
  width: 300px
  height: 269px
  background: #999
  margin: 0 10px 10px 10px
  border: 1px solid rgba(50, 50, 50, 0.5)
  background: #DDD
  +box-shadow-inset(1px,1px,5px,rgba(0,0,0,.3))
  +border-radius(3px)
  
  a
    position: absolute
    top: 0
    bottom: 0
    right: 0
    left: 0
    background: asset-data-url("logo/donate_button.png") center center no-repeat
    background-size: 100%
    margin: 20px

.cloud-actions
  margin: 10px
  a
    display: block
    border: 1px solid rgba(0,0,0,.3)
    margin-bottom: 5px
    +border-radius(2px)
    text-align: left
    font-weight: bold
    i
      float: right
      margin: 2px

.cloud-user-list-wrapper

.cloud-rules
  margin: 0 10px
  padding: 10px 0

ul.cloud-user-list
  padding: 0
  margin: 0
  list-style: none
  display: block
  &:after
    content: "."
    display: block
    clear: both
    visibility: hidden
    line-height: 0
    height: 0

li.cloud-user
  border-bottom: 1px solid rgba(50,50,50,.3)
  a
    border-bottom: 1px solid rgba(255,255,255,1)
    
  &:after
    content: "."
    display: block
    clear: both
    visibility: hidden
    line-height: 0
    height: 0
  a
    display: block
    line-height: 47px
    color: #333
    font-weight: bold
    
    &:after
      content: "."
      display: block
      clear: both
      visibility: hidden
      line-height: 0
      height: 0
    
    &:hover
      text-decoration: none
      img
        +opacity(1)
    
    img
      float: left
      +opacity(.7)
      margin: 10px
      border: 1px solid rgba(0,0,0,.3)
    span
      font-weight: bold
  

.cloud-head
  position: absolute
  top: 0
  left: 0
  right: 0
  z-index: 5
  
  border-bottom: 1px solid rgba(0,0,0,.2)
  
  @media (max-width: $phone)
    margin: 0
  @media (min-width: $ipad-min) and (max-width: $ipad-max)
    margin: 0 15px
  @media (min-width: $desktop-s-min)
    margin: 0 25px
  
  &:before
    content: ""
    position: absolute
    bottom: -1px
    left: 80px
    right: 80px
    height: 70px
    display: block
    z-index: 0
    
    +box-shadow(0,0,100px,rgba(0,0,0,.1))
    background: transparent
    

.cloud-head-inner
  
  position: relative

  height: 80px
  padding: 10px
  
  z-index: 6
  
  border-bottom: 1px solid white
  
  background: #F0F0F0 $bgNoise

  .float-left
    margin-bottom: 20px
    img
      height: 70px
      width: 70px
      +border-radius(10px)
  
  p, h2
    margin-left: 80px
    word-wrap: break-word
    
.cloud-head-actions
  text-align: left
  clear: both


.cloud-content
  margin: 169px 5px 0 5px
  display: inline-block
  position: absolute !important
  width: auto
  top: 0
  bottom: 0
  left: 0
  right: 0

.chat-container
  &.expanded-sidebar
    a.sidebar-toggle
      background-image: image-url("icons/glyphicons/black/step_forward.png")
      background-image: none, image-url("icons/glyphicons/black/step_forward.svg"), image-url("icons/glyphicons/black/step_forward.png")
    @media (min-width: $ipad-min) and (max-width: $ipad-max)
      .chat-wrapper
        display: none
      .chat-sidebar
        display: block
        float: none
        width: auto
        border-left: 0
        margin-left: 1px
        background: #F8F8F8
      .chat-sidebar-header
        span.chat-sidebar-online-count
          display: inline-block
      ul.chat-online-list
        overflow: auto
        li a
          padding: 3px
          span
            display: inline-block
            font-size: 15px
          img
            +border-radius(3px)
  
.chat-wrapper
  position: relative
  height: 100%
    
.chat-dialog
  position: absolute
  left: 0
  right: 0

  padding: 10px
  
  background: rgb(229,232,239)
  +linear-gradient(rgb(229,232,239),rgb(199,207,216))
  
  border-bottom: 1px solid $color-border-heavy
  
  z-index: 1
  
  background-size: 100% auto
  background-position: center center
  background-repeat: repeat-x
  
  @media (max-width: $ipad-max)
    img
      display: none
  @media (min-width: $desktop-s-min)
    img
      float: left
      border: 1px solid $color-border-dark
      margin-right: 10px
  
  h2
    text-shadow: 1px 1px 0 rgba(255,255,255,.7)
    
  h2, p
    color: #444
    span
      font-weight: bold

.chat-messages
  position: absolute
  top: 0
  bottom: 37px
  overflow: auto
  left: 0
  right: 0
  @media (max-width: $phone)
    padding: 102px 0 0 0
  @media (min-width: $ipad-min) and (max-width: $ipad-max)
    padding: 102px 15px 0 15px
  @media (min-width: $desktop-s-min)
    padding: 102px 25px 0 25px    
  
.chat-footer
  position: absolute
  z-index: 5
  bottom: 0
  height: auto
  left: 0
  right: 0
  border-top: rgba(0,0,0,.2) solid 1px
  +linear-gradient(#f8f8f8,#efefef)
    
  &:not(.with-access-to-settings)
    a.cloud-settings-toggle
      display: none
  form
    position: relative
    margin: 5px 30px 5px 5px
    float: none
    padding-bottom: 6px
    pre
      padding: 0px
      margin-bottom: 0
      min-height: 16px
      max-height: 88px
    textarea
      width: 100%
      padding: 3px 3px 0px 20px
      font-size: 12px
      resize: none
      min-height: 18px
      max-height: 90px
      color: #404040
      background: rgba(0, 0, 0, 0.05) asset-data-url("icons/tools/comment.png") 2px 4px no-repeat
      border: rgba(0, 0, 20, 0.2) solid 1px
      margin-bottom: 0
      +border-radius(3px)
      +box-shadow-inset(0px,0px,1px,rgba(255,255,255,1))
      height: auto
  
a.cloud-settings-toggle
  position: absolute
  right: -56px
  top: 0px
  height: 25px
  width: 25px
  background-image: asset-data-url("icons/glyphicons/gray/cogwheel.png")
  background-position: center center
  background-size: 100%
  +opacity(.4)
  &:hover
    +opacity(.7)
      
.chat-message
  border-top: rgba(255,255,255,.6) solid 1px
  border-bottom: rgba(0,0,0,.1) solid 1px
  padding: 10px
  p
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif !important
    
  &.self-reference
    .chat-message-meta
      text-align: center
      float: none
      margin: 0 0 5px 0
      span
        font-weight: normal
        
    .chat-message-content
      padding-left: 0
      p
        text-align: center
        color: #333
        
  &.chat-message-with-drops
    ul.chat-message-drops
      display: block
    .chat-message-content
      @media (max-width: $ipad-max)
        margin-right: 0
      @media (min-width: $desktop-s-min) and (max-width: $desktop-s-max)
        margin-right: 155px
      @media (min-width: $desktop-m-min)
        margin-right: 310px
      @media (min-width: $desktop-l-min)
        margin-right: 465px
      
      
  &:after
    content: "."
    display: block
    clear: both
    visibility: hidden
    line-height: 0
    height: 0
  &:first-child
    border-top: 0
  &:last-child
    border-bottom: 0
  &:hover
    .chat-message-meta
      +opacity(1)
      
.chat-message-avatar
  float: left
  margin-right: 10px
  img
    width: 50px
    height: 50px
    +border-radius(5px)
    +box-shadow(1px,1px,2px,rgba(0,0,0,.1))
    border: 1px solid #555
    
.chat-message-meta
  float: right
  margin-right: 7px
  font-size: 10px
  font-weight: bold
  +opacity(.5)
  +transition(opacity .08s ease-in)
  
.chat-message-head
  margin-bottom: 5px
  font-weight: bold
  a
    color: inherit
    &:after
      display: inline
      font-size: 10px
      margin-left: 5px
      
    &:hover
      text-decoration: none
      color: $color-blue
      &:after
        color: #666
        
.chat-message-content
  padding-left: 64px
  p
    color: #333333
    margin-bottom: 4px
    word-wrap: break-word
    
ul.chat-message-drops
  display: none
  margin: 0
  
  @media (max-width: $ipad-max)
    float: none
    padding-left: 64px
  @media (min-width: $desktop-s-min)
    float: right
  @media (min-width: $desktop-s-min) and (max-width: $desktop-s-max)
    width: 155px
  @media (min-width: $desktop-m-min) and (max-width: $desktop-m-max)
    width: 310px
  @media (min-width: $desktop-l-min)
    width: 465px
  &:after
    content: "."
    display: block
    clear: both
    visibility: hidden
    line-height: 0
    height: 0
  li
    display: block
    position: relative
    float: right
    
    @media (max-width: $ipad-max)
      float: left
      margin-bottom: 5px
      margin-right: 5px
    @media (min-width: $desktop-s-min)
      float: right
      margin-bottom: 5px
      margin-left: 5px
      
    &:after
      content: "."
      display: block
      clear: both
      visibility: hidden
      line-height: 0
      height: 0
    
    &:hover
      a.drop-title
        display: block
        span
        
li.drop
  display: block
  
  &:after
    content: "."
    display: block
    clear: both
    visibility: hidden
    line-height: 0
    height: 0

a.drop-preview

  @media (max-width: $ipad-max)
    height: 47px
    width: 62px
    padding: 3px
  @media (min-width: $desktop-s-min)
    height: 92px
    width: 122px
    padding: 5px
  
  float:  left
  border: 1px solid $color-border-light
  background: #fff
  
  +box-shadow(1px,1px,3px,rgba(0,0,0,.1))
  +border-radius(3px)
  
  &:hover
    border-color: #8AB8DC
    img
      border-color: #8AB8DC
  img
    @media (max-width: $ipad-max)
      height: 45px
      width: 60px
    @media (min-width: $desktop-s-min)
      height: 90px
      width: 120px
      
    border: 1px solid $color-border-light
    +box-shadow(1px,1px,2px,rgba(0,0,0,.1))
      
.chat-message
  
  &.role-mod
    $color-mod: #6666FF
    .chat-message-avatar > a > img
      border-color: $color-mod darken($color-mod,10%) darken($color-mod,10%) $color-mod
    .chat-message-head > a
      color: $color-mod
      &:hover
        color: darken($color-mod,10%)
  
  &.role-owner
    $color-owner: #8000FF
    .chat-message-avatar > a > img
      border-color: $color-owner darken($color-owner,10%) darken($color-owner,10%) $color-owner
    .chat-message-head > a
      color: $color-owner
      &:hover
        color: darken($color-owner,10%)
  
  // &.role-moderator
  //   .chat-message-head > a:after
  //     content: "mod"
  //     color: #CC9900
  // 
  // &.role-admin
  //   .chat-message-head > a:after
  //     content: "admin"
  //     color: #669966
  
  &.role-developer
{'fraction_non_alphanumeric': 0.12531581606872158, 'fraction_numerical': 0.05332918723520037, 'mean_word_length': 2.1634083364072296, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 23, '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': '234609', 'n_tokens_mistral': 10532, 'n_tokens_neox': 9398, 'n_words': 2190}