@import "../../../../../styles/index.scss";

// Chat Header Styles
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 20px;
  padding-bottom: 5px;
  background: $whiteColor;
  border-bottom: 1px solid $accordionBgBackground;
  border-radius: 10px 10px 0 0;
  height: 64px;

  .chat-header-content {
    max-width: 350px;
    width: 100%;

    .chat-title {
      color: $mainFontColor;
      font-size: 16px;
      font-style: normal;
      font-weight: $ExtraFontWeight;
      line-height: 24px;
      display: flex;
      align-items: center;
      gap: 8px;

      .resolved-badge {
        color: $primaryColor;
        font-size: 14px;
        font-style: normal;
        font-weight: $normalFontWeight;
        line-height: 20px;
        display: flex;
        align-items: center;
        img {
          width: 16px;
          height: 16px;
          margin-right: 2px;
        }
      }
    }

    .chat-id {
      color: $deactivateColor;
      font-size: 14px;
      font-style: normal;
      font-weight: $normalFontWeight;
      line-height: 21px;
    }

    .chat-created-by {
      color: $deactivateColor;
      font-size: 14px;
      font-style: normal;
      font-weight: $normalFontWeight;
      line-height: 21px;
      margin-left: 5px;

      &::before {
        content: "|";
        margin-right: 6px;
        color: $deactivateColor;
      }
    }

    .chat-info-container {
      display: block;
      max-width: 100%;
      width: 100%;
      color: $deactivateColor;
      font-size: 14px;
      font-style: normal;
      font-weight: $normalFontWeight;
      line-height: 21px;
    }

    .chat-created-by-container {
      display: inline-block;
      max-width: 100%;
    }

    .chat-created-at {
      color: $deactivateColor;
      font-size: 14px;
      font-style: normal;
      font-weight: $normalFontWeight;
      line-height: 21px;
    }

    .chat-text-ellipsis {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .chat-participants {
    display: flex;
    align-items: center;
    gap: 12px;

    .participant-avatars {
      display: flex;
      align-items: center;

      .participant-avatar {
        border: 2px solid $whiteColor;
        box-shadow: 0px 1px 3px $boxShadowLight;
      }

      .more-participants {
        background: $lightBlueColor;
        color: $primaryColor;
        font-size: 11px;
        font-weight: $semiBoldFontWeight;
        padding: 4px 6px;
        border-radius: 50%;
        min-width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: -8px;
        border: 2px solid $whiteColor;
      }
    }

    .participants-button {
      background: none !important;
      border: none !important;
      color: $inputInfoColor;
      cursor: pointer;
      padding: 4px;
      border-radius: 4px;
    }
  }
}

.chat-pinned {
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  padding: 0.25rem;
}
.chat-header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ia-styles.ia-menu.three-dot-menu-container .MuiPaper-root {
  margin-left: 32px;
  margin-top: 4px;
}
.search-enabled {
  flex: 1;
  min-width: 0; // Allow flex item to shrink and prevent overflow
}

.chat-search-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0; // Allow shrink so input doesn’t force overflow

  .chat-search-input-container {
    min-width: 0;
    flex: 1;
    width: 100%;

    // Scoped overrides for Input component (search field)
    .impact_inputbox_container_with_icons {
      width: 100%;

      .impact-input-wrapper {
        min-width: 0;
      }

      .MuiInputBase-root {
        font-size: 14px;
      }

      input.MuiInputBase-input {
        padding: 8px 12px;
        font-size: 14px;
      }
    }
  }

  .search-icon {
    cursor: pointer;
    flex-shrink: 0;
  }
}
.chat-participants-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

.chat-header-right-button {
  height: 32px;
  width: 32px;
  background: $textButtonPrimaryBg;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3em;
  border-radius: 10px;
  padding: 0.5rem;
  cursor: pointer;
  &:active {
    background-color: $infoBackground;
    transform: scale(0.98);
  }
}

.ia-styles.ia-menu.participants-menu-container {
  .MuiPaper-root {
    margin-left: 28px;
    width: 260px;
    // max-height: 400px !important; // Set maximum height for entire menu
    overflow: hidden !important; // Force no scrolling on container
    display: flex;
    flex-direction: column;
  }
  .menu-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: $whiteColor;
    padding: 4px 0px 0px;

    // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: $borderRadiusLarge $borderRadiusLarge 0 0;
    flex-shrink: 0; // Prevent header from shrinking
  }

  .MuiList-root {
    overflow-x: hidden; // Force no horizontal scroll
    flex: 1;
    // max-height: calc(
    //   400px - 180px
    // ) !important; // Reserve space for header (~120px) + footer (~60px)
    padding-top: 0;

    // Custom scrollbar styling for participants menu
    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: $deactivateColor;
      border-radius: 3px;

      &:hover {
        background: $lightGrayColor;
      }
    }
  }
  // Additional specific targeting for MUI components
  .MuiMenu-paper {
    overflow: hidden !important;
  }

  .MuiMenu-list {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: 320px;
  }

  .MuiButtonBase-root {
    padding: 6px 16px;
  }
  .menu-header-radio-group-container {
    .ia-radioGroup .MuiFormControlLabel-root .MuiButtonBase-root {
      padding-left: 12px !important;
    }
    .MuiButtonBase-root {
      padding-top: 8px;
      padding-bottom: 8px;
      padding-left: 14px;
      padding-right: 8px;
    }
  }

  .ia-menu-action-button-container {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: $whiteColor;
    padding: 8px 8px 4px;
    margin-top: auto; // Push to bottom
    flex-shrink: 0; // Prevent from shrinking
    width: 100%;
    border-top: none;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
  }
}

.participants-img {
  height: 22px;
}

.btn_border_participant {
  border: none !important;
  background: $textButtonPrimaryBg !important;
  height: 32px !important;
}
.pinned_img {
  border: none !important;
  background: none;
  background-color: transparent !important;
}
