@import "@/common/styles/colors"

.waiting-room-page
  height: 100vh
  width: 100vw
  display: flex
  flex-direction: column
  align-items: center
  position: relative
  padding: 20px
  animation: page-fade-in 0.8s ease-in-out

  .waiting-room-header
    display: flex
    flex-direction: column
    align-items: center
    justify-content: center
    width: 100%
    margin-bottom: 30px
    position: relative
    z-index: 2
    animation: float-up 0.8s ease-out

    .back-button
      position: absolute
      left: 20px
      top: 0
      background: none
      border: none
      color: $white
      font-size: 1rem
      display: flex
      align-items: center
      gap: 10px
      cursor: pointer
      transition: all 0.2s ease
      padding: 8px 16px
      border-radius: 5px

      &:hover
        background: rgba(255, 255, 255, 0.1)

    h1
      font-size: 42pt
      color: $white
      margin-bottom: 15px
      text-shadow: 0 0 15px rgba(255, 255, 255, 0.7)
      background: linear-gradient(135deg, $pink, $blue 45%, $mint-green 65%, $yellow 85%, $pink)
      background-size: 300% 100%
      animation: title-shimmer 10s infinite alternate ease-in-out
      -webkit-background-clip: text
      background-clip: text
      -webkit-text-fill-color: transparent

    .room-code-container
      display: flex
      flex-direction: column
      align-items: center
      
      .room-code
        font-size: 1.2rem
        color: $white
        background: rgba(255, 255, 255, 0.1)
        padding: 10px 25px
        border-radius: 10px
        cursor: pointer
        transition: all 0.3s ease
        border: 1px solid rgba(255, 255, 255, 0.2)
        backdrop-filter: blur(5px)
        display: flex
        align-items: center
        gap: 10px
        
        &:hover
          background: rgba(255, 255, 255, 0.2)
          border: 1px solid rgba(255, 255, 255, 0.4)
        
        .code
          font-weight: bold
          font-size: 1.3rem
          color: $yellow
          letter-spacing: 2px
          margin-left: 5px
          margin-right: 5px
          
        svg
          font-size: 1rem
          transition: all 0.3s ease
          
          &.copied
            color: $mint-green
            animation: pop 0.3s ease
            
      .copy-hint
        margin-top: 5px
        font-size: 0.8rem
        color: $border
        opacity: 0.7

  .waiting-room-content
    display: flex
    width: 100%
    max-width: 1200px
    gap: 30px
    height: calc(100vh - 140px)
    z-index: 2
    position: relative
    animation: float-up 1.2s ease-out
    overflow: hidden

    .users-panel,
    .chat-panel
      background: rgba(255, 255, 255, 0.08)
      backdrop-filter: blur(10px)
      border-radius: 20px
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 255, 255, 0.1)
      border: 1px solid rgba(255, 255, 255, 0.2)
      display: flex
      flex-direction: column
      animation: card-pulse 6s infinite alternate ease-in-out
      transition: all 0.3s ease
      
      &:hover
        border: 1px solid rgba(255, 255, 255, 0.3)
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(255, 255, 255, 0.15)

    .users-panel
      width: 30%
      
      .users-list
        flex-grow: 1
        overflow-y: auto
        padding: 15px
        min-height: 0
        
        &::-webkit-scrollbar
          width: 6px
          background: rgba(0, 0, 0, 0.2)
          border-radius: 3px
        
        &::-webkit-scrollbar-thumb
          background: rgba(255, 255, 255, 0.2)
          border-radius: 3px
          
          &:hover
            background: rgba(255, 255, 255, 0.3)
        
        .no-users
          color: $border
          text-align: center
          padding: 20px 0
          font-style: italic
            
        .user-item
          margin-bottom: 10px
          padding: 12px 15px
          background: rgba(255, 255, 255, 0.05)
          border-radius: 10px
          color: $white
          display: flex
          align-items: center
          justify-content: space-between
          transition: all 0.2s ease
          border: 1px solid rgba(255, 255, 255, 0.1)
          
          &:hover
            background: rgba(255, 255, 255, 0.1)
            transform: translateY(-2px)
            
          &.host
            border: 1px solid $yellow
            box-shadow: 0 0 10px rgba($yellow, 0.3)
            
          .host-badge
            background: $yellow
            color: #000
            font-size: 0.75rem
            padding: 3px 8px
            border-radius: 10px
            font-weight: bold
            text-transform: uppercase
      
      .game-controls
        margin: 15px
        display: flex
        flex-direction: column
        gap: 10px
            
        .start-game-button
          padding: 15px
          background: linear-gradient(135deg, $purple, $blue)
          border: none
          border-radius: 12px
          color: $white
          font-size: 1.1rem
          display: flex
          align-items: center
          justify-content: center
          gap: 10px
          cursor: pointer
          transition: all 0.3s ease
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3)
          
          svg
            font-size: 1.2rem
            
          &:hover:not(.disabled)
            transform: translateY(-3px)
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 15px rgba($purple, 0.6)
            background: linear-gradient(135deg, lighten($purple, 5%), lighten($blue, 5%))
          
          &.disabled
            background: linear-gradient(135deg, desaturate($purple, 40%), desaturate($blue, 40%))
            opacity: 0.7
            cursor: not-allowed
            
        .start-hint
          color: $border
          text-align: center
          font-size: 0.8rem
          font-style: italic

    .chat-panel
      width: 70%
      display: flex
      flex-direction: column
      height: 100%
      
      .chat-messages
        flex-grow: 1
        overflow-y: auto
        padding: 15px
        display: flex
        flex-direction: column
        min-height: 0
        
        &::-webkit-scrollbar
          width: 8px
          background: rgba(0, 0, 0, 0.2)
          border-radius: 4px
        
        &::-webkit-scrollbar-thumb
          background: rgba(255, 255, 255, 0.2)
          border-radius: 4px
          
          &:hover
            background: rgba(255, 255, 255, 0.3)

        .message
          margin-bottom: 10px
          padding: 10px 15px
          border-radius: 12px
          background: rgba(255, 255, 255, 0.05)
          border: 1px solid rgba(255, 255, 255, 0.1)
          color: $white
          animation: message-fade-in 0.3s ease-out
          width: fit-content
          max-width: 80%
          align-self: flex-start
          
          &:hover
            background: rgba(255, 255, 255, 0.1)
            
          .message-sender
            font-weight: bold
            color: $yellow
            margin-right: 5px
            
          .message-text
            color: $white
            
          &.system-message
            background: rgba(0, 0, 0, 0.2)
            border: 1px solid rgba(255, 255, 255, 0.05)
            color: $border
            padding: 8px 12px
            font-style: italic
            align-self: center
            
            .message-text.system
              color: $border
              font-style: italic
      
      .chat-input
        display: flex
        padding: 15px
        gap: 10px
        background: rgba(30, 30, 30, 0.5)
        border-top: 1px solid rgba(255, 255, 255, 0.1)
        border-radius: 0 0 20px 20px
        
        input
          flex: 1
          padding: 12px 15px
          background: rgba(0, 0, 0, 0.3)
          border: 1px solid rgba(255, 255, 255, 0.1)
          border-radius: 8px
          color: $white
          outline: none
          transition: all 0.2s ease
          
          &:focus
            border: 1px solid rgba(255, 255, 255, 0.3)
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.1)
            
        button
          padding: 12px 20px
          background: linear-gradient(135deg, $purple, $blue)
          border: none
          border-radius: 8px
          color: $white
          cursor: pointer
          transition: all 0.3s ease
          
          &:hover
            transform: translateY(-2px)
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 10px rgba($purple, 0.5)
  
  .panel-header
    display: flex
    align-items: center
    gap: 10px
    padding: 15px
    background: rgba(30, 30, 30, 0.5)
    border-bottom: 1px solid rgba(255, 255, 255, 0.1)
    border-radius: 20px 20px 0 0
    
    svg
      color: $white
      font-size: 1.4rem
      
    h2
      color: $white
      font-size: 1.4rem
      margin: 0

.playlist-section
  background: rgba(20, 20, 30, 0.6)
  backdrop-filter: blur(10px)
  border-radius: 15px
  padding: 25px
  animation: float-up 0.8s ease-out
  border: 1px solid rgba(255, 255, 255, 0.1)
  transition: all 0.3s ease
  
  &:hover
    border-color: rgba(255, 255, 255, 0.2)
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3)
  
  .section-header
    background: rgba(30, 30, 40, 0.95)
    padding: 20px
    border-radius: 12px
    margin: -25px -25px 25px -25px
    border-bottom: 1px solid rgba(255, 255, 255, 0.1)
    text-align: center
    
    h2
      margin: 0
      font-size: 24px
      color: $white
      display: flex
      align-items: center
      justify-content: center
      gap: 10px
      
      &:before, &:after
        content: ""
        height: 1px
        width: 50px
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent)
    
    .vote-info
      color: rgba(255, 255, 255, 0.6)
      font-size: 14px
      margin-top: 5px

  .playlists-grid
    display: grid
    grid-template-columns: repeat(3, 1fr)
    gap: 20px
    padding: 5px
    
    @media (max-width: 1200px)
      grid-template-columns: repeat(2, 1fr)
    
    @media (max-width: 768px)
      grid-template-columns: 1fr

.playlist-card
  background: rgba(255, 255, 255, 0.05)
  border-radius: 12px
  overflow: hidden
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
  cursor: pointer
  border: 1px solid rgba(255, 255, 255, 0.1)
  
  &:hover
    transform: translateY(-5px)
    background: rgba(255, 255, 255, 0.08)
    border-color: rgba(255, 255, 255, 0.2)
    
    .playlist-overlay
      opacity: 1
  
  &.selected
    background: rgba($yellow, 0.1)
    border-color: rgba($yellow, 0.3)
    box-shadow: 0 0 30px rgba($yellow, 0.15)
    
    .playlist-overlay
      opacity: 1
      background: rgba(0, 0, 0, 0.4)
      
    .your-vote
      transform: translateY(0)
      opacity: 1
    
    .playlist-info h3
      color: $yellow

  .playlist-thumbnail
    position: relative
    width: 100%
    padding-top: 56.25%
    
    img
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 100%
      object-fit: cover
    
    .playlist-overlay
      position: absolute
      inset: 0
      background: rgba(0, 0, 0, 0.3)
      opacity: 0
      transition: all 0.3s ease
      display: flex
      flex-direction: column
      justify-content: center
      align-items: center
      
      .vote-count
        background: rgba(20, 20, 30, 0.85)
        padding: 12px 20px
        border-radius: 15px
        text-align: center
        border: 1px solid rgba(255, 255, 255, 0.2)
        backdrop-filter: blur(5px)
        
        .count
          font-size: 28px
          font-weight: bold
          color: $yellow
          display: block
          text-shadow: 0 0 10px rgba($yellow, 0.5)
        
        .vote-label
          font-size: 12px
          color: rgba(255, 255, 255, 0.7)
      
      .your-vote
        position: absolute
        bottom: 15px
        background: $yellow
        color: rgba(0, 0, 0, 0.8)
        padding: 8px 16px
        border-radius: 20px
        font-weight: bold
        font-size: 12px
        transform: translateY(20px)
        opacity: 0
        transition: all 0.3s ease
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3)

  .playlist-info
    padding: 15px
    background: rgba(20, 20, 30, 0.4)
    border-top: 1px solid rgba(255, 255, 255, 0.05)
    
    h3
      color: $white
      margin-bottom: 8px
      font-size: 18px
      transition: color 0.3s ease
    
    .playlist-details
      display: flex
      flex-direction: column
      gap: 8px
      
      span
        color: rgba(255, 255, 255, 0.6)
        font-size: 13px
      
      .vote-percentage-bar
        height: 4px
        background: rgba(255, 255, 255, 0.1)
        border-radius: 2px
        overflow: hidden
        
        .fill
          height: 100%
          background: linear-gradient(90deg, $yellow, rgba($yellow, 0.5))
          box-shadow: 0 0 10px rgba($yellow, 0.3)
          transition: width 0.3s ease

.bottom-section
  display: flex
  gap: 30px
  width: 100%
  min-height: 0
  height: 300px
  margin-top: 20px
  
  .users-panel
    height: 100%
    display: flex
    flex-direction: column
    background: rgba(20, 20, 30, 0.6)
    border-radius: 15px
    border: 1px solid rgba(255, 255, 255, 0.1)
    overflow: hidden
    transition: all 0.3s ease
    
    &:hover
      border-color: rgba(255, 255, 255, 0.2)
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3)
    
    .panel-header
      background: rgba(30, 30, 40, 0.95)
      padding: 20px
      border-bottom: 1px solid rgba(255, 255, 255, 0.1)
      
      h2
        font-size: 20px
        display: flex
        align-items: center
        gap: 10px
        
        svg
          color: $yellow
          filter: drop-shadow(0 0 8px rgba($yellow, 0.4))
    
    .users-list
      padding: 15px
      flex: 1
      overflow-y: auto
      min-height: 0
      
      .user-item
        background: rgba(255, 255, 255, 0.05)
        margin-bottom: 10px
        padding: 12px 15px
        border-radius: 10px
        transition: all 0.3s ease
        border: 1px solid rgba(255, 255, 255, 0.05)
        
        &:hover
          transform: translateY(-2px)
          background: rgba(255, 255, 255, 0.08)
          border-color: rgba(255, 255, 255, 0.1)
        
        &.host
          background: rgba($yellow, 0.1)
          border-color: rgba($yellow, 0.3)
          
          .host-badge
            background: $yellow
            color: #000
            font-size: 12px
            padding: 4px 8px
            border-radius: 20px
            font-weight: bold
    
    .game-controls
      padding: 15px
      background: rgba(20, 20, 30, 0.4)
      border-top: 1px solid rgba(255, 255, 255, 0.05)
      
      .start-game-button
        width: 100%
        padding: 12px
        background: linear-gradient(135deg, $purple, $blue)
        border-radius: 10px
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
        
        &:not(.disabled):hover
          transform: translateY(-2px)
          filter: brightness(1.1)
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4)
  
  .chat-panel
    flex: 1
    height: 100%
    background: rgba(20, 20, 30, 0.6)
    border-radius: 15px
    border: 1px solid rgba(255, 255, 255, 0.1)
    display: flex
    flex-direction: column
    overflow: hidden
    transition: all 0.3s ease
    
    &:hover
      border-color: rgba(255, 255, 255, 0.2)
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3)
    
    .panel-header
      background: rgba(30, 30, 40, 0.95)
      padding: 20px
      border-bottom: 1px solid rgba(255, 255, 255, 0.1)
      
      h2
        font-size: 20px
        display: flex
        align-items: center
        gap: 10px
        
        svg
          color: $blue
          filter: drop-shadow(0 0 8px rgba($blue, 0.4))
    
    .chat-messages
      flex: 1
      padding: 20px
      overflow-y: auto
      display: flex
      flex-direction: column
      gap: 10px
      min-height: 0
      
      .message
        max-width: 85%
        padding: 10px 15px
        border-radius: 12px
        background: rgba(255, 255, 255, 0.05)
        border: 1px solid rgba(255, 255, 255, 0.05)
        transition: all 0.3s ease
        
        &:hover
          background: rgba(255, 255, 255, 0.08)
          border-color: rgba(255, 255, 255, 0.1)
          transform: translateY(-1px)
        
        .message-sender
          color: $yellow
          font-weight: 600
          margin-right: 8px
        
        &.system-message
          align-self: center
          background: rgba(0, 0, 0, 0.2)
          font-style: italic
          color: rgba(255, 255, 255, 0.6)
          padding: 8px 16px
          border-radius: 20px
    
    .chat-input
      padding: 15px
      background: rgba(20, 20, 30, 0.4)
      border-top: 1px solid rgba(255, 255, 255, 0.05)
      display: flex
      gap: 10px
      
      input
        flex: 1
        background: rgba(0, 0, 0, 0.2)
        border: 1px solid rgba(255, 255, 255, 0.1)
        border-radius: 8px
        padding: 12px 15px
        color: $white
        transition: all 0.3s ease
        
        &:focus
          border-color: rgba($blue, 0.5)
          box-shadow: 0 0 15px rgba($blue, 0.1)
          background: rgba(0, 0, 0, 0.3)
      
      button
        padding: 12px 20px
        background: linear-gradient(135deg, $purple, $blue)
        border-radius: 8px
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
        
        &:hover
          transform: translateY(-2px)
          filter: brightness(1.1)
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3)

@keyframes pop
  0%
    transform: scale(1)
  50%
    transform: scale(1.3)
  100%
    transform: scale(1)

@keyframes title-shimmer
  0%
    background-position: 0% 50%
  50% 
    background-position: 100% 50%
  100%
    background-position: 0% 50%

@keyframes message-fade-in
  0%
    opacity: 0
    transform: translateY(5px)
  100%
    opacity: 1
    transform: translateY(0)

@keyframes card-pulse
  0%, 100%
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 255, 255, 0.1)
  50%
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(255, 255, 255, 0.2)

@keyframes float-up
  0%
    opacity: 0
    transform: translateY(20px)
  100%
    opacity: 1
    transform: translateY(0)

@keyframes page-fade-in
  0%
    opacity: 0
  100%
    opacity: 1