@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 - 180px)
    z-index: 2
    position: relative
    animation: float-up 1.2s ease-out

    .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
        
        &::-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
      
      .chat-messages
        flex-grow: 1
        overflow-y: auto
        padding: 15px
        display: flex
        flex-direction: column
        
        &::-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

@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